@sensiblestats/widget-react 0.26.1 → 0.27.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @sensiblestats/widget-react
 
+## 0.27.0
+
+### Minor Changes
+
+- Entity-card stat-strip redesign: the player/team card renders as a horizontal stat strip instead of vertical stat rows, a W-D-L stat renders as a bar with the record as its label, competition scope tabs move above the strip, and the season chip is pinned to the top-right of the header.
+
+## 0.26.2
+
+### Patch Changes
+
+- Fix the new-turn scroll anchor jumping to the bottom on a follow-up send after tall content (e.g. tapping a chip below a club dashboard). Reserve a viewport of space below the new turn while it streams so its start can actually reach the top of the panel, then collapse the space once the turn completes. The turn's start now stays pinned to the top through the whole reply instead of the view following the stream to the bottom.
+
 ## 0.26.1
 
 ### Patch Changes

package/dist/index.cjs

@@ -853,8 +853,15 @@ function initials(name) {
 function shortSeason(season) {
   return season.replace(/\d{4}/g, (year) => year.slice(2));
 }
-function Crest({ image }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-ecard-crest", style: { backgroundImage: `url(${image})` }, "aria-hidden": "true" });
+function Crest({ image, label }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "span",
+    {
+      className: "ss-w-ecard-crest",
+      style: { backgroundImage: `url(${image})` },
+      ...label ? { role: "img", title: label, "aria-label": label } : { "aria-hidden": "true" }
+    }
+  );
 }
 function FormBar({ w, d, l }) {
   if (w + d + l === 0) return null;
@@ -864,73 +871,73 @@ function FormBar({ w, d, l }) {
     l > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-form-l", style: { flexGrow: l } }) : null
   ] });
 }
-function StatRows({ stats }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "ss-w-ecard-stats", children: stats.map((s) => {
-    const m = RECORD_RE.exec(s.value);
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-ecard-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-ecard-rlabel", children: s.label }),
-      m ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FormBar, { w: Number(m[1]), d: Number(m[2]), l: Number(m[3]) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", {}),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-ecard-rval", children: s.value })
-    ] }, s.label);
-  }) });
-}
-function CardBody({ c }) {
-  const [active, setActive] = (0, import_react3.useState)(0);
-  if (c.scopes.length === 0) return null;
-  const season = c.season ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-ecard-season", children: shortSeason(c.season) }) : null;
-  if (c.scopes.length === 1) {
-    const only = c.scopes[0];
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-ecard-body", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-ecard-tabs ss-w-ecard-tabs-static", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "ss-w-ecard-lead", title: only.label, children: [
-          only.image ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Crest, { image: only.image }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-ecard-lead-txt", children: only.label })
-        ] }),
-        season
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StatRows, { stats: only.stats })
+function StatCellView({ s }) {
+  const m = RECORD_RE.exec(s.value);
+  if (m) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-ecard-cell", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-ecard-cval", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FormBar, { w: Number(m[1]), d: Number(m[2]), l: Number(m[3]) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-ecard-clabel", children: s.value })
     ] });
   }
-  const current = c.scopes[active] ?? c.scopes[0];
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-ecard-body", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-ecard-tabs", role: "tablist", children: [
-      c.scopes.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        "button",
-        {
-          type: "button",
-          role: "tab",
-          className: "ss-w-ecard-tab",
-          "aria-selected": i === active,
-          "aria-label": s.label,
-          title: s.label,
-          onClick: () => setActive(i),
-          children: s.image ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Crest, { image: s.image }) : s.label
-        },
-        String(s.competitionId ?? "all")
-      )),
-      season
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-ecard-cell", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-ecard-cval", children: s.value }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-ecard-clabel", children: s.label })
+  ] });
+}
+function StatStrip({ stats }) {
+  if (stats.length === 0) return null;
+  const cols = Math.min(stats.length, 4);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "ss-w-ecard-strip", style: { gridTemplateColumns: `repeat(${cols}, 1fr)` }, children: stats.map((s) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StatCellView, { s }, s.label + s.value)) });
+}
+function CardHeader({ c, showScopeCrest }) {
+  const onlyScope = c.scopes.length === 1 ? c.scopes[0] : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-ecard-hd", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "span",
+      {
+        className: c.kind === "team" ? "ss-w-thumb ss-w-team" : "ss-w-thumb",
+        style: c.image ? { backgroundImage: `url(${c.image})` } : void 0,
+        children: c.image ? "" : initials(c.name)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "ss-w-ecard-idtext", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-nm", children: c.name }),
+      c.sub ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-sub", children: c.sub }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StatRows, { stats: current.stats }, String(current.competitionId ?? "all"))
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "ss-w-ecard-meta", children: [
+      showScopeCrest && onlyScope?.image ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Crest, { image: onlyScope.image, label: onlyScope.label }) : null,
+      c.season ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-ecard-season", children: shortSeason(c.season) }) : null
+    ] })
   ] });
 }
+function ScopeTabs({ scopes, active, onSelect }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "ss-w-ecard-scopes", role: "tablist", children: scopes.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      className: "ss-w-ecard-scope",
+      "aria-selected": i === active,
+      "aria-label": s.label,
+      title: s.label,
+      onClick: () => onSelect(i),
+      children: s.image ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Crest, { image: s.image }) : s.label
+    },
+    String(s.competitionId ?? "all")
+  )) });
+}
 function EntityCardItem({ c }) {
+  const [active, setActive] = (0, import_react3.useState)(0);
   const hasBody = c.scopes.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: hasBody ? "ss-w-ecard" : "ss-w-ecard ss-w-ecard-bare", "data-kind": c.kind, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-ecard-id", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        "span",
-        {
-          className: c.kind === "team" ? "ss-w-thumb ss-w-team" : "ss-w-thumb",
-          style: c.image ? { backgroundImage: `url(${c.image})` } : void 0,
-          children: c.image ? "" : initials(c.name)
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "ss-w-ecard-idtext", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-nm", children: c.name }),
-        c.sub ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-sub", children: c.sub }) : null
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardBody, { c })
+  if (!hasBody) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "ss-w-ecard ss-w-ecard-bare", "data-kind": c.kind, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardHeader, { c, showScopeCrest: false }) });
+  }
+  const multi = c.scopes.length > 1;
+  const scope = c.scopes[multi ? c.scopes[active] ? active : 0 : 0];
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-ecard", "data-kind": c.kind, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardHeader, { c, showScopeCrest: !multi }),
+    multi ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ScopeTabs, { scopes: c.scopes, active, onSelect: setActive }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StatStrip, { stats: scope.stats })
   ] });
 }
 function EntityCardList({ cards, disabled, showLessLabel = "Show less", showMoreLabel = (n) => `Show ${n} more` }) {
@@ -1085,7 +1092,7 @@ function Crest2({ url, name, kind }) {
 
 // src/components/BettingInsightList.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
-function StatRows2({ stats }) {
+function StatRows({ stats }) {
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "ss-w-bi-rows", children: stats.map((s) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "ss-w-bi-row", children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "ss-w-bi-row-lbl", children: s.label }),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "ss-w-bi-row-num", children: s.value })
@@ -1096,7 +1103,7 @@ function ScopedStats({ scopes }) {
   const current = scopes[active] ?? scopes[0] ?? { key: "", label: "", stats: [] };
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "ss-w-bi-scoped", children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "ss-w-bi-scopes", role: "group", children: scopes.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", className: "ss-w-bi-chip", "aria-pressed": i === active, onClick: () => setActive(i), children: s.label }, s.key)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StatRows2, { stats: current.stats }, current.key)
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StatRows, { stats: current.stats }, current.key)
   ] });
 }
 function hasStatsContent(it) {
@@ -1113,7 +1120,7 @@ function ReasonStrip({ it, ui }) {
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "ss-w-bi-chart", "aria-hidden": "true" }),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "ss-w-bi-reason-body", children: [
       hasText ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: `ss-w-bi-text${open ? "" : " ss-w-bi-text-clamp"}`, children: it.text }) : null,
-      open && hasStats ? hasScopes ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ScopedStats, { scopes: it.scopes }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StatRows2, { stats: it.stats }) : null
+      open && hasStats ? hasScopes ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ScopedStats, { scopes: it.scopes }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StatRows, { stats: it.stats }) : null
     ] }),
     expandable ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "button",
@@ -1889,14 +1896,17 @@ function MessageList({ controller, ui, slip, onDashboardTap }) {
   const anchoredTurnRef = (0, import_react10.useRef)(null);
   (0, import_react10.useEffect)(() => {
     const anchor = turnAnchor(state.messages);
+    const list = listRef.current;
     if (anchor && anchor.turnId !== anchoredTurnRef.current) {
       anchoredTurnRef.current = anchor.turnId;
+      if (endRef.current && list) endRef.current.style.height = `${list.clientHeight}px`;
       pinnedRef.current = false;
-      listRef.current?.querySelector(`[data-msg-id="${anchor.anchorId}"]`)?.scrollIntoView({ block: "start" });
+      list?.querySelector(`[data-msg-id="${anchor.anchorId}"]`)?.scrollIntoView({ block: "start" });
       return;
     }
+    if (!state.isStreaming && endRef.current) endRef.current.style.height = "";
     if (pinnedRef.current) endRef.current?.scrollIntoView({ block: "end" });
-  }, [state.messages, state.status]);
+  }, [state.messages, state.status, state.isStreaming]);
   const hasUserMessage = state.messages.some((m) => m.role === "user");
   const hasDashboard = state.messages.some((m) => m.role === "assistant" && (m.greetingDashboard || m.clubFanDashboard));
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
@@ -1932,7 +1942,7 @@ function MessageList({ controller, ui, slip, onDashboardTap }) {
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { type: "button", className: "ss-w-retry", onClick: () => controller.retry(), children: ui.retry })
         ] }) : null,
         !hasUserMessage && !hasDashboard ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(IntentChips, { chips: state.starters, onPick: (t) => send(t) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { ref: endRef })
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { ref: endRef, className: "ss-w-turn-spacer", "aria-hidden": "true" })
       ]
     }
   );
@@ -2054,6 +2064,10 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 
 /* messages */
 .ss-w-list { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; scroll-padding-top: 14px; }
+/* Transient bottom spacer: reserves a viewport of room below a new turn so its
+   top can be scrolled into view while the reply is still streaming in. Height is
+   set imperatively and flex must not shrink it away. */
+.ss-w-turn-spacer { flex: none; }
 .ss-w-msg { display: flex; }
 .ss-w-user { justify-content: flex-end; }
 .ss-w-user .ss-w-bubble { background: color-mix(in srgb, var(--ss-w-accent) 14%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); border-radius: 14px; padding: 8px 12px; max-width: 80%; }
@@ -2081,10 +2095,9 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 /* entity cards */
 .ss-w-cards { display: flex; flex-direction: column; gap: 8px; }
 
-/* Identity Hero: crest-led identity block | tabbed stats panel */
-.ss-w-ecard { display: grid; grid-template-columns: 112px 1fr; align-items: stretch; width: 100%; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; overflow: hidden; text-align: left; }
+/* Entity card: identity header row over a horizontal stat strip */
+.ss-w-ecard { display: flex; flex-direction: column; width: 100%; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; overflow: hidden; text-align: left; }
 
-.ss-w-ecard-id { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; padding: 13px 10px; border-right: 1px solid var(--ss-w-line); background: linear-gradient(158deg, var(--ss-w-bubble), color-mix(in srgb, var(--ss-w-accent) 9%, var(--ss-w-bubble))); }
 .ss-w-ecard-idtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 100%; }
 .ss-w-thumb { width: 54px; height: 54px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 700; color: #fff; background-color: var(--ss-w-nav); background-size: cover; background-position: center; box-shadow: 0 1px 3px rgba(0,0,0,.14); }
 .ss-w-thumb.ss-w-team { border-radius: 12px; }
@@ -2094,27 +2107,31 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 
 /* bare card (no stat scopes): simple avatar + name row */
 .ss-w-ecard-bare { display: flex; align-items: center; }
-.ss-w-ecard-bare .ss-w-ecard-id { flex-direction: row; text-align: left; gap: 11px; background: none; border-right: none; padding: 10px 12px; }
-.ss-w-ecard-bare .ss-w-thumb { width: 40px; height: 40px; font-size: 13px; box-shadow: none; }
-.ss-w-ecard-bare .ss-w-thumb.ss-w-team { border-radius: 10px; }
-
-.ss-w-ecard-body { min-width: 0; padding: 9px 12px 12px; display: flex; flex-direction: column; }
-
-/* tab strip seated on the stats panel's top edge; active tab underlined in accent */
-.ss-w-ecard-tabs { display: flex; align-items: stretch; gap: 3px; border-bottom: 1px solid var(--ss-w-line); margin-bottom: 9px; flex-wrap: wrap; }
-.ss-w-ecard-tab { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 620; color: var(--ss-w-faint); background: none; border: none; cursor: pointer; padding: 5px 8px 8px; margin-bottom: -1px; border-bottom: 2px solid transparent; }
-.ss-w-ecard-tab[aria-selected="true"] { color: var(--ss-w-ink); border-bottom-color: var(--ss-w-accent); }
-.ss-w-ecard-tabs-static { align-items: center; flex-wrap: nowrap; }
-.ss-w-ecard-lead { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 640; color: var(--ss-w-ink); padding: 4px 2px 8px; min-width: 0; flex: 1; }
-.ss-w-ecard-lead-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-w-ecard-bare .ss-w-ecard-hd { padding: 10px 12px; }
+
+.ss-w-ecard-hd { display: flex; align-items: center; gap: 11px; padding: 11px 13px; }
+.ss-w-ecard-hd .ss-w-thumb { width: 40px; height: 40px; font-size: 13px; box-shadow: none; }
+.ss-w-ecard-hd .ss-w-thumb.ss-w-team { border-radius: 10px; }
+.ss-w-ecard-meta { display: inline-flex; align-items: center; gap: 7px; flex: none; align-self: flex-start; margin-left: auto; }
+.ss-w-ecard-meta .ss-w-ecard-season { margin: 0; }
+
+/* scope tabs: reuse the underline pattern, relocated above the strip */
+.ss-w-ecard-scopes { display: flex; align-items: stretch; gap: 2px; padding: 0 11px; border-top: 1px solid var(--ss-w-line); flex-wrap: wrap; }
+.ss-w-ecard-scope { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 620; color: var(--ss-w-faint); background: none; border: none; cursor: pointer; padding: 7px 8px; margin-bottom: -1px; border-bottom: 2px solid transparent; }
+.ss-w-ecard-scope[aria-selected="true"] { color: var(--ss-w-ink); border-bottom-color: var(--ss-w-accent); }
+.ss-w-ecard-scope .ss-w-ecard-crest { width: 14px; height: 14px; }
+.ss-w-ecard-scopes + .ss-w-ecard-strip { border-top: none; }
+
 .ss-w-ecard-crest { width: 15px; height: 15px; flex: none; display: block; border-radius: 4px; background-size: cover; background-position: center; }
 .ss-w-ecard-season { flex: none; margin-left: auto; align-self: center; margin-bottom: 5px; font-size: 10.5px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 13%, var(--ss-w-panel)); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
-.ss-w-ecard-tabs-static .ss-w-ecard-season { margin-bottom: 4px; }
 
-.ss-w-ecard-stats { display: flex; flex-direction: column; gap: 4px; }
-.ss-w-ecard-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
-.ss-w-ecard-rlabel { font-size: 9.5px; text-transform: uppercase; letter-spacing: .045em; color: var(--ss-w-faint); font-weight: 600; }
-.ss-w-ecard-rval { justify-self: end; font-size: 15px; font-weight: 720; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
+/* stat strip: 1px gap over a line-colored ground paints hairlines between cells, wrap-safe */
+.ss-w-ecard-strip { display: grid; gap: 1px; background: var(--ss-w-line); border-top: 1px solid var(--ss-w-line); }
+.ss-w-ecard-cell { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 10px 4px 11px; background: var(--ss-w-panel); }
+.ss-w-ecard-cval { height: 20px; display: flex; align-items: center; font-size: 17px; font-weight: 720; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
+.ss-w-ecard-cval .ss-w-form { width: 42px; }
+.ss-w-ecard-clabel { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--ss-w-faint); font-weight: 600; font-variant-numeric: tabular-nums; }
+
 .ss-w-form { justify-self: end; display: flex; height: 6px; width: 48px; border-radius: 4px; overflow: hidden; gap: 2px; }
 .ss-w-form span { display: block; border-radius: 2px; }
 .ss-w-form-w { background: var(--ss-w-pos); }