@pathscale/ui 0.0.143 → 0.0.144

package/dist/components/glass-panel/GlassPanel.d.ts

@@ -1,5 +1,5 @@
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps, ComponentSize } from "../types";
+import type { IComponentBaseProps, ComponentSize, ComponentColor } from "../types";
 export type GlassPanelBlur = "none" | "sm" | "md" | "lg" | "xl" | "2xl";
 export type GlassPanelProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLDivElement> & {
     blur?: GlassPanelBlur;
@@ -12,7 +12,7 @@ export type GlassPanelProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLDivEl
     size?: ComponentSize;
     transparent?: boolean;
     glow?: boolean;
-    accent?: "primary" | "secondary" | "accent" | "info" | "success" | "warning" | "error";
+    accent?: ComponentColor;
 };
 declare const GlassPanel: (props: GlassPanelProps) => JSX.Element;
 export default GlassPanel;

package/dist/index.js

@@ -10376,7 +10376,8 @@ const FileInput_FileInput = (props)=>{
     })();
 };
 const FileInput = FileInput_FileInput;
-var FloatingDock_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), FloatingDock_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div class="flex items-center justify-center shrink-0">'), FloatingDock_tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button type=button class="appearance-none bg-transparent border-0 p-0 cursor-pointer">'), FloatingDock_tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<a>"), FloatingDock_tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><button type=button class="flex items-center justify-center rounded-full bg-base-200 cursor-pointer border-0 p-0">'), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button type=button class="flex items-center justify-center rounded-full bg-base-100 cursor-pointer border-0 p-0">'), _tmpl$7 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div class=animate-fade-in>"), _tmpl$8 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<a class="flex items-center justify-center rounded-full bg-base-100">'), _tmpl$9 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="flex items-center justify-center rounded-full bg-base-100">'), _tmpl$0 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg xmlns=http://www.w3.org/2000/svg class="h-5 w-5 text-base-content/60"viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M4 6h16"></path><path d="M4 12h16"></path><path d="M4 18h16">');
+var FloatingDock_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), FloatingDock_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div class="flex items-center justify-center shrink-0">'), FloatingDock_tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button type=button class="appearance-none bg-transparent border-0 p-0 cursor-pointer">'), FloatingDock_tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<a>"), FloatingDock_tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div role=toolbar aria-label=Actions>"), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><button type=button class="flex items-center justify-center rounded-full bg-base-200 cursor-pointer border-0 p-0">'), _tmpl$7 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button type=button class="flex items-center justify-center rounded-full bg-base-100 cursor-pointer border-0 p-0">'), _tmpl$8 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div class=animate-fade-in>"), _tmpl$9 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<a class="flex items-center justify-center rounded-full bg-base-100">'), _tmpl$0 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="flex items-center justify-center rounded-full bg-base-100">'), _tmpl$1 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg xmlns=http://www.w3.org/2000/svg class="h-5 w-5 text-base-content/60"viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M4 6h16"></path><path d="M4 12h16"></path><path d="M4 18h16">');
+const FloatingDock_prefersReducedMotion = "undefined" != typeof window && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 function createSpring(initial, opts = {}) {
     const mass = opts.mass ?? 1;
     const stiffness = opts.stiffness ?? 150;
@@ -10391,7 +10392,19 @@ function createSpring(initial, opts = {}) {
         get () {
             return current;
         },
+        settled () {
+            return current === target && 0 === velocity;
+        },
+        snap () {
+            current = target;
+            velocity = 0;
+        },
         step (dt) {
+            if (FloatingDock_prefersReducedMotion) {
+                current = target;
+                velocity = 0;
+                return;
+            }
             const force = -stiffness * (current - target);
             const accel = (force - damping * velocity) / mass;
             velocity += accel * dt;
@@ -10425,45 +10438,57 @@ const FloatingDock_DockItem = (props)=>{
     let rafId;
     let prevTime = 0;
     let lastMousePos = 1 / 0;
-    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
-        if (!cfg.magnify) return;
-        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);
+    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) {
-                wrapRef.style.width = `${sW.get()}px`;
-                wrapRef.style.height = `${sH.get()}px`;
+                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);
             }
-            if (iconRef) {
-                iconRef.style.width = `${sIW.get()}px`;
-                iconRef.style.height = `${sIH.get()}px`;
-            }
-            rafId = requestAnimationFrame(tick);
-        };
+        }
+        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)(()=>{
+        startLoop();
     });
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
-        if (void 0 !== rafId) cancelAnimationFrame(rafId);
+        stopLoop();
     });
     const handleClick = (e)=>{
         if (props.item.onClick) {
@@ -10474,7 +10499,10 @@ 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));
+        _el$.addEventListener("mouseenter", ()=>{
+            setHovered(true);
+            startLoop();
+        });
         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, {
@@ -10517,7 +10545,15 @@ const FloatingDock_DockItem = (props)=>{
                 get children () {
                     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)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "href", props.item.href));
+                    (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);
+                        return _p$;
+                    }, {
+                        e: void 0,
+                        t: void 0
+                    });
                     return _el$5;
                 }
             });
@@ -10526,6 +10562,7 @@ const FloatingDock_DockItem = (props)=>{
             var _el$4 = FloatingDock_tmpl$3();
             _el$4.$$click = handleClick;
             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, inner);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$4, "aria-label", props.item.title));
             return _el$4;
         }
     });
@@ -10534,7 +10571,7 @@ const FloatingDockDesktop = (props)=>{
     const [mousePos, setMousePos] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(1 / 0);
     const isH = ()=>"horizontal" === props.cfg.orientation;
     return (()=>{
-        var _el$6 = FloatingDock_tmpl$();
+        var _el$6 = FloatingDock_tmpl$5();
         _el$6.addEventListener("mouseleave", ()=>setMousePos(1 / 0));
         _el$6.$$mousemove = (e)=>setMousePos(isH() ? e.clientX : e.clientY);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
@@ -10550,7 +10587,7 @@ const FloatingDockDesktop = (props)=>{
                 })
         }));
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-            var _v$4 = 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$5 = {
+            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 = {
                 display: "flex",
                 "flex-direction": isH() ? "row" : "column",
                 gap: `${props.cfg.gap}px`,
@@ -10561,8 +10598,8 @@ const FloatingDockDesktop = (props)=>{
                 },
                 overflow: "visible"
             };
-            _v$4 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$6, _p$.e = _v$4);
-            _p$.t = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$6, _v$5, _p$.t);
+            _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);
             return _p$;
         }, {
             e: void 0,
@@ -10587,7 +10624,7 @@ const FloatingDockMobile = (props)=>{
         setOpen(false);
     };
     return (()=>{
-        var _el$7 = FloatingDock_tmpl$5(), _el$9 = _el$7.firstChild;
+        var _el$7 = _tmpl$6(), _el$9 = _el$7.firstChild;
         (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__.Show, {
             get when () {
                 return open();
@@ -10599,7 +10636,7 @@ const FloatingDockMobile = (props)=>{
                         return props.items;
                     },
                     children: (item, idx)=>(()=>{
-                            var _el$0 = _tmpl$7();
+                            var _el$0 = _tmpl$8();
                             _el$0.style.setProperty("animation-fill-mode", "backwards");
                             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$0, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
                                 get when () {
@@ -10612,13 +10649,13 @@ const FloatingDockMobile = (props)=>{
                                         },
                                         get fallback () {
                                             return (()=>{
-                                                var _el$11 = _tmpl$9();
+                                                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$14 = `${props.cfg.baseSize}px`, _v$15 = `${props.cfg.baseSize}px`, _v$16 = item.title;
-                                                    _v$14 !== _p$.e && (null != (_p$.e = _v$14) ? _el$11.style.setProperty("width", _v$14) : _el$11.style.removeProperty("width"));
-                                                    _v$15 !== _p$.t && (null != (_p$.t = _v$15) ? _el$11.style.setProperty("height", _v$15) : _el$11.style.removeProperty("height"));
-                                                    _v$16 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$11, "title", _p$.a = _v$16);
+                                                    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);
                                                     return _p$;
                                                 }, {
                                                     e: void 0,
@@ -10629,14 +10666,14 @@ const FloatingDockMobile = (props)=>{
                                             })();
                                         },
                                         get children () {
-                                            var _el$10 = _tmpl$8();
+                                            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$10 = item.href, _v$11 = `${props.cfg.baseSize}px`, _v$12 = `${props.cfg.baseSize}px`, _v$13 = item.title;
-                                                _v$10 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "href", _p$.e = _v$10);
-                                                _v$11 !== _p$.t && (null != (_p$.t = _v$11) ? _el$10.style.setProperty("width", _v$11) : _el$10.style.removeProperty("width"));
-                                                _v$12 !== _p$.a && (null != (_p$.a = _v$12) ? _el$10.style.setProperty("height", _v$12) : _el$10.style.removeProperty("height"));
-                                                _v$13 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "title", _p$.o = _v$13);
+                                                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);
                                                 return _p$;
                                             }, {
                                                 e: void 0,
@@ -10649,14 +10686,14 @@ const FloatingDockMobile = (props)=>{
                                     });
                                 },
                                 get children () {
-                                    var _el$1 = _tmpl$6();
+                                    var _el$1 = _tmpl$7();
                                     _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$9 = `${props.cfg.baseSize}px`, _v$0 = `${props.cfg.baseSize}px`, _v$1 = item.title;
-                                        _v$9 !== _p$.e && (null != (_p$.e = _v$9) ? _el$1.style.setProperty("width", _v$9) : _el$1.style.removeProperty("width"));
-                                        _v$0 !== _p$.t && (null != (_p$.t = _v$0) ? _el$1.style.setProperty("height", _v$0) : _el$1.style.removeProperty("height"));
-                                        _v$1 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$1, "title", _p$.a = _v$1);
+                                        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);
                                         return _p$;
                                     }, {
                                         e: void 0,
@@ -10675,12 +10712,12 @@ const FloatingDockMobile = (props)=>{
             }
         }), _el$9);
         _el$9.$$click = ()=>setOpen(!open());
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$9, ()=>props.toggleIcon ?? _tmpl$0());
+        (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$6 = twMerge("relative block md:hidden", props.class), _v$7 = `${props.cfg.baseSize}px`, _v$8 = `${props.cfg.baseSize}px`;
-            _v$6 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$7, _p$.e = _v$6);
-            _v$7 !== _p$.t && (null != (_p$.t = _v$7) ? _el$9.style.setProperty("width", _v$7) : _el$9.style.removeProperty("width"));
-            _v$8 !== _p$.a && (null != (_p$.a = _v$8) ? _el$9.style.setProperty("height", _v$8) : _el$9.style.removeProperty("height"));
+            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"));
             return _p$;
         }, {
             e: void 0,
@@ -10742,6 +10779,9 @@ const FloatingDock = (rawProps)=>{
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$13, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
             get ["data-theme"] () {
                 return local.dataTheme;
+            },
+            get style () {
+                return local.style;
             }
         }, others), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$13, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
@@ -10797,7 +10837,7 @@ const floating_dock_FloatingDock = FloatingDock;
     "click",
     "mousemove"
 ]);
-var GlassPanel_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button type=button class="flex w-full items-center justify-between gap-2 px-4 py-3 text-sm font-medium cursor-pointer select-none transition-colors duration-150"><span class="flex items-center gap-2"></span><svg fill=none viewBox="0 0 24 24"stroke=currentColor stroke-width=1.5><path stroke-linecap=round stroke-linejoin=round d="M19 9l-7 7-7-7">'), GlassPanel_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+var GlassPanel_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button type=button class="flex w-full items-center justify-between gap-2 px-4 py-3 text-sm font-medium cursor-pointer select-none transition-colors duration-150 text-base-content/50 hover:text-base-content/80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="flex items-center gap-2"></span><svg fill=none viewBox="0 0 24 24"stroke=currentColor stroke-width=1.5><path stroke-linecap=round stroke-linejoin=round d="M19 9l-7 7-7-7">'), GlassPanel_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div class="grid transition-[grid-template-rows] duration-200 ease-in-out"><div>');
 const BLUR_MAP = {
     none: "",
     sm: "backdrop-blur-sm",
@@ -10820,7 +10860,9 @@ const ACCENT_BORDER = {
     info: "border-l-info",
     success: "border-l-success",
     warning: "border-l-warning",
-    error: "border-l-error"
+    error: "border-l-error",
+    neutral: "border-l-neutral",
+    ghost: "border-l-transparent"
 };
 const GlassPanel = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -10841,6 +10883,7 @@ const GlassPanel = (props)=>{
         "dataTheme",
         "style"
     ]);
+    const contentId = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)();
     const blur = ()=>local.blur ?? "none";
     const size = ()=>local.size ?? "md";
     const isControlled = ()=>void 0 !== local.open;
@@ -10868,12 +10911,9 @@ const GlassPanel = (props)=>{
         if (local.glow) base["box-shadow"] = "inset 0 1px 0 color-mix(in srgb, var(--color-base-content) 5%, transparent)";
         return base;
     };
-    const contentClasses = ()=>twMerge(SIZE_PADDING[size()], clsx({
-            "animate-collapse-open": local.collapsible && isOpen(),
-            "animate-collapse-close": local.collapsible && !isOpen()
-        }));
+    const contentClasses = ()=>twMerge(SIZE_PADDING[size()]);
     return (()=>{
-        var _el$ = GlassPanel_tmpl$2();
+        var _el$ = GlassPanel_tmpl$2(), _el$5 = _el$.firstChild, _el$6 = _el$5.firstChild;
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
             get ["class"] () {
                 return containerClasses();
@@ -10892,13 +10932,7 @@ const GlassPanel = (props)=>{
             get children () {
                 var _el$2 = GlassPanel_tmpl$(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
                 _el$2.$$click = handleToggle;
-                _el$2.addEventListener("mouseleave", (e)=>{
-                    e.currentTarget.style.color = "color-mix(in srgb, var(--color-base-content) 50%, transparent)";
-                });
-                _el$2.addEventListener("mouseenter", (e)=>{
-                    e.currentTarget.style.color = "color-mix(in srgb, var(--color-base-content) 80%, transparent)";
-                });
-                _el$2.style.setProperty("color", "color-mix(in srgb, var(--color-base-content) 50%, transparent)");
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "aria-controls", contentId);
                 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
                     get when () {
                         return local.icon;
@@ -10921,18 +10955,18 @@ const GlassPanel = (props)=>{
                 });
                 return _el$2;
             }
-        }), null);
-        (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, {
-            get when () {
-                return !local.collapsible || isOpen();
-            },
-            get children () {
-                var _el$5 = GlassPanel_tmpl$2();
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, ()=>local.children);
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$5, contentClasses()));
-                return _el$5;
-            }
-        }), null);
+        }), _el$5);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "id", contentId);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, ()=>local.children);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$3 = !local.collapsible || isOpen() ? "1fr" : "0fr", _v$4 = `overflow-hidden ${contentClasses()}`;
+            _v$3 !== _p$.e && (null != (_p$.e = _v$3) ? _el$5.style.setProperty("grid-template-rows", _v$3) : _el$5.style.removeProperty("grid-template-rows"));
+            _v$4 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$6, _p$.t = _v$4);
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0
+        });
         return _el$;
     })();
 };
@@ -16174,7 +16208,7 @@ const steps_Steps = Object.assign(Steps, {
     Step: steps_Step
 });
 const steps = steps_Steps;
-var SvgBackground_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><ellipse></svg>", false, true, false), SvgBackground_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle></svg>", false, true, false), SvgBackground_tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=0 cy=0 r=100 opacity=0.7></svg>", false, true, false), SvgBackground_tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=400 cy=0 r=120></svg>", false, true, false), SvgBackground_tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=0 cy=400 r=100 opacity=0.7></svg>", false, true, false), SvgBackground_tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=400 cy=400 r=120></svg>", false, true, false), SvgBackground_tmpl$7 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=0 cy=200 r=70 opacity=0.6></svg>", false, true, false), SvgBackground_tmpl$8 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=200 cy=0 r=100></svg>", false, true, false), SvgBackground_tmpl$9 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=400 cy=200 r=100></svg>", false, true, false), SvgBackground_tmpl$0 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=200 cy=400 r=100></svg>", false, true, false), _tmpl$1 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div class=hidden><svg viewBox="0 0 400 400"xmlns=http://www.w3.org/2000/svg><rect width=400 height=400></rect></svg></div><canvas></canvas><div class="relative z-10 h-full w-full">'), _tmpl$10 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="absolute inset-0 z-5">');
+var SvgBackground_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><ellipse></svg>", false, true, false), SvgBackground_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle></svg>", false, true, false), SvgBackground_tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=0 cy=0 r=100 opacity=0.7></svg>", false, true, false), SvgBackground_tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=400 cy=0 r=120></svg>", false, true, false), SvgBackground_tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=0 cy=400 r=100 opacity=0.7></svg>", false, true, false), SvgBackground_tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=400 cy=400 r=120></svg>", false, true, false), SvgBackground_tmpl$7 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=0 cy=200 r=70 opacity=0.6></svg>", false, true, false), SvgBackground_tmpl$8 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=200 cy=0 r=100></svg>", false, true, false), SvgBackground_tmpl$9 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=400 cy=200 r=100></svg>", false, true, false), SvgBackground_tmpl$0 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=200 cy=400 r=100></svg>", false, true, false), SvgBackground_tmpl$1 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div class=hidden><svg viewBox="0 0 400 400"xmlns=http://www.w3.org/2000/svg><rect width=400 height=400></rect></svg></div><canvas></canvas><div class="relative z-10 h-full w-full">'), _tmpl$10 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="absolute inset-0 z-5">');
 function SvgBackground_hexToRgb(hex) {
     hex = hex.replace(/^#/, "");
     const bigint = Number.parseInt(hex, 16);
@@ -16549,7 +16583,7 @@ function SvgBackground(props) {
         };
     };
     return (()=>{
-        var _el$14 = _tmpl$1(), _el$15 = _el$14.firstChild, _el$16 = _el$15.firstChild, _el$17 = _el$16.firstChild, _el$18 = _el$15.nextSibling, _el$19 = _el$18.nextSibling;
+        var _el$14 = SvgBackground_tmpl$1(), _el$15 = _el$14.firstChild, _el$16 = _el$15.firstChild, _el$17 = _el$16.firstChild, _el$18 = _el$15.nextSibling, _el$19 = _el$18.nextSibling;
         var _ref$ = containerRef;
         "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$14) : containerRef = _el$14;
         var _ref$2 = svgRef;

package/package.json

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