@pathscale/ui 1.1.55 → 1.1.56

package/dist/components/floating-dock/FloatingDock.css

@@ -26,17 +26,14 @@
   }
 
   /* -------------------------------------------------------------------------------------------------
-   * Background panel — original soft-edge shape with a subtle glass treatment.
-   * Per customer feedback: keep the prior shape/borders, only add a glass feel.
+   * Background panel — stretches with magnified items
    * -----------------------------------------------------------------------------------------------*/
   .floating-dock__bg {
     position: absolute;
     inset: 0;
     z-index: -1;
     border-radius: 1rem;
-    background-color: color-mix(in srgb, var(--color-base-100) 55%, transparent);
-    backdrop-filter: blur(12px) saturate(160%);
-    -webkit-backdrop-filter: blur(12px) saturate(160%);
+    background-color: var(--color-base-100);
     box-shadow:
       inset 0 1px 0 0 var(--color-base-300),
       0 1px 0 0 var(--color-base-100);
@@ -44,7 +41,7 @@
   }
 
   /* -------------------------------------------------------------------------------------------------
-   * Item wrapper — original look: rounded pill, semi-opaque, hover bumps opacity.
+   * Item wrapper
    * -----------------------------------------------------------------------------------------------*/
   .floating-dock__item {
     position: relative;
@@ -52,7 +49,7 @@
     align-items: center;
     justify-content: center;
     border-radius: 9999px;
-    background-color: transparent;
+    background-color: var(--color-base-200);
     opacity: 0.8;
     transform-origin: bottom center;
     will-change: transform;
@@ -67,14 +64,6 @@
     opacity: 0.6;
   }
 
-  .floating-dock__button-reset {
-    appearance: none;
-    border: 0;
-    background: transparent;
-    padding: 0;
-    cursor: pointer;
-  }
-
   /* -------------------------------------------------------------------------------------------------
    * Icon container
    * -----------------------------------------------------------------------------------------------*/
@@ -97,9 +86,7 @@
     white-space: pre;
     border-radius: var(--radius-field, 0.375rem);
     border: 1px solid var(--color-base-300);
-    background-color: color-mix(in srgb, var(--color-base-100) 75%, transparent);
-    backdrop-filter: blur(8px) saturate(160%);
-    -webkit-backdrop-filter: blur(8px) saturate(160%);
+    background-color: var(--color-base-100);
     color: var(--color-base-content);
     padding: 0.125rem 0.5rem;
     font-size: 0.75rem;
@@ -166,22 +153,6 @@
     animation: floating-dock-fade-in 200ms ease forwards;
   }
 
-  .floating-dock__menu-icon {
-    width: 1.25rem;
-    height: 1.25rem;
-    color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
-  }
-
-  /* a11y */
-  @media (prefers-reduced-transparency: reduce) {
-    .floating-dock__bg,
-    .floating-dock__tooltip {
-      backdrop-filter: none;
-      -webkit-backdrop-filter: none;
-      background-color: var(--color-base-100);
-    }
-  }
-
   /* -------------------------------------------------------------------------------------------------
    * Responsive: hide desktop on small, mobile on large
    * -----------------------------------------------------------------------------------------------*/

package/dist/components/floating-dock/FloatingDock.js

@@ -2,8 +2,7 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./FloatingDock.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-import * as __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__ from "./FloatingDock.classes.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button type=button>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<a>"), _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>"), _tmpl$7 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg xmlns=http://www.w3.org/2000/svg><path d="M4 6h16"></path><path d="M4 12h16"></path><path d="M4 18h16">');
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div class=floating-dock__icon>"), _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">'), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<a>"), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div class=floating-dock__bg>"), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div role=toolbar aria-label=Actions>"), _tmpl$7 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><button type=button class=floating-dock__mobile-toggle>"), _tmpl$8 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button type=button class=floating-dock__mobile-toggle>"), _tmpl$9 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div class=floating-dock__mobile-item>"), _tmpl$0 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<a class=floating-dock__item>"), _tmpl$1 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div class=floating-dock__item>"), _tmpl$10 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg xmlns=http://www.w3.org/2000/svg class="h-5 w-5"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">'), _tmpl$11 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div class=floating-dock>");
 const prefersReducedMotion = "undefined" != typeof window && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 function createSpring(initial, opts = {}) {
     const mass = opts.mass ?? 1;
@@ -108,16 +107,6 @@ const DockItem = (props)=>{
         _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__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.item, cfg.itemClass)
-            }), {
-            get style () {
-                return {
-                    width: `${cfg.baseSize}px`,
-                    height: `${cfg.baseSize}px`
-                };
-            }
-        }), false, true);
         (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 hovered();
@@ -126,18 +115,20 @@ const DockItem = (props)=>{
                 return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Portal, {
                     get children () {
                         var _el$2 = _tmpl$();
-                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.tooltip, cfg.tooltipClass)
-                            }), {
-                            get style () {
-                                return {
-                                    top: tooltipStyle().top,
-                                    left: tooltipStyle().left,
-                                    transform: TOOLTIP_TRANSFORM[cfg.tooltipDir]
-                                };
-                            }
-                        }), false, true);
                         (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$ = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("floating-dock__tooltip", 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;
                     }
                 });
@@ -145,10 +136,18 @@ const DockItem = (props)=>{
         }), _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__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                class: __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.icon
-            })), false, true);
         (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$5 = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("floating-dock__item", 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,
+            t: void 0,
+            a: void 0
+        });
         return _el$;
     })();
     return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
@@ -165,9 +164,9 @@ const DockItem = (props)=>{
                     var _el$5 = _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$ = props.item.href, _v$2 = props.item.title;
-                        _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "href", _p$.e = _v$);
-                        _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "aria-label", _p$.t = _v$2);
+                        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,
@@ -180,14 +179,8 @@ const DockItem = (props)=>{
         get children () {
             var _el$4 = _tmpl$3();
             _el$4.$$click = handleClick;
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
-                get ["aria-label"] () {
-                    return props.item.title;
-                }
-            }, ()=>({
-                    class: __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.buttonReset
-                })), false, true);
             (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;
         }
     });
@@ -299,7 +292,7 @@ const FloatingDockDesktop = (props)=>{
         stopLoop();
     });
     return (()=>{
-        var _el$6 = _tmpl$5();
+        var _el$6 = _tmpl$6();
         _el$6.addEventListener("mouseleave", ()=>{
             setMousePos(1 / 0);
             startLoop();
@@ -309,32 +302,14 @@ const FloatingDockDesktop = (props)=>{
             startLoop();
         };
         _el$6.addEventListener("mouseenter", captureAnchors);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.bar, isH() ? __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.barOrientation.horizontal : __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.barOrientation.vertical, props.class)
-            }), {
-            get style () {
-                return {
-                    gap: `${cfg.gap}px`,
-                    padding: props.showContainer ? isH() ? "0.5rem 1rem" : "1rem 0.5rem" : void 0,
-                    ...isH() ? {
-                        height: `${cfg.baseSize + 16}px`
-                    } : {
-                        width: `${cfg.baseSize + 16}px`
-                    }
-                };
-            }
-        }), false, true);
         (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__.Show, {
             get when () {
                 return props.showContainer;
             },
             get children () {
-                var _el$7 = _tmpl$();
+                var _el$7 = _tmpl$5();
                 var _ref$3 = bgRef;
                 "function" == typeof _ref$3 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$3, _el$7) : bgRef = _el$7;
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                        class: __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.bg
-                    })), false, false);
                 return _el$7;
             }
         }), null);
@@ -359,9 +334,32 @@ const FloatingDockDesktop = (props)=>{
                 });
             }
         }), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$0 = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("floating-dock__bar", isH() ? "floating-dock__bar--horizontal" : "floating-dock__bar--vertical", props.class), _v$1 = {
+                gap: `${cfg.gap}px`,
+                padding: props.showContainer ? isH() ? "0.5rem 1rem" : "1rem 0.5rem" : void 0,
+                ...isH() ? {
+                    height: `${cfg.baseSize + 16}px`
+                } : {
+                    width: `${cfg.baseSize + 16}px`
+                }
+            };
+            _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,
+            t: void 0
+        });
         return _el$6;
     })();
 };
+const MOBILE_POPUP_CLASS = {
+    top: "floating-dock__mobile-popup--top",
+    bottom: "floating-dock__mobile-popup--bottom",
+    left: "floating-dock__mobile-popup--left",
+    right: "floating-dock__mobile-popup--right"
+};
 const FloatingDockMobile = (props)=>{
     const [open, setOpen] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
     const handleItemClick = (item, e)=>{
@@ -372,34 +370,19 @@ const FloatingDockMobile = (props)=>{
         setOpen(false);
     };
     return (()=>{
-        var _el$8 = _tmpl$6(), _el$0 = _el$8.firstChild;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$8, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.mobile, props.class)
-            })), false, true);
+        var _el$8 = _tmpl$7(), _el$0 = _el$8.firstChild;
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$8, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
             get when () {
                 return open();
             },
             get children () {
                 var _el$9 = _tmpl$();
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$9, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                        class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.mobilePopup, __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.mobilePopupDirection[props.popupDirection])
-                    })), false, true);
                 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$9, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
                     get each () {
                         return props.items;
                     },
                     children: (item, idx)=>(()=>{
-                            var _el$1 = _tmpl$();
-                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$1, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                                    class: __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.mobileItem
-                                }), {
-                                get style () {
-                                    return {
-                                        "animation-delay": `${(props.items.length - 1 - idx()) * 0.05}s`
-                                    };
-                                }
-                            }), false, true);
+                            var _el$1 = _tmpl$9();
                             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$1, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
                                 get when () {
                                     return item.onClick;
@@ -411,99 +394,85 @@ const FloatingDockMobile = (props)=>{
                                         },
                                         get fallback () {
                                             return (()=>{
-                                                var _el$12 = _tmpl$();
-                                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$12, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                                                        class: __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.item
-                                                    }), {
-                                                    get style () {
-                                                        return {
-                                                            width: `${props.cfg.baseSize}px`,
-                                                            height: `${props.cfg.baseSize}px`
-                                                        };
-                                                    },
-                                                    get title () {
-                                                        return item.title;
-                                                    }
-                                                }), false, true);
+                                                var _el$12 = _tmpl$1();
                                                 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$12, ()=>item.icon);
+                                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                                                    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$12.style.setProperty("width", _v$20) : _el$12.style.removeProperty("width"));
+                                                    _v$21 !== _p$.t && (null != (_p$.t = _v$21) ? _el$12.style.setProperty("height", _v$21) : _el$12.style.removeProperty("height"));
+                                                    _v$22 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$12, "title", _p$.a = _v$22);
+                                                    return _p$;
+                                                }, {
+                                                    e: void 0,
+                                                    t: void 0,
+                                                    a: void 0
+                                                });
                                                 return _el$12;
                                             })();
                                         },
                                         get children () {
-                                            var _el$11 = _tmpl$4();
-                                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$11, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
-                                                get href () {
-                                                    return item.href;
-                                                }
-                                            }, ()=>({
-                                                    class: __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.item
-                                                }), {
-                                                get style () {
-                                                    return {
-                                                        width: `${props.cfg.baseSize}px`,
-                                                        height: `${props.cfg.baseSize}px`
-                                                    };
-                                                },
-                                                get title () {
-                                                    return item.title;
-                                                }
-                                            }), false, true);
+                                            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 = 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$11, "href", _p$.e = _v$16);
+                                                _v$17 !== _p$.t && (null != (_p$.t = _v$17) ? _el$11.style.setProperty("width", _v$17) : _el$11.style.removeProperty("width"));
+                                                _v$18 !== _p$.a && (null != (_p$.a = _v$18) ? _el$11.style.setProperty("height", _v$18) : _el$11.style.removeProperty("height"));
+                                                _v$19 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$11, "title", _p$.o = _v$19);
+                                                return _p$;
+                                            }, {
+                                                e: void 0,
+                                                t: void 0,
+                                                a: void 0,
+                                                o: void 0
+                                            });
                                             return _el$11;
                                         }
                                     });
                                 },
                                 get children () {
-                                    var _el$10 = _tmpl$3();
+                                    var _el$10 = _tmpl$8();
                                     _el$10.$$click = (e)=>handleItemClick(item, e);
-                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$10, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                                            class: __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.mobileToggle
-                                        }), {
-                                        get style () {
-                                            return {
-                                                width: `${props.cfg.baseSize}px`,
-                                                height: `${props.cfg.baseSize}px`
-                                            };
-                                        },
-                                        get title () {
-                                            return item.title;
-                                        }
-                                    }), false, true);
                                     (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$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$10.style.setProperty("width", _v$13) : _el$10.style.removeProperty("width"));
+                                        _v$14 !== _p$.t && (null != (_p$.t = _v$14) ? _el$10.style.setProperty("height", _v$14) : _el$10.style.removeProperty("height"));
+                                        _v$15 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "title", _p$.a = _v$15);
+                                        return _p$;
+                                    }, {
+                                        e: void 0,
+                                        t: void 0,
+                                        a: void 0
+                                    });
                                     return _el$10;
                                 }
                             }));
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_$p)=>(_$p = `${(props.items.length - 1 - idx()) * 0.05}s`, _el$1.style.setProperty("animation-delay", _$p)));
                             return _el$1;
                         })()
                 }));
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$9, (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("floating-dock__mobile-popup", MOBILE_POPUP_CLASS[props.popupDirection])));
                 return _el$9;
             }
         }), _el$0);
         _el$0.$$click = ()=>setOpen(!open());
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$0, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                class: __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.mobileToggle
-            }), {
-            get style () {
-                return {
-                    width: `${props.cfg.baseSize}px`,
-                    height: `${props.cfg.baseSize}px`
-                };
-            }
-        }), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$0, ()=>props.toggleIcon ?? (()=>{
-                var _el$13 = _tmpl$7();
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$13, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                        class: __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.menuIcon
-                    }), {
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    "stroke-width": "2",
-                    "stroke-linecap": "round",
-                    "stroke-linejoin": "round"
-                }), true, true);
+                var _el$13 = _tmpl$10();
+                _el$13.style.setProperty("color", "color-mix(in oklab, var(--color-base-content) 60%, transparent)");
                 return _el$13;
             })());
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$10 = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("floating-dock__mobile", 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$8, _p$.e = _v$10);
+            _v$11 !== _p$.t && (null != (_p$.t = _v$11) ? _el$0.style.setProperty("width", _v$11) : _el$0.style.removeProperty("width"));
+            _v$12 !== _p$.a && (null != (_p$.a = _v$12) ? _el$0.style.setProperty("height", _v$12) : _el$0.style.removeProperty("height"));
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0,
+            a: void 0
+        });
         return _el$8;
     })();
 };
@@ -544,7 +513,7 @@ const FloatingDock = (rawProps)=>{
             iconSize: local.iconSize ?? 20,
             hoverIconSize: local.hoverIconSize ?? 20,
             magnifyRange: local.magnifyRange ?? 110,
-            magnify: true === local.magnify,
+            magnify: false !== local.magnify,
             nudge: local.nudge ?? 20,
             gap: local.gap ?? 8,
             tooltipDir: local.tooltipDirection ?? "top",
@@ -558,10 +527,8 @@ const FloatingDock = (rawProps)=>{
             }
         });
     return (()=>{
-        var _el$14 = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$14, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                class: __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.base
-            }), {
+        var _el$14 = _tmpl$11();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$14, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -574,20 +541,20 @@ const FloatingDock = (rawProps)=>{
                 return false !== local.showDesktop;
             },
             get children () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FloatingDockDesktop, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FloatingDockDesktop, {
                     get items () {
                         return local.items;
-                    }
-                }, ()=>({
-                        class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(local.class, local.className, local.desktopClass)
-                    }), {
+                    },
+                    get ["class"] () {
+                        return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(local.class, local.className, local.desktopClass);
+                    },
                     get cfg () {
                         return cfg();
                     },
                     get showContainer () {
                         return false !== local.showContainer;
                     }
-                }));
+                });
             }
         }), null);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$14, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
@@ -600,29 +567,29 @@ const FloatingDock = (rawProps)=>{
                         return "dock" !== local.mobileMode;
                     },
                     get fallback () {
-                        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FloatingDockDesktop, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+                        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FloatingDockDesktop, {
                             get items () {
                                 return local.items;
-                            }
-                        }, ()=>({
-                                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.barMobileDock, local.mobileClass)
-                            }), {
+                            },
+                            get ["class"] () {
+                                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("floating-dock__bar--mobile-dock", local.mobileClass);
+                            },
                             get cfg () {
                                 return cfg();
                             },
                             get showContainer () {
                                 return false !== local.showContainer;
                             }
-                        }));
+                        });
                     },
                     get children () {
-                        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FloatingDockMobile, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+                        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FloatingDockMobile, {
                             get items () {
                                 return local.items;
-                            }
-                        }, ()=>({
-                                class: local.mobileClass
-                            }), {
+                            },
+                            get ["class"] () {
+                                return local.mobileClass;
+                            },
                             get toggleIcon () {
                                 return local.mobileToggleIcon;
                             },
@@ -632,7 +599,7 @@ const FloatingDock = (rawProps)=>{
                             get cfg () {
                                 return cfg();
                             }
-                        }));
+                        });
                     }
                 });
             }

package/dist/components/footer/Footer.js

@@ -2,8 +2,8 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./footer.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
 import * as __WEBPACK_EXTERNAL_MODULE__FooterTitle_js_92d7fa24__ from "./FooterTitle.js";
-import * as __WEBPACK_EXTERNAL_MODULE__Footer_classes_js_eeb1cf63__ from "./Footer.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<footer>");
 const Footer = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -15,16 +15,21 @@ const Footer = (props)=>{
         "horizontal",
         "vertical"
     ]);
-    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Footer_classes_js_eeb1cf63__.CLASSES.base, local.center && __WEBPACK_EXTERNAL_MODULE__Footer_classes_js_eeb1cf63__.CLASSES.flag.center, local.horizontal && __WEBPACK_EXTERNAL_MODULE__Footer_classes_js_eeb1cf63__.CLASSES.flag.horizontal, local.vertical && __WEBPACK_EXTERNAL_MODULE__Footer_classes_js_eeb1cf63__.CLASSES.flag.vertical, local.class, local.className);
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("footer", local.class, local.className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])({
+            "footer-center": local.center,
+            "footer-horizontal": local.horizontal,
+            "footer-vertical": local.vertical
+        }));
     return (()=>{
         var _el$ = _tmpl$();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
             get ["data-theme"] () {
                 return local.dataTheme;
+            },
+            get ["class"] () {
+                return classes();
             }
-        }, ()=>({
-                class: classes()
-            })), false, true);
+        }), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
         return _el$;
     })();

package/dist/components/footer/FooterTitle.js

@@ -1,7 +1,6 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-import * as __WEBPACK_EXTERNAL_MODULE__Footer_classes_js_eeb1cf63__ from "./Footer.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<h6>");
 const FooterTitle = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -10,16 +9,17 @@ const FooterTitle = (props)=>{
         "className",
         "dataTheme"
     ]);
-    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Footer_classes_js_eeb1cf63__.CLASSES.title, local.class, local.className);
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("footer-title", local.class, local.className);
     return (()=>{
         var _el$ = _tmpl$();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
             get ["data-theme"] () {
                 return local.dataTheme;
+            },
+            get ["class"] () {
+                return classes();
             }
-        }, ()=>({
-                class: classes()
-            })), false, true);
+        }), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
         return _el$;
     })();