@authhero/widget 0.11.0 → 0.12.0

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

@@ -1 +1 @@
-import{p as a,b as e}from"./p-ARKBiJrR.js";export{s as setNonce}from"./p-ARKBiJrR.js";import{g as t}from"./p-DQuL1Twl.js";(()=>{const e=import.meta.url,t={};return""!==e&&(t.resourcesUrl=new URL(".",e).href),a(t)})().then((async a=>(await t(),e([["p-695138d6",[[513,"authhero-node",{component:[16],value:[1],disabled:[4],passwordVisible:[32]}]]],["p-145b5ecd",[[513,"authhero-widget",{screen:[1],apiUrl:[1,"api-url"],baseUrl:[1,"base-url"],state:[1025],screenId:[1025,"screen-id"],authParams:[1,"auth-params"],statePersistence:[1,"state-persistence"],storageKey:[1,"storage-key"],branding:[1],theme:[1],loading:[1028],autoSubmit:[4,"auto-submit"],autoNavigate:[4,"auto-navigate"],_screen:[32],_authParams:[32],_branding:[32],_theme:[32],formData:[32]},null,{screen:[{watchScreen:0}],branding:[{watchBranding:0}],theme:[{watchTheme:0}],authParams:[{watchAuthParams:0}]}]]]],a))));
+import{p as e,b as a}from"./p-ARKBiJrR.js";export{s as setNonce}from"./p-ARKBiJrR.js";import{g as t}from"./p-DQuL1Twl.js";(()=>{const a=import.meta.url,t={};return""!==a&&(t.resourcesUrl=new URL(".",a).href),e(t)})().then((async e=>(await t(),a([["p-130714cc",[[513,"authhero-node",{component:[16],value:[1],disabled:[4],passwordVisible:[32]}]]],["p-2c7cceee",[[513,"authhero-widget",{screen:[1],apiUrl:[1,"api-url"],baseUrl:[1,"base-url"],state:[1025],screenId:[1025,"screen-id"],authParams:[1,"auth-params"],statePersistence:[1,"state-persistence"],storageKey:[1,"storage-key"],branding:[1],theme:[1],loading:[1028],autoSubmit:[4,"auto-submit"],autoNavigate:[4,"auto-navigate"],_screen:[32],_authParams:[32],_branding:[32],_theme:[32],formData:[32]},null,{screenId:[{watchScreenId:0}],screen:[{watchScreen:0}],branding:[{watchBranding:0}],theme:[{watchTheme:0}],authParams:[{watchAuthParams:0}]}]]]],e))));

package/dist/authhero-widget/p-130714cc.entry.js

@@ -0,0 +1 @@
+import{r as t,c as e,h as r}from"./p-ARKBiJrR.js";const i=class{constructor(r){t(this,r),this.fieldChange=e(this,"fieldChange"),this.buttonClick=e(this,"buttonClick")}component;value;disabled=!1;passwordVisible=!1;fieldChange;buttonClick;handleInput=t=>{this.fieldChange.emit({id:this.component.id,value:t.target.value})};handleCheckbox=t=>{this.fieldChange.emit({id:this.component.id,value:t.target.checked?"true":"false"})};sanitizeForCssToken(t){return t.toLowerCase().replace(/[^a-z0-9-]/g,"-").replace(/-+/g,"-").replace(/^-|-$/g,"")}handleButtonClick=(t,e,r)=>{"submit"!==e&&t.preventDefault(),this.buttonClick.emit({id:this.component.id,type:e,value:r})};togglePasswordVisibility=()=>{this.passwordVisible=!this.passwordVisible};getErrors(){const t=this.component;return t.messages?.filter((t=>"error"===t.type))||[]}renderFloatingLabel(t,e,i,o){return t?r("label",{class:{"input-label":!0,floating:!!o},part:"label",htmlFor:e},t,i&&r("span",{class:"required"},"*")):null}renderLabel(t,e,i){return t?r("label",{class:"input-label",part:"label",htmlFor:e},t,i&&r("span",{class:"required"},"*")):null}renderPasswordToggle(){return this.passwordVisible?r("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},r("path",{d:"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"}),r("line",{x1:"1",y1:"1",x2:"23",y2:"23"})):r("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},r("path",{d:"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"}),r("circle",{cx:"12",cy:"12",r:"3"}))}renderErrors(){return this.getErrors().map((t=>r("span",{class:"error-text",part:"error-text",key:t.id??t.text},t.text)))}renderHint(t){return t?r("span",{class:"helper-text",part:"helper-text"},t):null}renderDivider(){return r("hr",{class:"divider",part:"divider"})}renderHtml(t){return r("div",{class:"html-content",part:"html-content",innerHTML:t.config?.content??""})}renderImage(t){const{src:e,alt:i,width:o,height:n}=t.config??{};return e?r("img",{class:"image",part:"image",src:e,alt:i??"",width:o,height:n,loading:"lazy"}):null}renderRichText(t){return r("div",{class:"rich-text",part:"rich-text",innerHTML:t.config?.content??""})}renderNextButton(t){return r("button",{type:"submit",class:"btn btn-primary",part:"button button-primary","data-primary-action-button":!0,disabled:this.disabled,onClick:t=>this.handleButtonClick(t,"submit","next")},t.config.text??"Continue")}renderPreviousButton(t){return r("button",{type:"button",class:"btn btn-secondary",part:"button button-secondary",disabled:this.disabled,onClick:t=>this.handleButtonClick(t,"previous","back")},t.config.text??"Back")}renderJumpButton(t){return r("button",{type:"button",class:"btn btn-link",part:"button button-link",disabled:this.disabled,onClick:e=>this.handleButtonClick(e,"jump",t.config.target_step)},t.config.text??"Go")}renderResendButton(t){return r("button",{type:"button",class:"btn btn-link",part:"button button-link",disabled:this.disabled,onClick:e=>this.handleButtonClick(e,"resend",t.config.resend_action)},t.config.text??"Resend")}renderTextField(t){const e=`input-${t.id}`,i=this.getErrors(),{multiline:o,max_length:n}=t.config??{},a=!!(this.value&&this.value.length>0);return o?r("div",{class:"input-wrapper",part:"input-wrapper"},this.renderLabel(t.label,e,t.required),r("textarea",{id:e,class:{"input-field":!0,"has-error":i.length>0},part:"input textarea",name:t.id,placeholder:" ",required:t.required,disabled:this.disabled,maxLength:n,onInput:this.handleInput},this.value??""),this.renderErrors(),0===i.length&&this.renderHint(t.hint)):r("div",{class:"input-wrapper",part:"input-wrapper"},r("div",{class:"input-container"},r("input",{id:e,class:{"input-field":!0,"has-error":i.length>0},part:"input",type:t.sensitive?"password":"text",name:t.id,"data-input-name":t.id,value:this.value??"",placeholder:" ",required:t.required,disabled:this.disabled,maxLength:n,onInput:this.handleInput}),this.renderFloatingLabel(t.label,e,t.required,a)),this.renderErrors(),0===i.length&&this.renderHint(t.hint))}renderEmailField(t){const e=`input-${t.id}`,i=this.getErrors(),o=!!(this.value&&this.value.length>0);return r("div",{class:"input-wrapper",part:"input-wrapper"},r("div",{class:"input-container"},r("input",{id:e,class:{"input-field":!0,"has-error":i.length>0},part:"input",type:"email",name:t.id,"data-input-name":t.id,value:this.value??"",placeholder:" ",required:t.required,disabled:this.disabled,autocomplete:"email",onInput:this.handleInput}),this.renderFloatingLabel(t.label,e,t.required,o)),this.renderErrors(),0===i.length&&this.renderHint(t.hint))}renderPasswordField(t){const e=`input-${t.id}`,i=this.getErrors(),o=!!(this.value&&this.value.length>0),n=t.config?.forgot_password_link;return r("div",{class:"input-wrapper",part:"input-wrapper"},r("div",{class:"input-container password-container"},r("input",{id:e,class:{"input-field":!0,"has-error":i.length>0},part:"input",type:this.passwordVisible?"text":"password",name:t.id,"data-input-name":t.id,value:this.value??"",placeholder:" ",required:t.required,disabled:this.disabled,minLength:t.config?.min_length,autocomplete:"current-password",onInput:this.handleInput}),this.renderFloatingLabel(t.label,e,t.required,o),r("button",{type:"button",class:"password-toggle",part:"password-toggle",onClick:this.togglePasswordVisibility,"aria-label":"Toggle password visibility","aria-pressed":this.passwordVisible?"true":"false"},this.renderPasswordToggle())),this.renderErrors(),0===i.length&&this.renderHint(t.hint),n&&r("div",{class:"field-link",part:"field-link"},r("a",{href:n,class:"link",part:"link"},"Forgot password?")))}renderNumberField(t){const e=`input-${t.id}`,i=this.getErrors(),{placeholder:o,min:n,max:a,step:s}=t.config??{};return r("div",{class:"input-wrapper",part:"input-wrapper"},this.renderLabel(t.label,e,t.required),r("input",{id:e,class:{"input-field":!0,"has-error":i.length>0},part:"input",type:"number",name:t.id,value:this.value??"",placeholder:o,required:t.required,disabled:this.disabled,min:n,max:a,step:s,onInput:this.handleInput}),this.renderErrors(),0===i.length&&this.renderHint(t.hint))}renderTelField(t){const e=`input-${t.id}`,i=this.getErrors();return r("div",{class:"input-wrapper",part:"input-wrapper"},this.renderLabel(t.label,e,t.required),r("input",{id:e,class:{"input-field":!0,"has-error":i.length>0},part:"input",type:"tel",name:t.id,value:this.value??"",placeholder:t.config?.placeholder,required:t.required,disabled:this.disabled,autocomplete:"tel",onInput:this.handleInput}),this.renderErrors(),0===i.length&&this.renderHint(t.hint))}renderUrlField(t){const e=`input-${t.id}`,i=this.getErrors();return r("div",{class:"input-wrapper",part:"input-wrapper"},this.renderLabel(t.label,e,t.required),r("input",{id:e,class:{"input-field":!0,"has-error":i.length>0},part:"input",type:"url",name:t.id,value:this.value??"",placeholder:t.config?.placeholder,required:t.required,disabled:this.disabled,onInput:this.handleInput}),this.renderErrors(),0===i.length&&this.renderHint(t.hint))}renderDateField(t){const e=`input-${t.id}`,i=this.getErrors(),{min:o,max:n}=t.config??{};return r("div",{class:"input-wrapper",part:"input-wrapper"},this.renderLabel(t.label,e,t.required),r("input",{id:e,class:{"input-field":!0,"has-error":i.length>0},part:"input",type:"date",name:t.id,value:this.value??"",required:t.required,disabled:this.disabled,min:o,max:n,onInput:this.handleInput}),this.renderErrors(),0===i.length&&this.renderHint(t.hint))}renderBooleanField(t){return r("label",{class:"checkbox-wrapper",part:"checkbox-wrapper"},r("input",{type:"checkbox",part:"checkbox",name:t.id,checked:"true"===this.value||!0===t.config?.default_value,required:t.required,disabled:this.disabled,onChange:this.handleCheckbox}),r("span",{class:"checkbox-label",part:"checkbox-label"},t.label))}renderLegalField(t){const e=t.config?.text??t.label??"",i=!0===t.config?.html;return r("label",{class:"checkbox-wrapper",part:"checkbox-wrapper"},r("input",{type:"checkbox",part:"checkbox",name:t.id,checked:"true"===this.value,required:t.required,disabled:this.disabled,onChange:this.handleCheckbox}),i?r("span",{class:"checkbox-label",part:"checkbox-label",innerHTML:e}):r("span",{class:"checkbox-label",part:"checkbox-label"},e))}renderDropdownField(t){const e=`input-${t.id}`,i=this.getErrors(),{options:o,placeholder:n}=t.config??{};return r("div",{class:"input-wrapper",part:"input-wrapper"},this.renderLabel(t.label,e,t.required),r("select",{id:e,class:{"input-field":!0,"has-error":i.length>0},part:"input select",name:t.id,required:t.required,disabled:this.disabled,onChange:this.handleInput},n&&r("option",{value:"",disabled:!0,selected:!this.value},n),o?.map((t=>r("option",{value:t.value,selected:this.value===t.value,key:t.value},t.label)))),this.renderErrors(),0===i.length&&this.renderHint(t.hint))}renderChoiceField(t){const e=this.getErrors(),{options:i,display:o}=t.config??{},n="checkbox"===o,a=n?"checkbox":"radio";return r("div",{class:"choice-wrapper",part:"choice-wrapper"},t.label&&r("span",{class:"choice-label",part:"choice-label"},t.label,t.required&&r("span",{class:"required"},"*")),r("div",{class:"choice-options",part:"choice-options"},i?.map((e=>r("label",{class:"choice-option",part:"choice-option",key:e.value},r("input",{type:a,part:a,name:t.id,value:e.value,checked:this.value===e.value,required:t.required&&!n,disabled:this.disabled,onChange:this.handleInput}),r("span",null,e.label))))),this.renderErrors(),0===e.length&&this.renderHint(t.hint))}renderSocialField(t){const e=t.config?.providers??[],i=t.config?.provider_details,o=new Map(i?.map((t=>[t.name,t]))??[]),n=t=>{const e=o.get(t),i=this.sanitizeForCssToken(t);return e?.icon_url?r("img",{class:"social-icon",part:`social-icon social-icon-${i}`,src:e.icon_url,alt:e.display_name||t}):null};return r("div",{class:"social-buttons",part:"social-buttons"},e.map((t=>{const e=this.sanitizeForCssToken(t),i=(t=>{const e=o.get(t);return e?.strategy??t})(t),a=n(t);return r("button",{type:"button",class:`btn btn-secondary btn-social btn-social-${e}${a?"":" no-icon"}`,part:`button button-secondary button-social button-social-${e}`,"data-connection-name":t,"data-strategy":i,disabled:this.disabled,onClick:e=>this.handleButtonClick(e,"SOCIAL",t),key:t},a,r("span",{class:"btn-social-content",part:`button-social-content button-social-content-${e}`},r("span",{part:`button-social-text button-social-text-${e}`},(t=>{const e=o.get(t);return e?.display_name?e.display_name:t.split("-").map((t=>t.charAt(0).toUpperCase()+t.slice(1))).join(" ")})(t)),r("span",{class:"btn-social-subtitle",part:`button-social-subtitle button-social-subtitle-${e}`})))})))}render(){if(!this.component)return null;if(!1===this.component.visible)return null;switch(this.component.type){case"DIVIDER":return this.renderDivider();case"HTML":return this.renderHtml(this.component);case"IMAGE":return this.renderImage(this.component);case"RICH_TEXT":return this.renderRichText(this.component);case"NEXT_BUTTON":return this.renderNextButton(this.component);case"PREVIOUS_BUTTON":return this.renderPreviousButton(this.component);case"JUMP_BUTTON":return this.renderJumpButton(this.component);case"RESEND_BUTTON":return this.renderResendButton(this.component);case"TEXT":return this.renderTextField(this.component);case"EMAIL":return this.renderEmailField(this.component);case"PASSWORD":return this.renderPasswordField(this.component);case"NUMBER":return this.renderNumberField(this.component);case"TEL":return this.renderTelField(this.component);case"URL":return this.renderUrlField(this.component);case"DATE":return this.renderDateField(this.component);case"BOOLEAN":return this.renderBooleanField(this.component);case"LEGAL":return this.renderLegalField(this.component);case"DROPDOWN":return this.renderDropdownField(this.component);case"CHOICE":return this.renderChoiceField(this.component);case"SOCIAL":return this.renderSocialField(this.component);case"AUTH0_VERIFIABLE_CREDENTIALS":case"GMAPS_ADDRESS":case"RECAPTCHA":return console.warn(`Widget component "${this.component.type}" not yet implemented`),null;case"CARDS":case"CUSTOM":case"FILE":case"PAYMENT":return console.warn(`Component "${this.component.type}" not yet implemented`),null;default:return console.warn(`Unknown component type: ${this.component.type}`),null}}};i.style=':host{display:block}.input-wrapper{display:flex;flex-direction:column;position:relative;margin-bottom:16px}.input-container{position:relative;width:100%}.input-label{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size: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{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-text, #1e212a);background-color:var(--ah-color-input-bg, #ffffff);border: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-text-muted, #65676e);transition:color 0.15s ease}.password-toggle:hover{color: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: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:14px;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: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-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{filter:brightness(0.85)}.btn-secondary{background-color:var(--ah-color-bg, #ffffff);color:var(--ah-color-text, #1e212a);border:1px solid 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}.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:20px;font-weight:400;color:var(--ah-color-text, #1e212a);margin:8px 0;line-height:1.3}.text-title.text-success{color:var(--ah-color-success, #13a769)}.text-description{font-size:14px;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:14px;transition:color 0.15s ease}.link:hover{text-decoration:underline}.link:focus-visible{outline:2px solid 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}';export{i as authhero_node}

package/dist/authhero-widget/p-2c7cceee.entry.js

@@ -0,0 +1 @@
+import{r as t,c as e,g as i,h as s}from"./p-ARKBiJrR.js";function r(t,e){if(void 0!==e)return`${e}px`;switch(t){case"pill":return"9999px";case"rounded":return"8px";case"sharp":return"0";default:return}}function o(t){if(!t)return{};const e={};if(t.colors?.primary&&(e["--ah-color-primary"]=t.colors.primary,e["--ah-color-primary-hover"]=t.colors.primary),t.colors?.page_background){const i=t.colors.page_background;"solid"===i.type&&i.start?e["--ah-page-bg"]=i.start:"gradient"===i.type&&i.start&&i.end&&(e["--ah-page-bg"]=`linear-gradient(${i.angle_deg??180}deg, ${i.start}, ${i.end})`)}return t.logo_url&&(e["--ah-logo-url"]=`url(${t.logo_url})`),t.font?.url&&(e["--ah-font-url"]=t.font.url),e}function a(t){if(!t)return{};const e={};if(t.borders){const i=t.borders;void 0!==i.widget_corner_radius&&(e["--ah-widget-radius"]=`${i.widget_corner_radius}px`),void 0!==i.widget_border_weight&&(e["--ah-widget-border-width"]=`${i.widget_border_weight}px`),!1===i.show_widget_shadow&&(e["--ah-widget-shadow"]="none");const s=r(i.buttons_style,i.button_border_radius);s&&(e["--ah-btn-radius"]=s),void 0!==i.button_border_weight&&(e["--ah-btn-border-width"]=`${i.button_border_weight}px`);const o=r(i.inputs_style,i.input_border_radius);o&&(e["--ah-input-radius"]=o),void 0!==i.input_border_weight&&(e["--ah-input-border-width"]=`${i.input_border_weight}px`)}if(t.colors){const i=t.colors;i.primary_button&&(e["--ah-color-primary"]=i.primary_button,e["--ah-color-primary-hover"]=i.primary_button),i.primary_button_label&&(e["--ah-btn-primary-text"]=i.primary_button_label),i.secondary_button_border&&(e["--ah-btn-secondary-border"]=i.secondary_button_border),i.secondary_button_label&&(e["--ah-btn-secondary-text"]=i.secondary_button_label),i.body_text&&(e["--ah-color-text"]=i.body_text),i.header&&(e["--ah-color-text-header"]=i.header),i.input_labels_placeholders&&(e["--ah-color-text-label"]=i.input_labels_placeholders,e["--ah-color-text-muted"]=i.input_labels_placeholders),i.input_filled_text&&(e["--ah-color-input-text"]=i.input_filled_text),i.widget_background&&(e["--ah-color-bg"]=i.widget_background),i.input_background&&(e["--ah-color-input-bg"]=i.input_background),i.widget_border&&(e["--ah-widget-border-color"]=i.widget_border),i.input_border&&(e["--ah-color-border"]=i.input_border),i.links_focused_components&&(e["--ah-color-link"]=i.links_focused_components),i.base_focus_color&&(e["--ah-color-focus-ring"]=i.base_focus_color),i.base_hover_color&&(e["--ah-color-primary-hover"]=i.base_hover_color),i.error&&(e["--ah-color-error"]=i.error),i.success&&(e["--ah-color-success"]=i.success),i.icons&&(e["--ah-color-icon"]=i.icons)}if(t.fonts){const i=t.fonts,s=i.reference_text_size||16;if(i.font_url&&(e["--ah-font-url"]=i.font_url),i.reference_text_size&&(e["--ah-font-size-base"]=`${i.reference_text_size}px`),i.title?.size){const t=Math.round(i.title.size/100*s);e["--ah-font-size-title"]=`${t}px`}if(i.subtitle?.size){const t=Math.round(i.subtitle.size/100*s);e["--ah-font-size-subtitle"]=`${t}px`}if(i.body_text?.size){const t=Math.round(i.body_text.size/100*s);e["--ah-font-size-body"]=`${t}px`}if(i.input_labels?.size){const t=Math.round(i.input_labels.size/100*s);e["--ah-font-size-label"]=`${t}px`}if(i.buttons_text?.size){const t=Math.round(i.buttons_text.size/100*s);e["--ah-font-size-btn"]=`${t}px`}if(i.links?.size){const t=Math.round(i.links.size/100*s);e["--ah-font-size-link"]=`${t}px`}"underlined"===i.links_style&&(e["--ah-link-decoration"]="underline"),void 0!==i.title?.bold&&(e["--ah-font-weight-title"]=i.title.bold?"700":"400"),void 0!==i.subtitle?.bold&&(e["--ah-font-weight-subtitle"]=i.subtitle.bold?"700":"400"),void 0!==i.body_text?.bold&&(e["--ah-font-weight-body"]=i.body_text.bold?"700":"400"),void 0!==i.input_labels?.bold&&(e["--ah-font-weight-label"]=i.input_labels.bold?"700":"400"),void 0!==i.buttons_text?.bold&&(e["--ah-font-weight-btn"]=i.buttons_text.bold?"600":"400"),void 0!==i.links?.bold&&(e["--ah-font-weight-link"]=i.links.bold?"700":"400")}if(t.widget){const i=t.widget;if(i.header_text_alignment&&(e["--ah-title-align"]=i.header_text_alignment),i.logo_height&&(e["--ah-logo-height"]=`${i.logo_height}px`),i.logo_position){const t={center:"center",left:"flex-start",right:"flex-end"};"none"===i.logo_position?e["--ah-logo-display"]="none":e["--ah-logo-align"]=t[i.logo_position]??"center"}i.social_buttons_layout&&("top"===i.social_buttons_layout?(e["--ah-social-order"]="0",e["--ah-divider-order"]="1",e["--ah-fields-order"]="2"):(e["--ah-social-order"]="2",e["--ah-divider-order"]="1",e["--ah-fields-order"]="0"))}if(t.page_background){const i=t.page_background;i.background_color&&(e["--ah-page-bg"]=i.background_color),i.background_image_url&&(e["--ah-page-bg-image"]=`url(${i.background_image_url})`)}return e}const n={br:[],em:[],i:[],strong:[],b:[],u:[],span:["class"],a:["href","class"]};function h(t){if(!t)return"";if(!t.includes("<"))return t;let e=t;e=e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;");for(const[t,i]of Object.entries(n)){if("br"===t){e=e.replace(/&lt;br\s*\/?&gt;/gi,"<br>");continue}const s=new RegExp(`&lt;${t}((?:\\s+[a-z-]+(?:=&quot;[^&]*&quot;|=&#39;[^&]*&#39;)?)*)\\s*&gt;`,"gi");e=e.replace(s,((e,s)=>{const r=[];if(s){const t=s.replace(/&quot;/g,'"').replace(/&#39;/g,"'").replace(/&amp;/g,"&").replace(/&lt;/g,"<").replace(/&gt;/g,">"),e=/([a-z-]+)=["']([^"']*)["']/gi;let o;for(;null!==(o=e.exec(t));){const[,t,e]=o;t&&i.includes(t.toLowerCase())&&("href"===t.toLowerCase()?c(e||"")&&r.push(`${t}="${l(e||"")}"`):r.push(`${t}="${l(e||"")}"`))}}"a"===t&&(r.push('target="_blank"'),r.push('rel="noopener noreferrer"'));const o=r.length?" "+r.join(" "):"";return`<${t}${o}>`}));const r=new RegExp(`&lt;/${t}&gt;`,"gi");e=e.replace(r,`</${t}>`)}return e}function c(t){if(!t)return!1;if(t.startsWith("/")||t.startsWith("#")||t.startsWith("?"))return!0;try{const e=new URL(t,"https://example.com");return"http:"===e.protocol||"https:"===e.protocol}catch{return!1}}function l(t){return t.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}const d=class{constructor(i){t(this,i),this.formSubmit=e(this,"formSubmit"),this.buttonClick=e(this,"buttonClick"),this.linkClick=e(this,"linkClick"),this.navigate=e(this,"navigate"),this.flowComplete=e(this,"flowComplete"),this.flowError=e(this,"flowError"),this.screenChange=e(this,"screenChange")}get el(){return i(this)}screen;apiUrl;baseUrl;state;screenId;watchScreenId(){this.updateDataScreenAttribute()}authParams;statePersistence="memory";storageKey="authhero_widget";branding;theme;loading=!1;autoSubmit=!1;autoNavigate;_screen;_authParams;_branding;_theme;formData={};formSubmit;buttonClick;linkClick;navigate;flowComplete;flowError;screenChange;watchScreen(t){if("string"==typeof t)try{this._screen=JSON.parse(t)}catch{console.error("Failed to parse screen JSON")}else this._screen=t;this._screen&&(this.screenChange.emit(this._screen),this.updateDataScreenAttribute())}updateDataScreenAttribute(){this.screenId?this.el.setAttribute("data-screen",this.screenId):this.el.removeAttribute("data-screen")}watchBranding(t){if("string"==typeof t)try{this._branding=JSON.parse(t)}catch{console.error("Failed to parse branding JSON")}else this._branding=t;this.applyThemeStyles()}watchTheme(t){if("string"==typeof t)try{this._theme=JSON.parse(t)}catch{console.error("Failed to parse theme JSON")}else this._theme=t;this.applyThemeStyles()}watchAuthParams(t){if("string"==typeof t)try{this._authParams=JSON.parse(t)}catch{console.error("Failed to parse authParams JSON")}else this._authParams=t}applyThemeStyles(){const t=(e=this._theme,{...o(this._branding),...a(e)});var e;!function(t,e){Object.entries(e).forEach((([e,i])=>{t.style.setProperty(e,i)}))}(this.el,t)}get shouldAutoNavigate(){return this.autoNavigate??this.autoSubmit}buildUrl(t){return this.baseUrl?new URL(t,this.baseUrl).toString():t}loadPersistedState(){if("url"===this.statePersistence){const t=new URL(window.location.href).searchParams.get("state");t&&!this.state&&(this.state=t)}else if("session"===this.statePersistence)try{const t=sessionStorage.getItem(`${this.storageKey}_state`);t&&!this.state&&(this.state=t);const e=sessionStorage.getItem(`${this.storageKey}_screenId`);e&&!this.screenId&&(this.screenId=e)}catch{}}persistState(){if("url"===this.statePersistence){const t=new URL(window.location.href);this.state&&t.searchParams.set("state",this.state),this.screenId&&t.searchParams.set("screen",this.screenId),window.history.replaceState({},"",t.toString())}else if("session"===this.statePersistence)try{this.state&&sessionStorage.setItem(`${this.storageKey}_state`,this.state),this.screenId&&sessionStorage.setItem(`${this.storageKey}_screenId`,this.screenId)}catch{}}async componentWillLoad(){this.watchScreen(this.screen),this.watchBranding(this.branding),this.watchTheme(this.theme),this.watchAuthParams(this.authParams),this.loadPersistedState(),this.apiUrl&&!this._screen&&await this.fetchScreen(this.screenId)}async fetchScreen(t,e){if(!this.apiUrl)return;const i=t||this.screenId;let s=this.apiUrl;i&&s.includes("{screenId}")&&(s=s.replace("{screenId}",encodeURIComponent(i)));const r=new URL(s,this.baseUrl||window.location.origin);this.state&&r.searchParams.set("state",this.state),e&&r.searchParams.set("nodeId",e),this.loading=!0;try{const t=await fetch(this.buildUrl(r.pathname+r.search),{credentials:"include",headers:{Accept:"application/json"}});if(t.ok){const e=await t.json();e.screen?(this._screen=e.screen,e.branding&&(this._branding=e.branding,this.applyThemeStyles()),e.state&&(this.state=e.state),e.screenId&&(this.screenId=e.screenId)):this._screen=e,this._screen&&(i&&i!==this.screenId&&(this.screenId=i),this.screenChange.emit(this._screen),this.updateDataScreenAttribute(),this.persistState())}else{const e=await t.json().catch((()=>({message:"Failed to load screen"})));this.flowError.emit({message:e.message||"Failed to load screen"})}}catch(t){console.error("Failed to fetch screen:",t),this.flowError.emit({message:t instanceof Error?t.message:"Failed to fetch screen"})}finally{this.loading=!1}}handleInputChange=(t,e)=>{this.formData={...this.formData,[t]:e}};handleSubmit=async t=>{if(t.preventDefault(),this._screen&&(this.formSubmit.emit({screen:this._screen,data:this.formData}),this.autoSubmit)){this.loading=!0;try{const t=await fetch(this.buildUrl(this._screen.action),{method:this._screen.method,credentials:"include",headers:{"Content-Type":"application/json",Accept:"application/json"},body:JSON.stringify({data:this.formData})}),e=t.headers.get("content-type");if(e?.includes("application/json")){const e=await t.json();e.redirect?(this.flowComplete.emit({redirectUrl:e.redirect}),this.navigate.emit({url:e.redirect}),this.shouldAutoNavigate&&(window.location.href=e.redirect)):e.screen?(this._screen=e.screen,this.formData={},this.screenChange.emit(e.screen),this.updateDataScreenAttribute(),e.screenId&&(this.screenId=e.screenId),this.persistState(),e.navigateUrl&&this.shouldAutoNavigate&&window.history.pushState({screen:e.screenId,state:this.state},"",e.navigateUrl),e.branding&&(this._branding=e.branding,this.applyThemeStyles()),e.state&&(this.state=e.state,this.persistState())):e.complete&&this.flowComplete.emit({}),!t.ok&&e.screen&&(this._screen=e.screen,this.screenChange.emit(e.screen),this.updateDataScreenAttribute())}}catch(t){console.error("Form submission failed:",t),this.flowError.emit({message:t instanceof Error?t.message:"Form submission failed"})}finally{this.loading=!1}}};handleButtonClick=t=>{"submit"!==t.type?(this.buttonClick.emit(t),"SOCIAL"===t.type&&t.value&&this.shouldAutoNavigate?this.handleSocialLogin(t.value):"RESEND_BUTTON"===t.type&&this.shouldAutoNavigate&&this.handleResend()):this.handleSubmit({preventDefault:()=>{}})};handleSocialLogin(t){const e=this._authParams||{},i={connection:t};this.state?i.state=this.state:e.state&&(i.state=e.state),e.client_id&&(i.client_id=e.client_id),e.redirect_uri&&(i.redirect_uri=e.redirect_uri),e.scope&&(i.scope=e.scope),e.audience&&(i.audience=e.audience),e.nonce&&(i.nonce=e.nonce),e.response_type&&(i.response_type=e.response_type);const s=this.buildUrl("/authorize?"+new URLSearchParams(i).toString());this.navigate.emit({url:s}),window.location.href=s}async handleResend(){if(this._screen?.action)try{const t=this._screen.action+(this._screen.action.includes("?")?"&":"?")+"action=resend";await fetch(this.buildUrl(t),{method:"POST",credentials:"include"})}catch(t){console.error("Resend failed:",t)}}handleLinkClick=(t,e)=>{this.linkClick.emit({id:e.id,href:e.href,text:e.text}),this.shouldAutoNavigate||t.preventDefault()};getScreenErrors(){return this._screen?.messages?.filter((t=>"error"===t.type))||[]}getScreenSuccesses(){return this._screen?.messages?.filter((t=>"success"===t.type))||[]}getOrderedComponents(){return this._screen?[...this._screen.components].filter((t=>!1!==t.visible)).sort(((t,e)=>(t.order??0)-(e.order??0))):[]}isSocialComponent(t){return"SOCIAL"===t.type}isDividerComponent(t){return"DIVIDER"===t.type}render(){if(this.loading&&!this._screen)return s("div",{class:"widget-container"},s("div",{class:"loading-spinner"}));if(!this._screen)return s("div",{class:"widget-container"},s("div",{class:"error-message"},"No screen configuration provided"));const t=this.getScreenErrors(),e=this.getScreenSuccesses(),i=this.getOrderedComponents(),r=i.filter((t=>this.isSocialComponent(t))),o=i.filter((t=>!this.isSocialComponent(t)&&!this.isDividerComponent(t))),a=i.some((t=>this.isDividerComponent(t))),n=t=>{const e=t.config;return["social-buttons","button","button-secondary","button-social","button-social-content","button-social-text","button-social-subtitle","social-icon",...(e?.providers??[]).flatMap((t=>{const e=t.replace(/[^a-zA-Z0-9-]/g,"-");return[`button-social-${e}`,`button-social-content-${e}`,`button-social-text-${e}`,`button-social-subtitle-${e}`,`social-icon-${e}`]}))].join(", ")},c=this._theme?.widget?.logo_url||this._branding?.logo_url;return s("div",{class:"widget-container",part:"container","data-authstack-container":!0},s("header",{class:"widget-header",part:"header"},c&&s("div",{class:"logo-wrapper",part:"logo-wrapper"},s("img",{class:"logo",part:"logo",src:c,alt:"Logo"})),this._screen.title&&s("h1",{class:"title",part:"title",innerHTML:h(this._screen.title)}),this._screen.description&&s("p",{class:"description",part:"description",innerHTML:h(this._screen.description)})),s("div",{class:"widget-body",part:"body"},t.map((t=>s("div",{class:"message message-error",part:"message message-error",key:t.id??t.text},t.text))),e.map((t=>s("div",{class:"message message-success",part:"message message-success",key:t.id??t.text},t.text))),s("form",{onSubmit:this.handleSubmit,part:"form"},s("div",{class:"form-content"},r.length>0&&s("div",{class:"social-section",part:"social-section"},r.map((t=>s("authhero-node",{key:t.id,component:t,value:this.formData[t.id],onFieldChange:t=>this.handleInputChange(t.detail.id,t.detail.value),onButtonClick:t=>this.handleButtonClick(t.detail),disabled:this.loading,exportparts:n(t)})))),r.length>0&&o.length>0&&a&&s("div",{class:"divider",part:"divider"},s("span",{class:"divider-text"},"Or")),s("div",{class:"fields-section",part:"fields-section"},o.map((t=>s("authhero-node",{key:t.id,component:t,value:this.formData[t.id],onFieldChange:t=>this.handleInputChange(t.detail.id,t.detail.value),onButtonClick:t=>this.handleButtonClick(t.detail),disabled:this.loading})))))),this._screen.links&&this._screen.links.length>0&&s("div",{class:"links",part:"links"},this._screen.links.map((t=>s("span",{class:"link-wrapper",part:"link-wrapper",key:t.id??t.href},t.linkText?s("span",null,t.text," ",s("a",{href:t.href,class:"link",part:"link",onClick:e=>this.handleLinkClick(e,{id:t.id,href:t.href,text:t.linkText||t.text})},t.linkText)):s("a",{href:t.href,class:"link",part:"link",onClick:e=>this.handleLinkClick(e,{id:t.id,href:t.href,text:t.text})},t.text)))))))}static get watchers(){return{screenId:[{watchScreenId:0}],screen:[{watchScreen:0}],branding:[{watchBranding:0}],theme:[{watchTheme:0}],authParams:[{watchAuthParams:0}]}}};d.style=":host{display:block;font-family:var(--ah-font-family, 'ulp-font', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, sans-serif);font-size:var(--ah-font-size-base, 14px);line-height:var(--ah-line-height-base, 1.5);color:var(--ah-color-text, #1e212a);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.widget-container{max-width:var(--ah-widget-max-width, 400px);width:100%;margin:0 auto;background-color:var(--ah-color-bg, #ffffff);border-radius:var(--ah-widget-radius, 5px);box-shadow:var(--ah-widget-shadow, 0 4px 22px 0 rgba(0, 0, 0, 0.11));box-sizing:border-box}.widget-header{padding:var(--ah-header-padding, 40px 48px 24px)}.widget-body{padding:var(--ah-body-padding, 0 48px 40px)}.logo-wrapper{display:var(--ah-logo-display, flex);justify-content:var(--ah-logo-align, center);margin-bottom:8px}.logo{display:block;height:var(--ah-logo-height, 52px);max-width:100%;width:auto;object-fit:contain}.title{font-size:var(--ah-font-size-title, 24px);font-weight:var(--ah-font-weight-title, 700);text-align:var(--ah-title-align, center);margin:var(--ah-title-margin, 24px 0 8px);color:var(--ah-color-header, #1e212a);line-height:1.2}.description{font-size:var(--ah-font-size-description, 14px);text-align:var(--ah-title-align, center);margin:var(--ah-description-margin, 0 0 8px);color:var(--ah-color-text, #1e212a);line-height:1.5}.message{padding:12px 16px;border-radius:4px;margin-bottom:16px;font-size:14px;line-height:1.5}.message-error{background-color:var(--ah-color-error-bg, #ffeaea);color:var(--ah-color-error, #d03c38);border-left:3px solid var(--ah-color-error, #d03c38)}.message-success{background-color:var(--ah-color-success-bg, #e6f9f1);color:var(--ah-color-success, #13a769);border-left:3px solid var(--ah-color-success, #13a769)}form{display:flex;flex-direction:column}.form-content{display:flex;flex-direction:column}.social-section{display:flex;flex-direction:column;gap:8px;order:var(--ah-social-order, 2)}.fields-section{display:flex;flex-direction:column;order:var(--ah-fields-order, 0)}.divider{display:flex;align-items:center;text-align:center;margin:16px 0;order:var(--ah-divider-order, 1)}.divider::before,.divider::after{content:'';flex:1;border-bottom:1px solid var(--ah-color-border-muted, #c9cace)}.divider-text{padding:0 10px;font-size:12px;font-weight:400;color:var(--ah-color-text-muted, #65676e);text-transform:uppercase;letter-spacing:0}.links{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:16px}.link-wrapper{font-size:14px;color:var(--ah-color-text, #1e212a)}.link{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:14px;font-weight:var(--ah-font-weight-link, 400);transition:color 150ms ease}.link:hover{text-decoration:underline}.link:focus-visible{outline:2px solid var(--ah-color-link, #635dff);outline-offset:2px;border-radius:2px}.loading-spinner{width:32px;height:32px;margin:24px auto;border:3px solid var(--ah-color-border-muted, #e0e1e3);border-top-color:var(--ah-color-primary, #635dff);border-radius:50%;animation:spin 0.8s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.error-message{text-align:center;color:var(--ah-color-error, #d03c38);padding:16px;font-size:14px}@media (max-width: 480px){:host{display:block;width:100%;min-height:100vh;background-color:var(--ah-color-bg, #ffffff)}.widget-container{box-shadow:none;border-radius:0;max-width:none;width:100%;margin:0}.widget-header{padding:24px 16px 16px}.widget-body{padding:0 16px 24px}}";export{d as authhero_widget}

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-I1frl4Am.js');
 
-const authheroNodeCss = () => `:host{display:block}.input-wrapper{display:flex;flex-direction:column;position:relative;margin-bottom:16px}.input-container{position:relative;width:100%}.input-label{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size: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{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-text, #1e212a);background-color:var(--ah-color-input-bg, #ffffff);border: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-text-muted, #65676e);transition:color 0.15s ease}.password-toggle:hover{color: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: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:14px;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: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-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{filter:brightness(0.85)}.btn-secondary{background-color:var(--ah-color-bg, #ffffff);color:var(--ah-color-text, #1e212a);border:1px solid 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}.social-buttons{display:flex;flex-direction:column;gap:12px}.btn-social{display:flex;align-items:center;justify-content:center;gap:12px}.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:20px;font-weight:400;color:var(--ah-color-text, #1e212a);margin:8px 0;line-height:1.3}.text-title.text-success{color:var(--ah-color-success, #13a769)}.text-description{font-size:14px;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:14px;transition:color 0.15s ease}.link:hover{text-decoration:underline}.link:focus-visible{outline:2px solid 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}`;
+const authheroNodeCss = () => `:host{display:block}.input-wrapper{display:flex;flex-direction:column;position:relative;margin-bottom:16px}.input-container{position:relative;width:100%}.input-label{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size: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{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-text, #1e212a);background-color:var(--ah-color-input-bg, #ffffff);border: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-text-muted, #65676e);transition:color 0.15s ease}.password-toggle:hover{color: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: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:14px;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: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-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{filter:brightness(0.85)}.btn-secondary{background-color:var(--ah-color-bg, #ffffff);color:var(--ah-color-text, #1e212a);border:1px solid 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}.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:20px;font-weight:400;color:var(--ah-color-text, #1e212a);margin:8px 0;line-height:1.3}.text-title.text-success{color:var(--ah-color-success, #13a769)}.text-description{font-size:14px;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:14px;transition:color 0.15s ease}.link:hover{text-decoration:underline}.link:focus-visible{outline:2px solid 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}`;
 
 const AuthheroNode = class {
     constructor(hostRef) {
@@ -134,7 +134,7 @@ const AuthheroNode = class {
         return (index.h("div", { class: "rich-text", part: "rich-text", innerHTML: component.config?.content ?? "" }));
     }
     renderNextButton(component) {
-        return (index.h("button", { type: "submit", class: "btn btn-primary", part: "button button-primary", disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "submit", "next") }, component.config.text ?? "Continue"));
+        return (index.h("button", { type: "submit", class: "btn btn-primary", part: "button button-primary", "data-primary-action-button": true, disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "submit", "next") }, component.config.text ?? "Continue"));
     }
     renderPreviousButton(component) {
         return (index.h("button", { type: "button", class: "btn btn-secondary", part: "button button-secondary", disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "previous", "back") }, component.config.text ?? "Back"));
@@ -156,20 +156,20 @@ const AuthheroNode = class {
         if (multiline) {
             return (index.h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), index.h("textarea", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input textarea", name: component.id, placeholder: " ", required: component.required, disabled: this.disabled, maxLength: max_length, onInput: this.handleInput }, this.value ?? ""), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
         }
-        return (index.h("div", { class: "input-wrapper", part: "input-wrapper" }, index.h("div", { class: "input-container" }, index.h("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: component.sensitive ? "password" : "text", name: component.id, value: this.value ?? "", placeholder: " ", required: component.required, disabled: this.disabled, maxLength: max_length, onInput: this.handleInput }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+        return (index.h("div", { class: "input-wrapper", part: "input-wrapper" }, index.h("div", { class: "input-container" }, index.h("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: component.sensitive ? "password" : "text", name: component.id, "data-input-name": component.id, value: this.value ?? "", placeholder: " ", required: component.required, disabled: this.disabled, maxLength: max_length, onInput: this.handleInput }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
     }
     renderEmailField(component) {
         const inputId = `input-${component.id}`;
         const errors = this.getErrors();
         const hasValue = !!(this.value && this.value.length > 0);
-        return (index.h("div", { class: "input-wrapper", part: "input-wrapper" }, index.h("div", { class: "input-container" }, index.h("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: "email", name: component.id, value: this.value ?? "", placeholder: " ", required: component.required, disabled: this.disabled, autocomplete: "email", onInput: this.handleInput }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+        return (index.h("div", { class: "input-wrapper", part: "input-wrapper" }, index.h("div", { class: "input-container" }, index.h("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: "email", name: component.id, "data-input-name": component.id, value: this.value ?? "", placeholder: " ", required: component.required, disabled: this.disabled, autocomplete: "email", onInput: this.handleInput }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
     }
     renderPasswordField(component) {
         const inputId = `input-${component.id}`;
         const errors = this.getErrors();
         const hasValue = !!(this.value && this.value.length > 0);
         const forgotPasswordLink = component.config?.forgot_password_link;
-        return (index.h("div", { class: "input-wrapper", part: "input-wrapper" }, index.h("div", { class: "input-container password-container" }, index.h("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: this.passwordVisible ? "text" : "password", name: component.id, value: this.value ?? "", placeholder: " ", required: component.required, disabled: this.disabled, minLength: component.config?.min_length, autocomplete: "current-password", onInput: this.handleInput }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue), index.h("button", { type: "button", class: "password-toggle", part: "password-toggle", onClick: this.togglePasswordVisibility, "aria-label": "Toggle password visibility", "aria-pressed": this.passwordVisible ? "true" : "false" }, this.renderPasswordToggle())), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint), forgotPasswordLink && (index.h("div", { class: "field-link", part: "field-link" }, index.h("a", { href: forgotPasswordLink, class: "link", part: "link" }, "Forgot password?")))));
+        return (index.h("div", { class: "input-wrapper", part: "input-wrapper" }, index.h("div", { class: "input-container password-container" }, index.h("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: this.passwordVisible ? "text" : "password", name: component.id, "data-input-name": component.id, value: this.value ?? "", placeholder: " ", required: component.required, disabled: this.disabled, minLength: component.config?.min_length, autocomplete: "current-password", onInput: this.handleInput }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue), index.h("button", { type: "button", class: "password-toggle", part: "password-toggle", onClick: this.togglePasswordVisibility, "aria-label": "Toggle password visibility", "aria-pressed": this.passwordVisible ? "true" : "false" }, this.renderPasswordToggle())), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint), forgotPasswordLink && (index.h("div", { class: "field-link", part: "field-link" }, index.h("a", { href: forgotPasswordLink, class: "link", part: "link" }, "Forgot password?")))));
     }
     renderNumberField(component) {
         const inputId = `input-${component.id}`;
@@ -234,16 +234,23 @@ const AuthheroNode = class {
         // Get provider icon from provider_details icon_url
         const getProviderIcon = (provider) => {
             const details = detailsMap.get(provider);
+            const safeProvider = this.sanitizeForCssToken(provider);
             if (details?.icon_url) {
-                return (index.h("img", { class: "social-icon", src: details.icon_url, alt: details.display_name || provider }));
+                return (index.h("img", { class: "social-icon", part: `social-icon social-icon-${safeProvider}`, src: details.icon_url, alt: details.display_name || provider }));
             }
             // No icon provided - return null (button will just show text)
             return null;
         };
+        // Get strategy from provider details
+        const getProviderStrategy = (provider) => {
+            const details = detailsMap.get(provider);
+            return details?.strategy ?? provider;
+        };
         return (index.h("div", { class: "social-buttons", part: "social-buttons" }, providers.map((provider) => {
             const safeProvider = this.sanitizeForCssToken(provider);
+            const strategy = getProviderStrategy(provider);
             const icon = getProviderIcon(provider);
-            return (index.h("button", { type: "button", class: `btn btn-secondary btn-social btn-social-${safeProvider}${icon ? "" : " no-icon"}`, part: `button button-secondary button-social button-social-${safeProvider}`, "data-provider": provider, disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "SOCIAL", provider), key: provider }, icon, index.h("span", { part: "button-social-text" }, getButtonText(provider))));
+            return (index.h("button", { type: "button", class: `btn btn-secondary btn-social btn-social-${safeProvider}${icon ? "" : " no-icon"}`, part: `button button-secondary button-social button-social-${safeProvider}`, "data-connection-name": provider, "data-strategy": strategy, disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "SOCIAL", provider), key: provider }, icon, index.h("span", { class: "btn-social-content", part: `button-social-content button-social-content-${safeProvider}` }, index.h("span", { part: `button-social-text button-social-text-${safeProvider}` }, getButtonText(provider)), index.h("span", { class: "btn-social-subtitle", part: `button-social-subtitle button-social-subtitle-${safeProvider}` }))));
         })));
     }
     // ===========================================================================

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

@@ -465,6 +465,9 @@ const AuthheroWidget = class {
      * When statePersistence is 'url', this is synced with the URL.
      */
     screenId;
+    watchScreenId() {
+        this.updateDataScreenAttribute();
+    }
     /**
      * OAuth/OIDC parameters for social login redirects.
      * Can be passed as a JSON string or object.
@@ -581,6 +584,19 @@ const AuthheroWidget = class {
         }
         if (this._screen) {
             this.screenChange.emit(this._screen);
+            this.updateDataScreenAttribute();
+        }
+    }
+    /**
+     * Updates the data-screen attribute on the host element.
+     * This allows external CSS to target different screens using attribute selectors.
+     */
+    updateDataScreenAttribute() {
+        if (this.screenId) {
+            this.el.setAttribute("data-screen", this.screenId);
+        }
+        else {
+            this.el.removeAttribute("data-screen");
         }
     }
     watchBranding(newValue) {
@@ -772,6 +788,7 @@ const AuthheroWidget = class {
                         this.screenId = currentScreenId;
                     }
                     this.screenChange.emit(this._screen);
+                    this.updateDataScreenAttribute();
                     this.persistState();
                 }
             }
@@ -844,6 +861,7 @@ const AuthheroWidget = class {
                     this._screen = result.screen;
                     this.formData = {};
                     this.screenChange.emit(result.screen);
+                    this.updateDataScreenAttribute();
                     // Update screenId if returned in response
                     if (result.screenId) {
                         this.screenId = result.screenId;
@@ -873,6 +891,7 @@ const AuthheroWidget = class {
                 if (!response.ok && result.screen) {
                     this._screen = result.screen;
                     this.screenChange.emit(result.screen);
+                    this.updateDataScreenAttribute();
                 }
             }
         }
@@ -1024,9 +1043,35 @@ const AuthheroWidget = class {
         const socialComponents = components.filter((c) => this.isSocialComponent(c));
         const fieldComponents = components.filter((c) => !this.isSocialComponent(c) && !this.isDividerComponent(c));
         const hasDivider = components.some((c) => this.isDividerComponent(c));
+        // Build dynamic exportparts for social buttons including provider-specific parts
+        const getExportParts = (component) => {
+            const baseParts = [
+                "social-buttons",
+                "button",
+                "button-secondary",
+                "button-social",
+                "button-social-content",
+                "button-social-text",
+                "button-social-subtitle",
+                "social-icon",
+            ];
+            const config = component.config;
+            const providers = config?.providers ?? [];
+            const providerParts = providers.flatMap((p) => {
+                const safe = p.replace(/[^a-zA-Z0-9-]/g, "-");
+                return [
+                    `button-social-${safe}`,
+                    `button-social-content-${safe}`,
+                    `button-social-text-${safe}`,
+                    `button-social-subtitle-${safe}`,
+                    `social-icon-${safe}`,
+                ];
+            });
+            return [...baseParts, ...providerParts].join(", ");
+        };
         // Get logo URL from theme.widget (takes precedence) or branding
         const logoUrl = this._theme?.widget?.logo_url || this._branding?.logo_url;
-        return (index.h("div", { class: "widget-container", part: "container" }, index.h("header", { class: "widget-header", part: "header" }, logoUrl && (index.h("div", { class: "logo-wrapper", part: "logo-wrapper" }, index.h("img", { class: "logo", part: "logo", src: logoUrl, alt: "Logo" }))), this._screen.title && (index.h("h1", { class: "title", part: "title", innerHTML: sanitizeHtml(this._screen.title) })), this._screen.description && (index.h("p", { class: "description", part: "description", innerHTML: sanitizeHtml(this._screen.description) }))), index.h("div", { class: "widget-body", part: "body" }, screenErrors.map((err) => (index.h("div", { class: "message message-error", part: "message message-error", key: err.id ?? err.text }, err.text))), screenSuccesses.map((msg) => (index.h("div", { class: "message message-success", part: "message message-success", key: msg.id ?? msg.text }, msg.text))), index.h("form", { onSubmit: this.handleSubmit, part: "form" }, index.h("div", { class: "form-content" }, socialComponents.length > 0 && (index.h("div", { class: "social-section", part: "social-section" }, socialComponents.map((component) => (index.h("authhero-node", { key: component.id, component: component, value: this.formData[component.id], onFieldChange: (e) => this.handleInputChange(e.detail.id, e.detail.value), onButtonClick: (e) => this.handleButtonClick(e.detail), disabled: this.loading }))))), socialComponents.length > 0 &&
+        return (index.h("div", { class: "widget-container", part: "container", "data-authstack-container": true }, index.h("header", { class: "widget-header", part: "header" }, logoUrl && (index.h("div", { class: "logo-wrapper", part: "logo-wrapper" }, index.h("img", { class: "logo", part: "logo", src: logoUrl, alt: "Logo" }))), this._screen.title && (index.h("h1", { class: "title", part: "title", innerHTML: sanitizeHtml(this._screen.title) })), this._screen.description && (index.h("p", { class: "description", part: "description", innerHTML: sanitizeHtml(this._screen.description) }))), index.h("div", { class: "widget-body", part: "body" }, screenErrors.map((err) => (index.h("div", { class: "message message-error", part: "message message-error", key: err.id ?? err.text }, err.text))), screenSuccesses.map((msg) => (index.h("div", { class: "message message-success", part: "message message-success", key: msg.id ?? msg.text }, msg.text))), index.h("form", { onSubmit: this.handleSubmit, part: "form" }, index.h("div", { class: "form-content" }, socialComponents.length > 0 && (index.h("div", { class: "social-section", part: "social-section" }, socialComponents.map((component) => (index.h("authhero-node", { key: component.id, component: component, value: this.formData[component.id], onFieldChange: (e) => this.handleInputChange(e.detail.id, e.detail.value), onButtonClick: (e) => this.handleButtonClick(e.detail), disabled: this.loading, exportparts: getExportParts(component) }))))), socialComponents.length > 0 &&
             fieldComponents.length > 0 &&
             hasDivider && (index.h("div", { class: "divider", part: "divider" }, index.h("span", { class: "divider-text" }, "Or"))), index.h("div", { class: "fields-section", part: "fields-section" }, fieldComponents.map((component) => (index.h("authhero-node", { key: component.id, component: component, value: this.formData[component.id], onFieldChange: (e) => this.handleInputChange(e.detail.id, e.detail.value), onButtonClick: (e) => this.handleButtonClick(e.detail), disabled: this.loading })))))), this._screen.links && this._screen.links.length > 0 && (index.h("div", { class: "links", part: "links" }, this._screen.links.map((link) => (index.h("span", { class: "link-wrapper", part: "link-wrapper", key: link.id ?? link.href }, link.linkText ? (index.h("span", null, link.text, " ", index.h("a", { href: link.href, class: "link", part: "link", onClick: (e) => this.handleLinkClick(e, {
                 id: link.id,
@@ -1039,6 +1084,9 @@ const AuthheroWidget = class {
             }) }, link.text))))))))));
     }
     static get watchers() { return {
+        "screenId": [{
+                "watchScreenId": 0
+            }],
         "screen": [{
                 "watchScreen": 0
             }],

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

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["authhero-node.cjs",[[513,"authhero-node",{"component":[16],"value":[1],"disabled":[4],"passwordVisible":[32]}]]],["authhero-widget.cjs",[[513,"authhero-widget",{"screen":[1],"apiUrl":[1,"api-url"],"baseUrl":[1,"base-url"],"state":[1025],"screenId":[1025,"screen-id"],"authParams":[1,"auth-params"],"statePersistence":[1,"state-persistence"],"storageKey":[1,"storage-key"],"branding":[1],"theme":[1],"loading":[1028],"autoSubmit":[4,"auto-submit"],"autoNavigate":[4,"auto-navigate"],"_screen":[32],"_authParams":[32],"_branding":[32],"_theme":[32],"formData":[32]},null,{"screen":[{"watchScreen":0}],"branding":[{"watchBranding":0}],"theme":[{"watchTheme":0}],"authParams":[{"watchAuthParams":0}]}]]]], options);
+  return index.bootstrapLazy([["authhero-node.cjs",[[513,"authhero-node",{"component":[16],"value":[1],"disabled":[4],"passwordVisible":[32]}]]],["authhero-widget.cjs",[[513,"authhero-widget",{"screen":[1],"apiUrl":[1,"api-url"],"baseUrl":[1,"base-url"],"state":[1025],"screenId":[1025,"screen-id"],"authParams":[1,"auth-params"],"statePersistence":[1,"state-persistence"],"storageKey":[1,"storage-key"],"branding":[1],"theme":[1],"loading":[1028],"autoSubmit":[4,"auto-submit"],"autoNavigate":[4,"auto-navigate"],"_screen":[32],"_authParams":[32],"_branding":[32],"_theme":[32],"formData":[32]},null,{"screenId":[{"watchScreenId":0}],"screen":[{"watchScreen":0}],"branding":[{"watchBranding":0}],"theme":[{"watchTheme":0}],"authParams":[{"watchAuthParams":0}]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/loader.cjs.js

@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["authhero-node.cjs",[[513,"authhero-node",{"component":[16],"value":[1],"disabled":[4],"passwordVisible":[32]}]]],["authhero-widget.cjs",[[513,"authhero-widget",{"screen":[1],"apiUrl":[1,"api-url"],"baseUrl":[1,"base-url"],"state":[1025],"screenId":[1025,"screen-id"],"authParams":[1,"auth-params"],"statePersistence":[1,"state-persistence"],"storageKey":[1,"storage-key"],"branding":[1],"theme":[1],"loading":[1028],"autoSubmit":[4,"auto-submit"],"autoNavigate":[4,"auto-navigate"],"_screen":[32],"_authParams":[32],"_branding":[32],"_theme":[32],"formData":[32]},null,{"screen":[{"watchScreen":0}],"branding":[{"watchBranding":0}],"theme":[{"watchTheme":0}],"authParams":[{"watchAuthParams":0}]}]]]], options);
+  return index.bootstrapLazy([["authhero-node.cjs",[[513,"authhero-node",{"component":[16],"value":[1],"disabled":[4],"passwordVisible":[32]}]]],["authhero-widget.cjs",[[513,"authhero-widget",{"screen":[1],"apiUrl":[1,"api-url"],"baseUrl":[1,"base-url"],"state":[1025],"screenId":[1025,"screen-id"],"authParams":[1,"auth-params"],"statePersistence":[1,"state-persistence"],"storageKey":[1,"storage-key"],"branding":[1],"theme":[1],"loading":[1028],"autoSubmit":[4,"auto-submit"],"autoNavigate":[4,"auto-navigate"],"_screen":[32],"_authParams":[32],"_branding":[32],"_theme":[32],"formData":[32]},null,{"screenId":[{"watchScreenId":0}],"screen":[{"watchScreen":0}],"branding":[{"watchBranding":0}],"theme":[{"watchTheme":0}],"authParams":[{"watchAuthParams":0}]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -314,6 +314,27 @@
   gap: 12px;
 }
 
+.btn-social-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+/* Subtitle styling - uses CSS custom property for content
+   Set --ah-btn-social-subtitle-content via ::part() to show subtitle text.
+   Example: authhero-widget::part(button-social-subtitle-vipps)::before { content: "Log in with Vipps"; } */
+.btn-social-subtitle {
+  font-size: 12px;
+  font-style: italic;
+  opacity: 0.8;
+  margin-top: 2px;
+}
+
+.btn-social-subtitle:empty {
+  display: none;
+}
+
 /* Social button icon */
 .social-icon {
   width: 20px;

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

@@ -124,7 +124,7 @@ export class AuthheroNode {
         return (h("div", { class: "rich-text", part: "rich-text", innerHTML: component.config?.content ?? "" }));
     }
     renderNextButton(component) {
-        return (h("button", { type: "submit", class: "btn btn-primary", part: "button button-primary", disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "submit", "next") }, component.config.text ?? "Continue"));
+        return (h("button", { type: "submit", class: "btn btn-primary", part: "button button-primary", "data-primary-action-button": true, disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "submit", "next") }, component.config.text ?? "Continue"));
     }
     renderPreviousButton(component) {
         return (h("button", { type: "button", class: "btn btn-secondary", part: "button button-secondary", disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "previous", "back") }, component.config.text ?? "Back"));
@@ -146,20 +146,20 @@ export class AuthheroNode {
         if (multiline) {
             return (h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), h("textarea", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input textarea", name: component.id, placeholder: " ", required: component.required, disabled: this.disabled, maxLength: max_length, onInput: this.handleInput }, this.value ?? ""), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
         }
-        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, h("div", { class: "input-container" }, h("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: component.sensitive ? "password" : "text", name: component.id, value: this.value ?? "", placeholder: " ", required: component.required, disabled: this.disabled, maxLength: max_length, onInput: this.handleInput }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, h("div", { class: "input-container" }, h("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: component.sensitive ? "password" : "text", name: component.id, "data-input-name": component.id, value: this.value ?? "", placeholder: " ", required: component.required, disabled: this.disabled, maxLength: max_length, onInput: this.handleInput }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
     }
     renderEmailField(component) {
         const inputId = `input-${component.id}`;
         const errors = this.getErrors();
         const hasValue = !!(this.value && this.value.length > 0);
-        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, h("div", { class: "input-container" }, h("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: "email", name: component.id, value: this.value ?? "", placeholder: " ", required: component.required, disabled: this.disabled, autocomplete: "email", onInput: this.handleInput }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, h("div", { class: "input-container" }, h("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: "email", name: component.id, "data-input-name": component.id, value: this.value ?? "", placeholder: " ", required: component.required, disabled: this.disabled, autocomplete: "email", onInput: this.handleInput }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
     }
     renderPasswordField(component) {
         const inputId = `input-${component.id}`;
         const errors = this.getErrors();
         const hasValue = !!(this.value && this.value.length > 0);
         const forgotPasswordLink = component.config?.forgot_password_link;
-        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, h("div", { class: "input-container password-container" }, h("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: this.passwordVisible ? "text" : "password", name: component.id, value: this.value ?? "", placeholder: " ", required: component.required, disabled: this.disabled, minLength: component.config?.min_length, autocomplete: "current-password", onInput: this.handleInput }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue), h("button", { type: "button", class: "password-toggle", part: "password-toggle", onClick: this.togglePasswordVisibility, "aria-label": "Toggle password visibility", "aria-pressed": this.passwordVisible ? "true" : "false" }, this.renderPasswordToggle())), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint), forgotPasswordLink && (h("div", { class: "field-link", part: "field-link" }, h("a", { href: forgotPasswordLink, class: "link", part: "link" }, "Forgot password?")))));
+        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, h("div", { class: "input-container password-container" }, h("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: this.passwordVisible ? "text" : "password", name: component.id, "data-input-name": component.id, value: this.value ?? "", placeholder: " ", required: component.required, disabled: this.disabled, minLength: component.config?.min_length, autocomplete: "current-password", onInput: this.handleInput }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue), h("button", { type: "button", class: "password-toggle", part: "password-toggle", onClick: this.togglePasswordVisibility, "aria-label": "Toggle password visibility", "aria-pressed": this.passwordVisible ? "true" : "false" }, this.renderPasswordToggle())), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint), forgotPasswordLink && (h("div", { class: "field-link", part: "field-link" }, h("a", { href: forgotPasswordLink, class: "link", part: "link" }, "Forgot password?")))));
     }
     renderNumberField(component) {
         const inputId = `input-${component.id}`;
@@ -224,16 +224,23 @@ export class AuthheroNode {
         // Get provider icon from provider_details icon_url
         const getProviderIcon = (provider) => {
             const details = detailsMap.get(provider);
+            const safeProvider = this.sanitizeForCssToken(provider);
             if (details?.icon_url) {
-                return (h("img", { class: "social-icon", src: details.icon_url, alt: details.display_name || provider }));
+                return (h("img", { class: "social-icon", part: `social-icon social-icon-${safeProvider}`, src: details.icon_url, alt: details.display_name || provider }));
             }
             // No icon provided - return null (button will just show text)
             return null;
         };
+        // Get strategy from provider details
+        const getProviderStrategy = (provider) => {
+            const details = detailsMap.get(provider);
+            return details?.strategy ?? provider;
+        };
         return (h("div", { class: "social-buttons", part: "social-buttons" }, providers.map((provider) => {
             const safeProvider = this.sanitizeForCssToken(provider);
+            const strategy = getProviderStrategy(provider);
             const icon = getProviderIcon(provider);
-            return (h("button", { type: "button", class: `btn btn-secondary btn-social btn-social-${safeProvider}${icon ? "" : " no-icon"}`, part: `button button-secondary button-social button-social-${safeProvider}`, "data-provider": provider, disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "SOCIAL", provider), key: provider }, icon, h("span", { part: "button-social-text" }, getButtonText(provider))));
+            return (h("button", { type: "button", class: `btn btn-secondary btn-social btn-social-${safeProvider}${icon ? "" : " no-icon"}`, part: `button button-secondary button-social button-social-${safeProvider}`, "data-connection-name": provider, "data-strategy": strategy, disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "SOCIAL", provider), key: provider }, icon, h("span", { class: "btn-social-content", part: `button-social-content button-social-content-${safeProvider}` }, h("span", { part: `button-social-text button-social-text-${safeProvider}` }, getButtonText(provider)), h("span", { class: "btn-social-subtitle", part: `button-social-subtitle button-social-subtitle-${safeProvider}` }))));
         })));
     }
     // ===========================================================================

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

@@ -31,6 +31,9 @@ export class AuthheroWidget {
      * When statePersistence is 'url', this is synced with the URL.
      */
     screenId;
+    watchScreenId() {
+        this.updateDataScreenAttribute();
+    }
     /**
      * OAuth/OIDC parameters for social login redirects.
      * Can be passed as a JSON string or object.
@@ -147,6 +150,19 @@ export class AuthheroWidget {
         }
         if (this._screen) {
             this.screenChange.emit(this._screen);
+            this.updateDataScreenAttribute();
+        }
+    }
+    /**
+     * Updates the data-screen attribute on the host element.
+     * This allows external CSS to target different screens using attribute selectors.
+     */
+    updateDataScreenAttribute() {
+        if (this.screenId) {
+            this.el.setAttribute("data-screen", this.screenId);
+        }
+        else {
+            this.el.removeAttribute("data-screen");
         }
     }
     watchBranding(newValue) {
@@ -338,6 +354,7 @@ export class AuthheroWidget {
                         this.screenId = currentScreenId;
                     }
                     this.screenChange.emit(this._screen);
+                    this.updateDataScreenAttribute();
                     this.persistState();
                 }
             }
@@ -410,6 +427,7 @@ export class AuthheroWidget {
                     this._screen = result.screen;
                     this.formData = {};
                     this.screenChange.emit(result.screen);
+                    this.updateDataScreenAttribute();
                     // Update screenId if returned in response
                     if (result.screenId) {
                         this.screenId = result.screenId;
@@ -439,6 +457,7 @@ export class AuthheroWidget {
                 if (!response.ok && result.screen) {
                     this._screen = result.screen;
                     this.screenChange.emit(result.screen);
+                    this.updateDataScreenAttribute();
                 }
             }
         }
@@ -590,9 +609,35 @@ export class AuthheroWidget {
         const socialComponents = components.filter((c) => this.isSocialComponent(c));
         const fieldComponents = components.filter((c) => !this.isSocialComponent(c) && !this.isDividerComponent(c));
         const hasDivider = components.some((c) => this.isDividerComponent(c));
+        // Build dynamic exportparts for social buttons including provider-specific parts
+        const getExportParts = (component) => {
+            const baseParts = [
+                "social-buttons",
+                "button",
+                "button-secondary",
+                "button-social",
+                "button-social-content",
+                "button-social-text",
+                "button-social-subtitle",
+                "social-icon",
+            ];
+            const config = component.config;
+            const providers = config?.providers ?? [];
+            const providerParts = providers.flatMap((p) => {
+                const safe = p.replace(/[^a-zA-Z0-9-]/g, "-");
+                return [
+                    `button-social-${safe}`,
+                    `button-social-content-${safe}`,
+                    `button-social-text-${safe}`,
+                    `button-social-subtitle-${safe}`,
+                    `social-icon-${safe}`,
+                ];
+            });
+            return [...baseParts, ...providerParts].join(", ");
+        };
         // Get logo URL from theme.widget (takes precedence) or branding
         const logoUrl = this._theme?.widget?.logo_url || this._branding?.logo_url;
-        return (h("div", { class: "widget-container", part: "container" }, 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" }))), this._screen.title && (h("h1", { class: "title", part: "title", innerHTML: sanitizeHtml(this._screen.title) })), this._screen.description && (h("p", { class: "description", part: "description", innerHTML: sanitizeHtml(this._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, part: "form" }, 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, value: this.formData[component.id], onFieldChange: (e) => this.handleInputChange(e.detail.id, e.detail.value), onButtonClick: (e) => this.handleButtonClick(e.detail), disabled: this.loading }))))), socialComponents.length > 0 &&
+        return (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" }))), this._screen.title && (h("h1", { class: "title", part: "title", innerHTML: sanitizeHtml(this._screen.title) })), this._screen.description && (h("p", { class: "description", part: "description", innerHTML: sanitizeHtml(this._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, part: "form" }, 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, 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" }, "Or"))), h("div", { class: "fields-section", part: "fields-section" }, fieldComponents.map((component) => (h("authhero-node", { key: component.id, component: component, value: this.formData[component.id], onFieldChange: (e) => this.handleInputChange(e.detail.id, e.detail.value), onButtonClick: (e) => this.handleButtonClick(e.detail), disabled: this.loading })))))), this._screen.links && this._screen.links.length > 0 && (h("div", { class: "links", part: "links" }, this._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,
@@ -1079,6 +1124,9 @@ export class AuthheroWidget {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "screenId",
+                "methodName": "watchScreenId"
+            }, {
                 "propName": "screen",
                 "methodName": "watchScreen"
             }, {

package/dist/components/authhero-node.js

@@ -1 +1 @@
-import{A as o,d as s}from"./p-BMoS6Gag.js";const a=o,p=s;export{a as AuthheroNode,p as defineCustomElement}
+import{A as o,d as p}from"./p-DCgjvHcp.js";const s=o,r=p;export{s as AuthheroNode,r as defineCustomElement}