@stackone/malachite 2.51.1 → 2.52.0

package/dist/components/CardStrip.js

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