@moduix/solid-tailwind 1.1.0 → 2.0.0

package/dist/components/sidebar/Sidebar.js

@@ -53,9 +53,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, [
@@ -86,7 +84,7 @@ function SidebarRoot(props) {
                 },
                 "data-slot": "sidebar-root",
                 get ["class"] () {
-                    return cn('group/splitter relative box-border h-112 min-h-0 w-full min-w-0 rounded-md border border-border bg-card text-foreground shadow-sm data-dragging:cursor-col-resize data-dragging:data-[orientation=vertical]:cursor-row-resize', 'isolate h-dvh min-h-96 w-full min-w-0 rounded-none border border-border bg-background text-foreground shadow-none', local.class);
+                    return cn('group/splitter relative box-border h-112 min-h-0 w-full min-w-0 rounded-md border border-border bg-card text-foreground shadow-sm data-dragging:cursor-col-resize', 'isolate h-dvh min-h-96 w-full min-w-0 rounded-none border border-border bg-background text-foreground shadow-none', local.class);
                 },
                 get style () {
                     return memo(()=>'string' == typeof local.style)() ? `width:;height:;${local.style}` : {
@@ -129,7 +127,7 @@ function SidebarPanel(props) {
             return collapsed() ? 'collapsed' : 'expanded';
         },
         get ["class"] () {
-            return cn('box-border min-h-50 min-w-0 overflow-auto rounded-none border-0 border-border bg-card p-4 text-card-foreground shadow-none group-data-[orientation=vertical]/splitter:min-h-0 data-dragging:select-none', 'group/sidebar-panel @container/sidebar-panel relative flex min-h-0 min-w-0 flex-col overflow-hidden bg-card p-0 text-card-foreground transition-colors duration-200 ease-in-out motion-reduce:transition-none', local.class);
+            return cn('box-border min-h-50 min-w-0 overflow-auto rounded-none border-0 border-border bg-card p-4 text-card-foreground shadow-none data-dragging:select-none', 'group/sidebar-panel @container/sidebar-panel relative flex min-h-0 min-w-0 flex-col overflow-hidden bg-card p-0 text-card-foreground transition-colors duration-200 ease-in-out motion-reduce:transition-none', local.class);
         }
     }));
 }
@@ -145,7 +143,7 @@ function SidebarInset(props) {
         },
         "data-slot": "sidebar-inset",
         get ["class"] () {
-            return cn('box-border min-h-50 min-w-0 overflow-auto rounded-none border-0 border-border bg-card p-4 text-card-foreground shadow-none group-data-[orientation=vertical]/splitter:min-h-0 data-dragging:select-none', 'relative min-w-0 overflow-auto bg-background p-0 text-foreground', local.class);
+            return cn('box-border min-h-50 min-w-0 overflow-auto rounded-none border-0 border-border bg-card p-4 text-card-foreground shadow-none data-dragging:select-none', 'relative min-w-0 overflow-auto bg-background p-0 text-foreground', local.class);
         }
     }));
 }
@@ -173,7 +171,7 @@ function SidebarResizeTrigger(props) {
         },
         "data-slot": "sidebar-resize-trigger",
         get ["class"] () {
-            return cn("group/trigger relative z-1 box-border flex w-px min-w-px cursor-col-resize appearance-none items-center justify-center border-0 bg-transparent p-0 outline-0 transition-opacity duration-200 ease-in-out before:absolute before:h-full before:w-[0.5px] before:rounded-full before:bg-border before:transition-[background-color] before:duration-200 before:ease-in-out before:content-[''] after:absolute after:z-1 after:h-full after:w-2.5 after:content-[''] data-disabled:cursor-default data-disabled:opacity-50 data-dragging:before:bg-muted-foreground/40 data-[orientation=vertical]:h-px data-[orientation=vertical]:min-h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:min-w-0 data-[orientation=vertical]:cursor-row-resize data-[orientation=vertical]:before:h-[0.5px] data-[orientation=vertical]:before:w-full data-[orientation=vertical]:after:h-2.5 data-[orientation=vertical]:after:w-full [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:before:bg-muted-foreground/40", 'z-2', local.class);
+            return cn("group/trigger relative z-1 box-border flex w-px min-w-px cursor-col-resize appearance-none items-center justify-center border-0 bg-transparent p-0 outline-0 transition-opacity duration-200 ease-in-out before:absolute before:h-full before:w-[0.5px] before:rounded-full before:bg-border before:transition-[background-color] before:duration-200 before:ease-in-out before:content-[''] after:absolute after:z-1 after:h-full after:w-2.5 after:content-[''] data-disabled:cursor-default data-disabled:opacity-50 data-dragging:before:bg-muted-foreground/40 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:before:bg-muted-foreground/40", 'z-2', local.class);
         },
         get children () {
             return memo(()=>!!(void 0 === local.children && !local.asChild))() ? createComponent(index_js_Splitter.ResizeTriggerIndicator, {}) : local.children;
@@ -210,6 +208,11 @@ function SidebarTrigger(props) {
         get ["aria-expanded"] () {
             return !collapsed();
         },
+        get ["class"] () {
+            return cn('relative z-4 -mx-3.5 inline-flex size-7 flex-none translate-y-10 cursor-pointer items-center justify-center rounded-full border border-border bg-background p-0 text-muted-foreground shadow-sm outline-0 transition-[background-color,color,box-shadow] duration-200 ease-in-out', 'focus-visible:outline-offset-0.5 focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:transition-none', '[&>svg]:size-4 [&>svg]:transition-transform [&>svg]:duration-200 [&>svg]:ease-in-out data-[side=left]:data-[state=collapsed]:[&>svg]:rotate-180 data-[side=right]:data-[state=expanded]:[&>svg]:rotate-180', 'hover:bg-accent hover:text-accent-foreground', local.class);
+        },
+        onClick: handleClick
+    }, others, {
         "data-scope": "sidebar",
         "data-part": "trigger",
         get ["data-side"] () {
@@ -218,11 +221,6 @@ function SidebarTrigger(props) {
         get ["data-state"] () {
             return collapsed() ? 'collapsed' : 'expanded';
         },
-        get ["class"] () {
-            return cn('relative z-4 -mx-3.5 inline-flex size-7 flex-none translate-y-10 cursor-pointer items-center justify-center rounded-full border border-border bg-background p-0 text-muted-foreground shadow-sm outline-0 transition-[background-color,color,box-shadow] duration-200 ease-in-out', 'focus-visible:outline-offset-0.5 focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:transition-none', '[&>svg]:size-4 [&>svg]:transition-transform [&>svg]:duration-200 [&>svg]:ease-in-out data-[side=left]:data-[state=collapsed]:[&>svg]:rotate-180 data-[side=right]:data-[state=expanded]:[&>svg]:rotate-180', 'hover:bg-accent hover:text-accent-foreground', local.class);
-        },
-        onClick: handleClick
-    }, others, {
         "data-slot": "sidebar-trigger",
         get children () {
             return memo(()=>!!(void 0 === local.children && !local.asChild))() ? createComponent(ChevronLeftIcon, {}) : local.children;
@@ -234,12 +232,12 @@ function SidebarLabel(props) {
         'class'
     ]);
     return createComponent(ark.span, mergeProps({
-        "data-scope": "sidebar",
-        "data-part": "label",
         get ["class"] () {
             return cn('min-w-0 truncate group-data-[state=collapsed]/sidebar-panel:sr-only', local.class);
         }
     }, others, {
+        "data-scope": "sidebar",
+        "data-part": "label",
         "data-slot": "sidebar-label"
     }));
 }
@@ -248,12 +246,12 @@ function SidebarHeader(props) {
         'class'
     ]);
     return createComponent(ark.header, mergeProps({
-        "data-scope": "sidebar",
-        "data-part": "header",
         get ["class"] () {
             return cn('flex flex-none items-center gap-2 p-3 group-data-[state=collapsed]/sidebar-panel:justify-center group-data-[state=collapsed]/sidebar-panel:px-1 [&>*:only-child]:w-full group-data-[state=collapsed]/sidebar-panel:[&>*:only-child]:w-auto', local.class);
         }
     }, others, {
+        "data-scope": "sidebar",
+        "data-part": "header",
         "data-slot": "sidebar-header"
     }));
 }
@@ -262,12 +260,12 @@ function SidebarContent(props) {
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-scope": "sidebar",
-        "data-part": "content",
         get ["class"] () {
             return cn('flex min-h-0 flex-auto [scrollbar-gutter:stable] flex-col overflow-auto overscroll-contain group-data-[state=collapsed]/sidebar-panel:[scrollbar-width:none] group-data-[state=collapsed]/sidebar-panel:[scrollbar-gutter:auto] group-data-[state=collapsed]/sidebar-panel:overflow-x-hidden group-data-[state=collapsed]/sidebar-panel:overflow-y-auto', local.class);
         }
     }, others, {
+        "data-scope": "sidebar",
+        "data-part": "content",
         "data-slot": "sidebar-content"
     }));
 }
@@ -277,12 +275,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();
@@ -295,12 +293,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();
@@ -312,12 +310,12 @@ function SidebarFooter(props) {
         'class'
     ]);
     return createComponent(ark.footer, mergeProps({
-        "data-scope": "sidebar",
-        "data-part": "footer",
         get ["class"] () {
             return cn('flex flex-none items-center gap-2 p-3 group-data-[state=collapsed]/sidebar-panel:justify-center group-data-[state=collapsed]/sidebar-panel:px-1', local.class);
         }
     }, others, {
+        "data-scope": "sidebar",
+        "data-part": "footer",
         "data-slot": "sidebar-footer"
     }));
 }
@@ -326,12 +324,12 @@ function SidebarGroup(props) {
         'class'
     ]);
     return createComponent(ark.section, mergeProps({
-        "data-scope": "sidebar",
-        "data-part": "group",
         get ["class"] () {
             return cn('flex flex-col gap-1 p-3 group-data-[state=collapsed]/sidebar-panel:px-1', local.class);
         }
     }, others, {
+        "data-scope": "sidebar",
+        "data-part": "group",
         "data-slot": "sidebar-group"
     }));
 }
@@ -340,12 +338,12 @@ function SidebarGroupHeader(props) {
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-scope": "sidebar",
-        "data-part": "group-header",
         get ["class"] () {
             return cn('flex min-w-0 items-center gap-2', local.class);
         }
     }, others, {
+        "data-scope": "sidebar",
+        "data-part": "group-header",
         "data-slot": "sidebar-group-header"
     }));
 }
@@ -354,12 +352,12 @@ function SidebarGroupLabel(props) {
         'class'
     ]);
     return createComponent(ark.h3, mergeProps({
-        "data-scope": "sidebar",
-        "data-part": "group-label",
         get ["class"] () {
             return cn('min-w-0 flex-1 truncate px-2 text-xs leading-4 font-medium text-muted-foreground group-data-[state=collapsed]/sidebar-panel:sr-only', local.class);
         }
     }, others, {
+        "data-scope": "sidebar",
+        "data-part": "group-label",
         "data-slot": "sidebar-group-label"
     }));
 }
@@ -372,12 +370,12 @@ function SidebarGroupAction(props) {
         get type () {
             return local.type ?? 'button';
         },
-        "data-scope": "sidebar",
-        "data-part": "group-action",
         get ["class"] () {
             return cn('focus-visible:outline-offset-0.5 me-2 inline-flex size-control-xs flex-none cursor-pointer items-center justify-center rounded-md p-0 text-muted-foreground outline-0 transition-colors duration-200 ease-in-out hover:bg-accent hover:text-accent-foreground focus-visible:outline-2 focus-visible:outline-ring motion-reduce:transition-none @max-[7rem]:hidden [&>svg]:size-4', local.class);
         }
     }, others, {
+        "data-scope": "sidebar",
+        "data-part": "group-action",
         "data-slot": "sidebar-group-action"
     }));
 }
@@ -386,12 +384,12 @@ function SidebarNavigationList(props) {
         'class'
     ]);
     return createComponent(ark.ul, mergeProps({
-        "data-scope": "sidebar",
-        "data-part": "navigation-list",
         get ["class"] () {
             return cn('flex w-full min-w-0 flex-col gap-1', local.class);
         }
     }, others, {
+        "data-scope": "sidebar",
+        "data-part": "navigation-list",
         "data-slot": "sidebar-navigation-list"
     }));
 }
@@ -400,12 +398,12 @@ function SidebarNavigationItem(props) {
         'class'
     ]);
     return createComponent(ark.li, mergeProps({
-        "data-scope": "sidebar",
-        "data-part": "navigation-item",
         get ["class"] () {
             return cn('relative min-w-0', local.class);
         }
     }, others, {
+        "data-scope": "sidebar",
+        "data-part": "navigation-item",
         "data-slot": "sidebar-navigation-item"
     }));
 }
@@ -428,6 +426,10 @@ function SidebarNavigationButton(props) {
         get ["aria-current"] () {
             return local['aria-current'] ?? (local.active ? 'page' : void 0);
         },
+        get ["class"] () {
+            return cn('flex w-full min-w-0 cursor-pointer items-center gap-2 overflow-hidden rounded-md px-2 py-1 text-start text-sm leading-5 text-ellipsis whitespace-nowrap text-card-foreground outline-0 transition-colors duration-200 ease-in-out has-[+_[data-slot=sidebar-navigation-badge]]:pe-10 @max-[7rem]:has-[+_[data-slot=sidebar-navigation-badge]]:pe-2', 'focus-visible:outline-offset-0.5 focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-accent data-active:font-medium data-active:text-accent-foreground motion-reduce:transition-none [&:not(:disabled):not([aria-disabled=true])]:hover:bg-accent [&:not(:disabled):not([aria-disabled=true])]:hover:text-accent-foreground', 'group-data-[state=collapsed]/sidebar-panel:mx-auto group-data-[state=collapsed]/sidebar-panel:min-h-control-md group-data-[state=collapsed]/sidebar-panel:w-control-md group-data-[state=collapsed]/sidebar-panel:justify-center group-data-[state=collapsed]/sidebar-panel:bg-transparent group-data-[state=collapsed]/sidebar-panel:px-0 group-data-[state=collapsed]/sidebar-panel:hover:bg-transparent', '[&>[data-sidebar-icon]]:shrink-0 [&>span:last-child]:min-w-0 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', '[&>[data-scope=select][data-part=indicator]]:ms-auto @max-[7rem]:[&>[data-scope=select][data-part=indicator]]:hidden', '[&>[data-slot=collapsible-indicator]]:ms-auto [&>[data-slot=collapsible-indicator]]:size-control-xs @max-[7rem]:[&>[data-slot=collapsible-indicator]]:hidden [&>[data-slot=collapsible-indicator]>svg]:size-3', '[&>[data-slot=menu-indicator]]:ms-auto [&>[data-slot=menu-indicator]]:size-control-xs [&>[data-slot=menu-indicator]]:leading-none [&>[data-slot=menu-indicator]]:text-muted-foreground @max-[7rem]:[&>[data-slot=menu-indicator]]:hidden [&>[data-slot=menu-indicator]>svg]:block [&>[data-slot=menu-indicator]>svg]:size-4', 'sm' === local.size && 'min-h-control-sm text-xs', (void 0 === local.size || 'md' === local.size) && 'min-h-control-md', 'lg' === local.size && 'min-h-control-lg', local.class);
+        }
+    }, others, {
         "data-scope": "sidebar",
         "data-part": "navigation-button",
         get ["data-active"] () {
@@ -436,10 +438,6 @@ function SidebarNavigationButton(props) {
         get ["data-size"] () {
             return local.size ?? 'md';
         },
-        get ["class"] () {
-            return cn('flex w-full min-w-0 cursor-pointer items-center gap-2 overflow-hidden rounded-md px-2 py-1 text-start text-sm leading-5 text-ellipsis whitespace-nowrap text-card-foreground outline-0 transition-colors duration-200 ease-in-out has-[+_[data-slot=sidebar-navigation-badge]]:pe-10 @max-[7rem]:has-[+_[data-slot=sidebar-navigation-badge]]:pe-2', 'focus-visible:outline-offset-0.5 focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-accent data-active:font-medium data-active:text-accent-foreground motion-reduce:transition-none [&:not(:disabled):not([aria-disabled=true])]:hover:bg-accent [&:not(:disabled):not([aria-disabled=true])]:hover:text-accent-foreground', 'group-data-[state=collapsed]/sidebar-panel:mx-auto group-data-[state=collapsed]/sidebar-panel:min-h-control-md group-data-[state=collapsed]/sidebar-panel:w-control-md group-data-[state=collapsed]/sidebar-panel:justify-center group-data-[state=collapsed]/sidebar-panel:bg-transparent group-data-[state=collapsed]/sidebar-panel:px-0 group-data-[state=collapsed]/sidebar-panel:hover:bg-transparent', '[&>[data-sidebar-icon]]:shrink-0 [&>span:last-child]:min-w-0 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', '[&>[data-scope=select][data-part=indicator]]:ms-auto @max-[7rem]:[&>[data-scope=select][data-part=indicator]]:hidden', '[&>[data-slot=collapsible-indicator]]:ms-auto [&>[data-slot=collapsible-indicator]]:size-control-xs @max-[7rem]:[&>[data-slot=collapsible-indicator]]:hidden [&>[data-slot=collapsible-indicator]>svg]:size-3', '[&>[data-slot=menu-indicator]]:ms-auto [&>[data-slot=menu-indicator]]:size-control-xs [&>[data-slot=menu-indicator]]:leading-none [&>[data-slot=menu-indicator]]:text-muted-foreground @max-[7rem]:[&>[data-slot=menu-indicator]]:hidden [&>[data-slot=menu-indicator]>svg]:block [&>[data-slot=menu-indicator]>svg]:size-4', 'sm' === local.size && 'min-h-control-sm text-xs', (void 0 === local.size || 'md' === local.size) && 'min-h-control-md', 'lg' === local.size && 'min-h-control-lg', local.class);
-        }
-    }, others, {
         "data-slot": "sidebar-navigation-button"
     }));
 }
@@ -448,12 +446,12 @@ function SidebarNavigationBadge(props) {
         'class'
     ]);
     return createComponent(ark.span, mergeProps({
-        "data-scope": "sidebar",
-        "data-part": "navigation-badge",
         get ["class"] () {
             return cn('pointer-events-none absolute end-2.5 top-1/2 z-1 box-border inline-grid size-5 -translate-y-1/2 place-items-center rounded-full bg-primary p-0 text-[0.5625rem] leading-none font-medium text-primary-foreground tabular-nums @max-[7rem]:hidden', local.class);
         }
     }, others, {
+        "data-scope": "sidebar",
+        "data-part": "navigation-badge",
         "data-slot": "sidebar-navigation-badge"
     }));
 }
@@ -462,12 +460,12 @@ function SidebarNavigationSubList(props) {
         'class'
     ]);
     return createComponent(ark.ul, mergeProps({
-        "data-scope": "sidebar",
-        "data-part": "navigation-sub-list",
         get ["class"] () {
             return cn('ms-4 mt-1 flex w-auto min-w-0 flex-col gap-1 border-s border-border ps-2 group-data-[state=collapsed]/sidebar-panel:hidden', local.class);
         }
     }, others, {
+        "data-scope": "sidebar",
+        "data-part": "navigation-sub-list",
         "data-slot": "sidebar-navigation-sub-list"
     }));
 }
@@ -476,12 +474,12 @@ function SidebarNavigationSubItem(props) {
         'class'
     ]);
     return createComponent(ark.li, mergeProps({
-        "data-scope": "sidebar",
-        "data-part": "navigation-sub-item",
         get ["class"] () {
             return cn('relative min-w-0', local.class);
         }
     }, others, {
+        "data-scope": "sidebar",
+        "data-part": "navigation-sub-item",
         "data-slot": "sidebar-navigation-sub-item"
     }));
 }
@@ -500,15 +498,15 @@ function SidebarNavigationSubButton(props) {
         get ["aria-current"] () {
             return local['aria-current'] ?? (local.active ? 'page' : void 0);
         },
+        get ["class"] () {
+            return cn('flex min-h-control-sm w-full min-w-0 cursor-pointer items-center gap-2 overflow-hidden rounded-md px-2 text-start text-sm leading-5 text-ellipsis whitespace-nowrap text-card-foreground outline-0 transition-[background-color,border-color,color,box-shadow] duration-200 ease-in-out has-[+_[data-slot=sidebar-navigation-badge]]:pe-10 @max-[7rem]:has-[+_[data-slot=sidebar-navigation-badge]]:pe-2', 'focus-visible:outline-offset-0.5 focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-accent data-active:font-medium data-active:text-accent-foreground motion-reduce:transition-none [&:not(:disabled):not([aria-disabled=true])]:hover:bg-accent [&:not(:disabled):not([aria-disabled=true])]:hover:text-accent-foreground', '[&>[data-sidebar-icon]]:shrink-0 [&>span:last-child]:min-w-0 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', local.class);
+        }
+    }, others, {
         "data-scope": "sidebar",
         "data-part": "navigation-sub-button",
         get ["data-active"] () {
             return local.active ? '' : void 0;
         },
-        get ["class"] () {
-            return cn('flex min-h-control-sm w-full min-w-0 cursor-pointer items-center gap-2 overflow-hidden rounded-md px-2 text-start text-sm leading-5 text-ellipsis whitespace-nowrap text-card-foreground outline-0 transition-[background-color,border-color,color,box-shadow] duration-200 ease-in-out has-[+_[data-slot=sidebar-navigation-badge]]:pe-10 @max-[7rem]:has-[+_[data-slot=sidebar-navigation-badge]]:pe-2', 'focus-visible:outline-offset-0.5 focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-accent data-active:font-medium data-active:text-accent-foreground motion-reduce:transition-none [&:not(:disabled):not([aria-disabled=true])]:hover:bg-accent [&:not(:disabled):not([aria-disabled=true])]:hover:text-accent-foreground', '[&>[data-sidebar-icon]]:shrink-0 [&>span:last-child]:min-w-0 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', local.class);
-        }
-    }, others, {
         "data-slot": "sidebar-navigation-sub-button",
         get children () {
             return memo(()=>'string' == typeof local.children)() ? (()=>{
@@ -573,9 +571,7 @@ function SidebarInput(props) {
         get ["class"] () {
             return cn('w-full group-data-[state=collapsed]/sidebar-panel:hidden', local.class);
         }
-    }, others, {
-        "data-slot": "sidebar-input"
-    }));
+    }, others));
 }
 function SidebarSeparator(props) {
     const [local, others] = splitProps(props, [
@@ -585,9 +581,7 @@ function SidebarSeparator(props) {
         get ["class"] () {
             return cn('border-border', local.class);
         }
-    }, others, {
-        "data-slot": "sidebar-separator"
-    }));
+    }, others));
 }
 const Sidebar = Object.assign(SidebarRoot, {
     Root: SidebarRoot,

package/dist/components/sidebar/Sidebar.jsx

@@ -51,9 +51,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, [
@@ -69,7 +67,7 @@ function SidebarRoot(props) {
         panelId,
         side
     }}>
-      <Splitter.Root {...others} panels={getDefaultPanels(side(), panelId())} defaultSize={local.defaultSize ?? getDefaultSidebarSize(side())} orientation="horizontal" data-side={side()} data-slot="sidebar-root" class={cn('group/splitter relative box-border h-112 min-h-0 w-full min-w-0 rounded-md border border-border bg-card text-foreground shadow-sm data-dragging:cursor-col-resize data-dragging:data-[orientation=vertical]:cursor-row-resize', 'isolate h-dvh min-h-96 w-full min-w-0 rounded-none border border-border bg-background text-foreground shadow-none', local.class)} style={'string' == typeof local.style ? `width:;height:;${local.style}` : {
+      <Splitter.Root {...others} panels={getDefaultPanels(side(), panelId())} defaultSize={local.defaultSize ?? getDefaultSidebarSize(side())} orientation="horizontal" data-side={side()} data-slot="sidebar-root" class={cn('group/splitter relative box-border h-112 min-h-0 w-full min-w-0 rounded-md border border-border bg-card text-foreground shadow-sm data-dragging:cursor-col-resize', 'isolate h-dvh min-h-96 w-full min-w-0 rounded-none border border-border bg-background text-foreground shadow-none', local.class)} style={'string' == typeof local.style ? `width:;height:;${local.style}` : {
         width: void 0,
         height: void 0,
         ...local.style
@@ -94,14 +92,14 @@ function SidebarPanel(props) {
     const config = useSidebarConfig();
     const splitter = useSplitterContext();
     const collapsed = ()=>splitter().isPanelCollapsed(config.panelId());
-    return <Splitter.Panel {...others} id={config.panelId()} data-side={config.side()} data-slot="sidebar-panel" data-state={collapsed() ? 'collapsed' : 'expanded'} class={cn('box-border min-h-50 min-w-0 overflow-auto rounded-none border-0 border-border bg-card p-4 text-card-foreground shadow-none group-data-[orientation=vertical]/splitter:min-h-0 data-dragging:select-none', 'group/sidebar-panel @container/sidebar-panel relative flex min-h-0 min-w-0 flex-col overflow-hidden bg-card p-0 text-card-foreground transition-colors duration-200 ease-in-out motion-reduce:transition-none', local.class)}/>;
+    return <Splitter.Panel {...others} id={config.panelId()} data-side={config.side()} data-slot="sidebar-panel" data-state={collapsed() ? 'collapsed' : 'expanded'} class={cn('box-border min-h-50 min-w-0 overflow-auto rounded-none border-0 border-border bg-card p-4 text-card-foreground shadow-none data-dragging:select-none', 'group/sidebar-panel @container/sidebar-panel relative flex min-h-0 min-w-0 flex-col overflow-hidden bg-card p-0 text-card-foreground transition-colors duration-200 ease-in-out motion-reduce:transition-none', local.class)}/>;
 }
 function SidebarInset(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     const config = useSidebarConfig();
-    return <Splitter.Panel {...others} id="content" data-side={config.side()} data-slot="sidebar-inset" class={cn('box-border min-h-50 min-w-0 overflow-auto rounded-none border-0 border-border bg-card p-4 text-card-foreground shadow-none group-data-[orientation=vertical]/splitter:min-h-0 data-dragging:select-none', 'relative min-w-0 overflow-auto bg-background p-0 text-foreground', local.class)}/>;
+    return <Splitter.Panel {...others} id="content" data-side={config.side()} data-slot="sidebar-inset" class={cn('box-border min-h-50 min-w-0 overflow-auto rounded-none border-0 border-border bg-card p-4 text-card-foreground shadow-none data-dragging:select-none', 'relative min-w-0 overflow-auto bg-background p-0 text-foreground', local.class)}/>;
 }
 function SidebarResizeTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -112,7 +110,7 @@ function SidebarResizeTrigger(props) {
     ]);
     const config = useSidebarConfig();
     const id = ()=>'left' === config.side() ? `${config.panelId()}:content` : `content:${config.panelId()}`;
-    return <Splitter.ResizeTrigger {...others} asChild={local.asChild} id={id()} aria-label={local['aria-label'] ?? 'Resize sidebar'} data-side={config.side()} data-slot="sidebar-resize-trigger" class={cn("group/trigger relative z-1 box-border flex w-px min-w-px cursor-col-resize appearance-none items-center justify-center border-0 bg-transparent p-0 outline-0 transition-opacity duration-200 ease-in-out before:absolute before:h-full before:w-[0.5px] before:rounded-full before:bg-border before:transition-[background-color] before:duration-200 before:ease-in-out before:content-[''] after:absolute after:z-1 after:h-full after:w-2.5 after:content-[''] data-disabled:cursor-default data-disabled:opacity-50 data-dragging:before:bg-muted-foreground/40 data-[orientation=vertical]:h-px data-[orientation=vertical]:min-h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:min-w-0 data-[orientation=vertical]:cursor-row-resize data-[orientation=vertical]:before:h-[0.5px] data-[orientation=vertical]:before:w-full data-[orientation=vertical]:after:h-2.5 data-[orientation=vertical]:after:w-full [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:before:bg-muted-foreground/40", 'z-2', local.class)}>
+    return <Splitter.ResizeTrigger {...others} asChild={local.asChild} id={id()} aria-label={local['aria-label'] ?? 'Resize sidebar'} data-side={config.side()} data-slot="sidebar-resize-trigger" class={cn("group/trigger relative z-1 box-border flex w-px min-w-px cursor-col-resize appearance-none items-center justify-center border-0 bg-transparent p-0 outline-0 transition-opacity duration-200 ease-in-out before:absolute before:h-full before:w-[0.5px] before:rounded-full before:bg-border before:transition-[background-color] before:duration-200 before:ease-in-out before:content-[''] after:absolute after:z-1 after:h-full after:w-2.5 after:content-[''] data-disabled:cursor-default data-disabled:opacity-50 data-dragging:before:bg-muted-foreground/40 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:before:bg-muted-foreground/40", 'z-2', local.class)}>
       {void 0 === local.children && !local.asChild ? <index_jsx_Splitter.ResizeTriggerIndicator/> : local.children}
     </Splitter.ResizeTrigger>;
 }
@@ -133,7 +131,7 @@ function SidebarTrigger(props) {
         if (event.defaultPrevented) return;
         toggleSidebarPanel(splitter, config.panelId());
     };
-    return <ark.button asChild={local.asChild} type={local.type ?? 'button'} aria-label={local['aria-label'] ?? 'Toggle sidebar'} aria-expanded={!collapsed()} data-scope="sidebar" data-part="trigger" data-side={config.side()} data-state={collapsed() ? 'collapsed' : 'expanded'} class={cn('relative z-4 -mx-3.5 inline-flex size-7 flex-none translate-y-10 cursor-pointer items-center justify-center rounded-full border border-border bg-background p-0 text-muted-foreground shadow-sm outline-0 transition-[background-color,color,box-shadow] duration-200 ease-in-out', 'focus-visible:outline-offset-0.5 focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:transition-none', '[&>svg]:size-4 [&>svg]:transition-transform [&>svg]:duration-200 [&>svg]:ease-in-out data-[side=left]:data-[state=collapsed]:[&>svg]:rotate-180 data-[side=right]:data-[state=expanded]:[&>svg]:rotate-180', 'hover:bg-accent hover:text-accent-foreground', local.class)} onClick={handleClick} {...others} data-slot="sidebar-trigger">
+    return <ark.button asChild={local.asChild} type={local.type ?? 'button'} aria-label={local['aria-label'] ?? 'Toggle sidebar'} aria-expanded={!collapsed()} class={cn('relative z-4 -mx-3.5 inline-flex size-7 flex-none translate-y-10 cursor-pointer items-center justify-center rounded-full border border-border bg-background p-0 text-muted-foreground shadow-sm outline-0 transition-[background-color,color,box-shadow] duration-200 ease-in-out', 'focus-visible:outline-offset-0.5 focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:transition-none', '[&>svg]:size-4 [&>svg]:transition-transform [&>svg]:duration-200 [&>svg]:ease-in-out data-[side=left]:data-[state=collapsed]:[&>svg]:rotate-180 data-[side=right]:data-[state=expanded]:[&>svg]:rotate-180', 'hover:bg-accent hover:text-accent-foreground', local.class)} onClick={handleClick} {...others} data-scope="sidebar" data-part="trigger" data-side={config.side()} data-state={collapsed() ? 'collapsed' : 'expanded'} data-slot="sidebar-trigger">
       {void 0 === local.children && !local.asChild ? <ChevronLeftIcon/> : local.children}
     </ark.button>;
 }
@@ -141,76 +139,76 @@ function SidebarLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.span data-scope="sidebar" data-part="label" class={cn('min-w-0 truncate group-data-[state=collapsed]/sidebar-panel:sr-only', local.class)} {...others} data-slot="sidebar-label"/>;
+    return <ark.span class={cn('min-w-0 truncate group-data-[state=collapsed]/sidebar-panel:sr-only', local.class)} {...others} data-scope="sidebar" data-part="label" data-slot="sidebar-label"/>;
 }
 function SidebarHeader(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.header data-scope="sidebar" data-part="header" class={cn('flex flex-none items-center gap-2 p-3 group-data-[state=collapsed]/sidebar-panel:justify-center group-data-[state=collapsed]/sidebar-panel:px-1 [&>*:only-child]:w-full group-data-[state=collapsed]/sidebar-panel:[&>*:only-child]:w-auto', local.class)} {...others} data-slot="sidebar-header"/>;
+    return <ark.header class={cn('flex flex-none items-center gap-2 p-3 group-data-[state=collapsed]/sidebar-panel:justify-center group-data-[state=collapsed]/sidebar-panel:px-1 [&>*:only-child]:w-full group-data-[state=collapsed]/sidebar-panel:[&>*:only-child]:w-auto', local.class)} {...others} data-scope="sidebar" data-part="header" data-slot="sidebar-header"/>;
 }
 function SidebarContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-scope="sidebar" data-part="content" class={cn('flex min-h-0 flex-auto [scrollbar-gutter:stable] flex-col overflow-auto overscroll-contain group-data-[state=collapsed]/sidebar-panel:[scrollbar-width:none] group-data-[state=collapsed]/sidebar-panel:[scrollbar-gutter:auto] group-data-[state=collapsed]/sidebar-panel:overflow-x-hidden group-data-[state=collapsed]/sidebar-panel:overflow-y-auto', local.class)} {...others} data-slot="sidebar-content"/>;
+    return <ark.div class={cn('flex min-h-0 flex-auto [scrollbar-gutter:stable] flex-col overflow-auto overscroll-contain group-data-[state=collapsed]/sidebar-panel:[scrollbar-width:none] group-data-[state=collapsed]/sidebar-panel:[scrollbar-gutter:auto] group-data-[state=collapsed]/sidebar-panel:overflow-x-hidden group-data-[state=collapsed]/sidebar-panel:overflow-y-auto', local.class)} {...others} data-scope="sidebar" data-part="content" data-slot="sidebar-content"/>;
 }
 function SidebarExpandedContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     const { collapsed } = useSidebar();
-    return <ark.div data-scope="sidebar" data-part="expanded-content" class={local.class} {...others} data-slot="sidebar-expanded-content" hidden={collapsed()}/>;
+    return <ark.div class={local.class} {...others} data-scope="sidebar" data-part="expanded-content" data-slot="sidebar-expanded-content" hidden={collapsed()}/>;
 }
 function SidebarCollapsedContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     const { collapsed } = useSidebar();
-    return <ark.div data-scope="sidebar" data-part="collapsed-content" class={local.class} {...others} data-slot="sidebar-collapsed-content" hidden={!collapsed()}/>;
+    return <ark.div class={local.class} {...others} data-scope="sidebar" data-part="collapsed-content" data-slot="sidebar-collapsed-content" hidden={!collapsed()}/>;
 }
 function SidebarFooter(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.footer data-scope="sidebar" data-part="footer" class={cn('flex flex-none items-center gap-2 p-3 group-data-[state=collapsed]/sidebar-panel:justify-center group-data-[state=collapsed]/sidebar-panel:px-1', local.class)} {...others} data-slot="sidebar-footer"/>;
+    return <ark.footer class={cn('flex flex-none items-center gap-2 p-3 group-data-[state=collapsed]/sidebar-panel:justify-center group-data-[state=collapsed]/sidebar-panel:px-1', local.class)} {...others} data-scope="sidebar" data-part="footer" data-slot="sidebar-footer"/>;
 }
 function SidebarGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.section data-scope="sidebar" data-part="group" class={cn('flex flex-col gap-1 p-3 group-data-[state=collapsed]/sidebar-panel:px-1', local.class)} {...others} data-slot="sidebar-group"/>;
+    return <ark.section class={cn('flex flex-col gap-1 p-3 group-data-[state=collapsed]/sidebar-panel:px-1', local.class)} {...others} data-scope="sidebar" data-part="group" data-slot="sidebar-group"/>;
 }
 function SidebarGroupHeader(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-scope="sidebar" data-part="group-header" class={cn('flex min-w-0 items-center gap-2', local.class)} {...others} data-slot="sidebar-group-header"/>;
+    return <ark.div class={cn('flex min-w-0 items-center gap-2', local.class)} {...others} data-scope="sidebar" data-part="group-header" data-slot="sidebar-group-header"/>;
 }
 function SidebarGroupLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.h3 data-scope="sidebar" data-part="group-label" class={cn('min-w-0 flex-1 truncate px-2 text-xs leading-4 font-medium text-muted-foreground group-data-[state=collapsed]/sidebar-panel:sr-only', local.class)} {...others} data-slot="sidebar-group-label"/>;
+    return <ark.h3 class={cn('min-w-0 flex-1 truncate px-2 text-xs leading-4 font-medium text-muted-foreground group-data-[state=collapsed]/sidebar-panel:sr-only', local.class)} {...others} data-scope="sidebar" data-part="group-label" data-slot="sidebar-group-label"/>;
 }
 function SidebarGroupAction(props) {
     const [local, others] = splitProps(props, [
         'class',
         'type'
     ]);
-    return <ark.button type={local.type ?? 'button'} data-scope="sidebar" data-part="group-action" class={cn('focus-visible:outline-offset-0.5 me-2 inline-flex size-control-xs flex-none cursor-pointer items-center justify-center rounded-md p-0 text-muted-foreground outline-0 transition-colors duration-200 ease-in-out hover:bg-accent hover:text-accent-foreground focus-visible:outline-2 focus-visible:outline-ring motion-reduce:transition-none @max-[7rem]:hidden [&>svg]:size-4', local.class)} {...others} data-slot="sidebar-group-action"/>;
+    return <ark.button type={local.type ?? 'button'} class={cn('focus-visible:outline-offset-0.5 me-2 inline-flex size-control-xs flex-none cursor-pointer items-center justify-center rounded-md p-0 text-muted-foreground outline-0 transition-colors duration-200 ease-in-out hover:bg-accent hover:text-accent-foreground focus-visible:outline-2 focus-visible:outline-ring motion-reduce:transition-none @max-[7rem]:hidden [&>svg]:size-4', local.class)} {...others} data-scope="sidebar" data-part="group-action" data-slot="sidebar-group-action"/>;
 }
 function SidebarNavigationList(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.ul data-scope="sidebar" data-part="navigation-list" class={cn('flex w-full min-w-0 flex-col gap-1', local.class)} {...others} data-slot="sidebar-navigation-list"/>;
+    return <ark.ul class={cn('flex w-full min-w-0 flex-col gap-1', local.class)} {...others} data-scope="sidebar" data-part="navigation-list" data-slot="sidebar-navigation-list"/>;
 }
 function SidebarNavigationItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.li data-scope="sidebar" data-part="navigation-item" class={cn('relative min-w-0', local.class)} {...others} data-slot="sidebar-navigation-item"/>;
+    return <ark.li class={cn('relative min-w-0', local.class)} {...others} data-scope="sidebar" data-part="navigation-item" data-slot="sidebar-navigation-item"/>;
 }
 function SidebarNavigationButton(props) {
     const [local, others] = splitProps(props, [
@@ -221,25 +219,25 @@ function SidebarNavigationButton(props) {
         'size',
         'type'
     ]);
-    return <ark.button asChild={local.asChild} type={local.type ?? 'button'} aria-current={local['aria-current'] ?? (local.active ? 'page' : void 0)} data-scope="sidebar" data-part="navigation-button" data-active={local.active ? '' : void 0} data-size={local.size ?? 'md'} class={cn('flex w-full min-w-0 cursor-pointer items-center gap-2 overflow-hidden rounded-md px-2 py-1 text-start text-sm leading-5 text-ellipsis whitespace-nowrap text-card-foreground outline-0 transition-colors duration-200 ease-in-out has-[+_[data-slot=sidebar-navigation-badge]]:pe-10 @max-[7rem]:has-[+_[data-slot=sidebar-navigation-badge]]:pe-2', 'focus-visible:outline-offset-0.5 focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-accent data-active:font-medium data-active:text-accent-foreground motion-reduce:transition-none [&:not(:disabled):not([aria-disabled=true])]:hover:bg-accent [&:not(:disabled):not([aria-disabled=true])]:hover:text-accent-foreground', 'group-data-[state=collapsed]/sidebar-panel:mx-auto group-data-[state=collapsed]/sidebar-panel:min-h-control-md group-data-[state=collapsed]/sidebar-panel:w-control-md group-data-[state=collapsed]/sidebar-panel:justify-center group-data-[state=collapsed]/sidebar-panel:bg-transparent group-data-[state=collapsed]/sidebar-panel:px-0 group-data-[state=collapsed]/sidebar-panel:hover:bg-transparent', '[&>[data-sidebar-icon]]:shrink-0 [&>span:last-child]:min-w-0 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', '[&>[data-scope=select][data-part=indicator]]:ms-auto @max-[7rem]:[&>[data-scope=select][data-part=indicator]]:hidden', '[&>[data-slot=collapsible-indicator]]:ms-auto [&>[data-slot=collapsible-indicator]]:size-control-xs @max-[7rem]:[&>[data-slot=collapsible-indicator]]:hidden [&>[data-slot=collapsible-indicator]>svg]:size-3', '[&>[data-slot=menu-indicator]]:ms-auto [&>[data-slot=menu-indicator]]:size-control-xs [&>[data-slot=menu-indicator]]:leading-none [&>[data-slot=menu-indicator]]:text-muted-foreground @max-[7rem]:[&>[data-slot=menu-indicator]]:hidden [&>[data-slot=menu-indicator]>svg]:block [&>[data-slot=menu-indicator]>svg]:size-4', 'sm' === local.size && 'min-h-control-sm text-xs', (void 0 === local.size || 'md' === local.size) && 'min-h-control-md', 'lg' === local.size && 'min-h-control-lg', local.class)} {...others} data-slot="sidebar-navigation-button"/>;
+    return <ark.button asChild={local.asChild} type={local.type ?? 'button'} aria-current={local['aria-current'] ?? (local.active ? 'page' : void 0)} class={cn('flex w-full min-w-0 cursor-pointer items-center gap-2 overflow-hidden rounded-md px-2 py-1 text-start text-sm leading-5 text-ellipsis whitespace-nowrap text-card-foreground outline-0 transition-colors duration-200 ease-in-out has-[+_[data-slot=sidebar-navigation-badge]]:pe-10 @max-[7rem]:has-[+_[data-slot=sidebar-navigation-badge]]:pe-2', 'focus-visible:outline-offset-0.5 focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-accent data-active:font-medium data-active:text-accent-foreground motion-reduce:transition-none [&:not(:disabled):not([aria-disabled=true])]:hover:bg-accent [&:not(:disabled):not([aria-disabled=true])]:hover:text-accent-foreground', 'group-data-[state=collapsed]/sidebar-panel:mx-auto group-data-[state=collapsed]/sidebar-panel:min-h-control-md group-data-[state=collapsed]/sidebar-panel:w-control-md group-data-[state=collapsed]/sidebar-panel:justify-center group-data-[state=collapsed]/sidebar-panel:bg-transparent group-data-[state=collapsed]/sidebar-panel:px-0 group-data-[state=collapsed]/sidebar-panel:hover:bg-transparent', '[&>[data-sidebar-icon]]:shrink-0 [&>span:last-child]:min-w-0 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', '[&>[data-scope=select][data-part=indicator]]:ms-auto @max-[7rem]:[&>[data-scope=select][data-part=indicator]]:hidden', '[&>[data-slot=collapsible-indicator]]:ms-auto [&>[data-slot=collapsible-indicator]]:size-control-xs @max-[7rem]:[&>[data-slot=collapsible-indicator]]:hidden [&>[data-slot=collapsible-indicator]>svg]:size-3', '[&>[data-slot=menu-indicator]]:ms-auto [&>[data-slot=menu-indicator]]:size-control-xs [&>[data-slot=menu-indicator]]:leading-none [&>[data-slot=menu-indicator]]:text-muted-foreground @max-[7rem]:[&>[data-slot=menu-indicator]]:hidden [&>[data-slot=menu-indicator]>svg]:block [&>[data-slot=menu-indicator]>svg]:size-4', 'sm' === local.size && 'min-h-control-sm text-xs', (void 0 === local.size || 'md' === local.size) && 'min-h-control-md', 'lg' === local.size && 'min-h-control-lg', local.class)} {...others} data-scope="sidebar" data-part="navigation-button" data-active={local.active ? '' : void 0} data-size={local.size ?? 'md'} data-slot="sidebar-navigation-button"/>;
 }
 function SidebarNavigationBadge(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.span data-scope="sidebar" data-part="navigation-badge" class={cn('pointer-events-none absolute end-2.5 top-1/2 z-1 box-border inline-grid size-5 -translate-y-1/2 place-items-center rounded-full bg-primary p-0 text-[0.5625rem] leading-none font-medium text-primary-foreground tabular-nums @max-[7rem]:hidden', local.class)} {...others} data-slot="sidebar-navigation-badge"/>;
+    return <ark.span class={cn('pointer-events-none absolute end-2.5 top-1/2 z-1 box-border inline-grid size-5 -translate-y-1/2 place-items-center rounded-full bg-primary p-0 text-[0.5625rem] leading-none font-medium text-primary-foreground tabular-nums @max-[7rem]:hidden', local.class)} {...others} data-scope="sidebar" data-part="navigation-badge" data-slot="sidebar-navigation-badge"/>;
 }
 function SidebarNavigationSubList(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.ul data-scope="sidebar" data-part="navigation-sub-list" class={cn('ms-4 mt-1 flex w-auto min-w-0 flex-col gap-1 border-s border-border ps-2 group-data-[state=collapsed]/sidebar-panel:hidden', local.class)} {...others} data-slot="sidebar-navigation-sub-list"/>;
+    return <ark.ul class={cn('ms-4 mt-1 flex w-auto min-w-0 flex-col gap-1 border-s border-border ps-2 group-data-[state=collapsed]/sidebar-panel:hidden', local.class)} {...others} data-scope="sidebar" data-part="navigation-sub-list" data-slot="sidebar-navigation-sub-list"/>;
 }
 function SidebarNavigationSubItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.li data-scope="sidebar" data-part="navigation-sub-item" class={cn('relative min-w-0', local.class)} {...others} data-slot="sidebar-navigation-sub-item"/>;
+    return <ark.li class={cn('relative min-w-0', local.class)} {...others} data-scope="sidebar" data-part="navigation-sub-item" data-slot="sidebar-navigation-sub-item"/>;
 }
 function SidebarNavigationSubButton(props) {
     const [local, others] = splitProps(props, [
@@ -249,7 +247,7 @@ function SidebarNavigationSubButton(props) {
         'children',
         'class'
     ]);
-    return <ark.a asChild={local.asChild} aria-current={local['aria-current'] ?? (local.active ? 'page' : void 0)} data-scope="sidebar" data-part="navigation-sub-button" data-active={local.active ? '' : void 0} class={cn('flex min-h-control-sm w-full min-w-0 cursor-pointer items-center gap-2 overflow-hidden rounded-md px-2 text-start text-sm leading-5 text-ellipsis whitespace-nowrap text-card-foreground outline-0 transition-[background-color,border-color,color,box-shadow] duration-200 ease-in-out has-[+_[data-slot=sidebar-navigation-badge]]:pe-10 @max-[7rem]:has-[+_[data-slot=sidebar-navigation-badge]]:pe-2', 'focus-visible:outline-offset-0.5 focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-accent data-active:font-medium data-active:text-accent-foreground motion-reduce:transition-none [&:not(:disabled):not([aria-disabled=true])]:hover:bg-accent [&:not(:disabled):not([aria-disabled=true])]:hover:text-accent-foreground', '[&>[data-sidebar-icon]]:shrink-0 [&>span:last-child]:min-w-0 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', local.class)} {...others} data-slot="sidebar-navigation-sub-button">
+    return <ark.a asChild={local.asChild} aria-current={local['aria-current'] ?? (local.active ? 'page' : void 0)} class={cn('flex min-h-control-sm w-full min-w-0 cursor-pointer items-center gap-2 overflow-hidden rounded-md px-2 text-start text-sm leading-5 text-ellipsis whitespace-nowrap text-card-foreground outline-0 transition-[background-color,border-color,color,box-shadow] duration-200 ease-in-out has-[+_[data-slot=sidebar-navigation-badge]]:pe-10 @max-[7rem]:has-[+_[data-slot=sidebar-navigation-badge]]:pe-2', 'focus-visible:outline-offset-0.5 focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-accent data-active:font-medium data-active:text-accent-foreground motion-reduce:transition-none [&:not(:disabled):not([aria-disabled=true])]:hover:bg-accent [&:not(:disabled):not([aria-disabled=true])]:hover:text-accent-foreground', '[&>[data-sidebar-icon]]:shrink-0 [&>span:last-child]:min-w-0 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', local.class)} {...others} data-scope="sidebar" data-part="navigation-sub-button" data-active={local.active ? '' : void 0} data-slot="sidebar-navigation-sub-button">
       {'string' == typeof local.children ? <span data-slot="sidebar-navigation-sub-label">{local.children}</span> : local.children}
     </ark.a>;
 }
@@ -277,13 +275,13 @@ function SidebarInput(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Input.Root class={cn('w-full group-data-[state=collapsed]/sidebar-panel:hidden', local.class)} {...others} data-slot="sidebar-input"/>;
+    return <Input.Root class={cn('w-full group-data-[state=collapsed]/sidebar-panel:hidden', local.class)} {...others}/>;
 }
 function SidebarSeparator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Separator.Root class={cn('border-border', local.class)} {...others} data-slot="sidebar-separator"/>;
+    return <Separator.Root class={cn('border-border', local.class)} {...others}/>;
 }
 const Sidebar = Object.assign(SidebarRoot, {
     Root: SidebarRoot,

package/dist/components/signature-pad/SignaturePad.d.ts

@@ -12,7 +12,7 @@ declare function SignaturePadControl(props: ComponentProps<typeof SignaturePadPr
 declare function SignaturePadSegment(props: ComponentProps<typeof SignaturePadPrimitive.Segment>): import("solid-js").JSX.Element;
 declare function SignaturePadGuide(props: ComponentProps<typeof SignaturePadPrimitive.Guide>): import("solid-js").JSX.Element;
 declare function SignaturePadClearTrigger(props: ComponentProps<typeof SignaturePadPrimitive.ClearTrigger>): import("solid-js").JSX.Element;
-type SignaturePadCanvasProps = Omit<ComponentProps<typeof SignaturePadPrimitive.Control>, 'children'>;
+type SignaturePadCanvasProps = Omit<ComponentProps<typeof SignaturePadPrimitive.Control>, 'asChild' | 'children'>;
 declare function SignaturePadCanvas(props: SignaturePadCanvasProps): import("solid-js").JSX.Element;
 declare const SignaturePad: typeof SignaturePadRoot & {
     Root: typeof SignaturePadRoot;

package/dist/components/signature-pad/SignaturePad.js

@@ -153,7 +153,7 @@ function SignaturePadClearTrigger(props) {
                     return local['aria-labelledby'];
                 },
                 get ["class"] () {
-                    return cn(resolvedProps.class, 'size-7 rounded-sm bg-transparent text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring motion-reduce:transition-none [&>svg]:size-4 [&>svg]:shrink-0 [@media(hover:hover)]:[&:not([data-disabled]):hover]:bg-accent [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-foreground', local.class);
+                    return cn(resolvedProps.class, 'size-control-md rounded-sm bg-transparent text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ring motion-reduce:transition-none [&>svg]:size-4 [&>svg]:shrink-0 [@media(hover:hover)]:[&:not([data-disabled]):hover]:bg-accent [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-foreground', local.class);
                 },
                 get children () {
                     return resolvedChildren() ?? createComponent(RotateCcwIcon, {

package/dist/components/signature-pad/SignaturePad.jsx

@@ -76,7 +76,7 @@ function SignaturePadClearTrigger(props) {
       </SignaturePad.ClearTrigger>;
     return <SignaturePad.ClearTrigger asChild={(triggerProps)=>{
         const resolvedProps = triggerProps();
-        return <CloseButton.Root {...resolvedProps} aria-label={local['aria-label']} aria-labelledby={local['aria-labelledby']} class={cn(resolvedProps.class, 'size-7 rounded-sm bg-transparent text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring motion-reduce:transition-none [&>svg]:size-4 [&>svg]:shrink-0 [@media(hover:hover)]:[&:not([data-disabled]):hover]:bg-accent [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-foreground', local.class)}>
+        return <CloseButton.Root {...resolvedProps} aria-label={local['aria-label']} aria-labelledby={local['aria-labelledby']} class={cn(resolvedProps.class, 'size-control-md rounded-sm bg-transparent text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ring motion-reduce:transition-none [&>svg]:size-4 [&>svg]:shrink-0 [@media(hover:hover)]:[&:not([data-disabled]):hover]:bg-accent [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-foreground', local.class)}>
             {resolvedChildren() ?? <RotateCcwIcon class="size-4" aria-hidden="true"/>}
           </CloseButton.Root>;
     }} class={triggerClass} {...others} data-slot="signature-pad-clear-trigger" disabled={isDisabled()}/>;