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

<stella-score-pill />

Inputs

InputTypeDefaultDescription
scorenumber0Evidence-weighted score (0-100)
size'sm' | 'md' | 'lg''md'Size variant
showTooltipbooleantrueShow bucket tooltip on hover
interactivebooleantrueEnable hover/click interactions

Outputs

OutputTypeDescription
scoreClickEventEmitter<number>Emits when the pill is clicked

Size Variants

SizeDimensionsFont SizeUse Case
sm24x20px12pxTables, compact lists
md32x24px14pxStandard UI elements
lg40x28px16pxDashboard emphasis

Color Mapping

The pill automatically applies colors based on score:

// 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

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

In a Table

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

All Sizes

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

Non-Interactive

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

With Click Handler

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

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

Accessibility

Styling

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

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