@moduix/react 2.7.1 → 2.8.0

package/dist/components/accordion/Accordion.js

@@ -58,10 +58,10 @@ const Accordion_AccordionItemContent = /*#__PURE__*/ forwardRef(function({ class
 const Accordion_AccordionItemBody = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-scope": "accordion",
-        "data-part": "item-body",
         className: clsx(Accordion_module.itemBody, className),
         ...props,
+        "data-scope": "accordion",
+        "data-part": "item-body",
         "data-slot": "accordion-item-body"
     });
 });

package/dist/components/alert/Alert.js

@@ -7,11 +7,11 @@ const Alert_AlertRoot = /*#__PURE__*/ forwardRef(function({ children, className,
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
         role: role,
+        className: clsx(Alert_module.root, className),
+        ...props,
         "data-scope": "alert",
         "data-part": "root",
         "data-status": status,
-        className: clsx(Alert_module.root, className),
-        ...props,
         "data-slot": "alert-root",
         children: children
     });
@@ -19,51 +19,51 @@ const Alert_AlertRoot = /*#__PURE__*/ forwardRef(function({ children, className,
 const Alert_AlertIndicator = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
-        "data-scope": "alert",
-        "data-part": "indicator",
         "aria-hidden": "true",
         className: clsx(Alert_module.indicator, className),
         ...props,
+        "data-scope": "alert",
+        "data-part": "indicator",
         "data-slot": "alert-indicator"
     });
 });
 const Alert_AlertContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-scope": "alert",
-        "data-part": "content",
         className: clsx(Alert_module.content, className),
         ...props,
+        "data-scope": "alert",
+        "data-part": "content",
         "data-slot": "alert-content"
     });
 });
 const Alert_AlertTitle = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.p, {
         ref: ref,
-        "data-scope": "alert",
-        "data-part": "title",
         className: clsx(Alert_module.title, className),
         ...props,
+        "data-scope": "alert",
+        "data-part": "title",
         "data-slot": "alert-title"
     });
 });
 const Alert_AlertDescription = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-scope": "alert",
-        "data-part": "description",
         className: clsx(Alert_module.description, className),
         ...props,
+        "data-scope": "alert",
+        "data-part": "description",
         "data-slot": "alert-description"
     });
 });
 const Alert_AlertActions = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-scope": "alert",
-        "data-part": "actions",
         className: clsx(Alert_module.actions, className),
         ...props,
+        "data-scope": "alert",
+        "data-part": "actions",
         "data-slot": "alert-actions"
     });
 });

package/dist/components/angle-slider/AngleSlider.js

@@ -29,11 +29,21 @@ const AngleSlider_AngleSliderRootProvider = /*#__PURE__*/ forwardRef(function({
         "data-slot": "angle-slider-root-provider"
     });
 });
-const AngleSlider_AngleSliderControl = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+const AngleSlider_AngleSliderControl = /*#__PURE__*/ forwardRef(function({ className, onPointerDown, ...props }, ref) {
     return /*#__PURE__*/ jsx(AngleSlider.Control, {
         ref: ref,
         className: clsx(AngleSlider_module.control, className),
         ...props,
+        onPointerDown: (event)=>{
+            onPointerDown?.(event);
+            if (event.defaultPrevented || 0 !== event.button) return;
+            if (event.currentTarget.matches('[data-disabled], [data-readonly]')) return;
+            event.preventDefault();
+            event.currentTarget.querySelector('[data-scope="angle-slider"][data-part="thumb"]')?.focus({
+                preventScroll: true,
+                focusVisible: false
+            });
+        },
         "data-slot": "angle-slider-control"
     });
 });
@@ -74,6 +84,7 @@ function AngleSliderDial({ children, ...props }) {
         ...props,
         children: [
             children,
+            /*#__PURE__*/ jsx(AngleSlider_AngleSliderValueText, {}),
             /*#__PURE__*/ jsx(AngleSlider_AngleSliderThumb, {})
         ]
     });

package/dist/components/angle-slider/AngleSlider_module.css

@@ -22,72 +22,70 @@
   }
 
   .control-TKuxcQ {
-    --_angle-slider-control-border-color: var(--moduix-angle-slider-control-border-color, var(--moduix-color-border));
-    --_angle-slider-track-border-color: var(--moduix-angle-slider-track-border-color, var(--moduix-color-border));
+    --_angle-slider-fill-color: var(--moduix-angle-slider-indicator-bg, var(--moduix-color-primary));
+    --_angle-slider-track-color: var(--moduix-angle-slider-track-bg, var(--moduix-color-muted));
+    --_angle-slider-thumb-border-color: var(--moduix-angle-slider-thumb-border-color, var(--moduix-color-border));
     box-sizing: border-box;
     width: var(--moduix-angle-slider-size, 8rem);
     aspect-ratio: 1;
-    border-radius: var(--moduix-angle-slider-radius, var(--moduix-radius-full));
-    background-color: var(--moduix-angle-slider-track-bg, var(--moduix-color-muted));
-    min-width: 0;
-    box-shadow: inset 0 0 0 var(--moduix-angle-slider-track-border-width, var(--moduix-border-width-sm))
-        var(--_angle-slider-track-border-color),
-      var(--moduix-angle-slider-shadow, none);
+    border-radius: var(--moduix-radius-full);
     cursor: pointer;
     -webkit-user-select: none;
     user-select: none;
-    transition: background-color
-      var(--moduix-angle-slider-transition, var(--moduix-transition-default));
     outline: 0;
-    justify-content: center;
-    align-items: center;
-    display: flex;
+    min-width: 0;
     position: relative;
   }
 
-  @media (hover: hover) {
-    .control-TKuxcQ:not([data-disabled], [data-readonly]):hover {
-      background-color: var(--moduix-angle-slider-track-bg-hover, var(--moduix-angle-slider-track-bg, var(--moduix-color-muted)));
-    }
-  }
-
-  .control-TKuxcQ:not([data-disabled], [data-readonly]):active {
-    background-color: var(--moduix-angle-slider-track-bg-active, var(--moduix-angle-slider-track-bg, var(--moduix-color-muted)));
-  }
-
-  .control-TKuxcQ:after {
-    z-index: 1;
-    inset: var(--moduix-angle-slider-ring-thickness, .875rem);
+  .control-TKuxcQ:before {
     border-radius: inherit;
-    background: var(--moduix-angle-slider-control-bg, var(--moduix-color-background));
-    box-shadow: inset 0 0 0
-        var(--moduix-angle-slider-control-border-width, var(--moduix-border-width-sm))
-        var(--_angle-slider-control-border-color);
+    background: conic-gradient(from 0deg,
+        var(--_angle-slider-fill-color) var(--angle, 0deg),
+        var(--_angle-slider-track-color) var(--angle, 0deg));
+    -webkit-mask: radial-gradient(closest-side,
+        transparent calc(100% - var(--moduix-angle-slider-ring-thickness, .5rem) - 1px),
+        #000 calc(100% - var(--moduix-angle-slider-ring-thickness, .5rem)));
+    mask: radial-gradient(closest-side,
+        transparent calc(100% - var(--moduix-angle-slider-ring-thickness, .5rem) - 1px),
+        #000 calc(100% - var(--moduix-angle-slider-ring-thickness, .5rem)));
     content: "";
     position: absolute;
+    inset: 0;
   }
 
-  .control-TKuxcQ:before {
+  .control-TKuxcQ:after {
+    top: calc(var(--moduix-angle-slider-ring-thickness, .5rem) / 2);
     z-index: 1;
-    width: var(--moduix-angle-slider-center-dot-size, var(--moduix-spacing-1-5));
-    height: var(--moduix-angle-slider-center-dot-size, var(--moduix-spacing-1-5));
-    border-radius: inherit;
-    background: var(--moduix-angle-slider-center-dot-color, var(--moduix-angle-slider-color, var(--moduix-color-foreground)));
+    width: var(--moduix-angle-slider-ring-thickness, .5rem);
+    height: var(--moduix-angle-slider-ring-thickness, .5rem);
+    border-radius: var(--moduix-radius-full);
+    background: var(--_angle-slider-fill-color);
     content: "";
     position: absolute;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  @media (hover: hover) {
+    .control-TKuxcQ:not([data-disabled], [data-readonly]):hover:before {
+      --_angle-slider-track-color: var(--moduix-angle-slider-track-bg-hover, var(--moduix-angle-slider-track-bg, var(--moduix-color-muted)));
+    }
+  }
+
+  .control-TKuxcQ:not([data-disabled], [data-readonly]):active:before {
+    --_angle-slider-track-color: var(--moduix-angle-slider-track-bg-active, var(--moduix-angle-slider-track-bg, var(--moduix-color-muted)));
   }
 
-  .control-TKuxcQ:has(.thumb-BSrcel:focus-visible) {
-    box-shadow: inset 0 0 0 var(--moduix-angle-slider-track-border-width, var(--moduix-border-width-sm))
-          var(--_angle-slider-track-border-color),
-        0 0 0 var(--moduix-angle-slider-focus-ring-width, .1875rem)
+  .control-TKuxcQ:active:not([data-disabled], [data-readonly]) .thumb-BSrcel:before {
+    border-color: var(--moduix-angle-slider-focus-ring-color, var(--moduix-color-ring));
+    box-shadow: 0 0 0 var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))
           var(--moduix-angle-slider-focus-ring-color, var(--moduix-color-ring)),
-        var(--moduix-angle-slider-shadow, none);
+        var(--moduix-angle-slider-thumb-shadow-dragging, var(--moduix-shadow-md));
   }
 
   .control-TKuxcQ[data-invalid] {
-    --_angle-slider-control-border-color: var(--moduix-angle-slider-invalid-border-color, var(--moduix-angle-slider-invalid-color, var(--moduix-color-destructive)));
-    --_angle-slider-track-border-color: var(--moduix-angle-slider-invalid-border-color, var(--moduix-angle-slider-invalid-color, var(--moduix-color-destructive)));
+    --_angle-slider-fill-color: var(--moduix-angle-slider-invalid-indicator-bg, var(--moduix-angle-slider-invalid-color, var(--moduix-color-destructive)));
+    --_angle-slider-thumb-border-color: var(--moduix-angle-slider-invalid-indicator-bg, var(--moduix-angle-slider-invalid-color, var(--moduix-color-destructive)));
   }
 
   .control-TKuxcQ:is([data-disabled], [data-readonly]) {
@@ -95,72 +93,40 @@
   }
 
   .thumb-BSrcel {
-    top: 0;
-    bottom: 0;
-    left: calc(50% - var(--moduix-angle-slider-thumb-line-width, .1875rem) / 2);
     z-index: 2;
-    width: var(--moduix-angle-slider-thumb-line-width, .1875rem);
     outline: 0;
+    width: 0;
     position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
   }
 
   .thumb-BSrcel:before {
-    top: var(--moduix-angle-slider-ring-thickness, .875rem);
+    top: calc(var(--moduix-angle-slider-ring-thickness, .5rem) / 2);
     box-sizing: border-box;
     width: var(--moduix-angle-slider-thumb-size, var(--moduix-spacing-4));
     height: var(--moduix-angle-slider-thumb-size, var(--moduix-spacing-4));
     border: var(--moduix-angle-slider-thumb-border-width, var(--moduix-border-width-sm)) solid
-        var(--moduix-angle-slider-thumb-border-color, var(--moduix-color-border));
+        var(--_angle-slider-thumb-border-color);
     border-radius: var(--moduix-angle-slider-thumb-radius, var(--moduix-radius-full));
-    background: var(--moduix-angle-slider-thumb-bg, var(--moduix-angle-slider-indicator-bg, var(--moduix-color-primary)));
+    background: var(--moduix-angle-slider-thumb-bg, var(--moduix-color-background));
     box-shadow: var(--moduix-angle-slider-thumb-shadow, var(--moduix-shadow-sm));
     transition: border-color var(--moduix-angle-slider-transition, var(--moduix-transition-default)),
-        box-shadow var(--moduix-angle-slider-transition, var(--moduix-transition-default)),
         background-color var(--moduix-angle-slider-transition, var(--moduix-transition-default)),
-        transform var(--moduix-angle-slider-transition, var(--moduix-transition-default));
+        box-shadow var(--moduix-angle-slider-transition, var(--moduix-transition-default));
     content: "";
     position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  .thumb-BSrcel:after {
-    top: calc(var(--moduix-angle-slider-ring-thickness, .875rem) +
-          var(--moduix-angle-slider-thumb-size, var(--moduix-spacing-4)) + var(--moduix-spacing-1));
-    width: var(--moduix-angle-slider-thumb-line-width, .1875rem);
-    height: calc(50% - var(--moduix-angle-slider-ring-thickness, .875rem) -
-          var(--moduix-angle-slider-thumb-size, var(--moduix-spacing-4)) - var(--moduix-spacing-1-5));
-    border-radius: var(--moduix-radius-full);
-    background: linear-gradient(to bottom,
-        var(--moduix-angle-slider-indicator-bg, var(--moduix-color-primary)),
-        transparent);
-    content: "";
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
+    left: 0;
+    transform: translate(-50%, -50%);
   }
 
   .thumb-BSrcel:focus-visible:before {
     border-color: var(--moduix-angle-slider-focus-ring-color, var(--moduix-color-ring));
-    box-shadow: 0 0 0 var(--moduix-border-width-sm)
+    box-shadow: 0 0 0 var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))
         var(--moduix-angle-slider-focus-ring-color, var(--moduix-color-ring));
   }
 
-  .thumb-BSrcel:active:not([data-disabled], [data-readonly]):before {
-    transform: translateX(-50%) scale(1.08);
-  }
-
-  .thumb-BSrcel[data-invalid]:before {
-    border-color: var(--moduix-angle-slider-invalid-border-color, var(--moduix-angle-slider-invalid-color, var(--moduix-color-destructive)));
-    background: var(--moduix-angle-slider-invalid-indicator-bg, var(--moduix-angle-slider-invalid-color, var(--moduix-color-destructive)));
-  }
-
-  .thumb-BSrcel[data-invalid]:after {
-    background: linear-gradient(to bottom,
-        var(--moduix-angle-slider-invalid-indicator-bg, var(--moduix-angle-slider-invalid-color, var(--moduix-color-destructive))),
-        transparent);
-  }
-
   .thumb-BSrcel[data-disabled] {
     pointer-events: none;
   }
@@ -178,9 +144,9 @@
   }
 
   .marker-kWcrOw:before {
-    top: calc(var(--moduix-angle-slider-ring-thickness, .875rem) + .125rem);
+    top: calc(var(--moduix-angle-slider-ring-thickness, .5rem) / 2);
     width: var(--moduix-angle-slider-marker-width, .125rem);
-    height: var(--moduix-angle-slider-marker-height, .625rem);
+    height: var(--moduix-angle-slider-marker-height, .5rem);
     border-radius: var(--moduix-radius-full);
     background: var(--moduix-angle-slider-marker-color, var(--moduix-color-muted-foreground));
     content: "";
@@ -199,14 +165,23 @@
 
   .valueText-QUG00u {
     color: var(--moduix-angle-slider-value-text-color, var(--moduix-angle-slider-color, var(--moduix-color-foreground)));
-    font-size: var(--moduix-angle-slider-value-text-font-size, var(--moduix-text-sm));
+    font-size: var(--moduix-angle-slider-value-text-font-size, var(--moduix-text-lg));
     font-weight: var(--moduix-angle-slider-value-text-font-weight, var(--moduix-weight-medium));
-    line-height: var(--moduix-angle-slider-value-text-line-height, var(--moduix-line-height-text-sm));
+    font-variant-numeric: tabular-nums;
+    line-height: var(--moduix-angle-slider-value-text-line-height, var(--moduix-line-height-text-lg));
     text-align: center;
   }
 
+  .control-TKuxcQ .valueText-QUG00u {
+    z-index: 1;
+    place-items: center;
+    display: grid;
+    position: absolute;
+    inset: 0;
+  }
+
   @media (prefers-reduced-motion: reduce) {
-    .control-TKuxcQ, .thumb-BSrcel:before {
+    .thumb-BSrcel:before {
       transition: none;
     }
   }

package/dist/components/avatar/Avatar.js

@@ -15,9 +15,9 @@ const Avatar_AvatarRoot = /*#__PURE__*/ forwardRef(function({ className, size, .
 const Avatar_AvatarRootProvider = /*#__PURE__*/ forwardRef(function({ className, size, ...props }, ref) {
     return /*#__PURE__*/ jsx(Avatar.RootProvider, {
         ref: ref,
-        "data-size": size,
         className: clsx(Avatar_module.root, className),
         ...props,
+        "data-size": size,
         "data-slot": "avatar-root-provider"
     });
 });

package/dist/components/breadcrumbs/Breadcrumbs.d.ts

@@ -1,8 +1,7 @@
 import type { HTMLArkProps } from '@ark-ui/react/factory';
-import { type Key, type ReactNode } from 'react';
-type BreadcrumbsPathItem = {
-    href?: string;
-    key?: Key;
+import { type ReactNode } from 'react';
+type BreadcrumbsPathLink = {
+    href: string;
     label: ReactNode;
 };
 declare const Breadcrumbs: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>> & {
@@ -11,7 +10,8 @@ declare const Breadcrumbs: import("react").ForwardRefExoticComponent<Omit<import
     Item: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLLIElement>>;
     Link: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLAnchorElement>>;
     Path: import("react").ForwardRefExoticComponent<Omit<HTMLArkProps<"ol">, "asChild" | "children"> & {
-        items: readonly BreadcrumbsPathItem[];
+        links: readonly BreadcrumbsPathLink[];
+        page: ReactNode;
         separator?: ReactNode;
     } & import("react").RefAttributes<HTMLOListElement>>;
     Page: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/breadcrumbs/Breadcrumbs.js

@@ -46,28 +46,30 @@ const Breadcrumbs_BreadcrumbsPage = /*#__PURE__*/ forwardRef(function({ classNam
         className: clsx(Breadcrumbs_module.page, className)
     });
 });
-const Breadcrumbs_BreadcrumbsPath = /*#__PURE__*/ forwardRef(function({ items, separator, ...props }, ref) {
-    return /*#__PURE__*/ jsx(Breadcrumbs_BreadcrumbsList, {
+const Breadcrumbs_BreadcrumbsPath = /*#__PURE__*/ forwardRef(function({ links, page, separator, ...props }, ref) {
+    return /*#__PURE__*/ jsxs(Breadcrumbs_BreadcrumbsList, {
         ref: ref,
         ...props,
-        children: items.map((item, index)=>{
-            const isLastItem = index === items.length - 1;
-            return /*#__PURE__*/ jsxs(Fragment, {
-                children: [
-                    /*#__PURE__*/ jsx(Breadcrumbs_BreadcrumbsItem, {
-                        children: isLastItem ? /*#__PURE__*/ jsx(Breadcrumbs_BreadcrumbsPage, {
-                            children: item.label
-                        }) : /*#__PURE__*/ jsx(Breadcrumbs_BreadcrumbsLink, {
-                            href: item.href,
-                            children: item.label
+        children: [
+            links.map((link, index)=>/*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsx(Breadcrumbs_BreadcrumbsItem, {
+                            children: /*#__PURE__*/ jsx(Breadcrumbs_BreadcrumbsLink, {
+                                href: link.href,
+                                children: link.label
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Breadcrumbs_BreadcrumbsSeparator, {
+                            children: separator
                         })
-                    }),
-                    isLastItem ? null : /*#__PURE__*/ jsx(Breadcrumbs_BreadcrumbsSeparator, {
-                        children: separator
-                    })
-                ]
-            }, item.key ?? index);
-        })
+                    ]
+                }, index)),
+            /*#__PURE__*/ jsx(Breadcrumbs_BreadcrumbsItem, {
+                children: /*#__PURE__*/ jsx(Breadcrumbs_BreadcrumbsPage, {
+                    children: page
+                })
+            })
+        ]
     });
 });
 const Breadcrumbs_BreadcrumbsSeparator = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {

package/dist/components/carousel/Carousel_module.css

@@ -93,7 +93,7 @@
   }
 
   :is(.prevTrigger-TQv4Ak, .nextTrigger-PkJ3_8, .autoplayTrigger-h1Iihy):not(:disabled, [data-disabled]):hover {
-    border-color: var(--moduix-carousel-control-border-color-hover, color-mix(in oklab, var(--moduix-color-border) 50%, var(--moduix-color-foreground) 50%));
+    border-color: var(--moduix-carousel-control-border-color-hover, var(--moduix-color-ring));
     background-color: var(--moduix-carousel-control-bg-hover, var(--moduix-color-accent));
     box-shadow: var(--moduix-carousel-control-shadow-hover, var(--moduix-shadow-md));
     color: var(--moduix-carousel-control-color-hover, var(--moduix-color-accent-foreground));
@@ -111,7 +111,7 @@
   }
 
   :is(.prevTrigger-TQv4Ak, .nextTrigger-PkJ3_8, .autoplayTrigger-h1Iihy)[data-pressed] {
-    border-color: var(--moduix-carousel-control-border-color-hover, color-mix(in oklab, var(--moduix-color-border) 50%, var(--moduix-color-foreground) 50%));
+    border-color: var(--moduix-carousel-control-border-color-hover, var(--moduix-color-ring));
     background-color: var(--moduix-carousel-control-bg-hover, var(--moduix-color-accent));
     color: var(--moduix-carousel-control-color-hover, var(--moduix-color-accent-foreground));
   }

package/dist/components/drawer/Drawer.js

@@ -73,9 +73,9 @@ const Drawer_DrawerContent = /*#__PURE__*/ forwardRef(function({ className, vari
     const rootVariant = useContext(DrawerVariantContext);
     return /*#__PURE__*/ jsx(Drawer.Content, {
         ref: ref,
-        "data-variant": variant ?? rootVariant,
         className: clsx(Drawer_module.content, className),
         ...props,
+        "data-variant": variant ?? rootVariant,
         "data-slot": "drawer-content"
     });
 });

package/dist/components/highlight/Highlight_module.css

@@ -6,7 +6,6 @@
     background-color: var(--moduix-highlight-bg, color-mix(in oklab, var(--moduix-color-warning) 40%, var(--moduix-color-accent)));
     color: var(--moduix-highlight-color, var(--moduix-color-foreground));
     box-shadow: var(--moduix-highlight-shadow, none);
-    font: inherit;
     font-weight: var(--moduix-highlight-font-weight, var(--moduix-weight-medium));
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;

package/dist/components/json-tree-view/JsonTreeView_module.css

@@ -64,7 +64,15 @@
     inset-inline-end: 0;
   }
 
-  :is(.root-jp1ege :where([data-scope="json-tree-view"][data-part="branch-control"], [data-scope="json-tree-view"][data-part="item"]):not([data-disabled]):hover, .root-jp1ege :where([data-scope="json-tree-view"][data-part="branch-control"], [data-scope="json-tree-view"][data-part="item"])[data-selected]):before {
+  @media (hover: hover) {
+    .root-jp1ege :where([data-scope="json-tree-view"][data-part="branch-control"], [data-scope="json-tree-view"][data-part="item"]):not([data-disabled]):hover:before {
+      background-color: color-mix(in oklab,
+            var(--moduix-color-accent) 72%,
+            var(--moduix-color-background));
+    }
+  }
+
+  .root-jp1ege :where([data-scope="json-tree-view"][data-part="branch-control"], [data-scope="json-tree-view"][data-part="item"])[data-selected]:before {
     background-color: color-mix(in oklab,
           var(--moduix-color-accent) 72%,
           var(--moduix-color-background));

package/dist/components/marquee/Marquee_module.css

@@ -1,9 +1,5 @@
 @layer moduix.components {
   .root-liPuNO {
-    --marquee-edge-color: var(--moduix-color-background);
-    --marquee-edge-size: 20%;
-    --moduix-marquee-edge-color: var(--marquee-edge-color);
-    --moduix-marquee-edge-size: var(--marquee-edge-size);
     box-sizing: border-box;
     width: var(--moduix-marquee-width, 100%);
     height: var(--moduix-marquee-height, auto);
@@ -54,36 +50,38 @@
   }
 
   .edge-LzcjhJ {
+    --_edge-color: var(--moduix-marquee-edge-color, var(--marquee-edge-color, var(--moduix-color-background)));
+    --_edge-size: var(--moduix-marquee-edge-size, var(--marquee-edge-size, 20%));
     z-index: var(--moduix-marquee-edge-z-index, 1);
     pointer-events: none;
   }
 
   .edge-LzcjhJ[data-side="start"] {
-    width: var(--moduix-marquee-edge-size);
-    background: linear-gradient(to right, var(--moduix-marquee-edge-color), transparent);
+    width: var(--_edge-size);
+    background: linear-gradient(to right, var(--_edge-color), transparent);
   }
 
   .edge-LzcjhJ[data-side="start"][dir="rtl"] {
-    background: linear-gradient(to left, var(--moduix-marquee-edge-color), transparent);
+    background: linear-gradient(to left, var(--_edge-color), transparent);
   }
 
   .edge-LzcjhJ[data-side="end"] {
-    width: var(--moduix-marquee-edge-size);
-    background: linear-gradient(to left, var(--moduix-marquee-edge-color), transparent);
+    width: var(--_edge-size);
+    background: linear-gradient(to left, var(--_edge-color), transparent);
   }
 
   .edge-LzcjhJ[data-side="end"][dir="rtl"] {
-    background: linear-gradient(to right, var(--moduix-marquee-edge-color), transparent);
+    background: linear-gradient(to right, var(--_edge-color), transparent);
   }
 
   .edge-LzcjhJ[data-side="top"] {
-    height: var(--moduix-marquee-edge-size);
-    background: linear-gradient(to bottom, var(--moduix-marquee-edge-color), transparent);
+    height: var(--_edge-size);
+    background: linear-gradient(to bottom, var(--_edge-color), transparent);
   }
 
   .edge-LzcjhJ[data-side="bottom"] {
-    height: var(--moduix-marquee-edge-size);
-    background: linear-gradient(to top, var(--moduix-marquee-edge-color), transparent);
+    height: var(--_edge-size);
+    background: linear-gradient(to top, var(--_edge-color), transparent);
   }
 
   @keyframes marquee-x-Su5_G3 {

package/dist/components/menu/Menu.js

@@ -91,10 +91,10 @@ const Menu_MenuContent = /*#__PURE__*/ forwardRef(function({ asChild, className,
 const Menu_MenuViewport = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-scope": "menu",
-        "data-part": "viewport",
         className: clsx(Menu_module.viewport, className),
         ...props,
+        "data-scope": "menu",
+        "data-part": "viewport",
         "data-slot": "menu-viewport"
     });
 });
@@ -118,9 +118,9 @@ const Menu_MenuArrowTip = /*#__PURE__*/ forwardRef(function({ className, ...prop
 const Menu_MenuItem = /*#__PURE__*/ forwardRef(function({ className, tone = 'default', ...props }, ref) {
     return /*#__PURE__*/ jsx(Menu.Item, {
         ref: ref,
-        "data-tone": tone,
         className: clsx(Menu_module.item, className),
         ...props,
+        "data-tone": tone,
         "data-slot": "menu-item"
     });
 });
@@ -178,18 +178,18 @@ const Menu_MenuRadioItemGroup = /*#__PURE__*/ forwardRef(function({ className, .
 const Menu_MenuRadioItem = /*#__PURE__*/ forwardRef(function({ className, indicator = 'start', ...props }, ref) {
     return /*#__PURE__*/ jsx(Menu.RadioItem, {
         ref: ref,
-        "data-indicator-position": indicator,
         className: clsx(Menu_module.radioItem, className),
         ...props,
+        "data-indicator-position": indicator,
         "data-slot": "menu-radio-item"
     });
 });
 const Menu_MenuCheckboxItem = /*#__PURE__*/ forwardRef(function({ className, indicator = 'start', ...props }, ref) {
     return /*#__PURE__*/ jsx(Menu.CheckboxItem, {
         ref: ref,
-        "data-indicator-position": indicator,
         className: clsx(Menu_module.checkboxItem, className),
         ...props,
+        "data-indicator-position": indicator,
         "data-slot": "menu-checkbox-item"
     });
 });

package/dist/components/native-select/NativeSelect.js

@@ -15,6 +15,8 @@ const NativeSelect_NativeSelectRoot = /*#__PURE__*/ forwardRef(function({ classN
             /*#__PURE__*/ jsx(Field.Select, {
                 ...props,
                 ref: ref,
+                "data-scope": "field",
+                "data-part": "select",
                 "data-slot": "native-select-root",
                 className: clsx(NativeSelect_module.root, className)
             }),