@codbex/harmonia 1.11.1 → 1.12.0

package/dist/harmonia.esm.js

@@ -6770,13 +6770,13 @@ function list_default(Alpine) {
 // src/components/menu.js
 function menu_default(Alpine) {
   Alpine.directive("h-menu-trigger", (el, { modifiers }) => {
-    el._menu_trigger = {
+    el._h_menu_trigger = {
       isDropdown: modifiers.includes("dropdown"),
       setOpen(open) {
         el.setAttribute("aria-expanded", open);
       }
     };
-    if (el._menu_trigger.isDropdown) {
+    if (el._h_menu_trigger.isDropdown) {
       el.setAttribute("aria-haspopup", "true");
       el.setAttribute("aria-expanded", "false");
       if (!el.hasAttribute("id")) {
@@ -6818,10 +6818,10 @@ function menu_default(Alpine) {
     const menuTrigger = (() => {
       if (isSubmenu) return;
       let sibling = el.previousElementSibling;
-      while (sibling && !Object.prototype.hasOwnProperty.call(sibling, "_menu_trigger")) {
+      while (sibling && !Object.prototype.hasOwnProperty.call(sibling, "_h_menu_trigger")) {
         sibling = sibling.previousElementSibling;
       }
-      if (!Object.prototype.hasOwnProperty.call(sibling, "_menu_trigger")) {
+      if (!Object.prototype.hasOwnProperty.call(sibling, "_h_menu_trigger")) {
         throw new Error(`${original} menu must be placed after a menu trigger element`);
       }
       return sibling;
@@ -6843,16 +6843,22 @@ function menu_default(Alpine) {
       }
       setAriaAttrubutes(menuSubItem);
     } else if (menuTrigger) {
-      setAriaAttrubutes(menuTrigger._menu_trigger.isDropdown ? menuTrigger : void 0);
+      if (menuTrigger._h_menu_trigger.isDropdown) {
+        if (!el.hasAttribute("id")) {
+          el.setAttribute("id", `m${uuid_default()}`);
+        }
+        menuTrigger.setAttribute("aria-controls", el.getAttribute("id"));
+        setAriaAttrubutes(menuTrigger);
+      } else setAriaAttrubutes();
     } else {
       setAriaAttrubutes();
     }
     function listenForTrigger(listen) {
       if (listen) {
-        if (menuTrigger._menu_trigger.isDropdown) menuTrigger.addEventListener("click", openDropdown);
+        if (menuTrigger._h_menu_trigger.isDropdown) menuTrigger.addEventListener("click", openDropdown);
         else menuTrigger.addEventListener("contextmenu", onContextmenu);
       } else {
-        if (menuTrigger._menu_trigger.isDropdown) menuTrigger.removeEventListener("click", openDropdown);
+        if (menuTrigger._h_menu_trigger.isDropdown) menuTrigger.removeEventListener("click", openDropdown);
         else menuTrigger.removeEventListener("contextmenu", onContextmenu);
       }
     }
@@ -6881,8 +6887,8 @@ function menu_default(Alpine) {
       } else {
         listenForTrigger(true);
         if (focusTrigger) menuTrigger.focus();
-        if (menuTrigger._menu_trigger.isDropdown) {
-          menuTrigger._menu_trigger.setOpen(false);
+        if (menuTrigger._h_menu_trigger.isDropdown) {
+          menuTrigger._h_menu_trigger.setOpen(false);
         }
       }
     }
@@ -6997,7 +7003,7 @@ function menu_default(Alpine) {
         let getPlacement = function() {
           if (isSubmenu) {
             return "right-start";
-          } else if (menuTrigger._menu_trigger.isDropdown) {
+          } else if (menuTrigger._h_menu_trigger.isDropdown) {
             return el.getAttribute("data-align") || "bottom-start";
           }
           return "right-start";
@@ -7042,7 +7048,7 @@ function menu_default(Alpine) {
         el.classList.remove("hidden");
         el.pauseKeyEvents = false;
         let firstOpen = true;
-        if (!isSubmenu && menuTrigger._menu_trigger.isDropdown) {
+        if (!isSubmenu && menuTrigger._h_menu_trigger.isDropdown) {
           autoUpdateCleanup = autoUpdate(parent, el, updatePosition);
         } else {
           updatePosition();
@@ -7050,8 +7056,8 @@ function menu_default(Alpine) {
       }
     }
     function openDropdown() {
-      if (menuTrigger._menu_trigger.isDropdown) {
-        menuTrigger._menu_trigger.setOpen(true);
+      if (menuTrigger._h_menu_trigger.isDropdown) {
+        menuTrigger._h_menu_trigger.setOpen(true);
       }
       open(menuTrigger);
     }
@@ -7077,6 +7083,10 @@ function menu_default(Alpine) {
       menuSubItem._menu_sub.open = open;
       menuSubItem._menu_sub.close = close;
     } else {
+      if (menuTrigger._h_menu_trigger.navItem) {
+        menuTrigger._h_menu_trigger.openMenu = openDropdown;
+        menuTrigger._h_menu_trigger.closeMenu = close;
+      }
       listenForTrigger(true);
     }
     function onTransitionEnd(event) {
@@ -7445,6 +7455,154 @@ function menu_default(Alpine) {
   });
 }
 
+// src/components/navigation-menu.js
+var navItemTriggerClasses = [
+  "inline-flex",
+  "h-9",
+  "w-max",
+  "items-center",
+  "justify-center",
+  "rounded-control",
+  "px-3",
+  "py-2",
+  "text-sm",
+  "font-medium",
+  "whitespace-nowrap",
+  "gap-1.5",
+  "transition-colors",
+  "duration-100",
+  "motion-reduce:transition-none",
+  "hover:bg-secondary-hover",
+  "hover:text-secondary-foreground",
+  "focus:bg-secondary-hover",
+  "focus:text-secondary-foreground",
+  "outline-ring/50",
+  "focus-visible:outline-[calc(var(--spacing)*0.75)]",
+  "focus-visible:outline",
+  "cursor-pointer",
+  "shrink-0",
+  "[&_svg]:shrink-0",
+  "[&_svg:not([class*='size-'])]:size-4",
+  "has-[>svg]:px-2.5"
+];
+function navigation_menu_default(Alpine) {
+  Alpine.directive("h-nav", (el, { original }) => {
+    if (el.tagName !== "NAV") {
+      throw new Error(`${original} must be a nav element`);
+    }
+    if (!el.hasAttribute("aria-label")) {
+      throw new Error(`${original} must have an "aria-label" attribute`);
+    }
+    el.classList.add("relative", "z-10", "flex", "items-center");
+    el.setAttribute("data-slot", "nav");
+  });
+  Alpine.directive("h-nav-list", (el, { original }, { Alpine: Alpine2 }) => {
+    if (el.tagName !== "UL") {
+      throw new Error(`${original} must be a ul element`);
+    }
+    const nav = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("data-slot") === "nav");
+    if (!nav) {
+      throw new Error(`${original} must be inside a ${Alpine2.prefixed("h-nav")} element`);
+    }
+    el.classList.add("flex", "flex-1", "list-none", "items-center", "gap-1");
+    el.setAttribute("data-slot", "nav-list");
+  });
+  Alpine.directive("h-nav-item", (el, { original }) => {
+    if (el.tagName !== "LI") {
+      throw new Error(`${original} must be a li element`);
+    }
+    if (el.parentElement?.getAttribute("data-slot") !== "nav-list") {
+      throw new Error(`${original} must be a direct child of a x-h-nav-list element`);
+    }
+    el.classList.add("relative");
+    el.setAttribute("data-slot", "nav-item");
+  });
+  Alpine.directive("h-nav-trigger", (el, { original }, { cleanup, Alpine: Alpine2 }) => {
+    if (el.tagName !== "BUTTON") {
+      throw new Error(`${original} must be a button element`);
+    }
+    const navItem = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("data-slot") === "nav-item");
+    if (!navItem) {
+      throw new Error(`${original} must be inside a ${Alpine2.prefixed("h-nav-item")} element`);
+    }
+    if (!el.hasAttribute("id")) {
+      el.setAttribute("id", `nnt${uuid_default()}`);
+    }
+    const chevron = createSvg({
+      icon: ChevronDown,
+      classes: "size-4 shrink-0 transition-transform duration-200 motion-reduce:transition-none [[data-state=open]_&]:rotate-180",
+      attrs: { "aria-hidden": "true", role: "presentation" }
+    });
+    el._h_menu_trigger = {
+      isDropdown: true,
+      navItem: true,
+      openMenu: void 0,
+      closeMenu: void 0,
+      setOpen(open) {
+        el.setAttribute("aria-expanded", String(open));
+        el.setAttribute("data-state", open ? "open" : "closed");
+      }
+    };
+    el.setAttribute("aria-haspopup", "menu");
+    el.setAttribute("aria-expanded", "false");
+    el.setAttribute("data-state", "closed");
+    el.classList.add("bg-transparent", "data-[state=open]:bg-secondary-hover", "disabled:opacity-50", "disabled:pointer-events-none", ...navItemTriggerClasses);
+    el.appendChild(chevron);
+    el.setAttribute("data-slot", "nav-trigger");
+    const nav = Alpine2.findClosest(el.parentElement, (p) => p.getAttribute("data-slot") === "nav");
+    let cancelHoverCleanup = null;
+    if (nav?.hasAttribute("data-open-on-hover")) {
+      let scheduleClose = function() {
+        closeTimer = setTimeout(() => {
+          el._h_menu_trigger.closeMenu?.();
+          closeTimer = null;
+        }, 100);
+      }, cancelClose = function() {
+        if (closeTimer) {
+          clearTimeout(closeTimer);
+          closeTimer = null;
+        }
+      }, onNavItemEnter = function() {
+        cancelClose();
+        el._h_menu_trigger.openMenu?.();
+      };
+      el.classList.remove("cursor-pointer");
+      let closeTimer = null;
+      navItem.addEventListener("mouseenter", onNavItemEnter);
+      navItem.addEventListener("mouseleave", scheduleClose);
+      cancelHoverCleanup = () => {
+        cancelClose();
+        navItem.removeEventListener("mouseenter", onNavItemEnter);
+        navItem.removeEventListener("mouseleave", scheduleClose);
+      };
+    }
+    cleanup(() => {
+      if (cancelHoverCleanup) cancelHoverCleanup();
+      if (chevron.parentElement === el) el.removeChild(chevron);
+    });
+  });
+  Alpine.directive("h-nav-link", (el, { original }, { cleanup }) => {
+    if (el.tagName !== "A" && el.tagName !== "BUTTON") {
+      throw new Error(`${original} must be an anchor or button element`);
+    } else if (el.tagName === "BUTTON") {
+      el.setAttribute("type", "button");
+    }
+    el.classList.add(...navItemTriggerClasses, "no-underline", "text-inherit", "data-[active]:bg-secondary-hover", "data-[active]:font-semibold");
+    function syncActive() {
+      if (el.hasAttribute("data-active")) {
+        el.setAttribute("aria-current", "page");
+      } else {
+        el.removeAttribute("aria-current");
+      }
+    }
+    syncActive();
+    const observer = new MutationObserver(syncActive);
+    observer.observe(el, { attributes: true, attributeFilter: ["data-active"] });
+    el.setAttribute("data-slot", "nav-link");
+    cleanup(() => observer.disconnect());
+  });
+}
+
 // src/utils/breakpoint-listener.js
 function getBreakpointListener(handler, breakpoint = 768, frame = false) {
   let bps = Number.isFinite(breakpoint) ? `${breakpoint}px` : breakpoint;
@@ -11628,7 +11786,7 @@ function tree_default(Alpine) {
 }
 
 // package.json
-var version = "1.11.1";
+var version = "1.12.0";
 
 // src/utils/theme.js
 var colorSchemeKey = "codbex.harmonia.colorMode";
@@ -11838,6 +11996,7 @@ var registerComponents = (registerPlugin) => {
   registerPlugin(label_default);
   registerPlugin(list_default);
   registerPlugin(menu_default);
+  registerPlugin(navigation_menu_default);
   registerPlugin(notifications_default);
   registerPlugin(pagination_default);
   registerPlugin(popover_default);
@@ -11888,6 +12047,7 @@ export {
   label_default as Label,
   list_default as List,
   menu_default as Menu,
+  navigation_menu_default as NavigationMenu,
   notifications_default as Notifications,
   pagination_default as Pagination,
   popover_default as Popover,