@sensiblestats/widget-react 0.92.0 → 0.94.0

package/dist/styles.css

@@ -425,8 +425,6 @@
 .ss-w-nba-jc[data-hit] { color: var(--ss-w-ink); font-weight: 700; }
 .ss-w-nba-joint .ss-w-nba-hd { font-size: 10px; }
 .ss-w-nba-tick { color: var(--ss-w-accent); font-weight: 700; }
-.ss-w-nba-combined { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--ss-w-faint); }
-.ss-w-nba-combined b { font-size: 16px; color: var(--ss-w-ink); font-variant-numeric: tabular-nums; }
 .ss-w-nba-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--ss-w-faint); }
 .ss-w-nba-legkey { display: inline-flex; align-items: center; gap: 5px; }
 .ss-w-nba-swatch { width: 12px; height: 2px; border-radius: 1px; }
@@ -1449,6 +1447,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.92.0",
+  "version": "0.94.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.62.0",
+    "@sensiblestats/widget-sdk": "^0.63.1",
     "react-markdown": "^9.0.1",
     "remark-gfm": "^4.0.0"
   },