{
  "element": "nve-toolbar",
  "entrypoint": "@nvidia-elements/core/toolbar/toolbar.examples.json",
  "items": [
    {
      "id": "toolbar",
      "name": "Default",
      "template": "<nve-toolbar>\n  <nve-button><nve-icon name=\"add\"></nve-icon> create</nve-button>\n  <nve-button><nve-icon name=\"delete\"></nve-icon> delete</nve-button>\n  <nve-icon-button icon-name=\"gear\" slot=\"suffix\" aria-label=\"settings\"></nve-icon-button>\n</nve-toolbar>\n",
      "summary": "Basic toolbar with action buttons and a settings icon in the suffix slot.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "toolbar-container-flat",
      "name": "ContainerFlat",
      "template": "<nve-toolbar container=\"flat\">\n  <nve-button><nve-icon name=\"add\"></nve-icon> create</nve-button>\n  <nve-button><nve-icon name=\"delete\"></nve-icon> delete</nve-button>\n  <nve-icon-button container=\"flat\" icon-name=\"gear\" slot=\"suffix\" aria-label=\"settings\"></nve-icon-button>\n</nve-toolbar>\n",
      "summary": "Toolbar with flat container styling for a more subtle appearance.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "toolbar-container-inset",
      "name": "ContainerInset",
      "template": "<nve-toolbar container=\"inset\" style=\"--width: 300px\">\n  <nve-button><nve-icon name=\"add\"></nve-icon> create</nve-button>\n  <nve-button><nve-icon name=\"delete\"></nve-icon> delete</nve-button>\n  <nve-icon-button icon-name=\"gear\" slot=\"suffix\" aria-label=\"settings\"></nve-icon-button>\n</nve-toolbar>\n",
      "summary": "Toolbar with inset container styling and constrained width for contained layouts.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "toolbar-container-full",
      "name": "ContainerFull",
      "template": "<nve-toolbar container=\"full\">\n  <nve-button><nve-icon name=\"add\"></nve-icon> create</nve-button>\n  <nve-button><nve-icon name=\"delete\"></nve-icon> delete</nve-button>\n  <nve-icon-button container=\"flat\" icon-name=\"gear\" slot=\"suffix\" aria-label=\"settings\"></nve-icon-button>\n</nve-toolbar>\n",
      "summary": "Toolbar with full container styling that spans the entire width.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "toolbar-groups",
      "name": "Groups",
      "template": "<nve-toolbar>\n  <nve-select fit-text>\n    <select aria-label=\"element type\">\n      <option value=\"1\">Heading 1</option>\n      <option value=\"2\">Heading 2</option>\n      <option value=\"p\">Paragraph</option>\n    </select>\n    <div slot=\"option-1\">\n      <span nve-text=\"heading\">Heading 1</span>\n    </div>\n    <div slot=\"option-2\">\n      <span nve-text=\"heading sm\">Heading 2</span>\n    </div>\n    <div slot=\"option-3\">\n      <span nve-text=\"body sm\">Paragraph</span>\n    </div>\n  </nve-select>\n  <nve-divider></nve-divider>\n  <nve-button-group>\n    <nve-icon-button pressed icon-name=\"bars-3-bottom-left\"></nve-icon-button>\n    <nve-icon-button icon-name=\"bars-3-bottom-right\"></nve-icon-button>\n    <nve-icon-button icon-name=\"bars-4\"></nve-icon-button>\n  </nve-button-group>\n  <nve-divider></nve-divider>\n  <nve-button-group>\n    <nve-icon-button icon-name=\"bold\" size=\"sm\"></nve-icon-button>\n    <nve-icon-button icon-name=\"italic\" size=\"sm\"></nve-icon-button>\n    <nve-icon-button icon-name=\"strikethrough\" size=\"sm\"></nve-icon-button>\n  </nve-button-group>\n  <nve-divider></nve-divider>\n  <nve-button-group>\n    <nve-icon-button icon-name=\"code\"></nve-icon-button>\n    <nve-icon-button icon-name=\"fork\"></nve-icon-button>\n    <nve-icon-button icon-name=\"merge\"></nve-icon-button>\n  </nve-button-group>\n  <nve-button slot=\"suffix\" container=\"flat\">Save</nve-button>\n</nve-toolbar>\n",
      "summary": "Complex toolbar with grouped controls including select dropdowns, button groups, and dividers for text editing scenarios.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "toolbar-vertical",
      "name": "Vertical",
      "template": "<nve-toolbar orientation=\"vertical\">\n  <nve-button-group>\n    <nve-icon-button pressed icon-name=\"bars-3-bottom-left\"></nve-icon-button>\n    <nve-icon-button icon-name=\"bars-3-bottom-right\"></nve-icon-button>\n    <nve-icon-button icon-name=\"bars-4\"></nve-icon-button>\n  </nve-button-group>\n  <nve-divider></nve-divider>\n  <nve-button-group>\n    <nve-icon-button icon-name=\"bold\" size=\"sm\"></nve-icon-button>\n    <nve-icon-button icon-name=\"italic\" size=\"sm\"></nve-icon-button>\n    <nve-icon-button icon-name=\"strikethrough\"></nve-icon-button>\n  </nve-button-group>\n</nve-toolbar>\n",
      "summary": "Vertical toolbar orientation with button groups and dividers for sidebar layouts.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "toolbar-status",
      "name": "Status",
      "template": "<div nve-layout=\"column gap:lg align:horizontal-stretch full\">\n  <nve-toolbar status=\"accent\">\n    <nve-icon-button icon-name=\"cancel\" slot=\"prefix\"></nve-icon-button>\n    <p nve-text=\"body\">123 selected</p>\n    <nve-button slot=\"suffix\">delete</nve-button>\n    <nve-icon-button icon-name=\"more-actions\" slot=\"suffix\"></nve-icon-button>\n  </nve-toolbar>\n  <nve-toolbar>\n    <nve-icon-button icon-name=\"cancel\" slot=\"prefix\"></nve-icon-button>\n    <p nve-text=\"body\">123 selected</p>\n    <nve-button slot=\"suffix\">delete</nve-button>\n    <nve-icon-button icon-name=\"more-actions\" slot=\"suffix\"></nve-icon-button>\n  </nve-toolbar>\n</div>\n",
      "summary": "Toolbar with status styling showing selection state with accent status and default status variants for bulk actions.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "toolbar-container",
      "name": "Container",
      "template": "<div nve-layout=\"column gap:lg\">\n  <nve-toolbar>\n    <nve-button><nve-icon name=\"copy\"></nve-icon> copy</nve-button>\n    <nve-button><nve-icon name=\"copy\"></nve-icon></nve-button>\n    <nve-icon-button icon-name=\"copy\"></nve-icon-button>\n    <nve-copy-button></nve-copy-button>\n    <nve-switch prominence=\"muted\">\n      <input type=\"checkbox\" checked aria-label=\"switch\" />\n    </nve-switch>\n    <nve-checkbox prominence=\"muted\">\n      <input type=\"checkbox\" checked aria-label=\"checkbox\" />\n    </nve-checkbox>\n    <nve-input>\n      <input aria-label=\"input\" />\n    </nve-input>\n  </nve-toolbar>\n  <nve-toolbar container=\"flat\">\n    <nve-button><nve-icon name=\"copy\"></nve-icon> copy</nve-button>\n    <nve-button><nve-icon name=\"copy\"></nve-icon></nve-button>\n    <nve-icon-button icon-name=\"copy\"></nve-icon-button>\n    <nve-copy-button></nve-copy-button>\n    <nve-switch prominence=\"muted\">\n      <input type=\"checkbox\" checked aria-label=\"switch\" />\n    </nve-switch>\n    <nve-checkbox prominence=\"muted\">\n      <input type=\"checkbox\" checked aria-label=\"checkbox\" />\n    </nve-checkbox>\n    <nve-input>\n      <input aria-label=\"input\" />\n    </nve-input>\n  </nve-toolbar>\n  <nve-toolbar container=\"inset\">\n    <nve-button><nve-icon name=\"copy\"></nve-icon> copy</nve-button>\n    <nve-button><nve-icon name=\"copy\"></nve-icon></nve-button>\n    <nve-icon-button icon-name=\"copy\"></nve-icon-button>\n    <nve-copy-button></nve-copy-button>\n    <nve-switch prominence=\"muted\">\n      <input type=\"checkbox\" checked aria-label=\"switch\" />\n    </nve-switch>\n    <nve-checkbox prominence=\"muted\">\n      <input type=\"checkbox\" checked aria-label=\"checkbox\" />\n    </nve-checkbox>\n    <nve-input>\n      <input aria-label=\"input\" />\n    </nve-input>\n  </nve-toolbar>\n</div>\n",
      "summary": "Example of toolbar containers and their different appearances with varying prominence levels.",
      "description": "",
      "composition": true,
      "tags": [
        "test-case"
      ]
    }
  ]
}