{
  "entrypoint": "@nvidia-elements/forms/examples/light.examples.json",
  "items": [
    {
      "id": "forms-examples-light-card-toggle",
      "name": "CardToggle",
      "template": "<form nve-layout=\"column gap:lg pad:lg\">\n  <ui-light-card value='{\"status\": \"on\", \"dim\": 75}' name=\"office-light\"></ui-light-card>\n  <pre id=\"light-card-value\"></pre>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"form\");\n  const pre = document.querySelector(\"#light-card-value\");\n  const lightCard = document.querySelector('ui-light-card[name=\"office-light\"]');\n  pre.textContent = JSON.stringify(lightCard.value, null, 2);\n  form.addEventListener(\"change\", (e) => {\n    pre.textContent = JSON.stringify(lightCard.value, null, 2);\n    console.log(\"change\", e.target.value, Object.fromEntries(new FormData(form)));\n  });\n  form.addEventListener(\"input\", (e) => {\n    pre.textContent = JSON.stringify(lightCard.value, null, 2);\n    console.log(\"input\", e.target.value, Object.fromEntries(new FormData(form)));\n  });\n</script>\n",
      "summary": "Light card form control with toggle and dim range inputs.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "forms-examples-light-events",
      "name": "Events",
      "template": "<form id=\"novalidate-form\" nve-layout=\"column gap:lg pad:lg\">\n  <ui-light-card novalidate name=\"novalidate-light\" value='{\"status\": \"on\", \"dim\": 75}'></ui-light-card>\n  <pre></pre>\n  <div nve-layout=\"row gap:sm\">\n    <button type=\"button\">set invalid value</button>\n    <button type=\"reset\">reset</button>\n    <button type=\"submit\">submit</button>\n  </div>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"#novalidate-form\");\n  const pre = form.querySelector(\"pre\");\n  const button = form.querySelector(\"button\");\n  const light = form.querySelector('[name=\"novalidate-light\"]');\n  pre.textContent = JSON.stringify(light.value, null, 2);\n  button.addEventListener(\"click\", () => {\n    light.value = { status: \"invalid\", dim: -1 };\n  });\n  form.addEventListener(\"change\", (e) => {\n    pre.textContent = JSON.stringify(light.value, null, 2);\n    console.log(\"change\", e.target.value);\n  });\n  form.addEventListener(\"input\", (e) => {\n    pre.textContent = JSON.stringify(light.value, null, 2);\n    console.log(\"input\", e.target.value);\n  });\n  form.addEventListener(\"submit\", (e) => {\n    e.preventDefault();\n    pre.textContent = JSON.stringify(light.value, null, 2);\n    console.log(\"submit\", Object.fromEntries(new FormData(form)));\n  });\n  form.addEventListener(\"reset\", (e) => {\n    // reset event fires before the value is reset\n    setTimeout(() => {\n      pre.textContent = JSON.stringify(light.value, null, 2);\n      console.log(\"reset\", Object.fromEntries(new FormData(form)));\n    });\n  });\n  light.addEventListener(\"invalid\", (e) => {\n    pre.textContent = JSON.stringify(light.value, null, 2);\n    console.log(\"invalid\", Object.fromEntries(new FormData(form)));\n  });\n</script>\n",
      "summary": "Light card form events including submit, reset, and invalid state handling.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    }
  ]
}