@codbex/harmonia 1.11.1 → 1.12.0

package/dist/harmonia.js

@@ -4864,13 +4864,13 @@
   // 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")) {
@@ -4912,10 +4912,10 @@
       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;
@@ -4937,16 +4937,22 @@
         }
         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);
         }
       }
@@ -4975,8 +4981,8 @@
         } 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);
           }
         }
       }
@@ -5091,7 +5097,7 @@
           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";
@@ -5136,7 +5142,7 @@
           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();
@@ -5144,8 +5150,8 @@
         }
       }
       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);
       }
@@ -5171,6 +5177,10 @@
         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) {
@@ -5539,6 +5549,154 @@
     });
   }
 
+  // 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;
@@ -11766,7 +11924,7 @@
   }
 
   // package.json
-  var version = "1.11.1";
+  var version = "1.12.0";
 
   // src/index.js
   window.Harmonia = { getBreakpointListener, addColorSchemeListener, getColorScheme, removeColorSchemeListener, setColorScheme, getSystemColorScheme, version };
@@ -11791,6 +11949,7 @@
     window.Alpine.plugin(label_default);
     window.Alpine.plugin(list_default);
     window.Alpine.plugin(menu_default);
+    window.Alpine.plugin(navigation_menu_default);
     window.Alpine.plugin(notifications_default);
     window.Alpine.plugin(pagination_default);
     window.Alpine.plugin(popover_default);