npm - @descope/web-components-ui - Versions diffs - 1.0.425 → 1.0.427 - Mend

@descope/web-components-ui 1.0.425 → 1.0.427

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/dist/cjs/index.cjs.js CHANGED Viewed

@@ -11,7 +11,7 @@ var hljs = require('highlight.js');
 const DESCOPE_PREFIX$1 = 'descope';
 const CSS_SELECTOR_SPECIFIER_MULTIPLY$1 = 3;
 const BASE_THEME_SECTION$1 = 'host';
-const PORTAL_THEME_PREFIX = '@';
+const PORTAL_THEME_PREFIX$1 = '@';
 const kebabCase$1 = (str) =>
   str
@@ -140,7 +140,7 @@ const createSyncAttrsCb$1 =
     });
   };
-const syncAttrs = (ele1, ele2, options) => {
+const syncAttrs$1 = (ele1, ele2, options) => {
   observeAttributes$1(ele1, createSyncAttrsCb$1(ele1, ele2), options);
   observeAttributes$1(ele2, createSyncAttrsCb$1(ele2, ele1), options);
 };
@@ -153,7 +153,7 @@ const forwardAttrs$1 = (source, dest, options = {}) => {
   observeAttributes$1(source, createSyncAttrsCb$1(source, dest, options.mapAttrs), options);
 };
-const forwardProps$1 = (src, target, props = []) => {
+const forwardProps$3 = (src, target, props = []) => {
   if (!props.length) return;
   const config = props.reduce(
@@ -260,6 +260,11 @@ const createSyncAttrsCb =
     });
   };
+const syncAttrs = (ele1, ele2, options) => {
+  observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), options);
+  observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), options);
+};
 const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
 const getCssVarName = (...args) => `--${kebabCaseJoin(...args)}`;
@@ -268,6 +273,28 @@ const forwardAttrs = (source, dest, options = {}) => {
   observeAttributes(source, createSyncAttrsCb(source, dest, options.mapAttrs), options);
 };
+const forwardProps$2 = (src, target, props = []) => {
+  if (!props.length) return;
+  const config = props.reduce(
+    (acc, prop) =>
+      Object.assign(acc, {
+        [prop]: {
+          get() {
+            return src[prop];
+          },
+          set(v) {
+            // eslint-disable-next-line no-param-reassign
+            src[prop] = v;
+          },
+        },
+      }),
+    {}
+  );
+  Object.defineProperties(target, config);
+};
 class ComponentsThemeManager {
   static mountOnPropName = 'DescopeThemeManager';
@@ -407,6 +434,77 @@ const genColors$1 = (colors) => {
   }, {});
 };
+const useHostExternalPadding$1 = (cssVarList) => `
+    :host {
+        padding: calc(var(${cssVarList.inputOutlineWidth}) + var(${cssVarList.inputOutlineOffset}))
+    }
+`;
+const resetInputCursor$1 = (name) => `
+    ${name} > label,
+    ${name}::part(label),
+    ${name}::part(required-indicator) {
+        cursor: pointer;
+    }
+`;
+const resetInputPlaceholder$1 = (name, ele = 'input') => `
+    ${name}[disabled] > ${ele}:placeholder-shown,
+	${name}[readonly] > ${ele}:placeholder-shown {
+		opacity: 1;
+	}
+`;
+const resetInputReadonlyStyle$1 = (name) => `
+    ${name}::part(input-field)::after {
+        opacity: 0;
+    }
+`;
+// This function is used to support RTL correctly for input components.
+// It also fixes the error message to be displayed LTR since we currently
+// don't support RTL for error messages.
+const resetInputLabelPosition$1 = (name) => `
+    :host ::part(error-message) {
+      direction: ltr;
+    }
+    :host([required]) ::part(required-indicator) {
+      width: 1em;
+      display: inline-flex;
+    }
+    :host([required]) ::part(required-indicator)::after {
+      position: static;
+    }
+    :host([has-label]) ::part(label) {
+      padding-right: 0;
+      padding-bottom: 0;
+      display: flex;
+      width: 100%;
+    }
+    ${name} [slot="label"] {
+      max-width: calc(100% - 1em);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding-bottom: 0.5em;
+    }
+`;
+const inputFloatingLabelStyle$1 = () => {
+  return `
+  :host([label-type="floating"]) {
+    position: relative;
+  }
+  :host([label-type="floating"][has-label]) [slot="label"] {
+    padding: 0;
+  }
+  :host([label-type="floating"][has-label]) > ::part(label) {
+    z-index: 1;
+    padding: 0;
+    width: auto;
+  }
+  `;
+};
 const getVarName$1 = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
 // lodash.set alternative
@@ -433,11 +531,37 @@ const transformTheme$1 = (theme, path, getTransformation) => {
 const getThemeRefs$1 = (theme, prefix) =>
   transformTheme$1(theme, [], (path) =>
-    set$1({}, path, `var(${getVarName$1(prefix ? [prefix, ...path] : path)})`)
+    set$1({}, path, `var(${getVarName$1(prefix ? [prefix, ...path] : path)})`),
   );
 const getThemeVars$1 = (theme, prefix) =>
-  transformTheme$1(theme, [], (path) => set$1({}, path, getVarName$1(prefix ? [prefix, ...path] : path)));
+  transformTheme$1(theme, [], (path) =>
+    set$1({}, path, getVarName$1(prefix ? [prefix, ...path] : path)),
+  );
+// allows to generate css variables with nested fallbacks
+const useVar$1 = (...varNames) => {
+  return varNames.reduceRight((acc, value) => {
+    if (value.startsWith('--')) return `var(${value}${acc ? `, ${acc}` : acc})`;
+    return `${value}${acc ? `, ${acc}` : acc}`;
+  }, '');
+};
+const createHelperVars$1 = (theme, prefix) => {
+  const res = transformTheme$1(theme, [], (path, value) => {
+    const modifiedPath = [...path];
+    const property = modifiedPath.splice(-1);
+    const varName = getCssVarName(prefix, property);
+    const vars = { [property]: varName };
+    const useVars = { [property]: useVar$1(varName) };
+    return { theme: set$1({}, [...modifiedPath, varName], value), useVars, vars };
+  });
+  return [res.theme, res.useVars, res.vars];
+};
 const getVarName = (path) => getCssVarName$1(DESCOPE_PREFIX$1, ...path);
@@ -518,7 +642,7 @@ const componentsThemeToStyleObj = (componentsTheme) =>
     // we are generating a new theme
     let themeName = BASE_THEME_SECTION$1;
-    if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
+    if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX$1)) {
       themeName = restPath.shift();
     }
@@ -876,7 +1000,7 @@ const globals$1 = {
   fonts: fonts$1,
   direction: direction$1,
 };
-const vars$U = getThemeVars(globals$1);
+const vars$V = getThemeVars(globals$1);
 const createCssVar$1 = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
@@ -1381,14 +1505,14 @@ const createBaseClass$1 = ({ componentName, baseSelector = '' }) => {
 // usage example:
 // #dispatchSomething = createDispatchEvent.bind(this, 'something' { ...options })
 // this will dispatch a new event when called, but also call to "onsomething"
-function createDispatchEvent(eventName, options = {}) {
+function createDispatchEvent$1(eventName, options = {}) {
   const event = new Event(eventName, options);
   this[`on${eventName}`]?.(event); // in case we got an event callback as property
   this.dispatchEvent(event);
 }
-const createProxy = ({
+const createProxy$1 = ({
   componentName,
   wrappedEleName,
   slots = [],
@@ -1399,9 +1523,9 @@ const createProxy = ({
   delegatesFocus = true,
 }) => {
   class ProxyClass extends createBaseClass$1({ componentName, baseSelector: wrappedEleName }) {
-    #dispatchBlur = createDispatchEvent.bind(this, 'blur');
+    #dispatchBlur = createDispatchEvent$1.bind(this, 'blur');
-    #dispatchFocus = createDispatchEvent.bind(this, 'focus');
+    #dispatchFocus = createDispatchEvent$1.bind(this, 'focus');
     constructor() {
       super().attachShadow({ mode: 'open', delegatesFocus }).innerHTML = `
@@ -1430,9 +1554,9 @@ const createProxy = ({
       });
       // this is needed for components that uses props, such as combo box
-      forwardProps$1(this.baseElement, this, includeForwardProps);
+      forwardProps$3(this.baseElement, this, includeForwardProps);
-      syncAttrs(this.baseElement, this, {
+      syncAttrs$1(this.baseElement, this, {
         excludeAttrs: excludeAttrsSync,
         includeAttrs: includeAttrsSync,
       });
@@ -1442,9 +1566,9 @@ const createProxy = ({
   return ProxyClass;
 };
-const observedAttributes$4 = ['required', 'pattern'];
+const observedAttributes$5 = ['required', 'pattern'];
-const errorAttributes = {
+const errorAttributes$1 = {
   valueMissing: 'data-errormessage-value-missing',
   patternMismatch: 'data-errormessage-pattern-mismatch',
   tooShort: 'data-errormessage-pattern-mismatch-too-short',
@@ -1454,14 +1578,14 @@ const errorAttributes = {
   typeMismatch: 'data-errormessage-type-mismatch',
 };
-const validationTargetSymbol = Symbol('validationTarget');
+const validationTargetSymbol$1 = Symbol('validationTarget');
-const inputValidationMixin = (superclass) =>
+const inputValidationMixin$1 = (superclass) =>
   class InputValidationMixinClass extends superclass {
-    #validationTarget = validationTargetSymbol;
+    #validationTarget = validationTargetSymbol$1;
     static get observedAttributes() {
-      return [...(superclass.observedAttributes || []), ...observedAttributes$4];
+      return [...(superclass.observedAttributes || []), ...observedAttributes$5];
     }
     static get formAssociated() {
@@ -1532,30 +1656,30 @@ const inputValidationMixin = (superclass) =>
       switch (true) {
         case valueMissing:
           return (
-            this.getAttribute(errorAttributes.valueMissing) || this.defaultErrorMsgValueMissing
+            this.getAttribute(errorAttributes$1.valueMissing) || this.defaultErrorMsgValueMissing
           );
         case patternMismatch || stepMismatch || badInput:
           return (
-            this.getAttribute(errorAttributes.patternMismatch) ||
+            this.getAttribute(errorAttributes$1.patternMismatch) ||
             this.defaultErrorMsgPatternMismatch
           );
         case typeMismatch:
           return (
-            this.getAttribute(errorAttributes.typeMismatch) ||
-            this.getAttribute(errorAttributes.patternMismatch) ||
+            this.getAttribute(errorAttributes$1.typeMismatch) ||
+            this.getAttribute(errorAttributes$1.patternMismatch) ||
             this.defaultErrorMsgTypeMismatch
           );
         case tooShort:
-          return this.getAttribute(errorAttributes.tooShort) || this.defaultErrorMsgTooShort;
+          return this.getAttribute(errorAttributes$1.tooShort) || this.defaultErrorMsgTooShort;
         case tooLong:
-          return this.getAttribute(errorAttributes.tooLong) || this.defaultErrorMsgTooLong;
+          return this.getAttribute(errorAttributes$1.tooLong) || this.defaultErrorMsgTooLong;
         case rangeUnderflow:
           return (
-            this.getAttribute(errorAttributes.rangeUnderflow) || this.defaultErrorMsgRangeUnderflow
+            this.getAttribute(errorAttributes$1.rangeUnderflow) || this.defaultErrorMsgRangeUnderflow
           );
         case rangeOverflow:
           return (
-            this.getAttribute(errorAttributes.rangeOverflow) || this.defaultErrorMsgRangeOverflow
+            this.getAttribute(errorAttributes$1.rangeOverflow) || this.defaultErrorMsgRangeOverflow
           );
         case customError:
           return this.validationMessage;
@@ -1592,7 +1716,7 @@ const inputValidationMixin = (superclass) =>
     }
     get validationTarget() {
-      return this.#validationTarget === validationTargetSymbol
+      return this.#validationTarget === validationTargetSymbol$1
         ? this.inputElement
         : this.#validationTarget;
     }
@@ -1633,7 +1757,7 @@ const inputValidationMixin = (superclass) =>
     attributeChangedCallback(attrName, oldValue, newValue) {
       super.attributeChangedCallback?.(attrName, oldValue, newValue);
-      if (observedAttributes$4.includes(attrName)) {
+      if (observedAttributes$5.includes(attrName)) {
         this.#setValidity();
       }
     }
@@ -1653,9 +1777,9 @@ const inputValidationMixin = (superclass) =>
 /* eslint-disable no-param-reassign */
-const errorAttrs = ['invalid', 'required'];
+const errorAttrs$1 = ['invalid', 'required'];
-const forwardProps = (src, targets, property) => {
+const forwardProps$1 = (src, targets, property) => {
   const targetArr = Array.isArray(targets) ? targets : [targets];
   Object.defineProperty(src, property, {
@@ -1673,7 +1797,7 @@ const forwardProps = (src, targets, property) => {
 // recursively take the first slot child until it finds an element which is not a slot
 // stops after "nestingLevel" times
-const getNestedInput = (ele) => {
+const getNestedInput$1 = (ele) => {
   if (!ele) return undefined;
   const nestingLevel = 10;
@@ -1686,7 +1810,7 @@ const getNestedInput = (ele) => {
   return undefined;
 };
-const proxyInputMixin =
+const proxyInputMixin$1 =
   ({
     proxyProps = [],
     // useProxyTargets flag allows to forwardProps to other targets, other than
@@ -1701,14 +1825,14 @@ const proxyInputMixin =
     proxyParentValidation = false,
   }) =>
   (superclass) =>
-    class ProxyInputMixinClass extends inputValidationMixin(superclass) {
+    class ProxyInputMixinClass extends inputValidationMixin$1(superclass) {
       static get observedAttributes() {
-        return [...(superclass.observedAttributes || []), ...errorAttrs];
+        return [...(superclass.observedAttributes || []), ...errorAttrs$1];
       }
       #inputElement;
-      #dispatchChange = createDispatchEvent.bind(this, 'change');
+      #dispatchChange = createDispatchEvent$1.bind(this, 'change');
       constructor() {
         super();
@@ -1735,7 +1859,7 @@ const proxyInputMixin =
         const inputSlot = this.baseElement.shadowRoot?.querySelector('slot[name="input"]');
         const textAreaSlot = this.baseElement.shadowRoot?.querySelector('slot[name="textarea"]');
-        this.#inputElement = getNestedInput(inputSlot) || getNestedInput(textAreaSlot);
+        this.#inputElement = getNestedInput$1(inputSlot) || getNestedInput$1(textAreaSlot);
         return this.#inputElement;
       }
@@ -1833,7 +1957,7 @@ const proxyInputMixin =
             const proxyTargets = useProxyTargets
               ? [this.baseElement, externalInput].filter(Boolean)
               : [];
-            forwardProps(this, [this.inputElement, ...proxyTargets], prop);
+            forwardProps$1(this, [this.inputElement, ...proxyTargets], prop);
           });
           this.setSelectionRange = this.inputElement?.setSelectionRange?.bind(this.inputElement);
@@ -1878,9 +2002,9 @@ const proxyInputMixin =
       }
     };
-const composedProxyInputMixin = (proxyInputMixinConfig) =>
+const composedProxyInputMixin$1 = (proxyInputMixinConfig) =>
   compose$1(
-    proxyInputMixin(proxyInputMixinConfig),
+    proxyInputMixin$1(proxyInputMixinConfig),
     // in order to use input-wrapper across all our input components, we need to inject its theme
     // to every proxy input mixin, to allow its css vars to be scoped properly and accessible
     // in the proxy input component
@@ -1892,11 +2016,11 @@ const composedProxyInputMixin = (proxyInputMixinConfig) =>
 // will generate the same var as "color" attribute in portals's mapping
 // when the portal name is "overlay".
 // because of that, we are adding this separator that is also used as a differentiator
-const DISPLAY_NAME_SEPARATOR = '_';
+const DISPLAY_NAME_SEPARATOR$1 = '_';
-const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
+const sanitizeSelector$1 = (selector) => selector.replace(/[^\w\s]/gi, '');
-const withWaitForShadowRoot = (getRootElementFn) => async (that) => {
+const withWaitForShadowRoot$1 = (getRootElementFn) => async (that) => {
   const ele = await getRootElementFn(that);
   return new Promise((res) => {
@@ -1923,10 +2047,10 @@ const withWaitForShadowRoot = (getRootElementFn) => async (that) => {
   });
 };
-const portalMixin =
+const portalMixin$1 =
   ({ name, selector, mappings = {}, forward: { attributes = [], include = true } = {} }) =>
   (superclass) => {
-    const eleDisplayName = name || sanitizeSelector(selector);
+    const eleDisplayName = name || sanitizeSelector$1(selector);
     const BaseClass = createStyleMixin$1({
       mappings,
@@ -1937,7 +2061,7 @@ const portalMixin =
         return {
           ...BaseClass.cssVarList,
           [eleDisplayName]: createCssVarsList$1(
-            kebabCaseJoin$1(superclass.componentName, DISPLAY_NAME_SEPARATOR + eleDisplayName),
+            kebabCaseJoin$1(superclass.componentName, DISPLAY_NAME_SEPARATOR$1 + eleDisplayName),
             mappings
           ),
         };
@@ -1955,16 +2079,16 @@ const portalMixin =
           // in case we have a selector, we should first wait for the base element shadow root
           //  and then look for the internal element
-          const baseEleShadowRoot = await withWaitForShadowRoot(() => baseEle)(that);
+          const baseEleShadowRoot = await withWaitForShadowRoot$1(() => baseEle)(that);
           return baseEleShadowRoot.querySelector(selector);
         };
-        const getPortalElement = withWaitForShadowRoot(getRootElement);
+        const getPortalElement = withWaitForShadowRoot$1(getRootElement);
         super({
           getRootElement: getPortalElement,
-          componentNameSuffix: DISPLAY_NAME_SEPARATOR + eleDisplayName,
-          themeSection: PORTAL_THEME_PREFIX + eleDisplayName,
+          componentNameSuffix: DISPLAY_NAME_SEPARATOR$1 + eleDisplayName,
+          themeSection: PORTAL_THEME_PREFIX$1 + eleDisplayName,
           baseSelector: ':host',
         });
@@ -1995,7 +2119,7 @@ const portalMixin =
 const changeMixin = (superclass) =>
   class ChangeMixinClass extends superclass {
-    #dispatchChange = createDispatchEvent.bind(this, 'change');
+    #dispatchChange = createDispatchEvent$1.bind(this, 'change');
     init() {
       super.init?.();
@@ -2043,8 +2167,8 @@ const inputEventsDispatchingMixin = (superclass) =>
           timerId = setTimeout(() => {
             timerId = null;
-            createDispatchEvent.call(this, 'blur');
-            createDispatchEvent.call(this, 'focusout', { bubbles: true });
+            createDispatchEvent$1.call(this, 'blur');
+            createDispatchEvent$1.call(this, 'focusout', { bubbles: true });
           });
         });
@@ -2056,8 +2180,8 @@ const inputEventsDispatchingMixin = (superclass) =>
           e.stopImmediatePropagation();
           clearTimeout(timerId);
           if (!timerId) {
-            createDispatchEvent.call(this, 'focus');
-            createDispatchEvent.call(this, 'focusin', { bubbles: true });
+            createDispatchEvent$1.call(this, 'focus');
+            createDispatchEvent$1.call(this, 'focusin', { bubbles: true });
           }
         };
@@ -2082,7 +2206,7 @@ const inputEventsDispatchingMixin = (superclass) =>
           if (previousRootComponentValue !== this.value) {
             previousRootComponentValue = this.value;
-            createDispatchEvent.call(this, 'input', { bubbles: true, composed: true });
+            createDispatchEvent$1.call(this, 'input', { bubbles: true, composed: true });
           }
         }
       });
@@ -2231,7 +2355,7 @@ const externalInputMixin =
         // 1Password catches the internal input, so we forward the value to the external input
         this.forwardInputValue(origInput, this.externalInput);
-        syncAttrs(origInput, this.externalInput, {
+        syncAttrs$1(origInput, this.externalInput, {
           includeAttrs,
         });
@@ -2399,9 +2523,9 @@ const createIcon = async (src) => {
 /* eslint-disable no-use-before-define */
-const componentName$11 = getComponentName$1('icon');
+const componentName$12 = getComponentName$1('icon');
-class RawIcon extends createBaseClass$1({ componentName: componentName$11, baseSelector: 'slot' }) {
+class RawIcon extends createBaseClass$1({ componentName: componentName$12, baseSelector: 'slot' }) {
   static get observedAttributes() {
     return ['src'];
   }
@@ -2486,7 +2610,7 @@ const clickableMixin = (superclass) =>
     }
   };
-const componentName$10 = getComponentName$1('button');
+const componentName$11 = getComponentName$1('button');
 const resetStyles = `
 	:host {
@@ -2579,7 +2703,7 @@ const ButtonClass = compose$1(
   draggableMixin$1,
   componentNameValidationMixin$1
 )(
-  createProxy({
+  createProxy$1({
     slots: ['', 'prefix', 'label', 'suffix'],
     wrappedEleName: 'vaadin-button',
     style: () => `
@@ -2602,7 +2726,7 @@ const ButtonClass = compose$1(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$10,
+    componentName: componentName$11,
   })
 );
@@ -2639,31 +2763,31 @@ loadingIndicatorStyles = `
 	}
 `;
-const globalRefs$z = getThemeRefs(globals$1);
+const globalRefs$A = getThemeRefs(globals$1);
 const compVars$6 = ButtonClass.cssVarList;
 const mode = {
-  primary: globalRefs$z.colors.primary,
-  secondary: globalRefs$z.colors.secondary,
-  success: globalRefs$z.colors.success,
-  error: globalRefs$z.colors.error,
-  surface: globalRefs$z.colors.surface,
+  primary: globalRefs$A.colors.primary,
+  secondary: globalRefs$A.colors.secondary,
+  success: globalRefs$A.colors.success,
+  error: globalRefs$A.colors.error,
+  surface: globalRefs$A.colors.surface,
 };
-const [helperTheme$4, helperRefs$4, helperVars$4] = createHelperVars({ mode }, componentName$10);
+const [helperTheme$4, helperRefs$4, helperVars$4] = createHelperVars({ mode }, componentName$11);
 const button = {
   ...helperTheme$4,
-  [compVars$6.fontFamily]: globalRefs$z.fonts.font1.family,
+  [compVars$6.fontFamily]: globalRefs$A.fonts.font1.family,
   [compVars$6.cursor]: 'pointer',
   [compVars$6.hostHeight]: '3em',
   [compVars$6.hostWidth]: 'auto',
-  [compVars$6.hostDirection]: globalRefs$z.direction,
+  [compVars$6.hostDirection]: globalRefs$A.direction,
-  [compVars$6.borderRadius]: globalRefs$z.radius.sm,
-  [compVars$6.borderWidth]: globalRefs$z.border.xs,
+  [compVars$6.borderRadius]: globalRefs$A.radius.sm,
+  [compVars$6.borderWidth]: globalRefs$A.border.xs,
   [compVars$6.borderStyle]: 'solid',
   [compVars$6.borderColor]: 'transparent',
@@ -2709,11 +2833,11 @@ const button = {
   },
   _disabled: {
-    [helperVars$4.main]: globalRefs$z.colors.surface.light,
-    [helperVars$4.dark]: globalRefs$z.colors.surface.dark,
-    [helperVars$4.light]: globalRefs$z.colors.surface.light,
-    [helperVars$4.contrast]: globalRefs$z.colors.surface.main,
-    [compVars$6.iconColor]: globalRefs$z.colors.surface.main,
+    [helperVars$4.main]: globalRefs$A.colors.surface.light,
+    [helperVars$4.dark]: globalRefs$A.colors.surface.dark,
+    [helperVars$4.light]: globalRefs$A.colors.surface.light,
+    [helperVars$4.contrast]: globalRefs$A.colors.surface.main,
+    [compVars$6.iconColor]: globalRefs$A.colors.surface.main,
   },
   variant: {
@@ -2762,7 +2886,7 @@ const button = {
   },
 };
-const vars$T = {
+const vars$U = {
   ...compVars$6,
   ...helperVars$4,
 };
@@ -2770,7 +2894,7 @@ const vars$T = {
 var button$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: button,
-  vars: vars$T
+  vars: vars$U
 });
 const {
@@ -3070,7 +3194,7 @@ const inputFloatingLabelStyle = () => {
   `;
 };
-const componentName$$ = getComponentName$1('text-field');
+const componentName$10 = getComponentName$1('text-field');
 const observedAttrs$2 = ['type', 'label-type', 'copy-to-clipboard'];
@@ -3156,11 +3280,11 @@ const TextFieldClass = compose$1(
     mappings: textFieldMappings,
   }),
   draggableMixin$1,
-  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
+  composedProxyInputMixin$1({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
   componentNameValidationMixin$1,
   customMixin$c
 )(
-  createProxy({
+  createProxy$1({
     slots: ['prefix', 'suffix'],
     wrappedEleName: 'vaadin-text-field',
     style: () => `
@@ -3192,30 +3316,30 @@ const TextFieldClass = compose$1(
       }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$$,
+    componentName: componentName$10,
   })
 );
-const componentName$_ = getComponentName$1('input-wrapper');
-const globalRefs$y = getThemeRefs(globals$1);
+const componentName$$ = getComponentName$1('input-wrapper');
+const globalRefs$z = getThemeRefs(globals$1);
-const [theme$1, refs, vars$S] = createHelperVars(
+const [theme$2, refs$1, vars$T] = createHelperVars(
   {
-    labelTextColor: globalRefs$y.colors.surface.dark,
+    labelTextColor: globalRefs$z.colors.surface.dark,
     labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
     labelFontWeight: '500', // not taken from globals as it is fixed in all inputs
-    valueTextColor: globalRefs$y.colors.surface.contrast,
-    placeholderTextColor: globalRefs$y.colors.surface.dark,
+    valueTextColor: globalRefs$z.colors.surface.contrast,
+    placeholderTextColor: globalRefs$z.colors.surface.dark,
     requiredIndicator: "'*'",
-    helperTextColor: globalRefs$y.colors.surface.dark,
-    errorMessageTextColor: globalRefs$y.colors.error.main,
-    successMessageTextColor: globalRefs$y.colors.success.main,
+    helperTextColor: globalRefs$z.colors.surface.dark,
+    errorMessageTextColor: globalRefs$z.colors.error.main,
+    successMessageTextColor: globalRefs$z.colors.success.main,
-    borderWidth: globalRefs$y.border.xs,
-    borderRadius: globalRefs$y.radius.xs,
+    borderWidth: globalRefs$z.border.xs,
+    borderRadius: globalRefs$z.radius.xs,
     borderColor: 'transparent',
-    outlineWidth: globalRefs$y.border.sm,
+    outlineWidth: globalRefs$z.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
@@ -3229,11 +3353,11 @@ const [theme$1, refs, vars$S] = createHelperVars(
     textAlign: 'start',
-    backgroundColor: globalRefs$y.colors.surface.main,
+    backgroundColor: globalRefs$z.colors.surface.main,
-    fontFamily: globalRefs$y.fonts.font1.family,
+    fontFamily: globalRefs$z.fonts.font1.family,
-    direction: globalRefs$y.direction,
+    direction: globalRefs$z.direction,
     overlayOpacity: '0.3',
@@ -3293,101 +3417,101 @@ const [theme$1, refs, vars$S] = createHelperVars(
     },
     _focused: {
-      outlineColor: globalRefs$y.colors.surface.light,
+      outlineColor: globalRefs$z.colors.surface.light,
       _invalid: {
-        outlineColor: globalRefs$y.colors.error.main,
+        outlineColor: globalRefs$z.colors.error.main,
       },
     },
     _bordered: {
-      outlineWidth: globalRefs$y.border.xs,
-      borderColor: globalRefs$y.colors.surface.light,
+      outlineWidth: globalRefs$z.border.xs,
+      borderColor: globalRefs$z.colors.surface.light,
       borderStyle: 'solid',
       _invalid: {
-        borderColor: globalRefs$y.colors.error.main,
+        borderColor: globalRefs$z.colors.error.main,
       },
     },
     _disabled: {
-      labelTextColor: globalRefs$y.colors.surface.light,
-      borderColor: globalRefs$y.colors.surface.light,
-      valueTextColor: globalRefs$y.colors.surface.light,
-      placeholderTextColor: globalRefs$y.colors.surface.light,
-      helperTextColor: globalRefs$y.colors.surface.light,
-      backgroundColor: globalRefs$y.colors.surface.main,
+      labelTextColor: globalRefs$z.colors.surface.light,
+      borderColor: globalRefs$z.colors.surface.light,
+      valueTextColor: globalRefs$z.colors.surface.light,
+      placeholderTextColor: globalRefs$z.colors.surface.light,
+      helperTextColor: globalRefs$z.colors.surface.light,
+      backgroundColor: globalRefs$z.colors.surface.main,
     },
   },
-  componentName$_
+  componentName$$
 );
 var inputWrapper = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: theme$1,
-  refs: refs,
-  vars: vars$S
+  default: theme$2,
+  refs: refs$1,
+  vars: vars$T
 });
-const globalRefs$x = getThemeRefs(globals$1);
-const vars$R = TextFieldClass.cssVarList;
+const globalRefs$y = getThemeRefs(globals$1);
+const vars$S = TextFieldClass.cssVarList;
 const textField$1 = {
-  [vars$R.hostWidth]: refs.width,
-  [vars$R.hostMinWidth]: refs.minWidth,
-  [vars$R.hostDirection]: refs.direction,
-  [vars$R.fontSize]: refs.fontSize,
-  [vars$R.fontFamily]: refs.fontFamily,
-  [vars$R.labelFontSize]: refs.labelFontSize,
-  [vars$R.labelFontWeight]: refs.labelFontWeight,
-  [vars$R.labelTextColor]: refs.labelTextColor,
-  [vars$R.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$R.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$R.inputValueTextColor]: refs.valueTextColor,
-  [vars$R.inputPlaceholderColor]: refs.placeholderTextColor,
-  [vars$R.inputBorderWidth]: refs.borderWidth,
-  [vars$R.inputBorderStyle]: refs.borderStyle,
-  [vars$R.inputBorderColor]: refs.borderColor,
-  [vars$R.inputBorderRadius]: refs.borderRadius,
-  [vars$R.inputOutlineWidth]: refs.outlineWidth,
-  [vars$R.inputOutlineStyle]: refs.outlineStyle,
-  [vars$R.inputOutlineColor]: refs.outlineColor,
-  [vars$R.inputOutlineOffset]: refs.outlineOffset,
-  [vars$R.inputBackgroundColor]: refs.backgroundColor,
-  [vars$R.inputHeight]: refs.inputHeight,
-  [vars$R.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$R.helperTextColor]: refs.helperTextColor,
-  [vars$R.textAlign]: refs.textAlign,
+  [vars$S.hostWidth]: refs$1.width,
+  [vars$S.hostMinWidth]: refs$1.minWidth,
+  [vars$S.hostDirection]: refs$1.direction,
+  [vars$S.fontSize]: refs$1.fontSize,
+  [vars$S.fontFamily]: refs$1.fontFamily,
+  [vars$S.labelFontSize]: refs$1.labelFontSize,
+  [vars$S.labelFontWeight]: refs$1.labelFontWeight,
+  [vars$S.labelTextColor]: refs$1.labelTextColor,
+  [vars$S.labelRequiredIndicator]: refs$1.requiredIndicator,
+  [vars$S.errorMessageTextColor]: refs$1.errorMessageTextColor,
+  [vars$S.inputValueTextColor]: refs$1.valueTextColor,
+  [vars$S.inputPlaceholderColor]: refs$1.placeholderTextColor,
+  [vars$S.inputBorderWidth]: refs$1.borderWidth,
+  [vars$S.inputBorderStyle]: refs$1.borderStyle,
+  [vars$S.inputBorderColor]: refs$1.borderColor,
+  [vars$S.inputBorderRadius]: refs$1.borderRadius,
+  [vars$S.inputOutlineWidth]: refs$1.outlineWidth,
+  [vars$S.inputOutlineStyle]: refs$1.outlineStyle,
+  [vars$S.inputOutlineColor]: refs$1.outlineColor,
+  [vars$S.inputOutlineOffset]: refs$1.outlineOffset,
+  [vars$S.inputBackgroundColor]: refs$1.backgroundColor,
+  [vars$S.inputHeight]: refs$1.inputHeight,
+  [vars$S.inputHorizontalPadding]: refs$1.horizontalPadding,
+  [vars$S.helperTextColor]: refs$1.helperTextColor,
+  [vars$S.textAlign]: refs$1.textAlign,
   textAlign: {
-    right: { [vars$R.inputTextAlign]: 'right' },
-    left: { [vars$R.inputTextAlign]: 'left' },
-    center: { [vars$R.inputTextAlign]: 'center' },
+    right: { [vars$S.inputTextAlign]: 'right' },
+    left: { [vars$S.inputTextAlign]: 'left' },
+    center: { [vars$S.inputTextAlign]: 'center' },
   },
-  [vars$R.labelPosition]: refs.labelPosition,
-  [vars$R.labelTopPosition]: refs.labelTopPosition,
-  [vars$R.labelHorizontalPosition]: refs.labelHorizontalPosition,
-  [vars$R.inputTransformY]: refs.inputTransformY,
-  [vars$R.inputTransition]: refs.inputTransition,
-  [vars$R.marginInlineStart]: refs.marginInlineStart,
-  [vars$R.placeholderOpacity]: refs.placeholderOpacity,
-  [vars$R.inputVerticalAlignment]: refs.inputVerticalAlignment,
-  [vars$R.valueInputHeight]: refs.valueInputHeight,
-  [vars$R.valueInputMarginBottom]: refs.valueInputMarginBottom,
-  [vars$R.inputIconOffset]: globalRefs$x.spacing.md,
-  [vars$R.inputIconSize]: refs.inputIconSize,
-  [vars$R.inputIconColor]: refs.placeholderTextColor,
+  [vars$S.labelPosition]: refs$1.labelPosition,
+  [vars$S.labelTopPosition]: refs$1.labelTopPosition,
+  [vars$S.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
+  [vars$S.inputTransformY]: refs$1.inputTransformY,
+  [vars$S.inputTransition]: refs$1.inputTransition,
+  [vars$S.marginInlineStart]: refs$1.marginInlineStart,
+  [vars$S.placeholderOpacity]: refs$1.placeholderOpacity,
+  [vars$S.inputVerticalAlignment]: refs$1.inputVerticalAlignment,
+  [vars$S.valueInputHeight]: refs$1.valueInputHeight,
+  [vars$S.valueInputMarginBottom]: refs$1.valueInputMarginBottom,
+  [vars$S.inputIconOffset]: globalRefs$y.spacing.md,
+  [vars$S.inputIconSize]: refs$1.inputIconSize,
+  [vars$S.inputIconColor]: refs$1.placeholderTextColor,
   // error message icon
-  [vars$R.errorMessageIcon]: refs.errorMessageIcon,
-  [vars$R.errorMessageIconSize]: refs.errorMessageIconSize,
-  [vars$R.errorMessageIconPadding]: refs.errorMessageIconPadding,
-  [vars$R.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
-  [vars$R.errorMessageIconPosition]: refs.errorMessageIconPosition,
+  [vars$S.errorMessageIcon]: refs$1.errorMessageIcon,
+  [vars$S.errorMessageIconSize]: refs$1.errorMessageIconSize,
+  [vars$S.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+  [vars$S.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+  [vars$S.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
 };
 var textField$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: textField$1,
   textField: textField$1,
-  vars: vars$R
+  vars: vars$S
 });
 const passwordDraggableMixin = (superclass) =>
@@ -3429,7 +3553,7 @@ const passwordDraggableMixin = (superclass) =>
     }
   };
-const componentName$Z = getComponentName$1('password');
+const componentName$_ = getComponentName$1('password');
 const customMixin$b = (superclass) =>
   class PasswordFieldMixinClass extends superclass {
@@ -3640,12 +3764,12 @@ const PasswordClass = compose$1(
     includeAttrs: ['disabled', 'readonly', 'pattern', 'type', 'autocomplete'],
     noBlurDispatch: true,
   }),
-  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
+  composedProxyInputMixin$1({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
   componentNameValidationMixin$1,
   passwordDraggableMixin,
   customMixin$b
 )(
-  createProxy({
+  createProxy$1({
     slots: ['', 'suffix'],
     wrappedEleName: 'vaadin-password-field',
     style: () => `
@@ -3710,75 +3834,75 @@ const PasswordClass = compose$1(
       }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$Z,
+    componentName: componentName$_,
   })
 );
-const globalRefs$w = getThemeRefs(globals$1);
-const vars$Q = PasswordClass.cssVarList;
+const globalRefs$x = getThemeRefs(globals$1);
+const vars$R = PasswordClass.cssVarList;
 const password = {
-  [vars$Q.hostWidth]: refs.width,
-  [vars$Q.hostMinWidth]: refs.minWidth,
-  [vars$Q.hostDirection]: refs.direction,
-  [vars$Q.fontSize]: refs.fontSize,
-  [vars$Q.fontFamily]: refs.fontFamily,
-  [vars$Q.labelFontSize]: refs.labelFontSize,
-  [vars$Q.labelFontWeight]: refs.labelFontWeight,
-  [vars$Q.labelTextColor]: refs.labelTextColor,
-  [vars$Q.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$Q.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$Q.inputHeight]: refs.inputHeight,
-  [vars$Q.inputBackgroundColor]: refs.backgroundColor,
-  [vars$Q.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$Q.inputValueTextColor]: refs.valueTextColor,
-  [vars$Q.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$Q.inputBorderWidth]: refs.borderWidth,
-  [vars$Q.inputBorderStyle]: refs.borderStyle,
-  [vars$Q.inputBorderColor]: refs.borderColor,
-  [vars$Q.inputBorderRadius]: refs.borderRadius,
-  [vars$Q.inputOutlineWidth]: refs.outlineWidth,
-  [vars$Q.inputOutlineStyle]: refs.outlineStyle,
-  [vars$Q.inputOutlineColor]: refs.outlineColor,
-  [vars$Q.inputOutlineOffset]: refs.outlineOffset,
-  [vars$Q.revealButtonOffset]: globalRefs$w.spacing.md,
-  [vars$Q.revealButtonSize]: refs.toggleButtonSize,
-  [vars$Q.revealButtonColor]: refs.placeholderTextColor,
-  [vars$Q.labelPosition]: refs.labelPosition,
-  [vars$Q.labelTopPosition]: refs.labelTopPosition,
-  [vars$Q.labelHorizontalPosition]: refs.labelHorizontalPosition,
-  [vars$Q.inputTransformY]: refs.inputTransformY,
-  [vars$Q.inputTransition]: refs.inputTransition,
-  [vars$Q.marginInlineStart]: refs.marginInlineStart,
-  [vars$Q.placeholderOpacity]: refs.placeholderOpacity,
-  [vars$Q.inputVerticalAlignment]: refs.inputVerticalAlignment,
-  [vars$Q.valueInputHeight]: refs.valueInputHeight,
+  [vars$R.hostWidth]: refs$1.width,
+  [vars$R.hostMinWidth]: refs$1.minWidth,
+  [vars$R.hostDirection]: refs$1.direction,
+  [vars$R.fontSize]: refs$1.fontSize,
+  [vars$R.fontFamily]: refs$1.fontFamily,
+  [vars$R.labelFontSize]: refs$1.labelFontSize,
+  [vars$R.labelFontWeight]: refs$1.labelFontWeight,
+  [vars$R.labelTextColor]: refs$1.labelTextColor,
+  [vars$R.errorMessageTextColor]: refs$1.errorMessageTextColor,
+  [vars$R.inputHorizontalPadding]: refs$1.horizontalPadding,
+  [vars$R.inputHeight]: refs$1.inputHeight,
+  [vars$R.inputBackgroundColor]: refs$1.backgroundColor,
+  [vars$R.labelRequiredIndicator]: refs$1.requiredIndicator,
+  [vars$R.inputValueTextColor]: refs$1.valueTextColor,
+  [vars$R.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
+  [vars$R.inputBorderWidth]: refs$1.borderWidth,
+  [vars$R.inputBorderStyle]: refs$1.borderStyle,
+  [vars$R.inputBorderColor]: refs$1.borderColor,
+  [vars$R.inputBorderRadius]: refs$1.borderRadius,
+  [vars$R.inputOutlineWidth]: refs$1.outlineWidth,
+  [vars$R.inputOutlineStyle]: refs$1.outlineStyle,
+  [vars$R.inputOutlineColor]: refs$1.outlineColor,
+  [vars$R.inputOutlineOffset]: refs$1.outlineOffset,
+  [vars$R.revealButtonOffset]: globalRefs$x.spacing.md,
+  [vars$R.revealButtonSize]: refs$1.toggleButtonSize,
+  [vars$R.revealButtonColor]: refs$1.placeholderTextColor,
+  [vars$R.labelPosition]: refs$1.labelPosition,
+  [vars$R.labelTopPosition]: refs$1.labelTopPosition,
+  [vars$R.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
+  [vars$R.inputTransformY]: refs$1.inputTransformY,
+  [vars$R.inputTransition]: refs$1.inputTransition,
+  [vars$R.marginInlineStart]: refs$1.marginInlineStart,
+  [vars$R.placeholderOpacity]: refs$1.placeholderOpacity,
+  [vars$R.inputVerticalAlignment]: refs$1.inputVerticalAlignment,
+  [vars$R.valueInputHeight]: refs$1.valueInputHeight,
   // error message icon
-  [vars$Q.errorMessageIcon]: refs.errorMessageIcon,
-  [vars$Q.errorMessageIconSize]: refs.errorMessageIconSize,
-  [vars$Q.errorMessageIconPadding]: refs.errorMessageIconPadding,
-  [vars$Q.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
-  [vars$Q.errorMessageIconPosition]: refs.errorMessageIconPosition,
+  [vars$R.errorMessageIcon]: refs$1.errorMessageIcon,
+  [vars$R.errorMessageIconSize]: refs$1.errorMessageIconSize,
+  [vars$R.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+  [vars$R.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+  [vars$R.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
 };
 var password$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: password,
-  vars: vars$Q
+  vars: vars$R
 });
-const componentName$Y = getComponentName$1('number-field');
+const componentName$Z = getComponentName$1('number-field');
 const NumberFieldClass = compose$1(
   createStyleMixin$1({
     mappings: textFieldMappings,
   }),
   draggableMixin$1,
-  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
+  composedProxyInputMixin$1({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin$1
 )(
-  createProxy({
+  createProxy$1({
     slots: ['', 'prefix', 'suffix'],
     wrappedEleName: 'vaadin-number-field',
     style: () => `
@@ -3802,62 +3926,62 @@ const NumberFieldClass = compose$1(
       }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$Y,
+    componentName: componentName$Z,
   })
 );
-const vars$P = NumberFieldClass.cssVarList;
+const vars$Q = NumberFieldClass.cssVarList;
 const numberField = {
-  [vars$P.hostWidth]: refs.width,
-  [vars$P.hostMinWidth]: refs.minWidth,
-  [vars$P.hostDirection]: refs.direction,
-  [vars$P.fontSize]: refs.fontSize,
-  [vars$P.fontFamily]: refs.fontFamily,
-  [vars$P.labelFontSize]: refs.labelFontSize,
-  [vars$P.labelFontWeight]: refs.labelFontWeight,
-  [vars$P.labelTextColor]: refs.labelTextColor,
-  [vars$P.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$P.inputValueTextColor]: refs.valueTextColor,
-  [vars$P.inputPlaceholderColor]: refs.placeholderTextColor,
-  [vars$P.inputBorderWidth]: refs.borderWidth,
-  [vars$P.inputBorderStyle]: refs.borderStyle,
-  [vars$P.inputBorderColor]: refs.borderColor,
-  [vars$P.inputBorderRadius]: refs.borderRadius,
-  [vars$P.inputOutlineWidth]: refs.outlineWidth,
-  [vars$P.inputOutlineStyle]: refs.outlineStyle,
-  [vars$P.inputOutlineColor]: refs.outlineColor,
-  [vars$P.inputOutlineOffset]: refs.outlineOffset,
-  [vars$P.inputBackgroundColor]: refs.backgroundColor,
-  [vars$P.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$P.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$P.inputHeight]: refs.inputHeight,
-  [vars$P.labelPosition]: refs.labelPosition,
-  [vars$P.labelTopPosition]: refs.labelTopPosition,
-  [vars$P.labelHorizontalPosition]: refs.labelHorizontalPosition,
-  [vars$P.inputTransformY]: refs.inputTransformY,
-  [vars$P.inputTransition]: refs.inputTransition,
-  [vars$P.marginInlineStart]: refs.marginInlineStart,
-  [vars$P.placeholderOpacity]: refs.placeholderOpacity,
-  [vars$P.inputVerticalAlignment]: refs.inputVerticalAlignment,
-  [vars$P.valueInputHeight]: refs.valueInputHeight,
-  [vars$P.valueInputMarginBottom]: refs.valueInputMarginBottom,
+  [vars$Q.hostWidth]: refs$1.width,
+  [vars$Q.hostMinWidth]: refs$1.minWidth,
+  [vars$Q.hostDirection]: refs$1.direction,
+  [vars$Q.fontSize]: refs$1.fontSize,
+  [vars$Q.fontFamily]: refs$1.fontFamily,
+  [vars$Q.labelFontSize]: refs$1.labelFontSize,
+  [vars$Q.labelFontWeight]: refs$1.labelFontWeight,
+  [vars$Q.labelTextColor]: refs$1.labelTextColor,
+  [vars$Q.errorMessageTextColor]: refs$1.errorMessageTextColor,
+  [vars$Q.inputValueTextColor]: refs$1.valueTextColor,
+  [vars$Q.inputPlaceholderColor]: refs$1.placeholderTextColor,
+  [vars$Q.inputBorderWidth]: refs$1.borderWidth,
+  [vars$Q.inputBorderStyle]: refs$1.borderStyle,
+  [vars$Q.inputBorderColor]: refs$1.borderColor,
+  [vars$Q.inputBorderRadius]: refs$1.borderRadius,
+  [vars$Q.inputOutlineWidth]: refs$1.outlineWidth,
+  [vars$Q.inputOutlineStyle]: refs$1.outlineStyle,
+  [vars$Q.inputOutlineColor]: refs$1.outlineColor,
+  [vars$Q.inputOutlineOffset]: refs$1.outlineOffset,
+  [vars$Q.inputBackgroundColor]: refs$1.backgroundColor,
+  [vars$Q.labelRequiredIndicator]: refs$1.requiredIndicator,
+  [vars$Q.inputHorizontalPadding]: refs$1.horizontalPadding,
+  [vars$Q.inputHeight]: refs$1.inputHeight,
+  [vars$Q.labelPosition]: refs$1.labelPosition,
+  [vars$Q.labelTopPosition]: refs$1.labelTopPosition,
+  [vars$Q.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
+  [vars$Q.inputTransformY]: refs$1.inputTransformY,
+  [vars$Q.inputTransition]: refs$1.inputTransition,
+  [vars$Q.marginInlineStart]: refs$1.marginInlineStart,
+  [vars$Q.placeholderOpacity]: refs$1.placeholderOpacity,
+  [vars$Q.inputVerticalAlignment]: refs$1.inputVerticalAlignment,
+  [vars$Q.valueInputHeight]: refs$1.valueInputHeight,
+  [vars$Q.valueInputMarginBottom]: refs$1.valueInputMarginBottom,
   // error message icon
-  [vars$P.errorMessageIcon]: refs.errorMessageIcon,
-  [vars$P.errorMessageIconSize]: refs.errorMessageIconSize,
-  [vars$P.errorMessageIconPadding]: refs.errorMessageIconPadding,
-  [vars$P.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
-  [vars$P.errorMessageIconPosition]: refs.errorMessageIconPosition,
+  [vars$Q.errorMessageIcon]: refs$1.errorMessageIcon,
+  [vars$Q.errorMessageIconSize]: refs$1.errorMessageIconSize,
+  [vars$Q.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+  [vars$Q.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+  [vars$Q.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
 };
 var numberField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: numberField,
-  vars: vars$P
+  vars: vars$Q
 });
-const componentName$X = getComponentName$1('email-field');
+const componentName$Y = getComponentName$1('email-field');
 const defaultPattern = "^[\\w\\.\\%\\+\\-']+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$";
 const defaultAutocomplete = 'username';
@@ -3889,11 +4013,11 @@ const EmailFieldClass = compose$1(
     autocompleteType: 'username',
     includeAttrs: ['disabled', 'readonly', 'pattern'],
   }),
-  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
+  composedProxyInputMixin$1({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
   componentNameValidationMixin$1,
   customMixin$a
 )(
-  createProxy({
+  createProxy$1({
     slots: ['', 'suffix'],
     wrappedEleName: 'vaadin-email-field',
     style: () => `
@@ -3926,62 +4050,62 @@ const EmailFieldClass = compose$1(
       }
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$X,
+    componentName: componentName$Y,
   })
 );
-const vars$O = EmailFieldClass.cssVarList;
+const vars$P = EmailFieldClass.cssVarList;
 const emailField = {
-  [vars$O.hostWidth]: refs.width,
-  [vars$O.hostMinWidth]: refs.minWidth,
-  [vars$O.hostDirection]: refs.direction,
-  [vars$O.fontSize]: refs.fontSize,
-  [vars$O.fontFamily]: refs.fontFamily,
-  [vars$O.labelFontSize]: refs.labelFontSize,
-  [vars$O.labelFontWeight]: refs.labelFontWeight,
-  [vars$O.labelTextColor]: refs.labelTextColor,
-  [vars$O.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$O.inputValueTextColor]: refs.valueTextColor,
-  [vars$O.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$O.inputPlaceholderColor]: refs.placeholderTextColor,
-  [vars$O.inputBorderWidth]: refs.borderWidth,
-  [vars$O.inputBorderStyle]: refs.borderStyle,
-  [vars$O.inputBorderColor]: refs.borderColor,
-  [vars$O.inputBorderRadius]: refs.borderRadius,
-  [vars$O.inputOutlineWidth]: refs.outlineWidth,
-  [vars$O.inputOutlineStyle]: refs.outlineStyle,
-  [vars$O.inputOutlineColor]: refs.outlineColor,
-  [vars$O.inputOutlineOffset]: refs.outlineOffset,
-  [vars$O.inputBackgroundColor]: refs.backgroundColor,
-  [vars$O.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$O.inputHeight]: refs.inputHeight,
-  [vars$O.labelPosition]: refs.labelPosition,
-  [vars$O.labelTopPosition]: refs.labelTopPosition,
-  [vars$O.labelHorizontalPosition]: refs.labelHorizontalPosition,
-  [vars$O.inputTransformY]: refs.inputTransformY,
-  [vars$O.inputTransition]: refs.inputTransition,
-  [vars$O.marginInlineStart]: refs.marginInlineStart,
-  [vars$O.placeholderOpacity]: refs.placeholderOpacity,
-  [vars$O.inputVerticalAlignment]: refs.inputVerticalAlignment,
-  [vars$O.valueInputHeight]: refs.valueInputHeight,
-  [vars$O.valueInputMarginBottom]: refs.valueInputMarginBottom,
+  [vars$P.hostWidth]: refs$1.width,
+  [vars$P.hostMinWidth]: refs$1.minWidth,
+  [vars$P.hostDirection]: refs$1.direction,
+  [vars$P.fontSize]: refs$1.fontSize,
+  [vars$P.fontFamily]: refs$1.fontFamily,
+  [vars$P.labelFontSize]: refs$1.labelFontSize,
+  [vars$P.labelFontWeight]: refs$1.labelFontWeight,
+  [vars$P.labelTextColor]: refs$1.labelTextColor,
+  [vars$P.errorMessageTextColor]: refs$1.errorMessageTextColor,
+  [vars$P.inputValueTextColor]: refs$1.valueTextColor,
+  [vars$P.labelRequiredIndicator]: refs$1.requiredIndicator,
+  [vars$P.inputPlaceholderColor]: refs$1.placeholderTextColor,
+  [vars$P.inputBorderWidth]: refs$1.borderWidth,
+  [vars$P.inputBorderStyle]: refs$1.borderStyle,
+  [vars$P.inputBorderColor]: refs$1.borderColor,
+  [vars$P.inputBorderRadius]: refs$1.borderRadius,
+  [vars$P.inputOutlineWidth]: refs$1.outlineWidth,
+  [vars$P.inputOutlineStyle]: refs$1.outlineStyle,
+  [vars$P.inputOutlineColor]: refs$1.outlineColor,
+  [vars$P.inputOutlineOffset]: refs$1.outlineOffset,
+  [vars$P.inputBackgroundColor]: refs$1.backgroundColor,
+  [vars$P.inputHorizontalPadding]: refs$1.horizontalPadding,
+  [vars$P.inputHeight]: refs$1.inputHeight,
+  [vars$P.labelPosition]: refs$1.labelPosition,
+  [vars$P.labelTopPosition]: refs$1.labelTopPosition,
+  [vars$P.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
+  [vars$P.inputTransformY]: refs$1.inputTransformY,
+  [vars$P.inputTransition]: refs$1.inputTransition,
+  [vars$P.marginInlineStart]: refs$1.marginInlineStart,
+  [vars$P.placeholderOpacity]: refs$1.placeholderOpacity,
+  [vars$P.inputVerticalAlignment]: refs$1.inputVerticalAlignment,
+  [vars$P.valueInputHeight]: refs$1.valueInputHeight,
+  [vars$P.valueInputMarginBottom]: refs$1.valueInputMarginBottom,
   // error message icon
-  [vars$O.errorMessageIcon]: refs.errorMessageIcon,
-  [vars$O.errorMessageIconSize]: refs.errorMessageIconSize,
-  [vars$O.errorMessageIconPadding]: refs.errorMessageIconPadding,
-  [vars$O.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
-  [vars$O.errorMessageIconPosition]: refs.errorMessageIconPosition,
+  [vars$P.errorMessageIcon]: refs$1.errorMessageIcon,
+  [vars$P.errorMessageIconSize]: refs$1.errorMessageIconSize,
+  [vars$P.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+  [vars$P.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+  [vars$P.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
 };
 var emailField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: emailField,
-  vars: vars$O
+  vars: vars$P
 });
-const componentName$W = getComponentName$1('text-area');
+const componentName$X = getComponentName$1('text-area');
 const {
   host: host$l,
@@ -4039,10 +4163,10 @@ const TextAreaClass = compose$1(
     },
   }),
   draggableMixin$1,
-  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
+  composedProxyInputMixin$1({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin$1
 )(
-  createProxy({
+  createProxy$1({
     slots: [],
     wrappedEleName: 'vaadin-text-area',
     style: () => `
@@ -4062,70 +4186,70 @@ const TextAreaClass = compose$1(
 			${resetInputCursor('vaadin-text-area')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$W,
+    componentName: componentName$X,
   })
 );
-const vars$N = TextAreaClass.cssVarList;
+const vars$O = TextAreaClass.cssVarList;
 const textArea = {
-  [vars$N.hostWidth]: refs.width,
-  [vars$N.hostMinWidth]: refs.minWidth,
-  [vars$N.hostDirection]: refs.direction,
-  [vars$N.fontSize]: refs.fontSize,
-  [vars$N.fontFamily]: refs.fontFamily,
-  [vars$N.labelTextColor]: refs.labelTextColor,
-  [vars$N.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$N.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$N.inputBackgroundColor]: refs.backgroundColor,
-  [vars$N.inputValueTextColor]: refs.valueTextColor,
-  [vars$N.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$N.inputBorderRadius]: refs.borderRadius,
-  [vars$N.inputBorderWidth]: refs.borderWidth,
-  [vars$N.inputBorderStyle]: refs.borderStyle,
-  [vars$N.inputBorderColor]: refs.borderColor,
-  [vars$N.inputOutlineWidth]: refs.outlineWidth,
-  [vars$N.inputOutlineStyle]: refs.outlineStyle,
-  [vars$N.inputOutlineColor]: refs.outlineColor,
-  [vars$N.inputOutlineOffset]: refs.outlineOffset,
-  [vars$N.inputResizeType]: 'vertical',
-  [vars$N.inputMinHeight]: '5em',
+  [vars$O.hostWidth]: refs$1.width,
+  [vars$O.hostMinWidth]: refs$1.minWidth,
+  [vars$O.hostDirection]: refs$1.direction,
+  [vars$O.fontSize]: refs$1.fontSize,
+  [vars$O.fontFamily]: refs$1.fontFamily,
+  [vars$O.labelTextColor]: refs$1.labelTextColor,
+  [vars$O.labelRequiredIndicator]: refs$1.requiredIndicator,
+  [vars$O.errorMessageTextColor]: refs$1.errorMessageTextColor,
+  [vars$O.inputBackgroundColor]: refs$1.backgroundColor,
+  [vars$O.inputValueTextColor]: refs$1.valueTextColor,
+  [vars$O.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
+  [vars$O.inputBorderRadius]: refs$1.borderRadius,
+  [vars$O.inputBorderWidth]: refs$1.borderWidth,
+  [vars$O.inputBorderStyle]: refs$1.borderStyle,
+  [vars$O.inputBorderColor]: refs$1.borderColor,
+  [vars$O.inputOutlineWidth]: refs$1.outlineWidth,
+  [vars$O.inputOutlineStyle]: refs$1.outlineStyle,
+  [vars$O.inputOutlineColor]: refs$1.outlineColor,
+  [vars$O.inputOutlineOffset]: refs$1.outlineOffset,
+  [vars$O.inputResizeType]: 'vertical',
+  [vars$O.inputMinHeight]: '5em',
   // error message icon
-  [vars$N.errorMessageIcon]: refs.errorMessageIcon,
-  [vars$N.errorMessageIconSize]: refs.errorMessageIconSize,
-  [vars$N.errorMessageIconPadding]: refs.errorMessageIconPadding,
-  [vars$N.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
-  [vars$N.errorMessageIconPosition]: refs.errorMessageIconPosition,
+  [vars$O.errorMessageIcon]: refs$1.errorMessageIcon,
+  [vars$O.errorMessageIconSize]: refs$1.errorMessageIconSize,
+  [vars$O.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+  [vars$O.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+  [vars$O.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
   textAlign: {
-    right: { [vars$N.inputTextAlign]: 'right' },
-    left: { [vars$N.inputTextAlign]: 'left' },
-    center: { [vars$N.inputTextAlign]: 'center' },
+    right: { [vars$O.inputTextAlign]: 'right' },
+    left: { [vars$O.inputTextAlign]: 'left' },
+    center: { [vars$O.inputTextAlign]: 'center' },
   },
   _readonly: {
-    [vars$N.inputResizeType]: 'none',
+    [vars$O.inputResizeType]: 'none',
   },
 };
 var textArea$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: textArea,
-  vars: vars$N
+  vars: vars$O
 });
 const createBaseInputClass = (...args) =>
   compose$1(
-    inputValidationMixin,
+    inputValidationMixin$1,
     changeMixin,
     normalizeBooleanAttributesMixin$1,
     inputEventsDispatchingMixin
   )(createBaseClass$1(...args));
-const componentName$V = getComponentName$1('boolean-field-internal');
+const componentName$W = getComponentName$1('boolean-field-internal');
-createBaseInputClass({ componentName: componentName$V, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$W, baseSelector: 'div' });
 const booleanFieldMixin = (superclass) =>
   class BooleanFieldMixinClass extends superclass {
@@ -4134,14 +4258,14 @@ const booleanFieldMixin = (superclass) =>
       const template = document.createElement('template');
       template.innerHTML = `
-				<${componentName$V}
+				<${componentName$W}
 					tabindex="-1"
 					slot="input"
-				></${componentName$V}>
+				></${componentName$W}>
 			`;
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$V);
+      this.inputElement = this.shadowRoot.querySelector(componentName$W);
       this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
       forwardAttrs$1(this, this.inputElement, {
@@ -4156,8 +4280,8 @@ const booleanFieldMixin = (superclass) =>
         ],
       });
-      forwardProps$1(this.inputElement, this, ['checked']);
-      syncAttrs(this, this.inputElement, { includeAttrs: ['checked'] });
+      forwardProps$3(this.inputElement, this, ['checked']);
+      syncAttrs$1(this, this.inputElement, { includeAttrs: ['checked'] });
     }
   };
@@ -4210,7 +4334,7 @@ descope-boolean-field-internal {
 }
 `;
-const componentName$U = getComponentName$1('checkbox');
+const componentName$V = getComponentName$1('checkbox');
 const {
   host: host$k,
@@ -4277,11 +4401,11 @@ const CheckboxClass = compose$1(
     },
   }),
   draggableMixin$1,
-  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
+  composedProxyInputMixin$1({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin$1,
   booleanFieldMixin
 )(
-  createProxy({
+  createProxy$1({
     slots: [],
     wrappedEleName: 'vaadin-text-field',
     style: () => `
@@ -4327,51 +4451,51 @@ const CheckboxClass = compose$1(
       }
     `,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$U,
+    componentName: componentName$V,
   })
 );
-const vars$M = CheckboxClass.cssVarList;
+const vars$N = CheckboxClass.cssVarList;
 const checkboxSize = '1.35em';
 const checkbox = {
-  [vars$M.hostWidth]: refs.width,
-  [vars$M.hostDirection]: refs.direction,
-  [vars$M.fontSize]: refs.fontSize,
-  [vars$M.fontFamily]: refs.fontFamily,
-  [vars$M.labelTextColor]: refs.labelTextColor,
-  [vars$M.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$M.labelFontWeight]: '400',
-  [vars$M.labelLineHeight]: checkboxSize,
-  [vars$M.labelSpacing]: '1em',
-  [vars$M.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$M.inputOutlineWidth]: refs.outlineWidth,
-  [vars$M.inputOutlineOffset]: refs.outlineOffset,
-  [vars$M.inputOutlineColor]: refs.outlineColor,
-  [vars$M.inputOutlineStyle]: refs.outlineStyle,
-  [vars$M.inputBorderRadius]: refs.borderRadius,
-  [vars$M.inputBorderColor]: refs.borderColor,
-  [vars$M.inputBorderWidth]: refs.borderWidth,
-  [vars$M.inputBorderStyle]: refs.borderStyle,
-  [vars$M.inputBackgroundColor]: refs.backgroundColor,
-  [vars$M.inputSize]: checkboxSize,
-  [vars$M.inputValueTextColor]: refs.valueTextColor,
+  [vars$N.hostWidth]: refs$1.width,
+  [vars$N.hostDirection]: refs$1.direction,
+  [vars$N.fontSize]: refs$1.fontSize,
+  [vars$N.fontFamily]: refs$1.fontFamily,
+  [vars$N.labelTextColor]: refs$1.labelTextColor,
+  [vars$N.labelRequiredIndicator]: refs$1.requiredIndicator,
+  [vars$N.labelFontWeight]: '400',
+  [vars$N.labelLineHeight]: checkboxSize,
+  [vars$N.labelSpacing]: '1em',
+  [vars$N.errorMessageTextColor]: refs$1.errorMessageTextColor,
+  [vars$N.inputOutlineWidth]: refs$1.outlineWidth,
+  [vars$N.inputOutlineOffset]: refs$1.outlineOffset,
+  [vars$N.inputOutlineColor]: refs$1.outlineColor,
+  [vars$N.inputOutlineStyle]: refs$1.outlineStyle,
+  [vars$N.inputBorderRadius]: refs$1.borderRadius,
+  [vars$N.inputBorderColor]: refs$1.borderColor,
+  [vars$N.inputBorderWidth]: refs$1.borderWidth,
+  [vars$N.inputBorderStyle]: refs$1.borderStyle,
+  [vars$N.inputBackgroundColor]: refs$1.backgroundColor,
+  [vars$N.inputSize]: checkboxSize,
+  [vars$N.inputValueTextColor]: refs$1.valueTextColor,
   // error message icon
-  [vars$M.errorMessageIcon]: refs.errorMessageIcon,
-  [vars$M.errorMessageIconSize]: refs.errorMessageIconSize,
-  [vars$M.errorMessageIconPadding]: refs.errorMessageIconPadding,
-  [vars$M.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
-  [vars$M.errorMessageIconPosition]: refs.errorMessageIconPosition,
+  [vars$N.errorMessageIcon]: refs$1.errorMessageIcon,
+  [vars$N.errorMessageIconSize]: refs$1.errorMessageIconSize,
+  [vars$N.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+  [vars$N.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+  [vars$N.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
 };
 var checkbox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: checkbox,
-  vars: vars$M
+  vars: vars$N
 });
-const componentName$T = getComponentName$1('switch-toggle');
+const componentName$U = getComponentName$1('switch-toggle');
 const {
   host: host$j,
@@ -4445,11 +4569,11 @@ const SwitchToggleClass = compose$1(
     },
   }),
   draggableMixin$1,
-  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
+  composedProxyInputMixin$1({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin$1,
   booleanFieldMixin
 )(
-  createProxy({
+  createProxy$1({
     slots: [],
     wrappedEleName: 'vaadin-text-field',
     style: () => `
@@ -4509,89 +4633,89 @@ const SwitchToggleClass = compose$1(
 			}
 		`,
     excludeAttrsSync: ['label', 'tabindex'],
-    componentName: componentName$T,
+    componentName: componentName$U,
   })
 );
 const knobMargin = '2px';
 const checkboxHeight = '1.25em';
-const globalRefs$v = getThemeRefs(globals$1);
-const vars$L = SwitchToggleClass.cssVarList;
+const globalRefs$w = getThemeRefs(globals$1);
+const vars$M = SwitchToggleClass.cssVarList;
 const switchToggle = {
-  [vars$L.hostWidth]: refs.width,
-  [vars$L.hostDirection]: refs.direction,
-  [vars$L.fontSize]: refs.fontSize,
-  [vars$L.fontFamily]: refs.fontFamily,
-  [vars$L.inputOutlineWidth]: refs.outlineWidth,
-  [vars$L.inputOutlineOffset]: refs.outlineOffset,
-  [vars$L.inputOutlineColor]: refs.outlineColor,
-  [vars$L.inputOutlineStyle]: refs.outlineStyle,
-  [vars$L.trackBorderStyle]: refs.borderStyle,
-  [vars$L.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
-  [vars$L.trackBorderColor]: refs.borderColor,
-  [vars$L.trackBackgroundColor]: refs.backgroundColor,
-  [vars$L.trackBorderRadius]: globalRefs$v.radius.md,
-  [vars$L.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
-  [vars$L.trackHeight]: checkboxHeight,
-  [vars$L.knobSize]: `calc(1em - ${knobMargin})`,
-  [vars$L.knobRadius]: '50%',
-  [vars$L.knobTopOffset]: '1px',
-  [vars$L.knobLeftOffset]: knobMargin,
-  [vars$L.knobColor]: refs.labelTextColor,
-  [vars$L.knobTransitionDuration]: '0.3s',
-  [vars$L.labelTextColor]: refs.labelTextColor,
-  [vars$L.labelFontWeight]: '400',
-  [vars$L.labelLineHeight]: '1.35em',
-  [vars$L.labelSpacing]: '1em',
-  [vars$L.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$L.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$M.hostWidth]: refs$1.width,
+  [vars$M.hostDirection]: refs$1.direction,
+  [vars$M.fontSize]: refs$1.fontSize,
+  [vars$M.fontFamily]: refs$1.fontFamily,
+  [vars$M.inputOutlineWidth]: refs$1.outlineWidth,
+  [vars$M.inputOutlineOffset]: refs$1.outlineOffset,
+  [vars$M.inputOutlineColor]: refs$1.outlineColor,
+  [vars$M.inputOutlineStyle]: refs$1.outlineStyle,
+  [vars$M.trackBorderStyle]: refs$1.borderStyle,
+  [vars$M.trackBorderWidth]: refs$1.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
+  [vars$M.trackBorderColor]: refs$1.borderColor,
+  [vars$M.trackBackgroundColor]: refs$1.backgroundColor,
+  [vars$M.trackBorderRadius]: globalRefs$w.radius.md,
+  [vars$M.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
+  [vars$M.trackHeight]: checkboxHeight,
+  [vars$M.knobSize]: `calc(1em - ${knobMargin})`,
+  [vars$M.knobRadius]: '50%',
+  [vars$M.knobTopOffset]: '1px',
+  [vars$M.knobLeftOffset]: knobMargin,
+  [vars$M.knobColor]: refs$1.labelTextColor,
+  [vars$M.knobTransitionDuration]: '0.3s',
+  [vars$M.labelTextColor]: refs$1.labelTextColor,
+  [vars$M.labelFontWeight]: '400',
+  [vars$M.labelLineHeight]: '1.35em',
+  [vars$M.labelSpacing]: '1em',
+  [vars$M.labelRequiredIndicator]: refs$1.requiredIndicator,
+  [vars$M.errorMessageTextColor]: refs$1.errorMessageTextColor,
   // error message icon
-  [vars$L.errorMessageIcon]: refs.errorMessageIcon,
-  [vars$L.errorMessageIconSize]: refs.errorMessageIconSize,
-  [vars$L.errorMessageIconPadding]: refs.errorMessageIconPadding,
-  [vars$L.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
-  [vars$L.errorMessageIconPosition]: refs.errorMessageIconPosition,
+  [vars$M.errorMessageIcon]: refs$1.errorMessageIcon,
+  [vars$M.errorMessageIconSize]: refs$1.errorMessageIconSize,
+  [vars$M.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+  [vars$M.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+  [vars$M.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
   _checked: {
-    [vars$L.trackBorderColor]: refs.borderColor,
-    [vars$L.knobLeftOffset]: `calc(100% - var(${vars$L.knobSize}) - ${knobMargin})`,
-    [vars$L.knobColor]: refs.valueTextColor,
-    [vars$L.knobTextColor]: refs.valueTextColor,
+    [vars$M.trackBorderColor]: refs$1.borderColor,
+    [vars$M.knobLeftOffset]: `calc(100% - var(${vars$M.knobSize}) - ${knobMargin})`,
+    [vars$M.knobColor]: refs$1.valueTextColor,
+    [vars$M.knobTextColor]: refs$1.valueTextColor,
   },
   _disabled: {
-    [vars$L.knobColor]: globalRefs$v.colors.surface.light,
-    [vars$L.trackBorderColor]: globalRefs$v.colors.surface.light,
-    [vars$L.trackBackgroundColor]: globalRefs$v.colors.surface.main,
-    [vars$L.labelTextColor]: refs.labelTextColor,
+    [vars$M.knobColor]: globalRefs$w.colors.surface.light,
+    [vars$M.trackBorderColor]: globalRefs$w.colors.surface.light,
+    [vars$M.trackBackgroundColor]: globalRefs$w.colors.surface.main,
+    [vars$M.labelTextColor]: refs$1.labelTextColor,
     _checked: {
-      [vars$L.knobColor]: globalRefs$v.colors.surface.light,
-      [vars$L.trackBackgroundColor]: globalRefs$v.colors.surface.main,
+      [vars$M.knobColor]: globalRefs$w.colors.surface.light,
+      [vars$M.trackBackgroundColor]: globalRefs$w.colors.surface.main,
     },
   },
   _invalid: {
-    [vars$L.trackBorderColor]: globalRefs$v.colors.error.main,
-    [vars$L.knobColor]: globalRefs$v.colors.error.main,
+    [vars$M.trackBorderColor]: globalRefs$w.colors.error.main,
+    [vars$M.knobColor]: globalRefs$w.colors.error.main,
   },
 };
 var switchToggle$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: switchToggle,
-  vars: vars$L
+  vars: vars$M
 });
-const componentName$S = getComponentName$1('container');
+const componentName$T = getComponentName$1('container');
-class RawContainer extends createBaseClass$1({ componentName: componentName$S, baseSelector: 'slot' }) {
+class RawContainer extends createBaseClass$1({ componentName: componentName$T, baseSelector: 'slot' }) {
   constructor() {
     super();
@@ -4650,7 +4774,7 @@ const ContainerClass = compose$1(
   componentNameValidationMixin$1
 )(RawContainer);
-const globalRefs$u = getThemeRefs(globals$1);
+const globalRefs$v = getThemeRefs(globals$1);
 const compVars$5 = ContainerClass.cssVarList;
@@ -4672,7 +4796,7 @@ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars(
     horizontalAlignment,
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$S
+  componentName$T
 );
 const { shadowColor: shadowColor$3 } = helperRefs$3;
@@ -4684,7 +4808,7 @@ const container = {
   [compVars$5.hostWidth]: '100%',
   [compVars$5.boxShadow]: 'none',
-  [compVars$5.backgroundColor]: globalRefs$u.colors.surface.main,
+  [compVars$5.backgroundColor]: globalRefs$v.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',
@@ -4692,9 +4816,9 @@ const container = {
   [compVars$5.backgroundSize]: 'cover',
   [compVars$5.backgroundRepeat]: 'no-repeat',
-  [compVars$5.color]: globalRefs$u.colors.surface.contrast,
+  [compVars$5.color]: globalRefs$v.colors.surface.contrast,
   [compVars$5.borderRadius]: '0px',
-  [compVars$5.hostDirection]: globalRefs$u.direction,
+  [compVars$5.hostDirection]: globalRefs$v.direction,
   verticalPadding: {
     sm: { [compVars$5.verticalPadding]: '5px' },
@@ -4740,34 +4864,34 @@ const container = {
   shadow: {
     sm: {
-      [compVars$5.boxShadow]: `${globalRefs$u.shadow.wide.sm} ${shadowColor$3}, ${globalRefs$u.shadow.narrow.sm} ${shadowColor$3}`,
+      [compVars$5.boxShadow]: `${globalRefs$v.shadow.wide.sm} ${shadowColor$3}, ${globalRefs$v.shadow.narrow.sm} ${shadowColor$3}`,
     },
     md: {
-      [compVars$5.boxShadow]: `${globalRefs$u.shadow.wide.md} ${shadowColor$3}, ${globalRefs$u.shadow.narrow.md} ${shadowColor$3}`,
+      [compVars$5.boxShadow]: `${globalRefs$v.shadow.wide.md} ${shadowColor$3}, ${globalRefs$v.shadow.narrow.md} ${shadowColor$3}`,
     },
     lg: {
-      [compVars$5.boxShadow]: `${globalRefs$u.shadow.wide.lg} ${shadowColor$3}, ${globalRefs$u.shadow.narrow.lg} ${shadowColor$3}`,
+      [compVars$5.boxShadow]: `${globalRefs$v.shadow.wide.lg} ${shadowColor$3}, ${globalRefs$v.shadow.narrow.lg} ${shadowColor$3}`,
     },
     xl: {
-      [compVars$5.boxShadow]: `${globalRefs$u.shadow.wide.xl} ${shadowColor$3}, ${globalRefs$u.shadow.narrow.xl} ${shadowColor$3}`,
+      [compVars$5.boxShadow]: `${globalRefs$v.shadow.wide.xl} ${shadowColor$3}, ${globalRefs$v.shadow.narrow.xl} ${shadowColor$3}`,
     },
     '2xl': {
       [helperVars$3.shadowColor]: '#00000050', // mimic daisyUI shadow settings
-      [compVars$5.boxShadow]: `${globalRefs$u.shadow.wide['2xl']} ${shadowColor$3}`,
+      [compVars$5.boxShadow]: `${globalRefs$v.shadow.wide['2xl']} ${shadowColor$3}`,
     },
   },
   borderRadius: {
-    sm: { [compVars$5.borderRadius]: globalRefs$u.radius.sm },
-    md: { [compVars$5.borderRadius]: globalRefs$u.radius.md },
-    lg: { [compVars$5.borderRadius]: globalRefs$u.radius.lg },
-    xl: { [compVars$5.borderRadius]: globalRefs$u.radius.xl },
-    '2xl': { [compVars$5.borderRadius]: globalRefs$u.radius['2xl'] },
-    '3xl': { [compVars$5.borderRadius]: globalRefs$u.radius['3xl'] },
+    sm: { [compVars$5.borderRadius]: globalRefs$v.radius.sm },
+    md: { [compVars$5.borderRadius]: globalRefs$v.radius.md },
+    lg: { [compVars$5.borderRadius]: globalRefs$v.radius.lg },
+    xl: { [compVars$5.borderRadius]: globalRefs$v.radius.xl },
+    '2xl': { [compVars$5.borderRadius]: globalRefs$v.radius['2xl'] },
+    '3xl': { [compVars$5.borderRadius]: globalRefs$v.radius['3xl'] },
   },
 };
-const vars$K = {
+const vars$L = {
   ...compVars$5,
   ...helperVars$3,
 };
@@ -4775,7 +4899,7 @@ const vars$K = {
 var container$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: container,
-  vars: vars$K
+  vars: vars$L
 });
 const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
@@ -4828,64 +4952,64 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   return CssVarImageClass;
 };
-const componentName$R = getComponentName$1('logo');
+const componentName$S = getComponentName$1('logo');
 const LogoClass = createCssVarImageClass({
-  componentName: componentName$R,
+  componentName: componentName$S,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
-const vars$J = LogoClass.cssVarList;
+const vars$K = LogoClass.cssVarList;
 const logo$2 = {
-  [vars$J.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
+  [vars$K.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
 };
 var logo$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo$2,
-  vars: vars$J
+  vars: vars$K
 });
-const componentName$Q = getComponentName$1('totp-image');
+const componentName$R = getComponentName$1('totp-image');
 const TotpImageClass = createCssVarImageClass({
-  componentName: componentName$Q,
+  componentName: componentName$R,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
-const vars$I = TotpImageClass.cssVarList;
+const vars$J = TotpImageClass.cssVarList;
 const logo$1 = {
-  [vars$I.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
+  [vars$J.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
 };
 var totpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo$1,
-  vars: vars$I
+  vars: vars$J
 });
-const componentName$P = getComponentName$1('notp-image');
+const componentName$Q = getComponentName$1('notp-image');
 const NotpImageClass = createCssVarImageClass({
-  componentName: componentName$P,
+  componentName: componentName$Q,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
-const vars$H = NotpImageClass.cssVarList;
+const vars$I = NotpImageClass.cssVarList;
 const logo = {
-  [vars$H.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
+  [vars$I.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
 };
 var notpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: logo,
-  vars: vars$H
+  vars: vars$I
 });
 const direction = 'ltr';
@@ -5465,6 +5589,8 @@ const booleanAttributesList = [
   'opening',
   'closing',
   'has-no-options',
+  'loading',
+  'allow-custom-value',
 ];
 const isBooleanAttribute = (attr) => {
@@ -5541,30 +5667,648 @@ const createBaseClass = ({ componentName, baseSelector = '' }) => {
       return this.getAttribute('name');
     }
-    connectedCallback() {
-      super.connectedCallback?.();
+    connectedCallback() {
+      super.connectedCallback?.();
+      if (this.rootElement.isConnected) {
+        // the init function is running once, on the first time the component is connected
+        if (this.#isInit) {
+          this.#isInit = false;
+          this.init?.();
+        }
+      }
+    }
+  }
+  return compose(
+    componentNameValidationMixin,
+    hoverableMixin,
+    normalizeBooleanAttributesMixin,
+    componentsContextMixin
+  )(DescopeBaseClass);
+};
+// create a dispatch event function that also calls to the onevent function in case  it's set
+// usage example:
+// #dispatchSomething = createDispatchEvent.bind(this, 'something' { ...options })
+// this will dispatch a new event when called, but also call to "onsomething"
+function createDispatchEvent(eventName, options = {}) {
+  const event = new Event(eventName, options);
+  this[`on${eventName}`]?.(event); // in case we got an event callback as property
+  this.dispatchEvent(event);
+}
+const observedAttributes$4 = ['required', 'pattern'];
+const errorAttributes = {
+  valueMissing: 'data-errormessage-value-missing',
+  patternMismatch: 'data-errormessage-pattern-mismatch',
+  tooShort: 'data-errormessage-pattern-mismatch-too-short',
+  tooLong: 'data-errormessage-pattern-mismatch-too-long',
+  rangeUnderflow: 'data-errormessage-pattern-range-underflow',
+  rangeOverflow: 'data-errormessage-pattern-range-overflow',
+  typeMismatch: 'data-errormessage-type-mismatch',
+};
+const validationTargetSymbol = Symbol('validationTarget');
+const inputValidationMixin = (superclass) =>
+  class InputValidationMixinClass extends superclass {
+    #validationTarget = validationTargetSymbol;
+    static get observedAttributes() {
+      return [...(superclass.observedAttributes || []), ...observedAttributes$4];
+    }
+    static get formAssociated() {
+      return true;
+    }
+    #internals;
+    get internals() {
+      return this.#internals;
+    }
+    set internals(value) {
+      this.#internals = value;
+    }
+    constructor() {
+      super();
+      this.#internals = this.attachInternals();
+    }
+    // eslint-disable-next-line class-methods-use-this
+    get defaultErrorMsgValueMissing() {
+      return 'Please fill out this field.';
+    }
+    // eslint-disable-next-line class-methods-use-this
+    get defaultErrorMsgPatternMismatch() {
+      return 'Please match the requested format.';
+    }
+    get defaultErrorMsgTooShort() {
+      return `Minimum length is ${this.getAttribute('minlength')}.`;
+    }
+    get defaultErrorMsgTooLong() {
+      return `Maximum length is ${this.getAttribute('maxlength')}.  `;
+    }
+    get defaultErrorMsgRangeUnderflow() {
+      return `At least ${this.getAttribute('min-items-selection')} items are required.`;
+    }
+    get defaultErrorMsgRangeOverflow() {
+      return `At most ${this.getAttribute('max-items-selection')} items are allowed.`;
+    }
+    // eslint-disable-next-line class-methods-use-this
+    get defaultErrorMsgTypeMismatch() {
+      return `Please match the requested type.`;
+    }
+    getErrorMessage(flags) {
+      const {
+        valueMissing,
+        patternMismatch,
+        typeMismatch,
+        stepMismatch,
+        tooShort,
+        tooLong,
+        rangeOverflow,
+        rangeUnderflow,
+        badInput,
+        customError,
+      } = flags;
+      switch (true) {
+        case valueMissing:
+          return (
+            this.getAttribute(errorAttributes.valueMissing) || this.defaultErrorMsgValueMissing
+          );
+        case patternMismatch || stepMismatch || badInput:
+          return (
+            this.getAttribute(errorAttributes.patternMismatch) ||
+            this.defaultErrorMsgPatternMismatch
+          );
+        case typeMismatch:
+          return (
+            this.getAttribute(errorAttributes.typeMismatch) ||
+            this.getAttribute(errorAttributes.patternMismatch) ||
+            this.defaultErrorMsgTypeMismatch
+          );
+        case tooShort:
+          return this.getAttribute(errorAttributes.tooShort) || this.defaultErrorMsgTooShort;
+        case tooLong:
+          return this.getAttribute(errorAttributes.tooLong) || this.defaultErrorMsgTooLong;
+        case rangeUnderflow:
+          return (
+            this.getAttribute(errorAttributes.rangeUnderflow) || this.defaultErrorMsgRangeUnderflow
+          );
+        case rangeOverflow:
+          return (
+            this.getAttribute(errorAttributes.rangeOverflow) || this.defaultErrorMsgRangeOverflow
+          );
+        case customError:
+          return this.validationMessage;
+        default:
+          return '';
+      }
+    }
+    #setValidity() {
+      const validity = this.isReadOnly ? {} : this.getValidity();
+      this.#internals.setValidity(validity, this.getErrorMessage(validity), this.validationTarget);
+    }
+    get validationMessage() {
+      return this.#internals.validationMessage;
+    }
+    // eslint-disable-next-line class-methods-use-this
+    getValidity() {
+      // eslint-disable-next-line no-console
+      console.warn('getValidity', 'is not implemented');
+    }
+    checkValidity() {
+      return this.#internals.validity.valid;
+    }
+    reportValidity() {
+      return this.#internals.reportValidity();
+    }
+    get validity() {
+      return this.#internals.validity;
+    }
+    get validationTarget() {
+      return this.#validationTarget === validationTargetSymbol
+        ? this.inputElement
+        : this.#validationTarget;
+    }
+    set validationTarget(val) {
+      this.#validationTarget = val;
+    }
+    setCustomValidity(errorMessage) {
+      if (errorMessage) {
+        this.#internals.setValidity({ customError: true }, errorMessage, this.validationTarget);
+      } else {
+        this.#internals.setValidity({});
+        this.#setValidity();
+      }
+    }
+    get isRequired() {
+      return this.hasAttribute('required') && this.getAttribute('required') !== 'false';
+    }
+    get isReadOnly() {
+      return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false';
+    }
+    get isDisabled() {
+      return this.hasAttribute('disabled') && this.getAttribute('disabled') !== 'false';
+    }
+    get pattern() {
+      return this.getAttribute('pattern');
+    }
+    get form() {
+      return this.#internals.form;
+    }
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      super.attributeChangedCallback?.(attrName, oldValue, newValue);
+      if (observedAttributes$4.includes(attrName)) {
+        this.#setValidity();
+      }
+    }
+    init() {
+      super.init?.();
+      this.addEventListener('change', this.#setValidity);
+      this.addEventListener('invalid', (e) => e.stopPropagation());
+      this.addEventListener('input', this.#setValidity);
+      // The attribute sync takes time, so getValidity returns valid,
+      // even when it shouldn't. This way allows all attributes to sync
+      // after render, before checking the validity.
+      setTimeout(() => this.#setValidity());
+    }
+  };
+const createProxy = ({
+  componentName,
+  wrappedEleName,
+  slots = [],
+  style,
+  excludeAttrsSync = [],
+  includeAttrsSync = [],
+  includeForwardProps = [],
+  delegatesFocus = true,
+}) => {
+  class ProxyClass extends createBaseClass({ componentName, baseSelector: wrappedEleName }) {
+    #dispatchBlur = createDispatchEvent.bind(this, 'blur');
+    #dispatchFocus = createDispatchEvent.bind(this, 'focus');
+    constructor() {
+      super().attachShadow({ mode: 'open', delegatesFocus }).innerHTML = `
+			<style id="create-proxy">${(isFunction(style) ? style() : style) || ''}</style>
+			<${wrappedEleName}>
+			${slots
+        .map(
+          (
+            slot // when slot is an empty string, we will create the default slot (without a name)
+          ) => `<slot ${slot ? `name="${slot}" slot="${slot}"` : ''}></slot>`
+        )
+        .join('')}
+			</${wrappedEleName}>
+		`;
+    }
+    init() {
+      super.init?.();
+      this.baseElement.addEventListener('blur', (_) => {
+        this.#dispatchBlur();
+      });
+      this.baseElement.addEventListener('focus', (_) => {
+        this.#dispatchFocus();
+      });
+      // this is needed for components that uses props, such as combo box
+      forwardProps$2(this.baseElement, this, includeForwardProps);
+      syncAttrs(this.baseElement, this, {
+        excludeAttrs: excludeAttrsSync,
+        includeAttrs: includeAttrsSync,
+      });
+    }
+  }
+  return ProxyClass;
+};
+/* eslint-disable no-param-reassign */
+const errorAttrs = ['invalid', 'required'];
+const forwardProps = (src, targets, property) => {
+  const targetArr = Array.isArray(targets) ? targets : [targets];
+  Object.defineProperty(src, property, {
+    set(v) {
+      targetArr.forEach((target) => {
+        target[property] = v;
+      });
+    },
+    get() {
+      return targets[0][property];
+    },
+    configurable: true,
+  });
+};
+// recursively take the first slot child until it finds an element which is not a slot
+// stops after "nestingLevel" times
+const getNestedInput = (ele) => {
+  if (!ele) return undefined;
+  const nestingLevel = 10;
+  let nonSlotEle = ele;
+  for (let i = 0; i < nestingLevel; i++) {
+    [nonSlotEle] = nonSlotEle.assignedElements();
+    if (nonSlotEle?.localName !== 'slot') return nonSlotEle;
+  }
+  return undefined;
+};
+const proxyInputMixin =
+  ({
+    proxyProps = [],
+    // useProxyTargets flag allows to forwardProps to other targets, other than
+    // `this.inputElement`. It's to be used within `external-input` components,
+    // if needed
+    useProxyTargets = false,
+    // allows us to set the event that should trigger validation
+    // it can be either a string or an array of strings (for multiple events)
+    inputEvent = 'input',
+    triggerValidationEvents = [],
+    // Proxies all validations from the parent component to the input element
+    proxyParentValidation = false,
+  }) =>
+  (superclass) =>
+    class ProxyInputMixinClass extends inputValidationMixin(superclass) {
+      static get observedAttributes() {
+        return [...(superclass.observedAttributes || []), ...errorAttrs];
+      }
+      #inputElement;
+      #dispatchChange = createDispatchEvent.bind(this, 'change');
+      constructor() {
+        super();
+        this.#inputElement = super.inputElement;
+      }
+      // the web-component does not loaded immediately, so we want to defer the warning
+      // and show it only if the input element was not found after the component is loaded
+      warnIfInputElementIsMissing() {
+        clearTimeout(this.inputElementTimerId);
+        this.inputElementTimerId = setTimeout(() => {
+          // eslint-disable-next-line no-console
+          !this.#inputElement && console.warn(this.localName, 'no input was found');
+        }, 0);
+      }
+      get inputElement() {
+        if (this.#inputElement) return this.#inputElement;
+        this.warnIfInputElementIsMissing();
+        const inputSlot = this.baseElement.shadowRoot?.querySelector('slot[name="input"]');
+        const textAreaSlot = this.baseElement.shadowRoot?.querySelector('slot[name="textarea"]');
+        this.#inputElement = getNestedInput(inputSlot) || getNestedInput(textAreaSlot);
+        return this.#inputElement;
+      }
+      set inputElement(ele) {
+        this.#inputElement = ele;
+      }
+      getValidity() {
+        return this.inputElement?.validity || {};
+      }
+      #handleErrorMessage() {
+        this.setAttribute('error-message', this.validationMessage);
+      }
+      // We do not want to show the default validity report tooltip
+      // So we are overriding the reportValidity fn to show the input's error message
+      reportValidity = () => {
+        // we want to update validity so in case the value was set programmatically, we won't get an error
+        this.inputElement.setCustomValidity('');
+        this.setCustomValidity('');
+        if (!this.checkValidity()) {
+          this.setAttribute('invalid', 'true');
+          this.#handleErrorMessage();
+          this.focus();
+        }
+      };
+      // we are keeping also the default reportValidity because there are some components that still using it
+      defaultReportValidity() {
+        return super.reportValidity();
+      }
+      init() {
+        super.init?.();
+        // vaadin sets invalid indication on blur
+        // we want invalid indication to appear only when calling reportValidity
+        // this is why we are overriding vaadin's setInvalid behavior
+        // to update only when the element is valid (so invalid indication will only be removed)
+        // and we are adding it in reportValidity
+        // eslint-disable-next-line func-names
+        this.baseElement._setInvalid = function (invalid) {
+          if (!invalid && this._shouldSetInvalid(invalid)) {
+            this.invalid = invalid;
+          }
+        };
+        // We want to ensure that `input` events properly cross ShadowDOM boundries
+        // e.g. When we autofill a component's input with 1Password, for instance,
+        // the event is fired without `composed: true` and doesn't our component's
+        // ShadowDOM.
+        this.baseElement.addEventListener('input', (e) => {
+          if (!e.composed) {
+            this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+          }
+        });
+        triggerValidationEvents.forEach((e) => {
+          this.baseElement?.addEventListener(e, () => {
+            this.inputElement?.setCustomValidity('');
+          });
+        });
+        // on some cases the base element is not ready so the inputElement is empty
+        // we are deferring this section to make sure the base element is ready
+        setTimeout(() => {
+          const validationEvents = Array.isArray(inputEvent) ? inputEvent : [inputEvent];
+          validationEvents.forEach((e) => {
+            this.baseElement?.addEventListener(e, () => {
+              if (!this.baseElement.checkValidity()) {
+                this.#handleErrorMessage();
+              } else {
+                this.removeAttribute('invalid');
+              }
+            });
+          });
+          this.baseElement.addEventListener('change', () => {
+            this.#dispatchChange();
+          });
+          this.addEventListener('invalid', () => {
+            if (!this.checkValidity()) {
+              this.setAttribute('invalid', 'true');
+            }
+            this.#handleErrorMessage();
+          });
+          // sync properties
+          proxyProps.forEach((prop) => {
+            const externalInput = this.querySelector('input[slot="external-input"]') || null;
+            const proxyTargets = useProxyTargets
+              ? [this.baseElement, externalInput].filter(Boolean)
+              : [];
+            forwardProps(this, [this.inputElement, ...proxyTargets], prop);
+          });
+          this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
+          forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] });
+        });
+        if (proxyParentValidation) {
+          // All functions called on the inputElement internals will be applied to the parent
+          // component internals as well. As a result, there's no need to add outer mechanisms
+          // to update the parent component's validity state based on the input elements validity.
+          const inputElementInternals = this.inputElement.internals;
+          const parentThis = this;
+          this.inputElement.internals = new Proxy(inputElementInternals, {
+            get: (target, prop) => {
+              if (typeof target[prop] === 'function' && prop === 'setValidity') {
+                return (...args) => {
+                  // If we're calling setValidity with 3 args, then the validationTarget
+                  // needs to be swapped to be the inputElement
+                  if (args.length === 3) {
+                    const newArgs = args.slice(0, args.length - 1);
+                    newArgs.push(parentThis.inputElement);
+                    parentThis.internals[prop](...newArgs);
+                  } else {
+                    parentThis.internals[prop](...args);
+                  }
+                  return target[prop](...args);
+                };
+              }
+              if (typeof target[prop] === 'function') {
+                return (...args) => {
+                  parentThis.internals[prop](...args);
+                  return target[prop](...args);
+                };
+              }
+              return target[prop];
+            },
+          });
+        }
+      }
+    };
+const composedProxyInputMixin = (proxyInputMixinConfig) =>
+  compose(
+    proxyInputMixin(proxyInputMixinConfig),
+    // in order to use input-wrapper across all our input components, we need to inject its theme
+    // to every proxy input mixin, to allow its css vars to be scoped properly and accessible
+    // in the proxy input component
+    createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') })
+  );
+// this is needed because we might generate the same css vars names
+// e.g. "overlayColor" attribute in style mixin's mapping,
+// will generate the same var as "color" attribute in portals's mapping
+// when the portal name is "overlay".
+// because of that, we are adding this separator that is also used as a differentiator
+const DISPLAY_NAME_SEPARATOR = '_';
+const PORTAL_THEME_PREFIX = '@';
+const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
+const withWaitForShadowRoot = (getRootElementFn) => async (that) => {
+  const ele = await getRootElementFn(that);
+  return new Promise((res) => {
+    const MAX_RETRIES = 20;
+    let counter = 0;
+    const check = () => {
+      if (counter > MAX_RETRIES) {
+        // eslint-disable-next-line no-console
+        console.error('could not get shadow root for element', ele);
+        res(ele);
+        return;
+      }
+      counter++;
+      if (!ele?.shadowRoot) {
+        setTimeout(check);
+      } else {
+        res(ele.shadowRoot);
+      }
+    };
+    check();
+  });
+};
+const portalMixin =
+  ({ name, selector, mappings = {}, forward: { attributes = [], include = true } = {} }) =>
+  (superclass) => {
+    const eleDisplayName = name || sanitizeSelector(selector);
+    const BaseClass = createStyleMixin({
+      mappings,
+    })(superclass);
+    return class PortalMixinClass extends BaseClass {
+      static get cssVarList() {
+        return {
+          ...BaseClass.cssVarList,
+          [eleDisplayName]: createCssVarsList(
+            kebabCaseJoin(superclass.componentName, DISPLAY_NAME_SEPARATOR + eleDisplayName),
+            mappings
+          ),
+        };
+      }
+      #portalEle;
+      constructor() {
+        // we cannot use "this" before calling "super"
+        const getRootElement = async (that) => {
+          const baseEle = (that.shadowRoot || that).querySelector(that.baseSelector);
+          if (!selector) {
+            return baseEle;
+          }
+          // in case we have a selector, we should first wait for the base element shadow root
+          //  and then look for the internal element
+          const baseEleShadowRoot = await withWaitForShadowRoot(() => baseEle)(that);
+          return baseEleShadowRoot.querySelector(selector);
+        };
+        const getPortalElement = withWaitForShadowRoot(getRootElement);
+        super({
+          getRootElement: getPortalElement,
+          componentNameSuffix: DISPLAY_NAME_SEPARATOR + eleDisplayName,
+          themeSection: PORTAL_THEME_PREFIX + eleDisplayName,
+          baseSelector: ':host',
+        });
+        this.#portalEle = getPortalElement(this).then((ele) => ele.host);
+      }
-      if (this.rootElement.isConnected) {
-        // the init function is running once, on the first time the component is connected
-        if (this.#isInit) {
-          this.#isInit = false;
-          this.init?.();
-        }
+      async #handleHoverAttribute() {
+        const portalEle = await this.#portalEle;
+        portalEle.onmouseenter = (e) => {
+          e.target.setAttribute('hover', 'true');
+        };
+        portalEle.onmouseleave = (e) => {
+          e.target.removeAttribute('hover');
+        };
       }
-    }
-  }
-  return compose(
-    componentNameValidationMixin,
-    hoverableMixin,
-    normalizeBooleanAttributesMixin,
-    componentsContextMixin
-  )(DescopeBaseClass);
-};
+      async init() {
+        super.init?.();
+        const portalEle = await this.#portalEle;
+        forwardAttrs(this, portalEle, {
+          [include ? 'includeAttrs' : 'excludeAttrs']: attributes,
+        });
+        this.#handleHoverAttribute();
+      }
+    };
+  };
-const componentName$O = getComponentName('text');
+const componentName$P = getComponentName('text');
-class RawText extends createBaseClass({ componentName: componentName$O, baseSelector: ':host > slot' }) {
+class RawText extends createBaseClass({ componentName: componentName$P, baseSelector: ':host > slot' }) {
   constructor() {
     super();
@@ -5621,95 +6365,95 @@ const TextClass = compose(
   componentNameValidationMixin
 )(RawText);
-const globalRefs$t = getThemeRefs$1(globals);
-const vars$G = TextClass.cssVarList;
+const globalRefs$u = getThemeRefs$1(globals);
+const vars$H = TextClass.cssVarList;
 const text$2 = {
-  [vars$G.hostDirection]: globalRefs$t.direction,
-  [vars$G.textLineHeight]: '1.35em',
-  [vars$G.textAlign]: 'left',
-  [vars$G.textColor]: globalRefs$t.colors.surface.dark,
+  [vars$H.hostDirection]: globalRefs$u.direction,
+  [vars$H.textLineHeight]: '1.35em',
+  [vars$H.textAlign]: 'left',
+  [vars$H.textColor]: globalRefs$u.colors.surface.dark,
   variant: {
     h1: {
-      [vars$G.fontSize]: globalRefs$t.typography.h1.size,
-      [vars$G.fontWeight]: globalRefs$t.typography.h1.weight,
-      [vars$G.fontFamily]: globalRefs$t.typography.h1.font,
+      [vars$H.fontSize]: globalRefs$u.typography.h1.size,
+      [vars$H.fontWeight]: globalRefs$u.typography.h1.weight,
+      [vars$H.fontFamily]: globalRefs$u.typography.h1.font,
     },
     h2: {
-      [vars$G.fontSize]: globalRefs$t.typography.h2.size,
-      [vars$G.fontWeight]: globalRefs$t.typography.h2.weight,
-      [vars$G.fontFamily]: globalRefs$t.typography.h2.font,
+      [vars$H.fontSize]: globalRefs$u.typography.h2.size,
+      [vars$H.fontWeight]: globalRefs$u.typography.h2.weight,
+      [vars$H.fontFamily]: globalRefs$u.typography.h2.font,
     },
     h3: {
-      [vars$G.fontSize]: globalRefs$t.typography.h3.size,
-      [vars$G.fontWeight]: globalRefs$t.typography.h3.weight,
-      [vars$G.fontFamily]: globalRefs$t.typography.h3.font,
+      [vars$H.fontSize]: globalRefs$u.typography.h3.size,
+      [vars$H.fontWeight]: globalRefs$u.typography.h3.weight,
+      [vars$H.fontFamily]: globalRefs$u.typography.h3.font,
     },
     subtitle1: {
-      [vars$G.fontSize]: globalRefs$t.typography.subtitle1.size,
-      [vars$G.fontWeight]: globalRefs$t.typography.subtitle1.weight,
-      [vars$G.fontFamily]: globalRefs$t.typography.subtitle1.font,
+      [vars$H.fontSize]: globalRefs$u.typography.subtitle1.size,
+      [vars$H.fontWeight]: globalRefs$u.typography.subtitle1.weight,
+      [vars$H.fontFamily]: globalRefs$u.typography.subtitle1.font,
     },
     subtitle2: {
-      [vars$G.fontSize]: globalRefs$t.typography.subtitle2.size,
-      [vars$G.fontWeight]: globalRefs$t.typography.subtitle2.weight,
-      [vars$G.fontFamily]: globalRefs$t.typography.subtitle2.font,
+      [vars$H.fontSize]: globalRefs$u.typography.subtitle2.size,
+      [vars$H.fontWeight]: globalRefs$u.typography.subtitle2.weight,
+      [vars$H.fontFamily]: globalRefs$u.typography.subtitle2.font,
     },
     body1: {
-      [vars$G.fontSize]: globalRefs$t.typography.body1.size,
-      [vars$G.fontWeight]: globalRefs$t.typography.body1.weight,
-      [vars$G.fontFamily]: globalRefs$t.typography.body1.font,
+      [vars$H.fontSize]: globalRefs$u.typography.body1.size,
+      [vars$H.fontWeight]: globalRefs$u.typography.body1.weight,
+      [vars$H.fontFamily]: globalRefs$u.typography.body1.font,
     },
     body2: {
-      [vars$G.fontSize]: globalRefs$t.typography.body2.size,
-      [vars$G.fontWeight]: globalRefs$t.typography.body2.weight,
-      [vars$G.fontFamily]: globalRefs$t.typography.body2.font,
+      [vars$H.fontSize]: globalRefs$u.typography.body2.size,
+      [vars$H.fontWeight]: globalRefs$u.typography.body2.weight,
+      [vars$H.fontFamily]: globalRefs$u.typography.body2.font,
     },
   },
   mode: {
     primary: {
-      [vars$G.textColor]: globalRefs$t.colors.surface.contrast,
+      [vars$H.textColor]: globalRefs$u.colors.surface.contrast,
     },
     secondary: {
-      [vars$G.textColor]: globalRefs$t.colors.surface.dark,
+      [vars$H.textColor]: globalRefs$u.colors.surface.dark,
     },
     error: {
-      [vars$G.textColor]: globalRefs$t.colors.error.main,
+      [vars$H.textColor]: globalRefs$u.colors.error.main,
     },
     success: {
-      [vars$G.textColor]: globalRefs$t.colors.success.main,
+      [vars$H.textColor]: globalRefs$u.colors.success.main,
     },
   },
   textAlign: {
-    right: { [vars$G.textAlign]: 'right' },
-    left: { [vars$G.textAlign]: 'left' },
-    center: { [vars$G.textAlign]: 'center' },
+    right: { [vars$H.textAlign]: 'right' },
+    left: { [vars$H.textAlign]: 'left' },
+    center: { [vars$H.textAlign]: 'center' },
   },
   _fullWidth: {
-    [vars$G.hostWidth]: '100%',
+    [vars$H.hostWidth]: '100%',
   },
   _italic: {
-    [vars$G.fontStyle]: 'italic',
+    [vars$H.fontStyle]: 'italic',
   },
   _uppercase: {
-    [vars$G.textTransform]: 'uppercase',
+    [vars$H.textTransform]: 'uppercase',
   },
   _lowercase: {
-    [vars$G.textTransform]: 'lowercase',
+    [vars$H.textTransform]: 'lowercase',
   },
 };
 var text$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: text$2,
-  vars: vars$G
+  vars: vars$H
 });
 const disableRules = [
@@ -5736,9 +6480,9 @@ const decodeHTML = (html) => {
 /* eslint-disable no-param-reassign */
-const componentName$N = getComponentName$1('enriched-text');
+const componentName$O = getComponentName$1('enriched-text');
-class EnrichedText extends createBaseClass$1({ componentName: componentName$N, baseSelector: ':host > div' }) {
+class EnrichedText extends createBaseClass$1({ componentName: componentName$O, baseSelector: ':host > div' }) {
   #origLinkRenderer;
   #origEmRenderer;
@@ -5931,9 +6675,9 @@ const EnrichedTextClass = compose$1(
   componentNameValidationMixin$1
 )(EnrichedText);
-const componentName$M = getComponentName$1('link');
+const componentName$N = getComponentName$1('link');
-class RawLink extends createBaseClass$1({ componentName: componentName$M, baseSelector: ':host a' }) {
+class RawLink extends createBaseClass$1({ componentName: componentName$N, baseSelector: ':host a' }) {
   constructor() {
     super();
@@ -5997,32 +6741,32 @@ const LinkClass = compose$1(
   componentNameValidationMixin$1
 )(RawLink);
-const globalRefs$s = getThemeRefs(globals$1);
-const vars$F = LinkClass.cssVarList;
+const globalRefs$t = getThemeRefs(globals$1);
+const vars$G = LinkClass.cssVarList;
 const link$1 = {
-  [vars$F.hostDirection]: globalRefs$s.direction,
-  [vars$F.cursor]: 'pointer',
+  [vars$G.hostDirection]: globalRefs$t.direction,
+  [vars$G.cursor]: 'pointer',
-  [vars$F.textColor]: globalRefs$s.colors.primary.main,
+  [vars$G.textColor]: globalRefs$t.colors.primary.main,
   textAlign: {
-    right: { [vars$F.textAlign]: 'right' },
-    left: { [vars$F.textAlign]: 'left' },
-    center: { [vars$F.textAlign]: 'center' },
+    right: { [vars$G.textAlign]: 'right' },
+    left: { [vars$G.textAlign]: 'left' },
+    center: { [vars$G.textAlign]: 'center' },
   },
   _fullWidth: {
-    [vars$F.hostWidth]: '100%',
+    [vars$G.hostWidth]: '100%',
   },
   _hover: {
-    [vars$F.textDecoration]: 'underline',
+    [vars$G.textDecoration]: 'underline',
   },
   mode: {
     secondary: {
-      [vars$F.textColor]: globalRefs$s.colors.secondary.main,
+      [vars$G.textColor]: globalRefs$t.colors.secondary.main,
     },
   },
 };
@@ -6030,37 +6774,37 @@ const link$1 = {
 var link$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: link$1,
-  vars: vars$F
+  vars: vars$G
 });
-const globalRefs$r = getThemeRefs(globals$1);
-const vars$E = EnrichedTextClass.cssVarList;
+const globalRefs$s = getThemeRefs(globals$1);
+const vars$F = EnrichedTextClass.cssVarList;
 const enrichedText = {
-  [vars$E.hostDirection]: globalRefs$r.direction,
-  [vars$E.hostWidth]: useVar(vars$G.hostWidth),
+  [vars$F.hostDirection]: globalRefs$s.direction,
+  [vars$F.hostWidth]: useVar(vars$H.hostWidth),
-  [vars$E.textLineHeight]: useVar(vars$G.textLineHeight),
-  [vars$E.textColor]: useVar(vars$G.textColor),
-  [vars$E.textAlign]: useVar(vars$G.textAlign),
+  [vars$F.textLineHeight]: useVar(vars$H.textLineHeight),
+  [vars$F.textColor]: useVar(vars$H.textColor),
+  [vars$F.textAlign]: useVar(vars$H.textAlign),
-  [vars$E.fontSize]: useVar(vars$G.fontSize),
-  [vars$E.fontWeight]: useVar(vars$G.fontWeight),
-  [vars$E.fontFamily]: useVar(vars$G.fontFamily),
+  [vars$F.fontSize]: useVar(vars$H.fontSize),
+  [vars$F.fontWeight]: useVar(vars$H.fontWeight),
+  [vars$F.fontFamily]: useVar(vars$H.fontFamily),
-  [vars$E.linkColor]: useVar(vars$F.textColor),
-  [vars$E.linkTextDecoration]: 'none',
-  [vars$E.linkHoverTextDecoration]: 'underline',
+  [vars$F.linkColor]: useVar(vars$G.textColor),
+  [vars$F.linkTextDecoration]: 'none',
+  [vars$F.linkHoverTextDecoration]: 'underline',
-  [vars$E.fontWeightBold]: '900',
-  [vars$E.minWidth]: '0.25em',
-  [vars$E.minHeight]: '1.35em',
+  [vars$F.fontWeightBold]: '900',
+  [vars$F.minWidth]: '0.25em',
+  [vars$F.minHeight]: '1.35em',
-  [vars$E.hostDisplay]: 'inline-block',
+  [vars$F.hostDisplay]: 'inline-block',
   _empty: {
     _hideWhenEmpty: {
-      [vars$E.hostDisplay]: 'none',
+      [vars$F.hostDisplay]: 'none',
     },
   },
 };
@@ -6068,11 +6812,11 @@ const enrichedText = {
 var enrichedText$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: enrichedText,
-  vars: vars$E
+  vars: vars$F
 });
-const componentName$L = getComponentName$1('divider');
-class RawDivider extends createBaseClass$1({ componentName: componentName$L, baseSelector: ':host > div' }) {
+const componentName$M = getComponentName$1('divider');
+class RawDivider extends createBaseClass$1({ componentName: componentName$M, baseSelector: ':host > div' }) {
   constructor() {
     super();
@@ -6171,7 +6915,7 @@ const DividerClass = compose$1(
   componentNameValidationMixin$1
 )(RawDivider);
-const globalRefs$q = getThemeRefs(globals$1);
+const globalRefs$r = getThemeRefs(globals$1);
 const compVars$4 = DividerClass.cssVarList;
 const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
@@ -6179,18 +6923,18 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
     thickness: '2px',
     spacing: '10px',
   },
-  componentName$L
+  componentName$M
 );
 const divider = {
   ...helperTheme$2,
-  [compVars$4.hostDirection]: globalRefs$q.direction,
+  [compVars$4.hostDirection]: globalRefs$r.direction,
   [compVars$4.alignItems]: 'center',
   [compVars$4.flexDirection]: 'row',
   [compVars$4.alignSelf]: 'stretch',
   [compVars$4.hostWidth]: '100%',
-  [compVars$4.stripeColor]: globalRefs$q.colors.surface.light,
+  [compVars$4.stripeColor]: globalRefs$r.colors.surface.light,
   [compVars$4.stripeColorOpacity]: '0.5',
   [compVars$4.stripeHorizontalThickness]: helperRefs$2.thickness,
   [compVars$4.labelTextWidth]: 'fit-content',
@@ -6210,7 +6954,7 @@ const divider = {
   },
 };
-const vars$D = {
+const vars$E = {
   ...compVars$4,
   ...helperVars$2,
 };
@@ -6218,18 +6962,18 @@ const vars$D = {
 var divider$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: divider,
-  vars: vars$D
+  vars: vars$E
 });
 /* eslint-disable no-param-reassign */
-const componentName$K = getComponentName$1('passcode-internal');
+const componentName$L = getComponentName$1('passcode-internal');
-createBaseInputClass({ componentName: componentName$K, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$L, baseSelector: 'div' });
-const componentName$J = getComponentName$1('loader-radial');
+const componentName$K = getComponentName$1('loader-radial');
-class RawLoaderRadial extends createBaseClass$1({ componentName: componentName$J, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass$1({ componentName: componentName$K, baseSelector: ':host > div' }) {
   constructor() {
     super();
@@ -6273,7 +7017,7 @@ const LoaderRadialClass = compose$1(
   componentNameValidationMixin$1
 )(RawLoaderRadial);
-const componentName$I = getComponentName$1('passcode');
+const componentName$J = getComponentName$1('passcode');
 const observedAttributes$3 = ['digits'];
@@ -6292,18 +7036,18 @@ const customMixin$9 = (superclass) =>
       const template = document.createElement('template');
       template.innerHTML = `
-      <${componentName$K}
+      <${componentName$L}
         bordered="true"
         name="code"
         tabindex="-1"
         slot="input"
         role="textbox"
-      ><slot></slot></${componentName$K}>
+      ><slot></slot></${componentName$L}>
       `;
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$K);
+      this.inputElement = this.shadowRoot.querySelector(componentName$L);
       forwardAttrs$1(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
     }
@@ -6377,11 +7121,11 @@ const PasscodeClass = compose$1(
     },
   }),
   draggableMixin$1,
-  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
+  composedProxyInputMixin$1({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin$1,
   customMixin$9
 )(
-  createProxy({
+  createProxy$1({
     slots: [],
     wrappedEleName: 'vaadin-text-field',
     style: () => `
@@ -6460,63 +7204,63 @@ const PasscodeClass = compose$1(
 			${resetInputCursor('vaadin-text-field')}
     	`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$I,
+    componentName: componentName$J,
   })
 );
-const vars$C = PasscodeClass.cssVarList;
+const vars$D = PasscodeClass.cssVarList;
 const passcode = {
-  [vars$C.hostDirection]: refs.direction,
-  [vars$C.fontFamily]: refs.fontFamily,
-  [vars$C.fontSize]: refs.fontSize,
-  [vars$C.labelTextColor]: refs.labelTextColor,
-  [vars$C.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$C.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$C.digitValueTextColor]: refs.valueTextColor,
-  [vars$C.digitPadding]: '0',
-  [vars$C.digitTextAlign]: 'center',
-  [vars$C.digitSpacing]: '4px',
-  [vars$C.hostWidth]: refs.width,
-  [vars$C.digitOutlineColor]: 'transparent',
-  [vars$C.digitOutlineWidth]: refs.outlineWidth,
-  [vars$C.focusedDigitFieldOutlineColor]: refs.outlineColor,
-  [vars$C.digitSize]: refs.inputHeight,
+  [vars$D.hostDirection]: refs$1.direction,
+  [vars$D.fontFamily]: refs$1.fontFamily,
+  [vars$D.fontSize]: refs$1.fontSize,
+  [vars$D.labelTextColor]: refs$1.labelTextColor,
+  [vars$D.labelRequiredIndicator]: refs$1.requiredIndicator,
+  [vars$D.errorMessageTextColor]: refs$1.errorMessageTextColor,
+  [vars$D.digitValueTextColor]: refs$1.valueTextColor,
+  [vars$D.digitPadding]: '0',
+  [vars$D.digitTextAlign]: 'center',
+  [vars$D.digitSpacing]: '4px',
+  [vars$D.hostWidth]: refs$1.width,
+  [vars$D.digitOutlineColor]: 'transparent',
+  [vars$D.digitOutlineWidth]: refs$1.outlineWidth,
+  [vars$D.focusedDigitFieldOutlineColor]: refs$1.outlineColor,
+  [vars$D.digitSize]: refs$1.inputHeight,
   // error message icon
-  [vars$C.errorMessageIcon]: refs.errorMessageIcon,
-  [vars$C.errorMessageIconSize]: refs.errorMessageIconSize,
-  [vars$C.errorMessageIconPadding]: refs.errorMessageIconPadding,
-  [vars$C.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
-  [vars$C.errorMessageIconPosition]: refs.errorMessageIconPosition,
+  [vars$D.errorMessageIcon]: refs$1.errorMessageIcon,
+  [vars$D.errorMessageIconSize]: refs$1.errorMessageIconSize,
+  [vars$D.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+  [vars$D.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+  [vars$D.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
   size: {
-    xs: { [vars$C.spinnerSize]: '15px' },
-    sm: { [vars$C.spinnerSize]: '20px' },
-    md: { [vars$C.spinnerSize]: '20px' },
-    lg: { [vars$C.spinnerSize]: '20px' },
+    xs: { [vars$D.spinnerSize]: '15px' },
+    sm: { [vars$D.spinnerSize]: '20px' },
+    md: { [vars$D.spinnerSize]: '20px' },
+    lg: { [vars$D.spinnerSize]: '20px' },
   },
   _hideCursor: {
-    [vars$C.digitCaretTextColor]: 'transparent',
+    [vars$D.digitCaretTextColor]: 'transparent',
   },
   _loading: {
-    [vars$C.overlayOpacity]: refs.overlayOpacity,
+    [vars$D.overlayOpacity]: refs$1.overlayOpacity,
   },
 };
 var passcode$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: passcode,
-  vars: vars$C
+  vars: vars$D
 });
-const componentName$H = getComponentName$1('loader-linear');
+const componentName$I = getComponentName$1('loader-linear');
-class RawLoaderLinear extends createBaseClass$1({ componentName: componentName$H, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass$1({ componentName: componentName$I, baseSelector: ':host > div' }) {
   static get componentName() {
-    return componentName$H;
+    return componentName$I;
   }
   constructor() {
@@ -6577,67 +7321,67 @@ const LoaderLinearClass = compose$1(
   componentNameValidationMixin$1
 )(RawLoaderLinear);
-const globalRefs$p = getThemeRefs(globals$1);
-const vars$B = LoaderLinearClass.cssVarList;
+const globalRefs$q = getThemeRefs(globals$1);
+const vars$C = LoaderLinearClass.cssVarList;
 const loaderLinear = {
-  [vars$B.hostDisplay]: 'inline-block',
-  [vars$B.hostWidth]: '100%',
+  [vars$C.hostDisplay]: 'inline-block',
+  [vars$C.hostWidth]: '100%',
-  [vars$B.barColor]: globalRefs$p.colors.surface.contrast,
-  [vars$B.barWidth]: '20%',
+  [vars$C.barColor]: globalRefs$q.colors.surface.contrast,
+  [vars$C.barWidth]: '20%',
-  [vars$B.barBackgroundColor]: globalRefs$p.colors.surface.light,
-  [vars$B.barBorderRadius]: '4px',
+  [vars$C.barBackgroundColor]: globalRefs$q.colors.surface.light,
+  [vars$C.barBorderRadius]: '4px',
-  [vars$B.animationDuration]: '2s',
-  [vars$B.animationTimingFunction]: 'linear',
-  [vars$B.animationIterationCount]: 'infinite',
-  [vars$B.verticalPadding]: '0.25em',
+  [vars$C.animationDuration]: '2s',
+  [vars$C.animationTimingFunction]: 'linear',
+  [vars$C.animationIterationCount]: 'infinite',
+  [vars$C.verticalPadding]: '0.25em',
   size: {
-    xs: { [vars$B.barHeight]: '2px' },
-    sm: { [vars$B.barHeight]: '4px' },
-    md: { [vars$B.barHeight]: '6px' },
-    lg: { [vars$B.barHeight]: '8px' },
+    xs: { [vars$C.barHeight]: '2px' },
+    sm: { [vars$C.barHeight]: '4px' },
+    md: { [vars$C.barHeight]: '6px' },
+    lg: { [vars$C.barHeight]: '8px' },
   },
   mode: {
     primary: {
-      [vars$B.barColor]: globalRefs$p.colors.primary.main,
+      [vars$C.barColor]: globalRefs$q.colors.primary.main,
     },
     secondary: {
-      [vars$B.barColor]: globalRefs$p.colors.secondary.main,
+      [vars$C.barColor]: globalRefs$q.colors.secondary.main,
     },
   },
   _hidden: {
-    [vars$B.hostDisplay]: 'none',
+    [vars$C.hostDisplay]: 'none',
   },
 };
 var loaderLinear$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderLinear,
-  vars: vars$B
+  vars: vars$C
 });
-const globalRefs$o = getThemeRefs(globals$1);
+const globalRefs$p = getThemeRefs(globals$1);
 const compVars$3 = LoaderRadialClass.cssVarList;
 const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
   {
-    spinnerColor: globalRefs$o.colors.surface.contrast,
+    spinnerColor: globalRefs$p.colors.surface.contrast,
     mode: {
       primary: {
-        spinnerColor: globalRefs$o.colors.primary.main,
+        spinnerColor: globalRefs$p.colors.primary.main,
       },
       secondary: {
-        spinnerColor: globalRefs$o.colors.secondary.main,
+        spinnerColor: globalRefs$p.colors.secondary.main,
       },
     },
   },
-  componentName$J
+  componentName$K
 );
 const loaderRadial = {
@@ -6666,7 +7410,7 @@ const loaderRadial = {
     [compVars$3.hostDisplay]: 'none',
   },
 };
-const vars$A = {
+const vars$B = {
   ...compVars$3,
   ...helperVars$1,
 };
@@ -6674,10 +7418,10 @@ const vars$A = {
 var loaderRadial$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: loaderRadial,
-  vars: vars$A
+  vars: vars$B
 });
-const componentName$G = getComponentName$1('combo-box');
+const componentName$H = getComponentName('combo-box');
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
@@ -6687,7 +7431,9 @@ const ComboBoxMixin = (superclass) =>
     // eslint-disable-next-line class-methods-use-this
     #renderItem = ({ displayName, value, label }) => {
-      return `<span data-name="${label}" data-id="${value}">${displayName || label}</span>`;
+      return `<span data-name="${label}" data-id="${value}">${
+        displayName || label
+      }</span>`;
     };
     #data;
@@ -6735,7 +7481,10 @@ const ComboBoxMixin = (superclass) =>
           }
         } catch (e) {
           // eslint-disable-next-line no-console
-          console.error('could not parse data string from attribute "data" -', e.message);
+          console.error(
+            'could not parse data string from attribute "data" -',
+            e.message,
+          );
         }
       }
@@ -6761,7 +7510,10 @@ const ComboBoxMixin = (superclass) =>
     }
     getItemsTemplate() {
-      return this.data?.reduce?.((acc, item) => acc + (this.renderItem?.(item || {}) || ''), '');
+      return this.data?.reduce?.(
+        (acc, item) => acc + (this.renderItem?.(item || {}) || ''),
+        '',
+      );
     }
     renderItems() {
@@ -6802,7 +7554,7 @@ const ComboBoxMixin = (superclass) =>
     setComboBoxDescriptor() {
       const valueDescriptor = Object.getOwnPropertyDescriptor(
         this.inputElement.constructor.prototype,
-        'value'
+        'value',
       );
       const comboBox = this;
@@ -6811,7 +7563,10 @@ const ComboBoxMixin = (superclass) =>
         value: {
           ...valueDescriptor,
           set(val) {
-            if (!comboBox.baseElement.items?.length && !comboBox.allowCustomValue) {
+            if (
+              !comboBox.baseElement.items?.length &&
+              !comboBox.allowCustomValue
+            ) {
               return;
             }
@@ -6858,7 +7613,9 @@ const ComboBoxMixin = (superclass) =>
     // we do not want that because it's difficult to style the overlay in this way
     // so we override it to open inside the shadow DOM
     #overrideOverlaySettings() {
-      const overlay = this.baseElement.shadowRoot.querySelector('vaadin-combo-box-overlay');
+      const overlay = this.baseElement.shadowRoot.querySelector(
+        'vaadin-combo-box-overlay',
+      );
       overlay._attachOverlay = () => {
         overlay.bringToFront();
       };
@@ -6894,13 +7651,17 @@ const ComboBoxMixin = (superclass) =>
       this.#overrideRenderer();
       // Set up observers - order matters here since renderItems can clear innerHTML
-      observeAttributes$1(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
-      observeChildren$1(this, this.#onChildrenChange.bind(this));
+      observeAttributes(this, this.renderItems.bind(this), {
+        includeAttrs: ['data'],
+      });
+      observeChildren(this, this.#onChildrenChange.bind(this));
       this.setDefaultValue();
       this.baseElement.addEventListener('selected-item-changed', () => {
-        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        this.dispatchEvent(
+          new Event('input', { bubbles: true, composed: true }),
+        );
       });
     }
@@ -6947,7 +7708,7 @@ const ComboBoxMixin = (superclass) =>
           (e) => {
             e.stopImmediatePropagation();
           },
-          { once: true, capture: true }
+          { once: true, capture: true },
         );
       }
     }
@@ -6994,13 +7755,15 @@ const {
   toggle: { selector: '::part(toggle-button)' },
   clearButton: { selector: '::part(clear-button)' },
   label: { selector: '::part(label)' },
-  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+  requiredIndicator: {
+    selector: '[required]::part(required-indicator)::after',
+  },
   helperText: { selector: '::part(helper-text)' },
   errorMessage: { selector: '::part(error-message)' },
 };
-const ComboBoxClass = compose$1(
-  createStyleMixin$1({
+const ComboBoxClass = compose(
+  createStyleMixin({
     mappings: {
       hostWidth: { ...host$e, property: 'width' },
       hostDirection: { ...host$e, property: 'direction' },
@@ -7016,9 +7779,18 @@ const ComboBoxClass = compose$1(
       errorMessageTextColor: { ...errorMessage$7, property: 'color' },
       errorMessageIcon: { ...errorMessage$7, property: 'background-image' },
       errorMessageIconSize: { ...errorMessage$7, property: 'background-size' },
-      errorMessageIconPadding: { ...errorMessage$7, property: 'padding-inline-start' },
-      errorMessageIconRepeat: { ...errorMessage$7, property: 'background-repeat' },
-      errorMessageIconPosition: { ...errorMessage$7, property: 'background-position' },
+      errorMessageIconPadding: {
+        ...errorMessage$7,
+        property: 'padding-inline-start',
+      },
+      errorMessageIconRepeat: {
+        ...errorMessage$7,
+        property: 'background-repeat',
+      },
+      errorMessageIconPosition: {
+        ...errorMessage$7,
+        property: 'background-position',
+      },
       inputHeight: { ...inputField$3, property: 'height' },
       inputBackgroundColor: { ...inputField$3, property: 'background-color' },
       inputBorderColor: { ...inputField$3, property: 'border-color' },
@@ -7071,15 +7843,27 @@ const ComboBoxClass = compose$1(
       // so we need to use an arrow function on the selector
       // for that to work, because ComboBox is not available
       // at this time.
-      overlayBackground: { property: () => ComboBoxClass.cssVarList.overlay.backgroundColor },
+      overlayBackground: {
+        property: () => ComboBoxClass.cssVarList.overlay.backgroundColor,
+      },
       overlayTextColor: {
         property: () => ComboBoxClass.cssVarList.overlay.textColor,
       },
-      overlayBorder: { property: () => ComboBoxClass.cssVarList.overlay.border },
-      overlayFontSize: { property: () => ComboBoxClass.cssVarList.overlay.fontSize },
-      overlayFontFamily: { property: () => ComboBoxClass.cssVarList.overlay.fontFamily },
-      overlayCursor: { property: () => ComboBoxClass.cssVarList.overlay.cursor },
-      overlayItemBoxShadow: { property: () => ComboBoxClass.cssVarList.overlay.itemBoxShadow },
+      overlayBorder: {
+        property: () => ComboBoxClass.cssVarList.overlay.border,
+      },
+      overlayFontSize: {
+        property: () => ComboBoxClass.cssVarList.overlay.fontSize,
+      },
+      overlayFontFamily: {
+        property: () => ComboBoxClass.cssVarList.overlay.fontFamily,
+      },
+      overlayCursor: {
+        property: () => ComboBoxClass.cssVarList.overlay.cursor,
+      },
+      overlayItemBoxShadow: {
+        property: () => ComboBoxClass.cssVarList.overlay.itemBoxShadow,
+      },
       overlayItemPaddingInlineStart: {
         property: () => ComboBoxClass.cssVarList.overlay.itemPaddingInlineStart,
       },
@@ -7088,7 +7872,7 @@ const ComboBoxClass = compose$1(
       },
     },
   }),
-  draggableMixin$1,
+  draggableMixin,
   portalMixin({
     name: 'overlay',
     selector: '',
@@ -7103,20 +7887,47 @@ const ComboBoxClass = compose$1(
       fontFamily: { selector: 'vaadin-combo-box-item' },
       textColor: { selector: 'vaadin-combo-box-item', property: 'color' },
       fontSize: { selector: 'vaadin-combo-box-item' },
-      itemBoxShadow: { selector: 'vaadin-combo-box-item', property: 'box-shadow' },
+      itemBoxShadow: {
+        selector: 'vaadin-combo-box-item',
+        property: 'box-shadow',
+      },
       itemPaddingInlineStart: {
         selector: 'vaadin-combo-box-item',
         property: 'padding-inline-start',
       },
-      itemPaddingInlineEnd: { selector: 'vaadin-combo-box-item', property: 'padding-inline-end' },
-      loaderTop: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'top' },
-      loaderLeft: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'left' },
-      loaderRight: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'right' },
-      loaderMargin: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'margin' },
-      loaderWidth: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'width' },
-      loaderHeight: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'height' },
-      loaderBorder: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'border' },
+      itemPaddingInlineEnd: {
+        selector: 'vaadin-combo-box-item',
+        property: 'padding-inline-end',
+      },
+      loaderTop: {
+        selector: 'vaadin-combo-box-overlay::part(loader)',
+        property: 'top',
+      },
+      loaderLeft: {
+        selector: 'vaadin-combo-box-overlay::part(loader)',
+        property: 'left',
+      },
+      loaderRight: {
+        selector: 'vaadin-combo-box-overlay::part(loader)',
+        property: 'right',
+      },
+      loaderMargin: {
+        selector: 'vaadin-combo-box-overlay::part(loader)',
+        property: 'margin',
+      },
+      loaderWidth: {
+        selector: 'vaadin-combo-box-overlay::part(loader)',
+        property: 'width',
+      },
+      loaderHeight: {
+        selector: 'vaadin-combo-box-overlay::part(loader)',
+        property: 'height',
+      },
+      loaderBorder: {
+        selector: 'vaadin-combo-box-overlay::part(loader)',
+        property: 'border',
+      },
       loaderBorderColor: {
         selector: 'vaadin-combo-box-overlay::part(loader)',
         property: 'border-color',
@@ -7125,17 +7936,26 @@ const ComboBoxClass = compose$1(
         selector: 'vaadin-combo-box-overlay::part(loader)',
         property: 'border-radius',
       },
-      contentHeight: { selector: 'vaadin-combo-box-overlay::part(content)', property: 'height' },
-      contentOpacity: { selector: 'vaadin-combo-box-overlay::part(content)', property: 'opacity' },
+      contentHeight: {
+        selector: 'vaadin-combo-box-overlay::part(content)',
+        property: 'height',
+      },
+      contentOpacity: {
+        selector: 'vaadin-combo-box-overlay::part(content)',
+        property: 'opacity',
+      },
     },
     forward: {
       include: false,
       attributes: ['size'],
     },
   }),
-  composedProxyInputMixin({ proxyProps: ['selectionStart'], inputEvent: 'selected-item-changed' }),
-  componentNameValidationMixin$1,
-  ComboBoxMixin
+  composedProxyInputMixin({
+    proxyProps: ['selectionStart'],
+    inputEvent: 'selected-item-changed',
+  }),
+  componentNameValidationMixin,
+  ComboBoxMixin,
 )(
   createProxy({
     slots: ['', 'prefix'],
@@ -7146,10 +7966,10 @@ const ComboBoxClass = compose$1(
 			box-sizing: border-box;
 			-webkit-mask-image: none;
 		}
-		${useHostExternalPadding(ComboBoxClass.cssVarList)}
-		${resetInputReadonlyStyle('vaadin-combo-box')}
-		${resetInputPlaceholder('vaadin-combo-box')}
-		${resetInputCursor('vaadin-combo-box')}
+		${useHostExternalPadding$1(ComboBoxClass.cssVarList)}
+		${resetInputReadonlyStyle$1('vaadin-combo-box')}
+		${resetInputPlaceholder$1('vaadin-combo-box')}
+		${resetInputCursor$1('vaadin-combo-box')}
 		vaadin-combo-box {
 			padding: 0;
@@ -7185,20 +8005,144 @@ const ComboBoxClass = compose$1(
       opacity: 0;
     }
-    ${resetInputLabelPosition('vaadin-combo-box')}
-    ${inputFloatingLabelStyle()}
+    ${resetInputLabelPosition$1('vaadin-combo-box')}
+    ${inputFloatingLabelStyle$1()}
 		`,
     // Note: we exclude `size` to avoid overriding Vaadin's ComboBox property
     // with the same name. Including it will cause Vaadin to calculate NaN size,
     // and reset items to an empty array, and opening the list box with no items
     // to display.
     excludeAttrsSync: ['tabindex', 'size', 'data', 'loading'],
-    componentName: componentName$G,
+    componentName: componentName$H,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
-  })
+  }),
+);
+const componentName$G = getComponentName('input-wrapper');
+const globalRefs$o = getThemeRefs$1(globals);
+const [theme$1, refs, vars$A] = createHelperVars$1(
+  {
+    labelTextColor: globalRefs$o.colors.surface.dark,
+    labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
+    labelFontWeight: '500', // not taken from globals as it is fixed in all inputs
+    valueTextColor: globalRefs$o.colors.surface.contrast,
+    placeholderTextColor: globalRefs$o.colors.surface.dark,
+    requiredIndicator: "'*'",
+    helperTextColor: globalRefs$o.colors.surface.dark,
+    errorMessageTextColor: globalRefs$o.colors.error.main,
+    successMessageTextColor: globalRefs$o.colors.success.main,
+    borderWidth: globalRefs$o.border.xs,
+    borderRadius: globalRefs$o.radius.xs,
+    borderColor: 'transparent',
+    outlineWidth: globalRefs$o.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
+    minWidth: '10em',
+    toggleButtonSize: '1.5em',
+    inputIconSize: '1em',
+    inputHeight: '3em',
+    horizontalPadding: '0.5em',
+    verticalPadding: '0.5em',
+    textAlign: 'start',
+    backgroundColor: globalRefs$o.colors.surface.main,
+    fontFamily: globalRefs$o.fonts.font1.family,
+    direction: globalRefs$o.direction,
+    overlayOpacity: '0.3',
+    errorMessageIcon: '',
+    errorMessageIconSize: '0',
+    errorMessageIconPadding: '0',
+    errorMessageIconPosition: '0 0.4em',
+    errorMessageIconRepeat: 'no-repeat',
+    size: {
+      xs: { fontSize: '12px', chipFontSize: '10px' },
+      sm: { fontSize: '14px', chipFontSize: '12px' },
+      md: { fontSize: '16px', chipFontSize: '14px' },
+      lg: { fontSize: '18px', chipFontSize: '16px' },
+    },
+    labelType: {
+      static: {
+        valueInputHeight: '3em',
+        valueInputMarginBottom: 'auto',
+      },
+      floating: {
+        labelPosition: 'absolute',
+        labelTopPosition: '0',
+        labelHorizontalPosition: '0.9em',
+        labelFontSize: '1em',
+        placeholderOpacity: 0,
+        inputHeight: '3.5em',
+        inputVerticalAlignment: 'flex-end',
+        inputTransformY: 'translateY(1.55em)',
+        inputTransition: 'all 75ms ease-in-out',
+        marginInlineStart: '0',
+        valueInputHeight: '1.5702em',
+        valueInputMarginBottom: '0.5em',
+        _focused: {
+          labelFontSize: '0.75em',
+          inputTransformY: 'translateY(1.05em)',
+          labelFontWeight: '400',
+          placeholderOpacity: 1,
+        },
+        _readOnly: {
+          placeholderOpacity: 0,
+        },
+        _hasValue: {
+          inputTransformY: 'translateY(1.05em)',
+          labelFontSize: '0.75em',
+          labelFontWeight: '400',
+        },
+      },
+    },
+    _fullWidth: {
+      width: '100%',
+    },
+    _focused: {
+      outlineColor: globalRefs$o.colors.surface.light,
+      _invalid: {
+        outlineColor: globalRefs$o.colors.error.main,
+      },
+    },
+    _bordered: {
+      outlineWidth: globalRefs$o.border.xs,
+      borderColor: globalRefs$o.colors.surface.light,
+      borderStyle: 'solid',
+      _invalid: {
+        borderColor: globalRefs$o.colors.error.main,
+      },
+    },
+    _disabled: {
+      labelTextColor: globalRefs$o.colors.surface.light,
+      borderColor: globalRefs$o.colors.surface.light,
+      valueTextColor: globalRefs$o.colors.surface.light,
+      placeholderTextColor: globalRefs$o.colors.surface.light,
+      helperTextColor: globalRefs$o.colors.surface.light,
+      backgroundColor: globalRefs$o.colors.surface.main,
+    },
+  },
+  componentName$G,
 );
-const globalRefs$n = getThemeRefs(globals$1);
+const globalRefs$n = getThemeRefs$1(globals);
 const vars$z = ComboBoxClass.cssVarList;
 const comboBox = {
@@ -7276,8 +8220,8 @@ const comboBox = {
     [vars$z.overlay.loaderWidth]: '30px',
     [vars$z.overlay.loaderHeight]: '30px',
     [vars$z.overlay.loaderBorder]: '2px solid transparent',
-    [vars$z.overlay.loaderBorderColor]:
-      `${globalRefs$n.colors.primary.highlight} ${globalRefs$n.colors.primary.highlight} ${globalRefs$n.colors.primary.main} ${globalRefs$n.colors.primary.main}`,
+    [vars$z.overlay
+      .loaderBorderColor]: `${globalRefs$n.colors.primary.highlight} ${globalRefs$n.colors.primary.highlight} ${globalRefs$n.colors.primary.main} ${globalRefs$n.colors.primary.main}`,
     [vars$z.overlay.loaderBorderRadius]: '50%',
     [vars$z.overlay.contentHeight]: '100px',
     [vars$z.overlay.contentOpacity]: '0',
@@ -8757,10 +9701,10 @@ const PhoneFieldClass = compose$1(
     },
   }),
   draggableMixin$1,
-  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
+  composedProxyInputMixin$1({ proxyProps: ['value', 'selectionStart'] }),
   customMixin$8
 )(
-  createProxy({
+  createProxy$1({
     slots: [],
     wrappedEleName: 'vaadin-text-field',
     style: () => `
@@ -8865,36 +9809,36 @@ const PhoneFieldClass = compose$1(
 const vars$x = PhoneFieldClass.cssVarList;
 const phoneField = {
-  [vars$x.hostWidth]: refs.width,
-  [vars$x.hostDirection]: refs.direction,
-  [vars$x.fontSize]: refs.fontSize,
-  [vars$x.fontFamily]: refs.fontFamily,
-  [vars$x.labelTextColor]: refs.labelTextColor,
-  [vars$x.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$x.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$x.inputValueTextColor]: refs.valueTextColor,
-  [vars$x.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$x.inputBorderStyle]: refs.borderStyle,
-  [vars$x.inputBorderWidth]: refs.borderWidth,
-  [vars$x.inputBorderColor]: refs.borderColor,
-  [vars$x.inputBorderRadius]: refs.borderRadius,
-  [vars$x.inputOutlineStyle]: refs.outlineStyle,
-  [vars$x.inputOutlineWidth]: refs.outlineWidth,
-  [vars$x.inputOutlineColor]: refs.outlineColor,
-  [vars$x.inputOutlineOffset]: refs.outlineOffset,
-  [vars$x.phoneInputWidth]: refs.minWidth,
+  [vars$x.hostWidth]: refs$1.width,
+  [vars$x.hostDirection]: refs$1.direction,
+  [vars$x.fontSize]: refs$1.fontSize,
+  [vars$x.fontFamily]: refs$1.fontFamily,
+  [vars$x.labelTextColor]: refs$1.labelTextColor,
+  [vars$x.labelRequiredIndicator]: refs$1.requiredIndicator,
+  [vars$x.errorMessageTextColor]: refs$1.errorMessageTextColor,
+  [vars$x.inputValueTextColor]: refs$1.valueTextColor,
+  [vars$x.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
+  [vars$x.inputBorderStyle]: refs$1.borderStyle,
+  [vars$x.inputBorderWidth]: refs$1.borderWidth,
+  [vars$x.inputBorderColor]: refs$1.borderColor,
+  [vars$x.inputBorderRadius]: refs$1.borderRadius,
+  [vars$x.inputOutlineStyle]: refs$1.outlineStyle,
+  [vars$x.inputOutlineWidth]: refs$1.outlineWidth,
+  [vars$x.inputOutlineColor]: refs$1.outlineColor,
+  [vars$x.inputOutlineOffset]: refs$1.outlineOffset,
+  [vars$x.phoneInputWidth]: refs$1.minWidth,
   [vars$x.countryCodeInputWidth]: '5em',
   [vars$x.countryCodeDropdownWidth]: '20em',
   [vars$x.marginInlineStart]: '-0.25em',
-  [vars$x.valueInputHeight]: refs.valueInputHeight,
-  [vars$x.valueInputMarginBottom]: refs.valueInputMarginBottom,
+  [vars$x.valueInputHeight]: refs$1.valueInputHeight,
+  [vars$x.valueInputMarginBottom]: refs$1.valueInputMarginBottom,
   // error message icon
-  [vars$x.errorMessageIcon]: refs.errorMessageIcon,
-  [vars$x.errorMessageIconSize]: refs.errorMessageIconSize,
-  [vars$x.errorMessageIconPadding]: refs.errorMessageIconPadding,
-  [vars$x.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
-  [vars$x.errorMessageIconPosition]: refs.errorMessageIconPosition,
+  [vars$x.errorMessageIcon]: refs$1.errorMessageIcon,
+  [vars$x.errorMessageIconSize]: refs$1.errorMessageIconSize,
+  [vars$x.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+  [vars$x.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+  [vars$x.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
   // '@overlay': {
   // 	overlayItemBackgroundColor: 'red'
@@ -9054,10 +9998,10 @@ const PhoneFieldInputBoxClass = compose$1(
     },
   }),
   draggableMixin$1,
-  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
+  composedProxyInputMixin$1({ proxyProps: ['value', 'selectionStart'] }),
   customMixin$7
 )(
-  createProxy({
+  createProxy$1({
     slots: [],
     wrappedEleName: 'vaadin-text-field',
     style: () => `
@@ -9135,44 +10079,44 @@ const vars$w = PhoneFieldInputBoxClass.cssVarList;
 const phoneInputBoxField = {
   [vars$w.hostWidth]: '16em',
-  [vars$w.hostMinWidth]: refs.minWidth,
-  [vars$w.hostDirection]: refs.direction,
-  [vars$w.fontSize]: refs.fontSize,
-  [vars$w.fontFamily]: refs.fontFamily,
-  [vars$w.labelFontSize]: refs.labelFontSize,
-  [vars$w.labelFontWeight]: refs.labelFontWeight,
-  [vars$w.labelTextColor]: refs.labelTextColor,
-  [vars$w.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$w.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$w.inputValueTextColor]: refs.valueTextColor,
-  [vars$w.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$w.inputBorderStyle]: refs.borderStyle,
-  [vars$w.inputBorderWidth]: refs.borderWidth,
-  [vars$w.inputBorderColor]: refs.borderColor,
-  [vars$w.inputBorderRadius]: refs.borderRadius,
-  [vars$w.inputOutlineStyle]: refs.outlineStyle,
-  [vars$w.inputOutlineWidth]: refs.outlineWidth,
-  [vars$w.inputOutlineColor]: refs.outlineColor,
-  [vars$w.inputOutlineOffset]: refs.outlineOffset,
-  [vars$w.labelPosition]: refs.labelPosition,
-  [vars$w.labelTopPosition]: refs.labelTopPosition,
-  [vars$w.labelHorizontalPosition]: refs.labelHorizontalPosition,
-  [vars$w.inputTransformY]: refs.inputTransformY,
-  [vars$w.inputTransition]: refs.inputTransition,
-  [vars$w.marginInlineStart]: refs.marginInlineStart,
-  [vars$w.valueInputHeight]: refs.valueInputHeight,
-  [vars$w.valueInputMarginBottom]: refs.valueInputMarginBottom,
+  [vars$w.hostMinWidth]: refs$1.minWidth,
+  [vars$w.hostDirection]: refs$1.direction,
+  [vars$w.fontSize]: refs$1.fontSize,
+  [vars$w.fontFamily]: refs$1.fontFamily,
+  [vars$w.labelFontSize]: refs$1.labelFontSize,
+  [vars$w.labelFontWeight]: refs$1.labelFontWeight,
+  [vars$w.labelTextColor]: refs$1.labelTextColor,
+  [vars$w.labelRequiredIndicator]: refs$1.requiredIndicator,
+  [vars$w.errorMessageTextColor]: refs$1.errorMessageTextColor,
+  [vars$w.inputValueTextColor]: refs$1.valueTextColor,
+  [vars$w.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
+  [vars$w.inputBorderStyle]: refs$1.borderStyle,
+  [vars$w.inputBorderWidth]: refs$1.borderWidth,
+  [vars$w.inputBorderColor]: refs$1.borderColor,
+  [vars$w.inputBorderRadius]: refs$1.borderRadius,
+  [vars$w.inputOutlineStyle]: refs$1.outlineStyle,
+  [vars$w.inputOutlineWidth]: refs$1.outlineWidth,
+  [vars$w.inputOutlineColor]: refs$1.outlineColor,
+  [vars$w.inputOutlineOffset]: refs$1.outlineOffset,
+  [vars$w.labelPosition]: refs$1.labelPosition,
+  [vars$w.labelTopPosition]: refs$1.labelTopPosition,
+  [vars$w.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
+  [vars$w.inputTransformY]: refs$1.inputTransformY,
+  [vars$w.inputTransition]: refs$1.inputTransition,
+  [vars$w.marginInlineStart]: refs$1.marginInlineStart,
+  [vars$w.valueInputHeight]: refs$1.valueInputHeight,
+  [vars$w.valueInputMarginBottom]: refs$1.valueInputMarginBottom,
   [vars$w.inputHorizontalPadding]: '0',
   // error message icon
-  [vars$w.errorMessageIcon]: refs.errorMessageIcon,
-  [vars$w.errorMessageIconSize]: refs.errorMessageIconSize,
-  [vars$w.errorMessageIconPadding]: refs.errorMessageIconPadding,
-  [vars$w.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
-  [vars$w.errorMessageIconPosition]: refs.errorMessageIconPosition,
+  [vars$w.errorMessageIcon]: refs$1.errorMessageIcon,
+  [vars$w.errorMessageIconSize]: refs$1.errorMessageIconSize,
+  [vars$w.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+  [vars$w.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+  [vars$w.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
   _fullWidth: {
-    [vars$w.hostWidth]: refs.width,
+    [vars$w.hostWidth]: refs$1.width,
   },
 };
@@ -9550,10 +10494,10 @@ const NewPasswordClass = compose$1(
     },
   }),
   draggableMixin$1,
-  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
+  composedProxyInputMixin$1({ proxyProps: ['value', 'selectionStart'] }),
   customMixin$6
 )(
-  createProxy({
+  createProxy$1({
     slots: [],
     wrappedEleName: 'vaadin-text-field',
     style: () => `
@@ -9618,32 +10562,32 @@ const globalRefs$m = getThemeRefs(globals$1);
 const vars$v = NewPasswordClass.cssVarList;
 const newPassword = {
-  [vars$v.hostWidth]: refs.width,
-  [vars$v.hostMinWidth]: refs.minWidth,
-  [vars$v.hostDirection]: refs.direction,
-  [vars$v.fontSize]: refs.fontSize,
-  [vars$v.fontFamily]: refs.fontFamily,
-  [vars$v.labelFontSize]: refs.labelFontSize,
-  [vars$v.labelFontWeight]: refs.labelFontWeight,
-  [vars$v.labelTextColor]: refs.labelTextColor,
+  [vars$v.hostWidth]: refs$1.width,
+  [vars$v.hostMinWidth]: refs$1.minWidth,
+  [vars$v.hostDirection]: refs$1.direction,
+  [vars$v.fontSize]: refs$1.fontSize,
+  [vars$v.fontFamily]: refs$1.fontFamily,
+  [vars$v.labelFontSize]: refs$1.labelFontSize,
+  [vars$v.labelFontWeight]: refs$1.labelFontWeight,
+  [vars$v.labelTextColor]: refs$1.labelTextColor,
   [vars$v.spaceBetweenInputs]: '1em',
-  [vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$v.errorMessageTextColor]: refs$1.errorMessageTextColor,
   [vars$v.policyPreviewBackgroundColor]: 'none',
   [vars$v.policyPreviewPadding]: globalRefs$m.spacing.lg,
-  [vars$v.valueInputHeight]: refs.valueInputHeight,
+  [vars$v.valueInputHeight]: refs$1.valueInputHeight,
   // error message icon
-  [vars$v.errorMessageIcon]: refs.errorMessageIcon,
-  [vars$v.errorMessageIconSize]: refs.errorMessageIconSize,
-  [vars$v.errorMessageIconPadding]: refs.errorMessageIconPadding,
-  [vars$v.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
-  [vars$v.errorMessageIconPosition]: refs.errorMessageIconPosition,
+  [vars$v.errorMessageIcon]: refs$1.errorMessageIcon,
+  [vars$v.errorMessageIconSize]: refs$1.errorMessageIconSize,
+  [vars$v.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+  [vars$v.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+  [vars$v.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
   _required: {
     // NewPassword doesn't pass `required` attribute to its Password components.
     // That's why we fake the required indicator on each input.
     // We do that by injecting `::after` element, and populating it with requiredIndicator content.
-    [vars$v.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
+    [vars$v.inputsRequiredIndicator]: refs$1.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
   },
 };
@@ -9898,9 +10842,9 @@ const UploadFileClass = compose$1(
 const vars$u = UploadFileClass.cssVarList;
 const uploadFile = {
-  [vars$u.hostDirection]: refs.direction,
-  [vars$u.labelTextColor]: refs.labelTextColor,
-  [vars$u.fontFamily]: refs.fontFamily,
+  [vars$u.hostDirection]: refs$1.direction,
+  [vars$u.labelTextColor]: refs$1.labelTextColor,
+  [vars$u.fontFamily]: refs$1.fontFamily,
   [vars$u.iconSize]: '2em',
@@ -9911,13 +10855,13 @@ const uploadFile = {
   [vars$u.titleFontWeight]: '500',
   [vars$u.lineHeight]: '1em',
-  [vars$u.borderWidth]: refs.borderWidth,
-  [vars$u.borderColor]: refs.borderColor,
-  [vars$u.borderRadius]: refs.borderRadius,
+  [vars$u.borderWidth]: refs$1.borderWidth,
+  [vars$u.borderColor]: refs$1.borderColor,
+  [vars$u.borderRadius]: refs$1.borderRadius,
   [vars$u.borderStyle]: 'dashed',
   _required: {
-    [vars$u.requiredIndicator]: refs.requiredIndicator,
+    [vars$u.requiredIndicator]: refs$1.requiredIndicator,
   },
   size: {
@@ -9952,7 +10896,7 @@ const uploadFile = {
   },
   _fullWidth: {
-    [vars$u.hostWidth]: refs.width,
+    [vars$u.hostWidth]: refs$1.width,
   },
 };
@@ -10128,7 +11072,7 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
       `;
     }
-    dispatchChange = createDispatchEvent.bind(this, 'change');
+    dispatchChange = createDispatchEvent$1.bind(this, 'change');
     get items() {
       return this.querySelector('slot').assignedElements();
@@ -10479,12 +11423,12 @@ const ButtonSelectionGroupClass = compose$1(
     },
   }),
   draggableMixin$1,
-  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
+  composedProxyInputMixin$1({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin$1,
   buttonSelectionGroupBaseMixin,
   buttonSelectionGroupMixin
 )(
-  createProxy({
+  createProxy$1({
     slots: [],
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
@@ -10496,21 +11440,21 @@ const ButtonSelectionGroupClass = compose$1(
 const globalRefs$k = getThemeRefs(globals$1);
 const createBaseButtonSelectionGroupMappings = (vars) => ({
-  [vars.hostDirection]: refs.direction,
-  [vars.fontFamily]: refs.fontFamily,
-  [vars.labelTextColor]: refs.labelTextColor,
-  [vars.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars.hostDirection]: refs$1.direction,
+  [vars.fontFamily]: refs$1.fontFamily,
+  [vars.labelTextColor]: refs$1.labelTextColor,
+  [vars.labelRequiredIndicator]: refs$1.requiredIndicator,
   [vars.itemsSpacing]: globalRefs$k.spacing.sm,
-  [vars.hostWidth]: refs.width,
+  [vars.hostWidth]: refs$1.width,
-  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars.errorMessageTextColor]: refs$1.errorMessageTextColor,
   // error message icon
-  [vars.errorMessageIcon]: refs.errorMessageIcon,
-  [vars.errorMessageIconSize]: refs.errorMessageIconSize,
-  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
-  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
-  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
+  [vars.errorMessageIcon]: refs$1.errorMessageIcon,
+  [vars.errorMessageIconSize]: refs$1.errorMessageIconSize,
+  [vars.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+  [vars.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+  [vars.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
 });
 const vars$s = ButtonSelectionGroupClass.cssVarList;
@@ -10667,12 +11611,12 @@ const ButtonMultiSelectionGroupClass = compose$1(
     },
   }),
   draggableMixin$1,
-  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
+  composedProxyInputMixin$1({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin$1,
   buttonSelectionGroupBaseMixin,
   buttonMultiSelectionGroupMixin
 )(
-  createProxy({
+  createProxy$1({
     slots: [],
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
@@ -10762,7 +11706,7 @@ const ModalClass = compose$1(
       overlayWidth: { property: () => ModalClass.cssVarList.overlay.width },
     },
   }),
-  portalMixin({
+  portalMixin$1({
     name: 'overlay',
     selector: '',
     mappings: {
@@ -10787,7 +11731,7 @@ const ModalClass = compose$1(
   componentNameValidationMixin$1,
   customMixin$5
 )(
-  createProxy({
+  createProxy$1({
     slots: [''],
     wrappedEleName: 'vaadin-dialog',
     style: () => ``,
@@ -11194,7 +12138,7 @@ const GridClass = compose$1(
   componentNameValidationMixin$1,
   GridMixin
 )(
-  createProxy({
+  createProxy$1({
     delegatesFocus: false,
     slots: [''],
     wrappedEleName: 'vaadin-grid',
@@ -11257,16 +12201,16 @@ const grid = {
   [vars$p.fontWeight]: '400',
   [vars$p.backgroundColor]: globalRefs$i.colors.surface.main,
-  [vars$p.fontSize]: refs.fontSize,
-  [vars$p.fontFamily]: refs.fontFamily,
+  [vars$p.fontSize]: refs$1.fontSize,
+  [vars$p.fontFamily]: refs$1.fontFamily,
   [vars$p.sortIndicatorsColor]: globalRefs$i.colors.surface.light,
   [vars$p.activeSortIndicator]: globalRefs$i.colors.surface.dark,
   [vars$p.resizeHandleColor]: globalRefs$i.colors.surface.light,
-  [vars$p.borderWidth]: refs.borderWidth,
-  [vars$p.borderStyle]: refs.borderStyle,
-  [vars$p.borderRadius]: refs.borderRadius,
+  [vars$p.borderWidth]: refs$1.borderWidth,
+  [vars$p.borderStyle]: refs$1.borderStyle,
+  [vars$p.borderRadius]: refs$1.borderRadius,
   [vars$p.borderColor]: 'transparent',
   [vars$p.headerRowTextColor]: globalRefs$i.colors.surface.dark,
@@ -11288,7 +12232,7 @@ const grid = {
   [vars$p.detailsPanelPadding]: '12px 0',
   _bordered: {
-    [vars$p.borderColor]: refs.borderColor,
+    [vars$p.borderColor]: refs$1.borderColor,
   },
 };
@@ -11376,7 +12320,7 @@ const NotificationCardClass = compose$1(
   }),
   notificationCardMixin
 )(
-  createProxy({
+  createProxy$1({
     slots: [],
     wrappedEleName: 'vaadin-notification-card',
     style: () => `
@@ -12001,7 +12945,7 @@ const MultiSelectComboBoxClass = compose$1(
     },
   }),
   draggableMixin$1,
-  portalMixin({
+  portalMixin$1({
     name: 'overlay',
     selector: 'vaadin-multi-select-combo-box-internal',
     mappings: {
@@ -12027,12 +12971,12 @@ const MultiSelectComboBoxClass = compose$1(
       attributes: ['size'],
     },
   }),
-  composedProxyInputMixin({ proxyProps: ['selectionStart'], inputEvent: 'selected-items-changed' }),
+  composedProxyInputMixin$1({ proxyProps: ['selectionStart'], inputEvent: 'selected-items-changed' }),
   changeMixin,
   componentNameValidationMixin$1,
   multiSelectComboBoxMixin
 )(
-  createProxy({
+  createProxy$1({
     slots: ['', 'prefix'],
     wrappedEleName: 'vaadin-multi-select-combo-box',
     style: () => `
@@ -12121,54 +13065,54 @@ const globalRefs$g = getThemeRefs(globals$1);
 const vars$n = MultiSelectComboBoxClass.cssVarList;
 const multiSelectComboBox = {
-  [vars$n.hostWidth]: refs.width,
-  [vars$n.hostDirection]: refs.direction,
-  [vars$n.fontSize]: refs.fontSize,
-  [vars$n.fontFamily]: refs.fontFamily,
-  [vars$n.labelFontSize]: refs.labelFontSize,
-  [vars$n.labelFontWeight]: refs.labelFontWeight,
-  [vars$n.labelTextColor]: refs.labelTextColor,
-  [vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$n.inputBorderColor]: refs.borderColor,
-  [vars$n.inputBorderWidth]: refs.borderWidth,
-  [vars$n.inputBorderStyle]: refs.borderStyle,
-  [vars$n.inputBorderRadius]: refs.borderRadius,
-  [vars$n.inputOutlineColor]: refs.outlineColor,
-  [vars$n.inputOutlineOffset]: refs.outlineOffset,
-  [vars$n.inputOutlineWidth]: refs.outlineWidth,
-  [vars$n.inputOutlineStyle]: refs.outlineStyle,
-  [vars$n.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$n.inputValueTextColor]: refs.valueTextColor,
-  [vars$n.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$n.inputBackgroundColor]: refs.backgroundColor,
-  [vars$n.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$n.inputVerticalPadding]: refs.verticalPadding,
-  [vars$n.inputHeight]: refs.inputHeight,
+  [vars$n.hostWidth]: refs$1.width,
+  [vars$n.hostDirection]: refs$1.direction,
+  [vars$n.fontSize]: refs$1.fontSize,
+  [vars$n.fontFamily]: refs$1.fontFamily,
+  [vars$n.labelFontSize]: refs$1.labelFontSize,
+  [vars$n.labelFontWeight]: refs$1.labelFontWeight,
+  [vars$n.labelTextColor]: refs$1.labelTextColor,
+  [vars$n.errorMessageTextColor]: refs$1.errorMessageTextColor,
+  [vars$n.inputBorderColor]: refs$1.borderColor,
+  [vars$n.inputBorderWidth]: refs$1.borderWidth,
+  [vars$n.inputBorderStyle]: refs$1.borderStyle,
+  [vars$n.inputBorderRadius]: refs$1.borderRadius,
+  [vars$n.inputOutlineColor]: refs$1.outlineColor,
+  [vars$n.inputOutlineOffset]: refs$1.outlineOffset,
+  [vars$n.inputOutlineWidth]: refs$1.outlineWidth,
+  [vars$n.inputOutlineStyle]: refs$1.outlineStyle,
+  [vars$n.labelRequiredIndicator]: refs$1.requiredIndicator,
+  [vars$n.inputValueTextColor]: refs$1.valueTextColor,
+  [vars$n.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
+  [vars$n.inputBackgroundColor]: refs$1.backgroundColor,
+  [vars$n.inputHorizontalPadding]: refs$1.horizontalPadding,
+  [vars$n.inputVerticalPadding]: refs$1.verticalPadding,
+  [vars$n.inputHeight]: refs$1.inputHeight,
   [vars$n.inputDropdownButtonColor]: globalRefs$g.colors.surface.dark,
   [vars$n.inputDropdownButtonCursor]: 'pointer',
-  [vars$n.inputDropdownButtonSize]: refs.toggleButtonSize,
+  [vars$n.inputDropdownButtonSize]: refs$1.toggleButtonSize,
   [vars$n.inputDropdownButtonOffset]: globalRefs$g.spacing.xs,
   [vars$n.overlayItemPaddingInlineStart]: globalRefs$g.spacing.xs,
   [vars$n.overlayItemPaddingInlineEnd]: globalRefs$g.spacing.lg,
-  [vars$n.chipFontSize]: refs.chipFontSize,
+  [vars$n.chipFontSize]: refs$1.chipFontSize,
   [vars$n.chipTextColor]: globalRefs$g.colors.surface.contrast,
   [vars$n.chipBackgroundColor]: globalRefs$g.colors.surface.light,
-  [vars$n.labelPosition]: refs.labelPosition,
-  [vars$n.labelTopPosition]: refs.labelTopPosition,
-  [vars$n.labelLeftPosition]: refs.labelLeftPosition,
-  [vars$n.labelHorizontalPosition]: refs.labelHorizontalPosition,
-  [vars$n.inputTransformY]: refs.inputTransformY,
-  [vars$n.inputTransition]: refs.inputTransition,
-  [vars$n.marginInlineStart]: refs.marginInlineStart,
-  [vars$n.placeholderOpacity]: refs.placeholderOpacity,
-  [vars$n.inputVerticalAlignment]: refs.inputVerticalAlignment,
+  [vars$n.labelPosition]: refs$1.labelPosition,
+  [vars$n.labelTopPosition]: refs$1.labelTopPosition,
+  [vars$n.labelLeftPosition]: refs$1.labelLeftPosition,
+  [vars$n.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
+  [vars$n.inputTransformY]: refs$1.inputTransformY,
+  [vars$n.inputTransition]: refs$1.inputTransition,
+  [vars$n.marginInlineStart]: refs$1.marginInlineStart,
+  [vars$n.placeholderOpacity]: refs$1.placeholderOpacity,
+  [vars$n.inputVerticalAlignment]: refs$1.inputVerticalAlignment,
   // error message icon
-  [vars$n.errorMessageIcon]: refs.errorMessageIcon,
-  [vars$n.errorMessageIconSize]: refs.errorMessageIconSize,
-  [vars$n.errorMessageIconPadding]: refs.errorMessageIconPadding,
-  [vars$n.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
-  [vars$n.errorMessageIconPosition]: refs.errorMessageIconPosition,
+  [vars$n.errorMessageIcon]: refs$1.errorMessageIcon,
+  [vars$n.errorMessageIconSize]: refs$1.errorMessageIconSize,
+  [vars$n.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+  [vars$n.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+  [vars$n.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
   labelType: {
     floating: {
@@ -12184,12 +13128,12 @@ const multiSelectComboBox = {
   },
   // Overlay theme exposed via the component:
-  [vars$n.overlayFontSize]: refs.fontSize,
-  [vars$n.overlayFontFamily]: refs.fontFamily,
+  [vars$n.overlayFontSize]: refs$1.fontSize,
+  [vars$n.overlayFontFamily]: refs$1.fontFamily,
   [vars$n.overlayCursor]: 'pointer',
   [vars$n.overlayItemBoxShadow]: 'none',
-  [vars$n.overlayBackground]: refs.backgroundColor,
-  [vars$n.overlayTextColor]: refs.valueTextColor,
+  [vars$n.overlayBackground]: refs$1.backgroundColor,
+  [vars$n.overlayTextColor]: refs$1.valueTextColor,
   // Overlay direct theme:
   [vars$n.overlay.minHeight]: '400px',
@@ -12540,7 +13484,7 @@ const customMixin$4 = (superclass) =>
       // This is required since when we remove the invalid attribute from the internal mappings field,
       // we want to reflect the change in the parent component
-      syncAttrs(this, this.inputElement, { includeAttrs: ['invalid'] });
+      syncAttrs$1(this, this.inputElement, { includeAttrs: ['invalid'] });
       this.setDefaultValues();
     }
@@ -12599,7 +13543,7 @@ const MappingsFieldClass = compose$1(
     },
   }),
   draggableMixin$1,
-  composedProxyInputMixin({
+  composedProxyInputMixin$1({
     proxyProps: ['value', 'selectionStart'],
     inputEvent: 'input',
     proxyParentValidation: true,
@@ -12607,7 +13551,7 @@ const MappingsFieldClass = compose$1(
   componentNameValidationMixin$1,
   customMixin$4
 )(
-  createProxy({
+  createProxy$1({
     slots: [],
     wrappedEleName: 'vaadin-custom-field',
     style: () => `
@@ -12661,18 +13605,18 @@ const globalRefs$d = getThemeRefs(globals$1);
 const vars$k = MappingsFieldClass.cssVarList;
 const mappingsField = {
-  [vars$k.hostWidth]: refs.width,
-  [vars$k.hostDirection]: refs.direction,
-  [vars$k.fontSize]: refs.fontSize,
-  [vars$k.fontFamily]: refs.fontFamily,
+  [vars$k.hostWidth]: refs$1.width,
+  [vars$k.hostDirection]: refs$1.direction,
+  [vars$k.fontSize]: refs$1.fontSize,
+  [vars$k.fontFamily]: refs$1.fontFamily,
   [vars$k.separatorFontSize]: '14px',
   [vars$k.labelsFontSize]: '14px',
   [vars$k.labelsLineHeight]: '1',
   [vars$k.labelsMarginBottom]: '6px',
-  [vars$k.labelTextColor]: refs.labelTextColor,
+  [vars$k.labelTextColor]: refs$1.labelTextColor,
   [vars$k.itemMarginBottom]: '1em',
   // To be positioned correctly, the min width has to match the text field min width
-  [vars$k.valueLabelMinWidth]: refs.minWidth,
+  [vars$k.valueLabelMinWidth]: refs$1.minWidth,
   // To be positioned correctly, the min width has to match the combo box field min width
   [vars$k.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$d.border.xs})`,
   [vars$k.separatorWidth]: '70px',
@@ -13203,7 +14147,7 @@ const customMixin$3 = (superclass) =>
         ],
       });
-      syncAttrs(this, this.inputElement, { includeAttrs: ['invalid'] });
+      syncAttrs$1(this, this.inputElement, { includeAttrs: ['invalid'] });
     }
   };
@@ -13227,7 +14171,7 @@ const SamlGroupMappingsClass = compose$1(
     },
   }),
   draggableMixin$1,
-  composedProxyInputMixin({
+  composedProxyInputMixin$1({
     proxyProps: ['value', 'selectionStart'],
     inputEvent: 'input',
     triggerValidationEvents: ['mapping-item-added', 'mapping-item-removed'],
@@ -13236,7 +14180,7 @@ const SamlGroupMappingsClass = compose$1(
   componentNameValidationMixin$1,
   customMixin$3
 )(
-  createProxy({
+  createProxy$1({
     slots: [],
     wrappedEleName: 'vaadin-custom-field',
     style: () => `
@@ -13276,16 +14220,16 @@ const SamlGroupMappingsClass = compose$1(
 const vars$h = SamlGroupMappingsClass.cssVarList;
 const samlGroupMappings = {
-  [vars$h.hostWidth]: refs.width,
-  [vars$h.hostDirection]: refs.direction,
+  [vars$h.hostWidth]: refs$1.width,
+  [vars$h.hostDirection]: refs$1.direction,
   [vars$h.groupNameInputMarginBottom]: '1em',
   // error message icon
-  [vars$h.errorMessageIcon]: refs.errorMessageIcon,
-  [vars$h.errorMessageIconSize]: refs.errorMessageIconSize,
-  [vars$h.errorMessageIconPadding]: refs.errorMessageIconPadding,
-  [vars$h.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
-  [vars$h.errorMessageIconPosition]: refs.errorMessageIconPosition,
+  [vars$h.errorMessageIcon]: refs$1.errorMessageIcon,
+  [vars$h.errorMessageIconSize]: refs$1.errorMessageIconSize,
+  [vars$h.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+  [vars$h.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+  [vars$h.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
 };
 var samlGroupMappings$1 = /*#__PURE__*/Object.freeze({
@@ -13299,12 +14243,12 @@ const globalRefs$a = getThemeRefs(globals$1);
 const vars$g = PolicyValidationClass.cssVarList;
 const policyValidation = {
-  [vars$g.fontFamily]: refs.fontFamily,
-  [vars$g.fontSize]: refs.labelFontSize,
-  [vars$g.textColor]: refs.labelTextColor,
-  [vars$g.borderWidth]: refs.borderWidth,
-  [vars$g.borderStyle]: refs.borderStyle,
-  [vars$g.borderColor]: refs.borderColor,
+  [vars$g.fontFamily]: refs$1.fontFamily,
+  [vars$g.fontSize]: refs$1.labelFontSize,
+  [vars$g.textColor]: refs$1.labelTextColor,
+  [vars$g.borderWidth]: refs$1.borderWidth,
+  [vars$g.borderStyle]: refs$1.borderStyle,
+  [vars$g.borderColor]: refs$1.borderColor,
   [vars$g.borderRadius]: globalRefs$a.radius.sm,
   [vars$g.backgroundColor]: 'none',
   [vars$g.padding]: '0px',
@@ -13777,11 +14721,11 @@ const RadioButtonClass = compose$1(
       radioBorderStyle: { selector: '::part(radio)', property: 'border-style', fallback: 'solid' },
     },
   }),
-  composedProxyInputMixin({ proxyProps: ['setSelectionRange'] }),
+  composedProxyInputMixin$1({ proxyProps: ['setSelectionRange'] }),
   componentNameValidationMixin$1,
   customMixin$2
 )(
-  createProxy({
+  createProxy$1({
     slots: [''],
     wrappedEleName: 'vaadin-radio-button',
     excludeAttrsSync: ['tabindex', 'data'],
@@ -13937,11 +14881,11 @@ const RadioGroupClass = compose$1(
     },
   }),
   draggableMixin$1,
-  composedProxyInputMixin({ proxyProps: ['setSelectionRange'] }),
+  composedProxyInputMixin$1({ proxyProps: ['setSelectionRange'] }),
   componentNameValidationMixin$1,
   RadioGroupMixin
 )(
-  createProxy({
+  createProxy$1({
     slots: ['', 'prefix'],
     wrappedEleName: 'vaadin-radio-group',
     style: () => `
@@ -13970,19 +14914,19 @@ const globalRefs$8 = getThemeRefs(globals$1);
 const radioGroup = {
   [vars$d.buttonsRowGap]: '9px',
-  [vars$d.hostWidth]: refs.width,
-  [vars$d.hostDirection]: refs.direction,
-  [vars$d.fontSize]: refs.fontSize,
-  [vars$d.fontFamily]: refs.fontFamily,
-  [vars$d.labelTextColor]: refs.labelTextColor,
-  [vars$d.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$d.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$d.errorMessageIcon]: refs.errorMessageIcon,
-  [vars$d.errorMessageIconSize]: refs.errorMessageIconSize,
-  [vars$d.errorMessageIconPadding]: refs.errorMessageIconPadding,
-  [vars$d.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
-  [vars$d.errorMessageIconPosition]: refs.errorMessageIconPosition,
-  [vars$d.helperTextColor]: refs.helperTextColor,
+  [vars$d.hostWidth]: refs$1.width,
+  [vars$d.hostDirection]: refs$1.direction,
+  [vars$d.fontSize]: refs$1.fontSize,
+  [vars$d.fontFamily]: refs$1.fontFamily,
+  [vars$d.labelTextColor]: refs$1.labelTextColor,
+  [vars$d.labelRequiredIndicator]: refs$1.requiredIndicator,
+  [vars$d.errorMessageTextColor]: refs$1.errorMessageTextColor,
+  [vars$d.errorMessageIcon]: refs$1.errorMessageIcon,
+  [vars$d.errorMessageIconSize]: refs$1.errorMessageIconSize,
+  [vars$d.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+  [vars$d.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+  [vars$d.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+  [vars$d.helperTextColor]: refs$1.helperTextColor,
   [vars$d.itemsLabelColor]: globalRefs$8.colors.surface.contrast,
   textAlign: {
@@ -14011,7 +14955,7 @@ const vars$c = RadioButtonClass.cssVarList;
 const globalRefs$7 = getThemeRefs(globals$1);
 const radioButton = {
-  [vars$c.fontFamily]: refs.fontFamily,
+  [vars$c.fontFamily]: refs$1.fontFamily,
   [vars$c.radioSize]: 'calc(1em + 6px)',
   [vars$c.radioMargin]: 'auto 4px',
   [vars$c.radioCheckedSize]: `calc(var(${vars$c.radioSize})/5)`,
@@ -15002,9 +15946,9 @@ const globalRefs$6 = getThemeRefs(globals$1);
 const vars$b = CalendarClass.cssVarList;
 const calendar = {
-  [vars$b.fontFamily]: refs.fontFamily,
-  [vars$b.fontSize]: refs.fontSize,
-  [vars$b.hostDirection]: refs.direction,
+  [vars$b.fontFamily]: refs$1.fontFamily,
+  [vars$b.fontSize]: refs$1.fontSize,
+  [vars$b.hostDirection]: refs$1.direction,
   [vars$b.calendarPadding]: '1em',
@@ -15875,7 +16819,7 @@ const DateFieldClass = compose$1(
       },
     },
   }),
-  portalMixin({
+  portalMixin$1({
     name: 'overlay',
     selector: '',
     mappings: {
@@ -15901,12 +16845,12 @@ const { shadow } = globalRefs$5;
 const vars$a = DateFieldClass.cssVarList;
 const dateField = {
-  [vars$a.hostWidth]: refs.width,
-  [vars$a.hostDirection]: refs.direction,
+  [vars$a.hostWidth]: refs$1.width,
+  [vars$a.hostDirection]: refs$1.direction,
   [vars$a.iconMargin]: '0.375em',
-  [vars$a.overlay.marginTop]: `calc(${refs.outlineWidth} + 1px)`,
-  [vars$a.overlay.backgroundColor]: refs.backgroundColor,
+  [vars$a.overlay.marginTop]: `calc(${refs$1.outlineWidth} + 1px)`,
+  [vars$a.overlay.backgroundColor]: refs$1.backgroundColor,
   [vars$a.overlay.backdropBackgroundColor]: 'transparent',
   [vars$a.overlay.backdropPointerEvents]: 'all',
   [vars$a.overlay.boxShadow]: `${shadow.wide.xl} ${shadowColor$1}, ${shadow.narrow.xl} ${shadowColor$1}`,
@@ -16396,7 +17340,7 @@ const AppsListClass = compose$1(
   componentNameValidationMixin$1,
   customMixin
 )(
-  createProxy({
+  createProxy$1({
     slots: ['empty-state'],
     wrappedEleName: 'descope-list',
     excludeAttrsSync: ['tabindex', 'class', 'empty'],
@@ -16589,8 +17533,8 @@ const ScopesListClass = compose$1(
 const vars$6 = ScopesListClass.cssVarList;
 const scopesList = {
-  [vars$6.requiredInputBorderColor]: theme$1._disabled[vars$S.borderColor],
-  [vars$6.requiredInputValueTextColor]: theme$1._disabled[vars$S.valueTextColor],
+  [vars$6.requiredInputBorderColor]: theme$2._disabled[vars$T.borderColor],
+  [vars$6.requiredInputValueTextColor]: theme$2._disabled[vars$T.valueTextColor],
   [vars$6.hostWidth]: '280px',
   _fullWidth: {
     [vars$6.hostWidth]: '100%',
@@ -17220,8 +18164,8 @@ const securityQuestionsVerify = {
   _fullWidth: {
     [vars$3.hostWidth]: '100%',
   },
-  [vars$3.questionFontSize]: refs.fontSize,
-  [vars$3.questionFontFamily]: refs.fontFamily,
+  [vars$3.questionFontSize]: refs$1.fontSize,
+  [vars$3.questionFontFamily]: refs$1.fontFamily,
 };
 var securityQuestionsVerify$1 = /*#__PURE__*/Object.freeze({
@@ -17595,14 +18539,14 @@ const HybridFieldClass = compose$1(
 const vars$2 = HybridFieldClass.cssVarList;
 const hybridField = {
-  [vars$2.hostDirection]: refs.direction,
+  [vars$2.hostDirection]: refs$1.direction,
   // error message icon
-  [vars$2.errorMessageIcon]: refs.errorMessageIcon,
-  [vars$2.errorMessageIconSize]: refs.errorMessageIconSize,
-  [vars$2.errorMessageIconPadding]: refs.errorMessageIconPadding,
-  [vars$2.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
-  [vars$2.errorMessageIconPosition]: refs.errorMessageIconPosition,
+  [vars$2.errorMessageIcon]: refs$1.errorMessageIcon,
+  [vars$2.errorMessageIconSize]: refs$1.errorMessageIconSize,
+  [vars$2.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+  [vars$2.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+  [vars$2.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
   _fullWidth: {
     [vars$2.hostWidth]: '100%',
@@ -17729,7 +18673,7 @@ const alert = {
   [vars$1.horizontalPadding]: '0',
   [vars$1.verticalPadding]: '0',
   [vars$1.gap]: `0.5em`,
-  [vars$1.fontSize]: useVar(vars$G.fontSize),
+  [vars$1.fontSize]: useVar(vars$H.fontSize),
   mode: {
     error: {
@@ -17872,7 +18816,7 @@ const vars = Object.keys(components).reduce(
 );
 const defaultTheme = { globals: globals$1, components: theme };
-const themeVars = { globals: vars$U, components: vars };
+const themeVars = { globals: vars$V, components: vars };
 const colors = {
   surface: {
@@ -18203,7 +19147,7 @@ const NotificationMixin = (superclass) =>
       this.createCard();
       forwardAttrs$1(this, this.#card);
-      syncAttrs(this.#card, this, { includeAttrs: ['opened'] });
+      syncAttrs$1(this.#card, this, { includeAttrs: ['opened'] });
       this.baseElement.renderer = (cardRoot) => {
         Array.from(this.childNodes).forEach((child) => cardRoot.appendChild(child));
@@ -18239,7 +19183,7 @@ const NotificationClass = compose$1(
   hoverableMixin$1,
   NotificationMixin
 )(
-  createProxy({
+  createProxy$1({
     wrappedEleName: 'vaadin-notification',
     excludeAttrsSync: ['tabindex'],
     componentName,
@@ -18257,6 +19201,7 @@ exports.ButtonSelectionGroupItemClass = ButtonSelectionGroupItemClass;
 exports.CalendarClass = CalendarClass;
 exports.CheckboxClass = CheckboxClass;
 exports.CodeSnippetClass = CodeSnippetClass;
+exports.ComboBoxClass = ComboBoxClass;
 exports.ContainerClass = ContainerClass;
 exports.DateFieldClass = DateFieldClass;
 exports.DividerClass = DividerClass;