feat(radio): add parts support for container, mark (#20952)

core/api.txt

@@ -826,6 +826,8 @@ ion-radio,css-prop,--border-radius
 ion-radio,css-prop,--color
 ion-radio,css-prop,--color-checked
 ion-radio,css-prop,--inner-border-radius
+ion-radio,part,container
+ion-radio,part,mark
 
 ion-radio-group,none
 ion-radio-group,prop,allowEmptySelection,boolean,false,false,false

core/src/components/radio/radio.tsx

@@ -7,6 +7,9 @@ import { createColorClasses, hostContext } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ *
+ * @part container - The container for the radio mark.
+ * @part mark - The checkmark or dot used to indicate the checked state.
  */
 @Component({
   tag: 'ion-radio',
@@ -136,8 +139,8 @@ export class Radio implements ComponentInterface {
           'radio-disabled': disabled,
         }}
       >
-        <div class="radio-icon">
+        <div class="radio-icon" part="container">
-          <div class="radio-inner"/>
+          <div class="radio-inner" part="mark" />
         </div>
         <button
           type="button"

core/src/components/radio/readme.md

@@ -137,6 +137,14 @@ export const RadioExamples: React.FC = () => {
 | `ionFocus` | Emitted when the radio button has focus.   | `CustomEvent<void>` |
 
 
+## Shadow Parts
+
+| Part          | Description                                              |
+| ------------- | -------------------------------------------------------- |
+| `"container"` | The container for the radio mark.                        |
+| `"mark"`      | The checkmark or dot used to indicate the checked state. |
+
+
 ## CSS Custom Properties
 
 | Name                    | Description                              |

core/src/components/radio/test/basic/index.html

@@ -75,7 +75,7 @@
             <ion-radio id="dangerRadio" slot="end" color="danger" value="broccoli"></ion-radio>
           </ion-item>
         </ion-radio-group>
-        
+
         <ion-radio-group allow-empty-selection value="custom">
           <ion-item>
             <ion-label>Custom</ion-label>
@@ -83,6 +83,13 @@
           </ion-item>
         </ion-radio-group>
 
+        <ion-radio-group allow-empty-selection value="custom">
+          <ion-item>
+            <ion-label>Radio ::part</ion-label>
+            <ion-radio slot="end" value="custom" class="radio-part"></ion-radio>
+          </ion-item>
+        </ion-radio-group>
+
         <ion-item>
           <ion-button slot="start" onClick="toggleBoolean('grapeChecked', 'checked')" fill="outline" size="small">Checked</ion-button>
           <ion-button slot="start" onClick="toggleBoolean('grapeChecked', 'disabled')" fill="outline" size="small">Disabled</ion-button>
@@ -128,7 +135,7 @@
         <span id="standAloneCheckedSpan"></span>
       </p>
 
-      
+
       <ion-item>
         <ion-label>Checkbox / Toggle</ion-label>
         <ion-radio slot="start" id="checked"></ion-radio>
@@ -205,6 +212,24 @@
         margin-top: -20px;
       }
 
+      .radio-part::part(container) {
+        background: rgba(255, 0, 0, 0.3);
+        border-color: darkred;
+      }
+
+      .radio-part::part(mark) {
+        background: hotpink;
+      }
+
+      .radio-part.radio-checked::part(container) {
+        background: rgba(0, 255, 0, 0.3);
+        border-color: darkgreen;
+      }
+
+      .radio-part.radio-checked::part(mark) {
+        background: purple;
+      }
+
     </style>
 
   </ion-app>