{
  "entrypoint": "@nvidia-elements/core/internal/controllers/popover.examples.json",
  "items": [
    {
      "id": "internal-controllers-popover-anchor",
      "name": "Anchor",
      "template": "<nve-tooltip id=\"popover-1\" anchor=\"btn-2\">tooltip 1</nve-tooltip>\n<nve-tooltip id=\"popover-2\" anchor=\"btn-1\">tooltip 2</nve-tooltip>\n<div nve-layout=\"row gap:xs align:center\">\n  <nve-button id=\"btn-1\" popovertarget=\"popover-1\">button 1</nve-button>\n  <nve-button id=\"btn-2\" popovertarget=\"popover-2\">button 2</nve-button>\n</div>\n",
      "summary": "Anchor-based positioning where popovers anchor to specific elements rather than their triggers.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "internal-controllers-popover-nested",
      "name": "Nested",
      "template": "<style>\n  #root-inner {\n    height: 2000px;\n  }\n</style>\n<nve-dialog closable modal>\n  <h3 nve-text=\"heading\">Dialog</h3>\n  <p nve-text=\"body\" style=\"margin-bottom: 48px\">hello there</p>\n  <nve-button id=\"dropdown-btn\">search</nve-button>\n  <nve-dropdown anchor=\"dropdown-btn\" closable position=\"bottom\" alignment=\"start\">\n    <nve-search rounded>\n      <label>search dataset</label>\n      <nve-icon-button\n        id=\"tooltip-btn\"\n        icon-name=\"information-circle-stroke\"\n        container=\"flat\"\n        aria-label=\"more details\"\n        slot=\"label\"\n      ></nve-icon-button>\n      <input type=\"search\" placeholder=\"search\" />\n    </nve-search>\n    <nve-tooltip anchor=\"tooltip-btn\" position=\"top\">hello there</nve-tooltip>\n  </nve-dropdown>\n</nve-dialog>\n<nve-notification closable position=\"bottom\" alignment=\"end\">\n  <h3 nve-text=\"label\">notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n",
      "summary": "Nested popovers within dialogs and notifications, with proper layering and stacking order.",
      "description": "",
      "composition": true,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "internal-controllers-popover-programmatic-trigger",
      "name": "ProgrammaticTrigger",
      "template": "<nve-toast hidden close-timeout=\"3000\">hello there</nve-toast>\n<nve-button>open after 2s</nve-button>\n<script type=\"module\">\n  const toast = document.querySelector(\"nve-toast\");\n  const button = document.querySelector(\"nve-button\");\n  button.addEventListener(\"click\", async () => {\n    await new Promise((r) => setTimeout(r, 2000)); // do an async task then open the popover\n    toast.showPopover();\n  });\n</script>\n",
      "summary": "Programmatic popover control with async operations before showing the popover.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "internal-controllers-popover-interactive",
      "name": "Interactive",
      "template": "<div nve-layout=\"row align:center gap:xl\" style=\"height: 300px\">\n  <nve-tooltip id=\"tooltip\">hello there</nve-tooltip>\n  <nve-button popovertarget=\"tooltip\">tooltip</nve-button>\n  <nve-toast id=\"toast\" close-timeout=\"1500\">copied!</nve-toast>\n  <nve-button popovertarget=\"toast\">toast</nve-button>\n  <nve-drawer id=\"drawer\" closable modal>\n    <nve-drawer-header>\n      <h3 nve-text=\"heading semibold sm\">Title</h3>\n    </nve-drawer-header>\n    <p nve-text=\"body\">some text content in a drawer</p>\n  </nve-drawer>\n  <nve-button popovertarget=\"drawer\">drawer</nve-button>\n  <nve-dropdown id=\"dropdown\" closable>\n    <h3 nve-text=\"heading\">Title</h3>\n    <p nve-text=\"body\">some text content in a dropdown</p>\n  </nve-dropdown>\n  <nve-button popovertarget=\"dropdown\">dropdown</nve-button>\n  <nve-dialog id=\"dialog\" closable modal>\n    <h3 nve-text=\"heading\">Title</h3>\n    <p nve-text=\"body\">some text content in a closable dialog</p>\n  </nve-dialog>\n  <nve-button popovertarget=\"dialog\">dialog</nve-button>\n  <nve-notification id=\"notification\" closable position=\"bottom\" alignment=\"end\" close-timeout=\"2000\">\n    <h3 nve-text=\"label\">notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-button popovertarget=\"notification\">notification snackbar</nve-button>\n</div>\n",
      "summary": "Interactive showcase of all popover types (tooltip, toast, drawer, dropdown, dialog, notification) using modern popovertarget API.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "internal-controllers-popover-legacy-interactive",
      "name": "LegacyInteractive",
      "template": "<div nve-layout=\"row align:center gap:xl\" style=\"height: 300px\">\n  <nve-tooltip trigger=\"tooltip-btn\" behavior-trigger position=\"top\" hidden>hello there</nve-tooltip>\n  <nve-button id=\"tooltip-btn\">tooltip</nve-button>\n  <nve-button id=\"toast-btn\">toast</nve-button>\n  <nve-toast trigger=\"toast-btn\" behavior-trigger position=\"top\" close-timeout=\"1500\" hidden>copied!</nve-toast>\n  <nve-button id=\"drawer-btn\" size=\"sm\">drawer</nve-button>\n  <nve-drawer trigger=\"drawer-btn\" behavior-trigger hidden closable modal>\n    <nve-drawer-header>\n      <h3 nve-text=\"heading semibold sm\">Title</h3>\n    </nve-drawer-header>\n    <p nve-text=\"body\">some text content in a drawer</p>\n  </nve-drawer>\n  <nve-button id=\"dropdown-btn\">dropdown</nve-button>\n  <nve-dropdown trigger=\"dropdown-btn\" behavior-trigger closable hidden>\n    <h3 nve-text=\"heading\">Title</h3>\n    <p nve-text=\"body\">some text content in a dropdown</p>\n  </nve-dropdown>\n  <nve-button id=\"dialog-btn\">dialog</nve-button>\n  <nve-dialog trigger=\"dialog-btn\" behavior-trigger closable modal hidden>\n    <h3 nve-text=\"heading\">Title</h3>\n    <p nve-text=\"body\">some text content in a closable dialog</p>\n  </nve-dialog>\n  <nve-button id=\"notification-btn\">notification snackbar</nve-button>\n  <nve-notification\n    trigger=\"notification-btn\"\n    behavior-trigger\n    hidden\n    closable\n    position=\"bottom\"\n    alignment=\"end\"\n    close-timeout=\"2000\"\n  >\n    <h3 nve-text=\"label\">notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n</div>\n",
      "summary": "Legacy implementation showing all popover types using the older trigger/behavior-trigger API for backward compatibility.",
      "description": "",
      "deprecated": true,
      "composition": true,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "internal-controllers-popover-closable",
      "name": "Closable",
      "template": "<nve-button popovertarget=\"popover\">open dialog</nve-button>\n<nve-dialog id=\"popover\" modal>\n  <p nve-text=\"body\">Press \"escape\" key to close.</p>\n</nve-dialog>\n",
      "summary": "Simple modal dialog with keyboard accessibility, including escape key to close functionality.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "internal-controllers-popover-invoker-command",
      "name": "InvokerCommand",
      "template": "<nve-button commandfor=\"popover\" command=\"toggle-popover\">toggle-popover</nve-button>\n<nve-button commandfor=\"popover\" command=\"show-popover\">show-popover</nve-button>\n<nve-toggletip id=\"popover\">\n  toggletip\n  <nve-button commandfor=\"popover\" command=\"hide-popover\">hide-popover</nve-button>\n</nve-toggletip>\n",
      "summary": "example of declarative popovers using the Invoker Commands API",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "internal-controllers-popover-event-bubbling",
      "name": "EventBubbling",
      "template": "<div style=\"width: 100vw; height: 100vh\">\n  <p nve-text=\"body\" id=\"event-example\">event:</p>\n  <nve-button popovertarget=\"event-example-dialog\">open</nve-button>\n  <nve-dialog id=\"event-example-dialog\" closable modal (close)=\"close($event)\" (open)=\"open($event)\">\n    <nve-dialog-header>Header</nve-dialog-header>\n    <div>\n      <nve-button popovertarget=\"event-example-dropdown\">show dropdown</nve-button>\n    </div>\n    <nve-dropdown id=\"event-example-dropdown\"> dropdown content </nve-dropdown>\n  </nve-dialog>\n</div>\n<script type=\"module\">\n  const dialog = document.querySelector(\"#event-example-dialog\");\n  const eventLabel = document.querySelector(\"#event-example\");\n  // Custom events like many standard DOM events bubble. By listening to\n  // larger DOM trees check which element dispatched the source event\n  dialog.addEventListener(\"open\", (e) => {\n    eventLabel.innerText = \"open: \" + e.target.localName;\n  });\n  dialog.addEventListener(\"close\", (e) => {\n    eventLabel.innerText = \"close: \" + e.target.localName;\n  });\n</script>\n",
      "summary": "Custom events like many standard DOM events bubble. When listening to larger DOM trees, check which element dispatched the source event.",
      "description": "",
      "composition": true,
      "tags": []
    }
  ]
}