Bill Pay Card

name: "Bill Pay Card"
short_description: A bill row with payee, due date, amount, and a pay action.
long_visual_description: >
  A row with a category icon, the payee and due date (red when due soon), the amount, and a
  pay button.

use_cases:
  - Upcoming bill to pay.
  - Bill pay list entry.
  - Due bill reminder.
  - Recurring payment card.
  - Bills dashboard item.

recommended_for:
  - A single bill with due date and a pay action.
avoid_for:
  - A transaction (use transaction-row).

markets:
  - Global

example_usage: >
  Show the payee, due date (mark urgent when due soon), and amount with a pay action.

props:
  payee: The payee.
  category: The bill category.
  icon: A category icon glyph.
  amount: The amount due.
  due: The due date.
  urgent: Whether it's due soon.

example_prompts:
  - "Add a utilities bill pay card due soon."
  - "Add a bill row with a pay button."

lifecycle: experimental
content_model: A bill's payee, due date, amount, and pay action.

theming:
  tokens_used:
    - --color-surface
    - --color-surface-raised
    - --color-on-surface
    - --color-on-surface-muted
    - --color-primary
    - --color-primary-contrast
    - --color-danger
    - --color-border
    - --radius-card
    - --radius-control
    - --radius-button
    - --shadow-card
    - --font-heading
    - --space-card
    - --duration-token

editorial_guidance: >
  Highlight due-soon bills; the due date carries urgency (colour reinforces it).

categorization:
  category: Finance
  subcategory: Payments
  atomic_type: molecule
  usage_type: [card, list-item]
  maturity: ai-generated
  wcag:
    level: AA
    notes: The due text conveys urgency (colour reinforces); pay is a real button; the icon is decorative.
  keyboard_support: The pay button is focusable and activates on Enter/Space.
  seo_score: 25
  text_direction: both