@blakesteve/roster 5.6.0 → 5.8.0

package/dist/components/molecules/Carousel/Carousel.d.ts

@@ -25,6 +25,11 @@ export interface CarouselArrowsRender {
     /** The "2 of 5" readout when `showPosition` is on, otherwise `null`. */
     position: React.ReactNode;
 }
+/** Every word Carousel shows or says of its own, past its arrows' names. Pass any of them in `labels` to replace it. */
+export interface CarouselLabels {
+    /** Where you are, with `showPosition`: the readout, and each item's name. "2 of 5". */
+    position: (current: number, total: number) => string;
+}
 export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "aria-label" | "aria-labelledby"> {
     /** The row's name. One of this or `aria-labelledby` is required. */
     "aria-label"?: string;
@@ -103,6 +108,8 @@ export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>
      * name, and a change is announced politely.
      */
     showPosition?: boolean;
+    /** The component's own words, replaced; any left out stay English. */
+    labels?: Partial<CarouselLabels>;
     /** The first item wholly in view, whenever it changes. */
     onIndexChange?: (index: number) => void;
     /** Whether the row can move each way, whenever that changes. */

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

@@ -1,18 +1,19 @@
 "use client";
-import { jsxs as y, jsx as c, Fragment as $t } from "react/jsx-runtime";
+import { jsx as c, jsxs as C, Fragment as Ht } from "react/jsx-runtime";
 import * as n from "react";
-import { Button as Bt } from "../../atoms/Button/Button.js";
-import { cn as w } from "../../../lib/utils.js";
-import { prefersReducedMotion as Ht } from "../../../internal/motion.js";
-import { currentIndex as jt, canScrollNext as zt, canScrollPrev as Ut, overflows as Vt, pageTarget as Wt, snapPosition as U, nearestIndex as qt, CAROUSEL_DRAG_THRESHOLD as Xt } from "./carousel-math.js";
-import { perViewVars as Gt, FLUID_ITEM_WIDTH as Jt, FLUID_CLASSES as Kt } from "./carousel-layout.js";
-const Qt = (a) => Math.min(3e3, 500 + a * 0.35), Yt = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable]:not([contenteditable="false"])', V = (a) => typeof a == "number" ? `${a}px` : a;
-function nt(a) {
-  const d = parseFloat(a);
-  return Number.isFinite(d) ? d : 0;
+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";
+const te = { position: (i, u) => `${i} of ${u}` }, ee = (i) => Math.min(3e3, 500 + i * 0.35), re = '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);
+  return Number.isFinite(u) ? u : 0;
 }
-const Zt = "rst:hidden rst:[@media(any-hover:hover)]:inline-flex", te = "rst:hidden rst:[@media(any-hover:hover)]:flex";
-function st({ direction: a }) {
+const ne = "rst:hidden rst:[@media(any-hover:hover)]:inline-flex", se = "rst:hidden rst:[@media(any-hover:hover)]:flex";
+function ot({ direction: i }) {
   return /* @__PURE__ */ c(
     "svg",
     {
@@ -25,82 +26,83 @@ function st({ direction: a }) {
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ c("path", { d: a === "prev" ? "M12.5 4.5 7 10l5.5 5.5" : "M7.5 4.5 13 10l-5.5 5.5" })
+      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" })
     }
   );
 }
-const ot = {
+const lt = {
   overflowing: null,
   canScrollPrev: !1,
   canScrollNext: !1,
   index: 0
-}, ce = n.forwardRef(function({
-  "aria-label": d,
-  "aria-labelledby": N,
+}, fe = n.forwardRef(function({
+  "aria-label": u,
+  "aria-labelledby": w,
   children: W,
-  itemWidth: I,
-  perView: R,
+  itemWidth: N,
+  perView: k,
   gap: q = 12,
   gutter: X = 16,
-  bleed: lt = !1,
-  snap: L = "start",
-  snapStrictness: ct = "mandatory",
+  bleed: ct = !1,
+  snap: R = "start",
+  snapStrictness: it = "mandatory",
   oneAtATime: at = !1,
   arrows: P = "hover",
   arrowPlacement: M = "controls",
-  renderArrows: T,
-  prevLabel: it,
-  nextLabel: ut,
-  prevIcon: dt,
-  nextIcon: ft,
-  arrowButtonProps: gt,
+  renderArrows: I,
+  prevLabel: ut,
+  nextLabel: dt,
+  prevIcon: ft,
+  nextIcon: gt,
+  arrowButtonProps: pt,
   fade: vt = !1,
-  scrollbar: pt = !1,
+  scrollbar: mt = !1,
   showPosition: G = !1,
+  labels: bt,
   onIndexChange: J,
   onScrollStateChange: K,
-  itemClassName: mt,
-  listClassName: bt,
-  className: xt,
-  style: ht,
-  ...St
-}, yt) {
-  const f = n.useRef(null), Q = `${n.useId()}-list`, Y = n.Children.toArray(W), E = Y.length, [o, wt] = n.useState(ot), Z = n.useRef(ot), [Nt, It] = n.useState(""), [Tt, Et] = n.useState(!1), D = n.useRef({ onIndexChange: J, onScrollStateChange: K });
+  itemClassName: xt,
+  listClassName: ht,
+  className: St,
+  style: yt,
+  ...wt
+}, Nt) {
+  const Q = zt(te, 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, Ct] = n.useState(!1), A = n.useRef({ onIndexChange: J, onScrollStateChange: K });
   n.useEffect(() => {
-    D.current = { onIndexChange: J, onScrollStateChange: K };
+    A.current = { onIndexChange: J, onScrollStateChange: K };
   });
-  const i = n.useCallback(() => {
-    const t = f.current;
+  const d = n.useCallback(() => {
+    const t = g.current;
     if (!t) return null;
     const e = t.getBoundingClientRect(), r = getComputedStyle(t), s = e.left + t.clientLeft - t.scrollLeft;
     return {
-      items: Array.from(t.children).map((u) => {
-        const p = u.getBoundingClientRect();
-        return { start: p.left - s, end: p.right - s };
+      items: Array.from(t.children).map((a) => {
+        const v = a.getBoundingClientRect();
+        return { start: v.left - s, end: v.right - s };
       }),
       scrollLeft: t.scrollLeft,
       clientWidth: t.clientWidth,
       scrollWidth: t.scrollWidth,
-      paddingStart: nt(r.scrollPaddingInlineStart || r.scrollPaddingLeft),
-      paddingEnd: nt(r.scrollPaddingInlineEnd || r.scrollPaddingRight),
-      align: L
+      paddingStart: st(r.scrollPaddingInlineStart || r.scrollPaddingLeft),
+      paddingEnd: st(r.scrollPaddingInlineEnd || r.scrollPaddingRight),
+      align: R
     };
-  }, [L]), m = n.useCallback(() => {
-    const t = i();
+  }, [R]), m = n.useCallback(() => {
+    const t = d();
     if (!t) return;
     const e = {
-      overflowing: Vt(t),
-      canScrollPrev: Ut(t),
-      canScrollNext: zt(t),
-      index: t.items.length ? jt(t) : 0
-    }, r = Z.current;
-    r.overflowing === e.overflowing && r.canScrollPrev === e.canScrollPrev && r.canScrollNext === e.canScrollNext && r.index === e.index || (Z.current = e, wt(e), r.index !== e.index && D.current.onIndexChange?.(e.index), (r.canScrollPrev !== e.canScrollPrev || r.canScrollNext !== e.canScrollNext) && D.current.onScrollStateChange?.({
+      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?.({
       canScrollPrev: e.canScrollPrev,
       canScrollNext: e.canScrollNext
     }));
-  }, [i]), Ct = JSON.stringify([q, X, I, R]);
+  }, [d]), kt = JSON.stringify([q, X, N, k]);
   n.useLayoutEffect(() => {
-    const t = f.current;
+    const t = g.current;
     if (!t) return;
     m();
     let e = 0;
@@ -111,85 +113,87 @@ const ot = {
     };
     t.addEventListener("scroll", r, { passive: !0 });
     const s = typeof ResizeObserver > "u" ? null : new ResizeObserver(() => m()), l = () => {
-      s?.observe(t), Array.from(t.children).forEach((p) => s?.observe(p));
+      s?.observe(t), Array.from(t.children).forEach((v) => s?.observe(v));
     };
     l();
-    const u = typeof MutationObserver > "u" ? null : new MutationObserver(() => {
+    const a = typeof MutationObserver > "u" ? null : new MutationObserver(() => {
       l(), m();
     });
-    return u?.observe(t, { childList: !0 }), () => {
-      t.removeEventListener("scroll", r), s?.disconnect(), u?.disconnect(), e && cancelAnimationFrame(e);
+    return a?.observe(t, { childList: !0 }), () => {
+      t.removeEventListener("scroll", r), s?.disconnect(), a?.disconnect(), e && cancelAnimationFrame(e);
     };
-  }, [m, E, Ct]), n.useLayoutEffect(() => {
-    const t = f.current;
-    if (t && (Et(!t.querySelector(Yt)), N)) {
-      const e = N.split(/\s+/).map((r) => document.getElementById(r)?.textContent?.trim() ?? "").filter(Boolean).join(" ");
-      It(e);
+  }, [m, T, kt]), n.useLayoutEffect(() => {
+    const t = g.current;
+    if (t && (Ct(!t.querySelector(re)), w)) {
+      const e = w.split(/\s+/).map((r) => document.getElementById(r)?.textContent?.trim() ?? "").filter(Boolean).join(" ");
+      Et(e);
     }
-  }, [W, N]);
-  const b = n.useRef(null), g = n.useCallback(() => {
-    const t = f.current, e = b.current;
+  }, [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));
-  }, []), v = n.useCallback(
+  }, []), p = n.useCallback(
     (t, e) => {
-      const r = f.current;
+      const r = g.current;
       if (!r) return;
-      if (g(), e !== "smooth" || Ht() || Math.abs(r.scrollLeft - t) < 1) {
+      if (f(), e !== "smooth" || Ut() || 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 = () => g();
+      const l = r.scrollLeft, a = () => {
+        Math.abs(r.scrollLeft - l) < 0.5 || f();
+      };
       b.current = {
-        timer: window.setTimeout(l, Qt(Math.abs(r.scrollLeft - t))),
-        done: l,
+        timer: window.setTimeout(f, ee(Math.abs(r.scrollLeft - t))),
+        done: a,
         target: t
-      }, r.addEventListener("scrollend", l, { once: !0 }), r.scrollTo({ left: t, behavior: "smooth" });
+      }, r.addEventListener("scrollend", a), r.scrollTo({ left: t, behavior: "smooth" });
     },
-    [g]
-  ), C = n.useCallback(
+    [f]
+  ), E = n.useCallback(
     (t) => {
-      const e = i();
+      const e = d();
       if (!e) return;
       const r = b.current ? { ...e, scrollLeft: b.current.target } : e;
-      v(Wt(r, t), "smooth");
+      p(Gt(r, t), "smooth");
     },
-    [i, v]
+    [d, p]
   );
   n.useImperativeHandle(
-    yt,
+    Nt,
     () => ({
       scrollToIndex: (t, e) => {
-        const r = i();
+        const r = d();
         if (!r || !r.items.length) return;
         const s = Math.min(Math.max(0, Math.round(t)), r.items.length - 1);
-        v(U(r, s), e?.behavior ?? "smooth");
+        p(U(r, s), e?.behavior ?? "smooth");
       },
-      scrollPrev: () => C(-1),
-      scrollNext: () => C(1)
+      scrollPrev: () => E(-1),
+      scrollNext: () => E(1)
     }),
-    [i, C, v]
-  ), n.useEffect(() => g, [g]);
-  const O = n.useRef(null), A = n.useRef(null), F = n.useRef(null);
+    [d, E, p]
+  ), n.useEffect(() => f, [f]);
+  const D = n.useRef(null), O = n.useRef(null), F = n.useRef(null);
   n.useLayoutEffect(() => {
     const t = F.current;
     if (!t) return;
-    const e = t === "prev" ? O.current : A.current, r = t === "prev" ? A.current : O.current, s = t === "prev" ? !o.canScrollPrev : !o.canScrollNext, l = document.activeElement;
+    const e = t === "prev" ? D.current : O.current, r = t === "prev" ? O.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), kt = (t) => {
-    t.pointerType !== "mouse" || t.button !== 0 || o.overflowing && (g(), h.current = !1, x.current = {
+  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 = {
       pointerId: t.pointerId,
       x0: t.clientX,
       scroll0: t.currentTarget.scrollLeft,
       dragging: !1
     });
-  }, Rt = (t) => {
+  }, Pt = (t) => {
     const e = x.current;
     if (!e || t.pointerId !== e.pointerId) return;
     const r = t.currentTarget, s = t.clientX - e.x0;
     if (!e.dragging) {
-      if (Math.abs(s) <= Xt) return;
+      if (Math.abs(s) <= Kt) return;
       e.dragging = !0, r.dataset.dragging = "", r.style.scrollSnapType = "none", window.getSelection?.()?.removeAllRanges();
       try {
         r.setPointerCapture(t.pointerId);
@@ -204,13 +208,13 @@ const ot = {
     delete r.dataset.dragging, h.current = t.type === "pointerup", window.setTimeout(() => {
       h.current = !1;
     }, 0);
-    const s = i();
-    s ? v(U(s, qt(s)), "smooth") : r.style.scrollSnapType = "";
-  }, Lt = (t) => {
+    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());
-  }, Pt = (t) => {
+  }, At = (t) => {
     o.overflowing && t.preventDefault();
-  }, Mt = (t) => {
+  }, Dt = (t) => {
     const e = t.currentTarget, r = t.target;
     if (r === e || x.current?.dragging) return;
     let s = !1;
@@ -222,30 +226,30 @@ const ot = {
     if (!s) return;
     const l = r.closest("[data-carousel-item]");
     if (!l || l.parentElement !== e) return;
-    const u = i();
-    if (!u) return;
-    const p = Array.prototype.indexOf.call(e.children, l);
-    v(U(u, p), "instant");
-  }, [Dt, Ot] = n.useState(0);
+    const a = d();
+    if (!a) return;
+    const v = Array.prototype.indexOf.call(e.children, l);
+    p(U(a, v), "instant");
+  }, [Ot, Ft] = n.useState(0);
   n.useEffect(() => {
-    const t = window.setTimeout(() => Ot(o.index), 150);
+    const t = window.setTimeout(() => Ft(o.index), 150);
     return () => window.clearTimeout(t);
   }, [o.index]);
-  const tt = d ?? Nt, et = (t) => tt ? `${t} ${tt}` : t, $ = P !== "none" && o.overflowing !== !1, At = P === "hover" ? Zt : "rst:inline-flex", rt = (t) => {
-    const e = t === "prev", { className: r, ...s } = gt ?? {};
+  const et = u ?? Tt, rt = (t) => et ? `${t} ${et}` : t, $ = P !== "none" && o.overflowing !== !1, _t = P === "hover" ? ne : "rst:inline-flex", nt = (t) => {
+    const e = t === "prev", { className: r, ...s } = pt ?? {};
     return /* @__PURE__ */ c(
-      Bt,
+      jt,
       {
         type: "button",
         variant: "outline",
         colorScheme: "neutral",
         size: "icon",
         ...s,
-        "aria-label": e ? it ?? et("Previous") : ut ?? et("Next"),
-        "aria-controls": Q,
+        "aria-label": e ? ut ?? rt("Previous") : dt ?? rt("Next"),
+        "aria-controls": Y,
         disabled: e ? !o.canScrollPrev : !o.canScrollNext,
-        onClick: () => C(e ? -1 : 1),
-        ref: e ? O : A,
+        onClick: () => E(e ? -1 : 1),
+        ref: e ? D : O,
         onFocus: () => {
           F.current = t;
         },
@@ -253,97 +257,93 @@ const ot = {
           l.relatedTarget && (F.current = null);
         },
         "data-carousel-arrow": t,
-        className: w(
+        className: y(
           /* 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" && !T && "rst:bg-[var(--roster-popover-bg)] rst:elevation-raised rst:hover:bg-[var(--roster-popover-bg)] rst:disabled:invisible",
-          At,
+          M === "overlay" && !I && "rst:bg-[var(--roster-popover-bg)] rst:elevation-raised rst:hover:bg-[var(--roster-popover-bg)] rst:disabled:invisible",
+          _t,
           r
         ),
-        children: e ? dt ?? /* @__PURE__ */ c(st, { direction: "prev" }) : ft ?? /* @__PURE__ */ c(st, { direction: "next" })
+        children: e ? ft ?? /* @__PURE__ */ c(ot, { direction: "prev" }) : gt ?? /* @__PURE__ */ c(ot, { direction: "next" })
       }
     );
-  }, k = $ ? rt("prev") : null, B = $ ? rt("next") : null, S = G && E ? (
+  }, L = $ ? nt("prev") : null, B = $ ? nt("next") : null, S = G && T ? (
     /* `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__ */ y("p", { "aria-live": "polite", className: "rst:font-ui rst:m-0 rst:text-sm rst:tabular-nums rst:opacity-75", "data-carousel-position": "", children: [
-      Dt + 1,
-      " of ",
-      E
-    ] })
+    /* @__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(Ot + 1, T) })
   ) : null;
   let H = null;
-  T ? H = T({ prev: k, next: B, position: S }) : M === "controls" && (k || S) && (H = /* @__PURE__ */ y(
+  I ? H = I({ prev: L, next: B, position: S }) : M === "controls" && (L || S) && (H = /* @__PURE__ */ C(
     "div",
     {
-      className: w(
+      className: y(
         "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" ? te : "rst:flex"
+        !S && P === "hover" ? se : "rst:flex"
       ),
       "data-carousel-controls": "",
       children: [
         S && /* @__PURE__ */ c("div", { className: "rst:mr-auto", children: S }),
-        k,
+        L,
         B
       ]
     }
   ));
-  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 = I === void 0 && R !== void 0, Ft = {
+  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 && k !== void 0, $t = {
     "--rst-cv-gap": V(q),
     "--rst-cv-gutter": V(X),
-    ...z ? Gt(R) : {},
+    ...z ? Qt(k) : {},
     ...j ? { maskImage: j, WebkitMaskImage: j } : {}
-  }, _t = I !== void 0 ? { width: V(I) } : z ? { width: Jt } : void 0;
-  return /* @__PURE__ */ y("div", { className: w("rst:min-w-0", xt), style: ht, ...St, children: [
+  }, Bt = N !== void 0 ? { width: V(N) } : z ? { width: Yt } : void 0;
+  return /* @__PURE__ */ C("div", { className: y("rst:min-w-0", St), style: yt, ...wt, children: [
     H,
-    /* @__PURE__ */ y("div", { className: "rst:relative", children: [
+    /* @__PURE__ */ C("div", { className: "rst:relative", children: [
       /* @__PURE__ */ c(
         "ul",
         {
-          ref: f,
-          id: Q,
+          ref: g,
+          id: Y,
           role: "list",
-          "aria-label": d,
-          "aria-labelledby": d ? void 0 : N,
-          tabIndex: Tt && o.overflowing ? 0 : void 0,
+          "aria-label": u,
+          "aria-labelledby": u ? void 0 : w,
+          tabIndex: Lt && o.overflowing ? 0 : void 0,
           "data-overflowing": o.overflowing ? "" : void 0,
-          onPointerDown: kt,
-          onPointerMove: Rt,
+          onPointerDown: Rt,
+          onPointerMove: Pt,
           onPointerUp: _,
           onPointerCancel: _,
           onLostPointerCapture: _,
-          onClickCapture: Lt,
-          onDragStart: Pt,
-          onFocus: Mt,
-          style: Ft,
-          className: w(
+          onClickCapture: Mt,
+          onDragStart: At,
+          onFocus: Dt,
+          style: $t,
+          className: y(
             "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",
-            ct === "mandatory" ? "rst:snap-x rst:snap-mandatory" : "rst:snap-x rst:snap-proximity",
-            lt && "rst:-mx-(--rst-cv-gutter)",
-            !pt && "rst:[scrollbar-width:none] rst:[&::-webkit-scrollbar]:hidden",
-            z && Kt,
+            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,
             "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",
-            bt
+            ht
           ),
-          children: Y.map((t, e) => /* @__PURE__ */ c(
+          children: Z.map((t, e) => /* @__PURE__ */ c(
             "li",
             {
               "data-carousel-item": "",
-              "aria-label": G ? `${e + 1} of ${E}` : void 0,
-              style: _t,
-              className: w(
+              "aria-label": G ? Q.position(e + 1, T) : void 0,
+              style: Bt,
+              className: y(
                 "rst:shrink-0",
-                L === "start" ? "rst:snap-start" : "rst:snap-center",
+                R === "start" ? "rst:snap-start" : "rst:snap-center",
                 at && "rst:snap-always",
-                mt
+                xt
               ),
               children: t
             },
@@ -351,13 +351,13 @@ const ot = {
           ))
         }
       ),
-      !T && M === "overlay" && $ && /* @__PURE__ */ y($t, { 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: k }) }),
+      !I && M === "overlay" && $ && /* @__PURE__ */ C(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 }) })
       ] })
     ] })
   ] });
 });
 export {
-  ce as Carousel
+  fe as Carousel
 };

package/dist/components/molecules/ErrorState/ErrorState.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime");require("react");const d=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),u=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),n=require("../../../lib/utils.cjs"),x=require("./error-state-variants.cjs"),m=require("../../atoms/Button/Button.cjs"),h=({title:c="An Error Occurred",description:i,onRetry:e,action:s,icon:l,variant:t,className:a,...o})=>r.jsxs("div",{className:n.cn(x.errorStateVariants({variant:t}),a),...o,children:[r.jsx("div",{className:"rst:mb-4 rst:flex rst:h-12 rst:w-12 rst:items-center rst:justify-center rst:rounded-full rst:bg-error-100 rst:text-error-600 rst:dark:bg-error-500/15 rst:dark:text-error-400",children:r.jsx("div",{className:"rst:h-6 rst:w-6 rst:flex rst:items-center rst:justify-center",children:l||r.jsx(d.FontAwesomeIcon,{icon:u.faTriangleExclamation,className:"rst:h-full rst:w-full"})})}),r.jsx("h3",{className:"rst:text-lg rst:font-bold rst:tracking-tight",children:c}),r.jsx("p",{className:n.cn("rst:mt-2 rst:text-sm rst:leading-relaxed",t==="card"?"rst:text-error-800/80 rst:dark:text-error-200/80":"rst:text-gray-500 rst:dark:text-gray-400"),children:i}),r.jsx("div",{className:"rst:mt-6",children:s||(e?r.jsx(m.Button,{onClick:e,colorScheme:"error",variant:t==="card"?"outline":"solid",children:"Try Again"}):null)})]});exports.ErrorState=h;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime");require("react");const x=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),m=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),l=require("../../../lib/utils.cjs"),h=require("../../../lib/labels.cjs"),g=require("./error-state-variants.cjs"),j=require("../../atoms/Button/Button.cjs"),f={retry:"Try Again"},b=({title:n="An Error Occurred",description:c,onRetry:e,action:s,icon:i,labels:a,variant:t,className:o,...d})=>{const u=h.withLabels(f,a);return r.jsxs("div",{className:l.cn(g.errorStateVariants({variant:t}),o),...d,children:[r.jsx("div",{className:"rst:mb-4 rst:flex rst:h-12 rst:w-12 rst:items-center rst:justify-center rst:rounded-full rst:bg-error-100 rst:text-error-600 rst:dark:bg-error-500/15 rst:dark:text-error-400",children:r.jsx("div",{className:"rst:h-6 rst:w-6 rst:flex rst:items-center rst:justify-center",children:i||r.jsx(x.FontAwesomeIcon,{icon:m.faTriangleExclamation,className:"rst:h-full rst:w-full"})})}),r.jsx("h3",{className:"rst:text-lg rst:font-bold rst:tracking-tight",children:n}),r.jsx("p",{className:l.cn("rst:mt-2 rst:text-sm rst:leading-relaxed",t==="card"?"rst:text-error-800/80 rst:dark:text-error-200/80":"rst:text-gray-500 rst:dark:text-gray-400"),children:c}),r.jsx("div",{className:"rst:mt-6",children:s||(e?r.jsx(j.Button,{onClick:e,colorScheme:"error",variant:t==="card"?"outline":"solid",children:u.retry}):null)})]})};exports.ErrorState=b;

package/dist/components/molecules/ErrorState/ErrorState.d.ts

@@ -1,12 +1,19 @@
 import { default as React } from 'react';
 import { VariantProps } from 'class-variance-authority';
 import { errorStateVariants } from './error-state-variants';
+/** Every word ErrorState shows of its own, past its `title`. Pass any of them in `labels` to replace it. */
+export interface ErrorStateLabels {
+    /** The retry button, with `onRetry`. */
+    retry: string;
+}
 export interface ErrorStateProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof errorStateVariants> {
     title?: string;
     description: string;
     onRetry?: () => void;
     action?: React.ReactNode;
     icon?: React.ReactNode;
+    /** The component's own words, replaced; any left out stay English. */
+    labels?: Partial<ErrorStateLabels>;
 }
-declare const ErrorState: ({ title, description, onRetry, action, icon, variant, className, ...props }: ErrorStateProps) => import("react/jsx-runtime").JSX.Element;
+declare const ErrorState: ({ title, description, onRetry, action, icon, labels, variant, className, ...props }: ErrorStateProps) => import("react/jsx-runtime").JSX.Element;
 export { ErrorState };