Add :popover-open variant

Author: lukewarlow

Diff for: CHANGELOG.md

@@ -15,6 +15,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Sort arbitrary properties alphabetically across multiple class lists ([#12911](https://github.com/tailwindlabs/tailwindcss/pull/12911))
 - Add `mix-blend-plus-darker` utility ([#12923](https://github.com/tailwindlabs/tailwindcss/pull/12923))
 
+### Added
+
+- Add `:popover-open` variant ([#12148](https://github.com/tailwindlabs/tailwindcss/pull/12148))
+
 ## [3.4.1] - 2024-01-05
 
 ### Fixed

Diff for: src/corePlugins.js

@@ -111,6 +111,7 @@ export let variantPlugins = {
       ],
       'target',
       ['open', '&[open]'],
+      'popover-open',
 
       // Forms
       'default',

Diff for: tests/variants.oxide.test.css

@@ -145,6 +145,9 @@
 .open\:bg-red-200[open] {
   background-color: #fecaca;
 }
+.popover-open\:bg-red-200:popover-open {
+  background-color: #fecaca;
+}
 .default\:shadow-md:default,
 .checked\:shadow-md:checked,
 .indeterminate\:shadow-md:indeterminate,
@@ -184,6 +187,9 @@
 .open\:hover\:bg-red-200:hover[open] {
   background-color: #fecaca;
 }
+.popover-open\:hover\:bg-red-200:hover:popover-open {
+  background-color: #fecaca;
+}
 .focus\:shadow-md:focus,
 .focus\:hover\:shadow-md:hover:focus,
 .focus-visible\:shadow-md:focus-visible,
@@ -208,6 +214,9 @@
 .group[open] .group-open\:bg-red-200 {
   background-color: #fecaca;
 }
+.group:popover-open .group-popover-open\:bg-red-200 {
+  background-color: #fecaca;
+}
 .group:default .group-default\:shadow-md,
 .group:checked .group-checked\:shadow-md,
 .group:indeterminate .group-indeterminate\:shadow-md,
@@ -267,6 +276,9 @@
 .peer[open] ~ .peer-open\:bg-red-200 {
   background-color: #fecaca;
 }
+.peer:popover-open ~ .peer-popover-open\:bg-red-200 {
+  background-color: #fecaca;
+}
 .peer:default ~ .peer-default\:shadow-md,
 .peer:checked ~ .peer-checked\:shadow-md,
 .peer:indeterminate ~ .peer-indeterminate\:shadow-md,

Diff for: tests/variants.test.css

@@ -208,6 +208,10 @@
   --tw-bg-opacity: 1;
   background-color: rgb(254 202 202 / var(--tw-bg-opacity));
 }
+.popover-open\:bg-red-200:popover-open {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+}
 .default\:shadow-md:default,
 .checked\:shadow-md:checked,
 .indeterminate\:shadow-md:indeterminate,
@@ -249,6 +253,10 @@
   --tw-bg-opacity: 1;
   background-color: rgb(254 202 202 / var(--tw-bg-opacity));
 }
+.popover-open\:hover\:bg-red-200:hover:popover-open {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+}
 .focus\:shadow-md:focus,
 .focus\:hover\:shadow-md:hover:focus,
 .focus-visible\:shadow-md:focus-visible,
@@ -274,6 +282,10 @@
   --tw-bg-opacity: 1;
   background-color: rgb(254 202 202 / var(--tw-bg-opacity));
 }
+.group:popover-open .group-popover-open\:bg-red-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+}
 .group:default .group-default\:shadow-md,
 .group:checked .group-checked\:shadow-md,
 .group:indeterminate .group-indeterminate\:shadow-md,
@@ -335,6 +347,10 @@
   --tw-bg-opacity: 1;
   background-color: rgb(254 202 202 / var(--tw-bg-opacity));
 }
+.peer:popover-open ~ .peer-popover-open\:bg-red-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+}
 .peer:default ~ .peer-default\:shadow-md,
 .peer:checked ~ .peer-checked\:shadow-md,
 .peer:indeterminate ~ .peer-indeterminate\:shadow-md,

Diff for: tests/variants.test.html

@@ -14,6 +14,7 @@
 <div class="active:shadow-md"></div>
 <div class="target:shadow-md"></div>
 <div class="open:bg-red-200"></div>
+<div class="popover-open:bg-red-200"></div>
 <div class="visited:shadow-md"></div>
 <div class="default:shadow-md"></div>
 <div class="checked:shadow-md"></div>
@@ -46,6 +47,7 @@
 
 <!-- Group variants -->
 <div class="group-open:bg-red-200"></div>
+<div class="group-popover-open:bg-red-200"></div>
 <div class="group-first:shadow-md"></div>
 <div class="group-last:shadow-md"></div>
 <div class="group-only:shadow-md"></div>
@@ -79,6 +81,7 @@
 
 <!-- Peer variants -->
 <div class="peer-open:bg-red-200"></div>
+<div class="peer-popover-open:bg-red-200"></div>
 <div class="peer-first:shadow-md"></div>
 <div class="peer-last:shadow-md"></div>
 <div class="peer-only:shadow-md"></div>
@@ -146,6 +149,7 @@
 
 <!-- Stacked variants -->
 <div class="open:hover:bg-red-200"></div>
+<div class="popover-open:hover:bg-red-200"></div>
 <div class="file:hover:bg-blue-600"></div>
 <div class="focus:hover:shadow-md"></div>
 <div class="sm:active:shadow-md"></div>