@stackone/malachite 2.33.1 → 2.34.0

package/dist/components/CardStrip.js

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