{
  "element": "nve-drawer",
  "entrypoint": "@nvidia-elements/core/drawer/drawer.examples.json",
  "items": [
    {
      "id": "drawer",
      "name": "Default",
      "template": "<nve-drawer id=\"drawer\" closable modal>\n  <nve-drawer-header>\n    <h3 nve-text=\"heading semibold sm\">Drawer Header</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">drawer content</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">drawer footer</p>\n  </nve-drawer-footer>\n</nve-drawer>\n<nve-button popovertarget=\"drawer\">button</nve-button>\n",
      "summary": "Basic modal drawer with header, content, and footer sections. Use for displaying detailed information, forms, or settings that need more space than a dialog, typically sliding in from the side of the screen.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "drawer-visual",
      "name": "Visual",
      "template": "<nve-drawer closable>\n  <nve-drawer-header>\n    <h3 nve-text=\"heading semibold sm\">Drawer Header</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">drawer content</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">drawer footer</p>\n  </nve-drawer-footer>\n</nve-drawer>\n",
      "summary": "Complete drawer layout pattern with header, scrollable content, and footer sections for consistent drawer structure.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "drawer-scroll",
      "name": "Scroll",
      "template": "<nve-drawer closable>\n  <nve-drawer-header>\n    <h3 nve-text=\"heading semibold sm\">Drawer Header</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\" style=\"height: 2500px\">drawer content</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">drawer footer</p>\n  </nve-drawer-footer>\n</nve-drawer>\n",
      "summary": "Drawer with scrollable content for overflow behavior. Use when drawer content exceeds viewport height, ensuring header and footer remain fixed while content scrolls independently.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "drawer-events",
      "name": "Events",
      "template": "<nve-drawer id=\"drawer\" closable modal position=\"right\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">drawer content</p>\n  </nve-drawer-content>\n</nve-drawer>\n<nve-button popovertarget=\"drawer\">open</nve-button>\n<script type=\"module\">\n  const drawer = document.querySelector(\"nve-drawer\");\n  drawer.addEventListener(\"beforetoggle\", () => console.log(\"beforetoggle\"));\n  drawer.addEventListener(\"toggle\", () => console.log(\"toggle\"));\n  drawer.addEventListener(\"open\", () => console.log(\"open\"));\n  drawer.addEventListener(\"close\", () => console.log(\"close\"));\n</script>\n",
      "summary": "Event handling for drawer open, close, and toggle events. Useful for adding custom behavior when drawer state changes.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "drawer-small",
      "name": "Small",
      "template": "<nve-drawer size=\"sm\" closable>\n  <nve-drawer-header>\n    <h3 nve-text=\"heading semibold sm\">Drawer Header</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">drawer content</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">drawer footer</p>\n  </nve-drawer-footer>\n</nve-drawer>\n",
      "summary": "Small drawer size for compact side panels and quick actions. Ideal for navigation menus, filters, or supplementary information that shouldn't dominate the screen.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "drawer-large",
      "name": "Large",
      "template": "<nve-drawer size=\"lg\" closable>\n  <nve-drawer-header>\n    <h3 nve-text=\"heading semibold sm\">Drawer Header</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">drawer content</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">drawer footer</p>\n  </nve-drawer-footer>\n</nve-drawer>\n",
      "summary": "Large drawer size for comprehensive content like detailed forms or settings panels. Use when users need significant screen space for complex tasks without leaving the current page context.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "drawer-non-closable",
      "name": "NonClosable",
      "template": "<nve-button id=\"open-btn\">open</nve-button>\n<nve-drawer hidden modal>\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">drawer content</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">drawer footer</p>\n  </nve-drawer-footer>\n</nve-drawer>\n<script type=\"module\">\n  const drawer = document.querySelector(\"nve-drawer\");\n  const open = document.querySelector(\"#open-btn\");\n  const cancel = document.querySelector(\"#cancel-btn\");\n  open.addEventListener(\"click\", () => (drawer.hidden = false));\n  cancel.addEventListener(\"click\", () => (drawer.hidden = true));\n</script>\n",
      "summary": "Non-closable drawer requiring explicit user action to close. Use for critical workflows or multi-step processes where users must complete or explicitly cancel actions, preventing accidental dismissal.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "drawer-position",
      "name": "Position",
      "template": "<div nve-layout=\"row align:center gap:md\">\n  <nve-button popovertarget=\"popover-top\">open top</nve-button>\n  <nve-button popovertarget=\"popover-left\">open left</nve-button>\n  <nve-button popovertarget=\"popover-right\">open right</nve-button>\n  <nve-button popovertarget=\"popover-bottom\">open bottom</nve-button>\n</div>\n<nve-drawer id=\"popover-top\" closable modal position=\"top\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Top</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\" style=\"height: 200px\">some text content in a top closable drawer</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">some text footer content</p>\n  </nve-drawer-footer>\n</nve-drawer>\n<nve-drawer id=\"popover-left\" closable modal position=\"left\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Left</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">drawer content</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">drawer footer</p>\n  </nve-drawer-footer>\n</nve-drawer>\n<nve-drawer id=\"popover-right\" closable modal position=\"right\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Right</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">some text content in a right closable drawer</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">some text footer content</p>\n  </nve-drawer-footer>\n</nve-drawer>\n<nve-drawer id=\"popover-bottom\" closable modal position=\"bottom\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Bottom</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\" style=\"height: 200px\">some text content in a bottom closable drawer</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">some text footer content</p>\n  </nve-drawer-footer>\n</nve-drawer>\n",
      "summary": "Drawer positioning from all four screen edges. Use position based on content type and user workflow: right for details/settings, left for navigation, top/bottom for notifications or quick actions that span the width.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "drawer-legacy-position",
      "name": "LegacyPosition",
      "template": "<div nve-layout=\"row align:center gap:md\" style=\"height: 95vh\">\n  <nve-button class=\"drawer-btn-left\">open left</nve-button>\n  <nve-button class=\"drawer-btn-right\">open right</nve-button>\n  <nve-button class=\"drawer-btn-bottom\">open bottom</nve-button>\n</div>\n<nve-drawer closable modal hidden position=\"left\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Left</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">drawer content</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">drawer footer</p>\n  </nve-drawer-footer>\n</nve-drawer>\n<nve-drawer closable modal hidden position=\"right\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Right</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">some text content in a right closable drawer</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">some text footer content</p>\n  </nve-drawer-footer>\n</nve-drawer>\n<nve-drawer closable modal hidden position=\"bottom\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Bottom</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">some text content in a bottom closable drawer</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">some text footer content</p>\n  </nve-drawer-footer>\n</nve-drawer>\n<script type=\"module\">\n  const leftDrawer = document.querySelector('nve-drawer[position=\"left\"]');\n  document.querySelector(\".drawer-btn-left\").addEventListener(\"click\", () => {\n    leftDrawer.position = \"left\";\n    leftDrawer.hidden = false;\n  });\n  const rightDrawer = document.querySelector('nve-drawer[position=\"right\"]');\n  document.querySelector(\".drawer-btn-right\").addEventListener(\"click\", () => {\n    rightDrawer.position = \"right\";\n    rightDrawer.hidden = false;\n  });\n  const bottomDrawer = document.querySelector('nve-drawer[position=\"bottom\"]');\n  document.querySelector(\".drawer-btn-bottom\").addEventListener(\"click\", () => {\n    bottomDrawer.position = \"bottom\";\n    bottomDrawer.hidden = false;\n  });\n  leftDrawer.addEventListener(\"close\", () => (leftDrawer.hidden = true));\n  rightDrawer.addEventListener(\"close\", () => (rightDrawer.hidden = true));\n  bottomDrawer.addEventListener(\"close\", () => (bottomDrawer.hidden = true));\n</script>\n",
      "summary": "Legacy drawer positioning with manual visibility management. Uses an older pattern with programmatic position control and event handling for backward compatibility.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "drawer-inline",
      "name": "Inline",
      "template": "<div nve-layout=\"row align:horizontal-stretch\">\n  <div nve-layout=\"column gap:md align:stretch\">\n    <nve-card style=\"height: 200px\">\n      <nve-card-content>\n        <nve-button popovertarget=\"drawer\">inline drawer</nve-button>\n      </nve-card-content>\n    </nve-card>\n    <nve-card style=\"height: 200px\"></nve-card>\n  </div>\n  <nve-drawer id=\"drawer\" closable modal inline position=\"right\">\n    <nve-drawer-header>\n      <h3 nve-text=\"heading semibold sm\">Drawer Header</h3>\n    </nve-drawer-header>\n    <nve-drawer-content>\n      <p nve-text=\"body\">drawer content</p>\n    </nve-drawer-content>\n    <nve-drawer-footer>\n      <p nve-text=\"body\">drawer footer</p>\n    </nve-drawer-footer>\n  </nve-drawer>\n</div>\n",
      "summary": "Inline drawer constrained within a parent container rather than full viewport. Perfect for detail panels within cards or sections, maintaining context without overlaying the entire application.",
      "description": "",
      "composition": true,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "drawer-inline-visible",
      "name": "InlineVisible",
      "template": "<div nve-layout=\"row align:horizontal-stretch\">\n  <div nve-layout=\"column gap:md align:stretch\">\n    <nve-card style=\"height: 200px\">\n      <nve-card-content> open inline drawer </nve-card-content>\n    </nve-card>\n    <nve-card style=\"height: 200px\"></nve-card>\n  </div>\n  <nve-drawer id=\"drawer\" inline position=\"right\">\n    <nve-drawer-header>\n      <h3 nve-text=\"heading semibold sm\">Drawer Header</h3>\n    </nve-drawer-header>\n    <nve-drawer-content>\n      <p nve-text=\"body\">drawer content</p>\n    </nve-drawer-content>\n    <nve-drawer-footer>\n      <p nve-text=\"body\">drawer footer</p>\n    </nve-drawer-footer>\n  </nve-drawer>\n</div>\n",
      "summary": "Inline drawer in persistent open state for always-visible side panels. Use for navigation, filters, or contextual information that should remain accessible while users interact with main content.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "drawer-legacy-inline",
      "name": "LegacyInline",
      "template": "<div nve-layout=\"row align:stretch\">\n  <div nve-layout=\"column gap:md align:horizontal-stretch\">\n    <nve-card style=\"height: 200px\">\n      <nve-card-content>\n        <nve-button>open inline drawer</nve-button>\n      </nve-card-content>\n    </nve-card>\n    <nve-card style=\"height: 200px\"></nve-card>\n  </div>\n  <nve-drawer hidden closable modal inline position=\"right\">\n    <nve-drawer-header>\n      <h3 nve-text=\"heading semibold sm\">Drawer Header</h3>\n    </nve-drawer-header>\n    <nve-drawer-content>\n      <p nve-text=\"body\">drawer content</p>\n    </nve-drawer-content>\n    <nve-drawer-footer>\n      <p nve-text=\"body\">drawer footer</p>\n    </nve-drawer-footer>\n  </nve-drawer>\n</div>\n<script type=\"module\">\n  const drawer = document.querySelector(\"nve-drawer\");\n  const open = document.querySelector(\"nve-button\");\n  open.addEventListener(\"click\", () => (drawer.hidden = false));\n  drawer.addEventListener(\"close\", () => (drawer.hidden = true));\n</script>\n",
      "summary": "Legacy inline drawer pattern with manual visibility control. Uses an older implementation for inline drawer management; prefer the modern popovertarget API for new implementations.",
      "description": "",
      "composition": true,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "drawer-legacy-behavior-trigger",
      "name": "LegacyBehaviorTrigger",
      "template": "<nve-button id=\"drawer-btn\">open</nve-button>\n<nve-drawer behavior-trigger trigger=\"drawer-btn\" closable modal hidden position=\"right\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">drawer content</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">drawer footer</p>\n  </nve-drawer-footer>\n</nve-drawer>\n",
      "summary": "Legacy behavior-trigger pattern for automatic drawer lifecycle management. Deprecated approach that auto-manages visibility and state, prefer modern popovertarget API for new implementations.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    }
  ]
}