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,30 @@
+<script>
+  import { ComboBox, Stack } from "carbon-components-svelte";
+
+  const items = Array.from({ length: 10_000 }, (_, i) => ({
+    id: i,
+    text: "Item " + (i + 1),
+  }));
+
+  let value = "";
+  let selectedId = undefined;
+  $: selectedItem = items.find((item) => item.id === selectedId);
+</script>
+
+<Stack gap={4}>
+  <ComboBox
+    virtualize={true}
+    titleText="Virtualized ComboBox (50,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
+  />
+  <div>
+    <strong>Selected:</strong>
+    {selectedItem?.text}
+  </div>
+</Stack>