@descope/web-components-ui 3.1.12 → 3.2.0

package/dist/index.esm.js

@@ -2116,9 +2116,9 @@ const decodeHTML = (html) => {
 /* eslint-disable no-param-reassign */
 
 
-const componentName$1o = getComponentName$1('enriched-text');
+const componentName$1p = getComponentName$1('enriched-text');
 
-class EnrichedText extends createBaseClass$1({ componentName: componentName$1o, baseSelector: ':host > div' }) {
+class EnrichedText extends createBaseClass$1({ componentName: componentName$1p, baseSelector: ':host > div' }) {
   #origLinkRenderer;
 
   #origEmRenderer;
@@ -2395,7 +2395,6 @@ const toTitle = (str) =>
 const DESCOPE_PREFIX = 'descope';
 const CSS_SELECTOR_SPECIFIER_MULTIPLY = 5;
 const BASE_THEME_SECTION = 'host';
-const PORTAL_THEME_PREFIX = '@';
 
 const observeAttributes = (ele, callback, { excludeAttrs = [], includeAttrs = [] }) => {
   // sync all attrs on init
@@ -2790,6 +2789,13 @@ function splitAmpersands(str) {
   return [match[1] || '', match[2] || ''];
 }
 
+const CONTAINER_QUERY_PREFIX = '@container';
+const isContainerQuery = (key) => key.startsWith(CONTAINER_QUERY_PREFIX);
+
+const BREAKPOINTS_KEY = '$breakpoints';
+const BREAKPOINTS_REF_PREFIX = '$breakpoints.';
+const isBreakpointRef = (key) => key.startsWith(BREAKPOINTS_REF_PREFIX);
+
 // st attributes are also using selector multiplication
 // so we need to limit the multiplication
 const MAX_SELECTOR_MULTIPLY = 3;
@@ -2797,6 +2803,10 @@ const MAX_SELECTOR_MULTIPLY = 3;
 const componentsThemeToStyleObj = (componentsTheme) =>
   transformTheme(componentsTheme, [], (path, val) => {
     const [component, ...restPath] = path;
+
+    // skip $breakpoints definitions — they are metadata, not CSS output
+    if (restPath[0] === BREAKPOINTS_KEY) return {};
+
     const property = restPath.pop();
     const componentName = getComponentName(component);
 
@@ -2805,15 +2815,27 @@ const componentsThemeToStyleObj = (componentsTheme) =>
       console.warn(componentName, `theme value: "${val}" is mapped to an invalid property`);
     }
 
-    // we need a support for portal components theme (e.g. overlay)
-    // this allows us to generate those themes under different sections
-    // if the theme has root level attribute that starts with #
-    // we are generating a new theme
-    let themeName = BASE_THEME_SECTION;
+    const themeName = BASE_THEME_SECTION;
 
-    if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
-      themeName = restPath.shift();
+    // extract @container queries from restPath at any position,
+    // resolving breakpoints.X references via the component's $breakpoints map
+    const componentBreakpoints = componentsTheme[component]?.[BREAKPOINTS_KEY] || {};
+    const resolveKey = (key) =>
+      isBreakpointRef(key)
+        ? `${CONTAINER_QUERY_PREFIX} ${componentBreakpoints[key.slice(BREAKPOINTS_REF_PREFIX.length)]}`
+        : key;
+    const breakpointRefs = restPath.filter(isBreakpointRef);
+    const missingRef = breakpointRefs.find(
+      (key) => !componentBreakpoints[key.slice(BREAKPOINTS_REF_PREFIX.length)]
+    );
+    if (missingRef) {
+      // eslint-disable-next-line no-console
+      console.warn(componentName, `theme references undefined breakpoint "${missingRef}"`);
+      return {};
     }
+    const containerQueries = breakpointRefs.map(resolveKey);
+    // remove breakpoint refs from restPath so the remaining parts are processed as attribute selectors
+    restPath.splice(0, restPath.length, ...restPath.filter((s) => !isBreakpointRef(s)));
 
     // do not start with underscore -> key:value, must have 2 no underscore attrs in a row
     // starts with underscore -> attribute selector
@@ -2852,25 +2874,29 @@ const componentsThemeToStyleObj = (componentsTheme) =>
 
     const selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
 
+    // wrap the selector rule in container queries from innermost to outermost
+    // e.g. ['@container (max-width: 80px)'] + { ':host': { prop: val } }
+    //   => { '@container (max-width: 80px)': { ':host': { prop: val } } }
+    const leaf = containerQueries.reduceRight((acc, query) => ({ [query]: acc }), {
+      [selector]: { [property]: getCssVarValue(val) },
+    });
+
     return {
       [componentName]: {
-        [themeName]: {
-          [selector]: {
-            [property]: getCssVarValue(val),
-          },
-        },
+        [themeName]: leaf,
       },
     };
   });
 
 const componentsThemeToStyle = (componentsTheme) =>
-  Object.entries(componentsTheme).reduce(
-    (acc, [selector, vars]) =>
-      `${acc}${selector} { \n${Object.entries(vars)
-        .map(([key, val]) => `${key}: ${val}`)
-        .join(';\n')} \n}\n\n`,
-    ''
-  );
+  Object.entries(componentsTheme).reduce((acc, [key, value]) => {
+    if (isContainerQuery(key)) {
+      return `${acc}${key} {\n${componentsThemeToStyle(value)}}\n\n`;
+    }
+    return `${acc}${key} { \n${Object.entries(value)
+      .map(([prop, val]) => `${prop}: ${val}`)
+      .join(';\n')} \n}\n\n`;
+  }, '');
 
 const createComponentsTheme = (componentsTheme) => {
   const styleObj = componentsThemeToStyleObj(componentsTheme);
@@ -4392,11 +4418,11 @@ const createBaseInputClass = (...args) =>
     inputEventsDispatchingMixin
   )(createBaseClass(...args));
 
-const componentName$1n = getComponentName('boolean-field-internal');
+const componentName$1o = getComponentName('boolean-field-internal');
 
 const forwardAttributes$1 = ['disabled', 'invalid', 'readonly'];
 
-const BaseInputClass$e = createBaseInputClass({ componentName: componentName$1n, baseSelector: 'div' });
+const BaseInputClass$e = createBaseInputClass({ componentName: componentName$1o, baseSelector: 'div' });
 
 class BooleanInputInternal extends BaseInputClass$e {
   static get observedAttributes() {
@@ -4495,14 +4521,14 @@ const booleanFieldMixin = (superclass) =>
 
       const template = document.createElement('template');
       template.innerHTML = `
-				<${componentName$1n}
+				<${componentName$1o}
 					tabindex="-1"
 					slot="input"
-				></${componentName$1n}>
+				></${componentName$1o}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$1n);
+      this.inputElement = this.shadowRoot.querySelector(componentName$1o);
       this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
       forwardAttrs(this, this.inputElement, {
@@ -4580,7 +4606,7 @@ descope-enriched-text {
 
 `;
 
-const componentName$1m = getComponentName('checkbox');
+const componentName$1n = getComponentName('checkbox');
 
 const {
   host: host$x,
@@ -4716,14 +4742,14 @@ const CheckboxClass = compose(
       }
     `,
     excludeAttrsSync: ['label', 'tabindex', 'style'],
-    componentName: componentName$1m,
+    componentName: componentName$1n,
   })
 );
 
-const componentName$1l = getComponentName$1('text');
+const componentName$1m = getComponentName$1('text');
 
 class RawText extends createBaseClass$1({
-  componentName: componentName$1l,
+  componentName: componentName$1m,
   baseSelector: ':host > slot',
 }) {
   constructor() {
@@ -4789,9 +4815,9 @@ const TextClass = compose$1(
   componentNameValidationMixin$1,
 )(RawText);
 
-const componentName$1k = getComponentName$1('link');
+const componentName$1l = getComponentName$1('link');
 
-class RawLink extends createBaseClass$1({ componentName: componentName$1k, baseSelector: ':host a' }) {
+class RawLink extends createBaseClass$1({ componentName: componentName$1l, baseSelector: ':host a' }) {
   constructor() {
     super();
 
@@ -4868,17 +4894,17 @@ const LinkClass = compose$1(
   componentNameValidationMixin$1
 )(RawLink);
 
-customElements.define(componentName$1l, TextClass);
+customElements.define(componentName$1m, TextClass);
 
-customElements.define(componentName$1k, LinkClass);
+customElements.define(componentName$1l, LinkClass);
 
-customElements.define(componentName$1o, EnrichedTextClass);
+customElements.define(componentName$1p, EnrichedTextClass);
 
-customElements.define(componentName$1n, BooleanInputInternal);
+customElements.define(componentName$1o, BooleanInputInternal);
 
-customElements.define(componentName$1m, CheckboxClass);
+customElements.define(componentName$1n, CheckboxClass);
 
-const componentName$1j = getComponentName('switch-toggle');
+const componentName$1k = getComponentName('switch-toggle');
 
 const {
   host: host$u,
@@ -5022,17 +5048,17 @@ const SwitchToggleClass = compose(
 			}
 		`,
     excludeAttrsSync: ['label', 'tabindex', 'style'],
-    componentName: componentName$1j,
+    componentName: componentName$1k,
   })
 );
 
-customElements.define(componentName$1j, SwitchToggleClass);
+customElements.define(componentName$1k, SwitchToggleClass);
 
-const componentName$1i = getComponentName('loader-linear');
+const componentName$1j = getComponentName('loader-linear');
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$1i, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$1j, baseSelector: ':host > div' }) {
   static get componentName() {
-    return componentName$1i;
+    return componentName$1j;
   }
 
   constructor() {
@@ -5097,11 +5123,11 @@ const LoaderLinearClass = compose(
   componentNameValidationMixin
 )(RawLoaderLinear);
 
-customElements.define(componentName$1i, LoaderLinearClass);
+customElements.define(componentName$1j, LoaderLinearClass);
 
-const componentName$1h = getComponentName('loader-radial');
+const componentName$1i = getComponentName('loader-radial');
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$1h, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$1i, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -5149,11 +5175,11 @@ const LoaderRadialClass = compose(
   componentNameValidationMixin
 )(RawLoaderRadial);
 
-customElements.define(componentName$1h, LoaderRadialClass);
+customElements.define(componentName$1i, LoaderRadialClass);
 
-const componentName$1g = getComponentName('container');
+const componentName$1h = getComponentName('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$1g, baseSelector: 'slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$1h, baseSelector: 'slot' }) {
   constructor() {
     super();
 
@@ -5216,9 +5242,9 @@ const ContainerClass = compose(
   componentNameValidationMixin
 )(RawContainer);
 
-customElements.define(componentName$1g, ContainerClass);
+customElements.define(componentName$1h, ContainerClass);
 
-const componentName$1f = getComponentName$1('combo-box');
+const componentName$1g = getComponentName$1('combo-box');
 
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
@@ -5902,12 +5928,12 @@ const ComboBoxClass = compose$1(
     // 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$1f,
+    componentName: componentName$1g,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   }),
 );
 
-customElements.define(componentName$1f, ComboBoxClass);
+customElements.define(componentName$1g, ComboBoxClass);
 
 const getFileExtension = (path) => {
   const match = path.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);
@@ -5970,12 +5996,12 @@ const createImage = async (src, altText) => {
 
 /* eslint-disable no-use-before-define */
 
-const componentName$1e = getComponentName$1('image');
+const componentName$1f = getComponentName$1('image');
 
 const srcAttrs = ['src', 'src-dark'];
 
 class RawImage extends createBaseClass$1({
-  componentName: componentName$1e,
+  componentName: componentName$1f,
   baseSelector: 'slot',
 }) {
   static get observedAttributes() {
@@ -6103,7 +6129,7 @@ const ImageClass = compose$1(
   componentNameValidationMixin$1,
 )(RawImage);
 
-const componentName$1d = getComponentName$1('icon');
+const componentName$1e = getComponentName$1('icon');
 
 const IconClass = compose$1(
   createStyleMixin$1({
@@ -6124,7 +6150,7 @@ const IconClass = compose$1(
       }
       `,
     excludeAttrsSync: ['tabindex', 'class', 'style'],
-    componentName: componentName$1d,
+    componentName: componentName$1e,
   }),
 );
 
@@ -6139,7 +6165,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$1c = getComponentName$1('button');
+const componentName$1d = getComponentName$1('button');
 
 const resetStyles = `
 	:host {
@@ -6255,7 +6281,7 @@ const ButtonClass = compose$1(
 			}
 		`,
     excludeAttrsSync: ['tabindex', 'class', 'style'],
-    componentName: componentName$1c,
+    componentName: componentName$1d,
   })
 );
 
@@ -6292,7 +6318,7 @@ loadingIndicatorStyles = `
 	}
 `;
 
-customElements.define(componentName$1c, ButtonClass);
+customElements.define(componentName$1d, ButtonClass);
 
 const SUPPORTED_FORMATS = ['MM/DD/YYYY', 'DD/MM/YYYY', 'YYYY/MM/DD'];
 
@@ -6648,7 +6674,7 @@ const nextMonth = (epoch) => {
   return date;
 };
 
-const componentName$1b = getComponentName('calendar');
+const componentName$1c = getComponentName('calendar');
 
 const observedAttrs$6 = [
   'initial-value',
@@ -6665,7 +6691,7 @@ const observedAttrs$6 = [
 
 const calendarUiAttrs = ['calendar-label-submit', 'calendar-label-cancel'];
 
-const BaseInputClass$d = createBaseInputClass({ componentName: componentName$1b, baseSelector: 'div' });
+const BaseInputClass$d = createBaseInputClass({ componentName: componentName$1c, baseSelector: 'div' });
 
 class RawCalendar extends BaseInputClass$d {
   static get observedAttributes() {
@@ -7286,7 +7312,7 @@ const CalendarClass = compose(
   componentNameValidationMixin
 )(RawCalendar);
 
-customElements.define(componentName$1b, CalendarClass);
+customElements.define(componentName$1c, CalendarClass);
 
 const {
   host: host$q,
@@ -7447,7 +7473,7 @@ var textFieldMappings = {
   ],
 };
 
-const componentName$1a = getComponentName('text-field');
+const componentName$1b = getComponentName('text-field');
 
 const observedAttrs$5 = ['type', 'label-type', 'copy-to-clipboard'];
 
@@ -7569,11 +7595,11 @@ const TextFieldClass = compose(
       }
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$1a,
+    componentName: componentName$1b,
   })
 );
 
-customElements.define(componentName$1a, TextFieldClass);
+customElements.define(componentName$1b, TextFieldClass);
 
 // DateCounterClass allows us to add several counters to the input, and use them seperately.
 // For examele, we have a DayCounter, MonthCounter and YearCounter, which can each separately navigate
@@ -7693,12 +7719,12 @@ class DateCounter {
   }
 }
 
-const componentName$19 = getComponentName('date-field');
+const componentName$1a = getComponentName('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$c = createBaseInputClass({ componentName: componentName$19, baseSelector: BASE_SELECTOR });
+const BaseInputClass$c = createBaseInputClass({ componentName: componentName$1a, baseSelector: BASE_SELECTOR });
 
 const dateFieldAttrs = [
   'format',
@@ -8611,10 +8637,10 @@ const DateFieldClass = compose(
   componentNameValidationMixin
 )(RawDateFieldClass);
 
-customElements.define(componentName$19, DateFieldClass);
+customElements.define(componentName$1a, DateFieldClass);
 
-const componentName$18 = getComponentName('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$18, baseSelector: ':host > div' }) {
+const componentName$19 = getComponentName('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$19, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -8717,9 +8743,9 @@ const DividerClass = compose(
   componentNameValidationMixin
 )(RawDivider);
 
-customElements.define(componentName$18, DividerClass);
+customElements.define(componentName$19, DividerClass);
 
-const componentName$17 = getComponentName('email-field');
+const componentName$18 = getComponentName('email-field');
 
 const defaultPattern = "^[\\w\\.\\%\\+\\-']+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$";
 const defaultAutocomplete = 'username';
@@ -8788,11 +8814,11 @@ const EmailFieldClass = compose(
       }
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$17,
+    componentName: componentName$18,
   })
 );
 
-customElements.define(componentName$17, EmailFieldClass);
+customElements.define(componentName$18, EmailFieldClass);
 
 const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
   let style;
@@ -8848,37 +8874,37 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   return CssVarImageClass;
 };
 
-const componentName$16 = getComponentName('logo');
+const componentName$17 = getComponentName('logo');
 
 const LogoClass = createCssVarImageClass({
-  componentName: componentName$16,
+  componentName: componentName$17,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$16, LogoClass);
+customElements.define(componentName$17, LogoClass);
 
-const componentName$15 = getComponentName('totp-image');
+const componentName$16 = getComponentName('totp-image');
 
 const TotpImageClass = createCssVarImageClass({
-  componentName: componentName$15,
+  componentName: componentName$16,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$15, TotpImageClass);
+customElements.define(componentName$16, TotpImageClass);
 
-const componentName$14 = getComponentName('notp-image');
+const componentName$15 = getComponentName('notp-image');
 
 const NotpImageClass = createCssVarImageClass({
-  componentName: componentName$14,
+  componentName: componentName$15,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$14, NotpImageClass);
+customElements.define(componentName$15, NotpImageClass);
 
-const componentName$13 = getComponentName('number-field');
+const componentName$14 = getComponentName('number-field');
 
 const NumberFieldClass = compose(
   createStyleMixin({
@@ -8912,11 +8938,11 @@ const NumberFieldClass = compose(
       }
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$13,
+    componentName: componentName$14,
   })
 );
 
-customElements.define(componentName$13, NumberFieldClass);
+customElements.define(componentName$14, NumberFieldClass);
 
 const INPUT_MASK_TEXT_PROP = '--descope-input-mask-content';
 const INPUT_MASK_DISPLAY_PROP = '--descope-input-mask-display';
@@ -8939,7 +8965,7 @@ const toggleMaskVisibility = (input, value) => {
   }
 };
 
-const componentName$12 = getComponentName('passcode-internal');
+const componentName$13 = getComponentName('passcode-internal');
 
 const observedAttributes$6 = ['digits', 'loading'];
 
@@ -8952,7 +8978,7 @@ const forwardAttributes = [
   'aria-labelledby',
 ];
 
-const BaseInputClass$b = createBaseInputClass({ componentName: componentName$12, baseSelector: 'div' });
+const BaseInputClass$b = createBaseInputClass({ componentName: componentName$13, baseSelector: 'div' });
 
 class PasscodeInternal extends BaseInputClass$b {
   static get observedAttributes() {
@@ -9165,7 +9191,7 @@ class PasscodeInternal extends BaseInputClass$b {
   }
 }
 
-const componentName$11 = getComponentName('passcode');
+const componentName$12 = getComponentName('passcode');
 
 const observedAttributes$5 = ['digits'];
 
@@ -9210,18 +9236,18 @@ const customMixin$d = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$12}
+      <${componentName$13}
         bordered="true"
         name="code"
         tabindex="-1"
         slot="input"
         role="textbox"
-      ><slot></slot></${componentName$12}>
+      ><slot></slot></${componentName$13}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$12);
+      this.inputElement = this.shadowRoot.querySelector(componentName$13);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: ['digits', 'size', 'loading', 'disabled'],
@@ -9384,13 +9410,13 @@ const PasscodeClass = compose(
 			${resetInputCursor('vaadin-text-field')}
     	`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$11,
+    componentName: componentName$12,
   })
 );
 
-customElements.define(componentName$12, PasscodeInternal);
+customElements.define(componentName$13, PasscodeInternal);
 
-customElements.define(componentName$11, PasscodeClass);
+customElements.define(componentName$12, PasscodeClass);
 
 const passwordDraggableMixin = (superclass) =>
   class PasswordDraggableMixinClass extends superclass {
@@ -9431,7 +9457,7 @@ const passwordDraggableMixin = (superclass) =>
     }
   };
 
-const componentName$10 = getComponentName('password');
+const componentName$11 = getComponentName('password');
 
 const customMixin$c = (superclass) =>
   class PasswordFieldMixinClass extends superclass {
@@ -9715,13 +9741,13 @@ const PasswordClass = compose(
       }
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$10,
+    componentName: componentName$11,
   })
 );
 
-customElements.define(componentName$10, PasswordClass);
+customElements.define(componentName$11, PasswordClass);
 
-const componentName$$ = getComponentName('text-area');
+const componentName$10 = getComponentName('text-area');
 
 const {
   host: host$l,
@@ -9804,11 +9830,11 @@ const TextAreaClass = compose(
 			${resetInputCursor('vaadin-text-area')}
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$$,
+    componentName: componentName$10,
   })
 );
 
-customElements.define(componentName$$, TextAreaClass);
+customElements.define(componentName$10, TextAreaClass);
 
 var CountryCodes = [
   // United States should be the first option
@@ -11045,7 +11071,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
 	</div>
 `;
 
-const componentName$_ = getComponentName('phone-field-internal');
+const componentName$$ = getComponentName('phone-field-internal');
 
 const commonAttrs$2 = ['disabled', 'size', 'bordered', 'readonly'];
 const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
@@ -11059,7 +11085,7 @@ const mapAttrs$1 = {
 
 const inputRelatedAttrs$1 = [].concat(commonAttrs$2, countryAttrs, phoneAttrs, labelTypeAttrs$1);
 
-const BaseInputClass$a = createBaseInputClass({ componentName: componentName$_, baseSelector: 'div' });
+const BaseInputClass$a = createBaseInputClass({ componentName: componentName$$, baseSelector: 'div' });
 
 let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$a {
   static get observedAttributes() {
@@ -11413,12 +11439,12 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$a {
   }
 };
 
-customElements.define(componentName$_, PhoneFieldInternal$1);
+customElements.define(componentName$$, PhoneFieldInternal$1);
 
 const textVars$2 = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
 
-const componentName$Z = getComponentName('phone-field');
+const componentName$_ = getComponentName('phone-field');
 
 const customMixin$b = (superclass) =>
   class PhoneFieldMixinClass extends superclass {
@@ -11432,15 +11458,15 @@ const customMixin$b = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$_}
+				<${componentName$$}
 					tabindex="-1"
 					slot="input"
-				></${componentName$_}>
+				></${componentName$$}>
       		`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$_);
+      this.inputElement = this.shadowRoot.querySelector(componentName$$);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -11713,11 +11739,11 @@ const PhoneFieldClass = compose(
       ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$Z,
+    componentName: componentName$_,
   })
 );
 
-customElements.define(componentName$Z, PhoneFieldClass);
+customElements.define(componentName$_, PhoneFieldClass);
 
 const getCountryByCodeId = (countryCode) =>
   CountryCodes.find((c) => c.code === countryCode)?.dialCode;
@@ -11728,7 +11754,7 @@ const matchingParenthesis = (val) => {
   return openParenMatches?.length === closeParenMatches?.length;
 };
 
-const componentName$Y = getComponentName('phone-field-internal-input-box');
+const componentName$Z = getComponentName('phone-field-internal-input-box');
 
 const observedAttributes$4 = [
   'disabled',
@@ -11744,7 +11770,7 @@ const mapAttrs = {
   'phone-input-placeholder': 'placeholder',
 };
 
-const BaseInputClass$9 = createBaseInputClass({ componentName: componentName$Y, baseSelector: 'div' });
+const BaseInputClass$9 = createBaseInputClass({ componentName: componentName$Z, baseSelector: 'div' });
 
 class PhoneFieldInternal extends BaseInputClass$9 {
   static get observedAttributes() {
@@ -11992,11 +12018,11 @@ class PhoneFieldInternal extends BaseInputClass$9 {
   }
 }
 
-customElements.define(componentName$Y, PhoneFieldInternal);
+customElements.define(componentName$Z, PhoneFieldInternal);
 
 const textVars$1 = TextFieldClass.cssVarList;
 
-const componentName$X = getComponentName('phone-input-box-field');
+const componentName$Y = getComponentName('phone-input-box-field');
 
 const customMixin$a = (superclass) =>
   class PhoneFieldInputBoxMixinClass extends superclass {
@@ -12010,15 +12036,15 @@ const customMixin$a = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$Y}
+				<${componentName$Z}
 					tabindex="-1"
 					slot="input"
-				></${componentName$Y}>
+				></${componentName$Z}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$Y);
+      this.inputElement = this.shadowRoot.querySelector(componentName$Z);
 
       syncAttrs$1(this, this.inputElement, { includeAttrs: ['has-value'] });
 
@@ -12225,18 +12251,18 @@ const PhoneFieldInputBoxClass = compose(
     ${inputFloatingLabelStyle()}
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$X,
+    componentName: componentName$Y,
   })
 );
 
-customElements.define(componentName$X, PhoneFieldInputBoxClass);
+customElements.define(componentName$Y, PhoneFieldInputBoxClass);
 
-const componentName$W = getComponentName('new-password-internal');
+const componentName$X = getComponentName('new-password-internal');
 
 const interpolateString = (template, values) =>
   template.replace(/{{(\w+)+}}/g, (match, key) => values?.[key] || match);
 
-const componentName$V = getComponentName('policy-validation');
+const componentName$W = getComponentName('policy-validation');
 
 const overrideAttrs = [
   'data-password-policy-value-minlength',
@@ -12246,7 +12272,7 @@ const overrideAttrs = [
 const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
 const policyAttrs = ['label', 'value', ...dataAttrs];
 
-class RawPolicyValidation extends createBaseClass({ componentName: componentName$V, baseSelector: ':host > div' }) {
+class RawPolicyValidation extends createBaseClass({ componentName: componentName$W, baseSelector: ':host > div' }) {
   #availablePolicies;
 
   #activePolicies = [];
@@ -12518,7 +12544,7 @@ const PolicyValidationClass = compose(
   componentNameValidationMixin
 )(RawPolicyValidation);
 
-const componentName$U = getComponentName('new-password');
+const componentName$V = getComponentName('new-password');
 
 const policyPreviewVars = PolicyValidationClass.cssVarList;
 
@@ -12532,18 +12558,18 @@ const customMixin$9 = (superclass) =>
       const externalInputAttr = this.getAttribute('external-input');
 
       template.innerHTML = `
-			<${componentName$W}
+			<${componentName$X}
 				name="new-password"
 				tabindex="-1"
 				slot="input"
         external-input="${externalInputAttr}"
 			>
-      </${componentName$W}>
+      </${componentName$X}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$W);
+      this.inputElement = this.shadowRoot.querySelector(componentName$X);
 
       if (this.getAttribute('external-input') === 'true') {
         this.initExternalInput();
@@ -12728,11 +12754,11 @@ const NewPasswordClass = compose(
     }
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$U,
+    componentName: componentName$V,
   })
 );
 
-customElements.define(componentName$V, PolicyValidationClass);
+customElements.define(componentName$W, PolicyValidationClass);
 
 const passwordAttrPrefixRegex = /^password-/;
 const confirmAttrPrefixRegex = /^confirm-/;
@@ -12772,7 +12798,7 @@ const inputRelatedAttrs = [].concat(
   policyPanelAttrs
 );
 
-const BaseInputClass$8 = createBaseInputClass({ componentName: componentName$W, baseSelector: 'div' });
+const BaseInputClass$8 = createBaseInputClass({ componentName: componentName$X, baseSelector: 'div' });
 
 class NewPasswordInternal extends BaseInputClass$8 {
   static get observedAttributes() {
@@ -13015,16 +13041,16 @@ class NewPasswordInternal extends BaseInputClass$8 {
   }
 }
 
-customElements.define(componentName$W, NewPasswordInternal);
+customElements.define(componentName$X, NewPasswordInternal);
 
-customElements.define(componentName$U, NewPasswordClass);
+customElements.define(componentName$V, NewPasswordClass);
 
-const componentName$T = getComponentName('recaptcha');
+const componentName$U = getComponentName('recaptcha');
 
 const observedAttributes$3 = ['enabled', 'site-key', 'action', 'enterprise'];
 
 const BaseClass$7 = createBaseClass({
-  componentName: componentName$T,
+  componentName: componentName$U,
   baseSelector: ':host > div',
 });
 class RawRecaptcha extends BaseClass$7 {
@@ -13249,7 +13275,7 @@ class RawRecaptcha extends BaseClass$7 {
 
 const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
 
-customElements.define(componentName$T, RecaptchaClass);
+customElements.define(componentName$U, RecaptchaClass);
 
 const getFileBase64 = (fileObj) =>
   new Promise((resolve) => {
@@ -13260,7 +13286,7 @@ const getFileBase64 = (fileObj) =>
 
 const getFilename = (fileObj) => fileObj.name.replace(/^.*\\/, '');
 
-const componentName$S = getComponentName('upload-file');
+const componentName$T = getComponentName('upload-file');
 
 const observedAttributes$2 = [
   'title',
@@ -13275,7 +13301,7 @@ const observedAttributes$2 = [
   'icon',
 ];
 
-const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$S, baseSelector: ':host > div' });
+const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$T, baseSelector: ':host > div' });
 
 class RawUploadFile extends BaseInputClass$7 {
   static get observedAttributes() {
@@ -13494,7 +13520,7 @@ const UploadFileClass = compose(
   componentNameValidationMixin
 )(RawUploadFile);
 
-customElements.define(componentName$S, UploadFileClass);
+customElements.define(componentName$T, UploadFileClass);
 
 const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   class BaseButtonSelectionGroupInternalClass extends createBaseInputClass({
@@ -13582,10 +13608,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   return BaseButtonSelectionGroupInternalClass;
 };
 
-const componentName$R = getComponentName('button-selection-group-internal');
+const componentName$S = getComponentName('button-selection-group-internal');
 
 class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$R
+  componentName$S
 ) {
   getSelectedNode() {
     return this.items.find((item) => item.hasAttribute('selected'));
@@ -13828,7 +13854,7 @@ const buttonSelectionGroupStyles = `
 			${resetInputCursor('vaadin-text-field')}
     `;
 
-const componentName$Q = getComponentName('button-selection-group');
+const componentName$R = getComponentName('button-selection-group');
 
 const buttonSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -13837,19 +13863,19 @@ const buttonSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$R}
+      <${componentName$S}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$R}>
+      </${componentName$S}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$R);
+      this.inputElement = this.shadowRoot.querySelector(componentName$S);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -13874,16 +13900,16 @@ const ButtonSelectionGroupClass = compose(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$Q,
+    componentName: componentName$R,
   })
 );
 
-customElements.define(componentName$R, ButtonSelectionGroupInternalClass);
+customElements.define(componentName$S, ButtonSelectionGroupInternalClass);
 
-const componentName$P = getComponentName('button-selection-group-item');
+const componentName$Q = getComponentName('button-selection-group-item');
 
 class RawSelectItem extends createBaseClass({
-  componentName: componentName$P,
+  componentName: componentName$Q,
   baseSelector: ':host > descope-button',
 }) {
   get size() {
@@ -13994,14 +14020,14 @@ const ButtonSelectionGroupItemClass = compose(
   componentNameValidationMixin
 )(RawSelectItem);
 
-customElements.define(componentName$P, ButtonSelectionGroupItemClass);
+customElements.define(componentName$Q, ButtonSelectionGroupItemClass);
 
-customElements.define(componentName$Q, ButtonSelectionGroupClass);
+customElements.define(componentName$R, ButtonSelectionGroupClass);
 
-const componentName$O = getComponentName('button-multi-selection-group-internal');
+const componentName$P = getComponentName('button-multi-selection-group-internal');
 
 class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$O
+  componentName$P
 ) {
   #getSelectedNodes() {
     return this.items.filter((item) => item.hasAttribute('selected'));
@@ -14103,7 +14129,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
   }
 }
 
-const componentName$N = getComponentName('button-multi-selection-group');
+const componentName$O = getComponentName('button-multi-selection-group');
 
 const buttonMultiSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -14112,19 +14138,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$O}
+      <${componentName$P}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${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);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
@@ -14149,13 +14175,13 @@ const ButtonMultiSelectionGroupClass = compose(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$N,
+    componentName: componentName$O,
   })
 );
 
-customElements.define(componentName$O, ButtonMultiSelectionGroupInternalClass);
+customElements.define(componentName$P, ButtonMultiSelectionGroupInternalClass);
 
-customElements.define(componentName$N, ButtonMultiSelectionGroupClass);
+customElements.define(componentName$O, ButtonMultiSelectionGroupClass);
 
 class GridTextColumnClass extends GridSortColumn {
   get sortable() {
@@ -14181,9 +14207,9 @@ class GridTextColumnClass extends GridSortColumn {
   }
 }
 
-const componentName$M = getComponentName('grid-text-column');
+const componentName$N = getComponentName('grid-text-column');
 
-customElements.define(componentName$M, GridTextColumnClass);
+customElements.define(componentName$N, GridTextColumnClass);
 
 class GridCustomColumnClass extends GridTextColumnClass {
   _defaultRenderer(cell, _col, model) {
@@ -14214,9 +14240,9 @@ class GridCustomColumnClass extends GridTextColumnClass {
   }
 }
 
-const componentName$L = getComponentName('grid-custom-column');
+const componentName$M = getComponentName('grid-custom-column');
 
-customElements.define(componentName$L, GridCustomColumnClass);
+customElements.define(componentName$M, GridCustomColumnClass);
 
 const createCheckboxEle = () => {
   const checkbox = document.createElement('descope-checkbox');
@@ -14272,9 +14298,9 @@ class GridSelectionColumnClass extends GridSelectionColumn {
   }
 }
 
-const componentName$K = getComponentName('grid-selection-column');
+const componentName$L = getComponentName('grid-selection-column');
 
-customElements.define(componentName$K, GridSelectionColumnClass);
+customElements.define(componentName$L, GridSelectionColumnClass);
 
 class GridItemDetailsColumnClass extends GridSortColumn {
   get sortable() {
@@ -14310,13 +14336,13 @@ class GridItemDetailsColumnClass extends GridSortColumn {
   }
 }
 
-const componentName$J = getComponentName('grid-item-details-column');
+const componentName$K = getComponentName('grid-item-details-column');
 
-customElements.define(componentName$J, GridItemDetailsColumnClass);
+customElements.define(componentName$K, GridItemDetailsColumnClass);
 
-customElements.define(componentName$1e, ImageClass);
+customElements.define(componentName$1f, ImageClass);
 
-customElements.define(componentName$1d, IconClass);
+customElements.define(componentName$1e, IconClass);
 
 const decode = (input) => {
   const txt = document.createElement('textarea');
@@ -14330,9 +14356,9 @@ var copyIconSrc = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5
 
 var checkIconSrc = "data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iY2hlY2staWNvbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cG9seWxpbmUgcG9pbnRzPSIyMCA2IDkgMTcgNCAxMiI+PC9wb2x5bGluZT4KPC9zdmc+Cg==";
 
-const componentName$I = getComponentName('code-snippet');
+const componentName$J = getComponentName('code-snippet');
 
-let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$I, baseSelector: ':host > .wrapper' }) {
+let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$J, baseSelector: ':host > .wrapper' }) {
   static get observedAttributes() {
     return ['lang', 'inline', 'copy-button'];
   }
@@ -14668,7 +14694,7 @@ const CodeSnippetClass = compose(
   componentNameValidationMixin
 )(CodeSnippet$1);
 
-customElements.define(componentName$I, CodeSnippetClass);
+customElements.define(componentName$J, CodeSnippetClass);
 
 const isValidDataType = (data) => {
   const isValid = Array.isArray(data);
@@ -14756,7 +14782,7 @@ const defaultRowDetailsRenderer = (item, itemLabelsMapping) => `
 </div>
   `;
 
-const componentName$H = getComponentName('grid');
+const componentName$I = getComponentName('grid');
 
 const GridMixin = (superclass) =>
   class GridMixinClass extends superclass {
@@ -15125,13 +15151,13 @@ const GridClass = compose(
     /*!css*/
 		`,
     excludeAttrsSync: ['columns', 'tabindex', 'style'],
-    componentName: componentName$H,
+    componentName: componentName$I,
   })
 );
 
-customElements.define(componentName$H, GridClass);
+customElements.define(componentName$I, GridClass);
 
-const componentName$G = getComponentName('multi-select-combo-box');
+const componentName$H = getComponentName('multi-select-combo-box');
 
 const multiSelectComboBoxMixin = (superclass) =>
   class MultiSelectComboBoxMixinClass extends superclass {
@@ -15782,14 +15808,14 @@ const MultiSelectComboBoxClass = compose(
     // 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$G,
+    componentName: componentName$H,
     includeForwardProps: ['items', 'renderer', 'selectedItems'],
   })
 );
 
-customElements.define(componentName$G, MultiSelectComboBoxClass);
+customElements.define(componentName$H, MultiSelectComboBoxClass);
 
-const componentName$F = getComponentName('modal');
+const componentName$G = getComponentName('modal');
 
 const observedAttrs$3 = ['opened'];
 
@@ -15938,11 +15964,11 @@ const ModalClass = compose(
       }
     `,
     excludeAttrsSync: ['tabindex', 'opened', 'style'],
-    componentName: componentName$F,
+    componentName: componentName$G,
   })
 );
 
-customElements.define(componentName$F, ModalClass);
+customElements.define(componentName$G, ModalClass);
 
 const vaadinContainerClass = window.customElements.get('vaadin-notification-container');
 
@@ -15953,7 +15979,7 @@ if (!vaadinContainerClass) {
 class NotificationContainerClass extends vaadinContainerClass {}
 customElements.define(getComponentName('notification-container'), NotificationContainerClass);
 
-const componentName$E = getComponentName('notification-card');
+const componentName$F = getComponentName('notification-card');
 
 const notificationCardMixin = (superclass) =>
   class NotificationCardMixinClass extends superclass {
@@ -16061,13 +16087,13 @@ const NotificationCardClass = compose(
     }
     `,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$E,
+    componentName: componentName$F,
   })
 );
 
-customElements.define(componentName$E, NotificationCardClass);
+customElements.define(componentName$F, NotificationCardClass);
 
-const componentName$D = getComponentName('notification');
+const componentName$E = getComponentName('notification');
 
 const NotificationMixin = (superclass) =>
   class NotificationMixinClass extends superclass {
@@ -16160,15 +16186,15 @@ const NotificationClass = compose(
   createProxy({
     wrappedEleName: 'vaadin-notification',
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$D,
+    componentName: componentName$E,
   })
 );
 
-customElements.define(componentName$D, NotificationClass);
+customElements.define(componentName$E, NotificationClass);
 
-const componentName$C = getComponentName('mappings-field-internal');
+const componentName$D = getComponentName('mappings-field-internal');
 
-const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$C, baseSelector: 'div' });
+const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$D, baseSelector: 'div' });
 
 class MappingsFieldInternal extends BaseInputClass$6 {
   #errorItem;
@@ -16414,7 +16440,7 @@ class MappingsFieldInternal extends BaseInputClass$6 {
   }
 }
 
-const componentName$B = getComponentName('mappings-field');
+const componentName$C = getComponentName('mappings-field');
 
 const customMixin$7 = (superclass) =>
   class MappingsFieldMixinClass extends superclass {
@@ -16443,14 +16469,14 @@ const customMixin$7 = (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);
+      this.inputElement = this.shadowRoot.querySelector(componentName$D);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
@@ -16586,13 +16612,13 @@ const MappingsFieldClass = compose(
       'error-message',
       'style',
     ],
-    componentName: componentName$B,
+    componentName: componentName$C,
   })
 );
 
-customElements.define(componentName$C, MappingsFieldInternal);
+customElements.define(componentName$D, MappingsFieldInternal);
 
-const componentName$A = getComponentName('mapping-item');
+const componentName$B = getComponentName('mapping-item');
 
 const inputAttrs = [
   'size',
@@ -16605,7 +16631,7 @@ const inputAttrs = [
   'st-error-message-icon-padding',
 ];
 
-const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$A, baseSelector: 'div' });
+const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$B, baseSelector: 'div' });
 
 class MappingItem extends BaseInputClass$5 {
   static get observedAttributes() {
@@ -16760,14 +16786,14 @@ class MappingItem extends BaseInputClass$5 {
   }
 }
 
-customElements.define(componentName$A, MappingItem);
+customElements.define(componentName$B, MappingItem);
 
-customElements.define(componentName$B, MappingsFieldClass);
+customElements.define(componentName$C, MappingsFieldClass);
 
-const componentName$z = getComponentName$1('badge');
+const componentName$A = getComponentName$1('badge');
 
 class RawBadge extends createBaseClass$1({
-  componentName: componentName$z,
+  componentName: componentName$A,
   baseSelector: ':host > div',
 }) {
   constructor() {
@@ -16785,6 +16811,7 @@ class RawBadge extends createBaseClass$1({
         display: inline-flex;
       }
       :host > div {
+        position: relative;
         width: 100%;
         text-overflow: ellipsis;
         overflow: hidden;
@@ -16800,6 +16827,7 @@ const BadgeClass = compose$1(
   createStyleMixin$1({
     mappings: {
       hostWidth: [{ selector: () => ':host', property: 'width' }],
+      hostHeight: [{ selector: () => ':host', property: 'height' }],
       hostDirection: { property: 'direction' },
 
       fontFamily: {},
@@ -16824,6 +16852,8 @@ const BadgeClass = compose$1(
 
       textColor: { property: 'color' },
       textAlign: {},
+      boxShadow: {},
+      textIndent: {},
     },
   }),
   draggableMixin$1,
@@ -16834,9 +16864,9 @@ var deleteIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgi
 
 var editIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMTAuMDAwMiAwLjk5MjE0OUMxMC4wMDAyIDEuMDE2MTUgMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNUw4LjIyNDE5IDMuMDA4MTVIMi45OTIxOUMyLjQ2NDE5IDMuMDA4MTUgMi4wMDgxOSAzLjQ0MDE1IDIuMDA4MTkgMy45OTIxNVYxMi4wMDgyQzIuMDA4MTkgMTIuNTM2MiAyLjQ0MDE5IDEyLjk5MjIgMi45OTIxOSAxMi45OTIySDUuNTM2MTlDNS44NDgxOSAxMy4wNDAyIDYuMTYwMTkgMTMuMDQwMiA2LjQ3MjE5IDEyLjk5MjJIMTEuMDA4MkMxMS41MzYyIDEyLjk5MjIgMTEuOTkyMiAxMi41NjAyIDExLjk5MjIgMTIuMDA4MlY3Ljc4NDE2TDEzLjkzNjIgNS42MjQxNUwxNC4wMDgyIDUuNjcyMTVWMTEuOTg0MkMxNC4wMDgyIDEzLjY2NDIgMTIuNjY0MiAxNS4wMDgyIDExLjAwODIgMTUuMDA4MkgzLjAxNjE5QzEuMzM2MTkgMTUuMDA4MiAtMC4wMDc4MTI1IDEzLjY2NDIgLTAuMDA3ODEyNSAxMS45ODQyVjMuOTkyMTVDLTAuMDA3ODEyNSAyLjMzNjE1IDEuMzM2MTkgMC45OTIxNDkgMy4wMTYxOSAwLjk5MjE0OUgxMC4wMDAyWk0xMS4yNzIyIDIuNjI0MTVMMTIuNjE2MiA0LjExMjE1TDcuNzIwMTkgOS42ODAxNkM3LjUwNDE5IDkuOTIwMTYgNi44MzIxOSAxMC4yMzIyIDUuNjgwMTkgMTAuNjE2MkM1LjY1NjE5IDEwLjY0MDIgNS42MDgxOSAxMC42NDAyIDUuNTYwMTkgMTAuNjE2MkM1LjQ2NDE5IDEwLjU5MjIgNS4zOTIxOSAxMC40NzIyIDUuNDQwMTkgMTAuMzc2MkM1Ljc1MjE5IDkuMjQ4MTYgNi4wNDAxOSA4LjU1MjE2IDYuMjU2MTkgOC4zMTIxNkwxMS4yNzIyIDIuNjI0MTVaTTExLjkyMDIgMS44NTYxNUwxMy4yODgyIDAuMzIwMTQ5QzEzLjY0ODIgLTAuMDg3ODUxNiAxNC4yNzIyIC0wLjExMTg1MiAxNC42ODAyIDAuMjcyMTQ5QzE1LjA4ODIgMC42MzIxNDkgMTUuMTEyMiAxLjI4MDE1IDE0Ljc1MjIgMS42ODgxNUwxMy4yNjQyIDMuMzY4MTVMMTEuOTIwMiAxLjg1NjE1WiIgZmlsbD0iY3VycmVudGNvbG9yIi8+Cjwvc3ZnPgo=";
 
-const componentName$y = getComponentName('user-attribute');
+const componentName$z = getComponentName('user-attribute');
 class RawUserAttribute extends createBaseClass({
-  componentName: componentName$y,
+  componentName: componentName$z,
   baseSelector: ':host > .root',
 }) {
   constructor() {
@@ -17107,15 +17137,15 @@ const UserAttributeClass = compose(
   componentNameValidationMixin
 )(RawUserAttribute);
 
-customElements.define(componentName$z, BadgeClass);
+customElements.define(componentName$A, BadgeClass);
 
-customElements.define(componentName$y, UserAttributeClass);
+customElements.define(componentName$z, UserAttributeClass);
 
 var greenVIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4KPC9zdmc+Cg==";
 
-const componentName$x = getComponentName('user-auth-method');
+const componentName$y = getComponentName('user-auth-method');
 class RawUserAuthMethod extends createBaseClass({
-  componentName: componentName$x,
+  componentName: componentName$y,
   baseSelector: ':host > .root',
 }) {
   constructor() {
@@ -17366,11 +17396,11 @@ const UserAuthMethodClass = compose(
   componentNameValidationMixin
 )(RawUserAuthMethod);
 
-customElements.define(componentName$x, UserAuthMethodClass);
+customElements.define(componentName$y, UserAuthMethodClass);
 
-const componentName$w = getComponentName('saml-group-mappings-internal');
+const componentName$x = getComponentName('saml-group-mappings-internal');
 
-const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$w, baseSelector: '' });
+const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$x, baseSelector: '' });
 
 class SamlGroupMappingsInternal extends BaseInputClass$4 {
   static get observedAttributes() {
@@ -17496,7 +17526,7 @@ class SamlGroupMappingsInternal extends BaseInputClass$4 {
   }
 }
 
-const componentName$v = getComponentName('saml-group-mappings');
+const componentName$w = getComponentName('saml-group-mappings');
 
 const customMixin$6 = (superclass) =>
   class SamlGroupMappingsMixinClass extends superclass {
@@ -17506,14 +17536,14 @@ const customMixin$6 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$w}
+      <${componentName$x}
         tabindex="-1"
-      ></${componentName$w}>
+      ></${componentName$x}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$w);
+      this.inputElement = this.shadowRoot.querySelector(componentName$x);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
@@ -17598,15 +17628,15 @@ const SamlGroupMappingsClass = compose(
       'error-message',
       'style',
     ],
-    componentName: componentName$v,
+    componentName: componentName$w,
   })
 );
 
-customElements.define(componentName$w, SamlGroupMappingsInternal);
+customElements.define(componentName$x, SamlGroupMappingsInternal);
 
-customElements.define(componentName$v, SamlGroupMappingsClass);
+customElements.define(componentName$w, SamlGroupMappingsClass);
 
-const componentName$u = getComponentName('radio-button');
+const componentName$v = getComponentName('radio-button');
 
 const customMixin$5 = (superclass) =>
   class CustomMixin extends superclass {
@@ -17671,11 +17701,11 @@ const RadioButtonClass = compose(
     wrappedEleName: 'vaadin-radio-button',
     excludeAttrsSync: ['tabindex', 'data', 'style'],
     includeForwardProps: ['checked', 'name', 'disabled'],
-    componentName: componentName$u,
+    componentName: componentName$v,
   })
 );
 
-const componentName$t = getComponentName('radio-group');
+const componentName$u = getComponentName('radio-group');
 
 const RadioGroupMixin = (superclass) =>
   class RadioGroupMixinClass extends superclass {
@@ -17689,12 +17719,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$u),
+        get: () => this.querySelectorAll(componentName$v),
       });
 
       // we are overriding vaadin __filterRadioButtons so it will run on our custom elements
       this.baseElement.__filterRadioButtons = (nodes) =>
-        nodes.filter((node) => node.localName === componentName$u);
+        nodes.filter((node) => node.localName === componentName$v);
 
       // vaadin radio group missing some input properties
       this.baseElement.setCustomValidity = () => {};
@@ -17840,13 +17870,13 @@ const RadioGroupClass = compose(
     `,
 
     excludeAttrsSync: ['tabindex', 'size', 'data', 'direction', 'style'],
-    componentName: componentName$t,
+    componentName: componentName$u,
     includeForwardProps: ['value'],
   })
 );
 
-customElements.define(componentName$t, RadioGroupClass);
-customElements.define(componentName$u, RadioButtonClass);
+customElements.define(componentName$u, RadioGroupClass);
+customElements.define(componentName$v, RadioButtonClass);
 
 const defaultValidateSchema = () => true;
 const defaultItemRenderer = (item) => `<pre>${JSON.stringify(item, null, 4)}</pre>`;
@@ -17946,7 +17976,7 @@ const createDynamicDataMixin =
       }
     };
 
-const componentName$s = getComponentName('scopes-list');
+const componentName$t = getComponentName('scopes-list');
 const variants = ['checkbox', 'switch'];
 
 const itemRenderer$4 = ({ id, desc, required = false }, _, ref) => {
@@ -17965,7 +17995,7 @@ const itemRenderer$4 = ({ id, desc, required = false }, _, ref) => {
 `;
 };
 
-class RawScopesList extends createBaseClass({ componentName: componentName$s, baseSelector: 'div' }) {
+class RawScopesList extends createBaseClass({ componentName: componentName$t, baseSelector: 'div' }) {
   constructor() {
     super();
 
@@ -18070,7 +18100,7 @@ const ScopesListClass = compose(
   componentNameValidationMixin
 )(RawScopesList);
 
-const componentName$r = getComponentName$1('list-item');
+const componentName$s = getComponentName$1('list-item');
 
 const customMixin$4 = (superclass) =>
   class ListItemMixinClass extends superclass {
@@ -18127,14 +18157,14 @@ const ListItemClass = compose$1(
   componentNameValidationMixin$1,
   customMixin$4,
   activeableMixin,
-)(createBaseClass$1({ componentName: componentName$r, baseSelector: 'slot' }));
+)(createBaseClass$1({ componentName: componentName$s, baseSelector: 'slot' }));
 
-customElements.define(componentName$r, ListItemClass);
+customElements.define(componentName$s, ListItemClass);
 
-const componentName$q = getComponentName$1('list');
+const componentName$r = getComponentName$1('list');
 
 class RawList extends createBaseClass$1({
-  componentName: componentName$q,
+  componentName: componentName$r,
   baseSelector: '.wrapper',
 }) {
   static get observedAttributes() {
@@ -18305,15 +18335,15 @@ const ListClass = compose$1(
   componentNameValidationMixin$1,
 )(RawList);
 
-customElements.define(componentName$q, ListClass);
+customElements.define(componentName$r, ListClass);
 
-customElements.define(componentName$s, ScopesListClass);
+customElements.define(componentName$t, ScopesListClass);
 
 var arrowsImg = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOSAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuMTQ0OTIgMTUuNjQ1TDcuNDk5OTIgMTRMMi44MzMyNSAxOC42NjY3TDcuNDk5OTIgMjMuMzMzM0w5LjE0NDkyIDIxLjY4ODNMNy4zMDE1OSAxOS44MzMzSDI0Ljk5OTlWMTcuNUg3LjMwMTU5TDkuMTQ0OTIgMTUuNjQ1WiIgZmlsbD0iIzYzNkM3NCIvPgo8cGF0aCBkPSJNMTkuODU1IDEyLjM1NTNMMjEuNSAxNC4wMDAzTDI2LjE2NjcgOS4zMzM2NkwyMS41IDQuNjY2OTlMMTkuODU1IDYuMzExOTlMMjEuNjk4MyA4LjE2Njk5SDRWMTAuNTAwM0gyMS42OTgzTDE5Ljg1NSAxMi4zNTUzWiIgZmlsbD0iIzYzNkM3NCIvPgo8L3N2Zz4K";
 
-const componentName$p = getComponentName('third-party-app-logo');
+const componentName$q = getComponentName('third-party-app-logo');
 class RawThirdPartyAppLogoClass extends createBaseClass({
-  componentName: componentName$p,
+  componentName: componentName$q,
   baseSelector: '.wrapper',
 }) {
   constructor() {
@@ -18410,9 +18440,9 @@ const ThirdPartyAppLogoClass = compose(
   componentNameValidationMixin
 )(RawThirdPartyAppLogoClass);
 
-customElements.define(componentName$p, ThirdPartyAppLogoClass);
+customElements.define(componentName$q, ThirdPartyAppLogoClass);
 
-const componentName$o = getComponentName('security-questions-setup');
+const componentName$p = getComponentName('security-questions-setup');
 
 const attrsToSync$1 = [
   'full-width',
@@ -18431,7 +18461,7 @@ const attrsToSync$1 = [
 ];
 
 const attrsToReRender$1 = ['count', 'questions'];
-class RawSecurityQuestionsSetup extends createBaseClass({ componentName: componentName$o, baseSelector: 'div' }) {
+class RawSecurityQuestionsSetup extends createBaseClass({ componentName: componentName$p, baseSelector: 'div' }) {
   constructor() {
     super();
 
@@ -18539,7 +18569,7 @@ class RawSecurityQuestionsSetup extends createBaseClass({ componentName: compone
       return JSON.parse(this.getAttribute('questions')) || [];
     } catch (e) {
       // eslint-disable-next-line no-console
-      console.error(componentName$o, 'Error parsing questions attribute', e);
+      console.error(componentName$p, 'Error parsing questions attribute', e);
       return [];
     }
   }
@@ -18646,9 +18676,9 @@ const SecurityQuestionsSetupClass = compose(
   componentNameValidationMixin
 )(RawSecurityQuestionsSetup);
 
-customElements.define(componentName$o, SecurityQuestionsSetupClass);
+customElements.define(componentName$p, SecurityQuestionsSetupClass);
 
-const componentName$n = getComponentName('security-questions-verify');
+const componentName$o = getComponentName('security-questions-verify');
 
 const textFieldsAttrs = [
   'full-width',
@@ -18672,7 +18702,7 @@ const attrMappings = {
 const attrsToSync = [...textFieldsAttrs, ...textsAttrs];
 
 const attrsToReRender = ['questions'];
-class RawSecurityQuestionsVerify extends createBaseClass({ componentName: componentName$n, baseSelector: 'div' }) {
+class RawSecurityQuestionsVerify extends createBaseClass({ componentName: componentName$o, baseSelector: 'div' }) {
   constructor() {
     super();
 
@@ -18746,7 +18776,7 @@ class RawSecurityQuestionsVerify extends createBaseClass({ componentName: compon
       return JSON.parse(this.getAttribute('questions')) || [];
     } catch (e) {
       // eslint-disable-next-line no-console
-      console.error(componentName$n, 'Error parsing questions attribute', e);
+      console.error(componentName$o, 'Error parsing questions attribute', e);
       return [];
     }
   }
@@ -18880,7 +18910,7 @@ const SecurityQuestionsVerifyClass = compose(
   componentNameValidationMixin
 )(RawSecurityQuestionsVerify);
 
-customElements.define(componentName$n, SecurityQuestionsVerifyClass);
+customElements.define(componentName$o, SecurityQuestionsVerifyClass);
 
 // Matches any character that is not a digit, whitespace, or phone formatting character (+, -, (, ))
 const INVALID_PHONE_CHARS_RE = /[^\d\s+\-()]/;
@@ -18889,7 +18919,7 @@ const isNumericValue = (val) => !!val && !INVALID_PHONE_CHARS_RE.test(val);
 
 const sanitizeCountryCodePrefix = (val) => val.replace(/\+\d+-/, '');
 
-const componentName$m = getComponentName('hybrid-field');
+const componentName$n = getComponentName('hybrid-field');
 
 const attrs = {
   shared: [
@@ -18954,7 +18984,7 @@ const PHONE_FIELD = 'descope-phone-field';
 const PHONE_INPUT_BOX_FIELD = 'descope-phone-input-box-field';
 
 const BaseClass$6 = createBaseClass({
-  componentName: componentName$m,
+  componentName: componentName$n,
   baseSelector: 'div',
 });
 
@@ -19286,11 +19316,11 @@ const HybridFieldClass = compose(
   componentNameValidationMixin
 )(RawHybridField);
 
-customElements.define(componentName$m, HybridFieldClass);
+customElements.define(componentName$n, HybridFieldClass);
 
-const componentName$l = getComponentName('alert');
+const componentName$m = getComponentName('alert');
 
-class RawAlert extends createBaseClass({ componentName: componentName$l, baseSelector: ':host > div' }) {
+class RawAlert extends createBaseClass({ componentName: componentName$m, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -19411,13 +19441,13 @@ const AlertClass = compose(
   componentNameValidationMixin
 )(RawAlert);
 
-customElements.define(componentName$l, AlertClass);
+customElements.define(componentName$m, AlertClass);
 
-const componentName$k = getComponentName('hcaptcha');
+const componentName$l = getComponentName('hcaptcha');
 
 const observedAttributes$1 = ['enabled', 'site-key'];
 
-const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$k, baseSelector: ':host > div' });
+const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$l, baseSelector: ':host > div' });
 class RawHcaptcha extends BaseInputClass$3 {
   static get observedAttributes() {
     return observedAttributes$1.concat(BaseInputClass$3.observedAttributes || []);
@@ -19545,7 +19575,7 @@ const HcaptchaClass = compose(
   componentNameValidationMixin
 )(RawHcaptcha);
 
-customElements.define(componentName$k, HcaptchaClass);
+customElements.define(componentName$l, HcaptchaClass);
 
 const direction$1 = 'ltr';
 
@@ -19729,7 +19759,7 @@ const globals$1 = {
   fonts: fonts$1,
   direction: direction$1,
 };
-const vars$15 = getThemeVars(globals$1);
+const vars$16 = getThemeVars(globals$1);
 
 const direction = 'ltr';
 
@@ -19926,10 +19956,10 @@ const mode = {
   surface: globalRefs$H.colors.surface,
 };
 
-const [helperTheme$6, helperRefs$6, helperVars$6] = createHelperVars$1({ mode }, componentName$1c);
+const [helperTheme$7, helperRefs$7, helperVars$6] = createHelperVars$1({ mode }, componentName$1d);
 
 const button = {
-  ...helperTheme$6,
+  ...helperTheme$7,
 
   [compVars$9.fontFamily]: globalRefs$H.fonts.font1.family,
 
@@ -19981,7 +20011,7 @@ const button = {
 
   _loading: {
     [compVars$9.cursor]: 'wait',
-    [compVars$9.labelTextColor]: helperRefs$6.main,
+    [compVars$9.labelTextColor]: helperRefs$7.main,
   },
 
   _disabled: {
@@ -19994,51 +20024,51 @@ const button = {
 
   variant: {
     contained: {
-      [compVars$9.labelTextColor]: helperRefs$6.contrast,
-      [compVars$9.backgroundColor]: helperRefs$6.main,
+      [compVars$9.labelTextColor]: helperRefs$7.contrast,
+      [compVars$9.backgroundColor]: helperRefs$7.main,
       _hover: {
-        [compVars$9.backgroundColor]: helperRefs$6.dark,
+        [compVars$9.backgroundColor]: helperRefs$7.dark,
         _loading: {
-          [compVars$9.backgroundColor]: helperRefs$6.main,
+          [compVars$9.backgroundColor]: helperRefs$7.main,
         },
       },
       _active: {
-        [compVars$9.backgroundColor]: helperRefs$6.main,
+        [compVars$9.backgroundColor]: helperRefs$7.main,
       },
     },
 
     outline: {
-      [compVars$9.labelTextColor]: helperRefs$6.main,
-      [compVars$9.borderColor]: helperRefs$6.main,
+      [compVars$9.labelTextColor]: helperRefs$7.main,
+      [compVars$9.borderColor]: helperRefs$7.main,
       _hover: {
-        [compVars$9.labelTextColor]: helperRefs$6.dark,
-        [compVars$9.borderColor]: helperRefs$6.dark,
+        [compVars$9.labelTextColor]: helperRefs$7.dark,
+        [compVars$9.borderColor]: helperRefs$7.dark,
       },
       _active: {
-        [compVars$9.labelTextColor]: helperRefs$6.main,
-        [compVars$9.borderColor]: helperRefs$6.main,
+        [compVars$9.labelTextColor]: helperRefs$7.main,
+        [compVars$9.borderColor]: helperRefs$7.main,
       },
     },
 
     link: {
-      [compVars$9.labelTextColor]: helperRefs$6.main,
+      [compVars$9.labelTextColor]: helperRefs$7.main,
       [compVars$9.horizontalPadding]: '0.125em',
       _hover: {
-        [compVars$9.labelTextColor]: helperRefs$6.dark,
+        [compVars$9.labelTextColor]: helperRefs$7.dark,
         [compVars$9.labelTextDecoration]: 'underline',
       },
       _active: {
-        [compVars$9.labelTextColor]: helperRefs$6.main,
+        [compVars$9.labelTextColor]: helperRefs$7.main,
       },
     },
   },
 
   _focused: {
-    [compVars$9.outlineColor]: helperRefs$6.light,
+    [compVars$9.outlineColor]: helperRefs$7.light,
   },
 };
 
-const vars$14 = {
+const vars$15 = {
   ...compVars$9,
   ...helperVars$6,
 };
@@ -20046,138 +20076,138 @@ const vars$14 = {
 var button$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: button,
-  vars: vars$14
+  vars: vars$15
 });
 
 const globalRefs$G = getThemeRefs$1(globals);
-const vars$13 = TextClass.cssVarList;
+const vars$14 = TextClass.cssVarList;
 
 const text$1 = {
-  [vars$13.hostDirection]: globalRefs$G.direction,
-  [vars$13.textLineHeight]: '1.35em',
-  [vars$13.textAlign]: 'start',
-  [vars$13.textColor]: globalRefs$G.colors.surface.dark,
+  [vars$14.hostDirection]: globalRefs$G.direction,
+  [vars$14.textLineHeight]: '1.35em',
+  [vars$14.textAlign]: 'start',
+  [vars$14.textColor]: globalRefs$G.colors.surface.dark,
 
   variant: {
     h1: {
-      [vars$13.fontSize]: globalRefs$G.typography.h1.size,
-      [vars$13.fontWeight]: globalRefs$G.typography.h1.weight,
-      [vars$13.fontFamily]: globalRefs$G.typography.h1.font,
+      [vars$14.fontSize]: globalRefs$G.typography.h1.size,
+      [vars$14.fontWeight]: globalRefs$G.typography.h1.weight,
+      [vars$14.fontFamily]: globalRefs$G.typography.h1.font,
     },
     h2: {
-      [vars$13.fontSize]: globalRefs$G.typography.h2.size,
-      [vars$13.fontWeight]: globalRefs$G.typography.h2.weight,
-      [vars$13.fontFamily]: globalRefs$G.typography.h2.font,
+      [vars$14.fontSize]: globalRefs$G.typography.h2.size,
+      [vars$14.fontWeight]: globalRefs$G.typography.h2.weight,
+      [vars$14.fontFamily]: globalRefs$G.typography.h2.font,
     },
     h3: {
-      [vars$13.fontSize]: globalRefs$G.typography.h3.size,
-      [vars$13.fontWeight]: globalRefs$G.typography.h3.weight,
-      [vars$13.fontFamily]: globalRefs$G.typography.h3.font,
+      [vars$14.fontSize]: globalRefs$G.typography.h3.size,
+      [vars$14.fontWeight]: globalRefs$G.typography.h3.weight,
+      [vars$14.fontFamily]: globalRefs$G.typography.h3.font,
     },
     subtitle1: {
-      [vars$13.fontSize]: globalRefs$G.typography.subtitle1.size,
-      [vars$13.fontWeight]: globalRefs$G.typography.subtitle1.weight,
-      [vars$13.fontFamily]: globalRefs$G.typography.subtitle1.font,
+      [vars$14.fontSize]: globalRefs$G.typography.subtitle1.size,
+      [vars$14.fontWeight]: globalRefs$G.typography.subtitle1.weight,
+      [vars$14.fontFamily]: globalRefs$G.typography.subtitle1.font,
     },
     subtitle2: {
-      [vars$13.fontSize]: globalRefs$G.typography.subtitle2.size,
-      [vars$13.fontWeight]: globalRefs$G.typography.subtitle2.weight,
-      [vars$13.fontFamily]: globalRefs$G.typography.subtitle2.font,
+      [vars$14.fontSize]: globalRefs$G.typography.subtitle2.size,
+      [vars$14.fontWeight]: globalRefs$G.typography.subtitle2.weight,
+      [vars$14.fontFamily]: globalRefs$G.typography.subtitle2.font,
     },
     body1: {
-      [vars$13.fontSize]: globalRefs$G.typography.body1.size,
-      [vars$13.fontWeight]: globalRefs$G.typography.body1.weight,
-      [vars$13.fontFamily]: globalRefs$G.typography.body1.font,
+      [vars$14.fontSize]: globalRefs$G.typography.body1.size,
+      [vars$14.fontWeight]: globalRefs$G.typography.body1.weight,
+      [vars$14.fontFamily]: globalRefs$G.typography.body1.font,
     },
     body2: {
-      [vars$13.fontSize]: globalRefs$G.typography.body2.size,
-      [vars$13.fontWeight]: globalRefs$G.typography.body2.weight,
-      [vars$13.fontFamily]: globalRefs$G.typography.body2.font,
+      [vars$14.fontSize]: globalRefs$G.typography.body2.size,
+      [vars$14.fontWeight]: globalRefs$G.typography.body2.weight,
+      [vars$14.fontFamily]: globalRefs$G.typography.body2.font,
     },
   },
 
   mode: {
     primary: {
-      [vars$13.textColor]: globalRefs$G.colors.surface.contrast,
+      [vars$14.textColor]: globalRefs$G.colors.surface.contrast,
     },
     secondary: {
-      [vars$13.textColor]: globalRefs$G.colors.surface.dark,
+      [vars$14.textColor]: globalRefs$G.colors.surface.dark,
     },
     error: {
-      [vars$13.textColor]: globalRefs$G.colors.error.main,
+      [vars$14.textColor]: globalRefs$G.colors.error.main,
     },
     'error-dark': {
-      [vars$13.textColor]: globalRefs$G.colors.error.dark,
+      [vars$14.textColor]: globalRefs$G.colors.error.dark,
     },
     success: {
-      [vars$13.textColor]: globalRefs$G.colors.success.main,
+      [vars$14.textColor]: globalRefs$G.colors.success.main,
     },
     'success-dark': {
-      [vars$13.textColor]: globalRefs$G.colors.success.dark,
+      [vars$14.textColor]: globalRefs$G.colors.success.dark,
     },
     warning: {
-      [vars$13.textColor]: globalRefs$G.colors.warning.main,
+      [vars$14.textColor]: globalRefs$G.colors.warning.main,
     },
     'warning-dark': {
-      [vars$13.textColor]: globalRefs$G.colors.warning.dark,
+      [vars$14.textColor]: globalRefs$G.colors.warning.dark,
     },
   },
 
   textAlign: {
-    right: { [vars$13.textAlign]: 'right' },
-    left: { [vars$13.textAlign]: 'left' },
-    center: { [vars$13.textAlign]: 'center' },
+    right: { [vars$14.textAlign]: 'right' },
+    left: { [vars$14.textAlign]: 'left' },
+    center: { [vars$14.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$13.hostWidth]: '100%',
+    [vars$14.hostWidth]: '100%',
   },
 
   _italic: {
-    [vars$13.fontStyle]: 'italic',
+    [vars$14.fontStyle]: 'italic',
   },
 
   _uppercase: {
-    [vars$13.textTransform]: 'uppercase',
+    [vars$14.textTransform]: 'uppercase',
   },
 
   _lowercase: {
-    [vars$13.textTransform]: 'lowercase',
+    [vars$14.textTransform]: 'lowercase',
   },
 };
 
 var text$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: text$1,
-  vars: vars$13
+  vars: vars$14
 });
 
 const globalRefs$F = getThemeRefs$1(globals);
-const vars$12 = LinkClass.cssVarList;
+const vars$13 = LinkClass.cssVarList;
 
 const link = {
-  [vars$12.hostDirection]: globalRefs$F.direction,
-  [vars$12.cursor]: 'pointer',
+  [vars$13.hostDirection]: globalRefs$F.direction,
+  [vars$13.cursor]: 'pointer',
 
-  [vars$12.textColor]: globalRefs$F.colors.primary.main,
+  [vars$13.textColor]: globalRefs$F.colors.primary.main,
 
   textAlign: {
-    right: { [vars$12.textAlign]: 'right' },
-    left: { [vars$12.textAlign]: 'left' },
-    center: { [vars$12.textAlign]: 'center' },
+    right: { [vars$13.textAlign]: 'right' },
+    left: { [vars$13.textAlign]: 'left' },
+    center: { [vars$13.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$12.hostWidth]: '100%',
+    [vars$13.hostWidth]: '100%',
   },
 
   _hover: {
-    [vars$12.textDecoration]: 'underline',
+    [vars$13.textDecoration]: 'underline',
   },
 
   mode: {
     secondary: {
-      [vars$12.textColor]: globalRefs$F.colors.secondary.main,
+      [vars$13.textColor]: globalRefs$F.colors.secondary.main,
     },
   },
 };
@@ -20185,37 +20215,37 @@ const link = {
 var link$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: link,
-  vars: vars$12
+  vars: vars$13
 });
 
 const globalRefs$E = getThemeRefs$1(globals);
-const vars$11 = EnrichedTextClass.cssVarList;
+const vars$12 = EnrichedTextClass.cssVarList;
 
 const enrichedText = {
-  [vars$11.hostDirection]: globalRefs$E.direction,
-  [vars$11.hostWidth]: useVar$1(vars$13.hostWidth),
+  [vars$12.hostDirection]: globalRefs$E.direction,
+  [vars$12.hostWidth]: useVar$1(vars$14.hostWidth),
 
-  [vars$11.textLineHeight]: useVar$1(vars$13.textLineHeight),
-  [vars$11.textColor]: useVar$1(vars$13.textColor),
-  [vars$11.textAlign]: useVar$1(vars$13.textAlign),
+  [vars$12.textLineHeight]: useVar$1(vars$14.textLineHeight),
+  [vars$12.textColor]: useVar$1(vars$14.textColor),
+  [vars$12.textAlign]: useVar$1(vars$14.textAlign),
 
-  [vars$11.fontSize]: useVar$1(vars$13.fontSize),
-  [vars$11.fontWeight]: useVar$1(vars$13.fontWeight),
-  [vars$11.fontFamily]: useVar$1(vars$13.fontFamily),
+  [vars$12.fontSize]: useVar$1(vars$14.fontSize),
+  [vars$12.fontWeight]: useVar$1(vars$14.fontWeight),
+  [vars$12.fontFamily]: useVar$1(vars$14.fontFamily),
 
-  [vars$11.linkColor]: useVar$1(vars$12.textColor),
-  [vars$11.linkTextDecoration]: 'none',
-  [vars$11.linkHoverTextDecoration]: 'underline',
+  [vars$12.linkColor]: useVar$1(vars$13.textColor),
+  [vars$12.linkTextDecoration]: 'none',
+  [vars$12.linkHoverTextDecoration]: 'underline',
 
-  [vars$11.fontWeightBold]: '900',
-  [vars$11.minWidth]: '0.25em',
-  [vars$11.minHeight]: '1.35em',
+  [vars$12.fontWeightBold]: '900',
+  [vars$12.minWidth]: '0.25em',
+  [vars$12.minHeight]: '1.35em',
 
-  [vars$11.hostDisplay]: 'inline-block',
+  [vars$12.hostDisplay]: 'inline-block',
 
   _empty: {
     _hideWhenEmpty: {
-      [vars$11.hostDisplay]: 'none',
+      [vars$12.hostDisplay]: 'none',
     },
   },
 };
@@ -20223,10 +20253,10 @@ const enrichedText = {
 var enrichedText$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: enrichedText,
-  vars: vars$11
+  vars: vars$12
 });
 
-const componentName$j = getComponentName$1('input-wrapper');
+const componentName$k = getComponentName$1('input-wrapper');
 const globalRefs$D = getThemeRefs$1(globals);
 
 const [theme$2, refs$1] = createHelperVars$1(
@@ -20349,103 +20379,103 @@ const [theme$2, refs$1] = createHelperVars$1(
       backgroundColor: globalRefs$D.colors.surface.main,
     },
   },
-  componentName$j,
+  componentName$k,
 );
 
 const globalRefs$C = getThemeRefs$1(globals);
-const vars$10 = ComboBoxClass.cssVarList;
+const vars$11 = ComboBoxClass.cssVarList;
 
 const comboBox = {
-  [vars$10.hostWidth]: refs$1.width,
-  [vars$10.hostDirection]: refs$1.direction,
-  [vars$10.fontSize]: refs$1.fontSize,
-  [vars$10.fontFamily]: refs$1.fontFamily,
-  [vars$10.labelFontSize]: refs$1.labelFontSize,
-  [vars$10.labelFontWeight]: refs$1.labelFontWeight,
-  [vars$10.labelTextColor]: refs$1.labelTextColor,
-  [vars$10.errorMessageTextColor]: refs$1.errorMessageTextColor,
-  [vars$10.inputBorderColor]: refs$1.borderColor,
-  [vars$10.inputBorderWidth]: refs$1.borderWidth,
-  [vars$10.inputBorderStyle]: refs$1.borderStyle,
-  [vars$10.inputBorderRadius]: refs$1.borderRadius,
-  [vars$10.inputOutlineColor]: refs$1.outlineColor,
-  [vars$10.inputOutlineOffset]: refs$1.outlineOffset,
-  [vars$10.inputOutlineWidth]: refs$1.outlineWidth,
-  [vars$10.inputOutlineStyle]: refs$1.outlineStyle,
-  [vars$10.labelRequiredIndicator]: refs$1.requiredIndicator,
-  [vars$10.inputValueTextColor]: refs$1.valueTextColor,
-  [vars$10.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
-  [vars$10.inputBackgroundColor]: refs$1.backgroundColor,
-  [vars$10.inputHorizontalPadding]: refs$1.horizontalPadding,
-  [vars$10.inputHeight]: refs$1.inputHeight,
-  [vars$10.inputDropdownButtonColor]: globalRefs$C.colors.surface.dark,
-  [vars$10.inputDropdownButtonCursor]: 'pointer',
-  [vars$10.inputDropdownButtonSize]: refs$1.toggleButtonSize,
-  [vars$10.inputDropdownButtonOffset]: globalRefs$C.spacing.xs,
-  [vars$10.overlayItemPaddingInlineStart]: globalRefs$C.spacing.xs,
-  [vars$10.overlayItemPaddingInlineEnd]: globalRefs$C.spacing.lg,
-  [vars$10.labelPosition]: refs$1.labelPosition,
-  [vars$10.labelTopPosition]: refs$1.labelTopPosition,
-  [vars$10.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
-  [vars$10.inputTransformY]: refs$1.inputTransformY,
-  [vars$10.inputTransition]: refs$1.inputTransition,
-  [vars$10.marginInlineStart]: refs$1.marginInlineStart,
-  [vars$10.placeholderOpacity]: refs$1.placeholderOpacity,
-  [vars$10.inputVerticalAlignment]: refs$1.inputVerticalAlignment,
-  [vars$10.valueInputHeight]: refs$1.valueInputHeight,
-  [vars$10.valueInputMarginBottom]: refs$1.valueInputMarginBottom,
+  [vars$11.hostWidth]: refs$1.width,
+  [vars$11.hostDirection]: refs$1.direction,
+  [vars$11.fontSize]: refs$1.fontSize,
+  [vars$11.fontFamily]: refs$1.fontFamily,
+  [vars$11.labelFontSize]: refs$1.labelFontSize,
+  [vars$11.labelFontWeight]: refs$1.labelFontWeight,
+  [vars$11.labelTextColor]: refs$1.labelTextColor,
+  [vars$11.errorMessageTextColor]: refs$1.errorMessageTextColor,
+  [vars$11.inputBorderColor]: refs$1.borderColor,
+  [vars$11.inputBorderWidth]: refs$1.borderWidth,
+  [vars$11.inputBorderStyle]: refs$1.borderStyle,
+  [vars$11.inputBorderRadius]: refs$1.borderRadius,
+  [vars$11.inputOutlineColor]: refs$1.outlineColor,
+  [vars$11.inputOutlineOffset]: refs$1.outlineOffset,
+  [vars$11.inputOutlineWidth]: refs$1.outlineWidth,
+  [vars$11.inputOutlineStyle]: refs$1.outlineStyle,
+  [vars$11.labelRequiredIndicator]: refs$1.requiredIndicator,
+  [vars$11.inputValueTextColor]: refs$1.valueTextColor,
+  [vars$11.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
+  [vars$11.inputBackgroundColor]: refs$1.backgroundColor,
+  [vars$11.inputHorizontalPadding]: refs$1.horizontalPadding,
+  [vars$11.inputHeight]: refs$1.inputHeight,
+  [vars$11.inputDropdownButtonColor]: globalRefs$C.colors.surface.dark,
+  [vars$11.inputDropdownButtonCursor]: 'pointer',
+  [vars$11.inputDropdownButtonSize]: refs$1.toggleButtonSize,
+  [vars$11.inputDropdownButtonOffset]: globalRefs$C.spacing.xs,
+  [vars$11.overlayItemPaddingInlineStart]: globalRefs$C.spacing.xs,
+  [vars$11.overlayItemPaddingInlineEnd]: globalRefs$C.spacing.lg,
+  [vars$11.labelPosition]: refs$1.labelPosition,
+  [vars$11.labelTopPosition]: refs$1.labelTopPosition,
+  [vars$11.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
+  [vars$11.inputTransformY]: refs$1.inputTransformY,
+  [vars$11.inputTransition]: refs$1.inputTransition,
+  [vars$11.marginInlineStart]: refs$1.marginInlineStart,
+  [vars$11.placeholderOpacity]: refs$1.placeholderOpacity,
+  [vars$11.inputVerticalAlignment]: refs$1.inputVerticalAlignment,
+  [vars$11.valueInputHeight]: refs$1.valueInputHeight,
+  [vars$11.valueInputMarginBottom]: refs$1.valueInputMarginBottom,
 
   // error message icon
-  [vars$10.errorMessageIcon]: refs$1.errorMessageIcon,
-  [vars$10.errorMessageIconSize]: refs$1.errorMessageIconSize,
-  [vars$10.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
-  [vars$10.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
-  [vars$10.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
-  [vars$10.errorMessageFontSize]: refs$1.errorMessageFontSize,
+  [vars$11.errorMessageIcon]: refs$1.errorMessageIcon,
+  [vars$11.errorMessageIconSize]: refs$1.errorMessageIconSize,
+  [vars$11.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+  [vars$11.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+  [vars$11.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+  [vars$11.errorMessageFontSize]: refs$1.errorMessageFontSize,
 
   _readonly: {
-    [vars$10.inputDropdownButtonCursor]: 'default',
+    [vars$11.inputDropdownButtonCursor]: 'default',
   },
 
   // Overlay theme exposed via the component:
-  [vars$10.overlayFontSize]: refs$1.fontSize,
-  [vars$10.overlayFontFamily]: refs$1.fontFamily,
-  [vars$10.overlayCursor]: 'pointer',
-  [vars$10.overlayItemBoxShadow]: 'none',
-  [vars$10.overlayBackground]: refs$1.backgroundColor,
-  [vars$10.overlayTextColor]: refs$1.valueTextColor,
-  [vars$10.overlayCheckmarkDisplay]: 'initial',
-  [vars$10.overlaySelectedItemBackground]: 'initial',
-  [vars$10.overlaySelectedItemHoverBackground]:
+  [vars$11.overlayFontSize]: refs$1.fontSize,
+  [vars$11.overlayFontFamily]: refs$1.fontFamily,
+  [vars$11.overlayCursor]: 'pointer',
+  [vars$11.overlayItemBoxShadow]: 'none',
+  [vars$11.overlayBackground]: refs$1.backgroundColor,
+  [vars$11.overlayTextColor]: refs$1.valueTextColor,
+  [vars$11.overlayCheckmarkDisplay]: 'initial',
+  [vars$11.overlaySelectedItemBackground]: 'initial',
+  [vars$11.overlaySelectedItemHoverBackground]:
     globalRefs$C.colors.primary.highlight,
-  [vars$10.overlaySelectedItemFocusBackground]:
+  [vars$11.overlaySelectedItemFocusBackground]:
     globalRefs$C.colors.primary.highlight,
-  [vars$10.overlayItemHoverBackground]: globalRefs$C.colors.primary.highlight,
-  [vars$10.overlayItemFocusBackground]: globalRefs$C.colors.primary.highlight,
+  [vars$11.overlayItemHoverBackground]: globalRefs$C.colors.primary.highlight,
+  [vars$11.overlayItemFocusBackground]: globalRefs$C.colors.primary.highlight,
 
   // Overlay direct theme:
-  [vars$10.overlay.minHeight]: '400px',
-  [vars$10.overlay.margin]: '0',
+  [vars$11.overlay.minHeight]: '400px',
+  [vars$11.overlay.margin]: '0',
 
-  [vars$10.overlay.contentHeight]: '100%',
-  [vars$10.overlay.contentOpacity]: '1',
-  [vars$10.overlay.scrollerMinHeight]: '1px',
+  [vars$11.overlay.contentHeight]: '100%',
+  [vars$11.overlay.contentOpacity]: '1',
+  [vars$11.overlay.scrollerMinHeight]: '1px',
   _loading: {
-    [vars$10.overlay.loaderTop]: '50%',
-    [vars$10.overlay.loaderLeft]: '50%',
-    [vars$10.overlay.loaderRight]: 'auto',
+    [vars$11.overlay.loaderTop]: '50%',
+    [vars$11.overlay.loaderLeft]: '50%',
+    [vars$11.overlay.loaderRight]: 'auto',
     // Margin has to be negative to center the loader, "transform" can't be used because the animation uses it
     // Margin has to be half of the width/height of the loader to center it
-    [vars$10.overlay.loaderMargin]: '-15px 0 0 -15px',
-    [vars$10.overlay.loaderWidth]: '30px',
-    [vars$10.overlay.loaderHeight]: '30px',
-    [vars$10.overlay.loaderBorder]: '2px solid transparent',
-    [vars$10.overlay.loaderBorderColor]:
+    [vars$11.overlay.loaderMargin]: '-15px 0 0 -15px',
+    [vars$11.overlay.loaderWidth]: '30px',
+    [vars$11.overlay.loaderHeight]: '30px',
+    [vars$11.overlay.loaderBorder]: '2px solid transparent',
+    [vars$11.overlay.loaderBorderColor]:
       `${globalRefs$C.colors.primary.highlight} ${globalRefs$C.colors.primary.highlight} ${globalRefs$C.colors.primary.main} ${globalRefs$C.colors.primary.main}`,
-    [vars$10.overlay.loaderBorderRadius]: '50%',
-    [vars$10.overlay.contentHeight]: '100px',
-    [vars$10.overlay.scrollerMinHeight]: '100px',
-    [vars$10.overlay.contentOpacity]: '0',
+    [vars$11.overlay.loaderBorderRadius]: '50%',
+    [vars$11.overlay.contentHeight]: '100px',
+    [vars$11.overlay.scrollerMinHeight]: '100px',
+    [vars$11.overlay.contentOpacity]: '0',
   },
 };
 
@@ -20453,84 +20483,130 @@ var comboBox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   comboBox: comboBox,
   default: comboBox,
-  vars: vars$10
+  vars: vars$11
 });
 
 const globalRefs$B = getThemeRefs$1(globals);
 
-const vars$$ = BadgeClass.cssVarList;
+const [helperTheme$6, helperRefs$6] = createHelperVars$1(
+  {
+    shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
+  },
+  componentName$A,
+);
+
+const { shadowColor: shadowColor$6 } = helperRefs$6;
+
+const vars$10 = BadgeClass.cssVarList;
 
 const badge = {
-  [vars$$.hostWidth]: 'fit-content',
-  [vars$$.hostDirection]: globalRefs$B.direction,
+  ...helperTheme$6,
 
-  [vars$$.textAlign]: 'center',
+  [vars$10.hostWidth]: 'fit-content',
+  [vars$10.hostDirection]: globalRefs$B.direction,
 
-  [vars$$.fontFamily]: globalRefs$B.fonts.font1.family,
-  [vars$$.fontWeight]: '400',
+  [vars$10.textAlign]: 'center',
 
-  [vars$$.verticalPadding]: '0.25em',
-  [vars$$.horizontalPadding]: '0.5em',
+  [vars$10.fontFamily]: globalRefs$B.fonts.font1.family,
+  [vars$10.fontWeight]: '400',
 
-  [vars$$.borderWidth]: globalRefs$B.border.xs,
-  [vars$$.borderRadius]: globalRefs$B.radius.xs,
-  [vars$$.borderColor]: 'transparent',
-  [vars$$.borderStyle]: 'solid',
+  [vars$10.verticalPadding]: '0.25em',
+  [vars$10.horizontalPadding]: '0.5em',
+
+  [vars$10.borderWidth]: globalRefs$B.border.xs,
+  [vars$10.borderRadius]: globalRefs$B.radius.xs,
+  [vars$10.borderColor]: 'transparent',
+  [vars$10.borderStyle]: 'solid',
 
   _fullWidth: {
-    [vars$$.hostWidth]: '100%',
+    [vars$10.hostWidth]: '100%',
   },
 
   size: {
-    xs: { [vars$$.fontSize]: '12px' },
-    sm: { [vars$$.fontSize]: '14px' },
-    md: { [vars$$.fontSize]: '16px' },
-    lg: { [vars$$.fontSize]: '18px' },
+    xs: { [vars$10.fontSize]: '12px' },
+    sm: { [vars$10.fontSize]: '14px' },
+    md: { [vars$10.fontSize]: '16px' },
+    lg: { [vars$10.fontSize]: '18px' },
+  },
+
+  variant: {
+    contained: {
+      [vars$10.backgroundColor]: globalRefs$B.colors.surface.main,
+    },
+  },
+
+  $breakpoints: {
+    indicator: '(max-width: 65px)',
+  },
+
+  _shrinkToIndicator: {
+    '$breakpoints.indicator': {
+      [vars$10.hostWidth]: '13px',
+      [vars$10.hostHeight]: '13px',
+      [vars$10.borderRadius]: '50%',
+      [vars$10.fontSize]: '0',
+      [vars$10.textIndent]: '-9999px',
+    },
   },
 
   mode: {
     default: {
-      [vars$$.textColor]: globalRefs$B.colors.surface.dark,
+      [vars$10.textColor]: globalRefs$B.colors.surface.dark,
       _bordered: {
-        [vars$$.borderColor]: globalRefs$B.colors.surface.light,
+        [vars$10.borderColor]: globalRefs$B.colors.surface.light,
       },
     },
     primary: {
-      [vars$$.textColor]: globalRefs$B.colors.primary.main,
+      [vars$10.textColor]: globalRefs$B.colors.primary.main,
       _bordered: {
-        [vars$$.borderColor]: globalRefs$B.colors.primary.light,
+        [vars$10.borderColor]: globalRefs$B.colors.primary.light,
       },
     },
     secondary: {
-      [vars$$.textColor]: globalRefs$B.colors.secondary.main,
+      [vars$10.textColor]: globalRefs$B.colors.secondary.main,
       _bordered: {
-        [vars$$.borderColor]: globalRefs$B.colors.secondary.light,
+        [vars$10.borderColor]: globalRefs$B.colors.secondary.light,
       },
     },
     error: {
-      [vars$$.textColor]: globalRefs$B.colors.error.main,
+      [vars$10.textColor]: globalRefs$B.colors.error.main,
       _bordered: {
-        [vars$$.borderColor]: globalRefs$B.colors.error.light,
+        [vars$10.borderColor]: globalRefs$B.colors.error.light,
       },
     },
     success: {
-      [vars$$.textColor]: globalRefs$B.colors.success.main,
+      [vars$10.textColor]: globalRefs$B.colors.success.main,
       _bordered: {
-        [vars$$.borderColor]: globalRefs$B.colors.success.light,
+        [vars$10.borderColor]: globalRefs$B.colors.success.light,
       },
     },
   },
+
+  shadow: {
+    sm: {
+      [vars$10.boxShadow]: `${globalRefs$B.shadow.wide.sm} ${shadowColor$6}, ${globalRefs$B.shadow.narrow.sm} ${shadowColor$6}`,
+    },
+    md: {
+      [vars$10.boxShadow]: `${globalRefs$B.shadow.wide.md} ${shadowColor$6}, ${globalRefs$B.shadow.narrow.md} ${shadowColor$6}`,
+    },
+    lg: {
+      [vars$10.boxShadow]: `${globalRefs$B.shadow.wide.lg} ${shadowColor$6}, ${globalRefs$B.shadow.narrow.lg} ${shadowColor$6}`,
+    },
+    xl: {
+      [vars$10.boxShadow]: `${globalRefs$B.shadow.wide.xl} ${shadowColor$6}, ${globalRefs$B.shadow.narrow.xl} ${shadowColor$6}`,
+    },
+  },
 };
 
 var badge$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: badge,
-  vars: vars$$
+  vars: vars$10
 });
 
-const componentName$i = getComponentName$1('avatar');
+const componentName$j = getComponentName$1('avatar');
 class RawAvatar extends createBaseClass$1({
-  componentName: componentName$i,
+  componentName: componentName$j,
   baseSelector: ':host > .wrapper',
 }) {
   constructor() {
@@ -20681,37 +20757,37 @@ const avatar = {
   },
 };
 
-const vars$_ = {
+const vars$$ = {
   ...compVars$8,
 };
 
 var avatar$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: avatar,
-  vars: vars$_
+  vars: vars$$
 });
 
-const vars$Z = IconClass.cssVarList;
+const vars$_ = IconClass.cssVarList;
 
 const icon$1 = {};
 
 var icon$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: icon$1,
-  vars: vars$Z
+  vars: vars$_
 });
 
-const vars$Y = ImageClass.cssVarList;
+const vars$Z = ImageClass.cssVarList;
 
 const image = {};
 
 var image$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: image,
-  vars: vars$Y
+  vars: vars$Z
 });
 
-const componentName$h = getComponentName$1('apps-list');
+const componentName$i = getComponentName$1('apps-list');
 
 const itemRenderer$3 = ({ name, icon, url }, _, ref) => `
   <a ${url ? `href="${url}" title="${url}"` : ''} ${ref.openInSameWindow ? '' : 'target="_blank"'}>
@@ -20835,7 +20911,7 @@ const AppsListClass = compose$1(
     slots: ['empty-state'],
     wrappedEleName: 'descope-list',
     excludeAttrsSync: ['tabindex', 'class', 'empty', 'style'],
-    componentName: componentName$h,
+    componentName: componentName$i,
     style: () => `
       :host {
         width: 100%;
@@ -20870,60 +20946,60 @@ const AppsListClass = compose$1(
   }),
 );
 
-const vars$X = AppsListClass.cssVarList;
+const vars$Y = AppsListClass.cssVarList;
 const globalRefs$z = getThemeRefs$1(globals);
 
 const defaultHeight = '400px';
 
 const appsList = {
-  [vars$X.itemsTextAlign]: 'start',
-  [vars$X.hostDirection]: globalRefs$z.direction,
-  [vars$X.maxHeight]: defaultHeight,
-  [vars$X.itemHoverBackgroundColor]: globalRefs$z.colors.surface.highlight,
+  [vars$Y.itemsTextAlign]: 'start',
+  [vars$Y.hostDirection]: globalRefs$z.direction,
+  [vars$Y.maxHeight]: defaultHeight,
+  [vars$Y.itemHoverBackgroundColor]: globalRefs$z.colors.surface.highlight,
 
   _empty: {
-    [vars$X.minHeight]: defaultHeight,
+    [vars$Y.minHeight]: defaultHeight,
   },
 
   size: {
     xs: {
-      [vars$X.itemsFontSize]: '14px',
-      [vars$X.itemsFontWeight]: 'normal',
+      [vars$Y.itemsFontSize]: '14px',
+      [vars$Y.itemsFontWeight]: 'normal',
     },
     sm: {
-      [vars$X.itemsFontSize]: '14px',
-      [vars$X.itemsFontWeight]: 'normal',
+      [vars$Y.itemsFontSize]: '14px',
+      [vars$Y.itemsFontWeight]: 'normal',
     },
     md: {
-      [vars$X.itemsFontSize]: '16px',
-      [vars$X.itemsFontWeight]: 'normal',
+      [vars$Y.itemsFontSize]: '16px',
+      [vars$Y.itemsFontWeight]: 'normal',
     },
     lg: {
-      [vars$X.itemsFontSize]: '20px',
-      [vars$X.itemsFontWeight]: 'normal',
+      [vars$Y.itemsFontSize]: '20px',
+      [vars$Y.itemsFontWeight]: 'normal',
     },
   },
 
   itemPadding: {
     xs: {
-      [vars$X.itemVerticalPadding]: globalRefs$z.spacing.xs,
-      [vars$X.itemHorizontalPadding]: globalRefs$z.spacing.xs,
+      [vars$Y.itemVerticalPadding]: globalRefs$z.spacing.xs,
+      [vars$Y.itemHorizontalPadding]: globalRefs$z.spacing.xs,
     },
     sm: {
-      [vars$X.itemVerticalPadding]: globalRefs$z.spacing.sm,
-      [vars$X.itemHorizontalPadding]: globalRefs$z.spacing.sm,
+      [vars$Y.itemVerticalPadding]: globalRefs$z.spacing.sm,
+      [vars$Y.itemHorizontalPadding]: globalRefs$z.spacing.sm,
     },
     md: {
-      [vars$X.itemVerticalPadding]: globalRefs$z.spacing.md,
-      [vars$X.itemHorizontalPadding]: globalRefs$z.spacing.md,
+      [vars$Y.itemVerticalPadding]: globalRefs$z.spacing.md,
+      [vars$Y.itemHorizontalPadding]: globalRefs$z.spacing.md,
     },
     lg: {
-      [vars$X.itemVerticalPadding]: globalRefs$z.spacing.lg,
-      [vars$X.itemHorizontalPadding]: globalRefs$z.spacing.lg,
+      [vars$Y.itemVerticalPadding]: globalRefs$z.spacing.lg,
+      [vars$Y.itemHorizontalPadding]: globalRefs$z.spacing.lg,
     },
     xl: {
-      [vars$X.itemVerticalPadding]: globalRefs$z.spacing.xl,
-      [vars$X.itemHorizontalPadding]: globalRefs$z.spacing.xl,
+      [vars$Y.itemVerticalPadding]: globalRefs$z.spacing.xl,
+      [vars$Y.itemHorizontalPadding]: globalRefs$z.spacing.xl,
     },
   },
 };
@@ -20931,7 +21007,7 @@ const appsList = {
 var appsList$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: appsList,
-  vars: vars$X
+  vars: vars$Y
 });
 
 const globalRefs$y = getThemeRefs$1(globals);
@@ -20940,7 +21016,7 @@ const compVars$7 = ListClass.cssVarList;
 
 const [helperTheme$5, helperRefs$5, helperVars$5] = createHelperVars$1(
   { shadowColor: '#00000020' },
-  componentName$q,
+  componentName$r,
 );
 
 const { shadowColor: shadowColor$5 } = helperRefs$5;
@@ -21001,7 +21077,7 @@ const list = {
   },
 };
 
-const vars$W = {
+const vars$X = {
   ...compVars$7,
   ...helperVars$5,
 };
@@ -21009,56 +21085,56 @@ const vars$W = {
 var list$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: list,
-  vars: vars$W
+  vars: vars$X
 });
 
 const globalRefs$x = getThemeRefs$1(globals);
 
-const vars$V = ListItemClass.cssVarList;
+const vars$W = ListItemClass.cssVarList;
 
 const listItem = {
-  [vars$V.backgroundColor]: globalRefs$x.colors.surface.main,
-  [vars$V.verticalPadding]: globalRefs$x.spacing.lg,
-  [vars$V.horizontalPadding]: globalRefs$x.spacing.lg,
-  [vars$V.gap]: globalRefs$x.spacing.md,
-  [vars$V.borderStyle]: 'solid',
-  [vars$V.borderWidth]: globalRefs$x.border.xs,
-  [vars$V.borderColor]: globalRefs$x.colors.surface.main,
-  [vars$V.borderRadius]: globalRefs$x.radius.sm,
-  [vars$V.cursor]: 'pointer',
-  [vars$V.alignItems]: 'center',
-  [vars$V.flexDirection]: 'row',
-  [vars$V.transition]: 'border-color 0.2s, background-color 0.2s',
+  [vars$W.backgroundColor]: globalRefs$x.colors.surface.main,
+  [vars$W.verticalPadding]: globalRefs$x.spacing.lg,
+  [vars$W.horizontalPadding]: globalRefs$x.spacing.lg,
+  [vars$W.gap]: globalRefs$x.spacing.md,
+  [vars$W.borderStyle]: 'solid',
+  [vars$W.borderWidth]: globalRefs$x.border.xs,
+  [vars$W.borderColor]: globalRefs$x.colors.surface.main,
+  [vars$W.borderRadius]: globalRefs$x.radius.sm,
+  [vars$W.cursor]: 'pointer',
+  [vars$W.alignItems]: 'center',
+  [vars$W.flexDirection]: 'row',
+  [vars$W.transition]: 'border-color 0.2s, background-color 0.2s',
 
   variant: {
     tile: {
-      [vars$V.alignItems]: 'flex-start',
-      [vars$V.flexDirection]: 'column',
-      [vars$V.borderColor]: globalRefs$x.colors.surface.light,
+      [vars$W.alignItems]: 'flex-start',
+      [vars$W.flexDirection]: 'column',
+      [vars$W.borderColor]: globalRefs$x.colors.surface.light,
     },
   },
 
   _hover: {
-    [vars$V.backgroundColor]: globalRefs$x.colors.surface.highlight,
+    [vars$W.backgroundColor]: globalRefs$x.colors.surface.highlight,
   },
 
   _active: {
-    [vars$V.backgroundColor]: globalRefs$x.colors.surface.main,
-    [vars$V.borderColor]: globalRefs$x.colors.primary.light,
-    [vars$V.outline]: `1px solid ${globalRefs$x.colors.primary.light}`,
+    [vars$W.backgroundColor]: globalRefs$x.colors.surface.main,
+    [vars$W.borderColor]: globalRefs$x.colors.primary.light,
+    [vars$W.outline]: `1px solid ${globalRefs$x.colors.primary.light}`,
   },
 };
 
 var listItem$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: listItem,
-  vars: vars$V
+  vars: vars$W
 });
 
-const componentName$g = getComponentName$1('autocomplete-field-internal');
+const componentName$h = getComponentName$1('autocomplete-field-internal');
 
 const BaseInputClass$2 = createBaseInputClass$1({
-  componentName: componentName$g,
+  componentName: componentName$h,
   baseSelector: '',
 });
 const observedAttrs$2 = [];
@@ -21263,7 +21339,7 @@ class AutocompleteFieldInternal extends BaseInputClass$2 {
   }
 }
 
-const componentName$f = getComponentName$1('autocomplete-field');
+const componentName$g = getComponentName$1('autocomplete-field');
 
 const customMixin$2 = (superclass) =>
   class AutocompleteFieldMixinClass extends superclass {
@@ -21284,15 +21360,15 @@ const customMixin$2 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$g}
+      <${componentName$h}
         tabindex="-1"
-      ></${componentName$g}>
+      ></${componentName$h}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
       this.inputElement = this.shadowRoot.querySelector(
-        componentName$g,
+        componentName$h,
       );
 
       forwardAttrs$1(this, this.inputElement, {
@@ -21411,34 +21487,34 @@ const AutocompleteFieldClass = compose$1(
     }
   `,
     excludeAttrsSync: ['tabindex', 'error-message', 'label', 'style'],
-    componentName: componentName$f,
+    componentName: componentName$g,
   }),
 );
 
-const vars$U = AutocompleteFieldClass.cssVarList;
+const vars$V = AutocompleteFieldClass.cssVarList;
 const globalRefs$w = getThemeRefs$1(globals);
 
 const autocompleteField = {
-  [vars$U.hostWidth]: refs$1.width,
-  [vars$U.hostDirection]: refs$1.direction,
-  [vars$U.fontSize]: refs$1.fontSize,
-  [vars$U.checkmarkDisplay]: 'none',
-  [vars$U.itemPaddingInlineStart]: globalRefs$w.spacing.lg,
-  [vars$U.itemPaddingInlineEnd]: globalRefs$w.spacing.lg,
-  [vars$U.selectedItemBackground]: globalRefs$w.colors.primary.light,
-  [vars$U.selectedItemHoverBackground]: globalRefs$w.colors.primary.light,
-  [vars$U.selectedItemFocusBackground]: globalRefs$w.colors.primary.light,
-  [vars$U.itemHoverBackground]: globalRefs$w.colors.primary.highlight,
+  [vars$V.hostWidth]: refs$1.width,
+  [vars$V.hostDirection]: refs$1.direction,
+  [vars$V.fontSize]: refs$1.fontSize,
+  [vars$V.checkmarkDisplay]: 'none',
+  [vars$V.itemPaddingInlineStart]: globalRefs$w.spacing.lg,
+  [vars$V.itemPaddingInlineEnd]: globalRefs$w.spacing.lg,
+  [vars$V.selectedItemBackground]: globalRefs$w.colors.primary.light,
+  [vars$V.selectedItemHoverBackground]: globalRefs$w.colors.primary.light,
+  [vars$V.selectedItemFocusBackground]: globalRefs$w.colors.primary.light,
+  [vars$V.itemHoverBackground]: globalRefs$w.colors.primary.highlight,
 
   _fullWidth: {
-    [vars$U.hostWidth]: '100%',
+    [vars$V.hostWidth]: '100%',
   },
 };
 
 var autocompleteField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: autocompleteField,
-  vars: vars$U
+  vars: vars$V
 });
 
 const initGoogleMapsLoader = (apiKey) => {
@@ -21665,7 +21741,7 @@ class RadarConnector extends createBaseConnectorClass() {
   }
 }
 
-const componentName$e = getComponentName$1('address-field-internal');
+const componentName$f = getComponentName$1('address-field-internal');
 
 const GOOGLE_MAPS_CONNECTOR_TEMPLATE = 'google-maps-places';
 const RADAR_CONNECTOR_TEMPLATE = 'radar';
@@ -21676,7 +21752,7 @@ const CONNECTOR_CLASSES = {
 };
 
 const BaseInputClass$1 = createBaseInputClass$1({
-  componentName: componentName$e,
+  componentName: componentName$f,
   baseSelector: '',
 });
 const initConnectorAttrs = ['public-api-key'];
@@ -21783,7 +21859,7 @@ const AddressFieldInternal = compose$1(
   connectorMixin({ connectorClasses: CONNECTOR_CLASSES }),
 )(RawAddressFieldInternal);
 
-const componentName$d = getComponentName$1('address-field');
+const componentName$e = getComponentName$1('address-field');
 
 const customMixin$1 = (superclass) =>
   class AddressFieldMixinClass extends superclass {
@@ -21812,15 +21888,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$1(this, this.inputElement, {
@@ -21898,7 +21974,7 @@ const AddressFieldClass = compose$1(
     width: 100%;
   }
 
-  ${componentName$e} {
+  ${componentName$f} {
     display: inline-block;
     box-sizing: border-box;
     user-select: none;
@@ -21906,30 +21982,30 @@ const AddressFieldClass = compose$1(
     max-width: 100%;
   }
 
-  ${componentName$e} ::slotted {
+  ${componentName$f} ::slotted {
     padding: 0;
   }
 `,
     excludeAttrsSync: ['tabindex', 'error-message', 'label', 'style'],
-    componentName: componentName$d,
+    componentName: componentName$e,
   }),
 );
 
-const vars$T = AddressFieldClass.cssVarList;
+const vars$U = AddressFieldClass.cssVarList;
 
 const addressField = {
-  [vars$T.hostWidth]: refs$1.width,
-  [vars$T.hostDirection]: refs$1.direction,
+  [vars$U.hostWidth]: refs$1.width,
+  [vars$U.hostDirection]: refs$1.direction,
 
   _fullWidth: {
-    [vars$T.hostWidth]: '100%',
+    [vars$U.hostWidth]: '100%',
   },
 };
 
 var addressField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: addressField,
-  vars: vars$T
+  vars: vars$U
 });
 
 var clockIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDEwNCAxMDQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik01MC4zMzM0IDAuMzMzMjUyQzIyLjgzMzQgMC4zMzMyNTIgMC4zMzMzNzQgMjIuODMzMyAwLjMzMzM3NCA1MC4zMzMzQzAuMzMzMzc0IDc3LjgzMzMgMjIuODMzNCAxMDAuMzMzIDUwLjMzMzQgMTAwLjMzM0M3Ny44MzM0IDEwMC4zMzMgMTAwLjMzMyA3Ny44MzMzIDEwMC4zMzMgNTAuMzMzM0MxMDAuMzMzIDIyLjgzMzMgNzcuODMzNCAwLjMzMzI1MiA1MC4zMzM0IDAuMzMzMjUyWk01MC4zMzM0IDg3LjgzMzNDMjkuNzA4NCA4Ny44MzMzIDEyLjgzMzQgNzAuOTU4MyAxMi44MzM0IDUwLjMzMzNDMTIuODMzNCAyOS43MDgzIDI5LjcwODQgMTIuODMzMyA1MC4zMzM0IDEyLjgzMzNDNzAuOTU4NCAxMi44MzMzIDg3LjgzMzQgMjkuNzA4MyA4Ny44MzM0IDUwLjMzMzNDODcuODMzNCA3MC45NTgzIDcwLjk1ODQgODcuODMzMyA1MC4zMzM0IDg3LjgzMzNaIiBmaWxsPSIjMTgxQTFDIi8+CjxwYXRoIGQ9Ik01MC4zMzI4IDE5LjA4MzNINDQuMDgyOFY1Ni41ODMySDc1LjMzMjhWNTAuMzMzMkg1MC4zMzI4VjE5LjA4MzNaIiBmaWxsPSIjMTgxQTFDIi8+Cjwvc3ZnPgo=";
@@ -21951,12 +22027,12 @@ const formatTime = (ms = 0) => {
   return timeParts.join(':');
 };
 
-const componentName$c = getComponentName$1('timer');
+const componentName$d = getComponentName$1('timer');
 
 const observedAttributes = ['seconds', 'hide-icon', 'paused'];
 
 const BaseClass$5 = createBaseClass$1({
-  componentName: componentName$c,
+  componentName: componentName$d,
   baseSelector: ':host > .wrapper',
 });
 
@@ -22140,44 +22216,44 @@ const TimerClass = compose$1(
 )(RawTimer);
 
 const globalRefs$v = getThemeRefs$1(globals);
-const vars$S = TimerClass.cssVarList;
+const vars$T = TimerClass.cssVarList;
 
 const timer = {
-  [vars$S.hostDirection]: globalRefs$v.direction,
-  [vars$S.gap]: '0.25em',
-  [vars$S.fontFamily]: globalRefs$v.fonts.font1.family,
-  [vars$S.minHeight]: '1.5em',
-  [vars$S.lineHeight]: '1em',
-  [vars$S.fontWeight]: globalRefs$v.fonts.font1.fontWeight,
-  [vars$S.textColor]: globalRefs$v.colors.surface.contrast,
-  [vars$S.iconColor]: globalRefs$v.colors.surface.contrast,
-  [vars$S.iconSize]: '1em',
+  [vars$T.hostDirection]: globalRefs$v.direction,
+  [vars$T.gap]: '0.25em',
+  [vars$T.fontFamily]: globalRefs$v.fonts.font1.family,
+  [vars$T.minHeight]: '1.5em',
+  [vars$T.lineHeight]: '1em',
+  [vars$T.fontWeight]: globalRefs$v.fonts.font1.fontWeight,
+  [vars$T.textColor]: globalRefs$v.colors.surface.contrast,
+  [vars$T.iconColor]: globalRefs$v.colors.surface.contrast,
+  [vars$T.iconSize]: '1em',
 
   size: {
-    xs: { [vars$S.fontSize]: '12px' },
-    sm: { [vars$S.fontSize]: '14px' },
-    md: { [vars$S.fontSize]: '16px' },
-    lg: { [vars$S.fontSize]: '18px' },
+    xs: { [vars$T.fontSize]: '12px' },
+    sm: { [vars$T.fontSize]: '14px' },
+    md: { [vars$T.fontSize]: '16px' },
+    lg: { [vars$T.fontSize]: '18px' },
   },
 
   textAlign: {
-    right: { [vars$S.textAlign]: 'right' },
-    left: { [vars$S.textAlign]: 'left' },
-    center: { [vars$S.textAlign]: 'center' },
+    right: { [vars$T.textAlign]: 'right' },
+    left: { [vars$T.textAlign]: 'left' },
+    center: { [vars$T.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$S.hostWidth]: '100%',
+    [vars$T.hostWidth]: '100%',
   },
 };
 
 var timer$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: timer,
-  vars: vars$S
+  vars: vars$T
 });
 
-const componentName$b = getComponentName$1('timer-button');
+const componentName$c = getComponentName$1('timer-button');
 
 const buttonAttrs = [
   'button-variant',
@@ -22208,7 +22284,7 @@ const mapTimerAttrs = {
 };
 
 const BaseClass$4 = createBaseClass$1({
-  componentName: componentName$b,
+  componentName: componentName$c,
   baseSelector: ':host > div',
 });
 
@@ -22317,30 +22393,30 @@ const TimerButtonClass = compose$1(
 )(RawTimerButton);
 
 const globalRefs$u = getThemeRefs$1(globals);
-const vars$R = TimerButtonClass.cssVarList;
+const vars$S = TimerButtonClass.cssVarList;
 
 const timerButton = {
-  [vars$R.gap]: globalRefs$u.spacing.sm,
-  [vars$R.flexDirection]: 'column',
+  [vars$S.gap]: globalRefs$u.spacing.sm,
+  [vars$S.flexDirection]: 'column',
 
   _horizontal: {
-    [vars$R.flexDirection]: 'row',
+    [vars$S.flexDirection]: 'row',
   },
 
   _fullWidth: {
-    [vars$R.hostWidth]: '100%',
+    [vars$S.hostWidth]: '100%',
   },
 };
 
 var timerButton$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: timerButton,
-  vars: vars$R
+  vars: vars$S
 });
 
-const componentName$a = getComponentName$1('password-strength');
+const componentName$b = getComponentName$1('password-strength');
 class RawPasswordStrength extends createBaseClass$1({
-  componentName: componentName$a,
+  componentName: componentName$b,
   baseSelector: ':host > .wrapper',
 }) {
   static get observedAttributes() {
@@ -22531,22 +22607,22 @@ const passwordStrength = {
   }
 };
 
-const vars$Q = {
+const vars$R = {
   ...compVars$6,
 };
 
 var passwordStrength$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: passwordStrength,
-  vars: vars$Q
+  vars: vars$R
 });
 
 var chevronIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iYmxhY2siIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xNy4yMTkzIDkuMjcyODNDMTcuNjU4NCA4Ljg3OTEyIDE4LjMzMzQgOC45MTU4NyAxOC43MjcyIDkuMzU0OTJDMTkuMTIwOSA5Ljc5Mzk3IDE5LjA4NDEgMTAuNDY5MSAxOC42NDUxIDEwLjg2MjhDMTguNjQ1MSAxMC44NjI4IDEzLjA0NTcgMTYuMDAyMiAxMi42NCAxNi4zNjZDMTIuMjM0MyAxNi43Mjk4IDExLjc2MDggMTYuNzI5OCAxMS4zNTUyIDE2LjM2Nkw1LjM1NDkyIDEwLjg2MjhDNC45MTU4NyAxMC40NjkxIDQuODc5MTIgOS43OTM5NyA1LjI3MjgzIDkuMzU0OTJDNS42NjY1NSA4LjkxNTg3IDYuMzQxNjQgOC44NzkxMiA2Ljc4MDY5IDkuMjcyODNMMTIgMTQuMTM2OEwxNy4yMTkzIDkuMjcyODNaIi8+Cjwvc3ZnPgo=";
 
-const componentName$9 = getComponentName$1('collapsible-container');
+const componentName$a = getComponentName$1('collapsible-container');
 
 class RawCollapsibleContainer extends createBaseClass$1({
-  componentName: componentName$9,
+  componentName: componentName$a,
   baseSelector: 'slot',
 }) {
   static get observedAttributes() {
@@ -22781,7 +22857,7 @@ const [helperTheme$4, helperRefs$4, helperVars$4] = createHelperVars$1(
   {
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$9
+  componentName$a
 );
 
 const { shadowColor: shadowColor$4 } = helperRefs$4;
@@ -22881,7 +22957,7 @@ const collapsibleContainer = {
   }
 };
 
-const vars$P = {
+const vars$Q = {
   ...compVars$5,
   ...helperVars$4,
 };
@@ -22889,10 +22965,10 @@ const vars$P = {
 var collapsibleContainer$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: collapsibleContainer,
-  vars: vars$P
+  vars: vars$Q
 });
 
-const componentName$8 = getComponentName$1('recovery-codes');
+const componentName$9 = getComponentName$1('recovery-codes');
 
 const itemRenderer$2 = ({ value }, _, ref) => {
   return `
@@ -22903,7 +22979,7 @@ const itemRenderer$2 = ({ value }, _, ref) => {
 };
 
 class RawRecoveryCodes extends createBaseClass$1({
-  componentName: componentName$8,
+  componentName: componentName$9,
   baseSelector: ':host > div',
 }) {
   static get observedAttributes() {
@@ -23043,35 +23119,35 @@ const RecoveryCodesClass = compose$1(
 )(RawRecoveryCodes);
 
 const globalRefs$r = getThemeRefs$1(globals);
-const vars$O = RecoveryCodesClass.cssVarList;
+const vars$P = RecoveryCodesClass.cssVarList;
 const textVars = TextClass.cssVarList;
 
 const recoveryCodes = {
-  [vars$O.hostMinWidth]: '190px',
-  [vars$O.hostDirection]: globalRefs$r.direction,
-  [vars$O.iconColor]: useVar$1(textVars.textColor),
-  [vars$O.iconSize]: useVar$1(textVars.fontSize),
-  [vars$O.iconGap]: '8px',
-  [vars$O.bulletGap]: '0.35em',
+  [vars$P.hostMinWidth]: '190px',
+  [vars$P.hostDirection]: globalRefs$r.direction,
+  [vars$P.iconColor]: useVar$1(textVars.textColor),
+  [vars$P.iconSize]: useVar$1(textVars.fontSize),
+  [vars$P.iconGap]: '8px',
+  [vars$P.bulletGap]: '0.35em',
 
   textAlign: {
-    right: { [vars$O.textAlign]: 'flex-end' },
-    left: { [vars$O.textAlign]: 'flex-start' },
-    center: { [vars$O.textAlign]: 'center' },
+    right: { [vars$P.textAlign]: 'flex-end' },
+    left: { [vars$P.textAlign]: 'flex-start' },
+    center: { [vars$P.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$O.hostWidth]: '100%',
+    [vars$P.hostWidth]: '100%',
   },
 };
 
 var recoveryCodes$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: recoveryCodes,
-  vars: vars$O
+  vars: vars$P
 });
 
-const componentName$7 = getComponentName$1('outbound-apps');
+const componentName$8 = getComponentName$1('outbound-apps');
 
 const itemRenderer$1 = (
   { name, description, logo, appId, isConnected },
@@ -23117,7 +23193,7 @@ const itemRenderer$1 = (
 };
 
 const BaseClass$3 = createBaseClass$1({
-  componentName: componentName$7,
+  componentName: componentName$8,
   baseSelector: 'descope-list',
 });
 
@@ -23293,36 +23369,36 @@ const OutboundAppsClass = compose$1(
   componentNameValidationMixin$1,
 )(RawOutboundAppsClass);
 
-const vars$N = OutboundAppsClass.cssVarList;
+const vars$O = OutboundAppsClass.cssVarList;
 
 const outboundApps = {
-  [vars$N.iconColor]: globals.colors.primary.main,
-  [vars$N.errorIconColor]: globals.colors.error.main,
+  [vars$O.iconColor]: globals.colors.primary.main,
+  [vars$O.errorIconColor]: globals.colors.error.main,
 
-  [vars$N.appLogoGap]: globals.spacing.md,
-  [vars$N.contentGap]: globals.spacing.xs,
+  [vars$O.appLogoGap]: globals.spacing.md,
+  [vars$O.contentGap]: globals.spacing.xs,
 
   // list-item overrides
-  [vars$N.itemCursor]: 'default',
-  [vars$N.itemOutline]: 'none',
-  [vars$N.itemBorderColor]: 'transparent',
+  [vars$O.itemCursor]: 'default',
+  [vars$O.itemOutline]: 'none',
+  [vars$O.itemBorderColor]: 'transparent',
 
-  [vars$N.listPadding]: '0',
-  [vars$N.listBorderWidth]: '0',
-  [vars$N.listBoxShadow]: 'none',
+  [vars$O.listPadding]: '0',
+  [vars$O.listBorderWidth]: '0',
+  [vars$O.listBoxShadow]: 'none',
 
   size: {
     xs: {
-      [vars$N.fontSize]: '0.6em',
+      [vars$O.fontSize]: '0.6em',
     },
     sm: {
-      [vars$N.fontSize]: '0.8em',
+      [vars$O.fontSize]: '0.8em',
     },
     md: {
-      [vars$N.fontSize]: '1em',
+      [vars$O.fontSize]: '1em',
     },
     lg: {
-      [vars$N.fontSize]: '1.5em',
+      [vars$O.fontSize]: '1.5em',
     },
   },
 };
@@ -23330,13 +23406,13 @@ const outboundApps = {
 var outboundApps$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: outboundApps,
-  vars: vars$N
+  vars: vars$O
 });
 
-const componentName$6 = getComponentName$1('outbound-app-button');
+const componentName$7 = getComponentName$1('outbound-app-button');
 
 class RawOutboundAppButton extends createBaseClass$1({
-  componentName: componentName$6,
+  componentName: componentName$7,
   baseSelector: ':host > descope-button',
 }) {
   static get observedAttributes() {
@@ -23435,12 +23511,12 @@ const outboundAppButton = {
   },
 };
 
-const vars$M = compVars$4;
+const vars$N = compVars$4;
 
 var outboundAppButton$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: outboundAppButton,
-  vars: vars$M
+  vars: vars$N
 });
 
 var desktopDeviceIconLight = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwIDE4QzIxLjEgMTggMjEuOTkgMTcuMSAyMS45OSAxNkwyMiA2QzIyIDQuOSAyMS4xIDQgMjAgNEg0QzIuOSA0IDIgNC45IDIgNlYxNkMyIDE3LjEgMi45IDE4IDQgMThIMFYyMEgyNFYxOEgyMFpNNCA2SDIwVjE2SDRWNloiIGZpbGw9IiM2MzZDNzQiLz4KPC9zdmc+Cg==";
@@ -23518,7 +23594,7 @@ const getDeviceIcon = (deviceType) => {
   };
 };
 
-const componentName$5 = getComponentName$1('trusted-devices');
+const componentName$6 = getComponentName$1('trusted-devices');
 
 const itemRenderer = (
   { id, name, lastLoginDate, deviceType, isCurrent },
@@ -23607,7 +23683,7 @@ const itemRenderer = (
 };
 
 const BaseClass$2 = createBaseClass$1({
-  componentName: componentName$5,
+  componentName: componentName$6,
   baseSelector: ListClass.componentName,
 });
 
@@ -23897,51 +23973,51 @@ const TrustedDevicesClass = compose$1(
   componentNameValidationMixin$1,
 )(RawTrustedDevicesClass);
 
-const vars$L = TrustedDevicesClass.cssVarList;
+const vars$M = TrustedDevicesClass.cssVarList;
 
 const TrustedDevices = {
-  [vars$L.hostWidth]: 'auto',
-  [vars$L.hostWidth]: '300px',
-  [vars$L.hostMinWidth]: '300px',
-
-  [vars$L.listBackgroundColor]: 'transparent',
-  [vars$L.listBorderRadius]: '0',
-  [vars$L.listBorderWidth]: '0',
-  [vars$L.listPadding]: '0',
-  [vars$L.listBoxShadow]: 'none',
-  [vars$L.listItemsGap]: globals.spacing.lg,
-
-  [vars$L.itemBorderColor]: globals.colors.surface.light,
-  [vars$L.itemVerticalPadding]: globals.spacing.lg,
-  [vars$L.itemHorizontalPadding]: globals.spacing.lg,
-  [vars$L.itemBorderRadius]: globals.radius.xs,
-  [vars$L.itemOutline]: 'transparent',
-  [vars$L.itemBackgroundColor]: 'transparent',
-  [vars$L.itemCursor]: 'default',
-  [vars$L.itemContentGap]: globals.spacing.sm,
-
-  [vars$L.badgeBorderColor]: globals.colors.surface.light,
-  [vars$L.badgeTextColor]: globals.colors.surface.dark,
-  [vars$L.badgeBorderRadius]: globals.radius.xs,
-  [vars$L.badgeBackgroundColor]: globals.colors.surface.main,
-
-  [vars$L.devicePanelGap]: globals.spacing.md,
-  [vars$L.deviceIconGap]: globals.spacing.md,
-  [vars$L.deviceIconSize]: '24px',
-  [vars$L.lastLoginLabelGap]: globals.spacing.xs,
+  [vars$M.hostWidth]: 'auto',
+  [vars$M.hostWidth]: '300px',
+  [vars$M.hostMinWidth]: '300px',
+
+  [vars$M.listBackgroundColor]: 'transparent',
+  [vars$M.listBorderRadius]: '0',
+  [vars$M.listBorderWidth]: '0',
+  [vars$M.listPadding]: '0',
+  [vars$M.listBoxShadow]: 'none',
+  [vars$M.listItemsGap]: globals.spacing.lg,
+
+  [vars$M.itemBorderColor]: globals.colors.surface.light,
+  [vars$M.itemVerticalPadding]: globals.spacing.lg,
+  [vars$M.itemHorizontalPadding]: globals.spacing.lg,
+  [vars$M.itemBorderRadius]: globals.radius.xs,
+  [vars$M.itemOutline]: 'transparent',
+  [vars$M.itemBackgroundColor]: 'transparent',
+  [vars$M.itemCursor]: 'default',
+  [vars$M.itemContentGap]: globals.spacing.sm,
+
+  [vars$M.badgeBorderColor]: globals.colors.surface.light,
+  [vars$M.badgeTextColor]: globals.colors.surface.dark,
+  [vars$M.badgeBorderRadius]: globals.radius.xs,
+  [vars$M.badgeBackgroundColor]: globals.colors.surface.main,
+
+  [vars$M.devicePanelGap]: globals.spacing.md,
+  [vars$M.deviceIconGap]: globals.spacing.md,
+  [vars$M.deviceIconSize]: '24px',
+  [vars$M.lastLoginLabelGap]: globals.spacing.xs,
 
   _fullWidth: {
-    [vars$L.hostWidth]: '100%',
+    [vars$M.hostWidth]: '100%',
   },
 };
 
 var trustedDevices = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: TrustedDevices,
-  vars: vars$L
+  vars: vars$M
 });
 
-const componentName$4 = getComponentName$1('tooltip');
+const componentName$5 = getComponentName$1('tooltip');
 
 const tooltipAttrs = [
   'text',
@@ -23952,7 +24028,7 @@ const tooltipAttrs = [
 ];
 
 const BaseClass$1 = createBaseClass$1({
-  componentName: componentName$4,
+  componentName: componentName$5,
   baseSelector: 'vaadin-tooltip',
 });
 
@@ -24017,7 +24093,7 @@ class RawTooltip extends BaseClass$1 {
     this.tooltip.style.overflow = 'hidden';
     this.tooltip.style.position = 'absolute';
   }
-  
+
   #revealWrappedParts() {
     this.tooltip.style.width = '100%';
     this.tooltip.style.height = '100%';
@@ -24042,9 +24118,7 @@ class RawTooltip extends BaseClass$1 {
   #setTooltipTarget() {
     if (!this.children?.length) return;
 
-    let ele = Array.from(this.children).find(
-      (child) => child !== this.tooltip,
-    );
+    let ele = Array.from(this.children).find((child) => child !== this.tooltip);
 
     if (!ele) return;
 
@@ -24064,6 +24138,10 @@ class RawTooltip extends BaseClass$1 {
     return enrichedText;
   }
 
+  get srLabel() {
+    return this.tooltip?.querySelector('[slot="sr-label"]');
+  }
+
   #initTooltipTextComponent() {
     if (!this.overlayContentNode) return;
 
@@ -24074,6 +24152,12 @@ class RawTooltip extends BaseClass$1 {
 
       this.overlayContentNode.appendChild(this.textComponent);
 
+      // An empty sr-label with role="tooltip" fails accessibility checks.
+      // Hide it when there's no tooltip text; vaadin handles populating it when text is present.
+      if (this.srLabel && !this.tooltipText) {
+        this.srLabel.setAttribute('aria-hidden', 'true');
+      }
+
       forwardAttrs$1(this, this.textComponent, {
         includeAttrs: ['readonly'],
       });
@@ -24109,7 +24193,15 @@ class RawTooltip extends BaseClass$1 {
 
   #updateText(value) {
     if (!this.textComponent) return;
-    this.textComponent.textContent = value?.trim();
+    const trimmedValue = (value ?? '').trim();
+    this.textComponent.textContent = trimmedValue;
+    if (this.srLabel) {
+      if (trimmedValue) {
+        this.srLabel.removeAttribute('aria-hidden');
+      } else {
+        this.srLabel.setAttribute('aria-hidden', 'true');
+      }
+    }
   }
 
   attributeChangedCallback(attrName, oldValue, newValue) {
@@ -24121,7 +24213,7 @@ class RawTooltip extends BaseClass$1 {
       }
 
       if (attrName === 'opened') {
-        this.#handleTooltipVisibility(attrName, newValue);
+        this.#handleTooltipVisibility();
       }
     }
   }
@@ -24185,13 +24277,13 @@ const TooltipClass = compose$1(
 )(RawTooltip);
 
 const globalRefs$q = getThemeRefs$1(globals);
-const vars$K = TooltipClass.cssVarList;
+const vars$L = TooltipClass.cssVarList;
 
 const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars$1(
   {
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$4
+  componentName$5
 );
 
 const { shadowColor: shadowColor$3 } = helperRefs$3;
@@ -24199,36 +24291,36 @@ const defaultShadow = `${globalRefs$q.shadow.wide.sm} ${shadowColor$3}, ${global
 
 const tooltip = {
   ...helperTheme$3,
-  [vars$K.fontFamily]: globalRefs$q.fonts.font1.family,
-  [vars$K.fontSize]: globals.typography.body2.size,
-  [vars$K.fontWeight]: globals.typography.body2.weight,
-  [vars$K.textColor]: globalRefs$q.colors.surface.contrast,
-  [vars$K.hostDirection]: globalRefs$q.direction,
-  [vars$K.backgroundColor]: globalRefs$q.colors.surface.main,
-  [vars$K.borderColor]: globalRefs$q.colors.surface.light,
-  [vars$K.borderStyle]: 'solid',
-  [vars$K.borderWidth]: globalRefs$q.border.xs,
-  [vars$K.borderRadius]: globalRefs$q.radius.xs,
-  [vars$K.horizontalPadding]: globalRefs$q.spacing.md,
-  [vars$K.verticalPadding]: globalRefs$q.spacing.sm,
-  [vars$K.boxShadow]: defaultShadow,
+  [vars$L.fontFamily]: globalRefs$q.fonts.font1.family,
+  [vars$L.fontSize]: globals.typography.body2.size,
+  [vars$L.fontWeight]: globals.typography.body2.weight,
+  [vars$L.textColor]: globalRefs$q.colors.surface.contrast,
+  [vars$L.hostDirection]: globalRefs$q.direction,
+  [vars$L.backgroundColor]: globalRefs$q.colors.surface.main,
+  [vars$L.borderColor]: globalRefs$q.colors.surface.light,
+  [vars$L.borderStyle]: 'solid',
+  [vars$L.borderWidth]: globalRefs$q.border.xs,
+  [vars$L.borderRadius]: globalRefs$q.radius.xs,
+  [vars$L.horizontalPadding]: globalRefs$q.spacing.md,
+  [vars$L.verticalPadding]: globalRefs$q.spacing.sm,
+  [vars$L.boxShadow]: defaultShadow,
 
   shadow: {
     sm: {
-      [vars$K.boxShadow]: defaultShadow,
+      [vars$L.boxShadow]: defaultShadow,
     },
     md: {
-      [vars$K.boxShadow]: `${globalRefs$q.shadow.wide.md} ${shadowColor$3}, ${globalRefs$q.shadow.narrow.md} ${shadowColor$3}`,
+      [vars$L.boxShadow]: `${globalRefs$q.shadow.wide.md} ${shadowColor$3}, ${globalRefs$q.shadow.narrow.md} ${shadowColor$3}`,
     },
     lg: {
-      [vars$K.boxShadow]: `${globalRefs$q.shadow.wide.lg} ${shadowColor$3}, ${globalRefs$q.shadow.narrow.lg} ${shadowColor$3}`,
+      [vars$L.boxShadow]: `${globalRefs$q.shadow.wide.lg} ${shadowColor$3}, ${globalRefs$q.shadow.narrow.lg} ${shadowColor$3}`,
     },
     xl: {
-      [vars$K.boxShadow]: `${globalRefs$q.shadow.wide.xl} ${shadowColor$3}, ${globalRefs$q.shadow.narrow.xl} ${shadowColor$3}`,
+      [vars$L.boxShadow]: `${globalRefs$q.shadow.wide.xl} ${shadowColor$3}, ${globalRefs$q.shadow.narrow.xl} ${shadowColor$3}`,
     },
     '2xl': {
       [helperVars$3.shadowColor]: '#00000050', // mimic daisyUI shadow settings
-      [vars$K.boxShadow]: `${globalRefs$q.shadow.wide['2xl']} ${shadowColor$3}`,
+      [vars$L.boxShadow]: `${globalRefs$q.shadow.wide['2xl']} ${shadowColor$3}`,
     },
   },
 };
@@ -24236,7 +24328,7 @@ const tooltip = {
 var tooltip$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: tooltip,
-  vars: vars$K
+  vars: vars$L
 });
 
 // Data service for country/subdivision/city data.
@@ -24289,7 +24381,7 @@ const fetchLabels = async (baseUrl) => {
 const fetchCitiesForCountry = async (countryIso2, baseUrl) =>
   fetchJson(`${baseUrl}/countries/${countryIso2}/cities.json`);
 
-const componentName$3 = getComponentName$1(
+const componentName$4 = getComponentName$1(
   'country-subdivision-city-field-internal',
 );
 
@@ -24349,7 +24441,7 @@ const comboBoxHTML = (id) =>
 // --- Base class ---
 
 const BaseInputClass = createBaseInputClass$1({
-  componentName: componentName$3,
+  componentName: componentName$4,
   baseSelector: '',
 });
 
@@ -24525,7 +24617,7 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass {
       if (e.isTrusted) {
         const firstInvalidCombo = this.#allCombos.find(
           (combo) =>
-            !combo.classList.contains(`${componentName$3}-hidden`) &&
+            !combo.classList.contains(`${componentName$4}-hidden`) &&
             !combo.checkValidity(),
         );
         (firstInvalidCombo || this.#getFirstVisibleCombo())?.focus();
@@ -24622,7 +24714,7 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass {
   // Iterate in reverse so reportValidity's focus() lands on the first invalid combo last.
   #handleInvalidCombos() {
     for (const combo of [...this.#allCombos].reverse()) {
-      if (combo.classList.contains(`${componentName$3}-hidden`)) continue;
+      if (combo.classList.contains(`${componentName$4}-hidden`)) continue;
       if (!combo.checkValidity()) combo.reportValidity();
     }
   }
@@ -24895,7 +24987,7 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass {
       if (!this.#pendingValue && this.#defaultCountry)
         this.#onCountrySelected(this.#defaultCountry);
     } catch (e) {
-      console.error(`[${componentName$3}] Failed to load countries`, e);
+      console.error(`[${componentName$4}] Failed to load countries`, e);
     } finally {
       this.#countryComboBox.removeAttribute('loading');
     }
@@ -24920,7 +25012,7 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass {
       }
     } catch (e) {
       console.error(
-        `[${componentName$3}] Failed to load subdivisions for ${countryIso2}`,
+        `[${componentName$4}] Failed to load subdivisions for ${countryIso2}`,
         e,
       );
       this.#subdivisionVisible = false;
@@ -24948,7 +25040,7 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass {
       }
     } catch (e) {
       console.error(
-        `[${componentName$3}] Failed to load cities for ${countryIso2}${stateCode ? `/${stateCode}` : ''}`,
+        `[${componentName$4}] Failed to load cities for ${countryIso2}${stateCode ? `/${stateCode}` : ''}`,
         e,
       );
     } finally {
@@ -25040,7 +25132,7 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass {
   }
 
   #setVisible(el, visible) {
-    el?.classList.toggle(`${componentName$3}-hidden`, !visible);
+    el?.classList.toggle(`${componentName$4}-hidden`, !visible);
   }
 
   #updateRequiredOnCombos() {
@@ -25110,7 +25202,7 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass {
 
   #getFirstVisibleCombo() {
     return this.#allCombos.find(
-      (combo) => !combo.classList.contains(`${componentName$3}-hidden`),
+      (combo) => !combo.classList.contains(`${componentName$4}-hidden`),
     );
   }
 
@@ -25127,7 +25219,7 @@ const CountrySubdivisionCityFieldInternal = compose$1()(
   RawCountrySubdivisionCityFieldInternal,
 );
 
-const componentName$2 = getComponentName$1('country-subdivision-city-field');
+const componentName$3 = getComponentName$1('country-subdivision-city-field');
 
 const customMixin = (superclass) =>
   class CountrySubdivisionCityFieldMixinClass extends superclass {
@@ -25137,15 +25229,15 @@ const customMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$3}
+      <${componentName$4}
         tabindex="-1"
-      ></${componentName$3}>
+      ></${componentName$4}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
       this.inputElement = this.shadowRoot.querySelector(
-        componentName$3,
+        componentName$4,
       );
 
       forwardAttrs$1(this, this.inputElement, {
@@ -25182,11 +25274,11 @@ const customMixin = (superclass) =>
 const host = { selector: () => ':host' };
 
 const internalWrapper = {
-  selector: `${componentName$3} > .wrapper`,
+  selector: `${componentName$4} > .wrapper`,
 };
 
 const internalComboBoxes = {
-  selector: `${componentName$3} > .wrapper > descope-combo-box`,
+  selector: `${componentName$4} > .wrapper > descope-combo-box`,
 };
 
 const CountrySubdivisionCityFieldClass = compose$1(
@@ -25236,7 +25328,7 @@ const CountrySubdivisionCityFieldClass = compose$1(
     width: 100%;
   }
 
-  ${componentName$3} {
+  ${componentName$4} {
     display: inline-block;
     box-sizing: border-box;
     user-select: none;
@@ -25244,47 +25336,241 @@ const CountrySubdivisionCityFieldClass = compose$1(
     max-width: 100%;
   }
 
-  ${componentName$3} > .wrapper {
+  ${componentName$4} > .wrapper {
     display: flex;
     width: 100%;
     flex-wrap: wrap;
   }
 
-  .${componentName$3}-hidden {
+  .${componentName$4}-hidden {
     display: none;
   }
 
 `,
     excludeAttrsSync: ['tabindex', 'style', 'error-message'],
-    componentName: componentName$2,
+    componentName: componentName$3,
   }),
 );
 
-const vars$J = CountrySubdivisionCityFieldClass.cssVarList;
+const vars$K = CountrySubdivisionCityFieldClass.cssVarList;
 
 const countrySubdivisionCityField = {
-  [vars$J.hostWidth]: refs$1.width,
-  [vars$J.hostDirection]: refs$1.direction,
-  [vars$J.flexDirection]: 'column',
-  [vars$J.flexGap]: '0.5em',
-  [vars$J.itemAlignment]: 'stretch',
-  [vars$J.itemFlexGrow]: '0',
-  [vars$J.itemWidth]: 'auto',
+  [vars$K.hostWidth]: refs$1.width,
+  [vars$K.hostDirection]: refs$1.direction,
+  [vars$K.flexDirection]: 'column',
+  [vars$K.flexGap]: '0.5em',
+  [vars$K.itemAlignment]: 'stretch',
+  [vars$K.itemFlexGrow]: '0',
+  [vars$K.itemWidth]: 'auto',
 
   _fullWidth: {
-    [vars$J.hostWidth]: '100%',
+    [vars$K.hostWidth]: '100%',
   },
 
   _horizontal: {
-    [vars$J.flexDirection]: 'row',
-    [vars$J.itemFlexGrow]: '1',
+    [vars$K.flexDirection]: 'row',
+    [vars$K.itemFlexGrow]: '1',
   },
 };
 
 var countrySubdivisionCityField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: countrySubdivisionCityField,
-  vars: vars$J
+  vars: vars$K
+});
+
+const componentName$2 = getComponentName$1('attachment');
+
+const ATTACHMENT_POSITIONS = [
+  'top-end',
+  'top-start',
+  'top-center',
+  'bottom-start',
+  'bottom-end',
+  'bottom-center',
+];
+
+const DEFAULT_POSITION = ATTACHMENT_POSITIONS[0];
+
+class RawAttachment extends createBaseClass$1({
+  componentName: componentName$2,
+  baseSelector: ':host > .wrapper',
+}) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+      <div class="wrapper">
+        <slot></slot>
+        <div class="attachment-container">
+          <slot name="attachment"></slot>
+        </div>
+      </div>
+    `;
+
+    this.defaultSlot = this.shadowRoot.querySelector('slot:not([name])');
+    this.attachmentSlot = this.shadowRoot.querySelector(
+      'slot[name="attachment"]',
+    );
+  }
+
+  static get observedAttributes() {
+    return [...(super.observedAttributes || []), 'position'];
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    super.attributeChangedCallback?.(name, oldVal, newVal);
+    if (name === 'position' && oldVal !== newVal) {
+      this.#handlePositionChange();
+    }
+  }
+
+  init() {
+    super.init?.();
+
+    injectStyle(
+      `
+      :host {
+        display: inline-block;
+      }
+      .wrapper {
+        position: relative;
+        display: inline-flex;
+      }
+      .attachment-container {
+        position: absolute;
+        z-index: 1;
+        pointer-events: none;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        container-type: inline-size;
+      }
+      :host(.hidden) {
+        display: none;
+      }
+      `,
+      this,
+    );
+
+    this.#handlePositionChange();
+
+    this.defaultSlot.addEventListener('slotchange', () => {
+      this.#setVisibility();
+      this.#syncDirection();
+    });
+
+    window.requestAnimationFrame(() => {
+      this.#setVisibility();
+      this.#syncDirection();
+    });
+  }
+
+  #setVisibility() {
+    const hasAnchor = this.defaultSlot?.assignedElements()?.length > 0;
+    this.classList.toggle('hidden', !hasAnchor);
+  }
+
+  #syncDirection() {
+    const child = this.defaultSlot?.assignedElements()?.[0];
+    if (!child) return;
+
+    const { direction } = window.getComputedStyle(child);
+
+    // currently we support direction sync only for web-components-ui
+    // elements, which support st-host-direction attribute.
+    this.attachmentSlot?.assignedElements().forEach((el) => {
+      el.setAttribute('st-host-direction', direction);
+    });
+  }
+
+  get offsetX() {
+    return this.getAttribute('offset-x') || '0px';
+  }
+
+  get offsetY() {
+    return this.getAttribute('offset-y') || '0px';
+  }
+
+  #handlePositionChange() {
+    const pos = this.getAttribute('position');
+    if (!ATTACHMENT_POSITIONS.includes(pos)) {
+      this.setAttribute('position', DEFAULT_POSITION);
+    }
+  }
+}
+
+const attachmentContainer = { selector: () => '.attachment-container' };
+
+const AttachmentClass = compose$1(
+  createStyleMixin$1({
+    mappings: {
+      transform: { ...attachmentContainer },
+      justifyContent: { ...attachmentContainer },
+      maxWidth: { ...attachmentContainer },
+      top: { ...attachmentContainer },
+      bottom: { ...attachmentContainer },
+      left: { ...attachmentContainer },
+      right: { ...attachmentContainer },
+      offsetX: {},
+      offsetY: {},
+    },
+  }),
+  draggableMixin$1,
+  componentNameValidationMixin$1,
+)(RawAttachment);
+
+const vars$J = AttachmentClass.cssVarList;
+
+const defaultOffset = '8px';
+const insetCalc = `calc(${defaultOffset} + var(${vars$J.offsetX}))`;
+
+const attachment = {
+  [vars$J.maxWidth]: `calc(100% - 2 * ${defaultOffset})`,
+
+  position: {
+    'top-start': {
+      [vars$J.transform]: 'translateY(-50%)',
+      [vars$J.justifyContent]: 'start',
+      [vars$J.left]: insetCalc,
+      [vars$J.top]: useVar$1(vars$J.offsetY),
+    },
+    'top-center': {
+      [vars$J.transform]: 'translate(-50%, -50%)',
+      [vars$J.justifyContent]: 'center',
+      [vars$J.top]: useVar$1(vars$J.offsetY),
+      [vars$J.left]: '50%',
+    },
+    'top-end': {
+      [vars$J.transform]: 'translateY(-50%)',
+      [vars$J.justifyContent]: 'end',
+      [vars$J.right]: insetCalc,
+      [vars$J.top]: useVar$1(vars$J.offsetY),
+    },
+    'bottom-start': {
+      [vars$J.transform]: 'translateY(50%)',
+      [vars$J.justifyContent]: 'start',
+      [vars$J.left]: insetCalc,
+      [vars$J.bottom]: useVar$1(vars$J.offsetY),
+    },
+    'bottom-center': {
+      [vars$J.bottom]: useVar$1(vars$J.offsetY),
+      [vars$J.transform]: 'translate(-50%, 50%)',
+      [vars$J.justifyContent]: 'center',
+      [vars$J.left]: '50%',
+    },
+    'bottom-end': {
+      [vars$J.transform]: 'translateY(50%)',
+      [vars$J.justifyContent]: 'end',
+      [vars$J.right]: insetCalc,
+      [vars$J.bottom]: useVar$1(vars$J.offsetY),
+    },
+  },
+};
+
+var attachment$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: attachment
 });
 
 const componentName$1 = getComponentName('input-wrapper');
@@ -25839,7 +26125,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
     horizontalAlignment,
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$1g
+  componentName$1h
 );
 
 const { shadowColor: shadowColor$2 } = helperRefs$2;
@@ -25994,7 +26280,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
     thickness: '2px',
     spacing: '10px',
   },
-  componentName$18
+  componentName$19
 );
 
 const divider = {
@@ -26145,7 +26431,7 @@ const [helperTheme, helperRefs, helperVars] = createHelperVars(
       },
     },
   },
-  componentName$1h
+  componentName$1i
 );
 
 const loaderRadial = {
@@ -26219,10 +26505,6 @@ const phoneField = {
   [vars$s.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
   [vars$s.errorMessageIconPosition]: refs.errorMessageIconPosition,
   [vars$s.errorMessageFontSize]: refs.errorMessageFontSize,
-
-  // '@overlay': {
-  // 	overlayItemBackgroundColor: 'red'
-  // }
 };
 
 var phoneField$1 = /*#__PURE__*/Object.freeze({
@@ -27295,7 +27577,7 @@ const alert = {
   [vars$2.horizontalPadding]: '0',
   [vars$2.verticalPadding]: '0',
   [vars$2.gap]: `0.5em`,
-  [vars$2.fontSize]: useVar(vars$13.fontSize),
+  [vars$2.fontSize]: useVar(vars$14.fontSize),
 
   mode: {
     error: {
@@ -27455,6 +27737,7 @@ const components = {
   outboundAppButton: outboundAppButton$1,
   trustedDevices,
   tooltip: tooltip$1,
+  attachment: attachment$1,
 };
 
 const theme = Object.keys(components).reduce(
@@ -27467,7 +27750,7 @@ const vars = Object.keys(components).reduce(
 );
 
 const defaultTheme = { globals: globals$1, components: theme };
-const themeVars = { globals: vars$15, components: vars };
+const themeVars = { globals: vars$16, components: vars };
 
 const colors = {
   surface: {
@@ -27523,34 +27806,36 @@ const darkTheme = merge({}, defaultTheme, {
   },
 });
 
-customElements.define(componentName$g, AutocompleteFieldInternal);
+customElements.define(componentName$h, AutocompleteFieldInternal);
+
+customElements.define(componentName$g, AutocompleteFieldClass);
 
-customElements.define(componentName$f, AutocompleteFieldClass);
+customElements.define(componentName$f, AddressFieldInternal);
 
-customElements.define(componentName$e, AddressFieldInternal);
+customElements.define(componentName$e, AddressFieldClass);
 
-customElements.define(componentName$d, AddressFieldClass);
+customElements.define(componentName$j, AvatarClass);
 
-customElements.define(componentName$i, AvatarClass);
+customElements.define(componentName$i, AppsListClass);
 
-customElements.define(componentName$h, AppsListClass);
+customElements.define(componentName$2, AttachmentClass);
 
-customElements.define(componentName$9, CollapsibleContainerClass);
+customElements.define(componentName$a, CollapsibleContainerClass);
 
-customElements.define(componentName$3, CountrySubdivisionCityFieldInternal);
+customElements.define(componentName$4, CountrySubdivisionCityFieldInternal);
 
-customElements.define(componentName$2, CountrySubdivisionCityFieldClass);
+customElements.define(componentName$3, CountrySubdivisionCityFieldClass);
 
-customElements.define(componentName$6, OutboundAppButtonClass);
+customElements.define(componentName$7, OutboundAppButtonClass);
 
-customElements.define(componentName$7, OutboundAppsClass);
+customElements.define(componentName$8, OutboundAppsClass);
 
-customElements.define(componentName$a, PasswordStrengthClass);
+customElements.define(componentName$b, PasswordStrengthClass);
 
 var index = /*#__PURE__*/Object.freeze({
   __proto__: null,
   PasswordStrengthClass: PasswordStrengthClass,
-  componentName: componentName$a
+  componentName: componentName$b
 });
 
 // NOTICE: This component registers with a DIFFERENT name than its file name
@@ -27657,15 +27942,15 @@ const HoneypotClass = compose$1(componentNameValidationMixin$1)(RawHoneypot);
 
 customElements.define(componentName, HoneypotClass);
 
-customElements.define(componentName$8, RecoveryCodesClass);
+customElements.define(componentName$9, RecoveryCodesClass);
 
-customElements.define(componentName$c, TimerClass);
+customElements.define(componentName$d, TimerClass);
 
-customElements.define(componentName$b, TimerButtonClass);
+customElements.define(componentName$c, TimerButtonClass);
 
-customElements.define(componentName$4, TooltipClass);
+customElements.define(componentName$5, TooltipClass);
 
-customElements.define(componentName$5, TrustedDevicesClass);
+customElements.define(componentName$6, TrustedDevicesClass);
 
 const options = {
   translations: zxcvbnEnPackage.translations,
@@ -27683,5 +27968,5 @@ var calcScore = /*#__PURE__*/Object.freeze({
   options: options
 });
 
-export { AddressFieldClass, AlertClass, AppsListClass, AutocompleteFieldClass, AvatarClass, BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CalendarClass, CheckboxClass, CodeSnippetClass, CollapsibleContainerClass, ComboBoxClass, ContainerClass, CountrySubdivisionCityFieldClass, DateFieldClass, DividerClass, EmailFieldClass, EnrichedTextClass, GridClass, HcaptchaClass, HoneypotClass, HybridFieldClass, IconClass, ImageClass, LinkClass, ListClass, ListItemClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MappingsFieldClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, OutboundAppButtonClass, OutboundAppsClass, PasscodeClass, PasswordClass, PasswordStrengthClass, PhoneFieldClass, PhoneFieldInputBoxClass, PolicyValidationClass, RadioGroupClass, RecaptchaClass, RecoveryCodesClass, SamlGroupMappingsClass, ScopesListClass, SecurityQuestionsSetupClass, SecurityQuestionsVerifyClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, ThirdPartyAppLogoClass, TimerButtonClass, TimerClass, TooltipClass, TotpImageClass, TrustedDevicesClass, UploadFileClass, UserAttributeClass, UserAuthMethodClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
+export { AddressFieldClass, AlertClass, AppsListClass, AttachmentClass, AutocompleteFieldClass, AvatarClass, BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CalendarClass, CheckboxClass, CodeSnippetClass, CollapsibleContainerClass, ComboBoxClass, ContainerClass, CountrySubdivisionCityFieldClass, DateFieldClass, DividerClass, EmailFieldClass, EnrichedTextClass, GridClass, HcaptchaClass, HoneypotClass, HybridFieldClass, IconClass, ImageClass, LinkClass, ListClass, ListItemClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MappingsFieldClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, OutboundAppButtonClass, OutboundAppsClass, PasscodeClass, PasswordClass, PasswordStrengthClass, PhoneFieldClass, PhoneFieldInputBoxClass, PolicyValidationClass, RadioGroupClass, RecaptchaClass, RecoveryCodesClass, SamlGroupMappingsClass, ScopesListClass, SecurityQuestionsSetupClass, SecurityQuestionsVerifyClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, ThirdPartyAppLogoClass, TimerButtonClass, TimerClass, TooltipClass, TotpImageClass, TrustedDevicesClass, UploadFileClass, UserAttributeClass, UserAuthMethodClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
 //# sourceMappingURL=index.esm.js.map