fix: data hover

.claude/agents/heroui-docs-writer.md

@@ -269,7 +269,7 @@ The ComponentName component uses these CSS classes ([View source styles](https:/
 
 The component supports both CSS pseudo-classes and data attributes for flexibility:
 
-- **Hover**: `:hover` or `[data-hover="true"]`
+- **Hover**: `:hover` or `[data-hovered="true"]`
 - **Active/Pressed**: `:active` or `[data-pressed="true"]`
 - **Focus**: `:focus-visible` or `[data-focus-visible="true"]`
 - **Disabled**: `:disabled` or `[aria-disabled="true"]`

.claude/agents/style-migrator.md

@@ -151,7 +151,7 @@ Ensure:
 .component {
   /* Hover states - both approaches */
   &:hover,
-  &[data-hover="true"] {
+  &[data-hovered="true"] {
     @apply [hover-styles];
   }
 
@@ -202,7 +202,7 @@ Example structure:
 
   /* Hover states - both approaches */
   &:hover,
-  &[data-hover="true"] {
+  &[data-hovered="true"] {
     @apply bg-accent-soft;
   }
 

.claude/agents/tailwind-v4-css-expert.md

@@ -11,7 +11,6 @@ Your core competencies include:
 1. **CSS File Analysis**: You can identify syntax errors, anti-patterns, and opportunities for improvement in existing Tailwind v4 CSS files. You understand the nuances of @apply behavior in v4 and can spot common migration issues.
 
 2. **Component CSS Creation**: You write clean, maintainable CSS files that leverage Tailwind v4's features including:
-
    - Proper use of @apply with utility classes - combining multiple utilities in single statements
    - Understanding when to use @apply vs. regular CSS (e.g., keeping cursor: var(--cursor-interactive))
    - Native CSS nesting with & syntax
@@ -22,7 +21,6 @@ Your core competencies include:
    - Integration with tw-animate-css for enter/exit animations
 
 3. **Best Practices Enforcement**: You ensure CSS follows Tailwind v4 patterns:
-
    - Using :where() for specificity control
    - Implementing size and color variants through CSS variables
    - Leveraging CSS-first configuration with @theme
@@ -30,7 +28,6 @@ Your core competencies include:
    - Mixing @apply with standard CSS properties effectively
 
 4. **Debugging and Troubleshooting**: You can diagnose why styles aren't applying correctly, identify specificity conflicts, and resolve issues with:
-
    - @apply directive behavior in v4
    - CSS variable scoping and inheritance
    - Nesting and selector specificity
@@ -134,7 +131,7 @@ All interactive components MUST support both pseudo-class and data-attribute app
 .component {
   /* Hover states - both approaches */
   &:hover,
-  &[data-hover="true"] {
+  &[data-hovered="true"] {
     @apply [hover-styles];
   }
 
@@ -167,7 +164,7 @@ When analyzing CSS files, ensure:
 
 - ✅ Base classes include default sizes (no empty components without size modifiers)
 - ✅ `--md` variants exist but are empty with explanatory comments
-- ✅ Interactive states support both `:hover` and `[data-hover="true"]`
+- ✅ Interactive states support both `:hover` and `[data-hovered="true"]`
 - ✅ Interactive states support both `:active` and `[data-pressed="true"]`
 - ✅ Focus states include comprehensive fallbacks
 - ✅ All disabled states use both `:disabled` and `[aria-disabled="true"]`

CLAUDE.md

@@ -789,7 +789,7 @@ When working with HeroUI CSS components, follow these critical patterns:
 .component {
   /* Hover states */
   &:hover,
-  &[data-hover="true"] {
+  &[data-hovered="true"] {
     @apply [hover-styles];
   }
 

apps/docs/content/docs/components/accordion.mdx

@@ -203,7 +203,7 @@ The Accordion component uses these CSS classes ([View source styles](https://git
 
 The component supports both CSS pseudo-classes and data attributes for flexibility:
 
-- **Hover**: `:hover` or `[data-hover="true"]` on trigger
+- **Hover**: `:hover` or `[data-hovered="true"]` on trigger
 - **Focus**: `:focus-visible` or `[data-focus-visible="true"]` on trigger
 - **Disabled**: `:disabled` or `[aria-disabled="true"]` on trigger
 - **Expanded**: `[aria-expanded="true"]` on trigger

apps/docs/content/docs/components/button.mdx

@@ -144,7 +144,7 @@ The Button component uses these CSS classes ([View source styles](https://github
 
 The button supports both CSS pseudo-classes and data attributes for flexibility:
 
-- **Hover**: `:hover` or `[data-hover="true"]`
+- **Hover**: `:hover` or `[data-hovered="true"]`
 - **Active/Pressed**: `:active` or `[data-pressed="true"]` (includes scale transform)
 - **Focus**: `:focus-visible` or `[data-focus-visible="true"]` (shows focus ring)
 - **Disabled**: `:disabled` or `[aria-disabled="true"]` (reduced opacity, no pointer events)

apps/docs/content/docs/components/close-button.mdx

@@ -79,7 +79,7 @@ The CloseButton component uses these CSS classes ([View source styles](https://g
 
 The component supports both CSS pseudo-classes and data attributes for flexibility:
 
-- **Hover**: `:hover` or `[data-hover="true"]`
+- **Hover**: `:hover` or `[data-hovered="true"]`
 - **Active/Pressed**: `:active` or `[data-pressed="true"]`
 - **Focus**: `:focus-visible` or `[data-focus-visible="true"]`
 - **Disabled**: `:disabled` or `[aria-disabled="true"]`

apps/docs/content/docs/components/input.mdx

@@ -64,7 +64,7 @@ The base class `.input` powers every instance. Override it once with `@layer com
     @apply rounded-lg border border-border bg-surface-2 px-4 py-2 text-sm shadow-sm transition-colors;
 
     &:hover,
-    &[data-hover="true"] {
+    &[data-hovered="true"] {
       @apply bg-surface-3 border-border/80;
     }
 
@@ -86,7 +86,7 @@ The base class `.input` powers every instance. Override it once with `@layer com
 
 ### Interactive States
 
-- **Hover**: `:hover` or `[data-hover="true"]`
+- **Hover**: `:hover` or `[data-hovered="true"]`
 - **Focus Visible**: `:focus-visible` or `[data-focus-visible="true"]`
 - **Invalid**: `[data-invalid="true"]` (also syncs with `aria-invalid`)
 - **Disabled**: `:disabled` or `[aria-disabled="true"]`

apps/docs/content/docs/components/switch.mdx

@@ -198,7 +198,7 @@ The Switch component uses these CSS classes ([View source styles](https://github
 The switch supports both CSS pseudo-classes and data attributes for flexibility:
 
 - **Selected**: `[data-selected="true"]` (thumb position and background color change)
-- **Hover**: `:hover` or `[data-hover="true"]`
+- **Hover**: `:hover` or `[data-hovered="true"]`
 - **Focus**: `:focus-visible` or `[data-focus-visible="true"]` (shows focus ring)
 - **Disabled**: `:disabled` or `[aria-disabled="true"]` (reduced opacity, no pointer events)
 - **Pressed**: `:active` or `[data-pressed="true"]`

apps/docs/content/docs/components/tabs.mdx

@@ -129,7 +129,7 @@ The Tabs component uses these CSS classes:
 The component supports both CSS pseudo-classes and data attributes:
 
 - **Selected**: `[aria-selected="true"]`
-- **Hover**: `:hover` or `[data-hover="true"]`
+- **Hover**: `:hover` or `[data-hovered="true"]`
 - **Focus**: `:focus-visible` or `[data-focus-visible="true"]`
 - **Disabled**: `[aria-disabled="true"]`
 

apps/docs/content/docs/components/textarea.mdx

@@ -68,7 +68,7 @@ Override the shared `.textarea` class once with Tailwind's `@layer components`.
     @apply rounded-xl border border-border bg-surface-2 px-4 py-3 text-sm leading-6 shadow-sm;
 
     &:hover,
-    &[data-hover="true"] {
+    &[data-hovered="true"] {
       @apply bg-surface-3 border-border/80;
     }
 
@@ -90,7 +90,7 @@ Override the shared `.textarea` class once with Tailwind's `@layer components`.
 
 ### Interactive States
 
-- **Hover**: `:hover` or `[data-hover="true"]`
+- **Hover**: `:hover` or `[data-hovered="true"]`
 - **Focus Visible**: `:focus-visible` or `[data-focus-visible="true"]`
 - **Invalid**: `[data-invalid="true"]`
 - **Disabled**: `:disabled` or `[aria-disabled="true"]`

apps/docs/content/docs/handbook/animation.mdx

@@ -42,7 +42,7 @@ HeroUI components use data attributes to expose their state for animation:
 
 Components expose these states for styling:
 
-- `[data-hover="true"]` - Hover state
+- `[data-hovered="true"]` - Hover state
 - `[data-pressed="true"]` - Active/pressed state
 - `[data-focus-visible="true"]` - Keyboard focus
 - `[data-disabled="true"]` - Disabled state

apps/docs/content/docs/handbook/colors.mdx

@@ -148,7 +148,7 @@ For consistent form field styling across input components:
     @apply bg-accent text-accent-foreground;
 
     &:hover,
-    &[data-hover="true"] {
+    &[data-hovered="true"] {
       @apply bg-accent-hover;
     }
 

apps/docs/content/docs/handbook/styling.mdx

@@ -48,7 +48,7 @@ HeroUI components expose their state through data attributes, similar to CSS pse
 
 ```css
 /* Target different states */
-.button[data-hover="true"], .button:hover {
+.button[data-hovered="true"], .button:hover {
   background: var(--accent-hover);
 }
 

apps/docs/content/docs/handbook/theming.mdx

@@ -238,7 +238,7 @@ Each component docs page lists all available classes:
 - **Base classes**: `.button`, `.accordion`
 - **Modifiers**: `.button--primary`, `.button--icon-only`
 - **Elements**: `.accordion__trigger`, `.accordion__panel`
-- **States**: `[data-hover="true"]`, `[aria-expanded="true"]`
+- **States**: `[data-hovered="true"]`, `[aria-expanded="true"]`
 
 Example: [Button classes](/docs/components/button#css-classes)
 

packages/styles/components/accordion.css

@@ -49,7 +49,7 @@
 
   /* Hover state */
   &:hover,
-  &[data-hover="true"],
+  &[data-hovered="true"],
   /* Pressed state */
   &[data-pressed="true"] {
     background-color: color-mix(in oklab, var(--color-foreground) 6%, transparent 90%);
@@ -96,7 +96,7 @@
 
   .accordion__trigger {
     &:hover,
-    &[data-hover="true"] {
+    &[data-hovered="true"] {
       @apply bg-panel-hover;
     }
   }

packages/styles/components/button.css

@@ -72,7 +72,7 @@
   @apply bg-accent text-accent-foreground;
 
   &:hover,
-  &[data-hover="true"] {
+  &[data-hovered="true"] {
     @apply bg-accent-hover;
   }
 
@@ -87,7 +87,7 @@
   @apply bg-accent-soft text-accent-soft-foreground;
 
   &:hover,
-  &[data-hover="true"] {
+  &[data-hovered="true"] {
     @apply bg-accent-soft-hover;
   }
 
@@ -102,7 +102,7 @@
   @apply border-border bg-default;
 
   &:hover,
-  &[data-hover="true"] {
+  &[data-hovered="true"] {
     @apply bg-default-hover;
   }
 
@@ -117,7 +117,7 @@
   @apply text-accent-soft-foreground bg-transparent;
 
   &:hover,
-  &[data-hover="true"] {
+  &[data-hovered="true"] {
     @apply bg-accent-soft;
   }
 
@@ -132,7 +132,7 @@
   @apply bg-danger text-danger-foreground;
 
   &:hover,
-  &[data-hover="true"] {
+  &[data-hovered="true"] {
     @apply bg-danger-hover;
   }
 

packages/styles/components/close-button.css

@@ -50,7 +50,7 @@
   @apply text-muted bg-transparent;
 
   &:hover,
-  &[data-hover="true"] {
+  &[data-hovered="true"] {
     @apply text-foreground bg-default;
   }
 

packages/styles/components/input.css

@@ -9,7 +9,7 @@
   border-color: var(--color-field-border);
 
   &:hover,
-  &[data-hover="true"] {
+  &[data-hovered="true"] {
     @apply bg-field-hover;
     border-color: var(--color-field-border-hover);
   }

packages/styles/components/tabs.css

@@ -61,7 +61,7 @@
 
   /* Hover states - both approaches for compatibility */
   &:not([data-selected="true"]):not([data-disabled="true"]):hover,
-  &[data-hover="true"]:not([data-selected="true"]):not([data-disabled="true"]) {
+  &[data-hovered="true"]:not([data-selected="true"]):not([data-disabled="true"]) {
     @apply opacity-70;
   }
 

packages/styles/components/textarea.css

@@ -11,7 +11,7 @@
   border-color: var(--color-field-border);
 
   &:hover,
-  &[data-hover="true"] {
+  &[data-hovered="true"] {
     @apply bg-field-hover;
     border-color: var(--color-field-border-hover);
   }