@bobbykim/mcl-header 0.8.4 → 0.8.6

package/dist/index.d.ts

@@ -8,6 +8,7 @@ import { ComponentOptionsBase } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { ComponentPublicInstance } from 'vue';
+import { ComputedRef } from 'vue';
 import { CreateComponentPublicInstanceWithMixins } from 'vue';
 import { CtaTarget } from '@bobbykim/manguito-theme';
 import { DebuggerEvent } from 'vue';
@@ -61,6 +62,8 @@ $: ComponentInternalInstance;
 $data: {};
 $props: {
 readonly bgColor?: ColorPalette | undefined;
+readonly navLabel?: string | undefined;
+readonly menuLabel?: string | undefined;
 readonly mobileMenuBgColor?: ColorPalette | undefined;
 readonly drawerBtnColor?: ColorPalette | undefined;
 readonly showDrawerBorder?: boolean | undefined;
@@ -85,6 +88,8 @@ $emit: (event: "toggle-drawer", event: Event, open: boolean) => void;
 $el: HTMLElement;
 $options: ComponentOptionsBase<Readonly<{
 bgColor?: ColorPalette;
+navLabel?: string;
+menuLabel?: string;
 mobileMenuBgColor?: ColorPalette;
 drawerBtnColor?: ColorPalette;
 showDrawerBorder?: boolean;
@@ -99,6 +104,8 @@ headerClose: () => void;
 "toggle-drawer": (event: Event, open: boolean) => any;
 }, string, {
 bgColor: ColorPalette;
+navLabel: string;
+menuLabel: string;
 mobileMenuBgColor: ColorPalette;
 drawerBtnColor: ColorPalette;
 showDrawerBorder: boolean;
@@ -127,6 +134,8 @@ $nextTick: nextTick;
 $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, OnCleanup]) => any : (...args: [any, any, OnCleanup]) => any, options?: WatchOptions): WatchStopHandle;
 } & Readonly<{
 bgColor: ColorPalette;
+navLabel: string;
+menuLabel: string;
 mobileMenuBgColor: ColorPalette;
 drawerBtnColor: ColorPalette;
 showDrawerBorder: boolean;
@@ -135,6 +144,8 @@ scrollDistance: number;
 sticky: HeaderStickyOptionType;
 }> & Omit<Readonly<{
 bgColor?: ColorPalette;
+navLabel?: string;
+menuLabel?: string;
 mobileMenuBgColor?: ColorPalette;
 drawerBtnColor?: ColorPalette;
 showDrawerBorder?: boolean;
@@ -143,7 +154,7 @@ scrollDistance?: number;
 sticky?: HeaderStickyOptionType;
 }> & Readonly<{
 "onToggle-drawer"?: ((event: Event, open: boolean) => any) | undefined;
-}>, "bgColor" | "mobileMenuBgColor" | "drawerBtnColor" | "showDrawerBorder" | "fadeInOnScroll" | "scrollDistance" | "sticky" | "headerClose"> & ShallowUnwrapRef<    {
+}>, "bgColor" | "navLabel" | "menuLabel" | "mobileMenuBgColor" | "drawerBtnColor" | "showDrawerBorder" | "fadeInOnScroll" | "scrollDistance" | "sticky" | "headerClose"> & ShallowUnwrapRef<    {
 headerClose: () => void;
 }> & {} & ComponentCustomProperties & {} & {
 $slots: Readonly<{
@@ -196,6 +207,8 @@ $: ComponentInternalInstance;
 $data: {};
 $props: {
 readonly bgColor?: ColorPalette | undefined;
+readonly navLabel?: string | undefined;
+readonly menuLabel?: string | undefined;
 readonly drawerBtnColor?: ColorPalette | undefined;
 readonly showDrawerBorder?: boolean | undefined;
 readonly headerWidth?: number | undefined;
@@ -217,6 +230,8 @@ $emit: (event: "toggle-drawer", event: Event, open: boolean) => void;
 $el: HTMLElement;
 $options: ComponentOptionsBase<Readonly<{
 bgColor?: ColorPalette;
+navLabel?: string;
+menuLabel?: string;
 drawerBtnColor?: ColorPalette;
 showDrawerBorder?: boolean;
 headerWidth?: number;
@@ -228,6 +243,8 @@ headerClose: () => void;
 "toggle-drawer": (event: Event, open: boolean) => any;
 }, string, {
 bgColor: ColorPalette;
+navLabel: string;
+menuLabel: string;
 drawerBtnColor: ColorPalette;
 showDrawerBorder: boolean;
 headerWidth: number;
@@ -253,17 +270,21 @@ $nextTick: nextTick;
 $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, OnCleanup]) => any : (...args: [any, any, OnCleanup]) => any, options?: WatchOptions): WatchStopHandle;
 } & Readonly<{
 bgColor: ColorPalette;
+navLabel: string;
+menuLabel: string;
 drawerBtnColor: ColorPalette;
 showDrawerBorder: boolean;
 headerWidth: number;
 }> & Omit<Readonly<{
 bgColor?: ColorPalette;
+navLabel?: string;
+menuLabel?: string;
 drawerBtnColor?: ColorPalette;
 showDrawerBorder?: boolean;
 headerWidth?: number;
 }> & Readonly<{
 "onToggle-drawer"?: ((event: Event, open: boolean) => any) | undefined;
-}>, "bgColor" | "drawerBtnColor" | "showDrawerBorder" | "headerClose" | "headerWidth"> & ShallowUnwrapRef<    {
+}>, "bgColor" | "navLabel" | "menuLabel" | "drawerBtnColor" | "showDrawerBorder" | "headerClose" | "headerWidth"> & ShallowUnwrapRef<    {
 headerClose: () => void;
 }> & {} & ComponentCustomProperties & {} & {
 $slots: Readonly<{
@@ -340,6 +361,7 @@ visible?: boolean;
 onClose?: ((visible: boolean) => any) | undefined;
 onOpen?: ((visible: boolean) => any) | undefined;
 }>, {
+isOpen: ComputedRef<boolean>;
 toggle: () => void;
 open: () => void;
 close: () => void;
@@ -379,7 +401,8 @@ visible?: boolean;
 }> & Readonly<{
 onClose?: ((visible: boolean) => any) | undefined;
 onOpen?: ((visible: boolean) => any) | undefined;
-}>, "customClass" | "visible" | "toggle" | "open" | "close"> & ShallowUnwrapRef<    {
+}>, "customClass" | "visible" | "isOpen" | "toggle" | "open" | "close"> & ShallowUnwrapRef<    {
+isOpen: ComputedRef<boolean>;
 toggle: () => void;
 open: () => void;
 close: () => void;
@@ -440,6 +463,10 @@ declare type __VLS_Props = {
     showHighlight?: boolean;
     highlightColor?: ColorPalette;
     bgColor?: ColorPalette;
+    /** aria-label of the nav landmark(s). Defaults to "Main". */
+    navLabel?: string;
+    /** Accessible name of the mobile menu button. Defaults to "Menu". */
+    menuLabel?: string;
     mobileMenuBgColor?: ColorPalette;
     drawerBtnColor?: ColorPalette;
     showDrawerBorder?: boolean;
@@ -464,6 +491,10 @@ declare type __VLS_Props_2 = {
     showHighlight?: boolean;
     highlightColor?: ColorPalette;
     bgColor?: ColorPalette;
+    /** aria-label of the nav landmark(s). Defaults to "Main". */
+    navLabel?: string;
+    /** Accessible name of the mobile menu button. Defaults to "Menu". */
+    menuLabel?: string;
     drawerBtnColor?: ColorPalette;
     showDrawerBorder?: boolean;
     headerWidth?: number;
@@ -488,6 +519,8 @@ declare function __VLS_template(): {
             $data: {};
             $props: {
                 readonly bgColor?: ColorPalette | undefined;
+                readonly navLabel?: string | undefined;
+                readonly menuLabel?: string | undefined;
                 readonly mobileMenuBgColor?: ColorPalette | undefined;
                 readonly drawerBtnColor?: ColorPalette | undefined;
                 readonly showDrawerBorder?: boolean | undefined;
@@ -512,6 +545,8 @@ declare function __VLS_template(): {
             $el: HTMLElement;
             $options: ComponentOptionsBase<Readonly<{
             bgColor?: ColorPalette;
+            navLabel?: string;
+            menuLabel?: string;
             mobileMenuBgColor?: ColorPalette;
             drawerBtnColor?: ColorPalette;
             showDrawerBorder?: boolean;
@@ -526,6 +561,8 @@ declare function __VLS_template(): {
             "toggle-drawer": (event: Event, open: boolean) => any;
             }, string, {
             bgColor: ColorPalette;
+            navLabel: string;
+            menuLabel: string;
             mobileMenuBgColor: ColorPalette;
             drawerBtnColor: ColorPalette;
             showDrawerBorder: boolean;
@@ -554,6 +591,8 @@ declare function __VLS_template(): {
             $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, OnCleanup]) => any : (...args: [any, any, OnCleanup]) => any, options?: WatchOptions): WatchStopHandle;
         } & Readonly<{
             bgColor: ColorPalette;
+            navLabel: string;
+            menuLabel: string;
             mobileMenuBgColor: ColorPalette;
             drawerBtnColor: ColorPalette;
             showDrawerBorder: boolean;
@@ -562,6 +601,8 @@ declare function __VLS_template(): {
             sticky: HeaderStickyOptionType;
         }> & Omit<Readonly<{
             bgColor?: ColorPalette;
+            navLabel?: string;
+            menuLabel?: string;
             mobileMenuBgColor?: ColorPalette;
             drawerBtnColor?: ColorPalette;
             showDrawerBorder?: boolean;
@@ -570,7 +611,7 @@ declare function __VLS_template(): {
             sticky?: HeaderStickyOptionType;
         }> & Readonly<{
             "onToggle-drawer"?: ((event: Event, open: boolean) => any) | undefined;
-        }>, "bgColor" | "mobileMenuBgColor" | "drawerBtnColor" | "showDrawerBorder" | "fadeInOnScroll" | "scrollDistance" | "sticky" | "headerClose"> & ShallowUnwrapRef<    {
+        }>, "bgColor" | "navLabel" | "menuLabel" | "mobileMenuBgColor" | "drawerBtnColor" | "showDrawerBorder" | "fadeInOnScroll" | "scrollDistance" | "sticky" | "headerClose"> & ShallowUnwrapRef<    {
         headerClose: () => void;
         }> & {} & ComponentCustomProperties & {} & {
             $slots: Readonly<{
@@ -612,6 +653,8 @@ declare function __VLS_template_2(): {
             $data: {};
             $props: {
                 readonly bgColor?: ColorPalette | undefined;
+                readonly navLabel?: string | undefined;
+                readonly menuLabel?: string | undefined;
                 readonly drawerBtnColor?: ColorPalette | undefined;
                 readonly showDrawerBorder?: boolean | undefined;
                 readonly headerWidth?: number | undefined;
@@ -633,6 +676,8 @@ declare function __VLS_template_2(): {
             $el: HTMLElement;
             $options: ComponentOptionsBase<Readonly<{
             bgColor?: ColorPalette;
+            navLabel?: string;
+            menuLabel?: string;
             drawerBtnColor?: ColorPalette;
             showDrawerBorder?: boolean;
             headerWidth?: number;
@@ -644,6 +689,8 @@ declare function __VLS_template_2(): {
             "toggle-drawer": (event: Event, open: boolean) => any;
             }, string, {
             bgColor: ColorPalette;
+            navLabel: string;
+            menuLabel: string;
             drawerBtnColor: ColorPalette;
             showDrawerBorder: boolean;
             headerWidth: number;
@@ -669,17 +716,21 @@ declare function __VLS_template_2(): {
             $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, OnCleanup]) => any : (...args: [any, any, OnCleanup]) => any, options?: WatchOptions): WatchStopHandle;
         } & Readonly<{
             bgColor: ColorPalette;
+            navLabel: string;
+            menuLabel: string;
             drawerBtnColor: ColorPalette;
             showDrawerBorder: boolean;
             headerWidth: number;
         }> & Omit<Readonly<{
             bgColor?: ColorPalette;
+            navLabel?: string;
+            menuLabel?: string;
             drawerBtnColor?: ColorPalette;
             showDrawerBorder?: boolean;
             headerWidth?: number;
         }> & Readonly<{
             "onToggle-drawer"?: ((event: Event, open: boolean) => any) | undefined;
-        }>, "bgColor" | "drawerBtnColor" | "showDrawerBorder" | "headerClose" | "headerWidth"> & ShallowUnwrapRef<    {
+        }>, "bgColor" | "navLabel" | "menuLabel" | "drawerBtnColor" | "showDrawerBorder" | "headerClose" | "headerWidth"> & ShallowUnwrapRef<    {
         headerClose: () => void;
         }> & {} & ComponentCustomProperties & {} & {
             $slots: Readonly<{
@@ -756,6 +807,7 @@ declare function __VLS_template_2(): {
         onClose?: ((visible: boolean) => any) | undefined;
         onOpen?: ((visible: boolean) => any) | undefined;
         }>, {
+        isOpen: ComputedRef<boolean>;
         toggle: () => void;
         open: () => void;
         close: () => void;
@@ -795,7 +847,8 @@ declare function __VLS_template_2(): {
         }> & Readonly<{
         onClose?: ((visible: boolean) => any) | undefined;
         onOpen?: ((visible: boolean) => any) | undefined;
-        }>, "customClass" | "visible" | "toggle" | "open" | "close"> & ShallowUnwrapRef<    {
+        }>, "customClass" | "visible" | "isOpen" | "toggle" | "open" | "close"> & ShallowUnwrapRef<    {
+        isOpen: ComputedRef<boolean>;
         toggle: () => void;
         open: () => void;
         close: () => void;

package/dist/mcl-header.js

@@ -1,7 +1,7 @@
-(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode('.nav__decorator[data-v-e72ce0b4]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-e72ce0b4]:before,.nav__text:hover+.nav__decorator[data-v-e72ce0b4]:before{width:100%}.nav__decorator[data-v-1a311f8c]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-1a311f8c]:before,.nav__text:hover+.nav__decorator[data-v-1a311f8c]:before{width:100%}.nav__decorator[data-v-d390be01]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-d390be01]:before,.nav__text:hover+.nav__decorator[data-v-d390be01]:before{width:100%}')),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode('.nav__decorator[data-v-1ce9ae01]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-1ce9ae01]:before,.nav__text:hover+.nav__decorator[data-v-1ce9ae01]:before{width:100%}.nav__decorator[data-v-a36072d4]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-a36072d4]:before,.nav__text:hover+.nav__decorator[data-v-a36072d4]:before{width:100%}.nav__decorator[data-v-65d3897d]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-65d3897d]:before,.nav__text:hover+.nav__decorator[data-v-65d3897d]:before{width:100%}')),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
 import { defineComponent as R, ref as H, computed as S, openBlock as r, createElementBlock as d, createElementVNode as o, normalizeClass as y, toDisplayString as M, unref as w, createCommentVNode as $, createVNode as D, withCtx as I, Fragment as N, renderList as j, withKeys as G, useSlots as P, createBlock as V, renderSlot as E } from "vue";
 import { generateClass as t, Collapse as Q, DropdownContainer as p, DropdownContent as _, HeaderHorizontal as ee, AccordionGroup as W, HeaderVertical as te } from "@bobbykim/manguito-theme";
-const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne = { class: "relative pt-2xs" }, ie = { class: "relative flex flex-col" }, ae = ["href", "target", "onClick"], re = /* @__PURE__ */ R({
+const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne = { class: "relative pt-2xs" }, ae = { class: "relative flex flex-col" }, ie = ["href", "target", "onClick"], re = /* @__PURE__ */ R({
   __name: "NavCollapse",
   props: {
     navId: {},
@@ -18,23 +18,23 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
   emits: ["child-click", "label-click"],
   setup(e, { emit: L }) {
     const T = e, k = L, g = H(!1), C = S(() => {
-      const { navId: a } = T;
-      return `nav-${a.toLowerCase().replaceAll(" ", "-")}`;
-    }), f = H(), c = (a) => {
-      g.value = a;
-    }, x = (a, s) => {
-      f.value?.toggle(), k("label-click", a, s, g.value);
-    }, v = (a, s) => {
+      const { navId: i } = T;
+      return `nav-${i.toLowerCase().replaceAll(" ", "-")}`;
+    }), f = H(), c = (i) => {
+      g.value = i;
+    }, x = (i, s) => {
+      f.value?.toggle(), k("label-click", i, s, g.value);
+    }, v = (i, s) => {
       const { asLink: n } = T;
-      !n && a.preventDefault(), k("child-click", a, s);
-    }, b = (a, s, n) => {
+      n || i.preventDefault(), k("child-click", i, s);
+    }, b = (i, s, n) => {
       const m = [
-        t.bodyTextVariant({ size: a }),
+        t.bodyTextVariant({ size: i }),
         t.textColorVariant({ color: s })
       ];
       return n && m.push("font-bold"), m.join(" ");
     };
-    return (a, s) => (r(), d("div", le, [
+    return (i, s) => (r(), d("div", le, [
       o("div", oe, [
         o("button", {
           class: y(["nav__text flex items-center gap-3xs align-middle tracking-wider outline-none", b(e.menuTextSize, e.menuTextColor, e.menuTextBold)]),
@@ -70,7 +70,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
               key: 0,
               class: y(["absolute -left-4 h-full w-md bg-opacity-25", w(t).bgColorVariant({ color: e.highlightColor })])
             }, null, 2)) : $("", !0),
-            o("div", ie, [
+            o("div", ae, [
               (r(!0), d(N, null, j(e.navItem.children, (n, m) => (r(), d("a", {
                 href: n.url,
                 target: n.target,
@@ -79,8 +79,8 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
                   w(t).bodyTextVariant({ size: e.menuTextSize })
                 ]]),
                 key: m,
-                onClick: (i) => v(i, n)
-              }, M(n.title), 11, ae))), 128))
+                onClick: (a) => v(a, n)
+              }, M(n.title), 11, ie))), 128))
             ])
           ])
         ]),
@@ -93,7 +93,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
   for (const [k, g] of L)
     T[k] = g;
   return T;
-}, se = /* @__PURE__ */ F(re, [["__scopeId", "data-v-e72ce0b4"]]), ce = ["onClick"], ue = ["href", "target", "onClick"], de = /* @__PURE__ */ R({
+}, se = /* @__PURE__ */ F(re, [["__scopeId", "data-v-1ce9ae01"]]), ce = ["onClick"], ue = ["href", "target", "onClick"], de = /* @__PURE__ */ R({
   __name: "NavDropdown",
   props: {
     navItem: {},
@@ -107,25 +107,25 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
   },
   emits: ["label-click", "child-click"],
   setup(e, { emit: L }) {
-    const T = e, k = L, g = H(-1), C = H(), f = (b, a, s) => {
+    const T = e, k = L, g = H(-1), C = H(), f = (b, i, s) => {
       const n = [
         t.bodyTextVariant({ size: b }),
-        t.textColorVariant({ color: a })
+        t.textColorVariant({ color: i })
       ];
       return s && n.push("font-bold"), n.join(" ");
     }, c = (b) => {
-      const a = T.navItem.children.length;
-      C.value !== void 0 && (b === "down" && g.value < a - 1 && g.value++, b === "up" && g.value > 0 && g.value--, C.value[g.value].focus());
-    }, x = (b, a, s) => {
-      g.value = -1, k("label-click", b, a, s);
-    }, v = (b, a) => {
+      const i = T.navItem.children.length;
+      C.value !== void 0 && (b === "down" && g.value < i - 1 && g.value++, b === "up" && g.value > 0 && g.value--, C.value[g.value].focus());
+    }, x = (b, i, s) => {
+      g.value = -1, k("label-click", b, i, s);
+    }, v = (b, i) => {
       const { asLink: s } = T;
-      !s && b.preventDefault(), k("child-click", b, a);
+      s || b.preventDefault(), k("child-click", b, i);
     };
-    return (b, a) => (r(), d("div", {
+    return (b, i) => (r(), d("div", {
       onKeyup: [
-        a[0] || (a[0] = G((s) => c("down"), ["down"])),
-        a[1] || (a[1] = G((s) => c("up"), ["up"]))
+        i[0] || (i[0] = G((s) => c("down"), ["down"])),
+        i[1] || (i[1] = G((s) => c("up"), ["up"]))
       ]
     }, [
       D(w(p), null, {
@@ -143,7 +143,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
                   n ? "rotate-180" : "rotate-0",
                   "transition-transform duration-300 ease-in"
                 ]])
-              }, [...a[2] || (a[2] = [
+              }, [...i[2] || (i[2] = [
                 o("path", { d: "M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z" }, null, -1)
               ])], 2))
             ], 10, ce),
@@ -173,7 +173,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
                   w(t).textColorVariant({ color: e.menuTextColor }),
                   w(t).bodyTextVariant({ size: e.menuTextSize })
                 ]]),
-                onClick: (i) => (s(), v(i, n))
+                onClick: (a) => (s(), v(a, n))
               }, M(n.title), 11, ue))), 128))
             ]),
             _: 1
@@ -183,7 +183,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
       })
     ], 32));
   }
-}), he = /* @__PURE__ */ F(de, [["__scopeId", "data-v-1a311f8c"]]), fe = ["href", "target", "innerHTML"], me = /* @__PURE__ */ R({
+}), he = /* @__PURE__ */ F(de, [["__scopeId", "data-v-a36072d4"]]), fe = ["href", "target", "innerHTML"], me = /* @__PURE__ */ R({
   __name: "NavLink",
   props: {
     navItem: {},
@@ -204,7 +204,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
       return x && v.push("font-bold"), v.join(" ");
     }, C = (f, c) => {
       const { asLink: x } = T;
-      !x && f.preventDefault(), k("nav-link", f, c);
+      x || f.preventDefault(), k("nav-link", f, c);
     };
     return (f, c) => (r(), d("div", null, [
       o("a", {
@@ -220,7 +220,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
       }, null, 2)) : $("", !0)
     ]));
   }
-}), U = /* @__PURE__ */ F(me, [["__scopeId", "data-v-d390be01"]]), ge = { class: "flex flex-shrink-0 items-center self-center" }, ke = { class: "mr-2xs h-md align-middle md:mr-sm md:h-lg lg:h-xl" }, xe = ["href", "target"], Ce = ["src", "alt"], ve = ["src", "alt"], be = { class: "ml-2 flex flex-col justify-center" }, ye = ["href", "target"], we = ["innerHTML"], Te = { class: "hidden flex-wrap lg:flex" }, Be = {
+}), U = /* @__PURE__ */ F(me, [["__scopeId", "data-v-65d3897d"]]), ge = { class: "flex flex-shrink-0 items-center self-center" }, ke = { class: "mr-2xs h-md align-middle md:mr-sm md:h-lg lg:h-xl" }, xe = ["href", "target"], Ce = ["src", "alt"], ve = ["src", "alt"], be = { class: "ml-2 flex flex-col justify-center" }, ye = ["href", "target"], we = ["innerHTML"], Te = { class: "hidden flex-wrap lg:flex" }, Be = {
   key: 0,
   class: "hidden lg:block"
 }, Le = { class: "flex flex-col items-center justify-center p-xs" }, Ie = { key: 0 }, Xe = /* @__PURE__ */ R({
@@ -243,6 +243,8 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
     showHighlight: { type: Boolean, default: !0 },
     highlightColor: { default: "primary" },
     bgColor: { default: "light-1" },
+    navLabel: {},
+    menuLabel: {},
     mobileMenuBgColor: { default: "light-2" },
     drawerBtnColor: { default: "dark-1" },
     showDrawerBorder: { type: Boolean, default: !0 },
@@ -254,14 +256,14 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
     const k = e, g = H(), C = P(), f = T, c = () => {
       g.value?.headerClose();
     }, x = (n) => {
-      const { titleBlockAsLink: m, titleBlockLink: i, titleBlockLinkTarget: l } = k;
-      m || n.preventDefault(), f("title-click", n, i, l), c();
+      const { titleBlockAsLink: m, titleBlockLink: a, titleBlockLinkTarget: l } = k;
+      m || n.preventDefault(), f("title-click", n, a, l), c();
     }, v = (n, m) => {
-      const { menuItemAsLink: i } = k;
-      i || n.preventDefault(), f("menu-click", n, m), c();
-    }, b = (n, m, i) => {
-      f("collapse-click", n, m, i);
-    }, a = (n, m) => [
+      const { menuItemAsLink: a } = k;
+      a || n.preventDefault(), f("menu-click", n, m), c();
+    }, b = (n, m, a) => {
+      f("collapse-click", n, m, a);
+    }, i = (n, m) => [
       t.h2Variant({ size: n }),
       t.textColorVariant({ color: m })
     ].join(" "), s = (n) => {
@@ -271,6 +273,8 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
     return L({
       headerClose: c
     }), (n, m) => (r(), V(w(ee), {
+      "nav-label": e.navLabel,
+      "menu-label": e.menuLabel,
       ref_key: "componentRef",
       ref: g,
       "bg-color": e.bgColor,
@@ -307,18 +311,18 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
               onClick: x
             }, [
               o("h2", {
-                class: y(["inline-block align-middle tracking-wider", a(e.titleSize, e.titleColor)]),
+                class: y(["inline-block align-middle tracking-wider", i(e.titleSize, e.titleColor)]),
                 innerHTML: e.title
               }, null, 10, we)
             ], 8, ye),
             o("ul", Te, [
-              (r(!0), d(N, null, j(e.menuItems, (i, l) => (r(), d("li", {
+              (r(!0), d(N, null, j(e.menuItems, (a, l) => (r(), d("li", {
                 class: "mr-xs last:mr-0",
                 key: `menu-${l}`
               }, [
-                s(i) ? (r(), V(he, {
+                s(a) ? (r(), V(he, {
                   key: 1,
-                  "nav-item": i,
+                  "nav-item": a,
                   "menu-text-color": e.menuTextColor,
                   "menu-text-size": e.menuTextSize,
                   "menu-text-bold": e.menuTextBold,
@@ -330,7 +334,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
                   onLabelClick: b
                 }, null, 8, ["nav-item", "menu-text-color", "menu-text-size", "menu-text-bold", "display-highlight", "highlight-color", "bg-color", "as-link"])) : (r(), V(U, {
                   key: 0,
-                  "nav-item": i,
+                  "nav-item": a,
                   "menu-text-color": e.menuTextColor,
                   "menu-text-size": e.menuTextSize,
                   "menu-text-bold": e.menuTextBold,
@@ -354,14 +358,14 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
           D(w(W), null, {
             default: I(() => [
               o("ul", Le, [
-                (r(!0), d(N, null, j(e.menuItems, (i, l) => (r(), d("li", {
+                (r(!0), d(N, null, j(e.menuItems, (a, l) => (r(), d("li", {
                   class: "mb-2xs last:mb-0",
                   key: `mobile-${l}`
                 }, [
-                  s(i) ? (r(), V(se, {
+                  s(a) ? (r(), V(se, {
                     key: 1,
-                    "nav-id": i.title,
-                    "nav-item": i,
+                    "nav-id": a.title,
+                    "nav-item": a,
                     "menu-text-color": e.menuTextColor,
                     "menu-text-size": e.menuTextSize,
                     "menu-text-bold": e.menuTextBold,
@@ -372,7 +376,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
                     onLabelClick: b
                   }, null, 8, ["nav-id", "nav-item", "menu-text-color", "menu-text-size", "menu-text-bold", "display-highlight", "highlight-color", "as-link"])) : (r(), V(U, {
                     key: 0,
-                    "nav-item": i,
+                    "nav-item": a,
                     "menu-text-color": e.menuTextColor,
                     "menu-text-size": e.menuTextSize,
                     "menu-text-bold": e.menuTextBold,
@@ -392,7 +396,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
         ])
       ]),
       _: 3
-    }, 8, ["bg-color", "drawer-btn-border", "drawer-btn-color", "fade-in-on-scroll", "mobile-menu-bg-color"]));
+    }, 8, ["nav-label", "menu-label", "bg-color", "drawer-btn-border", "drawer-btn-color", "fade-in-on-scroll", "mobile-menu-bg-color"]));
   }
 }), ze = { class: "relative flex items-center justify-center gap-2" }, Ve = ["href", "target", "onClick"], $e = { class: "relative" }, q = /* @__PURE__ */ R({
   __name: "NavCollapseVertical",
@@ -409,25 +413,25 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
   },
   emits: ["label-click", "child-click"],
   setup(e, { expose: L, emit: T }) {
-    const k = e, g = H(!1), C = H(), f = T, c = (i) => {
-      g.value = i;
+    const k = e, g = H(!1), C = H(), f = T, c = (a) => {
+      g.value = a;
     }, x = () => {
       C.value?.close();
-    }, v = (i, l) => {
-      C.value?.toggle(), f("label-click", i, l, g.value);
-    }, b = (i, l) => {
+    }, v = (a, l) => {
+      C.value?.toggle(), f("label-click", a, l, g.value);
+    }, b = (a, l) => {
       const { asLink: u } = k;
-      u || i.preventDefault(), f("child-click", i, l), C.value?.close(), x();
-    }, a = S(() => {
-      const { navId: i, navLocation: l } = k, h = i.toLowerCase().replaceAll(" ", "-");
+      u || a.preventDefault(), f("child-click", a, l), C.value?.close(), x();
+    }, i = S(() => {
+      const { navId: a, navLocation: l } = k, h = a.toLowerCase().replaceAll(" ", "-");
       return `nav-${l}-${h}`;
     }), s = S(() => {
-      const { textColor: i, textSize: l, dHl: u, hlColor: h, fontBold: B } = k, z = [
+      const { textColor: a, textSize: l, dHl: u, hlColor: h, fontBold: B } = k, z = [
         t.bodyTextVariant({ size: l })
       ];
       if (!u) {
         const K = [
-          t.textColorVariant({ color: i }),
+          t.textColorVariant({ color: a }),
           t.hoverTextColorVariant({ color: h }),
           t.focusTextColorVariant({ color: h })
         ];
@@ -440,30 +444,28 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
         z.push("before:inset-y-0 before:left-0 before:transition-[width] before:duration-300 before:ease-linear before:w-0 hover:before:w-full focus:before:w-full " + K);
         const O = [
           t.textColorVariant({ color: h }),
-          t.hoverTextColorVariant({ color: i }),
-          t.focusTextColorVariant({ color: i })
+          t.hoverTextColorVariant({ color: a }),
+          t.focusTextColorVariant({ color: a })
         ];
         z.push(O.join(" "));
       }
       return B && z.push("font-bold"), z.join(" ");
     }), n = S(() => {
-      const { dHl: i, hlColor: l, navLocation: u } = k, h = [];
-      if (!i)
+      const { dHl: a, hlColor: l, navLocation: u } = k, h = [];
+      if (!a)
         return "";
       const B = "before:absolute before:w-xs before:h-full before:mcl-bg-primary before:bg-opacity-70 ", z = u === "desktop" ? "before:left-0 " : "before:right-0 ";
       return h.push(
         B + z + t.beforeBgColorVariant({ color: l })
       ), h.join(" ");
     }), m = S(() => {
-      const { textColor: i, textSize: l, dHl: u, hlColor: h, fontBold: B, navLocation: z } = k;
-      let K = l === "xl" ? "lg" : l === "lg" ? "md" : l === "md" ? "sm" : "xs";
-      const A = [
-        t.textColorVariant({ color: i }),
+      const { textColor: a, textSize: l, dHl: u, hlColor: h, fontBold: B, navLocation: z } = k, K = l === "xl" ? "lg" : l === "lg" ? "md" : l === "md" ? "sm" : "xs", A = [
+        t.textColorVariant({ color: a }),
         t.bodyTextVariant({ size: K })
       ];
       if (z === "mobile" && A.push("text-end"), !u) {
         const O = [
-          t.textColorVariant({ color: i }),
+          t.textColorVariant({ color: a }),
           t.hoverTextColorVariant({ color: h }),
           t.focusTextColorVariant({ color: h })
         ];
@@ -476,8 +478,8 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
         A.push(X + Y + O);
         const Z = [
           t.textColorVariant({ color: h }),
-          t.hoverTextColorVariant({ color: i }),
-          t.focusTextColorVariant({ color: i })
+          t.hoverTextColorVariant({ color: a }),
+          t.focusTextColorVariant({ color: a })
         ];
         A.push(Z.join(" "));
       }
@@ -485,7 +487,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
     });
     return L({
       closeCollapse: x
-    }), (i, l) => (r(), d("div", null, [
+    }), (a, l) => (r(), d("div", null, [
       o("button", {
         class: y(["relative block w-full px-xs py-2xs text-center transition-colors duration-300 ease-linear before:absolute", [s.value]]),
         onClick: l[0] || (l[0] = (u) => v(u, e.menuItem.title))
@@ -507,7 +509,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
       D(w(Q), {
         ref_key: "collapseRef",
         ref: C,
-        id: a.value,
+        id: i.value,
         onOpen: c,
         onClose: c
       }, {
@@ -551,7 +553,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
       const { asLink: x } = T;
       x || f.preventDefault(), k("menu-click", f, c);
     }, C = S(() => {
-      const { textColor: f, textSize: c, dHl: x, hlColor: v, fontBold: b } = T, a = [
+      const { textColor: f, textSize: c, dHl: x, hlColor: v, fontBold: b } = T, i = [
         t.bodyTextVariant({ size: c })
       ];
       if (!x) {
@@ -560,21 +562,21 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
           t.hoverTextColorVariant({ color: v }),
           t.focusTextColorVariant({ color: v })
         ];
-        a.push(s.join(" "));
+        i.push(s.join(" "));
       }
       if (x) {
         const s = t.beforeBgColorVariant({
           color: v
         });
-        a.push("before:inset-y-0 before:left-0 before:transition-[width] before:duration-300 before:ease-linear before:w-0 hover:before:w-full focus:before:w-full " + s);
+        i.push("before:inset-y-0 before:left-0 before:transition-[width] before:duration-300 before:ease-linear before:w-0 hover:before:w-full focus:before:w-full " + s);
         const m = [
           t.textColorVariant({ color: v }),
           t.hoverTextColorVariant({ color: f }),
           t.focusTextColorVariant({ color: f })
         ];
-        a.push(m.join(" "));
+        i.push(m.join(" "));
       }
-      return b && a.push("font-bold"), a.join(" ");
+      return b && i.push("font-bold"), i.join(" ");
     });
     return (f, c) => (r(), d("a", {
       class: y([[C.value], "relative block w-full px-xs py-2xs text-center transition-colors duration-300 ease-linear before:absolute"]),
@@ -604,6 +606,8 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
     showHighlight: { type: Boolean, default: !0 },
     highlightColor: { default: "primary" },
     bgColor: { default: "light-1" },
+    navLabel: {},
+    menuLabel: {},
     drawerBtnColor: { default: "dark-1" },
     showDrawerBorder: { type: Boolean, default: !0 },
     headerWidth: { default: 160 }
@@ -617,7 +621,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
     }, b = () => {
       for (let l = 0; l < c.value.length; l++)
         c.value[l].closeCollapse();
-    }, a = (l) => {
+    }, i = (l) => {
       const { titleBlockAsLink: u, titleBlockLink: h, titleBlockLinkTarget: B } = k;
       u || l.preventDefault(), C("title-click", l, h, B), v(), b();
     }, s = (l, u) => {
@@ -631,13 +635,15 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
         t.h3Variant({ size: l }),
         t.textColorVariant({ color: u })
       ].join(" ");
-    }), i = (l) => {
+    }), a = (l) => {
       const u = l;
       return typeof u.children > "u" ? !1 : u.children.length > 0;
     };
     return L({
       headerClose: v
     }), (l, u) => (r(), V(w(te), {
+      "nav-label": e.navLabel,
+      "menu-label": e.menuLabel,
       "bg-color": e.bgColor,
       "drawer-btn-color": e.drawerBtnColor,
       "drawer-btn-border": e.showDrawerBorder,
@@ -655,7 +661,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
             o("a", {
               href: e.titleBlockLink,
               target: e.titleBlockLinkTarget,
-              onClick: a
+              onClick: i
             }, [
               o("img", {
                 src: e.logo,
@@ -668,7 +674,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
             o("a", {
               href: e.titleBlockLink,
               target: e.titleBlockLinkTarget,
-              onClick: a
+              onClick: i
             }, [
               o("h3", {
                 class: y([m.value, "mb-md text-center"]),
@@ -682,7 +688,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
                 (r(!0), d(N, null, j(e.menuItems, (h, B) => (r(), d("li", {
                   key: `menu-${B}`
                 }, [
-                  i(h) ? (r(), V(q, {
+                  a(h) ? (r(), V(q, {
                     key: 1,
                     ref_for: !0,
                     ref_key: "collapseRef",
@@ -728,7 +734,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
               o("a", {
                 href: e.titleBlockLink,
                 target: e.titleBlockLinkTarget,
-                onClick: a
+                onClick: i
               }, [
                 o("img", {
                   src: e.logo,
@@ -741,7 +747,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
               o("a", {
                 href: e.titleBlockLink,
                 target: e.titleBlockLinkTarget,
-                onClick: a
+                onClick: i
               }, [
                 o("h3", {
                   class: y([m.value, "mb-md text-center"]),
@@ -755,7 +761,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
                   (r(!0), d(N, null, j(e.menuItems, (B, z) => (r(), d("li", {
                     key: `menu-${z}`
                   }, [
-                    i(B) ? (r(), V(q, {
+                    a(B) ? (r(), V(q, {
                       key: 1,
                       "nav-id": B.title,
                       "nav-location": "mobile",
@@ -791,7 +797,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
         ])
       ]),
       _: 3
-    }, 8, ["bg-color", "drawer-btn-color", "drawer-btn-border", "header-width"]));
+    }, 8, ["nav-label", "menu-label", "bg-color", "drawer-btn-color", "drawer-btn-border", "header-width"]));
   }
 });
 export {

package/dist/mcl-header.umd.cjs

@@ -1,2 +1,2 @@
-(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode('.nav__decorator[data-v-e72ce0b4]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-e72ce0b4]:before,.nav__text:hover+.nav__decorator[data-v-e72ce0b4]:before{width:100%}.nav__decorator[data-v-1a311f8c]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-1a311f8c]:before,.nav__text:hover+.nav__decorator[data-v-1a311f8c]:before{width:100%}.nav__decorator[data-v-d390be01]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-d390be01]:before,.nav__text:hover+.nav__decorator[data-v-d390be01]:before{width:100%}')),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-(function(V,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@bobbykim/manguito-theme")):typeof define=="function"&&define.amd?define(["exports","vue","@bobbykim/manguito-theme"],e):(V=typeof globalThis<"u"?globalThis:V||self,e(V.MclHeader={},V.Vue,V.ManguitoTheme))})(this,(function(V,e,l){"use strict";const $={class:"flex w-full flex-col"},H={class:"self-center"},A={class:"relative pt-2xs"},M={class:"relative flex flex-col"},D=["href","target","onClick"],j=e.defineComponent({__name:"NavCollapse",props:{navId:{},navItem:{},bgColor:{default:"light-2"},hoverBgColor:{default:"dark-1"},menuTextSize:{default:"md"},menuTextColor:{default:"dark-3"},menuTextBold:{type:Boolean,default:!1},showHighlight:{type:Boolean,default:!0},highlightColor:{default:"primary"},asLink:{type:Boolean,default:!0}},emits:["child-click","label-click"],setup(t,{emit:y}){const b=t,k=y,m=e.ref(!1),g=e.computed(()=>{const{navId:r}=b;return`nav-${r.toLowerCase().replaceAll(" ","-")}`}),f=e.ref(),c=r=>{m.value=r},C=(r,i)=>{f.value?.toggle(),k("label-click",r,i,m.value)},x=(r,i)=>{const{asLink:n}=b;!n&&r.preventDefault(),k("child-click",r,i)},u=(r,i,n)=>{const h=[l.generateClass.bodyTextVariant({size:r}),l.generateClass.textColorVariant({color:i})];return n&&h.push("font-bold"),h.join(" ")};return(r,i)=>(e.openBlock(),e.createElementBlock("div",$,[e.createElementVNode("div",H,[e.createElementVNode("button",{class:e.normalizeClass(["nav__text flex items-center gap-3xs align-middle tracking-wider outline-none",u(t.menuTextSize,t.menuTextColor,t.menuTextBold)]),onClick:i[0]||(i[0]=n=>C(n,t.navItem.title))},[e.createElementVNode("span",null,e.toDisplayString(t.navItem.title),1),(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",class:e.normalizeClass(["h-[0.8rem] fill-current",[m.value?"rotate-180":"rotate-0","transition-transform duration-300 ease-in"]])},[...i[1]||(i[1]=[e.createElementVNode("path",{d:"M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"},null,-1)])],2))],2),t.showHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["nav__decorator relative -top-0.5 h-1.5",e.unref(l.generateClass).beforeBgColorVariant({color:t.highlightColor})])},null,2)):e.createCommentVNode("",!0)]),e.createVNode(e.unref(l.Collapse),{ref_key:"collapseRef",ref:f,id:g.value,onOpen:c,onClose:c},{default:e.withCtx(()=>[e.createElementVNode("div",A,[t.showHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["absolute -left-4 h-full w-md bg-opacity-25",e.unref(l.generateClass).bgColorVariant({color:t.highlightColor})])},null,2)):e.createCommentVNode("",!0),e.createElementVNode("div",M,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.navItem.children,(n,h)=>(e.openBlock(),e.createElementBlock("a",{href:n.url,target:n.target,class:e.normalizeClass(["w-full pb-2xs last:pb-0",[e.unref(l.generateClass).textColorVariant({color:t.menuTextColor}),e.unref(l.generateClass).bodyTextVariant({size:t.menuTextSize})]]),key:h,onClick:a=>x(a,n)},e.toDisplayString(n.title),11,D))),128))])])]),_:1},8,["id"])]))}}),z=(t,y)=>{const b=t.__vccOpts||t;for(const[k,m]of y)b[k]=m;return b},R=z(j,[["__scopeId","data-v-e72ce0b4"]]),F=["onClick"],K=["href","target","onClick"],O=z(e.defineComponent({__name:"NavDropdown",props:{navItem:{},bgColor:{default:"light-1"},menuTextSize:{default:"md"},menuTextColor:{default:"dark-3"},menuTextBold:{type:Boolean,default:!1},showHighlight:{type:Boolean,default:!0},highlightColor:{default:"primary"},asLink:{type:Boolean,default:!0}},emits:["label-click","child-click"],setup(t,{emit:y}){const b=t,k=y,m=e.ref(-1),g=e.ref(),f=(u,r,i)=>{const n=[l.generateClass.bodyTextVariant({size:u}),l.generateClass.textColorVariant({color:r})];return i&&n.push("font-bold"),n.join(" ")},c=u=>{const r=b.navItem.children.length;g.value!==void 0&&(u==="down"&&m.value<r-1&&m.value++,u==="up"&&m.value>0&&m.value--,g.value[m.value].focus())},C=(u,r,i)=>{m.value=-1,k("label-click",u,r,i)},x=(u,r)=>{const{asLink:i}=b;!i&&u.preventDefault(),k("child-click",u,r)};return(u,r)=>(e.openBlock(),e.createElementBlock("div",{onKeyup:[r[0]||(r[0]=e.withKeys(i=>c("down"),["down"])),r[1]||(r[1]=e.withKeys(i=>c("up"),["up"]))]},[e.createVNode(e.unref(l.DropdownContainer),null,{toggler:e.withCtx(({toggle:i,dropdownState:n})=>[e.createElementVNode("div",null,[e.createElementVNode("button",{class:e.normalizeClass(["nav__text flex items-center gap-3xs align-middle tracking-wider outline-none",f(t.menuTextSize,t.menuTextColor,t.menuTextBold)]),onClick:h=>(i(h),C(h,t.navItem.title,n))},[e.createElementVNode("span",null,e.toDisplayString(t.navItem.title),1),(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",class:e.normalizeClass(["h-[0.8rem] fill-current",[n?"rotate-180":"rotate-0","transition-transform duration-300 ease-in"]])},[...r[2]||(r[2]=[e.createElementVNode("path",{d:"M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"},null,-1)])],2))],10,F),t.showHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["nav__decorator relative -top-0.5 h-1.5",e.unref(l.generateClass).beforeBgColorVariant({color:t.highlightColor})])},null,2)):e.createCommentVNode("",!0)])]),default:e.withCtx(()=>[e.createVNode(e.unref(l.DropdownContent),{"custom-class":"border drop-shadow-sm"},{default:e.withCtx(({itemClick:i})=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.navItem.children,(n,h)=>(e.openBlock(),e.createElementBlock("a",{href:n.url,target:n.target,key:h,ref_for:!0,ref_key:"navItemRef",ref:g,class:e.normalizeClass(["block w-full px-xs py-2xs transition-all duration-200 ease-linear hover:bg-opacity-50 focus:bg-opacity-50",[e.unref(l.generateClass).bgColorVariant({color:t.bgColor}),e.unref(l.generateClass).hoverBgColorVariant({color:t.highlightColor}),e.unref(l.generateClass).focusBgColorVariant({color:t.highlightColor}),e.unref(l.generateClass).textColorVariant({color:t.menuTextColor}),e.unref(l.generateClass).bodyTextVariant({size:t.menuTextSize})]]),onClick:a=>(i(),x(a,n))},e.toDisplayString(n.title),11,K))),128))]),_:1})]),_:1})],32))}}),[["__scopeId","data-v-1a311f8c"]]),p=["href","target","innerHTML"],I=z(e.defineComponent({__name:"NavLink",props:{navItem:{},menuTextSize:{default:"md"},menuTextColor:{default:"dark-3"},menuTextBold:{type:Boolean,default:!1},showHighlight:{type:Boolean,default:!0},highlightColor:{default:"primary"},asLink:{type:Boolean,default:!0}},emits:["nav-link"],setup(t,{emit:y}){const b=t,k=y,m=(f,c,C)=>{const x=[l.generateClass.bodyTextVariant({size:f}),l.generateClass.textColorVariant({color:c})];return C&&x.push("font-bold"),x.join(" ")},g=(f,c)=>{const{asLink:C}=b;!C&&f.preventDefault(),k("nav-link",f,c)};return(f,c)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("a",{href:t.navItem.url,target:t.navItem.target,innerHTML:t.navItem.title,class:e.normalizeClass(["nav__text tracking-wider outline-none",m(t.menuTextSize,t.menuTextColor,t.menuTextBold)]),onClick:c[0]||(c[0]=C=>g(C,t.navItem))},null,10,p),t.showHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["nav__decorator relative -top-0.5 h-1.5",e.unref(l.generateClass).beforeBgColorVariant({color:t.highlightColor})])},null,2)):e.createCommentVNode("",!0)]))}}),[["__scopeId","data-v-d390be01"]]),G={class:"flex flex-shrink-0 items-center self-center"},q={class:"mr-2xs h-md align-middle md:mr-sm md:h-lg lg:h-xl"},W=["href","target"],P=["src","alt"],U=["src","alt"],J={class:"ml-2 flex flex-col justify-center"},Q=["href","target"],X=["innerHTML"],Y={class:"hidden flex-wrap lg:flex"},Z={key:0,class:"hidden lg:block"},v={class:"flex flex-col items-center justify-center p-xs"},_={key:0},ee=e.defineComponent({__name:"MclHeaderA",props:{logo:{},logoSmall:{},logoAlt:{default:""},title:{},titleSize:{default:"md"},titleColor:{default:"dark-3"},titleBlockAsLink:{type:Boolean,default:!1},titleBlockLinkTarget:{default:"_self"},titleBlockLink:{},menuItems:{},menuItemAsLink:{type:Boolean,default:!1},menuTextSize:{default:"md"},menuTextColor:{default:"dark-3"},menuTextBold:{type:Boolean,default:!1},showHighlight:{type:Boolean,default:!0},highlightColor:{default:"primary"},bgColor:{default:"light-1"},mobileMenuBgColor:{default:"light-2"},drawerBtnColor:{default:"dark-1"},showDrawerBorder:{type:Boolean,default:!0},fadeInOnScroll:{type:Boolean,default:!0},scrollDistance:{default:50}},emits:["toggle-drawer","title-click","menu-click","collapse-click"],setup(t,{expose:y,emit:b}){const k=t,m=e.ref(),g=e.useSlots(),f=b,c=()=>{m.value?.headerClose()},C=n=>{const{titleBlockAsLink:h,titleBlockLink:a,titleBlockLinkTarget:o}=k;h||n.preventDefault(),f("title-click",n,a,o),c()},x=(n,h)=>{const{menuItemAsLink:a}=k;a||n.preventDefault(),f("menu-click",n,h),c()},u=(n,h,a)=>{f("collapse-click",n,h,a)},r=(n,h)=>[l.generateClass.h2Variant({size:n}),l.generateClass.textColorVariant({color:h})].join(" "),i=n=>{const h=n;return typeof h.children>"u"?!1:h.children.length>0};return y({headerClose:c}),(n,h)=>(e.openBlock(),e.createBlock(e.unref(l.HeaderHorizontal),{ref_key:"componentRef",ref:m,"bg-color":t.bgColor,"drawer-btn-border":t.showDrawerBorder,"drawer-btn-color":t.drawerBtnColor,"fade-in-on-scroll":t.fadeInOnScroll,"mobile-menu-bg-color":t.mobileMenuBgColor},{content:e.withCtx(()=>[e.createElementVNode("div",G,[e.createElementVNode("div",q,[e.createElementVNode("a",{href:t.titleBlockLink,target:t.titleBlockLinkTarget,onClick:C},[e.createElementVNode("img",{src:t.logo,alt:t.logoAlt,class:e.normalizeClass(["h-full",[t.logoSmall?"hidden lg:inline-block":"inline-block"]])},null,10,P),t.logoSmall?(e.openBlock(),e.createElementBlock("img",{key:0,src:t.logoSmall,alt:t.logoAlt,class:"inline-block h-full lg:hidden"},null,8,U)):e.createCommentVNode("",!0)],8,W)]),e.createElementVNode("div",J,[e.createElementVNode("a",{href:t.titleBlockLink,target:t.titleBlockLinkTarget,onClick:C},[e.createElementVNode("h2",{class:e.normalizeClass(["inline-block align-middle tracking-wider",r(t.titleSize,t.titleColor)]),innerHTML:t.title},null,10,X)],8,Q),e.createElementVNode("ul",Y,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.menuItems,(a,o)=>(e.openBlock(),e.createElementBlock("li",{class:"mr-xs last:mr-0",key:`menu-${o}`},[i(a)?(e.openBlock(),e.createBlock(O,{key:1,"nav-item":a,"menu-text-color":t.menuTextColor,"menu-text-size":t.menuTextSize,"menu-text-bold":t.menuTextBold,"display-highlight":t.showHighlight,"highlight-color":t.highlightColor,"bg-color":t.bgColor,"as-link":t.menuItemAsLink,onChildClick:x,onLabelClick:u},null,8,["nav-item","menu-text-color","menu-text-size","menu-text-bold","display-highlight","highlight-color","bg-color","as-link"])):(e.openBlock(),e.createBlock(I,{key:0,"nav-item":a,"menu-text-color":t.menuTextColor,"menu-text-size":t.menuTextSize,"menu-text-bold":t.menuTextBold,"display-highlight":t.showHighlight,"highlight-color":t.highlightColor,"as-link":t.menuItemAsLink,onNavLink:x},null,8,["nav-item","menu-text-color","menu-text-size","menu-text-bold","display-highlight","highlight-color","as-link"]))]))),128))])])])]),"content-right":e.withCtx(()=>[g["content-right"]?(e.openBlock(),e.createElementBlock("div",Z,[e.renderSlot(n.$slots,"content-right")])):e.createCommentVNode("",!0)]),"mobile-content":e.withCtx(()=>[e.createElementVNode("div",null,[e.createVNode(e.unref(l.AccordionGroup),null,{default:e.withCtx(()=>[e.createElementVNode("ul",v,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.menuItems,(a,o)=>(e.openBlock(),e.createElementBlock("li",{class:"mb-2xs last:mb-0",key:`mobile-${o}`},[i(a)?(e.openBlock(),e.createBlock(R,{key:1,"nav-id":a.title,"nav-item":a,"menu-text-color":t.menuTextColor,"menu-text-size":t.menuTextSize,"menu-text-bold":t.menuTextBold,"display-highlight":t.showHighlight,"highlight-color":t.highlightColor,"as-link":t.menuItemAsLink,onChildClick:x,onLabelClick:u},null,8,["nav-id","nav-item","menu-text-color","menu-text-size","menu-text-bold","display-highlight","highlight-color","as-link"])):(e.openBlock(),e.createBlock(I,{key:0,"nav-item":a,"menu-text-color":t.menuTextColor,"menu-text-size":t.menuTextSize,"menu-text-bold":t.menuTextBold,"display-highlight":t.showHighlight,"highlight-color":t.highlightColor,"as-link":t.menuItemAsLink,onNavLink:x},null,8,["nav-item","menu-text-color","menu-text-size","menu-text-bold","display-highlight","highlight-color","as-link"]))]))),128))])]),_:1}),g["mobile-bottom"]?(e.openBlock(),e.createElementBlock("div",_,[e.renderSlot(n.$slots,"mobile-bottom",{headerClose:c})])):e.createCommentVNode("",!0)])]),_:3},8,["bg-color","drawer-btn-border","drawer-btn-color","fade-in-on-scroll","mobile-menu-bg-color"]))}}),te={class:"relative flex items-center justify-center gap-2"},le=["href","target","onClick"],oe={class:"relative"},T=e.defineComponent({__name:"NavCollapseVertical",props:{navId:{},navLocation:{},menuItem:{},textColor:{default:"dark-3"},textSize:{default:"md"},fontBold:{type:Boolean,default:!1},dHl:{type:Boolean,default:!0},hlColor:{default:"primary"},asLink:{type:Boolean,default:!0}},emits:["label-click","child-click"],setup(t,{expose:y,emit:b}){const k=t,m=e.ref(!1),g=e.ref(),f=b,c=a=>{m.value=a},C=()=>{g.value?.close()},x=(a,o)=>{g.value?.toggle(),f("label-click",a,o,m.value)},u=(a,o)=>{const{asLink:s}=k;s||a.preventDefault(),f("child-click",a,o),g.value?.close(),C()},r=e.computed(()=>{const{navId:a,navLocation:o}=k,d=a.toLowerCase().replaceAll(" ","-");return`nav-${o}-${d}`}),i=e.computed(()=>{const{textColor:a,textSize:o,dHl:s,hlColor:d,fontBold:B}=k,w=[l.generateClass.bodyTextVariant({size:o})];if(!s){const N=[l.generateClass.textColorVariant({color:a}),l.generateClass.hoverTextColorVariant({color:d}),l.generateClass.focusTextColorVariant({color:d})];w.push(N.join(" "))}if(s){const N=l.generateClass.beforeBgColorVariant({color:d});w.push("before:inset-y-0 before:left-0 before:transition-[width] before:duration-300 before:ease-linear before:w-0 hover:before:w-full focus:before:w-full "+N);const E=[l.generateClass.textColorVariant({color:d}),l.generateClass.hoverTextColorVariant({color:a}),l.generateClass.focusTextColorVariant({color:a})];w.push(E.join(" "))}return B&&w.push("font-bold"),w.join(" ")}),n=e.computed(()=>{const{dHl:a,hlColor:o,navLocation:s}=k,d=[];if(!a)return"";const B="before:absolute before:w-xs before:h-full before:mcl-bg-primary before:bg-opacity-70 ",w=s==="desktop"?"before:left-0 ":"before:right-0 ";return d.push(B+w+l.generateClass.beforeBgColorVariant({color:o})),d.join(" ")}),h=e.computed(()=>{const{textColor:a,textSize:o,dHl:s,hlColor:d,fontBold:B,navLocation:w}=k;let N=o==="xl"?"lg":o==="lg"?"md":o==="md"?"sm":"xs";const L=[l.generateClass.textColorVariant({color:a}),l.generateClass.bodyTextVariant({size:N})];if(w==="mobile"&&L.push("text-end"),!s){const E=[l.generateClass.textColorVariant({color:a}),l.generateClass.hoverTextColorVariant({color:d}),l.generateClass.focusTextColorVariant({color:d})];L.push(E.join(" "))}if(s){const E=l.generateClass.beforeBgColorVariant({color:d}),we="before:inset-y-0 before:duration-300 before:ease-linear before:w-0 hover:before:w-full focus:before:w-full before:bg-opacity-70 ",Ve=w==="desktop"?"before:left-0 before:transition-[width] ":"before:left-full hover:before:left-0 focus:before:left-0 before:transition-[all] ";L.push(we+Ve+E);const Le=[l.generateClass.textColorVariant({color:d}),l.generateClass.hoverTextColorVariant({color:a}),l.generateClass.focusTextColorVariant({color:a})];L.push(Le.join(" "))}return B&&L.push("font-bold"),L.join(" ")});return y({closeCollapse:C}),(a,o)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("button",{class:e.normalizeClass(["relative block w-full px-xs py-2xs text-center transition-colors duration-300 ease-linear before:absolute",[i.value]]),onClick:o[0]||(o[0]=s=>x(s,t.menuItem.title))},[e.createElementVNode("div",te,[e.createElementVNode("span",null,e.toDisplayString(t.menuItem.title),1),(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",class:e.normalizeClass(["h-[0.8rem] fill-current",[m.value?"rotate-180":"rotate-0","transition-transform duration-300 ease-in"]])},[...o[1]||(o[1]=[e.createElementVNode("path",{d:"M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"},null,-1)])],2))])],2),e.createVNode(e.unref(l.Collapse),{ref_key:"collapseRef",ref:g,id:r.value,onOpen:c,onClose:c},{default:e.withCtx(()=>[e.createElementVNode("ul",{class:e.normalizeClass(["relative",[n.value]])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.menuItem.children,(s,d)=>(e.openBlock(),e.createElementBlock("li",{key:d,class:e.normalizeClass([t.navLocation==="desktop"?"ml-xs":"mr-xs"])},[e.createElementVNode("a",{href:s.url,target:s.target,onClick:B=>u(B,s),class:e.normalizeClass(["relative block w-full overflow-x-hidden px-2xs py-3xs transition-colors duration-300 ease-linear before:absolute",[h.value]])},[e.createElementVNode("span",oe,e.toDisplayString(s.title),1)],10,le)],2))),128))],2)]),_:1},8,["id"])]))}}),ne=["href","target"],ae={class:"relative"},S=e.defineComponent({__name:"NavLinkVertical",props:{menuItem:{},textColor:{default:"dark-3"},textSize:{default:"md"},fontBold:{type:Boolean,default:!1},dHl:{type:Boolean,default:!0},hlColor:{default:"primary"},asLink:{type:Boolean,default:!0}},emits:["menu-click"],setup(t,{emit:y}){const b=t,k=y,m=(f,c)=>{const{asLink:C}=b;C||f.preventDefault(),k("menu-click",f,c)},g=e.computed(()=>{const{textColor:f,textSize:c,dHl:C,hlColor:x,fontBold:u}=b,r=[l.generateClass.bodyTextVariant({size:c})];if(!C){const i=[l.generateClass.textColorVariant({color:f}),l.generateClass.hoverTextColorVariant({color:x}),l.generateClass.focusTextColorVariant({color:x})];r.push(i.join(" "))}if(C){const i=l.generateClass.beforeBgColorVariant({color:x});r.push("before:inset-y-0 before:left-0 before:transition-[width] before:duration-300 before:ease-linear before:w-0 hover:before:w-full focus:before:w-full "+i);const h=[l.generateClass.textColorVariant({color:x}),l.generateClass.hoverTextColorVariant({color:f}),l.generateClass.focusTextColorVariant({color:f})];r.push(h.join(" "))}return u&&r.push("font-bold"),r.join(" ")});return(f,c)=>(e.openBlock(),e.createElementBlock("a",{class:e.normalizeClass([[g.value],"relative block w-full px-xs py-2xs text-center transition-colors duration-300 ease-linear before:absolute"]),href:t.menuItem.url,target:t.menuItem.target?t.menuItem.target:"_self",onClick:c[0]||(c[0]=C=>m(C,t.menuItem))},[e.createElementVNode("span",ae,e.toDisplayString(t.menuItem.title),1)],10,ne))}}),re={class:"p-md text-center"},ie=["href","target"],ce=["src","alt"],se=["href","target"],de=["innerHTML"],fe={class:"flex flex-col"},he={key:0},me={class:"flex h-full flex-col justify-between"},ke={class:"p-md text-center"},Ce=["href","target"],ge=["src","alt"],xe=["href","target"],ue=["innerHTML"],be={class:"flex flex-col"},Be={key:0},ye=e.defineComponent({__name:"MclHeaderB",props:{logo:{},logoAlt:{default:""},title:{},titleSize:{default:"md"},titleColor:{default:"dark-3"},titleBlockAsLink:{type:Boolean,default:!1},titleBlockLinkTarget:{default:"_self"},titleBlockLink:{},menuItems:{},menuItemAsLink:{type:Boolean,default:!1},menuTextSize:{default:"md"},menuTextColor:{default:"dark-3"},menuTextBold:{type:Boolean,default:!1},showHighlight:{type:Boolean,default:!0},highlightColor:{default:"primary"},bgColor:{default:"light-1"},drawerBtnColor:{default:"dark-1"},showDrawerBorder:{type:Boolean,default:!0},headerWidth:{default:160}},emits:["toggle-drawer","title-click","menu-click","collapse-click"],setup(t,{expose:y,emit:b}){const k=t,m=e.useSlots(),g=b,f=e.ref(),c=e.ref(),C=(o,s)=>{g("toggle-drawer",o,s)},x=()=>{f.value?.headerClose()},u=()=>{for(let o=0;o<c.value.length;o++)c.value[o].closeCollapse()},r=o=>{const{titleBlockAsLink:s,titleBlockLink:d,titleBlockLinkTarget:B}=k;s||o.preventDefault(),g("title-click",o,d,B),x(),u()},i=(o,s)=>{const{menuItemAsLink:d}=k;d||o.preventDefault(),g("menu-click",o,s),x(),u()},n=(o,s,d)=>{g("collapse-click",o,s,d)},h=e.computed(()=>{const{titleSize:o,titleColor:s}=k;return[l.generateClass.h3Variant({size:o}),l.generateClass.textColorVariant({color:s})].join(" ")}),a=o=>{const s=o;return typeof s.children>"u"?!1:s.children.length>0};return y({headerClose:x}),(o,s)=>(e.openBlock(),e.createBlock(e.unref(l.HeaderVertical),{"bg-color":t.bgColor,"drawer-btn-color":t.drawerBtnColor,"drawer-btn-border":t.showDrawerBorder,"header-width":t.headerWidth,onToggleDrawer:C,ref_key:"componentRef",ref:f},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"default")]),content:e.withCtx(()=>[e.createElementVNode("div",null,[e.createElementVNode("div",re,[e.createElementVNode("a",{href:t.titleBlockLink,target:t.titleBlockLinkTarget,onClick:r},[e.createElementVNode("img",{src:t.logo,alt:t.logoAlt,class:"inline-block h-full max-h-xl"},null,8,ce)],8,ie)]),e.createElementVNode("div",null,[e.createElementVNode("a",{href:t.titleBlockLink,target:t.titleBlockLinkTarget,onClick:r},[e.createElementVNode("h3",{class:e.normalizeClass([h.value,"mb-md text-center"]),innerHTML:t.title},null,10,de)],8,se)]),e.createVNode(e.unref(l.AccordionGroup),null,{default:e.withCtx(()=>[e.createElementVNode("ul",fe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.menuItems,(d,B)=>(e.openBlock(),e.createElementBlock("li",{key:`menu-${B}`},[a(d)?(e.openBlock(),e.createBlock(T,{key:1,ref_for:!0,ref_key:"collapseRef",ref:c,"nav-id":d.title,"nav-location":"desktop","menu-item":d,"as-link":t.menuItemAsLink,"text-color":t.menuTextColor,"text-size":t.menuTextSize,"font-bold":t.menuTextBold,"d-hl":t.showHighlight,"hl-color":t.highlightColor,onChildClick:i,onLabelClick:n},null,8,["nav-id","menu-item","as-link","text-color","text-size","font-bold","d-hl","hl-color"])):(e.openBlock(),e.createBlock(S,{key:0,"menu-item":d,"as-link":t.menuItemAsLink,"text-color":t.menuTextColor,"text-size":t.menuTextSize,"font-bold":t.menuTextBold,"d-hl":t.showHighlight,"hl-color":t.highlightColor,onMenuClick:i},null,8,["menu-item","as-link","text-color","text-size","font-bold","d-hl","hl-color"]))]))),128))])]),_:1})])]),"content-bottom":e.withCtx(()=>[m["content-bottom"]?(e.openBlock(),e.createElementBlock("div",he,[e.renderSlot(o.$slots,"content-bottom")])):e.createCommentVNode("",!0)]),"mobile-content":e.withCtx(({headerClose:d})=>[e.createElementVNode("div",me,[e.createElementVNode("div",null,[e.createElementVNode("div",ke,[e.createElementVNode("a",{href:t.titleBlockLink,target:t.titleBlockLinkTarget,onClick:r},[e.createElementVNode("img",{src:t.logo,alt:t.logoAlt,class:"inline-block h-full max-h-xl"},null,8,ge)],8,Ce)]),e.createElementVNode("div",null,[e.createElementVNode("a",{href:t.titleBlockLink,target:t.titleBlockLinkTarget,onClick:r},[e.createElementVNode("h3",{class:e.normalizeClass([h.value,"mb-md text-center"]),innerHTML:t.title},null,10,ue)],8,xe)]),e.createVNode(e.unref(l.AccordionGroup),null,{default:e.withCtx(()=>[e.createElementVNode("ul",be,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.menuItems,(B,w)=>(e.openBlock(),e.createElementBlock("li",{key:`menu-${w}`},[a(B)?(e.openBlock(),e.createBlock(T,{key:1,"nav-id":B.title,"nav-location":"mobile","menu-item":B,"as-link":t.menuItemAsLink,"text-color":t.menuTextColor,"text-size":t.menuTextSize,"font-bold":t.menuTextBold,"d-hl":t.showHighlight,"hl-color":t.highlightColor,onChildClick:i,onLabelClick:n},null,8,["nav-id","menu-item","as-link","text-color","text-size","font-bold","d-hl","hl-color"])):(e.openBlock(),e.createBlock(S,{key:0,"menu-item":B,"as-link":t.menuItemAsLink,"text-color":t.menuTextColor,"text-size":t.menuTextSize,"font-bold":t.menuTextBold,"d-hl":t.showHighlight,"hl-color":t.highlightColor,onMenuClick:i},null,8,["menu-item","as-link","text-color","text-size","font-bold","d-hl","hl-color"]))]))),128))])]),_:1})]),m["mobile-bottom"]?(e.openBlock(),e.createElementBlock("div",Be,[e.renderSlot(o.$slots,"mobile-bottom",{headerClose:d})])):e.createCommentVNode("",!0)])]),_:3},8,["bg-color","drawer-btn-color","drawer-btn-border","header-width"]))}});V.MclHeaderA=ee,V.MclHeaderB=ye,Object.defineProperty(V,Symbol.toStringTag,{value:"Module"})}));
+(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode('.nav__decorator[data-v-1ce9ae01]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-1ce9ae01]:before,.nav__text:hover+.nav__decorator[data-v-1ce9ae01]:before{width:100%}.nav__decorator[data-v-a36072d4]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-a36072d4]:before,.nav__text:hover+.nav__decorator[data-v-a36072d4]:before{width:100%}.nav__decorator[data-v-65d3897d]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-65d3897d]:before,.nav__text:hover+.nav__decorator[data-v-65d3897d]:before{width:100%}')),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+(function(V,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@bobbykim/manguito-theme")):typeof define=="function"&&define.amd?define(["exports","vue","@bobbykim/manguito-theme"],e):(V=typeof globalThis<"u"?globalThis:V||self,e(V.MclHeader={},V.Vue,V.ManguitoTheme))})(this,(function(V,e,l){"use strict";const $={class:"flex w-full flex-col"},H={class:"self-center"},A={class:"relative pt-2xs"},M={class:"relative flex flex-col"},D=["href","target","onClick"],j=e.defineComponent({__name:"NavCollapse",props:{navId:{},navItem:{},bgColor:{default:"light-2"},hoverBgColor:{default:"dark-1"},menuTextSize:{default:"md"},menuTextColor:{default:"dark-3"},menuTextBold:{type:Boolean,default:!1},showHighlight:{type:Boolean,default:!0},highlightColor:{default:"primary"},asLink:{type:Boolean,default:!0}},emits:["child-click","label-click"],setup(t,{emit:y}){const b=t,k=y,m=e.ref(!1),g=e.computed(()=>{const{navId:r}=b;return`nav-${r.toLowerCase().replaceAll(" ","-")}`}),f=e.ref(),c=r=>{m.value=r},C=(r,i)=>{f.value?.toggle(),k("label-click",r,i,m.value)},x=(r,i)=>{const{asLink:n}=b;n||r.preventDefault(),k("child-click",r,i)},u=(r,i,n)=>{const h=[l.generateClass.bodyTextVariant({size:r}),l.generateClass.textColorVariant({color:i})];return n&&h.push("font-bold"),h.join(" ")};return(r,i)=>(e.openBlock(),e.createElementBlock("div",$,[e.createElementVNode("div",H,[e.createElementVNode("button",{class:e.normalizeClass(["nav__text flex items-center gap-3xs align-middle tracking-wider outline-none",u(t.menuTextSize,t.menuTextColor,t.menuTextBold)]),onClick:i[0]||(i[0]=n=>C(n,t.navItem.title))},[e.createElementVNode("span",null,e.toDisplayString(t.navItem.title),1),(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",class:e.normalizeClass(["h-[0.8rem] fill-current",[m.value?"rotate-180":"rotate-0","transition-transform duration-300 ease-in"]])},[...i[1]||(i[1]=[e.createElementVNode("path",{d:"M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"},null,-1)])],2))],2),t.showHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["nav__decorator relative -top-0.5 h-1.5",e.unref(l.generateClass).beforeBgColorVariant({color:t.highlightColor})])},null,2)):e.createCommentVNode("",!0)]),e.createVNode(e.unref(l.Collapse),{ref_key:"collapseRef",ref:f,id:g.value,onOpen:c,onClose:c},{default:e.withCtx(()=>[e.createElementVNode("div",A,[t.showHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["absolute -left-4 h-full w-md bg-opacity-25",e.unref(l.generateClass).bgColorVariant({color:t.highlightColor})])},null,2)):e.createCommentVNode("",!0),e.createElementVNode("div",M,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.navItem.children,(n,h)=>(e.openBlock(),e.createElementBlock("a",{href:n.url,target:n.target,class:e.normalizeClass(["w-full pb-2xs last:pb-0",[e.unref(l.generateClass).textColorVariant({color:t.menuTextColor}),e.unref(l.generateClass).bodyTextVariant({size:t.menuTextSize})]]),key:h,onClick:a=>x(a,n)},e.toDisplayString(n.title),11,D))),128))])])]),_:1},8,["id"])]))}}),z=(t,y)=>{const b=t.__vccOpts||t;for(const[k,m]of y)b[k]=m;return b},R=z(j,[["__scopeId","data-v-1ce9ae01"]]),F=["onClick"],K=["href","target","onClick"],O=z(e.defineComponent({__name:"NavDropdown",props:{navItem:{},bgColor:{default:"light-1"},menuTextSize:{default:"md"},menuTextColor:{default:"dark-3"},menuTextBold:{type:Boolean,default:!1},showHighlight:{type:Boolean,default:!0},highlightColor:{default:"primary"},asLink:{type:Boolean,default:!0}},emits:["label-click","child-click"],setup(t,{emit:y}){const b=t,k=y,m=e.ref(-1),g=e.ref(),f=(u,r,i)=>{const n=[l.generateClass.bodyTextVariant({size:u}),l.generateClass.textColorVariant({color:r})];return i&&n.push("font-bold"),n.join(" ")},c=u=>{const r=b.navItem.children.length;g.value!==void 0&&(u==="down"&&m.value<r-1&&m.value++,u==="up"&&m.value>0&&m.value--,g.value[m.value].focus())},C=(u,r,i)=>{m.value=-1,k("label-click",u,r,i)},x=(u,r)=>{const{asLink:i}=b;i||u.preventDefault(),k("child-click",u,r)};return(u,r)=>(e.openBlock(),e.createElementBlock("div",{onKeyup:[r[0]||(r[0]=e.withKeys(i=>c("down"),["down"])),r[1]||(r[1]=e.withKeys(i=>c("up"),["up"]))]},[e.createVNode(e.unref(l.DropdownContainer),null,{toggler:e.withCtx(({toggle:i,dropdownState:n})=>[e.createElementVNode("div",null,[e.createElementVNode("button",{class:e.normalizeClass(["nav__text flex items-center gap-3xs align-middle tracking-wider outline-none",f(t.menuTextSize,t.menuTextColor,t.menuTextBold)]),onClick:h=>(i(h),C(h,t.navItem.title,n))},[e.createElementVNode("span",null,e.toDisplayString(t.navItem.title),1),(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",class:e.normalizeClass(["h-[0.8rem] fill-current",[n?"rotate-180":"rotate-0","transition-transform duration-300 ease-in"]])},[...r[2]||(r[2]=[e.createElementVNode("path",{d:"M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"},null,-1)])],2))],10,F),t.showHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["nav__decorator relative -top-0.5 h-1.5",e.unref(l.generateClass).beforeBgColorVariant({color:t.highlightColor})])},null,2)):e.createCommentVNode("",!0)])]),default:e.withCtx(()=>[e.createVNode(e.unref(l.DropdownContent),{"custom-class":"border drop-shadow-sm"},{default:e.withCtx(({itemClick:i})=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.navItem.children,(n,h)=>(e.openBlock(),e.createElementBlock("a",{href:n.url,target:n.target,key:h,ref_for:!0,ref_key:"navItemRef",ref:g,class:e.normalizeClass(["block w-full px-xs py-2xs transition-all duration-200 ease-linear hover:bg-opacity-50 focus:bg-opacity-50",[e.unref(l.generateClass).bgColorVariant({color:t.bgColor}),e.unref(l.generateClass).hoverBgColorVariant({color:t.highlightColor}),e.unref(l.generateClass).focusBgColorVariant({color:t.highlightColor}),e.unref(l.generateClass).textColorVariant({color:t.menuTextColor}),e.unref(l.generateClass).bodyTextVariant({size:t.menuTextSize})]]),onClick:a=>(i(),x(a,n))},e.toDisplayString(n.title),11,K))),128))]),_:1})]),_:1})],32))}}),[["__scopeId","data-v-a36072d4"]]),G=["href","target","innerHTML"],I=z(e.defineComponent({__name:"NavLink",props:{navItem:{},menuTextSize:{default:"md"},menuTextColor:{default:"dark-3"},menuTextBold:{type:Boolean,default:!1},showHighlight:{type:Boolean,default:!0},highlightColor:{default:"primary"},asLink:{type:Boolean,default:!0}},emits:["nav-link"],setup(t,{emit:y}){const b=t,k=y,m=(f,c,C)=>{const x=[l.generateClass.bodyTextVariant({size:f}),l.generateClass.textColorVariant({color:c})];return C&&x.push("font-bold"),x.join(" ")},g=(f,c)=>{const{asLink:C}=b;C||f.preventDefault(),k("nav-link",f,c)};return(f,c)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("a",{href:t.navItem.url,target:t.navItem.target,innerHTML:t.navItem.title,class:e.normalizeClass(["nav__text tracking-wider outline-none",m(t.menuTextSize,t.menuTextColor,t.menuTextBold)]),onClick:c[0]||(c[0]=C=>g(C,t.navItem))},null,10,G),t.showHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["nav__decorator relative -top-0.5 h-1.5",e.unref(l.generateClass).beforeBgColorVariant({color:t.highlightColor})])},null,2)):e.createCommentVNode("",!0)]))}}),[["__scopeId","data-v-65d3897d"]]),q={class:"flex flex-shrink-0 items-center self-center"},W={class:"mr-2xs h-md align-middle md:mr-sm md:h-lg lg:h-xl"},P=["href","target"],U=["src","alt"],J=["src","alt"],Q={class:"ml-2 flex flex-col justify-center"},X=["href","target"],Y=["innerHTML"],Z={class:"hidden flex-wrap lg:flex"},p={key:0,class:"hidden lg:block"},v={class:"flex flex-col items-center justify-center p-xs"},_={key:0},ee=e.defineComponent({__name:"MclHeaderA",props:{logo:{},logoSmall:{},logoAlt:{default:""},title:{},titleSize:{default:"md"},titleColor:{default:"dark-3"},titleBlockAsLink:{type:Boolean,default:!1},titleBlockLinkTarget:{default:"_self"},titleBlockLink:{},menuItems:{},menuItemAsLink:{type:Boolean,default:!1},menuTextSize:{default:"md"},menuTextColor:{default:"dark-3"},menuTextBold:{type:Boolean,default:!1},showHighlight:{type:Boolean,default:!0},highlightColor:{default:"primary"},bgColor:{default:"light-1"},navLabel:{},menuLabel:{},mobileMenuBgColor:{default:"light-2"},drawerBtnColor:{default:"dark-1"},showDrawerBorder:{type:Boolean,default:!0},fadeInOnScroll:{type:Boolean,default:!0},scrollDistance:{default:50}},emits:["toggle-drawer","title-click","menu-click","collapse-click"],setup(t,{expose:y,emit:b}){const k=t,m=e.ref(),g=e.useSlots(),f=b,c=()=>{m.value?.headerClose()},C=n=>{const{titleBlockAsLink:h,titleBlockLink:a,titleBlockLinkTarget:o}=k;h||n.preventDefault(),f("title-click",n,a,o),c()},x=(n,h)=>{const{menuItemAsLink:a}=k;a||n.preventDefault(),f("menu-click",n,h),c()},u=(n,h,a)=>{f("collapse-click",n,h,a)},r=(n,h)=>[l.generateClass.h2Variant({size:n}),l.generateClass.textColorVariant({color:h})].join(" "),i=n=>{const h=n;return typeof h.children>"u"?!1:h.children.length>0};return y({headerClose:c}),(n,h)=>(e.openBlock(),e.createBlock(e.unref(l.HeaderHorizontal),{"nav-label":t.navLabel,"menu-label":t.menuLabel,ref_key:"componentRef",ref:m,"bg-color":t.bgColor,"drawer-btn-border":t.showDrawerBorder,"drawer-btn-color":t.drawerBtnColor,"fade-in-on-scroll":t.fadeInOnScroll,"mobile-menu-bg-color":t.mobileMenuBgColor},{content:e.withCtx(()=>[e.createElementVNode("div",q,[e.createElementVNode("div",W,[e.createElementVNode("a",{href:t.titleBlockLink,target:t.titleBlockLinkTarget,onClick:C},[e.createElementVNode("img",{src:t.logo,alt:t.logoAlt,class:e.normalizeClass(["h-full",[t.logoSmall?"hidden lg:inline-block":"inline-block"]])},null,10,U),t.logoSmall?(e.openBlock(),e.createElementBlock("img",{key:0,src:t.logoSmall,alt:t.logoAlt,class:"inline-block h-full lg:hidden"},null,8,J)):e.createCommentVNode("",!0)],8,P)]),e.createElementVNode("div",Q,[e.createElementVNode("a",{href:t.titleBlockLink,target:t.titleBlockLinkTarget,onClick:C},[e.createElementVNode("h2",{class:e.normalizeClass(["inline-block align-middle tracking-wider",r(t.titleSize,t.titleColor)]),innerHTML:t.title},null,10,Y)],8,X),e.createElementVNode("ul",Z,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.menuItems,(a,o)=>(e.openBlock(),e.createElementBlock("li",{class:"mr-xs last:mr-0",key:`menu-${o}`},[i(a)?(e.openBlock(),e.createBlock(O,{key:1,"nav-item":a,"menu-text-color":t.menuTextColor,"menu-text-size":t.menuTextSize,"menu-text-bold":t.menuTextBold,"display-highlight":t.showHighlight,"highlight-color":t.highlightColor,"bg-color":t.bgColor,"as-link":t.menuItemAsLink,onChildClick:x,onLabelClick:u},null,8,["nav-item","menu-text-color","menu-text-size","menu-text-bold","display-highlight","highlight-color","bg-color","as-link"])):(e.openBlock(),e.createBlock(I,{key:0,"nav-item":a,"menu-text-color":t.menuTextColor,"menu-text-size":t.menuTextSize,"menu-text-bold":t.menuTextBold,"display-highlight":t.showHighlight,"highlight-color":t.highlightColor,"as-link":t.menuItemAsLink,onNavLink:x},null,8,["nav-item","menu-text-color","menu-text-size","menu-text-bold","display-highlight","highlight-color","as-link"]))]))),128))])])])]),"content-right":e.withCtx(()=>[g["content-right"]?(e.openBlock(),e.createElementBlock("div",p,[e.renderSlot(n.$slots,"content-right")])):e.createCommentVNode("",!0)]),"mobile-content":e.withCtx(()=>[e.createElementVNode("div",null,[e.createVNode(e.unref(l.AccordionGroup),null,{default:e.withCtx(()=>[e.createElementVNode("ul",v,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.menuItems,(a,o)=>(e.openBlock(),e.createElementBlock("li",{class:"mb-2xs last:mb-0",key:`mobile-${o}`},[i(a)?(e.openBlock(),e.createBlock(R,{key:1,"nav-id":a.title,"nav-item":a,"menu-text-color":t.menuTextColor,"menu-text-size":t.menuTextSize,"menu-text-bold":t.menuTextBold,"display-highlight":t.showHighlight,"highlight-color":t.highlightColor,"as-link":t.menuItemAsLink,onChildClick:x,onLabelClick:u},null,8,["nav-id","nav-item","menu-text-color","menu-text-size","menu-text-bold","display-highlight","highlight-color","as-link"])):(e.openBlock(),e.createBlock(I,{key:0,"nav-item":a,"menu-text-color":t.menuTextColor,"menu-text-size":t.menuTextSize,"menu-text-bold":t.menuTextBold,"display-highlight":t.showHighlight,"highlight-color":t.highlightColor,"as-link":t.menuItemAsLink,onNavLink:x},null,8,["nav-item","menu-text-color","menu-text-size","menu-text-bold","display-highlight","highlight-color","as-link"]))]))),128))])]),_:1}),g["mobile-bottom"]?(e.openBlock(),e.createElementBlock("div",_,[e.renderSlot(n.$slots,"mobile-bottom",{headerClose:c})])):e.createCommentVNode("",!0)])]),_:3},8,["nav-label","menu-label","bg-color","drawer-btn-border","drawer-btn-color","fade-in-on-scroll","mobile-menu-bg-color"]))}}),te={class:"relative flex items-center justify-center gap-2"},le=["href","target","onClick"],oe={class:"relative"},T=e.defineComponent({__name:"NavCollapseVertical",props:{navId:{},navLocation:{},menuItem:{},textColor:{default:"dark-3"},textSize:{default:"md"},fontBold:{type:Boolean,default:!1},dHl:{type:Boolean,default:!0},hlColor:{default:"primary"},asLink:{type:Boolean,default:!0}},emits:["label-click","child-click"],setup(t,{expose:y,emit:b}){const k=t,m=e.ref(!1),g=e.ref(),f=b,c=a=>{m.value=a},C=()=>{g.value?.close()},x=(a,o)=>{g.value?.toggle(),f("label-click",a,o,m.value)},u=(a,o)=>{const{asLink:s}=k;s||a.preventDefault(),f("child-click",a,o),g.value?.close(),C()},r=e.computed(()=>{const{navId:a,navLocation:o}=k,d=a.toLowerCase().replaceAll(" ","-");return`nav-${o}-${d}`}),i=e.computed(()=>{const{textColor:a,textSize:o,dHl:s,hlColor:d,fontBold:B}=k,w=[l.generateClass.bodyTextVariant({size:o})];if(!s){const N=[l.generateClass.textColorVariant({color:a}),l.generateClass.hoverTextColorVariant({color:d}),l.generateClass.focusTextColorVariant({color:d})];w.push(N.join(" "))}if(s){const N=l.generateClass.beforeBgColorVariant({color:d});w.push("before:inset-y-0 before:left-0 before:transition-[width] before:duration-300 before:ease-linear before:w-0 hover:before:w-full focus:before:w-full "+N);const E=[l.generateClass.textColorVariant({color:d}),l.generateClass.hoverTextColorVariant({color:a}),l.generateClass.focusTextColorVariant({color:a})];w.push(E.join(" "))}return B&&w.push("font-bold"),w.join(" ")}),n=e.computed(()=>{const{dHl:a,hlColor:o,navLocation:s}=k,d=[];if(!a)return"";const B="before:absolute before:w-xs before:h-full before:mcl-bg-primary before:bg-opacity-70 ",w=s==="desktop"?"before:left-0 ":"before:right-0 ";return d.push(B+w+l.generateClass.beforeBgColorVariant({color:o})),d.join(" ")}),h=e.computed(()=>{const{textColor:a,textSize:o,dHl:s,hlColor:d,fontBold:B,navLocation:w}=k,N=o==="xl"?"lg":o==="lg"?"md":o==="md"?"sm":"xs",L=[l.generateClass.textColorVariant({color:a}),l.generateClass.bodyTextVariant({size:N})];if(w==="mobile"&&L.push("text-end"),!s){const E=[l.generateClass.textColorVariant({color:a}),l.generateClass.hoverTextColorVariant({color:d}),l.generateClass.focusTextColorVariant({color:d})];L.push(E.join(" "))}if(s){const E=l.generateClass.beforeBgColorVariant({color:d}),we="before:inset-y-0 before:duration-300 before:ease-linear before:w-0 hover:before:w-full focus:before:w-full before:bg-opacity-70 ",Ve=w==="desktop"?"before:left-0 before:transition-[width] ":"before:left-full hover:before:left-0 focus:before:left-0 before:transition-[all] ";L.push(we+Ve+E);const Le=[l.generateClass.textColorVariant({color:d}),l.generateClass.hoverTextColorVariant({color:a}),l.generateClass.focusTextColorVariant({color:a})];L.push(Le.join(" "))}return B&&L.push("font-bold"),L.join(" ")});return y({closeCollapse:C}),(a,o)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("button",{class:e.normalizeClass(["relative block w-full px-xs py-2xs text-center transition-colors duration-300 ease-linear before:absolute",[i.value]]),onClick:o[0]||(o[0]=s=>x(s,t.menuItem.title))},[e.createElementVNode("div",te,[e.createElementVNode("span",null,e.toDisplayString(t.menuItem.title),1),(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",class:e.normalizeClass(["h-[0.8rem] fill-current",[m.value?"rotate-180":"rotate-0","transition-transform duration-300 ease-in"]])},[...o[1]||(o[1]=[e.createElementVNode("path",{d:"M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"},null,-1)])],2))])],2),e.createVNode(e.unref(l.Collapse),{ref_key:"collapseRef",ref:g,id:r.value,onOpen:c,onClose:c},{default:e.withCtx(()=>[e.createElementVNode("ul",{class:e.normalizeClass(["relative",[n.value]])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.menuItem.children,(s,d)=>(e.openBlock(),e.createElementBlock("li",{key:d,class:e.normalizeClass([t.navLocation==="desktop"?"ml-xs":"mr-xs"])},[e.createElementVNode("a",{href:s.url,target:s.target,onClick:B=>u(B,s),class:e.normalizeClass(["relative block w-full overflow-x-hidden px-2xs py-3xs transition-colors duration-300 ease-linear before:absolute",[h.value]])},[e.createElementVNode("span",oe,e.toDisplayString(s.title),1)],10,le)],2))),128))],2)]),_:1},8,["id"])]))}}),ne=["href","target"],ae={class:"relative"},S=e.defineComponent({__name:"NavLinkVertical",props:{menuItem:{},textColor:{default:"dark-3"},textSize:{default:"md"},fontBold:{type:Boolean,default:!1},dHl:{type:Boolean,default:!0},hlColor:{default:"primary"},asLink:{type:Boolean,default:!0}},emits:["menu-click"],setup(t,{emit:y}){const b=t,k=y,m=(f,c)=>{const{asLink:C}=b;C||f.preventDefault(),k("menu-click",f,c)},g=e.computed(()=>{const{textColor:f,textSize:c,dHl:C,hlColor:x,fontBold:u}=b,r=[l.generateClass.bodyTextVariant({size:c})];if(!C){const i=[l.generateClass.textColorVariant({color:f}),l.generateClass.hoverTextColorVariant({color:x}),l.generateClass.focusTextColorVariant({color:x})];r.push(i.join(" "))}if(C){const i=l.generateClass.beforeBgColorVariant({color:x});r.push("before:inset-y-0 before:left-0 before:transition-[width] before:duration-300 before:ease-linear before:w-0 hover:before:w-full focus:before:w-full "+i);const h=[l.generateClass.textColorVariant({color:x}),l.generateClass.hoverTextColorVariant({color:f}),l.generateClass.focusTextColorVariant({color:f})];r.push(h.join(" "))}return u&&r.push("font-bold"),r.join(" ")});return(f,c)=>(e.openBlock(),e.createElementBlock("a",{class:e.normalizeClass([[g.value],"relative block w-full px-xs py-2xs text-center transition-colors duration-300 ease-linear before:absolute"]),href:t.menuItem.url,target:t.menuItem.target?t.menuItem.target:"_self",onClick:c[0]||(c[0]=C=>m(C,t.menuItem))},[e.createElementVNode("span",ae,e.toDisplayString(t.menuItem.title),1)],10,ne))}}),re={class:"p-md text-center"},ie=["href","target"],ce=["src","alt"],se=["href","target"],de=["innerHTML"],fe={class:"flex flex-col"},he={key:0},me={class:"flex h-full flex-col justify-between"},ke={class:"p-md text-center"},Ce=["href","target"],ge=["src","alt"],xe=["href","target"],ue=["innerHTML"],be={class:"flex flex-col"},Be={key:0},ye=e.defineComponent({__name:"MclHeaderB",props:{logo:{},logoAlt:{default:""},title:{},titleSize:{default:"md"},titleColor:{default:"dark-3"},titleBlockAsLink:{type:Boolean,default:!1},titleBlockLinkTarget:{default:"_self"},titleBlockLink:{},menuItems:{},menuItemAsLink:{type:Boolean,default:!1},menuTextSize:{default:"md"},menuTextColor:{default:"dark-3"},menuTextBold:{type:Boolean,default:!1},showHighlight:{type:Boolean,default:!0},highlightColor:{default:"primary"},bgColor:{default:"light-1"},navLabel:{},menuLabel:{},drawerBtnColor:{default:"dark-1"},showDrawerBorder:{type:Boolean,default:!0},headerWidth:{default:160}},emits:["toggle-drawer","title-click","menu-click","collapse-click"],setup(t,{expose:y,emit:b}){const k=t,m=e.useSlots(),g=b,f=e.ref(),c=e.ref(),C=(o,s)=>{g("toggle-drawer",o,s)},x=()=>{f.value?.headerClose()},u=()=>{for(let o=0;o<c.value.length;o++)c.value[o].closeCollapse()},r=o=>{const{titleBlockAsLink:s,titleBlockLink:d,titleBlockLinkTarget:B}=k;s||o.preventDefault(),g("title-click",o,d,B),x(),u()},i=(o,s)=>{const{menuItemAsLink:d}=k;d||o.preventDefault(),g("menu-click",o,s),x(),u()},n=(o,s,d)=>{g("collapse-click",o,s,d)},h=e.computed(()=>{const{titleSize:o,titleColor:s}=k;return[l.generateClass.h3Variant({size:o}),l.generateClass.textColorVariant({color:s})].join(" ")}),a=o=>{const s=o;return typeof s.children>"u"?!1:s.children.length>0};return y({headerClose:x}),(o,s)=>(e.openBlock(),e.createBlock(e.unref(l.HeaderVertical),{"nav-label":t.navLabel,"menu-label":t.menuLabel,"bg-color":t.bgColor,"drawer-btn-color":t.drawerBtnColor,"drawer-btn-border":t.showDrawerBorder,"header-width":t.headerWidth,onToggleDrawer:C,ref_key:"componentRef",ref:f},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"default")]),content:e.withCtx(()=>[e.createElementVNode("div",null,[e.createElementVNode("div",re,[e.createElementVNode("a",{href:t.titleBlockLink,target:t.titleBlockLinkTarget,onClick:r},[e.createElementVNode("img",{src:t.logo,alt:t.logoAlt,class:"inline-block h-full max-h-xl"},null,8,ce)],8,ie)]),e.createElementVNode("div",null,[e.createElementVNode("a",{href:t.titleBlockLink,target:t.titleBlockLinkTarget,onClick:r},[e.createElementVNode("h3",{class:e.normalizeClass([h.value,"mb-md text-center"]),innerHTML:t.title},null,10,de)],8,se)]),e.createVNode(e.unref(l.AccordionGroup),null,{default:e.withCtx(()=>[e.createElementVNode("ul",fe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.menuItems,(d,B)=>(e.openBlock(),e.createElementBlock("li",{key:`menu-${B}`},[a(d)?(e.openBlock(),e.createBlock(T,{key:1,ref_for:!0,ref_key:"collapseRef",ref:c,"nav-id":d.title,"nav-location":"desktop","menu-item":d,"as-link":t.menuItemAsLink,"text-color":t.menuTextColor,"text-size":t.menuTextSize,"font-bold":t.menuTextBold,"d-hl":t.showHighlight,"hl-color":t.highlightColor,onChildClick:i,onLabelClick:n},null,8,["nav-id","menu-item","as-link","text-color","text-size","font-bold","d-hl","hl-color"])):(e.openBlock(),e.createBlock(S,{key:0,"menu-item":d,"as-link":t.menuItemAsLink,"text-color":t.menuTextColor,"text-size":t.menuTextSize,"font-bold":t.menuTextBold,"d-hl":t.showHighlight,"hl-color":t.highlightColor,onMenuClick:i},null,8,["menu-item","as-link","text-color","text-size","font-bold","d-hl","hl-color"]))]))),128))])]),_:1})])]),"content-bottom":e.withCtx(()=>[m["content-bottom"]?(e.openBlock(),e.createElementBlock("div",he,[e.renderSlot(o.$slots,"content-bottom")])):e.createCommentVNode("",!0)]),"mobile-content":e.withCtx(({headerClose:d})=>[e.createElementVNode("div",me,[e.createElementVNode("div",null,[e.createElementVNode("div",ke,[e.createElementVNode("a",{href:t.titleBlockLink,target:t.titleBlockLinkTarget,onClick:r},[e.createElementVNode("img",{src:t.logo,alt:t.logoAlt,class:"inline-block h-full max-h-xl"},null,8,ge)],8,Ce)]),e.createElementVNode("div",null,[e.createElementVNode("a",{href:t.titleBlockLink,target:t.titleBlockLinkTarget,onClick:r},[e.createElementVNode("h3",{class:e.normalizeClass([h.value,"mb-md text-center"]),innerHTML:t.title},null,10,ue)],8,xe)]),e.createVNode(e.unref(l.AccordionGroup),null,{default:e.withCtx(()=>[e.createElementVNode("ul",be,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.menuItems,(B,w)=>(e.openBlock(),e.createElementBlock("li",{key:`menu-${w}`},[a(B)?(e.openBlock(),e.createBlock(T,{key:1,"nav-id":B.title,"nav-location":"mobile","menu-item":B,"as-link":t.menuItemAsLink,"text-color":t.menuTextColor,"text-size":t.menuTextSize,"font-bold":t.menuTextBold,"d-hl":t.showHighlight,"hl-color":t.highlightColor,onChildClick:i,onLabelClick:n},null,8,["nav-id","menu-item","as-link","text-color","text-size","font-bold","d-hl","hl-color"])):(e.openBlock(),e.createBlock(S,{key:0,"menu-item":B,"as-link":t.menuItemAsLink,"text-color":t.menuTextColor,"text-size":t.menuTextSize,"font-bold":t.menuTextBold,"d-hl":t.showHighlight,"hl-color":t.highlightColor,onMenuClick:i},null,8,["menu-item","as-link","text-color","text-size","font-bold","d-hl","hl-color"]))]))),128))])]),_:1})]),m["mobile-bottom"]?(e.openBlock(),e.createElementBlock("div",Be,[e.renderSlot(o.$slots,"mobile-bottom",{headerClose:d})])):e.createCommentVNode("",!0)])]),_:3},8,["nav-label","menu-label","bg-color","drawer-btn-color","drawer-btn-border","header-width"]))}});V.MclHeaderA=ee,V.MclHeaderB=ye,Object.defineProperty(V,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobbykim/mcl-header",
-  "version": "0.8.4",
+  "version": "0.8.6",
   "description": "header components based on manguito theme",
   "type": "module",
   "files": [
@@ -31,7 +31,7 @@
   "license": "MIT",
   "dependencies": {
     "vue": "^3.5.13",
-    "@bobbykim/manguito-theme": "1.2.0"
+    "@bobbykim/manguito-theme": "1.4.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",
@@ -45,6 +45,7 @@
   "scripts": {
     "build": "vite build",
     "test": "vitest run",
-    "test:watch": "vitest"
+    "test:watch": "vitest",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json"
   }
 }