Ripple component has inherent hover effect but does not have transition capabilities

[emilnymann]

What is affected?

Component

Description

When using the Ripple component, it has an inherent hover effect. That is fine, since it already follows the specs and the color can be changed with CSS variables. However, it does not have a transition on the hover effect, and it's not possible to style it with the hover pseudo-selector, since it does not seem to use the normal hover state for its hover effect. I would expect it to either use a transition according to the motion specs and guidelines, or omit the inherent hover effect so I can implement it on its container myself. It does not have a focus effect at all, so I'm a little confused why a hover effect was included but a focus effect was not.

Reproduction

Styling a hover effect with a transition on the anchor tag or the ripple component both result in two hover effects overlapping eachother. It's not possible to simply add a transition to the ripple component or its children in the shadow root. Lit Playground

Workaround

I have not found a suitable workaround.

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

1.5.0

Browser/OS/Node environment

Browser: Firefox 126.0.1 OS and DE: Arch (Linux 6.9.3), Gnome DE 46.2 (Mutter/Wayland, RTX 3070, proprietary driver 550.78) Node: 22.2.0 NPM: 10.7.0