Components: ship `.sf-alert` and `.sf-badge`

[jackgranatowski]

Type: components layer · Tier: v1.0 core

Summary

Ship the status-driven components .sf-alert (with __icon/__close slots) and .sf-badge.

Why

Both derive directly from the existing status color tokens (success/warning/error/info), so they're low-risk and high-use.

Verified state (2026-06-20)

Both reserved as commented stubs — 0 live rules. Status tokens they depend on already ship.

Constraints

Additive, BEM-first, no build, no runtime JS. CSS-only dismiss for .sf-alert (e.g. :has() / checkbox pattern); any JS-driven dismiss is left to the consumer and documented. Modifiers per docs/components.md.

Acceptance criteria

• Implement .sf-alert + __icon/__close + .sf-badge
• Status modifiers (--success/--warning/--error/--info/--neutral)
• Tests (light + dark)
• Documented in docs/components.md
• MINOR bump only