{
  "element": "nve-internal-patterns",
  "entrypoint": "@nvidia-elements/styles/responsive-patterns.examples.json",
  "items": [
    {
      "id": "styles-responsive-patterns-responsive-tabs",
      "name": "ResponsiveTabs",
      "template": "<style>\n  .responsive-tabs {\n    overflow: hidden;\n    resize: horizontal;\n    border: 1px solid #ccc;\n    max-width: 600px;\n    min-width: 240px;\n  }\n</style>\n<div class=\"responsive-tabs\" nve-layout=\"pad:md\">\n  <nve-tabs behavior-select>\n    <nve-tabs-item selected>Tab 1</nve-tabs-item>\n    <nve-tabs-item>Tab 2</nve-tabs-item>\n    <nve-tabs-item>Tab 3</nve-tabs-item>\n    <nve-tabs-item nve-display=\"&sm|hide\">Tab 4</nve-tabs-item>\n    <nve-tabs-item nve-display=\"&sm|hide\">Tab 5</nve-tabs-item>\n    <nve-tabs-item nve-display=\"&sm|hide\">Tab 6</nve-tabs-item>\n    <nve-tabs-item popovertarget=\"more-tabs\" nve-display=\"&sm|show\">\n      <nve-icon name=\"more-actions\"></nve-icon>\n    </nve-tabs-item>\n  </nve-tabs>\n  <nve-dropdown id=\"more-tabs\">\n    <nve-menu>\n      <nve-menu-item>Tab 4</nve-menu-item>\n      <nve-menu-item>Tab 5</nve-menu-item>\n      <nve-menu-item>Tab 6</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n</div>\n<p nve-text=\"body\">Resize the container to see tabs hide and the \"more\" menu appear on smaller container sizes.</p>\n",
      "summary": "",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "styles-responsive-patterns-responsive-toolbar",
      "name": "ResponsiveToolbar",
      "template": "<style>\n  .responsive-toolbar {\n    overflow: hidden;\n    resize: horizontal;\n    border: 1px solid #ccc;\n    max-width: 700px;\n    min-width: 260px;\n  }\n</style>\n<div class=\"responsive-toolbar\" nve-layout=\"pad:md\">\n  <nve-toolbar>\n    <nve-search>\n      <input type=\"search\" placeholder=\"Search...\" aria-label=\"Search\" />\n    </nve-search>\n\n    <nve-button container=\"flat\" slot=\"suffix\"> <nve-icon name=\"filter\"></nve-icon> Filter </nve-button>\n    <nve-button container=\"flat\" slot=\"suffix\" nve-display=\"&md|hide\">\n      <nve-icon name=\"sort-ascending\"></nve-icon> Sort\n    </nve-button>\n    <nve-button container=\"flat\" slot=\"suffix\" nve-display=\"&md|hide\">\n      <nve-icon name=\"download\"></nve-icon> Export\n    </nve-button>\n    <nve-icon-button\n      container=\"flat\"\n      slot=\"suffix\"\n      icon-name=\"gear\"\n      aria-label=\"Settings\"\n      nve-display=\"&md|hide\"\n    ></nve-icon-button>\n    <nve-icon-button\n      container=\"flat\"\n      slot=\"suffix\"\n      icon-name=\"more-actions\"\n      aria-label=\"More actions\"\n      popovertarget=\"toolbar-more-actions\"\n      nve-display=\"&md|show\"\n    ></nve-icon-button>\n  </nve-toolbar>\n  <nve-dropdown id=\"toolbar-more-actions\">\n    <nve-menu>\n      <nve-menu-item> <nve-icon name=\"sort-ascending\"></nve-icon> Sort </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"download\"></nve-icon> Export </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"gear\"></nve-icon> Settings </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n</div>\n<p nve-text=\"body\">\n  Resize the container to see toolbar actions collapse into the \"more actions\" menu on smaller container sizes.\n</p>\n",
      "summary": "",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "styles-responsive-patterns-responsive-navigation",
      "name": "ResponsiveNavigation",
      "template": "<style>\n  .demo-section {\n    overflow: hidden;\n    resize: both;\n    border: 1px solid #ccc;\n    width: 100%;\n    max-width: 800px;\n    padding: 12px;\n    margin-bottom: 24px;\n  }\n\n  .nav-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 16px;\n  }\n</style>\n<div class=\"demo-section\">\n  <div class=\"nav-header\">\n    <h3 nve-text=\"heading\">My Application</h3>\n    <nve-icon-button\n      icon-name=\"bars-3\"\n      aria-label=\"Menu\"\n      popovertarget=\"mobile-menu\"\n      nve-display=\"@lg|hide\"\n    ></nve-icon-button>\n  </div>\n  <nav nve-display=\"@lg|hide\">\n    <nve-tabs>\n      <nve-tabs-item selected>Dashboard</nve-tabs-item>\n      <nve-tabs-item>Products</nve-tabs-item>\n      <nve-tabs-item>Customers</nve-tabs-item>\n      <nve-tabs-item>Reports</nve-tabs-item>\n      <nve-tabs-item>Settings</nve-tabs-item>\n    </nve-tabs>\n  </nav>\n  <nve-dropdown id=\"mobile-menu\">\n    <nve-menu>\n      <nve-menu-item selected>Dashboard</nve-menu-item>\n      <nve-menu-item>Products</nve-menu-item>\n      <nve-menu-item>Customers</nve-menu-item>\n      <nve-menu-item>Reports</nve-menu-item>\n      <nve-menu-item>Settings</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n</div>\n<p nve-text=\"body\">Resize the container to see navigation switch between tabs (desktop) and hamburger menu (mobile).</p>\n",
      "summary": "",
      "description": "",
      "composition": true,
      "tags": []
    }
  ]
}