feat(toggle): add parts support for handle, track (#20962)

core/api.txt

@@ -1262,6 +1262,8 @@ ion-toggle,css-prop,--border-radius
 ion-toggle,css-prop,--handle-background
 ion-toggle,css-prop,--handle-background-checked
 ion-toggle,css-prop,--handle-border-radius
+ion-toggle,part,handle
+ion-toggle,part,track
 
 ion-toolbar,shadow
 ion-toolbar,prop,color,string | undefined,undefined,false,false

core/src/components/toggle/readme.md

@@ -223,6 +223,14 @@ export const ToggleExamples: React.FC = () => {
 | `ionFocus`  | Emitted when the toggle has focus.           | `CustomEvent<void>`                    |
 
 
+## Shadow Parts
+
+| Part       | Description                                                   |
+| ---------- | ------------------------------------------------------------- |
+| `"handle"` | The toggle handle, or knob, used to change the checked state. |
+| `"track"`  | The background track of the toggle.                           |
+
+
 ## CSS Custom Properties
 
 | Name                          | Description                                  |

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

@@ -33,7 +33,7 @@
 
         <ion-item>
           <ion-label>Banana</ion-label>
-          <ion-toggle slot="start" name="banana" checked></ion-toggle>
+          <ion-toggle slot="start" name="banana" checked class="toggle-part"></ion-toggle>
         </ion-item>
 
         <ion-item>
@@ -70,7 +70,7 @@
           <ion-label>Button w/ right side default icon, really long text that should ellipsis</ion-label>
           <ion-icon name="information-circle" slot="end"></ion-icon>
         </ion-item>
-        
+
         <ion-item>
           <ion-label>Custom</ion-label>
           <ion-toggle slot="start" style="--border-radius: 0px;--handle-border-radius: 0px;" checked></ion-toggle>
@@ -92,6 +92,24 @@
       </p>
     </ion-content>
 
+    <style>
+      .toggle-part.toggle-checked::part(handle) {
+        background: red;
+      }
+
+      .toggle-part.toggle-checked::part(track) {
+        background: purple;
+      }
+
+      .toggle-part::part(handle) {
+        background: green;
+      }
+
+      .toggle-part::part(track) {
+        background: hotpink;
+      }
+    </style>
+
     <script>
       function printForm(ev) {
 

core/src/components/toggle/toggle.tsx

@@ -8,6 +8,9 @@ import { createColorClasses, hostContext } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ *
+ * @part track - The background track of the toggle.
+ * @part handle - The toggle handle, or knob, used to change the checked state.
  */
 @Component({
   tag: 'ion-toggle',
@@ -200,8 +203,8 @@ export class Toggle implements ComponentInterface {
           'interactive': true
         }}
       >
-        <div class="toggle-icon">
-          <div class="toggle-inner"/>
+        <div class="toggle-icon" part="track">
+          <div class="toggle-inner" part="handle" />
         </div>
         <button
           type="button"