{
  "element": "nve-dropdown",
  "entrypoint": "@nvidia-elements/core/dropdown/dropdown.examples.json",
  "items": [
    {
      "id": "dropdown",
      "name": "Default",
      "template": "<nve-button popovertarget=\"dropdown\">button</nve-button>\n<nve-dropdown id=\"dropdown\">dropdown content</nve-dropdown>\n",
      "summary": "Basic dropdown implementation using popovertarget attribute to connect trigger and dropdown. Useful for simple dropdown menus.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "dropdown-menu",
      "name": "Menu",
      "template": "<nve-button popovertarget=\"dropdown-menu\">dropdown</nve-button>\n<nve-dropdown id=\"dropdown-menu\">\n  <nve-menu>\n    <nve-menu-item><nve-icon name=\"person\"></nve-icon> profile</nve-menu-item>\n    <nve-menu-item><nve-icon name=\"gear\"></nve-icon> settings</nve-menu-item>\n    <nve-menu-item><nve-icon name=\"star\"></nve-icon> favorites</nve-menu-item>\n    <nve-divider></nve-divider>\n    <nve-menu-item><nve-icon name=\"logout\"></nve-icon> logout</nve-menu-item>\n  </nve-menu>\n</nve-dropdown>\n",
      "summary": "Dropdown with popover-positioned menu for trigger-based actions. Use for context menus, settings, and user actions where content appears on demand relative to a trigger button.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "dropdown-visual",
      "name": "Visual",
      "template": "<nve-dropdown anchor=\"btn\">dropdown content</nve-dropdown>\n<nve-button id=\"btn\">button</nve-button>\n",
      "summary": "Dropdown using anchor attribute to reference trigger element by ID. Alternative approach for connecting dropdowns to their triggers.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "dropdown-events",
      "name": "Events",
      "template": "<nve-dropdown id=\"dropdown\">dropdown content</nve-dropdown>\n<nve-button popovertarget=\"dropdown\">button</nve-button>\n<script type=\"module\">\n  const dropdown = document.querySelector(\"nve-dropdown\");\n  dropdown.addEventListener(\"beforetoggle\", () => console.log(\"beforetoggle\"));\n  dropdown.addEventListener(\"toggle\", () => console.log(\"toggle\"));\n  dropdown.addEventListener(\"open\", () => console.log(\"open\"));\n  dropdown.addEventListener(\"close\", () => console.log(\"close\"));\n</script>\n",
      "summary": "Event handling for dropdown open and close events. Useful for adding custom behavior when dropdown state changes.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "dropdown-closable",
      "name": "Closable",
      "template": "<nve-dropdown anchor=\"btn\" closable>\n  <h3 nve-text=\"label\">Title</h3>\n  <p nve-text=\"body\">some text content in a closable dropdown</p>\n</nve-dropdown>\n<nve-button id=\"btn\">button</nve-button>\n",
      "summary": "Dropdown with closable attribute that allows users to dismiss the dropdown by clicking close button.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "dropdown-layout",
      "name": "Layout",
      "template": "<nve-dropdown anchor=\"btn\">\n  <nve-dropdown-header>\n    <h3 nve-text=\"heading semibold sm\">heading</h3>\n  </nve-dropdown-header>\n  <p nve-text=\"body\">some text content in a closable dropdown</p>\n  <nve-dropdown-footer>\n    <p nve-text=\"body\">footer</p>\n  </nve-dropdown-footer>\n</nve-dropdown>\n<nve-button id=\"btn\">button</nve-button>\n",
      "summary": "Dropdown with structured content using header and footer sections. Perfect for complex dropdown content that needs clear visual hierarchy.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "dropdown-multiple-triggers",
      "name": "MultipleTriggers",
      "template": "<div nve-layout=\"row gap:sm align:center\">\n  <nve-button popovertarget=\"dropdown\">button</nve-button>\n  <nve-button popovertarget=\"dropdown\">button</nve-button>\n  <nve-button popovertarget=\"dropdown\">button</nve-button>\n  <nve-dropdown id=\"dropdown\">hello there</nve-dropdown>\n</div>\n",
      "summary": "Dropdown with many triggers, showing how to use the popovertarget attribute to connect many triggers to the same dropdown.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "dropdown-position",
      "name": "Position",
      "template": "<nve-dropdown anchor=\"card\" position=\"top\" alignment=\"center\">\n  <h3 nve-text=\"label\">Top</h3>\n  <p nve-text=\"body\">dropdown positioned top</p>\n</nve-dropdown>\n<nve-dropdown anchor=\"card\" position=\"right\" alignment=\"center\">\n  <h3 nve-text=\"label\">Right</h3>\n  <p nve-text=\"body\">dropdown positioned right</p>\n</nve-dropdown>\n<nve-dropdown anchor=\"card\" position=\"bottom\" alignment=\"center\">\n  <h3 nve-text=\"label\">Bottom</h3>\n  <p nve-text=\"body\">dropdown positioned bottom</p>\n</nve-dropdown>\n<nve-dropdown anchor=\"card\" position=\"left\" alignment=\"center\">\n  <h3 nve-text=\"label\">Left</h3>\n  <p nve-text=\"body\">dropdown positioned left</p>\n</nve-dropdown>\n<nve-card id=\"card\" style=\"width: 250px; height: 200px\"></nve-card>\n",
      "summary": "Dropdown position, with the position attribute controlling placement when the trigger is not visible.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "dropdown-alignment",
      "name": "Alignment",
      "template": "<div nve-theme nve-layout=\"row align:center\">\n  <nve-dropdown open anchor=\"card\" position=\"top\" alignment=\"start\">top start</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"top\" alignment=\"center\">top center</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"top\" alignment=\"end\">top end</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"right\" alignment=\"start\">right start</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"right\" alignment=\"center\">right center</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"right\" alignment=\"end\">right end</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"bottom\" alignment=\"start\">bottom start</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"bottom\" alignment=\"center\">bottom center</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"bottom\" alignment=\"end\">bottom end</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"left\" alignment=\"start\">left start</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"left\" alignment=\"center\">left center</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"left\" alignment=\"end\">left end</nve-dropdown>\n  <nve-card id=\"card\" style=\"width: 450px; height: 300px; margin-top: 50px\"></nve-card>\n</div>\n",
      "summary": "Dropdown alignment, with the alignment attribute controlling horizontal placement relative to the trigger.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "dropdown-radio-group",
      "name": "RadioGroup",
      "template": "<nve-dropdown anchor=\"btn\">\n  <nve-radio-group style=\"width: 250px\">\n    <label>Sort By</label>\n    <nve-radio>\n      <label>Completed</label>\n      <input type=\"radio\" checked />\n      <nve-control-message>latest completed tasks</nve-control-message>\n    </nve-radio>\n    <nve-radio>\n      <label>Failing</label>\n      <input type=\"radio\" />\n      <nve-control-message>latest failing tasks</nve-control-message>\n    </nve-radio>\n    <nve-radio>\n      <label>Status</label>\n      <input type=\"radio\" />\n      <nve-control-message>task status priority</nve-control-message>\n    </nve-radio>\n  </nve-radio-group>\n</nve-dropdown>\n<nve-button id=\"btn\" nve-control>completed <nve-icon name=\"caret\" direction=\"down\" size=\"sm\"></nve-icon></nve-button>\n",
      "summary": "Dropdown containing a radio group for single-selection options. Perfect for sort controls, filter selections, or preference settings.",
      "description": "",
      "composition": true,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "dropdown-checkbox-group",
      "name": "CheckboxGroup",
      "template": "<nve-dropdown anchor=\"btn\">\n  <nve-checkbox-group style=\"width: 250px\">\n    <label>Test Suites</label>\n    <nve-checkbox>\n      <label>Local</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>Nightly</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>Remote</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n  </nve-checkbox-group>\n</nve-dropdown>\n<nve-button id=\"btn\" nve-control>test suites <nve-icon name=\"caret\" direction=\"down\" size=\"sm\"></nve-icon></nve-button>\n",
      "summary": "Dropdown containing a checkbox group for multi-selection options. Ideal for filter controls, feature toggles, or bulk action selections.",
      "description": "",
      "composition": true,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "dropdown-legacy-behavior-trigger",
      "name": "LegacyBehaviorTrigger",
      "template": "<nve-button id=\"dropdown-btn\">open</nve-button>\n<nve-dropdown anchor=\"dropdown-btn\" trigger=\"dropdown-btn\" behavior-trigger hidden>\n  <p nve-text=\"body\">hello there</p>\n</nve-dropdown>\n",
      "summary": "Legacy behavior trigger for dropdown, using the behavior-trigger attribute to open the dropdown on button click.",
      "description": "",
      "deprecated": true,
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "dropdown-hint",
      "name": "Hint",
      "template": "<nve-dropdown id=\"dropdown\"> dropdown content </nve-dropdown>\n<nve-tooltip id=\"tooltip\" hidden behavior-trigger trigger=\"btn\">dropdown content</nve-tooltip>\n<nve-icon-button id=\"btn\" popovertarget=\"dropdown\" icon-name=\"gear\" aria-label=\"settings\"></nve-icon-button>\n",
      "summary": "Dropdown hint, using the tooltip element to display a hint when the dropdown opens.",
      "description": "",
      "deprecated": true,
      "composition": true,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "dropdown-position-fallback",
      "name": "PositionFallback",
      "template": "<style>\n  body {\n    align-items: start !important;\n    margin: 0;\n    padding: 0 !important;\n  }\n</style>\n<nve-dropdown anchor=\"btn\" position=\"bottom\" alignment=\"center\"> dropdown content </nve-dropdown>\n<nve-dropdown anchor=\"btn\" position=\"right\" alignment=\"center\"> dropdown content </nve-dropdown>\n<nve-icon-button id=\"btn\" icon-name=\"gear\" aria-label=\"settings\"></nve-icon-button>\n",
      "summary": "Dropdown position fallback, using the position and alignment attributes to reposition the dropdown when the trigger is not visible.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    }
  ]
}