refactor: rename data-attr

Author: segunadebayo

.changeset/two-monkeys-watch.md

@@ -0,0 +1,5 @@
+---
+"@zag-js/scroll-area": patch
+---
+
+Rename `data-hovering` to `data-hover` for consistency

packages/docs/data/data-attr.json

@@ -1245,7 +1245,7 @@
       "data-part": "scrollbar",
       "data-orientation": "The orientation of the scrollbar",
       "data-scrolling": "Present when scrolling",
-      "data-hovering": "Present when hovering",
+      "data-hover": "Present when hovering",
       "data-overflow-x": "Present when the content overflows the x-axis",
       "data-overflow-y": "Present when the content overflows the y-axis"
     },
@@ -1971,4 +1971,4 @@
       "data-disabled": "Present when disabled"
     }
   }
-}
+}

packages/machines/scroll-area/src/scroll-area.connect.ts

@@ -125,7 +125,7 @@ export function connect<T extends PropTypes>(
         "data-ownedby": dom.getRootId(scope),
         "data-orientation": orientation,
         "data-scrolling": dataAttr(context.get(orientation === "horizontal" ? "scrollingX" : "scrollingY")),
-        "data-hovering": dataAttr(context.get("hovering")),
+        "data-hover": dataAttr(context.get("hovering")),
         "data-overflow-x": dataAttr(!hiddenState.scrollbarXHidden),
         "data-overflow-y": dataAttr(!hiddenState.scrollbarYHidden),
         onPointerUp() {

scripts/data-attr.ts

@@ -51,7 +51,6 @@ const docsMap = {
   "data-loading": "Present when loading",
   "data-activedescendant": "The id the active descendant of the {{widget}}",
   "data-scrolling": "Present when scrolling",
-  "data-hovering": "Present when hovering",
   "data-at-top": "Present when scrolled to the top edge",
   "data-at-bottom": "Present when scrolled to the bottom edge",
   "data-at-left": "Present when scrolled to the left edge",

shared/src/css/scroll-area.css

@@ -42,7 +42,7 @@
   opacity: 0;
   transition: opacity 150ms 300ms;
 
-  &[data-hovering],
+  &[data-hover],
   &[data-scrolling] {
     opacity: 1;
     transition-duration: 75ms;

website/data/components/scroll-area.mdx

@@ -200,15 +200,15 @@ scrollbar elements:
 
 ### Hover state
 
-When hovering over the scroll area or scrollbar, a `data-hovering` attribute is
+When hovering over the scroll area or scrollbar, a `data-hover` attribute is
 applied:
 
 ```css
-[data-part="root"][data-hovering] {
+[data-part="root"][data-hover] {
   /* styles when hovering over scroll area */
 }
 
-[data-part="scrollbar"][data-hovering] {
+[data-part="scrollbar"][data-hover] {
   /* styles when hovering over scrollbar */
 }
 ```

website/styles/machines/scroll-area.css

@@ -48,7 +48,7 @@
   position: absolute;
 
   &:hover,
-  &[data-hovering] {
+  &[data-hover] {
     opacity: 1;
   }
   &[data-scrolling] {
@@ -81,7 +81,7 @@
 }
 
 [data-scope="scroll-area"][data-part="thumb"]:hover,
-[data-scope="scroll-area"][data-part="thumb"][data-hovering] {
+[data-scope="scroll-area"][data-part="thumb"][data-hover] {
   background: var(--colors-text);
 }