@descope/web-components-ui 2.2.25 → 2.2.27

package/dist/cjs/index.cjs.js

@@ -3049,12 +3049,12 @@ const createImage = async (src, altText) => {
 
 /* eslint-disable no-use-before-define */
 
-const componentName$1g = getComponentName('image');
+const componentName$1h = getComponentName('image');
 
 const srcAttrs = ['src', 'src-dark'];
 
 class RawImage extends createBaseClass$1({
-  componentName: componentName$1g,
+  componentName: componentName$1h,
   baseSelector: 'slot',
 }) {
   static get observedAttributes() {
@@ -3182,7 +3182,7 @@ const ImageClass = compose(
   componentNameValidationMixin$1,
 )(RawImage);
 
-const componentName$1f = getComponentName('icon');
+const componentName$1g = getComponentName('icon');
 
 const IconClass = compose(
   createStyleMixin$1({
@@ -3199,10 +3199,11 @@ const IconClass = compose(
     style: () => `
       :host {
         display: inline-flex;
+        max-height: 100%;
       }
       `,
     excludeAttrsSync: ['tabindex', 'class', 'style'],
-    componentName: componentName$1f,
+    componentName: componentName$1g,
   }),
 );
 
@@ -3217,7 +3218,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$1e = getComponentName('button');
+const componentName$1f = getComponentName('button');
 
 const resetStyles = `
 	:host {
@@ -3333,7 +3334,7 @@ const ButtonClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex', 'class', 'style'],
-    componentName: componentName$1e,
+    componentName: componentName$1f,
   })
 );
 
@@ -3381,7 +3382,7 @@ const mode = {
   surface: globalRefs$H.colors.surface,
 };
 
-const [helperTheme$6, helperRefs$6, helperVars$6] = createHelperVars$1({ mode }, componentName$1e);
+const [helperTheme$6, helperRefs$6, helperVars$6] = createHelperVars$1({ mode }, componentName$1f);
 
 const button = {
   ...helperTheme$6,
@@ -5135,7 +5136,7 @@ var textFieldMappings = {
   inputIconColor: { ...inputIcon, property: 'color' },
 };
 
-const componentName$1d = getComponentName$1('text-field');
+const componentName$1e = getComponentName$1('text-field');
 
 const observedAttrs$4 = ['type', 'label-type', 'copy-to-clipboard'];
 
@@ -5257,11 +5258,11 @@ const TextFieldClass = compose$1(
       }
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$1d,
+    componentName: componentName$1e,
   })
 );
 
-const componentName$1c = getComponentName$1('input-wrapper');
+const componentName$1d = getComponentName$1('input-wrapper');
 const globalRefs$G = getThemeRefs(globals$1);
 
 const [theme$2, refs$1, vars$12] = createHelperVars(
@@ -5383,7 +5384,7 @@ const [theme$2, refs$1, vars$12] = createHelperVars(
       backgroundColor: globalRefs$G.colors.surface.main,
     },
   },
-  componentName$1c
+  componentName$1d
 );
 
 var inputWrapper = /*#__PURE__*/Object.freeze({
@@ -5496,7 +5497,7 @@ const passwordDraggableMixin = (superclass) =>
     }
   };
 
-const componentName$1b = getComponentName$1('password');
+const componentName$1c = getComponentName$1('password');
 
 const customMixin$d = (superclass) =>
   class PasswordFieldMixinClass extends superclass {
@@ -5780,7 +5781,7 @@ const PasswordClass = compose$1(
       }
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$1b,
+    componentName: componentName$1c,
   })
 );
 
@@ -5839,7 +5840,7 @@ var password$1 = /*#__PURE__*/Object.freeze({
   vars: vars$10
 });
 
-const componentName$1a = getComponentName$1('number-field');
+const componentName$1b = getComponentName$1('number-field');
 
 const NumberFieldClass = compose$1(
   createStyleMixin({
@@ -5873,7 +5874,7 @@ const NumberFieldClass = compose$1(
       }
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$1a,
+    componentName: componentName$1b,
   })
 );
 
@@ -5929,7 +5930,7 @@ var numberField$1 = /*#__PURE__*/Object.freeze({
   vars: vars$$
 });
 
-const componentName$19 = getComponentName$1('email-field');
+const componentName$1a = getComponentName$1('email-field');
 
 const defaultPattern = "^[\\w\\.\\%\\+\\-']+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$";
 const defaultAutocomplete = 'username';
@@ -5998,7 +5999,7 @@ const EmailFieldClass = compose$1(
       }
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$19,
+    componentName: componentName$1a,
   })
 );
 
@@ -6054,7 +6055,7 @@ var emailField$1 = /*#__PURE__*/Object.freeze({
   vars: vars$_
 });
 
-const componentName$18 = getComponentName$1('text-area');
+const componentName$19 = getComponentName$1('text-area');
 
 const {
   host: host$t,
@@ -6137,7 +6138,7 @@ const TextAreaClass = compose$1(
 			${resetInputCursor('vaadin-text-area')}
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$18,
+    componentName: componentName$19,
   })
 );
 
@@ -6215,9 +6216,9 @@ const decodeHTML = (html) => {
 /* eslint-disable no-param-reassign */
 
 
-const componentName$17 = getComponentName('enriched-text');
+const componentName$18 = getComponentName('enriched-text');
 
-class EnrichedText extends createBaseClass$1({ componentName: componentName$17, baseSelector: ':host > div' }) {
+class EnrichedText extends createBaseClass$1({ componentName: componentName$18, baseSelector: ':host > div' }) {
   #origLinkRenderer;
 
   #origEmRenderer;
@@ -6430,9 +6431,9 @@ const createBaseInputClass = (...args) =>
     inputEventsDispatchingMixin
   )(createBaseClass(...args));
 
-const componentName$16 = getComponentName$1('boolean-field-internal');
+const componentName$17 = getComponentName$1('boolean-field-internal');
 
-createBaseInputClass({ componentName: componentName$16, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$17, baseSelector: 'div' });
 
 const booleanFieldMixin = (superclass) =>
   class BooleanFieldMixinClass extends superclass {
@@ -6441,14 +6442,14 @@ const booleanFieldMixin = (superclass) =>
 
       const template = document.createElement('template');
       template.innerHTML = `
-				<${componentName$16}
+				<${componentName$17}
 					tabindex="-1"
 					slot="input"
-				></${componentName$16}>
+				></${componentName$17}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$16);
+      this.inputElement = this.shadowRoot.querySelector(componentName$17);
       this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
       forwardAttrs$1(this, this.inputElement, {
@@ -6526,7 +6527,7 @@ descope-enriched-text {
 
 `;
 
-const componentName$15 = getComponentName$1('checkbox');
+const componentName$16 = getComponentName$1('checkbox');
 
 const {
   host: host$s,
@@ -6662,7 +6663,7 @@ const CheckboxClass = compose$1(
       }
     `,
     excludeAttrsSync: ['label', 'tabindex', 'style'],
-    componentName: componentName$15,
+    componentName: componentName$16,
   })
 );
 
@@ -6707,7 +6708,7 @@ var checkbox$1 = /*#__PURE__*/Object.freeze({
   vars: vars$Y
 });
 
-const componentName$14 = getComponentName$1('switch-toggle');
+const componentName$15 = getComponentName$1('switch-toggle');
 
 const {
   host: host$r,
@@ -6851,7 +6852,7 @@ const SwitchToggleClass = compose$1(
 			}
 		`,
     excludeAttrsSync: ['label', 'tabindex', 'style'],
-    componentName: componentName$14,
+    componentName: componentName$15,
   })
 );
 
@@ -6932,9 +6933,9 @@ var switchToggle$1 = /*#__PURE__*/Object.freeze({
   vars: vars$X
 });
 
-const componentName$13 = getComponentName$1('container');
+const componentName$14 = getComponentName$1('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$13, baseSelector: 'slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$14, baseSelector: 'slot' }) {
   constructor() {
     super();
 
@@ -7019,7 +7020,7 @@ const [helperTheme$5, helperRefs$5, helperVars$5] = createHelperVars(
     horizontalAlignment,
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$13
+  componentName$14
 );
 
 const { shadowColor: shadowColor$5 } = helperRefs$5;
@@ -7184,10 +7185,10 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   return CssVarImageClass;
 };
 
-const componentName$12 = getComponentName$1('logo');
+const componentName$13 = getComponentName$1('logo');
 
 const LogoClass = createCssVarImageClass({
-  componentName: componentName$12,
+  componentName: componentName$13,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
@@ -7204,10 +7205,10 @@ var logo$3 = /*#__PURE__*/Object.freeze({
   vars: vars$V
 });
 
-const componentName$11 = getComponentName$1('totp-image');
+const componentName$12 = getComponentName$1('totp-image');
 
 const TotpImageClass = createCssVarImageClass({
-  componentName: componentName$11,
+  componentName: componentName$12,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
@@ -7224,10 +7225,10 @@ var totpImage = /*#__PURE__*/Object.freeze({
   vars: vars$U
 });
 
-const componentName$10 = getComponentName$1('notp-image');
+const componentName$11 = getComponentName$1('notp-image');
 
 const NotpImageClass = createCssVarImageClass({
-  componentName: componentName$10,
+  componentName: componentName$11,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
@@ -7244,10 +7245,10 @@ var notpImage = /*#__PURE__*/Object.freeze({
   vars: vars$T
 });
 
-const componentName$$ = getComponentName('text');
+const componentName$10 = getComponentName('text');
 
 class RawText extends createBaseClass$1({
-  componentName: componentName$$,
+  componentName: componentName$10,
   baseSelector: ':host > slot',
 }) {
   constructor() {
@@ -7416,9 +7417,9 @@ var text$4 = /*#__PURE__*/Object.freeze({
   vars: vars$S
 });
 
-const componentName$_ = getComponentName('link');
+const componentName$$ = getComponentName('link');
 
-class RawLink extends createBaseClass$1({ componentName: componentName$_, baseSelector: ':host a' }) {
+class RawLink extends createBaseClass$1({ componentName: componentName$$, baseSelector: ':host a' }) {
   constructor() {
     super();
 
@@ -7569,8 +7570,8 @@ var enrichedText$1 = /*#__PURE__*/Object.freeze({
   vars: vars$Q
 });
 
-const componentName$Z = getComponentName$1('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$Z, baseSelector: ':host > div' }) {
+const componentName$_ = getComponentName$1('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$_, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -7681,7 +7682,7 @@ const [helperTheme$4, helperRefs$4, helperVars$4] = createHelperVars(
     thickness: '2px',
     spacing: '10px',
   },
-  componentName$Z
+  componentName$_
 );
 
 const divider = {
@@ -7725,13 +7726,13 @@ var divider$1 = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable no-param-reassign */
 
-const componentName$Y = getComponentName$1('passcode-internal');
+const componentName$Z = getComponentName$1('passcode-internal');
 
-createBaseInputClass({ componentName: componentName$Y, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$Z, baseSelector: 'div' });
 
-const componentName$X = getComponentName$1('loader-radial');
+const componentName$Y = getComponentName$1('loader-radial');
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$X, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$Y, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -7779,7 +7780,7 @@ const LoaderRadialClass = compose$1(
   componentNameValidationMixin
 )(RawLoaderRadial);
 
-const componentName$W = getComponentName$1('passcode');
+const componentName$X = getComponentName$1('passcode');
 
 const observedAttributes$4 = ['digits'];
 
@@ -7824,18 +7825,18 @@ const customMixin$b = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$Y}
+      <${componentName$Z}
         bordered="true"
         name="code"
         tabindex="-1"
         slot="input"
         role="textbox"
-      ><slot></slot></${componentName$Y}>
+      ><slot></slot></${componentName$Z}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$Y);
+      this.inputElement = this.shadowRoot.querySelector(componentName$Z);
 
       forwardAttrs$1(this, this.inputElement, {
         includeAttrs: ['digits', 'size', 'loading', 'disabled'],
@@ -7998,7 +7999,7 @@ const PasscodeClass = compose$1(
 			${resetInputCursor('vaadin-text-field')}
     	`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$W,
+    componentName: componentName$X,
   })
 );
 
@@ -8051,11 +8052,11 @@ var passcode$1 = /*#__PURE__*/Object.freeze({
   vars: vars$O
 });
 
-const componentName$V = getComponentName$1('loader-linear');
+const componentName$W = getComponentName$1('loader-linear');
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$V, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$W, baseSelector: ':host > div' }) {
   static get componentName() {
-    return componentName$V;
+    return componentName$W;
   }
 
   constructor() {
@@ -8180,7 +8181,7 @@ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars(
       },
     },
   },
-  componentName$X
+  componentName$Y
 );
 
 const loaderRadial = {
@@ -8220,7 +8221,7 @@ var loaderRadial$1 = /*#__PURE__*/Object.freeze({
   vars: vars$M
 });
 
-const componentName$U = getComponentName('combo-box');
+const componentName$V = getComponentName('combo-box');
 
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
@@ -8876,12 +8877,12 @@ const ComboBoxClass = compose(
     // and reset items to an empty array, and opening the list box with no items
     // to display.
     excludeAttrsSync: ['tabindex', 'size', 'data', 'loading', 'style'],
-    componentName: componentName$U,
+    componentName: componentName$V,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   }),
 );
 
-const componentName$T = getComponentName('input-wrapper');
+const componentName$U = getComponentName('input-wrapper');
 const globalRefs$v = getThemeRefs$1(globals);
 
 const [theme$1, refs] = createHelperVars$1(
@@ -9004,7 +9005,7 @@ const [theme$1, refs] = createHelperVars$1(
       backgroundColor: globalRefs$v.colors.surface.main,
     },
   },
-  componentName$T,
+  componentName$U,
 );
 
 const globalRefs$u = getThemeRefs$1(globals);
@@ -10322,14 +10323,14 @@ var CountryCodes = [
   ].sort((a, b) => (a.name < b.name ? -1 : 1)),
 ];
 
-const componentName$S = getComponentName$1('phone-field-internal');
+const componentName$T = getComponentName$1('phone-field-internal');
 
-createBaseInputClass({ componentName: componentName$S, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$T, baseSelector: 'div' });
 
 const textVars$3 = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
 
-const componentName$R = getComponentName$1('phone-field');
+const componentName$S = getComponentName$1('phone-field');
 
 const customMixin$a = (superclass) =>
   class PhoneFieldMixinClass extends superclass {
@@ -10343,15 +10344,15 @@ const customMixin$a = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$S}
+				<${componentName$T}
 					tabindex="-1"
 					slot="input"
-				></${componentName$S}>
+				></${componentName$T}>
       		`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$S);
+      this.inputElement = this.shadowRoot.querySelector(componentName$T);
 
       forwardAttrs$1(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -10624,7 +10625,7 @@ const PhoneFieldClass = compose$1(
       ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$R,
+    componentName: componentName$S,
   })
 );
 
@@ -10674,13 +10675,13 @@ var phoneField$1 = /*#__PURE__*/Object.freeze({
   vars: vars$K
 });
 
-const componentName$Q = getComponentName$1('phone-field-internal-input-box');
+const componentName$R = getComponentName$1('phone-field-internal-input-box');
 
-createBaseInputClass({ componentName: componentName$Q, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$R, baseSelector: 'div' });
 
 const textVars$2 = TextFieldClass.cssVarList;
 
-const componentName$P = getComponentName$1('phone-input-box-field');
+const componentName$Q = getComponentName$1('phone-input-box-field');
 
 const customMixin$9 = (superclass) =>
   class PhoneFieldInputBoxMixinClass extends superclass {
@@ -10694,15 +10695,15 @@ const customMixin$9 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$Q}
+				<${componentName$R}
 					tabindex="-1"
 					slot="input"
-				></${componentName$Q}>
+				></${componentName$R}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$Q);
+      this.inputElement = this.shadowRoot.querySelector(componentName$R);
 
       syncAttrs(this, this.inputElement, { includeAttrs: ['has-value'] });
 
@@ -10909,7 +10910,7 @@ const PhoneFieldInputBoxClass = compose$1(
     ${inputFloatingLabelStyle()}
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$P,
+    componentName: componentName$Q,
   })
 );
 
@@ -10965,14 +10966,14 @@ var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
   vars: vars$J
 });
 
-const componentName$O = getComponentName$1('new-password-internal');
+const componentName$P = getComponentName$1('new-password-internal');
 
 const interpolateString = (template, values) =>
   template.replace(/{{(\w+)+}}/g, (match, key) => values?.[key] || match);
 
 // eslint-disable-next-line max-classes-per-file
 
-const componentName$N = getComponentName$1('policy-validation');
+const componentName$O = getComponentName$1('policy-validation');
 
 const overrideAttrs = [
   'data-password-policy-value-minlength',
@@ -10982,7 +10983,7 @@ const overrideAttrs = [
 const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
 const policyAttrs = ['label', 'value', ...dataAttrs];
 
-class RawPolicyValidation extends createBaseClass({ componentName: componentName$N, baseSelector: ':host > div' }) {
+class RawPolicyValidation extends createBaseClass({ componentName: componentName$O, baseSelector: ':host > div' }) {
   #availablePolicies;
 
   #activePolicies = [];
@@ -11254,7 +11255,7 @@ const PolicyValidationClass = compose$1(
   componentNameValidationMixin
 )(RawPolicyValidation);
 
-const componentName$M = getComponentName$1('new-password');
+const componentName$N = getComponentName$1('new-password');
 
 const policyPreviewVars = PolicyValidationClass.cssVarList;
 
@@ -11268,18 +11269,18 @@ const customMixin$8 = (superclass) =>
       const externalInputAttr = this.getAttribute('external-input');
 
       template.innerHTML = `
-			<${componentName$O}
+			<${componentName$P}
 				name="new-password"
 				tabindex="-1"
 				slot="input"
         external-input="${externalInputAttr}"
 			>
-      </${componentName$O}>
+      </${componentName$P}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$O);
+      this.inputElement = this.shadowRoot.querySelector(componentName$P);
 
       if (this.getAttribute('external-input') === 'true') {
         this.initExternalInput();
@@ -11464,7 +11465,7 @@ const NewPasswordClass = compose$1(
     }
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$M,
+    componentName: componentName$N,
   })
 );
 
@@ -11520,7 +11521,7 @@ const getFilename = (fileObj) => {
   return fileObj.name.replace(/^.*\\/, '');
 };
 
-const componentName$L = getComponentName$1('upload-file');
+const componentName$M = getComponentName$1('upload-file');
 
 const observedAttributes$3 = [
   'title',
@@ -11535,7 +11536,7 @@ const observedAttributes$3 = [
   'icon',
 ];
 
-const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$L, baseSelector: ':host > div' });
+const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$M, baseSelector: ':host > div' });
 
 class RawUploadFile extends BaseInputClass$4 {
   static get observedAttributes() {
@@ -11821,10 +11822,10 @@ var uploadFile$1 = /*#__PURE__*/Object.freeze({
   vars: vars$H
 });
 
-const componentName$K = getComponentName$1('button-selection-group-item');
+const componentName$L = getComponentName$1('button-selection-group-item');
 
 class RawSelectItem extends createBaseClass({
-  componentName: componentName$K,
+  componentName: componentName$L,
   baseSelector: ':host > descope-button',
 }) {
   get size() {
@@ -12058,10 +12059,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   return BaseButtonSelectionGroupInternalClass;
 };
 
-const componentName$J = getComponentName$1('button-selection-group-internal');
+const componentName$K = getComponentName$1('button-selection-group-internal');
 
 class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$J
+  componentName$K
 ) {
   getSelectedNode() {
     return this.items.find((item) => item.hasAttribute('selected'));
@@ -12306,7 +12307,7 @@ const buttonSelectionGroupStyles = `
 			${resetInputCursor('vaadin-text-field')}
     `;
 
-const componentName$I = getComponentName$1('button-selection-group');
+const componentName$J = getComponentName$1('button-selection-group');
 
 const buttonSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -12315,19 +12316,19 @@ const buttonSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$J}
+      <${componentName$K}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$J}>
+      </${componentName$K}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$J);
+      this.inputElement = this.shadowRoot.querySelector(componentName$K);
 
       forwardAttrs$1(this, this.inputElement, {
         includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -12352,7 +12353,7 @@ const ButtonSelectionGroupClass = compose$1(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$I,
+    componentName: componentName$J,
   })
 );
 
@@ -12389,10 +12390,10 @@ var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   vars: vars$F
 });
 
-const componentName$H = getComponentName$1('button-multi-selection-group-internal');
+const componentName$I = getComponentName$1('button-multi-selection-group-internal');
 
 class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$H
+  componentName$I
 ) {
   #getSelectedNodes() {
     return this.items.filter((item) => item.hasAttribute('selected'));
@@ -12495,7 +12496,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
   }
 }
 
-const componentName$G = getComponentName$1('button-multi-selection-group');
+const componentName$H = getComponentName$1('button-multi-selection-group');
 
 const buttonMultiSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -12504,19 +12505,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$H}
+      <${componentName$I}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$H}>
+      </${componentName$I}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$H);
+      this.inputElement = this.shadowRoot.querySelector(componentName$I);
 
       forwardAttrs$1(this, this.inputElement, {
         includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
@@ -12541,7 +12542,7 @@ const ButtonMultiSelectionGroupClass = compose$1(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$G,
+    componentName: componentName$H,
   })
 );
 
@@ -12557,7 +12558,7 @@ var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   vars: vars$E
 });
 
-const componentName$F = getComponentName$1('modal');
+const componentName$G = getComponentName$1('modal');
 
 const observedAttrs$3 = ['opened'];
 
@@ -12706,7 +12707,7 @@ const ModalClass = compose$1(
       }
     `,
     excludeAttrsSync: ['tabindex', 'opened', 'style'],
-    componentName: componentName$F,
+    componentName: componentName$G,
   })
 );
 
@@ -12804,7 +12805,7 @@ const defaultRowDetailsRenderer = (item, itemLabelsMapping) => {
   `;
 };
 
-const componentName$E = getComponentName$1('grid');
+const componentName$F = getComponentName$1('grid');
 
 const GridMixin = (superclass) =>
   class GridMixinClass extends superclass {
@@ -13158,7 +13159,7 @@ const GridClass = compose$1(
     /*!css*/
 		`,
     excludeAttrsSync: ['columns', 'tabindex', 'style'],
-    componentName: componentName$E,
+    componentName: componentName$F,
   })
 );
 
@@ -13214,7 +13215,7 @@ var grid$1 = /*#__PURE__*/Object.freeze({
   vars: vars$C
 });
 
-const componentName$D = getComponentName$1('notification-card');
+const componentName$E = getComponentName$1('notification-card');
 
 const notificationCardMixin = (superclass) =>
   class NotificationCardMixinClass extends superclass {
@@ -13322,7 +13323,7 @@ const NotificationCardClass = compose$1(
     }
     `,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$D,
+    componentName: componentName$E,
   })
 );
 
@@ -13380,7 +13381,7 @@ var notificationCard = /*#__PURE__*/Object.freeze({
   vars: vars$B
 });
 
-const componentName$C = getComponentName$1('multi-select-combo-box');
+const componentName$D = getComponentName$1('multi-select-combo-box');
 
 const multiSelectComboBoxMixin = (superclass) =>
   class MultiSelectComboBoxMixinClass extends superclass {
@@ -14037,7 +14038,7 @@ const MultiSelectComboBoxClass = compose$1(
     // Note: we exclude `placeholder` because the vaadin component observes it and
     // tries to override it, causing us to lose the user set placeholder.
     excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder', 'style'],
-    componentName: componentName$C,
+    componentName: componentName$D,
     includeForwardProps: ['items', 'renderer', 'selectedItems'],
   })
 );
@@ -14129,10 +14130,10 @@ var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
   vars: vars$A
 });
 
-const componentName$B = getComponentName('badge');
+const componentName$C = getComponentName('badge');
 
 class RawBadge extends createBaseClass$1({
-  componentName: componentName$B,
+  componentName: componentName$C,
   baseSelector: ':host > div',
 }) {
   constructor() {
@@ -14267,9 +14268,9 @@ var badge$3 = /*#__PURE__*/Object.freeze({
   vars: vars$z
 });
 
-const componentName$A = getComponentName('avatar');
+const componentName$B = getComponentName('avatar');
 class RawAvatar extends createBaseClass$1({
-  componentName: componentName$A,
+  componentName: componentName$B,
   baseSelector: ':host > .wrapper',
 }) {
   constructor() {
@@ -14430,11 +14431,11 @@ var avatar$1 = /*#__PURE__*/Object.freeze({
   vars: vars$y
 });
 
-const componentName$z = getComponentName$1('mappings-field-internal');
+const componentName$A = getComponentName$1('mappings-field-internal');
 
-createBaseInputClass({ componentName: componentName$z, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$A, baseSelector: 'div' });
 
-const componentName$y = getComponentName$1('mappings-field');
+const componentName$z = getComponentName$1('mappings-field');
 
 const customMixin$6 = (superclass) =>
   class MappingsFieldMixinClass extends superclass {
@@ -14463,14 +14464,14 @@ const customMixin$6 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$z}
+      <${componentName$A}
         tabindex="-1"
-      ></${componentName$z}>
+      ></${componentName$A}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$z);
+      this.inputElement = this.shadowRoot.querySelector(componentName$A);
 
       forwardAttrs$1(this, this.inputElement, {
         includeAttrs: [
@@ -14606,7 +14607,7 @@ const MappingsFieldClass = compose$1(
       'error-message',
       'style',
     ],
-    componentName: componentName$y,
+    componentName: componentName$z,
   })
 );
 
@@ -14644,9 +14645,9 @@ var deleteIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgi
 
 var editIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMTAuMDAwMiAwLjk5MjE0OUMxMC4wMDAyIDEuMDE2MTUgMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNUw4LjIyNDE5IDMuMDA4MTVIMi45OTIxOUMyLjQ2NDE5IDMuMDA4MTUgMi4wMDgxOSAzLjQ0MDE1IDIuMDA4MTkgMy45OTIxNVYxMi4wMDgyQzIuMDA4MTkgMTIuNTM2MiAyLjQ0MDE5IDEyLjk5MjIgMi45OTIxOSAxMi45OTIySDUuNTM2MTlDNS44NDgxOSAxMy4wNDAyIDYuMTYwMTkgMTMuMDQwMiA2LjQ3MjE5IDEyLjk5MjJIMTEuMDA4MkMxMS41MzYyIDEyLjk5MjIgMTEuOTkyMiAxMi41NjAyIDExLjk5MjIgMTIuMDA4MlY3Ljc4NDE2TDEzLjkzNjIgNS42MjQxNUwxNC4wMDgyIDUuNjcyMTVWMTEuOTg0MkMxNC4wMDgyIDEzLjY2NDIgMTIuNjY0MiAxNS4wMDgyIDExLjAwODIgMTUuMDA4MkgzLjAxNjE5QzEuMzM2MTkgMTUuMDA4MiAtMC4wMDc4MTI1IDEzLjY2NDIgLTAuMDA3ODEyNSAxMS45ODQyVjMuOTkyMTVDLTAuMDA3ODEyNSAyLjMzNjE1IDEuMzM2MTkgMC45OTIxNDkgMy4wMTYxOSAwLjk5MjE0OUgxMC4wMDAyWk0xMS4yNzIyIDIuNjI0MTVMMTIuNjE2MiA0LjExMjE1TDcuNzIwMTkgOS42ODAxNkM3LjUwNDE5IDkuOTIwMTYgNi44MzIxOSAxMC4yMzIyIDUuNjgwMTkgMTAuNjE2MkM1LjY1NjE5IDEwLjY0MDIgNS42MDgxOSAxMC42NDAyIDUuNTYwMTkgMTAuNjE2MkM1LjQ2NDE5IDEwLjU5MjIgNS4zOTIxOSAxMC40NzIyIDUuNDQwMTkgMTAuMzc2MkM1Ljc1MjE5IDkuMjQ4MTYgNi4wNDAxOSA4LjU1MjE2IDYuMjU2MTkgOC4zMTIxNkwxMS4yNzIyIDIuNjI0MTVaTTExLjkyMDIgMS44NTYxNUwxMy4yODgyIDAuMzIwMTQ5QzEzLjY0ODIgLTAuMDg3ODUxNiAxNC4yNzIyIC0wLjExMTg1MiAxNC42ODAyIDAuMjcyMTQ5QzE1LjA4ODIgMC42MzIxNDkgMTUuMTEyMiAxLjI4MDE1IDE0Ljc1MjIgMS42ODgxNUwxMy4yNjQyIDMuMzY4MTVMMTEuOTIwMiAxLjg1NjE1WiIgZmlsbD0iY3VycmVudGNvbG9yIi8+Cjwvc3ZnPgo=";
 
-const componentName$x = getComponentName$1('user-attribute');
+const componentName$y = getComponentName$1('user-attribute');
 class RawUserAttribute extends createBaseClass({
-  componentName: componentName$x,
+  componentName: componentName$y,
   baseSelector: ':host > .root',
 }) {
   constructor() {
@@ -14943,9 +14944,9 @@ var userAttribute$1 = /*#__PURE__*/Object.freeze({
 
 var greenVIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4KPC9zdmc+Cg==";
 
-const componentName$w = getComponentName$1('user-auth-method');
+const componentName$x = getComponentName$1('user-auth-method');
 class RawUserAuthMethod extends createBaseClass({
-  componentName: componentName$w,
+  componentName: componentName$x,
   baseSelector: ':host > .root',
 }) {
   constructor() {
@@ -15218,11 +15219,11 @@ var userAuthMethod$1 = /*#__PURE__*/Object.freeze({
   vars: vars$v
 });
 
-const componentName$v = getComponentName$1('saml-group-mappings-internal');
+const componentName$w = getComponentName$1('saml-group-mappings-internal');
 
-createBaseInputClass({ componentName: componentName$v, baseSelector: '' });
+createBaseInputClass({ componentName: componentName$w, baseSelector: '' });
 
-const componentName$u = getComponentName$1('saml-group-mappings');
+const componentName$v = getComponentName$1('saml-group-mappings');
 
 const customMixin$5 = (superclass) =>
   class SamlGroupMappingsMixinClass extends superclass {
@@ -15232,14 +15233,14 @@ const customMixin$5 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$v}
+      <${componentName$w}
         tabindex="-1"
-      ></${componentName$v}>
+      ></${componentName$w}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$v);
+      this.inputElement = this.shadowRoot.querySelector(componentName$w);
 
       forwardAttrs$1(this, this.inputElement, {
         includeAttrs: [
@@ -15324,7 +15325,7 @@ const SamlGroupMappingsClass = compose$1(
       'error-message',
       'style',
     ],
-    componentName: componentName$u,
+    componentName: componentName$v,
   })
 );
 
@@ -15409,9 +15410,9 @@ const tpl = (input, inline) => {
   return inline ? input : `<pre>${input}</pre>`;
 };
 
-const componentName$t = getComponentName$1('code-snippet');
+const componentName$u = getComponentName$1('code-snippet');
 
-let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$t, baseSelector: ':host > code' }) {
+let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$u, baseSelector: ':host > code' }) {
   static get observedAttributes() {
     return ['lang', 'inline'];
   }
@@ -15785,7 +15786,7 @@ var codeSnippet = /*#__PURE__*/Object.freeze({
   vars: vars$q
 });
 
-const componentName$s = getComponentName$1('radio-button');
+const componentName$t = getComponentName$1('radio-button');
 
 const customMixin$4 = (superclass) =>
   class CustomMixin extends superclass {
@@ -15850,11 +15851,11 @@ const RadioButtonClass = compose$1(
     wrappedEleName: 'vaadin-radio-button',
     excludeAttrsSync: ['tabindex', 'data', 'style'],
     includeForwardProps: ['checked', 'name', 'disabled'],
-    componentName: componentName$s,
+    componentName: componentName$t,
   })
 );
 
-const componentName$r = getComponentName$1('radio-group');
+const componentName$s = getComponentName$1('radio-group');
 
 const RadioGroupMixin = (superclass) =>
   class RadioGroupMixinClass extends superclass {
@@ -15869,12 +15870,12 @@ const RadioGroupMixin = (superclass) =>
 
       // we are overriding vaadin children getter so it will run on our custom elements
       Object.defineProperty(this.baseElement, 'children', {
-        get: () => this.querySelectorAll(componentName$s),
+        get: () => this.querySelectorAll(componentName$t),
       });
 
       // we are overriding vaadin __filterRadioButtons so it will run on our custom elements
       this.baseElement.__filterRadioButtons = (nodes) => {
-        return nodes.filter((node) => node.localName === componentName$s);
+        return nodes.filter((node) => node.localName === componentName$t);
       };
 
       // vaadin radio group missing some input properties
@@ -16024,7 +16025,7 @@ const RadioGroupClass = compose$1(
     `,
 
     excludeAttrsSync: ['tabindex', 'size', 'data', 'direction', 'style'],
-    componentName: componentName$r,
+    componentName: componentName$s,
     includeForwardProps: ['value'],
   })
 );
@@ -16472,7 +16473,7 @@ const nextMonth = (epoch) => {
   return date;
 };
 
-const componentName$q = getComponentName$1('calendar');
+const componentName$r = getComponentName$1('calendar');
 
 const observedAttrs$2 = [
   'initial-value',
@@ -16489,7 +16490,7 @@ const observedAttrs$2 = [
 
 const calendarUiAttrs = ['calendar-label-submit', 'calendar-label-cancel'];
 
-const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$q, baseSelector: 'div' });
+const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$r, baseSelector: 'div' });
 
 class RawCalendar extends BaseInputClass$3 {
   static get observedAttributes() {
@@ -17318,12 +17319,12 @@ class DateCounter {
   }
 }
 
-const componentName$p = getComponentName$1('date-field');
+const componentName$q = getComponentName$1('date-field');
 
 // we set baseSelector to `vaadin-popover` as a temporary hack, so our portalMixin will
 // be able to process this component's overlay. The whole process needs refactoring as soon as possible.
 const BASE_SELECTOR = 'vaadin-popover';
-const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$p, baseSelector: BASE_SELECTOR });
+const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$q, baseSelector: BASE_SELECTOR });
 
 const dateFieldAttrs = [
   'format',
@@ -18275,7 +18276,7 @@ var dateField$1 = /*#__PURE__*/Object.freeze({
   vars: vars$m
 });
 
-const componentName$o = getComponentName('list-item');
+const componentName$p = getComponentName('list-item');
 
 const customMixin$3 = (superclass) =>
   class ListItemMixinClass extends superclass {
@@ -18332,12 +18333,12 @@ const ListItemClass = compose(
   componentNameValidationMixin$1,
   customMixin$3,
   activeableMixin,
-)(createBaseClass$1({ componentName: componentName$o, baseSelector: 'slot' }));
+)(createBaseClass$1({ componentName: componentName$p, baseSelector: 'slot' }));
 
-const componentName$n = getComponentName('list');
+const componentName$o = getComponentName('list');
 
 class RawList extends createBaseClass$1({
-  componentName: componentName$n,
+  componentName: componentName$o,
   baseSelector: '.wrapper',
 }) {
   static get observedAttributes() {
@@ -18508,7 +18509,7 @@ const ListClass = compose(
   componentNameValidationMixin$1,
 )(RawList);
 
-const componentName$m = getComponentName('apps-list');
+const componentName$n = getComponentName('apps-list');
 
 const itemRenderer$4 = ({ name, icon, url }, _, ref) => `
   <a ${url ? `href="${url}" title="${url}"` : ''} ${ref.openInSameWindow ? '' : 'target="_blank"'}>
@@ -18632,7 +18633,7 @@ const AppsListClass = compose(
     slots: ['empty-state'],
     wrappedEleName: 'descope-list',
     excludeAttrsSync: ['tabindex', 'class', 'empty', 'style'],
-    componentName: componentName$m,
+    componentName: componentName$n,
     style: () => `
       :host {
         width: 100%;
@@ -18737,7 +18738,7 @@ const compVars$3 = ListClass.cssVarList;
 
 const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars$1(
   { shadowColor: '#00000020' },
-  componentName$n,
+  componentName$o,
 );
 
 const { shadowColor: shadowColor$2 } = helperRefs$2;
@@ -18951,7 +18952,7 @@ const createDynamicDataMixin =
       }
     };
 
-const componentName$l = getComponentName$1('scopes-list');
+const componentName$m = getComponentName$1('scopes-list');
 const variants = ['checkbox', 'switch'];
 
 const itemRenderer$3 = ({ id, desc, required = false }, _, ref) => {
@@ -18970,7 +18971,7 @@ const itemRenderer$3 = ({ id, desc, required = false }, _, ref) => {
 `;
 };
 
-class RawScopesList extends createBaseClass({ componentName: componentName$l, baseSelector: 'div' }) {
+class RawScopesList extends createBaseClass({ componentName: componentName$m, baseSelector: 'div' }) {
   constructor() {
     super();
 
@@ -19097,9 +19098,9 @@ var scopesList$1 = /*#__PURE__*/Object.freeze({
 
 var arrowsImg = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOSAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuMTQ0OTIgMTUuNjQ1TDcuNDk5OTIgMTRMMi44MzMyNSAxOC42NjY3TDcuNDk5OTIgMjMuMzMzM0w5LjE0NDkyIDIxLjY4ODNMNy4zMDE1OSAxOS44MzMzSDI0Ljk5OTlWMTcuNUg3LjMwMTU5TDkuMTQ0OTIgMTUuNjQ1WiIgZmlsbD0iIzYzNkM3NCIvPgo8cGF0aCBkPSJNMTkuODU1IDEyLjM1NTNMMjEuNSAxNC4wMDAzTDI2LjE2NjcgOS4zMzM2NkwyMS41IDQuNjY2OTlMMTkuODU1IDYuMzExOTlMMjEuNjk4MyA4LjE2Njk5SDRWMTAuNTAwM0gyMS42OTgzTDE5Ljg1NSAxMi4zNTUzWiIgZmlsbD0iIzYzNkM3NCIvPgo8L3N2Zz4K";
 
-const componentName$k = getComponentName$1('third-party-app-logo');
+const componentName$l = getComponentName$1('third-party-app-logo');
 class RawThirdPartyAppLogoClass extends createBaseClass({
-  componentName: componentName$k,
+  componentName: componentName$l,
   baseSelector: '.wrapper',
 }) {
   constructor() {
@@ -19232,7 +19233,7 @@ var thirdPartyAppLogo$1 = /*#__PURE__*/Object.freeze({
   vars: vars$h
 });
 
-const componentName$j = getComponentName$1('security-questions-setup');
+const componentName$k = getComponentName$1('security-questions-setup');
 
 const attrsToSync$1 = [
   'full-width',
@@ -19251,7 +19252,7 @@ const attrsToSync$1 = [
 ];
 
 const attrsToReRender$1 = ['count', 'questions'];
-class RawSecurityQuestionsSetup extends createBaseClass({ componentName: componentName$j, baseSelector: 'div' }) {
+class RawSecurityQuestionsSetup extends createBaseClass({ componentName: componentName$k, baseSelector: 'div' }) {
   constructor() {
     super();
 
@@ -19361,7 +19362,7 @@ class RawSecurityQuestionsSetup extends createBaseClass({ componentName: compone
       return JSON.parse(this.getAttribute('questions')) || [];
     } catch (e) {
       // eslint-disable-next-line no-console
-      console.error(componentName$j, 'Error parsing questions attribute', e);
+      console.error(componentName$k, 'Error parsing questions attribute', e);
       return [];
     }
   }
@@ -19484,7 +19485,7 @@ var securityQuestionsSetup$1 = /*#__PURE__*/Object.freeze({
   vars: vars$g
 });
 
-const componentName$i = getComponentName$1('security-questions-verify');
+const componentName$j = getComponentName$1('security-questions-verify');
 
 const textFieldsAttrs = [
   'full-width',
@@ -19508,7 +19509,7 @@ const attrMappings = {
 const attrsToSync = [...textFieldsAttrs, ...textsAttrs];
 
 const attrsToReRender = ['questions'];
-class RawSecurityQuestionsVerify extends createBaseClass({ componentName: componentName$i, baseSelector: 'div' }) {
+class RawSecurityQuestionsVerify extends createBaseClass({ componentName: componentName$j, baseSelector: 'div' }) {
   constructor() {
     super();
 
@@ -19582,7 +19583,7 @@ class RawSecurityQuestionsVerify extends createBaseClass({ componentName: compon
       return JSON.parse(this.getAttribute('questions')) || [];
     } catch (e) {
       // eslint-disable-next-line no-console
-      console.error(componentName$i, 'Error parsing questions attribute', e);
+      console.error(componentName$j, 'Error parsing questions attribute', e);
       return [];
     }
   }
@@ -19741,7 +19742,7 @@ const isNumericValue = (val) => NUMERIC_RE.test(val.replaceAll('+', '').replaceA
 
 const sanitizeCountryCodePrefix = (val) => val.replace(/\+\d+-/, '');
 
-const componentName$h = getComponentName$1('hybrid-field');
+const componentName$i = getComponentName$1('hybrid-field');
 
 const attrs = {
   shared: [
@@ -19805,12 +19806,12 @@ const EMAIL_FIELD = 'descope-email-field';
 const PHONE_FIELD = 'descope-phone-field';
 const PHONE_INPUT_BOX_FIELD = 'descope-phone-input-box-field';
 
-const BaseClass$6 = createBaseClass({
-  componentName: componentName$h,
+const BaseClass$7 = createBaseClass({
+  componentName: componentName$i,
   baseSelector: 'div',
 });
 
-class RawHybridField extends BaseClass$6 {
+class RawHybridField extends BaseClass$7 {
   #isReportedValidity = false;
 
   #selectionStart;
@@ -20143,9 +20144,9 @@ var hybridField$1 = /*#__PURE__*/Object.freeze({
   vars: vars$e
 });
 
-const componentName$g = getComponentName$1('alert');
+const componentName$h = getComponentName$1('alert');
 
-class RawAlert extends createBaseClass({ componentName: componentName$g, baseSelector: ':host > div' }) {
+class RawAlert extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -20353,11 +20354,11 @@ var alert$1 = /*#__PURE__*/Object.freeze({
   vars: vars$d
 });
 
-const componentName$f = getComponentName$1('hcaptcha');
+const componentName$g = getComponentName$1('hcaptcha');
 
 const observedAttributes$2 = ['enabled', 'site-key'];
 
-const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$f, baseSelector: ':host > div' });
+const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$g, baseSelector: ':host > div' });
 class RawHcaptcha extends BaseInputClass$1 {
   static get observedAttributes() {
     return observedAttributes$2.concat(BaseInputClass$1.observedAttributes || []);
@@ -20501,14 +20502,14 @@ var hcaptcha$1 = /*#__PURE__*/Object.freeze({
   vars: vars$c
 });
 
-const componentName$e = getComponentName('autocomplete-field-internal');
+const componentName$f = getComponentName('autocomplete-field-internal');
 
 createBaseInputClass$1({
-  componentName: componentName$e,
+  componentName: componentName$f,
   baseSelector: '',
 });
 
-const componentName$d = getComponentName('autocomplete-field');
+const componentName$e = getComponentName('autocomplete-field');
 
 const customMixin$1 = (superclass) =>
   class AutocompleteFieldMixinClass extends superclass {
@@ -20529,15 +20530,15 @@ const customMixin$1 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$e}
+      <${componentName$f}
         tabindex="-1"
-      ></${componentName$e}>
+      ></${componentName$f}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
       this.inputElement = this.shadowRoot.querySelector(
-        componentName$e,
+        componentName$f,
       );
 
       forwardAttrs(this, this.inputElement, {
@@ -20656,7 +20657,7 @@ const AutocompleteFieldClass = compose(
     }
   `,
     excludeAttrsSync: ['tabindex', 'error-message', 'label', 'style'],
-    componentName: componentName$d,
+    componentName: componentName$e,
   }),
 );
 
@@ -20910,7 +20911,7 @@ class RadarConnector extends createBaseConnectorClass() {
   }
 }
 
-const componentName$c = getComponentName('address-field-internal');
+const componentName$d = getComponentName('address-field-internal');
 
 const GOOGLE_MAPS_CONNECTOR_TEMPLATE = 'google-maps-places';
 const RADAR_CONNECTOR_TEMPLATE = 'radar';
@@ -20921,7 +20922,7 @@ const CONNECTOR_CLASSES = {
 };
 
 const BaseInputClass = createBaseInputClass$1({
-  componentName: componentName$c,
+  componentName: componentName$d,
   baseSelector: '',
 });
 const initConnectorAttrs = ['public-api-key'];
@@ -21028,7 +21029,7 @@ compose(
   connectorMixin({ connectorClasses: CONNECTOR_CLASSES }),
 )(RawAddressFieldInternal);
 
-const componentName$b = getComponentName('address-field');
+const componentName$c = getComponentName('address-field');
 
 const customMixin = (superclass) =>
   class AddressFieldMixinClass extends superclass {
@@ -21057,15 +21058,15 @@ const customMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$c}
+      <${componentName$d}
         tabindex="-1"
-      ></${componentName$c}>
+      ></${componentName$d}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
       this.inputElement = this.shadowRoot.querySelector(
-        componentName$c,
+        componentName$d,
       );
 
       forwardAttrs(this, this.inputElement, {
@@ -21143,7 +21144,7 @@ const AddressFieldClass = compose(
     width: 100%;
   }
 
-  ${componentName$c} {
+  ${componentName$d} {
     display: inline-block;
     box-sizing: border-box;
     user-select: none;
@@ -21151,12 +21152,12 @@ const AddressFieldClass = compose(
     max-width: 100%;
   }
 
-  ${componentName$c} ::slotted {
+  ${componentName$d} ::slotted {
     padding: 0;
   }
 `,
     excludeAttrsSync: ['tabindex', 'error-message', 'label', 'style'],
-    componentName: componentName$b,
+    componentName: componentName$c,
   }),
 );
 
@@ -21196,24 +21197,24 @@ const formatTime = (ms = 0) => {
   return timeParts.join(':');
 };
 
-const componentName$a = getComponentName('timer');
+const componentName$b = getComponentName('timer');
 
 const observedAttributes$1 = ['seconds', 'hide-icon', 'paused'];
 
-const BaseClass$5 = createBaseClass$1({
-  componentName: componentName$a,
+const BaseClass$6 = createBaseClass$1({
+  componentName: componentName$b,
   baseSelector: ':host > .wrapper',
 });
 
 const DEFAULT_INTERVAL = 1000;
 
-class RawTimer extends BaseClass$5 {
+class RawTimer extends BaseClass$6 {
   #timeRemains = 0;
 
   #intervalId;
 
   static get observedAttributes() {
-    return observedAttributes$1.concat(BaseClass$5.observedAttributes || []);
+    return observedAttributes$1.concat(BaseClass$6.observedAttributes || []);
   }
 
   constructor() {
@@ -21422,7 +21423,7 @@ var timer$1 = /*#__PURE__*/Object.freeze({
   vars: vars$9
 });
 
-const componentName$9 = getComponentName('timer-button');
+const componentName$a = getComponentName('timer-button');
 
 const buttonAttrs = [
   'button-variant',
@@ -21452,12 +21453,12 @@ const mapTimerAttrs = {
   'timer-paused': 'paused',
 };
 
-const BaseClass$4 = createBaseClass$1({
-  componentName: componentName$9,
+const BaseClass$5 = createBaseClass$1({
+  componentName: componentName$a,
   baseSelector: ':host > div',
 });
 
-class RawTimerButton extends BaseClass$4 {
+class RawTimerButton extends BaseClass$5 {
   constructor() {
     super();
 
@@ -21583,9 +21584,9 @@ var timerButton$1 = /*#__PURE__*/Object.freeze({
   vars: vars$8
 });
 
-const componentName$8 = getComponentName('password-strength');
+const componentName$9 = getComponentName('password-strength');
 class RawPasswordStrength extends createBaseClass$1({
-  componentName: componentName$8,
+  componentName: componentName$9,
   baseSelector: ':host > .wrapper',
 }) {
   static get observedAttributes() {
@@ -21788,10 +21789,10 @@ var passwordStrength$1 = /*#__PURE__*/Object.freeze({
 
 var chevronIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iYmxhY2siIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xNy4yMTkzIDkuMjcyODNDMTcuNjU4NCA4Ljg3OTEyIDE4LjMzMzQgOC45MTU4NyAxOC43MjcyIDkuMzU0OTJDMTkuMTIwOSA5Ljc5Mzk3IDE5LjA4NDEgMTAuNDY5MSAxOC42NDUxIDEwLjg2MjhDMTguNjQ1MSAxMC44NjI4IDEzLjA0NTcgMTYuMDAyMiAxMi42NCAxNi4zNjZDMTIuMjM0MyAxNi43Mjk4IDExLjc2MDggMTYuNzI5OCAxMS4zNTUyIDE2LjM2Nkw1LjM1NDkyIDEwLjg2MjhDNC45MTU4NyAxMC40NjkxIDQuODc5MTIgOS43OTM5NyA1LjI3MjgzIDkuMzU0OTJDNS42NjY1NSA4LjkxNTg3IDYuMzQxNjQgOC44NzkxMiA2Ljc4MDY5IDkuMjcyODNMMTIgMTQuMTM2OEwxNy4yMTkzIDkuMjcyODNaIi8+Cjwvc3ZnPgo=";
 
-const componentName$7 = getComponentName('collapsible-container');
+const componentName$8 = getComponentName('collapsible-container');
 
 class RawCollapsibleContainer extends createBaseClass$1({
-  componentName: componentName$7,
+  componentName: componentName$8,
   baseSelector: 'slot',
 }) {
   static get observedAttributes() {
@@ -22026,7 +22027,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars$1(
   {
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$7
+  componentName$8
 );
 
 const { shadowColor: shadowColor$1 } = helperRefs$1;
@@ -22137,7 +22138,7 @@ var collapsibleContainer$1 = /*#__PURE__*/Object.freeze({
   vars: vars$6
 });
 
-const componentName$6 = getComponentName('recovery-codes');
+const componentName$7 = getComponentName('recovery-codes');
 
 const itemRenderer$2 = ({ value }, _, ref) => {
   return `
@@ -22148,7 +22149,7 @@ const itemRenderer$2 = ({ value }, _, ref) => {
 };
 
 class RawRecoveryCodes extends createBaseClass$1({
-  componentName: componentName$6,
+  componentName: componentName$7,
   baseSelector: ':host > div',
 }) {
   static get observedAttributes() {
@@ -22316,7 +22317,7 @@ var recoveryCodes$1 = /*#__PURE__*/Object.freeze({
   vars: vars$5
 });
 
-const componentName$5 = getComponentName('outbound-apps');
+const componentName$6 = getComponentName('outbound-apps');
 
 const itemRenderer$1 = (
   { name, description, logo, appId, isConnected },
@@ -22361,12 +22362,12 @@ const itemRenderer$1 = (
 `;
 };
 
-const BaseClass$3 = createBaseClass$1({
-  componentName: componentName$5,
+const BaseClass$4 = createBaseClass$1({
+  componentName: componentName$6,
   baseSelector: 'descope-list',
 });
 
-class RawOutboundAppsClass extends BaseClass$3 {
+class RawOutboundAppsClass extends BaseClass$4 {
   constructor() {
     super();
 
@@ -22578,10 +22579,10 @@ var outboundApps$1 = /*#__PURE__*/Object.freeze({
   vars: vars$4
 });
 
-const componentName$4 = getComponentName('outbound-app-button');
+const componentName$5 = getComponentName('outbound-app-button');
 
 class RawOutboundAppButton extends createBaseClass$1({
-  componentName: componentName$4,
+  componentName: componentName$5,
   baseSelector: ':host > descope-button',
 }) {
   static get observedAttributes() {
@@ -22763,7 +22764,7 @@ const getDeviceIcon = (deviceType) => {
   };
 };
 
-const componentName$3 = getComponentName('trusted-devices');
+const componentName$4 = getComponentName('trusted-devices');
 
 const itemRenderer = (
   { id, name, lastLoginDate, deviceType, isCurrent },
@@ -22851,12 +22852,12 @@ const itemRenderer = (
   return template;
 };
 
-const BaseClass$2 = createBaseClass$1({
-  componentName: componentName$3,
+const BaseClass$3 = createBaseClass$1({
+  componentName: componentName$4,
   baseSelector: ListClass.componentName,
 });
 
-class RawTrustedDevicesClass extends BaseClass$2 {
+class RawTrustedDevicesClass extends BaseClass$3 {
   constructor() {
     super();
 
@@ -23186,7 +23187,7 @@ var trustedDevices = /*#__PURE__*/Object.freeze({
   vars: vars$2
 });
 
-const componentName$2 = getComponentName('tooltip');
+const componentName$3 = getComponentName('tooltip');
 
 const tooltipAttrs = [
   'text',
@@ -23196,14 +23197,14 @@ const tooltipAttrs = [
   'opened',
 ];
 
-const BaseClass$1 = createBaseClass$1({
-  componentName: componentName$2,
+const BaseClass$2 = createBaseClass$1({
+  componentName: componentName$3,
   baseSelector: 'vaadin-tooltip',
 });
 
-class RawTooltip extends BaseClass$1 {
+class RawTooltip extends BaseClass$2 {
   static get observedAttributes() {
-    return tooltipAttrs.concat(BaseClass$1.observedAttributes || []);
+    return tooltipAttrs.concat(BaseClass$2.observedAttributes || []);
   }
 
   get isOpened() {
@@ -23436,7 +23437,7 @@ const [helperTheme, helperRefs, helperVars] = createHelperVars$1(
   {
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$2
+  componentName$3
 );
 
 const { shadowColor } = helperRefs;
@@ -23620,17 +23621,17 @@ const darkTheme = merge({}, defaultTheme, {
   },
 });
 
-const componentName$1 = getComponentName$1('recaptcha');
+const componentName$2 = getComponentName$1('recaptcha');
 
 const observedAttributes = ['enabled', 'site-key', 'action', 'enterprise'];
 
-const BaseClass = createBaseClass({
-  componentName: componentName$1,
+const BaseClass$1 = createBaseClass({
+  componentName: componentName$2,
   baseSelector: ':host > div',
 });
-class RawRecaptcha extends BaseClass {
+class RawRecaptcha extends BaseClass$1 {
   static get observedAttributes() {
-    return observedAttributes.concat(BaseClass.observedAttributes || []);
+    return observedAttributes.concat(BaseClass$1.observedAttributes || []);
   }
 
   attributeChangedCallback(attrName, oldValue, newValue) {
@@ -23850,7 +23851,7 @@ class RawRecaptcha extends BaseClass {
 
 const RecaptchaClass = compose$1(draggableMixin)(RawRecaptcha);
 
-const componentName = getComponentName$1('notification');
+const componentName$1 = getComponentName$1('notification');
 
 const NotificationMixin = (superclass) =>
   class NotificationMixinClass extends superclass {
@@ -23945,10 +23946,112 @@ const NotificationClass = compose$1(
   createProxy({
     wrappedEleName: 'vaadin-notification',
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName,
+    componentName: componentName$1,
   })
 );
 
+// NOTICE: This component registers with a DIFFERENT name than its file name
+const componentName = getComponentName('ponyhot');
+
+const HP_PREFIX = 'dhp-';
+
+const BaseClass = createBaseClass$1({
+  componentName,
+  baseSelector: '',
+});
+
+class RawHoneypot extends BaseClass {
+  get type() {
+    return this.getAttribute('type');
+  }
+
+  get value() {
+    return this.input?.value || '';
+  }
+
+  init() {
+    this.input = this.querySelector('input');
+
+    if (!this.input) return;
+
+    this.#setupTrapListeners();
+    this.#setupValueInterceptor();
+    this.#hideComponent();
+  }
+
+  #setupTrapListeners() {
+    const events = [
+      'input',
+      'change',
+      'click',
+      'keydown',
+      'keyup',
+      'mouseover',
+      'mousedown',
+    ];
+
+    const fillHoneypot = (e) => {
+      this.input.value = `${HP_PREFIX}${e.type}`;
+
+      // Stop listening to all events after first trigger
+      events.forEach((event) => {
+        this.input.removeEventListener(event, fillHoneypot);
+      });
+    };
+
+    events.forEach((event) => {
+      this.input.addEventListener(event, fillHoneypot);
+    });
+  }
+
+  // Intercept direct value assignments to catch bots that bypass events
+  #setupValueInterceptor() {
+    const originalDescriptor = Object.getOwnPropertyDescriptor(
+      HTMLInputElement.prototype,
+      'value',
+    );
+
+    Object.defineProperty(this.input, 'value', {
+      get() {
+        return originalDescriptor.get.call(this);
+      },
+      set(newValue) {
+        const currentValue = originalDescriptor.get.call(this);
+
+        // Only trap if the value is being set by external code (not our own trap)
+        if (
+          newValue &&
+          !newValue.startsWith(HP_PREFIX) &&
+          newValue !== currentValue
+        ) {
+          originalDescriptor.set.call(this, `${HP_PREFIX}direct-set`);
+        } else {
+          originalDescriptor.set.call(this, newValue);
+        }
+      },
+      configurable: true,
+    });
+  }
+
+  #hideComponent() {
+    const styles = {
+      position: 'absolute',
+      opacity: '0.01',
+      width: '1px',
+      height: '1px',
+      pointerEvents: 'none',
+      zIndex: '-1',
+      left: '-999999px',
+    };
+
+    Object.entries(styles).forEach(([key, value]) => {
+      this.style[key] = value;
+    });
+  }
+}
+
+const HoneypotClass = compose(componentNameValidationMixin$1)(RawHoneypot);
+
 const options = {
   translations: zxcvbnEnPackage__namespace.translations,
   graphs: zxcvbnCommonPackage__namespace.adjacencyGraphs,
@@ -23987,6 +24090,7 @@ exports.EmailFieldClass = EmailFieldClass;
 exports.EnrichedTextClass = EnrichedTextClass;
 exports.GridClass = GridClass;
 exports.HcaptchaClass = HcaptchaClass;
+exports.HoneypotClass = HoneypotClass;
 exports.HybridFieldClass = HybridFieldClass;
 exports.IconClass = IconClass;
 exports.ImageClass = ImageClass;