@yatoday/astro-ui 0.17.26 → 0.17.28

package/components/ImageGalleryIkea/ImageGalleryIkea.astro

@@ -190,12 +190,15 @@ const { container: containerClass = '', swiper: swiperClass = '', swiperThumb: s
       const thumbSwiperEl = document.getElementById(`swiper-thumb-${id}`);
       if (!mainSwiperEl || !thumbSwiperEl) return;
 
-      mainSwiperEl.addEventListener('swiperafterinit', () => {
-        (thumbSwiperEl as any)?.swiper.slides.forEach((slide: HTMLElement, index: number) => {
-          slide.addEventListener('mouseenter', () => {
-            (mainSwiperEl as any)?.swiper.slideTo(index);
-          });
-        });
+      // Wire up thumb hover + click → main slide navigation.
+      // Attach to light-DOM swiper-slide elements directly so this does not
+      // depend on the swiperafterinit lifecycle event (which can be flaky with
+      // dynamically registered swiper-element + init="false").
+      const thumbSlides = thumbSwiperEl.querySelectorAll('swiper-slide');
+      thumbSlides.forEach((slide, index) => {
+        const goTo = () => (mainSwiperEl as any)?.swiper?.slideTo(index);
+        slide.addEventListener('mouseenter', goTo);
+        slide.addEventListener('click', goTo);
       });
 
       // Thumb Slider navigation buttons
@@ -232,6 +235,23 @@ const { container: containerClass = '', swiper: swiperClass = '', swiperThumb: s
 
       // Mark as initialized to show content and hide loader
       elem.setAttribute('data-initialized', 'true');
+
+      // Force Swiper to re-measure once layout settles and again as images
+      // resolve. Without this, Swiper can measure slides while their
+      // <img> children still have no intrinsic size (loading="lazy" /
+      // cache-cold) and then lock itself via watchOverflow — silently
+      // swallowing every slideTo() and click handler on user machines
+      // where the images aren't already cached.
+      const scheduleUpdate = () => {
+        const s = (mainSwiperEl as any)?.swiper;
+        if (s && !s.destroyed) s.update();
+      };
+      requestAnimationFrame(scheduleUpdate);
+      mainSwiperEl.querySelectorAll('img').forEach((img) => {
+        if (img.complete && img.naturalWidth > 0) return;
+        img.addEventListener('load', scheduleUpdate, { once: true });
+        img.addEventListener('error', scheduleUpdate, { once: true });
+      });
     });
   };
 

package/components/ImageGalleryIkea/ImageGalleryIkea.svelte

@@ -32,12 +32,15 @@
       const thumbSwiperEl = document.getElementById(`swiper-thumb-${id}`);
       if (!mainSwiperEl || !thumbSwiperEl) return;
 
-      mainSwiperEl.addEventListener('swiperafterinit', () => {
-        (thumbSwiperEl as any)?.swiper.slides.forEach((slide: HTMLElement, index: number) => {
-          slide.addEventListener('mouseenter', () => {
-            (mainSwiperEl as any)?.swiper.slideTo(index);
-          });
-        });
+      // Wire up thumb hover + click → main slide navigation.
+      // Attach to light-DOM swiper-slide elements directly so this does not
+      // depend on the swiperafterinit lifecycle event (which can be flaky with
+      // dynamically registered swiper-element + init="false").
+      const thumbSlides = thumbSwiperEl.querySelectorAll('swiper-slide');
+      thumbSlides.forEach((slide, index) => {
+        const goTo = () => (mainSwiperEl as any)?.swiper?.slideTo(index);
+        slide.addEventListener('mouseenter', goTo);
+        slide.addEventListener('click', goTo);
       });
 
       // Thumb Slider navigation buttons
@@ -73,6 +76,23 @@
 
       // Mark as initialized to show content and hide loader
       elem.setAttribute('data-initialized', 'true');
+
+      // Force Swiper to re-measure once layout settles and again as images
+      // resolve. Without this, Swiper can measure slides while their
+      // <img> children still have no intrinsic size (loading="lazy" /
+      // cache-cold) and then lock itself via watchOverflow — silently
+      // swallowing every slideTo() and click handler on user machines
+      // where the images aren't already cached.
+      const scheduleUpdate = () => {
+        const s = (mainSwiperEl as any)?.swiper;
+        if (s && !s.destroyed) s.update();
+      };
+      requestAnimationFrame(scheduleUpdate);
+      mainSwiperEl.querySelectorAll('img').forEach((img) => {
+        if (img.complete && img.naturalWidth > 0) return;
+        img.addEventListener('load', scheduleUpdate, { once: true });
+        img.addEventListener('error', scheduleUpdate, { once: true });
+      });
     };
 
     init();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yatoday/astro-ui",
   "type": "module",
-  "version": "0.17.26",
+  "version": "0.17.28",
   "scripts": {
     "prepare": "husky",
     "pre-commit": "lint-staged",