@hortonstudio/main 1.9.11 → 1.9.20

package/autoInit/accessibility/accessibility.js

@@ -1,53 +0,0 @@
-export async function init() {
-  // Centralized cleanup tracking
-  const cleanup = {
-    modules: {},
-    destroyFunctions: []
-  };
-
-  const functionMap = {
-    "blog-remover": () => import("./functions/blog-remover/blog-remover.js"),
-    "list-accessibility": () => import("./functions/list-accessibility/list-accessibility.js"),
-    "year-replacement": () => import("./functions/year-replacement/year-replacement.js"),
-    "click-forwarding": () => import("./functions/click-forwarding/click-forwarding.js"),
-    "text-synchronization": () => import("./functions/text-synchronization/text-synchronization.js"),
-    "toc": () => import("./functions/toc/toc.js"),
-    "dropdown": () => import("./functions/dropdown/dropdown.js"),
-    "pagination": () => import("./functions/pagination/pagination.js")
-  };
-
-  const loadFunction = async (functionName) => {
-    try {
-      const { init } = await functionMap[functionName]();
-      const result = await init();
-      cleanup.modules[functionName] = result;
-      if (result && result.destroy) {
-        cleanup.destroyFunctions.push(result.destroy);
-      }
-      return result;
-    } catch (error) {
-      console.error(`Failed to load accessibility function: ${functionName}`, error);
-      throw error;
-    }
-  };
-
-  // Load all functions
-  const functionPromises = Object.keys(functionMap).map(name => loadFunction(name));
-  await Promise.all(functionPromises);
-
-  return {
-    result: "accessibility initialized",
-    destroy: () => {
-      // Call all destroy functions
-      cleanup.destroyFunctions.forEach(destroyFn => {
-        try {
-          destroyFn();
-        } catch (error) {
-          console.error('Error during accessibility cleanup:', error);
-        }
-      });
-      cleanup.destroyFunctions.length = 0;
-      cleanup.modules = {};
-    }
-  };
-}

package/autoInit/accessibility/functions/blog-remover/README.md

@@ -1,61 +0,0 @@
-# **Blog Remover**
-
-## **Overview**
-
-Automatically removes blog wrapper elements that have no blog list content. Useful for cleaning up empty blog sections when using Webflow CMS conditional visibility.
-
----
-
-## **Required Elements**
-
-**Blog Wrapper**
-* data-site-blog="wrapper"
-* data-site-blog-config="delete-if-no-list" (triggers deletion check)
-
-**Blog List** *(descendant of wrapper)*
-* data-site-blog="list"
-
----
-
-## **What It Does**
-
-1. Finds all `[data-site-blog="wrapper"]` elements
-2. Checks if wrapper has `data-site-blog-config="delete-if-no-list"`
-3. If yes, checks for descendant with `[data-site-blog="list"]`
-4. If no list found, deletes the entire wrapper
-
----
-
-## **Usage Example**
-
-```html
-<!-- Will be deleted if no blog list inside -->
-<div data-site-blog="wrapper" data-site-blog-config="delete-if-no-list">
-  <h2>Recent Posts</h2>
-  <!-- If Webflow CMS hides the list, wrapper gets removed -->
-</div>
-
-<!-- Will remain (no delete config) -->
-<div data-site-blog="wrapper">
-  <h2>Recent Posts</h2>
-  <p>No posts yet.</p>
-</div>
-```
-
----
-
-## **Key Attributes**
-
-| Attribute | Purpose |
-| ----- | ----- |
-| `data-site-blog="wrapper"` | Blog container |
-| `data-site-blog-config="delete-if-no-list"` | Enable deletion if empty |
-| `data-site-blog="list"` | Blog list (prevents deletion) |
-
----
-
-## **Notes**
-
-* One-time operation on page load
-* No cleanup needed
-* Barba.js compatible

package/autoInit/accessibility/functions/blog-remover/blog-remover.js

@@ -1,31 +0,0 @@
-export function init() {
-  function setupBlogListCleanup() {
-    const wrappers = document.querySelectorAll('[data-site-blog="wrapper"]');
-
-    wrappers.forEach(wrapper => {
-      // Check if wrapper has the delete-if-no-list config
-      const shouldDelete = wrapper.getAttribute('data-site-blog-config') === 'delete-if-no-list';
-
-      if (!shouldDelete) {
-        return;
-      }
-
-      // Check if there's a descendant with data-site-blog="list"
-      const hasList = wrapper.querySelector('[data-site-blog="list"]') !== null;
-
-      // Delete wrapper if it doesn't have a list
-      if (!hasList) {
-        wrapper.remove();
-      }
-    });
-  }
-
-  setupBlogListCleanup();
-
-  return {
-    result: "blog-remover initialized",
-    destroy: () => {
-      // No cleanup needed - this is a one-time DOM operation
-    }
-  };
-}

package/autoInit/accessibility/functions/click-forwarding/README.md

@@ -1,60 +0,0 @@
-# **Click Forwarding**
-
-## **Overview**
-
-Forwards clicks from decorative/wrapper elements to actual interactive trigger elements. Useful for making entire card areas clickable while maintaining semantic button/link.
-
----
-
-## **Required Elements**
-
-**Clickable Element** *(wrapper users click)*
-* data-hs-a11y="click-trigger-[identifier], clickable"
-
-**Trigger Element** *(actual button/link)*
-* data-hs-a11y="click-trigger-[identifier], trigger"
-
-**Note:** `[identifier]` must match between clickable and trigger.
-
----
-
-## **What It Does**
-
-1. Finds all clickable elements
-2. Matches them to trigger elements by identifier
-3. Forwards click events from clickable → trigger
-4. Adds keyboard support (Enter/Space)
-5. Sets `tabindex="0"` and `role="button"` on clickable
-
----
-
-## **Usage Example**
-
-```html
-<div data-hs-a11y="click-trigger-card1, clickable">
-  <h3>Card Title</h3>
-  <p>Card description...</p>
-  <button data-hs-a11y="click-trigger-card1, trigger">
-    Learn More
-  </button>
-</div>
-```
-
-**Result:** Clicking anywhere in the div triggers the button.
-
----
-
-## **Key Attributes**
-
-| Attribute | Purpose |
-| ----- | ----- |
-| `data-hs-a11y="click-trigger-[id], clickable"` | Wrapper to make clickable |
-| `data-hs-a11y="click-trigger-[id], trigger"` | Actual button/link |
-
----
-
-## **Notes**
-
-* Identifier must match exactly
-* Event listeners cleaned up on destroy
-* Supports keyboard activation

package/autoInit/accessibility/functions/click-forwarding/click-forwarding.js

@@ -1,82 +0,0 @@
-export function init() {
-  const cleanup = {
-    handlers: []
-  };
-
-  const addHandler = (element, event, handler, options) => {
-    element.addEventListener(event, handler, options);
-    cleanup.handlers.push({ element, event, handler, options });
-  };
-
-  function setupClickForwarding(addHandler) {
-    // Find all clickable elements (custom styled elements users click)
-    const clickableElements = document.querySelectorAll('[data-hs-a11y*="clickable"]');
-
-    clickableElements.forEach(clickableElement => {
-      const attribute = clickableElement.getAttribute('data-hs-a11y');
-
-      // Parse the attribute: "click-trigger-[identifier], clickable"
-      const parts = attribute.split(',').map(part => part.trim());
-
-      // Find the part with click-trigger and the part with clickable
-      const triggerPart = parts.find(part => part.startsWith('click-trigger-'));
-      const rolePart = parts.find(part => part === 'clickable');
-
-      if (!triggerPart || !rolePart) {
-        return;
-      }
-
-      // Extract identifier from "click-trigger-[identifier]"
-      const identifier = triggerPart.replace('click-trigger-', '').trim();
-
-      // Find the corresponding trigger element
-      const triggerSelector = `[data-hs-a11y*="click-trigger-${identifier}"][data-hs-a11y*="trigger"]`;
-      const triggerElement = document.querySelector(triggerSelector);
-
-      if (!triggerElement) {
-        return;
-      }
-
-      // Add click event listener to forward clicks
-      const clickHandler = (event) => {
-        // Prevent default behavior on the clickable element
-        event.preventDefault();
-        event.stopPropagation();
-
-        // Trigger click on the target element
-        triggerElement.click();
-      };
-      addHandler(clickableElement, 'click', clickHandler);
-
-      // Also handle keyboard events for accessibility
-      const keydownHandler = (event) => {
-        if (event.key === 'Enter' || event.key === ' ') {
-          event.preventDefault();
-          event.stopPropagation();
-          triggerElement.click();
-        }
-      };
-      addHandler(clickableElement, 'keydown', keydownHandler);
-
-      // Ensure clickable element is keyboard accessible
-      if (!clickableElement.hasAttribute('tabindex')) {
-        clickableElement.setAttribute('tabindex', '0');
-      }
-      if (!clickableElement.hasAttribute('role')) {
-        clickableElement.setAttribute('role', 'button');
-      }
-    });
-  }
-
-  setupClickForwarding(addHandler);
-
-  return {
-    result: "click-forwarding initialized",
-    destroy: () => {
-      cleanup.handlers.forEach(({ element, event, handler, options }) => {
-        element.removeEventListener(event, handler, options);
-      });
-      cleanup.handlers.length = 0;
-    }
-  };
-}

package/autoInit/accessibility/functions/dropdown/README.md

@@ -1,212 +0,0 @@
-# **Dropdown Accessibility**
-
-## **Overview**
-
-Universal dropdown system for FAQ, summary/read-more, and general toggle components. Automatically syncs ARIA attributes with Webflow interactions and optionally updates text content.
-
-**This function handles all dropdown/accordion/toggle patterns with a single unified system.**
-
----
-
-## **Required Elements**
-
-**Dropdown Wrapper**
-* data-hs-dropdown="wrapper"
-* data-hs-dropdown-text-swap="Close" (text for open state, defaults to "Close")
-
-**Dropdown Toggle** *(gets is-active class from Webflow IX)*
-* data-hs-dropdown="toggle"
-* Contains clickable element
-
-**Clickable Element**
-* data-site-clickable="element"
-* First child receives ARIA attributes
-
-**Text Wrapper** *(optional - controls text update scope)*
-* data-hs-dropdown="text"
-* If present: all text inside swaps
-* If absent: only aria-label updates (visual text stays static)
-
-**Dropdown Content** *(expandable area)*
-* data-hs-dropdown="content"
-
----
-
-## **What It Does**
-
-1. **Monitors Toggle State**: MutationObserver watches for `is-active` class changes
-2. **Updates ARIA**: Sets `aria-expanded`, `aria-controls`, `aria-hidden`, `role="region"`
-3. **Text Updates**:
-   - **With text wrapper**: Swaps all text nodes + aria-label
-   - **Without text wrapper**: Only updates aria-label (visual stays static)
-4. **Focus Management**: Returns focus to toggle button when closing if focus is inside content
-5. **Supports Nesting**: Each dropdown manages its own state independently
-
----
-
-## **Usage Examples**
-
-### **FAQ (No Visual Text Change)**
-
-```html
-<div data-hs-dropdown="wrapper" data-hs-dropdown-text-swap="Close FAQ">
-  <div data-hs-dropdown="toggle">
-    <div data-site-clickable="element">
-      <button>
-        <span class="u-sr-only">Open FAQ</span>
-      </button>
-    </div>
-    <h3>What is this product?</h3>
-  </div>
-  <div data-hs-dropdown="content">
-    <p>This is a detailed answer...</p>
-  </div>
-</div>
-```
-
-**Result:**
-- Question text stays visible ✅
-- Only aria-label swaps: "Open FAQ" ↔ "Close FAQ"
-- Perfect for FAQ lists
-
----
-
-### **Summary (Full Text Swap)**
-
-```html
-<div data-hs-dropdown="wrapper" data-hs-dropdown-text-swap="Close">
-  <div data-hs-dropdown="toggle">
-    <p>View Quick Summary</p>
-    <div data-hs-dropdown="text">
-      <div data-site-clickable="element">
-        <button>View</button>
-      </div>
-    </div>
-  </div>
-  <div data-hs-dropdown="content">
-    <p>Full summary content...</p>
-  </div>
-</div>
-```
-
-**Result:**
-- All text in "text" wrapper swaps: "View" ↔ "Close"
-- aria-label also swaps to match
-- Perfect for read-more toggles
-
----
-
-### **Product Details (No Text Wrapper)**
-
-```html
-<div data-hs-dropdown="wrapper" data-hs-dropdown-text-swap="Hide Details">
-  <div data-hs-dropdown="toggle">
-    <div data-site-clickable="element">
-      <button>Show Details</button>
-    </div>
-  </div>
-  <div data-hs-dropdown="content">
-    <p>Product specifications...</p>
-  </div>
-</div>
-```
-
-**Result:**
-- Only aria-label swaps: "Show Details" ↔ "Hide Details"
-- Visual button text stays static
-
----
-
-### **Nested Dropdowns**
-
-```html
-<div data-hs-dropdown="wrapper" data-hs-dropdown-text-swap="Hide">
-  <div data-hs-dropdown="toggle">
-    <button>Product Details</button>
-  </div>
-  <div data-hs-dropdown="content">
-    <p>Product info...</p>
-
-    <!-- Nested FAQ -->
-    <div data-hs-dropdown="wrapper" data-hs-dropdown-text-swap="Close FAQ">
-      <div data-hs-dropdown="toggle">
-        <button>Shipping Questions</button>
-      </div>
-      <div data-hs-dropdown="content">
-        <p>Shipping details...</p>
-      </div>
-    </div>
-  </div>
-</div>
-```
-
-**Result:**
-- Each dropdown manages its own state
-- Focus returns to parent when parent closes
-- Fully accessible keyboard navigation
-
----
-
-## **Key Attributes**
-
-| Attribute | Purpose |
-| ----- | ----- |
-| `data-hs-dropdown="wrapper"` | Container for entire dropdown |
-| `data-hs-dropdown-text-swap` | Text for open state (default: "Close") |
-| `data-hs-dropdown="toggle"` | Gets is-active from Webflow IX |
-| `data-hs-dropdown="text"` | Optional text update scope |
-| `data-site-clickable="element"` | Contains actual button/link |
-| `data-hs-dropdown="content"` | Expandable content area |
-
----
-
-## **How It Works**
-
-1. **Initial Setup**: Scans for all `[data-hs-dropdown="wrapper"]` elements
-2. **ID Generation**: Creates unique IDs for ARIA relationships
-3. **Text Capture**: Saves original text from text wrapper or clickable
-4. **State Detection**: Checks for existing `is-active` class on toggle
-5. **Observer Setup**: MutationObserver watches toggle for class changes
-6. **State Sync**: When `is-active` changes, updates ARIA and text
-7. **Focus Management**: Returns focus to button when closing if needed
-
----
-
-## **Focus Management**
-
-When any dropdown closes:
-- If focus is anywhere inside content area
-- Focus automatically returns to toggle button
-- Then ARIA updates apply
-- Prevents keyboard users from losing focus
-
-Works for:
-- Buttons inside content ✅
-- Nested dropdowns ✅
-- Form fields inside content ✅
-
----
-
-## **Notes**
-
-* Pattern matches navbar structure
-* Works with Webflow IX for visual state (`is-active`)
-* Text wrapper is optional - use for visual text changes
-* Without text wrapper, only aria-label changes
-* Supports infinite nesting depth
-* Warns in console if multiple clickables found in toggle
-* All observers cleaned up on destroy for Barba.js compatibility
-
----
-
-## **Common Patterns**
-
-### **When to use text wrapper:**
-- Summary/Read More toggles
-- Buttons that should visually change
-- Any toggle where text swap is visible
-
-### **When NOT to use text wrapper:**
-- FAQ items (question should stay visible)
-- Toggles with static visible labels
-- Dropdowns where only accessible text should change

package/autoInit/accessibility/functions/dropdown/dropdown.js

@@ -1,167 +0,0 @@
-export function init() {
-  const cleanup = {
-    observers: []
-  };
-
-  const addObserver = (observer) => cleanup.observers.push(observer);
-
-  function setupDropdownAccessibility(addObserver) {
-    const dropdownWrappers = document.querySelectorAll('[data-hs-dropdown="wrapper"]');
-
-    dropdownWrappers.forEach((wrapper, index) => {
-      const toggle = wrapper.querySelector('[data-hs-dropdown="toggle"]');
-      const content = wrapper.querySelector('[data-hs-dropdown="content"]');
-      const textSwapValue = wrapper.getAttribute('data-hs-dropdown-text-swap') || 'Close';
-
-      if (!toggle || !content) {
-        return;
-      }
-
-      // Check for multiple clickables and warn
-      const clickables = toggle.querySelectorAll('[data-site-clickable="element"]');
-      if (clickables.length > 1) {
-        console.warn('[dropdown-accessibility] Multiple clickables found in toggle. Using first one only.', toggle);
-      }
-
-      const clickable = clickables[0];
-      if (!clickable) {
-        return;
-      }
-
-      const button = clickable.children[0];
-      if (!button) {
-        return;
-      }
-
-      // Generate unique IDs
-      const buttonId = `hs-dropdown-btn-${index}`;
-      const contentId = `hs-dropdown-content-${index}`;
-
-      // Check if text wrapper exists
-      const textWrapper = toggle.querySelector('[data-hs-dropdown="text"]');
-
-      // Capture original text
-      let originalText = '';
-      if (textWrapper) {
-        // Get text from text wrapper
-        const walker = document.createTreeWalker(
-          textWrapper,
-          NodeFilter.SHOW_TEXT,
-          null,
-          false
-        );
-
-        let firstTextNode = walker.nextNode();
-        while (firstTextNode && !firstTextNode.textContent.trim()) {
-          firstTextNode = walker.nextNode();
-        }
-
-        originalText = firstTextNode ? firstTextNode.textContent.trim() : textWrapper.textContent.trim();
-      } else {
-        // Get text from clickable for aria-label fallback
-        const walker = document.createTreeWalker(
-          clickable,
-          NodeFilter.SHOW_TEXT,
-          null,
-          false
-        );
-
-        let firstTextNode = walker.nextNode();
-        while (firstTextNode && !firstTextNode.textContent.trim()) {
-          firstTextNode = walker.nextNode();
-        }
-
-        originalText = firstTextNode ? firstTextNode.textContent.trim() : clickable.textContent.trim();
-      }
-
-      // Function to update text nodes
-      function updateText(newText) {
-        if (textWrapper) {
-          // Update all text nodes in text wrapper
-          const walker = document.createTreeWalker(
-            textWrapper,
-            NodeFilter.SHOW_TEXT,
-            null,
-            false
-          );
-
-          const textNodes = [];
-          let node;
-          while (node = walker.nextNode()) {
-            if (node.textContent.trim()) {
-              textNodes.push(node);
-            }
-          }
-
-          textNodes.forEach(textNode => {
-            textNode.textContent = newText;
-          });
-        }
-
-        // Always update aria-label
-        button.setAttribute('aria-label', newText);
-      }
-
-      // Set initial IDs and ARIA attributes
-      button.setAttribute('id', buttonId);
-      content.setAttribute('id', contentId);
-      content.setAttribute('role', 'region');
-      content.setAttribute('aria-labelledby', buttonId);
-
-      button.setAttribute('aria-controls', contentId);
-
-      // Function to check if dropdown is open
-      function isDropdownOpen() {
-        return toggle.classList.contains('is-active');
-      }
-
-      // Update ARIA states based on current visual state
-      function updateARIAStates() {
-        const isOpen = isDropdownOpen();
-        const wasOpen = button.getAttribute("aria-expanded") === "true";
-
-        // If closing and focus is inside content, return focus first
-        if (wasOpen && !isOpen && content.contains(document.activeElement)) {
-          button.focus();
-        }
-
-        // Update ARIA attributes
-        button.setAttribute("aria-expanded", isOpen ? "true" : "false");
-        content.setAttribute("aria-hidden", isOpen ? "false" : "true");
-
-        // Update text and aria-label
-        if (isOpen) {
-          updateText(textSwapValue);
-        } else {
-          updateText(originalText);
-        }
-      }
-
-      // Set initial state based on existing is-active class
-      updateARIAStates();
-
-      // Monitor for class changes on toggle
-      const observer = new MutationObserver(() => {
-        updateARIAStates();
-      });
-
-      observer.observe(toggle, {
-        attributes: true,
-        attributeFilter: ['class']
-      });
-
-      addObserver(observer);
-    });
-  }
-
-  setupDropdownAccessibility(addObserver);
-
-  return {
-    result: "dropdown initialized",
-    destroy: () => {
-      // Disconnect all observers
-      cleanup.observers.forEach(obs => obs.disconnect());
-      cleanup.observers.length = 0;
-    }
-  };
-}