bug(mat-slide-toggle): M3 style overrides and focus behavior do not work consistently

[TerezIsCoding]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

The new M3 styling via including slide-toggle-overrides does not work correctly for state-overlay tokens.
:root {
@include mat.slide-toggle-overrides((
...
));
}
Also, the focus behavior seems inconsistent comparing keyboard & mouse on label to mouse on button.
(See also related ticket: #26489)

Reproduction

StackBlitz link: https://stackblitz.com/edit/g1co2sxl-wa4v2ght?file=src%2Fstyles.scss,src%2Fexample%2Fslide-toggle-configurable-example.ts
or: default Angular Material example: https://material.angular.io/components/slide-toggle/examples#slide-toggle-configurable

Steps to reproduce:

1. Change the overrides in the styles.scss in the material-ui mat-slide-toggle example or the given stackblitz example
2. Check out the behavior for mouse click on label
3. Compare to the behavior for mouse click on button
4. Compare to the behavior for interaction with tab-key

Expected Behavior

1. Color overrides: unselected-pressed-state-layer-color and selected-pressed-state-layer-color should used for active state triggered by mouse interaction on the label

2. Opacitiy overrides: hover and focus state layer opacity should be set to the values from their token overrides (unselected-hover-state-layer-opacity, selected-hover-state-layer-opacity, unselected-focus-state-layer-opacity, selected-focus-state-layer-opacity ).

3. Focus: the button should remain focused after all interactions (keyboard interaction,mouse interaction on the label, mouse interaction on the button

Actual Behavior

1. Color overrides: unselected-hover-state-layer-color and selected-hover-state-layer-color is being used for active state triggered by mouse interaction on the label

2. Opacitiy overrides: hover and focus state layer opacity are not changed by token overrides (unselected-hover-state-layer-opacity, selected-hover-state-layer-opacity, unselected-focus-state-layer-opacity, selected-focus-state-layer-opacity ). Instead a fixed value seems to be derived form a :before-:after animation.

3. Focus: the button is only focused after keyboard interaction or mouse interaction on the label, not for mouse interaction on the button (the state seems to be removed directly after the click)

Environment

• Angular: 19.2.0
• CDK/Material: 19.2.0
• Browser(s): Edge, Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[crisbeto]

As far as I can tell, there are a few things going on:

1. The opacity tokens just aren't being used which is a bug.
2. There seems to be some weird built-in browser behavior where hovering over the label that points to a button causes the button to activate its :hover styles. Here's a repro that uses only native elements: https://codepen.io/crisbeto/pen/LEExoZy
3. Most of our components only target programmatic and keyboard focus for their focus styles. The JS code that detects it can't do it properly when focus jumps from the label to the input on click which is what's going on here.

The first issue we can and should fixed.
The second one is a bit tricky and we can't do much about it, as far as I can tell.
The third issue is kinda working as expected.

[crisbeto]

Closed by #30946.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}