chore: add root part

TeodorTaushanov · TeodorTaushanov · commit 9e8db6adb5af · 2026-03-27T16:08:56.000+02:00
diff --git a/packages/main/src/RadioButton.ts b/packages/main/src/RadioButton.ts
@@ -68,6 +68,7 @@ let activeRadio: RadioButton;
  * @public
  * @csspart outer-ring - Used to style the outer ring of the `ui5-radio-button`.
  * @csspart inner-ring - Used to style the inner ring of the `ui5-radio-button`.
+ * @csspart root - Used to style the root DOM element of the component.
  */
 @customElement({
 	tag: "ui5-radio-button",
diff --git a/packages/main/src/RadioButtonTemplate.tsx b/packages/main/src/RadioButtonTemplate.tsx
@@ -7,6 +7,7 @@ export default function RadioButtonTemplate(this: RadioButton) {
 		<div
 			role="radio"
 			class="ui5-radio-root"
+			part="root"
 			aria-checked={this.checked}
 			aria-disabled={this.effectiveAriaDisabled}
 			aria-describedby={this.effectiveAriaDescribedBy}
diff --git a/packages/main/test/pages/RadioButton.html b/packages/main/test/pages/RadioButton.html
@@ -8,7 +8,7 @@
 	<link rel="stylesheet" type="text/css" href="./styles/RadioButton.css">
 </head>
 
-<body class="radiobutton1auto sapUiSizeCompact">
+<body class="radiobutton1auto">
 
 	<ui5-radio-button name="simple" text="Option A"></ui5-radio-button>
 	<ui5-radio-button checked name="simple" text="Option B"></ui5-radio-button>
@@ -18,10 +18,7 @@
 	<div aria-labelledby="radioGroupTitle1" role="radiogroup" class="radio-section">
 		<ui5-title id="radioGroupTitle1">Group1 - None pre-selection</ui5-title>
 		<ui5-radio-button id="testRbtn" text="N/A" disabled name="test"></ui5-radio-button>
-		<ui5-radio-button
-			id="testRbtn1"
-			text="Male"
-			name="test"></ui5-radio-button>
+		<ui5-radio-button id="testRbtn1" text="Male" name="test"></ui5-radio-button>
 		<ui5-radio-button id="testRbtn2" text="Female" name="test"></ui5-radio-button>
 	</div>
 
@@ -177,6 +174,15 @@
 		<ui5-radio-button value-state="Positive" text="Outer ring with Positive State"></ui5-radio-button>
 	</div>
 
+	<ui5-title level="H2">Custom font and focus outline</ui5-title>
+	<div>
+		<ui5-radio-button class="customizedRB" text="Item 1"></ui5-radio-button>
+		<br>
+		<ui5-radio-button class="customizedRB" text="Item 2"></ui5-radio-button>
+		<br>
+		<ui5-radio-button class="customizedRB" text="Item 3"></ui5-radio-button>
+	</div>
+
 	<script>
 		var counter = 0;
 		var groupEventCounter = 0;
diff --git a/packages/main/test/pages/styles/RadioButton.css b/packages/main/test/pages/styles/RadioButton.css
@@ -36,4 +36,14 @@ div.customStyling{
 }
 .customStyling ui5-radio-button[value-state="Positive"]::part(outer-ring) {
     stroke: rgb(12 223 147);
+}
+
+.customizedRB::part(root):focus::before,
+.customizedRB::part(root):focus-visible::before {
+	inset: -2px;
+}
+
+.customizedRB {
+	padding: 3px;
+	font-size: 30px
 }
