@descope/web-components-ui 3.13.3 → 3.14.1

package/dist/cjs/index.cjs.js

@@ -339,7 +339,7 @@ const injectStyle = (cssString, ref, { prepend = false } = {}) => {
   let style;
 
   try {
-    // eslint-disable-next-line no-undef
+     
     style = new CSSStyleSheet();
   } catch {
     // fallback for browsers that don't support CSSStyleSheet
@@ -405,6 +405,21 @@ const limitAbbreviation = (str, limit = 2) =>
     .map((s) => s[0]?.toUpperCase())
     .join('');
 
+const cloneSlottedNodes = (element, slotName) => {
+  if (!element || !slotName) return null;
+  const sources = element.querySelectorAll(`:scope > [slot="${slotName}"]`);
+  if (!sources.length) return null;
+  const fragment = document.createDocumentFragment();
+  sources.forEach((source) => {
+    const clone = source.content
+      ? source.content.cloneNode(true)
+      : source.cloneNode(true);
+    if (clone.removeAttribute) clone.removeAttribute('slot');
+    fragment.append(clone);
+  });
+  return fragment;
+};
+
 class ComponentsThemeManager {
   static mountOnPropName = 'DescopeThemeManager';
 
@@ -1357,7 +1372,7 @@ const globals$1 = {
   fonts: fonts$1,
   direction: direction$1,
 };
-const vars$1a = getThemeVars(globals$1);
+const vars$1b = getThemeVars(globals$1);
 
 const direction = 'ltr';
 
@@ -3207,12 +3222,12 @@ const createImage = async (src, altText) => {
   }
 };
 
-const componentName$1p = getComponentName('image');
+const componentName$1q = getComponentName('image');
 
 const srcAttrs = ['src', 'src-dark'];
 
 class RawImage extends createBaseClass$1({
-  componentName: componentName$1p,
+  componentName: componentName$1q,
   baseSelector: 'slot',
 }) {
   static get observedAttributes() {
@@ -3340,7 +3355,7 @@ const ImageClass = compose(
   componentNameValidationMixin$1,
 )(RawImage);
 
-const componentName$1o = getComponentName('icon');
+const componentName$1p = getComponentName('icon');
 
 const IconClass = compose(
   createStyleMixin$1({
@@ -3365,7 +3380,7 @@ const IconClass = compose(
       }
       `,
     excludeAttrsSync: ['tabindex', 'class', 'style', 'st-height', 'st-width'],
-    componentName: componentName$1o,
+    componentName: componentName$1p,
   }),
 );
 
@@ -3380,7 +3395,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$1n = getComponentName('button');
+const componentName$1o = getComponentName('button');
 
 const resetStyles = `
 	:host {
@@ -3418,7 +3433,7 @@ const iconStyles = `
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 
-const { host: host$A, label: label$a, slottedIcon } = {
+const { host: host$B, label: label$a, slottedIcon } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
   slottedIcon: { selector: () => '::slotted(descope-icon)' },
@@ -3431,8 +3446,9 @@ const ButtonClass = compose(
   createStyleMixin$1({
     mappings: {
       hostWidth: { property: 'width' },
+      hostMaxWidth: { ...host$B, property: 'max-width' },
       hostHeight: { property: 'height' },
-      hostDirection: { ...host$A, property: 'direction' },
+      hostDirection: { ...host$B, property: 'direction' },
       fontSize: {},
       fontFamily: {},
       fontWeight: {},
@@ -3501,7 +3517,7 @@ const ButtonClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex', 'class', 'style'],
-    componentName: componentName$1n,
+    componentName: componentName$1o,
   }),
 );
 
@@ -3538,35 +3554,35 @@ loadingIndicatorStyles = `
 	}
 `;
 
-const globalRefs$I = getThemeRefs$1(globals);
+const globalRefs$J = getThemeRefs$1(globals);
 const compVars$9 = ButtonClass.cssVarList;
 
 const mode = {
-  primary: globalRefs$I.colors.primary,
-  secondary: globalRefs$I.colors.secondary,
-  success: globalRefs$I.colors.success,
-  error: globalRefs$I.colors.error,
-  surface: globalRefs$I.colors.surface,
+  primary: globalRefs$J.colors.primary,
+  secondary: globalRefs$J.colors.secondary,
+  success: globalRefs$J.colors.success,
+  error: globalRefs$J.colors.error,
+  surface: globalRefs$J.colors.surface,
 };
 
 const [helperTheme$7, helperRefs$7, helperVars$6] = createHelperVars$1(
   { mode },
-  componentName$1n,
+  componentName$1o,
 );
 
 const button = {
   ...helperTheme$7,
 
-  [compVars$9.fontFamily]: globalRefs$I.fonts.font1.family,
+  [compVars$9.fontFamily]: globalRefs$J.fonts.font1.family,
   [compVars$9.fontWeight]: '400',
 
   [compVars$9.cursor]: 'pointer',
   [compVars$9.hostHeight]: '3em',
   [compVars$9.hostWidth]: 'auto',
-  [compVars$9.hostDirection]: globalRefs$I.direction,
+  [compVars$9.hostDirection]: globalRefs$J.direction,
 
-  [compVars$9.borderRadius]: globalRefs$I.radius.sm,
-  [compVars$9.borderWidth]: globalRefs$I.border.xs,
+  [compVars$9.borderRadius]: globalRefs$J.radius.sm,
+  [compVars$9.borderWidth]: globalRefs$J.border.xs,
   [compVars$9.borderStyle]: 'solid',
   [compVars$9.borderColor]: 'transparent',
 
@@ -3612,11 +3628,11 @@ const button = {
   },
 
   _disabled: {
-    [helperVars$6.main]: globalRefs$I.colors.surface.light,
-    [helperVars$6.dark]: globalRefs$I.colors.surface.dark,
-    [helperVars$6.light]: globalRefs$I.colors.surface.light,
-    [helperVars$6.contrast]: globalRefs$I.colors.surface.main,
-    [compVars$9.iconColor]: globalRefs$I.colors.surface.main,
+    [helperVars$6.main]: globalRefs$J.colors.surface.light,
+    [helperVars$6.dark]: globalRefs$J.colors.surface.dark,
+    [helperVars$6.light]: globalRefs$J.colors.surface.light,
+    [helperVars$6.contrast]: globalRefs$J.colors.surface.main,
+    [compVars$9.iconColor]: globalRefs$J.colors.surface.main,
   },
 
   variant: {
@@ -3665,7 +3681,7 @@ const button = {
   },
 };
 
-const vars$19 = {
+const vars$1a = {
   ...compVars$9,
   ...helperVars$6,
 };
@@ -3673,13 +3689,13 @@ const vars$19 = {
 var button$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: button,
-  vars: vars$19
+  vars: vars$1a
 });
 
-const componentName$1m = getComponentName('text');
+const componentName$1n = getComponentName('text');
 
 class RawText extends createBaseClass$1({
-  componentName: componentName$1m,
+  componentName: componentName$1n,
   baseSelector: ':host > slot',
 }) {
   constructor() {
@@ -3718,15 +3734,15 @@ class RawText extends createBaseClass$1({
   }
 }
 
-const { host: host$z } = {
+const { host: host$A } = {
   host: { selector: () => ':host' },
 };
 
 const TextClass = compose(
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$z, property: 'width' },
-      hostDirection: { ...host$z, property: 'direction' },
+      hostWidth: { ...host$A, property: 'width' },
+      hostDirection: { ...host$A, property: 'direction' },
       fontSize: {},
       textColor: [{ property: 'color' }],
       textLineHeight: { property: 'line-height' },
@@ -3747,107 +3763,107 @@ const TextClass = compose(
   componentNameValidationMixin$1,
 )(RawText);
 
-const globalRefs$H = getThemeRefs$1(globals);
-const vars$18 = TextClass.cssVarList;
+const globalRefs$I = getThemeRefs$1(globals);
+const vars$19 = TextClass.cssVarList;
 
 const text$3 = {
-  [vars$18.hostDirection]: globalRefs$H.direction,
-  [vars$18.textLineHeight]: '1.35em',
-  [vars$18.textAlign]: 'start',
-  [vars$18.textColor]: globalRefs$H.colors.surface.dark,
+  [vars$19.hostDirection]: globalRefs$I.direction,
+  [vars$19.textLineHeight]: '1.35em',
+  [vars$19.textAlign]: 'start',
+  [vars$19.textColor]: globalRefs$I.colors.surface.dark,
 
   variant: {
     h1: {
-      [vars$18.fontSize]: globalRefs$H.typography.h1.size,
-      [vars$18.fontWeight]: globalRefs$H.typography.h1.weight,
-      [vars$18.fontFamily]: globalRefs$H.typography.h1.font,
+      [vars$19.fontSize]: globalRefs$I.typography.h1.size,
+      [vars$19.fontWeight]: globalRefs$I.typography.h1.weight,
+      [vars$19.fontFamily]: globalRefs$I.typography.h1.font,
     },
     h2: {
-      [vars$18.fontSize]: globalRefs$H.typography.h2.size,
-      [vars$18.fontWeight]: globalRefs$H.typography.h2.weight,
-      [vars$18.fontFamily]: globalRefs$H.typography.h2.font,
+      [vars$19.fontSize]: globalRefs$I.typography.h2.size,
+      [vars$19.fontWeight]: globalRefs$I.typography.h2.weight,
+      [vars$19.fontFamily]: globalRefs$I.typography.h2.font,
     },
     h3: {
-      [vars$18.fontSize]: globalRefs$H.typography.h3.size,
-      [vars$18.fontWeight]: globalRefs$H.typography.h3.weight,
-      [vars$18.fontFamily]: globalRefs$H.typography.h3.font,
+      [vars$19.fontSize]: globalRefs$I.typography.h3.size,
+      [vars$19.fontWeight]: globalRefs$I.typography.h3.weight,
+      [vars$19.fontFamily]: globalRefs$I.typography.h3.font,
     },
     subtitle1: {
-      [vars$18.fontSize]: globalRefs$H.typography.subtitle1.size,
-      [vars$18.fontWeight]: globalRefs$H.typography.subtitle1.weight,
-      [vars$18.fontFamily]: globalRefs$H.typography.subtitle1.font,
+      [vars$19.fontSize]: globalRefs$I.typography.subtitle1.size,
+      [vars$19.fontWeight]: globalRefs$I.typography.subtitle1.weight,
+      [vars$19.fontFamily]: globalRefs$I.typography.subtitle1.font,
     },
     subtitle2: {
-      [vars$18.fontSize]: globalRefs$H.typography.subtitle2.size,
-      [vars$18.fontWeight]: globalRefs$H.typography.subtitle2.weight,
-      [vars$18.fontFamily]: globalRefs$H.typography.subtitle2.font,
+      [vars$19.fontSize]: globalRefs$I.typography.subtitle2.size,
+      [vars$19.fontWeight]: globalRefs$I.typography.subtitle2.weight,
+      [vars$19.fontFamily]: globalRefs$I.typography.subtitle2.font,
     },
     body1: {
-      [vars$18.fontSize]: globalRefs$H.typography.body1.size,
-      [vars$18.fontWeight]: globalRefs$H.typography.body1.weight,
-      [vars$18.fontFamily]: globalRefs$H.typography.body1.font,
+      [vars$19.fontSize]: globalRefs$I.typography.body1.size,
+      [vars$19.fontWeight]: globalRefs$I.typography.body1.weight,
+      [vars$19.fontFamily]: globalRefs$I.typography.body1.font,
     },
     body2: {
-      [vars$18.fontSize]: globalRefs$H.typography.body2.size,
-      [vars$18.fontWeight]: globalRefs$H.typography.body2.weight,
-      [vars$18.fontFamily]: globalRefs$H.typography.body2.font,
+      [vars$19.fontSize]: globalRefs$I.typography.body2.size,
+      [vars$19.fontWeight]: globalRefs$I.typography.body2.weight,
+      [vars$19.fontFamily]: globalRefs$I.typography.body2.font,
     },
   },
 
   mode: {
     primary: {
-      [vars$18.textColor]: globalRefs$H.colors.surface.contrast,
+      [vars$19.textColor]: globalRefs$I.colors.surface.contrast,
     },
     secondary: {
-      [vars$18.textColor]: globalRefs$H.colors.surface.dark,
+      [vars$19.textColor]: globalRefs$I.colors.surface.dark,
     },
     error: {
-      [vars$18.textColor]: globalRefs$H.colors.error.main,
+      [vars$19.textColor]: globalRefs$I.colors.error.main,
     },
     'error-dark': {
-      [vars$18.textColor]: globalRefs$H.colors.error.dark,
+      [vars$19.textColor]: globalRefs$I.colors.error.dark,
     },
     success: {
-      [vars$18.textColor]: globalRefs$H.colors.success.main,
+      [vars$19.textColor]: globalRefs$I.colors.success.main,
     },
     'success-dark': {
-      [vars$18.textColor]: globalRefs$H.colors.success.dark,
+      [vars$19.textColor]: globalRefs$I.colors.success.dark,
     },
     warning: {
-      [vars$18.textColor]: globalRefs$H.colors.warning.main,
+      [vars$19.textColor]: globalRefs$I.colors.warning.main,
     },
     'warning-dark': {
-      [vars$18.textColor]: globalRefs$H.colors.warning.dark,
+      [vars$19.textColor]: globalRefs$I.colors.warning.dark,
     },
   },
 
   textAlign: {
-    right: { [vars$18.textAlign]: 'right' },
-    left: { [vars$18.textAlign]: 'left' },
-    center: { [vars$18.textAlign]: 'center' },
+    right: { [vars$19.textAlign]: 'right' },
+    left: { [vars$19.textAlign]: 'left' },
+    center: { [vars$19.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$18.hostWidth]: '100%',
+    [vars$19.hostWidth]: '100%',
   },
 
   _italic: {
-    [vars$18.fontStyle]: 'italic',
+    [vars$19.fontStyle]: 'italic',
   },
 
   _uppercase: {
-    [vars$18.textTransform]: 'uppercase',
+    [vars$19.textTransform]: 'uppercase',
   },
 
   _lowercase: {
-    [vars$18.textTransform]: 'lowercase',
+    [vars$19.textTransform]: 'lowercase',
   },
 };
 
 var text$4 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: text$3,
-  vars: vars$18
+  vars: vars$19
 });
 
 const disableRules = [
@@ -3871,10 +3887,10 @@ const decodeHTML = (html) => {
   return textArea.value;
 };
 
-const componentName$1l = getComponentName('enriched-text');
+const componentName$1m = getComponentName('enriched-text');
 
 class EnrichedText extends createBaseClass$1({
-  componentName: componentName$1l,
+  componentName: componentName$1m,
   baseSelector: ':host > div',
 }) {
   #origLinkRenderer;
@@ -4111,12 +4127,12 @@ const EnrichedTextClass = compose(
   componentNameValidationMixin$1,
 )(EnrichedText);
 
-const componentName$1k = getComponentName('link');
+const componentName$1l = getComponentName('link');
 
 const observedAttrs$8 = ['href', 'readonly'];
 
 class RawLink extends createBaseClass$1({
-  componentName: componentName$1k,
+  componentName: componentName$1l,
   baseSelector: ':host a',
 }) {
   static get observedAttributes() {
@@ -4191,12 +4207,12 @@ const selectors$3 = {
   text: { selector: () => TextClass.componentName },
 };
 
-const { anchor, text: text$2, host: host$y, wrapper: wrapper$1, link: link$3 } = selectors$3;
+const { anchor, text: text$2, host: host$z, wrapper: wrapper$1, link: link$3 } = selectors$3;
 
 const LinkClass = compose(
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$y, property: 'width' },
+      hostWidth: { ...host$z, property: 'width' },
       hostDirection: { ...text$2, property: 'direction' },
       textAlign: wrapper$1,
       textDecoration: {
@@ -4216,32 +4232,32 @@ const LinkClass = compose(
   componentNameValidationMixin$1,
 )(RawLink);
 
-const globalRefs$G = getThemeRefs$1(globals);
-const vars$17 = LinkClass.cssVarList;
+const globalRefs$H = getThemeRefs$1(globals);
+const vars$18 = LinkClass.cssVarList;
 
 const link$1 = {
-  [vars$17.hostDirection]: globalRefs$G.direction,
-  [vars$17.cursor]: 'pointer',
+  [vars$18.hostDirection]: globalRefs$H.direction,
+  [vars$18.cursor]: 'pointer',
 
-  [vars$17.textColor]: globalRefs$G.colors.primary.main,
+  [vars$18.textColor]: globalRefs$H.colors.primary.main,
 
   textAlign: {
-    right: { [vars$17.textAlign]: 'right' },
-    left: { [vars$17.textAlign]: 'left' },
-    center: { [vars$17.textAlign]: 'center' },
+    right: { [vars$18.textAlign]: 'right' },
+    left: { [vars$18.textAlign]: 'left' },
+    center: { [vars$18.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$17.hostWidth]: '100%',
+    [vars$18.hostWidth]: '100%',
   },
 
   _hover: {
-    [vars$17.textDecoration]: 'underline',
+    [vars$18.textDecoration]: 'underline',
   },
 
   mode: {
     secondary: {
-      [vars$17.textColor]: globalRefs$G.colors.secondary.main,
+      [vars$18.textColor]: globalRefs$H.colors.secondary.main,
     },
   },
 };
@@ -4249,37 +4265,37 @@ const link$1 = {
 var link$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: link$1,
-  vars: vars$17
+  vars: vars$18
 });
 
-const globalRefs$F = getThemeRefs$1(globals);
-const vars$16 = EnrichedTextClass.cssVarList;
+const globalRefs$G = getThemeRefs$1(globals);
+const vars$17 = EnrichedTextClass.cssVarList;
 
 const enrichedText = {
-  [vars$16.hostDirection]: globalRefs$F.direction,
-  [vars$16.hostWidth]: useVar$1(vars$18.hostWidth),
+  [vars$17.hostDirection]: globalRefs$G.direction,
+  [vars$17.hostWidth]: useVar$1(vars$19.hostWidth),
 
-  [vars$16.textLineHeight]: useVar$1(vars$18.textLineHeight),
-  [vars$16.textColor]: useVar$1(vars$18.textColor),
-  [vars$16.textAlign]: useVar$1(vars$18.textAlign),
+  [vars$17.textLineHeight]: useVar$1(vars$19.textLineHeight),
+  [vars$17.textColor]: useVar$1(vars$19.textColor),
+  [vars$17.textAlign]: useVar$1(vars$19.textAlign),
 
-  [vars$16.fontSize]: useVar$1(vars$18.fontSize),
-  [vars$16.fontWeight]: useVar$1(vars$18.fontWeight),
-  [vars$16.fontFamily]: useVar$1(vars$18.fontFamily),
+  [vars$17.fontSize]: useVar$1(vars$19.fontSize),
+  [vars$17.fontWeight]: useVar$1(vars$19.fontWeight),
+  [vars$17.fontFamily]: useVar$1(vars$19.fontFamily),
 
-  [vars$16.linkColor]: useVar$1(vars$17.textColor),
-  [vars$16.linkTextDecoration]: 'none',
-  [vars$16.linkHoverTextDecoration]: 'underline',
+  [vars$17.linkColor]: useVar$1(vars$18.textColor),
+  [vars$17.linkTextDecoration]: 'none',
+  [vars$17.linkHoverTextDecoration]: 'underline',
 
-  [vars$16.fontWeightBold]: '900',
-  [vars$16.minWidth]: '0.25em',
-  [vars$16.minHeight]: '1.35em',
+  [vars$17.fontWeightBold]: '900',
+  [vars$17.minWidth]: '0.25em',
+  [vars$17.minHeight]: '1.35em',
 
-  [vars$16.hostDisplay]: 'inline-block',
+  [vars$17.hostDisplay]: 'inline-block',
 
   _empty: {
     _hideWhenEmpty: {
-      [vars$16.hostDisplay]: 'none',
+      [vars$17.hostDisplay]: 'none',
     },
   },
 };
@@ -4287,10 +4303,10 @@ const enrichedText = {
 var enrichedText$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: enrichedText,
-  vars: vars$16
+  vars: vars$17
 });
 
-const componentName$1j = getComponentName('combo-box');
+const componentName$1k = getComponentName('combo-box');
 
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
@@ -4680,7 +4696,7 @@ const ComboBoxMixin = (superclass) =>
   };
 
 const {
-  host: host$x,
+  host: host$y,
   inputField: inputField$6,
   inputElement: inputElement$3,
   placeholder: placeholder$3,
@@ -4712,10 +4728,10 @@ const {
 const ComboBoxClass = compose(
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$x, property: 'width' },
-      hostDirection: { ...host$x, property: 'direction' },
+      hostWidth: { ...host$y, property: 'width' },
+      hostDirection: { ...host$y, property: 'direction' },
       // we apply font-size also on the host so we can set its width with em
-      fontSize: [{}, host$x],
+      fontSize: [{}, host$y],
       fontFamily: [label$9, placeholder$3, inputField$6, helperText$a, errorMessage$d],
       labelFontSize: { ...label$9, property: 'font-size' },
       labelFontWeight: { ...label$9, property: 'font-weight' },
@@ -4983,35 +4999,35 @@ const ComboBoxClass = compose(
     // and reset items to an empty array, and opening the list box with no items
     // to display.
     excludeAttrsSync: ['tabindex', 'size', 'data', 'loading', 'style'],
-    componentName: componentName$1j,
+    componentName: componentName$1k,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   }),
 );
 
-const componentName$1i = getComponentName('input-wrapper');
-const globalRefs$E = getThemeRefs$1(globals);
+const componentName$1j = getComponentName('input-wrapper');
+const globalRefs$F = getThemeRefs$1(globals);
 
 const [theme$2, refs$1] = createHelperVars$1(
   {
-    labelTextColor: globalRefs$E.colors.surface.dark,
+    labelTextColor: globalRefs$F.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
     inputValueFontWeight: '400',
     inputPlaceholderFontWeight: '400',
     helperTextFontWeight: '400',
     errorMessageFontWeight: '400',
-    valueTextColor: globalRefs$E.colors.surface.contrast,
-    placeholderTextColor: globalRefs$E.colors.surface.dark,
+    valueTextColor: globalRefs$F.colors.surface.contrast,
+    placeholderTextColor: globalRefs$F.colors.surface.dark,
     requiredIndicator: "'*'",
-    helperTextColor: globalRefs$E.colors.surface.dark,
-    errorMessageTextColor: globalRefs$E.colors.error.main,
-    successMessageTextColor: globalRefs$E.colors.success.main,
+    helperTextColor: globalRefs$F.colors.surface.dark,
+    errorMessageTextColor: globalRefs$F.colors.error.main,
+    successMessageTextColor: globalRefs$F.colors.success.main,
 
-    borderWidth: globalRefs$E.border.xs,
-    borderRadius: globalRefs$E.radius.xs,
+    borderWidth: globalRefs$F.border.xs,
+    borderRadius: globalRefs$F.radius.xs,
     borderColor: 'transparent',
 
-    outlineWidth: globalRefs$E.border.sm,
+    outlineWidth: globalRefs$F.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
@@ -5025,11 +5041,11 @@ const [theme$2, refs$1] = createHelperVars$1(
 
     textAlign: 'start',
 
-    backgroundColor: globalRefs$E.colors.surface.main,
+    backgroundColor: globalRefs$F.colors.surface.main,
 
-    fontFamily: globalRefs$E.fonts.font1.family,
+    fontFamily: globalRefs$F.fonts.font1.family,
 
-    direction: globalRefs$E.direction,
+    direction: globalRefs$F.direction,
 
     overlayOpacity: '0.3',
 
@@ -5090,135 +5106,135 @@ const [theme$2, refs$1] = createHelperVars$1(
     },
 
     _focused: {
-      outlineColor: globalRefs$E.colors.surface.light,
+      outlineColor: globalRefs$F.colors.surface.light,
       _invalid: {
-        outlineColor: globalRefs$E.colors.error.main,
+        outlineColor: globalRefs$F.colors.error.main,
       },
     },
 
     _bordered: {
-      outlineWidth: globalRefs$E.border.xs,
-      borderColor: globalRefs$E.colors.surface.light,
+      outlineWidth: globalRefs$F.border.xs,
+      borderColor: globalRefs$F.colors.surface.light,
       borderStyle: 'solid',
       _invalid: {
-        borderColor: globalRefs$E.colors.error.main,
+        borderColor: globalRefs$F.colors.error.main,
       },
     },
 
     _disabled: {
-      labelTextColor: globalRefs$E.colors.surface.light,
-      borderColor: globalRefs$E.colors.surface.light,
-      valueTextColor: globalRefs$E.colors.surface.light,
-      placeholderTextColor: globalRefs$E.colors.surface.light,
-      helperTextColor: globalRefs$E.colors.surface.light,
-      backgroundColor: globalRefs$E.colors.surface.main,
+      labelTextColor: globalRefs$F.colors.surface.light,
+      borderColor: globalRefs$F.colors.surface.light,
+      valueTextColor: globalRefs$F.colors.surface.light,
+      placeholderTextColor: globalRefs$F.colors.surface.light,
+      helperTextColor: globalRefs$F.colors.surface.light,
+      backgroundColor: globalRefs$F.colors.surface.main,
     },
 
     _obfuscated: {
       inputTextSecurity: 'disc',
     },
   },
-  componentName$1i,
+  componentName$1j,
 );
 
-const globalRefs$D = getThemeRefs$1(globals);
-const vars$15 = ComboBoxClass.cssVarList;
+const globalRefs$E = getThemeRefs$1(globals);
+const vars$16 = ComboBoxClass.cssVarList;
 
 const comboBox = {
-  [vars$15.hostWidth]: refs$1.width,
-  [vars$15.hostDirection]: refs$1.direction,
-  [vars$15.fontSize]: refs$1.fontSize,
-  [vars$15.fontFamily]: refs$1.fontFamily,
-  [vars$15.labelFontSize]: refs$1.labelFontSize,
-  [vars$15.labelFontWeight]: refs$1.labelFontWeight,
-  [vars$15.inputValueFontWeight]: refs$1.inputValueFontWeight,
-  [vars$15.inputPlaceholderFontWeight]: refs$1.inputPlaceholderFontWeight,
-  [vars$15.helperTextFontWeight]: refs$1.helperTextFontWeight,
-  [vars$15.errorMessageFontWeight]: refs$1.errorMessageFontWeight,
-  [vars$15.labelTextColor]: refs$1.labelTextColor,
-  [vars$15.errorMessageTextColor]: refs$1.errorMessageTextColor,
-  [vars$15.inputBorderColor]: refs$1.borderColor,
-  [vars$15.inputBorderWidth]: refs$1.borderWidth,
-  [vars$15.inputBorderStyle]: refs$1.borderStyle,
-  [vars$15.inputBorderRadius]: refs$1.borderRadius,
-  [vars$15.inputOutlineColor]: refs$1.outlineColor,
-  [vars$15.inputOutlineOffset]: refs$1.outlineOffset,
-  [vars$15.inputOutlineWidth]: refs$1.outlineWidth,
-  [vars$15.inputOutlineStyle]: refs$1.outlineStyle,
-  [vars$15.labelRequiredIndicator]: refs$1.requiredIndicator,
-  [vars$15.inputValueTextColor]: refs$1.valueTextColor,
-  [vars$15.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
-  [vars$15.inputBackgroundColor]: refs$1.backgroundColor,
-  [vars$15.inputHorizontalPadding]: refs$1.horizontalPadding,
-  [vars$15.inputHeight]: refs$1.inputHeight,
-  [vars$15.inputDropdownButtonColor]: globalRefs$D.colors.surface.dark,
-  [vars$15.inputDropdownButtonCursor]: 'pointer',
-  [vars$15.inputDropdownButtonSize]: refs$1.toggleButtonSize,
-  [vars$15.inputDropdownButtonOffset]: globalRefs$D.spacing.xs,
-  [vars$15.overlayItemPaddingInlineStart]: globalRefs$D.spacing.xs,
-  [vars$15.overlayItemPaddingInlineEnd]: globalRefs$D.spacing.lg,
-  [vars$15.labelPosition]: refs$1.labelPosition,
-  [vars$15.labelTopPosition]: refs$1.labelTopPosition,
-  [vars$15.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
-  [vars$15.inputTransformY]: refs$1.inputTransformY,
-  [vars$15.inputTransition]: refs$1.inputTransition,
-  [vars$15.marginInlineStart]: refs$1.marginInlineStart,
-  [vars$15.placeholderOpacity]: refs$1.placeholderOpacity,
-  [vars$15.inputVerticalAlignment]: refs$1.inputVerticalAlignment,
-  [vars$15.valueInputHeight]: refs$1.valueInputHeight,
-  [vars$15.valueInputMarginBottom]: refs$1.valueInputMarginBottom,
+  [vars$16.hostWidth]: refs$1.width,
+  [vars$16.hostDirection]: refs$1.direction,
+  [vars$16.fontSize]: refs$1.fontSize,
+  [vars$16.fontFamily]: refs$1.fontFamily,
+  [vars$16.labelFontSize]: refs$1.labelFontSize,
+  [vars$16.labelFontWeight]: refs$1.labelFontWeight,
+  [vars$16.inputValueFontWeight]: refs$1.inputValueFontWeight,
+  [vars$16.inputPlaceholderFontWeight]: refs$1.inputPlaceholderFontWeight,
+  [vars$16.helperTextFontWeight]: refs$1.helperTextFontWeight,
+  [vars$16.errorMessageFontWeight]: refs$1.errorMessageFontWeight,
+  [vars$16.labelTextColor]: refs$1.labelTextColor,
+  [vars$16.errorMessageTextColor]: refs$1.errorMessageTextColor,
+  [vars$16.inputBorderColor]: refs$1.borderColor,
+  [vars$16.inputBorderWidth]: refs$1.borderWidth,
+  [vars$16.inputBorderStyle]: refs$1.borderStyle,
+  [vars$16.inputBorderRadius]: refs$1.borderRadius,
+  [vars$16.inputOutlineColor]: refs$1.outlineColor,
+  [vars$16.inputOutlineOffset]: refs$1.outlineOffset,
+  [vars$16.inputOutlineWidth]: refs$1.outlineWidth,
+  [vars$16.inputOutlineStyle]: refs$1.outlineStyle,
+  [vars$16.labelRequiredIndicator]: refs$1.requiredIndicator,
+  [vars$16.inputValueTextColor]: refs$1.valueTextColor,
+  [vars$16.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
+  [vars$16.inputBackgroundColor]: refs$1.backgroundColor,
+  [vars$16.inputHorizontalPadding]: refs$1.horizontalPadding,
+  [vars$16.inputHeight]: refs$1.inputHeight,
+  [vars$16.inputDropdownButtonColor]: globalRefs$E.colors.surface.dark,
+  [vars$16.inputDropdownButtonCursor]: 'pointer',
+  [vars$16.inputDropdownButtonSize]: refs$1.toggleButtonSize,
+  [vars$16.inputDropdownButtonOffset]: globalRefs$E.spacing.xs,
+  [vars$16.overlayItemPaddingInlineStart]: globalRefs$E.spacing.xs,
+  [vars$16.overlayItemPaddingInlineEnd]: globalRefs$E.spacing.lg,
+  [vars$16.labelPosition]: refs$1.labelPosition,
+  [vars$16.labelTopPosition]: refs$1.labelTopPosition,
+  [vars$16.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
+  [vars$16.inputTransformY]: refs$1.inputTransformY,
+  [vars$16.inputTransition]: refs$1.inputTransition,
+  [vars$16.marginInlineStart]: refs$1.marginInlineStart,
+  [vars$16.placeholderOpacity]: refs$1.placeholderOpacity,
+  [vars$16.inputVerticalAlignment]: refs$1.inputVerticalAlignment,
+  [vars$16.valueInputHeight]: refs$1.valueInputHeight,
+  [vars$16.valueInputMarginBottom]: refs$1.valueInputMarginBottom,
 
   // error message icon
-  [vars$15.errorMessageIcon]: refs$1.errorMessageIcon,
-  [vars$15.errorMessageIconSize]: refs$1.errorMessageIconSize,
-  [vars$15.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
-  [vars$15.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
-  [vars$15.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
-  [vars$15.errorMessageFontSize]: refs$1.errorMessageFontSize,
+  [vars$16.errorMessageIcon]: refs$1.errorMessageIcon,
+  [vars$16.errorMessageIconSize]: refs$1.errorMessageIconSize,
+  [vars$16.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+  [vars$16.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+  [vars$16.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+  [vars$16.errorMessageFontSize]: refs$1.errorMessageFontSize,
 
   _readonly: {
-    [vars$15.inputDropdownButtonCursor]: 'default',
+    [vars$16.inputDropdownButtonCursor]: 'default',
   },
 
   // Overlay theme exposed via the component:
-  [vars$15.overlayFontSize]: refs$1.fontSize,
-  [vars$15.overlayFontFamily]: refs$1.fontFamily,
-  [vars$15.overlayCursor]: 'pointer',
-  [vars$15.overlayItemBoxShadow]: 'none',
-  [vars$15.overlayBackground]: refs$1.backgroundColor,
-  [vars$15.overlayTextColor]: refs$1.valueTextColor,
-  [vars$15.overlayCheckmarkDisplay]: 'initial',
-  [vars$15.overlaySelectedItemBackground]: 'initial',
-  [vars$15.overlaySelectedItemHoverBackground]:
-    globalRefs$D.colors.primary.highlight,
-  [vars$15.overlaySelectedItemFocusBackground]:
-    globalRefs$D.colors.primary.highlight,
-  [vars$15.overlayItemHoverBackground]: globalRefs$D.colors.primary.highlight,
-  [vars$15.overlayItemFocusBackground]: globalRefs$D.colors.primary.highlight,
+  [vars$16.overlayFontSize]: refs$1.fontSize,
+  [vars$16.overlayFontFamily]: refs$1.fontFamily,
+  [vars$16.overlayCursor]: 'pointer',
+  [vars$16.overlayItemBoxShadow]: 'none',
+  [vars$16.overlayBackground]: refs$1.backgroundColor,
+  [vars$16.overlayTextColor]: refs$1.valueTextColor,
+  [vars$16.overlayCheckmarkDisplay]: 'initial',
+  [vars$16.overlaySelectedItemBackground]: 'initial',
+  [vars$16.overlaySelectedItemHoverBackground]:
+    globalRefs$E.colors.primary.highlight,
+  [vars$16.overlaySelectedItemFocusBackground]:
+    globalRefs$E.colors.primary.highlight,
+  [vars$16.overlayItemHoverBackground]: globalRefs$E.colors.primary.highlight,
+  [vars$16.overlayItemFocusBackground]: globalRefs$E.colors.primary.highlight,
 
   // Overlay direct theme:
-  [vars$15.overlay.minHeight]: '400px',
-  [vars$15.overlay.margin]: '0',
+  [vars$16.overlay.minHeight]: '400px',
+  [vars$16.overlay.margin]: '0',
 
-  [vars$15.overlay.contentHeight]: '100%',
-  [vars$15.overlay.contentOpacity]: '1',
-  [vars$15.overlay.scrollerMinHeight]: '1px',
+  [vars$16.overlay.contentHeight]: '100%',
+  [vars$16.overlay.contentOpacity]: '1',
+  [vars$16.overlay.scrollerMinHeight]: '1px',
   _loading: {
-    [vars$15.overlay.loaderTop]: '50%',
-    [vars$15.overlay.loaderLeft]: '50%',
-    [vars$15.overlay.loaderRight]: 'auto',
+    [vars$16.overlay.loaderTop]: '50%',
+    [vars$16.overlay.loaderLeft]: '50%',
+    [vars$16.overlay.loaderRight]: 'auto',
     // Margin has to be negative to center the loader, "transform" can't be used because the animation uses it
     // Margin has to be half of the width/height of the loader to center it
-    [vars$15.overlay.loaderMargin]: '-15px 0 0 -15px',
-    [vars$15.overlay.loaderWidth]: '30px',
-    [vars$15.overlay.loaderHeight]: '30px',
-    [vars$15.overlay.loaderBorder]: '2px solid transparent',
-    [vars$15.overlay.loaderBorderColor]:
-      `${globalRefs$D.colors.primary.highlight} ${globalRefs$D.colors.primary.highlight} ${globalRefs$D.colors.primary.main} ${globalRefs$D.colors.primary.main}`,
-    [vars$15.overlay.loaderBorderRadius]: '50%',
-    [vars$15.overlay.contentHeight]: '100px',
-    [vars$15.overlay.scrollerMinHeight]: '100px',
-    [vars$15.overlay.contentOpacity]: '0',
+    [vars$16.overlay.loaderMargin]: '-15px 0 0 -15px',
+    [vars$16.overlay.loaderWidth]: '30px',
+    [vars$16.overlay.loaderHeight]: '30px',
+    [vars$16.overlay.loaderBorder]: '2px solid transparent',
+    [vars$16.overlay.loaderBorderColor]:
+      `${globalRefs$E.colors.primary.highlight} ${globalRefs$E.colors.primary.highlight} ${globalRefs$E.colors.primary.main} ${globalRefs$E.colors.primary.main}`,
+    [vars$16.overlay.loaderBorderRadius]: '50%',
+    [vars$16.overlay.contentHeight]: '100px',
+    [vars$16.overlay.scrollerMinHeight]: '100px',
+    [vars$16.overlay.contentOpacity]: '0',
   },
 };
 
@@ -5226,13 +5242,13 @@ var comboBox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   comboBox: comboBox,
   default: comboBox,
-  vars: vars$15
+  vars: vars$16
 });
 
-const componentName$1h = getComponentName('badge');
+const componentName$1i = getComponentName('badge');
 
 class RawBadge extends createBaseClass$1({
-  componentName: componentName$1h,
+  componentName: componentName$1i,
   baseSelector: ':host > div',
 }) {
   static get observedAttributes() {
@@ -5321,52 +5337,52 @@ const BadgeClass = compose(
   componentNameValidationMixin$1,
 )(RawBadge);
 
-const globalRefs$C = getThemeRefs$1(globals);
+const globalRefs$D = getThemeRefs$1(globals);
 
 const [helperTheme$6, helperRefs$6] = createHelperVars$1(
   {
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$1h,
+  componentName$1i,
 );
 
 const { shadowColor: shadowColor$7 } = helperRefs$6;
 
-const vars$14 = BadgeClass.cssVarList;
+const vars$15 = BadgeClass.cssVarList;
 
 const badge$2 = {
   ...helperTheme$6,
 
-  [vars$14.hostWidth]: 'fit-content',
-  [vars$14.hostDirection]: globalRefs$C.direction,
+  [vars$15.hostWidth]: 'fit-content',
+  [vars$15.hostDirection]: globalRefs$D.direction,
 
-  [vars$14.textAlign]: 'center',
+  [vars$15.textAlign]: 'center',
 
-  [vars$14.fontFamily]: globalRefs$C.fonts.font1.family,
-  [vars$14.fontWeight]: '400',
+  [vars$15.fontFamily]: globalRefs$D.fonts.font1.family,
+  [vars$15.fontWeight]: '400',
 
-  [vars$14.verticalPadding]: '0.25em',
-  [vars$14.horizontalPadding]: '0.5em',
+  [vars$15.verticalPadding]: '0.25em',
+  [vars$15.horizontalPadding]: '0.5em',
 
-  [vars$14.borderWidth]: globalRefs$C.border.xs,
-  [vars$14.borderRadius]: globalRefs$C.radius.xs,
-  [vars$14.borderColor]: 'transparent',
-  [vars$14.borderStyle]: 'solid',
+  [vars$15.borderWidth]: globalRefs$D.border.xs,
+  [vars$15.borderRadius]: globalRefs$D.radius.xs,
+  [vars$15.borderColor]: 'transparent',
+  [vars$15.borderStyle]: 'solid',
 
   _fullWidth: {
-    [vars$14.hostWidth]: '100%',
+    [vars$15.hostWidth]: '100%',
   },
 
   size: {
-    xs: { [vars$14.fontSize]: '12px' },
-    sm: { [vars$14.fontSize]: '14px' },
-    md: { [vars$14.fontSize]: '16px' },
-    lg: { [vars$14.fontSize]: '18px' },
+    xs: { [vars$15.fontSize]: '12px' },
+    sm: { [vars$15.fontSize]: '14px' },
+    md: { [vars$15.fontSize]: '16px' },
+    lg: { [vars$15.fontSize]: '18px' },
   },
 
   variant: {
     contained: {
-      [vars$14.backgroundColor]: globalRefs$C.colors.surface.main,
+      [vars$15.backgroundColor]: globalRefs$D.colors.surface.main,
     },
   },
 
@@ -5385,58 +5401,58 @@ const badge$2 = {
   // },
 
   _shrinkToIndicator: {
-    [vars$14.hostWidth]: '13px',
-    [vars$14.hostHeight]: '13px',
-    [vars$14.borderRadius]: '50%',
-    [vars$14.fontSize]: '0',
-    [vars$14.textIndent]: '-9999px',
+    [vars$15.hostWidth]: '13px',
+    [vars$15.hostHeight]: '13px',
+    [vars$15.borderRadius]: '50%',
+    [vars$15.fontSize]: '0',
+    [vars$15.textIndent]: '-9999px',
   },
 
   mode: {
     default: {
-      [vars$14.textColor]: globalRefs$C.colors.surface.dark,
+      [vars$15.textColor]: globalRefs$D.colors.surface.dark,
       _bordered: {
-        [vars$14.borderColor]: globalRefs$C.colors.surface.light,
+        [vars$15.borderColor]: globalRefs$D.colors.surface.light,
       },
     },
     primary: {
-      [vars$14.textColor]: globalRefs$C.colors.primary.main,
+      [vars$15.textColor]: globalRefs$D.colors.primary.main,
       _bordered: {
-        [vars$14.borderColor]: globalRefs$C.colors.primary.light,
+        [vars$15.borderColor]: globalRefs$D.colors.primary.light,
       },
     },
     secondary: {
-      [vars$14.textColor]: globalRefs$C.colors.secondary.main,
+      [vars$15.textColor]: globalRefs$D.colors.secondary.main,
       _bordered: {
-        [vars$14.borderColor]: globalRefs$C.colors.secondary.light,
+        [vars$15.borderColor]: globalRefs$D.colors.secondary.light,
       },
     },
     error: {
-      [vars$14.textColor]: globalRefs$C.colors.error.main,
+      [vars$15.textColor]: globalRefs$D.colors.error.main,
       _bordered: {
-        [vars$14.borderColor]: globalRefs$C.colors.error.light,
+        [vars$15.borderColor]: globalRefs$D.colors.error.light,
       },
     },
     success: {
-      [vars$14.textColor]: globalRefs$C.colors.success.main,
+      [vars$15.textColor]: globalRefs$D.colors.success.main,
       _bordered: {
-        [vars$14.borderColor]: globalRefs$C.colors.success.light,
+        [vars$15.borderColor]: globalRefs$D.colors.success.light,
       },
     },
   },
 
   shadow: {
     sm: {
-      [vars$14.boxShadow]: `${globalRefs$C.shadow.wide.sm} ${shadowColor$7}, ${globalRefs$C.shadow.narrow.sm} ${shadowColor$7}`,
+      [vars$15.boxShadow]: `${globalRefs$D.shadow.wide.sm} ${shadowColor$7}, ${globalRefs$D.shadow.narrow.sm} ${shadowColor$7}`,
     },
     md: {
-      [vars$14.boxShadow]: `${globalRefs$C.shadow.wide.md} ${shadowColor$7}, ${globalRefs$C.shadow.narrow.md} ${shadowColor$7}`,
+      [vars$15.boxShadow]: `${globalRefs$D.shadow.wide.md} ${shadowColor$7}, ${globalRefs$D.shadow.narrow.md} ${shadowColor$7}`,
     },
     lg: {
-      [vars$14.boxShadow]: `${globalRefs$C.shadow.wide.lg} ${shadowColor$7}, ${globalRefs$C.shadow.narrow.lg} ${shadowColor$7}`,
+      [vars$15.boxShadow]: `${globalRefs$D.shadow.wide.lg} ${shadowColor$7}, ${globalRefs$D.shadow.narrow.lg} ${shadowColor$7}`,
     },
     xl: {
-      [vars$14.boxShadow]: `${globalRefs$C.shadow.wide.xl} ${shadowColor$7}, ${globalRefs$C.shadow.narrow.xl} ${shadowColor$7}`,
+      [vars$15.boxShadow]: `${globalRefs$D.shadow.wide.xl} ${shadowColor$7}, ${globalRefs$D.shadow.narrow.xl} ${shadowColor$7}`,
     },
   },
 };
@@ -5444,12 +5460,12 @@ const badge$2 = {
 var badge$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: badge$2,
-  vars: vars$14
+  vars: vars$15
 });
 
-const componentName$1g = getComponentName('avatar');
+const componentName$1h = getComponentName('avatar');
 class RawAvatar extends createBaseClass$1({
-  componentName: componentName$1g,
+  componentName: componentName$1h,
   baseSelector: ':host > .wrapper',
 }) {
   constructor() {
@@ -5527,7 +5543,7 @@ class RawAvatar extends createBaseClass$1({
   }
 }
 
-const { host: host$w, editableBadge, avatar: avatar$2 } = {
+const { host: host$x, editableBadge, avatar: avatar$2 } = {
   host: { selector: () => ':host' },
   editableBadge: { selector: '> .editableBadge' },
   avatar: { selector: 'vaadin-avatar' },
@@ -5537,12 +5553,12 @@ const AvatarClass = compose(
   createStyleMixin$1({
     mappings: {
       hostWidth: [
-        { ...host$w, property: 'width' },
-        { ...host$w, property: 'min-width' },
+        { ...host$x, property: 'width' },
+        { ...host$x, property: 'min-width' },
       ],
-      hostHeight: { ...host$w, property: 'height' },
-      cursor: [avatar$2, host$w],
-      hostDirection: { ...host$w, property: 'direction' },
+      hostHeight: { ...host$x, property: 'height' },
+      cursor: [avatar$2, host$x],
+      hostDirection: { ...host$x, property: 'direction' },
       avatarTextColor: { ...avatar$2, property: 'color' },
       avatarBackgroundColor: { ...avatar$2, property: 'background-color' },
       editableIconColor: { ...editableBadge, property: 'color' },
@@ -5557,16 +5573,16 @@ const AvatarClass = compose(
   componentNameValidationMixin$1,
 )(RawAvatar);
 
-const globalRefs$B = getThemeRefs$1(globals);
+const globalRefs$C = getThemeRefs$1(globals);
 const compVars$8 = AvatarClass.cssVarList;
 
 const avatar = {
-  [compVars$8.hostDirection]: globalRefs$B.direction,
-  [compVars$8.editableIconColor]: globalRefs$B.colors.surface.dark,
-  [compVars$8.editableBorderColor]: globalRefs$B.colors.surface.dark,
-  [compVars$8.editableBackgroundColor]: globalRefs$B.colors.surface.main,
-  [compVars$8.avatarTextColor]: globalRefs$B.colors.surface.main,
-  [compVars$8.avatarBackgroundColor]: globalRefs$B.colors.surface.dark,
+  [compVars$8.hostDirection]: globalRefs$C.direction,
+  [compVars$8.editableIconColor]: globalRefs$C.colors.surface.dark,
+  [compVars$8.editableBorderColor]: globalRefs$C.colors.surface.dark,
+  [compVars$8.editableBackgroundColor]: globalRefs$C.colors.surface.main,
+  [compVars$8.avatarTextColor]: globalRefs$C.colors.surface.main,
+  [compVars$8.avatarBackgroundColor]: globalRefs$C.colors.surface.dark,
 
   _editable: {
     [compVars$8.cursor]: 'pointer',
@@ -5600,37 +5616,37 @@ const avatar = {
   },
 };
 
-const vars$13 = {
+const vars$14 = {
   ...compVars$8,
 };
 
 var avatar$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: avatar,
-  vars: vars$13
+  vars: vars$14
 });
 
-const vars$12 = IconClass.cssVarList;
+const vars$13 = IconClass.cssVarList;
 
 const icon$3 = {};
 
 var icon$4 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: icon$3,
-  vars: vars$12
+  vars: vars$13
 });
 
-const vars$11 = ImageClass.cssVarList;
+const vars$12 = ImageClass.cssVarList;
 
 const image = {};
 
 var image$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: image,
-  vars: vars$11
+  vars: vars$12
 });
 
-const componentName$1f = getComponentName('list-item');
+const componentName$1g = getComponentName('list-item');
 
 const customMixin$f = (superclass) =>
   class ListItemMixinClass extends superclass {
@@ -5687,12 +5703,12 @@ const ListItemClass = compose(
   componentNameValidationMixin$1,
   customMixin$f,
   activeableMixin,
-)(createBaseClass$1({ componentName: componentName$1f, baseSelector: 'slot' }));
+)(createBaseClass$1({ componentName: componentName$1g, baseSelector: 'slot' }));
 
-const componentName$1e = getComponentName('list');
+const componentName$1f = getComponentName('list');
 
 class RawList extends createBaseClass$1({
-  componentName: componentName$1e,
+  componentName: componentName$1f,
   baseSelector: '.wrapper',
 }) {
   static get observedAttributes() {
@@ -5863,9 +5879,9 @@ const ListClass = compose(
   componentNameValidationMixin$1,
 )(RawList);
 
-const componentName$1d = getComponentName('apps-list');
+const componentName$1e = getComponentName('apps-list');
 
-const itemRenderer$5 = ({ name, icon, url }, _, ref) => `
+const itemRenderer$6 = ({ name, icon, url }, _, ref) => `
   <a ${url ? `href="${url}" title="${url}"` : ''} ${ref.openInSameWindow ? '' : 'target="_blank"'}>
     <descope-list-item>
     <div class="avatar-wrapper">
@@ -5971,7 +5987,7 @@ const AppsListClass = compose(
     },
   }),
   createDynamicDataMixin$1({
-    itemRenderer: itemRenderer$5,
+    itemRenderer: itemRenderer$6,
     rerenderAttrsList: [
       'size',
       'item-text-variant',
@@ -5987,7 +6003,7 @@ const AppsListClass = compose(
     slots: ['empty-state'],
     wrappedEleName: 'descope-list',
     excludeAttrsSync: ['tabindex', 'class', 'empty', 'style'],
-    componentName: componentName$1d,
+    componentName: componentName$1e,
     style: () => `
       :host {
         width: 100%;
@@ -6022,60 +6038,60 @@ const AppsListClass = compose(
   }),
 );
 
-const vars$10 = AppsListClass.cssVarList;
-const globalRefs$A = getThemeRefs$1(globals);
+const vars$11 = AppsListClass.cssVarList;
+const globalRefs$B = getThemeRefs$1(globals);
 
 const defaultHeight = '400px';
 
 const appsList = {
-  [vars$10.itemsTextAlign]: 'start',
-  [vars$10.hostDirection]: globalRefs$A.direction,
-  [vars$10.maxHeight]: defaultHeight,
-  [vars$10.itemHoverBackgroundColor]: globalRefs$A.colors.surface.highlight,
+  [vars$11.itemsTextAlign]: 'start',
+  [vars$11.hostDirection]: globalRefs$B.direction,
+  [vars$11.maxHeight]: defaultHeight,
+  [vars$11.itemHoverBackgroundColor]: globalRefs$B.colors.surface.highlight,
 
   _empty: {
-    [vars$10.minHeight]: defaultHeight,
+    [vars$11.minHeight]: defaultHeight,
   },
 
   size: {
     xs: {
-      [vars$10.itemsFontSize]: '14px',
-      [vars$10.itemsFontWeight]: 'normal',
+      [vars$11.itemsFontSize]: '14px',
+      [vars$11.itemsFontWeight]: 'normal',
     },
     sm: {
-      [vars$10.itemsFontSize]: '14px',
-      [vars$10.itemsFontWeight]: 'normal',
+      [vars$11.itemsFontSize]: '14px',
+      [vars$11.itemsFontWeight]: 'normal',
     },
     md: {
-      [vars$10.itemsFontSize]: '16px',
-      [vars$10.itemsFontWeight]: 'normal',
+      [vars$11.itemsFontSize]: '16px',
+      [vars$11.itemsFontWeight]: 'normal',
     },
     lg: {
-      [vars$10.itemsFontSize]: '20px',
-      [vars$10.itemsFontWeight]: 'normal',
+      [vars$11.itemsFontSize]: '20px',
+      [vars$11.itemsFontWeight]: 'normal',
     },
   },
 
   itemPadding: {
     xs: {
-      [vars$10.itemVerticalPadding]: globalRefs$A.spacing.xs,
-      [vars$10.itemHorizontalPadding]: globalRefs$A.spacing.xs,
+      [vars$11.itemVerticalPadding]: globalRefs$B.spacing.xs,
+      [vars$11.itemHorizontalPadding]: globalRefs$B.spacing.xs,
     },
     sm: {
-      [vars$10.itemVerticalPadding]: globalRefs$A.spacing.sm,
-      [vars$10.itemHorizontalPadding]: globalRefs$A.spacing.sm,
+      [vars$11.itemVerticalPadding]: globalRefs$B.spacing.sm,
+      [vars$11.itemHorizontalPadding]: globalRefs$B.spacing.sm,
     },
     md: {
-      [vars$10.itemVerticalPadding]: globalRefs$A.spacing.md,
-      [vars$10.itemHorizontalPadding]: globalRefs$A.spacing.md,
+      [vars$11.itemVerticalPadding]: globalRefs$B.spacing.md,
+      [vars$11.itemHorizontalPadding]: globalRefs$B.spacing.md,
     },
     lg: {
-      [vars$10.itemVerticalPadding]: globalRefs$A.spacing.lg,
-      [vars$10.itemHorizontalPadding]: globalRefs$A.spacing.lg,
+      [vars$11.itemVerticalPadding]: globalRefs$B.spacing.lg,
+      [vars$11.itemHorizontalPadding]: globalRefs$B.spacing.lg,
     },
     xl: {
-      [vars$10.itemVerticalPadding]: globalRefs$A.spacing.xl,
-      [vars$10.itemHorizontalPadding]: globalRefs$A.spacing.xl,
+      [vars$11.itemVerticalPadding]: globalRefs$B.spacing.xl,
+      [vars$11.itemHorizontalPadding]: globalRefs$B.spacing.xl,
     },
   },
 };
@@ -6083,16 +6099,16 @@ const appsList = {
 var appsList$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: appsList,
-  vars: vars$10
+  vars: vars$11
 });
 
-const globalRefs$z = getThemeRefs$1(globals);
+const globalRefs$A = getThemeRefs$1(globals);
 
 const compVars$7 = ListClass.cssVarList;
 
 const [helperTheme$5, helperRefs$5, helperVars$5] = createHelperVars$1(
   { shadowColor: '#00000020' },
-  componentName$1e,
+  componentName$1f,
 );
 
 const { shadowColor: shadowColor$6 } = helperRefs$5;
@@ -6101,25 +6117,25 @@ const list = {
   ...helperTheme$5,
 
   [compVars$7.hostWidth]: '100%',
-  [compVars$7.backgroundColor]: globalRefs$z.colors.surface.main,
-  [compVars$7.fontFamily]: globalRefs$z.fonts.font1.family,
-  [compVars$7.borderColor]: globalRefs$z.colors.surface.light,
+  [compVars$7.backgroundColor]: globalRefs$A.colors.surface.main,
+  [compVars$7.fontFamily]: globalRefs$A.fonts.font1.family,
+  [compVars$7.borderColor]: globalRefs$A.colors.surface.light,
   [compVars$7.borderStyle]: 'solid',
-  [compVars$7.borderWidth]: globalRefs$z.border.xs,
-  [compVars$7.borderRadius]: globalRefs$z.radius.sm,
-  [compVars$7.gap]: globalRefs$z.spacing.md,
-  [compVars$7.verticalPadding]: globalRefs$z.spacing.lg,
-  [compVars$7.horizontalPadding]: globalRefs$z.spacing.lg,
-  [compVars$7.boxShadow]: `${globalRefs$z.shadow.wide.sm} ${shadowColor$6}, ${globalRefs$z.shadow.narrow.sm} ${shadowColor$6}`,
+  [compVars$7.borderWidth]: globalRefs$A.border.xs,
+  [compVars$7.borderRadius]: globalRefs$A.radius.sm,
+  [compVars$7.gap]: globalRefs$A.spacing.md,
+  [compVars$7.verticalPadding]: globalRefs$A.spacing.lg,
+  [compVars$7.horizontalPadding]: globalRefs$A.spacing.lg,
+  [compVars$7.boxShadow]: `${globalRefs$A.shadow.wide.sm} ${shadowColor$6}, ${globalRefs$A.shadow.narrow.sm} ${shadowColor$6}`,
   [compVars$7.maxHeight]: '100%',
-  [compVars$7.hostDirection]: globalRefs$z.direction,
+  [compVars$7.hostDirection]: globalRefs$A.direction,
   [compVars$7.minItemsWidth]: '150px',
   [compVars$7.maxRowItems]: '1000', // effectively no limit
 
   _empty: {
     [compVars$7.minHeight]: '150px',
-    [compVars$7.emptyStateTextColor]: globalRefs$z.colors.surface.dark,
-    [compVars$7.emptyStateTextFontFamily]: globalRefs$z.fonts.font1.family,
+    [compVars$7.emptyStateTextColor]: globalRefs$A.colors.surface.dark,
+    [compVars$7.emptyStateTextFontFamily]: globalRefs$A.fonts.font1.family,
   },
 
   variant: {
@@ -6136,24 +6152,24 @@ const list = {
 
   gap: {
     xs: {
-      [compVars$7.gap]: globalRefs$z.spacing.xs,
+      [compVars$7.gap]: globalRefs$A.spacing.xs,
     },
     sm: {
-      [compVars$7.gap]: globalRefs$z.spacing.sm,
+      [compVars$7.gap]: globalRefs$A.spacing.sm,
     },
     md: {
-      [compVars$7.gap]: globalRefs$z.spacing.md,
+      [compVars$7.gap]: globalRefs$A.spacing.md,
     },
     lg: {
-      [compVars$7.gap]: globalRefs$z.spacing.lg,
+      [compVars$7.gap]: globalRefs$A.spacing.lg,
     },
     xl: {
-      [compVars$7.gap]: globalRefs$z.spacing.xl,
+      [compVars$7.gap]: globalRefs$A.spacing.xl,
     },
   },
 };
 
-const vars$$ = {
+const vars$10 = {
   ...compVars$7,
   ...helperVars$5,
 };
@@ -6161,53 +6177,53 @@ const vars$$ = {
 var list$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: list,
-  vars: vars$$
+  vars: vars$10
 });
 
-const globalRefs$y = getThemeRefs$1(globals);
+const globalRefs$z = getThemeRefs$1(globals);
 
-const vars$_ = ListItemClass.cssVarList;
+const vars$$ = ListItemClass.cssVarList;
 
 const listItem = {
-  [vars$_.backgroundColor]: globalRefs$y.colors.surface.main,
-  [vars$_.verticalPadding]: globalRefs$y.spacing.lg,
-  [vars$_.horizontalPadding]: globalRefs$y.spacing.lg,
-  [vars$_.gap]: globalRefs$y.spacing.md,
-  [vars$_.borderStyle]: 'solid',
-  [vars$_.borderWidth]: globalRefs$y.border.xs,
-  [vars$_.borderColor]: globalRefs$y.colors.surface.main,
-  [vars$_.borderRadius]: globalRefs$y.radius.sm,
-  [vars$_.cursor]: 'pointer',
-  [vars$_.alignItems]: 'center',
-  [vars$_.flexDirection]: 'row',
-  [vars$_.transition]: 'border-color 0.2s, background-color 0.2s',
+  [vars$$.backgroundColor]: globalRefs$z.colors.surface.main,
+  [vars$$.verticalPadding]: globalRefs$z.spacing.lg,
+  [vars$$.horizontalPadding]: globalRefs$z.spacing.lg,
+  [vars$$.gap]: globalRefs$z.spacing.md,
+  [vars$$.borderStyle]: 'solid',
+  [vars$$.borderWidth]: globalRefs$z.border.xs,
+  [vars$$.borderColor]: globalRefs$z.colors.surface.main,
+  [vars$$.borderRadius]: globalRefs$z.radius.sm,
+  [vars$$.cursor]: 'pointer',
+  [vars$$.alignItems]: 'center',
+  [vars$$.flexDirection]: 'row',
+  [vars$$.transition]: 'border-color 0.2s, background-color 0.2s',
 
   variant: {
     tile: {
-      [vars$_.alignItems]: 'flex-start',
-      [vars$_.flexDirection]: 'column',
-      [vars$_.borderColor]: globalRefs$y.colors.surface.light,
+      [vars$$.alignItems]: 'flex-start',
+      [vars$$.flexDirection]: 'column',
+      [vars$$.borderColor]: globalRefs$z.colors.surface.light,
     },
   },
 
   _hover: {
-    [vars$_.backgroundColor]: globalRefs$y.colors.surface.highlight,
+    [vars$$.backgroundColor]: globalRefs$z.colors.surface.highlight,
   },
 
   _active: {
-    [vars$_.backgroundColor]: globalRefs$y.colors.surface.main,
-    [vars$_.borderColor]: globalRefs$y.colors.primary.light,
-    [vars$_.outline]: `1px solid ${globalRefs$y.colors.primary.light}`,
+    [vars$$.backgroundColor]: globalRefs$z.colors.surface.main,
+    [vars$$.borderColor]: globalRefs$z.colors.primary.light,
+    [vars$$.outline]: `1px solid ${globalRefs$z.colors.primary.light}`,
   },
 };
 
 var listItem$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: listItem,
-  vars: vars$_
+  vars: vars$$
 });
 
-const componentName$1c = getComponentName('multi-select-combo-box');
+const componentName$1d = getComponentName('multi-select-combo-box');
 
 const multiSelectComboBoxMixin = (superclass) =>
   class MultiSelectComboBoxMixinClass extends superclass {
@@ -6586,7 +6602,7 @@ const multiSelectComboBoxMixin = (superclass) =>
   };
 
 const {
-  host: host$v,
+  host: host$w,
   inputField: inputField$5,
   inputElement: inputElement$2,
   placeholder: placeholder$2,
@@ -6626,9 +6642,9 @@ const {
 const MultiSelectComboBoxClass = compose(
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$v, property: 'width' },
-      hostDirection: { ...host$v, property: 'direction' },
-      fontSize: [{}, host$v],
+      hostWidth: { ...host$w, property: 'width' },
+      hostDirection: { ...host$w, property: 'direction' },
+      fontSize: [{}, host$w],
       chipFontSize: { ...chipLabel, property: 'font-size' },
       fontFamily: [
         label$8,
@@ -6870,13 +6886,13 @@ const MultiSelectComboBoxClass = compose(
 
 		`,
     excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder', 'style'],
-    componentName: componentName$1c,
+    componentName: componentName$1d,
     includeForwardProps: ['items', 'renderer', 'selectedItems'],
   }),
 );
 
-const componentName$1b = getComponentName('multi-line-mappings');
-const BaseClass$8 = createBaseClass$1({ componentName: componentName$1b });
+const componentName$1c = getComponentName('multi-line-mappings');
+const BaseClass$9 = createBaseClass$1({ componentName: componentName$1c });
 
 const parseJSON = (value, fallback, source = 'unknown') => {
   if (typeof value !== 'string' || !value?.trim()) {
@@ -6946,7 +6962,7 @@ const createEmptyRow = () => ({ firstValues: [], secondValues: [] });
 const areSameValues = (first = [], second = []) =>
   first.length === second.length && first.every((v, i) => v === second[i]);
 
-class RawMultiLineMappingsClass extends BaseClass$8 {
+class RawMultiLineMappingsClass extends BaseClass$9 {
   static get observedAttributes() {
     return [
       'data',
@@ -7583,7 +7599,7 @@ class RawMultiLineMappingsClass extends BaseClass$8 {
   }
 }
 
-const host$u = { selector: () => ':host' };
+const host$v = { selector: () => ':host' };
 const rows = { selector: '.rows' };
 const row = { selector: '.row' };
 const addAction = { selector: '.add-action' };
@@ -7591,9 +7607,9 @@ const addAction = { selector: '.add-action' };
 const MultiLineMappingsClass = compose(
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$u, property: 'width' },
+      hostWidth: { ...host$v, property: 'width' },
       hostDirection: [
-        { ...host$u, property: 'direction' },
+        { ...host$v, property: 'direction' },
         {
           selector: MultiSelectComboBoxClass.componentName,
           property: MultiSelectComboBoxClass.cssVarList.hostDirection,
@@ -7614,126 +7630,126 @@ const MultiLineMappingsClass = compose(
   draggableMixin$1,
 )(RawMultiLineMappingsClass);
 
-const vars$Z = MultiLineMappingsClass.cssVarList;
+const vars$_ = MultiLineMappingsClass.cssVarList;
 
 const multiLineMappings = {
-  [vars$Z.hostDirection]: refs$1.direction,
+  [vars$_.hostDirection]: refs$1.direction,
 
-  [vars$Z.rowsGap]: globals.spacing.sm,
-  [vars$Z.rowGap]: globals.spacing.sm,
-  [vars$Z.rowAlignItems]: 'flex-end',
-  [vars$Z.rowWrap]: 'nowrap',
+  [vars$_.rowsGap]: globals.spacing.sm,
+  [vars$_.rowGap]: globals.spacing.sm,
+  [vars$_.rowAlignItems]: 'flex-end',
+  [vars$_.rowWrap]: 'nowrap',
 
-  [vars$Z.addActionJustifyContent]: 'flex-start',
-  [vars$Z.addActionMarginTop]: globals.spacing.xs,
+  [vars$_.addActionJustifyContent]: 'flex-start',
+  [vars$_.addActionMarginTop]: globals.spacing.xs,
 
   _fullWidth: {
-    [vars$Z.hostWidth]: '100%',
+    [vars$_.hostWidth]: '100%',
   },
 };
 
 var multiLineMappings$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: multiLineMappings,
-  vars: vars$Z
+  vars: vars$_
 });
 
-const globalRefs$x = getThemeRefs$1(globals);
-const vars$Y = MultiSelectComboBoxClass.cssVarList;
+const globalRefs$y = getThemeRefs$1(globals);
+const vars$Z = MultiSelectComboBoxClass.cssVarList;
 
 const multiSelectComboBox = {
-  [vars$Y.hostWidth]: refs$1.width,
-  [vars$Y.hostDirection]: refs$1.direction,
-  [vars$Y.fontSize]: refs$1.fontSize,
-  [vars$Y.fontFamily]: refs$1.fontFamily,
-  [vars$Y.labelFontSize]: refs$1.labelFontSize,
-  [vars$Y.labelFontWeight]: refs$1.labelFontWeight,
-  [vars$Y.inputValueFontWeight]: refs$1.inputValueFontWeight,
-  [vars$Y.inputPlaceholderFontWeight]: refs$1.inputPlaceholderFontWeight,
-  [vars$Y.helperTextFontWeight]: refs$1.helperTextFontWeight,
-  [vars$Y.errorMessageFontWeight]: refs$1.errorMessageFontWeight,
-  [vars$Y.labelTextColor]: refs$1.labelTextColor,
-  [vars$Y.errorMessageTextColor]: refs$1.errorMessageTextColor,
-  [vars$Y.inputBorderColor]: refs$1.borderColor,
-  [vars$Y.inputBorderWidth]: refs$1.borderWidth,
-  [vars$Y.inputBorderStyle]: refs$1.borderStyle,
-  [vars$Y.inputBorderRadius]: refs$1.borderRadius,
-  [vars$Y.inputOutlineColor]: refs$1.outlineColor,
-  [vars$Y.inputOutlineOffset]: refs$1.outlineOffset,
-  [vars$Y.inputOutlineWidth]: refs$1.outlineWidth,
-  [vars$Y.inputOutlineStyle]: refs$1.outlineStyle,
-  [vars$Y.labelRequiredIndicator]: refs$1.requiredIndicator,
-  [vars$Y.inputValueTextColor]: refs$1.valueTextColor,
-  [vars$Y.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
-  [vars$Y.inputBackgroundColor]: refs$1.backgroundColor,
-  [vars$Y.inputHorizontalPadding]: refs$1.horizontalPadding,
-  [vars$Y.inputVerticalPadding]: refs$1.verticalPadding,
-  [vars$Y.inputHeight]: refs$1.inputHeight,
-  [vars$Y.inputDropdownButtonColor]: globalRefs$x.colors.surface.dark,
-  [vars$Y.inputDropdownButtonCursor]: 'pointer',
-  [vars$Y.inputDropdownButtonSize]: refs$1.toggleButtonSize,
-  [vars$Y.inputDropdownButtonOffset]: globalRefs$x.spacing.xs,
-  [vars$Y.overlayItemPaddingInlineStart]: globalRefs$x.spacing.xs,
-  [vars$Y.overlayItemPaddingInlineEnd]: globalRefs$x.spacing.lg,
-  [vars$Y.chipFontSize]: refs$1.chipFontSize,
-  [vars$Y.chipTextColor]: globalRefs$x.colors.surface.contrast,
-  [vars$Y.chipBackgroundColor]: globalRefs$x.colors.surface.light,
-  [vars$Y.labelPosition]: refs$1.labelPosition,
-  [vars$Y.labelTopPosition]: refs$1.labelTopPosition,
-  [vars$Y.labelLeftPosition]: refs$1.labelLeftPosition,
-  [vars$Y.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
-  [vars$Y.inputTransformY]: refs$1.inputTransformY,
-  [vars$Y.inputTransition]: refs$1.inputTransition,
-  [vars$Y.marginInlineStart]: refs$1.marginInlineStart,
-  [vars$Y.placeholderOpacity]: refs$1.placeholderOpacity,
-  [vars$Y.inputVerticalAlignment]: refs$1.inputVerticalAlignment,
-
-  [vars$Y.errorMessageIcon]: refs$1.errorMessageIcon,
-  [vars$Y.errorMessageIconSize]: refs$1.errorMessageIconSize,
-  [vars$Y.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
-  [vars$Y.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
-  [vars$Y.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
-  [vars$Y.errorMessageFontSize]: refs$1.errorMessageFontSize,
+  [vars$Z.hostWidth]: refs$1.width,
+  [vars$Z.hostDirection]: refs$1.direction,
+  [vars$Z.fontSize]: refs$1.fontSize,
+  [vars$Z.fontFamily]: refs$1.fontFamily,
+  [vars$Z.labelFontSize]: refs$1.labelFontSize,
+  [vars$Z.labelFontWeight]: refs$1.labelFontWeight,
+  [vars$Z.inputValueFontWeight]: refs$1.inputValueFontWeight,
+  [vars$Z.inputPlaceholderFontWeight]: refs$1.inputPlaceholderFontWeight,
+  [vars$Z.helperTextFontWeight]: refs$1.helperTextFontWeight,
+  [vars$Z.errorMessageFontWeight]: refs$1.errorMessageFontWeight,
+  [vars$Z.labelTextColor]: refs$1.labelTextColor,
+  [vars$Z.errorMessageTextColor]: refs$1.errorMessageTextColor,
+  [vars$Z.inputBorderColor]: refs$1.borderColor,
+  [vars$Z.inputBorderWidth]: refs$1.borderWidth,
+  [vars$Z.inputBorderStyle]: refs$1.borderStyle,
+  [vars$Z.inputBorderRadius]: refs$1.borderRadius,
+  [vars$Z.inputOutlineColor]: refs$1.outlineColor,
+  [vars$Z.inputOutlineOffset]: refs$1.outlineOffset,
+  [vars$Z.inputOutlineWidth]: refs$1.outlineWidth,
+  [vars$Z.inputOutlineStyle]: refs$1.outlineStyle,
+  [vars$Z.labelRequiredIndicator]: refs$1.requiredIndicator,
+  [vars$Z.inputValueTextColor]: refs$1.valueTextColor,
+  [vars$Z.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
+  [vars$Z.inputBackgroundColor]: refs$1.backgroundColor,
+  [vars$Z.inputHorizontalPadding]: refs$1.horizontalPadding,
+  [vars$Z.inputVerticalPadding]: refs$1.verticalPadding,
+  [vars$Z.inputHeight]: refs$1.inputHeight,
+  [vars$Z.inputDropdownButtonColor]: globalRefs$y.colors.surface.dark,
+  [vars$Z.inputDropdownButtonCursor]: 'pointer',
+  [vars$Z.inputDropdownButtonSize]: refs$1.toggleButtonSize,
+  [vars$Z.inputDropdownButtonOffset]: globalRefs$y.spacing.xs,
+  [vars$Z.overlayItemPaddingInlineStart]: globalRefs$y.spacing.xs,
+  [vars$Z.overlayItemPaddingInlineEnd]: globalRefs$y.spacing.lg,
+  [vars$Z.chipFontSize]: refs$1.chipFontSize,
+  [vars$Z.chipTextColor]: globalRefs$y.colors.surface.contrast,
+  [vars$Z.chipBackgroundColor]: globalRefs$y.colors.surface.light,
+  [vars$Z.labelPosition]: refs$1.labelPosition,
+  [vars$Z.labelTopPosition]: refs$1.labelTopPosition,
+  [vars$Z.labelLeftPosition]: refs$1.labelLeftPosition,
+  [vars$Z.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
+  [vars$Z.inputTransformY]: refs$1.inputTransformY,
+  [vars$Z.inputTransition]: refs$1.inputTransition,
+  [vars$Z.marginInlineStart]: refs$1.marginInlineStart,
+  [vars$Z.placeholderOpacity]: refs$1.placeholderOpacity,
+  [vars$Z.inputVerticalAlignment]: refs$1.inputVerticalAlignment,
+
+  [vars$Z.errorMessageIcon]: refs$1.errorMessageIcon,
+  [vars$Z.errorMessageIconSize]: refs$1.errorMessageIconSize,
+  [vars$Z.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+  [vars$Z.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+  [vars$Z.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+  [vars$Z.errorMessageFontSize]: refs$1.errorMessageFontSize,
 
   labelType: {
     floating: {
-      [vars$Y.inputHorizontalPadding]: '0.25em',
+      [vars$Z.inputHorizontalPadding]: '0.25em',
       _hasValue: {
-        [vars$Y.inputHorizontalPadding]: '0.45em',
+        [vars$Z.inputHorizontalPadding]: '0.45em',
       },
     },
   },
 
   _readonly: {
-    [vars$Y.inputDropdownButtonCursor]: 'default',
+    [vars$Z.inputDropdownButtonCursor]: 'default',
   },
 
-  [vars$Y.overlayFontSize]: refs$1.fontSize,
-  [vars$Y.overlayFontFamily]: refs$1.fontFamily,
-  [vars$Y.overlayCursor]: 'pointer',
-  [vars$Y.overlayItemBoxShadow]: 'none',
-  [vars$Y.overlayBackground]: refs$1.backgroundColor,
-  [vars$Y.overlayTextColor]: refs$1.valueTextColor,
+  [vars$Z.overlayFontSize]: refs$1.fontSize,
+  [vars$Z.overlayFontFamily]: refs$1.fontFamily,
+  [vars$Z.overlayCursor]: 'pointer',
+  [vars$Z.overlayItemBoxShadow]: 'none',
+  [vars$Z.overlayBackground]: refs$1.backgroundColor,
+  [vars$Z.overlayTextColor]: refs$1.valueTextColor,
 
-  [vars$Y.overlay.minHeight]: '400px',
-  [vars$Y.overlay.margin]: '0',
+  [vars$Z.overlay.minHeight]: '400px',
+  [vars$Z.overlay.margin]: '0',
 };
 
 var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: multiSelectComboBox,
   multiSelectComboBox: multiSelectComboBox,
-  vars: vars$Y
+  vars: vars$Z
 });
 
-const componentName$1a = getComponentName('autocomplete-field-internal');
+const componentName$1b = getComponentName('autocomplete-field-internal');
 
 createBaseInputClass$1({
-  componentName: componentName$1a,
+  componentName: componentName$1b,
   baseSelector: '',
 });
 
-const componentName$19 = getComponentName('autocomplete-field');
+const componentName$1a = getComponentName('autocomplete-field');
 
 const customMixin$d = (superclass) =>
   class AutocompleteFieldMixinClass extends superclass {
@@ -7754,15 +7770,15 @@ const customMixin$d = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$1a}
+      <${componentName$1b}
         tabindex="-1"
-      ></${componentName$1a}>
+      ></${componentName$1b}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
       this.inputElement = this.shadowRoot.querySelector(
-        componentName$1a,
+        componentName$1b,
       );
 
       forwardAttrs(this, this.inputElement, {
@@ -7802,7 +7818,7 @@ const customMixin$d = (superclass) =>
     }
   };
 
-const { host: host$t } = {
+const { host: host$u } = {
   host: { selector: () => ':host' },
 };
 
@@ -7812,9 +7828,9 @@ const AutocompleteFieldClass = compose(
   }),
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$t, property: 'width' },
-      hostDirection: { ...host$t, property: 'direction' },
-      fontSize: { ...host$t },
+      hostWidth: { ...host$u, property: 'width' },
+      hostDirection: { ...host$u, property: 'direction' },
+      fontSize: { ...host$u },
       checkmarkDisplay: {
         selector: ComboBoxClass.componentName,
         property: ComboBoxClass.cssVarList.overlayCheckmarkDisplay,
@@ -7881,34 +7897,34 @@ const AutocompleteFieldClass = compose(
     }
   `,
     excludeAttrsSync: ['tabindex', 'error-message', 'label', 'style'],
-    componentName: componentName$19,
+    componentName: componentName$1a,
   }),
 );
 
-const vars$X = AutocompleteFieldClass.cssVarList;
-const globalRefs$w = getThemeRefs$1(globals);
+const vars$Y = AutocompleteFieldClass.cssVarList;
+const globalRefs$x = getThemeRefs$1(globals);
 
 const autocompleteField = {
-  [vars$X.hostWidth]: refs$1.width,
-  [vars$X.hostDirection]: refs$1.direction,
-  [vars$X.fontSize]: refs$1.fontSize,
-  [vars$X.checkmarkDisplay]: 'none',
-  [vars$X.itemPaddingInlineStart]: globalRefs$w.spacing.lg,
-  [vars$X.itemPaddingInlineEnd]: globalRefs$w.spacing.lg,
-  [vars$X.selectedItemBackground]: globalRefs$w.colors.primary.light,
-  [vars$X.selectedItemHoverBackground]: globalRefs$w.colors.primary.light,
-  [vars$X.selectedItemFocusBackground]: globalRefs$w.colors.primary.light,
-  [vars$X.itemHoverBackground]: globalRefs$w.colors.primary.highlight,
+  [vars$Y.hostWidth]: refs$1.width,
+  [vars$Y.hostDirection]: refs$1.direction,
+  [vars$Y.fontSize]: refs$1.fontSize,
+  [vars$Y.checkmarkDisplay]: 'none',
+  [vars$Y.itemPaddingInlineStart]: globalRefs$x.spacing.lg,
+  [vars$Y.itemPaddingInlineEnd]: globalRefs$x.spacing.lg,
+  [vars$Y.selectedItemBackground]: globalRefs$x.colors.primary.light,
+  [vars$Y.selectedItemHoverBackground]: globalRefs$x.colors.primary.light,
+  [vars$Y.selectedItemFocusBackground]: globalRefs$x.colors.primary.light,
+  [vars$Y.itemHoverBackground]: globalRefs$x.colors.primary.highlight,
 
   _fullWidth: {
-    [vars$X.hostWidth]: '100%',
+    [vars$Y.hostWidth]: '100%',
   },
 };
 
 var autocompleteField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: autocompleteField,
-  vars: vars$X
+  vars: vars$Y
 });
 
 const initGoogleMapsLoader = (apiKey) => {
@@ -8135,7 +8151,7 @@ class RadarConnector extends createBaseConnectorClass() {
   }
 }
 
-const componentName$18 = getComponentName('address-field-internal');
+const componentName$19 = getComponentName('address-field-internal');
 
 const GOOGLE_MAPS_CONNECTOR_TEMPLATE = 'google-maps-places';
 const RADAR_CONNECTOR_TEMPLATE = 'radar';
@@ -8146,7 +8162,7 @@ const CONNECTOR_CLASSES = {
 };
 
 const BaseInputClass$7 = createBaseInputClass$1({
-  componentName: componentName$18,
+  componentName: componentName$19,
   baseSelector: '',
 });
 const initConnectorAttrs = ['public-api-key'];
@@ -8253,7 +8269,7 @@ compose(
   connectorMixin({ connectorClasses: CONNECTOR_CLASSES }),
 )(RawAddressFieldInternal);
 
-const componentName$17 = getComponentName('address-field');
+const componentName$18 = getComponentName('address-field');
 
 const customMixin$c = (superclass) =>
   class AddressFieldMixinClass extends superclass {
@@ -8282,15 +8298,15 @@ const customMixin$c = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$18}
+      <${componentName$19}
         tabindex="-1"
-      ></${componentName$18}>
+      ></${componentName$19}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
       this.inputElement = this.shadowRoot.querySelector(
-        componentName$18,
+        componentName$19,
       );
 
       forwardAttrs(this, this.inputElement, {
@@ -8331,7 +8347,7 @@ const customMixin$c = (superclass) =>
     }
   };
 
-const { host: host$s } = {
+const { host: host$t } = {
   host: { selector: () => ':host' },
 };
 
@@ -8341,8 +8357,8 @@ const AddressFieldClass = compose(
   }),
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$s, property: 'width' },
-      hostDirection: { ...host$s, property: 'direction' },
+      hostWidth: { ...host$t, property: 'width' },
+      hostDirection: { ...host$t, property: 'direction' },
     },
   }),
   draggableMixin$1,
@@ -8368,7 +8384,7 @@ const AddressFieldClass = compose(
     width: 100%;
   }
 
-  ${componentName$18} {
+  ${componentName$19} {
     display: inline-block;
     box-sizing: border-box;
     user-select: none;
@@ -8376,30 +8392,30 @@ const AddressFieldClass = compose(
     max-width: 100%;
   }
 
-  ${componentName$18} ::slotted {
+  ${componentName$19} ::slotted {
     padding: 0;
   }
 `,
     excludeAttrsSync: ['tabindex', 'error-message', 'label', 'style'],
-    componentName: componentName$17,
+    componentName: componentName$18,
   }),
 );
 
-const vars$W = AddressFieldClass.cssVarList;
+const vars$X = AddressFieldClass.cssVarList;
 
 const addressField = {
-  [vars$W.hostWidth]: refs$1.width,
-  [vars$W.hostDirection]: refs$1.direction,
+  [vars$X.hostWidth]: refs$1.width,
+  [vars$X.hostDirection]: refs$1.direction,
 
   _fullWidth: {
-    [vars$W.hostWidth]: '100%',
+    [vars$X.hostWidth]: '100%',
   },
 };
 
 var addressField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: addressField,
-  vars: vars$W
+  vars: vars$X
 });
 
 var clockIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDEwNCAxMDQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik01MC4zMzM0IDAuMzMzMjUyQzIyLjgzMzQgMC4zMzMyNTIgMC4zMzMzNzQgMjIuODMzMyAwLjMzMzM3NCA1MC4zMzMzQzAuMzMzMzc0IDc3LjgzMzMgMjIuODMzNCAxMDAuMzMzIDUwLjMzMzQgMTAwLjMzM0M3Ny44MzM0IDEwMC4zMzMgMTAwLjMzMyA3Ny44MzMzIDEwMC4zMzMgNTAuMzMzM0MxMDAuMzMzIDIyLjgzMzMgNzcuODMzNCAwLjMzMzI1MiA1MC4zMzM0IDAuMzMzMjUyWk01MC4zMzM0IDg3LjgzMzNDMjkuNzA4NCA4Ny44MzMzIDEyLjgzMzQgNzAuOTU4MyAxMi44MzM0IDUwLjMzMzNDMTIuODMzNCAyOS43MDgzIDI5LjcwODQgMTIuODMzMyA1MC4zMzM0IDEyLjgzMzNDNzAuOTU4NCAxMi44MzMzIDg3LjgzMzQgMjkuNzA4MyA4Ny44MzM0IDUwLjMzMzNDODcuODMzNCA3MC45NTgzIDcwLjk1ODQgODcuODMzMyA1MC4zMzM0IDg3LjgzMzNaIiBmaWxsPSIjMTgxQTFDIi8+CjxwYXRoIGQ9Ik01MC4zMzI4IDE5LjA4MzNINDQuMDgyOFY1Ni41ODMySDc1LjMzMjhWNTAuMzMzMkg1MC4zMzI4VjE5LjA4MzNaIiBmaWxsPSIjMTgxQTFDIi8+Cjwvc3ZnPgo=";
@@ -8421,24 +8437,24 @@ const formatTime = (ms = 0) => {
   return timeParts.join(':');
 };
 
-const componentName$16 = getComponentName('timer');
+const componentName$17 = getComponentName('timer');
 
 const observedAttributes$5 = ['seconds', 'hide-icon', 'paused'];
 
-const BaseClass$7 = createBaseClass$1({
-  componentName: componentName$16,
+const BaseClass$8 = createBaseClass$1({
+  componentName: componentName$17,
   baseSelector: ':host > .wrapper',
 });
 
 const DEFAULT_INTERVAL = 1000;
 
-class RawTimer extends BaseClass$7 {
+class RawTimer extends BaseClass$8 {
   #timeRemains = 0;
 
   #intervalId;
 
   static get observedAttributes() {
-    return observedAttributes$5.concat(BaseClass$7.observedAttributes || []);
+    return observedAttributes$5.concat(BaseClass$8.observedAttributes || []);
   }
 
   constructor() {
@@ -8579,7 +8595,7 @@ class RawTimer extends BaseClass$7 {
   }
 }
 
-const { host: host$r, icon: icon$2, timer: timer$2 } = {
+const { host: host$s, icon: icon$2, timer: timer$2 } = {
   host: { selector: () => ':host' },
   icon: { selector: () => '.icon' },
   timer: { selector: () => '.timer' },
@@ -8600,8 +8616,8 @@ const TimerClass = compose(
       textColor: { ...timer$2, property: 'color' },
       gap: {},
       textAlign: { property: 'justify-content' },
-      hostWidth: { ...host$r, property: 'width' },
-      hostDirection: { ...host$r, property: 'direction' },
+      hostWidth: { ...host$s, property: 'width' },
+      hostDirection: { ...host$s, property: 'direction' },
       iconColor: { ...icon$2, property: IconClass.cssVarList.fill },
     },
   }),
@@ -8609,45 +8625,45 @@ const TimerClass = compose(
   componentNameValidationMixin$1,
 )(RawTimer);
 
-const globalRefs$v = getThemeRefs$1(globals);
-const vars$V = TimerClass.cssVarList;
+const globalRefs$w = getThemeRefs$1(globals);
+const vars$W = TimerClass.cssVarList;
 
 const timer = {
-  [vars$V.hostDirection]: globalRefs$v.direction,
-  [vars$V.gap]: '0.25em',
-  [vars$V.fontFamily]: globalRefs$v.fonts.font1.family,
-  [vars$V.minHeight]: '1.5em',
-  [vars$V.lineHeight]: '1em',
-  [vars$V.fontWeight]: globalRefs$v.fonts.font1.fontWeight,
-  [vars$V.textColor]: globalRefs$v.colors.surface.contrast,
-  [vars$V.iconColor]: globalRefs$v.colors.surface.contrast,
-  [vars$V.iconSize]: '1em',
+  [vars$W.hostDirection]: globalRefs$w.direction,
+  [vars$W.gap]: '0.25em',
+  [vars$W.fontFamily]: globalRefs$w.fonts.font1.family,
+  [vars$W.minHeight]: '1.5em',
+  [vars$W.lineHeight]: '1em',
+  [vars$W.fontWeight]: globalRefs$w.fonts.font1.fontWeight,
+  [vars$W.textColor]: globalRefs$w.colors.surface.contrast,
+  [vars$W.iconColor]: globalRefs$w.colors.surface.contrast,
+  [vars$W.iconSize]: '1em',
 
   size: {
-    xs: { [vars$V.fontSize]: '12px' },
-    sm: { [vars$V.fontSize]: '14px' },
-    md: { [vars$V.fontSize]: '16px' },
-    lg: { [vars$V.fontSize]: '18px' },
+    xs: { [vars$W.fontSize]: '12px' },
+    sm: { [vars$W.fontSize]: '14px' },
+    md: { [vars$W.fontSize]: '16px' },
+    lg: { [vars$W.fontSize]: '18px' },
   },
 
   textAlign: {
-    right: { [vars$V.textAlign]: 'right' },
-    left: { [vars$V.textAlign]: 'left' },
-    center: { [vars$V.textAlign]: 'center' },
+    right: { [vars$W.textAlign]: 'right' },
+    left: { [vars$W.textAlign]: 'left' },
+    center: { [vars$W.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$V.hostWidth]: '100%',
+    [vars$W.hostWidth]: '100%',
   },
 };
 
 var timer$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: timer,
-  vars: vars$V
+  vars: vars$W
 });
 
-const componentName$15 = getComponentName('timer-button');
+const componentName$16 = getComponentName('timer-button');
 
 const buttonAttrs = [
   'button-variant',
@@ -8677,12 +8693,12 @@ const mapTimerAttrs = {
   'timer-paused': 'paused',
 };
 
-const BaseClass$6 = createBaseClass$1({
-  componentName: componentName$15,
+const BaseClass$7 = createBaseClass$1({
+  componentName: componentName$16,
   baseSelector: ':host > div',
 });
 
-class RawTimerButton extends BaseClass$6 {
+class RawTimerButton extends BaseClass$7 {
   constructor() {
     super();
 
@@ -8830,7 +8846,7 @@ class RawTimerButton extends BaseClass$6 {
 }
 
 const {
-  host: host$q,
+  host: host$r,
   nestedTimer,
   nestedButton,
   timerInsideNotReversed,
@@ -8855,8 +8871,8 @@ const TimerButtonClass = compose(
     mappings: {
       gap: {},
       flexDirection: {},
-      hostWidth: { ...host$q, property: 'width' },
-      hostDirection: { ...host$q, property: 'direction' },
+      hostWidth: { ...host$r, property: 'width' },
+      hostDirection: { ...host$r, property: 'direction' },
       timerTextColor: {
         ...nestedTimer,
         property: TimerClass.cssVarList.textColor,
@@ -8887,41 +8903,41 @@ const TimerButtonClass = compose(
   componentNameValidationMixin$1,
 )(RawTimerButton);
 
-const globalRefs$u = getThemeRefs$1(globals);
-const vars$U = TimerButtonClass.cssVarList;
+const globalRefs$v = getThemeRefs$1(globals);
+const vars$V = TimerButtonClass.cssVarList;
 
 const timerButton = {
-  [vars$U.gap]: globalRefs$u.spacing.sm,
-  [vars$U.flexDirection]: 'column',
+  [vars$V.gap]: globalRefs$v.spacing.sm,
+  [vars$V.flexDirection]: 'column',
 
   _horizontal: {
-    [vars$U.flexDirection]: 'row',
+    [vars$V.flexDirection]: 'row',
     timerPosition: {
       end: {
-        [vars$U.flexDirection]: 'row-reverse',
+        [vars$V.flexDirection]: 'row-reverse',
       },
     },
   },
 
   timerPosition: {
     end: {
-      [vars$U.flexDirection]: 'column-reverse',
+      [vars$V.flexDirection]: 'column-reverse',
     },
   },
 
   _fullWidth: {
-    [vars$U.hostWidth]: '100%',
+    [vars$V.hostWidth]: '100%',
   },
 
   _timerInside: {
-    [vars$U.timerTextColor]: 'currentColor',
-    [vars$U.timerIconColor]: 'currentColor',
-    [vars$U.timerHostWidth]: 'auto',
-    [vars$U.buttonLabelSpacing]: '0',
-    [vars$U.timerInsideGapEnd]: `var(${vars$U.gap})`,
+    [vars$V.timerTextColor]: 'currentColor',
+    [vars$V.timerIconColor]: 'currentColor',
+    [vars$V.timerHostWidth]: 'auto',
+    [vars$V.buttonLabelSpacing]: '0',
+    [vars$V.timerInsideGapEnd]: `var(${vars$V.gap})`,
     timerPosition: {
       end: {
-        [vars$U.timerInsideGapStart]: `var(${vars$U.gap})`,
+        [vars$V.timerInsideGapStart]: `var(${vars$V.gap})`,
       },
     },
   },
@@ -8930,12 +8946,12 @@ const timerButton = {
 var timerButton$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: timerButton,
-  vars: vars$U
+  vars: vars$V
 });
 
-const componentName$14 = getComponentName('password-strength');
+const componentName$15 = getComponentName('password-strength');
 class RawPasswordStrength extends createBaseClass$1({
-  componentName: componentName$14,
+  componentName: componentName$15,
   baseSelector: ':host > .wrapper',
 }) {
   static get observedAttributes() {
@@ -9049,7 +9065,7 @@ class RawPasswordStrength extends createBaseClass$1({
   }
 }
 
-const { host: host$p, bar, filledBar, barsContainer, text: text$1 } = {
+const { host: host$q, bar, filledBar, barsContainer, text: text$1 } = {
   host: { selector: () => ':host' },
   bar: { selector: ' .bar' },
   barsContainer: { selector: ' .bars-container' },
@@ -9062,11 +9078,11 @@ const PasswordStrengthClass = compose(
   createStyleMixin$1({
     mappings: {
       hostWidth: [
-        { ...host$p, property: 'width' },
-        { ...host$p, property: 'min-width' },
+        { ...host$q, property: 'width' },
+        { ...host$q, property: 'min-width' },
       ],
-      hostDirection: { ...host$p, property: 'direction' },
-      hostMinWidth: { ...host$p, property: 'min-width' },
+      hostDirection: { ...host$q, property: 'direction' },
+      hostMinWidth: { ...host$q, property: 'min-width' },
       barHeight: { ...bar, property: 'height' },
       barBorderRadius: { ...bar, property: 'border-radius' },
       emptyBarColor: { ...bar, property: 'background-color' },
@@ -9084,64 +9100,64 @@ const PasswordStrengthClass = compose(
   componentNameValidationMixin$1,
 )(RawPasswordStrength);
 
-const globalRefs$t = getThemeRefs$1(globals);
+const globalRefs$u = getThemeRefs$1(globals);
 const compVars$6 = PasswordStrengthClass.cssVarList;
 
 const passwordStrength = {
-  [compVars$6.hostDirection]: globalRefs$t.direction,
+  [compVars$6.hostDirection]: globalRefs$u.direction,
   [compVars$6.barHeight]: '4px',
   [compVars$6.barTransition]: 'background-color 0.3s',
-  [compVars$6.barBorderRadius]: globalRefs$t.radius.sm,
+  [compVars$6.barBorderRadius]: globalRefs$u.radius.sm,
   [compVars$6.hostMinWidth]: refs$1.minWidth,
-  [compVars$6.barSpacing]: globalRefs$t.spacing.sm,
-  [compVars$6.emptyBarColor]: globalRefs$t.colors.surface.light,
+  [compVars$6.barSpacing]: globalRefs$u.spacing.sm,
+  [compVars$6.emptyBarColor]: globalRefs$u.colors.surface.light,
   [compVars$6.fontFamily]: refs$1.fontFamily,
   [compVars$6.fontSize]: refs$1.labelFontSize,
   [compVars$6.fontWeight]: refs$1.labelFontWeight,
-  [compVars$6.spacing]: globalRefs$t.spacing.sm,
+  [compVars$6.spacing]: globalRefs$u.spacing.sm,
   _fullWidth: {
     [compVars$6.hostWidth]: '100%',
   },
   score : {
     0: {
-      [compVars$6.filledBarColor]: globalRefs$t.colors.error.light,
-      [compVars$6.textColor]: globalRefs$t.colors.error.light,
+      [compVars$6.filledBarColor]: globalRefs$u.colors.error.light,
+      [compVars$6.textColor]: globalRefs$u.colors.error.light,
     },
     1: {
-      [compVars$6.filledBarColor]: globalRefs$t.colors.error.main,
-      [compVars$6.textColor]: globalRefs$t.colors.error.main,
+      [compVars$6.filledBarColor]: globalRefs$u.colors.error.main,
+      [compVars$6.textColor]: globalRefs$u.colors.error.main,
     },
     2: {
-      [compVars$6.filledBarColor]: globalRefs$t.colors.error.dark,
-      [compVars$6.textColor]: globalRefs$t.colors.error.dark,
+      [compVars$6.filledBarColor]: globalRefs$u.colors.error.dark,
+      [compVars$6.textColor]: globalRefs$u.colors.error.dark,
     },
     3: {
-      [compVars$6.filledBarColor]: globalRefs$t.colors.success.dark,
-      [compVars$6.textColor]: globalRefs$t.colors.success.dark,
+      [compVars$6.filledBarColor]: globalRefs$u.colors.success.dark,
+      [compVars$6.textColor]: globalRefs$u.colors.success.dark,
     },
     4: {
-      [compVars$6.filledBarColor]: globalRefs$t.colors.success.main,
-      [compVars$6.textColor]: globalRefs$t.colors.success.main,
+      [compVars$6.filledBarColor]: globalRefs$u.colors.success.main,
+      [compVars$6.textColor]: globalRefs$u.colors.success.main,
     },
   }
 };
 
-const vars$T = {
+const vars$U = {
   ...compVars$6,
 };
 
 var passwordStrength$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: passwordStrength,
-  vars: vars$T
+  vars: vars$U
 });
 
 var chevronIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iYmxhY2siIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xNy4yMTkzIDkuMjcyODNDMTcuNjU4NCA4Ljg3OTEyIDE4LjMzMzQgOC45MTU4NyAxOC43MjcyIDkuMzU0OTJDMTkuMTIwOSA5Ljc5Mzk3IDE5LjA4NDEgMTAuNDY5MSAxOC42NDUxIDEwLjg2MjhDMTguNjQ1MSAxMC44NjI4IDEzLjA0NTcgMTYuMDAyMiAxMi42NCAxNi4zNjZDMTIuMjM0MyAxNi43Mjk4IDExLjc2MDggMTYuNzI5OCAxMS4zNTUyIDE2LjM2Nkw1LjM1NDkyIDEwLjg2MjhDNC45MTU4NyAxMC40NjkxIDQuODc5MTIgOS43OTM5NyA1LjI3MjgzIDkuMzU0OTJDNS42NjY1NSA4LjkxNTg3IDYuMzQxNjQgOC44NzkxMiA2Ljc4MDY5IDkuMjcyODNMMTIgMTQuMTM2OEwxNy4yMTkzIDkuMjcyODNaIi8+Cjwvc3ZnPgo=";
 
-const componentName$13 = getComponentName('collapsible-container');
+const componentName$14 = getComponentName('collapsible-container');
 
 class RawCollapsibleContainer extends createBaseClass$1({
-  componentName: componentName$13,
+  componentName: componentName$14,
   baseSelector: 'slot',
 }) {
   static get observedAttributes() {
@@ -9368,7 +9384,7 @@ const CollapsibleContainerClass = compose(
   componentNameValidationMixin$1,
 )(RawCollapsibleContainer);
 
-const globalRefs$s = getThemeRefs$1(globals);
+const globalRefs$t = getThemeRefs$1(globals);
 
 const compVars$5 = CollapsibleContainerClass.cssVarList;
 
@@ -9376,7 +9392,7 @@ const [helperTheme$4, helperRefs$4, helperVars$4] = createHelperVars$1(
   {
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$13
+  componentName$14
 );
 
 const { shadowColor: shadowColor$5 } = helperRefs$4;
@@ -9387,7 +9403,7 @@ const collapsibleContainer = {
   [compVars$5.hostWidth]: '100%',
   [compVars$5.boxShadow]: 'none',
 
-  [compVars$5.backgroundColor]: globalRefs$s.colors.surface.main,
+  [compVars$5.backgroundColor]: globalRefs$t.colors.surface.main,
 
   [compVars$5.backgroundImage]: '', // we need to set a value to avoid inner containers from inheriting the parent's background image
   [compVars$5.backgroundPositionX]: 'center',
@@ -9396,13 +9412,13 @@ const collapsibleContainer = {
   [compVars$5.backgroundRepeat]: 'no-repeat',
 
   [compVars$5.borderRadius]: '0px',
-  [compVars$5.hostDirection]: globalRefs$s.direction,
+  [compVars$5.hostDirection]: globalRefs$t.direction,
 
   [compVars$5.flexDirection]: 'column',
   [compVars$5.alignItems]: 'flex-start',
   [compVars$5.justifyContent]: 'flex-start',
 
-  [compVars$5.headerGap]: globalRefs$s.spacing.md,
+  [compVars$5.headerGap]: globalRefs$t.spacing.md,
 
   [compVars$5.iconAnimationDuration]: '0.1s',
   [compVars$5.contentAnimationDuration]: '0.1s',
@@ -9430,30 +9446,30 @@ const collapsibleContainer = {
 
   shadow: {
     sm: {
-      [compVars$5.boxShadow]: `${globalRefs$s.shadow.wide.sm} ${shadowColor$5}, ${globalRefs$s.shadow.narrow.sm} ${shadowColor$5}`,
+      [compVars$5.boxShadow]: `${globalRefs$t.shadow.wide.sm} ${shadowColor$5}, ${globalRefs$t.shadow.narrow.sm} ${shadowColor$5}`,
     },
     md: {
-      [compVars$5.boxShadow]: `${globalRefs$s.shadow.wide.md} ${shadowColor$5}, ${globalRefs$s.shadow.narrow.md} ${shadowColor$5}`,
+      [compVars$5.boxShadow]: `${globalRefs$t.shadow.wide.md} ${shadowColor$5}, ${globalRefs$t.shadow.narrow.md} ${shadowColor$5}`,
     },
     lg: {
-      [compVars$5.boxShadow]: `${globalRefs$s.shadow.wide.lg} ${shadowColor$5}, ${globalRefs$s.shadow.narrow.lg} ${shadowColor$5}`,
+      [compVars$5.boxShadow]: `${globalRefs$t.shadow.wide.lg} ${shadowColor$5}, ${globalRefs$t.shadow.narrow.lg} ${shadowColor$5}`,
     },
     xl: {
-      [compVars$5.boxShadow]: `${globalRefs$s.shadow.wide.xl} ${shadowColor$5}, ${globalRefs$s.shadow.narrow.xl} ${shadowColor$5}`,
+      [compVars$5.boxShadow]: `${globalRefs$t.shadow.wide.xl} ${shadowColor$5}, ${globalRefs$t.shadow.narrow.xl} ${shadowColor$5}`,
     },
     '2xl': {
       [helperVars$4.shadowColor]: '#00000050', // mimic daisyUI shadow settings
-      [compVars$5.boxShadow]: `${globalRefs$s.shadow.wide['2xl']} ${shadowColor$5}`,
+      [compVars$5.boxShadow]: `${globalRefs$t.shadow.wide['2xl']} ${shadowColor$5}`,
     },
   },
 
   borderRadius: {
-    sm: { [compVars$5.borderRadius]: globalRefs$s.radius.sm },
-    md: { [compVars$5.borderRadius]: globalRefs$s.radius.md },
-    lg: { [compVars$5.borderRadius]: globalRefs$s.radius.lg },
-    xl: { [compVars$5.borderRadius]: globalRefs$s.radius.xl },
-    '2xl': { [compVars$5.borderRadius]: globalRefs$s.radius['2xl'] },
-    '3xl': { [compVars$5.borderRadius]: globalRefs$s.radius['3xl'] },
+    sm: { [compVars$5.borderRadius]: globalRefs$t.radius.sm },
+    md: { [compVars$5.borderRadius]: globalRefs$t.radius.md },
+    lg: { [compVars$5.borderRadius]: globalRefs$t.radius.lg },
+    xl: { [compVars$5.borderRadius]: globalRefs$t.radius.xl },
+    '2xl': { [compVars$5.borderRadius]: globalRefs$t.radius['2xl'] },
+    '3xl': { [compVars$5.borderRadius]: globalRefs$t.radius['3xl'] },
   },
 
   iconPosition: {
@@ -9466,8 +9482,8 @@ const collapsibleContainer = {
   },
 
   _border: {
-    [compVars$5.borderColor]: globalRefs$s.colors.surface.light,
-    [compVars$5.borderWidth]: globalRefs$s.border.xs,
+    [compVars$5.borderColor]: globalRefs$t.colors.surface.light,
+    [compVars$5.borderWidth]: globalRefs$t.border.xs,
     [compVars$5.borderStyle]: 'solid',
   },
 
@@ -9476,7 +9492,7 @@ const collapsibleContainer = {
   }
 };
 
-const vars$S = {
+const vars$T = {
   ...compVars$5,
   ...helperVars$4,
 };
@@ -9484,12 +9500,12 @@ const vars$S = {
 var collapsibleContainer$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: collapsibleContainer,
-  vars: vars$S
+  vars: vars$T
 });
 
-const componentName$12 = getComponentName('recovery-codes');
+const componentName$13 = getComponentName('recovery-codes');
 
-const itemRenderer$4 = ({ value }, _, ref) => {
+const itemRenderer$5 = ({ value }, _, ref) => {
   return `
     <descope-text variant="${ref.variant}" mode="${ref.mode}">
       <span>${value}</span>
@@ -9498,7 +9514,7 @@ const itemRenderer$4 = ({ value }, _, ref) => {
 };
 
 class RawRecoveryCodes extends createBaseClass$1({
-  componentName: componentName$12,
+  componentName: componentName$13,
   baseSelector: ':host > div',
 }) {
   static get observedAttributes() {
@@ -9629,7 +9645,7 @@ const RecoveryCodesClass = compose(
     },
   }),
   createDynamicDataMixin$1({
-    itemRenderer: itemRenderer$4,
+    itemRenderer: itemRenderer$5,
     rerenderAttrsList: ['variant', 'mode'],
     targetSelector: '.list',
   }),
@@ -9637,38 +9653,38 @@ const RecoveryCodesClass = compose(
   componentNameValidationMixin$1,
 )(RawRecoveryCodes);
 
-const globalRefs$r = getThemeRefs$1(globals);
-const vars$R = RecoveryCodesClass.cssVarList;
+const globalRefs$s = getThemeRefs$1(globals);
+const vars$S = RecoveryCodesClass.cssVarList;
 const textVars$6 = TextClass.cssVarList;
 
 const recoveryCodes = {
-  [vars$R.hostMinWidth]: '190px',
-  [vars$R.hostDirection]: globalRefs$r.direction,
-  [vars$R.iconColor]: useVar$1(textVars$6.textColor),
-  [vars$R.iconSize]: useVar$1(textVars$6.fontSize),
-  [vars$R.iconGap]: '8px',
-  [vars$R.bulletGap]: '0.35em',
+  [vars$S.hostMinWidth]: '190px',
+  [vars$S.hostDirection]: globalRefs$s.direction,
+  [vars$S.iconColor]: useVar$1(textVars$6.textColor),
+  [vars$S.iconSize]: useVar$1(textVars$6.fontSize),
+  [vars$S.iconGap]: '8px',
+  [vars$S.bulletGap]: '0.35em',
 
   textAlign: {
-    right: { [vars$R.textAlign]: 'flex-end' },
-    left: { [vars$R.textAlign]: 'flex-start' },
-    center: { [vars$R.textAlign]: 'center' },
+    right: { [vars$S.textAlign]: 'flex-end' },
+    left: { [vars$S.textAlign]: 'flex-start' },
+    center: { [vars$S.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$R.hostWidth]: '100%',
+    [vars$S.hostWidth]: '100%',
   },
 };
 
 var recoveryCodes$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: recoveryCodes,
-  vars: vars$R
+  vars: vars$S
 });
 
-const componentName$11 = getComponentName('outbound-apps');
+const componentName$12 = getComponentName('outbound-apps');
 
-const itemRenderer$3 = (
+const itemRenderer$4 = (
   { name, description, logo, appId, isConnected },
   _,
   ref,
@@ -9711,12 +9727,12 @@ const itemRenderer$3 = (
 `;
 };
 
-const BaseClass$5 = createBaseClass$1({
-  componentName: componentName$11,
+const BaseClass$6 = createBaseClass$1({
+  componentName: componentName$12,
   baseSelector: 'descope-list',
 });
 
-class RawOutboundAppsClass extends BaseClass$5 {
+class RawOutboundAppsClass extends BaseClass$6 {
   constructor() {
     super();
 
@@ -9759,7 +9775,7 @@ class RawOutboundAppsClass extends BaseClass$5 {
   init() {
     super.init?.();
 
-    this.appsList.itemRenderer = itemRenderer$3;
+    this.appsList.itemRenderer = itemRenderer$4;
 
     this.appsList.addEventListener('click', this.onAppsListClick.bind(this));
   }
@@ -9796,17 +9812,17 @@ class RawOutboundAppsClass extends BaseClass$5 {
   }
 }
 
-const { host: host$o } = {
+const { host: host$p } = {
   host: { selector: () => ':host' },
 };
 
 const OutboundAppsClass = compose(
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$o, property: 'width' },
+      hostWidth: { ...host$p, property: 'width' },
       minHeight: { selector: () => ':host' },
       hostDirection: [
-        { ...host$o, property: 'direction' },
+        { ...host$p, property: 'direction' },
         {
           selector: 'descope-list',
           property: 'direction',
@@ -9878,7 +9894,7 @@ const OutboundAppsClass = compose(
   }),
   draggableMixin$1,
   createDynamicDataMixin$1({
-    itemRenderer: itemRenderer$3,
+    itemRenderer: itemRenderer$4,
     rerenderAttrsList: [
       'size',
       'connect-button-label',
@@ -9888,36 +9904,36 @@ const OutboundAppsClass = compose(
   componentNameValidationMixin$1,
 )(RawOutboundAppsClass);
 
-const vars$Q = OutboundAppsClass.cssVarList;
+const vars$R = OutboundAppsClass.cssVarList;
 
 const outboundApps = {
-  [vars$Q.iconColor]: globals.colors.primary.main,
-  [vars$Q.errorIconColor]: globals.colors.error.main,
+  [vars$R.iconColor]: globals.colors.primary.main,
+  [vars$R.errorIconColor]: globals.colors.error.main,
 
-  [vars$Q.appLogoGap]: globals.spacing.md,
-  [vars$Q.contentGap]: globals.spacing.xs,
+  [vars$R.appLogoGap]: globals.spacing.md,
+  [vars$R.contentGap]: globals.spacing.xs,
 
   // list-item overrides
-  [vars$Q.itemCursor]: 'default',
-  [vars$Q.itemOutline]: 'none',
-  [vars$Q.itemBorderColor]: 'transparent',
+  [vars$R.itemCursor]: 'default',
+  [vars$R.itemOutline]: 'none',
+  [vars$R.itemBorderColor]: 'transparent',
 
-  [vars$Q.listPadding]: '0',
-  [vars$Q.listBorderWidth]: '0',
-  [vars$Q.listBoxShadow]: 'none',
+  [vars$R.listPadding]: '0',
+  [vars$R.listBorderWidth]: '0',
+  [vars$R.listBoxShadow]: 'none',
 
   size: {
     xs: {
-      [vars$Q.fontSize]: '0.6em',
+      [vars$R.fontSize]: '0.6em',
     },
     sm: {
-      [vars$Q.fontSize]: '0.8em',
+      [vars$R.fontSize]: '0.8em',
     },
     md: {
-      [vars$Q.fontSize]: '1em',
+      [vars$R.fontSize]: '1em',
     },
     lg: {
-      [vars$Q.fontSize]: '1.5em',
+      [vars$R.fontSize]: '1.5em',
     },
   },
 };
@@ -9925,13 +9941,13 @@ const outboundApps = {
 var outboundApps$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: outboundApps,
-  vars: vars$Q
+  vars: vars$R
 });
 
-const componentName$10 = getComponentName('outbound-app-button');
+const componentName$11 = getComponentName('outbound-app-button');
 
 class RawOutboundAppButton extends createBaseClass$1({
-  componentName: componentName$10,
+  componentName: componentName$11,
   baseSelector: ':host > descope-button',
 }) {
   static get observedAttributes() {
@@ -10030,12 +10046,12 @@ const outboundAppButton = {
   },
 };
 
-const vars$P = compVars$4;
+const vars$Q = compVars$4;
 
 var outboundAppButton$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: outboundAppButton,
-  vars: vars$P
+  vars: vars$Q
 });
 
 var desktopDeviceIconLight = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwIDE4QzIxLjEgMTggMjEuOTkgMTcuMSAyMS45OSAxNkwyMiA2QzIyIDQuOSAyMS4xIDQgMjAgNEg0QzIuOSA0IDIgNC45IDIgNlYxNkMyIDE3LjEgMi45IDE4IDQgMThIMFYyMEgyNFYxOEgyMFpNNCA2SDIwVjE2SDRWNloiIGZpbGw9IiM2MzZDNzQiLz4KPC9zdmc+Cg==";
@@ -10113,9 +10129,9 @@ const getDeviceIcon = (deviceType) => {
   };
 };
 
-const componentName$$ = getComponentName('trusted-devices');
+const componentName$10 = getComponentName('trusted-devices');
 
-const itemRenderer$2 = (
+const itemRenderer$3 = (
   { id, name, lastLoginDate, deviceType, isCurrent },
   _,
   ref,
@@ -10201,12 +10217,12 @@ const itemRenderer$2 = (
   return template;
 };
 
-const BaseClass$4 = createBaseClass$1({
-  componentName: componentName$$,
+const BaseClass$5 = createBaseClass$1({
+  componentName: componentName$10,
   baseSelector: ListClass.componentName,
 });
 
-class RawTrustedDevicesClass extends BaseClass$4 {
+class RawTrustedDevicesClass extends BaseClass$5 {
   constructor() {
     super();
 
@@ -10301,7 +10317,7 @@ class RawTrustedDevicesClass extends BaseClass$4 {
   init() {
     super.init?.();
 
-    this.appsList.itemRenderer = itemRenderer$2;
+    this.appsList.itemRenderer = itemRenderer$3;
 
     this.appsList.addEventListener('click', this.onRemoveClick.bind(this));
   }
@@ -10351,17 +10367,17 @@ class RawTrustedDevicesClass extends BaseClass$4 {
   }
 }
 
-const { host: host$n } = {
+const { host: host$o } = {
   host: { selector: () => ':host' },
 };
 
 const TrustedDevicesClass = compose(
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$n, property: 'width' },
-      hostMinWidth: { ...host$n, property: 'min-width' },
+      hostWidth: { ...host$o, property: 'width' },
+      hostMinWidth: { ...host$o, property: 'min-width' },
       hostDirection: [
-        { ...host$n, property: 'direction' },
+        { ...host$o, property: 'direction' },
         {
           selector: () => 'descope-list-item',
           property: 'direction',
@@ -10479,7 +10495,7 @@ const TrustedDevicesClass = compose(
   }),
   draggableMixin$1,
   createDynamicDataMixin$1({
-    itemRenderer: itemRenderer$2,
+    itemRenderer: itemRenderer$3,
     sortFn: sortFn$1,
     rerenderAttrsList: [
       'remove-device-label',
@@ -10492,78 +10508,629 @@ const TrustedDevicesClass = compose(
   componentNameValidationMixin$1,
 )(RawTrustedDevicesClass);
 
-const vars$O = TrustedDevicesClass.cssVarList;
+const vars$P = TrustedDevicesClass.cssVarList;
 
 const TrustedDevices = {
-  [vars$O.hostWidth]: 'auto',
-  [vars$O.hostWidth]: '300px',
-  [vars$O.hostMinWidth]: '300px',
-
-  [vars$O.listBackgroundColor]: 'transparent',
-  [vars$O.listBorderRadius]: '0',
-  [vars$O.listBorderWidth]: '0',
-  [vars$O.listPadding]: '0',
-  [vars$O.listBoxShadow]: 'none',
-  [vars$O.listItemsGap]: globals.spacing.lg,
-
-  [vars$O.itemBorderColor]: globals.colors.surface.light,
-  [vars$O.itemVerticalPadding]: globals.spacing.lg,
-  [vars$O.itemHorizontalPadding]: globals.spacing.lg,
-  [vars$O.itemBorderRadius]: globals.radius.xs,
-  [vars$O.itemOutline]: 'transparent',
-  [vars$O.itemBackgroundColor]: 'transparent',
-  [vars$O.itemCursor]: 'default',
-  [vars$O.itemContentGap]: globals.spacing.sm,
-
-  [vars$O.badgeBorderColor]: globals.colors.surface.light,
-  [vars$O.badgeTextColor]: globals.colors.surface.dark,
-  [vars$O.badgeBorderRadius]: globals.radius.xs,
-  [vars$O.badgeBackgroundColor]: globals.colors.surface.main,
-
-  [vars$O.devicePanelGap]: globals.spacing.md,
-  [vars$O.deviceIconGap]: globals.spacing.md,
-  [vars$O.deviceIconSize]: '24px',
-  [vars$O.lastLoginLabelGap]: globals.spacing.xs,
+  [vars$P.hostWidth]: 'auto',
+  [vars$P.hostWidth]: '300px',
+  [vars$P.hostMinWidth]: '300px',
+
+  [vars$P.listBackgroundColor]: 'transparent',
+  [vars$P.listBorderRadius]: '0',
+  [vars$P.listBorderWidth]: '0',
+  [vars$P.listPadding]: '0',
+  [vars$P.listBoxShadow]: 'none',
+  [vars$P.listItemsGap]: globals.spacing.lg,
+
+  [vars$P.itemBorderColor]: globals.colors.surface.light,
+  [vars$P.itemVerticalPadding]: globals.spacing.lg,
+  [vars$P.itemHorizontalPadding]: globals.spacing.lg,
+  [vars$P.itemBorderRadius]: globals.radius.xs,
+  [vars$P.itemOutline]: 'transparent',
+  [vars$P.itemBackgroundColor]: 'transparent',
+  [vars$P.itemCursor]: 'default',
+  [vars$P.itemContentGap]: globals.spacing.sm,
+
+  [vars$P.badgeBorderColor]: globals.colors.surface.light,
+  [vars$P.badgeTextColor]: globals.colors.surface.dark,
+  [vars$P.badgeBorderRadius]: globals.radius.xs,
+  [vars$P.badgeBackgroundColor]: globals.colors.surface.main,
+
+  [vars$P.devicePanelGap]: globals.spacing.md,
+  [vars$P.deviceIconGap]: globals.spacing.md,
+  [vars$P.deviceIconSize]: '24px',
+  [vars$P.lastLoginLabelGap]: globals.spacing.xs,
 
   _fullWidth: {
-    [vars$O.hostWidth]: '100%',
+    [vars$P.hostWidth]: '100%',
   },
 };
 
 var trustedDevices = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: TrustedDevices,
-  vars: vars$O
+  vars: vars$P
 });
 
-const componentName$_ = getComponentName('tooltip');
+const componentName$$ = getComponentName('multi-sso');
 
-const tooltipAttrs = [
-  'text',
-  'position',
-  'hide-delay',
-  'hover-delay',
-  'opened',
-];
+const resolveAuthType = (authType) => {
+  if (!authType || authType === 'none')
+    return { label: 'Not Configured', configured: false };
+  return { label: authType.toUpperCase(), configured: true };
+};
 
-class RawTooltip extends createBaseClass$1({
-  componentName: componentName$_,
-  baseSelector: 'vaadin-tooltip',
-}) {
-  // Observes the inner descope-anchored's `class` attribute so runtime updates
-  // (e.g. real-time conditional components toggling `.hidden`) keep this
-  // tooltip's class in sync. Set up in connectedCallback so reconnects work.
-  #anchoredClassObserver = null;
+const itemRenderer$2 = ({ id, name, isDefault, link, authType }, _, ref) => {
+  const deleteAction =
+    !isDefault && ref?.allowDelete
+      ? `<span
+          class="delete-btn delete-icon"
+          data-action="delete"
+          role="button"
+          tabindex="0"
+          title="${ref.deleteTooltipLabel}"
+        ></span>`
+      : '';
 
-  constructor() {
-    super();
+  const externalLinkAction =
+    link && ref?.allowConfigure
+      ? `<a
+          class="external-link external-link-icon"
+          target="_blank"
+          rel="noopener noreferrer"
+          title="${ref.configureTooltipLabel}"
+        ></a>`
+      : '';
 
-    this.attachShadow({ mode: 'open' }).innerHTML = `
-      <descope-anchored>
-        <slot></slot>
-        <vaadin-tooltip slot="anchored"></vaadin-tooltip>
-      </descope-anchored>
-    `;
+  const { label: authTypeLabel, configured } = resolveAuthType(authType);
+  const authTypeRow = configured
+    ? `<div class="auth-type-row">
+        <descope-badge class="auth-type-badge" size="xs"></descope-badge>
+      </div>`
+    : `<div class="auth-type-row">
+        <descope-text
+          not-configured
+          variant="body2"
+          mode="secondary"
+        >${ref?.notConfiguredLabel}</descope-text>
+      </div>`;
+
+  const template = document.createElement('template');
+
+  template.innerHTML = `
+    <descope-list-item>
+      <div class="content">
+        <div class="top-row">
+          <descope-text
+            class="config-name"
+            variant="body1"
+            mode="primary"
+          ></descope-text>
+          <span class="action">
+            ${deleteAction}
+            ${externalLinkAction}
+          </span>
+        </div>
+        ${authTypeRow}
+      </div>
+    </descope-list-item>
+  `;
+
+  template.content.querySelector('.config-name').textContent = name;
+
+  const deleteBtn = template.content.querySelector('.delete-btn');
+  if (deleteBtn) {
+    deleteBtn.dataset.id = id;
+    deleteBtn.dataset.name = name;
+    deleteBtn.setAttribute('aria-label', ref.deleteTooltipLabel);
+    const deleteIcon = cloneSlottedNodes(ref, 'delete-icon');
+    if (deleteIcon) deleteBtn.append(deleteIcon);
+  }
+
+  const linkBtn = template.content.querySelector('.external-link');
+  if (linkBtn) {
+    linkBtn.setAttribute('aria-label', ref.configureTooltipLabel);
+    if (link) linkBtn.setAttribute('href', link);
+    const linkIcon = cloneSlottedNodes(ref, 'external-link-icon');
+    if (linkIcon) linkBtn.append(linkIcon);
+  }
+
+  const authTypeBadge = template.content.querySelector('.auth-type-badge');
+  if (authTypeBadge) authTypeBadge.textContent = authTypeLabel;
+  return template;
+};
+
+const BaseClass$4 = createBaseClass$1({
+  componentName: componentName$$,
+  baseSelector: 'span.wrapper',
+});
+
+class RawMultiSsoClass extends BaseClass$4 {
+  static get observedAttributes() {
+    return [
+      'label',
+      'create-button-label',
+      'not-configured-label',
+      'delete-tooltip-label',
+      'configure-tooltip-label',
+      'empty',
+    ].concat(super.observedAttributes);
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+    <span class="wrapper">
+      <div class="header">
+        <slot name="title-icon"></slot>
+        <descope-text class="title" variant="body1" mode="primary"></descope-text>
+        <descope-button
+          class="create-button"
+          size="sm"
+          variant="link"
+          mode="primary"
+          data-action="create"
+        >
+          <slot name="create-button-icon" slot="prefix"></slot>
+          <span class="create-button-label"></span>
+        </descope-button>
+      </div>
+      <descope-list></descope-list>
+      <slot name="delete-icon" class="hidden"></slot>
+      <slot name="external-link-icon" class="hidden"></slot>
+      </span>
+    `;
+
+    this.listEl = this.shadowRoot.querySelector('descope-list');
+
+    injectStyle(
+      `
+      :host {
+        display: inline-block;
+      }
+
+      :host(:not([allow-create="true"])) .create-button {
+        display: none;
+      }
+
+      .create-button {
+        min-width: 0;
+        flex-shrink:1;
+      }
+
+      .header {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      slot[name="title-icon"] {
+        display: inline-flex;
+        align-items: center;
+        flex-shrink: 0;
+      }
+
+      .title {
+        flex: 1;
+        min-width: 0;
+        width:0;
+        flex-shrink: 0;
+
+      }
+
+      .title::part(text-wrapper) {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+
+      .content {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        width: 100%;
+      }
+
+      .top-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        min-width: 0;
+      }
+
+      .config-name {
+        display: flex;
+        align-items: center;
+        min-width: 0;
+      }
+
+      .config-name::part(text-wrapper) {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+
+      .auth-type-row {
+        display: flex;
+        align-items: center;
+      }
+
+      .action {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+      }
+
+      .hidden {
+        display: none;
+      }
+
+      .delete-btn {
+        cursor: pointer;
+        display: flex;
+      }
+
+      .delete-icon > *,
+      .external-link-icon > * {
+        width: 100%;
+        height: 100%;
+      }
+
+      .external-link {
+        cursor: pointer;
+        color: inherit;
+        display: flex;
+      }
+
+      descope-text {
+        display: flex;
+        align-items: center;
+        min-width: 0;
+      }
+      `,
+      this,
+    );
+  }
+
+  get deleteTooltipLabel() {
+    return this.getAttribute('delete-tooltip-label') ?? '';
+  }
+
+  get configureTooltipLabel() {
+    return this.getAttribute('configure-tooltip-label') ?? '';
+  }
+
+  init() {
+    super.init?.();
+
+    this.shadowRoot.querySelector('.title').textContent = this.label;
+    this.shadowRoot.querySelector('.create-button-label').textContent =
+      this.createButtonLabel;
+
+    this.listEl.itemRenderer = (item, index) => itemRenderer$2(item, index, this);
+
+    this.shadowRoot
+      .querySelector('[data-action="create"]')
+      .addEventListener('click', this.onCreateClick.bind(this));
+    this.listEl.addEventListener('click', this.onItemClick.bind(this));
+
+    forwardAttrs(this.listEl, this, { includeAttrs: ['empty'] });
+  }
+
+  onCreateClick() {
+    this.dispatchEvent(
+      new CustomEvent('create-clicked', { bubbles: true, detail: {} }),
+    );
+  }
+
+  onItemClick(e) {
+    const target = e.target.closest('[data-action="delete"]');
+    if (!target) return;
+
+    const id = target.getAttribute('data-id');
+    const name = target.getAttribute('data-name');
+    if (id) {
+      this.dispatchEvent(
+        new CustomEvent('delete-clicked', {
+          bubbles: true,
+          detail: { id, name },
+        }),
+      );
+    }
+  }
+
+  get allowCreate() {
+    return this.getAttribute('allow-create') === 'true';
+  }
+
+  get allowDelete() {
+    return this.getAttribute('allow-delete') === 'true';
+  }
+
+  get allowConfigure() {
+    return this.getAttribute('allow-configure') === 'true';
+  }
+
+  get label() {
+    return this.getAttribute('label');
+  }
+
+  get createButtonLabel() {
+    return this.getAttribute('create-button-label');
+  }
+
+  get notConfiguredLabel() {
+    return this.getAttribute('not-configured-label') || 'Not Configured';
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback?.(name, oldValue, newValue);
+    if (oldValue === newValue) return;
+
+    if (name === 'label') {
+      const el = this.shadowRoot?.querySelector('.title');
+      if (el) el.textContent = this.label;
+    } else if (name === 'create-button-label') {
+      const el = this.shadowRoot?.querySelector('.create-button-label');
+      if (el) el.textContent = this.createButtonLabel;
+    } else if (name === 'empty') {
+      this.listEl.classList.toggle('hidden', newValue === 'true');
+    }
+  }
+}
+
+const { host: host$n } = {
+  host: { selector: () => ':host' },
+};
+
+const MultiSsoClass = compose(
+  createStyleMixin$1({
+    mappings: {
+      hostWidth: { ...host$n, property: 'width' },
+      hostMinWidth: { ...host$n, property: 'min-width' },
+      hostDirection: [
+        { ...host$n, property: 'direction' },
+        {
+          selector: () => 'descope-list-item',
+          property: 'direction',
+        },
+        {
+          selector: () => 'descope-text',
+          property: 'direction',
+        },
+      ],
+      headerGap: {
+        selector: () => '.header',
+        property: 'gap',
+      },
+      headerListGap: {
+        selector: () => 'descope-list',
+        property: 'margin-top',
+      },
+      itemContentGap: {
+        selector: () => '.content',
+        property: 'gap',
+      },
+      actionGap: {
+        selector: () => '.action',
+        property: 'gap',
+      },
+      unconfiguredAuthTypeTextColor: {
+        selector: () => '[not-configured]',
+        property: TextClass.cssVarList.textColor,
+      },
+      unconfiguredAuthTypeTextFontStyle: {
+        selector: () => '[not-configured]',
+        property: 'font-style',
+      },
+
+      buttonMaxWidth: {
+        selector: ButtonClass.componentName,
+        property: ButtonClass.cssVarList.hostMaxWidth,
+      },
+
+      listItemsGap: {
+        property: ListClass.cssVarList.gap,
+      },
+      listBackgroundColor: {
+        selector: () => ListClass.componentName,
+        property: ListClass.cssVarList.backgroundColor,
+      },
+      listBorderRadius: {
+        selector: () => ListClass.componentName,
+        property: ListClass.cssVarList.borderRadius,
+      },
+      listBorderWidth: {
+        selector: () => ListClass.componentName,
+        property: ListClass.cssVarList.borderWidth,
+      },
+      listBoxShadow: {
+        selector: () => ListClass.componentName,
+        property: ListClass.cssVarList.boxShadow,
+      },
+      listPadding: [
+        {
+          selector: () => ListClass.componentName,
+          property: ListClass.cssVarList.verticalPadding,
+        },
+        {
+          selector: () => ListClass.componentName,
+          property: ListClass.cssVarList.horizontalPadding,
+        },
+      ],
+
+      itemVerticalPadding: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.verticalPadding,
+      },
+      itemHorizontalPadding: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.horizontalPadding,
+      },
+      itemCursor: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.cursor,
+      },
+      itemOutline: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.outline,
+      },
+      itemBorderColor: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.borderColor,
+      },
+      itemBorderRadius: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.borderRadius,
+      },
+      itemBackgroundColor: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.backgroundColor,
+      },
+      badgeBorderColor: {
+        selector: () => BadgeClass.componentName,
+        property: BadgeClass.cssVarList.borderColor,
+      },
+      badgeTextColor: {
+        selector: () => BadgeClass.componentName,
+        property: BadgeClass.cssVarList.textColor,
+      },
+      badgeBackgroundColor: {
+        selector: () => BadgeClass.componentName,
+        property: BadgeClass.cssVarList.backgroundColor,
+      },
+      badgeBorderRadius: {
+        selector: () => BadgeClass.componentName,
+        property: BadgeClass.cssVarList.borderRadius,
+      },
+
+      titleIconSize: [
+        { selector: () => '::slotted([slot="title-icon"])', property: 'width' },
+        {
+          selector: () => '::slotted([slot="title-icon"])',
+          property: 'height',
+        },
+      ],
+      createButtonIconSize: [
+        {
+          selector: () => '::slotted([slot="create-button-icon"])',
+          property: 'width',
+        },
+        {
+          selector: () => '::slotted([slot="create-button-icon"])',
+          property: 'height',
+        },
+      ],
+      actionIconSize: [
+        { selector: () => '.delete-icon', property: 'width' },
+        { selector: () => '.delete-icon', property: 'height' },
+        { selector: () => '.external-link-icon', property: 'width' },
+        { selector: () => '.external-link-icon', property: 'height' },
+      ],
+      actionIconColor: [
+        { selector: () => '.delete-icon', property: IconClass.cssVarList.fill },
+        {
+          selector: () => '.external-link-icon',
+          property: IconClass.cssVarList.fill,
+        },
+      ],
+    },
+  }),
+  draggableMixin$1,
+  createDynamicDataMixin$1({
+    targetSelector: 'descope-list',
+    itemRenderer: itemRenderer$2,
+    rerenderAttrsList: [
+      'allow-delete',
+      'allow-configure',
+      'not-configured-label',
+      'delete-tooltip-label',
+      'configure-tooltip-label',
+    ],
+  }),
+  componentNameValidationMixin$1,
+)(RawMultiSsoClass);
+
+const vars$O = MultiSsoClass.cssVarList;
+const globalRefs$r = getThemeRefs$1(globals);
+
+const MultiSso = {
+  [vars$O.hostWidth]: '300px',
+
+  [vars$O.headerGap]: globalRefs$r.spacing.md,
+  [vars$O.headerListGap]: globalRefs$r.spacing.md,
+  [vars$O.itemContentGap]: globalRefs$r.spacing.md,
+  [vars$O.actionGap]: globalRefs$r.spacing.sm,
+  [vars$O.unconfiguredAuthTypeTextColor]: globalRefs$r.colors.surface.dark,
+  [vars$O.unconfiguredAuthTypeTextFontStyle]: 'italic',
+  [vars$O.buttonMaxWidth]: '50%',
+
+  [vars$O.listBackgroundColor]: 'transparent',
+  [vars$O.listBorderRadius]: '0',
+  [vars$O.listBorderWidth]: '0',
+  [vars$O.listPadding]: '0',
+  [vars$O.listBoxShadow]: 'none',
+  [vars$O.listItemsGap]: globalRefs$r.spacing.lg,
+
+  [vars$O.itemBorderColor]: globalRefs$r.colors.surface.light,
+  [vars$O.itemVerticalPadding]: globalRefs$r.spacing.lg,
+  [vars$O.itemHorizontalPadding]: globalRefs$r.spacing.lg,
+  [vars$O.itemBorderRadius]: globalRefs$r.radius.xs,
+  [vars$O.itemOutline]: 'transparent',
+  [vars$O.itemBackgroundColor]: 'transparent',
+  [vars$O.itemCursor]: 'default',
+
+  [vars$O.badgeBorderColor]: globalRefs$r.colors.surface.light,
+  [vars$O.badgeTextColor]: globalRefs$r.colors.surface.dark,
+  [vars$O.badgeBorderRadius]: globalRefs$r.radius.xs,
+  [vars$O.badgeBackgroundColor]: globalRefs$r.colors.surface.main,
+
+  [vars$O.titleIconSize]: '24px',
+  [vars$O.createButtonIconSize]: '20px',
+  [vars$O.actionIconSize]: '20px',
+  [vars$O.actionIconColor]: globalRefs$r.colors.surface.dark,
+
+  _fullWidth: {
+    [vars$O.hostWidth]: '100%',
+  },
+};
+
+var multiSso = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: MultiSso,
+  vars: vars$O
+});
+
+const componentName$_ = getComponentName('tooltip');
+
+const tooltipAttrs = [
+  'text',
+  'position',
+  'hide-delay',
+  'hover-delay',
+  'opened',
+];
+
+class RawTooltip extends createBaseClass$1({
+  componentName: componentName$_,
+  baseSelector: 'vaadin-tooltip',
+}) {
+  // Observes the inner descope-anchored's `class` attribute so runtime updates
+  // (e.g. real-time conditional components toggling `.hidden`) keep this
+  // tooltip's class in sync. Set up in connectedCallback so reconnects work.
+  #anchoredClassObserver = null;
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+      <descope-anchored>
+        <slot></slot>
+        <vaadin-tooltip slot="anchored"></vaadin-tooltip>
+      </descope-anchored>
+    `;
 
     this.defaultSlot = this.shadowRoot.querySelector('slot:not([name])');
     this.tooltip = this.shadowRoot.querySelector('vaadin-tooltip');
@@ -12397,21 +12964,6 @@ const iconMap = {
   },
 };
 
-const cloneSlottedNodes = (element, slotName) => {
-  if (!element || !slotName) return null;
-  const sources = element.querySelectorAll(`:scope > [slot="${slotName}"]`);
-  if (!sources.length) return null;
-  const fragment = document.createDocumentFragment();
-  sources.forEach((source) => {
-    const clone = source.content
-      ? source.content.cloneNode(true)
-      : source.cloneNode(true);
-    if (clone.removeAttribute) clone.removeAttribute('slot');
-    fragment.append(clone);
-  });
-  return fragment;
-};
-
 const populateRemoveButton = (template, id, ref) => {
   const button = template.content.querySelector('.remove-button-content');
   button.dataset.passkeyId = id;
@@ -12538,6 +13090,7 @@ class RawUserPasskeysClass extends BaseClass$3 {
       }
 
       .header {
+        width: 100%;
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -12545,10 +13098,19 @@ class RawUserPasskeysClass extends BaseClass$3 {
 
       .header .method {
         display: flex;
+        flex: 1;
+        min-width: 0;
+      }
+
+      slot[name="method-icon"] {
+        display: inline-flex;
+        flex-shrink: 0;
       }
 
       .button {
         min-width: 0;
+        max-width: 50%;
+        flex-shrink: 1;
       }
 
       .add-passkey-button {
@@ -12606,7 +13168,7 @@ class RawUserPasskeysClass extends BaseClass$3 {
 
       descope-text {
         display: flex;
-        align-items: center;        
+        align-items: center;
         min-width: 0;
       }
       descope-text::part(text-wrapper) {
@@ -12628,7 +13190,7 @@ class RawUserPasskeysClass extends BaseClass$3 {
       .hidden {
         display: none
       }
-      
+
       `,
       this,
     );
@@ -28680,7 +29242,7 @@ const alert = {
   [vars$2.horizontalPadding]: '0',
   [vars$2.verticalPadding]: '0',
   [vars$2.gap]: `0.5em`,
-  [vars$2.fontSize]: useVar(vars$18.fontSize),
+  [vars$2.fontSize]: useVar(vars$19.fontSize),
 
   mode: {
     error: {
@@ -28974,6 +29536,7 @@ const components = {
   outboundApps: outboundApps$1,
   outboundAppButton: outboundAppButton$1,
   trustedDevices,
+  multiSso,
   tooltip: tooltip$1,
   attachment: attachment$1,
   userPasskeys: userPasskeys$1,
@@ -28989,7 +29552,7 @@ const vars = Object.keys(components).reduce(
 );
 
 const defaultTheme = { globals: globals$1, components: theme };
-const themeVars = { globals: vars$1a, components: vars };
+const themeVars = { globals: vars$1b, components: vars };
 
 const colors = {
   surface: {
@@ -29799,6 +30362,7 @@ exports.MonthDayFieldClass = MonthDayFieldClass;
 exports.MonthDayFieldPickerClass = MonthDayFieldPickerClass;
 exports.MultiLineMappingsClass = MultiLineMappingsClass;
 exports.MultiSelectComboBoxClass = MultiSelectComboBoxClass;
+exports.MultiSsoClass = MultiSsoClass;
 exports.NewPasswordClass = NewPasswordClass;
 exports.NotificationClass = NotificationClass;
 exports.NotpImageClass = NotpImageClass;