@adia-ai/web-components 0.0.1

package/components/swiper/swiper.css

@@ -0,0 +1,267 @@
+/* ═══════════════════════════════════════════════════════════════
+   SWIPER-N — CSS-first carousel
+   Scroll-snap positioning, native ::scroll-marker dots,
+   ::scroll-button prev/next, container-query responsive.
+
+   Structure (JS-stamped):
+     swiper-ui                    ← flex column wrapper
+       [data-swiper-track]       ← grid scroll container
+         <slide children>
+       [data-swiper-dots]        ← pagination dots (below track)
+       [data-swiper-btn prev]    ← absolute left paddle
+       [data-swiper-btn next]    ← absolute right paddle
+   ═══════════════════════════════════════════════════════════════ */
+
+@scope (swiper-ui) {
+  :where(:scope) {
+    /* ── Layout ── */
+    --swiper-gap:           var(--a-gap);
+    --swiper-peek:          var(--a-space-8);
+    --swiper-snap:          start;
+    --swiper-columns:       1;
+
+    /* ── Pagination dots ── */
+    /* Component-intrinsic visual constant; no --a-space-* equivalent */
+    --swiper-dot-size:      6px;
+    --swiper-dot-gap:       var(--a-space-2);
+    --swiper-dot-bg:        var(--a-border);
+    --swiper-dot-bg-active: var(--a-fg);
+    --swiper-dot-radius:    var(--a-radius-full);
+
+    /* ── Host vertical rhythm ── */
+    --swiper-gap-vertical:  var(--a-space-3);
+
+    /* ── Native scroll-marker group padding ── */
+    --swiper-marker-group-py: var(--a-space-3);
+
+    /* ── Paddle bottom offset ── */
+    --swiper-btn-bottom:    var(--a-space-3);
+
+    /* ── Autoplay pause button offset ── */
+    --swiper-pause-top:     var(--a-space-2);
+    --swiper-pause-right:   var(--a-space-2);
+
+    /* ── Paddles ── */
+    --swiper-btn-size:      3rem;
+    --swiper-btn-bg:        transparent;
+    --swiper-btn-bg-hover:  var(--a-bg-muted);
+    --swiper-btn-fg:        var(--a-fg);
+    --swiper-btn-radius:    var(--a-radius-full);
+    --swiper-btn-shadow:    none;
+    --swiper-btn-offset:    var(--a-space-2);
+
+    /* ── Motion ── */
+    --swiper-duration:      var(--a-duration);
+    --swiper-easing:        var(--a-easing);
+  }
+
+  /* ── Host: flex column so dots sit below the scroll track ── */
+
+  :scope {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--swiper-gap-vertical);
+    width: 100%;
+    position: relative;
+  }
+
+  /* ── Scroll track (JS wraps slides into this) ── */
+
+  :scope > [data-swiper-track] {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: calc(
+      (100% - (var(--swiper-columns) - 1) * var(--swiper-gap)) / var(--swiper-columns)
+    );
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-snap-type: x mandatory;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+    gap: var(--swiper-gap);
+    container-type: inline-size;
+  }
+
+  :scope > [data-swiper-track]::-webkit-scrollbar { display: none; }
+
+  /* ── Slides ── */
+
+  :scope > [data-swiper-track] > * {
+    scroll-snap-align: var(--swiper-snap);
+    scroll-snap-stop: always;
+    min-width: 0;
+  }
+
+  /* ── Snap alignment ── */
+
+  :scope[snap="center"] { --swiper-snap: center; }
+  :scope[snap="end"]    { --swiper-snap: end; }
+
+  /* ── Peek: show partial adjacent slides ── */
+
+  :scope[peek] > [data-swiper-track] {
+    padding-inline: var(--swiper-peek);
+    scroll-padding-inline: var(--swiper-peek);
+  }
+
+  /* ── Explicit slides-per-view ── */
+
+  :scope[slides-per-view="1"] { --swiper-columns: 1; }
+  :scope[slides-per-view="2"] { --swiper-columns: 2; }
+  :scope[slides-per-view="3"] { --swiper-columns: 3; }
+  :scope[slides-per-view="4"] { --swiper-columns: 4; }
+
+  /* ── Responsive auto (container queries) ── */
+
+  :scope:not([slides-per-view]) {
+    --swiper-columns: 1;
+  }
+
+  @container (min-width: 640px) {
+    :scope:not([slides-per-view]) { --swiper-columns: 2; }
+  }
+
+  @container (min-width: 960px) {
+    :scope:not([slides-per-view]) { --swiper-columns: 3; }
+  }
+
+  /* ── Native scroll markers (Chrome 135+) ── */
+
+  :scope > [data-swiper-track]::scroll-marker-group {
+    display: flex;
+    gap: var(--swiper-dot-gap);
+    justify-content: center;
+    padding-block: var(--swiper-marker-group-py);
+    position: sticky;
+    bottom: 0;
+    align-self: end;
+    grid-column: 1 / -1;
+  }
+
+  :scope > [data-swiper-track] > *::scroll-marker {
+    content: '';
+    width: var(--swiper-dot-size);
+    height: var(--swiper-dot-size);
+    border-radius: var(--swiper-dot-radius);
+    background: var(--swiper-dot-bg);
+    border: none;
+    cursor: pointer;
+    transition: background var(--swiper-duration) var(--swiper-easing),
+                transform var(--swiper-duration) var(--swiper-easing);
+  }
+
+  :scope > [data-swiper-track] > *::scroll-marker:target-current {
+    background: var(--swiper-dot-bg-active);
+  }
+
+  /* ── Native scroll buttons (Chrome 135+) ──
+     Disabled — we always stamp JS paddles for consistent
+     cross-browser appearance. Uncomment to use native instead. */
+
+  /*
+  :scope > [data-swiper-track]::scroll-button(inline-start),
+  :scope > [data-swiper-track]::scroll-button(inline-end) {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: var(--swiper-btn-size);
+    height: var(--swiper-btn-size);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--swiper-btn-radius);
+    background: var(--swiper-btn-bg);
+    color: var(--swiper-btn-fg);
+    border: none;
+    box-shadow: var(--swiper-btn-shadow);
+    cursor: pointer;
+    z-index: 2;
+    font-size: 1.25em;
+    transition: background var(--swiper-duration) var(--swiper-easing),
+                opacity var(--swiper-duration) var(--swiper-easing);
+  }
+
+  :scope > [data-swiper-track]::scroll-button(inline-start) { content: '\2039'; left: var(--swiper-btn-offset); }
+  :scope > [data-swiper-track]::scroll-button(inline-end)   { content: '\203A'; right: var(--swiper-btn-offset); }
+
+  :scope > [data-swiper-track]::scroll-button(inline-start):hover,
+  :scope > [data-swiper-track]::scroll-button(inline-end):hover {
+    background: var(--swiper-btn-bg-hover);
+  }
+
+  :scope > [data-swiper-track]::scroll-button(inline-start):disabled,
+  :scope > [data-swiper-track]::scroll-button(inline-end):disabled {
+    opacity: 0;
+    pointer-events: none;
+  }
+  */
+
+  /* ══════════════════════════════════════════════════════════
+     JS-stamped fallback paddles
+     Centered vertically on the track area only.
+     ══════════════════════════════════════════════════════════ */
+
+  :scope > [data-swiper-btn] {
+    position: absolute;
+    top: 0;
+    bottom: var(--swiper-btn-bottom);
+    margin-block: auto;
+    height: fit-content;
+    z-index: 2;
+    --button-size: var(--swiper-btn-size);
+    --button-radius: var(--swiper-btn-radius);
+  }
+
+  :scope > [data-swiper-prev] { left: var(--swiper-btn-offset); }
+  :scope > [data-swiper-next] { right: var(--swiper-btn-offset); }
+
+  /* ══════════════════════════════════════════════════════════
+     JS-stamped pagination dots
+     Normal flow below the track — not inside the scroll area.
+     ══════════════════════════════════════════════════════════ */
+
+  :scope > [data-swiper-dots] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--swiper-dot-gap);
+    min-height: 1.5rem;
+  }
+
+  :scope > [data-swiper-dots] > button {
+    width: var(--swiper-dot-size);
+    height: var(--swiper-dot-size);
+    border-radius: var(--swiper-dot-radius);
+    background: var(--swiper-dot-bg);
+    border: none;
+    padding: calc((1rem - var(--swiper-dot-size)) / 2);
+    background-clip: content-box;
+    box-sizing: content-box;
+    cursor: pointer;
+    transition: background var(--swiper-duration) var(--swiper-easing),
+                transform var(--swiper-duration) var(--swiper-easing);
+  }
+
+  :scope > [data-swiper-dots] > button[aria-current="true"] {
+    background: var(--swiper-dot-bg-active);
+  }
+
+  /* ── Autoplay indicator ── */
+
+  :scope[autoplay] > [data-swiper-pause] {
+    position: absolute;
+    top: var(--swiper-pause-top);
+    right: var(--swiper-pause-right);
+    z-index: 1;
+  }
+
+  /* ── Reduced motion ── */
+
+  @media (prefers-reduced-motion: reduce) {
+    :scope > [data-swiper-track] {
+      scroll-behavior: auto;
+    }
+  }
+}

package/components/swiper/swiper.js

@@ -0,0 +1,285 @@
+/**
+ * <swiper-ui autoplay interval="5000" peek>
+ *   <img src="slide1.jpg" alt="Slide 1">
+ *   <card-ui>...</card-ui>
+ *   <div>Any content</div>
+ * </swiper-ui>
+ *
+ * CSS-first carousel. Scroll-snap does all positioning.
+ * JS handles: auto-advance, programmatic API, ARIA, fallback nav.
+ *
+ * On connect, wraps user children into a [data-swiper-track] scroll
+ * container so pagination dots can sit below (outside overflow).
+ *
+ * Native ::scroll-marker / ::scroll-button in Chrome 135+.
+ * JS-stamped button-ui fallback + dots in other browsers.
+ *
+ * Events:
+ *   slide-change   — { detail: { index, slide } }
+ *   autoplay-pause — { detail: { reason } }
+ *   autoplay-resume
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+class AdiaSwiper extends AdiaElement {
+  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 },
+    'slides-per-view': { type: String,  default: '',    reflect: true },
+  };
+
+  static template = () => null;
+
+  #track = null;
+  #timer = null;
+  #observer = null;
+  #activeIndex = 0;
+  #bound = false;
+  #fallbackNav = false;
+
+  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);
+    }
+
+    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);
+    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('slide-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(); }
+  };
+}
+
+customElements.define('swiper-ui', AdiaSwiper);
+export { AdiaSwiper };