@rcarls/rc-carousel 0.6.0 → 0.7.0

package/dist/{rc-carousel-CdDEH9fb.js → rc-carousel-CGHUVDLI.js}

@@ -1,64 +1,40 @@
-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;
+import { css as k, LitElement as A, html as h, nothing as p } from "lit";
+import { property as c, query as S, state as w } from "lit/decorators.js";
+import { syncDefaultAttribute as _, RafScheduler as E, MessagesController as T, HORIZONTAL_LTR_FLOW as O, DragGestureController as D, logicalDelta as v, findNearestSnapIndex as P, findExtremeSnapIndex as m, resolveFlow as b, clientSize as $, physicalAxis as z, getScrollOffset as N, setScrollOffset as x, findNextSnapIndex as R, keyNavigation as I, numberFormat as y } from "@rcarls/rc-common";
+const L = k`:host{box-sizing:border-box;scroll-snap-align:var(--rc-carousel-item-scroll-snap-align,start);scroll-snap-stop:always;min-block-size:0;min-inline-size:0;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;display:block}:host([hidden]){display:none}:host([aria-hidden=true]){pointer-events:none}`;
+var F = Object.defineProperty, C = (l, t, e, i) => {
+  for (var s = void 0, n = l.length - 1, o; n >= 0; n--)
+    (o = l[n]) && (s = o(t, e, s) || s);
+  return s && F(t, e, s), s;
 };
-const p = class p extends m {
+const f = class f extends A {
   constructor() {
-    super(), this._intersectionObserver = null, this.position = "", this._internals = this.attachInternals(), this._internals.role = "group";
+    super(), this._intersectionObserver = null, this.position = "", this.roleDescription = "slide", this._writtenLabel = null, this._writtenRoleDescription = null, 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();
+    super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "group"), this._syncRoleDescription(), this._observeIntersection();
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this._intersectionObserver?.disconnect(), this._intersectionObserver = null;
   }
   updated(t) {
-    super.updated(t), t.has("position") && this._syncDefaultLabel();
+    super.updated(t), t.has("position") && this._syncDefaultLabel(), t.has("roleDescription") && this._syncRoleDescription();
   }
   _syncDefaultLabel() {
-    this.hasAttribute("aria-label") || this.hasAttribute("aria-labelledby") || this.position && this.setAttribute("aria-label", this.position);
+    this.hasAttribute("aria-labelledby") || !this.position || (this._writtenLabel = _(
+      this,
+      "aria-label",
+      this.position,
+      this._writtenLabel
+    ));
+  }
+  _syncRoleDescription() {
+    this._writtenRoleDescription = _(
+      this,
+      "aria-roledescription",
+      this.roleDescription,
+      this._writtenRoleDescription
+    );
   }
   /**
    * Observes intersection against the parent carousel's own scroll
@@ -83,9 +59,9 @@ const p = class p extends m {
       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);
+      ([i]) => {
+        const s = i !== void 0 && !i.isIntersecting;
+        s ? (this.contains(this.ownerDocument.activeElement) && t?.trackElement?.focus(), this.setAttribute("aria-hidden", "true")) : this.removeAttribute("aria-hidden"), this.toggleAttribute("inert", s);
       },
       // A low/zero threshold would count a peeking neighbor's own sliver
       // of visible pixels as "intersecting", never hiding it — a peek is
@@ -99,168 +75,76 @@ const p = class p extends m {
     return h`<slot></slot>`;
   }
 };
-p.styles = C;
-let u = p;
-E([
-  l({ type: String, attribute: !1 })
+f.styles = L;
+let u = f;
+C([
+  c({ 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;
+C([
+  c({ type: String, attribute: !1 })
+], u.prototype, "roleDescription");
+const q = k`:host{color:var(--rc-carousel-color,CanvasText);color-scheme:inherit;display:block;position:relative}#track{grid-auto-flow:column;grid-auto-columns:var(--rc-carousel-slide-size,calc(100% - 4rem));column-gap:var(--rc-carousel-gap,8px);overflow-inline:auto;overflow-block:hidden;overscroll-behavior-inline:contain;scroll-snap-type:inline mandatory;scrollbar-width:none;block-size:100%;inline-size:100%;display:grid;overflow:auto hidden}#track::-webkit-scrollbar{display:none}:host([mouse-dragging]) #track{cursor:grab}:host([mouse-dragging]) #track.dragging{cursor:grabbing}#navigation{display:contents}[part~=navigation-button]{inline-size:var(--rc-carousel-navigation-button-size,40px);block-size:var(--rc-carousel-navigation-button-size,40px);background:var(--rc-carousel-navigation-button-background,color-mix(in srgb, CanvasText 12%, transparent));color:var(--rc-carousel-navigation-button-color,CanvasText);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;display:inline-flex;position:absolute;top:50%;translate:0 -50%}[part~=navigation-button][aria-disabled=true]{opacity:.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{justify-content:center;gap:var(--rc-carousel-gap,8px);display:flex;position:absolute;inset-block-end:var(--rc-carousel-navigation-inset,8px);inset-inline:0}[part~=pagination-item]{inline-size:var(--rc-carousel-pagination-item-size,8px);block-size:var(--rc-carousel-pagination-item-size,8px);background:var(--rc-carousel-pagination-item-color,color-mix(in srgb, CanvasText 40%, transparent));cursor:pointer;border:none;border-radius:50%;padding:0}[part~=pagination-item-active]{background:var(--rc-carousel-pagination-item-active-color,Highlight);cursor:default}:host(:dir(rtl)) [part~=navigation-button] svg{transform:scaleX(-1)}`;
+var M = Object.defineProperty, U = Object.getOwnPropertyDescriptor, a = (l, t, e, i) => {
+  for (var s = i > 1 ? void 0 : i ? U(t, e) : t, n = l.length - 1, o; n >= 0; n--)
+    (o = l[n]) && (s = (i ? o(t, e, s) : o(s)) || s);
+  return i && s && M(t, e, s), s;
 };
-const z = 300, P = 120, _ = class _ extends m {
+const B = 300, j = Object.freeze({
+  carousel: "carousel",
+  slide: "slide",
+  position: (l, t, e) => {
+    const i = y(e, { useGrouping: !1 });
+    return `${i.format(l)} of ${i.format(t)}`;
+  },
+  previous: "Previous slide",
+  next: "Next slide",
+  picker: "Choose slide to display",
+  goToSlide: (l, t, e) => `Go to slide ${y(e, { useGrouping: !1 }).format(l)}`
+}), G = 120, g = class g extends A {
   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, {
+    super(), this._items = [], this._cloneItems = [], this._mounted = !1, this._suppressSync = !1, this._pendingInstant = !1, this._initialPosition = new E(this), this._writtenRoleDescription = null, this._messages = new T(
+      this,
+      "rc-carousel",
+      j,
+      {
+        overrides: () => this.messages
+      }
+    ), this.loop = !1, this.navigation = !1, this.pagination = !1, this.mouseDragging = !1, this._dragging = !1, this._dragStartOffset = 0, this._flow = O, this._dragAxis = "x", this._suppressNextClick = !1, this._dragController = new D(this, {
       target: () => this._trackEl ?? null,
       axis: "x",
       activation: "axis",
-      canStart: (t) => this.mouseDragging && t.pointerType === "mouse",
+      canStart: (t) => !this.mouseDragging || t.pointerType !== "mouse" ? !1 : (this._resolveFlow(), !0),
       onStart: () => {
-        this._dragging = !0, this._dragStartLeft = this._trackEl?.scrollLeft ?? 0, this._suppressNextClick = !0, this._trackEl && (this._trackEl.style.scrollSnapType = "none");
+        this._dragging = !0, this._dragStartOffset = this._trackOffset(), this._suppressNextClick = !0, this._trackEl && (this._trackEl.style.scrollSnapType = "none");
       },
       onMove: (t) => {
-        this._trackEl && (this._trackEl.scrollLeft = this._dragStartLeft - t.deltaX);
+        this._setTrackOffset(
+          this._dragStartOffset - v({ dx: t.deltaX, dy: t.deltaY }, "inline", this._flow)
+        );
       },
       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._settleTimer !== void 0 && clearTimeout(this._settleTimer), this._busy = !0, this._settleTimer = setTimeout(this._commitSettledIndex, G);
     }, this._commitSettledIndex = () => {
       if (this._busy = !1, !this._trackEl)
         return;
-      const t = this._trackSlots(), e = k(
+      const t = this._trackSlots(), e = P(
         t.map((n) => n.point),
-        this._trackEl.scrollLeft
-      ), s = e >= 0 ? t[e] : void 0;
-      if (!s)
+        this._trackOffset()
+      ), i = e >= 0 ? t[e] : void 0;
+      if (!i)
         return;
-      if (s.isClone) {
-        const n = t.find((a) => !a.isClone && a.index === s.index);
-        n && (this._trackEl.scrollLeft = n.point);
+      if (i.isClone) {
+        const n = t.find((o) => !o.isClone && o.index === i.index);
+        n && this._setTrackOffset(n.point);
       }
-      if (s.index === this.activeIndex)
+      if (i.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);
+      const s = this._activeIndex !== void 0;
+      s || (this._suppressSync = !0), this._setActiveIndex(i.index, "swipe"), s && this.activeIndex !== i.index && this._scrollToIndex(this.activeIndex, !0);
     }, this._onNavigate = (t) => {
       switch (t) {
         case "next":
@@ -270,12 +154,12 @@ const z = 300, P = 120, _ = class _ extends m {
           this._step(-1, "keyboard");
           break;
         case "start": {
-          const e = g(this._snapPoints(), -1);
+          const e = m(this._snapPoints(), -1);
           e >= 0 && this._setActiveIndex(e, "keyboard");
           break;
         }
         case "end": {
-          const e = g(this._snapPoints(), 1);
+          const e = m(this._snapPoints(), 1);
           e >= 0 && this._setActiveIndex(e, "keyboard");
           break;
         }
@@ -283,19 +167,19 @@ const z = 300, P = 120, _ = class _ extends m {
     }, 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"));
+      const e = this._paginationButtons(), i = t.composedPath().find((s) => e.includes(s));
+      i && e.forEach((s) => s.setAttribute("tabindex", s === i ? "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;
+      const i = e.indexOf(this.shadowRoot?.activeElement), s = i < 0 ? 0 : i;
       switch (t) {
         case "next":
-          e[(i + 1) % e.length]?.focus();
+          e[(s + 1) % e.length]?.focus();
           break;
         case "prev":
-          e[(i - 1 + e.length) % e.length]?.focus();
+          e[(s - 1 + e.length) % e.length]?.focus();
           break;
         case "start":
           e[0]?.focus();
@@ -332,17 +216,21 @@ const z = 300, P = 120, _ = class _ extends m {
     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");
+    super.connectedCallback(), this._items = this._directItems(), this._setItemPositions(), this.hasAttribute("role") || this.setAttribute("role", "group"), this._syncText(), this.hasUpdated && !this._mounted && this._queueInitialPosition();
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this._settleTimer !== void 0 && clearTimeout(this._settleTimer);
   }
   firstUpdated() {
-    this._scrollToIndex(this.activeIndex, !0), this._mounted = !0;
+    this._syncActiveItemAccessibility(this.activeIndex), this._queueInitialPosition();
   }
   updated(t) {
-    if (super.updated(t), this._initPaginationTabIndex(), t.has("loop") && this._mounted && this._syncItems(), !t.has("activeIndex"))
+    if (super.updated(t), this._syncText(), this._initPaginationTabIndex(), t.has("loop") && this._mounted && this._syncItems(), !t.has("activeIndex"))
+      return;
+    if (this._syncActiveItemAccessibility(this.activeIndex), !this._mounted) {
+      this._queueInitialPosition();
       return;
+    }
     if (this._suppressSync) {
       this._suppressSync = !1;
       return;
@@ -384,7 +272,7 @@ const z = 300, P = 120, _ = class _ extends m {
   }
   _snapPoints() {
     const t = this._itemStep();
-    return this._items.map((e, s) => s * t);
+    return this._items.map((e, i) => i * t);
   }
   /**
    * Every scrollable track position in rendered order, including cloned
@@ -394,38 +282,96 @@ const z = 300, P = 120, _ = class _ extends m {
    * 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 })) : [
+  _trackSlots(t = this._itemStep()) {
+    const e = this._items.length;
+    return !this.loop || e < 2 ? this._items.map((i, s) => ({ point: s * t, index: s, isClone: !1 })) : [
       { point: 0, index: e - 1, isClone: !0 },
-      ...this._items.map((s, i) => ({ point: (i + 1) * t, index: i, isClone: !1 })),
+      ...this._items.map((i, s) => ({ point: (s + 1) * t, index: s, 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;
+    const t = this._measureTrack();
+    return t ? (this._applyFlow(t.flow), t.step) : 1;
+  }
+  _measureTrack() {
+    const t = this._trackEl;
+    if (!t)
+      return null;
+    const e = this._items[0], i = b(t), s = e instanceof HTMLElement ? (i.inline === "x" ? e.offsetWidth : e.offsetHeight) + (Number.parseFloat(getComputedStyle(t).columnGap || "0") || 0) : $(t, "inline", i);
+    return { track: t, flow: i, step: s };
+  }
+  _applyFlow(t) {
+    this._flow = t;
+    const e = z("inline", t);
+    !this._dragging && e !== this._dragAxis && (this._dragAxis = e, this._dragController.setOptions({ axis: e }));
+  }
+  /**
+   * Re-reads the track's writing mode and direction. Called at the start of
+   * each scroll operation and on each drag's pointerdown rather than cached
+   * for the element's life, since neither a `dir` nor a writing-mode change
+   * on an ancestor fires an event. The drag gesture's physical axis follows,
+   * so a carousel in vertical text drags vertically.
+   */
+  _resolveFlow() {
+    return this._trackEl ? (this._applyFlow(b(this._trackEl)), this._flow) : this._flow;
+  }
+  /** Scroll distance from the track's logical start, never negative. */
+  _trackOffset() {
+    return this._trackEl ? N(this._trackEl, "inline", this._flow) : 0;
+  }
+  _setTrackOffset(t, e = "auto") {
+    this._trackEl && x(this._trackEl, "inline", t, this._flow, 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(
+    const i = this._clampIndex(t), s = this.activeIndex;
+    s !== i && (this._activeIndex === void 0 && (this._uncontrolledActiveIndex = i, this.requestUpdate("activeIndex", s)), this.dispatchEvent(
       new CustomEvent("rc-carousel-change", {
         bubbles: !0,
         composed: !0,
-        detail: { index: s, trigger: e }
+        detail: { index: i, 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" });
+    const i = this._trackSlots().find((o) => !o.isClone && o.index === t), s = i ? i.point : t * this._itemStep(), n = this.ownerDocument.defaultView?.matchMedia("(prefers-reduced-motion: reduce)").matches ?? !1;
+    this._setTrackOffset(s, e || n ? "auto" : "smooth");
+  }
+  _queueInitialPosition() {
+    this._initialPosition.schedulePhased(
+      () => this._sampleInitialPosition(),
+      (t) => this._applyInitialPosition(t)
+    );
+  }
+  _sampleInitialPosition() {
+    const t = this._measureTrack();
+    if (!t)
+      return null;
+    const e = this._trackSlots(t.step).find(
+      (i) => !i.isClone && i.index === this.activeIndex
+    );
+    return {
+      ...t,
+      offset: e ? e.point : this.activeIndex * t.step
+    };
+  }
+  _applyInitialPosition(t) {
+    !t || !this.isConnected || this._trackEl !== t.track || (this._applyFlow(t.flow), x(t.track, "inline", t.offset, t.flow, "auto"), this._mounted = !0);
+  }
+  /**
+   * Keep the authored active slide available to assistive technology even
+   * before a programmatic scroll produces its next intersection callback.
+   * IntersectionObserver still takes over during direct manipulation, where
+   * the visually dominant slide can change before scroll settling updates the
+   * public active index.
+   */
+  _syncActiveItemAccessibility(t) {
+    this._directItems().forEach((e, i) => {
+      const s = i !== t;
+      e.toggleAttribute("aria-hidden", s), e.toggleAttribute("inert", s);
+    });
   }
   _directItems() {
     return Array.from(this.children).filter(
@@ -433,10 +379,20 @@ const z = 300, P = 120, _ = class _ extends m {
     );
   }
   _setItemPositions() {
-    this._items.forEach((t, e) => {
-      t.position = `${e + 1} of ${this._items.length}`;
+    const t = this._messages.value;
+    this._items.forEach((e, i) => {
+      e.position = t.position(i + 1, this._items.length, this._messages.locale), e.roleDescription = t.slide;
     });
   }
+  /** Re-applies text written outside the template, for a new locale or `messages`. */
+  _syncText() {
+    this._writtenRoleDescription = _(
+      this,
+      "aria-roledescription",
+      this._messages.value.carousel,
+      this._writtenRoleDescription
+    ), this._setItemPositions();
+  }
   /**
    * Prepending/appending the loop clones below is itself a light-DOM
    * mutation on this host, which re-fires `slotchange` (asynchronously) —
@@ -450,9 +406,9 @@ const z = 300, P = 120, _ = class _ extends m {
    */
   _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());
+      (o) => o.tagName === "RC-CAROUSEL-ITEM" && !o.hasAttribute("data-clone")
+    ), i = e.length !== this._items.length || e.some((o, d) => o !== this._items[d]), s = this.loop && e.length > 1, n = this._cloneItems.length > 0;
+    this._items = e, this._setItemPositions(), i && this._mounted && this.requestUpdate(), !(!i && s === n) && (this._removeClones(), s && this._addClones());
   }
   /**
    * Clones the first and last slide and prepends/appends them
@@ -467,10 +423,10 @@ const z = 300, P = 120, _ = class _ extends m {
     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];
+    const i = e.cloneNode(!0);
+    i.setAttribute("data-clone", String(this._items.length - 1)), this._sanitizeClone(i), this.prepend(i);
+    const s = t.cloneNode(!0);
+    s.setAttribute("data-clone", "0"), this._sanitizeClone(s), this.append(s), this._cloneItems = [i, s];
   }
   /** Keeps visual loop clones out of forms, focus order, and the accessibility tree. */
   _sanitizeClone(t) {
@@ -482,24 +438,30 @@ const z = 300, P = 120, _ = class _ extends m {
     this._cloneItems.forEach((t) => t.remove()), this._cloneItems = [];
   }
   /**
-   * On release, a fast enough flick pre-nudges `scrollLeft` to the next
+   * On release, a fast enough flick pre-nudges the scroll offset 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 goes through — our own scroll offset 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,
+    this._dragging = !1, this._trackEl && (this._trackEl.style.scrollSnapType = "");
+    const e = v(
+      { dx: t.velocityX, dy: t.velocityY },
+      "inline",
+      this._flow
+    );
+    if (this._trackEl && Math.abs(e) > B) {
+      const i = this._trackSlots(), s = e < 0 ? 1 : -1, n = R(
+        i.map((d) => d.point),
+        this._trackOffset(),
         s
-      ), n = e[i];
-      n && (this._trackEl.scrollLeft = n.point);
+      ), o = i[n];
+      o && this._setTrackOffset(o.point);
     }
     this._onScroll();
   }
@@ -520,18 +482,18 @@ const z = 300, P = 120, _ = class _ extends m {
     });
   }
   render() {
-    const t = this._canStep(-1), e = this._canStep(1);
+    const t = this._canStep(-1), e = this._canStep(1), i = this._messages.value;
     return h`
       <div
         id="track"
         part="track"
         tabindex="0"
-        class=${this._dragging ? "dragging" : d}
+        class=${this._dragging ? "dragging" : p}
         aria-busy=${this._busy ? "true" : "false"}
         aria-atomic="true"
         @scroll=${this._onScroll}
         @click=${{ handleEvent: this._onTrackClickCapture, capture: !0 }}
-        ${v(this._onNavigate, { navigationAxis: "horizontal" })}
+        ${I(this._onNavigate, { navigationAxis: "horizontal" })}
       >
         <slot @slotchange=${this._onSlotChange}></slot>
       </div>
@@ -541,7 +503,7 @@ const z = 300, P = 120, _ = class _ extends m {
               <button
                 type="button"
                 part="navigation-button navigation-button-previous"
-                aria-label="Previous slide"
+                aria-label=${i.previous}
                 aria-disabled=${t ? "false" : "true"}
                 @click=${() => {
       t && this._step(-1, "button");
@@ -567,7 +529,7 @@ const z = 300, P = 120, _ = class _ extends m {
               <button
                 type="button"
                 part="navigation-button navigation-button-next"
-                aria-label="Next slide"
+                aria-label=${i.next}
                 aria-disabled=${e ? "false" : "true"}
                 @click=${() => {
       e && this._step(1, "button");
@@ -591,68 +553,76 @@ const z = 300, P = 120, _ = class _ extends m {
                 </span>
               </button>
             </div>
-          ` : d}
+          ` : p}
       ${this.pagination ? h`
             <div
               id="pagination"
               part="pagination"
               role="group"
-              aria-label="Choose slide to display"
+              aria-label=${i.picker}
               @focusin=${this._onPaginationFocus}
-              ${v(this._onPaginationNavigate, { navigationAxis: "horizontal" })}
+              ${I(this._onPaginationNavigate, { navigationAxis: "horizontal" })}
             >
               ${this._items.map(
-      (s, i) => h`
+      (s, n) => 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")}
+                    part="pagination-item${n === this.activeIndex ? " pagination-item-active" : ""}"
+                    aria-label=${i.goToSlide(
+        n + 1,
+        this._items.length,
+        this._messages.locale
+      )}
+                    aria-current=${n === this.activeIndex ? "true" : "false"}
+                    aria-disabled=${n === this.activeIndex ? "true" : "false"}
+                    @click=${() => this._setActiveIndex(n, "button")}
                   ></button>
                 `
     )}
             </div>
-          ` : d}
+          ` : p}
     `;
   }
 };
-_.styles = w;
-let r = _;
-o([
-  b("#track")
+g.styles = q;
+let r = g;
+a([
+  S("#track")
 ], r.prototype, "_trackEl", 2);
-o([
-  b("slot:not([name])")
+a([
+  S("slot:not([name])")
 ], r.prototype, "_slotEl", 2);
-o([
-  l({ type: Boolean, reflect: !0 })
+a([
+  c({ attribute: !1 })
+], r.prototype, "messages", 2);
+a([
+  c({ type: Boolean, reflect: !0 })
 ], r.prototype, "loop", 2);
-o([
-  l({ type: Boolean, reflect: !0 })
+a([
+  c({ type: Boolean, reflect: !0 })
 ], r.prototype, "navigation", 2);
-o([
-  l({ type: Boolean, reflect: !0 })
+a([
+  c({ type: Boolean, reflect: !0 })
 ], r.prototype, "pagination", 2);
-o([
-  l({ type: Boolean, reflect: !0, attribute: "mouse-dragging" })
+a([
+  c({ type: Boolean, reflect: !0, attribute: "mouse-dragging" })
 ], r.prototype, "mouseDragging", 2);
-o([
-  x()
+a([
+  w()
 ], r.prototype, "_dragging", 2);
-o([
-  x()
+a([
+  w()
 ], r.prototype, "_busy", 2);
-o([
-  l({ type: Number, attribute: "active-index" })
+a([
+  c({ type: Number, attribute: "active-index" })
 ], r.prototype, "activeIndex", 1);
-o([
-  l({ type: Number, attribute: "default-active-index" })
+a([
+  c({ type: Number, attribute: "default-active-index" })
 ], r.prototype, "defaultActiveIndex", 1);
 export {
+  j as D,
   r as R,
   u as a
 };
-//# sourceMappingURL=rc-carousel-CdDEH9fb.js.map
+//# sourceMappingURL=rc-carousel-CGHUVDLI.js.map