@ui5/webcomponents 2.27.2 → 2.28.0-rc.0

package/src/themes/{NumberInput.css → NumericInput.css}

@@ -18,10 +18,15 @@
     border-color: var(--_ui5_input_disabled_border_color);
 }
 
+:host([disabled]) .ui5-numeric-input-input {
+    /* The host already applies the disabled opacity to the entire control. */
+    opacity: 1;
+}
+
 :host {
 	color: var(--sapField_TextColor);
 	background-color: var(--sapField_Background);
-	border: var(--_ui5_number_input_border_style);
+	border: var(--_ui5_numeric_input_border_style);
 	border-radius: var(--sapField_BorderCornerRadius);
 	box-sizing: border-box;
 	height: var(--_ui5_input_height);
@@ -29,7 +34,7 @@
 	isolation: isolate;
 	overflow: hidden;
 	margin: var(--_ui5_input_margin_top_bottom) 0;
-	min-width: var(--_ui5_number_input_min_width);
+	min-width: var(--_ui5_numeric_input_min_width);
 	text-align: right;
 	user-select: none;
 	-moz-user-select: none;
@@ -41,7 +46,7 @@
 	--ui5_input_focus_pseudo_element_content: none;
 }
 
-:host .ui5-number-input-input {
+:host .ui5-numeric-input-input {
 	text-align: inherit;
 	height: inherit;
 }
@@ -61,18 +66,18 @@
 :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);
+	border-style: var(--_ui5_numeric_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);
+	background-color: var(--_ui5_numeric_input_border_color_hover);
+	border: var(--_ui5_numeric_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);
+	border: var(--_ui5_numeric_input_border_style_hover);
 	box-shadow: var(--sapField_Hover_Shadow);
 }
 
@@ -96,7 +101,7 @@
 :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);
+	background-color: var(--_ui5_numeric_input_button_state_hover_background_color);
 }
 
 :host(:not([value-state]):not([readonly]):not([disabled])[focused]),
@@ -108,12 +113,12 @@
 }
 
 :host([value-state="Negative"]:not([readonly]):not([disabled])[focused]) {
-	background-color: var(--_ui5_number_input_error_focused_background);
+	background-color: var(--_ui5_numeric_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);
+	background-color: var(--_ui5_numeric_input_error_hover_background);
 }
 
 :host([value-state="Positive"]:not([readonly]):not([disabled]))::after,
@@ -130,7 +135,7 @@
 	outline: none;
 	pointer-events: none;
 	border-radius: var(--sapField_BorderCornerRadius);
-	border-style: var(--_ui5_number_input_after_border_style);
+	border-style: var(--_ui5_numeric_input_after_border_style);
 	z-index: 0;
 	border-width: 0px;
 }
@@ -158,23 +163,23 @@
 :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="Negative"]:not([readonly]):not([disabled])) .ui5-numeric-input-input {
+	background-color: var(--_ui5_numeric_input_error_background_color);
 }
 
-:host([value-state]:not([value-state="None"]) .ui5-number-input-input[focused]) {
+:host([value-state]:not([value-state="None"]) .ui5-numeric-input-input[focused]) {
 		outline: none;
 }
 
-:host .ui5-number-input-input {
+:host .ui5-numeric-input-input {
 	width: 100%;
 	color: inherit;
 	background-color: inherit;
-	border: var(--_ui5_number_input_input_border);
+	border: var(--_ui5_numeric_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);
+	margin-top: var(--_ui5_numeric_input_input_margin_top);
+	min-width: var(--_ui5_numeric_input_min_width);
 	position: relative;
 	outline: none;
 	line-height: inherit;
@@ -182,40 +187,40 @@
 	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-numeric-input-root.ui5-numeric-input-root--with-buttons .ui5-numeric-input-input {
+	padding-inline-start: var(--_ui5_numeric_input_padding_with_step_buttons);
+	padding-inline-end: var(--_ui5_numeric_input_padding_with_step_buttons);
 }
 
-:host .ui5-number-input-input[readonly] {
+:host .ui5-numeric-input-input[readonly] {
 	padding: 0;
 }
 
-:host .ui5-number-input-input:hover,
-:host .ui5-number-input-input[focused]{
+:host .ui5-numeric-input-input:hover,
+:host .ui5-numeric-input-input[focused]{
 	box-shadow: none;
 }
 
-:host .ui5-number-input-root {
+:host .ui5-numeric-input-root {
 	line-height: inherit;
 	letter-spacing: inherit;
 	word-spacing: inherit;
 	height: inherit;
 }
 
-:host .ui5-number-input-input::part(input) {
+:host .ui5-numeric-input-input::part(input) {
 	white-space: nowrap;
 }
 
-:host .ui5-number-input-input[text-align=left]::part(input) {
+:host .ui5-numeric-input-input[text-align=left]::part(input) {
 	text-align: left;
 }
 
-:host .ui5-number-input-input[text-align=center]::part(input) {
+:host .ui5-numeric-input-input[text-align=center]::part(input) {
 	text-align: center;
 }
 
-:host .ui5-number-input-input[text-align=right]::part(input) {
+:host .ui5-numeric-input-input[text-align=right]::part(input) {
 	text-align: right;
 }
 
@@ -225,10 +230,10 @@
 
 :host .ui5-step-icon {
 	position: absolute;
-	display: var(--_ui5_number_input_button_display);
+	display: var(--_ui5_numeric_input_button_display);
 	height: 2rem;
 	height: 100%;
-	background-color: var(--_ui5_number_input_button_background_color);
+	background-color: var(--_ui5_numeric_input_button_background_color);
 	z-index: 0;
 }
 
@@ -238,43 +243,43 @@
 }
 
 :host .ui5-step-icon.ui5-step-dec {
-	left: var(--_ui5_number_input_button_left);
+	left: var(--_ui5_numeric_input_button_left);
 	z-index: 1;
 }
 
 :host .ui5-step-icon.ui5-step-inc {
-	right: var(--_ui5_number_input_button_right);
+	right: var(--_ui5_numeric_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 {
+:host .ui5-step-icon *:not(.ui5-numeric-input-icon--clickable),
+:host .ui5-step-icon *:not(.ui5-numeric-input-icon--clickable):active,
+:host .ui5-step-icon *:not(.ui5-numeric-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 {
+:host .ui5-step-icon :not(.ui5-numeric-input-icon--clickable) *:hover,
+:host .ui5-step-icon :not(.ui5-numeric-input-icon--clickable) *:active {
 	background-color: var(--sapField_Background);
 	color: var(--sapContent_IconColor);
 }
 
-:host .ui5-number-input-input[focused]::after {
+:host .ui5-numeric-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);
+	border: var(--_ui5_numeric_input_input_border_focused_after);
+	top: var(--_ui5_numeric_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);
+	bottom: var(--_ui5_numeric_input_input_border_bottom_focused_after);
+	border-radius: var(--_ui5_numeric_input_input_border_radius_focused_after);
 	left: 0px;
 	outline: none;
 	pointer-events: none;
 	z-index: 1;
 }
 
-:host([readonly]) .ui5-number-input-input[focused]::after{
+:host([readonly]) .ui5-numeric-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);
@@ -283,37 +288,37 @@
 	border-color: var(--sapContent_FocusColor);
 }
 
-:host .ui5-number-input-input[focused] {
+:host .ui5-numeric-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="Information"]:not([readonly]):not([disabled])) .ui5-numeric-input-input[focused]::after {
+	border-color: var(--_ui5_numeric_input_input_information_border_color_focused_after);
+	top: var(--_ui5_numeric_input_input_border_top_information_focused_after);
+	bottom: var(--_ui5_numeric_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="Critical"]:not([readonly]):not([disabled])) .ui5-numeric-input-input[focused]::after {
+	border-color: var(--_ui5_numeric_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="Positive"]:not([readonly]):not([disabled])) .ui5-numeric-input-input[focused]::after {
+	border-color: var(--_ui5_numeric_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);
+:host([value-state="Negative"]:not([readonly]):not([disabled])) .ui5-numeric-input-input[focused]::after {
+	border-color: var(--_ui5_numeric_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 {
+:host .ui5-numeric-input-input::-webkit-outer-spin-button,
+:host .ui5-numeric-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);
+	background-color: var(--_ui5_numeric_input_disabled_button_background);
 }
 
 :host([disabled]) .ui5-step-icon [ui5-icon] {

package/src/themes/Popover.css

@@ -92,16 +92,16 @@
 
 .ui5-popover-resize-handle {
 	position: absolute;
-	width: 1.5rem;
-	height: 1.5rem;
+	width: var(--_ui5_popover_resize_handle_size);
+	height: var(--_ui5_popover_resize_handle_size);
 	border-radius: 50%;
 	z-index: 1;
 }
 
 .ui5-popover-resize-handle [ui5-icon] {
 	position: absolute;
-	width: 1rem;
-	height: 1rem;
+	width: var(--_ui5_popover_resize_handle_icon_size);
+	height: var(--_ui5_popover_resize_handle_icon_size);
 	cursor: inherit;
 	color: var(--sapButton_Lite_TextColor);
 	--rotAngle: 0;
@@ -114,8 +114,8 @@
 }
 
 .ui5-popover-resize-handle-top-right .ui5-popover-resize-handle {
-	top: -0.5rem;
-	right: -0.5rem;
+	top: var(--_ui5_popover_resize_handle_offset);
+	right: var(--_ui5_popover_resize_handle_offset);
 	cursor: ne-resize;
 }
 
@@ -126,8 +126,8 @@
 }
 
 .ui5-popover-resize-handle-top-left .ui5-popover-resize-handle {
-	top: -0.5rem;
-	left: -0.5rem;
+	top: var(--_ui5_popover_resize_handle_offset);
+	left: var(--_ui5_popover_resize_handle_offset);
 	cursor: nw-resize;
 }
 
@@ -138,9 +138,9 @@
 }
 
 .ui5-popover-resize-handle-bottom-left .ui5-popover-resize-handle {
-	bottom: -0.5rem;
-	left: -0.5rem;
-	cursor: ne-resize;
+	bottom: var(--_ui5_popover_resize_handle_offset);
+	left: var(--_ui5_popover_resize_handle_offset);
+	cursor: sw-resize;
 }
 
 .ui5-popover-resize-handle-bottom-left .ui5-popover-resize-handle [ui5-icon] {
@@ -150,9 +150,9 @@
 }
 
 .ui5-popover-resize-handle-bottom-right .ui5-popover-resize-handle {
-	bottom: -0.5rem;
-	right: -0.5rem;
-	cursor: nw-resize;
+	bottom: var(--_ui5_popover_resize_handle_offset);
+	right: var(--_ui5_popover_resize_handle_offset);
+	cursor: se-resize;
 }
 
 .ui5-popover-resize-handle-bottom-right .ui5-popover-resize-handle [ui5-icon] {
@@ -163,4 +163,37 @@
 .ui5-popover-resizing,
 .ui5-popover-resizing * {
 	user-select: none !important;
+}
+
+/* Suppress default focus outline on the keyboard handle — the popover shows its own ring below */
+.ui5-popover-keyboard-resize-handle:focus {
+	outline: none;
+}
+
+/* Focus ring on the whole popover while the keyboard resize handle is focused */
+.ui5-popover-root:has(.ui5-popover-keyboard-resize-handle:focus)::before {
+	content: '';
+	position: absolute;
+	inset: var(--_ui5_popover_focus_outline_offset);
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	border-radius: var(--sapElement_BorderCornerRadius);
+	pointer-events: none;
+	z-index: 5;
+}
+
+/* Enlarged corner radius at the active resize corner to echo the resize affordance */
+.ui5-popover-resize-handle-bottom-right:has(.ui5-popover-keyboard-resize-handle:focus)::before {
+	border-bottom-right-radius: var(--_ui5_popover_keyboard_resize_handle_corner_radius_focused);
+}
+
+.ui5-popover-resize-handle-bottom-left:has(.ui5-popover-keyboard-resize-handle:focus)::before {
+	border-bottom-left-radius: var(--_ui5_popover_keyboard_resize_handle_corner_radius_focused);
+}
+
+.ui5-popover-resize-handle-top-right:has(.ui5-popover-keyboard-resize-handle:focus)::before {
+	border-top-right-radius: var(--_ui5_popover_keyboard_resize_handle_corner_radius_focused);
+}
+
+.ui5-popover-resize-handle-top-left:has(.ui5-popover-keyboard-resize-handle:focus)::before {
+	border-top-left-radius: var(--_ui5_popover_keyboard_resize_handle_corner_radius_focused);
 }

package/src/themes/RatingIndicator.css

@@ -108,6 +108,7 @@
 	position: absolute;
 	width: var(--_ui5_rating_indicator_item_width);
 	height: var(--_ui5_rating_indicator_item_height);
+	font-size: inherit;
 }
 
 .ui5-rating-indicator-half-icon-left {

package/src/themes/SliderHandle.css

@@ -18,13 +18,14 @@
 	transform: translateY(-50%);
 }
 
-:host(:focus) {
+:host([desktop]:focus),
+:host(:focus-visible) {
 	outline: var(--ui5_slider_handle_outline);
 	outline-offset: var(--ui5_slider_handle_outline_offset);
 	z-index: 6;
 }
 
-:host(:hover),
+:host([desktop]:hover),
 :host([hovered]) {
 	background: var(--_ui5_slider_handle_hover_background);
 	border: var(--_ui5_slider_handle_hover_border);
@@ -46,17 +47,21 @@
 	height: var(--_ui5_slider_handle_icon_size);
 }
 
-:host(:focus),
+:host([desktop]:focus),
+:host(:focus-visible),
 :host([active]),
 :host(:active) {
-	[slider-icon] {
-		display: none;
-	}
-
 	background-color: var(--_ui5_slider_handle_background_focus);
 	border: var(--_ui5_slider_handle_focus_border);
 }
 
+:host([desktop]:focus) [slider-icon],
+:host(:focus-visible) [slider-icon],
+:host([active]) [slider-icon],
+:host(:active) [slider-icon] {
+	display: none;
+}
+
 :host([orientation="Vertical"]) {
 	transform: rotate(90deg);
 }

package/src/themes/SliderScale.css

@@ -76,7 +76,8 @@
 	outline: none;
 }
 
-.ui5-slider-scale-progress:focus::after,
+:host([desktop]) .ui5-slider-scale-progress:focus::after,
+.ui5-slider-scale-progress:focus-visible::after,
 .ui5-slider-scale-progress.ui5-slider-progress--focused::after {
 	border: var(--_ui5_range_slider_progress_focus_border);
 	border-radius: var(--_ui5_range_slider_progress_focus_border_radius, 0.5rem);
@@ -91,7 +92,8 @@
 	box-sizing: border-box;
 }
 
-.ui5-slider-scale-progress:focus::before,
+:host([desktop]) .ui5-slider-scale-progress:focus::before,
+.ui5-slider-scale-progress:focus-visible::before,
 .ui5-slider-scale-progress.ui5-slider-progress--focused::before {
 	display: var(--_ui5_range_slider_legacy_progress_focus_display);
 	content: '';

package/src/themes/SplitButton.css

@@ -7,6 +7,8 @@
 	border-radius: var(--_ui5_button_border_radius);
 	background-color: var(--sapButton_Background);
 	box-shadow: var(--_ui5_split_button_host_default_box_shadow);
+	min-width: 0;
+	max-width: 100%;
 }
 
 :host([active-arrow-button][design="Negative"]) .ui5-split-arrow-button,
@@ -134,6 +136,7 @@
 	position: relative;
 	width: inherit;
 	height: 100%;
+	min-width: 0;
 }
 
 .ui5-split-button-root:focus,
@@ -390,6 +393,6 @@
 }
 
 .ui5-split-text-button::part(button) {
-    justify-content: flex-start;
+	justify-content: flex-start;
 	padding: 0 var(--_ui5_button_base_padding);
 }

package/src/themes/TextArea.css

@@ -239,7 +239,9 @@
 	border-style: var(--_ui5_textarea_readonly_border_style);
 }
 
-:host([show-exceeded-text]) .ui5-textarea-root {
+:host([show-exceeded-text]) .ui5-textarea-root,
+:host([counter-mode="Always"]) .ui5-textarea-root,
+:host([counter-mode="Auto"]) .ui5-textarea-root {
 	flex-direction: column;
 }
 
@@ -413,6 +415,20 @@
 	font-size: var(--sapFontSmallSize);
 }
 
+/* Hidden state - space is reserved but text is not visible */
+.ui5-textarea-exceeded-text--hidden {
+	visibility: hidden;
+}
+
+/* ValueState-based counter coloring */
+:host([value-state="Critical"]:not([readonly]):not([disabled])) .ui5-textarea-exceeded-text {
+	color: var(--sapField_WarningColor);
+}
+
+:host([value-state="Negative"]:not([readonly]):not([disabled])) .ui5-textarea-exceeded-text {
+	color: var(--sapField_InvalidColor);
+}
+
 :host([readonly]) .ui5-textarea-exceeded-text, :host([disabled]) .ui5-textarea-exceeded-text {
 	visibility: hidden;
 }

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

@@ -0,0 +1,31 @@
+:host {
+	--_ui5_numeric_input_error_focused_background: var(--sapField_Focus_Background);
+	--_ui5_numeric_input_button_state_hover_background_color: var(--sapField_Background);
+	--_ui5_numeric_input_error_hover_background: var(--sapField_Background);
+	--_ui5_numeric_input_border_style: 1px solid var(--sapField_BorderColor);
+	--_ui5_numeric_input_border_style_hover: 1px solid var(--sapField_Hover_BorderColor);
+	--_ui5_numeric_input_error_warning_information_border_style: none;
+	--_ui5_numeric_input_after_border_style: var(--_ui5_input_error_warning_border_style);
+	--_ui5_numeric_input_error_background_color: var(--_ui5_input_input_background_color);
+	--_ui5_numeric_input_button_background_color:var(--sapField_Background);
+	--_ui5_numeric_input_input_border: 1px solid transparent;
+	--_ui5_numeric_input_input_margin_top: -0.0625rem;
+	--_ui5_numeric_input_button_display: inline-block;
+	--_ui5_numeric_input_button_left: 0;
+	--_ui5_numeric_input_button_right: 0;
+	--_ui5_numeric_input_input_border_focused_after: var(--_ui5_input_focus_border_width) dotted var(--sapField_Active_BorderColor);
+	--_ui5_numeric_input_input_border_top_bottom_focused_after: 0.0625rem;
+	--_ui5_numeric_input_input_border_bottom_focused_after: 0.0625rem;
+	--_ui5_numeric_input_input_border_top_information_focused_after: 0.0625rem;
+	--_ui5_numeric_input_input_border_bottom_information_focused_after: 0.0625rem;
+	--_ui5_numeric_input_input_border_radius_focused_after: 0;
+	--_ui5_numeric_input_input_information_border_color_focused_after: var(--sapField_BorderColor);
+	--_ui5_numeric_input_input_warning_border_color_focused_after: var(--sapField_BorderColor);
+	--_ui5_numeric_input_input_success_border_color_focused_after: var(--sapField_BorderColor);
+	--_ui5_numeric_input_input_error_border_color_focused_after: var(--sapField_BorderColor);
+	--_ui5_numeric_input_disabled_button_background: var(--sapField_ReadOnly_Background);
+	--_ui5_numeric_input_border_color_hover: var(--sapField_Hover_Background);
+	--_ui5_numeric_input_border_hover: 1px solid var(--sapField_Hover_BorderColor);
+	--_ui5_input_input_background_color: var(--sapField_InvalidBackground);
+	--_ui5_numeric_input_padding_with_step_buttons: 2.5rem;
+}

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

@@ -2,4 +2,9 @@
 	--_ui5_popover_background: var(--sapGroup_ContentBackground);
 	--_ui5_popover_box_shadow: var(--sapContent_Shadow2);
 	--_ui5_popover_no_arrow_box_shadow: var(--sapContent_Shadow1);
+	--_ui5_popover_resize_handle_size: 1.5rem;
+	--_ui5_popover_resize_handle_icon_size: 1rem;
+	--_ui5_popover_resize_handle_offset: -0.5rem;
+	--_ui5_popover_keyboard_resize_handle_corner_radius_focused: 1.75rem;
+	--_ui5_popover_focus_outline_offset: 0.0625rem;
 }

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

@@ -350,9 +350,9 @@
 		/* SplitButton */
 		--_ui5_split_button_middle_separator_height: 1.625rem;
 
-		/* NumberInput / StepInput */
-		--_ui5_number_input_min_width: 6rem;
-		--_ui5_number_input_padding_with_step_buttons: 2rem;
+		/* NumericInput / StepInput */
+		--_ui5_numeric_input_min_width: 6rem;
+		--_ui5_numeric_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/NumberInput-parameters.css";
+@import "../base/NumericInput-parameters.css";
 @import "../base/rtl-parameters.css";
 @import "./sizes-parameters.css";

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

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

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

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

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

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

package/src/themes/sap_horizon/AvatarGroup-parameters.css

@@ -1,22 +1,10 @@
 @import "../base/AvatarGroup-parameters.css";
 
-/* Context-aware border-radius - dynamically set based on avatar size (height / 2) */
-.ui5-avatar-group-items-xs {
-	--_ui5_avatar_group_focus_border_radius: 1rem; /* 2rem / 2 */
-}
-
-.ui5-avatar-group-items-s {
-	--_ui5_avatar_group_focus_border_radius: 1.5rem; /* 3rem / 2 */
-}
-
-.ui5-avatar-group-items-m {
-	--_ui5_avatar_group_focus_border_radius: 2rem; /* 4rem / 2 */
-}
-
-.ui5-avatar-group-items-l {
-	--_ui5_avatar_group_focus_border_radius: 2.5rem; /* 5rem / 2 */
-}
-
-.ui5-avatar-group-items-xl {
-	--_ui5_avatar_group_focus_border_radius: 3.5rem; /* 7rem / 2 */
+:host {
+	/* Context-aware border-radius - dynamically set based on avatar size (height / 2) */
+	--_ui5_avatar_group_focus_border_radius_xs: 1rem; /* 2rem / 2 */
+	--_ui5_avatar_group_focus_border_radius_s: 1.5rem; /* 3rem / 2 */
+	--_ui5_avatar_group_focus_border_radius_m: 2rem; /* 4rem / 2 */
+	--_ui5_avatar_group_focus_border_radius_l: 2.5rem; /* 5rem / 2 */
+	--_ui5_avatar_group_focus_border_radius_xl: 3.5rem; /* 7rem / 2 */
 }