Time Off Balance

name: "Time Off Balance"
short_description: A card listing leave types with days used out of total and a coloured usage bar per type.
long_visual_description: >
  A card on the surface colour headed "Time off balance". Each leave type is a row pairing a label with
  a tabular "used/total days" count, above a slim progress bar on the raised surface whose width comes
  from a precomputed percentage and whose fill colour is set per row by a tokenised utility. A hidden
  safelist row keeps the common fill colours in the compiled CSS.

use_cases:
  - A leave-balance summary on an employee dashboard.
  - A sidebar widget beside a time-off request form.
  - An at-a-glance accrual overview in an HR portal.
  - A remaining-days breakdown across vacation, sick and personal leave.
  - A manager view of a report's remaining balances.
  - A benefits summary card listing entitlement usage.

recommended_for:
  - Showing multiple leave types and their usage together.
  - Pairing with a request form as context.
avoid_for:
  - Submitting a leave request (use pto-request).
  - A single generic percentage bar (use progress-bar).

markets:
  - Global

example_usage: >
  Pass a balances array where each item is { label, used, total, pct, color_class }. Precompute pct as
  the used-over-total percentage before rendering, since the template does no arithmetic, and set
  color_class to a tokenised fill such as bg-primary or bg-warning to signal how much is left.

props:
  balances: One row per leave type; each carries a label, used and total day counts, a precomputed bar percentage, and a tokenised fill colour.

lifecycle: experimental
content_model: An array of leave types, each with a used and total day count, a precomputed percentage, and a fill colour.

theming:
  tokens_used:
    - --color-surface
    - --color-surface-raised
    - --color-on-surface
    - --color-on-surface-muted
    - --color-primary
    - --color-info
    - --color-warning
    - --color-danger
    - --color-border
    - --radius-card
    - --radius-pill
    - --shadow-card
    - --font-heading
    - --space-card

editorial_guidance: >
  Keep leave-type labels short and consistent. Precompute each pct from used over total, and reserve the
  warning or danger fill for balances that are nearly exhausted so colour reinforces the count.

relationships:
  related:
    - hr/pto-request
    - hr/payslip-summary

categorization:
  category: "HR & People"
  subcategory: Leave
  atomic_type: molecule
  usage_type: [card, list]
  maturity: ai-generated
  wcag:
    level: AA
    notes: Each bar is paired with a used/total text count, so the balance never depends on colour or width alone.
  keyboard_support: None - static, non-interactive.
  seo_score: 35
  text_direction: both