@moduix/solid 1.0.0 → 1.1.0

package/dist/components/button/Button_module.css

@@ -6,7 +6,6 @@
     gap: var(--moduix-button-content-gap, var(--moduix-spacing-2));
     border: var(--moduix-button-border-width, var(--moduix-border-width-sm)) solid transparent;
     border-radius: var(--moduix-button-radius, var(--moduix-radius-md));
-    color: var(--moduix-button-color, var(--moduix-color-foreground));
     appearance: none;
     font: inherit;
     font-size: var(--moduix-button-font-size, var(--moduix-text-sm));
@@ -22,13 +21,12 @@
       opacity var(--moduix-button-transition, var(--moduix-transition-default)),
       transform var(--moduix-button-transition, var(--moduix-transition-default));
     background-color: #0000;
-    outline: 0;
     margin: 0;
     text-decoration: none;
     display: inline-flex;
   }
 
-  .root-RR_712:focus[data-focus-visible] {
+  .root-RR_712:focus-visible {
     outline: var(--moduix-button-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
         solid var(--moduix-button-focus-ring-color, var(--moduix-color-ring));
     outline-offset: calc(var(--moduix-button-focus-ring-offset, var(--moduix-button-border-width, var(--moduix-border-width-sm))) *

package/dist/components/card/Card.js

@@ -38,13 +38,14 @@ function CardHeader(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-scope": "card",
-        "data-part": "header",
-        "data-slot": "card-header",
         get ["class"] () {
             return clsx(Card_module.header, local.class);
         }
-    }, others));
+    }, others, {
+        "data-scope": "card",
+        "data-part": "header",
+        "data-slot": "card-header"
+    }));
 }
 function CardBody(props) {
     const [local, others] = splitProps(props, [
@@ -55,13 +56,14 @@ function CardBody(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-scope": "card",
-        "data-part": "body",
-        "data-slot": "card-body",
         get ["class"] () {
             return clsx(Card_module.body, local.class);
         }
-    }, others));
+    }, others, {
+        "data-scope": "card",
+        "data-part": "body",
+        "data-slot": "card-body"
+    }));
 }
 function CardMedia(props) {
     const [local, others] = splitProps(props, [
@@ -72,13 +74,14 @@ function CardMedia(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-scope": "card",
-        "data-part": "media",
-        "data-slot": "card-media",
         get ["class"] () {
             return clsx(Card_module.media, local.class);
         }
-    }, others));
+    }, others, {
+        "data-scope": "card",
+        "data-part": "media",
+        "data-slot": "card-media"
+    }));
 }
 function CardBackground(props) {
     const [local, others] = splitProps(props, [
@@ -89,13 +92,14 @@ function CardBackground(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-scope": "card",
-        "data-part": "background",
-        "data-slot": "card-background",
         get ["class"] () {
             return clsx(Card_module.background, local.class);
         }
-    }, others));
+    }, others, {
+        "data-scope": "card",
+        "data-part": "background",
+        "data-slot": "card-background"
+    }));
 }
 function CardFooter(props) {
     const [local, others] = splitProps(props, [
@@ -106,13 +110,14 @@ function CardFooter(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-scope": "card",
-        "data-part": "footer",
-        "data-slot": "card-footer",
         get ["class"] () {
             return clsx(Card_module.footer, local.class);
         }
-    }, others));
+    }, others, {
+        "data-scope": "card",
+        "data-part": "footer",
+        "data-slot": "card-footer"
+    }));
 }
 function CardTitle(props) {
     const [local, others] = splitProps(props, [
@@ -123,13 +128,14 @@ function CardTitle(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-scope": "card",
-        "data-part": "title",
-        "data-slot": "card-title",
         get ["class"] () {
             return clsx(Card_module.title, local.class);
         }
-    }, others));
+    }, others, {
+        "data-scope": "card",
+        "data-part": "title",
+        "data-slot": "card-title"
+    }));
 }
 function CardDescription(props) {
     const [local, others] = splitProps(props, [
@@ -140,13 +146,14 @@ function CardDescription(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-scope": "card",
-        "data-part": "description",
-        "data-slot": "card-description",
         get ["class"] () {
             return clsx(Card_module.description, local.class);
         }
-    }, others));
+    }, others, {
+        "data-scope": "card",
+        "data-part": "description",
+        "data-slot": "card-description"
+    }));
 }
 function CardAction(props) {
     const [local, others] = splitProps(props, [
@@ -157,13 +164,14 @@ function CardAction(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-scope": "card",
-        "data-part": "action",
-        "data-slot": "card-action",
         get ["class"] () {
             return clsx(Card_module.action, local.class);
         }
-    }, others));
+    }, others, {
+        "data-scope": "card",
+        "data-part": "action",
+        "data-slot": "card-action"
+    }));
 }
 function CardLink(props) {
     const [local, others] = splitProps(props, [
@@ -174,13 +182,14 @@ function CardLink(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-scope": "card",
-        "data-part": "link",
-        "data-slot": "card-link",
         get ["class"] () {
             return clsx(Card_module.link, local.class);
         }
-    }, others));
+    }, others, {
+        "data-scope": "card",
+        "data-part": "link",
+        "data-slot": "card-link"
+    }));
 }
 const Card = Object.assign(CardRoot, {
     Root: CardRoot,

package/dist/components/card/Card.jsx

@@ -16,63 +16,63 @@ function CardHeader(props) {
         'asChild',
         'class'
     ]);
-    return <ark.div asChild={local.asChild} data-scope="card" data-part="header" data-slot="card-header" class={clsx(Card_module.header, local.class)} {...others}/>;
+    return <ark.div asChild={local.asChild} class={clsx(Card_module.header, local.class)} {...others} data-scope="card" data-part="header" data-slot="card-header"/>;
 }
 function CardBody(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <ark.div asChild={local.asChild} data-scope="card" data-part="body" data-slot="card-body" class={clsx(Card_module.body, local.class)} {...others}/>;
+    return <ark.div asChild={local.asChild} class={clsx(Card_module.body, local.class)} {...others} data-scope="card" data-part="body" data-slot="card-body"/>;
 }
 function CardMedia(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <ark.div asChild={local.asChild} data-scope="card" data-part="media" data-slot="card-media" class={clsx(Card_module.media, local.class)} {...others}/>;
+    return <ark.div asChild={local.asChild} class={clsx(Card_module.media, local.class)} {...others} data-scope="card" data-part="media" data-slot="card-media"/>;
 }
 function CardBackground(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <ark.div asChild={local.asChild} data-scope="card" data-part="background" data-slot="card-background" class={clsx(Card_module.background, local.class)} {...others}/>;
+    return <ark.div asChild={local.asChild} class={clsx(Card_module.background, local.class)} {...others} data-scope="card" data-part="background" data-slot="card-background"/>;
 }
 function CardFooter(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <ark.div asChild={local.asChild} data-scope="card" data-part="footer" data-slot="card-footer" class={clsx(Card_module.footer, local.class)} {...others}/>;
+    return <ark.div asChild={local.asChild} class={clsx(Card_module.footer, local.class)} {...others} data-scope="card" data-part="footer" data-slot="card-footer"/>;
 }
 function CardTitle(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <ark.h3 asChild={local.asChild} data-scope="card" data-part="title" data-slot="card-title" class={clsx(Card_module.title, local.class)} {...others}/>;
+    return <ark.h3 asChild={local.asChild} class={clsx(Card_module.title, local.class)} {...others} data-scope="card" data-part="title" data-slot="card-title"/>;
 }
 function CardDescription(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <ark.p asChild={local.asChild} data-scope="card" data-part="description" data-slot="card-description" class={clsx(Card_module.description, local.class)} {...others}/>;
+    return <ark.p asChild={local.asChild} class={clsx(Card_module.description, local.class)} {...others} data-scope="card" data-part="description" data-slot="card-description"/>;
 }
 function CardAction(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <ark.div asChild={local.asChild} data-scope="card" data-part="action" data-slot="card-action" class={clsx(Card_module.action, local.class)} {...others}/>;
+    return <ark.div asChild={local.asChild} class={clsx(Card_module.action, local.class)} {...others} data-scope="card" data-part="action" data-slot="card-action"/>;
 }
 function CardLink(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <ark.a asChild={local.asChild} data-scope="card" data-part="link" data-slot="card-link" class={clsx(Card_module.link, local.class)} {...others}/>;
+    return <ark.a asChild={local.asChild} class={clsx(Card_module.link, local.class)} {...others} data-scope="card" data-part="link" data-slot="card-link"/>;
 }
 const Card = Object.assign(CardRoot, {
     Root: CardRoot,

package/dist/components/card/Card_module.css

@@ -74,7 +74,7 @@
     z-index: 1;
   }
 
-  .root-aWX0Lo:has([data-scope="card"][data-part="link"]) :where(a, button, input, select, textarea, [role="button"], [role="checkbox"], [role="menuitem"], [role="switch"], [tabindex]:not([tabindex="-1"])):not([data-scope="card"][data-part="link"]) {
+  .root-aWX0Lo:has([data-scope="card"][data-part="link"]) :where(a, button, input, select, textarea, summary, audio[controls], video[controls], iframe, [contenteditable="true"], [role="button"], [role="checkbox"], [role="menuitem"], [role="switch"], [tabindex]:not([tabindex="-1"])):not([data-scope="card"][data-part="link"]) {
     z-index: 1;
     position: relative;
   }

package/dist/components/carousel/Carousel.d.ts

@@ -9,7 +9,7 @@ declare function CarouselPrevTrigger(props: ComponentProps<typeof CarouselPrimit
 declare function CarouselNextTrigger(props: ComponentProps<typeof CarouselPrimitive.NextTrigger>): import("solid-js").JSX.Element;
 declare function CarouselIndicatorGroup(props: ComponentProps<typeof CarouselPrimitive.IndicatorGroup>): import("solid-js").JSX.Element;
 declare function CarouselIndicator(props: ComponentProps<typeof CarouselPrimitive.Indicator>): import("solid-js").JSX.Element;
-type CarouselIndicatorsProps = ComponentProps<typeof CarouselPrimitive.IndicatorGroup> & {
+type CarouselIndicatorsProps = Omit<ComponentProps<typeof CarouselPrimitive.IndicatorGroup>, 'asChild' | 'children'> & {
     indicatorClassName?: string;
 };
 declare function CarouselIndicators(props: CarouselIndicatorsProps): import("solid-js").JSX.Element;

package/dist/components/carousel/Carousel.js

@@ -10,55 +10,60 @@ function CarouselRoot(props) {
         'class'
     ]);
     return createComponent(Carousel.Root, mergeProps({
-        "data-slot": "carousel-root",
         get ["class"] () {
             return clsx(Carousel_module.root, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "carousel-root"
+    }));
 }
 function CarouselRootProvider(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Carousel.RootProvider, mergeProps({
-        "data-slot": "carousel-root-provider",
         get ["class"] () {
             return clsx(Carousel_module.root, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "carousel-root-provider"
+    }));
 }
 function CarouselControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Carousel.Control, mergeProps({
-        "data-slot": "carousel-control",
         get ["class"] () {
             return clsx(Carousel_module.control, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "carousel-control"
+    }));
 }
 function CarouselItemGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Carousel.ItemGroup, mergeProps({
-        "data-slot": "carousel-item-group",
         get ["class"] () {
             return clsx(Carousel_module.itemGroup, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "carousel-item-group"
+    }));
 }
 function CarouselItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Carousel.Item, mergeProps({
-        "data-slot": "carousel-item",
         get ["class"] () {
             return clsx(Carousel_module.item, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "carousel-item"
+    }));
 }
 function CarouselPrevTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -71,11 +76,11 @@ function CarouselPrevTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "carousel-prev-trigger",
         get ["class"] () {
             return clsx(Carousel_module.prevTrigger, local.class);
         }
     }, others, {
+        "data-slot": "carousel-prev-trigger",
         get children () {
             return resolvedChildren() ?? (()=>{
                 var _el$ = _tmpl$();
@@ -97,11 +102,11 @@ function CarouselNextTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "carousel-next-trigger",
         get ["class"] () {
             return clsx(Carousel_module.nextTrigger, local.class);
         }
     }, others, {
+        "data-slot": "carousel-next-trigger",
         get children () {
             return resolvedChildren() ?? (()=>{
                 var _el$2 = _tmpl$();
@@ -117,27 +122,28 @@ function CarouselIndicatorGroup(props) {
         'class'
     ]);
     return createComponent(Carousel.IndicatorGroup, mergeProps({
-        "data-slot": "carousel-indicator-group",
         get ["class"] () {
             return clsx(Carousel_module.indicatorGroup, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "carousel-indicator-group"
+    }));
 }
 function CarouselIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Carousel.Indicator, mergeProps({
-        "data-slot": "carousel-indicator",
         get ["class"] () {
             return clsx(Carousel_module.indicator, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "carousel-indicator"
+    }));
 }
 function CarouselIndicators(props) {
     const [local, others] = splitProps(props, [
         'class',
-        'children',
         'indicatorClassName'
     ]);
     return createComponent(Carousel.Context, {
@@ -169,33 +175,36 @@ function CarouselAutoplayTrigger(props) {
         'class'
     ]);
     return createComponent(Carousel.AutoplayTrigger, mergeProps({
-        "data-slot": "carousel-autoplay-trigger",
         get ["class"] () {
             return clsx(Carousel_module.autoplayTrigger, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "carousel-autoplay-trigger"
+    }));
 }
 function CarouselAutoplayIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Carousel.AutoplayIndicator, mergeProps({
-        "data-slot": "carousel-autoplay-indicator",
         get ["class"] () {
             return clsx(Carousel_module.autoplayIndicator, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "carousel-autoplay-indicator"
+    }));
 }
 function CarouselProgressText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Carousel.ProgressText, mergeProps({
-        "data-slot": "carousel-progress-text",
         get ["class"] () {
             return clsx(Carousel_module.progressText, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "carousel-progress-text"
+    }));
 }
 const Carousel_Carousel = Object.assign(CarouselRoot, {
     Root: CarouselRoot,

package/dist/components/carousel/Carousel.jsx

@@ -7,31 +7,31 @@ function CarouselRoot(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Carousel.Root data-slot="carousel-root" class={clsx(Carousel_module.root, local.class)} {...others}/>;
+    return <Carousel.Root class={clsx(Carousel_module.root, local.class)} {...others} data-slot="carousel-root"/>;
 }
 function CarouselRootProvider(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Carousel.RootProvider data-slot="carousel-root-provider" class={clsx(Carousel_module.root, local.class)} {...others}/>;
+    return <Carousel.RootProvider class={clsx(Carousel_module.root, local.class)} {...others} data-slot="carousel-root-provider"/>;
 }
 function CarouselControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Carousel.Control data-slot="carousel-control" class={clsx(Carousel_module.control, local.class)} {...others}/>;
+    return <Carousel.Control class={clsx(Carousel_module.control, local.class)} {...others} data-slot="carousel-control"/>;
 }
 function CarouselItemGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Carousel.ItemGroup data-slot="carousel-item-group" class={clsx(Carousel_module.itemGroup, local.class)} {...others}/>;
+    return <Carousel.ItemGroup class={clsx(Carousel_module.itemGroup, local.class)} {...others} data-slot="carousel-item-group"/>;
 }
 function CarouselItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Carousel.Item data-slot="carousel-item" class={clsx(Carousel_module.item, local.class)} {...others}/>;
+    return <Carousel.Item class={clsx(Carousel_module.item, local.class)} {...others} data-slot="carousel-item"/>;
 }
 function CarouselPrevTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -40,7 +40,7 @@ function CarouselPrevTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Carousel.PrevTrigger asChild={local.asChild} data-slot="carousel-prev-trigger" class={clsx(Carousel_module.prevTrigger, local.class)} {...others}>
+    return <Carousel.PrevTrigger asChild={local.asChild} class={clsx(Carousel_module.prevTrigger, local.class)} {...others} data-slot="carousel-prev-trigger">
       {resolvedChildren() ?? <span class={Carousel_module.defaultIcon}>
           <ChevronLeftIcon/>
         </span>}
@@ -53,7 +53,7 @@ function CarouselNextTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Carousel.NextTrigger asChild={local.asChild} data-slot="carousel-next-trigger" class={clsx(Carousel_module.nextTrigger, local.class)} {...others}>
+    return <Carousel.NextTrigger asChild={local.asChild} class={clsx(Carousel_module.nextTrigger, local.class)} {...others} data-slot="carousel-next-trigger">
       {resolvedChildren() ?? <span class={Carousel_module.defaultIcon}>
           <ChevronRightIcon/>
         </span>}
@@ -63,18 +63,17 @@ function CarouselIndicatorGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Carousel.IndicatorGroup data-slot="carousel-indicator-group" class={clsx(Carousel_module.indicatorGroup, local.class)} {...others}/>;
+    return <Carousel.IndicatorGroup class={clsx(Carousel_module.indicatorGroup, local.class)} {...others} data-slot="carousel-indicator-group"/>;
 }
 function CarouselIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Carousel.Indicator data-slot="carousel-indicator" class={clsx(Carousel_module.indicator, local.class)} {...others}/>;
+    return <Carousel.Indicator class={clsx(Carousel_module.indicator, local.class)} {...others} data-slot="carousel-indicator"/>;
 }
 function CarouselIndicators(props) {
     const [local, others] = splitProps(props, [
         'class',
-        'children',
         'indicatorClassName'
     ]);
     return <Carousel.Context>
@@ -89,19 +88,19 @@ function CarouselAutoplayTrigger(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Carousel.AutoplayTrigger data-slot="carousel-autoplay-trigger" class={clsx(Carousel_module.autoplayTrigger, local.class)} {...others}/>;
+    return <Carousel.AutoplayTrigger class={clsx(Carousel_module.autoplayTrigger, local.class)} {...others} data-slot="carousel-autoplay-trigger"/>;
 }
 function CarouselAutoplayIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Carousel.AutoplayIndicator data-slot="carousel-autoplay-indicator" class={clsx(Carousel_module.autoplayIndicator, local.class)} {...others}/>;
+    return <Carousel.AutoplayIndicator class={clsx(Carousel_module.autoplayIndicator, local.class)} {...others} data-slot="carousel-autoplay-indicator"/>;
 }
 function CarouselProgressText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Carousel.ProgressText data-slot="carousel-progress-text" class={clsx(Carousel_module.progressText, local.class)} {...others}/>;
+    return <Carousel.ProgressText class={clsx(Carousel_module.progressText, local.class)} {...others} data-slot="carousel-progress-text"/>;
 }
 const Carousel_Carousel = Object.assign(CarouselRoot, {
     Root: CarouselRoot,

package/dist/components/checkbox/Checkbox.js

@@ -16,14 +16,14 @@ function CheckboxRoot(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "checkbox-root",
-        get ["data-size"] () {
-            return local.size ?? 'md';
-        },
         get ["class"] () {
             return clsx(Checkbox_module.root, local.class);
         }
     }, others, {
+        get ["data-size"] () {
+            return local.size ?? 'md';
+        },
+        "data-slot": "checkbox-root",
         get children () {
             return local.children;
         }
@@ -40,14 +40,14 @@ function CheckboxRootProvider(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "checkbox-root-provider",
-        get ["data-size"] () {
-            return local.size ?? 'md';
-        },
         get ["class"] () {
             return clsx(Checkbox_module.root, local.class);
         }
     }, others, {
+        get ["data-size"] () {
+            return local.size ?? 'md';
+        },
+        "data-slot": "checkbox-root-provider",
         get children () {
             return local.children;
         }
@@ -62,7 +62,6 @@ function CheckboxIndicator(props) {
     const resolvedChildren = children(()=>local.children);
     const slot = ()=>local.indeterminate ? 'checkbox-indicator-indeterminate-icon' : 'checkbox-indicator-checked-icon';
     return createComponent(Checkbox.Indicator, mergeProps({
-        "data-slot": "checkbox-indicator",
         get ["class"] () {
             return clsx(Checkbox_module.indicator, local.class);
         },
@@ -70,6 +69,7 @@ function CheckboxIndicator(props) {
             return local.indeterminate;
         }
     }, others, {
+        "data-slot": "checkbox-indicator",
         get children () {
             return resolvedChildren() ?? (()=>{
                 var _el$ = _tmpl$();
@@ -98,11 +98,11 @@ function CheckboxControl(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(Checkbox.Control, mergeProps({
-        "data-slot": "checkbox-control",
         get ["class"] () {
             return clsx(Checkbox_module.control, local.class);
         }
     }, others, {
+        "data-slot": "checkbox-control",
         get children () {
             return resolvedChildren() ?? [
                 createComponent(CheckboxIndicator, {}),
@@ -118,22 +118,24 @@ function CheckboxLabel(props) {
         'class'
     ]);
     return createComponent(Checkbox.Label, mergeProps({
-        "data-slot": "checkbox-label",
         get ["class"] () {
             return clsx(Checkbox_module.label, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "checkbox-label"
+    }));
 }
 function CheckboxGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Checkbox.Group, mergeProps({
-        "data-slot": "checkbox-group",
         get ["class"] () {
             return clsx(Checkbox_module.group, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "checkbox-group"
+    }));
 }
 const Checkbox_Checkbox = Object.assign(CheckboxRoot, {
     Root: CheckboxRoot,