@descope/web-components-ui 1.0.114 → 1.0.115

package/dist/index.esm.js

@@ -267,14 +267,15 @@ const createClassSelectorSpecifier = (className, numOfRepeats) => Array(numOfRep
 
 const STYLE_OVERRIDE_ATTR_PREFIX = 'st';
 
-
 const createStyleMixin =
-	({ mappings = {} }) => (superclass) =>
-		class CustomStyleMixinClass extends superclass {
+	({ mappings = {}, componentNameOverride = '' }) => (superclass) => {
+		const componentName = componentNameOverride || superclass.componentName;
+
+		return class CustomStyleMixinClass extends superclass {
 			static get cssVarList() {
 				return {
 					...superclass.cssVarList,
-					...createCssVarsList(superclass.componentName, {
+					...createCssVarsList(componentName, {
 						...mappings,
 					})
 				};
@@ -313,30 +314,32 @@ const createStyleMixin =
 				this.#createOverridesStyle();
 			}
 
-			get componentTheme() {
-				return componentsThemeManager.currentTheme?.[superclass.componentName] || ''
+			get #componentTheme() {
+				return componentsThemeManager.currentTheme?.[componentName] || ''
 			}
 
 			#onComponentThemeChange() {
-				this.#themeStyleEle.innerHTML = this.componentTheme[this.#themeSection];
+				this.#themeStyleEle.innerHTML = this.#componentTheme[this.#themeSection];
 			}
 
 			#createComponentTheme() {
 				this.#themeStyleEle = document.createElement('style');
-				this.#themeStyleEle.id = 'style-mixin-theme';
+				this.#themeStyleEle.id = `style-mixin-theme__${componentName}`;
 				this.#rootElement.prepend(this.#themeStyleEle);
 				this.#disconnectThemeManager = componentsThemeManager.onCurrentThemeChange(this.#onComponentThemeChange.bind(this));
 				this.#onComponentThemeChange();
 			}
 
 			#createOverridesStyle() {
-				this.#overrideStyleEle = document.createElement('style');
-				this.#overrideStyleEle.id = 'style-mixin-overrides';
+				if (this.#styleAttributes.length) {
+					this.#overrideStyleEle = document.createElement('style');
+					this.#overrideStyleEle.id = `style-mixin-overrides__${componentName}`;
 
-				const classSpecifier = createClassSelectorSpecifier(superclass.componentName, CSS_SELECTOR_SPECIFIER_MULTIPLY);
+					const classSpecifier = createClassSelectorSpecifier(componentName, CSS_SELECTOR_SPECIFIER_MULTIPLY);
 
-				this.#overrideStyleEle.innerText = `:host(${classSpecifier}) {}`;
-				this.#rootElement.append(this.#overrideStyleEle);
+					this.#overrideStyleEle.innerText = `:host(${classSpecifier}) {}`;
+					this.#rootElement.append(this.#overrideStyleEle);
+				}
 			}
 
 			#setAttrOverride(attrName, value) {
@@ -344,37 +347,44 @@ const createStyleMixin =
 				if (!style) return;
 
 				const varName = getCssVarName(
-					superclass.componentName,
+					componentName,
 					attrName.replace(new RegExp(`^${STYLE_OVERRIDE_ATTR_PREFIX}-`), '')
 				);
 
 				if (value) style?.setProperty(varName, value);
-				else { 
+				else {
 					style?.removeProperty(varName);
 					this.removeAttribute(attrName);
 				}
 			}
 
 			#updateOverridesStyle(attrs = []) {
+				let shouldUpdate = false;
+
 				for (const attr of attrs) {
 					if (this.#styleAttributes.includes(attr)) {
 						this.#setAttrOverride(attr, this.getAttribute(attr));
+						shouldUpdate = true;
 					}
 				}
 
-				// we are rewriting the style back to the style tag
-				this.#overrideStyleEle.innerHTML = this.#overrideStyleEle?.sheet?.cssRules[0].cssText;
+				if (shouldUpdate) {
+					// we are rewriting the style back to the style tag
+					this.#overrideStyleEle.innerHTML = this.#overrideStyleEle?.sheet?.cssRules[0].cssText;
+				}
 			}
 
 			#createMappingStyle() {
-				const themeStyle = document.createElement('style');
-				themeStyle.id = 'style-mixin-mappings';
-				themeStyle.innerHTML = createStyle(
-					kebabCaseJoin(superclass.componentName, this.#componentNameSuffix),
-					this.#baseSelector,
-					mappings
-				);
-				this.#rootElement.prepend(themeStyle);
+				if (Object.keys(mappings).length) {
+					const themeStyle = document.createElement('style');
+					themeStyle.id = `style-mixin-mappings__${componentName}`;
+					themeStyle.innerHTML = createStyle(
+						kebabCaseJoin(componentName, this.#componentNameSuffix),
+						this.#baseSelector,
+						mappings
+					);
+					this.#rootElement.prepend(themeStyle);
+				}
 			}
 
 			#addClassName(className) {
@@ -384,7 +394,7 @@ const createStyleMixin =
 			init() {
 				super.init?.();
 				if (this.shadowRoot.isConnected) {
-					this.#addClassName(superclass.componentName);
+					this.#addClassName(componentName);
 
 					// this is instead attributeChangedCallback because we cannot use static methods in this case
 					observeAttributes(this, this.#updateOverridesStyle.bind(this), {});
@@ -396,7 +406,8 @@ const createStyleMixin =
 
 				this.#disconnectThemeManager?.();
 			}
-		};
+		}
+	};
 
 const draggableMixin = (superclass) =>
 	class DraggableMixinClass extends superclass {
@@ -713,13 +724,16 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
       stepMismatch,
       tooShort,
       tooLong,
+      rangeOverflow,
+      rangeUnderflow,
+      badInput,
       customError
     } = flags;
     switch (true) {
       case valueMissing:
         return this.getAttribute(errorAttributes.valueMissing) ||
           this.defaultErrorMsgValueMissing
-      case patternMismatch || typeMismatch || stepMismatch:
+      case patternMismatch || typeMismatch || stepMismatch || rangeOverflow || rangeUnderflow || badInput:
         return this.getAttribute(errorAttributes.patternMismatch) ||
           this.defaultErrorMsgPatternMismatch
       case tooShort:
@@ -939,10 +953,14 @@ const proxyInputMixin = (superclass) =>
 			propertyObserver(this, this.inputElement, 'selectionStart');
 			this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
 
-			forwardAttrs(this, this.inputElement, {includeAttrs: ['inputmode']});
+			forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] });
 		}
 	};
 
+const composedProxyInputMixin = compose(
+	proxyInputMixin,
+	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 
@@ -1099,17 +1117,19 @@ const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatching
   }
 };
 
-const componentName$n = getComponentName('button');
+const componentName$o = getComponentName('button');
 
 const resetStyles = `
 	:host {
 		display: inline-block;
+		box-sizing: border-box;
 	}
 	vaadin-button {
 		margin: 0;
 		min-width: 0;
 		width: 100%;
 		height: auto;
+		box-shadow: none;
 	}
 	vaadin-button::part(label) {
 		padding: 0;
@@ -1131,7 +1151,7 @@ const iconStyles = `
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 
-const { host: host$a, label: label$7 } = {
+const { host: host$c, label: label$9 } = {
 	host: { selector: () => ':host' },
 	label: { selector: '::part(label)' },
 };
@@ -1139,17 +1159,23 @@ const { host: host$a, label: label$7 } = {
 const ButtonClass = compose(
 	createStyleMixin({
 		mappings: {
-			color: {},
-			textDecoration: label$7,
-			fontSize: {},
+			hostWidth: { ...host$c, property: 'width' },
+			fontSize: { property: 'font-size' },
+			fontFamily: { property: 'font-family' },
+
 			cursor: {},
 			backgroundColor: {},
+
+			outlineOffset: {},
+			outlineColor: {},
+			outlineStyle: {},
+			outlineWidth: {},
+
 			borderRadius: {},
 			borderColor: {},
 			borderStyle: {},
 			borderWidth: {},
-			width: host$a,
-			gap: label$7,
+
 			verticalPadding: [
 				{ property: 'padding-top' },
 				{ property: 'padding-bottom' },
@@ -1157,7 +1183,12 @@ const ButtonClass = compose(
 			horizontalPadding: [
 				{ property: 'padding-left' },
 				{ property: 'padding-right' },
-			]
+			],
+
+			labelTextColor: { property: 'color' },
+			labelTextDecoration: { ...label$9, property: 'text-decoration' },
+			labelSpacing: { ...label$9, property: 'gap' },
+
 		}
 	}),
 	draggableMixin,
@@ -1171,9 +1202,12 @@ const ButtonClass = compose(
 			${iconStyles}
 			${loadingIndicatorStyles}
 			${editorOverrides}
+			:host {
+				padding: calc(var(${ButtonClass.cssVarList.outlineWidth}) + var(${ButtonClass.cssVarList.outlineOffset}))
+			}
 		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$n
+		componentName: componentName$o
 	})
 );
 
@@ -1206,7 +1240,7 @@ const loadingIndicatorStyles = `
 	}
 `;
 
-customElements.define(componentName$n, ButtonClass);
+customElements.define(componentName$o, ButtonClass);
 
 const createBaseInputClass = (...args) => compose(
   inputValidationMixin,
@@ -1215,7 +1249,7 @@ const createBaseInputClass = (...args) => compose(
   inputEventsDispatchingMixin
 )(createBaseClass(...args));
 
-const componentName$m = getComponentName('boolean-field-internal');
+const componentName$n = getComponentName('boolean-field-internal');
 
 const forwardAttributes$1 = [
 	'disabled',
@@ -1224,7 +1258,7 @@ const forwardAttributes$1 = [
 	'readonly'
 ];
 
-const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$m, baseSelector: 'div' });
+const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$n, baseSelector: 'div' });
 
 class BooleanInputInternal extends BaseInputClass$3 {
 	constructor() {
@@ -1288,14 +1322,14 @@ const booleanFieldMixin = (superclass) =>
 
             const template = document.createElement('template');
             template.innerHTML = `
-				<${componentName$m} 
+				<${componentName$n} 
 					tabindex="-1"
 					slot="input"
-				></${componentName$m}>
+				></${componentName$n}>
 			`;
 
             this.baseElement.appendChild(template.content.cloneNode(true));
-            this.inputElement = this.shadowRoot.querySelector(componentName$m);
+            this.inputElement = this.shadowRoot.querySelector(componentName$n);
             this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
             forwardAttrs(this, this.inputElement, {
@@ -1313,11 +1347,90 @@ const booleanFieldMixin = (superclass) =>
         }
     };
 
+const resetInputOverrides = (name, cssVarList) => `
+    ${resetInputContainer(name)}
+    ${resetInputCursor(name)}
+    ${resetInputPlaceholder(name)}
+    ${resetInputField(name)}
+    ${resetInputAutoFill(name, cssVarList)}
+
+    ${name}::before {
+		height: unset;
+	}
+
+    ${name} > input {
+		-webkit-mask-image: none;
+		min-height: 0;
+	}
+
+    ${name}::part(input-field)::after {
+		opacity: 0 !important;
+    }
+`;
+
+const resetInputContainer = (name) => `
+    ${name} {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+    }
+`;
+
+const resetInputField = (name) => `
+    ${name}::part(input-field) {
+        overflow: hidden;
+        padding: 0;
+        box-shadow: none;
+    }
+`;
+
+const resetInputCursor = (name) => `
+    ${name} > label,
+    ${name}::part(label),
+    ${name}::part(required-indicator) {
+        cursor: pointer;
+    }
+`;
+
+const resetInputPlaceholder = (name, ele = 'input') => `
+    ${name}[disabled] > ${ele}:placeholder-shown,
+	${name}[readonly] > ${ele}:placeholder-shown {
+		opacity: 1;
+	}    
+`;
+
+const resetInputAutoFill = (name, cssVarList) => `
+    ${name} input:-webkit-autofill,
+    ${name} input:-webkit-autofill::first-line,
+    ${name} input:-webkit-autofill:hover,
+    ${name} input:-webkit-autofill:active,
+    ${name} input:-webkit-autofill:focus {
+        -webkit-text-fill-color: var(${cssVarList.inputValueTextColor});
+        box-shadow: 0 0 0 var(${cssVarList.inputHeight}) var(${cssVarList.inputBackgroundColor}) inset;
+    } 
+`;
+
+const resetInputFieldDefaultWidth = () => `
+    :host {
+        --vaadin-field-default-width: auto;
+    }
+`;
+
+const resetInputReadonlyStyle = (name) => `
+    ${name}::part(input-field)::after {
+        opacity: 0;
+    }
+`;
+
 var commonStyles = `
 :host {
-	--vaadin-field-default-width: auto;
 	display: inline-flex;
 }
+
+${resetInputFieldDefaultWidth()}
+
 .wrapper {
 	display: flex;
 }
@@ -1347,9 +1460,6 @@ vaadin-text-field::part(input-field)::after {
 vaadin-text-field[focus-ring]::part(input-field) {
 	box-shadow: none;
 }
-vaadin-text-field[required]::part(required-indicator)::after {
-	content: "*";
-}
 
 vaadin-checkbox [slot="label"] {
     align-self: flex-start;
@@ -1371,138 +1481,155 @@ descope-boolean-field-internal {
 	min-height: 0;
 	padding: 0;
 }
+
+[slot="label"],
+vaadin-checkbox,
+vaadin-checkbox::part(checkbox) {
+	height: 100%;
+	cursor: pointer;
+}
 `;
 
-const componentName$l = getComponentName('checkbox');
+const componentName$m = getComponentName('checkbox');
 
 const {
-	host: host$9,
+	host: host$b,
 	component: component$1,
 	checkboxElement,
 	checkboxSurface,
 	checkboxHiddenLabel: checkboxHiddenLabel$1,
-	label: label$6,
-	requiredIndicator: requiredIndicator$5
+	label: label$8,
+	requiredIndicator: requiredIndicator$7,
+	helperText: helperText$7,
+	errorMessage: errorMessage$7
 } = {
 	host: { selector: () => ':host' },
 	label: { selector: '::part(label)' },
-	requiredIndicator: { selector: '::part(required-indicator)::after' },
+	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
 	component: { selector: 'vaadin-checkbox' },
 	checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
 	checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
 	checkboxHiddenLabel: { selector: 'vaadin-checkbox [slot="label"]' },
+	helperText: { selector: '::part(helper-text)' },
+	errorMessage: { selector: '::part(error-message)' },
 };
 
 const CheckboxClass = compose(
 	createStyleMixin({
 		mappings: {
-			width: host$9,
-			cursor: component$1,
+			hostWidth: { ...host$b, property: 'width' },
 
-			// Checkbox
-			checkboxBackgroundColor: { ...checkboxElement, property: 'background-color' },
-			checkboxRadius: { ...checkboxElement, property: 'border-radius' },
-
-			checkboxSize: [
-				{ ...checkboxElement, property: 'width' },
-				{ ...label$6, property: 'margin-left' },
-				{ ...checkboxElement, property: 'height' },
-				{ ...checkboxSurface, property: 'font-size' },
-				{ ...component$1, property: 'font-size' },
-				{ ...label$6, property: 'line-height' },
-				{ ...checkboxHiddenLabel$1, property: 'line-height' }
-			],
-
-			checkboxOutlineWidth: { ...checkboxElement, property: 'outline-width' },
-			checkboxOutlineOffset: { ...checkboxElement, property: 'outline-offset' },
-			checkboxOutlineColor: { ...checkboxElement, property: 'outline-color' },
-			checkboxOutlineStyle: { ...checkboxElement, property: 'outline-style' },
-
-			// Checkmark
-			checkmarkTextColor: { ...checkboxSurface, property: 'color' },
-
-			// Label
-			labelFontSize: [
-				{ ...host$9, property: 'font-size' },
+			fontSize: [
+				{ ...host$b, property: 'font-size' },
 				{ ...checkboxElement, property: 'font-size' },
-				{ ...label$6, property: 'font-size' },
+				{ ...label$8, property: 'font-size' },
 				{ ...checkboxHiddenLabel$1, property: 'font-size' }
 			],
+			fontFamily: [
+				{ ...label$8, property: 'font-family' },
+				{ ...checkboxHiddenLabel$1, property: 'font-family' },
+				{ ...helperText$7, property: 'font-family' },
+				{ ...errorMessage$7, property: 'font-family' }
+			],
+
+			labelTextColor: [
+				{ ...label$8, property: 'color' },
+				{ ...requiredIndicator$7, property: 'color' },
+			],
+			labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
+
 			labelFontWeight: [
-				{ ...label$6, property: 'font-weight' },
+				{ ...label$8, property: 'font-weight' },
 				{ ...checkboxHiddenLabel$1, property: 'font-weight' }
 			],
-			labelMargin: [
-				{ ...label$6, property: 'left' },
+			labelSpacing: [
+				{ ...label$8, property: 'left' },
 				{ ...checkboxHiddenLabel$1, property: 'padding-left' }
 			],
-			labelTextColor: [
-				{ ...label$6, property: 'color' },
-				{ ...requiredIndicator$5, property: 'color' },
+			inputValueTextColor: { ...checkboxSurface, property: 'color' },
+			inputBackgroundColor: { ...checkboxElement, property: 'background-color' },
+			inputBorderRadius: { ...checkboxElement, property: 'border-radius' },
+			inputOutlineWidth: { ...checkboxElement, property: 'outline-width' },
+			inputOutlineOffset: { ...checkboxElement, property: 'outline-offset' },
+			inputOutlineColor: { ...checkboxElement, property: 'outline-color' },
+			inputOutlineStyle: { ...checkboxElement, property: 'outline-style' },
+			inputSize: [
+				{ ...checkboxElement, property: 'width' },
+				{ ...label$8, property: 'margin-left' },
+				{ ...checkboxElement, property: 'height' },
+				{ ...checkboxSurface, property: 'font-size' },
+				{ ...component$1, property: 'font-size' },
+				{ ...label$8, property: 'line-height' },
+				{ ...checkboxHiddenLabel$1, property: 'line-height' }
 			],
 		},
 	}),
 	draggableMixin,
-	proxyInputMixin,
+	composedProxyInputMixin,
 	componentNameValidationMixin,
 	booleanFieldMixin
 )(
 	createProxy({
 		slots: [],
 		wrappedEleName: 'vaadin-text-field',
-		style: `
+		style: () => `
 		${commonStyles}
-
-		vaadin-checkbox [slot="label"] {
-			height: 100%;
-			cursor: pointer;
+		vaadin-text-field {
+			padding: calc(var(${CheckboxClass.cssVarList.inputOutlineWidth}) + var(${CheckboxClass.cssVarList.inputOutlineOffset}));
 		}
 		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$l
+		componentName: componentName$m
 	})
 );
 
-customElements.define(componentName$m, BooleanInputInternal);
+customElements.define(componentName$n, BooleanInputInternal);
 
-customElements.define(componentName$l, CheckboxClass);
+customElements.define(componentName$m, CheckboxClass);
 
-const componentName$k = getComponentName('switch-toggle');
+const componentName$l = getComponentName('switch-toggle');
 
 const {
-	host: host$8,
+	host: host$a,
 	component,
 	checkboxElement: track,
 	checkboxSurface: knob,
 	checkboxHiddenLabel,
-	label: label$5,
-	requiredIndicator: requiredIndicator$4,
+	label: label$7,
+	requiredIndicator: requiredIndicator$6,
+	helperText: helperText$6,
+	errorMessage: errorMessage$6
 } = {
 	host: { selector: () => ':host' },
 	label: { selector: '::part(label)' },
-	requiredIndicator: { selector: '::part(required-indicator)::after' },
+	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
 	component: { selector: 'vaadin-checkbox' },
 	checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
 	checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
 	checkboxHiddenLabel: { selector: 'vaadin-checkbox [slot="label"]' },
+	helperText: { selector: '::part(helper-text)' },
+	errorMessage: { selector: '::part(error-message)' },
 };
 
 const SwitchToggleClass = compose(
 	createStyleMixin({
 		mappings: {
-			width: host$8,
-			cursor: [component, checkboxHiddenLabel, track],
-			fontSize: [component, label$5, checkboxHiddenLabel],
-
-			// Track
+			hostWidth: { ...host$a, property: 'width' },
+			fontSize: [
+				{ ...component, property: 'font-size' },
+				{ ...label$7, property: 'font-size' },
+				{ ...checkboxHiddenLabel, property: 'font-size' },
+			],
+			fontFamily: [
+				{ ...label$7, property: 'font-family' },
+				{ ...helperText$6, property: 'font-family' },
+				{ ...errorMessage$6, property: 'font-family' }
+			],
 			trackBorderWidth: { ...track, property: 'border-width' },
 			trackBorderStyle: { ...track, property: 'border-style' },
 			trackBorderColor: { ...track, property: 'border-color' },
-
-			// Checkbox
 			trackBackgroundColor: { ...track, property: 'background-color' },
-			trackRadius: { ...track, property: 'border-radius' },
-
+			trackBorderRadius: { ...track, property: 'border-radius' },
 			trackWidth: [
 				{ ...track, property: 'width' },
 			],
@@ -1510,44 +1637,43 @@ const SwitchToggleClass = compose(
 				{ ...knob, property: 'font-size' },
 				{ ...track, property: 'height' }
 			],
-			switchOutlineWidth: { ...track, property: 'outline-width' },
-			switchOutlineOffset: { ...track, property: 'outline-offset' },
-			switchOutlineColor: { ...track, property: 'outline-color' },
-			switchOutlineStyle: { ...track, property: 'outline-style' },
 
-			// Knob
 			knobSize: [
 				{ ...knob, property: 'width' },
 				{ ...knob, property: 'height' },
 			],
 			knobTextColor: { ...knob, property: 'color' },
 			knobRadius: { ...knob, property: 'border-radius' },
-			knobTransition: { ...knob, property: 'transition' },
+			knobTransitionDuration: { ...knob, property: 'transition' },
 			knobColor: { ...knob, property: 'background-color' },
 			knobTopOffset: { ...knob, property: 'top' },
-			knobPosition: { ...knob, property: 'left' },
+			knobLeftOffset: { ...knob, property: 'left' },
 
-			// Label
-			labelMargin: [
-				{ ...label$5, property: 'padding-left' },
+			labelSpacing: [
+				{ ...label$7, property: 'padding-left' },
 				{ ...checkboxHiddenLabel, property: 'padding-left' }
 			],
 			labelLineHeight: [
-				{ ...label$5, property: 'line-height' },
+				{ ...label$7, property: 'line-height' },
 				{ ...checkboxHiddenLabel, property: 'line-height' }
 			],
 			labelFontWeight: [
-				{ ...label$5, property: 'font-weight' },
+				{ ...label$7, property: 'font-weight' },
 				{ ...checkboxHiddenLabel, property: 'font-weight' }
 			],
 			labelTextColor: [
-				{ ...label$5, property: 'color' },
-				{ ...requiredIndicator$4, property: 'color' },
+				{ ...label$7, property: 'color' },
+				{ ...requiredIndicator$6, property: 'color' },
 			],
+			labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
+			inputOutlineWidth: { ...track, property: 'outline-width' },
+			inputOutlineOffset: { ...track, property: 'outline-offset' },
+			inputOutlineColor: { ...track, property: 'outline-color' },
+			inputOutlineStyle: { ...track, property: 'outline-style' },
 		},
 	}),
 	draggableMixin,
-	proxyInputMixin,
+	composedProxyInputMixin,
 	componentNameValidationMixin,
 	booleanFieldMixin
 )(
@@ -1555,36 +1681,37 @@ const SwitchToggleClass = compose(
 		slots: [],
 		wrappedEleName: 'vaadin-text-field',
 		style: () => `
-		${commonStyles}
-
-		vaadin-text-field::part(label) {
-			left: calc(var(${SwitchToggleClass.cssVarList.trackWidth}) + var(${SwitchToggleClass.cssVarList.trackBorderWidth}) * 2);
-		}
-
-		vaadin-checkbox[active]::part(checkbox) {
-			transform: none;
-		}
-		vaadin-checkbox[checked]::part(checkbox) {
-			background: none;
-		}
-		vaadin-checkbox::part(checkbox)::after {
-			position: absolute;
-			opacity: 1;
-			content: '';
-		}
+			${commonStyles}
+			:host {
+				padding: calc(var(${SwitchToggleClass.cssVarList.inputOutlineWidth}) + var(${SwitchToggleClass.cssVarList.inputOutlineOffset}));
+			}
+			vaadin-text-field::part(label) {
+				left: calc(var(${SwitchToggleClass.cssVarList.trackWidth}) + var(${SwitchToggleClass.cssVarList.trackBorderWidth}) * 2);
+			}
+			vaadin-checkbox[active]::part(checkbox) {
+				transform: none;
+			}
+			vaadin-checkbox[checked]::part(checkbox) {
+				background: none;
+			}
+			vaadin-checkbox::part(checkbox)::after {
+				position: absolute;
+				opacity: 1;
+				content: '';
+			}
 		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$k
+		componentName: componentName$l
 	})
 );
 
-customElements.define(componentName$k, SwitchToggleClass);
+customElements.define(componentName$l, SwitchToggleClass);
 
-const componentName$j = getComponentName('loader-linear');
+const componentName$k = getComponentName('loader-linear');
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$k, baseSelector: ':host > div' }) {
 	static get componentName() {
-		return componentName$j;
+		return componentName$k;
 	}
 	constructor() {
 		super();
@@ -1605,7 +1732,6 @@ class RawLoaderLinear extends createBaseClass({ componentName: componentName$j,
 				position: absolute;
 				left: 0;
 			}
-
 			:host > div {
 				width: 100%;
 			}
@@ -1615,38 +1741,43 @@ class RawLoaderLinear extends createBaseClass({ componentName: componentName$j,
 	}
 }
 
-const selectors$3 = {
-	root: {},
+const selectors$1 = {
 	after: { selector: '::after' },
 	host: { selector: () => ':host' }
 };
 
-const { root: root$1, after: after$1, host: host$7 } = selectors$3;
+const { after: after$1, host: host$9 } = selectors$1;
 
 const LoaderLinearClass = compose(
 	createStyleMixin({
 		mappings: {
-			display: root$1,
-			width: host$7,
-			height: [root$1, after$1],
-			borderRadius: [root$1, after$1],
-			surfaceColor: [{ property: 'background-color' }],
-			barColor: [{ ...after$1, property: 'background-color' }],
+			hostDisplay: {},
+			hostWidth: { ...host$9, property: 'width' },
+			barHeight: [
+				{ property: 'height' },
+				{ ...after$1, property: 'height' }
+			],
+			barBorderRadius: [
+				{ property: 'border-radius' },
+				{ ...after$1, property: 'border-radius' }
+			],
+			barBackgroundColor: { property: 'background-color' },
+			barColor: { ...after$1, property: 'background-color' },
 			barWidth: { ...after$1, property: 'width' },
-			animationDuration: [root$1, after$1],
-			animationTimingFunction: [root$1, after$1],
-			animationIterationCount: [root$1, after$1]
+			animationDuration: [{}, after$1],
+			animationTimingFunction: [{}, after$1],
+			animationIterationCount: [{}, after$1]
 		}
 	}),
 	draggableMixin,
 	componentNameValidationMixin
 )(RawLoaderLinear);
 
-customElements.define(componentName$j, LoaderLinearClass);
+customElements.define(componentName$k, LoaderLinearClass);
 
-const componentName$i = getComponentName('loader-radial');
+const componentName$j = getComponentName('loader-radial');
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$i, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > div' }) {
 	constructor() {
 		super();
 
@@ -1672,17 +1803,18 @@ class RawLoaderRadial extends createBaseClass({ componentName: componentName$i,
 const LoaderRadialClass = compose(
 	createStyleMixin({
 		mappings: {
-			display: {},
-			width: {},
-			height: {},
-			spinnerWidth: { property: 'border-width' },
-			spinnerStyle: { property: 'border-style' },
-			spinnerRadius: { property: 'border-radius' },
-			spinnerTopColor: { property: 'border-top-color' },
-			spinnerBottomColor: { property: 'border-bottom-color' },
-			spinnerRightColor: { property: 'border-right-color' },
-			spinnerLeftColor: { property: 'border-left-color' },
-			color: {},
+			hostDisplay: { property: 'display' },
+			spinnerSize: [
+				{ property: 'width' },
+				{ property: 'height' }
+			],
+			spinnerBorderWidth: { property: 'border-width' },
+			spinnerBorderStyle: { property: 'border-style' },
+			spinnerBorderRadius: { property: 'border-radius' },
+			spinnerQuadrant1Color: { property: 'border-top-color' },
+			spinnerQuadrant2Color: { property: 'border-bottom-color' },
+			spinnerQuadrant3Color: { property: 'border-right-color' },
+			spinnerQuadrant4Color: { property: 'border-left-color' },
 			animationDuration: {},
 			animationTimingFunction: {},
 			animationIterationCount: {}
@@ -1692,11 +1824,11 @@ const LoaderRadialClass = compose(
 	componentNameValidationMixin
 )(RawLoaderRadial);
 
-customElements.define(componentName$i, LoaderRadialClass);
+customElements.define(componentName$j, LoaderRadialClass);
 
-const componentName$h = getComponentName('container');
+const componentName$i = getComponentName('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$i, baseSelector: ':host > slot' }) {
 	constructor() {
 		super();
 
@@ -1707,11 +1839,11 @@ class RawContainer extends createBaseClass({ componentName: componentName$h, bas
 				width: 100%;
 				height: 100%;
 				display: flex;
-				overflow: hidden;
+				overflow: auto;
 			}
 			:host {
 				display: inline-block;
-				overflow: auto;
+				overflow: hidden;
 			}
 		</style>
 		<slot></slot>
@@ -1722,8 +1854,8 @@ class RawContainer extends createBaseClass({ componentName: componentName$h, bas
 const ContainerClass = compose(
 	createStyleMixin({
 		mappings: {
-			height: { selector: () => ':host' },
-			width: { selector: () => ':host' },
+			hostHeight: { selector: () => ':host', property: 'height' },
+			hostWidth: { selector: () => ':host', property: 'width' },
 
 			verticalPadding: [
 				{ property: 'padding-top' },
@@ -1755,50 +1887,45 @@ const ContainerClass = compose(
 	componentNameValidationMixin
 )(RawContainer);
 
-customElements.define(componentName$h, ContainerClass);
+customElements.define(componentName$i, ContainerClass);
 
-const componentName$g = getComponentName('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$g, baseSelector: ':host > div' }) {
+const componentName$h = getComponentName('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > div' }) {
 	constructor() {
 		super();
 
 		this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-			:host {
-				display: inline-block;
-			}
-			:host > div {
-				display: flex;
-				height: 100%;
-				width: 100%;
-			}
-			:host > div::before,
-			:host > div::after {
-				content: '';
-				flex-grow: 1;
-			}
-
-			descope-text {
-				flex-grow: 0;
-				flex-shrink: 0;
-				min-width: fit-content;
-			}
-
-			:host(:empty) descope-text {
-				display: none;
-			}
-
-			:host([vertical="true"]) div {
-				width: fit-content;
-			}
-
-		</style>
-		<div>
-			<descope-text>
-				<slot></slot>
-			</descope-text>
-		</div>
-	`;
+			<style>
+				:host {
+					display: inline-block;
+				}
+				:host > div {
+					display: flex;
+					height: 100%;
+					width: 100%;
+				}
+				:host > div::before,
+				:host > div::after {
+					content: '';
+					flex-grow: 1;
+				}
+				descope-text {
+					flex-grow: 0;
+					flex-shrink: 0;
+				}
+				:host(:empty) descope-text {
+					display: none;
+				}
+				:host([vertical="true"]) div {
+					width: fit-content;
+				}
+			</style>
+			<div>
+				<descope-text>
+					<slot></slot>
+				</descope-text>
+			</div>
+		`;
 
 		this.textComponent = this.shadowRoot.querySelector('descope-text');
 
@@ -1808,41 +1935,65 @@ class RawDivider extends createBaseClass({ componentName: componentName$g, baseS
 	}
 }
 
-const selectors$2 = {
-	root: { selector: '' },
+const {
+	host: host$8,
+	before,
+	after,
+	text: text$3,
+} = {
+	host: { selector: () => ':host' },
 	before: { selector: '::before' },
 	after: { selector: '::after' },
 	text: { selector: 'descope-text' },
-	host: { selector: () => ':host' },
 };
 
-const { root, before, after, text: text$3, host: host$6 } = selectors$2;
-
 const DividerClass = compose(
 	createStyleMixin({
 		mappings: {
-			maxTextWidth: { ...text$3, property: 'max-width' },
-			minHeight: root,
-			alignItems: root,
-			alignSelf: root,
-			flexDirection: root,
-			textPadding: { ...text$3, property: 'padding' },
-			width: host$6,
-			padding: host$6,
-			backgroundColor: [before, after],
-			opacity: [before, after],
-			textWidth: { ...text$3, property: 'width' },
-			dividerHeight: [{ ...before, property: 'height' }, { ...after, property: 'height' }],
-			dividerWidth: [{ ...before, property: 'width' }, { ...after, property: 'width' }]
+			hostWidth: { ...host$8, property: 'width' },
+			hostPadding: { ...host$8, property: 'padding' },
+
+			minHeight: {},
+			alignItems: {},
+			alignSelf: {},
+			flexDirection: {},
+
+			labelTextWidth: { ...text$3, property: 'width' },
+			labelTextMaxWidth: { ...text$3, property: 'max-width' },
+			labelTextVerticalSpacing: [
+				{ ...text$3, property: 'padding-top' },
+				{ ...text$3, property: 'padding-bottom' }
+			],
+			labelTextHorizontalSpacing: [
+				{ ...text$3, property: 'padding-right' },
+				{ ...text$3, property: 'padding-left' }
+			],
+
+			stripeColor: [
+				{ ...before, property: 'background-color' },
+				{ ...after, property: 'background-color' }
+			],
+			stripeHorizontalThickness: [
+				{ ...before, property: 'height' },
+				{ ...after, property: 'height' }
+			],
+			stripeVerticalThickness: [
+				{ ...before, property: 'width' },
+				{ ...after, property: 'width' }
+			],
+			stripeColorOpacity: [
+				{ ...before, property: 'opacity' },
+				{ ...after, property: 'opacity' }
+			],
 		},
 	}),
 	draggableMixin,
 	componentNameValidationMixin
 )(RawDivider);
 
-const componentName$f = getComponentName('text');
+const componentName$g = getComponentName('text');
 
-class RawText extends createBaseClass({ componentName: componentName$f, baseSelector: ':host > slot' }) {
+class RawText extends createBaseClass({ componentName: componentName$g, baseSelector: ':host > slot' }) {
 	constructor() {
 		super();
 
@@ -1864,147 +2015,138 @@ class RawText extends createBaseClass({ componentName: componentName$f, baseSele
 const TextClass = compose(
 	createStyleMixin({
 		mappings: {
+			hostWidth: { selector: () => ':host', property: 'width' },
+			fontSize: { property: 'font-size' },
+			textColor: { property: 'color' },
+			textLineHeight: { property: 'line-height' },
+			textLetterSpacing: { property: 'letter-spacing' },
+			textShadow: {},
+			textAlign: {},
+			textTransform: {},
 			fontFamily: {},
-			lineHeight: {},
 			fontStyle: {},
-			fontSize: {},
 			fontWeight: {},
-			width: { selector: () => ':host' },
-			color: {},
-			letterSpacing: {},
-			textShadow: {},
 			borderWidth: {},
 			borderStyle: {},
 			borderColor: {},
-			textTransform: {},
-			textAlign: {},
 		},
 	}),
 	draggableMixin,
 	componentNameValidationMixin
 )(RawText);
 
-customElements.define(componentName$f, TextClass);
+customElements.define(componentName$g, TextClass);
 
-customElements.define(componentName$g, DividerClass);
+customElements.define(componentName$h, DividerClass);
 
-const selectors$1 = {
-	label: '::part(label)',
-	inputWrapper: '::part(input-field)',
-	readOnlyInput: '[readonly]::part(input-field)::after',
-	placeholder: '> input:placeholder-shown',
-	host: () => ':host',
-	input: 'input'
+const {
+	host: host$7,
+	label: label$6,
+	placeholder: placeholder$2,
+	requiredIndicator: requiredIndicator$5,
+	inputField: inputField$4,
+	input,
+	readOnlyInput,
+	helperText: helperText$5,
+	errorMessage: errorMessage$5
+} = {
+	host: { selector: () => ':host' },
+	label: { selector: '::part(label)' },
+	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+	placeholder: { selector: '> input:placeholder-shown' },
+	inputField: { selector: '::part(input-field)' },
+	input: { selector: 'input' },
+	readOnlyInput: { selector: '[readonly]::part(input-field)::after' },
+	helperText: { selector: '::part(helper-text)' },
+	errorMessage: { selector: '::part(error-message)' }
 };
 
 var textFieldMappings = {
-	backgroundColor: { selector: selectors$1.inputWrapper },
-	labelTextColor: { selector: selectors$1.label, property: 'color' },
-	color: { selector: selectors$1.inputWrapper },
-	width: { selector: selectors$1.host },
-	borderColor: [
-		{ selector: selectors$1.inputWrapper },
-		{ selector: selectors$1.readOnlyInput }
+	// we apply font-size also on the host so we can set its width with em
+	fontSize: [
+		{ property: 'font-size' },
+		{ ...host$7, property: 'font-size' }
 	],
-	borderWidth: [
-		{ selector: selectors$1.inputWrapper },
-		{ selector: selectors$1.readOnlyInput }
+	fontFamily: [
+		{ ...label$6, property: 'font-family' },
+		{ ...inputField$4, property: 'font-family' },
+		{ ...helperText$5, property: 'font-family' },
+		{ ...errorMessage$5, property: 'font-family' }
 	],
-	borderStyle: [
-		{ selector: selectors$1.inputWrapper },
-		{ selector: selectors$1.readOnlyInput }
+
+	hostWidth: { ...host$7, property: 'width' },
+
+	inputBackgroundColor: { ...inputField$4, property: 'background-color' },
+
+	labelTextColor: [
+		{ ...label$6, property: 'color' },
+		{ ...requiredIndicator$5, property: 'color' }
 	],
-	borderRadius: { selector: selectors$1.inputWrapper },
-	boxShadow: { selector: selectors$1.inputWrapper },
 
-	// we apply font-size also on the host so we can set its width with em
-	fontSize: [{}, { selector: selectors$1.host }],
-
-	height: { selector: selectors$1.inputWrapper },
-	padding: { selector: selectors$1.inputWrapper },
-	margin: { selector: selectors$1.inputWrapper },
-	caretColor: { selector: selectors$1.input },
-	outlineColor: { selector: selectors$1.inputWrapper },
-	outlineStyle: { selector: selectors$1.inputWrapper },
-	outlineWidth: [
-		{ selector: selectors$1.inputWrapper },
-		// we need to make sure there is enough space for the outline
-		{ property: 'padding' }
+	inputValueTextColor: { ...inputField$4, property: 'color' },
+	inputCaretTextColor: { ...input, property: 'color' },
+
+	labelRequiredIndicator: { ...requiredIndicator$5, property: 'content' },
+
+	inputBorderColor: [
+		{ ...inputField$4, property: 'border-color' },
+		{ ...readOnlyInput, property: 'border-color' }
 	],
-	outlineOffset: { selector: selectors$1.inputWrapper },
-	textAlign: { selector: selectors$1.input },
-	placeholderColor: { selector: selectors$1.placeholder, property: 'color' }
-};
+	inputBorderWidth: [
+		{ ...inputField$4, property: 'border-width' },
+		{ ...readOnlyInput, property: 'border-width' }
+	],
+	inputBorderStyle: [
+		{ ...inputField$4, property: 'border-style' },
+		{ ...readOnlyInput, property: 'border-style' }
+	],
+	inputBorderRadius: { ...inputField$4, property: 'border-radius' },
+
+	inputHeight: { ...inputField$4, property: 'height' },
+	inputPadding: { ...inputField$4, property: 'padding' },
+
+	inputOutlineColor: { ...inputField$4, property: 'outline-color' },
+	inputOutlineStyle: { ...inputField$4, property: 'outline-style' },
+	inputOutlineWidth: { ...inputField$4, property: 'outline-width' },
+	inputOutlineOffset: { ...inputField$4, property: 'outline-offset' },
+
+	inputTextAlign: { ...input, property: 'text-align' },
 
-const componentName$e = getComponentName('email-field');
+	inputPlaceholderColor: { ...placeholder$2, property: 'color' }
+};
 
-let overrides$4 = ``;
+const componentName$f = getComponentName('email-field');
 
 const EmailFieldClass = compose(
 	createStyleMixin({
-		mappings: {
-			...textFieldMappings
-		}
+		mappings: textFieldMappings
 	}),
 	draggableMixin,
-	proxyInputMixin,
+	composedProxyInputMixin,
 	componentNameValidationMixin
 )(
 	createProxy({
 		slots: ['suffix'],
 		wrappedEleName: 'vaadin-email-field',
-		style: () => overrides$4,
+		style: () => `
+			:host {
+				display: inline-block;
+				max-width: 100%;
+				min-width: 10em;
+				padding: calc(var(${EmailFieldClass.cssVarList.inputOutlineWidth}) + var(${EmailFieldClass.cssVarList.inputOutlineOffset}))
+			}
+			${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}		
+		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$e
+		componentName: componentName$f
 	})
 );
 
-overrides$4 = `
-	:host {
-		display: inline-block;
-		min-width: 10em;
-		max-width: 100%;
-	}
-	vaadin-email-field {
-		margin: 0;
-		width: 100%;
-		box-sizing: border-box;
-	}
-	vaadin-email-field::before {
-		height: 0;
-	}
-	vaadin-email-field > input {
-		-webkit-mask-image: none;
-	}
-	vaadin-email-field::part(input-field) {
-		overflow: hidden;
-		padding: 0;
-	}
-	vaadin-email-field[readonly] > input:placeholder-shown {
-		opacity: 1;
-	}
-	vaadin-email-field input:-webkit-autofill,
-	vaadin-email-field input:-webkit-autofill::first-line,
-	vaadin-email-field input:-webkit-autofill:hover,
-	vaadin-email-field input:-webkit-autofill:active,
-	vaadin-email-field input:-webkit-autofill:focus {
-		-webkit-text-fill-color: var(${EmailFieldClass.cssVarList.color});
-		box-shadow: 0 0 0 var(${EmailFieldClass.cssVarList.height}) var(${EmailFieldClass.cssVarList.backgroundColor}) inset;
-	}
-	vaadin-email-field[required]::part(required-indicator)::after {
-		content: "*";
-		color: var(${EmailFieldClass.cssVarList.color});
-	}
-	vaadin-email-field[readonly]::part(input-field)::after {
-		border: 0 solid;
-	}
-`;
-
-customElements.define(componentName$e, EmailFieldClass);
+customElements.define(componentName$f, EmailFieldClass);
 
-const componentName$d = getComponentName('link');
+const componentName$e = getComponentName('link');
 
-class RawLink extends createBaseClass({ componentName: componentName$d, baseSelector: ':host a' }) {
+class RawLink extends createBaseClass({ componentName: componentName$e, baseSelector: ':host a' }) {
 	constructor() {
 		super();
 
@@ -2046,32 +2188,35 @@ const selectors = {
 	text: { selector: () => TextClass.componentName }
 };
 
-const { anchor, text: text$2, host: host$5, wrapper } = selectors;
+const { anchor, text: text$2, host: host$6, wrapper } = selectors;
 
 const LinkClass = compose(
 	createStyleMixin({
 		mappings: {
-			width: host$5,
+			hostWidth: { ...host$6, property: 'width' },
 			textAlign: wrapper,
-			color: [anchor, { ...text$2, property: TextClass.cssVarList.color }],
+			textColor: [
+				{ ...anchor, property: 'color' },
+				{ ...text$2, property: TextClass.cssVarList.textColor }
+			],
 			cursor: anchor,
-			borderBottomWidth: anchor,
-			borderBottomStyle: anchor,
-			borderBottomColor: anchor
+			textUnderlineWidth: { ...anchor, property: 'border-bottom-width' },
+			textUnderlineStyle: { ...anchor, property: 'border-bottom-style' },
+			textUnderlineColor: { ...anchor, property: 'border-bottom-color' }
 		},
 	}),
 	draggableMixin,
 	componentNameValidationMixin
 )(RawLink);
 
-customElements.define(componentName$d, LinkClass);
+customElements.define(componentName$e, LinkClass);
 
-const componentName$c = getComponentName('logo');
+const componentName$d = getComponentName('logo');
 
 let style;
 const getStyle = () => style;
 
-class RawLogo extends createBaseClass({ componentName: componentName$c, baseSelector: ':host > div' }) {
+class RawLogo extends createBaseClass({ componentName: componentName$d, baseSelector: ':host > div' }) {
 	constructor() {
 		super();
 
@@ -2113,69 +2258,36 @@ style = `
 }
 `;
 
-customElements.define(componentName$c, LogoClass);
+customElements.define(componentName$d, LogoClass);
 
-const componentName$b = getComponentName('number-field');
-
-let overrides$3 = ``;
+const componentName$c = getComponentName('number-field');
 
 const NumberFieldClass = compose(
 	createStyleMixin({
-		mappings: {
-			...textFieldMappings
-		}
+		mappings: textFieldMappings
 	}),
 	draggableMixin,
-	proxyInputMixin,
+	composedProxyInputMixin,
 	componentNameValidationMixin
 )(
 	createProxy({
 		slots: ['prefix', 'suffix'],
 		wrappedEleName: 'vaadin-number-field',
-		style: () => overrides$3,
-		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$b
-	})
-);
-
-overrides$3 = `
-	:host {
-		display: inline-block;
-		min-width: 10em;
-		max-width: 100%;
-	}
-	vaadin-number-field {
-		margin: 0;
-		padding: 0;
-		width: 100%;
-	}
-	vaadin-number-field > input {
-		-webkit-mask-image: none;
-	}
-	vaadin-number-field::part(input-field) {
-		padding: 0;
-	}
-	vaadin-number-field[readonly] > input:placeholder-shown {
-		opacity: 1;
-	}
-	vaadin-number-field input:-webkit-autofill,
-	vaadin-number-field input:-webkit-autofill::first-line,
-	vaadin-number-field input:-webkit-autofill:hover,
-	vaadin-number-field input:-webkit-autofill:active,
-	vaadin-number-field input:-webkit-autofill:focus {
-		-webkit-text-fill-color: var(${NumberFieldClass.cssVarList.color});
-		box-shadow: 0 0 0 var(${NumberFieldClass.cssVarList.height}) var(${NumberFieldClass.cssVarList.backgroundColor}) inset;
-	}
-	vaadin-number-field[required]::part(required-indicator)::after {
-		content: "*";
-		color: var(${NumberFieldClass.cssVarList.color});
-	}
-	vaadin-number-field[readonly]::part(input-field)::after {
-		border: 0 solid;
-	}
-`;
+		style: () => `
+			:host {
+				display: inline-block;
+				max-width: 100%;
+				min-width: 10em;
+				padding: calc(var(${NumberFieldClass.cssVarList.inputOutlineWidth}) + var(${NumberFieldClass.cssVarList.inputOutlineOffset}));
+			}
+			${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
+		`,
+		excludeAttrsSync: ['tabindex'],
+		componentName: componentName$c
+	})
+);
 
-customElements.define(componentName$b, NumberFieldClass);
+customElements.define(componentName$c, NumberFieldClass);
 
 const focusElement = (ele) => {
 	ele?.focus();
@@ -2191,7 +2303,7 @@ const getSanitizedCharacters = (str) => {
 	return [...pin]; // creating array of chars
 };
 
-const componentName$a = getComponentName('passcode-internal');
+const componentName$b = getComponentName('passcode-internal');
 
 const observedAttributes$2 = [
 	'digits'
@@ -2205,7 +2317,7 @@ const forwardAttributes = [
 	'readonly'
 ];
 
-const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$a, baseSelector: 'div' });
+const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$b, baseSelector: 'div' });
 
 class PasscodeInternal extends BaseInputClass$2 {
 	static get observedAttributes() {
@@ -2213,7 +2325,7 @@ class PasscodeInternal extends BaseInputClass$2 {
 	}
 
 	static get componentName() {
-		return componentName$a;
+		return componentName$b;
 	}
 
 	constructor() {
@@ -2376,9 +2488,7 @@ class PasscodeInternal extends BaseInputClass$2 {
 	}
 }
 
-const componentName$9 = getComponentName('text-field');
-
-let overrides$2 = ``;
+const componentName$a = getComponentName('text-field');
 
 const observedAttrs = ['type'];
 
@@ -2407,70 +2517,29 @@ const TextFieldClass = compose(
 		mappings: textFieldMappings
 	}),
 	draggableMixin,
-	proxyInputMixin,
+	composedProxyInputMixin,
 	componentNameValidationMixin,
 	customMixin$3
 )(
 	createProxy({
 		slots: ['prefix', 'suffix'],
 		wrappedEleName: 'vaadin-text-field',
-		style: () => overrides$2,
+		style: () => `
+			:host {
+				display: inline-block;
+				max-width: 100%;
+				min-width: 10em;
+				padding: calc(var(${TextFieldClass.cssVarList.inputOutlineWidth}) + var(${TextFieldClass.cssVarList.inputOutlineOffset}));
+			}
+			${resetInputFieldDefaultWidth()}
+			${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
+		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$9
+		componentName: componentName$a
 	})
 );
 
-overrides$2 = `
-	:host {
-		display: inline-block;
-		--vaadin-field-default-width: auto;
-		max-width: 100%;
-		min-width: 10em;
-
-	}
-	vaadin-text-field {
-		margin: 0;
-		width: 100%;
-		height: 100%;
-		box-sizing: border-box;
-	}
-
-	vaadin-text-field::part(input-field) {
-		overflow: hidden;
-		padding: 0;
-	}
-	vaadin-text-field[disabled] > input:placeholder-shown,
-	vaadin-text-field[readonly] > input:placeholder-shown {
-		opacity: 1;
-	}
-	vaadin-text-field input:-webkit-autofill,
-	vaadin-text-field input:-webkit-autofill::first-line,
-	vaadin-text-field input:-webkit-autofill:hover,
-	vaadin-text-field input:-webkit-autofill:active,
-	vaadin-text-field input:-webkit-autofill:focus {
-		-webkit-text-fill-color: var(${TextFieldClass.cssVarList.color});
-		box-shadow: 0 0 0 var(${TextFieldClass.cssVarList.height}) var(${TextFieldClass.cssVarList.backgroundColor}) inset;
-	}
-
-	vaadin-text-field > input {
-		-webkit-mask-image: none;
-		min-height: 0;
-	}
-
-	vaadin-text-field[required]::part(required-indicator)::after {
-		content: "*";
-		color: var(${TextFieldClass.cssVarList.color});
-	}
-	vaadin-text-field::part(input-field)::after {
-		opacity: 0 !important;
-	}
-
-	vaadin-text-field::before {
-		height: unset;
-	}
-`;
-
-const componentName$8 = getComponentName('passcode');
+const componentName$9 = getComponentName('passcode');
 
 const observedAttributes$1 = [
 	'digits'
@@ -2495,17 +2564,17 @@ const customMixin$2 = (superclass) =>
 			const template = document.createElement('template');
 
 			template.innerHTML = `
-			<${componentName$a} 
+			<${componentName$b} 
 				bordered="true" 
 				name="code" 
 				tabindex="-1"
 				slot="input"
-			></${componentName$a}>
+			></${componentName$b}>
 			`;
 
 			this.baseElement.appendChild(template.content.cloneNode(true));
 
-			this.inputElement = this.shadowRoot.querySelector(componentName$a);
+			this.inputElement = this.shadowRoot.querySelector(componentName$b);
 
 			forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
 		}
@@ -2519,10 +2588,15 @@ const customMixin$2 = (superclass) =>
 		}
 	};
 
-const { borderStyle, borderWidth, ...restTextFieldMappings } =
-	textFieldMappings;
-
-const { digitField, label: label$4, requiredIndicator: requiredIndicator$3, internalWrapper, focusedDigitField } = {
+const {
+	host: host$5,
+	digitField,
+	label: label$5,
+	requiredIndicator: requiredIndicator$4,
+	internalWrapper,
+	focusedDigitField
+} = {
+	host: () => ':host',
 	focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
 	digitField: { selector: () => TextFieldClass.componentName },
 	label: { selector: '::part(label)' },
@@ -2535,26 +2609,29 @@ const textVars$1 = TextFieldClass.cssVarList;
 const PasscodeClass = compose(
 	createStyleMixin({
 		mappings: {
-			...restTextFieldMappings,
-			borderColor: { ...digitField, property: textVars$1.borderColor },
-			outlineColor: { ...digitField, property: textVars$1.outlineColor },
-			outlineWidth: [
-				{ ...digitField, property: textVars$1.outlineWidth },
-				// we want to leave enough space to the digits outline, 
-				// ideally, this would be part of the text field
-				{ ...internalWrapper, property: 'padding' }
+			hostWidth: { property: 'width' },
+			fontFamily: host$5,
+			labelTextColor: [
+				{ ...label$5, property: 'color' },
+				{ ...requiredIndicator$4, property: 'color' },
 			],
-			color: [restTextFieldMappings.color, label$4, requiredIndicator$3],
-			padding: { ...digitField, property: textVars$1.padding },
-			margin: { ...digitField, property: textVars$1.margin },
-			textAlign: { ...digitField, property: textVars$1.textAlign },
-			caretColor: { ...digitField, property: textVars$1.caretColor },
-			digitsGap: { ...internalWrapper, property: 'gap' },
-			focusedDigitFieldOutlineColor: { ...focusedDigitField, property: textVars$1.outlineColor }
+			labelRequiredIndicator: { ...requiredIndicator$4, property: 'content' },
+			digitValueTextColor: {
+				selector: TextFieldClass.componentName,
+				property: textVars$1.inputValueTextColor
+			},
+			digitPadding: { ...digitField, property: textVars$1.inputPadding },
+			digitTextAlign: { ...digitField, property: textVars$1.inputTextAlign },
+			digitCaretTextColor: { ...digitField, property: textVars$1.inputCaretTextColor },
+			digitSpacing: { ...internalWrapper, property: 'gap' },
+			digitOutlineColor: { ...digitField, property: textVars$1.inputOutlineColor },
+			digitOutlineWidth: { ...digitField, property: textVars$1.inputOutlineWidth },
+
+			focusedDigitFieldOutlineColor: { ...focusedDigitField, property: textVars$1.inputOutlineColor }
 		},
 	}),
 	draggableMixin,
-	proxyInputMixin,
+	composedProxyInputMixin,
 	componentNameValidationMixin,
 	customMixin$2
 )(
@@ -2563,11 +2640,11 @@ const PasscodeClass = compose(
 		wrappedEleName: 'vaadin-text-field',
 		style: () => `
 			:host {
-				--vaadin-field-default-width: auto;
 				display: inline-block;
 				max-width: 100%;
 				min-width: calc(var(--passcode-digits-count) * 2em);
 			}
+			${resetInputFieldDefaultWidth()}
 			:host::after {
 				background-color: transparent;
 			}
@@ -2592,7 +2669,7 @@ const PasscodeClass = compose(
 
 			descope-passcode-internal descope-text-field {
 				min-width: 2em;
-				max-width: var(${textVars$1.height});
+				max-width: var(${textVars$1.inputHeight});
 			}
 
 			vaadin-text-field::part(input-field) {
@@ -2616,27 +2693,26 @@ const PasscodeClass = compose(
 				opacity: 1;
 			}
 
-			vaadin-text-field::part(input-field):focus {
-				cursor: text;
-			}
-
-			vaadin-text-field[required]::part(required-indicator)::after {
-				content: "*";
-			}
 			vaadin-text-field[readonly]::part(input-field)::after {
 				border: 0 solid;
 			}
+
+			vaadin-text-field::part(input-field) {
+				box-shadow: none;
+			}
+
+			${resetInputCursor('vaadin-text-field')}
     	`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$8
+		componentName: componentName$9
 	})
 );
 
-customElements.define(componentName$9, TextFieldClass);
+customElements.define(componentName$a, TextFieldClass);
 
-customElements.define(componentName$a, PasscodeInternal);
+customElements.define(componentName$b, PasscodeInternal);
 
-customElements.define(componentName$8, PasscodeClass);
+customElements.define(componentName$9, PasscodeClass);
 
 const passwordDraggableMixin = (superclass) => class PasswordDraggableMixinClass extends superclass {
 	get isReadOnly() {
@@ -2671,94 +2747,97 @@ const passwordDraggableMixin = (superclass) => class PasswordDraggableMixinClass
 	}
 };
 
-const componentName$7 = getComponentName('password-field');
+const componentName$8 = getComponentName('password-field');
 
 const {
 	host: host$4,
-	inputWrapper: inputWrapper$1,
+	inputField: inputField$3,
 	inputElement,
 	inputElementPlaceholder,
-	revealButton,
 	revealButtonIcon,
-	revealButtonIconOutline,
-	label: label$3,
-	requiredIndicator: requiredIndicator$2
+	label: label$4,
+	requiredIndicator: requiredIndicator$3,
+	errorMessage: errorMessage$4,
+	helperText: helperText$4
 } = {
 	host: { selector: () => ':host' },
-	inputWrapper: { selector: '::part(input-field)' },
+	inputField: { selector: '::part(input-field)' },
 	inputElement: { selector: '> input' },
 	inputElementPlaceholder: { selector: '> input:placeholder-shown' },
-	revealButton: { selector: 'vaadin-password-field-button' },
 	revealButtonIcon: { selector: () => '::part(reveal-button)::before' },
-	revealButtonIconOutline: { selector: () => 'vaadin-password-field-button[focus-ring]' },
 	label: { selector: '::part(label)' },
-	requiredIndicator: { selector: '::part(required-indicator)::after' },
+	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+	helperText: { selector: '::part(helper-text)' },
+	errorMessage: { selector: '::part(error-message)' }
 };
 
 const PasswordFieldClass = compose(
 	createStyleMixin({
 		mappings: {
-			width: host$4,
-			wrapperBorderStyle: { ...inputWrapper$1, property: 'border-style' },
-			wrapperBorderWidth: { ...inputWrapper$1, property: 'border-width' },
-			wrapperBorderColor: { ...inputWrapper$1, property: 'border-color' },
-			wrapperBorderRadius: { ...inputWrapper$1, property: 'border-radius' },
-
-			revealButtonOutlineBoxShadow: [
-				{
-					...revealButtonIconOutline,
-					property: 'box-shadow'
-				}
+			hostWidth: { ...host$4, property: 'width' },
+			fontSize: [
+				{ property: 'font-size' },
+				{ ...host$4, property: 'font-size' }
 			],
+			fontFamily: [
+				label$4,
+				inputField$3,
+				errorMessage$4,
+				helperText$4
+			],
+			inputHeight: { ...inputField$3, property: 'height' },
+			inputBackgroundColor: { ...inputField$3, property: 'background-color' },
+
+			inputBorderStyle: { ...inputField$3, property: 'border-style' },
+			inputBorderWidth: { ...inputField$3, property: 'border-width' },
+			inputBorderColor: { ...inputField$3, property: 'border-color' },
+			inputBorderRadius: { ...inputField$3, property: 'border-radius' },
+
+			inputOutlineColor: { ...inputField$3, property: 'outline-color' },
+			inputOutlineStyle: { ...inputField$3, property: 'outline-style' },
+			inputOutlineOffset: { ...inputField$3, property: 'outline-offset' },
+			inputOutlineWidth: { ...inputField$3, property: 'outline-width' },
 
 			labelTextColor: [
-				{ ...label$3, property: 'color' },
-				{ ...requiredIndicator$2, property: 'color' }
+				{ ...label$4, property: 'color' },
+				{ ...requiredIndicator$3, property: 'color' }
 			],
-			inputTextColor: [
+			labelRequiredIndicator: { ...requiredIndicator$3, property: 'content' },
+
+			inputValueTextColor: [
 				{ ...inputElement, property: 'color' },
 				{ ...revealButtonIcon, property: 'color' }
 			],
-			placeholderTextColor: { ...inputElementPlaceholder, property: 'color' },
-			fontSize: [{}, host$4],
-			height: inputWrapper$1,
-			padding: inputWrapper$1,
-			pointerCursor: [
-				{ ...revealButton, property: 'cursor' },
-				{ ...label$3, property: 'cursor' },
-				{ ...requiredIndicator$2, property: 'cursor' }
-			],
-			outlineColor: inputWrapper$1,
-			outlineStyle: inputWrapper$1,
-			outlineWidth: [
-				inputWrapper$1,
-				// we need to make sure there is enough space for the outline
-				{ property: 'padding' }
-			],
-			backgroundColor: inputWrapper$1
+			inputPlaceholderTextColor: { ...inputElementPlaceholder, property: 'color' },
 		}
 	}),
 	draggableMixin,
-	proxyInputMixin,
+	composedProxyInputMixin,
 	componentNameValidationMixin,
 	passwordDraggableMixin
 )(
 	createProxy({
 		slots: ['suffix'],
 		wrappedEleName: 'vaadin-password-field',
-		style: `
+		style: () => `
 			:host {
 				display: inline-block;
 				min-width: 10em;
 				max-width: 100%;
+				box-sizing: border-box;				
+				padding: calc(var(${PasswordFieldClass.cssVarList.inputOutlineWidth}) + var(${PasswordFieldClass.cssVarList.inputOutlineOffset}));
 			}
 			vaadin-password-field {
 				width: 100%;
 				box-sizing: border-box;
+				padding: 0;
 			}
 			vaadin-password-field::part(input-field) {
 				padding: 0;
 			}
+			vaadin-password-field[focus-ring]::part(input-field) {
+				box-shadow: none;
+			}			
 			vaadin-password-field > input {
 				min-height: 0;
 				-webkit-mask-image: none;
@@ -2771,109 +2850,115 @@ const PasswordFieldClass = compose(
 			}
 			vaadin-password-field::part(input-field)::after {
 				opacity: 0;
-			}	
-			vaadin-password-field[required]::part(required-indicator)::after {
-				content: "*";
 			}
+			vaadin-password-field-button {
+				cursor: pointer;
+			}
+
+			${resetInputCursor('vaadin-password-field')}
+
 			[readonly] vaadin-password-field-button {
 				pointer-events: none;
 			}
+
+			vaadin-password-field-button[focus-ring] {
+				box-shadow: 0 0 0 2px var(${PasswordFieldClass.cssVarList.inputOutlineColor});
+			}
 		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$7
+		componentName: componentName$8
 	})
 );
 
-customElements.define(componentName$7, PasswordFieldClass);
+customElements.define(componentName$8, PasswordFieldClass);
 
-const componentName$6 = getComponentName('text-area');
+const componentName$7 = getComponentName('text-area');
 
 const {
 	host: host$3,
+	label: label$3,
 	placeholder: placeholder$1,
-	input: input$1,
+	inputField: inputField$2,
 	textArea: textArea$2,
-	label: label$2,
-	requiredIndicator: requiredIndicator$1
+	requiredIndicator: requiredIndicator$2,
+	helperText: helperText$3,
+	errorMessage: errorMessage$3
 } = {
 	host: { selector: () => ':host' },
-	textArea: { selector: '> textarea' },
 	label: { selector: '::part(label)' },
-	input: { selector: '::part(input-field)' },
 	placeholder: { selector: 'textarea:placeholder-shown' },
-	requiredIndicator: { selector: '::part(required-indicator)::after' },
+	inputField: { selector: '::part(input-field)' },
+	textArea: { selector: '> textarea' },
+	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+	helperText: { selector: '::part(helper-text)' },
+	errorMessage: { selector: '::part(error-message)' }
 };
 
-let overrides$1 = ``;
-
 const TextAreaClass = compose(
 	createStyleMixin({
 		mappings: {
-			fontSize: [host$3, textArea$2],
-			resize: textArea$2,
-			color: textArea$2,
-			cursor: {},
-			labelColor: [
-				{ ...label$2, property: 'color' },
-				{ ...requiredIndicator$1, property: 'color' }
+			hostWidth: { ...host$3, property: 'width' },
+			fontSize: [
+				{ ...host$3, property: 'font-size' },
+				{ ...textArea$2, property: 'font-size' }
+			],
+			fontFamily: [
+				{ ...label$3, property: 'font-family' },
+				{ ...inputField$2, property: 'font-family' },
+				{ ...helperText$3, property: 'font-family' },
+				{ ...errorMessage$3, property: 'font-family' }
+			],
+			labelTextColor: [
+				{ ...label$3, property: 'color' },
+				{ ...requiredIndicator$2, property: 'color' }
 			],
-			placeholderColor: { ...placeholder$1, property: 'color' },
-			width: host$3,
-			backgroundColor: input$1,
-			borderWidth: input$1,
-			borderStyle: input$1,
-			borderColor: input$1,
-			borderRadius: input$1,
-			outlineWidth: [input$1, { property: 'padding' }],
-			outlineStyle: input$1,
-			outlineColor: input$1,
-			outlineOffset: input$1,
+			labelRequiredIndicator: { ...requiredIndicator$2, property: 'content' },
+			inputBackgroundColor: { ...inputField$2, property: 'background-color' },
+			inputValueTextColor: { ...textArea$2, property: 'color' },
+			inputPlaceholderTextColor: { ...placeholder$1, property: 'color' },
+			inputBorderWidth: { ...inputField$2, property: 'border-width' },
+			inputBorderStyle: { ...inputField$2, property: 'border-style' },
+			inputBorderColor: { ...inputField$2, property: 'border-color' },
+			inputBorderRadius: { ...inputField$2, property: 'border-radius' },
+			inputOutlineStyle: { ...inputField$2, property: 'outline-Style' },
+			inputOutlineColor: { ...inputField$2, property: 'outline-color' },
+			inputOutlineOffset: { ...inputField$2, property: 'outline-offset' },
+			inputOutlineWidth: { ...inputField$2, property: 'outline-width' },
+			inputResizeType: { ...textArea$2, property: 'resize' },
 		}
 	}),
 	draggableMixin,
-	proxyInputMixin,
+	composedProxyInputMixin,
 	componentNameValidationMixin
 )(
 	createProxy({
 		slots: [],
 		wrappedEleName: 'vaadin-text-area',
-		style: () => overrides$1,
+		style: () => `
+			:host {
+				display: inline-block;
+				min-width: 10em;
+				max-width: 100%;
+				padding: calc(var(${TextAreaClass.cssVarList.inputOutlineWidth}) + var(${TextAreaClass.cssVarList.inputOutlineOffset}));
+			}
+
+			${resetInputContainer('vaadin-text-area')}
+			${resetInputField('vaadin-text-area')}
+			${resetInputPlaceholder('vaadin-text-area', 'textarea')}
+			${resetInputCursor('vaadin-text-area')}
+		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$6
+		componentName: componentName$7
 	})
 );
 
-overrides$1 = `
-	:host {
-		display: inline-block;
-		min-width: 10em;
-		max-width: 100%;
-	}
-	vaadin-text-area {
-		margin: 0;
-		width: 100%;
-		box-sizing: border-box;
-	}
-	vaadin-text-area > label,
-	vaadin-text-area::part(input-field) {
-		padding: 0;
-	}
-	vaadin-text-area[required]::part(required-indicator)::after {
-		content: "*";
-	}
-	vaadin-text-area[disabled] > textarea:placeholder-shown,
-	vaadin-text-area[readonly] > textarea:placeholder-shown {
-		opacity: 1;
-	}
-`;
-
-customElements.define(componentName$6, TextAreaClass);
+customElements.define(componentName$7, TextAreaClass);
 
 const observedAttributes = ['src', 'alt'];
 
-const componentName$5 = getComponentName('image');
+const componentName$6 = getComponentName('image');
 
-const BaseClass = createBaseClass({ componentName: componentName$5, baseSelector: ':host > img' });
+const BaseClass = createBaseClass({ componentName: componentName$6, baseSelector: ':host > img' });
 class RawImage extends BaseClass {
 	static get observedAttributes() {
 		return observedAttributes.concat(BaseClass.observedAttributes || []);
@@ -2913,10 +2998,9 @@ const ImageClass = compose(
 	draggableMixin,
 )(RawImage);
 
-customElements.define(componentName$5, ImageClass);
-
-const componentName$4 = getComponentName('combo-box');
+customElements.define(componentName$6, ImageClass);
 
+const componentName$5 = getComponentName('combo-box');
 
 const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclass {
 	constructor() {
@@ -2970,16 +3054,22 @@ const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclas
 
 const {
 	host: host$2,
-	input,
+	inputField: inputField$1,
 	placeholder,
 	toggle,
-	label: label$1
+	label: label$2,
+	requiredIndicator: requiredIndicator$1,
+	helperText: helperText$2,
+	errorMessage: errorMessage$2
 } = {
 	host: { selector: () => ':host' },
-	input: { selector: '::part(input-field)' },
+	inputField: { selector: '::part(input-field)' },
 	placeholder: { selector: '> input:placeholder-shown' },
 	toggle: { selector: '::part(toggle-button)' },
-	label: { selector: '::part(label)' }
+	label: { selector: '::part(label)' },
+	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+	helperText: { selector: '::part(helper-text)' },
+	errorMessage: { selector: '::part(error-message)' }
 };
 
 // const { slotted, selected } = {
@@ -2990,27 +3080,38 @@ const {
 const ComboBoxClass = compose(
 	createStyleMixin({
 		mappings: {
-			width: host$2,
-			height: input,
-			padding: input,
-
-			inputBackgroundColor: { ...input, property: 'background-color' },
-			boxShadow: input,
-
-			borderColor: input,
-			borderWidth: input,
-			borderStyle: input,
-			borderRadius: input,
-
-			color: [label$1, input],
-
+			hostWidth: { ...host$2, property: 'width' },
 			// we apply font-size also on the host so we can set its width with em
-			fontSize: [{}, host$2],
-
-			placeholderColor: { ...placeholder, property: 'color' },
-
-			toggleCursor: { ...toggle, property: 'cursor' },
-			toggleColor: { ...toggle, property: 'color' },
+			fontSize: [
+				{ property: 'font-size' },
+				{ ...host$2, property: 'font-size' }
+			],
+			fontFamily: [
+				label$2,
+				placeholder,
+				inputField$1,
+				helperText$2,
+				errorMessage$2
+			],
+			labelTextColor: [
+				{ ...label$2, property: 'color' },
+				{ ...requiredIndicator$1, property: 'color' }
+			],
+			inputHeight: { ...inputField$1, property: 'height' },
+			inputBackgroundColor: { ...inputField$1, property: 'background-color' },
+			inputBorderColor: { ...inputField$1, property: 'border-color' },
+			inputBorderWidth: { ...inputField$1, property: 'border-width' },
+			inputBorderStyle: { ...inputField$1, property: 'border-style' },
+			inputBorderRadius: { ...inputField$1, property: 'border-radius' },
+			labelRequiredIndicator: { ...requiredIndicator$1, property: 'content' },
+			inputValueTextColor: { ...inputField$1, property: 'color' },
+			inputPlaceholderTextColor: { ...placeholder, property: 'color' },
+			inputDropdownButtonCursor: { ...toggle, property: 'cursor' },
+			inputDropdownButtonColor: { ...toggle, property: 'color' },
+			inputOutlineColor: { ...inputField$1, property: 'outline-color' },
+			inputOutlineWidth: { ...inputField$1, property: 'outline-width' },
+			inputOutlineStyle: { ...inputField$1, property: 'outline-style' },
+			inputOutlineOffset: { ...inputField$1, property: 'outline-offset' },
 
 			// we need to use the variables from the portal mixin
 			// so we need to use an arrow function on the selector
@@ -3034,7 +3135,7 @@ const ComboBoxClass = compose(
 			attributes: ['size']
 		},
 	}),
-	proxyInputMixin,
+	composedProxyInputMixin,
 	componentNameValidationMixin,
 	ComboBoxMixin
 )(
@@ -3046,40 +3147,36 @@ const ComboBoxClass = compose(
 			display: inline-flex;
 			box-sizing: border-box;
 			-webkit-mask-image: none;
+			padding: calc(var(${ComboBoxClass.cssVarList.inputOutlineWidth}) + var(${ComboBoxClass.cssVarList.inputOutlineOffset}))
 		}
 		vaadin-combo-box {
 			padding: 0;
+			width: 100%;
 		}
 		vaadin-combo-box [slot="input"] {
 			-webkit-mask-image: none;
 			min-height: 0;
 		}
+
 		vaadin-combo-box::part(input-field) {
-			-webkit-mask-image: none;
-			border-radius: 0;
 			padding: 0;
 		}
-		vaadin-combo-box::part(input-field)::after {
-			opacity: 0;
-		}
-		vaadin-combo-box[readonly]::part(input-field)::after {
-			border: none;
-		}
-		vaadin-combo-box[readonly] > input:placeholder-shown {
-			opacity: 1;
-		}		
+
+		${resetInputReadonlyStyle('vaadin-combo-box')}
+		${resetInputPlaceholder('vaadin-combo-box')}
+		${resetInputCursor('vaadin-combo-box')}
 		`,
 		// 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'],
-		componentName: componentName$4,
+		componentName: componentName$5,
 		includeForwardProps: ['items', 'renderer', 'selectedItem']
 	})
 );
 
-customElements.define(componentName$4, ComboBoxClass);
+customElements.define(componentName$5, ComboBoxClass);
 
 var CountryCodes = [
 	{
@@ -4318,7 +4415,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => (`
 	</div>
 `);
 
-const componentName$3 = getComponentName('phone-field-internal');
+const componentName$4 = getComponentName('phone-field-internal');
 
 const commonAttrs$1 = [
 	'disabled',
@@ -4336,7 +4433,7 @@ const mapAttrs = {
 
 const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
 
-const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$3, baseSelector: 'div' });
+const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$4, baseSelector: 'div' });
 
 class PhoneFieldInternal extends BaseInputClass$1 {
 	static get observedAttributes() {
@@ -4508,12 +4605,12 @@ class PhoneFieldInternal extends BaseInputClass$1 {
 	}
 }
 
-customElements.define(componentName$3, PhoneFieldInternal);
+customElements.define(componentName$4, PhoneFieldInternal);
 
 const textVars = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
 
-const componentName$2 = getComponentName('phone-field');
+const componentName$3 = getComponentName('phone-field');
 
 const customMixin$1 = (superclass) =>
 	class PhoneFieldMixinClass extends superclass {
@@ -4531,15 +4628,15 @@ const customMixin$1 = (superclass) =>
 			const template = document.createElement('template');
 
 			template.innerHTML = `
-				<${componentName$3} 
+				<${componentName$4} 
 					tabindex="-1"
 					slot="input"
-				></${componentName$3}>
+				></${componentName$4}>
       		`;
 
 			this.baseElement.appendChild(template.content.cloneNode(true));
 
-			this.inputElement = this.shadowRoot.querySelector(componentName$3);
+			this.inputElement = this.shadowRoot.querySelector(componentName$4);
 
 			forwardAttrs(this.shadowRoot.host, this.inputElement, {
 				includeAttrs: [
@@ -4558,27 +4655,32 @@ const customMixin$1 = (superclass) =>
 
 const {
 	host: host$1,
-	inputWrapper,
+	label: label$1,
+	requiredIndicator,
+	inputField,
 	countryCodeInput,
 	phoneInput,
-	label,
-	requiredIndicator,
-	separator
+	separator,
+	errorMessage: errorMessage$1,
+	helperText: helperText$1
 } = {
 	host: { selector: () => ':host' },
-	inputWrapper: { selector: '::part(input-field)' },
-	phoneInput: { selector: () => 'descope-text-field' },
-	countryCodeInput: { selector: () => 'descope-combo-box' },
 	label: { selector: '::part(label)' },
 	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
-	separator: { selector: 'descope-phone-field-internal .separator' }
+	inputField: { selector: '::part(input-field)' },
+	phoneInput: { selector: () => 'descope-text-field' },
+	countryCodeInput: { selector: () => 'descope-combo-box' },
+	separator: { selector: 'descope-phone-field-internal .separator' },
+	helperText: { selector: '::part(helper-text)' },
+	errorMessage: { selector: '::part(error-message)' }
 };
 
 const PhoneFieldClass = compose(
 	createStyleMixin({
 		mappings: {
 			fontSize: [
-				host$1, inputWrapper,
+				{ ...host$1, property: 'font-size' },
+				{ ...inputField, property: 'font-size' },
 				{
 					selector: TextFieldClass.componentName,
 					property: TextFieldClass.cssVarList.fontSize
@@ -4588,57 +4690,66 @@ const PhoneFieldClass = compose(
 					property: ComboBoxClass.cssVarList.fontSize
 				}
 			],
+			fontFamily: [
+				label$1,
+				errorMessage$1,
+				helperText$1
+			],
+			hostWidth: [
+				{ ...host$1, property: 'width' },
+				{ ...phoneInput, property: 'width' },
+				{ ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' }
+			],
 
-			componentWidth: { ...host$1, property: 'width' },
-
-			wrapperBorderStyle: [
-				{ ...inputWrapper, property: 'border-style' },
+			inputBorderStyle: [
+				{ ...inputField, property: 'border-style' },
 				{ ...separator, property: 'border-left-style' }
 			],
-			wrapperBorderWidth: [
-				{ ...inputWrapper, property: 'border-width' },
+			inputBorderWidth: [
+				{ ...inputField, property: 'border-width' },
 				{ ...separator, property: 'border-left-width' }
 			],
-			wrapperBorderColor: [
-				{ ...inputWrapper, property: 'border-color' },
+			inputBorderColor: [
+				{ ...inputField, property: 'border-color' },
 				{ ...separator, property: 'border-left-color' }
 			],
-			wrapperBorderRadius: { ...inputWrapper, property: 'border-radius' },
+			inputBorderRadius: { ...inputField, property: 'border-radius' },
 
-			inputHeight: { ...inputWrapper, property: 'height' },
+			inputHeight: { ...inputField, property: 'height' },
 
-			countryCodeInputWidth: { ...countryCodeInput, property: comboVars.width },
+			countryCodeInputWidth: { ...countryCodeInput, property: comboVars.hostWidth },
 			countryCodeDropdownWidth: {
 				...countryCodeInput,
 				property: '--vaadin-combo-box-overlay-width'
 			},
-
 			phoneInputWidth: { ...phoneInput, property: 'width' },
 
-			color: [
-				label,
-				requiredIndicator,
-				{ ...phoneInput, property: textVars.color },
-				{ ...countryCodeInput, property: comboVars.color }
+			labelTextColor: [
+				{ ...label$1, property: 'color' },
+				{ ...requiredIndicator, property: 'color' },
 			],
+			labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
 
-			placeholderColor: {
-				...phoneInput,
-				property: textVars.placeholderColor
-			},
+			inputValueTextColor: [
+				{ ...phoneInput, property: textVars.inputValueTextColor },
+				{ ...countryCodeInput, property: comboVars.inputValueTextColor }
+			],
+
+			inputPlaceholderTextColor: { ...phoneInput, property: textVars.inputPlaceholderColor },
 
 			overlayItemBackgroundColor: {
 				selector: 'descope-combo-box',
 				property: comboVars.overlayItemBackgroundColor
 			},
 
-			outlineStyle: inputWrapper,
-			outlineWidth: [inputWrapper, { property: 'padding' }],
-			outlineColor: inputWrapper,
+			inputOutlineStyle: { ...inputField, property: 'outline-style' },
+			inputOutlineColor: { ...inputField, property: 'outline-color' },
+			inputOutlineWidth: { ...inputField, property: 'outline-width' },
+			inputOutlineOffset: { ...inputField, property: 'outline-offset' },
 		},
 	}),
 	draggableMixin,
-	proxyInputMixin,
+	composedProxyInputMixin,
 	customMixin$1,
 )(
 	createProxy({
@@ -4646,10 +4757,11 @@ const PhoneFieldClass = compose(
 		wrappedEleName: 'vaadin-text-field',
 		style: () => `
 			:host {
-				--vaadin-field-default-width: auto;
 				display: inline-block;
 				max-width: 100%;
 				min-width: 15em;
+				box-sizing: border-box;
+				padding: calc(var(${PhoneFieldClass.cssVarList.inputOutlineWidth}) + var(${PhoneFieldClass.cssVarList.inputOutlineOffset}))
 			}
 			div {
 				display: inline-flex;
@@ -4658,6 +4770,7 @@ const PhoneFieldClass = compose(
 				width: 100%;
 				height: 100%;
 				box-sizing: border-box;
+				padding: 0;
 			}
 			vaadin-text-field[focus-ring]::part(input-field) {
 				box-shadow: none;
@@ -4689,18 +4802,18 @@ const PhoneFieldClass = compose(
 			descope-combo-box {
 				flex-shrink: 0;
 				height: 100%;
-				${comboVars.borderWidth}: 0;
+				${comboVars.inputOutlineWidth}: 0;
+				${comboVars.inputOutlineOffset}: 0;
+				${comboVars.inputBorderWidth}: 0;
+				${comboVars.inputBorderRadius}: 0;
 			}
 			descope-text-field {
 				flex-grow: 1;
 				min-height: 0;
 				height: 100%;
-				${textVars.outlineWidth}: 0;
-				${textVars.borderWidth}: 0;
-				${textVars.borderRadius}: 0;
-			}
-			vaadin-text-field[required]::part(required-indicator)::after {
-				content: "*";
+				${textVars.inputOutlineWidth}: 0;
+				${textVars.inputBorderWidth}: 0;
+				${textVars.inputBorderRadius}: 0;
 			}
 			vaadin-text-field[readonly] > input:placeholder-shown {
 				opacity: 1;
@@ -4708,17 +4821,20 @@ const PhoneFieldClass = compose(
 			vaadin-text-field::part(input-field)::after {
 				border: none;
 			}
+
+			${resetInputFieldDefaultWidth()}
+			${resetInputCursor('vaadin-text-field')}
 		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$2
+		componentName: componentName$3
 	})
 );
 
-customElements.define(componentName$2, PhoneFieldClass);
+customElements.define(componentName$3, PhoneFieldClass);
 
-const componentName$1 = getComponentName('new-password-internal');
+const componentName$2 = getComponentName('new-password-internal');
 
-const componentName = getComponentName('new-password');
+const componentName$1 = getComponentName('new-password');
 
 const customMixin = (superclass) =>
 	class NewPasswordMixinClass extends superclass {
@@ -4732,16 +4848,16 @@ const customMixin = (superclass) =>
 			const template = document.createElement('template');
 
 			template.innerHTML = `
-			<${componentName$1} 
+			<${componentName$2} 
 				name="new-password" 
 				tabindex="-1"
 				slot="input"
-			></${componentName$1}>
+			></${componentName$2}>
 			`;
 
 			this.baseElement.appendChild(template.content.cloneNode(true));
 
-			this.inputElement = this.shadowRoot.querySelector(componentName$1);
+			this.inputElement = this.shadowRoot.querySelector(componentName$2);
 
 			forwardAttrs(this, this.inputElement, {
 				includeAttrs: [
@@ -4762,9 +4878,18 @@ const customMixin = (superclass) =>
 		}
 	};
 
-const { host, internalInputsWrapper } = {
+const {
+	host,
+	label,
+	internalInputsWrapper,
+	errorMessage,
+	helperText
+} = {
 	host: { selector: () => ':host' },
-	internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' }
+	label: { selector: '::part(label)' },
+	internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
+	helperText: { selector: '::part(helper-text)' },
+	errorMessage: { selector: '::part(error-message)' }
 };
 
 const NewPasswordClass = compose(
@@ -4777,69 +4902,73 @@ const NewPasswordClass = compose(
 					property: PasswordFieldClass.cssVarList.fontSize
 				}
 			],
-			componentWidth: { ...host, property: 'width' },
-			requiredContent: { ...host, property: 'content' },
-			inputsGap: { ...internalInputsWrapper, property: 'gap' },
+			fontFamily: [
+				label,
+				errorMessage,
+				helperText
+			],
+			hostWidth: { ...host, property: 'width' },
+			inputsRequiredIndicator: { ...host, property: 'content' },
+			spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
 		}
 	}),
 	draggableMixin,
-	proxyInputMixin,
+	composedProxyInputMixin,
 	customMixin,
 )(
 	createProxy({
 		slots: [],
 		wrappedEleName: 'vaadin-text-field',
-		style: () => overrides,
+		style: () => `
+		:host {
+			display: inline-block;
+			max-width: 100%;
+			min-width: 10em;
+			box-sizing: border-box;
+		}
+		${resetInputFieldDefaultWidth()}
+		vaadin-text-field {
+			padding: 0;
+			width: 100%;
+			height: 100%;
+		}
+		vaadin-text-field::part(input-field) {
+			min-height: 0;
+			background: transparent;
+			overflow: hidden;
+			box-shadow: none;
+			padding: 0;
+		}
+		vaadin-text-field::part(input-field)::after {
+			background: transparent;
+			opacity: 0;
+		}
+		descope-new-password-internal {
+			-webkit-mask-image: none;
+			min-height: 0;
+			width: 100%;
+			height: 100%;
+			padding: 0;
+		}
+		descope-new-password-internal > .wrapper {
+			width: 100%;
+			height: 100%;
+			display: flex;
+			   flex-direction: column;
+		}
+		descope-password-field {
+			display: block;
+			width: 100%;
+		}
+		descope-new-password-internal vaadin-password-field::before {
+			height: initial;
+		},
+		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName
+		componentName: componentName$1
 	})
 );
 
-const overrides = `
-	:host {
-		--vaadin-field-default-width: auto;
-		display: inline-block;
-		min-width: 10em;
-		max-width: 100%;
-	}
-	vaadin-text-field {
-		padding: 0;
-		width: 100%;
-		height: 100%;
-	}
-	vaadin-text-field::part(input-field) {
-		min-height: 0;
-		background: transparent;
-		overflow: hidden;
-		box-shadow: none;
-		padding: 0;
-	}
-	vaadin-text-field::part(input-field)::after {
-		background: transparent;
-		opacity: 0;
-	}
-	descope-new-password-internal {
-		-webkit-mask-image: none;
-		min-height: 0;
-		width: 100%;
-		height: 100%;
-		padding: 0;
-	}
-	descope-new-password-internal > .wrapper {
-		width: 100%;
-		height: 100%;
-		display: flex;
-   		flex-direction: column;
-	}
-	descope-password-field {
-		display: block;
-		width: 100%;
-	}
-	descope-new-password-internal vaadin-password-field::before {
-		height: initial;
-	}
-`;
-
 const passwordAttrPrefixRegex = /^password-/;
 const confirmAttrPrefixRegex = /^confirm-/;
 
@@ -4861,7 +4990,7 @@ const commonAttrs = [
 
 const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
 
-const BaseInputClass = createBaseInputClass({ componentName: componentName$1, baseSelector: 'div' });
+const BaseInputClass = createBaseInputClass({ componentName: componentName$2, baseSelector: 'div' });
 
 class NewPasswordInternal extends BaseInputClass {
 	static get observedAttributes() {
@@ -4954,7 +5083,7 @@ class NewPasswordInternal extends BaseInputClass {
 			const styleTag = document.createElement('style');
 			styleTag.innerHTML = `
 				:host::part(required-indicator)::after {
-					content: var(${NewPasswordClass.cssVarList.requiredContent});
+					content: var(${NewPasswordClass.cssVarList.inputsRequiredIndicator});
 				}
 				`;
 			input?.shadowRoot.appendChild(styleTag);
@@ -5026,9 +5155,9 @@ class NewPasswordInternal extends BaseInputClass {
 	}
 }
 
-customElements.define(componentName$1, NewPasswordInternal);
+customElements.define(componentName$2, NewPasswordInternal);
 
-customElements.define(componentName, NewPasswordClass);
+customElements.define(componentName$1, NewPasswordClass);
 
 const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
 
@@ -5364,49 +5493,56 @@ const globals = {
 	shadow,
 	fonts
 };
-const vars$l = getThemeVars(globals);
+const vars$m = getThemeVars(globals);
 
-const globalRefs$e = getThemeRefs(globals);
+const globalRefs$c = getThemeRefs(globals);
 const compVars$2 = ButtonClass.cssVarList;
 
 const mode = {
-	primary: globalRefs$e.colors.primary,
-	secondary: globalRefs$e.colors.secondary,
-	success: globalRefs$e.colors.success,
-	error: globalRefs$e.colors.error,
-	surface: globalRefs$e.colors.surface
+	primary: globalRefs$c.colors.primary,
+	secondary: globalRefs$c.colors.secondary,
+	success: globalRefs$c.colors.success,
+	error: globalRefs$c.colors.error,
+	surface: globalRefs$c.colors.surface
 };
 
-const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars({ mode }, componentName$n);
+const [helperTheme$3, helperRefs$3, helperVars$2] = createHelperVars({ mode }, componentName$o);
 
 const verticalPaddingRatio = 3;
 const horizontalPaddingRatio = 2;
 
 const button = {
-	...helperTheme$2,
+	...helperTheme$3,
+
+	[compVars$2.fontFamily]: globalRefs$c.fonts.font1.family,
 
 	[compVars$2.cursor]: 'pointer',
 
-	[compVars$2.borderRadius]: globalRefs$e.radius.sm,
+	[compVars$2.borderRadius]: globalRefs$c.radius.sm,
 	[compVars$2.borderWidth]: '2px',
 	[compVars$2.borderStyle]: 'solid',
 	[compVars$2.borderColor]: 'transparent',
 
-	[compVars$2.gap]: '0.25em',
+	[compVars$2.labelSpacing]: '0.25em',
 
 	[compVars$2.verticalPadding]: `calc(var(${compVars$2.fontSize}) / ${verticalPaddingRatio})`,
 	[compVars$2.horizontalPadding]: `calc(var(${compVars$2.fontSize}) / ${horizontalPaddingRatio})`,
 
+	[compVars$2.outlineWidth]: globals.border.sm,
+	[compVars$2.outlineOffset]: '1px',
+	[compVars$2.outlineStyle]: 'solid',
+	[compVars$2.outlineColor]: 'transparent',
+
 	size: {
-		xs: { [compVars$2.fontSize]: '12px' },
-		sm: { [compVars$2.fontSize]: '14px' },
-		md: { [compVars$2.fontSize]: '18px' },
-		lg: { [compVars$2.fontSize]: '22px' },
-		xl: { [compVars$2.fontSize]: '26px' }
+		xs: { [compVars$2.fontSize]: '8px' },
+		sm: { [compVars$2.fontSize]: '10px' },
+		md: { [compVars$2.fontSize]: '14px' },
+		lg: { [compVars$2.fontSize]: '20px' },
+		xl: { [compVars$2.fontSize]: '25px' }
 	},
 
 	_fullWidth: {
-		[compVars$2.width]: '100%'
+		[compVars$2.hostWidth]: '100%'
 	},
 
 	_loading: {
@@ -5415,189 +5551,176 @@ const button = {
 
 	variant: {
 		contained: {
-			[compVars$2.color]: helperRefs$2.contrast,
-			[compVars$2.backgroundColor]: helperRefs$2.main,
+			[compVars$2.labelTextColor]: helperRefs$3.contrast,
+			[compVars$2.backgroundColor]: helperRefs$3.main,
 			_hover: {
-				[compVars$2.backgroundColor]: helperRefs$2.dark
+				[compVars$2.backgroundColor]: helperRefs$3.dark
 			},
 			_active: {
-				[compVars$2.backgroundColor]: helperRefs$2.dark
+				[compVars$2.backgroundColor]: helperRefs$3.dark
 			}
 		},
 
 		outline: {
-			[compVars$2.color]: helperRefs$2.main,
+			[compVars$2.labelTextColor]: helperRefs$3.main,
 			[compVars$2.borderColor]: 'currentColor',
 			_hover: {
-				[compVars$2.color]: helperRefs$2.dark,
+				[compVars$2.labelTextColor]: helperRefs$3.dark,
 			},
 			_active: {
-				[compVars$2.color]: helperRefs$2.light,
+				[compVars$2.labelTextColor]: helperRefs$3.light,
 			}
 		},
 
 		link: {
-			[compVars$2.color]: helperRefs$2.main,
+			[compVars$2.labelTextColor]: helperRefs$3.main,
 			_hover: {
-				[compVars$2.color]: helperRefs$2.main,
-				[compVars$2.textDecoration]: 'underline'
+				[compVars$2.labelTextColor]: helperRefs$3.main,
+				[compVars$2.labelTextDecoration]: 'underline'
 			},
 			_active: {
-				[compVars$2.color]: helperRefs$2.dark
+				[compVars$2.labelTextColor]: helperRefs$3.dark
 			}
 		}
-	}
+	},
+
+	_focused: {
+		[compVars$2.outlineColor]: globals.colors.surface.main,
+	}
+};
+
+const vars$l = {
+	...compVars$2,
+	...helperVars$2
 };
-const vars$k = { ...compVars$2, ...helperVars$2 };
 
 var button$1 = /*#__PURE__*/Object.freeze({
 	__proto__: null,
 	default: button,
-	vars: vars$k
+	vars: vars$l
 });
 
-const globalRefs$d = getThemeRefs(globals);
+const componentName = getComponentName('input-wrapper');
+const globalRefs$b = getThemeRefs(globals);
 
-const vars$j = TextFieldClass.cssVarList;
+const [theme$1, refs, vars$k] = createHelperVars({
+    labelTextColor: globalRefs$b.colors.surface.contrast,
+    valueTextColor: globalRefs$b.colors.surface.contrast,
+    placeholderTextColor: globalRefs$b.colors.surface.main,
+    requiredIndicator: "'*'",
 
-const textField = (vars) => ({
-	[vars.padding]: '0 1em',
+    borderWidth: globalRefs$b.border.xs,
+    borderRadius: globalRefs$b.radius.xs,
+    borderColor: 'transparent',
 
-	[vars.outlineWidth]: '2px',
-	[vars.outlineStyle]: 'solid',
-	[vars.outlineColor]: 'transparent',
+    outlineWidth: globalRefs$b.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
 
-	[vars.height]: '2em',
+    inputHeight: '2em',
 
-	size: {
-		xs: {
-			[vars.fontSize]: '8px',
-		},
-		sm: {
-			[vars.fontSize]: '10px',
-		},
-		md: {
-			[vars.fontSize]: '14px',
-		},
-		lg: {
-			[vars.fontSize]: '20px',
-		},
-		xl: {
-			[vars.fontSize]: '25px',
-		}
-	},
+    backgroundColor: globalRefs$b.colors.surface.light,
 
-	[vars.color]: globalRefs$d.colors.surface.contrast,
-	[vars.labelTextColor]: globalRefs$d.colors.surface.contrast,
-	[vars.placeholderColor]: globalRefs$d.colors.surface.main,
+    fontFamily: globalRefs$b.fonts.font1.family,
 
-	[vars.backgroundColor]: globalRefs$d.colors.surface.light,
+    size: {
+        xs: { fontSize: '8px' },
+        sm: { fontSize: '10px' },
+        md: { fontSize: '14px' },
+        lg: { fontSize: '20px' },
+        xl: { fontSize: '25px' }
+    },
 
-	[vars.borderWidth]: '1px',
-	[vars.borderStyle]: 'solid',
-	[vars.borderColor]: 'transparent',
-	[vars.borderRadius]: globalRefs$d.radius.xs,
+    _fullWidth: {
+        width: '100%',
+    },
 
-	_disabled: {
-		[vars.color]: globalRefs$d.colors.surface.dark,
-		[vars.placeholderColor]: globalRefs$d.colors.surface.light,
-		[vars.backgroundColor]: globalRefs$d.colors.surface.main
-	},
+    _focused: {
+        outlineColor: globalRefs$b.colors.surface.main,
+        _invalid: {
+            outlineColor: globalRefs$b.colors.error.light,
+        }
+    },
 
-	_fullWidth: {
-		[vars.width]: '100%'
-	},
+    _bordered: {
+        borderColor: globalRefs$b.colors.surface.main,
+        borderStyle: 'solid',
+        _invalid: {
+            borderColor: globalRefs$b.colors.error.main,
+        }
+    },
 
-	_focused: {
-		[vars.outlineColor]: globalRefs$d.colors.surface.main
-	},
+    _disabled: {
+        labelTextColor: globalRefs$b.colors.surface.main,
+        valueTextColor: globalRefs$b.colors.surface.dark,
+        placeholderTextColor: globalRefs$b.colors.surface.dark,
+        backgroundColor: globalRefs$b.colors.surface.main
+    },
 
-	_bordered: {
-		[vars.borderColor]: globalRefs$d.colors.surface.main
-	},
+    _invalid: {
+        labelTextColor: globalRefs$b.colors.error.main,
+        valueTextColor: globalRefs$b.colors.error.main,
+        placeholderTextColor: globalRefs$b.colors.error.light,
+    }
+}, componentName);
 
-	_invalid: {
-		[vars.borderColor]: globalRefs$d.colors.error.main,
-		[vars.color]: globalRefs$d.colors.error.main,
-		[vars.outlineColor]: globalRefs$d.colors.error.light,
-		[vars.placeholderColor]: globalRefs$d.colors.error.light
-	}
+var inputWrapper = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: theme$1,
+	refs: refs,
+	vars: vars$k
 });
 
-var textField$1 = textField(vars$j);
+const vars$j = TextFieldClass.cssVarList;
 
-var textField$2 = /*#__PURE__*/Object.freeze({
+const textField = ({
+	[vars$j.hostWidth]: refs.width,
+	[vars$j.fontSize]: refs.fontSize,
+	[vars$j.fontFamily]: refs.fontFamily,
+	[vars$j.labelTextColor]: refs.labelTextColor,
+	[vars$j.labelRequiredIndicator]: refs.requiredIndicator,
+	[vars$j.inputValueTextColor]: refs.valueTextColor,
+	[vars$j.inputPlaceholderColor]: refs.placeholderTextColor,
+	[vars$j.inputBorderWidth]: refs.borderWidth,
+	[vars$j.inputBorderStyle]: refs.borderStyle,
+	[vars$j.inputBorderColor]: refs.borderColor,
+	[vars$j.inputBorderRadius]: refs.borderRadius,
+	[vars$j.inputOutlineWidth]: refs.outlineWidth,
+	[vars$j.inputOutlineStyle]: refs.outlineStyle,
+	[vars$j.inputOutlineColor]: refs.outlineColor,
+	[vars$j.inputOutlineOffset]: refs.outlineOffset,
+	[vars$j.inputBackgroundColor]: refs.backgroundColor,
+	[vars$j.inputHeight]: refs.inputHeight,
+});
+
+var textField$1 = /*#__PURE__*/Object.freeze({
 	__proto__: null,
-	default: textField$1,
+	default: textField,
 	textField: textField,
 	vars: vars$j
 });
 
-const globalRefs$c = getThemeRefs(globals);
-
 const vars$i = PasswordFieldClass.cssVarList;
 
 const passwordField = {
-	[vars$i.wrapperBorderStyle]: 'solid',
-	[vars$i.wrapperBorderWidth]: '1px',
-	[vars$i.wrapperBorderColor]: 'transparent',
-	[vars$i.wrapperBorderRadius]: globalRefs$c.radius.xs,
-	[vars$i.backgroundColor]: globalRefs$c.colors.surface.light,
-
-	[vars$i.outlineWidth]: '2px',
-	[vars$i.outlineStyle]: 'solid',
-	[vars$i.outlineColor]: 'transparent',
-
-	[vars$i.revealButtonOutlineBoxShadow]: `0 0 0 2px ${globalRefs$c.colors.surface.main}`,
-
-
-	[vars$i.labelTextColor]: globalRefs$c.colors.surface.contrast,
-	[vars$i.inputTextColor]: globalRefs$c.colors.surface.contrast,
-	[vars$i.placeholderTextColor]: globalRefs$c.colors.surface.main,
-
-	[vars$i.pointerCursor]: 'pointer',
-
-	[vars$i.padding]: '0',
-	[vars$i.height]: '2em',
-
-	size: {
-		xs: {
-			[vars$i.fontSize]: '8px',
-		},
-		sm: {
-			[vars$i.fontSize]: '10px',
-		},
-		md: {
-			[vars$i.fontSize]: '14px',
-		},
-		lg: {
-			[vars$i.fontSize]: '20px',
-		},
-		xl: {
-			[vars$i.fontSize]: '25px',
-		}
-	},
-
-	_bordered: {
-		[vars$i.padding]: '0 0.5em',
-		[vars$i.wrapperBorderColor]: globalRefs$c.colors.surface.main
-	},
-
-	_fullWidth: {
-		[vars$i.width]: '100%'
-	},
-
-	_focused: {
-		[vars$i.outlineColor]: globalRefs$c.colors.surface.main
-	},
-
-	_invalid: {
-		[vars$i.labelTextColor]: globalRefs$c.colors.error.main,
-		[vars$i.inputTextColor]: globalRefs$c.colors.error.main,
-		[vars$i.placeholderTextColor]: globalRefs$c.colors.error.light,
-		[vars$i.wrapperBorderColor]: globalRefs$c.colors.error.main,
-		[vars$i.outlineColor]: globalRefs$c.colors.error.light,
-	},
+	[vars$i.hostWidth]: refs.width,
+	[vars$i.fontSize]: refs.fontSize,
+	[vars$i.fontFamily]: refs.fontFamily,
+	[vars$i.labelTextColor]: refs.labelTextColor,
+	[vars$i.inputHeight]: refs.inputHeight,
+	[vars$i.inputBackgroundColor]: refs.backgroundColor,
+	[vars$i.labelRequiredIndicator]: refs.requiredIndicator,
+	[vars$i.inputValueTextColor]: refs.valueTextColor,
+	[vars$i.inputPlaceholderTextColor]: refs.placeholderTextColor,
+	[vars$i.inputBorderWidth]: refs.borderWidth,
+	[vars$i.inputBorderStyle]: refs.borderStyle,
+	[vars$i.inputBorderColor]: refs.borderColor,
+	[vars$i.inputBorderRadius]: refs.borderRadius,
+	[vars$i.inputOutlineWidth]: refs.outlineWidth,
+	[vars$i.inputOutlineStyle]: refs.outlineStyle,
+	[vars$i.inputOutlineColor]: refs.outlineColor,
+	[vars$i.inputOutlineOffset]: refs.outlineOffset,
 };
 
 var passwordField$1 = /*#__PURE__*/Object.freeze({
@@ -5606,10 +5729,27 @@ var passwordField$1 = /*#__PURE__*/Object.freeze({
 	vars: vars$i
 });
 
+const vars$h = NumberFieldClass.cssVarList;
+
 const numberField = {
-	...textField(NumberFieldClass.cssVarList)
+	[vars$h.hostWidth]: refs.width,
+	[vars$h.fontSize]: refs.fontSize,
+	[vars$h.fontFamily]: refs.fontFamily,
+	[vars$h.labelTextColor]: refs.labelTextColor,
+	[vars$h.inputValueTextColor]: refs.valueTextColor,
+	[vars$h.inputPlaceholderColor]: refs.placeholderTextColor,
+	[vars$h.inputBorderWidth]: refs.borderWidth,
+	[vars$h.inputBorderStyle]: refs.borderStyle,
+	[vars$h.inputBorderColor]: refs.borderColor,
+	[vars$h.inputBorderRadius]: refs.borderRadius,
+	[vars$h.inputOutlineWidth]: refs.outlineWidth,
+	[vars$h.inputOutlineStyle]: refs.outlineStyle,
+	[vars$h.inputOutlineColor]: refs.outlineColor,
+	[vars$h.inputOutlineOffset]: refs.outlineOffset,
+	[vars$h.inputBackgroundColor]: refs.backgroundColor,
+	[vars$h.labelRequiredIndicator]: refs.requiredIndicator,
+	[vars$h.inputHeight]: refs.inputHeight,
 };
-const vars$h = NumberFieldClass.cssVarList;
 
 var numberField$1 = /*#__PURE__*/Object.freeze({
 	__proto__: null,
@@ -5617,10 +5757,27 @@ var numberField$1 = /*#__PURE__*/Object.freeze({
 	vars: vars$h
 });
 
+const vars$g = EmailFieldClass.cssVarList;
+
 const emailField = {
-	...textField(EmailFieldClass.cssVarList)
+	[vars$g.hostWidth]: refs.width,
+	[vars$g.fontSize]: refs.fontSize,
+	[vars$g.fontFamily]: refs.fontFamily,
+	[vars$g.labelTextColor]: refs.labelTextColor,
+	[vars$g.inputValueTextColor]: refs.valueTextColor,
+	[vars$g.labelRequiredIndicator]: refs.requiredIndicator,
+	[vars$g.inputPlaceholderColor]: refs.placeholderTextColor,
+	[vars$g.inputBorderWidth]: refs.borderWidth,
+	[vars$g.inputBorderStyle]: refs.borderStyle,
+	[vars$g.inputBorderColor]: refs.borderColor,
+	[vars$g.inputBorderRadius]: refs.borderRadius,
+	[vars$g.inputOutlineWidth]: refs.outlineWidth,
+	[vars$g.inputOutlineStyle]: refs.outlineStyle,
+	[vars$g.inputOutlineColor]: refs.outlineColor,
+	[vars$g.inputOutlineOffset]: refs.outlineOffset,
+	[vars$g.inputBackgroundColor]: refs.backgroundColor,
+	[vars$g.inputHeight]: refs.inputHeight
 };
-const vars$g = EmailFieldClass.cssVarList;
 
 var emailField$1 = /*#__PURE__*/Object.freeze({
 	__proto__: null,
@@ -5628,52 +5785,34 @@ var emailField$1 = /*#__PURE__*/Object.freeze({
 	vars: vars$g
 });
 
-const globalRefs$b = getThemeRefs(globals);
+const globalRefs$a = getThemeRefs(globals);
 const vars$f = TextAreaClass.cssVarList;
 
 const textArea = {
-	[vars$f.labelColor]: globalRefs$b.colors.surface.contrast,
-	[vars$f.placeholderColor]: globalRefs$b.colors.surface.main,
-	[vars$f.color]: globalRefs$b.colors.surface.contrast,
+	[vars$f.hostWidth]: refs.width,
 	[vars$f.fontSize]: '14px',
-
-	[vars$f.backgroundColor]: globalRefs$b.colors.surface.light,
-	[vars$f.resize]: 'vertical',
-
-	[vars$f.borderRadius]: globalRefs$b.radius.sm,
-	[vars$f.borderWidth]: '1px',
-	[vars$f.borderStyle]: 'solid',
-	[vars$f.borderColor]: 'transparent',
-	[vars$f.outlineWidth]: '2px',
-	[vars$f.outlineStyle]: 'solid',
-	[vars$f.outlineColor]: 'transparent',
-	[vars$f.outlineOffset]: '0',
-
-	_fullWidth: {
-		[vars$f.width]: '100%'
-	},
-
-	_focused: {
-		[vars$f.outlineColor]: globalRefs$b.colors.surface.main
-	},
+	[vars$f.fontFamily]: refs.fontFamily,
+	[vars$f.labelTextColor]: refs.labelTextColor,
+	[vars$f.labelRequiredIndicator]: refs.requiredIndicator,
+	[vars$f.inputBackgroundColor]: refs.backgroundColor,
+	[vars$f.inputValueTextColor]: refs.valueTextColor,
+	[vars$f.inputPlaceholderTextColor]: refs.placeholderTextColor,
+	[vars$f.inputBorderRadius]: refs.borderRadius,
+	[vars$f.inputBorderWidth]: refs.borderWidth,
+	[vars$f.inputBorderStyle]: refs.borderStyle,
+	[vars$f.inputBorderColor]: refs.borderColor,
+	[vars$f.inputOutlineWidth]: refs.outlineWidth,
+	[vars$f.inputOutlineStyle]: refs.outlineStyle,
+	[vars$f.inputOutlineColor]: refs.outlineColor,
+	[vars$f.inputOutlineOffset]: refs.outlineOffset,
+	[vars$f.inputResizeType]: 'vertical',
 
 	_disabled: {
-		[vars$f.cursor]: 'not-allowed'
-	},
-
-	_bordered: {
-		[vars$f.borderColor]: globalRefs$b.colors.surface.main,
-	},
-
-	_invalid: {
-		[vars$f.labelColor]: globalRefs$b.colors.error.main,
-		[vars$f.borderColor]: globalRefs$b.colors.error.main,
-		[vars$f.outlineColor]: globalRefs$b.colors.error.light,
-		[vars$f.placeholderColor]: globalRefs$b.colors.error.light,
+		[vars$f.inputBackgroundColor]: globalRefs$a.colors.surface.light,
 	},
 
 	_readonly: {
-		[vars$f.resize]: 'none',
+		[vars$f.inputResizeType]: 'none',
 	}
 };
 
@@ -5683,63 +5822,33 @@ var textArea$1 = /*#__PURE__*/Object.freeze({
 	vars: vars$f
 });
 
-const globalRefs$a = getThemeRefs(globals);
+const globalRefs$9 = getThemeRefs(globals);
 const vars$e = CheckboxClass.cssVarList;
 
 const checkbox = {
-	[vars$e.checkboxBackgroundColor]: globalRefs$a.colors.surface.main,
-	[vars$e.cursor]: 'pointer',
-
-	[vars$e.checkboxRadius]: globalRefs$a.radius.xs,
-	[vars$e.checkboxSize]: '2em',
-
-	[vars$e.labelTextColor]: globalRefs$a.colors.surface.contrast,
-	[vars$e.labelMargin]: '0.5em',
+	[vars$e.hostWidth]: refs.width,
+	[vars$e.fontSize]: refs.fontSize,
+	[vars$e.fontFamily]: refs.fontFamily,
+	[vars$e.labelTextColor]: refs.labelTextColor,
+	[vars$e.labelRequiredIndicator]: refs.requiredIndicator,
 	[vars$e.labelFontWeight]: '400',
-
-	size: {
-		xs: {
-			[vars$e.labelFontSize]: '8px',
-		},
-		sm: {
-			[vars$e.labelFontSize]: '10px',
-		},
-		md: {
-			[vars$e.labelFontSize]: '14px',
-		},
-		lg: {
-			[vars$e.labelFontSize]: '20px',
-		},
-		xl: {
-			[vars$e.labelFontSize]: '25px',
-		}
-	},
-
-	_fullWidth: {
-		[vars$e.width]: '100%',
-	},
+	[vars$e.labelSpacing]: '0.5em',
+	[vars$e.inputOutlineWidth]: refs.outlineWidth,
+	[vars$e.inputOutlineOffset]: refs.outlineOffset,
+	[vars$e.inputOutlineColor]: refs.outlineColor,
+	[vars$e.inputOutlineStyle]: refs.outlineStyle,
+	[vars$e.inputBorderRadius]: refs.borderRadius,
+	[vars$e.inputBackgroundColor]: globalRefs$9.colors.surface.main,
+	[vars$e.inputSize]: '2em',
 
 	_checked: {
-		[vars$e.checkboxBackgroundColor]: globalRefs$a.colors.primary.main,
-		[vars$e.checkmarkTextColor]: globalRefs$a.colors.primary.contrast,
+		[vars$e.inputBackgroundColor]: globalRefs$9.colors.primary.main,
+		[vars$e.inputValueTextColor]: globalRefs$9.colors.primary.contrast,
 	},
 
 	_disabled: {
-		[vars$e.checkboxBackgroundColor]: globalRefs$a.colors.surface.main,
+		[vars$e.inputBackgroundColor]: globalRefs$9.colors.surface.main,
 	},
-
-	_focused: {
-		[vars$e.checkboxOutlineWidth]: '2px',
-		[vars$e.checkboxOutlineOffset]: '1px',
-		[vars$e.checkboxOutlineColor]: globalRefs$a.colors.primary.main,
-		[vars$e.checkboxOutlineStyle]: 'solid'
-	},
-
-	_invalid: {
-		[vars$e.checkboxOutlineColor]: globalRefs$a.colors.error.main,
-		[vars$e.labelTextColor]: globalRefs$a.colors.error.main
-	},
-
 };
 
 var checkbox$1 = /*#__PURE__*/Object.freeze({
@@ -5750,73 +5859,58 @@ var checkbox$1 = /*#__PURE__*/Object.freeze({
 
 const knobMargin = '2px';
 const checkboxHeight = '1.25em';
-const trackBorderWidth = '2px';
 
-const globalRefs$9 = getThemeRefs(globals);
+const globalRefs$8 = getThemeRefs(globals);
 const vars$d = SwitchToggleClass.cssVarList;
 
 const switchToggle = {
-    size: {
-        xs: { [vars$d.fontSize]: '8px' },
-        sm: { [vars$d.fontSize]: '12px' },
-        md: { [vars$d.fontSize]: '16px' },
-        lg: { [vars$d.fontSize]: '20px' },
-        xl: { [vars$d.fontSize]: '24px' }
-    },
+    [vars$d.fontSize]: refs.fontSize,
+    [vars$d.fontFamily]: refs.fontFamily,
 
-    [vars$d.cursor]: 'pointer',
-
-    [vars$d.trackBorderStyle]: 'solid',
-    [vars$d.trackBorderWidth]: trackBorderWidth,
-    [vars$d.trackBorderColor]: globalRefs$9.colors.surface.contrast,
+    [vars$d.inputOutlineWidth]: refs.outlineWidth,
+    [vars$d.inputOutlineOffset]: refs.outlineOffset,
+    [vars$d.inputOutlineColor]: refs.outlineColor,
+    [vars$d.inputOutlineStyle]: refs.outlineStyle,
 
+    [vars$d.trackBorderStyle]: refs.borderStyle,
+    [vars$d.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
+    [vars$d.trackBorderColor]: globalRefs$8.colors.surface.contrast,
     [vars$d.trackBackgroundColor]: 'none',
-    [vars$d.trackRadius]: globalRefs$9.radius.md,
-    [vars$d.trackWidth]: '2.5em',
+    [vars$d.trackBorderRadius]: globalRefs$8.radius.md,
+    [vars$d.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
     [vars$d.trackHeight]: checkboxHeight,
 
     [vars$d.knobSize]: `calc(1em - ${knobMargin})`,
     [vars$d.knobRadius]: '50%',
     [vars$d.knobTopOffset]: '1px',
-    [vars$d.knobColor]: globalRefs$9.colors.surface.contrast,
-    [vars$d.knobPosition]: knobMargin,
-    [vars$d.knobTransition]: '0.3s',
+    [vars$d.knobLeftOffset]: knobMargin,
+    [vars$d.knobColor]: refs.valueTextColor,
+    [vars$d.knobTransitionDuration]: '0.3s',
 
-    [vars$d.labelTextColor]: globalRefs$9.colors.surface.contrast,
+    [vars$d.labelTextColor]: refs.labelTextColor,
     [vars$d.labelFontWeight]: '400',
     [vars$d.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
-    [vars$d.labelMargin]: '0.25em',
+    [vars$d.labelSpacing]: '0.25em',
+    [vars$d.labelRequiredIndicator]: refs.requiredIndicator,
 
-    _fullWidth: {
-        [vars$d.width]: '100%',
-    },
+    [vars$d.hostWidth]: refs.width,
 
     _checked: {
-        [vars$d.trackBorderColor]: globalRefs$9.colors.primary.main,
-        [vars$d.knobPosition]: `calc(100% - var(${vars$d.knobSize}) - ${knobMargin})`,
-        [vars$d.knobColor]: globalRefs$9.colors.primary.main,
-        [vars$d.knobTextColor]: globalRefs$9.colors.primary.contrast,
+        [vars$d.trackBorderColor]: globalRefs$8.colors.primary.main,
+        [vars$d.knobLeftOffset]: `calc(100% - var(${vars$d.knobSize}) - ${knobMargin})`,
+        [vars$d.knobColor]: globalRefs$8.colors.primary.main,
+        [vars$d.knobTextColor]: refs.valueTextColor,
     },
 
     _disabled: {
-        [vars$d.cursor]: 'not-allowed', // todo: fix cursor
-        [vars$d.knobColor]: globalRefs$9.colors.surface.main,
-        [vars$d.trackBorderColor]: globalRefs$9.colors.surface.main,
-        [vars$d.trackBackgroundColor]: globalRefs$9.colors.surface.light,
-    },
-
-    _focused: {
-        [vars$d.switchOutlineWidth]: '2px',
-        [vars$d.switchOutlineOffset]: '1px',
-        [vars$d.switchOutlineColor]: globalRefs$9.colors.primary.main,
-        [vars$d.switchOutlineStyle]: 'solid'
+        [vars$d.knobColor]: globalRefs$8.colors.surface.main,
+        [vars$d.trackBorderColor]: globalRefs$8.colors.surface.main,
+        [vars$d.trackBackgroundColor]: globalRefs$8.colors.surface.light,
     },
 
     _invalid: {
-        [vars$d.switchOutlineColor]: globalRefs$9.colors.error.main,
-        [vars$d.trackBorderColor]: globalRefs$9.colors.error.main,
-        [vars$d.knobColor]: globalRefs$9.colors.error.main,
-        [vars$d.labelTextColor]: globalRefs$9.colors.error.main
+        [vars$d.trackBorderColor]: globalRefs$8.colors.error.main,
+        [vars$d.knobColor]: globalRefs$8.colors.error.main,
     },
 };
 
@@ -5826,7 +5920,7 @@ var switchToggle$1 = /*#__PURE__*/Object.freeze({
 	vars: vars$d
 });
 
-const globalRefs$8 = getThemeRefs(globals);
+const globalRefs$7 = getThemeRefs(globals);
 
 const compVars$1 = ContainerClass.cssVarList;
 
@@ -5842,103 +5936,90 @@ const horizontalAlignment = {
 	end: { horizontalAlignment: 'end' },
 };
 
-const [helperTheme$1, helperRefs$1, helperVars$1] =
+const [helperTheme$2, helperRefs$2, helperVars$1] =
 	createHelperVars({
 		verticalAlignment,
 		horizontalAlignment,
 		shadowColor: '#00000020' //if we want to support transparency vars, we should use different color format
-	}, componentName$h);
+	}, componentName$i);
+
+const { shadowColor } = helperRefs$2;
 
 const container = {
-	...helperTheme$1,
-	[compVars$1.width]: '100%',
+	...helperTheme$2,
+
+	[compVars$1.hostWidth]: '100%',
 	[compVars$1.boxShadow]: 'none',
-	[compVars$1.backgroundColor]: globalRefs$8.colors.surface.light,
-	[compVars$1.color]: globalRefs$8.colors.surface.contrast,
+	[compVars$1.backgroundColor]: globalRefs$7.colors.surface.light,
+	[compVars$1.color]: globalRefs$7.colors.surface.contrast,
+
 	verticalPadding: {
 		sm: { [compVars$1.verticalPadding]: '5px' },
 		md: { [compVars$1.verticalPadding]: '10px' },
 		lg: { [compVars$1.verticalPadding]: '20px' },
 	},
+
 	horizontalPadding: {
 		sm: { [compVars$1.horizontalPadding]: '5px' },
 		md: { [compVars$1.horizontalPadding]: '10px' },
 		lg: { [compVars$1.horizontalPadding]: '20px' },
 	},
+
 	direction: {
 		row: {
 			[compVars$1.flexDirection]: 'row',
-			[compVars$1.alignItems]: helperRefs$1.verticalAlignment,
-			[compVars$1.justifyContent]: helperRefs$1.horizontalAlignment,
+			[compVars$1.alignItems]: helperRefs$2.verticalAlignment,
+			[compVars$1.justifyContent]: helperRefs$2.horizontalAlignment,
 			[compVars$1.flexWrap]: 'wrap',
 			horizontalAlignment: {
-				spaceBetween: { [helperVars$1.horizontalAlignment]: 'space-between' },
+				spaceBetween: {
+					[helperVars$1.horizontalAlignment]: 'space-between'
+				},
 			}
 		},
-
 		column: {
 			[compVars$1.flexDirection]: 'column',
-			[compVars$1.alignItems]: helperRefs$1.horizontalAlignment,
-			[compVars$1.justifyContent]: helperRefs$1.verticalAlignment,
+			[compVars$1.alignItems]: helperRefs$2.horizontalAlignment,
+			[compVars$1.justifyContent]: helperRefs$2.verticalAlignment,
 			verticalAlignment: {
-				spaceBetween: { [helperVars$1.verticalAlignment]: 'space-between' }
+				spaceBetween: {
+					[helperVars$1.verticalAlignment]: 'space-between'
+				}
 			}
 		},
 	},
 
 	spaceBetween: {
-		sm: {
-			[compVars$1.gap]: '10px'
-		},
-		md: {
-			[compVars$1.gap]: '20px'
-		},
-		lg: {
-			[compVars$1.gap]: '30px'
-		}
+		sm: { [compVars$1.gap]: '10px' },
+		md: { [compVars$1.gap]: '20px' },
+		lg: { [compVars$1.gap]: '30px' }
 	},
 
 	shadow: {
-		sm: {
-			[compVars$1.boxShadow]: `${globalRefs$8.shadow.wide.sm} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.sm} ${helperRefs$1.shadowColor}`
-		},
-		md: {
-			[compVars$1.boxShadow]: `${globalRefs$8.shadow.wide.md} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.md} ${helperRefs$1.shadowColor}`
-		},
-		lg: {
-			[compVars$1.boxShadow]: `${globalRefs$8.shadow.wide.lg} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.lg} ${helperRefs$1.shadowColor}`
-		},
-		xl: {
-			[compVars$1.boxShadow]: `${globalRefs$8.shadow.wide.xl} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.xl} ${helperRefs$1.shadowColor}`
-		},
+		sm: { [compVars$1.boxShadow]: `${globalRefs$7.shadow.wide.sm} ${shadowColor}, ${globalRefs$7.shadow.narrow.sm} ${shadowColor}` },
+		md: { [compVars$1.boxShadow]: `${globalRefs$7.shadow.wide.md} ${shadowColor}, ${globalRefs$7.shadow.narrow.md} ${shadowColor}` },
+		lg: { [compVars$1.boxShadow]: `${globalRefs$7.shadow.wide.lg} ${shadowColor}, ${globalRefs$7.shadow.narrow.lg} ${shadowColor}` },
+		xl: { [compVars$1.boxShadow]: `${globalRefs$7.shadow.wide.xl} ${shadowColor}, ${globalRefs$7.shadow.narrow.xl} ${shadowColor}` },
 		'2xl': {
 			[helperVars$1.shadowColor]: '#00000050', // mimic daisyUI shadow settings 
-			[compVars$1.boxShadow]: `${globalRefs$8.shadow.wide['2xl']} ${helperRefs$1.shadowColor}`
+			[compVars$1.boxShadow]: `${globalRefs$7.shadow.wide['2xl']} ${shadowColor}`
 		},
 	},
 
 	borderRadius: {
-		sm: {
-			[compVars$1.borderRadius]: globalRefs$8.radius.sm
-		},
-		md: {
-			[compVars$1.borderRadius]: globalRefs$8.radius.md
-		},
-		lg: {
-			[compVars$1.borderRadius]: globalRefs$8.radius.lg
-		},
-		xl: {
-			[compVars$1.borderRadius]: globalRefs$8.radius.xl
-		},
-		'2xl': {
-			[compVars$1.borderRadius]: globalRefs$8.radius['2xl']
-		},
-		'3xl': {
-			[compVars$1.borderRadius]: globalRefs$8.radius['3xl']
-		},
+		sm: { [compVars$1.borderRadius]: globalRefs$7.radius.sm },
+		md: { [compVars$1.borderRadius]: globalRefs$7.radius.md },
+		lg: { [compVars$1.borderRadius]: globalRefs$7.radius.lg },
+		xl: { [compVars$1.borderRadius]: globalRefs$7.radius.xl },
+		'2xl': { [compVars$1.borderRadius]: globalRefs$7.radius['2xl'] },
+		'3xl': { [compVars$1.borderRadius]: globalRefs$7.radius['3xl'] },
 	}
 };
-const vars$c = { ...compVars$1, ...helperVars$1 };
+
+const vars$c = {
+	...compVars$1,
+	...helperVars$1
+};
 
 var container$1 = /*#__PURE__*/Object.freeze({
 	__proto__: null,
@@ -5958,79 +6039,84 @@ var logo$1 = /*#__PURE__*/Object.freeze({
 	vars: vars$b
 });
 
-const globalRefs$7 = getThemeRefs(globals);
-
+const globalRefs$6 = getThemeRefs(globals);
 const vars$a = TextClass.cssVarList;
 
 const text = {
-	[vars$a.lineHeight]: '1em',
+	[vars$a.textLineHeight]: '1em',
 	[vars$a.textAlign]: 'left',
-	[vars$a.color]: globalRefs$7.colors.surface.dark,
+	[vars$a.textColor]: globalRefs$6.colors.surface.dark,
 	variant: {
 		h1: {
-			[vars$a.fontSize]: globalRefs$7.typography.h1.size,
-			[vars$a.fontWeight]: globalRefs$7.typography.h1.weight,
-			[vars$a.fontFamily]: globalRefs$7.typography.h1.font
+			[vars$a.fontSize]: globalRefs$6.typography.h1.size,
+			[vars$a.fontWeight]: globalRefs$6.typography.h1.weight,
+			[vars$a.fontFamily]: globalRefs$6.typography.h1.font
 		},
 		h2: {
-			[vars$a.fontSize]: globalRefs$7.typography.h2.size,
-			[vars$a.fontWeight]: globalRefs$7.typography.h2.weight,
-			[vars$a.fontFamily]: globalRefs$7.typography.h2.font
+			[vars$a.fontSize]: globalRefs$6.typography.h2.size,
+			[vars$a.fontWeight]: globalRefs$6.typography.h2.weight,
+			[vars$a.fontFamily]: globalRefs$6.typography.h2.font
 		},
 		h3: {
-			[vars$a.fontSize]: globalRefs$7.typography.h3.size,
-			[vars$a.fontWeight]: globalRefs$7.typography.h3.weight,
-			[vars$a.fontFamily]: globalRefs$7.typography.h3.font
+			[vars$a.fontSize]: globalRefs$6.typography.h3.size,
+			[vars$a.fontWeight]: globalRefs$6.typography.h3.weight,
+			[vars$a.fontFamily]: globalRefs$6.typography.h3.font
 		},
 		subtitle1: {
-			[vars$a.fontSize]: globalRefs$7.typography.subtitle1.size,
-			[vars$a.fontWeight]: globalRefs$7.typography.subtitle1.weight,
-			[vars$a.fontFamily]: globalRefs$7.typography.subtitle1.font
+			[vars$a.fontSize]: globalRefs$6.typography.subtitle1.size,
+			[vars$a.fontWeight]: globalRefs$6.typography.subtitle1.weight,
+			[vars$a.fontFamily]: globalRefs$6.typography.subtitle1.font
 		},
 		subtitle2: {
-			[vars$a.fontSize]: globalRefs$7.typography.subtitle2.size,
-			[vars$a.fontWeight]: globalRefs$7.typography.subtitle2.weight,
-			[vars$a.fontFamily]: globalRefs$7.typography.subtitle2.font
+			[vars$a.fontSize]: globalRefs$6.typography.subtitle2.size,
+			[vars$a.fontWeight]: globalRefs$6.typography.subtitle2.weight,
+			[vars$a.fontFamily]: globalRefs$6.typography.subtitle2.font
 		},
 		body1: {
-			[vars$a.fontSize]: globalRefs$7.typography.body1.size,
-			[vars$a.fontWeight]: globalRefs$7.typography.body1.weight,
-			[vars$a.fontFamily]: globalRefs$7.typography.body1.font
+			[vars$a.fontSize]: globalRefs$6.typography.body1.size,
+			[vars$a.fontWeight]: globalRefs$6.typography.body1.weight,
+			[vars$a.fontFamily]: globalRefs$6.typography.body1.font
 		},
 		body2: {
-			[vars$a.fontSize]: globalRefs$7.typography.body2.size,
-			[vars$a.fontWeight]: globalRefs$7.typography.body2.weight,
-			[vars$a.fontFamily]: globalRefs$7.typography.body2.font
+			[vars$a.fontSize]: globalRefs$6.typography.body2.size,
+			[vars$a.fontWeight]: globalRefs$6.typography.body2.weight,
+			[vars$a.fontFamily]: globalRefs$6.typography.body2.font
 		}
 	},
+
 	mode: {
 		primary: {
-			[vars$a.color]: globalRefs$7.colors.primary.main
+			[vars$a.textColor]: globalRefs$6.colors.primary.main
 		},
 		secondary: {
-			[vars$a.color]: globalRefs$7.colors.secondary.main
+			[vars$a.textColor]: globalRefs$6.colors.secondary.main
 		},
 		error: {
-			[vars$a.color]: globalRefs$7.colors.error.main
+			[vars$a.textColor]: globalRefs$6.colors.error.main
 		},
 		success: {
-			[vars$a.color]: globalRefs$7.colors.success.main
+			[vars$a.textColor]: globalRefs$6.colors.success.main
 		}
 	},
+
 	textAlign: {
 		right: { [vars$a.textAlign]: 'right' },
 		left: { [vars$a.textAlign]: 'left' },
 		center: { [vars$a.textAlign]: 'center' }
 	},
+
 	_fullWidth: {
-		[vars$a.width]: '100%',
+		[vars$a.hostWidth]: '100%',
 	},
+
 	_italic: {
 		[vars$a.fontStyle]: 'italic'
 	},
+
 	_uppercase: {
 		[vars$a.textTransform]: 'uppercase'
 	},
+
 	_lowercase: {
 		[vars$a.textTransform]: 'lowercase'
 	}
@@ -6042,18 +6128,19 @@ var text$1 = /*#__PURE__*/Object.freeze({
 	vars: vars$a
 });
 
-const globalRefs$6 = getThemeRefs(globals);
+const globalRefs$5 = getThemeRefs(globals);
 const vars$9 = LinkClass.cssVarList;
 
 const link = {
 	[vars$9.cursor]: 'pointer',
-	[vars$9.borderBottomWidth]: '2px',
-	[vars$9.borderBottomStyle]: 'solid',
-	[vars$9.borderBottomColor]: 'transparent',
-	[vars$9.color]: globalRefs$6.colors.primary.main,
+
+	[vars$9.textUnderlineWidth]: '2px',
+	[vars$9.textUnderlineStyle]: 'solid',
+	[vars$9.textUnderlineColor]: 'transparent',
+	[vars$9.textColor]: globalRefs$5.colors.primary.main,
 
 	_hover: {
-		[vars$9.borderBottomColor]: globalRefs$6.colors.primary.main
+		[vars$9.textUnderlineColor]: globalRefs$5.colors.primary.main
 	},
 
 	textAlign: {
@@ -6063,33 +6150,25 @@ const link = {
 	},
 
 	_fullWidth: {
-		[vars$9.width]: '100%'
+		[vars$9.hostWidth]: '100%'
+	},
+
+	_hover: {
+		[vars$9.textUnderlineColor]: 'currentColor'
 	},
 
 	mode: {
 		primary: {
-			[vars$9.color]: globalRefs$6.colors.primary.main,
-			_hover: {
-				[vars$9.borderBottomColor]: globalRefs$6.colors.primary.main
-			}
+			[vars$9.textColor]: globalRefs$5.colors.primary.main,
 		},
 		secondary: {
-			[vars$9.color]: globalRefs$6.colors.secondary.main,
-			_hover: {
-				[vars$9.borderBottomColor]: globalRefs$6.colors.secondary.main
-			}
+			[vars$9.textColor]: globalRefs$5.colors.secondary.main,
 		},
 		error: {
-			[vars$9.color]: globalRefs$6.colors.error.main,
-			_hover: {
-				[vars$9.borderBottomColor]: globalRefs$6.colors.error.main
-			}
+			[vars$9.textColor]: globalRefs$5.colors.error.main,
 		},
 		success: {
-			[vars$9.color]: globalRefs$6.colors.success.main,
-			_hover: {
-				[vars$9.borderBottomColor]: globalRefs$6.colors.success.main
-			}
+			[vars$9.textColor]: globalRefs$5.colors.success.main,
 		}
 	}
 };
@@ -6100,37 +6179,48 @@ var link$1 = /*#__PURE__*/Object.freeze({
 	vars: vars$9
 });
 
-const globalRefs$5 = getThemeRefs(globals);
-
+const globalRefs$4 = getThemeRefs(globals);
 const compVars = DividerClass.cssVarList;
 
-const thickness = '2px';
-const textPaddingSize = '10px';
-const [helperTheme, helperRefs, helperVars] = createHelperVars({ thickness, textPaddingSize }, componentName$g);
+const [
+	helperTheme$1,
+	helperRefs$1,
+	helperVars
+] = createHelperVars({
+	thickness: '2px',
+	spacing: '10px'
+}, componentName$h);
 
 const divider = {
-	...helperTheme,
+	...helperTheme$1,
+
 	[compVars.alignItems]: 'center',
-	[compVars.dividerHeight]: helperRefs.thickness,
-	[compVars.backgroundColor]: globalRefs$5.colors.surface.main,
-	[compVars.textPadding]: `0 ${helperRefs.textPaddingSize}`,
-	[compVars.width]: '100%',
 	[compVars.flexDirection]: 'row',
-	[compVars.alignSelf]: 'strech',
-	[compVars.textWidth]: 'fit-content',
-	[compVars.maxTextWidth]: 'calc(100% - 100px)',
+	[compVars.alignSelf]: 'stretch',
+	[compVars.hostWidth]: '100%',
+	[compVars.stripeColor]: globalRefs$4.colors.surface.main,
+	[compVars.stripeColorOpacity]: '0.5',
+	[compVars.stripeHorizontalThickness]: helperRefs$1.thickness,
+	[compVars.labelTextWidth]: 'fit-content',
+	[compVars.labelTextMaxWidth]: 'calc(100% - 100px)',
+	[compVars.labelTextHorizontalSpacing]: helperRefs$1.spacing,
+
 	_vertical: {
-		[compVars.padding]: `0 calc(${thickness} * 3)`,
-		[compVars.width]: 'fit-content',
-		[compVars.textPadding]: `${helperRefs.textPaddingSize} 0`,
-		[compVars.flexDirection]: 'column',
 		[compVars.minHeight]: '200px',
-		[compVars.textWidth]: 'fit-content',
-		[compVars.dividerWidth]: helperRefs.thickness,
-		[compVars.maxTextWidth]: '100%',
+		[compVars.flexDirection]: 'column',
+		[compVars.hostWidth]: 'fit-content',
+		[compVars.hostPadding]: `0 calc(${helperRefs$1.thickness} * 3)`,
+		[compVars.stripeVerticalThickness]: helperRefs$1.thickness,
+		[compVars.labelTextWidth]: 'fit-content',
+		[compVars.labelTextMaxWidth]: '100%',
+		[compVars.labelTextVerticalSpacing]: helperRefs$1.spacing,
 	}
 };
-const vars$8 = { ...compVars, ...helperVars };
+
+const vars$8 = {
+	...compVars,
+	...helperVars
+};
 
 var divider$1 = /*#__PURE__*/Object.freeze({
 	__proto__: null,
@@ -6138,41 +6228,29 @@ var divider$1 = /*#__PURE__*/Object.freeze({
 	vars: vars$8
 });
 
+const globalRefs$3 = getThemeRefs(globals);
 const vars$7 = PasscodeClass.cssVarList;
-const globalRefs$4 = getThemeRefs(globals);
 
 const passcode = {
-	[vars$7.backgroundColor]: globalRefs$4.colors.surface.light,
-	[vars$7.outlineWidth]: '2px',
-	[vars$7.outlineColor]: 'transparent',
-	[vars$7.padding]: '0',
-	[vars$7.textAlign]: 'center',
-	[vars$7.borderColor]: 'transparent',
-	[vars$7.digitsGap]: '0',
-	[vars$7.focusedDigitFieldOutlineColor]: globalRefs$4.colors.surface.main,
-	[vars$7.color]: globalRefs$4.colors.surface.contrast,
+	[vars$7.fontFamily]: refs.fontFamily,
+	[vars$7.labelTextColor]: refs.labelTextColor,
+	[vars$7.labelRequiredIndicator]: refs.requiredIndicator,
+	[vars$7.digitValueTextColor]: refs.valueTextColor,
+	[vars$7.digitPadding]: '0',
+	[vars$7.digitTextAlign]: 'center',
+	[vars$7.digitSpacing]: '0',
+	[vars$7.hostWidth]: refs.width,
+	[vars$7.digitOutlineColor]: 'transparent',
+	[vars$7.digitOutlineWidth]: '2px',
+	[vars$7.focusedDigitFieldOutlineColor]: globalRefs$3.colors.surface.main,
 
 	_hideCursor: {
-		[vars$7.caretColor]: 'transparent',
-	},
-
-	_disabled: {
-		[vars$7.backgroundColor]: globalRefs$4.colors.surface.main
-	},
-
-	_fullWidth: {
-		[vars$7.width]: '100%'
-	},
-
-	_bordered: {
-		[vars$7.borderColor]: globalRefs$4.colors.surface.main
+		[vars$7.digitCaretTextColor]: 'transparent',
 	},
 
 	_invalid: {
-		[vars$7.borderColor]: globalRefs$4.colors.error.main,
-		[vars$7.color]: globalRefs$4.colors.error.main,
-		[vars$7.focusedDigitFieldOutlineColor]: globalRefs$4.colors.error.light,
-	},
+		[vars$7.focusedDigitFieldOutlineColor]: globalRefs$3.colors.error.light,
+	}
 };
 
 var passcode$1 = /*#__PURE__*/Object.freeze({
@@ -6181,47 +6259,42 @@ var passcode$1 = /*#__PURE__*/Object.freeze({
 	vars: vars$7
 });
 
-const globalRefs$3 = getThemeRefs(globals);
-
+const globalRefs$2 = getThemeRefs(globals);
 const vars$6 = LoaderLinearClass.cssVarList;
 
 const loaderLinear = {
-	[vars$6.display]: 'inline-block',
-	[vars$6.barColor]: globalRefs$3.colors.surface.contrast,
+	[vars$6.hostDisplay]: 'inline-block',
+	[vars$6.hostWidth]: '100%',
+
+	[vars$6.barColor]: globalRefs$2.colors.surface.contrast,
 	[vars$6.barWidth]: '20%',
-	[vars$6.surfaceColor]: globalRefs$3.colors.surface.main,
-	[vars$6.borderRadius]: '4px',
+
+	[vars$6.barBackgroundColor]: globalRefs$2.colors.surface.main,
+	[vars$6.barBorderRadius]: '4px',
+
 	[vars$6.animationDuration]: '2s',
 	[vars$6.animationTimingFunction]: 'linear',
 	[vars$6.animationIterationCount]: 'infinite',
-	[vars$6.width]: '100%',
+
 	size: {
-		xs: {
-			[vars$6.height]: '6px'
-		},
-		sm: {
-			[vars$6.height]: '8px'
-		},
-		md: {
-			[vars$6.height]: '10px'
-		},
-		lg: {
-			[vars$6.height]: '12px'
-		},
-		xl: {
-			[vars$6.height]: '14px'
-		}
+		xs: { [vars$6.barHeight]: '8px' },
+		sm: { [vars$6.barHeight]: '10px' },
+		md: { [vars$6.barHeight]: '14px' },
+		lg: { [vars$6.barHeight]: '20px' },
+		xl: { [vars$6.barHeight]: '25px' }
 	},
+
 	mode: {
 		primary: {
-			[vars$6.barColor]: globalRefs$3.colors.primary.main
+			[vars$6.barColor]: globalRefs$2.colors.primary.main
 		},
 		secondary: {
-			[vars$6.barColor]: globalRefs$3.colors.secondary.main
+			[vars$6.barColor]: globalRefs$2.colors.secondary.main
 		}
 	},
+
 	_hidden: {
-		[vars$6.display]: 'none'
+		[vars$6.hostDisplay]: 'none'
 	}
 };
 
@@ -6231,60 +6304,45 @@ var loaderLinear$1 = /*#__PURE__*/Object.freeze({
 	vars: vars$6
 });
 
-const globalRefs$2 = getThemeRefs(globals);
-
+const globalRefs$1 = getThemeRefs(globals);
 const vars$5 = LoaderRadialClass.cssVarList;
 
-const loaderRadial = {
-	[vars$5.display]: 'inline-block',
-	[vars$5.color]: globalRefs$2.colors.surface.contrast,
-	[vars$5.animationDuration]: '2s',
-	[vars$5.animationTimingFunction]: 'linear',
-	[vars$5.animationIterationCount]: 'infinite',
-	[vars$5.spinnerStyle]: 'solid',
-	[vars$5.spinnerWidth]: '4px',
-	[vars$5.spinnerRadius]: '50%',
-	[vars$5.spinnerTopColor]: 'currentColor',
-	[vars$5.spinnerBottomColor]: 'transparent',
-	[vars$5.spinnerRightColor]: 'currentColor',
-	[vars$5.spinnerLeftColor]: 'transparent',
-	size: {
-		xs: {
-			[vars$5.width]: '20px',
-			[vars$5.height]: '20px',
-			[vars$5.spinnerWidth]: '2px'
-		},
-		sm: {
-			[vars$5.width]: '30px',
-			[vars$5.height]: '30px',
-			[vars$5.spinnerWidth]: '3px'
-		},
-		md: {
-			[vars$5.width]: '40px',
-			[vars$5.height]: '40px',
-			[vars$5.spinnerWidth]: '4px'
-		},
-		lg: {
-			[vars$5.width]: '60px',
-			[vars$5.height]: '60px',
-			[vars$5.spinnerWidth]: '5px'
-		},
-		xl: {
-			[vars$5.width]: '80px',
-			[vars$5.height]: '80px',
-			[vars$5.spinnerWidth]: '6px'
-		}
-	},
+const [helperTheme, helperRefs] = createHelperVars({
+	spinnerColor: globalRefs$1.colors.surface.contrast,
 	mode: {
 		primary: {
-			[vars$5.color]: globalRefs$2.colors.primary.main
+			spinnerColor: globalRefs$1.colors.primary.main
 		},
 		secondary: {
-			[vars$5.color]: globalRefs$2.colors.secondary.main
+			spinnerColor: globalRefs$1.colors.secondary.main
 		}
+	}
+}, componentName$j);
+
+const loaderRadial = {
+	...helperTheme,
+
+	[vars$5.animationDuration]: '2s',
+	[vars$5.animationTimingFunction]: 'linear',
+	[vars$5.animationIterationCount]: 'infinite',
+	[vars$5.spinnerBorderStyle]: 'solid',
+	[vars$5.spinnerBorderWidth]: '0.2em',
+	[vars$5.spinnerBorderRadius]: '50%',
+	[vars$5.spinnerQuadrant1Color]: helperRefs.spinnerColor,
+	[vars$5.spinnerQuadrant2Color]: 'transparent',
+	[vars$5.spinnerQuadrant3Color]: helperRefs.spinnerColor,
+	[vars$5.spinnerQuadrant4Color]: 'transparent',
+
+	size: {
+		xs: { [vars$5.spinnerSize]: '20px' },
+		sm: { [vars$5.spinnerSize]: '30px' },
+		md: { [vars$5.spinnerSize]: '40px' },
+		lg: { [vars$5.spinnerSize]: '60px' },
+		xl: { [vars$5.spinnerSize]: '80px' }
 	},
+
 	_hidden: {
-		[vars$5.display]: 'none'
+		[vars$5.hostDisplay]: 'none'
 	}
 };
 
@@ -6294,51 +6352,38 @@ var loaderRadial$1 = /*#__PURE__*/Object.freeze({
 	vars: vars$5
 });
 
-const globalRefs$1 = getThemeRefs(globals);
-
+const globalRefs = getThemeRefs(globals);
 const vars$4 = ComboBoxClass.cssVarList;
 
 const comboBox = {
-	[vars$4.borderColor]: globalRefs$1.colors.surface.main,
-	[vars$4.borderWidth]: '1px',
-	[vars$4.borderStyle]: 'solid',
-	[vars$4.cursor]: 'pointer',
-	[vars$4.padding]: '0',
-	[vars$4.placeholderColor]: globalRefs$1.colors.surface.main,
-	[vars$4.toggleColor]: globalRefs$1.colors.surface.contrast,
-	[vars$4.toggleCursor]: 'pointer',
-	[vars$4.inputBackgroundColor]: globalRefs$1.colors.surface.light,
-	[vars$4.padding]: `0 ${globalRefs$1.spacing.xs}`,
-
-	[vars$4.height]: '2em',
-
-	size: {
-		xs: {
-			[vars$4.fontSize]: '8px',
-		},
-		sm: {
-			[vars$4.fontSize]: '10px',
-		},
-		md: {
-			[vars$4.fontSize]: '14px',
-		},
-		lg: {
-			[vars$4.fontSize]: '20px',
-		},
-		xl: {
-			[vars$4.fontSize]: '25px',
-		}
-	},
+	[vars$4.hostWidth]: refs.width,
+	[vars$4.fontSize]: refs.fontSize,
+	[vars$4.fontFamily]: refs.fontFamily,
+	[vars$4.labelTextColor]: refs.labelTextColor,
+	[vars$4.inputBorderColor]: refs.borderColor,
+	[vars$4.inputBorderWidth]: refs.borderWidth,
+	[vars$4.inputBorderStyle]: refs.borderStyle,
+	[vars$4.inputBorderRadius]: refs.borderRadius,
+	[vars$4.inputOutlineColor]: refs.outlineColor,
+	[vars$4.inputOutlineOffset]: refs.outlineOffset,
+	[vars$4.inputOutlineWidth]: refs.outlineWidth,
+	[vars$4.inputOutlineStyle]: refs.outlineStyle,
+	[vars$4.labelRequiredIndicator]: refs.requiredIndicator,
+	[vars$4.inputValueTextColor]: refs.valueTextColor,
+	[vars$4.inputPlaceholderTextColor]: refs.placeholderTextColor,
+	[vars$4.inputBackgroundColor]: refs.backgroundColor,
+	[vars$4.inputHeight]: refs.inputHeight,
+	[vars$4.inputDropdownButtonColor]: globalRefs.colors.surface.contrast,
+	[vars$4.inputDropdownButtonCursor]: 'pointer',
 
 	_readonly: {
-		[vars$4.toggleCursor]: 'default',
+		[vars$4.inputDropdownButtonCursor]: 'default'
 	},
 
 	_invalid: {
-		[vars$4.borderColor]: globalRefs$1.colors.error.main,
-		[vars$4.placeholderColor]: globalRefs$1.colors.error.light,
-		[vars$4.toggleColor]: globalRefs$1.colors.error.main,
+		[vars$4.inputDropdownButtonColor]: globalRefs.colors.error.main
 	},
+
 	// [vars.overlayCursor]: 'pointer',
 	// [vars.overlayBackground]: globalRefs.colors.surface.light,
 	// [vars.overlayBorder]: `2px solid red`,
@@ -6361,65 +6406,28 @@ var image$1 = /*#__PURE__*/Object.freeze({
 	vars: vars$3
 });
 
-const globalRefs = getThemeRefs(globals);
 const vars$2 = PhoneFieldClass.cssVarList;
 
 const phoneField = {
-	[vars$2.wrapperBorderStyle]: 'solid',
-	[vars$2.wrapperBorderWidth]: '1px',
-	[vars$2.wrapperBorderColor]: 'transparent',
-	[vars$2.wrapperBorderRadius]: globalRefs.radius.xs,
-	[vars$2.placeholderColor]: globalRefs.colors.surface.main,
-	[vars$2.color]: globalRefs.colors.surface.contrast,
-
+	[vars$2.hostWidth]: refs.width,
+	[vars$2.fontSize]: refs.fontSize,
+	[vars$2.fontFamily]: refs.fontFamily,
+	[vars$2.labelTextColor]: refs.labelTextColor,
+	[vars$2.labelRequiredIndicator]: refs.requiredIndicator,
+	[vars$2.inputValueTextColor]: refs.valueTextColor,
+	[vars$2.inputPlaceholderTextColor]: refs.placeholderTextColor,
+	[vars$2.inputBorderStyle]: refs.borderStyle,
+	[vars$2.inputBorderWidth]: refs.borderWidth,
+	[vars$2.inputBorderColor]: refs.borderColor,
+	[vars$2.inputBorderRadius]: refs.borderRadius,
+	[vars$2.inputOutlineStyle]: refs.outlineStyle,
+	[vars$2.inputOutlineWidth]: refs.outlineWidth,
+	[vars$2.inputOutlineColor]: refs.outlineColor,
+	[vars$2.inputOutlineOffset]: refs.outlineOffset,
+	[vars$2.inputHeight]: refs.inputHeight,
 	[vars$2.phoneInputWidth]: '10em',
 	[vars$2.countryCodeInputWidth]: '5em',
-
-	[vars$2.inputHeight]: '2em',
-	[vars$2.countryCodeDropdownWidth]: '12em',
-
-	size: {
-		xs: {
-			[vars$2.fontSize]: '8px',
-		},
-		sm: {
-			[vars$2.fontSize]: '20px',
-		},
-		md: {
-			[vars$2.fontSize]: '14px',
-		},
-		lg: {
-			[vars$2.fontSize]: '20px',
-		},
-		xl: {
-			[vars$2.fontSize]: '25px',
-		}
-	},
-
-	_fullWidth: {
-		[vars$2.componentWidth]: '100%',
-		[vars$2.phoneInputWidth]: '100%',
-		[vars$2.countryCodeDropdownWidth]: '100%',
-	},
-
-	_bordered: {
-		[vars$2.wrapperBorderColor]: globalRefs.colors.surface.main
-	},
-
-	[vars$2.outlineStyle]: 'solid',
-	[vars$2.outlineWidth]: '0.1em',
-	[vars$2.outlineColor]: 'transparent',
-
-	_focused: {
-		[vars$2.outlineColor]: globalRefs.colors.surface.main
-	},
-
-	_invalid: {
-		[vars$2.outlineColor]: globalRefs.colors.error.light,
-		[vars$2.color]: globalRefs.colors.error.main,
-		[vars$2.placeholderColor]: globalRefs.colors.error.light,
-		[vars$2.wrapperBorderColor]: globalRefs.colors.error.main
-	},
+	[vars$2.countryCodeDropdownWidth]: '20em',
 
 	// '@overlay': {
 	// 	overlayItemBackgroundColor: 'red'
@@ -6435,33 +6443,17 @@ var phoneField$1 = /*#__PURE__*/Object.freeze({
 const vars$1 = NewPasswordClass.cssVarList;
 
 const newPassword = {
-	[vars$1.inputsGap]: '1em',
+	[vars$1.hostWidth]: refs.width,
+	[vars$1.fontSize]: refs.fontSize,
+	[vars$1.fontFamily]: refs.fontFamily,
+	[vars$1.spaceBetweenInputs]: '1em',
 
 	_required: {
-		[vars$1.requiredContent]: "'*'",
-	},
-
-	_fullWidth: {
-		[vars$1.componentWidth]: '100%'
-	},
-
-	size: {
-		xs: {
-			[vars$1.fontSize]: '8px',
-		},
-		sm: {
-			[vars$1.fontSize]: '10px',
-		},
-		md: {
-			[vars$1.fontSize]: '14px',
-		},
-		lg: {
-			[vars$1.fontSize]: '20px',
-		},
-		xl: {
-			[vars$1.fontSize]: '25px',
-		}
-	},
+		// NewPassword doesn't pass `required` attribute to its PasswordFields.
+		// 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$1.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
+	}
 };
 
 var newPassword$1 = /*#__PURE__*/Object.freeze({
@@ -6472,7 +6464,7 @@ var newPassword$1 = /*#__PURE__*/Object.freeze({
 
 const components = {
 	button: button$1,
-	textField: textField$2,
+	textField: textField$1,
 	passwordField: passwordField$1,
 	numberField: numberField$1,
 	emailField: emailField$1,
@@ -6491,14 +6483,14 @@ const components = {
 	image: image$1,
 	phoneField: phoneField$1,
 	newPassword: newPassword$1,
+	inputWrapper,
 };
 
-
 const theme = Object.keys(components).reduce((acc, comp) => ({ ...acc, [comp]: components[comp].default }), {});
 const vars = Object.keys(components).reduce((acc, comp) => ({ ...acc, [comp]: components[comp].vars }), {});
 
 const defaultTheme = { globals, components: theme };
-const themeVars = { globals: vars$l, components: vars };
+const themeVars = { globals: vars$m, components: vars };
 
 export { ButtonClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordFieldClass, PhoneFieldClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
 //# sourceMappingURL=index.esm.js.map