@moduix/solid 1.1.1 → 2.0.0

package/dist/components/password-input/PasswordInput.jsx

@@ -1,6 +1,6 @@
 import { PasswordInput, usePasswordInput, usePasswordInputContext } from "@ark-ui/solid/password-input";
 import { clsx } from "clsx";
-import { children, createEffect, splitProps } from "solid-js";
+import { children, splitProps } from "solid-js";
 import { EyeClosedIcon, EyeIcon } from "../../internal/icons/ui/Icons.jsx";
 import PasswordInput_module from "./PasswordInput.module.jsx";
 function PasswordInputRoot(props) {
@@ -31,19 +31,11 @@ function PasswordInputInput(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class',
-        'defaultValue',
-        'ref'
+        'defaultValue'
     ]);
-    let inputRef;
-    createEffect(()=>{
-        if (inputRef) inputRef.defaultValue = String(local.defaultValue ?? '');
-    });
-    return <PasswordInput.Input asChild={local.asChild} {...others} {...local.asChild ? {
+    return <PasswordInput.Input asChild={local.asChild} {...others} {...{
         'prop:defaultValue': local.defaultValue
-    } : {}} data-slot="password-input-input" class={clsx(PasswordInput_module.input, local.class)} ref={(element)=>{
-        inputRef = element;
-        if ('function' == typeof local.ref) local.ref(element);
-    }}/>;
+    }} data-slot="password-input-input" class={clsx(PasswordInput_module.input, local.class)}/>;
 }
 function PasswordInputVisibilityTrigger(props) {
     const [local, others] = splitProps(props, [

package/dist/components/password-input/PasswordInput_module.css

@@ -115,8 +115,10 @@
     display: inline-flex;
   }
 
-  .visibilityTrigger-UlZG7F:not([data-disabled]):not([data-readonly]):hover {
-    color: var(--moduix-password-input-trigger-hover-color, var(--moduix-color-foreground));
+  @media (hover: hover) {
+    .visibilityTrigger-UlZG7F:not([data-disabled]):not([data-readonly]):hover {
+      color: var(--moduix-password-input-trigger-hover-color, var(--moduix-color-foreground));
+    }
   }
 
   .visibilityTrigger-UlZG7F:focus-visible {
@@ -143,7 +145,13 @@
     height: var(--moduix-password-input-icon-size, var(--moduix-button-icon-size, var(--moduix-spacing-4)));
   }
 
-  .visibilityTrigger-UlZG7F:not([data-disabled]):not([data-readonly]):is(:hover, :focus-visible) .indicator-ede0IZ {
+  @media (hover: hover) {
+    .visibilityTrigger-UlZG7F:not([data-disabled]):not([data-readonly]):hover .indicator-ede0IZ {
+      background: var(--moduix-password-input-trigger-hover-bg, var(--moduix-color-muted));
+    }
+  }
+
+  .visibilityTrigger-UlZG7F:not([data-disabled]):not([data-readonly]):focus-visible .indicator-ede0IZ {
     background: var(--moduix-password-input-trigger-hover-bg, var(--moduix-color-muted));
   }
 }

package/dist/components/progress-linear/ProgressLinear_module.css

@@ -14,7 +14,6 @@
     width: var(--moduix-progress-linear-vertical-width, max-content);
     height: var(--moduix-progress-linear-height, 12rem);
     grid-template-rows: auto minmax(0, 1fr);
-    grid-template-columns: minmax(0, 1fr) auto;
   }
 
   .label-Rv3Sur {

package/dist/components/radio-group/RadioGroup.d.ts

@@ -19,8 +19,8 @@ declare function RadioGroupIndicator(props: ComponentProps<typeof RadioGroupPrim
 declare const RadioGroup: typeof RadioGroupRoot & {
     Root: typeof RadioGroupRoot;
     RootProvider: typeof RadioGroupRootProvider;
-    Context: (props: import("@ark-ui/solid").RadioGroupContextProps) => JSX.Element;
-    ItemContext: (props: import("@ark-ui/solid").RadioGroupItemContextProps) => JSX.Element;
+    Context: (props: import("@ark-ui/solid/radio-group").RadioGroupContextProps) => JSX.Element;
+    ItemContext: (props: import("@ark-ui/solid/radio-group").RadioGroupItemContextProps) => JSX.Element;
     Label: typeof RadioGroupLabel;
     Item: typeof RadioGroupItem;
     ItemHiddenInput: (props: RadioGroupPrimitive.ItemHiddenInputProps) => JSX.Element;

package/dist/components/radio-group/RadioGroup_module.css

@@ -34,7 +34,6 @@
 
   .itemControl-l9dtE4 {
     box-sizing: border-box;
-    appearance: none;
     width: var(--_radio-size, 1.25rem);
     height: var(--_radio-size, 1.25rem);
     border: var(--moduix-radio-border-width, var(--moduix-border-width-sm)) solid
@@ -53,7 +52,6 @@
     flex: none;
     justify-content: center;
     align-items: center;
-    line-height: 0;
     display: inline-flex;
     position: relative;
   }
@@ -148,8 +146,7 @@
     background-color: var(--moduix-radio-bg-checked, var(--moduix-color-primary));
     opacity: var(--moduix-radio-group-indicator-opacity, .12);
     pointer-events: none;
-    transition: var(--transition-property, translate)
-      var(--moduix-radio-transition, var(--moduix-transition-default));
+    --transition-duration: var(--moduix-duration-normal);
     position: absolute;
   }
 }

package/dist/components/rating-group/RatingGroup.js

@@ -16,13 +16,13 @@ function RatingGroupRoot(props) {
         get asChild () {
             return local.asChild;
         },
-        get ["data-size"] () {
-            return local.size ?? 'md';
-        },
         get ["class"] () {
             return clsx(RatingGroup_module.root, local.class);
         }
     }, others, {
+        get ["data-size"] () {
+            return local.size ?? 'md';
+        },
         "data-slot": "rating-group-root",
         get children () {
             return local.children;
@@ -40,13 +40,13 @@ function RatingGroupRootProvider(props) {
         get asChild () {
             return local.asChild;
         },
-        get ["data-size"] () {
-            return local.size ?? 'md';
-        },
         get ["class"] () {
             return clsx(RatingGroup_module.root, local.class);
         }
     }, others, {
+        get ["data-size"] () {
+            return local.size ?? 'md';
+        },
         "data-slot": "rating-group-root-provider",
         get children () {
             return local.children;
@@ -99,16 +99,16 @@ function RatingGroupItemIndicator(props) {
     return (()=>{
         var _el$ = _tmpl$();
         spread(_el$, mergeProps({
+            get ["class"] () {
+                return clsx(RatingGroup_module.itemIndicator, local.class);
+            }
+        }, others, {
             get ["data-half"] () {
                 return item().half ? '' : void 0;
             },
             get ["data-highlighted"] () {
                 return item().highlighted ? '' : void 0;
             },
-            get ["class"] () {
-                return clsx(RatingGroup_module.itemIndicator, local.class);
-            }
-        }, others, {
             "data-slot": "rating-group-item-indicator"
         }), false, true);
         insert(_el$, ()=>resolvedChildren() ?? [

package/dist/components/rating-group/RatingGroup.jsx

@@ -10,7 +10,7 @@ function RatingGroupRoot(props) {
         'class',
         'size'
     ]);
-    return <RatingGroup.Root asChild={local.asChild} data-size={local.size ?? 'md'} class={clsx(RatingGroup_module.root, local.class)} {...others} data-slot="rating-group-root">
+    return <RatingGroup.Root asChild={local.asChild} class={clsx(RatingGroup_module.root, local.class)} {...others} data-size={local.size ?? 'md'} data-slot="rating-group-root">
       {local.children}
     </RatingGroup.Root>;
 }
@@ -21,7 +21,7 @@ function RatingGroupRootProvider(props) {
         'class',
         'size'
     ]);
-    return <RatingGroup.RootProvider asChild={local.asChild} data-size={local.size ?? 'md'} class={clsx(RatingGroup_module.root, local.class)} {...others} data-slot="rating-group-root-provider">
+    return <RatingGroup.RootProvider asChild={local.asChild} class={clsx(RatingGroup_module.root, local.class)} {...others} data-size={local.size ?? 'md'} data-slot="rating-group-root-provider">
       {local.children}
     </RatingGroup.RootProvider>;
 }
@@ -50,7 +50,7 @@ function RatingGroupItemIndicator(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     const item = useRatingGroupItemContext();
-    return <span data-half={item().half ? '' : void 0} data-highlighted={item().highlighted ? '' : void 0} class={clsx(RatingGroup_module.itemIndicator, local.class)} {...others} data-slot="rating-group-item-indicator">
+    return <span class={clsx(RatingGroup_module.itemIndicator, local.class)} {...others} data-half={item().half ? '' : void 0} data-highlighted={item().highlighted ? '' : void 0} data-slot="rating-group-item-indicator">
       {resolvedChildren() ?? <>
           <RatingStarIcon data-slot="rating-group-item-indicator-bg" class={RatingGroup_module.iconBg}/>
           <RatingStarIcon data-slot="rating-group-item-indicator-fg" class={RatingGroup_module.iconFg}/>

package/dist/components/rating-group/RatingGroup_module.css

@@ -55,12 +55,8 @@
     cursor: pointer;
     transition: color var(--moduix-rating-group-transition, var(--moduix-transition-default)),
       opacity var(--moduix-rating-group-transition, var(--moduix-transition-default));
-    background-color: #0000;
-    border: 0;
     justify-content: center;
     align-items: center;
-    margin: 0;
-    padding: 0;
     line-height: 0;
     display: inline-flex;
   }
@@ -73,7 +69,7 @@
     pointer-events: none;
   }
 
-  .item-KSLnDf[data-focus-visible] {
+  .item-KSLnDf:focus-visible {
     outline: var(--moduix-rating-group-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
         solid var(--moduix-rating-group-focus-ring-color, var(--moduix-color-ring));
     outline-offset: var(--moduix-rating-group-focus-ring-offset, var(--moduix-border-width-sm));
@@ -107,15 +103,7 @@
     clip-path: inset(0 100% 0 0);
   }
 
-  .item-KSLnDf[data-half] .iconFg-SJSzOf {
-    clip-path: inset(0 50% 0 0);
-  }
-
-  .item-KSLnDf:not([data-highlighted]) .iconFg-SJSzOf {
-    clip-path: inset(0 100% 0 0);
-  }
-
-  .root-estfrz:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) .itemIndicator-vRie_M[data-half] .iconFg-SJSzOf, .root-estfrz:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) .item-KSLnDf[data-half] .iconFg-SJSzOf {
+  .root-estfrz:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) .itemIndicator-vRie_M[data-half] .iconFg-SJSzOf {
     clip-path: inset(0 0 0 50%);
   }
 

package/dist/components/scroll-area/ScrollArea.d.ts

@@ -24,7 +24,7 @@ declare const ScrollArea: typeof ScrollAreaRoot & {
     Scrollbar: typeof ScrollAreaScrollbar;
     Thumb: typeof ScrollAreaThumb;
     Corner: typeof ScrollAreaCorner;
-    useScrollArea: (props?: import("@ark-ui/solid").UseScrollAreaProps) => import("@ark-ui/solid").UseScrollAreaReturn;
+    useScrollArea: (props?: import("@ark-ui/solid/scroll-area").UseScrollAreaProps) => import("@ark-ui/solid/scroll-area").UseScrollAreaReturn;
 };
 export { ScrollArea, useScrollArea, useScrollAreaContext };
 export type { ModuixScrollAreaRootProps, ModuixScrollAreaRootProviderProps };

package/dist/components/segment-group/SegmentGroup.d.ts

@@ -6,7 +6,7 @@ type SegmentGroupOption = {
     label: JSX.Element;
     disabled?: boolean;
 };
-declare function useSegmentGroup(props?: SegmentGroupMachineProps): import("@ark-ui/solid").UseSegmentGroupReturn;
+declare function useSegmentGroup(props?: SegmentGroupMachineProps): import("@ark-ui/solid/segment-group").UseSegmentGroupReturn;
 declare function SegmentGroupRoot(props: ComponentProps<typeof SegmentGroupPrimitive.Root>): JSX.Element;
 declare function SegmentGroupRootProvider(props: ComponentProps<typeof SegmentGroupPrimitive.RootProvider>): JSX.Element;
 declare function SegmentGroupLabel(props: ComponentProps<typeof SegmentGroupPrimitive.Label>): JSX.Element;

package/dist/components/segment-group/SegmentGroup.js

@@ -14,6 +14,7 @@ function SegmentGroup_useSegmentGroup(props) {
     return useSegmentGroup(()=>{
         const machineProps = 'function' == typeof props ? props() : props;
         return omitUndefined({
+            orientation: 'horizontal',
             disabled: field?.()?.disabled ?? fieldset?.()?.disabled,
             invalid: field?.()?.invalid ?? fieldset?.()?.invalid,
             readOnly: field?.()?.readOnly,

package/dist/components/segment-group/SegmentGroup.jsx

@@ -13,6 +13,7 @@ function SegmentGroup_useSegmentGroup(props) {
     return useSegmentGroup(()=>{
         const machineProps = 'function' == typeof props ? props() : props;
         return omitUndefined({
+            orientation: 'horizontal',
             disabled: field?.()?.disabled ?? fieldset?.()?.disabled,
             invalid: field?.()?.invalid ?? fieldset?.()?.invalid,
             readOnly: field?.()?.readOnly,

package/dist/components/select/Select.module.js

@@ -4,10 +4,10 @@ const Select_module = {
     label: "label-WNAZBK",
     control: "control-QCSm_x",
     trigger: "trigger-_8XyWR",
-    clearTrigger: "clearTrigger-bA52Dh",
     valueText: "valueText-ZjlEZ9",
     itemText: "itemText-yYAdr3",
     indicator: "indicator-ywAB27",
+    clearTrigger: "clearTrigger-bA52Dh",
     positioner: "positioner-mCDY9D",
     content: "content-fSDhut",
     "select-content-open": "select-content-open-BbqYJQ",

package/dist/components/select/Select.module.jsx

@@ -4,10 +4,10 @@ const Select_module = {
     label: "label-WNAZBK",
     control: "control-QCSm_x",
     trigger: "trigger-_8XyWR",
-    clearTrigger: "clearTrigger-bA52Dh",
     valueText: "valueText-ZjlEZ9",
     itemText: "itemText-yYAdr3",
     indicator: "indicator-ywAB27",
+    clearTrigger: "clearTrigger-bA52Dh",
     positioner: "positioner-mCDY9D",
     content: "content-fSDhut",
     "select-content-open": "select-content-open-BbqYJQ",

package/dist/components/select/Select_module.css

@@ -103,6 +103,10 @@
     color: var(--moduix-select-placeholder-color, var(--moduix-color-muted-foreground));
   }
 
+  .trigger-_8XyWR:not([data-placeholder-shown]) {
+    padding-inline-end: var(--moduix-select-trigger-padding-x-end, 4.25rem);
+  }
+
   .trigger-_8XyWR[data-disabled], .trigger-_8XyWR[disabled] {
     cursor: default;
   }
@@ -117,10 +121,6 @@
     outline-color: var(--moduix-select-invalid-color, var(--moduix-color-destructive));
   }
 
-  .control-QCSm_x:has(.clearTrigger-bA52Dh:not([hidden])) .trigger-_8XyWR {
-    padding-inline-end: var(--moduix-select-trigger-padding-x-end, 4.25rem);
-  }
-
   .valueText-ZjlEZ9, .itemText-yYAdr3 {
     text-overflow: ellipsis;
     white-space: nowrap;

package/dist/components/separator/Separator_module.css

@@ -9,19 +9,19 @@
   }
 
   .root-q9iyyK[data-size="xs"] {
-    --moduix-separator-size-thickness: var(--moduix-separator-thickness-xs, .5px);
+    --_separator-size-thickness: var(--moduix-separator-thickness-xs, .5px);
   }
 
   .root-q9iyyK[data-size="sm"] {
-    --moduix-separator-size-thickness: var(--moduix-separator-thickness-sm, var(--moduix-border-width-sm));
+    --_separator-size-thickness: var(--moduix-separator-thickness-sm, var(--moduix-border-width-sm));
   }
 
   .root-q9iyyK[data-size="md"] {
-    --moduix-separator-size-thickness: var(--moduix-separator-thickness-md, var(--moduix-border-width-md));
+    --_separator-size-thickness: var(--moduix-separator-thickness-md, var(--moduix-border-width-md));
   }
 
   .root-q9iyyK[data-size="lg"] {
-    --moduix-separator-size-thickness: var(--moduix-separator-thickness-lg, 3px);
+    --_separator-size-thickness: var(--moduix-separator-thickness-lg, 3px);
   }
 
   .root-q9iyyK[data-variant="dashed"] {
@@ -34,14 +34,14 @@
 
   .root-q9iyyK[data-orientation="horizontal"] {
     width: var(--moduix-separator-length-horizontal, 100%);
-    border-block-start-width: var(--moduix-separator-thickness, var(--moduix-separator-size-thickness, var(--moduix-border-width-sm)));
+    border-block-start-width: var(--moduix-separator-thickness, var(--_separator-size-thickness, var(--moduix-border-width-sm)));
     height: 0;
   }
 
   .root-q9iyyK[data-orientation="vertical"] {
     width: 0;
     height: var(--moduix-separator-length-vertical, 1em);
-    border-inline-start-width: var(--moduix-separator-thickness, var(--moduix-separator-size-thickness, var(--moduix-border-width-sm)));
+    border-inline-start-width: var(--moduix-separator-thickness, var(--_separator-size-thickness, var(--moduix-border-width-sm)));
   }
 }
 

package/dist/components/sidebar/Sidebar.js

@@ -55,9 +55,7 @@ function toggleSidebarPanel(splitter, panelId) {
     splitter().collapsePanel(panelId);
 }
 function useSidebarConfig() {
-    const config = useContext(SidebarConfigContext);
-    if (!config) throw new Error('Sidebar components must be used within Sidebar.Root');
-    return config;
+    return useContext(SidebarConfigContext);
 }
 function SidebarRoot(props) {
     const [local, others] = splitProps(props, [
@@ -212,6 +210,11 @@ function SidebarTrigger(props) {
         get ["aria-expanded"] () {
             return !collapsed();
         },
+        get ["class"] () {
+            return clsx(Sidebar_module.trigger, local.class);
+        },
+        onClick: handleClick
+    }, others, {
         "data-scope": "sidebar",
         "data-part": "trigger",
         get ["data-side"] () {
@@ -220,11 +223,6 @@ function SidebarTrigger(props) {
         get ["data-state"] () {
             return collapsed() ? 'collapsed' : 'expanded';
         },
-        get ["class"] () {
-            return clsx(Sidebar_module.trigger, local.class);
-        },
-        onClick: handleClick
-    }, others, {
         "data-slot": "sidebar-trigger",
         get children () {
             return memo(()=>!!(void 0 === local.children && !local.asChild))() ? createComponent(ChevronLeftIcon, {}) : local.children;
@@ -236,12 +234,12 @@ function SidebarLabel(props) {
         'class'
     ]);
     return createComponent(ark.span, mergeProps({
-        "data-scope": "sidebar",
-        "data-part": "label",
         get ["class"] () {
             return clsx(Sidebar_module.label, local.class);
         }
     }, others, {
+        "data-scope": "sidebar",
+        "data-part": "label",
         "data-slot": "sidebar-label"
     }));
 }
@@ -250,12 +248,12 @@ function SidebarHeader(props) {
         'class'
     ]);
     return createComponent(ark.header, mergeProps({
-        "data-scope": "sidebar",
-        "data-part": "header",
         get ["class"] () {
             return clsx(Sidebar_module.header, local.class);
         }
     }, others, {
+        "data-scope": "sidebar",
+        "data-part": "header",
         "data-slot": "sidebar-header"
     }));
 }
@@ -264,12 +262,12 @@ function SidebarContent(props) {
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-scope": "sidebar",
-        "data-part": "content",
         get ["class"] () {
             return clsx(Sidebar_module.content, local.class);
         }
     }, others, {
+        "data-scope": "sidebar",
+        "data-part": "content",
         "data-slot": "sidebar-content"
     }));
 }
@@ -279,12 +277,12 @@ function SidebarExpandedContent(props) {
     ]);
     const { collapsed } = useSidebar();
     return createComponent(ark.div, mergeProps({
-        "data-scope": "sidebar",
-        "data-part": "expanded-content",
         get ["class"] () {
             return local.class;
         }
     }, others, {
+        "data-scope": "sidebar",
+        "data-part": "expanded-content",
         "data-slot": "sidebar-expanded-content",
         get hidden () {
             return collapsed();
@@ -297,12 +295,12 @@ function SidebarCollapsedContent(props) {
     ]);
     const { collapsed } = useSidebar();
     return createComponent(ark.div, mergeProps({
-        "data-scope": "sidebar",
-        "data-part": "collapsed-content",
         get ["class"] () {
             return local.class;
         }
     }, others, {
+        "data-scope": "sidebar",
+        "data-part": "collapsed-content",
         "data-slot": "sidebar-collapsed-content",
         get hidden () {
             return !collapsed();
@@ -314,12 +312,12 @@ function SidebarFooter(props) {
         'class'
     ]);
     return createComponent(ark.footer, mergeProps({
-        "data-scope": "sidebar",
-        "data-part": "footer",
         get ["class"] () {
             return clsx(Sidebar_module.footer, local.class);
         }
     }, others, {
+        "data-scope": "sidebar",
+        "data-part": "footer",
         "data-slot": "sidebar-footer"
     }));
 }
@@ -328,12 +326,12 @@ function SidebarGroup(props) {
         'class'
     ]);
     return createComponent(ark.section, mergeProps({
-        "data-scope": "sidebar",
-        "data-part": "group",
         get ["class"] () {
             return clsx(Sidebar_module.group, local.class);
         }
     }, others, {
+        "data-scope": "sidebar",
+        "data-part": "group",
         "data-slot": "sidebar-group"
     }));
 }
@@ -342,12 +340,12 @@ function SidebarGroupLabel(props) {
         'class'
     ]);
     return createComponent(ark.h3, mergeProps({
-        "data-scope": "sidebar",
-        "data-part": "group-label",
         get ["class"] () {
             return clsx(Sidebar_module.groupLabel, local.class);
         }
     }, others, {
+        "data-scope": "sidebar",
+        "data-part": "group-label",
         "data-slot": "sidebar-group-label"
     }));
 }
@@ -356,12 +354,12 @@ function SidebarGroupHeader(props) {
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-scope": "sidebar",
-        "data-part": "group-header",
         get ["class"] () {
             return clsx(Sidebar_module.groupHeader, local.class);
         }
     }, others, {
+        "data-scope": "sidebar",
+        "data-part": "group-header",
         "data-slot": "sidebar-group-header"
     }));
 }
@@ -374,12 +372,12 @@ function SidebarGroupAction(props) {
         get type () {
             return local.type ?? 'button';
         },
-        "data-scope": "sidebar",
-        "data-part": "group-action",
         get ["class"] () {
             return clsx(Sidebar_module.groupAction, local.class);
         }
     }, others, {
+        "data-scope": "sidebar",
+        "data-part": "group-action",
         "data-slot": "sidebar-group-action"
     }));
 }
@@ -388,12 +386,12 @@ function SidebarNavigationList(props) {
         'class'
     ]);
     return createComponent(ark.ul, mergeProps({
-        "data-scope": "sidebar",
-        "data-part": "navigation-list",
         get ["class"] () {
             return clsx(Sidebar_module.menu, local.class);
         }
     }, others, {
+        "data-scope": "sidebar",
+        "data-part": "navigation-list",
         "data-slot": "sidebar-navigation-list"
     }));
 }
@@ -402,12 +400,12 @@ function SidebarNavigationItem(props) {
         'class'
     ]);
     return createComponent(ark.li, mergeProps({
-        "data-scope": "sidebar",
-        "data-part": "navigation-item",
         get ["class"] () {
             return clsx(Sidebar_module.menuItem, local.class);
         }
     }, others, {
+        "data-scope": "sidebar",
+        "data-part": "navigation-item",
         "data-slot": "sidebar-navigation-item"
     }));
 }
@@ -430,6 +428,10 @@ function SidebarNavigationButton(props) {
         get ["aria-current"] () {
             return local['aria-current'] ?? (local.active ? 'page' : void 0);
         },
+        get ["class"] () {
+            return clsx(Sidebar_module.menuButton, local.class);
+        }
+    }, others, {
         "data-scope": "sidebar",
         "data-part": "navigation-button",
         get ["data-active"] () {
@@ -438,10 +440,6 @@ function SidebarNavigationButton(props) {
         get ["data-size"] () {
             return local.size ?? 'md';
         },
-        get ["class"] () {
-            return clsx(Sidebar_module.menuButton, local.class);
-        }
-    }, others, {
         "data-slot": "sidebar-navigation-button"
     }));
 }
@@ -450,12 +448,12 @@ function SidebarNavigationBadge(props) {
         'class'
     ]);
     return createComponent(ark.span, mergeProps({
-        "data-scope": "sidebar",
-        "data-part": "navigation-badge",
         get ["class"] () {
             return clsx(Sidebar_module.menuBadge, local.class);
         }
     }, others, {
+        "data-scope": "sidebar",
+        "data-part": "navigation-badge",
         "data-slot": "sidebar-navigation-badge"
     }));
 }
@@ -464,12 +462,12 @@ function SidebarNavigationSubList(props) {
         'class'
     ]);
     return createComponent(ark.ul, mergeProps({
-        "data-scope": "sidebar",
-        "data-part": "navigation-sub-list",
         get ["class"] () {
             return clsx(Sidebar_module.menuSub, local.class);
         }
     }, others, {
+        "data-scope": "sidebar",
+        "data-part": "navigation-sub-list",
         "data-slot": "sidebar-navigation-sub-list"
     }));
 }
@@ -478,12 +476,12 @@ function SidebarNavigationSubItem(props) {
         'class'
     ]);
     return createComponent(ark.li, mergeProps({
-        "data-scope": "sidebar",
-        "data-part": "navigation-sub-item",
         get ["class"] () {
             return clsx(Sidebar_module.menuSubItem, local.class);
         }
     }, others, {
+        "data-scope": "sidebar",
+        "data-part": "navigation-sub-item",
         "data-slot": "sidebar-navigation-sub-item"
     }));
 }
@@ -502,15 +500,15 @@ function SidebarNavigationSubButton(props) {
         get ["aria-current"] () {
             return local['aria-current'] ?? (local.active ? 'page' : void 0);
         },
+        get ["class"] () {
+            return clsx(Sidebar_module.menuSubButton, local.class);
+        }
+    }, others, {
         "data-scope": "sidebar",
         "data-part": "navigation-sub-button",
         get ["data-active"] () {
             return local.active ? '' : void 0;
         },
-        get ["class"] () {
-            return clsx(Sidebar_module.menuSubButton, local.class);
-        }
-    }, others, {
         "data-slot": "sidebar-navigation-sub-button",
         get children () {
             return memo(()=>'string' == typeof local.children)() ? (()=>{
@@ -575,9 +573,7 @@ function SidebarInput(props) {
         get ["class"] () {
             return clsx(Sidebar_module.input, local.class);
         }
-    }, others, {
-        "data-slot": "sidebar-input"
-    }));
+    }, others));
 }
 function SidebarSeparator(props) {
     const [local, others] = splitProps(props, [
@@ -587,9 +583,7 @@ function SidebarSeparator(props) {
         get ["class"] () {
             return clsx(Sidebar_module.separator, local.class);
         }
-    }, others, {
-        "data-slot": "sidebar-separator"
-    }));
+    }, others));
 }
 const Sidebar = Object.assign(SidebarRoot, {
     Root: SidebarRoot,