@helixui/library 0.1.0

package/dist/shared/hx-carousel-item-CymJHv1m.js

@@ -0,0 +1,610 @@
+import { css as g, html as a, LitElement as f, nothing as v } from "lit";
+import { property as l, state as c, customElement as _ } from "lit/decorators.js";
+import { classMap as y } from "lit/directives/class-map.js";
+import { t as x } from "./lit-Dpo7RLp4.js";
+const m = g`
+  :host {
+    display: block;
+    position: relative;
+  }
+
+  /* ─── Base ─── */
+
+  .base {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-3, 0.75rem);
+  }
+
+  :host([orientation='vertical']) .base {
+    flex-direction: row;
+  }
+
+  /* ─── Navigation ─── */
+
+  .navigation {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--hx-space-2, 0.5rem);
+  }
+
+  :host([orientation='vertical']) .navigation {
+    flex-direction: column;
+  }
+
+  .nav-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--hx-carousel-nav-btn-size, var(--hx-size-10, 2.5rem));
+    height: var(--hx-carousel-nav-btn-size, var(--hx-size-10, 2.5rem));
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb);
+    border-radius: var(--hx-border-radius-full, 9999px);
+    background: var(--hx-color-neutral-0, #fff);
+    color: var(--hx-color-neutral-700, #374151);
+    cursor: pointer;
+    padding: 0;
+    transition:
+      background-color var(--hx-transition-fast, 0.15s ease),
+      color var(--hx-transition-fast, 0.15s ease),
+      border-color var(--hx-transition-fast, 0.15s ease);
+    flex-shrink: 0;
+  }
+
+  .nav-btn:hover:not([disabled]) {
+    background: var(--hx-color-neutral-50, #f9fafb);
+    border-color: var(--hx-color-neutral-400, #9ca3af);
+  }
+
+  .nav-btn:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  .nav-btn[disabled] {
+    opacity: var(--hx-opacity-disabled, 0.4);
+    cursor: not-allowed;
+  }
+
+  .nav-btn svg {
+    width: 1.25em;
+    height: 1.25em;
+  }
+
+  /* ─── Play/Pause ─── */
+
+  .play-pause-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--hx-size-8, 2rem);
+    height: var(--hx-size-8, 2rem);
+    border: var(--hx-border-width-thin, 1px) solid transparent;
+    border-radius: var(--hx-border-radius-md, 0.375rem);
+    background: transparent;
+    color: var(--hx-color-neutral-500, #6b7280);
+    cursor: pointer;
+    padding: 0;
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    transition: background-color var(--hx-transition-fast, 0.15s ease);
+    flex-shrink: 0;
+  }
+
+  .play-pause-btn:hover {
+    background: var(--hx-color-neutral-100, #f3f4f6);
+  }
+
+  .play-pause-btn:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  /* ─── Scroll Container ─── */
+
+  .scroll-container-wrapper {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .slide-viewport {
+    overflow: hidden;
+    border-radius: var(--hx-border-radius-md, 0.375rem);
+  }
+
+  .track {
+    display: flex;
+    transition: transform var(--hx-transition-base, 0.3s ease);
+  }
+
+  :host([orientation='vertical']) .track {
+    flex-direction: column;
+  }
+
+  /* ─── Pagination ─── */
+
+  .pagination {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--hx-space-2, 0.5rem);
+    flex-wrap: wrap;
+  }
+
+  :host([orientation='vertical']) .pagination {
+    flex-direction: column;
+  }
+
+  .pagination-item {
+    display: inline-flex;
+    padding: 0;
+    border: none;
+    cursor: pointer;
+    background: transparent;
+    border-radius: var(--hx-border-radius-full, 9999px);
+  }
+
+  .pagination-dot {
+    display: block;
+    width: var(--hx-carousel-pagination-dot-size, 0.5rem);
+    height: var(--hx-carousel-pagination-dot-size, 0.5rem);
+    border-radius: var(--hx-border-radius-full, 9999px);
+    background: var(--hx-color-neutral-300, #d1d5db);
+    transition:
+      background-color var(--hx-transition-fast, 0.15s ease),
+      transform var(--hx-transition-fast, 0.15s ease);
+  }
+
+  .pagination-item[aria-current='true'] .pagination-dot,
+  .pagination-item.is-active .pagination-dot {
+    background: var(--hx-color-primary-600, #2563eb);
+    transform: scale(1.25);
+  }
+
+  .pagination-item:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+    border-radius: var(--hx-border-radius-full, 9999px);
+  }
+
+  /* ─── Controls row ─── */
+
+  .controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--hx-space-3, 0.75rem);
+  }
+
+  /* ─── Live Region ─── */
+
+  .live-region {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .track,
+    .nav-btn,
+    .pagination-dot,
+    .play-pause-btn {
+      transition: none;
+    }
+  }
+`;
+var b = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (t, e, r, i) => {
+  for (var s = i > 1 ? void 0 : i ? w(e, r) : e, h = t.length - 1, d; h >= 0; h--)
+    (d = t[h]) && (s = (i ? d(e, r, s) : d(s)) || s);
+  return i && s && b(e, r, s), s;
+};
+const P = a`<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  aria-hidden="true"
+>
+  <polyline points="15 18 9 12 15 6"></polyline>
+</svg>`, k = a`<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  aria-hidden="true"
+>
+  <polyline points="18 15 12 9 6 15"></polyline>
+</svg>`, I = a`<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  aria-hidden="true"
+>
+  <polyline points="9 18 15 12 9 6"></polyline>
+</svg>`, M = a`<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  aria-hidden="true"
+>
+  <polyline points="6 9 12 15 18 9"></polyline>
+</svg>`, $ = a`<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="currentColor"
+  aria-hidden="true"
+  width="1em"
+  height="1em"
+>
+  <polygon points="5 3 19 12 5 21 5 3"></polygon>
+</svg>`, T = a`<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="currentColor"
+  aria-hidden="true"
+  width="1em"
+  height="1em"
+>
+  <rect x="6" y="4" width="4" height="16"></rect>
+  <rect x="14" y="4" width="4" height="16"></rect>
+</svg>`;
+let o = class extends f {
+  constructor() {
+    super(...arguments), this.label = "Carousel", this.loop = !1, this.autoplay = !1, this.autoplayInterval = 3e3, this.slidesPerPage = 1, this.slidesPerMove = 1, this.orientation = "horizontal", this.mouseDragging = !1, this._currentIndex = 0, this._slides = [], this._isPlaying = !1, this._liveText = "", this._autoplayTimer = null, this._reducedMotion = !1, this._mql = null, this._isHovered = !1, this._isFocused = !1, this._dragStartCoord = 0, this._isDragging = !1, this._dragMoved = !1, this._touchStartCoord = 0, this._touchMoved = !1, this._autoplayTick = () => {
+      this.loop ? this.goTo(this._currentIndex + this.slidesPerMove) : this._currentIndex < this._maxIndex ? this.goTo(this._currentIndex + this.slidesPerMove) : this.goTo(0);
+    }, this._handleMotionChange = (t) => {
+      this._reducedMotion = t.matches, this._reducedMotion ? this._stopAutoplay() : this.autoplay && !this._isHovered && !this._isFocused && this._startAutoplay();
+    }, this._handleMouseEnter = () => {
+      this._isHovered = !0, this._pauseAutoplay();
+    }, this._handleMouseLeave = () => {
+      this._isHovered = !1, this._isFocused || this._resumeAutoplay();
+    }, this._handleFocusIn = () => {
+      this._isFocused = !0, this._pauseAutoplay();
+    }, this._handleFocusOut = () => {
+      this._isFocused = !1, this._isHovered || this._resumeAutoplay();
+    }, this._handleKeydown = (t) => {
+      this.orientation === "horizontal" ? t.key === "ArrowLeft" ? (t.preventDefault(), this.previous()) : t.key === "ArrowRight" && (t.preventDefault(), this.next()) : t.key === "ArrowUp" ? (t.preventDefault(), this.previous()) : t.key === "ArrowDown" && (t.preventDefault(), this.next()), t.key === "Home" ? (t.preventDefault(), this.goTo(0)) : t.key === "End" && (t.preventDefault(), this.goTo(this._slides.length - 1));
+    };
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback(), this._mql = window.matchMedia("(prefers-reduced-motion: reduce)"), this._reducedMotion = this._mql.matches, this._mql.addEventListener("change", this._handleMotionChange), this.addEventListener("mouseenter", this._handleMouseEnter), this.addEventListener("mouseleave", this._handleMouseLeave), this.addEventListener("focusin", this._handleFocusIn), this.addEventListener("focusout", this._handleFocusOut), this.addEventListener("keydown", this._handleKeydown);
+  }
+  disconnectedCallback() {
+    var t;
+    super.disconnectedCallback(), (t = this._mql) == null || t.removeEventListener("change", this._handleMotionChange), this._stopAutoplay(), this.removeEventListener("mouseenter", this._handleMouseEnter), this.removeEventListener("mouseleave", this._handleMouseLeave), this.removeEventListener("focusin", this._handleFocusIn), this.removeEventListener("focusout", this._handleFocusOut), this.removeEventListener("keydown", this._handleKeydown);
+  }
+  firstUpdated() {
+    this._syncSlides(), this.autoplay && !this._reducedMotion && this._startAutoplay();
+  }
+  // ─── Slide Management ───
+  _syncSlides() {
+    var r;
+    const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector("slot:not([name])");
+    if (!t) return;
+    const e = t.assignedElements({ flatten: !0 }).filter((i) => i.tagName.toLowerCase() === "hx-carousel-item");
+    this._slides = e, e.forEach((i, s) => {
+      i.slideIndex = s, i.totalSlides = e.length;
+      const h = `${100 / this.slidesPerPage}%`;
+      i.style.setProperty("--_hx-carousel-slide-width", h);
+    }), this._currentIndex >= e.length && (this._currentIndex = Math.max(0, e.length - 1));
+  }
+  _handleSlotChange() {
+    this._syncSlides();
+  }
+  // ─── Navigation ───
+  get _maxIndex() {
+    return Math.max(0, this._slides.length - this.slidesPerPage);
+  }
+  goTo(t) {
+    if (this._slides.length === 0) return;
+    let e = t;
+    this.loop ? e = (t % this._slides.length + this._slides.length) % this._slides.length : e = Math.max(0, Math.min(t, this._maxIndex)), e !== this._currentIndex && (this._currentIndex = e, this._liveText = `Slide ${e + 1} of ${this._slides.length}`, this.dispatchEvent(
+      new CustomEvent("hx-slide-change", {
+        bubbles: !0,
+        composed: !0,
+        detail: { index: e, slide: this._slides[e] }
+      })
+    ));
+  }
+  next() {
+    const t = this._currentIndex + this.slidesPerMove;
+    !this.loop && t > this._maxIndex || this.goTo(t);
+  }
+  previous() {
+    const t = this._currentIndex - this.slidesPerMove;
+    !this.loop && t < 0 || this.goTo(t);
+  }
+  _startAutoplay() {
+    this._autoplayTimer === null && (this._isPlaying = !0, this._autoplayTimer = setInterval(this._autoplayTick, this.autoplayInterval));
+  }
+  _stopAutoplay() {
+    this._autoplayTimer !== null && (clearInterval(this._autoplayTimer), this._autoplayTimer = null), this._isPlaying = !1;
+  }
+  _toggleAutoplay() {
+    this._isPlaying ? this._stopAutoplay() : this._reducedMotion || this._startAutoplay();
+  }
+  _pauseAutoplay() {
+    !this._isPlaying || this._autoplayTimer === null || (clearInterval(this._autoplayTimer), this._autoplayTimer = null);
+  }
+  _resumeAutoplay() {
+    !this.autoplay || !this._isPlaying || this._reducedMotion || this._autoplayTimer === null && (this._autoplayTimer = setInterval(this._autoplayTick, this.autoplayInterval));
+  }
+  // ─── Drag Handlers ───
+  _handleDragStart(t) {
+    this.mouseDragging && (this._isDragging = !0, this._dragMoved = !1, this._dragStartCoord = this.orientation === "horizontal" ? t.clientX : t.clientY, t.currentTarget.style.cursor = "grabbing", t.preventDefault());
+  }
+  _handleDragMove(t) {
+    if (!this._isDragging) return;
+    const r = (this.orientation === "horizontal" ? t.clientX : t.clientY) - this._dragStartCoord;
+    Math.abs(r) > 5 && (this._dragMoved = !0);
+  }
+  _handleDragEnd(t) {
+    if (!this._isDragging) return;
+    const r = (this.orientation === "horizontal" ? t.clientX : t.clientY) - this._dragStartCoord, i = 50;
+    this._dragMoved && (r > i ? this.previous() : r < -i && this.next()), this._isDragging = !1, this._dragMoved = !1, t.currentTarget.style.cursor = "";
+  }
+  // ─── Touch Handlers ───
+  _handleTouchStart(t) {
+    if (!this.mouseDragging) return;
+    const e = t.touches[0];
+    e && (this._isDragging = !0, this._touchMoved = !1, this._touchStartCoord = this.orientation === "horizontal" ? e.clientX : e.clientY);
+  }
+  _handleTouchMove(t) {
+    if (!this._isDragging) return;
+    const e = t.touches[0];
+    if (!e) return;
+    const i = (this.orientation === "horizontal" ? e.clientX : e.clientY) - this._touchStartCoord;
+    Math.abs(i) > 5 && (this._touchMoved = !0);
+  }
+  _handleTouchEnd(t) {
+    if (!this._isDragging) return;
+    const e = t.changedTouches[0];
+    if (!e) return;
+    const i = (this.orientation === "horizontal" ? e.clientX : e.clientY) - this._touchStartCoord, s = 50;
+    this._touchMoved && (i > s ? this.previous() : i < -s && this.next()), this._isDragging = !1, this._touchMoved = !1;
+  }
+  // ─── Computed ───
+  get _trackTransform() {
+    const t = 100 / this.slidesPerPage, e = this._currentIndex * t;
+    return this.orientation === "horizontal" ? `translateX(-${e}%)` : `translateY(-${e}%)`;
+  }
+  get _canGoPrev() {
+    return this.loop || this._currentIndex > 0;
+  }
+  get _canGoNext() {
+    return this.loop || this._currentIndex < this._maxIndex;
+  }
+  // ─── Render Helpers ───
+  _renderNavigation() {
+    return a`
+      <div class="navigation" part="navigation">
+        <slot name="previous-button">
+          <button
+            class="nav-btn"
+            part="prev-btn"
+            type="button"
+            aria-label="Previous slide"
+            ?disabled=${!this._canGoPrev}
+            @click=${() => this.previous()}
+          >
+            ${this._renderPrevIcon()}
+          </button>
+        </slot>
+        ${this.autoplay ? a`
+              <button
+                class="play-pause-btn"
+                part="play-pause-btn"
+                type="button"
+                aria-label=${this._isPlaying ? "Pause autoplay" : "Play autoplay"}
+                @click=${() => this._toggleAutoplay()}
+              >
+                ${this._isPlaying ? this._renderPauseIcon() : this._renderPlayIcon()}
+              </button>
+            ` : v}
+        <slot name="next-button">
+          <button
+            class="nav-btn"
+            part="next-btn"
+            type="button"
+            aria-label="Next slide"
+            ?disabled=${!this._canGoNext}
+            @click=${() => this.next()}
+          >
+            ${this._renderNextIcon()}
+          </button>
+        </slot>
+      </div>
+    `;
+  }
+  _renderPagination() {
+    const t = this._slides.length;
+    if (t <= 1) return v;
+    const e = Array.from({ length: t }, (r, i) => i);
+    return a`
+      <div class="controls">
+        <div class="pagination" part="pagination">
+          ${e.map(
+      (r) => a`
+              <button
+                class=${y({
+        "pagination-item": !0,
+        "is-active": r === this._currentIndex
+      })}
+                part="pagination-item"
+                type="button"
+                aria-label="Slide ${r + 1} of ${t}"
+                aria-current=${r === this._currentIndex ? "true" : "false"}
+                @click=${() => this.goTo(r)}
+              >
+                <span class="pagination-dot"></span>
+              </button>
+            `
+    )}
+        </div>
+      </div>
+    `;
+  }
+  _renderPrevIcon() {
+    return this.orientation === "horizontal" ? P : k;
+  }
+  _renderNextIcon() {
+    return this.orientation === "horizontal" ? I : M;
+  }
+  _renderPlayIcon() {
+    return $;
+  }
+  _renderPauseIcon() {
+    return T;
+  }
+  // ─── Render ───
+  render() {
+    return a`
+      <div
+        class="base"
+        part="base"
+        role="region"
+        aria-label=${this.label}
+        aria-roledescription="carousel"
+        tabindex="0"
+      >
+        <div class="live-region" role="status" aria-live="polite" aria-atomic="true">
+          ${this._liveText}
+        </div>
+        ${this._renderNavigation()}
+        <div class="scroll-container-wrapper">
+          <div
+            class="slide-viewport"
+            part="slide-viewport"
+            @mousedown=${this._handleDragStart}
+            @mousemove=${this._handleDragMove}
+            @mouseup=${this._handleDragEnd}
+            @mouseleave=${this._handleDragEnd}
+            @touchstart=${this._handleTouchStart}
+            @touchmove=${this._handleTouchMove}
+            @touchend=${this._handleTouchEnd}
+          >
+            <div class="track" style="transform: ${this._trackTransform};">
+              <slot @slotchange=${this._handleSlotChange}></slot>
+            </div>
+          </div>
+        </div>
+        ${this._renderPagination()}
+      </div>
+    `;
+  }
+};
+o.styles = [x, m];
+n([
+  l({ type: String, reflect: !0 })
+], o.prototype, "label", 2);
+n([
+  l({ type: Boolean, reflect: !0 })
+], o.prototype, "loop", 2);
+n([
+  l({ type: Boolean, reflect: !0 })
+], o.prototype, "autoplay", 2);
+n([
+  l({ type: Number, attribute: "autoplay-interval" })
+], o.prototype, "autoplayInterval", 2);
+n([
+  l({ type: Number, attribute: "slides-per-page" })
+], o.prototype, "slidesPerPage", 2);
+n([
+  l({ type: Number, attribute: "slides-per-move" })
+], o.prototype, "slidesPerMove", 2);
+n([
+  l({ type: String, reflect: !0 })
+], o.prototype, "orientation", 2);
+n([
+  l({ type: Boolean, attribute: "mouse-dragging", reflect: !0 })
+], o.prototype, "mouseDragging", 2);
+n([
+  c()
+], o.prototype, "_currentIndex", 2);
+n([
+  c()
+], o.prototype, "_slides", 2);
+n([
+  c()
+], o.prototype, "_isPlaying", 2);
+n([
+  c()
+], o.prototype, "_liveText", 2);
+o = n([
+  _("hx-carousel")
+], o);
+var C = Object.defineProperty, D = Object.getOwnPropertyDescriptor, p = (t, e, r, i) => {
+  for (var s = i > 1 ? void 0 : i ? D(e, r) : e, h = t.length - 1, d; h >= 0; h--)
+    (d = t[h]) && (s = (i ? d(e, r, s) : d(s)) || s);
+  return i && s && C(e, r, s), s;
+};
+let u = class extends f {
+  constructor() {
+    super(...arguments), this.slideIndex = 0, this.totalSlides = 0;
+  }
+  render() {
+    const t = `Slide ${this.slideIndex + 1} of ${this.totalSlides}`;
+    return a`
+      <div class="slide-group" role="group" aria-label=${t} tabindex="-1">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+u.styles = [
+  x,
+  g`
+      :host {
+        display: block;
+        flex-shrink: 0;
+        width: var(--_hx-carousel-slide-width, 100%);
+        box-sizing: border-box;
+      }
+
+      .slide-group {
+        height: 100%;
+        outline: none;
+      }
+
+      .slide-group:focus-visible {
+        outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
+        outline-offset: var(--hx-focus-ring-offset, 2px);
+      }
+    `
+];
+p([
+  l({ type: Number, attribute: "slide-index" })
+], u.prototype, "slideIndex", 2);
+p([
+  l({ type: Number, attribute: "total-slides" })
+], u.prototype, "totalSlides", 2);
+u = p([
+  _("hx-carousel-item")
+], u);
+export {
+  o as H,
+  u as a
+};
+//# sourceMappingURL=hx-carousel-item-CymJHv1m.js.map