{
  "element": "nve-toast",
  "entrypoint": "@nvidia-elements/core/toast/toast.examples.json",
  "items": [
    {
      "id": "toast",
      "name": "Default",
      "template": "<nve-toast id=\"toast\" close-timeout=\"1500\">hello there</nve-toast>\n<nve-button popovertarget=\"toast\">button</nve-button>\n",
      "summary": "Basic toast with auto-dismiss for brief, non-critical feedback messages. Use toasts for lightweight confirmations like \"Saved\", \"Copied\", or \"Action complete\" that inform users without requiring interaction or disrupting workflow.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "toast-visual",
      "name": "Visual",
      "template": "<nve-toast anchor=\"btn\">hello there</nve-toast>\n<nve-button id=\"btn\">button</nve-button>\n",
      "summary": "Visual example of toast structure with anchor positioning for consistent implementation patterns across your application.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "toast-status",
      "name": "Status",
      "template": "<div nve-layout=\"row align:center\" style=\"height: 200px\">\n  <nve-toast position=\"top\">default</nve-toast>\n  <nve-toast status=\"success\" position=\"right\">success</nve-toast>\n  <nve-toast status=\"warning\" position=\"bottom\">warning</nve-toast>\n  <nve-toast status=\"danger\" position=\"left\">danger</nve-toast>\n</div>\n",
      "summary": "Toast status variants for different feedback types. Use success for confirmations, warning for cautions, and danger for error notifications, helping users quickly identify message importance through color and iconography.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "toast-prominence",
      "name": "Prominence",
      "template": "<nve-toast position=\"top\" prominence=\"muted\">muted</nve-toast>\n",
      "summary": "Muted toast variant for subtle, low-priority feedback. Use muted prominence when the message is informative but shouldn't draw significant attention, maintaining user focus on primary tasks.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "toast-actions",
      "name": "Actions",
      "template": "<div nve-layout=\"row align:center\" style=\"height: 200px\">\n  <nve-toast position=\"top\"> default <nve-button container=\"inline\">action</nve-button> </nve-toast>\n  <nve-toast status=\"success\" position=\"right\"> success <nve-button container=\"inline\">action</nve-button> </nve-toast>\n  <nve-toast status=\"warning\" position=\"bottom\"> warning <nve-button container=\"inline\">action</nve-button> </nve-toast>\n  <nve-toast status=\"danger\" position=\"left\"> danger <nve-button container=\"inline\">action</nve-button> </nve-toast>\n</div>\n",
      "summary": "Toast with inline action buttons for quick follow-up actions. Use sparingly for important actions like \"Undo\" or \"View\", but prefer simple toasts without actions for most feedback to maintain lightweight nature.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "toast-events",
      "name": "Events",
      "template": "<nve-toast id=\"toast\">hello there</nve-toast>\n<nve-button popovertarget=\"toast\">button</nve-button>\n<script type=\"module\">\n  const toast = document.querySelector(\"nve-toast\");\n  toast.addEventListener(\"beforetoggle\", () => console.log(\"beforetoggle\"));\n  toast.addEventListener(\"toggle\", () => console.log(\"toggle\"));\n  toast.addEventListener(\"close\", () => console.log(\"close\"));\n  toast.addEventListener(\"open\", () => console.log(\"open\"));\n</script>\n",
      "summary": "Event handling for toast lifecycle events. Useful for adding custom behavior when toast state changes.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "toast-position",
      "name": "Position",
      "template": "<nve-toast anchor=\"btn\" position=\"top\">top</nve-toast>\n<nve-toast anchor=\"btn\" position=\"right\">right</nve-toast>\n<nve-toast anchor=\"btn\" position=\"bottom\">bottom</nve-toast>\n<nve-toast anchor=\"btn\" position=\"left\">left</nve-toast>\n<nve-button id=\"btn\">button</nve-button>\n",
      "summary": "Toast positioning options relative to screen edges or anchor elements. Position toasts in consistent locations where they won't obscure important content, typically bottom-center or top-right for global feedback.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "toast-alignment",
      "name": "Alignment",
      "template": "<nve-card id=\"card\" style=\"width: 450px; height: 300px\"></nve-card>\n<nve-toast anchor=\"card\" position=\"top\" alignment=\"start\">top start</nve-toast>\n<nve-toast anchor=\"card\" position=\"top\">top center</nve-toast>\n<nve-toast anchor=\"card\" position=\"top\" alignment=\"end\">top end</nve-toast>\n<nve-toast anchor=\"card\" position=\"right\" alignment=\"start\">right start</nve-toast>\n<nve-toast anchor=\"card\" position=\"right\">right center</nve-toast>\n<nve-toast anchor=\"card\" position=\"right\" alignment=\"end\">right end</nve-toast>\n<nve-toast anchor=\"card\" position=\"bottom\" alignment=\"start\">bottom start</nve-toast>\n<nve-toast anchor=\"card\" position=\"bottom\">bottom center</nve-toast>\n<nve-toast anchor=\"card\" position=\"bottom\" alignment=\"end\">bottom end</nve-toast>\n<nve-toast anchor=\"card\" position=\"left\" alignment=\"start\">left start</nve-toast>\n<nve-toast anchor=\"card\" position=\"left\">left center</nve-toast>\n<nve-toast anchor=\"card\" position=\"left\" alignment=\"end\">left end</nve-toast>\n",
      "summary": "Fine-grained toast alignment for precise placement control. Use alignment to position toasts relative to anchor edges, useful for contextual feedback that should appear near specific UI elements.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "toast-legacy-behavior-trigger",
      "name": "LegacyBehaviorTrigger",
      "template": "<div nve-layout=\"row align:center\" style=\"height: 90vh\">\n  <nve-button id=\"btn\">copy to clipboard</nve-button>\n  <nve-toast trigger=\"btn\" behavior-trigger position=\"top\" close-timeout=\"1500\" hidden>copied!</nve-toast>\n</div>\n",
      "summary": "Legacy behavior-trigger pattern for automatic toast lifecycle management. Deprecated approach with manual trigger attributes, prefer modern popovertarget API for simpler toast implementation and better maintainability.",
      "description": "",
      "deprecated": true,
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "toast-shadow-root",
      "name": "ShadowRoot",
      "template": "<toast-test-shadow-root></toast-test-shadow-root>\n<script type=\"module\">\n  customElements.define(\n    \"toast-test-shadow-root\",\n    class ToastTestShadowRoot extends HTMLElement {\n      constructor() {\n        super();\n        this._shadow = this.attachShadow({ mode: \"open\" });\n        const template = document.createElement(\"template\");\n        template.innerHTML = `\n        <style>:host { box-sizing: border-box; }</style>\n        <nve-toast size=\"sm\">center</nve-toast>\n        <nve-toast size=\"sm\" position=\"top\">top center</nve-toast>\n        <nve-toast size=\"sm\" position=\"top\" alignment=\"start\">top start</nve-toast>\n        <nve-toast size=\"sm\" position=\"top\" alignment=\"end\">top end</nve-toast>\n        <nve-toast size=\"sm\" position=\"right\" alignment=\"start\">right start</nve-toast>\n        <nve-toast size=\"sm\" position=\"right\">right center</nve-toast>\n        <nve-toast size=\"sm\" position=\"right\" alignment=\"end\">right end</nve-toast>\n        <nve-toast size=\"sm\" position=\"bottom\" alignment=\"start\">bottom start</nve-toast>\n        <nve-toast size=\"sm\" position=\"bottom\">bottom center</nve-toast>\n        <nve-toast size=\"sm\" position=\"bottom\" alignment=\"end\">bottom end</nve-toast>\n        <nve-toast size=\"sm\" position=\"left\" alignment=\"start\">left start</nve-toast>\n        <nve-toast size=\"sm\" position=\"left\">left center</nve-toast>\n        <nve-toast size=\"sm\" position=\"left\" alignment=\"end\">left end</nve-toast>\n      `;\n        this._shadow.appendChild(template.content);\n      }\n    },\n  );\n</script>\n",
      "summary": "Toast functionality within shadow DOM for Web Component architectures. Proper toast positioning and behavior in encapsulated component environments, essential for component library implementations.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "toast-body-anchor",
      "name": "BodyAnchor",
      "template": "<nve-toast style=\"--background: red\" anchor=\"body\" position=\"center\" alignment=\"center\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: blue\" anchor=\"body\" position=\"top\" alignment=\"start\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: yellow\" anchor=\"body\" position=\"top\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: green\" anchor=\"body\" position=\"top\" alignment=\"end\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: purple\" anchor=\"body\" position=\"bottom\" alignment=\"start\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: orange\" anchor=\"body\" position=\"bottom\">•︎︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: pink\" anchor=\"body\" position=\"bottom\" alignment=\"end\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: brown; margin-right: -250px\" anchor=\"body\" position=\"left\" alignment=\"start\"\n  >•︎•︎•︎•︎•︎•︎</nve-toast\n>\n<nve-toast style=\"--background: gray\" anchor=\"body\" position=\"left\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: black; margin-right: -250px\" anchor=\"body\" position=\"left\" alignment=\"end\"\n  >•︎•︎•︎•︎•︎•︎</nve-toast\n>\n<nve-toast style=\"--background: red; margin-left: -250px\" anchor=\"body\" position=\"right\" alignment=\"start\"\n  >•︎•︎•︎•︎•︎•︎</nve-toast\n>\n<nve-toast style=\"--background: blue\" anchor=\"body\" position=\"right\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: yellow; margin-left: -250px\" anchor=\"body\" position=\"right\" alignment=\"end\"\n  >•︎•︎•︎•︎•︎•︎</nve-toast\n>\n",
      "summary": "Body anchor positioning for toast.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    }
  ]
}