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

Nobody has claimed this yet.

### 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](https://lit.dev/playground/#project=W3sibmFtZSI6Im1hdGVyaWFsLWltcG9ydHMuanMiLCJjb250ZW50IjoiaW1wb3J0IFwiQG1hdGVyaWFsL3dlYi9idXR0b24vb3V0bGluZWQtYnV0dG9uLmpzXCI7In0seyJuYW1lIjoiaW5kZXguaHRtbCIsImNvbnRlbnQiOiI8IURPQ1RZUEUgaHRtbD5cbjxzY3JpcHQgdHlwZT1cIm1vZHVsZVwiIHNyYz1cIi4vbWF0ZXJpYWwtaW1wb3J0cy5qc1wiPjwvc2NyaXB0PlxuXG48YSBocmVmPVwiI1wiPlxuICA8bWQtcmlwcGxlPjwvbWQtcmlwcGxlPlxuICA8c3Bhbj5BbmNob3IgYnV0dG9uPC9zcGFuPlxuPC9hPlxuXG48c3R5bGU-XG4gIGEge1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBwYWRkaW5nOiAxNXB4O1xuICAgIGJvcmRlci1yYWRpdXM6IDEwMHB4O1xuICAgIGJhY2tncm91bmQtY29sb3I6IGxpZ2h0Z3JleTtcbiAgICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yIDJzO1xuICB9XG4gIFxuICAvKiBzdHlsaW5nIG9uIHRoZSByaXBwbGUgY29tcG9uZW50IGRpcmVjdGx5IGRvZXMgdGhlIHNhbWUsIG92ZXJsYXlpbmcgaG92ZXIgZWZmZWN0ICovXG4gIGE6aG92ZXIge1xuICAgIGJhY2tncm91bmQtY29sb3I6IGdyZXk7XG4gIH1cbjwvc3R5bGU-In0seyJuYW1lIjoicGFja2FnZS5qc29uIiwiY29udGVudCI6IntcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwibGl0XCI6IFwiXjIuMC4wXCIsXG4gICAgXCJAbGl0L3JlYWN0aXZlLWVsZW1lbnRcIjogXCJeMS4wLjBcIixcbiAgICBcImxpdC1lbGVtZW50XCI6IFwiXjMuMC4wXCIsXG4gICAgXCJsaXQtaHRtbFwiOiBcIl4yLjAuMFwiXG4gIH1cbn0iLCJoaWRkZW4iOnRydWV9XQ)

### 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

Start with the linked Lit Playground reproduction and the Ripple component implementation. Compare the component's inherent hover behavior with the anchor's transition and review the Material motion and focus guidance mentioned in the report. Done means the agreed hover behavior no longer creates overlapping effects and the resulting interaction is verified.

Written by the indexing model from the issue text.