WCAG 2.1 contrast issue for Google/Angular Material Design

I'm relatively new to accessibility compliance, but my research has found a confusing anomaly: The Angular Material buttons, links, etc are apparently WCAG compliant, yet do not seem to have the required focus state contrast to pass. So I'm a little perplexed.

I'm talking specifically about the change in color when (for example) a button receives focus. From what I can tell from the WCAG it should have at least a 3:1 contrast ratio, but Material design elements are nowhere close to that.

For reference, here are some links to the Angular Material design: https://material.angular.io/components/button/examples https://material.io/design/interaction/states.html#anatomy

Thanks in advance for the help.