feat: add new conditions

.changeset/long-feet-rest.md

@@ -0,0 +1,22 @@
+---
+'@pandacss/preset-base': minor
+---
+
+Add support for new conditions
+
+- `current` -> `&:is([aria-current=true], [data-current])`
+- `today` -> `&[data-today]`
+- `unavailable` -> `&[data-unavailable]`
+- `rangeStart` -> `&[data-range-start]`
+- `rangeEnd` -> `&[data-range-end]`
+- `now` -> `&[data-now]`
+- `topmost` -> `&[data-topmost]`
+- `icon` -> `& :where(svg)`
+- `complete` -> `&[data-complete]`
+- `incomplete` -> `&[data-incomplete]`
+- `dragging` -> `&[data-dragging]`
+- `grabbed` -> `&[data-grabbed]`
+- `underValue` -> `&[data-state=under-value]`
+- `overValue` -> `&[data-state=over-value]`
+- `atValue` -> `&[data-state=at-value]`
+- `hidden` -> `&:is([hidden], [data-hidden])`

packages/preset-base/src/conditions.ts

@@ -14,6 +14,9 @@ export const conditions = {
   enabled: '&:enabled',
   expanded: '&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])',
   highlighted: '&[data-highlighted]',
+  complete: '&[data-complete]',
+  incomplete: '&[data-incomplete]',
+  dragging: '&[data-dragging]',
 
   before: '&::before',
   after: '&::after',
@@ -60,22 +63,34 @@ export const conditions = {
   valid: '&:is(:valid, [data-valid])',
   invalid: '&:is(:invalid, [data-invalid])',
   autofill: '&:autofill',
-  inRange: '&:in-range',
-  outOfRange: '&:out-of-range',
+  inRange: '&:is(:in-range, [data-in-range])',
+  outOfRange: '&:is(:out-of-range, [data-outside-range])',
   placeholder: '&::placeholder, &[data-placeholder]',
   placeholderShown: '&:is(:placeholder-shown, [data-placeholder-shown])',
   pressed: '&:is([aria-pressed=true], [data-pressed])',
   selected: '&:is([aria-selected=true], [data-selected])',
+  grabbed: '&:is([aria-grabbed=true], [data-grabbed])',
+  underValue: '&[data-state=under-value]',
+  overValue: '&[data-state=over-value]',
+  atValue: '&[data-state=at-value]',
 
   default: '&:default',
   optional: '&:optional',
   open: '&:is([open], [data-open], [data-state="open"])',
   closed: '&:is([closed], [data-closed], [data-state="closed"])',
-  fullscreen: '&:fullscreen',
+  fullscreen: '&is(:fullscreen, [data-fullscreen])',
   loading: '&:is([data-loading], [aria-busy=true])',
+  hidden: '&:is([hidden], [data-hidden])',
 
+  current: '&:is([aria-current=true], [data-current])',
   currentPage: '&[aria-current=page]',
   currentStep: '&[aria-current=step]',
+  today: '&[data-today]',
+  unavailable: '&[data-unavailable]',
+  rangeStart: '&[data-range-start]',
+  rangeEnd: '&[data-range-end]',
+  now: '&[data-now]',
+  topmost: '&[data-topmost]',
 
   motionReduce: '@media (prefers-reduced-motion: reduce)',
   motionSafe: '@media (prefers-reduced-motion: no-preference)',
@@ -102,5 +117,6 @@ export const conditions = {
   horizontal: '&[data-orientation=horizontal]',
   vertical: '&[data-orientation=vertical]',
 
+  icon: '& :where(svg)',
   starting: '@starting-style',
 }

packages/studio/styled-system/css/conditions.mjs

@@ -1,6 +1,6 @@
 import { withoutSpace } from '../helpers.mjs';
 
-const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_default,_optional,_open,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_starting,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,base"
+const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,base"
 const conditions = new Set(conditionsStr.split(','))
 
 const conditionRegex = /^@|&|&$/