@hortonstudio/main 1.9.7 → 1.9.8

package/autoInit/accessibility/README.md

@@ -2,7 +2,7 @@
 
 ## **Overview**
 
-The accessibility system provides 11 modular functions to enhance website accessibility and functionality. Each function operates independently and can be customized through data attributes.
+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.
 
@@ -24,63 +24,35 @@ Adds proper ARIA `role="list"` and `role="listitem"` to custom-styled lists.
 
 ---
 
-### **3. Remove List Accessibility**
-Removes list semantics by stripping ARIA roles and converting `<ul>/<ol>/<li>` to divs.
-
-**Use case:** Decorative list layouts that shouldn't be announced as lists.
-
----
-
-### **4. Convert to Span**
-Converts most HTML elements to span elements while preserving attributes and content.
-
-**Use case:** Removing semantic meaning from purely decorative wrapper elements.
-
----
-
-### **5. Year Replacement**
+### **3. Year Replacement**
 Replaces `{{year}}` and `{{month}}` placeholders with current year and month.
 
 **Use case:** Auto-updating copyright years and date-based content.
 
 ---
 
-### **6. Prevent Default**
-Prevents default behavior on elements including clicks and keyboard activation.
-
-**Use case:** Decorative buttons or preventing anchor link scrolling.
-
----
-
-### **7. Custom Values Replacement**
-Collects custom name-value pairs and replaces `{{name}}` placeholders throughout the page.
-
-**Use case:** Dynamic content replacement for user-defined values.
-
----
-
-### **8. Click Forwarding**
+### **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.
 
 ---
 
-### **9. Text Synchronization**
+### **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.
 
 ---
 
-### **10. Table of Contents (TOC)**
+### **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.
 
 ---
 
-### **11. Dropdown**
+### **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.
@@ -95,11 +67,7 @@ Each function has detailed documentation in its respective folder:
 
 - `functions/blog-remover/README.md`
 - `functions/list-accessibility/README.md`
-- `functions/remove-list-accessibility/README.md`
-- `functions/convert-to-span/README.md`
 - `functions/year-replacement/README.md`
-- `functions/prevent-default/README.md`
-- `functions/custom-values-replacement/README.md`
 - `functions/click-forwarding/README.md`
 - `functions/text-synchronization/README.md`
 - `functions/toc/README.md`

package/autoInit/accessibility/accessibility.js

@@ -8,11 +8,7 @@ export async function init() {
   const functionMap = {
     "blog-remover": () => import("./functions/blog-remover/blog-remover.js"),
     "list-accessibility": () => import("./functions/list-accessibility/list-accessibility.js"),
-    "remove-list-accessibility": () => import("./functions/remove-list-accessibility/remove-list-accessibility.js"),
-    "convert-to-span": () => import("./functions/convert-to-span/convert-to-span.js"),
     "year-replacement": () => import("./functions/year-replacement/year-replacement.js"),
-    "prevent-default": () => import("./functions/prevent-default/prevent-default.js"),
-    "custom-values-replacement": () => import("./functions/custom-values-replacement/custom-values-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"),

package/package.json

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

package/autoInit/accessibility/functions/convert-to-span/README.md

@@ -1,59 +0,0 @@
-# **Convert to Span**
-
-## **Overview**
-
-Converts most HTML elements to span elements while preserving attributes and content. Useful for removing semantic meaning from decorative elements.
-
----
-
-## **Required Elements**
-
-**Container**
-* data-hs-a11y="convert-span"
-
----
-
-## **What It Does**
-
-1. Finds all `[data-hs-a11y="convert-span"]` containers
-2. Converts all descendant elements to `<span>` (except skip list)
-3. Converts container itself to `<span>`
-4. Preserves all attributes except `data-hs-a11y`
-
-**Skip List:** `span`, `a`, `button`, `input`, `textarea`, `select`, `img`, `video`, `audio`, `iframe`, `object`, `embed`, `canvas`, `svg`, `form`, `table`, semantic tags, headings, `script`, `style`
-
----
-
-## **Usage Example**
-
-```html
-<!-- Before -->
-<div data-hs-a11y="convert-span">
-  <p>Text here</p>
-  <section>Content</section>
-</div>
-
-<!-- After -->
-<span>
-  <span>Text here</span>
-  <span>Content</span>
-</span>
-```
-
-**Result:** All elements become spans, removing semantic meaning.
-
----
-
-## **Key Attributes**
-
-| Attribute | Purpose |
-| ----- | ----- |
-| `data-hs-a11y="convert-span"` | Container to convert |
-
----
-
-## **Notes**
-
-* One-time DOM transformation
-* Skips interactive and media elements
-* Use for purely decorative wrappers

package/autoInit/accessibility/functions/convert-to-span/convert-to-span.js

@@ -1,70 +0,0 @@
-export function init() {
-  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);
-      }
-    });
-  }
-
-  setupConvertToSpan();
-
-  return {
-    result: "convert-to-span initialized",
-    destroy: () => {
-      // No cleanup needed - this is a one-time DOM operation
-    }
-  };
-}

package/autoInit/accessibility/functions/custom-values-replacement/README.md

@@ -1,71 +0,0 @@
-# **Custom Values Replacement**
-
-## **Overview**
-
-Collects custom name-value pairs from a list and replaces `{{name}}` placeholders throughout the page. Similar to site-settings but for user-defined values.
-
----
-
-## **Required Elements**
-
-**Custom Values List**
-* data-hs-a11y="custom-values-list"
-
-**Name Element** *(within list descendants)*
-* data-hs-a11y="custom-values-name"
-
-**Value Element** *(within list descendants)*
-* data-hs-a11y="custom-values-value"
-
----
-
-## **What It Does**
-
-1. Finds custom values list
-2. Collects name-value pairs from descendants
-3. Replaces `{{name}}` placeholders in all text nodes
-4. Replaces `{{name}}` placeholders in link hrefs
-
----
-
-## **Usage Example**
-
-```html
-<div data-hs-a11y="custom-values-list" style="display: none;">
-  <div>
-    <span data-hs-a11y="custom-values-name">support-email</span>
-    <span data-hs-a11y="custom-values-value">help@example.com</span>
-  </div>
-  <div>
-    <span data-hs-a11y="custom-values-name">phone</span>
-    <span data-hs-a11y="custom-values-value">555-1234</span>
-  </div>
-</div>
-
-<p>Contact us at {{support-email}} or call {{phone}}</p>
-<a href="mailto:{{support-email}}">Email Us</a>
-```
-
-**Result:**
-```html
-<p>Contact us at help@example.com or call 555-1234</p>
-<a href="mailto:help@example.com">Email Us</a>
-```
-
----
-
-## **Key Attributes**
-
-| Attribute | Purpose |
-| ----- | ----- |
-| `data-hs-a11y="custom-values-list"` | Container for values |
-| `data-hs-a11y="custom-values-name"` | Placeholder name |
-| `data-hs-a11y="custom-values-value"` | Replacement value |
-
----
-
-## **Notes**
-
-* One-time text replacement
-* List should be hidden with CSS
-* No cleanup needed

package/autoInit/accessibility/functions/custom-values-replacement/custom-values-replacement.js

@@ -1,102 +0,0 @@
-export function init() {
-  function setupCustomValuesReplacement() {
-    const customValuesList = document.querySelector('[data-hs-a11y="custom-values-list"]');
-
-    if (!customValuesList) {
-      return;
-    }
-
-    // Collect all custom values data
-    const customValues = {};
-    const descendants = customValuesList.getElementsByTagName('*');
-
-    Array.from(descendants).forEach(descendant => {
-      const nameElement = descendant.querySelector('[data-hs-a11y="custom-values-name"]');
-      const valueElement = descendant.querySelector('[data-hs-a11y="custom-values-value"]');
-
-      if (nameElement && valueElement) {
-        const name = nameElement.textContent.trim();
-        const value = valueElement.textContent.trim();
-
-        if (name && value) {
-          customValues[name] = value;
-        }
-      }
-    });
-
-    // If no custom values found, exit early
-    if (Object.keys(customValues).length === 0) {
-      return;
-    }
-
-    // Replace text content efficiently using TreeWalker
-    const walker = document.createTreeWalker(
-      document.body,
-      NodeFilter.SHOW_TEXT,
-      {
-        acceptNode: (node) => {
-          // Check if any custom value names exist in the text content
-          const text = node.textContent;
-          for (const name in customValues) {
-            if (text.includes(`{{${name}}}`)) {
-              return NodeFilter.FILTER_ACCEPT;
-            }
-          }
-          return NodeFilter.FILTER_SKIP;
-        }
-      }
-    );
-
-    const textNodes = [];
-    let node;
-    while (node = walker.nextNode()) {
-      textNodes.push(node);
-    }
-
-    // Replace text in collected nodes
-    textNodes.forEach(textNode => {
-      let newText = textNode.textContent;
-      let hasChanges = false;
-
-      for (const name in customValues) {
-        const placeholder = `{{${name}}}`;
-        if (newText.includes(placeholder)) {
-          newText = newText.replace(new RegExp(placeholder, 'g'), customValues[name]);
-          hasChanges = true;
-        }
-      }
-
-      if (hasChanges) {
-        textNode.textContent = newText;
-      }
-    });
-
-    // Replace link hrefs
-    const links = document.querySelectorAll('a[href]');
-    links.forEach(link => {
-      let href = link.getAttribute('href');
-      let hasChanges = false;
-
-      for (const name in customValues) {
-        const placeholder = `{{${name}}}`;
-        if (href.includes(placeholder)) {
-          href = href.replace(new RegExp(placeholder, 'g'), customValues[name]);
-          hasChanges = true;
-        }
-      }
-
-      if (hasChanges) {
-        link.setAttribute('href', href);
-      }
-    });
-  }
-
-  setupCustomValuesReplacement();
-
-  return {
-    result: "custom-values-replacement initialized",
-    destroy: () => {
-      // No cleanup needed - this is a one-time text replacement
-    }
-  };
-}

package/autoInit/accessibility/functions/prevent-default/README.md

@@ -1,58 +0,0 @@
-# **Prevent Default**
-
-## **Overview**
-
-Prevents default behavior on elements, including clicks and keyboard activation. Useful for decorative buttons or preventing anchor scrolling.
-
----
-
-## **Required Elements**
-
-**Element to Disable**
-* data-hs-a11y="prevent-default"
-
----
-
-## **What It Does**
-
-1. Finds all `[data-hs-a11y="prevent-default"]` elements
-2. Prevents click events
-3. Prevents Enter/Space keyboard activation
-4. For anchor links with `#` hrefs:
-   - Removes href attribute
-   - Sets `role="button"`
-   - Sets `tabindex="0"`
-
----
-
-## **Usage Example**
-
-```html
-<!-- Decorative button (no action) -->
-<button data-hs-a11y="prevent-default">
-  Disabled Action
-</button>
-
-<!-- Anchor link without scroll -->
-<a href="#" data-hs-a11y="prevent-default">
-  Click me (won't scroll)
-</a>
-```
-
-**Result:** Elements receive focus but perform no action when clicked or activated.
-
----
-
-## **Key Attributes**
-
-| Attribute | Purpose |
-| ----- | ----- |
-| `data-hs-a11y="prevent-default"` | Element to disable |
-
----
-
-## **Notes**
-
-* Event listeners cleaned up on destroy
-* Useful with Webflow IX for custom behaviors
-* Anchor links converted to role="button"

package/autoInit/accessibility/functions/prevent-default/prevent-default.js

@@ -1,58 +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 setupPreventDefault(addHandler) {
-    const elements = document.querySelectorAll('[data-hs-a11y="prevent-default"]');
-
-    elements.forEach(element => {
-      // Prevent click
-      const clickHandler = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        return false;
-      };
-      addHandler(element, 'click', clickHandler);
-
-      // Prevent keyboard activation
-      const keydownHandler = (e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          e.stopPropagation();
-          return false;
-        }
-      };
-      addHandler(element, 'keydown', keydownHandler);
-
-      // 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');
-        }
-      }
-    });
-  }
-
-  setupPreventDefault(addHandler);
-
-  return {
-    result: "prevent-default initialized",
-    destroy: () => {
-      cleanup.handlers.forEach(({ element, event, handler, options }) => {
-        element.removeEventListener(event, handler, options);
-      });
-      cleanup.handlers.length = 0;
-    }
-  };
-}

package/autoInit/accessibility/functions/remove-list-accessibility/README.md

@@ -1,57 +0,0 @@
-# **Remove List Accessibility**
-
-## **Overview**
-
-Removes list semantics from elements by stripping ARIA roles and converting semantic list tags to divs. Useful when you need list styling without list semantics.
-
----
-
-## **Required Elements**
-
-**Container**
-* data-hs-a11y="remove-list"
-
----
-
-## **What It Does**
-
-1. Finds all `[data-hs-a11y="remove-list"]` containers
-2. Removes `role="list"` and `role="listitem"` from container and descendants
-3. Converts all `<ul>`, `<ol>`, `<li>` tags to `<div>` elements
-4. Preserves all other attributes and content
-
----
-
-## **Usage Example**
-
-```html
-<!-- Before -->
-<ul data-hs-a11y="remove-list">
-  <li>Item 1</li>
-  <li>Item 2</li>
-</ul>
-
-<!-- After -->
-<div>
-  <div>Item 1</div>
-  <div>Item 2</div>
-</div>
-```
-
-**Result:** Visual list styling without list semantics for screen readers.
-
----
-
-## **Key Attributes**
-
-| Attribute | Purpose |
-| ----- | ----- |
-| `data-hs-a11y="remove-list"` | Container to de-semanticize |
-
----
-
-## **Notes**
-
-* One-time DOM transformation
-* Useful for decorative list layouts
-* Use sparingly - semantic lists are preferred for actual lists

package/autoInit/accessibility/functions/remove-list-accessibility/remove-list-accessibility.js

@@ -1,68 +0,0 @@
-export function init() {
-  function setupRemoveListAccessibility() {
-    const containers = document.querySelectorAll('[data-hs-a11y="remove-list"]');
-
-    containers.forEach(container => {
-      // Remove role="list" and role="listitem" from container and all descendants
-      const elementsWithListRoles = container.querySelectorAll('[role="list"], [role="listitem"]');
-      elementsWithListRoles.forEach(element => {
-        element.removeAttribute('role');
-      });
-
-      // Also remove from container itself if it has these roles
-      if (container.getAttribute('role') === 'list' || container.getAttribute('role') === 'listitem') {
-        container.removeAttribute('role');
-      }
-
-      // Convert semantic lists to divs in container and all descendants
-      const listsToConvert = container.querySelectorAll('ul, ol, li');
-      listsToConvert.forEach(listElement => {
-        const newDiv = document.createElement('div');
-
-        // Copy all attributes except role
-        Array.from(listElement.attributes).forEach(attr => {
-          if (attr.name !== 'role') {
-            newDiv.setAttribute(attr.name, attr.value);
-          }
-        });
-
-        // Move all child nodes
-        while (listElement.firstChild) {
-          newDiv.appendChild(listElement.firstChild);
-        }
-
-        // Replace the element
-        listElement.parentNode.replaceChild(newDiv, listElement);
-      });
-
-      // Convert container itself if it's a semantic list
-      if (container.tagName.toLowerCase() === 'ul' || container.tagName.toLowerCase() === 'ol' || container.tagName.toLowerCase() === 'li') {
-        const newDiv = document.createElement('div');
-
-        // Copy all attributes except data-hs-a11y and role
-        Array.from(container.attributes).forEach(attr => {
-          if (attr.name !== 'data-hs-a11y' && attr.name !== 'role') {
-            newDiv.setAttribute(attr.name, attr.value);
-          }
-        });
-
-        // Move all child nodes
-        while (container.firstChild) {
-          newDiv.appendChild(container.firstChild);
-        }
-
-        // Replace the container
-        container.parentNode.replaceChild(newDiv, container);
-      }
-    });
-  }
-
-  setupRemoveListAccessibility();
-
-  return {
-    result: "remove-list-accessibility initialized",
-    destroy: () => {
-      // No cleanup needed - this is a one-time DOM operation
-    }
-  };
-}