@hortonstudio/main 1.9.4 → 1.9.6

package/autoInit/{navbar.js → navbar/navbar.js}

@@ -17,8 +17,8 @@ export const init = () => {
   };
 
   setupDynamicDropdowns(addObserver, addHandler);
-  setupMenuButton(addHandler, cleanup.state);
-  setupMenuARIA(addHandler);
+  setupMenuButton(addHandler, addObserver);
+  setupMenuARIA(addHandler, addObserver);
   setupMenuDisplayObserver(addObserver);
 
   return {
@@ -74,7 +74,8 @@ function setupDynamicDropdowns(addObserver, addHandler) {
   };
 
   dropdownWrappers.forEach((wrapper) => {
-    const toggle = wrapper.querySelector('[data-hs-nav="dropdown-toggle"]');
+    const clickableElement = wrapper.querySelector('[data-site-clickable="element"]');
+    const toggle = clickableElement ? clickableElement.children[0] : null;
     const dropdownList = wrapper.querySelector('[data-hs-nav="dropdown-list"]');
 
     if (!toggle || !dropdownList) {
@@ -96,7 +97,8 @@ function setupDynamicDropdowns(addObserver, addHandler) {
     dropdownList.setAttribute("role", "menu");
     dropdownList.setAttribute("aria-hidden", "true");
 
-    const menuItems = dropdownList.querySelectorAll("a");
+    const clickableItems = dropdownList.querySelectorAll('[data-site-clickable="element"]');
+    const menuItems = Array.from(clickableItems).map(el => el.children[0]).filter(Boolean);
     menuItems.forEach((item, index) => {
       item.setAttribute("role", "menuitem");
       item.setAttribute("tabindex", "-1");
@@ -375,7 +377,8 @@ function addDesktopArrowNavigation(addHandler) {
 
     e.preventDefault();
 
-    const allNavbarElements = navbar.querySelectorAll("a, button");
+    const clickableElements = navbar.querySelectorAll('[data-site-clickable="element"]');
+    const allNavbarElements = Array.from(clickableElements).map(el => el.children[0]).filter(Boolean);
     const focusableElements = Array.from(allNavbarElements).filter((el) => {
       if (el.getAttribute("tabindex") === "-1") return false;
 
@@ -432,8 +435,8 @@ function addDesktopArrowNavigation(addHandler) {
 }
 
 // Menu button system with modal-like functionality
-function setupMenuButton(addHandler, cleanupState) {
-  const menuButtons = document.querySelectorAll('[data-hs-nav="menubtn"]');
+function setupMenuButton(addHandler, addObserver) {
+  const menuButtons = document.querySelectorAll('[data-hs-nav="menu-button"]');
   const menu = document.querySelector('[data-hs-nav="menu"]');
 
   if (!menuButtons.length || !menu) return;
@@ -444,27 +447,25 @@ function setupMenuButton(addHandler, cleanupState) {
   menu.setAttribute("role", "dialog");
   menu.setAttribute("aria-modal", "true");
 
-  let isMenuOpen = false;
-
   function shouldPreventMenu() {
-    const menuHideElement = document.querySelector(".menu_hide");
+    const menuHideElement = document.querySelector('[data-hs-nav="menu-hide"]');
     if (!menuHideElement) return false;
 
     const computedStyle = window.getComputedStyle(menuHideElement);
     return computedStyle.display === "none";
   }
 
-  function createFocusTrap() {
+  function createFocusTrap(menuButton) {
     const navbarWrapper = document.querySelector('[data-hs-nav="wrapper"]');
 
     if (!navbarWrapper) return;
 
     const focusTrapHandler = (e) => {
       if (e.key === 'Tab') {
-        const focusableElements = navbarWrapper.querySelectorAll(
-          'a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
-        );
-        const focusableArray = Array.from(focusableElements);
+        const clickableElements = navbarWrapper.querySelectorAll('[data-site-clickable="element"]');
+        const clickableItems = Array.from(clickableElements).map(el => el.children[0]).filter(Boolean);
+        const formElements = navbarWrapper.querySelectorAll('input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        const focusableArray = [...clickableItems, ...Array.from(formElements)];
         const firstElement = focusableArray[0];
         const lastElement = focusableArray[focusableArray.length - 1];
 
@@ -485,118 +486,92 @@ function setupMenuButton(addHandler, cleanupState) {
     };
 
     document.addEventListener('keydown', focusTrapHandler);
-    cleanupState.focusTrapHandler = focusTrapHandler;
+    return focusTrapHandler;
   }
 
-  function removeFocusTrap() {
-    if (cleanupState.focusTrapHandler) {
-      document.removeEventListener('keydown', cleanupState.focusTrapHandler);
-      cleanupState.focusTrapHandler = null;
+  function removeFocusTrap(focusTrapHandler) {
+    if (focusTrapHandler) {
+      document.removeEventListener('keydown', focusTrapHandler);
     }
   }
 
-  function openMenu() {
-    if (isMenuOpen || shouldPreventMenu()) return;
-    isMenuOpen = true;
+  menuButtons.forEach(menuButton => {
+    menuButton.setAttribute("aria-expanded", "false");
+    menuButton.setAttribute("aria-controls", menuId);
+    menuButton.setAttribute("aria-label", "Open navigation menu");
 
-    document.body.classList.add("u-overflow-hidden");
+    let focusTrapHandler = null;
 
-    menuButtons.forEach(btn => {
-      btn.setAttribute("aria-expanded", "true");
-      btn.setAttribute("aria-label", "Close navigation menu");
-    });
+    // Check if menu is open by looking for is-active class on button
+    function isMenuOpen() {
+      return menuButton.classList.contains('is-active');
+    }
 
-    // Create focus trap for navbar
-    createFocusTrap();
+    // Update ARIA states and menu behavior based on current visual state
+    function updateMenuState() {
+      const isOpen = isMenuOpen();
+      const wasOpen = menuButton.getAttribute("aria-expanded") === "true";
 
-    // Focus first menu item after menu opens
-    setTimeout(() => {
-      const firstElement = menu.querySelector("button, a");
-      if (firstElement) {
-        firstElement.focus();
-      }
-    }, 100);
+      if (isOpen && !wasOpen) {
+        // Opening
+        document.body.classList.add("u-overflow-hidden");
+        window.lenis?.stop();
 
-    const clickEvent = new MouseEvent("click", {
-      bubbles: true,
-      cancelable: true,
-      view: window,
-    });
-    menuButtons[0].dispatchEvent(clickEvent);
-  }
+        menuButtons.forEach(btn => {
+          btn.setAttribute("aria-expanded", "true");
+          btn.setAttribute("aria-label", "Close navigation menu");
+        });
 
-  function closeMenu() {
-    if (!isMenuOpen) return;
-    isMenuOpen = false;
+        // Create focus trap for navbar
+        focusTrapHandler = createFocusTrap(menuButton);
 
-    // Close all open menu dropdowns
-    const openDropdownButtons = menu.querySelectorAll('[data-hs-nav="menu-dropdown-btn"][aria-expanded="true"]');
-    openDropdownButtons.forEach(button => button.click());
+        // Focus first menu item after menu opens
+        setTimeout(() => {
+          const firstClickable = menu.querySelector('[data-site-clickable="element"]');
+          const firstElement = firstClickable?.children[0];
+          if (firstElement) {
+            firstElement.focus();
+          }
+        }, 100);
+      } else if (!isOpen && wasOpen) {
+        // Closing
+        document.body.classList.remove("u-overflow-hidden");
+        window.lenis?.start();
+
+        // Return focus to button if focus was inside menu
+        if (menu.contains(document.activeElement)) {
+          menuButton.focus();
+        }
 
-    document.body.classList.remove("u-overflow-hidden");
+        menuButtons.forEach(btn => {
+          btn.setAttribute("aria-expanded", "false");
+          btn.setAttribute("aria-label", "Open navigation menu");
+        });
 
-    const activeMenuButton = Array.from(menuButtons).find(() => menu.contains(document.activeElement));
-    if (activeMenuButton) {
-      activeMenuButton.focus();
+        // Remove focus trap
+        removeFocusTrap(focusTrapHandler);
+        focusTrapHandler = null;
+      }
     }
 
-    menuButtons.forEach(btn => {
-      btn.setAttribute("aria-expanded", "false");
-      btn.setAttribute("aria-label", "Open navigation menu");
-    });
-
-    // Remove focus trap
-    removeFocusTrap();
+    // Set initial ARIA states
+    updateMenuState();
 
-    const clickEvent = new MouseEvent("click", {
-      bubbles: true,
-      cancelable: true,
-      view: window,
+    // Monitor for class changes and update menu state
+    const observer = new MutationObserver(() => {
+      updateMenuState();
     });
-    menuButtons[0].dispatchEvent(clickEvent);
-  }
 
-  function toggleMenu() {
-    if (shouldPreventMenu()) return;
-
-    if (isMenuOpen) {
-      closeMenu();
-    } else {
-      openMenu();
-    }
-  }
-
-  menuButtons.forEach(menuButton => {
-    menuButton.setAttribute("aria-expanded", "false");
-    menuButton.setAttribute("aria-controls", menuId);
-    menuButton.setAttribute("aria-label", "Open navigation menu");
+    observer.observe(menuButton, {
+      attributes: true,
+      attributeFilter: ['class']
+    });
 
-    const keydownHandler = function (e) {
-      if (e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        const config = menuButton.getAttribute("data-hs-config");
-        if (config === "close" && isMenuOpen) {
-          closeMenu();
-        } else if (config === "open" && !isMenuOpen) {
-          openMenu();
-        } else if (!config) {
-          toggleMenu();
-        }
-      }
-    };
+    addObserver(observer);
 
-    addHandler(menuButton, "keydown", keydownHandler);
-
-    const clickHandler = function (e) {
-      if (!e.isTrusted) return;
-      const config = menuButton.getAttribute("data-hs-config");
-      if (config === "close" && isMenuOpen) {
-        closeMenu();
-      } else if (config === "open" && !isMenuOpen) {
-        openMenu();
-      } else if (!config) {
-        toggleMenu();
-      }
+    const clickHandler = function () {
+      // Webflow interaction handles the visual state (is-active class)
+      // MutationObserver will sync ARIA and behavior
     };
 
     addHandler(menuButton, "click", clickHandler);
@@ -606,14 +581,14 @@ function setupMenuButton(addHandler, cleanupState) {
 
 function setupMenuDisplayObserver(addObserver) {
   function handleDisplayChange() {
-    const menuHideElement = document.querySelector(".menu_hide");
+    const menuHideElement = document.querySelector('[data-hs-nav="menu-hide"]');
     if (!menuHideElement) return;
 
     const computedStyle = window.getComputedStyle(menuHideElement);
     const isMenuVisible = computedStyle.display !== "none";
 
     // Get menu button to check if menu is open
-    const menuButton = document.querySelector('[data-hs-nav="menubtn"]');
+    const menuButton = document.querySelector('[data-hs-nav="menu-button"]');
     const isMenuOpen = menuButton && menuButton.getAttribute("aria-expanded") === "true";
 
     const shouldShowModal = isMenuVisible && isMenuOpen;
@@ -623,7 +598,7 @@ function setupMenuDisplayObserver(addObserver) {
   }
 
   const displayObserver = new ResizeObserver(handleDisplayChange);
-  const menuHideElement = document.querySelector(".menu_hide");
+  const menuHideElement = document.querySelector('[data-hs-nav="menu-hide"]');
   if (menuHideElement) {
     displayObserver.observe(menuHideElement);
     addObserver(displayObserver);
@@ -642,15 +617,17 @@ function sanitizeForID(text) {
 }
 
 // Menu ARIA setup
-function setupMenuARIA(addHandler) {
+function setupMenuARIA(addHandler, addObserver) {
   const menuContainer = document.querySelector('[data-hs-nav="menu"]');
   if (!menuContainer) return;
 
   const dropdownWrappers = menuContainer.querySelectorAll('[data-hs-nav="menu-dropdown"]');
-  const links = menuContainer.querySelectorAll("a");
+  const clickableLinks = menuContainer.querySelectorAll('[data-site-clickable="element"]');
+  const links = Array.from(clickableLinks).map(el => el.children[0]).filter(Boolean);
 
   dropdownWrappers.forEach((wrapper) => {
-    const button = wrapper.querySelector('[data-hs-nav="menu-dropdown-btn"]');
+    const clickableElement = wrapper.querySelector('[data-site-clickable="element"]');
+    const button = clickableElement ? clickableElement.children[0] : null;
     const dropdownList = wrapper.querySelector('[data-hs-nav="menu-dropdown-list"]');
 
     if (button && dropdownList) {
@@ -666,11 +643,43 @@ function setupMenuARIA(addHandler) {
       dropdownList.id = listId;
       dropdownList.setAttribute("aria-hidden", "true");
 
+      // Check if dropdown is open by looking for is-active class on wrapper
+      function isDropdownOpen() {
+        return wrapper.classList.contains('is-active');
+      }
+
+      // Update ARIA states based on current visual state
+      function updateARIAStates() {
+        const isOpen = isDropdownOpen();
+        const wasOpen = button.getAttribute("aria-expanded") === "true";
+
+        // If dropdown is closing (was open, now closed), focus the button if focus is inside dropdown
+        if (wasOpen && !isOpen && dropdownList.contains(document.activeElement)) {
+          button.focus();
+        }
+
+        button.setAttribute("aria-expanded", isOpen ? "true" : "false");
+        dropdownList.setAttribute("aria-hidden", isOpen ? "false" : "true");
+      }
+
+      // Set initial ARIA states
+      updateARIAStates();
+
+      // Monitor for class changes and update ARIA states
+      const observer = new MutationObserver(() => {
+        updateARIAStates();
+      });
+
+      observer.observe(wrapper, {
+        attributes: true,
+        attributeFilter: ['class']
+      });
+
+      addObserver(observer);
+
       const clickHandler = function () {
-        const isExpanded = button.getAttribute("aria-expanded") === "true";
-        const newState = !isExpanded;
-        button.setAttribute("aria-expanded", newState);
-        dropdownList.setAttribute("aria-hidden", !newState);
+        // Webflow interaction handles the visual state (is-active class)
+        // MutationObserver will sync ARIA attributes
       };
 
       addHandler(button, "click", clickHandler);
@@ -690,7 +699,8 @@ function setupMenuARIA(addHandler) {
 // Menu arrow navigation
 function setupMenuArrowNavigation(menuContainer, addHandler) {
   function getFocusableElements() {
-    const allElements = menuContainer.querySelectorAll("button, a");
+    const clickableElements = menuContainer.querySelectorAll('[data-site-clickable="element"]');
+    const allElements = Array.from(clickableElements).map(el => el.children[0]).filter(Boolean);
     return Array.from(allElements).filter((el) => {
       // Check if element or any ancestor has aria-hidden="true"
       let current = el;
@@ -763,7 +773,7 @@ function setupMenuArrowNavigation(menuContainer, addHandler) {
       e.preventDefault();
     } else if (e.key === "Escape") {
       const menuButton = document.querySelector(
-        '[data-hs-nav="menubtn"]',
+        '[data-hs-nav="menu-button"]',
       );
       if (menuButton) {
         menuButton.click();

package/index.js

@@ -28,7 +28,7 @@ const initializeHsMain = async () => {
     "data-hs-util-ba": () => import("./utils/before-after.js"),
     "data-hs-util-slider": () => import("./utils/slider.js"),
     "smooth-scroll": () => import("./autoInit/smooth-scroll.js"),
-    navbar: () => import("./autoInit/navbar.js"),
+    navbar: () => import("./autoInit/navbar/navbar.js"),
     accessibility: () => import("./autoInit/accessibility.js"),
     counter: () => import("./autoInit/counter.js"),
     form: () => import("./autoInit/form.js"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hortonstudio/main",
-  "version": "1.9.4",
+  "version": "1.9.6",
   "description": "Animation and utility library for client websites",
   "main": "index.js",
   "type": "module",