@pathscale/ui 2.5.0 → 2.6.1

package/dist/components/dock/Dock.generated.js

@@ -1,10 +1,10 @@
-import { Portal, createComponent, delegateEvents, effect, insert, mergeProps, setAttribute, spread, template, use } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { Portal, claimElement, createComponent, effect, insert, mergeProps, ref, setAttribute, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Dock.css";
-import { For, Show, createSignal, onCleanup, onMount, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { For, Show, createSignal, omit, onCleanup, onSettled } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import { CLASSES, componentRecipe } from "./Dock.recipe.js";
-var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<div><div>"), _tmpl$3 = /*#__PURE__*/ template("<button type=button>"), _tmpl$4 = /*#__PURE__*/ template("<a>"), _tmpl$5 = /*#__PURE__*/ template("<div role=toolbar aria-label=Actions>"), _tmpl$6 = /*#__PURE__*/ template("<div><button type=button>"), _tmpl$7 = /*#__PURE__*/ 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__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<div><div>"), _tmpl$3 = /*#__PURE__*/ template("<button>"), _tmpl$4 = /*#__PURE__*/ template("<a>"), _tmpl$5 = /*#__PURE__*/ template("<div><!><!>"), _tmpl$6 = /*#__PURE__*/ template("<div><button>"), _tmpl$7 = /*#__PURE__*/ template('<svg><path d="M4 6h16"></path><path d="M4 12h16"></path><path d="M4 18h16">');
 const prefersReducedMotion = "u" > typeof window && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 function createSpring(initial, opts = {}) {
     const mass = opts.mass ?? 1;
@@ -90,7 +90,7 @@ const __solidLayoutDockItem = (_stable, p)=>{
         left: "0"
     });
     const cfg = p.cfg;
-    onMount(()=>{
+    onSettled(()=>{
         if (wrapRef && iconRef) p.registerRefs(wrapRef, iconRef);
     });
     const handleMouseEnter = ()=>{
@@ -103,55 +103,54 @@ const __solidLayoutDockItem = (_stable, p)=>{
             p.item.onClick(e);
         }
     };
-    const inner = (()=>{
-        var _el$ = _tmpl$2(), _el$3 = _el$.firstChild;
-        _el$.addEventListener("mouseleave", ()=>setHovered(false));
-        _el$.addEventListener("mouseenter", handleMouseEnter);
-        var _ref$ = wrapRef;
-        "function" == typeof _ref$ ? use(_ref$, _el$) : wrapRef = _el$;
-        spread(_el$, mergeProps(()=>({
-                class: twMerge(CLASSES.item, cfg.itemClass)
-            }), {
-            get style () {
-                return {
-                    width: `${cfg.baseSize}px`,
-                    height: `${cfg.baseSize}px`
-                };
-            }
-        }), false, true);
-        insert(_el$, createComponent(Show, {
-            get when () {
-                return hovered();
-            },
-            get children () {
-                return createComponent(Portal, {
-                    get children () {
-                        var _el$2 = _tmpl$();
-                        spread(_el$2, mergeProps(()=>({
-                                class: twMerge(CLASSES.tooltip, cfg.tooltipClass)
-                            }), {
-                            get style () {
-                                return {
-                                    top: tooltipStyle().top,
-                                    left: tooltipStyle().left,
-                                    transform: TOOLTIP_TRANSFORM[cfg.tooltipDir]
-                                };
-                            }
-                        }), false, true);
-                        insert(_el$2, ()=>p.item.title);
-                        return _el$2;
-                    }
-                });
-            }
-        }), _el$3);
-        var _ref$2 = iconRef;
-        "function" == typeof _ref$2 ? use(_ref$2, _el$3) : iconRef = _el$3;
-        spread(_el$3, mergeProps(()=>({
-                class: CLASSES.icon
-            })), false, true);
-        insert(_el$3, ()=>p.item.icon);
-        return _el$;
-    })();
+    var _el$ = _tmpl$2(), _el$3 = _el$.firstChild;
+    var _ref$ = wrapRef;
+    "function" == typeof _ref$ || Array.isArray(_ref$) ? ref(()=>_ref$, _el$) : wrapRef = _el$;
+    spread(_el$, mergeProps({
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: ()=>setHovered(false)
+    }, ()=>({
+            class: twMerge(CLASSES.item, cfg.itemClass)
+        }), {
+        get style () {
+            return {
+                width: `${cfg.baseSize}px`,
+                height: `${cfg.baseSize}px`
+            };
+        }
+    }), true);
+    insert(_el$, createComponent(Show, {
+        get when () {
+            return hovered();
+        },
+        get children () {
+            return createComponent(Portal, {
+                get children () {
+                    var _el$2 = _tmpl$();
+                    spread(_el$2, mergeProps(()=>({
+                            class: twMerge(CLASSES.tooltip, cfg.tooltipClass)
+                        }), {
+                        get style () {
+                            return {
+                                top: tooltipStyle().top,
+                                left: tooltipStyle().left,
+                                transform: TOOLTIP_TRANSFORM[cfg.tooltipDir]
+                            };
+                        }
+                    }), true);
+                    insert(_el$2, ()=>p.item.title);
+                    return _el$2;
+                }
+            });
+        }
+    }), _el$3);
+    var _ref$2 = iconRef;
+    "function" == typeof _ref$2 || Array.isArray(_ref$2) ? ref(()=>_ref$2, _el$3) : iconRef = _el$3;
+    spread(_el$3, mergeProps(()=>({
+            class: CLASSES.icon
+        })), true);
+    insert(_el$3, ()=>p.item.icon);
+    const inner = _el$;
     return createComponent(Show, {
         get when () {
             return p.item.onClick;
@@ -164,15 +163,14 @@ const __solidLayoutDockItem = (_stable, p)=>{
                 fallback: inner,
                 get children () {
                     var _el$5 = _tmpl$4();
+                    claimElement(_el$5);
                     insert(_el$5, inner);
-                    effect((_p$)=>{
-                        var _v$ = p.item.href, _v$2 = p.item.title;
-                        _v$ !== _p$.e && setAttribute(_el$5, "href", _p$.e = _v$);
-                        _v$2 !== _p$.t && setAttribute(_el$5, "aria-label", _p$.t = _v$2);
-                        return _p$;
-                    }, {
-                        e: void 0,
-                        t: void 0
+                    effect(()=>({
+                            e: p.item.href,
+                            t: p.item.title
+                        }), ({ e, t }, _p$)=>{
+                        e !== _p$?.e && setAttribute(_el$5, "href", e);
+                        t !== _p$?.t && setAttribute(_el$5, "aria-label", t);
                     });
                     return _el$5;
                 }
@@ -180,14 +178,15 @@ const __solidLayoutDockItem = (_stable, p)=>{
         },
         get children () {
             var _el$4 = _tmpl$3();
-            _el$4.$$click = handleClick;
             spread(_el$4, mergeProps({
+                type: "button",
+                onClick: handleClick,
                 get ["aria-label"] () {
                     return p.item.title;
                 }
             }, ()=>({
                     class: CLASSES.buttonReset
-                })), false, true);
+                })), true);
             insert(_el$4, inner);
             return _el$4;
         }
@@ -304,69 +303,70 @@ const __solidLayoutDockDesktop = (_stable, p)=>{
     onCleanup(()=>{
         stopLoop();
     });
-    return (()=>{
-        var _el$6 = _tmpl$5();
-        _el$6.addEventListener("mouseleave", ()=>{
-            setMousePos(1 / 0);
-            startLoop();
-        });
-        _el$6.$$mousemove = (e)=>{
+    var _el$6 = _tmpl$5(), _el$8 = _el$6.firstChild, _el$9 = _el$8.nextSibling;
+    spread(_el$6, mergeProps({
+        role: "toolbar",
+        "aria-label": "Actions",
+        onMouseEnter: captureAnchors,
+        onMouseMove: (e)=>{
             setMousePos(isH() ? e.clientX : e.clientY);
             startLoop();
-        };
-        _el$6.addEventListener("mouseenter", captureAnchors);
-        spread(_el$6, mergeProps(()=>({
-                class: twMerge(CLASSES.bar, isH() ? CLASSES.barOrientation.horizontal : CLASSES.barOrientation.vertical, p.class)
-            }), {
-            get style () {
-                return {
-                    gap: `${cfg.gap}px`,
-                    padding: p.showContainer ? isH() ? "0.5rem 1rem" : "1rem 0.5rem" : void 0,
-                    ...isH() ? {
-                        height: `${cfg.baseSize + 16}px`
-                    } : {
-                        width: `${cfg.baseSize + 16}px`
-                    }
-                };
-            }
-        }), false, true);
-        insert(_el$6, createComponent(Show, {
-            get when () {
-                return p.showContainer;
-            },
-            get children () {
-                var _el$7 = _tmpl$();
-                var _ref$3 = bgRef;
-                "function" == typeof _ref$3 ? use(_ref$3, _el$7) : bgRef = _el$7;
-                spread(_el$7, mergeProps(()=>({
-                        class: CLASSES.bg
-                    })), false, false);
-                return _el$7;
-            }
-        }), null);
-        insert(_el$6, createComponent(For, {
-            get each () {
-                return p.items;
-            },
-            children: (item, idx)=>{
-                const springs = {
-                    sScale: createSpring(cfg.baseSize, cfg.springOpts),
-                    sIconScale: createSpring(cfg.iconSize, cfg.springOpts),
-                    sNudge: createSpring(0, cfg.springOpts)
-                };
-                itemSprings[idx()] = springs;
-                return createComponent(DockItem, {
-                    item: item,
-                    cfg: cfg,
-                    registerRefs: (wrap, icon)=>{
-                        springs.wrapRef = wrap;
-                        springs.iconRef = icon;
-                    }
-                });
-            }
-        }), null);
-        return _el$6;
-    })();
+        },
+        onMouseLeave: ()=>{
+            setMousePos(1 / 0);
+            startLoop();
+        }
+    }, ()=>({
+            class: twMerge(CLASSES.bar, isH() ? CLASSES.barOrientation.horizontal : CLASSES.barOrientation.vertical, p.class)
+        }), {
+        get style () {
+            return {
+                gap: `${cfg.gap}px`,
+                padding: p.showContainer ? isH() ? "0.5rem 1rem" : "1rem 0.5rem" : void 0,
+                ...isH() ? {
+                    height: `${cfg.baseSize + 16}px`
+                } : {
+                    width: `${cfg.baseSize + 16}px`
+                }
+            };
+        }
+    }), true);
+    insert(_el$6, createComponent(Show, {
+        get when () {
+            return p.showContainer;
+        },
+        get children () {
+            var _el$7 = _tmpl$();
+            var _ref$3 = bgRef;
+            "function" == typeof _ref$3 || Array.isArray(_ref$3) ? ref(()=>_ref$3, _el$7) : bgRef = _el$7;
+            spread(_el$7, mergeProps(()=>({
+                    class: CLASSES.bg
+                })), false);
+            return _el$7;
+        }
+    }), _el$8);
+    insert(_el$6, createComponent(For, {
+        get each () {
+            return p.items;
+        },
+        children: (item, idx)=>{
+            const springs = {
+                sScale: createSpring(cfg.baseSize, cfg.springOpts),
+                sIconScale: createSpring(cfg.iconSize, cfg.springOpts),
+                sNudge: createSpring(0, cfg.springOpts)
+            };
+            itemSprings[idx()] = springs;
+            return createComponent(DockItem, {
+                item: item,
+                cfg: cfg,
+                registerRefs: (wrap, icon)=>{
+                    springs.wrapRef = wrap;
+                    springs.iconRef = icon;
+                }
+            });
+        }
+    }), _el$9);
+    return _el$6;
 };
 const DockDesktop = defineComponent({
     recipe: componentRecipe,
@@ -382,141 +382,142 @@ const __solidLayoutDockMobile = (_stable, p)=>{
         }
         setOpen(false);
     };
-    return (()=>{
-        var _el$8 = _tmpl$6(), _el$0 = _el$8.firstChild;
-        spread(_el$8, mergeProps(()=>({
-                class: twMerge(CLASSES.mobile, p.class)
-            })), false, true);
-        insert(_el$8, createComponent(Show, {
-            get when () {
-                return open();
-            },
-            get children () {
-                var _el$9 = _tmpl$();
-                spread(_el$9, mergeProps(()=>({
-                        class: twMerge(CLASSES.mobilePopup, CLASSES.mobilePopupDirection[p.popupDirection])
-                    })), false, true);
-                insert(_el$9, createComponent(For, {
-                    get each () {
-                        return p.items;
-                    },
-                    children: (item, idx)=>(()=>{
-                            var _el$1 = _tmpl$();
-                            spread(_el$1, mergeProps(()=>({
-                                    class: CLASSES.mobileItem
-                                }), {
-                                get style () {
-                                    return {
-                                        "animation-delay": `${(p.items.length - 1 - idx()) * 0.05}s`
-                                    };
-                                }
-                            }), false, true);
-                            insert(_el$1, createComponent(Show, {
-                                get when () {
-                                    return item.onClick;
-                                },
-                                get fallback () {
-                                    return createComponent(Show, {
-                                        get when () {
-                                            return item.href;
-                                        },
-                                        get fallback () {
-                                            return (()=>{
-                                                var _el$12 = _tmpl$();
-                                                spread(_el$12, mergeProps(()=>({
-                                                        class: CLASSES.item
-                                                    }), {
-                                                    get style () {
-                                                        return {
-                                                            width: `${p.cfg.baseSize}px`,
-                                                            height: `${p.cfg.baseSize}px`
-                                                        };
-                                                    },
-                                                    get title () {
-                                                        return item.title;
-                                                    }
-                                                }), false, true);
-                                                insert(_el$12, ()=>item.icon);
-                                                return _el$12;
-                                            })();
-                                        },
-                                        get children () {
-                                            var _el$11 = _tmpl$4();
-                                            spread(_el$11, mergeProps({
-                                                get href () {
-                                                    return item.href;
-                                                }
-                                            }, ()=>({
-                                                    class: CLASSES.item
-                                                }), {
-                                                get style () {
-                                                    return {
-                                                        width: `${p.cfg.baseSize}px`,
-                                                        height: `${p.cfg.baseSize}px`
-                                                    };
-                                                },
-                                                get title () {
-                                                    return item.title;
-                                                }
-                                            }), false, true);
-                                            insert(_el$11, ()=>item.icon);
-                                            return _el$11;
-                                        }
-                                    });
-                                },
-                                get children () {
-                                    var _el$10 = _tmpl$3();
-                                    _el$10.$$click = (e)=>handleItemClick(item, e);
-                                    spread(_el$10, mergeProps(()=>({
-                                            class: CLASSES.mobileToggle
-                                        }), {
-                                        get style () {
-                                            return {
-                                                width: `${p.cfg.baseSize}px`,
-                                                height: `${p.cfg.baseSize}px`
-                                            };
-                                        },
-                                        get title () {
-                                            return item.title;
-                                        }
-                                    }), false, true);
-                                    insert(_el$10, ()=>item.icon);
-                                    return _el$10;
-                                }
-                            }));
-                            return _el$1;
-                        })()
-                }));
-                return _el$9;
-            }
-        }), _el$0);
-        _el$0.$$click = ()=>setOpen(!open());
-        spread(_el$0, mergeProps(()=>({
-                class: CLASSES.mobileToggle
-            }), {
-            get style () {
-                return {
-                    width: `${p.cfg.baseSize}px`,
-                    height: `${p.cfg.baseSize}px`
-                };
-            }
-        }), false, true);
-        insert(_el$0, ()=>p.toggleIcon ?? (()=>{
-                var _el$13 = _tmpl$7();
-                spread(_el$13, mergeProps(()=>({
-                        class: CLASSES.menuIcon
-                    }), {
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    "stroke-width": "2",
-                    "stroke-linecap": "round",
-                    "stroke-linejoin": "round"
-                }), true, true);
-                return _el$13;
-            })());
-        return _el$8;
-    })();
+    var _el$0 = _tmpl$6(), _el$10 = _el$0.firstChild;
+    spread(_el$0, mergeProps(()=>({
+            class: twMerge(CLASSES.mobile, p.class)
+        })), true);
+    insert(_el$0, createComponent(Show, {
+        get when () {
+            return open();
+        },
+        get children () {
+            var _el$1 = _tmpl$();
+            spread(_el$1, mergeProps(()=>({
+                    class: twMerge(CLASSES.mobilePopup, CLASSES.mobilePopupDirection[p.popupDirection])
+                })), true);
+            insert(_el$1, createComponent(For, {
+                get each () {
+                    return p.items;
+                },
+                children: (item, idx)=>(()=>{
+                        var _el$11 = _tmpl$();
+                        spread(_el$11, mergeProps(()=>({
+                                class: CLASSES.mobileItem
+                            }), {
+                            get style () {
+                                return {
+                                    "animation-delay": `${(p.items.length - 1 - idx()) * 0.05}s`
+                                };
+                            }
+                        }), true);
+                        insert(_el$11, createComponent(Show, {
+                            get when () {
+                                return item.onClick;
+                            },
+                            get fallback () {
+                                return createComponent(Show, {
+                                    get when () {
+                                        return item.href;
+                                    },
+                                    get fallback () {
+                                        var _el$14 = _tmpl$();
+                                        spread(_el$14, mergeProps(()=>({
+                                                class: CLASSES.item
+                                            }), {
+                                            get style () {
+                                                return {
+                                                    width: `${p.cfg.baseSize}px`,
+                                                    height: `${p.cfg.baseSize}px`
+                                                };
+                                            },
+                                            get title () {
+                                                return item.title;
+                                            }
+                                        }), true);
+                                        insert(_el$14, ()=>item.icon);
+                                        return _el$14;
+                                    },
+                                    get children () {
+                                        var _el$13 = _tmpl$4();
+                                        claimElement(_el$13);
+                                        spread(_el$13, mergeProps({
+                                            get href () {
+                                                return item.href;
+                                            }
+                                        }, ()=>({
+                                                class: CLASSES.item
+                                            }), {
+                                            get style () {
+                                                return {
+                                                    width: `${p.cfg.baseSize}px`,
+                                                    height: `${p.cfg.baseSize}px`
+                                                };
+                                            },
+                                            get title () {
+                                                return item.title;
+                                            }
+                                        }), true);
+                                        insert(_el$13, ()=>item.icon);
+                                        return _el$13;
+                                    }
+                                });
+                            },
+                            get children () {
+                                var _el$12 = _tmpl$3();
+                                spread(_el$12, mergeProps({
+                                    type: "button",
+                                    onClick: (e)=>handleItemClick(item, e)
+                                }, ()=>({
+                                        class: CLASSES.mobileToggle
+                                    }), {
+                                    get style () {
+                                        return {
+                                            width: `${p.cfg.baseSize}px`,
+                                            height: `${p.cfg.baseSize}px`
+                                        };
+                                    },
+                                    get title () {
+                                        return item.title;
+                                    }
+                                }), true);
+                                insert(_el$12, ()=>item.icon);
+                                return _el$12;
+                            }
+                        }));
+                        return _el$11;
+                    })()
+            }));
+            return _el$1;
+        }
+    }), _el$10);
+    spread(_el$10, mergeProps({
+        type: "button",
+        onClick: ()=>setOpen(!open())
+    }, ()=>({
+            class: CLASSES.mobileToggle
+        }), {
+        get style () {
+            return {
+                width: `${p.cfg.baseSize}px`,
+                height: `${p.cfg.baseSize}px`
+            };
+        }
+    }), true);
+    insert(_el$10, ()=>p.toggleIcon ?? (()=>{
+            var _el$15 = _tmpl$7();
+            spread(_el$15, mergeProps(()=>({
+                    class: CLASSES.menuIcon
+                }), {
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                "stroke-width": "2",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
+            }), true);
+            return _el$15;
+        })());
+    return _el$0;
 };
 const DockMobile = defineComponent({
     recipe: componentRecipe,
@@ -524,136 +525,106 @@ const DockMobile = defineComponent({
     embedded: true
 });
 const __solidLayoutDock = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "items",
-        "orientation",
-        "tooltipDirection",
-        "mobilePopupDirection",
-        "mobileMode",
-        "gap",
-        "baseSize",
-        "hoverSize",
-        "iconSize",
-        "hoverIconSize",
-        "magnifyRange",
-        "magnify",
-        "nudge",
-        "showDesktop",
-        "showMobile",
-        "showContainer",
-        "desktopClass",
-        "mobileClass",
-        "itemClass",
-        "tooltipClass",
-        "mobileToggleIcon",
-        "springMass",
-        "springStiffness",
-        "springDamping",
-        "class",
-        "dataTheme",
-        "style"
-    ]);
+    const others = omit(p, "items", "orientation", "tooltipDirection", "mobilePopupDirection", "mobileMode", "gap", "baseSize", "hoverSize", "iconSize", "hoverIconSize", "magnifyRange", "magnify", "nudge", "showDesktop", "showMobile", "showContainer", "desktopClass", "mobileClass", "itemClass", "tooltipClass", "mobileToggleIcon", "springMass", "springStiffness", "springDamping", "class", "dataTheme", "style");
     const cfg = ()=>({
-            baseSize: local.baseSize ?? 40,
-            hoverSize: local.hoverSize ?? 64,
-            iconSize: local.iconSize ?? 20,
-            hoverIconSize: local.hoverIconSize ?? 20,
-            magnifyRange: local.magnifyRange ?? 110,
-            magnify: true === local.magnify,
-            nudge: local.nudge ?? 20,
-            gap: local.gap ?? 8,
-            tooltipDir: local.tooltipDirection ?? "top",
-            orientation: local.orientation ?? "horizontal",
-            itemClass: local.itemClass,
-            tooltipClass: local.tooltipClass,
+            baseSize: p.baseSize ?? 40,
+            hoverSize: p.hoverSize ?? 64,
+            iconSize: p.iconSize ?? 20,
+            hoverIconSize: p.hoverIconSize ?? 20,
+            magnifyRange: p.magnifyRange ?? 110,
+            magnify: true === p.magnify,
+            nudge: p.nudge ?? 20,
+            gap: p.gap ?? 8,
+            tooltipDir: p.tooltipDirection ?? "top",
+            orientation: p.orientation ?? "horizontal",
+            itemClass: p.itemClass,
+            tooltipClass: p.tooltipClass,
             springOpts: {
-                mass: local.springMass ?? 0.1,
-                stiffness: local.springStiffness ?? 170,
-                damping: local.springDamping ?? 12
+                mass: p.springMass ?? 0.1,
+                stiffness: p.springStiffness ?? 170,
+                damping: p.springDamping ?? 12
             }
         });
-    return (()=>{
-        var _el$14 = _tmpl$();
-        spread(_el$14, mergeProps(()=>({
-                class: CLASSES.base
-            }), {
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }, others), false, true);
-        insert(_el$14, createComponent(Show, {
-            get when () {
-                return false !== local.showDesktop;
-            },
-            get children () {
-                return createComponent(DockDesktop, mergeProps({
-                    get items () {
-                        return local.items;
-                    }
-                }, ()=>({
-                        class: twMerge(local.class, local.desktopClass)
-                    }), {
-                    get cfg () {
-                        return cfg();
-                    },
-                    get showContainer () {
-                        return false !== local.showContainer;
-                    }
-                }));
-            }
-        }), null);
-        insert(_el$14, createComponent(Show, {
-            get when () {
-                return false !== local.showMobile;
-            },
-            get children () {
-                return createComponent(Show, {
-                    get when () {
-                        return "dock" !== local.mobileMode;
-                    },
-                    get fallback () {
-                        return createComponent(DockDesktop, mergeProps({
-                            get items () {
-                                return local.items;
-                            }
-                        }, ()=>({
-                                class: twMerge(CLASSES.barMobileDock, local.mobileClass)
-                            }), {
-                            get cfg () {
-                                return cfg();
-                            },
-                            get showContainer () {
-                                return false !== local.showContainer;
-                            }
-                        }));
-                    },
-                    get children () {
-                        return createComponent(DockMobile, mergeProps({
-                            get items () {
-                                return local.items;
-                            }
-                        }, ()=>({
-                                class: local.mobileClass
-                            }), {
-                            get toggleIcon () {
-                                return local.mobileToggleIcon;
-                            },
-                            get popupDirection () {
-                                return local.mobilePopupDirection ?? "top";
-                            },
-                            get cfg () {
-                                return cfg();
-                            }
-                        }));
-                    }
-                });
-            }
-        }), null);
-        return _el$14;
-    })();
+    var _el$16 = _tmpl$5(), _el$17 = _el$16.firstChild, _el$18 = _el$17.nextSibling;
+    spread(_el$16, mergeProps(()=>({
+            class: CLASSES.base
+        }), {
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }, others), true);
+    insert(_el$16, createComponent(Show, {
+        get when () {
+            return false !== p.showDesktop;
+        },
+        get children () {
+            return createComponent(DockDesktop, mergeProps({
+                get items () {
+                    return p.items;
+                }
+            }, ()=>({
+                    class: twMerge(p.class, p.desktopClass)
+                }), {
+                get cfg () {
+                    return cfg();
+                },
+                get showContainer () {
+                    return false !== p.showContainer;
+                }
+            }));
+        }
+    }), _el$17);
+    insert(_el$16, createComponent(Show, {
+        get when () {
+            return false !== p.showMobile;
+        },
+        get children () {
+            return createComponent(Show, {
+                get when () {
+                    return "dock" !== p.mobileMode;
+                },
+                get fallback () {
+                    return createComponent(DockDesktop, mergeProps({
+                        get items () {
+                            return p.items;
+                        }
+                    }, ()=>({
+                            class: twMerge(CLASSES.barMobileDock, p.mobileClass)
+                        }), {
+                        get cfg () {
+                            return cfg();
+                        },
+                        get showContainer () {
+                            return false !== p.showContainer;
+                        }
+                    }));
+                },
+                get children () {
+                    return createComponent(DockMobile, mergeProps({
+                        get items () {
+                            return p.items;
+                        }
+                    }, ()=>({
+                            class: p.mobileClass
+                        }), {
+                        get toggleIcon () {
+                            return p.mobileToggleIcon;
+                        },
+                        get popupDirection () {
+                            return p.mobilePopupDirection ?? "top";
+                        },
+                        get cfg () {
+                            return cfg();
+                        }
+                    }));
+                }
+            });
+        }
+    }), _el$18);
+    return _el$16;
 };
 const Dock = defineComponent({
     recipe: componentRecipe,
@@ -661,8 +632,4 @@ const Dock = defineComponent({
     embedded: true
 });
 const Dock_generated = Dock;
-delegateEvents([
-    "click",
-    "mousemove"
-]);
 export default Dock_generated;