{
  "element": "nve-dropzone",
  "entrypoint": "@nvidia-elements/core/dropzone/dropzone.examples.json",
  "items": [
    {
      "id": "dropzone",
      "name": "Default",
      "template": "<nve-dropzone name=\"files\" style=\"--min-height: 200px\"></nve-dropzone>\n",
      "summary": "Basic file dropzone with drag-and-drop area for file upload interactions.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "dropzone-icon",
      "name": "Icon",
      "template": "<style>\n  nve-dropzone nve-icon {\n    --color: red;\n    background: var(--nve-sys-layer-canvas-accent-background);\n  }\n  nve-dropzone[highlighted] nve-icon,\n  nve-dropzone:hover nve-icon {\n    --color: var(--nve-sys-text-white-color);\n    background: var(--nve-sys-accent-primary-background);\n  }\n</style>\n<nve-dropzone name=\"files\">\n  <nve-icon slot=\"icon\" name=\"document\"></nve-icon>\n</nve-dropzone>\n",
      "summary": "Dropzone with custom icon slot showing visual feedback on hover and highlight states.",
      "description": "",
      "composition": false,
      "tags": [
        "theme"
      ]
    },
    {
      "id": "dropzone-form",
      "name": "Form",
      "template": "<form id=\"form-demo\" nve-layout=\"column gap:lg\">\n  <section>\n    <nve-control>\n      <nve-dropzone name=\"files\" accept=\"image/gif, image/jpeg, image/png\" max-file-size=\"1048576\"></nve-dropzone>\n      <nve-control-message error=\"typeMismatch\"\n        >Unsupported file type — this upload only accepts images</nve-control-message\n      >\n      <nve-control-message error=\"rangeOverflow\">File too big - maximum 1.00 MB allowed</nve-control-message>\n    </nve-control>\n  </section>\n  <nve-button type=\"submit\">submit</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"#form-demo\");\n  const dropzone = document.querySelector(\"#form-demo nve-dropzone\");\n  dropzone.addEventListener(\"change\", (e) => {\n    console.log(\"change\", e.target.value);\n    const files = e.target.value;\n    console.log(\"Validity:\", e.target.validity);\n    console.log(\"Validation Message:\", e.target.validationMessage);\n  });\n  form.addEventListener(\"submit\", (e) => {\n    e.preventDefault();\n    const formData = new FormData(e.target);\n    const files = formData.getAll(\"files\");\n    if (form.checkValidity()) {\n      console.log(\"Form submitted successfully!\");\n    } else {\n      console.log(\"Form validation failed\");\n    }\n  });\n</script>\n",
      "summary": "Dropzone integrated with form validation showing file type and size constraint errors.",
      "description": "",
      "composition": true,
      "tags": []
    }
  ]
}