@moduix/solid-tailwind 1.0.0 → 1.1.0

package/dist/components/lightbox/Lightbox.js

@@ -5,7 +5,7 @@ import { children, createEffect, onCleanup, splitProps } from "solid-js";
 import { cn } from "../../internal/cn.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
 import { CloseButton } from "../close-button/index.js";
-var _tmpl$ = /*#__PURE__*/ template("<img data-slot=lightbox-image>");
+var _tmpl$ = /*#__PURE__*/ template("<img>");
 const DEFAULT_CLOSE_LABEL = 'Close image';
 function preloadImage(src) {
     if (!src || "u" < typeof Image) return;
@@ -101,11 +101,12 @@ function LightboxTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "lightbox-trigger",
         get ["class"] () {
             return cn('cursor-zoom-in focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "lightbox-trigger"
+    }));
 }
 function LightboxBackdrop(props) {
     const [local, others] = splitProps(props, [
@@ -114,11 +115,12 @@ function LightboxBackdrop(props) {
     return createComponent(OverlayPortal, {
         get children () {
             return createComponent(Dialog.Backdrop, mergeProps({
-                "data-slot": "lightbox-backdrop",
                 get ["class"] () {
                     return cn('fixed inset-0 z-[calc(40+var(--layer-index,0))] min-h-dvh bg-overlay backdrop-blur-xs data-[state=closed]:animate-[moduix-fade-out_200ms_ease-in-out_forwards] data-[state=open]:animate-[moduix-fade-in_200ms_ease-in-out] motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', local.class);
                 }
-            }, others));
+            }, others, {
+                "data-slot": "lightbox-backdrop"
+            }));
         }
     });
 }
@@ -129,11 +131,12 @@ function LightboxPositioner(props) {
     return createComponent(OverlayPortal, {
         get children () {
             return createComponent(Dialog.Positioner, mergeProps({
-                "data-slot": "lightbox-positioner",
                 get ["class"] () {
                     return cn('fixed inset-0 z-[calc(50+var(--layer-index,0))] box-border grid place-items-center overflow-auto overscroll-contain p-4', local.class);
                 }
-            }, others));
+            }, others, {
+                "data-slot": "lightbox-positioner"
+            }));
         }
     });
 }
@@ -142,33 +145,36 @@ function LightboxContent(props) {
         'class'
     ]);
     return createComponent(Dialog.Content, mergeProps({
-        "data-slot": "lightbox-content",
         get ["class"] () {
             return cn('relative box-border grid max-h-[min(80dvh,calc(100dvh-2rem))] w-fit max-w-[min(80vw,calc(100vw-2rem))] gap-3 border-0 bg-transparent outline-0 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));
+    }, others, {
+        "data-slot": "lightbox-content"
+    }));
 }
 function LightboxTitle(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Dialog.Title, mergeProps({
-        "data-slot": "lightbox-title",
         get ["class"] () {
             return cn('m-0 text-md leading-6 font-semibold text-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "lightbox-title"
+    }));
 }
 function LightboxDescription(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Dialog.Description, mergeProps({
-        "data-slot": "lightbox-description",
         get ["class"] () {
             return cn('m-0 text-sm leading-5 text-muted-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "lightbox-description"
+    }));
 }
 function LightboxCloseTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -179,11 +185,12 @@ function LightboxCloseTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "lightbox-close-trigger",
         get ["class"] () {
             return local.class;
         }
-    }, others));
+    }, others, {
+        "data-slot": "lightbox-close-trigger"
+    }));
 }
 function LightboxCloseIcon(props) {
     const [local, others] = splitProps(props, [
@@ -219,6 +226,7 @@ function LightboxImage(props) {
     const [local, others] = splitProps(props, [
         'class',
         'closeOnClick',
+        'data-close-on-click',
         'onClick'
     ]);
     const dialog = useDialogContext();
@@ -230,13 +238,15 @@ function LightboxImage(props) {
         var _el$ = _tmpl$();
         _el$.$$click = handleClick;
         spread(_el$, mergeProps({
-            get ["data-close-on-click"] () {
-                return local.closeOnClick ? '' : void 0;
-            },
             get ["class"] () {
                 return cn('block max-h-[min(80dvh,100%)] max-w-[min(80vw,100%)] rounded-md object-contain shadow-lg select-none data-[close-on-click]:cursor-zoom-out', local.class);
             }
-        }, others), false, false);
+        }, others, {
+            get ["data-close-on-click"] () {
+                return local.closeOnClick ? '' : void 0;
+            },
+            "data-slot": "lightbox-image"
+        }), false, false);
         return _el$;
     })();
 }
@@ -245,44 +255,48 @@ function LightboxGallery(props) {
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-slot": "lightbox-gallery",
         get ["class"] () {
             return cn('[&_[data-slot=carousel-indicator-group]]:mx-auto', 'max-w-[min(72rem,calc(100vw-2rem))] justify-self-center [&_[data-slot=carousel-control]]:items-center [&_[data-slot=carousel-indicator-group]]:w-fit [&_[data-slot=carousel-indicator-group]]:max-w-full [&_[data-slot=carousel-indicator-group]]:flex-wrap [&_[data-slot=carousel-indicator]:has(img)]:h-control-xl [&_[data-slot=carousel-indicator]:has(img)]:w-20 [&_[data-slot=carousel-indicator]:has(img)]:overflow-hidden [&_[data-slot=carousel-indicator]:has(img)]:rounded-md [&_[data-slot=carousel-indicator]:has(img)]:border [&_[data-slot=carousel-indicator]:has(img)]:border-transparent [&_[data-slot=carousel-indicator]:has(img)]:bg-transparent [&_[data-slot=carousel-indicator]:has(img)]:opacity-[0.65] [&_[data-slot=carousel-indicator]:has(img)]:transition [&_[data-slot=carousel-indicator]:has(img)]:duration-150 [&_[data-slot=carousel-indicator]:has(img)]:ease-in-out [&_[data-slot=carousel-indicator]:has(img)_img]:block [&_[data-slot=carousel-indicator]:has(img)_img]:size-full [&_[data-slot=carousel-indicator]:has(img)_img]:object-cover [&_[data-slot=carousel-indicator]:has(img):hover]:opacity-90 [&_[data-slot=carousel-indicator]:has(img)[data-current]]:-translate-y-px [&_[data-slot=carousel-indicator]:has(img)[data-current]]:border-primary [&_[data-slot=carousel-indicator]:has(img)[data-current]]:opacity-100 [&_[data-slot=carousel-item-group]]:aspect-[16/10] [&_[data-slot=carousel-item-group]]:max-h-[68dvh] [&_[data-slot=carousel-item-group]]:bg-black/90 [&_[data-slot=carousel-item]]:grid [&_[data-slot=carousel-item]]:h-full [&_[data-slot=carousel-item]]:place-items-center [&_[data-slot=carousel-item]_img]:block [&_[data-slot=carousel-item]_img]:size-full [&_[data-slot=carousel-item]_img]:rounded-md [&_[data-slot=carousel-item]_img]:object-contain [&_[data-slot=carousel-item]_img]:select-none [&_[data-slot=carousel-item]_video]:block [&_[data-slot=carousel-item]_video]:size-full [&_[data-slot=carousel-item]_video]:rounded-md [&_[data-slot=carousel-item]_video]:object-contain [&_[data-slot=carousel-item]_video]:select-none', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "lightbox-gallery"
+    }));
 }
 function LightboxHeader(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-slot": "lightbox-header",
         get ["class"] () {
             return cn('grid gap-1', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "lightbox-header"
+    }));
 }
 function LightboxBody(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-slot": "lightbox-body",
         get ["class"] () {
             return cn('grid gap-3', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "lightbox-body"
+    }));
 }
 function LightboxFooter(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-slot": "lightbox-footer",
         get ["class"] () {
             return cn('flex items-center justify-end gap-2 text-sm leading-5 text-muted-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "lightbox-footer"
+    }));
 }
 function LightboxBind(props) {
     const [local] = splitProps(props, [

package/dist/components/lightbox/Lightbox.jsx

@@ -61,14 +61,14 @@ function LightboxTrigger(props) {
         'asChild',
         'class'
     ]);
-    return <Dialog.Trigger asChild={local.asChild} data-slot="lightbox-trigger" class={cn('cursor-zoom-in focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring', local.class)} {...others}/>;
+    return <Dialog.Trigger asChild={local.asChild} class={cn('cursor-zoom-in focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring', local.class)} {...others} data-slot="lightbox-trigger"/>;
 }
 function LightboxBackdrop(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return <OverlayPortal>
-      <Dialog.Backdrop data-slot="lightbox-backdrop" class={cn('fixed inset-0 z-[calc(40+var(--layer-index,0))] min-h-dvh bg-overlay backdrop-blur-xs data-[state=closed]:animate-[moduix-fade-out_200ms_ease-in-out_forwards] data-[state=open]:animate-[moduix-fade-in_200ms_ease-in-out] motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', local.class)} {...others}/>
+      <Dialog.Backdrop class={cn('fixed inset-0 z-[calc(40+var(--layer-index,0))] min-h-dvh bg-overlay backdrop-blur-xs data-[state=closed]:animate-[moduix-fade-out_200ms_ease-in-out_forwards] data-[state=open]:animate-[moduix-fade-in_200ms_ease-in-out] motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', local.class)} {...others} data-slot="lightbox-backdrop"/>
     </OverlayPortal>;
 }
 function LightboxPositioner(props) {
@@ -76,33 +76,33 @@ function LightboxPositioner(props) {
         'class'
     ]);
     return <OverlayPortal>
-      <Dialog.Positioner data-slot="lightbox-positioner" class={cn('fixed inset-0 z-[calc(50+var(--layer-index,0))] box-border grid place-items-center overflow-auto overscroll-contain p-4', local.class)} {...others}/>
+      <Dialog.Positioner class={cn('fixed inset-0 z-[calc(50+var(--layer-index,0))] box-border grid place-items-center overflow-auto overscroll-contain p-4', local.class)} {...others} data-slot="lightbox-positioner"/>
     </OverlayPortal>;
 }
 function LightboxContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Dialog.Content data-slot="lightbox-content" class={cn('relative box-border grid max-h-[min(80dvh,calc(100dvh-2rem))] w-fit max-w-[min(80vw,calc(100vw-2rem))] gap-3 border-0 bg-transparent outline-0 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 <Dialog.Content class={cn('relative box-border grid max-h-[min(80dvh,calc(100dvh-2rem))] w-fit max-w-[min(80vw,calc(100vw-2rem))] gap-3 border-0 bg-transparent outline-0 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="lightbox-content"/>;
 }
 function LightboxTitle(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Dialog.Title data-slot="lightbox-title" class={cn('m-0 text-md leading-6 font-semibold text-foreground', local.class)} {...others}/>;
+    return <Dialog.Title class={cn('m-0 text-md leading-6 font-semibold text-foreground', local.class)} {...others} data-slot="lightbox-title"/>;
 }
 function LightboxDescription(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Dialog.Description data-slot="lightbox-description" class={cn('m-0 text-sm leading-5 text-muted-foreground', local.class)} {...others}/>;
+    return <Dialog.Description class={cn('m-0 text-sm leading-5 text-muted-foreground', local.class)} {...others} data-slot="lightbox-description"/>;
 }
 function LightboxCloseTrigger(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <Dialog.CloseTrigger asChild={local.asChild} data-slot="lightbox-close-trigger" class={local.class} {...others}/>;
+    return <Dialog.CloseTrigger asChild={local.asChild} class={local.class} {...others} data-slot="lightbox-close-trigger"/>;
 }
 function LightboxCloseIcon(props) {
     const [local, others] = splitProps(props, [
@@ -121,6 +121,7 @@ function LightboxImage(props) {
     const [local, others] = splitProps(props, [
         'class',
         'closeOnClick',
+        'data-close-on-click',
         'onClick'
     ]);
     const dialog = useDialogContext();
@@ -128,31 +129,31 @@ function LightboxImage(props) {
         local.onClick?.(event);
         if (local.closeOnClick && !event.defaultPrevented) dialog().setOpen(false);
     };
-    return <img data-slot="lightbox-image" data-close-on-click={local.closeOnClick ? '' : void 0} class={cn('block max-h-[min(80dvh,100%)] max-w-[min(80vw,100%)] rounded-md object-contain shadow-lg select-none data-[close-on-click]:cursor-zoom-out', local.class)} onClick={handleClick} {...others}/>;
+    return <img class={cn('block max-h-[min(80dvh,100%)] max-w-[min(80vw,100%)] rounded-md object-contain shadow-lg select-none data-[close-on-click]:cursor-zoom-out', local.class)} onClick={handleClick} {...others} data-close-on-click={local.closeOnClick ? '' : void 0} data-slot="lightbox-image"/>;
 }
 function LightboxGallery(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-slot="lightbox-gallery" class={cn('[&_[data-slot=carousel-indicator-group]]:mx-auto', 'max-w-[min(72rem,calc(100vw-2rem))] justify-self-center [&_[data-slot=carousel-control]]:items-center [&_[data-slot=carousel-indicator-group]]:w-fit [&_[data-slot=carousel-indicator-group]]:max-w-full [&_[data-slot=carousel-indicator-group]]:flex-wrap [&_[data-slot=carousel-indicator]:has(img)]:h-control-xl [&_[data-slot=carousel-indicator]:has(img)]:w-20 [&_[data-slot=carousel-indicator]:has(img)]:overflow-hidden [&_[data-slot=carousel-indicator]:has(img)]:rounded-md [&_[data-slot=carousel-indicator]:has(img)]:border [&_[data-slot=carousel-indicator]:has(img)]:border-transparent [&_[data-slot=carousel-indicator]:has(img)]:bg-transparent [&_[data-slot=carousel-indicator]:has(img)]:opacity-[0.65] [&_[data-slot=carousel-indicator]:has(img)]:transition [&_[data-slot=carousel-indicator]:has(img)]:duration-150 [&_[data-slot=carousel-indicator]:has(img)]:ease-in-out [&_[data-slot=carousel-indicator]:has(img)_img]:block [&_[data-slot=carousel-indicator]:has(img)_img]:size-full [&_[data-slot=carousel-indicator]:has(img)_img]:object-cover [&_[data-slot=carousel-indicator]:has(img):hover]:opacity-90 [&_[data-slot=carousel-indicator]:has(img)[data-current]]:-translate-y-px [&_[data-slot=carousel-indicator]:has(img)[data-current]]:border-primary [&_[data-slot=carousel-indicator]:has(img)[data-current]]:opacity-100 [&_[data-slot=carousel-item-group]]:aspect-[16/10] [&_[data-slot=carousel-item-group]]:max-h-[68dvh] [&_[data-slot=carousel-item-group]]:bg-black/90 [&_[data-slot=carousel-item]]:grid [&_[data-slot=carousel-item]]:h-full [&_[data-slot=carousel-item]]:place-items-center [&_[data-slot=carousel-item]_img]:block [&_[data-slot=carousel-item]_img]:size-full [&_[data-slot=carousel-item]_img]:rounded-md [&_[data-slot=carousel-item]_img]:object-contain [&_[data-slot=carousel-item]_img]:select-none [&_[data-slot=carousel-item]_video]:block [&_[data-slot=carousel-item]_video]:size-full [&_[data-slot=carousel-item]_video]:rounded-md [&_[data-slot=carousel-item]_video]:object-contain [&_[data-slot=carousel-item]_video]:select-none', local.class)} {...others}/>;
+    return <ark.div class={cn('[&_[data-slot=carousel-indicator-group]]:mx-auto', 'max-w-[min(72rem,calc(100vw-2rem))] justify-self-center [&_[data-slot=carousel-control]]:items-center [&_[data-slot=carousel-indicator-group]]:w-fit [&_[data-slot=carousel-indicator-group]]:max-w-full [&_[data-slot=carousel-indicator-group]]:flex-wrap [&_[data-slot=carousel-indicator]:has(img)]:h-control-xl [&_[data-slot=carousel-indicator]:has(img)]:w-20 [&_[data-slot=carousel-indicator]:has(img)]:overflow-hidden [&_[data-slot=carousel-indicator]:has(img)]:rounded-md [&_[data-slot=carousel-indicator]:has(img)]:border [&_[data-slot=carousel-indicator]:has(img)]:border-transparent [&_[data-slot=carousel-indicator]:has(img)]:bg-transparent [&_[data-slot=carousel-indicator]:has(img)]:opacity-[0.65] [&_[data-slot=carousel-indicator]:has(img)]:transition [&_[data-slot=carousel-indicator]:has(img)]:duration-150 [&_[data-slot=carousel-indicator]:has(img)]:ease-in-out [&_[data-slot=carousel-indicator]:has(img)_img]:block [&_[data-slot=carousel-indicator]:has(img)_img]:size-full [&_[data-slot=carousel-indicator]:has(img)_img]:object-cover [&_[data-slot=carousel-indicator]:has(img):hover]:opacity-90 [&_[data-slot=carousel-indicator]:has(img)[data-current]]:-translate-y-px [&_[data-slot=carousel-indicator]:has(img)[data-current]]:border-primary [&_[data-slot=carousel-indicator]:has(img)[data-current]]:opacity-100 [&_[data-slot=carousel-item-group]]:aspect-[16/10] [&_[data-slot=carousel-item-group]]:max-h-[68dvh] [&_[data-slot=carousel-item-group]]:bg-black/90 [&_[data-slot=carousel-item]]:grid [&_[data-slot=carousel-item]]:h-full [&_[data-slot=carousel-item]]:place-items-center [&_[data-slot=carousel-item]_img]:block [&_[data-slot=carousel-item]_img]:size-full [&_[data-slot=carousel-item]_img]:rounded-md [&_[data-slot=carousel-item]_img]:object-contain [&_[data-slot=carousel-item]_img]:select-none [&_[data-slot=carousel-item]_video]:block [&_[data-slot=carousel-item]_video]:size-full [&_[data-slot=carousel-item]_video]:rounded-md [&_[data-slot=carousel-item]_video]:object-contain [&_[data-slot=carousel-item]_video]:select-none', local.class)} {...others} data-slot="lightbox-gallery"/>;
 }
 function LightboxHeader(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-slot="lightbox-header" class={cn('grid gap-1', local.class)} {...others}/>;
+    return <ark.div class={cn('grid gap-1', local.class)} {...others} data-slot="lightbox-header"/>;
 }
 function LightboxBody(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-slot="lightbox-body" class={cn('grid gap-3', local.class)} {...others}/>;
+    return <ark.div class={cn('grid gap-3', local.class)} {...others} data-slot="lightbox-body"/>;
 }
 function LightboxFooter(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-slot="lightbox-footer" class={cn('flex items-center justify-end gap-2 text-sm leading-5 text-muted-foreground', local.class)} {...others}/>;
+    return <ark.div class={cn('flex items-center justify-end gap-2 text-sm leading-5 text-muted-foreground', local.class)} {...others} data-slot="lightbox-footer"/>;
 }
 function LightboxBind(props) {
     const [local] = splitProps(props, [

package/dist/components/listbox/Listbox.js

@@ -5,50 +5,54 @@ import { children, splitProps } from "solid-js";
 import { cn } from "../../internal/cn.js";
 import { CheckIcon, SearchIcon } from "../../internal/icons/ui/Icons.js";
 import { CloseButton } from "../close-button/index.js";
-var _tmpl$ = /*#__PURE__*/ template("<div data-slot=listbox-filter>");
+var _tmpl$ = /*#__PURE__*/ template("<div>");
 const Listbox_ListboxRoot = function(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Listbox.Root, mergeProps({
-        "data-slot": "listbox-root",
         get ["class"] () {
             return 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));
+    }, others, {
+        "data-slot": "listbox-root"
+    }));
 };
 const Listbox_ListboxRootProvider = function(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Listbox.RootProvider, mergeProps({
-        "data-slot": "listbox-root-provider",
         get ["class"] () {
             return 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));
+    }, others, {
+        "data-slot": "listbox-root-provider"
+    }));
 };
 function ListboxLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Listbox.Label, mergeProps({
-        "data-slot": "listbox-label",
         get ["class"] () {
             return cn('text-sm leading-5 font-medium text-foreground select-none', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "listbox-label"
+    }));
 }
 function ListboxInput(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Listbox.Input, mergeProps({
-        "data-slot": "listbox-input",
         get ["class"] () {
             return 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));
+    }, others, {
+        "data-slot": "listbox-input"
+    }));
 }
 function ListboxFilter(props) {
     const [local, others] = splitProps(props, [
@@ -61,7 +65,9 @@ function ListboxFilter(props) {
             get ["class"] () {
                 return cn('group/listbox-filter peer/listbox-filter relative box-border w-full', local.class);
             }
-        }, others), false, true);
+        }, others, {
+            "data-slot": "listbox-filter"
+        }), false, true);
         insert(_el$, createComponent(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"
@@ -79,7 +85,6 @@ function ListboxClearTrigger(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(CloseButton.Root, mergeProps({
-        "data-slot": "listbox-clear-trigger",
         get ["class"] () {
             return 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);
         },
@@ -90,6 +95,7 @@ function ListboxClearTrigger(props) {
             return local['aria-label'] ?? 'Clear search';
         }
     }, others, {
+        "data-slot": "listbox-clear-trigger",
         get children () {
             return resolvedChildren();
         }
@@ -100,66 +106,72 @@ function ListboxContent(props) {
         'class'
     ]);
     return createComponent(Listbox.Content, mergeProps({
-        "data-slot": "listbox-content",
         get ["class"] () {
             return 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));
+    }, others, {
+        "data-slot": "listbox-content"
+    }));
 }
 function ListboxEmpty(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Listbox.Empty, mergeProps({
-        "data-slot": "listbox-empty",
         get ["class"] () {
             return cn('px-3 py-1 text-center text-sm leading-5 text-muted-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "listbox-empty"
+    }));
 }
 function ListboxItemGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Listbox.ItemGroup, mergeProps({
-        "data-slot": "listbox-item-group",
         get ["class"] () {
             return cn('flex flex-col [&+&]:mt-2', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "listbox-item-group"
+    }));
 }
 function ListboxItemGroupLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Listbox.ItemGroupLabel, mergeProps({
-        "data-slot": "listbox-item-group-label",
         get ["class"] () {
             return cn('px-2 py-1 text-xs leading-4 font-normal text-muted-foreground select-none', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "listbox-item-group-label"
+    }));
 }
 function ListboxItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Listbox.Item, mergeProps({
-        "data-slot": "listbox-item",
         get ["class"] () {
             return 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));
+    }, others, {
+        "data-slot": "listbox-item"
+    }));
 }
 function ListboxItemText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Listbox.ItemText, mergeProps({
-        "data-slot": "listbox-item-text",
         get ["class"] () {
             return cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "listbox-item-text"
+    }));
 }
 function ListboxItemIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -168,11 +180,11 @@ function ListboxItemIndicator(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(Listbox.ItemIndicator, mergeProps({
-        "data-slot": "listbox-item-indicator",
         get ["class"] () {
             return 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",
         get children () {
             return resolvedChildren() ?? createComponent(CheckIcon, {});
         }
@@ -183,44 +195,48 @@ function ListboxValueText(props) {
         'class'
     ]);
     return createComponent(Listbox.ValueText, mergeProps({
-        "data-slot": "listbox-value-text",
         get ["class"] () {
             return cn('text-sm leading-5 text-muted-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "listbox-value-text"
+    }));
 }
 function ListboxItemTextContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.span, mergeProps({
-        "data-slot": "listbox-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": "listbox-item-text-content"
+    }));
 }
 function ListboxItemTextIcon(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.span, mergeProps({
-        "data-slot": "listbox-item-text-icon",
         get ["class"] () {
             return cn('inline-flex size-4 shrink-0 items-center justify-center', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "listbox-item-text-icon"
+    }));
 }
 function ListboxItemTextLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.span, mergeProps({
-        "data-slot": "listbox-item-text-label",
         get ["class"] () {
             return cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "listbox-item-text-label"
+    }));
 }
 const Listbox_Listbox = Object.assign(Listbox_ListboxRoot, {
     Root: Listbox_ListboxRoot,