docs(code-snippet): add examples for dynnamic, hidden code snippets

docs/src/pages/components/CodeSnippet.svx

@@ -51,6 +51,20 @@ let comment = `
 
 <CodeSnippet wrapText type="multi" code="{comment}" />
 
+### Dynamic multi-line code
+
+For dynamically updated code, you must use the `code` prop instead of the default slot.
+
+<FileSource src="/framed/CodeSnippet/DynamicCodeSnippet" />
+
+### Hidden multi-line code
+
+There may be cases where your code snippet is visually hidden. The logic to render the "Show more" button relies on the element's computed height. For visually hidden content, the button will not appear because the height is `0`.
+
+The recommended workaround is to re-render the component. See the example below.
+
+<FileSource src="/framed/CodeSnippet/HiddenCodeSnippet" />
+
 ### Skeleton
 
 The default skeleton type is `"single"`.

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

@@ -0,0 +1,15 @@
+<script>
+  import { ToggleSmall, CodeSnippet } from "carbon-components-svelte";
+
+  let toggled = false;
+
+  $: length = toggled ? 20 : 10;
+  $: code = Array.from({ length }, (_, i) => i + 1).join("\n");
+</script>
+
+<ToggleSmall
+  style="margin-bottom: var(--cds-spacing-05)"
+  labelText="Trigger snippet overflow"
+  bind:toggled
+/>
+<CodeSnippet type="multi" code="{code}" />

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

@@ -0,0 +1,38 @@
+<script>
+  import { CodeSnippet, Tabs, Tab, TabContent } from "carbon-components-svelte";
+
+  let selected = 0;
+
+  const code = Array.from({ length: 20 }, (_, i) => i + 1).join("\n");
+</script>
+
+<style>
+  p {
+    margin-bottom: var(--cds-spacing-05);
+  }
+</style>
+
+<Tabs bind:selected>
+  <Tab label="Tab 1" />
+  <Tab label="Tab 2" />
+  <div slot="content">
+    <TabContent>
+      <p>Tab 2 contains a multi-line code snippet.</p>
+      <p>
+        Inactive tab content is visually hidden but still rendered in the DOM.
+        As a result, the "Show more" button will not appear because the computed
+        height of the code element is 0.
+      </p>
+      <p>
+        To work around this, you can force the code snippet to be re-rendered
+        when the tab content is active.
+      </p>
+    </TabContent>
+    <TabContent>
+      <p>The "Show more" button should appear.</p>
+      {#if selected === 1}
+        <CodeSnippet type="multi" code="{code}" />
+      {/if}
+    </TabContent>
+  </div>
+</Tabs>