@descope/web-components-ui 1.0.131 → 1.0.132

package/dist/cjs/index.cjs.js

@@ -510,6 +510,107 @@ const globals = {
 };
 const vars$m = getThemeVars(globals);
 
+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;
+    }
+`;
+
 const createCssVarFallback = (first, ...rest) =>
 	`var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
 
@@ -859,7 +960,8 @@ const booleanAttributesList = [
   'has-error-message',
   'focus-ring',
   'opened',
-  'active'
+  'active',
+  'password-visible'
 ];
 
 const isBooleanAttribute = (attr) => {
@@ -1496,8 +1598,8 @@ const ButtonClass = compose(
 	createStyleMixin({
 		mappings: {
 			hostWidth: { ...host$c, property: 'width' },
-			fontSize: { property: 'font-size' },
-			fontFamily: { property: 'font-family' },
+			fontSize: {},
+			fontFamily: {},
 
 			cursor: {},
 			backgroundColor: {},
@@ -1538,9 +1640,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
@@ -1687,7 +1787,6 @@ const {
 	requiredIndicator: requiredIndicator$7,
 	inputField: inputField$4,
 	input,
-	readOnlyInput,
 	helperText: helperText$7,
 	errorMessage: errorMessage$7
 } = {
@@ -1697,7 +1796,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)' }
 };
@@ -1705,17 +1803,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$b, property: 'font-size' }
+		{},
+		host$b,
 	],
 	fontFamily: [
-		{ ...label$8, property: 'font-family' },
-		{ ...inputField$4, property: 'font-family' },
-		{ ...helperText$7, property: 'font-family' },
-		{ ...errorMessage$7, property: 'font-family' }
+		label$8,
+		inputField$4,
+		helperText$7,
+		errorMessage$7,
 	],
 
 	hostWidth: { ...host$b, property: 'width' },
+	hostMinWidth: { ...host$b, property: 'min-width' },
 
 	inputBackgroundColor: { ...inputField$4, property: 'background-color' },
 
@@ -1729,22 +1828,16 @@ var textFieldMappings = {
 
 	labelRequiredIndicator: { ...requiredIndicator$7, 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' },
@@ -1756,91 +1849,6 @@ var textFieldMappings = {
 	inputPlaceholderColor: { ...placeholder$2, property: 'color' }
 };
 
-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;
-    }
-`;
-
 const componentName$n = getComponentName('text-field');
 
 const observedAttrs = ['type'];
@@ -1881,10 +1889,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'],
@@ -1910,7 +1917,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,
 
@@ -1962,6 +1973,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,
@@ -1978,6 +1990,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({
@@ -2025,7 +2038,7 @@ const componentName$l = getComponentName('password');
 const {
 	host: host$a,
 	inputField: inputField$3,
-	inputElement,
+	inputElement: inputElement$1,
 	inputElementPlaceholder,
 	revealButtonContainer,
 	revealButtonIcon,
@@ -2050,9 +2063,10 @@ const PasswordClass = compose(
 	createStyleMixin({
 		mappings: {
 			hostWidth: { ...host$a, property: 'width' },
+			hostMinWidth: { ...host$a, property: 'min-width' },
 			fontSize: [
-				{ property: 'font-size' },
-				{ ...host$a, property: 'font-size' }
+				{},
+				host$a,
 			],
 			fontFamily: [
 				label$7,
@@ -2061,6 +2075,10 @@ const PasswordClass = compose(
 				helperText$6
 			],
 			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' },
@@ -2080,12 +2098,17 @@ const PasswordClass = compose(
 			labelRequiredIndicator: { ...requiredIndicator$6, 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,
@@ -2099,17 +2122,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) {
@@ -2132,8 +2160,6 @@ const PasswordClass = compose(
 				cursor: pointer;
 			}
 
-			${resetInputCursor('vaadin-password-field')}
-
 			[readonly] vaadin-password-field-button {
 				pointer-events: none;
 			}
@@ -2155,6 +2181,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,
@@ -2168,7 +2195,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({
@@ -2194,9 +2222,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'],
@@ -2208,6 +2236,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,
@@ -2223,7 +2252,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({
@@ -2249,9 +2279,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'],
@@ -2263,6 +2293,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,
@@ -2278,6 +2309,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
 };
 
@@ -2313,15 +2345,16 @@ const TextAreaClass = compose(
 	createStyleMixin({
 		mappings: {
 			hostWidth: { ...host$9, property: 'width' },
+			hostMinWidth: { ...host$9, property: 'min-width' },
 			fontSize: [
-				{ ...host$9, property: 'font-size' },
-				{ ...textArea$2, property: 'font-size' }
+				host$9,
+				textArea$2,
 			],
 			fontFamily: [
-				{ ...label$6, property: 'font-family' },
-				{ ...inputField$2, property: 'font-family' },
-				{ ...helperText$5, property: 'font-family' },
-				{ ...errorMessage$5, property: 'font-family' }
+				label$6,
+				inputField$2,
+				helperText$5,
+				errorMessage$5,
 			],
 			labelTextColor: [
 				{ ...label$6, property: 'color' },
@@ -2352,11 +2385,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')}
@@ -2372,6 +2403,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,
@@ -2547,16 +2579,16 @@ const CheckboxClass = compose(
 			hostWidth: { ...host$8, property: 'width' },
 
 			fontSize: [
-				{ ...host$8, property: 'font-size' },
-				{ ...checkboxElement, property: 'font-size' },
-				{ ...label$5, property: 'font-size' },
-				{ ...checkboxHiddenLabel$1, property: 'font-size' }
+				host$8,
+				checkboxElement,
+				label$5,
+				checkboxHiddenLabel$1,
 			],
 			fontFamily: [
-				{ ...label$5, property: 'font-family' },
-				{ ...checkboxHiddenLabel$1, property: 'font-family' },
-				{ ...helperText$4, property: 'font-family' },
-				{ ...errorMessage$4, property: 'font-family' }
+				label$5,
+				checkboxHiddenLabel$1,
+				helperText$4,
+				errorMessage$4,
 			],
 
 			labelTextColor: [
@@ -2600,10 +2632,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$g
@@ -2674,14 +2704,14 @@ const SwitchToggleClass = compose(
 		mappings: {
 			hostWidth: { ...host$7, property: 'width' },
 			fontSize: [
-				{ ...component, property: 'font-size' },
-				{ ...label$4, property: 'font-size' },
-				{ ...checkboxHiddenLabel, property: 'font-size' },
+				component,
+				label$4,
+				checkboxHiddenLabel,
 			],
 			fontFamily: [
-				{ ...label$4, property: 'font-family' },
-				{ ...helperText$3, property: 'font-family' },
-				{ ...errorMessage$3, property: 'font-family' }
+				label$4,
+				helperText$3,
+				errorMessage$3,
 			],
 			trackBorderWidth: { ...track, property: 'border-width' },
 			trackBorderStyle: { ...track, property: 'border-style' },
@@ -2740,9 +2770,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);
 			}
@@ -3077,7 +3105,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' },
@@ -3538,7 +3566,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' },
@@ -3642,6 +3674,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',
@@ -3917,6 +3950,7 @@ const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclas
 const {
 	host: host$2,
 	inputField: inputField$1,
+	inputElement,
 	placeholder,
 	toggle,
 	label: label$2,
@@ -3926,6 +3960,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)' },
@@ -3945,8 +3980,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,
@@ -3970,10 +4005,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
@@ -4011,24 +4055,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,
@@ -4060,9 +4109,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'
@@ -5426,8 +5478,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
@@ -5466,8 +5518,6 @@ const PhoneFieldClass = compose(
 			],
 			inputBorderRadius: { ...inputField, property: 'border-radius' },
 
-			inputHeight: { ...inputField, property: 'height' },
-
 			countryCodeInputWidth: { ...countryCodeInput, property: comboVars.hostWidth },
 			countryCodeDropdownWidth: {
 				...countryCodeInput,
@@ -5512,8 +5562,11 @@ 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;
 			}
@@ -5552,7 +5605,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;
@@ -5560,9 +5613,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;
 			}
@@ -5572,11 +5624,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$2
@@ -5602,7 +5649,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',
 
@@ -5682,6 +5729,7 @@ const NewPasswordClass = compose(
 		mappings: {
 			fontSize: [
 				host,
+				{},
 				{
 					selector: PasswordClass.componentName,
 					property: PasswordClass.cssVarList.fontSize
@@ -5693,6 +5741,7 @@ const NewPasswordClass = compose(
 				helperText
 			],
 			hostWidth: { ...host, property: 'width' },
+			hostMinWidth: { ...host, property: 'min-width' },
 			inputsRequiredIndicator: { ...host, property: 'content' },
 			spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
 		}
@@ -5708,10 +5757,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%;
@@ -5720,7 +5768,6 @@ const NewPasswordClass = compose(
 		vaadin-text-field::part(input-field) {
 			min-height: 0;
 			background: transparent;
-			overflow: hidden;
 			box-shadow: none;
 			padding: 0;
 		}
@@ -5739,7 +5786,7 @@ const NewPasswordClass = compose(
 			width: 100%;
 			height: 100%;
 			display: flex;
-			   flex-direction: column;
+			flex-direction: column;
 		}
 		descope-password {
 			display: block;
@@ -5758,6 +5805,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',