@hortonstudio/main 1.7.16 → 1.8.1

package/autoInit/accessibility.js

@@ -593,10 +593,18 @@ export function init() {
       }
 
 
-      const template = tocList.children[0];
+      const template = tocList.children[0].cloneNode(true);
+      // Remove is-active class from template if it exists
+      const templateLink = template.querySelector("a");
+      if (templateLink) {
+        templateLink.classList.remove('is-active');
+      }
+
+      // Clear all original TOC items
       tocList.innerHTML = "";
+
       const h2Headings = contentArea.querySelectorAll("h2");
-      
+
 
       // Create sections and wrap content
       h2Headings.forEach((heading) => {
@@ -604,7 +612,7 @@ export function init() {
           .toLowerCase()
           .replace(/[^a-z0-9]+/g, "-")
           .replace(/(^-|-$)/g, "");
-        
+
         const section = document.createElement("div");
         section.id = sectionId;
         heading.parentNode.insertBefore(section, heading);
@@ -661,6 +669,37 @@ export function init() {
         tocList.appendChild(tocItem);
       });
 
+      // Set up IntersectionObserver for active state (Webflow-style)
+      const sections = Array.from(h2Headings).map(heading => heading.parentElement);
+      const tocLinks = tocList.querySelectorAll('a');
+
+      const observerOptions = {
+        rootMargin: '0px 0px -75% 0px', // Trigger when section is 25% from bottom
+        threshold: 0
+      };
+
+      const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            const sectionId = entry.target.id;
+
+            // Remove is-active from all links
+            tocLinks.forEach(link => link.classList.remove('is-active'));
+
+            // Add is-active to the corresponding link
+            const activeLink = Array.from(tocLinks).find(link =>
+              link.getAttribute('href') === `#${sectionId}`
+            );
+            if (activeLink) {
+              activeLink.classList.add('is-active');
+            }
+          }
+        });
+      }, observerOptions);
+
+      // Observe all sections
+      sections.forEach(section => observer.observe(section));
+
     });
   }
 

package/index.js

@@ -9,6 +9,9 @@ const initializeHsMain = async () => {
     return;
   }
 
+  // Add hs-main class to HTML element immediately
+  document.documentElement.classList.add('hs-main');
+
   const queuedModules = Array.isArray(window[API_NAME]) ? window[API_NAME] : [];
 
   const animationModules = {};

package/package.json

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