@pathscale/ui 0.0.148 → 0.0.150

package/dist/index.js

@@ -10420,80 +10420,55 @@ function mapRange(value, inMin, inMax, outMin, outMax) {
     const t = Math.max(0, Math.min(1, (value - inMin) / (inMax - inMin)));
     return outMin + t * (outMax - outMin);
 }
-const TOOLTIP_POS = {
-    top: "absolute -top-8 left-1/2 -translate-x-1/2",
-    bottom: "absolute -bottom-8 left-1/2 -translate-x-1/2",
-    left: "absolute top-1/2 -translate-y-1/2 right-full mr-2",
-    right: "absolute top-1/2 -translate-y-1/2 left-full ml-2"
+const TOOLTIP_OFFSET = 8;
+function computeTooltipPos(rect, dir) {
+    const cx = rect.left + rect.width / 2;
+    const cy = rect.top + rect.height / 2;
+    switch(dir){
+        case "top":
+            return {
+                left: `${cx}px`,
+                top: `${rect.top - TOOLTIP_OFFSET}px`
+            };
+        case "bottom":
+            return {
+                left: `${cx}px`,
+                top: `${rect.bottom + TOOLTIP_OFFSET}px`
+            };
+        case "left":
+            return {
+                left: `${rect.left - TOOLTIP_OFFSET}px`,
+                top: `${cy}px`
+            };
+        case "right":
+            return {
+                left: `${rect.right + TOOLTIP_OFFSET}px`,
+                top: `${cy}px`
+            };
+    }
+}
+const TOOLTIP_TRANSFORM = {
+    top: "translate(-50%, -100%)",
+    bottom: "translate(-50%, 0)",
+    left: "translate(-100%, -50%)",
+    right: "translate(0, -50%)"
 };
 const FloatingDock_DockItem = (props)=>{
     let wrapRef;
     let iconRef;
     const [hovered, setHovered] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const [tooltipStyle, setTooltipStyle] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)({
+        top: "0",
+        left: "0"
+    });
     const cfg = props.cfg;
-    const sW = createSpring(cfg.baseSize, cfg.springOpts);
-    const sH = createSpring(cfg.baseSize, cfg.springOpts);
-    const sIW = createSpring(cfg.iconSize, cfg.springOpts);
-    const sIH = createSpring(cfg.iconSize, cfg.springOpts);
-    let rafId;
-    let prevTime = 0;
-    let lastMousePos = 1 / 0;
-    let loopRunning = false;
-    const startLoop = ()=>{
-        if (loopRunning || !cfg.magnify) return;
-        loopRunning = true;
-        prevTime = 0;
-        rafId = requestAnimationFrame(tick);
-    };
-    const stopLoop = ()=>{
-        if (void 0 !== rafId) cancelAnimationFrame(rafId);
-        rafId = void 0;
-        loopRunning = false;
-    };
-    const tick = (time)=>{
-        const dt = prevTime ? Math.min((time - prevTime) / 1000, 0.05) : 1 / 60;
-        prevTime = time;
-        const mp = props.mousePos();
-        if (mp !== lastMousePos) {
-            lastMousePos = mp;
-            if (wrapRef) {
-                const b = wrapRef.getBoundingClientRect();
-                const isH = "horizontal" === cfg.orientation;
-                const center = isH ? b.x + b.width / 2 : b.y + b.height / 2;
-                const dist = Math.abs(mp - center);
-                const ts = mp === 1 / 0 ? cfg.baseSize : mapRange(dist, 0, cfg.magnifyRange, cfg.hoverSize, cfg.baseSize);
-                const ti = mp === 1 / 0 ? cfg.iconSize : mapRange(dist, 0, cfg.magnifyRange, cfg.hoverIconSize, cfg.iconSize);
-                sW.set(ts);
-                sH.set(ts);
-                sIW.set(ti);
-                sIH.set(ti);
-            }
-        }
-        sW.step(dt);
-        sH.step(dt);
-        sIW.step(dt);
-        sIH.step(dt);
-        if (wrapRef) {
-            wrapRef.style.width = `${sW.get()}px`;
-            wrapRef.style.height = `${sH.get()}px`;
-        }
-        if (iconRef) {
-            iconRef.style.width = `${sIW.get()}px`;
-            iconRef.style.height = `${sIH.get()}px`;
-        }
-        if (sW.settled() && sH.settled() && sIW.settled() && sIH.settled()) return void stopLoop();
-        rafId = requestAnimationFrame(tick);
-    };
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
-        if (!cfg.magnify) return;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
-            props.mousePos();
-            startLoop();
-        });
-    });
-    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
-        stopLoop();
+        if (wrapRef && iconRef) props.registerRefs(wrapRef, iconRef);
     });
+    const handleMouseEnter = ()=>{
+        if (wrapRef) setTooltipStyle(computeTooltipPos(wrapRef.getBoundingClientRect(), cfg.tooltipDir));
+        setHovered(true);
+    };
     const handleClick = (e)=>{
         if (props.item.onClick) {
             e.preventDefault();
@@ -10503,10 +10478,7 @@ const FloatingDock_DockItem = (props)=>{
     const inner = (()=>{
         var _el$ = FloatingDock_tmpl$2(), _el$3 = _el$.firstChild;
         _el$.addEventListener("mouseleave", ()=>setHovered(false));
-        _el$.addEventListener("mouseenter", ()=>{
-            setHovered(true);
-            startLoop();
-        });
+        _el$.addEventListener("mouseenter", handleMouseEnter);
         var _ref$ = wrapRef;
         "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : wrapRef = _el$;
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
@@ -10514,20 +10486,36 @@ const FloatingDock_DockItem = (props)=>{
                 return hovered();
             },
             get children () {
-                var _el$2 = FloatingDock_tmpl$();
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>props.item.title);
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, twMerge(TOOLTIP_POS[cfg.tooltipDir], "w-fit rounded-md border border-base-300 bg-base-100 px-2 py-0.5 text-xs whitespace-pre text-base-content animate-fade-in z-50", cfg.tooltipClass)));
-                return _el$2;
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Portal, {
+                    get children () {
+                        var _el$2 = FloatingDock_tmpl$();
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>props.item.title);
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                            var _v$ = twMerge("fixed w-fit rounded-md border border-base-300 bg-base-100 px-2 py-0.5 text-xs whitespace-pre text-base-content animate-fade-in z-[9999] pointer-events-none", cfg.tooltipClass), _v$2 = tooltipStyle().top, _v$3 = tooltipStyle().left, _v$4 = TOOLTIP_TRANSFORM[cfg.tooltipDir];
+                            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.e = _v$);
+                            _v$2 !== _p$.t && (null != (_p$.t = _v$2) ? _el$2.style.setProperty("top", _v$2) : _el$2.style.removeProperty("top"));
+                            _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("transform", _v$4) : _el$2.style.removeProperty("transform"));
+                            return _p$;
+                        }, {
+                            e: void 0,
+                            t: void 0,
+                            a: void 0,
+                            o: void 0
+                        });
+                        return _el$2;
+                    }
+                });
             }
         }), _el$3);
         var _ref$2 = iconRef;
         "function" == typeof _ref$2 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$2, _el$3) : iconRef = _el$3;
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>props.item.icon);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-            var _v$ = twMerge("relative flex items-center justify-center rounded-full bg-base-200 transition-[opacity,transform] duration-150 hover:opacity-100 active:scale-90 active:duration-75", "opacity-80", cfg.itemClass), _v$2 = `${cfg.baseSize}px`, _v$3 = `${cfg.baseSize}px`;
-            _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$.style.setProperty("width", _v$2) : _el$.style.removeProperty("width"));
-            _v$3 !== _p$.a && (null != (_p$.a = _v$3) ? _el$.style.setProperty("height", _v$3) : _el$.style.removeProperty("height"));
+            var _v$5 = twMerge("relative flex items-center justify-center rounded-full bg-base-200 transition-[opacity,transform] duration-150 hover:opacity-100 active:scale-90 active:duration-75", "opacity-80", cfg.itemClass), _v$6 = `${cfg.baseSize}px`, _v$7 = `${cfg.baseSize}px`;
+            _v$5 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$5);
+            _v$6 !== _p$.t && (null != (_p$.t = _v$6) ? _el$.style.setProperty("width", _v$6) : _el$.style.removeProperty("width"));
+            _v$7 !== _p$.a && (null != (_p$.a = _v$7) ? _el$.style.setProperty("height", _v$7) : _el$.style.removeProperty("height"));
             return _p$;
         }, {
             e: void 0,
@@ -10550,9 +10538,9 @@ const FloatingDock_DockItem = (props)=>{
                     var _el$5 = FloatingDock_tmpl$4();
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, inner);
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-                        var _v$4 = props.item.href, _v$5 = props.item.title;
-                        _v$4 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "href", _p$.e = _v$4);
-                        _v$5 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "aria-label", _p$.t = _v$5);
+                        var _v$8 = props.item.href, _v$9 = props.item.title;
+                        _v$8 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "href", _p$.e = _v$8);
+                        _v$9 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "aria-label", _p$.t = _v$9);
                         return _p$;
                     }, {
                         e: void 0,
@@ -10574,6 +10562,82 @@ const FloatingDock_DockItem = (props)=>{
 const FloatingDockDesktop = (props)=>{
     const [mousePos, setMousePos] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(1 / 0);
     const isH = ()=>"horizontal" === props.cfg.orientation;
+    const cfg = props.cfg;
+    const itemSprings = [];
+    let rafId;
+    let prevTime = 0;
+    let lastMousePos = 1 / 0;
+    let loopRunning = false;
+    const startLoop = ()=>{
+        if (loopRunning || !cfg.magnify) return;
+        loopRunning = true;
+        prevTime = 0;
+        rafId = requestAnimationFrame(tick);
+    };
+    const stopLoop = ()=>{
+        if (void 0 !== rafId) cancelAnimationFrame(rafId);
+        rafId = void 0;
+        loopRunning = false;
+    };
+    const tick = (time)=>{
+        const dt = prevTime ? Math.min((time - prevTime) / 1000, 0.05) : 1 / 60;
+        prevTime = time;
+        const mp = mousePos();
+        if (mp !== lastMousePos) {
+            lastMousePos = mp;
+            const centers = [];
+            for(let i = 0; i < itemSprings.length; i++){
+                const wrap = itemSprings[i].wrapRef;
+                if (wrap) {
+                    const b = wrap.getBoundingClientRect();
+                    centers[i] = isH() ? b.x + b.width / 2 : b.y + b.height / 2;
+                } else centers[i] = 0;
+            }
+            for(let i = 0; i < itemSprings.length; i++){
+                const s = itemSprings[i];
+                if (!s.wrapRef) continue;
+                const dist = Math.abs(mp - centers[i]);
+                const ts = mp === 1 / 0 ? cfg.baseSize : mapRange(dist, 0, cfg.magnifyRange, cfg.hoverSize, cfg.baseSize);
+                const ti = mp === 1 / 0 ? cfg.iconSize : mapRange(dist, 0, cfg.magnifyRange, cfg.hoverIconSize, cfg.iconSize);
+                s.sW.set(ts);
+                s.sH.set(ts);
+                s.sIW.set(ti);
+                s.sIH.set(ti);
+            }
+        }
+        let allSettled = true;
+        for(let i = 0; i < itemSprings.length; i++){
+            const s = itemSprings[i];
+            s.sW.step(dt);
+            s.sH.step(dt);
+            s.sIW.step(dt);
+            s.sIH.step(dt);
+            if (allSettled && !(s.sW.settled() && s.sH.settled() && s.sIW.settled() && s.sIH.settled())) allSettled = false;
+        }
+        for(let i = 0; i < itemSprings.length; i++){
+            const s = itemSprings[i];
+            if (s.wrapRef) {
+                s.wrapRef.style.width = `${s.sW.get()}px`;
+                s.wrapRef.style.height = `${s.sH.get()}px`;
+            }
+            if (s.iconRef) {
+                s.iconRef.style.width = `${s.sIW.get()}px`;
+                s.iconRef.style.height = `${s.sIH.get()}px`;
+            }
+        }
+        if (allSettled) return void stopLoop();
+        rafId = requestAnimationFrame(tick);
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+        if (!cfg.magnify) return;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+            mousePos();
+            startLoop();
+        });
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        stopLoop();
+    });
     return (()=>{
         var _el$6 = FloatingDock_tmpl$5();
         _el$6.addEventListener("mouseleave", ()=>setMousePos(1 / 0));
@@ -10582,28 +10646,38 @@ const FloatingDockDesktop = (props)=>{
             get each () {
                 return props.items;
             },
-            children: (item)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FloatingDock_DockItem, {
+            children: (item, idx)=>{
+                const springs = {
+                    sW: createSpring(cfg.baseSize, cfg.springOpts),
+                    sH: createSpring(cfg.baseSize, cfg.springOpts),
+                    sIW: createSpring(cfg.iconSize, cfg.springOpts),
+                    sIH: createSpring(cfg.iconSize, cfg.springOpts)
+                };
+                itemSprings[idx()] = springs;
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FloatingDock_DockItem, {
                     item: item,
-                    mousePos: mousePos,
-                    get cfg () {
-                        return props.cfg;
+                    cfg: cfg,
+                    registerRefs: (wrap, icon)=>{
+                        springs.wrapRef = wrap;
+                        springs.iconRef = icon;
                     }
-                })
+                });
+            }
         }));
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-            var _v$6 = twMerge("mx-auto", "items-center", props.showContainer && "rounded-2xl bg-base-100 shadow-[0px_1px_0px_0px_var(--color-base-300)_inset,0px_1px_0px_0px_var(--color-base-100)]", isH() && props.showContainer && "px-4 py-2", !isH() && props.showContainer && "py-4 px-2", props.class), _v$7 = {
+            var _v$0 = twMerge("mx-auto", "items-center", props.showContainer && "rounded-2xl bg-base-100 shadow-[0px_1px_0px_0px_var(--color-base-300)_inset,0px_1px_0px_0px_var(--color-base-100)]", isH() && props.showContainer && "px-4 py-2", !isH() && props.showContainer && "py-4 px-2", props.class), _v$1 = {
                 display: "flex",
                 "flex-direction": isH() ? "row" : "column",
-                gap: `${props.cfg.gap}px`,
+                gap: `${cfg.gap}px`,
                 ...isH() ? {
-                    height: `${props.cfg.baseSize + 16}px`
+                    height: `${cfg.baseSize + 16}px`
                 } : {
-                    width: `${props.cfg.baseSize + 16}px`
+                    width: `${cfg.baseSize + 16}px`
                 },
                 overflow: "visible"
             };
-            _v$6 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$6, _p$.e = _v$6);
-            _p$.t = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$6, _v$7, _p$.t);
+            _v$0 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$6, _p$.e = _v$0);
+            _p$.t = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$6, _v$1, _p$.t);
             return _p$;
         }, {
             e: void 0,
@@ -10656,10 +10730,10 @@ const FloatingDockMobile = (props)=>{
                                                 var _el$11 = _tmpl$0();
                                                 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$11, ()=>item.icon);
                                                 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-                                                    var _v$16 = `${props.cfg.baseSize}px`, _v$17 = `${props.cfg.baseSize}px`, _v$18 = item.title;
-                                                    _v$16 !== _p$.e && (null != (_p$.e = _v$16) ? _el$11.style.setProperty("width", _v$16) : _el$11.style.removeProperty("width"));
-                                                    _v$17 !== _p$.t && (null != (_p$.t = _v$17) ? _el$11.style.setProperty("height", _v$17) : _el$11.style.removeProperty("height"));
-                                                    _v$18 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$11, "title", _p$.a = _v$18);
+                                                    var _v$20 = `${props.cfg.baseSize}px`, _v$21 = `${props.cfg.baseSize}px`, _v$22 = item.title;
+                                                    _v$20 !== _p$.e && (null != (_p$.e = _v$20) ? _el$11.style.setProperty("width", _v$20) : _el$11.style.removeProperty("width"));
+                                                    _v$21 !== _p$.t && (null != (_p$.t = _v$21) ? _el$11.style.setProperty("height", _v$21) : _el$11.style.removeProperty("height"));
+                                                    _v$22 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$11, "title", _p$.a = _v$22);
                                                     return _p$;
                                                 }, {
                                                     e: void 0,
@@ -10673,11 +10747,11 @@ const FloatingDockMobile = (props)=>{
                                             var _el$10 = _tmpl$9();
                                             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$10, ()=>item.icon);
                                             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-                                                var _v$12 = item.href, _v$13 = `${props.cfg.baseSize}px`, _v$14 = `${props.cfg.baseSize}px`, _v$15 = item.title;
-                                                _v$12 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "href", _p$.e = _v$12);
-                                                _v$13 !== _p$.t && (null != (_p$.t = _v$13) ? _el$10.style.setProperty("width", _v$13) : _el$10.style.removeProperty("width"));
-                                                _v$14 !== _p$.a && (null != (_p$.a = _v$14) ? _el$10.style.setProperty("height", _v$14) : _el$10.style.removeProperty("height"));
-                                                _v$15 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "title", _p$.o = _v$15);
+                                                var _v$16 = item.href, _v$17 = `${props.cfg.baseSize}px`, _v$18 = `${props.cfg.baseSize}px`, _v$19 = item.title;
+                                                _v$16 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "href", _p$.e = _v$16);
+                                                _v$17 !== _p$.t && (null != (_p$.t = _v$17) ? _el$10.style.setProperty("width", _v$17) : _el$10.style.removeProperty("width"));
+                                                _v$18 !== _p$.a && (null != (_p$.a = _v$18) ? _el$10.style.setProperty("height", _v$18) : _el$10.style.removeProperty("height"));
+                                                _v$19 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "title", _p$.o = _v$19);
                                                 return _p$;
                                             }, {
                                                 e: void 0,
@@ -10694,10 +10768,10 @@ const FloatingDockMobile = (props)=>{
                                     _el$1.$$click = (e)=>handleItemClick(item, e);
                                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$1, ()=>item.icon);
                                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-                                        var _v$1 = `${props.cfg.baseSize}px`, _v$10 = `${props.cfg.baseSize}px`, _v$11 = item.title;
-                                        _v$1 !== _p$.e && (null != (_p$.e = _v$1) ? _el$1.style.setProperty("width", _v$1) : _el$1.style.removeProperty("width"));
-                                        _v$10 !== _p$.t && (null != (_p$.t = _v$10) ? _el$1.style.setProperty("height", _v$10) : _el$1.style.removeProperty("height"));
-                                        _v$11 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$1, "title", _p$.a = _v$11);
+                                        var _v$13 = `${props.cfg.baseSize}px`, _v$14 = `${props.cfg.baseSize}px`, _v$15 = item.title;
+                                        _v$13 !== _p$.e && (null != (_p$.e = _v$13) ? _el$1.style.setProperty("width", _v$13) : _el$1.style.removeProperty("width"));
+                                        _v$14 !== _p$.t && (null != (_p$.t = _v$14) ? _el$1.style.setProperty("height", _v$14) : _el$1.style.removeProperty("height"));
+                                        _v$15 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$1, "title", _p$.a = _v$15);
                                         return _p$;
                                     }, {
                                         e: void 0,
@@ -10718,10 +10792,10 @@ const FloatingDockMobile = (props)=>{
         _el$9.$$click = ()=>setOpen(!open());
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$9, ()=>props.toggleIcon ?? _tmpl$1());
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-            var _v$8 = twMerge("relative block md:hidden", props.class), _v$9 = `${props.cfg.baseSize}px`, _v$0 = `${props.cfg.baseSize}px`;
-            _v$8 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$7, _p$.e = _v$8);
-            _v$9 !== _p$.t && (null != (_p$.t = _v$9) ? _el$9.style.setProperty("width", _v$9) : _el$9.style.removeProperty("width"));
-            _v$0 !== _p$.a && (null != (_p$.a = _v$0) ? _el$9.style.setProperty("height", _v$0) : _el$9.style.removeProperty("height"));
+            var _v$10 = twMerge("relative block md:hidden", props.class), _v$11 = `${props.cfg.baseSize}px`, _v$12 = `${props.cfg.baseSize}px`;
+            _v$10 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$7, _p$.e = _v$10);
+            _v$11 !== _p$.t && (null != (_p$.t = _v$11) ? _el$9.style.setProperty("width", _v$11) : _el$9.style.removeProperty("width"));
+            _v$12 !== _p$.a && (null != (_p$.a = _v$12) ? _el$9.style.setProperty("height", _v$12) : _el$9.style.removeProperty("height"));
             return _p$;
         }, {
             e: void 0,

package/package.json

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