@hortonstudio/main 1.2.27 → 1.2.29

package/.claude/settings.local.json

@@ -36,7 +36,8 @@
       "Bash(tree:*)",
       "Bash(grep:*)",
       "Bash(git reset:*)",
-      "Bash(git checkout:*)"
+      "Bash(git checkout:*)",
+      "Bash(rg:*)"
     ],
     "deny": []
   }

package/animations/hero.js

@@ -45,11 +45,11 @@ const config = {
     },
     appear: {
         y: 50,
-        duration: 1.5,
+        duration: 1,
         ease: "power3.out"
     },
     navStagger: {
-        duration: 1.5,
+        duration: 1,
         stagger: 0.1,
         ease: "power3.out"
     },
@@ -409,7 +409,30 @@ export async function init() {
             
             if (navElement) {
                 heroTimeline.to(navElement, 
-                    { opacity: 1, y: 0, duration: config.nav.duration, ease: config.nav.ease }, 
+                    { 
+                        opacity: 1, 
+                        y: 0, 
+                        duration: config.nav.duration, 
+                        ease: config.nav.ease,
+                        onComplete: () => {
+                            // If no advanced nav, restore interactions here
+                            if (!hasAdvancedNav) {
+                                const allFocusableElements = document.querySelectorAll('[data-original-tabindex]');
+                                allFocusableElements.forEach(el => {
+                                    el.style.pointerEvents = '';
+                                    const originalTabindex = el.getAttribute('data-original-tabindex');
+                                    if (originalTabindex === '0') {
+                                        el.removeAttribute('tabindex');
+                                    } else {
+                                        el.setAttribute('tabindex', originalTabindex);
+                                    }
+                                    el.removeAttribute('data-original-tabindex');
+                                });
+                                // Restore nav pointer events
+                                navElement.style.pointerEvents = '';
+                            }
+                        }
+                    }, 
                     timing.nav
                 );
             }
@@ -453,7 +476,29 @@ export async function init() {
             
             if (hasAdvancedNav && navButton.length > 0) {
                 heroTimeline.to(navButton, 
-                    { opacity: 1, duration: config.nav.duration, ease: config.nav.ease }, 
+                    { 
+                        opacity: 1, 
+                        duration: config.nav.duration, 
+                        ease: config.nav.ease,
+                        onComplete: () => {
+                            // Restore page-wide tabbing and interactions after navbar animations complete
+                            const allFocusableElements = document.querySelectorAll('[data-original-tabindex]');
+                            allFocusableElements.forEach(el => {
+                                el.style.pointerEvents = '';
+                                const originalTabindex = el.getAttribute('data-original-tabindex');
+                                if (originalTabindex === '0') {
+                                    el.removeAttribute('tabindex');
+                                } else {
+                                    el.setAttribute('tabindex', originalTabindex);
+                                }
+                                el.removeAttribute('data-original-tabindex');
+                            });
+                            // Restore nav pointer events
+                            if (navElement) {
+                                navElement.style.pointerEvents = '';
+                            }
+                        }
+                    }, 
                     timing.navButton
                 );
             }
@@ -539,43 +584,49 @@ export async function init() {
                         duration: config.appear.duration, 
                         ease: config.appear.ease,
                         onComplete: () => {
-                            // Restore page-wide tabbing and interactions after hero animation completes
-                            const allFocusableElements = document.querySelectorAll('[data-original-tabindex]');
-                            allFocusableElements.forEach(el => {
-                                el.style.pointerEvents = '';
-                                const originalTabindex = el.getAttribute('data-original-tabindex');
-                                if (originalTabindex === '0') {
-                                    el.removeAttribute('tabindex');
-                                } else {
-                                    el.setAttribute('tabindex', originalTabindex);
+                            // Check if interactions haven't been restored yet
+                            const stillDisabled = document.querySelector('[data-original-tabindex]');
+                            if (stillDisabled) {
+                                const allFocusableElements = document.querySelectorAll('[data-original-tabindex]');
+                                allFocusableElements.forEach(el => {
+                                    el.style.pointerEvents = '';
+                                    const originalTabindex = el.getAttribute('data-original-tabindex');
+                                    if (originalTabindex === '0') {
+                                        el.removeAttribute('tabindex');
+                                    } else {
+                                        el.setAttribute('tabindex', originalTabindex);
+                                    }
+                                    el.removeAttribute('data-original-tabindex');
+                                });
+                                // Restore nav pointer events
+                                if (navElement) {
+                                    navElement.style.pointerEvents = '';
                                 }
-                                el.removeAttribute('data-original-tabindex');
-                            });
-                            // Restore nav pointer events
-                            if (navElement) {
-                                navElement.style.pointerEvents = '';
                             }
                         }
                     }, 
                     timing.appear
                 );
             } else {
-                // If no appear elements, restore tabbing when timeline completes
+                // If no appear elements, check if interactions need restoring when timeline completes
                 heroTimeline.call(() => {
-                    const allFocusableElements = document.querySelectorAll('[data-original-tabindex]');
-                    allFocusableElements.forEach(el => {
-                        el.style.pointerEvents = '';
-                        const originalTabindex = el.getAttribute('data-original-tabindex');
-                        if (originalTabindex === '0') {
-                            el.removeAttribute('tabindex');
-                        } else {
-                            el.setAttribute('tabindex', originalTabindex);
+                    const stillDisabled = document.querySelector('[data-original-tabindex]');
+                    if (stillDisabled) {
+                        const allFocusableElements = document.querySelectorAll('[data-original-tabindex]');
+                        allFocusableElements.forEach(el => {
+                            el.style.pointerEvents = '';
+                            const originalTabindex = el.getAttribute('data-original-tabindex');
+                            if (originalTabindex === '0') {
+                                el.removeAttribute('tabindex');
+                            } else {
+                                el.setAttribute('tabindex', originalTabindex);
+                            }
+                            el.removeAttribute('data-original-tabindex');
+                        });
+                        // Restore nav pointer events
+                        if (navElement) {
+                            navElement.style.pointerEvents = '';
                         }
-                        el.removeAttribute('data-original-tabindex');
-                    });
-                    // Restore nav pointer events
-                    if (navElement) {
-                        navElement.style.pointerEvents = '';
                     }
                 });
             }

package/autoInit/modal.js

@@ -0,0 +1,75 @@
+function initModal() {
+  const config = {
+    transitionDuration: 0.3,
+    blurOpacity: 0.5
+  };
+
+  function openModal(element) {
+    document.body.classList.add('u-overflow-clip');
+    
+    // Add blur to all other modals
+    document.querySelectorAll('[data-hs-modal]').forEach(modal => {
+      if (modal !== element) {
+        modal.style.display = 'block';
+        modal.style.opacity = config.blurOpacity;
+        modal.style.transition = `opacity ${config.transitionDuration}s ease`;
+      }
+    });
+  }
+
+  function closeModal(element) {
+    document.body.classList.remove('u-overflow-clip');
+    
+    // Remove blur from all other modals
+    document.querySelectorAll('[data-hs-modal]').forEach(modal => {
+      if (modal !== element) {
+        modal.style.display = 'none';
+        modal.style.opacity = '0';
+        modal.style.transition = `opacity ${config.transitionDuration}s ease`;
+      }
+    });
+  }
+
+  function toggleModal(element) {
+    element.x = ((element.x || 0) + 1) % 2;
+    
+    if (element.x) {
+      openModal(element);
+    } else {
+      closeModal(element);
+    }
+  }
+
+  // Initialize openclose functionality
+  document.querySelectorAll('[data-hs-modal="openclose"]').forEach(trigger => {
+    trigger.addEventListener('click', function() {
+      toggleModal(this);
+    });
+  });
+
+  // Initialize open functionality
+  document.querySelectorAll('[data-hs-modal="open"]').forEach(trigger => {
+    trigger.addEventListener('click', function() {
+      openModal(this);
+    });
+  });
+
+  // Initialize close functionality
+  document.querySelectorAll('[data-hs-modal="close"]').forEach(trigger => {
+    trigger.addEventListener('click', function() {
+      closeModal(this);
+    });
+  });
+
+  return { result: 'modal initialized' };
+}
+
+export function init() {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initModal);
+  } else {
+    initModal();
+  }
+  
+  return { result: 'modal initialized' };
+}

package/index.js

@@ -1,4 +1,4 @@
-// Version:1.2.27
+// Version:1.2.29
 
 const API_NAME = 'hsmain';
 
@@ -22,7 +22,8 @@ const initializeHsMain = async () => {
   };
 
   const autoInitModules = {
-    'smooth-scroll': true
+    'smooth-scroll': true,
+    'modal': true
   };
 
   const allDataAttributes = { ...animationModules, ...utilityModules };
@@ -47,7 +48,8 @@ const initializeHsMain = async () => {
     'data-hs-util-toc': () => import('./utils/toc.js'),
     'data-hs-util-progress': () => import('./utils/scroll-progress.js'),
     'data-hs-util-navbar': () => import('./utils/navbar.js'),
-    'smooth-scroll': () => import('./autoInit/smooth-scroll.js')
+    'smooth-scroll': () => import('./autoInit/smooth-scroll.js'),
+    'modal': () => import('./autoInit/modal.js')
   };
 
   let scripts = [...document.querySelectorAll(`script[type="module"][src="${import.meta.url}"]`)];

package/package.json

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

package/utils/navbar.js

@@ -1,11 +1,15 @@
 export const init = () => {
-  // Find all dropdown wrappers
-  const dropdownWrappers = document.querySelectorAll('[data-hs-nav-dropdown="wrapper"]');
-  
-  // Global array to track all dropdown instances
+  setupDynamicDropdowns();
+  setupMobileMenuButton();
+  setupMobileMenuARIA();
+  return { result: 'navbar initialized' };
+};
+
+// Desktop dropdown system
+function setupDynamicDropdowns() {
+  const dropdownWrappers = document.querySelectorAll('[data-hs-nav="dropdown"]');
   const allDropdowns = [];
   
-  // Function to close all dropdowns except the specified one
   const closeAllDropdowns = (exceptWrapper = null) => {
     allDropdowns.forEach(dropdown => {
       if (dropdown.wrapper !== exceptWrapper && dropdown.isOpen) {
@@ -15,193 +19,250 @@ export const init = () => {
   };
   
   dropdownWrappers.forEach(wrapper => {
-    const animationDuration = 0.3;
-    
-    // Find elements within this wrapper
-    const toggle = wrapper.querySelector('a'); // the toggle link
-    const list = wrapper.querySelector('[data-hs-nav-dropdown="list"]');
-    const contain = list.querySelector('[data-hs-nav-dropdown="container"]');
-    const arrow = toggle.querySelector('[data-hs-nav-dropdown="arrow"]');
-    const text = toggle.querySelector('[data-hs-nav-dropdown="text"]'); // find the text element
-    
-    // Set initial states with GSAP
-    gsap.set(contain, { yPercent: -110 });
-    gsap.set(list, { display: 'none' });
-    gsap.set(arrow, { rotation: 0, scale: 1, x: 0, color: '' });
-    gsap.set(text, { scale: 1, color: '' }); // empty string = default color
-    
-    // Track if dropdown is open
+    const toggle = wrapper.querySelector('a');
+    if (!toggle) return;
+    
+    const allElements = wrapper.querySelectorAll('*');
+    let dropdownList = null;
+    
+    for (const element of allElements) {
+      const links = element.querySelectorAll('a');
+      if (links.length >= 2 && !element.contains(toggle)) {
+        dropdownList = element;
+        break;
+      }
+    }
+    
+    if (!dropdownList) return;
+    
+    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.setAttribute('aria-hidden', 'true');
+    
+    const menuItems = dropdownList.querySelectorAll('a');
+    menuItems.forEach(item => {
+      item.setAttribute('role', 'menuitem');
+      item.setAttribute('tabindex', '-1');
+    });
+    
     let isOpen = false;
-    let currentTimeline = null;
+    let currentMenuItemIndex = -1;
     
-    // Open animation
     function openDropdown() {
       if (isOpen) return;
-      
-      // Kill any existing timeline
-      if (currentTimeline) {
-        currentTimeline.kill();
-      }
-      
-      // Close all other dropdowns first
       closeAllDropdowns(wrapper);
-      
       isOpen = true;
-      
-      // Update ARIA states
       toggle.setAttribute('aria-expanded', 'true');
-      list.setAttribute('aria-hidden', 'false');
-      
-      // GSAP animation
-      currentTimeline = gsap.timeline();
-      currentTimeline.set(list, { display: 'flex' })
-        .to(contain, { 
-          yPercent: 0, 
-          duration: animationDuration, 
-          ease: 'ease' 
-        }, 0)
-        .to(arrow, { 
-          rotation: 90,
-          scale: 1.2,
-          x: 4,
-          color: 'var(--swatch--brand)',
-          duration: animationDuration, 
-          ease: 'ease' 
-        }, 0)
-        .to(text, {
-          scale: 1.1,
-          color: 'var(--swatch--brand)',
-          duration: animationDuration,
-          ease: 'ease'
-        }, 0);
+      dropdownList.setAttribute('aria-hidden', 'false');
+      menuItems.forEach(item => {
+        item.setAttribute('tabindex', '0');
+      });
+      const clickEvent = new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+        view: window
+      });
+      wrapper.dispatchEvent(clickEvent);
     }
     
-    // Close animation  
     function closeDropdown() {
       if (!isOpen) return;
-      
-      // Kill any existing timeline
-      if (currentTimeline) {
-        currentTimeline.kill();
-      }
-      
-      // Check if focus should be restored to toggle
-      const shouldRestoreFocus = list.contains(document.activeElement);
-      
+      const shouldRestoreFocus = dropdownList.contains(document.activeElement);
       isOpen = false;
       currentMenuItemIndex = -1;
-      
-      // Update ARIA states
-      toggle.setAttribute('aria-expanded', 'false');
-      list.setAttribute('aria-hidden', 'true');
-      
-      // Temporarily remove role="menu" to help screen readers understand menu is closed
-      const originalRole = list.getAttribute('role');
-      list.removeAttribute('role');
-      
-      // GSAP animation
-      currentTimeline = gsap.timeline();
-      currentTimeline.to(contain, { 
-          yPercent: -110, 
-          duration: animationDuration, 
-          ease: 'ease' 
-        }, 0)
-        .to(arrow, { 
-          rotation: 0,
-          scale: 1,
-          x: 0,
-          color: '', // back to default color
-          duration: animationDuration, 
-          ease: 'ease' 
-        }, 0)
-        .to(text, {
-          scale: 1,
-          color: '', // back to default color
-          duration: animationDuration,
-          ease: 'ease'
-        }, 0)
-        .set(list, { display: 'none' })
-        .call(() => {
-          // Restore role after animation completes
-          list.setAttribute('role', originalRole || 'menu');
-        });
-      
-      // Restore focus to toggle only if focus was inside dropdown
       if (shouldRestoreFocus) {
-        // Small delay to ensure screen reader announces the state change
-        setTimeout(() => {
-          toggle.focus();
-        }, 50);
+        toggle.focus();
       }
+      toggle.setAttribute('aria-expanded', 'false');
+      dropdownList.setAttribute('aria-hidden', 'true');
+      menuItems.forEach(item => {
+        item.setAttribute('tabindex', '-1');
+      });
+      const clickEvent = new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+        view: window
+      });
+      wrapper.dispatchEvent(clickEvent);
     }
     
-    // Get all menu items for navigation
-    const menuItems = list.querySelectorAll('a, button, [role="menuitem"]');
-    let currentMenuItemIndex = -1;
+    wrapper.addEventListener('mouseenter', () => {
+      if (!isOpen) {
+        const clickEvent = new MouseEvent('click', {
+          bubbles: true,
+          cancelable: true,
+          view: window
+        });
+        wrapper.dispatchEvent(clickEvent);
+        closeAllDropdowns(wrapper);
+        isOpen = true;
+        toggle.setAttribute('aria-expanded', 'true');
+        dropdownList.setAttribute('aria-hidden', 'false');
+        menuItems.forEach(item => {
+          item.setAttribute('tabindex', '0');
+        });
+      }
+    });
     
-    // Hover events
-    toggle.addEventListener('mouseenter', openDropdown);
-    wrapper.addEventListener('mouseleave', closeDropdown);
+    wrapper.addEventListener('mouseleave', () => {
+      if (isOpen) {
+        if (dropdownList.contains(document.activeElement)) {
+          toggle.focus();
+        }
+        const clickEvent = new MouseEvent('click', {
+          bubbles: true,
+          cancelable: true,
+          view: window
+        });
+        wrapper.dispatchEvent(clickEvent);
+        isOpen = false;
+        toggle.setAttribute('aria-expanded', 'false');
+        dropdownList.setAttribute('aria-hidden', 'true');
+        menuItems.forEach(item => {
+          item.setAttribute('tabindex', '-1');
+        });
+        currentMenuItemIndex = -1;
+      }
+    });
     
-    // Arrow key navigation within dropdown
-    list.addEventListener('keydown', function(e) {
+    document.addEventListener('keydown', function(e) {
       if (!isOpen) return;
+      if (!wrapper.contains(document.activeElement)) return;
       
       if (e.key === 'ArrowDown') {
         e.preventDefault();
-        currentMenuItemIndex = (currentMenuItemIndex + 1) % menuItems.length;
-        menuItems[currentMenuItemIndex].focus();
+        if (document.activeElement === toggle) {
+          currentMenuItemIndex = 0;
+          menuItems[currentMenuItemIndex].focus();
+        } else {
+          if (currentMenuItemIndex === menuItems.length - 1) {
+            const nextElement = wrapper.nextElementSibling?.querySelector('a, button') || 
+                               document.querySelector('.navbar_cartsearch_wrap a, .navbar_cartsearch_wrap button');
+            if (nextElement) {
+              closeDropdown();
+              nextElement.focus();
+              return;
+            }
+          }
+          currentMenuItemIndex = (currentMenuItemIndex + 1) % menuItems.length;
+          menuItems[currentMenuItemIndex].focus();
+        }
       } else if (e.key === 'ArrowUp') {
         e.preventDefault();
-        currentMenuItemIndex = currentMenuItemIndex <= 0 ? menuItems.length - 1 : currentMenuItemIndex - 1;
-        menuItems[currentMenuItemIndex].focus();
+        if (document.activeElement === toggle) {
+          currentMenuItemIndex = menuItems.length - 1;
+          menuItems[currentMenuItemIndex].focus();
+        } else {
+          if (currentMenuItemIndex === 0) {
+            const prevElement = wrapper.previousElementSibling?.querySelector('a, button');
+            if (prevElement) {
+              closeDropdown();
+              prevElement.focus();
+              return;
+            } else {
+              closeDropdown();
+              toggle.focus();
+              return;
+            }
+          }
+          currentMenuItemIndex = currentMenuItemIndex <= 0 ? menuItems.length - 1 : currentMenuItemIndex - 1;
+          menuItems[currentMenuItemIndex].focus();
+        }
+      } else if (e.key === 'Tab') {
+        if (e.shiftKey) {
+          if (document.activeElement === menuItems[0]) {
+            e.preventDefault();
+            closeDropdown();
+            toggle.focus();
+          }
+        } else {
+          if (document.activeElement === menuItems[menuItems.length - 1]) {
+            e.preventDefault();
+            const nextElement = wrapper.nextElementSibling?.querySelector('a, button') || 
+                               document.querySelector('.navbar_cartsearch_wrap a, .navbar_cartsearch_wrap button');
+            closeDropdown();
+            if (nextElement) {
+              setTimeout(() => {
+                nextElement.focus();
+              }, 10);
+            }
+          }
+        }
       } else if (e.key === 'Escape') {
         e.preventDefault();
         closeDropdown();
         toggle.focus();
+      } else if (e.key === 'Home') {
+        e.preventDefault();
+        currentMenuItemIndex = 0;
+        menuItems[0].focus();
+      } else if (e.key === 'End') {
+        e.preventDefault();
+        currentMenuItemIndex = menuItems.length - 1;
+        menuItems[menuItems.length - 1].focus();
+      } else if (e.key === ' ') {
+        e.preventDefault();
       }
     });
     
-    // Keyboard events for toggle
     toggle.addEventListener('keydown', function(e) {
       if (e.key === 'ArrowDown') {
         e.preventDefault();
         openDropdown();
-        // Focus first menu item after opening
         if (menuItems.length > 0) {
           currentMenuItemIndex = 0;
-          setTimeout(() => menuItems[0].focus(), 50);
+          setTimeout(() => menuItems[0].focus(), 100);
         }
       } else if (e.key === ' ') {
         e.preventDefault();
-        // Simple toggle: if closed open, if open close
         if (isOpen) {
           closeDropdown();
         } else {
           openDropdown();
+          if (menuItems.length > 0) {
+            currentMenuItemIndex = 0;
+            setTimeout(() => menuItems[0].focus(), 100);
+          }
         }
-      } else if (e.key === 'ArrowUp' || e.key === 'Escape') {
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        if (isOpen) {
+          currentMenuItemIndex = menuItems.length - 1;
+          menuItems[currentMenuItemIndex].focus();
+        } else {
+          closeDropdown();
+        }
+      } else if (e.key === 'Escape') {
         e.preventDefault();
         closeDropdown();
       }
     });
     
-    // Close dropdown when clicking outside
     document.addEventListener('click', function(e) {
       if (!wrapper.contains(e.target) && isOpen) {
         closeDropdown();
       }
     });
     
-    // Add this dropdown instance to the global array
     allDropdowns.push({
       wrapper,
       isOpen: () => isOpen,
-      closeDropdown
+      closeDropdown,
+      toggle,
+      dropdownList
     });
   });
   
-  // Global focus management - close dropdown when tab focus moves outside
   document.addEventListener('focusin', function(e) {
     allDropdowns.forEach(dropdown => {
       if (dropdown.isOpen() && !dropdown.wrapper.contains(e.target)) {
@@ -210,5 +271,371 @@ export const init = () => {
     });
   });
 
-  return { result: 'navbar initialized' };
-};
+  addDesktopArrowNavigation();
+}
+
+// Desktop left/right arrow navigation
+function addDesktopArrowNavigation() {
+  document.addEventListener('keydown', function(e) {
+    if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
+    
+    const mobileMenu = document.querySelector('[data-hs-nav="menu"]');
+    if (mobileMenu && mobileMenu.contains(document.activeElement)) return;
+    
+    const navbar = document.querySelector('[data-hs-nav="wrapper"]') || 
+                   document.querySelector('.navbar_component') || 
+                   document.querySelector('nav[role="navigation"]') ||
+                   document.querySelector('nav');
+    
+    if (!navbar || !navbar.contains(document.activeElement)) return;
+    
+    const openDropdownList = navbar.querySelector('[aria-hidden="false"][role="menu"]');
+    if (openDropdownList && openDropdownList.contains(document.activeElement)) return;
+    
+    e.preventDefault();
+    
+    const allNavbarElements = navbar.querySelectorAll('a, button');
+    const focusableElements = Array.from(allNavbarElements).filter(el => {
+      if (el.getAttribute('tabindex') === '-1') return false;
+      
+      const isInDropdownList = el.closest('[role="menu"]');
+      if (isInDropdownList) return false;
+      
+      const isInMobileMenu = el.closest('[data-hs-nav="menu"]');
+      if (isInMobileMenu) return false;
+      
+      const computedStyle = window.getComputedStyle(el);
+      const isHidden = computedStyle.display === 'none' || 
+                      computedStyle.visibility === 'hidden' ||
+                      computedStyle.opacity === '0' ||
+                      el.offsetWidth === 0 || 
+                      el.offsetHeight === 0;
+      if (isHidden) return false;
+      
+      let parent = el.parentElement;
+      while (parent && parent !== navbar) {
+        const parentStyle = window.getComputedStyle(parent);
+        const parentHidden = parentStyle.display === 'none' || 
+                           parentStyle.visibility === 'hidden' ||
+                           parent.offsetWidth === 0 || 
+                           parent.offsetHeight === 0;
+        if (parentHidden) return false;
+        parent = parent.parentElement;
+      }
+      
+      return true;
+    });
+    
+    const currentIndex = focusableElements.indexOf(document.activeElement);
+    if (currentIndex === -1) return;
+    
+    let nextIndex;
+    if (e.key === 'ArrowRight') {
+      nextIndex = (currentIndex + 1) % focusableElements.length;
+    } else {
+      nextIndex = currentIndex === 0 ? focusableElements.length - 1 : currentIndex - 1;
+    }
+    
+    focusableElements[nextIndex].focus();
+  });
+}
+
+// Mobile menu button system
+function setupMobileMenuButton() {
+  const menuButton = document.querySelector('[data-hs-nav="menubtn"]');
+  const mobileMenu = document.querySelector('[data-hs-nav="menu"]');
+  
+  if (!menuButton || !mobileMenu) return;
+  
+  const menuId = `mobile-menu-${Date.now()}`;
+  
+  menuButton.setAttribute('aria-expanded', 'false');
+  menuButton.setAttribute('aria-controls', menuId);
+  menuButton.setAttribute('aria-label', 'Open navigation menu');
+  
+  mobileMenu.id = menuId;
+  mobileMenu.setAttribute('role', 'dialog');
+  mobileMenu.setAttribute('aria-modal', 'true');
+  mobileMenu.inert = true;
+  
+  let isMenuOpen = false;
+  
+  function openMenu() {
+    if (isMenuOpen) return;
+    isMenuOpen = true;
+    menuButton.setAttribute('aria-expanded', 'true');
+    menuButton.setAttribute('aria-label', 'Close navigation menu');
+    mobileMenu.inert = false;
+    
+    // Prevent tabbing outside navbar using tabindex management
+    const navbarWrapper = document.querySelector('[data-hs-nav="wrapper"]') || 
+                          document.querySelector('.navbar_component') || 
+                          document.querySelector('nav[role="navigation"]') ||
+                          document.querySelector('nav');
+    
+    const allFocusableElements = document.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
+    allFocusableElements.forEach(el => {
+      if (navbarWrapper && !navbarWrapper.contains(el)) {
+        el.setAttribute('data-mobile-menu-tabindex', el.getAttribute('tabindex') || '0');
+        el.setAttribute('tabindex', '-1');
+      }
+    });
+    
+    const clickEvent = new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+      view: window
+    });
+    menuButton.dispatchEvent(clickEvent);
+  }
+  
+  function closeMenu() {
+    if (!isMenuOpen) return;
+    isMenuOpen = false;
+    if (mobileMenu.contains(document.activeElement)) {
+      menuButton.focus();
+    }
+    menuButton.setAttribute('aria-expanded', 'false');
+    menuButton.setAttribute('aria-label', 'Open navigation menu');
+    mobileMenu.inert = true;
+    
+    // Restore tabbing to entire page using tabindex management
+    const elementsToRestore = document.querySelectorAll('[data-mobile-menu-tabindex]');
+    elementsToRestore.forEach(el => {
+      const originalTabindex = el.getAttribute('data-mobile-menu-tabindex');
+      if (originalTabindex === '0') {
+        el.removeAttribute('tabindex');
+      } else {
+        el.setAttribute('tabindex', originalTabindex);
+      }
+      el.removeAttribute('data-mobile-menu-tabindex');
+    });
+    
+    const clickEvent = new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+      view: window
+    });
+    menuButton.dispatchEvent(clickEvent);
+  }
+  
+  function toggleMenu() {
+    if (isMenuOpen) {
+      closeMenu();
+    } else {
+      openMenu();
+    }
+  }
+  
+  menuButton.addEventListener('keydown', function(e) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      toggleMenu();
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      if (!isMenuOpen) {
+        openMenu();
+      }
+      const firstElement = mobileMenu.querySelector('button, a');
+      if (firstElement) {
+        firstElement.focus();
+      }
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      if (isMenuOpen) {
+        closeMenu();
+      }
+    }
+  });
+  
+  menuButton.addEventListener('click', function(e) {
+    if (!e.isTrusted) return;
+    if (isMenuOpen && mobileMenu.contains(document.activeElement)) {
+      menuButton.focus();
+    }
+    isMenuOpen = !isMenuOpen;
+    menuButton.setAttribute('aria-expanded', isMenuOpen);
+    menuButton.setAttribute('aria-label', 
+      isMenuOpen ? 'Close navigation menu' : 'Open navigation menu'
+    );
+    mobileMenu.inert = !isMenuOpen;
+    
+    // Handle tabindex management for external clicks
+    if (isMenuOpen) {
+      const navbarWrapper = document.querySelector('[data-hs-nav="wrapper"]') || 
+                            document.querySelector('.navbar_component') || 
+                            document.querySelector('nav[role="navigation"]') ||
+                            document.querySelector('nav');
+      
+      const allFocusableElements = document.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
+      allFocusableElements.forEach(el => {
+        if (navbarWrapper && !navbarWrapper.contains(el)) {
+          el.setAttribute('data-mobile-menu-tabindex', el.getAttribute('tabindex') || '0');
+          el.setAttribute('tabindex', '-1');
+        }
+      });
+    } else {
+      const elementsToRestore = document.querySelectorAll('[data-mobile-menu-tabindex]');
+      elementsToRestore.forEach(el => {
+        const originalTabindex = el.getAttribute('data-mobile-menu-tabindex');
+        if (originalTabindex === '0') {
+          el.removeAttribute('tabindex');
+        } else {
+          el.setAttribute('tabindex', originalTabindex);
+        }
+        el.removeAttribute('data-mobile-menu-tabindex');
+      });
+    }
+  });
+}
+
+function sanitizeForID(text) {
+  return text
+    .toLowerCase()
+    .replace(/[^a-z0-9\s]/g, '')
+    .replace(/\s+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .substring(0, 50);
+}
+
+// Mobile menu ARIA setup
+function setupMobileMenuARIA() {
+  const menuContainer = document.querySelector('[data-hs-nav="menu"]');
+  if (!menuContainer) return;
+
+  const buttons = menuContainer.querySelectorAll('button');
+  const links = menuContainer.querySelectorAll('a');
+
+  buttons.forEach(button => {
+    const buttonText = button.textContent?.trim();
+    if (!buttonText) return;
+
+    const sanitizedText = sanitizeForID(buttonText);
+    const buttonId = `navbar-mobile-${sanitizedText}-toggle`;
+    const listId = `navbar-mobile-${sanitizedText}-list`;
+
+    button.id = buttonId;
+    button.setAttribute('aria-expanded', 'false');
+    button.setAttribute('aria-controls', listId);
+
+    let dropdownList = button.nextElementSibling;
+    
+    if (!dropdownList || !dropdownList.querySelector('a')) {
+      dropdownList = button.parentElement?.nextElementSibling;
+    }
+    
+    if (!dropdownList || !dropdownList.querySelector('a')) {
+      const parent = button.closest('[data-hs-nav="menu"]');
+      const allListElements = parent?.querySelectorAll('div, ul, nav');
+      dropdownList = Array.from(allListElements || []).find(el => 
+        el.querySelectorAll('a').length > 1 && 
+        !el.contains(button)
+      );
+    }
+
+    if (dropdownList && dropdownList.querySelector('a')) {
+      dropdownList.id = listId;
+      dropdownList.inert = true;
+
+      button.addEventListener('click', function() {
+        const isExpanded = button.getAttribute('aria-expanded') === 'true';
+        const newState = !isExpanded;
+        button.setAttribute('aria-expanded', newState);
+        dropdownList.inert = !newState;
+      });
+    }
+  });
+
+  links.forEach(link => {
+    const linkText = link.textContent?.trim();
+    if (!linkText) return;
+
+    const sanitizedText = sanitizeForID(linkText);
+    const linkId = `navbar-mobile-${sanitizedText}-link`;
+    link.id = linkId;
+  });
+  
+  setupMobileMenuArrowNavigation(menuContainer);
+}
+
+// Mobile menu arrow navigation
+function setupMobileMenuArrowNavigation(menuContainer) {
+  function getFocusableElements() {
+    const allElements = menuContainer.querySelectorAll('button, a');
+    return Array.from(allElements).filter(el => {
+      let current = el;
+      while (current && current !== menuContainer) {
+        if (current.inert === true) {
+          return false;
+        }
+        current = current.parentElement;
+      }
+      return true;
+    });
+  }
+  
+  let currentFocusIndex = -1;
+  
+  menuContainer.addEventListener('keydown', function(e) {
+    const focusableElements = getFocusableElements();
+    if (focusableElements.length === 0) return;
+    
+    const activeElement = document.activeElement;
+    currentFocusIndex = focusableElements.indexOf(activeElement);
+    
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      if (currentFocusIndex >= focusableElements.length - 1) {
+        currentFocusIndex = 0;
+      } else {
+        currentFocusIndex = currentFocusIndex + 1;
+      }
+      focusableElements[currentFocusIndex].focus();
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      if (currentFocusIndex <= 0) {
+        const mobileMenuButton = document.querySelector('[data-hs-nav="menubtn"]');
+        if (mobileMenuButton) {
+          mobileMenuButton.focus();
+          return;
+        }
+      }
+      currentFocusIndex = currentFocusIndex - 1;
+      focusableElements[currentFocusIndex].focus();
+    } else if (e.key === 'ArrowRight') {
+      e.preventDefault();
+      if (activeElement.tagName === 'BUTTON' && activeElement.hasAttribute('aria-controls')) {
+        const isExpanded = activeElement.getAttribute('aria-expanded') === 'true';
+        if (!isExpanded) {
+          activeElement.click();
+        }
+        return;
+      }
+    } else if (e.key === 'ArrowLeft') {
+      e.preventDefault();
+      if (activeElement.tagName === 'BUTTON' && activeElement.hasAttribute('aria-controls')) {
+        const isExpanded = activeElement.getAttribute('aria-expanded') === 'true';
+        if (isExpanded) {
+          activeElement.click();
+        }
+        return;
+      }
+    } else if (e.key === 'Home') {
+      e.preventDefault();
+      currentFocusIndex = 0;
+      focusableElements[0].focus();
+    } else if (e.key === 'End') {
+      e.preventDefault();
+      currentFocusIndex = focusableElements.length - 1;
+      focusableElements[focusableElements.length - 1].focus();
+    } else if (e.key === ' ' && activeElement.tagName === 'A') {
+      e.preventDefault();
+    } else if (e.key === 'Escape') {
+      const mobileMenuButton = document.querySelector('[data-hs-nav="menubtn"]');
+      if (mobileMenuButton) {
+        mobileMenuButton.click();
+        mobileMenuButton.focus();
+      }
+    }
+  });
+}