@descope/web-components-ui 1.0.130 → 1.0.132

package/dist/index.esm.js

@@ -138,6 +138,107 @@ const forwardProps = (src, target, props = []) => {
 	Object.defineProperties(target, config);
 };
 
+const resetInputOverrides = (name, cssVarList) => `
+    ${resetInputContainer(name)}
+    ${resetInputCursor(name)}
+    ${resetInputPlaceholder(name)}
+    ${resetInputField(name)}
+    ${resetInputAutoFill(name, cssVarList)}
+    ${resetInputFieldInvalidBackgroundColor(name)}
+    ${resetInitialHeight(name)}
+    ${resetInputElement(name)}
+    ${resetInputFieldunderlayingBorder(name)}
+`;
+
+const useHostExternalPadding = (cssVarList) => `
+    :host {
+        padding: calc(var(${cssVarList.inputOutlineWidth}) + var(${cssVarList.inputOutlineOffset}))        
+    }
+`;
+
+const resetInputFieldunderlayingBorder = (name) => `
+    ${name}::part(input-field)::after {
+        border: none;
+    }
+`;
+
+const resetInitialHeight = (name) => `
+    ${name}::before {
+		height: unset;
+	}
+`;
+
+const resetInputElement = (name) => `
+    ${name} > input {
+        -webkit-mask-image: none;
+        min-height: 0;
+        box-sizing: border-box;
+    }
+`;
+
+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;
+        box-sizing: border-box;
+    }
+`;
+
+const resetInputReadonlyStyle = (name) => `
+    ${name}::part(input-field)::after {
+        opacity: 0;
+    }
+`;
+
+const resetInputFieldInvalidBackgroundColor = (name) => `
+    ${name}::part(input-field)::after {
+        background: none;
+    }
+`;
+
 class ComponentsThemeManager {
   static mountOnPropName = 'DescopeThemeManager';
 
@@ -527,7 +628,8 @@ const booleanAttributesList = [
   'has-error-message',
   'focus-ring',
   'opened',
-  'active'
+  'active',
+  'password-visible'
 ];
 
 const isBooleanAttribute = (attr) => {
@@ -1164,8 +1266,8 @@ const ButtonClass = compose(
 	createStyleMixin({
 		mappings: {
 			hostWidth: { ...host$c, property: 'width' },
-			fontSize: { property: 'font-size' },
-			fontFamily: { property: 'font-family' },
+			fontSize: {},
+			fontFamily: {},
 
 			cursor: {},
 			backgroundColor: {},
@@ -1206,9 +1308,7 @@ const ButtonClass = compose(
 			${iconStyles}
 			${loadingIndicatorStyles}
 			${editorOverrides}
-			:host {
-				padding: calc(var(${ButtonClass.cssVarList.outlineWidth}) + var(${ButtonClass.cssVarList.outlineOffset}))
-			}
+			${useHostExternalPadding(ButtonClass.cssVarList)}
 		`,
 		excludeAttrsSync: ['tabindex'],
 		componentName: componentName$o
@@ -1351,91 +1451,6 @@ const booleanFieldMixin = (superclass) =>
         }
     };
 
-const resetInputOverrides = (name, cssVarList) => `
-    ${resetInputContainer(name)}
-    ${resetInputCursor(name)}
-    ${resetInputPlaceholder(name)}
-    ${resetInputField(name)}
-    ${resetInputAutoFill(name, cssVarList)}
-    ${resetInputFieldInvalidBackgroundColor(name)}
-
-    ${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;
-        box-sizing: border-box;
-    }
-`;
-
-const resetInputReadonlyStyle = (name) => `
-    ${name}::part(input-field)::after {
-        opacity: 0;
-    }
-`;
-
-const resetInputFieldInvalidBackgroundColor = (name) => `
-    ${name}::part(input-field)::after {
-        background: none;
-    }
-`;
-
 var commonStyles = `
 :host {
 	display: inline-flex;
@@ -1532,16 +1547,16 @@ const CheckboxClass = compose(
 			hostWidth: { ...host$b, property: 'width' },
 
 			fontSize: [
-				{ ...host$b, property: 'font-size' },
-				{ ...checkboxElement, property: 'font-size' },
-				{ ...label$8, property: 'font-size' },
-				{ ...checkboxHiddenLabel$1, property: 'font-size' }
+				host$b,
+				checkboxElement,
+				label$8,
+				checkboxHiddenLabel$1,
 			],
 			fontFamily: [
-				{ ...label$8, property: 'font-family' },
-				{ ...checkboxHiddenLabel$1, property: 'font-family' },
-				{ ...helperText$7, property: 'font-family' },
-				{ ...errorMessage$7, property: 'font-family' }
+				label$8,
+				checkboxHiddenLabel$1,
+				helperText$7,
+				errorMessage$7,
 			],
 
 			labelTextColor: [
@@ -1585,10 +1600,8 @@ const CheckboxClass = compose(
 		slots: [],
 		wrappedEleName: 'vaadin-text-field',
 		style: () => `
-		${commonStyles}
-		vaadin-text-field {
-			padding: calc(var(${CheckboxClass.cssVarList.inputOutlineWidth}) + var(${CheckboxClass.cssVarList.inputOutlineOffset}));
-		}
+			${commonStyles}
+			${useHostExternalPadding(CheckboxClass.cssVarList)}
 		`,
 		excludeAttrsSync: ['tabindex'],
 		componentName: componentName$m
@@ -1628,14 +1641,14 @@ const SwitchToggleClass = compose(
 		mappings: {
 			hostWidth: { ...host$a, property: 'width' },
 			fontSize: [
-				{ ...component, property: 'font-size' },
-				{ ...label$7, property: 'font-size' },
-				{ ...checkboxHiddenLabel, property: 'font-size' },
+				component,
+				label$7,
+				checkboxHiddenLabel,
 			],
 			fontFamily: [
-				{ ...label$7, property: 'font-family' },
-				{ ...helperText$6, property: 'font-family' },
-				{ ...errorMessage$6, property: 'font-family' }
+				label$7,
+				helperText$6,
+				errorMessage$6,
 			],
 			trackBorderWidth: { ...track, property: 'border-width' },
 			trackBorderStyle: { ...track, property: 'border-style' },
@@ -1694,9 +1707,7 @@ const SwitchToggleClass = compose(
 		wrappedEleName: 'vaadin-text-field',
 		style: () => `
 			${commonStyles}
-			:host {
-				padding: calc(var(${SwitchToggleClass.cssVarList.inputOutlineWidth}) + var(${SwitchToggleClass.cssVarList.inputOutlineOffset}));
-			}
+			${useHostExternalPadding(SwitchToggleClass.cssVarList)}
 			vaadin-text-field::part(label) {
 				left: calc(var(${SwitchToggleClass.cssVarList.trackWidth}) + var(${SwitchToggleClass.cssVarList.trackBorderWidth}) * 2);
 			}
@@ -2027,7 +2038,7 @@ const TextClass = compose(
 	createStyleMixin({
 		mappings: {
 			hostWidth: { selector: () => ':host', property: 'width' },
-			fontSize: { property: 'font-size' },
+			fontSize: {},
 			textColor: { property: 'color' },
 			textLineHeight: { property: 'line-height' },
 			textLetterSpacing: { property: 'letter-spacing' },
@@ -2057,7 +2068,6 @@ const {
 	requiredIndicator: requiredIndicator$5,
 	inputField: inputField$4,
 	input,
-	readOnlyInput,
 	helperText: helperText$5,
 	errorMessage: errorMessage$5
 } = {
@@ -2067,7 +2077,6 @@ const {
 	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)' }
 };
@@ -2075,17 +2084,18 @@ const {
 var textFieldMappings = {
 	// 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' }
+		{},
+		host$7,
 	],
 	fontFamily: [
-		{ ...label$6, property: 'font-family' },
-		{ ...inputField$4, property: 'font-family' },
-		{ ...helperText$5, property: 'font-family' },
-		{ ...errorMessage$5, property: 'font-family' }
+		label$6,
+		inputField$4,
+		helperText$5,
+		errorMessage$5,
 	],
 
 	hostWidth: { ...host$7, property: 'width' },
+	hostMinWidth: { ...host$7, property: 'min-width' },
 
 	inputBackgroundColor: { ...inputField$4, property: 'background-color' },
 
@@ -2099,22 +2109,16 @@ var textFieldMappings = {
 
 	labelRequiredIndicator: { ...requiredIndicator$5, property: 'content' },
 
-	inputBorderColor: [
-		{ ...inputField$4, property: 'border-color' },
-		{ ...readOnlyInput, property: 'border-color' }
-	],
-	inputBorderWidth: [
-		{ ...inputField$4, property: 'border-width' },
-		{ ...readOnlyInput, property: 'border-width' }
-	],
-	inputBorderStyle: [
-		{ ...inputField$4, property: 'border-style' },
-		{ ...readOnlyInput, property: 'border-style' }
-	],
+	inputBorderColor: { ...inputField$4, property: 'border-color' },
+	inputBorderWidth: { ...inputField$4, property: 'border-width' },
+	inputBorderStyle: { ...inputField$4, property: 'border-style' },
 	inputBorderRadius: { ...inputField$4, property: 'border-radius' },
 
 	inputHeight: { ...inputField$4, property: 'height' },
-	inputPadding: { ...inputField$4, property: 'padding' },
+	inputHorizontalPadding: [
+		{ ...input, property: 'padding-left' },
+		{ ...input, property: 'padding-right' }
+	],
 
 	inputOutlineColor: { ...inputField$4, property: 'outline-color' },
 	inputOutlineStyle: { ...inputField$4, property: 'outline-style' },
@@ -2143,9 +2147,9 @@ const EmailFieldClass = compose(
 			:host {
 				display: inline-block;
 				max-width: 100%;
-				min-width: 10em;
 				padding: calc(var(${EmailFieldClass.cssVarList.inputOutlineWidth}) + var(${EmailFieldClass.cssVarList.inputOutlineOffset}))
 			}
+			${useHostExternalPadding(EmailFieldClass.cssVarList)}
 			${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}		
 		`,
 		excludeAttrsSync: ['tabindex'],
@@ -2288,9 +2292,9 @@ const NumberFieldClass = compose(
 			:host {
 				display: inline-block;
 				max-width: 100%;
-				min-width: 10em;
 				padding: calc(var(${NumberFieldClass.cssVarList.inputOutlineWidth}) + var(${NumberFieldClass.cssVarList.inputOutlineOffset}));
 			}
+			${useHostExternalPadding(NumberFieldClass.cssVarList)}
 			${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
 		`,
 		excludeAttrsSync: ['tabindex'],
@@ -2539,10 +2543,9 @@ const TextFieldClass = compose(
 			:host {
 				display: inline-block;
 				max-width: 100%;
-				min-width: 10em;
 				padding: calc(var(${TextFieldClass.cssVarList.inputOutlineWidth}) + var(${TextFieldClass.cssVarList.inputOutlineOffset}));
 			}
-			${resetInputFieldDefaultWidth()}
+			${useHostExternalPadding(TextFieldClass.cssVarList)}
 			${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
 		`,
 		excludeAttrsSync: ['tabindex'],
@@ -2632,7 +2635,11 @@ const PasscodeClass = compose(
 				selector: TextFieldClass.componentName,
 				property: textVars$1.inputValueTextColor
 			},
-			digitPadding: { ...digitField, property: textVars$1.inputPadding },
+			digitSize: [
+				{ ...digitField, property: 'height' },
+				{ ...digitField, property: 'width' }
+			],
+			digitPadding: { ...digitField, property: textVars$1.inputHorizontalPadding },
 			digitTextAlign: { ...digitField, property: textVars$1.inputTextAlign },
 			digitCaretTextColor: { ...digitField, property: textVars$1.inputCaretTextColor },
 			digitSpacing: { ...internalWrapper, property: 'gap' },
@@ -2764,7 +2771,7 @@ const componentName$8 = getComponentName('password');
 const {
 	host: host$4,
 	inputField: inputField$3,
-	inputElement,
+	inputElement: inputElement$1,
 	inputElementPlaceholder,
 	revealButtonContainer,
 	revealButtonIcon,
@@ -2789,9 +2796,10 @@ const PasswordClass = compose(
 	createStyleMixin({
 		mappings: {
 			hostWidth: { ...host$4, property: 'width' },
+			hostMinWidth: { ...host$4, property: 'min-width' },
 			fontSize: [
-				{ property: 'font-size' },
-				{ ...host$4, property: 'font-size' }
+				{},
+				host$4,
 			],
 			fontFamily: [
 				label$4,
@@ -2800,6 +2808,10 @@ const PasswordClass = compose(
 				helperText$4
 			],
 			inputHeight: { ...inputField$3, property: 'height' },
+			inputHorizontalPadding: [
+				{ ...inputElement$1, property: 'padding-left' },
+				{ ...inputElement$1, property: 'padding-right' }
+			],
 			inputBackgroundColor: { ...inputField$3, property: 'background-color' },
 
 			inputBorderStyle: { ...inputField$3, property: 'border-style' },
@@ -2819,12 +2831,17 @@ const PasswordClass = compose(
 			labelRequiredIndicator: { ...requiredIndicator$3, property: 'content' },
 
 			inputValueTextColor: [
-				{ ...inputElement, property: 'color' },
+				{ ...inputElement$1, property: 'color' },
 				{ ...revealButtonIcon, property: 'color' }
 			],
 			inputPlaceholderTextColor: { ...inputElementPlaceholder, property: 'color' },
 
-			revealButtonOffset: { ...revealButtonContainer, property: 'margin' }
+			revealButtonOffset: [
+				{ ...revealButtonContainer, property: 'margin-right' },
+				{ ...revealButtonContainer, property: 'margin-left' }
+			],
+			revealButtonSize: { ...revealButtonContainer, property: 'font-size' },
+
 		}
 	}),
 	draggableMixin,
@@ -2838,17 +2855,22 @@ const PasswordClass = compose(
 		style: () => `
 			:host {
 				display: inline-block;
-				min-width: 10em;
 				max-width: 100%;
-				box-sizing: border-box;				
-				padding: calc(var(${PasswordClass.cssVarList.inputOutlineWidth}) + var(${PasswordClass.cssVarList.inputOutlineOffset}));
+				min-width: 10em;
 			}
+			${useHostExternalPadding(PasswordClass.cssVarList)}
+			${resetInputCursor('vaadin-password-field')}
+
 			vaadin-password-field {
 				width: 100%;
 				box-sizing: border-box;
 				padding: 0;
 			}
+			vaadin-password-field > input {
+				box-sizing: border-box;
+			}
 			vaadin-password-field::part(input-field) {
+				box-sizing: border-box;
 				padding: 0;
 			}
 			vaadin-password-field[focus-ring]::part(input-field) {
@@ -2871,8 +2893,6 @@ const PasswordClass = compose(
 				cursor: pointer;
 			}
 
-			${resetInputCursor('vaadin-password-field')}
-
 			[readonly] vaadin-password-field-button {
 				pointer-events: none;
 			}
@@ -2914,15 +2934,16 @@ const TextAreaClass = compose(
 	createStyleMixin({
 		mappings: {
 			hostWidth: { ...host$3, property: 'width' },
+			hostMinWidth: { ...host$3, property: 'min-width' },
 			fontSize: [
-				{ ...host$3, property: 'font-size' },
-				{ ...textArea$2, property: 'font-size' }
+				host$3,
+				textArea$2,
 			],
 			fontFamily: [
-				{ ...label$3, property: 'font-family' },
-				{ ...inputField$2, property: 'font-family' },
-				{ ...helperText$3, property: 'font-family' },
-				{ ...errorMessage$3, property: 'font-family' }
+				label$3,
+				inputField$2,
+				helperText$3,
+				errorMessage$3,
 			],
 			labelTextColor: [
 				{ ...label$3, property: 'color' },
@@ -2953,11 +2974,9 @@ const TextAreaClass = compose(
 		style: () => `
 			:host {
 				display: inline-block;
-				min-width: 10em;
 				max-width: 100%;
-				padding: calc(var(${TextAreaClass.cssVarList.inputOutlineWidth}) + var(${TextAreaClass.cssVarList.inputOutlineOffset}));
 			}
-
+			${useHostExternalPadding(TextAreaClass.cssVarList)}
 			${resetInputContainer('vaadin-text-area')}
 			${resetInputField('vaadin-text-area')}
 			${resetInputPlaceholder('vaadin-text-area', 'textarea')}
@@ -3071,6 +3090,7 @@ const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclas
 const {
 	host: host$2,
 	inputField: inputField$1,
+	inputElement,
 	placeholder,
 	toggle,
 	label: label$2,
@@ -3080,6 +3100,7 @@ const {
 } = {
 	host: { selector: () => ':host' },
 	inputField: { selector: '::part(input-field)' },
+	inputElement: { selector: 'input' },
 	placeholder: { selector: '> input:placeholder-shown' },
 	toggle: { selector: '::part(toggle-button)' },
 	label: { selector: '::part(label)' },
@@ -3099,8 +3120,8 @@ const ComboBoxClass = compose(
 			hostWidth: { ...host$2, property: 'width' },
 			// we apply font-size also on the host so we can set its width with em
 			fontSize: [
-				{ property: 'font-size' },
-				{ ...host$2, property: 'font-size' }
+				{},
+				host$2,
 			],
 			fontFamily: [
 				label$2,
@@ -3124,10 +3145,19 @@ const ComboBoxClass = compose(
 			inputPlaceholderTextColor: { ...placeholder, property: 'color' },
 			inputDropdownButtonCursor: { ...toggle, property: 'cursor' },
 			inputDropdownButtonColor: { ...toggle, property: 'color' },
+			inputDropdownButtonSize: { ...toggle, property: 'font-size' },
+			inputDropdownButtonOffset: [
+				{ ...toggle, property: 'margin-right' },
+				{ ...toggle, property: 'margin-left' },
+			],
 			inputOutlineColor: { ...inputField$1, property: 'outline-color' },
 			inputOutlineWidth: { ...inputField$1, property: 'outline-width' },
 			inputOutlineStyle: { ...inputField$1, property: 'outline-style' },
 			inputOutlineOffset: { ...inputField$1, property: 'outline-offset' },
+			inputHorizontalPadding: [
+				{ ...inputElement, property: 'padding-left' },
+				{ ...inputElement, property: 'padding-right' }
+			],
 
 			// we need to use the variables from the portal mixin
 			// so we need to use an arrow function on the selector
@@ -3165,24 +3195,29 @@ const ComboBoxClass = compose(
 			display: inline-flex;
 			box-sizing: border-box;
 			-webkit-mask-image: none;
-			padding: calc(var(${ComboBoxClass.cssVarList.inputOutlineWidth}) + var(${ComboBoxClass.cssVarList.inputOutlineOffset}))
 		}
+		${useHostExternalPadding(ComboBoxClass.cssVarList)}
+		${resetInputReadonlyStyle('vaadin-combo-box')}
+		${resetInputPlaceholder('vaadin-combo-box')}
+		${resetInputCursor('vaadin-combo-box')}
+		
 		vaadin-combo-box {
 			padding: 0;
 			width: 100%;
 		}
+		vaadin-combo-box::before {
+			height: initial;
+		}
 		vaadin-combo-box [slot="input"] {
 			-webkit-mask-image: none;
 			min-height: 0;
+			box-sizing: border-box;
 		}
 
 		vaadin-combo-box::part(input-field) {
 			padding: 0;
+			box-shadow: none;
 		}
-
-		${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,
@@ -4706,8 +4741,8 @@ const PhoneFieldClass = compose(
 	createStyleMixin({
 		mappings: {
 			fontSize: [
-				{ ...host$1, property: 'font-size' },
-				{ ...inputField, property: 'font-size' },
+				host$1,
+				inputField,
 				{
 					selector: TextFieldClass.componentName,
 					property: TextFieldClass.cssVarList.fontSize
@@ -4746,8 +4781,6 @@ const PhoneFieldClass = compose(
 			],
 			inputBorderRadius: { ...inputField, property: 'border-radius' },
 
-			inputHeight: { ...inputField, property: 'height' },
-
 			countryCodeInputWidth: { ...countryCodeInput, property: comboVars.hostWidth },
 			countryCodeDropdownWidth: {
 				...countryCodeInput,
@@ -4788,12 +4821,15 @@ const PhoneFieldClass = compose(
 		wrappedEleName: 'vaadin-text-field',
 		style: () => `
 			:host {
-				display: inline-block;
+				display: inline-flex;
 				max-width: 100%;
 				min-width: 15em;
 				box-sizing: border-box;
-				padding: calc(var(${PhoneFieldClass.cssVarList.inputOutlineWidth}) + var(${PhoneFieldClass.cssVarList.inputOutlineOffset}))
 			}
+			${useHostExternalPadding(PhoneFieldClass.cssVarList)}
+			${resetInputCursor('vaadin-text-field')}
+			${resetInputFieldInvalidBackgroundColor('vaadin-text-field')}
+
 			div {
 				display: inline-flex;
 			}
@@ -4832,7 +4868,7 @@ const PhoneFieldClass = compose(
 			}
 			descope-combo-box {
 				flex-shrink: 0;
-				height: 100%;
+				min-width: 5.75em;
 				${comboVars.inputOutlineWidth}: 0;
 				${comboVars.inputOutlineOffset}: 0;
 				${comboVars.inputBorderWidth}: 0;
@@ -4840,9 +4876,8 @@ const PhoneFieldClass = compose(
 			}
 			descope-text-field {
 				flex-grow: 1;
-				min-height: 0;
-				height: 100%;
 				${textVars.inputOutlineWidth}: 0;
+				${comboVars.inputOutlineOffset}: 0;
 				${textVars.inputBorderWidth}: 0;
 				${textVars.inputBorderRadius}: 0;
 			}
@@ -4852,11 +4887,6 @@ const PhoneFieldClass = compose(
 			vaadin-text-field::part(input-field)::after {
 				border: none;
 			}
-
-			${resetInputFieldDefaultWidth()}
-			${resetInputCursor('vaadin-text-field')}
-			${resetInputFieldInvalidBackgroundColor('vaadin-text-field')}
-		
 		`,
 		excludeAttrsSync: ['tabindex'],
 		componentName: componentName$3
@@ -4930,6 +4960,7 @@ const NewPasswordClass = compose(
 		mappings: {
 			fontSize: [
 				host,
+				{},
 				{
 					selector: PasswordClass.componentName,
 					property: PasswordClass.cssVarList.fontSize
@@ -4941,6 +4972,7 @@ const NewPasswordClass = compose(
 				helperText
 			],
 			hostWidth: { ...host, property: 'width' },
+			hostMinWidth: { ...host, property: 'min-width' },
 			inputsRequiredIndicator: { ...host, property: 'content' },
 			spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
 		}
@@ -4956,10 +4988,9 @@ const NewPasswordClass = compose(
 		:host {
 			display: inline-block;
 			max-width: 100%;
-			min-width: 10em;
 			box-sizing: border-box;
 		}
-		${resetInputFieldDefaultWidth()}
+		${useHostExternalPadding(PasswordClass.cssVarList)}
 		vaadin-text-field {
 			padding: 0;
 			width: 100%;
@@ -4968,7 +4999,6 @@ const NewPasswordClass = compose(
 		vaadin-text-field::part(input-field) {
 			min-height: 0;
 			background: transparent;
-			overflow: hidden;
 			box-shadow: none;
 			padding: 0;
 		}
@@ -4987,7 +5017,7 @@ const NewPasswordClass = compose(
 			width: 100%;
 			height: 100%;
 			display: flex;
-			   flex-direction: column;
+			flex-direction: column;
 		}
 		descope-password {
 			display: block;
@@ -5018,7 +5048,6 @@ const commonAttrs = [
 	'invalid',
 	'readonly',
 	'draggable'
-
 ];
 
 const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
@@ -5652,7 +5681,11 @@ const [theme$1, refs, vars$k] = createHelperVars({
     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
 
-    inputHeight: '2em',
+    minWidth: '10em',
+    toggleButtonSize: '1.5em',
+    inputHeight: '3em',
+    horizontalPadding: '0.5em',
+    verticalPadding: '0.5em',
 
     backgroundColor: globalRefs$b.colors.surface.light,
 
@@ -5704,6 +5737,7 @@ const vars$j = TextFieldClass.cssVarList;
 
 const textField = ({
 	[vars$j.hostWidth]: refs.width,
+	[vars$j.hostMinWidth]: refs.minWidth,
 	[vars$j.fontSize]: refs.fontSize,
 	[vars$j.fontFamily]: refs.fontFamily,
 	[vars$j.labelTextColor]: refs.labelTextColor,
@@ -5720,6 +5754,7 @@ const textField = ({
 	[vars$j.inputOutlineOffset]: refs.outlineOffset,
 	[vars$j.inputBackgroundColor]: refs.backgroundColor,
 	[vars$j.inputHeight]: refs.inputHeight,
+	[vars$j.inputHorizontalPadding]: refs.horizontalPadding
 });
 
 var textField$1 = /*#__PURE__*/Object.freeze({
@@ -5737,6 +5772,7 @@ const password = {
 	[vars$i.fontSize]: refs.fontSize,
 	[vars$i.fontFamily]: refs.fontFamily,
 	[vars$i.labelTextColor]: refs.labelTextColor,
+	[vars$i.inputHorizontalPadding]: refs.horizontalPadding,
 	[vars$i.inputHeight]: refs.inputHeight,
 	[vars$i.inputBackgroundColor]: refs.backgroundColor,
 	[vars$i.labelRequiredIndicator]: refs.requiredIndicator,
@@ -5750,7 +5786,8 @@ const password = {
 	[vars$i.inputOutlineStyle]: refs.outlineStyle,
 	[vars$i.inputOutlineColor]: refs.outlineColor,
 	[vars$i.inputOutlineOffset]: refs.outlineOffset,
-	[vars$i.revealButtonOffset]: globalRefs$a.spacing.md
+	[vars$i.revealButtonOffset]: globalRefs$a.spacing.md,
+	[vars$i.revealButtonSize]: refs.toggleButtonSize
 };
 
 var password$1 = /*#__PURE__*/Object.freeze({
@@ -5763,6 +5800,7 @@ const vars$h = NumberFieldClass.cssVarList;
 
 const numberField = {
 	[vars$h.hostWidth]: refs.width,
+	[vars$h.hostMinWidth]: refs.minWidth,
 	[vars$h.fontSize]: refs.fontSize,
 	[vars$h.fontFamily]: refs.fontFamily,
 	[vars$h.labelTextColor]: refs.labelTextColor,
@@ -5778,7 +5816,8 @@ const numberField = {
 	[vars$h.inputOutlineOffset]: refs.outlineOffset,
 	[vars$h.inputBackgroundColor]: refs.backgroundColor,
 	[vars$h.labelRequiredIndicator]: refs.requiredIndicator,
-	[vars$h.inputHeight]: refs.inputHeight,
+	[vars$h.inputHorizontalPadding]: refs.horizontalPadding,
+	[vars$h.inputHeight]: refs.inputHeight
 };
 
 var numberField$1 = /*#__PURE__*/Object.freeze({
@@ -5791,6 +5830,7 @@ const vars$g = EmailFieldClass.cssVarList;
 
 const emailField = {
 	[vars$g.hostWidth]: refs.width,
+	[vars$g.hostMinWidth]: refs.minWidth,
 	[vars$g.fontSize]: refs.fontSize,
 	[vars$g.fontFamily]: refs.fontFamily,
 	[vars$g.labelTextColor]: refs.labelTextColor,
@@ -5806,6 +5846,7 @@ const emailField = {
 	[vars$g.inputOutlineColor]: refs.outlineColor,
 	[vars$g.inputOutlineOffset]: refs.outlineOffset,
 	[vars$g.inputBackgroundColor]: refs.backgroundColor,
+	[vars$g.inputHorizontalPadding]: refs.horizontalPadding,
 	[vars$g.inputHeight]: refs.inputHeight
 };
 
@@ -5820,6 +5861,7 @@ const vars$f = TextAreaClass.cssVarList;
 
 const textArea = {
 	[vars$f.hostWidth]: refs.width,
+	[vars$f.hostMinWidth]: refs.minWidth,
 	[vars$f.fontSize]: '14px',
 	[vars$f.fontFamily]: refs.fontFamily,
 	[vars$f.labelTextColor]: refs.labelTextColor,
@@ -6274,6 +6316,7 @@ const passcode = {
 	[vars$7.digitOutlineColor]: 'transparent',
 	[vars$7.digitOutlineWidth]: refs.outlineWidth,
 	[vars$7.focusedDigitFieldOutlineColor]: refs.outlineColor,
+	[vars$7.digitSize]: refs.inputHeight,
 
 	_hideCursor: {
 		[vars$7.digitCaretTextColor]: 'transparent',
@@ -6399,9 +6442,12 @@ const comboBox = {
 	[vars$4.inputValueTextColor]: refs.valueTextColor,
 	[vars$4.inputPlaceholderTextColor]: refs.placeholderTextColor,
 	[vars$4.inputBackgroundColor]: refs.backgroundColor,
+	[vars$4.inputHorizontalPadding]: refs.horizontalPadding,
 	[vars$4.inputHeight]: refs.inputHeight,
 	[vars$4.inputDropdownButtonColor]: globalRefs.colors.surface.contrast,
 	[vars$4.inputDropdownButtonCursor]: 'pointer',
+	[vars$4.inputDropdownButtonSize]: refs.toggleButtonSize,
+	[vars$4.inputDropdownButtonOffset]: globalRefs.spacing.xs,
 
 	_readonly: {
 		[vars$4.inputDropdownButtonCursor]: 'default'
@@ -6451,7 +6497,7 @@ const phoneField = {
 	[vars$2.inputOutlineColor]: refs.outlineColor,
 	[vars$2.inputOutlineOffset]: refs.outlineOffset,
 	[vars$2.inputHeight]: refs.inputHeight,
-	[vars$2.phoneInputWidth]: '10em',
+	[vars$2.phoneInputWidth]: refs.minWidth,
 	[vars$2.countryCodeInputWidth]: '5em',
 	[vars$2.countryCodeDropdownWidth]: '20em',
 
@@ -6470,6 +6516,7 @@ const vars$1 = NewPasswordClass.cssVarList;
 
 const newPassword = {
 	[vars$1.hostWidth]: refs.width,
+	[vars$1.hostMinWidth]: refs.minWidth,
 	[vars$1.fontSize]: refs.fontSize,
 	[vars$1.fontFamily]: refs.fontFamily,
 	[vars$1.spaceBetweenInputs]: '1em',