@moduix/solid-tailwind 1.0.0 → 1.1.0

package/dist/components/listbox/Listbox.jsx

@@ -8,32 +8,32 @@ const Listbox_ListboxRoot = function(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Listbox.Root data-slot="listbox-root" class={cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-3 text-foreground data-disabled:opacity-50', local.class)} {...others}/>;
+    return <Listbox.Root class={cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-3 text-foreground data-disabled:opacity-50', local.class)} {...others} data-slot="listbox-root"/>;
 };
 const Listbox_ListboxRootProvider = function(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Listbox.RootProvider data-slot="listbox-root-provider" class={cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-3 text-foreground data-disabled:opacity-50', local.class)} {...others}/>;
+    return <Listbox.RootProvider class={cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-3 text-foreground data-disabled:opacity-50', local.class)} {...others} data-slot="listbox-root-provider"/>;
 };
 function ListboxLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Listbox.Label data-slot="listbox-label" class={cn('text-sm leading-5 font-medium text-foreground select-none', local.class)} {...others}/>;
+    return <Listbox.Label class={cn('text-sm leading-5 font-medium text-foreground select-none', local.class)} {...others} data-slot="listbox-label"/>;
 }
 function ListboxInput(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Listbox.Input data-slot="listbox-input" class={cn('m-0 box-border min-h-control-md w-full rounded-md border border-border bg-background px-3 py-1 text-md leading-6 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,opacity] duration-200 ease-in-out group-has-[[data-slot=listbox-filter-icon]]/listbox-filter:ps-9 group-has-[[data-slot=listbox-filter-icon]]/listbox-filter:pe-10 group-has-[+_[data-slot=listbox-content]]/listbox-filter:rounded-b-none group-has-[+_[data-slot=listbox-content]]/listbox-filter:border-b-0 placeholder:text-muted-foreground focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none', local.class)} {...others}/>;
+    return <Listbox.Input class={cn('m-0 box-border min-h-control-md w-full rounded-md border border-border bg-background px-3 py-1 text-md leading-6 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,opacity] duration-200 ease-in-out group-has-[[data-slot=listbox-filter-icon]]/listbox-filter:ps-9 group-has-[[data-slot=listbox-filter-icon]]/listbox-filter:pe-10 group-has-[+_[data-slot=listbox-content]]/listbox-filter:rounded-b-none group-has-[+_[data-slot=listbox-content]]/listbox-filter:border-b-0 placeholder:text-muted-foreground focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none', local.class)} {...others} data-slot="listbox-input"/>;
 }
 function ListboxFilter(props) {
     const [local, others] = splitProps(props, [
         'children',
         'class'
     ]);
-    return <div data-slot="listbox-filter" class={cn('group/listbox-filter peer/listbox-filter relative box-border w-full', local.class)} {...others}>
+    return <div class={cn('group/listbox-filter peer/listbox-filter relative box-border w-full', local.class)} {...others} data-slot="listbox-filter">
       <SearchIcon data-slot="listbox-filter-icon" class="pointer-events-none absolute start-3 top-1/2 z-1 size-4 -translate-y-1/2 text-muted-foreground"/>
       {local.children}
     </div>;
@@ -46,7 +46,7 @@ function ListboxClearTrigger(props) {
         'type'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <CloseButton.Root data-slot="listbox-clear-trigger" class={cn('absolute end-3 top-1/2 size-control-xs -translate-y-1/2 rounded-sm bg-transparent text-muted-foreground [&>svg]:size-4 [@media(hover:hover)]:hover:bg-muted [@media(hover:hover)]:hover:text-foreground', local.class)} type={local.type ?? 'button'} aria-label={local['aria-label'] ?? 'Clear search'} {...others}>
+    return <CloseButton.Root class={cn('absolute end-3 top-1/2 size-control-xs -translate-y-1/2 rounded-sm bg-transparent text-muted-foreground [&>svg]:size-4 [@media(hover:hover)]:hover:bg-muted [@media(hover:hover)]:hover:text-foreground', local.class)} type={local.type ?? 'button'} aria-label={local['aria-label'] ?? 'Clear search'} {...others} data-slot="listbox-clear-trigger">
       {resolvedChildren()}
     </CloseButton.Root>;
 }
@@ -54,37 +54,37 @@ function ListboxContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Listbox.Content data-slot="listbox-content" class={cn('box-border flex max-h-56 min-h-0 scroll-py-1 [scrollbar-gutter:stable] flex-col overflow-x-hidden overflow-y-auto overscroll-contain rounded-md border border-border bg-background py-1 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color] duration-200 ease-in-out peer-data-[slot=listbox-filter]/listbox-filter:-mt-3 peer-data-[slot=listbox-filter]/listbox-filter:rounded-t-none focus-visible:outline-ring data-[layout=grid]:grid data-[layout=grid]:grid-cols-[repeat(var(--column-count),minmax(0,1fr))] data-[layout=grid]:gap-1 data-[layout=grid]:p-2 data-[orientation=horizontal]:not-data-[layout=grid]:max-h-none data-[orientation=horizontal]:not-data-[layout=grid]:flex-row data-[orientation=horizontal]:not-data-[layout=grid]:gap-2 data-[orientation=horizontal]:not-data-[layout=grid]:overflow-x-auto data-[orientation=horizontal]:not-data-[layout=grid]:overflow-y-hidden data-[orientation=horizontal]:not-data-[layout=grid]:px-1 motion-reduce:transition-none', local.class)} {...others}/>;
+    return <Listbox.Content class={cn('box-border flex max-h-56 min-h-0 scroll-py-1 [scrollbar-gutter:stable] flex-col overflow-x-hidden overflow-y-auto overscroll-contain rounded-md border border-border bg-background py-1 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color] duration-200 ease-in-out peer-data-[slot=listbox-filter]/listbox-filter:-mt-3 peer-data-[slot=listbox-filter]/listbox-filter:rounded-t-none focus-visible:outline-ring data-[layout=grid]:grid data-[layout=grid]:grid-cols-[repeat(var(--column-count),minmax(0,1fr))] data-[layout=grid]:gap-1 data-[layout=grid]:p-2 data-[orientation=horizontal]:not-data-[layout=grid]:max-h-none data-[orientation=horizontal]:not-data-[layout=grid]:flex-row data-[orientation=horizontal]:not-data-[layout=grid]:gap-2 data-[orientation=horizontal]:not-data-[layout=grid]:overflow-x-auto data-[orientation=horizontal]:not-data-[layout=grid]:overflow-y-hidden data-[orientation=horizontal]:not-data-[layout=grid]:px-1 motion-reduce:transition-none', local.class)} {...others} data-slot="listbox-content"/>;
 }
 function ListboxEmpty(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Listbox.Empty data-slot="listbox-empty" class={cn('px-3 py-1 text-center text-sm leading-5 text-muted-foreground', local.class)} {...others}/>;
+    return <Listbox.Empty class={cn('px-3 py-1 text-center text-sm leading-5 text-muted-foreground', local.class)} {...others} data-slot="listbox-empty"/>;
 }
 function ListboxItemGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Listbox.ItemGroup data-slot="listbox-item-group" class={cn('flex flex-col [&+&]:mt-2', local.class)} {...others}/>;
+    return <Listbox.ItemGroup class={cn('flex flex-col [&+&]:mt-2', local.class)} {...others} data-slot="listbox-item-group"/>;
 }
 function ListboxItemGroupLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Listbox.ItemGroupLabel data-slot="listbox-item-group-label" class={cn('px-2 py-1 text-xs leading-4 font-normal text-muted-foreground select-none', local.class)} {...others}/>;
+    return <Listbox.ItemGroupLabel class={cn('px-2 py-1 text-xs leading-4 font-normal text-muted-foreground select-none', local.class)} {...others} data-slot="listbox-item-group-label"/>;
 }
 function ListboxItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Listbox.Item data-slot="listbox-item" class={cn('relative mx-1 box-border grid min-h-control-sm w-[calc(100%-0.5rem)] cursor-pointer grid-cols-[minmax(0,1fr)_1rem] items-center gap-2 rounded-sm bg-transparent px-3 py-1 text-sm leading-5 text-foreground outline-0 transition-[background-color,color] duration-200 ease-in-out select-none data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:text-muted-foreground data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[layout=grid]:mx-0 data-[layout=grid]:w-full data-[layout=grid]:min-w-0 data-[layout=grid]:grid-cols-1 data-[layout=grid]:justify-items-center data-[layout=grid]:text-center data-[layout=grid]:data-selected:bg-muted data-[layout=grid]:data-selected:text-foreground data-[orientation=horizontal]:not-data-[layout=grid]:w-44 data-[orientation=horizontal]:not-data-[layout=grid]:min-w-44 data-[orientation=horizontal]:not-data-[layout=grid]:items-start motion-reduce:transition-none [@media(hover:hover)]:[&:not([data-disabled]):hover]:bg-accent [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-accent-foreground', local.class)} {...others}/>;
+    return <Listbox.Item class={cn('relative mx-1 box-border grid min-h-control-sm w-[calc(100%-0.5rem)] cursor-pointer grid-cols-[minmax(0,1fr)_1rem] items-center gap-2 rounded-sm bg-transparent px-3 py-1 text-sm leading-5 text-foreground outline-0 transition-[background-color,color] duration-200 ease-in-out select-none data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:text-muted-foreground data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[layout=grid]:mx-0 data-[layout=grid]:w-full data-[layout=grid]:min-w-0 data-[layout=grid]:grid-cols-1 data-[layout=grid]:justify-items-center data-[layout=grid]:text-center data-[layout=grid]:data-selected:bg-muted data-[layout=grid]:data-selected:text-foreground data-[orientation=horizontal]:not-data-[layout=grid]:w-44 data-[orientation=horizontal]:not-data-[layout=grid]:min-w-44 data-[orientation=horizontal]:not-data-[layout=grid]:items-start motion-reduce:transition-none [@media(hover:hover)]:[&:not([data-disabled]):hover]:bg-accent [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-accent-foreground', local.class)} {...others} data-slot="listbox-item"/>;
 }
 function ListboxItemText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Listbox.ItemText data-slot="listbox-item-text" class={cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', local.class)} {...others}/>;
+    return <Listbox.ItemText class={cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', local.class)} {...others} data-slot="listbox-item-text"/>;
 }
 function ListboxItemIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -92,7 +92,7 @@ function ListboxItemIndicator(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Listbox.ItemIndicator data-slot="listbox-item-indicator" class={cn('inline-flex size-4 shrink-0 items-center justify-center data-[state=unchecked]:invisible [&>svg]:size-3', local.class)} {...others}>
+    return <Listbox.ItemIndicator class={cn('inline-flex size-4 shrink-0 items-center justify-center data-[state=unchecked]:invisible [&>svg]:size-3', local.class)} {...others} data-slot="listbox-item-indicator">
       {resolvedChildren() ?? <CheckIcon/>}
     </Listbox.ItemIndicator>;
 }
@@ -100,25 +100,25 @@ function ListboxValueText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Listbox.ValueText data-slot="listbox-value-text" class={cn('text-sm leading-5 text-muted-foreground', local.class)} {...others}/>;
+    return <Listbox.ValueText class={cn('text-sm leading-5 text-muted-foreground', local.class)} {...others} data-slot="listbox-value-text"/>;
 }
 function ListboxItemTextContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.span data-slot="listbox-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="listbox-item-text-content"/>;
 }
 function ListboxItemTextIcon(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.span data-slot="listbox-item-text-icon" class={cn('inline-flex size-4 shrink-0 items-center justify-center', local.class)} {...others}/>;
+    return <ark.span class={cn('inline-flex size-4 shrink-0 items-center justify-center', local.class)} {...others} data-slot="listbox-item-text-icon"/>;
 }
 function ListboxItemTextLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.span data-slot="listbox-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="listbox-item-text-label"/>;
 }
 const Listbox_Listbox = Object.assign(Listbox_ListboxRoot, {
     Root: Listbox_ListboxRoot,

package/dist/components/marquee/Marquee.js

@@ -30,7 +30,6 @@ function MarqueeRoot(props) {
         'side'
     ]);
     return createComponent(Marquee.Root, mergeProps({
-        "data-slot": "marquee-root",
         get side () {
             return local.side;
         },
@@ -39,7 +38,9 @@ function MarqueeRoot(props) {
                 orientation: 'top' === local.side || 'bottom' === local.side ? 'vertical' : 'horizontal'
             }), local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "marquee-root"
+    }));
 }
 function MarqueeRootProvider(props) {
     const [local, others] = splitProps(props, [
@@ -47,7 +48,6 @@ function MarqueeRootProvider(props) {
         'value'
     ]);
     return createComponent(Marquee.RootProvider, mergeProps({
-        "data-slot": "marquee-root-provider",
         get value () {
             return local.value;
         },
@@ -56,40 +56,45 @@ function MarqueeRootProvider(props) {
                 orientation: local.value().orientation
             }), local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "marquee-root-provider"
+    }));
 }
 function MarqueeViewport(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Marquee.Viewport, mergeProps({
-        "data-slot": "marquee-viewport",
         get ["class"] () {
             return cn('size-full', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "marquee-viewport"
+    }));
 }
 function MarqueeContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Marquee.Content, mergeProps({
-        "data-slot": "marquee-content",
         get ["class"] () {
             return cn('animate-moduix-marquee-x group-data-paused:[animation-play-state:paused] data-reverse:[animation-direction:reverse] data-[side=bottom]:animate-moduix-marquee-y data-[side=top]:animate-moduix-marquee-y motion-reduce:animate-none', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "marquee-content"
+    }));
 }
 function MarqueeItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Marquee.Item, mergeProps({
-        "data-slot": "marquee-item",
         get ["class"] () {
             return cn('shrink-0', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "marquee-item"
+    }));
 }
 function MarqueeEdge(props) {
     const [local, others] = splitProps(props, [
@@ -97,7 +102,6 @@ function MarqueeEdge(props) {
         'side'
     ]);
     return createComponent(Marquee.Edge, mergeProps({
-        "data-slot": "marquee-edge",
         get side () {
             return local.side;
         },
@@ -106,7 +110,9 @@ function MarqueeEdge(props) {
                 side: local.side
             }), local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "marquee-edge"
+    }));
 }
 const Marquee_Marquee = Object.assign(MarqueeRoot, {
     Root: MarqueeRoot,

package/dist/components/marquee/Marquee.jsx

@@ -28,45 +28,45 @@ function MarqueeRoot(props) {
         'class',
         'side'
     ]);
-    return <Marquee.Root data-slot="marquee-root" side={local.side} class={cn(marqueeRootVariants({
+    return <Marquee.Root side={local.side} class={cn(marqueeRootVariants({
         orientation: 'top' === local.side || 'bottom' === local.side ? 'vertical' : 'horizontal'
-    }), local.class)} {...others}/>;
+    }), local.class)} {...others} data-slot="marquee-root"/>;
 }
 function MarqueeRootProvider(props) {
     const [local, others] = splitProps(props, [
         'class',
         'value'
     ]);
-    return <Marquee.RootProvider data-slot="marquee-root-provider" value={local.value} class={cn(marqueeRootVariants({
+    return <Marquee.RootProvider value={local.value} class={cn(marqueeRootVariants({
         orientation: local.value().orientation
-    }), local.class)} {...others}/>;
+    }), local.class)} {...others} data-slot="marquee-root-provider"/>;
 }
 function MarqueeViewport(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Marquee.Viewport data-slot="marquee-viewport" class={cn('size-full', local.class)} {...others}/>;
+    return <Marquee.Viewport class={cn('size-full', local.class)} {...others} data-slot="marquee-viewport"/>;
 }
 function MarqueeContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Marquee.Content data-slot="marquee-content" class={cn('animate-moduix-marquee-x group-data-paused:[animation-play-state:paused] data-reverse:[animation-direction:reverse] data-[side=bottom]:animate-moduix-marquee-y data-[side=top]:animate-moduix-marquee-y motion-reduce:animate-none', local.class)} {...others}/>;
+    return <Marquee.Content class={cn('animate-moduix-marquee-x group-data-paused:[animation-play-state:paused] data-reverse:[animation-direction:reverse] data-[side=bottom]:animate-moduix-marquee-y data-[side=top]:animate-moduix-marquee-y motion-reduce:animate-none', local.class)} {...others} data-slot="marquee-content"/>;
 }
 function MarqueeItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Marquee.Item data-slot="marquee-item" class={cn('shrink-0', local.class)} {...others}/>;
+    return <Marquee.Item class={cn('shrink-0', local.class)} {...others} data-slot="marquee-item"/>;
 }
 function MarqueeEdge(props) {
     const [local, others] = splitProps(props, [
         'class',
         'side'
     ]);
-    return <Marquee.Edge data-slot="marquee-edge" side={local.side} class={cn(marqueeEdgeVariants({
+    return <Marquee.Edge side={local.side} class={cn(marqueeEdgeVariants({
         side: local.side
-    }), local.class)} {...others}/>;
+    }), local.class)} {...others} data-slot="marquee-edge"/>;
 }
 const Marquee_Marquee = Object.assign(MarqueeRoot, {
     Root: MarqueeRoot,

package/dist/components/menu/Menu.js

@@ -7,7 +7,7 @@ import { children, splitProps } from "solid-js";
 import { cn } from "../../internal/cn.js";
 import { CheckIcon, ChevronDownIcon, ChevronRightIcon } from "../../internal/icons/ui/index.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
-var _tmpl$ = /*#__PURE__*/ template("<span data-slot=menu-trigger-icon>"), _tmpl$2 = /*#__PURE__*/ template("<span data-slot=menu-trigger-item-icon>");
+var _tmpl$ = /*#__PURE__*/ template("<span>");
 const menuItemStyles = cva("relative z-0 min-h-control-sm cursor-default rounded-sm bg-transparent text-sm text-inherit no-underline outline-0 select-none before:absolute before:inset-x-1 before:inset-y-0 before:-z-1 before:rounded-sm before:bg-transparent before:content-[''] data-disabled:pointer-events-none data-disabled:text-muted-foreground data-highlighted:text-accent-foreground data-highlighted:before:bg-accent data-[state=open]:before:bg-accent", {
     variants: {
         layout: {
@@ -101,14 +101,15 @@ function MenuTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "menu-trigger",
         get ["data-focus-visible"] () {
             return focusVisible() ? '' : void 0;
         },
         get ["class"] () {
             return 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));
+    }, others, {
+        "data-slot": "menu-trigger"
+    }));
 }
 function MenuTriggerIcon(props) {
     const [local, others] = splitProps(props, [
@@ -122,7 +123,9 @@ function MenuTriggerIcon(props) {
             get ["class"] () {
                 return cn('inline-flex size-4 shrink-0 items-center justify-center [&_svg]:size-full', local.class);
             }
-        }, others), false, true);
+        }, others, {
+            "data-slot": "menu-trigger-icon"
+        }), false, true);
         insert(_el$, ()=>resolvedChildren() ?? createComponent(ChevronDownIcon, {}));
         return _el$;
     })();
@@ -134,11 +137,11 @@ function MenuIndicator(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(Menu.Indicator, mergeProps({
-        "data-slot": "menu-indicator",
         get ["class"] () {
             return cn('inline-flex size-4 shrink-0 items-center justify-center [&_svg]:size-full', local.class);
         }
     }, others, {
+        "data-slot": "menu-indicator",
         get children () {
             return resolvedChildren() ?? createComponent(ChevronDownIcon, {});
         }
@@ -154,14 +157,15 @@ function MenuContextTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "menu-context-trigger",
         get ["data-focus-visible"] () {
             return focusVisible() ? '' : void 0;
         },
         get ["class"] () {
             return 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));
+    }, others, {
+        "data-slot": "menu-context-trigger"
+    }));
 }
 function MenuPositioner(props) {
     const [local, others] = splitProps(props, [
@@ -170,11 +174,12 @@ function MenuPositioner(props) {
     return createComponent(OverlayPortal, {
         get children () {
             return createComponent(Menu.Positioner, mergeProps({
-                "data-slot": "menu-positioner",
                 get ["class"] () {
                     return cn('z-[var(--z-index)] w-[var(--positioner-width,auto)] max-w-[var(--available-width)] outline-0', local.class);
                 }
-            }, others));
+            }, others, {
+                "data-slot": "menu-positioner"
+            }));
         }
     });
 }
@@ -188,11 +193,11 @@ function MenuContent(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "menu-content",
         get ["class"] () {
             return 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",
         get children () {
             return local.children;
         }
@@ -209,11 +214,12 @@ function MenuViewport(props) {
         },
         "data-scope": "menu",
         "data-part": "viewport",
-        "data-slot": "menu-viewport",
         get ["class"] () {
             return cn('flex max-h-[min(24rem,var(--available-height,100dvh))] flex-col overflow-auto', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "menu-viewport"
+    }));
 }
 function MenuArrow(props) {
     const [local, others] = splitProps(props, [
@@ -222,11 +228,11 @@ function MenuArrow(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(Menu.Arrow, mergeProps({
-        "data-slot": "menu-arrow",
         get ["class"] () {
             return cn('[--arrow-background:var(--color-popover)]', local.class);
         }
     }, others, {
+        "data-slot": "menu-arrow",
         get children () {
             return resolvedChildren() ?? createComponent(MenuArrowTip, {});
         }
@@ -237,11 +243,12 @@ function MenuArrowTip(props) {
         'class'
     ]);
     return createComponent(Menu.ArrowTip, mergeProps({
-        "data-slot": "menu-arrow-tip",
         get ["class"] () {
             return cn('[border-block-start:1px_solid_var(--color-border)] [border-inline-start:1px_solid_var(--color-border)]', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "menu-arrow-tip"
+    }));
 }
 function MenuItem(props) {
     const [local, others] = splitProps(props, [
@@ -249,7 +256,6 @@ function MenuItem(props) {
         'tone'
     ]);
     return createComponent(Menu.Item, mergeProps({
-        "data-slot": "menu-item",
         get ["data-tone"] () {
             return local.tone ?? 'default';
         },
@@ -259,20 +265,23 @@ function MenuItem(props) {
                 tone: local.tone
             }), local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "menu-item"
+    }));
 }
 function MenuTriggerItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Menu.TriggerItem, mergeProps({
-        "data-slot": "menu-trigger-item",
         get ["class"] () {
             return cn(menuItemStyles({
                 layout: 'triggerItem'
             }), local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "menu-trigger-item"
+    }));
 }
 function MenuTriggerItemIcon(props) {
     const [local, others] = splitProps(props, [
@@ -281,12 +290,14 @@ function MenuTriggerItemIcon(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return (()=>{
-        var _el$2 = _tmpl$2();
+        var _el$2 = _tmpl$();
         spread(_el$2, mergeProps({
             get ["class"] () {
                 return cn('inline-flex size-3.5 shrink-0 rtl:-scale-x-100 [&_svg]:size-full', local.class);
             }
-        }, others), false, true);
+        }, others, {
+            "data-slot": "menu-trigger-item-icon"
+        }), false, true);
         insert(_el$2, ()=>resolvedChildren() ?? createComponent(ChevronRightIcon, {}));
         return _el$2;
     })();
@@ -296,44 +307,48 @@ function MenuSeparator(props) {
         'class'
     ]);
     return createComponent(Menu.Separator, mergeProps({
-        "data-slot": "menu-separator",
         get ["class"] () {
             return cn('mx-3 my-1.5 h-px border-0 bg-border', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "menu-separator"
+    }));
 }
 function MenuItemGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Menu.ItemGroup, mergeProps({
-        "data-slot": "menu-item-group",
         get ["class"] () {
             return cn('grid', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "menu-item-group"
+    }));
 }
 function MenuItemGroupLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Menu.ItemGroupLabel, mergeProps({
-        "data-slot": "menu-item-group-label",
         get ["class"] () {
             return cn('cursor-default px-2.5 py-1 text-xs font-normal text-muted-foreground select-none', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "menu-item-group-label"
+    }));
 }
 function MenuRadioItemGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Menu.RadioItemGroup, mergeProps({
-        "data-slot": "menu-radio-item-group",
         get ["class"] () {
             return cn('grid', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "menu-radio-item-group"
+    }));
 }
 function MenuRadioItem(props) {
     const [local, others] = splitProps(props, [
@@ -341,7 +356,6 @@ function MenuRadioItem(props) {
         'indicator'
     ]);
     return createComponent(Menu.RadioItem, mergeProps({
-        "data-slot": "menu-radio-item",
         get ["data-indicator-position"] () {
             return local.indicator ?? 'start';
         },
@@ -351,7 +365,9 @@ function MenuRadioItem(props) {
                 indicator: local.indicator ?? 'start'
             }), local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "menu-radio-item"
+    }));
 }
 function MenuCheckboxItem(props) {
     const [local, others] = splitProps(props, [
@@ -359,7 +375,6 @@ function MenuCheckboxItem(props) {
         'indicator'
     ]);
     return createComponent(Menu.CheckboxItem, mergeProps({
-        "data-slot": "menu-checkbox-item",
         get ["data-indicator-position"] () {
             return local.indicator ?? 'start';
         },
@@ -369,7 +384,9 @@ function MenuCheckboxItem(props) {
                 indicator: local.indicator ?? 'start'
             }), local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "menu-checkbox-item"
+    }));
 }
 function MenuItemIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -378,11 +395,11 @@ function MenuItemIndicator(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(Menu.ItemIndicator, mergeProps({
-        "data-slot": "menu-item-indicator",
         get ["class"] () {
             return cn('inline-flex size-3 items-center justify-center rounded-xs [&_svg]:size-full', local.class);
         }
     }, others, {
+        "data-slot": "menu-item-indicator",
         get children () {
             return resolvedChildren() ?? createComponent(CheckIcon, {});
         }
@@ -393,55 +410,60 @@ function MenuItemText(props) {
         'class'
     ]);
     return createComponent(Menu.ItemText, mergeProps({
-        "data-slot": "menu-item-text",
         get ["class"] () {
             return cn('min-w-0 overflow-hidden', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "menu-item-text"
+    }));
 }
 function MenuItemTextContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.span, mergeProps({
-        "data-slot": "menu-item-text-content",
         get ["class"] () {
             return cn('inline-flex max-w-full min-w-0 items-center gap-2 align-top', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "menu-item-text-content"
+    }));
 }
 function MenuItemTextIcon(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.span, mergeProps({
-        "data-slot": "menu-item-text-icon",
         get ["class"] () {
             return cn('inline-flex size-4 shrink-0 items-center justify-center [&_svg]:size-full', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "menu-item-text-icon"
+    }));
 }
 function MenuItemTextLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.span, mergeProps({
-        "data-slot": "menu-item-text-label",
         get ["class"] () {
             return cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "menu-item-text-label"
+    }));
 }
 function MenuItemShortcut(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.span, mergeProps({
-        "data-slot": "menu-item-shortcut",
         get ["class"] () {
             return cn('ms-auto ps-4 text-xs whitespace-nowrap text-muted-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "menu-item-shortcut"
+    }));
 }
 const Menu_Menu = Object.assign(MenuRoot, {
     Root: MenuRoot,