@stackone/malachite 2.37.0 → 2.38.0

package/dist/components/CardStrip.js

@@ -1,20 +1,20 @@
 import { jsxs as U, jsx as h } from "react/jsx-runtime";
-import C, { useRef as O, useState as nt, useLayoutEffect as w, useCallback as S } from "react";
-import re from "./CustomIcons/ArrowLeftIcon.js";
-import ne from "./CustomIcons/ForwardArrowIcon.js";
-import oe from "./CustomIcons/PlusIcon.js";
-import { CONTENT_INSET as $t } from "./PageLayout/constants.js";
-import { STRIP_RULE_PX as ae, CARD_FLARE_TIP_PX as ct, CARD_WIDTH_PX as ce, FLARE_CLASS as se, CARD_FLARE_PX as q } from "./SelectableCard.js";
-import { revealTargetFor as Dt, pageTargetFor as ie, EDGE_EPSILON_PX as ot, isCardInView as le } from "./cardStripGeometry.js";
-import { CardStripSlotContext as yt, PINNED_SLOT as de, SCROLLED_SLOT as ue } from "./cardStripSlot.js";
-import { FOCUS_RING as fe } from "./focusRing.js";
-import { useAdoptedStyleSheet as Ot } from "./useAdoptedStyleSheet.js";
-const pe = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"]), G = '[role="radio"]', he = "data-card-strip-scroller", me = "data-card-strip-trough", K = "malachite-card-strip", g = "malachite-card-strip-scroller", Xt = "malachite-card-strip-fade", R = "malachite-card-strip-add-tile", st = "data-card-strip-add-slot", Wt = "[data-selectable-card-actions]", be = 'a[href], area[href], button, input, select, textarea, iframe, [contenteditable="true"], [tabindex]', B = "data-card-strip-prev-tabindex", ge = 80, vt = 11, H = 12, zt = "var(--malachite-shadow-default)", Re = "var(--malachite-card-strip-arrow-background, var(--malachite-card-background, #ffffff))", _e = "var(--malachite-card-strip-arrow-border, #e8e8e8)", it = "var(--malachite-card-strip-background, #f1f1f1)", wt = "var(--malachite-radius-xxl, 14px)", Ae = `${wt} ${wt} 0 0`, Ct = "var(--malachite-radius-xxxl, 16px)", Se = `${Ct} ${Ct} 0 0`, v = 4, xe = H + v, Yt = H, It = ge + (Yt - v), dt = ce, Le = 2 * (H + v) + dt, Ee = "var(--malachite-card-strip-divider, #dddddd)", Pt = "var(--malachite-card-strip-fade, transparent)", Te = "var(--malachite-selectable-card-hover-background, #e8e8e8)", $e = "var(--malachite-card-strip-arrow-border, #e8e8e8)", kt = "var(--malachite-selectable-card-hover-rule, #bbbbbb)", Nt = "0px 1px 0px 0px rgba(0, 0, 0, 0.4)", De = "var(--malachite-card-background, #ffffff)", ye = "var(--malachite-text-primary, #0a0a0a)", Oe = "var(--malachite-card-strip-add-primary-background, var(--malachite-text-primary, #0a0a0a))", ve = "var(--malachite-card-strip-add-primary-foreground, var(--malachite-card-background, #ffffff))", we = "0px 1px 0px 0px rgba(10, 10, 10, 0.7)", ut = ae, Ft = 16, M = 9999, Ce = 4, Ie = `
-.${K} {
-    clip-path: inset(-${M}px -${M}px 0);
+import C, { useRef as T, useState as M, useLayoutEffect as v, useCallback as x } from "react";
+import ae from "./CustomIcons/ArrowLeftIcon.js";
+import ce from "./CustomIcons/ForwardArrowIcon.js";
+import se from "./CustomIcons/PlusIcon.js";
+import { CONTENT_INSET as Dt } from "./PageLayout/constants.js";
+import { STRIP_RULE_PX as ie, CARD_FLARE_TIP_PX as st, CARD_WIDTH_PX as le, FLARE_CLASS as de, CARD_FLARE_PX as K } from "./SelectableCard.js";
+import { revealTargetFor as Ot, pageTargetFor as ue, EDGE_EPSILON_PX as at, isCardInView as fe } from "./cardStripGeometry.js";
+import { CardStripSlotContext as vt, PINNED_SLOT as pe, SCROLLED_SLOT as he } from "./cardStripSlot.js";
+import { FOCUS_RING as me } from "./focusRing.js";
+import { useAdoptedStyleSheet as wt } from "./useAdoptedStyleSheet.js";
+const be = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"]), G = '[role="radio"]', ge = "data-card-strip-scroller", Re = "data-card-strip-trough", j = "malachite-card-strip", g = "malachite-card-strip-scroller", zt = "malachite-card-strip-fade", R = "malachite-card-strip-add-tile", it = "data-card-strip-add-slot", Yt = "[data-selectable-card-actions]", _e = 'a[href], area[href], button, input, select, textarea, iframe, [contenteditable="true"], [tabindex]', B = "data-card-strip-prev-tabindex", Ae = 80, Ct = 11, H = 12, Vt = "var(--malachite-shadow-default)", Se = "var(--malachite-card-strip-arrow-background, var(--malachite-card-background, #ffffff))", xe = "var(--malachite-card-strip-arrow-border, #e8e8e8)", lt = "var(--malachite-card-strip-background, #f1f1f1)", It = "var(--malachite-radius-xxl, 14px)", Le = `${It} ${It} 0 0`, Pt = "var(--malachite-radius-xxxl, 16px)", Ee = `${Pt} ${Pt} 0 0`, w = 4, Te = H + w, Mt = H, kt = Ae + (Mt - w), ut = le, $e = 2 * (H + w) + ut, ye = "var(--malachite-card-strip-divider, #dddddd)", Nt = "var(--malachite-card-strip-fade, transparent)", De = "var(--malachite-selectable-card-hover-background, #e8e8e8)", Oe = "var(--malachite-card-strip-arrow-border, #e8e8e8)", Ft = "var(--malachite-selectable-card-hover-rule, #bbbbbb)", Ut = "0px 1px 0px 0px rgba(0, 0, 0, 0.4)", ve = "var(--malachite-card-background, #ffffff)", we = "var(--malachite-text-primary, #0a0a0a)", Ce = "var(--malachite-card-strip-add-primary-background, var(--malachite-text-primary, #0a0a0a))", Ie = "var(--malachite-card-strip-add-primary-foreground, var(--malachite-card-background, #ffffff))", Pe = "0px 1px 0px 0px rgba(10, 10, 10, 0.7)", ft = ie, Bt = 16, q = 9999, ke = 4, Ne = `
+.${j} {
+    clip-path: inset(-${q}px -${q}px 0);
 }
-.${K}:has(:focus-visible) {
-    clip-path: inset(-${M}px -${M}px -${Ce}px);
+.${j}:has(:focus-visible) {
+    clip-path: inset(-${q}px -${q}px -${ke}px);
 }
 .${g} {
     display: flex;
@@ -24,16 +24,16 @@ const pe = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "Arrow
     scroll-behavior: smooth;
     scrollbar-width: none;
     -ms-overflow-style: none;
-    padding-block: ${Ft}px;
-    margin-block: -${Ft}px;
+    padding-block: ${Bt}px;
+    margin-block: -${Bt}px;
     /* overflow-x clips both axes, so the end cards would lose a flare; the negative margin trades
        the padding back out and scroll-padding keeps the rest position at zero. */
-    padding-inline: ${q}px;
-    margin-inline: -${q}px;
-    scroll-padding-inline: ${q}px;
+    padding-inline: ${K}px;
+    margin-inline: -${K}px;
+    scroll-padding-inline: ${K}px;
 }
 /* A card focused at a faded edge has to stay readable, so the fade lifts entirely. */
-.${K}:has(:focus-visible) .${Xt} {
+.${j}:has(:focus-visible) .${zt} {
     display: none;
 }
 .${g}::-webkit-scrollbar {
@@ -41,40 +41,40 @@ const pe = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "Arrow
 }
 /* No bottom edge: the strip's rule is the baseline for the add tile as much as for a card. */
 .${R} > * {
-    background: ${it};
-    border-radius: ${Ae};
+    background: ${lt};
+    border-radius: ${Le};
 }
 .${R}:hover:not(:has(button:disabled)) > * {
-    background: ${Te};
+    background: ${De};
 }
 .${R} button:active:not(:disabled) {
     opacity: 0.8;
 }
 .${R}:has(button:active) > * {
-    background: ${it};
+    background: ${lt};
 }
 .${R}[data-emphasis='secondary'] button {
-    border-color: ${$e};
-    box-shadow: ${zt};
+    border-color: ${Oe};
+    box-shadow: ${Vt};
 }
 .${R}[data-emphasis='secondary']:hover:not(:has(button:disabled)) button {
-    border-color: ${kt};
-    box-shadow: ${Nt};
+    border-color: ${Ft};
+    box-shadow: ${Ut};
 }
 .${R}[data-emphasis='secondary'] button:active:not(:disabled) {
-    border-color: ${kt};
-    box-shadow: ${Nt};
+    border-color: ${Ft};
+    box-shadow: ${Ut};
 }
 .${R}[data-emphasis='primary'] button {
     border-color: transparent;
-    box-shadow: ${we};
+    box-shadow: ${Pe};
 }
 .${g} > * {
     flex: 0 0 auto;
     min-width: 0;
 }
 .${g} > * + * {
-    border-left: 1px solid ${Ee};
+    border-left: 1px solid ${ye};
 }
 .${g}[data-snap='true'] {
     scroll-snap-type: x proximity;
@@ -92,23 +92,23 @@ const pe = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "Arrow
     .${g}[data-snap='true'] > * {
         scroll-snap-align: none;
     }
-}`, Pe = "malachite-card-strip-style", ke = "malachite-card-strip-add-slot", Ne = `
-.${g} > [${st}] {
+}`, Fe = "malachite-card-strip-style", Ue = "malachite-card-strip-add-slot", Be = `
+.${g} > [${it}] {
     display: flex;
     border-left: none;
 }
-[${st}] > .${R} {
+[${it}] > .${R} {
     height: 100% !important;
     padding: 0 !important;
 }
-`, Ut = () => typeof window > "u" || typeof window.matchMedia != "function" ? !0 : window.matchMedia("(prefers-reduced-motion: reduce)").matches, x = (e) => e.dataset.value ?? e.getAttribute("value"), at = (e) => e.hasAttribute("disabled") || e.getAttribute("aria-disabled") === "true", Fe = (e) => {
+`, Gt = () => typeof window > "u" || typeof window.matchMedia != "function" ? !0 : window.matchMedia("(prefers-reduced-motion: reduce)").matches, S = (e) => e.dataset.value ?? e.getAttribute("value"), ct = (e) => e.hasAttribute("disabled") || e.getAttribute("aria-disabled") === "true", Ge = (e) => {
   const a = e.parentElement;
-  return !a || a.querySelectorAll(G).length !== 1 ? null : a.querySelector(Wt);
-}, Ue = (e, a) => {
+  return !a || a.querySelectorAll(G).length !== 1 ? null : a.querySelector(Yt);
+}, He = (e, a) => {
   const l = e.closest(G);
   if (l)
     return l;
-  if (e.closest(Wt))
+  if (e.closest(Yt))
     return null;
   let u = e;
   for (; u && a.contains(u); ) {
@@ -118,71 +118,71 @@ const pe = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "Arrow
     u = u.parentElement;
   }
   return null;
-}, Be = (e) => {
-  const a = Fe(e);
-  return a ? Array.from(a.querySelectorAll(be)) : [];
-}, Ge = (e) => {
+}, Xe = (e) => {
+  const a = Ge(e);
+  return a ? Array.from(a.querySelectorAll(_e)) : [];
+}, We = (e) => {
   e.hasAttribute(B) || e.setAttribute(B, e.getAttribute("tabindex") ?? ""), e.setAttribute("tabindex", "-1");
-}, He = (e) => {
+}, ze = (e) => {
   if (!e.hasAttribute(B))
     return;
   const a = e.getAttribute(B);
   e.removeAttribute(B), a ? e.setAttribute("tabindex", a) : e.removeAttribute("tabindex");
-}, Xe = {
+}, Ye = {
   profile: "var(--malachite-selectable-card-selected-border, #047b43)",
   library: "var(--malachite-selectable-card-library-selected-border, #bbbbbb)",
   editing: "var(--malachite-selectable-card-pending-foreground, #96580a)"
-}, We = {
+}, Ve = {
   backgroundRepeat: "no-repeat",
   backgroundPosition: "left bottom",
-  backgroundSize: `100% ${ut}px`
-}, Bt = 0.5, Gt = q - ct, ze = (e) => {
-  const a = e.querySelector(`:scope > .${se}`);
+  backgroundSize: `100% ${ft}px`
+}, Ht = 0.5, Xt = K - st, Me = (e) => {
+  const a = e.querySelector(`:scope > .${de}`);
   if (!a)
     return null;
   const { left: l, right: u } = a.getBoundingClientRect();
-  return { left: l + Gt, right: u - Gt };
-}, Ye = (e, a, l, u) => {
+  return { left: l + Xt, right: u - Xt };
+}, qe = (e, a, l, u) => {
   if (!e)
     return;
-  const f = Xe[u], T = e.getBoundingClientRect(), I = T.left, _ = l && (a != null && a.contains(l)) ? a.getBoundingClientRect() : T, L = l == null ? void 0 : l.getBoundingClientRect(), m = l ? ze(l) : null, j = (m == null ? void 0 : m.left) ?? (L ? L.left - ct : 0), J = (m == null ? void 0 : m.right) ?? (L ? L.right + ct : 0), P = L ? Math.max(j, _.left) + Bt - I : 0, b = L ? Math.min(J, _.right) - Bt - I : 0;
+  const f = Ye[u], $ = e.getBoundingClientRect(), I = $.left, _ = l && (a != null && a.contains(l)) ? a.getBoundingClientRect() : $, L = l == null ? void 0 : l.getBoundingClientRect(), m = l ? Me(l) : null, J = (m == null ? void 0 : m.left) ?? (L ? L.left - st : 0), Q = (m == null ? void 0 : m.right) ?? (L ? L.right + st : 0), P = L ? Math.max(J, _.left) + Ht - I : 0, b = L ? Math.min(Q, _.right) - Ht - I : 0;
   e.style.backgroundImage = b > P ? `linear-gradient(to right, ${f} 0 ${P}px, transparent ${P}px ${b}px, ${f} ${b}px 100%)` : `linear-gradient(to right, ${f} 0 100%)`;
-}, Ve = {
-  marginInline: `calc(${$t} * -1)`,
-  paddingInline: $t
-}, ft = {
-  background: it,
-  borderRadius: Se,
-  paddingTop: `${v}px`,
-  paddingInline: `${v}px`,
-  marginBottom: `${ut}px`
-}, Me = {
-  ...ft,
+}, Ke = {
+  marginInline: `calc(${Dt} * -1)`,
+  paddingInline: Dt
+}, pt = {
+  background: lt,
+  borderRadius: Ee,
+  paddingTop: `${w}px`,
+  paddingInline: `${w}px`,
+  marginBottom: `${ft}px`
+}, je = {
+  ...pt,
   marginInline: `${H}px`
-}, qe = ft, Ke = ft, je = {
+}, Je = pt, Qe = pt, Ze = {
   marginInlineStart: `${H}px`
-}, Je = {
+}, tr = {
   primary: {
-    backgroundColor: Oe,
-    color: ve
+    backgroundColor: Ce,
+    color: Ie
   },
-  secondary: { backgroundColor: De, color: ye }
-}, Vt = ({
+  secondary: { backgroundColor: ve, color: we }
+}, qt = ({
   label: e,
   icon: a,
   onClick: l,
   disabled: u = !1,
   emphasis: f = "secondary",
-  className: T = ""
+  className: $ = ""
 }) => /* @__PURE__ */ h(
   "div",
   {
     className: R,
     "data-emphasis": f,
     style: {
-      ...qe,
-      width: `${dt}px`,
-      height: `calc(100% - ${ut}px)`
+      ...Je,
+      width: `${ut}px`,
+      height: `calc(100% - ${ft}px)`
     },
     children: /* @__PURE__ */ h("div", { className: "flex h-full items-center justify-center px-4", children: /* @__PURE__ */ U(
       "button",
@@ -190,16 +190,16 @@ const pe = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "Arrow
         type: "button",
         onClick: l,
         disabled: u,
-        style: Je[f],
-        className: `${fe} inline-flex items-center justify-center gap-1.5 h-[var(--malachite-control-height-medium,32px)] w-[108px] px-2.5 rounded-xl border border-solid text-[length:var(--malachite-font-size-small,13px)] font-medium whitespace-nowrap ${u ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} ${T}`,
+        style: tr[f],
+        className: `${me} inline-flex items-center justify-center gap-1.5 h-[var(--malachite-control-height-medium,32px)] w-[108px] px-2.5 rounded-xl border border-solid text-[length:var(--malachite-font-size-small,13px)] font-medium whitespace-nowrap ${u ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} ${$}`,
         children: [
-          /* @__PURE__ */ h("span", { className: "inline-flex h-[13px] w-[13px] shrink-0 items-center justify-center", children: a ?? /* @__PURE__ */ h(oe, { size: 13 }) }),
+          /* @__PURE__ */ h("span", { className: "inline-flex h-[13px] w-[13px] shrink-0 items-center justify-center", children: a ?? /* @__PURE__ */ h(se, { size: 13 }) }),
           e
         ]
       }
     ) })
   }
-), lt = (e) => C.isValidElement(e) && e.type === Vt, Qe = (e) => C.isValidElement(e) && e.type === C.Fragment && C.Children.toArray(e.props.children).some(lt), Ht = ({ side: e, onClick: a }) => /* @__PURE__ */ h(
+), dt = (e) => C.isValidElement(e) && e.type === qt, er = (e) => C.isValidElement(e) && e.type === C.Fragment && C.Children.toArray(e.props.children).some(dt), Wt = ({ side: e, onClick: a }) => /* @__PURE__ */ h(
   "button",
   {
     type: "button",
@@ -209,85 +209,90 @@ const pe = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "Arrow
     onClick: a,
     className: "absolute top-1/2 -translate-y-1/2 z-10 inline-flex items-center justify-center w-5 h-5 rounded-lg cursor-pointer text-[var(--malachite-text-secondary)]",
     style: {
-      [e]: `-${xe}px`,
-      background: Re,
-      border: `1px solid ${_e}`,
-      boxShadow: zt
+      [e]: `-${Te}px`,
+      background: Se,
+      border: `1px solid ${xe}`,
+      boxShadow: Vt
     },
-    children: e === "left" ? /* @__PURE__ */ h(re, { size: vt }) : /* @__PURE__ */ h(ne, { size: vt })
+    children: e === "left" ? /* @__PURE__ */ h(ae, { size: Ct }) : /* @__PURE__ */ h(ce, { size: Ct })
   }
-), Ze = ({
+), rr = ({
   value: e,
   tone: a,
   onChange: l,
   children: u,
   leading: f,
-  arrows: T = !0,
+  arrows: $ = !0,
   fadeEdges: I = !0,
   snap: _ = !0,
   bleed: L = !1,
   scrollSelectedIntoView: m = !0,
-  "aria-label": j,
-  "aria-labelledby": J,
+  "aria-label": J,
+  "aria-labelledby": Q,
   className: P = "",
   style: b
 }) => {
-  const $ = O(null), pt = O(null), k = O(null), ht = O(!1), [X, Mt] = nt({ canScrollLeft: !1, canScrollRight: !1 }), [qt, mt] = nt(!1), W = O(null), bt = O(!1);
-  Ot($, Ie, Pe), Ot($, Ne, ke);
-  const Q = C.Children.toArray(u), Z = Q.filter((t) => !lt(t)), Kt = Z.some(Qe), D = Z.length > 0, z = Q.filter(lt).map(
+  const y = T(null), ht = T(null), k = T(null), mt = T(!1), [X, Kt] = M({ canScrollLeft: !1, canScrollRight: !1 }), [jt, bt] = M(!1), W = T(null), gt = T(!1);
+  wt(y, Ne, Fe), wt(y, Be, Ue);
+  const Z = C.Children.toArray(u), tt = Z.filter((t) => !dt(t)), Jt = tt.some(er), D = tt.length > 0, z = Z.filter(dt).map(
     (t) => t.props.emphasis === void 0 ? C.cloneElement(t, { emphasis: D ? "secondary" : "primary" }) : t
-  ), gt = Q.length, tt = z.length;
-  w(() => {
-    const t = $.current;
-    if (!t || !D || tt === 0) {
-      mt(!1);
+  ), Rt = Z.length, et = z.length;
+  v(() => {
+    const t = y.current;
+    if (!t || !D || et === 0) {
+      bt(!1);
       return;
     }
-    const r = pt.current, { paddingLeft: o, paddingRight: s } = getComputedStyle(t), i = (parseFloat(o) || 0) + (parseFloat(s) || 0);
+    const r = ht.current, { paddingLeft: o, paddingRight: s } = getComputedStyle(t), i = (parseFloat(o) || 0) + (parseFloat(s) || 0);
     let d = t.clientWidth - i, p = (r == null ? void 0 : r.offsetWidth) ?? 0;
     const n = () => {
-      const y = p + tt * dt + Le;
-      mt(d > 0 && d < y);
+      const O = p + et * ut + $e;
+      bt(d > 0 && d < O);
     };
     n();
-    const c = typeof ResizeObserver < "u" ? new ResizeObserver((y) => {
-      var E, Tt;
-      for (const V of y ?? [])
-        V.target === t ? d = V.contentRect.width : p = ((Tt = (E = V.borderBoxSize) == null ? void 0 : E[0]) == null ? void 0 : Tt.inlineSize) ?? V.contentRect.width + 2 * v;
+    const c = typeof ResizeObserver < "u" ? new ResizeObserver((O) => {
+      var E, yt;
+      for (const V of O ?? [])
+        V.target === t ? d = V.contentRect.width : p = ((yt = (E = V.borderBoxSize) == null ? void 0 : E[0]) == null ? void 0 : yt.inlineSize) ?? V.contentRect.width + 2 * w;
       n();
     }) : null;
     return c == null || c.observe(t), r && (c == null || c.observe(r)), () => c == null ? void 0 : c.disconnect();
-  }, [D, tt, !!f]);
-  const et = qt && D, Rt = S((t) => {
+  }, [D, et, !!f]);
+  const rt = jt && D, _t = x((t) => {
     var o;
     const r = t.type === "focus" ? t.target : t.relatedTarget;
-    bt.current = !!(r instanceof Node && ((o = W.current) != null && o.contains(r)));
+    gt.current = !!(r instanceof Node && ((o = W.current) != null && o.contains(r)));
   }, []);
-  w(() => {
+  v(() => {
     var o;
     const t = W.current, r = t ? t.getRootNode().activeElement : null;
-    bt.current && t && !(r && t.contains(r)) && ((o = t.querySelector("button")) == null || o.focus({ preventScroll: !0 }));
-  }, [et]);
-  const A = S(() => {
-    const t = $.current;
+    gt.current && t && !(r && t.contains(r)) && ((o = t.querySelector("button")) == null || o.focus({ preventScroll: !0 }));
+  }, [rt]);
+  const A = x(() => {
+    const t = y.current;
     return t ? Array.from(t.querySelectorAll(G)) : [];
-  }, []), rt = S(
-    () => A().filter((t) => x(t) !== null),
+  }, []), nt = T(null), [At, Qt] = M(0);
+  v(() => {
+    const t = JSON.stringify(A().map(S));
+    nt.current !== null && nt.current !== t && Qt((r) => r + 1), nt.current = t;
+  });
+  const ot = x(
+    () => A().filter((t) => S(t) !== null),
     [A]
-  ), _t = O(/* @__PURE__ */ new Set()), N = S((t, r) => {
-    _t.current.has(t) || (_t.current.add(t), console.warn(r));
-  }, []), [jt, Jt] = nt("profile");
-  w(() => {
+  ), St = T(/* @__PURE__ */ new Set()), N = x((t, r) => {
+    St.current.has(t) || (St.current.add(t), console.warn(r));
+  }, []), [Zt, te] = M("profile");
+  v(() => {
     var r, o;
-    const t = (o = (r = A().find((s) => x(s) === e)) == null ? void 0 : r.parentElement) == null ? void 0 : o.getAttribute("data-variant");
-    (t === "profile" || t === "library" || t === "editing") && Jt(t);
-  }, [A, e]), w(() => {
-    const t = A(), r = rt(), s = r.find((n) => x(n) === e) ?? r.find((n) => !at(n)) ?? null;
+    const t = (o = (r = A().find((s) => S(s) === e)) == null ? void 0 : r.parentElement) == null ? void 0 : o.getAttribute("data-variant");
+    (t === "profile" || t === "library" || t === "editing") && te(t);
+  }, [A, e]), v(() => {
+    const t = A(), r = ot(), s = r.find((n) => S(n) === e) ?? r.find((n) => !ct(n)) ?? null;
     if (t.forEach((n) => {
-      const c = n === s, y = c ? 0 : -1;
-      n.tabIndex !== y && (n.tabIndex = y);
-      for (const E of Be(n))
-        c ? He(E) : Ge(E);
+      const c = n === s, O = c ? 0 : -1;
+      n.tabIndex !== O && (n.tabIndex = O);
+      for (const E of Xe(n))
+        c ? ze(E) : We(E);
     }), process.env.NODE_ENV === "production")
       return;
     r.length !== t.length && N(
@@ -296,7 +301,7 @@ const pe = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "Arrow
     );
     const i = /* @__PURE__ */ new Set();
     for (const n of r) {
-      const c = x(n);
+      const c = S(n);
       c !== null && (i.has(c) && N(
         `duplicate:${c}`,
         `CardStrip: two cards share the data-value "${c}". Both will read as checked and only the first is selectable — data-value must be unique.`
@@ -313,55 +318,55 @@ const pe = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "Arrow
     t.length > 0 && d && p !== 1 && N(
       `checked:${p}`,
       `CardStrip: ${p} cards are aria-checked, but a radiogroup has exactly one. Drive each card's checked state from the strip's \`value\`.`
-    ), Kt && N(
+    ), Jt && N(
       "wrapped-add-tile",
       "CardStrip: a CardStrip.AddTile inside a fragment is treated as a card and scrolls with them. The add tile must be a direct child of CardStrip."
     );
   });
-  const F = S(() => {
-    const t = A().find((r) => x(r) === e);
+  const F = x(() => {
+    const t = A().find((r) => S(r) === e);
     return t ? t.closest('[role="radio"]') ?? t : null;
   }, [A, e]);
-  w(() => {
+  v(() => {
     if (!m)
       return;
     const t = k.current, r = F();
     if (!t || !r || typeof t.scrollTo != "function")
       return;
-    const o = ht.current;
-    ht.current = !0;
-    const s = Dt(t, r, _);
+    const o = mt.current;
+    mt.current = !0;
+    const s = Ot(t, r, _);
     s !== null && t.scrollTo({
       left: s,
-      behavior: o && !Ut() ? "smooth" : "instant"
+      behavior: o && !Gt() ? "smooth" : "instant"
     });
-  }, [F, m, _, gt]);
-  const At = a ?? jt, St = (b == null ? void 0 : b.background) !== void 0 || (b == null ? void 0 : b.backgroundImage) !== void 0, Y = S(() => {
+  }, [F, m, _, Rt, At]);
+  const xt = a ?? Zt, Lt = (b == null ? void 0 : b.background) !== void 0 || (b == null ? void 0 : b.backgroundImage) !== void 0, Y = x(() => {
     var p;
     const t = k.current;
-    if (St || Ye(
-      $.current,
+    if (Lt || qe(
+      y.current,
       t,
-      (p = A().find((n) => x(n) === e)) == null ? void 0 : p.parentElement,
-      At
+      (p = A().find((n) => S(n) === e)) == null ? void 0 : p.parentElement,
+      xt
     ), !t)
       return;
-    const { scrollWidth: r, clientWidth: o, scrollLeft: s } = t, i = r > o + ot, d = {
-      canScrollLeft: i && s > ot,
-      canScrollRight: i && s + o < r - ot
+    const { scrollWidth: r, clientWidth: o, scrollLeft: s } = t, i = r > o + at, d = {
+      canScrollLeft: i && s > at,
+      canScrollRight: i && s + o < r - at
     };
-    Mt(
+    Kt(
       (n) => n.canScrollLeft === d.canScrollLeft && n.canScrollRight === d.canScrollRight ? n : d
     );
-  }, [St, A, At, e]);
-  w(() => {
+  }, [Lt, A, xt, e]);
+  v(() => {
     Y();
     const t = k.current;
     if (!t)
       return;
     const r = () => {
       const c = F();
-      return c !== null && le(t, c);
+      return c !== null && fe(t, c);
     };
     let o = r();
     const s = () => {
@@ -370,7 +375,7 @@ const pe = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "Arrow
     t.addEventListener("scroll", s, { passive: !0 });
     let i = 0;
     const d = () => {
-      const c = F(), E = m && o && typeof t.scrollTo == "function" && c ? Dt(t, c, _) : null;
+      const c = F(), E = m && o && typeof t.scrollTo == "function" && c ? Ot(t, c, _) : null;
       E !== null && t.scrollTo({ left: E, behavior: "instant" }), o = r();
     }, p = () => {
       if (Y(), typeof requestAnimationFrame != "function") {
@@ -382,28 +387,28 @@ const pe = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "Arrow
     return n == null || n.observe(t), () => {
       t.removeEventListener("scroll", s), n == null || n.disconnect(), typeof cancelAnimationFrame == "function" && cancelAnimationFrame(i);
     };
-  }, [Y, F, m, _, gt]);
-  const xt = S(
+  }, [Y, F, m, _, Rt, At]);
+  const Et = x(
     (t) => {
       const r = k.current;
       !r || typeof r.scrollBy != "function" || r.scrollBy({
-        left: ie(r, t, _) - r.scrollLeft,
-        behavior: Ut() ? "auto" : "smooth"
+        left: ue(r, t, _) - r.scrollLeft,
+        behavior: Gt() ? "auto" : "smooth"
       });
     },
     [_]
-  ), Qt = S(
+  ), ee = x(
     (t) => {
-      if (!pe.has(t.key))
+      if (!be.has(t.key))
         return;
       const r = t.target;
       if (!(r instanceof Element) || !r.closest(G))
         return;
-      const o = rt().filter((n) => !at(n));
+      const o = ot().filter((n) => !ct(n));
       if (o.length === 0)
         return;
       t.preventDefault();
-      const s = o.findIndex((n) => x(n) === e);
+      const s = o.findIndex((n) => S(n) === e);
       let i;
       if (t.key === "Home")
         i = 0;
@@ -413,38 +418,38 @@ const pe = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "Arrow
         const n = t.key === "ArrowLeft" || t.key === "ArrowUp" ? -1 : 1;
         i = ((s === -1 ? 0 : s) + n + o.length) % o.length;
       }
-      const d = o[i], p = x(d);
+      const d = o[i], p = S(d);
       p !== null && p !== e && l(p), d.focus();
     },
-    [rt, l, e]
-  ), Zt = S(
+    [ot, l, e]
+  ), re = x(
     (t) => {
       const r = t.target;
       if (!(r instanceof Element) || r.closest(`.${R}`))
         return;
-      const o = $.current;
+      const o = y.current;
       if (!o)
         return;
-      const s = Ue(r, o);
-      if (!s || at(s))
+      const s = He(r, o);
+      if (!s || ct(s))
         return;
-      const i = x(s);
+      const i = S(s);
       i !== null && i !== e && l(i);
     },
     [l, e]
-  ), te = T && X.canScrollLeft, ee = T && X.canScrollRight, Lt = I && X.canScrollLeft, Et = I && X.canScrollRight;
+  ), ne = $ && X.canScrollLeft, oe = $ && X.canScrollRight, Tt = I && X.canScrollLeft, $t = I && X.canScrollRight;
   return /* @__PURE__ */ U(
     "div",
     {
-      ref: $,
-      onKeyDown: Qt,
-      onFocus: Rt,
-      onBlur: Rt,
-      onClick: Zt,
-      className: `${K} flex items-stretch ${P}`,
+      ref: y,
+      onKeyDown: ee,
+      onFocus: _t,
+      onBlur: _t,
+      onClick: re,
+      className: `${j} flex items-stretch ${P}`,
       style: {
-        ...We,
-        ...L ? Ve : null,
+        ...Ve,
+        ...L ? Ke : null,
         ...b
       },
       children: [
@@ -452,43 +457,43 @@ const pe = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "Arrow
           "div",
           {
             role: "radiogroup",
-            "aria-label": j,
-            "aria-labelledby": J,
+            "aria-label": J,
+            "aria-labelledby": Q,
             className: D ? "flex items-stretch min-w-0" : "flex items-stretch",
             children: [
-              f ? /* @__PURE__ */ h(yt.Provider, { value: de, children: /* @__PURE__ */ h("div", { ref: pt, className: "shrink-0", style: Ke, children: f }) }) : null,
+              f ? /* @__PURE__ */ h(vt.Provider, { value: pe, children: /* @__PURE__ */ h("div", { ref: ht, className: "shrink-0", style: Qe, children: f }) }) : null,
               D ? /* @__PURE__ */ U(
                 "div",
                 {
-                  [me]: "",
+                  [Re]: "",
                   className: "relative min-w-0 shrink basis-auto",
-                  style: Me,
+                  style: je,
                   children: [
                     /* @__PURE__ */ U(
                       "div",
                       {
                         ref: k,
                         tabIndex: -1,
-                        [he]: "",
+                        [ge]: "",
                         "data-snap": _ ? "true" : "false",
                         className: g,
                         children: [
-                          /* @__PURE__ */ h(yt.Provider, { value: ue, children: Z }),
-                          et ? /* @__PURE__ */ h("div", { ref: W, [st]: "", children: z }) : null
+                          /* @__PURE__ */ h(vt.Provider, { value: he, children: tt }),
+                          rt ? /* @__PURE__ */ h("div", { ref: W, [it]: "", children: z }) : null
                         ]
                       }
                     ),
-                    te ? /* @__PURE__ */ h(Ht, { side: "left", onClick: () => xt(-1) }) : null,
-                    ee ? /* @__PURE__ */ h(Ht, { side: "right", onClick: () => xt(1) }) : null,
-                    Lt || Et ? /* @__PURE__ */ h(
+                    ne ? /* @__PURE__ */ h(Wt, { side: "left", onClick: () => Et(-1) }) : null,
+                    oe ? /* @__PURE__ */ h(Wt, { side: "right", onClick: () => Et(1) }) : null,
+                    Tt || $t ? /* @__PURE__ */ h(
                       "div",
                       {
                         "aria-hidden": !0,
                         "data-card-strip-fade": "",
-                        className: `${Xt} absolute pointer-events-none`,
+                        className: `${zt} absolute pointer-events-none`,
                         style: {
-                          inset: `-${v}px -${Yt}px 0`,
-                          background: `linear-gradient(to right, ${Lt ? Pt : "transparent"} 0, transparent ${It}px, transparent calc(100% - ${It}px), ${Et ? Pt : "transparent"} 100%)`
+                          inset: `-${w}px -${Mt}px 0`,
+                          background: `linear-gradient(to right, ${Tt ? Nt : "transparent"} 0, transparent ${kt}px, transparent calc(100% - ${kt}px), ${$t ? Nt : "transparent"} 100%)`
                         }
                       }
                     ) : null
@@ -498,12 +503,12 @@ const pe = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "Arrow
             ]
           }
         ),
-        z.length > 0 && !et ? /* @__PURE__ */ h(
+        z.length > 0 && !rt ? /* @__PURE__ */ h(
           "div",
           {
             ref: W,
             className: "shrink-0",
-            style: !D && f ? je : void 0,
+            style: !D && f ? Ze : void 0,
             children: z
           }
         ) : null
@@ -511,9 +516,9 @@ const pe = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "Arrow
     }
   );
 };
-Ze.AddTile = Vt;
+rr.AddTile = qt;
 export {
-  Ze as CardStrip,
-  Ze as default
+  rr as CardStrip,
+  rr as default
 };
 //# sourceMappingURL=CardStrip.js.map