@adia-ai/web-components 0.4.6 → 0.4.7

package/components/swiper/swiper.js

@@ -1,363 +1,17 @@
 /**
- * <swiper-ui autoplay interval="5000" peek>
- *   <img src="slide1.jpg" alt="Slide 1">
- *   <card-ui>...</card-ui>
- *   <div>Any content</div>
- * </swiper-ui>
+ * `<swiper-ui>` — auto-registers the tag on import.
  *
- * CSS-first carousel. Scroll-snap does all positioning.
- * JS handles: auto-advance, programmatic API, ARIA, paddles + dots.
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
  *
- * On connect, wraps user children into a [data-swiper-track] scroll
- * container so pagination dots can sit below (outside overflow).
+ *   import { UISwiper } from '@adia-ai/web-components/components/swiper/class';
  *
- * Pagination dots and prev/next paddles are JS-stamped on every
- * engine. Native ::scroll-marker / ::scroll-button are Chrome-135-only
- * with no Safari / Firefox roadmap; re-evaluate when cross-engine.
- *
- * Events:
- *   change         — { detail: { index, slide } }
- *   autoplay-pause — { detail: { reason } }
- *   autoplay-resume
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIElement } from '../../core/element.js';
-
-class UISwiper extends UIElement {
-  static properties = {
-    autoplay:          { type: Boolean, default: false, reflect: true },
-    interval:          { type: Number,  default: 5000,  reflect: true },
-    noPauseOnHover:    { type: Boolean, default: false, reflect: true, attribute: 'no-pause-on-hover' },
-    loop:              { type: Boolean, default: false, reflect: true },
-    peek:              { type: Boolean, default: false, reflect: true },
-    snap:              { type: String,  default: 'start', reflect: true },
-    gap:               { type: String,  default: '',    reflect: true },
-    slidesPerView:     { type: String,  default: '',    reflect: true, attribute: 'slides-per-view' },
-  };
-
-  static template = () => null;
-
-  #track = null;
-  #timer = null;
-  #observer = null;
-  #activeIndex = 0;
-  #bound = false;
-  #fallbackNav = false;
-  #drag = null; /* { pointerId, startX, startScrollLeft, hasMoved } */
-
-  get slides() {
-    if (!this.#track) return [];
-    return [...this.#track.children];
-  }
-
-  get activeIndex() { return this.#activeIndex; }
-
-  connected() {
-    // Wrap user children into a scroll track (once)
-    if (!this.#track) {
-      this.#track = document.createElement('div');
-      this.#track.setAttribute('data-swiper-track', '');
-
-      // Move all current children into the track
-      while (this.firstChild) {
-        this.#track.appendChild(this.firstChild);
-      }
-      this.appendChild(this.#track);
-    }
-
-    // ARIA
-    this.setAttribute('role', 'region');
-    this.setAttribute('aria-roledescription', 'carousel');
-    if (!this.getAttribute('aria-label')) {
-      this.setAttribute('aria-label', 'Carousel');
-    }
-
-    this.#labelSlides();
-    this.#setupObserver();
-    this.#setupFallbackNav();
-
-    if (!this.#bound) {
-      this.#bound = true;
-
-      // Pause on hover/focus (default on; suppress with [no-pause-on-hover])
-      if (!this.noPauseOnHover) {
-        this.addEventListener('pointerenter', this.#onPauseHover);
-        this.addEventListener('pointerleave', this.#onResumeHover);
-        this.addEventListener('focusin', this.#onPauseFocus);
-        this.addEventListener('focusout', this.#onResumeFocus);
-      }
-
-      // Keyboard navigation
-      this.addEventListener('keydown', this.#onKeydown);
-
-      // Click + drag (mouse / pen). Touch keeps native pan via scroll-snap.
-      this.#track.addEventListener('pointerdown', this.#onPointerDown);
-      this.#track.addEventListener('pointermove', this.#onPointerMove);
-      this.#track.addEventListener('pointerup',     this.#onPointerUp);
-      this.#track.addEventListener('pointercancel', this.#onPointerUp);
-      // Capture-phase click suppression so a drag-on-button doesn't activate it.
-      this.#track.addEventListener('click', this.#onClickCapture, true);
-    }
-
-    if (this.autoplay) this.play();
-  }
-
-  render() {
-    if (this.gap && this.#track) {
-      const space = `var(--a-space-${this.gap})`;
-      this.style.setProperty('--swiper-gap', space);
-    }
-  }
-
-  disconnected() {
-    this.pause();
-    this.#observer?.disconnect();
-    this.#observer = null;
-    this.removeEventListener('pointerenter', this.#onPauseHover);
-    this.removeEventListener('pointerleave', this.#onResumeHover);
-    this.removeEventListener('focusin', this.#onPauseFocus);
-    this.removeEventListener('focusout', this.#onResumeFocus);
-    this.removeEventListener('keydown', this.#onKeydown);
-    if (this.#track) {
-      this.#track.removeEventListener('pointerdown',   this.#onPointerDown);
-      this.#track.removeEventListener('pointermove',   this.#onPointerMove);
-      this.#track.removeEventListener('pointerup',     this.#onPointerUp);
-      this.#track.removeEventListener('pointercancel', this.#onPointerUp);
-      this.#track.removeEventListener('click',         this.#onClickCapture, true);
-    }
-    this.#drag = null;
-    this.#track = null;
-    this.#bound = false;
-  }
-
-  // ── Public API ──
-
-  next() {
-    const slides = this.slides;
-    const nextIndex = Math.min(this.#activeIndex + 1, slides.length - 1);
-    if (nextIndex !== this.#activeIndex || this.loop) {
-      this.goTo(this.loop && nextIndex === this.#activeIndex ? 0 : nextIndex);
-    }
-  }
-
-  prev() {
-    const slides = this.slides;
-    const prevIndex = Math.max(this.#activeIndex - 1, 0);
-    if (prevIndex !== this.#activeIndex || this.loop) {
-      this.goTo(this.loop && prevIndex === this.#activeIndex ? slides.length - 1 : prevIndex);
-    }
-  }
-
-  goTo(index) {
-    const slides = this.slides;
-    const slide = slides[index];
-    if (slide && this.#track) {
-      this.#track.scrollTo({ left: slide.offsetLeft - this.#track.offsetLeft, behavior: 'smooth' });
-    }
-  }
-
-  play() {
-    this.pause();
-    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
-
-    this.#timer = setInterval(() => {
-      const slides = this.slides;
-      const atEnd = this.#activeIndex >= slides.length - 1;
-      if (atEnd && this.loop) this.goTo(0);
-      else if (!atEnd) this.next();
-      else this.pause();
-    }, this.interval || 5000);
-  }
-
-  pause() {
-    if (this.#timer) {
-      clearInterval(this.#timer);
-      this.#timer = null;
-    }
-  }
-
-  // ── Internal ──
-
-  #labelSlides() {
-    const slides = this.slides;
-    slides.forEach((slide, i) => {
-      slide.setAttribute('role', 'group');
-      slide.setAttribute('aria-roledescription', 'slide');
-      if (!slide.getAttribute('aria-label')) {
-        slide.setAttribute('aria-label', `${i + 1} of ${slides.length}`);
-      }
-    });
-  }
-
-  #setupObserver() {
-    this.#observer = new IntersectionObserver(entries => {
-      for (const entry of entries) {
-        if (entry.isIntersecting && entry.intersectionRatio > 0.5) {
-          const slides = this.slides;
-          const index = slides.indexOf(entry.target);
-          if (index !== -1 && index !== this.#activeIndex) {
-            this.#activeIndex = index;
-            this.#updateFallbackDots();
-            this.dispatchEvent(new CustomEvent('change', {
-              bubbles: true,
-              detail: { index, slide: entry.target },
-            }));
-          }
-        }
-      }
-    }, { root: this.#track, threshold: 0.5 });
-
-    for (const slide of this.slides) {
-      this.#observer.observe(slide);
-    }
-  }
-
-  #setupFallbackNav() {
-    if (this.#fallbackNav) return;
-    this.#fallbackNav = true;
-
-    // Stamp prev/next paddles
-    const prev = document.createElement('button-ui');
-    prev.setAttribute('data-swiper-btn', '');
-    prev.setAttribute('data-swiper-prev', '');
-    prev.setAttribute('icon', 'caret-left');
-    prev.setAttribute('variant', 'ghost');
-    prev.setAttribute('aria-label', 'Previous slide');
-    prev.addEventListener('press', () => this.prev());
-
-    const next = document.createElement('button-ui');
-    next.setAttribute('data-swiper-btn', '');
-    next.setAttribute('data-swiper-next', '');
-    next.setAttribute('icon', 'caret-right');
-    next.setAttribute('variant', 'ghost');
-    next.setAttribute('aria-label', 'Next slide');
-    next.addEventListener('press', () => this.next());
-
-    this.appendChild(prev);
-    this.appendChild(next);
-
-    // Stamp pagination dots
-    const dots = document.createElement('div');
-    dots.setAttribute('data-swiper-dots', '');
-    dots.setAttribute('role', 'tablist');
-    dots.setAttribute('aria-label', 'Slide indicators');
-
-    this.slides.forEach((_, i) => {
-      const dot = document.createElement('button');
-      dot.setAttribute('role', 'tab');
-      dot.setAttribute('aria-label', `Slide ${i + 1}`);
-      if (i === 0) dot.setAttribute('aria-current', 'true');
-      dot.addEventListener('click', () => this.goTo(i));
-      dots.appendChild(dot);
-    });
-
-    this.appendChild(dots);
-  }
-
-  #updateFallbackDots() {
-    if (!this.#fallbackNav) return;
-    const dots = this.querySelector('[data-swiper-dots]');
-    if (!dots) return;
-    [...dots.children].forEach((dot, i) => {
-      dot.setAttribute('aria-current', i === this.#activeIndex ? 'true' : 'false');
-    });
-  }
-
-  // ── Event handlers ──
-
-  #onPauseHover = () => {
-    if (this.#timer) {
-      this.pause();
-      this.dispatchEvent(new CustomEvent('autoplay-pause', { bubbles: true, detail: { reason: 'hover' } }));
-    }
-  };
-
-  #onResumeHover = () => {
-    if (this.autoplay && !this.#timer) {
-      this.play();
-      this.dispatchEvent(new CustomEvent('autoplay-resume', { bubbles: true }));
-    }
-  };
-
-  #onPauseFocus = () => {
-    if (this.#timer) {
-      this.pause();
-      this.dispatchEvent(new CustomEvent('autoplay-pause', { bubbles: true, detail: { reason: 'focus' } }));
-    }
-  };
-
-  #onResumeFocus = (e) => {
-    if (this.autoplay && !this.contains(e.relatedTarget)) {
-      this.play();
-      this.dispatchEvent(new CustomEvent('autoplay-resume', { bubbles: true }));
-    }
-  };
-
-  #onKeydown = (e) => {
-    if (e.key === 'ArrowRight') { e.preventDefault(); this.next(); }
-    if (e.key === 'ArrowLeft') { e.preventDefault(); this.prev(); }
-  };
-
-  // ── Click + drag (mouse / pen) ──
-  // Native touch already scroll-pans the track; we only intercept mouse and
-  // pen so cursor users get the same swipe affordance as touch users.
-
-  #DRAG_THRESHOLD_PX = 5;
-
-  #onPointerDown = (e) => {
-    if (e.pointerType === 'touch') return;        /* native pan handles touch */
-    if (e.button !== 0) return;                   /* primary button only */
-    if (e.target.closest('button, button-ui, a, input, select, textarea')) return;
-    this.#drag = {
-      pointerId: e.pointerId,
-      startX: e.clientX,
-      startScrollLeft: this.#track.scrollLeft,
-      hasMoved: false,
-    };
-    /* Disable smooth scroll during drag so the bar tracks the pointer 1:1. */
-    this.#track.style.scrollBehavior = 'auto';
-    this.#track.setAttribute('data-dragging', '');
-  };
-
-  #onPointerMove = (e) => {
-    if (!this.#drag || e.pointerId !== this.#drag.pointerId) return;
-    const dx = e.clientX - this.#drag.startX;
-    if (Math.abs(dx) >= this.#DRAG_THRESHOLD_PX) {
-      if (!this.#drag.hasMoved) {
-        this.#drag.hasMoved = true;
-        /* Capture pointer so we keep tracking even if it leaves the track. */
-        try { this.#track.setPointerCapture(e.pointerId); } catch { /* noop */ }
-      }
-      this.#track.scrollLeft = this.#drag.startScrollLeft - dx;
-      e.preventDefault(); /* suppress text selection while dragging */
-    }
-  };
-
-  #onPointerUp = (e) => {
-    if (!this.#drag || e.pointerId !== this.#drag.pointerId) return;
-    const wasMoved = this.#drag.hasMoved;
-    if (wasMoved) {
-      try { this.#track.releasePointerCapture(e.pointerId); } catch { /* noop */ }
-    }
-    this.#drag = null;
-    /* Re-enable smooth scrolling; scroll-snap will glide to the nearest slide. */
-    this.#track.style.scrollBehavior = '';
-    this.#track.removeAttribute('data-dragging');
-    /* Ensure dragging stays "active" through the click event that follows
-       on the same gesture so #onClickCapture can suppress it. */
-    if (wasMoved) {
-      this.#track.setAttribute('data-just-dragged', '');
-      requestAnimationFrame(() => this.#track?.removeAttribute('data-just-dragged'));
-    }
-  };
+import { defineIfFree } from '../../core/register.js';
+import { UISwiper } from './class.js';
 
-  #onClickCapture = (e) => {
-    if (this.#track?.hasAttribute('data-just-dragged')) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  };
-}
+defineIfFree('swiper-ui', UISwiper);
 
-customElements.define('swiper-ui', UISwiper);
 export { UISwiper };

package/components/swiper/swiper.yaml

@@ -1,5 +1,3 @@
-# Generated by scripts/migrate-yamls-to-v1.mjs — migrated to v1 contract.
-# Edit this file; run `npm run build:components` to regenerate a2ui.json.
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UISwiper
 tag: swiper-ui
@@ -15,17 +13,21 @@ props:
   slidesPerView:
     description: Number of slides visible at once. Accepts "1", "2", "3", or "auto". Empty = CSS default (single slide).
     type: string
-    default: ""
+    default: ''
     attribute: slides-per-view
   snap:
     description: Scroll-snap alignment — start, center, end, or none.
     type: string
     default: start
-    enum: [start, center, end, none]
+    enum:
+    - start
+    - center
+    - end
+    - none
   gap:
-    description: "Gap between slides (token: sm, md, lg)"
+    description: 'Gap between slides (token: sm, md, lg)'
     type: string
-    default: ""
+    default: ''
   interval:
     description: Autoplay interval in ms
     type: number
@@ -46,225 +48,79 @@ props:
     default: false
 events:
   autoplay-pause:
-    description: "Fired on autoplay-pause."
+    description: Fired on autoplay-pause.
   autoplay-resume:
-    description: "Fired on autoplay-resume."
+    description: Fired on autoplay-resume.
   change:
-    description: "Fired when the active slide changes. Detail: { index, slide }."
+    description: 'Fired when the active slide changes. Detail: { index, slide }.'
 slots:
   default:
-    description: "Default slot — primary child content."
+    description: Default slot — primary child content.
 states:
-  - name: idle
-    description: Default, ready for interaction.
+- name: idle
+  description: Default, ready for interaction.
 traits: []
 tokens: {}
 a2ui:
   rules: []
 anti_patterns: []
 examples:
-  - name: image-carousel
-    description: Basic image carousel with 3 slides
-    a2ui: >-
-      [
-        {
-          "id": "root",
-          "component": "Card",
-          "children": [
-            "hdr",
-            "sec"
-          ]
-        },
-        {
-          "id": "hdr",
-          "component": "Header",
-          "children": [
-            "title"
-          ]
-        },
-        {
-          "id": "title",
-          "component": "Text",
-          "slot": "heading",
-          "variant": "section",
-          "textContent": "Photo Gallery"
-        },
-        {
-          "id": "sec",
-          "component": "Section",
-          "children": [
-            "carousel"
-          ]
-        },
-        {
-          "id": "carousel",
-          "component": "Swiper",
-          "children": [
-            "s1",
-            "s2",
-            "s3"
-          ],
-          "gap": "md"
-        },
-        {
-          "id": "s1",
-          "component": "Image",
-          "src": "/images/photo-1.jpg",
-          "alt": "Mountain landscape"
-        },
-        {
-          "id": "s2",
-          "component": "Image",
-          "src": "/images/photo-2.jpg",
-          "alt": "Ocean sunset"
-        },
-        {
-          "id": "s3",
-          "component": "Image",
-          "src": "/images/photo-3.jpg",
-          "alt": "Forest trail"
-        }
-      ]
-  - name: product-showcase
-    description: Product cards in a peek carousel with autoplay
-    a2ui: >-
-      [
-        {
-          "id": "root",
-          "component": "Swiper",
-          "children": [
-            "p1",
-            "p2",
-            "p3"
-          ],
-          "peek": true,
-          "slides-per-view": "3",
-          "gap": "md",
-          "autoplay": true,
-          "interval": "5000"
-        },
-        {
-          "id": "p1",
-          "component": "Card",
-          "children": [
-            "p1-sec"
-          ]
-        },
-        {
-          "id": "p1-sec",
-          "component": "Section",
-          "children": [
-            "p1-img",
-            "p1-name",
-            "p1-price"
-          ]
-        },
-        {
-          "id": "p1-img",
-          "component": "Image",
-          "src": "/images/product-1.jpg",
-          "alt": "Wireless headphones"
-        },
-        {
-          "id": "p1-name",
-          "component": "Text",
-          "variant": "label",
-          "textContent": "Wireless Headphones"
-        },
-        {
-          "id": "p1-price",
-          "component": "Text",
-          "variant": "metric",
-          "textContent": "$79.99"
-        },
-        {
-          "id": "p2",
-          "component": "Card",
-          "children": [
-            "p2-sec"
-          ]
-        },
-        {
-          "id": "p2-sec",
-          "component": "Section",
-          "children": [
-            "p2-img",
-            "p2-name",
-            "p2-price"
-          ]
-        },
-        {
-          "id": "p2-img",
-          "component": "Image",
-          "src": "/images/product-2.jpg",
-          "alt": "Smart watch"
-        },
-        {
-          "id": "p2-name",
-          "component": "Text",
-          "variant": "label",
-          "textContent": "Smart Watch"
-        },
-        {
-          "id": "p2-price",
-          "component": "Text",
-          "variant": "metric",
-          "textContent": "$199.99"
-        },
-        {
-          "id": "p3",
-          "component": "Card",
-          "children": [
-            "p3-sec"
-          ]
-        },
-        {
-          "id": "p3-sec",
-          "component": "Section",
-          "children": [
-            "p3-img",
-            "p3-name",
-            "p3-price"
-          ]
-        },
-        {
-          "id": "p3-img",
-          "component": "Image",
-          "src": "/images/product-3.jpg",
-          "alt": "Bluetooth speaker"
-        },
-        {
-          "id": "p3-name",
-          "component": "Text",
-          "variant": "label",
-          "textContent": "Bluetooth Speaker"
-        },
-        {
-          "id": "p3-price",
-          "component": "Text",
-          "variant": "metric",
-          "textContent": "$49.99"
-        }
-      ]
+- name: image-carousel
+  description: Basic image carousel with 3 slides
+  a2ui: "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"hdr\",\n      \"sec\"\n\
+    \    ]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"title\"\n    ]\n\
+    \  },\n  {\n    \"id\": \"title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"variant\": \"section\"\
+    ,\n    \"textContent\": \"Photo Gallery\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\"\
+    : [\n      \"carousel\"\n    ]\n  },\n  {\n    \"id\": \"carousel\",\n    \"component\": \"Swiper\",\n    \"children\"\
+    : [\n      \"s1\",\n      \"s2\",\n      \"s3\"\n    ],\n    \"gap\": \"md\"\n  },\n  {\n    \"id\": \"s1\",\n    \"component\"\
+    : \"Image\",\n    \"src\": \"/images/photo-1.jpg\",\n    \"alt\": \"Mountain landscape\"\n  },\n  {\n    \"id\": \"s2\"\
+    ,\n    \"component\": \"Image\",\n    \"src\": \"/images/photo-2.jpg\",\n    \"alt\": \"Ocean sunset\"\n  },\n  {\n  \
+    \  \"id\": \"s3\",\n    \"component\": \"Image\",\n    \"src\": \"/images/photo-3.jpg\",\n    \"alt\": \"Forest trail\"\
+    \n  }\n]"
+- name: product-showcase
+  description: Product cards in a peek carousel with autoplay
+  a2ui: "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Swiper\",\n    \"children\": [\n      \"p1\",\n      \"p2\",\n\
+    \      \"p3\"\n    ],\n    \"peek\": true,\n    \"slides-per-view\": \"3\",\n    \"gap\": \"md\",\n    \"autoplay\": true,\n\
+    \    \"interval\": \"5000\"\n  },\n  {\n    \"id\": \"p1\",\n    \"component\": \"Card\",\n    \"children\": [\n     \
+    \ \"p1-sec\"\n    ]\n  },\n  {\n    \"id\": \"p1-sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"\
+    p1-img\",\n      \"p1-name\",\n      \"p1-price\"\n    ]\n  },\n  {\n    \"id\": \"p1-img\",\n    \"component\": \"Image\"\
+    ,\n    \"src\": \"/images/product-1.jpg\",\n    \"alt\": \"Wireless headphones\"\n  },\n  {\n    \"id\": \"p1-name\",\n\
+    \    \"component\": \"Text\",\n    \"variant\": \"label\",\n    \"textContent\": \"Wireless Headphones\"\n  },\n  {\n\
+    \    \"id\": \"p1-price\",\n    \"component\": \"Text\",\n    \"variant\": \"metric\",\n    \"textContent\": \"$79.99\"\
+    \n  },\n  {\n    \"id\": \"p2\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"p2-sec\"\n    ]\n  },\n \
+    \ {\n    \"id\": \"p2-sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"p2-img\",\n      \"p2-name\"\
+    ,\n      \"p2-price\"\n    ]\n  },\n  {\n    \"id\": \"p2-img\",\n    \"component\": \"Image\",\n    \"src\": \"/images/product-2.jpg\"\
+    ,\n    \"alt\": \"Smart watch\"\n  },\n  {\n    \"id\": \"p2-name\",\n    \"component\": \"Text\",\n    \"variant\": \"\
+    label\",\n    \"textContent\": \"Smart Watch\"\n  },\n  {\n    \"id\": \"p2-price\",\n    \"component\": \"Text\",\n \
+    \   \"variant\": \"metric\",\n    \"textContent\": \"$199.99\"\n  },\n  {\n    \"id\": \"p3\",\n    \"component\": \"\
+    Card\",\n    \"children\": [\n      \"p3-sec\"\n    ]\n  },\n  {\n    \"id\": \"p3-sec\",\n    \"component\": \"Section\"\
+    ,\n    \"children\": [\n      \"p3-img\",\n      \"p3-name\",\n      \"p3-price\"\n    ]\n  },\n  {\n    \"id\": \"p3-img\"\
+    ,\n    \"component\": \"Image\",\n    \"src\": \"/images/product-3.jpg\",\n    \"alt\": \"Bluetooth speaker\"\n  },\n\
+    \  {\n    \"id\": \"p3-name\",\n    \"component\": \"Text\",\n    \"variant\": \"label\",\n    \"textContent\": \"Bluetooth\
+    \ Speaker\"\n  },\n  {\n    \"id\": \"p3-price\",\n    \"component\": \"Text\",\n    \"variant\": \"metric\",\n    \"\
+    textContent\": \"$49.99\"\n  }\n]"
 keywords:
-  - carousel
-  - slider
-  - slideshow
-  - slides
-  - gallery
-  - banner
-  - swiper
+- carousel
+- slider
+- slideshow
+- slides
+- gallery
+- banner
+- swiper
 synonyms:
   carousel:
-    - swiper
-    - slide
-    - gallery
-    - banner
+  - swiper
+  - slide
+  - gallery
+  - banner
   slideshow:
-    - swiper
-    - carousel
-    - slide
+  - swiper
+  - carousel
+  - slide
+  tags:
+  - Slideshow
+  - Carousel
 related:
-  - image-gallery
-  - hero-section
-  - product-card
+- image-gallery
+- hero-section
+- product-card