{
  "element": "nve-accordion",
  "entrypoint": "@nvidia-elements/core/accordion/accordion.examples.json",
  "items": [
    {
      "id": "accordion",
      "name": "Default",
      "template": "<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\">Workspace Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n</nve-accordion-group>\n",
      "summary": "Basic accordion component for collapsible content sections. Use accordions to progressively disclose information, helping users focus on relevant content while keeping the interface compact and scannable.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "accordion-disabled",
      "name": "Disabled",
      "template": "<nve-accordion behavior-expand disabled>\n  <nve-accordion-header>\n    <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Admin Settings</h2>\n    <p nve-text=\"body\">Requires administrator access</p>\n  </nve-accordion-header>\n  <nve-accordion-content\n    >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n  >\n</nve-accordion>\n",
      "summary": "Disabled accordion state for read-only content display. Use when accordion sections are temporarily unavailable or conditionally accessible based on user permissions, providing visual feedback about inaccessible content.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "accordion-container",
      "name": "Container",
      "template": "<div nve-layout=\"column gap:md\">\n  <nve-accordion-group behavior-expand>\n    <nve-accordion>\n      <nve-accordion-header>\n        <h2 nve-text=\"heading xs medium\" slot=\"prefix\">General</h2>\n      </nve-accordion-header>\n      <nve-accordion-content\n        >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n      >\n    </nve-accordion>\n    <nve-accordion>\n      <nve-accordion-header>\n        <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Settings</h2>\n      </nve-accordion-header>\n      <nve-accordion-content\n        >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n      >\n    </nve-accordion>\n  </nve-accordion-group>\n  <nve-accordion-group container=\"inset\" behavior-expand>\n    <nve-accordion>\n      <nve-accordion-header>\n        <h2 nve-text=\"heading xs medium\" slot=\"prefix\">General</h2>\n      </nve-accordion-header>\n      <nve-accordion-content\n        >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n      >\n    </nve-accordion>\n    <nve-accordion>\n      <nve-accordion-header>\n        <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Settings</h2>\n      </nve-accordion-header>\n      <nve-accordion-content\n        >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n      >\n    </nve-accordion>\n  </nve-accordion-group>\n  <nve-accordion-group container=\"flat\" behavior-expand>\n    <nve-accordion>\n      <nve-accordion-header>\n        <h2 nve-text=\"heading xs medium\" slot=\"prefix\">General</h2>\n      </nve-accordion-header>\n      <nve-accordion-content\n        >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n      >\n    </nve-accordion>\n    <nve-accordion>\n      <nve-accordion-header>\n        <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Settings</h2>\n      </nve-accordion-header>\n      <nve-accordion-content\n        >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n      >\n    </nve-accordion>\n  </nve-accordion-group>\n</div>\n",
      "summary": "Accordion container variants for different visual emphasis levels. Use default for standard sections, inset for elevated content within cards, and flat for minimal visual weight in dense layouts or sidebars.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "accordion-animated",
      "name": "Animated",
      "template": "<nve-accordion behavior-expand style=\"--transition: height 0.3s ease-in-out\">\n  <nve-accordion-header>\n    <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Release Notes</h2>\n    <p nve-text=\"body\">Version 3.2.0</p>\n  </nve-accordion-header>\n  <nve-accordion-content\n    >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n  >\n</nve-accordion>\n",
      "summary": "Accordion with custom CSS transitions for enhanced visual feedback during state changes. Use animated accordions to provide smoother, more polished interactions, particularly in content-heavy interfaces where transitions help users track what changed.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "accordion-behavior-expand-single",
      "name": "BehaviorExpandSingle",
      "template": "<nve-accordion-group behavior-expand-single>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Account Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Security</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n</nve-accordion-group>\n",
      "summary": "Accordion group allowing only one section expanded at a time, automatically closing others. Use single-expand behavior when content sections are mutually exclusive or when you want to maintain compact vertical space by limiting expanded content to one section.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "accordion-custom-icon-button",
      "name": "CustomIconButton",
      "template": "<nve-accordion id=\"custom-icon-button-accordion\">\n  <nve-icon-button slot=\"icon-button\" icon-name=\"add\" size=\"sm\" container=\"flat\"></nve-icon-button>\n  <nve-accordion-header>\n    <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Additional Resources</h2>\n  </nve-accordion-header>\n  <nve-accordion-content\n    >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n  >\n</nve-accordion>\n<script type=\"module\">\n  const accordion = document.querySelector(\"#custom-icon-button-accordion\");\n  const accordionHeader = accordion.querySelector(\"nve-accordion-header\");\n  const iconButton = accordion.querySelector(\"nve-icon-button\");\n  accordionHeader.addEventListener(\"click\", () => toggle());\n  iconButton.addEventListener(\"click\", () => toggle());\n  function toggle() {\n    accordion.expanded = !accordion.expanded;\n    iconButton.iconName = accordion.expanded ? \"minus\" : \"add\";\n  }\n</script>\n",
      "summary": "Accordion with custom icon button that changes based on state. Use custom icons to provide more semantic indicators (e.g., plus/minus for add/remove patterns, chevron for expand/collapse).",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "accordion-with-actions",
      "name": "WithActions",
      "template": "<nve-accordion behavior-expand>\n  <nve-accordion-header>\n    <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Pipeline Configuration</h2>\n    <p nve-text=\"body\">Last updated 2 hours ago <nve-button container=\"inline\">view history</nve-button></p>\n    <nve-icon-button container=\"flat\" icon-name=\"add\" size=\"sm\" slot=\"suffix\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" icon-name=\"delete\" size=\"sm\" slot=\"suffix\"></nve-icon-button>\n  </nve-accordion-header>\n  <nve-accordion-content\n    >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n  >\n</nve-accordion>\n",
      "summary": "Accordion with action buttons in header for quick operations without expanding. Perfect for list items where users need both to view details and perform actions like edit, delete, or add, keeping common actions immediately accessible.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "accordion-nested-open-event",
      "name": "NestedOpenEvent",
      "template": "<nve-accordion-group behavior-expand-single>\n  <nve-accordion>\n    <nve-accordion-header>Details</nve-accordion-header>\n    <nve-accordion-content>\n      <nve-tooltip id=\"tooltip\">tooltip</nve-tooltip>\n      <nve-button popovertarget=\"tooltip\">button</nve-button>\n    </nve-accordion-content>\n  </nve-accordion>\n</nve-accordion-group>\n",
      "summary": "Accordion with nested interactive elements like tooltips and popovers. Ensures proper event handling when accordion content contains interactive components, preventing unintended state changes and maintaining smooth user interactions.",
      "description": "",
      "composition": true,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "accordion-single",
      "name": "Single",
      "template": "<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Appearance</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n</nve-accordion-group>\n",
      "summary": "Basic accordion component for collapsible content sections with expand/collapse functionality.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "accordion-multiple",
      "name": "Multiple",
      "template": "<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Account Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Privacy</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n</nve-accordion-group>\n",
      "summary": "Brings together many accordion components for embedded multi-section content organization.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    }
  ]
}