Include :popover-open in open variant (#13331)

* Include :popover-open in open variant

Co-Authored-By: Luke Warlow <lwarlow@igalia.com>

* Update changelog

* Remove accidental package.json change

* Revert playground changes

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Luke Warlow <lwarlow@igalia.com>

Author: adamwathan

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Make `rotate-x/y/z-*` utilities composable ([#13319](https://github.com/tailwindlabs/tailwindcss/pull/13319))
 - `@tailwind/vite` applies the Vite CSS plugin to transform Tailwind-generated CSS (e.g. inlining images) ([#13218](https://github.com/tailwindlabs/tailwindcss/pull/13218))
 - Add `starting` variant for `@starting-style` ([#13329](https://github.com/tailwindlabs/tailwindcss/pull/13329))
+- Target `:popover-open` in existing `open` variant ([#13331](https://github.com/tailwindlabs/tailwindcss/pull/13331))
 
 ### Fixed
 

packages/tailwindcss/src/variants.test.ts

@@ -270,15 +270,15 @@ test('target', () => {
 
 test('open', () => {
   expect(run(['open:flex', 'group-open:flex', 'peer-open:flex'])).toMatchInlineSnapshot(`
-    ".group-open\\:flex:is(:where(.group)[open] *) {
+    ".group-open\\:flex:is(:where(.group):is([open], :popover-open) *) {
       display: flex;
     }
 
-    .peer-open\\:flex:is(:where(.peer)[open] ~ *) {
+    .peer-open\\:flex:is(:where(.peer):is([open], :popover-open) ~ *) {
       display: flex;
     }
 
-    .open\\:flex[open] {
+    .open\\:flex:is([open], :popover-open) {
       display: flex;
     }"
   `)
@@ -1834,7 +1834,7 @@ test('variant order', () => {
       display: flex;
     }
 
-    .open\\:flex[open] {
+    .open\\:flex:is([open], :popover-open) {
       display: flex;
     }
 

packages/tailwindcss/src/variants.ts

@@ -292,7 +292,7 @@ export function createVariants(theme: Theme): Variants {
     ['visited', '&:visited'],
 
     ['target', '&:target'],
-    ['open', '&[open]'],
+    ['open', '&:is([open], :popover-open)'],
 
     // Forms
     ['default', '&:default'],