@ui5/webcomponents 2.26.0 → 2.27.0-rc.1

package/src/themes/NumberInput.css

@@ -0,0 +1,321 @@
+@import "./FormComponents.css";
+@import "./InvisibleTextStyles.css";
+@import "./InputIcon.css";
+@import "./InputSharedStyles.css";
+
+:host(:not([hidden])) {
+	display: inline-block;
+	line-height: normal;
+	letter-spacing: normal;
+	word-spacing: normal;
+}
+
+:host([disabled]) {
+    opacity: var(--_ui5_input_disabled_opacity);
+    cursor: default;
+    pointer-events: none;
+    background-color: var(--_ui5-input_disabled_background);
+    border-color: var(--_ui5_input_disabled_border_color);
+}
+
+:host {
+	color: var(--sapField_TextColor);
+	background-color: var(--sapField_Background);
+	border: var(--_ui5_number_input_border_style);
+	border-radius: var(--sapField_BorderCornerRadius);
+	box-sizing: border-box;
+	height: var(--_ui5_input_height);
+	position: relative;
+	isolation: isolate;
+	overflow: hidden;
+	margin: var(--_ui5_input_margin_top_bottom) 0;
+	min-width: var(--_ui5_number_input_min_width);
+	text-align: right;
+	user-select: none;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+}
+
+[ui5-input] {
+	--ui5_input_focus_pseudo_element_content: none;
+}
+
+:host .ui5-number-input-input {
+	text-align: inherit;
+	height: inherit;
+}
+
+:host(:not([value-state]):not([readonly]):not([disabled])){
+	box-shadow: none;
+}
+
+:host([value-state="Information"]:not([readonly]):not([disabled])) {
+	border-width: var(--_ui5_input_information_border_width);
+}
+
+:host([readonly]:not([disabled])) {
+	border-width: var(--sapElement_BorderWidth);
+}
+
+:host([value-state="Negative"]:not([readonly]):not([disabled])),
+:host([value-state="Critical"]:not([readonly]):not([disabled])),
+:host([value-state="Information"]:not([readonly]):not([disabled])) {
+	border-style: var(--_ui5_number_input_error_warning_information_border_style);
+}
+
+:host(:not([value-state]):not([readonly]):not([disabled]):hover),
+:host([value-state="None"]:not([readonly]):not([disabled]):hover) {
+	background-color: var(--_ui5_number_input_border_color_hover);
+	border: var(--_ui5_number_input_border_hover);
+}
+:host(:not([value-state]):not([readonly]):not([disabled]):not([focused]):hover),
+:host([value-state="None"]:not([readonly]):not([disabled]):not([focused]):hover) {
+	background-color: var(--sapField_Hover_Background);
+	border: var(--_ui5_number_input_border_style_hover);
+	box-shadow: var(--sapField_Hover_Shadow);
+}
+
+:host([value-state="Positive"]:not([readonly]):not([disabled]):not([focused]):hover) {
+	box-shadow: var(--sapField_Hover_SuccessShadow);
+}
+
+:host([value-state="Information"]:not([readonly]):not([disabled]):not([focused]):hover) {
+	box-shadow: var(--sapField_Hover_InformationShadow);
+}
+
+:host([value-state="Critical"]:not([readonly]):not([disabled]):not([focused]):hover) {
+	box-shadow: var(--sapField_Hover_WarningShadow);
+}
+
+:host([value-state="Negative"]:not([readonly]):not([disabled]):not([focused]):hover) {
+	box-shadow: var(--sapField_Hover_InvalidShadow);
+}
+
+:host([value-state="Positive"]:not([readonly]):not([disabled]):hover),
+:host([value-state="Negative"]:not([readonly]):not([disabled]):hover),
+:host([value-state="Information"]:not([readonly]):not([disabled]):hover),
+:host([value-state="Critical"]:not([readonly]):not([disabled]):hover) {
+	background-color: var(--_ui5_number_input_button_state_hover_background_color);
+}
+
+:host(:not([value-state]):not([readonly]):not([disabled])[focused]),
+:host([value-state="None"]:not([readonly]):not([disabled])[focused]),
+:host([value-state="Positive"]:not([readonly]):not([disabled])[focused]),
+:host([value-state="Information"]:not([readonly]):not([disabled])[focused]),
+:host([value-state="Critical"]:not([readonly]):not([disabled])[focused]){
+	background-color: var(--sapField_Focus_Background);
+}
+
+:host([value-state="Negative"]:not([readonly]):not([disabled])[focused]) {
+	background-color: var(--_ui5_number_input_error_focused_background);
+}
+
+:host([value-state="Negative"]:not([readonly]):not([disabled]):hover),
+:host([value-state="Negative"]:not([readonly]):not([disabled])[focused]:hover) {
+	background-color: var(--_ui5_number_input_error_hover_background);
+}
+
+:host([value-state="Positive"]:not([readonly]):not([disabled]))::after,
+:host([value-state="Negative"]:not([readonly]):not([disabled]))::after,
+:host([value-state="None"]:not([readonly]):not([disabled]))::after,
+:host([value-state="Information"]:not([readonly]):not([disabled]))::after,
+:host([value-state="Critical"]:not([readonly]):not([disabled]))::after {
+	position: absolute;
+	content: "";
+	top: -1px;
+	right: -1px;
+	bottom: -1px;
+	left: -1px;
+	outline: none;
+	pointer-events: none;
+	border-radius: var(--sapField_BorderCornerRadius);
+	border-style: var(--_ui5_number_input_after_border_style);
+	z-index: 0;
+	border-width: 0px;
+}
+
+:host([value-state="Information"]:not([readonly]):not([disabled]))::after {
+	border-color: var(--sapField_InformationColor);
+	border-width: var(--_ui5_input_information_border_width);
+}
+
+:host([value-state="Critical"]:not([readonly]):not([disabled]))::after {
+	border-color: var(--sapField_WarningColor);
+	border-width: 2px;
+}
+
+:host([value-state="Positive"]:not([readonly]):not([disabled]))::after {
+	border-color: var(--sapField_SuccessColor);
+	border-width: 1px;
+}
+
+:host([value-state="Negative"]:not([readonly]):not([disabled]))::after {
+	border-color: var(--sapField_InvalidColor);
+	border-width: var(--_ui5_input_information_border_width);
+}
+
+:host([value-state])::after {
+	border-width: var(--_ui5_input_state_border_width);
+}
+:host([value-state="Negative"]:not([readonly]):not([disabled])) .ui5-number-input-input {
+	background-color: var(--_ui5_number_input_error_background_color);
+}
+
+:host([value-state]:not([value-state="None"]) .ui5-number-input-input[focused]) {
+		outline: none;
+}
+
+:host .ui5-number-input-input {
+	width: 100%;
+	color: inherit;
+	background-color: inherit;
+	border: var(--_ui5_number_input_input_border);
+	box-sizing: border-box;
+	vertical-align: top;
+	margin-top: var(--_ui5_number_input_input_margin_top);
+	min-width: var(--_ui5_number_input_min_width);
+	position: relative;
+	outline: none;
+	line-height: inherit;
+	letter-spacing: inherit;
+	word-spacing: inherit;
+}
+
+:host .ui5-number-input-root.ui5-number-input-root--with-buttons .ui5-number-input-input {
+	padding-inline-start: var(--_ui5_number_input_padding_with_step_buttons);
+	padding-inline-end: var(--_ui5_number_input_padding_with_step_buttons);
+}
+
+:host .ui5-number-input-input[readonly] {
+	padding: 0;
+}
+
+:host .ui5-number-input-input:hover,
+:host .ui5-number-input-input[focused]{
+	box-shadow: none;
+}
+
+:host .ui5-number-input-root {
+	line-height: inherit;
+	letter-spacing: inherit;
+	word-spacing: inherit;
+	height: inherit;
+}
+
+:host .ui5-number-input-input::part(input) {
+	white-space: nowrap;
+}
+
+:host .ui5-number-input-input[text-align=left]::part(input) {
+	text-align: left;
+}
+
+:host .ui5-number-input-input[text-align=center]::part(input) {
+	text-align: center;
+}
+
+:host .ui5-number-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_number_input_button_display);
+	height: 2rem;
+	height: 100%;
+	background-color: var(--_ui5_number_input_button_background_color);
+	z-index: 0;
+}
+
+:host .ui5-step-icon[focused] {
+	border: none;
+	outline: none;
+}
+
+:host .ui5-step-icon.ui5-step-dec {
+	left: var(--_ui5_number_input_button_left);
+	z-index: 1;
+}
+
+:host .ui5-step-icon.ui5-step-inc {
+	right: var(--_ui5_number_input_button_right);
+}
+
+:host .ui5-step-icon *:not(.ui5-number-input-icon--clickable),
+:host .ui5-step-icon *:not(.ui5-number-input-icon--clickable):active,
+:host .ui5-step-icon *:not(.ui5-number-input-icon--clickable):hover {
+	opacity: 0.5;
+	background-color: transparent;
+	color: var(--sapContent_IconColor);
+}
+
+:host .ui5-step-icon :not(.ui5-number-input-icon--clickable) *:hover,
+:host .ui5-step-icon :not(.ui5-number-input-icon--clickable) *:active {
+	background-color: var(--sapField_Background);
+	color: var(--sapContent_IconColor);
+}
+
+:host .ui5-number-input-input[focused]::after {
+	position: absolute;
+	content: "";
+	border: var(--_ui5_number_input_input_border_focused_after);
+	top: var(--_ui5_number_input_input_border_top_bottom_focused_after);
+	right: 0px;
+	bottom: var(--_ui5_number_input_input_border_bottom_focused_after);
+	border-radius: var(--_ui5_number_input_input_border_radius_focused_after);
+	left: 0px;
+	outline: none;
+	pointer-events: none;
+	z-index: 1;
+}
+
+:host([readonly]) .ui5-number-input-input[focused]::after{
+	top: var(--_ui5_input_readonly_focus_offset);
+    bottom: var(--_ui5_input_readonly_focus_offset);
+    left: var(--_ui5_input_readonly_focus_offset);
+    right: var(--_ui5_input_readonly_focus_offset);
+    border-radius: var(--_ui5_input_readonly_focus_border_radius);
+	border-color: var(--sapContent_FocusColor);
+}
+
+:host .ui5-number-input-input[focused] {
+	outline: none;
+}
+
+:host([value-state="Information"]:not([readonly]):not([disabled])) .ui5-number-input-input[focused]::after {
+	border-color: var(--_ui5_number_input_input_information_border_color_focused_after);
+	top: var(--_ui5_number_input_input_border_top_information_focused_after);
+	bottom: var(--_ui5_number_input_input_border_bottom_information_focused_after);
+}
+
+:host([value-state="Critical"]:not([readonly]):not([disabled])) .ui5-number-input-input[focused]::after {
+	border-color: var(--_ui5_number_input_input_warning_border_color_focused_after);
+}
+
+:host([value-state="Positive"]:not([readonly]):not([disabled])) .ui5-number-input-input[focused]::after {
+	border-color: var(--_ui5_number_input_input_success_border_color_focused_after);
+}
+
+:host([value-state="Negative"]:not([readonly]):not([disabled])) .ui5-number-input-input[focused]::after {
+	border-color: var(--_ui5_number_input_input_error_border_color_focused_after);
+}
+
+/* Disable spin buttons in Chrome, Safari, Edge, Opera */
+:host .ui5-number-input-input::-webkit-outer-spin-button,
+:host .ui5-number-input-input::-webkit-inner-spin-button {
+	-webkit-appearance: none;
+	margin: 0;
+}
+
+:host([disabled]) .ui5-step-icon {
+	background-color: var(--_ui5_number_input_disabled_button_background);
+}
+
+:host([disabled]) .ui5-step-icon [ui5-icon] {
+	color: var(--sapField_ReadOnly_BorderColor);
+}

package/src/themes/OptionGroup.css

@@ -0,0 +1,28 @@
+:host {
+	display: block;
+}
+
+.ui5-option-group-root {
+	width: 100%;
+	box-sizing: border-box;
+	padding: 0;
+	margin: 0;
+}
+
+.ui5-option-group-header {
+	display: flex;
+	align-items: flex-end;
+	padding: 1.25rem 1rem 0.5rem;
+	box-sizing: border-box;
+	border-bottom: 1px solid var(--sapList_GroupHeaderBorderColor);
+	background: var(--sapList_GroupHeaderBackground);
+	color: var(--sapList_TableGroupHeaderTextColor);
+	font-family: var(--sapFontHeaderFamily);
+	font-size: var(--sapFontHeader6Size);
+	font-weight: bold;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	pointer-events: none;
+	user-select: none;
+}

package/src/themes/StepInput.css

@@ -1,279 +1,3 @@
-@import "./FormComponents.css";
-@import "./InvisibleTextStyles.css";
-@import "./InputIcon.css";
-@import "./InputSharedStyles.css";
-
 :host(:not([hidden])) {
 	display: inline-block;
-	line-height: normal;
-	letter-spacing: normal;
-	word-spacing: normal;
-}
-
-:host {
-	color: var(--sapField_TextColor);
-	background-color: var(--sapField_Background);
-	border: var(--_ui5_step_input_border_style);
-	border-radius: var(--sapField_BorderCornerRadius);
-	box-sizing: border-box;
-	height: var(--_ui5_input_height);
-	position: relative;
-	isolation: isolate;
-	margin: var(--_ui5_input_margin_top_bottom) 0;
-	min-width: var(--_ui5_step_input_min_width);
-	text-align: right;
-	user-select: none;
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-}
-
-[ui5-input] {
-	--ui5_input_focus_pseudo_element_content: none;
-}
-
-:host .ui5-step-input-input {
-	text-align: inherit;
-	height: inherit;
-}
-
-:host(:not([value-state]):not([readonly]):not([disabled])){
-	box-shadow: none;
-}
-
-:host(:not([value-state]):not([readonly]):not([disabled]):hover),
-:host([value-state="None"]:not([readonly]):not([disabled]):hover) {
-	background-color: var(--_ui5_step_input_border_color_hover);
-	border: var(--_ui5_step_input_border_hover);
-}
-:host(:not([value-state]):not([readonly]):not([disabled]):not([focused]):hover),
-:host([value-state="None"]:not([readonly]):not([disabled]):not([focused]):hover) {
-	background-color: var(--sapField_Hover_Background);
-	border: var(--_ui5_step_input_border_style_hover);
-	box-shadow: var(--sapField_Hover_Shadow);
-}
-
-:host([value-state="Positive"]:not([readonly]):not([disabled]):not([focused]):hover) {
-	box-shadow: var(--sapField_Hover_SuccessShadow);
-}
-
-:host([value-state="Information"]:not([readonly]):not([disabled]):not([focused]):hover) {
-	box-shadow: var(--sapField_Hover_InformationShadow);
-}
-
-:host([value-state="Critical"]:not([readonly]):not([disabled]):not([focused]):hover) {
-	box-shadow: var(--sapField_Hover_WarningShadow);
-}
-
-:host([value-state="Negative"]:not([readonly]):not([disabled]):not([focused]):hover) {
-	box-shadow: var(--sapField_Hover_InvalidShadow);
-}
-
-:host([value-state="Positive"]:not([readonly]):not([disabled]):hover),
-:host([value-state="Negative"]:not([readonly]):not([disabled]):hover),
-:host([value-state="Information"]:not([readonly]):not([disabled]):hover),
-:host([value-state="Critical"]:not([readonly]):not([disabled]):hover) {
-	background-color: var(--_ui5-step_input_button_state_hover_background_color);
-}
-
-:host(:not([value-state]):not([readonly]):not([disabled])[focused]),
-:host([value-state="None"]:not([readonly]):not([disabled])[focused]),
-:host([value-state="Positive"]:not([readonly]):not([disabled])[focused]),
-:host([value-state="Negative"]:not([readonly]):not([disabled])[focused]),
-:host([value-state="Information"]:not([readonly]):not([disabled])[focused]),
-:host([value-state="Critical"]:not([readonly]):not([disabled])[focused]){
-	background-color: var(--sapField_Focus_Background);
-}
-
-:host([value-state="Positive"]:not([readonly]):not([disabled]))::after,
-:host([value-state="Negative"]:not([readonly]):not([disabled]))::after,
-:host([value-state="None"]:not([readonly]):not([disabled]))::after,
-:host([value-state="Information"]:not([readonly]):not([disabled]))::after,
-:host([value-state="Critical"]:not([readonly]):not([disabled]))::after {
-	position: absolute;
-	content: "";
-	top: -1px;
-	right: -1px;
-	bottom: -1px;
-	left: -1px;
-	outline: none;
-	pointer-events: none;
-	border-radius: var(--sapField_BorderCornerRadius);
-	border-style: var(--_ui5_input_error_warning_border_style);
-	z-index: 0;
-	border-width: 0px;
-}
-
-:host([value-state="Information"]:not([readonly]):not([disabled]))::after {
-	border-color: var(--sapField_InformationColor);
-	border-width: var(--_ui5_input_information_border_width);
-}
-
-:host([value-state="Critical"]:not([readonly]):not([disabled]))::after {
-	border-color: var(--sapField_WarningColor);
-	border-width: 2px;
-}
-
-:host([value-state="Positive"]:not([readonly]):not([disabled]))::after {
-	border-color: var(--sapField_SuccessColor);
-	border-width: 1px;
-}
-
-:host([value-state="Negative"]:not([readonly]):not([disabled]))::after {
-	border-color: var(--sapField_InvalidColor);
-	border-width: var(--_ui5_input_information_border_width);
-}
-
-:host([value-state])::after {
-	border-width: var(--_ui5_input_state_border_width);
-}
-:host([value-state="Negative"]:not([readonly]):not([disabled])) .ui5-step-input-input {
-	background-color: var(--_ui5_input_input_background_color);
-}
-
-:host([value-state="Negative"]:not([readonly]):not([disabled])) .ui5-step-input-input:hover {
-	background-color: var(--_ui5_step_input_input_error_background_color);
-}
-:host([value-state]:not([value-state="None"]) .ui5-step-input-input[focused]) {
-		outline: none;
-}
-
-:host .ui5-step-input-input {
-	width: 100%;
-	color: inherit;
-	background-color: inherit;
-	border: var(--_ui5_step_input_input_border);
-	box-sizing: border-box;
-	vertical-align: top;
-	margin-top: var(--_ui5_step_input_input_margin_top);
-	min-width: var(--_ui5_step_input_min_width);
-	padding-inline-start: var(--_ui5_step_input_padding);
-	padding-inline-end: var(--_ui5_step_input_padding);
-	position: relative;
-	outline: none;
-	line-height: inherit;
-	letter-spacing: inherit;
-	word-spacing: inherit;
-}
-
-:host .ui5-step-input-input[readonly] {
-	padding: 0;
-}
-
-:host .ui5-step-input-input:hover,
-:host .ui5-step-input-input[focused]{
-	box-shadow: none;
-}
-
-:host .ui5-step-input-root {
-	line-height: inherit;
-	letter-spacing: inherit;
-	word-spacing: inherit;
-	height: inherit;
-}
-
-: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]::part(input) {
-	text-align: center;
-}
-
-: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);
-	height: 2rem;
-	height: 100%;
-	background-color: var(--_ui5_step_input_button_background_color);
-	z-index: 0;
-}
-
-:host .ui5-step-icon[focused] {
-	border: none;
-	outline: none;
-}
-
-:host .ui5-step-icon.ui5-step-dec {
-	left: var(--_ui5_step_input_button_left);
-	z-index: 1;
-}
-
-:host .ui5-step-icon.ui5-step-inc {
-	right: var(--_ui5_step_input_button_right);
-}
-
-:host .ui5-step-icon *:not(.ui5-step-input-icon--clickable),
-:host .ui5-step-icon *:not(.ui5-step-input-icon--clickable):active,
-:host .ui5-step-icon *:not(.ui5-step-input-icon--clickable):hover {
-	opacity: 0.5;
-	background-color: transparent;
-	color: var(--sapContent_IconColor);
-}
-
-:host .ui5-step-icon :not(.ui5-step-input-icon--clickable) *:hover,
-:host .ui5-step-icon :not(.ui5-step-input-icon--clickable) *:active {
-	background-color: var(--sapField_Background);
-	color: var(--sapContent_IconColor);
-}
-
-:host .ui5-step-input-input[focused]::after {
-	position: absolute;
-	content: "";
-	border: var(--_ui5_step_input_input_border_focused_after);
-	top: var(--_ui5_step_input_input_border_top_bottom_focused_after);
-	right: 0px;
-	bottom: var(--_ui5_step_input_input_border_top_bottom_focused_after);
-	border-radius: var(--_ui5_step_input_input_border_radius_focused_after);
-	left: 0px;
-	outline: none;
-	pointer-events: none;
-	z-index: 1;
-}
-
-:host .ui5-step-input-input[focused] {
-	outline: none;
-}
-
-:host([value-state="Information"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after {
-	border-color: var(--_ui5_step_input_input_information_border_color_focused_after);
-}
-
-:host([value-state="Critical"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after {
-	border-color: var(--_ui5_step_input_input_warning_border_color_focused_after);
-}
-
-:host([value-state="Positive"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after {
-	border-color: var(--_ui5_step_input_input_success_border_color_focused_after);
-}
-
-:host([value-state="Negative"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after {
-	border-color: var(--_ui5_step_input_input_error_border_color_focused_after);
-}
-
-/* Disable spin buttons in Chrome, Safari, Edge, Opera */
-:host .ui5-step-input-input::-webkit-outer-spin-button,
-:host .ui5-step-input-input::-webkit-inner-spin-button {
-	-webkit-appearance: none;
-	margin: 0;
-}
-
-:host([disabled]) .ui5-step-icon {
-	background-color: var(--_ui5_step_input_disabled_button_background);
-}
-
-:host([disabled]) .ui5-step-icon [ui5-icon] {
-	color: var(--sapField_ReadOnly_BorderColor);
 }

package/src/themes/TimePickerClock.css

@@ -121,7 +121,7 @@
 	line-height: 2.75rem;
 	text-align: center;
 	vertical-align: top;
-	font-family: var(--sapFontFamily);
+	font-family: var(--sapFontBoldFamily);
 	font-size: var(--sapFontSize);
 	color: var(--sapTextColor);
 	border: 0.0625rem solid transparent;

package/src/themes/TimeSelectionClocks.css

@@ -24,7 +24,7 @@
 	text-align: center;
 	font-family: var(--sapFontFamily);
 	font-size: var(--sapFontSize);
-	color: var(--sapContent_LabelColor);
+	color: var(--sapTextColor);
 }
 
 .ui5-time-picker-tsc-clocks {

package/src/themes/base/NumberInput-parameters.css

@@ -0,0 +1,31 @@
+:host {
+	--_ui5_number_input_error_focused_background: var(--sapField_Focus_Background);
+	--_ui5_number_input_button_state_hover_background_color: var(--sapField_Background);
+	--_ui5_number_input_error_hover_background: var(--sapField_Background);
+	--_ui5_number_input_border_style: 1px solid var(--sapField_BorderColor);
+	--_ui5_number_input_border_style_hover: 1px solid var(--sapField_Hover_BorderColor);
+	--_ui5_number_input_error_warning_information_border_style: none;
+	--_ui5_number_input_after_border_style: var(--_ui5_input_error_warning_border_style);
+	--_ui5_number_input_error_background_color: var(--_ui5_input_input_background_color);
+	--_ui5_number_input_button_background_color:var(--sapField_Background);
+	--_ui5_number_input_input_border: 1px solid transparent;
+	--_ui5_number_input_input_margin_top: -0.0625rem;
+	--_ui5_number_input_button_display: inline-block;
+	--_ui5_number_input_button_left: 0;
+	--_ui5_number_input_button_right: 0;
+	--_ui5_number_input_input_border_focused_after: var(--_ui5_input_focus_border_width) dotted var(--sapField_Active_BorderColor);
+	--_ui5_number_input_input_border_top_bottom_focused_after: 0.0625rem;
+	--_ui5_number_input_input_border_bottom_focused_after: 0.0625rem;
+	--_ui5_number_input_input_border_top_information_focused_after: 0.0625rem;
+	--_ui5_number_input_input_border_bottom_information_focused_after: 0.0625rem;
+	--_ui5_number_input_input_border_radius_focused_after: 0;
+	--_ui5_number_input_input_information_border_color_focused_after: var(--sapField_BorderColor);
+	--_ui5_number_input_input_warning_border_color_focused_after: var(--sapField_BorderColor);
+	--_ui5_number_input_input_success_border_color_focused_after: var(--sapField_BorderColor);
+	--_ui5_number_input_input_error_border_color_focused_after: var(--sapField_BorderColor);
+	--_ui5_number_input_disabled_button_background: var(--sapField_ReadOnly_Background);
+	--_ui5_number_input_border_color_hover: var(--sapField_Hover_Background);
+	--_ui5_number_input_border_hover: 1px solid var(--sapField_Hover_BorderColor);
+	--_ui5_input_input_background_color: var(--sapField_InvalidBackground);
+	--_ui5_number_input_padding_with_step_buttons: 2.5rem;
+}

package/src/themes/base/sizes-parameters.css

@@ -350,9 +350,9 @@
 		/* SplitButton */
 		--_ui5_split_button_middle_separator_height: 1.625rem;
 
-		/* StepInput */
-		--_ui5_step_input_min_width: 6rem;
-		--_ui5_step_input_padding: 2rem;
+		/* NumberInput / StepInput */
+		--_ui5_number_input_min_width: 6rem;
+		--_ui5_number_input_padding_with_step_buttons: 2rem;
 
 		/* Tree */
 		--_ui5-tree-indent-step: 0.5rem;

package/src/themes/sap_fiori_3/parameters-bundle.css

@@ -56,6 +56,6 @@
 @import "./SliderBase-parameters.css";
 @import "./SliderHandle-parameters.css";
 @import "./SliderScale-parameters.css";
-@import "../base/StepInput-parameters.css";
+@import "../base/NumberInput-parameters.css";
 @import "../base/rtl-parameters.css";
 @import "./sizes-parameters.css";