docs(code-snippet): add "Reactive example" (#1296)

* docs(code-snippet): add description to "Hidden copy button"

* docs(code-snippet): add "Reactive example"

docs/src/pages/components/CodeSnippet.svx

@@ -60,6 +60,18 @@ To prevent text from being copied entirely, pass a no-op function to the `copy`
 
 <CodeSnippet type="multi" {code} />
 
+### Expanded by default
+
+Use the `expanded` prop to control whether the multi-line code snippet is expanded or not.
+
+<CodeSnippet type="multi" {code} expanded />
+
+### Reactive example
+
+The multi-line code snippet also dispatches "expand" and "collapse" events.
+
+<FileSource src="/framed/CodeSnippet/CodeSnippetReactive" />
+
 ### Custom copy feedback text
 
 Use the `feedback` prop to override the default copy button feedback text.
@@ -68,6 +80,8 @@ Use the `feedback` prop to override the default copy button feedback text.
 
 ### Hidden copy button
 
+Set `hideCopyButton` to `true` to hide the copy button.
+
 <CodeSnippet type="multi" {code} hideCopyButton />
 
 ### Disabled

docs/src/pages/framed/CodeSnippet/CodeSnippetReactive.svelte

@@ -0,0 +1,19 @@
+<script>
+  import { CodeSnippet, Button } from "carbon-components-svelte";
+
+  let expanded = false;
+</script>
+
+<Button on:click="{() => (expanded = !expanded)}">Toggle expansion</Button>
+
+<CodeSnippet
+  type="multi"
+  code="{Array.from({ length: 30 }, (_, i) => i + 1).join('\n')}"
+  bind:expanded
+  on:expand="{() => {
+    console.log('on:expand');
+  }}"
+  on:collapse="{() => {
+    console.log('on:collapse');
+  }}"
+/>