@hortonstudio/main 1.9.6 → 1.9.8

package/autoInit/accessibility/README.md

@@ -0,0 +1,94 @@
+# **Accessibility System Documentation**
+
+## **Overview**
+
+The accessibility system provides 7 modular functions to enhance website accessibility and functionality. Each function operates independently and can be customized through data attributes.
+
+**Note:** This module auto-initializes and loads all functions on page load.
+
+---
+
+## **Functions**
+
+### **1. Blog Remover**
+Automatically removes blog wrapper elements that have no blog list content.
+
+**Use case:** Clean up empty blog sections when using Webflow CMS conditional visibility.
+
+---
+
+### **2. List Accessibility**
+Adds proper ARIA `role="list"` and `role="listitem"` to custom-styled lists.
+
+**Use case:** Making non-semantic list layouts accessible to screen readers.
+
+---
+
+### **3. Year Replacement**
+Replaces `{{year}}` and `{{month}}` placeholders with current year and month.
+
+**Use case:** Auto-updating copyright years and date-based content.
+
+---
+
+### **4. Click Forwarding**
+Forwards clicks from decorative wrapper elements to actual interactive trigger elements.
+
+**Use case:** Making entire card areas clickable while maintaining semantic structure.
+
+---
+
+### **5. Text Synchronization**
+Synchronizes text content and aria-labels from original element to multiple match elements in real-time.
+
+**Use case:** Keeping duplicate content in sync across multiple locations.
+
+---
+
+### **6. Table of Contents (TOC)**
+Automatically generates a table of contents from H2 headings with smooth scrolling, focus management, and active state tracking.
+
+**Use case:** Auto-generated TOC navigation for blog posts and documentation pages.
+
+---
+
+### **7. Dropdown**
+Universal dropdown system for FAQ, summary/read-more, and general toggle components. Syncs ARIA with Webflow interactions and optionally updates text content.
+
+**Use case:** All dropdown/accordion/toggle patterns with unified ARIA management and optional text swapping.
+
+**Note:** This function replaces the legacy `faq-accessibility` and `summary` functions with a single unified system.
+
+---
+
+## **Documentation**
+
+Each function has detailed documentation in its respective folder:
+
+- `functions/blog-remover/README.md`
+- `functions/list-accessibility/README.md`
+- `functions/year-replacement/README.md`
+- `functions/click-forwarding/README.md`
+- `functions/text-synchronization/README.md`
+- `functions/toc/README.md`
+- `functions/dropdown/README.md`
+
+---
+
+## **How It Works**
+
+The accessibility system uses a dynamic loader pattern:
+
+1. Main `accessibility.js` imports all function modules
+2. Each function is loaded in parallel via `Promise.all()`
+3. All destroy functions are collected for cleanup
+4. On destroy, all functions are cleaned up properly
+
+---
+
+## **Notes**
+
+- All functions auto-initialize on page load
+- Each function operates independently
+- Barba.js compatible with proper cleanup
+- No configuration required - works with data attributes

package/autoInit/accessibility/accessibility.js

@@ -0,0 +1,52 @@
+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")
+  };
+
+  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

@@ -0,0 +1,61 @@
+# **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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,60 @@
+# **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

@@ -0,0 +1,82 @@
+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

@@ -0,0 +1,212 @@
+# **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