@rcarls/rc-carousel 0.1.0

package/dist/rc-carousel-CdDEH9fb.js

@@ -0,0 +1,658 @@
+import { css as f, LitElement as m, html as h, nothing as d } from "lit";
+import { property as l, query as b, state as x } from "lit/decorators.js";
+import { DragGestureController as I, findNearestSnapIndex as k, findExtremeSnapIndex as g, findNextSnapIndex as A, keyNavigation as v } from "@rcarls/rc-common";
+const C = f`
+  :host {
+    display: block;
+    box-sizing: border-box;
+    min-inline-size: 0;
+    min-block-size: 0;
+    scroll-snap-align: var(--rc-carousel-item-scroll-snap-align, start);
+    /*
+     * Without this, a normal-speed swipe carries enough fling momentum to
+     * sail past the very next item and settle two (or more) items over —
+     * \`mandatory\` scroll-snap-type on the track alone only guarantees
+     * landing on *a* snap point, not the nearest one. \`always\` forces the
+     * browser to stop at each snap point in turn.
+     */
+    scroll-snap-stop: always;
+    overflow: var(--rc-carousel-item-overflow, hidden);
+    border-radius: var(--rc-carousel-item-border-radius, 0);
+    background: var(--rc-carousel-item-background, transparent);
+    color: var(--rc-carousel-item-color, CanvasText);
+    color-scheme: inherit;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  /*
+   * Peeking/off-screen items are hidden from assistive technology (see
+   * rc-carousel-item.ts's IntersectionObserver) but must stay visually and
+   * interactively present — a peek is a legitimate visual affordance, not
+   * decoration to strip. This only removes it from the accessibility tree
+   * and, via inert, the tab sequence, matching the same technique proven
+   * carousels (e.g. Shoelace's sl-carousel) use for exactly this problem.
+   */
+  :host([aria-hidden='true']) {
+    pointer-events: none;
+  }
+`;
+var S = Object.defineProperty, E = (c, t, e, s) => {
+  for (var i = void 0, n = c.length - 1, a; n >= 0; n--)
+    (a = c[n]) && (i = a(t, e, i) || i);
+  return i && S(t, e, i), i;
+};
+const p = class p extends m {
+  constructor() {
+    super(), this._intersectionObserver = null, this.position = "", this._internals = this.attachInternals(), this._internals.role = "group";
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "group"), this.hasAttribute("aria-roledescription") || this.setAttribute("aria-roledescription", "slide"), this._observeIntersection();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._intersectionObserver?.disconnect(), this._intersectionObserver = null;
+  }
+  updated(t) {
+    super.updated(t), t.has("position") && this._syncDefaultLabel();
+  }
+  _syncDefaultLabel() {
+    this.hasAttribute("aria-label") || this.hasAttribute("aria-labelledby") || this.position && this.setAttribute("aria-label", this.position);
+  }
+  /**
+   * Observes intersection against the parent carousel's own scroll
+   * container (not the viewport — a slide can be viewport-visible yet
+   * still clipped/off-screen within the track on a page where the
+   * carousel isn't the whole viewport). Reads `trackElement` off the
+   * parent `rc-carousel`, an internal integration point rather than a
+   * public API — awaits the parent's own first render first, since a
+   * slotted item's `connectedCallback` isn't guaranteed to run after its
+   * host's, and `trackElement` only exists once the host has rendered.
+   */
+  async _observeIntersection() {
+    if (this.hasAttribute("data-clone")) {
+      this.setAttribute("aria-hidden", "true"), this.setAttribute("inert", "");
+      return;
+    }
+    const t = this.closest("rc-carousel");
+    await t?.updateComplete;
+    const e = t?.trackElement ?? null;
+    if (this._intersectionObserver?.disconnect(), typeof IntersectionObserver != "function" || !e) {
+      this.removeAttribute("aria-hidden"), this.removeAttribute("inert");
+      return;
+    }
+    this._intersectionObserver = new IntersectionObserver(
+      ([s]) => {
+        const i = s !== void 0 && !s.isIntersecting;
+        i ? (this.contains(this.ownerDocument.activeElement) && t?.trackElement?.focus(), this.setAttribute("aria-hidden", "true")) : this.removeAttribute("aria-hidden"), this.toggleAttribute("inert", i);
+      },
+      // A low/zero threshold would count a peeking neighbor's own sliver
+      // of visible pixels as "intersecting", never hiding it — a peek is
+      // real but not readable/interactive, so it should still hide. 0.5
+      // reliably separates "the active slide" (near-fully visible) from
+      // "a peeking neighbor" (a fraction of it showing).
+      { root: e, threshold: 0.5 }
+    ), this._intersectionObserver.observe(this);
+  }
+  render() {
+    return h`<slot></slot>`;
+  }
+};
+p.styles = C;
+let u = p;
+E([
+  l({ type: String, attribute: !1 })
+], u.prototype, "position");
+const w = f`
+  :host {
+    display: block;
+    position: relative;
+    color: var(--rc-carousel-color, CanvasText);
+    color-scheme: inherit;
+  }
+
+  #track {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: var(--rc-carousel-slide-size, calc(100% - 4rem));
+    column-gap: var(--rc-carousel-gap, 8px);
+    inline-size: 100%;
+    block-size: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    overscroll-behavior-x: contain;
+    scroll-snap-type: x mandatory;
+    /*
+     * Deliberately no \`scroll-behavior: smooth\` here — _scrollToIndex in
+     * rc-carousel.ts passes \`behavior: 'smooth'\` explicitly per
+     * programmatic call instead, which is unaffected either way (an
+     * explicit argument always overrides this CSS default). Setting it
+     * here as an ambient default would also apply to the browser's own
+     * native snap-settle correction after a swipe — a documented
+     * cross-browser conflict with scroll-snap-stop: always (each
+     * rc-carousel-item sets that; Firefox bugzilla 1643217, 1959811)
+     * that produces a jerk-then-snap-back artifact on an ordinary swipe.
+     */
+    scrollbar-width: none;
+  }
+
+  #track::-webkit-scrollbar {
+    display: none;
+  }
+
+  :host([mouse-dragging]) #track {
+    cursor: grab;
+  }
+
+  :host([mouse-dragging]) #track.dragging {
+    cursor: grabbing;
+    /*
+     * scroll-snap-type itself is toggled imperatively in rc-carousel.ts,
+     * not here — it must be off before the very first scrollLeft write of
+     * a drag, and this class only lands on the next reactive render, a
+     * render pass too late for that first write (the browser eagerly
+     * resnaps a plain scrollLeft assignment right back to the nearest
+     * snap point, same as any other programmatic scroll).
+     */
+  }
+
+  #navigation {
+    display: contents;
+  }
+
+  [part~='navigation-button'] {
+    position: absolute;
+    top: 50%;
+    translate: 0 -50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--rc-carousel-navigation-button-size, 40px);
+    block-size: var(--rc-carousel-navigation-button-size, 40px);
+    border: none;
+    border-radius: 50%;
+    background: var(
+      --rc-carousel-navigation-button-background,
+      color-mix(in srgb, CanvasText 12%, transparent)
+    );
+    color: var(--rc-carousel-navigation-button-color, CanvasText);
+    cursor: pointer;
+  }
+
+  [part~='navigation-button'][aria-disabled='true'] {
+    opacity: 0.38;
+    cursor: default;
+  }
+
+  [part~='navigation-button-previous'] {
+    inset-inline-start: var(--rc-carousel-navigation-inset, 8px);
+  }
+
+  [part~='navigation-button-next'] {
+    inset-inline-end: var(--rc-carousel-navigation-inset, 8px);
+  }
+
+  #pagination {
+    position: absolute;
+    inset-block-end: var(--rc-carousel-navigation-inset, 8px);
+    inset-inline: 0;
+    display: flex;
+    justify-content: center;
+    gap: var(--rc-carousel-gap, 8px);
+  }
+
+  [part~='pagination-item'] {
+    inline-size: var(--rc-carousel-pagination-item-size, 8px);
+    block-size: var(--rc-carousel-pagination-item-size, 8px);
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background: var(
+      --rc-carousel-pagination-item-color,
+      color-mix(in srgb, CanvasText 40%, transparent)
+    );
+    cursor: pointer;
+  }
+
+  [part~='pagination-item-active'] {
+    background: var(--rc-carousel-pagination-item-active-color, Highlight);
+    cursor: default;
+  }
+`;
+var T = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, o = (c, t, e, s) => {
+  for (var i = s > 1 ? void 0 : s ? $(t, e) : t, n = c.length - 1, a; n >= 0; n--)
+    (a = c[n]) && (i = (s ? a(t, e, i) : a(i)) || i);
+  return s && i && T(t, e, i), i;
+};
+const z = 300, P = 120, _ = class _ extends m {
+  constructor() {
+    super(), this._items = [], this._cloneItems = [], this._mounted = !1, this._suppressSync = !1, this._pendingInstant = !1, this.loop = !1, this.navigation = !1, this.pagination = !1, this.mouseDragging = !1, this._dragging = !1, this._dragStartLeft = 0, this._suppressNextClick = !1, this._dragController = new I(this, {
+      target: () => this._trackEl ?? null,
+      axis: "x",
+      activation: "axis",
+      canStart: (t) => this.mouseDragging && t.pointerType === "mouse",
+      onStart: () => {
+        this._dragging = !0, this._dragStartLeft = this._trackEl?.scrollLeft ?? 0, this._suppressNextClick = !0, this._trackEl && (this._trackEl.style.scrollSnapType = "none");
+      },
+      onMove: (t) => {
+        this._trackEl && (this._trackEl.scrollLeft = this._dragStartLeft - t.deltaX);
+      },
+      onEnd: (t) => this._endDrag(t),
+      onCancel: (t) => this._endDrag(t)
+    }), this._busy = !1, this._defaultActiveIndex = 0, this._activeIndexInitialized = !1, this._onSlotChange = () => {
+      this._syncItems();
+    }, this._onScroll = () => {
+      this._settleTimer !== void 0 && clearTimeout(this._settleTimer), this._busy = !0, this._settleTimer = setTimeout(this._commitSettledIndex, P);
+    }, this._commitSettledIndex = () => {
+      if (this._busy = !1, !this._trackEl)
+        return;
+      const t = this._trackSlots(), e = k(
+        t.map((n) => n.point),
+        this._trackEl.scrollLeft
+      ), s = e >= 0 ? t[e] : void 0;
+      if (!s)
+        return;
+      if (s.isClone) {
+        const n = t.find((a) => !a.isClone && a.index === s.index);
+        n && (this._trackEl.scrollLeft = n.point);
+      }
+      if (s.index === this.activeIndex)
+        return;
+      const i = this._activeIndex !== void 0;
+      i || (this._suppressSync = !0), this._setActiveIndex(s.index, "swipe"), i && this.activeIndex !== s.index && this._scrollToIndex(this.activeIndex, !0);
+    }, this._onNavigate = (t) => {
+      switch (t) {
+        case "next":
+          this._step(1, "keyboard");
+          break;
+        case "prev":
+          this._step(-1, "keyboard");
+          break;
+        case "start": {
+          const e = g(this._snapPoints(), -1);
+          e >= 0 && this._setActiveIndex(e, "keyboard");
+          break;
+        }
+        case "end": {
+          const e = g(this._snapPoints(), 1);
+          e >= 0 && this._setActiveIndex(e, "keyboard");
+          break;
+        }
+      }
+    }, this._onTrackClickCapture = (t) => {
+      this._suppressNextClick && (this._suppressNextClick = !1, t.stopPropagation(), t.preventDefault());
+    }, this._onPaginationFocus = (t) => {
+      const e = this._paginationButtons(), s = t.composedPath().find((i) => e.includes(i));
+      s && e.forEach((i) => i.setAttribute("tabindex", i === s ? "0" : "-1"));
+    }, this._onPaginationNavigate = (t) => {
+      const e = this._paginationButtons();
+      if (!e.length)
+        return;
+      const s = e.indexOf(this.shadowRoot?.activeElement), i = s < 0 ? 0 : s;
+      switch (t) {
+        case "next":
+          e[(i + 1) % e.length]?.focus();
+          break;
+        case "prev":
+          e[(i - 1 + e.length) % e.length]?.focus();
+          break;
+        case "start":
+          e[0]?.focus();
+          break;
+        case "end":
+          e[e.length - 1]?.focus();
+          break;
+      }
+    }, this._internals = this.attachInternals(), this._internals.role = "group";
+  }
+  get activeIndex() {
+    return this._clampIndex(
+      this._activeIndex ?? this._uncontrolledActiveIndex ?? this._defaultActiveIndex
+    );
+  }
+  set activeIndex(t) {
+    const e = this.activeIndex;
+    this._activeIndex = t, this._activeIndexInitialized = !0, this.requestUpdate("activeIndex", e);
+  }
+  get defaultActiveIndex() {
+    return this._defaultActiveIndex;
+  }
+  set defaultActiveIndex(t) {
+    const e = this._defaultActiveIndex;
+    this._defaultActiveIndex = t, !this._activeIndexInitialized && this._activeIndex === void 0 && this._uncontrolledActiveIndex === void 0 && this.requestUpdate("activeIndex", e), this.requestUpdate("defaultActiveIndex", e);
+  }
+  /**
+   * The scroll-snap track element. Internal integration point consumed by
+   * `rc-carousel-item`'s IntersectionObserver (its `root` must be this
+   * track, not the viewport, so peeking/clipped-but-viewport-visible
+   * slides are still correctly detected as off-screen) — not a public API.
+   */
+  get trackElement() {
+    return this._trackEl ?? null;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._items = this._directItems(), this._setItemPositions(), this.hasAttribute("role") || this.setAttribute("role", "group"), this.hasAttribute("aria-roledescription") || this.setAttribute("aria-roledescription", "carousel");
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._settleTimer !== void 0 && clearTimeout(this._settleTimer);
+  }
+  firstUpdated() {
+    this._scrollToIndex(this.activeIndex, !0), this._mounted = !0;
+  }
+  updated(t) {
+    if (super.updated(t), this._initPaginationTabIndex(), t.has("loop") && this._mounted && this._syncItems(), !t.has("activeIndex"))
+      return;
+    if (this._suppressSync) {
+      this._suppressSync = !1;
+      return;
+    }
+    const e = !this._mounted || this._pendingInstant;
+    this._pendingInstant = !1, this._scrollToIndex(this.activeIndex, e);
+  }
+  /** Moves to the next slide. */
+  next() {
+    this._step(1, "api");
+  }
+  /** Moves to the previous slide. */
+  previous() {
+    this._step(-1, "api");
+  }
+  /** Moves directly to a slide index. */
+  goToIndex(t, e = !1) {
+    this._pendingInstant = e, this._setActiveIndex(t, "api");
+  }
+  _step(t, e) {
+    this._setActiveIndex(this.activeIndex + t, e);
+  }
+  /** Whether a previous/next button (or an equivalent keyboard action)
+   * currently has anywhere to go — always true when `loop` is set and
+   * there's more than one slide. */
+  _canStep(t) {
+    const e = this._items.length;
+    return e <= 1 ? !1 : this.loop ? !0 : t > 0 ? this.activeIndex < e - 1 : this.activeIndex > 0;
+  }
+  /**
+   * Wraps when `loop` is set, otherwise clamps to the real slide range.
+   * Wrapping here covers button/keyboard navigation; a swipe wraps
+   * seamlessly through `_trackSlots`'s cloned lead/trail slides instead,
+   * since that needs the clones' own track positions, not just an index.
+   */
+  _clampIndex(t) {
+    const e = this._items.length;
+    return e === 0 ? 0 : this.loop ? (t % e + e) % e : Math.min(e - 1, Math.max(0, t));
+  }
+  _snapPoints() {
+    const t = this._itemStep();
+    return this._items.map((e, s) => s * t);
+  }
+  /**
+   * Every scrollable track position in rendered order, including cloned
+   * lead/trail slides when `loop` is on — `[lastClone, item0, ..., itemN-1,
+   * firstClone]`. Each slot reports which real slide index it represents
+   * (a clone mirrors the real slide it duplicates), so both scrolling to
+   * an index and reading back a settled scroll position can stay in terms
+   * of real indices while the clones do the seamless-wrap work.
+   */
+  _trackSlots() {
+    const t = this._itemStep(), e = this._items.length;
+    return !this.loop || e < 2 ? this._items.map((s, i) => ({ point: i * t, index: i, isClone: !1 })) : [
+      { point: 0, index: e - 1, isClone: !0 },
+      ...this._items.map((s, i) => ({ point: (i + 1) * t, index: i, isClone: !1 })),
+      { point: (e + 1) * t, index: 0, isClone: !0 }
+    ];
+  }
+  _itemStep() {
+    if (!this._trackEl)
+      return 1;
+    const t = this._items[0];
+    if (!(t instanceof HTMLElement))
+      return this._trackEl.clientWidth;
+    const e = Number.parseFloat(getComputedStyle(this._trackEl).columnGap || "0") || 0;
+    return t.offsetWidth + e;
+  }
+  _setActiveIndex(t, e) {
+    const s = this._clampIndex(t), i = this.activeIndex;
+    i !== s && (this._activeIndex === void 0 && (this._uncontrolledActiveIndex = s, this.requestUpdate("activeIndex", i)), this.dispatchEvent(
+      new CustomEvent("rc-carousel-change", {
+        bubbles: !0,
+        composed: !0,
+        detail: { index: s, trigger: e }
+      })
+    ));
+  }
+  _scrollToIndex(t, e) {
+    if (!this._trackEl)
+      return;
+    const s = this._trackSlots().find((a) => !a.isClone && a.index === t), i = s ? s.point : t * this._itemStep(), n = this.ownerDocument.defaultView?.matchMedia("(prefers-reduced-motion: reduce)").matches ?? !1;
+    e || n ? this._trackEl.scrollLeft = i : this._trackEl.scrollTo({ left: i, behavior: "smooth" });
+  }
+  _directItems() {
+    return Array.from(this.children).filter(
+      (t) => t.tagName === "RC-CAROUSEL-ITEM" && !t.hasAttribute("data-clone")
+    );
+  }
+  _setItemPositions() {
+    this._items.forEach((t, e) => {
+      t.position = `${e + 1} of ${this._items.length}`;
+    });
+  }
+  /**
+   * Prepending/appending the loop clones below is itself a light-DOM
+   * mutation on this host, which re-fires `slotchange` (asynchronously) —
+   * `_onSlotChange` calls back into this method, so a naive unconditional
+   * remove-then-recreate would recreate a fresh pair of clones on every
+   * pass forever. Clones are always excluded from `nextItems`, so the
+   * real item list is byte-for-byte identical on that re-entrant pass;
+   * only rebuild clone DOM when either the real items or the desired
+   * clone presence has actually changed, so the re-entrant pass is a
+   * true no-op and the recursion terminates.
+   */
+  _syncItems() {
+    const e = (this._slotEl?.assignedElements() ?? []).filter(
+      (a) => a.tagName === "RC-CAROUSEL-ITEM" && !a.hasAttribute("data-clone")
+    ), s = e.length !== this._items.length || e.some((a, y) => a !== this._items[y]), i = this.loop && e.length > 1, n = this._cloneItems.length > 0;
+    this._items = e, this._setItemPositions(), s && this._mounted && this.requestUpdate(), !(!s && i === n) && (this._removeClones(), i && this._addClones());
+  }
+  /**
+   * Clones the first and last slide and prepends/appends them
+   * (`data-clone="<real index>"` marks them, excluded from `_items` and
+   * from position numbering) so the track has real scrollable content
+   * past both visual ends. `_trackSlots`/`_commitSettledIndex` detect
+   * when a clone settles and instantly re-anchor to the real slide it
+   * mirrors — Shoelace's proven technique for a seamless infinite swipe,
+   * rather than a discontinuous index-modulo jump back to the other end.
+   */
+  _addClones() {
+    const t = this._items[0], e = this._items[this._items.length - 1];
+    if (!t || !e)
+      return;
+    const s = e.cloneNode(!0);
+    s.setAttribute("data-clone", String(this._items.length - 1)), this._sanitizeClone(s), this.prepend(s);
+    const i = t.cloneNode(!0);
+    i.setAttribute("data-clone", "0"), this._sanitizeClone(i), this.append(i), this._cloneItems = [s, i];
+  }
+  /** Keeps visual loop clones out of forms, focus order, and the accessibility tree. */
+  _sanitizeClone(t) {
+    t.setAttribute("aria-hidden", "true"), t.setAttribute("inert", "");
+    for (const e of [t, ...t.querySelectorAll("*")])
+      e.removeAttribute("id"), e.removeAttribute("name"), e.removeAttribute("form");
+  }
+  _removeClones() {
+    this._cloneItems.forEach((t) => t.remove()), this._cloneItems = [];
+  }
+  /**
+   * On release, a fast enough flick pre-nudges `scrollLeft` to the next
+   * snap point in the drag direction (a "decisive swipe" — mirroring
+   * `rc-bottom-sheet`'s own velocity-vs-nearest-point settle heuristic,
+   * adapted from "jump to the extreme end" for a 2-point sheet to "advance
+   * one further point" for a carousel that can have many). Either way,
+   * this hands off to the same debounced settle path a native swipe
+   * already goes through — our own `scrollLeft` writes during the drag
+   * already fired real `scroll` events, so `_onScroll` just needs to run
+   * its usual timer to pick up wherever things ended.
+   */
+  _endDrag(t) {
+    if (this._dragging = !1, this._trackEl && (this._trackEl.style.scrollSnapType = ""), this._trackEl && Math.abs(t.velocityX) > z) {
+      const e = this._trackSlots(), s = t.velocityX < 0 ? 1 : -1, i = A(
+        e.map((a) => a.point),
+        this._trackEl.scrollLeft,
+        s
+      ), n = e[i];
+      n && (this._trackEl.scrollLeft = n.point);
+    }
+    this._onScroll();
+  }
+  _paginationButtons() {
+    return Array.from(
+      this.shadowRoot?.querySelectorAll("[data-pagination-item]") ?? []
+    );
+  }
+  /**
+   * One-time tabindex seed for pagination buttons that have never
+   * received focus yet (matching `activeIndex`, the sane default) —
+   * `_onPaginationFocus` takes over from there. Safe to call on every
+   * render: a no-op once every button already has some tabindex value.
+   */
+  _initPaginationTabIndex() {
+    this._paginationButtons().forEach((t, e) => {
+      t.hasAttribute("tabindex") || t.setAttribute("tabindex", e === this.activeIndex ? "0" : "-1");
+    });
+  }
+  render() {
+    const t = this._canStep(-1), e = this._canStep(1);
+    return h`
+      <div
+        id="track"
+        part="track"
+        tabindex="0"
+        class=${this._dragging ? "dragging" : d}
+        aria-busy=${this._busy ? "true" : "false"}
+        aria-atomic="true"
+        @scroll=${this._onScroll}
+        @click=${{ handleEvent: this._onTrackClickCapture, capture: !0 }}
+        ${v(this._onNavigate, { navigationAxis: "horizontal" })}
+      >
+        <slot @slotchange=${this._onSlotChange}></slot>
+      </div>
+
+      ${this.navigation ? h`
+            <div id="navigation" part="navigation">
+              <button
+                type="button"
+                part="navigation-button navigation-button-previous"
+                aria-label="Previous slide"
+                aria-disabled=${t ? "false" : "true"}
+                @click=${() => {
+      t && this._step(-1, "button");
+    }}
+              >
+                <span aria-hidden="true">
+                  <slot name="previous-icon">
+                    <svg
+                      viewBox="0 0 6 10"
+                      width="10"
+                      height="16"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    >
+                      <polyline points="5,1 1,5 5,9" />
+                    </svg>
+                  </slot>
+                </span>
+              </button>
+              <button
+                type="button"
+                part="navigation-button navigation-button-next"
+                aria-label="Next slide"
+                aria-disabled=${e ? "false" : "true"}
+                @click=${() => {
+      e && this._step(1, "button");
+    }}
+              >
+                <span aria-hidden="true">
+                  <slot name="next-icon">
+                    <svg
+                      viewBox="0 0 6 10"
+                      width="10"
+                      height="16"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    >
+                      <polyline points="1,1 5,5 1,9" />
+                    </svg>
+                  </slot>
+                </span>
+              </button>
+            </div>
+          ` : d}
+      ${this.pagination ? h`
+            <div
+              id="pagination"
+              part="pagination"
+              role="group"
+              aria-label="Choose slide to display"
+              @focusin=${this._onPaginationFocus}
+              ${v(this._onPaginationNavigate, { navigationAxis: "horizontal" })}
+            >
+              ${this._items.map(
+      (s, i) => h`
+                  <button
+                    type="button"
+                    data-pagination-item
+                    part="pagination-item${i === this.activeIndex ? " pagination-item-active" : ""}"
+                    aria-label="Go to slide ${i + 1}"
+                    aria-current=${i === this.activeIndex ? "true" : "false"}
+                    aria-disabled=${i === this.activeIndex ? "true" : "false"}
+                    @click=${() => this._setActiveIndex(i, "button")}
+                  ></button>
+                `
+    )}
+            </div>
+          ` : d}
+    `;
+  }
+};
+_.styles = w;
+let r = _;
+o([
+  b("#track")
+], r.prototype, "_trackEl", 2);
+o([
+  b("slot:not([name])")
+], r.prototype, "_slotEl", 2);
+o([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "loop", 2);
+o([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "navigation", 2);
+o([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "pagination", 2);
+o([
+  l({ type: Boolean, reflect: !0, attribute: "mouse-dragging" })
+], r.prototype, "mouseDragging", 2);
+o([
+  x()
+], r.prototype, "_dragging", 2);
+o([
+  x()
+], r.prototype, "_busy", 2);
+o([
+  l({ type: Number, attribute: "active-index" })
+], r.prototype, "activeIndex", 1);
+o([
+  l({ type: Number, attribute: "default-active-index" })
+], r.prototype, "defaultActiveIndex", 1);
+export {
+  r as R,
+  u as a
+};
+//# sourceMappingURL=rc-carousel-CdDEH9fb.js.map