Update role group

Author: owjs3901

.changepacks/changepack_log_wyLtroNWIgdyfCWH3mfY.json

@@ -0,0 +1 @@
+{"changes":{"bindings/devup-ui-wasm/package.json":"Patch","packages/components/package.json":"Patch","packages/react/package.json":"Patch","packages/vite-plugin/package.json":"Patch","packages/next-plugin/package.json":"Patch","packages/webpack-plugin/package.json":"Patch","packages/rsbuild-plugin/package.json":"Patch","packages/bun-plugin/package.json":"Patch","packages/plugin-utils/package.json":"Patch"},"note":"Migrate group selector to data-group attribute. The compiler now emits a single :is([role=group],[data-group]):<pseudo> & selector for _groupHover/_groupFocus/_groupActive/_groupDisabled and the Tailwind group-* variants, so existing role=\"group\" markup keeps working alongside the new data-group form. role=\"group\" matching is deprecated and will be removed in v2 — migrate to data-group. The bundled Toggle component now uses data-group.","date":"2026-05-25T00:00:00.000000000Z"}

.gitignore

@@ -22,3 +22,4 @@ test-results
 playwright-report
 .omc
 .playwright-mcp
+.omo

SKILL.md

@@ -180,14 +180,22 @@ All CSS pseudo-classes and pseudo-elements from `csstype` are supported with `_c
 
 ### Group Selectors
 
-Style children based on parent state:
+Mark a parent with the `data-group` attribute, then children can react to that parent's state:
 
 ```tsx
-<Box _groupHover={{ color: "blue" }} />
-<Box _groupFocus={{ outline: "2px solid" }} />
-<Box _groupActive={{ bg: "darkblue" }} />
+<Box data-group>
+  <Text _groupHover={{ color: "blue" }}>Changes when parent hovered</Text>
+  <Box _groupFocus={{ outline: "2px solid" }} />
+  <Box _groupActive={{ bg: "darkblue" }} />
+</Box>
 ```
 
+Available: `_groupHover`, `_groupFocus`, `_groupActive`, `_groupDisabled`.
+
+> The legacy `role="group"` parent marker is still matched for backward
+> compatibility but will be removed in v2. Use `data-group` for new code so
+> `role="group"` stays reserved for genuine ARIA grouping semantics.
+
 ### Theme Selectors
 
 ```tsx

apps/landing/src/app/(detail)/docs/RightIndex.tsx

@@ -19,10 +19,10 @@ function IndexMenu({
     <Flex
       alignItems="center"
       cursor="pointer"
+      data-group
       gap="10px"
       onClick={onClick}
       p={sub ? '4px 10px 4px 30px' : '4px 10px'}
-      role="group"
     >
       {selected && <Box bg="$primary" borderRadius="50%" boxSize="6px" />}
       <Text
@@ -116,8 +116,8 @@ export function RightIndex() {
             textDecorationColor: '$text',
           },
         })}
+        data-group
         href={editUrl}
-        role="group"
         target="_blank"
       >
         <Flex gap="4px">

apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx

@@ -20,10 +20,10 @@ Group selectors allow child elements to respond to interactions on a parent elem
 
 ## Basic Usage
 
-Add `role="group"` to a parent element, then use `_groupHover`, `_groupFocus`, or `_groupActive` on children:
+Add the `data-group` attribute to a parent element, then use `_groupHover`, `_groupFocus`, or `_groupActive` on children:
 
 ```tsx
-<Box bg="$background" borderRadius="8px" p={4} role="group">
+<Box bg="$background" borderRadius="8px" data-group p={4}>
   <Text _groupHover={{ color: '$primary' }}>
     This text changes color when parent is hovered
   </Text>
@@ -33,6 +33,13 @@ Add `role="group"` to a parent element, then use `_groupHover`, `_groupFocus`, o
 </Box>
 ```
 
+> **Migrating from `role="group"`**: previous versions used `role="group"` to mark
+> group parents. Both forms are supported today, but `role="group"` carries ARIA
+> semantics that should be reserved for actual semantic groups (e.g. a `<fieldset>`
+> replacement), not for styling hooks. Prefer `data-group` going forward. The
+> `role="group"` form will be removed in v2 — see the
+> [CHANGELOG](https://github.com/dev-five-git/devup-ui/blob/main/CHANGELOG.md).
+
 ## Available Group Selectors
 
 <Table>
@@ -48,23 +55,23 @@ Add `role="group"` to a parent element, then use `_groupHover`, `_groupFocus`, o
         <code>_groupHover</code>
       </TableCell>
       <TableCell>
-        Parent with <code>role=&quot;group&quot;</code> is hovered
+        Parent with <code>data-group</code> is hovered
       </TableCell>
     </TableRow>
     <TableRow>
       <TableCell>
         <code>_groupFocus</code>
       </TableCell>
       <TableCell>
-        Parent with <code>role=&quot;group&quot;</code> is focused
+        Parent with <code>data-group</code> is focused
       </TableCell>
     </TableRow>
     <TableRow>
       <TableCell>
         <code>_groupActive</code>
       </TableCell>
       <TableCell>
-        Parent with <code>role=&quot;group&quot;</code> is active (pressed)
+        Parent with <code>data-group</code> is active (pressed)
       </TableCell>
     </TableRow>
     <TableRow>
@@ -85,8 +92,8 @@ Add `role="group"` to a parent element, then use `_groupHover`, `_groupFocus`, o
   borderRadius="8px"
   boxShadow="0 1px 3px rgba(0,0,0,0.1)"
   cursor="pointer"
+  data-group
   p={4}
-  role="group"
 >
   <Box
     bg="$backgroundMuted"
@@ -131,8 +138,8 @@ Add `role="group"` to a parent element, then use `_groupHover`, `_groupFocus`, o
       _hover={{ bg: '$backgroundMuted' }}
       as="li"
       borderBottom="1px solid $border"
+      data-group
       p={3}
-      role="group"
     >
       <Flex align="center" justify="space-between">
         <Text _groupHover={{ color: '$primary' }}>{item.title}</Text>
@@ -149,12 +156,7 @@ Add `role="group"` to a parent element, then use `_groupHover`, `_groupFocus`, o
 
 ```tsx
 <Box as="nav">
-  <Box
-    _hover={{ bg: '$backgroundMuted' }}
-    borderRadius="4px"
-    p={2}
-    role="group"
-  >
+  <Box _hover={{ bg: '$backgroundMuted' }} borderRadius="4px" data-group p={2}>
     <Flex align="center" gap={2}>
       <Box
         _groupHover={{ bg: '$primary' }}
@@ -177,7 +179,7 @@ Add `role="group"` to a parent element, then use `_groupHover`, `_groupFocus`, o
 Group selectors can be combined with responsive arrays:
 
 ```tsx
-<Box p={[2, null, 4]} role="group">
+<Box data-group p={[2, null, 4]}>
   <Text
     _groupHover={{
       color: ['$primary', null, '$secondary'],
@@ -191,13 +193,13 @@ Group selectors can be combined with responsive arrays:
 
 ## Nested Groups
 
-For nested groups, the selector applies to the nearest parent with `role="group"`:
+For nested groups, the selector applies to the nearest parent with `data-group`:
 
 ```tsx
-<Box bg="white" p={4} role="group">
+<Box bg="white" data-group p={4}>
   <Text _groupHover={{ color: 'blue' }}>Responds to outer group</Text>
 
-  <Box bg="$backgroundMuted" mt={2} p={2} role="group">
+  <Box bg="$backgroundMuted" data-group mt={2} p={2}>
     <Text _groupHover={{ color: 'red' }}>Responds to inner group</Text>
   </Box>
 </Box>
@@ -206,23 +208,29 @@ For nested groups, the selector applies to the nearest parent with `role="group"
 ## CSS Output
 
 ```tsx
-<Box role="group">
+<Box data-group>
   <Box _groupHover={{ bg: 'red' }} />
 </Box>
 ```
 
 Generates CSS like:
 
 ```css
-[role='group']:hover .a {
+:is([role='group'], [data-group]):hover .a {
   background-color: red;
 }
 ```
 
+The `:is()` wrapper matches both the new `data-group` attribute and the legacy
+`role="group"` attribute with a single rule, so existing markup keeps working
+during the migration window.
+
 ## Best Practices
 
-1. **Use semantic HTML**: Add `role="group"` to semantically appropriate elements
-2. **Keep interactions discoverable**: Don't hide critical content behind group hover
-3. **Consider touch devices**: Group hover doesn't work on touch - provide alternative interactions
-4. **Use transitions**: Add `transition` prop for smooth state changes
-5. **Accessibility**: Ensure interactive elements are keyboard accessible
+1. **Use `data-group` for styling hooks**: Reserve `role="group"` for elements that
+   genuinely form an ARIA group; use the data attribute for visual grouping that
+   has no a11y semantics.
+2. **Keep interactions discoverable**: Don't hide critical content behind group hover.
+3. **Consider touch devices**: Group hover doesn't work on touch — provide alternative interactions.
+4. **Use transitions**: Add `transition` prop for smooth state changes.
+5. **Accessibility**: Ensure interactive elements are keyboard accessible.

apps/landing/src/app/GetStartedButton.tsx

@@ -19,9 +19,9 @@ export function GetStartedButton() {
         alignItems="center"
         bg="$text"
         borderRadius="100px"
+        data-group
         gap="20px"
         p="16px 40px"
-        role="group"
         w="fit-content"
       >
         <Box

apps/landing/src/app/SponsorButton.tsx

@@ -23,11 +23,11 @@ export default function SponsorButton() {
         bg="$containerBackground"
         border="1px solid $imageBorder"
         borderRadius="12px"
+        data-group
         gap="10px"
         pl="16px"
         pr="20px"
         py="10px"
-        role="group"
         transition="all 0.1s ease-in-out"
       >
         <Image

apps/landing/src/app/StarButton.tsx

@@ -113,8 +113,8 @@ export default function StarButton() {
         border="1px solid $imageBorder"
         borderRadius="12px"
         cursor="pointer"
+        data-group
         h="100%"
-        role="group"
         transition="all 0.1s ease-in-out"
       >
         <Flex

apps/landing/src/components/Header/index.tsx

@@ -158,9 +158,9 @@ export function Header() {
               gap: '4px',
               alignItems: 'center',
             })}
+            data-group
             href="/storybook/index.html"
             prefetch={false}
-            role="group"
           >
             <Menu keyword="storybook">Storybook</Menu>
             <Box

apps/landing/src/components/showcase/ShowcaseCard.tsx

@@ -6,7 +6,7 @@ interface ShowcaseCardProps {
 }
 export function ShowcaseCard({ name, image }: ShowcaseCardProps) {
   return (
-    <VStack cursor="pointer" gap="8px" role="group">
+    <VStack cursor="pointer" data-group gap="8px">
       <Box h="auto" overflow="hidden" w="100%">
         <Image
           _groupHover={{ transform: 'scale(1.1)' }}