# ScorePillComponent

Compact score display component with bucket-based color coding.

## Overview

The `ScorePillComponent` displays a 0-100 evidence-weighted score with automatic color coding based on priority bucket thresholds.

## Selector

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

## Inputs

| Input | Type | Default | Description |
|-------|------|---------|-------------|
| `score` | `number` | `0` | Evidence-weighted score (0-100) |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Size variant |
| `showTooltip` | `boolean` | `true` | Show bucket tooltip on hover |
| `interactive` | `boolean` | `true` | Enable hover/click interactions |

## Outputs

| Output | Type | Description |
|--------|------|-------------|
| `scoreClick` | `EventEmitter<number>` | Emits when the pill is clicked |

## Size Variants

| Size | Dimensions | Font Size | Use Case |
|------|------------|-----------|----------|
| `sm` | 24x20px | 12px | Tables, compact lists |
| `md` | 32x24px | 14px | Standard UI elements |
| `lg` | 40x28px | 16px | Dashboard emphasis |

## Color Mapping

The pill automatically applies colors based on score:

```typescript
// Score -> Bucket -> Color
score >= 90  // ActNow       -> #DC2626 (red)
score >= 70  // ScheduleNext -> #D97706 (amber)
score >= 40  // Investigate  -> #2563EB (blue)
score < 40   // Watchlist    -> #6B7280 (gray)
```

## Usage Examples

### Basic Usage

```html
<stella-score-pill [score]="78" />
```

### In a Table

```html
<td>
  <stella-score-pill [score]="finding.score" size="sm" />
</td>
```

### All Sizes

```html
<stella-score-pill [score]="78" size="sm" />
<stella-score-pill [score]="78" size="md" />
<stella-score-pill [score]="78" size="lg" />
```

### Non-Interactive

```html
<stella-score-pill [score]="78" [interactive]="false" />
```

### With Click Handler

```html
<stella-score-pill
  [score]="78"
  (scoreClick)="openScoreDetails($event)"
/>
```

```typescript
openScoreDetails(score: number): void {
  // Handle click - typically opens breakdown popover
}
```

## Accessibility

- Uses `role="status"` for screen reader announcements
- `aria-label` includes bucket name: "Score 78: Schedule Next"
- Focusable when interactive
- Supports keyboard activation (Enter/Space)

## Styling

The component uses Shadow DOM encapsulation. Override styles using CSS custom properties:

```css
stella-score-pill {
  --score-pill-border-radius: 4px;
  --score-pill-font-weight: 600;
}
```

## Related Components

- [ScoreBreakdownPopover](./score-breakdown-popover.md) - Detailed breakdown on click
- [ScoreBadge](./score-badge.md) - Evidence flag badges