# {{ComponentName}}

> Per-component spec. Authoritative for props, variants, accessibility, and
> anti-patterns. Visual authority (color/shadow/radius/spacing) belongs to
> [`../tokens-reference.md`](../tokens-reference.md).

## Source

- File: `{{file_path}}`
- Exported as: `{{exported_name}}`
- Used by: <!-- TODO: list 2-3 key consumers, e.g. pages or compound components -->

## Purpose

<!-- One-sentence statement of what this primitive is for and when to reach
for it instead of an alternative. -->

## Props

| Prop | Type | Default | Notes |
|------|------|---------|-------|
{{props_table}}

<!-- TODO: if props were not auto-resolvable, fill the table from the source
file. Keep types accurate — drift here is the most common bug. -->

## Variants

{{variants_section}}

<!-- TODO: enumerate every variant the component exposes. For each, describe
when to use it. Example:
- `variant="primary"` — primary CTA, one per surface
- `variant="ghost"` — secondary actions in dense layouts
- `size="sm" | "md" | "lg"` — bind to spacing tokens
-->

## Tokens consumed

{{tokens_section}}

<!-- TODO: list the tokens this component reads from tokens-reference.md.
Color, spacing, shadow, radius, motion. If you find hardcoded literals in
the source, that's a registry violation — fix at the source. -->

## Accessibility

- Keyboard: <!-- focus order, shortcuts, escape behavior -->
- ARIA: <!-- roles, labels, descriptions, live regions -->
- Touch target: ≥ 44×44px when interactive
- Color contrast: text ≥ 4.5:1, UI ≥ 3:1 (WCAG 2.1 AA)
- Reduced motion: respects `prefers-reduced-motion`

## Composition

<!-- How this primitive composes with others. Patterns it appears in.
Cross-link to patterns/ docs when applicable. -->

## Anti-patterns

<!-- Common misuses that should be rejected in code review. Examples:
- Wrapping in a div with absolute positioning to fake a variant — add a
  variant to the registry instead.
- Hardcoding a custom color via inline style — add a token and consume it.
-->

## MUST rules

<!-- HIGH-severity rules the code-reviewer agent enforces. Examples:
- MUST consume `--color-primary` for background; never hardcode.
- MUST set `aria-label` when icon-only.
-->

## Changelog

<!-- Track breaking changes to the spec. Bump version when removing a variant
or changing a default. -->

- {{today}} — Spec scaffolded by `/design-system-init`.
