@sensiblestats/widget-react 0.86.0 → 0.87.0

package/dist/styles.css

@@ -1003,8 +1003,13 @@
 .ss-w-fandash-live-team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; line-height: 1.15; color: var(--ss-w-ink); }
 .ss-w-fandash-live-score-main { display: flex; align-items: baseline; justify-content: center; font-size: 36px; font-weight: 850; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; color: var(--ss-w-ink); }
 .ss-w-fandash-live-score-sep { color: var(--ss-w-faint); font-weight: 500; margin: 0 5px; }
-.ss-w-fandash-live-scorers { margin-top: 12px; display: flex; justify-content: flex-end; gap: 7px; align-items: center; font-size: 12.5px; color: var(--ss-w-faint); overflow-wrap: anywhere; }
-.ss-w-fandash-live-scorers-icon { flex: none; color: var(--ss-w-away); }
+.ss-w-fandash-live-scorers-row { margin-top: 12px; display: flex; justify-content: space-between; gap: 10px; }
+.ss-w-fandash-live-scorers { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; color: var(--ss-w-faint); overflow-wrap: anywhere; }
+.ss-w-fandash-live-scorers--home { justify-content: flex-start; }
+.ss-w-fandash-live-scorers--away { justify-content: flex-end; }
+.ss-w-fandash-live-scorers--home .ss-w-fandash-live-scorers-icon { color: var(--ss-w-home); }
+.ss-w-fandash-live-scorers--away .ss-w-fandash-live-scorers-icon { color: var(--ss-w-away); }
+.ss-w-fandash-live-scorers-icon { flex: none; }
 
 /* live timeline: a compact two-sided event list down a centre spine -- each club's events sit on
    its own side (home left, away right), most-recent 3 shown with a "See more" toggle for the
@@ -1103,6 +1108,41 @@
 .ss-w-mon-scorers-home { text-align: right; }
 .ss-w-mon-scorers-away { text-align: left; }
 .ss-w-mon-scorers-ball { flex: none; align-self: start; line-height: 1.35; }
+
+/* Pinned pre-match form + head-to-head (MonitorFormH2H): collapsed by default, a real <button>
+   header toggles it. W/D/L dots and the H2H bar/legend keep fixed, theme-independent colors
+   (same convention as the dashboard tile accents above) since they're self-contained badges
+   carrying their own ink color, not page-background-dependent text. */
+.ss-w-h2h { border-left: 3px solid #16A34A; padding-left: 12px; }
+.ss-w-h2h-head { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; cursor: pointer; text-align: left; font: inherit; color: inherit; padding: 0; }
+.ss-w-h2h-head-l { display: flex; align-items: center; gap: 6px; }
+.ss-w-h2h-dot { width: 4px; height: 4px; border-radius: 999px; background: var(--ss-w-faint); flex: none; }
+.ss-w-h2h-title { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
+.ss-w-h2h-chevron { flex: none; color: var(--ss-w-faint); transition: transform .15s ease; }
+.ss-w-h2h-chevron--open { transform: rotate(180deg); }
+.ss-w-h2h-body { padding-top: 12px; display: flex; flex-direction: column; gap: 12px; }
+.ss-w-h2h-forms { display: flex; align-items: flex-start; justify-content: space-between; }
+.ss-w-h2h-form-col { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
+.ss-w-h2h-form-col--away { align-items: flex-end; }
+.ss-w-h2h-form-team { font-size: 11px; color: var(--ss-w-faint); }
+.ss-w-h2h-dots { display: flex; gap: 4px; }
+.ss-w-h2h-result { width: 20px; height: 20px; border-radius: 999px; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
+.ss-w-h2h-result--win { background: #16A34A; color: #FFFFFF; }
+.ss-w-h2h-result--draw { background: #E5E7EB; color: #4B5563; }
+.ss-w-h2h-result--loss { background: #F5A623; color: #1F2937; }
+.ss-w-h2h-record { display: flex; flex-direction: column; gap: 6px; }
+.ss-w-h2h-meta { font-size: 11px; color: var(--ss-w-faint); }
+.ss-w-h2h-bar { display: flex; width: 100%; height: 8px; border-radius: 999px; overflow: hidden; }
+.ss-w-h2h-bar-seg--win { background: #16A34A; }
+.ss-w-h2h-bar-seg--draw { background: #D1D5DB; }
+.ss-w-h2h-bar-seg--loss { background: #2563EB; }
+.ss-w-h2h-legend { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
+.ss-w-h2h-legend-item { font-size: 11px; color: var(--ss-w-ink); display: flex; align-items: center; gap: 5px; }
+.ss-w-h2h-legend-dot { width: 7px; height: 7px; border-radius: 999px; display: inline-block; flex: none; }
+.ss-w-h2h-legend-dot--win { background: #16A34A; }
+.ss-w-h2h-legend-dot--draw { background: #D1D5DB; }
+.ss-w-h2h-legend-dot--loss { background: #2563EB; }
+
 .ss-w-fact { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--ss-w-accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 22%, transparent); }
 .ss-w-fact-k { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ss-w-accent); }
 .ss-w-fact-min { color: var(--ss-w-ink); letter-spacing: 0; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sensiblestats/widget-react",
-  "version": "0.86.0",
+  "version": "0.87.0",
   "description": "Embeddable SensibleStats chat widget for React.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -37,7 +37,7 @@
     "prepublishOnly": "yarn build"
   },
   "dependencies": {
-    "@sensiblestats/widget-sdk": "^0.56.0",
+    "@sensiblestats/widget-sdk": "^0.57.0",
     "react-markdown": "^9.0.1",
     "remark-gfm": "^4.0.0"
   },