{
  "element": "nve-combobox",
  "entrypoint": "@nvidia-elements/core/combobox/combobox.examples.json",
  "items": [
    {
      "id": "combobox",
      "name": "Default",
      "template": "<nve-combobox>\n  <label>label</label>\n  <input type=\"search\" />\n  <datalist>\n    <option value=\"status\"></option>\n    <option value=\"priority\"></option>\n    <option value=\"date\"></option>\n    <option value=\"session\"></option>\n    <option value=\"configuration\"></option>\n    <option value=\"contains\"></option>\n  </datalist>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n",
      "summary": "Basic combobox with search input and datalist options for filtering and selection.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "combobox-vertical",
      "name": "Vertical",
      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-combobox>\n    <label>label</label>\n    <input type=\"search\" />\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  <nve-combobox>\n    <label>disabled</label>\n    <input type=\"search\" disabled />\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  <nve-combobox>\n    <label>success</label>\n    <input type=\"search\" />\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-combobox>\n  <nve-combobox>\n    <label>error</label>\n    <input type=\"search\" />\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-combobox>\n</div>\n",
      "summary": "Vertical layout showing different combobox states (normal, disabled, success, error) stacked for comparison.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "combobox-horizontal",
      "name": "Horizontal",
      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-combobox layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"search\" />\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  <nve-combobox layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"search\" disabled />\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  <nve-combobox layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"search\" />\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-combobox>\n  <nve-combobox layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"search\" />\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-combobox>\n</div>\n",
      "summary": "Horizontal layout showing different combobox states (normal, disabled, success, error) for inline form layouts.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "combobox-flat",
      "name": "Flat",
      "template": "<nve-combobox container=\"flat\">\n  <nve-icon name=\"filter\" slot=\"prefix-icon\"></nve-icon>\n  <input type=\"search\" aria-label=\"search\" />\n  <datalist>\n    <option value=\"status\"></option>\n    <option value=\"priority\"></option>\n    <option value=\"date\"></option>\n    <option value=\"session\"></option>\n    <option value=\"configuration\"></option>\n    <option value=\"contains\"></option>\n  </datalist>\n</nve-combobox>\n",
      "summary": "Flat container style with prefix icon for compact inline filtering interfaces.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "combobox-select",
      "name": "Select",
      "template": "<nve-combobox>\n  <label>label</label>\n  <input type=\"search\" />\n  <select>\n    <option value=\"status\"></option>\n    <option value=\"priority\"></option>\n    <option value=\"date\"></option>\n    <option value=\"session\"></option>\n    <option value=\"configuration\"></option>\n    <option value=\"contains\"></option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n",
      "summary": "Single select allows users only to select from a predefined list of options. Invalid input is automatically cleared. All options are visible on focus until typing begins for filtering.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "combobox-multi-select",
      "name": "MultiSelect",
      "template": "<nve-combobox>\n  <label>label</label>\n  <input type=\"search\" />\n  <select multiple>\n    <option selected value=\"status\"></option>\n    <option selected value=\"priority\"></option>\n    <option value=\"date\"></option>\n    <option value=\"session\"></option>\n    <option value=\"configuration\"></option>\n    <option value=\"contains\"></option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n",
      "summary": "Multi select allows users to select many options from a predefined list. The select `value` will only reflect the first selected value. To get all selected options check the `selected` property on each `<option>` or the select property `selectedOptions`. On focus all options will show until the user starts typing. Select is the selection value of the combobox. The input is the filter value.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "combobox-selected-first",
      "name": "SelectedFirst",
      "template": "<nve-combobox id=\"combobox-selected-first\" style=\"width: 500px; --scroll-height: 220px\">\n  <label>label</label>\n  <input type=\"search\" />\n  <select multiple>\n    <option value=\"status\"></option>\n    <option value=\"priority\"></option>\n    <option value=\"date\"></option>\n    <option value=\"session\"></option>\n    <option value=\"configuration\"></option>\n    <option value=\"contains\"></option>\n    <option value=\"includes\"></option>\n    <option value=\"user\"></option>\n    <option value=\"progress\"></option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n<script type=\"module\">\n  const combobox = document.querySelector(\"#combobox-selected-first\");\n  const select = combobox.querySelector(\"select\");\n  const optionOrder = new Map([...select.options].map((option, index) => [option, index]));\n  combobox.addEventListener(\"open\", () => {\n    const selectedOrder = new Map([...select.selectedOptions].map((option, index) => [option, index]));\n    Array.from(select.options)\n      .sort((a, b) =>\n        Number(b.selected) - Number(a.selected) || (a.selected && b.selected)\n          ? selectedOrder.get(a) - selectedOrder.get(b)\n          : optionOrder.get(a) - optionOrder.get(b),\n      )\n      .forEach((option) => select.append(option));\n  });\n</script>\n",
      "summary": "Multi-select that reorders selected options before unselected options after the combobox closes. Use when long filter lists need selected values to stay easy to review.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "combobox-empty",
      "name": "EmptyDefault",
      "template": "<nve-combobox>\n  <label>label</label>\n  <input type=\"search\" />\n  <select>\n    <option disabled selected></option>\n    <option value=\"status\"></option>\n    <option value=\"priority\"></option>\n    <option value=\"date\"></option>\n    <option value=\"session\"></option>\n    <option value=\"configuration\"></option>\n    <option value=\"contains\"></option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n",
      "summary": "Combobox with an empty initial value using a disabled placeholder option. Use when no default selection exists and the user must make an explicit choice.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "combobox-label",
      "name": "Label",
      "template": "<nve-combobox>\n  <label>label</label>\n  <input type=\"search\" />\n  <select>\n    <option value=\"1\">Status</option>\n    <option value=\"2\">Priority</option>\n    <option value=\"3\">Date</option>\n    <option value=\"4\">Session</option>\n    <option value=\"5\">Configuration</option>\n    <option value=\"6\">Contains</option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n",
      "summary": "Combobox options with display labels that differ from underlying values. Use when option values are IDs or codes but users need to see human-readable text in the input.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "combobox-label-multi-select",
      "name": "LabelMultiSelect",
      "template": "<nve-combobox>\n  <label>label</label>\n  <input type=\"search\" />\n  <select multiple>\n    <option value=\"1\">Status</option>\n    <option value=\"2\">Priority</option>\n    <option value=\"3\">Date</option>\n    <option value=\"4\">Session</option>\n    <option value=\"5\">Configuration</option>\n    <option value=\"6\">Contains</option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n",
      "summary": "Multi-select with labeled options where display text differs from option values.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "combobox-overflow",
      "name": "Overflow",
      "template": "<nve-combobox style=\"width: 250px\">\n  <label>label</label>\n  <input type=\"search\" />\n  <select multiple>\n    <option selected value=\"status\"></option>\n    <option selected value=\"priority\"></option>\n    <option selected value=\"date\"></option>\n    <option selected value=\"session\"></option>\n    <option value=\"configuration\"></option>\n    <option value=\"contains\"></option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n",
      "summary": "Overflow behavior where many tags collapse into a simple text label when the parent container is too narrow.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "combobox-overflow-wrap",
      "name": "OverflowWrap",
      "template": "<nve-combobox tag-layout=\"wrap\" style=\"width: 400px\">\n  <label>label</label>\n  <input type=\"search\" />\n  <select multiple>\n    <option selected value=\"status\"></option>\n    <option selected value=\"priority\"></option>\n    <option selected value=\"date\"></option>\n    <option selected value=\"session\"></option>\n    <option selected value=\"configuration\"></option>\n    <option selected value=\"contains\"></option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n",
      "summary": "Combobox with option to wrap tags when the parent container is too narrow. Input will span below the tags.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "combobox-popover-overflow",
      "name": "PopoverOverflow",
      "template": "<nve-combobox style=\"width: 100px\">\n  <label>label</label>\n  <input type=\"search\" />\n  <select>\n    <option value=\"really-long-text-option-that-keeps-going\"></option>\n    <option value=\"status\"></option>\n    <option value=\"priority\"></option>\n    <option value=\"date\"></option>\n    <option value=\"session\"></option>\n    <option value=\"configuration\"></option>\n    <option value=\"contains\"></option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n",
      "summary": "Combobox handling of long option text in constrained width containers.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "combobox-reset",
      "name": "Reset",
      "template": "<nve-combobox id=\"combobox-reset\" style=\"width: 500px; --scroll-height: 220px\">\n  <label>label</label>\n  <input type=\"search\" />\n  <select multiple>\n    <option value=\"status\"></option>\n    <option value=\"priority\"></option>\n    <option value=\"date\"></option>\n    <option value=\"session\"></option>\n    <option value=\"configuration\"></option>\n    <option value=\"contains\"></option>\n  </select>\n  <nve-icon-button aria-label=\"clear selection\" icon-name=\"cancel\" container=\"inline\"></nve-icon-button>\n  <nve-button slot=\"footer\" aria-label=\"clear selection\" container=\"flat\">reset</nve-button>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n<script type=\"module\">\n  document\n    .querySelector(\"#combobox-reset nve-icon-button\")\n    .addEventListener(\"click\", (e) => e.target.parentElement.reset());\n  document.querySelector(\"#combobox-reset nve-button\").addEventListener(\"click\", (e) => e.target.parentElement.reset());\n</script>\n",
      "summary": "Multi-select with reset functionality via icon button and footer button to clear all selections.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "combobox-footer",
      "name": "Footer",
      "template": "<nve-combobox style=\"width: 500px; --scroll-height: 200px\">\n  <label>label</label>\n  <input type=\"search\" />\n  <select multiple>\n    <option value=\"status\"></option>\n    <option value=\"priority\"></option>\n    <option value=\"date\"></option>\n    <option value=\"session\"></option>\n    <option value=\"configuration\"></option>\n    <option value=\"contains\"></option>\n    <option value=\"includes\"></option>\n    <option value=\"user\"></option>\n    <option value=\"progress\"></option>\n  </select>\n  <nve-button slot=\"footer\" container=\"flat\">action</nve-button>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n",
      "summary": "Multi-select with footer action button for extra operations on selected items.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "combobox-select-all",
      "name": "SelectAll",
      "template": "<nve-combobox id=\"combobox-select-all\" style=\"width: 500px; --scroll-height: 200px\">\n  <label>label</label>\n  <input type=\"search\" />\n  <select multiple>\n    <option value=\"status\"></option>\n    <option value=\"priority\"></option>\n    <option value=\"date\"></option>\n    <option value=\"session\"></option>\n    <option value=\"configuration\"></option>\n    <option value=\"contains\"></option>\n    <option value=\"includes\"></option>\n    <option value=\"user\"></option>\n    <option value=\"progress\"></option>\n  </select>\n  <div slot=\"footer\" nve-layout=\"row align:stretch full\">\n    <nve-button container=\"flat\">Select All</nve-button>\n    <nve-button container=\"flat\">Deselect All</nve-button>\n  </div>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n<script type=\"module\">\n  const combobox = document.querySelector(\"#combobox-select-all\");\n  const [selectAll, deselectAll] = Array.from(combobox.querySelectorAll(\"nve-button\"));\n  selectAll.addEventListener(\"click\", () => combobox.selectAll());\n  deselectAll.addEventListener(\"click\", () => combobox.reset());\n  combobox.addEventListener(\"change\", (e) => console.log(e.target.selectedOptions));\n</script>\n",
      "summary": "Multi-select with bulk selection controls (Select All/Deselect All) in footer for efficient mass operations.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "combobox-disabled-options",
      "name": "DisabledOptions",
      "template": "<nve-combobox>\n  <label>label</label>\n  <input type=\"search\" />\n  <select multiple>\n    <option value=\"status\" disabled></option>\n    <option value=\"priority\" disabled></option>\n    <option value=\"date\" disabled></option>\n    <option value=\"session\"></option>\n    <option value=\"configuration\"></option>\n    <option value=\"contains\"></option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n",
      "summary": "Multi-select with disabled options to show unavailable choices while maintaining visual context.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "combobox-no-tags",
      "name": "NoTags",
      "template": "<form id=\"hidden-tags\" nve-layout=\"column gap:lg align:stretch\">\n  <nve-combobox tag-layout=\"hidden\">\n    <label>label</label>\n    <input type=\"search\" />\n    <select multiple>\n      <option selected value=\"status\"></option>\n      <option selected value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </select>\n  </nve-combobox>\n  <div id=\"tags\" nve-layout=\"row gap:xs\"></div>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"#hidden-tags\");\n  const select = form.querySelector(\"select\");\n  const tags = form.querySelector(\"#tags\");\n  updateTags();\n  select.addEventListener(\"change\", (e) => updateTags());\n  tags.addEventListener(\"close\", (e) => {\n    Array.from(select.options).find((o) => o.value === e.target.value).selected = false;\n    updateTags();\n  });\n  function updateTags() {\n    tags.innerHTML = \"\";\n    Array.from(select.selectedOptions).forEach(\n      (o) => (tags.innerHTML += '<nve-tag closable value=\"' + o.value + '\">' + o.value + \"</nve-tag>\"),\n    );\n  }\n</script>\n",
      "summary": "Multi-select without built-in tags, using external tag management for custom selection display.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "combobox-create-options",
      "name": "CreateOptions",
      "template": "<nve-combobox id=\"creatable-combo\" behavior-create style=\"--scroll-height: 220px\">\n  <label>Tags</label>\n  <input type=\"search\" placeholder=\"Select or create a tag…\" />\n  <select multiple>\n    <option value=\"Go\">Go</option>\n    <option value=\"Rust\">Rust</option>\n    <option value=\"Python\">Python</option>\n    <option value=\"JavaScript\">JavaScript</option>\n    <option value=\"TypeScript\">TypeScript</option>\n    <option value=\"Java\">Java</option>\n    <option value=\"C#\">C#</option>\n    <option value=\"C++\">C++</option>\n    <option value=\"C\">C</option>\n    <option value=\"PHP\">PHP</option>\n  </select>\n  <nve-control-message>Press Enter to create a tag that doesn't exist yet</nve-control-message>\n</nve-combobox>\n<script type=\"module\">\n  const combobox = document.getElementById(\"creatable-combo\");\n  const select = combobox.querySelector(\"select\");\n  combobox.addEventListener(\"create\", (e) => {\n    const option = document.createElement(\"option\");\n    option.value = e.detail.value;\n    option.textContent = e.detail.value;\n    option.selected = true;\n    select.appendChild(option);\n  });\n</script>\n",
      "summary": "Combobox with create option behavior that allows users to add new options and tags on the fly. Use when the option list is not exhaustive and users need to enter values that don't yet exist.",
      "description": "",
      "composition": false,
      "tags": [
        "pattern"
      ]
    },
    {
      "id": "combobox-form",
      "name": "Form",
      "template": "<form nve-layout=\"column gap:lg align:stretch\">\n  <nve-combobox style=\"--scroll-height: 220px\">\n    <label>label</label>\n    <input type=\"search\" name=\"input\" />\n    <select multiple name=\"select\" value=\"priority\">\n      <option value=\"status\"></option>\n      <option selected value=\"priority\"></option>\n      <option selected value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  <div nve-layout=\"row gap:xs\">\n    <nve-button type=\"button\">set</nve-button>\n    <nve-button type=\"reset\">reset</nve-button>\n    <nve-button type=\"submit\">submit</nve-button>\n  </div>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"form\");\n  const select = document.querySelector(\"select\");\n  const input = document.querySelector(\"input\");\n  const btn = document.querySelector(\"[type=button]\");\n  form.addEventListener(\"submit\", (e) => {\n    e.preventDefault();\n    const formData = new FormData(form);\n    console.log(\"input: \", formData.get(\"input\"));\n    console.log(\"select: \", formData.get(\"select\"));\n    console.log(\n      \"selectedOptions: \",\n      Array.from(select.selectedOptions).map((o) => o.value),\n    );\n  });\n  btn.addEventListener(\"click\", () => {\n    select.value = \"status\";\n    select.options[0].selected = true;\n    input.value = \"test\";\n  });\n</script>\n",
      "summary": "Complete form integration showing combobox with form submission, reset, and programmatic value setting.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "combobox-dynamic-typeahead-search",
      "name": "DynamicTypeaheadSearch",
      "template": "<nve-combobox id=\"combobox\">\n  <label>GPU Search</label>\n  <input type=\"search\" placeholder=\"Type to search…\" />\n  <datalist>\n    <option disabled selected></option>\n  </datalist>\n</nve-combobox>\n<script type=\"module\">\n  const combobox = document.getElementById(\"combobox\");\n  const input = combobox.querySelector(\"input\");\n  const datalist = combobox.querySelector(\"datalist\");\n  let controller = null;\n  input.addEventListener(\"input\", async () => {\n    if (controller) controller.abort();\n    controller = new AbortController();\n    const query = input.value.trim();\n    if (!query) {\n      datalist.innerHTML = \"\";\n      return;\n    }\n    try {\n      const results = await mockFetch(query, controller.signal);\n      datalist.innerHTML = results.map((v) => '<option value=\"' + v + '\">').join(\"\");\n    } catch (err) {\n      if (err.name !== \"AbortError\") datalist.innerHTML = \"\";\n    }\n  });\n  function mockFetch(query, signal) {\n    return new Promise((resolve, reject) => {\n      const timer = setTimeout(() => {\n        resolve(\n          [\"A100 GPU\", \"H100 GPU\", \"H200 GPU\", \"DGX A100\", \"DGX H100\", \"CUDA Toolkit\"].filter((v) =>\n            v.toLowerCase().startsWith(query.toLowerCase()),\n          ),\n        );\n      }, 500);\n      signal.addEventListener(\"abort\", () => {\n        clearTimeout(timer);\n        reject(new DOMException(\"Aborted\", \"AbortError\"));\n      });\n    });\n  }\n</script>\n",
      "summary": "Fetches options asynchronously as the user types, cancelling stale requests with AbortController. Use for server-backed search where the full option set is too large to load up front.",
      "description": "",
      "composition": false,
      "tags": [
        "pattern"
      ]
    },
    {
      "id": "combobox-infinite-scroll",
      "name": "InfiniteScroll",
      "template": "<nve-combobox id=\"infinite-scroll-combo\" style=\"--scroll-height: 200px\">\n  <label>GPU Models</label>\n  <input type=\"search\" placeholder=\"Scroll to load more…\" />\n  <datalist id=\"infinite-scroll-list\"></datalist>\n</nve-combobox>\n<script type=\"module\">\n  const combo = document.getElementById(\"infinite-scroll-combo\");\n  const datalist = document.getElementById(\"infinite-scroll-list\");\n  let loading = false;\n  async function loadBatch() {\n    if (loading) return;\n    loading = true;\n    const items = await new Promise((resolve) =>\n      setTimeout(\n        () => resolve(Array.from({ length: 100 }, (_, i) => \"GPU Model \" + (datalist.options.length + i + 1))),\n        300,\n      ),\n    );\n    datalist.append(...items.map((v) => new Option(v)));\n    loading = false;\n  }\n  loadBatch();\n  combo.addEventListener(\"scroll\", (e) => {\n    if (e.detail.scrollHeight - e.detail.scrollTop - e.detail.clientHeight <= 128) {\n      loadBatch();\n    }\n  });\n</script>\n",
      "summary": "Infinite scroll combobox loading, using the scroll event to append options as the user nears the end of the list. Use for server-backed datasets where loading all options up front is impractical.",
      "description": "",
      "composition": false,
      "tags": [
        "pattern"
      ]
    },
    {
      "id": "combobox-performance",
      "name": "Performance",
      "template": "<nve-combobox id=\"performance-combobox\">\n  <input type=\"search\" aria-label=\"performance test\" />\n  <datalist></datalist>\n</nve-combobox>\n<script type=\"module\">\n  const datalist = document.querySelector(\"#performance-combobox datalist\");\n  const options = new Array(1000).fill(\"\").map((_, i) => {\n    const option = document.createElement(\"option\");\n    option.value = i + \" item\";\n    return option;\n  });\n  datalist.append(...options);\n</script>\n",
      "summary": "Performance test with 1000 options to show filtering efficiency with large datasets.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case",
        "performance"
      ]
    },
    {
      "id": "combobox-performance-select",
      "name": "PerformanceSelect",
      "template": "<div nve-layout=\"pad:lg\">\n  <nve-combobox id=\"performance-combobox\">\n    <input type=\"search\" aria-label=\"performance test\" />\n    <select multiple></select>\n  </nve-combobox>\n</div>\n<script type=\"module\">\n  const select = document.querySelector(\"#performance-combobox select\");\n  const options = new Array(1000).fill(\"\").map((_, i) => {\n    const option = document.createElement(\"option\");\n    option.value = i + \" item\";\n    return option;\n  });\n  select.append(...options);\n</script>\n",
      "summary": "Performance test with 1000 options to show filtering efficiency with large datasets.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case",
        "performance"
      ]
    },
    {
      "id": "combobox-dynamic-options",
      "name": "DynamicOptions",
      "template": "<nve-combobox id=\"dynamic-options-combobox\">\n  <input type=\"search\" aria-label=\"performance test\" />\n  <datalist>\n    <option>default</option>\n  </datalist>\n</nve-combobox>\n<script type=\"module\">\n  let i = 0;\n  setInterval(function () {\n    if (i > 100) clearInterval(interval);\n    const datalist = document.querySelector(\"#dynamic-options-combobox datalist\");\n    const option = document.createElement(\"option\");\n    option.value = i + \" item\";\n    datalist.append(option);\n    i++;\n    console.log(\"append\");\n  }, 1000);\n</script>\n",
      "summary": "Dynamic options with datalist and select variants of combobox.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "combobox-filter-demo",
      "name": "FilterDemo",
      "template": "<combobox-demo></combobox-demo>\n",
      "summary": "Interactive demo showing progressive filter chips with dynamic combobox creation for complex filtering interfaces.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    }
  ]
}