# ScoreBreakdownPopoverComponent

Detailed score breakdown popover showing all evidence dimensions, flags, and explanations.

## Overview

The `ScoreBreakdownPopoverComponent` displays a comprehensive breakdown of an evidence-weighted score, including dimension bars, active flags, guardrails, and human-readable explanations.

## Selector

```html
<stella-score-breakdown-popover />
```

## Inputs

| Input | Type | Default | Description |
|-------|------|---------|-------------|
| `scoreResult` | `EvidenceWeightedScoreResult` | required | Full score result object |
| `position` | `PopoverPosition` | `'bottom'` | Popover placement |

## Position Options

```typescript
type PopoverPosition = 'top' | 'bottom' | 'left' | 'right';
```

## Score Result Structure

```typescript
interface EvidenceWeightedScoreResult {
  findingId: string;
  score: number;           // 0-100
  bucket: ScoreBucket;     // 'ActNow' | 'ScheduleNext' | 'Investigate' | 'Watchlist'
  inputs: {
    rch: number;           // Reachability (0-1)
    rts: number;           // Runtime signals (0-1)
    bkp: number;           // Backport availability (0-1)
    xpl: number;           // Exploitability (0-1)
    src: number;           // Source trust (0-1)
    mit: number;           // Mitigations (0-1)
  };
  weights: {
    rch: number;
    rts: number;
    bkp: number;
    xpl: number;
    src: number;
    mit: number;
  };
  flags: ScoreFlag[];
  explanations: string[];
  caps: {
    speculativeCap: boolean;
    notAffectedCap: boolean;
    runtimeFloor: boolean;
  };
  policyDigest: string;
  calculatedAt: string;    // ISO 8601
}
```

## Dimension Labels

| Key | Label | Description |
|-----|-------|-------------|
| `rch` | Reachability | Path to vulnerable code exists |
| `rts` | Runtime Signals | Active usage detected in production |
| `bkp` | Backport | Fix backported to current version |
| `xpl` | Exploitability | EPSS probability, known exploits |
| `src` | Source Trust | Advisory source reliability |
| `mit` | Mitigations | Active mitigations reduce risk |

## Usage Examples

### Basic Usage

```html
<stella-score-breakdown-popover [scoreResult]="scoreResult" />
```

### With Position

```html
<stella-score-breakdown-popover
  [scoreResult]="scoreResult"
  position="right"
/>
```

### Triggered from Score Pill

```html
<div class="score-container">
  <stella-score-pill
    [score]="score"
    (scoreClick)="showPopover = true"
  />

  @if (showPopover) {
    <stella-score-breakdown-popover
      [scoreResult]="scoreResult"
      (close)="showPopover = false"
    />
  }
</div>
```

### In a Dialog

```typescript
@Component({
  template: `
    <div class="dialog-content">
      <h2>Score Details</h2>
      <stella-score-breakdown-popover
        [scoreResult]="scoreResult"
      />
    </div>
  `
})
export class ScoreDialogComponent {
  scoreResult = input.required<EvidenceWeightedScoreResult>();
}
```

## Popover Sections

### 1. Header
Displays the overall score with bucket label and color.

### 2. Dimensions Chart
Horizontal bar chart showing all six dimensions with their normalized values (0-100%).

### 3. Flags Section
Active flags displayed as badges. See [ScoreBadge](./score-badge.md) for flag types.

### 4. Guardrails Section
Applied caps and floors:
- **Speculative Cap**: Score limited due to unconfirmed evidence
- **Not Affected Cap**: Score reduced due to vendor VEX
- **Runtime Floor**: Score elevated due to active runtime signals

### 5. Explanations
Human-readable explanations of factors affecting the score.

### 6. Footer
- Policy digest (truncated SHA-256)
- Calculation timestamp

## Accessibility

- Uses `role="dialog"` with `aria-labelledby`
- Focus trapped within popover when open
- Escape key closes popover
- Click outside closes popover
- Screen reader announces dimension values

## Styling

```css
stella-score-breakdown-popover {
  --popover-max-width: 360px;
  --popover-background: white;
  --popover-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
```

## Related Components

- [ScorePill](./score-pill.md) - Compact score display
- [ScoreBadge](./score-badge.md) - Evidence flag badges