@ui5/webcomponents 2.23.0-rc.0 → 2.23.0-rc.2

package/src/i18n/messagebundle_tr.properties

@@ -600,6 +600,7 @@ TABLE_MULTI_SELECTABLE=Çoklu seçim tablosu
 TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION=Tümünü seç onay kutusu
 TABLE_COLUMNHEADER_CLEARALL_DESCRIPTION=Tümünü temizle düğmesi
 TABLE_ROW=Satır
+TABLE_GROUP_ROW=Grup satırı
 TABLE_ROW_POPIN=Satır iletişim penceresi
 TABLE_ROW_INDEX={0}/{1}
 TABLE_ROW_SELECTED=Seçilen

package/src/i18n/messagebundle_uk.properties

@@ -600,6 +600,7 @@ TABLE_MULTI_SELECTABLE=Таблиця множинного вибору
 TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION=Прапорець "Вибрати все"
 TABLE_COLUMNHEADER_CLEARALL_DESCRIPTION=Кнопка "Очистити все"
 TABLE_ROW=Рядок
+TABLE_GROUP_ROW=Рядок групи
 TABLE_ROW_POPIN=Виринаюче поле рядка
 TABLE_ROW_INDEX={0} з {1}
 TABLE_ROW_SELECTED=Вибрано

package/src/i18n/messagebundle_vi.properties

@@ -600,6 +600,7 @@ TABLE_MULTI_SELECTABLE=Bảng nhiều lựa chọn
 TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION=Ô đánh dấu Chọn tất cả
 TABLE_COLUMNHEADER_CLEARALL_DESCRIPTION=Nút Xóa tất cả
 TABLE_ROW=Hàng
+TABLE_GROUP_ROW=Hàng nhóm
 TABLE_ROW_POPIN=Vùng chèn tạm của hàng
 TABLE_ROW_INDEX={0} của {1}
 TABLE_ROW_SELECTED=Được chọn

package/src/i18n/messagebundle_zh_CN.properties

@@ -600,6 +600,7 @@ TABLE_MULTI_SELECTABLE=多重选择表
 TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION=全选复选框
 TABLE_COLUMNHEADER_CLEARALL_DESCRIPTION=全部清除按钮
 TABLE_ROW=行
+TABLE_GROUP_ROW=分组行
 TABLE_ROW_POPIN=行弹入框
 TABLE_ROW_INDEX={0} / {1}
 TABLE_ROW_SELECTED=已选择

package/src/i18n/messagebundle_zh_TW.properties

@@ -600,6 +600,7 @@ TABLE_MULTI_SELECTABLE=多重選擇表格
 TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION=勾選所有核取方塊
 TABLE_COLUMNHEADER_CLEARALL_DESCRIPTION=清除所有按鈕
 TABLE_ROW=列
+TABLE_GROUP_ROW=群組列
 TABLE_ROW_POPIN=列對話方塊
 TABLE_ROW_INDEX={0}/{1}
 TABLE_ROW_SELECTED=已選擇

package/src/themes/ColorPicker.css

@@ -36,6 +36,8 @@
     border: var(--_ui5_color_picker_circle_outer_border);
     border-radius: 0.6875rem;
     pointer-events: none;
+    /* Inline left/top are percentages of the picker box; translate centers the circle on that point. */
+    transform: translate(-50%, -50%);
 }
 
 .ui5-color-picker-circle:after {

package/src/themes/Form.css

@@ -30,7 +30,7 @@
 }
 
 .ui5-form-group-layout {
-	display: grid;
+	display: block;
 	column-gap: 1rem;
 }
 
@@ -51,5 +51,7 @@
 }
 
 dl {
-	all: unset;
+	padding: 0;
+	margin: 0;
+	border: 0 transparent;
 }

package/src/themes/FormItem.css

@@ -3,28 +3,8 @@
 	width: 100%;
 }
 
-:host([column-span="1"]) {
-	grid-column: span 1;
-}
-
-:host([column-span="2"]) {
-	grid-column: span 2;
-}
-
-:host([column-span="3"]) {
-	grid-column: span 3;
-}
-
-:host([column-span="4"]) {
-	grid-column: span 4;
-}
-
-:host([column-span="5"]) {
-	grid-column: span 5;
-}
-
-:host([column-span="6"]) {
-	grid-column: span 6;
+:host {
+	break-inside: avoid;
 }
 
 .ui5-form-item-root {
@@ -68,34 +48,8 @@
 	width: 100%;
 }
 
-@container (max-width: 600px) {
-	:host {
-		order: var(--ui5-form-item-order-S, unset);
-	}
-}
-
-/* M  - 1 column by default, up to 2 columns */
-@container (width > 600px) and (width <= 1024px) {
-	:host {
-		order: var(--ui5-form-item-order-M, unset);
-	}
-
-}
-
-/* L - 2 columns by default, up to 3 columns */
-@container (width > 1024px) and (width <= 1440px) {
-	:host {
-		order: var(--ui5-form-item-order-L, unset);
-	}
-}
-
-/* XL - 3 columns by default, up to 6 */
-@container (min-width: 1441px) {
-	:host {
-		order: var(--ui5-form-item-order-Xl, unset);
-	}
-}
-
 dd {
-	all: unset;
+	padding: 0;
+	margin: 0;
+	border: 0 transparent;
 }

package/src/themes/FormItemSpan.css

@@ -17,8 +17,8 @@
 		--ui5-form-item-layout: var(--ui5-form-item-layout-S);
 	}
 
-	:host([label-span-s="12"]) .ui5-form-item,
-	:host([label-span-s="12"]) .ui5-form-group {
+	:host(:is([label-span~="S12"], :not([label-span*="S"]))) .ui5-form-item,
+	:host(:is([label-span~="S12"], :not([label-span*="S"]))) .ui5-form-group {
 		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);
 		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal);
 	}
@@ -30,8 +30,8 @@
 		--ui5-form-item-layout: var(--ui5-form-item-layout-M);
 	}
 
-	:host([label-span-m="12"]) .ui5-form-item,
-	:host([label-span-m="12"]) .ui5-form-group {
+	:host([label-span~="M12"]) .ui5-form-item,
+	:host([label-span~="M12"]) .ui5-form-group {
 		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);
 		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal);
 	}
@@ -43,8 +43,8 @@
 		--ui5-form-item-layout: var(--ui5-form-item-layout-L);
 	}
 
-	:host([label-span-l="12"]) .ui5-form-item,
-	:host([label-span-l="12"]) .ui5-form-group {
+	:host([label-span~="L12"]) .ui5-form-item,
+	:host([label-span~="L12"]) .ui5-form-group {
 		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);
 		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal);
 	}
@@ -56,9 +56,9 @@
 		--ui5-form-item-layout: var(--ui5-form-item-layout-XL);
 	}
 
-	:host([label-span-xl="12"]) .ui5-form-item,
-	:host([label-span-xl="12"]) .ui5-form-group {
+	:host([label-span~="XL12"]) .ui5-form-item,
+	:host([label-span~="XL12"]) .ui5-form-group {
 		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);
 		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal);
 	}
-}
+}

package/src/themes/FormLayout.css

@@ -1,43 +1,46 @@
-/* 
-* The Form layout is divided into one or more columns. 
+/*
+* The Form layout is divided into one or more columns.
 * XL - max. 6 columns, L - max. 3 columns, M - max. 2 columns and S - 1 column.
 */
-/* 
+/*
 * S max-width: 600px - container padding 24px
 */
 
 /* S - 1 column */
 @container (max-width: 599px) {
 	.ui5-form-layout {
-		grid-template-columns: 1fr;
+		grid-template-columns: repeat(var(--ui5-form-columns-s), 1fr);
 	}
 
 	::slotted(*) {
 		justify-self: start;
 	}
-	::slotted(:nth-child(2n)){
+
+	::slotted(:nth-child(2n)) {
 		margin-bottom: 0.5rem;
 	}
+
+	.ui5-form-column {
+		grid-column: span var(--ui5-form-column-span-s, 1);
+	}
+
+	.ui5-form-group-layout {
+		column-count: var(--ui5-form-column-span-s, 1)
+	}
 }
 
 /* M  - 1 column by default, up to 2 columns */
 @container (min-width: 600px) and (max-width: 1023px) {
 	.ui5-form-layout {
-		grid-template-columns: 1fr;
-	}
-	:host([columns-m="1"]) .ui5-form-layout {
-		grid-template-columns: 1fr;
-	}
-	:host([columns-m="2"]) .ui5-form-layout {
-		grid-template-columns: repeat(2, 1fr);
+		grid-template-columns: repeat(var(--ui5-form-columns-m), 1fr);
 	}
 
-	.ui5-form-column-spanM-2 {
-		grid-column: span 2;
+	.ui5-form-column {
+		grid-column: span var(--ui5-form-column-span-m, 1);
 	}
 
-	.ui5-form-column-spanM-2 .ui5-form-group-layout {
-		grid-template-columns: repeat(2, 1fr);
+	.ui5-form-group-layout {
+		column-count: var(--ui5-form-column-span-m, 1)
 	}
 }
 
@@ -45,115 +48,29 @@
 @container (min-width: 1024px) and (max-width: 1439px) {
 
 	.ui5-form-layout {
-		grid-template-columns: repeat(2, 1fr);
-	}
-	.ui5-form-column {
-		grid-template-columns: 1fr;
+		grid-template-columns: repeat(var(--ui5-form-columns-l), 1fr);
 	}
 
-	:host([columns-l="1"]) .ui5-form-layout {
-		grid-template-columns: 1fr;
-	}
-	:host([columns-l="2"]) .ui5-form-layout {
-		grid-template-columns: repeat(2, 1fr);
-	}
-	:host([columns-l="3"]) .ui5-form-layout {
-		grid-template-columns: repeat(3, 1fr);
-	}
-
-	.ui5-form-column-spanL-2 {
-		grid-column: span 2;
-	}
-	.ui5-form-column-spanL-2 .ui5-form-group-layout {
-		grid-template-columns: repeat(2, 1fr);
+	.ui5-form-column {
+		grid-column: span var(--ui5-form-column-span-l, 1);
 	}
 
-	.ui5-form-column-spanL-3 {
-		grid-column: span 3;
-	}
-	.ui5-form-column-spanL-3 .ui5-form-group-layout {
-		grid-template-columns: repeat(3, 1fr);
+	.ui5-form-group-layout {
+		column-count: var(--ui5-form-column-span-l, 1)
 	}
 }
 
 /* XL - 3 columns by default, up to 6 */
 @container (min-width: 1440px) {
 	.ui5-form-layout {
-		grid-template-columns: repeat(3, 1fr);
-	}
-
-	:host([columns-xl="1"]) .ui5-form-layout {
-		grid-template-columns: 1fr;
-	}
-	:host([columns-xl="2"]) .ui5-form-layout {
-		grid-template-columns: repeat(2, 1fr);
-	}
-	:host([columns-xl="3"]) .ui5-form-layout {
-		grid-template-columns: repeat(3, 1fr);
-	}
-	:host([columns-xl="4"]) .ui5-form-layout {
-		grid-template-columns: repeat(4, 1fr);
-	}
-	:host([columns-xl="5"]) .ui5-form-layout {
-		grid-template-columns: repeat(5, 1fr);
-	}
-	:host([columns-xl="6"]) .ui5-form-layout {
-		grid-template-columns: repeat(6, 1fr);
+		grid-template-columns: repeat(var(--ui5-form-columns-xl), 1fr);
 	}
 
-	.ui5-form-column-spanXL-2 {
-		grid-column: span 2;
-	}
-	.ui5-form-column-spanXL-2 .ui5-form-group-layout {
-		grid-template-columns: repeat(2, 1fr);
-	}
-
-	.ui5-form-column-spanXL-3 {
-		grid-column: span 3;
-	}
-	.ui5-form-column-spanXL-3 .ui5-form-group-layout {
-		grid-template-columns: repeat(3, 1fr);
-	}
-
-	.ui5-form-column-spanXL-4 {
-		grid-column: span 4;
-	}
-	.ui5-form-column-spanXL-4 .ui5-form-group-layout {
-		grid-template-columns: repeat(4, 1fr);
-
-	}
-
-	.ui5-form-column-spanXL-5 {
-		grid-column: span 5;
-	}
-	.ui5-form-column-spanXL-5 .ui5-form-group-layout {
-		grid-template-columns: repeat(5, 1fr);
-
+	.ui5-form-column {
+		grid-column: span var(--ui5-form-column-span-xl, 1);
 	}
 
-	.ui5-form-column-spanXL-6 {
-		grid-column: span 6;
-	}
-	.ui5-form-column-spanXL-6 .ui5-form-group-layout {
-		grid-template-columns: repeat(6, 1fr);
+	.ui5-form-group-layout {
+		column-count: var(--ui5-form-column-span-xl, 1)
 	}
-}
-
-.ui5-form-item-span-2 {
-	grid-column: span 2;
-}
-
-.ui5-form-item-span-3 {
-	grid-column: span 3;
-}
-
-.ui5-form-item-span-4 {
-	grid-column: span 4;
-}
-
-.ui5-form-item-span-5 {
-	grid-column: span 5;
-}
-.ui5-form-item-span-6 {
-	grid-column: span 6;
-}
+}

package/src/themes/RadioButton.css

@@ -2,7 +2,8 @@
 @import "./FormComponents.css";
 
 :host(:not([hidden])) {
-	display: inline-block;
+	display: inline-flex;
+	align-items: center;
 }
 
 :host {
@@ -12,6 +13,7 @@
 	overflow: hidden;
 	color: var(--_ui5_radio_button_color);
 	border-radius: var(--_ui5_radio_button_border_radius);
+	font-size: var(--sapFontSize);
 }
 
 :host(:not([disabled])) .ui5-radio-root {
@@ -84,11 +86,11 @@
 
 :host([text][desktop]) .ui5-radio-root:focus::before,
 :host([text]) .ui5-radio-root:focus-visible::before {
-	inset-inline-end: 0px;
+	inset-inline-end: 0;
 }
 
 :host([text]) .ui5-radio-inner {
-	padding: var(--_ui5_radio_button_outer_ring_padding_with_label);
+	padding-inline-end: var(--_ui5_radio_button_outer_ring_padding_with_label);
 }
 
 /* readonly */
@@ -179,24 +181,30 @@
 	height: auto;
 	position: relative;
 	display: inline-flex;
+	align-items: center;
 	flex-wrap: nowrap;
 	outline: none;
 	max-width: 100%;
 	box-sizing: border-box;
 	border: var(--_ui5_radio_button_border);
 	border-radius: var(--_ui5_radio_button_border_radius);
+	padding-block: var(--_ui5_radio_button_label_side_padding);
+	padding-inline-start: var(--_ui5_radio_button_outer_ring_padding);
+}
+
+
+:host([text]) .ui5-radio-root {
+	padding-inline-start: var(--_ui5_radio_button_outer_ring_padding_with_label);
 }
 
 /* Inner */
 .ui5-radio-inner {
 	display: flex;
 	align-items: center;
-	padding: var(--_ui5_radio_button_outer_ring_padding);
-	flex-shrink: 0;
-	height: var(--_ui5_radio_button_inner_size);
-	font-size: 1rem; /* override font size of the message dialog */
+	align-self: start;
+	padding-inline-end: var(--_ui5_radio_button_outer_ring_padding);
+	flex: 1;
 	pointer-events: none;
-	vertical-align: top;
 }
 
 .ui5-radio-inner {
@@ -218,16 +226,11 @@
 	display: flex;
 	align-items: center;
 	padding-inline-end: var(--_ui5_radio_button_label_offset);
-	padding-block: var(--_ui5_radio_button_label_side_padding);
-	vertical-align: top;
 	max-width: 100%;
 	pointer-events: none;
 	color: var(--_ui5_radio_button_label_color);
 	overflow-wrap: break-word;
-}
-
-:host([wrapping-type="None"][text]) .ui5-radio-root {
-	height: var(--_ui5_radio_button_height);
+	font-size: inherit;
 }
 
 :host([wrapping-type="None"][text]) [ui5-label].ui5-radio-label {

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

@@ -18,8 +18,8 @@
 	--_ui5_radio_button_outer_ring_hover_color: var(--sapField_Hover_BorderColor);
 	--_ui5_radio_button_outer_ring_active_color: var(--sapField_Hover_BorderColor);
 	--_ui5_radio_button_outer_ring_checked_hover_color: var(--sapField_Hover_BorderColor);
-	--_ui5_radio_button_outer_ring_padding: 0 0.625rem;
-	--_ui5_radio_button_outer_ring_padding_with_label: 0 0.6875rem;
+	--_ui5_radio_button_outer_ring_padding: 0.625rem;
+	--_ui5_radio_button_outer_ring_padding_with_label: 0.6875rem;
 	--_ui5_radio_button_border_radius: 0;
 	--_ui5_radio_button_border: none;
 	--_ui5_radio_button_focus_outline: block;
@@ -39,6 +39,6 @@
 	:host {
 		--_ui5_radio_button_min_width: 2rem;
 		--_ui5_radio_button_focus_dist: 0.375rem;
-		--_ui5_radio_button_outer_ring_padding_with_label: 0 0.5rem;
+		--_ui5_radio_button_outer_ring_padding_with_label: 0.5rem;
 	}
 }

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

@@ -129,10 +129,9 @@
 	--_ui5_textarea_margin: .25rem 0;
 
 	/* Radio Button */
-	--_ui5_radio_button_height: 2.75rem;
-	--_ui5_radio_button_label_side_padding: .875rem;
+	--_ui5_radio_button_label_side_padding: .6875rem;
 	--_ui5_radio_button_inner_size: 2.75rem;
-	--_ui5_radio_button_svg_size: 1.375rem;
+	--_ui5_radio_button_svg_size: 1.5714em; /* 1.375rem */
 
 	/* Responsive Popover */
 	--_ui5-responsive_popover_header_height: 2.75rem;
@@ -333,13 +332,11 @@
 		--_ui5_tc_item_height: 4rem;
 		--_ui5_tc_header_height: var(--_ui5_tc_item_height);
 		--_ui5_tc_item_icon_circle_size: 2rem;
-		--_ui5_tc_item_icon_size: 1rem;
 
 		/* Radio Button */
-		--_ui5_radio_button_height: 2rem;
-		--_ui5_radio_button_label_side_padding: .5rem;
+		--_ui5_radio_button_label_side_padding: 0.5rem;
 		--_ui5_radio_button_inner_size: 2rem;
-		--_ui5_radio_button_svg_size: 1rem;
+		--_ui5_radio_button_svg_size: 1.1429em;  /* 1rem */
 
 		/* Responsive Popover */
 		--_ui5-responsive_popover_header_height: 2.5rem;

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

@@ -11,7 +11,7 @@
 	--_ui5_checkbox_inner_border_radius: var(--sapField_BorderCornerRadius);
 	--_ui5_checkbox_checkmark_color: var(--sapContent_Selected_ForegroundColor);
 	/* hover & active */
-	--_ui5_checkbox_hover_background: var(--sapContent_Selected_Hover_Background);
+	--_ui5_checkbox_hover_background: var(--sapField_Selector_Hover_Background);
 	--_ui5_checkbox_inner_hover_border_color: var(--sapField_Hover_BorderColor);
 	--_ui5_checkbox_inner_hover_checked_border_color: var(--sapField_Hover_BorderColor);
 	--_ui5_checkbox_inner_selected_border_color: var(--sapField_BorderColor);
@@ -21,19 +21,19 @@
 	--_ui5_checkbox_inner_readonly_border: var(--sapElement_BorderWidth)  var(--sapField_ReadOnly_BorderColor) dashed;
 	/* error state */
 	--_ui5_checkbox_inner_error_border: var(--sapField_InvalidBorderWidth) solid var(--sapField_InvalidColor);
-	--_ui5_checkbox_inner_error_background_hover: var(--sapField_Hover_Background);
+	--_ui5_checkbox_inner_error_background_hover: var(--sapField_Selector_Hover_InvalidBackground);
 	/* warning state */
 	--_ui5_checkbox_inner_warning_border:  var(--sapField_WarningBorderWidth) solid var(--sapField_WarningColor);
 	--_ui5_checkbox_inner_warning_color: var(--sapField_WarningColor);
-	--_ui5_checkbox_inner_warning_background_hover: var(--sapField_Hover_Background);
+	--_ui5_checkbox_inner_warning_background_hover: var(--sapField_Selector_Hover_WarningBackground);
 	--_ui5_checkbox_checkmark_warning_color: var(--sapField_WarningColor);
 	/* success state */
 	--_ui5_checkbox_inner_success_border: var(--sapField_SuccessBorderWidth) solid var(--sapField_SuccessColor);
-	--_ui5_checkbox_inner_success_background_hover: var(--sapField_Hover_Background);
+	--_ui5_checkbox_inner_success_background_hover: var(--sapField_Selector_Hover_SuccessBackground);
 	/* information state */
 	--_ui5_checkbox_inner_information_color: var(--sapField_InformationColor);
 	--_ui5_checkbox_inner_information_border: var(--sapField_InformationBorderWidth) solid var(--sapField_InformationColor);
-	--_ui5_checkbox_inner_information_background_hover: var(--sapField_Hover_Background);
+	--_ui5_checkbox_inner_information_background_hover: var(--sapField_Selector_Hover_InformationBackground);
 	/* disabled */
 	--_ui5_checkbox_disabled_opacity: var(--sapContent_DisabledOpacity);
 	/* focus */

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

@@ -10,7 +10,7 @@
 	--_ui5_radio_button_border_radius: 0.5rem;
 	--_ui5_radio_button_label_color: var(--sapField_TextColor);
 	--_ui5_radio_button_inner_ring_radius: 27.5%;
-	--_ui5_radio_button_outer_ring_padding: 0 0.6875rem;
+	--_ui5_radio_button_outer_ring_padding: 0.6875rem;
 	--_ui5_radio_button_read_only_border_type: 4, 2;
 	--_ui5_radio_button_inner_ring_color: var(--sapContent_Selected_ForegroundColor);
 	--_ui5_radio_button_checked_warning_fill: var(--sapField_WarningColor);
@@ -21,7 +21,7 @@
 
 @container style(--ui5_content_density: compact) {
 	:host {
-		--_ui5_radio_button_outer_ring_padding: 0 0.5rem;
+		--_ui5_radio_button_outer_ring_padding: 0.5rem;
 		--_ui5_radio_button_focus_dist: 0.1875rem;
 	}
 }

package/src/themes/sap_horizon_dark/CheckBox-parameters.css

@@ -11,7 +11,7 @@
 	--_ui5_checkbox_inner_border_radius: var(--sapField_BorderCornerRadius);
 	--_ui5_checkbox_checkmark_color: var(--sapContent_Selected_ForegroundColor);
 	/* hover & active */
-	--_ui5_checkbox_hover_background: var(--sapContent_Selected_Hover_Background);
+	--_ui5_checkbox_hover_background: var(--sapField_Selector_Hover_Background);
 	--_ui5_checkbox_inner_hover_border_color: var(--sapField_Hover_BorderColor);
 	--_ui5_checkbox_inner_hover_checked_border_color: var(--sapField_Hover_BorderColor);
 	--_ui5_checkbox_inner_selected_border_color: var(--sapField_BorderColor);
@@ -21,19 +21,19 @@
 	--_ui5_checkbox_inner_readonly_border: var(--sapElement_BorderWidth)  var(--sapField_ReadOnly_BorderColor) dashed;
 	/* error state */
 	--_ui5_checkbox_inner_error_border: var(--sapField_InvalidBorderWidth) solid var(--sapField_InvalidColor);
-	--_ui5_checkbox_inner_error_background_hover: var(--sapField_Hover_Background);
+	--_ui5_checkbox_inner_error_background_hover: var(--sapField_Selector_Hover_InvalidBackground);
 	/* warning state */
 	--_ui5_checkbox_inner_warning_border:  var(--sapField_WarningBorderWidth) solid var(--sapField_WarningColor);
 	--_ui5_checkbox_inner_warning_color: var(--sapField_WarningColor);
-	--_ui5_checkbox_inner_warning_background_hover: var(--sapField_Hover_Background);
+	--_ui5_checkbox_inner_warning_background_hover: var(--sapField_Selector_Hover_WarningBackground);
 	--_ui5_checkbox_checkmark_warning_color: var(--sapField_WarningColor);
 	/* success state */
 	--_ui5_checkbox_inner_success_border: var(--sapField_SuccessBorderWidth) solid var(--sapField_SuccessColor);
-	--_ui5_checkbox_inner_success_background_hover: var(--sapField_Hover_Background);
+	--_ui5_checkbox_inner_success_background_hover: var(--sapField_Selector_Hover_SuccessBackground);
 	/* information state */
 	--_ui5_checkbox_inner_information_color: var(--sapField_InformationColor);
 	--_ui5_checkbox_inner_information_border: var(--sapField_InformationBorderWidth) solid var(--sapField_InformationColor);
-	--_ui5_checkbox_inner_information_background_hover: var(--sapField_Hover_Background);
+	--_ui5_checkbox_inner_information_background_hover: var(--sapField_Selector_Hover_InformationBackground);
 	/* disabled */
 	--_ui5_checkbox_disabled_opacity: var(--sapContent_DisabledOpacity);
 	/* focus */

package/src/themes/sap_horizon_dark/RadioButton-parameters.css

@@ -10,7 +10,7 @@
 	--_ui5_radio_button_border_radius: 0.5rem;
 	--_ui5_radio_button_label_color: var(--sapField_TextColor);
 	--_ui5_radio_button_inner_ring_radius: 27.5%;
-	--_ui5_radio_button_outer_ring_padding: 0 0.6875rem;
+	--_ui5_radio_button_outer_ring_padding: 0.6875rem;
 	--_ui5_radio_button_read_only_border_type: 4, 2;
 	--_ui5_radio_button_inner_ring_color: var(--sapContent_Selected_ForegroundColor);
 	--_ui5_radio_button_checked_warning_fill: var(--sapField_WarningColor);
@@ -21,7 +21,7 @@
 
 @container style(--ui5_content_density: compact) {
 	:host {
-		--_ui5_radio_button_outer_ring_padding: 0 0.5rem;
+		--_ui5_radio_button_outer_ring_padding: 0.5rem;
 		--_ui5_radio_button_focus_dist: 0.1875rem;
 	}
 }

package/src/themes/sap_horizon_hcb/CheckBox-parameters.css

@@ -12,7 +12,7 @@
 	--_ui5_checkbox_inner_border_radius: var(--sapField_BorderCornerRadius);
 	--_ui5_checkbox_checkmark_color: var(--sapContent_Selected_ForegroundColor);
 	/* hover & active */
-	--_ui5_checkbox_hover_background: var(--sapSelectedColor);
+	--_ui5_checkbox_hover_background: var(--sapField_Selector_Hover_Background);
 	--_ui5_checkbox_inner_hover_border_color: var(--sapField_Hover_BorderColor);
 	--_ui5_checkbox_inner_hover_checked_border_color: var(--sapField_Hover_BorderColor);
 	--_ui5_checkbox_inner_selected_border_color: var(--sapField_Hover_BorderColor);
@@ -23,19 +23,19 @@
 	--_ui5_checkbox_inner_readonly_border: var(--sapElement_BorderWidth)  var(--sapField_ReadOnly_BorderColor) solid;
 	/* error state */
 	--_ui5_checkbox_inner_error_border: var(--sapField_InvalidBorderWidth) dashed var(--sapField_InvalidColor);
-	--_ui5_checkbox_inner_error_background_hover: var(--sapField_InvalidBackground);
+	--_ui5_checkbox_inner_error_background_hover: var(--sapField_Selector_Hover_InvalidBackground);
 	/* warning state */
 	--_ui5_checkbox_inner_warning_border:  var(--sapField_WarningBorderWidth) dashed var(--sapField_WarningColor);
 	--_ui5_checkbox_inner_warning_color: var(--sapField_WarningColor);
-	--_ui5_checkbox_inner_warning_background_hover: var(--sapField_Hover_Background);
+	--_ui5_checkbox_inner_warning_background_hover: var(--sapField_Selector_Hover_WarningBackground);
 	--_ui5_checkbox_checkmark_warning_color: var(--sapField_WarningColor);
 	/* success state */
 	--_ui5_checkbox_inner_success_border: var(--sapField_SuccessBorderWidth) solid var(--sapField_SuccessColor);
-	--_ui5_checkbox_inner_success_background_hover: var(--sapField_Hover_Background);
+	--_ui5_checkbox_inner_success_background_hover: var(--sapField_Selector_Hover_SuccessBackground);
 	/* information state */
 	--_ui5_checkbox_inner_information_color: var(--sapField_InformationColor);
 	--_ui5_checkbox_inner_information_border: var(--sapField_InformationBorderWidth) dashed var(--sapField_InformationColor);
-	--_ui5_checkbox_inner_information_background_hover: var(--sapField_Hover_Background);
+	--_ui5_checkbox_inner_information_background_hover: var(--sapField_Selector_Hover_InformationBackground);
 	/* disabled */
 	--_ui5_checkbox_disabled_opacity: var(--sapContent_DisabledOpacity);
 	/* focus */

package/src/themes/sap_horizon_hcb/RadioButton-parameters.css

@@ -12,7 +12,7 @@
 	--_ui5_radio_button_inner_ring_radius: 27.5%;
 	--_ui5_radio_button_inner_ring_color: var(--sapContent_Selected_ForegroundColor);
 	--_ui5_radio_button_outer_ring_width: 2px; /* px used due to bug in Safari on zoom */
-	--_ui5_radio_button_outer_ring_padding: 0 0.6875rem;
+	--_ui5_radio_button_outer_ring_padding: 0.6875rem;
 	--_ui5_radio_button_read_only_border_width: var(--sapElement_BorderWidth);
 	--_ui5_radio_button_read_only_inner_ring_color: var(--sapField_TextColor);
 	--_ui5_radio_button_focus_dist: 0.375rem;
@@ -20,7 +20,7 @@
 
 @container style(--ui5_content_density: compact) {
 	:host {
-		--_ui5_radio_button_outer_ring_padding: 0 0.5rem;
+		--_ui5_radio_button_outer_ring_padding: 0.5rem;
 		--_ui5_radio_button_focus_dist: 0.1875rem;
 	}
 }