@reliability-design/web 1.0.6 → 1.2.0

package/dist/components/rel-carousel/rel-carousel.ts

@@ -1,469 +1,596 @@
-import { LitElement, html, css, nothing } from "lit";
-import { customElement, property, state, query } from "lit/decorators.js";
-
-@customElement("rel-carousel")
-export class RelCarousel extends LitElement {
-  @property({ type: Number, reflect: true }) value = 0;
-  @property({ type: Boolean }) loop = false;
-  @property({ type: Boolean }) autoplay = false;
-  @property({ type: Number }) interval = 5000;
-  @property({ type: Boolean, attribute: "pause-on-hover" }) pauseOnHover = true;
-  @property({ type: Boolean, attribute: "show-buttons" }) showButtons = true;
-  @property({ type: Boolean, attribute: "show-dots" }) showDots = true;
-  @property({ type: String }) orientation: "horizontal" | "vertical" = "horizontal";
-  @property({ type: String }) align: "start" | "center" | "end" = "center";
-  @property({ type: Number, attribute: "slides-per-view" }) slidesPerView = 1;
-  @property({ type: Number }) gap?: number;
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  @state() private slideCount = 0;
-  @state() private isDragging = false;
-  @state() private dragStartX = 0;
-  @state() private currentTranslate = 0;
-  @state() private prevTranslate = 0;
-
-  @query(".viewport") private viewport?: HTMLElement;
-  @query(".track") private track?: HTMLElement;
-  @query("slot") private slotElement?: HTMLSlotElement;
-
-  private autoplayTimer?: number;
-  private animationId?: number;
-  private prefersReducedMotion = false;
-
-  static styles = css`
-    :host {
-      display: block;
-      font-family: var(--rel-fontFamilies-primary);
-      position: relative;
-      user-select: none;
-    }
-
-    :host([disabled]) {
-      opacity: 0.6;
-      pointer-events: none;
-    }
-
-    .viewport {
-      overflow: hidden;
-      position: relative;
-      width: 100%;
-    }
-
-    .track {
-      display: flex;
-      transition: transform 0.3s ease-out;
-      will-change: transform;
-    }
-
-    .track.dragging {
-      transition: none;
-    }
-
-    .track.no-transition {
-      transition: none;
-    }
-
-    ::slotted(*) {
-      flex: 0 0 100%;
-      min-width: 0;
-    }
-
-    /* Navigation buttons */
-    .nav-button {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      z-index: 10;
-      width: 40px;
-      height: 40px;
-      border-radius: 50%;
-      border: 1px solid var(--rel-border-default);
-      background: var(--rel-colors-white);
-      color: var(--rel-colors-gray-primary);
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: all 0.15s ease;
-      box-shadow: var(--rel-shadows-shadow-100);
-    }
-
-    .nav-button:hover:not(:disabled) {
-      background: var(--rel-surface-secondary);
-    }
-
-    .nav-button:focus-visible {
-      outline: 2px solid var(--rel-colors-blue-primary);
-      outline-offset: 2px;
-    }
-
-    .nav-button:disabled {
-      opacity: 0.4;
-      cursor: not-allowed;
-    }
-
-    .nav-button.prev {
-      left: 12px;
-    }
-
-    .nav-button.next {
-      right: 12px;
-    }
-
-    .nav-button svg {
-      width: 20px;
-      height: 20px;
-    }
-
-    /* Dots indicator */
-    .dots {
-      display: flex;
-      justify-content: center;
-      gap: var(--rel-spacing-space-xs);
-      margin-top: var(--rel-spacing-space-md);
-    }
-
-    .dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      border: none;
-      background: var(--rel-colors-gray-border);
-      cursor: pointer;
-      padding: 0;
-      transition: all 0.15s ease;
-    }
-
-    .dot:hover {
-      background: var(--rel-colors-gray-divider);
-    }
-
-    .dot.active {
-      background: var(--rel-colors-green-primary);
-      width: 24px;
-      border-radius: 4px;
-    }
-
-    .dot:focus-visible {
-      outline: 2px solid var(--rel-colors-blue-primary);
-      outline-offset: 2px;
-    }
-
-    /* Reduced motion support */
-    @media (prefers-reduced-motion: reduce) {
-      .track {
-        transition: none;
-      }
-    }
-  `;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.prefersReducedMotion = window.matchMedia(
-      "(prefers-reduced-motion: reduce)"
-    ).matches;
-
-    if (this.autoplay) {
-      this.startAutoplay();
-    }
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.stopAutoplay();
-    if (this.animationId) {
-      cancelAnimationFrame(this.animationId);
-    }
-  }
-
-  private handleSlotChange() {
-    const slot = this.slotElement;
-    if (!slot) return;
-
-    const elements = slot.assignedElements();
-    this.slideCount = elements.length;
-
-    // Ensure value is within bounds
-    if (this.value >= this.slideCount) {
-      this.value = this.slideCount - 1;
-    }
-    if (this.value < 0) {
-      this.value = 0;
-    }
-
-    this.updateTransform();
-  }
-
-  private updateTransform() {
-    if (!this.track || !this.viewport) return;
-
-    const slideWidth = this.viewport.offsetWidth;
-    const gapValue = this.gap ?? 0;
-    const translate = -(this.value * (slideWidth + gapValue));
-
-    this.currentTranslate = translate;
-    this.prevTranslate = translate;
-    this.track.style.transform = `translateX(${translate}px)`;
-
-    if (this.gap) {
-      this.track.style.gap = `${this.gap}px`;
-    } else {
-      this.track.style.gap = "";
-    }
-  }
-
-  private goToPrevious() {
-    if (this.disabled) return;
-
-    if (this.value > 0) {
-      this.value--;
-    } else if (this.loop) {
-      this.value = this.slideCount - 1;
-    }
-
-    this.updateTransform();
-    this.emitChange();
-  }
-
-  private goToNext() {
-    if (this.disabled) return;
-
-    if (this.value < this.slideCount - 1) {
-      this.value++;
-    } else if (this.loop) {
-      this.value = 0;
-    }
-
-    this.updateTransform();
-    this.emitChange();
-  }
-
-  private goToSlide(index: number) {
-    if (this.disabled || index < 0 || index >= this.slideCount) return;
-
-    this.value = index;
-    this.updateTransform();
-    this.emitChange();
-  }
-
-  private emitChange() {
-    this.dispatchEvent(
-      new CustomEvent("rel-change", {
-        detail: { value: this.value },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  private startAutoplay() {
-    if (!this.autoplay || this.disabled) return;
-
-    this.stopAutoplay();
-    this.autoplayTimer = window.setInterval(() => {
-      this.goToNext();
-    }, this.interval);
-  }
-
-  private stopAutoplay() {
-    if (this.autoplayTimer) {
-      clearInterval(this.autoplayTimer);
-      this.autoplayTimer = undefined;
-    }
-  }
-
-  private handlePointerDown(e: PointerEvent) {
-    if (this.disabled || !this.track) return;
-
-    this.isDragging = true;
-    this.dragStartX = e.clientX;
-    this.prevTranslate = this.currentTranslate;
-
-    this.track.classList.add("dragging");
-
-    if (this.autoplay && this.pauseOnHover) {
-      this.stopAutoplay();
-    }
-
-    e.preventDefault();
-  }
-
-  private handlePointerMove(e: PointerEvent) {
-    if (!this.isDragging || !this.track) return;
-
-    const currentX = e.clientX;
-    const deltaX = currentX - this.dragStartX;
-    this.currentTranslate = this.prevTranslate + deltaX;
-
-    if (!this.prefersReducedMotion && this.animationId) {
-      cancelAnimationFrame(this.animationId);
-    }
-
-    this.animationId = requestAnimationFrame(() => {
-      if (this.track) {
-        this.track.style.transform = `translateX(${this.currentTranslate}px)`;
-      }
-    });
-  }
-
-  private handlePointerUp(e: PointerEvent) {
-    if (!this.isDragging || !this.track || !this.viewport) return;
-
-    this.isDragging = false;
-    this.track.classList.remove("dragging");
-
-    const deltaX = e.clientX - this.dragStartX;
-    const slideWidth = this.viewport.offsetWidth;
-    const threshold = slideWidth * 0.2; // 20% threshold
-
-    if (Math.abs(deltaX) > threshold) {
-      if (deltaX > 0 && (this.value > 0 || this.loop)) {
-        this.goToPrevious();
-      } else if (deltaX < 0 && (this.value < this.slideCount - 1 || this.loop)) {
-        this.goToNext();
-      } else {
-        this.updateTransform();
-      }
-    } else {
-      this.updateTransform();
-    }
-
-    if (this.autoplay) {
-      this.startAutoplay();
-    }
-  }
-
-  private handleKeyDown(e: KeyboardEvent) {
-    if (this.disabled) return;
-
-    switch (e.key) {
-      case "ArrowLeft":
-        e.preventDefault();
-        this.goToPrevious();
-        break;
-      case "ArrowRight":
-        e.preventDefault();
-        this.goToNext();
-        break;
-      case "Home":
-        e.preventDefault();
-        this.goToSlide(0);
-        break;
-      case "End":
-        e.preventDefault();
-        this.goToSlide(this.slideCount - 1);
-        break;
-    }
-  }
-
-  private handleMouseEnter() {
-    if (this.autoplay && this.pauseOnHover) {
-      this.stopAutoplay();
-    }
-  }
-
-  private handleMouseLeave() {
-    if (this.autoplay && this.pauseOnHover) {
-      this.startAutoplay();
-    }
-  }
-
-  updated(changedProperties: Map<string, any>) {
-    if (changedProperties.has("autoplay") || changedProperties.has("interval")) {
-      if (this.autoplay) {
-        this.startAutoplay();
-      } else {
-        this.stopAutoplay();
-      }
-    }
-
-    if (changedProperties.has("value")) {
-      this.updateTransform();
-    }
-  }
-
-  render() {
-    const canGoPrev = this.loop || this.value > 0;
-    const canGoNext = this.loop || this.value < this.slideCount - 1;
-
-    return html`
-      <div
-        class="viewport"
-        part="viewport"
-        role="region"
-        aria-roledescription="carousel"
-        aria-label="Carousel"
-        @keydown=${this.handleKeyDown}
-        @mouseenter=${this.handleMouseEnter}
-        @mouseleave=${this.handleMouseLeave}
-        tabindex="0"
-      >
-        <div
-          class="track"
-          part="track"
-          @pointerdown=${this.handlePointerDown}
-          @pointermove=${this.handlePointerMove}
-          @pointerup=${this.handlePointerUp}
-          @pointercancel=${this.handlePointerUp}
-        >
-          <slot @slotchange=${this.handleSlotChange}></slot>
-        </div>
-
-        ${this.showButtons
-          ? html`
-              <button
-                class="nav-button prev"
-                part="prev-button"
-                aria-label="Previous slide"
-                ?disabled=${!canGoPrev || this.disabled}
-                @click=${this.goToPrevious}
-              >
-                <svg viewBox="0 0 16 16" fill="none">
-                  <path
-                    d="M10 12L6 8L10 4"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  />
-                </svg>
-              </button>
-
-              <button
-                class="nav-button next"
-                part="next-button"
-                aria-label="Next slide"
-                ?disabled=${!canGoNext || this.disabled}
-                @click=${this.goToNext}
-              >
-                <svg viewBox="0 0 16 16" fill="none">
-                  <path
-                    d="M6 4L10 8L6 12"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  />
-                </svg>
-              </button>
-            `
-          : nothing}
-      </div>
-
-      ${this.showDots && this.slideCount > 1
-        ? html`
-            <div class="dots" part="dots">
-              ${Array.from({ length: this.slideCount }, (_, i) => html`
-                <button
-                  class="dot ${i === this.value ? "active" : ""}"
-                  part="dot"
-                  aria-label="Go to slide ${i + 1}"
-                  @click=${() => this.goToSlide(i)}
-                ></button>
-              `)}
-            </div>
-          `
-        : nothing}
-    `;
-  }
-}
+import { LitElement, html, css, nothing } from "lit";
+import { customElement, property, state, query } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
+
+@customElement("rel-carousel")
+export class RelCarousel extends LitElement {
+  @property({ type: Number, reflect: true }) value = 0;
+  @property({ type: Boolean }) loop = false;
+  @property({ type: Boolean }) autoplay = false;
+  @property({ type: Number }) interval = 5000;
+  @property({ type: Boolean, attribute: "pause-on-hover" }) pauseOnHover = true;
+  @property({ type: Boolean, attribute: "show-buttons" }) showButtons = false;
+  @property({ type: Boolean, attribute: "show-dots" }) showDots = false;
+  @property({ type: String }) orientation: "horizontal" | "vertical" = "horizontal";
+  @property({ type: String }) label: string = "Carousel";
+  @property({ type: Number }) gap?: number;
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  @state() private slideCount = 0;
+  @state() private isDragging = false;
+  @state() private dragStartX = 0;
+  @state() private currentTranslate = 0;
+  @state() private prevTranslate = 0;
+
+  @query(".viewport") private viewport?: HTMLElement;
+  @query(".track") private track?: HTMLElement;
+  @query("slot") private slotElement?: HTMLSlotElement;
+
+  private autoplayTimer?: number;
+  private animationId?: number;
+  private prefersReducedMotion = false;
+  // Number of clone slides prepended before the real slides
+  private clonesBefore = 0;
+  private _silentJumping = false;
+  private _ro?: ResizeObserver;
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--rel-fontFamilies-primary);
+      position: relative;
+      user-select: none;
+    }
+
+    :host([disabled]) {
+      opacity: 0.6;
+      pointer-events: none;
+      cursor: not-allowed;
+    }
+
+    .viewport {
+      overflow: hidden;
+      position: relative;
+      width: 100%;
+      display: block;
+    }
+
+    .track {
+      display: flex;
+      width: 100%;
+      transition: transform 0.3s ease-out;
+      will-change: transform;
+    }
+
+    .track.dragging {
+      transition: none;
+    }
+
+    .track.no-transition {
+      transition: none;
+    }
+
+    ::slotted(*) {
+      flex-shrink: 0 !important;
+      width: var(--rel-carousel-slide-width, 100%) !important;
+      min-width: 0 !important;
+      box-sizing: border-box !important;
+    }
+
+    /* Clone slides injected for seamless loop */
+    .carousel-clone {
+      flex: 0 0 100%;
+      min-width: 0;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--rel-color-bg-tertiary, #f0f0f0);
+    }
+
+    /* Navigation buttons */
+    .nav-button {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 10;
+      width: var(--rel-carousel-nav-size, 40px);
+      height: var(--rel-carousel-nav-size, 40px);
+      border-radius: 50%;
+      border: 1px solid var(--rel-color-border-default);
+      background: var(--rel-color-bg-primary);
+      color: var(--rel-color-text-primary);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.15s ease;
+      box-shadow: var(--rel-shadows-shadow-100);
+    }
+
+    .nav-button:hover:not(:disabled) {
+      background: var(--rel-color-bg-secondary);
+    }
+
+    .nav-button:focus-visible {
+      outline: 2px solid var(--rel-color-border-focus);
+      outline-offset: 2px;
+    }
+
+    .nav-button:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    .nav-button.prev {
+      left: 12px;
+    }
+
+    .nav-button.next {
+      right: 12px;
+    }
+
+    .nav-button svg {
+      width: 20px;
+      height: 20px;
+    }
+
+    /* Dots indicator */
+    .dots {
+      display: flex;
+      justify-content: center;
+      gap: var(--rel-spacing-space-xs);
+      margin-top: var(--rel-spacing-space-md);
+    }
+
+    .dot {
+      width: var(--rel-carousel-dot-size, 8px);
+      height: var(--rel-carousel-dot-size, 8px);
+      border-radius: 50%;
+      border: none;
+      background: var(--rel-color-border-default);
+      cursor: pointer;
+      padding: 0;
+      transition: all 0.15s ease;
+    }
+
+    .dot:hover {
+      background: var(--rel-color-border-divider);
+    }
+
+    .dot.active {
+      background: var(--rel-color-brand);
+      width: var(--rel-carousel-dot-size-active, 24px);
+      border-radius: 4px;
+    }
+
+    .dot:focus-visible {
+      outline: 2px solid var(--rel-color-border-focus);
+      outline-offset: 2px;
+    }
+
+    /* Reduced motion support */
+    @media (prefers-reduced-motion: reduce) {
+      .track {
+        transition: none;
+      }
+    }
+
+    :host-context([data-theme="dark"]) .nav-button,
+    :host-context(.dark) .nav-button {
+      background: var(--rel-color-bg-secondary);
+      border-color: var(--rel-color-border-default);
+      color: var(--rel-color-text-primary);
+    }
+
+    :host-context([data-theme="dark"]) .nav-button:hover,
+    :host-context(.dark) .nav-button:hover {
+      background: var(--rel-color-bg-tertiary);
+    }
+  `;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.prefersReducedMotion = window.matchMedia(
+      "(prefers-reduced-motion: reduce)"
+    ).matches;
+
+    if (this.autoplay) {
+      this.startAutoplay();
+    }
+  }
+
+  firstUpdated() {
+    const ro = new ResizeObserver(() => {
+      const w = this.viewport?.offsetWidth ?? 0;
+      if (w === 0) return;
+      this.style.setProperty('--rel-carousel-slide-width', `${w}px`);
+      this.renderRoot.querySelectorAll('.carousel-clone').forEach(el => {
+        (el as HTMLElement).style.width = `${w}px`;
+      });
+      this.updateTransform();
+    });
+    if (this.viewport) ro.observe(this.viewport);
+    this._ro = ro;
+
+    requestAnimationFrame(() => {
+      const w = this.viewport?.offsetWidth ?? 0;
+      if (w > 0) {
+        this.style.setProperty('--rel-carousel-slide-width', `${w}px`);
+        this.updateTransform();
+      }
+    });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._ro?.disconnect();
+    this.stopAutoplay();
+    if (this.animationId) {
+      cancelAnimationFrame(this.animationId);
+    }
+  }
+
+  private handleSlotChange() {
+    const slot = this.slotElement;
+    const track = this.track;
+    if (!slot || !track) return;
+
+    const elements = slot.assignedElements();
+    this.slideCount = elements.length;
+
+    // Clamp value to valid real-slide range
+    if (this.value >= this.slideCount) this.value = Math.max(0, this.slideCount - 1);
+    if (this.value < 0) this.value = 0;
+
+    // Remove any existing shadow-DOM clones
+    track.querySelectorAll(".carousel-clone").forEach((el) => el.remove());
+
+    const useClones = (this.loop || this.autoplay) && this.slideCount > 1;
+
+    if (useClones) {
+      this.clonesBefore = 1;
+
+      // Clone last slide → prepend before <slot>
+      const lastEl = elements[this.slideCount - 1] as HTMLElement;
+      const lastClone = lastEl.cloneNode(true) as HTMLElement;
+      lastClone.classList.add("carousel-clone");
+      lastClone.setAttribute("aria-hidden", "true");
+      lastClone.style.width = `${this.viewport?.offsetWidth ?? 0}px`;
+      lastClone.style.boxSizing = 'border-box';
+      track.insertBefore(lastClone, slot);
+
+      // Clone first slide → append after <slot>
+      const firstEl = elements[0] as HTMLElement;
+      const firstClone = firstEl.cloneNode(true) as HTMLElement;
+      firstClone.classList.add("carousel-clone");
+      firstClone.setAttribute("aria-hidden", "true");
+      firstClone.style.width = `${this.viewport?.offsetWidth ?? 0}px`;
+      firstClone.style.boxSizing = 'border-box';
+      track.appendChild(firstClone);
+    } else {
+      this.clonesBefore = 0;
+    }
+
+    requestAnimationFrame(() => this.updateTransform());
+
+    // If loop/autoplay clones were inserted but viewport has no width yet,
+    // retry once after paint when dimensions are available
+    if (useClones && this.unit() === 0) {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          this.handleSlotChange();
+        });
+      });
+    }
+  }
+
+  private unit(): number {
+    const slideWidth = this.viewport?.offsetWidth ?? 0;
+    const gapValue = this.gap && this.gap > 0 ? this.gap : 0;
+    return slideWidth + gapValue;
+  }
+
+  private updateTransform() {
+    if (!this.track || !this.viewport) return;
+
+    const u = this.unit();
+    const translate = -((this.value + this.clonesBefore) * u);
+
+    this.currentTranslate = translate;
+    this.prevTranslate = translate;
+    this.track.style.transform = `translateX(${translate}px)`;
+    this.track.style.gap = this.gap && this.gap > 0 ? `${this.gap}px` : "";
+  }
+
+  private goToPrevious() {
+    if (this.disabled) return;
+
+    if (this.value > 0) {
+      this.value--;
+      this.updateTransform();
+      this.emitChange();
+    } else if (this.clonesBefore > 0) {
+      // Animate to the lastClone (position 0 in the track)
+      const translate = 0;
+      this.currentTranslate = translate;
+      this.prevTranslate = translate;
+      this.track!.style.transform = `translateX(${translate}px)`;
+      this.track!.addEventListener(
+        "transitionend",
+        () => this.silentJump(this.slideCount - 1),
+        { once: true }
+      );
+    }
+  }
+
+  private goToNext() {
+    if (this.disabled) return;
+
+    if (this.value < this.slideCount - 1) {
+      this.value++;
+      this.updateTransform();
+      this.emitChange();
+    } else if (this.clonesBefore > 0) {
+      // Animate to the firstClone (one position past the last real slide)
+      const cloneFirstPos = this.slideCount + this.clonesBefore;
+      const translate = -(cloneFirstPos * this.unit());
+      this.currentTranslate = translate;
+      this.prevTranslate = translate;
+      this.track!.style.transform = `translateX(${translate}px)`;
+      this.track!.addEventListener(
+        "transitionend",
+        () => this.silentJump(0),
+        { once: true }
+      );
+    }
+  }
+
+  // Silently reposition to newValue with no visible transition, then re-enable animation.
+  private silentJump(newValue: number) {
+    if (!this.track) return;
+    this.track.classList.add("no-transition");
+    this._silentJumping = true;
+    this.value = newValue;
+    this.updateTransform();
+    this._silentJumping = false;
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        this.track!.classList.remove("no-transition");
+      });
+    });
+    this.emitChange();
+  }
+
+  private goToSlide(index: number) {
+    if (this.disabled || index < 0 || index >= this.slideCount) return;
+
+    this.value = index;
+    this.updateTransform();
+    this.emitChange();
+  }
+
+  private emitChange() {
+    this.dispatchEvent(
+      new CustomEvent("rel-change", {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private startAutoplay() {
+    if (!this.autoplay || this.disabled) return;
+
+    this.stopAutoplay();
+    this.autoplayTimer = window.setInterval(() => {
+      this.goToNext();
+    }, this.interval);
+  }
+
+  private stopAutoplay() {
+    if (this.autoplayTimer) {
+      clearInterval(this.autoplayTimer);
+      this.autoplayTimer = undefined;
+    }
+  }
+
+  private handlePointerDown(e: PointerEvent) {
+    if (this.disabled || !this.track) return;
+
+    this.isDragging = true;
+    this.dragStartX = e.clientX;
+    this.prevTranslate = this.currentTranslate;
+
+    this.track.classList.add("dragging");
+
+    if (this.autoplay && this.pauseOnHover) {
+      this.stopAutoplay();
+    }
+
+    e.preventDefault();
+  }
+
+  private handlePointerMove(e: PointerEvent) {
+    if (!this.isDragging || !this.track) return;
+
+    const currentX = e.clientX;
+    const deltaX = currentX - this.dragStartX;
+    this.currentTranslate = this.prevTranslate + deltaX;
+
+    if (!this.prefersReducedMotion && this.animationId) {
+      cancelAnimationFrame(this.animationId);
+    }
+
+    this.animationId = requestAnimationFrame(() => {
+      if (this.track) {
+        this.track.style.transform = `translateX(${this.currentTranslate}px)`;
+      }
+    });
+  }
+
+  private handlePointerUp(e: PointerEvent) {
+    if (!this.isDragging || !this.track || !this.viewport) return;
+
+    this.isDragging = false;
+    this.track.classList.remove("dragging");
+
+    const deltaX = e.clientX - this.dragStartX;
+    const slideWidth = this.viewport.offsetWidth;
+    const threshold = slideWidth * 0.2; // 20% threshold
+
+    if (Math.abs(deltaX) > threshold) {
+      if (deltaX > 0 && (this.value > 0 || this.clonesBefore > 0)) {
+        this.goToPrevious();
+      } else if (deltaX < 0 && (this.value < this.slideCount - 1 || this.clonesBefore > 0)) {
+        this.goToNext();
+      } else {
+        this.updateTransform();
+      }
+    } else {
+      this.updateTransform();
+    }
+
+    if (this.autoplay) {
+      this.startAutoplay();
+    }
+  }
+
+  private handleKeyDown(e: KeyboardEvent) {
+    if (this.disabled) return;
+
+    switch (e.key) {
+      case "ArrowLeft":
+        e.preventDefault();
+        this.goToPrevious();
+        break;
+      case "ArrowRight":
+        e.preventDefault();
+        this.goToNext();
+        break;
+      case "Home":
+        e.preventDefault();
+        this.goToSlide(0);
+        break;
+      case "End":
+        e.preventDefault();
+        this.goToSlide(this.slideCount - 1);
+        break;
+    }
+  }
+
+  private handleMouseEnter() {
+    if (this.autoplay && this.pauseOnHover) {
+      this.stopAutoplay();
+    }
+  }
+
+  private handleMouseLeave() {
+    if (this.autoplay && this.pauseOnHover) {
+      this.startAutoplay();
+    }
+  }
+
+  updated(changedProperties: Map<string, any>) {
+    if (changedProperties.has("autoplay") || changedProperties.has("interval")) {
+      if (this.autoplay) {
+        this.startAutoplay();
+      } else {
+        this.stopAutoplay();
+      }
+    }
+
+    // Only call updateTransform via Lit lifecycle for in-range values;
+    // out-of-range transitions (clone positions) are managed directly.
+    // Skip when _silentJumping — silentJump() calls updateTransform() itself.
+    if (changedProperties.has("value") && !this._silentJumping && this.value >= 0 && this.value < this.slideCount) {
+      this.updateTransform();
+    }
+  }
+
+  render() {
+    const canGoPrev = this.clonesBefore > 0 || this.value > 0;
+    const canGoNext = this.clonesBefore > 0 || this.value < this.slideCount - 1;
+
+    return html`
+      <div
+        class="viewport"
+        part="viewport"
+        role="region"
+        aria-roledescription="carousel"
+        aria-label=${this.label}
+        @keydown=${this.handleKeyDown}
+        @mouseenter=${this.handleMouseEnter}
+        @mouseleave=${this.handleMouseLeave}
+        tabindex="0"
+      >
+        <div
+          class="track"
+          part="track"
+          @pointerdown=${this.handlePointerDown}
+          @pointermove=${this.handlePointerMove}
+          @pointerup=${this.handlePointerUp}
+          @pointercancel=${this.handlePointerUp}
+        >
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+
+        ${this.showButtons
+          ? html`
+              <button
+                class="nav-button prev"
+                part="prev-button"
+                aria-label="Previous slide"
+                ?disabled=${!canGoPrev || this.disabled}
+                @click=${this.goToPrevious}
+              >
+                <svg viewBox="0 0 16 16" fill="none">
+                  <path
+                    d="M10 12L6 8L10 4"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </button>
+
+              <button
+                class="nav-button next"
+                part="next-button"
+                aria-label="Next slide"
+                ?disabled=${!canGoNext || this.disabled}
+                @click=${this.goToNext}
+              >
+                <svg viewBox="0 0 16 16" fill="none">
+                  <path
+                    d="M6 4L10 8L6 12"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </button>
+            `
+          : nothing}
+      </div>
+
+      ${this.showDots && this.slideCount > 1
+        ? html`
+            <div class="dots" part="dots">
+              ${Array.from({ length: this.slideCount }, (_, i) => html`
+                <button
+                  class="dot ${i === this.value ? "active" : ""}"
+                  part="dot"
+                  aria-label="Go to slide ${i + 1}"
+                  @click=${() => this.goToSlide(i)}
+                ></button>
+              `)}
+            </div>
+          `
+        : nothing}
+    `;
+  }
+}