@descope/web-components-ui 1.0.158 → 1.0.160

package/dist/index.esm.js

@@ -498,6 +498,32 @@ const componentNameValidationMixin = (superclass) =>
     }
   };
 
+// create a dispatch event function that also calls to the onevent function in case  it's set
+// usage example:
+// #dispatchSomething = createDispatchEvent.bind(this, 'something' { ...options })
+// this will dispatch a new event when called, but also call to "onsomething"
+function createDispatchEvent(eventName, options = {}) {
+  const event = new Event(eventName, options);
+
+  this[`on${eventName}`]?.(event); // in case we got an event callback as property
+  this.dispatchEvent(event);
+}
+
+const componentsContextMixin = (superclass) =>
+  class ComponentsContextMixinClass extends superclass {
+    #dispatchComponentsContext = createDispatchEvent.bind(this, 'components-context');
+
+    updateComponentsContext(componentsContext) {
+      this.dispatchEvent(
+        new CustomEvent('components-context', {
+          bubbles: true,
+          composed: true,
+          detail: componentsContext,
+        })
+      );
+    }
+  };
+
 const hoverableMixin = (superclass) =>
   class HoverableMixinClass extends superclass {
     init() {
@@ -621,21 +647,11 @@ const createBaseClass = ({ componentName, baseSelector = '' }) => {
   return compose(
     componentNameValidationMixin,
     hoverableMixin,
-    normalizeBooleanAttributesMixin
+    normalizeBooleanAttributesMixin,
+    componentsContextMixin
   )(DescopeBaseClass);
 };
 
-// create a dispatch event function that also calls to the onevent function in case  it's set
-// usage example:
-// #dispatchSomething = createDispatchEvent.bind(this, 'something' { ...options })
-// this will dispatch a new event when called, but also call to "onsomething"
-function createDispatchEvent(eventName, options = {}) {
-  const event = new Event(eventName, options);
-
-  this[`on${eventName}`]?.(event); // in case we got an event callback as property
-  this.dispatchEvent(event);
-}
-
 const createProxy = ({
   componentName,
   wrappedEleName,
@@ -684,7 +700,7 @@ const createProxy = ({
   return ProxyClass;
 };
 
-const observedAttributes$4 = ['required', 'pattern'];
+const observedAttributes$5 = ['required', 'pattern'];
 
 const errorAttributes = {
   valueMissing: 'data-errormessage-value-missing',
@@ -695,7 +711,7 @@ const errorAttributes = {
 const inputValidationMixin = (superclass) =>
   class InputValidationMixinClass extends superclass {
     static get observedAttributes() {
-      return [...(superclass.observedAttributes || []), ...observedAttributes$4];
+      return [...(superclass.observedAttributes || []), ...observedAttributes$5];
     }
 
     static get formAssociated() {
@@ -826,7 +842,7 @@ const inputValidationMixin = (superclass) =>
     attributeChangedCallback(attrName, oldValue, newValue) {
       super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
-      if (observedAttributes$4.includes(attrName)) {
+      if (observedAttributes$5.includes(attrName)) {
         this.#setValidity();
       }
     }
@@ -903,12 +919,14 @@ const proxyInputMixin = (superclass) =>
     }
 
     get inputElement() {
+      if (this.#inputElement) return this.#inputElement
+
       this.warnIfInputElementIsMissing();
 
       const inputSlot = this.baseElement.shadowRoot?.querySelector('slot[name="input"]');
       const textAreaSlot = this.baseElement.shadowRoot?.querySelector('slot[name="textarea"]');
 
-      this.#inputElement ??= getNestedInput(inputSlot) || getNestedInput(textAreaSlot);
+      this.#inputElement = getNestedInput(inputSlot) || getNestedInput(textAreaSlot);
 
       return this.#inputElement;
     }
@@ -935,49 +953,54 @@ const proxyInputMixin = (superclass) =>
     init() {
       super.init?.();
 
-      this.inputElement.addEventListener('input', (e) => {
-        if (!this.inputElement.checkValidity()) {
-          this.inputElement.setCustomValidity('');
-          // after updating the input validity we want to trigger set validity on the wrapping element
-          // so we will get the updated validity
-          this.setCustomValidity('');
-
-          // Vaadin is getting the input event before us,
-          // so in order to make sure they use the updated validity
-          // we calling their fn after updating the input validity
-          this.baseElement.__onInput(e);
+      // on some cases the base element is not ready so the inputElement is empty
+      // we are deferring this section to make sure the base element is ready
+      setTimeout(() => {
+        this.inputElement.addEventListener('input', (e) => {
+          if (!this.inputElement.checkValidity()) {
+            this.inputElement.setCustomValidity('');
+            // after updating the input validity we want to trigger set validity on the wrapping element
+            // so we will get the updated validity
+            this.setCustomValidity('');
+
+            // Vaadin is getting the input event before us,
+            // so in order to make sure they use the updated validity
+            // we calling their fn after updating the input validity
+            this.baseElement.__onInput(e);
+
+            this.#handleErrorMessage();
+          }
+        });
 
-          this.#handleErrorMessage();
-        }
-      });
+        this.baseElement.addEventListener('change', () => {
+          this.#dispatchChange();
+        });
 
-      this.baseElement.addEventListener('change', () => {
-        this.#dispatchChange();
-      });
+        this.#inputElement.addEventListener('blur', () => {
+          if (!this.checkValidity()) {
+            this.setAttribute('invalid', 'true');
+            this.#handleErrorMessage();
+          }
+        });
 
-      this.#inputElement.addEventListener('blur', () => {
-        if (!this.checkValidity()) {
-          this.setAttribute('invalid', 'true');
+        this.addEventListener('invalid', () => {
+          if (!this.checkValidity()) {
+            this.setAttribute('invalid', 'true');
+          }
           this.#handleErrorMessage();
-        }
-      });
-
-      this.addEventListener('invalid', () => {
-        if (!this.checkValidity()) {
-          this.setAttribute('invalid', 'true');
-        }
-        this.#handleErrorMessage();
-      });
+        });
 
-      this.handleInternalInputErrorMessage();
+        this.handleInternalInputErrorMessage();
 
-      // sync properties
-      propertyObserver(this, this.inputElement, 'value');
-      propertyObserver(this, this.inputElement, 'selectionStart');
-      this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
+        // sync properties
+        propertyObserver(this, this.inputElement, 'value');
+        propertyObserver(this, this.inputElement, 'selectionStart');
+        this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
 
-      forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] });
+        forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] });
+      });
     }
+
   };
 
 const composedProxyInputMixin = compose(
@@ -1163,7 +1186,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$q = getComponentName('button');
+const componentName$r = getComponentName('button');
 
 const resetStyles = `
 	:host {
@@ -1257,7 +1280,7 @@ const ButtonClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$q,
+    componentName: componentName$r,
   })
 );
 
@@ -1294,7 +1317,7 @@ loadingIndicatorStyles = `
 	}
 `;
 
-customElements.define(componentName$q, ButtonClass);
+customElements.define(componentName$r, ButtonClass);
 
 const createBaseInputClass = (...args) =>
   compose(
@@ -1304,11 +1327,11 @@ const createBaseInputClass = (...args) =>
     inputEventsDispatchingMixin
   )(createBaseClass(...args));
 
-const componentName$p = getComponentName('boolean-field-internal');
+const componentName$q = getComponentName('boolean-field-internal');
 
 const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
 
-const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$p, baseSelector: 'div' });
+const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$q, baseSelector: 'div' });
 
 class BooleanInputInternal extends BaseInputClass$4 {
   constructor() {
@@ -1368,14 +1391,14 @@ const booleanFieldMixin = (superclass) =>
 
       const template = document.createElement('template');
       template.innerHTML = `
-				<${componentName$p}
+				<${componentName$q}
 					tabindex="-1"
 					slot="input"
-				></${componentName$p}>
+				></${componentName$q}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$p);
+      this.inputElement = this.shadowRoot.querySelector(componentName$q);
       this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
       forwardAttrs(this, this.inputElement, {
@@ -1555,7 +1578,7 @@ vaadin-checkbox::part(checkbox) {
 }
 `;
 
-const componentName$o = getComponentName('checkbox');
+const componentName$p = getComponentName('checkbox');
 
 const {
   host: host$c,
@@ -1645,15 +1668,15 @@ const CheckboxClass = compose(
 			${useHostExternalPadding(CheckboxClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$o,
+    componentName: componentName$p,
   })
 );
 
-customElements.define(componentName$p, BooleanInputInternal);
+customElements.define(componentName$q, BooleanInputInternal);
 
-customElements.define(componentName$o, CheckboxClass);
+customElements.define(componentName$p, CheckboxClass);
 
-const componentName$n = getComponentName('switch-toggle');
+const componentName$o = getComponentName('switch-toggle');
 
 const {
   host: host$b,
@@ -1756,17 +1779,17 @@ const SwitchToggleClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$n,
+    componentName: componentName$o,
   })
 );
 
-customElements.define(componentName$n, SwitchToggleClass);
+customElements.define(componentName$o, SwitchToggleClass);
 
-const componentName$m = getComponentName('loader-linear');
+const componentName$n = getComponentName('loader-linear');
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$m, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$n, baseSelector: ':host > div' }) {
   static get componentName() {
-    return componentName$m;
+    return componentName$n;
   }
 
   constructor() {
@@ -1827,11 +1850,11 @@ const LoaderLinearClass = compose(
   componentNameValidationMixin
 )(RawLoaderLinear);
 
-customElements.define(componentName$m, LoaderLinearClass);
+customElements.define(componentName$n, LoaderLinearClass);
 
-const componentName$l = getComponentName('loader-radial');
+const componentName$m = getComponentName('loader-radial');
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$l, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$m, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -1875,11 +1898,11 @@ const LoaderRadialClass = compose(
   componentNameValidationMixin
 )(RawLoaderRadial);
 
-customElements.define(componentName$l, LoaderRadialClass);
+customElements.define(componentName$m, LoaderRadialClass);
 
-const componentName$k = getComponentName('container');
+const componentName$l = getComponentName('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$k, baseSelector: ':host > slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$l, baseSelector: ':host > slot' }) {
   constructor() {
     super();
 
@@ -1931,10 +1954,10 @@ const ContainerClass = compose(
   componentNameValidationMixin
 )(RawContainer);
 
-customElements.define(componentName$k, ContainerClass);
+customElements.define(componentName$l, ContainerClass);
 
-const componentName$j = getComponentName('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > div' }) {
+const componentName$k = getComponentName('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$k, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -2030,9 +2053,9 @@ const DividerClass = compose(
   componentNameValidationMixin
 )(RawDivider);
 
-const componentName$i = getComponentName('text');
+const componentName$j = getComponentName('text');
 
-class RawText extends createBaseClass({ componentName: componentName$i, baseSelector: ':host > slot' }) {
+class RawText extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > slot' }) {
   constructor() {
     super();
 
@@ -2074,9 +2097,9 @@ const TextClass = compose(
   componentNameValidationMixin
 )(RawText);
 
-customElements.define(componentName$i, TextClass);
+customElements.define(componentName$j, TextClass);
 
-customElements.define(componentName$j, DividerClass);
+customElements.define(componentName$k, DividerClass);
 
 const { host: host$8, label: label$6, placeholder: placeholder$2, requiredIndicator: requiredIndicator$6, inputField: inputField$4, input, helperText: helperText$5, errorMessage: errorMessage$6 } =
   {
@@ -2132,7 +2155,7 @@ var textFieldMappings = {
   inputPlaceholderColor: { ...placeholder$2, property: 'color' },
 };
 
-const componentName$h = getComponentName('email-field');
+const componentName$i = getComponentName('email-field');
 
 const EmailFieldClass = compose(
   createStyleMixin({
@@ -2157,15 +2180,15 @@ const EmailFieldClass = compose(
 			${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}		
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$h,
+    componentName: componentName$i,
   })
 );
 
-customElements.define(componentName$h, EmailFieldClass);
+customElements.define(componentName$i, EmailFieldClass);
 
-const componentName$g = getComponentName('link');
+const componentName$h = getComponentName('link');
 
-class RawLink extends createBaseClass({ componentName: componentName$g, baseSelector: ':host a' }) {
+class RawLink extends createBaseClass({ componentName: componentName$h, baseSelector: ':host a' }) {
   constructor() {
     super();
 
@@ -2229,7 +2252,7 @@ const LinkClass = compose(
   componentNameValidationMixin
 )(RawLink);
 
-customElements.define(componentName$g, LinkClass);
+customElements.define(componentName$h, LinkClass);
 
 const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
   let style;
@@ -2281,27 +2304,27 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   return CssVarImageClass;
 };
 
-const componentName$f = getComponentName('logo');
+const componentName$g = getComponentName('logo');
 
 const LogoClass = createCssVarImageClass({
-  componentName: componentName$f,
+  componentName: componentName$g,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$f, LogoClass);
+customElements.define(componentName$g, LogoClass);
 
-const componentName$e = getComponentName('totp-image');
+const componentName$f = getComponentName('totp-image');
 
 const TotpImageClass = createCssVarImageClass({
-  componentName: componentName$e,
+  componentName: componentName$f,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$e, TotpImageClass);
+customElements.define(componentName$f, TotpImageClass);
 
-const componentName$d = getComponentName('number-field');
+const componentName$e = getComponentName('number-field');
 
 const NumberFieldClass = compose(
   createStyleMixin({
@@ -2326,11 +2349,11 @@ const NumberFieldClass = compose(
 			${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$d,
+    componentName: componentName$e,
   })
 );
 
-customElements.define(componentName$d, NumberFieldClass);
+customElements.define(componentName$e, NumberFieldClass);
 
 const focusElement = (ele) => {
   ele?.focus();
@@ -2348,21 +2371,21 @@ const getSanitizedCharacters = (str) => {
 
 /* eslint-disable no-param-reassign */
 
-const componentName$c = getComponentName('passcode-internal');
+const componentName$d = getComponentName('passcode-internal');
 
-const observedAttributes$3 = ['digits'];
+const observedAttributes$4 = ['digits'];
 
 const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
 
-const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$c, baseSelector: 'div' });
+const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$d, baseSelector: 'div' });
 
 class PasscodeInternal extends BaseInputClass$3 {
   static get observedAttributes() {
-    return observedAttributes$3.concat(BaseInputClass$3.observedAttributes || []);
+    return observedAttributes$4.concat(BaseInputClass$3.observedAttributes || []);
   }
 
   static get componentName() {
-    return componentName$c;
+    return componentName$d;
   }
 
   constructor() {
@@ -2534,7 +2557,7 @@ class PasscodeInternal extends BaseInputClass$3 {
 
     // sync attributes to inputs
     if (oldValue !== newValue) {
-      if (observedAttributes$3.includes(attrName)) {
+      if (observedAttributes$4.includes(attrName)) {
         if (attrName === 'digits') {
           this.renderInputs();
         }
@@ -2547,7 +2570,7 @@ class PasscodeInternal extends BaseInputClass$3 {
   }
 }
 
-const componentName$b = getComponentName('text-field');
+const componentName$c = getComponentName('text-field');
 
 const observedAttrs = ['type'];
 
@@ -2595,18 +2618,18 @@ const TextFieldClass = compose(
 			${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$b,
+    componentName: componentName$c,
   })
 );
 
-const componentName$a = getComponentName('passcode');
+const componentName$b = getComponentName('passcode');
 
-const observedAttributes$2 = ['digits'];
+const observedAttributes$3 = ['digits'];
 
 const customMixin$2 = (superclass) =>
   class PasscodeMixinClass extends superclass {
     static get observedAttributes() {
-      return observedAttributes$2.concat(superclass.observedAttributes || []);
+      return observedAttributes$3.concat(superclass.observedAttributes || []);
     }
 
     get digits() {
@@ -2618,17 +2641,17 @@ const customMixin$2 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-			<${componentName$c}
+			<${componentName$d}
 				bordered="true"
 				name="code"
 				tabindex="-1"
 				slot="input"
-			></${componentName$c}>
+			></${componentName$d}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$c);
+      this.inputElement = this.shadowRoot.querySelector(componentName$d);
 
       forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
     }
@@ -2766,15 +2789,15 @@ const PasscodeClass = compose(
 			${resetInputCursor('vaadin-text-field')}
     	`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$a,
+    componentName: componentName$b,
   })
 );
 
-customElements.define(componentName$b, TextFieldClass);
+customElements.define(componentName$c, TextFieldClass);
 
-customElements.define(componentName$c, PasscodeInternal);
+customElements.define(componentName$d, PasscodeInternal);
 
-customElements.define(componentName$a, PasscodeClass);
+customElements.define(componentName$b, PasscodeClass);
 
 const passwordDraggableMixin = (superclass) =>
   class PasswordDraggableMixinClass extends superclass {
@@ -2810,7 +2833,7 @@ const passwordDraggableMixin = (superclass) =>
     }
   };
 
-const componentName$9 = getComponentName('password');
+const componentName$a = getComponentName('password');
 
 const {
   host: host$5,
@@ -2938,13 +2961,13 @@ const PasswordClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$9,
+    componentName: componentName$a,
   })
 );
 
-customElements.define(componentName$9, PasswordClass);
+customElements.define(componentName$a, PasswordClass);
 
-const componentName$8 = getComponentName('text-area');
+const componentName$9 = getComponentName('text-area');
 
 const {
   host: host$4,
@@ -3016,20 +3039,20 @@ const TextAreaClass = compose(
 			${resetInputCursor('vaadin-text-area')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$8,
+    componentName: componentName$9,
   })
 );
 
-customElements.define(componentName$8, TextAreaClass);
+customElements.define(componentName$9, TextAreaClass);
 
-const observedAttributes$1 = ['src', 'alt'];
+const observedAttributes$2 = ['src', 'alt'];
 
-const componentName$7 = getComponentName('image');
+const componentName$8 = getComponentName('image');
 
-const BaseClass = createBaseClass({ componentName: componentName$7, baseSelector: ':host > img' });
-class RawImage extends BaseClass {
+const BaseClass$1 = createBaseClass({ componentName: componentName$8, baseSelector: ':host > img' });
+class RawImage extends BaseClass$1 {
   static get observedAttributes() {
-    return observedAttributes$1.concat(BaseClass.observedAttributes || []);
+    return observedAttributes$2.concat(BaseClass$1.observedAttributes || []);
   }
 
   constructor() {
@@ -3052,7 +3075,7 @@ class RawImage extends BaseClass {
   connectedCallback() {
     super.connectedCallback?.();
 
-    forwardAttrs(this, this.baseElement, { includeAttrs: observedAttributes$1 });
+    forwardAttrs(this, this.baseElement, { includeAttrs: observedAttributes$2 });
   }
 }
 
@@ -3066,9 +3089,9 @@ const ImageClass = compose(
   draggableMixin
 )(RawImage);
 
-customElements.define(componentName$7, ImageClass);
+customElements.define(componentName$8, ImageClass);
 
-const componentName$6 = getComponentName('combo-box');
+const componentName$7 = getComponentName('combo-box');
 
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
@@ -3249,12 +3272,12 @@ const ComboBoxClass = compose(
     // and reset items to an empty array, and opening the list box with no items
     // to display.
     excludeAttrsSync: ['tabindex', 'size'],
-    componentName: componentName$6,
+    componentName: componentName$7,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   })
 );
 
-customElements.define(componentName$6, ComboBoxClass);
+customElements.define(componentName$7, ComboBoxClass);
 
 var CountryCodes = [
   {
@@ -4494,7 +4517,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
 	</div>
 `;
 
-const componentName$5 = getComponentName('phone-field-internal');
+const componentName$6 = getComponentName('phone-field-internal');
 
 const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
 const countryAttrs = ['country-input-placeholder', 'default-code'];
@@ -4506,7 +4529,7 @@ const mapAttrs = {
 
 const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
 
-const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$5, baseSelector: 'div' });
+const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$6, baseSelector: 'div' });
 
 class PhoneFieldInternal extends BaseInputClass$2 {
   static get observedAttributes() {
@@ -4566,7 +4589,7 @@ class PhoneFieldInternal extends BaseInputClass$2 {
     const hasPhone = this.phoneNumberInput.value;
     const emptyValue = !hasCode || !hasPhone;
     const hasMinPhoneLength =
-      this.phoneNumberInput.value.length && this.phoneNumberInput.value.length < this.minLength;
+      this.phoneNumberInput.value?.length && this.phoneNumberInput.value.length < this.minLength;
 
     if (this.isRequired && emptyValue) {
       return { valueMissing: true };
@@ -4679,12 +4702,12 @@ class PhoneFieldInternal extends BaseInputClass$2 {
   }
 }
 
-customElements.define(componentName$5, PhoneFieldInternal);
+customElements.define(componentName$6, PhoneFieldInternal);
 
 const textVars = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
 
-const componentName$4 = getComponentName('phone-field');
+const componentName$5 = getComponentName('phone-field');
 
 const customMixin$1 = (superclass) =>
   class PhoneFieldMixinClass extends superclass {
@@ -4698,15 +4721,15 @@ const customMixin$1 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$5}
+				<${componentName$6}
 					tabindex="-1"
 					slot="input"
-				></${componentName$5}>
+				></${componentName$6}>
       		`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$5);
+      this.inputElement = this.shadowRoot.querySelector(componentName$6);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -4899,15 +4922,15 @@ const PhoneFieldClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$4,
+    componentName: componentName$5,
   })
 );
 
-customElements.define(componentName$4, PhoneFieldClass);
+customElements.define(componentName$5, PhoneFieldClass);
 
-const componentName$3 = getComponentName('new-password-internal');
+const componentName$4 = getComponentName('new-password-internal');
 
-const componentName$2 = getComponentName('new-password');
+const componentName$3 = getComponentName('new-password');
 
 const customMixin = (superclass) =>
   class NewPasswordMixinClass extends superclass {
@@ -4917,16 +4940,16 @@ const customMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-			<${componentName$3}
+			<${componentName$4}
 				name="new-password"
 				tabindex="-1"
 				slot="input"
-			></${componentName$3}>
+			></${componentName$4}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$3);
+      this.inputElement = this.shadowRoot.querySelector(componentName$4);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
@@ -5025,7 +5048,7 @@ const NewPasswordClass = compose(
 		},
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$2,
+    componentName: componentName$3,
   })
 );
 
@@ -5049,7 +5072,7 @@ const commonAttrs = [
 
 const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
 
-const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$3, baseSelector: 'div' });
+const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$4, baseSelector: 'div' });
 
 class NewPasswordInternal extends BaseInputClass$1 {
   static get observedAttributes() {
@@ -5209,9 +5232,168 @@ class NewPasswordInternal extends BaseInputClass$1 {
   }
 }
 
-customElements.define(componentName$3, NewPasswordInternal);
+customElements.define(componentName$4, NewPasswordInternal);
+
+customElements.define(componentName$3, NewPasswordClass);
+
+const componentName$2 = getComponentName('recaptcha');
+
+const observedAttributes$1 = ['disabled', 'site-key', 'action', 'enterprise'];
 
-customElements.define(componentName$2, NewPasswordClass);
+const BaseClass = createBaseClass({
+  componentName: componentName$2,
+  baseSelector: ':host > div',
+});
+class RawRecaptcha extends BaseClass {
+  static get observedAttributes() {
+    return observedAttributes$1.concat(BaseClass.observedAttributes || []);
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+    if (attrName === 'disabled') {
+      this.#toggleRecaptcha(newValue === 'true');
+    }
+  }
+
+  renderRecaptcha(disabled) {
+    if (disabled) {
+      this.recaptchaEle.style.display = 'none';
+      this.mockRecaptchaEle.style.display = '';
+    } else {
+      this.recaptchaEle.style.display = '';
+      this.mockRecaptchaEle.style.display = 'none';
+    }
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+			:host #recaptcha {
+				width: 100%;
+				height: 100%
+			}
+      :host img {
+        width: 256px;
+      }
+			:host {
+				display: inline-flex;
+			}
+		</style>
+    <div>
+      <span id="recaptcha"></span>
+      <img src="https://imgs.descope.com/connectors/templates/recaptcha/recaptcha-big.png" alt="recaptcha"/>
+    </div>
+	`;
+
+    this.recaptchaEle = this.baseElement.querySelector('#recaptcha');
+    this.mockRecaptchaEle = this.baseElement.querySelector('img');
+  }
+
+  get enterprise() {
+    return this.getAttribute('enterprise') === 'true';
+  }
+
+  get siteKey() {
+    return this.getAttribute('site-key');
+  }
+
+  get action() {
+    return this.getAttribute('action') || 'load';
+  }
+
+  get disabled() {
+    return this.getAttribute('disabled') === 'true';
+  }
+
+  get scriptURL() {
+    const url = new URL('https://www.google.com/recaptcha/');
+    url.pathname += `${this.enterprise ? 'enterprise' : 'api'}.js`;
+    url.searchParams.append('onload', 'onRecaptchaLoadCallback');
+    url.searchParams.append('render', 'explicit');
+    return url.toString();
+  }
+
+  #toggleRecaptcha(disabled) {
+    this.renderRecaptcha(disabled);
+    if (!disabled) {
+      this.#loadRecaptchaScript();
+      this.#createOnLoadScript();
+    }
+  }
+
+  #loadRecaptchaScript() {
+    if (!document.getElementById('recaptcha-script')) {
+      const script = document.createElement('script');
+      script.src = this.scriptURL;
+      script.async = true;
+      script.id = 'recaptcha-script';
+      script.defer = true;
+      document.body.appendChild(script);
+    } else {
+      window.onRecaptchaLoadCallback();
+    }
+  }
+
+  #createOnLoadScript() {
+    if (window.onRecaptchaLoadCallback) {
+      return;
+    }
+
+    window.onRecaptchaLoadCallback = () => {
+      const currentNode = this.recaptchaEle;
+      // if there are child nodes, it means that the recaptcha was already rendered
+      if (currentNode.hasChildNodes()) {
+        return;
+      }
+      const grecaptchaInstance = this.enterprise
+        ? window.grecaptcha?.enterprise
+        : window.grecaptcha;
+
+      if (!grecaptchaInstance) {
+        return;
+      }
+
+      setTimeout(() => {
+        const view = grecaptchaInstance.render(currentNode, {
+          sitekey: this.siteKey,
+          badge: 'inline',
+          size: 'invisible',
+        });
+        grecaptchaInstance.ready(() => {
+          // clone the node and append it to the body so that it can be used by the grepcaptcha script
+          const cloneNode = currentNode.querySelector('#g-recaptcha-response')?.cloneNode();
+          if (cloneNode) {
+            cloneNode.style.display = 'none';
+            document.body.appendChild(cloneNode);
+          }
+          if (this.siteKey) {
+            grecaptchaInstance?.execute(view, { action: this.action }).then((token) => {
+              this.updateComponentsContext({
+                risktoken: token,
+                riskaction: this.action,
+              });
+            });
+          }
+        });
+      }, 0);
+    };
+  }
+
+  connectedCallback() {
+    super.connectedCallback?.();
+
+    this.#toggleRecaptcha(this.disabled);
+  }
+}
+
+const RecaptchaClass = compose(
+  draggableMixin
+)(RawRecaptcha);
+
+customElements.define(componentName$2, RecaptchaClass);
 
 const getFileBase64 = (fileObj) => {
   return new Promise((resolve) => {
@@ -5763,7 +5945,7 @@ const mode = {
   surface: globalRefs$b.colors.surface,
 };
 
-const [helperTheme$3, helperRefs$3, helperVars$2] = createHelperVars({ mode }, componentName$q);
+const [helperTheme$3, helperRefs$3, helperVars$2] = createHelperVars({ mode }, componentName$r);
 
 const verticalPaddingRatio = 3;
 const horizontalPaddingRatio = 2;
@@ -6233,7 +6415,7 @@ const [helperTheme$2, helperRefs$2, helperVars$1] = createHelperVars(
     horizontalAlignment,
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$k
+  componentName$l
 );
 
 const { shadowColor } = helperRefs$2;
@@ -6489,7 +6671,7 @@ const [helperTheme$1, helperRefs$1, helperVars] = createHelperVars(
     thickness: '2px',
     spacing: '10px',
   },
-  componentName$j
+  componentName$k
 );
 
 const divider = {
@@ -6618,7 +6800,7 @@ const [helperTheme, helperRefs] = createHelperVars(
       },
     },
   },
-  componentName$l
+  componentName$m
 );
 
 const loaderRadial = {
@@ -6867,5 +7049,5 @@ const vars = Object.keys(components).reduce(
 const defaultTheme = { globals, components: theme };
 const themeVars = { globals: vars$o, components: vars };
 
-export { ButtonClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
+export { ButtonClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
 //# sourceMappingURL=index.esm.js.map