Polyfill CSS pseudo-classes

[atomiks]

:active

CSS :active doesn't work when popups are triggered by mousedown. This should be polyfillable so it actually does still work https://github.com/mui/base-ui/issues/1720

:hover

@media (hover: hover) to prevent "sticky" hover on touch doesn't address hybrid devices

pressed

Doesn't exist in CSS: an attribute for when a button component is pressed while handling mouse, touch, and keyboard interaction types (similar to our [data-highlighted] style hook for menu/select items) https://github.com/mui/base-ui/issues/1747. Our current [data-pressed] for some triggers style hook has a different meaning, this one is more like :active.

[oliviertassinari]

So the focus-visible polyfill https://github.com/mui/material-ui/pull/42467 was removed prematurely? Related issues:

• https://github.com/w3c/csswg-drafts/issues/5885#issuecomment-2227138661
• https://github.com/radix-ui/primitives/issues/2953#issuecomment-2497463101

[OliverJAsh]

👋 We're also running into this problem at Unsplash. Is there any workaround?

https://github.com/user-attachments/assets/e53435e8-02cb-4a23-a763-05554f28ed11

[atomiks]

@OliverJAsh opened https://github.com/mui/base-ui/pull/1846

[atomiks]

#1846 should solve most cases of the native :focus-visible CSS state appearing undesirably.

There still remains these ones:

• :active not working when the popup opens on mousedown
• :hover appearing on hybrid devices (which @media (hover: hover) doesn't address)
• A generic pressed state that works across mouse, keyboard, touch input modalities

[atomiks]

• :active -> [data-popup-open] flickers on iOS: https://ff6hgj.csb.app/
• [data-highlighted] should likely not appear when using touch input

[oliviertassinari]

@media (hover: hover)

We did a good dive on this problem in https://github.com/mui/mui-x/issues/10039 in 2023. This media selector was not implemented correctly in many platforms.