npm - @hortonstudio/main - Versions diffs - 1.2.12 → 1.2.13 - Mend

@hortonstudio/main 1.2.12 → 1.2.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (490) hide show

package/attributes-master/pnpm-workspace.yaml DELETED Viewed

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

package/attributes-master/tsconfig.json DELETED Viewed

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

package/autoInit/smooth-scroll.js DELETED Viewed

@@ -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/debug-version.html DELETED Viewed

@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>CDN Version Debug Test</title>
-</head>
-<body>
-    <h1>CDN Version Debug Test</h1>
-    <div id="results"></div>
-    <!-- Test with major version @1 -->
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@hortonstudio/main@1/index.js" data-hs-main data-hs-anim-hero></script>
-    <script>
-        setTimeout(() => {
-            const results = document.getElementById('results');
-            // Check what scripts are found
-            const scripts = [...document.querySelectorAll('script[type="module"]')];
-            results.innerHTML += `<h2>Found Scripts:</h2>`;
-            scripts.forEach((script, i) => {
-                results.innerHTML += `<p>Script ${i}: ${script.src}</p>`;
-            });
-            // Check if hsmain loaded and what scripts it found
-            if (window.hsmain) {
-                results.innerHTML += `<h2>HSMAIN Scripts Found:</h2>`;
-                results.innerHTML += `<p>Found ${window.hsmain.scripts.length} matching scripts</p>`;
-                window.hsmain.scripts.forEach((script, i) => {
-                    results.innerHTML += `<p>HSMAIN Script ${i}: ${script.src}</p>`;
-                });
-            } else {
-                results.innerHTML += `<p>HSMAIN not loaded</p>`;
-            }
-        }, 2000);
-    </script>
-</body>
-</html>

package/utils/navbar.js DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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'
-    };
-}