@sensiblestats/widget-react 0.76.0 → 0.78.0

package/dist/styles.css

@@ -1639,3 +1639,34 @@
 .ss-g-motm-pill { flex: none; padding: 3px 8px; font-size: 11px; }
 .ss-g-motm-foot { font-size: 14px; font-weight: 600; }
 .ss-g-motm-fun { font-size: 11px; color: var(--ss-g-faint); }
+
+/* ── tap-to-answer tray + per-game team-colour band (u503) ── */
+.ss-g-tray { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-height: 150px; overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
+.ss-g-tray-chip { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 78px; padding: 6px 4px; border: 1px solid var(--ss-g-line); border-radius: 14px; background: var(--ss-g-surface); color: var(--ss-g-ink); font-family: var(--ss-g-font-body); cursor: pointer; }
+.ss-g-tray-chip:hover, .ss-g-tray-chip:focus-visible { background: var(--ss-g-raised); border-color: var(--ss-w-accent); outline: none; }
+.ss-g-tray-chip:disabled { opacity: .5; cursor: default; }
+.ss-g-tray-av { width: 38px; height: 38px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ss-g-raised); color: var(--ss-g-muted); font-size: 14px; font-weight: 700; }
+.ss-g-tray-av img { width: 100%; height: 100%; object-fit: cover; }
+.ss-g-tray-name { width: 100%; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
+.ss-g-tray-first { max-width: 100%; font-size: 10px; font-weight: 500; color: var(--ss-g-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ss-g-tray-last { max-width: 100%; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+/* Each game gets its own band colour: the operator accent mixed into the ground, hue-nudged per game.
+   Browsers without relative colour syntax keep the plain accent mix. */
+.ss-g-screen[data-game] { --ss-g-band: color-mix(in srgb, var(--ss-w-accent) var(--ss-g-band-mix, 18%), var(--ss-g-ground)); }
+@supports (color: oklch(from red l c h)) {
+  .ss-g-screen[data-game] { --ss-g-band: oklch(from color-mix(in srgb, var(--ss-w-accent) var(--ss-g-band-mix, 18%), var(--ss-g-ground)) l calc(c * 1.5) calc(h + var(--ss-g-hue-shift, 0))); }
+}
+.ss-g-screen[data-game="mystery-tiger"] { --ss-g-band-mix: 14%; --ss-g-hue-shift: 0; }
+.ss-g-screen[data-game="career-path"] { --ss-g-band-mix: 11%; --ss-g-hue-shift: -24; }
+.ss-g-screen[data-game] > .ss-g-head { background: var(--ss-g-band); border-radius: 0 0 24px 24px; padding-bottom: 12px; }
+.ss-g-worth { flex: none; display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: var(--ss-g-muted); }
+.ss-g-worth-now { font-family: var(--ss-g-font-display); font-weight: 800; font-size: 18px; letter-spacing: .02em; text-transform: uppercase; color: var(--ss-w-accent); }
+.ss-g-screen[data-game="beat-the-grid"] { --ss-g-band-mix: 13%; --ss-g-hue-shift: 14; }
+.ss-g-screen[data-game="guess-the-xi"] { --ss-g-band-mix: 12%; --ss-g-hue-shift: -36; }
+.ss-g-screen[data-game="higher-or-lower"] { --ss-g-band-mix: 16%; --ss-g-hue-shift: 28; }
+.ss-g-screen[data-game="daily-quiz"] { --ss-g-band-mix: 10%; --ss-g-hue-shift: -12; }
+.ss-g-screen[data-game="stat-ladder"] { --ss-g-band-mix: 15%; --ss-g-hue-shift: 36; }
+.ss-g-screen[data-game="matchday-predictor"] { --ss-g-band-mix: 18%; --ss-g-hue-shift: -4; }
+.ss-g-screen[data-game="starting-xi"] { --ss-g-band-mix: 9%; --ss-g-hue-shift: -30; }
+.ss-g-screen[data-game="fan-motm"] { --ss-g-band-mix: 14%; --ss-g-hue-shift: 8; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sensiblestats/widget-react",
-  "version": "0.76.0",
+  "version": "0.78.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.49.0",
+    "@sensiblestats/widget-sdk": "^0.50.0",
     "react-markdown": "^9.0.1",
     "remark-gfm": "^4.0.0"
   },