@reliability-design/web 1.4.5 → 1.4.7

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

@@ -1,700 +0,0 @@
-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 = false;
-  @property({ type: Boolean, attribute: "show-dots" }) showDots = false;
-
-  /**
-   * Figma "Type" axis. When set it drives which controls render:
-   * default = content only · only-indicators = dots · side-arrows = overlaid
-   * arrows + dots · bottom-arrows = dots flanked by arrows below the slide.
-   * When unset, the legacy show-buttons/show-dots booleans apply unchanged.
-   */
-  @property({ type: String, reflect: true })
-  type?: "default" | "only-indicators" | "side-arrows" | "bottom-arrows";
-
-  @property({ type: String, reflect: true }) 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 {
-      color: var(--rel-text-default);
-      display: block;
-      font-family: var(--rel-fonts-font-family);
-      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;
-    }
-
-    /* Vertical orientation: column track inside a fixed-height viewport */
-    :host([orientation="vertical"]) .viewport {
-      height: var(--rel-carousel-height, 320px);
-    }
-
-    :host([orientation="vertical"]) .track {
-      flex-direction: column;
-      height: 100%;
-    }
-
-    :host([orientation="vertical"]) ::slotted(*) {
-      width: 100% !important;
-      height: var(--rel-carousel-slide-height, 100%) !important;
-    }
-
-    .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-bg-neutral-elevated-1);
-    }
-
-    /* Default typography for slotted slide captions (Figma roles) */
-    ::slotted(h1), ::slotted(h2), ::slotted(h3), ::slotted(h4) {
-      font-family: var(--rel-headings-sm-font-family);
-      font-weight: var(--rel-headings-sm-font-weight);
-      font-size: var(--rel-headings-xs-font-size);
-      line-height: var(--rel-headings-xs-line-height);
-      letter-spacing: var(--rel-headings-xs-letter-spacing);
-      margin: 0 0 var(--rel-spacing-2xs) 0;
-    }
-
-    ::slotted(p) {
-      font-family: var(--rel-body-sm-regular-font-family);
-      font-weight: var(--rel-body-sm-regular-font-weight);
-      font-size: var(--rel-body-sm-regular-font-size);
-      line-height: var(--rel-body-sm-regular-line-height);
-      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
-      color: var(--rel-text-body);
-      margin: 0 0 var(--rel-spacing-lg) 0;
-    }
-
-    
-    /* 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-border-default);
-      background: var(--rel-bg-neutral);
-      color: var(--rel-action-neutral-label-icons-ghost);
-      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-bg-surface-elevated);
-    }
-
-    .nav-button:focus-visible {
-      outline: 2px solid var(--rel-border-focus);
-      outline-offset: 2px;
-    }
-
-    .nav-button:disabled {
-      opacity: 0.4;
-      cursor: not-allowed;
-    }
-
-    .nav-button.prev {
-      left: var(--rel-spacing-sm);
-    }
-
-    .nav-button.next {
-      right: var(--rel-spacing-sm);
-    }
-
-    /* Bottom arrows (Figma Type=Bottom Arrows): inline with the dots row */
-    .dots .nav-button {
-      position: static;
-      transform: none;
-      width: 32px;
-      height: 32px;
-      box-shadow: none;
-    }
-
-    .nav-button svg {
-      width: 20px;
-      height: 20px;
-    }
-
-    /* Dots indicator */
-    .dots {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: var(--rel-spacing-xs);
-      margin-top: var(--rel-spacing-md);
-    }
-
-    .dot {
-      width: var(--rel-carousel-dot-size, 8px);
-      height: var(--rel-carousel-dot-size, 8px);
-      border-radius: 50%;
-      border: none;
-      background: var(--rel-bg-neutral-elevated-2);
-      cursor: pointer;
-      padding: 0;
-      transition: all 0.15s ease;
-    }
-
-    .dot:hover {
-      background: var(--rel-bg-neutral-elevated-2);
-    }
-
-    .dot.active {
-      background: var(--rel-bg-surface-brand);
-      width: var(--rel-carousel-dot-size-active, 24px);
-      border-radius: var(--rel-border-radius-xs);
-    }
-
-    .dot:focus-visible {
-      outline: 2px solid var(--rel-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-bg-surface-elevated);
-      border-color: var(--rel-border-default);
-      color: var(--rel-text-default);
-    }
-
-    :host-context([data-theme="dark"]) .nav-button:hover,
-    :host-context(.dark) .nav-button:hover {
-      background: var(--rel-bg-neutral-elevated-1);
-    }
-  `;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.prefersReducedMotion = window.matchMedia(
-      "(prefers-reduced-motion: reduce)"
-    ).matches;
-
-    // WCAG 2.2.2: auto-advance must pause while keyboard focus is inside the
-    // carousel, not just on mouse hover.
-    this.addEventListener("focusin", this.handleFocusIn);
-    this.addEventListener("focusout", this.handleFocusOut);
-
-    if (this.autoplay) {
-      this.startAutoplay();
-    }
-  }
-
-  firstUpdated() {
-    const ro = new ResizeObserver(() => {
-      const w = this.viewport?.offsetWidth ?? 0;
-      const h = this.viewport?.offsetHeight ?? 0;
-      if (w === 0 && h === 0) return;
-      this.style.setProperty('--rel-carousel-slide-width', `${w}px`);
-      this.style.setProperty('--rel-carousel-slide-height', `${h}px`);
-      this.renderRoot.querySelectorAll('.carousel-clone').forEach(el => {
-        if (this.vertical) (el as HTMLElement).style.height = `${h}px`;
-        else (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;
-      const h = this.viewport?.offsetHeight ?? 0;
-      if (w > 0 || h > 0) {
-        this.style.setProperty('--rel-carousel-slide-width', `${w}px`);
-        this.style.setProperty('--rel-carousel-slide-height', `${h}px`);
-        this.updateTransform();
-      }
-    });
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("focusin", this.handleFocusIn);
-    this.removeEventListener("focusout", this.handleFocusOut);
-    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;
-
-      const sizeClone = (clone: HTMLElement) => {
-        if (this.vertical) clone.style.height = `${this.viewport?.offsetHeight ?? 0}px`;
-        else clone.style.width = `${this.viewport?.offsetWidth ?? 0}px`;
-        clone.style.boxSizing = 'border-box';
-      };
-
-      // 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");
-      sizeClone(lastClone);
-      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");
-      sizeClone(firstClone);
-      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 get vertical(): boolean {
-    return this.orientation === "vertical";
-  }
-
-  /** Translate along the orientation axis. */
-  private axisTransform(px: number): string {
-    return this.vertical ? `translateY(${px}px)` : `translateX(${px}px)`;
-  }
-
-  private unit(): number {
-    const slideSize = (this.vertical ? this.viewport?.offsetHeight : this.viewport?.offsetWidth) ?? 0;
-    const gapValue = this.gap && this.gap > 0 ? this.gap : 0;
-    return slideSize + 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 = this.axisTransform(translate);
-    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 = this.axisTransform(translate);
-      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 = this.axisTransform(translate);
-      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 = this.vertical ? e.clientY : 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 current = this.vertical ? e.clientY : e.clientX;
-    const delta = current - this.dragStartX;
-    this.currentTranslate = this.prevTranslate + delta;
-
-    if (!this.prefersReducedMotion && this.animationId) {
-      cancelAnimationFrame(this.animationId);
-    }
-
-    this.animationId = requestAnimationFrame(() => {
-      if (this.track) {
-        this.track.style.transform = this.axisTransform(this.currentTranslate);
-      }
-    });
-  }
-
-  private handlePointerUp(e: PointerEvent) {
-    if (!this.isDragging || !this.track || !this.viewport) return;
-
-    this.isDragging = false;
-    this.track.classList.remove("dragging");
-
-    const delta = (this.vertical ? e.clientY : e.clientX) - this.dragStartX;
-    const slideSize = this.vertical ? this.viewport.offsetHeight : this.viewport.offsetWidth;
-    const threshold = slideSize * 0.2; // 20% threshold
-
-    if (Math.abs(delta) > threshold) {
-      if (delta > 0 && (this.value > 0 || this.clonesBefore > 0)) {
-        this.goToPrevious();
-      } else if (delta < 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":
-      case "ArrowUp":
-        e.preventDefault();
-        this.goToPrevious();
-        break;
-      case "ArrowRight":
-      case "ArrowDown":
-        e.preventDefault();
-        this.goToNext();
-        break;
-      case "Home":
-        e.preventDefault();
-        this.goToSlide(0);
-        break;
-      case "End":
-        e.preventDefault();
-        this.goToSlide(this.slideCount - 1);
-        break;
-    }
-  }
-
-  private handleFocusIn = () => {
-    if (this.autoplay) this.stopAutoplay();
-  };
-
-  private handleFocusOut = (e: FocusEvent) => {
-    if (!this.autoplay) return;
-    const next = e.relatedTarget as Node | null;
-    // Resume only once focus has fully left the carousel (light or shadow).
-    if (next && (this.contains(next) || this.shadowRoot?.contains(next))) return;
-    this.startAutoplay();
-  };
-
-  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();
-    }
-  }
-
-  /** Where nav arrows render, honouring the Figma type when set. */
-  private get buttonPlacement(): "side" | "bottom" | "none" {
-    if (this.type === "side-arrows") return "side";
-    if (this.type === "bottom-arrows") return "bottom";
-    if (this.type === "only-indicators" || this.type === "default") return "none";
-    return this.showButtons ? "side" : "none";
-  }
-
-  private get dotsVisible(): boolean {
-    if (this.type === "default") return false;
-    if (this.type) return true;
-    return this.showDots;
-  }
-
-  private renderNavButton(direction: "prev" | "next", enabled: boolean) {
-    const path = direction === "prev" ? "M10 12L6 8L10 4" : "M6 4L10 8L6 12";
-    return html`
-      <button
-        class="nav-button ${direction}"
-        part="${direction}-button"
-        aria-label="${direction === "prev" ? "Previous" : "Next"} slide"
-        ?disabled=${!enabled || this.disabled}
-        @click=${direction === "prev" ? this.goToPrevious : this.goToNext}
-      >
-        <svg viewBox="0 0 16 16" fill="none">
-          <path
-            d="${path}"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
-      </button>
-    `;
-  }
-
-  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.buttonPlacement === "side"
-          ? html`
-              ${this.renderNavButton("prev", canGoPrev)}
-              ${this.renderNavButton("next", canGoNext)}
-            `
-          : nothing}
-      </div>
-
-      ${(this.dotsVisible || this.buttonPlacement === "bottom") && this.slideCount > 1
-        ? html`
-            <div class="dots" part="dots">
-              ${this.buttonPlacement === "bottom" ? this.renderNavButton("prev", canGoPrev) : nothing}
-              ${this.dotsVisible
-                ? Array.from({ length: this.slideCount }, (_, i) => html`
-                    <button
-                      class="dot ${i === this.value ? "active" : ""}"
-                      part="dot"
-                      aria-label="Go to slide ${i + 1}"
-                      aria-current="${i === this.value ? "true" : nothing}"
-                      @click=${() => this.goToSlide(i)}
-                    ></button>
-                  `)
-                : nothing}
-              ${this.buttonPlacement === "bottom" ? this.renderNavButton("next", canGoNext) : nothing}
-            </div>
-          `
-        : nothing}
-    `;
-  }
-}