@sensiblestats/widget-react 0.60.5 → 0.61.0

package/dist/styles.css

@@ -1098,6 +1098,16 @@
 /* Labels stay on one line: Turkish "DAHA FAZLA" wrapped to two in a ~115px button. */
 .ss-g-hl-btns .ss-g-btn { font-weight: 800; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
 .ss-g-hl-btns .ss-g-btn svg { flex: none; }
+/* Phone-width cards: the info column is ~230px, too narrow for "DAHA FAZLA" + icon side by side.
+   Drop the icons and tighten the type first; stack the buttons only when even that cannot fit. */
+.ss-g-hl-info { container: hlinfo / inline-size; }
+@container hlinfo (max-width: 280px) {
+  .ss-g-hl-btns .ss-g-btn svg { display: none; }
+  .ss-g-hl-btns .ss-g-btn { font-size: 12px; letter-spacing: 0; padding: 0 4px; }
+}
+@container hlinfo (max-width: 180px) {
+  .ss-g-hl-btns { flex-direction: column; }
+}
 .ss-g-hl-vs { position: relative; z-index: 1; flex: none; align-self: center; width: 44px; height: 44px; margin: -28px 0; border-radius: 50%; display: grid; place-items: center; background: var(--ss-g-ground); border: 2px solid var(--ss-g-line-warm); color: var(--ss-w-accent); font: 800 18px var(--ss-g-font-display); }
 /* Clear the VS badge that straddles the seam between the two cards. */
 .ss-g-hl-pair > .ss-g-hl-card:first-child .ss-g-hl-info { padding-bottom: 24px; }
@@ -1134,11 +1144,20 @@
 .ss-g-gxi-node { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; max-width: 72px; }
 .ss-g-gxi-disc { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ss-g-pitch-chip); border: 2px solid var(--ss-g-pitch-ink); font-size: 22px; line-height: 1; }
 .ss-g-gxi-node[data-revealed] .ss-g-gxi-disc { border-color: var(--ss-w-accent); }
+.ss-g-gxi-disc[data-code] { font-family: var(--ss-g-font-body); font-size: 11px; font-weight: 800; letter-spacing: .02em; color: var(--ss-g-pitch-ink); }
 .ss-g-gxi-pos { max-width: 100%; padding: 1px 6px; border-radius: 4px; background: var(--ss-g-pitch-chip); color: var(--ss-g-pitch-ink); font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .ss-g-gxi-pos--name { color: var(--ss-w-accent); text-transform: uppercase; }
 .ss-g-gxi-wrong { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
 .ss-g-gxi-wrong-l { font-size: 12px; color: var(--ss-g-muted); }
 .ss-g-gxi-wrong-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 999px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); font-size: 13px; color: var(--ss-g-muted); }
+/* u407: lineup photo — fills the 44px disc like the flag does */
+.ss-g-gxi-disc--photo { overflow: hidden; border: 2px solid var(--ss-w-accent); }
+.ss-g-gxi-disc--photo img { width: 100%; height: 100%; object-fit: cover; }
+.ss-g-gxi-disc--photo .ss-w-av-initials { font-family: var(--ss-g-font-body); font-size: 11px; font-weight: 800; color: var(--ss-g-pitch-ink); }
+/* u407: answer reveal — prominent row using theme tokens, works on dark/navy/light surfaces */
+.ss-g-gxi-answer { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 12px 16px; border-radius: 14px; background: var(--ss-g-warm); border: 1.5px solid var(--ss-g-line-warm); }
+.ss-g-gxi-answer-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ss-g-muted); flex: none; }
+.ss-g-gxi-answer-name { font-family: var(--ss-g-font-display); font-weight: 800; font-size: 20px; text-transform: uppercase; color: var(--ss-g-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
 /* ---- Daily Quiz (u393) ---- */
 .ss-g-dq-stem { font-family: var(--ss-g-font-display); font-weight: 700; font-size: 30px; line-height: 1.05; overflow-wrap: anywhere; }
@@ -1163,6 +1182,10 @@
 .ss-g-dq-rq-opt--correct { background: var(--ss-g-correct); color: var(--ss-g-on-correct); }
 .ss-g-dq-rq-opt--wrong { background: var(--ss-g-wrong); color: var(--ss-g-on-correct); }
 .ss-g-dq-why { font-size: 13px; color: var(--ss-g-ink-2); }
+/* u407: player avatar in quiz option — centered in top half, badge at top-left unaffected */
+.ss-g-dq-opt-av { position: absolute; top: 7px; right: 10px; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--ss-g-raised); display: grid; place-items: center; color: var(--ss-g-muted); font-size: 13px; font-weight: 700; flex: none; }
+.ss-g-dq-opt-av img { width: 100%; height: 100%; object-fit: cover; }
+.ss-g-dq-opt-av .ss-w-av-initials { font-size: 11px; }
 
 /* ---- Career Path (u393) ---- */
 .ss-g-cp-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--ss-g-warm); border: 1px solid var(--ss-g-line-warm); }
@@ -1239,9 +1262,11 @@
 /* While the search sheet is pinned below, the grid shrinks its rows to share the body with it
    instead of pushing the bottom row under the sheet. */
 .ss-g-btg-grid--fit { flex: 0 1 auto; min-height: 0; }
-.ss-g-btg-colhdr { min-height: 0; border-radius: 12px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 0 4px; font-size: 12px; font-weight: 700; line-height: 1.1; min-width: 0; overflow-wrap: anywhere; }
+.ss-g-btg-colhdr { min-height: 0; border-radius: 12px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 0 4px; font-size: 12px; font-weight: 700; line-height: 1.1; min-width: 0; overflow-wrap: anywhere; overflow: hidden; }
+.ss-g-btg-colhdr[data-meta] { overflow-wrap: normal; word-break: normal; hyphens: none; font-size: 11px; letter-spacing: 0; }
 .ss-g-btg-colhdr svg { color: var(--ss-w-accent); flex: none; }
-.ss-g-btg-rowhdr { border-radius: 12px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); display: grid; place-items: center; font-family: var(--ss-g-font-display); font-weight: 800; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere; text-align: center; }
+.ss-g-btg-rowhdr { border-radius: 12px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); display: grid; place-items: center; font-family: var(--ss-g-font-display); font-weight: 800; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere; text-align: center; overflow: hidden; }
+.ss-g-btg-rowhdr[data-meta] { font-size: 10px; font-family: var(--ss-g-font-body); font-weight: 700; letter-spacing: -0.01em; text-transform: none; word-break: normal; overflow-wrap: normal; hyphens: none; line-height: 1.25; padding: 0 2px; }
 .ss-g-btg-cell { position: relative; min-height: 0; min-width: 0; border-radius: 12px; border: 1.5px dashed var(--ss-g-strong-line); background: transparent; color: var(--ss-g-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; font: inherit; padding: 0; }
 .ss-g-btg-cell:disabled { cursor: default; }
 .ss-g-btg-cell[data-state="active"] { border: 2px solid var(--ss-w-accent); background: var(--ss-g-warm); color: var(--ss-w-accent); }
@@ -1269,6 +1294,17 @@
 .ss-g-btg-sheet .ss-g-opts { max-height: 160px; }
 .ss-g-btg-result-name { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .ss-g-btg-result-plus { color: var(--ss-w-accent); display: flex; }
+/* u407: cell avatar replaces Silhouette */
+.ss-g-btg-av { width: 38px; height: 38px; flex: none; border-radius: 50%; overflow: hidden; background: var(--ss-g-raised); display: grid; place-items: center; color: var(--ss-g-muted); font-size: 12px; font-weight: 700; }
+.ss-g-btg-av img { width: 100%; height: 100%; object-fit: cover; }
+.ss-g-btg-av .ss-w-av-initials { font-size: 12px; }
+/* u407: coach photo in row/col header */
+.ss-g-btg-coach-av { width: 28px; height: 28px; flex: none; border-radius: 50%; overflow: hidden; background: var(--ss-g-raised); display: grid; place-items: center; color: var(--ss-g-muted); font-size: 10px; font-weight: 700; }
+.ss-g-btg-coach-av img { width: 100%; height: 100%; object-fit: cover; }
+/* u407: country flag emoji in header — sized to match other header icons */
+.ss-g-btg-hdr-flag { font-size: 20px; line-height: 1; flex: none; }
+/* u407: club crest in col/row header */
+.ss-g-btg-colhdr .ss-g-crest, .ss-g-btg-rowhdr .ss-g-crest { width: 28px; height: 28px; flex: none; }
 
 /* ── Starting XI (u393) ── */
 .ss-g-xi-pitch { position: relative; flex: none; height: 400px; border-radius: 18px; overflow: hidden; background: repeating-linear-gradient(180deg, var(--ss-g-pitch) 0 40px, color-mix(in srgb, var(--ss-g-pitch) 88%, var(--ss-g-pitch-mark)) 40px 80px); border: 1px solid var(--ss-g-pitch-line); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sensiblestats/widget-react",
-  "version": "0.60.5",
+  "version": "0.61.0",
   "description": "Embeddable SensibleStats chat widget for React.",
   "type": "module",
   "main": "./dist/index.cjs",