@moduix/solid-tailwind 1.0.0 → 1.1.1

package/dist/components/menu/Menu.jsx

@@ -61,7 +61,7 @@ function MenuTrigger(props) {
         'asChild',
         'class'
     ]);
-    return <Menu.Trigger asChild={local.asChild} data-slot="menu-trigger" data-focus-visible={focusVisible() ? '' : void 0} class={cn(!local.asChild && 'inline-flex min-h-control-md cursor-pointer items-center justify-center gap-2 rounded-md border border-border bg-background px-4 py-1 text-sm font-medium text-foreground outline-0 transition-colors duration-200 ease-in-out select-none active:bg-muted data-disabled:pointer-events-none data-disabled:opacity-50 data-[current]:data-[state=open]:bg-muted motion-reduce:transition-none [&:focus[data-focus-visible]]:outline-1 [&:focus[data-focus-visible]]:-outline-offset-1 [&:focus[data-focus-visible]]:outline-ring [@media(hover:hover)]:hover:bg-muted', local.class)} {...others}/>;
+    return <Menu.Trigger asChild={local.asChild} data-focus-visible={focusVisible() ? '' : void 0} class={cn(!local.asChild && 'inline-flex min-h-control-md cursor-pointer items-center justify-center gap-2 rounded-md border border-border bg-background px-4 py-1 text-sm font-medium text-foreground outline-0 transition-colors duration-200 ease-in-out select-none active:bg-muted data-disabled:pointer-events-none data-disabled:opacity-50 data-[current]:data-[state=open]:bg-muted motion-reduce:transition-none [&:focus[data-focus-visible]]:outline-1 [&:focus[data-focus-visible]]:-outline-offset-1 [&:focus[data-focus-visible]]:outline-ring [@media(hover:hover)]:hover:bg-muted', local.class)} {...others} data-slot="menu-trigger"/>;
 }
 function MenuTriggerIcon(props) {
     const [local, others] = splitProps(props, [
@@ -69,7 +69,7 @@ function MenuTriggerIcon(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <span data-slot="menu-trigger-icon" class={cn('inline-flex size-4 shrink-0 items-center justify-center [&_svg]:size-full', local.class)} {...others}>
+    return <span class={cn('inline-flex size-4 shrink-0 items-center justify-center [&_svg]:size-full', local.class)} {...others} data-slot="menu-trigger-icon">
       {resolvedChildren() ?? <ChevronDownIcon/>}
     </span>;
 }
@@ -79,7 +79,7 @@ function MenuIndicator(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Menu.Indicator data-slot="menu-indicator" class={cn('inline-flex size-4 shrink-0 items-center justify-center [&_svg]:size-full', local.class)} {...others}>
+    return <Menu.Indicator class={cn('inline-flex size-4 shrink-0 items-center justify-center [&_svg]:size-full', local.class)} {...others} data-slot="menu-indicator">
       {resolvedChildren() ?? <ChevronDownIcon/>}
     </Menu.Indicator>;
 }
@@ -89,14 +89,14 @@ function MenuContextTrigger(props) {
         'asChild',
         'class'
     ]);
-    return <Menu.ContextTrigger asChild={local.asChild} data-slot="menu-context-trigger" data-focus-visible={focusVisible() ? '' : void 0} class={cn(!local.asChild && 'inline-flex min-h-control-md cursor-pointer items-center justify-center gap-2 rounded-md border border-border bg-background px-4 py-1 text-sm font-medium text-foreground outline-0 transition-colors duration-200 ease-in-out select-none active:bg-muted data-disabled:pointer-events-none data-disabled:opacity-50 data-[current]:data-[state=open]:bg-muted motion-reduce:transition-none [&:focus[data-focus-visible]]:outline-1 [&:focus[data-focus-visible]]:-outline-offset-1 [&:focus[data-focus-visible]]:outline-ring [@media(hover:hover)]:hover:bg-muted', local.class)} {...others}/>;
+    return <Menu.ContextTrigger asChild={local.asChild} data-focus-visible={focusVisible() ? '' : void 0} class={cn(!local.asChild && 'inline-flex min-h-control-md cursor-pointer items-center justify-center gap-2 rounded-md border border-border bg-background px-4 py-1 text-sm font-medium text-foreground outline-0 transition-colors duration-200 ease-in-out select-none active:bg-muted data-disabled:pointer-events-none data-disabled:opacity-50 data-[current]:data-[state=open]:bg-muted motion-reduce:transition-none [&:focus[data-focus-visible]]:outline-1 [&:focus[data-focus-visible]]:-outline-offset-1 [&:focus[data-focus-visible]]:outline-ring [@media(hover:hover)]:hover:bg-muted', local.class)} {...others} data-slot="menu-context-trigger"/>;
 }
 function MenuPositioner(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return <OverlayPortal>
-      <Menu.Positioner data-slot="menu-positioner" class={cn('z-[var(--z-index)] w-[var(--positioner-width,auto)] max-w-[var(--available-width)] outline-0', local.class)} {...others}/>
+      <Menu.Positioner class={cn('z-[var(--z-index)] w-[var(--positioner-width,auto)] max-w-[var(--available-width)] outline-0', local.class)} {...others} data-slot="menu-positioner"/>
     </OverlayPortal>;
 }
 function MenuContent(props) {
@@ -105,7 +105,7 @@ function MenuContent(props) {
         'children',
         'class'
     ]);
-    return <Menu.Content asChild={local.asChild} data-slot="menu-content" class={cn('relative z-[calc(var(--moduix-z-popup)+var(--layer-index,0))] flex max-w-[min(20rem,var(--available-width,100vw))] min-w-[min(max(var(--reference-width,0px),12rem),var(--available-width,100vw))] origin-[var(--transform-origin)] flex-col overflow-visible rounded-md bg-popover py-1 text-popover-foreground shadow-lg outline-1 outline-border [--arrow-background:var(--color-popover)] [--arrow-size:0.625rem] data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', local.class)} {...others}>
+    return <Menu.Content asChild={local.asChild} class={cn('relative z-[calc(var(--moduix-z-popup)+var(--layer-index,0))] flex max-w-[min(20rem,var(--available-width,100vw))] min-w-[min(max(var(--reference-width,0px),12rem),var(--available-width,100vw))] origin-[var(--transform-origin)] flex-col overflow-visible rounded-md bg-popover py-1 text-popover-foreground shadow-lg outline-1 outline-border [--arrow-background:var(--color-popover)] [--arrow-size:0.625rem] data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', local.class)} {...others} data-slot="menu-content">
       {local.children}
     </Menu.Content>;
 }
@@ -114,7 +114,7 @@ function MenuViewport(props) {
         'asChild',
         'class'
     ]);
-    return <ark.div asChild={local.asChild} data-scope="menu" data-part="viewport" data-slot="menu-viewport" class={cn('flex max-h-[min(24rem,var(--available-height,100dvh))] flex-col overflow-auto', local.class)} {...others}/>;
+    return <ark.div asChild={local.asChild} data-scope="menu" data-part="viewport" class={cn('flex max-h-[min(24rem,var(--available-height,100dvh))] flex-col overflow-auto', local.class)} {...others} data-slot="menu-viewport"/>;
 }
 function MenuArrow(props) {
     const [local, others] = splitProps(props, [
@@ -122,7 +122,7 @@ function MenuArrow(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Menu.Arrow data-slot="menu-arrow" class={cn('[--arrow-background:var(--color-popover)]', local.class)} {...others}>
+    return <Menu.Arrow class={cn('[--arrow-background:var(--color-popover)]', local.class)} {...others} data-slot="menu-arrow">
       {resolvedChildren() ?? <MenuArrowTip/>}
     </Menu.Arrow>;
 }
@@ -130,25 +130,25 @@ function MenuArrowTip(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Menu.ArrowTip data-slot="menu-arrow-tip" class={cn('[border-block-start:1px_solid_var(--color-border)] [border-inline-start:1px_solid_var(--color-border)]', local.class)} {...others}/>;
+    return <Menu.ArrowTip class={cn('[border-block-start:1px_solid_var(--color-border)] [border-inline-start:1px_solid_var(--color-border)]', local.class)} {...others} data-slot="menu-arrow-tip"/>;
 }
 function MenuItem(props) {
     const [local, others] = splitProps(props, [
         'class',
         'tone'
     ]);
-    return <Menu.Item data-slot="menu-item" data-tone={local.tone ?? 'default'} class={cn(menuItemStyles({
+    return <Menu.Item data-tone={local.tone ?? 'default'} class={cn(menuItemStyles({
         layout: 'item',
         tone: local.tone
-    }), local.class)} {...others}/>;
+    }), local.class)} {...others} data-slot="menu-item"/>;
 }
 function MenuTriggerItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Menu.TriggerItem data-slot="menu-trigger-item" class={cn(menuItemStyles({
+    return <Menu.TriggerItem class={cn(menuItemStyles({
         layout: 'triggerItem'
-    }), local.class)} {...others}/>;
+    }), local.class)} {...others} data-slot="menu-trigger-item"/>;
 }
 function MenuTriggerItemIcon(props) {
     const [local, others] = splitProps(props, [
@@ -156,7 +156,7 @@ function MenuTriggerItemIcon(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <span data-slot="menu-trigger-item-icon" class={cn('inline-flex size-3.5 shrink-0 rtl:-scale-x-100 [&_svg]:size-full', local.class)} {...others}>
+    return <span class={cn('inline-flex size-3.5 shrink-0 rtl:-scale-x-100 [&_svg]:size-full', local.class)} {...others} data-slot="menu-trigger-item-icon">
       {resolvedChildren() ?? <ChevronRightIcon/>}
     </span>;
 }
@@ -164,45 +164,45 @@ function MenuSeparator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Menu.Separator data-slot="menu-separator" class={cn('mx-3 my-1.5 h-px border-0 bg-border', local.class)} {...others}/>;
+    return <Menu.Separator class={cn('mx-3 my-1.5 h-px border-0 bg-border', local.class)} {...others} data-slot="menu-separator"/>;
 }
 function MenuItemGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Menu.ItemGroup data-slot="menu-item-group" class={cn('grid', local.class)} {...others}/>;
+    return <Menu.ItemGroup class={cn('grid', local.class)} {...others} data-slot="menu-item-group"/>;
 }
 function MenuItemGroupLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Menu.ItemGroupLabel data-slot="menu-item-group-label" class={cn('cursor-default px-2.5 py-1 text-xs font-normal text-muted-foreground select-none', local.class)} {...others}/>;
+    return <Menu.ItemGroupLabel class={cn('cursor-default px-2.5 py-1 text-xs font-normal text-muted-foreground select-none', local.class)} {...others} data-slot="menu-item-group-label"/>;
 }
 function MenuRadioItemGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Menu.RadioItemGroup data-slot="menu-radio-item-group" class={cn('grid', local.class)} {...others}/>;
+    return <Menu.RadioItemGroup class={cn('grid', local.class)} {...others} data-slot="menu-radio-item-group"/>;
 }
 function MenuRadioItem(props) {
     const [local, others] = splitProps(props, [
         'class',
         'indicator'
     ]);
-    return <Menu.RadioItem data-slot="menu-radio-item" data-indicator-position={local.indicator ?? 'start'} class={cn(menuItemStyles({
+    return <Menu.RadioItem data-indicator-position={local.indicator ?? 'start'} class={cn(menuItemStyles({
         layout: 'indicatorItem',
         indicator: local.indicator ?? 'start'
-    }), local.class)} {...others}/>;
+    }), local.class)} {...others} data-slot="menu-radio-item"/>;
 }
 function MenuCheckboxItem(props) {
     const [local, others] = splitProps(props, [
         'class',
         'indicator'
     ]);
-    return <Menu.CheckboxItem data-slot="menu-checkbox-item" data-indicator-position={local.indicator ?? 'start'} class={cn(menuItemStyles({
+    return <Menu.CheckboxItem data-indicator-position={local.indicator ?? 'start'} class={cn(menuItemStyles({
         layout: 'indicatorItem',
         indicator: local.indicator ?? 'start'
-    }), local.class)} {...others}/>;
+    }), local.class)} {...others} data-slot="menu-checkbox-item"/>;
 }
 function MenuItemIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -210,7 +210,7 @@ function MenuItemIndicator(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Menu.ItemIndicator data-slot="menu-item-indicator" class={cn('inline-flex size-3 items-center justify-center rounded-xs [&_svg]:size-full', local.class)} {...others}>
+    return <Menu.ItemIndicator class={cn('inline-flex size-3 items-center justify-center rounded-xs [&_svg]:size-full', local.class)} {...others} data-slot="menu-item-indicator">
       {resolvedChildren() ?? <CheckIcon/>}
     </Menu.ItemIndicator>;
 }
@@ -218,31 +218,31 @@ function MenuItemText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Menu.ItemText data-slot="menu-item-text" class={cn('min-w-0 overflow-hidden', local.class)} {...others}/>;
+    return <Menu.ItemText class={cn('min-w-0 overflow-hidden', local.class)} {...others} data-slot="menu-item-text"/>;
 }
 function MenuItemTextContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.span data-slot="menu-item-text-content" class={cn('inline-flex max-w-full min-w-0 items-center gap-2 align-top', local.class)} {...others}/>;
+    return <ark.span class={cn('inline-flex max-w-full min-w-0 items-center gap-2 align-top', local.class)} {...others} data-slot="menu-item-text-content"/>;
 }
 function MenuItemTextIcon(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.span data-slot="menu-item-text-icon" class={cn('inline-flex size-4 shrink-0 items-center justify-center [&_svg]:size-full', local.class)} {...others}/>;
+    return <ark.span class={cn('inline-flex size-4 shrink-0 items-center justify-center [&_svg]:size-full', local.class)} {...others} data-slot="menu-item-text-icon"/>;
 }
 function MenuItemTextLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.span data-slot="menu-item-text-label" class={cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', local.class)} {...others}/>;
+    return <ark.span class={cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', local.class)} {...others} data-slot="menu-item-text-label"/>;
 }
 function MenuItemShortcut(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.span data-slot="menu-item-shortcut" class={cn('ms-auto ps-4 text-xs whitespace-nowrap text-muted-foreground', local.class)} {...others}/>;
+    return <ark.span class={cn('ms-auto ps-4 text-xs whitespace-nowrap text-muted-foreground', local.class)} {...others} data-slot="menu-item-shortcut"/>;
 }
 const Menu_Menu = Object.assign(MenuRoot, {
     Root: MenuRoot,

package/dist/components/navigation-menu/NavigationMenu.js

@@ -7,44 +7,48 @@ function NavigationMenuRoot(props) {
         'class'
     ]);
     return createComponent(NavigationMenu.Root, mergeProps({
-        "data-slot": "navigation-menu-root",
         get ["class"] () {
             return cn('group/navigation-menu relative box-border flex w-fit max-w-full min-w-0 justify-center text-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "navigation-menu-root"
+    }));
 }
 function NavigationMenuRootProvider(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(NavigationMenu.RootProvider, mergeProps({
-        "data-slot": "navigation-menu-root-provider",
         get ["class"] () {
             return cn('group/navigation-menu relative box-border flex w-fit max-w-full min-w-0 justify-center text-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "navigation-menu-root-provider"
+    }));
 }
 function NavigationMenuList(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(NavigationMenu.List, mergeProps({
-        "data-slot": "navigation-menu-list",
         get ["class"] () {
             return cn('group/navigation-menu-list relative m-0 box-border flex max-w-full list-none items-center gap-1 p-0 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch [&>[data-slot=navigation-menu-indicator]]:top-auto [&>[data-slot=navigation-menu-indicator]]:-bottom-2.5 [&>[data-slot=navigation-menu-indicator]]:z-[61]', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "navigation-menu-list"
+    }));
 }
 function NavigationMenuItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(NavigationMenu.Item, mergeProps({
-        "data-slot": "navigation-menu-item",
         get ["class"] () {
             return cn('relative group-has-[>[data-slot=navigation-menu-indicator]]/navigation-menu-list:static group-has-[>[data-slot=navigation-menu-viewport-positioner]>[data-slot=navigation-menu-viewport]]/navigation-menu:static', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "navigation-menu-item"
+    }));
 }
 function NavigationMenuTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -52,91 +56,99 @@ function NavigationMenuTrigger(props) {
         'class'
     ]);
     return createComponent(NavigationMenu.Trigger, mergeProps({
-        "data-slot": "navigation-menu-trigger",
         get asChild () {
             return local.asChild;
         },
         get ["class"] () {
             return cn(!local.asChild && 'box-border inline-flex min-h-control-md items-center justify-center gap-2 rounded-md bg-transparent px-3 py-1 text-sm leading-5 font-medium whitespace-nowrap text-inherit no-underline outline-0 transition-[background-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:outline-offset-0 focus-visible:outline-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 data-[state=open]:bg-muted motion-reduce:transition-none [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:transition-[rotate] [&>svg]:duration-200 [&>svg]:ease-in-out data-[state=open]:[&>svg]:rotate-180 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled])]:hover:bg-muted', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "navigation-menu-trigger"
+    }));
 }
 function NavigationMenuContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(NavigationMenu.Content, mergeProps({
-        "data-slot": "navigation-menu-content",
         get ["class"] () {
             return cn('group/navigation-menu-content absolute start-0 top-[calc(100%+0.5rem)] z-60 box-border flex max-h-[min(24rem,calc(100dvh-1.5rem))] w-max max-w-[min(20rem,calc(100vw-1.5rem))] min-w-[min(max(var(--trigger-width,0px),12rem),calc(100vw-1.5rem))] origin-top-left flex-col overflow-auto overscroll-contain rounded-md bg-popover py-1 text-popover-foreground shadow-lg outline-1 outline-border data-[state=closed]:pointer-events-none data-[state=closed]:animate-moduix-menu-closed group-has-[>[data-slot=navigation-menu-indicator]]/navigation-menu-list:data-[state=closed]:animate-none data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none rtl:origin-top-right [&_[data-slot=navigation-menu-link]]:mx-1 [&_[data-slot=navigation-menu-link]]:justify-start [&_[data-slot=navigation-menu-link]]:rounded-sm [&_[data-slot=navigation-menu-link]]:px-2', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "navigation-menu-content"
+    }));
 }
 function NavigationMenuLink(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(NavigationMenu.Link, mergeProps({
-        "data-slot": "navigation-menu-link",
         get ["class"] () {
             return cn('box-border inline-flex min-h-control-md items-center justify-center gap-2 rounded-md bg-transparent px-3 py-1 text-sm leading-5 font-medium whitespace-nowrap text-inherit no-underline outline-0 transition-[background-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:outline-offset-0 focus-visible:outline-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-current:bg-transparent data-current:text-primary data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:transition-[rotate] [&>svg]:duration-200 [&>svg]:ease-in-out [@media(hover:hover)]:[&:not(:disabled):not([data-disabled])]:hover:bg-muted', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "navigation-menu-link"
+    }));
 }
 function NavigationMenuIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(NavigationMenu.Indicator, mergeProps({
-        "data-slot": "navigation-menu-indicator",
         get ["class"] () {
             return cn('pointer-events-none absolute start-0 -top-2.5 flex h-2.5 w-[var(--trigger-width,0px)] [translate:var(--trigger-x,0px)_0] justify-center transition-[translate,inline-size] duration-200 ease-in-out data-[state=closed]:opacity-0 data-[state=open]:opacity-100 motion-reduce:transition-none', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "navigation-menu-indicator"
+    }));
 }
 function NavigationMenuItemIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(NavigationMenu.ItemIndicator, mergeProps({
-        "data-slot": "navigation-menu-item-indicator",
         get ["class"] () {
             return cn('absolute inset-x-2 bottom-0 h-0.5 rounded-full bg-current', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "navigation-menu-item-indicator"
+    }));
 }
 function NavigationMenuArrow(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(NavigationMenu.Arrow, mergeProps({
-        "data-slot": "navigation-menu-arrow",
         get ["class"] () {
             return cn('relative top-1 size-2.5 rotate-45 border-s border-t border-border bg-popover', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "navigation-menu-arrow"
+    }));
 }
 function NavigationMenuViewportPositioner(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(NavigationMenu.ViewportPositioner, mergeProps({
-        "data-slot": "navigation-menu-viewport-positioner",
         get ["class"] () {
             return cn('absolute start-0 top-full z-60 flex [translate:var(--viewport-x,0px)_0] data-[orientation=vertical]:start-full data-[orientation=vertical]:top-[var(--viewport-y,0px)] data-[orientation=vertical]:[translate:0_0] data-[orientation=vertical]:[&>[data-slot=navigation-menu-viewport]]:ms-2 data-[orientation=vertical]:[&>[data-slot=navigation-menu-viewport]]:mt-0', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "navigation-menu-viewport-positioner"
+    }));
 }
 function NavigationMenuViewport(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(NavigationMenu.Viewport, mergeProps({
-        "data-slot": "navigation-menu-viewport",
         get ["class"] () {
             return cn('relative mt-2.5 box-border h-[var(--viewport-height)] max-h-[min(32rem,calc(100dvh-1.5rem))] w-[var(--viewport-width)] max-w-[min(40rem,calc(100vw-1.5rem))] origin-top overflow-hidden rounded-md bg-popover text-popover-foreground shadow-lg outline-1 outline-border transition-[inline-size,block-size] duration-200 ease-in-out data-[state=closed]:pointer-events-none data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none motion-reduce:transition-none [&_[data-slot=navigation-menu-content]]:absolute [&_[data-slot=navigation-menu-content]]:top-0 [&_[data-slot=navigation-menu-content]]:right-auto [&_[data-slot=navigation-menu-content]]:bottom-auto [&_[data-slot=navigation-menu-content]]:left-0 [&_[data-slot=navigation-menu-content]]:m-0 [&_[data-slot=navigation-menu-content]]:max-h-none [&_[data-slot=navigation-menu-content]]:origin-center [&_[data-slot=navigation-menu-content]]:overflow-visible [&_[data-slot=navigation-menu-content]]:rounded-none [&_[data-slot=navigation-menu-content]]:bg-transparent [&_[data-slot=navigation-menu-content]]:shadow-none [&_[data-slot=navigation-menu-content]]:outline-0 [&_[data-slot=navigation-menu-content]]:will-change-[translate,opacity] [&_[data-slot=navigation-menu-content][data-motion=from-end][data-state=open]]:animate-moduix-navigation-menu-content-from-end [&_[data-slot=navigation-menu-content][data-motion=from-start][data-state=open]]:animate-moduix-navigation-menu-content-from-start [&_[data-slot=navigation-menu-content][data-motion=to-end][data-state=closed]]:animate-moduix-navigation-menu-content-to-end [&_[data-slot=navigation-menu-content][data-motion=to-start][data-state=closed]]:animate-moduix-navigation-menu-content-to-start [&_[data-slot=navigation-menu-content][data-state]]:animate-none', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "navigation-menu-viewport"
+    }));
 }
 const NavigationMenu_NavigationMenu = Object.assign(NavigationMenuRoot, {
     Root: NavigationMenuRoot,

package/dist/components/navigation-menu/NavigationMenu.jsx

@@ -5,74 +5,74 @@ function NavigationMenuRoot(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <NavigationMenu.Root data-slot="navigation-menu-root" class={cn('group/navigation-menu relative box-border flex w-fit max-w-full min-w-0 justify-center text-foreground', local.class)} {...others}/>;
+    return <NavigationMenu.Root class={cn('group/navigation-menu relative box-border flex w-fit max-w-full min-w-0 justify-center text-foreground', local.class)} {...others} data-slot="navigation-menu-root"/>;
 }
 function NavigationMenuRootProvider(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <NavigationMenu.RootProvider data-slot="navigation-menu-root-provider" class={cn('group/navigation-menu relative box-border flex w-fit max-w-full min-w-0 justify-center text-foreground', local.class)} {...others}/>;
+    return <NavigationMenu.RootProvider class={cn('group/navigation-menu relative box-border flex w-fit max-w-full min-w-0 justify-center text-foreground', local.class)} {...others} data-slot="navigation-menu-root-provider"/>;
 }
 function NavigationMenuList(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <NavigationMenu.List data-slot="navigation-menu-list" class={cn('group/navigation-menu-list relative m-0 box-border flex max-w-full list-none items-center gap-1 p-0 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch [&>[data-slot=navigation-menu-indicator]]:top-auto [&>[data-slot=navigation-menu-indicator]]:-bottom-2.5 [&>[data-slot=navigation-menu-indicator]]:z-[61]', local.class)} {...others}/>;
+    return <NavigationMenu.List class={cn('group/navigation-menu-list relative m-0 box-border flex max-w-full list-none items-center gap-1 p-0 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch [&>[data-slot=navigation-menu-indicator]]:top-auto [&>[data-slot=navigation-menu-indicator]]:-bottom-2.5 [&>[data-slot=navigation-menu-indicator]]:z-[61]', local.class)} {...others} data-slot="navigation-menu-list"/>;
 }
 function NavigationMenuItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <NavigationMenu.Item data-slot="navigation-menu-item" class={cn('relative group-has-[>[data-slot=navigation-menu-indicator]]/navigation-menu-list:static group-has-[>[data-slot=navigation-menu-viewport-positioner]>[data-slot=navigation-menu-viewport]]/navigation-menu:static', local.class)} {...others}/>;
+    return <NavigationMenu.Item class={cn('relative group-has-[>[data-slot=navigation-menu-indicator]]/navigation-menu-list:static group-has-[>[data-slot=navigation-menu-viewport-positioner]>[data-slot=navigation-menu-viewport]]/navigation-menu:static', local.class)} {...others} data-slot="navigation-menu-item"/>;
 }
 function NavigationMenuTrigger(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <NavigationMenu.Trigger data-slot="navigation-menu-trigger" asChild={local.asChild} class={cn(!local.asChild && 'box-border inline-flex min-h-control-md items-center justify-center gap-2 rounded-md bg-transparent px-3 py-1 text-sm leading-5 font-medium whitespace-nowrap text-inherit no-underline outline-0 transition-[background-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:outline-offset-0 focus-visible:outline-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 data-[state=open]:bg-muted motion-reduce:transition-none [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:transition-[rotate] [&>svg]:duration-200 [&>svg]:ease-in-out data-[state=open]:[&>svg]:rotate-180 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled])]:hover:bg-muted', local.class)} {...others}/>;
+    return <NavigationMenu.Trigger asChild={local.asChild} class={cn(!local.asChild && 'box-border inline-flex min-h-control-md items-center justify-center gap-2 rounded-md bg-transparent px-3 py-1 text-sm leading-5 font-medium whitespace-nowrap text-inherit no-underline outline-0 transition-[background-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:outline-offset-0 focus-visible:outline-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 data-[state=open]:bg-muted motion-reduce:transition-none [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:transition-[rotate] [&>svg]:duration-200 [&>svg]:ease-in-out data-[state=open]:[&>svg]:rotate-180 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled])]:hover:bg-muted', local.class)} {...others} data-slot="navigation-menu-trigger"/>;
 }
 function NavigationMenuContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <NavigationMenu.Content data-slot="navigation-menu-content" class={cn('group/navigation-menu-content absolute start-0 top-[calc(100%+0.5rem)] z-60 box-border flex max-h-[min(24rem,calc(100dvh-1.5rem))] w-max max-w-[min(20rem,calc(100vw-1.5rem))] min-w-[min(max(var(--trigger-width,0px),12rem),calc(100vw-1.5rem))] origin-top-left flex-col overflow-auto overscroll-contain rounded-md bg-popover py-1 text-popover-foreground shadow-lg outline-1 outline-border data-[state=closed]:pointer-events-none data-[state=closed]:animate-moduix-menu-closed group-has-[>[data-slot=navigation-menu-indicator]]/navigation-menu-list:data-[state=closed]:animate-none data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none rtl:origin-top-right [&_[data-slot=navigation-menu-link]]:mx-1 [&_[data-slot=navigation-menu-link]]:justify-start [&_[data-slot=navigation-menu-link]]:rounded-sm [&_[data-slot=navigation-menu-link]]:px-2', local.class)} {...others}/>;
+    return <NavigationMenu.Content class={cn('group/navigation-menu-content absolute start-0 top-[calc(100%+0.5rem)] z-60 box-border flex max-h-[min(24rem,calc(100dvh-1.5rem))] w-max max-w-[min(20rem,calc(100vw-1.5rem))] min-w-[min(max(var(--trigger-width,0px),12rem),calc(100vw-1.5rem))] origin-top-left flex-col overflow-auto overscroll-contain rounded-md bg-popover py-1 text-popover-foreground shadow-lg outline-1 outline-border data-[state=closed]:pointer-events-none data-[state=closed]:animate-moduix-menu-closed group-has-[>[data-slot=navigation-menu-indicator]]/navigation-menu-list:data-[state=closed]:animate-none data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none rtl:origin-top-right [&_[data-slot=navigation-menu-link]]:mx-1 [&_[data-slot=navigation-menu-link]]:justify-start [&_[data-slot=navigation-menu-link]]:rounded-sm [&_[data-slot=navigation-menu-link]]:px-2', local.class)} {...others} data-slot="navigation-menu-content"/>;
 }
 function NavigationMenuLink(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <NavigationMenu.Link data-slot="navigation-menu-link" class={cn('box-border inline-flex min-h-control-md items-center justify-center gap-2 rounded-md bg-transparent px-3 py-1 text-sm leading-5 font-medium whitespace-nowrap text-inherit no-underline outline-0 transition-[background-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:outline-offset-0 focus-visible:outline-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-current:bg-transparent data-current:text-primary data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:transition-[rotate] [&>svg]:duration-200 [&>svg]:ease-in-out [@media(hover:hover)]:[&:not(:disabled):not([data-disabled])]:hover:bg-muted', local.class)} {...others}/>;
+    return <NavigationMenu.Link class={cn('box-border inline-flex min-h-control-md items-center justify-center gap-2 rounded-md bg-transparent px-3 py-1 text-sm leading-5 font-medium whitespace-nowrap text-inherit no-underline outline-0 transition-[background-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:outline-offset-0 focus-visible:outline-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-current:bg-transparent data-current:text-primary data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:transition-[rotate] [&>svg]:duration-200 [&>svg]:ease-in-out [@media(hover:hover)]:[&:not(:disabled):not([data-disabled])]:hover:bg-muted', local.class)} {...others} data-slot="navigation-menu-link"/>;
 }
 function NavigationMenuIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <NavigationMenu.Indicator data-slot="navigation-menu-indicator" class={cn('pointer-events-none absolute start-0 -top-2.5 flex h-2.5 w-[var(--trigger-width,0px)] [translate:var(--trigger-x,0px)_0] justify-center transition-[translate,inline-size] duration-200 ease-in-out data-[state=closed]:opacity-0 data-[state=open]:opacity-100 motion-reduce:transition-none', local.class)} {...others}/>;
+    return <NavigationMenu.Indicator class={cn('pointer-events-none absolute start-0 -top-2.5 flex h-2.5 w-[var(--trigger-width,0px)] [translate:var(--trigger-x,0px)_0] justify-center transition-[translate,inline-size] duration-200 ease-in-out data-[state=closed]:opacity-0 data-[state=open]:opacity-100 motion-reduce:transition-none', local.class)} {...others} data-slot="navigation-menu-indicator"/>;
 }
 function NavigationMenuItemIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <NavigationMenu.ItemIndicator data-slot="navigation-menu-item-indicator" class={cn('absolute inset-x-2 bottom-0 h-0.5 rounded-full bg-current', local.class)} {...others}/>;
+    return <NavigationMenu.ItemIndicator class={cn('absolute inset-x-2 bottom-0 h-0.5 rounded-full bg-current', local.class)} {...others} data-slot="navigation-menu-item-indicator"/>;
 }
 function NavigationMenuArrow(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <NavigationMenu.Arrow data-slot="navigation-menu-arrow" class={cn('relative top-1 size-2.5 rotate-45 border-s border-t border-border bg-popover', local.class)} {...others}/>;
+    return <NavigationMenu.Arrow class={cn('relative top-1 size-2.5 rotate-45 border-s border-t border-border bg-popover', local.class)} {...others} data-slot="navigation-menu-arrow"/>;
 }
 function NavigationMenuViewportPositioner(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <NavigationMenu.ViewportPositioner data-slot="navigation-menu-viewport-positioner" class={cn('absolute start-0 top-full z-60 flex [translate:var(--viewport-x,0px)_0] data-[orientation=vertical]:start-full data-[orientation=vertical]:top-[var(--viewport-y,0px)] data-[orientation=vertical]:[translate:0_0] data-[orientation=vertical]:[&>[data-slot=navigation-menu-viewport]]:ms-2 data-[orientation=vertical]:[&>[data-slot=navigation-menu-viewport]]:mt-0', local.class)} {...others}/>;
+    return <NavigationMenu.ViewportPositioner class={cn('absolute start-0 top-full z-60 flex [translate:var(--viewport-x,0px)_0] data-[orientation=vertical]:start-full data-[orientation=vertical]:top-[var(--viewport-y,0px)] data-[orientation=vertical]:[translate:0_0] data-[orientation=vertical]:[&>[data-slot=navigation-menu-viewport]]:ms-2 data-[orientation=vertical]:[&>[data-slot=navigation-menu-viewport]]:mt-0', local.class)} {...others} data-slot="navigation-menu-viewport-positioner"/>;
 }
 function NavigationMenuViewport(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <NavigationMenu.Viewport data-slot="navigation-menu-viewport" class={cn('relative mt-2.5 box-border h-[var(--viewport-height)] max-h-[min(32rem,calc(100dvh-1.5rem))] w-[var(--viewport-width)] max-w-[min(40rem,calc(100vw-1.5rem))] origin-top overflow-hidden rounded-md bg-popover text-popover-foreground shadow-lg outline-1 outline-border transition-[inline-size,block-size] duration-200 ease-in-out data-[state=closed]:pointer-events-none data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none motion-reduce:transition-none [&_[data-slot=navigation-menu-content]]:absolute [&_[data-slot=navigation-menu-content]]:top-0 [&_[data-slot=navigation-menu-content]]:right-auto [&_[data-slot=navigation-menu-content]]:bottom-auto [&_[data-slot=navigation-menu-content]]:left-0 [&_[data-slot=navigation-menu-content]]:m-0 [&_[data-slot=navigation-menu-content]]:max-h-none [&_[data-slot=navigation-menu-content]]:origin-center [&_[data-slot=navigation-menu-content]]:overflow-visible [&_[data-slot=navigation-menu-content]]:rounded-none [&_[data-slot=navigation-menu-content]]:bg-transparent [&_[data-slot=navigation-menu-content]]:shadow-none [&_[data-slot=navigation-menu-content]]:outline-0 [&_[data-slot=navigation-menu-content]]:will-change-[translate,opacity] [&_[data-slot=navigation-menu-content][data-motion=from-end][data-state=open]]:animate-moduix-navigation-menu-content-from-end [&_[data-slot=navigation-menu-content][data-motion=from-start][data-state=open]]:animate-moduix-navigation-menu-content-from-start [&_[data-slot=navigation-menu-content][data-motion=to-end][data-state=closed]]:animate-moduix-navigation-menu-content-to-end [&_[data-slot=navigation-menu-content][data-motion=to-start][data-state=closed]]:animate-moduix-navigation-menu-content-to-start [&_[data-slot=navigation-menu-content][data-state]]:animate-none', local.class)} {...others}/>;
+    return <NavigationMenu.Viewport class={cn('relative mt-2.5 box-border h-[var(--viewport-height)] max-h-[min(32rem,calc(100dvh-1.5rem))] w-[var(--viewport-width)] max-w-[min(40rem,calc(100vw-1.5rem))] origin-top overflow-hidden rounded-md bg-popover text-popover-foreground shadow-lg outline-1 outline-border transition-[inline-size,block-size] duration-200 ease-in-out data-[state=closed]:pointer-events-none data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none motion-reduce:transition-none [&_[data-slot=navigation-menu-content]]:absolute [&_[data-slot=navigation-menu-content]]:top-0 [&_[data-slot=navigation-menu-content]]:right-auto [&_[data-slot=navigation-menu-content]]:bottom-auto [&_[data-slot=navigation-menu-content]]:left-0 [&_[data-slot=navigation-menu-content]]:m-0 [&_[data-slot=navigation-menu-content]]:max-h-none [&_[data-slot=navigation-menu-content]]:origin-center [&_[data-slot=navigation-menu-content]]:overflow-visible [&_[data-slot=navigation-menu-content]]:rounded-none [&_[data-slot=navigation-menu-content]]:bg-transparent [&_[data-slot=navigation-menu-content]]:shadow-none [&_[data-slot=navigation-menu-content]]:outline-0 [&_[data-slot=navigation-menu-content]]:will-change-[translate,opacity] [&_[data-slot=navigation-menu-content][data-motion=from-end][data-state=open]]:animate-moduix-navigation-menu-content-from-end [&_[data-slot=navigation-menu-content][data-motion=from-start][data-state=open]]:animate-moduix-navigation-menu-content-from-start [&_[data-slot=navigation-menu-content][data-motion=to-end][data-state=closed]]:animate-moduix-navigation-menu-content-to-end [&_[data-slot=navigation-menu-content][data-motion=to-start][data-state=closed]]:animate-moduix-navigation-menu-content-to-start [&_[data-slot=navigation-menu-content][data-state]]:animate-none', local.class)} {...others} data-slot="navigation-menu-viewport"/>;
 }
 const NavigationMenu_NavigationMenu = Object.assign(NavigationMenuRoot, {
     Root: NavigationMenuRoot,

package/dist/components/number-input/NumberInput.js

@@ -17,11 +17,11 @@ function NumberInputRoot(props) {
         get value () {
             return local.value;
         },
-        "data-slot": "number-input-root",
         get ["class"] () {
             return cn('group/number-input flex w-auto max-w-none flex-col items-start gap-1 data-disabled:opacity-50', local.class);
         }
     }, others, {
+        "data-slot": "number-input-root",
         get children () {
             return local.children;
         }
@@ -41,11 +41,11 @@ function NumberInputRootProvider(props) {
         get value () {
             return local.value;
         },
-        "data-slot": "number-input-root-provider",
         get ["class"] () {
             return cn('group/number-input flex w-auto max-w-none flex-col items-start gap-1 data-disabled:opacity-50', local.class);
         }
     }, others, {
+        "data-slot": "number-input-root-provider",
         get children () {
             return local.children;
         }
@@ -56,33 +56,36 @@ function NumberInputLabel(props) {
         'class'
     ]);
     return createComponent(NumberInput.Label, mergeProps({
-        "data-slot": "number-input-label",
         get ["class"] () {
             return cn('text-sm leading-5 font-medium text-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "number-input-label"
+    }));
 }
 function NumberInputScrubber(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(NumberInput.Scrubber, mergeProps({
-        "data-slot": "number-input-scrubber",
         get ["class"] () {
             return cn('inline-flex cursor-ew-resize items-center gap-2 text-foreground select-none data-disabled:cursor-default', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "number-input-scrubber"
+    }));
 }
 function NumberInputControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(NumberInput.Control, mergeProps({
-        "data-slot": "number-input-control",
         get ["class"] () {
             return cn('inline-flex items-stretch', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "number-input-control"
+    }));
 }
 function NumberInputDecrementTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -91,11 +94,11 @@ function NumberInputDecrementTrigger(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(NumberInput.DecrementTrigger, mergeProps({
-        "data-slot": "number-input-decrement-trigger",
         get ["class"] () {
             return cn('box-border inline-flex size-control-md min-w-control-md cursor-pointer items-center justify-center rounded-s-md border border-e-0 border-border bg-background p-0 text-foreground outline-0 transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none group-data-invalid/number-input:border-destructive focus-visible:z-1 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring group-data-invalid/number-input:focus-visible:outline-destructive active:bg-accent disabled:pointer-events-none data-disabled:pointer-events-none data-focus:z-1 data-focus:outline-1 data-focus:-outline-offset-1 data-focus:outline-ring group-data-invalid/number-input:data-focus:outline-destructive data-invalid:border-destructive data-invalid:focus-visible:outline-destructive data-invalid:data-focus:outline-destructive motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class);
         }
     }, others, {
+        "data-slot": "number-input-decrement-trigger",
         get children () {
             return resolvedChildren() ?? createComponent(MinusIcon, {});
         }
@@ -106,11 +109,12 @@ function NumberInputInput(props) {
         'class'
     ]);
     return createComponent(NumberInput.Input, mergeProps({
-        "data-slot": "number-input-input",
         get ["class"] () {
             return cn('h-control-md w-24 rounded-none border-x-0 border-y border-border border-x-current bg-background px-3 py-1 text-center text-md leading-6 text-foreground tabular-nums outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,opacity] duration-200 ease-in-out group-data-invalid/number-input:border-t-destructive group-data-invalid/number-input:border-b-destructive focus-visible:z-1 focus-visible:outline-ring group-data-invalid/number-input:focus-visible:outline-destructive data-focus:z-1 data-focus:outline-ring group-data-invalid/number-input:data-focus:outline-destructive data-invalid:border-t-destructive data-invalid:border-b-destructive data-invalid:focus-visible:outline-destructive data-invalid:data-focus:outline-destructive motion-reduce:transition-none', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "number-input-input"
+    }));
 }
 function NumberInputIncrementTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -119,11 +123,11 @@ function NumberInputIncrementTrigger(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(NumberInput.IncrementTrigger, mergeProps({
-        "data-slot": "number-input-increment-trigger",
         get ["class"] () {
             return cn('box-border inline-flex size-control-md min-w-control-md cursor-pointer items-center justify-center rounded-e-md border border-s-0 border-border bg-background p-0 text-foreground outline-0 transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none group-data-invalid/number-input:border-destructive focus-visible:z-1 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring group-data-invalid/number-input:focus-visible:outline-destructive active:bg-accent disabled:pointer-events-none data-disabled:pointer-events-none data-focus:z-1 data-focus:outline-1 data-focus:-outline-offset-1 data-focus:outline-ring group-data-invalid/number-input:data-focus:outline-destructive data-invalid:border-destructive data-invalid:focus-visible:outline-destructive data-invalid:data-focus:outline-destructive motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class);
         }
     }, others, {
+        "data-slot": "number-input-increment-trigger",
         get children () {
             return resolvedChildren() ?? createComponent(PlusIcon, {});
         }
@@ -134,11 +138,12 @@ function NumberInputValueText(props) {
         'class'
     ]);
     return createComponent(NumberInput.ValueText, mergeProps({
-        "data-slot": "number-input-value-text",
         get ["class"] () {
             return cn('text-sm leading-5 text-muted-foreground tabular-nums', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "number-input-value-text"
+    }));
 }
 function NumberInputField(props) {
     return createComponent(NumberInputControl, mergeProps(props, {