Angular Material Radio button - Ripple effect persists until clicking away.

### Which @angular/* package(s) are the source of the bug?

Don't known / other

### Is this a regression?

Yes

### Description

Clicking on a radio button now persists the ripple effect. This issue seems to have appeared since Angular 11 and still exists in Angular 12. This bug can be seen in angular material documentation.

Angular 10. No persistent ripple.
https://v10.material.angular.io/components/radio/overview

Angular 11. Persistent ripple issue which clears after clicking somewhere on the screen
https://v11.material.angular.io/components/radio/overview

Although not perfect I've added the following css to hide the bug as a workaround.

`
.mat-radio-button:not(.mat-radio-disabled).cdk-program-focused .mat-radio-persistent-ripple {
opacity: 0;
}
`

I couldn't find a ticket regarding this issue so thought it's worth raising one.

### Please provide a link to a minimal reproduction of the bug

https://v11.material.angular.io/components/radio/overview

### Please provide the exception or error you saw

_No response_

### Please provide the environment you discovered this bug in

_No response_

### Anything else?

_No response_

Start with the Angular Material radio examples linked in the issue and compare the Angular 10 and Angular 11 behavior to isolate the regression. Reproduce the persistent ripple after selecting a radio button, then verify that it clears without requiring a click elsewhere, including on the documentation example.

Written by the indexing model from the issue text.