@hortonstudio/main 1.8.1 → 1.8.2

package/autoInit/accessibility.js

@@ -672,34 +672,61 @@ export function init() {
       // Set up IntersectionObserver for active state (Webflow-style)
       const sections = Array.from(h2Headings).map(heading => heading.parentElement);
       const tocLinks = tocList.querySelectorAll('a');
+      let currentActive = null;
 
-      const observerOptions = {
-        rootMargin: '0px 0px -75% 0px', // Trigger when section is 25% from bottom
-        threshold: 0
-      };
+      const updateActiveLink = () => {
+        const windowHeight = window.innerHeight;
+        const trigger = windowHeight * 0.75; // 25% from bottom
 
-      const observer = new IntersectionObserver((entries) => {
-        entries.forEach(entry => {
-          if (entry.isIntersecting) {
-            const sectionId = entry.target.id;
+        let newActive = null;
 
-            // Remove is-active from all links
-            tocLinks.forEach(link => link.classList.remove('is-active'));
+        // Find the last section whose top is above the trigger point
+        for (let i = sections.length - 1; i >= 0; i--) {
+          const rect = sections[i].getBoundingClientRect();
+          if (rect.top <= trigger) {
+            newActive = sections[i].id;
+            break;
+          }
+        }
 
-            // Add is-active to the corresponding link
+        // Only update if active section changed
+        if (newActive !== currentActive) {
+          currentActive = newActive;
+
+          // Remove all is-active
+          tocLinks.forEach(link => link.classList.remove('is-active'));
+
+          // Add to current
+          if (currentActive) {
             const activeLink = Array.from(tocLinks).find(link =>
-              link.getAttribute('href') === `#${sectionId}`
+              link.getAttribute('href') === `#${currentActive}`
             );
             if (activeLink) {
               activeLink.classList.add('is-active');
             }
           }
-        });
+        }
+      };
+
+      const observerOptions = {
+        rootMargin: '0px 0px -75% 0px',
+        threshold: 0
+      };
+
+      const observer = new IntersectionObserver(() => {
+        updateActiveLink();
       }, observerOptions);
 
       // Observe all sections
       sections.forEach(section => observer.observe(section));
 
+      // Also update on scroll for smoother tracking
+      let scrollTimeout;
+      window.addEventListener('scroll', () => {
+        if (scrollTimeout) clearTimeout(scrollTimeout);
+        scrollTimeout = setTimeout(updateActiveLink, 50);
+      });
+
     });
   }
 

package/package.json

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