@hortonstudio/main 1.4.0 → 1.4.2

package/animations/text.js

@@ -106,14 +106,34 @@ async function waitForFonts() {
   }
 }
 
+function findTextElement(container) {
+  // Find the deepest element that contains actual text
+  const walker = document.createTreeWalker(
+    container,
+    NodeFilter.SHOW_ELEMENT,
+    {
+      acceptNode: (node) => {
+        // Check if this element has direct text content (not just whitespace)
+        const hasDirectText = Array.from(node.childNodes).some(child => 
+          child.nodeType === Node.TEXT_NODE && child.textContent.trim()
+        );
+        return hasDirectText ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+      }
+    }
+  );
+  
+  return walker.nextNode() || container;
+}
+
 function showElementsWithoutAnimation() {
   // Simply show all text elements without any animation or split text
   const allTextElements = [
-    ...document.querySelectorAll(".a-char-split > *:first-child"),
-    ...document.querySelectorAll(".a-word-split > *:first-child"),
-    ...document.querySelectorAll(".a-line-split > *:first-child"),
-    ...document.querySelectorAll(".a-appear"),
-    ...document.querySelectorAll(".a-reveal"),
+    ...document.querySelectorAll('[data-hs-anim="char"]'),
+    ...document.querySelectorAll('[data-hs-anim="word"]'),
+    ...document.querySelectorAll('[data-hs-anim="line"]'),
+    ...document.querySelectorAll('[data-hs-anim="appear"]'),
+    ...document.querySelectorAll('[data-hs-anim="reveal"]'),
+    ...document.querySelectorAll('[data-hs-anim="group"]'),
   ];
 
   allTextElements.forEach((element) => {
@@ -138,16 +158,22 @@ const CharSplitAnimations = {
       return;
     }
 
-    const elements = document.querySelectorAll(".a-char-split > *:first-child");
+    const elements = document.querySelectorAll('[data-hs-anim="char"]');
 
-    elements.forEach((textElement) => {
+    elements.forEach((container) => {
+      // Skip if already processed
+      if (container.hasAttribute('data-split-processed')) return;
+      
+      const textElement = findTextElement(container);
+      if (!textElement) return;
       try {
         const split = SplitText.create(textElement, {
           type: "words,chars",
           mask: "chars",
           charsClass: "char",
         });
-        textElement.splitTextInstance = split;
+        container.splitTextInstance = split;
+        container.setAttribute('data-split-processed', 'true');
 
         gsap.set(split.chars, {
           yPercent: config.charSplit.yPercent,
@@ -168,20 +194,25 @@ const CharSplitAnimations = {
     }
 
     document
-      .querySelectorAll(".a-char-split > *:first-child")
-      .forEach((textElement) => {
+      .querySelectorAll('[data-hs-anim="char"]')
+      .forEach((container) => {
+        const textElement = findTextElement(container);
+        if (!textElement) return;
         try {
-          const chars = textElement.querySelectorAll(".char");
+          const chars = container.querySelectorAll(".char");
           const tl = gsap.timeline({
             scrollTrigger: {
-              trigger: textElement,
+              trigger: container,
               start: config.charSplit.start,
-              invalidateOnRefresh: false,
+              invalidateOnRefresh: true,
+              toggleActions: "play none none none",
+              once: true,
             },
             onComplete: () => {
-              if (textElement.splitTextInstance) {
-                textElement.splitTextInstance.revert();
-                delete textElement.splitTextInstance;
+              if (container.splitTextInstance) {
+                container.splitTextInstance.revert();
+                delete container.splitTextInstance;
+                container.removeAttribute('data-split-processed');
               }
             },
           });
@@ -209,16 +240,22 @@ const WordSplitAnimations = {
       return;
     }
 
-    const elements = document.querySelectorAll(".a-word-split > *:first-child");
+    const elements = document.querySelectorAll('[data-hs-anim="word"]');
 
-    elements.forEach((textElement) => {
+    elements.forEach((container) => {
+      // Skip if already processed
+      if (container.hasAttribute('data-split-processed')) return;
+      
+      const textElement = findTextElement(container);
+      if (!textElement) return;
       try {
         const split = SplitText.create(textElement, {
           type: "words",
           mask: "words",
           wordsClass: "word",
         });
-        textElement.splitTextInstance = split;
+        container.splitTextInstance = split;
+        container.setAttribute('data-split-processed', 'true');
 
         gsap.set(split.words, {
           yPercent: config.wordSplit.yPercent,
@@ -239,20 +276,25 @@ const WordSplitAnimations = {
     }
 
     document
-      .querySelectorAll(".a-word-split > *:first-child")
-      .forEach((textElement) => {
+      .querySelectorAll('[data-hs-anim="word"]')
+      .forEach((container) => {
+        const textElement = findTextElement(container);
+        if (!textElement) return;
         try {
-          const words = textElement.querySelectorAll(".word");
+          const words = container.querySelectorAll(".word");
           const tl = gsap.timeline({
             scrollTrigger: {
-              trigger: textElement,
+              trigger: container,
               start: config.wordSplit.start,
-              invalidateOnRefresh: false,
+              invalidateOnRefresh: true,
+              toggleActions: "play none none none",
+              once: true,
             },
             onComplete: () => {
-              if (textElement.splitTextInstance) {
-                textElement.splitTextInstance.revert();
-                delete textElement.splitTextInstance;
+              if (container.splitTextInstance) {
+                container.splitTextInstance.revert();
+                delete container.splitTextInstance;
+                container.removeAttribute('data-split-processed');
               }
             },
           });
@@ -280,16 +322,22 @@ const LineSplitAnimations = {
       return;
     }
 
-    const elements = document.querySelectorAll(".a-line-split > *:first-child");
+    const elements = document.querySelectorAll('[data-hs-anim="line"]');
 
-    elements.forEach((textElement) => {
+    elements.forEach((container) => {
+      // Skip if already processed
+      if (container.hasAttribute('data-split-processed')) return;
+      
+      const textElement = findTextElement(container);
+      if (!textElement) return;
       try {
         const split = SplitText.create(textElement, {
           type: "lines",
           mask: "lines",
           linesClass: "line",
         });
-        textElement.splitTextInstance = split;
+        container.splitTextInstance = split;
+        container.setAttribute('data-split-processed', 'true');
 
         gsap.set(split.lines, {
           yPercent: config.lineSplit.yPercent,
@@ -310,20 +358,25 @@ const LineSplitAnimations = {
     }
 
     document
-      .querySelectorAll(".a-line-split > *:first-child")
-      .forEach((textElement) => {
+      .querySelectorAll('[data-hs-anim="line"]')
+      .forEach((container) => {
+        const textElement = findTextElement(container);
+        if (!textElement) return;
         try {
-          const lines = textElement.querySelectorAll(".line");
+          const lines = container.querySelectorAll(".line");
           const tl = gsap.timeline({
             scrollTrigger: {
-              trigger: textElement,
+              trigger: container,
               start: config.lineSplit.start,
-              invalidateOnRefresh: false,
+              invalidateOnRefresh: true,
+              toggleActions: "play none none none",
+              once: true,
             },
             onComplete: () => {
-              if (textElement.splitTextInstance) {
-                textElement.splitTextInstance.revert();
-                delete textElement.splitTextInstance;
+              if (container.splitTextInstance) {
+                container.splitTextInstance.revert();
+                delete container.splitTextInstance;
+                container.removeAttribute('data-split-processed');
               }
             },
           });
@@ -351,7 +404,7 @@ const AppearAnimations = {
       return;
     }
 
-    const elements = document.querySelectorAll(".a-appear");
+    const elements = document.querySelectorAll('[data-hs-anim="appear"]');
     elements.forEach((element) => {
       try {
         gsap.set(element, {
@@ -371,13 +424,15 @@ const AppearAnimations = {
       return;
     }
 
-    document.querySelectorAll(".a-appear").forEach((element) => {
+    document.querySelectorAll('[data-hs-anim="appear"]').forEach((element) => {
       try {
         const tl = gsap.timeline({
           scrollTrigger: {
             trigger: element,
             start: config.appear.start,
-            invalidateOnRefresh: false,
+            invalidateOnRefresh: true,
+            toggleActions: "play none none none",
+            once: true,
           },
         });
 
@@ -404,7 +459,7 @@ const RevealAnimations = {
       return;
     }
 
-    const elements = document.querySelectorAll(".a-reveal");
+    const elements = document.querySelectorAll('[data-hs-anim="reveal"]');
     elements.forEach((element) => {
       try {
         gsap.set(element, {
@@ -424,13 +479,15 @@ const RevealAnimations = {
       return;
     }
 
-    document.querySelectorAll(".a-reveal").forEach((element) => {
+    document.querySelectorAll('[data-hs-anim="reveal"]').forEach((element) => {
       try {
         const tl = gsap.timeline({
           scrollTrigger: {
             trigger: element,
             start: config.reveal.start,
-            invalidateOnRefresh: false,
+            invalidateOnRefresh: true,
+            toggleActions: "play none none none",
+            once: true,
           },
         });
 
@@ -449,6 +506,64 @@ const RevealAnimations = {
   },
 };
 
+const GroupAnimations = {
+  async initial() {
+    await waitForFonts();
+
+    if (prefersReducedMotion()) {
+      return;
+    }
+
+    const elements = document.querySelectorAll('[data-hs-anim="group"]');
+    elements.forEach((element) => {
+      try {
+        const children = Array.from(element.children);
+        gsap.set(children, {
+          y: config.appear.y,
+          opacity: 0,
+        });
+      } catch (error) {
+        console.warn("Error setting group initial state:", error);
+      }
+    });
+  },
+
+  async animate() {
+    await waitForFonts();
+
+    if (prefersReducedMotion()) {
+      return;
+    }
+
+    document.querySelectorAll('[data-hs-anim="group"]').forEach((element) => {
+      try {
+        const children = Array.from(element.children);
+        const tl = gsap.timeline({
+          scrollTrigger: {
+            trigger: element,
+            start: config.appear.start,
+            invalidateOnRefresh: true,
+            toggleActions: "play none none none",
+            once: true,
+          },
+        });
+
+        tl.to(children, {
+          y: 0,
+          opacity: 1,
+          duration: config.appear.duration,
+          ease: config.appear.ease,
+          stagger: 0.1,
+        });
+
+        activeAnimations.push({ timeline: tl, element: element });
+      } catch (error) {
+        console.warn("Error animating group:", error);
+      }
+    });
+  },
+};
+
 async function setInitialStates() {
   await Promise.all([
     CharSplitAnimations.initial(),
@@ -456,6 +571,7 @@ async function setInitialStates() {
     LineSplitAnimations.initial(),
     AppearAnimations.initial(),
     RevealAnimations.initial(),
+    GroupAnimations.initial(),
   ]);
 }
 
@@ -472,6 +588,7 @@ async function initAnimations() {
     LineSplitAnimations.animate(),
     AppearAnimations.animate(),
     RevealAnimations.animate(),
+    GroupAnimations.animate(),
   ]);
 }
 
@@ -483,7 +600,7 @@ export async function init() {
   if (
     elements.length === 0 &&
     document.querySelectorAll(
-      ".a-char-split:not([data-initialized]), .a-word-split:not([data-initialized]), .a-line-split:not([data-initialized]), .a-appear:not([data-initialized]), .a-reveal:not([data-initialized])",
+      '[data-hs-anim="char"]:not([data-initialized]), [data-hs-anim="word"]:not([data-initialized]), [data-hs-anim="line"]:not([data-initialized]), [data-hs-anim="appear"]:not([data-initialized]), [data-hs-anim="reveal"]:not([data-initialized]), [data-hs-anim="group"]:not([data-initialized])',
     ).length === 0
   ) {
     return { result: "anim-text already initialized", destroy: () => {} };
@@ -493,7 +610,7 @@ export async function init() {
   elements.forEach((el) => el.setAttribute("data-initialized", "true"));
   document
     .querySelectorAll(
-      ".a-char-split, .a-word-split, .a-line-split, .a-appear, .a-reveal",
+      '[data-hs-anim="char"], [data-hs-anim="word"], [data-hs-anim="line"], [data-hs-anim="appear"], [data-hs-anim="reveal"], [data-hs-anim="group"]',
     )
     .forEach((el) => {
       el.setAttribute("data-initialized", "true");
@@ -525,6 +642,23 @@ export async function init() {
   };
   window.addEventListener("resize", resizeHandler);
 
+  // Add page load handler for proper ScrollTrigger refresh timing
+  const handlePageLoad = () => {
+    setTimeout(() => {
+      try {
+        ScrollTrigger.refresh();
+      } catch (error) {
+        console.warn("Error refreshing ScrollTrigger on page load:", error);
+      }
+    }, 100);
+  };
+
+  if (document.readyState === 'complete') {
+    handlePageLoad();
+  } else {
+    window.addEventListener('load', handlePageLoad);
+  }
+
   // Initialize API with proper checks
   if (!window[API_NAME]) {
     window[API_NAME] = {};

package/autoInit/accessibility.js

@@ -3,7 +3,190 @@ export function init() {
   // Stats accessibility has been moved to counter.js
 
   function setupGeneralAccessibility() {
-    // Add any general accessibility features here
+    setupListAccessibility();
+    setupFAQAccessibility();
+    setupConvertToSpan();
+    setupYearReplacement();
+    setupPreventDefault();
+  }
+
+  function setupListAccessibility() {
+    const listElements = document.querySelectorAll('[data-hs-a11y="list"]');
+    const listItemElements = document.querySelectorAll('[data-hs-a11y="list-item"]');
+    
+    listElements.forEach(element => {
+      element.setAttribute('role', 'list');
+      element.removeAttribute('data-hs-a11y');
+    });
+    
+    listItemElements.forEach(element => {
+      element.setAttribute('role', 'listitem');
+      element.removeAttribute('data-hs-a11y');
+    });
+  }
+
+  function setupFAQAccessibility() {
+    const faqContainers = document.querySelectorAll('[data-hs-a11y="faq"]');
+
+    faqContainers.forEach((container, index) => {
+      const button = container.querySelector('button');
+      const contentWrapper = button.parentElement.nextElementSibling;
+      
+      const buttonId = `faq-button-${index}`;
+      const contentId = `faq-content-${index}`;
+      
+      button.setAttribute('id', buttonId);
+      button.setAttribute('aria-expanded', 'false');
+      button.setAttribute('aria-controls', contentId);
+      
+      contentWrapper.setAttribute('id', contentId);
+      contentWrapper.setAttribute('aria-hidden', 'true');
+      contentWrapper.setAttribute('role', 'region');
+      contentWrapper.setAttribute('aria-labelledby', buttonId);
+      
+      if (contentWrapper.style.height !== '0px') {
+        button.setAttribute('aria-expanded', 'true');
+        contentWrapper.setAttribute('aria-hidden', 'false');
+      }
+      
+      function toggleFAQ() {
+        const isOpen = button.getAttribute('aria-expanded') === 'true';
+        
+        button.setAttribute('aria-expanded', !isOpen);
+        contentWrapper.setAttribute('aria-hidden', isOpen);
+      }
+      
+      button.addEventListener('click', toggleFAQ);
+      
+      container.removeAttribute('data-hs-a11y');
+    });
+  }
+
+  function setupConvertToSpan() {
+    const containers = document.querySelectorAll('[data-hs-a11y="convert-span"]');
+    
+    containers.forEach(container => {
+      const skipTags = [
+        'span', 'a', 'button', 'input', 'textarea', 'select', 'img', 'video', 'audio',
+        'iframe', 'object', 'embed', 'canvas', 'svg', 'form', 'table', 'thead', 'tbody',
+        'tr', 'td', 'th', 'ul', 'ol', 'li', 'dl', 'dt', 'dd', 'h1', 'h2', 'h3', 'h4',
+        'h5', 'h6', 'script', 'style', 'link', 'meta', 'title', 'head', 'html', 'body'
+      ];
+      
+      // Convert all child elements first
+      const elementsToConvert = container.querySelectorAll('*');
+      
+      elementsToConvert.forEach(element => {
+        const tagName = element.tagName.toLowerCase();
+        
+        if (!skipTags.includes(tagName)) {
+          const newSpan = document.createElement('span');
+          
+          // Copy all attributes except data-hs-a11y
+          Array.from(element.attributes).forEach(attr => {
+            if (attr.name !== 'data-hs-a11y') {
+              newSpan.setAttribute(attr.name, attr.value);
+            }
+          });
+          
+          // Move all child nodes
+          while (element.firstChild) {
+            newSpan.appendChild(element.firstChild);
+          }
+          
+          // Replace the element
+          element.parentNode.replaceChild(newSpan, element);
+        }
+      });
+      
+      // Convert the container itself to span
+      const containerTagName = container.tagName.toLowerCase();
+      if (!skipTags.includes(containerTagName)) {
+        const newSpan = document.createElement('span');
+        
+        // Copy all attributes except data-hs-a11y
+        Array.from(container.attributes).forEach(attr => {
+          if (attr.name !== 'data-hs-a11y') {
+            newSpan.setAttribute(attr.name, attr.value);
+          }
+        });
+        
+        // Move all child nodes
+        while (container.firstChild) {
+          newSpan.appendChild(container.firstChild);
+        }
+        
+        // Replace the container
+        container.parentNode.replaceChild(newSpan, container);
+      } else {
+        // Just remove the attribute if container shouldn't be converted
+        container.removeAttribute('data-hs-a11y');
+      }
+    });
+  }
+
+  function setupYearReplacement() {
+    const currentYear = new Date().getFullYear().toString();
+    const walker = document.createTreeWalker(
+      document.body,
+      NodeFilter.SHOW_TEXT,
+      {
+        acceptNode: (node) => {
+          return node.textContent.includes('{{year}}') 
+            ? NodeFilter.FILTER_ACCEPT 
+            : NodeFilter.FILTER_SKIP;
+        }
+      }
+    );
+
+    const textNodes = [];
+    let node;
+    while (node = walker.nextNode()) {
+      textNodes.push(node);
+    }
+
+    textNodes.forEach(textNode => {
+      const newText = textNode.textContent.replace(/\{\{year\}\}/gi, currentYear);
+      if (newText !== textNode.textContent) {
+        textNode.textContent = newText;
+      }
+    });
+  }
+
+  function setupPreventDefault() {
+    const elements = document.querySelectorAll('[data-hs-a11y="prevent-default"]');
+    
+    elements.forEach(element => {
+      // Prevent click
+      element.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        return false;
+      });
+      
+      // Prevent keyboard activation
+      element.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          e.stopPropagation();
+          return false;
+        }
+      });
+      
+      // Additional prevention for anchor links
+      if (element.tagName.toLowerCase() === 'a') {
+        // Remove or modify href to prevent scroll
+        const originalHref = element.getAttribute('href');
+        if (originalHref && (originalHref === '#' || originalHref.startsWith('#'))) {
+          element.setAttribute('data-original-href', originalHref);
+          element.removeAttribute('href');
+          element.setAttribute('role', 'button');
+          element.setAttribute('tabindex', '0');
+        }
+      }
+      
+      element.removeAttribute('data-hs-a11y');
+    });
   }
 
   setupGeneralAccessibility();

package/autoInit/custom-values.js

@@ -2,76 +2,62 @@ export function init() {
   const customValues = new Map();
   let isInitialized = false;
   
-  // Configuration for performance optimization
   const config = {
-    // Attributes to search for placeholders
     searchAttributes: [
       'href', 'src', 'alt', 'title', 'aria-label', 'data-src', 
       'data-href', 'action', 'placeholder', 'value'
     ],
-    // Elements to exclude from search for performance
     excludeSelectors: [
       'script', 'style', 'meta', 'link', 'title', 'head',
       '[data-hs-custom="list"]', '[data-hs-custom="name"]', '[data-hs-custom="value"]'
     ],
-    // Phone number formatting options
     phoneFormatting: {
-      // Attributes that should use tel: format
       telAttributes: ['href'],
-      // Pattern to detect phone numbers (matches various formats)
       phonePattern: /^[\+]?[1-9]?[\d\s\-\(\)\.]{7,15}$/,
-      // Default country code (US/Canada)
       defaultCountryCode: '+1',
-      // Clean phone for tel: links (remove all non-digits except +)
       cleanForTel: (phone) => {
         const cleaned = phone.replace(/[^\d+]/g, '');
-        // If no country code, add default
         if (!cleaned.startsWith('+')) {
           return config.phoneFormatting.defaultCountryCode + cleaned;
         }
         return cleaned;
       },
-      // Format for display (keep original formatting)
       formatForDisplay: (phone) => phone
     }
   };
 
-  // Detect if a value looks like a phone number
   function isPhoneNumber(value) {
     return config.phoneFormatting.phonePattern.test(value.trim());
   }
 
-  // Format value based on context (attribute vs text content)
   function formatValueForContext(value, isAttribute, attributeName) {
     if (isPhoneNumber(value)) {
-      // For href attributes, clean the phone number (no tel: prefix)
       if (isAttribute && config.phoneFormatting.telAttributes.includes(attributeName)) {
         return config.phoneFormatting.cleanForTel(value);
       } else {
-        // For display, keep original formatting
         return config.phoneFormatting.formatForDisplay(value);
       }
     }
     return value;
   }
 
-  // Extract custom values from data attributes
   function extractCustomValues() {
+    const currentYear = new Date().getFullYear().toString();
+    customValues.set('{{year}}', currentYear);
+    
     const customList = document.querySelector('[data-hs-custom="list"]');
     if (!customList) {
-      return false;
+      return customValues.size > 0;
     }
 
     const nameElements = customList.querySelectorAll('[data-hs-custom="name"]');
     const valueElements = customList.querySelectorAll('[data-hs-custom="value"]');
 
-    // Build mapping from name/value pairs
     for (let i = 0; i < Math.min(nameElements.length, valueElements.length); i++) {
       const name = nameElements[i].textContent.trim();
       const value = valueElements[i].textContent.trim();
       
       if (name && value) {
-        // Store with lowercase key for case-insensitive matching
         const key = `{{${name.toLowerCase()}}}`;
         customValues.set(key, value);
       }
@@ -80,18 +66,15 @@ export function init() {
     return customValues.size > 0;
   }
 
-  // Replace placeholders in text content
   function replaceInText(text, isAttribute = false, attributeName = null) {
     if (!text || typeof text !== 'string') return text;
     
     let result = text;
     
     customValues.forEach((value, placeholder) => {
-      // Create case-insensitive regex for exact placeholder match
       const regex = new RegExp(placeholder.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi');
       const matches = text.match(regex);
       if (matches) {
-        // Format value based on context (phone numbers get special treatment)
         const formattedValue = formatValueForContext(value, isAttribute, attributeName);
         result = result.replace(regex, formattedValue);
       }
@@ -100,7 +83,6 @@ export function init() {
     return result;
   }
 
-  // Replace placeholders in all attributes of an element
   function replaceInAttributes(element) {
     config.searchAttributes.forEach(attr => {
       const value = element.getAttribute(attr);
@@ -113,26 +95,22 @@ export function init() {
     });
   }
 
-  // Check if element should be excluded from processing
   function shouldExcludeElement(element) {
     return config.excludeSelectors.some(selector => {
       return element.matches(selector);
     });
   }
 
-  // Process text nodes for placeholder replacement
   function processTextNodes(element) {
     const walker = document.createTreeWalker(
       element,
       NodeFilter.SHOW_TEXT,
       {
         acceptNode: (node) => {
-          // Skip if parent element should be excluded
           if (shouldExcludeElement(node.parentElement)) {
             return NodeFilter.FILTER_REJECT;
           }
           
-          // Only process text nodes with placeholder patterns
           return node.textContent.includes('{{') && node.textContent.includes('}}') 
             ? NodeFilter.FILTER_ACCEPT 
             : NodeFilter.FILTER_SKIP;
@@ -146,7 +124,6 @@ export function init() {
       textNodes.push(node);
     }
 
-    // Replace placeholders in collected text nodes
     textNodes.forEach(textNode => {
       const originalText = textNode.textContent;
       const newText = replaceInText(originalText);
@@ -156,7 +133,6 @@ export function init() {
     });
   }
 
-  // Process all elements for attribute replacement
   function processElements(container) {
     const elements = container.querySelectorAll('*');
     
@@ -167,21 +143,14 @@ export function init() {
     });
   }
 
-  // Main replacement function
   function performReplacements() {
     if (customValues.size === 0) return;
 
-    // Process text content
     processTextNodes(document.body);
-    
-    // Process element attributes
     processElements(document.body);
-    
-    // Also check document root attributes
     replaceInAttributes(document.documentElement);
   }
 
-  // Remove the custom values list from DOM
   function cleanupCustomList() {
     const customList = document.querySelector('[data-hs-custom="list"]');
     if (customList) {
@@ -189,7 +158,6 @@ export function init() {
     }
   }
 
-  // Handle dynamic content with MutationObserver
   function setupDynamicContentHandler() {
     const observer = new MutationObserver((mutations) => {
       let hasNewContent = false;
@@ -198,7 +166,6 @@ export function init() {
         if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
           mutation.addedNodes.forEach((node) => {
             if (node.nodeType === Node.ELEMENT_NODE) {
-              // Check if new content contains placeholders
               const hasPlaceholders = node.textContent.includes('{{') && node.textContent.includes('}}');
               const hasAttributePlaceholders = config.searchAttributes.some(attr => {
                 const value = node.getAttribute?.(attr);
@@ -214,7 +181,6 @@ export function init() {
       });
       
       if (hasNewContent && customValues.size > 0) {
-        // Debounce replacements for performance
         clearTimeout(observer.timeout);
         observer.timeout = setTimeout(() => {
           performReplacements();
@@ -230,21 +196,14 @@ export function init() {
     return observer;
   }
 
-  // Initialize the custom values system
   function initializeCustomValues() {
     if (isInitialized) return;
     
-    // Extract custom values from data attributes
     const hasCustomValues = extractCustomValues();
     
     if (hasCustomValues) {
-      // Perform initial replacements
       performReplacements();
-      
-      // Clean up the custom list
       cleanupCustomList();
-      
-      // Set up dynamic content handling
       setupDynamicContentHandler();
       
       isInitialized = true;
@@ -261,6 +220,5 @@ export function init() {
     }
   }
 
-  // Initialize on page load
   return initializeCustomValues();
 }

package/autoInit/form.js

@@ -27,6 +27,302 @@ export function init() {
   let originalErrorTemplate = null;
   let isValidating = false;
 
+  // Simple Custom Select Component for Webflow
+  (function() {
+    'use strict';
+
+    // Initialize all custom selects on the page
+    function initCustomSelects() {
+      // Unwrap any divs inside select elements (Webflow component slots)
+      document.querySelectorAll('select > div').forEach(div => {
+        const select = div.parentElement;
+        while (div.firstChild) {
+          select.appendChild(div.firstChild);
+        }
+        div.remove();
+      });
+
+      const selectWrappers = document.querySelectorAll('[data-hs-form="select"]');
+      
+      selectWrappers.forEach(wrapper => {
+        initSingleSelect(wrapper);
+      });
+    }
+
+    // Initialize a single custom select
+    function initSingleSelect(wrapper) {
+      // Find all required elements
+      const realSelect = wrapper.querySelector('select');
+      if (!realSelect) return;
+      
+      const selectName = realSelect.getAttribute('name') || 'custom-select';
+      const customList = wrapper.querySelector('[data-hs-form="select-list"]');
+      const button = wrapper.querySelector('button') || wrapper.querySelector('[role="button"]');
+      
+      if (!customList || !button) return;
+      
+      // Get and clone the option template
+      const optionTemplate = customList.firstElementChild;
+      if (!optionTemplate) return;
+      
+      const templateClone = optionTemplate.cloneNode(true);
+      optionTemplate.remove();
+      
+      // Build options from real select
+      const realOptions = realSelect.querySelectorAll('option');
+      realOptions.forEach((option, index) => {
+        const optionElement = templateClone.cloneNode(true);
+        const textSpan = optionElement.querySelector('span');
+        
+        if (textSpan) {
+          textSpan.textContent = option.textContent;
+        }
+        
+        // Add attributes
+        optionElement.setAttribute('data-value', option.value);
+        optionElement.setAttribute('role', 'option');
+        optionElement.setAttribute('id', `${selectName}-option-${index}`);
+        optionElement.setAttribute('tabindex', '-1');
+        
+        // Set selected state if this option is selected
+        if (option.selected) {
+          optionElement.setAttribute('aria-selected', 'true');
+          // Update button text
+          const buttonText = button.querySelector('span') || button;
+          if (buttonText.tagName === 'SPAN') {
+            buttonText.textContent = option.textContent;
+          }
+        } else {
+          optionElement.setAttribute('aria-selected', 'false');
+        }
+        
+        customList.appendChild(optionElement);
+      });
+      
+      // Add ARIA attributes
+      customList.setAttribute('role', 'listbox');
+      customList.setAttribute('id', `${selectName}-listbox`);
+      
+      button.setAttribute('role', 'combobox');
+      button.setAttribute('aria-haspopup', 'listbox');
+      button.setAttribute('aria-controls', `${selectName}-listbox`);
+      button.setAttribute('aria-expanded', 'false');
+      button.setAttribute('id', `${selectName}-button`);
+      
+      // Find and connect label if exists
+      const label = wrapper.querySelector('label') || 
+                   document.querySelector(`label[for="${realSelect.id}"]`);
+      if (label) {
+        const labelId = label.id || `${selectName}-label`;
+        label.id = labelId;
+        // Ensure real select has proper ID for label connection
+        if (!realSelect.id) {
+          realSelect.id = `${selectName}-select`;
+        }
+        label.setAttribute('for', realSelect.id);
+        button.setAttribute('aria-labelledby', labelId);
+      }
+      
+      // Track state
+      let currentIndex = -1;
+      let isOpen = false;
+      
+      // Update expanded state
+      function updateExpandedState(expanded) {
+        isOpen = expanded;
+        button.setAttribute('aria-expanded', expanded.toString());
+      }
+      
+      // Focus option by index
+      function focusOption(index) {
+        const options = customList.querySelectorAll('[role="option"]');
+        if (index < 0 || index >= options.length) return;
+        
+        // Remove previous focus
+        options.forEach(opt => {
+          opt.classList.remove('focused');
+          opt.setAttribute('tabindex', '-1');
+        });
+        
+        // Add new focus
+        currentIndex = index;
+        options[index].classList.add('focused');
+        options[index].setAttribute('tabindex', '0');
+        options[index].focus();
+        button.setAttribute('aria-activedescendant', options[index].id);
+      }
+      
+      // Select option
+      function selectOption(optionElement) {
+        const value = optionElement.getAttribute('data-value');
+        const text = optionElement.querySelector('span')?.textContent || optionElement.textContent;
+        
+        // Update real select
+        realSelect.value = value;
+        realSelect.dispatchEvent(new Event('change', { bubbles: true }));
+        
+        // Update button text
+        const buttonText = button.querySelector('span') || button;
+        if (buttonText.tagName === 'SPAN') {
+          buttonText.textContent = text;
+        }
+        
+        // Update aria-selected
+        customList.querySelectorAll('[role="option"]').forEach(opt => {
+          opt.setAttribute('aria-selected', 'false');
+        });
+        optionElement.setAttribute('aria-selected', 'true');
+        
+        // Click the button to close
+        button.click();
+      }
+      
+      // Button keyboard events
+      button.addEventListener('keydown', (e) => {
+        switch(e.key) {
+          case ' ':
+          case 'Enter':
+            e.preventDefault();
+            button.click();
+            break;
+            
+          case 'ArrowDown':
+            e.preventDefault();
+            if (!isOpen) {
+              button.click();
+            } else {
+              focusOption(0);
+            }
+            break;
+            
+          case 'ArrowUp':
+            e.preventDefault();
+            if (isOpen) {
+              const options = customList.querySelectorAll('[role="option"]');
+              focusOption(options.length - 1);
+            }
+            break;
+            
+          case 'Escape':
+            if (isOpen) {
+              e.preventDefault();
+              button.click();
+            }
+            break;
+        }
+      });
+      
+      // Option keyboard events (delegated)
+      customList.addEventListener('keydown', (e) => {
+        const option = e.target.closest('[role="option"]');
+        if (!option) return;
+        
+        const options = Array.from(customList.querySelectorAll('[role="option"]'));
+        const currentIdx = options.indexOf(option);
+        
+        switch(e.key) {
+          case 'ArrowDown':
+            e.preventDefault();
+            if (currentIdx < options.length - 1) {
+              focusOption(currentIdx + 1);
+            }
+            break;
+            
+          case 'ArrowUp':
+            e.preventDefault();
+            if (currentIdx === 0) {
+              button.click();
+              button.focus();
+            } else {
+              focusOption(currentIdx - 1);
+            }
+            break;
+            
+          case 'Enter':
+          case ' ':
+            e.preventDefault();
+            selectOption(option);
+            break;
+            
+          case 'Escape':
+            e.preventDefault();
+            button.click();
+            button.focus();
+            break;
+        }
+      });
+      
+      // Option click events
+      customList.addEventListener('click', (e) => {
+        const option = e.target.closest('[role="option"]');
+        if (option) {
+          selectOption(option);
+        }
+      });
+      
+      // Track open/close state
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.type === 'attributes') {
+            // Check if dropdown is visible
+            const isVisible = !customList.hidden && 
+                            customList.style.display !== 'none' &&
+                            !customList.classList.contains('hidden');
+            
+            updateExpandedState(isVisible);
+            
+            if (!isVisible) {
+              currentIndex = -1;
+              button.removeAttribute('aria-activedescendant');
+              // Return focus to button if it was in the list
+              if (document.activeElement?.closest('[data-hs-form="select-list"]') === customList) {
+                button.focus();
+              }
+            }
+          }
+        });
+      });
+      
+      // Observe the custom list for visibility changes
+      observer.observe(customList, {
+        attributes: true,
+        attributeFilter: ['hidden', 'style', 'class']
+      });
+      
+      // Sync with real select changes
+      realSelect.addEventListener('change', () => {
+        const selectedOption = realSelect.options[realSelect.selectedIndex];
+        if (selectedOption) {
+          const customOption = customList.querySelector(`[data-value="${selectedOption.value}"]`);
+          if (customOption) {
+            // Update button text
+            const text = customOption.querySelector('span')?.textContent || customOption.textContent;
+            const buttonText = button.querySelector('span') || button;
+            if (buttonText.tagName === 'SPAN') {
+              buttonText.textContent = text;
+            }
+            
+            // Update aria-selected
+            customList.querySelectorAll('[role="option"]').forEach(opt => {
+              opt.setAttribute('aria-selected', 'false');
+            });
+            customOption.setAttribute('aria-selected', 'true');
+          }
+        }
+      });
+    }
+    
+    // Initialize on DOM ready
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', initCustomSelects);
+    } else {
+      initCustomSelects();
+    }
+    
+    // Reinitialize for dynamic content
+    window.initCustomSelects = initCustomSelects;
+  })();
+
   const initializeForms = () => {
     const forms = document.querySelectorAll(config.selectors.form);
     forms.forEach(form => {

package/autoInit/navbar.js

@@ -363,6 +363,16 @@ function setupDynamicDropdowns() {
       }
     });
 
+    toggle.addEventListener("click", function(e) {
+      if (e.isTrusted) {
+        // This is a real user click - prevent it
+        e.preventDefault();
+        e.stopPropagation();
+        return false;
+      }
+      // Programmatic clicks (from hover/keyboard) proceed normally
+    });
+
     document.addEventListener("click", function (e) {
       if (!wrapper.contains(e.target) && isOpen) {
         closeDropdown();
@@ -726,7 +736,7 @@ function setupMobileMenuButton() {
 
   // Cleanup function for window.mobileMenuState
   if (typeof window !== "undefined") {
-    window.addEventListener("unload", () => {
+    window.addEventListener("pagehide", () => {
       if (window.mobileMenuState) {
         delete window.mobileMenuState;
       }

package/index.js

@@ -1,4 +1,4 @@
-// Version:1.4.0
+// Version:1.4.2
 
 const API_NAME = "hsmain";
 
@@ -31,7 +31,6 @@ const initializeHsMain = async () => {
     navbar: true,
     accessibility: true,
     counter: true,
-    "custom-values": true,
     form: true,
   };
 
@@ -55,7 +54,6 @@ const initializeHsMain = async () => {
     navbar: () => import("./autoInit/navbar.js"),
     accessibility: () => import("./autoInit/accessibility.js"),
     counter: () => import("./autoInit/counter.js"),
-    "custom-values": () => import("./autoInit/custom-values.js"),
     form: () => import("./autoInit/form.js"),
   };
 

package/package.json

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