Component catalogs with typed props

Treat each component like a mini product. Document props, states, and usage notes alongside the demo so designers and engineers share the same contract.

Example contract

type ButtonSpec = {
		variants: ["primary", "secondary", "ghost"];
		sizes: ["sm", "md", "lg"];
		states: ["default", "loading", "disabled"];
	};

Checklist

• Keep props typed in +page.ts.
• Document empty and loading states.
• Include keyboard and focus rules.
• Capture the default copy and microcopy once.