@sensiblestats/widget-react 0.29.2 → 0.29.4

package/dist/styles.css

@@ -396,10 +396,9 @@
 .ss-w-fandash-fixture-team--away .ss-w-fandash-fixture-name { text-align: right; }
 .ss-w-fandash-fixture-vs { flex: none; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ss-w-faint); }
 /* date + venue as labelled rows, so a long stadium name gets its own line to ellipsis in */
-.ss-w-fandash-fixture-meta { display: flex; flex-direction: column; gap: 1px; border-top: 1px solid var(--ss-w-line); padding-top: 8px; }
-.ss-w-fandash-fixture-metarow { display: flex; align-items: baseline; gap: 9px; }
-.ss-w-fandash-fixture-metakey { flex: none; width: 44px; font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); }
-.ss-w-fandash-fixture-metaval { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--ss-w-ink); }
+.ss-w-fandash-fixture-meta { border-top: 1px solid var(--ss-w-line); padding-top: 10px; text-align: center; font-size: 12.5px; color: var(--ss-w-faint); }
+.ss-w-fandash-fixture-kickoff { font-weight: 700; color: var(--ss-w-ink); }
+.ss-w-fandash-fixture-venue { font-weight: 600; }
 .ss-w-fandash-fact { font-size: 12px; color: var(--ss-w-ink); background: var(--ss-w-bubble); border-radius: 8px; padding: 6px 8px; }
 /* each head-to-head figure sits on its own shaded tile, so the grid gap separates wins/draws/losses */
 .ss-w-fandash-h2h .ss-w-fandash-split-cell { background: var(--ss-w-bubble); border-radius: 10px; padding: 12px 6px; }
@@ -409,7 +408,12 @@
 /* last-five: one row per side, team name left, form pills right */
 .ss-w-fandash-fixture-form { display: flex; flex-direction: column; gap: 5px; }
 .ss-w-fandash-formrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+.ss-w-fandash-formrow-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.ss-w-fandash-formrow-team .ss-w-bi-crest { width: 20px; height: 20px; }
+.ss-w-fandash-formrow-team .ss-w-bi-crest-mono { font-size: 9px; }
 .ss-w-fandash-formrow-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
+.ss-w-fandash-injuries-more { margin-top: 10px; width: 100%; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 9px; padding: 7px; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--ss-w-accent); cursor: pointer; }
+.ss-w-fandash-injuries-more:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; }
 .ss-w-fandash-form { display: inline-flex; gap: 3px; flex: none; }
 .ss-w-fandash-form-pill {
   display: inline-grid; place-items: center; width: 16px; height: 16px;
@@ -473,35 +477,76 @@
 .ss-w-fandash-link-label { font-size: 12.5px; font-weight: 650; overflow-wrap: anywhere; }
 .ss-w-fandash-link-chevron { flex: none; width: 12px; height: 12px; color: var(--ss-w-accent); }
 
-/* post-match result: full-time scoreboard -- team names flank the score, meta line underneath */
-.ss-w-fandash-postmatch-scoreboard { display: flex; align-items: center; gap: 8px; }
-.ss-w-fandash-postmatch-team { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 650; }
-.ss-w-fandash-postmatch-team--away { text-align: right; }
-.ss-w-fandash-postmatch-score { flex: none; font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }
-.ss-w-fandash-postmatch-sep { flex: none; font-size: 14px; font-weight: 700; color: var(--ss-w-faint); }
-.ss-w-fandash-postmatch-meta { font-size: 11.5px; color: var(--ss-w-faint); }
-
-/* post-match goals: a plain list, the club's own goals picked out in the accent color */
-.ss-w-fandash-postmatch-goal-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
-.ss-w-fandash-postmatch-goal { font-size: 12.5px; color: var(--ss-w-faint); }
+/* post-match result: full-time scoreboard, mirroring the live card's crest + big-score treatment.
+   A neutral "Full time" pill sits left of a coloured Win/Draw/Loss tag; the 3-column main row
+   (home crest+name | score | away crest+name, away reversed) puts the winner's score in full ink
+   and the loser's dimmed; a centered meta line sits under a divider. */
+.ss-w-fandash-postmatch-top { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; }
+.ss-w-fandash-postmatch-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ss-w-faint); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 6px; padding: 3px 8px; }
+.ss-w-fandash-postmatch-tag { margin-left: auto; flex: none; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
+.ss-w-fandash-postmatch-tag--win { color: var(--ss-w-pos); }
+.ss-w-fandash-postmatch-tag--loss { color: var(--ss-w-neg); }
+.ss-w-fandash-postmatch-tag--draw { color: var(--ss-w-faint); }
+.ss-w-fandash-postmatch-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
+.ss-w-fandash-postmatch-side { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.ss-w-fandash-postmatch-side--away { flex-direction: row-reverse; text-align: right; }
+.ss-w-fandash-postmatch-crest { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12.5px; object-fit: cover; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
+.ss-w-fandash-postmatch-crest--fallback.ss-w-fandash-postmatch-crest--home { background: var(--ss-w-home); }
+.ss-w-fandash-postmatch-crest--fallback.ss-w-fandash-postmatch-crest--away { background: var(--ss-w-away); }
+.ss-w-fandash-postmatch-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-postmatch-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; }
+.ss-w-fandash-postmatch-score-value--win { color: var(--ss-w-ink); }
+.ss-w-fandash-postmatch-score-value--lose { color: var(--ss-w-faint); }
+.ss-w-fandash-postmatch-score-sep { color: var(--ss-w-faint); font-weight: 500; margin: 0 5px; }
+.ss-w-fandash-postmatch-meta { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--ss-w-line); font-size: 12px; color: var(--ss-w-faint); text-align: center; }
+
+/* post-match goals: a football-ball icon per goal (mirrors the live timeline ball, duplicated here
+   under the postmatch prefix), text dimmed for opponent goals and picked out in full ink + bold
+   for the club's own goals */
+.ss-w-fandash-postmatch-goal-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
+.ss-w-fandash-postmatch-goal { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ss-w-faint); }
+.ss-w-fandash-postmatch-goal-ball { width: 11px; height: 11px; flex: none; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #fff 0 34%, transparent 36%), var(--ss-w-ink); border: 1px solid var(--ss-w-ink); }
 .ss-w-fandash-postmatch-goal--club { color: var(--ss-w-ink); font-weight: 650; }
 
-/* post-match stats: club value / stat label / opponent value, three columns per row */
-.ss-w-fandash-postmatch-stat-rows { display: flex; flex-direction: column; gap: 5px; }
-.ss-w-fandash-postmatch-stat-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
+/* post-match stats: home value / stat label / away value, oriented by venue (u316), each row now
+   backed by a home/away split bar -- the big upgrade from plain text -- plus a legend. Mirrors
+   LiveStatsCard's split-bar treatment under the postmatch-prefixed classes; the shared
+   --ss-w-home/--ss-w-away/--ss-w-track tokens are defined above. */
+.ss-w-fandash-postmatch-stat-rows { display: flex; flex-direction: column; gap: 15px; }
+.ss-w-fandash-postmatch-stat { display: flex; flex-direction: column; gap: 7px; }
+.ss-w-fandash-postmatch-stat-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 8px; }
 .ss-w-fandash-postmatch-stat-value { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }
-.ss-w-fandash-postmatch-stat-row .ss-w-fandash-postmatch-stat-value:last-child { text-align: right; }
+.ss-w-fandash-postmatch-stat-value--home { color: var(--ss-w-home); }
+.ss-w-fandash-postmatch-stat-value--away { color: var(--ss-w-away); text-align: right; }
 .ss-w-fandash-postmatch-stat-label { font-size: 10.5px; text-align: center; color: var(--ss-w-faint); text-transform: uppercase; letter-spacing: .03em; }
-
-/* post-match top performer: player name left, rating pill right */
-.ss-w-fandash-postmatch-performer-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
-.ss-w-fandash-postmatch-performer-name { font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
-.ss-w-fandash-postmatch-performer-rating { flex: none; font-size: 12px; 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: 2px 9px; }
-
-/* post-match next: the upcoming fixture teaser -- opponent left, when-label right */
-.ss-w-fandash-postmatch-next-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
-.ss-w-fandash-postmatch-next-opponent { font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
-.ss-w-fandash-postmatch-next-when { flex: none; font-size: 11.5px; color: var(--ss-w-faint); }
+.ss-w-fandash-postmatch-stat-bar { position: relative; height: 8px; border-radius: 999px; background: var(--ss-w-track); overflow: hidden; display: flex; }
+.ss-w-fandash-postmatch-stat-bar-home { height: 100%; background: var(--ss-w-home); }
+.ss-w-fandash-postmatch-stat-bar-away { height: 100%; background: var(--ss-w-away); margin-left: auto; }
+.ss-w-fandash-postmatch-legend { display: flex; gap: 14px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--ss-w-line); font-size: 11px; color: var(--ss-w-faint); }
+.ss-w-fandash-postmatch-legend-item { display: inline-flex; align-items: center; gap: 6px; }
+.ss-w-fandash-postmatch-legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
+.ss-w-fandash-postmatch-legend-swatch--home { background: var(--ss-w-home); }
+.ss-w-fandash-postmatch-legend-swatch--away { background: var(--ss-w-away); }
+
+/* post-match top performer (full mockup treatment): gradient initials avatar + name + a
+   prominent rating chip. Avatar gradient reuses the --ss-w-away token, same pairing as the live
+   crest fallback; "?" renders through the same avatar span when the name is blank. */
+.ss-w-fandash-postmatch-perf-row { display: flex; align-items: center; gap: 12px; }
+.ss-w-fandash-postmatch-perf-avatar {
+  flex: none; width: 42px; height: 42px; border-radius: 50%;
+  display: grid; place-items: center;
+  font-size: 14px; font-weight: 800; color: #fff;
+  background: linear-gradient(135deg, var(--ss-w-away), color-mix(in srgb, var(--ss-w-away) 55%, #000));
+}
+.ss-w-fandash-postmatch-perf-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; }
+.ss-w-fandash-postmatch-perf-rating { margin-left: auto; flex: none; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 14%, var(--ss-w-panel)); border-radius: 999px; padding: 3px 11px; }
+
+/* post-match next (v1, modest): whenLabel is already a complete localized phrase (opponent +
+   venue + kickoff) composed server-side, so this card renders just that one line -- dressed up
+   with an accent rule rather than a duplicated opponent line. The richer opponent-headline/venue-
+   chip/crest layout from the mockup needs a server field split and is deferred. */
+.ss-w-fandash-postmatch-next-row { display: flex; align-items: center; gap: 10px; border-left: 3px solid var(--ss-w-accent); padding-left: 10px; }
+.ss-w-fandash-postmatch-next-when { font-size: 13.5px; font-weight: 650; color: var(--ss-w-ink); line-height: 1.3; }
 
 /* resting next: the between-matches fixture teaser -- when-label left, competition badge right */
 .ss-w-fandash-resting-next-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sensiblestats/widget-react",
-  "version": "0.29.2",
+  "version": "0.29.4",
   "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.25.1",
+    "@sensiblestats/widget-sdk": "^0.25.2",
     "react-markdown": "^9.0.1",
     "remark-gfm": "^4.0.0"
   },