feat(ui5-radio-button): expose new Css shadow parts (#8347)

* feat(ui5-radio-button): expose new Css shadow parts

We received the following requests for customization of certain parts of the ui5-radio-button:
- inner ring color on hover: can be styled via the new "inner-ring" Css shadow part.
- outer ring Error and Success state colors: can be styled via the new "outer-ring" Css shadow part.

Part of #8105

packages/main/src/RadioButton.hbs

@@ -14,8 +14,8 @@
 >
 	<div class='ui5-radio-inner {{classes.inner}}'>
 		<svg class="ui5-radio-svg" focusable="false" aria-hidden="true">
-			<circle class="ui5-radio-svg-outer" cx="50%" cy="50%" r="50%" />
-			<circle class="ui5-radio-svg-inner" cx="50%" cy="50%" />
+			<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>
 		<input type='radio' ?required="{{required}}" ?checked="{{checked}}" ?readonly="{{readonly}}" ?disabled="{{effectiveAriaDisabled}}" name="{{name}}"  data-sap-no-tab-ref/>
 	</div>

packages/main/src/RadioButton.ts

@@ -71,6 +71,8 @@ let activeRadio: RadioButton;
  * @constructor
  * @extends UI5Element
  * @public
+ * @csspart outer-ring - Used to style the outer ring of the <code>ui5-radio-button</code>.
+ * @csspart inner-ring - Used to style the inner ring of the <code>ui5-radio-button</code>.
  */
 @customElement({
 	tag: "ui5-radio-button",

packages/main/test/pages/RadioButton.html

@@ -162,6 +162,13 @@
 		<input type="submit">
 	</form>
 
+	<ui5-title level="H2">Custom styling with css parts</ui5-title>
+	<div class="customStyling">
+		<ui5-radio-button id="customRb1" checked text="Inner ring on hover"></ui5-radio-button>
+		<ui5-radio-button value-state="Error" text="Outer ring with Error State"></ui5-radio-button>
+		<ui5-radio-button value-state="Success" text="Outer ring with Success State"></ui5-radio-button>
+	</div>
+
 	<script>
 		var counter = 0;
 		var groupEventCounter = 0;

packages/main/test/pages/styles/RadioButton.css

@@ -22,3 +22,18 @@ div {
 .radiobutton2auto {
     width: 300px
 }
+
+div.customStyling{
+    width: 100%;
+}
+
+.customStyling #customRb1:hover::part(inner-ring) {
+    fill: #20b7d5;
+}
+
+.customStyling ui5-radio-button[value-state="Error"]::part(outer-ring) {
+    stroke: rgb(212 56 247);
+}
+.customStyling ui5-radio-button[value-state="Success"]::part(outer-ring) {
+    stroke: rgb(12 223 147);
+}