# ScoreBadgeComponent

Score badge component displaying evidence flags with icons and labels.

## Overview

The `ScoreBadgeComponent` displays evidence quality flags that provide context about score reliability and data sources.

## Selector

```html
<stella-score-badge />
```

## Inputs

| Input | Type | Default | Description |
|-------|------|---------|-------------|
| `type` | `ScoreFlag` | required | The flag type to display |
| `size` | `'sm' \| 'md'` | `'md'` | Size variant |
| `showTooltip` | `boolean` | `true` | Show description on hover |
| `showLabel` | `boolean` | `true` | Show label text (false = icon only) |

## Flag Types

| Type | Icon | Color | Description |
|------|------|-------|-------------|
| `live-signal` | Signal wave | Green (`#16A34A`) | Active runtime signals detected from deployed environments |
| `proven-path` | Checkmark | Blue (`#2563EB`) | Verified reachability path to vulnerable code |
| `vendor-na` | Strikethrough | Gray (`#6B7280`) | Vendor has marked as not affected |
| `speculative` | Question mark | Orange (`#D97706`) | Evidence is speculative or unconfirmed |

## Usage Examples

### Basic Usage

```html
<stella-score-badge type="live-signal" />
```

### All Flag Types

```html
<stella-score-badge type="live-signal" />
<stella-score-badge type="proven-path" />
<stella-score-badge type="vendor-na" />
<stella-score-badge type="speculative" />
```

### Size Variants

```html
<stella-score-badge type="proven-path" size="sm" />
<stella-score-badge type="proven-path" size="md" />
```

### Icon-Only Mode

```html
<stella-score-badge type="live-signal" [showLabel]="false" />
```

### With Score Pill

```html
<div class="score-display">
  <stella-score-pill [score]="92" />
  <div class="flags">
    <stella-score-badge type="live-signal" size="sm" />
    <stella-score-badge type="proven-path" size="sm" />
  </div>
</div>
```

### Rendering from Flags Array

```html
@for (flag of scoreResult.flags; track flag) {
  <stella-score-badge [type]="flag" size="sm" />
}
```

### In a Table

```html
<td class="flags-column">
  @for (flag of finding.score?.flags; track flag) {
    <stella-score-badge
      [type]="flag"
      size="sm"
      [showLabel]="false"
    />
  }
</td>
```

## Flag Significance

### live-signal (Green - High Confidence)
Indicates the vulnerability affects code that is actively being executed in production. This is the highest confidence indicator and typically elevates priority.

**Sources:**
- Runtime telemetry from deployed containers
- Function call traces
- Code coverage data from production

### proven-path (Blue - Confirmed)
A verified call path from application entry points to the vulnerable function has been confirmed through static or dynamic analysis.

**Sources:**
- Static reachability analysis
- Dynamic call graph analysis
- Fuzzing results

### vendor-na (Gray - Vendor Override)
The software vendor has issued a VEX statement indicating this vulnerability does not affect their product configuration or version.

**Sources:**
- Vendor VEX documents
- CSAF advisories
- Distro security teams

### speculative (Orange - Unconfirmed)
The evidence for this vulnerability is speculative or based on incomplete analysis. Score caps are typically applied.

**Sources:**
- Incomplete static analysis
- Heuristic-based detection
- Unverified reports

## Accessibility

- Uses `role="img"` with descriptive `aria-label`
- Tooltip shown on focus for keyboard users
- Icon colors meet WCAG AA contrast requirements
- Screen reader announces full flag description

## Styling

```css
stella-score-badge {
  --badge-font-size: 12px;
  --badge-padding: 4px 8px;
  --badge-border-radius: 4px;
}
```

### Live Signal Animation

The live-signal badge features a subtle pulse animation to draw attention:

```css
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.live-signal-badge {
  animation: pulse 2s ease-in-out infinite;
}
```

## Related Components

- [ScorePill](./score-pill.md) - Compact score display
- [ScoreBreakdownPopover](./score-breakdown-popover.md) - Full breakdown with flags section