@hortonstudio/main 1.8.0 → 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,73 +669,32 @@ export function init() {
         tocList.appendChild(tocItem);
       });
 
-      // Set up IntersectionObserver for active state
+      // Set up IntersectionObserver for active state (Webflow-style)
       const sections = Array.from(h2Headings).map(heading => heading.parentElement);
       const tocLinks = tocList.querySelectorAll('a');
-      let currentActiveId = null;
 
       const observerOptions = {
-        rootMargin: '-10% 0px -50% 0px',
-        threshold: [0, 0.25, 0.5, 0.75, 1]
+        rootMargin: '0px 0px -75% 0px', // Trigger when section is 25% from bottom
+        threshold: 0
       };
 
       const observer = new IntersectionObserver((entries) => {
-        // Collect all currently intersecting sections
-        const intersectingSections = [];
-
         entries.forEach(entry => {
-          const sectionId = entry.target.id;
-          const existingIndex = intersectingSections.findIndex(s => s.id === sectionId);
-
           if (entry.isIntersecting) {
-            if (existingIndex === -1) {
-              intersectingSections.push({
-                id: sectionId,
-                ratio: entry.intersectionRatio,
-                element: entry.target
-              });
-            } else {
-              intersectingSections[existingIndex].ratio = entry.intersectionRatio;
-            }
-          }
-        });
-
-        // Find all currently intersecting sections (not just from this batch)
-        const allIntersecting = sections
-          .filter(section => {
-            const rect = section.getBoundingClientRect();
-            const windowHeight = window.innerHeight;
-            // Check if section is in the active zone
-            return rect.top < windowHeight * 0.6 && rect.bottom > windowHeight * 0.1;
-          })
-          .map(section => ({
-            id: section.id,
-            top: section.getBoundingClientRect().top,
-            element: section
-          }));
-
-        if (allIntersecting.length === 0) return;
-
-        // Pick the topmost section in the active zone
-        const topmost = allIntersecting.reduce((prev, curr) =>
-          curr.top < prev.top ? curr : prev
-        );
+            const sectionId = entry.target.id;
 
-        // Only update if the active section changed
-        if (currentActiveId !== topmost.id) {
-          currentActiveId = topmost.id;
+            // Remove is-active from all links
+            tocLinks.forEach(link => link.classList.remove('is-active'));
 
-          // 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') === `#${topmost.id}`
-          );
-          if (activeLink) {
-            activeLink.classList.add('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

package/package.json

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