@moduix/solid-tailwind 1.0.0 → 1.1.0

package/dist/components/toast/Toast.js

@@ -23,11 +23,11 @@ function Toast_Toaster(props) {
             return createComponent(OverlayPortal, {
                 get children () {
                     return createComponent(Toaster, mergeProps({
-                        "data-slot": "toast-toaster",
                         get ["class"] () {
                             return cn('z-70 max-[40rem]:w-full', local.class);
                         }
                     }, others, {
+                        "data-slot": "toast-toaster",
                         get children () {
                             return local.children ?? ((toast)=>createComponent(DefaultToast, {
                                     toast: toast
@@ -62,11 +62,12 @@ function ToastRoot(props) {
         'class'
     ]);
     return createComponent(Toast.Root, mergeProps({
-        "data-slot": "toast-root",
         get ["class"] () {
             return cn('group/toast pointer-events-auto [z-index:var(--z-index)] box-border grid [height:var(--height)] min-h-0 w-80 max-w-[calc(100vw-2rem)] min-w-0 [translate:var(--x)_var(--y)] [scale:var(--scale)] items-start gap-1 rounded-lg border border-border bg-card bg-clip-padding p-4 pe-11 text-card-foreground [opacity:var(--opacity)] shadow-lg transition-[translate,scale,opacity,height,box-shadow] duration-350 ease-[cubic-bezier(0.21,1.02,0.73,1)] [will-change:translate,opacity,scale] data-[state=closed]:ease-[cubic-bezier(0.06,0.71,0.55,1)] data-[state=closed]:[transition:translate_350ms,scale_350ms,opacity_200ms] data-[type=error]:border-destructive/35 data-[type=error]:bg-destructive/9 data-[type=error]:text-foreground data-[type=success]:border-success/34 data-[type=success]:bg-success/10 data-[type=success]:text-foreground data-[type=warning]:border-warning/38 data-[type=warning]:bg-warning/13 data-[type=warning]:text-foreground motion-reduce:transition-none max-[40rem]:inset-x-0 max-[40rem]:w-[calc(100%_-_(var(--gap)*2))] max-[40rem]:max-w-none', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "toast-root"
+    }));
 }
 function ToastTitle(props) {
     const [local, others] = splitProps(props, [
@@ -76,11 +77,11 @@ function ToastTitle(props) {
     const resolvedChildren = children(()=>local.children);
     const toast = useToastContext();
     return createComponent(Toast.Title, mergeProps({
-        "data-slot": "toast-title",
         get ["class"] () {
             return cn('m-0 flex min-w-0 items-center gap-2 text-sm leading-5 font-semibold wrap-anywhere text-inherit', local.class);
         }
     }, others, {
+        "data-slot": "toast-title",
         get children () {
             return memo(()=>void 0 === resolvedChildren())() ? toast().title : resolvedChildren();
         }
@@ -94,11 +95,11 @@ function ToastDescription(props) {
     const resolvedChildren = children(()=>local.children);
     const toast = useToastContext();
     return createComponent(Toast.Description, mergeProps({
-        "data-slot": "toast-description",
         get ["class"] () {
             return cn('m-0 min-w-0 text-sm leading-5 wrap-anywhere text-muted-foreground', local.class);
         }
     }, others, {
+        "data-slot": "toast-description",
         get children () {
             return memo(()=>void 0 === resolvedChildren())() ? toast().description : resolvedChildren();
         }
@@ -114,11 +115,11 @@ function ToastActionTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "toast-action-trigger",
         get ["class"] () {
             return cn(!local.asChild && 'mt-2 inline-flex min-h-control-xs w-max max-w-full min-w-0 cursor-pointer items-center justify-center gap-2 rounded-sm border border-border bg-transparent px-2 py-1 text-start text-xs leading-4 font-medium wrap-anywhere text-foreground transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:outline-ring motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class);
         }
     }, others, {
+        "data-slot": "toast-action-trigger",
         get children () {
             return local.children;
         }
@@ -138,7 +139,6 @@ function ToastCloseTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "toast-close-trigger",
         "aria-label": ariaLabel,
         get ["aria-labelledby"] () {
             return local['aria-labelledby'];
@@ -147,6 +147,7 @@ function ToastCloseTrigger(props) {
             return local.class;
         }
     }, others, {
+        "data-slot": "toast-close-trigger",
         get children () {
             return local.children;
         }
@@ -165,12 +166,13 @@ function ToastCloseTrigger(props) {
                     return resolvedChildren();
                 }
             })),
-        "data-slot": "toast-close-trigger",
         "aria-label": ariaLabel,
         get ["aria-labelledby"] () {
             return local['aria-labelledby'];
         }
-    }, others));
+    }, others, {
+        "data-slot": "toast-close-trigger"
+    }));
 }
 const Toast_Toast = Object.assign(ToastRoot, {
     Root: ToastRoot,

package/dist/components/toast/Toast.jsx

@@ -13,7 +13,7 @@ function Toast_Toaster(props) {
     ]);
     return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
       <OverlayPortal>
-        <Toaster data-slot="toast-toaster" class={cn('z-70 max-[40rem]:w-full', local.class)} {...others} children={local.children ?? ((toast)=><DefaultToast toast={toast}/>)}/>
+        <Toaster class={cn('z-70 max-[40rem]:w-full', local.class)} {...others} data-slot="toast-toaster" children={local.children ?? ((toast)=><DefaultToast toast={toast}/>)}/>
       </OverlayPortal>
     </OverlayPortalProvider>;
 }
@@ -31,7 +31,7 @@ function ToastRoot(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Toast.Root data-slot="toast-root" class={cn('group/toast pointer-events-auto [z-index:var(--z-index)] box-border grid [height:var(--height)] min-h-0 w-80 max-w-[calc(100vw-2rem)] min-w-0 [translate:var(--x)_var(--y)] [scale:var(--scale)] items-start gap-1 rounded-lg border border-border bg-card bg-clip-padding p-4 pe-11 text-card-foreground [opacity:var(--opacity)] shadow-lg transition-[translate,scale,opacity,height,box-shadow] duration-350 ease-[cubic-bezier(0.21,1.02,0.73,1)] [will-change:translate,opacity,scale] data-[state=closed]:ease-[cubic-bezier(0.06,0.71,0.55,1)] data-[state=closed]:[transition:translate_350ms,scale_350ms,opacity_200ms] data-[type=error]:border-destructive/35 data-[type=error]:bg-destructive/9 data-[type=error]:text-foreground data-[type=success]:border-success/34 data-[type=success]:bg-success/10 data-[type=success]:text-foreground data-[type=warning]:border-warning/38 data-[type=warning]:bg-warning/13 data-[type=warning]:text-foreground motion-reduce:transition-none max-[40rem]:inset-x-0 max-[40rem]:w-[calc(100%_-_(var(--gap)*2))] max-[40rem]:max-w-none', local.class)} {...others}/>;
+    return <Toast.Root class={cn('group/toast pointer-events-auto [z-index:var(--z-index)] box-border grid [height:var(--height)] min-h-0 w-80 max-w-[calc(100vw-2rem)] min-w-0 [translate:var(--x)_var(--y)] [scale:var(--scale)] items-start gap-1 rounded-lg border border-border bg-card bg-clip-padding p-4 pe-11 text-card-foreground [opacity:var(--opacity)] shadow-lg transition-[translate,scale,opacity,height,box-shadow] duration-350 ease-[cubic-bezier(0.21,1.02,0.73,1)] [will-change:translate,opacity,scale] data-[state=closed]:ease-[cubic-bezier(0.06,0.71,0.55,1)] data-[state=closed]:[transition:translate_350ms,scale_350ms,opacity_200ms] data-[type=error]:border-destructive/35 data-[type=error]:bg-destructive/9 data-[type=error]:text-foreground data-[type=success]:border-success/34 data-[type=success]:bg-success/10 data-[type=success]:text-foreground data-[type=warning]:border-warning/38 data-[type=warning]:bg-warning/13 data-[type=warning]:text-foreground motion-reduce:transition-none max-[40rem]:inset-x-0 max-[40rem]:w-[calc(100%_-_(var(--gap)*2))] max-[40rem]:max-w-none', local.class)} {...others} data-slot="toast-root"/>;
 }
 function ToastTitle(props) {
     const [local, others] = splitProps(props, [
@@ -40,7 +40,7 @@ function ToastTitle(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     const toast = useToastContext();
-    return <Toast.Title data-slot="toast-title" class={cn('m-0 flex min-w-0 items-center gap-2 text-sm leading-5 font-semibold wrap-anywhere text-inherit', local.class)} {...others}>
+    return <Toast.Title class={cn('m-0 flex min-w-0 items-center gap-2 text-sm leading-5 font-semibold wrap-anywhere text-inherit', local.class)} {...others} data-slot="toast-title">
       {void 0 === resolvedChildren() ? toast().title : resolvedChildren()}
     </Toast.Title>;
 }
@@ -51,7 +51,7 @@ function ToastDescription(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     const toast = useToastContext();
-    return <Toast.Description data-slot="toast-description" class={cn('m-0 min-w-0 text-sm leading-5 wrap-anywhere text-muted-foreground', local.class)} {...others}>
+    return <Toast.Description class={cn('m-0 min-w-0 text-sm leading-5 wrap-anywhere text-muted-foreground', local.class)} {...others} data-slot="toast-description">
       {void 0 === resolvedChildren() ? toast().description : resolvedChildren()}
     </Toast.Description>;
 }
@@ -61,7 +61,7 @@ function ToastActionTrigger(props) {
         'children',
         'class'
     ]);
-    return <Toast.ActionTrigger asChild={local.asChild} data-slot="toast-action-trigger" class={cn(!local.asChild && 'mt-2 inline-flex min-h-control-xs w-max max-w-full min-w-0 cursor-pointer items-center justify-center gap-2 rounded-sm border border-border bg-transparent px-2 py-1 text-start text-xs leading-4 font-medium wrap-anywhere text-foreground transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:outline-ring motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class)} {...others}>
+    return <Toast.ActionTrigger asChild={local.asChild} class={cn(!local.asChild && 'mt-2 inline-flex min-h-control-xs w-max max-w-full min-w-0 cursor-pointer items-center justify-center gap-2 rounded-sm border border-border bg-transparent px-2 py-1 text-start text-xs leading-4 font-medium wrap-anywhere text-foreground transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:outline-ring motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class)} {...others} data-slot="toast-action-trigger">
       {local.children}
     </Toast.ActionTrigger>;
 }
@@ -75,12 +75,12 @@ function ToastCloseTrigger(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     const ariaLabel = void 0 === local['aria-label'] ? DEFAULT_CLOSE_TRIGGER_LABEL : local['aria-label'];
-    if (local.asChild) return <Toast.CloseTrigger asChild={local.asChild} data-slot="toast-close-trigger" aria-label={ariaLabel} aria-labelledby={local['aria-labelledby']} class={local.class} {...others}>
+    if (local.asChild) return <Toast.CloseTrigger asChild={local.asChild} aria-label={ariaLabel} aria-labelledby={local['aria-labelledby']} class={local.class} {...others} data-slot="toast-close-trigger">
         {local.children}
       </Toast.CloseTrigger>;
     return <Toast.CloseTrigger asChild={(triggerProps)=><CloseButton.Root {...triggerProps()} data-slot="toast-close-trigger" aria-label={ariaLabel} aria-labelledby={local['aria-labelledby']} class={cn('absolute end-2 top-2', local.class)}>
           {resolvedChildren()}
-        </CloseButton.Root>} data-slot="toast-close-trigger" aria-label={ariaLabel} aria-labelledby={local['aria-labelledby']} {...others}/>;
+        </CloseButton.Root>} aria-label={ariaLabel} aria-labelledby={local['aria-labelledby']} {...others} data-slot="toast-close-trigger"/>;
 }
 const Toast_Toast = Object.assign(ToastRoot, {
     Root: ToastRoot,

package/dist/components/toc/Toc.js

@@ -2,7 +2,7 @@ import { createComponent, insert, memo, mergeProps, spread, template } from "sol
 import { Toc, useToc, useTocContext } from "@ark-ui/solid/toc";
 import { splitProps } from "solid-js";
 import { cn } from "../../internal/cn.js";
-var _tmpl$ = /*#__PURE__*/ template("<svg aria-hidden=true data-slot=toc-rail><line y2=100%>"), _tmpl$2 = /*#__PURE__*/ template("<svg><path fill=none></svg>", false, true, false);
+var _tmpl$ = /*#__PURE__*/ template("<svg aria-hidden=true><line y2=100%>"), _tmpl$2 = /*#__PURE__*/ template("<svg><path fill=none></svg>", false, true, false);
 const railBaseOffset = 0;
 const railStep = 12;
 const railBridge = 6;
@@ -22,11 +22,12 @@ function TocRoot(props) {
         get autoScroll () {
             return local.autoScroll ?? false;
         },
-        "data-slot": "toc-root",
         get ["class"] () {
             return cn('group/toc box-border grid w-full min-w-0 grid-cols-[minmax(0,1fr)_minmax(12rem,16rem)] gap-6 text-foreground has-[[data-slot=toc-nav][data-placement=left]]:grid-cols-[minmax(12rem,16rem)_minmax(0,1fr)] max-md:grid-cols-[minmax(0,1fr)] max-md:has-[[data-slot=toc-nav][data-placement=left]]:grid-cols-[minmax(0,1fr)]', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "toc-root"
+    }));
 }
 function TocRootProvider(props) {
     const [local, others] = splitProps(props, [
@@ -39,91 +40,99 @@ function TocRootProvider(props) {
         get value () {
             return local.value;
         },
-        "data-slot": "toc-root-provider",
         get ["class"] () {
             return cn('group/toc box-border grid w-full min-w-0 grid-cols-[minmax(0,1fr)_minmax(12rem,16rem)] gap-6 text-foreground has-[[data-slot=toc-nav][data-placement=left]]:grid-cols-[minmax(12rem,16rem)_minmax(0,1fr)] max-md:grid-cols-[minmax(0,1fr)] max-md:has-[[data-slot=toc-nav][data-placement=left]]:grid-cols-[minmax(0,1fr)]', local.class);
         },
         get style () {
             return getRootStyle();
         }
-    }, others));
+    }, others, {
+        "data-slot": "toc-root-provider"
+    }));
 }
 function TocContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Toc.Content, mergeProps({
-        "data-slot": "toc-content",
         get ["class"] () {
             return cn('min-w-0 scroll-smooth group-has-[[data-slot=toc-nav][data-placement=left]]/toc:col-start-2 group-has-[[data-slot=toc-nav][data-placement=left]]/toc:row-start-1 motion-reduce:scroll-auto max-md:group-has-[[data-slot=toc-nav][data-placement=left]]/toc:col-auto max-md:group-has-[[data-slot=toc-nav][data-placement=left]]/toc:row-auto', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "toc-content"
+    }));
 }
 function TocNav(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Toc.Nav, mergeProps({
-        "data-slot": "toc-nav",
         get ["class"] () {
             return cn('sticky top-4 max-h-[calc(100dvh-2rem)] min-w-0 self-start overflow-auto rounded-lg border border-border bg-card p-4 text-card-foreground data-[placement=left]:col-start-1 data-[placement=left]:row-start-1 max-md:data-[placement=left]:col-auto max-md:data-[placement=left]:row-auto', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "toc-nav"
+    }));
 }
 function TocTitle(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Toc.Title, mergeProps({
-        "data-slot": "toc-title",
         get ["class"] () {
             return cn('m-0 mb-2 text-sm leading-5 font-semibold text-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "toc-title"
+    }));
 }
 function TocList(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Toc.List, mergeProps({
-        "data-slot": "toc-list",
         get ["class"] () {
             return cn("relative m-0 grid list-none gap-0.5 py-0 ps-1 has-[[data-slot=toc-indicator]]:before:pointer-events-none has-[[data-slot=toc-indicator]]:before:absolute has-[[data-slot=toc-indicator]]:before:inset-y-0.5 has-[[data-slot=toc-indicator]]:before:start-0 has-[[data-slot=toc-indicator]]:before:w-0.5 has-[[data-slot=toc-indicator]]:before:rounded-full has-[[data-slot=toc-indicator]]:before:bg-border has-[[data-slot=toc-indicator]]:before:content-['']", local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "toc-list"
+    }));
 }
 function TocItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Toc.Item, mergeProps({
-        "data-slot": "toc-item",
         get ["class"] () {
             return cn('min-w-0', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "toc-item"
+    }));
 }
 function TocLink(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Toc.Link, mergeProps({
-        "data-slot": "toc-link",
         get ["class"] () {
             return cn('group/toc-link relative block min-w-0 overflow-hidden rounded-sm py-1 ps-[calc(0.875rem+max(0px,((var(--depth)-2)*0.5rem)))] pe-1 text-sm leading-5 text-ellipsis whitespace-nowrap text-muted-foreground no-underline outline-0 transition-colors duration-200 ring-inset focus-visible:ring-1 focus-visible:ring-ring has-[[data-slot=toc-rail]]:overflow-visible data-active:font-medium data-active:text-foreground motion-reduce:transition-none [@media(hover:hover)]:hover:text-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "toc-link"
+    }));
 }
 function TocIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Toc.Indicator, mergeProps({
-        "data-slot": "toc-indicator",
         get ["class"] () {
             return cn('pointer-events-none start-0 top-[calc(var(--top)+0.125rem)] z-1 h-[calc(var(--height)-0.25rem)] w-0.5 rounded-full bg-muted-foreground opacity-70 transition-[top,height] duration-200 motion-reduce:transition-none', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "toc-indicator"
+    }));
 }
 const nonScalingStrokeProps = {
     'vector-effect': 'non-scaling-stroke'
@@ -173,7 +182,9 @@ function TocRail(props) {
             get style () {
                 return getRailStyle();
             }
-        }, others), true, true);
+        }, others, {
+            "data-slot": "toc-rail"
+        }), true, true);
         insert(_el$, (()=>{
             var _c$ = memo(()=>!!hasTurn());
             return ()=>_c$() && (()=>{

package/dist/components/toc/Toc.jsx

@@ -16,7 +16,7 @@ function TocRoot(props) {
         'autoScroll',
         'class'
     ]);
-    return <Toc.Root autoScroll={local.autoScroll ?? false} data-slot="toc-root" class={cn('group/toc box-border grid w-full min-w-0 grid-cols-[minmax(0,1fr)_minmax(12rem,16rem)] gap-6 text-foreground has-[[data-slot=toc-nav][data-placement=left]]:grid-cols-[minmax(12rem,16rem)_minmax(0,1fr)] max-md:grid-cols-[minmax(0,1fr)] max-md:has-[[data-slot=toc-nav][data-placement=left]]:grid-cols-[minmax(0,1fr)]', local.class)} {...others}/>;
+    return <Toc.Root autoScroll={local.autoScroll ?? false} class={cn('group/toc box-border grid w-full min-w-0 grid-cols-[minmax(0,1fr)_minmax(12rem,16rem)] gap-6 text-foreground has-[[data-slot=toc-nav][data-placement=left]]:grid-cols-[minmax(12rem,16rem)_minmax(0,1fr)] max-md:grid-cols-[minmax(0,1fr)] max-md:has-[[data-slot=toc-nav][data-placement=left]]:grid-cols-[minmax(0,1fr)]', local.class)} {...others} data-slot="toc-root"/>;
 }
 function TocRootProvider(props) {
     const [local, others] = splitProps(props, [
@@ -25,49 +25,49 @@ function TocRootProvider(props) {
         'value'
     ]);
     const getRootStyle = ()=>mergeStyles(local.value().getRootProps().style, local.style);
-    return <Toc.RootProvider value={local.value} data-slot="toc-root-provider" class={cn('group/toc box-border grid w-full min-w-0 grid-cols-[minmax(0,1fr)_minmax(12rem,16rem)] gap-6 text-foreground has-[[data-slot=toc-nav][data-placement=left]]:grid-cols-[minmax(12rem,16rem)_minmax(0,1fr)] max-md:grid-cols-[minmax(0,1fr)] max-md:has-[[data-slot=toc-nav][data-placement=left]]:grid-cols-[minmax(0,1fr)]', local.class)} style={getRootStyle()} {...others}/>;
+    return <Toc.RootProvider value={local.value} class={cn('group/toc box-border grid w-full min-w-0 grid-cols-[minmax(0,1fr)_minmax(12rem,16rem)] gap-6 text-foreground has-[[data-slot=toc-nav][data-placement=left]]:grid-cols-[minmax(12rem,16rem)_minmax(0,1fr)] max-md:grid-cols-[minmax(0,1fr)] max-md:has-[[data-slot=toc-nav][data-placement=left]]:grid-cols-[minmax(0,1fr)]', local.class)} style={getRootStyle()} {...others} data-slot="toc-root-provider"/>;
 }
 function TocContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Toc.Content data-slot="toc-content" class={cn('min-w-0 scroll-smooth group-has-[[data-slot=toc-nav][data-placement=left]]/toc:col-start-2 group-has-[[data-slot=toc-nav][data-placement=left]]/toc:row-start-1 motion-reduce:scroll-auto max-md:group-has-[[data-slot=toc-nav][data-placement=left]]/toc:col-auto max-md:group-has-[[data-slot=toc-nav][data-placement=left]]/toc:row-auto', local.class)} {...others}/>;
+    return <Toc.Content class={cn('min-w-0 scroll-smooth group-has-[[data-slot=toc-nav][data-placement=left]]/toc:col-start-2 group-has-[[data-slot=toc-nav][data-placement=left]]/toc:row-start-1 motion-reduce:scroll-auto max-md:group-has-[[data-slot=toc-nav][data-placement=left]]/toc:col-auto max-md:group-has-[[data-slot=toc-nav][data-placement=left]]/toc:row-auto', local.class)} {...others} data-slot="toc-content"/>;
 }
 function TocNav(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Toc.Nav data-slot="toc-nav" class={cn('sticky top-4 max-h-[calc(100dvh-2rem)] min-w-0 self-start overflow-auto rounded-lg border border-border bg-card p-4 text-card-foreground data-[placement=left]:col-start-1 data-[placement=left]:row-start-1 max-md:data-[placement=left]:col-auto max-md:data-[placement=left]:row-auto', local.class)} {...others}/>;
+    return <Toc.Nav class={cn('sticky top-4 max-h-[calc(100dvh-2rem)] min-w-0 self-start overflow-auto rounded-lg border border-border bg-card p-4 text-card-foreground data-[placement=left]:col-start-1 data-[placement=left]:row-start-1 max-md:data-[placement=left]:col-auto max-md:data-[placement=left]:row-auto', local.class)} {...others} data-slot="toc-nav"/>;
 }
 function TocTitle(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Toc.Title data-slot="toc-title" class={cn('m-0 mb-2 text-sm leading-5 font-semibold text-foreground', local.class)} {...others}/>;
+    return <Toc.Title class={cn('m-0 mb-2 text-sm leading-5 font-semibold text-foreground', local.class)} {...others} data-slot="toc-title"/>;
 }
 function TocList(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Toc.List data-slot="toc-list" class={cn("relative m-0 grid list-none gap-0.5 py-0 ps-1 has-[[data-slot=toc-indicator]]:before:pointer-events-none has-[[data-slot=toc-indicator]]:before:absolute has-[[data-slot=toc-indicator]]:before:inset-y-0.5 has-[[data-slot=toc-indicator]]:before:start-0 has-[[data-slot=toc-indicator]]:before:w-0.5 has-[[data-slot=toc-indicator]]:before:rounded-full has-[[data-slot=toc-indicator]]:before:bg-border has-[[data-slot=toc-indicator]]:before:content-['']", local.class)} {...others}/>;
+    return <Toc.List class={cn("relative m-0 grid list-none gap-0.5 py-0 ps-1 has-[[data-slot=toc-indicator]]:before:pointer-events-none has-[[data-slot=toc-indicator]]:before:absolute has-[[data-slot=toc-indicator]]:before:inset-y-0.5 has-[[data-slot=toc-indicator]]:before:start-0 has-[[data-slot=toc-indicator]]:before:w-0.5 has-[[data-slot=toc-indicator]]:before:rounded-full has-[[data-slot=toc-indicator]]:before:bg-border has-[[data-slot=toc-indicator]]:before:content-['']", local.class)} {...others} data-slot="toc-list"/>;
 }
 function TocItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Toc.Item data-slot="toc-item" class={cn('min-w-0', local.class)} {...others}/>;
+    return <Toc.Item class={cn('min-w-0', local.class)} {...others} data-slot="toc-item"/>;
 }
 function TocLink(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Toc.Link data-slot="toc-link" class={cn('group/toc-link relative block min-w-0 overflow-hidden rounded-sm py-1 ps-[calc(0.875rem+max(0px,((var(--depth)-2)*0.5rem)))] pe-1 text-sm leading-5 text-ellipsis whitespace-nowrap text-muted-foreground no-underline outline-0 transition-colors duration-200 ring-inset focus-visible:ring-1 focus-visible:ring-ring has-[[data-slot=toc-rail]]:overflow-visible data-active:font-medium data-active:text-foreground motion-reduce:transition-none [@media(hover:hover)]:hover:text-foreground', local.class)} {...others}/>;
+    return <Toc.Link class={cn('group/toc-link relative block min-w-0 overflow-hidden rounded-sm py-1 ps-[calc(0.875rem+max(0px,((var(--depth)-2)*0.5rem)))] pe-1 text-sm leading-5 text-ellipsis whitespace-nowrap text-muted-foreground no-underline outline-0 transition-colors duration-200 ring-inset focus-visible:ring-1 focus-visible:ring-ring has-[[data-slot=toc-rail]]:overflow-visible data-active:font-medium data-active:text-foreground motion-reduce:transition-none [@media(hover:hover)]:hover:text-foreground', local.class)} {...others} data-slot="toc-link"/>;
 }
 function TocIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Toc.Indicator data-slot="toc-indicator" class={cn('pointer-events-none start-0 top-[calc(var(--top)+0.125rem)] z-1 h-[calc(var(--height)-0.25rem)] w-0.5 rounded-full bg-muted-foreground opacity-70 transition-[top,height] duration-200 motion-reduce:transition-none', local.class)} {...others}/>;
+    return <Toc.Indicator class={cn('pointer-events-none start-0 top-[calc(var(--top)+0.125rem)] z-1 h-[calc(var(--height)-0.25rem)] w-0.5 rounded-full bg-muted-foreground opacity-70 transition-[top,height] duration-200 motion-reduce:transition-none', local.class)} {...others} data-slot="toc-indicator"/>;
 }
 const nonScalingStrokeProps = {
     'vector-effect': 'non-scaling-stroke'
@@ -108,7 +108,7 @@ function TocRail(props) {
             width: width(),
             height: height()
         }, local.style);
-    return <svg aria-hidden="true" data-slot="toc-rail" class={cn('pointer-events-none absolute start-0 -top-1.5 overflow-visible text-border group-data-active/toc-link:translate-y-0.5 group-data-active/toc-link:text-muted-foreground group-data-active/toc-link:opacity-70', local.class)} style={getRailStyle()} {...others}>
+    return <svg aria-hidden="true" class={cn('pointer-events-none absolute start-0 -top-1.5 overflow-visible text-border group-data-active/toc-link:translate-y-0.5 group-data-active/toc-link:text-muted-foreground group-data-active/toc-link:opacity-70', local.class)} style={getRailStyle()} {...others} data-slot="toc-rail">
       {hasTurn() && <path d={`M ${previousLineOffset() + 0.5} 0 C ${previousLineOffset() + 0.5} 8 ${lineOffset() + 0.5} 4 ${lineOffset() + 0.5} ${2 * railBridge}`} fill="none" {...nonScalingStrokeProps} stroke="currentColor" class="stroke-1"/>}
       <line x1={lineOffset() + 0.5} y1={hasTurn() ? 2 * railBridge : railBridge} x2={lineOffset() + 0.5} y2="100%" {...nonScalingStrokeProps} stroke="currentColor" class="stroke-1"/>
     </svg>;

package/dist/components/tooltip/Tooltip.js

@@ -78,11 +78,12 @@ function TooltipTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "tooltip-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-sm leading-5 text-foreground outline-0 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 active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-[state=open]:bg-accent motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tooltip-trigger"
+    }));
 }
 function TooltipDisabledTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -123,11 +124,12 @@ function TooltipPositioner(props) {
     return createComponent(OverlayPortal, {
         get children () {
             return createComponent(Tooltip.Positioner, mergeProps({
-                "data-slot": "tooltip-positioner",
                 get ["class"] () {
                     return cn('z-[var(--z-index)] max-h-[var(--available-height)] max-w-[var(--available-width)] outline-0', local.class);
                 }
-            }, others));
+            }, others, {
+                "data-slot": "tooltip-positioner"
+            }));
         }
     });
 }
@@ -136,11 +138,12 @@ function TooltipContent(props) {
         'class'
     ]);
     return createComponent(Tooltip.Content, mergeProps({
-        "data-slot": "tooltip-content",
         get ["class"] () {
             return cn('relative z-60 max-h-[min(24rem,var(--available-height,100dvh))] max-w-[min(20rem,var(--available-width))] origin-[var(--transform-origin)] overflow-visible rounded-md border border-border bg-popover px-2 py-1 text-center text-sm leading-5 wrap-anywhere text-popover-foreground shadow-md data-instant:animate-none data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tooltip-content"
+    }));
 }
 function TooltipBody(props) {
     return createComponent(TooltipPositioner, {
@@ -156,11 +159,11 @@ function TooltipArrow(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(Tooltip.Arrow, mergeProps({
-        "data-slot": "tooltip-arrow",
         get ["class"] () {
             return cn('[--arrow-background:var(--color-popover)] [--arrow-size:0.625rem]', local.class);
         }
     }, others, {
+        "data-slot": "tooltip-arrow",
         get children () {
             return resolvedChildren() ?? createComponent(TooltipArrowTip, {});
         }
@@ -171,11 +174,12 @@ function TooltipArrowTip(props) {
         'class'
     ]);
     return createComponent(Tooltip.ArrowTip, mergeProps({
-        "data-slot": "tooltip-arrow-tip",
         get ["class"] () {
             return cn('border-t border-l border-border', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tooltip-arrow-tip"
+    }));
 }
 const Tooltip_Tooltip = Object.assign(TooltipRoot, {
     Root: TooltipRoot,

package/dist/components/tooltip/Tooltip.jsx

@@ -38,7 +38,7 @@ function TooltipTrigger(props) {
         'asChild',
         'class'
     ]);
-    return <Tooltip.Trigger asChild={local.asChild} data-slot="tooltip-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-sm leading-5 text-foreground outline-0 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 active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-[state=open]:bg-accent motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class)} {...others}/>;
+    return <Tooltip.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-sm leading-5 text-foreground outline-0 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 active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-[state=open]:bg-accent motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class)} {...others} data-slot="tooltip-trigger"/>;
 }
 function TooltipDisabledTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -63,14 +63,14 @@ function TooltipPositioner(props) {
         'class'
     ]);
     return <OverlayPortal>
-      <Tooltip.Positioner data-slot="tooltip-positioner" class={cn('z-[var(--z-index)] max-h-[var(--available-height)] max-w-[var(--available-width)] outline-0', local.class)} {...others}/>
+      <Tooltip.Positioner class={cn('z-[var(--z-index)] max-h-[var(--available-height)] max-w-[var(--available-width)] outline-0', local.class)} {...others} data-slot="tooltip-positioner"/>
     </OverlayPortal>;
 }
 function TooltipContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Tooltip.Content data-slot="tooltip-content" class={cn('relative z-60 max-h-[min(24rem,var(--available-height,100dvh))] max-w-[min(20rem,var(--available-width))] origin-[var(--transform-origin)] overflow-visible rounded-md border border-border bg-popover px-2 py-1 text-center text-sm leading-5 wrap-anywhere text-popover-foreground shadow-md data-instant:animate-none data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none', local.class)} {...others}/>;
+    return <Tooltip.Content class={cn('relative z-60 max-h-[min(24rem,var(--available-height,100dvh))] max-w-[min(20rem,var(--available-width))] origin-[var(--transform-origin)] overflow-visible rounded-md border border-border bg-popover px-2 py-1 text-center text-sm leading-5 wrap-anywhere text-popover-foreground shadow-md data-instant:animate-none data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none', local.class)} {...others} data-slot="tooltip-content"/>;
 }
 function TooltipBody(props) {
     return <TooltipPositioner>
@@ -83,7 +83,7 @@ function TooltipArrow(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Tooltip.Arrow data-slot="tooltip-arrow" class={cn('[--arrow-background:var(--color-popover)] [--arrow-size:0.625rem]', local.class)} {...others}>
+    return <Tooltip.Arrow class={cn('[--arrow-background:var(--color-popover)] [--arrow-size:0.625rem]', local.class)} {...others} data-slot="tooltip-arrow">
       {resolvedChildren() ?? <TooltipArrowTip/>}
     </Tooltip.Arrow>;
 }
@@ -91,7 +91,7 @@ function TooltipArrowTip(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Tooltip.ArrowTip data-slot="tooltip-arrow-tip" class={cn('border-t border-l border-border', local.class)} {...others}/>;
+    return <Tooltip.ArrowTip class={cn('border-t border-l border-border', local.class)} {...others} data-slot="tooltip-arrow-tip"/>;
 }
 const Tooltip_Tooltip = Object.assign(TooltipRoot, {
     Root: TooltipRoot,