@moduix/solid-tailwind 1.0.0 → 1.1.1

package/dist/components/qr-code/QrCode.js

@@ -12,11 +12,11 @@ function QrCodeRoot(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "qr-code-root",
         get ["class"] () {
             return cn('relative box-border inline-flex w-32 max-w-full flex-col items-center gap-3 text-foreground', local.class);
         }
     }, others, {
+        "data-slot": "qr-code-root",
         get children () {
             return local.children;
         }
@@ -32,11 +32,11 @@ function QrCodeRootProvider(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "qr-code-root-provider",
         get ["class"] () {
             return cn('relative box-border inline-flex w-32 max-w-full flex-col items-center gap-3 text-foreground', local.class);
         }
     }, others, {
+        "data-slot": "qr-code-root-provider",
         get children () {
             return local.children;
         }
@@ -52,11 +52,11 @@ function QrCodeFrame(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "qr-code-frame",
         get ["class"] () {
             return cn('box-border aspect-square h-auto w-full fill-current text-inherit', local.class);
         }
     }, others, {
+        "data-slot": "qr-code-frame",
         get children () {
             return local.children;
         }
@@ -71,11 +71,12 @@ function QrCodePattern(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "qr-code-pattern",
         get ["class"] () {
             return cn('fill-inherit', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "qr-code-pattern"
+    }));
 }
 function QrCodeOverlay(props) {
     const [local, others] = splitProps(props, [
@@ -87,11 +88,11 @@ function QrCodeOverlay(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "qr-code-overlay",
         get ["class"] () {
             return cn('box-border inline-flex size-control-lg items-center justify-center rounded-sm bg-background p-1 text-foreground [&_img]:size-full [&_img]:object-contain [&_svg]:size-full [&_svg]:object-contain', local.class);
         }
     }, others, {
+        "data-slot": "qr-code-overlay",
         get children () {
             return local.children;
         }
@@ -107,11 +108,11 @@ function QrCodeDownloadTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "qr-code-download-trigger",
         get ["class"] () {
             return cn('box-border inline-flex min-h-control-md cursor-pointer appearance-none items-center justify-center gap-2 rounded-md border border-border bg-background px-4 text-sm leading-5 font-medium whitespace-nowrap text-foreground transition-[border-color,background-color,color,opacity,box-shadow,transform] duration-200 ease-in-out select-none focus-visible:outline-2 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 [&_svg]:size-4 [&_svg]:shrink-0 [&:active:not(:disabled):not([data-disabled])]:opacity-[0.94] motion-safe:[&:active:not(:disabled):not([data-disabled])]:translate-y-px motion-safe:[&:active:not(:disabled):not([data-disabled])]:scale-[0.985] [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-accent', local.class);
         }
     }, others, {
+        "data-slot": "qr-code-download-trigger",
         get children () {
             return local.children;
         }

package/dist/components/qr-code/QrCode.jsx

@@ -7,7 +7,7 @@ function QrCodeRoot(props) {
         'children',
         'class'
     ]);
-    return <QrCode.Root asChild={local.asChild} data-slot="qr-code-root" class={cn('relative box-border inline-flex w-32 max-w-full flex-col items-center gap-3 text-foreground', local.class)} {...others}>
+    return <QrCode.Root asChild={local.asChild} class={cn('relative box-border inline-flex w-32 max-w-full flex-col items-center gap-3 text-foreground', local.class)} {...others} data-slot="qr-code-root">
       {local.children}
     </QrCode.Root>;
 }
@@ -17,7 +17,7 @@ function QrCodeRootProvider(props) {
         'children',
         'class'
     ]);
-    return <QrCode.RootProvider asChild={local.asChild} data-slot="qr-code-root-provider" class={cn('relative box-border inline-flex w-32 max-w-full flex-col items-center gap-3 text-foreground', local.class)} {...others}>
+    return <QrCode.RootProvider asChild={local.asChild} class={cn('relative box-border inline-flex w-32 max-w-full flex-col items-center gap-3 text-foreground', local.class)} {...others} data-slot="qr-code-root-provider">
       {local.children}
     </QrCode.RootProvider>;
 }
@@ -27,7 +27,7 @@ function QrCodeFrame(props) {
         'children',
         'class'
     ]);
-    return <QrCode.Frame asChild={local.asChild} data-slot="qr-code-frame" class={cn('box-border aspect-square h-auto w-full fill-current text-inherit', local.class)} {...others}>
+    return <QrCode.Frame asChild={local.asChild} class={cn('box-border aspect-square h-auto w-full fill-current text-inherit', local.class)} {...others} data-slot="qr-code-frame">
       {local.children}
     </QrCode.Frame>;
 }
@@ -36,7 +36,7 @@ function QrCodePattern(props) {
         'asChild',
         'class'
     ]);
-    return <QrCode.Pattern asChild={local.asChild} data-slot="qr-code-pattern" class={cn('fill-inherit', local.class)} {...others}/>;
+    return <QrCode.Pattern asChild={local.asChild} class={cn('fill-inherit', local.class)} {...others} data-slot="qr-code-pattern"/>;
 }
 function QrCodeOverlay(props) {
     const [local, others] = splitProps(props, [
@@ -44,7 +44,7 @@ function QrCodeOverlay(props) {
         'children',
         'class'
     ]);
-    return <QrCode.Overlay asChild={local.asChild} data-slot="qr-code-overlay" class={cn('box-border inline-flex size-control-lg items-center justify-center rounded-sm bg-background p-1 text-foreground [&_img]:size-full [&_img]:object-contain [&_svg]:size-full [&_svg]:object-contain', local.class)} {...others}>
+    return <QrCode.Overlay asChild={local.asChild} class={cn('box-border inline-flex size-control-lg items-center justify-center rounded-sm bg-background p-1 text-foreground [&_img]:size-full [&_img]:object-contain [&_svg]:size-full [&_svg]:object-contain', local.class)} {...others} data-slot="qr-code-overlay">
       {local.children}
     </QrCode.Overlay>;
 }
@@ -54,7 +54,7 @@ function QrCodeDownloadTrigger(props) {
         'children',
         'class'
     ]);
-    return <QrCode.DownloadTrigger asChild={local.asChild} data-slot="qr-code-download-trigger" class={cn('box-border inline-flex min-h-control-md cursor-pointer appearance-none items-center justify-center gap-2 rounded-md border border-border bg-background px-4 text-sm leading-5 font-medium whitespace-nowrap text-foreground transition-[border-color,background-color,color,opacity,box-shadow,transform] duration-200 ease-in-out select-none focus-visible:outline-2 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 [&_svg]:size-4 [&_svg]:shrink-0 [&:active:not(:disabled):not([data-disabled])]:opacity-[0.94] motion-safe:[&:active:not(:disabled):not([data-disabled])]:translate-y-px motion-safe:[&:active:not(:disabled):not([data-disabled])]:scale-[0.985] [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-accent', local.class)} {...others}>
+    return <QrCode.DownloadTrigger asChild={local.asChild} class={cn('box-border inline-flex min-h-control-md cursor-pointer appearance-none items-center justify-center gap-2 rounded-md border border-border bg-background px-4 text-sm leading-5 font-medium whitespace-nowrap text-foreground transition-[border-color,background-color,color,opacity,box-shadow,transform] duration-200 ease-in-out select-none focus-visible:outline-2 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 [&_svg]:size-4 [&_svg]:shrink-0 [&:active:not(:disabled):not([data-disabled])]:opacity-[0.94] motion-safe:[&:active:not(:disabled):not([data-disabled])]:translate-y-px motion-safe:[&:active:not(:disabled):not([data-disabled])]:scale-[0.985] [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-accent', local.class)} {...others} data-slot="qr-code-download-trigger">
       {local.children}
     </QrCode.DownloadTrigger>;
 }

package/dist/components/rating-group/RatingGroup.js

@@ -3,7 +3,7 @@ import { RatingGroup, useRatingGroup, useRatingGroupContext, useRatingGroupItemC
 import { For, children, splitProps } from "solid-js";
 import { cn } from "../../internal/cn.js";
 import { RatingStarIcon } from "../../internal/icons/ui/Icons.js";
-var _tmpl$ = /*#__PURE__*/ template("<span data-slot=rating-group-item-indicator>");
+var _tmpl$ = /*#__PURE__*/ template("<span>");
 function RatingGroupRoot(props) {
     const [local, others] = splitProps(props, [
         'asChild',
@@ -15,7 +15,6 @@ function RatingGroupRoot(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "rating-group-root",
         get ["data-size"] () {
             return local.size ?? 'md';
         },
@@ -23,6 +22,7 @@ function RatingGroupRoot(props) {
             return cn('group/rating-group inline-flex flex-col gap-1 text-muted-foreground', local.class);
         }
     }, others, {
+        "data-slot": "rating-group-root",
         get children () {
             return local.children;
         }
@@ -39,7 +39,6 @@ function RatingGroupRootProvider(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "rating-group-root-provider",
         get ["data-size"] () {
             return local.size ?? 'md';
         },
@@ -47,6 +46,7 @@ function RatingGroupRootProvider(props) {
             return cn('group/rating-group inline-flex flex-col gap-1 text-muted-foreground', local.class);
         }
     }, others, {
+        "data-slot": "rating-group-root-provider",
         get children () {
             return local.children;
         }
@@ -57,33 +57,36 @@ function RatingGroupLabel(props) {
         'class'
     ]);
     return createComponent(RatingGroup.Label, mergeProps({
-        "data-slot": "rating-group-label",
         get ["class"] () {
             return cn('text-sm leading-5 font-semibold text-foreground select-none data-disabled:opacity-50', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "rating-group-label"
+    }));
 }
 function RatingGroupControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(RatingGroup.Control, mergeProps({
-        "data-slot": "rating-group-control",
         get ["class"] () {
             return cn('inline-flex items-center gap-1 data-disabled:opacity-50', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "rating-group-control"
+    }));
 }
 function RatingGroupItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(RatingGroup.Item, mergeProps({
-        "data-slot": "rating-group-item",
         get ["class"] () {
             return cn('inline-flex cursor-pointer items-center justify-center rounded-sm leading-none text-inherit outline-1 -outline-offset-1 outline-transparent transition-[color,opacity] duration-200 ease-in-out data-disabled:pointer-events-none data-disabled:cursor-default data-focus-visible:outline-1 data-focus-visible:outline-offset-1 data-focus-visible:outline-ring data-readonly:cursor-default', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "rating-group-item"
+    }));
 }
 function RatingGroupItemIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -104,7 +107,9 @@ function RatingGroupItemIndicator(props) {
             get ["class"] () {
                 return cn('relative inline-flex size-5 items-center justify-center text-primary group-data-[size=lg]/rating-group:size-6 group-data-[size=sm]/rating-group:size-4 group-data-[size=xl]/rating-group:size-7 group-data-[size=xs]/rating-group:size-3.5 [&>svg]:size-full [&>svg]:flex-none [&>svg]:transition-[color,fill,stroke,clip-path] [&>svg]:duration-200 [&>svg]:ease-in-out', local.class);
             }
-        }, others), false, true);
+        }, others, {
+            "data-slot": "rating-group-item-indicator"
+        }), false, true);
         insert(_el$, ()=>resolvedChildren() ?? [
                 createComponent(RatingStarIcon, {
                     "data-slot": "rating-group-item-indicator-bg",

package/dist/components/rating-group/RatingGroup.jsx

@@ -9,7 +9,7 @@ function RatingGroupRoot(props) {
         'class',
         'size'
     ]);
-    return <RatingGroup.Root asChild={local.asChild} data-slot="rating-group-root" data-size={local.size ?? 'md'} class={cn('group/rating-group inline-flex flex-col gap-1 text-muted-foreground', local.class)} {...others}>
+    return <RatingGroup.Root asChild={local.asChild} data-size={local.size ?? 'md'} class={cn('group/rating-group inline-flex flex-col gap-1 text-muted-foreground', local.class)} {...others} data-slot="rating-group-root">
       {local.children}
     </RatingGroup.Root>;
 }
@@ -20,7 +20,7 @@ function RatingGroupRootProvider(props) {
         'class',
         'size'
     ]);
-    return <RatingGroup.RootProvider asChild={local.asChild} data-slot="rating-group-root-provider" data-size={local.size ?? 'md'} class={cn('group/rating-group inline-flex flex-col gap-1 text-muted-foreground', local.class)} {...others}>
+    return <RatingGroup.RootProvider asChild={local.asChild} data-size={local.size ?? 'md'} class={cn('group/rating-group inline-flex flex-col gap-1 text-muted-foreground', local.class)} {...others} data-slot="rating-group-root-provider">
       {local.children}
     </RatingGroup.RootProvider>;
 }
@@ -28,19 +28,19 @@ function RatingGroupLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <RatingGroup.Label data-slot="rating-group-label" class={cn('text-sm leading-5 font-semibold text-foreground select-none data-disabled:opacity-50', local.class)} {...others}/>;
+    return <RatingGroup.Label class={cn('text-sm leading-5 font-semibold text-foreground select-none data-disabled:opacity-50', local.class)} {...others} data-slot="rating-group-label"/>;
 }
 function RatingGroupControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <RatingGroup.Control data-slot="rating-group-control" class={cn('inline-flex items-center gap-1 data-disabled:opacity-50', local.class)} {...others}/>;
+    return <RatingGroup.Control class={cn('inline-flex items-center gap-1 data-disabled:opacity-50', local.class)} {...others} data-slot="rating-group-control"/>;
 }
 function RatingGroupItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <RatingGroup.Item data-slot="rating-group-item" class={cn('inline-flex cursor-pointer items-center justify-center rounded-sm leading-none text-inherit outline-1 -outline-offset-1 outline-transparent transition-[color,opacity] duration-200 ease-in-out data-disabled:pointer-events-none data-disabled:cursor-default data-focus-visible:outline-1 data-focus-visible:outline-offset-1 data-focus-visible:outline-ring data-readonly:cursor-default', local.class)} {...others}/>;
+    return <RatingGroup.Item class={cn('inline-flex cursor-pointer items-center justify-center rounded-sm leading-none text-inherit outline-1 -outline-offset-1 outline-transparent transition-[color,opacity] duration-200 ease-in-out data-disabled:pointer-events-none data-disabled:cursor-default data-focus-visible:outline-1 data-focus-visible:outline-offset-1 data-focus-visible:outline-ring data-readonly:cursor-default', local.class)} {...others} data-slot="rating-group-item"/>;
 }
 function RatingGroupItemIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -49,7 +49,7 @@ function RatingGroupItemIndicator(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     const item = useRatingGroupItemContext();
-    return <span data-slot="rating-group-item-indicator" data-half={item().half ? '' : void 0} data-highlighted={item().highlighted ? '' : void 0} class={cn('relative inline-flex size-5 items-center justify-center text-primary group-data-[size=lg]/rating-group:size-6 group-data-[size=sm]/rating-group:size-4 group-data-[size=xl]/rating-group:size-7 group-data-[size=xs]/rating-group:size-3.5 [&>svg]:size-full [&>svg]:flex-none [&>svg]:transition-[color,fill,stroke,clip-path] [&>svg]:duration-200 [&>svg]:ease-in-out', local.class)} {...others}>
+    return <span data-half={item().half ? '' : void 0} data-highlighted={item().highlighted ? '' : void 0} class={cn('relative inline-flex size-5 items-center justify-center text-primary group-data-[size=lg]/rating-group:size-6 group-data-[size=sm]/rating-group:size-4 group-data-[size=xl]/rating-group:size-7 group-data-[size=xs]/rating-group:size-3.5 [&>svg]:size-full [&>svg]:flex-none [&>svg]:transition-[color,fill,stroke,clip-path] [&>svg]:duration-200 [&>svg]:ease-in-out', local.class)} {...others} data-slot="rating-group-item-indicator">
       {resolvedChildren() ?? <>
           <RatingStarIcon data-slot="rating-group-item-indicator-bg" class="absolute inset-0 size-full flex-none fill-transparent stroke-current text-muted-foreground"/>
           <RatingStarIcon data-slot="rating-group-item-indicator-fg" class={cn('absolute inset-0 size-full flex-none fill-current stroke-current text-primary [clip-path:inset(0_0_0_0)]', item().half && '[clip-path:inset(0_50%_0_0)] rtl:[clip-path:inset(0_0_0_50%)]', !item().highlighted && '[clip-path:inset(0_100%_0_0)]')}/>

package/dist/components/segment-group/SegmentGroup.js

@@ -58,11 +58,11 @@ function SegmentGroupRoot(props) {
             return local.asChild;
         },
         value: segmentGroup,
-        "data-slot": "segment-group-root",
         get ["class"] () {
             return cn('group/segment-group relative isolate box-border inline-flex max-w-full items-stretch gap-1 rounded-lg border border-border bg-muted p-1 text-foreground data-disabled:opacity-50 data-invalid:border-destructive data-[orientation=vertical]:flex-col', local.class);
         }
     }, others, {
+        "data-slot": "segment-group-root",
         get children () {
             return local.children;
         }
@@ -77,11 +77,12 @@ function SegmentGroupRootProvider(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "segment-group-root-provider",
         get ["class"] () {
             return cn('group/segment-group relative isolate box-border inline-flex max-w-full items-stretch gap-1 rounded-lg border border-border bg-muted p-1 text-foreground data-disabled:opacity-50 data-invalid:border-destructive data-[orientation=vertical]:flex-col', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "segment-group-root-provider"
+    }));
 }
 function SegmentGroupLabel(props) {
     const [local, others] = splitProps(props, [
@@ -92,11 +93,12 @@ function SegmentGroupLabel(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "segment-group-label",
         get ["class"] () {
             return cn('relative z-1 text-sm leading-5 font-semibold text-inherit select-none', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "segment-group-label"
+    }));
 }
 function SegmentGroupItem(props) {
     const [local, others] = splitProps(props, [
@@ -108,11 +110,11 @@ function SegmentGroupItem(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "segment-group-item",
         get ["class"] () {
             return cn('relative z-1 box-border inline-flex min-h-control-sm cursor-pointer items-center justify-center gap-2 rounded-md px-3.5 text-sm leading-5 font-medium whitespace-nowrap text-muted-foreground outline-0 transition-[color,opacity] duration-200 ease-in-out select-none group-data-disabled/segment-group:!opacity-100 data-disabled:cursor-default data-disabled:opacity-50 data-focus-visible:outline-1 data-focus-visible:-outline-offset-1 data-focus-visible:outline-ring data-invalid:data-focus-visible:outline-destructive data-readonly:cursor-default data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-[state=checked]:text-foreground [@media(hover:hover)]:[&:not([data-readonly]):not([data-disabled]):hover]:text-foreground', local.class);
         }
     }, others, {
+        "data-slot": "segment-group-item",
         get children () {
             return local.children;
         }
@@ -127,11 +129,12 @@ function SegmentGroupItemControl(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "segment-group-item-control",
         get ["class"] () {
             return cn('hidden', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "segment-group-item-control"
+    }));
 }
 function SegmentGroupItemText(props) {
     const [local, others] = splitProps(props, [
@@ -142,11 +145,12 @@ function SegmentGroupItemText(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "segment-group-item-text",
         get ["class"] () {
             return cn('relative z-1', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "segment-group-item-text"
+    }));
 }
 function SegmentGroupIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -157,11 +161,12 @@ function SegmentGroupIndicator(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "segment-group-indicator",
         get ["class"] () {
             return cn('pointer-events-none absolute top-[var(--top)] left-[var(--left)] z-0 h-[var(--height)] w-[var(--width)] rounded-md bg-background shadow-sm !duration-200 !ease-in-out', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "segment-group-indicator"
+    }));
 }
 function SegmentGroupItems(props) {
     return createComponent(For, {

package/dist/components/segment-group/SegmentGroup.jsx

@@ -52,7 +52,7 @@ function SegmentGroupRoot(props) {
             required: local.required,
             value: local.value
         }));
-    return <SegmentGroup.RootProvider asChild={local.asChild} value={segmentGroup} data-slot="segment-group-root" class={cn('group/segment-group relative isolate box-border inline-flex max-w-full items-stretch gap-1 rounded-lg border border-border bg-muted p-1 text-foreground data-disabled:opacity-50 data-invalid:border-destructive data-[orientation=vertical]:flex-col', local.class)} {...others}>
+    return <SegmentGroup.RootProvider asChild={local.asChild} value={segmentGroup} class={cn('group/segment-group relative isolate box-border inline-flex max-w-full items-stretch gap-1 rounded-lg border border-border bg-muted p-1 text-foreground data-disabled:opacity-50 data-invalid:border-destructive data-[orientation=vertical]:flex-col', local.class)} {...others} data-slot="segment-group-root">
       {local.children}
     </SegmentGroup.RootProvider>;
 }
@@ -61,14 +61,14 @@ function SegmentGroupRootProvider(props) {
         'asChild',
         'class'
     ]);
-    return <SegmentGroup.RootProvider asChild={local.asChild} data-slot="segment-group-root-provider" class={cn('group/segment-group relative isolate box-border inline-flex max-w-full items-stretch gap-1 rounded-lg border border-border bg-muted p-1 text-foreground data-disabled:opacity-50 data-invalid:border-destructive data-[orientation=vertical]:flex-col', local.class)} {...others}/>;
+    return <SegmentGroup.RootProvider asChild={local.asChild} class={cn('group/segment-group relative isolate box-border inline-flex max-w-full items-stretch gap-1 rounded-lg border border-border bg-muted p-1 text-foreground data-disabled:opacity-50 data-invalid:border-destructive data-[orientation=vertical]:flex-col', local.class)} {...others} data-slot="segment-group-root-provider"/>;
 }
 function SegmentGroupLabel(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <SegmentGroup.Label asChild={local.asChild} data-slot="segment-group-label" class={cn('relative z-1 text-sm leading-5 font-semibold text-inherit select-none', local.class)} {...others}/>;
+    return <SegmentGroup.Label asChild={local.asChild} class={cn('relative z-1 text-sm leading-5 font-semibold text-inherit select-none', local.class)} {...others} data-slot="segment-group-label"/>;
 }
 function SegmentGroupItem(props) {
     const [local, others] = splitProps(props, [
@@ -76,7 +76,7 @@ function SegmentGroupItem(props) {
         'children',
         'class'
     ]);
-    return <SegmentGroup.Item asChild={local.asChild} data-slot="segment-group-item" class={cn('relative z-1 box-border inline-flex min-h-control-sm cursor-pointer items-center justify-center gap-2 rounded-md px-3.5 text-sm leading-5 font-medium whitespace-nowrap text-muted-foreground outline-0 transition-[color,opacity] duration-200 ease-in-out select-none group-data-disabled/segment-group:!opacity-100 data-disabled:cursor-default data-disabled:opacity-50 data-focus-visible:outline-1 data-focus-visible:-outline-offset-1 data-focus-visible:outline-ring data-invalid:data-focus-visible:outline-destructive data-readonly:cursor-default data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-[state=checked]:text-foreground [@media(hover:hover)]:[&:not([data-readonly]):not([data-disabled]):hover]:text-foreground', local.class)} {...others}>
+    return <SegmentGroup.Item asChild={local.asChild} class={cn('relative z-1 box-border inline-flex min-h-control-sm cursor-pointer items-center justify-center gap-2 rounded-md px-3.5 text-sm leading-5 font-medium whitespace-nowrap text-muted-foreground outline-0 transition-[color,opacity] duration-200 ease-in-out select-none group-data-disabled/segment-group:!opacity-100 data-disabled:cursor-default data-disabled:opacity-50 data-focus-visible:outline-1 data-focus-visible:-outline-offset-1 data-focus-visible:outline-ring data-invalid:data-focus-visible:outline-destructive data-readonly:cursor-default data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-[state=checked]:text-foreground [@media(hover:hover)]:[&:not([data-readonly]):not([data-disabled]):hover]:text-foreground', local.class)} {...others} data-slot="segment-group-item">
       {local.children}
     </SegmentGroup.Item>;
 }
@@ -85,21 +85,21 @@ function SegmentGroupItemControl(props) {
         'asChild',
         'class'
     ]);
-    return <SegmentGroup.ItemControl asChild={local.asChild} data-slot="segment-group-item-control" class={cn('hidden', local.class)} {...others}/>;
+    return <SegmentGroup.ItemControl asChild={local.asChild} class={cn('hidden', local.class)} {...others} data-slot="segment-group-item-control"/>;
 }
 function SegmentGroupItemText(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <SegmentGroup.ItemText asChild={local.asChild} data-slot="segment-group-item-text" class={cn('relative z-1', local.class)} {...others}/>;
+    return <SegmentGroup.ItemText asChild={local.asChild} class={cn('relative z-1', local.class)} {...others} data-slot="segment-group-item-text"/>;
 }
 function SegmentGroupIndicator(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <SegmentGroup.Indicator asChild={local.asChild} data-slot="segment-group-indicator" class={cn('pointer-events-none absolute top-[var(--top)] left-[var(--left)] z-0 h-[var(--height)] w-[var(--width)] rounded-md bg-background shadow-sm !duration-200 !ease-in-out', local.class)} {...others}/>;
+    return <SegmentGroup.Indicator asChild={local.asChild} class={cn('pointer-events-none absolute top-[var(--top)] left-[var(--left)] z-0 h-[var(--height)] w-[var(--width)] rounded-md bg-background shadow-sm !duration-200 !ease-in-out', local.class)} {...others} data-slot="segment-group-indicator"/>;
 }
 function SegmentGroupItems(props) {
     return <For each={props.items}>