@hortonstudio/main 1.9.10 → 1.9.20

package/src/modules/default/functions/navbar/functions/dropdown/dropdown.ts

@@ -0,0 +1,313 @@
+import {
+  querySelectorAll,
+  querySelector,
+  getSelector,
+  globalConfig,
+  animateHeight,
+  setHeight,
+} from '@utils';
+
+// Module-scoped config (set during init)
+let moduleConfig = null;
+
+export function init(config) {
+  // Store config at module scope for helper functions
+  moduleConfig = config;
+
+  const cleanup = {
+    observers: [],
+    handlers: [],
+  };
+
+  const addObserver = (observer) => cleanup.observers.push(observer);
+  const addHandler = (element, event, handler, options) => {
+    element.addEventListener(event, handler, options);
+    cleanup.handlers.push({ element, event, handler, options });
+  };
+
+  function sanitizeForID(text) {
+    return text
+      .toLowerCase()
+      .replace(/[^a-z0-9\s]/g, '')
+      .replace(/\s+/g, '-')
+      .replace(/^-+|-+$/g, '')
+      .substring(0, 50);
+  }
+
+  function setupDropdown(addObserver, addHandler) {
+    const dropdownWrappers = querySelectorAll(moduleConfig, 'wrapper');
+    const hoverDropdowns = []; // Track hover-type dropdowns for focus-loss handling
+
+    dropdownWrappers.forEach((wrapper) => {
+      const clickableSelector = getSelector(globalConfig.clickable, 'button');
+      const toggle = wrapper.querySelector(clickableSelector);
+      const dropdownList = querySelector(moduleConfig, 'list', wrapper);
+
+      if (!toggle || !dropdownList) {
+        console.warn('[dropdown] Dropdown wrapper missing required elements:', wrapper);
+        return;
+      }
+
+      // Get dropdown type (hover or click)
+      const type = wrapper.getAttribute('data-hs-nav-dropdown-type') || 'hover';
+
+      // Check for visual height wrapper (contains data-hs-height="element")
+      // If found, animate that instead of the list (list is for ARIA only)
+      // If not found, no height animation (optional feature)
+      const heightWrapper = wrapper.querySelector('[data-hs-height="element"]');
+      const animationTarget = heightWrapper ? heightWrapper.parentElement : null;
+
+      const toggleText = toggle.textContent?.trim() || 'dropdown';
+      const sanitizedText = sanitizeForID(toggleText);
+      const toggleId = `navbar-dropdown-${sanitizedText}-toggle`;
+      const listId = `navbar-dropdown-${sanitizedText}-list`;
+
+      toggle.id = toggleId;
+      toggle.setAttribute('aria-haspopup', 'menu');
+      toggle.setAttribute('aria-expanded', 'false');
+      toggle.setAttribute('aria-controls', listId);
+
+      dropdownList.id = listId;
+      dropdownList.setAttribute('role', 'menu');
+      dropdownList.inert = true; // Initial state: hidden and non-interactive
+
+      const menuItems = Array.from(dropdownList.querySelectorAll(clickableSelector));
+      menuItems.forEach((item, index) => {
+        item.setAttribute('role', 'menuitem');
+        item.setAttribute('tabindex', '-1');
+
+        // Add context for first item to help screen readers understand dropdown content
+        if (index === 0) {
+          const toggleText = toggle.textContent?.trim() || 'menu';
+          const existingLabel = item.getAttribute('aria-label');
+          if (!existingLabel) {
+            item.setAttribute('aria-label', `${item.textContent?.trim()}, ${toggleText} submenu`);
+          }
+        }
+      });
+
+      let currentMenuItemIndex = -1;
+
+      // Function to check if dropdown is open
+      function isDropdownOpen() {
+        return wrapper.classList.contains(globalConfig.classes.active);
+      }
+
+      // Update ARIA states based on current visual state
+      function updateARIAStates() {
+        const isOpen = isDropdownOpen();
+        const wasOpen = toggle.getAttribute('aria-expanded') === 'true';
+
+        // If dropdown is closing (was open, now closed), focus the toggle first
+        if (wasOpen && !isOpen && dropdownList.contains(document.activeElement)) {
+          toggle.focus();
+        }
+
+        toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
+        dropdownList.inert = !isOpen; // Enable/disable interaction based on state
+        menuItems.forEach((item) => {
+          item.setAttribute('tabindex', isOpen ? '0' : '-1');
+        });
+
+        if (!isOpen) {
+          currentMenuItemIndex = -1;
+        }
+
+        // Animate height wrapper (visual container, not ARIA list)
+        animateHeight(animationTarget, isOpen, {
+          duration: type === 'hover' ? 200 : 300,
+          ease: 'power2.inOut',
+        });
+      }
+
+      // Set initial height without animation
+      setHeight(animationTarget, isDropdownOpen());
+
+      // 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);
+
+      // ========================================
+      // TYPE-SPECIFIC HANDLERS
+      // ========================================
+
+      if (type === 'hover') {
+        // HOVER TYPE: Desktop behavior with hover + full keyboard navigation
+
+        // Track this as a hover dropdown for focus-loss handling
+        hoverDropdowns.push(wrapper);
+
+        // Hover handlers
+        const mouseenterHandler = () => {
+          wrapper.classList.add('is-active');
+        };
+
+        const mouseleaveHandler = () => {
+          wrapper.classList.remove('is-active');
+        };
+
+        addHandler(wrapper, 'mouseenter', mouseenterHandler);
+        addHandler(wrapper, 'mouseleave', mouseleaveHandler);
+
+        // Full keyboard navigation for toggle
+        const toggleKeydownHandler = function (e) {
+          if (e.key === 'ArrowDown') {
+            e.preventDefault();
+
+            if (!isDropdownOpen()) {
+              wrapper.classList.add(globalConfig.classes.active);
+
+              // Focus first menu item after brief delay
+              if (menuItems.length > 0) {
+                setTimeout(() => {
+                  currentMenuItemIndex = 0;
+                  menuItems[0].focus();
+                }, 100);
+              }
+            }
+          } else if (e.key === ' ' || e.key === 'Enter') {
+            e.preventDefault();
+
+            if (!isDropdownOpen()) {
+              wrapper.classList.add(globalConfig.classes.active);
+
+              // Focus first menu item after brief delay
+              if (menuItems.length > 0) {
+                setTimeout(() => {
+                  currentMenuItemIndex = 0;
+                  menuItems[0].focus();
+                }, 100);
+              }
+            } else {
+              wrapper.classList.remove(globalConfig.classes.active);
+            }
+          } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+
+            if (!isDropdownOpen()) {
+              wrapper.classList.add(globalConfig.classes.active);
+
+              // Focus last menu item after brief delay
+              if (menuItems.length > 0) {
+                setTimeout(() => {
+                  currentMenuItemIndex = menuItems.length - 1;
+                  menuItems[currentMenuItemIndex].focus();
+                }, 100);
+              }
+            }
+          } else if (e.key === 'Escape') {
+            e.preventDefault();
+
+            if (isDropdownOpen()) {
+              wrapper.classList.remove(globalConfig.classes.active);
+            }
+          }
+        };
+
+        addHandler(toggle, 'keydown', toggleKeydownHandler);
+
+        // Handle navigation within open dropdown (arrow keys)
+        const dropdownKeydownHandler = function (e) {
+          if (!isDropdownOpen()) return;
+          if (!wrapper.contains(document.activeElement)) return;
+
+          if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            if (currentMenuItemIndex < menuItems.length - 1) {
+              currentMenuItemIndex++;
+              menuItems[currentMenuItemIndex].focus();
+            }
+          } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            if (currentMenuItemIndex === 0) {
+              wrapper.classList.remove(globalConfig.classes.active);
+              toggle.focus();
+              currentMenuItemIndex = -1;
+            } else if (currentMenuItemIndex > 0) {
+              currentMenuItemIndex--;
+              menuItems[currentMenuItemIndex].focus();
+            } else {
+              toggle.focus();
+              currentMenuItemIndex = -1;
+            }
+          } else if (e.key === 'Escape') {
+            e.preventDefault();
+            wrapper.classList.remove('is-active');
+          }
+        };
+
+        addHandler(document, 'keydown', dropdownKeydownHandler);
+      } else if (type === 'click') {
+        // CLICK TYPE: Mobile/accordion behavior with click only + simple keyboard
+
+        // Click handler to toggle
+        const clickHandler = function (e) {
+          e.preventDefault();
+          wrapper.classList.toggle(globalConfig.classes.active);
+        };
+
+        addHandler(toggle, 'click', clickHandler);
+
+        // Simple keyboard navigation (NO arrow keys)
+        const toggleKeydownHandler = function (e) {
+          if (e.key === ' ' || e.key === 'Enter') {
+            e.preventDefault();
+            wrapper.classList.toggle(globalConfig.classes.active);
+          } else if (e.key === 'Escape') {
+            e.preventDefault();
+            if (isDropdownOpen()) {
+              wrapper.classList.remove(globalConfig.classes.active);
+            }
+          }
+        };
+
+        addHandler(toggle, 'keydown', toggleKeydownHandler);
+      }
+    });
+
+    // Close hover dropdowns when focus leaves (click dropdowns stay open)
+    const focusinHandler = function (e) {
+      hoverDropdowns.forEach((wrapper) => {
+        if (wrapper.classList.contains('is-active') && !wrapper.contains(e.target)) {
+          wrapper.classList.remove('is-active');
+        }
+      });
+    };
+
+    // Only add handler if there are hover dropdowns
+    if (hoverDropdowns.length > 0) {
+      addHandler(document, 'focusin', focusinHandler);
+    }
+  }
+
+  setupDropdown(addObserver, addHandler);
+
+  return {
+    result: 'dropdown initialized',
+    destroy: () => {
+      // Disconnect all observers
+      cleanup.observers.forEach((obs) => obs.disconnect());
+      cleanup.observers.length = 0;
+
+      // Remove all event listeners
+      cleanup.handlers.forEach(({ element, event, handler, options }) => {
+        element.removeEventListener(event, handler, options);
+      });
+      cleanup.handlers.length = 0;
+
+      // Clear module config
+      moduleConfig = null;
+    },
+  };
+}

package/src/modules/default/functions/navbar/functions/menu/menu.ts

@@ -0,0 +1,315 @@
+import {
+  querySelectorAll,
+  querySelector,
+  getSelector,
+  globalConfig,
+  cssVariables,
+  animateHeight,
+  setHeight,
+  openModal,
+  closeModal,
+} from '@utils';
+
+export function init(config, navbarConfig) {
+  const cleanup = {
+    observers: [],
+    handlers: [],
+    state: {
+      focusTrapHandler: null,
+    },
+  };
+
+  const addObserver = (observer) => cleanup.observers.push(observer);
+  const addHandler = (element, event, handler, options) => {
+    element.addEventListener(event, handler, options);
+    cleanup.handlers.push({ element, event, handler, options });
+  };
+
+  function createFocusTrap(menuButton) {
+    const navbarWrapper = document.querySelector('[data-hs-nav="wrapper"]');
+
+    if (!navbarWrapper) return;
+
+    const focusTrapHandler = (e) => {
+      if (e.key === 'Tab') {
+        const clickableSelector = getSelector(globalConfig.clickable, 'button');
+        const clickableItems = Array.from(navbarWrapper.querySelectorAll(clickableSelector));
+        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];
+
+        if (e.shiftKey) {
+          // Shift+Tab: moving backwards
+          if (document.activeElement === firstElement) {
+            e.preventDefault();
+            lastElement.focus();
+          }
+        } else {
+          // Tab: moving forwards
+          if (document.activeElement === lastElement) {
+            e.preventDefault();
+            firstElement.focus();
+          }
+        }
+      }
+    };
+
+    document.addEventListener('keydown', focusTrapHandler);
+    return focusTrapHandler;
+  }
+
+  function removeFocusTrap(focusTrapHandler) {
+    if (focusTrapHandler) {
+      document.removeEventListener('keydown', focusTrapHandler);
+    }
+  }
+
+  function setupMenu(addObserver, addHandler) {
+    const menuButtons = querySelectorAll(config, 'button');
+    const menu = querySelector(config, 'wrapper');
+
+    if (!menuButtons.length || !menu) return;
+
+    // Get navbar wrapper for styling (e.g., backdrop blur)
+    const navbarWrapper = querySelector(navbarConfig, 'wrapper');
+
+    const menuId = `menu-${Date.now()}`;
+
+    menu.id = menuId;
+    menu.setAttribute('role', 'dialog');
+    menu.setAttribute('aria-modal', 'true');
+    menu.inert = true; // Initial state: hidden and non-interactive
+
+    // Check for visual height wrapper (optional)
+    // Only look for a descendant with data-hs-height="element"
+    // If found, animate that element's parent. If not found, no height animation.
+    const heightWrapper = menu.querySelector('[data-hs-height="element"]');
+    const animationTarget = heightWrapper ? heightWrapper.parentElement : null;
+
+    menuButtons.forEach((menuButton) => {
+      menuButton.setAttribute('aria-expanded', 'false');
+      menuButton.setAttribute('aria-controls', menuId);
+      menuButton.setAttribute('aria-label', 'Open navigation menu');
+
+      let focusTrapHandler = null;
+      let shouldAutoFocus = false; // Track if menu should autofocus (keyboard activation)
+
+      // Check if menu is open by looking for is-active class on button
+      function isMenuOpen() {
+        return menuButton.classList.contains(globalConfig.classes.active);
+      }
+
+      // Update ARIA states and menu behavior based on current visual state
+      function updateMenuState() {
+        const isOpen = isMenuOpen();
+        const wasOpen = menuButton.getAttribute('aria-expanded') === 'true';
+
+        if (isOpen && !wasOpen) {
+          // Opening
+          openModal();
+
+          // Add is-active to menu wrapper and enable interaction
+          menu.classList.add(globalConfig.classes.active);
+          menu.inert = false; // Enable interaction
+
+          // Add class to navbar wrapper for styling (e.g., backdrop blur)
+          if (navbarWrapper) {
+            navbarWrapper.classList.add('hs-menu-open');
+          }
+
+          menuButtons.forEach((btn) => {
+            btn.setAttribute('aria-expanded', 'true');
+            btn.setAttribute('aria-label', 'Close navigation menu');
+          });
+
+          // Animate height if configured
+          if (animationTarget) {
+            animateHeight(animationTarget, true, { duration: 300, ease: 'power2.inOut' });
+          }
+
+          // Create focus trap for navbar
+          focusTrapHandler = createFocusTrap(menuButton);
+
+          // Only autofocus for keyboard activation
+          if (shouldAutoFocus) {
+            setTimeout(() => {
+              const menuClickableSelector = getSelector(globalConfig.clickable, 'button');
+              const allElements = Array.from(menu.querySelectorAll(menuClickableSelector));
+
+              if (shouldAutoFocus === 'last') {
+                // Focus last item (ArrowUp)
+                const lastElement = allElements[allElements.length - 1];
+                if (lastElement) {
+                  lastElement.focus();
+                }
+              } else {
+                // Focus first item (Space/Enter/ArrowDown)
+                const firstElement = allElements[0];
+                if (firstElement) {
+                  firstElement.focus();
+                }
+              }
+            }, 100);
+            shouldAutoFocus = false; // Reset flag
+          }
+        } else if (!isOpen && wasOpen) {
+          // Closing - focus button BEFORE updating ARIA
+          if (menu.contains(document.activeElement)) {
+            menuButton.focus();
+          }
+
+          // Now update ARIA and visual state
+          closeModal();
+
+          // Remove is-active from menu wrapper and disable interaction
+          menu.classList.remove(globalConfig.classes.active);
+          menu.inert = true; // Disable interaction
+
+          // Remove class from navbar wrapper
+          if (navbarWrapper) {
+            navbarWrapper.classList.remove('hs-menu-open');
+          }
+
+          menuButtons.forEach((btn) => {
+            btn.setAttribute('aria-expanded', 'false');
+            btn.setAttribute('aria-label', 'Open navigation menu');
+          });
+
+          // Animate height if configured
+          if (animationTarget) {
+            animateHeight(animationTarget, false, { duration: 300, ease: 'power2.inOut' });
+          }
+
+          // Remove focus trap
+          removeFocusTrap(focusTrapHandler);
+          focusTrapHandler = null;
+        }
+      }
+
+      // Set initial height without animation (if configured)
+      if (animationTarget) {
+        setHeight(animationTarget, isMenuOpen());
+      }
+
+      // Set initial ARIA states
+      updateMenuState();
+
+      // Monitor for class changes on button and update menu state
+      const observer = new MutationObserver(() => {
+        updateMenuState();
+      });
+
+      observer.observe(menuButton, {
+        attributes: true,
+        attributeFilter: ['class'],
+      });
+
+      addObserver(observer);
+
+      // Click handler
+      const clickHandler = function (e) {
+        e.preventDefault();
+        menuButton.classList.toggle('is-active');
+      };
+
+      addHandler(menuButton, 'click', clickHandler);
+
+      // Keyboard navigation (dialog/modal pattern)
+      const keydownHandler = function (e) {
+        if (e.key === ' ' || e.key === 'Enter') {
+          e.preventDefault();
+          shouldAutoFocus = true; // Set flag for keyboard activation
+          menuButton.classList.toggle(globalConfig.classes.active);
+        } else if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          if (!isMenuOpen()) {
+            shouldAutoFocus = true; // Open and focus first item
+            menuButton.classList.add(globalConfig.classes.active);
+          }
+        } else if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          if (!isMenuOpen()) {
+            shouldAutoFocus = 'last'; // Open and focus last item
+            menuButton.classList.add(globalConfig.classes.active);
+          }
+        } else if (e.key === 'Escape') {
+          e.preventDefault();
+
+          if (isMenuOpen()) {
+            menuButton.classList.remove(globalConfig.classes.active);
+          }
+        }
+      };
+
+      addHandler(menuButton, 'keydown', keydownHandler);
+
+      // Store focus trap handler for cleanup
+      cleanup.state.focusTrapHandler = focusTrapHandler;
+    });
+  }
+
+  function setupMenuDisplayObserver(addObserver) {
+    const menu = querySelector(config, 'wrapper');
+    if (!menu) return;
+
+    let previousState = null;
+
+    function handleStateChange() {
+      const computedStyle = window.getComputedStyle(menu);
+      const currentState = computedStyle.getPropertyValue(cssVariables.state).trim();
+
+      // Detect state change from active (1) to inactive (0)
+      if (
+        previousState === globalConfig.cssVars.state.values.active &&
+        currentState === globalConfig.cssVars.state.values.inactive
+      ) {
+        // Get menu button to check if menu is open
+        const menuButton = document.querySelector('[data-hs-nav-menu="button"]');
+        const isMenuOpen = menuButton && menuButton.getAttribute('aria-expanded') === 'true';
+
+        // If menu is open, close it cleanly (triggers animation and proper cleanup)
+        if (isMenuOpen && menuButton) {
+          menuButton.classList.remove('is-active');
+        }
+      }
+
+      previousState = currentState;
+    }
+
+    const stateObserver = new ResizeObserver(handleStateChange);
+    stateObserver.observe(menu);
+    addObserver(stateObserver);
+    // Initial check
+    handleStateChange();
+  }
+
+  setupMenu(addObserver, addHandler);
+  setupMenuDisplayObserver(addObserver);
+
+  return {
+    result: 'menu initialized',
+    destroy: () => {
+      // Clean up focus trap
+      if (cleanup.state.focusTrapHandler) {
+        document.removeEventListener('keydown', cleanup.state.focusTrapHandler);
+        cleanup.state.focusTrapHandler = null;
+      }
+
+      // Disconnect all observers
+      cleanup.observers.forEach((obs) => obs.disconnect());
+      cleanup.observers.length = 0;
+
+      // Remove all event listeners
+      cleanup.handlers.forEach(({ element, event, handler, options }) => {
+        element.removeEventListener(event, handler, options);
+      });
+      cleanup.handlers.length = 0;
+
+      // Remove body overflow class if present
+      document.body.classList.remove('u-overflow-hidden');
+    },
+  };
+}

package/src/modules/default/functions/navbar/navbar.ts

@@ -0,0 +1,51 @@
+/**
+ * Navbar Orchestrator
+ * Manages navigation functions in parallel
+ *
+ * Uses static imports and passes config down to functions
+ * @version 2.0.0
+ */
+import { init as dropdownInit } from './functions/dropdown/dropdown.ts';
+import { init as menuInit } from './functions/menu/menu.ts';
+import { init as arrowNavigationInit } from './functions/arrow-navigation/arrow-navigation.ts';
+
+export async function init(navbarConfig) {
+  const cleanup = { destroyFunctions: [] };
+
+  // Load all functions in parallel - use allSettled for resilient loading
+  const results = await Promise.allSettled([
+    dropdownInit(navbarConfig.dropdown),
+    menuInit(navbarConfig.menu, navbarConfig),
+    arrowNavigationInit(navbarConfig['arrow-navigation']),
+  ]);
+
+  // Collect destroy functions from successful inits
+  results.forEach((result) => {
+    if (result.status === 'fulfilled' && result.value?.destroy) {
+      cleanup.destroyFunctions.push(result.value.destroy);
+    }
+  });
+
+  // Log summary
+  const succeeded = results.filter((r) => r.status === 'fulfilled').length;
+  const failed = results.length - succeeded;
+  if (failed > 0) {
+    console.warn(
+      `[navbar] ${succeeded}/${results.length} functions loaded successfully. ${failed} failed but won't affect other functions.`
+    );
+  }
+
+  return {
+    result: 'navbar initialized',
+    destroy: () => {
+      cleanup.destroyFunctions.forEach((destroyFn) => {
+        try {
+          destroyFn();
+        } catch (error) {
+          console.error('[navbar] Error during cleanup:', error);
+        }
+      });
+      cleanup.destroyFunctions.length = 0;
+    },
+  };
+}