chore: fix focus outline

Author: TeodorTaushanov

packages/main/src/themes/RadioButton.css

@@ -55,7 +55,8 @@
 	content: "";
 	display: var(--_ui5_radio_button_focus_outline);
 	position: absolute;
-	inset: var(--_ui5_radio_button_focus_dist);
+	inset-block: calc(-1 * var(--_ui5_radio_button_focus_dist));
+	inset-inline: calc(-1 * var(--_ui5_radio_button_focus_dist)) var(--_ui5_radio_button_focus_dist);
 	pointer-events: none;
 	border: var(--_ui5_radio_button_border_width) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	border-radius: var(--_ui5_radio_button_border_radius);
@@ -207,6 +208,7 @@
 .ui5-radio-inner {
 	display: flex;
 	align-items: center;
+	align-self: start;
 	padding-inline-end: var(--_ui5_radio_button_outer_ring_padding);
 	flex: 1;
 	pointer-events: none;
@@ -238,10 +240,6 @@
 	font-size: inherit;
 }
 
-:host([wrapping-type="None"][text]) .ui5-radio-root {
-	height: var(--_ui5_radio_button_height);
-}
-
 :host([wrapping-type="None"][text]) [ui5-label].ui5-radio-label {
 	text-overflow: ellipsis;
 	overflow: hidden;

packages/main/src/themes/base/RadioButton-parameters.css

@@ -23,7 +23,7 @@
 	--_ui5_radio_button_border_radius: 0;
 	--_ui5_radio_button_border: none;
 	--_ui5_radio_button_focus_outline: block;
-	--_ui5_radio_button_focus_dist: 0.5rem;
+	--_ui5_radio_button_focus_dist: 0.1375rem;
 	--_ui5_radio_button_color: var(--sapField_BorderColor);
 	--_ui5_radio_button_label_offset: 1px;
 	--_ui5_radio_button_label_color: var(--sapContent_LabelColor);
@@ -38,7 +38,7 @@
 @container style(--ui5_content_density: compact) {
 	:host {
 		--_ui5_radio_button_min_width: 2rem;
-		--_ui5_radio_button_focus_dist: 0.375rem;
+		--_ui5_radio_button_focus_dist: 0.125rem;
 		--_ui5_radio_button_outer_ring_padding_with_label: 0.5rem;
 	}
 }

packages/main/src/themes/base/sizes-parameters.css

@@ -122,7 +122,6 @@
 	--_ui5_textarea_margin: .25rem 0;
 
 	/* Radio Button */
-	--_ui5_radio_button_height: 2.75rem;
 	--_ui5_radio_button_label_side_padding: .6875rem;
 	--_ui5_radio_button_inner_size: 2.75rem;
 	--_ui5_radio_button_svg_size: 1.5714em;
@@ -321,7 +320,6 @@
 		--_ui5_tc_item_icon_circle_size: 2rem;
 
 		/* Radio Button */
-		--_ui5_radio_button_height: 2rem;
 		--_ui5_radio_button_label_side_padding: 0.5rem;
 		--_ui5_radio_button_inner_size: 2rem;
 		--_ui5_radio_button_svg_size: 1.1429em;

packages/main/src/themes/sap_horizon/RadioButton-parameters.css

@@ -16,12 +16,12 @@
 	--_ui5_radio_button_checked_warning_fill: var(--sapField_WarningColor);
 	--_ui5_radio_button_read_only_inner_ring_color: var(--sapField_TextColor);
 	--_ui5_radio_button_read_only_border_width: var(--sapElement_BorderWidth);
-	--_ui5_radio_button_focus_dist: 0.375rem;
+	--_ui5_radio_button_focus_dist: 0.325rem;
 }
 
 @container style(--ui5_content_density: compact) {
 	:host {
 		--_ui5_radio_button_outer_ring_padding: 0.5rem;
-		--_ui5_radio_button_focus_dist: 0.1875rem;
+		--_ui5_radio_button_focus_dist: 0.275rem;
 	}
 }

packages/main/src/themes/sap_horizon_dark/RadioButton-parameters.css

@@ -16,12 +16,12 @@
 	--_ui5_radio_button_checked_warning_fill: var(--sapField_WarningColor);
 	--_ui5_radio_button_read_only_inner_ring_color: var(--sapField_TextColor);
 	--_ui5_radio_button_read_only_border_width: var(--sapElement_BorderWidth);
-	--_ui5_radio_button_focus_dist: 0.375rem;
+	--_ui5_radio_button_focus_dist: 0.325rem;
 }
 
 @container style(--ui5_content_density: compact) {
 	:host {
 		--_ui5_radio_button_outer_ring_padding: 0.5rem;
-		--_ui5_radio_button_focus_dist: 0.1875rem;
+		--_ui5_radio_button_focus_dist: 0.275rem;
 	}
 }

packages/main/src/themes/sap_horizon_hcb/RadioButton-parameters.css

@@ -15,12 +15,12 @@
 	--_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;
+	--_ui5_radio_button_focus_dist: 0.325rem;
 }
 
 @container style(--ui5_content_density: compact) {
 	:host {
 		--_ui5_radio_button_outer_ring_padding: 0.5rem;
-		--_ui5_radio_button_focus_dist: 0.1875rem;
+		--_ui5_radio_button_focus_dist: 0.275rem;
 	}
 }

packages/main/src/themes/sap_horizon_hcw/RadioButton-parameters.css

@@ -19,12 +19,12 @@
 	--_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;
+	--_ui5_radio_button_focus_dist: 0.325rem;
 }
 
 @container style(--ui5_content_density: compact) {
 	:host {
 		--_ui5_radio_button_outer_ring_padding: 0.5rem;
-		--_ui5_radio_button_focus_dist: 0.1875rem;
+		--_ui5_radio_button_focus_dist: 0.275rem;
 	}
 }

packages/main/test/pages/RadioButton.html

@@ -8,7 +8,7 @@
 	<link rel="stylesheet" type="text/css" href="./styles/RadioButton.css">
 </head>
 
-<body class="radiobutton1auto">
+<body class="radiobutton1auto sapUiSizeCompact">
 
 	<ui5-radio-button name="simple" text="Option A"></ui5-radio-button>
 	<ui5-radio-button checked name="simple" text="Option B"></ui5-radio-button>