@descope/web-components-ui 3.0.5 → 3.0.7

package/dist/cjs/index.cjs.js

@@ -1263,7 +1263,7 @@ const globals$1 = {
   fonts: fonts$1,
   direction: direction$1,
 };
-const vars$14 = getThemeVars(globals$1);
+const vars$15 = getThemeVars(globals$1);
 
 const direction = 'ltr';
 
@@ -1854,6 +1854,9 @@ const booleanAttributesList$1 = [
   'loading',
   'allow-custom-value',
   'collapsed',
+  'hide-country',
+  'hide-subdivision',
+  'hide-city',
 ];
 
 const isBooleanAttribute$1 = (attr) => {
@@ -1881,11 +1884,11 @@ const normalizeBooleanAttributesMixin$1 = (superclass) =>
             } else if (!attrVal) {
               // eslint-disable-next-line no-console
               console.debug(
-                `attribute "${attr}" has no value, should it be added to the boolean attributes list?`
+                `attribute "${attr}" has no value, should it be added to the boolean attributes list?`,
               );
             }
           }),
-        {}
+        {},
       );
     }
   };
@@ -3056,12 +3059,12 @@ const createImage = async (src, altText) => {
 
 /* eslint-disable no-use-before-define */
 
-const componentName$1h = getComponentName('image');
+const componentName$1j = getComponentName('image');
 
 const srcAttrs = ['src', 'src-dark'];
 
 class RawImage extends createBaseClass$1({
-  componentName: componentName$1h,
+  componentName: componentName$1j,
   baseSelector: 'slot',
 }) {
   static get observedAttributes() {
@@ -3189,7 +3192,7 @@ const ImageClass = compose(
   componentNameValidationMixin$1,
 )(RawImage);
 
-const componentName$1g = getComponentName('icon');
+const componentName$1i = getComponentName('icon');
 
 const IconClass = compose(
   createStyleMixin$1({
@@ -3210,7 +3213,7 @@ const IconClass = compose(
       }
       `,
     excludeAttrsSync: ['tabindex', 'class', 'style'],
-    componentName: componentName$1g,
+    componentName: componentName$1i,
   }),
 );
 
@@ -3225,7 +3228,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$1f = getComponentName('button');
+const componentName$1h = getComponentName('button');
 
 const resetStyles = `
 	:host {
@@ -3263,7 +3266,7 @@ const iconStyles = `
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 
-const { host: host$w, label: label$a, slottedIcon } = {
+const { host: host$x, label: label$a, slottedIcon } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
   slottedIcon: { selector: () => '::slotted(descope-icon)' },
@@ -3276,7 +3279,7 @@ const ButtonClass = compose(
     mappings: {
       hostWidth: { property: 'width' },
       hostHeight: { property: 'height' },
-      hostDirection: { ...host$w, property: 'direction' },
+      hostDirection: { ...host$x, property: 'direction' },
       fontSize: {},
       fontFamily: {},
 
@@ -3341,7 +3344,7 @@ const ButtonClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex', 'class', 'style'],
-    componentName: componentName$1f,
+    componentName: componentName$1h,
   })
 );
 
@@ -3389,7 +3392,7 @@ const mode = {
   surface: globalRefs$H.colors.surface,
 };
 
-const [helperTheme$6, helperRefs$6, helperVars$6] = createHelperVars$1({ mode }, componentName$1f);
+const [helperTheme$6, helperRefs$6, helperVars$6] = createHelperVars$1({ mode }, componentName$1h);
 
 const button = {
   ...helperTheme$6,
@@ -3501,7 +3504,7 @@ const button = {
   },
 };
 
-const vars$13 = {
+const vars$14 = {
   ...compVars$9,
   ...helperVars$6,
 };
@@ -3509,13 +3512,13 @@ const vars$13 = {
 var button$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: button,
-  vars: vars$13
+  vars: vars$14
 });
 
-const componentName$1e = getComponentName('text');
+const componentName$1g = getComponentName('text');
 
 class RawText extends createBaseClass$1({
-  componentName: componentName$1e,
+  componentName: componentName$1g,
   baseSelector: ':host > slot',
 }) {
   constructor() {
@@ -3551,15 +3554,15 @@ class RawText extends createBaseClass$1({
   }
 }
 
-const { host: host$v } = {
+const { host: host$w } = {
   host: { selector: () => ':host' }
 };
 
 const TextClass = compose(
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$v, property: 'width' },
-      hostDirection: { ...host$v, property: 'direction' },
+      hostWidth: { ...host$w, property: 'width' },
+      hostDirection: { ...host$w, property: 'direction' },
       fontSize: {},
       textColor: [
         { property: 'color' }
@@ -3582,106 +3585,106 @@ const TextClass = compose(
 )(RawText);
 
 const globalRefs$G = getThemeRefs$1(globals);
-const vars$12 = TextClass.cssVarList;
+const vars$13 = TextClass.cssVarList;
 
 const text$3 = {
-  [vars$12.hostDirection]: globalRefs$G.direction,
-  [vars$12.textLineHeight]: '1.35em',
-  [vars$12.textAlign]: 'start',
-  [vars$12.textColor]: globalRefs$G.colors.surface.dark,
+  [vars$13.hostDirection]: globalRefs$G.direction,
+  [vars$13.textLineHeight]: '1.35em',
+  [vars$13.textAlign]: 'start',
+  [vars$13.textColor]: globalRefs$G.colors.surface.dark,
 
   variant: {
     h1: {
-      [vars$12.fontSize]: globalRefs$G.typography.h1.size,
-      [vars$12.fontWeight]: globalRefs$G.typography.h1.weight,
-      [vars$12.fontFamily]: globalRefs$G.typography.h1.font,
+      [vars$13.fontSize]: globalRefs$G.typography.h1.size,
+      [vars$13.fontWeight]: globalRefs$G.typography.h1.weight,
+      [vars$13.fontFamily]: globalRefs$G.typography.h1.font,
     },
     h2: {
-      [vars$12.fontSize]: globalRefs$G.typography.h2.size,
-      [vars$12.fontWeight]: globalRefs$G.typography.h2.weight,
-      [vars$12.fontFamily]: globalRefs$G.typography.h2.font,
+      [vars$13.fontSize]: globalRefs$G.typography.h2.size,
+      [vars$13.fontWeight]: globalRefs$G.typography.h2.weight,
+      [vars$13.fontFamily]: globalRefs$G.typography.h2.font,
     },
     h3: {
-      [vars$12.fontSize]: globalRefs$G.typography.h3.size,
-      [vars$12.fontWeight]: globalRefs$G.typography.h3.weight,
-      [vars$12.fontFamily]: globalRefs$G.typography.h3.font,
+      [vars$13.fontSize]: globalRefs$G.typography.h3.size,
+      [vars$13.fontWeight]: globalRefs$G.typography.h3.weight,
+      [vars$13.fontFamily]: globalRefs$G.typography.h3.font,
     },
     subtitle1: {
-      [vars$12.fontSize]: globalRefs$G.typography.subtitle1.size,
-      [vars$12.fontWeight]: globalRefs$G.typography.subtitle1.weight,
-      [vars$12.fontFamily]: globalRefs$G.typography.subtitle1.font,
+      [vars$13.fontSize]: globalRefs$G.typography.subtitle1.size,
+      [vars$13.fontWeight]: globalRefs$G.typography.subtitle1.weight,
+      [vars$13.fontFamily]: globalRefs$G.typography.subtitle1.font,
     },
     subtitle2: {
-      [vars$12.fontSize]: globalRefs$G.typography.subtitle2.size,
-      [vars$12.fontWeight]: globalRefs$G.typography.subtitle2.weight,
-      [vars$12.fontFamily]: globalRefs$G.typography.subtitle2.font,
+      [vars$13.fontSize]: globalRefs$G.typography.subtitle2.size,
+      [vars$13.fontWeight]: globalRefs$G.typography.subtitle2.weight,
+      [vars$13.fontFamily]: globalRefs$G.typography.subtitle2.font,
     },
     body1: {
-      [vars$12.fontSize]: globalRefs$G.typography.body1.size,
-      [vars$12.fontWeight]: globalRefs$G.typography.body1.weight,
-      [vars$12.fontFamily]: globalRefs$G.typography.body1.font,
+      [vars$13.fontSize]: globalRefs$G.typography.body1.size,
+      [vars$13.fontWeight]: globalRefs$G.typography.body1.weight,
+      [vars$13.fontFamily]: globalRefs$G.typography.body1.font,
     },
     body2: {
-      [vars$12.fontSize]: globalRefs$G.typography.body2.size,
-      [vars$12.fontWeight]: globalRefs$G.typography.body2.weight,
-      [vars$12.fontFamily]: globalRefs$G.typography.body2.font,
+      [vars$13.fontSize]: globalRefs$G.typography.body2.size,
+      [vars$13.fontWeight]: globalRefs$G.typography.body2.weight,
+      [vars$13.fontFamily]: globalRefs$G.typography.body2.font,
     },
   },
 
   mode: {
     primary: {
-      [vars$12.textColor]: globalRefs$G.colors.surface.contrast,
+      [vars$13.textColor]: globalRefs$G.colors.surface.contrast,
     },
     secondary: {
-      [vars$12.textColor]: globalRefs$G.colors.surface.dark,
+      [vars$13.textColor]: globalRefs$G.colors.surface.dark,
     },
     error: {
-      [vars$12.textColor]: globalRefs$G.colors.error.main,
+      [vars$13.textColor]: globalRefs$G.colors.error.main,
     },
     'error-dark': {
-      [vars$12.textColor]: globalRefs$G.colors.error.dark,
+      [vars$13.textColor]: globalRefs$G.colors.error.dark,
     },
     success: {
-      [vars$12.textColor]: globalRefs$G.colors.success.main,
+      [vars$13.textColor]: globalRefs$G.colors.success.main,
     },
     'success-dark': {
-      [vars$12.textColor]: globalRefs$G.colors.success.dark,
+      [vars$13.textColor]: globalRefs$G.colors.success.dark,
     },
     warning: {
-      [vars$12.textColor]: globalRefs$G.colors.warning.main,
+      [vars$13.textColor]: globalRefs$G.colors.warning.main,
     },
     'warning-dark': {
-      [vars$12.textColor]: globalRefs$G.colors.warning.dark,
+      [vars$13.textColor]: globalRefs$G.colors.warning.dark,
     },
   },
 
   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%',
   },
 
   _italic: {
-    [vars$12.fontStyle]: 'italic',
+    [vars$13.fontStyle]: 'italic',
   },
 
   _uppercase: {
-    [vars$12.textTransform]: 'uppercase',
+    [vars$13.textTransform]: 'uppercase',
   },
 
   _lowercase: {
-    [vars$12.textTransform]: 'lowercase',
+    [vars$13.textTransform]: 'lowercase',
   },
 };
 
 var text$4 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: text$3,
-  vars: vars$12
+  vars: vars$13
 });
 
 const disableRules = [
@@ -3708,9 +3711,9 @@ const decodeHTML = (html) => {
 /* eslint-disable no-param-reassign */
 
 
-const componentName$1d = getComponentName('enriched-text');
+const componentName$1f = getComponentName('enriched-text');
 
-class EnrichedText extends createBaseClass$1({ componentName: componentName$1d, baseSelector: ':host > div' }) {
+class EnrichedText extends createBaseClass$1({ componentName: componentName$1f, baseSelector: ':host > div' }) {
   #origLinkRenderer;
 
   #origEmRenderer;
@@ -3915,9 +3918,9 @@ const EnrichedTextClass = compose(
   componentNameValidationMixin$1
 )(EnrichedText);
 
-const componentName$1c = getComponentName('link');
+const componentName$1e = getComponentName('link');
 
-class RawLink extends createBaseClass$1({ componentName: componentName$1c, baseSelector: ':host a' }) {
+class RawLink extends createBaseClass$1({ componentName: componentName$1e, baseSelector: ':host a' }) {
   constructor() {
     super();
 
@@ -3974,12 +3977,12 @@ const selectors$3 = {
   text: { selector: () => TextClass.componentName },
 };
 
-const { anchor, text: text$2, host: host$u, wrapper: wrapper$1, link: link$3 } = selectors$3;
+const { anchor, text: text$2, host: host$v, wrapper: wrapper$1, link: link$3 } = selectors$3;
 
 const LinkClass = compose(
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$u, property: 'width' },
+      hostWidth: { ...host$v, property: 'width' },
       hostDirection: { ...text$2, property: 'direction' },
       textAlign: wrapper$1,
       textDecoration: { ...link$3, property: 'text-decoration', fallback: 'none' },
@@ -3995,31 +3998,31 @@ const LinkClass = compose(
 )(RawLink);
 
 const globalRefs$F = getThemeRefs$1(globals);
-const vars$11 = LinkClass.cssVarList;
+const vars$12 = LinkClass.cssVarList;
 
 const link$1 = {
-  [vars$11.hostDirection]: globalRefs$F.direction,
-  [vars$11.cursor]: 'pointer',
+  [vars$12.hostDirection]: globalRefs$F.direction,
+  [vars$12.cursor]: 'pointer',
 
-  [vars$11.textColor]: globalRefs$F.colors.primary.main,
+  [vars$12.textColor]: globalRefs$F.colors.primary.main,
 
   textAlign: {
-    right: { [vars$11.textAlign]: 'right' },
-    left: { [vars$11.textAlign]: 'left' },
-    center: { [vars$11.textAlign]: 'center' },
+    right: { [vars$12.textAlign]: 'right' },
+    left: { [vars$12.textAlign]: 'left' },
+    center: { [vars$12.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$11.hostWidth]: '100%',
+    [vars$12.hostWidth]: '100%',
   },
 
   _hover: {
-    [vars$11.textDecoration]: 'underline',
+    [vars$12.textDecoration]: 'underline',
   },
 
   mode: {
     secondary: {
-      [vars$11.textColor]: globalRefs$F.colors.secondary.main,
+      [vars$12.textColor]: globalRefs$F.colors.secondary.main,
     },
   },
 };
@@ -4027,37 +4030,37 @@ const link$1 = {
 var link$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: link$1,
-  vars: vars$11
+  vars: vars$12
 });
 
 const globalRefs$E = getThemeRefs$1(globals);
-const vars$10 = EnrichedTextClass.cssVarList;
+const vars$11 = EnrichedTextClass.cssVarList;
 
 const enrichedText = {
-  [vars$10.hostDirection]: globalRefs$E.direction,
-  [vars$10.hostWidth]: useVar$1(vars$12.hostWidth),
+  [vars$11.hostDirection]: globalRefs$E.direction,
+  [vars$11.hostWidth]: useVar$1(vars$13.hostWidth),
 
-  [vars$10.textLineHeight]: useVar$1(vars$12.textLineHeight),
-  [vars$10.textColor]: useVar$1(vars$12.textColor),
-  [vars$10.textAlign]: useVar$1(vars$12.textAlign),
+  [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$10.fontSize]: useVar$1(vars$12.fontSize),
-  [vars$10.fontWeight]: useVar$1(vars$12.fontWeight),
-  [vars$10.fontFamily]: useVar$1(vars$12.fontFamily),
+  [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$10.linkColor]: useVar$1(vars$11.textColor),
-  [vars$10.linkTextDecoration]: 'none',
-  [vars$10.linkHoverTextDecoration]: 'underline',
+  [vars$11.linkColor]: useVar$1(vars$12.textColor),
+  [vars$11.linkTextDecoration]: 'none',
+  [vars$11.linkHoverTextDecoration]: 'underline',
 
-  [vars$10.fontWeightBold]: '900',
-  [vars$10.minWidth]: '0.25em',
-  [vars$10.minHeight]: '1.35em',
+  [vars$11.fontWeightBold]: '900',
+  [vars$11.minWidth]: '0.25em',
+  [vars$11.minHeight]: '1.35em',
 
-  [vars$10.hostDisplay]: 'inline-block',
+  [vars$11.hostDisplay]: 'inline-block',
 
   _empty: {
     _hideWhenEmpty: {
-      [vars$10.hostDisplay]: 'none',
+      [vars$11.hostDisplay]: 'none',
     },
   },
 };
@@ -4065,10 +4068,10 @@ const enrichedText = {
 var enrichedText$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: enrichedText,
-  vars: vars$10
+  vars: vars$11
 });
 
-const componentName$1b = getComponentName('combo-box');
+const componentName$1d = getComponentName('combo-box');
 
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
@@ -4453,7 +4456,7 @@ const ComboBoxMixin = (superclass) =>
   };
 
 const {
-  host: host$t,
+  host: host$u,
   inputField: inputField$6,
   inputElement: inputElement$3,
   placeholder: placeholder$3,
@@ -4485,10 +4488,10 @@ const {
 const ComboBoxClass = compose(
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$t, property: 'width' },
-      hostDirection: { ...host$t, property: 'direction' },
+      hostWidth: { ...host$u, property: 'width' },
+      hostDirection: { ...host$u, property: 'direction' },
       // we apply font-size also on the host so we can set its width with em
-      fontSize: [{}, host$t],
+      fontSize: [{}, host$u],
       fontFamily: [label$9, placeholder$3, inputField$6, helperText$a, errorMessage$d],
       labelFontSize: { ...label$9, property: 'font-size' },
       labelFontWeight: { ...label$9, property: 'font-weight' },
@@ -4752,12 +4755,12 @@ const ComboBoxClass = compose(
     // and reset items to an empty array, and opening the list box with no items
     // to display.
     excludeAttrsSync: ['tabindex', 'size', 'data', 'loading', 'style'],
-    componentName: componentName$1b,
+    componentName: componentName$1d,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   }),
 );
 
-const componentName$1a = getComponentName('input-wrapper');
+const componentName$1c = getComponentName('input-wrapper');
 const globalRefs$D = getThemeRefs$1(globals);
 
 const [theme$2, refs$1] = createHelperVars$1(
@@ -4880,103 +4883,103 @@ const [theme$2, refs$1] = createHelperVars$1(
       backgroundColor: globalRefs$D.colors.surface.main,
     },
   },
-  componentName$1a,
+  componentName$1c,
 );
 
 const globalRefs$C = getThemeRefs$1(globals);
-const vars$$ = ComboBoxClass.cssVarList;
+const vars$10 = ComboBoxClass.cssVarList;
 
 const comboBox = {
-  [vars$$.hostWidth]: refs$1.width,
-  [vars$$.hostDirection]: refs$1.direction,
-  [vars$$.fontSize]: refs$1.fontSize,
-  [vars$$.fontFamily]: refs$1.fontFamily,
-  [vars$$.labelFontSize]: refs$1.labelFontSize,
-  [vars$$.labelFontWeight]: refs$1.labelFontWeight,
-  [vars$$.labelTextColor]: refs$1.labelTextColor,
-  [vars$$.errorMessageTextColor]: refs$1.errorMessageTextColor,
-  [vars$$.inputBorderColor]: refs$1.borderColor,
-  [vars$$.inputBorderWidth]: refs$1.borderWidth,
-  [vars$$.inputBorderStyle]: refs$1.borderStyle,
-  [vars$$.inputBorderRadius]: refs$1.borderRadius,
-  [vars$$.inputOutlineColor]: refs$1.outlineColor,
-  [vars$$.inputOutlineOffset]: refs$1.outlineOffset,
-  [vars$$.inputOutlineWidth]: refs$1.outlineWidth,
-  [vars$$.inputOutlineStyle]: refs$1.outlineStyle,
-  [vars$$.labelRequiredIndicator]: refs$1.requiredIndicator,
-  [vars$$.inputValueTextColor]: refs$1.valueTextColor,
-  [vars$$.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
-  [vars$$.inputBackgroundColor]: refs$1.backgroundColor,
-  [vars$$.inputHorizontalPadding]: refs$1.horizontalPadding,
-  [vars$$.inputHeight]: refs$1.inputHeight,
-  [vars$$.inputDropdownButtonColor]: globalRefs$C.colors.surface.dark,
-  [vars$$.inputDropdownButtonCursor]: 'pointer',
-  [vars$$.inputDropdownButtonSize]: refs$1.toggleButtonSize,
-  [vars$$.inputDropdownButtonOffset]: globalRefs$C.spacing.xs,
-  [vars$$.overlayItemPaddingInlineStart]: globalRefs$C.spacing.xs,
-  [vars$$.overlayItemPaddingInlineEnd]: globalRefs$C.spacing.lg,
-  [vars$$.labelPosition]: refs$1.labelPosition,
-  [vars$$.labelTopPosition]: refs$1.labelTopPosition,
-  [vars$$.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
-  [vars$$.inputTransformY]: refs$1.inputTransformY,
-  [vars$$.inputTransition]: refs$1.inputTransition,
-  [vars$$.marginInlineStart]: refs$1.marginInlineStart,
-  [vars$$.placeholderOpacity]: refs$1.placeholderOpacity,
-  [vars$$.inputVerticalAlignment]: refs$1.inputVerticalAlignment,
-  [vars$$.valueInputHeight]: refs$1.valueInputHeight,
-  [vars$$.valueInputMarginBottom]: refs$1.valueInputMarginBottom,
+  [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,
 
   // error message icon
-  [vars$$.errorMessageIcon]: refs$1.errorMessageIcon,
-  [vars$$.errorMessageIconSize]: refs$1.errorMessageIconSize,
-  [vars$$.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
-  [vars$$.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
-  [vars$$.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
-  [vars$$.errorMessageFontSize]: refs$1.errorMessageFontSize,
+  [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,
 
   _readonly: {
-    [vars$$.inputDropdownButtonCursor]: 'default',
+    [vars$10.inputDropdownButtonCursor]: 'default',
   },
 
   // Overlay theme exposed via the component:
-  [vars$$.overlayFontSize]: refs$1.fontSize,
-  [vars$$.overlayFontFamily]: refs$1.fontFamily,
-  [vars$$.overlayCursor]: 'pointer',
-  [vars$$.overlayItemBoxShadow]: 'none',
-  [vars$$.overlayBackground]: refs$1.backgroundColor,
-  [vars$$.overlayTextColor]: refs$1.valueTextColor,
-  [vars$$.overlayCheckmarkDisplay]: 'initial',
-  [vars$$.overlaySelectedItemBackground]: 'initial',
-  [vars$$.overlaySelectedItemHoverBackground]:
+  [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]:
     globalRefs$C.colors.primary.highlight,
-  [vars$$.overlaySelectedItemFocusBackground]:
+  [vars$10.overlaySelectedItemFocusBackground]:
     globalRefs$C.colors.primary.highlight,
-  [vars$$.overlayItemHoverBackground]: globalRefs$C.colors.primary.highlight,
-  [vars$$.overlayItemFocusBackground]: globalRefs$C.colors.primary.highlight,
+  [vars$10.overlayItemHoverBackground]: globalRefs$C.colors.primary.highlight,
+  [vars$10.overlayItemFocusBackground]: globalRefs$C.colors.primary.highlight,
 
   // Overlay direct theme:
-  [vars$$.overlay.minHeight]: '400px',
-  [vars$$.overlay.margin]: '0',
+  [vars$10.overlay.minHeight]: '400px',
+  [vars$10.overlay.margin]: '0',
 
-  [vars$$.overlay.contentHeight]: '100%',
-  [vars$$.overlay.contentOpacity]: '1',
-  [vars$$.overlay.scrollerMinHeight]: '1px',
+  [vars$10.overlay.contentHeight]: '100%',
+  [vars$10.overlay.contentOpacity]: '1',
+  [vars$10.overlay.scrollerMinHeight]: '1px',
   _loading: {
-    [vars$$.overlay.loaderTop]: '50%',
-    [vars$$.overlay.loaderLeft]: '50%',
-    [vars$$.overlay.loaderRight]: 'auto',
+    [vars$10.overlay.loaderTop]: '50%',
+    [vars$10.overlay.loaderLeft]: '50%',
+    [vars$10.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$$.overlay.loaderMargin]: '-15px 0 0 -15px',
-    [vars$$.overlay.loaderWidth]: '30px',
-    [vars$$.overlay.loaderHeight]: '30px',
-    [vars$$.overlay.loaderBorder]: '2px solid transparent',
-    [vars$$.overlay.loaderBorderColor]:
+    [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]:
       `${globalRefs$C.colors.primary.highlight} ${globalRefs$C.colors.primary.highlight} ${globalRefs$C.colors.primary.main} ${globalRefs$C.colors.primary.main}`,
-    [vars$$.overlay.loaderBorderRadius]: '50%',
-    [vars$$.overlay.contentHeight]: '100px',
-    [vars$$.overlay.scrollerMinHeight]: '100px',
-    [vars$$.overlay.contentOpacity]: '0',
+    [vars$10.overlay.loaderBorderRadius]: '50%',
+    [vars$10.overlay.contentHeight]: '100px',
+    [vars$10.overlay.scrollerMinHeight]: '100px',
+    [vars$10.overlay.contentOpacity]: '0',
   },
 };
 
@@ -4984,13 +4987,13 @@ var comboBox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   comboBox: comboBox,
   default: comboBox,
-  vars: vars$$
+  vars: vars$10
 });
 
-const componentName$19 = getComponentName('badge');
+const componentName$1b = getComponentName('badge');
 
 class RawBadge extends createBaseClass$1({
-  componentName: componentName$19,
+  componentName: componentName$1b,
   baseSelector: ':host > div',
 }) {
   constructor() {
@@ -5055,65 +5058,65 @@ const BadgeClass = compose(
 
 const globalRefs$B = getThemeRefs$1(globals);
 
-const vars$_ = BadgeClass.cssVarList;
+const vars$$ = BadgeClass.cssVarList;
 
 const badge$2 = {
-  [vars$_.hostWidth]: 'fit-content',
-  [vars$_.hostDirection]: globalRefs$B.direction,
+  [vars$$.hostWidth]: 'fit-content',
+  [vars$$.hostDirection]: globalRefs$B.direction,
 
-  [vars$_.textAlign]: 'center',
+  [vars$$.textAlign]: 'center',
 
-  [vars$_.fontFamily]: globalRefs$B.fonts.font1.family,
-  [vars$_.fontWeight]: '400',
+  [vars$$.fontFamily]: globalRefs$B.fonts.font1.family,
+  [vars$$.fontWeight]: '400',
 
-  [vars$_.verticalPadding]: '0.25em',
-  [vars$_.horizontalPadding]: '0.5em',
+  [vars$$.verticalPadding]: '0.25em',
+  [vars$$.horizontalPadding]: '0.5em',
 
-  [vars$_.borderWidth]: globalRefs$B.border.xs,
-  [vars$_.borderRadius]: globalRefs$B.radius.xs,
-  [vars$_.borderColor]: 'transparent',
-  [vars$_.borderStyle]: 'solid',
+  [vars$$.borderWidth]: globalRefs$B.border.xs,
+  [vars$$.borderRadius]: globalRefs$B.radius.xs,
+  [vars$$.borderColor]: 'transparent',
+  [vars$$.borderStyle]: 'solid',
 
   _fullWidth: {
-    [vars$_.hostWidth]: '100%',
+    [vars$$.hostWidth]: '100%',
   },
 
   size: {
-    xs: { [vars$_.fontSize]: '12px' },
-    sm: { [vars$_.fontSize]: '14px' },
-    md: { [vars$_.fontSize]: '16px' },
-    lg: { [vars$_.fontSize]: '18px' },
+    xs: { [vars$$.fontSize]: '12px' },
+    sm: { [vars$$.fontSize]: '14px' },
+    md: { [vars$$.fontSize]: '16px' },
+    lg: { [vars$$.fontSize]: '18px' },
   },
 
   mode: {
     default: {
-      [vars$_.textColor]: globalRefs$B.colors.surface.dark,
+      [vars$$.textColor]: globalRefs$B.colors.surface.dark,
       _bordered: {
-        [vars$_.borderColor]: globalRefs$B.colors.surface.light,
+        [vars$$.borderColor]: globalRefs$B.colors.surface.light,
       },
     },
     primary: {
-      [vars$_.textColor]: globalRefs$B.colors.primary.main,
+      [vars$$.textColor]: globalRefs$B.colors.primary.main,
       _bordered: {
-        [vars$_.borderColor]: globalRefs$B.colors.primary.light,
+        [vars$$.borderColor]: globalRefs$B.colors.primary.light,
       },
     },
     secondary: {
-      [vars$_.textColor]: globalRefs$B.colors.secondary.main,
+      [vars$$.textColor]: globalRefs$B.colors.secondary.main,
       _bordered: {
-        [vars$_.borderColor]: globalRefs$B.colors.secondary.light,
+        [vars$$.borderColor]: globalRefs$B.colors.secondary.light,
       },
     },
     error: {
-      [vars$_.textColor]: globalRefs$B.colors.error.main,
+      [vars$$.textColor]: globalRefs$B.colors.error.main,
       _bordered: {
-        [vars$_.borderColor]: globalRefs$B.colors.error.light,
+        [vars$$.borderColor]: globalRefs$B.colors.error.light,
       },
     },
     success: {
-      [vars$_.textColor]: globalRefs$B.colors.success.main,
+      [vars$$.textColor]: globalRefs$B.colors.success.main,
       _bordered: {
-        [vars$_.borderColor]: globalRefs$B.colors.success.light,
+        [vars$$.borderColor]: globalRefs$B.colors.success.light,
       },
     },
   },
@@ -5122,12 +5125,12 @@ const badge$2 = {
 var badge$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: badge$2,
-  vars: vars$_
+  vars: vars$$
 });
 
-const componentName$18 = getComponentName('avatar');
+const componentName$1a = getComponentName('avatar');
 class RawAvatar extends createBaseClass$1({
-  componentName: componentName$18,
+  componentName: componentName$1a,
   baseSelector: ':host > .wrapper',
 }) {
   constructor() {
@@ -5205,7 +5208,7 @@ class RawAvatar extends createBaseClass$1({
   }
 }
 
-const { host: host$s, editableBadge, avatar: avatar$2 } = {
+const { host: host$t, editableBadge, avatar: avatar$2 } = {
   host: { selector: () => ':host' },
   editableBadge: { selector: '> .editableBadge' },
   avatar: { selector: 'vaadin-avatar' },
@@ -5215,12 +5218,12 @@ const AvatarClass = compose(
   createStyleMixin$1({
     mappings: {
       hostWidth: [
-        { ...host$s, property: 'width' },
-        { ...host$s, property: 'min-width' },
+        { ...host$t, property: 'width' },
+        { ...host$t, property: 'min-width' },
       ],
-      hostHeight: { ...host$s, property: 'height' },
-      cursor: [avatar$2, host$s],
-      hostDirection: { ...host$s, property: 'direction' },
+      hostHeight: { ...host$t, property: 'height' },
+      cursor: [avatar$2, host$t],
+      hostDirection: { ...host$t, property: 'direction' },
       avatarTextColor: { ...avatar$2, property: 'color' },
       avatarBackgroundColor: { ...avatar$2, property: 'background-color' },
       editableIconColor: { ...editableBadge, property: 'color' },
@@ -5278,39 +5281,39 @@ const avatar = {
   },
 };
 
-const vars$Z = {
+const vars$_ = {
   ...compVars$8,
 };
 
 var avatar$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: avatar,
-  vars: vars$Z
+  vars: vars$_
 });
 
-const vars$Y = IconClass.cssVarList;
+const vars$Z = IconClass.cssVarList;
 
 const icon$3 = {};
 
 var icon$4 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: icon$3,
-  vars: vars$Y
+  vars: vars$Z
 });
 
-const vars$X = ImageClass.cssVarList;
+const vars$Y = ImageClass.cssVarList;
 
 const image = {};
 
 var image$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: image,
-  vars: vars$X
+  vars: vars$Y
 });
 
-const componentName$17 = getComponentName('list-item');
+const componentName$19 = getComponentName('list-item');
 
-const customMixin$e = (superclass) =>
+const customMixin$f = (superclass) =>
   class ListItemMixinClass extends superclass {
     constructor() {
       super();
@@ -5363,14 +5366,14 @@ const ListItemClass = compose(
   }),
   draggableMixin$1,
   componentNameValidationMixin$1,
-  customMixin$e,
+  customMixin$f,
   activeableMixin,
-)(createBaseClass$1({ componentName: componentName$17, baseSelector: 'slot' }));
+)(createBaseClass$1({ componentName: componentName$19, baseSelector: 'slot' }));
 
-const componentName$16 = getComponentName('list');
+const componentName$18 = getComponentName('list');
 
 class RawList extends createBaseClass$1({
-  componentName: componentName$16,
+  componentName: componentName$18,
   baseSelector: '.wrapper',
 }) {
   static get observedAttributes() {
@@ -5541,7 +5544,7 @@ const ListClass = compose(
   componentNameValidationMixin$1,
 )(RawList);
 
-const componentName$15 = getComponentName('apps-list');
+const componentName$17 = getComponentName('apps-list');
 
 const itemRenderer$4 = ({ name, icon, url }, _, ref) => `
   <a ${url ? `href="${url}" title="${url}"` : ''} ${ref.openInSameWindow ? '' : 'target="_blank"'}>
@@ -5561,7 +5564,7 @@ const itemRenderer$4 = ({ name, icon, url }, _, ref) => `
   </a>
 `;
 
-const customMixin$d = (superclass) =>
+const customMixin$e = (superclass) =>
   class AppsListMixinClass extends superclass {
     // size controls both item logo size and font size
     get size() {
@@ -5659,13 +5662,13 @@ const AppsListClass = compose(
   }),
   draggableMixin$1,
   componentNameValidationMixin$1,
-  customMixin$d,
+  customMixin$e,
 )(
   createProxy$1({
     slots: ['empty-state'],
     wrappedEleName: 'descope-list',
     excludeAttrsSync: ['tabindex', 'class', 'empty', 'style'],
-    componentName: componentName$15,
+    componentName: componentName$17,
     style: () => `
       :host {
         width: 100%;
@@ -5700,60 +5703,60 @@ const AppsListClass = compose(
   }),
 );
 
-const vars$W = AppsListClass.cssVarList;
+const vars$X = AppsListClass.cssVarList;
 const globalRefs$z = getThemeRefs$1(globals);
 
 const defaultHeight = '400px';
 
 const appsList = {
-  [vars$W.itemsTextAlign]: 'start',
-  [vars$W.hostDirection]: globalRefs$z.direction,
-  [vars$W.maxHeight]: defaultHeight,
-  [vars$W.itemHoverBackgroundColor]: globalRefs$z.colors.surface.highlight,
+  [vars$X.itemsTextAlign]: 'start',
+  [vars$X.hostDirection]: globalRefs$z.direction,
+  [vars$X.maxHeight]: defaultHeight,
+  [vars$X.itemHoverBackgroundColor]: globalRefs$z.colors.surface.highlight,
 
   _empty: {
-    [vars$W.minHeight]: defaultHeight,
+    [vars$X.minHeight]: defaultHeight,
   },
 
   size: {
     xs: {
-      [vars$W.itemsFontSize]: '14px',
-      [vars$W.itemsFontWeight]: 'normal',
+      [vars$X.itemsFontSize]: '14px',
+      [vars$X.itemsFontWeight]: 'normal',
     },
     sm: {
-      [vars$W.itemsFontSize]: '14px',
-      [vars$W.itemsFontWeight]: 'normal',
+      [vars$X.itemsFontSize]: '14px',
+      [vars$X.itemsFontWeight]: 'normal',
     },
     md: {
-      [vars$W.itemsFontSize]: '16px',
-      [vars$W.itemsFontWeight]: 'normal',
+      [vars$X.itemsFontSize]: '16px',
+      [vars$X.itemsFontWeight]: 'normal',
     },
     lg: {
-      [vars$W.itemsFontSize]: '20px',
-      [vars$W.itemsFontWeight]: 'normal',
+      [vars$X.itemsFontSize]: '20px',
+      [vars$X.itemsFontWeight]: 'normal',
     },
   },
 
   itemPadding: {
     xs: {
-      [vars$W.itemVerticalPadding]: globalRefs$z.spacing.xs,
-      [vars$W.itemHorizontalPadding]: globalRefs$z.spacing.xs,
+      [vars$X.itemVerticalPadding]: globalRefs$z.spacing.xs,
+      [vars$X.itemHorizontalPadding]: globalRefs$z.spacing.xs,
     },
     sm: {
-      [vars$W.itemVerticalPadding]: globalRefs$z.spacing.sm,
-      [vars$W.itemHorizontalPadding]: globalRefs$z.spacing.sm,
+      [vars$X.itemVerticalPadding]: globalRefs$z.spacing.sm,
+      [vars$X.itemHorizontalPadding]: globalRefs$z.spacing.sm,
     },
     md: {
-      [vars$W.itemVerticalPadding]: globalRefs$z.spacing.md,
-      [vars$W.itemHorizontalPadding]: globalRefs$z.spacing.md,
+      [vars$X.itemVerticalPadding]: globalRefs$z.spacing.md,
+      [vars$X.itemHorizontalPadding]: globalRefs$z.spacing.md,
     },
     lg: {
-      [vars$W.itemVerticalPadding]: globalRefs$z.spacing.lg,
-      [vars$W.itemHorizontalPadding]: globalRefs$z.spacing.lg,
+      [vars$X.itemVerticalPadding]: globalRefs$z.spacing.lg,
+      [vars$X.itemHorizontalPadding]: globalRefs$z.spacing.lg,
     },
     xl: {
-      [vars$W.itemVerticalPadding]: globalRefs$z.spacing.xl,
-      [vars$W.itemHorizontalPadding]: globalRefs$z.spacing.xl,
+      [vars$X.itemVerticalPadding]: globalRefs$z.spacing.xl,
+      [vars$X.itemHorizontalPadding]: globalRefs$z.spacing.xl,
     },
   },
 };
@@ -5761,7 +5764,7 @@ const appsList = {
 var appsList$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: appsList,
-  vars: vars$W
+  vars: vars$X
 });
 
 const globalRefs$y = getThemeRefs$1(globals);
@@ -5770,7 +5773,7 @@ const compVars$7 = ListClass.cssVarList;
 
 const [helperTheme$5, helperRefs$5, helperVars$5] = createHelperVars$1(
   { shadowColor: '#00000020' },
-  componentName$16,
+  componentName$18,
 );
 
 const { shadowColor: shadowColor$5 } = helperRefs$5;
@@ -5831,7 +5834,7 @@ const list = {
   },
 };
 
-const vars$V = {
+const vars$W = {
   ...compVars$7,
   ...helperVars$5,
 };
@@ -5839,62 +5842,62 @@ const vars$V = {
 var list$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: list,
-  vars: vars$V
+  vars: vars$W
 });
 
 const globalRefs$x = getThemeRefs$1(globals);
 
-const vars$U = ListItemClass.cssVarList;
+const vars$V = ListItemClass.cssVarList;
 
 const listItem = {
-  [vars$U.backgroundColor]: globalRefs$x.colors.surface.main,
-  [vars$U.verticalPadding]: globalRefs$x.spacing.lg,
-  [vars$U.horizontalPadding]: globalRefs$x.spacing.lg,
-  [vars$U.gap]: globalRefs$x.spacing.md,
-  [vars$U.borderStyle]: 'solid',
-  [vars$U.borderWidth]: globalRefs$x.border.xs,
-  [vars$U.borderColor]: globalRefs$x.colors.surface.main,
-  [vars$U.borderRadius]: globalRefs$x.radius.sm,
-  [vars$U.cursor]: 'pointer',
-  [vars$U.alignItems]: 'center',
-  [vars$U.flexDirection]: 'row',
-  [vars$U.transition]: 'border-color 0.2s, background-color 0.2s',
+  [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',
 
   variant: {
     tile: {
-      [vars$U.alignItems]: 'flex-start',
-      [vars$U.flexDirection]: 'column',
-      [vars$U.borderColor]: globalRefs$x.colors.surface.light,
+      [vars$V.alignItems]: 'flex-start',
+      [vars$V.flexDirection]: 'column',
+      [vars$V.borderColor]: globalRefs$x.colors.surface.light,
     },
   },
 
   _hover: {
-    [vars$U.backgroundColor]: globalRefs$x.colors.surface.highlight,
+    [vars$V.backgroundColor]: globalRefs$x.colors.surface.highlight,
   },
 
   _active: {
-    [vars$U.backgroundColor]: globalRefs$x.colors.surface.main,
-    [vars$U.borderColor]: globalRefs$x.colors.primary.light,
-    [vars$U.outline]: `1px solid ${globalRefs$x.colors.primary.light}`,
+    [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}`,
   },
 };
 
 var listItem$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: listItem,
-  vars: vars$U
+  vars: vars$V
 });
 
-const componentName$14 = getComponentName('autocomplete-field-internal');
+const componentName$16 = getComponentName('autocomplete-field-internal');
 
 createBaseInputClass$1({
-  componentName: componentName$14,
+  componentName: componentName$16,
   baseSelector: '',
 });
 
-const componentName$13 = getComponentName('autocomplete-field');
+const componentName$15 = getComponentName('autocomplete-field');
 
-const customMixin$c = (superclass) =>
+const customMixin$d = (superclass) =>
   class AutocompleteFieldMixinClass extends superclass {
     get defaultValue() {
       return this.getAttribute('default-value');
@@ -5913,15 +5916,15 @@ const customMixin$c = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$14}
+      <${componentName$16}
         tabindex="-1"
-      ></${componentName$14}>
+      ></${componentName$16}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
       this.inputElement = this.shadowRoot.querySelector(
-        componentName$14,
+        componentName$16,
       );
 
       forwardAttrs(this, this.inputElement, {
@@ -5961,7 +5964,7 @@ const customMixin$c = (superclass) =>
     }
   };
 
-const { host: host$r } = {
+const { host: host$s } = {
   host: { selector: () => ':host' },
 };
 
@@ -5971,9 +5974,9 @@ const AutocompleteFieldClass = compose(
   }),
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$r, property: 'width' },
-      hostDirection: { ...host$r, property: 'direction' },
-      fontSize: { ...host$r },
+      hostWidth: { ...host$s, property: 'width' },
+      hostDirection: { ...host$s, property: 'direction' },
+      fontSize: { ...host$s },
       checkmarkDisplay: {
         selector: ComboBoxClass.componentName,
         property: ComboBoxClass.cssVarList.overlayCheckmarkDisplay,
@@ -6011,7 +6014,7 @@ const AutocompleteFieldClass = compose(
     proxyParentValidation: true,
   }),
   componentNameValidationMixin$1,
-  customMixin$c,
+  customMixin$d,
 )(
   createProxy$1({
     slots: [],
@@ -6040,34 +6043,34 @@ const AutocompleteFieldClass = compose(
     }
   `,
     excludeAttrsSync: ['tabindex', 'error-message', 'label', 'style'],
-    componentName: componentName$13,
+    componentName: componentName$15,
   }),
 );
 
-const vars$T = AutocompleteFieldClass.cssVarList;
+const vars$U = AutocompleteFieldClass.cssVarList;
 const globalRefs$w = getThemeRefs$1(globals);
 
 const autocompleteField = {
-  [vars$T.hostWidth]: refs$1.width,
-  [vars$T.hostDirection]: refs$1.direction,
-  [vars$T.fontSize]: refs$1.fontSize,
-  [vars$T.checkmarkDisplay]: 'none',
-  [vars$T.itemPaddingInlineStart]: globalRefs$w.spacing.lg,
-  [vars$T.itemPaddingInlineEnd]: globalRefs$w.spacing.lg,
-  [vars$T.selectedItemBackground]: globalRefs$w.colors.primary.light,
-  [vars$T.selectedItemHoverBackground]: globalRefs$w.colors.primary.light,
-  [vars$T.selectedItemFocusBackground]: globalRefs$w.colors.primary.light,
-  [vars$T.itemHoverBackground]: globalRefs$w.colors.primary.highlight,
+  [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,
 
   _fullWidth: {
-    [vars$T.hostWidth]: '100%',
+    [vars$U.hostWidth]: '100%',
   },
 };
 
 var autocompleteField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: autocompleteField,
-  vars: vars$T
+  vars: vars$U
 });
 
 const initGoogleMapsLoader = (apiKey) => {
@@ -6294,7 +6297,7 @@ class RadarConnector extends createBaseConnectorClass() {
   }
 }
 
-const componentName$12 = getComponentName('address-field-internal');
+const componentName$14 = getComponentName('address-field-internal');
 
 const GOOGLE_MAPS_CONNECTOR_TEMPLATE = 'google-maps-places';
 const RADAR_CONNECTOR_TEMPLATE = 'radar';
@@ -6304,16 +6307,16 @@ const CONNECTOR_CLASSES = {
   [RADAR_CONNECTOR_TEMPLATE]: RadarConnector,
 };
 
-const BaseInputClass$4 = createBaseInputClass$1({
-  componentName: componentName$12,
+const BaseInputClass$5 = createBaseInputClass$1({
+  componentName: componentName$14,
   baseSelector: '',
 });
 const initConnectorAttrs = ['public-api-key'];
-const observedAttrs$4 = [...initConnectorAttrs];
+const observedAttrs$5 = [...initConnectorAttrs];
 
-class RawAddressFieldInternal extends BaseInputClass$4 {
+class RawAddressFieldInternal extends BaseInputClass$5 {
   static get observedAttributes() {
-    return [].concat(BaseInputClass$4.observedAttributes || [], observedAttrs$4);
+    return [].concat(BaseInputClass$5.observedAttributes || [], observedAttrs$5);
   }
 
   get errorMsgValueMissing() {
@@ -6412,9 +6415,9 @@ compose(
   connectorMixin({ connectorClasses: CONNECTOR_CLASSES }),
 )(RawAddressFieldInternal);
 
-const componentName$11 = getComponentName('address-field');
+const componentName$13 = getComponentName('address-field');
 
-const customMixin$b = (superclass) =>
+const customMixin$c = (superclass) =>
   class AddressFieldMixinClass extends superclass {
     get defaultValue() {
       return this.getAttribute('default-value');
@@ -6441,15 +6444,15 @@ const customMixin$b = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$12}
+      <${componentName$14}
         tabindex="-1"
-      ></${componentName$12}>
+      ></${componentName$14}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
       this.inputElement = this.shadowRoot.querySelector(
-        componentName$12,
+        componentName$14,
       );
 
       forwardAttrs(this, this.inputElement, {
@@ -6490,7 +6493,7 @@ const customMixin$b = (superclass) =>
     }
   };
 
-const { host: host$q } = {
+const { host: host$r } = {
   host: { selector: () => ':host' },
 };
 
@@ -6500,8 +6503,8 @@ const AddressFieldClass = compose(
   }),
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$q, property: 'width' },
-      hostDirection: { ...host$q, property: 'direction' },
+      hostWidth: { ...host$r, property: 'width' },
+      hostDirection: { ...host$r, property: 'direction' },
     },
   }),
   draggableMixin$1,
@@ -6511,7 +6514,7 @@ const AddressFieldClass = compose(
     proxyParentValidation: true,
   }),
   componentNameValidationMixin$1,
-  customMixin$b,
+  customMixin$c,
 )(
   createProxy$1({
     slots: [],
@@ -6527,7 +6530,7 @@ const AddressFieldClass = compose(
     width: 100%;
   }
 
-  ${componentName$12} {
+  ${componentName$14} {
     display: inline-block;
     box-sizing: border-box;
     user-select: none;
@@ -6535,30 +6538,30 @@ const AddressFieldClass = compose(
     max-width: 100%;
   }
 
-  ${componentName$12} ::slotted {
+  ${componentName$14} ::slotted {
     padding: 0;
   }
 `,
     excludeAttrsSync: ['tabindex', 'error-message', 'label', 'style'],
-    componentName: componentName$11,
+    componentName: componentName$13,
   }),
 );
 
-const vars$S = AddressFieldClass.cssVarList;
+const vars$T = AddressFieldClass.cssVarList;
 
 const addressField = {
-  [vars$S.hostWidth]: refs$1.width,
-  [vars$S.hostDirection]: refs$1.direction,
+  [vars$T.hostWidth]: refs$1.width,
+  [vars$T.hostDirection]: refs$1.direction,
 
   _fullWidth: {
-    [vars$S.hostWidth]: '100%',
+    [vars$T.hostWidth]: '100%',
   },
 };
 
 var addressField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: addressField,
-  vars: vars$S
+  vars: vars$T
 });
 
 var clockIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDEwNCAxMDQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik01MC4zMzM0IDAuMzMzMjUyQzIyLjgzMzQgMC4zMzMyNTIgMC4zMzMzNzQgMjIuODMzMyAwLjMzMzM3NCA1MC4zMzMzQzAuMzMzMzc0IDc3LjgzMzMgMjIuODMzNCAxMDAuMzMzIDUwLjMzMzQgMTAwLjMzM0M3Ny44MzM0IDEwMC4zMzMgMTAwLjMzMyA3Ny44MzMzIDEwMC4zMzMgNTAuMzMzM0MxMDAuMzMzIDIyLjgzMzMgNzcuODMzNCAwLjMzMzI1MiA1MC4zMzM0IDAuMzMzMjUyWk01MC4zMzM0IDg3LjgzMzNDMjkuNzA4NCA4Ny44MzMzIDEyLjgzMzQgNzAuOTU4MyAxMi44MzM0IDUwLjMzMzNDMTIuODMzNCAyOS43MDgzIDI5LjcwODQgMTIuODMzMyA1MC4zMzM0IDEyLjgzMzNDNzAuOTU4NCAxMi44MzMzIDg3LjgzMzQgMjkuNzA4MyA4Ny44MzM0IDUwLjMzMzNDODcuODMzNCA3MC45NTgzIDcwLjk1ODQgODcuODMzMyA1MC4zMzM0IDg3LjgzMzNaIiBmaWxsPSIjMTgxQTFDIi8+CjxwYXRoIGQ9Ik01MC4zMzI4IDE5LjA4MzNINDQuMDgyOFY1Ni41ODMySDc1LjMzMjhWNTAuMzMzMkg1MC4zMzI4VjE5LjA4MzNaIiBmaWxsPSIjMTgxQTFDIi8+Cjwvc3ZnPgo=";
@@ -6580,12 +6583,12 @@ const formatTime = (ms = 0) => {
   return timeParts.join(':');
 };
 
-const componentName$10 = getComponentName('timer');
+const componentName$12 = getComponentName('timer');
 
 const observedAttributes$5 = ['seconds', 'hide-icon', 'paused'];
 
 const BaseClass$7 = createBaseClass$1({
-  componentName: componentName$10,
+  componentName: componentName$12,
   baseSelector: ':host > .wrapper',
 });
 
@@ -6738,7 +6741,7 @@ class RawTimer extends BaseClass$7 {
   }
 }
 
-const { host: host$p, icon: icon$2, timer: timer$2 } = {
+const { host: host$q, icon: icon$2, timer: timer$2 } = {
   host: { selector: () => ':host' },
   icon: { selector: () => '.icon' },
   timer: { selector: () => '.timer' },
@@ -6759,8 +6762,8 @@ const TimerClass = compose(
       textColor: { ...timer$2, property: 'color' },
       gap: {},
       textAlign: { property: 'justify-content' },
-      hostWidth: { ...host$p, property: 'width' },
-      hostDirection: { ...host$p, property: 'direction' },
+      hostWidth: { ...host$q, property: 'width' },
+      hostDirection: { ...host$q, property: 'direction' },
       iconColor: { ...icon$2, property: IconClass.cssVarList.fill },
     },
   }),
@@ -6769,44 +6772,44 @@ const TimerClass = compose(
 )(RawTimer);
 
 const globalRefs$v = getThemeRefs$1(globals);
-const vars$R = TimerClass.cssVarList;
+const vars$S = TimerClass.cssVarList;
 
 const timer = {
-  [vars$R.hostDirection]: globalRefs$v.direction,
-  [vars$R.gap]: '0.25em',
-  [vars$R.fontFamily]: globalRefs$v.fonts.font1.family,
-  [vars$R.minHeight]: '1.5em',
-  [vars$R.lineHeight]: '1em',
-  [vars$R.fontWeight]: globalRefs$v.fonts.font1.fontWeight,
-  [vars$R.textColor]: globalRefs$v.colors.surface.contrast,
-  [vars$R.iconColor]: globalRefs$v.colors.surface.contrast,
-  [vars$R.iconSize]: '1em',
+  [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',
 
   size: {
-    xs: { [vars$R.fontSize]: '12px' },
-    sm: { [vars$R.fontSize]: '14px' },
-    md: { [vars$R.fontSize]: '16px' },
-    lg: { [vars$R.fontSize]: '18px' },
+    xs: { [vars$S.fontSize]: '12px' },
+    sm: { [vars$S.fontSize]: '14px' },
+    md: { [vars$S.fontSize]: '16px' },
+    lg: { [vars$S.fontSize]: '18px' },
   },
 
   textAlign: {
-    right: { [vars$R.textAlign]: 'right' },
-    left: { [vars$R.textAlign]: 'left' },
-    center: { [vars$R.textAlign]: 'center' },
+    right: { [vars$S.textAlign]: 'right' },
+    left: { [vars$S.textAlign]: 'left' },
+    center: { [vars$S.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$R.hostWidth]: '100%',
+    [vars$S.hostWidth]: '100%',
   },
 };
 
 var timer$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: timer,
-  vars: vars$R
+  vars: vars$S
 });
 
-const componentName$$ = getComponentName('timer-button');
+const componentName$11 = getComponentName('timer-button');
 
 const buttonAttrs = [
   'button-variant',
@@ -6837,7 +6840,7 @@ const mapTimerAttrs = {
 };
 
 const BaseClass$6 = createBaseClass$1({
-  componentName: componentName$$,
+  componentName: componentName$11,
   baseSelector: ':host > div',
 });
 
@@ -6929,7 +6932,7 @@ class RawTimerButton extends BaseClass$6 {
   }
 }
 
-const { host: host$o } = {
+const { host: host$p } = {
   host: { selector: () => ':host' }};
 
 const TimerButtonClass = compose(
@@ -6937,8 +6940,8 @@ const TimerButtonClass = compose(
     mappings: {
       gap: {},
       flexDirection: {},
-      hostWidth: { ...host$o, property: 'width' },
-      hostDirection: { ...host$o, property: 'direction' },
+      hostWidth: { ...host$p, property: 'width' },
+      hostDirection: { ...host$p, property: 'direction' },
     },
   }),
   draggableMixin$1,
@@ -6946,30 +6949,30 @@ const TimerButtonClass = compose(
 )(RawTimerButton);
 
 const globalRefs$u = getThemeRefs$1(globals);
-const vars$Q = TimerButtonClass.cssVarList;
+const vars$R = TimerButtonClass.cssVarList;
 
 const timerButton = {
-  [vars$Q.gap]: globalRefs$u.spacing.sm,
-  [vars$Q.flexDirection]: 'column',
+  [vars$R.gap]: globalRefs$u.spacing.sm,
+  [vars$R.flexDirection]: 'column',
 
   _horizontal: {
-    [vars$Q.flexDirection]: 'row',
+    [vars$R.flexDirection]: 'row',
   },
 
   _fullWidth: {
-    [vars$Q.hostWidth]: '100%',
+    [vars$R.hostWidth]: '100%',
   },
 };
 
 var timerButton$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: timerButton,
-  vars: vars$Q
+  vars: vars$R
 });
 
-const componentName$_ = getComponentName('password-strength');
+const componentName$10 = getComponentName('password-strength');
 class RawPasswordStrength extends createBaseClass$1({
-  componentName: componentName$_,
+  componentName: componentName$10,
   baseSelector: ':host > .wrapper',
 }) {
   static get observedAttributes() {
@@ -7083,7 +7086,7 @@ class RawPasswordStrength extends createBaseClass$1({
   }
 }
 
-const { host: host$n, bar, filledBar, barsContainer, text: text$1 } = {
+const { host: host$o, bar, filledBar, barsContainer, text: text$1 } = {
   host: { selector: () => ':host' },
   bar: { selector: ' .bar' },
   barsContainer: { selector: ' .bars-container' },
@@ -7096,11 +7099,11 @@ const PasswordStrengthClass = compose(
   createStyleMixin$1({
     mappings: {
       hostWidth: [
-        { ...host$n, property: 'width' },
-        { ...host$n, property: 'min-width' },
+        { ...host$o, property: 'width' },
+        { ...host$o, property: 'min-width' },
       ],
-      hostDirection: { ...host$n, property: 'direction' },
-      hostMinWidth: { ...host$n, property: 'min-width' },
+      hostDirection: { ...host$o, property: 'direction' },
+      hostMinWidth: { ...host$o, property: 'min-width' },
       barHeight: { ...bar, property: 'height' },
       barBorderRadius: { ...bar, property: 'border-radius' },
       emptyBarColor: { ...bar, property: 'background-color' },
@@ -7160,22 +7163,22 @@ const passwordStrength = {
   }
 };
 
-const vars$P = {
+const vars$Q = {
   ...compVars$6,
 };
 
 var passwordStrength$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: passwordStrength,
-  vars: vars$P
+  vars: vars$Q
 });
 
 var chevronIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iYmxhY2siIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xNy4yMTkzIDkuMjcyODNDMTcuNjU4NCA4Ljg3OTEyIDE4LjMzMzQgOC45MTU4NyAxOC43MjcyIDkuMzU0OTJDMTkuMTIwOSA5Ljc5Mzk3IDE5LjA4NDEgMTAuNDY5MSAxOC42NDUxIDEwLjg2MjhDMTguNjQ1MSAxMC44NjI4IDEzLjA0NTcgMTYuMDAyMiAxMi42NCAxNi4zNjZDMTIuMjM0MyAxNi43Mjk4IDExLjc2MDggMTYuNzI5OCAxMS4zNTUyIDE2LjM2Nkw1LjM1NDkyIDEwLjg2MjhDNC45MTU4NyAxMC40NjkxIDQuODc5MTIgOS43OTM5NyA1LjI3MjgzIDkuMzU0OTJDNS42NjY1NSA4LjkxNTg3IDYuMzQxNjQgOC44NzkxMiA2Ljc4MDY5IDkuMjcyODNMMTIgMTQuMTM2OEwxNy4yMTkzIDkuMjcyODNaIi8+Cjwvc3ZnPgo=";
 
-const componentName$Z = getComponentName('collapsible-container');
+const componentName$$ = getComponentName('collapsible-container');
 
 class RawCollapsibleContainer extends createBaseClass$1({
-  componentName: componentName$Z,
+  componentName: componentName$$,
   baseSelector: 'slot',
 }) {
   static get observedAttributes() {
@@ -7410,7 +7413,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$Z
+  componentName$$
 );
 
 const { shadowColor: shadowColor$4 } = helperRefs$4;
@@ -7510,7 +7513,7 @@ const collapsibleContainer = {
   }
 };
 
-const vars$O = {
+const vars$P = {
   ...compVars$5,
   ...helperVars$4,
 };
@@ -7518,10 +7521,10 @@ const vars$O = {
 var collapsibleContainer$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: collapsibleContainer,
-  vars: vars$O
+  vars: vars$P
 });
 
-const componentName$Y = getComponentName('recovery-codes');
+const componentName$_ = getComponentName('recovery-codes');
 
 const itemRenderer$3 = ({ value }, _, ref) => {
   return `
@@ -7532,7 +7535,7 @@ const itemRenderer$3 = ({ value }, _, ref) => {
 };
 
 class RawRecoveryCodes extends createBaseClass$1({
-  componentName: componentName$Y,
+  componentName: componentName$_,
   baseSelector: ':host > div',
 }) {
   static get observedAttributes() {
@@ -7672,35 +7675,35 @@ const RecoveryCodesClass = compose(
 )(RawRecoveryCodes);
 
 const globalRefs$r = getThemeRefs$1(globals);
-const vars$N = RecoveryCodesClass.cssVarList;
+const vars$O = RecoveryCodesClass.cssVarList;
 const textVars$5 = TextClass.cssVarList;
 
 const recoveryCodes = {
-  [vars$N.hostMinWidth]: '190px',
-  [vars$N.hostDirection]: globalRefs$r.direction,
-  [vars$N.iconColor]: useVar$1(textVars$5.textColor),
-  [vars$N.iconSize]: useVar$1(textVars$5.fontSize),
-  [vars$N.iconGap]: '8px',
-  [vars$N.bulletGap]: '0.35em',
+  [vars$O.hostMinWidth]: '190px',
+  [vars$O.hostDirection]: globalRefs$r.direction,
+  [vars$O.iconColor]: useVar$1(textVars$5.textColor),
+  [vars$O.iconSize]: useVar$1(textVars$5.fontSize),
+  [vars$O.iconGap]: '8px',
+  [vars$O.bulletGap]: '0.35em',
 
   textAlign: {
-    right: { [vars$N.textAlign]: 'flex-end' },
-    left: { [vars$N.textAlign]: 'flex-start' },
-    center: { [vars$N.textAlign]: 'center' },
+    right: { [vars$O.textAlign]: 'flex-end' },
+    left: { [vars$O.textAlign]: 'flex-start' },
+    center: { [vars$O.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$N.hostWidth]: '100%',
+    [vars$O.hostWidth]: '100%',
   },
 };
 
 var recoveryCodes$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: recoveryCodes,
-  vars: vars$N
+  vars: vars$O
 });
 
-const componentName$X = getComponentName('outbound-apps');
+const componentName$Z = getComponentName('outbound-apps');
 
 const itemRenderer$2 = (
   { name, description, logo, appId, isConnected },
@@ -7746,7 +7749,7 @@ const itemRenderer$2 = (
 };
 
 const BaseClass$5 = createBaseClass$1({
-  componentName: componentName$X,
+  componentName: componentName$Z,
   baseSelector: 'descope-list',
 });
 
@@ -7830,17 +7833,17 @@ class RawOutboundAppsClass extends BaseClass$5 {
   }
 }
 
-const { host: host$m } = {
+const { host: host$n } = {
   host: { selector: () => ':host' },
 };
 
 const OutboundAppsClass = compose(
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$m, property: 'width' },
+      hostWidth: { ...host$n, property: 'width' },
       minHeight: { selector: () => ':host' },
       hostDirection: [
-        { ...host$m, property: 'direction' },
+        { ...host$n, property: 'direction' },
         {
           selector: 'descope-list',
           property: 'direction',
@@ -7922,36 +7925,36 @@ const OutboundAppsClass = compose(
   componentNameValidationMixin$1,
 )(RawOutboundAppsClass);
 
-const vars$M = OutboundAppsClass.cssVarList;
+const vars$N = OutboundAppsClass.cssVarList;
 
 const outboundApps = {
-  [vars$M.iconColor]: globals.colors.primary.main,
-  [vars$M.errorIconColor]: globals.colors.error.main,
+  [vars$N.iconColor]: globals.colors.primary.main,
+  [vars$N.errorIconColor]: globals.colors.error.main,
 
-  [vars$M.appLogoGap]: globals.spacing.md,
-  [vars$M.contentGap]: globals.spacing.xs,
+  [vars$N.appLogoGap]: globals.spacing.md,
+  [vars$N.contentGap]: globals.spacing.xs,
 
   // list-item overrides
-  [vars$M.itemCursor]: 'default',
-  [vars$M.itemOutline]: 'none',
-  [vars$M.itemBorderColor]: 'transparent',
+  [vars$N.itemCursor]: 'default',
+  [vars$N.itemOutline]: 'none',
+  [vars$N.itemBorderColor]: 'transparent',
 
-  [vars$M.listPadding]: '0',
-  [vars$M.listBorderWidth]: '0',
-  [vars$M.listBoxShadow]: 'none',
+  [vars$N.listPadding]: '0',
+  [vars$N.listBorderWidth]: '0',
+  [vars$N.listBoxShadow]: 'none',
 
   size: {
     xs: {
-      [vars$M.fontSize]: '0.6em',
+      [vars$N.fontSize]: '0.6em',
     },
     sm: {
-      [vars$M.fontSize]: '0.8em',
+      [vars$N.fontSize]: '0.8em',
     },
     md: {
-      [vars$M.fontSize]: '1em',
+      [vars$N.fontSize]: '1em',
     },
     lg: {
-      [vars$M.fontSize]: '1.5em',
+      [vars$N.fontSize]: '1.5em',
     },
   },
 };
@@ -7959,13 +7962,13 @@ const outboundApps = {
 var outboundApps$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: outboundApps,
-  vars: vars$M
+  vars: vars$N
 });
 
-const componentName$W = getComponentName('outbound-app-button');
+const componentName$Y = getComponentName('outbound-app-button');
 
 class RawOutboundAppButton extends createBaseClass$1({
-  componentName: componentName$W,
+  componentName: componentName$Y,
   baseSelector: ':host > descope-button',
 }) {
   static get observedAttributes() {
@@ -8064,12 +8067,12 @@ const outboundAppButton = {
   },
 };
 
-const vars$L = compVars$4;
+const vars$M = compVars$4;
 
 var outboundAppButton$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: outboundAppButton,
-  vars: vars$L
+  vars: vars$M
 });
 
 var desktopDeviceIconLight = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwIDE4QzIxLjEgMTggMjEuOTkgMTcuMSAyMS45OSAxNkwyMiA2QzIyIDQuOSAyMS4xIDQgMjAgNEg0QzIuOSA0IDIgNC45IDIgNlYxNkMyIDE3LjEgMi45IDE4IDQgMThIMFYyMEgyNFYxOEgyMFpNNCA2SDIwVjE2SDRWNloiIGZpbGw9IiM2MzZDNzQiLz4KPC9zdmc+Cg==";
@@ -8147,7 +8150,7 @@ const getDeviceIcon = (deviceType) => {
   };
 };
 
-const componentName$V = getComponentName('trusted-devices');
+const componentName$X = getComponentName('trusted-devices');
 
 const itemRenderer$1 = (
   { id, name, lastLoginDate, deviceType, isCurrent },
@@ -8236,7 +8239,7 @@ const itemRenderer$1 = (
 };
 
 const BaseClass$4 = createBaseClass$1({
-  componentName: componentName$V,
+  componentName: componentName$X,
   baseSelector: ListClass.componentName,
 });
 
@@ -8385,17 +8388,17 @@ class RawTrustedDevicesClass extends BaseClass$4 {
   }
 }
 
-const { host: host$l } = {
+const { host: host$m } = {
   host: { selector: () => ':host' },
 };
 
 const TrustedDevicesClass = compose(
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$l, property: 'width' },
-      hostMinWidth: { ...host$l, property: 'min-width' },
+      hostWidth: { ...host$m, property: 'width' },
+      hostMinWidth: { ...host$m, property: 'min-width' },
       hostDirection: [
-        { ...host$l, property: 'direction' },
+        { ...host$m, property: 'direction' },
         {
           selector: () => 'descope-list-item',
           property: 'direction',
@@ -8526,51 +8529,51 @@ const TrustedDevicesClass = compose(
   componentNameValidationMixin$1,
 )(RawTrustedDevicesClass);
 
-const vars$K = TrustedDevicesClass.cssVarList;
+const vars$L = TrustedDevicesClass.cssVarList;
 
 const TrustedDevices = {
-  [vars$K.hostWidth]: 'auto',
-  [vars$K.hostWidth]: '300px',
-  [vars$K.hostMinWidth]: '300px',
-
-  [vars$K.listBackgroundColor]: 'transparent',
-  [vars$K.listBorderRadius]: '0',
-  [vars$K.listBorderWidth]: '0',
-  [vars$K.listPadding]: '0',
-  [vars$K.listBoxShadow]: 'none',
-  [vars$K.listItemsGap]: globals.spacing.lg,
-
-  [vars$K.itemBorderColor]: globals.colors.surface.light,
-  [vars$K.itemVerticalPadding]: globals.spacing.lg,
-  [vars$K.itemHorizontalPadding]: globals.spacing.lg,
-  [vars$K.itemBorderRadius]: globals.radius.xs,
-  [vars$K.itemOutline]: 'transparent',
-  [vars$K.itemBackgroundColor]: 'transparent',
-  [vars$K.itemCursor]: 'default',
-  [vars$K.itemContentGap]: globals.spacing.sm,
-
-  [vars$K.badgeBorderColor]: globals.colors.surface.light,
-  [vars$K.badgeTextColor]: globals.colors.surface.dark,
-  [vars$K.badgeBorderRadius]: globals.radius.xs,
-  [vars$K.badgeBackgroundColor]: globals.colors.surface.main,
-
-  [vars$K.devicePanelGap]: globals.spacing.md,
-  [vars$K.deviceIconGap]: globals.spacing.md,
-  [vars$K.deviceIconSize]: '24px',
-  [vars$K.lastLoginLabelGap]: globals.spacing.xs,
+  [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,
 
   _fullWidth: {
-    [vars$K.hostWidth]: '100%',
+    [vars$L.hostWidth]: '100%',
   },
 };
 
 var trustedDevices = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: TrustedDevices,
-  vars: vars$K
+  vars: vars$L
 });
 
-const componentName$U = getComponentName('tooltip');
+const componentName$W = getComponentName('tooltip');
 
 const tooltipAttrs = [
   'text',
@@ -8581,7 +8584,7 @@ const tooltipAttrs = [
 ];
 
 const BaseClass$3 = createBaseClass$1({
-  componentName: componentName$U,
+  componentName: componentName$W,
   baseSelector: 'vaadin-tooltip',
 });
 
@@ -8814,13 +8817,13 @@ const TooltipClass = compose(
 )(RawTooltip);
 
 const globalRefs$q = getThemeRefs$1(globals);
-const vars$J = TooltipClass.cssVarList;
+const vars$K = 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$U
+  componentName$W
 );
 
 const { shadowColor: shadowColor$3 } = helperRefs$3;
@@ -8828,36 +8831,36 @@ const defaultShadow = `${globalRefs$q.shadow.wide.sm} ${shadowColor$3}, ${global
 
 const tooltip = {
   ...helperTheme$3,
-  [vars$J.fontFamily]: globalRefs$q.fonts.font1.family,
-  [vars$J.fontSize]: globals.typography.body2.size,
-  [vars$J.fontWeight]: globals.typography.body2.weight,
-  [vars$J.textColor]: globalRefs$q.colors.surface.contrast,
-  [vars$J.hostDirection]: globalRefs$q.direction,
-  [vars$J.backgroundColor]: globalRefs$q.colors.surface.main,
-  [vars$J.borderColor]: globalRefs$q.colors.surface.light,
-  [vars$J.borderStyle]: 'solid',
-  [vars$J.borderWidth]: globalRefs$q.border.xs,
-  [vars$J.borderRadius]: globalRefs$q.radius.xs,
-  [vars$J.horizontalPadding]: globalRefs$q.spacing.md,
-  [vars$J.verticalPadding]: globalRefs$q.spacing.sm,
-  [vars$J.boxShadow]: defaultShadow,
+  [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,
 
   shadow: {
     sm: {
-      [vars$J.boxShadow]: defaultShadow,
+      [vars$K.boxShadow]: defaultShadow,
     },
     md: {
-      [vars$J.boxShadow]: `${globalRefs$q.shadow.wide.md} ${shadowColor$3}, ${globalRefs$q.shadow.narrow.md} ${shadowColor$3}`,
+      [vars$K.boxShadow]: `${globalRefs$q.shadow.wide.md} ${shadowColor$3}, ${globalRefs$q.shadow.narrow.md} ${shadowColor$3}`,
     },
     lg: {
-      [vars$J.boxShadow]: `${globalRefs$q.shadow.wide.lg} ${shadowColor$3}, ${globalRefs$q.shadow.narrow.lg} ${shadowColor$3}`,
+      [vars$K.boxShadow]: `${globalRefs$q.shadow.wide.lg} ${shadowColor$3}, ${globalRefs$q.shadow.narrow.lg} ${shadowColor$3}`,
     },
     xl: {
-      [vars$J.boxShadow]: `${globalRefs$q.shadow.wide.xl} ${shadowColor$3}, ${globalRefs$q.shadow.narrow.xl} ${shadowColor$3}`,
+      [vars$K.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$J.boxShadow]: `${globalRefs$q.shadow.wide['2xl']} ${shadowColor$3}`,
+      [vars$K.boxShadow]: `${globalRefs$q.shadow.wide['2xl']} ${shadowColor$3}`,
     },
   },
 };
@@ -8865,6 +8868,1032 @@ const tooltip = {
 var tooltip$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: tooltip,
+  vars: vars$K
+});
+
+// Data service for country/subdivision/city data.
+//
+// Fetches from the CDN/S3 baseUrl. The URL structure (relative to baseUrl):
+//   <baseUrl>/countries.json
+//   <baseUrl>/countries/{iso2}/subdivisions.json
+//   <baseUrl>/countries/{iso2}/subdivisions/{state_code}/cities.json
+//   <baseUrl>/countries/{iso2}/cities.json   (all cities for a country, used when subdivision is hidden)
+//   <parent-of-baseUrl>/labels.json          (shared labels/translations, one level up)
+
+const fetchJson = async (url) => {
+  const response = await fetch(url);
+  if (!response.ok) throw new Error(`[dataService] ${response.status} ${url}`);
+  const json = await response.json();
+  // All files use a { data: [...] } envelope
+  return json.data ?? json;
+};
+
+const fetchCountries = async (baseUrl) =>
+  fetchJson(`${baseUrl}/countries.json`);
+
+const normalizeSubdivisions = (data) =>
+  data.map(({ code, ...rest }) => ({ ...rest, state_code: code }));
+
+const fetchSubdivisions = async (countryIso2, baseUrl) => {
+  try {
+    const data = await fetchJson(
+      `${baseUrl}/countries/${countryIso2}/subdivisions.json`,
+    );
+    return normalizeSubdivisions(data);
+  } catch {
+    // No subdivisions file means the country has no subdivisions
+    return [];
+  }
+};
+
+const fetchCities = async (countryIso2, stateCode, baseUrl) =>
+  fetchJson(
+    `${baseUrl}/countries/${countryIso2}/subdivisions/${stateCode}/cities.json`,
+  );
+
+// labels.json sits one directory above the language-specific base URL
+// e.g. baseUrl = ".../address/en" → labels URL = ".../address/labels.json"
+const fetchLabels = async (baseUrl) => {
+  const labelsUrl = new URL('../labels.json', `${baseUrl}/`).href;
+  return fetchJson(labelsUrl);
+};
+
+const fetchCitiesForCountry = async (countryIso2, baseUrl) =>
+  fetchJson(`${baseUrl}/countries/${countryIso2}/cities.json`);
+
+const componentName$V = getComponentName(
+  'country-subdivision-city-field-internal',
+);
+
+// Sentinel used in #pendingValue to signal that programmatic item selection is in progress.
+// Prevents cascade-clearing logic in input handlers from firing during programmatic selection.
+const SELECTING = Symbol('selecting');
+
+// --- Translation ---
+
+const resolveTranslation = ({ name, translations = {} }, lang) => {
+  if (!lang) return name;
+  return translations[lang] || translations[lang.split('-')[0]] || name;
+};
+
+// --- HTML Escaping ---
+
+const escapeHtml = (str) => {
+  if (!str) return '';
+  return String(str).replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`);
+};
+
+// --- Item renderers ---
+
+const countryItem = ({ name, iso2, iso3, translations, lang }) => {
+  const displayName = resolveTranslation({ name, translations }, lang);
+  const searchTerms = [displayName, iso2, iso3];
+  if (displayName !== name) searchTerms.push(name);
+  const escapedIso2 = escapeHtml(iso2);
+  const escapedSearchTerms = escapeHtml(searchTerms.join(' '));
+  const escapedLabel = escapeHtml(displayName);
+  return `<div data-id="${escapedIso2}" data-name="${escapedSearchTerms}" data-label="${escapedLabel}">${escapedLabel}</div>`;
+};
+
+const subdivisionItem = ({ name, state_code, translations, lang }) => {
+  const displayName = resolveTranslation({ name, translations }, lang);
+  const searchTerms = [displayName, state_code];
+  if (displayName !== name) searchTerms.push(name);
+  const escapedStateCode = escapeHtml(state_code);
+  const escapedSearchTerms = escapeHtml(searchTerms.join(' '));
+  const escapedLabel = escapeHtml(displayName);
+  return `<div data-id="${escapedStateCode}" data-name="${escapedSearchTerms}" data-label="${escapedLabel}">${escapedLabel}</div>`;
+};
+
+const cityItem = ({ name }) => {
+  const escapedId = escapeHtml(name);
+  const escapedName = escapeHtml(name);
+  return `<div data-id="${escapedId}" data-name="${escapedName}">${escapedName}</div>`;
+};
+
+const comboBoxHTML = (id) =>
+  `<descope-combo-box id="${id}" item-label-path="data-name" item-value-path="data-id" allow-custom-value="false"></descope-combo-box>`;
+
+// --- Base class ---
+
+const BaseInputClass$4 = createBaseInputClass$1({
+  componentName: componentName$V,
+  baseSelector: '',
+});
+
+const commonAttrs = ['disabled', 'readonly', 'size', 'bordered'];
+const labelTypeAttrs = [
+  'label-type',
+  'country-label',
+  'subdivision-label',
+  'city-label',
+];
+const visibilityAttrs = ['hide-country', 'hide-subdivision', 'hide-city'];
+const countryConfigAttrs = [
+  'default-country',
+  'allowed-countries',
+  'pinned-countries',
+];
+const placeholderAttrs = [
+  'country-placeholder',
+  'subdivision-placeholder',
+  'city-placeholder',
+];
+const observedAttrs$4 = [
+  ...commonAttrs,
+  ...labelTypeAttrs,
+  ...visibilityAttrs,
+  ...countryConfigAttrs,
+  ...placeholderAttrs,
+  'required',
+  'invalid',
+  'data-source-base-url',
+  'lang',
+];
+
+class RawCountrySubdivisionCityFieldInternal extends BaseInputClass$4 {
+  static get observedAttributes() {
+    return [].concat(BaseInputClass$4.observedAttributes || [], observedAttrs$4);
+  }
+
+  #countryComboBox;
+  #subdivisionComboBox;
+  #cityComboBox;
+
+  // Whether the subdivision/city field should be shown (data was found for selected country/subdivision)
+  #subdivisionVisible = false;
+  #cityVisible = false;
+
+  // iso2 → country object (populated after countries are loaded)
+  #countriesMap = new Map();
+  #cachedCountries = null;
+  #cachedSubdivisions = null;
+  #labels = null;
+
+  // Value requested programmatically before data has loaded.
+  // Applied incrementally as each cascade layer (countries → subdivisions → cities) loads.
+  #pendingValue = null;
+
+  constructor() {
+    super();
+
+    this.innerHTML = `
+      <div class="wrapper">
+        ${comboBoxHTML('country-combo')}
+        ${comboBoxHTML('subdivision-combo')}
+        ${comboBoxHTML('city-combo')}
+      </div>
+    `;
+
+    this.#countryComboBox = this.querySelector('#country-combo');
+    this.#subdivisionComboBox = this.querySelector('#subdivision-combo');
+    this.#cityComboBox = this.querySelector('#city-combo');
+
+    this.#setupValueTransform();
+    this.#setupAttrForwarding();
+  }
+
+  // --- Attribute getters ---
+
+  get #isHideCountry() {
+    return this.getAttribute('hide-country') === 'true';
+  }
+  get #isHideSubdivision() {
+    return this.getAttribute('hide-subdivision') === 'true';
+  }
+  get #isHideCity() {
+    return this.getAttribute('hide-city') === 'true';
+  }
+  get #isNoDataSource() {
+    return !this.#baseUrl;
+  }
+  get #baseUrl() {
+    return this.getAttribute('data-source-base-url') || undefined;
+  }
+  get #lang() {
+    const lang = this.getAttribute('lang') || undefined;
+    if (!lang) return undefined;
+    try {
+      Intl.getCanonicalLocales(lang);
+      return lang;
+    } catch {
+      return undefined; // invalid BCP47 tag — fall back to English
+    }
+  }
+  get #defaultCountry() {
+    return this.getAttribute('default-country')?.toUpperCase() || undefined;
+  }
+  get #subdivisionLabel() {
+    return this.getAttribute('subdivision-label') || undefined;
+  }
+  get #subdivisionPlaceholder() {
+    return this.getAttribute('subdivision-placeholder') || undefined;
+  }
+
+  get #allowedCountries() {
+    return (this.getAttribute('allowed-countries') || '')
+      .split(',')
+      .map((c) => c.trim().toUpperCase())
+      .filter(Boolean);
+  }
+
+  get #pinnedCountries() {
+    return (this.getAttribute('pinned-countries') || '')
+      .split(',')
+      .map((c) => c.trim().toUpperCase())
+      .filter(Boolean);
+  }
+
+  get #allCombos() {
+    return [
+      this.#countryComboBox,
+      this.#subdivisionComboBox,
+      this.#cityComboBox,
+    ];
+  }
+
+  // --- Value ---
+
+  get value() {
+    const country = this.#isHideCountry
+      ? this.#defaultCountry
+      : this.#countryComboBox.value || undefined;
+
+    const subdivision =
+      !this.#isHideSubdivision && this.#subdivisionVisible
+        ? this.#subdivisionComboBox.value || undefined
+        : undefined;
+
+    const city =
+      !this.#isHideCity && this.#cityVisible
+        ? this.#cityComboBox.value || undefined
+        : undefined;
+
+    return { country, subdivision, city };
+  }
+
+  set value(val) {
+    if (!val) return;
+    let parsed;
+    try {
+      parsed = typeof val === 'string' ? JSON.parse(val) : val;
+    } catch {
+      // Invalid JSON — silently ignore to prevent component crash
+      return;
+    }
+    this.#pendingValue = { ...parsed };
+    if (this.#baseUrl) this.#loadForPendingValue();
+  }
+
+  // --- Lifecycle ---
+
+  init() {
+    this.addEventListener('focus', (e) => {
+      if (e.isTrusted) {
+        const firstInvalidCombo = this.#allCombos.find(
+          (combo) =>
+            !combo.classList.contains(`${componentName$V}-hidden`) &&
+            !combo.checkValidity(),
+        );
+        (firstInvalidCombo || this.#getFirstVisibleCombo())?.focus();
+      }
+    });
+
+    super.init?.();
+
+    this.#refreshState();
+    this.#setupChangeListeners();
+    this.#initData();
+    this.#setCombosItemRenderers();
+  }
+
+  #setCombosItemRenderers() {
+    this.#countryComboBox.renderItem = countryItem;
+    this.#subdivisionComboBox.renderItem = subdivisionItem;
+    this.#cityComboBox.renderItem = cityItem;
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+    if (oldValue === newValue) return;
+
+    if (attrName === 'required') {
+      this.#updateRequiredOnCombos();
+    } else if (
+      visibilityAttrs.includes(attrName) ||
+      attrName === 'data-source-base-url'
+    ) {
+      this.#refreshState();
+      if (attrName === 'data-source-base-url') this.#initData();
+    } else if (attrName === 'default-country') {
+      const upper = newValue?.toUpperCase();
+      if (upper && upper !== newValue) {
+        this.setAttribute('default-country', upper);
+        return;
+      }
+      if (upper && this.#countriesMap.size) {
+        this.#onCountrySelected(upper); // countries already loaded — trigger immediately
+      } else if (upper && this.#isHideCountry) {
+        // hide-country mode: countries may not have been loaded yet (e.g. no default-country at init).
+        // Kick off loading now; #loadCountries will call #onCountrySelected once done.
+        this.#loadCountries();
+      }
+    } else if (attrName === 'lang') {
+      this.#rerenderOnLangChange();
+    } else if (attrName === 'invalid') {
+      if (newValue === 'true') this.#handleInvalidCombos();
+    } else if (
+      attrName === 'allowed-countries' ||
+      attrName === 'pinned-countries'
+    ) {
+      if (!this.#isHideCountry) {
+        // Re-render from cache if available to avoid a race condition between two simultaneous
+        // fetch calls (one from data-source-base-url, one from the filter attribute change).
+        if (this.#cachedCountries) {
+          this.#renderCountryItems(this.#cachedCountries);
+        } else {
+          this.#loadCountries();
+        }
+      }
+    } else if (attrName === 'country-label') {
+      this.#setOrRemoveAttr(this.#countryComboBox, 'label', newValue);
+    } else if (attrName === 'subdivision-label') {
+      this.#setOrRemoveAttr(this.#subdivisionComboBox, 'label', newValue);
+    } else if (attrName === 'city-label') {
+      this.#setOrRemoveAttr(this.#cityComboBox, 'label', newValue);
+    }
+  }
+
+  // --- Validation ---
+
+  getValidity() {
+    if (!this.isRequired) return {};
+
+    const countryMissing = !this.#isHideCountry && !this.#countryComboBox.value;
+    const subdivisionMissing =
+      !this.#isHideSubdivision &&
+      (this.#isNoDataSource || this.#subdivisionVisible) &&
+      !this.#subdivisionComboBox.value;
+    const cityMissing =
+      !this.#isHideCity &&
+      (this.#isNoDataSource || this.#cityVisible) &&
+      !this.#cityComboBox.value;
+
+    return countryMissing || subdivisionMissing || cityMissing
+      ? { valueMissing: true }
+      : {};
+  }
+
+  // Show validation errors on the specific combos that are missing a value.
+  // 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$V}-hidden`)) continue;
+      if (!combo.checkValidity()) combo.reportValidity();
+    }
+  }
+
+  // --- Setup ---
+
+  #setupValueTransform() {
+    // Display only the item name in the input, while data-name includes ISO codes for search
+    [this.#countryComboBox, this.#subdivisionComboBox].forEach((combo) => {
+       
+      combo.customValueTransformFn = (val) => {
+        const item = combo.baseElement?.items?.find(
+          (i) => i['data-name'] === val,
+        );
+        return item?.getAttribute('data-label') ?? val;
+      };
+    });
+  }
+
+  #setupAttrForwarding() {
+    // Forward common attrs and label-type to all combos
+    this.#allCombos.forEach((combo) => {
+      forwardAttrs(this, combo, {
+        includeAttrs: [...commonAttrs, 'label-type'],
+      });
+    });
+
+    // Forward default-country as default-value to let the combo box handle initial selection
+    forwardAttrs(this, this.#countryComboBox, {
+      includeAttrs: ['default-country'],
+      mapAttrs: { 'default-country': 'default-value' },
+    });
+
+    // Forward per-field placeholders
+    [
+      [this.#countryComboBox, 'country-placeholder'],
+      [this.#subdivisionComboBox, 'subdivision-placeholder'],
+      [this.#cityComboBox, 'city-placeholder'],
+    ].forEach(([combo, attr]) => {
+      forwardAttrs(this, combo, {
+        includeAttrs: [attr],
+        mapAttrs: { [attr]: 'placeholder' },
+      });
+    });
+  }
+
+  #setupChangeListeners() {
+    // descope-combo-box dispatches 'input' (not 'change') on selection
+    this.#countryComboBox.addEventListener('input', () =>
+      this.#handleCountryChange(),
+    );
+    this.#subdivisionComboBox.addEventListener('input', () =>
+      this.#handleSubdivisionChange(),
+    );
+    this.#cityComboBox.addEventListener('input', () =>
+      this.#dispatchInputEvent(),
+    );
+
+    this.handleFocusEventsDispatching(this.#allCombos);
+  }
+
+  #initData() {
+    // baseUrl is forwarded by the outer component after this element is connected;
+    // wait for the attributeChangedCallback('data-source-base-url') to re-trigger.
+    if (!this.#baseUrl) return;
+
+    if (this.#pendingValue) {
+      this.#loadForPendingValue();
+      return;
+    }
+
+    if (!this.#isHideCountry || this.#defaultCountry) {
+      // Load countries to populate #countriesMap even when hide-country=true, so that
+      // #onCountrySelected can apply the correct subdivision type label for the default country.
+      this.#loadCountries();
+    }
+  }
+
+  // --- Programmatic value loading (parallel fetch) ---
+
+  async #loadForPendingValue() {
+    const {
+      country: pendingCountry,
+      subdivision: pendingSubdivision,
+      city: pendingCity,
+    } = this.#pendingValue;
+
+    const shouldLoadSubdivisions =
+      !!pendingSubdivision && !this.#isHideSubdivision;
+    const shouldLoadCities = !!pendingCity && !this.#isHideCity;
+
+    const countriesPromise =
+      this.#cachedCountries ?? fetchCountries(this.#baseUrl);
+    const labelsPromise = this.#labels ?? fetchLabels(this.#baseUrl);
+    const subdivisionsPromise =
+      shouldLoadSubdivisions && pendingCountry
+        ? fetchSubdivisions(pendingCountry, this.#baseUrl)
+        : null;
+    const citiesPromise =
+      shouldLoadCities && pendingCountry
+        ? shouldLoadSubdivisions && pendingSubdivision
+          ? fetchCities(pendingCountry, pendingSubdivision, this.#baseUrl)
+          : fetchCitiesForCountry(pendingCountry, this.#baseUrl)
+        : null;
+
+    // Fetch everything in parallel; null entries resolve immediately as null
+    const [countries, labels, subdivisions, cities] = (
+      await Promise.allSettled([
+        countriesPromise,
+        labelsPromise,
+        subdivisionsPromise,
+        citiesPromise,
+      ])
+    ).map((result) => (result.status === 'fulfilled' ? result.value : null));
+
+    // Cancelled by a subsequent set value call or user interaction
+    if (!this.#pendingValue) return;
+
+    if (labels) this.#labels = labels;
+
+    // Collect items to select — do this before rendering so we can batch-select below
+    const toSelect = [];
+
+    if (countries) {
+      if (!this.#cachedCountries) {
+        this.#cachedCountries = countries;
+        this.#renderCountryItems(countries);
+      }
+      if (pendingCountry && !this.#isHideCountry)
+        toSelect.push([this.#countryComboBox, pendingCountry]);
+    }
+
+    const countryObj = pendingCountry
+      ? this.#countriesMap.get(pendingCountry)
+      : null;
+    if (countryObj?.subdivisionType)
+      this.#applySubdivisionType(countryObj.subdivisionType);
+
+    if (subdivisions) {
+      this.#cachedSubdivisions = subdivisions;
+      this.#subdivisionVisible = subdivisions.length > 0;
+      if (subdivisions.length > 0) {
+        this.#subdivisionComboBox.data = subdivisions.map((s) => ({
+          ...s,
+          lang: this.#lang,
+        }));
+        if (pendingSubdivision)
+          toSelect.push([this.#subdivisionComboBox, pendingSubdivision]);
+      }
+    }
+
+    if (cities) {
+      this.#cityVisible = cities.length > 0;
+      if (cities.length > 0) {
+        this.#cityComboBox.data = cities;
+        if (pendingCity) toSelect.push([this.#cityComboBox, pendingCity]);
+      }
+    }
+
+    this.#refreshState();
+
+    // Apply all selections in one batch. #pendingValue is set to SELECTING so that
+    // input events fired by selectedItem= don't trigger cascade-clearing in change handlers.
+    this.#pendingValue = SELECTING;
+    setTimeout(() => {
+      if (this.#pendingValue !== SELECTING) return; // cancelled by a new set value call
+      for (const [combo, id] of toSelect) {
+        const item = combo.items?.find((i) => i['data-id'] === id);
+        if (item) combo.selectedItem = item;
+      }
+      this.#pendingValue = null;
+    });
+  }
+
+  // --- Change handlers ---
+
+  #handleCountryChange() {
+    if (this.#pendingValue === SELECTING) return; // programmatic selection in progress
+    this.#pendingValue = null; // cancel any in-flight fetch
+    this.#resetSubdivision();
+    this.#resetCity();
+    this.#onCountrySelected(this.#countryComboBox.value);
+    this.#dispatchInputEvent();
+  }
+
+  #handleSubdivisionChange() {
+    if (this.#pendingValue === SELECTING) return; // programmatic selection in progress
+    this.#pendingValue = null; // cancel any in-flight fetch
+    const subdivisionCode = this.#subdivisionComboBox.value;
+    this.#resetCity();
+
+    if (!this.#isHideCity && subdivisionCode) {
+      const countryIso2 = this.#countryComboBox.value;
+      if (countryIso2) this.#loadCities(countryIso2, subdivisionCode);
+    }
+    this.#dispatchInputEvent();
+  }
+
+  // --- Country selection ---
+
+  #onCountrySelected(countryIso2) {
+    if (!countryIso2) return;
+
+    const country = this.#countriesMap.get(countryIso2);
+    if (!country) return;
+
+    const { hasSubdivisions, subdivisionType } = country;
+
+    if (!this.#isHideSubdivision && hasSubdivisions) {
+      this.#applySubdivisionType(subdivisionType);
+      this.#loadSubdivisions(countryIso2);
+    } else if (!this.#isHideCity) {
+      this.#loadCities(countryIso2);
+    }
+  }
+
+  // Apply subdivisionType as label/placeholder, but only when not overridden by an explicit attribute.
+  #applySubdivisionType(subdivisionType) {
+    const label = this.#resolveSubdivisionTypeLabel(subdivisionType);
+    if (!this.#subdivisionLabel)
+      this.#setOrRemoveAttr(this.#subdivisionComboBox, 'label', label || null);
+    if (!this.#subdivisionPlaceholder)
+      this.#setOrRemoveAttr(
+        this.#subdivisionComboBox,
+        'placeholder',
+        label || null,
+      );
+  }
+
+  #resolveSubdivisionTypeLabel(subdivisionType) {
+    const types = this.#labels?.subdivisionTypes;
+    const entry = types?.[subdivisionType] ?? types?._fallback;
+    if (!entry) return subdivisionType;
+    const lang = this.#lang;
+    return (
+      (lang && (entry[lang] || entry[lang.split('-')[0]])) ||
+      entry.en ||
+      subdivisionType
+    );
+  }
+
+  // --- Data loading ---
+
+  async #loadLabels() {
+    try {
+      this.#labels = await fetchLabels(this.#baseUrl);
+    } catch {
+      // Labels are optional; fall back to raw subdivisionType name
+    }
+  }
+
+  async #loadCountries() {
+    if (!this.#baseUrl) return;
+    this.#countryComboBox.setAttribute('loading', 'true');
+    try {
+      const [countries] = await Promise.all([
+        fetchCountries(this.#baseUrl),
+        this.#loadLabels(),
+      ]);
+      this.#cachedCountries = countries;
+      this.#renderCountryItems(countries);
+      // Skip defaultCountry if a programmatic set value is in flight
+      if (!this.#pendingValue && this.#defaultCountry)
+        this.#onCountrySelected(this.#defaultCountry);
+    } catch (e) {
+       
+      console.error(`[${componentName$V}] Failed to load countries`, e);
+    } finally {
+      this.#countryComboBox.removeAttribute('loading');
+    }
+  }
+
+  async #loadSubdivisions(countryIso2) {
+    this.#setVisible(this.#subdivisionComboBox, true);
+    this.#subdivisionComboBox.setAttribute('loading', 'true');
+    try {
+      const subdivisions = await fetchSubdivisions(countryIso2, this.#baseUrl);
+      this.#cachedSubdivisions = subdivisions;
+      this.#subdivisionVisible = subdivisions.length > 0;
+      this.#refreshState();
+
+      if (subdivisions.length > 0) {
+        this.#subdivisionComboBox.data = subdivisions.map((s) => ({
+          ...s,
+          lang: this.#lang,
+        }));
+      } else if (!this.#isHideCity) {
+        this.#loadCities(countryIso2);
+      }
+    } catch (e) {
+       
+      console.error(
+        `[${componentName$V}] Failed to load subdivisions for ${countryIso2}`,
+        e,
+      );
+      this.#subdivisionVisible = false;
+      this.#applyVisibility();
+    } finally {
+      this.#subdivisionComboBox.removeAttribute('loading');
+    }
+  }
+
+  // stateCode is optional: when omitted, loads all cities for the country
+  async #loadCities(countryIso2, stateCode) {
+    this.#cityComboBox.setAttribute('loading', 'true');
+    try {
+      const cities = await (stateCode
+        ? fetchCities(countryIso2, stateCode, this.#baseUrl)
+        : fetchCitiesForCountry(countryIso2, this.#baseUrl));
+      this.#cityVisible = cities.length > 0;
+      this.#refreshState();
+      if (cities.length > 0) {
+        this.#cityComboBox.data = cities;
+      }
+    } catch (e) {
+       
+      console.error(
+        `[${componentName$V}] Failed to load cities for ${countryIso2}${stateCode ? `/${stateCode}` : ''}`,
+        e,
+      );
+    } finally {
+      this.#cityComboBox.removeAttribute('loading');
+    }
+  }
+
+  #rerenderOnLangChange() {
+    if (this.#cachedCountries) {
+      const prevCountry = this.#countryComboBox.value;
+      this.#renderCountryItems(this.#cachedCountries);
+      if (prevCountry) this.#selectItemById(this.#countryComboBox, prevCountry);
+    }
+    if (this.#cachedSubdivisions && this.#subdivisionVisible) {
+      const prevSubdivision = this.#subdivisionComboBox.value;
+      this.#subdivisionComboBox.data = this.#cachedSubdivisions.map((s) => ({
+        ...s,
+        lang: this.#lang,
+      }));
+      if (prevSubdivision)
+        this.#selectItemById(this.#subdivisionComboBox, prevSubdivision);
+    }
+    // Re-apply translated subdivision type label for the new lang
+    const currentIso2 = this.#countryComboBox.value;
+    if (currentIso2) {
+      const country = this.#countriesMap.get(currentIso2);
+      if (country?.subdivisionType)
+        this.#applySubdivisionType(country.subdivisionType);
+    }
+  }
+
+  // --- Country item rendering ---
+
+  #renderCountryItems(countries) {
+    const result = this.#applyCountryFilters(countries);
+    this.#countryComboBox.data = result.map((c) => ({
+      ...c,
+      // Include the translated name in the data for search purposes, but not in the label which is rendered by renderItem
+      lang: this.#lang,
+    }));
+    this.#countriesMap = new Map(countries.map((c) => [c.iso2, c]));
+  }
+
+  #applyCountryFilters(countries) {
+    const allowed = this.#allowedCountries;
+    const pinned = this.#pinnedCountries;
+
+    let filtered = allowed.length
+      ? countries.filter((c) => allowed.includes(c.iso2))
+      : [...countries];
+
+    filtered.sort((a, b) =>
+      resolveTranslation(a, this.#lang).localeCompare(
+        resolveTranslation(b, this.#lang),
+        this.#lang,
+      ),
+    );
+
+    if (!pinned.length) return filtered;
+
+    const pinnedItems = pinned
+      .map((iso2) => filtered.find((c) => c.iso2 === iso2))
+      .filter(Boolean);
+    const rest = filtered.filter((c) => !pinned.includes(c.iso2));
+    return [...pinnedItems, ...rest];
+  }
+
+  // --- Visibility & required ---
+
+  #applyVisibility() {
+    this.#setVisible(this.#countryComboBox, !this.#isHideCountry);
+    this.#setVisible(
+      this.#subdivisionComboBox,
+      !this.#isHideSubdivision &&
+        (this.#isNoDataSource || this.#subdivisionVisible),
+    );
+    this.#setVisible(
+      this.#cityComboBox,
+      !this.#isHideCity && (this.#isNoDataSource || this.#cityVisible),
+    );
+  }
+
+  #setVisible(el, visible) {
+    el?.classList.toggle(`${componentName$V}-hidden`, !visible);
+  }
+
+  #updateRequiredOnCombos() {
+    const required = this.hasAttribute('required') ? 'true' : null;
+    this.#setOrRemoveAttr(
+      this.#countryComboBox,
+      'required',
+      !this.#isHideCountry ? required : null,
+    );
+    this.#setOrRemoveAttr(
+      this.#subdivisionComboBox,
+      'required',
+      !this.#isHideSubdivision &&
+        (this.#isNoDataSource || this.#subdivisionVisible)
+        ? required
+        : null,
+    );
+    this.#setOrRemoveAttr(
+      this.#cityComboBox,
+      'required',
+      !this.#isHideCity && (this.#isNoDataSource || this.#cityVisible)
+        ? required
+        : null,
+    );
+  }
+
+  #refreshState() {
+    this.#applyVisibility();
+    this.#updateRequiredOnCombos();
+    // Re-evaluate validity so that the form knows when newly-visible required fields become empty.
+    // e.g. subdivision becomes required after a country with states is selected.
+    this.setCustomValidity('');
+  }
+
+  // --- Reset helpers ---
+
+  #resetSubdivision() {
+    this.#subdivisionComboBox.value = '';
+    this.#subdivisionComboBox.data = [];
+    this.#subdivisionVisible = false;
+    // Clear any dynamically set label/placeholder from subdivisionType
+    if (!this.#subdivisionLabel)
+      this.#subdivisionComboBox.removeAttribute('label');
+    if (!this.#subdivisionPlaceholder)
+      this.#subdivisionComboBox.removeAttribute('placeholder');
+    this.#refreshState();
+  }
+
+  #resetCity() {
+    this.#cityComboBox.value = '';
+    this.#cityComboBox.data = [];
+    this.#cityVisible = false;
+    this.#refreshState();
+  }
+
+  // --- Utility helpers ---
+
+  #dispatchInputEvent() {
+    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+  }
+
+  #setOrRemoveAttr(el, attr, value) {
+    if (value) el.setAttribute(attr, value);
+    else el.removeAttribute(attr);
+  }
+
+  #getFirstVisibleCombo() {
+    return this.#allCombos.find(
+      (combo) => !combo.classList.contains(`${componentName$V}-hidden`),
+    );
+  }
+
+  #selectItemById(comboBox, id) {
+    // Defer the lookup so MutationObserver has time to populate comboBox.items
+    setTimeout(() => {
+      const item = comboBox.items?.find((i) => i['data-id'] === id);
+      if (item) comboBox.selectedItem = item;
+    });
+  }
+}
+
+compose()(
+  RawCountrySubdivisionCityFieldInternal,
+);
+
+const componentName$U = getComponentName('country-subdivision-city-field');
+
+const customMixin$b = (superclass) =>
+  class CountrySubdivisionCityFieldMixinClass extends superclass {
+    init() {
+      super.init?.();
+
+      const template = document.createElement('template');
+
+      template.innerHTML = `
+      <${componentName$V}
+        tabindex="-1"
+      ></${componentName$V}>
+      `;
+
+      this.baseElement.appendChild(template.content.cloneNode(true));
+
+      this.inputElement = this.shadowRoot.querySelector(
+        componentName$V,
+      );
+
+      forwardAttrs(this, this.inputElement, {
+        includeAttrs: [
+          'size',
+          'bordered',
+          'required',
+          'label-type',
+          'disabled',
+          'readonly',
+          'hide-country',
+          'hide-subdivision',
+          'hide-city',
+          'default-country',
+          'allowed-countries',
+          'pinned-countries',
+          'country-label',
+          'subdivision-label',
+          'city-label',
+          'country-placeholder',
+          'subdivision-placeholder',
+          'city-placeholder',
+          'data-source-base-url',
+          'lang',
+          'invalid',
+        ],
+      });
+
+      // Sync invalid attribute bidirectionally so external validation feedback propagates
+      syncAttrs(this, this.inputElement, { includeAttrs: ['invalid'] });
+    }
+  };
+
+const host$l = { selector: () => ':host' };
+
+const internalWrapper$2 = {
+  selector: `${componentName$V} > .wrapper`,
+};
+
+const internalComboBoxes = {
+  selector: `${componentName$V} > .wrapper > descope-combo-box`,
+};
+
+const CountrySubdivisionCityFieldClass = compose(
+  createStyleMixin$1({
+    componentNameOverride: getComponentName('input-wrapper'),
+  }),
+  createStyleMixin$1({
+    mappings: {
+      hostWidth: { ...host$l, property: 'width' },
+      hostDirection: [
+        { ...host$l, property: 'direction' },
+        {
+          ...internalComboBoxes,
+          property: ComboBoxClass.cssVarList.hostDirection,
+        },
+      ],
+      flexDirection: { ...internalWrapper$2, property: 'flex-direction' },
+      flexGap: { ...internalWrapper$2, property: 'gap' },
+      itemAlignment: { ...internalWrapper$2, property: 'align-items' },
+      itemMinWidth: { ...internalComboBoxes, property: 'min-width' },
+      itemFlexGrow: { ...internalComboBoxes, property: 'flex-grow' },
+      itemWidth: {
+        ...internalComboBoxes,
+        property: ComboBoxClass.cssVarList.hostWidth,
+      },
+    },
+  }),
+  draggableMixin$1,
+  composedProxyInputMixin$1({
+    proxyProps: ['value'],
+    inputEvent: 'input',
+    proxyParentValidation: true,
+  }),
+  componentNameValidationMixin$1,
+  customMixin$b,
+)(
+  createProxy$1({
+    slots: [],
+    wrappedEleName: 'vaadin-custom-field',
+    style: () => `
+  :host {
+    display: inline-flex;
+    max-width: 100%;
+  }
+  vaadin-custom-field {
+    line-height: unset;
+    width: 100%;
+  }
+
+  ${componentName$V} {
+    display: inline-block;
+    box-sizing: border-box;
+    user-select: none;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  ${componentName$V} > .wrapper {
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+  }
+
+  .${componentName$V}-hidden {
+    display: none;
+  }
+
+`,
+    excludeAttrsSync: ['tabindex', 'style', 'error-message'],
+    componentName: componentName$U,
+  }),
+);
+
+const vars$J = 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',
+
+  _fullWidth: {
+    [vars$J.hostWidth]: '100%',
+  },
+
+  _horizontal: {
+    [vars$J.flexDirection]: 'row',
+    [vars$J.itemFlexGrow]: '1',
+  },
+};
+
+var countrySubdivisionCityField$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: countrySubdivisionCityField,
   vars: vars$J
 });
 
@@ -23259,7 +24288,7 @@ const alert = {
   [vars$2.horizontalPadding]: '0',
   [vars$2.verticalPadding]: '0',
   [vars$2.gap]: `0.5em`,
-  [vars$2.fontSize]: useVar(vars$12.fontSize),
+  [vars$2.fontSize]: useVar(vars$13.fontSize),
 
   mode: {
     error: {
@@ -23540,6 +24569,7 @@ const components = {
   alert: alert$1,
   autocompleteField: autocompleteField$1,
   addressField: addressField$1,
+  countrySubdivisionCityField: countrySubdivisionCityField$1,
   timer: timer$1,
   timerButton: timerButton$1,
   passwordStrength: passwordStrength$1,
@@ -23562,7 +24592,7 @@ const vars = Object.keys(components).reduce(
 );
 
 const defaultTheme = { globals: globals$1, components: theme };
-const themeVars = { globals: vars$14, components: vars };
+const themeVars = { globals: vars$15, components: vars };
 
 const colors = {
   surface: {
@@ -24079,6 +25109,7 @@ exports.CodeSnippetClass = CodeSnippetClass;
 exports.CollapsibleContainerClass = CollapsibleContainerClass;
 exports.ComboBoxClass = ComboBoxClass;
 exports.ContainerClass = ContainerClass;
+exports.CountrySubdivisionCityFieldClass = CountrySubdivisionCityFieldClass;
 exports.DateFieldClass = DateFieldClass;
 exports.DividerClass = DividerClass;
 exports.EmailFieldClass = EmailFieldClass;