nested _groupHover is not working as expected

[omarkhatibgg]

Description

Hey,

First of all and to be honest, I'm not sure this is a bug but I will open the issue to see if this expected to work or not.

so I have a button styles with cva and the buttons has slots such as __stateLayer to maintain the background.

now what I'm trying to do is to set the opacity on groupHover to a certain value.

I see the css is generated but for some reason it's not working at all

here is the code for the cva function:

export const buttonStyle = cva({
  base: {
    position: 'relative',
    '& :is(.__stateLayer)': {
      position: 'absolute',
      inset: '0',
    },

    '& .__stateLayer': {
      opacity: {
        base: '0',
        // _hover: '0.8',
        _groupHover: '0.8',
        _groupFocusVisible: '0.90',
        _groupActive: '0.95',
      },
      bg: 'transparent',
    },
  },
  variants: {
    variant: {
      filled: {
        bgColor: 'primary',
        color: 'on.primary',
      },
      outline: {
        color: 'primary',

        '& .__stateLayer': {
          bg: 'primary',
        },
      },
    },
  },
  defaultVariants: {
    variant: 'outline',
  },
});

However setting _hover directly and then the selector works like this:

    _hover: {
      '& .__stateLayer': {
        opacity: '0.8',
      },
    },

or setting _groupHover on the span it self also works

  <styled.span
        className='__stateLayer'
        // THIS ALSO WORKS
        _groupHover={{
          opacity: '0.8',
        }}
      />

So would you say it's a bug or I'm doing some wrong inside my code?

one more general question, how would you deal with slots or parts? multiple cva functions? or the same as what I did above?

Link to Reproduction

https://codesandbox.io/p/github/omarkhatibco/pandacss-test/main?file=%2Fsrc%2Fbutton%2FButton.tsx%3A1%2C1&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522panelType%2522%253A%2522TABS%2522%252C%2522id%2522%253A%2522clj3g2y4k000b3b6nca8rhglx%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522panelType%2522%253A%2522TABS%2522%252C%2522id%2522%253A%2522clj3g2y4k000d3b6npw8t91vd%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clj3g2y4k000b3b6nca8rhglx%2522%253A%257B%2522id%2522%253A%2522clj3g2y4k000b3b6nca8rhglx%2522%252C%2522activeTabId%2522%253A%2522cljeeul41014m3b6nlkrxtn4w%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clj3g2y4k000a3b6ne53qyvb8%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Ftsconfig.node.json%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252FApp.tsx%2522%252C%2522id%2522%253A%2522clj68o72000613b6oi5qawc4e%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clj7ma6l000603b6nvsblxl9s%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clj7ma6u7005cfwgn8ts8gj5d%2522%257D%252C%257B%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fstyled-system%252Frecipes%252Fbutton-recipe.mjs%2522%252C%2522id%2522%253A%2522cljata9m400gc3b6n26dfc20h%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Fbutton%252FButton.tsx%2522%252C%2522id%2522%253A%2522cljeeul41014m3b6nlkrxtn4w%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%257D%252C%2522clj3g2y4k000d3b6npw8t91vd%2522%253A%257B%2522id%2522%253A%2522clj3g2y4k000d3b6npw8t91vd%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522id%2522%253A%2522clj3g527g00h73b6nc0l440p1%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5173%252C%2522id%2522%253A%2522cljeev5l901lj3b6nnne1c29r%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522activeTabId%2522%253A%2522cljeev5l901lj3b6nnne1c29r%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Steps to reproduce

Check button component

JS Framework

React TS

Panda CSS Version

0.5.0

Browser

Latest

Operating System

• macOS
• Windows
• Linux

Additional Information

No response