docs(combo-box): add virtualization example

Author: metonym

docs/src/pages/components/ComboBox.svx

@@ -115,6 +115,12 @@ Set `allowCustomValue` to `true` to let users enter custom text that isn't in th
 
 <FileSource src="/framed/ComboBox/AllowCustomValue" />
 
+## Virtualized (large lists)
+
+Enable virtualization for large lists to improve performance. Only visible items are rendered in the DOM.
+
+<FileSource src="/framed/ComboBox/VirtualizedComboBox" />
+
 ## Top direction
 
 Set `direction` to `"top"` to make the dropdown menu appear above the input.

docs/src/pages/framed/ComboBox/VirtualizedComboBox.svelte

@@ -0,0 +1,31 @@
+<script>
+  import { ComboBox } from "carbon-components-svelte";
+
+  // Generate large dataset
+  const items = Array.from({ length: 5000 }, (_, i) => ({
+    id: String(i),
+    text: "Item " + (i + 1),
+  }));
+
+  let selectedId = undefined;
+  let value = "";
+</script>
+
+<ComboBox
+  titleText="Virtualized ComboBox (5,000 items)"
+  placeholder="Filter..."
+  helperText="Only visible items are rendered in the DOM"
+  {items}
+  shouldFilterItem={(item, value) =>
+    item.text.toLowerCase().includes(value.toLowerCase())}
+  bind:selectedId
+  bind:value
+  virtualize={true}
+/>
+
+<div style="margin-top: 1rem;">
+  {#if selectedId !== undefined}
+    <strong>Selected:</strong>
+    {items.find((item) => item.id === selectedId)?.text}
+  {/if}
+</div>