@pathscale/ui 0.0.111 → 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="w-[32px] h-[32px]"><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 {
@@ -7218,6 +7218,16 @@ const getLiftOffset = (item, distance)=>{
         y: item.offsetY / radius * distance
     };
 };
+const easeOutBack = (overshoot = 1.4)=>(t)=>{
+        const c1 = overshoot;
+        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),
@@ -7239,6 +7249,9 @@ const COLORS = [
     createColorItem("rgb(217,240,194)", 20, 0),
     createColorItem("rgb(255,255,255)", 0, 0)
 ];
+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,
   rgb(245,61,61) 0deg,
@@ -7254,25 +7267,39 @@ const ColorWheelFlower = (props)=>{
     const context = useColorPickerContext();
     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 dotTransition = reduceMotion ? {
-        duration: 0
-    } : {
-        duration: motionDurations.fast,
-        easing: motionEasings.out
-    };
     const ringTransition = reduceMotion ? {
         duration: 0
     } : {
-        duration: motionDurations.base,
-        easing: motionEasings.out
+        duration: motionDurations.slow,
+        easing: motionEasings.inOut
     };
-    const hoverLift = reduceMotion ? 0 : motionDistances.sm / 2;
-    const selectLift = reduceMotion ? 0 : motionDistances.sm;
+    const hoverLift = reduceMotion ? 0 : motionDistances.sm;
+    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);
@@ -7284,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);
@@ -7298,17 +7351,24 @@ const ColorWheelFlower = (props)=>{
         };
         if (null !== selectedIndex()) return {
             opacity: 1,
-            scale: 1.04
+            scale: 1.06
         };
         if (null !== hoveredIndex()) return {
-            opacity: 0.96,
-            scale: 1.02
+            opacity: 0.98,
+            scale: 1.03
         };
         return {
-            opacity: 0.9,
+            opacity: 0.92,
             scale: 1
         };
     });
+    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 10px rgba(255,255,255,0.08)";
+        const color = COLORS[idx].rgb;
+        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;
         const target = outerRingTarget();
@@ -7317,13 +7377,19 @@ 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;
-        _el$4.style.setProperty("transition", reduceMotion ? "none" : "background 500ms ease-out");
+        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");
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
@@ -7331,98 +7397,158 @@ const ColorWheelFlower = (props)=>{
             children: (item, index)=>{
                 let motionRef;
                 let dotControl = null;
-                const isSelected = ()=>selectedIndex() === index();
                 const isHovered = ()=>hoveredIndex() === index();
-                const hasSelection = ()=>null !== selectedIndex();
-                const hasHover = ()=>null !== hoveredIndex();
-                const dotTarget = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+                const isPressed = ()=>pressedIndex() === index();
+                const isPulsing = ()=>pulseState()?.index === index();
+                const dotBaseTarget = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
                     if (context.disabled()) return {
                         opacity: 0.5,
                         scale: 1,
                         x: 0,
                         y: 0
                     };
-                    if (isSelected()) {
-                        const lift = getLiftOffset(item, selectLift);
-                        return {
-                            opacity: 1,
-                            scale: 1.18,
-                            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 (isHovered()) {
-                        const lift = getLiftOffset(item, hoverLift);
-                        return {
-                            opacity: 1,
-                            scale: 1.1,
-                            x: lift.x,
-                            y: lift.y
-                        };
+                    return {
+                        opacity: 1,
+                        scale,
+                        x: offsetX,
+                        y: offsetY
+                    };
+                });
+                const dotTarget = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+                    const base = dotBaseTarget();
+                    let scale = base.scale ?? 1;
+                    if (isPulsing()) scale *= pulseScale;
+                    if (isPressed()) scale *= pressScale;
+                    return {
+                        ...base,
+                        scale
+                    };
+                });
+                const glowOpacity = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+                    if (context.disabled()) return 0;
+                    if (isHovered()) return 0.6;
+                    if (isPulsing()) return 0.35;
+                    return 0;
+                });
+                const dotTransition = ()=>{
+                    if (reduceMotion) return {
+                        duration: 0
+                    };
+                    const anchorIndex = hoveredIndex();
+                    const pointerState = pointer();
+                    let delay = 0;
+                    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 (hasSelection()) return {
-                        opacity: 0.65,
-                        scale: 0.92,
-                        x: 0,
-                        y: 0
+                    if (isPulsing()) return {
+                        duration: motionDurations.fast,
+                        easing: easeOutBack(1.25)
                     };
-                    if (hasHover()) return {
-                        opacity: 0.85,
-                        scale: 0.96,
-                        x: 0,
-                        y: 0
+                    if (isHovered()) return {
+                        duration: motionDurations.fast,
+                        easing: motionEasings.out,
+                        delay
                     };
                     return {
-                        opacity: 0.95,
-                        scale: 1,
-                        x: 0,
-                        y: 0
+                        duration: motionDurations.base,
+                        easing: motionEasings.out,
+                        delay
                     };
-                });
+                };
                 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
                     if (!motionRef) return;
                     const target = dotTarget();
+                    const transition = dotTransition();
                     dotControl?.stop();
-                    dotControl = runMotion(motionRef, readMotionState(motionRef), target, dotTransition);
+                    dotControl = runMotion(motionRef, readMotionState(motionRef), target, transition);
                 });
                 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
                     dotControl?.stop();
                 });
                 return (()=>{
-                    var _el$8 = ColorWheelFlower_tmpl$2(), _el$9 = _el$8.firstChild, _el$0 = _el$9.firstChild, _el$1 = _el$0.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.addEventListener("blur", ()=>{
+                    }, _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$10.addEventListener("pointerleave", ()=>{
+                        if (!context.disabled()) setPressedIndex(null);
+                    });
+                    _el$10.$$pointerup = ()=>{
+                        if (!context.disabled()) setPressedIndex(null);
+                    };
+                    _el$10.$$pointerdown = ()=>{
+                        if (!context.disabled()) setPressedIndex(index());
+                    };
+                    _el$10.addEventListener("blur", ()=>{
                         if (!context.disabled()) setHoveredIndex(null);
                     });
-                    _el$0.addEventListener("focus", ()=>{
+                    _el$10.addEventListener("focus", ()=>{
                         if (!context.disabled()) setHoveredIndex(index());
                     });
-                    _el$0.addEventListener("mouseleave", ()=>{
+                    _el$10.addEventListener("mouseleave", ()=>{
                         if (!context.disabled()) setHoveredIndex(null);
                     });
-                    _el$0.addEventListener("mouseenter", ()=>{
+                    _el$10.addEventListener("mouseenter", ()=>{
                         if (!context.disabled()) setHoveredIndex(index());
                     });
-                    _el$0.$$click = ()=>handleDotClick(index());
-                    _el$0.style.setProperty("box-shadow", "0 2px 8px rgba(0,0,0,0.3)");
-                    _el$1.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$3 = `calc(50% + ${item.offsetX}px)`, _v$4 = `calc(50% + ${item.offsetY}px)`, _v$5 = context.disabled() ? -1 : 0, _v$6 = 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$7 = item.rgb, _v$8 = `Select color ${item.rgb}`, _v$9 = selectedIndex() === index(), _v$0 = clsx("absolute inset-0 rounded-full border-2 border-white", "transition-opacity duration-300 ease-out"), _v$1 = selectedIndex() === index() ? "1" : "0";
-                        _v$3 !== _p$.e && (null != (_p$.e = _v$3) ? _el$8.style.setProperty("left", _v$3) : _el$8.style.removeProperty("left"));
-                        _v$4 !== _p$.t && (null != (_p$.t = _v$4) ? _el$8.style.setProperty("top", _v$4) : _el$8.style.removeProperty("top"));
-                        _v$5 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$0, "tabindex", _p$.a = _v$5);
-                        _v$6 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$0, _p$.o = _v$6);
-                        _v$7 !== _p$.i && (null != (_p$.i = _v$7) ? _el$0.style.setProperty("background", _v$7) : _el$0.style.removeProperty("background"));
-                        _v$8 !== _p$.n && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$0, "aria-label", _p$.n = _v$8);
-                        _v$9 !== _p$.s && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$0, "aria-pressed", _p$.s = _v$9);
-                        _v$0 !== _p$.h && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$1, _p$.h = _v$0);
-                        _v$1 !== _p$.r && (null != (_p$.r = _v$1) ? _el$1.style.setProperty("opacity", _v$1) : _el$1.style.removeProperty("opacity"));
+                        }), _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$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,
@@ -7433,27 +7559,36 @@ const ColorWheelFlower = (props)=>{
                         n: void 0,
                         s: void 0,
                         h: void 0,
-                        r: void 0
+                        r: void 0,
+                        d: void 0,
+                        l: void 0,
+                        u: void 0,
+                        c: void 0
                     });
                     return _el$8;
                 })();
             }
         }));
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-            var _v$ = containerClasses(), _v$2 = outerRingBackground();
+            var _v$ = containerClasses(), _v$2 = outerRingBackground(), _v$3 = outerRingGlow();
             _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
             _v$2 !== _p$.t && (null != (_p$.t = _v$2) ? _el$4.style.setProperty("background", _v$2) : _el$4.style.removeProperty("background"));
+            _v$3 !== _p$.a && (null != (_p$.a = _v$3) ? _el$4.style.setProperty("box-shadow", _v$3) : _el$4.style.removeProperty("box-shadow"));
             return _p$;
         }, {
             e: void 0,
-            t: void 0
+            t: void 0,
+            a: void 0
         });
         return _el$;
     })();
 };
 const colorpicker_ColorWheelFlower = ColorWheelFlower;
 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
-    "click"
+    "mousemove",
+    "click",
+    "pointerdown",
+    "pointerup"
 ]);
 const ColorPickerFlowerSelector_ColorPickerFlowerSelector = ()=>[
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(colorpicker_ColorWheelFlower, {}),

package/package.json

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