@hortonstudio/main 1.5.1 → 1.6.0

package/autoInit/accessibility.js

@@ -1,6 +1,5 @@
 export function init() {
-  // General accessibility features can be added here
-  // Stats accessibility has been moved to counter.js
+  
 
   function setupGeneralAccessibility() {
     setupListAccessibility();
@@ -9,6 +8,8 @@ export function init() {
     setupConvertToSpan();
     setupYearReplacement();
     setupPreventDefault();
+    setupRichTextAccessibility();
+    setupSummaryAccessibility();
   }
 
   function setupListAccessibility() {
@@ -17,12 +18,10 @@ export function init() {
     
     listElements.forEach(element => {
       element.setAttribute('role', 'list');
-      element.removeAttribute('data-hs-a11y');
     });
     
     listItemElements.forEach(element => {
       element.setAttribute('role', 'listitem');
-      element.removeAttribute('data-hs-a11y');
     });
   }
 
@@ -82,7 +81,6 @@ export function init() {
         container.parentNode.replaceChild(newDiv, container);
       } else {
         // Just remove the attribute if container isn't a semantic list
-        container.removeAttribute('data-hs-a11y');
       }
     });
   }
@@ -108,11 +106,6 @@ export function init() {
       contentWrapper.setAttribute('role', 'region');
       contentWrapper.setAttribute('aria-labelledby', buttonId);
       
-      if (contentWrapper.style.height !== '0px') {
-        button.setAttribute('aria-expanded', 'true');
-        contentWrapper.setAttribute('aria-hidden', 'false');
-      }
-      
       function toggleFAQ() {
         const isOpen = button.getAttribute('aria-expanded') === 'true';
         
@@ -122,7 +115,6 @@ export function init() {
       
       button.addEventListener('click', toggleFAQ);
       
-      container.removeAttribute('data-hs-a11y');
     });
   }
 
@@ -184,7 +176,6 @@ export function init() {
         container.parentNode.replaceChild(newSpan, container);
       } else {
         // Just remove the attribute if container shouldn't be converted
-        container.removeAttribute('data-hs-a11y');
       }
     });
   }
@@ -254,7 +245,187 @@ export function init() {
         }
       }
       
-      element.removeAttribute('data-hs-a11y');
+    });
+  }
+
+  function setupSummaryAccessibility() {
+    const summaryContainers = document.querySelectorAll('[data-hs-a11y="summary-wrap"]');
+
+
+    summaryContainers.forEach((container, index) => {
+      
+      const button = container.querySelector('[data-hs-a11y="summary-btn"]');
+      const contentWrapper = container.querySelector('[data-hs-a11y="summary-content"]');
+      
+      if (!button || !contentWrapper) {
+        return;
+      }
+      
+      
+      const buttonId = `summary-button-${index}`;
+      const contentId = `summary-content-${index}`;
+      
+      // Get original button text from first text node only
+      const walker = document.createTreeWalker(
+        button,
+        NodeFilter.SHOW_TEXT,
+        null,
+        false
+      );
+      
+      let firstTextNode = walker.nextNode();
+      while (firstTextNode && !firstTextNode.textContent.trim()) {
+        firstTextNode = walker.nextNode();
+      }
+      
+      const originalButtonText = firstTextNode ? firstTextNode.textContent.trim() : button.textContent.trim();
+      
+      // Function to update all text nodes in button
+      function updateButtonText(newText) {
+        // Find all text nodes and update them
+        const walker = document.createTreeWalker(
+          button,
+          NodeFilter.SHOW_TEXT,
+          null,
+          false
+        );
+        
+        const textNodes = [];
+        let node;
+        while (node = walker.nextNode()) {
+          if (node.textContent.trim()) {
+            textNodes.push(node);
+          }
+        }
+        
+        textNodes.forEach(textNode => {
+          textNode.textContent = newText;
+        });
+      }
+      
+      button.setAttribute('id', buttonId);
+      button.setAttribute('aria-expanded', 'false');
+      button.setAttribute('aria-controls', contentId);
+      button.setAttribute('aria-label', 'View Summary');
+      
+      contentWrapper.setAttribute('id', contentId);
+      contentWrapper.setAttribute('aria-hidden', 'true');
+      contentWrapper.setAttribute('role', 'region');
+      contentWrapper.setAttribute('aria-labelledby', buttonId);
+      
+      // Summary is closed by default - no need to check initial state
+      
+      function toggleSummary() {
+        const isOpen = button.getAttribute('aria-expanded') === 'true';
+        
+        if (isOpen) {
+          // Closing
+          button.setAttribute('aria-expanded', 'false');
+          button.setAttribute('aria-label', 'View Summary');
+          updateButtonText(originalButtonText);
+          contentWrapper.setAttribute('aria-hidden', 'true');
+        } else {
+          // Opening
+          button.setAttribute('aria-expanded', 'true');
+          button.setAttribute('aria-label', 'Close Summary');
+          updateButtonText('Close');
+          contentWrapper.setAttribute('aria-hidden', 'false');
+        }
+        
+      }
+      
+      button.addEventListener('click', toggleSummary);
+      
+    });
+  }
+
+  function setupRichTextAccessibility() {
+    const contentAreas = document.querySelectorAll('[data-hs-a11y="rich-content"]');
+    const tocLists = document.querySelectorAll('[data-hs-a11y="rich-toc"]');
+
+
+    contentAreas.forEach((contentArea) => {
+      
+      // Since there's only 1 content area and 1 TOC list per page, use the first TOC list
+      const tocList = tocLists[0];
+
+      if (!tocList) {
+        return;
+      }
+
+      if (tocList.children.length === 0) {
+        return;
+      }
+
+
+      const template = tocList.children[0];
+      tocList.innerHTML = "";
+      const h2Headings = contentArea.querySelectorAll("h2");
+      
+
+      // Create sections and wrap content
+      h2Headings.forEach((heading) => {
+        const sectionId = heading.textContent
+          .toLowerCase()
+          .replace(/[^a-z0-9]+/g, "-")
+          .replace(/(^-|-$)/g, "");
+        
+        const section = document.createElement("div");
+        section.id = sectionId;
+        heading.parentNode.insertBefore(section, heading);
+        section.appendChild(heading);
+        let nextElement = section.nextElementSibling;
+        while (nextElement && nextElement.tagName !== "H2") {
+          const elementToMove = nextElement;
+          nextElement = nextElement.nextElementSibling;
+          section.appendChild(elementToMove);
+        }
+      });
+
+      // Create TOC entries
+      h2Headings.forEach((heading, index) => {
+        const tocItem = template.cloneNode(true);
+        const link = tocItem.querySelector("a");
+        const sectionId = heading.parentElement.id;
+        link.href = "#" + sectionId;
+
+
+        // Bold numbered text
+        const number = document.createElement("strong");
+        number.textContent = index + 1 + ". ";
+
+        // Clear the link and add the number + text
+        link.innerHTML = "";
+        link.appendChild(number);
+        link.appendChild(document.createTextNode(heading.textContent));
+
+        // Add click handler for smooth scrolling
+        link.addEventListener("click", (e) => {
+          e.preventDefault();
+
+          const targetSection = document.getElementById(sectionId);
+          if (targetSection) {
+            targetSection.scrollIntoView({ behavior: "smooth" });
+            // Focus on the section for accessibility (will only show outline for keyboard users due to CSS)
+            setTimeout(() => {
+              targetSection.focus();
+            }, 100);
+          }
+        });
+
+        // Ensure sections are focusable for keyboard users but use CSS to control focus visibility
+        const targetSection = document.getElementById(sectionId);
+        if (targetSection) {
+          targetSection.setAttribute("tabindex", "-1");
+          // Use focus-visible to only show outline for keyboard focus
+          targetSection.style.outline = "none";
+          targetSection.style.setProperty("outline", "none", "important");
+        }
+
+        // Add item to the TOC list
+        tocList.appendChild(tocItem);
+      });
+
     });
   }
 

package/autoInit/navbar.js

@@ -252,15 +252,6 @@ function setupDynamicDropdowns() {
       }
     });
 
-    toggle.addEventListener("click", function(e) {
-      if (e.isTrusted) {
-        // This is a real user click - prevent it
-        e.preventDefault();
-        e.stopPropagation();
-        return false;
-      }
-      // Programmatic clicks (from hover/keyboard) proceed normally
-    });
 
     document.addEventListener("click", function (e) {
       if (!wrapper.contains(e.target) && isOpen) {

package/autoInit/transition.js

@@ -0,0 +1,118 @@
+// Page Transition Module
+const API_NAME = "hsmain";
+let initialized = false;
+
+export async function init() {
+  console.log('[Transition] Module init called');
+  
+  // Wait for Webflow to be ready before initializing transitions
+  window[API_NAME].afterWebflowReady(() => {
+    console.log('[Transition] afterWebflowReady callback fired');
+    setTimeout(() => {
+      console.log('[Transition] Attempting to initialize transitions');
+      initTransitions();
+      initialized = true;
+    }, 50);
+  });
+
+  return { result: "anim-transition initialized" };
+}
+
+function initTransitions() {
+  console.log('[Transition] initTransitions called');
+  const transitionTrigger = document.querySelector(".transition-trigger");
+  const transitionElement = document.querySelector(".transition");
+  console.log('[Transition] transitionTrigger found:', transitionTrigger);
+  console.log('[Transition] transitionElement found:', transitionElement);
+  
+  let excludedClass = "no-transition";
+
+  // Page Load - Trigger entrance animation with optional delay
+  if (transitionTrigger) {
+    // Check if this is the first page load of the session
+    const isFirstLoad = !sessionStorage.getItem('transition-loaded');
+    const delayAttr = transitionElement?.getAttribute('data-hs-delay');
+    const delaySeconds = delayAttr ? parseFloat(delayAttr) : 0;
+    
+    console.log('[Transition] First load:', isFirstLoad);
+    console.log('[Transition] Delay attribute:', delayAttr);
+    console.log('[Transition] Delay seconds:', delaySeconds);
+    
+    const triggerAnimation = () => {
+      console.log('[Transition] Triggering page load transition');
+      Webflow.push(function () {
+        transitionTrigger.click();
+      });
+    };
+    
+    if (isFirstLoad && delaySeconds > 0) {
+      console.log(`[Transition] Delaying first load by ${delaySeconds} seconds`);
+      setTimeout(triggerAnimation, delaySeconds * 1000);
+      sessionStorage.setItem('transition-loaded', 'true');
+    } else {
+      triggerAnimation();
+      if (isFirstLoad) {
+        sessionStorage.setItem('transition-loaded', 'true');
+      }
+    }
+  }
+
+  // Monitor for transition completion
+  function waitForTransitionComplete(callback) {
+    if (!transitionElement) return;
+    
+    const checkComplete = () => {
+      if (transitionElement.classList.contains('transition-done')) {
+        console.log('[Transition] Animation complete detected');
+        callback();
+      } else {
+        setTimeout(checkComplete, 50);
+      }
+    };
+    checkComplete();
+  }
+
+  // On Link Click
+  console.log('[Transition] Setting up click handler');
+  document.addEventListener("click", function (e) {
+    const link = e.target.closest("a");
+    
+    if (
+      link &&
+      link.hostname === window.location.hostname &&
+      link.getAttribute("href") &&
+      link.getAttribute("href").indexOf("#") === -1 &&
+      !link.classList.contains(excludedClass) &&
+      link.getAttribute("target") !== "_blank" &&
+      transitionTrigger
+    ) {
+      console.log('[Transition] Triggering exit transition to:', link.getAttribute("href"));
+      e.preventDefault();
+      
+      let transitionURL = link.getAttribute("href");
+      
+      // Trigger exit animation
+      transitionTrigger.click();
+      
+      // Wait for animation to complete before navigating
+      waitForTransitionComplete(() => {
+        console.log('[Transition] Navigating to:', transitionURL);
+        window.location = transitionURL;
+      });
+    }
+  });
+
+  // On Back Button Tap
+  window.onpageshow = function (event) {
+    if (event.persisted) {
+      window.location.reload();
+    }
+  };
+
+  // Hide Transition on Window Width Resize
+  window.addEventListener("resize", function () {
+    if (transitionElement) {
+      transitionElement.style.display = "none";
+    }
+  });
+}

package/index.js

@@ -1,4 +1,4 @@
-// Version:1.5.1
+// Version:1.6.0
 
 const API_NAME = "hsmain";
 
@@ -13,25 +13,19 @@ const initializeHsMain = async () => {
 
   const queuedModules = Array.isArray(window[API_NAME]) ? window[API_NAME] : [];
 
-  const animationModules = {
-    "data-hs-anim-text": true,
-    "data-hs-anim-hero": true,
-    "data-hs-anim-transition": true,
-  };
+  const animationModules = {};
 
   const utilityModules = {
-    "data-hs-util-toc": true,
-    "data-hs-util-progress": true,
     "data-hs-util-ba": true,
   };
 
   const autoInitModules = {
     "smooth-scroll": true,
-    modal: true,
     navbar: true,
     accessibility: true,
     counter: true,
     form: true,
+    transition: true,
   };
 
   const allDataAttributes = { ...animationModules, ...utilityModules };
@@ -43,14 +37,9 @@ const initializeHsMain = async () => {
     });
 
   const moduleMap = {
-    "data-hs-anim-text": () => import("./animations/text.js"),
-    "data-hs-anim-hero": () => import("./animations/hero.js"),
-    "data-hs-anim-transition": () => import("./animations/transition.js"),
-    "data-hs-util-toc": () => import("./utils/toc.js"),
-    "data-hs-util-progress": () => import("./utils/scroll-progress.js"),
+    transition: () => import("./autoInit/transition.js"),
     "data-hs-util-ba": () => import("./utils/before-after.js"),
     "smooth-scroll": () => import("./autoInit/smooth-scroll.js"),
-    modal: () => import("./autoInit/modal.js"),
     navbar: () => import("./autoInit/navbar.js"),
     accessibility: () => import("./autoInit/accessibility.js"),
     counter: () => import("./autoInit/counter.js"),
@@ -255,13 +244,7 @@ const initializeHsMain = async () => {
       loadModule(moduleName);
     }
 
-    if (
-      !scripts.some((script) => script.hasAttribute("data-hs-anim-transition"))
-    ) {
-      document.querySelectorAll(".transition").forEach((element) => {
-        element.style.display = "none";
-      });
-    }
+    // Transition is now auto-loaded, so no need to hide transition elements
   };
 
   document.querySelectorAll(".w-richtext").forEach((richtext) => {
@@ -274,6 +257,14 @@ const initializeHsMain = async () => {
     processModules();
     await waitForWebflow();
 
+    // Small delay to ensure all scripts are fully initialized
+    await new Promise(resolve => setTimeout(resolve, 10));
+
+    // Force Webflow to reinitialize (not redraw) - rescans DOM and rebinds interactions
+    if (window.Webflow && typeof window.Webflow.ready === 'function') {
+      window.Webflow.ready();
+    }
+
     window[API_NAME].loaded = true;
     readyCallbacks.forEach((callback) => {
       try {

package/package.json

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

package/TEMP-before-after-attributes.md

@@ -1,158 +0,0 @@
-# Before-After Component Attributes Guide
-
-This is a temporary reference for the `data-hs-ba` attributes used in the before-after utility.
-
-## Required Structure
-
-### Main Container
-```html
-<div data-hs-ba="wrapper">
-  <!-- All before-after content goes here -->
-</div>
-```
-
-### Individual Slide/Item
-Each comparison should be a direct child of the wrapper:
-```html
-<div data-hs-ba="wrapper">
-  <div class="slide-1">
-    <!-- First comparison -->
-  </div>
-  <div class="slide-2">
-    <!-- Second comparison -->
-  </div>
-</div>
-```
-
-## Image Elements
-
-### Image Wrapper Container
-```html
-<div data-hs-ba="image-wrapper">
-  <!-- Before and after images go inside here -->
-</div>
-```
-
-### Before Image
-```html
-<img src="before.jpg" data-hs-ba="image-before" alt="Before image">
-```
-
-### After Image
-```html
-<img src="after.jpg" data-hs-ba="image-after" alt="After image">
-```
-
-## Interactive Controls
-
-### Mode Buttons
-```html
-<!-- Show only before image -->
-<button data-hs-ba="mode-before">Before</button>
-
-<!-- Show split view with slider -->
-<button data-hs-ba="mode-split">Split</button>
-
-<!-- Show only after image -->
-<button data-hs-ba="mode-after">After</button>
-```
-
-### Navigation Arrows
-```html
-<!-- Previous slide -->
-<button data-hs-ba="left">←</button>
-
-<!-- Next slide -->
-<button data-hs-ba="right">→</button>
-```
-
-### Slider Handle (for split mode)
-```html
-<div data-hs-ba="slider"></div>
-```
-
-## Pagination
-
-### Pagination Container with Template
-```html
-<div data-hs-ba="pagination">
-  <!-- Single template dot - system will clone this for each slide -->
-  <div class="ba_1_pagination_dot"></div>
-</div>
-```
-
-**How it works**:
-- Place ONE template dot inside the pagination container
-- The system will automatically clone this template for each slide
-- Each generated dot gets proper accessibility attributes
-- The `is-active` class is automatically managed
-
-**Generated Structure** (example with 3 slides):
-```html
-<div data-hs-ba="pagination">
-  <div class="ba_1_pagination_dot is-active" role="button" tabindex="0" aria-label="Go to slide 1" aria-current="true"></div>
-  <div class="ba_1_pagination_dot" role="button" tabindex="0" aria-label="Go to slide 2" aria-current="false"></div>
-  <div class="ba_1_pagination_dot" role="button" tabindex="0" aria-label="Go to slide 3" aria-current="false"></div>
-</div>
-```
-
-## Complete Example
-
-```html
-<div data-hs-ba="wrapper">
-  <!-- Slide 1 -->
-  <div class="ba-slide">
-    <div data-hs-ba="image-wrapper" class="ba-image_wrap">
-      <img src="before1.jpg" data-hs-ba="image-before" alt="Before">
-      <img src="after1.jpg" data-hs-ba="image-after" alt="After">
-      <div data-hs-ba="slider"></div>
-    </div>
-    
-    <!-- Mode controls -->
-    <div class="controls">
-      <button data-hs-ba="mode-before">Before</button>
-      <button data-hs-ba="mode-split" class="is-active">Split</button>
-      <button data-hs-ba="mode-after">After</button>
-    </div>
-    
-    <!-- Navigation -->
-    <button data-hs-ba="left">Previous</button>
-    <button data-hs-ba="right">Next</button>
-    
-    <!-- Pagination -->
-    <div data-hs-ba="pagination">
-      <div class="ba_1_pagination_dot"></div>  <!-- Template dot -->
-    </div>
-  </div>
-  
-  <!-- Slide 2 -->
-  <div class="ba-slide">
-    <!-- Similar structure... -->
-  </div>
-  
-  <!-- Slide 3 -->
-  <div class="ba-slide">
-    <!-- Similar structure... -->
-  </div>
-</div>
-```
-
-## Default Behavior
-
-- **Default mode**: Split view at 50% position
-- **Active states**: Elements with `is-active` class are highlighted
-- **Keyboard support**: Arrow keys navigate slides or move slider
-- **Touch support**: Dragging works on the slider handle
-- **Accessibility**: Full ARIA support with proper labels
-
-## Notes
-
-- Each slide can have its own controls (mode buttons, navigation, pagination)
-- The wrapper image container should have `data-hs-ba="image-wrapper"` for proper click handling
-- Pagination dots are clicked to jump to specific slides
-- Mode buttons toggle between before, split, and after views
-- The slider only appears in split mode
-
----
-
-*This is a temporary file for development reference. Delete when no longer needed.*

package/animations/transition.js

@@ -1,82 +0,0 @@
-// Page Transition Module
-const API_NAME = "hsmain";
-export async function init() {
-  // Register the transition logic to run after library is ready
-  window[API_NAME].afterReady(() => {
-    // Only run if jQuery is available
-    if (typeof $ !== "undefined") {
-      initTransitions();
-    }
-  });
-
-  return { result: "anim-transition initialized" };
-}
-
-function initTransitions() {
-  let transitionTrigger = $(".transition-trigger");
-  let introDurationMS = 800;
-  let exitDurationMS = 400;
-  let excludedClass = "no-transition";
-
-  // On Page Load
-  if (transitionTrigger.length > 0) {
-    function triggerTransition() {
-      if (window.Webflow && window.Webflow.push) {
-        Webflow.push(function () {
-          transitionTrigger.click();
-        });
-      } else {
-        // Non-Webflow initialization
-        setTimeout(() => {
-          transitionTrigger.click();
-        }, 100);
-      }
-      $("body").addClass("no-scroll-transition");
-      setTimeout(() => {
-        $("body").removeClass("no-scroll-transition");
-      }, introDurationMS);
-    }
-
-    // Wait for full page load (images, fonts, etc.) for Safari
-    if (document.readyState === "complete") {
-      triggerTransition();
-    } else {
-      window.addEventListener("load", triggerTransition, { once: true });
-    }
-  }
-
-  // On Link Click
-  $("a").on("click", function (e) {
-    if (
-      $(this).prop("hostname") == window.location.host &&
-      $(this).attr("href").indexOf("#") === -1 &&
-      !$(this).hasClass(excludedClass) &&
-      $(this).attr("target") !== "_blank" &&
-      transitionTrigger.length > 0
-    ) {
-      e.preventDefault();
-      $("body").addClass("no-scroll-transition");
-      let transitionURL = $(this).attr("href");
-      transitionTrigger.click();
-      setTimeout(function () {
-        window.location = transitionURL;
-      }, exitDurationMS);
-    }
-  });
-
-  // On Back Button Tap
-  window.onpageshow = function (event) {
-    if (event.persisted) {
-      window.location.reload();
-    }
-  };
-
-  // Hide Transition on Window Width Resize
-  setTimeout(() => {
-    $(window).on("resize", function () {
-      setTimeout(() => {
-        $(".transition").css("display", "none");
-      }, 50);
-    });
-  }, introDurationMS);
-}

package/styles.css

@@ -1,24 +0,0 @@
-/* transition */
-body .transition {display: block}
-.w-editor .transition {display: none;}
-.no-scroll-transition {overflow: hidden; position: relative;}
-
-/* splittext */
-.line-mask, .word-mask, .char-mask {
-    padding-bottom: .1em;
-    margin-bottom: -.1em;
-    padding-inline: .1em;
-    margin-inline: -.1em;
-    will-change: transform, opacity;
-}
-
-
-/* TOC focus handling - only show focus outline for keyboard navigation */
-[data-hs-toc] div[id]:focus:not(:focus-visible) {
-    outline: none !important;
-}
-
-[data-hs-toc] div[id]:focus-visible {
-    outline: 2px solid #007bff !important;
-    outline-offset: 2px;
-}

package/utils/scroll-progress.js

@@ -1,34 +0,0 @@
-export async function init() {
-  const progressBar = document.querySelector('[data-hs-progress="bar"]');
-  const progressContent = document.querySelector(
-    '[data-hs-progress="wrapper"]',
-  );
-
-  // Check if elements exist before using them
-  if (!progressBar || !progressContent) {
-    return {
-      result: "util-scroll-progress initialized",
-    };
-  }
-
-  // Check if gsap exists before using it
-  if (typeof gsap !== "undefined") {
-    gsap.set(progressBar, { width: "0%" });
-
-    // Create the scroll progress animation
-    gsap.to(progressBar, {
-      width: "100%",
-      ease: "none",
-      scrollTrigger: {
-        trigger: progressContent,
-        start: "top bottom",
-        end: "bottom bottom",
-        scrub: true,
-      },
-    });
-  }
-
-  return {
-    result: "util-scroll-progress initialized",
-  };
-}

package/utils/toc.js

@@ -1,84 +0,0 @@
-export async function init() {
-  const contentArea = document.querySelector('[data-hs-toc="content"]');
-  const tocList = document.querySelector('[data-hs-toc="list"]');
-
-  // Check main elements
-  if (!contentArea) {
-    return;
-  }
-  if (!tocList) {
-    return;
-  }
-  if (tocList.children.length === 0) {
-    return;
-  }
-
-  const template = tocList.children[0];
-  tocList.innerHTML = "";
-  const h2Headings = contentArea.querySelectorAll("h2");
-
-  // Create sections and wrap content
-  h2Headings.forEach((heading, index) => {
-    const sectionId = heading.textContent
-      .toLowerCase()
-      .replace(/[^a-z0-9]+/g, "-")
-      .replace(/(^-|-$)/g, "");
-    const section = document.createElement("div");
-    section.id = sectionId;
-    heading.parentNode.insertBefore(section, heading);
-    section.appendChild(heading);
-    let nextElement = section.nextElementSibling;
-    while (nextElement && nextElement.tagName !== "H2") {
-      const elementToMove = nextElement;
-      nextElement = nextElement.nextElementSibling;
-      section.appendChild(elementToMove);
-    }
-  });
-
-  // Create TOC entries
-  h2Headings.forEach((heading, index) => {
-    const tocItem = template.cloneNode(true);
-    const link = tocItem.querySelector("a");
-    const sectionId = heading.parentElement.id;
-    link.href = "#" + sectionId;
-
-    // Bold numbered text
-    const number = document.createElement("strong");
-    number.textContent = index + 1 + ". ";
-
-    // Clear the link and add the number + text
-    link.innerHTML = "";
-    link.appendChild(number);
-    link.appendChild(document.createTextNode(heading.textContent));
-
-    // Add click handler for smooth scrolling
-    link.addEventListener("click", (e) => {
-      e.preventDefault();
-
-      const targetSection = document.getElementById(sectionId);
-      if (targetSection) {
-        targetSection.scrollIntoView({ behavior: "smooth" });
-        // Focus on the section for accessibility (will only show outline for keyboard users due to CSS)
-        setTimeout(() => {
-          targetSection.focus();
-        }, 100);
-      }
-    });
-
-    // Ensure sections are focusable for keyboard users but use CSS to control focus visibility
-    const targetSection = document.getElementById(sectionId);
-    if (targetSection) {
-      targetSection.setAttribute("tabindex", "-1");
-      // Use focus-visible to only show outline for keyboard focus
-      targetSection.style.outline = "none";
-      targetSection.style.setProperty("outline", "none", "important");
-    }
-
-    // Add item to the TOC list
-    tocList.appendChild(tocItem);
-  });
-
-  return {
-    result: "util-toc initialized",
-  };
-}