@validation-os/dashboard 0.16.0 → 0.16.1

package/dist/styles.css

@@ -3404,15 +3404,136 @@ button.vos-verdict-title {
 .vos-pipe-tag-needs { color: var(--vos-warn); border-color: var(--vos-warn); }
 .vos-detail-tag-qt { border-color: var(--vos-accent); color: var(--vos-accent); }
 
-/* Stage-keyed Risk threshold indicator (assumption detail) */
-.vos-threshold-indicator { padding: 10px 14px; }
-.vos-threshold-label { font-size: 9px; color: var(--vos-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
-.vos-threshold-row { display: flex; gap: 12px; align-items: center; font-size: 12px; }
-.vos-threshold-bar { color: var(--vos-muted); }
-.vos-threshold-status { font-weight: 600; }
-.vos-threshold-cleared { color: var(--vos-good); }
-.vos-threshold-needs { color: var(--vos-warn); }
-.vos-threshold-hint { font-size: 11px; color: var(--vos-muted); margin-top: 4px; }
+/* Stage-keyed threshold bar (assumption detail, DEV-5890) — two bars:
+   Risk (fills toward threshold) + Confidence (fills toward floor). */
+.vos-threshold-bar-card {
+  padding: 14px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.vos-threshold-bar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.vos-threshold-bar-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--vos-text);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.vos-threshold-bar-stage-tag {
+  font-size: 9px;
+  font-weight: 500;
+  color: var(--vos-muted);
+  padding: 1px 6px;
+  border: 1px solid var(--vos-border);
+  border-radius: 4px;
+  text-transform: capitalize;
+}
+
+.vos-threshold-bar-status {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+.vos-threshold-bar-good {
+  color: var(--vos-good);
+  background: var(--vos-good-weak);
+}
+
+.vos-threshold-bar-warn {
+  color: var(--vos-warn);
+  background: var(--vos-warn-weak);
+}
+
+.vos-threshold-bar-crit {
+  color: var(--vos-crit);
+  background: var(--vos-crit-weak);
+}
+
+/* Each bar section (Risk + Confidence) */
+.vos-threshold-bar-section {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.vos-threshold-bar-section-label {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  font-size: 10px;
+  color: var(--vos-muted);
+}
+
+.vos-threshold-bar-section-val {
+  font-weight: 700;
+  color: var(--vos-text);
+  font-size: 13px;
+}
+
+.vos-threshold-bar-section-target {
+  font-size: 9px;
+  color: var(--vos-faint);
+  margin-left: auto;
+}
+
+/* The bar track */
+.vos-threshold-bar-track {
+  position: relative;
+  height: 18px;
+  border-radius: 5px;
+  background: var(--vos-surface-2);
+  overflow: visible;
+  border: 1px solid var(--vos-border);
+}
+
+.vos-threshold-bar-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  border-radius: 4px 0 0 4px;
+  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  opacity: 0.75;
+}
+
+.vos-threshold-bar-fill.vos-fill-good {
+  background: var(--vos-good);
+}
+
+.vos-threshold-bar-fill.vos-fill-warn {
+  background: var(--vos-warn);
+}
+
+.vos-threshold-bar-fill.vos-fill-crit {
+  background: var(--vos-crit);
+}
+
+/* The threshold/floor marker — a vertical dashed line */
+.vos-threshold-bar-marker {
+  position: absolute;
+  top: -2px;
+  bottom: -2px;
+  width: 0;
+  border-left: 2px dashed var(--vos-border-strong);
+  pointer-events: none;
+  z-index: 2;
+}
+
+.vos-threshold-bar-hint {
+  font-size: 11px;
+  color: var(--vos-muted);
+}
 
 /* Probative vs flagged-as-non-evidence grouping (assumption detail evidence list) */
 .vos-evidence-group { margin-top: 8px; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@validation-os/dashboard",
-  "version": "0.16.0",
+  "version": "0.16.1",
   "description": "React dashboard components + hooks for validation-os, consuming the DataProvider seam.",
   "license": "MIT",
   "type": "module",
@@ -22,7 +22,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@validation-os/core": "0.16.0"
+    "@validation-os/core": "0.16.1"
   },
   "peerDependencies": {
     "react": ">=18",