Audit a Component Against System Standards

You are helping me audit an existing UI component against my design system's standards and identify gaps before scaling the pattern. **Step 1 — Read the references:** Read the following from the Sistema knowledge base: - Token architecture synthesis: `{{sistema_url}}/raw/principles/tokens/architecture` - Accessibility floor: `{{sistema_url}}/raw/principles/accessibility/floor` These define what correct token consumption and accessibility compliance look like — the audit measures the component against these standards. Component to audit: [Paste your component code here.] Evaluate against these criteria: 1. **Token usage** — Does the component consume semantic token names (via CSS vars or a theme system), or are there hardcoded hex values, px sizes, or raw font names? Flag every instance. 2. **Interactive states** — Are hover, focus, active, and disabled states present? Does each state use the correct token for the visual change? 3. **Accessibility** — Correct ARIA role and attributes; keyboard interaction model per accessibility floor §2; visible focus indicator meeting 3:1 contrast per §3; touch target ≥ 44×44px per §4.2; accessible name present per §5.2? 4. **API design** — Are prop names predictable and consistent with the rest of the system? Is the API minimal without being inflexible? Output a structured audit report: - Summary verdict (ready to scale / needs work / significant gaps) - Specific issues, each with a line reference and severity (blocking / recommended / minor) - Prioritized list of changes to make before using this component as a pattern ---