@sensiblestats/widget-react 0.91.0 → 0.93.0

package/dist/styles.css

@@ -488,6 +488,8 @@
 .ss-w-mo-row .ss-w-move + .ss-w-mo-price { margin-left: 0; }
 .ss-w-mo-row .ss-w-slip { margin: 0; flex: none; }
 .ss-w-mo-foot { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--ss-w-faint); }
+.ss-w-allmk-wrap { position: relative; display: inline-flex; flex: none; margin-left: auto; }
+.ss-w-allmk-wrap--chip { margin-left: 0; }
 .ss-w-allmk { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 6px 0; background: none; border: 0; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--ss-w-accent); white-space: nowrap; cursor: pointer; }
 .ss-w-allmk svg { width: 13px; height: 13px; flex: none; }
 .ss-w-allmk:hover { text-decoration: underline; }
@@ -1185,6 +1187,40 @@
 .ss-w-mon-vs { font-size: 12px; font-weight: 700; color: var(--ss-w-faint); text-transform: uppercase; }
 .ss-w-mon-score { display: flex; align-items: baseline; justify-content: center; font-size: 26px; font-weight: 850; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; color: var(--ss-w-ink); }
 .ss-w-mon-score i { font-style: normal; color: var(--ss-w-faint); font-weight: 500; margin: 0 4px; }
+.ss-w-nbamon-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
+.ss-w-nbamon-side { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.ss-w-nbamon-side--home { flex-direction: row-reverse; text-align: right; }
+.ss-w-nbamon-badge { flex: none; display: grid; place-items: center; min-width: 34px; height: 26px; padding: 0 5px; border-radius: 7px; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); font-size: 11px; font-weight: 800; letter-spacing: .03em; color: var(--ss-w-ink); }
+.ss-w-nbamon-team { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
+.ss-w-nbamon-city { font-size: 10.5px; font-weight: 600; color: var(--ss-w-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-w-nbamon-nick { font-size: 13px; font-weight: 800; color: var(--ss-w-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-w-nbamon-ls { width: 100%; border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; text-align: center; color: var(--ss-w-ink); }
+.ss-w-nbamon-ls th, .ss-w-nbamon-ls td { padding: 3px 4px; font-weight: 500; }
+.ss-w-nbamon-ls thead th { font-size: 10px; font-weight: 700; color: var(--ss-w-faint); border-bottom: 1px solid var(--ss-w-line); }
+.ss-w-nbamon-ls tbody th { text-align: left; font-weight: 800; }
+.ss-w-nbamon-ls .ss-w-nbamon-total { font-weight: 800; }
+.ss-w-nbamon-ls td.ss-w-nbamon-cur { color: var(--ss-w-neg); font-weight: 800; }
+.ss-w-nbamon-dash { color: var(--ss-w-faint); }
+.ss-w-nbamon-tos { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--ss-w-faint); }
+/* Scoreboard strip: one 122px tile per followed game, scrolling sideways inside its own box so the
+   panel never gains a horizontal scroll. */
+.ss-w-strip { position: relative; flex: none; display: flex; gap: 8px; padding: 8px 12px; background: var(--ss-w-bubble); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
+.ss-w-strip::-webkit-scrollbar { display: none; }
+.ss-w-strip-tile { flex: none; box-sizing: border-box; width: 122px; display: flex; flex-direction: column; gap: 3px; padding: 6px 8px 7px; border: 1px solid var(--ss-w-line); border-radius: 10px; background: var(--ss-w-panel); font: inherit; color: var(--ss-w-ink); text-align: left; cursor: pointer; }
+.ss-w-strip-tile[aria-pressed="true"] { border-color: var(--ss-w-accent); box-shadow: inset 0 0 0 1px var(--ss-w-accent); }
+.ss-w-strip-tile:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; }
+.ss-w-strip-status { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ss-w-faint); }
+.ss-w-strip-status--live { color: var(--ss-w-neg); }
+.ss-w-strip-when { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-w-strip-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ss-w-neg); }
+.ss-w-strip-sport { flex: none; margin-left: auto; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; color: var(--ss-w-warn); }
+.ss-w-strip-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; min-width: 0; }
+.ss-w-strip-row .ss-w-bi-crest { width: 16px; height: 16px; }
+.ss-w-strip-row .ss-w-bi-crest-mono { font-size: 8px; }
+.ss-w-strip-badge { display: grid; place-items: center; min-width: 22px; height: 16px; padding: 0 3px; border-radius: 4px; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); font-size: 8.5px; font-weight: 800; letter-spacing: .02em; color: var(--ss-w-ink); }
+.ss-w-strip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 650; }
+.ss-w-strip-score { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
+.ss-w-strip-row--muted .ss-w-strip-name, .ss-w-strip-row--muted .ss-w-strip-score { color: var(--ss-w-faint); }
 .ss-w-mon-scorers { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; column-gap: 10px; font-size: 11.5px; color: var(--ss-w-faint); }
 .ss-w-mon-scorers-col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
 .ss-w-mon-scorers-col li { overflow-wrap: anywhere; }
@@ -1413,6 +1449,52 @@
 .ss-w-acc-insight { font-size: 12px; color: var(--ss-w-ink); background: color-mix(in srgb, var(--ss-w-accent) 9%, var(--ss-w-panel)); border-radius: 8px; padding: 7px 9px; }
 .ss-w-acc-retry { font-size: 12px; color: var(--ss-w-neg); cursor: pointer; padding: 6px 0; }
 
+/* ---- NBA player props on the Following card (u560) ---- */
+.ss-w-props { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; padding: 10px 11px 4px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
+.ss-w-props-head { font-size: 12.5px; font-weight: 700; color: var(--ss-w-ink); }
+.ss-w-props-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; border-radius: 8px; background: var(--ss-w-track); }
+.ss-w-props-side { padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 12px; font-weight: 600; color: var(--ss-w-faint); cursor: pointer; font-variant-numeric: tabular-nums; }
+.ss-w-props-side[aria-pressed="true"] { background: var(--ss-w-panel); color: var(--ss-w-ink); }
+.ss-w-props-list { display: flex; flex-direction: column; min-width: 0; }
+.ss-w-props-item { min-width: 0; }
+.ss-w-props-item + .ss-w-props-item { border-top: 1px solid var(--ss-w-line); }
+.ss-w-props-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 8px 0; background: none; border: 0; font: inherit; color: var(--ss-w-ink); text-align: left; cursor: pointer; }
+.ss-w-props-jn { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
+.ss-w-props-jn--home { background: var(--ss-w-home); }
+.ss-w-props-jn--away { background: var(--ss-w-away); }
+.ss-w-props-pn { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
+.ss-w-props-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-w-props-meta { font-size: 11px; color: var(--ss-w-faint); }
+.ss-w-props-main { display: flex; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; column-gap: 5px; text-align: right; max-width: 96px; font-variant-numeric: tabular-nums; }
+.ss-w-props-stat { font-size: 10.5px; font-weight: 600; color: var(--ss-w-faint); }
+.ss-w-props-line { font-size: 12.5px; font-weight: 700; color: var(--ss-w-ink); }
+.ss-w-props-panel { background: var(--ss-w-bubble); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; min-width: 0; }
+.ss-w-props-chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.ss-w-props-chip { padding: 5px 11px; border: 1px solid var(--ss-w-line); border-radius: 999px; background: var(--ss-w-panel); font: inherit; font-size: 12px; font-weight: 600; color: var(--ss-w-faint); white-space: nowrap; cursor: pointer; }
+.ss-w-props-chip[aria-pressed="true"] { color: #fff; background: var(--ss-w-accent); border-color: var(--ss-w-accent); }
+.ss-w-props-side:focus-visible, .ss-w-props-row:focus-visible, .ss-w-props-chip:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 1px; }
+.ss-w-props-ou { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 6px; }
+.ss-w-props-price { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; min-width: 0; padding: 6px 9px; border: 1px solid var(--ss-w-line); border-radius: 8px; background: var(--ss-w-panel); font-size: 13px; font-weight: 700; color: var(--ss-w-ink); cursor: default; font-variant-numeric: tabular-nums; }
+.ss-w-props-price-lab { font-size: 11.5px; font-weight: 600; color: var(--ss-w-faint); overflow-wrap: anywhere; }
+.ss-w-props-alt, .ss-w-props-l5 { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
+.ss-w-props-cap { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ss-w-faint); }
+.ss-w-props-ladder { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); grid-auto-flow: row dense; gap: 6px; min-width: 0; }
+.ss-w-props-ladder .ss-w-props-price { flex-direction: column; align-items: center; gap: 2px; padding: 6px 8px; font-size: 12px; }
+/* The grids hold no scroll container, so a slip toast is never clipped: the wrapper drops out of
+   layout and the toast takes a full row of its own under the tapped price (dense refills the gap). */
+.ss-w-props-ou .ss-w-slip, .ss-w-props-ladder .ss-w-slip { display: contents; }
+.ss-w-props-ou .ss-w-toast, .ss-w-props-ladder .ss-w-toast { position: static; grid-column: 1 / -1; width: auto; max-width: none; box-shadow: none; }
+.ss-w-props-ou .ss-w-slip-btn.ss-w-slip-btn--price { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 6px; padding: 6px 9px; }
+.ss-w-props-ladder .ss-w-slip-btn.ss-w-slip-btn--price { min-width: 0; gap: 2px; padding: 6px 8px; font-size: 12px; }
+.ss-w-props .ss-w-slip-btn--price .ss-w-mol-lab { font-size: 11px; }
+/* The right gutter holds the line label, so it never sits on a bar's value. */
+.ss-w-props-bars { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; align-items: end; height: 56px; margin-top: 14px; padding-right: 32px; }
+.ss-w-props-bar { position: relative; min-height: 2px; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--ss-w-accent) 55%, var(--ss-w-track)); }
+.ss-w-props-val { position: absolute; top: -14px; left: 50%; z-index: 1; transform: translateX(-50%); padding: 0 2px; border-radius: 3px; background: var(--ss-w-bubble); line-height: 13px; font-size: 10px; font-weight: 600; color: var(--ss-w-ink); font-variant-numeric: tabular-nums; }
+.ss-w-props-ref { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--ss-w-ink); }
+.ss-w-props-ref-lab { position: absolute; right: 0; top: -7px; width: 28px; text-align: right; line-height: 13px; border-radius: 3px; background: var(--ss-w-bubble); font-size: 9.5px; font-weight: 600; color: var(--ss-w-faint); font-variant-numeric: tabular-nums; }
+.ss-w-props-opps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding-right: 32px; text-align: center; font-size: 10px; color: var(--ss-w-faint); }
+
 /* ---- Today tab (u355) ---- */
 .ss-w-sec-head { display: flex; align-items: center; gap: 7px; padding: 2px 2px 0; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ss-w-faint); }
 .ss-w-sec-head::after { content: ""; flex: 1; height: 1px; background: var(--ss-w-line); }

package/package.json

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