Include :popover-open in open variant

[adamwathan]

Inspired by #12148.

This PR extends the existing open variant to target :popover-open as well as the [open] attribute.

This was suggested by @una that I thought was really clever because there's no situation where you actually need to differentiate between these states on the same element (dialogs use [open], popovers use :popover-open, nothing uses both) and it keeps the name nice and short.

Since :is accepts a forgiving selector list, this is safe to do without worrying about browser support for :popover-open impacting people who are using this for dialogs.

If someone ever needed an escape hatch here where they really specifically only wanted to target :popover-open or [open], they can always use an arbitrary variant:

<div class="[&:popover-open]:opacity-100">

[thecrypticace]

Forgiving selector lists are such a good feature 💯

[lukewarlow]

technically speaking a dialog element can be both [open] and :popover-open just not at once. (<dialog open>) but yeah I agree in practice combining them all is almost definitely fine.

[adamwathan]

@lukewarlow Any chance you can concoct a demo of something like that that I can play with? I think I understand but want to make sure 😄

[lukewarlow]

https://jsfiddle.net/kvc7t8a1/17/ - this should give you a rough demonstration of what I mean. Calling .show() or .showModal() on a dialog adds the open attribute, but if you close it (which removes that attr) you can also called showPopover() on it which then matches :popover-open instead.

[adamwathan]

@lukewarlow Thank you! Also TIL about :modal.