@blakesteve/roster 5.13.0 → 5.15.0

package/dist/components/molecules/Carousel/Carousel.js

@@ -1,21 +1,23 @@
 "use client";
-import { jsx as c, jsxs as k, Fragment as Ht } from "react/jsx-runtime";
-import * as n from "react";
-import { Button as jt } from "../../atoms/Button/Button.js";
-import { cn as y } from "../../../lib/utils.js";
-import { withLabels as zt } from "../../../lib/labels.js";
-import { prefersReducedMotion as Ut } from "../../../internal/motion.js";
-import { currentIndex as Vt, canScrollNext as Wt, canScrollPrev as qt, overflows as Xt, pageTarget as Gt, snapPosition as U, nearestIndex as Jt, CAROUSEL_DRAG_THRESHOLD as Kt } from "./carousel-math.js";
-import { perViewVars as Qt, FLUID_ITEM_WIDTH as Yt, FLUID_CLASSES as Zt } from "./carousel-layout.js";
-import { useKeyFocus as te } from "../../../internal/key-focus.js";
-const ee = { position: (i, u) => `${i} of ${u}` }, re = (i) => Math.min(3e3, 500 + i * 0.35), ne = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable]:not([contenteditable="false"])', V = (i) => typeof i == "number" ? `${i}px` : i;
-function st(i) {
-  const u = parseFloat(i);
+import { jsx as g, jsxs as q, Fragment as Ee } from "react/jsx-runtime";
+import * as s from "react";
+import { Button as Te } from "../../atoms/Button/Button.js";
+import { cn as F } from "../../../lib/utils.js";
+import { withLabels as Ie } from "../../../lib/labels.js";
+import { prefersReducedMotion as Ne } from "../../../internal/motion.js";
+import { currentIndex as Ce, canScrollNext as Re, canScrollPrev as Le, overflows as Pe, pageTarget as De, revealTarget as Lt, snapPosition as ct, pageStep as Oe, nearestIndex as Me, CAROUSEL_DRAG_THRESHOLD as Ae } from "./carousel-math.js";
+import { perViewVars as Fe, FLUID_ITEM_WIDTH as _e, FLUID_CLASSES as $e } from "./carousel-layout.js";
+import { survivingNeighbor as Be, TYPEAHEAD_RESET_MS as He, typeaheadIndex as ze } from "./carousel-selection.js";
+import { useKeyFocus as Ve } from "../../../internal/key-focus.js";
+import { isDevelopment as je } from "../../../internal/dev.js";
+const Ke = { position: (a, u) => `${a} of ${u}` }, Ue = (a) => Math.min(3e3, 500 + a * 0.35), at = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable]:not([contenteditable="false"])', ut = (a) => typeof a == "number" ? `${a}px` : a;
+function Pt(a) {
+  const u = parseFloat(a);
   return Number.isFinite(u) ? u : 0;
 }
-const se = "rst:hidden rst:[@media(any-hover:hover)]:inline-flex", oe = "rst:hidden rst:[@media(any-hover:hover)]:flex";
-function ot({ direction: i }) {
-  return /* @__PURE__ */ c(
+const qe = "rst:hidden rst:[@media(any-hover:hover)]:inline-flex", We = "rst:hidden rst:[@media(any-hover:hover)]:flex";
+function Dt({ direction: a }) {
+  return /* @__PURE__ */ g(
     "svg",
     {
       "aria-hidden": "true",
@@ -27,339 +29,488 @@ function ot({ direction: i }) {
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ c("path", { d: i === "prev" ? "M12.5 4.5 7 10l5.5 5.5" : "M7.5 4.5 13 10l-5.5 5.5" })
+      children: /* @__PURE__ */ g("path", { d: a === "prev" ? "M12.5 4.5 7 10l5.5 5.5" : "M7.5 4.5 13 10l-5.5 5.5" })
     }
   );
 }
-const lt = {
+const Ge = "rst:cursor-pointer rst:in-data-dragging:cursor-grabbing rst:outline-hidden rst:focus-visible:outline-solid rst:focus-visible:outline-2 rst:focus-visible:outline-offset-2 rst:focus-visible:outline-ring", Xe = s.memo(function({ child: u, index: p, count: b, selected: N, active: S, label: R, style: _, className: $ }) {
+  return /* @__PURE__ */ g(
+    "li",
+    {
+      role: "option",
+      "aria-selected": N,
+      "aria-setsize": b,
+      "aria-posinset": p + 1,
+      "aria-label": R,
+      tabIndex: S ? 0 : -1,
+      "data-carousel-item": "",
+      "data-selected": N ? "" : void 0,
+      style: _,
+      className: $,
+      children: u
+    }
+  );
+});
+function Je(a) {
+  const u = [];
+  return s.Children.forEach(a, (p) => {
+    if (p == null || typeof p == "boolean") return;
+    const b = s.isValidElement(p) && p.key !== null;
+    u.push({ child: p, key: b ? String(p.key) : `#${u.length}`, keyed: b });
+  }), u;
+}
+const Ye = { active: null, keys: [], sig: "", selected: null, init: !1 }, W = (a, u) => Array.prototype.indexOf.call(a.children, u), Ot = {
   overflowing: null,
   canScrollPrev: !1,
   canScrollNext: !1,
   index: 0
-}, pe = n.forwardRef(function({
+}, cr = s.forwardRef(function({
   "aria-label": u,
-  "aria-labelledby": w,
-  children: W,
-  itemWidth: N,
-  perView: C,
-  gap: q = 12,
-  gutter: X = 16,
-  bleed: ct = !1,
-  snap: R = "start",
-  snapStrictness: it = "mandatory",
-  oneAtATime: at = !1,
-  arrows: P = "hover",
-  arrowPlacement: M = "controls",
-  renderArrows: I,
-  prevLabel: ut,
-  nextLabel: dt,
-  prevIcon: ft,
-  nextIcon: gt,
-  arrowButtonProps: pt,
-  fade: vt = !1,
-  scrollbar: mt = !1,
-  showPosition: G = !1,
-  labels: bt,
-  onIndexChange: J,
-  onScrollStateChange: K,
-  itemClassName: xt,
-  listClassName: ht,
-  className: St,
-  style: yt,
-  ...wt
-}, Nt) {
-  te();
-  const Q = zt(ee, bt), g = n.useRef(null), Y = `${n.useId()}-list`, Z = n.Children.toArray(W), T = Z.length, [o, It] = n.useState(lt), tt = n.useRef(lt), [Tt, Et] = n.useState(""), [Lt, kt] = n.useState(!1), A = n.useRef({ onIndexChange: J, onScrollStateChange: K });
-  n.useEffect(() => {
-    A.current = { onIndexChange: J, onScrollStateChange: K };
+  "aria-labelledby": p,
+  "aria-describedby": b,
+  children: N,
+  itemWidth: S,
+  perView: R,
+  gap: _ = 12,
+  gutter: $ = 16,
+  bleed: Mt = !1,
+  snap: G = "start",
+  snapStrictness: At = "mandatory",
+  oneAtATime: Ft = !1,
+  arrows: X = "hover",
+  arrowPlacement: J = "controls",
+  renderArrows: B,
+  prevLabel: _t,
+  nextLabel: $t,
+  prevIcon: Bt,
+  nextIcon: Ht,
+  arrowButtonProps: zt,
+  fade: Vt = !1,
+  scrollbar: jt = !1,
+  showPosition: dt = !1,
+  labels: Kt,
+  onIndexChange: ft,
+  onScrollStateChange: gt,
+  selectable: f = !1,
+  selectedKey: pt,
+  defaultSelectedKey: Ut = null,
+  onSelectionChange: qt,
+  onActivate: mt,
+  clearable: Wt = !1,
+  getOptionLabel: Y,
+  itemClassName: Gt,
+  listClassName: Xt,
+  className: Jt,
+  style: Yt,
+  ...Qt
+}, Zt) {
+  Ve();
+  const vt = Ie(Ke, Kt), y = s.useRef(null), yt = `${s.useId()}-list`, ht = s.Children.toArray(N), k = f ? Je(N) : null, L = k ? k.length : ht.length, xt = pt !== void 0, [te, ee] = s.useState(Ut), l = xt ? pt : te, [re, bt] = s.useState(!1), m = k ? k.map((t) => t.key) : [], St = m.join("\0"), [w, H] = s.useState(Ye);
+  let E = w.active;
+  if (f && (!w.init || w.sig !== St || w.selected !== l)) {
+    const t = new Set(m);
+    w.init && w.selected !== l && !re && l !== null && t.has(l) && (E = l), (E === null || !t.has(E)) && (E = Be(w.keys, t, E) ?? (l !== null && t.has(l) ? l : m[0] ?? null)), H({ active: E, keys: m, sig: St, selected: l, init: !0 });
+  }
+  const [c, ne] = s.useState(Ot), kt = s.useRef(Ot), [se, oe] = s.useState(""), [ie, le] = s.useState(!1), Q = s.useRef({ onIndexChange: ft, onScrollStateChange: gt });
+  s.useEffect(() => {
+    Q.current = { onIndexChange: ft, onScrollStateChange: gt };
   });
-  const d = n.useCallback(() => {
-    const t = g.current;
+  const v = s.useCallback(() => {
+    const t = y.current;
     if (!t) return null;
-    const e = t.getBoundingClientRect(), r = getComputedStyle(t), s = e.left + t.clientLeft - t.scrollLeft;
+    const e = t.getBoundingClientRect(), r = getComputedStyle(t), n = e.left + t.clientLeft - t.scrollLeft;
     return {
-      items: Array.from(t.children).map((a) => {
-        const v = a.getBoundingClientRect();
-        return { start: v.left - s, end: v.right - s };
+      items: Array.from(t.children).map((i) => {
+        const d = i.getBoundingClientRect();
+        return { start: d.left - n, end: d.right - n };
       }),
       scrollLeft: t.scrollLeft,
       clientWidth: t.clientWidth,
       scrollWidth: t.scrollWidth,
-      paddingStart: st(r.scrollPaddingInlineStart || r.scrollPaddingLeft),
-      paddingEnd: st(r.scrollPaddingInlineEnd || r.scrollPaddingRight),
-      align: R
+      paddingStart: Pt(r.scrollPaddingInlineStart || r.scrollPaddingLeft),
+      paddingEnd: Pt(r.scrollPaddingInlineEnd || r.scrollPaddingRight),
+      align: G
     };
-  }, [R]), m = n.useCallback(() => {
-    const t = d();
+  }, [G]), P = s.useCallback(() => {
+    const t = v();
     if (!t) return;
     const e = {
-      overflowing: Xt(t),
-      canScrollPrev: qt(t),
-      canScrollNext: Wt(t),
-      index: t.items.length ? Vt(t) : 0
-    }, r = tt.current;
-    r.overflowing === e.overflowing && r.canScrollPrev === e.canScrollPrev && r.canScrollNext === e.canScrollNext && r.index === e.index || (tt.current = e, It(e), r.index !== e.index && A.current.onIndexChange?.(e.index), (r.canScrollPrev !== e.canScrollPrev || r.canScrollNext !== e.canScrollNext) && A.current.onScrollStateChange?.({
+      overflowing: Pe(t),
+      canScrollPrev: Le(t),
+      canScrollNext: Re(t),
+      index: t.items.length ? Ce(t) : 0
+    }, r = kt.current;
+    r.overflowing === e.overflowing && r.canScrollPrev === e.canScrollPrev && r.canScrollNext === e.canScrollNext && r.index === e.index || (kt.current = e, ne(e), r.index !== e.index && Q.current.onIndexChange?.(e.index), (r.canScrollPrev !== e.canScrollPrev || r.canScrollNext !== e.canScrollNext) && Q.current.onScrollStateChange?.({
       canScrollPrev: e.canScrollPrev,
       canScrollNext: e.canScrollNext
     }));
-  }, [d]), Ct = JSON.stringify([q, X, N, C]);
-  n.useLayoutEffect(() => {
-    const t = g.current;
+  }, [v]), ce = JSON.stringify([_, $, S, R]);
+  s.useLayoutEffect(() => {
+    const t = y.current;
     if (!t) return;
-    m();
+    P();
     let e = 0;
     const r = () => {
       e || (e = requestAnimationFrame(() => {
-        e = 0, m();
+        e = 0, P();
       }));
     };
     t.addEventListener("scroll", r, { passive: !0 });
-    const s = typeof ResizeObserver > "u" ? null : new ResizeObserver(() => m()), l = () => {
-      s?.observe(t), Array.from(t.children).forEach((v) => s?.observe(v));
+    const n = typeof ResizeObserver > "u" ? null : new ResizeObserver(() => P()), o = () => {
+      n?.observe(t), Array.from(t.children).forEach((d) => n?.observe(d));
     };
-    l();
-    const a = typeof MutationObserver > "u" ? null : new MutationObserver(() => {
-      l(), m();
+    o();
+    const i = typeof MutationObserver > "u" ? null : new MutationObserver(() => {
+      o(), P();
     });
-    return a?.observe(t, { childList: !0 }), () => {
-      t.removeEventListener("scroll", r), s?.disconnect(), a?.disconnect(), e && cancelAnimationFrame(e);
+    return i?.observe(t, { childList: !0 }), () => {
+      t.removeEventListener("scroll", r), n?.disconnect(), i?.disconnect(), e && cancelAnimationFrame(e);
     };
-  }, [m, T, Ct]), n.useLayoutEffect(() => {
-    const t = g.current;
-    if (t && (kt(!t.querySelector(ne)), w)) {
-      const e = w.split(/\s+/).map((r) => document.getElementById(r)?.textContent?.trim() ?? "").filter(Boolean).join(" ");
-      Et(e);
+  }, [P, L, ce]), s.useLayoutEffect(() => {
+    const t = y.current;
+    if (t && (le(!t.querySelector(at)), p)) {
+      const e = p.split(/\s+/).map((r) => document.getElementById(r)?.textContent?.trim() ?? "").filter(Boolean).join(" ");
+      oe(e);
     }
-  }, [W, w]);
-  const b = n.useRef(null), f = n.useCallback(() => {
-    const t = g.current, e = b.current;
-    e && (b.current = null, window.clearTimeout(e.timer), t?.removeEventListener("scrollend", e.done), t && (t.style.scrollSnapType = "", delete t.dataset.settling));
-  }, []), p = n.useCallback(
+  }, [N, p]);
+  const T = s.useRef(null), I = s.useCallback(() => {
+    const t = y.current, e = T.current;
+    e && (T.current = null, window.clearTimeout(e.timer), t?.removeEventListener("scrollend", e.done), t && (t.style.scrollSnapType = "", delete t.dataset.settling));
+  }, []), h = s.useCallback(
     (t, e) => {
-      const r = g.current;
+      const r = y.current;
       if (!r) return;
-      if (f(), e !== "smooth" || Ut() || Math.abs(r.scrollLeft - t) < 1) {
+      if (I(), e !== "smooth" || Ne() || Math.abs(r.scrollLeft - t) < 1) {
         r.style.scrollSnapType = "none", r.scrollTo({ left: t, behavior: "instant" }), r.style.scrollSnapType = "";
         return;
       }
       r.style.scrollSnapType = "none", r.dataset.settling = "";
-      const l = r.scrollLeft, a = () => {
-        Math.abs(r.scrollLeft - l) < 0.5 || f();
+      const o = r.scrollLeft, i = () => {
+        Math.abs(r.scrollLeft - o) < 0.5 || I();
       };
-      b.current = {
-        timer: window.setTimeout(f, re(Math.abs(r.scrollLeft - t))),
-        done: a,
+      T.current = {
+        timer: window.setTimeout(I, Ue(Math.abs(r.scrollLeft - t))),
+        done: i,
         target: t
-      }, r.addEventListener("scrollend", a), r.scrollTo({ left: t, behavior: "smooth" });
+      }, r.addEventListener("scrollend", i), r.scrollTo({ left: t, behavior: "smooth" });
     },
-    [f]
-  ), E = n.useCallback(
+    [I]
+  ), z = s.useCallback(
     (t) => {
-      const e = d();
+      const e = v();
       if (!e) return;
-      const r = b.current ? { ...e, scrollLeft: b.current.target } : e;
-      p(Gt(r, t), "smooth");
+      const r = T.current ? { ...e, scrollLeft: T.current.target } : e;
+      h(De(r, t), "smooth");
     },
-    [d, p]
+    [v, h]
   );
-  n.useImperativeHandle(
-    Nt,
+  s.useImperativeHandle(
+    Zt,
     () => ({
       scrollToIndex: (t, e) => {
-        const r = d();
+        const r = v();
         if (!r || !r.items.length) return;
-        const s = Math.min(Math.max(0, Math.round(t)), r.items.length - 1);
-        p(U(r, s), e?.behavior ?? "smooth");
+        const n = Math.min(Math.max(0, Math.round(t)), r.items.length - 1);
+        h(ct(r, n), e?.behavior ?? "smooth");
       },
-      scrollPrev: () => E(-1),
-      scrollNext: () => E(1)
+      scrollPrev: () => z(-1),
+      scrollNext: () => z(1),
+      focus: () => {
+        const t = y.current;
+        if (!t) return;
+        const e = f ? t.querySelector(':scope > [tabindex="0"]') : t.querySelector(at) ?? (t.tabIndex === 0 ? t : null);
+        if (!e) return;
+        e.focus({ preventScroll: !0 });
+        const r = e.closest("[data-carousel-item]"), n = v(), o = r && r.parentElement === t ? W(t, r) : -1, i = n && o >= 0 ? Lt(n, o, T.current?.target ?? n.scrollLeft) : null;
+        i !== null && h(i, "smooth");
+      }
     }),
-    [d, E, p]
-  ), n.useEffect(() => f, [f]);
-  const D = n.useRef(null), F = n.useRef(null), O = n.useRef(null);
-  n.useLayoutEffect(() => {
-    const t = O.current;
+    [v, z, h, f]
+  ), s.useEffect(() => I, [I]);
+  const Z = s.useRef(null), tt = s.useRef(null), et = s.useRef(null);
+  s.useLayoutEffect(() => {
+    const t = et.current;
     if (!t) return;
-    const e = t === "prev" ? D.current : F.current, r = t === "prev" ? F.current : D.current, s = t === "prev" ? !o.canScrollPrev : !o.canScrollNext, l = document.activeElement;
-    s && (l !== e && l !== document.body && l !== null || r && !r.disabled && r.focus());
-  }, [o.canScrollPrev, o.canScrollNext]);
-  const x = n.useRef(null), h = n.useRef(!1), Rt = (t) => {
-    t.pointerType !== "mouse" || t.button !== 0 || o.overflowing && (f(), h.current = !1, x.current = {
+    const e = t === "prev" ? Z.current : tt.current, r = t === "prev" ? tt.current : Z.current, n = t === "prev" ? !c.canScrollPrev : !c.canScrollNext, o = document.activeElement;
+    n && (o !== e && o !== document.body && o !== null || r && !r.disabled && r.focus());
+  }, [c.canScrollPrev, c.canScrollNext]);
+  const C = s.useRef(null), D = s.useRef(!1), ae = (t) => {
+    t.pointerType !== "mouse" || t.button !== 0 || c.overflowing && (I(), D.current = !1, C.current = {
       pointerId: t.pointerId,
       x0: t.clientX,
       scroll0: t.currentTarget.scrollLeft,
       dragging: !1
     });
-  }, Pt = (t) => {
-    const e = x.current;
+  }, ue = (t) => {
+    const e = C.current;
     if (!e || t.pointerId !== e.pointerId) return;
-    const r = t.currentTarget, s = t.clientX - e.x0;
+    const r = t.currentTarget, n = t.clientX - e.x0;
     if (!e.dragging) {
-      if (Math.abs(s) <= Kt) return;
+      if (Math.abs(n) <= Ae) return;
       e.dragging = !0, r.dataset.dragging = "", r.style.scrollSnapType = "none", window.getSelection?.()?.removeAllRanges();
       try {
         r.setPointerCapture(t.pointerId);
       } catch {
       }
     }
-    r.scrollLeft = e.scroll0 - s;
-  }, _ = (t) => {
-    const e = x.current;
-    if (!e || t.pointerId !== e.pointerId || (x.current = null, !e.dragging)) return;
+    r.scrollLeft = e.scroll0 - n;
+  }, rt = (t) => {
+    const e = C.current;
+    if (!e || t.pointerId !== e.pointerId || (C.current = null, !e.dragging)) return;
     const r = t.currentTarget;
-    delete r.dataset.dragging, h.current = t.type === "pointerup", window.setTimeout(() => {
-      h.current = !1;
+    delete r.dataset.dragging, D.current = t.type === "pointerup", window.setTimeout(() => {
+      D.current = !1;
     }, 0);
-    const s = d();
-    s ? p(U(s, Jt(s)), "smooth") : r.style.scrollSnapType = "";
-  }, Mt = (t) => {
-    !h.current || t.detail === 0 || (h.current = !1, t.preventDefault(), t.stopPropagation());
-  }, At = (t) => {
-    o.overflowing && t.preventDefault();
-  }, Dt = (t) => {
+    const n = v();
+    n ? h(ct(n, Me(n)), "smooth") : r.style.scrollSnapType = "";
+  }, de = (t) => {
+    !D.current || t.detail === 0 || (D.current = !1, t.preventDefault(), t.stopPropagation());
+  }, fe = (t) => {
+    c.overflowing && t.preventDefault();
+  }, ge = (t) => {
+    if (f) {
+      me(t);
+      return;
+    }
+    const e = t.currentTarget, r = t.target;
+    if (r === e || C.current?.dragging) return;
+    let n = !1;
+    try {
+      n = r.matches(":focus-visible, [data-key-focus]");
+    } catch {
+      n = !1;
+    }
+    if (!n) return;
+    const o = r.closest("[data-carousel-item]");
+    if (!o || o.parentElement !== e) return;
+    const i = v();
+    if (!i) return;
+    const d = Array.prototype.indexOf.call(e.children, o);
+    h(ct(i, d), "instant");
+  }, V = (t) => {
+    xt || ee(t), qt?.(t);
+  }, pe = (t) => {
+    const e = v();
+    if (!e) return;
+    const r = Lt(e, t, T.current?.target ?? e.scrollLeft);
+    r !== null && h(r, "smooth");
+  }, me = (t) => {
     const e = t.currentTarget, r = t.target;
-    if (r === e || x.current?.dragging) return;
-    let s = !1;
+    if (r.parentElement !== e) return;
+    const n = W(e, r), o = m[n];
+    if (o === void 0 || (H((d) => d.active === o ? d : { ...d, active: o }), bt(!0), C.current?.dragging)) return;
+    let i = !1;
     try {
-      s = r.matches(":focus-visible, [data-key-focus]");
+      i = r.matches(":focus-visible, [data-key-focus]");
     } catch {
-      s = !1;
+      i = !1;
     }
-    if (!s) return;
-    const l = r.closest("[data-carousel-item]");
-    if (!l || l.parentElement !== e) return;
-    const a = d();
-    if (!a) return;
-    const v = Array.prototype.indexOf.call(e.children, l);
-    p(U(a, v), "instant");
-  }, [Ft, Ot] = n.useState(0);
-  n.useEffect(() => {
-    const t = window.setTimeout(() => Ot(o.index), 150);
+    i && pe(n);
+  }, ve = (t) => {
+    const e = t.relatedTarget;
+    e && t.currentTarget.contains(e) || (bt(!1), l !== null && m.includes(l) && H((r) => r.active === l ? r : { ...r, active: l }));
+  }, ye = (t) => {
+    const e = t.currentTarget, r = t.target.closest("[data-carousel-item]");
+    if (!r || r.parentElement !== e) return;
+    const n = m[W(e, r)];
+    n !== void 0 && (H((o) => o.active === n ? o : { ...o, active: n }), n === l ? mt?.(n) : V(n));
+  }, O = s.useRef({ text: "", at: -1 / 0 }), he = (t) => {
+    const e = t.currentTarget, r = t.target;
+    if (r.parentElement !== e || t.nativeEvent.isComposing || t.ctrlKey || t.metaKey || t.altKey) return;
+    const n = m.length - 1, o = W(e, r), i = m[o];
+    if (i === void 0) return;
+    const d = (x) => {
+      t.preventDefault();
+      const A = Math.min(n, Math.max(0, x));
+      A !== o && e.children[A].focus({ preventScroll: !0 });
+    }, Ct = t.timeStamp - O.current.at < He && O.current.text !== "";
+    switch (t.key.length !== 1 && (O.current = { text: "", at: -1 / 0 }), t.key) {
+      case "ArrowRight":
+        return d(o + 1);
+      case "ArrowLeft":
+        return d(o - 1);
+      case "Home":
+        return d(0);
+      case "End":
+        return d(n);
+      case "PageDown":
+      case "PageUp": {
+        const x = v(), A = x ? Oe(x) : 1;
+        return d(t.key === "PageDown" ? o + A : o - A);
+      }
+      case "Enter":
+        t.preventDefault(), i === l ? mt?.(i) : V(i);
+        return;
+      case " ":
+        if (Ct) break;
+        t.preventDefault(), i !== l && V(i);
+        return;
+      case "Escape":
+        if (!Wt || l === null) return;
+        t.preventDefault(), t.stopPropagation(), V(null);
+        return;
+    }
+    if (t.key.length !== 1) return;
+    const Rt = (Ct ? O.current.text : "") + t.key.toLowerCase();
+    O.current = { text: Rt, at: t.timeStamp }, t.preventDefault();
+    const we = (x) => Y ? Y(m[x], x) : e.children[x]?.textContent ?? "", lt = ze(m.length, o, Rt, we);
+    lt >= 0 && lt !== o && e.children[lt].focus({ preventScroll: !0 });
+  }, j = s.useRef({ keys: !1, interactive: !1 });
+  s.useEffect(() => {
+    if (!f || !je()) return;
+    const t = y.current;
+    !j.current.keys && k?.some((e) => !e.keyed) && (j.current.keys = !0, console.warn("Roster Carousel: selection mode needs a key on every child; it's the option's identity.")), !j.current.interactive && t?.querySelector(`[data-carousel-item] :is(${at})`) && (j.current.interactive = !0, console.warn("Roster Carousel: an option holds something that takes focus. In selection mode the keys can't reach it; put it outside the row, or use onActivate."));
+  });
+  const [xe, be] = s.useState(0);
+  s.useEffect(() => {
+    const t = window.setTimeout(() => be(c.index), 150);
     return () => window.clearTimeout(t);
-  }, [o.index]);
-  const et = u ?? Tt, rt = (t) => et ? `${t} ${et}` : t, $ = P !== "none" && o.overflowing !== !1, _t = P === "hover" ? se : "rst:inline-flex", nt = (t) => {
-    const e = t === "prev", { className: r, ...s } = pt ?? {};
-    return /* @__PURE__ */ c(
-      jt,
+  }, [c.index]);
+  const wt = u ?? se, Et = (t) => wt ? `${t} ${wt}` : t, nt = X !== "none" && c.overflowing !== !1, Se = X === "hover" ? qe : "rst:inline-flex", Tt = (t) => {
+    const e = t === "prev", { className: r, ...n } = zt ?? {};
+    return /* @__PURE__ */ g(
+      Te,
       {
         type: "button",
         variant: "outline",
         colorScheme: "neutral",
         size: "icon",
-        ...s,
-        "aria-label": e ? ut ?? rt("Previous") : dt ?? rt("Next"),
-        "aria-controls": Y,
-        disabled: e ? !o.canScrollPrev : !o.canScrollNext,
-        onClick: () => E(e ? -1 : 1),
-        ref: e ? D : F,
+        ...n,
+        "aria-label": e ? _t ?? Et("Previous") : $t ?? Et("Next"),
+        "aria-controls": yt,
+        disabled: e ? !c.canScrollPrev : !c.canScrollNext,
+        onClick: () => z(e ? -1 : 1),
+        ref: e ? Z : tt,
         onFocus: () => {
-          O.current = t;
+          et.current = t;
         },
-        onBlur: (l) => {
-          l.relatedTarget && (O.current = null);
+        onBlur: (o) => {
+          o.relatedTarget && (et.current = null);
         },
         "data-carousel-arrow": t,
-        className: y(
+        className: F(
           /* 44px, the target size, whatever the Button's own icon size is. */
           "rst:size-11 rst:shrink-0 rst:rounded-full",
           /* Over the row, a disabled arrow would sit on top of the first or
              last item for nothing, so it hides. Hidden is also out of the tab
              order and the accessibility tree, as disabled already was. */
-          M === "overlay" && !I && "rst:bg-[var(--roster-popover-bg)] rst:elevation-raised rst:hover:bg-[var(--roster-popover-bg)] rst:disabled:invisible",
-          _t,
+          J === "overlay" && !B && "rst:bg-[var(--roster-popover-bg)] rst:elevation-raised rst:hover:bg-[var(--roster-popover-bg)] rst:disabled:invisible",
+          Se,
           r
         ),
-        children: e ? ft ?? /* @__PURE__ */ c(ot, { direction: "prev" }) : gt ?? /* @__PURE__ */ c(ot, { direction: "next" })
+        children: e ? Bt ?? /* @__PURE__ */ g(Dt, { direction: "prev" }) : Ht ?? /* @__PURE__ */ g(Dt, { direction: "next" })
       }
     );
-  }, L = $ ? nt("prev") : null, B = $ ? nt("next") : null, S = G && T ? (
+  }, K = nt ? Tt("prev") : null, st = nt ? Tt("next") : null, M = dt && L ? (
     /* `font-ui` here and not on the root: the readout is the only text the
        carousel owns. The items are the host's content, and not Roster's to
        restyle. */
-    /* @__PURE__ */ c("p", { "aria-live": "polite", className: "rst:font-ui rst:m-0 rst:text-sm rst:tabular-nums rst:opacity-75", "data-carousel-position": "", children: Q.position(Ft + 1, T) })
+    /* @__PURE__ */ g("p", { "aria-live": "polite", className: "rst:font-ui rst:m-0 rst:text-sm rst:tabular-nums rst:opacity-75", "data-carousel-position": "", children: vt.position(xe + 1, L) })
   ) : null;
-  let H = null;
-  I ? H = I({ prev: L, next: B, position: S }) : M === "controls" && (L || S) && (H = /* @__PURE__ */ k(
+  let ot = null;
+  B ? ot = B({ prev: K, next: st, position: M }) : J === "controls" && (K || M) && (ot = /* @__PURE__ */ q(
     "div",
     {
-      className: y(
+      className: F(
         "rst:mb-2 rst:items-center rst:justify-end rst:gap-2",
         /* A line with only arrows in it takes no room where they can't show. */
-        !S && P === "hover" ? oe : "rst:flex"
+        !M && X === "hover" ? We : "rst:flex"
       ),
       "data-carousel-controls": "",
       children: [
-        S && /* @__PURE__ */ c("div", { className: "rst:mr-auto", children: S }),
-        L,
-        B
+        M && /* @__PURE__ */ g("div", { className: "rst:mr-auto", children: M }),
+        K,
+        st
       ]
     }
   ));
-  const j = vt && o.overflowing && (o.canScrollPrev || o.canScrollNext) ? `linear-gradient(to right, ${o.canScrollPrev ? "transparent, black 48px" : "black"}, ${o.canScrollNext ? "black calc(100% - 48px), transparent" : "black"})` : void 0, z = N === void 0 && C !== void 0, $t = {
-    "--rst-cv-gap": V(q),
-    "--rst-cv-gutter": V(X),
-    ...z ? Qt(C) : {},
-    ...j ? { maskImage: j, WebkitMaskImage: j } : {}
-  }, Bt = N !== void 0 ? { width: V(N) } : z ? { width: Yt } : void 0;
-  return /* @__PURE__ */ k("div", { className: y("rst:min-w-0", St), style: yt, ...wt, children: [
-    H,
-    /* @__PURE__ */ k("div", { className: "rst:relative", children: [
-      /* @__PURE__ */ c(
+  const it = Vt && c.overflowing && (c.canScrollPrev || c.canScrollNext) ? `linear-gradient(to right, ${c.canScrollPrev ? "transparent, black 48px" : "black"}, ${c.canScrollNext ? "black calc(100% - 48px), transparent" : "black"})` : void 0, U = S === void 0 && R !== void 0, ke = {
+    "--rst-cv-gap": ut(_),
+    "--rst-cv-gutter": ut($),
+    ...U ? Fe(R) : {},
+    ...it ? { maskImage: it, WebkitMaskImage: it } : {}
+  }, It = s.useMemo(
+    () => S !== void 0 ? { width: ut(S) } : U ? { width: _e } : void 0,
+    [S, U]
+  ), Nt = F(
+    "rst:shrink-0",
+    G === "start" ? "rst:snap-start" : "rst:snap-center",
+    Ft && "rst:snap-always",
+    f && Ge,
+    Gt
+  );
+  return /* @__PURE__ */ q("div", { className: F("rst:min-w-0", Jt), style: Yt, ...Qt, "aria-describedby": f ? void 0 : b, children: [
+    ot,
+    /* @__PURE__ */ q("div", { className: "rst:relative", children: [
+      /* @__PURE__ */ g(
         "ul",
         {
-          ref: g,
-          id: Y,
-          role: "list",
+          ref: y,
+          id: yt,
+          role: f ? "listbox" : "list",
           "aria-label": u,
-          "aria-labelledby": u ? void 0 : w,
-          tabIndex: Lt && o.overflowing ? 0 : void 0,
-          "data-overflowing": o.overflowing ? "" : void 0,
-          onPointerDown: Rt,
-          onPointerMove: Pt,
-          onPointerUp: _,
-          onPointerCancel: _,
-          onLostPointerCapture: _,
-          onClickCapture: Mt,
-          onDragStart: At,
-          onFocus: Dt,
-          style: $t,
-          className: y(
+          "aria-labelledby": u ? void 0 : p,
+          "aria-orientation": f ? "horizontal" : void 0,
+          "aria-describedby": f ? b : void 0,
+          tabIndex: !f && ie && c.overflowing ? 0 : void 0,
+          "data-overflowing": c.overflowing ? "" : void 0,
+          onPointerDown: ae,
+          onPointerMove: ue,
+          onPointerUp: rt,
+          onPointerCancel: rt,
+          onLostPointerCapture: rt,
+          onClickCapture: de,
+          onClick: f ? ye : void 0,
+          onKeyDown: f ? he : void 0,
+          onBlur: f ? ve : void 0,
+          onDragStart: fe,
+          onFocus: ge,
+          style: ke,
+          className: F(
             "rst:m-0 rst:flex rst:list-none rst:overflow-x-auto rst:overflow-y-hidden",
             "rst:gap-(--rst-cv-gap) rst:px-(--rst-cv-gutter) rst:py-1 rst:scroll-px-(--rst-cv-gutter)",
             "rst:overscroll-x-contain",
-            it === "mandatory" ? "rst:snap-x rst:snap-mandatory" : "rst:snap-x rst:snap-proximity",
-            ct && "rst:-mx-(--rst-cv-gutter)",
-            !mt && "rst:[scrollbar-width:none] rst:[&::-webkit-scrollbar]:hidden",
-            z && Zt,
+            At === "mandatory" ? "rst:snap-x rst:snap-mandatory" : "rst:snap-x rst:snap-proximity",
+            Mt && "rst:-mx-(--rst-cv-gutter)",
+            !jt && "rst:[scrollbar-width:none] rst:[&::-webkit-scrollbar]:hidden",
+            U && $e,
             "rst:data-overflowing:cursor-grab rst:data-dragging:cursor-grabbing rst:data-dragging:select-none",
             "rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-inset",
-            ht
+            Xt
           ),
-          children: Z.map((t, e) => /* @__PURE__ */ c(
+          children: k ? k.map((t, e) => /* @__PURE__ */ g(
+            Xe,
+            {
+              child: t.child,
+              index: e,
+              count: L,
+              selected: t.key === l,
+              active: t.key === E,
+              label: Y?.(t.key, e),
+              style: It,
+              className: Nt
+            },
+            t.key
+          )) : ht.map((t, e) => /* @__PURE__ */ g(
             "li",
             {
               "data-carousel-item": "",
-              "aria-label": G ? Q.position(e + 1, T) : void 0,
-              style: Bt,
-              className: y(
-                "rst:shrink-0",
-                R === "start" ? "rst:snap-start" : "rst:snap-center",
-                at && "rst:snap-always",
-                xt
-              ),
+              "aria-label": dt ? vt.position(e + 1, L) : void 0,
+              style: It,
+              className: Nt,
               children: t
             },
-            n.isValidElement(t) && t.key != null ? t.key : e
+            s.isValidElement(t) && t.key != null ? t.key : e
           ))
         }
       ),
-      !I && M === "overlay" && $ && /* @__PURE__ */ k(Ht, { children: [
-        /* @__PURE__ */ c("div", { className: "rst:pointer-events-none rst:absolute rst:inset-y-0 rst:start-1 rst:flex rst:items-center", children: /* @__PURE__ */ c("div", { className: "rst:pointer-events-auto", children: L }) }),
-        /* @__PURE__ */ c("div", { className: "rst:pointer-events-none rst:absolute rst:inset-y-0 rst:end-1 rst:flex rst:items-center", children: /* @__PURE__ */ c("div", { className: "rst:pointer-events-auto", children: B }) })
+      !B && J === "overlay" && nt && /* @__PURE__ */ q(Ee, { children: [
+        /* @__PURE__ */ g("div", { className: "rst:pointer-events-none rst:absolute rst:inset-y-0 rst:start-1 rst:flex rst:items-center", children: /* @__PURE__ */ g("div", { className: "rst:pointer-events-auto", children: K }) }),
+        /* @__PURE__ */ g("div", { className: "rst:pointer-events-none rst:absolute rst:inset-y-0 rst:end-1 rst:flex rst:items-center", children: /* @__PURE__ */ g("div", { className: "rst:pointer-events-auto", children: st }) })
       ] })
     ] })
   ] });
 });
 export {
-  pe as Carousel
+  cr as Carousel
 };