@sensiblestats/widget-react 0.80.0 → 0.81.0

package/dist/styles.css

@@ -1187,14 +1187,60 @@
 .ss-w-sec-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ss-w-neg); flex: none; }
 .ss-w-today-live { display: flex; flex-direction: column; gap: 2px; }
 
-.ss-w-grp { border: 1px solid var(--ss-w-line); border-radius: 12px; overflow: hidden; }
-.ss-w-grp-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 11px; background: var(--ss-w-bubble); border: none; font: inherit; color: var(--ss-w-ink); cursor: pointer; text-align: left; }
-.ss-w-grp-head:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }
-.ss-w-grp-chev { color: var(--ss-w-faint); font-size: 10px; flex: none; }
-.ss-w-grp-name { font-size: 12px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ss-w-grp-country { font-weight: 600; color: var(--ss-w-faint); }
-.ss-w-grp-count { margin-left: auto; flex: none; font-size: 10.5px; font-weight: 700; color: var(--ss-w-faint); background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
-.ss-w-grp-body { display: flex; flex-direction: column; padding: 2px 11px 6px; }
+/* Today tab root (Task 7): position: relative so the grid's own star/unstar toast (absolute,
+   top-centre) anchors here rather than to some unrelated positioned ancestor. */
+/* Non-scrolling anchor for .ss-w-today-toast (position: absolute; top: 0): .ss-w-mon-list below is
+   the overflow-y: auto scroller, so a toast parented to IT would scroll out of view with the
+   content that moved it. This wrapper sits outside that scroller, inside .ss-w-panel's fixed-size
+   flex column, so top: 0 always lands at the visible top of the Today tab. min-height: 0 is
+   required: without it this flex item defaults to min-height: auto (its content height), .ss-w-panel's
+   overflow: hidden then clips it, and .ss-w-mon-list inside never gets a bounded height to scroll within. */
+.ss-w-today-root { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
+
+/* Section header for "Your leagues"/"Top leagues"/"All leagues" (Task 7) -- same visual
+   treatment as .ss-w-sec-head (the live-band header), kept as a separate class so a kept test
+   asserting .ss-w-sec-head is absent when nothing is live cannot see this header too. */
+.ss-w-today-sec { 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-today-sec::after { content: ""; flex: 1; height: 1px; background: var(--ss-w-line); }
+.ss-w-today-sec-sub { text-transform: none; letter-spacing: normal; font-weight: 600; }
+.ss-w-today-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+.ss-w-today-empty { font-size: 12px; color: var(--ss-w-faint); padding: 10px 2px; }
+
+/* League tile (Task 5): a flat row (crest + name as the open target, star as a separate sibling
+   button) rather than a disclosure header -- opening is Task 6's LeagueDetail, not an inline
+   expansion. Same border/radius language .ss-w-grp used to carry, before Task 7 deleted it. */
+.ss-w-today-tile { display: flex; align-items: center; gap: 6px; border: 1px solid var(--ss-w-line); border-radius: 12px; overflow: hidden; background: var(--ss-w-bubble); }
+.ss-w-today-tile-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px 9px; background: none; border: none; font: inherit; color: var(--ss-w-ink); cursor: pointer; text-align: left; }
+.ss-w-today-tile-body:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }
+.ss-w-today-tile-name { font-size: 12px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-w-today-tile-country { font-weight: 600; color: var(--ss-w-faint); }
+.ss-w-today-tile-star { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 6px; background: none; border: none; border-radius: 8px; color: var(--ss-w-faint); cursor: pointer; }
+.ss-w-today-tile-star:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }
+.ss-w-today-tile-star[aria-pressed="true"] { color: var(--ss-w-accent); }
+.ss-w-today-tile-star:disabled { cursor: default; opacity: .4; }
+.ss-w-today-tile-star svg { width: 18px; height: 18px; }
+
+/* League detail (Task 6): the drill-in view opened from a tile. Its header star is always
+   enabled (spec §3/§7's one exception to the tile rule), so it carries no :disabled styling. */
+.ss-w-today-detail { position: relative; display: flex; flex-direction: column; gap: 10px; }
+.ss-w-today-detail-head { display: flex; align-items: center; gap: 8px; }
+.ss-w-today-detail-back { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: none; border: none; border-radius: 8px; color: var(--ss-w-ink); cursor: pointer; transform: scaleX(-1); }
+.ss-w-today-detail-back:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }
+.ss-w-today-detail-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-w-today-detail-star { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: none; border: none; border-radius: 8px; color: var(--ss-w-faint); cursor: pointer; }
+.ss-w-today-detail-star:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }
+.ss-w-today-detail-star[aria-pressed="true"] { color: var(--ss-w-accent); }
+.ss-w-today-detail-star svg { width: 18px; height: 18px; }
+.ss-w-today-detail-nav { display: flex; align-items: center; justify-content: center; gap: 10px; }
+.ss-w-today-detail-prev, .ss-w-today-detail-next { flex: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: none; border: none; border-radius: 8px; color: var(--ss-w-faint); cursor: pointer; }
+.ss-w-today-detail-prev:focus-visible, .ss-w-today-detail-next:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }
+.ss-w-today-detail-prev { transform: scaleX(-1); }
+.ss-w-today-detail-pos { font-size: 10.5px; font-weight: 700; color: var(--ss-w-faint); font-variant-numeric: tabular-nums; }
+.ss-w-today-detail-body { display: flex; flex-direction: column; }
+.ss-w-today-detail-count { align-self: flex-end; flex: none; font-size: 10.5px; font-weight: 700; color: var(--ss-w-faint); background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
+/* aria-live status region, not a modal -- pointer-events: none so the header/nav above stay
+   clickable while it is showing. */
+.ss-w-today-toast { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1; pointer-events: none; width: max-content; max-width: 220px; font-size: 11px; font-weight: 560; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 14%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); border-radius: 10px; padding: 5px 10px; box-shadow: 0 4px 14px rgba(0,0,0,.14); }
 
 .ss-w-drow { display: grid; grid-template-columns: 42px minmax(0,1fr) 22px; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--ss-w-line); }
 .ss-w-drow:last-child { border-bottom: none; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sensiblestats/widget-react",
-  "version": "0.80.0",
+  "version": "0.81.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.51.0",
+    "@sensiblestats/widget-sdk": "^0.52.0",
     "react-markdown": "^9.0.1",
     "remark-gfm": "^4.0.0"
   },