@sensiblestats/widget-react 0.97.0 → 0.98.0

package/dist/styles.css

@@ -1199,6 +1199,18 @@
 .ss-w-mon-pill { display: inline-flex; flex: none; align-items: center; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ss-w-faint); background: var(--ss-w-bubble); border-radius: 6px; padding: 3px 8px; }
 .ss-w-mon-min { flex: none; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }
 .ss-w-mon-comp { margin-left: auto; font-size: 11px; font-weight: 650; color: var(--ss-w-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* Placeholder shapes for a pin with no data yet. Sizes match the real card's rows (24px crest,
+   26px score line, the 22px pin that sets the top row) so the card does not jump when data lands. */
+.ss-w-mon-skel { cursor: progress; }
+.ss-w-skel { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--ss-w-bubble), var(--ss-w-line), var(--ss-w-bubble)); background-size: 200% 100%; animation: ss-w-shimmer 1.2s infinite; }
+.ss-w-skel-pill { width: 64px; height: 18px; margin-right: auto; }
+.ss-w-skel-crest { flex: none; width: 24px; height: 24px; border-radius: 50%; }
+.ss-w-skel-name { flex: 1; height: 13px; }
+.ss-w-skel-score { width: 44px; height: 26px; }
+.ss-w-acc-load { height: 100px; border-radius: 8px; }
+@media (prefers-reduced-motion: reduce) {
+  .ss-w-skel { animation: none; background: var(--ss-w-line); }
+}
 .ss-w-mon-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
 .ss-w-mon-side { display: flex; align-items: center; gap: 8px; min-width: 0; }
 .ss-w-mon-side--away { flex-direction: row-reverse; text-align: right; }

package/package.json

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