@hortonstudio/main 1.7.1 → 1.7.3

package/.claude/settings.local.json

@@ -61,7 +61,9 @@
       "Bash(npx prettier:*)",
       "Bash(npx prettier:*)",
       "Bash(npx prettier:*)",
-      "Bash(git stash:*)"
+      "Bash(git stash:*)",
+      "Bash(npm uninstall:*)",
+      "Read(//Users/devan/.claude/commands/**)"
     ],
     "deny": []
   }

package/autoInit/navbar.js

@@ -453,12 +453,6 @@ function setupMenuButton() {
 
     document.body.classList.add("u-overflow-hidden");
 
-    document
-      .querySelectorAll('[data-hs-nav="modal-blur"]')
-      .forEach((element) => {
-        element.classList.add('is-active');
-      });
-
     menuButton.setAttribute("aria-expanded", "true");
     menuButton.setAttribute("aria-label", "Close navigation menu");
 
@@ -487,12 +481,6 @@ function setupMenuButton() {
 
     document.body.classList.remove("u-overflow-hidden");
 
-    document
-      .querySelectorAll('[data-hs-nav="modal-blur"]')
-      .forEach((element) => {
-        element.classList.remove('is-active');
-      });
-
     if (menu.contains(document.activeElement)) {
       menuButton.focus();
     }
@@ -551,12 +539,6 @@ function setupMenuDisplayObserver() {
 
     // Toggle modal effects only when menu is visible AND menu is open
     document.body.classList.toggle("u-overflow-hidden", shouldShowModal);
-    
-    document
-      .querySelectorAll('[data-hs-nav="modal-blur"]')
-      .forEach((element) => {
-        element.classList.toggle('is-active', shouldShowModal);
-      });
   }
 
   const displayObserver = new ResizeObserver(handleDisplayChange);

package/index.js

@@ -1,4 +1,4 @@
-// Version:1.7.1
+// Version:1.7.3
 const API_NAME = "hsmain";
 
 const initializeHsMain = async () => {

package/package.json

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

package/utils/slider.js

@@ -56,7 +56,8 @@ const initPaginationInstance = (originalList) => {
     nextBtn: container.querySelector('[data-hs-slider="pagination-next"]'),
     prevBtn: container.querySelector('[data-hs-slider="pagination-previous"]'),
     counter: container.querySelector('[data-hs-slider="pagination-counter"]'),
-    controls: container.querySelector('[data-hs-slider="pagination-controls"]')
+    controls: container.querySelector('[data-hs-slider="pagination-controls"]'),
+    dotsWrap: container.querySelector('[data-hs-slider="dots-wrap"]')
   };
   
   if (!elements.nextBtn || !elements.prevBtn) return;
@@ -69,16 +70,119 @@ const initPaginationInstance = (originalList) => {
   }
   
   const config = originalList.getAttribute('data-hs-config') || '';
-  const desktopItems = parseInt(config.match(/show-(\d+)(?!-mobile)/)?.[1]) || 6;
-  const mobileItems = parseInt(config.match(/show-(\d+)-mobile/)?.[1]) || desktopItems;
+  const configOptions = config.split(', ').map(opt => opt.trim());
+  const isInfiniteMode = configOptions.includes('infinite');
   
-  const isMobileLayout = () => getComputedStyle(originalList).display === 'flex';
+  const desktopItems = !isInfiniteMode ? (parseInt(config.match(/show-(\d+)(?!-mobile)/)?.[1]) || 6) : 0;
+  const mobileItems = !isInfiniteMode ? (parseInt(config.match(/show-(\d+)-mobile/)?.[1]) || desktopItems) : 0;
+  
+  
+  // Early exit for infinite mode - disable pagination completely
+  if (isInfiniteMode) {
+    if (elements.controls) {
+      elements.controls.style.display = 'none';
+      elements.controls.setAttribute('aria-hidden', 'true');
+    }
+    if (elements.dotsWrap) {
+      elements.dotsWrap.style.display = 'none';
+      elements.dotsWrap.setAttribute('aria-hidden', 'true');
+    }
+    return;
+  }
+
+  const isMobileLayout = () => {
+    const breakpoint = getComputedStyle(originalList).getPropertyValue('--data-hs-break').trim().replace(/"/g, '');
+    return breakpoint === 'mobile';
+  };
   const allItems = Array.from(originalList.children);
   const totalItems = allItems.length;
   if (!totalItems) return;
   
   const state = { totalPages: 1, currentIndex: 1, currentPage: 1, isAnimating: false, itemsPerPage: desktopItems };
   let wrapperChildren = [];
+  let dotTemplates = { active: null, inactive: null };
+
+  const initializeDots = () => {
+    if (!elements.dotsWrap) {
+      return;
+    }
+
+    // Find template dots
+    const existingDots = Array.from(elements.dotsWrap.children);
+
+    // Identify active and inactive templates
+    existingDots.forEach((dot) => {
+      if (dot.classList.contains('is-active')) {
+        dotTemplates.active = dot.cloneNode(true);
+      } else {
+        dotTemplates.inactive = dot.cloneNode(true);
+      }
+    });
+
+    // Clear existing dots
+    elements.dotsWrap.innerHTML = '';
+
+    // Handle single page or no pages case
+    if (state.totalPages <= 1) {
+      elements.dotsWrap.style.display = 'none';
+      elements.dotsWrap.setAttribute('aria-hidden', 'true');
+      return;
+    }
+
+    // Show dots container
+    elements.dotsWrap.style.display = '';
+    elements.dotsWrap.removeAttribute('aria-hidden');
+
+    // Create dots for each page
+    for (let i = 1; i <= state.totalPages; i++) {
+      const template = i === 1 ? dotTemplates.active : dotTemplates.inactive;
+      if (template) {
+        const dot = template.cloneNode(true);
+        dot.setAttribute('data-page', i);
+        dot.setAttribute('aria-label', `Go to page ${i}`);
+        dot.style.cursor = 'pointer';
+        
+        // Add click handler for dot navigation
+        dot.addEventListener('click', (e) => {
+          e.preventDefault();
+          const targetPage = parseInt(dot.getAttribute('data-page'));
+          navigateToPage(targetPage);
+        });
+        
+        // Add keyboard support
+        dot.setAttribute('tabindex', '0');
+        dot.setAttribute('role', 'button');
+        dot.addEventListener('keydown', (e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            const targetPage = parseInt(dot.getAttribute('data-page'));
+            navigateToPage(targetPage);
+          }
+        });
+        
+        elements.dotsWrap.appendChild(dot);
+      }
+    }
+  };
+
+  const updateActiveDot = () => {
+    if (!elements.dotsWrap || state.totalPages <= 1) return;
+
+    const dots = Array.from(elements.dotsWrap.children);
+
+    dots.forEach((dot, index) => {
+      const pageNumber = index + 1;
+      const isActive = pageNumber === state.currentPage;
+      
+      if (isActive) {
+        dot.classList.add('is-active');
+        dot.setAttribute('aria-current', 'page');
+      } else {
+        dot.classList.remove('is-active');
+        dot.removeAttribute('aria-current');
+      }
+    });
+  };
   
   const initializePagination = (forceItemsPerPage = null) => {
     const currentIsMobile = isMobileLayout();
@@ -97,6 +201,10 @@ const initPaginationInstance = (originalList) => {
         elements.controls.style.display = 'none';
         elements.controls.setAttribute('aria-hidden', 'true');
       }
+      if (elements.dotsWrap) {
+        elements.dotsWrap.style.display = 'none';
+        elements.dotsWrap.setAttribute('aria-hidden', 'true');
+      }
       Object.assign(state, { totalPages: 1, currentIndex: 1, currentPage: 1, isAnimating: false });
       wrapper.style.cssText = `transform: translateX(0%); height: ${originalList.offsetHeight}px;`;
       wrapperChildren = [originalList];
@@ -107,6 +215,10 @@ const initPaginationInstance = (originalList) => {
       elements.controls.style.display = '';
       elements.controls.removeAttribute('aria-hidden');
     }
+    if (elements.dotsWrap) {
+      elements.dotsWrap.style.display = '';
+      elements.dotsWrap.removeAttribute('aria-hidden');
+    }
     
     const pageLists = Array.from({ length: state.totalPages }, (_, page) => {
       const pageList = originalList.cloneNode(false);
@@ -130,6 +242,7 @@ const initPaginationInstance = (originalList) => {
     updateCounter();
     updateHeight();
     manageFocus();
+    initializeDots();
     return state.totalPages;
   };
   const liveRegion = document.createElement('div');
@@ -170,6 +283,46 @@ const initPaginationInstance = (originalList) => {
   resizeObserver.observe(wrapper);
   initializePagination();
   
+  const navigateToPage = (targetPage) => {
+    if (state.isAnimating || state.totalPages <= 1 || targetPage === state.currentPage) return;
+    state.isAnimating = true;
+    
+    // For multi-page jumps, we still use the same transition but update the index directly
+    state.currentIndex = targetPage;
+    state.currentPage = targetPage;
+    
+    updateCounter();
+    announcePageChange();
+    updateHeight();
+    updateActiveDot();
+    
+    if (isMobileLayout() && elements.controls) {
+      setTimeout(() => {
+        const controlsBottom = elements.controls.getBoundingClientRect().bottom + window.pageYOffset;
+        const clearance = 5 * 16; // 5rem in pixels
+        const targetScrollPosition = controlsBottom - window.innerHeight + clearance;
+        window.scrollTo({ top: targetScrollPosition, behavior: 'smooth' });
+      }, 50);
+    }
+    
+    wrapper.style.transition = 'transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
+    wrapper.style.transform = `translateX(${-state.currentIndex * 100}%)`;
+    
+    const handleTransitionEnd = () => {
+      wrapper.removeEventListener('transitionend', handleTransitionEnd);
+      wrapper.style.transition = '';
+      
+      updateCounter();
+      announcePageChange();
+      updateHeight();
+      manageFocus();
+      updateActiveDot();
+      state.isAnimating = false;
+    };
+    
+    wrapper.addEventListener('transitionend', handleTransitionEnd);
+  };
+
   const navigate = (direction) => {
     if (state.isAnimating || state.totalPages <= 1) return;
     state.isAnimating = true;
@@ -181,6 +334,16 @@ const initPaginationInstance = (originalList) => {
     updateCounter();
     announcePageChange();
     updateHeight();
+    updateActiveDot();
+    
+    if (isMobileLayout() && elements.controls) {
+      setTimeout(() => {
+        const controlsBottom = elements.controls.getBoundingClientRect().bottom + window.pageYOffset;
+        const clearance = 5 * 16; // 5rem in pixels
+        const targetScrollPosition = controlsBottom - window.innerHeight + clearance;
+        window.scrollTo({ top: targetScrollPosition, behavior: 'smooth' });
+      }, 50);
+    }
     
     wrapper.style.transition = 'transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
     wrapper.style.transform = `translateX(${-state.currentIndex * 100}%)`;
@@ -203,6 +366,7 @@ const initPaginationInstance = (originalList) => {
       announcePageChange();
       updateHeight();
       manageFocus();
+      updateActiveDot();
       state.isAnimating = false;
     };