Components: ship `.sf-modal` on native `<dialog>`

[jackgranatowski]

Type: components layer · Tier: v1.0 core

Summary

Ship .sf-modal styling built on the native <dialog> element, using @starting-style for entry/exit animation.

Why

Both <dialog> and @starting-style are already inside the framework's browser support floor (see README support table), so a polished modal ships with zero runtime JS — the consumer only calls showModal().

Verified state (2026-06-20)

Reserved commented stub — 0 live rules. @starting-style is already an assumed baseline feature.

Constraints

Additive, BEM-first, no build, no JS shipped. Modifiers --s/--m/--l/--full; slots __header/__body/__footer/__close.

Acceptance criteria

• Implement .sf-modal + slots + size modifiers
• Entry/exit via @starting-style (no JS)
• Backdrop + scroll-lock handled in CSS where possible; document any JS the consumer must provide
• Tests (light + dark)
• Documented in docs/components.md
• MINOR bump only