@moduix/solid-tailwind 1.0.0 → 1.1.0

package/dist/components/drawer/Drawer.js

@@ -101,11 +101,12 @@ function DrawerTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "drawer-trigger",
         get ["class"] () {
             return cn(!local.asChild && 'box-border inline-flex min-h-control-md cursor-pointer items-center justify-center 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 disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "drawer-trigger"
+    }));
 }
 function DrawerBackdrop(props) {
     const [local, others] = splitProps(props, [
@@ -114,11 +115,12 @@ function DrawerBackdrop(props) {
     return createComponent(OverlayPortal, {
         get children () {
             return createComponent(Drawer.Backdrop, mergeProps({
-                "data-slot": "drawer-backdrop",
                 get ["class"] () {
                     return cn('fixed inset-0 z-[calc(40+var(--layer-index,0))] min-h-dvh bg-overlay backdrop-blur-xs [transition:opacity_calc(var(--drawer-swipe-strength,1)*450ms)_ease-out,backdrop-filter_calc(var(--drawer-swipe-strength,1)*450ms)_ease-out] data-[state=closed]:animate-moduix-drawer-backdrop-out data-[state=open]:animate-moduix-drawer-backdrop-in data-[state=open]:data-swiping:[transition-duration:0s] motion-reduce:[transition-duration:1ms] motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms] [&[hidden]:has(~[data-slot=drawer-positioner]:not([hidden]))]:block', local.class);
                 }
-            }, others));
+            }, others, {
+                "data-slot": "drawer-backdrop"
+            }));
         }
     });
 }
@@ -129,11 +131,12 @@ function DrawerPositioner(props) {
     return createComponent(OverlayPortal, {
         get children () {
             return createComponent(Drawer.Positioner, mergeProps({
-                "data-slot": "drawer-positioner",
                 get ["class"] () {
                     return cn('fixed inset-0 z-[calc(50+var(--layer-index,0))] box-border flex items-end justify-center overflow-hidden overscroll-contain p-0 has-[>[data-slot=drawer-content][data-variant=island]]:pt-[max(1rem,env(safe-area-inset-top,0px))] has-[>[data-slot=drawer-content][data-variant=island]]:pr-[max(1rem,env(safe-area-inset-right,0px))] has-[>[data-slot=drawer-content][data-variant=island]]:pb-[max(1rem,env(safe-area-inset-bottom,0px))] has-[>[data-slot=drawer-content][data-variant=island]]:pl-[max(1rem,env(safe-area-inset-left,0px))] data-[swipe-direction=left]:items-stretch data-[swipe-direction=left]:justify-start data-[swipe-direction=right]:items-stretch data-[swipe-direction=right]:justify-end data-[swipe-direction=up]:items-start [&:not([hidden])_[data-slot=drawer-content][hidden]]:flex', local.class);
                 }
-            }, others));
+            }, others, {
+                "data-slot": "drawer-positioner"
+            }));
         }
     });
 }
@@ -145,7 +148,6 @@ function DrawerContent(props) {
     ]);
     const rootVariant = useContext(DrawerVariantContext);
     return createComponent(Drawer.Content, mergeProps({
-        "data-slot": "drawer-content",
         get ["data-variant"] () {
             return local.variant ?? rootVariant;
         },
@@ -155,51 +157,57 @@ function DrawerContent(props) {
         get draggable () {
             return local.draggable ?? true;
         }
-    }, others));
+    }, others, {
+        "data-slot": "drawer-content"
+    }));
 }
 function DrawerGrabber(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Drawer.Grabber, mergeProps({
-        "data-slot": "drawer-grabber",
         get ["class"] () {
             return cn('group/grabber flex w-full shrink-0 cursor-grab items-center justify-center pb-1 select-none group-data-[swipe-direction=left]/drawer:hidden group-data-[swipe-direction=right]/drawer:hidden active:cursor-grabbing', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "drawer-grabber"
+    }));
 }
 function DrawerGrabberIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Drawer.GrabberIndicator, mergeProps({
-        "data-slot": "drawer-grabber-indicator",
         get ["class"] () {
             return cn('h-1 w-12 rounded-full bg-muted-foreground opacity-[0.45] transition-[background-color,opacity] duration-200 ease-in-out motion-reduce:transition-none [@media(hover:hover)]:group-hover/grabber:opacity-70', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "drawer-grabber-indicator"
+    }));
 }
 function DrawerTitle(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Drawer.Title, mergeProps({
-        "data-slot": "drawer-title",
         get ["class"] () {
             return cn('text-lg font-semibold text-popover-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "drawer-title"
+    }));
 }
 function DrawerDescription(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Drawer.Description, mergeProps({
-        "data-slot": "drawer-description",
         get ["class"] () {
             return cn('text-md leading-6 text-muted-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "drawer-description"
+    }));
 }
 function DrawerCloseTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -210,11 +218,12 @@ function DrawerCloseTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "drawer-close-trigger",
         get ["class"] () {
             return cn(!local.asChild && 'box-border inline-flex min-h-control-md cursor-pointer items-center justify-center 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 disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "drawer-close-trigger"
+    }));
 }
 function DrawerCloseIcon(props) {
     const [local, others] = splitProps(props, [
@@ -247,66 +256,72 @@ function DrawerSwipeArea(props) {
         'class'
     ]);
     return createComponent(Drawer.SwipeArea, mergeProps({
-        "data-slot": "drawer-swipe-area",
         get ["class"] () {
             return cn('fixed z-50 touch-none data-disabled:pointer-events-none data-[swipe-direction=down]:start-0 data-[swipe-direction=down]:end-0 data-[swipe-direction=down]:top-0 data-[swipe-direction=down]:h-10 data-[swipe-direction=left]:end-0 data-[swipe-direction=left]:top-0 data-[swipe-direction=left]:bottom-0 data-[swipe-direction=left]:w-10 data-[swipe-direction=right]:start-0 data-[swipe-direction=right]:top-0 data-[swipe-direction=right]:bottom-0 data-[swipe-direction=right]:w-10 data-[swipe-direction=up]:start-0 data-[swipe-direction=up]:end-0 data-[swipe-direction=up]:bottom-0 data-[swipe-direction=up]:h-10', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "drawer-swipe-area"
+    }));
 }
 function DrawerIndent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Drawer.Indent, mergeProps({
-        "data-slot": "drawer-indent",
         get ["class"] () {
             return cn('relative origin-top [translate:0_0] [scale:1] transition-[transform,border-radius] duration-[450ms] ease-spring data-active:[translate:0_calc(8px*(1-var(--drawer-swipe-progress,0)))] data-active:[scale:calc(0.97+(1-0.97)*var(--drawer-swipe-progress,0))] data-active:rounded-t-lg data-active:rounded-b-none motion-reduce:[transition-duration:1ms]', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "drawer-indent"
+    }));
 }
 function DrawerIndentBackground(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Drawer.IndentBackground, mergeProps({
-        "data-slot": "drawer-indent-background",
         get ["class"] () {
             return cn('pointer-events-none absolute inset-0 bg-foreground opacity-0 transition-opacity duration-[450ms] ease-spring data-active:opacity-[calc(1-var(--drawer-swipe-progress,0))] motion-reduce:[transition-duration:1ms]', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "drawer-indent-background"
+    }));
 }
 function DrawerHeader(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-slot": "drawer-header",
         get ["class"] () {
             return cn("grid grid-cols-[minmax(0,1fr)_auto] items-start gap-1 [&>[data-slot='drawer-close-icon']]:col-start-2 [&>[data-slot='drawer-close-icon']]:justify-self-end [&>[data-slot='drawer-close-trigger']]:col-start-2 [&>[data-slot='drawer-close-trigger']]:justify-self-end [&>[data-slot='drawer-description']]:col-span-2 [&>[data-slot='drawer-title']]:col-start-1", local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "drawer-header"
+    }));
 }
 function DrawerBody(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-slot": "drawer-body",
         get ["class"] () {
             return cn('mt-4 min-h-0 overflow-y-auto text-md leading-6 text-muted-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "drawer-body"
+    }));
 }
 function DrawerFooter(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-slot": "drawer-footer",
         get ["class"] () {
             return cn('mt-6 flex justify-end gap-2', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "drawer-footer"
+    }));
 }
 const Drawer_Drawer = Object.assign(DrawerRoot, {
     Root: DrawerRoot,

package/dist/components/drawer/Drawer.jsx

@@ -48,14 +48,14 @@ function DrawerTrigger(props) {
         'asChild',
         'class'
     ]);
-    return <Drawer.Trigger asChild={local.asChild} data-slot="drawer-trigger" class={cn(!local.asChild && 'box-border inline-flex min-h-control-md cursor-pointer items-center justify-center 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 disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class)} {...others}/>;
+    return <Drawer.Trigger asChild={local.asChild} class={cn(!local.asChild && 'box-border inline-flex min-h-control-md cursor-pointer items-center justify-center 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 disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class)} {...others} data-slot="drawer-trigger"/>;
 }
 function DrawerBackdrop(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return <OverlayPortal>
-      <Drawer.Backdrop data-slot="drawer-backdrop" class={cn('fixed inset-0 z-[calc(40+var(--layer-index,0))] min-h-dvh bg-overlay backdrop-blur-xs [transition:opacity_calc(var(--drawer-swipe-strength,1)*450ms)_ease-out,backdrop-filter_calc(var(--drawer-swipe-strength,1)*450ms)_ease-out] data-[state=closed]:animate-moduix-drawer-backdrop-out data-[state=open]:animate-moduix-drawer-backdrop-in data-[state=open]:data-swiping:[transition-duration:0s] motion-reduce:[transition-duration:1ms] motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms] [&[hidden]:has(~[data-slot=drawer-positioner]:not([hidden]))]:block', local.class)} {...others}/>
+      <Drawer.Backdrop class={cn('fixed inset-0 z-[calc(40+var(--layer-index,0))] min-h-dvh bg-overlay backdrop-blur-xs [transition:opacity_calc(var(--drawer-swipe-strength,1)*450ms)_ease-out,backdrop-filter_calc(var(--drawer-swipe-strength,1)*450ms)_ease-out] data-[state=closed]:animate-moduix-drawer-backdrop-out data-[state=open]:animate-moduix-drawer-backdrop-in data-[state=open]:data-swiping:[transition-duration:0s] motion-reduce:[transition-duration:1ms] motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms] [&[hidden]:has(~[data-slot=drawer-positioner]:not([hidden]))]:block', local.class)} {...others} data-slot="drawer-backdrop"/>
     </OverlayPortal>;
 }
 function DrawerPositioner(props) {
@@ -63,7 +63,7 @@ function DrawerPositioner(props) {
         'class'
     ]);
     return <OverlayPortal>
-      <Drawer.Positioner data-slot="drawer-positioner" class={cn('fixed inset-0 z-[calc(50+var(--layer-index,0))] box-border flex items-end justify-center overflow-hidden overscroll-contain p-0 has-[>[data-slot=drawer-content][data-variant=island]]:pt-[max(1rem,env(safe-area-inset-top,0px))] has-[>[data-slot=drawer-content][data-variant=island]]:pr-[max(1rem,env(safe-area-inset-right,0px))] has-[>[data-slot=drawer-content][data-variant=island]]:pb-[max(1rem,env(safe-area-inset-bottom,0px))] has-[>[data-slot=drawer-content][data-variant=island]]:pl-[max(1rem,env(safe-area-inset-left,0px))] data-[swipe-direction=left]:items-stretch data-[swipe-direction=left]:justify-start data-[swipe-direction=right]:items-stretch data-[swipe-direction=right]:justify-end data-[swipe-direction=up]:items-start [&:not([hidden])_[data-slot=drawer-content][hidden]]:flex', local.class)} {...others}/>
+      <Drawer.Positioner class={cn('fixed inset-0 z-[calc(50+var(--layer-index,0))] box-border flex items-end justify-center overflow-hidden overscroll-contain p-0 has-[>[data-slot=drawer-content][data-variant=island]]:pt-[max(1rem,env(safe-area-inset-top,0px))] has-[>[data-slot=drawer-content][data-variant=island]]:pr-[max(1rem,env(safe-area-inset-right,0px))] has-[>[data-slot=drawer-content][data-variant=island]]:pb-[max(1rem,env(safe-area-inset-bottom,0px))] has-[>[data-slot=drawer-content][data-variant=island]]:pl-[max(1rem,env(safe-area-inset-left,0px))] data-[swipe-direction=left]:items-stretch data-[swipe-direction=left]:justify-start data-[swipe-direction=right]:items-stretch data-[swipe-direction=right]:justify-end data-[swipe-direction=up]:items-start [&:not([hidden])_[data-slot=drawer-content][hidden]]:flex', local.class)} {...others} data-slot="drawer-positioner"/>
     </OverlayPortal>;
 }
 function DrawerContent(props) {
@@ -73,38 +73,38 @@ function DrawerContent(props) {
         'variant'
     ]);
     const rootVariant = useContext(DrawerVariantContext);
-    return <Drawer.Content data-slot="drawer-content" data-variant={local.variant ?? rootVariant} class={cn("group/drawer relative box-border flex h-full max-h-[80dvh] w-full max-w-[100vw] origin-bottom [translate:0_0] [scale:1] flex-col overscroll-contain rounded-t-xl rounded-b-none border border-border bg-popover px-6 pt-3 pb-[calc(1rem+env(safe-area-inset-bottom,0px))] text-popover-foreground shadow-lg outline-0 [transition:transform_calc(var(--drawer-swipe-strength,1)*450ms)_cubic-bezier(0,0,0.2,1),scale_450ms_cubic-bezier(0.32,0.72,0,1),translate_450ms_cubic-bezier(0.32,0.72,0,1)] after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-control-xl after:bg-inherit after:content-[''] data-dragging:select-none data-nested-drawer-swiping:[transition-duration:0s] data-[nested-drawer-open]:[scale:calc(1-0.05*var(--nested-drawers,0))] data-[state=closed]:animate-moduix-drawer-content-out-down data-[state=open]:animate-moduix-drawer-content-in-down data-[state=open]:data-swiping:[transition-duration:0s] data-[swipe-direction=down]:data-[nested-drawer-open]:[translate:0_calc(-1*40px*var(--nested-drawers,0))] data-[swipe-direction=left]:h-full data-[swipe-direction=left]:max-h-none data-[swipe-direction=left]:w-[min(22rem,calc(100vw-2rem))] data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:rounded-s-none data-[swipe-direction=left]:rounded-e-xl data-[swipe-direction=left]:p-6 data-[swipe-direction=left]:after:inset-x-auto data-[swipe-direction=left]:after:inset-y-0 data-[swipe-direction=left]:after:top-0 data-[swipe-direction=left]:after:right-full data-[swipe-direction=left]:after:h-auto data-[swipe-direction=left]:after:w-control-xl data-[swipe-direction=left]:data-[nested-drawer-open]:[translate:calc(40px*var(--nested-drawers,0))_0] data-[swipe-direction=left]:data-[state=closed]:animate-moduix-drawer-content-out-left data-[swipe-direction=left]:data-[state=open]:animate-moduix-drawer-content-in-left data-[swipe-direction=right]:h-full data-[swipe-direction=right]:max-h-none data-[swipe-direction=right]:w-[min(22rem,calc(100vw-2rem))] data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:rounded-s-xl data-[swipe-direction=right]:rounded-e-none data-[swipe-direction=right]:p-6 data-[swipe-direction=right]:after:inset-x-auto data-[swipe-direction=right]:after:inset-y-0 data-[swipe-direction=right]:after:top-0 data-[swipe-direction=right]:after:left-full data-[swipe-direction=right]:after:h-auto data-[swipe-direction=right]:after:w-control-xl data-[swipe-direction=right]:data-[nested-drawer-open]:[translate:calc(-1*40px*var(--nested-drawers,0))_0] data-[swipe-direction=right]:data-[state=closed]:animate-moduix-drawer-content-out-right data-[swipe-direction=right]:data-[state=open]:animate-moduix-drawer-content-in-right data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:rounded-t-none data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:pt-[calc(1rem+env(safe-area-inset-top,0px))] data-[swipe-direction=up]:pb-4 data-[swipe-direction=up]:after:top-auto data-[swipe-direction=up]:after:bottom-full data-[swipe-direction=up]:data-[nested-drawer-open]:[translate:0_calc(40px*var(--nested-drawers,0))] data-[swipe-direction=up]:data-[state=closed]:animate-moduix-drawer-content-out-up data-[swipe-direction=up]:data-[state=open]:animate-moduix-drawer-content-in-up data-[variant=island]:rounded-xl data-[variant=island]:after:hidden motion-reduce:[transition-duration:1ms] motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]", local.class)} draggable={local.draggable ?? true} {...others}/>;
+    return <Drawer.Content data-variant={local.variant ?? rootVariant} class={cn("group/drawer relative box-border flex h-full max-h-[80dvh] w-full max-w-[100vw] origin-bottom [translate:0_0] [scale:1] flex-col overscroll-contain rounded-t-xl rounded-b-none border border-border bg-popover px-6 pt-3 pb-[calc(1rem+env(safe-area-inset-bottom,0px))] text-popover-foreground shadow-lg outline-0 [transition:transform_calc(var(--drawer-swipe-strength,1)*450ms)_cubic-bezier(0,0,0.2,1),scale_450ms_cubic-bezier(0.32,0.72,0,1),translate_450ms_cubic-bezier(0.32,0.72,0,1)] after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-control-xl after:bg-inherit after:content-[''] data-dragging:select-none data-nested-drawer-swiping:[transition-duration:0s] data-[nested-drawer-open]:[scale:calc(1-0.05*var(--nested-drawers,0))] data-[state=closed]:animate-moduix-drawer-content-out-down data-[state=open]:animate-moduix-drawer-content-in-down data-[state=open]:data-swiping:[transition-duration:0s] data-[swipe-direction=down]:data-[nested-drawer-open]:[translate:0_calc(-1*40px*var(--nested-drawers,0))] data-[swipe-direction=left]:h-full data-[swipe-direction=left]:max-h-none data-[swipe-direction=left]:w-[min(22rem,calc(100vw-2rem))] data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:rounded-s-none data-[swipe-direction=left]:rounded-e-xl data-[swipe-direction=left]:p-6 data-[swipe-direction=left]:after:inset-x-auto data-[swipe-direction=left]:after:inset-y-0 data-[swipe-direction=left]:after:top-0 data-[swipe-direction=left]:after:right-full data-[swipe-direction=left]:after:h-auto data-[swipe-direction=left]:after:w-control-xl data-[swipe-direction=left]:data-[nested-drawer-open]:[translate:calc(40px*var(--nested-drawers,0))_0] data-[swipe-direction=left]:data-[state=closed]:animate-moduix-drawer-content-out-left data-[swipe-direction=left]:data-[state=open]:animate-moduix-drawer-content-in-left data-[swipe-direction=right]:h-full data-[swipe-direction=right]:max-h-none data-[swipe-direction=right]:w-[min(22rem,calc(100vw-2rem))] data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:rounded-s-xl data-[swipe-direction=right]:rounded-e-none data-[swipe-direction=right]:p-6 data-[swipe-direction=right]:after:inset-x-auto data-[swipe-direction=right]:after:inset-y-0 data-[swipe-direction=right]:after:top-0 data-[swipe-direction=right]:after:left-full data-[swipe-direction=right]:after:h-auto data-[swipe-direction=right]:after:w-control-xl data-[swipe-direction=right]:data-[nested-drawer-open]:[translate:calc(-1*40px*var(--nested-drawers,0))_0] data-[swipe-direction=right]:data-[state=closed]:animate-moduix-drawer-content-out-right data-[swipe-direction=right]:data-[state=open]:animate-moduix-drawer-content-in-right data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:rounded-t-none data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:pt-[calc(1rem+env(safe-area-inset-top,0px))] data-[swipe-direction=up]:pb-4 data-[swipe-direction=up]:after:top-auto data-[swipe-direction=up]:after:bottom-full data-[swipe-direction=up]:data-[nested-drawer-open]:[translate:0_calc(40px*var(--nested-drawers,0))] data-[swipe-direction=up]:data-[state=closed]:animate-moduix-drawer-content-out-up data-[swipe-direction=up]:data-[state=open]:animate-moduix-drawer-content-in-up data-[variant=island]:rounded-xl data-[variant=island]:after:hidden motion-reduce:[transition-duration:1ms] motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]", local.class)} draggable={local.draggable ?? true} {...others} data-slot="drawer-content"/>;
 }
 function DrawerGrabber(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Drawer.Grabber data-slot="drawer-grabber" class={cn('group/grabber flex w-full shrink-0 cursor-grab items-center justify-center pb-1 select-none group-data-[swipe-direction=left]/drawer:hidden group-data-[swipe-direction=right]/drawer:hidden active:cursor-grabbing', local.class)} {...others}/>;
+    return <Drawer.Grabber class={cn('group/grabber flex w-full shrink-0 cursor-grab items-center justify-center pb-1 select-none group-data-[swipe-direction=left]/drawer:hidden group-data-[swipe-direction=right]/drawer:hidden active:cursor-grabbing', local.class)} {...others} data-slot="drawer-grabber"/>;
 }
 function DrawerGrabberIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Drawer.GrabberIndicator data-slot="drawer-grabber-indicator" class={cn('h-1 w-12 rounded-full bg-muted-foreground opacity-[0.45] transition-[background-color,opacity] duration-200 ease-in-out motion-reduce:transition-none [@media(hover:hover)]:group-hover/grabber:opacity-70', local.class)} {...others}/>;
+    return <Drawer.GrabberIndicator class={cn('h-1 w-12 rounded-full bg-muted-foreground opacity-[0.45] transition-[background-color,opacity] duration-200 ease-in-out motion-reduce:transition-none [@media(hover:hover)]:group-hover/grabber:opacity-70', local.class)} {...others} data-slot="drawer-grabber-indicator"/>;
 }
 function DrawerTitle(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Drawer.Title data-slot="drawer-title" class={cn('text-lg font-semibold text-popover-foreground', local.class)} {...others}/>;
+    return <Drawer.Title class={cn('text-lg font-semibold text-popover-foreground', local.class)} {...others} data-slot="drawer-title"/>;
 }
 function DrawerDescription(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Drawer.Description data-slot="drawer-description" class={cn('text-md leading-6 text-muted-foreground', local.class)} {...others}/>;
+    return <Drawer.Description class={cn('text-md leading-6 text-muted-foreground', local.class)} {...others} data-slot="drawer-description"/>;
 }
 function DrawerCloseTrigger(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <Drawer.CloseTrigger asChild={local.asChild} data-slot="drawer-close-trigger" class={cn(!local.asChild && 'box-border inline-flex min-h-control-md cursor-pointer items-center justify-center 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 disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class)} {...others}/>;
+    return <Drawer.CloseTrigger asChild={local.asChild} class={cn(!local.asChild && 'box-border inline-flex min-h-control-md cursor-pointer items-center justify-center 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 disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class)} {...others} data-slot="drawer-close-trigger"/>;
 }
 function DrawerCloseIcon(props) {
     const [local, others] = splitProps(props, [
@@ -122,37 +122,37 @@ function DrawerSwipeArea(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Drawer.SwipeArea data-slot="drawer-swipe-area" class={cn('fixed z-50 touch-none data-disabled:pointer-events-none data-[swipe-direction=down]:start-0 data-[swipe-direction=down]:end-0 data-[swipe-direction=down]:top-0 data-[swipe-direction=down]:h-10 data-[swipe-direction=left]:end-0 data-[swipe-direction=left]:top-0 data-[swipe-direction=left]:bottom-0 data-[swipe-direction=left]:w-10 data-[swipe-direction=right]:start-0 data-[swipe-direction=right]:top-0 data-[swipe-direction=right]:bottom-0 data-[swipe-direction=right]:w-10 data-[swipe-direction=up]:start-0 data-[swipe-direction=up]:end-0 data-[swipe-direction=up]:bottom-0 data-[swipe-direction=up]:h-10', local.class)} {...others}/>;
+    return <Drawer.SwipeArea class={cn('fixed z-50 touch-none data-disabled:pointer-events-none data-[swipe-direction=down]:start-0 data-[swipe-direction=down]:end-0 data-[swipe-direction=down]:top-0 data-[swipe-direction=down]:h-10 data-[swipe-direction=left]:end-0 data-[swipe-direction=left]:top-0 data-[swipe-direction=left]:bottom-0 data-[swipe-direction=left]:w-10 data-[swipe-direction=right]:start-0 data-[swipe-direction=right]:top-0 data-[swipe-direction=right]:bottom-0 data-[swipe-direction=right]:w-10 data-[swipe-direction=up]:start-0 data-[swipe-direction=up]:end-0 data-[swipe-direction=up]:bottom-0 data-[swipe-direction=up]:h-10', local.class)} {...others} data-slot="drawer-swipe-area"/>;
 }
 function DrawerIndent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Drawer.Indent data-slot="drawer-indent" class={cn('relative origin-top [translate:0_0] [scale:1] transition-[transform,border-radius] duration-[450ms] ease-spring data-active:[translate:0_calc(8px*(1-var(--drawer-swipe-progress,0)))] data-active:[scale:calc(0.97+(1-0.97)*var(--drawer-swipe-progress,0))] data-active:rounded-t-lg data-active:rounded-b-none motion-reduce:[transition-duration:1ms]', local.class)} {...others}/>;
+    return <Drawer.Indent class={cn('relative origin-top [translate:0_0] [scale:1] transition-[transform,border-radius] duration-[450ms] ease-spring data-active:[translate:0_calc(8px*(1-var(--drawer-swipe-progress,0)))] data-active:[scale:calc(0.97+(1-0.97)*var(--drawer-swipe-progress,0))] data-active:rounded-t-lg data-active:rounded-b-none motion-reduce:[transition-duration:1ms]', local.class)} {...others} data-slot="drawer-indent"/>;
 }
 function DrawerIndentBackground(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Drawer.IndentBackground data-slot="drawer-indent-background" class={cn('pointer-events-none absolute inset-0 bg-foreground opacity-0 transition-opacity duration-[450ms] ease-spring data-active:opacity-[calc(1-var(--drawer-swipe-progress,0))] motion-reduce:[transition-duration:1ms]', local.class)} {...others}/>;
+    return <Drawer.IndentBackground class={cn('pointer-events-none absolute inset-0 bg-foreground opacity-0 transition-opacity duration-[450ms] ease-spring data-active:opacity-[calc(1-var(--drawer-swipe-progress,0))] motion-reduce:[transition-duration:1ms]', local.class)} {...others} data-slot="drawer-indent-background"/>;
 }
 function DrawerHeader(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-slot="drawer-header" class={cn("grid grid-cols-[minmax(0,1fr)_auto] items-start gap-1 [&>[data-slot='drawer-close-icon']]:col-start-2 [&>[data-slot='drawer-close-icon']]:justify-self-end [&>[data-slot='drawer-close-trigger']]:col-start-2 [&>[data-slot='drawer-close-trigger']]:justify-self-end [&>[data-slot='drawer-description']]:col-span-2 [&>[data-slot='drawer-title']]:col-start-1", local.class)} {...others}/>;
+    return <ark.div class={cn("grid grid-cols-[minmax(0,1fr)_auto] items-start gap-1 [&>[data-slot='drawer-close-icon']]:col-start-2 [&>[data-slot='drawer-close-icon']]:justify-self-end [&>[data-slot='drawer-close-trigger']]:col-start-2 [&>[data-slot='drawer-close-trigger']]:justify-self-end [&>[data-slot='drawer-description']]:col-span-2 [&>[data-slot='drawer-title']]:col-start-1", local.class)} {...others} data-slot="drawer-header"/>;
 }
 function DrawerBody(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-slot="drawer-body" class={cn('mt-4 min-h-0 overflow-y-auto text-md leading-6 text-muted-foreground', local.class)} {...others}/>;
+    return <ark.div class={cn('mt-4 min-h-0 overflow-y-auto text-md leading-6 text-muted-foreground', local.class)} {...others} data-slot="drawer-body"/>;
 }
 function DrawerFooter(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-slot="drawer-footer" class={cn('mt-6 flex justify-end gap-2', local.class)} {...others}/>;
+    return <ark.div class={cn('mt-6 flex justify-end gap-2', local.class)} {...others} data-slot="drawer-footer"/>;
 }
 const Drawer_Drawer = Object.assign(DrawerRoot, {
     Root: DrawerRoot,

package/dist/components/editable/Editable.js

@@ -9,80 +9,87 @@ function EditableRoot(props) {
         'class'
     ]);
     return createComponent(Editable.Root, mergeProps({
-        "data-slot": "editable-root",
         get activationMode () {
             return local.activationMode ?? 'dblclick';
         },
         get ["class"] () {
             return cn('box-border inline-grid max-w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-1 text-foreground has-[[data-disabled]]:opacity-50', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "editable-root"
+    }));
 }
 function EditableRootProvider(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Editable.RootProvider, mergeProps({
-        "data-slot": "editable-root-provider",
         get ["class"] () {
             return cn('box-border inline-grid max-w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-1 text-foreground has-[[data-disabled]]:opacity-50', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "editable-root-provider"
+    }));
 }
 function EditableLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Editable.Label, mergeProps({
-        "data-slot": "editable-label",
         get ["class"] () {
             return cn('col-span-full inline-flex items-center gap-1 text-sm leading-5 font-medium text-foreground data-invalid:text-destructive', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "editable-label"
+    }));
 }
 function EditableArea(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Editable.Area, mergeProps({
-        "data-slot": "editable-area",
         get ["class"] () {
             return cn('col-start-1 box-border inline-flex min-h-control-md w-full min-w-0 items-center rounded-md border border-border bg-background px-3.5 py-1 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,opacity] duration-200 ease-in-out has-[[aria-invalid=true]]:border-destructive has-[[data-invalid]]:border-destructive data-disabled:pointer-events-none data-focus:outline-ring data-focus:has-[[aria-invalid=true]]:outline-destructive data-focus:has-[[data-invalid]]:outline-destructive motion-reduce:transition-none', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "editable-area"
+    }));
 }
 function EditableInput(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Editable.Input, mergeProps({
-        "data-slot": "editable-input",
         get ["class"] () {
             return cn('box-border block w-full min-w-0 appearance-none bg-transparent text-md leading-6 text-inherit outline-0 placeholder:text-muted-foreground [&:is(textarea)]:min-h-24 [&:is(textarea)]:resize-y', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "editable-input"
+    }));
 }
 function EditablePreview(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Editable.Preview, mergeProps({
-        "data-slot": "editable-preview",
         get ["class"] () {
             return cn('box-border block min-h-[1lh] w-full min-w-0 cursor-text bg-transparent text-md leading-6 text-inherit outline-0 aria-readonly:cursor-default data-disabled:cursor-default data-readonly:cursor-default data-[placeholder-shown]:text-muted-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "editable-preview"
+    }));
 }
 function EditableControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Editable.Control, mergeProps({
-        "data-slot": "editable-control",
         get ["class"] () {
             return cn('col-start-2 inline-flex items-center gap-1 self-center', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "editable-control"
+    }));
 }
 function EditableEditTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -91,11 +98,11 @@ function EditableEditTrigger(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(Editable.EditTrigger, mergeProps({
-        "data-slot": "editable-edit-trigger",
         get ["class"] () {
             return cn('box-border inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-sm border border-border bg-background text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class);
         }
     }, others, {
+        "data-slot": "editable-edit-trigger",
         get children () {
             return resolvedChildren() ?? createComponent(PencilIcon, {});
         }
@@ -108,11 +115,11 @@ function EditableSubmitTrigger(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(Editable.SubmitTrigger, mergeProps({
-        "data-slot": "editable-submit-trigger",
         get ["class"] () {
             return cn('box-border inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-sm border border-border bg-background text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class);
         }
     }, others, {
+        "data-slot": "editable-submit-trigger",
         get children () {
             return resolvedChildren() ?? createComponent(CheckIcon, {});
         }
@@ -125,11 +132,11 @@ function EditableCancelTrigger(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(Editable.CancelTrigger, mergeProps({
-        "data-slot": "editable-cancel-trigger",
         get ["class"] () {
             return cn('box-border inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-sm border border-border bg-background text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class);
         }
     }, others, {
+        "data-slot": "editable-cancel-trigger",
         get children () {
             return resolvedChildren() ?? createComponent(CloseIcon, {});
         }

package/dist/components/editable/Editable.jsx

@@ -7,43 +7,43 @@ function EditableRoot(props) {
         'activationMode',
         'class'
     ]);
-    return <Editable.Root data-slot="editable-root" activationMode={local.activationMode ?? 'dblclick'} class={cn('box-border inline-grid max-w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-1 text-foreground has-[[data-disabled]]:opacity-50', local.class)} {...others}/>;
+    return <Editable.Root activationMode={local.activationMode ?? 'dblclick'} class={cn('box-border inline-grid max-w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-1 text-foreground has-[[data-disabled]]:opacity-50', local.class)} {...others} data-slot="editable-root"/>;
 }
 function EditableRootProvider(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Editable.RootProvider data-slot="editable-root-provider" class={cn('box-border inline-grid max-w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-1 text-foreground has-[[data-disabled]]:opacity-50', local.class)} {...others}/>;
+    return <Editable.RootProvider class={cn('box-border inline-grid max-w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-1 text-foreground has-[[data-disabled]]:opacity-50', local.class)} {...others} data-slot="editable-root-provider"/>;
 }
 function EditableLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Editable.Label data-slot="editable-label" class={cn('col-span-full inline-flex items-center gap-1 text-sm leading-5 font-medium text-foreground data-invalid:text-destructive', local.class)} {...others}/>;
+    return <Editable.Label class={cn('col-span-full inline-flex items-center gap-1 text-sm leading-5 font-medium text-foreground data-invalid:text-destructive', local.class)} {...others} data-slot="editable-label"/>;
 }
 function EditableArea(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Editable.Area data-slot="editable-area" class={cn('col-start-1 box-border inline-flex min-h-control-md w-full min-w-0 items-center rounded-md border border-border bg-background px-3.5 py-1 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,opacity] duration-200 ease-in-out has-[[aria-invalid=true]]:border-destructive has-[[data-invalid]]:border-destructive data-disabled:pointer-events-none data-focus:outline-ring data-focus:has-[[aria-invalid=true]]:outline-destructive data-focus:has-[[data-invalid]]:outline-destructive motion-reduce:transition-none', local.class)} {...others}/>;
+    return <Editable.Area class={cn('col-start-1 box-border inline-flex min-h-control-md w-full min-w-0 items-center rounded-md border border-border bg-background px-3.5 py-1 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,opacity] duration-200 ease-in-out has-[[aria-invalid=true]]:border-destructive has-[[data-invalid]]:border-destructive data-disabled:pointer-events-none data-focus:outline-ring data-focus:has-[[aria-invalid=true]]:outline-destructive data-focus:has-[[data-invalid]]:outline-destructive motion-reduce:transition-none', local.class)} {...others} data-slot="editable-area"/>;
 }
 function EditableInput(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Editable.Input data-slot="editable-input" class={cn('box-border block w-full min-w-0 appearance-none bg-transparent text-md leading-6 text-inherit outline-0 placeholder:text-muted-foreground [&:is(textarea)]:min-h-24 [&:is(textarea)]:resize-y', local.class)} {...others}/>;
+    return <Editable.Input class={cn('box-border block w-full min-w-0 appearance-none bg-transparent text-md leading-6 text-inherit outline-0 placeholder:text-muted-foreground [&:is(textarea)]:min-h-24 [&:is(textarea)]:resize-y', local.class)} {...others} data-slot="editable-input"/>;
 }
 function EditablePreview(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Editable.Preview data-slot="editable-preview" class={cn('box-border block min-h-[1lh] w-full min-w-0 cursor-text bg-transparent text-md leading-6 text-inherit outline-0 aria-readonly:cursor-default data-disabled:cursor-default data-readonly:cursor-default data-[placeholder-shown]:text-muted-foreground', local.class)} {...others}/>;
+    return <Editable.Preview class={cn('box-border block min-h-[1lh] w-full min-w-0 cursor-text bg-transparent text-md leading-6 text-inherit outline-0 aria-readonly:cursor-default data-disabled:cursor-default data-readonly:cursor-default data-[placeholder-shown]:text-muted-foreground', local.class)} {...others} data-slot="editable-preview"/>;
 }
 function EditableControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Editable.Control data-slot="editable-control" class={cn('col-start-2 inline-flex items-center gap-1 self-center', local.class)} {...others}/>;
+    return <Editable.Control class={cn('col-start-2 inline-flex items-center gap-1 self-center', local.class)} {...others} data-slot="editable-control"/>;
 }
 function EditableEditTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -51,7 +51,7 @@ function EditableEditTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Editable.EditTrigger data-slot="editable-edit-trigger" class={cn('box-border inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-sm border border-border bg-background text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class)} {...others}>
+    return <Editable.EditTrigger class={cn('box-border inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-sm border border-border bg-background text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class)} {...others} data-slot="editable-edit-trigger">
       {resolvedChildren() ?? <PencilIcon/>}
     </Editable.EditTrigger>;
 }
@@ -61,7 +61,7 @@ function EditableSubmitTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Editable.SubmitTrigger data-slot="editable-submit-trigger" class={cn('box-border inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-sm border border-border bg-background text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class)} {...others}>
+    return <Editable.SubmitTrigger class={cn('box-border inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-sm border border-border bg-background text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class)} {...others} data-slot="editable-submit-trigger">
       {resolvedChildren() ?? <CheckIcon/>}
     </Editable.SubmitTrigger>;
 }
@@ -71,7 +71,7 @@ function EditableCancelTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Editable.CancelTrigger data-slot="editable-cancel-trigger" class={cn('box-border inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-sm border border-border bg-background text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class)} {...others}>
+    return <Editable.CancelTrigger class={cn('box-border inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-sm border border-border bg-background text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class)} {...others} data-slot="editable-cancel-trigger">
       {resolvedChildren() ?? <CloseIcon/>}
     </Editable.CancelTrigger>;
 }

package/dist/components/empty/Empty.js

@@ -16,7 +16,7 @@ function EmptyRoot(props) {
         "data-part": "root",
         "data-slot": "empty-root",
         get ["class"] () {
-            return cn('grid w-full min-w-0 justify-items-center gap-4 rounded-xl border border-border bg-card p-8 text-center text-card-foreground', local.class);
+            return cn('grid w-full min-w-0 justify-items-center gap-4 rounded-xl border border-border bg-[color-mix(in_oklab,var(--color-card)_92%,var(--color-muted))] p-8 text-center text-card-foreground', local.class);
         }
     }));
 }

package/dist/components/empty/Empty.jsx

@@ -6,7 +6,7 @@ function EmptyRoot(props) {
         'asChild',
         'class'
     ]);
-    return <ark.div asChild={local.asChild} {...others} data-scope="empty" data-part="root" data-slot="empty-root" class={cn('grid w-full min-w-0 justify-items-center gap-4 rounded-xl border border-border bg-card p-8 text-center text-card-foreground', local.class)}/>;
+    return <ark.div asChild={local.asChild} {...others} data-scope="empty" data-part="root" data-slot="empty-root" class={cn('grid w-full min-w-0 justify-items-center gap-4 rounded-xl border border-border bg-[color-mix(in_oklab,var(--color-card)_92%,var(--color-muted))] p-8 text-center text-card-foreground', local.class)}/>;
 }
 function EmptyIcon(props) {
     const [local, others] = splitProps(props, [