@pathscale/ui 1.1.40 → 1.1.42

package/dist/components/color-area/ColorArea.js

@@ -2,7 +2,8 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./ColorArea.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div class=color-area__thumb data-slot=color-area-thumb>");
+import * as __WEBPACK_EXTERNAL_MODULE__ColorArea_classes_js_e74ec548__ from "./ColorArea.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div>");
 const DEFAULT_VALUE = {
     h: 0,
     s: 100,
@@ -152,10 +153,9 @@ const ColorArea_ColorArea = (props)=>{
         var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
         var _ref$ = areaRef;
         "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : areaRef = _el$;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-area", local.class, local.className);
-            },
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorArea_classes_js_e74ec548__.CLASSES.base, local.class, local.className)
+            }), {
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -190,20 +190,24 @@ const ColorArea_ColorArea = (props)=>{
             onLostPointerCapture: handleLostPointerCapture,
             onKeyDown: handleKeyDown
         }), false, true);
-        _el$2.style.setProperty("background-color", "var(--color-area-thumb-color)");
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-            var _v$ = isDragging() ? "true" : "false", _v$2 = isDisabled() ? "true" : "false", _v$3 = `${currentValue().s}%`, _v$4 = `${100 - currentValue().v}%`;
-            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "data-dragging", _p$.e = _v$);
-            _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "data-disabled", _p$.t = _v$2);
-            _v$3 !== _p$.a && (null != (_p$.a = _v$3) ? _el$2.style.setProperty("left", _v$3) : _el$2.style.removeProperty("left"));
-            _v$4 !== _p$.o && (null != (_p$.o = _v$4) ? _el$2.style.setProperty("top", _v$4) : _el$2.style.removeProperty("top"));
-            return _p$;
-        }, {
-            e: void 0,
-            t: void 0,
-            a: void 0,
-            o: void 0
-        });
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__ColorArea_classes_js_e74ec548__.CLASSES.slot.thumb
+            }), {
+            "data-slot": "color-area-thumb",
+            get ["data-dragging"] () {
+                return isDragging() ? "true" : "false";
+            },
+            get ["data-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            },
+            get style () {
+                return {
+                    left: `${currentValue().s}%`,
+                    top: `${100 - currentValue().v}%`,
+                    "background-color": "var(--color-area-thumb-color)"
+                };
+            }
+        }), false, false);
         return _el$;
     })();
 };

package/dist/components/color-field/ColorField.classes.d.ts

@@ -0,0 +1,13 @@
+export declare const CLASSES: {
+    readonly base: "color-field";
+    readonly slot: {
+        readonly group: "color-field__group";
+        readonly input: "color-field__input";
+    };
+    readonly flag: {
+        readonly fullWidth: "color-field--full-width";
+        readonly disabled: "color-field--disabled";
+        readonly groupFullWidth: "color-field__group--full-width";
+        readonly groupInvalid: "color-field__group--invalid";
+    };
+};

package/dist/components/color-field/ColorField.classes.js

@@ -0,0 +1,14 @@
+const CLASSES = {
+    base: "color-field",
+    slot: {
+        group: "color-field__group",
+        input: "color-field__input"
+    },
+    flag: {
+        fullWidth: "color-field--full-width",
+        disabled: "color-field--disabled",
+        groupFullWidth: "color-field__group--full-width",
+        groupInvalid: "color-field__group--invalid"
+    }
+};
+export { CLASSES };

package/dist/components/color-field/ColorField.js

@@ -3,7 +3,8 @@ import "./ColorField.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
 import * as __WEBPACK_EXTERNAL_MODULE__color_wheel_flower_ColorUtils_js_abf9b965__ from "../color-wheel-flower/ColorUtils.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div data-slot=color-field><div data-slot=color-field-group><input>");
+import * as __WEBPACK_EXTERNAL_MODULE__ColorField_classes_js_ef62f7c2__ from "./ColorField.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div><input>");
 const FALLBACK_COLOR = "#FFFFFF";
 const invokeEventHandler = (handler, event)=>{
     if ("function" == typeof handler) return void handler(event);
@@ -115,6 +116,34 @@ const ColorField = (props)=>{
     };
     return (()=>{
         var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorField_classes_js_ef62f7c2__.CLASSES.base, local.fullWidth && __WEBPACK_EXTERNAL_MODULE__ColorField_classes_js_ef62f7c2__.CLASSES.flag.fullWidth, isDisabled() && __WEBPACK_EXTERNAL_MODULE__ColorField_classes_js_ef62f7c2__.CLASSES.flag.disabled, local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "color-field",
+            get ["data-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            },
+            get ["data-invalid"] () {
+                return isInvalid() ? "true" : "false";
+            },
+            get ["aria-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorField_classes_js_ef62f7c2__.CLASSES.slot.group, isInvalid() && __WEBPACK_EXTERNAL_MODULE__ColorField_classes_js_ef62f7c2__.CLASSES.flag.groupInvalid, local.fullWidth && __WEBPACK_EXTERNAL_MODULE__ColorField_classes_js_ef62f7c2__.CLASSES.flag.groupFullWidth)
+            }), {
+            "data-slot": "color-field-group",
+            get ["data-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            },
+            get ["data-invalid"] () {
+                return isInvalid() ? "true" : "false";
+            }
+        }), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
             type: "text",
             get value () {
@@ -122,8 +151,10 @@ const ColorField = (props)=>{
             },
             get disabled () {
                 return isDisabled();
-            },
-            class: "color-field__input",
+            }
+        }, ()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__ColorField_classes_js_ef62f7c2__.CLASSES.slot.input
+            }), {
             "data-slot": "color-field-input",
             spellcheck: false,
             autocapitalize: "off",
@@ -137,27 +168,6 @@ const ColorField = (props)=>{
             onFocus: handleFocus,
             onKeyDown: handleKeyDown
         }), false, false);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-            var _v$ = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-field", local.fullWidth && "color-field--full-width", isDisabled() && "color-field--disabled", local.class, local.className), _v$2 = local.dataTheme, _v$3 = isDisabled() ? "true" : "false", _v$4 = isInvalid() ? "true" : "false", _v$5 = isDisabled() ? "true" : "false", _v$6 = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-field__group", isInvalid() && "color-field__group--invalid", local.fullWidth && "color-field__group--full-width"), _v$7 = isDisabled() ? "true" : "false", _v$8 = isInvalid() ? "true" : "false";
-            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
-            _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "data-theme", _p$.t = _v$2);
-            _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "data-disabled", _p$.a = _v$3);
-            _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "data-invalid", _p$.o = _v$4);
-            _v$5 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-disabled", _p$.i = _v$5);
-            _v$6 !== _p$.n && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.n = _v$6);
-            _v$7 !== _p$.s && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "data-disabled", _p$.s = _v$7);
-            _v$8 !== _p$.h && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "data-invalid", _p$.h = _v$8);
-            return _p$;
-        }, {
-            e: void 0,
-            t: void 0,
-            a: void 0,
-            o: void 0,
-            i: void 0,
-            n: void 0,
-            s: void 0,
-            h: void 0
-        });
         return _el$;
     })();
 };

package/dist/components/color-picker/ColorPicker.classes.d.ts

@@ -0,0 +1,8 @@
+export declare const CLASSES: {
+    readonly base: "color-picker";
+    readonly slot: {
+        readonly area: "color-picker__area";
+        readonly slider: "color-picker__slider";
+        readonly field: "color-picker__field";
+    };
+};

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

@@ -0,0 +1,9 @@
+const CLASSES = {
+    base: "color-picker",
+    slot: {
+        area: "color-picker__area",
+        slider: "color-picker__slider",
+        field: "color-picker__field"
+    }
+};
+export { CLASSES };

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

@@ -6,6 +6,7 @@ import * as __WEBPACK_EXTERNAL_MODULE__color_area_index_js_f79642f5__ from "../c
 import * as __WEBPACK_EXTERNAL_MODULE__color_field_index_js_d63b754b__ from "../color-field/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__color_slider_index_js_89667266__ from "../color-slider/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__color_wheel_flower_ColorUtils_js_abf9b965__ from "../color-wheel-flower/ColorUtils.js";
+import * as __WEBPACK_EXTERNAL_MODULE__ColorPicker_classes_js_3f630e74__ from "./ColorPicker.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
 const DEFAULT_COLOR = "#3B82F6";
 const ColorPickerContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
@@ -116,10 +117,9 @@ const ColorPickerArea = (props)=>{
         "onChange",
         "dataTheme"
     ]);
-    if (!ctx) return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_area_index_js_f79642f5__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-        get ["class"] () {
-            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-picker__area", local.class, local.className);
-        },
+    if (!ctx) return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_area_index_js_f79642f5__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorPicker_classes_js_3f630e74__.CLASSES.slot.area, local.class, local.className)
+        }), {
         get dataTheme () {
             return local.dataTheme;
         },
@@ -137,10 +137,10 @@ const ColorPickerArea = (props)=>{
         },
         get isDisabled () {
             return ctx.isDisabled();
-        },
-        get ["class"] () {
-            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-picker__area", local.class, local.className);
-        },
+        }
+    }, ()=>({
+            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorPicker_classes_js_3f630e74__.CLASSES.slot.area, local.class, local.className)
+        }), {
         get dataTheme () {
             return local.dataTheme;
         },
@@ -161,10 +161,10 @@ const ColorPickerSlider = (props)=>{
     if (!ctx) return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_slider_index_js_89667266__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
         get type () {
             return sliderType();
-        },
-        get ["class"] () {
-            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-picker__slider", local.class, local.className);
-        },
+        }
+    }, ()=>({
+            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorPicker_classes_js_3f630e74__.CLASSES.slot.slider, local.class, local.className)
+        }), {
         get dataTheme () {
             return local.dataTheme;
         },
@@ -200,10 +200,10 @@ const ColorPickerSlider = (props)=>{
         },
         get isDisabled () {
             return ctx.isDisabled();
-        },
-        get ["class"] () {
-            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-picker__slider", local.class, local.className);
-        },
+        }
+    }, ()=>({
+            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorPicker_classes_js_3f630e74__.CLASSES.slot.slider, local.class, local.className)
+        }), {
         get dataTheme () {
             return local.dataTheme;
         },
@@ -223,10 +223,9 @@ const ColorPickerField = (props)=>{
         "format",
         "dataTheme"
     ]);
-    if (!ctx) return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_field_index_js_d63b754b__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-        get ["class"] () {
-            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-picker__field", local.class, local.className);
-        },
+    if (!ctx) return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_field_index_js_d63b754b__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorPicker_classes_js_3f630e74__.CLASSES.slot.field, local.class, local.className)
+        }), {
         get dataTheme () {
             return local.dataTheme;
         },
@@ -250,10 +249,10 @@ const ColorPickerField = (props)=>{
         },
         get isDisabled () {
             return ctx.isDisabled();
-        },
-        get ["class"] () {
-            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-picker__field", local.class, local.className);
-        },
+        }
+    }, ()=>({
+            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorPicker_classes_js_3f630e74__.CLASSES.slot.field, local.class, local.className)
+        }), {
         get dataTheme () {
             return local.dataTheme;
         },
@@ -337,10 +336,9 @@ const ColorPickerRoot = (props)=>{
         },
         get children () {
             var _el$ = _tmpl$();
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-                get ["class"] () {
-                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-picker", local.class, local.className);
-                },
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                    class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorPicker_classes_js_3f630e74__.CLASSES.base, local.class, local.className)
+                }), {
                 get ["data-theme"] () {
                     return local.dataTheme;
                 },

package/dist/components/color-slider/ColorSlider.classes.d.ts

@@ -0,0 +1,11 @@
+export declare const CLASSES: {
+    readonly base: "color-slider";
+    readonly slot: {
+        readonly track: "color-slider__track";
+        readonly thumb: "color-slider__thumb";
+    };
+    readonly flag: {
+        readonly alpha: "color-slider--alpha";
+        readonly dragging: "color-slider--dragging";
+    };
+};

package/dist/components/color-slider/ColorSlider.classes.js

@@ -0,0 +1,12 @@
+const CLASSES = {
+    base: "color-slider",
+    slot: {
+        track: "color-slider__track",
+        thumb: "color-slider__thumb"
+    },
+    flag: {
+        alpha: "color-slider--alpha",
+        dragging: "color-slider--dragging"
+    }
+};
+export { CLASSES };

package/dist/components/color-slider/ColorSlider.js

@@ -2,7 +2,8 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./ColorSlider.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div class=color-slider__track data-slot=color-slider-track></div><div class=color-slider__thumb data-slot=color-slider-thumb>");
+import * as __WEBPACK_EXTERNAL_MODULE__ColorSlider_classes_js_0a74b5c9__ from "./ColorSlider.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div></div><div>");
 const clamp = (value, min, max)=>Math.min(max, Math.max(min, value));
 const normalizeValue = (type, value)=>{
     if ("alpha" === type) return clamp(value, 0, 1);
@@ -116,10 +117,9 @@ const ColorSlider = (props)=>{
         var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
         var _ref$ = sliderRef;
         "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : sliderRef = _el$;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-slider", "alpha" === sliderType() && "color-slider--alpha", isDragging() && "color-slider--dragging", local.class, local.className);
-            },
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorSlider_classes_js_0a74b5c9__.CLASSES.base, "alpha" === sliderType() && __WEBPACK_EXTERNAL_MODULE__ColorSlider_classes_js_0a74b5c9__.CLASSES.flag.alpha, isDragging() && __WEBPACK_EXTERNAL_MODULE__ColorSlider_classes_js_0a74b5c9__.CLASSES.flag.dragging, local.class, local.className)
+            }), {
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -161,16 +161,25 @@ const ColorSlider = (props)=>{
             onLostPointerCapture: handleLostPointerCapture,
             onKeyDown: handleKeyDown
         }), false, true);
-        _el$3.style.setProperty("background-color", "var(--color-slider-thumb-color)");
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-            var _v$ = isDragging() ? "true" : "false", _v$2 = `${percent()}%`;
-            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$3, "data-dragging", _p$.e = _v$);
-            _v$2 !== _p$.t && (null != (_p$.t = _v$2) ? _el$3.style.setProperty("left", _v$2) : _el$3.style.removeProperty("left"));
-            return _p$;
-        }, {
-            e: void 0,
-            t: void 0
-        });
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__ColorSlider_classes_js_0a74b5c9__.CLASSES.slot.track
+            }), {
+            "data-slot": "color-slider-track"
+        }), false, false);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__ColorSlider_classes_js_0a74b5c9__.CLASSES.slot.thumb
+            }), {
+            "data-slot": "color-slider-thumb",
+            get ["data-dragging"] () {
+                return isDragging() ? "true" : "false";
+            },
+            get style () {
+                return {
+                    left: `${percent()}%`,
+                    "background-color": "var(--color-slider-thumb-color)"
+                };
+            }
+        }), false, false);
         return _el$;
     })();
 };

package/dist/components/color-swatch/ColorSwatch.classes.d.ts

@@ -0,0 +1,14 @@
+export declare const CLASSES: {
+    readonly base: "color-swatch";
+    readonly shape: {
+        readonly circle: "color-swatch--circle";
+        readonly square: "color-swatch--square";
+    };
+    readonly size: {
+        readonly xs: "color-swatch--xs";
+        readonly sm: "color-swatch--sm";
+        readonly md: "color-swatch--md";
+        readonly lg: "color-swatch--lg";
+        readonly xl: "color-swatch--xl";
+    };
+};

package/dist/components/color-swatch/ColorSwatch.classes.js

@@ -0,0 +1,15 @@
+const CLASSES = {
+    base: "color-swatch",
+    shape: {
+        circle: "color-swatch--circle",
+        square: "color-swatch--square"
+    },
+    size: {
+        xs: "color-swatch--xs",
+        sm: "color-swatch--sm",
+        md: "color-swatch--md",
+        lg: "color-swatch--lg",
+        xl: "color-swatch--xl"
+    }
+};
+export { CLASSES };

package/dist/components/color-swatch/ColorSwatch.js

@@ -3,22 +3,12 @@ import "./ColorSwatch.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
 import * as __WEBPACK_EXTERNAL_MODULE__color_swatch_picker_ColorSwatchPicker_js_8e90244a__ from "../color-swatch-picker/ColorSwatchPicker.js";
+import * as __WEBPACK_EXTERNAL_MODULE__ColorSwatch_classes_js_d61387ae__ from "./ColorSwatch.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>");
 const invokeEventHandler = (handler, event)=>{
     if ("function" == typeof handler) return void handler(event);
     if (Array.isArray(handler) && "function" == typeof handler[0]) handler[0](handler[1], event);
 };
-const shapeClassMap = {
-    circle: "color-swatch--circle",
-    square: "color-swatch--square"
-};
-const sizeClassMap = {
-    xs: "color-swatch--xs",
-    sm: "color-swatch--sm",
-    md: "color-swatch--md",
-    lg: "color-swatch--lg",
-    xl: "color-swatch--xl"
-};
 const ColorSwatch = (props)=>{
     const picker = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(__WEBPACK_EXTERNAL_MODULE__color_swatch_picker_ColorSwatchPicker_js_8e90244a__.ColorSwatchPickerContext);
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -91,7 +81,7 @@ const ColorSwatch = (props)=>{
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
             type: "button",
             get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-swatch", shapeClassMap[shape()], sizeClassMap[size()], local.class, local.className);
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorSwatch_classes_js_d61387ae__.CLASSES.base, __WEBPACK_EXTERNAL_MODULE__ColorSwatch_classes_js_d61387ae__.CLASSES.shape[shape()], __WEBPACK_EXTERNAL_MODULE__ColorSwatch_classes_js_d61387ae__.CLASSES.size[size()], local.class, local.className);
             },
             get ["data-theme"] () {
                 return local.dataTheme;

package/dist/components/color-swatch-picker/ColorSwatchPicker.classes.d.ts

@@ -0,0 +1,3 @@
+export declare const CLASSES: {
+    readonly base: "color-swatch-picker";
+};

package/dist/components/color-swatch-picker/ColorSwatchPicker.classes.js

@@ -0,0 +1,4 @@
+const CLASSES = {
+    base: "color-swatch-picker"
+};
+export { CLASSES };

package/dist/components/color-swatch-picker/ColorSwatchPicker.js

@@ -2,6 +2,7 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./ColorSwatchPicker.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__ColorSwatchPicker_classes_js_3ef482a8__ from "./ColorSwatchPicker.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
 const invokeEventHandler = (handler, event)=>{
     if ("function" == typeof handler) return void handler(event);
@@ -82,10 +83,9 @@ const ColorSwatchPicker = (props)=>{
             var _el$ = _tmpl$();
             var _ref$ = rootRef;
             "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : rootRef = _el$;
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-                get ["class"] () {
-                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-swatch-picker", local.class, local.className);
-                },
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                    class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorSwatchPicker_classes_js_3ef482a8__.CLASSES.base, local.class, local.className)
+                }), {
                 get ["data-theme"] () {
                     return local.dataTheme;
                 },