Add live demo for rich items with multiple selections and virtual scr…

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - **Cloudflare deploy**: the site now deploys to Cloudflare (Workers with static assets, project `forge-select`) on every push to `main`, via a Workers Builds project connected directly to this repo through the Cloudflare Dashboard's Git integration (not a GitHub Actions workflow), configured by the new `wrangler.jsonc` at the repo root; see "Deploying the site" in `CONTRIBUTING.md`. Adds a `wrangler` dev dependency and a `deploy:cloudflare` script for manual/local deploys.
 - **Drag & Drop Ordering**: `sortable: true` (multi-select only) lets users reorder selected tags by dragging with mouse/touch/pen (Pointer Events), or via `Alt+Left`/`Alt+Right` when a tag has keyboard focus. Fully opt-in — multi-select behavior, markup, and events are unchanged when `sortable` is left at its default `false`. When mounted on a native `<select multiple>`, the underlying `<option>` elements are also reordered to match, so a plain `<form>` submission serializes values in the dragged order.
+- Live demo: new "Rich items — 1,000 users (multiple)" card showing the built-in `avatar`/`description` rich-item rendering combined with `multiple` + tags on a 1,000-item virtualized list.
 
 ### Changed
 

demo/index.html

@@ -117,6 +117,12 @@
       <select id="demo-rich"></select>
     </div>
 
+    <div class="demo-card">
+      <h2>Rich items — 1,000 users (multiple)</h2>
+      <p>Same <code>avatar</code> + <code>description</code> dataset with <code>multiple</code> and tags — virtual scroll and search stay fast with many selections.</p>
+      <select id="demo-rich-multi" multiple></select>
+    </div>
+
     <div class="demo-card">
       <h2>Custom HTML template</h2>
       <p><code>templateResult</code> returning an HTML string, with a status dot from <code>meta</code>.</p>
@@ -249,6 +255,10 @@
       placeholder: "Search 1,000 users…", clearable: true, itemHeight: 52,
       data: makeUsers(1000),
     })),
+    watch("rich-multi", new ForgeSelect("#demo-rich-multi", {
+      placeholder: "Search and pick multiple users…", multiple: true, clearable: true, itemHeight: 52,
+      data: makeUsers(1000),
+    })),
     watch("html", new ForgeSelect("#demo-html", {
       placeholder: "Custom template",
       data: [