{
  "element": "nve-copy-button",
  "entrypoint": "@nvidia-elements/core/copy-button/copy-button.examples.json",
  "items": [
    {
      "id": "copy-button",
      "name": "Default",
      "template": "<nve-copy-button value=\"hello\" aria-label=\"copy value\" behavior-copy></nve-copy-button>\n",
      "summary": "Standard copy button for copying text to the clipboard on click.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "copy-button-disabled",
      "name": "Disabled",
      "template": "<nve-copy-button disabled value=\"hello\"></nve-copy-button>\n",
      "summary": "Copy button in disabled state. Useful for showing when copying is not available or when the user doesn't have permission to copy.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "copy-button-flat",
      "name": "Flat",
      "template": "<nve-copy-button container=\"flat\" value=\"hello\"></nve-copy-button>\n<nve-copy-button container=\"flat\" disabled value=\"hello\"></nve-copy-button>\n",
      "summary": "Copy buttons with flat container styling, showing both enabled and disabled states. Ideal for inline usage where minimal visual impact matters.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "copy-button-behavior-copy",
      "name": "BehaviorCopy",
      "template": "<nve-copy-button value=\"hello\" behavior-copy></nve-copy-button>\n",
      "summary": "Copy button with behavior-copy attribute that automatically handles the copy functionality. Simplifies implementation by providing built-in copy behavior.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "copy-button-size",
      "name": "Size",
      "template": "<nve-copy-button size=\"sm\"></nve-copy-button>\n<nve-copy-button></nve-copy-button>\n<nve-copy-button size=\"lg\"></nve-copy-button>\n",
      "summary": "Copy buttons in different sizes (small, default, large). Useful for adapting to different UI contexts and design requirements.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "copy-button-hint",
      "name": "Hint",
      "template": "<h2 nve-text=\"body lg\" nve-layout=\"row align:vertical-center\">\n  2d628479c...\n  <nve-copy-button\n    container=\"flat\"\n    value=\"2d628479cf2db27cbdebbfe41a42f1c9e07c46a8\"\n    aria-label=\"2d628479cf2db27cbdebbfe41a42f1c9e07c46a8\"\n    behavior-copy\n  ></nve-copy-button>\n</h2>\n",
      "summary": "Copy button integrated with text content, showing how to copy truncated values like commit hashes. Perfect for code snippets, IDs, or other long text that users copy while viewing a shortened version.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "copy-button-icon",
      "name": "Icon",
      "template": "<nve-copy-button value=\"ssh://elements.git\" aria-label=\"copy git branch\" behavior-copy>\n  <nve-icon name=\"branch\" slot=\"icon\"></nve-icon>\n</nve-copy-button>\n",
      "summary": "Copy button with custom icon in the icon slot. Customizes the button appearance while maintaining copy functionality. Useful for context-specific icons like git branches, URLs, or other specialized content.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "copy-button-async-copy",
      "name": "AsyncCopy",
      "template": "<nve-copy-button id=\"async-copy-button\" value=\"initial value\" aria-label=\"copy value\" behavior-copy></nve-copy-button>\n<script type=\"module\">\n  const button = document.querySelector(\"#async-copy-button\");\n  button.addEventListener(\"pointerdown\", () => {\n    button.disabled = true;\n    // do an async operation\n    new Promise((resolve) => setTimeout(resolve, 2000)).then(() => {\n      button.value = \"async value\";\n      button.disabled = false;\n      button.dispatchEvent(new Event(\"click\"));\n    });\n  });\n</script>\n",
      "summary": "Advanced pattern for handling long-running copy to clipboard operations.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "copy-button-tooltip-position-override",
      "name": "TooltipPositionOverride",
      "template": "<style>\n  nve-copy-button.override-position-example {\n    &::part(tooltip-arrow) {\n      position-area: right center;\n      translate: -50% 0%;\n      transform: translate(-2px, 0) rotate(45deg);\n    }\n  }\n</style>\n<nve-copy-button\n  class=\"override-position-example\"\n  value=\"hello\"\n  aria-label=\"copy value\"\n  behavior-copy\n  style=\"position: absolute; top: 12px; right: 12px\"\n></nve-copy-button>\n",
      "summary": "Popover position override in a copy button.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    }
  ]
}