@moduix/solid 1.0.0 → 1.1.0

package/dist/components/color-picker/ColorPicker.js

@@ -5,7 +5,7 @@ import { children, splitProps } from "solid-js";
 import { CheckIcon, ChevronDownIcon, PipetteIcon } from "../../internal/icons/ui/Icons.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
 import ColorPicker_module from "./ColorPicker.module.js";
-var _tmpl$ = /*#__PURE__*/ template("<div data-slot=color-picker-sliders>"), _tmpl$2 = /*#__PURE__*/ template("<span><span aria-hidden=true>");
+var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<span><span aria-hidden=true>");
 function ColorPickerRoot(props) {
     const [local, others] = splitProps(props, [
         'asChild',
@@ -28,7 +28,6 @@ function ColorPickerRoot(props) {
                 get asChild () {
                     return local.asChild;
                 },
-                "data-slot": "color-picker-root",
                 get ["class"] () {
                     return clsx(ColorPicker_module.root, local.class);
                 },
@@ -39,6 +38,7 @@ function ColorPickerRoot(props) {
                     return local.unmountOnExit ?? true;
                 }
             }, others, {
+                "data-slot": "color-picker-root",
                 get children () {
                     return local.children;
                 }
@@ -68,7 +68,6 @@ function ColorPickerRootProvider(props) {
                 get asChild () {
                     return local.asChild;
                 },
-                "data-slot": "color-picker-root-provider",
                 get ["class"] () {
                     return clsx(ColorPicker_module.root, local.class);
                 },
@@ -79,6 +78,7 @@ function ColorPickerRootProvider(props) {
                     return local.unmountOnExit ?? true;
                 }
             }, others, {
+                "data-slot": "color-picker-root-provider",
                 get children () {
                     return local.children;
                 }
@@ -91,22 +91,24 @@ function ColorPickerLabel(props) {
         'class'
     ]);
     return createComponent(ColorPicker.Label, mergeProps({
-        "data-slot": "color-picker-label",
         get ["class"] () {
             return clsx(ColorPicker_module.label, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "color-picker-label"
+    }));
 }
 function ColorPickerControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ColorPicker.Control, mergeProps({
-        "data-slot": "color-picker-control",
         get ["class"] () {
             return clsx(ColorPicker_module.control, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "color-picker-control"
+    }));
 }
 function ColorPickerTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -115,11 +117,11 @@ function ColorPickerTrigger(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(ColorPicker.Trigger, mergeProps({
-        "data-slot": "color-picker-trigger",
         get ["class"] () {
             return clsx(ColorPicker_module.trigger, local.class);
         }
     }, others, {
+        "data-slot": "color-picker-trigger",
         get children () {
             return resolvedChildren() ?? [
                 createComponent(ColorPicker.TransparencyGrid, {
@@ -145,11 +147,12 @@ function ColorPickerPositioner(props) {
     return createComponent(OverlayPortal, {
         get children () {
             return createComponent(ColorPicker.Positioner, mergeProps({
-                "data-slot": "color-picker-positioner",
                 get ["class"] () {
                     return clsx(ColorPicker_module.positioner, local.class);
                 }
-            }, others));
+            }, others, {
+                "data-slot": "color-picker-positioner"
+            }));
         }
     });
 }
@@ -158,11 +161,12 @@ function ColorPickerContent(props) {
         'class'
     ]);
     return createComponent(ColorPicker.Content, mergeProps({
-        "data-slot": "color-picker-content",
         get ["class"] () {
             return clsx(ColorPicker_module.content, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "color-picker-content"
+    }));
 }
 function ColorPickerArea(props) {
     const [local, others] = splitProps(props, [
@@ -171,11 +175,11 @@ function ColorPickerArea(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(ColorPicker.Area, mergeProps({
-        "data-slot": "color-picker-area",
         get ["class"] () {
             return clsx(ColorPicker_module.area, local.class);
         }
     }, others, {
+        "data-slot": "color-picker-area",
         get children () {
             return resolvedChildren() ?? [
                 createComponent(ColorPicker.AreaBackground, {
@@ -199,22 +203,24 @@ function ColorPickerAreaBackground(props) {
         'class'
     ]);
     return createComponent(ColorPicker.AreaBackground, mergeProps({
-        "data-slot": "color-picker-area-background",
         get ["class"] () {
             return clsx(ColorPicker_module.areaBackground, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "color-picker-area-background"
+    }));
 }
 function ColorPickerAreaThumb(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ColorPicker.AreaThumb, mergeProps({
-        "data-slot": "color-picker-area-thumb",
         get ["class"] () {
             return clsx(ColorPicker_module.thumb, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "color-picker-area-thumb"
+    }));
 }
 function ColorPickerChannelSlider(props) {
     const [local, others] = splitProps(props, [
@@ -227,11 +233,11 @@ function ColorPickerChannelSlider(props) {
         get channel () {
             return local.channel;
         },
-        "data-slot": "color-picker-channel-slider",
         get ["class"] () {
             return clsx(ColorPicker_module.channelSlider, local.class);
         }
     }, others, {
+        "data-slot": "color-picker-channel-slider",
         get children () {
             return resolvedChildren() ?? [
                 memo(()=>memo(()=>'alpha' === local.channel)() && createComponent(ColorPicker.TransparencyGrid, {
@@ -266,7 +272,9 @@ function ColorPickerSliders(props) {
             get ["class"] () {
                 return clsx(ColorPicker_module.sliders, local.class);
             }
-        }, others), false, true);
+        }, others, {
+            "data-slot": "color-picker-sliders"
+        }), false, true);
         insert(_el$, createComponent(ColorPickerChannelSlider, {
             channel: "hue"
         }), null);
@@ -281,55 +289,60 @@ function ColorPickerChannelSliderTrack(props) {
         'class'
     ]);
     return createComponent(ColorPicker.ChannelSliderTrack, mergeProps({
-        "data-slot": "color-picker-channel-slider-track",
         get ["class"] () {
             return clsx(ColorPicker_module.channelSliderTrack, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "color-picker-channel-slider-track"
+    }));
 }
 function ColorPickerChannelSliderThumb(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ColorPicker.ChannelSliderThumb, mergeProps({
-        "data-slot": "color-picker-channel-slider-thumb",
         get ["class"] () {
             return clsx(ColorPicker_module.thumb, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "color-picker-channel-slider-thumb"
+    }));
 }
 function ColorPickerChannelSliderLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ColorPicker.ChannelSliderLabel, mergeProps({
-        "data-slot": "color-picker-channel-slider-label",
         get ["class"] () {
             return clsx(ColorPicker_module.channelSliderLabel, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "color-picker-channel-slider-label"
+    }));
 }
 function ColorPickerChannelSliderValueText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ColorPicker.ChannelSliderValueText, mergeProps({
-        "data-slot": "color-picker-channel-slider-value-text",
         get ["class"] () {
             return clsx(ColorPicker_module.channelSliderValueText, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "color-picker-channel-slider-value-text"
+    }));
 }
 function ColorPickerChannelInput(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ColorPicker.ChannelInput, mergeProps({
-        "data-slot": "color-picker-channel-input",
         get ["class"] () {
             return clsx(ColorPicker_module.channelInput, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "color-picker-channel-input"
+    }));
 }
 function ColorPickerEyeDropperTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -338,11 +351,11 @@ function ColorPickerEyeDropperTrigger(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(ColorPicker.EyeDropperTrigger, mergeProps({
-        "data-slot": "color-picker-eye-dropper-trigger",
         get ["class"] () {
             return clsx(ColorPicker_module.eyeDropperTrigger, local.class);
         }
     }, others, {
+        "data-slot": "color-picker-eye-dropper-trigger",
         get children () {
             return resolvedChildren() ?? createComponent(PipetteIcon, {});
         }
@@ -355,11 +368,12 @@ function ColorPickerFormatSelect(props) {
     return (()=>{
         var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild;
         insert(_el$2, createComponent(ColorPicker.FormatSelect, mergeProps({
-            "data-slot": "color-picker-format-select",
             get ["class"] () {
                 return clsx(ColorPicker_module.formatSelect, local.class);
             }
-        }, others)), _el$3);
+        }, others, {
+            "data-slot": "color-picker-format-select"
+        })), _el$3);
         insert(_el$3, createComponent(ChevronDownIcon, {}));
         effect((_p$)=>{
             var _v$ = ColorPicker_module.formatSelectControl, _v$2 = ColorPicker_module.formatSelectIndicator;
@@ -378,22 +392,24 @@ function ColorPickerFormatTrigger(props) {
         'class'
     ]);
     return createComponent(ColorPicker.FormatTrigger, mergeProps({
-        "data-slot": "color-picker-format-trigger",
         get ["class"] () {
             return clsx(ColorPicker_module.formatTrigger, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "color-picker-format-trigger"
+    }));
 }
 function ColorPickerSwatchGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ColorPicker.SwatchGroup, mergeProps({
-        "data-slot": "color-picker-swatch-group",
         get ["class"] () {
             return clsx(ColorPicker_module.swatchGroup, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "color-picker-swatch-group"
+    }));
 }
 function ColorPickerSwatchTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -403,7 +419,6 @@ function ColorPickerSwatchTrigger(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(ColorPicker.SwatchTrigger, mergeProps({
-        "data-slot": "color-picker-swatch-trigger",
         get ["class"] () {
             return clsx(ColorPicker_module.swatchTrigger, local.class);
         },
@@ -411,6 +426,7 @@ function ColorPickerSwatchTrigger(props) {
             return local.value;
         }
     }, others, {
+        "data-slot": "color-picker-swatch-trigger",
         get children () {
             return resolvedChildren() ?? createComponent(ColorPicker.Swatch, {
                 "data-slot": "color-picker-swatch",
@@ -440,11 +456,12 @@ function ColorPickerSwatch(props) {
         'class'
     ]);
     return createComponent(ColorPicker.Swatch, mergeProps({
-        "data-slot": "color-picker-swatch",
         get ["class"] () {
             return clsx(ColorPicker_module.swatch, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "color-picker-swatch"
+    }));
 }
 function ColorPickerSwatchIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -453,11 +470,11 @@ function ColorPickerSwatchIndicator(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(ColorPicker.SwatchIndicator, mergeProps({
-        "data-slot": "color-picker-swatch-indicator",
         get ["class"] () {
             return clsx(ColorPicker_module.swatchIndicator, local.class);
         }
     }, others, {
+        "data-slot": "color-picker-swatch-indicator",
         get children () {
             return resolvedChildren() ?? createComponent(CheckIcon, {});
         }
@@ -468,44 +485,48 @@ function ColorPickerTransparencyGrid(props) {
         'class'
     ]);
     return createComponent(ColorPicker.TransparencyGrid, mergeProps({
-        "data-slot": "color-picker-transparency-grid",
         get ["class"] () {
             return clsx(ColorPicker_module.transparencyGrid, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "color-picker-transparency-grid"
+    }));
 }
 function ColorPickerValueSwatch(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ColorPicker.ValueSwatch, mergeProps({
-        "data-slot": "color-picker-value-swatch",
         get ["class"] () {
             return clsx(ColorPicker_module.valueSwatch, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "color-picker-value-swatch"
+    }));
 }
 function ColorPickerValueText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ColorPicker.ValueText, mergeProps({
-        "data-slot": "color-picker-value-text",
         get ["class"] () {
             return clsx(ColorPicker_module.valueText, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "color-picker-value-text"
+    }));
 }
 function ColorPickerView(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ColorPicker.View, mergeProps({
-        "data-slot": "color-picker-view",
         get ["class"] () {
             return clsx(ColorPicker_module.view, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "color-picker-view"
+    }));
 }
 const ColorPicker_ColorPicker = Object.assign(ColorPickerRoot, {
     Root: ColorPickerRoot,

package/dist/components/color-picker/ColorPicker.jsx

@@ -15,7 +15,7 @@ function ColorPickerRoot(props) {
         'unmountOnExit'
     ]);
     return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
-      <ColorPicker.Root asChild={local.asChild} data-slot="color-picker-root" class={clsx(ColorPicker_module.root, local.class)} lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+      <ColorPicker.Root asChild={local.asChild} class={clsx(ColorPicker_module.root, local.class)} lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others} data-slot="color-picker-root">
         {local.children}
       </ColorPicker.Root>
     </OverlayPortalProvider>;
@@ -31,7 +31,7 @@ function ColorPickerRootProvider(props) {
         'unmountOnExit'
     ]);
     return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
-      <ColorPicker.RootProvider asChild={local.asChild} data-slot="color-picker-root-provider" class={clsx(ColorPicker_module.root, local.class)} lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+      <ColorPicker.RootProvider asChild={local.asChild} class={clsx(ColorPicker_module.root, local.class)} lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others} data-slot="color-picker-root-provider">
         {local.children}
       </ColorPicker.RootProvider>
     </OverlayPortalProvider>;
@@ -40,13 +40,13 @@ function ColorPickerLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ColorPicker.Label data-slot="color-picker-label" class={clsx(ColorPicker_module.label, local.class)} {...others}/>;
+    return <ColorPicker.Label class={clsx(ColorPicker_module.label, local.class)} {...others} data-slot="color-picker-label"/>;
 }
 function ColorPickerControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ColorPicker.Control data-slot="color-picker-control" class={clsx(ColorPicker_module.control, local.class)} {...others}/>;
+    return <ColorPicker.Control class={clsx(ColorPicker_module.control, local.class)} {...others} data-slot="color-picker-control"/>;
 }
 function ColorPickerTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -54,7 +54,7 @@ function ColorPickerTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <ColorPicker.Trigger data-slot="color-picker-trigger" class={clsx(ColorPicker_module.trigger, local.class)} {...others}>
+    return <ColorPicker.Trigger class={clsx(ColorPicker_module.trigger, local.class)} {...others} data-slot="color-picker-trigger">
       {resolvedChildren() ?? <>
           <ColorPicker.TransparencyGrid data-slot="color-picker-transparency-grid" class={ColorPicker_module.transparencyGrid}/>
           <ColorPicker.ValueSwatch data-slot="color-picker-value-swatch" class={ColorPicker_module.valueSwatch}/>
@@ -66,14 +66,14 @@ function ColorPickerPositioner(props) {
         'class'
     ]);
     return <OverlayPortal>
-      <ColorPicker.Positioner data-slot="color-picker-positioner" class={clsx(ColorPicker_module.positioner, local.class)} {...others}/>
+      <ColorPicker.Positioner class={clsx(ColorPicker_module.positioner, local.class)} {...others} data-slot="color-picker-positioner"/>
     </OverlayPortal>;
 }
 function ColorPickerContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ColorPicker.Content data-slot="color-picker-content" class={clsx(ColorPicker_module.content, local.class)} {...others}/>;
+    return <ColorPicker.Content class={clsx(ColorPicker_module.content, local.class)} {...others} data-slot="color-picker-content"/>;
 }
 function ColorPickerArea(props) {
     const [local, others] = splitProps(props, [
@@ -81,7 +81,7 @@ function ColorPickerArea(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <ColorPicker.Area data-slot="color-picker-area" class={clsx(ColorPicker_module.area, local.class)} {...others}>
+    return <ColorPicker.Area class={clsx(ColorPicker_module.area, local.class)} {...others} data-slot="color-picker-area">
       {resolvedChildren() ?? <>
           <ColorPicker.AreaBackground data-slot="color-picker-area-background" class={ColorPicker_module.areaBackground}/>
           <ColorPicker.AreaThumb data-slot="color-picker-area-thumb" class={ColorPicker_module.thumb}/>
@@ -92,13 +92,13 @@ function ColorPickerAreaBackground(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ColorPicker.AreaBackground data-slot="color-picker-area-background" class={clsx(ColorPicker_module.areaBackground, local.class)} {...others}/>;
+    return <ColorPicker.AreaBackground class={clsx(ColorPicker_module.areaBackground, local.class)} {...others} data-slot="color-picker-area-background"/>;
 }
 function ColorPickerAreaThumb(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ColorPicker.AreaThumb data-slot="color-picker-area-thumb" class={clsx(ColorPicker_module.thumb, local.class)} {...others}/>;
+    return <ColorPicker.AreaThumb class={clsx(ColorPicker_module.thumb, local.class)} {...others} data-slot="color-picker-area-thumb"/>;
 }
 function ColorPickerChannelSlider(props) {
     const [local, others] = splitProps(props, [
@@ -107,7 +107,7 @@ function ColorPickerChannelSlider(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <ColorPicker.ChannelSlider channel={local.channel} data-slot="color-picker-channel-slider" class={clsx(ColorPicker_module.channelSlider, local.class)} {...others}>
+    return <ColorPicker.ChannelSlider channel={local.channel} class={clsx(ColorPicker_module.channelSlider, local.class)} {...others} data-slot="color-picker-channel-slider">
       {resolvedChildren() ?? <>
           {'alpha' === local.channel && <ColorPicker.TransparencyGrid data-slot="color-picker-transparency-grid" class={ColorPicker_module.transparencyGrid}/>}
           <ColorPicker.ChannelSliderTrack data-slot="color-picker-channel-slider-track" class={ColorPicker_module.channelSliderTrack}/>
@@ -119,7 +119,7 @@ function ColorPickerSliders(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <div data-slot="color-picker-sliders" class={clsx(ColorPicker_module.sliders, local.class)} {...others}>
+    return <div class={clsx(ColorPicker_module.sliders, local.class)} {...others} data-slot="color-picker-sliders">
       <ColorPickerChannelSlider channel="hue"/>
       <ColorPickerChannelSlider channel="alpha"/>
     </div>;
@@ -128,31 +128,31 @@ function ColorPickerChannelSliderTrack(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ColorPicker.ChannelSliderTrack data-slot="color-picker-channel-slider-track" class={clsx(ColorPicker_module.channelSliderTrack, local.class)} {...others}/>;
+    return <ColorPicker.ChannelSliderTrack class={clsx(ColorPicker_module.channelSliderTrack, local.class)} {...others} data-slot="color-picker-channel-slider-track"/>;
 }
 function ColorPickerChannelSliderThumb(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ColorPicker.ChannelSliderThumb data-slot="color-picker-channel-slider-thumb" class={clsx(ColorPicker_module.thumb, local.class)} {...others}/>;
+    return <ColorPicker.ChannelSliderThumb class={clsx(ColorPicker_module.thumb, local.class)} {...others} data-slot="color-picker-channel-slider-thumb"/>;
 }
 function ColorPickerChannelSliderLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ColorPicker.ChannelSliderLabel data-slot="color-picker-channel-slider-label" class={clsx(ColorPicker_module.channelSliderLabel, local.class)} {...others}/>;
+    return <ColorPicker.ChannelSliderLabel class={clsx(ColorPicker_module.channelSliderLabel, local.class)} {...others} data-slot="color-picker-channel-slider-label"/>;
 }
 function ColorPickerChannelSliderValueText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ColorPicker.ChannelSliderValueText data-slot="color-picker-channel-slider-value-text" class={clsx(ColorPicker_module.channelSliderValueText, local.class)} {...others}/>;
+    return <ColorPicker.ChannelSliderValueText class={clsx(ColorPicker_module.channelSliderValueText, local.class)} {...others} data-slot="color-picker-channel-slider-value-text"/>;
 }
 function ColorPickerChannelInput(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ColorPicker.ChannelInput data-slot="color-picker-channel-input" class={clsx(ColorPicker_module.channelInput, local.class)} {...others}/>;
+    return <ColorPicker.ChannelInput class={clsx(ColorPicker_module.channelInput, local.class)} {...others} data-slot="color-picker-channel-input"/>;
 }
 function ColorPickerEyeDropperTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -160,7 +160,7 @@ function ColorPickerEyeDropperTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <ColorPicker.EyeDropperTrigger data-slot="color-picker-eye-dropper-trigger" class={clsx(ColorPicker_module.eyeDropperTrigger, local.class)} {...others}>
+    return <ColorPicker.EyeDropperTrigger class={clsx(ColorPicker_module.eyeDropperTrigger, local.class)} {...others} data-slot="color-picker-eye-dropper-trigger">
       {resolvedChildren() ?? <PipetteIcon/>}
     </ColorPicker.EyeDropperTrigger>;
 }
@@ -169,7 +169,7 @@ function ColorPickerFormatSelect(props) {
         'class'
     ]);
     return <span class={ColorPicker_module.formatSelectControl}>
-      <ColorPicker.FormatSelect data-slot="color-picker-format-select" class={clsx(ColorPicker_module.formatSelect, local.class)} {...others}/>
+      <ColorPicker.FormatSelect class={clsx(ColorPicker_module.formatSelect, local.class)} {...others} data-slot="color-picker-format-select"/>
       <span aria-hidden="true" class={ColorPicker_module.formatSelectIndicator}>
         <ChevronDownIcon/>
       </span>
@@ -179,13 +179,13 @@ function ColorPickerFormatTrigger(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ColorPicker.FormatTrigger data-slot="color-picker-format-trigger" class={clsx(ColorPicker_module.formatTrigger, local.class)} {...others}/>;
+    return <ColorPicker.FormatTrigger class={clsx(ColorPicker_module.formatTrigger, local.class)} {...others} data-slot="color-picker-format-trigger"/>;
 }
 function ColorPickerSwatchGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ColorPicker.SwatchGroup data-slot="color-picker-swatch-group" class={clsx(ColorPicker_module.swatchGroup, local.class)} {...others}/>;
+    return <ColorPicker.SwatchGroup class={clsx(ColorPicker_module.swatchGroup, local.class)} {...others} data-slot="color-picker-swatch-group"/>;
 }
 function ColorPickerSwatchTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -194,7 +194,7 @@ function ColorPickerSwatchTrigger(props) {
         'value'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <ColorPicker.SwatchTrigger data-slot="color-picker-swatch-trigger" class={clsx(ColorPicker_module.swatchTrigger, local.class)} value={local.value} {...others}>
+    return <ColorPicker.SwatchTrigger class={clsx(ColorPicker_module.swatchTrigger, local.class)} value={local.value} {...others} data-slot="color-picker-swatch-trigger">
       {resolvedChildren() ?? <ColorPicker.Swatch data-slot="color-picker-swatch" class={ColorPicker_module.swatch} value={local.value}>
           <ColorPicker.SwatchIndicator data-slot="color-picker-swatch-indicator" class={ColorPicker_module.swatchIndicator}>
             <CheckIcon/>
@@ -206,7 +206,7 @@ function ColorPickerSwatch(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ColorPicker.Swatch data-slot="color-picker-swatch" class={clsx(ColorPicker_module.swatch, local.class)} {...others}/>;
+    return <ColorPicker.Swatch class={clsx(ColorPicker_module.swatch, local.class)} {...others} data-slot="color-picker-swatch"/>;
 }
 function ColorPickerSwatchIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -214,7 +214,7 @@ function ColorPickerSwatchIndicator(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <ColorPicker.SwatchIndicator data-slot="color-picker-swatch-indicator" class={clsx(ColorPicker_module.swatchIndicator, local.class)} {...others}>
+    return <ColorPicker.SwatchIndicator class={clsx(ColorPicker_module.swatchIndicator, local.class)} {...others} data-slot="color-picker-swatch-indicator">
       {resolvedChildren() ?? <CheckIcon/>}
     </ColorPicker.SwatchIndicator>;
 }
@@ -222,25 +222,25 @@ function ColorPickerTransparencyGrid(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ColorPicker.TransparencyGrid data-slot="color-picker-transparency-grid" class={clsx(ColorPicker_module.transparencyGrid, local.class)} {...others}/>;
+    return <ColorPicker.TransparencyGrid class={clsx(ColorPicker_module.transparencyGrid, local.class)} {...others} data-slot="color-picker-transparency-grid"/>;
 }
 function ColorPickerValueSwatch(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ColorPicker.ValueSwatch data-slot="color-picker-value-swatch" class={clsx(ColorPicker_module.valueSwatch, local.class)} {...others}/>;
+    return <ColorPicker.ValueSwatch class={clsx(ColorPicker_module.valueSwatch, local.class)} {...others} data-slot="color-picker-value-swatch"/>;
 }
 function ColorPickerValueText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ColorPicker.ValueText data-slot="color-picker-value-text" class={clsx(ColorPicker_module.valueText, local.class)} {...others}/>;
+    return <ColorPicker.ValueText class={clsx(ColorPicker_module.valueText, local.class)} {...others} data-slot="color-picker-value-text"/>;
 }
 function ColorPickerView(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ColorPicker.View data-slot="color-picker-view" class={clsx(ColorPicker_module.view, local.class)} {...others}/>;
+    return <ColorPicker.View class={clsx(ColorPicker_module.view, local.class)} {...others} data-slot="color-picker-view"/>;
 }
 const ColorPicker_ColorPicker = Object.assign(ColorPickerRoot, {
     Root: ColorPickerRoot,