feat(site): controls API reference

Closes #521

site/src/content/docs/reference/controls.mdx

@@ -0,0 +1,75 @@
+---
+title: Controls
+frameworkTitle:
+  html: media-controls
+description: Containers for composing and auto-hiding player controls
+---
+
+import ApiReference from "@/components/docs/api-reference/ApiReference.astro";
+import FrameworkCase from "@/components/docs/FrameworkCase.astro";
+import StyleCase from "@/components/docs/StyleCase.astro";
+import Demo from "@/components/docs/demos/Demo.astro";
+
+{/* React demos */}
+import BasicUsageDemoReact from "@/components/docs/demos/controls/react/css/BasicUsage";
+import basicUsageReactTsx from "@/components/docs/demos/controls/react/css/BasicUsage.tsx?raw";
+import basicUsageReactCss from "@/components/docs/demos/controls/react/css/BasicUsage.css?raw";
+
+{/* HTML demos */}
+import BasicUsageDemoHtml from "@/components/docs/demos/controls/html/css/BasicUsage.astro";
+import basicUsageHtml from "@/components/docs/demos/controls/html/css/BasicUsage.html?raw";
+import basicUsageHtmlCss from "@/components/docs/demos/controls/html/css/BasicUsage.css?raw";
+import basicUsageHtmlTs from "@/components/docs/demos/controls/html/css/BasicUsage.ts?raw";
+
+## Anatomy
+
+Import the component and assemble its parts:
+
+<FrameworkCase frameworks={["react"]}>
+  ```tsx
+  <Controls.Root>
+    <Controls.Group />
+  </Controls.Root>
+  ```
+</FrameworkCase>
+
+<FrameworkCase frameworks={["html"]}>
+  ```html
+  <media-controls>
+    <media-controls-group></media-controls-group>
+  </media-controls>
+  ```
+</FrameworkCase>
+
+## Examples
+
+### Basic Usage
+
+<FrameworkCase frameworks={["react"]}>
+  <StyleCase styles={["css"]}>
+    <Demo
+      files={[
+        { title: "App.tsx", code: basicUsageReactTsx, lang: "tsx" },
+        { title: "App.css", code: basicUsageReactCss, lang: "css" },
+      ]}
+    >
+      <BasicUsageDemoReact client:idle />
+    </Demo>
+  </StyleCase>
+</FrameworkCase>
+
+<FrameworkCase frameworks={["html"]}>
+  <StyleCase styles={["css"]}>
+    <Demo
+      files={[
+        { title: "index.html", code: basicUsageHtml, lang: "html" },
+        { title: "index.css", code: basicUsageHtmlCss, lang: "css" },
+        { title: "index.ts", code: basicUsageHtmlTs, lang: "ts" },
+      ]}
+    >
+      <BasicUsageDemoHtml />
+    </Demo>
+  </StyleCase>
+</FrameworkCase>
+
+<ApiReference component="Controls" />