vlite3 0.6.7 → 0.6.9

package/components/Navbar/Navbar.vue.js

@@ -1,45 +1,60 @@
-import { defineComponent as Q, computed as b, ref as p, provide as X, useSlots as Z, onMounted as _, onUnmounted as ee, watch as D, openBlock as t, createElementBlock as r, renderSlot as o, unref as x, createCommentVNode as d, createElementVNode as a, createVNode as c, Transition as le, withCtx as g, withDirectives as se, normalizeStyle as oe, normalizeClass as n, Fragment as h, createBlock as y, resolveDynamicComponent as E, toDisplayString as I, vShow as te, createTextVNode as U } from "vue";
-import { useRoute as ae } from "vue-router";
-import { useLocalStorage as re, onClickOutside as ie, useBreakpoints as ne, breakpointsTailwind as de } from "@vueuse/core";
-import z from "../Icon.vue.js";
-import F from "../SidePanel.vue.js";
-import W from "../Logo.vue.js";
-import ue from "./NavbarTabs.vue.js";
+import { defineComponent as se, computed as b, ref as w, provide as oe, useSlots as te, onMounted as ae, onUnmounted as re, watch as W, openBlock as t, createElementBlock as a, createVNode as m, Transition as Y, withCtx as v, withDirectives as q, createElementVNode as r, normalizeClass as n, renderSlot as o, createCommentVNode as d, vShow as G, unref as c, createTextVNode as P, normalizeStyle as ie, Fragment as x, createBlock as $, resolveDynamicComponent as J, toDisplayString as K } from "vue";
+import { useRoute as ne } from "vue-router";
+import { useLocalStorage as de, onClickOutside as ue, useBreakpoints as fe, breakpointsTailwind as me } from "@vueuse/core";
+import B from "../Icon.vue.js";
+import R from "../SidePanel.vue.js";
+import Q from "../Logo.vue.js";
+import X from "./NavbarTabs.vue.js";
 /* empty css                */
-import fe from "../Breadcrumb/Breadcrumb.vue.js";
+import Z from "../Breadcrumb/Breadcrumb.vue.js";
 /* empty css                                */
-import { useBreadcrumb as me } from "../../composables/useBreadcrumb.js";
-const be = {
+import { useBreadcrumb as be } from "../../composables/useBreadcrumb.js";
+const ve = {
   key: 0,
+  class: "vlite-app-layout flex flex-row w-full h-full bg-body overflow-hidden"
+}, ce = { class: "flex flex-col flex-1 min-w-0 h-full overflow-hidden" }, ge = {
+  key: 0,
+  class: "w-full shrink-0 z-20 bg-background"
+}, pe = {
+  key: 1,
+  class: "flex-1 overflow-y-auto w-full relative h-full flex flex-col min-h-0"
+}, he = {
+  key: 0,
+  class: "shrink-0 w-full"
+}, ye = { class: "flex-1 overflow-y-auto w-full relative h-full" }, ke = { class: "flex flex-col h-full" }, we = { class: "flex-1 overflow-y-auto px-3.5 pt-4" }, xe = {
+  key: 0,
+  class: "mt-auto pt-2 border-t border-border px-3 py-2"
+}, $e = {
+  key: 1,
   class: "vlite-app-layout flex flex-col w-full h-full bg-body overflow-hidden"
-}, ce = {
+}, Ce = {
   key: 0,
   class: "w-full shrink-0 z-50 flex flex-col relative"
-}, ge = { class: "flex flex-1 w-full overflow-hidden relative" }, ve = { class: "flex items-center gap-4 shrink-0 z-10" }, pe = { key: 1 }, he = { key: 2 }, ye = {
+}, Te = { class: "flex flex-1 w-full overflow-hidden relative" }, ze = { class: "flex items-center gap-4 shrink-0 z-10" }, Be = { key: 1 }, Se = { key: 2 }, Ve = {
   key: 0,
   class: "flex-1 overflow-y-auto w-full relative h-full flex flex-col"
-}, ke = {
+}, Me = {
   key: 0,
   class: "shrink-0 w-full"
-}, xe = { class: "flex-1 overflow-y-auto w-full relative h-full" }, we = { class: "flex flex-col max-h-[80vh] overflow-y-auto" }, $e = { class: "space-y-1 p-2" }, Ce = { class: "space-y-1 p-2" }, Te = { class: "flex flex-col space-y-6 pt-4 h-full" }, ze = {
+}, Oe = { class: "flex-1 overflow-y-auto w-full relative h-full" }, Ne = { class: "flex flex-col max-h-[80vh] overflow-y-auto" }, Le = { class: "space-y-1 p-2" }, Pe = { class: "space-y-1 p-2" }, Re = { class: "flex flex-col space-y-6 pt-4 h-full" }, He = {
   key: 0,
   class: "flex flex-col space-y-1"
-}, Be = {
+}, je = {
   key: 1,
   class: "flex flex-col space-y-4 flex-1 overflow-y-auto px-3.5!"
-}, Se = {
+}, Ie = {
   key: 2,
   class: "mt-auto pt-2 border-t border-border px-3! py-2!"
-}, Me = { class: "flex items-center gap-4 shrink-0 z-10" }, Oe = { key: 1 }, Ve = { key: 2 }, Ne = { class: "flex flex-col max-h-[80vh] overflow-y-auto" }, Le = { class: "space-y-1 p-2" }, Re = { class: "space-y-1 p-2" }, Pe = { class: "flex flex-col space-y-6 pt-4 h-full" }, He = {
+}, Ue = { class: "flex items-center gap-4 shrink-0 z-10" }, Ae = { key: 1 }, De = { key: 2 }, Ee = { class: "flex flex-col max-h-[80vh] overflow-y-auto" }, Fe = { class: "space-y-1 p-2" }, We = { class: "space-y-1 p-2" }, Ye = { class: "flex flex-col space-y-6 pt-4 h-full" }, qe = {
   key: 0,
   class: "flex flex-col space-y-1"
-}, je = {
+}, Ge = {
   key: 1,
   class: "flex flex-col space-y-4 flex-1 overflow-y-auto px-3.5!"
-}, Ae = {
+}, Je = {
   key: 2,
   class: "mt-auto pt-2 border-t border-border px-3! py-2!"
-}, Ze = /* @__PURE__ */ Q({
+}, nl = /* @__PURE__ */ se({
   __name: "Navbar",
   props: {
     variant: { default: "header" },
@@ -69,63 +84,64 @@ const be = {
     breadcrumbSize: { default: "sm" },
     breadcrumbLabels: {},
     breadcrumbHomeIcon: { default: "lucide:home" },
-    breadcrumbClass: { default: "" }
+    breadcrumbClass: { default: "" },
+    layoutMode: { default: "sidebar-first" }
   },
   emits: ["toggle-mobile"],
-  setup(m, { emit: De }) {
-    const l = m, B = l.breadcrumb ? me({
+  setup(g, { emit: Ke }) {
+    const l = g, h = l.breadcrumb ? be({
       homeIcon: l.breadcrumbHomeIcon,
       labelMap: l.breadcrumbLabels || {}
-    }) : { items: b(() => []) }, w = p([]), $ = p("");
-    X("navbar-context", {
+    }) : { items: b(() => []) }, y = w([]), k = w("");
+    oe("navbar-context", {
       compact: b(() => l.compact),
       renderNestedTabs: b(() => l.renderNestedTabs),
       setNestedTabs: (e, s) => {
-        w.value = e, $.value = s;
+        y.value = e, k.value = s;
       }
     });
-    const i = p(!1), S = p(!1), R = Z(), M = p(null), k = p(null), C = re("vlite-navbar-sidebar-visible", !0), Y = (e) => {
-      w.value.find((u) => u.value === e) && (typeof e == "string" && e.startsWith("/") ? import("vue-router").then(({ useRouter: u }) => {
+    const i = w(!1), S = w(!1), H = te(), V = w(null), C = w(null), T = de("vlite-navbar-sidebar-visible", !0), j = (e) => {
+      y.value.find((u) => u.value === e) && (typeof e == "string" && e.startsWith("/") ? import("vue-router").then(({ useRouter: u }) => {
         u().push(e).catch(() => {
         });
-      }) : $.value = e);
-    }, v = b(() => !!(R.header || R.main)), P = b(() => l.sidebarToggle && v.value), q = () => {
-      C.value = !C.value;
+      }) : k.value = e);
+    }, p = b(() => !!(H.header || H.main)), I = b(() => l.sidebarToggle && p.value), U = () => {
+      T.value = !T.value;
     };
-    ie(
-      M,
+    ue(
+      V,
       () => {
         i.value = !1;
       },
-      { ignore: [k] }
+      { ignore: [C] }
     );
-    const H = () => {
+    const A = () => {
       S.value = window.scrollY > 10;
     };
-    _(() => {
-      window.addEventListener("scroll", H, { passive: !0 });
-    }), ee(() => {
-      window.removeEventListener("scroll", H);
+    ae(() => {
+      window.addEventListener("scroll", A, { passive: !0 });
+    }), re(() => {
+      window.removeEventListener("scroll", A);
     });
-    const j = b(() => {
+    const D = b(() => {
       const e = l.variant === "sidebar", s = {
-        fixed: v.value ? "relative z-40" : "fixed top-0 left-0 z-40",
-        sticky: v.value ? "relative z-40" : "sticky top-0 z-40",
+        fixed: p.value ? "relative z-40" : "fixed top-0 left-0 z-40",
+        sticky: p.value ? "relative z-40" : "sticky top-0 z-40",
         relative: "relative z-10",
-        absolute: v.value ? "relative z-40" : "absolute top-0 left-0 w-full z-40"
-      }, u = "bg-body", T = [
+        absolute: p.value ? "relative z-40" : "absolute top-0 left-0 w-full z-40"
+      }, u = "bg-body", z = [
         l.glass && (S.value || e || l.floating) ? "backdrop-blur-md bg-background/80 supports-[backdrop-filter]:bg-background/60" : "bg-background",
         l.border && !l.floating ? e ? "border-r border-border" : "border-b border-border" : "",
         l.floating ? "m-4 rounded shadow-lg border border-border/50" : "",
         S.value && !l.floating && !e && l.position === "sticky" ? "shadow-sm" : ""
-      ], O = l.mobileBreakpoint || "md", V = {
+      ], M = l.mobileBreakpoint || "md", O = {
         sm: "max-sm:hidden",
         md: "max-md:hidden",
         lg: "max-lg:hidden",
         xl: "max-xl:hidden"
-      }, N = v.value && e ? V[O] : "";
+      }, N = p.value && e ? O[M] : "";
       let L = "";
-      return e ? L = f.value.sidebarLayout : L = `flex items-center gap-4 w-full px-4 sm:px-6 lg:px-8 ${l.height}`, [u, s[l.position], ...T, L, N, l.class].filter(Boolean).join(" ");
+      return e ? L = f.value.sidebarLayout : L = `flex items-center gap-4 w-full px-4 sm:px-6 lg:px-8 ${l.height}`, [u, s[l.position], ...z, L, N, l.class].filter(Boolean).join(" ");
     }), f = b(() => {
       const e = l.mobileBreakpoint || "md", s = {
         sm: "sm:hidden",
@@ -137,17 +153,17 @@ const be = {
         md: "hidden md:flex",
         lg: "hidden lg:flex",
         xl: "hidden xl:flex"
-      }, T = {
+      }, z = {
         sm: `flex flex-col max-sm:w-full ${l.compact ? "w-20" : ""} h-auto sm:h-full sm:max-h-screen shrink-0`,
         md: `flex flex-col max-md:w-full ${l.compact ? "w-20" : ""} h-auto md:h-full md:max-h-screen shrink-0`,
         lg: `flex flex-col max-lg:w-full ${l.compact ? "w-20" : ""} h-auto lg:h-full lg:max-h-screen shrink-0`,
         xl: `flex flex-col max-xl:w-full ${l.compact ? "w-20" : ""} h-auto xl:h-full xl:max-h-screen shrink-0`
-      }, O = {
+      }, M = {
         sm: "sm:hidden flex items-center justify-between px-4 py-3 shrink-0 bg-background",
         md: "md:hidden flex items-center justify-between px-4 py-3 shrink-0 bg-background",
         lg: "lg:hidden flex items-center justify-between px-4 py-3 shrink-0 bg-background",
         xl: "xl:hidden flex items-center justify-between px-4 py-3 shrink-0 bg-background"
-      }, V = {
+      }, O = {
         sm: "hidden sm:flex flex-col h-full w-full overflow-hidden",
         md: "hidden md:flex flex-col h-full w-full overflow-hidden",
         lg: "hidden lg:flex flex-col h-full w-full overflow-hidden",
@@ -161,39 +177,137 @@ const be = {
       return {
         mobileTrigger: s[e],
         desktopContent: u[e],
-        sidebarLayout: T[e],
-        mobileHeader: O[e],
-        desktopSidebar: V[e],
+        sidebarLayout: z[e],
+        mobileHeader: M[e],
+        desktopSidebar: O[e],
         desktopOnly: N[e]
       };
-    }), A = b(() => {
+    }), E = b(() => {
       if (l.variant === "sidebar") return "flex-1 py-4 overflow-y-auto";
       if (l.centerPosition === "left")
         return "flex items-center justify-start";
-    }), G = ae();
-    D(
-      () => G.path,
+    }), _ = ne();
+    W(
+      () => _.path,
       () => {
         i.value = !1;
       }
     );
-    const J = ne(de).greater(l.mobileBreakpoint);
-    D(J, (e) => {
+    const ee = fe(me).greater(l.mobileBreakpoint);
+    W(ee, (e) => {
       e && (i.value = !1);
     });
-    const K = b(() => P.value && !C.value);
-    return (e, s) => v.value ? (t(), r("div", be, [
-      e.$slots.header ? (t(), r("header", ce, [
+    const F = b(() => I.value && !T.value), le = b(() => p.value && l.variant === "sidebar" && l.layoutMode === "sidebar-first");
+    return (e, s) => le.value ? (t(), a("div", ve, [
+      m(Y, {
+        "enter-active-class": "transition-all duration-300 ease-in-out",
+        "leave-active-class": "transition-all duration-300 ease-in-out",
+        "enter-from-class": "opacity-0 -translate-x-2",
+        "enter-to-class": "opacity-100 translate-x-0",
+        "leave-from-class": "opacity-100 translate-x-0",
+        "leave-to-class": "opacity-0 -translate-x-2"
+      }, {
+        default: v(() => [
+          q(r("nav", {
+            class: n([
+              "shrink-0 h-full flex flex-col bg-background border-r border-border overflow-hidden z-30",
+              f.value.mobileTrigger === "md:hidden" ? "max-md:hidden" : "",
+              l.class
+            ]),
+            role: "navigation",
+            "aria-label": "Sidebar"
+          }, [
+            r("div", {
+              class: n(["flex-1 overflow-y-auto overflow-x-hidden scrollbar-thin", l.contentClass])
+            }, [
+              o(e.$slots, "default")
+            ], 2),
+            e.$slots.right ? (t(), a("div", {
+              key: 0,
+              class: n(["shrink-0 border-t border-border bg-background", l.rightClass])
+            }, [
+              o(e.$slots, "right")
+            ], 2)) : d("", !0)
+          ], 2), [
+            [G, !F.value]
+          ])
+        ]),
+        _: 3
+      }),
+      r("div", ce, [
+        e.$slots.header ? (t(), a("header", ge, [
+          o(e.$slots, "header", {
+            isOpen: i.value,
+            toggle: () => i.value = !i.value,
+            sidebarVisible: c(T),
+            toggleSidebar: U,
+            breadcrumbItems: c(h).items.value
+          })
+        ])) : d("", !0),
+        e.$slots.main ? (t(), a("main", pe, [
+          l.renderNestedTabs && y.value.length > 0 ? (t(), a("div", he, [
+            m(X, {
+              modelValue: k.value,
+              "onUpdate:modelValue": s[0] || (s[0] = (u) => k.value = u),
+              onChange: j,
+              items: y.value
+            }, null, 8, ["modelValue", "items"])
+          ])) : d("", !0),
+          l.breadcrumb && l.breadcrumbPosition === "main" && c(h).items.value.length > 1 ? (t(), a("div", {
+            key: 1,
+            class: n(["shrink-0 w-full border-b border-border px-6 py-2", l.breadcrumbClass])
+          }, [
+            m(c(Z), {
+              items: c(h).items.value,
+              variant: l.breadcrumbVariant,
+              separator: l.breadcrumbSeparator,
+              size: l.breadcrumbSize
+            }, null, 8, ["items", "variant", "separator", "size"])
+          ], 2)) : d("", !0),
+          r("div", ye, [
+            o(e.$slots, "main")
+          ])
+        ])) : d("", !0)
+      ]),
+      m(R, {
+        show: i.value,
+        "onUpdate:show": s[1] || (s[1] = (u) => i.value = u),
+        position: "left",
+        size: "sm",
+        triggerClass: f.value.mobileTrigger,
+        class: n(["z-60", f.value.mobileTrigger]),
+        headerClass: "pl-3! pr-4.5! py-3!",
+        bodyClass: "p-0!"
+      }, {
+        header: v(() => [
+          o(e.$slots, "logo", {}, () => [
+            s[9] || (s[9] = P("Brand", -1))
+          ])
+        ]),
+        default: v(() => [
+          r("div", ke, [
+            r("div", we, [
+              o(e.$slots, "default")
+            ]),
+            e.$slots.right ? (t(), a("div", xe, [
+              o(e.$slots, "right")
+            ])) : d("", !0)
+          ])
+        ]),
+        _: 3
+      }, 8, ["show", "triggerClass", "class"])
+    ])) : p.value ? (t(), a("div", $e, [
+      e.$slots.header ? (t(), a("header", Ce, [
         o(e.$slots, "header", {
           isOpen: i.value,
           toggle: () => i.value = !i.value,
-          sidebarVisible: x(C),
-          toggleSidebar: q,
-          breadcrumbItems: x(B).items.value
+          sidebarVisible: c(T),
+          toggleSidebar: U,
+          breadcrumbItems: c(h).items.value
         })
       ])) : d("", !0),
-      a("div", ge, [
-        c(le, {
+      r("div", Te, [
+        m(Y, {
           "enter-active-class": "transition-all duration-300 ease-in-out overflow-hidden",
           "leave-active-class": "transition-all duration-300 ease-in-out overflow-hidden",
           "enter-from-class": "opacity-0",
@@ -201,121 +315,119 @@ const be = {
           "leave-from-class": "opacity-100",
           "leave-to-class": "opacity-0"
         }, {
-          default: g(() => [
-            se(a("nav", {
-              class: n(j.value),
+          default: v(() => [
+            q(r("nav", {
+              class: n(D.value),
               role: "navigation",
-              style: oe(P.value ? "transition: width 0.3s ease, opacity 0.3s ease;" : "")
+              style: ie(I.value ? "transition: width 0.3s ease, opacity 0.3s ease;" : "")
             }, [
-              m.variant === "header" ? (t(), r(h, { key: 0 }, [
-                a("div", ve, [
+              g.variant === "header" ? (t(), a(x, { key: 0 }, [
+                r("div", ze, [
                   o(e.$slots, "mobile-trigger", {
                     isOpen: i.value,
                     toggle: () => i.value = !i.value
                   }, () => [
-                    a("button", {
+                    r("button", {
                       type: "button",
                       ref_key: "mobileTriggerRef",
-                      ref: k,
+                      ref: C,
                       class: n(["p-2 -ml-2 text-muted-foreground hover:bg-accent rounded-md shrink-0", [f.value.mobileTrigger, l.mobileTriggerClass]]),
-                      onClick: s[0] || (s[0] = (u) => i.value = !i.value)
+                      onClick: s[2] || (s[2] = (u) => i.value = !i.value)
                     }, [
-                      c(z, {
+                      m(B, {
                         icon: "lucide:menu",
                         class: "w-5 h-5"
                       }),
-                      s[7] || (s[7] = a("span", { class: "sr-only" }, "Open Menu", -1))
+                      s[10] || (s[10] = r("span", { class: "sr-only" }, "Open Menu", -1))
                     ], 2)
                   ]),
-                  e.$slots?.logo ? (t(), r("div", {
+                  e.$slots?.logo ? (t(), a("div", {
                     key: 0,
                     class: n(["shrink-0", l.logoClass])
                   }, [
                     o(e.$slots, "logo", {}, () => [
-                      (t(), y(E(l.logo ? "img" : "div"), {
+                      (t(), $(J(l.logo ? "img" : "div"), {
                         src: l.logo,
                         class: "h-8 w-auto font-bold text-xl flex items-center gap-2"
                       }, {
-                        default: g(() => [
-                          l.logo ? d("", !0) : (t(), y(W, {
+                        default: v(() => [
+                          l.logo ? d("", !0) : (t(), $(Q, {
                             key: 0,
                             class: "h-6 w-6"
                           })),
-                          !l.logo && l.logoAlt ? (t(), r("span", pe, I(l.logoAlt), 1)) : l.logo ? d("", !0) : (t(), r("span", he, "Brand"))
+                          !l.logo && l.logoAlt ? (t(), a("span", Be, K(l.logoAlt), 1)) : l.logo ? d("", !0) : (t(), a("span", Se, "Brand"))
                         ]),
                         _: 1
                       }, 8, ["src"]))
                     ])
                   ], 2)) : d("", !0),
-                  e.$slots?.left ? (t(), r("div", {
+                  e.$slots?.left ? (t(), a("div", {
                     key: 1,
                     class: n(["items-center gap-1 overflow-x-auto no-scrollbar mask-gradient", f.value.desktopContent])
                   }, [
                     o(e.$slots, "left")
                   ], 2)) : d("", !0)
                 ]),
-                e.$slots?.center ? (t(), r("div", {
+                e.$slots?.center ? (t(), a("div", {
                   key: 0,
-                  class: n([A.value, "max-w-full", l.contentClass])
+                  class: n([E.value, "max-w-full", l.contentClass])
                 }, [
                   o(e.$slots, "center")
                 ], 2)) : d("", !0),
-                a("div", {
+                r("div", {
                   class: n(["flex items-center gap-2 shrink-0 max-w-[40%] z-10", [
-                    {
-                      "ml-auto": m.centerPosition === "left" || m.centerPosition === "center"
-                    },
+                    { "ml-auto": g.centerPosition === "left" || g.centerPosition === "center" },
                     l.rightClass
                   ]])
                 }, [
                   o(e.$slots, "right")
                 ], 2)
-              ], 64)) : (t(), r(h, { key: 1 }, [
-                e.$slots.header ? d("", !0) : (t(), r("div", {
+              ], 64)) : (t(), a(x, { key: 1 }, [
+                e.$slots.header ? d("", !0) : (t(), a("div", {
                   key: 0,
                   class: n(f.value.mobileHeader)
                 }, [
                   e.$slots?.logo ? o(e.$slots, "logo", { key: 0 }, () => [
-                    s[8] || (s[8] = a("div", { class: "font-bold text-xl truncate" }, "Brand", -1))
+                    s[11] || (s[11] = r("div", { class: "font-bold text-xl truncate" }, "Brand", -1))
                   ]) : d("", !0),
                   o(e.$slots, "mobile-trigger", {
                     isOpen: i.value,
                     toggle: () => i.value = !i.value
                   }, () => [
-                    a("button", {
+                    r("button", {
                       type: "button",
                       ref_key: "mobileTriggerRef",
-                      ref: k,
+                      ref: C,
                       class: n(["p-2 -mr-2 text-muted-foreground hover:bg-accent rounded-md", l.mobileTriggerClass]),
-                      onClick: s[1] || (s[1] = (u) => i.value = !i.value)
+                      onClick: s[3] || (s[3] = (u) => i.value = !i.value)
                     }, [
-                      c(z, {
+                      m(B, {
                         icon: "lucide:menu",
                         class: "w-5 h-5"
                       }),
-                      s[9] || (s[9] = a("span", { class: "sr-only" }, "Open Menu", -1))
+                      s[12] || (s[12] = r("span", { class: "sr-only" }, "Open Menu", -1))
                     ], 2)
                   ])
                 ], 2)),
-                a("div", {
+                r("div", {
                   class: n(f.value.desktopSidebar)
                 }, [
-                  e.$slots?.logo ? (t(), r("div", {
+                  e.$slots?.logo ? (t(), a("div", {
                     key: 0,
                     class: n(["py-4.5 flex items-center px-4.5 z-10", l.logoClass])
                   }, [
                     o(e.$slots, "logo", {}, () => [
-                      s[10] || (s[10] = a("div", { class: "font-bold text-xl truncate" }, "Brand", -1))
+                      s[13] || (s[13] = r("div", { class: "font-bold text-xl truncate" }, "Brand", -1))
                     ])
                   ], 2)) : d("", !0),
-                  a("div", {
+                  r("div", {
                     class: n(["flex-1 px-2.5 pt-0 pb-4 overflow-y-auto space-y-4 scrollbar-thin", l.contentClass])
                   }, [
                     o(e.$slots, "left"),
                     o(e.$slots, "default"),
                     o(e.$slots, "center")
                   ], 2),
-                  e.$slots?.right ? (t(), r("div", {
+                  e.$slots?.right ? (t(), a("div", {
                     key: 1,
                     class: n(["p-2 border-t border-border shrink-0 bg-background mt-auto", l.rightClass])
                   }, [
@@ -324,58 +436,58 @@ const be = {
                 ], 2)
               ], 64))
             ], 6), [
-              [te, !K.value]
+              [G, !F.value]
             ])
           ]),
           _: 3
         }),
-        e.$slots.main ? (t(), r("main", ye, [
-          l.renderNestedTabs && w.value.length > 0 ? (t(), r("div", ke, [
-            c(ue, {
-              modelValue: $.value,
-              "onUpdate:modelValue": s[2] || (s[2] = (u) => $.value = u),
-              onChange: Y,
-              items: w.value
+        e.$slots.main ? (t(), a("main", Ve, [
+          l.renderNestedTabs && y.value.length > 0 ? (t(), a("div", Me, [
+            m(X, {
+              modelValue: k.value,
+              "onUpdate:modelValue": s[4] || (s[4] = (u) => k.value = u),
+              onChange: j,
+              items: y.value
             }, null, 8, ["modelValue", "items"])
           ])) : d("", !0),
-          l.breadcrumb && l.breadcrumbPosition === "main" && x(B).items.value.length > 1 ? (t(), r("div", {
+          l.breadcrumb && l.breadcrumbPosition === "main" && c(h).items.value.length > 1 ? (t(), a("div", {
             key: 1,
             class: n(["shrink-0 w-full border-b border-border px-6 py-2", l.breadcrumbClass])
           }, [
-            c(x(fe), {
-              items: x(B).items.value,
+            m(c(Z), {
+              items: c(h).items.value,
               variant: l.breadcrumbVariant,
               separator: l.breadcrumbSeparator,
               size: l.breadcrumbSize
             }, null, 8, ["items", "variant", "separator", "size"])
           ], 2)) : d("", !0),
-          a("div", xe, [
+          r("div", Oe, [
             o(e.$slots, "main")
           ])
         ])) : d("", !0),
-        l.mobileMenuVariant === "dropdown" ? (t(), r(h, { key: 1 }, [
-          i.value ? (t(), r("div", {
+        l.mobileMenuVariant === "dropdown" ? (t(), a(x, { key: 1 }, [
+          i.value ? (t(), a("div", {
             key: 0,
             ref_key: "mobileMenuRef",
-            ref: M,
+            ref: V,
             class: n(["absolute top-[calc(100%_+_1px)] left-0 w-full bg-body border border-border/50 shadow-xl z-50 flex flex-col transition-all duration-300 origin-top overflow-hidden will-change-transform", l.menuClass])
           }, [
-            a("div", we, [
+            r("div", Ne, [
               o(e.$slots, "mobile-menu", {}, () => [
-                a("div", $e, [
+                r("div", Le, [
                   o(e.$slots, "left")
                 ]),
-                s[11] || (s[11] = a("div", { class: "h-px bg-border/50 my-1 mx-2" }, null, -1)),
-                a("div", Ce, [
+                s[14] || (s[14] = r("div", { class: "h-px bg-border/50 my-1 mx-2" }, null, -1)),
+                r("div", Pe, [
                   o(e.$slots, "center")
                 ])
               ])
             ])
           ], 2)) : d("", !0)
-        ], 64)) : (t(), y(F, {
+        ], 64)) : (t(), $(R, {
           key: 2,
           show: i.value,
-          "onUpdate:show": s[3] || (s[3] = (u) => i.value = u),
+          "onUpdate:show": s[5] || (s[5] = (u) => i.value = u),
           position: "left",
           size: "sm",
           triggerClass: f.value.mobileTrigger,
@@ -383,25 +495,25 @@ const be = {
           headerClass: "pl-3! pr-4.5! py-3!",
           bodyClass: "p-0!"
         }, {
-          header: g(() => [
+          header: v(() => [
             o(e.$slots, "logo", {}, () => [
-              s[12] || (s[12] = U("Brand", -1))
+              s[15] || (s[15] = P("Brand", -1))
             ])
           ]),
-          default: g(() => [
-            a("div", Te, [
-              m.variant === "header" ? (t(), r("div", ze, [
+          default: v(() => [
+            r("div", Re, [
+              g.variant === "header" ? (t(), a("div", He, [
                 o(e.$slots, "mobile-menu", {}, () => [
                   o(e.$slots, "left"),
-                  s[13] || (s[13] = a("div", { class: "h-px bg-border my-2" }, null, -1)),
+                  s[16] || (s[16] = r("div", { class: "h-px bg-border my-2" }, null, -1)),
                   o(e.$slots, "center")
                 ])
-              ])) : (t(), r("div", Be, [
+              ])) : (t(), a("div", je, [
                 o(e.$slots, "left"),
                 o(e.$slots, "default"),
                 o(e.$slots, "center")
               ])),
-              e.$slots?.right ? (t(), r("div", Se, [
+              e.$slots?.right ? (t(), a("div", Ie, [
                 o(e.$slots, "right")
               ])) : d("", !0)
             ])
@@ -409,119 +521,117 @@ const be = {
           _: 3
         }, 8, ["show", "triggerClass", "class"]))
       ])
-    ])) : (t(), r("nav", {
-      key: 1,
-      class: n(j.value),
+    ])) : (t(), a("nav", {
+      key: 2,
+      class: n(D.value),
       role: "navigation"
     }, [
-      m.variant === "header" ? (t(), r(h, { key: 0 }, [
-        a("div", Me, [
+      g.variant === "header" ? (t(), a(x, { key: 0 }, [
+        r("div", Ue, [
           o(e.$slots, "mobile-trigger", {
             isOpen: i.value,
             toggle: () => i.value = !i.value
           }, () => [
-            a("button", {
+            r("button", {
               type: "button",
               ref_key: "mobileTriggerRef",
-              ref: k,
+              ref: C,
               class: n(["p-2 -ml-2 text-muted-foreground hover:bg-accent rounded-md shrink-0", [f.value.mobileTrigger, l.mobileTriggerClass]]),
-              onClick: s[4] || (s[4] = (u) => i.value = !i.value)
+              onClick: s[6] || (s[6] = (u) => i.value = !i.value)
             }, [
-              c(z, {
+              m(B, {
                 icon: "lucide:menu",
                 class: "w-5 h-5"
               }),
-              s[14] || (s[14] = a("span", { class: "sr-only" }, "Open Menu", -1))
+              s[17] || (s[17] = r("span", { class: "sr-only" }, "Open Menu", -1))
             ], 2)
           ]),
-          e.$slots?.logo ? (t(), r("div", {
+          e.$slots?.logo ? (t(), a("div", {
             key: 0,
             class: n(["shrink-0", l.logoClass])
           }, [
             o(e.$slots, "logo", {}, () => [
-              (t(), y(E(l.logo ? "img" : "div"), {
+              (t(), $(J(l.logo ? "img" : "div"), {
                 src: l.logo,
                 class: "h-8 w-auto font-bold text-xl flex items-center gap-2"
               }, {
-                default: g(() => [
-                  l.logo ? d("", !0) : (t(), y(W, {
+                default: v(() => [
+                  l.logo ? d("", !0) : (t(), $(Q, {
                     key: 0,
                     class: "h-6 w-6"
                   })),
-                  !l.logo && l.logoAlt ? (t(), r("span", Oe, I(l.logoAlt), 1)) : l.logo ? d("", !0) : (t(), r("span", Ve, "Brand"))
+                  !l.logo && l.logoAlt ? (t(), a("span", Ae, K(l.logoAlt), 1)) : l.logo ? d("", !0) : (t(), a("span", De, "Brand"))
                 ]),
                 _: 1
               }, 8, ["src"]))
             ])
           ], 2)) : d("", !0),
-          e.$slots?.left ? (t(), r("div", {
+          e.$slots?.left ? (t(), a("div", {
             key: 1,
             class: n(["items-center gap-1 overflow-x-auto no-scrollbar mask-gradient", f.value.desktopContent])
           }, [
             o(e.$slots, "left")
           ], 2)) : d("", !0)
         ]),
-        e.$slots?.center ? (t(), r("div", {
+        e.$slots?.center ? (t(), a("div", {
           key: 0,
-          class: n([A.value, "max-w-full", l.contentClass])
+          class: n([E.value, "max-w-full", l.contentClass])
         }, [
           o(e.$slots, "center")
         ], 2)) : d("", !0),
-        a("div", {
+        r("div", {
           class: n(["flex items-center gap-2 shrink-0 max-w-[40%] z-10", [
-            {
-              "ml-auto": m.centerPosition === "left" || m.centerPosition === "center"
-            },
+            { "ml-auto": g.centerPosition === "left" || g.centerPosition === "center" },
             l.rightClass
           ]])
         }, [
           o(e.$slots, "right")
         ], 2)
-      ], 64)) : (t(), r(h, { key: 1 }, [
-        a("div", {
+      ], 64)) : (t(), a(x, { key: 1 }, [
+        r("div", {
           class: n(f.value.mobileHeader)
         }, [
           e.$slots?.logo ? o(e.$slots, "logo", { key: 0 }, () => [
-            s[15] || (s[15] = a("div", { class: "font-bold text-xl truncate" }, "Brand", -1))
+            s[18] || (s[18] = r("div", { class: "font-bold text-xl truncate" }, "Brand", -1))
           ]) : d("", !0),
           o(e.$slots, "mobile-trigger", {
             isOpen: i.value,
             toggle: () => i.value = !i.value
           }, () => [
-            a("button", {
+            r("button", {
               type: "button",
               ref_key: "mobileTriggerRef",
-              ref: k,
+              ref: C,
               class: n(["p-2 -mr-2 text-muted-foreground hover:bg-accent rounded-md", l.mobileTriggerClass]),
-              onClick: s[5] || (s[5] = (u) => i.value = !i.value)
+              onClick: s[7] || (s[7] = (u) => i.value = !i.value)
             }, [
-              c(z, {
+              m(B, {
                 icon: "lucide:menu",
                 class: "w-5 h-5"
               }),
-              s[16] || (s[16] = a("span", { class: "sr-only" }, "Open Menu", -1))
+              s[19] || (s[19] = r("span", { class: "sr-only" }, "Open Menu", -1))
             ], 2)
           ])
         ], 2),
-        a("div", {
+        r("div", {
           class: n(f.value.desktopSidebar)
         }, [
-          e.$slots?.logo ? (t(), r("div", {
+          e.$slots?.logo ? (t(), a("div", {
             key: 0,
             class: n(["py-4.5 flex items-center px-4.5 z-10", l.logoClass])
           }, [
             o(e.$slots, "logo", {}, () => [
-              s[17] || (s[17] = a("div", { class: "font-bold text-xl truncate" }, "Brand", -1))
+              s[20] || (s[20] = r("div", { class: "font-bold text-xl truncate" }, "Brand", -1))
             ])
           ], 2)) : d("", !0),
-          a("div", {
+          r("div", {
             class: n(["flex-1 px-2.5 pt-0 pb-4 overflow-y-auto space-y-4 scrollbar-thin", l.contentClass])
           }, [
             o(e.$slots, "left"),
             o(e.$slots, "default"),
             o(e.$slots, "center")
           ], 2),
-          e.$slots?.right ? (t(), r("div", {
+          e.$slots?.right ? (t(), a("div", {
             key: 1,
             class: n(["p-2 border-t border-border shrink-0 bg-background mt-auto", l.rightClass])
           }, [
@@ -529,29 +639,29 @@ const be = {
           ], 2)) : d("", !0)
         ], 2)
       ], 64)),
-      l.mobileMenuVariant === "dropdown" ? (t(), r(h, { key: 2 }, [
-        i.value ? (t(), r("div", {
+      l.mobileMenuVariant === "dropdown" ? (t(), a(x, { key: 2 }, [
+        i.value ? (t(), a("div", {
           key: 0,
           ref_key: "mobileMenuRef",
-          ref: M,
+          ref: V,
           class: n(["absolute top-[calc(100%_+_1px)] left-0 w-full bg-body border border-border/50 shadow-xl z-50 flex flex-col transition-all duration-300 origin-top overflow-hidden will-change-transform", l.menuClass])
         }, [
-          a("div", Ne, [
+          r("div", Ee, [
             o(e.$slots, "mobile-menu", {}, () => [
-              a("div", Le, [
+              r("div", Fe, [
                 o(e.$slots, "left")
               ]),
-              s[18] || (s[18] = a("div", { class: "h-px bg-border/50 my-1 mx-2" }, null, -1)),
-              a("div", Re, [
+              s[21] || (s[21] = r("div", { class: "h-px bg-border/50 my-1 mx-2" }, null, -1)),
+              r("div", We, [
                 o(e.$slots, "center")
               ])
             ])
           ])
         ], 2)) : d("", !0)
-      ], 64)) : (t(), y(F, {
+      ], 64)) : (t(), $(R, {
         key: 3,
         show: i.value,
-        "onUpdate:show": s[6] || (s[6] = (u) => i.value = u),
+        "onUpdate:show": s[8] || (s[8] = (u) => i.value = u),
         position: "left",
         size: "sm",
         triggerClass: f.value.mobileTrigger,
@@ -559,25 +669,25 @@ const be = {
         headerClass: "pl-3! pr-4.5! py-3!",
         bodyClass: "p-0!"
       }, {
-        header: g(() => [
+        header: v(() => [
           o(e.$slots, "logo", {}, () => [
-            s[19] || (s[19] = U("Brand", -1))
+            s[22] || (s[22] = P("Brand", -1))
           ])
         ]),
-        default: g(() => [
-          a("div", Pe, [
-            m.variant === "header" ? (t(), r("div", He, [
+        default: v(() => [
+          r("div", Ye, [
+            g.variant === "header" ? (t(), a("div", qe, [
               o(e.$slots, "mobile-menu", {}, () => [
                 o(e.$slots, "left"),
-                s[20] || (s[20] = a("div", { class: "h-px bg-border my-2" }, null, -1)),
+                s[23] || (s[23] = r("div", { class: "h-px bg-border my-2" }, null, -1)),
                 o(e.$slots, "center")
               ])
-            ])) : (t(), r("div", je, [
+            ])) : (t(), a("div", Ge, [
               o(e.$slots, "left"),
               o(e.$slots, "default"),
               o(e.$slots, "center")
             ])),
-            e.$slots?.right ? (t(), r("div", Ae, [
+            e.$slots?.right ? (t(), a("div", Je, [
               o(e.$slots, "right")
             ])) : d("", !0)
           ])
@@ -588,5 +698,5 @@ const be = {
   }
 });
 export {
-  Ze as default
+  nl as default
 };