{
  "element": "nve-notification",
  "entrypoint": "@nvidia-elements/core/notification/notification.examples.json",
  "items": [
    {
      "id": "notification",
      "name": "Default",
      "template": "<nve-notification id=\"notification\" position=\"top\" 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\">button</nve-button>\n",
      "summary": "Basic notification with auto-dismiss timeout for temporary feedback messages. Use notifications for system-generated alerts, confirmations, or status updates that don't require immediate user action, automatically dismissing after a set duration.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "notification-actions",
      "name": "Actions",
      "template": "<nve-notification position=\"center\">\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n  <div nve-layout=\"row gap:sm align:right\">\n    <nve-button container=\"inline\">Dismiss</nve-button>\n    <nve-button container=\"inline\">Accept</nve-button>\n  </div>\n</nve-notification>\n",
      "summary": "Notification with actions for immediate user response. Use notifications with actions when the notification requires user decision-making (like \"Retry\", \"View Details\", or \"Undo\"), making the next step clear and reducing friction in error recovery or task completion flows.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "notification-custom-status",
      "name": "CustomStatus",
      "template": "<nve-notification style=\"--status-color: var(--nve-ref-color-purple-plum-800)\" position=\"center\">\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n  <nve-icon slot=\"icon\" name=\"sparkles\" aria-label=\"Info\"></nve-icon>\n  <div nve-layout=\"row align:right\">\n    <nve-button container=\"inline\">Action</nve-button>\n  </div>\n</nve-notification>\n",
      "summary": "Custom status color for notification. Use custom status color and icon slot to convey a different meaning than the default status color. Use sparingly as it can add unnecessary cognitive load to the user.",
      "description": "",
      "composition": true,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "notification-visual",
      "name": "Visual",
      "template": "<nve-notification position=\"center\">\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n",
      "summary": "Standard notification layout with title and body content in centered positioning for consistent notification structure.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "notification-content-wrap",
      "name": "ContentWrap",
      "template": "<nve-notification position=\"center\">\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\" style=\"width: 230px\">\n    some text content in a notification with some really long text in it that just keeps going...\n  </p>\n</nve-notification>\n",
      "summary": "Notification with text wrapping for longer content. Use when notification messages exceed single-line length, but keep content concise for better readability and user comprehension.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "notification-events",
      "name": "Events",
      "template": "<nve-notification id=\"notification\" position=\"top\" close-timeout=\"2000\" closable>\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\">button</nve-button>\n<script type=\"module\">\n  const notification = document.querySelector(\"nve-notification\");\n  notification.addEventListener(\"beforetoggle\", () => console.log(\"beforetoggle\"));\n  notification.addEventListener(\"toggle\", () => console.log(\"toggle\"));\n  notification.addEventListener(\"close\", () => console.log(\"close\"));\n  notification.addEventListener(\"open\", () => console.log(\"open\"));\n</script>\n",
      "summary": "Event handling for notification lifecycle events. Useful for adding custom behavior when notification state changes.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "notification-interactive-group",
      "name": "InteractiveGroup",
      "template": "<nve-notification-group position=\"bottom\" alignment=\"end\" id=\"group\"></nve-notification-group>\n<nve-button>generate</nve-button>\n<script type=\"module\">\n  const button = document.querySelector(\"nve-button\");\n  button.addEventListener(\"click\", () => {\n    const notification = document.createElement(\"nve-notification\");\n    notification.closable = true;\n    notification.status = [\"warning\", \"danger\", \"success\", \"accent\", undefined][Math.floor(Math.random() * 5)];\n    notification.innerHTML =\n      '<h3 nve-text=\"label\">' +\n      (notification.status ?? \"default\") +\n      '</h3><p nve-text=\"body\">some text content in a notification</p>';\n    notification.closeTimeout = 1000 * (document.querySelectorAll(\"nve-notification\").length + 1);\n    notification.addEventListener(\"close\", () => notification.remove(), { once: true });\n    notification.position = \"bottom\";\n    notification.alignment = \"end\";\n    document.querySelector(\"nve-notification-group\").prepend(notification);\n  });\n</script>\n",
      "summary": "Dynamic notification group with programmatic creation and stacking. Perfect for toast-style notifications generated by user actions or system events, with progressive timeout and automatic removal patterns for managing many notifications.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "notification-status",
      "name": "Status",
      "template": "<nve-notification-group position=\"center\">\n  <nve-notification>\n    <h3 nve-text=\"label\">Default</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification status=\"accent\">\n    <h3 nve-text=\"label\">Accent</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification status=\"success\">\n    <h3 nve-text=\"label\">Success</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification status=\"warning\">\n    <h3 nve-text=\"label\">Warning</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification status=\"danger\">\n    <h3 nve-text=\"label\">Danger</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n</nve-notification-group>\n",
      "summary": "Notification status variants for different message types and severity levels. Use status to convey message importance: success for confirmations, warning for cautions, danger for errors, and accent for general information requiring attention.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "notification-alignment",
      "name": "Alignment",
      "template": "<nve-notification position=\"top\">\n  <h3 nve-text=\"label\">Top</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"top\" alignment=\"start\">\n  <h3 nve-text=\"label\">Top Start</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"top\" alignment=\"end\">\n  <h3 nve-text=\"label\">Top End</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"right\">\n  <h3 nve-text=\"label\">Right</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"right\" alignment=\"start\">\n  <h3 nve-text=\"label\">Right Start</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"right\" alignment=\"end\">\n  <h3 nve-text=\"label\">Right End</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"bottom\">\n  <h3 nve-text=\"label\">Bottom</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"bottom\" alignment=\"start\">\n  <h3 nve-text=\"label\">Bottom Start</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"bottom\" alignment=\"end\">\n  <h3 nve-text=\"label\">Bottom End</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"left\">\n  <h3 nve-text=\"label\">Left</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"left\" alignment=\"start\">\n  <h3 nve-text=\"label\">Left Start</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"left\" alignment=\"end\">\n  <h3 nve-text=\"label\">Left End</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n",
      "summary": "Notification positioning and alignment options for flexible screen placement. Use consistent positioning for notification types: bottom-right for success confirmations, top-center for warnings, accommodating different screen sizes and user attention patterns.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "notification-position",
      "name": "Position",
      "template": "<nve-notification position=\"top\">\n  <h3 nve-text=\"label\">Position Top</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"right\">\n  <h3 nve-text=\"label\">Position Right</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"bottom\">\n  <h3 nve-text=\"label\">Position Bottom</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"left\">\n  <h3 nve-text=\"label\">Position Left</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n",
      "summary": "Basic notification positioning at screen edges without alignment specification. Use edge positions for standard notification placement, choosing position based on content importance and user workflow patterns.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "notification-position-group",
      "name": "PositionGroup",
      "template": "<nve-notification-group position=\"top\">\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n</nve-notification-group>\n<nve-notification-group position=\"right\">\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n</nve-notification-group>\n<nve-notification-group position=\"bottom\">\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n</nve-notification-group>\n<nve-notification-group position=\"left\">\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n</nve-notification-group>\n",
      "summary": "Grouped notifications with consistent positioning for stacking many messages. Use notification groups to manage many alerts in an organized queue, maintaining visual consistency and providing users with a clear notification center.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "notification-drawer",
      "name": "Drawer",
      "template": "<nve-drawer closable position=\"right\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading semibold sm\">Notifications</h3>\n  </nve-drawer-header>\n  <nve-notification closable container=\"flat\">\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">This is a notification in a notification drawer, messages should be succinct.</p>\n  </nve-notification>\n  <nve-notification status=\"accent\" container=\"flat\" closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">This is a notification in a notification drawer, messages should be succinct.</p>\n  </nve-notification>\n  <nve-notification status=\"success\" container=\"flat\" closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">This is a notification in a notification drawer, messages should be succinct.</p>\n  </nve-notification>\n  <nve-notification status=\"warning\" container=\"flat\" closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">This is a notification in a notification drawer, messages should be succinct.</p>\n  </nve-notification>\n  <nve-notification status=\"danger\" container=\"flat\" closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">This is a notification in a notification drawer, messages should be succinct.</p>\n  </nve-notification>\n  <nve-drawer-footer>\n    <div nve-layout=\"grid gap:sm span-items:6\">\n      <nve-button interaction=\"destructive\" container=\"flat\">Clear All</nve-button>\n      <nve-button>Mark All as Read</nve-button>\n    </div>\n  </nve-drawer-footer>\n</nve-drawer>\n",
      "summary": "Notification center pattern using drawer for persistent notification management. Perfect for applications with frequent notifications, allowing users to review, manage, and act on many notifications in a dedicated space with bulk actions.",
      "description": "",
      "composition": true,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "notification-shadow-root",
      "name": "ShadowRoot",
      "template": "<test-notification-shadow-root></test-notification-shadow-root>\n<script type=\"module\">\n  customElements.define(\n    \"test-notification-shadow-root\",\n    class TestNotificationShadowRoot extends HTMLElement {\n      constructor() {\n        super();\n        this._shadow = this.attachShadow({ mode: \"open\" });\n        const template = document.createElement(\"template\");\n        template.innerHTML = `\n        <nve-notification position=\"top\">\n          top\n        </nve-notification>\n        <nve-notification position=\"top\" alignment=\"start\">\n          top start\n        </nve-notification>\n        <nve-notification position=\"top\" alignment=\"end\">\n          top end\n        </nve-notification>\n        <nve-notification position=\"right\">\n          right\n        </nve-notification>\n        <nve-notification position=\"right\" alignment=\"start\">\n          right start\n        </nve-notification>\n        <nve-notification position=\"right\" alignment=\"end\">\n          right end\n        </nve-notification>\n        <nve-notification position=\"bottom\">\n          bottom\n        </nve-notification>\n        <nve-notification position=\"bottom\" alignment=\"start\">\n          bottom start\n        </nve-notification>\n        <nve-notification position=\"bottom\" alignment=\"end\">\n          bottom end\n        </nve-notification>\n        <nve-notification position=\"left\">\n          left\n        </nve-notification>\n        <nve-notification position=\"left\" alignment=\"start\">\n          left start\n        </nve-notification>\n        <nve-notification position=\"left\" alignment=\"end\">\n          left end\n        </nve-notification>\n      `;\n        this._shadow.appendChild(template.content);\n      }\n    },\n  );\n</script>\n",
      "summary": "Notification functionality within shadow DOM for Web Component architectures. Verifies proper notification positioning and behavior when used inside encapsulated component boundaries, essential for component libraries.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "notification-layers",
      "name": "Layers",
      "template": "<nve-button>Notification</nve-button>\n<nve-button popovertarget=\"dialog\">Dialog</nve-button>\n<nve-notification-group position=\"bottom\" alignment=\"end\" id=\"group\"></nve-notification-group>\n<nve-dialog id=\"dialog\" modal closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">Notification</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">This should not cause the dialog to close</p>\n</nve-dialog>\n<script type=\"module\">\n  const button = document.querySelector(\"nve-button\");\n  button.addEventListener(\"click\", () => {\n    const notification = document.createElement(\"nve-notification\");\n    notification.closable = true;\n    notification.status = [\"warning\", \"danger\", \"success\", \"accent\", undefined][Math.floor(Math.random() * 5)];\n    notification.innerHTML =\n      '<h3 nve-text=\"label\">' +\n      (notification.status ?? \"default\") +\n      '</h3><p nve-text=\"body\">some text content in a notification</p>';\n    notification.closeTimeout = 3000 * (document.querySelectorAll(\"nve-notification\").length + 1);\n    notification.addEventListener(\"close\", () => notification.remove(), { once: true });\n    notification.position = \"bottom\";\n    notification.alignment = \"end\";\n    document.querySelector(\"nve-notification-group\").prepend(notification);\n  });\n</script>\n",
      "summary": "Notification layering with modal dialogs for proper stacking context. Ensures notifications appear above dialogs without interfering with modal interactions, crucial for complex UI layering scenarios.",
      "description": "",
      "composition": true,
      "tags": [
        "test-case"
      ]
    }
  ]
}