@hortonstudio/main 1.4.1 → 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,22 +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: 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');
               }
             },
           });
@@ -211,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,
@@ -241,22 +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: 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');
               }
             },
           });
@@ -284,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,
@@ -314,22 +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: 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');
               }
             },
           });
@@ -357,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, {
@@ -377,7 +424,7 @@ const AppearAnimations = {
       return;
     }
 
-    document.querySelectorAll(".a-appear").forEach((element) => {
+    document.querySelectorAll('[data-hs-anim="appear"]').forEach((element) => {
       try {
         const tl = gsap.timeline({
           scrollTrigger: {
@@ -412,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, {
@@ -432,7 +479,7 @@ const RevealAnimations = {
       return;
     }
 
-    document.querySelectorAll(".a-reveal").forEach((element) => {
+    document.querySelectorAll('[data-hs-anim="reveal"]').forEach((element) => {
       try {
         const tl = gsap.timeline({
           scrollTrigger: {
@@ -459,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(),
@@ -466,6 +571,7 @@ async function setInitialStates() {
     LineSplitAnimations.initial(),
     AppearAnimations.initial(),
     RevealAnimations.initial(),
+    GroupAnimations.initial(),
   ]);
 }
 
@@ -482,6 +588,7 @@ async function initAnimations() {
     LineSplitAnimations.animate(),
     AppearAnimations.animate(),
     RevealAnimations.animate(),
+    GroupAnimations.animate(),
   ]);
 }
 
@@ -493,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: () => {} };
@@ -503,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");

package/autoInit/custom-values.js

@@ -0,0 +1,224 @@
+export function init() {
+  const customValues = new Map();
+  let isInitialized = false;
+  
+  const config = {
+    searchAttributes: [
+      'href', 'src', 'alt', 'title', 'aria-label', 'data-src', 
+      'data-href', 'action', 'placeholder', 'value'
+    ],
+    excludeSelectors: [
+      'script', 'style', 'meta', 'link', 'title', 'head',
+      '[data-hs-custom="list"]', '[data-hs-custom="name"]', '[data-hs-custom="value"]'
+    ],
+    phoneFormatting: {
+      telAttributes: ['href'],
+      phonePattern: /^[\+]?[1-9]?[\d\s\-\(\)\.]{7,15}$/,
+      defaultCountryCode: '+1',
+      cleanForTel: (phone) => {
+        const cleaned = phone.replace(/[^\d+]/g, '');
+        if (!cleaned.startsWith('+')) {
+          return config.phoneFormatting.defaultCountryCode + cleaned;
+        }
+        return cleaned;
+      },
+      formatForDisplay: (phone) => phone
+    }
+  };
+
+  function isPhoneNumber(value) {
+    return config.phoneFormatting.phonePattern.test(value.trim());
+  }
+
+  function formatValueForContext(value, isAttribute, attributeName) {
+    if (isPhoneNumber(value)) {
+      if (isAttribute && config.phoneFormatting.telAttributes.includes(attributeName)) {
+        return config.phoneFormatting.cleanForTel(value);
+      } else {
+        return config.phoneFormatting.formatForDisplay(value);
+      }
+    }
+    return value;
+  }
+
+  function extractCustomValues() {
+    const currentYear = new Date().getFullYear().toString();
+    customValues.set('{{year}}', currentYear);
+    
+    const customList = document.querySelector('[data-hs-custom="list"]');
+    if (!customList) {
+      return customValues.size > 0;
+    }
+
+    const nameElements = customList.querySelectorAll('[data-hs-custom="name"]');
+    const valueElements = customList.querySelectorAll('[data-hs-custom="value"]');
+
+    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) {
+        const key = `{{${name.toLowerCase()}}}`;
+        customValues.set(key, value);
+      }
+    }
+
+    return customValues.size > 0;
+  }
+
+  function replaceInText(text, isAttribute = false, attributeName = null) {
+    if (!text || typeof text !== 'string') return text;
+    
+    let result = text;
+    
+    customValues.forEach((value, placeholder) => {
+      const regex = new RegExp(placeholder.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi');
+      const matches = text.match(regex);
+      if (matches) {
+        const formattedValue = formatValueForContext(value, isAttribute, attributeName);
+        result = result.replace(regex, formattedValue);
+      }
+    });
+    
+    return result;
+  }
+
+  function replaceInAttributes(element) {
+    config.searchAttributes.forEach(attr => {
+      const value = element.getAttribute(attr);
+      if (value) {
+        const newValue = replaceInText(value, true, attr);
+        if (newValue !== value) {
+          element.setAttribute(attr, newValue);
+        }
+      }
+    });
+  }
+
+  function shouldExcludeElement(element) {
+    return config.excludeSelectors.some(selector => {
+      return element.matches(selector);
+    });
+  }
+
+  function processTextNodes(element) {
+    const walker = document.createTreeWalker(
+      element,
+      NodeFilter.SHOW_TEXT,
+      {
+        acceptNode: (node) => {
+          if (shouldExcludeElement(node.parentElement)) {
+            return NodeFilter.FILTER_REJECT;
+          }
+          
+          return node.textContent.includes('{{') && node.textContent.includes('}}') 
+            ? NodeFilter.FILTER_ACCEPT 
+            : NodeFilter.FILTER_SKIP;
+        }
+      }
+    );
+
+    const textNodes = [];
+    let node;
+    while (node = walker.nextNode()) {
+      textNodes.push(node);
+    }
+
+    textNodes.forEach(textNode => {
+      const originalText = textNode.textContent;
+      const newText = replaceInText(originalText);
+      if (newText !== originalText) {
+        textNode.textContent = newText;
+      }
+    });
+  }
+
+  function processElements(container) {
+    const elements = container.querySelectorAll('*');
+    
+    elements.forEach(element => {
+      if (!shouldExcludeElement(element)) {
+        replaceInAttributes(element);
+      }
+    });
+  }
+
+  function performReplacements() {
+    if (customValues.size === 0) return;
+
+    processTextNodes(document.body);
+    processElements(document.body);
+    replaceInAttributes(document.documentElement);
+  }
+
+  function cleanupCustomList() {
+    const customList = document.querySelector('[data-hs-custom="list"]');
+    if (customList) {
+      customList.remove();
+    }
+  }
+
+  function setupDynamicContentHandler() {
+    const observer = new MutationObserver((mutations) => {
+      let hasNewContent = false;
+      
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
+          mutation.addedNodes.forEach((node) => {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+              const hasPlaceholders = node.textContent.includes('{{') && node.textContent.includes('}}');
+              const hasAttributePlaceholders = config.searchAttributes.some(attr => {
+                const value = node.getAttribute?.(attr);
+                return value && value.includes('{{') && value.includes('}}');
+              });
+              
+              if (hasPlaceholders || hasAttributePlaceholders) {
+                hasNewContent = true;
+              }
+            }
+          });
+        }
+      });
+      
+      if (hasNewContent && customValues.size > 0) {
+        clearTimeout(observer.timeout);
+        observer.timeout = setTimeout(() => {
+          performReplacements();
+        }, 100);
+      }
+    });
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+
+    return observer;
+  }
+
+  function initializeCustomValues() {
+    if (isInitialized) return;
+    
+    const hasCustomValues = extractCustomValues();
+    
+    if (hasCustomValues) {
+      performReplacements();
+      cleanupCustomList();
+      setupDynamicContentHandler();
+      
+      isInitialized = true;
+      
+      return {
+        result: `custom-values initialized with ${customValues.size} replacements`,
+        count: customValues.size
+      };
+    } else {
+      return {
+        result: 'custom-values initialized (no custom values found)',
+        count: 0
+      };
+    }
+  }
+
+  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/index.js

@@ -1,4 +1,4 @@
-// Version:1.4.1
+// Version:1.4.2
 
 const API_NAME = "hsmain";
 

package/package.json

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