fix(slide-toggle): focus ripple not hiding after click/touch

Similarly to the checkbox (angular#13295), the persistent ripple should only show up for focus if the slide-toggle has been focused through keyboard.

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1w3KOMo81gakKP7JC6yNogxCt-CadYQvx%2Fslidercontrols-1a-v02.mp4

Author: devversion

src/lib/slide-toggle/slide-toggle.scss

@@ -204,7 +204,10 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
     opacity: 0.04;
   }
 
-  .mat-slide-toggle.cdk-focused & {
+  // As per specifications, the focus ripple should only show up if the slide-toggle has
+  // been focused through keyboard. We cannot account for `cdk-program-focused` because clicking
+  // on the label causes the focus origin to be `program` because the focus has been redirected.
+  .mat-slide-toggle.cdk-keyboard-focused & {
     opacity: 0.12;
   }