# Sparkline Design System

> Angular component library (standalone components). Every component is themed through semantic CSS custom properties. These docs are written for AI coding agents building product screens from the library.

Before writing UI: load `src/styles.scss` once, wrap the app in an element with `data-theme="light"`, and use the Sparkline component for any control that has one. Listen to Sparkline outputs (`(buttonClick)`, `(valueChange)`, `(checkedChange)`), and bind `sp-input` with `ngModel` or reactive forms.

## Guides

- [Building an app with Sparkline](agents/building-with-sparkline.md): setup, rules, and what to do when a component is missing. Read first.
- [Tokens](agents/tokens.md): semantic color, spacing, radius, shadow and type tokens for app styles.

## Components

- [Avatar](components/avatar.md): `<sp-avatar>` is a small circular representation of a person: initials, a photo or a generic account icon. Can show a status dot or a notification count.
- [Badge](components/badge.md): `<sp-badge>` is a small status marker: a numeric count or a colored dot.
- [Button](components/button.md): `<sp-button>` triggers an action. Three emphasis levels: `filled` (primary), `outlined` (secondary), `text` (tertiary or inline).
- [ButtonGroup](components/button-group.md): `<sp-button-group>` is a segmented control: a row of connected buttons where exactly one is active.
- [Card](components/card.md): `<sp-card>` is a container surface for grouping related content. It only handles the surface (background, border or shadow, radius, padding); you project the content inside.
- [Checkbox](components/checkbox.md): `<sp-checkbox>` is a labeled checkbox for on/off choices and consent. Supports an indeterminate (mixed) state.
- [Chip](components/chip.md): `<sp-chip>` is a compact pill for a tag, filter or selection. `clearable` chips have a remove icon.
- [Icon](components/icon.md): `<sp-icon>` renders a 24x24-grid SVG icon from the Sparkline registry. `<sp-icon-gallery>` renders every icon, for documentation.
- [Input](components/input.md): `<sp-input>` is a single-line text field with label, helper or error text, and optional icons. It is an Angular form control, so it works with `ngModel` and reactive forms.
- [Radio](components/radio.md): `<sp-radio>` is a single labeled radio button. There is no group component: you manage which radio in a set is checked.
- [Select](components/select.md): `<sp-select>` is a dropdown for choosing one option, or several with `multiple`. Custom trigger and panel, not a native `<select>`.
- [Slider](components/slider.md): `<sp-slider>` is a range input for picking a number between a minimum and maximum.
- [Stepper](components/stepper.md): `<sp-stepper>` is a progress indicator for multi-step flows. Numbered steps with labels, horizontal or vertical. Display only.
- [Switch](components/switch.md): `<sp-switch>` is an on/off toggle for settings that take effect immediately. It has no label of its own.