Components: ship `.sf-button`

[jackgranatowski]

Type: components layer · Tier: v1.0 core

Summary

Ship the first real component, .sf-button, in @layer slashed.components. The name and token block are already reserved; this uncomments and completes the implementation.

Why

.sf-button + .sf-card are the highest-use components and have the most stable tokens — the natural first batch toward 1.0.

Verified state (2026-06-20)

optional/components.css is entirely commented out; grep "sf-button{" against the built bundles returns 0 live rules. The --sf-button-* token block exists in optional/tokens.components.css (also commented). Cascade slot is real and ordered.

Constraints

Additive only, BEM-first, no build step, no runtime JS. Modifiers per docs/components.md: --primary, --secondary, --ghost, --danger, --s, --m, --l.

Acceptance criteria

• Uncomment + implement .sf-button and its --sf-button-* tokens
• All documented modifiers render
• WCAG 2.2 target size (≥24px) + visible focus
• Tests under tests/ (light + dark)
• Documented in docs/components.md with HTML examples
• MINOR bump only (no breaking changes)