Target bar
Spec
A spending target, drawn: the whole bar is the target, filled as far as what was spent (Reports, issue 122). Decoration: the line beside it says the same in words.
Rules
- Track surface-accent-subtle with a border-colored edge; fill surface-accent. Radius full, 8px high.
- Under the target: filled as far as spent. "$70.85 left of $300.00" goes with it.
- Over the target: the bar is full, a 2px text-primary line marks where the target was, and the part past it is amber (text-warning). The line says "$14.00 over your $40.00 target", the amount in bold amber.
- Hidden from screen readers (aria-hidden): the words are the information.
Built 1.0.0
The app's own component, version 1.0.0, live. Fake data; nothing is saved.
Changes
- 1.0.0, Oct 15 2026: First version: the whole bar is the target; over it, a line marks the target and the part past it is amber. (#122)