fix(ui5-step-input): make popover specs fit content (#12520)

Encapsulate styles, so the one inhertited in the ui5-input do not change the value state message popover.

fixes: #10246

Before:
image

After:
image

Author: tsanislavgatev

packages/main/src/themes/StepInput.css

@@ -163,25 +163,32 @@
 }
 
 :host .ui5-step-input-root {
-	white-space: nowrap;
 	line-height: inherit;
 	letter-spacing: inherit;
 	word-spacing: inherit;
 	height: inherit;
 }
 
-:host .ui5-step-input-input[text-align=left] {
+:host .ui5-step-input-input::part(input) {
+	white-space: nowrap;
+}
+
+:host .ui5-step-input-input[text-align=left]::part(input) {
 	text-align: left;
 }
 
-:host .ui5-step-input-input[text-align=center] {
+:host .ui5-step-input-input[text-align=center]::part(input) {
 	text-align: center;
 }
 
-:host .ui5-step-input-input[text-align=right] {
+:host .ui5-step-input-input[text-align=right]::part(input) {
 	text-align: right;
 }
 
+::slotted([slot="valueStateMessage"]) {
+	text-align: left;
+}
+
 :host .ui5-step-icon {
 	position: absolute;
 	display: var(--_ui5_step_input_button_display);

packages/main/test/pages/StepInput.html

@@ -96,7 +96,8 @@ <h3>StepInput with valueStateChange Prevented</h3>
 			placeholder="Enter number"
 			value-state="Negative"
 			class="stepinput2auto"
-		></ui5-step-input>
+		>
+			<div slot="valueStateMessage" class="stepinput3auto">Tsanislav Gatev wrote this message so it can be long enough so we can test if wraps</div></ui5-step-input>
 	</div>
 
 	<div>