@hortonstudio/main 1.2.30 → 1.2.34

package/.claude/settings.local.json

@@ -37,7 +37,9 @@
       "Bash(grep:*)",
       "Bash(git reset:*)",
       "Bash(git checkout:*)",
-      "Bash(rg:*)"
+      "Bash(rg:*)",
+      "Bash(/usr/local/lib/node_modules/@anthropic-ai/claude-code/vendor/ripgrep/arm64-darwin/rg -n \"data-hs-heroconfig\" /Users/devan/Documents/custom-code/main/animations/hero.js)",
+      "Bash(/usr/local/lib/node_modules/@anthropic-ai/claude-code/vendor/ripgrep/arm64-darwin/rg -n \"data-hs-config\" /Users/devan/Documents/custom-code/main/animations/hero.js)"
     ],
     "deny": []
   }

package/animations/hero.js

@@ -205,7 +205,7 @@ export async function init() {
     const appearElements = document.querySelectorAll('[data-hs-hero="appear"]');
     
     // Check if nav has advanced config
-    const hasAdvancedNav = navElement && navElement.hasAttribute('data-hs-heroconfig') && navElement.getAttribute('data-hs-heroconfig') === 'advanced';
+    const hasAdvancedNav = navElement && navElement.hasAttribute('data-hs-config') && navElement.getAttribute('data-hs-config') === 'advanced';
     
     // First child elements - only select if advanced nav is enabled
     const navButton = [];
@@ -224,7 +224,7 @@ export async function init() {
     subheadingElements.forEach(el => {
         if (el.firstElementChild) {
             // Get the heroconfig attribute to determine animation type (default to appear)
-            const heroConfig = el.getAttribute('data-hs-heroconfig') || 'appear';
+            const heroConfig = el.getAttribute('data-hs-config') || 'appear';
             
             if (heroConfig === 'appear') {
                 subheadingAppearElements.push(el.firstElementChild);
@@ -243,7 +243,7 @@ export async function init() {
     headingElements.forEach(el => {
         if (el.firstElementChild) {
             // Get the heroconfig attribute to determine animation type
-            const heroConfig = el.getAttribute('data-hs-heroconfig') || 'line'; // default to line if not specified
+            const heroConfig = el.getAttribute('data-hs-config') || 'line'; // default to line if not specified
             
             if (heroConfig === 'appear') {
                 headingAppearElements.push(el.firstElementChild);
@@ -319,7 +319,7 @@ export async function init() {
         if (heading.length > 0) {
             headingSplitElements.forEach((parent, index) => {
                 const textElement = heading[index];
-                const splitType = parent.getAttribute('data-hs-heroconfig') || 'line';
+                const splitType = parent.getAttribute('data-hs-config') || 'line';
                 
                 let splitConfig = {};
                 let elementsClass = '';
@@ -360,7 +360,7 @@ export async function init() {
         if (subheading.length > 0) {
             subheadingSplitElements.forEach((parent, index) => {
                 const textElement = subheading[index];
-                const splitType = parent.getAttribute('data-hs-heroconfig') || 'word';
+                const splitType = parent.getAttribute('data-hs-config') || 'word';
                 
                 let splitConfig = {};
                 let elementsClass = '';
@@ -513,9 +513,7 @@ export async function init() {
                             ease: config.headingSplit.ease,
                             onComplete: () => {
                                 if (split && split.revert) {
-                                    setTimeout(() => {
                                         split.revert();
-                                    }, 100);
                                 }
                             }
                         }, 
@@ -534,9 +532,7 @@ export async function init() {
                             ease: config.subheadingSplit.ease,
                             onComplete: () => {
                                 if (split && split.revert) {
-                                    setTimeout(() => {
                                         split.revert();
-                                    }, 100);
                                 }
                             }
                         }, 

package/autoInit/accessibility.js

@@ -0,0 +1,71 @@
+export function init() {
+  function setupStatsAccessibility() {
+    const statsElements = document.querySelectorAll('[data-hs-accessibility="stats"]');
+    
+    statsElements.forEach(element => {
+      // Get all text content from the element and its children
+      const textContent = extractTextContent(element);
+      
+      if (textContent) {
+        element.setAttribute('aria-label', textContent);
+        element.setAttribute('role', 'img');
+        
+        // Debug: log what we found
+        console.log('Stats element aria-label:', textContent);
+      }
+    });
+  }
+
+  function extractTextContent(element) {
+    const textParts = [];
+    
+    function processNode(node) {
+      // Skip elements with aria-hidden="true"
+      if (node.nodeType === Node.ELEMENT_NODE && 
+          node.getAttribute('aria-hidden') === 'true') {
+        return;
+      }
+      
+      // If element has data-original-text, use that instead of current text
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        const originalText = node.getAttribute('data-original-text');
+        if (originalText) {
+          textParts.push(originalText);
+          return; // Don't process children
+        }
+      }
+      
+      // Process text nodes
+      if (node.nodeType === Node.TEXT_NODE) {
+        const text = node.textContent.trim();
+        if (text && text.length > 0) {
+          textParts.push(text);
+        }
+      }
+      
+      // Process child nodes
+      if (node.childNodes) {
+        node.childNodes.forEach(processNode);
+      }
+    }
+    
+    processNode(element);
+    
+    // Combine all text parts with spaces and clean up
+    return textParts
+      .join(' ')
+      .replace(/\s+/g, ' ')
+      .trim();
+  }
+
+  function init() {
+    // Wait a bit for counter scripts to initialize and set data-original-text
+    setTimeout(() => {
+      setupStatsAccessibility();
+    }, 100);
+    
+    return { result: 'accessibility initialized' };
+  }
+
+  return init();
+}

package/autoInit/modal.js

@@ -3,9 +3,8 @@ function initModal() {
     transitionDuration: 0.3,
     blurOpacity: 0.5,
     breakpoints: {
-      mobile: 479,
-      tablet: 767,
-      desktop: 991
+      mobile: 767,
+      tablet: 991
     }
   };
 
@@ -13,8 +12,7 @@ function initModal() {
     const width = window.innerWidth;
     if (width <= config.breakpoints.mobile) return 'mobile';
     if (width <= config.breakpoints.tablet) return 'tablet';
-    if (width <= config.breakpoints.desktop) return 'desktop';
-    return 'desktop-large';
+    return 'desktop';
   }
 
   function shouldPreventModal(element) {
@@ -55,11 +53,23 @@ function initModal() {
     });
   }
 
-  function forceClosePreventedModals() {
+  // Store modal states that were closed due to prevention
+  let preventedModalStates = new Map();
+
+  function handleBreakpointChange() {
     document.querySelectorAll('[data-hs-modalprevent]').forEach(element => {
-      if (shouldPreventModal(element) && element.x) {
+      const elementKey = element.getAttribute('data-hs-modal') + '_' + (element.id || element.className);
+      const shouldPrevent = shouldPreventModal(element);
+      const wasStoredAsOpen = preventedModalStates.get(elementKey);
+      
+      if (shouldPrevent && element.x) {
+        preventedModalStates.set(elementKey, true);
         element.x = 0;
         closeModal(element);
+      } else if (!shouldPrevent && wasStoredAsOpen) {
+        preventedModalStates.delete(elementKey);
+        element.x = 1;
+        openModal(element);
       }
     });
   }
@@ -97,7 +107,7 @@ function initModal() {
 
   // Handle window resize to check for prevented modals
   window.addEventListener('resize', function() {
-    forceClosePreventedModals();
+    handleBreakpointChange();
   });
 
   return { result: 'modal initialized' };

package/{utils → autoInit}/navbar.js

@@ -2,6 +2,7 @@ export const init = () => {
   setupDynamicDropdowns();
   setupMobileMenuButton();
   setupMobileMenuARIA();
+  setupMobileMenuBreakpointHandler();
   return { result: 'navbar initialized' };
 };
 
@@ -340,7 +341,7 @@ function addDesktopArrowNavigation() {
   });
 }
 
-// Mobile menu button system
+// Mobile menu button system with modal-like functionality
 function setupMobileMenuButton() {
   const menuButton = document.querySelector('[data-hs-nav="menubtn"]');
   const mobileMenu = document.querySelector('[data-hs-nav="menu"]');
@@ -360,9 +361,28 @@ function setupMobileMenuButton() {
   
   let isMenuOpen = false;
   
+  function shouldPreventMobileMenu() {
+    const menuSizeElement = document.querySelector('.menu-size.is-mobile');
+    if (!menuSizeElement) return false;
+    
+    const computedStyle = window.getComputedStyle(menuSizeElement);
+    return computedStyle.display === 'none';
+  }
+  
   function openMenu() {
-    if (isMenuOpen) return;
+    if (isMenuOpen || shouldPreventMobileMenu()) return;
     isMenuOpen = true;
+    
+    // Add body overflow hidden class
+    document.body.classList.add('u-overflow-hidden');
+    
+    // Add blur effect to modal blur elements
+    document.querySelectorAll('[data-hs-nav="modal-blur"]').forEach(element => {
+      element.style.display = 'block';
+      element.style.opacity = '0.5';
+      element.style.transition = 'opacity 0.3s ease';
+    });
+    
     menuButton.setAttribute('aria-expanded', 'true');
     menuButton.setAttribute('aria-label', 'Close navigation menu');
     mobileMenu.inert = false;
@@ -392,6 +412,19 @@ function setupMobileMenuButton() {
   function closeMenu() {
     if (!isMenuOpen) return;
     isMenuOpen = false;
+    
+    // Remove body overflow hidden class
+    document.body.classList.remove('u-overflow-hidden');
+    
+    // Remove blur effect from modal blur elements
+    document.querySelectorAll('[data-hs-nav="modal-blur"]').forEach(element => {
+      element.style.opacity = '0';
+      element.style.transition = 'opacity 0.3s ease';
+      setTimeout(() => {
+        element.style.display = 'none';
+      }, 300);
+    });
+    
     if (mobileMenu.contains(document.activeElement)) {
       menuButton.focus();
     }
@@ -420,6 +453,8 @@ function setupMobileMenuButton() {
   }
   
   function toggleMenu() {
+    if (shouldPreventMobileMenu()) return;
+    
     if (isMenuOpen) {
       closeMenu();
     } else {
@@ -450,10 +485,38 @@ function setupMobileMenuButton() {
   
   menuButton.addEventListener('click', function(e) {
     if (!e.isTrusted) return;
+    
+    if (shouldPreventMobileMenu()) return;
+    
     if (isMenuOpen && mobileMenu.contains(document.activeElement)) {
       menuButton.focus();
     }
-    isMenuOpen = !isMenuOpen;
+    
+    const newMenuState = !isMenuOpen;
+    isMenuOpen = newMenuState;
+    
+    // Handle body overflow class
+    if (isMenuOpen) {
+      document.body.classList.add('u-overflow-hidden');
+    } else {
+      document.body.classList.remove('u-overflow-hidden');
+    }
+    
+    // Handle blur effect
+    document.querySelectorAll('[data-hs-nav="modal-blur"]').forEach(element => {
+      if (isMenuOpen) {
+        element.style.display = 'block';
+        element.style.opacity = '0.5';
+        element.style.transition = 'opacity 0.3s ease';
+      } else {
+        element.style.opacity = '0';
+        element.style.transition = 'opacity 0.3s ease';
+        setTimeout(() => {
+          element.style.display = 'none';
+        }, 300);
+      }
+    });
+    
     menuButton.setAttribute('aria-expanded', isMenuOpen);
     menuButton.setAttribute('aria-label', 
       isMenuOpen ? 'Close navigation menu' : 'Open navigation menu'
@@ -487,6 +550,53 @@ function setupMobileMenuButton() {
       });
     }
   });
+  
+  // Store the menu state and functions for breakpoint handler
+  window.mobileMenuState = {
+    isMenuOpen: () => isMenuOpen,
+    closeMenu: closeMenu,
+    openMenu: openMenu
+  };
+}
+
+// Mobile menu breakpoint handler
+function setupMobileMenuBreakpointHandler() {
+  let preventedMenuState = false;
+  
+  function handleBreakpointChange() {
+    const menuSizeElement = document.querySelector('.menu-size.is-mobile');
+    if (!menuSizeElement) return;
+    
+    const computedStyle = window.getComputedStyle(menuSizeElement);
+    const shouldPrevent = computedStyle.display === 'none';
+    
+    if (!window.mobileMenuState) return;
+    
+    if (shouldPrevent && window.mobileMenuState.isMenuOpen()) {
+      // Store that the menu was open before being prevented
+      preventedMenuState = true;
+      window.mobileMenuState.closeMenu();
+    } else if (!shouldPrevent && preventedMenuState) {
+      // Restore menu state if it was open before being prevented
+      preventedMenuState = false;
+      window.mobileMenuState.openMenu();
+    }
+  }
+  
+  // Use ResizeObserver for more accurate detection
+  if (window.ResizeObserver) {
+    const resizeObserver = new ResizeObserver(handleBreakpointChange);
+    const menuSizeElement = document.querySelector('.menu-size.is-mobile');
+    if (menuSizeElement) {
+      resizeObserver.observe(menuSizeElement);
+    }
+  }
+  
+  // Fallback to resize event
+  window.addEventListener('resize', handleBreakpointChange);
+  
+  // Initial check
+  handleBreakpointChange();
 }
 
 function sanitizeForID(text) {

package/index.js

@@ -1,4 +1,4 @@
-// Version:1.2.30
+// Version:1.2.32
 
 const API_NAME = 'hsmain';
 
@@ -18,12 +18,14 @@ const initializeHsMain = async () => {
   const utilityModules = {
     'data-hs-util-toc': true,
     'data-hs-util-progress': true,
-    'data-hs-util-navbar': true
+    'data-hs-util-ba': true
   };
 
   const autoInitModules = {
     'smooth-scroll': true,
-    'modal': true
+    'modal': true,
+    'navbar': true,
+    'accessibility': true
   };
 
   const allDataAttributes = { ...animationModules, ...utilityModules };
@@ -47,9 +49,11 @@ const initializeHsMain = async () => {
     'data-hs-anim-transition': () => import('./animations/transition.js'),
     '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'),
+    'data-hs-util-ba': () => import('./utils/before-after.js'),
     'smooth-scroll': () => import('./autoInit/smooth-scroll.js'),
-    'modal': () => import('./autoInit/modal.js')
+    'modal': () => import('./autoInit/modal.js'),
+    'navbar': () => import('./autoInit/navbar.js'),
+    'accessibility': () => import('./autoInit/accessibility.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.30",
+  "version": "1.2.34",
   "description": "Animation and utility library for client websites",
   "main": "index.js",
   "type": "module",

package/utils/before-after.js

@@ -0,0 +1,387 @@
+export function init() {
+  const config = {
+    defaultMode: 'split',
+    sliderPosition: 50,
+    touchSensitivity: 1,
+    keyboardStep: 5,
+    autoPlay: false,
+    autoPlayInterval: 5000
+  };
+
+  let instances = [];
+  let currentSlideIndex = {};
+  let isDragging = false;
+  let dragInstance = null;
+
+  function updateConfig(newConfig) {
+    Object.assign(config, newConfig);
+  }
+
+  function initInstance(wrapper) {
+    const instanceId = instances.length;
+    const items = Array.from(wrapper.children);
+    
+    if (items.length === 0) return;
+
+    const instance = {
+      id: instanceId,
+      wrapper,
+      items,
+      currentIndex: 0,
+      mode: config.defaultMode,
+      sliderPosition: config.sliderPosition,
+      previousSliderPosition: config.sliderPosition
+    };
+
+    instances.push(instance);
+    currentSlideIndex[instanceId] = 0;
+
+    setupInstance(instance);
+    showSlide(instance, 0);
+    
+    return instance;
+  }
+
+  function setupInstance(instance) {
+    const { wrapper, items } = instance;
+
+    items.forEach((item, index) => {
+      item.style.display = index === 0 ? 'block' : 'none';
+      
+      // Set default clip path for after image
+      const afterImage = item.querySelector('[data-hs-ba="image-after"]');
+      if (afterImage) {
+        afterImage.style.clipPath = `polygon(${config.sliderPosition}% 0%, 100% 0%, 100% 100%, ${config.sliderPosition}% 100%)`;
+      }
+      
+      setupItemInteractions(instance, item, index);
+    });
+
+    setupKeyboardNavigation(instance);
+  }
+
+  function setupItemInteractions(instance, item, itemIndex) {
+    const modeButtons = item.querySelectorAll('[data-hs-ba^="mode-"]');
+    const leftArrow = item.querySelector('[data-hs-ba="left"]');
+    const rightArrow = item.querySelector('[data-hs-ba="right"]');
+    const slider = item.querySelector('[data-hs-ba="slider"]');
+    const pagination = item.querySelector('[data-hs-ba="pagination"]');
+
+    modeButtons.forEach(button => {
+      const mode = button.getAttribute('data-hs-ba').replace('mode-', '');
+      button.addEventListener('click', (e) => {
+        e.preventDefault();
+        
+        // If clicking split mode when already in split mode, reset to default position
+        if (mode === 'split' && instance.mode === 'split') {
+          instance.sliderPosition = config.sliderPosition;
+        }
+        
+        setMode(instance, itemIndex, mode);
+      });
+    });
+
+    if (leftArrow) {
+      leftArrow.addEventListener('click', (e) => {
+        e.preventDefault();
+        navigateSlide(instance, -1);
+      });
+    }
+
+    if (rightArrow) {
+      rightArrow.addEventListener('click', (e) => {
+        e.preventDefault();
+        navigateSlide(instance, 1);
+      });
+    }
+
+    if (slider) {
+      slider.style.cursor = 'grab';
+      setupSliderDragging(instance, slider, itemIndex);
+    }
+
+    if (pagination) {
+      setupPagination(instance, pagination);
+    }
+  }
+
+  function setMode(instance, itemIndex, mode) {
+    const item = instance.items[itemIndex];
+    const afterImage = item.querySelector('[data-hs-ba="image-after"]');
+    const slider = item.querySelector('.ba-slider');
+    const sliderHandle = item.querySelector('[data-hs-ba="slider"]');
+    const modeButtons = item.querySelectorAll('[data-hs-ba^="mode-"]');
+
+    modeButtons.forEach(btn => {
+      const btnMode = btn.getAttribute('data-hs-ba').replace('mode-', '');
+      if (btnMode === mode) {
+        btn.classList.remove('light');
+      } else {
+        btn.classList.add('light');
+      }
+    });
+
+    switch (mode) {
+      case 'before':
+        if (afterImage) afterImage.style.clipPath = 'polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)';
+        if (slider) slider.style.display = 'none';
+        break;
+      case 'after':
+        if (afterImage) afterImage.style.clipPath = 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)';
+        if (slider) slider.style.display = 'none';
+        break;
+      case 'split':
+        if (afterImage) afterImage.style.clipPath = `polygon(${instance.sliderPosition}% 0%, 100% 0%, 100% 100%, ${instance.sliderPosition}% 100%)`;
+        if (sliderHandle) sliderHandle.style.left = `${instance.sliderPosition}%`;
+        if (slider) slider.style.display = 'flex';
+        break;
+    }
+
+    instance.mode = mode;
+  }
+
+  function setupSliderDragging(instance, slider, itemIndex) {
+    const item = instance.items[itemIndex];
+    const imageWrap = item.querySelector('.ba-image_wrap');
+    
+    if (!imageWrap) return;
+
+    function startDrag(e) {
+      isDragging = true;
+      dragInstance = { instance, itemIndex, imageWrap, slider };
+      document.body.style.userSelect = 'none';
+      document.body.style.cursor = 'grabbing';
+      slider.style.cursor = 'grabbing';
+      e.preventDefault();
+    }
+
+    function handleDrag(clientX) {
+      if (!isDragging || !dragInstance) return;
+
+      const rect = dragInstance.imageWrap.getBoundingClientRect();
+      const x = clientX - rect.left;
+      const percentage = Math.max(0, Math.min(100, (x / rect.width) * 100));
+      
+      // Move the slider element directly
+      dragInstance.slider.style.left = `${percentage}%`;
+      
+      // Update the clip path
+      updateSliderPosition(dragInstance.instance, dragInstance.itemIndex, percentage);
+      dragInstance.instance.sliderPosition = percentage;
+    }
+
+    function endDrag() {
+      isDragging = false;
+      if (dragInstance && dragInstance.slider) {
+        dragInstance.slider.style.cursor = 'grab';
+      }
+      dragInstance = null;
+      document.body.style.userSelect = '';
+      document.body.style.cursor = '';
+    }
+
+    slider.addEventListener('mousedown', startDrag);
+    slider.addEventListener('touchstart', startDrag, { passive: false });
+
+    document.addEventListener('mousemove', (e) => handleDrag(e.clientX));
+    document.addEventListener('touchmove', (e) => {
+      if (isDragging) {
+        e.preventDefault();
+        handleDrag(e.touches[0].clientX);
+      }
+    }, { passive: false });
+
+    document.addEventListener('mouseup', endDrag);
+    document.addEventListener('touchend', endDrag);
+
+    imageWrap.addEventListener('click', (e) => {
+      if (instance.mode !== 'split') return;
+      
+      const rect = imageWrap.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const percentage = (x / rect.width) * 100;
+      
+      slider.style.left = `${percentage}%`;
+      updateSliderPosition(instance, itemIndex, percentage);
+      instance.sliderPosition = percentage;
+    });
+  }
+
+  function updateSliderPosition(instance, itemIndex, percentage) {
+    const item = instance.items[itemIndex];
+    const afterImage = item.querySelector('[data-hs-ba="image-after"]');
+
+    if (afterImage) {
+      afterImage.style.clipPath = `polygon(${percentage}% 0%, 100% 0%, 100% 100%, ${percentage}% 100%)`;
+    }
+  }
+
+  function navigateSlide(instance, direction) {
+    const newIndex = instance.currentIndex + direction;
+    const maxIndex = instance.items.length - 1;
+
+    let targetIndex;
+    if (newIndex > maxIndex) {
+      targetIndex = 0;
+    } else if (newIndex < 0) {
+      targetIndex = maxIndex;
+    } else {
+      targetIndex = newIndex;
+    }
+
+    showSlide(instance, targetIndex);
+  }
+
+  function showSlide(instance, index) {
+    if (index === instance.currentIndex) return;
+
+    // Reset split position to default when switching items
+    instance.sliderPosition = config.sliderPosition;
+
+    instance.items.forEach((item, i) => {
+      item.style.display = i === index ? 'block' : 'none';
+      
+      // Update clip path for the new active item
+      if (i === index) {
+        const afterImage = item.querySelector('[data-hs-ba="image-after"]');
+        const sliderHandle = item.querySelector('[data-hs-ba="slider"]');
+        
+        if (afterImage) {
+          // Apply default slider position to new item
+          if (instance.mode === 'split') {
+            afterImage.style.clipPath = `polygon(${instance.sliderPosition}% 0%, 100% 0%, 100% 100%, ${instance.sliderPosition}% 100%)`;
+          }
+        }
+        
+        if (sliderHandle && instance.mode === 'split') {
+          // Position slider at default position
+          sliderHandle.style.left = `${instance.sliderPosition}%`;
+        }
+      }
+    });
+
+    instance.currentIndex = index;
+    currentSlideIndex[instance.id] = index;
+
+    updatePagination(instance);
+    setMode(instance, index, instance.mode);
+  }
+
+  function setupPagination(instance, pagination) {
+    const dots = Array.from(pagination.querySelectorAll('.ba-pag_dot'));
+    
+    dots.forEach((dot, index) => {
+      dot.addEventListener('click', () => {
+        showSlide(instance, index);
+      });
+      
+      dot.style.cursor = 'pointer';
+      dot.setAttribute('role', 'button');
+      dot.setAttribute('tabindex', '0');
+      dot.setAttribute('aria-label', `Go to slide ${index + 1}`);
+      
+      dot.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          showSlide(instance, index);
+        }
+      });
+    });
+  }
+
+  function updatePagination(instance) {
+    instance.items.forEach((item, itemIndex) => {
+      const pagination = item.querySelector('[data-hs-ba="pagination"]');
+      if (!pagination) return;
+
+      const dots = pagination.querySelectorAll('.ba-pag_dot');
+      dots.forEach((dot, dotIndex) => {
+        if (dotIndex === instance.currentIndex) {
+          dot.classList.add('active');
+          dot.setAttribute('aria-current', 'true');
+        } else {
+          dot.classList.remove('active');
+          dot.removeAttribute('aria-current');
+        }
+      });
+    });
+  }
+
+  function setupKeyboardNavigation(instance) {
+    instance.wrapper.addEventListener('keydown', (e) => {
+      switch (e.key) {
+        case 'ArrowLeft':
+          e.preventDefault();
+          if (instance.mode === 'split') {
+            const newPos = Math.max(0, instance.sliderPosition - config.keyboardStep);
+            updateSliderPosition(instance, instance.currentIndex, newPos);
+            instance.sliderPosition = newPos;
+          } else {
+            navigateSlide(instance, -1);
+          }
+          break;
+        case 'ArrowRight':
+          e.preventDefault();
+          if (instance.mode === 'split') {
+            const newPos = Math.min(100, instance.sliderPosition + config.keyboardStep);
+            updateSliderPosition(instance, instance.currentIndex, newPos);
+            instance.sliderPosition = newPos;
+          } else {
+            navigateSlide(instance, 1);
+          }
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          navigateSlide(instance, -1);
+          break;
+        case 'ArrowDown':
+          e.preventDefault();
+          navigateSlide(instance, 1);
+          break;
+        case '1':
+          setMode(instance, instance.currentIndex, 'before');
+          break;
+        case '2':
+          setMode(instance, instance.currentIndex, 'split');
+          break;
+        case '3':
+          setMode(instance, instance.currentIndex, 'after');
+          break;
+      }
+    });
+
+    instance.wrapper.setAttribute('tabindex', '0');
+    instance.wrapper.setAttribute('role', 'application');
+    instance.wrapper.setAttribute('aria-label', 'Before and after image comparison');
+  }
+
+  function init() {
+    const wrappers = document.querySelectorAll('[data-hs-ba="wrapper"]');
+    
+    wrappers.forEach(wrapper => {
+      initInstance(wrapper);
+    });
+
+    return { result: 'before-after initialized' };
+  }
+
+  if (typeof window !== 'undefined') {
+    window.hsmain = window.hsmain || {};
+    window.hsmain.utilBeforeAfter = {
+      init,
+      config,
+      updateConfig,
+      instances,
+      showSlide: (instanceId, index) => {
+        const instance = instances[instanceId];
+        if (instance) showSlide(instance, index);
+      },
+      setMode: (instanceId, mode) => {
+        const instance = instances[instanceId];
+        if (instance) setMode(instance, instance.currentIndex, mode);
+      }
+    };
+  }
+
+  return init();
+}