@descope/web-components-ui 1.0.131 → 1.0.132

package/src/components/descope-combo-box/ComboBoxClass.js

@@ -1,6 +1,6 @@
 import { compose } from '../../helpers';
 import { getComponentName, observeChildren } from '../../helpers/componentHelpers';
-import { resetInputCursor, resetInputPlaceholder, resetInputReadonlyStyle } from '../../helpers/themeHelpers/resetHelpers';
+import { resetInputCursor, resetInputPlaceholder, resetInputReadonlyStyle, useHostExternalPadding } from '../../helpers/themeHelpers/resetHelpers';
 import {
 	createStyleMixin,
 	draggableMixin,
@@ -65,6 +65,7 @@ const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclas
 const {
 	host,
 	inputField,
+	inputElement,
 	placeholder,
 	toggle,
 	label,
@@ -74,6 +75,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)' },
@@ -93,8 +95,8 @@ export const ComboBoxClass = compose(
 			hostWidth: { ...host, property: 'width' },
 			// we apply font-size also on the host so we can set its width with em
 			fontSize: [
-				{ property: 'font-size' },
-				{ ...host, property: 'font-size' }
+				{},
+				host,
 			],
 			fontFamily: [
 				label,
@@ -118,10 +120,19 @@ export 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, property: 'outline-color' },
 			inputOutlineWidth: { ...inputField, property: 'outline-width' },
 			inputOutlineStyle: { ...inputField, property: 'outline-style' },
 			inputOutlineOffset: { ...inputField, 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
@@ -159,24 +170,29 @@ export 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,

package/src/components/descope-email-field/EmailFieldClass.js

@@ -8,7 +8,7 @@ import {
 import textFieldMappings from '../descope-text-field/textFieldMappings';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
-import { resetInputOverrides } from '../../helpers/themeHelpers/resetHelpers';
+import { resetInputOverrides, useHostExternalPadding } from '../../helpers/themeHelpers/resetHelpers';
 
 export const componentName = getComponentName('email-field');
 
@@ -27,9 +27,9 @@ export 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'],

package/src/components/descope-new-password/NewPasswordClass.js

@@ -8,7 +8,7 @@ import {
 } from '../../mixins';
 import { componentName as descopeInternalComponentName } from './descope-new-password-internal/componentName';
 import { PasswordClass } from '../descope-password/PasswordClass';
-import { resetInputFieldDefaultWidth } from '../../helpers/themeHelpers/resetHelpers';
+import { useHostExternalPadding } from '../../helpers/themeHelpers/resetHelpers';
 
 export const componentName = getComponentName('new-password');
 
@@ -73,6 +73,7 @@ export const NewPasswordClass = compose(
 		mappings: {
 			fontSize: [
 				host,
+				{},
 				{
 					selector: PasswordClass.componentName,
 					property: PasswordClass.cssVarList.fontSize
@@ -84,6 +85,7 @@ export const NewPasswordClass = compose(
 				helperText
 			],
 			hostWidth: { ...host, property: 'width' },
+			hostMinWidth: { ...host, property: 'min-width' },
 			inputsRequiredIndicator: { ...host, property: 'content' },
 			spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
 		}
@@ -99,10 +101,9 @@ export 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%;
@@ -111,7 +112,6 @@ export const NewPasswordClass = compose(
 		vaadin-text-field::part(input-field) {
 			min-height: 0;
 			background: transparent;
-			overflow: hidden;
 			box-shadow: none;
 			padding: 0;
 		}
@@ -130,7 +130,7 @@ export const NewPasswordClass = compose(
 			width: 100%;
 			height: 100%;
 			display: flex;
-			   flex-direction: column;
+			flex-direction: column;
 		}
 		descope-password {
 			display: block;

package/src/components/descope-new-password/descope-new-password-internal/NewPasswordInternal.js

@@ -19,7 +19,6 @@ const commonAttrs = [
 	'invalid',
 	'readonly',
 	'draggable'
-
 ];
 
 const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);

package/src/components/descope-number-field/NumberFieldClass.js

@@ -8,7 +8,7 @@ import {
 import textFieldMappings from '../descope-text-field/textFieldMappings';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
-import { resetInputOverrides } from '../../helpers/themeHelpers/resetHelpers';
+import { resetInputOverrides, useHostExternalPadding } from '../../helpers/themeHelpers/resetHelpers';
 
 export const componentName = getComponentName('number-field');
 
@@ -27,9 +27,9 @@ export 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'],

package/src/components/descope-passcode/PasscodeClass.js

@@ -93,7 +93,11 @@ export const PasscodeClass = compose(
 				selector: TextFieldClass.componentName,
 				property: textVars.inputValueTextColor
 			},
-			digitPadding: { ...digitField, property: textVars.inputPadding },
+			digitSize: [
+				{ ...digitField, property: 'height' },
+				{ ...digitField, property: 'width' }
+			],
+			digitPadding: { ...digitField, property: textVars.inputHorizontalPadding },
 			digitTextAlign: { ...digitField, property: textVars.inputTextAlign },
 			digitCaretTextColor: { ...digitField, property: textVars.inputCaretTextColor },
 			digitSpacing: { ...internalWrapper, property: 'gap' },

package/src/components/descope-password/PasswordClass.js

@@ -8,7 +8,7 @@ import {
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
 import passwordDraggableMixin from './passwordDraggableMixin';
-import { resetInputCursor } from '../../helpers/themeHelpers/resetHelpers';
+import { resetInputCursor, useHostExternalPadding } from '../../helpers/themeHelpers/resetHelpers';
 
 export const componentName = getComponentName('password');
 
@@ -40,9 +40,10 @@ export const PasswordClass = compose(
 	createStyleMixin({
 		mappings: {
 			hostWidth: { ...host, property: 'width' },
+			hostMinWidth: { ...host, property: 'min-width' },
 			fontSize: [
-				{ property: 'font-size' },
-				{ ...host, property: 'font-size' }
+				{},
+				host,
 			],
 			fontFamily: [
 				label,
@@ -51,6 +52,10 @@ export const PasswordClass = compose(
 				helperText
 			],
 			inputHeight: { ...inputField, property: 'height' },
+			inputHorizontalPadding: [
+				{ ...inputElement, property: 'padding-left' },
+				{ ...inputElement, property: 'padding-right' }
+			],
 			inputBackgroundColor: { ...inputField, property: 'background-color' },
 
 			inputBorderStyle: { ...inputField, property: 'border-style' },
@@ -75,7 +80,12 @@ export const PasswordClass = compose(
 			],
 			inputPlaceholderTextColor: { ...inputElementPlaceholder, property: 'color' },
 
-			revealButtonOffset: { ...revealButtonContainer, property: 'margin' }
+			revealButtonOffset: [
+				{ ...revealButtonContainer, property: 'margin-right' },
+				{ ...revealButtonContainer, property: 'margin-left' }
+			],
+			revealButtonSize: { ...revealButtonContainer, property: 'font-size' },
+
 		}
 	}),
 	draggableMixin,
@@ -89,17 +99,22 @@ export 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) {
@@ -122,8 +137,6 @@ export const PasswordClass = compose(
 				cursor: pointer;
 			}
 
-			${resetInputCursor('vaadin-password-field')}
-
 			[readonly] vaadin-password-field-button {
 				pointer-events: none;
 			}

package/src/components/descope-phone-field/PhoneFieldClass.js

@@ -10,7 +10,7 @@ import {
 import { TextFieldClass } from '../descope-text-field/TextFieldClass';
 import { ComboBoxClass } from '../descope-combo-box/ComboBoxClass';
 import CountryCodes from './CountryCodes';
-import { resetInputCursor, resetInputFieldInvalidBackgroundColor, resetInputFieldDefaultWidth } from '../../helpers/themeHelpers/resetHelpers';
+import { resetInputCursor, resetInputFieldInvalidBackgroundColor, useHostExternalPadding } from '../../helpers/themeHelpers/resetHelpers';
 
 const textVars = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
@@ -84,8 +84,8 @@ export const PhoneFieldClass = compose(
 	createStyleMixin({
 		mappings: {
 			fontSize: [
-				{ ...host, property: 'font-size' },
-				{ ...inputField, property: 'font-size' },
+				host,
+				inputField,
 				{
 					selector: TextFieldClass.componentName,
 					property: TextFieldClass.cssVarList.fontSize
@@ -124,8 +124,6 @@ export const PhoneFieldClass = compose(
 			],
 			inputBorderRadius: { ...inputField, property: 'border-radius' },
 
-			inputHeight: { ...inputField, property: 'height' },
-
 			countryCodeInputWidth: { ...countryCodeInput, property: comboVars.hostWidth },
 			countryCodeDropdownWidth: {
 				...countryCodeInput,
@@ -170,8 +168,11 @@ export const PhoneFieldClass = compose(
 				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;
 			}
@@ -210,7 +211,7 @@ export const PhoneFieldClass = compose(
 			}
 			descope-combo-box {
 				flex-shrink: 0;
-				height: 100%;
+				min-width: 5.75em;
 				${comboVars.inputOutlineWidth}: 0;
 				${comboVars.inputOutlineOffset}: 0;
 				${comboVars.inputBorderWidth}: 0;
@@ -218,9 +219,8 @@ export 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;
 			}
@@ -230,11 +230,6 @@ export const PhoneFieldClass = compose(
 			vaadin-text-field::part(input-field)::after {
 				border: none;
 			}
-
-			${resetInputFieldDefaultWidth()}
-			${resetInputCursor('vaadin-text-field')}
-			${resetInputFieldInvalidBackgroundColor('vaadin-text-field')}
-		
 		`,
 		excludeAttrsSync: ['tabindex'],
 		componentName

package/src/components/descope-text/TextClass.js

@@ -32,7 +32,7 @@ export 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' },

package/src/components/descope-text-area/TextAreaClass.js

@@ -7,7 +7,7 @@ import {
 } from '../../mixins';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
-import { resetInputContainer, resetInputCursor, resetInputField, resetInputPlaceholder } from '../../helpers/themeHelpers/resetHelpers';
+import { resetInputContainer, resetInputCursor, resetInputField, resetInputPlaceholder, useHostExternalPadding } from '../../helpers/themeHelpers/resetHelpers';
 
 export const componentName = getComponentName('text-area');
 
@@ -35,15 +35,16 @@ export const TextAreaClass = compose(
 	createStyleMixin({
 		mappings: {
 			hostWidth: { ...host, property: 'width' },
+			hostMinWidth: { ...host, property: 'min-width' },
 			fontSize: [
-				{ ...host, property: 'font-size' },
-				{ ...textArea, property: 'font-size' }
+				host,
+				textArea,
 			],
 			fontFamily: [
-				{ ...label, property: 'font-family' },
-				{ ...inputField, property: 'font-family' },
-				{ ...helperText, property: 'font-family' },
-				{ ...errorMessage, property: 'font-family' }
+				label,
+				inputField,
+				helperText,
+				errorMessage,
 			],
 			labelTextColor: [
 				{ ...label, property: 'color' },
@@ -74,11 +75,9 @@ export 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')}

package/src/components/descope-text-field/TextFieldClass.js

@@ -8,7 +8,7 @@ import {
 import textFieldMappings from './textFieldMappings';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
-import { resetInputFieldDefaultWidth, resetInputOverrides } from '../../helpers/themeHelpers/resetHelpers';
+import { resetInputOverrides, useHostExternalPadding } from '../../helpers/themeHelpers/resetHelpers';
 
 export const componentName = getComponentName('text-field');
 
@@ -50,10 +50,9 @@ export 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'],

package/src/components/descope-text-field/textFieldMappings.js

@@ -5,7 +5,6 @@ const {
 	requiredIndicator,
 	inputField,
 	input,
-	readOnlyInput,
 	helperText,
 	errorMessage
 } = {
@@ -15,7 +14,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)' }
 };
@@ -23,17 +21,18 @@ const {
 export default {
 	// we apply font-size also on the host so we can set its width with em
 	fontSize: [
-		{ property: 'font-size' },
-		{ ...host, property: 'font-size' }
+		{},
+		host,
 	],
 	fontFamily: [
-		{ ...label, property: 'font-family' },
-		{ ...inputField, property: 'font-family' },
-		{ ...helperText, property: 'font-family' },
-		{ ...errorMessage, property: 'font-family' }
+		label,
+		inputField,
+		helperText,
+		errorMessage,
 	],
 
 	hostWidth: { ...host, property: 'width' },
+	hostMinWidth: { ...host, property: 'min-width' },
 
 	inputBackgroundColor: { ...inputField, property: 'background-color' },
 
@@ -47,22 +46,16 @@ export default {
 
 	labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
 
-	inputBorderColor: [
-		{ ...inputField, property: 'border-color' },
-		{ ...readOnlyInput, property: 'border-color' }
-	],
-	inputBorderWidth: [
-		{ ...inputField, property: 'border-width' },
-		{ ...readOnlyInput, property: 'border-width' }
-	],
-	inputBorderStyle: [
-		{ ...inputField, property: 'border-style' },
-		{ ...readOnlyInput, property: 'border-style' }
-	],
+	inputBorderColor: { ...inputField, property: 'border-color' },
+	inputBorderWidth: { ...inputField, property: 'border-width' },
+	inputBorderStyle: { ...inputField, property: 'border-style' },
 	inputBorderRadius: { ...inputField, property: 'border-radius' },
 
 	inputHeight: { ...inputField, property: 'height' },
-	inputPadding: { ...inputField, property: 'padding' },
+	inputHorizontalPadding: [
+		{ ...input, property: 'padding-left' },
+		{ ...input, property: 'padding-right' }
+	],
 
 	inputOutlineColor: { ...inputField, property: 'outline-color' },
 	inputOutlineStyle: { ...inputField, property: 'outline-style' },

package/src/helpers/themeHelpers/resetHelpers.js

@@ -5,18 +5,34 @@ export const resetInputOverrides = (name, cssVarList) => `
     ${resetInputField(name)}
     ${resetInputAutoFill(name, cssVarList)}
     ${resetInputFieldInvalidBackgroundColor(name)}
+    ${resetInitialHeight(name)}
+    ${resetInputElement(name)}
+    ${resetInputFieldunderlayingBorder(name)}
+`;
+
+export const useHostExternalPadding = (cssVarList) => `
+    :host {
+        padding: calc(var(${cssVarList.inputOutlineWidth}) + var(${cssVarList.inputOutlineOffset}))        
+    }
+`;
+
+export const resetInputFieldunderlayingBorder = (name) => `
+    ${name}::part(input-field)::after {
+        border: none;
+    }
+`;
 
+export const resetInitialHeight = (name) => `
     ${name}::before {
 		height: unset;
 	}
+`;
 
+export const resetInputElement = (name) => `
     ${name} > input {
-		-webkit-mask-image: none;
-		min-height: 0;
-	}
-
-    ${name}::part(input-field)::after {
-		opacity: 0 !important;
+        -webkit-mask-image: none;
+        min-height: 0;
+        box-sizing: border-box;
     }
 `;
 

package/src/mixins/normalizeBooleanAttributesMixin.js

@@ -15,7 +15,8 @@ const booleanAttributesList = [
   'has-error-message',
   'focus-ring',
   'opened',
-  'active'
+  'active',
+  'password-visible'
 ]
 
 const isBooleanAttribute = (attr) => {

package/src/theme/components/comboBox.js

@@ -23,9 +23,12 @@ export const comboBox = {
 	[vars.inputValueTextColor]: refs.valueTextColor,
 	[vars.inputPlaceholderTextColor]: refs.placeholderTextColor,
 	[vars.inputBackgroundColor]: refs.backgroundColor,
+	[vars.inputHorizontalPadding]: refs.horizontalPadding,
 	[vars.inputHeight]: refs.inputHeight,
 	[vars.inputDropdownButtonColor]: globalRefs.colors.surface.contrast,
 	[vars.inputDropdownButtonCursor]: 'pointer',
+	[vars.inputDropdownButtonSize]: refs.toggleButtonSize,
+	[vars.inputDropdownButtonOffset]: globalRefs.spacing.xs,
 
 	_readonly: {
 		[vars.inputDropdownButtonCursor]: 'default'

package/src/theme/components/emailField.js

@@ -5,6 +5,7 @@ const vars = EmailFieldClass.cssVarList;
 
 const emailField = {
 	[vars.hostWidth]: refs.width,
+	[vars.hostMinWidth]: refs.minWidth,
 	[vars.fontSize]: refs.fontSize,
 	[vars.fontFamily]: refs.fontFamily,
 	[vars.labelTextColor]: refs.labelTextColor,
@@ -20,6 +21,7 @@ const emailField = {
 	[vars.inputOutlineColor]: refs.outlineColor,
 	[vars.inputOutlineOffset]: refs.outlineOffset,
 	[vars.inputBackgroundColor]: refs.backgroundColor,
+	[vars.inputHorizontalPadding]: refs.horizontalPadding,
 	[vars.inputHeight]: refs.inputHeight
 };
 

package/src/theme/components/inputWrapper.js

@@ -21,7 +21,11 @@ const [theme, refs, vars] = 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.colors.surface.light,
 

package/src/theme/components/newPassword.js

@@ -5,6 +5,7 @@ const vars = NewPasswordClass.cssVarList;
 
 const newPassword = {
 	[vars.hostWidth]: refs.width,
+	[vars.hostMinWidth]: refs.minWidth,
 	[vars.fontSize]: refs.fontSize,
 	[vars.fontFamily]: refs.fontFamily,
 	[vars.spaceBetweenInputs]: '1em',

package/src/theme/components/numberField.js

@@ -5,6 +5,7 @@ const vars = NumberFieldClass.cssVarList;
 
 const numberField = {
 	[vars.hostWidth]: refs.width,
+	[vars.hostMinWidth]: refs.minWidth,
 	[vars.fontSize]: refs.fontSize,
 	[vars.fontFamily]: refs.fontFamily,
 	[vars.labelTextColor]: refs.labelTextColor,
@@ -20,7 +21,8 @@ const numberField = {
 	[vars.inputOutlineOffset]: refs.outlineOffset,
 	[vars.inputBackgroundColor]: refs.backgroundColor,
 	[vars.labelRequiredIndicator]: refs.requiredIndicator,
-	[vars.inputHeight]: refs.inputHeight,
+	[vars.inputHorizontalPadding]: refs.horizontalPadding,
+	[vars.inputHeight]: refs.inputHeight
 };
 
 export default numberField;

package/src/theme/components/passcode.js

@@ -19,6 +19,7 @@ const passcode = {
 	[vars.digitOutlineColor]: 'transparent',
 	[vars.digitOutlineWidth]: refs.outlineWidth,
 	[vars.focusedDigitFieldOutlineColor]: refs.outlineColor,
+	[vars.digitSize]: refs.inputHeight,
 
 	_hideCursor: {
 		[vars.digitCaretTextColor]: 'transparent',

package/src/theme/components/password.js

@@ -11,6 +11,7 @@ const password = {
 	[vars.fontSize]: refs.fontSize,
 	[vars.fontFamily]: refs.fontFamily,
 	[vars.labelTextColor]: refs.labelTextColor,
+	[vars.inputHorizontalPadding]: refs.horizontalPadding,
 	[vars.inputHeight]: refs.inputHeight,
 	[vars.inputBackgroundColor]: refs.backgroundColor,
 	[vars.labelRequiredIndicator]: refs.requiredIndicator,
@@ -24,7 +25,8 @@ const password = {
 	[vars.inputOutlineStyle]: refs.outlineStyle,
 	[vars.inputOutlineColor]: refs.outlineColor,
 	[vars.inputOutlineOffset]: refs.outlineOffset,
-	[vars.revealButtonOffset]: globalRefs.spacing.md
+	[vars.revealButtonOffset]: globalRefs.spacing.md,
+	[vars.revealButtonSize]: refs.toggleButtonSize
 };
 
 export default password;

package/src/theme/components/phoneField.js

@@ -20,7 +20,7 @@ const phoneField = {
 	[vars.inputOutlineColor]: refs.outlineColor,
 	[vars.inputOutlineOffset]: refs.outlineOffset,
 	[vars.inputHeight]: refs.inputHeight,
-	[vars.phoneInputWidth]: '10em',
+	[vars.phoneInputWidth]: refs.minWidth,
 	[vars.countryCodeInputWidth]: '5em',
 	[vars.countryCodeDropdownWidth]: '20em',