@sensiblestats/widget-react 0.72.2 → 0.73.1

package/dist/styles.css

@@ -451,6 +451,13 @@
 .ss-w-tool-pick-price { grid-column: 2; grid-row: 1 / span 3; align-self: center; font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 800; color: var(--ss-w-accent); }
 .ss-w-tool-math { padding: 6px 8px; font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; text-align: right; color: var(--ss-w-ink); background: color-mix(in srgb, var(--ss-w-accent) 9%, var(--ss-w-panel)); border-radius: 8px; overflow-wrap: anywhere; }
 .ss-w-tool-unavailable { padding: 6px 8px; font-size: 12px; color: var(--ss-w-faint); border: 1px dashed var(--ss-w-line); border-radius: 8px; }
+.ss-w-tool-row--ask { flex-direction: row; align-items: center; gap: 10px; border-left-width: 1px; }
+.ss-w-tool-icon { flex: none; font-size: 20px; line-height: 1; }
+.ss-w-tool-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
+.ss-w-tool-ready { padding: 2px 8px; font-size: 11.5px; font-weight: 650; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 12%, transparent); border-radius: 10px; }
+.ss-w-tool-go { flex: none; width: 44px; height: 44px; display: grid; place-items: center; font-size: 17px; color: #fff; background: var(--ss-w-accent); border: none; border-radius: 50%; cursor: pointer; }
+.ss-w-tool-go:disabled { color: var(--ss-w-faint); background: var(--ss-w-bubble); cursor: not-allowed; }
+.ss-w-tool-go:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; }
 .ss-w-tool-send { align-self: flex-end; min-height: 40px; padding: 8px 18px; font: inherit; font-size: 13px; font-weight: 700; color: #fff; background: var(--ss-w-accent); border: none; border-radius: 20px; cursor: pointer; }
 .ss-w-tool-send:disabled { color: var(--ss-w-faint); background: var(--ss-w-bubble); cursor: not-allowed; }
 .ss-w-tool-foot .ss-w-tool-send { width: 100%; }
@@ -653,9 +660,21 @@
    part of that visual language rather than a plain unstyled button. */
 .ss-w-dash--market .ss-w-dash-tile { border-left: 3px solid var(--ss-w-accent); }
 
-/* Goal: one column of pill rows. */
+/* Goal: one column of compact cards, 60px tall with the badge as a price column on the right.
+   The value ink is accent mixed toward ink (as on the hero price): plain light accent on the
+   panel is 3.9:1, under the 4.5:1 small text needs. */
 .ss-w-dash--goal .ss-w-dash-grid { grid-template-columns: 1fr; }
-.ss-w-dash--goal .ss-w-dash-tile { border-radius: 999px; padding: 10px 14px; }
+.ss-w-dash--goal .ss-w-dash-tile { gap: 12px; min-height: 60px; padding: 8px 12px 8px 14px; border-radius: 8px; }
+.ss-w-dash--goal .ss-w-dash-tile:hover { background: var(--ss-w-bubble); }
+.ss-w-dash--goal .ss-w-dash-tile-icon { width: 24px; height: 24px; font-size: 20px; }
+.ss-w-dash--goal .ss-w-dash-tile-body { gap: 1px; }
+.ss-w-dash--goal .ss-w-dash-tile-title { font-size: 15px; line-height: 1.25; }
+.ss-w-dash--goal .ss-w-dash-tile-subtitle { font-size: 13px; line-height: 1.3; overflow-wrap: break-word; }
+.ss-w-dash-tile-value {
+  flex: none; margin-left: auto; max-width: 40%; text-align: right;
+  font-size: 16px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums;
+  color: color-mix(in srgb, var(--ss-w-accent) 70%, var(--ss-w-ink));
+}
 
 /* Discovery: tinted bento cards. Stacked (icon over text) so a two- or three-word title gets
    the tile's full width instead of the ~100px left of a horizontal icon+chevron -- that narrow

package/package.json

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