{
  "element": "nve-select",
  "entrypoint": "@nvidia-elements/core/select/select.examples.json",
  "items": [
    {
      "id": "select",
      "name": "Default",
      "template": "<nve-select>\n  <label>label</label>\n  <select>\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\">Option 2</option>\n    <option value=\"3\">Option 3</option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-select>\n",
      "summary": "Basic select component with label, options, and message.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "select-custom-option-render",
      "name": "CustomOptionRender",
      "template": "<nve-select>\n  <label>label</label>\n  <select id=\"complex\">\n    <option value=\"1\">Debugger</option>\n    <option value=\"2\">Task Manager</option>\n    <option value=\"3\">CI Services</option>\n  </select>\n  <div slot=\"option-1\" nve-layout=\"row gap:xs align:vertical-center\">\n    <nve-logo color=\"pink-rose\">Db</nve-logo>\n    <p nve-text=\"body\" nve-layout=\"column gap:xs\">\n      <span nve-text=\"label\">Debugger</span>\n      <span nve-text=\"body muted\">some details on option 1</span>\n    </p>\n  </div>\n  <div slot=\"option-2\" nve-layout=\"row gap:xs align:vertical-center\">\n    <nve-logo color=\"blue-cobalt\">TM</nve-logo>\n    <p nve-text=\"body\" nve-layout=\"column gap:xs\">\n      <span nve-text=\"label\">Task Manager</span>\n      <span nve-text=\"body muted\">some details on option 2</span>\n    </p>\n  </div>\n  <div slot=\"option-3\" nve-layout=\"row gap:xs align:vertical-center\">\n    <nve-logo color=\"green-mint\">CI</nve-logo>\n    <p nve-text=\"body\" nve-layout=\"column gap:xs\">\n      <span nve-text=\"label\">CI Services</span>\n      <span nve-text=\"body muted\">some details on option 3</span>\n    </p>\n  </div>\n  <nve-control-message>message</nve-control-message>\n</nve-select>\n",
      "summary": "Rich option rendering with custom slots containing logos and descriptions for each option.",
      "description": "",
      "composition": true,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "select-prefix",
      "name": "Prefix",
      "template": "<nve-select>\n  <nve-button container=\"flat\" readonly>location</nve-button>\n  <select aria-label=\"location\">\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\">Option 2</option>\n    <option value=\"3\">Option 3</option>\n  </select>\n</nve-select>\n",
      "summary": "Select with a prefix button to provide extra context or categorization.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "select-flat",
      "name": "Flat",
      "template": "<div nve-layout=\"column gap:xl align:stretch\">\n  <nve-select container=\"flat\">\n    <label>label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-select container=\"flat\">\n    <label>multiple</label>\n    <select multiple>\n      <option selected value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</option>\n      <option selected value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-select container=\"flat\">\n    <label>multiple + size</label>\n    <select multiple size=\"5\">\n      <option selected value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</option>\n      <option selected value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n</div>\n",
      "summary": "Flat container style for single and multi select, providing a minimal visual treatment.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "select-vertical",
      "name": "Vertical",
      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-select>\n    <label>label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-select>\n    <label>disabled</label>\n    <select disabled>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-select>\n    <label>success</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-select>\n  <nve-select>\n    <label>error</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-select>\n</div>\n",
      "summary": "Vertical layout showcasing states: default, disabled, success, and error.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "select-horizontal",
      "name": "Horizontal",
      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-select layout=\"horizontal\">\n    <label>label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-select layout=\"horizontal\">\n    <label>disabled</label>\n    <select disabled>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-select layout=\"horizontal\">\n    <label>success</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-select>\n  <nve-select layout=\"horizontal\">\n    <label>error</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-select>\n</div>\n",
      "summary": "Horizontal layout showcasing states: default, disabled, success, and error.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "select-multiple",
      "name": "Multiple",
      "template": "<nve-select>\n  <label>label</label>\n  <select multiple>\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\" selected>Option 2</option>\n    <option value=\"3\" selected>Option 3</option>\n    <option value=\"4\" selected>Option 4</option>\n    <option value=\"5\">Option 5</option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-select>\n",
      "summary": "Many-selection mode allowing users to select many options simultaneously.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "select-multiple-disabled",
      "name": "MultipleDisabled",
      "template": "<nve-select>\n  <label>label</label>\n  <select multiple disabled>\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\" selected>Option 2</option>\n    <option value=\"3\" selected>Option 3</option>\n    <option value=\"4\" selected>Option 4</option>\n    <option value=\"5\">Option 5</option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-select>\n",
      "summary": "Multi-selection in disabled state, showing read-only selected options.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "select-multiple-overflow",
      "name": "MultipleOverflow",
      "template": "<nve-select style=\"--width: 250px\">\n  <label>label</label>\n  <select multiple>\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\" selected>Option 2</option>\n    <option value=\"3\" selected>Option 3</option>\n    <option value=\"4\" selected>Option 4</option>\n    <option value=\"5\" selected>Option 5</option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-select>\n",
      "summary": "Multi-selection with constrained width to show overflow handling of selected options.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "select-size",
      "name": "Size",
      "template": "<div nve-layout=\"column gap:xl\">\n  <nve-select>\n    <label>label</label>\n    <select size=\"5\">\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\" selected>Option 2</option>\n      <option value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-select>\n    <label>label</label>\n    <select size=\"3\">\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\" selected>Option 2</option>\n      <option value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n</div>\n",
      "summary": "Size attribute controls the number of visible options without scrolling.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "select-height",
      "name": "Height",
      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-select style=\"--scroll-height: 150px\">\n    <label>label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n      <option value=\"6\">Option 6</option>\n      <option value=\"7\">Option 7</option>\n      <option value=\"8\">Option 8</option>\n      <option value=\"9\">Option 9</option>\n      <option value=\"10\">Option 10</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-select>\n    <label>label</label>\n    <select>\n      <option>Option 1</option>\n      <option>Option 2</option>\n      <option>Option 3</option>\n      <option>Option 4</option>\n      <option>Option 5</option>\n      <option>Option 6</option>\n      <option>Option 7</option>\n      <option>Option 8</option>\n      <option>Option 9</option>\n      <option>Option 10</option>\n      <option>Option 11</option>\n      <option>Option 12</option>\n      <option>Option 13</option>\n      <option>Option 14</option>\n      <option>Option 15</option>\n      <option>Option 16</option>\n      <option>Option 17</option>\n      <option>Option 18</option>\n      <option>Option 19</option>\n      <option>Option 20</option>\n      <option>Option 21</option>\n      <option>Option 22</option>\n      <option>Option 23</option>\n      <option>Option 24</option>\n      <option>Option 25</option>\n      <option>Option 26</option>\n      <option>Option 27</option>\n      <option>Option 28</option>\n      <option>Option 29</option>\n      <option>Option 30</option>\n      <option>Option 31</option>\n      <option>Option 32</option>\n      <option>Option 33</option>\n      <option>Option 34</option>\n      <option>Option 35</option>\n      <option>Option 36</option>\n      <option>Option 37</option>\n      <option>Option 38</option>\n      <option>Option 39</option>\n      <option>Option 40</option>\n      <option>Option 41</option>\n      <option>Option 42</option>\n      <option>Option 43</option>\n      <option>Option 44</option>\n      <option>Option 45</option>\n      <option>Option 46</option>\n      <option>Option 47</option>\n      <option>Option 48</option>\n      <option>Option 49</option>\n      <option>Option 50</option>\n      <option>Option 51</option>\n      <option>Option 52</option>\n      <option>Option 53</option>\n      <option>Option 54</option>\n      <option>Option 55</option>\n      <option>Option 56</option>\n      <option>Option 57</option>\n      <option>Option 58</option>\n      <option>Option 59</option>\n      <option>Option 60</option>\n      <option>Option 61</option>\n      <option>Option 62</option>\n      <option>Option 63</option>\n      <option>Option 64</option>\n      <option>Option 65</option>\n      <option>Option 66</option>\n      <option>Option 67</option>\n      <option>Option 68</option>\n      <option>Option 69</option>\n      <option>Option 70</option>\n      <option>Option 71</option>\n      <option>Option 72</option>\n      <option>Option 73</option>\n      <option>Option 74</option>\n      <option>Option 75</option>\n      <option>Option 76</option>\n      <option>Option 77</option>\n      <option>Option 78</option>\n      <option>Option 79</option>\n      <option>Option 80</option>\n      <option>Option 81</option>\n      <option>Option 82</option>\n      <option>Option 83</option>\n      <option>Option 84</option>\n      <option>Option 85</option>\n      <option>Option 86</option>\n      <option>Option 87</option>\n      <option>Option 88</option>\n      <option>Option 89</option>\n      <option>Option 90</option>\n      <option>Option 91</option>\n      <option>Option 92</option>\n      <option>Option 93</option>\n      <option>Option 94</option>\n      <option>Option 95</option>\n      <option>Option 96</option>\n      <option>Option 97</option>\n      <option>Option 98</option>\n      <option>Option 99</option>\n      <option>Option 100</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n</div>\n",
      "summary": "Custom scroll height for dropdown with many options to control vertical space usage.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "select-fit-text",
      "name": "FitText",
      "template": "<nve-select fit-text>\n  <label>label</label>\n  <select>\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\">Option 1234</option>\n    <option value=\"3\">Option 1234567809</option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-select>\n",
      "summary": "Select width dynamically adjusts to fit the currently selected option text.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "select-fit-content",
      "name": "FitContent",
      "template": "<div nve-layout=\"column gap:lg\">\n  <nve-select fit-content>\n    <label>label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 1234</option>\n      <option value=\"3\">Option 1234567809</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-select fit-content layout=\"horizontal\">\n    <label>label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 1234</option>\n      <option value=\"3\">Option 1234567809</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n</div>\n",
      "summary": "Select width adjusts to fit the longest option in both vertical and horizontal layouts.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "select-placeholder",
      "name": "Placeholder",
      "template": "<nve-select>\n  <label>label</label>\n  <select>\n    <option value selected disabled hidden>Select Option</option>\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\">Option 2</option>\n    <option value=\"3\">Option 3</option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-select>\n",
      "summary": "Placeholder text prompts users to make a selection when no option exists yet.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "select-placeholder-multiple",
      "name": "PlaceholderMultiple",
      "template": "<nve-select>\n  <label>label</label>\n  <select multiple>\n    <option value selected disabled hidden>Select Option</option>\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\">Option 2</option>\n    <option value=\"3\">Option 3</option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-select>\n",
      "summary": "Placeholder text in multi-selection mode guides users before they select any options.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "select-disabled",
      "name": "Disabled",
      "template": "<nve-select>\n  <label>label</label>\n  <select>\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\" disabled>Option 2</option>\n    <option value=\"3\">Option 3</option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-select>\n",
      "summary": "Disable individual options to prevent selection while keeping them visible.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "select-viewport-overflow",
      "name": "ViewportOverflow",
      "template": "<nve-select layout=\"horizontal-inline\" style=\"margin: 30vh 0 0 60vw; max-width: 500px\">\n  <label>label</label>\n  <select>\n    <option value=\"1\">Option 1 asfd asdf asdf asdf asdf asdf asdfasdf asdf asdf asdf asdf asdf asdf asdf</option>\n    <option value=\"2\">Option 2</option>\n    <option value=\"3\">Option 3</option>\n  </select>\n</nve-select>\n<nve-select layout=\"horizontal-inline\" style=\"margin: 55vh 0 0 60vw; max-width: 500px\">\n  <label>label</label>\n  <select>\n    <option value=\"1\">Option 1 asfd asdf asdf asdf asdf asdf asdfasdf asdf asdf asdf asdf asdf asdf asdf</option>\n    <option value=\"2\">Option 2</option>\n    <option value=\"3\">Option 3</option>\n  </select>\n</nve-select>\n",
      "summary": "Viewport overflow test for select element",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "select-performance",
      "name": "Performance",
      "template": "<nve-select id=\"performance-select\">\n  <label>1000 options</label>\n  <select></select>\n</nve-select>\n<script type=\"module\">\n  const select = document.querySelector(\"#performance-select select\");\n  const options = new Array(1000).fill(\"\").map((_, i) => {\n    const option = document.createElement(\"option\");\n    option.value = i;\n    option.textContent = i + \" item\";\n    return option;\n  });\n  select.append(...options);\n</script>\n",
      "summary": "Performance test for select element with 1000 options",
      "description": "",
      "composition": false,
      "tags": [
        "test-case",
        "performance"
      ]
    }
  ]
}