add init controlled docs

content/components/alert-dialog.md

@@ -35,6 +35,31 @@ description: Presents critical information or prompts to the user, typically req
 </AlertDialog.Root>
 ```
 
+## Controlled Usage
+
+If you want to control or be aware of the `open` state of the dialog from outside of the component, you can bind to the `open` prop.
+
+```svelte
+<script lang="ts">
+	import { AlertDialog } from "bits-ui";
+	let dialogOpen = false;
+</script>
+
+<button on:click={() => (dialogOpen = true)}>Open Dialog</button>
+<AlertDialog.Root bind:open={dialogOpen}>
+	<AlertDialog.Trigger />
+	<AlertDialog.Portal>
+		<AlertDialog.Overlay />
+		<AlertDialog.Content>
+			<AlertDialog.Title />
+			<AlertDialog.Description />
+			<AlertDialog.Cancel />
+			<AlertDialog.Action />
+		</AlertDialog.Content>
+	</AlertDialog.Portal>
+</AlertDialog.Root>
+```
+
 <APISection {schemas} />
 
 🚧 **UNDER CONSTRUCTION** 🚧

content/components/checkbox.md

@@ -27,6 +27,23 @@ description: Allow users to mark options as checked, unchecked, or indeterminate
 </Checkbox.Root>
 ```
 
+## Controlled Usage
+
+If you want to control or be aware of the `checked` state of the checkbox from outside of the component, you can bind to the `checked` prop.
+
+```svelte
+<script lang="ts">
+	import { Checkbox } from "bits-ui";
+	let myChecked = false;
+</script>
+
+<p>Checked: {myChecked}</p>
+<Checkbox.Root bind:checked={myChecked}>
+	<Checkbox.Indicator />
+	<Checkbox.Input />
+</Checkbox.Root>
+```
+
 <APISection {schemas} />
 
 🚧 **UNDER CONSTRUCTION** 🚧

content/components/collapsible.md

@@ -27,6 +27,23 @@ description: An interactive component which expands and collapses content.
 </Collapsible.Root>
 ```
 
+## Controlled Usage
+
+Sometimes, you want to either control or be aware of the `open` state of the collapsible from outside of the component. To do so, you can bind to the `open` prop.
+
+```svelte
+<script lang="ts">
+	import { Collapsible } from "bits-ui";
+	let collapsibleOpen = false;
+</script>
+
+<button on:click={() => (collapsibleOpen = true)}>Open</button>
+<Collapsible.Root bind:open={collapsibleOpen}>
+	<Collapsible.Trigger />
+	<Collapsible.Content />
+</Collapsible.Root>
+```
+
 <APISection {schemas} />
 
 🚧 **UNDER CONSTRUCTION** 🚧

content/components/dialog.md

@@ -34,6 +34,30 @@ description: A window overlaid on either the primary window or another dialog wi
 </Dialog.Root>
 ```
 
+## Controlled Usage
+
+If you want to control or be aware of the `open` state of the dialog from outside of the component, you can bind to the `open` prop.
+
+```svelte
+<script lang="ts">
+	import { Dialog } from "bits-ui";
+	let dialogOpen = false;
+</script>
+
+<button on:click={() => (dialogOpen = true)}>Open Dialog</button>
+<Dialog.Root bind:open={dialogOpen}>
+	<Dialog.Trigger />
+	<Dialog.Portal>
+		<Dialog.Overlay />
+		<Dialog.Content>
+			<Dialog.Title />
+			<Dialog.Description />
+			<Dialog.Close />
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>
+```
+
 <APISection {schemas} />
 
 🚧 **UNDER CONSTRUCTION** 🚧

content/components/popover.md

@@ -30,6 +30,26 @@ description: Displays content in a floating container that appears above the sur
 </Popover.Root>
 ```
 
+## Controlled Usage
+
+If you want to control or be aware of the `open` state of the popover from outside of the component, you can bind to the `open` prop.
+
+```svelte
+<script lang="ts">
+	import { Popover } from "bits-ui";
+	let popoverOpen = false;
+</script>
+
+<button on:click={() => (popoverOpen = true)}>Open</button>
+<Popover.Root bind:open={popoverOpen}>
+	<Popover.Trigger />
+	<Popover.Content>
+		<Popover.Close />
+		<Popover.Arrow />
+	</Popover.Content>
+</Popover.Root>
+```
+
 <APISection {schemas} />
 
 🚧 **UNDER CONSTRUCTION** 🚧