@moduix/solid-tailwind 1.0.0 → 1.1.1

package/dist/components/combobox/Combobox.jsx

@@ -16,7 +16,7 @@ const Combobox_ComboboxRoot = function(props) {
         'unmountOnExit'
     ]);
     return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
-      <Combobox.Root asChild={local.asChild} data-slot="combobox-root" class={cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-1.5 text-foreground', local.class)} lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+      <Combobox.Root asChild={local.asChild} class={cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-1.5 text-foreground', local.class)} lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others} data-slot="combobox-root">
         {local.children}
       </Combobox.Root>
     </OverlayPortalProvider>;
@@ -32,7 +32,7 @@ const Combobox_ComboboxRootProvider = function(props) {
         'unmountOnExit'
     ]);
     return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
-      <Combobox.RootProvider asChild={local.asChild} data-slot="combobox-root-provider" class={cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-1.5 text-foreground', local.class)} lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+      <Combobox.RootProvider asChild={local.asChild} class={cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-1.5 text-foreground', local.class)} lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others} data-slot="combobox-root-provider">
         {local.children}
       </Combobox.RootProvider>
     </OverlayPortalProvider>;
@@ -41,20 +41,20 @@ function ComboboxLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Combobox.Label data-slot="combobox-label" class={cn('inline-flex items-center text-sm font-medium text-foreground select-none data-disabled:opacity-50', local.class)} {...others}/>;
+    return <Combobox.Label class={cn('inline-flex items-center text-sm font-medium text-foreground select-none data-disabled:opacity-50', local.class)} {...others} data-slot="combobox-label"/>;
 }
 function ComboboxControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Combobox.Control data-slot="combobox-control" class={cn('group/combobox-control relative flex w-full min-w-0 items-center rounded-md border border-border bg-background text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,outline-color] duration-200 ease-in-out data-disabled:opacity-50 data-focus:border-ring data-focus:outline-ring data-invalid:border-destructive data-invalid:outline-destructive data-[state=open]:border-ring data-[state=open]:outline-ring motion-reduce:transition-none', local.class)} {...others}/>;
+    return <Combobox.Control class={cn('group/combobox-control relative flex w-full min-w-0 items-center rounded-md border border-border bg-background text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,outline-color] duration-200 ease-in-out data-disabled:opacity-50 data-focus:border-ring data-focus:outline-ring data-invalid:border-destructive data-invalid:outline-destructive data-[state=open]:border-ring data-[state=open]:outline-ring motion-reduce:transition-none', local.class)} {...others} data-slot="combobox-control"/>;
 }
 function ComboboxInput(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <Combobox.Input asChild={local.asChild} data-slot="combobox-input" class={cn(!local.asChild && 'm-0 box-border h-control-md w-full min-w-0 rounded-[inherit] border-0 bg-transparent px-3.5 text-inherit outline-0 [font:inherit] group-has-[>[data-slot=combobox-clear-trigger]]/combobox-control:pe-[4.375rem] group-has-[>[data-slot=combobox-trigger]]/combobox-control:pe-11 group-has-[>[data-slot=combobox-clear-trigger]]/combobox-control:group-has-[>[data-slot=combobox-trigger]]/combobox-control:pe-[4.375rem] placeholder:text-muted-foreground', local.class)} {...others}/>;
+    return <Combobox.Input asChild={local.asChild} class={cn(!local.asChild && 'm-0 box-border h-control-md w-full min-w-0 rounded-[inherit] border-0 bg-transparent px-3.5 text-inherit outline-0 [font:inherit] group-has-[>[data-slot=combobox-clear-trigger]]/combobox-control:pe-[4.375rem] group-has-[>[data-slot=combobox-trigger]]/combobox-control:pe-11 group-has-[>[data-slot=combobox-clear-trigger]]/combobox-control:group-has-[>[data-slot=combobox-trigger]]/combobox-control:pe-[4.375rem] placeholder:text-muted-foreground', local.class)} {...others} data-slot="combobox-input"/>;
 }
 function ComboboxClearTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -66,7 +66,7 @@ function ComboboxClearTrigger(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     const triggerClass = cn('absolute inset-y-0 end-[2.125rem] my-auto size-control-xs transition-[background-color,color,opacity] duration-200 ease-in-out focus-visible:outline-1 focus-visible:outline-offset-1 motion-reduce:transition-none [&>svg]:size-4', local.class);
-    if (local.asChild) return <Combobox.ClearTrigger asChild={local.asChild} aria-label={local['aria-label']} aria-labelledby={local['aria-labelledby']} data-slot="combobox-clear-trigger" class={triggerClass} {...others}>
+    if (local.asChild) return <Combobox.ClearTrigger asChild={local.asChild} aria-label={local['aria-label']} aria-labelledby={local['aria-labelledby']} class={triggerClass} {...others} data-slot="combobox-clear-trigger">
         {local.children}
       </Combobox.ClearTrigger>;
     return <Combobox.ClearTrigger asChild={(triggerProps)=>{
@@ -74,7 +74,7 @@ function ComboboxClearTrigger(props) {
         return <CloseButton.Root {...resolvedProps} aria-label={local['aria-label'] ?? (null == local['aria-labelledby'] ? 'Clear selection' : void 0)} aria-labelledby={local['aria-labelledby']}>
             {resolvedChildren()}
           </CloseButton.Root>;
-    }} data-slot="combobox-clear-trigger" class={triggerClass} {...others}/>;
+    }} class={triggerClass} {...others} data-slot="combobox-clear-trigger"/>;
 }
 function ComboboxTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -82,7 +82,7 @@ function ComboboxTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Combobox.Trigger data-slot="combobox-trigger" class={cn('absolute end-2 top-1/2 m-0 box-border inline-flex size-control-xs shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent p-0 [line-height:0] text-muted-foreground transition-[background-color,color,opacity] duration-200 ease-in-out focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-ring disabled:cursor-default data-disabled:cursor-default motion-reduce:transition-none [&>svg]:block [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:text-foreground', local.class)} {...others}>
+    return <Combobox.Trigger class={cn('absolute end-2 top-1/2 m-0 box-border inline-flex size-control-xs shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent p-0 [line-height:0] text-muted-foreground transition-[background-color,color,opacity] duration-200 ease-in-out focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-ring disabled:cursor-default data-disabled:cursor-default motion-reduce:transition-none [&>svg]:block [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:text-foreground', local.class)} {...others} data-slot="combobox-trigger">
       {resolvedChildren() ?? <ChevronUpDownIcon/>}
     </Combobox.Trigger>;
 }
@@ -91,56 +91,56 @@ function ComboboxPositioner(props) {
         'class'
     ]);
     return <OverlayPortal>
-      <Combobox.Positioner data-slot="combobox-positioner" class={cn('z-[var(--z-index)] outline-0', local.class)} {...others}/>
+      <Combobox.Positioner class={cn('z-[var(--z-index)] outline-0', local.class)} {...others} data-slot="combobox-positioner"/>
     </OverlayPortal>;
 }
 function ComboboxContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Combobox.Content data-slot="combobox-content" class={cn('z-[calc(60+var(--layer-index,0))] box-border flex max-h-[min(24rem,var(--available-height))] max-w-[var(--available-width)] min-w-[var(--reference-width)] origin-[var(--transform-origin)] scroll-py-1 flex-col overflow-auto overscroll-contain rounded-md border border-border bg-popover py-1 text-popover-foreground shadow-lg 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 <Combobox.Content class={cn('z-[calc(60+var(--layer-index,0))] box-border flex max-h-[min(24rem,var(--available-height))] max-w-[var(--available-width)] min-w-[var(--reference-width)] origin-[var(--transform-origin)] scroll-py-1 flex-col overflow-auto overscroll-contain rounded-md border border-border bg-popover py-1 text-popover-foreground shadow-lg 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="combobox-content"/>;
 }
 function ComboboxEmpty(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Combobox.Empty data-slot="combobox-empty" class={cn('px-4 py-1 text-sm text-muted-foreground', local.class)} {...others}/>;
+    return <Combobox.Empty class={cn('px-4 py-1 text-sm text-muted-foreground', local.class)} {...others} data-slot="combobox-empty"/>;
 }
 function ComboboxStatus(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-slot="combobox-status" class={cn('px-4 py-1 text-sm text-muted-foreground', local.class)} {...others}/>;
+    return <ark.div class={cn('px-4 py-1 text-sm text-muted-foreground', local.class)} {...others} data-slot="combobox-status"/>;
 }
 function ComboboxList(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Combobox.List data-slot="combobox-list" class={cn('flex min-h-0 flex-col outline-0 data-empty:hidden', local.class)} {...others}/>;
+    return <Combobox.List class={cn('flex min-h-0 flex-col outline-0 data-empty:hidden', local.class)} {...others} data-slot="combobox-list"/>;
 }
 function ComboboxItemGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Combobox.ItemGroup data-slot="combobox-item-group" class={cn('flex flex-col [&+&]:mt-2', local.class)} {...others}/>;
+    return <Combobox.ItemGroup class={cn('flex flex-col [&+&]:mt-2', local.class)} {...others} data-slot="combobox-item-group"/>;
 }
 function ComboboxItemGroupLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Combobox.ItemGroupLabel data-slot="combobox-item-group-label" class={cn('sticky -top-1 z-1 bg-popover px-2.5 py-1 text-xs font-normal text-muted-foreground', local.class)} {...others}/>;
+    return <Combobox.ItemGroupLabel class={cn('sticky -top-1 z-1 bg-popover px-2.5 py-1 text-xs font-normal text-muted-foreground', local.class)} {...others} data-slot="combobox-item-group-label"/>;
 }
 function ComboboxItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Combobox.Item data-slot="combobox-item" class={cn('relative mx-1 box-border flex min-h-control-sm w-[calc(100%-0.5rem)] cursor-default items-center justify-between gap-2 rounded-sm border-0 bg-transparent px-3 py-1 text-sm text-popover-foreground outline-0 select-none data-disabled:pointer-events-none data-disabled:text-muted-foreground data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[state=checked]:text-popover-foreground', local.class)} {...others}/>;
+    return <Combobox.Item class={cn('relative mx-1 box-border flex min-h-control-sm w-[calc(100%-0.5rem)] cursor-default items-center justify-between gap-2 rounded-sm border-0 bg-transparent px-3 py-1 text-sm text-popover-foreground outline-0 select-none data-disabled:pointer-events-none data-disabled:text-muted-foreground data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[state=checked]:text-popover-foreground', local.class)} {...others} data-slot="combobox-item"/>;
 }
 function ComboboxItemText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Combobox.ItemText data-slot="combobox-item-text" class={cn('min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap', local.class)} {...others}/>;
+    return <Combobox.ItemText class={cn('min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap', local.class)} {...others} data-slot="combobox-item-text"/>;
 }
 function ComboboxItemIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -148,7 +148,7 @@ function ComboboxItemIndicator(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Combobox.ItemIndicator data-slot="combobox-item-indicator" class={cn('inline-flex size-3 shrink-0 items-center justify-center [&>svg]:size-full', local.class)} {...others}>
+    return <Combobox.ItemIndicator class={cn('inline-flex size-3 shrink-0 items-center justify-center [&>svg]:size-full', local.class)} {...others} data-slot="combobox-item-indicator">
       {resolvedChildren() ?? <CheckIcon/>}
     </Combobox.ItemIndicator>;
 }

package/dist/components/command-palette/CommandPalette.js

@@ -2,7 +2,7 @@ import { createComponent, mergeProps } from "solid-js/web";
 import { Combobox } from "@ark-ui/solid/combobox";
 import { Dialog, useDialog, useDialogContext } from "@ark-ui/solid/dialog";
 import { ark } from "@ark-ui/solid/factory";
-import { isHotKey } from "@zag-js/hotkeys";
+import { isHotKey } from "@ark-ui/solid/hotkeys";
 import { children, createEffect, onCleanup, splitProps } from "solid-js";
 import { cn } from "../../internal/cn.js";
 import { CheckIcon, CloseIcon } from "../../internal/icons/ui/Icons.js";
@@ -111,11 +111,12 @@ function CommandPaletteTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "command-palette-trigger",
         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-3.5 py-1 text-md leading-6 text-foreground transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring [@media(hover:hover)]:hover:bg-accent', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-trigger"
+    }));
 }
 function CommandPaletteBackdrop(props) {
     const [local, others] = splitProps(props, [
@@ -124,11 +125,12 @@ function CommandPaletteBackdrop(props) {
     return createComponent(OverlayPortal, {
         get children () {
             return createComponent(Dialog.Backdrop, mergeProps({
-                "data-slot": "command-palette-backdrop",
                 get ["class"] () {
                     return cn('fixed inset-0 z-[calc(40+var(--layer-index,0))] bg-overlay backdrop-blur-[4px] 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:animate-none', local.class);
                 }
-            }, others));
+            }, others, {
+                "data-slot": "command-palette-backdrop"
+            }));
         }
     });
 }
@@ -139,11 +141,12 @@ function CommandPalettePositioner(props) {
     return createComponent(OverlayPortal, {
         get children () {
             return createComponent(Dialog.Positioner, mergeProps({
-                "data-slot": "command-palette-positioner",
                 get ["class"] () {
                     return cn('fixed inset-0 z-[calc(50+var(--layer-index,0))] grid items-start justify-items-center overflow-hidden overscroll-contain px-4 pt-[10dvh] pb-4', local.class);
                 }
-            }, others));
+            }, others, {
+                "data-slot": "command-palette-positioner"
+            }));
         }
     });
 }
@@ -152,11 +155,12 @@ function CommandPaletteContent(props) {
         'class'
     ]);
     return createComponent(Dialog.Content, mergeProps({
-        "data-slot": "command-palette-content",
         get ["class"] () {
             return cn('flex max-h-[min(34rem,calc(100dvh-5rem))] w-[min(37.5rem,calc(100vw-2rem))] origin-top flex-col overflow-hidden rounded-lg border border-border/84 bg-popover bg-linear-to-b from-white/4 to-transparent text-popover-foreground shadow-lg outline-0 data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-content"
+    }));
 }
 function CommandPalettePanel(props) {
     const [local, others] = splitProps(props, [
@@ -184,44 +188,48 @@ function CommandPaletteTitle(props) {
         'class'
     ]);
     return createComponent(Dialog.Title, mergeProps({
-        "data-slot": "command-palette-title",
         get ["class"] () {
             return cn('text-md leading-6 font-semibold text-popover-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-title"
+    }));
 }
 function CommandPaletteDescription(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Dialog.Description, mergeProps({
-        "data-slot": "command-palette-description",
         get ["class"] () {
             return cn('text-sm leading-5 text-muted-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-description"
+    }));
 }
 function CommandPaletteHeader(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-slot": "command-palette-header",
         get ["class"] () {
             return cn('grid gap-1 px-4 pt-4', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-header"
+    }));
 }
 function CommandPaletteBody(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-slot": "command-palette-body",
         get ["class"] () {
             return cn('flex min-h-0 flex-1 flex-col', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-body"
+    }));
 }
 const CommandPalette_CommandPaletteCombobox = function(props) {
     const [local, others] = splitProps(props, [
@@ -240,7 +248,6 @@ const CommandPalette_CommandPaletteCombobox = function(props) {
         if (local.closeOnSelect ?? true) dialog().setOpen(false);
     };
     return createComponent(Combobox.Root, mergeProps({
-        "data-slot": "command-palette-combobox",
         get ["class"] () {
             return cn('flex min-h-0 flex-1 flex-col overflow-hidden', local.class);
         },
@@ -261,6 +268,7 @@ const CommandPalette_CommandPaletteCombobox = function(props) {
         },
         onSelect: handleSelect
     }, others, {
+        "data-slot": "command-palette-combobox",
         get children () {
             return local.children;
         }
@@ -271,22 +279,24 @@ function CommandPaletteControl(props) {
         'class'
     ]);
     return createComponent(Combobox.Control, mergeProps({
-        "data-slot": "command-palette-control",
         get ["class"] () {
             return cn('relative mx-3 mt-3 flex min-h-control-md flex-none items-center gap-2 rounded-md border border-border bg-background px-3 py-1 text-foreground transition-[background-color,border-color] duration-200 ease-in-out has-[[aria-invalid=true]]:border-destructive has-[[data-invalid]]:border-destructive', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-control"
+    }));
 }
 function CommandPaletteInput(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Combobox.Input, mergeProps({
-        "data-slot": "command-palette-input",
         get ["class"] () {
             return cn('h-auto w-full min-w-0 flex-1 bg-transparent text-sm leading-5 text-inherit outline-0 placeholder:text-muted-foreground data-invalid:text-destructive', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-input"
+    }));
 }
 function CommandPaletteSearch(props) {
     const [local, others] = splitProps(props, [
@@ -325,7 +335,6 @@ function CommandPaletteClearTrigger(props) {
                 get asChild () {
                     return local.asChild;
                 },
-                "data-slot": "command-palette-clear-trigger",
                 get hidden () {
                     return 0 === combobox().inputValue.length;
                 },
@@ -344,12 +353,10 @@ function CommandPaletteClearTrigger(props) {
                 },
                 onPointerDown: (event)=>{
                     local.onPointerDown?.(event);
-                    if (0 === event.button) {
-                        event.preventDefault();
-                        combobox().setInputValue('');
-                    }
+                    if (0 === event.button) event.preventDefault();
                 }
             }, others, {
+                "data-slot": "command-palette-clear-trigger",
                 get children () {
                     return resolvedChildren() ?? createComponent(CloseIcon, {});
                 }
@@ -362,11 +369,11 @@ function CommandPaletteList(props) {
         'children'
     ]);
     return createComponent(Combobox.Content, mergeProps({
-        "data-slot": "command-palette-list",
         get ["class"] () {
             return cn('group/list flex min-h-0 flex-1 overflow-hidden outline-0', local.class);
         }
     }, others, {
+        "data-slot": "command-palette-list",
         get children () {
             return createComponent(ScrollArea, {
                 "data-slot": "command-palette-scroll-area",
@@ -395,55 +402,60 @@ function CommandPaletteEmpty(props) {
         'class'
     ]);
     return createComponent(Combobox.Empty, mergeProps({
-        "data-slot": "command-palette-empty",
         get ["class"] () {
             return cn('[&:not(:empty)]:px-4 [&:not(:empty)]:py-3 [&:not(:empty)]:text-sm [&:not(:empty)]:leading-5 [&:not(:empty)]:text-muted-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-empty"
+    }));
 }
 function CommandPaletteItemGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Combobox.ItemGroup, mergeProps({
-        "data-slot": "command-palette-item-group",
         get ["class"] () {
             return cn('grid gap-1 [&:not(:last-child)]:pb-2', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-item-group"
+    }));
 }
 function CommandPaletteItemGroupLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Combobox.ItemGroupLabel, mergeProps({
-        "data-slot": "command-palette-item-group-label",
         get ["class"] () {
             return cn('sticky top-0 z-1 block bg-popover px-3 py-1 text-xs leading-4 font-normal text-muted-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-item-group-label"
+    }));
 }
 function CommandPaletteItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Combobox.Item, mergeProps({
-        "data-slot": "command-palette-item",
         get ["class"] () {
             return cn('relative z-0 grid min-h-control-sm cursor-default grid-cols-[auto_minmax(0,1fr)_auto_auto] items-center gap-3 rounded-md px-3 py-1 text-sm leading-5 text-popover-foreground outline-0 select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-foreground data-[state=checked]:text-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-item"
+    }));
 }
 function CommandPaletteItemText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Combobox.ItemText, mergeProps({
-        "data-slot": "command-palette-item-text",
         get ["class"] () {
             return cn('grid min-w-0 gap-1', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-item-text"
+    }));
 }
 function CommandPaletteItemIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -452,11 +464,11 @@ function CommandPaletteItemIndicator(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(Combobox.ItemIndicator, mergeProps({
-        "data-slot": "command-palette-item-indicator",
         get ["class"] () {
             return cn('inline-flex size-8 items-center justify-center justify-self-end rounded-md border border-transparent bg-transparent text-muted-foreground [&>svg]:size-4 [&>svg]:shrink-0', local.class);
         }
     }, others, {
+        "data-slot": "command-palette-item-indicator",
         get children () {
             return resolvedChildren() ?? createComponent(CheckIcon, {});
         }
@@ -467,44 +479,48 @@ function CommandPaletteItemIcon(props) {
         'class'
     ]);
     return createComponent(ark.span, mergeProps({
-        "data-slot": "command-palette-item-icon",
         get ["class"] () {
             return cn('inline-flex size-8 items-center justify-center rounded-md border border-border bg-muted text-muted-foreground [&>svg]:size-4 [&>svg]:shrink-0', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-item-icon"
+    }));
 }
 function CommandPaletteItemLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.span, mergeProps({
-        "data-slot": "command-palette-item-label",
         get ["class"] () {
             return cn('min-w-0 overflow-hidden font-medium text-ellipsis whitespace-nowrap', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-item-label"
+    }));
 }
 function CommandPaletteItemDescription(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.span, mergeProps({
-        "data-slot": "command-palette-item-description",
         get ["class"] () {
             return cn('min-w-0 overflow-hidden text-xs leading-4 text-ellipsis whitespace-nowrap text-muted-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-item-description"
+    }));
 }
 function CommandPaletteItemMeta(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.span, mergeProps({
-        "data-slot": "command-palette-item-meta",
         get ["class"] () {
             return cn('justify-self-end text-xs leading-4 whitespace-nowrap text-muted-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-item-meta"
+    }));
 }
 function CommandPaletteSeparator(props) {
     const [local, others] = splitProps(props, [
@@ -512,33 +528,36 @@ function CommandPaletteSeparator(props) {
     ]);
     return createComponent(ark.div, mergeProps({
         role: "separator",
-        "data-slot": "command-palette-separator",
         get ["class"] () {
             return cn('mx-2 my-2 h-px bg-border', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-separator"
+    }));
 }
 function CommandPaletteFooter(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-slot": "command-palette-footer",
         get ["class"] () {
             return cn('flex flex-none items-center justify-between gap-3 border-t border-border px-4 py-2 text-xs leading-4 text-muted-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-footer"
+    }));
 }
 function CommandPaletteKbd(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Kbd.Root, mergeProps({
-        "data-slot": "command-palette-kbd",
         get ["class"] () {
             return cn('min-h-5 min-w-5 rounded-sm px-1 text-xs leading-4 text-muted-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-kbd"
+    }));
 }
 const CommandPalette = Object.assign(CommandPaletteRoot, {
     Root: CommandPaletteRoot,