From 4c32664c342bdba8b21b05f1ae1de11b75055596 Mon Sep 17 00:00:00 2001
From: Lidiya Georgieva <lidiya.georgieva@sap.com>
Date: Mon, 9 Mar 2026 16:19:04 +0200
Subject: [PATCH] feat(ui5-radio-button): add parts for overstyling

JIRA: 3609
---
 packages/main/src/RadioButton.ts              |  4 ++++
 packages/main/src/RadioButtonTemplate.tsx     |  7 ++++---
 packages/main/test/pages/RadioButton.html     |  2 ++
 .../main/test/pages/styles/RadioButton.css    | 21 ++++++++++++++++++-
 4 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/packages/main/src/RadioButton.ts b/packages/main/src/RadioButton.ts
index 4df2410d4b7a..34bdb7aa25d6 100644
--- a/packages/main/src/RadioButton.ts
+++ b/packages/main/src/RadioButton.ts
@@ -68,6 +68,10 @@ 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 ring - Used to style the ring of the `ui5-radio-button`.
+ * @csspart label - Used to style the label of the `ui5-radio-button`.
+ * @csspart radio-button-inner - Used to style the inner element of the `ui5-radio-button`.
+ * @csspart svg - Used to style the svg element of the `ui5-radio-button`.
  */
 @customElement({
 	tag: "ui5-radio-button",
diff --git a/packages/main/src/RadioButtonTemplate.tsx b/packages/main/src/RadioButtonTemplate.tsx
index 40a5d018854b..cd16b1f2ccdf 100644
--- a/packages/main/src/RadioButtonTemplate.tsx
+++ b/packages/main/src/RadioButtonTemplate.tsx
@@ -5,6 +5,7 @@ import Label from "./Label.js";
 export default function RadioButtonTemplate(this: RadioButton) {
 	return (
 		<div
+			part="radio-button-inner"
 			role="radio"
 			class="ui5-radio-root"
 			aria-checked={this.checked}
@@ -19,11 +20,11 @@ export default function RadioButtonTemplate(this: RadioButton) {
 			onMouseUp={this._onmouseup}
 			onFocusOut={this._onfocusout}
 		>
-			<div class={{
+			<div part="ring" class={{
 				"ui5-radio-inner": true,
 				"ui5-radio-inner--hoverable": !this.disabled && !this.readonly && isDesktop(),
 			}}>
-				<svg class="ui5-radio-svg" focusable="false" aria-hidden="true">
+				<svg part="svg" class="ui5-radio-svg" focusable="false" aria-hidden="true">
 					<circle part="outer-ring" class="ui5-radio-svg-outer" cx="50%" cy="50%" r="50%" />
 					<circle part="inner-ring" class="ui5-radio-svg-inner" cx="50%" cy="50%" />
 				</svg>
@@ -39,7 +40,7 @@ export default function RadioButtonTemplate(this: RadioButton) {
 			</div>
 
 			{this.text &&
-				<Label id={`${this._id}-label`} class="ui5-radio-label" for={this._id} wrappingType={this.wrappingType}>{this.text}</Label>
+				<Label part="label" id={`${this._id}-label`} class="ui5-radio-label" for={this._id} wrappingType={this.wrappingType}>{this.text}</Label>
 			}
 
 			{this.hasValueState &&
diff --git a/packages/main/test/pages/RadioButton.html b/packages/main/test/pages/RadioButton.html
index 11376127dcb4..016fe9c4de32 100644
--- a/packages/main/test/pages/RadioButton.html
+++ b/packages/main/test/pages/RadioButton.html
@@ -172,6 +172,8 @@
 		<ui5-radio-button id="customRb1" checked text="Inner ring on hover"></ui5-radio-button>
 		<ui5-radio-button value-state="Negative" text="Outer ring with Negative State"></ui5-radio-button>
 		<ui5-radio-button value-state="Positive" text="Outer ring with Positive State"></ui5-radio-button>
+		<ui5-radio-button id="customRb2" checked text="No paddings"></ui5-radio-button>
+		<ui5-radio-button id="customRb3" checked></ui5-radio-button>
 	</div>
 
 	<script>
diff --git a/packages/main/test/pages/styles/RadioButton.css b/packages/main/test/pages/styles/RadioButton.css
index 1c1b5bc4e444..dcbe38a2f27b 100644
--- a/packages/main/test/pages/styles/RadioButton.css
+++ b/packages/main/test/pages/styles/RadioButton.css
@@ -34,6 +34,25 @@ div.customStyling{
 .customStyling ui5-radio-button[value-state="Negative"]::part(outer-ring) {
     stroke: rgb(212 56 247);
 }
+
 .customStyling ui5-radio-button[value-state="Positive"]::part(outer-ring) {
     stroke: rgb(12 223 147);
-}
\ No newline at end of file
+}
+
+.customStyling #customRb2::part(ring),
+.customStyling #customRb2::part(label),
+.customStyling #customRb3::part(ring),
+.customStyling #customRb3::part(label) {
+    padding: 0;
+    max-height: 22px;
+}
+
+.customStyling #customRb2::part(radio-button-inner)::before,
+.customStyling #customRb3::part(radio-button-inner)::before {
+    inset: 0;
+}
+
+.customStyling #customRb2::part(svg) {
+    width: 16px;
+    height: 16px;
+}