@hortonstudio/main 1.2.26 → 1.2.28

package/.claude/settings.local.json

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

package/animations/hero.js

@@ -468,7 +468,9 @@ export async function init() {
                             ease: config.headingSplit.ease,
                             onComplete: () => {
                                 if (split && split.revert) {
-                                    
+                                    setTimeout(() => {
+                                        split.revert();
+                                    }, 100);
                                 }
                             }
                         }, 
@@ -487,7 +489,9 @@ export async function init() {
                             ease: config.subheadingSplit.ease,
                             onComplete: () => {
                                 if (split && split.revert) {
-                                    
+                                    setTimeout(() => {
+                                        split.revert();
+                                    }, 100);
                                 }
                             }
                         }, 
@@ -597,72 +601,16 @@ export async function init() {
     
     // Add resize listener for responsive line splits
     let heroResizeTimeout;
+    let lastWidth = window.innerWidth;
     window.addEventListener('resize', () => {
-        clearTimeout(heroResizeTimeout);
-        heroResizeTimeout = setTimeout(() => {
-            // Only refresh line splits, not chars or words
-            const hasLineSplits = headingSplits.some(split => split.elementsClass === 'lines') || 
-                                 subheadingSplits.some(split => split.elementsClass === 'lines');
-            
-            if (hasLineSplits) {
-                // Kill current line splits
-                headingSplits.forEach((split, index) => {
-                    if (split.elementsClass === 'lines' && split.revert) {
-                        split.revert();
-                    }
-                });
-                
-                subheadingSplits.forEach((split, index) => {
-                    if (split.elementsClass === 'lines' && split.revert) {
-                        split.revert();
-                    }
-                });
-                
-                // Re-initialize line splits after resize
-                document.fonts.ready.then(() => {
-                    // Re-split line elements
-                    headingSplitElements.forEach((parent, index) => {
-                        const textElement = heading[index];
-                        const splitType = parent.getAttribute('data-hs-heroconfig') || 'line';
-                        
-                        if (splitType === 'line') {
-                            const splitConfig = {
-                                type: "lines",
-                                mask: "lines",
-                                linesClass: "line"
-                            };
-                            
-                            const split = new SplitText(textElement, splitConfig);
-                            split.elementsClass = 'lines';
-                            headingSplits[index] = split;
-                            
-                            gsap.set(split.lines, { yPercent: 0 });
-                        }
-                    });
-                    
-                    subheadingSplitElements.forEach((parent, index) => {
-                        const textElement = subheading[index];
-                        const splitType = parent.getAttribute('data-hs-heroconfig') || 'word';
-                        
-                        if (splitType === 'line') {
-                            const splitConfig = {
-                                type: "lines",
-                                mask: "lines",
-                                linesClass: "line"
-                            };
-                            
-                            const split = new SplitText(textElement, splitConfig);
-                            split.elementsClass = 'lines';
-                            subheadingSplits[index] = split;
-                            
-                            gsap.set(split.lines, { yPercent: 0 });
-                        }
-                    });
-                });
-            }
-            
-            ScrollTrigger.refresh();
-        }, 100);
+        const currentWidth = window.innerWidth;
+        if (currentWidth !== lastWidth) {
+            lastWidth = currentWidth;
+            clearTimeout(heroResizeTimeout);
+            heroResizeTimeout = setTimeout(() => {
+                ScrollTrigger.refresh();
+            }, 300);
+        }
     });
     
     return { result: 'anim-hero initialized' };

package/animations/text.js

@@ -141,10 +141,13 @@ const CharSplitAnimations = {
                 scrollTrigger: {
                     trigger: textElement,
                     start: config.charSplit.start,
-                    invalidateOnRefresh: true,
+                    invalidateOnRefresh: false,
                 },
                 onComplete: () => {
-                    
+                    if (textElement.splitTextInstance) {
+                        textElement.splitTextInstance.revert();
+                        delete textElement.splitTextInstance;
+                    }
                 }
             });
 
@@ -198,10 +201,13 @@ const WordSplitAnimations = {
                 scrollTrigger: {
                     trigger: textElement,
                     start: config.wordSplit.start,
-                    invalidateOnRefresh: true,
+                    invalidateOnRefresh: false,
                 },
                 onComplete: () => {
-                    
+                    if (textElement.splitTextInstance) {
+                        textElement.splitTextInstance.revert();
+                        delete textElement.splitTextInstance;
+                    }
                 }
             });
 
@@ -255,10 +261,13 @@ const LineSplitAnimations = {
                 scrollTrigger: {
                     trigger: textElement,
                     start: config.lineSplit.start,
-                    invalidateOnRefresh: true,
+                    invalidateOnRefresh: false,
                 },
                 onComplete: () => {
-                    
+                    if (textElement.splitTextInstance) {
+                        textElement.splitTextInstance.revert();
+                        delete textElement.splitTextInstance;
+                    }
                 }
             });
 
@@ -303,7 +312,7 @@ const AppearAnimations = {
                 scrollTrigger: {
                     trigger: element,
                     start: config.appear.start,
-                    invalidateOnRefresh: true,
+                    invalidateOnRefresh: false,
                 }
             });
 
@@ -352,25 +361,16 @@ export async function init() {
     }
     
     let resizeTimeout;
+    let lastWidth = window.innerWidth;
     window.addEventListener('resize', () => {
-        clearTimeout(resizeTimeout);
-        resizeTimeout = setTimeout(() => {
-            // Kill and restart line split animations on resize
-            const lineSplitElements = document.querySelectorAll(".a-line-split > *:first-child");
-            lineSplitElements.forEach((textElement) => {
-                if (textElement.splitTextInstance) {
-                    textElement.splitTextInstance.revert();
-                    delete textElement.splitTextInstance;
-                }
-            });
-            
-            // Re-initialize line splits after resize
-            LineSplitAnimations.initial().then(() => {
-                LineSplitAnimations.animate();
-            });
-            
-            ScrollTrigger.refresh();
-        }, 100);
+        const currentWidth = window.innerWidth;
+        if (currentWidth !== lastWidth) {
+            lastWidth = currentWidth;
+            clearTimeout(resizeTimeout);
+            resizeTimeout = setTimeout(() => {
+                ScrollTrigger.refresh();
+            }, 300);
+        }
     });
 
     const api = window[API_NAME] || {};

package/animations/transition.js

@@ -21,18 +21,28 @@ function initTransitions() {
     
   // On Page Load
   if (transitionTrigger.length > 0) {
-    if (window.Webflow && window.Webflow.push) {
-      Webflow.push(function () {
-        transitionTrigger.click();
-      });
+    
+    function triggerTransition() {
+      if (window.Webflow && window.Webflow.push) {
+        Webflow.push(function () {
+          transitionTrigger.click();
+        });
+      } else {
+        // Non-Webflow initialization
+        setTimeout(() => {
+          transitionTrigger.click();
+        }, 100);
+      }
+      $("body").addClass("no-scroll-transition");
+      setTimeout(() => {$("body").removeClass("no-scroll-transition");}, introDurationMS);
+    }
+    
+    // Wait for full page load (images, fonts, etc.) for Safari
+    if (document.readyState === 'complete') {
+      triggerTransition();
     } else {
-      // Non-Webflow initialization
-      setTimeout(() => {
-        transitionTrigger.click();
-      }, 100);
+      window.addEventListener('load', triggerTransition, { once: true });
     }
-    $("body").addClass("no-scroll-transition");
-    setTimeout(() => {$("body").removeClass("no-scroll-transition");}, introDurationMS);
   }
   
   // On Link Click

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.26
+// Version:1.2.28
 
 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.26",
+  "version": "1.2.28",
   "description": "Animation and utility library for client websites",
   "main": "index.js",
   "type": "module",

package/utils/navbar.js

@@ -1,6 +1,72 @@
 export const init = () => {
+  // Mobile menu accessibility
+  const mobileMenuButton = document.querySelector('[data-hs-hero="nav-menu"]');
+  const mobileMenu = document.getElementById('mobile-navigation-menu');
+
+  if (mobileMenuButton && mobileMenu) {
+    let mobileMenuOpen = false;
+    
+    // Initialize mobile menu button ARIA attributes
+    mobileMenuButton.setAttribute('aria-expanded', 'false');
+    mobileMenuButton.setAttribute('aria-controls', 'mobile-navigation-menu');
+    mobileMenuButton.setAttribute('aria-label', 'Open navigation menu');
+    
+    // Function to toggle mobile menu
+    function toggleMobileMenu() {
+      mobileMenuOpen = !mobileMenuOpen;
+      
+      // Update ARIA attributes
+      mobileMenuButton.setAttribute('aria-expanded', mobileMenuOpen);
+      mobileMenuButton.setAttribute('aria-label', 
+        mobileMenuOpen ? 'Close navigation menu' : 'Open navigation menu'
+      );
+    }
+    
+    mobileMenuButton.addEventListener('click', toggleMobileMenu);
+    
+    mobileMenuButton.addEventListener('keydown', function(e) {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        toggleMobileMenu();
+      }
+    });
+  }
+  
+  // Setup dynamic dropdown system
+  setupDynamicDropdowns();
+  
+  // Setup dynamic mobile menu button
+  setupMobileMenuButton();
+  
+  // Dynamic mobile menu keyboard navigation
+  const menuContainer = document.querySelector('[data-hs-nav="menu"]');
+  if (menuContainer) {
+    const allInteractiveElements = menuContainer.querySelectorAll('button, a');
+    
+    allInteractiveElements.forEach(element => {
+      element.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape') {
+          // Close mobile menu and focus button
+          const mobileMenuButton = document.querySelector('[data-hs-hero="nav-menu"]');
+          if (mobileMenuButton) {
+            mobileMenuButton.click();
+            mobileMenuButton.focus();
+          }
+        }
+      });
+    });
+  }
+
+  // Setup mobile menu ARIA attributes
+  setupMobileMenuARIA();
+
+  return { result: 'navbar initialized' };
+};
+
+// New dynamic dropdown system for Webflow interactions
+function setupDynamicDropdowns() {
   // Find all dropdown wrappers
-  const dropdownWrappers = document.querySelectorAll('[data-hs-nav-dropdown="wrapper"]');
+  const dropdownWrappers = document.querySelectorAll('[data-hs-nav="dropdown"]');
   
   // Global array to track all dropdown instances
   const allDropdowns = [];
@@ -15,34 +81,55 @@ 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
+    // Auto-detect toggle and dropdown list
+    const toggle = wrapper.querySelector('a'); // First <a> element
+    if (!toggle) return; // Skip if no toggle found
+    
+    // Find dropdown list: element with 2+ <a> tags that doesn't contain the toggle
+    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; // Skip if no dropdown list found
+    
+    // Generate unique IDs for ARIA attributes
+    const toggleText = toggle.textContent?.trim() || 'dropdown';
+    const sanitizedText = sanitizeForID(toggleText);
+    const toggleId = `navbar-dropdown-${sanitizedText}-toggle`;
+    const listId = `navbar-dropdown-${sanitizedText}-list`;
+    
+    // Set up ARIA attributes for toggle
+    toggle.id = toggleId;
+    toggle.setAttribute('aria-haspopup', 'menu');
+    toggle.setAttribute('aria-expanded', 'false');
+    toggle.setAttribute('aria-controls', listId);
+    
+    // Set up ARIA attributes for dropdown list
+    dropdownList.id = listId;
+    dropdownList.setAttribute('role', 'menu');
+    dropdownList.inert = true;
+    
+    // Set up ARIA attributes for menu items
+    const menuItems = dropdownList.querySelectorAll('a');
+    menuItems.forEach(item => {
+      item.setAttribute('role', 'menuitem');
+    });
+    
+    // Track dropdown state
     let isOpen = false;
-    let currentTimeline = null;
+    let currentMenuItemIndex = -1;
     
-    // Open animation
+    // Function to open dropdown (simulate click)
     function openDropdown() {
       if (isOpen) return;
       
-      // Kill any existing timeline
-      if (currentTimeline) {
-        currentTimeline.kill();
-      }
-      
       // Close all other dropdowns first
       closeAllDropdowns(wrapper);
       
@@ -50,115 +137,203 @@ export const init = () => {
       
       // Update ARIA states
       toggle.setAttribute('aria-expanded', 'true');
-      list.setAttribute('aria-hidden', 'false');
+      dropdownList.inert = 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);
+      // Simulate click on wrapper to trigger Webflow interactions
+      const clickEvent = new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+        view: window
+      });
+      wrapper.dispatchEvent(clickEvent);
     }
     
-    // Close animation  
+    // Function to close dropdown (simulate second click)
     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
+      // Move focus away BEFORE setting aria-hidden to avoid ARIA violation
       if (shouldRestoreFocus) {
-        // Small delay to ensure screen reader announces the state change
-        setTimeout(() => {
-          toggle.focus();
-        }, 50);
+        toggle.focus();
       }
+      
+      // Update ARIA states after focus is moved
+      toggle.setAttribute('aria-expanded', 'false');
+      dropdownList.inert = true;
+      
+      // Simulate second click on wrapper to trigger Webflow interactions
+      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;
+    // Hover events (native) - trigger click events for Webflow
+    wrapper.addEventListener('mouseenter', () => {
+      if (!isOpen) {
+        // Trigger click to open
+        const clickEvent = new MouseEvent('click', {
+          bubbles: true,
+          cancelable: true,
+          view: window
+        });
+        wrapper.dispatchEvent(clickEvent);
+        
+        // Update our state
+        closeAllDropdowns(wrapper);
+        isOpen = true;
+        toggle.setAttribute('aria-expanded', 'true');
+        dropdownList.inert = false;
+      }
+    });
     
-    // Hover events
-    toggle.addEventListener('mouseenter', openDropdown);
-    wrapper.addEventListener('mouseleave', closeDropdown);
+    wrapper.addEventListener('mouseleave', () => {
+      if (isOpen) {
+        // Move focus away BEFORE setting aria-hidden to avoid ARIA violation
+        if (dropdownList.contains(document.activeElement)) {
+          toggle.focus();
+        }
+        
+        // Trigger click to close
+        const clickEvent = new MouseEvent('click', {
+          bubbles: true,
+          cancelable: true,
+          view: window
+        });
+        wrapper.dispatchEvent(clickEvent);
+        
+        // Update our state after focus is moved
+        isOpen = false;
+        toggle.setAttribute('aria-expanded', 'false');
+        dropdownList.inert = true;
+        currentMenuItemIndex = -1;
+      }
+    });
     
-    // Arrow key navigation within dropdown
-    list.addEventListener('keydown', function(e) {
+    // Keyboard navigation within dropdown - attach to document to catch all events
+    document.addEventListener('keydown', function(e) {
       if (!isOpen) return;
       
+      // Only handle if focus is on toggle or within wrapper
+      if (!wrapper.contains(document.activeElement)) return;
+      
       if (e.key === 'ArrowDown') {
         e.preventDefault();
-        currentMenuItemIndex = (currentMenuItemIndex + 1) % menuItems.length;
-        menuItems[currentMenuItemIndex].focus();
+        // If currently on toggle, start at first item
+        if (document.activeElement === toggle) {
+          currentMenuItemIndex = 0;
+          menuItems[currentMenuItemIndex].focus();
+        } else {
+          // If at last item in dropdown, move to next sibling element
+          if (currentMenuItemIndex === menuItems.length - 1) {
+            // Find next focusable element after this dropdown
+            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 currently on toggle, start at last item
+        if (document.activeElement === toggle) {
+          currentMenuItemIndex = menuItems.length - 1;
+          menuItems[currentMenuItemIndex].focus();
+        } else {
+          // If at first item in dropdown, move to previous sibling element
+          if (currentMenuItemIndex === 0) {
+            // Find previous focusable element before this dropdown
+            const prevElement = wrapper.previousElementSibling?.querySelector('a, button');
+            if (prevElement) {
+              closeDropdown();
+              prevElement.focus();
+              return;
+            } else {
+              // If no previous sibling, go back to toggle
+              closeDropdown();
+              toggle.focus();
+              return;
+            }
+          }
+          currentMenuItemIndex = currentMenuItemIndex <= 0 ? menuItems.length - 1 : currentMenuItemIndex - 1;
+          menuItems[currentMenuItemIndex].focus();
+        }
+      } else if (e.key === 'ArrowLeft') {
+        e.preventDefault();
+        // Navigate to previous dropdown/element
+        const prevElement = wrapper.previousElementSibling?.querySelector('a, button');
+        if (prevElement) {
+          closeDropdown();
+          prevElement.focus();
+        } else {
+          closeDropdown();
+          toggle.focus();
+        }
+      } else if (e.key === 'ArrowRight') {
+        e.preventDefault();
+        // Navigate to next dropdown/element
+        const nextElement = wrapper.nextElementSibling?.querySelector('a, button') || 
+                           document.querySelector('.navbar_cartsearch_wrap a, .navbar_cartsearch_wrap button');
+        if (nextElement) {
+          closeDropdown();
+          nextElement.focus();
+        }
+      } else if (e.key === 'Tab') {
+        // Handle Tab navigation within dropdown
+        if (e.shiftKey) {
+          // Shift+Tab going backwards
+          if (document.activeElement === menuItems[0]) {
+            e.preventDefault();
+            closeDropdown();
+            toggle.focus();
+          }
+        } else {
+          // Tab going forwards
+          if (document.activeElement === menuItems[menuItems.length - 1]) {
+            e.preventDefault();
+            // Find next element BEFORE closing dropdown to avoid focus issues
+            const nextElement = wrapper.nextElementSibling?.querySelector('a, button') || 
+                               document.querySelector('.navbar_cartsearch_wrap a, .navbar_cartsearch_wrap button');
+            
+            // Close dropdown first
+            closeDropdown();
+            
+            // Then move focus to next element
+            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();
+        // Just prevent space from scrolling page - Enter activates links
       }
     });
     
@@ -170,20 +345,34 @@ export const init = () => {
         // 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();
+          // Focus first item when opening with spacebar
+          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) {
+          // Focus last menu item
+          currentMenuItemIndex = menuItems.length - 1;
+          menuItems[currentMenuItemIndex].focus();
+        } else {
+          closeDropdown();
+        }
+      } else if (e.key === 'Escape') {
         e.preventDefault();
         closeDropdown();
       }
+      // Note: Enter key naturally follows the link - no preventDefault needed
     });
     
     // Close dropdown when clicking outside
@@ -197,7 +386,9 @@ export const init = () => {
     allDropdowns.push({
       wrapper,
       isOpen: () => isOpen,
-      closeDropdown
+      closeDropdown,
+      toggle,
+      dropdownList
     });
   });
   
@@ -210,5 +401,302 @@ export const init = () => {
     });
   });
 
-  return { result: 'navbar initialized' };
-};
+  // Global arrow key navigation for navbar
+  document.addEventListener('keydown', function(e) {
+    // Only handle arrow keys
+    if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
+    
+    // Only handle if we're in the navbar
+    const navbar = document.querySelector('.navbar_component, [data-hs-nav]');
+    if (!navbar || !navbar.contains(document.activeElement)) return;
+    
+    // Allow left/right navigation from dropdown items, but handle it specially
+    const activeDropdown = allDropdowns.find(d => d.wrapper.contains(document.activeElement) && d.isOpen());
+    
+    e.preventDefault();
+    
+    if (activeDropdown) {
+      // If we're in a dropdown, navigate to sibling dropdowns/elements
+      if (e.key === 'ArrowRight') {
+        // Find next focusable element after this dropdown
+        const nextElement = activeDropdown.wrapper.nextElementSibling?.querySelector('a, button') || 
+                           document.querySelector('.navbar_cartsearch_wrap a, .navbar_cartsearch_wrap button');
+        if (nextElement) {
+          activeDropdown.closeDropdown();
+          nextElement.focus();
+        }
+      } else { // ArrowLeft
+        // Find previous focusable element before this dropdown
+        const prevElement = activeDropdown.wrapper.previousElementSibling?.querySelector('a, button');
+        if (prevElement) {
+          activeDropdown.closeDropdown();
+          prevElement.focus();
+        } else {
+          // If no previous sibling, go to toggle of this dropdown
+          activeDropdown.closeDropdown();
+          activeDropdown.toggle.focus();
+        }
+      }
+    } else {
+      // Normal navigation for non-dropdown elements
+      const focusableElements = navbar.querySelectorAll('a:not([inert] a), button:not([inert] button)');
+      const focusableArray = Array.from(focusableElements);
+      
+      const currentIndex = focusableArray.indexOf(document.activeElement);
+      if (currentIndex === -1) return;
+      
+      let nextIndex;
+      if (e.key === 'ArrowRight') {
+        nextIndex = (currentIndex + 1) % focusableArray.length;
+      } else { // ArrowLeft
+        nextIndex = currentIndex === 0 ? focusableArray.length - 1 : currentIndex - 1;
+      }
+      
+      focusableArray[nextIndex].focus();
+    }
+  });
+}
+
+// Dynamic mobile menu button system for Webflow interactions
+function setupMobileMenuButton() {
+  // Find mobile menu button and menu
+  const menuButton = document.querySelector('[data-hs-nav="menubtn"]');
+  const mobileMenu = document.querySelector('[data-hs-nav="menu"]');
+  
+  if (!menuButton || !mobileMenu) return;
+  
+  // Generate unique ID for the menu
+  const menuId = `mobile-menu-${Date.now()}`;
+  
+  // Set up ARIA attributes for button
+  menuButton.setAttribute('aria-expanded', 'false');
+  menuButton.setAttribute('aria-controls', menuId);
+  menuButton.setAttribute('aria-label', 'Open navigation menu');
+  
+  // Set up ARIA attributes for menu
+  mobileMenu.id = menuId;
+  mobileMenu.setAttribute('role', 'dialog');
+  mobileMenu.setAttribute('aria-modal', 'true');
+  mobileMenu.inert = true;
+  
+  // Track menu state
+  let isMenuOpen = false;
+  
+  // Function to open menu (simulate click)
+  function openMenu() {
+    if (isMenuOpen) return;
+    
+    isMenuOpen = true;
+    
+    // Update ARIA states
+    menuButton.setAttribute('aria-expanded', 'true');
+    menuButton.setAttribute('aria-label', 'Close navigation menu');
+    mobileMenu.inert = false;
+    
+    // Simulate click on button to trigger Webflow interactions
+    const clickEvent = new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+      view: window
+    });
+    menuButton.dispatchEvent(clickEvent);
+  }
+  
+  // Function to close menu (simulate second click)
+  function closeMenu() {
+    if (!isMenuOpen) return;
+    
+    isMenuOpen = false;
+    
+    // Move focus away BEFORE setting aria-hidden to avoid ARIA violation
+    if (mobileMenu.contains(document.activeElement)) {
+      menuButton.focus();
+    }
+    
+    // Update ARIA states after focus is moved
+    menuButton.setAttribute('aria-expanded', 'false');
+    menuButton.setAttribute('aria-label', 'Open navigation menu');
+    mobileMenu.inert = true;
+    
+    // Simulate second click on button to trigger Webflow interactions
+    const clickEvent = new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+      view: window
+    });
+    menuButton.dispatchEvent(clickEvent);
+  }
+  
+  // Function to toggle menu state
+  function toggleMenu() {
+    if (isMenuOpen) {
+      closeMenu();
+    } else {
+      openMenu();
+    }
+  }
+  
+  // Keyboard events for button
+  menuButton.addEventListener('keydown', function(e) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      toggleMenu();
+    }
+  });
+  
+  // Listen for actual clicks to update state (for cases where Webflow triggers clicks)
+  menuButton.addEventListener('click', function(e) {
+    // Only update state if this wasn't triggered by our own events
+    if (!e.isTrusted) return;
+    
+    // If closing and focus is inside menu, move it out first
+    if (isMenuOpen && mobileMenu.contains(document.activeElement)) {
+      menuButton.focus();
+    }
+    
+    // Toggle our internal state
+    isMenuOpen = !isMenuOpen;
+    
+    // Update ARIA attributes after focus is handled
+    menuButton.setAttribute('aria-expanded', isMenuOpen);
+    menuButton.setAttribute('aria-label', 
+      isMenuOpen ? 'Close navigation menu' : 'Open navigation menu'
+    );
+    mobileMenu.inert = !isMenuOpen;
+  });
+}
+
+// Helper function to sanitize text for HTML IDs
+function sanitizeForID(text) {
+  return text
+    .toLowerCase()
+    .replace(/[^a-z0-9\s]/g, '') // Remove special characters
+    .replace(/\s+/g, '-') // Replace spaces with hyphens
+    .replace(/^-+|-+$/g, '') // Remove leading/trailing hyphens
+    .substring(0, 50); // Limit length
+}
+
+// Setup mobile menu ARIA automation
+function setupMobileMenuARIA() {
+  const menuContainer = document.querySelector('[data-hs-nav="menu"]');
+  if (!menuContainer) return;
+
+  // Find all buttons and links inside the menu container
+  const buttons = menuContainer.querySelectorAll('button');
+  const links = menuContainer.querySelectorAll('a');
+
+  // Process each button (dropdown toggles)
+  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`;
+
+    // Set button ID and ARIA attributes
+    button.id = buttonId;
+    button.setAttribute('aria-expanded', 'false');
+    button.setAttribute('aria-controls', listId);
+
+    // Find associated dropdown list (look for next sibling or nearby element with links)
+    let dropdownList = button.nextElementSibling;
+    
+    // If next sibling doesn't contain links, look for parent's next sibling
+    if (!dropdownList || !dropdownList.querySelector('a')) {
+      dropdownList = button.parentElement?.nextElementSibling;
+    }
+    
+    // If still not found, look for a nearby element that contains multiple links
+    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)
+      );
+    }
+
+    // Set dropdown list ID and initial hidden state if found
+    if (dropdownList && dropdownList.querySelector('a')) {
+      dropdownList.id = listId;
+      dropdownList.inert = true;
+
+      // Add click listener to button to manage dropdown state
+      button.addEventListener('click', function() {
+        const isExpanded = button.getAttribute('aria-expanded') === 'true';
+        const newState = !isExpanded;
+        
+        // Update button state
+        button.setAttribute('aria-expanded', newState);
+        
+        // Update dropdown state
+        dropdownList.inert = !newState;
+      });
+    }
+  });
+
+  // Process each link (navigation items) - but don't override dropdown links
+  links.forEach(link => {
+    const linkText = link.textContent?.trim();
+    if (!linkText) return;
+
+    const sanitizedText = sanitizeForID(linkText);
+    const linkId = `navbar-mobile-${sanitizedText}-link`;
+
+    // Set link ID
+    link.id = linkId;
+    
+    // Links inside inert containers are automatically non-focusable
+  });
+  
+  // Add arrow key navigation for mobile menu
+  setupMobileMenuArrowNavigation(menuContainer);
+}
+
+// Arrow key navigation for mobile menu
+function setupMobileMenuArrowNavigation(menuContainer) {
+  // Get all focusable elements in the mobile menu
+  function getFocusableElements() {
+    return menuContainer.querySelectorAll('button:not([tabindex="-1"]), a:not([tabindex="-1"])');
+  }
+  
+  let currentFocusIndex = -1;
+  
+  menuContainer.addEventListener('keydown', function(e) {
+    const focusableElements = Array.from(getFocusableElements());
+    if (focusableElements.length === 0) return;
+    
+    // Find current focus index
+    const activeElement = document.activeElement;
+    currentFocusIndex = focusableElements.indexOf(activeElement);
+    
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      currentFocusIndex = (currentFocusIndex + 1) % focusableElements.length;
+      focusableElements[currentFocusIndex].focus();
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      currentFocusIndex = currentFocusIndex <= 0 ? focusableElements.length - 1 : currentFocusIndex - 1;
+      focusableElements[currentFocusIndex].focus();
+    } 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();
+      // Just prevent space from scrolling page - Enter activates links
+    } else if (e.key === 'Escape') {
+      // Close mobile menu
+      const mobileMenuButton = document.querySelector('[data-hs-nav="menubtn"]');
+      if (mobileMenuButton) {
+        mobileMenuButton.click();
+        mobileMenuButton.focus();
+      }
+    }
+  });
+}

package/configure-example.js

@@ -1,32 +0,0 @@
-function configure() {
-  // Check if hsmain is loaded AND the specific animation modules are available
-  if (!window.hsmain?.loaded || 
-      !window.hsmain?.textAnimations?.updateConfig || 
-      !window.hsmain?.heroAnimations?.updateConfig) {
-    setTimeout(configure, 10);
-    return;
-  }
-  
-  const api = window.hsmain;
-  
-  try {
-    api.textAnimations.updateConfig({
-      // your text animation config
-    });
-    
-    api.heroAnimations.updateConfig({
-      headingSplit: {
-        // your hero animation config
-      }
-    });
-    
-    api.textAnimations.restart();
-    api.heroAnimations.restart();
-  } catch (error) {
-    console.warn('Animation configuration failed:', error);
-    // Retry after a short delay if needed
-    setTimeout(configure, 50);
-  }
-}
-
-configure();