@nvidia-elements/core 0.0.1 → 0.0.3

package/dist/combobox/combobox.examples.json

@@ -0,0 +1,233 @@
+{
+  "element": "nve-combobox",
+  "entrypoint": "@nvidia-elements/core/combobox/combobox.examples.json",
+  "items": [
+    {
+      "id": "core-combobox_default",
+      "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": "core-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": "core-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": "core-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": "core-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": "core-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": "core-combobox_empty-default",
+      "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": "core-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": "core-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": "core-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": "core-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": "core-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": "core-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": "core-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": "core-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": "core-combobox_no-tags",
+      "name": "NoTags",
+      "template": "<form id=\"notags\" nve-layout=\"column gap:lg align:stretch\">\n  <nve-combobox notags>\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(\"#notags\");\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": "core-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": "core-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": "core-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 bottom. Use for server-backed datasets where loading all options up front is impractical.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "pattern"
+      ]
+    },
+    {
+      "id": "core-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": "core-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": "core-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": "core-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"
+      ]
+    }
+  ]
+}

package/dist/combobox/combobox.js

@@ -0,0 +1,6 @@
+//#region src/combobox/combobox.css?inline
+var e = ":host{--scroll-height: 25vh;--_input-background: var(--background);contain:initial}[name=caret]{right:var(--nve-ref-size-300);align-self:center;pointer-events:none;position:absolute}[internal-host]:has(nve-menu:focus-within) [input]{outline:0!important}:host(:state(selected)){--font-weight: var(--nve-ref-font-weight-semibold)}:host(:state(multiple)){--padding: 0 var(--nve-ref-size-100)}:host(:state(multiple)) [input]{padding:var(--padding)}.tags{width:fit-content;display:flex;gap:var(--nve-ref-space-xxs);align-items:center}.tags-label{padding:0 var(--nve-ref-size-200);font-size:var(--font-size);cursor:var(--cursor);font-weight:var(--font-weight);text-wrap:nowrap;display:none;align-items:center;pointer-events:none}:host(:state(multiple-overflow)) .tags{opacity:0;pointer-events:none;position:absolute}:host(:state(multiple-overflow)) .tags-label{display:flex}nve-tag{--background: color-mix(in oklab, var(--color) 15%, var(--_input-background));--padding: var(--nve-ref-size-100) var(--nve-ref-size-200);--cursor: pointer !important}::slotted(select){display:none!important}:host([status=\"error\"]),:host(:state(invalid)),:host(:state(error)){--border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-danger-emphasis-color)}:host([status=\"success\"]),:host(:state(success)){--border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-success-emphasis-color)}:host(:state(disabled)){--border: var(--nve-ref-border-width-md) solid transparent}[name=prefix-icon]{display:contents}nve-dropdown{--padding: var(--nve-ref-size-200)}nve-menu{contain:content;--max-height: var(--scroll-height)}nve-menu-item{--text-transform: initial;contain:content;content-visibility:auto}[internal-host]:has([matches]) nve-menu-item{--color: var(--nve-sys-text-muted-color)}nve-menu-item nve-icon{--color: inherit}input[type=checkbox]{accent-color:var(--nve-sys-accent-secondary-background)}nve-checkbox:not(:state(disabled)){--border-color: var(--nve-ref-border-color-emphasis)}nve-menu-item:not(:state(selected)) nve-icon[name=check]{opacity:0}slot:not([name]),slot[name*=option-]{display:contents}[matches]{font-weight:var(--nve-ref-font-weight-medium);color:var(--nve-sys-text-emphasis-color)}[name=footer]{display:none;min-height:var(--nve-ref-size-900);margin:calc(var(--nve-ref-size-200) * -1);width:calc(100% + calc(var(--nve-ref-size-200) * 2));border-top:var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);padding:0 var(--nve-ref-size-200);gap:var(--nve-ref-space-sm);justify-content:center;align-items:center}:host(:state(footer-content)) [name=footer]{display:flex}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=combobox.js.map

package/dist/combobox/combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.js","names":[],"sources":["../../src/combobox/combobox.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --scroll-height: 25vh;\n  --_input-background: var(--background);\n  contain: initial;\n}\n\n[name='caret'] {\n  right: var(--nve-ref-size-300);\n  align-self: center;\n  pointer-events: none;\n  position: absolute;\n}\n\n[internal-host]:has(nve-menu:focus-within) [input] {\n  outline: 0 !important;\n}\n\n:host(:state(selected)) {\n  --font-weight: var(--nve-ref-font-weight-semibold);\n}\n\n:host(:state(multiple)) {\n  --padding: 0 var(--nve-ref-size-100);\n}\n\n:host(:state(multiple)) [input] {\n  padding: var(--padding);\n}\n\n.tags {\n  width: fit-content;\n  display: flex;\n  gap: var(--nve-ref-space-xxs);\n  align-items: center;\n}\n\n.tags-label {\n  padding: 0 var(--nve-ref-size-200);\n  font-size: var(--font-size);\n  cursor: var(--cursor);\n  font-weight: var(--font-weight);\n  text-wrap: nowrap;\n  display: none;\n  align-items: center;\n  pointer-events: none;\n}\n\n:host(:state(multiple-overflow)) .tags {\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n}\n\n:host(:state(multiple-overflow)) .tags-label {\n  display: flex;\n}\n\nnve-tag {\n  --background: color-mix(in oklab, var(--color) 15%, var(--_input-background));\n  --padding: var(--nve-ref-size-100) var(--nve-ref-size-200);\n  --cursor: pointer !important;\n}\n\n::slotted(select) {\n  display: none !important;\n}\n\n:host([status='error']),\n:host(:state(invalid)),\n:host(:state(error)) {\n  --border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-danger-emphasis-color);\n}\n\n:host([status='success']),\n:host(:state(success)) {\n  --border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-success-emphasis-color);\n}\n\n:host(:state(disabled)) {\n  --border: var(--nve-ref-border-width-md) solid transparent;\n}\n\n[name='prefix-icon'] {\n  display: contents;\n}\n\nnve-dropdown {\n  --padding: var(--nve-ref-size-200);\n}\n\nnve-menu {\n  contain: content;\n  --max-height: var(--scroll-height);\n}\n\nnve-menu-item {\n  --text-transform: initial;\n  contain: content;\n  content-visibility: auto;\n}\n\n[internal-host]:has([matches]) nve-menu-item {\n  --color: var(--nve-sys-text-muted-color);\n}\n\nnve-menu-item nve-icon {\n  --color: inherit;\n}\n\ninput[type='checkbox'] {\n  accent-color: var(--nve-sys-accent-secondary-background);\n}\n\nnve-checkbox:not(:state(disabled)) {\n  --border-color: var(--nve-ref-border-color-emphasis);\n}\n\nnve-menu-item:not(:state(selected)) nve-icon[name='check'] {\n  opacity: 0;\n}\n\nslot:not([name]),\nslot[name*='option-'] {\n  display: contents;\n}\n\n[matches] {\n  font-weight: var(--nve-ref-font-weight-medium);\n  color: var(--nve-sys-text-emphasis-color);\n}\n\n[name='footer'] {\n  display: none;\n  min-height: var(--nve-ref-size-900);\n  margin: calc(var(--nve-ref-size-200) * -1);\n  width: calc(100% + calc(var(--nve-ref-size-200) * 2));\n  border-top: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  padding: 0 var(--nve-ref-size-200);\n  gap: var(--nve-ref-space-sm);\n  justify-content: center;\n  align-items: center;\n}\n\n:host(:state(footer-content)) [name='footer'] {\n  display: flex;\n}\n"],"mappings":""}

package/dist/combobox/combobox2.js

@@ -0,0 +1,247 @@
+import { focusElementTimeout as e } from "../internal/utils/focus.js";
+import { getDisplayValue as t, getElementUpdate as n, getPropertyChanges as r } from "../internal/utils/dom.js";
+import { createLightDismiss as i } from "../internal/utils/keynav.js";
+import { __decorate as a } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { scopedRegistry as o } from "../internal/decorators/scoped-registry.js";
+import { useStyles as s } from "../internal/styles/index.js";
+import { Icon as c } from "../icon/icon2.js";
+import { Control as l } from "../forms/control/control2.js";
+import { inputStyles as u } from "../input/input2.js";
+import { Checkbox as d } from "../checkbox/checkbox2.js";
+import { Tag as f } from "../tag/tag2.js";
+import { Menu as p } from "../menu/menu2.js";
+import { MenuItem as m } from "../menu/menu-item2.js";
+import { Dropdown as h } from "../dropdown/dropdown2.js";
+import g from "./combobox.js";
+import { html as _, isServer as v, nothing as y } from "lit";
+import { property as b } from "lit/decorators/property.js";
+import { ifDefined as x } from "lit/directives/if-defined.js";
+//#region src/combobox/combobox.ts
+var S = class extends l {
+	constructor(...e) {
+		super(...e), this._associateDatalist = !1;
+	}
+	static {
+		this.styles = s([
+			...l.styles,
+			u,
+			g
+		]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-combobox",
+			version: "0.0.3"
+		};
+	}
+	static {
+		this.elementDefinitions = {
+			[d.metadata.tag]: d,
+			[c.metadata.tag]: c,
+			[h.metadata.tag]: h,
+			[p.metadata.tag]: p,
+			[m.metadata.tag]: m,
+			[f.metadata.tag]: f
+		};
+	}
+	#e;
+	get #t() {
+		return this.#e ||= this.shadowRoot ? this.shadowRoot.querySelector("slot")?.assignedElements({ flatten: !0 })?.find((e) => e.tagName === "DATALIST" || e.tagName === "SELECT") ?? this.querySelector("datalist, select") : null, this.#e;
+	}
+	#n;
+	get #r() {
+		return this.#n ||= this.shadowRoot ? this.shadowRoot.querySelector("slot")?.assignedElements({ flatten: !0 })?.find((e) => e.tagName === "SELECT") ?? this.querySelector("select") : null, this.#n;
+	}
+	get #i() {
+		return Array.from(this.#t?.options ? this.#t.options : []);
+	}
+	get #a() {
+		return Array.from(this.shadowRoot.querySelectorAll(m.metadata.tag));
+	}
+	get #o() {
+		return this.shadowRoot.querySelector(h.metadata.tag);
+	}
+	get #s() {
+		return this.shadowRoot.querySelector("[input]");
+	}
+	get #c() {
+		return this.shadowRoot.querySelector(".tags");
+	}
+	get #l() {
+		return this.#i.find((e) => !e.disabled && !e.hidden);
+	}
+	get #u() {
+		return !!this.querySelector("[slot=\"footer\"]");
+	}
+	#d = [];
+	#f = !1;
+	get prefixContent() {
+		return this.#r?.multiple && !this.notags ? _`<div class="tags-label" aria-hidden="true">${this.#r.selectedOptions.length} ${this.i18n.selected}</div><div class="tags">${Array.from(this.#r.selectedOptions).map((e) => _`<nve-tag part="tag" readonly="readonly" color="gray-slate" closable .value="${e.value}" @click="${() => this.#A(e)}">${t(e)}</nve-tag>`)}</div>` : _`<slot name="prefix-icon"></slot>`;
+	}
+	get #p() {
+		return (this.#t?.options?.length ?? 0) > 50;
+	}
+	get #m() {
+		return !this._internals.states.has("dirty");
+	}
+	get suffixContent() {
+		if (v) return y;
+		let e = this.#i, n = this.#p, r = this.#m, i = e.filter((e) => !e.hidden).filter((e) => !(e.value === "" && e.disabled)), a = i.filter((e) => !e.disabled).length === 0;
+		return _`<nve-dropdown part="dropdown" .popoverType="${"manual"}" .modal="${!1}" @open="${this.#T}" @close="${this.#P}" hidden .anchor="${this.#s}" .trigger="${this.#s}" position="bottom"><nve-menu part="menu" role="listbox" style="--width:100%;--min-width:fit-content" aria-label="${x(this.i18n.select)}">${i.map((e) => _`<nve-menu-item part="menu-item" .option="${t(e)}" role="option" @click="${() => this.#A(e)}" ?selected="${e.selected}" aria-selected="${e.selected ? "true" : "false"}" ?disabled="${e.disabled}" aria-label="${t(e)}">${this.#h(e)} ${n || r ? t(e) : _`<span role="presentation">${(e.label ? e.label : e.value)?.split("")?.map((e, t) => _`<span ?matches="${this.#j(e, t)}">${e}</span>`)}</span>`}</nve-menu-item>`)} ${a ? _`<nve-menu-item part="menu-item" .value="${""}" disabled="disabled">${this.i18n.noResults}</nve-menu-item>` : y}</nve-menu><slot name="footer"></slot></nve-dropdown>`;
+	}
+	#h(e) {
+		let t = this.#r;
+		return t?.multiple && this.#p ? _`<input aria-hidden="true" type="checkbox" .checked="${e.selected}" .disabled="${e.disabled}" .name="${e.selected ? "check" : void 0}">` : t?.multiple ? _`<nve-checkbox part="checkbox"><input aria-hidden="true" type="checkbox" .checked="${e.selected}" .disabled="${e.disabled}" .name="${e.selected ? "check" : void 0}"></nve-checkbox>` : t ? _`<nve-icon part="icon" name="check" size="sm"></nve-icon>` : y;
+	}
+	async firstUpdated(e) {
+		super.firstUpdated(e), this.shadowRoot.addEventListener("slotchange", () => {
+			this.#e = null, this.#n = null, this.#C();
+		}), await this.updateComplete, this.#g(), this.#_(), this.#E(), this.#D(), this.#k(), this.#R(), this.#B(), await this.#O(), this.input.setAttribute("list", ""), this.input.autocomplete = "off";
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		let e = new MutationObserver((e) => {
+			e.some((e) => e.type === "childList" && e.target === this) && (this.#e = null, this.#n = null), this.#C();
+		});
+		e.observe(this, {
+			childList: !0,
+			subtree: !0,
+			attributes: !0,
+			attributeFilter: [
+				"selected",
+				"disabled",
+				"value"
+			],
+			characterData: !0
+		}), this.#d.push(e);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.#d.forEach((e) => e.disconnect());
+	}
+	reset() {
+		this.#o.hidePopover(), this.#r && (this.#r.selectedIndex = -1), super.reset();
+	}
+	selectAll() {
+		this.#i.forEach((e) => e.selected = !0), this.requestUpdate(), this.#r.dispatchEvent(new Event("input", { bubbles: !0 })), this.#r.dispatchEvent(new Event("change", { bubbles: !0 }));
+	}
+	#g() {
+		this.#r && !this.#r.multiple && (this.#v(), this.#b(), this.#S());
+	}
+	#_() {
+		this.#r?.multiple && (this.#v(), this.#b(), this.#S(), this._internals.states.add("multiple"));
+	}
+	#v() {
+		let e = Array.from(this.#r.selectedOptions).find((e) => e.hasAttribute("selected"));
+		e && !this.#r.multiple && !this.input.defaultValue && (this.input.value = t(e));
+	}
+	#y() {
+		!this.#r.multiple && !this.input.defaultValue && (this.input.value = t(Array.from(this.#r.selectedOptions).find((e) => e.value === this.#r.value)));
+	}
+	#b() {
+		this.#d.push(n(this.#r, "value", () => {
+			this.#y(), this.requestUpdate();
+		}));
+	}
+	#x = /* @__PURE__ */ new Set();
+	#S() {
+		this.#i.forEach((e) => {
+			this.#x.has(e) || (this.#x.add(e), r(e, "selected", () => this.requestUpdate()));
+		});
+	}
+	#C() {
+		this.#f || (this.#f = !0, queueMicrotask(() => {
+			this.#f = !1, this.#w(), this.#S(), this.requestUpdate();
+		}));
+	}
+	#w() {
+		let e = new Set(this.#i);
+		for (let t of this.#x) e.has(t) || this.#x.delete(t);
+	}
+	#T(e) {
+		e.target.hidden = !1;
+	}
+	#E() {
+		this.addEventListener("keydown", (e) => {
+			e.code === "Tab" && (this.#l && this.#o.matches(":popover-open") && this.input.value !== "" && (e.preventDefault(), this.#I(this.#a[0].option), this.#L(this.#i.find((e) => (e.label ? e.label : e.value) === this.#a[0].option))), this.#o.hidePopover());
+		});
+	}
+	#D() {
+		this.input.addEventListener("input", () => this.#M()), this.shadowRoot.addEventListener("slotchange", () => this.#M());
+	}
+	async #O() {
+		let e = this.#o;
+		await e.updateComplete, i({
+			element: e.shadowRoot.querySelector("[internal-host]"),
+			focusElement: this.input
+		}, () => {
+			this.#o.matches(":popover-open") && this.#o.hidePopover();
+		});
+	}
+	#k() {
+		this.input.addEventListener("pointerdown", () => {
+			this.#N();
+		}), this.addEventListener("keydown", (e) => {
+			e.code !== "Tab" && e.code !== "Escape" && this.#N(), e?.code === "ArrowDown" && this.getRootNode().activeElement === this.input && (this.#o.tabIndex = 0, this.#a[0]?.focus(), e.preventDefault());
+		});
+	}
+	#A(n) {
+		this.#r?.multiple || (this.#I(t(n)), this.#o.hidePopover(), e(this.input)), this.#r && (n.selected = !n.selected, this.#L(n)), this.requestUpdate();
+	}
+	#j(e, t) {
+		return this.#l ? this.input.value.toLowerCase()[t]?.toLowerCase() === e.toLowerCase() : !1;
+	}
+	#M() {
+		this.#i.forEach((e) => {
+			e.textContent.trim().length ? e.hidden = !e.textContent.toLocaleLowerCase().includes(this.input?.value.toLowerCase()) : e.hidden = !e.value.toLocaleLowerCase().includes(this.input?.value.toLowerCase());
+		}), this.requestUpdate();
+	}
+	#N() {
+		!this.input.disabled && !this.#o.matches(":popover-open") && (this.#r ? (this.#i.forEach((e) => e.hidden = !1), this.requestUpdate()) : this.#M(), this.#o.style.setProperty("--min-width", `${this.#s.getBoundingClientRect().width}px`), this.#o.showPopover({ source: this.#s }), this.#o.tabIndex = -1);
+	}
+	#P() {
+		this.#o.hidePopover(), this._internals.states.delete("dirty"), this.#F();
+	}
+	#F() {
+		this.#r && !this.#r.multiple && !this.#i.filter((e) => !(e.value === "" && e.disabled)).find((e) => t(e) === this.input.value) && (this.#i.forEach((e) => e.selected = !1), this.#I(""), this.#L({
+			value: "",
+			selected: !1
+		}));
+	}
+	#I(e) {
+		this.input.value = e, this.input.dispatchEvent(new Event("input", { bubbles: !0 })), this.input.dispatchEvent(new Event("change", { bubbles: !0 }));
+	}
+	#L(e) {
+		let t = [...this.#i, {
+			value: "",
+			selected: null
+		}].find((t) => t.value === e.value);
+		t && (t.selected = e.selected ?? null), this.#r && !this.#r.multiple && (this.#r.value = e.value), this.#r?.dispatchEvent(new Event("input", { bubbles: !0 })), this.#r?.dispatchEvent(new Event("change", { bubbles: !0 }));
+	}
+	#R() {
+		if (this.#r?.multiple && !this.notags) {
+			this.#r.selectedOptions.length > 1 && this.#z(this.#c.getBoundingClientRect().width);
+			let e = new ResizeObserver((e) => this.#z(e[0].contentRect.width));
+			this.#d.push(e), e.observe(this.#c);
+		}
+	}
+	#z(e) {
+		this.#r?.multiple && e > this.#s.getBoundingClientRect().width - 100 ? this._internals.states.add("multiple-overflow") : this._internals.states.delete("multiple-overflow");
+	}
+	#B() {
+		this.#V(), this.shadowRoot.addEventListener("slotchange", () => this.#V());
+	}
+	#V() {
+		this.#u ? this._internals.states.add("footer-content") : this._internals.states.delete("footer-content");
+	}
+};
+a([b({
+	type: String,
+	reflect: !0
+})], S.prototype, "container", void 0), a([b({
+	type: Boolean,
+	reflect: !0
+})], S.prototype, "notags", void 0), S = a([o()], S);
+//#endregion
+export { S as Combobox };
+
+//# sourceMappingURL=combobox2.js.map

package/dist/combobox/combobox2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox2.js","names":["#datalist","#_datalist","#select","#_select","#options","#items","#dropdown","#input","#tags","#hasAvailableOptions","#hasFooterContent","#selectValue","#largeOptionsList","#isPristine","#onDropdownOpen","#closeListBox","#getOptionCheckbox","#characterAtIndexMatches","#onSlottedChildMutation","#setupSingleSelect","#setupMultipleSelect","#setupAutoCompleteKeyEvents","#setupMenuItemUpdateEvents","#setupOpenKeyEvents","#setupOverflowListener","#setupSlotStates","#setupLightDismiss","#observers","#setupInitialValue","#syncSelectValueStates","#syncOptionSelectedStates","#updateInputValue","#trackedOptions","#syncPending","#cleanupStaleTrackedOptions","#setInputValue","#setSelectValue","#filterOptions","#openListBox","#validateSingleSelectValue","#updateMultipleOverflow","#setSlotStates"],"sources":["../../src/combobox/combobox.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, isServer, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport {\n  createLightDismiss,\n  focusElementTimeout,\n  getDisplayValue,\n  getElementUpdate,\n  getPropertyChanges,\n  scopedRegistry,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { inputStyles } from '@nvidia-elements/core/input';\nimport { Menu, MenuItem } from '@nvidia-elements/core/menu';\nimport { Dropdown } from '@nvidia-elements/core/dropdown';\nimport { Tag } from '@nvidia-elements/core/tag';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { Checkbox } from '@nvidia-elements/core/checkbox';\nimport styles from './combobox.css?inline';\n\n/**\n * @element nve-combobox\n * @description An editable combobox with autocomplete behavior and selection support.\n * @since 0.17.0\n * @entrypoint \\@nvidia-elements/core/combobox\n * @slot - default slot for an input and a datalist/select element\n * @slot prefix-icon - slot for icon before the input\n * @slot footer - slot for dropdown footer content\n * @cssprop --scroll-height\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --background\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --cursor\n * @cssprop --font-weight\n * @cssprop --width\n * @cssprop --border-color\n * @cssprop --max-height\n * @cssprop --text-transform\n * @csspart tag - The tag element for selected items\n * @csspart dropdown - The dropdown popup element\n * @csspart menu - The menu element\n * @csspart menu-item - The menu item elements\n * @csspart checkbox - The checkbox element\n * @csspart icon - The icon element\n * @event scroll - Fires when the user scrolls the dropdown option list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`.\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/\n */\n@scopedRegistry()\nexport class Combobox extends Control implements ContainerElement {\n  /**\n   * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.\n   * Use when embedding within another container such as a toolbar.\n   */\n  @property({ type: String, reflect: true }) container: 'flat';\n\n  /** Disable rendering of inline tags for many-item select */\n  @property({ type: Boolean, reflect: true }) notags: boolean;\n\n  static styles = useStyles([...Control.styles, inputStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-combobox',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Checkbox.metadata.tag]: Checkbox,\n    [Icon.metadata.tag]: Icon,\n    [Dropdown.metadata.tag]: Dropdown,\n    [Menu.metadata.tag]: Menu,\n    [MenuItem.metadata.tag]: MenuItem,\n    [Tag.metadata.tag]: Tag\n  };\n\n  /**\n   * If a <select> exists, on focus all options show by default.\n   * If a <datalist> exists, on focus only options that match the current input value show.\n   */\n\n  #_datalist: HTMLSelectElement | null;\n  get #datalist(): HTMLSelectElement | null {\n    if (!this.#_datalist) {\n      this.#_datalist = this.shadowRoot\n        ? ((this.shadowRoot\n            .querySelector('slot')\n            ?.assignedElements({ flatten: true })\n            ?.find(i => i.tagName === 'DATALIST' || i.tagName === 'SELECT') ??\n            this.querySelector('datalist, select')) as HTMLSelectElement)\n        : null;\n    }\n    return this.#_datalist;\n  }\n\n  #_select: HTMLSelectElement | null;\n  get #select(): HTMLSelectElement | null {\n    if (!this.#_select) {\n      this.#_select = this.shadowRoot\n        ? ((this.shadowRoot\n            .querySelector('slot')\n            ?.assignedElements({ flatten: true })\n            ?.find(i => i.tagName === 'SELECT') ?? this.querySelector('select')) as HTMLSelectElement)\n        : null;\n    }\n    return this.#_select;\n  }\n\n  get #options(): HTMLOptionElement[] {\n    return Array.from(this.#datalist?.options ? this.#datalist.options : []);\n  }\n\n  get #items() {\n    return Array.from(this.shadowRoot!.querySelectorAll<MenuItem>(MenuItem.metadata.tag));\n  }\n\n  get #dropdown() {\n    return this.shadowRoot!.querySelector<Dropdown>(Dropdown.metadata.tag);\n  }\n\n  get #input() {\n    return this.shadowRoot!.querySelector('[input]');\n  }\n\n  get #tags() {\n    return this.shadowRoot!.querySelector('.tags');\n  }\n\n  get #hasAvailableOptions() {\n    return this.#options.find(o => !o.disabled && !o.hidden);\n  }\n\n  get #hasFooterContent() {\n    return !!this.querySelector('[slot=\"footer\"]');\n  }\n\n  #observers: (MutationObserver | ResizeObserver)[] = [];\n  #syncPending = false;\n\n  protected _associateDatalist = false;\n\n  protected get prefixContent() {\n    return this.#select?.multiple && !this.notags\n      ? html`\n    <div class=\"tags-label\" aria-hidden=\"true\">${this.#select.selectedOptions.length} ${this.i18n.selected}</div>\n    <div class=\"tags\">\n      ${Array.from<HTMLOptionElement>(this.#select.selectedOptions).map(\n        o => html`\n      <nve-tag part=\"tag\" readonly color=\"gray-slate\" closable .value=${o.value} @click=${() => this.#selectValue(o)}>${getDisplayValue(o)}</nve-tag>`\n      )}\n    </div>`\n      : html`<slot name=\"prefix-icon\"></slot>`;\n  }\n\n  get #largeOptionsList() {\n    return (this.#datalist?.options?.length ?? 0) > 50;\n  }\n\n  get #isPristine() {\n    return !this._internals.states.has('dirty');\n  }\n\n  protected get suffixContent() {\n    if (isServer) return nothing;\n    const options = this.#options;\n    const largeOptionsList = this.#largeOptionsList;\n    const isPristine = this.#isPristine;\n    const visibleOptions = options.filter(o => !o.hidden).filter(o => !(o.value === '' && o.disabled));\n    const hasNoResults = visibleOptions.filter(o => !o.disabled).length === 0;\n    return html`\n    <nve-dropdown part=\"dropdown\" .popoverType=${'manual'} .modal=${false} @open=${this.#onDropdownOpen} @close=${this.#closeListBox} hidden .anchor=${this.#input as HTMLElement} .trigger=${this.#input as HTMLElement} position=\"bottom\">\n      <nve-menu part=\"menu\" role=\"listbox\" style=\"--width: 100%; --min-width: fit-content\" aria-label=${ifDefined(this.i18n.select)}>\n        ${visibleOptions.map(\n          o => html`\n          <nve-menu-item part=\"menu-item\" .option=${getDisplayValue(o)} role=\"option\" @click=${() => this.#selectValue(o)} ?selected=${o.selected} aria-selected=${o.selected ? 'true' : 'false'} ?disabled=${o.disabled} aria-label=${getDisplayValue(o)}>\n            ${this.#getOptionCheckbox(o)}\n            ${largeOptionsList || isPristine ? getDisplayValue(o) : html`<span role=\"presentation\">${(o.label ? o.label : o.value)?.split('')?.map((c, ci) => html`<span ?matches=${this.#characterAtIndexMatches(c, ci)}>${c}</span>`)}</span>`}\n          </nve-menu-item>`\n        )}\n        ${hasNoResults ? html`<nve-menu-item part=\"menu-item\" .value=${''} disabled>${this.i18n.noResults}</nve-menu-item>` : nothing}\n      </nve-menu>\n      <slot name=\"footer\"></slot>\n    </nve-dropdown>`;\n  }\n\n  #getOptionCheckbox(o: HTMLOptionElement) {\n    const select = this.#select;\n    if (select?.multiple && this.#largeOptionsList) {\n      return html`<input aria-hidden=\"true\" type=\"checkbox\" .checked=${o.selected} .disabled=${o.disabled} .name=${o.selected ? 'check' : undefined} />`;\n    } else if (select?.multiple) {\n      /* eslint-disable @nvidia-elements/lint/no-missing-control-label */\n      return html`<nve-checkbox part=\"checkbox\"><input aria-hidden=\"true\" type=\"checkbox\" .checked=${o.selected} .disabled=${o.disabled} .name=${o.selected ? 'check' : undefined} /></nve-checkbox>`;\n    } else if (select) {\n      return html`<nve-icon part=\"icon\" name=\"check\" size=\"sm\"></nve-icon>`;\n    } else {\n      return nothing;\n    }\n  }\n\n  async firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n    this.shadowRoot!.addEventListener('slotchange', () => {\n      this.#_datalist = null;\n      this.#_select = null;\n      this.#onSlottedChildMutation();\n    });\n    await this.updateComplete;\n    this.#setupSingleSelect();\n    this.#setupMultipleSelect();\n    this.#setupAutoCompleteKeyEvents();\n    this.#setupMenuItemUpdateEvents();\n    this.#setupOpenKeyEvents();\n    this.#setupOverflowListener();\n    this.#setupSlotStates();\n    await this.#setupLightDismiss();\n    this.input.setAttribute('list', '');\n    this.input.autocomplete = 'off';\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    const observer = new MutationObserver(mutations => {\n      if (mutations.some(m => m.type === 'childList' && m.target === this)) {\n        this.#_datalist = null;\n        this.#_select = null;\n      }\n      this.#onSlottedChildMutation();\n    });\n    observer.observe(this, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['selected', 'disabled', 'value'],\n      characterData: true\n    });\n    this.#observers.push(observer);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#observers.forEach(observer => observer.disconnect());\n  }\n\n  reset() {\n    this.#dropdown!.hidePopover();\n    if (this.#select) {\n      this.#select.selectedIndex = -1;\n    }\n    super.reset();\n  }\n\n  /** Select all options provided */\n  selectAll() {\n    this.#options.forEach(o => (o.selected = true));\n    this.requestUpdate();\n    this.#select!.dispatchEvent(new Event('input', { bubbles: true }));\n    this.#select!.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  #setupSingleSelect() {\n    if (this.#select && !this.#select.multiple) {\n      this.#setupInitialValue();\n      this.#syncSelectValueStates();\n      this.#syncOptionSelectedStates();\n    }\n  }\n\n  #setupMultipleSelect() {\n    if (this.#select?.multiple) {\n      this.#setupInitialValue();\n      this.#syncSelectValueStates();\n      this.#syncOptionSelectedStates();\n      this._internals.states.add('multiple');\n    }\n  }\n\n  #setupInitialValue() {\n    const selected = Array.from(this.#select!.selectedOptions).find((o: HTMLOptionElement) =>\n      o.hasAttribute('selected')\n    );\n    if (selected && !this.#select!.multiple && !this.input.defaultValue) {\n      this.input.value = getDisplayValue(selected);\n    }\n  }\n\n  #updateInputValue() {\n    if (!this.#select!.multiple && !this.input.defaultValue) {\n      this.input.value = getDisplayValue(\n        Array.from(this.#select!.selectedOptions).find(o => o.value === this.#select!.value)!\n      );\n    }\n  }\n\n  #syncSelectValueStates() {\n    this.#observers.push(\n      getElementUpdate(this.#select!, 'value', () => {\n        this.#updateInputValue();\n        this.requestUpdate();\n      })\n    );\n  }\n\n  #trackedOptions = new Set<HTMLOptionElement>();\n  #syncOptionSelectedStates() {\n    this.#options.forEach(o => {\n      if (!this.#trackedOptions.has(o)) {\n        this.#trackedOptions.add(o);\n        getPropertyChanges(o, 'selected', () => this.requestUpdate());\n      }\n    });\n  }\n\n  #onSlottedChildMutation() {\n    if (!this.#syncPending) {\n      this.#syncPending = true;\n      queueMicrotask(() => {\n        this.#syncPending = false;\n        this.#cleanupStaleTrackedOptions();\n        this.#syncOptionSelectedStates();\n        this.requestUpdate();\n      });\n    }\n  }\n\n  #cleanupStaleTrackedOptions() {\n    const currentOptions = new Set(this.#options);\n    for (const tracked of this.#trackedOptions) {\n      if (!currentOptions.has(tracked)) {\n        this.#trackedOptions.delete(tracked);\n      }\n    }\n  }\n\n  #onDropdownOpen(e: Event) {\n    (e.target as HTMLElement).hidden = false;\n  }\n\n  #setupAutoCompleteKeyEvents() {\n    this.addEventListener('keydown', (e: KeyboardEvent) => {\n      if (e.code === 'Tab') {\n        if (this.#hasAvailableOptions && this.#dropdown!.matches(':popover-open') && this.input.value !== '') {\n          e.preventDefault();\n          // the menu item option property caches/stores the option value instead of value to prevent unnecessary lit lifecycle updates for each menu item\n          this.#setInputValue((this.#items[0] as MenuItem & { option: string }).option);\n          this.#setSelectValue(\n            this.#options.find(\n              o => (o.label ? o.label : o.value) === (this.#items[0] as MenuItem & { option: string }).option\n            )!\n          );\n        }\n        this.#dropdown!.hidePopover();\n      }\n    });\n  }\n\n  #setupMenuItemUpdateEvents() {\n    this.input.addEventListener('input', () => this.#filterOptions());\n    this.shadowRoot!.addEventListener('slotchange', () => this.#filterOptions());\n  }\n\n  async #setupLightDismiss() {\n    const dropdown = this.#dropdown!;\n    await dropdown.updateComplete;\n    const options = {\n      element: dropdown.shadowRoot!.querySelector<HTMLElement>('[internal-host]')!,\n      focusElement: this.input\n    };\n    createLightDismiss(options, () => {\n      if (this.#dropdown!.matches(':popover-open')) {\n        this.#dropdown!.hidePopover();\n      }\n    });\n  }\n\n  #setupOpenKeyEvents() {\n    this.input.addEventListener('pointerdown', () => {\n      this.#openListBox();\n    });\n\n    this.addEventListener('keydown', (e: KeyboardEvent) => {\n      if (e.code !== 'Tab' && e.code !== 'Escape') {\n        this.#openListBox();\n      }\n\n      if (e?.code === 'ArrowDown' && (this.getRootNode() as ShadowRoot).activeElement === this.input) {\n        this.#dropdown!.tabIndex = 0;\n        this.#items[0]?.focus();\n        e.preventDefault();\n      }\n    });\n  }\n\n  #selectValue(option: { selected?: boolean; label?: string; value?: string }) {\n    if (!this.#select?.multiple) {\n      this.#setInputValue(getDisplayValue(option));\n      this.#dropdown!.hidePopover();\n      focusElementTimeout(this.input);\n    }\n\n    if (this.#select) {\n      option.selected = !option.selected;\n      this.#setSelectValue(option);\n    }\n\n    this.requestUpdate();\n  }\n\n  #characterAtIndexMatches(character: string, index: number) {\n    if (this.#hasAvailableOptions) {\n      return this.input.value.toLowerCase()[index]?.toLowerCase() === character.toLowerCase();\n    }\n    return false;\n  }\n\n  #filterOptions() {\n    this.#options.forEach(option => {\n      const hasLabel = option.textContent!.trim().length;\n      if (hasLabel) {\n        const matchesLabel = option.textContent!.toLocaleLowerCase().includes(this.input?.value.toLowerCase());\n        option.hidden = !matchesLabel;\n      } else {\n        const matchesValue = option.value.toLocaleLowerCase().includes(this.input?.value.toLowerCase());\n        option.hidden = !matchesValue;\n      }\n    });\n    this.requestUpdate();\n  }\n\n  #openListBox() {\n    if (!this.input.disabled && !this.#dropdown!.matches(':popover-open')) {\n      if (this.#select) {\n        this.#options.forEach(option => (option.hidden = false));\n        this.requestUpdate();\n      } else {\n        this.#filterOptions();\n      }\n      this.#dropdown!.style.setProperty('--min-width', `${this.#input!.getBoundingClientRect().width}px`);\n      // explicitly provide source as the performance optimizations in the suffixContent getter prevent the dropdown from setting its anchor/trigger reliably\n      this.#dropdown!.showPopover({ source: this.#input as HTMLElement });\n      this.#dropdown!.tabIndex = -1;\n    }\n  }\n\n  #closeListBox() {\n    this.#dropdown!.hidePopover();\n    this._internals.states.delete('dirty');\n    this.#validateSingleSelectValue();\n  }\n\n  #validateSingleSelectValue() {\n    const invalidInputValue =\n      this.#select &&\n      !this.#select.multiple &&\n      !this.#options.filter(o => !(o.value === '' && o.disabled)).find(o => getDisplayValue(o) === this.input.value);\n    if (invalidInputValue) {\n      this.#options.forEach(o => (o.selected = false));\n      this.#setInputValue('');\n      this.#setSelectValue({ value: '', selected: false });\n    }\n  }\n\n  #setInputValue(value: string) {\n    this.input.value = value;\n    this.input.dispatchEvent(new Event('input', { bubbles: true }));\n    this.input.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  #setSelectValue(option: { value?: string; selected?: boolean }) {\n    const found = [...this.#options, { value: '', selected: null as boolean | null }].find(\n      o => o.value === option.value\n    );\n    if (found) found.selected = option.selected ?? null;\n\n    if (this.#select && !this.#select.multiple) {\n      this.#select.value = option.value!;\n    }\n\n    this.#select?.dispatchEvent(new Event('input', { bubbles: true }));\n    this.#select?.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  #setupOverflowListener() {\n    if (this.#select?.multiple && !this.notags) {\n      if (this.#select.selectedOptions.length > 1) {\n        // only calculate initial overflow if many tags exist\n        this.#updateMultipleOverflow(this.#tags!.getBoundingClientRect().width);\n      }\n      const observer = new ResizeObserver(entries => this.#updateMultipleOverflow(entries[0]!.contentRect.width));\n      this.#observers.push(observer);\n      observer.observe(this.#tags!);\n    }\n  }\n\n  #updateMultipleOverflow(tagWidth: number) {\n    const INPUT_MIN_WIDTH = 100;\n    if (this.#select?.multiple && tagWidth > this.#input!.getBoundingClientRect().width - INPUT_MIN_WIDTH) {\n      this._internals.states.add('multiple-overflow');\n    } else {\n      this._internals.states.delete('multiple-overflow');\n    }\n  }\n\n  #setupSlotStates() {\n    this.#setSlotStates();\n    this.shadowRoot!.addEventListener('slotchange', () => this.#setSlotStates());\n  }\n\n  #setSlotStates() {\n    if (this.#hasFooterContent) {\n      this._internals.states.add('footer-content');\n    } else {\n      this._internals.states.delete('footer-content');\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/combobox/define.d.ts

@@ -0,0 +1,6 @@
+import { Combobox } from '.';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-combobox': Combobox;
+    }
+}

package/dist/combobox/define.js

@@ -0,0 +1,9 @@
+import { define as e } from "../internal/utils/dom.js";
+import { ControlMessage as t } from "../forms/control-message/control-message2.js";
+import { Control as n } from "../forms/control/control2.js";
+import { ControlGroup as r } from "../forms/control-group/control-group2.js";
+import { Combobox as i } from "./combobox2.js";
+e(i), e(n), e(r), e(t);
+//#endregion
+
+//# sourceMappingURL=define.js.map

package/dist/combobox/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","names":[],"sources":["../../src/combobox/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { Combobox } from '@nvidia-elements/core/combobox';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(Combobox);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-combobox': Combobox;\n  }\n}\n"],"mappings":";;;;;AAOA,EAAO,EAAS,EAChB,EAAO,EAAQ,EACf,EAAO,EAAa,EACpB,EAAO,EAAe"}