@hortonstudio/main 1.2.31 → 1.2.35

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/{utils → autoInit}/navbar.js

@@ -1,10 +1,83 @@
+// Global accessibility state
+let supportsInert = null;
+let screenReaderLiveRegion = null;
+
 export const init = () => {
+  setupAccessibilityFeatures();
   setupDynamicDropdowns();
   setupMobileMenuButton();
   setupMobileMenuARIA();
+  setupMobileMenuBreakpointHandler();
   return { result: 'navbar initialized' };
 };
 
+// Accessibility features setup
+function setupAccessibilityFeatures() {
+  // Check inert support once
+  supportsInert = 'inert' in HTMLElement.prototype;
+  
+  // Create screen reader live region
+  screenReaderLiveRegion = document.createElement('div');
+  screenReaderLiveRegion.setAttribute('aria-live', 'polite');
+  screenReaderLiveRegion.setAttribute('aria-atomic', 'true');
+  screenReaderLiveRegion.className = 'u-sr-only';
+  screenReaderLiveRegion.style.cssText = 'position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;';
+  document.body.appendChild(screenReaderLiveRegion);
+}
+
+// Inert polyfill for browsers that don't support it
+function setElementInert(element, isInert) {
+  if (supportsInert) {
+    element.inert = isInert;
+  } else {
+    // Polyfill: manage tabindex for all focusable elements
+    const focusableSelectors = 'a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])';
+    const focusableElements = element.querySelectorAll(focusableSelectors);
+    
+    if (isInert) {
+      // Store original tabindex values and disable
+      focusableElements.forEach(el => {
+        const currentTabindex = el.getAttribute('tabindex');
+        el.setAttribute('data-inert-tabindex', currentTabindex || '0');
+        el.setAttribute('tabindex', '-1');
+      });
+      element.setAttribute('data-inert', 'true');
+    } else {
+      // Restore original tabindex values
+      focusableElements.forEach(el => {
+        const originalTabindex = el.getAttribute('data-inert-tabindex');
+        if (originalTabindex === '0') {
+          el.removeAttribute('tabindex');
+        } else if (originalTabindex) {
+          el.setAttribute('tabindex', originalTabindex);
+        }
+        el.removeAttribute('data-inert-tabindex');
+      });
+      element.removeAttribute('data-inert');
+    }
+  }
+}
+
+// Screen reader announcements
+function announceToScreenReader(message) {
+  if (screenReaderLiveRegion) {
+    screenReaderLiveRegion.textContent = message;
+    
+    // Clear after a delay to allow for repeat announcements
+    setTimeout(() => {
+      screenReaderLiveRegion.textContent = '';
+    }, 1000);
+  }
+}
+
+// Extract menu name from element text or aria-label
+function getMenuName(element) {
+  const text = element.textContent?.trim() || 
+              element.getAttribute('aria-label') || 
+              'menu';
+  return text.replace(/^(Open|Close)\s+/i, '').replace(/\s+(menu|navigation)$/i, '');
+}
+
 // Desktop dropdown system
 function setupDynamicDropdowns() {
   const dropdownWrappers = document.querySelectorAll('[data-hs-nav="dropdown"]');
@@ -67,6 +140,11 @@ function setupDynamicDropdowns() {
       menuItems.forEach(item => {
         item.setAttribute('tabindex', '0');
       });
+      
+      // Announce to screen readers
+      const menuName = getMenuName(toggle);
+      announceToScreenReader(`${menuName} menu opened`);
+      
       const clickEvent = new MouseEvent('click', {
         bubbles: true,
         cancelable: true,
@@ -88,6 +166,11 @@ function setupDynamicDropdowns() {
       menuItems.forEach(item => {
         item.setAttribute('tabindex', '-1');
       });
+      
+      // Announce to screen readers
+      const menuName = getMenuName(toggle);
+      announceToScreenReader(`${menuName} menu closed`);
+      
       const clickEvent = new MouseEvent('click', {
         bubbles: true,
         cancelable: true,
@@ -340,7 +423,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"]');
@@ -356,16 +439,39 @@ function setupMobileMenuButton() {
   mobileMenu.id = menuId;
   mobileMenu.setAttribute('role', 'dialog');
   mobileMenu.setAttribute('aria-modal', 'true');
-  mobileMenu.inert = true;
+  setElementInert(mobileMenu, true);
   
   let isMenuOpen = false;
   
+  function shouldPreventMobileMenu() {
+    const menuHideElement = document.querySelector('.menu-hide.is-mobile');
+    if (!menuHideElement) return false;
+    
+    const computedStyle = window.getComputedStyle(menuHideElement);
+    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;
+    setElementInert(mobileMenu, false);
+    
+    // Announce to screen readers
+    const menuName = getMenuName(menuButton);
+    announceToScreenReader(`${menuName} opened`);
     
     // Prevent tabbing outside navbar using tabindex management
     const navbarWrapper = document.querySelector('[data-hs-nav="wrapper"]') || 
@@ -392,12 +498,29 @@ 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();
     }
     menuButton.setAttribute('aria-expanded', 'false');
     menuButton.setAttribute('aria-label', 'Open navigation menu');
-    mobileMenu.inert = true;
+    setElementInert(mobileMenu, true);
+    
+    // Announce to screen readers
+    const menuName = getMenuName(menuButton);
+    announceToScreenReader(`${menuName} closed`);
     
     // Restore tabbing to entire page using tabindex management
     const elementsToRestore = document.querySelectorAll('[data-mobile-menu-tabindex]');
@@ -420,6 +543,8 @@ function setupMobileMenuButton() {
   }
   
   function toggleMenu() {
+    if (shouldPreventMobileMenu()) return;
+    
     if (isMenuOpen) {
       closeMenu();
     } else {
@@ -450,15 +575,43 @@ 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'
     );
-    mobileMenu.inert = !isMenuOpen;
+    setElementInert(mobileMenu, !isMenuOpen);
     
     // Handle tabindex management for external clicks
     if (isMenuOpen) {
@@ -487,6 +640,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 menuHideElement = document.querySelector('.menu-hide.is-mobile');
+    if (!menuHideElement) return;
+    
+    const computedStyle = window.getComputedStyle(menuHideElement);
+    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 menuHideElement = document.querySelector('.menu-hide.is-mobile');
+    if (menuHideElement) {
+      resizeObserver.observe(menuHideElement);
+    }
+  }
+  
+  // Fallback to resize event
+  window.addEventListener('resize', handleBreakpointChange);
+  
+  // Initial check
+  handleBreakpointChange();
 }
 
 function sanitizeForID(text) {
@@ -518,30 +718,38 @@ function setupMobileMenuARIA() {
     button.setAttribute('aria-expanded', 'false');
     button.setAttribute('aria-controls', listId);
 
-    let dropdownList = button.nextElementSibling;
-    
-    if (!dropdownList || !dropdownList.querySelector('a')) {
-      dropdownList = button.parentElement?.nextElementSibling;
-    }
+    // Look for dropdown list in the same container as the button
+    let dropdownList = null;
+    const buttonContainer = button.closest('.menu-card_dropdown, .menu_contain, [data-hs-nav="menu"]');
     
-    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 (buttonContainer) {
+      // First try to find a list element within the same container
+      dropdownList = buttonContainer.querySelector('.menu-card_list, .dropdown-list, [role="menu"]');
+      
+      // If not found, look for any element with multiple links that's not the button itself
+      if (!dropdownList || !dropdownList.querySelector('a')) {
+        const allListElements = buttonContainer.querySelectorAll('div, ul, nav');
+        dropdownList = Array.from(allListElements).find(el => 
+          el.querySelectorAll('a').length > 1 && 
+          !el.contains(button) &&
+          el !== button
+        );
+      }
     }
 
     if (dropdownList && dropdownList.querySelector('a')) {
       dropdownList.id = listId;
-      dropdownList.inert = true;
+      setElementInert(dropdownList, true);
 
       button.addEventListener('click', function() {
         const isExpanded = button.getAttribute('aria-expanded') === 'true';
         const newState = !isExpanded;
         button.setAttribute('aria-expanded', newState);
-        dropdownList.inert = !newState;
+        setElementInert(dropdownList, !newState);
+        
+        // Announce to screen readers
+        const menuName = getMenuName(button);
+        announceToScreenReader(`${menuName} submenu ${newState ? 'opened' : 'closed'}`);
       });
     }
   });
@@ -565,7 +773,8 @@ function setupMobileMenuArrowNavigation(menuContainer) {
     return Array.from(allElements).filter(el => {
       let current = el;
       while (current && current !== menuContainer) {
-        if (current.inert === true) {
+        // Check both native inert and polyfill inert
+        if (current.inert === true || current.getAttribute('data-inert') === 'true') {
           return false;
         }
         current = current.parentElement;

package/index.js

@@ -1,4 +1,4 @@
-// Version:1.2.31
+// Version:1.2.35
 
 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.31",
+  "version": "1.2.35",
   "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();
+}