@descope/web-components-ui 1.0.365 → 1.0.367

package/dist/cjs/index.cjs.js

@@ -641,7 +641,7 @@ const globals = {
   fonts,
   direction,
 };
-const vars$J = getThemeVars(globals);
+const vars$M = getThemeVars(globals);
 
 const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
 
@@ -1148,7 +1148,7 @@ const createProxy = ({
         .map(
           (
             slot // when slot is an empty string, we will create the default slot (without a name)
-          ) => `<slot ${slot ? `name="${slot}" slot="${slot}"` : ''} ></slot>`
+          ) => `<slot ${slot ? `name="${slot}" slot="${slot}"` : ''}></slot>`
         )
         .join('')}
 			</${wrappedEleName}>
@@ -2070,6 +2070,7 @@ const inputValidationMixin = (superclass) =>
         badInput,
         customError,
       } = flags;
+
       switch (true) {
         case valueMissing:
           return (
@@ -2082,7 +2083,9 @@ const inputValidationMixin = (superclass) =>
           );
         case typeMismatch:
           return (
-            this.getAttribute(errorAttributes.typeMismatch) || this.defaultErrorMsgTypeMismatch
+            this.getAttribute(errorAttributes.typeMismatch) ||
+            this.getAttribute(errorAttributes.patternMismatch) ||
+            this.defaultErrorMsgTypeMismatch
           );
         case tooShort:
           return this.getAttribute(errorAttributes.tooShort) || this.defaultErrorMsgTooShort;
@@ -2656,9 +2659,9 @@ const createIcon = async (src) => {
 
 /* eslint-disable no-use-before-define */
 
-const componentName$S = getComponentName('icon');
+const componentName$V = getComponentName('icon');
 
-class RawIcon extends createBaseClass({ componentName: componentName$S, baseSelector: 'slot' }) {
+class RawIcon extends createBaseClass({ componentName: componentName$V, baseSelector: 'slot' }) {
   static get observedAttributes() {
     return ['src', 'fill-color'];
   }
@@ -2756,7 +2759,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$R = getComponentName('button');
+const componentName$U = getComponentName('button');
 
 const resetStyles = `
 	:host {
@@ -2872,7 +2875,7 @@ const ButtonClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$R,
+    componentName: componentName$U,
   })
 );
 
@@ -2909,139 +2912,139 @@ loadingIndicatorStyles = `
 	}
 `;
 
-const globalRefs$s = getThemeRefs(globals);
-const compVars$5 = ButtonClass.cssVarList;
+const globalRefs$v = getThemeRefs(globals);
+const compVars$6 = ButtonClass.cssVarList;
 
 const mode = {
-  primary: globalRefs$s.colors.primary,
-  secondary: globalRefs$s.colors.secondary,
-  success: globalRefs$s.colors.success,
-  error: globalRefs$s.colors.error,
-  surface: globalRefs$s.colors.surface,
+  primary: globalRefs$v.colors.primary,
+  secondary: globalRefs$v.colors.secondary,
+  success: globalRefs$v.colors.success,
+  error: globalRefs$v.colors.error,
+  surface: globalRefs$v.colors.surface,
 };
 
-const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$R);
+const [helperTheme$4, helperRefs$4, helperVars$4] = createHelperVars({ mode }, componentName$U);
 
 const button = {
-  ...helperTheme$3,
+  ...helperTheme$4,
 
-  [compVars$5.fontFamily]: globalRefs$s.fonts.font1.family,
+  [compVars$6.fontFamily]: globalRefs$v.fonts.font1.family,
 
-  [compVars$5.cursor]: 'pointer',
-  [compVars$5.hostHeight]: '3em',
-  [compVars$5.hostWidth]: 'auto',
-  [compVars$5.hostDirection]: globalRefs$s.direction,
+  [compVars$6.cursor]: 'pointer',
+  [compVars$6.hostHeight]: '3em',
+  [compVars$6.hostWidth]: 'auto',
+  [compVars$6.hostDirection]: globalRefs$v.direction,
 
-  [compVars$5.borderRadius]: globalRefs$s.radius.sm,
-  [compVars$5.borderWidth]: globalRefs$s.border.xs,
-  [compVars$5.borderStyle]: 'solid',
-  [compVars$5.borderColor]: 'transparent',
+  [compVars$6.borderRadius]: globalRefs$v.radius.sm,
+  [compVars$6.borderWidth]: globalRefs$v.border.xs,
+  [compVars$6.borderStyle]: 'solid',
+  [compVars$6.borderColor]: 'transparent',
 
-  [compVars$5.labelSpacing]: '0.25em',
+  [compVars$6.labelSpacing]: '0.25em',
 
-  [compVars$5.textAlign]: 'center', // default text align center
+  [compVars$6.textAlign]: 'center', // default text align center
   textAlign: {
-    right: { [compVars$5.textAlign]: 'right' },
-    left: { [compVars$5.textAlign]: 'left' },
-    center: { [compVars$5.textAlign]: 'center' },
+    right: { [compVars$6.textAlign]: 'right' },
+    left: { [compVars$6.textAlign]: 'left' },
+    center: { [compVars$6.textAlign]: 'center' },
   },
 
-  [compVars$5.verticalPadding]: '1em',
-  [compVars$5.horizontalPadding]: '0.875em',
+  [compVars$6.verticalPadding]: '1em',
+  [compVars$6.horizontalPadding]: '0.875em',
 
-  [compVars$5.outlineWidth]: globals.border.sm,
-  [compVars$5.outlineOffset]: '0px', // keep `px` unit for external calc
-  [compVars$5.outlineStyle]: 'solid',
-  [compVars$5.outlineColor]: 'transparent',
+  [compVars$6.outlineWidth]: globals.border.sm,
+  [compVars$6.outlineOffset]: '0px', // keep `px` unit for external calc
+  [compVars$6.outlineStyle]: 'solid',
+  [compVars$6.outlineColor]: 'transparent',
 
-  [compVars$5.iconSize]: '1.5em',
-  [compVars$5.iconColor]: 'currentColor',
+  [compVars$6.iconSize]: '1.5em',
+  [compVars$6.iconColor]: 'currentColor',
 
   size: {
-    xs: { [compVars$5.fontSize]: '12px' },
-    sm: { [compVars$5.fontSize]: '14px' },
-    md: { [compVars$5.fontSize]: '16px' },
-    lg: { [compVars$5.fontSize]: '18px' },
+    xs: { [compVars$6.fontSize]: '12px' },
+    sm: { [compVars$6.fontSize]: '14px' },
+    md: { [compVars$6.fontSize]: '16px' },
+    lg: { [compVars$6.fontSize]: '18px' },
   },
 
   _square: {
-    [compVars$5.hostHeight]: '3em',
-    [compVars$5.hostWidth]: '3em',
-    [compVars$5.verticalPadding]: '0',
+    [compVars$6.hostHeight]: '3em',
+    [compVars$6.hostWidth]: '3em',
+    [compVars$6.verticalPadding]: '0',
   },
 
   _fullWidth: {
-    [compVars$5.hostWidth]: '100%',
+    [compVars$6.hostWidth]: '100%',
   },
 
   _loading: {
-    [compVars$5.cursor]: 'wait',
-    [compVars$5.labelTextColor]: helperRefs$3.main,
+    [compVars$6.cursor]: 'wait',
+    [compVars$6.labelTextColor]: helperRefs$4.main,
   },
 
   _disabled: {
-    [helperVars$3.main]: globalRefs$s.colors.surface.light,
-    [helperVars$3.dark]: globalRefs$s.colors.surface.dark,
-    [helperVars$3.light]: globalRefs$s.colors.surface.light,
-    [helperVars$3.contrast]: globalRefs$s.colors.surface.main,
-    [compVars$5.iconColor]: globalRefs$s.colors.surface.main,
+    [helperVars$4.main]: globalRefs$v.colors.surface.light,
+    [helperVars$4.dark]: globalRefs$v.colors.surface.dark,
+    [helperVars$4.light]: globalRefs$v.colors.surface.light,
+    [helperVars$4.contrast]: globalRefs$v.colors.surface.main,
+    [compVars$6.iconColor]: globalRefs$v.colors.surface.main,
   },
 
   variant: {
     contained: {
-      [compVars$5.labelTextColor]: helperRefs$3.contrast,
-      [compVars$5.backgroundColor]: helperRefs$3.main,
+      [compVars$6.labelTextColor]: helperRefs$4.contrast,
+      [compVars$6.backgroundColor]: helperRefs$4.main,
       _hover: {
-        [compVars$5.backgroundColor]: helperRefs$3.dark,
+        [compVars$6.backgroundColor]: helperRefs$4.dark,
         _loading: {
-          [compVars$5.backgroundColor]: helperRefs$3.main,
+          [compVars$6.backgroundColor]: helperRefs$4.main,
         },
       },
       _active: {
-        [compVars$5.backgroundColor]: helperRefs$3.main,
+        [compVars$6.backgroundColor]: helperRefs$4.main,
       },
     },
 
     outline: {
-      [compVars$5.labelTextColor]: helperRefs$3.main,
-      [compVars$5.borderColor]: helperRefs$3.main,
+      [compVars$6.labelTextColor]: helperRefs$4.main,
+      [compVars$6.borderColor]: helperRefs$4.main,
       _hover: {
-        [compVars$5.labelTextColor]: helperRefs$3.dark,
-        [compVars$5.borderColor]: helperRefs$3.dark,
+        [compVars$6.labelTextColor]: helperRefs$4.dark,
+        [compVars$6.borderColor]: helperRefs$4.dark,
       },
       _active: {
-        [compVars$5.labelTextColor]: helperRefs$3.main,
-        [compVars$5.borderColor]: helperRefs$3.main,
+        [compVars$6.labelTextColor]: helperRefs$4.main,
+        [compVars$6.borderColor]: helperRefs$4.main,
       },
     },
 
     link: {
-      [compVars$5.labelTextColor]: helperRefs$3.main,
-      [compVars$5.horizontalPadding]: '0.125em',
+      [compVars$6.labelTextColor]: helperRefs$4.main,
+      [compVars$6.horizontalPadding]: '0.125em',
       _hover: {
-        [compVars$5.labelTextColor]: helperRefs$3.dark,
-        [compVars$5.labelTextDecoration]: 'underline',
+        [compVars$6.labelTextColor]: helperRefs$4.dark,
+        [compVars$6.labelTextDecoration]: 'underline',
       },
       _active: {
-        [compVars$5.labelTextColor]: helperRefs$3.main,
+        [compVars$6.labelTextColor]: helperRefs$4.main,
       },
     },
   },
 
   _focused: {
-    [compVars$5.outlineColor]: helperRefs$3.light,
+    [compVars$6.outlineColor]: helperRefs$4.light,
   },
 };
 
-const vars$I = {
-  ...compVars$5,
-  ...helperVars$3,
+const vars$L = {
+  ...compVars$6,
+  ...helperVars$4,
 };
 
 var button$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: button,
-  vars: vars$I
+  vars: vars$L
 });
 
 const {
@@ -3301,11 +3304,11 @@ const inputFloatingLabelStyle = () => {
   `;
 };
 
-const componentName$Q = getComponentName('text-field');
+const componentName$T = getComponentName('text-field');
 
 const observedAttrs = ['type', 'label-type', 'copy-to-clipboard'];
 
-const customMixin$a = (superclass) =>
+const customMixin$c = (superclass) =>
   class TextFieldClass extends superclass {
     static get observedAttributes() {
       return observedAttrs.concat(superclass.observedAttributes || []);
@@ -3389,7 +3392,7 @@ const TextFieldClass = compose(
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
   componentNameValidationMixin,
-  customMixin$a
+  customMixin$c
 )(
   createProxy({
     slots: ['prefix', 'suffix'],
@@ -3423,30 +3426,30 @@ const TextFieldClass = compose(
       }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$Q,
+    componentName: componentName$T,
   })
 );
 
-const componentName$P = getComponentName('input-wrapper');
-const globalRefs$r = getThemeRefs(globals);
+const componentName$S = getComponentName('input-wrapper');
+const globalRefs$u = getThemeRefs(globals);
 
-const [theme$1, refs, vars$H] = createHelperVars(
+const [theme$1, refs, vars$K] = createHelperVars(
   {
-    labelTextColor: globalRefs$r.colors.surface.dark,
+    labelTextColor: globalRefs$u.colors.surface.dark,
     labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
     labelFontWeight: '500', // not taken from globals as it is fixed in all inputs
-    valueTextColor: globalRefs$r.colors.surface.contrast,
-    placeholderTextColor: globalRefs$r.colors.surface.dark,
+    valueTextColor: globalRefs$u.colors.surface.contrast,
+    placeholderTextColor: globalRefs$u.colors.surface.dark,
     requiredIndicator: "'*'",
-    helperTextColor: globalRefs$r.colors.surface.dark,
-    errorMessageTextColor: globalRefs$r.colors.error.main,
-    successMessageTextColor: globalRefs$r.colors.success.main,
+    helperTextColor: globalRefs$u.colors.surface.dark,
+    errorMessageTextColor: globalRefs$u.colors.error.main,
+    successMessageTextColor: globalRefs$u.colors.success.main,
 
-    borderWidth: globalRefs$r.border.xs,
-    borderRadius: globalRefs$r.radius.xs,
+    borderWidth: globalRefs$u.border.xs,
+    borderRadius: globalRefs$u.radius.xs,
     borderColor: 'transparent',
 
-    outlineWidth: globalRefs$r.border.sm,
+    outlineWidth: globalRefs$u.border.sm,
     outlineStyle: 'solid',
     outlineColor: 'transparent',
     outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
@@ -3458,11 +3461,11 @@ const [theme$1, refs, vars$H] = createHelperVars(
     horizontalPadding: '0.5em',
     verticalPadding: '0.5em',
 
-    backgroundColor: globalRefs$r.colors.surface.main,
+    backgroundColor: globalRefs$u.colors.surface.main,
 
-    fontFamily: globalRefs$r.fonts.font1.family,
+    fontFamily: globalRefs$u.fonts.font1.family,
 
-    direction: globalRefs$r.direction,
+    direction: globalRefs$u.direction,
 
     overlayOpacity: '0.3',
 
@@ -3512,93 +3515,93 @@ const [theme$1, refs, vars$H] = createHelperVars(
     },
 
     _focused: {
-      outlineColor: globalRefs$r.colors.surface.light,
+      outlineColor: globalRefs$u.colors.surface.light,
       _invalid: {
-        outlineColor: globalRefs$r.colors.error.main,
+        outlineColor: globalRefs$u.colors.error.main,
       },
     },
 
     _bordered: {
-      outlineWidth: globalRefs$r.border.xs,
-      borderColor: globalRefs$r.colors.surface.light,
+      outlineWidth: globalRefs$u.border.xs,
+      borderColor: globalRefs$u.colors.surface.light,
       borderStyle: 'solid',
       _invalid: {
-        borderColor: globalRefs$r.colors.error.main,
+        borderColor: globalRefs$u.colors.error.main,
       },
     },
 
     _disabled: {
-      labelTextColor: globalRefs$r.colors.surface.light,
-      borderColor: globalRefs$r.colors.surface.light,
-      valueTextColor: globalRefs$r.colors.surface.light,
-      placeholderTextColor: globalRefs$r.colors.surface.light,
-      helperTextColor: globalRefs$r.colors.surface.light,
-      backgroundColor: globalRefs$r.colors.surface.main,
+      labelTextColor: globalRefs$u.colors.surface.light,
+      borderColor: globalRefs$u.colors.surface.light,
+      valueTextColor: globalRefs$u.colors.surface.light,
+      placeholderTextColor: globalRefs$u.colors.surface.light,
+      helperTextColor: globalRefs$u.colors.surface.light,
+      backgroundColor: globalRefs$u.colors.surface.main,
     },
   },
-  componentName$P
+  componentName$S
 );
 
 var inputWrapper = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: theme$1,
   refs: refs,
-  vars: vars$H
+  vars: vars$K
 });
 
-const globalRefs$q = getThemeRefs(globals);
-const vars$G = TextFieldClass.cssVarList;
+const globalRefs$t = getThemeRefs(globals);
+const vars$J = TextFieldClass.cssVarList;
 
 const textField$1 = {
-  [vars$G.hostWidth]: refs.width,
-  [vars$G.hostMinWidth]: refs.minWidth,
-  [vars$G.hostDirection]: refs.direction,
-  [vars$G.fontSize]: refs.fontSize,
-  [vars$G.fontFamily]: refs.fontFamily,
-  [vars$G.labelFontSize]: refs.labelFontSize,
-  [vars$G.labelFontWeight]: refs.labelFontWeight,
-  [vars$G.labelTextColor]: refs.labelTextColor,
-  [vars$G.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$G.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$G.inputValueTextColor]: refs.valueTextColor,
-  [vars$G.inputPlaceholderColor]: refs.placeholderTextColor,
-  [vars$G.inputBorderWidth]: refs.borderWidth,
-  [vars$G.inputBorderStyle]: refs.borderStyle,
-  [vars$G.inputBorderColor]: refs.borderColor,
-  [vars$G.inputBorderRadius]: refs.borderRadius,
-  [vars$G.inputOutlineWidth]: refs.outlineWidth,
-  [vars$G.inputOutlineStyle]: refs.outlineStyle,
-  [vars$G.inputOutlineColor]: refs.outlineColor,
-  [vars$G.inputOutlineOffset]: refs.outlineOffset,
-  [vars$G.inputBackgroundColor]: refs.backgroundColor,
-  [vars$G.inputHeight]: refs.inputHeight,
-  [vars$G.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$G.helperTextColor]: refs.helperTextColor,
+  [vars$J.hostWidth]: refs.width,
+  [vars$J.hostMinWidth]: refs.minWidth,
+  [vars$J.hostDirection]: refs.direction,
+  [vars$J.fontSize]: refs.fontSize,
+  [vars$J.fontFamily]: refs.fontFamily,
+  [vars$J.labelFontSize]: refs.labelFontSize,
+  [vars$J.labelFontWeight]: refs.labelFontWeight,
+  [vars$J.labelTextColor]: refs.labelTextColor,
+  [vars$J.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$J.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$J.inputValueTextColor]: refs.valueTextColor,
+  [vars$J.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$J.inputBorderWidth]: refs.borderWidth,
+  [vars$J.inputBorderStyle]: refs.borderStyle,
+  [vars$J.inputBorderColor]: refs.borderColor,
+  [vars$J.inputBorderRadius]: refs.borderRadius,
+  [vars$J.inputOutlineWidth]: refs.outlineWidth,
+  [vars$J.inputOutlineStyle]: refs.outlineStyle,
+  [vars$J.inputOutlineColor]: refs.outlineColor,
+  [vars$J.inputOutlineOffset]: refs.outlineOffset,
+  [vars$J.inputBackgroundColor]: refs.backgroundColor,
+  [vars$J.inputHeight]: refs.inputHeight,
+  [vars$J.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$J.helperTextColor]: refs.helperTextColor,
   textAlign: {
-    right: { [vars$G.inputTextAlign]: 'right' },
-    left: { [vars$G.inputTextAlign]: 'left' },
-    center: { [vars$G.inputTextAlign]: 'center' },
+    right: { [vars$J.inputTextAlign]: 'right' },
+    left: { [vars$J.inputTextAlign]: 'left' },
+    center: { [vars$J.inputTextAlign]: 'center' },
   },
-  [vars$G.labelPosition]: refs.labelPosition,
-  [vars$G.labelTopPosition]: refs.labelTopPosition,
-  [vars$G.labelHorizontalPosition]: refs.labelHorizontalPosition,
-  [vars$G.inputTransformY]: refs.inputTransformY,
-  [vars$G.inputTransition]: refs.inputTransition,
-  [vars$G.marginInlineStart]: refs.marginInlineStart,
-  [vars$G.placeholderOpacity]: refs.placeholderOpacity,
-  [vars$G.inputVerticalAlignment]: refs.inputVerticalAlignment,
-  [vars$G.valueInputHeight]: refs.valueInputHeight,
-  [vars$G.valueInputMarginBottom]: refs.valueInputMarginBottom,
-  [vars$G.inputIconOffset]: globalRefs$q.spacing.md,
-  [vars$G.inputIconSize]: refs.inputIconSize,
-  [vars$G.inputIconColor]: refs.placeholderTextColor,
+  [vars$J.labelPosition]: refs.labelPosition,
+  [vars$J.labelTopPosition]: refs.labelTopPosition,
+  [vars$J.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars$J.inputTransformY]: refs.inputTransformY,
+  [vars$J.inputTransition]: refs.inputTransition,
+  [vars$J.marginInlineStart]: refs.marginInlineStart,
+  [vars$J.placeholderOpacity]: refs.placeholderOpacity,
+  [vars$J.inputVerticalAlignment]: refs.inputVerticalAlignment,
+  [vars$J.valueInputHeight]: refs.valueInputHeight,
+  [vars$J.valueInputMarginBottom]: refs.valueInputMarginBottom,
+  [vars$J.inputIconOffset]: globalRefs$t.spacing.md,
+  [vars$J.inputIconSize]: refs.inputIconSize,
+  [vars$J.inputIconColor]: refs.placeholderTextColor,
 };
 
 var textField$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: textField$1,
   textField: textField$1,
-  vars: vars$G
+  vars: vars$J
 });
 
 const passwordDraggableMixin = (superclass) =>
@@ -3640,9 +3643,9 @@ const passwordDraggableMixin = (superclass) =>
     }
   };
 
-const componentName$O = getComponentName('password');
+const componentName$R = getComponentName('password');
 
-const customMixin$9 = (superclass) =>
+const customMixin$b = (superclass) =>
   class PasswordFieldMixinClass extends superclass {
     static get observedAttributes() {
       return ['manual-visibility-toggle'];
@@ -3795,7 +3798,7 @@ const PasswordClass = compose(
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
   passwordDraggableMixin,
-  customMixin$9
+  customMixin$b
 )(
   createProxy({
     slots: ['', 'suffix'],
@@ -3858,58 +3861,58 @@ const PasswordClass = compose(
       }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$O,
+    componentName: componentName$R,
   })
 );
 
-const globalRefs$p = getThemeRefs(globals);
-const vars$F = PasswordClass.cssVarList;
+const globalRefs$s = getThemeRefs(globals);
+const vars$I = PasswordClass.cssVarList;
 
 const password = {
-  [vars$F.hostWidth]: refs.width,
-  [vars$F.hostMinWidth]: refs.minWidth,
-  [vars$F.hostDirection]: refs.direction,
-  [vars$F.fontSize]: refs.fontSize,
-  [vars$F.fontFamily]: refs.fontFamily,
-  [vars$F.labelFontSize]: refs.labelFontSize,
-  [vars$F.labelFontWeight]: refs.labelFontWeight,
-  [vars$F.labelTextColor]: refs.labelTextColor,
-  [vars$F.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$F.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$F.inputHeight]: refs.inputHeight,
-  [vars$F.inputBackgroundColor]: refs.backgroundColor,
-  [vars$F.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$F.inputValueTextColor]: refs.valueTextColor,
-  [vars$F.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$F.inputBorderWidth]: refs.borderWidth,
-  [vars$F.inputBorderStyle]: refs.borderStyle,
-  [vars$F.inputBorderColor]: refs.borderColor,
-  [vars$F.inputBorderRadius]: refs.borderRadius,
-  [vars$F.inputOutlineWidth]: refs.outlineWidth,
-  [vars$F.inputOutlineStyle]: refs.outlineStyle,
-  [vars$F.inputOutlineColor]: refs.outlineColor,
-  [vars$F.inputOutlineOffset]: refs.outlineOffset,
-  [vars$F.revealButtonOffset]: globalRefs$p.spacing.md,
-  [vars$F.revealButtonSize]: refs.toggleButtonSize,
-  [vars$F.revealButtonColor]: refs.placeholderTextColor,
-  [vars$F.labelPosition]: refs.labelPosition,
-  [vars$F.labelTopPosition]: refs.labelTopPosition,
-  [vars$F.labelHorizontalPosition]: refs.labelHorizontalPosition,
-  [vars$F.inputTransformY]: refs.inputTransformY,
-  [vars$F.inputTransition]: refs.inputTransition,
-  [vars$F.marginInlineStart]: refs.marginInlineStart,
-  [vars$F.placeholderOpacity]: refs.placeholderOpacity,
-  [vars$F.inputVerticalAlignment]: refs.inputVerticalAlignment,
-  [vars$F.valueInputHeight]: refs.valueInputHeight,
+  [vars$I.hostWidth]: refs.width,
+  [vars$I.hostMinWidth]: refs.minWidth,
+  [vars$I.hostDirection]: refs.direction,
+  [vars$I.fontSize]: refs.fontSize,
+  [vars$I.fontFamily]: refs.fontFamily,
+  [vars$I.labelFontSize]: refs.labelFontSize,
+  [vars$I.labelFontWeight]: refs.labelFontWeight,
+  [vars$I.labelTextColor]: refs.labelTextColor,
+  [vars$I.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$I.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$I.inputHeight]: refs.inputHeight,
+  [vars$I.inputBackgroundColor]: refs.backgroundColor,
+  [vars$I.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$I.inputValueTextColor]: refs.valueTextColor,
+  [vars$I.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$I.inputBorderWidth]: refs.borderWidth,
+  [vars$I.inputBorderStyle]: refs.borderStyle,
+  [vars$I.inputBorderColor]: refs.borderColor,
+  [vars$I.inputBorderRadius]: refs.borderRadius,
+  [vars$I.inputOutlineWidth]: refs.outlineWidth,
+  [vars$I.inputOutlineStyle]: refs.outlineStyle,
+  [vars$I.inputOutlineColor]: refs.outlineColor,
+  [vars$I.inputOutlineOffset]: refs.outlineOffset,
+  [vars$I.revealButtonOffset]: globalRefs$s.spacing.md,
+  [vars$I.revealButtonSize]: refs.toggleButtonSize,
+  [vars$I.revealButtonColor]: refs.placeholderTextColor,
+  [vars$I.labelPosition]: refs.labelPosition,
+  [vars$I.labelTopPosition]: refs.labelTopPosition,
+  [vars$I.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars$I.inputTransformY]: refs.inputTransformY,
+  [vars$I.inputTransition]: refs.inputTransition,
+  [vars$I.marginInlineStart]: refs.marginInlineStart,
+  [vars$I.placeholderOpacity]: refs.placeholderOpacity,
+  [vars$I.inputVerticalAlignment]: refs.inputVerticalAlignment,
+  [vars$I.valueInputHeight]: refs.valueInputHeight,
 };
 
 var password$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: password,
-  vars: vars$F
+  vars: vars$I
 });
 
-const componentName$N = getComponentName('number-field');
+const componentName$Q = getComponentName('number-field');
 
 const NumberFieldClass = compose(
   createStyleMixin({
@@ -3943,60 +3946,60 @@ const NumberFieldClass = compose(
       }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$N,
+    componentName: componentName$Q,
   })
 );
 
-const vars$E = NumberFieldClass.cssVarList;
+const vars$H = NumberFieldClass.cssVarList;
 
 const numberField = {
-  [vars$E.hostWidth]: refs.width,
-  [vars$E.hostMinWidth]: refs.minWidth,
-  [vars$E.hostDirection]: refs.direction,
-  [vars$E.fontSize]: refs.fontSize,
-  [vars$E.fontFamily]: refs.fontFamily,
-  [vars$E.labelFontSize]: refs.labelFontSize,
-  [vars$E.labelFontWeight]: refs.labelFontWeight,
-  [vars$E.labelTextColor]: refs.labelTextColor,
-  [vars$E.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$E.inputValueTextColor]: refs.valueTextColor,
-  [vars$E.inputPlaceholderColor]: refs.placeholderTextColor,
-  [vars$E.inputBorderWidth]: refs.borderWidth,
-  [vars$E.inputBorderStyle]: refs.borderStyle,
-  [vars$E.inputBorderColor]: refs.borderColor,
-  [vars$E.inputBorderRadius]: refs.borderRadius,
-  [vars$E.inputOutlineWidth]: refs.outlineWidth,
-  [vars$E.inputOutlineStyle]: refs.outlineStyle,
-  [vars$E.inputOutlineColor]: refs.outlineColor,
-  [vars$E.inputOutlineOffset]: refs.outlineOffset,
-  [vars$E.inputBackgroundColor]: refs.backgroundColor,
-  [vars$E.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$E.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$E.inputHeight]: refs.inputHeight,
-  [vars$E.labelPosition]: refs.labelPosition,
-  [vars$E.labelTopPosition]: refs.labelTopPosition,
-  [vars$E.labelHorizontalPosition]: refs.labelHorizontalPosition,
-  [vars$E.inputTransformY]: refs.inputTransformY,
-  [vars$E.inputTransition]: refs.inputTransition,
-  [vars$E.marginInlineStart]: refs.marginInlineStart,
-  [vars$E.placeholderOpacity]: refs.placeholderOpacity,
-  [vars$E.inputVerticalAlignment]: refs.inputVerticalAlignment,
-  [vars$E.valueInputHeight]: refs.valueInputHeight,
-  [vars$E.valueInputMarginBottom]: refs.valueInputMarginBottom,
+  [vars$H.hostWidth]: refs.width,
+  [vars$H.hostMinWidth]: refs.minWidth,
+  [vars$H.hostDirection]: refs.direction,
+  [vars$H.fontSize]: refs.fontSize,
+  [vars$H.fontFamily]: refs.fontFamily,
+  [vars$H.labelFontSize]: refs.labelFontSize,
+  [vars$H.labelFontWeight]: refs.labelFontWeight,
+  [vars$H.labelTextColor]: refs.labelTextColor,
+  [vars$H.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$H.inputValueTextColor]: refs.valueTextColor,
+  [vars$H.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$H.inputBorderWidth]: refs.borderWidth,
+  [vars$H.inputBorderStyle]: refs.borderStyle,
+  [vars$H.inputBorderColor]: refs.borderColor,
+  [vars$H.inputBorderRadius]: refs.borderRadius,
+  [vars$H.inputOutlineWidth]: refs.outlineWidth,
+  [vars$H.inputOutlineStyle]: refs.outlineStyle,
+  [vars$H.inputOutlineColor]: refs.outlineColor,
+  [vars$H.inputOutlineOffset]: refs.outlineOffset,
+  [vars$H.inputBackgroundColor]: refs.backgroundColor,
+  [vars$H.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$H.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$H.inputHeight]: refs.inputHeight,
+  [vars$H.labelPosition]: refs.labelPosition,
+  [vars$H.labelTopPosition]: refs.labelTopPosition,
+  [vars$H.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars$H.inputTransformY]: refs.inputTransformY,
+  [vars$H.inputTransition]: refs.inputTransition,
+  [vars$H.marginInlineStart]: refs.marginInlineStart,
+  [vars$H.placeholderOpacity]: refs.placeholderOpacity,
+  [vars$H.inputVerticalAlignment]: refs.inputVerticalAlignment,
+  [vars$H.valueInputHeight]: refs.valueInputHeight,
+  [vars$H.valueInputMarginBottom]: refs.valueInputMarginBottom,
 };
 
 var numberField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: numberField,
-  vars: vars$E
+  vars: vars$H
 });
 
-const componentName$M = getComponentName('email-field');
+const componentName$P = getComponentName('email-field');
 
 const defaultPattern = "^[\\w\\.\\%\\+\\-']+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$";
 const defaultAutocomplete = 'username';
 
-const customMixin$8 = (superclass) =>
+const customMixin$a = (superclass) =>
   class EmailFieldMixinClass extends superclass {
     init() {
       super.init?.();
@@ -4017,7 +4020,7 @@ const EmailFieldClass = compose(
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
   componentNameValidationMixin,
-  customMixin$8
+  customMixin$a
 )(
   createProxy({
     slots: ['', 'suffix'],
@@ -4048,55 +4051,55 @@ const EmailFieldClass = compose(
       }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$M,
+    componentName: componentName$P,
   })
 );
 
-const vars$D = EmailFieldClass.cssVarList;
+const vars$G = EmailFieldClass.cssVarList;
 
 const emailField = {
-  [vars$D.hostWidth]: refs.width,
-  [vars$D.hostMinWidth]: refs.minWidth,
-  [vars$D.hostDirection]: refs.direction,
-  [vars$D.fontSize]: refs.fontSize,
-  [vars$D.fontFamily]: refs.fontFamily,
-  [vars$D.labelFontSize]: refs.labelFontSize,
-  [vars$D.labelFontWeight]: refs.labelFontWeight,
-  [vars$D.labelTextColor]: refs.labelTextColor,
-  [vars$D.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$D.inputValueTextColor]: refs.valueTextColor,
-  [vars$D.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$D.inputPlaceholderColor]: refs.placeholderTextColor,
-  [vars$D.inputBorderWidth]: refs.borderWidth,
-  [vars$D.inputBorderStyle]: refs.borderStyle,
-  [vars$D.inputBorderColor]: refs.borderColor,
-  [vars$D.inputBorderRadius]: refs.borderRadius,
-  [vars$D.inputOutlineWidth]: refs.outlineWidth,
-  [vars$D.inputOutlineStyle]: refs.outlineStyle,
-  [vars$D.inputOutlineColor]: refs.outlineColor,
-  [vars$D.inputOutlineOffset]: refs.outlineOffset,
-  [vars$D.inputBackgroundColor]: refs.backgroundColor,
-  [vars$D.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$D.inputHeight]: refs.inputHeight,
-  [vars$D.labelPosition]: refs.labelPosition,
-  [vars$D.labelTopPosition]: refs.labelTopPosition,
-  [vars$D.labelHorizontalPosition]: refs.labelHorizontalPosition,
-  [vars$D.inputTransformY]: refs.inputTransformY,
-  [vars$D.inputTransition]: refs.inputTransition,
-  [vars$D.marginInlineStart]: refs.marginInlineStart,
-  [vars$D.placeholderOpacity]: refs.placeholderOpacity,
-  [vars$D.inputVerticalAlignment]: refs.inputVerticalAlignment,
-  [vars$D.valueInputHeight]: refs.valueInputHeight,
-  [vars$D.valueInputMarginBottom]: refs.valueInputMarginBottom,
+  [vars$G.hostWidth]: refs.width,
+  [vars$G.hostMinWidth]: refs.minWidth,
+  [vars$G.hostDirection]: refs.direction,
+  [vars$G.fontSize]: refs.fontSize,
+  [vars$G.fontFamily]: refs.fontFamily,
+  [vars$G.labelFontSize]: refs.labelFontSize,
+  [vars$G.labelFontWeight]: refs.labelFontWeight,
+  [vars$G.labelTextColor]: refs.labelTextColor,
+  [vars$G.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$G.inputValueTextColor]: refs.valueTextColor,
+  [vars$G.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$G.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$G.inputBorderWidth]: refs.borderWidth,
+  [vars$G.inputBorderStyle]: refs.borderStyle,
+  [vars$G.inputBorderColor]: refs.borderColor,
+  [vars$G.inputBorderRadius]: refs.borderRadius,
+  [vars$G.inputOutlineWidth]: refs.outlineWidth,
+  [vars$G.inputOutlineStyle]: refs.outlineStyle,
+  [vars$G.inputOutlineColor]: refs.outlineColor,
+  [vars$G.inputOutlineOffset]: refs.outlineOffset,
+  [vars$G.inputBackgroundColor]: refs.backgroundColor,
+  [vars$G.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$G.inputHeight]: refs.inputHeight,
+  [vars$G.labelPosition]: refs.labelPosition,
+  [vars$G.labelTopPosition]: refs.labelTopPosition,
+  [vars$G.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars$G.inputTransformY]: refs.inputTransformY,
+  [vars$G.inputTransition]: refs.inputTransition,
+  [vars$G.marginInlineStart]: refs.marginInlineStart,
+  [vars$G.placeholderOpacity]: refs.placeholderOpacity,
+  [vars$G.inputVerticalAlignment]: refs.inputVerticalAlignment,
+  [vars$G.valueInputHeight]: refs.valueInputHeight,
+  [vars$G.valueInputMarginBottom]: refs.valueInputMarginBottom,
 };
 
 var emailField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: emailField,
-  vars: vars$D
+  vars: vars$G
 });
 
-const componentName$L = getComponentName('text-area');
+const componentName$O = getComponentName('text-area');
 
 const {
   host: host$k,
@@ -4172,49 +4175,49 @@ const TextAreaClass = compose(
 			${resetInputCursor('vaadin-text-area')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$L,
+    componentName: componentName$O,
   })
 );
 
-const vars$C = TextAreaClass.cssVarList;
+const vars$F = TextAreaClass.cssVarList;
 
 const textArea = {
-  [vars$C.hostWidth]: refs.width,
-  [vars$C.hostMinWidth]: refs.minWidth,
-  [vars$C.hostDirection]: refs.direction,
-  [vars$C.fontSize]: refs.fontSize,
-  [vars$C.fontFamily]: refs.fontFamily,
-  [vars$C.labelTextColor]: refs.labelTextColor,
-  [vars$C.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$C.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$C.inputBackgroundColor]: refs.backgroundColor,
-  [vars$C.inputValueTextColor]: refs.valueTextColor,
-  [vars$C.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$C.inputBorderRadius]: refs.borderRadius,
-  [vars$C.inputBorderWidth]: refs.borderWidth,
-  [vars$C.inputBorderStyle]: refs.borderStyle,
-  [vars$C.inputBorderColor]: refs.borderColor,
-  [vars$C.inputOutlineWidth]: refs.outlineWidth,
-  [vars$C.inputOutlineStyle]: refs.outlineStyle,
-  [vars$C.inputOutlineColor]: refs.outlineColor,
-  [vars$C.inputOutlineOffset]: refs.outlineOffset,
-  [vars$C.inputResizeType]: 'vertical',
-  [vars$C.inputMinHeight]: '5em',
+  [vars$F.hostWidth]: refs.width,
+  [vars$F.hostMinWidth]: refs.minWidth,
+  [vars$F.hostDirection]: refs.direction,
+  [vars$F.fontSize]: refs.fontSize,
+  [vars$F.fontFamily]: refs.fontFamily,
+  [vars$F.labelTextColor]: refs.labelTextColor,
+  [vars$F.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$F.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$F.inputBackgroundColor]: refs.backgroundColor,
+  [vars$F.inputValueTextColor]: refs.valueTextColor,
+  [vars$F.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$F.inputBorderRadius]: refs.borderRadius,
+  [vars$F.inputBorderWidth]: refs.borderWidth,
+  [vars$F.inputBorderStyle]: refs.borderStyle,
+  [vars$F.inputBorderColor]: refs.borderColor,
+  [vars$F.inputOutlineWidth]: refs.outlineWidth,
+  [vars$F.inputOutlineStyle]: refs.outlineStyle,
+  [vars$F.inputOutlineColor]: refs.outlineColor,
+  [vars$F.inputOutlineOffset]: refs.outlineOffset,
+  [vars$F.inputResizeType]: 'vertical',
+  [vars$F.inputMinHeight]: '5em',
   textAlign: {
-    right: { [vars$C.inputTextAlign]: 'right' },
-    left: { [vars$C.inputTextAlign]: 'left' },
-    center: { [vars$C.inputTextAlign]: 'center' },
+    right: { [vars$F.inputTextAlign]: 'right' },
+    left: { [vars$F.inputTextAlign]: 'left' },
+    center: { [vars$F.inputTextAlign]: 'center' },
   },
 
   _readonly: {
-    [vars$C.inputResizeType]: 'none',
+    [vars$F.inputResizeType]: 'none',
   },
 };
 
 var textArea$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: textArea,
-  vars: vars$C
+  vars: vars$F
 });
 
 const createBaseInputClass = (...args) =>
@@ -4225,9 +4228,9 @@ const createBaseInputClass = (...args) =>
     inputEventsDispatchingMixin
   )(createBaseClass(...args));
 
-const componentName$K = getComponentName('boolean-field-internal');
+const componentName$N = getComponentName('boolean-field-internal');
 
-createBaseInputClass({ componentName: componentName$K, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$N, baseSelector: 'div' });
 
 const booleanFieldMixin = (superclass) =>
   class BooleanFieldMixinClass extends superclass {
@@ -4236,14 +4239,14 @@ const booleanFieldMixin = (superclass) =>
 
       const template = document.createElement('template');
       template.innerHTML = `
-				<${componentName$K}
+				<${componentName$N}
 					tabindex="-1"
 					slot="input"
-				></${componentName$K}>
+				></${componentName$N}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$K);
+      this.inputElement = this.shadowRoot.querySelector(componentName$N);
       this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
       forwardAttrs(this, this.inputElement, {
@@ -4313,7 +4316,7 @@ descope-boolean-field-internal {
 }
 `;
 
-const componentName$J = getComponentName('checkbox');
+const componentName$M = getComponentName('checkbox');
 
 const {
   host: host$j,
@@ -4419,51 +4422,51 @@ const CheckboxClass = compose(
       }
     `,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$J,
+    componentName: componentName$M,
   })
 );
 
-const vars$B = CheckboxClass.cssVarList;
+const vars$E = CheckboxClass.cssVarList;
 const checkboxSize = '1.35em';
 
 const checkbox = {
-  [vars$B.hostWidth]: refs.width,
-  [vars$B.hostDirection]: refs.direction,
-  [vars$B.fontSize]: refs.fontSize,
-  [vars$B.fontFamily]: refs.fontFamily,
-  [vars$B.labelTextColor]: refs.labelTextColor,
-  [vars$B.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$B.labelFontWeight]: '400',
-  [vars$B.labelLineHeight]: checkboxSize,
-  [vars$B.labelSpacing]: '1em',
-  [vars$B.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$B.inputOutlineWidth]: refs.outlineWidth,
-  [vars$B.inputOutlineOffset]: refs.outlineOffset,
-  [vars$B.inputOutlineColor]: refs.outlineColor,
-  [vars$B.inputOutlineStyle]: refs.outlineStyle,
-  [vars$B.inputBorderRadius]: refs.borderRadius,
-  [vars$B.inputBorderColor]: refs.borderColor,
-  [vars$B.inputBorderWidth]: refs.borderWidth,
-  [vars$B.inputBorderStyle]: refs.borderStyle,
-  [vars$B.inputBackgroundColor]: refs.backgroundColor,
-  [vars$B.inputSize]: checkboxSize,
+  [vars$E.hostWidth]: refs.width,
+  [vars$E.hostDirection]: refs.direction,
+  [vars$E.fontSize]: refs.fontSize,
+  [vars$E.fontFamily]: refs.fontFamily,
+  [vars$E.labelTextColor]: refs.labelTextColor,
+  [vars$E.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$E.labelFontWeight]: '400',
+  [vars$E.labelLineHeight]: checkboxSize,
+  [vars$E.labelSpacing]: '1em',
+  [vars$E.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$E.inputOutlineWidth]: refs.outlineWidth,
+  [vars$E.inputOutlineOffset]: refs.outlineOffset,
+  [vars$E.inputOutlineColor]: refs.outlineColor,
+  [vars$E.inputOutlineStyle]: refs.outlineStyle,
+  [vars$E.inputBorderRadius]: refs.borderRadius,
+  [vars$E.inputBorderColor]: refs.borderColor,
+  [vars$E.inputBorderWidth]: refs.borderWidth,
+  [vars$E.inputBorderStyle]: refs.borderStyle,
+  [vars$E.inputBackgroundColor]: refs.backgroundColor,
+  [vars$E.inputSize]: checkboxSize,
 
   _checked: {
-    [vars$B.inputValueTextColor]: refs.valueTextColor,
+    [vars$E.inputValueTextColor]: refs.valueTextColor,
   },
 
   _disabled: {
-    [vars$B.labelTextColor]: refs.labelTextColor,
+    [vars$E.labelTextColor]: refs.labelTextColor,
   },
 };
 
 var checkbox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: checkbox,
-  vars: vars$B
+  vars: vars$E
 });
 
-const componentName$I = getComponentName('switch-toggle');
+const componentName$L = getComponentName('switch-toggle');
 
 const {
   host: host$i,
@@ -4595,82 +4598,82 @@ const SwitchToggleClass = compose(
 			}
 		`,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$I,
+    componentName: componentName$L,
   })
 );
 
 const knobMargin = '2px';
 const checkboxHeight = '1.25em';
 
-const globalRefs$o = getThemeRefs(globals);
-const vars$A = SwitchToggleClass.cssVarList;
+const globalRefs$r = getThemeRefs(globals);
+const vars$D = SwitchToggleClass.cssVarList;
 
 const switchToggle = {
-  [vars$A.hostWidth]: refs.width,
-  [vars$A.hostDirection]: refs.direction,
-  [vars$A.fontSize]: refs.fontSize,
-  [vars$A.fontFamily]: refs.fontFamily,
-
-  [vars$A.inputOutlineWidth]: refs.outlineWidth,
-  [vars$A.inputOutlineOffset]: refs.outlineOffset,
-  [vars$A.inputOutlineColor]: refs.outlineColor,
-  [vars$A.inputOutlineStyle]: refs.outlineStyle,
-
-  [vars$A.trackBorderStyle]: refs.borderStyle,
-  [vars$A.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
-  [vars$A.trackBorderColor]: refs.borderColor,
-  [vars$A.trackBackgroundColor]: refs.backgroundColor,
-  [vars$A.trackBorderRadius]: globalRefs$o.radius.md,
-  [vars$A.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
-  [vars$A.trackHeight]: checkboxHeight,
-
-  [vars$A.knobSize]: `calc(1em - ${knobMargin})`,
-  [vars$A.knobRadius]: '50%',
-  [vars$A.knobTopOffset]: '1px',
-  [vars$A.knobLeftOffset]: knobMargin,
-  [vars$A.knobColor]: refs.labelTextColor,
-  [vars$A.knobTransitionDuration]: '0.3s',
-
-  [vars$A.labelTextColor]: refs.labelTextColor,
-  [vars$A.labelFontWeight]: '400',
-  [vars$A.labelLineHeight]: '1.35em',
-  [vars$A.labelSpacing]: '1em',
-  [vars$A.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$A.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$D.hostWidth]: refs.width,
+  [vars$D.hostDirection]: refs.direction,
+  [vars$D.fontSize]: refs.fontSize,
+  [vars$D.fontFamily]: refs.fontFamily,
+
+  [vars$D.inputOutlineWidth]: refs.outlineWidth,
+  [vars$D.inputOutlineOffset]: refs.outlineOffset,
+  [vars$D.inputOutlineColor]: refs.outlineColor,
+  [vars$D.inputOutlineStyle]: refs.outlineStyle,
+
+  [vars$D.trackBorderStyle]: refs.borderStyle,
+  [vars$D.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
+  [vars$D.trackBorderColor]: refs.borderColor,
+  [vars$D.trackBackgroundColor]: refs.backgroundColor,
+  [vars$D.trackBorderRadius]: globalRefs$r.radius.md,
+  [vars$D.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
+  [vars$D.trackHeight]: checkboxHeight,
+
+  [vars$D.knobSize]: `calc(1em - ${knobMargin})`,
+  [vars$D.knobRadius]: '50%',
+  [vars$D.knobTopOffset]: '1px',
+  [vars$D.knobLeftOffset]: knobMargin,
+  [vars$D.knobColor]: refs.labelTextColor,
+  [vars$D.knobTransitionDuration]: '0.3s',
+
+  [vars$D.labelTextColor]: refs.labelTextColor,
+  [vars$D.labelFontWeight]: '400',
+  [vars$D.labelLineHeight]: '1.35em',
+  [vars$D.labelSpacing]: '1em',
+  [vars$D.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$D.errorMessageTextColor]: refs.errorMessageTextColor,
 
   _checked: {
-    [vars$A.trackBorderColor]: refs.borderColor,
-    [vars$A.knobLeftOffset]: `calc(100% - var(${vars$A.knobSize}) - ${knobMargin})`,
-    [vars$A.knobColor]: refs.valueTextColor,
-    [vars$A.knobTextColor]: refs.valueTextColor,
+    [vars$D.trackBorderColor]: refs.borderColor,
+    [vars$D.knobLeftOffset]: `calc(100% - var(${vars$D.knobSize}) - ${knobMargin})`,
+    [vars$D.knobColor]: refs.valueTextColor,
+    [vars$D.knobTextColor]: refs.valueTextColor,
   },
 
   _disabled: {
-    [vars$A.knobColor]: globalRefs$o.colors.surface.light,
-    [vars$A.trackBorderColor]: globalRefs$o.colors.surface.light,
-    [vars$A.trackBackgroundColor]: globalRefs$o.colors.surface.main,
-    [vars$A.labelTextColor]: refs.labelTextColor,
+    [vars$D.knobColor]: globalRefs$r.colors.surface.light,
+    [vars$D.trackBorderColor]: globalRefs$r.colors.surface.light,
+    [vars$D.trackBackgroundColor]: globalRefs$r.colors.surface.main,
+    [vars$D.labelTextColor]: refs.labelTextColor,
     _checked: {
-      [vars$A.knobColor]: globalRefs$o.colors.surface.light,
-      [vars$A.trackBackgroundColor]: globalRefs$o.colors.surface.main,
+      [vars$D.knobColor]: globalRefs$r.colors.surface.light,
+      [vars$D.trackBackgroundColor]: globalRefs$r.colors.surface.main,
     },
   },
 
   _invalid: {
-    [vars$A.trackBorderColor]: globalRefs$o.colors.error.main,
-    [vars$A.knobColor]: globalRefs$o.colors.error.main,
+    [vars$D.trackBorderColor]: globalRefs$r.colors.error.main,
+    [vars$D.knobColor]: globalRefs$r.colors.error.main,
   },
 };
 
 var switchToggle$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: switchToggle,
-  vars: vars$A
+  vars: vars$D
 });
 
-const componentName$H = getComponentName('container');
+const componentName$K = getComponentName('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$H, baseSelector: 'slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$K, baseSelector: 'slot' }) {
   constructor() {
     super();
 
@@ -4723,9 +4726,9 @@ const ContainerClass = compose(
   componentNameValidationMixin
 )(RawContainer);
 
-const globalRefs$n = getThemeRefs(globals);
+const globalRefs$q = getThemeRefs(globals);
 
-const compVars$4 = ContainerClass.cssVarList;
+const compVars$5 = ContainerClass.cssVarList;
 
 const verticalAlignment = {
   start: { verticalAlignment: 'start' },
@@ -4739,108 +4742,108 @@ const horizontalAlignment = {
   end: { horizontalAlignment: 'end' },
 };
 
-const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
+const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars(
   {
     verticalAlignment,
     horizontalAlignment,
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$H
+  componentName$K
 );
 
-const { shadowColor: shadowColor$1 } = helperRefs$2;
+const { shadowColor: shadowColor$2 } = helperRefs$3;
 
 const container = {
-  ...helperTheme$2,
+  ...helperTheme$3,
 
-  [compVars$4.itemsGrow]: '0',
-  [compVars$4.hostWidth]: '100%',
-  [compVars$4.boxShadow]: 'none',
-  [compVars$4.backgroundColor]: globalRefs$n.colors.surface.main,
-  [compVars$4.color]: globalRefs$n.colors.surface.contrast,
-  [compVars$4.borderRadius]: '0px',
-  [compVars$4.hostDirection]: globalRefs$n.direction,
+  [compVars$5.itemsGrow]: '0',
+  [compVars$5.hostWidth]: '100%',
+  [compVars$5.boxShadow]: 'none',
+  [compVars$5.backgroundColor]: globalRefs$q.colors.surface.main,
+  [compVars$5.color]: globalRefs$q.colors.surface.contrast,
+  [compVars$5.borderRadius]: '0px',
+  [compVars$5.hostDirection]: globalRefs$q.direction,
 
   verticalPadding: {
-    sm: { [compVars$4.verticalPadding]: '5px' },
-    md: { [compVars$4.verticalPadding]: '10px' },
-    lg: { [compVars$4.verticalPadding]: '20px' },
+    sm: { [compVars$5.verticalPadding]: '5px' },
+    md: { [compVars$5.verticalPadding]: '10px' },
+    lg: { [compVars$5.verticalPadding]: '20px' },
   },
 
   horizontalPadding: {
-    sm: { [compVars$4.horizontalPadding]: '5px' },
-    md: { [compVars$4.horizontalPadding]: '10px' },
-    lg: { [compVars$4.horizontalPadding]: '20px' },
+    sm: { [compVars$5.horizontalPadding]: '5px' },
+    md: { [compVars$5.horizontalPadding]: '10px' },
+    lg: { [compVars$5.horizontalPadding]: '20px' },
   },
 
   direction: {
     row: {
-      [compVars$4.flexDirection]: 'row',
-      [compVars$4.alignItems]: helperRefs$2.verticalAlignment,
-      [compVars$4.justifyContent]: helperRefs$2.horizontalAlignment,
-      [compVars$4.flexWrap]: 'wrap',
+      [compVars$5.flexDirection]: 'row',
+      [compVars$5.alignItems]: helperRefs$3.verticalAlignment,
+      [compVars$5.justifyContent]: helperRefs$3.horizontalAlignment,
+      [compVars$5.flexWrap]: 'wrap',
       horizontalAlignment: {
         spaceBetween: {
-          [helperVars$2.horizontalAlignment]: 'space-between',
+          [helperVars$3.horizontalAlignment]: 'space-between',
         },
       },
     },
     column: {
-      [compVars$4.flexDirection]: 'column',
-      [compVars$4.alignItems]: helperRefs$2.horizontalAlignment,
-      [compVars$4.justifyContent]: helperRefs$2.verticalAlignment,
+      [compVars$5.flexDirection]: 'column',
+      [compVars$5.alignItems]: helperRefs$3.horizontalAlignment,
+      [compVars$5.justifyContent]: helperRefs$3.verticalAlignment,
       verticalAlignment: {
         spaceBetween: {
-          [helperVars$2.verticalAlignment]: 'space-between',
+          [helperVars$3.verticalAlignment]: 'space-between',
         },
       },
     },
   },
 
   spaceBetween: {
-    sm: { [compVars$4.gap]: '10px' },
-    md: { [compVars$4.gap]: '20px' },
-    lg: { [compVars$4.gap]: '30px' },
+    sm: { [compVars$5.gap]: '10px' },
+    md: { [compVars$5.gap]: '20px' },
+    lg: { [compVars$5.gap]: '30px' },
   },
 
   shadow: {
     sm: {
-      [compVars$4.boxShadow]: `${globalRefs$n.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$n.shadow.narrow.sm} ${shadowColor$1}`,
+      [compVars$5.boxShadow]: `${globalRefs$q.shadow.wide.sm} ${shadowColor$2}, ${globalRefs$q.shadow.narrow.sm} ${shadowColor$2}`,
     },
     md: {
-      [compVars$4.boxShadow]: `${globalRefs$n.shadow.wide.md} ${shadowColor$1}, ${globalRefs$n.shadow.narrow.md} ${shadowColor$1}`,
+      [compVars$5.boxShadow]: `${globalRefs$q.shadow.wide.md} ${shadowColor$2}, ${globalRefs$q.shadow.narrow.md} ${shadowColor$2}`,
     },
     lg: {
-      [compVars$4.boxShadow]: `${globalRefs$n.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$n.shadow.narrow.lg} ${shadowColor$1}`,
+      [compVars$5.boxShadow]: `${globalRefs$q.shadow.wide.lg} ${shadowColor$2}, ${globalRefs$q.shadow.narrow.lg} ${shadowColor$2}`,
     },
     xl: {
-      [compVars$4.boxShadow]: `${globalRefs$n.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$n.shadow.narrow.xl} ${shadowColor$1}`,
+      [compVars$5.boxShadow]: `${globalRefs$q.shadow.wide.xl} ${shadowColor$2}, ${globalRefs$q.shadow.narrow.xl} ${shadowColor$2}`,
     },
     '2xl': {
-      [helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
-      [compVars$4.boxShadow]: `${globalRefs$n.shadow.wide['2xl']} ${shadowColor$1}`,
+      [helperVars$3.shadowColor]: '#00000050', // mimic daisyUI shadow settings
+      [compVars$5.boxShadow]: `${globalRefs$q.shadow.wide['2xl']} ${shadowColor$2}`,
     },
   },
 
   borderRadius: {
-    sm: { [compVars$4.borderRadius]: globalRefs$n.radius.sm },
-    md: { [compVars$4.borderRadius]: globalRefs$n.radius.md },
-    lg: { [compVars$4.borderRadius]: globalRefs$n.radius.lg },
-    xl: { [compVars$4.borderRadius]: globalRefs$n.radius.xl },
-    '2xl': { [compVars$4.borderRadius]: globalRefs$n.radius['2xl'] },
-    '3xl': { [compVars$4.borderRadius]: globalRefs$n.radius['3xl'] },
+    sm: { [compVars$5.borderRadius]: globalRefs$q.radius.sm },
+    md: { [compVars$5.borderRadius]: globalRefs$q.radius.md },
+    lg: { [compVars$5.borderRadius]: globalRefs$q.radius.lg },
+    xl: { [compVars$5.borderRadius]: globalRefs$q.radius.xl },
+    '2xl': { [compVars$5.borderRadius]: globalRefs$q.radius['2xl'] },
+    '3xl': { [compVars$5.borderRadius]: globalRefs$q.radius['3xl'] },
   },
 };
 
-const vars$z = {
-  ...compVars$4,
-  ...helperVars$2,
+const vars$C = {
+  ...compVars$5,
+  ...helperVars$3,
 };
 
 var container$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: container,
-  vars: vars$z
+  vars: vars$C
 });
 
 const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
@@ -4893,69 +4896,69 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   return CssVarImageClass;
 };
 
-const componentName$G = getComponentName('logo');
+const componentName$J = getComponentName('logo');
 
 const LogoClass = createCssVarImageClass({
-  componentName: componentName$G,
+  componentName: componentName$J,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-const vars$y = LogoClass.cssVarList;
+const vars$B = LogoClass.cssVarList;
 
 const logo$2 = {
-  [vars$y.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
+  [vars$B.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
 };
 
 var logo$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo$2,
-  vars: vars$y
+  vars: vars$B
 });
 
-const componentName$F = getComponentName('totp-image');
+const componentName$I = getComponentName('totp-image');
 
 const TotpImageClass = createCssVarImageClass({
-  componentName: componentName$F,
+  componentName: componentName$I,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-const vars$x = TotpImageClass.cssVarList;
+const vars$A = TotpImageClass.cssVarList;
 
 const logo$1 = {
-  [vars$x.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
+  [vars$A.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
 };
 
 var totpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo$1,
-  vars: vars$x
+  vars: vars$A
 });
 
-const componentName$E = getComponentName('notp-image');
+const componentName$H = getComponentName('notp-image');
 
 const NotpImageClass = createCssVarImageClass({
-  componentName: componentName$E,
+  componentName: componentName$H,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-const vars$w = NotpImageClass.cssVarList;
+const vars$z = NotpImageClass.cssVarList;
 
 const logo = {
-  [vars$w.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
+  [vars$z.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
 };
 
 var notpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo,
-  vars: vars$w
+  vars: vars$z
 });
 
-const componentName$D = getComponentName('text');
+const componentName$G = getComponentName('text');
 
-class RawText extends createBaseClass({ componentName: componentName$D, baseSelector: ':host > slot' }) {
+class RawText extends createBaseClass({ componentName: componentName$G, baseSelector: ':host > slot' }) {
   constructor() {
     super();
 
@@ -5012,95 +5015,95 @@ const TextClass = compose(
   componentNameValidationMixin
 )(RawText);
 
-const globalRefs$m = getThemeRefs(globals);
-const vars$v = TextClass.cssVarList;
+const globalRefs$p = getThemeRefs(globals);
+const vars$y = TextClass.cssVarList;
 
 const text$2 = {
-  [vars$v.hostDirection]: globalRefs$m.direction,
-  [vars$v.textLineHeight]: '1.35em',
-  [vars$v.textAlign]: 'left',
-  [vars$v.textColor]: globalRefs$m.colors.surface.dark,
+  [vars$y.hostDirection]: globalRefs$p.direction,
+  [vars$y.textLineHeight]: '1.35em',
+  [vars$y.textAlign]: 'left',
+  [vars$y.textColor]: globalRefs$p.colors.surface.dark,
 
   variant: {
     h1: {
-      [vars$v.fontSize]: globalRefs$m.typography.h1.size,
-      [vars$v.fontWeight]: globalRefs$m.typography.h1.weight,
-      [vars$v.fontFamily]: globalRefs$m.typography.h1.font,
+      [vars$y.fontSize]: globalRefs$p.typography.h1.size,
+      [vars$y.fontWeight]: globalRefs$p.typography.h1.weight,
+      [vars$y.fontFamily]: globalRefs$p.typography.h1.font,
     },
     h2: {
-      [vars$v.fontSize]: globalRefs$m.typography.h2.size,
-      [vars$v.fontWeight]: globalRefs$m.typography.h2.weight,
-      [vars$v.fontFamily]: globalRefs$m.typography.h2.font,
+      [vars$y.fontSize]: globalRefs$p.typography.h2.size,
+      [vars$y.fontWeight]: globalRefs$p.typography.h2.weight,
+      [vars$y.fontFamily]: globalRefs$p.typography.h2.font,
     },
     h3: {
-      [vars$v.fontSize]: globalRefs$m.typography.h3.size,
-      [vars$v.fontWeight]: globalRefs$m.typography.h3.weight,
-      [vars$v.fontFamily]: globalRefs$m.typography.h3.font,
+      [vars$y.fontSize]: globalRefs$p.typography.h3.size,
+      [vars$y.fontWeight]: globalRefs$p.typography.h3.weight,
+      [vars$y.fontFamily]: globalRefs$p.typography.h3.font,
     },
     subtitle1: {
-      [vars$v.fontSize]: globalRefs$m.typography.subtitle1.size,
-      [vars$v.fontWeight]: globalRefs$m.typography.subtitle1.weight,
-      [vars$v.fontFamily]: globalRefs$m.typography.subtitle1.font,
+      [vars$y.fontSize]: globalRefs$p.typography.subtitle1.size,
+      [vars$y.fontWeight]: globalRefs$p.typography.subtitle1.weight,
+      [vars$y.fontFamily]: globalRefs$p.typography.subtitle1.font,
     },
     subtitle2: {
-      [vars$v.fontSize]: globalRefs$m.typography.subtitle2.size,
-      [vars$v.fontWeight]: globalRefs$m.typography.subtitle2.weight,
-      [vars$v.fontFamily]: globalRefs$m.typography.subtitle2.font,
+      [vars$y.fontSize]: globalRefs$p.typography.subtitle2.size,
+      [vars$y.fontWeight]: globalRefs$p.typography.subtitle2.weight,
+      [vars$y.fontFamily]: globalRefs$p.typography.subtitle2.font,
     },
     body1: {
-      [vars$v.fontSize]: globalRefs$m.typography.body1.size,
-      [vars$v.fontWeight]: globalRefs$m.typography.body1.weight,
-      [vars$v.fontFamily]: globalRefs$m.typography.body1.font,
+      [vars$y.fontSize]: globalRefs$p.typography.body1.size,
+      [vars$y.fontWeight]: globalRefs$p.typography.body1.weight,
+      [vars$y.fontFamily]: globalRefs$p.typography.body1.font,
     },
     body2: {
-      [vars$v.fontSize]: globalRefs$m.typography.body2.size,
-      [vars$v.fontWeight]: globalRefs$m.typography.body2.weight,
-      [vars$v.fontFamily]: globalRefs$m.typography.body2.font,
+      [vars$y.fontSize]: globalRefs$p.typography.body2.size,
+      [vars$y.fontWeight]: globalRefs$p.typography.body2.weight,
+      [vars$y.fontFamily]: globalRefs$p.typography.body2.font,
     },
   },
 
   mode: {
     primary: {
-      [vars$v.textColor]: globalRefs$m.colors.surface.contrast,
+      [vars$y.textColor]: globalRefs$p.colors.surface.contrast,
     },
     secondary: {
-      [vars$v.textColor]: globalRefs$m.colors.surface.dark,
+      [vars$y.textColor]: globalRefs$p.colors.surface.dark,
     },
     error: {
-      [vars$v.textColor]: globalRefs$m.colors.error.main,
+      [vars$y.textColor]: globalRefs$p.colors.error.main,
     },
     success: {
-      [vars$v.textColor]: globalRefs$m.colors.success.main,
+      [vars$y.textColor]: globalRefs$p.colors.success.main,
     },
   },
 
   textAlign: {
-    right: { [vars$v.textAlign]: 'right' },
-    left: { [vars$v.textAlign]: 'left' },
-    center: { [vars$v.textAlign]: 'center' },
+    right: { [vars$y.textAlign]: 'right' },
+    left: { [vars$y.textAlign]: 'left' },
+    center: { [vars$y.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$v.hostWidth]: '100%',
+    [vars$y.hostWidth]: '100%',
   },
 
   _italic: {
-    [vars$v.fontStyle]: 'italic',
+    [vars$y.fontStyle]: 'italic',
   },
 
   _uppercase: {
-    [vars$v.textTransform]: 'uppercase',
+    [vars$y.textTransform]: 'uppercase',
   },
 
   _lowercase: {
-    [vars$v.textTransform]: 'lowercase',
+    [vars$y.textTransform]: 'lowercase',
   },
 };
 
 var text$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: text$2,
-  vars: vars$v
+  vars: vars$y
 });
 
 const disableRules = [
@@ -5126,9 +5129,9 @@ const decodeHTML = (html) => {
 
 /* eslint-disable no-param-reassign */
 
-const componentName$C = getComponentName('enriched-text');
+const componentName$F = getComponentName('enriched-text');
 
-class EnrichedText extends createBaseClass({ componentName: componentName$C, baseSelector: ':host > div' }) {
+class EnrichedText extends createBaseClass({ componentName: componentName$F, baseSelector: ':host > div' }) {
   #origLinkRenderer;
 
   #origEmRenderer;
@@ -5318,9 +5321,9 @@ const EnrichedTextClass = compose(
   componentNameValidationMixin
 )(EnrichedText);
 
-const componentName$B = getComponentName('link');
+const componentName$E = getComponentName('link');
 
-class RawLink extends createBaseClass({ componentName: componentName$B, baseSelector: ':host a' }) {
+class RawLink extends createBaseClass({ componentName: componentName$E, baseSelector: ':host a' }) {
   constructor() {
     super();
 
@@ -5384,38 +5387,38 @@ const LinkClass = compose(
   componentNameValidationMixin
 )(RawLink);
 
-const globalRefs$l = getThemeRefs(globals);
-const vars$u = LinkClass.cssVarList;
+const globalRefs$o = getThemeRefs(globals);
+const vars$x = LinkClass.cssVarList;
 
 const link$1 = {
-  [vars$u.hostDirection]: globalRefs$l.direction,
-  [vars$u.cursor]: 'pointer',
+  [vars$x.hostDirection]: globalRefs$o.direction,
+  [vars$x.cursor]: 'pointer',
 
-  [vars$u.textColor]: globalRefs$l.colors.primary.main,
+  [vars$x.textColor]: globalRefs$o.colors.primary.main,
 
   textAlign: {
-    right: { [vars$u.textAlign]: 'right' },
-    left: { [vars$u.textAlign]: 'left' },
-    center: { [vars$u.textAlign]: 'center' },
+    right: { [vars$x.textAlign]: 'right' },
+    left: { [vars$x.textAlign]: 'left' },
+    center: { [vars$x.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$u.hostWidth]: '100%',
+    [vars$x.hostWidth]: '100%',
   },
 
   _hover: {
-    [vars$u.textDecoration]: 'underline',
+    [vars$x.textDecoration]: 'underline',
   },
 
   mode: {
     secondary: {
-      [vars$u.textColor]: globalRefs$l.colors.secondary.main,
+      [vars$x.textColor]: globalRefs$o.colors.secondary.main,
     },
     error: {
-      [vars$u.textColor]: globalRefs$l.colors.error.main,
+      [vars$x.textColor]: globalRefs$o.colors.error.main,
     },
     success: {
-      [vars$u.textColor]: globalRefs$l.colors.success.main,
+      [vars$x.textColor]: globalRefs$o.colors.success.main,
     },
   },
 };
@@ -5423,41 +5426,41 @@ const link$1 = {
 var link$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: link$1,
-  vars: vars$u
+  vars: vars$x
 });
 
-const globalRefs$k = getThemeRefs(globals);
-const vars$t = EnrichedTextClass.cssVarList;
+const globalRefs$n = getThemeRefs(globals);
+const vars$w = EnrichedTextClass.cssVarList;
 
 const enrichedText = {
-  [vars$t.hostDirection]: globalRefs$k.direction,
-  [vars$t.hostWidth]: useVar(vars$v.hostWidth),
+  [vars$w.hostDirection]: globalRefs$n.direction,
+  [vars$w.hostWidth]: useVar(vars$y.hostWidth),
 
-  [vars$t.textLineHeight]: useVar(vars$v.textLineHeight),
-  [vars$t.textColor]: useVar(vars$v.textColor),
-  [vars$t.textAlign]: useVar(vars$v.textAlign),
+  [vars$w.textLineHeight]: useVar(vars$y.textLineHeight),
+  [vars$w.textColor]: useVar(vars$y.textColor),
+  [vars$w.textAlign]: useVar(vars$y.textAlign),
 
-  [vars$t.fontSize]: useVar(vars$v.fontSize),
-  [vars$t.fontWeight]: useVar(vars$v.fontWeight),
-  [vars$t.fontFamily]: useVar(vars$v.fontFamily),
+  [vars$w.fontSize]: useVar(vars$y.fontSize),
+  [vars$w.fontWeight]: useVar(vars$y.fontWeight),
+  [vars$w.fontFamily]: useVar(vars$y.fontFamily),
 
-  [vars$t.linkColor]: useVar(vars$u.textColor),
-  [vars$t.linkTextDecoration]: 'none',
-  [vars$t.linkHoverTextDecoration]: 'underline',
+  [vars$w.linkColor]: useVar(vars$x.textColor),
+  [vars$w.linkTextDecoration]: 'none',
+  [vars$w.linkHoverTextDecoration]: 'underline',
 
-  [vars$t.fontWeightBold]: '900',
-  [vars$t.minWidth]: '0.25em',
-  [vars$t.minHeight]: '1.35em',
+  [vars$w.fontWeightBold]: '900',
+  [vars$w.minWidth]: '0.25em',
+  [vars$w.minHeight]: '1.35em',
 };
 
 var enrichedText$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: enrichedText,
-  vars: vars$t
+  vars: vars$w
 });
 
-const componentName$A = getComponentName('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$A, baseSelector: ':host > div' }) {
+const componentName$D = getComponentName('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$D, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -5556,65 +5559,65 @@ const DividerClass = compose(
   componentNameValidationMixin
 )(RawDivider);
 
-const globalRefs$j = getThemeRefs(globals);
-const compVars$3 = DividerClass.cssVarList;
+const globalRefs$m = getThemeRefs(globals);
+const compVars$4 = DividerClass.cssVarList;
 
-const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
+const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
   {
     thickness: '2px',
     spacing: '10px',
   },
-  componentName$A
+  componentName$D
 );
 
 const divider = {
-  ...helperTheme$1,
+  ...helperTheme$2,
 
-  [compVars$3.hostDirection]: globalRefs$j.direction,
-  [compVars$3.alignItems]: 'center',
-  [compVars$3.flexDirection]: 'row',
-  [compVars$3.alignSelf]: 'stretch',
-  [compVars$3.hostWidth]: '100%',
-  [compVars$3.stripeColor]: globalRefs$j.colors.surface.light,
-  [compVars$3.stripeColorOpacity]: '0.5',
-  [compVars$3.stripeHorizontalThickness]: helperRefs$1.thickness,
-  [compVars$3.labelTextWidth]: 'fit-content',
-  [compVars$3.labelTextMaxWidth]: 'calc(100% - 100px)',
-  [compVars$3.labelTextHorizontalSpacing]: helperRefs$1.spacing,
-  [compVars$3.textAlign]: 'center',
+  [compVars$4.hostDirection]: globalRefs$m.direction,
+  [compVars$4.alignItems]: 'center',
+  [compVars$4.flexDirection]: 'row',
+  [compVars$4.alignSelf]: 'stretch',
+  [compVars$4.hostWidth]: '100%',
+  [compVars$4.stripeColor]: globalRefs$m.colors.surface.light,
+  [compVars$4.stripeColorOpacity]: '0.5',
+  [compVars$4.stripeHorizontalThickness]: helperRefs$2.thickness,
+  [compVars$4.labelTextWidth]: 'fit-content',
+  [compVars$4.labelTextMaxWidth]: 'calc(100% - 100px)',
+  [compVars$4.labelTextHorizontalSpacing]: helperRefs$2.spacing,
+  [compVars$4.textAlign]: 'center',
 
   _vertical: {
-    [compVars$3.minHeight]: '200px',
-    [compVars$3.flexDirection]: 'column',
-    [compVars$3.hostWidth]: 'fit-content',
-    [compVars$3.hostPadding]: `0 calc(${helperRefs$1.thickness} * 3)`,
-    [compVars$3.stripeVerticalThickness]: helperRefs$1.thickness,
-    [compVars$3.labelTextWidth]: 'fit-content',
-    [compVars$3.labelTextMaxWidth]: '100%',
-    [compVars$3.labelTextVerticalSpacing]: helperRefs$1.spacing,
+    [compVars$4.minHeight]: '200px',
+    [compVars$4.flexDirection]: 'column',
+    [compVars$4.hostWidth]: 'fit-content',
+    [compVars$4.hostPadding]: `0 calc(${helperRefs$2.thickness} * 3)`,
+    [compVars$4.stripeVerticalThickness]: helperRefs$2.thickness,
+    [compVars$4.labelTextWidth]: 'fit-content',
+    [compVars$4.labelTextMaxWidth]: '100%',
+    [compVars$4.labelTextVerticalSpacing]: helperRefs$2.spacing,
   },
 };
 
-const vars$s = {
-  ...compVars$3,
-  ...helperVars$1,
+const vars$v = {
+  ...compVars$4,
+  ...helperVars$2,
 };
 
 var divider$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: divider,
-  vars: vars$s
+  vars: vars$v
 });
 
 /* eslint-disable no-param-reassign */
 
-const componentName$z = getComponentName('passcode-internal');
+const componentName$C = getComponentName('passcode-internal');
 
-createBaseInputClass({ componentName: componentName$z, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$C, baseSelector: 'div' });
 
-const componentName$y = getComponentName('loader-radial');
+const componentName$B = getComponentName('loader-radial');
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$y, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$B, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -5658,11 +5661,11 @@ const LoaderRadialClass = compose(
   componentNameValidationMixin
 )(RawLoaderRadial);
 
-const componentName$x = getComponentName('passcode');
+const componentName$A = getComponentName('passcode');
 
 const observedAttributes$3 = ['digits'];
 
-const customMixin$7 = (superclass) =>
+const customMixin$9 = (superclass) =>
   class PasscodeMixinClass extends superclass {
     static get observedAttributes() {
       return observedAttributes$3.concat(superclass.observedAttributes || []);
@@ -5677,17 +5680,17 @@ const customMixin$7 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$z}
+      <${componentName$C}
         bordered="true"
         name="code"
         tabindex="-1"
         slot="input"
-      ><slot></slot></${componentName$z}>
+      ><slot></slot></${componentName$C}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$z);
+      this.inputElement = this.shadowRoot.querySelector(componentName$C);
 
       forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
     }
@@ -5758,7 +5761,7 @@ const PasscodeClass = compose(
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
-  customMixin$7
+  customMixin$9
 )(
   createProxy({
     slots: [],
@@ -5839,56 +5842,56 @@ const PasscodeClass = compose(
 			${resetInputCursor('vaadin-text-field')}
     	`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$x,
+    componentName: componentName$A,
   })
 );
 
-const vars$r = PasscodeClass.cssVarList;
+const vars$u = PasscodeClass.cssVarList;
 
 const passcode = {
-  [vars$r.hostDirection]: refs.direction,
-  [vars$r.fontFamily]: refs.fontFamily,
-  [vars$r.fontSize]: refs.fontSize,
-  [vars$r.labelTextColor]: refs.labelTextColor,
-  [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$r.digitValueTextColor]: refs.valueTextColor,
-  [vars$r.digitPadding]: '0',
-  [vars$r.digitTextAlign]: 'center',
-  [vars$r.digitSpacing]: '4px',
-  [vars$r.hostWidth]: refs.width,
-  [vars$r.digitOutlineColor]: 'transparent',
-  [vars$r.digitOutlineWidth]: refs.outlineWidth,
-  [vars$r.focusedDigitFieldOutlineColor]: refs.outlineColor,
-  [vars$r.digitSize]: refs.inputHeight,
+  [vars$u.hostDirection]: refs.direction,
+  [vars$u.fontFamily]: refs.fontFamily,
+  [vars$u.fontSize]: refs.fontSize,
+  [vars$u.labelTextColor]: refs.labelTextColor,
+  [vars$u.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$u.digitValueTextColor]: refs.valueTextColor,
+  [vars$u.digitPadding]: '0',
+  [vars$u.digitTextAlign]: 'center',
+  [vars$u.digitSpacing]: '4px',
+  [vars$u.hostWidth]: refs.width,
+  [vars$u.digitOutlineColor]: 'transparent',
+  [vars$u.digitOutlineWidth]: refs.outlineWidth,
+  [vars$u.focusedDigitFieldOutlineColor]: refs.outlineColor,
+  [vars$u.digitSize]: refs.inputHeight,
 
   size: {
-    xs: { [vars$r.spinnerSize]: '15px' },
-    sm: { [vars$r.spinnerSize]: '20px' },
-    md: { [vars$r.spinnerSize]: '20px' },
-    lg: { [vars$r.spinnerSize]: '20px' },
+    xs: { [vars$u.spinnerSize]: '15px' },
+    sm: { [vars$u.spinnerSize]: '20px' },
+    md: { [vars$u.spinnerSize]: '20px' },
+    lg: { [vars$u.spinnerSize]: '20px' },
   },
 
   _hideCursor: {
-    [vars$r.digitCaretTextColor]: 'transparent',
+    [vars$u.digitCaretTextColor]: 'transparent',
   },
 
   _loading: {
-    [vars$r.overlayOpacity]: refs.overlayOpacity,
+    [vars$u.overlayOpacity]: refs.overlayOpacity,
   },
 };
 
 var passcode$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: passcode,
-  vars: vars$r
+  vars: vars$u
 });
 
-const componentName$w = getComponentName('loader-linear');
+const componentName$z = getComponentName('loader-linear');
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$w, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$z, baseSelector: ':host > div' }) {
   static get componentName() {
-    return componentName$w;
+    return componentName$z;
   }
 
   constructor() {
@@ -5949,107 +5952,107 @@ const LoaderLinearClass = compose(
   componentNameValidationMixin
 )(RawLoaderLinear);
 
-const globalRefs$i = getThemeRefs(globals);
-const vars$q = LoaderLinearClass.cssVarList;
+const globalRefs$l = getThemeRefs(globals);
+const vars$t = LoaderLinearClass.cssVarList;
 
 const loaderLinear = {
-  [vars$q.hostDisplay]: 'inline-block',
-  [vars$q.hostWidth]: '100%',
+  [vars$t.hostDisplay]: 'inline-block',
+  [vars$t.hostWidth]: '100%',
 
-  [vars$q.barColor]: globalRefs$i.colors.surface.contrast,
-  [vars$q.barWidth]: '20%',
+  [vars$t.barColor]: globalRefs$l.colors.surface.contrast,
+  [vars$t.barWidth]: '20%',
 
-  [vars$q.barBackgroundColor]: globalRefs$i.colors.surface.light,
-  [vars$q.barBorderRadius]: '4px',
+  [vars$t.barBackgroundColor]: globalRefs$l.colors.surface.light,
+  [vars$t.barBorderRadius]: '4px',
 
-  [vars$q.animationDuration]: '2s',
-  [vars$q.animationTimingFunction]: 'linear',
-  [vars$q.animationIterationCount]: 'infinite',
-  [vars$q.verticalPadding]: '0.25em',
+  [vars$t.animationDuration]: '2s',
+  [vars$t.animationTimingFunction]: 'linear',
+  [vars$t.animationIterationCount]: 'infinite',
+  [vars$t.verticalPadding]: '0.25em',
 
   size: {
-    xs: { [vars$q.barHeight]: '2px' },
-    sm: { [vars$q.barHeight]: '4px' },
-    md: { [vars$q.barHeight]: '6px' },
-    lg: { [vars$q.barHeight]: '8px' },
+    xs: { [vars$t.barHeight]: '2px' },
+    sm: { [vars$t.barHeight]: '4px' },
+    md: { [vars$t.barHeight]: '6px' },
+    lg: { [vars$t.barHeight]: '8px' },
   },
 
   mode: {
     primary: {
-      [vars$q.barColor]: globalRefs$i.colors.primary.main,
+      [vars$t.barColor]: globalRefs$l.colors.primary.main,
     },
     secondary: {
-      [vars$q.barColor]: globalRefs$i.colors.secondary.main,
+      [vars$t.barColor]: globalRefs$l.colors.secondary.main,
     },
   },
 
   _hidden: {
-    [vars$q.hostDisplay]: 'none',
+    [vars$t.hostDisplay]: 'none',
   },
 };
 
 var loaderLinear$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderLinear,
-  vars: vars$q
+  vars: vars$t
 });
 
-const globalRefs$h = getThemeRefs(globals);
-const compVars$2 = LoaderRadialClass.cssVarList;
+const globalRefs$k = getThemeRefs(globals);
+const compVars$3 = LoaderRadialClass.cssVarList;
 
-const [helperTheme, helperRefs, helperVars] = createHelperVars(
+const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
   {
-    spinnerColor: globalRefs$h.colors.surface.contrast,
+    spinnerColor: globalRefs$k.colors.surface.contrast,
     mode: {
       primary: {
-        spinnerColor: globalRefs$h.colors.primary.main,
+        spinnerColor: globalRefs$k.colors.primary.main,
       },
       secondary: {
-        spinnerColor: globalRefs$h.colors.secondary.main,
+        spinnerColor: globalRefs$k.colors.secondary.main,
       },
     },
   },
-  componentName$y
+  componentName$B
 );
 
 const loaderRadial = {
-  ...helperTheme,
+  ...helperTheme$1,
 
-  [compVars$2.animationDuration]: '2s',
-  [compVars$2.animationTimingFunction]: 'linear',
-  [compVars$2.animationIterationCount]: 'infinite',
-  [compVars$2.spinnerBorderStyle]: 'solid',
-  [compVars$2.spinnerBorderWidth]: '0.2em',
-  [compVars$2.spinnerBorderRadius]: '50%',
-  [compVars$2.spinnerQuadrant1Color]: helperRefs.spinnerColor,
-  [compVars$2.spinnerQuadrant2Color]: 'transparent',
-  [compVars$2.spinnerQuadrant3Color]: helperRefs.spinnerColor,
-  [compVars$2.spinnerQuadrant4Color]: 'transparent',
+  [compVars$3.animationDuration]: '2s',
+  [compVars$3.animationTimingFunction]: 'linear',
+  [compVars$3.animationIterationCount]: 'infinite',
+  [compVars$3.spinnerBorderStyle]: 'solid',
+  [compVars$3.spinnerBorderWidth]: '0.2em',
+  [compVars$3.spinnerBorderRadius]: '50%',
+  [compVars$3.spinnerQuadrant1Color]: helperRefs$1.spinnerColor,
+  [compVars$3.spinnerQuadrant2Color]: 'transparent',
+  [compVars$3.spinnerQuadrant3Color]: helperRefs$1.spinnerColor,
+  [compVars$3.spinnerQuadrant4Color]: 'transparent',
 
   size: {
-    xs: { [compVars$2.spinnerSize]: '20px' },
-    sm: { [compVars$2.spinnerSize]: '30px' },
-    md: { [compVars$2.spinnerSize]: '40px' },
-    lg: { [compVars$2.spinnerSize]: '60px' },
-    xl: { [compVars$2.spinnerSize]: '80px' },
+    xs: { [compVars$3.spinnerSize]: '20px' },
+    sm: { [compVars$3.spinnerSize]: '30px' },
+    md: { [compVars$3.spinnerSize]: '40px' },
+    lg: { [compVars$3.spinnerSize]: '60px' },
+    xl: { [compVars$3.spinnerSize]: '80px' },
   },
 
   _hidden: {
-    [compVars$2.hostDisplay]: 'none',
+    [compVars$3.hostDisplay]: 'none',
   },
 };
-const vars$p = {
-  ...compVars$2,
-  ...helperVars,
+const vars$s = {
+  ...compVars$3,
+  ...helperVars$1,
 };
 
 var loaderRadial$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderRadial,
-  vars: vars$p
+  vars: vars$s
 });
 
-const componentName$v = getComponentName('combo-box');
+const componentName$y = getComponentName('combo-box');
 
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
@@ -6488,83 +6491,83 @@ const ComboBoxClass = compose(
     // and reset items to an empty array, and opening the list box with no items
     // to display.
     excludeAttrsSync: ['tabindex', 'size', 'data'],
-    componentName: componentName$v,
+    componentName: componentName$y,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   })
 );
 
-const globalRefs$g = getThemeRefs(globals);
-const vars$o = ComboBoxClass.cssVarList;
+const globalRefs$j = getThemeRefs(globals);
+const vars$r = ComboBoxClass.cssVarList;
 
 const comboBox = {
-  [vars$o.hostWidth]: refs.width,
-  [vars$o.hostDirection]: refs.direction,
-  [vars$o.fontSize]: refs.fontSize,
-  [vars$o.fontFamily]: refs.fontFamily,
-  [vars$o.labelFontSize]: refs.labelFontSize,
-  [vars$o.labelFontWeight]: refs.labelFontWeight,
-  [vars$o.labelTextColor]: refs.labelTextColor,
-  [vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$o.inputBorderColor]: refs.borderColor,
-  [vars$o.inputBorderWidth]: refs.borderWidth,
-  [vars$o.inputBorderStyle]: refs.borderStyle,
-  [vars$o.inputBorderRadius]: refs.borderRadius,
-  [vars$o.inputOutlineColor]: refs.outlineColor,
-  [vars$o.inputOutlineOffset]: refs.outlineOffset,
-  [vars$o.inputOutlineWidth]: refs.outlineWidth,
-  [vars$o.inputOutlineStyle]: refs.outlineStyle,
-  [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$o.inputValueTextColor]: refs.valueTextColor,
-  [vars$o.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$o.inputBackgroundColor]: refs.backgroundColor,
-  [vars$o.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$o.inputHeight]: refs.inputHeight,
-  [vars$o.inputDropdownButtonColor]: globalRefs$g.colors.surface.dark,
-  [vars$o.inputDropdownButtonCursor]: 'pointer',
-  [vars$o.inputDropdownButtonSize]: refs.toggleButtonSize,
-  [vars$o.inputDropdownButtonOffset]: globalRefs$g.spacing.xs,
-  [vars$o.overlayItemPaddingInlineStart]: globalRefs$g.spacing.xs,
-  [vars$o.overlayItemPaddingInlineEnd]: globalRefs$g.spacing.lg,
-  [vars$o.labelPosition]: refs.labelPosition,
-  [vars$o.labelTopPosition]: refs.labelTopPosition,
-  [vars$o.labelHorizontalPosition]: refs.labelHorizontalPosition,
-  [vars$o.inputTransformY]: refs.inputTransformY,
-  [vars$o.inputTransition]: refs.inputTransition,
-  [vars$o.marginInlineStart]: refs.marginInlineStart,
-  [vars$o.placeholderOpacity]: refs.placeholderOpacity,
-  [vars$o.inputVerticalAlignment]: refs.inputVerticalAlignment,
-  [vars$o.valueInputHeight]: refs.valueInputHeight,
-  [vars$o.valueInputMarginBottom]: refs.valueInputMarginBottom,
+  [vars$r.hostWidth]: refs.width,
+  [vars$r.hostDirection]: refs.direction,
+  [vars$r.fontSize]: refs.fontSize,
+  [vars$r.fontFamily]: refs.fontFamily,
+  [vars$r.labelFontSize]: refs.labelFontSize,
+  [vars$r.labelFontWeight]: refs.labelFontWeight,
+  [vars$r.labelTextColor]: refs.labelTextColor,
+  [vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$r.inputBorderColor]: refs.borderColor,
+  [vars$r.inputBorderWidth]: refs.borderWidth,
+  [vars$r.inputBorderStyle]: refs.borderStyle,
+  [vars$r.inputBorderRadius]: refs.borderRadius,
+  [vars$r.inputOutlineColor]: refs.outlineColor,
+  [vars$r.inputOutlineOffset]: refs.outlineOffset,
+  [vars$r.inputOutlineWidth]: refs.outlineWidth,
+  [vars$r.inputOutlineStyle]: refs.outlineStyle,
+  [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$r.inputValueTextColor]: refs.valueTextColor,
+  [vars$r.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$r.inputBackgroundColor]: refs.backgroundColor,
+  [vars$r.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$r.inputHeight]: refs.inputHeight,
+  [vars$r.inputDropdownButtonColor]: globalRefs$j.colors.surface.dark,
+  [vars$r.inputDropdownButtonCursor]: 'pointer',
+  [vars$r.inputDropdownButtonSize]: refs.toggleButtonSize,
+  [vars$r.inputDropdownButtonOffset]: globalRefs$j.spacing.xs,
+  [vars$r.overlayItemPaddingInlineStart]: globalRefs$j.spacing.xs,
+  [vars$r.overlayItemPaddingInlineEnd]: globalRefs$j.spacing.lg,
+  [vars$r.labelPosition]: refs.labelPosition,
+  [vars$r.labelTopPosition]: refs.labelTopPosition,
+  [vars$r.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars$r.inputTransformY]: refs.inputTransformY,
+  [vars$r.inputTransition]: refs.inputTransition,
+  [vars$r.marginInlineStart]: refs.marginInlineStart,
+  [vars$r.placeholderOpacity]: refs.placeholderOpacity,
+  [vars$r.inputVerticalAlignment]: refs.inputVerticalAlignment,
+  [vars$r.valueInputHeight]: refs.valueInputHeight,
+  [vars$r.valueInputMarginBottom]: refs.valueInputMarginBottom,
 
   _readonly: {
-    [vars$o.inputDropdownButtonCursor]: 'default',
+    [vars$r.inputDropdownButtonCursor]: 'default',
   },
 
   // Overlay theme exposed via the component:
-  [vars$o.overlayFontSize]: refs.fontSize,
-  [vars$o.overlayFontFamily]: refs.fontFamily,
-  [vars$o.overlayCursor]: 'pointer',
-  [vars$o.overlayItemBoxShadow]: 'none',
-  [vars$o.overlayBackground]: refs.backgroundColor,
-  [vars$o.overlayTextColor]: refs.valueTextColor,
+  [vars$r.overlayFontSize]: refs.fontSize,
+  [vars$r.overlayFontFamily]: refs.fontFamily,
+  [vars$r.overlayCursor]: 'pointer',
+  [vars$r.overlayItemBoxShadow]: 'none',
+  [vars$r.overlayBackground]: refs.backgroundColor,
+  [vars$r.overlayTextColor]: refs.valueTextColor,
 
   // Overlay direct theme:
-  [vars$o.overlay.minHeight]: '400px',
-  [vars$o.overlay.margin]: '0',
+  [vars$r.overlay.minHeight]: '400px',
+  [vars$r.overlay.margin]: '0',
 };
 
 var comboBox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   comboBox: comboBox,
   default: comboBox,
-  vars: vars$o
+  vars: vars$r
 });
 
 const observedAttributes$2 = ['src', 'alt'];
 
-const componentName$u = getComponentName('image');
+const componentName$x = getComponentName('image');
 
-const BaseClass$1 = createBaseClass({ componentName: componentName$u, baseSelector: ':host > img' });
+const BaseClass$1 = createBaseClass({ componentName: componentName$x, baseSelector: ':host > img' });
 class RawImage extends BaseClass$1 {
   static get observedAttributes() {
     return observedAttributes$2.concat(BaseClass$1.observedAttributes || []);
@@ -6604,14 +6607,14 @@ const ImageClass = compose(
   draggableMixin
 )(RawImage);
 
-const vars$n = ImageClass.cssVarList;
+const vars$q = ImageClass.cssVarList;
 
 const image = {};
 
 var image$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: image,
-  vars: vars$n
+  vars: vars$q
 });
 
 var CountryCodes = [
@@ -7830,16 +7833,16 @@ var CountryCodes = [
   ].sort((a, b) => (a.name < b.name ? -1 : 1)),
 ];
 
-const componentName$t = getComponentName('phone-field-internal');
+const componentName$w = getComponentName('phone-field-internal');
 
-createBaseInputClass({ componentName: componentName$t, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$w, baseSelector: 'div' });
 
 const textVars$1 = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
 
-const componentName$s = getComponentName('phone-field');
+const componentName$v = getComponentName('phone-field');
 
-const customMixin$6 = (superclass) =>
+const customMixin$8 = (superclass) =>
   class PhoneFieldMixinClass extends superclass {
     static get CountryCodes() {
       return CountryCodes;
@@ -7851,15 +7854,15 @@ const customMixin$6 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$t}
+				<${componentName$w}
 					tabindex="-1"
 					slot="input"
-				></${componentName$t}>
+				></${componentName$w}>
       		`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$t);
+      this.inputElement = this.shadowRoot.querySelector(componentName$w);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -7997,7 +8000,7 @@ const PhoneFieldClass = compose(
   }),
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
-  customMixin$6
+  customMixin$8
 )(
   createProxy({
     slots: [],
@@ -8081,36 +8084,36 @@ const PhoneFieldClass = compose(
       ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$s,
+    componentName: componentName$v,
   })
 );
 
-const vars$m = PhoneFieldClass.cssVarList;
+const vars$p = PhoneFieldClass.cssVarList;
 
 const phoneField = {
-  [vars$m.hostWidth]: refs.width,
-  [vars$m.hostDirection]: refs.direction,
-  [vars$m.fontSize]: refs.fontSize,
-  [vars$m.fontFamily]: refs.fontFamily,
-  [vars$m.labelTextColor]: refs.labelTextColor,
-  [vars$m.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$m.inputValueTextColor]: refs.valueTextColor,
-  [vars$m.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$m.inputBorderStyle]: refs.borderStyle,
-  [vars$m.inputBorderWidth]: refs.borderWidth,
-  [vars$m.inputBorderColor]: refs.borderColor,
-  [vars$m.inputBorderRadius]: refs.borderRadius,
-  [vars$m.inputOutlineStyle]: refs.outlineStyle,
-  [vars$m.inputOutlineWidth]: refs.outlineWidth,
-  [vars$m.inputOutlineColor]: refs.outlineColor,
-  [vars$m.inputOutlineOffset]: refs.outlineOffset,
-  [vars$m.phoneInputWidth]: refs.minWidth,
-  [vars$m.countryCodeInputWidth]: '5em',
-  [vars$m.countryCodeDropdownWidth]: '20em',
-  [vars$m.marginInlineStart]: '-0.25em',
-  [vars$m.valueInputHeight]: refs.valueInputHeight,
-  [vars$m.valueInputMarginBottom]: refs.valueInputMarginBottom,
+  [vars$p.hostWidth]: refs.width,
+  [vars$p.hostDirection]: refs.direction,
+  [vars$p.fontSize]: refs.fontSize,
+  [vars$p.fontFamily]: refs.fontFamily,
+  [vars$p.labelTextColor]: refs.labelTextColor,
+  [vars$p.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$p.inputValueTextColor]: refs.valueTextColor,
+  [vars$p.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$p.inputBorderStyle]: refs.borderStyle,
+  [vars$p.inputBorderWidth]: refs.borderWidth,
+  [vars$p.inputBorderColor]: refs.borderColor,
+  [vars$p.inputBorderRadius]: refs.borderRadius,
+  [vars$p.inputOutlineStyle]: refs.outlineStyle,
+  [vars$p.inputOutlineWidth]: refs.outlineWidth,
+  [vars$p.inputOutlineColor]: refs.outlineColor,
+  [vars$p.inputOutlineOffset]: refs.outlineOffset,
+  [vars$p.phoneInputWidth]: refs.minWidth,
+  [vars$p.countryCodeInputWidth]: '5em',
+  [vars$p.countryCodeDropdownWidth]: '20em',
+  [vars$p.marginInlineStart]: '-0.25em',
+  [vars$p.valueInputHeight]: refs.valueInputHeight,
+  [vars$p.valueInputMarginBottom]: refs.valueInputMarginBottom,
 
   // '@overlay': {
   // 	overlayItemBackgroundColor: 'red'
@@ -8120,18 +8123,18 @@ const phoneField = {
 var phoneField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: phoneField,
-  vars: vars$m
+  vars: vars$p
 });
 
-const componentName$r = getComponentName('phone-field-internal-input-box');
+const componentName$u = getComponentName('phone-field-internal-input-box');
 
-createBaseInputClass({ componentName: componentName$r, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$u, baseSelector: 'div' });
 
 const textVars = TextFieldClass.cssVarList;
 
-const componentName$q = getComponentName('phone-input-box-field');
+const componentName$t = getComponentName('phone-input-box-field');
 
-const customMixin$5 = (superclass) =>
+const customMixin$7 = (superclass) =>
   class PhoneInputBoxFieldMixinClass extends superclass {
     static get CountryCodes() {
       return CountryCodes;
@@ -8143,15 +8146,15 @@ const customMixin$5 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$r}
+				<${componentName$u}
 					tabindex="-1"
 					slot="input"
-				></${componentName$r}>
+				></${componentName$u}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$r);
+      this.inputElement = this.shadowRoot.querySelector(componentName$u);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -8253,7 +8256,7 @@ const PhoneFieldInputBoxClass = compose(
   }),
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
-  customMixin$5
+  customMixin$7
 )(
   createProxy({
     slots: [],
@@ -8328,68 +8331,68 @@ const PhoneFieldInputBoxClass = compose(
     ${inputFloatingLabelStyle()}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$q,
+    componentName: componentName$t,
   })
 );
 
-const vars$l = PhoneFieldInputBoxClass.cssVarList;
+const vars$o = PhoneFieldInputBoxClass.cssVarList;
 
 const phoneInputBoxField = {
-  [vars$l.hostWidth]: '16em',
-  [vars$l.hostMinWidth]: refs.minWidth,
-  [vars$l.hostDirection]: refs.direction,
-  [vars$l.fontSize]: refs.fontSize,
-  [vars$l.fontFamily]: refs.fontFamily,
-  [vars$l.labelFontSize]: refs.labelFontSize,
-  [vars$l.labelFontWeight]: refs.labelFontWeight,
-  [vars$l.labelTextColor]: refs.labelTextColor,
-  [vars$l.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$l.inputValueTextColor]: refs.valueTextColor,
-  [vars$l.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$l.inputBorderStyle]: refs.borderStyle,
-  [vars$l.inputBorderWidth]: refs.borderWidth,
-  [vars$l.inputBorderColor]: refs.borderColor,
-  [vars$l.inputBorderRadius]: refs.borderRadius,
-  [vars$l.inputOutlineStyle]: refs.outlineStyle,
-  [vars$l.inputOutlineWidth]: refs.outlineWidth,
-  [vars$l.inputOutlineColor]: refs.outlineColor,
-  [vars$l.inputOutlineOffset]: refs.outlineOffset,
-  [vars$l.labelPosition]: refs.labelPosition,
-  [vars$l.labelTopPosition]: refs.labelTopPosition,
-  [vars$l.labelHorizontalPosition]: refs.labelHorizontalPosition,
-  [vars$l.inputTransformY]: refs.inputTransformY,
-  [vars$l.inputTransition]: refs.inputTransition,
-  [vars$l.marginInlineStart]: refs.marginInlineStart,
-  [vars$l.valueInputHeight]: refs.valueInputHeight,
-  [vars$l.valueInputMarginBottom]: refs.valueInputMarginBottom,
-  [vars$l.inputHorizontalPadding]: '0',
+  [vars$o.hostWidth]: '16em',
+  [vars$o.hostMinWidth]: refs.minWidth,
+  [vars$o.hostDirection]: refs.direction,
+  [vars$o.fontSize]: refs.fontSize,
+  [vars$o.fontFamily]: refs.fontFamily,
+  [vars$o.labelFontSize]: refs.labelFontSize,
+  [vars$o.labelFontWeight]: refs.labelFontWeight,
+  [vars$o.labelTextColor]: refs.labelTextColor,
+  [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$o.inputValueTextColor]: refs.valueTextColor,
+  [vars$o.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$o.inputBorderStyle]: refs.borderStyle,
+  [vars$o.inputBorderWidth]: refs.borderWidth,
+  [vars$o.inputBorderColor]: refs.borderColor,
+  [vars$o.inputBorderRadius]: refs.borderRadius,
+  [vars$o.inputOutlineStyle]: refs.outlineStyle,
+  [vars$o.inputOutlineWidth]: refs.outlineWidth,
+  [vars$o.inputOutlineColor]: refs.outlineColor,
+  [vars$o.inputOutlineOffset]: refs.outlineOffset,
+  [vars$o.labelPosition]: refs.labelPosition,
+  [vars$o.labelTopPosition]: refs.labelTopPosition,
+  [vars$o.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars$o.inputTransformY]: refs.inputTransformY,
+  [vars$o.inputTransition]: refs.inputTransition,
+  [vars$o.marginInlineStart]: refs.marginInlineStart,
+  [vars$o.valueInputHeight]: refs.valueInputHeight,
+  [vars$o.valueInputMarginBottom]: refs.valueInputMarginBottom,
+  [vars$o.inputHorizontalPadding]: '0',
 
   _fullWidth: {
-    [vars$l.hostWidth]: refs.width,
+    [vars$o.hostWidth]: refs.width,
   },
 };
 
 var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: phoneInputBoxField,
-  vars: vars$l
+  vars: vars$o
 });
 
-const componentName$p = getComponentName('new-password-internal');
+const componentName$s = getComponentName('new-password-internal');
 
 const interpolateString = (template, values) =>
   template.replace(/{{(\w+)+}}/g, (match, key) => values?.[key] || match);
 
 // eslint-disable-next-line max-classes-per-file
 
-const componentName$o = getComponentName('policy-validation');
+const componentName$r = getComponentName('policy-validation');
 
 const overrideAttrs = ['data-password-policy-value-minlength'];
 const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
 const policyAttrs = ['label', 'value', ...dataAttrs];
 
-class RawPolicyValidation extends createBaseClass({ componentName: componentName$o, baseSelector: ':host > div' }) {
+class RawPolicyValidation extends createBaseClass({ componentName: componentName$r, baseSelector: ':host > div' }) {
   #availablePolicies;
 
   #activePolicies = [];
@@ -8597,11 +8600,11 @@ const PolicyValidationClass = compose(
   componentNameValidationMixin
 )(RawPolicyValidation);
 
-const componentName$n = getComponentName('new-password');
+const componentName$q = getComponentName('new-password');
 
 const policyPreviewVars = PolicyValidationClass.cssVarList;
 
-const customMixin$4 = (superclass) =>
+const customMixin$6 = (superclass) =>
   class NewPasswordMixinClass extends superclass {
     init() {
       super.init?.();
@@ -8609,17 +8612,17 @@ const customMixin$4 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-			<${componentName$p}
+			<${componentName$s}
 				name="new-password"
 				tabindex="-1"
 				slot="input"
 			>
-      </${componentName$p}>
+      </${componentName$s}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$p);
+      this.inputElement = this.shadowRoot.querySelector(componentName$s);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
@@ -8704,7 +8707,7 @@ const NewPasswordClass = compose(
   }),
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
-  customMixin$4
+  customMixin$6
 )(
   createProxy({
     slots: [],
@@ -8763,40 +8766,40 @@ const NewPasswordClass = compose(
     }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$n,
+    componentName: componentName$q,
   })
 );
 
-const globalRefs$f = getThemeRefs(globals);
-const vars$k = NewPasswordClass.cssVarList;
+const globalRefs$i = getThemeRefs(globals);
+const vars$n = NewPasswordClass.cssVarList;
 
 const newPassword = {
-  [vars$k.hostWidth]: refs.width,
-  [vars$k.hostMinWidth]: refs.minWidth,
-  [vars$k.hostDirection]: refs.direction,
-  [vars$k.fontSize]: refs.fontSize,
-  [vars$k.fontFamily]: refs.fontFamily,
-  [vars$k.labelFontSize]: refs.labelFontSize,
-  [vars$k.labelFontWeight]: refs.labelFontWeight,
-  [vars$k.labelTextColor]: refs.labelTextColor,
-  [vars$k.spaceBetweenInputs]: '1em',
-  [vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$k.policyPreviewBackgroundColor]: 'none',
-  [vars$k.policyPreviewPadding]: globalRefs$f.spacing.lg,
-  [vars$k.valueInputHeight]: refs.valueInputHeight,
+  [vars$n.hostWidth]: refs.width,
+  [vars$n.hostMinWidth]: refs.minWidth,
+  [vars$n.hostDirection]: refs.direction,
+  [vars$n.fontSize]: refs.fontSize,
+  [vars$n.fontFamily]: refs.fontFamily,
+  [vars$n.labelFontSize]: refs.labelFontSize,
+  [vars$n.labelFontWeight]: refs.labelFontWeight,
+  [vars$n.labelTextColor]: refs.labelTextColor,
+  [vars$n.spaceBetweenInputs]: '1em',
+  [vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$n.policyPreviewBackgroundColor]: 'none',
+  [vars$n.policyPreviewPadding]: globalRefs$i.spacing.lg,
+  [vars$n.valueInputHeight]: refs.valueInputHeight,
 
   _required: {
     // NewPassword doesn't pass `required` attribute to its Password components.
     // That's why we fake the required indicator on each input.
     // We do that by injecting `::after` element, and populating it with requiredIndicator content.
-    [vars$k.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
+    [vars$n.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
   },
 };
 
 var newPassword$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: newPassword,
-  vars: vars$k
+  vars: vars$n
 });
 
 const getFileBase64 = (fileObj) => {
@@ -8811,7 +8814,7 @@ const getFilename = (fileObj) => {
   return fileObj.name.replace(/^.*\\/, '');
 };
 
-const componentName$m = getComponentName('upload-file');
+const componentName$p = getComponentName('upload-file');
 
 const observedAttributes$1 = [
   'title',
@@ -8826,7 +8829,7 @@ const observedAttributes$1 = [
   'icon',
 ];
 
-const BaseInputClass = createBaseInputClass({ componentName: componentName$m, baseSelector: ':host > div' });
+const BaseInputClass = createBaseInputClass({ componentName: componentName$p, baseSelector: ':host > div' });
 
 class RawUploadFile extends BaseInputClass {
   static get observedAttributes() {
@@ -9041,77 +9044,77 @@ const UploadFileClass = compose(
   componentNameValidationMixin
 )(RawUploadFile);
 
-const vars$j = UploadFileClass.cssVarList;
+const vars$m = UploadFileClass.cssVarList;
 
 const uploadFile = {
-  [vars$j.hostDirection]: refs.direction,
-  [vars$j.labelTextColor]: refs.labelTextColor,
-  [vars$j.fontFamily]: refs.fontFamily,
+  [vars$m.hostDirection]: refs.direction,
+  [vars$m.labelTextColor]: refs.labelTextColor,
+  [vars$m.fontFamily]: refs.fontFamily,
 
-  [vars$j.iconSize]: '2em',
+  [vars$m.iconSize]: '2em',
 
-  [vars$j.hostPadding]: '0.75em',
-  [vars$j.gap]: '0.5em',
+  [vars$m.hostPadding]: '0.75em',
+  [vars$m.gap]: '0.5em',
 
-  [vars$j.fontSize]: '16px',
-  [vars$j.titleFontWeight]: '500',
-  [vars$j.lineHeight]: '1em',
+  [vars$m.fontSize]: '16px',
+  [vars$m.titleFontWeight]: '500',
+  [vars$m.lineHeight]: '1em',
 
-  [vars$j.borderWidth]: refs.borderWidth,
-  [vars$j.borderColor]: refs.borderColor,
-  [vars$j.borderRadius]: refs.borderRadius,
-  [vars$j.borderStyle]: 'dashed',
+  [vars$m.borderWidth]: refs.borderWidth,
+  [vars$m.borderColor]: refs.borderColor,
+  [vars$m.borderRadius]: refs.borderRadius,
+  [vars$m.borderStyle]: 'dashed',
 
   _required: {
-    [vars$j.requiredIndicator]: refs.requiredIndicator,
+    [vars$m.requiredIndicator]: refs.requiredIndicator,
   },
 
   size: {
     xs: {
-      [vars$j.hostHeight]: '196px',
-      [vars$j.hostWidth]: '200px',
-      [vars$j.titleFontSize]: '0.875em',
-      [vars$j.descriptionFontSize]: '0.875em',
-      [vars$j.lineHeight]: '1.25em',
+      [vars$m.hostHeight]: '196px',
+      [vars$m.hostWidth]: '200px',
+      [vars$m.titleFontSize]: '0.875em',
+      [vars$m.descriptionFontSize]: '0.875em',
+      [vars$m.lineHeight]: '1.25em',
     },
     sm: {
-      [vars$j.hostHeight]: '216px',
-      [vars$j.hostWidth]: '230px',
-      [vars$j.titleFontSize]: '1em',
-      [vars$j.descriptionFontSize]: '0.875em',
-      [vars$j.lineHeight]: '1.25em',
+      [vars$m.hostHeight]: '216px',
+      [vars$m.hostWidth]: '230px',
+      [vars$m.titleFontSize]: '1em',
+      [vars$m.descriptionFontSize]: '0.875em',
+      [vars$m.lineHeight]: '1.25em',
     },
     md: {
-      [vars$j.hostHeight]: '256px',
-      [vars$j.hostWidth]: '312px',
-      [vars$j.titleFontSize]: '1.125em',
-      [vars$j.descriptionFontSize]: '1em',
-      [vars$j.lineHeight]: '1.5em',
+      [vars$m.hostHeight]: '256px',
+      [vars$m.hostWidth]: '312px',
+      [vars$m.titleFontSize]: '1.125em',
+      [vars$m.descriptionFontSize]: '1em',
+      [vars$m.lineHeight]: '1.5em',
     },
     lg: {
-      [vars$j.hostHeight]: '280px',
-      [vars$j.hostWidth]: '336px',
-      [vars$j.titleFontSize]: '1.125em',
-      [vars$j.descriptionFontSize]: '1.125em',
-      [vars$j.lineHeight]: '1.75em',
+      [vars$m.hostHeight]: '280px',
+      [vars$m.hostWidth]: '336px',
+      [vars$m.titleFontSize]: '1.125em',
+      [vars$m.descriptionFontSize]: '1.125em',
+      [vars$m.lineHeight]: '1.75em',
     },
   },
 
   _fullWidth: {
-    [vars$j.hostWidth]: refs.width,
+    [vars$m.hostWidth]: refs.width,
   },
 };
 
 var uploadFile$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: uploadFile,
-  vars: vars$j
+  vars: vars$m
 });
 
-const componentName$l = getComponentName('button-selection-group-item');
+const componentName$o = getComponentName('button-selection-group-item');
 
 class RawSelectItem extends createBaseClass({
-  componentName: componentName$l,
+  componentName: componentName$o,
   baseSelector: ':host > descope-button',
 }) {
   get size() {
@@ -9218,39 +9221,39 @@ const ButtonSelectionGroupItemClass = compose(
   componentNameValidationMixin
 )(RawSelectItem);
 
-const globalRefs$e = getThemeRefs(globals);
+const globalRefs$h = getThemeRefs(globals);
 
-const vars$i = ButtonSelectionGroupItemClass.cssVarList;
+const vars$l = ButtonSelectionGroupItemClass.cssVarList;
 
 const buttonSelectionGroupItem = {
-  [vars$i.hostDirection]: 'inherit',
-  [vars$i.backgroundColor]: globalRefs$e.colors.surface.main,
-  [vars$i.labelTextColor]: globalRefs$e.colors.surface.contrast,
-  [vars$i.borderColor]: globalRefs$e.colors.surface.light,
-  [vars$i.borderStyle]: 'solid',
-  [vars$i.borderRadius]: globalRefs$e.radius.sm,
-  [vars$i.outlineColor]: 'transparent',
-  [vars$i.borderWidth]: globalRefs$e.border.xs,
+  [vars$l.hostDirection]: 'inherit',
+  [vars$l.backgroundColor]: globalRefs$h.colors.surface.main,
+  [vars$l.labelTextColor]: globalRefs$h.colors.surface.contrast,
+  [vars$l.borderColor]: globalRefs$h.colors.surface.light,
+  [vars$l.borderStyle]: 'solid',
+  [vars$l.borderRadius]: globalRefs$h.radius.sm,
+  [vars$l.outlineColor]: 'transparent',
+  [vars$l.borderWidth]: globalRefs$h.border.xs,
 
   _hover: {
-    [vars$i.backgroundColor]: globalRefs$e.colors.surface.highlight,
+    [vars$l.backgroundColor]: globalRefs$h.colors.surface.highlight,
   },
 
   _focused: {
-    [vars$i.outlineColor]: globalRefs$e.colors.surface.light,
+    [vars$l.outlineColor]: globalRefs$h.colors.surface.light,
   },
 
   _selected: {
-    [vars$i.borderColor]: globalRefs$e.colors.surface.contrast,
-    [vars$i.backgroundColor]: globalRefs$e.colors.surface.contrast,
-    [vars$i.labelTextColor]: globalRefs$e.colors.surface.main,
+    [vars$l.borderColor]: globalRefs$h.colors.surface.contrast,
+    [vars$l.backgroundColor]: globalRefs$h.colors.surface.contrast,
+    [vars$l.labelTextColor]: globalRefs$h.colors.surface.main,
   },
 };
 
 var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonSelectionGroupItem,
-  vars: vars$i
+  vars: vars$l
 });
 
 const createBaseButtonSelectionGroupInternalClass = (componentName) => {
@@ -9349,10 +9352,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   return BaseButtonSelectionGroupInternalClass;
 };
 
-const componentName$k = getComponentName('button-selection-group-internal');
+const componentName$n = getComponentName('button-selection-group-internal');
 
 class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$k
+  componentName$n
 ) {
   getSelectedNode() {
     return this.items.find((item) => item.hasAttribute('selected'));
@@ -9584,7 +9587,7 @@ const buttonSelectionGroupStyles = `
 			${resetInputCursor('vaadin-text-field')}
     `;
 
-const componentName$j = getComponentName('button-selection-group');
+const componentName$m = getComponentName('button-selection-group');
 
 const buttonSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -9593,19 +9596,19 @@ const buttonSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$k}
+      <${componentName$n}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$k}>
+      </${componentName$n}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$k);
+      this.inputElement = this.shadowRoot.querySelector(componentName$n);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -9630,11 +9633,11 @@ const ButtonSelectionGroupClass = compose(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$j,
+    componentName: componentName$m,
   })
 );
 
-const globalRefs$d = getThemeRefs(globals);
+const globalRefs$g = getThemeRefs(globals);
 
 const createBaseButtonSelectionGroupMappings = (vars) => ({
   [vars.hostDirection]: refs.direction,
@@ -9642,26 +9645,26 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
   [vars.labelTextColor]: refs.labelTextColor,
   [vars.labelRequiredIndicator]: refs.requiredIndicator,
   [vars.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars.itemsSpacing]: globalRefs$d.spacing.sm,
+  [vars.itemsSpacing]: globalRefs$g.spacing.sm,
   [vars.hostWidth]: refs.width,
 });
 
-const vars$h = ButtonSelectionGroupClass.cssVarList;
+const vars$k = ButtonSelectionGroupClass.cssVarList;
 
 const buttonSelectionGroup = {
-  ...createBaseButtonSelectionGroupMappings(vars$h),
+  ...createBaseButtonSelectionGroupMappings(vars$k),
 };
 
 var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonSelectionGroup,
-  vars: vars$h
+  vars: vars$k
 });
 
-const componentName$i = getComponentName('button-multi-selection-group-internal');
+const componentName$l = getComponentName('button-multi-selection-group-internal');
 
 class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$i
+  componentName$l
 ) {
   #getSelectedNodes() {
     return this.items.filter((item) => item.hasAttribute('selected'));
@@ -9764,7 +9767,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
   }
 }
 
-const componentName$h = getComponentName('button-multi-selection-group');
+const componentName$k = getComponentName('button-multi-selection-group');
 
 const buttonMultiSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -9773,19 +9776,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$i}
+      <${componentName$l}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$i}>
+      </${componentName$l}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$i);
+      this.inputElement = this.shadowRoot.querySelector(componentName$l);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
@@ -9810,25 +9813,25 @@ const ButtonMultiSelectionGroupClass = compose(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$h,
+    componentName: componentName$k,
   })
 );
 
-const vars$g = ButtonMultiSelectionGroupClass.cssVarList;
+const vars$j = ButtonMultiSelectionGroupClass.cssVarList;
 
 const buttonMultiSelectionGroup = {
-  ...createBaseButtonSelectionGroupMappings(vars$g),
+  ...createBaseButtonSelectionGroupMappings(vars$j),
 };
 
 var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: buttonMultiSelectionGroup,
-  vars: vars$g
+  vars: vars$j
 });
 
-const componentName$g = getComponentName('modal');
+const componentName$j = getComponentName('modal');
 
-const customMixin$3 = (superclass) =>
+const customMixin$5 = (superclass) =>
   class ModalMixinClass extends superclass {
     get opened() {
       return this.getAttribute('opened') === 'true';
@@ -9918,35 +9921,35 @@ const ModalClass = compose(
   }),
   draggableMixin,
   componentNameValidationMixin,
-  customMixin$3
+  customMixin$5
 )(
   createProxy({
     slots: [''],
     wrappedEleName: 'vaadin-dialog',
     style: () => ``,
     excludeAttrsSync: ['tabindex', 'opened'],
-    componentName: componentName$g,
+    componentName: componentName$j,
   })
 );
 
-const globalRefs$c = getThemeRefs(globals);
+const globalRefs$f = getThemeRefs(globals);
 
-const compVars$1 = ModalClass.cssVarList;
+const compVars$2 = ModalClass.cssVarList;
 
 const modal = {
-  [compVars$1.overlayBackgroundColor]: globalRefs$c.colors.surface.main,
-  [compVars$1.overlayShadow]: globalRefs$c.shadow.wide['2xl'],
-  [compVars$1.overlayWidth]: '540px',
+  [compVars$2.overlayBackgroundColor]: globalRefs$f.colors.surface.main,
+  [compVars$2.overlayShadow]: globalRefs$f.shadow.wide['2xl'],
+  [compVars$2.overlayWidth]: '540px',
 };
 
-const vars$f = {
-  ...compVars$1,
+const vars$i = {
+  ...compVars$2,
 };
 
 var modal$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: modal,
-  vars: vars$f
+  vars: vars$i
 });
 
 const isValidDataType = (data) => {
@@ -10022,7 +10025,7 @@ const defaultRowDetailsRenderer = (item, itemLabelsMapping) => {
   `;
 };
 
-const componentName$f = getComponentName('grid');
+const componentName$i = getComponentName('grid');
 
 const GridMixin = (superclass) =>
   class GridMixinClass extends superclass {
@@ -10376,52 +10379,52 @@ const GridClass = compose(
     /*!css*/
 		`,
     excludeAttrsSync: ['columns', 'tabindex'],
-    componentName: componentName$f,
+    componentName: componentName$i,
   })
 );
 
-const globalRefs$b = getThemeRefs(globals);
-const vars$e = GridClass.cssVarList;
+const globalRefs$e = getThemeRefs(globals);
+const vars$h = GridClass.cssVarList;
 
 const grid = {
-  [vars$e.hostWidth]: '100%',
-  [vars$e.hostHeight]: '100%',
-  [vars$e.hostMinHeight]: '400px',
-  [vars$e.fontWeight]: '400',
-  [vars$e.backgroundColor]: globalRefs$b.colors.surface.main,
-
-  [vars$e.fontSize]: refs.fontSize,
-  [vars$e.fontFamily]: refs.fontFamily,
-
-  [vars$e.sortIndicatorsColor]: globalRefs$b.colors.surface.light,
-  [vars$e.activeSortIndicator]: globalRefs$b.colors.surface.dark,
-  [vars$e.resizeHandleColor]: globalRefs$b.colors.surface.light,
-
-  [vars$e.borderWidth]: refs.borderWidth,
-  [vars$e.borderStyle]: refs.borderStyle,
-  [vars$e.borderRadius]: refs.borderRadius,
-  [vars$e.borderColor]: 'transparent',
-
-  [vars$e.headerRowTextColor]: globalRefs$b.colors.surface.dark,
-  [vars$e.separatorColor]: globalRefs$b.colors.surface.light,
-
-  [vars$e.valueTextColor]: globalRefs$b.colors.surface.contrast,
-  [vars$e.selectedBackgroundColor]: globalRefs$b.colors.surface.highlight,
-  [vars$e.hostDirection]: globalRefs$b.direction,
-
-  [vars$e.toggleDetailsPanelButtonSize]: '1em',
-  [vars$e.toggleDetailsPanelButtonOpenedColor]: globalRefs$b.colors.surface.contrast,
-  [vars$e.toggleDetailsPanelButtonClosedColor]: globalRefs$b.colors.surface.light,
-  [vars$e.toggleDetailsPanelButtonCursor]: 'pointer',
-  [vars$e.detailsPanelBackgroundColor]: globalRefs$b.colors.surface.highlight,
-  [vars$e.detailsPanelBorderTopColor]: globalRefs$b.colors.surface.light,
-  [vars$e.detailsPanelLabelsColor]: globalRefs$b.colors.surface.dark,
-  [vars$e.detailsPanelLabelsFontSize]: '0.8em',
-  [vars$e.detailsPanelItemsGap]: '2em',
-  [vars$e.detailsPanelPadding]: '12px 0',
+  [vars$h.hostWidth]: '100%',
+  [vars$h.hostHeight]: '100%',
+  [vars$h.hostMinHeight]: '400px',
+  [vars$h.fontWeight]: '400',
+  [vars$h.backgroundColor]: globalRefs$e.colors.surface.main,
+
+  [vars$h.fontSize]: refs.fontSize,
+  [vars$h.fontFamily]: refs.fontFamily,
+
+  [vars$h.sortIndicatorsColor]: globalRefs$e.colors.surface.light,
+  [vars$h.activeSortIndicator]: globalRefs$e.colors.surface.dark,
+  [vars$h.resizeHandleColor]: globalRefs$e.colors.surface.light,
+
+  [vars$h.borderWidth]: refs.borderWidth,
+  [vars$h.borderStyle]: refs.borderStyle,
+  [vars$h.borderRadius]: refs.borderRadius,
+  [vars$h.borderColor]: 'transparent',
+
+  [vars$h.headerRowTextColor]: globalRefs$e.colors.surface.dark,
+  [vars$h.separatorColor]: globalRefs$e.colors.surface.light,
+
+  [vars$h.valueTextColor]: globalRefs$e.colors.surface.contrast,
+  [vars$h.selectedBackgroundColor]: globalRefs$e.colors.surface.highlight,
+  [vars$h.hostDirection]: globalRefs$e.direction,
+
+  [vars$h.toggleDetailsPanelButtonSize]: '1em',
+  [vars$h.toggleDetailsPanelButtonOpenedColor]: globalRefs$e.colors.surface.contrast,
+  [vars$h.toggleDetailsPanelButtonClosedColor]: globalRefs$e.colors.surface.light,
+  [vars$h.toggleDetailsPanelButtonCursor]: 'pointer',
+  [vars$h.detailsPanelBackgroundColor]: globalRefs$e.colors.surface.highlight,
+  [vars$h.detailsPanelBorderTopColor]: globalRefs$e.colors.surface.light,
+  [vars$h.detailsPanelLabelsColor]: globalRefs$e.colors.surface.dark,
+  [vars$h.detailsPanelLabelsFontSize]: '0.8em',
+  [vars$h.detailsPanelItemsGap]: '2em',
+  [vars$h.detailsPanelPadding]: '12px 0',
 
   _bordered: {
-    [vars$e.borderColor]: refs.borderColor,
+    [vars$h.borderColor]: refs.borderColor,
   },
 };
 
@@ -10429,10 +10432,10 @@ var grid$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: grid,
   grid: grid,
-  vars: vars$e
+  vars: vars$h
 });
 
-const componentName$e = getComponentName('notification-card');
+const componentName$h = getComponentName('notification-card');
 
 const notificationCardMixin = (superclass) =>
   class NotificationCardMixinClass extends superclass {
@@ -10540,54 +10543,54 @@ const NotificationCardClass = compose(
     }
     `,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$e,
+    componentName: componentName$h,
   })
 );
 
-const globalRefs$a = getThemeRefs(globals);
-const vars$d = NotificationCardClass.cssVarList;
+const globalRefs$d = getThemeRefs(globals);
+const vars$g = NotificationCardClass.cssVarList;
 
-const shadowColor = '#00000020';
+const shadowColor$1 = '#00000020';
 
 const notification = {
-  [vars$d.hostMinWidth]: '415px',
-  [vars$d.fontFamily]: globalRefs$a.fonts.font1.family,
-  [vars$d.fontSize]: globalRefs$a.typography.body1.size,
-  [vars$d.backgroundColor]: globalRefs$a.colors.surface.main,
-  [vars$d.textColor]: globalRefs$a.colors.surface.contrast,
-  [vars$d.boxShadow]: `${globalRefs$a.shadow.wide.xl} ${shadowColor}, ${globalRefs$a.shadow.narrow.xl} ${shadowColor}`,
-  [vars$d.verticalPadding]: '0.625em',
-  [vars$d.horizontalPadding]: '1.5em',
-  [vars$d.borderRadius]: globalRefs$a.radius.xs,
+  [vars$g.hostMinWidth]: '415px',
+  [vars$g.fontFamily]: globalRefs$d.fonts.font1.family,
+  [vars$g.fontSize]: globalRefs$d.typography.body1.size,
+  [vars$g.backgroundColor]: globalRefs$d.colors.surface.main,
+  [vars$g.textColor]: globalRefs$d.colors.surface.contrast,
+  [vars$g.boxShadow]: `${globalRefs$d.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.xl} ${shadowColor$1}`,
+  [vars$g.verticalPadding]: '0.625em',
+  [vars$g.horizontalPadding]: '1.5em',
+  [vars$g.borderRadius]: globalRefs$d.radius.xs,
 
   _bordered: {
-    [vars$d.borderWidth]: globalRefs$a.border.sm,
-    [vars$d.borderStyle]: 'solid',
-    [vars$d.borderColor]: 'transparent',
+    [vars$g.borderWidth]: globalRefs$d.border.sm,
+    [vars$g.borderStyle]: 'solid',
+    [vars$g.borderColor]: 'transparent',
   },
 
   size: {
-    xs: { [vars$d.fontSize]: '12px' },
-    sm: { [vars$d.fontSize]: '14px' },
-    md: { [vars$d.fontSize]: '16px' },
-    lg: { [vars$d.fontSize]: '18px' },
+    xs: { [vars$g.fontSize]: '12px' },
+    sm: { [vars$g.fontSize]: '14px' },
+    md: { [vars$g.fontSize]: '16px' },
+    lg: { [vars$g.fontSize]: '18px' },
   },
 
   mode: {
     primary: {
-      [vars$d.backgroundColor]: globalRefs$a.colors.primary.main,
-      [vars$d.textColor]: globalRefs$a.colors.primary.contrast,
-      [vars$d.borderColor]: globalRefs$a.colors.primary.light,
+      [vars$g.backgroundColor]: globalRefs$d.colors.primary.main,
+      [vars$g.textColor]: globalRefs$d.colors.primary.contrast,
+      [vars$g.borderColor]: globalRefs$d.colors.primary.light,
     },
     success: {
-      [vars$d.backgroundColor]: globalRefs$a.colors.success.main,
-      [vars$d.textColor]: globalRefs$a.colors.success.contrast,
-      [vars$d.borderColor]: globalRefs$a.colors.success.light,
+      [vars$g.backgroundColor]: globalRefs$d.colors.success.main,
+      [vars$g.textColor]: globalRefs$d.colors.success.contrast,
+      [vars$g.borderColor]: globalRefs$d.colors.success.light,
     },
     error: {
-      [vars$d.backgroundColor]: globalRefs$a.colors.error.main,
-      [vars$d.textColor]: globalRefs$a.colors.error.contrast,
-      [vars$d.borderColor]: globalRefs$a.colors.error.light,
+      [vars$g.backgroundColor]: globalRefs$d.colors.error.main,
+      [vars$g.textColor]: globalRefs$d.colors.error.contrast,
+      [vars$g.borderColor]: globalRefs$d.colors.error.light,
     },
   },
 };
@@ -10595,10 +10598,10 @@ const notification = {
 var notificationCard = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: notification,
-  vars: vars$d
+  vars: vars$g
 });
 
-const componentName$d = getComponentName('multi-select-combo-box');
+const componentName$g = getComponentName('multi-select-combo-box');
 
 const multiSelectComboBoxMixin = (superclass) =>
   class MultiSelectComboBoxMixinClass extends superclass {
@@ -11232,93 +11235,93 @@ const MultiSelectComboBoxClass = compose(
     // Note: we exclude `placeholder` because the vaadin component observes it and
     // tries to override it, causing us to lose the user set placeholder.
     excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
-    componentName: componentName$d,
+    componentName: componentName$g,
     includeForwardProps: ['items', 'renderer', 'selectedItems'],
   })
 );
 
-const globalRefs$9 = getThemeRefs(globals);
-const vars$c = MultiSelectComboBoxClass.cssVarList;
+const globalRefs$c = getThemeRefs(globals);
+const vars$f = MultiSelectComboBoxClass.cssVarList;
 
 const multiSelectComboBox = {
-  [vars$c.hostWidth]: refs.width,
-  [vars$c.hostDirection]: refs.direction,
-  [vars$c.fontSize]: refs.fontSize,
-  [vars$c.fontFamily]: refs.fontFamily,
-  [vars$c.labelFontSize]: refs.labelFontSize,
-  [vars$c.labelFontWeight]: refs.labelFontWeight,
-  [vars$c.labelTextColor]: refs.labelTextColor,
-  [vars$c.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$c.inputBorderColor]: refs.borderColor,
-  [vars$c.inputBorderWidth]: refs.borderWidth,
-  [vars$c.inputBorderStyle]: refs.borderStyle,
-  [vars$c.inputBorderRadius]: refs.borderRadius,
-  [vars$c.inputOutlineColor]: refs.outlineColor,
-  [vars$c.inputOutlineOffset]: refs.outlineOffset,
-  [vars$c.inputOutlineWidth]: refs.outlineWidth,
-  [vars$c.inputOutlineStyle]: refs.outlineStyle,
-  [vars$c.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$c.inputValueTextColor]: refs.valueTextColor,
-  [vars$c.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$c.inputBackgroundColor]: refs.backgroundColor,
-  [vars$c.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$c.inputVerticalPadding]: refs.verticalPadding,
-  [vars$c.inputHeight]: refs.inputHeight,
-  [vars$c.inputDropdownButtonColor]: globalRefs$9.colors.surface.dark,
-  [vars$c.inputDropdownButtonCursor]: 'pointer',
-  [vars$c.inputDropdownButtonSize]: refs.toggleButtonSize,
-  [vars$c.inputDropdownButtonOffset]: globalRefs$9.spacing.xs,
-  [vars$c.overlayItemPaddingInlineStart]: globalRefs$9.spacing.xs,
-  [vars$c.overlayItemPaddingInlineEnd]: globalRefs$9.spacing.lg,
-  [vars$c.chipFontSize]: refs.chipFontSize,
-  [vars$c.chipTextColor]: globalRefs$9.colors.surface.contrast,
-  [vars$c.chipBackgroundColor]: globalRefs$9.colors.surface.light,
-  [vars$c.labelPosition]: refs.labelPosition,
-  [vars$c.labelTopPosition]: refs.labelTopPosition,
-  [vars$c.labelLeftPosition]: refs.labelLeftPosition,
-  [vars$c.labelHorizontalPosition]: refs.labelHorizontalPosition,
-  [vars$c.inputTransformY]: refs.inputTransformY,
-  [vars$c.inputTransition]: refs.inputTransition,
-  [vars$c.marginInlineStart]: refs.marginInlineStart,
-  [vars$c.placeholderOpacity]: refs.placeholderOpacity,
-  [vars$c.inputVerticalAlignment]: refs.inputVerticalAlignment,
+  [vars$f.hostWidth]: refs.width,
+  [vars$f.hostDirection]: refs.direction,
+  [vars$f.fontSize]: refs.fontSize,
+  [vars$f.fontFamily]: refs.fontFamily,
+  [vars$f.labelFontSize]: refs.labelFontSize,
+  [vars$f.labelFontWeight]: refs.labelFontWeight,
+  [vars$f.labelTextColor]: refs.labelTextColor,
+  [vars$f.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$f.inputBorderColor]: refs.borderColor,
+  [vars$f.inputBorderWidth]: refs.borderWidth,
+  [vars$f.inputBorderStyle]: refs.borderStyle,
+  [vars$f.inputBorderRadius]: refs.borderRadius,
+  [vars$f.inputOutlineColor]: refs.outlineColor,
+  [vars$f.inputOutlineOffset]: refs.outlineOffset,
+  [vars$f.inputOutlineWidth]: refs.outlineWidth,
+  [vars$f.inputOutlineStyle]: refs.outlineStyle,
+  [vars$f.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$f.inputValueTextColor]: refs.valueTextColor,
+  [vars$f.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$f.inputBackgroundColor]: refs.backgroundColor,
+  [vars$f.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$f.inputVerticalPadding]: refs.verticalPadding,
+  [vars$f.inputHeight]: refs.inputHeight,
+  [vars$f.inputDropdownButtonColor]: globalRefs$c.colors.surface.dark,
+  [vars$f.inputDropdownButtonCursor]: 'pointer',
+  [vars$f.inputDropdownButtonSize]: refs.toggleButtonSize,
+  [vars$f.inputDropdownButtonOffset]: globalRefs$c.spacing.xs,
+  [vars$f.overlayItemPaddingInlineStart]: globalRefs$c.spacing.xs,
+  [vars$f.overlayItemPaddingInlineEnd]: globalRefs$c.spacing.lg,
+  [vars$f.chipFontSize]: refs.chipFontSize,
+  [vars$f.chipTextColor]: globalRefs$c.colors.surface.contrast,
+  [vars$f.chipBackgroundColor]: globalRefs$c.colors.surface.light,
+  [vars$f.labelPosition]: refs.labelPosition,
+  [vars$f.labelTopPosition]: refs.labelTopPosition,
+  [vars$f.labelLeftPosition]: refs.labelLeftPosition,
+  [vars$f.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars$f.inputTransformY]: refs.inputTransformY,
+  [vars$f.inputTransition]: refs.inputTransition,
+  [vars$f.marginInlineStart]: refs.marginInlineStart,
+  [vars$f.placeholderOpacity]: refs.placeholderOpacity,
+  [vars$f.inputVerticalAlignment]: refs.inputVerticalAlignment,
 
   labelType: {
     floating: {
-      [vars$c.inputHorizontalPadding]: '0.25em',
+      [vars$f.inputHorizontalPadding]: '0.25em',
       _hasValue: {
-        [vars$c.inputHorizontalPadding]: '0.45em',
+        [vars$f.inputHorizontalPadding]: '0.45em',
       },
     },
   },
 
   _readonly: {
-    [vars$c.inputDropdownButtonCursor]: 'default',
+    [vars$f.inputDropdownButtonCursor]: 'default',
   },
 
   // Overlay theme exposed via the component:
-  [vars$c.overlayFontSize]: refs.fontSize,
-  [vars$c.overlayFontFamily]: refs.fontFamily,
-  [vars$c.overlayCursor]: 'pointer',
-  [vars$c.overlayItemBoxShadow]: 'none',
-  [vars$c.overlayBackground]: refs.backgroundColor,
-  [vars$c.overlayTextColor]: refs.valueTextColor,
+  [vars$f.overlayFontSize]: refs.fontSize,
+  [vars$f.overlayFontFamily]: refs.fontFamily,
+  [vars$f.overlayCursor]: 'pointer',
+  [vars$f.overlayItemBoxShadow]: 'none',
+  [vars$f.overlayBackground]: refs.backgroundColor,
+  [vars$f.overlayTextColor]: refs.valueTextColor,
 
   // Overlay direct theme:
-  [vars$c.overlay.minHeight]: '400px',
-  [vars$c.overlay.margin]: '0',
+  [vars$f.overlay.minHeight]: '400px',
+  [vars$f.overlay.margin]: '0',
 };
 
 var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: multiSelectComboBox,
   multiSelectComboBox: multiSelectComboBox,
-  vars: vars$c
+  vars: vars$f
 });
 
-const componentName$c = getComponentName('badge');
+const componentName$f = getComponentName('badge');
 
-class RawBadge extends createBaseClass({ componentName: componentName$c, baseSelector: ':host > div' }) {
+class RawBadge extends createBaseClass({ componentName: componentName$f, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -11369,66 +11372,66 @@ const BadgeClass = compose(
   componentNameValidationMixin
 )(RawBadge);
 
-const globalRefs$8 = getThemeRefs(globals);
-const vars$b = BadgeClass.cssVarList;
+const globalRefs$b = getThemeRefs(globals);
+const vars$e = BadgeClass.cssVarList;
 
 const badge$2 = {
-  [vars$b.hostWidth]: 'fit-content',
-  [vars$b.hostDirection]: globalRefs$8.direction,
+  [vars$e.hostWidth]: 'fit-content',
+  [vars$e.hostDirection]: globalRefs$b.direction,
 
-  [vars$b.textAlign]: 'center',
+  [vars$e.textAlign]: 'center',
 
-  [vars$b.fontFamily]: globalRefs$8.fonts.font1.family,
-  [vars$b.fontWeight]: '400',
+  [vars$e.fontFamily]: globalRefs$b.fonts.font1.family,
+  [vars$e.fontWeight]: '400',
 
-  [vars$b.verticalPadding]: '0.25em',
-  [vars$b.horizontalPadding]: '0.5em',
+  [vars$e.verticalPadding]: '0.25em',
+  [vars$e.horizontalPadding]: '0.5em',
 
-  [vars$b.borderWidth]: globalRefs$8.border.xs,
-  [vars$b.borderRadius]: globalRefs$8.radius.xs,
-  [vars$b.borderColor]: 'transparent',
-  [vars$b.borderStyle]: 'solid',
+  [vars$e.borderWidth]: globalRefs$b.border.xs,
+  [vars$e.borderRadius]: globalRefs$b.radius.xs,
+  [vars$e.borderColor]: 'transparent',
+  [vars$e.borderStyle]: 'solid',
 
   _fullWidth: {
-    [vars$b.hostWidth]: '100%',
+    [vars$e.hostWidth]: '100%',
   },
 
   size: {
-    xs: { [vars$b.fontSize]: '12px' },
-    sm: { [vars$b.fontSize]: '14px' },
-    md: { [vars$b.fontSize]: '16px' },
-    lg: { [vars$b.fontSize]: '18px' },
+    xs: { [vars$e.fontSize]: '12px' },
+    sm: { [vars$e.fontSize]: '14px' },
+    md: { [vars$e.fontSize]: '16px' },
+    lg: { [vars$e.fontSize]: '18px' },
   },
 
   mode: {
     default: {
-      [vars$b.textColor]: globalRefs$8.colors.surface.dark,
+      [vars$e.textColor]: globalRefs$b.colors.surface.dark,
       _bordered: {
-        [vars$b.borderColor]: globalRefs$8.colors.surface.light,
+        [vars$e.borderColor]: globalRefs$b.colors.surface.light,
       },
     },
     primary: {
-      [vars$b.textColor]: globalRefs$8.colors.primary.main,
+      [vars$e.textColor]: globalRefs$b.colors.primary.main,
       _bordered: {
-        [vars$b.borderColor]: globalRefs$8.colors.primary.light,
+        [vars$e.borderColor]: globalRefs$b.colors.primary.light,
       },
     },
     secondary: {
-      [vars$b.textColor]: globalRefs$8.colors.secondary.main,
+      [vars$e.textColor]: globalRefs$b.colors.secondary.main,
       _bordered: {
-        [vars$b.borderColor]: globalRefs$8.colors.secondary.light,
+        [vars$e.borderColor]: globalRefs$b.colors.secondary.light,
       },
     },
     error: {
-      [vars$b.textColor]: globalRefs$8.colors.error.main,
+      [vars$e.textColor]: globalRefs$b.colors.error.main,
       _bordered: {
-        [vars$b.borderColor]: globalRefs$8.colors.error.light,
+        [vars$e.borderColor]: globalRefs$b.colors.error.light,
       },
     },
     success: {
-      [vars$b.textColor]: globalRefs$8.colors.success.main,
+      [vars$e.textColor]: globalRefs$b.colors.success.main,
       _bordered: {
-        [vars$b.borderColor]: globalRefs$8.colors.success.light,
+        [vars$e.borderColor]: globalRefs$b.colors.success.light,
       },
     },
   },
@@ -11437,11 +11440,11 @@ const badge$2 = {
 var badge$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: badge$2,
-  vars: vars$b
+  vars: vars$e
 });
 
-const componentName$b = getComponentName('avatar');
-class RawAvatar extends createBaseClass({ componentName: componentName$b, baseSelector: ':host > .wrapper' }) {
+const componentName$e = getComponentName('avatar');
+class RawAvatar extends createBaseClass({ componentName: componentName$e, baseSelector: ':host > .wrapper' }) {
   constructor() {
     super();
 
@@ -11498,7 +11501,7 @@ class RawAvatar extends createBaseClass({ componentName: componentName$b, baseSe
     this.avatarComponent = this.shadowRoot.querySelector('vaadin-avatar');
 
     forwardAttrs(this, this.avatarComponent, {
-      includeAttrs: ['display-name', 'img'],
+      includeAttrs: ['display-name', 'img', 'abbr'],
       mapAttrs: { 'display-name': 'name' },
     });
 
@@ -11527,7 +11530,10 @@ const { host: host$4, editableBadge, avatar: avatar$2 } = {
 const AvatarClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$4, property: 'width' },
+      hostWidth: [
+        { ...host$4, property: 'width' },
+        { ...host$4, property: 'min-width' },
+      ],
       hostHeight: { ...host$4, property: 'height' },
       cursor: [avatar$2, host$4],
       hostDirection: { ...host$4, property: 'direction' },
@@ -11542,58 +11548,58 @@ const AvatarClass = compose(
   componentNameValidationMixin
 )(RawAvatar);
 
-const globalRefs$7 = getThemeRefs(globals);
-const compVars = AvatarClass.cssVarList;
+const globalRefs$a = getThemeRefs(globals);
+const compVars$1 = AvatarClass.cssVarList;
 
 const avatar = {
-  [compVars.hostDirection]: globalRefs$7.direction,
-  [compVars.editableIconColor]: globalRefs$7.colors.surface.dark,
-  [compVars.editableBorderColor]: globalRefs$7.colors.surface.dark,
-  [compVars.editableBackgroundColor]: globalRefs$7.colors.surface.main,
-  [compVars.avatarTextColor]: globalRefs$7.colors.surface.main,
-  [compVars.avatarBackgroundColor]: globalRefs$7.colors.surface.dark,
+  [compVars$1.hostDirection]: globalRefs$a.direction,
+  [compVars$1.editableIconColor]: globalRefs$a.colors.surface.dark,
+  [compVars$1.editableBorderColor]: globalRefs$a.colors.surface.dark,
+  [compVars$1.editableBackgroundColor]: globalRefs$a.colors.surface.main,
+  [compVars$1.avatarTextColor]: globalRefs$a.colors.surface.main,
+  [compVars$1.avatarBackgroundColor]: globalRefs$a.colors.surface.dark,
 
   _editable: {
-    [compVars.cursor]: 'pointer',
+    [compVars$1.cursor]: 'pointer',
   },
 
   size: {
     xs: {
-      [compVars.hostWidth]: '30px',
-      [compVars.hostHeight]: '30px',
+      [compVars$1.hostWidth]: '30px',
+      [compVars$1.hostHeight]: '30px',
     },
     sm: {
-      [compVars.hostWidth]: '40px',
-      [compVars.hostHeight]: '40px',
+      [compVars$1.hostWidth]: '40px',
+      [compVars$1.hostHeight]: '40px',
     },
     md: {
-      [compVars.hostWidth]: '60px',
-      [compVars.hostHeight]: '60px',
+      [compVars$1.hostWidth]: '60px',
+      [compVars$1.hostHeight]: '60px',
     },
     lg: {
-      [compVars.hostWidth]: '98px',
-      [compVars.hostHeight]: '98px',
+      [compVars$1.hostWidth]: '98px',
+      [compVars$1.hostHeight]: '98px',
     },
   },
 };
 
-const vars$a = {
-  ...compVars,
+const vars$d = {
+  ...compVars$1,
 };
 
 var avatar$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: avatar,
-  vars: vars$a
+  vars: vars$d
 });
 
-const componentName$a = getComponentName('mappings-field-internal');
+const componentName$d = getComponentName('mappings-field-internal');
 
-createBaseInputClass({ componentName: componentName$a, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$d, baseSelector: 'div' });
 
-const componentName$9 = getComponentName('mappings-field');
+const componentName$c = getComponentName('mappings-field');
 
-const customMixin$2 = (superclass) =>
+const customMixin$4 = (superclass) =>
   class MappingsFieldMixinClass extends superclass {
     get defaultValues() {
       const defaultValuesAttr = this.getAttribute('default-values');
@@ -11620,14 +11626,14 @@ const customMixin$2 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$a}
+      <${componentName$d}
         tabindex="-1"
-      ></${componentName$a}>
+      ></${componentName$d}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$a);
+      this.inputElement = this.shadowRoot.querySelector(componentName$d);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
@@ -11709,7 +11715,7 @@ const MappingsFieldClass = compose(
     proxyParentValidation: true,
   }),
   componentNameValidationMixin,
-  customMixin$2
+  customMixin$4
 )(
   createProxy({
     slots: [],
@@ -11756,47 +11762,47 @@ const MappingsFieldClass = compose(
       'options',
       'error-message',
     ],
-    componentName: componentName$9,
+    componentName: componentName$c,
   })
 );
 
-const globalRefs$6 = getThemeRefs(globals);
+const globalRefs$9 = getThemeRefs(globals);
 
-const vars$9 = MappingsFieldClass.cssVarList;
+const vars$c = MappingsFieldClass.cssVarList;
 
 const mappingsField = {
-  [vars$9.hostWidth]: refs.width,
-  [vars$9.hostDirection]: refs.direction,
-  [vars$9.fontSize]: refs.fontSize,
-  [vars$9.fontFamily]: refs.fontFamily,
-  [vars$9.separatorFontSize]: '14px',
-  [vars$9.labelsFontSize]: '14px',
-  [vars$9.labelsLineHeight]: '1',
-  [vars$9.labelsMarginBottom]: '6px',
-  [vars$9.labelTextColor]: refs.labelTextColor,
-  [vars$9.itemMarginBottom]: '1em',
+  [vars$c.hostWidth]: refs.width,
+  [vars$c.hostDirection]: refs.direction,
+  [vars$c.fontSize]: refs.fontSize,
+  [vars$c.fontFamily]: refs.fontFamily,
+  [vars$c.separatorFontSize]: '14px',
+  [vars$c.labelsFontSize]: '14px',
+  [vars$c.labelsLineHeight]: '1',
+  [vars$c.labelsMarginBottom]: '6px',
+  [vars$c.labelTextColor]: refs.labelTextColor,
+  [vars$c.itemMarginBottom]: '1em',
   // To be positioned correctly, the min width has to match the text field min width
-  [vars$9.valueLabelMinWidth]: refs.minWidth,
+  [vars$c.valueLabelMinWidth]: refs.minWidth,
   // To be positioned correctly, the min width has to match the combo box field min width
-  [vars$9.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$6.border.xs})`,
-  [vars$9.separatorWidth]: '70px',
-  [vars$9.removeButtonWidth]: '60px',
+  [vars$c.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$9.border.xs})`,
+  [vars$c.separatorWidth]: '70px',
+  [vars$c.removeButtonWidth]: '60px',
 };
 
 var mappingsField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: mappingsField,
   mappingsField: mappingsField,
-  vars: vars$9
+  vars: vars$c
 });
 
 var deleteIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEgMTZDMSAxNy4xIDEuOSAxOCAzIDE4SDExQzEyLjEgMTggMTMgMTcuMSAxMyAxNlY0SDFWMTZaTTMgNkgxMVYxNkgzVjZaTTEwLjUgMUw5LjUgMEg0LjVMMy41IDFIMFYzSDE0VjFIMTAuNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
 
 var editIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjAwMDIgMC45OTIxNDlDMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNSAxMC4wMDAyIDEuMDE2MTVMOC4yMjQxOSAzLjAwODE1SDIuOTkyMTlDMi40NjQxOSAzLjAwODE1IDIuMDA4MTkgMy40NDAxNSAyLjAwODE5IDMuOTkyMTVWMTIuMDA4MkMyLjAwODE5IDEyLjUzNjIgMi40NDAxOSAxMi45OTIyIDIuOTkyMTkgMTIuOTkyMkg1LjUzNjE5QzUuODQ4MTkgMTMuMDQwMiA2LjE2MDE5IDEzLjA0MDIgNi40NzIxOSAxMi45OTIySDExLjAwODJDMTEuNTM2MiAxMi45OTIyIDExLjk5MjIgMTIuNTYwMiAxMS45OTIyIDEyLjAwODJWNy43ODQxNkwxMy45MzYyIDUuNjI0MTVMMTQuMDA4MiA1LjY3MjE1VjExLjk4NDJDMTQuMDA4MiAxMy42NjQyIDEyLjY2NDIgMTUuMDA4MiAxMS4wMDgyIDE1LjAwODJIMy4wMTYxOUMxLjMzNjE5IDE1LjAwODIgLTAuMDA3ODEyNSAxMy42NjQyIC0wLjAwNzgxMjUgMTEuOTg0MlYzLjk5MjE1Qy0wLjAwNzgxMjUgMi4zMzYxNSAxLjMzNjE5IDAuOTkyMTQ5IDMuMDE2MTkgMC45OTIxNDlIMTAuMDAwMlpNMTEuMjcyMiAyLjYyNDE1TDEyLjYxNjIgNC4xMTIxNUw3LjcyMDE5IDkuNjgwMTZDNy41MDQxOSA5LjkyMDE2IDYuODMyMTkgMTAuMjMyMiA1LjY4MDE5IDEwLjYxNjJDNS42NTYxOSAxMC42NDAyIDUuNjA4MTkgMTAuNjQwMiA1LjU2MDE5IDEwLjYxNjJDNS40NjQxOSAxMC41OTIyIDUuMzkyMTkgMTAuNDcyMiA1LjQ0MDE5IDEwLjM3NjJDNS43NTIxOSA5LjI0ODE2IDYuMDQwMTkgOC41NTIxNiA2LjI1NjE5IDguMzEyMTZMMTEuMjcyMiAyLjYyNDE1Wk0xMS45MjAyIDEuODU2MTVMMTMuMjg4MiAwLjMyMDE0OUMxMy42NDgyIC0wLjA4Nzg1MTYgMTQuMjcyMiAtMC4xMTE4NTIgMTQuNjgwMiAwLjI3MjE0OUMxNS4wODgyIDAuNjMyMTQ5IDE1LjExMjIgMS4yODAxNSAxNC43NTIyIDEuNjg4MTVMMTMuMjY0MiAzLjM2ODE1TDExLjkyMDIgMS44NTYxNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
 
-const componentName$8 = getComponentName('user-attribute');
+const componentName$b = getComponentName('user-attribute');
 class RawUserAttribute extends createBaseClass({
-  componentName: componentName$8,
+  componentName: componentName$b,
   baseSelector: ':host > .root',
 }) {
   constructor() {
@@ -12026,32 +12032,32 @@ const UserAttributeClass = compose(
   componentNameValidationMixin
 )(RawUserAttribute);
 
-const globalRefs$5 = getThemeRefs(globals);
-const vars$8 = UserAttributeClass.cssVarList;
+const globalRefs$8 = getThemeRefs(globals);
+const vars$b = UserAttributeClass.cssVarList;
 
 const userAttribute = {
-  [vars$8.hostDirection]: globalRefs$5.direction,
-  [vars$8.labelTextWidth]: '150px',
-  [vars$8.valueTextWidth]: '200px',
-  [vars$8.badgeMaxWidth]: '85px',
-  [vars$8.itemsGap]: '16px',
-  [vars$8.hostMinWidth]: '530px',
+  [vars$b.hostDirection]: globalRefs$8.direction,
+  [vars$b.labelTextWidth]: '150px',
+  [vars$b.valueTextWidth]: '200px',
+  [vars$b.badgeMaxWidth]: '85px',
+  [vars$b.itemsGap]: '16px',
+  [vars$b.hostMinWidth]: '530px',
   _fullWidth: {
-    [vars$8.hostWidth]: '100%',
+    [vars$b.hostWidth]: '100%',
   },
 };
 
 var userAttribute$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: userAttribute,
-  vars: vars$8
+  vars: vars$b
 });
 
 var greenVIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4KPC9zdmc+Cg==";
 
-const componentName$7 = getComponentName('user-auth-method');
+const componentName$a = getComponentName('user-auth-method');
 class RawUserAuthMethod extends createBaseClass({
-  componentName: componentName$7,
+  componentName: componentName$a,
   baseSelector: ':host > .root',
 }) {
   constructor() {
@@ -12243,33 +12249,33 @@ const UserAuthMethodClass = compose(
   componentNameValidationMixin
 )(RawUserAuthMethod);
 
-const globalRefs$4 = getThemeRefs(globals);
-const vars$7 = UserAuthMethodClass.cssVarList;
+const globalRefs$7 = getThemeRefs(globals);
+const vars$a = UserAuthMethodClass.cssVarList;
 
 const userAuthMethod = {
-  [vars$7.hostDirection]: globalRefs$4.direction,
-  [vars$7.labelTextWidth]: '200px',
-  [vars$7.itemsGap]: '16px',
-  [vars$7.hostMinWidth]: '530px',
-  [vars$7.iconSize]: '24px',
+  [vars$a.hostDirection]: globalRefs$7.direction,
+  [vars$a.labelTextWidth]: '200px',
+  [vars$a.itemsGap]: '16px',
+  [vars$a.hostMinWidth]: '530px',
+  [vars$a.iconSize]: '24px',
   _fullWidth: {
-    [vars$7.hostWidth]: '100%',
+    [vars$a.hostWidth]: '100%',
   },
 };
 
 var userAuthMethod$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: userAuthMethod,
-  vars: vars$7
+  vars: vars$a
 });
 
-const componentName$6 = getComponentName('saml-group-mappings-internal');
+const componentName$9 = getComponentName('saml-group-mappings-internal');
 
-createBaseInputClass({ componentName: componentName$6, baseSelector: '' });
+createBaseInputClass({ componentName: componentName$9, baseSelector: '' });
 
-const componentName$5 = getComponentName('saml-group-mappings');
+const componentName$8 = getComponentName('saml-group-mappings');
 
-const customMixin$1 = (superclass) =>
+const customMixin$3 = (superclass) =>
   class SamlGroupMappingsMixinClass extends superclass {
     init() {
       super.init?.();
@@ -12277,14 +12283,14 @@ const customMixin$1 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$6}
+      <${componentName$9}
         tabindex="-1"
-      ></${componentName$6}>
+      ></${componentName$9}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$6);
+      this.inputElement = this.shadowRoot.querySelector(componentName$9);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
@@ -12326,7 +12332,7 @@ const SamlGroupMappingsClass = compose(
     proxyParentValidation: true,
   }),
   componentNameValidationMixin,
-  customMixin$1
+  customMixin$3
 )(
   createProxy({
     slots: [],
@@ -12361,61 +12367,61 @@ const SamlGroupMappingsClass = compose(
       'options',
       'error-message',
     ],
-    componentName: componentName$5,
+    componentName: componentName$8,
   })
 );
 
-const vars$6 = SamlGroupMappingsClass.cssVarList;
+const vars$9 = SamlGroupMappingsClass.cssVarList;
 
 const samlGroupMappings = {
-  [vars$6.hostWidth]: refs.width,
-  [vars$6.hostDirection]: refs.direction,
-  [vars$6.groupNameInputMarginBottom]: '1em',
+  [vars$9.hostWidth]: refs.width,
+  [vars$9.hostDirection]: refs.direction,
+  [vars$9.groupNameInputMarginBottom]: '1em',
 };
 
 var samlGroupMappings$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: samlGroupMappings,
   samlGroupMappings: samlGroupMappings,
-  vars: vars$6
+  vars: vars$9
 });
 
-const globalRefs$3 = getThemeRefs(globals);
-const vars$5 = PolicyValidationClass.cssVarList;
+const globalRefs$6 = getThemeRefs(globals);
+const vars$8 = PolicyValidationClass.cssVarList;
 
 const policyValidation = {
-  [vars$5.fontFamily]: refs.fontFamily,
-  [vars$5.fontSize]: refs.labelFontSize,
-  [vars$5.textColor]: refs.labelTextColor,
-  [vars$5.borderWidth]: refs.borderWidth,
-  [vars$5.borderStyle]: refs.borderStyle,
-  [vars$5.borderColor]: refs.borderColor,
-  [vars$5.borderRadius]: globalRefs$3.radius.sm,
-  [vars$5.backgroundColor]: 'none',
-  [vars$5.padding]: '0px',
-  [vars$5.labelMargin]: globalRefs$3.spacing.sm,
-  [vars$5.itemsSpacing]: globalRefs$3.spacing.lg,
-  [vars$5.itemSymbolDefault]: "'\\2022'", // "•"
-  [vars$5.itemSymbolSuccess]: "'\\2713'", // "✓"
-  [vars$5.itemSymbolError]: "'\\2A09'", // "⨉"
-  [vars$5.itemSymbolSuccessColor]: globalRefs$3.colors.success.main,
-  [vars$5.itemSymbolErrorColor]: globalRefs$3.colors.error.main,
+  [vars$8.fontFamily]: refs.fontFamily,
+  [vars$8.fontSize]: refs.labelFontSize,
+  [vars$8.textColor]: refs.labelTextColor,
+  [vars$8.borderWidth]: refs.borderWidth,
+  [vars$8.borderStyle]: refs.borderStyle,
+  [vars$8.borderColor]: refs.borderColor,
+  [vars$8.borderRadius]: globalRefs$6.radius.sm,
+  [vars$8.backgroundColor]: 'none',
+  [vars$8.padding]: '0px',
+  [vars$8.labelMargin]: globalRefs$6.spacing.sm,
+  [vars$8.itemsSpacing]: globalRefs$6.spacing.lg,
+  [vars$8.itemSymbolDefault]: "'\\2022'", // "•"
+  [vars$8.itemSymbolSuccess]: "'\\2713'", // "✓"
+  [vars$8.itemSymbolError]: "'\\2A09'", // "⨉"
+  [vars$8.itemSymbolSuccessColor]: globalRefs$6.colors.success.main,
+  [vars$8.itemSymbolErrorColor]: globalRefs$6.colors.error.main,
 };
 
 var policyValidation$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: policyValidation,
-  vars: vars$5
+  vars: vars$8
 });
 
-const vars$4 = IconClass.cssVarList;
+const vars$7 = IconClass.cssVarList;
 
 const icon = {};
 
 var icon$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: icon,
-  vars: vars$4
+  vars: vars$7
 });
 
 const decode = (input) => {
@@ -12428,9 +12434,9 @@ const tpl = (input, inline) => {
   return inline ? input : `<pre>${input}</pre>`;
 };
 
-const componentName$4 = getComponentName('code-snippet');
+const componentName$7 = getComponentName('code-snippet');
 
-let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$4, baseSelector: ':host > code' }) {
+let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$7, baseSelector: ':host > code' }) {
   static get observedAttributes() {
     return ['lang', 'inline'];
   }
@@ -12660,9 +12666,9 @@ const CodeSnippetClass = compose(
   componentNameValidationMixin
 )(CodeSnippet$1);
 
-const globalRefs$2 = getThemeRefs(globals);
+const globalRefs$5 = getThemeRefs(globals);
 
-const vars$3 = CodeSnippetClass.cssVarList;
+const vars$6 = CodeSnippetClass.cssVarList;
 
 const light = {
   color1: '#fa0',
@@ -12697,50 +12703,50 @@ const dark = {
 };
 
 const CodeSnippet = {
-  [vars$3.rootBgColor]: globalRefs$2.colors.surface.main,
-  [vars$3.rootTextColor]: globalRefs$2.colors.surface.contrast,
-  [vars$3.docTagTextColor]: light.color2,
-  [vars$3.keywordTextColor]: light.color2,
-  [vars$3.metaKeywordTextColor]: light.color2,
-  [vars$3.templateTagTextColor]: light.color2,
-  [vars$3.templateVariableTextColor]: light.color2,
-  [vars$3.typeTextColor]: light.color2,
-  [vars$3.variableLanguageTextColor]: light.color2,
-  [vars$3.titleTextColor]: light.color3,
-  [vars$3.titleClassTextColor]: light.color3,
-  [vars$3.titleClassInheritedTextColor]: light.color3,
-  [vars$3.titleFunctionTextColor]: light.color3,
-  [vars$3.attrTextColor]: light.color4,
-  [vars$3.attributeTextColor]: light.color4,
-  [vars$3.literalTextColor]: light.color4,
-  [vars$3.metaTextColor]: light.color4,
-  [vars$3.numberTextColor]: light.color4,
-  [vars$3.operatorTextColor]: light.color4,
-  [vars$3.variableTextColor]: light.color4,
-  [vars$3.selectorAttrTextColor]: light.color4,
-  [vars$3.selectorClassTextColor]: light.color4,
-  [vars$3.selectorIdTextColor]: light.color4,
-  [vars$3.regexpTextColor]: light.color13,
-  [vars$3.stringTextColor]: light.color13,
-  [vars$3.metaStringTextColor]: light.color13,
-  [vars$3.builtInTextColor]: light.color5,
-  [vars$3.symbolTextColor]: light.color5,
-  [vars$3.commentTextColor]: light.color6,
-  [vars$3.codeTextColor]: light.color6,
-  [vars$3.formulaTextColor]: light.color6,
-  [vars$3.nameTextColor]: light.color7,
-  [vars$3.quoteTextColor]: light.color7,
-  [vars$3.selectorTagTextColor]: light.color7,
-  [vars$3.selectorPseudoTextColor]: light.color7,
-  [vars$3.substTextColor]: light.color8,
-  [vars$3.sectionTextColor]: light.color4,
-  [vars$3.bulletTextColor]: light.color9,
-  [vars$3.emphasisTextColor]: light.color8,
-  [vars$3.strongTextColor]: light.color8,
-  [vars$3.additionTextColor]: light.color7,
-  [vars$3.additionBgColor]: light.color10,
-  [vars$3.deletionTextColor]: light.color2,
-  [vars$3.deletionBgColor]: light.color10,
+  [vars$6.rootBgColor]: globalRefs$5.colors.surface.main,
+  [vars$6.rootTextColor]: globalRefs$5.colors.surface.contrast,
+  [vars$6.docTagTextColor]: light.color2,
+  [vars$6.keywordTextColor]: light.color2,
+  [vars$6.metaKeywordTextColor]: light.color2,
+  [vars$6.templateTagTextColor]: light.color2,
+  [vars$6.templateVariableTextColor]: light.color2,
+  [vars$6.typeTextColor]: light.color2,
+  [vars$6.variableLanguageTextColor]: light.color2,
+  [vars$6.titleTextColor]: light.color3,
+  [vars$6.titleClassTextColor]: light.color3,
+  [vars$6.titleClassInheritedTextColor]: light.color3,
+  [vars$6.titleFunctionTextColor]: light.color3,
+  [vars$6.attrTextColor]: light.color4,
+  [vars$6.attributeTextColor]: light.color4,
+  [vars$6.literalTextColor]: light.color4,
+  [vars$6.metaTextColor]: light.color4,
+  [vars$6.numberTextColor]: light.color4,
+  [vars$6.operatorTextColor]: light.color4,
+  [vars$6.variableTextColor]: light.color4,
+  [vars$6.selectorAttrTextColor]: light.color4,
+  [vars$6.selectorClassTextColor]: light.color4,
+  [vars$6.selectorIdTextColor]: light.color4,
+  [vars$6.regexpTextColor]: light.color13,
+  [vars$6.stringTextColor]: light.color13,
+  [vars$6.metaStringTextColor]: light.color13,
+  [vars$6.builtInTextColor]: light.color5,
+  [vars$6.symbolTextColor]: light.color5,
+  [vars$6.commentTextColor]: light.color6,
+  [vars$6.codeTextColor]: light.color6,
+  [vars$6.formulaTextColor]: light.color6,
+  [vars$6.nameTextColor]: light.color7,
+  [vars$6.quoteTextColor]: light.color7,
+  [vars$6.selectorTagTextColor]: light.color7,
+  [vars$6.selectorPseudoTextColor]: light.color7,
+  [vars$6.substTextColor]: light.color8,
+  [vars$6.sectionTextColor]: light.color4,
+  [vars$6.bulletTextColor]: light.color9,
+  [vars$6.emphasisTextColor]: light.color8,
+  [vars$6.strongTextColor]: light.color8,
+  [vars$6.additionTextColor]: light.color7,
+  [vars$6.additionBgColor]: light.color10,
+  [vars$6.deletionTextColor]: light.color2,
+  [vars$6.deletionBgColor]: light.color10,
   /* purposely ignored */
   // [vars.charEscapeTextColor]: '',
   // [vars.linkTextColor]: '',
@@ -12752,50 +12758,50 @@ const CodeSnippet = {
 
 const codeSnippetDarkThemeOverrides = {
   codeSnippet: {
-    [vars$3.rootBgColor]: globalRefs$2.colors.surface.main,
-    [vars$3.rootTextColor]: globalRefs$2.colors.surface.contrast,
-    [vars$3.docTagTextColor]: dark.color2,
-    [vars$3.keywordTextColor]: dark.color2,
-    [vars$3.metaKeywordTextColor]: dark.color2,
-    [vars$3.templateTagTextColor]: dark.color2,
-    [vars$3.templateVariableTextColor]: dark.color2,
-    [vars$3.typeTextColor]: dark.color2,
-    [vars$3.variableLanguageTextColor]: dark.color2,
-    [vars$3.titleTextColor]: dark.color3,
-    [vars$3.titleClassTextColor]: dark.color3,
-    [vars$3.titleClassInheritedTextColor]: dark.color3,
-    [vars$3.titleFunctionTextColor]: dark.color3,
-    [vars$3.attrTextColor]: dark.color4,
-    [vars$3.attributeTextColor]: dark.color4,
-    [vars$3.literalTextColor]: dark.color4,
-    [vars$3.metaTextColor]: dark.color4,
-    [vars$3.numberTextColor]: dark.color4,
-    [vars$3.operatorTextColor]: dark.color4,
-    [vars$3.variableTextColor]: dark.color4,
-    [vars$3.selectorAttrTextColor]: dark.color4,
-    [vars$3.selectorClassTextColor]: dark.color4,
-    [vars$3.selectorIdTextColor]: dark.color4,
-    [vars$3.regexpTextColor]: dark.color13,
-    [vars$3.stringTextColor]: dark.color13,
-    [vars$3.metaStringTextColor]: dark.color13,
-    [vars$3.builtInTextColor]: dark.color5,
-    [vars$3.symbolTextColor]: dark.color5,
-    [vars$3.commentTextColor]: dark.color6,
-    [vars$3.codeTextColor]: dark.color6,
-    [vars$3.formulaTextColor]: dark.color6,
-    [vars$3.nameTextColor]: dark.color7,
-    [vars$3.quoteTextColor]: dark.color7,
-    [vars$3.selectorTagTextColor]: dark.color7,
-    [vars$3.selectorPseudoTextColor]: dark.color7,
-    [vars$3.substTextColor]: dark.color8,
-    [vars$3.sectionTextColor]: dark.color4,
-    [vars$3.bulletTextColor]: dark.color9,
-    [vars$3.emphasisTextColor]: dark.color8,
-    [vars$3.strongTextColor]: dark.color8,
-    [vars$3.additionTextColor]: dark.color7,
-    [vars$3.additionBgColor]: dark.color10,
-    [vars$3.deletionTextColor]: dark.color2,
-    [vars$3.deletionBgColor]: dark.color10,
+    [vars$6.rootBgColor]: globalRefs$5.colors.surface.main,
+    [vars$6.rootTextColor]: globalRefs$5.colors.surface.contrast,
+    [vars$6.docTagTextColor]: dark.color2,
+    [vars$6.keywordTextColor]: dark.color2,
+    [vars$6.metaKeywordTextColor]: dark.color2,
+    [vars$6.templateTagTextColor]: dark.color2,
+    [vars$6.templateVariableTextColor]: dark.color2,
+    [vars$6.typeTextColor]: dark.color2,
+    [vars$6.variableLanguageTextColor]: dark.color2,
+    [vars$6.titleTextColor]: dark.color3,
+    [vars$6.titleClassTextColor]: dark.color3,
+    [vars$6.titleClassInheritedTextColor]: dark.color3,
+    [vars$6.titleFunctionTextColor]: dark.color3,
+    [vars$6.attrTextColor]: dark.color4,
+    [vars$6.attributeTextColor]: dark.color4,
+    [vars$6.literalTextColor]: dark.color4,
+    [vars$6.metaTextColor]: dark.color4,
+    [vars$6.numberTextColor]: dark.color4,
+    [vars$6.operatorTextColor]: dark.color4,
+    [vars$6.variableTextColor]: dark.color4,
+    [vars$6.selectorAttrTextColor]: dark.color4,
+    [vars$6.selectorClassTextColor]: dark.color4,
+    [vars$6.selectorIdTextColor]: dark.color4,
+    [vars$6.regexpTextColor]: dark.color13,
+    [vars$6.stringTextColor]: dark.color13,
+    [vars$6.metaStringTextColor]: dark.color13,
+    [vars$6.builtInTextColor]: dark.color5,
+    [vars$6.symbolTextColor]: dark.color5,
+    [vars$6.commentTextColor]: dark.color6,
+    [vars$6.codeTextColor]: dark.color6,
+    [vars$6.formulaTextColor]: dark.color6,
+    [vars$6.nameTextColor]: dark.color7,
+    [vars$6.quoteTextColor]: dark.color7,
+    [vars$6.selectorTagTextColor]: dark.color7,
+    [vars$6.selectorPseudoTextColor]: dark.color7,
+    [vars$6.substTextColor]: dark.color8,
+    [vars$6.sectionTextColor]: dark.color4,
+    [vars$6.bulletTextColor]: dark.color9,
+    [vars$6.emphasisTextColor]: dark.color8,
+    [vars$6.strongTextColor]: dark.color8,
+    [vars$6.additionTextColor]: dark.color7,
+    [vars$6.additionBgColor]: dark.color10,
+    [vars$6.deletionTextColor]: dark.color2,
+    [vars$6.deletionBgColor]: dark.color10,
   },
 };
 
@@ -12803,12 +12809,12 @@ var codeSnippet = /*#__PURE__*/Object.freeze({
   __proto__: null,
   codeSnippetDarkThemeOverrides: codeSnippetDarkThemeOverrides,
   default: CodeSnippet,
-  vars: vars$3
+  vars: vars$6
 });
 
-const componentName$3 = getComponentName('radio-button');
+const componentName$6 = getComponentName('radio-button');
 
-const customMixin = (superclass) =>
+const customMixin$2 = (superclass) =>
   class CustomMixin extends superclass {
     constructor() {
       super();
@@ -12864,18 +12870,18 @@ const RadioButtonClass = compose(
   }),
   composedProxyInputMixin({ proxyProps: ['setSelectionRange'] }),
   componentNameValidationMixin,
-  customMixin
+  customMixin$2
 )(
   createProxy({
     slots: [''],
     wrappedEleName: 'vaadin-radio-button',
     excludeAttrsSync: ['tabindex', 'data'],
     includeForwardProps: ['checked', 'name', 'disabled'],
-    componentName: componentName$3,
+    componentName: componentName$6,
   })
 );
 
-const componentName$2 = getComponentName('radio-group');
+const componentName$5 = getComponentName('radio-group');
 
 const RadioGroupMixin = (superclass) =>
   class RadioGroupMixinClass extends superclass {
@@ -12890,12 +12896,12 @@ const RadioGroupMixin = (superclass) =>
 
       // we are overriding vaadin children getter so it will run on our custom elements
       Object.defineProperty(this.baseElement, 'children', {
-        get: () => this.querySelectorAll(componentName$3),
+        get: () => this.querySelectorAll(componentName$6),
       });
 
       // we are overriding vaadin __filterRadioButtons so it will run on our custom elements
       this.baseElement.__filterRadioButtons = (nodes) => {
-        return nodes.filter((node) => node.localName === componentName$3);
+        return nodes.filter((node) => node.localName === componentName$6);
       };
 
       // vaadin radio group missing some input properties
@@ -13045,38 +13051,38 @@ const RadioGroupClass = compose(
     `,
 
     excludeAttrsSync: ['tabindex', 'size', 'data', 'direction'],
-    componentName: componentName$2,
+    componentName: componentName$5,
     includeForwardProps: ['value'],
   })
 );
 
-const vars$2 = RadioGroupClass.cssVarList;
-const globalRefs$1 = getThemeRefs(globals);
+const vars$5 = RadioGroupClass.cssVarList;
+const globalRefs$4 = getThemeRefs(globals);
 
 const radioGroup = {
-  [vars$2.buttonsRowGap]: '9px',
-  [vars$2.hostWidth]: refs.width,
-  [vars$2.hostDirection]: refs.direction,
-  [vars$2.fontSize]: refs.fontSize,
-  [vars$2.fontFamily]: refs.fontFamily,
-  [vars$2.labelTextColor]: refs.labelTextColor,
-  [vars$2.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$2.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$2.helperTextColor]: refs.helperTextColor,
-  [vars$2.itemsLabelColor]: globalRefs$1.colors.surface.contrast,
+  [vars$5.buttonsRowGap]: '9px',
+  [vars$5.hostWidth]: refs.width,
+  [vars$5.hostDirection]: refs.direction,
+  [vars$5.fontSize]: refs.fontSize,
+  [vars$5.fontFamily]: refs.fontFamily,
+  [vars$5.labelTextColor]: refs.labelTextColor,
+  [vars$5.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$5.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$5.helperTextColor]: refs.helperTextColor,
+  [vars$5.itemsLabelColor]: globalRefs$4.colors.surface.contrast,
 
   textAlign: {
-    right: { [vars$2.inputTextAlign]: 'right' },
-    left: { [vars$2.inputTextAlign]: 'left' },
-    center: { [vars$2.inputTextAlign]: 'center' },
+    right: { [vars$5.inputTextAlign]: 'right' },
+    left: { [vars$5.inputTextAlign]: 'left' },
+    center: { [vars$5.inputTextAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$2.buttonsSpacing]: 'space-between',
+    [vars$5.buttonsSpacing]: 'space-between',
   },
 
   _disabled: {
-    [vars$2.itemsLabelColor]: globalRefs$1.colors.surface.light,
+    [vars$5.itemsLabelColor]: globalRefs$4.colors.surface.light,
   },
 };
 
@@ -13084,24 +13090,24 @@ var radioGroup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: radioGroup,
   radioGroup: radioGroup,
-  vars: vars$2
+  vars: vars$5
 });
 
-const vars$1 = RadioButtonClass.cssVarList;
-const globalRefs = getThemeRefs(globals);
+const vars$4 = RadioButtonClass.cssVarList;
+const globalRefs$3 = getThemeRefs(globals);
 
 const radioButton = {
-  [vars$1.fontFamily]: refs.fontFamily,
-  [vars$1.radioSize]: 'calc(1em + 6px)',
-  [vars$1.radioMargin]: 'auto 4px',
-  [vars$1.radioCheckedSize]: `calc(var(${vars$1.radioSize})/5)`,
-  [vars$1.radioCheckedColor]: globalRefs.colors.surface.light,
-  [vars$1.radioBackgroundColor]: globalRefs.colors.surface.light,
-  [vars$1.radioBorderColor]: 'none',
-  [vars$1.radioBorderWidth]: 0,
+  [vars$4.fontFamily]: refs.fontFamily,
+  [vars$4.radioSize]: 'calc(1em + 6px)',
+  [vars$4.radioMargin]: 'auto 4px',
+  [vars$4.radioCheckedSize]: `calc(var(${vars$4.radioSize})/5)`,
+  [vars$4.radioCheckedColor]: globalRefs$3.colors.surface.light,
+  [vars$4.radioBackgroundColor]: globalRefs$3.colors.surface.light,
+  [vars$4.radioBorderColor]: 'none',
+  [vars$4.radioBorderWidth]: 0,
 
   _checked: {
-    [vars$1.radioBackgroundColor]: globalRefs.colors.surface.contrast,
+    [vars$4.radioBackgroundColor]: globalRefs$3.colors.surface.contrast,
   },
 
   _hover: {
@@ -13110,16 +13116,16 @@ const radioButton = {
 
   size: {
     xs: {
-      [vars$1.fontSize]: '12px',
+      [vars$4.fontSize]: '12px',
     },
     sm: {
-      [vars$1.fontSize]: '14px',
+      [vars$4.fontSize]: '14px',
     },
     md: {
-      [vars$1.fontSize]: '16px',
+      [vars$4.fontSize]: '16px',
     },
     lg: {
-      [vars$1.fontSize]: '18px',
+      [vars$4.fontSize]: '18px',
     },
   },
 };
@@ -13128,6 +13134,514 @@ var radioButton$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: radioButton,
   radioButton: radioButton,
+  vars: vars$4
+});
+
+const activeableMixin = (superclass) =>
+  class ActiveableMixinClass extends superclass {
+    init() {
+      super.init?.();
+
+      this.baseElement.addEventListener('mousedown', (e) => {
+        e.preventDefault();
+        this.setAttribute('active', 'true');
+        window.addEventListener('mouseup', () => this.removeAttribute('active'), {
+          once: true,
+        });
+      });
+    }
+  };
+
+const componentName$4 = getComponentName('list-item');
+
+const customMixin$1 = (superclass) =>
+  class ListItemMixinClass extends superclass {
+    constructor() {
+      super();
+
+      this.attachShadow({ mode: 'open' }).innerHTML = `
+      <style>
+        /*css*/
+        slot {
+            width: 100%;
+            display: flex;
+            overflow: hidden;
+            box-sizing: border-box;
+        }
+        :host {
+          display: block;
+        }
+
+        /*!css*/
+      </style>
+      <slot></slot>
+    `;
+    }
+  };
+
+const ListItemClass = compose(
+  createStyleMixin({
+    mappings: {
+      padding: {},
+      backgroundColor: {},
+      borderColor: {},
+      borderStyle: {},
+      borderWidth: {},
+      borderRadius: {},
+      outline: {},
+      cursor: {},
+      gap: {},
+      maxWidth: { selector: () => ':host' },
+      alignItems: {},
+      flexDirection: {},
+      transition: {},
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin,
+  customMixin$1,
+  activeableMixin
+)(createBaseClass({ componentName: componentName$4, baseSelector: 'slot' }));
+
+const componentName$3 = getComponentName('list');
+
+class RawList extends createBaseClass({ componentName: componentName$3, baseSelector: '.wrapper' }) {
+  static get observedAttributes() {
+    return ['variant'];
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+	    /*css*/
+      .wrapper {
+        overflow: auto;
+        display: grid;
+        max-height: 100%;
+        width: 100%;
+      }
+
+      :host {
+        display: inline-flex;
+        width: 100%;
+      }
+      slot[name="empty-state"] {
+        justify-content: center;
+        align-items: center;
+        display: flex;
+        flex-grow: 1;
+      }
+
+      :host slot[name="empty-state"] {
+        display: none;
+      }
+      :host([empty]) slot[name="empty-state"] {
+        display: flex;
+      }
+      ::slotted(:not([slot])) {
+        width: 100%;
+      }
+      /*!css*/
+		</style>
+
+    <div class="wrapper">
+    <slot></slot>
+    <slot name="empty-state">
+      No item...
+    </slot>
+    </div>
+	`;
+  }
+
+  get items() {
+    return this.shadowRoot.querySelector('slot').assignedElements();
+  }
+
+  #handleEmptyState() {
+    if (this.items.length === 0) {
+      this.setAttribute('empty', 'true');
+    } else {
+      this.removeAttribute('empty');
+    }
+  }
+
+  get variant() {
+    return this.getAttribute('variant') || 'list';
+  }
+
+  #handleItemsVariant() {
+    this.items.forEach((item) => {
+      let listItem = item;
+      if (listItem.localName !== ListItemClass.componentName) {
+        listItem = item.querySelector(ListItemClass.componentName);
+      }
+
+      const listItemVariant = this.variant === 'tiles' ? 'tile' : 'row';
+      listItem.setAttribute('variant', listItemVariant);
+    });
+  }
+
+  init() {
+    super.init?.();
+
+    // we want new items to get the size
+    observeChildren(this, () => {
+      this.#handleEmptyState();
+      this.#handleItemsVariant();
+    });
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback?.(name, oldValue, newValue);
+
+    if (newValue === oldValue) return;
+
+    if (name === 'variant') {
+      this.#handleItemsVariant();
+    }
+  }
+}
+
+const ListClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { selector: () => ':host', property: 'width' },
+      maxHeight: { selector: () => ':host' },
+      minHeight: {},
+      verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
+      horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
+      hostDirection: { selector: () => ':host', property: 'direction' },
+      fontFamily: {},
+      gap: {},
+
+      backgroundColor: {},
+      borderRadius: {},
+      borderColor: {},
+      borderStyle: {},
+      borderWidth: {},
+
+      boxShadow: {},
+      gridTemplateColumns: {},
+      maxItemsWidth: { selector: () => '::slotted(:not([slot]))', property: 'max-width' },
+      minItemsWidth: { selector: () => '::slotted(:not([slot]))', property: 'min-width' },
+      itemsHorizontalAlign: { selector: () => '::slotted(*)', property: 'justify-self' },
+      emptyStateTextColor: { selector: () => 'slot[name="empty-state"]', property: 'color' },
+      emptyStateTextFontFamily: {
+        selector: () => 'slot[name="empty-state"]',
+        property: 'font-family',
+      },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawList);
+
+const globalRefs$2 = getThemeRefs(globals);
+
+const compVars = ListClass.cssVarList;
+
+const [helperTheme, helperRefs, helperVars] = createHelperVars(
+  { shadowColor: '#00000020' },
+  componentName$3
+);
+
+const { shadowColor } = helperRefs;
+
+const list$1 = {
+  ...helperTheme,
+
+  [compVars.hostWidth]: '100%',
+  [compVars.backgroundColor]: globalRefs$2.colors.surface.main,
+  [compVars.fontFamily]: globalRefs$2.fonts.font1.family,
+  [compVars.borderColor]: globalRefs$2.colors.surface.light,
+  [compVars.borderStyle]: 'solid',
+  [compVars.borderWidth]: globalRefs$2.border.xs,
+  [compVars.borderRadius]: globalRefs$2.radius.sm,
+  [compVars.gap]: globalRefs$2.spacing.md,
+  [compVars.verticalPadding]: globalRefs$2.spacing.lg,
+  [compVars.horizontalPadding]: globalRefs$2.spacing.lg,
+  [compVars.boxShadow]: `${globalRefs$2.shadow.wide.sm} ${shadowColor}, ${globalRefs$2.shadow.narrow.sm} ${shadowColor}`,
+  [compVars.maxHeight]: '100%',
+  [compVars.hostDirection]: globalRefs$2.direction,
+  [compVars.minItemsWidth]: '150px',
+
+  _empty: {
+    [compVars.minHeight]: '150px',
+    [compVars.emptyStateTextColor]: globalRefs$2.colors.surface.dark,
+    [compVars.emptyStateTextFontFamily]: globalRefs$2.fonts.font1.family,
+  },
+
+  variant: {
+    tiles: {
+      [compVars.gridTemplateColumns]: `repeat(auto-fit, minmax(min(${useVar(
+        compVars.minItemsWidth
+      )}, 100%), 1fr))`,
+      [compVars.maxItemsWidth]: '200px',
+      [compVars.itemsHorizontalAlign]: 'center',
+    },
+  },
+};
+
+const vars$3 = {
+  ...compVars,
+  ...helperVars,
+};
+
+var list$2 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: list$1,
+  vars: vars$3
+});
+
+const globalRefs$1 = getThemeRefs(globals);
+
+const vars$2 = ListItemClass.cssVarList;
+
+const list = {
+  [vars$2.backgroundColor]: globalRefs$1.colors.surface.main,
+  [vars$2.padding]: globalRefs$1.spacing.lg,
+  [vars$2.gap]: globalRefs$1.spacing.md,
+  [vars$2.borderStyle]: 'solid',
+  [vars$2.borderWidth]: globalRefs$1.border.xs,
+  [vars$2.borderColor]: globalRefs$1.colors.surface.main,
+  [vars$2.borderRadius]: globalRefs$1.radius.sm,
+  [vars$2.cursor]: 'pointer',
+  [vars$2.alignItems]: 'center',
+  [vars$2.flexDirection]: 'row',
+  [vars$2.transition]: 'border-color 0.2s, background-color 0.2s',
+
+  variant: {
+    tile: {
+      [vars$2.alignItems]: 'flex-start',
+      [vars$2.flexDirection]: 'column',
+      [vars$2.borderColor]: globalRefs$1.colors.surface.light,
+    },
+  },
+
+  _hover: {
+    [vars$2.backgroundColor]: globalRefs$1.colors.surface.highlight,
+  },
+
+  _active: {
+    [vars$2.backgroundColor]: globalRefs$1.colors.surface.main,
+    [vars$2.borderColor]: globalRefs$1.colors.primary.light,
+    [vars$2.outline]: `1px solid ${globalRefs$1.colors.primary.light}`,
+  },
+};
+
+var listItem = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: list,
+  vars: vars$2
+});
+
+const defaultValidateSchema = () => true;
+const defaultItemRenderer = (item) => `<pre>${JSON.stringify(item, null, 4)}</pre>`;
+
+const createTemplate = (templateString) => {
+  const template = document.createElement('template');
+  template.innerHTML = templateString;
+
+  return template;
+};
+
+const getTemplateContent = (templateOrString) => {
+  if (typeof templateOrString === 'string') {
+    return createTemplate(templateOrString).content;
+  }
+
+  if (templateOrString instanceof HTMLTemplateElement) {
+    return templateOrString.content;
+  }
+
+  // eslint-disable-next-line no-console
+  console.error('Invalid template', templateOrString);
+  return null;
+};
+
+const createDynamicDataMixin =
+  ({
+    itemRenderer = defaultItemRenderer,
+    validateSchema = defaultValidateSchema,
+    slotName,
+    rerenderAttrsList = [],
+  }) =>
+  (superclass) =>
+    class DynamicDataMixinClass extends superclass {
+      #data = [];
+
+      // eslint-disable-next-line class-methods-use-this
+      #validateSchema(data) {
+        if (!validateSchema) return true;
+
+        const validation = validateSchema(data);
+        if (validation === true) return true;
+
+        // eslint-disable-next-line no-console
+        console.error('Data schema validation failed', validation || '');
+
+        return false;
+      }
+
+      #removeOldItems() {
+        const selector = slotName ? `*[slot="${slotName}"]` : ':not([slot])';
+        this.baseElement.querySelectorAll(selector).forEach((item) => item.remove());
+      }
+
+      #renderItems() {
+        this.#removeOldItems();
+        this.data.forEach((item, index) => {
+          const content = getTemplateContent(itemRenderer(item, index, this));
+          this.baseElement.appendChild(content?.cloneNode(true));
+        });
+      }
+
+      set data(value) {
+        if (this.#validateSchema(value)) {
+          this.#data = value;
+          this.#renderItems();
+        }
+      }
+
+      get data() {
+        return this.#data;
+      }
+
+      init() {
+        super.init?.();
+
+        if (rerenderAttrsList.length) {
+          observeAttributes(this, () => this.#renderItems(), { includeAttrs: rerenderAttrsList });
+        } else {
+          this.#renderItems();
+        }
+      }
+    };
+
+const componentName$2 = getComponentName('apps-list');
+
+const limitAbbreviation = (str, limit = 3) =>
+  str
+    .trim()
+    .split(' ')
+    .splice(0, limit)
+    .map((s) => s[0]?.toUpperCase())
+    .join('');
+
+const itemRenderer = ({ name, icon, url }, _, ref) => `
+  <a href="${url}" target="_blank" title="${url}">
+    <descope-list-item>
+    <descope-avatar
+      img="${icon}"
+      display-name="${name}"
+      abbr=${limitAbbreviation(name)}
+      size=${ref.size}
+    ></descope-avatar>
+    <descope-text
+      variant="body1"
+      mode="primary"
+    >${name}</descope-text>
+    </descope-list-item>
+  </a>
+`;
+
+const customMixin = (superclass) =>
+  class AppsListMixinClass extends superclass {
+    get size() {
+      return this.getAttribute('size') || 'sm';
+    }
+  };
+
+const AppsListClass = compose(
+  createStyleMixin({
+    mappings: {
+      maxHeight: { selector: () => ':host' },
+      minHeight: { selector: () => ':host' },
+      hostDirection: { selector: () => ':host', property: 'direction' },
+      itemsFontWeight: {
+        selector: TextClass.componentName,
+        property: TextClass.cssVarList.fontWeight,
+      },
+      itemsFontSize: {
+        selector: TextClass.componentName,
+        property: TextClass.cssVarList.fontSize,
+      },
+      itemsTextAlign: {
+        selector: TextClass.componentName,
+        property: TextClass.cssVarList.textAlign,
+      },
+    },
+  }),
+  createDynamicDataMixin({ itemRenderer, rerenderAttrsList: ['size'] }),
+  draggableMixin,
+  componentNameValidationMixin,
+  customMixin
+)(
+  createProxy({
+    slots: ['empty-state'],
+    wrappedEleName: 'descope-list',
+    excludeAttrsSync: ['tabindex', 'class'],
+    componentName: componentName$2,
+    style: () => `
+      :host {
+        width: 100%;
+        display: inline-flex;
+      }
+
+      descope-text::part(text-wrapper) {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      a {
+        text-decoration: none;
+      }
+
+      descope-text {
+        ${TextClass.cssVarList.hostDirection}: var(${AppsListClass.cssVarList.hostDirection});
+      }
+    `,
+  })
+);
+
+const vars$1 = AppsListClass.cssVarList;
+const globalRefs = getThemeRefs(globals);
+
+const defaultHeight = '400px';
+
+const appsList = {
+  [vars$1.itemsFontWeight]: 'normal',
+  [vars$1.itemsTextAlign]: 'start',
+  [vars$1.hostDirection]: globalRefs.direction,
+  [vars$1.maxHeight]: defaultHeight,
+
+  _empty: {
+    [vars$1.minHeight]: defaultHeight,
+  },
+
+  size: {
+    xs: {
+      [vars$1.itemsFontSize]: '14px',
+    },
+    sm: {
+      [vars$1.itemsFontSize]: '14px',
+    },
+    md: {
+      [vars$1.itemsFontSize]: '16px',
+    },
+    lg: {
+      [vars$1.itemsFontSize]: '20px',
+    },
+  },
+};
+
+var appsList$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: appsList,
   vars: vars$1
 });
 
@@ -13176,6 +13690,9 @@ const components = {
   codeSnippet,
   radioGroup: radioGroup$1,
   radioButton: radioButton$1,
+  list: list$2,
+  listItem,
+  appsList: appsList$1,
 };
 
 const theme = Object.keys(components).reduce(
@@ -13188,7 +13705,7 @@ const vars = Object.keys(components).reduce(
 );
 
 const defaultTheme = { globals, components: theme };
-const themeVars = { globals: vars$J, components: vars };
+const themeVars = { globals: vars$M, components: vars };
 
 const colors = {
   surface: {
@@ -13528,6 +14045,7 @@ const NotificationClass = compose(
   })
 );
 
+exports.AppsListClass = AppsListClass;
 exports.AvatarClass = AvatarClass;
 exports.BadgeClass = BadgeClass;
 exports.ButtonClass = ButtonClass;
@@ -13543,6 +14061,8 @@ exports.EnrichedTextClass = EnrichedTextClass;
 exports.GridClass = GridClass;
 exports.ImageClass = ImageClass;
 exports.LinkClass = LinkClass;
+exports.ListClass = ListClass;
+exports.ListItemClass = ListItemClass;
 exports.LoaderLinearClass = LoaderLinearClass;
 exports.LoaderRadialClass = LoaderRadialClass;
 exports.LogoClass = LogoClass;