@hortonstudio/main 1.2.11 → 1.2.13

package/attributes-master/pnpm-workspace.yaml

@@ -1,3 +0,0 @@
-packages:
-  - 'packages/*'
-  - '!packages/template'

package/attributes-master/tsconfig.json

@@ -1,6 +0,0 @@
-{
-  "extends": "@finsweet/tsconfig",
-  "compilerOptions": {
-    "moduleResolution": "bundler"
-  }
-}

package/autoInit/smooth-scroll.js

@@ -1,89 +0,0 @@
-const API_NAME = 'hsmain';
-
-export async function init() {
-    const api = window[API_NAME];
-    api.afterWebflowReady(() => {
-        if (typeof $ !== 'undefined') {
-            $(document).off('click.wf-scroll');
-        }
-    });
-    
-    // Disable CSS smooth scrolling
-    document.documentElement.style.scrollBehavior = 'auto';
-    document.body.style.scrollBehavior = 'auto';
-    
-    // Check if user prefers reduced motion
-    function prefersReducedMotion() {
-        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-    }
-    
-    function getScrollOffset() {
-        const offsetValue = getComputedStyle(document.documentElement)
-            .getPropertyValue('--misc--scroll-offset').trim();
-        return parseInt(offsetValue) || 0;
-    }
-    
-    // Smooth scroll to element with offset
-    function scrollToElement(target, offset = 0) {
-        if (!target) return;
-        
-        // Skip animation if user prefers reduced motion
-        if (prefersReducedMotion()) {
-            const targetPosition = target.getBoundingClientRect().top + window.scrollY - offset;
-            window.scrollTo(0, targetPosition);
-            target.setAttribute('tabindex', '-1');
-            target.focus({ preventScroll: true });
-            return;
-        }
-        
-        gsap.to(window, {
-            duration: 1,
-            scrollTo: {
-                y: target,
-                offsetY: offset
-            },
-            ease: "power2.out",
-            onComplete: function() {
-                target.setAttribute('tabindex', '-1');
-                target.focus({ preventScroll: true });
-            }
-        });
-    }
-    
-    // Handle anchor link clicks and keyboard activation
-    function handleAnchorClicks() {
-        document.addEventListener('click', handleAnchorActivation);
-        document.addEventListener('keydown', function(e) {
-            if (e.key === 'Enter' || e.key === ' ') {
-                handleAnchorActivation(e);
-            }
-        });
-    }
-    
-    function handleAnchorActivation(e) {
-        const link = e.target.closest('a[href^="#"]');
-        if (!link) return;
-        
-        const href = link.getAttribute('href');
-        if (!href || href === '#') return;
-        
-        const targetId = href.substring(1);
-        const targetElement = document.getElementById(targetId);
-        
-        if (targetElement) {
-            e.preventDefault();
-            if (history.replaceState) {
-                history.replaceState(null, null, `#${targetElement.id}`);
-            }
-            const offset = getScrollOffset();
-            scrollToElement(targetElement, offset);
-        }
-    }
-    
-    // Initialize anchor link handling
-    handleAnchorClicks();
-    
-    return {
-        result: 'autoInit-smooth-scroll initialized'
-    };
-}

package/utils/navbar.js

@@ -1,214 +0,0 @@
-export const init = () => {
-  // Find all dropdown wrappers
-  const dropdownWrappers = document.querySelectorAll('[data-hs-nav-dropdown="wrapper"]');
-  
-  // Global array to track all dropdown instances
-  const allDropdowns = [];
-  
-  // Function to close all dropdowns except the specified one
-  const closeAllDropdowns = (exceptWrapper = null) => {
-    allDropdowns.forEach(dropdown => {
-      if (dropdown.wrapper !== exceptWrapper && dropdown.isOpen) {
-        dropdown.closeDropdown();
-      }
-    });
-  };
-  
-  dropdownWrappers.forEach(wrapper => {
-    const animationDuration = 0.3;
-    
-    // Find elements within this wrapper
-    const toggle = wrapper.querySelector('a'); // the toggle link
-    const list = wrapper.querySelector('[data-hs-nav-dropdown="list"]');
-    const contain = list.querySelector('[data-hs-nav-dropdown="container"]');
-    const arrow = toggle.querySelector('[data-hs-nav-dropdown="arrow"]');
-    const text = toggle.querySelector('[data-hs-nav-dropdown="text"]'); // find the text element
-    
-    // Set initial states with GSAP
-    gsap.set(contain, { yPercent: -110 });
-    gsap.set(list, { display: 'none' });
-    gsap.set(arrow, { rotation: 0, scale: 1, x: 0, color: '' });
-    gsap.set(text, { scale: 1, color: '' }); // empty string = default color
-    
-    // Track if dropdown is open
-    let isOpen = false;
-    let currentTimeline = null;
-    
-    // Open animation
-    function openDropdown() {
-      if (isOpen) return;
-      
-      // Kill any existing timeline
-      if (currentTimeline) {
-        currentTimeline.kill();
-      }
-      
-      // Close all other dropdowns first
-      closeAllDropdowns(wrapper);
-      
-      isOpen = true;
-      
-      // Update ARIA states
-      toggle.setAttribute('aria-expanded', 'true');
-      list.setAttribute('aria-hidden', 'false');
-      
-      // GSAP animation
-      currentTimeline = gsap.timeline();
-      currentTimeline.set(list, { display: 'flex' })
-        .to(contain, { 
-          yPercent: 0, 
-          duration: animationDuration, 
-          ease: 'ease' 
-        }, 0)
-        .to(arrow, { 
-          rotation: 90,
-          scale: 1.2,
-          x: 4,
-          color: 'var(--swatch--brand)',
-          duration: animationDuration, 
-          ease: 'ease' 
-        }, 0)
-        .to(text, {
-          scale: 1.1,
-          color: 'var(--swatch--brand)',
-          duration: animationDuration,
-          ease: 'ease'
-        }, 0);
-    }
-    
-    // Close animation  
-    function closeDropdown() {
-      if (!isOpen) return;
-      
-      // Kill any existing timeline
-      if (currentTimeline) {
-        currentTimeline.kill();
-      }
-      
-      // Check if focus should be restored to toggle
-      const shouldRestoreFocus = list.contains(document.activeElement);
-      
-      isOpen = false;
-      currentMenuItemIndex = -1;
-      
-      // Update ARIA states
-      toggle.setAttribute('aria-expanded', 'false');
-      list.setAttribute('aria-hidden', 'true');
-      
-      // Temporarily remove role="menu" to help screen readers understand menu is closed
-      const originalRole = list.getAttribute('role');
-      list.removeAttribute('role');
-      
-      // GSAP animation
-      currentTimeline = gsap.timeline();
-      currentTimeline.to(contain, { 
-          yPercent: -110, 
-          duration: animationDuration, 
-          ease: 'ease' 
-        }, 0)
-        .to(arrow, { 
-          rotation: 0,
-          scale: 1,
-          x: 0,
-          color: '', // back to default color
-          duration: animationDuration, 
-          ease: 'ease' 
-        }, 0)
-        .to(text, {
-          scale: 1,
-          color: '', // back to default color
-          duration: animationDuration,
-          ease: 'ease'
-        }, 0)
-        .set(list, { display: 'none' })
-        .call(() => {
-          // Restore role after animation completes
-          list.setAttribute('role', originalRole || 'menu');
-        });
-      
-      // Restore focus to toggle only if focus was inside dropdown
-      if (shouldRestoreFocus) {
-        // Small delay to ensure screen reader announces the state change
-        setTimeout(() => {
-          toggle.focus();
-        }, 50);
-      }
-    }
-    
-    // Get all menu items for navigation
-    const menuItems = list.querySelectorAll('a, button, [role="menuitem"]');
-    let currentMenuItemIndex = -1;
-    
-    // Hover events
-    toggle.addEventListener('mouseenter', openDropdown);
-    wrapper.addEventListener('mouseleave', closeDropdown);
-    
-    // Arrow key navigation within dropdown
-    list.addEventListener('keydown', function(e) {
-      if (!isOpen) return;
-      
-      if (e.key === 'ArrowDown') {
-        e.preventDefault();
-        currentMenuItemIndex = (currentMenuItemIndex + 1) % menuItems.length;
-        menuItems[currentMenuItemIndex].focus();
-      } else if (e.key === 'ArrowUp') {
-        e.preventDefault();
-        currentMenuItemIndex = currentMenuItemIndex <= 0 ? menuItems.length - 1 : currentMenuItemIndex - 1;
-        menuItems[currentMenuItemIndex].focus();
-      } else if (e.key === 'Escape') {
-        e.preventDefault();
-        closeDropdown();
-        toggle.focus();
-      }
-    });
-    
-    // Keyboard events for toggle
-    toggle.addEventListener('keydown', function(e) {
-      if (e.key === 'ArrowDown') {
-        e.preventDefault();
-        openDropdown();
-        // Focus first menu item after opening
-        if (menuItems.length > 0) {
-          currentMenuItemIndex = 0;
-          setTimeout(() => menuItems[0].focus(), 50);
-        }
-      } else if (e.key === ' ') {
-        e.preventDefault();
-        // Simple toggle: if closed open, if open close
-        if (isOpen) {
-          closeDropdown();
-        } else {
-          openDropdown();
-        }
-      } else if (e.key === 'ArrowUp' || e.key === 'Escape') {
-        e.preventDefault();
-        closeDropdown();
-      }
-    });
-    
-    // Close dropdown when clicking outside
-    document.addEventListener('click', function(e) {
-      if (!wrapper.contains(e.target) && isOpen) {
-        closeDropdown();
-      }
-    });
-    
-    // Add this dropdown instance to the global array
-    allDropdowns.push({
-      wrapper,
-      isOpen: () => isOpen,
-      closeDropdown
-    });
-  });
-  
-  // Global focus management - close dropdown when tab focus moves outside
-  document.addEventListener('focusin', function(e) {
-    allDropdowns.forEach(dropdown => {
-      if (dropdown.isOpen() && !dropdown.wrapper.contains(e.target)) {
-        dropdown.closeDropdown();
-      }
-    });
-  });
-
-  return { result: 'navbar initialized' };
-};

package/utils/scroll-progress.js

@@ -1,29 +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'
-        };
-    }
-
-    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,77 +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'
-    };
-}