@descope/flow-components 3.0.5 → 3.0.7

package/dist/index.cjs.js

@@ -80828,7 +80828,7 @@ function requireIndex_cjs () {
 	  fonts: fonts$1,
 	  direction: direction$1,
 	};
-	const vars$14 = getThemeVars(globals$1);
+	const vars$15 = getThemeVars(globals$1);
 
 	const direction = 'ltr';
 
@@ -81419,6 +81419,9 @@ function requireIndex_cjs () {
 	  'loading',
 	  'allow-custom-value',
 	  'collapsed',
+	  'hide-country',
+	  'hide-subdivision',
+	  'hide-city',
 	];
 
 	const isBooleanAttribute$1 = (attr) => {
@@ -81446,11 +81449,11 @@ function requireIndex_cjs () {
 	            } 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?`,
 	              );
 	            }
 	          }),
-	        {}
+	        {},
 	      );
 	    }
 	  };
@@ -82621,12 +82624,12 @@ function requireIndex_cjs () {
 
 	/* 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() {
@@ -82754,7 +82757,7 @@ function requireIndex_cjs () {
 	  componentNameValidationMixin$1,
 	)(RawImage);
 
-	const componentName$1g = getComponentName('icon');
+	const componentName$1i = getComponentName('icon');
 
 	const IconClass = compose(
 	  createStyleMixin$1({
@@ -82775,7 +82778,7 @@ function requireIndex_cjs () {
       }
       `,
 	    excludeAttrsSync: ['tabindex', 'class', 'style'],
-	    componentName: componentName$1g,
+	    componentName: componentName$1i,
 	  }),
 	);
 
@@ -82790,7 +82793,7 @@ function requireIndex_cjs () {
 	    }
 	  };
 
-	const componentName$1f = getComponentName('button');
+	const componentName$1h = getComponentName('button');
 
 	const resetStyles = `
 	:host {
@@ -82828,7 +82831,7 @@ function requireIndex_cjs () {
 
 	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)' },
@@ -82841,7 +82844,7 @@ function requireIndex_cjs () {
 	    mappings: {
 	      hostWidth: { property: 'width' },
 	      hostHeight: { property: 'height' },
-	      hostDirection: { ...host$w, property: 'direction' },
+	      hostDirection: { ...host$x, property: 'direction' },
 	      fontSize: {},
 	      fontFamily: {},
 
@@ -82906,7 +82909,7 @@ function requireIndex_cjs () {
 			}
 		`,
 	    excludeAttrsSync: ['tabindex', 'class', 'style'],
-	    componentName: componentName$1f,
+	    componentName: componentName$1h,
 	  })
 	);
 
@@ -82954,7 +82957,7 @@ function requireIndex_cjs () {
 	  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,
@@ -83066,7 +83069,7 @@ function requireIndex_cjs () {
 	  },
 	};
 
-	const vars$13 = {
+	const vars$14 = {
 	  ...compVars$9,
 	  ...helperVars$6,
 	};
@@ -83074,13 +83077,13 @@ function requireIndex_cjs () {
 	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() {
@@ -83116,15 +83119,15 @@ function requireIndex_cjs () {
 	  }
 	}
 
-	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' }
@@ -83147,106 +83150,106 @@ function requireIndex_cjs () {
 	)(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 = [
@@ -83273,9 +83276,9 @@ function requireIndex_cjs () {
 	/* 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;
@@ -83480,9 +83483,9 @@ function requireIndex_cjs () {
 	  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();
 
@@ -83539,12 +83542,12 @@ function requireIndex_cjs () {
 	  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' },
@@ -83560,31 +83563,31 @@ function requireIndex_cjs () {
 	)(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,
 	    },
 	  },
 	};
@@ -83592,37 +83595,37 @@ function requireIndex_cjs () {
 	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',
 	    },
 	  },
 	};
@@ -83630,10 +83633,10 @@ function requireIndex_cjs () {
 	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 {
@@ -84018,7 +84021,7 @@ function requireIndex_cjs () {
 	  };
 
 	const {
-	  host: host$t,
+	  host: host$u,
 	  inputField: inputField$6,
 	  inputElement: inputElement$3,
 	  placeholder: placeholder$3,
@@ -84050,10 +84053,10 @@ function requireIndex_cjs () {
 	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' },
@@ -84317,12 +84320,12 @@ function requireIndex_cjs () {
 	    // 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(
@@ -84445,103 +84448,103 @@ function requireIndex_cjs () {
 	      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',
 	  },
 	};
 
@@ -84549,13 +84552,13 @@ function requireIndex_cjs () {
 	  __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() {
@@ -84620,65 +84623,65 @@ function requireIndex_cjs () {
 
 	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,
 	      },
 	    },
 	  },
@@ -84687,12 +84690,12 @@ function requireIndex_cjs () {
 	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() {
@@ -84770,7 +84773,7 @@ function requireIndex_cjs () {
 	  }
 	}
 
-	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' },
@@ -84780,12 +84783,12 @@ function requireIndex_cjs () {
 	  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' },
@@ -84843,39 +84846,39 @@ function requireIndex_cjs () {
 	  },
 	};
 
-	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();
@@ -84928,14 +84931,14 @@ function requireIndex_cjs () {
 	  }),
 	  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() {
@@ -85106,7 +85109,7 @@ function requireIndex_cjs () {
 	  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"'}>
@@ -85126,7 +85129,7 @@ function requireIndex_cjs () {
   </a>
 `;
 
-	const customMixin$d = (superclass) =>
+	const customMixin$e = (superclass) =>
 	  class AppsListMixinClass extends superclass {
 	    // size controls both item logo size and font size
 	    get size() {
@@ -85224,13 +85227,13 @@ function requireIndex_cjs () {
 	  }),
 	  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%;
@@ -85265,60 +85268,60 @@ function requireIndex_cjs () {
 	  }),
 	);
 
-	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,
 	    },
 	  },
 	};
@@ -85326,7 +85329,7 @@ function requireIndex_cjs () {
 	var appsList$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: appsList,
-	  vars: vars$W
+	  vars: vars$X
 	});
 
 	const globalRefs$y = getThemeRefs$1(globals);
@@ -85335,7 +85338,7 @@ function requireIndex_cjs () {
 
 	const [helperTheme$5, helperRefs$5, helperVars$5] = createHelperVars$1(
 	  { shadowColor: '#00000020' },
-	  componentName$16,
+	  componentName$18,
 	);
 
 	const { shadowColor: shadowColor$5 } = helperRefs$5;
@@ -85396,7 +85399,7 @@ function requireIndex_cjs () {
 	  },
 	};
 
-	const vars$V = {
+	const vars$W = {
 	  ...compVars$7,
 	  ...helperVars$5,
 	};
@@ -85404,62 +85407,62 @@ function requireIndex_cjs () {
 	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');
@@ -85478,15 +85481,15 @@ function requireIndex_cjs () {
 	      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, {
@@ -85526,7 +85529,7 @@ function requireIndex_cjs () {
 	    }
 	  };
 
-	const { host: host$r } = {
+	const { host: host$s } = {
 	  host: { selector: () => ':host' },
 	};
 
@@ -85536,9 +85539,9 @@ function requireIndex_cjs () {
 	  }),
 	  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,
@@ -85576,7 +85579,7 @@ function requireIndex_cjs () {
 	    proxyParentValidation: true,
 	  }),
 	  componentNameValidationMixin$1,
-	  customMixin$c,
+	  customMixin$d,
 	)(
 	  createProxy$1({
 	    slots: [],
@@ -85605,34 +85608,34 @@ function requireIndex_cjs () {
     }
   `,
 	    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) => {
@@ -85859,7 +85862,7 @@ function requireIndex_cjs () {
 	  }
 	}
 
-	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';
@@ -85869,16 +85872,16 @@ function requireIndex_cjs () {
 	  [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() {
@@ -85977,9 +85980,9 @@ function requireIndex_cjs () {
 	  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');
@@ -86006,15 +86009,15 @@ function requireIndex_cjs () {
 	      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, {
@@ -86055,7 +86058,7 @@ function requireIndex_cjs () {
 	    }
 	  };
 
-	const { host: host$q } = {
+	const { host: host$r } = {
 	  host: { selector: () => ':host' },
 	};
 
@@ -86065,8 +86068,8 @@ function requireIndex_cjs () {
 	  }),
 	  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,
@@ -86076,7 +86079,7 @@ function requireIndex_cjs () {
 	    proxyParentValidation: true,
 	  }),
 	  componentNameValidationMixin$1,
-	  customMixin$b,
+	  customMixin$c,
 	)(
 	  createProxy$1({
 	    slots: [],
@@ -86092,7 +86095,7 @@ function requireIndex_cjs () {
     width: 100%;
   }
 
-  ${componentName$12} {
+  ${componentName$14} {
     display: inline-block;
     box-sizing: border-box;
     user-select: none;
@@ -86100,30 +86103,30 @@ function requireIndex_cjs () {
     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=";
@@ -86145,12 +86148,12 @@ function requireIndex_cjs () {
 	  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',
 	});
 
@@ -86303,7 +86306,7 @@ function requireIndex_cjs () {
 	  }
 	}
 
-	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' },
@@ -86324,8 +86327,8 @@ function requireIndex_cjs () {
 	      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 },
 	    },
 	  }),
@@ -86334,44 +86337,44 @@ function requireIndex_cjs () {
 	)(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',
@@ -86402,7 +86405,7 @@ function requireIndex_cjs () {
 	};
 
 	const BaseClass$6 = createBaseClass$1({
-	  componentName: componentName$$,
+	  componentName: componentName$11,
 	  baseSelector: ':host > div',
 	});
 
@@ -86494,7 +86497,7 @@ function requireIndex_cjs () {
 	  }
 	}
 
-	const { host: host$o } = {
+	const { host: host$p } = {
 	  host: { selector: () => ':host' }};
 
 	const TimerButtonClass = compose(
@@ -86502,8 +86505,8 @@ function requireIndex_cjs () {
 	    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,
@@ -86511,30 +86514,30 @@ function requireIndex_cjs () {
 	)(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() {
@@ -86648,7 +86651,7 @@ function requireIndex_cjs () {
 	  }
 	}
 
-	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' },
@@ -86661,11 +86664,11 @@ function requireIndex_cjs () {
 	  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' },
@@ -86725,22 +86728,22 @@ function requireIndex_cjs () {
 	  }
 	};
 
-	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() {
@@ -86975,7 +86978,7 @@ function requireIndex_cjs () {
 	  {
 	    shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
 	  },
-	  componentName$Z
+	  componentName$$
 	);
 
 	const { shadowColor: shadowColor$4 } = helperRefs$4;
@@ -87075,7 +87078,7 @@ function requireIndex_cjs () {
 	  }
 	};
 
-	const vars$O = {
+	const vars$P = {
 	  ...compVars$5,
 	  ...helperVars$4,
 	};
@@ -87083,10 +87086,10 @@ function requireIndex_cjs () {
 	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 `
@@ -87097,7 +87100,7 @@ function requireIndex_cjs () {
 	};
 
 	class RawRecoveryCodes extends createBaseClass$1({
-	  componentName: componentName$Y,
+	  componentName: componentName$_,
 	  baseSelector: ':host > div',
 	}) {
 	  static get observedAttributes() {
@@ -87237,35 +87240,35 @@ function requireIndex_cjs () {
 	)(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 },
@@ -87311,7 +87314,7 @@ function requireIndex_cjs () {
 	};
 
 	const BaseClass$5 = createBaseClass$1({
-	  componentName: componentName$X,
+	  componentName: componentName$Z,
 	  baseSelector: 'descope-list',
 	});
 
@@ -87395,17 +87398,17 @@ function requireIndex_cjs () {
 	  }
 	}
 
-	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',
@@ -87487,36 +87490,36 @@ function requireIndex_cjs () {
 	  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',
 	    },
 	  },
 	};
@@ -87524,13 +87527,13 @@ function requireIndex_cjs () {
 	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() {
@@ -87629,12 +87632,12 @@ function requireIndex_cjs () {
 	  },
 	};
 
-	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==";
@@ -87712,7 +87715,7 @@ function requireIndex_cjs () {
 	  };
 	};
 
-	const componentName$V = getComponentName('trusted-devices');
+	const componentName$X = getComponentName('trusted-devices');
 
 	const itemRenderer$1 = (
 	  { id, name, lastLoginDate, deviceType, isCurrent },
@@ -87801,7 +87804,7 @@ function requireIndex_cjs () {
 	};
 
 	const BaseClass$4 = createBaseClass$1({
-	  componentName: componentName$V,
+	  componentName: componentName$X,
 	  baseSelector: ListClass.componentName,
 	});
 
@@ -87950,17 +87953,17 @@ function requireIndex_cjs () {
 	  }
 	}
 
-	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',
@@ -88091,51 +88094,51 @@ function requireIndex_cjs () {
 	  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',
@@ -88146,7 +88149,7 @@ function requireIndex_cjs () {
 	];
 
 	const BaseClass$3 = createBaseClass$1({
-	  componentName: componentName$U,
+	  componentName: componentName$W,
 	  baseSelector: 'vaadin-tooltip',
 	});
 
@@ -88199,237 +88202,1263 @@ function requireIndex_cjs () {
 
 	    this.#hideWrappedParts();
 
-	    this.#setTooltipTarget();
+	    this.#setTooltipTarget();
+
+	    setTimeout(() => this.#onOverlayReady());
+	  }
+
+	  #hideWrappedParts() {
+	    this.tooltip.style.width = '0';
+	    this.tooltip.style.height = '0';
+	    this.tooltip.style.display = 'block';
+	    this.tooltip.style.overflow = 'hidden';
+	    this.tooltip.style.position = 'absolute';
+	  }
+	  
+	  #revealWrappedParts() {
+	    this.tooltip.style.width = '100%';
+	    this.tooltip.style.height = '100%';
+	    this.tooltip.style.position = 'static';
+	    this.tooltip.style.overflow = 'visible';
+	    this.tooltip.textContent = '';
+	    this.overlay.style.display = 'block';
+	    this.overlay.style.position = 'static';
+	  }
+
+	  #onOverlayReady() {
+	    this.#initTooltipTextComponent();
+	    this.#overrideAttachOverlay();
+
+	    forwardAttrs(this, this.tooltip, {
+	      includeAttrs: ['position', 'opened'],
+	    });
+
+	    this.#handleTooltipVisibility();
+	  }
+
+	  #setTooltipTarget() {
+	    if (!this.children?.length) return;
+
+	    let ele = Array.from(this.children).find(
+	      (child) => child !== this.tooltip,
+	    );
+
+	    if (!ele) return;
+
+	    this.tooltip.target = ele;
+	  }
+
+	  #clearOverlayContentNode() {
+	    this.overlayContentNode.innerHTML = '';
+	  }
+
+	  #createEnrichedTextComponent() {
+	    const enrichedText = document.createElement('descope-enriched-text');
+
+	    enrichedText.setAttribute('link-target-blank', 'true');
+	    enrichedText.textContent = this.tooltipText;
+
+	    return enrichedText;
+	  }
+
+	  #initTooltipTextComponent() {
+	    if (!this.overlayContentNode) return;
+
+	    setTimeout(() => {
+	      this.#clearOverlayContentNode();
+
+	      this.textComponent = this.#createEnrichedTextComponent();
+
+	      this.overlayContentNode.appendChild(this.textComponent);
+
+	      forwardAttrs(this, this.textComponent, {
+	        includeAttrs: ['readonly'],
+	      });
+	    });
+	  }
+
+	  // the default vaadin behavior is to attach the overlay to the body when opened
+	  // we do not want that because it's difficult to style the overlay in this way
+	  // so we override it to open inside the shadow DOM
+	  #overrideAttachOverlay() {
+	    if (!this.overlay) return;
+
+	    if (this.isOpened) {
+	      // When `opened` attr is used, vaadin doesn't execute `_attachOverlay`,
+	      // and the overlay element is rendered outside the component, on the top
+	      // level. We need to move it back to the local component's DOM.
+	      setTimeout(() => {
+	        this.tooltip.shadowRoot.appendChild(this.overlay);
+	        this.#handleStaticDisplay();
+	      });
+	    } else {
+	      this.overlay._detachOverlay = () => {};
+
+	      this.overlay._attachOverlay = () =>
+	        this.tooltip.shadowRoot.appendChild(this.overlay);
+	    }
+	  }
+
+	  #handleTooltipVisibility() {
+	    // This is Vaadin's API for manual control of tooltip visibility
+	    this.tooltip?.toggleAttribute('manual', this.isOpened);
+	  }
+
+	  #updateText(value) {
+	    if (!this.textComponent) return;
+	    this.textComponent.textContent = value?.trim();
+	  }
+
+	  attributeChangedCallback(attrName, oldValue, newValue) {
+	    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+	    if (oldValue !== newValue) {
+	      if (attrName === 'text') {
+	        this.#updateText(newValue);
+	      }
+
+	      if (attrName === 'opened') {
+	        this.#handleTooltipVisibility(attrName, newValue);
+	      }
+	    }
+	  }
+	}
+
+	const { overlay: overlay$1, content } = {
+	  overlay: { selector: () => 'vaadin-tooltip-overlay::part(overlay)' },
+	  content: { selector: () => 'vaadin-tooltip-overlay::part(content)' },
+	};
+
+	/**
+	 * This component has no Shadow DOM of its own, so we can't add styles to it
+	 * (otherwise it would affect the rest of the DOM).
+	 * Note that all styles are within PortalMixin.
+	 */
+	const TooltipClass = compose(
+	  componentNameValidationMixin$1,
+	  portalMixin$1({
+	    selector: '',
+	    mappings: {
+	      fontFamily: {
+	        ...content,
+	        property: EnrichedTextClass.cssVarList.fontFamilyOverride,
+	      },
+	      fontSize: {
+	        ...content,
+	        property: EnrichedTextClass.cssVarList.fontSizeOverride,
+	      },
+	      fontWeight: {
+	        ...content,
+	        property: EnrichedTextClass.cssVarList.fontWeightOverride,
+	      },
+	      textColor: {
+	        ...content,
+	        property: EnrichedTextClass.cssVarList.textColorOverride,
+	      },
+	      hostDirection: {
+	        ...content,
+	        property: EnrichedTextClass.cssVarList.hostDirectionOverride,
+	      },
+	      backgroundColor: [{ ...overlay$1 }, { ...content }],
+	      borderColor: { ...overlay$1 },
+	      borderStyle: { ...overlay$1 },
+	      borderWidth: { ...overlay$1 },
+	      borderRadius: { ...overlay$1 },
+	      boxShadow: { ...overlay$1 },
+	      horizontalPadding: [
+	        { ...content, property: 'padding-left' },
+	        { ...content, property: 'padding-right' },
+	      ],
+	      verticalPadding: [
+	        { ...content, property: 'padding-top' },
+	        { ...content, property: 'padding-bottom' },
+	      ],
+	    },
+	    forward: {
+	      attributes: ['style'],
+	      include: false,
+	    },
+	  }),
+	)(RawTooltip);
+
+	const globalRefs$q = getThemeRefs$1(globals);
+	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$W
+	);
+
+	const { shadowColor: shadowColor$3 } = helperRefs$3;
+	const defaultShadow = `${globalRefs$q.shadow.wide.sm} ${shadowColor$3}, ${globalRefs$q.shadow.narrow.sm} ${shadowColor$3}`;
+
+	const tooltip = {
+	  ...helperTheme$3,
+	  [vars$K.fontFamily]: globalRefs$q.fonts.font1.family,
+	  [vars$K.fontSize]: globals.typography.body2.size,
+	  [vars$K.fontWeight]: globals.typography.body2.weight,
+	  [vars$K.textColor]: globalRefs$q.colors.surface.contrast,
+	  [vars$K.hostDirection]: globalRefs$q.direction,
+	  [vars$K.backgroundColor]: globalRefs$q.colors.surface.main,
+	  [vars$K.borderColor]: globalRefs$q.colors.surface.light,
+	  [vars$K.borderStyle]: 'solid',
+	  [vars$K.borderWidth]: globalRefs$q.border.xs,
+	  [vars$K.borderRadius]: globalRefs$q.radius.xs,
+	  [vars$K.horizontalPadding]: globalRefs$q.spacing.md,
+	  [vars$K.verticalPadding]: globalRefs$q.spacing.sm,
+	  [vars$K.boxShadow]: defaultShadow,
+
+	  shadow: {
+	    sm: {
+	      [vars$K.boxShadow]: defaultShadow,
+	    },
+	    md: {
+	      [vars$K.boxShadow]: `${globalRefs$q.shadow.wide.md} ${shadowColor$3}, ${globalRefs$q.shadow.narrow.md} ${shadowColor$3}`,
+	    },
+	    lg: {
+	      [vars$K.boxShadow]: `${globalRefs$q.shadow.wide.lg} ${shadowColor$3}, ${globalRefs$q.shadow.narrow.lg} ${shadowColor$3}`,
+	    },
+	    xl: {
+	      [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$K.boxShadow]: `${globalRefs$q.shadow.wide['2xl']} ${shadowColor$3}`,
+	    },
+	  },
+	};
+
+	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 ---
 
-	    setTimeout(() => this.#onOverlayReady());
+	  #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]));
 	  }
 
-	  #hideWrappedParts() {
-	    this.tooltip.style.width = '0';
-	    this.tooltip.style.height = '0';
-	    this.tooltip.style.display = 'block';
-	    this.tooltip.style.overflow = 'hidden';
-	    this.tooltip.style.position = 'absolute';
-	  }
-	  
-	  #revealWrappedParts() {
-	    this.tooltip.style.width = '100%';
-	    this.tooltip.style.height = '100%';
-	    this.tooltip.style.position = 'static';
-	    this.tooltip.style.overflow = 'visible';
-	    this.tooltip.textContent = '';
-	    this.overlay.style.display = 'block';
-	    this.overlay.style.position = 'static';
-	  }
+	  #applyCountryFilters(countries) {
+	    const allowed = this.#allowedCountries;
+	    const pinned = this.#pinnedCountries;
 
-	  #onOverlayReady() {
-	    this.#initTooltipTextComponent();
-	    this.#overrideAttachOverlay();
+	    let filtered = allowed.length
+	      ? countries.filter((c) => allowed.includes(c.iso2))
+	      : [...countries];
 
-	    forwardAttrs(this, this.tooltip, {
-	      includeAttrs: ['position', 'opened'],
-	    });
+	    filtered.sort((a, b) =>
+	      resolveTranslation(a, this.#lang).localeCompare(
+	        resolveTranslation(b, this.#lang),
+	        this.#lang,
+	      ),
+	    );
 
-	    this.#handleTooltipVisibility();
+	    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];
 	  }
 
-	  #setTooltipTarget() {
-	    if (!this.children?.length) return;
+	  // --- Visibility & required ---
 
-	    let ele = Array.from(this.children).find(
-	      (child) => child !== this.tooltip,
+	  #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),
+	    );
+	  }
 
-	    if (!ele) return;
+	  #setVisible(el, visible) {
+	    el?.classList.toggle(`${componentName$V}-hidden`, !visible);
+	  }
 
-	    this.tooltip.target = ele;
+	  #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,
+	    );
 	  }
 
-	  #clearOverlayContentNode() {
-	    this.overlayContentNode.innerHTML = '';
+	  #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('');
 	  }
 
-	  #createEnrichedTextComponent() {
-	    const enrichedText = document.createElement('descope-enriched-text');
+	  // --- Reset helpers ---
 
-	    enrichedText.setAttribute('link-target-blank', 'true');
-	    enrichedText.textContent = this.tooltipText;
+	  #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();
+	  }
 
-	    return enrichedText;
+	  #resetCity() {
+	    this.#cityComboBox.value = '';
+	    this.#cityComboBox.data = [];
+	    this.#cityVisible = false;
+	    this.#refreshState();
 	  }
 
-	  #initTooltipTextComponent() {
-	    if (!this.overlayContentNode) return;
+	  // --- Utility helpers ---
 
-	    setTimeout(() => {
-	      this.#clearOverlayContentNode();
+	  #dispatchInputEvent() {
+	    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+	  }
 
-	      this.textComponent = this.#createEnrichedTextComponent();
+	  #setOrRemoveAttr(el, attr, value) {
+	    if (value) el.setAttribute(attr, value);
+	    else el.removeAttribute(attr);
+	  }
 
-	      this.overlayContentNode.appendChild(this.textComponent);
+	  #getFirstVisibleCombo() {
+	    return this.#allCombos.find(
+	      (combo) => !combo.classList.contains(`${componentName$V}-hidden`),
+	    );
+	  }
 
-	      forwardAttrs(this, this.textComponent, {
-	        includeAttrs: ['readonly'],
-	      });
+	  #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;
 	    });
 	  }
+	}
 
-	  // the default vaadin behavior is to attach the overlay to the body when opened
-	  // we do not want that because it's difficult to style the overlay in this way
-	  // so we override it to open inside the shadow DOM
-	  #overrideAttachOverlay() {
-	    if (!this.overlay) return;
+	compose()(
+	  RawCountrySubdivisionCityFieldInternal,
+	);
 
-	    if (this.isOpened) {
-	      // When `opened` attr is used, vaadin doesn't execute `_attachOverlay`,
-	      // and the overlay element is rendered outside the component, on the top
-	      // level. We need to move it back to the local component's DOM.
-	      setTimeout(() => {
-	        this.tooltip.shadowRoot.appendChild(this.overlay);
-	        this.#handleStaticDisplay();
-	      });
-	    } else {
-	      this.overlay._detachOverlay = () => {};
+	const componentName$U = getComponentName('country-subdivision-city-field');
 
-	      this.overlay._attachOverlay = () =>
-	        this.tooltip.shadowRoot.appendChild(this.overlay);
-	    }
-	  }
+	const customMixin$b = (superclass) =>
+	  class CountrySubdivisionCityFieldMixinClass extends superclass {
+	    init() {
+	      super.init?.();
 
-	  #handleTooltipVisibility() {
-	    // This is Vaadin's API for manual control of tooltip visibility
-	    this.tooltip?.toggleAttribute('manual', this.isOpened);
-	  }
+	      const template = document.createElement('template');
 
-	  #updateText(value) {
-	    if (!this.textComponent) return;
-	    this.textComponent.textContent = value?.trim();
-	  }
+	      template.innerHTML = `
+      <${componentName$V}
+        tabindex="-1"
+      ></${componentName$V}>
+      `;
 
-	  attributeChangedCallback(attrName, oldValue, newValue) {
-	    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+	      this.baseElement.appendChild(template.content.cloneNode(true));
 
-	    if (oldValue !== newValue) {
-	      if (attrName === 'text') {
-	        this.#updateText(newValue);
-	      }
+	      this.inputElement = this.shadowRoot.querySelector(
+	        componentName$V,
+	      );
 
-	      if (attrName === 'opened') {
-	        this.#handleTooltipVisibility(attrName, newValue);
-	      }
+	      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 { overlay: overlay$1, content } = {
-	  overlay: { selector: () => 'vaadin-tooltip-overlay::part(overlay)' },
-	  content: { selector: () => 'vaadin-tooltip-overlay::part(content)' },
+	const host$l = { selector: () => ':host' };
+
+	const internalWrapper$2 = {
+	  selector: `${componentName$V} > .wrapper`,
 	};
 
-	/**
-	 * This component has no Shadow DOM of its own, so we can't add styles to it
-	 * (otherwise it would affect the rest of the DOM).
-	 * Note that all styles are within PortalMixin.
-	 */
-	const TooltipClass = compose(
-	  componentNameValidationMixin$1,
-	  portalMixin$1({
-	    selector: '',
+	const internalComboBoxes = {
+	  selector: `${componentName$V} > .wrapper > descope-combo-box`,
+	};
+
+	const CountrySubdivisionCityFieldClass = compose(
+	  createStyleMixin$1({
+	    componentNameOverride: getComponentName('input-wrapper'),
+	  }),
+	  createStyleMixin$1({
 	    mappings: {
-	      fontFamily: {
-	        ...content,
-	        property: EnrichedTextClass.cssVarList.fontFamilyOverride,
-	      },
-	      fontSize: {
-	        ...content,
-	        property: EnrichedTextClass.cssVarList.fontSizeOverride,
-	      },
-	      fontWeight: {
-	        ...content,
-	        property: EnrichedTextClass.cssVarList.fontWeightOverride,
-	      },
-	      textColor: {
-	        ...content,
-	        property: EnrichedTextClass.cssVarList.textColorOverride,
-	      },
-	      hostDirection: {
-	        ...content,
-	        property: EnrichedTextClass.cssVarList.hostDirectionOverride,
-	      },
-	      backgroundColor: [{ ...overlay$1 }, { ...content }],
-	      borderColor: { ...overlay$1 },
-	      borderStyle: { ...overlay$1 },
-	      borderWidth: { ...overlay$1 },
-	      borderRadius: { ...overlay$1 },
-	      boxShadow: { ...overlay$1 },
-	      horizontalPadding: [
-	        { ...content, property: 'padding-left' },
-	        { ...content, property: 'padding-right' },
-	      ],
-	      verticalPadding: [
-	        { ...content, property: 'padding-top' },
-	        { ...content, property: 'padding-bottom' },
+	      hostWidth: { ...host$l, property: 'width' },
+	      hostDirection: [
+	        { ...host$l, property: 'direction' },
+	        {
+	          ...internalComboBoxes,
+	          property: ComboBoxClass.cssVarList.hostDirection,
+	        },
 	      ],
-	    },
-	    forward: {
-	      attributes: ['style'],
-	      include: false,
+	      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,
+	      },
 	    },
 	  }),
-	)(RawTooltip);
+	  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%;
+  }
 
-	const globalRefs$q = getThemeRefs$1(globals);
-	const vars$J = TooltipClass.cssVarList;
+  ${componentName$V} {
+    display: inline-block;
+    box-sizing: border-box;
+    user-select: none;
+    width: 100%;
+    max-width: 100%;
+  }
 
-	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$V} > .wrapper {
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+  }
+
+  .${componentName$V}-hidden {
+    display: none;
+  }
+
+`,
+	    excludeAttrsSync: ['tabindex', 'style', 'error-message'],
+	    componentName: componentName$U,
+	  }),
 	);
 
-	const { shadowColor: shadowColor$3 } = helperRefs$3;
-	const defaultShadow = `${globalRefs$q.shadow.wide.sm} ${shadowColor$3}, ${globalRefs$q.shadow.narrow.sm} ${shadowColor$3}`;
+	const vars$J = CountrySubdivisionCityFieldClass.cssVarList;
 
-	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,
+	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',
 
-	  shadow: {
-	    sm: {
-	      [vars$J.boxShadow]: defaultShadow,
-	    },
-	    md: {
-	      [vars$J.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}`,
-	    },
-	    xl: {
-	      [vars$J.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}`,
-	    },
+	  _fullWidth: {
+	    [vars$J.hostWidth]: '100%',
+	  },
+
+	  _horizontal: {
+	    [vars$J.flexDirection]: 'row',
+	    [vars$J.itemFlexGrow]: '1',
 	  },
 	};
 
-	var tooltip$1 = /*#__PURE__*/Object.freeze({
+	var countrySubdivisionCityField$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
-	  default: tooltip,
+	  default: countrySubdivisionCityField,
 	  vars: vars$J
 	});
 
@@ -102824,7 +103853,7 @@ descope-enriched-text {
 	  [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: {
@@ -103105,6 +104134,7 @@ descope-enriched-text {
 	  alert: alert$1,
 	  autocompleteField: autocompleteField$1,
 	  addressField: addressField$1,
+	  countrySubdivisionCityField: countrySubdivisionCityField$1,
 	  timer: timer$1,
 	  timerButton: timerButton$1,
 	  passwordStrength: passwordStrength$1,
@@ -103127,7 +104157,7 @@ descope-enriched-text {
 	);
 
 	const defaultTheme = { globals: globals$1, components: theme };
-	const themeVars = { globals: vars$14, components: vars };
+	const themeVars = { globals: vars$15, components: vars };
 
 	const colors = {
 	  surface: {
@@ -103644,6 +104674,7 @@ descope-enriched-text {
 	index_cjs$4.CollapsibleContainerClass = CollapsibleContainerClass;
 	index_cjs$4.ComboBoxClass = ComboBoxClass;
 	index_cjs$4.ContainerClass = ContainerClass;
+	index_cjs$4.CountrySubdivisionCityFieldClass = CountrySubdivisionCityFieldClass;
 	index_cjs$4.DateFieldClass = DateFieldClass;
 	index_cjs$4.DividerClass = DividerClass;
 	index_cjs$4.EmailFieldClass = EmailFieldClass;
@@ -103785,6 +104816,7 @@ const SecurityQuestionsVerifyClass = index_cjsExports.SecurityQuestionsVerifyCla
 const HybridFieldClass = index_cjsExports.HybridFieldClass;
 const AlertClass = index_cjsExports.AlertClass;
 const AddressFieldClass = index_cjsExports.AddressFieldClass;
+const CountrySubdivisionCityFieldClass = index_cjsExports.CountrySubdivisionCityFieldClass;
 const TimerButtonClass = index_cjsExports.TimerButtonClass;
 const CollapsibleContainerClass = index_cjsExports.CollapsibleContainerClass;
 const RecoveryCodesClass = index_cjsExports.RecoveryCodesClass;
@@ -104271,6 +105303,8 @@ const Alert = React__default.default.forwardRef(({ children, ...props }, ref) =>
 
 const AddressField = React__default.default.forwardRef(({ size = 'md', ...props }, ref) => (React__default.default.createElement("descope-address-field", { size: size, ...props, ref: ref })));
 
+const CountrySubdivisionCityField = React__default.default.forwardRef(({ size = 'md', ...props }, ref) => (React__default.default.createElement("descope-country-subdivision-city-field", { size: size, ...props, ref: ref })));
+
 const TimerButton = React__default.default.forwardRef(({ children, color = 'primary', size = 'md', variant = 'contained', horizontal = false, 'text-align': textAlign = 'center', 'timer-seconds': timerSeconds = 0, 'timer-hide-icon': timerHideIcon = false, 'timer-paused': timerPause = false, ...props }, ref) => (React__default.default.createElement("descope-timer-button", { ...props, size: size, "text-align": textAlign, horizontal: horizontal, "button-variant": variant, "button-mode": color, "timer-hide-icon": timerHideIcon, "timer-seconds": timerSeconds, "timer-paused": timerPause, ref: ref }, children)));
 
 const applyDefaults = ({ paddingX, paddingY, background, spaceBetween }) => ({
@@ -104367,6 +105401,8 @@ exports.ComboBox = ComboBox;
 exports.ComboBoxClass = ComboBoxClass;
 exports.Container = Container$1;
 exports.ContainerClass = ContainerClass;
+exports.CountrySubdivisionCityField = CountrySubdivisionCityField;
+exports.CountrySubdivisionCityFieldClass = CountrySubdivisionCityFieldClass;
 exports.DateField = DateField;
 exports.DateFieldClass = DateFieldClass;
 exports.Divider = Divider;