@yatoday/astro-ui 0.17.2 → 0.17.5

package/components/ImageGalleryIkea/ImageGalleryIkea.astro

@@ -22,9 +22,34 @@ const { container: containerClass = '', swiper: swiperClass = '', swiperThumb: s
     opacity: 1;
     border: 1px solid #666;
   }
+
+  /* Hide slides before Swiper initializes to prevent FOUC */
+  [data-image-gallery-ikea]:not([data-initialized]) swiper-slide {
+    display: none;
+  }
+  [data-image-gallery-ikea]:not([data-initialized]) swiper-slide:first-child {
+    display: block;
+  }
+
+  /* Hide loader after initialization */
+  [data-image-gallery-ikea][data-initialized] .gallery-loader {
+    display: none;
+  }
+
+  /* Loading spinner animation */
+  @keyframes gallery-spin {
+    to { transform: rotate(360deg); }
+  }
+  .gallery-spinner {
+    animation: gallery-spin 1s linear infinite;
+  }
 </style>
 
 <div class={cn('@container relative', containerClass)} data-image-gallery-ikea={id}>
+  <!-- Loading skeleton -->
+  <div class="gallery-loader absolute inset-0 z-30 flex items-center justify-center bg-muted/50 rounded-lg">
+    <div class="gallery-spinner size-10 border-4 border-muted-foreground/20 border-t-primary rounded-full"></div>
+  </div>
   <div class="absolute left-0 top-0 z-20 hidden md:block group w-20">
     <!-- Thumb Slider -->
     <button
@@ -204,6 +229,9 @@ const { container: containerClass = '', swiper: swiperClass = '', swiperThumb: s
       Object.assign(mainSwiperEl, {});
 
       (mainSwiperEl as any)?.initialize();
+
+      // Mark as initialized to show content and hide loader
+      elem.setAttribute('data-initialized', 'true');
     });
   };
 

package/components/ImageGalleryIkea/ImageGalleryIkea.svelte

@@ -70,6 +70,9 @@
 
       Object.assign(mainSwiperEl, {});
       (mainSwiperEl as any)?.initialize();
+
+      // Mark as initialized to show content and hide loader
+      elem.setAttribute('data-initialized', 'true');
     };
 
     init();
@@ -82,9 +85,34 @@
     opacity: 1;
     border: 1px solid #666;
   }
+
+  /* Hide slides before Swiper initializes to prevent FOUC */
+  :global([data-image-gallery-ikea]:not([data-initialized]) swiper-slide) {
+    display: none;
+  }
+  :global([data-image-gallery-ikea]:not([data-initialized]) swiper-slide:first-child) {
+    display: block;
+  }
+
+  /* Hide loader after initialization */
+  :global([data-image-gallery-ikea][data-initialized] .gallery-loader) {
+    display: none;
+  }
+
+  /* Loading spinner animation */
+  @keyframes gallery-spin {
+    to { transform: rotate(360deg); }
+  }
+  .gallery-spinner {
+    animation: gallery-spin 1s linear infinite;
+  }
 </style>
 
 <div bind:this={ref} class={cn('@container relative', containerClass)} data-image-gallery-ikea={id} {...rest}>
+  <!-- Loading skeleton -->
+  <div class="gallery-loader absolute inset-0 z-30 flex items-center justify-center bg-muted/50 rounded-lg">
+    <div class="gallery-spinner size-10 border-4 border-muted-foreground/20 border-t-primary rounded-full"></div>
+  </div>
   <div class="absolute left-0 top-0 z-20 hidden md:block group w-20">
     <!-- Thumb Slider -->
     <button

package/components/WidgetSwiperPhotoSlider/WidgetSwiperPhotoSlider.astro

@@ -12,6 +12,7 @@ const {
   subtitle = await Astro.slots.render('subtitle'),
   tagline = await Astro.slots.render('tagline'),
   imagesFolder,
+  alt,
   position = 'center',
   asHeader = 'h2',
   asSubtitle = 'p',
@@ -51,13 +52,24 @@ const imagePaths = Object.keys(images).filter((imagePath) => {
   {
     imagePaths && (
       <SwiperSlider id={id} withNavigation={withNavigation} {...rest}>
-        {imagePaths.map(async (imagePath) => {
+        {imagePaths.map(async (imagePath, index) => {
           let image = images[imagePath]();
           let optimizedImage = await getImage({
             src: image,
             width: 860,
           });
 
+          // Generate alt text: alt prop > title-based > filename > default
+          const filename = imagePath.split('/').pop()?.replace(/\.[^/.]+$/, '') || '';
+          const imageNumber = index + 1;
+          const imageName = filename || 'Image ' + imageNumber;
+          const baseTitle = title ? String(title).replace(/<[^>]*>/g, '').trim() : '';
+          const altText = alt
+            ? alt + ' - ' + imageName
+            : baseTitle
+              ? baseTitle + ' - ' + imageName
+              : imageName;
+
           return (
             <swiper-slide>
               <a
@@ -65,11 +77,13 @@ const imagePaths = Object.keys(images).filter((imagePath) => {
                 data-pswp-width={optimizedImage.attributes.width}
                 data-pswp-height={optimizedImage.attributes.height}
                 target="_blank"
+                title={altText}
                 class="group overflow-hidden rounded-md border-primary cursor-zoom-in block aspect-square"
               >
                 <AstroImage
                   src={image}
-                  alt={'altText'}
+                  alt={altText}
+                  title={altText}
                   widths={[400, 900]}
                   width={400}
                   sizes="(max-width: 900px) 400px, 900px"

package/components/WidgetSwiperPhotoSlider/types.ts

@@ -7,6 +7,7 @@ export type WidgetSwiperPhotoSliderProps = {
   isAfterContent?: boolean;
   withNavigation?: boolean;
   imagesFolder: string;
+  alt?: string;
   classes?: {
     container?: string;
     headline?: Record<string, string>;

package/components/ZoomedImage/ZoomedImage.astro

@@ -61,8 +61,8 @@ if (
           type="button"
           class={cn('zoom-bg block w-full h-full cursor-zoom-in')}
           tabindex="0"
-          style={`background-image: url('${image.src}')`}
           data-yt-zoom-button
+          data-yt-zoom-src={image.src}
         >
           <span>
             {!image ? (
@@ -170,6 +170,7 @@ if (
       span.classList.remove('zoom-wrap');
       zoomButton.classList.remove('cursor-zoom-out', 'bg-zoomed');
       zoomButton.classList.add('cursor-zoom-in');
+      zoomButton.style.backgroundImage = 'none';
       zoomButton.style.backgroundSize = '100%';
       zoomButton.style.backgroundPosition = '0% 0%';
 
@@ -194,6 +195,11 @@ if (
       zoomed = !zoomed;
 
       if (zoomed) {
+        // Set background-image only when zooming in
+        const zoomSrc = zoomButton.dataset.ytZoomSrc;
+        if (zoomSrc) {
+          zoomButton.style.backgroundImage = `url('${zoomSrc}')`;
+        }
         image.classList.add('hidden');
         span.classList.add('zoom-wrap');
         zoomButton.classList.add('cursor-zoom-out', 'bg-zoomed');

package/components/ZoomedImage/ZoomedImage.svelte

@@ -64,6 +64,7 @@
       if (zoomButtonRef) {
         zoomButtonRef.classList.remove('cursor-zoom-out', 'bg-zoomed');
         zoomButtonRef.classList.add('cursor-zoom-in');
+        zoomButtonRef.style.backgroundImage = 'none';
         zoomButtonRef.style.backgroundSize = '100%';
         zoomButtonRef.style.backgroundPosition = '0% 0%';
       }
@@ -87,6 +88,11 @@
         if (imageRef) imageRef.classList.add('hidden');
         if (spanRef) spanRef.classList.add('zoom-wrap');
         if (zoomButtonRef) {
+          // Set background-image only when zooming in
+          const zoomSrc = zoomButtonRef.dataset.ytZoomSrc;
+          if (zoomSrc) {
+            zoomButtonRef.style.backgroundImage = `url('${zoomSrc}')`;
+          }
           zoomButtonRef.classList.add('cursor-zoom-out', 'bg-zoomed');
           zoomButtonRef.classList.remove('cursor-zoom-in');
           zoomButtonRef.style.backgroundSize = '200%';
@@ -139,8 +145,8 @@
         type="button"
         class={cn('zoom-bg block w-full h-full cursor-zoom-in')}
         tabindex="0"
-        style={`background-image: url('${src}')`}
         data-yt-zoom-button
+        data-yt-zoom-src={src}
       >
         <span bind:this={spanRef}>
           <img

package/package.json

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

package/styles/styles.css

@@ -1055,6 +1055,10 @@
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
+  .border-4 {
+    border-style: var(--tw-border-style);
+    border-width: 4px;
+  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;

package/components/Button/__tests__/Button.test.ts

@@ -1,28 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { themeVariants } from '../theme-variants';
-
-describe('Button Theme Variants', () => {
-  it('has the correct default variant', () => {
-    const classes = themeVariants({ variant: 'default' });
-    expect(classes).toContain('bg-secondary');
-    expect(classes).toContain('text-secondary-foreground');
-  });
-
-  it('has the correct primary variant', () => {
-    const classes = themeVariants({ variant: 'primary' });
-    expect(classes).toContain('bg-primary');
-    expect(classes).toContain('text-primary-foreground');
-  });
-
-  it('has the correct size classes for default size', () => {
-    const classes = themeVariants({ size: 'default' });
-    expect(classes).toContain('px-6');
-    expect(classes).toContain('h-10');
-  });
-
-  it('has the correct size classes for small size', () => {
-    const classes = themeVariants({ size: 'sm' });
-    expect(classes).toContain('h-8');
-    expect(classes).toContain('px-4');
-  });
-});