feat: update groupInvalid selector for better invalid state handling (#3166)

feat: update groupInvalid selector according to other group selector implementations

Co-authored-by: Javier Maestre <[email protected]>

Author: jmaestree

.changeset/long-pandas-press.md

@@ -0,0 +1,6 @@
+---
+'@pandacss/preset-base': minor
+'@pandacss/studio': minor
+---
+
+update groupInvalid selector according to other group selector implementations

packages/preset-base/src/conditions.ts

@@ -56,7 +56,7 @@ export const conditions = {
   groupDisabled: '.group:is(:disabled, [disabled], [data-disabled]) &',
   groupChecked: '.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &',
   groupExpanded: '.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &',
-  groupInvalid: '.group:invalid &',
+  groupInvalid: '.group:is(:invalid, [data-invalid]) &',
 
   indeterminate: '&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])',
   required: '&:is(:required, [data-required], [aria-required=true])',

packages/studio/styled-system/types/conditions.d.ts

@@ -106,7 +106,7 @@ export interface Conditions {
 	"_groupChecked": string
 	/** `.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &` */
 	"_groupExpanded": string
-	/** `.group:invalid &` */
+	/** `.group:is(:invalid, [data-invalid]) &` */
 	"_groupInvalid": string
 	/** `&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])` */
 	"_indeterminate": string

website/pages/docs/concepts/conditional-styles.md

@@ -568,7 +568,7 @@ Here's a list of all the condition shortcuts you can use in Panda:
 | \_groupDisabled        | `.group:is(:disabled, [disabled], [data-disabled]) &`              |
 | \_groupChecked         | `.group:is(:checked, [data-checked], [aria-checked=true]) &`       |
 | \_groupExpanded        | `.group:is([aria-expanded=true], [data-expanded]) &`               |
-| \_groupInvalid         | `.group:invalid &`                                                 |
+| \_groupInvalid         | `.group:is(:invalid, [data-invalid]) &`                                                 |
 | \_indeterminate        | `&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed])` |
 | \_required             | `&:is(:required, [data-required], [aria-required=true])`           |
 | \_valid                | `&:is(:valid, [data-valid])`                                       |