@hortonstudio/main 1.9.10 → 1.9.20

package/autoInit/form/README.md

@@ -1,338 +0,0 @@
-# **Form System Documentation**
-
-## **Overview**
-
-The form system provides two main features:
-1. **Honeypot spam prevention** - Blocks bot submissions using a hidden field
-2. **Custom select component** - Fully accessible, styled select dropdowns that sync with native `<select>` elements for form submission
-
----
-
-## **Honeypot Spam Prevention**
-
-### **Required Element**
-
-**Honeypot Field** *(hidden field in your form)*
-
-* data-hs-form="form-handler"
-* Should be hidden with CSS (bots will auto-fill it, humans won't see it)
-
-### **What It Does**
-
-1. **Listens for form submissions** - Captures all form submit events
-2. **Checks honeypot field** - If the hidden field has a value, it's likely a bot
-3. **Blocks submission** - Prevents form from submitting if honeypot is filled
-
-### **Example**
-
-```html
-<form>
-  <input type="text" name="name" placeholder="Your Name">
-  <input type="email" name="email" placeholder="Your Email">
-
-  <!-- Honeypot field (hidden with CSS) -->
-  <input type="text" name="website" data-hs-form="form-handler" style="display: none;">
-
-  <button type="submit">Submit</button>
-</form>
-```
-
-**Result:** Legitimate users never see the honeypot field. Bots auto-fill all fields, triggering the spam prevention.
-
----
-
-## **Custom Select Component**
-
-### **Required Elements**
-
-**Select Wrapper** *(main container)*
-
-* data-hs-form="select"
-
-**Native Select** *(hidden select element for form submission)*
-
-* Standard `<select>` element with `<option>` children
-* Should have `name` attribute for form submission
-* Will be hidden but remains functional
-
-**Toggle Button** *(visual button to open/close dropdown)*
-
-* `<button>` element or element with `role="button"`
-* Should contain a `<span>` element for displaying selected text
-* Webflow IX must add/remove `.is-active` class on this button
-
-**Custom List** *(dropdown container)*
-
-* data-hs-form="select-list"
-* First child is used as template for generating options
-* Webflow IX must show/hide this when button is clicked
-
-**Template Element** *(first child of select-list)*
-
-* Should contain a `<span>` element for option text
-* Will be cloned for each `<option>` in the native select
-* Original template is removed after cloning
-
-**Label** *(optional but recommended)*
-
-* Standard `<label>` element
-* Can be inside wrapper or reference select by `for` attribute
-
-**Typical element layout:**
-
-1. Select Wrapper (data-hs-form="select")
-   1. Label (optional)
-      1. Text: "Choose an option"
-   2. Native Select (`<select>`)
-      1. Option 1 (`<option value="value1">`)
-         1. Text: "Option 1"
-      2. Option 2 (`<option value="value2">`)
-         1. Text: "Option 2"
-   3. Toggle Button (`<button>`)
-      1. Button Text (`<span>`)
-         1. Text: "Choose an option"
-   4. Custom List (data-hs-form="select-list")
-      1. Template Element
-         1. Text Span (`<span>`)
-            1. Text: "Placeholder"
-
-### **What It Does**
-
-1. **Unwraps Webflow slots** - Removes any `<div>` wrappers inside `<select>` elements
-2. **Clones template** - Uses first child of select-list as template
-3. **Generates options** - Creates custom option elements from native `<option>` elements
-4. **Syncs state** - Keeps custom UI and native select in sync
-5. **ARIA management** - Automatically updates accessibility attributes
-6. **Keyboard navigation** - Full arrow key, Tab, Enter, Space, Escape support
-7. **Focus management** - Handles focus return, tabbing out, and keyboard navigation
-
-### **When It Runs**
-
-* Runs once on page load (or DOMContentLoaded)
-* Available for manual re-initialization via `window.initCustomSelects()`
-* Runs again on Barba.js page transitions (via `reinitialize()`)
-
-### **Interaction Requirements (IX3)**
-
-**CRITICAL:** Webflow interactions MUST add/remove `.is-active` class on the toggle button.
-
-**Triggers:**
-
-1. **Click trigger** on `<button>` element
-   1. `Each click: Toggle play/reverse`
-
-**Timeline:**
-
-1. 0s: Toggle `.is-active` class on the button element
-2. .06s: Rest of animation (fade in, slide, etc.)
-
----
-
-## **Accessibility**
-
-### **Automatic ARIA Setup**
-
-For each select, the system automatically:
-
-1. **Button (combobox)**
-   - `role="combobox"`
-   - `aria-haspopup="listbox"`
-   - `aria-expanded="true|false"` (synced with `.is-active` class)
-   - `aria-controls="[listbox-id]"`
-   - `aria-labelledby="[label-id]"` (if label exists)
-   - `aria-activedescendant="[option-id]"` (when navigating with arrows)
-
-2. **Select List**
-   - `role="listbox"`
-   - `tabindex="-1"` (not directly tabbable)
-
-3. **Options**
-   - `role="option"`
-   - `aria-selected="true|false"`
-   - `tabindex="0"` when dropdown open, `tabindex="-1"` when closed
-   - Unique `id` for aria-activedescendant
-
-4. **Label**
-   - Connected to native select with `for` attribute
-   - Linked to button with `aria-labelledby`
-
-### **Focus Management**
-
-1. **Opening dropdown** - All options become tabbable
-2. **Closing dropdown** - Focus returns to button if inside list
-3. **Tabbing out** - Automatically closes dropdown
-4. **Arrow navigation** - Focuses options with visual `.focused` class
-
----
-
-## **Usage Examples**
-
-### **Basic Select**
-
-```html
-<div data-hs-form="select">
-  <label for="fruit-select">Choose a fruit</label>
-
-  <select name="fruit" id="fruit-select">
-    <option value="">Choose an option</option>
-    <option value="apple">Apple</option>
-    <option value="banana">Banana</option>
-    <option value="orange">Orange</option>
-  </select>
-
-  <button>
-    <span>Choose an option</span>
-  </button>
-
-  <div data-hs-form="select-list">
-    <div>
-      <span>Template</span>
-    </div>
-  </div>
-</div>
-```
-
-**Result:** Creates 4 custom options (including empty "Choose an option"). Native select stays synced for form submission.
-
-### **Pre-selected Option**
-
-```html
-<select name="size">
-  <option value="small">Small</option>
-  <option value="medium" selected>Medium</option>
-  <option value="large">Large</option>
-</select>
-```
-
-**Result:** Button text automatically shows "Medium" on page load. Corresponding custom option has `aria-selected="true"`.
-
-### **Options with Special Characters**
-
-```html
-<option value='product"deluxe"'>Deluxe Edition</option>
-<option value="user's choice">Custom Option</option>
-```
-
-**Result:** Works correctly - uses safe value comparison instead of selector injection.
-
----
-
-## **Keyboard Navigation**
-
-### **When Button is Focused**
-
-1. **Space** or **Enter** � Open/close dropdown
-2. **ArrowDown** � Open dropdown (or focus first option if already open)
-3. **ArrowUp** � Focus last option (if dropdown is open)
-4. **Escape** � Close dropdown (if open)
-
-### **When Option is Focused**
-
-1. **ArrowDown** � Focus next option
-2. **ArrowUp** � Focus previous option (or close and focus button if on first option)
-3. **Enter** or **Space** � Select option and close dropdown
-4. **Escape** � Close dropdown and return focus to button
-5. **Tab** � Navigate through options, tab out of last option closes dropdown
-
----
-
-## **State Synchronization**
-
-### **Native Select � Custom UI**
-
-When native select value changes (programmatically or via Webflow):
-1. Finds matching custom option by value
-2. Updates button text
-3. Updates `aria-selected` on all options
-
-### **Custom UI � Native Select**
-
-When user selects custom option:
-1. Updates native select's `value`
-2. Dispatches `change` event on native select
-3. Updates button text
-4. Updates `aria-selected`
-5. Closes dropdown
-
-**Both stay in sync at all times.**
-
----
-
-## **Key Attributes Summary**
-
-| Attribute | Purpose | Required On |
-| ----- | ----- | ----- |
-| `data-hs-form="select"` | Select wrapper | Wrapper div |
-| `data-hs-form="select-list"` | Custom options container | List div |
-| `data-hs-form="form-handler"` | Honeypot spam field | Hidden input (optional) |
-
----
-
-## **API**
-
-### **Manual Re-initialization**
-
-```javascript
-window.initCustomSelects();
-```
-
-Re-scans page for new selects and initializes them. Useful for dynamically added content.
-
----
-
-## **Notes**
-
-1. **Native select required** - Must have actual `<select>` element for form submission
-2. **Button must have span** - `<span>` child is required for text updates
-3. **Template is removed** - First child of select-list is cloned then deleted
-4. **Webflow IX required** - Must toggle `.is-active` class on button
-5. **Barba.js compatible** - Automatically cleans up on destroy/reinitialize
-6. **Silent failures** - Missing required elements cause function to return early (no errors)
-7. **Empty values supported** - Options with `value=""` work correctly
-8. **Special characters safe** - Handles quotes and special characters in option values
-
----
-
-## **Common Issues**
-
-**Dropdown not opening:**
-
-1. Verify Webflow IX adds `.is-active` class to button (not wrapper or list)
-2. Check that button exists and is `<button>` or has `role="button"`
-3. Ensure select-list exists with `data-hs-form="select-list"`
-
-**Button text not updating:**
-
-1. Verify button has a `<span>` child element
-2. Check that template element has a `<span>` child
-3. Ensure option values match between native and custom
-
-**Options not clickable:**
-
-1. Check that template element exists as first child of select-list
-2. Verify template has `<span>` for text
-3. Ensure options are being generated (inspect DOM)
-
-**Can't tab to options:**
-
-1. Verify dropdown is open (`.is-active` class on button)
-2. Check Webflow IX animation shows the select-list
-3. Ensure `display: none` is removed when open
-
-**Form not submitting selected value:**
-
-1. Native `<select>` must have `name` attribute
-2. Check that native select's value is updating (inspect DOM or use console)
-3. Verify native select is inside `<form>` element
-
-**Dropdown doesn't close when tabbing out:**
-
-1. Ensure wrapper element properly contains button and list
-2. Check that `data-hs-form="select"` is on wrapper
-3. Verify Webflow IX removes `.is-active` when clicking button again
-
-**Spam prevention not working:**
-
-1. Verify honeypot field has `data-hs-form="form-handler"`
-2. Ensure field is hidden with CSS (not removed from DOM)
-3. Check that field is inside the `<form>` element

package/autoInit/form/form.js

@@ -1,374 +0,0 @@
-export function init() {
-  // Centralized cleanup tracking
-  const cleanup = {
-    observers: [],
-    handlers: [],
-    honeypotHandler: null
-  };
-
-  const addObserver = (observer) => cleanup.observers.push(observer);
-  const addHandler = (element, event, handler, options) => {
-    element.addEventListener(event, handler, options);
-    cleanup.handlers.push({ element, event, handler, options });
-  };
-
-  // Honeypot spam prevention
-  const honeypotHandler = (e) => {
-    const form = e.target;
-    if (form.tagName !== 'FORM') return;
-
-    const honeypot = form.querySelector('[data-hs-form="form-handler"]');
-    if (honeypot && honeypot.value) {
-      // Honeypot filled - likely a bot
-      e.preventDefault();
-      e.stopPropagation();
-      e.stopImmediatePropagation();
-      return false;
-    }
-  };
-
-  cleanup.honeypotHandler = honeypotHandler;
-  document.addEventListener('submit', honeypotHandler, true);
-
-  // 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, addHandler, addObserver);
-      });
-    }
-
-    // Initialize a single custom select
-    function initSingleSelect(wrapper, addHandler, addObserver) {
-      // 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`);
-      customList.setAttribute('tabindex', '-1');
-
-      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 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
-        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');
-
-        // Close dropdown by clicking button
-        button.click();
-      }
-
-      // Button keyboard events
-      const buttonKeydownHandler = (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;
-        }
-      };
-      addHandler(button, 'keydown', buttonKeydownHandler);
-
-      // Option keyboard events (delegated)
-      const listKeydownHandler = (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;
-        }
-      };
-      addHandler(customList, 'keydown', listKeydownHandler);
-
-      // Option click events
-      const listClickHandler = (e) => {
-        const option = e.target.closest('[role="option"]');
-        if (option) {
-          selectOption(option);
-        }
-      };
-      addHandler(customList, 'click', listClickHandler);
-
-      // Handle tabbing out of select list
-      const listFocusoutHandler = (e) => {
-        // Check if focus is moving outside the wrapper (or to browser chrome)
-        if ((!e.relatedTarget || !wrapper.contains(e.relatedTarget)) && button.classList.contains('is-active')) {
-          button.click(); // Close the dropdown
-        }
-      };
-      addHandler(customList, 'focusout', listFocusoutHandler);
-
-      // Track open/close state via .is-active class on button
-      const observer = new MutationObserver(() => {
-        const isActive = button.classList.contains('is-active');
-
-        updateExpandedState(isActive);
-
-        if (isActive) {
-          // Make all options tabbable when opened
-          const options = customList.querySelectorAll('[role="option"]');
-          options.forEach(opt => {
-            opt.setAttribute('tabindex', '0');
-          });
-        } else {
-          // Return focus to button BEFORE aria changes if it was in the list
-          if (document.activeElement?.closest('[data-hs-form="select-list"]') === customList) {
-            button.focus();
-          }
-
-          // Reset on close
-          button.removeAttribute('aria-activedescendant');
-          const options = customList.querySelectorAll('[role="option"]');
-          options.forEach(opt => {
-            opt.setAttribute('tabindex', '-1');
-          });
-        }
-      });
-
-      // Observe the button for .is-active class changes
-      observer.observe(button, {
-        attributes: true,
-        attributeFilter: ['class']
-      });
-      addObserver(observer);
-
-      // Sync with real select changes
-      const selectChangeHandler = () => {
-        const selectedOption = realSelect.options[realSelect.selectedIndex];
-        if (selectedOption) {
-          const options = customList.querySelectorAll('[role="option"]');
-          const customOption = Array.from(options).find(opt =>
-            opt.getAttribute('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
-            options.forEach(opt => {
-              opt.setAttribute('aria-selected', 'false');
-            });
-            customOption.setAttribute('aria-selected', 'true');
-          }
-        }
-      };
-      addHandler(realSelect, 'change', selectChangeHandler);
-    }
-
-    // Initialize on DOM ready
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', initCustomSelects);
-    } else {
-      initCustomSelects();
-    }
-
-    // Reinitialize for dynamic content
-    window.initCustomSelects = initCustomSelects;
-  })();
-
-  return {
-    result: "form initialized",
-    destroy: () => {
-      // Remove honeypot handler
-      if (cleanup.honeypotHandler) {
-        document.removeEventListener('submit', cleanup.honeypotHandler, true);
-        cleanup.honeypotHandler = null;
-      }
-
-      // Disconnect all observers
-      cleanup.observers.forEach(obs => obs.disconnect());
-      cleanup.observers.length = 0;
-
-      // Remove all event listeners
-      cleanup.handlers.forEach(({ element, event, handler, options }) => {
-        element.removeEventListener(event, handler, options);
-      });
-      cleanup.handlers.length = 0;
-
-      // Remove window API
-      if (window.initCustomSelects) {
-        delete window.initCustomSelects;
-      }
-    }
-  };
-}