@pathscale/ui 0.0.112 → 0.0.113

package/dist/index.js

@@ -7148,7 +7148,7 @@ const runMotion = (el, from, to, transition, onComplete)=>{
         }
     };
 };
-var ColorWheelFlower_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div class="absolute inset-0"><div class="absolute inset-0"><div class="absolute inset-0 rounded-full"></div></div><div class="absolute inset-0"><div class="absolute inset-0 rounded-full"></div></div></div><div class="relative z-10 w-[calc(100%-5px)] h-[calc(100%-5px)] rounded-full">'), ColorWheelFlower_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class=absolute><div class="relative w-[32px] h-[32px]"><span class="absolute rounded-full pointer-events-none"></span><button type=button><span>');
+var ColorWheelFlower_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div class="absolute inset-0"><div class="absolute inset-0"><div class="absolute inset-0 rounded-full"></div></div><div class="absolute inset-0"><div class="absolute inset-0 rounded-full"></div></div></div><div class="relative z-10 w-[calc(100%-5px)] h-[calc(100%-5px)] rounded-full">'), ColorWheelFlower_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class=absolute><div class="relative w-[32px] h-[32px]"><div class="relative w-full h-full"><span class="absolute rounded-full pointer-events-none"></span><button type=button><span>');
 const parseRgbToHsl = (rgbString)=>{
     const match = rgbString.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
     if (!match) return {
@@ -7223,6 +7223,11 @@ const easeOutBack = (overshoot = 1.4)=>(t)=>{
         const c3 = c1 + 1;
         return 1 + c3 * (t - 1) ** 3 + c1 * (t - 1) ** 2;
     };
+const toRgba = (rgb, alpha)=>{
+    const match = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+    if (!match) return rgb;
+    return `rgba(${match[1]}, ${match[2]}, ${match[3]}, ${alpha})`;
+};
 const COLORS = [
     createColorItem("rgb(245,245,61)", 34.641, -20),
     createColorItem("rgb(245,153,61)", 20, -34.641),
@@ -7244,7 +7249,8 @@ const COLORS = [
     createColorItem("rgb(217,240,194)", 20, 0),
     createColorItem("rgb(255,255,255)", 0, 0)
 ];
-const MAX_WAVE_DISTANCE = 2 * Math.max(...COLORS.map((item)=>Math.sqrt(item.offsetX ** 2 + item.offsetY ** 2)));
+const MAX_RADIUS = Math.max(...COLORS.map((item)=>Math.sqrt(item.offsetX ** 2 + item.offsetY ** 2)));
+const MAX_WAVE_DISTANCE = 2 * MAX_RADIUS;
 const MAX_WAVE_DELAY = 0.12;
 const RAINBOW_GRADIENT = `conic-gradient(
   from 0deg,
@@ -7262,6 +7268,12 @@ const ColorWheelFlower = (props)=>{
     const [selectedIndex, setSelectedIndex] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(null);
     const [hoveredIndex, setHoveredIndex] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(null);
     const [pressedIndex, setPressedIndex] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(null);
+    const [pointer, setPointer] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)({
+        x: 0,
+        y: 0,
+        active: false
+    });
+    const [pulseState, setPulseState] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(null);
     const reduceMotion = prefersReducedMotion();
     const ringTransition = reduceMotion ? {
         duration: 0
@@ -7270,12 +7282,24 @@ const ColorWheelFlower = (props)=>{
         easing: motionEasings.inOut
     };
     const hoverLift = reduceMotion ? 0 : motionDistances.sm;
-    const selectLift = reduceMotion ? 0 : motionDistances.md;
     const pressScale = 0.96;
+    const pulseScale = 1.12;
+    let containerRef;
+    let pointerTimeout;
+    let pulseTimeout;
     let outerRingRef;
     let outerRingControl = null;
     const handleDotClick = (index)=>{
         if (context.disabled()) return;
+        const pulseKey = Date.now();
+        setPulseState({
+            index,
+            key: pulseKey
+        });
+        if (void 0 !== pulseTimeout) clearTimeout(pulseTimeout);
+        pulseTimeout = window.setTimeout(()=>{
+            setPulseState((prev)=>prev?.index === index && prev?.key === pulseKey ? null : prev);
+        }, reduceMotion ? 0 : 220);
         if (selectedIndex() === index) {
             setSelectedIndex(null);
             const whiteColor = createColorFromHsl(0, 0, 100, context.color().hsl.a);
@@ -7287,6 +7311,32 @@ const ColorWheelFlower = (props)=>{
             context.onChange(newColor);
         }
     };
+    const handlePointerMove = (event)=>{
+        if (!containerRef) return;
+        const rect = containerRef.getBoundingClientRect();
+        const x = event.clientX - rect.left - rect.width / 2;
+        const y = event.clientY - rect.top - rect.height / 2;
+        setPointer({
+            x,
+            y,
+            active: true
+        });
+        if (void 0 !== pointerTimeout) clearTimeout(pointerTimeout);
+        pointerTimeout = window.setTimeout(()=>{
+            setPointer((prev)=>({
+                    ...prev,
+                    active: false
+                }));
+        }, 120);
+    };
+    const handlePointerLeave = ()=>{
+        setPointer((prev)=>({
+                ...prev,
+                active: false
+            }));
+        setHoveredIndex(null);
+        if (void 0 !== pointerTimeout) clearTimeout(pointerTimeout);
+    };
     const containerClasses = ()=>twMerge("relative w-[140px] h-[140px] flex items-center justify-center", clsx({
             "opacity-50 cursor-not-allowed": context.disabled()
         }), props.class, props.className);
@@ -7315,9 +7365,9 @@ const ColorWheelFlower = (props)=>{
     const outerRingGlow = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
         if (context.disabled()) return "none";
         const idx = hoveredIndex() ?? selectedIndex();
-        if (null === idx) return "0 0 12px rgba(255,255,255,0.12)";
+        if (null === idx) return "0 0 10px rgba(255,255,255,0.08)";
         const color = COLORS[idx].rgb;
-        return `0 0 12px rgba(255,255,255,0.35), 0 0 28px ${color}`;
+        return `0 0 10px rgba(255,255,255,0.16), 0 0 20px ${toRgba(color, 0.35)}`;
     });
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
         if (!outerRingRef) return;
@@ -7327,12 +7377,18 @@ const ColorWheelFlower = (props)=>{
     });
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
         outerRingControl?.stop();
+        if (void 0 !== pulseTimeout) clearTimeout(pulseTimeout);
+        if (void 0 !== pointerTimeout) clearTimeout(pointerTimeout);
     });
     return (()=>{
         var _el$ = ColorWheelFlower_tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$3.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$2.nextSibling;
+        _el$.addEventListener("mouseleave", handlePointerLeave);
+        _el$.$$mousemove = handlePointerMove;
+        var _ref$ = containerRef;
+        "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : containerRef = _el$;
         _el$3.style.setProperty("transform", "scale(1.1)");
-        var _ref$ = outerRingRef;
-        "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$4) : outerRingRef = _el$4;
+        var _ref$2 = outerRingRef;
+        "function" == typeof _ref$2 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$2, _el$4) : outerRingRef = _el$4;
         _el$4.style.setProperty("transition", reduceMotion ? "none" : "background 450ms ease-in-out, box-shadow 300ms ease-out");
         _el$5.style.setProperty("transform", "scale(0.9)");
         _el$6.style.setProperty("background", "#0b1012");
@@ -7341,11 +7397,9 @@ const ColorWheelFlower = (props)=>{
             children: (item, index)=>{
                 let motionRef;
                 let dotControl = null;
-                const isSelected = ()=>selectedIndex() === index();
                 const isHovered = ()=>hoveredIndex() === index();
                 const isPressed = ()=>pressedIndex() === index();
-                const hasSelection = ()=>null !== selectedIndex();
-                const hasHover = ()=>null !== hoveredIndex();
+                const isPulsing = ()=>pulseState()?.index === index();
                 const dotBaseTarget = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
                     if (context.disabled()) return {
                         opacity: 0.5,
@@ -7353,72 +7407,69 @@ const ColorWheelFlower = (props)=>{
                         x: 0,
                         y: 0
                     };
-                    if (isSelected()) {
-                        const lift = getLiftOffset(item, selectLift);
-                        return {
-                            opacity: 1,
-                            scale: 1.18,
-                            x: lift.x,
-                            y: lift.y
-                        };
-                    }
-                    if (isHovered()) {
-                        const lift = getLiftOffset(item, hoverLift);
-                        return {
-                            opacity: 1,
-                            scale: 1.1,
-                            x: lift.x,
-                            y: lift.y
-                        };
+                    const pointerState = pointer();
+                    const anchorIndex = hoveredIndex();
+                    let scale = 1;
+                    let offsetX = 0;
+                    let offsetY = 0;
+                    if (null !== anchorIndex && pointerState.active) {
+                        const anchor = COLORS[anchorIndex];
+                        const distance = Math.sqrt((item.offsetX - anchor.offsetX) ** 2 + (item.offsetY - anchor.offsetY) ** 2);
+                        const waveRadius = 0.9 * MAX_RADIUS;
+                        const influence = Math.max(0, 1 - distance / waveRadius);
+                        if (influence > 0) {
+                            const maxDelta = 16;
+                            const deltaX = Math.max(-maxDelta, Math.min(maxDelta, pointerState.x - anchor.offsetX));
+                            const deltaY = Math.max(-maxDelta, Math.min(maxDelta, pointerState.y - anchor.offsetY));
+                            const waveStrength = isHovered() ? 0.25 : 0.18;
+                            offsetX += deltaX * influence * waveStrength;
+                            offsetY += deltaY * influence * waveStrength;
+                            const liftStrength = isHovered() ? 0.8 : 0.35;
+                            const lift = getLiftOffset(item, hoverLift * liftStrength);
+                            offsetX += lift.x * influence;
+                            offsetY += lift.y * influence;
+                            const scaleBoost = isHovered() ? 0.06 : 0.03;
+                            scale += influence * scaleBoost;
+                        }
                     }
-                    if (hasSelection()) return {
-                        opacity: 1,
-                        scale: 0.98,
-                        x: 0,
-                        y: 0
-                    };
-                    if (hasHover()) return {
-                        opacity: 1,
-                        scale: 0.99,
-                        x: 0,
-                        y: 0
-                    };
                     return {
                         opacity: 1,
-                        scale: 1,
-                        x: 0,
-                        y: 0
+                        scale,
+                        x: offsetX,
+                        y: offsetY
                     };
                 });
                 const dotTarget = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
                     const base = dotBaseTarget();
-                    if (!isPressed()) return base;
+                    let scale = base.scale ?? 1;
+                    if (isPulsing()) scale *= pulseScale;
+                    if (isPressed()) scale *= pressScale;
                     return {
                         ...base,
-                        scale: (base.scale ?? 1) * pressScale
+                        scale
                     };
                 });
                 const glowOpacity = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
                     if (context.disabled()) return 0;
-                    if (isHovered()) return 1;
-                    if (isSelected()) return 0.75;
+                    if (isHovered()) return 0.6;
+                    if (isPulsing()) return 0.35;
                     return 0;
                 });
                 const dotTransition = ()=>{
                     if (reduceMotion) return {
                         duration: 0
                     };
-                    const anchorIndex = hoveredIndex() ?? selectedIndex();
+                    const anchorIndex = hoveredIndex();
+                    const pointerState = pointer();
                     let delay = 0;
-                    if (null !== anchorIndex) {
+                    if (null !== anchorIndex && pointerState.active) {
                         const anchor = COLORS[anchorIndex];
                         const distance = Math.sqrt((item.offsetX - anchor.offsetX) ** 2 + (item.offsetY - anchor.offsetY) ** 2);
                         delay = Math.min(MAX_WAVE_DELAY, distance / MAX_WAVE_DISTANCE * MAX_WAVE_DELAY);
                     }
-                    if (isSelected()) return {
+                    if (isPulsing()) return {
                         duration: motionDurations.fast,
-                        easing: easeOutBack(1.25),
-                        delay
+                        easing: easeOutBack(1.25)
                     };
                     if (isHovered()) return {
                         duration: motionDurations.fast,
@@ -7442,61 +7493,62 @@ const ColorWheelFlower = (props)=>{
                     dotControl?.stop();
                 });
                 return (()=>{
-                    var _el$8 = ColorWheelFlower_tmpl$2(), _el$9 = _el$8.firstChild, _el$0 = _el$9.firstChild, _el$1 = _el$0.nextSibling, _el$10 = _el$1.firstChild;
+                    var _el$8 = ColorWheelFlower_tmpl$2(), _el$9 = _el$8.firstChild, _el$0 = _el$9.firstChild, _el$1 = _el$0.firstChild, _el$10 = _el$1.nextSibling, _el$11 = _el$10.firstChild;
                     _el$8.style.setProperty("transform", "translate(-50%, -50%)");
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((el)=>{
                         motionRef = el;
-                    }, _el$9);
-                    _el$0.style.setProperty("top", "-5px");
-                    _el$0.style.setProperty("left", "-5px");
-                    _el$0.style.setProperty("right", "-5px");
-                    _el$0.style.setProperty("bottom", "-5px");
-                    _el$0.style.setProperty("background", "radial-gradient(circle, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 65%)");
-                    _el$0.style.setProperty("transition", reduceMotion ? "none" : "opacity 200ms ease-out, box-shadow 200ms ease-out");
-                    _el$1.addEventListener("pointercancel", ()=>{
+                    }, _el$0);
+                    _el$1.style.setProperty("top", "-5px");
+                    _el$1.style.setProperty("left", "-5px");
+                    _el$1.style.setProperty("right", "-5px");
+                    _el$1.style.setProperty("bottom", "-5px");
+                    _el$1.style.setProperty("background", "radial-gradient(circle, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 70%)");
+                    _el$1.style.setProperty("transition", reduceMotion ? "none" : "opacity 200ms ease-out, box-shadow 200ms ease-out");
+                    _el$10.addEventListener("pointercancel", ()=>{
                         if (!context.disabled()) setPressedIndex(null);
                     });
-                    _el$1.addEventListener("pointerleave", ()=>{
+                    _el$10.addEventListener("pointerleave", ()=>{
                         if (!context.disabled()) setPressedIndex(null);
                     });
-                    _el$1.$$pointerup = ()=>{
+                    _el$10.$$pointerup = ()=>{
                         if (!context.disabled()) setPressedIndex(null);
                     };
-                    _el$1.$$pointerdown = ()=>{
+                    _el$10.$$pointerdown = ()=>{
                         if (!context.disabled()) setPressedIndex(index());
                     };
-                    _el$1.addEventListener("blur", ()=>{
+                    _el$10.addEventListener("blur", ()=>{
                         if (!context.disabled()) setHoveredIndex(null);
                     });
-                    _el$1.addEventListener("focus", ()=>{
+                    _el$10.addEventListener("focus", ()=>{
                         if (!context.disabled()) setHoveredIndex(index());
                     });
-                    _el$1.addEventListener("mouseleave", ()=>{
+                    _el$10.addEventListener("mouseleave", ()=>{
                         if (!context.disabled()) setHoveredIndex(null);
                     });
-                    _el$1.addEventListener("mouseenter", ()=>{
+                    _el$10.addEventListener("mouseenter", ()=>{
                         if (!context.disabled()) setHoveredIndex(index());
                     });
-                    _el$1.$$click = ()=>handleDotClick(index());
-                    _el$1.style.setProperty("transition", reduceMotion ? "none" : "box-shadow 200ms ease-out");
-                    _el$10.style.setProperty("mix-blend-mode", "overlay");
+                    _el$10.$$click = ()=>handleDotClick(index());
+                    _el$10.style.setProperty("transition", reduceMotion ? "none" : "box-shadow 200ms ease-out");
+                    _el$11.style.setProperty("mix-blend-mode", "overlay");
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-                        var _v$4 = `calc(50% + ${item.offsetX}px)`, _v$5 = `calc(50% + ${item.offsetY}px)`, _v$6 = glowOpacity(), _v$7 = `0 0 16px ${item.rgb}, 0 0 6px rgba(255,255,255,0.6)`, _v$8 = context.disabled() ? -1 : 0, _v$9 = clsx("w-full h-full rounded-full", "transition-shadow duration-200 ease-out", "focus:outline-none focus:ring-2 focus:ring-white/50", "relative z-10", {
+                        var _v$4 = `calc(50% + ${item.offsetX}px)`, _v$5 = `calc(50% + ${item.offsetY}px)`, _v$6 = glowOpacity(), _v$7 = `0 0 8px ${toRgba(item.rgb, 0.3)}, 0 0 3px rgba(255,255,255,0.35)`, _v$8 = context.disabled() ? -1 : 0, _v$9 = clsx("w-full h-full rounded-full", "transition-shadow duration-200 ease-out", "focus:outline-none focus:ring-2 focus:ring-white/50", "relative z-10", {
                             "cursor-not-allowed": context.disabled(),
                             "cursor-pointer": !context.disabled()
-                        }), _v$0 = item.rgb, _v$1 = isSelected() ? "0 6px 16px rgba(0,0,0,0.35)" : isHovered() ? "0 4px 12px rgba(0,0,0,0.3)" : "0 2px 8px rgba(0,0,0,0.3)", _v$10 = `Select color ${item.rgb}`, _v$11 = selectedIndex() === index(), _v$12 = clsx("absolute inset-0 rounded-full border-2 border-white", "transition-opacity duration-300 ease-out"), _v$13 = selectedIndex() === index() ? "1" : "0";
+                        }), _v$0 = item.rgb, _v$1 = isHovered() || isPulsing() ? "0 3px 10px rgba(0,0,0,0.25)" : "0 2px 8px rgba(0,0,0,0.25)", _v$10 = `Select color ${item.rgb}`, _v$11 = selectedIndex() === index(), _v$12 = clsx("absolute inset-0 rounded-full border-2 border-white", "transition-opacity duration-300 ease-out"), _v$13 = isHovered() ? "0.75" : isPulsing() ? "0.45" : "0", _v$14 = isHovered() ? "0 0 6px rgba(255,255,255,0.45)" : isPulsing() ? "0 0 4px rgba(255,255,255,0.35)" : "none";
                         _v$4 !== _p$.e && (null != (_p$.e = _v$4) ? _el$8.style.setProperty("left", _v$4) : _el$8.style.removeProperty("left"));
                         _v$5 !== _p$.t && (null != (_p$.t = _v$5) ? _el$8.style.setProperty("top", _v$5) : _el$8.style.removeProperty("top"));
-                        _v$6 !== _p$.a && (null != (_p$.a = _v$6) ? _el$0.style.setProperty("opacity", _v$6) : _el$0.style.removeProperty("opacity"));
-                        _v$7 !== _p$.o && (null != (_p$.o = _v$7) ? _el$0.style.setProperty("box-shadow", _v$7) : _el$0.style.removeProperty("box-shadow"));
-                        _v$8 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$1, "tabindex", _p$.i = _v$8);
-                        _v$9 !== _p$.n && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$1, _p$.n = _v$9);
-                        _v$0 !== _p$.s && (null != (_p$.s = _v$0) ? _el$1.style.setProperty("background", _v$0) : _el$1.style.removeProperty("background"));
-                        _v$1 !== _p$.h && (null != (_p$.h = _v$1) ? _el$1.style.setProperty("box-shadow", _v$1) : _el$1.style.removeProperty("box-shadow"));
-                        _v$10 !== _p$.r && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$1, "aria-label", _p$.r = _v$10);
-                        _v$11 !== _p$.d && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$1, "aria-pressed", _p$.d = _v$11);
-                        _v$12 !== _p$.l && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$10, _p$.l = _v$12);
-                        _v$13 !== _p$.u && (null != (_p$.u = _v$13) ? _el$10.style.setProperty("opacity", _v$13) : _el$10.style.removeProperty("opacity"));
+                        _v$6 !== _p$.a && (null != (_p$.a = _v$6) ? _el$1.style.setProperty("opacity", _v$6) : _el$1.style.removeProperty("opacity"));
+                        _v$7 !== _p$.o && (null != (_p$.o = _v$7) ? _el$1.style.setProperty("box-shadow", _v$7) : _el$1.style.removeProperty("box-shadow"));
+                        _v$8 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "tabindex", _p$.i = _v$8);
+                        _v$9 !== _p$.n && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$10, _p$.n = _v$9);
+                        _v$0 !== _p$.s && (null != (_p$.s = _v$0) ? _el$10.style.setProperty("background", _v$0) : _el$10.style.removeProperty("background"));
+                        _v$1 !== _p$.h && (null != (_p$.h = _v$1) ? _el$10.style.setProperty("box-shadow", _v$1) : _el$10.style.removeProperty("box-shadow"));
+                        _v$10 !== _p$.r && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "aria-label", _p$.r = _v$10);
+                        _v$11 !== _p$.d && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "aria-pressed", _p$.d = _v$11);
+                        _v$12 !== _p$.l && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$11, _p$.l = _v$12);
+                        _v$13 !== _p$.u && (null != (_p$.u = _v$13) ? _el$11.style.setProperty("opacity", _v$13) : _el$11.style.removeProperty("opacity"));
+                        _v$14 !== _p$.c && (null != (_p$.c = _v$14) ? _el$11.style.setProperty("box-shadow", _v$14) : _el$11.style.removeProperty("box-shadow"));
                         return _p$;
                     }, {
                         e: void 0,
@@ -7510,7 +7562,8 @@ const ColorWheelFlower = (props)=>{
                         r: void 0,
                         d: void 0,
                         l: void 0,
-                        u: void 0
+                        u: void 0,
+                        c: void 0
                     });
                     return _el$8;
                 })();
@@ -7532,6 +7585,7 @@ const ColorWheelFlower = (props)=>{
 };
 const colorpicker_ColorWheelFlower = ColorWheelFlower;
 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "mousemove",
     "click",
     "pointerdown",
     "pointerup"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "0.0.112",
+  "version": "0.0.113",
   "author": "pathscale",
   "repository": {
     "type": "git",