{
  "element": "nve-preferences-input",
  "entrypoint": "@nvidia-elements/core/preferences-input/preferences-input.examples.json",
  "items": [
    {
      "id": "preferences-input",
      "name": "Default",
      "template": "<nve-preferences-input\n  name=\"theme\"\n  value='{ \"color-scheme\": \"dark\", \"scale\": \"compact\", \"reduced-motion\": \"true\" }'\n></nve-preferences-input>\n",
      "summary": "Preferences input displaying theme settings (color scheme, scale, reduced motion) for user customization.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "preferences-input-forms",
      "name": "Forms",
      "template": "<form id=\"preferences-input-form\" nve-layout=\"row gap:md\">\n  <div nve-layout=\"column gap:md\">\n    <nve-preferences-input name=\"theme\" value='{ \"color-scheme\": \"light\" }'></nve-preferences-input>\n    <nve-button>submit</nve-button>\n  </div>\n  <pre></pre>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"form\");\n  const preferencesInput = document.querySelector(\"nve-preferences-input\");\n  const pre = document.querySelector(\"form pre\");\n  form.addEventListener(\"change\", renderValues);\n  form.addEventListener(\"input\", renderValues);\n  form.addEventListener(\"submit\", renderValues);\n  pre.innerText = JSON.stringify(preferencesInput.value, null, 2);\n\n  function renderValues(e) {\n    e.preventDefault();\n    console.log(e);\n    pre.innerText = JSON.stringify(preferencesInput.value, null, 2);\n  }\n</script>\n",
      "summary": "Preferences input integrated with form submission, displaying live JSON value updates.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "preferences-input-dropdown",
      "name": "Dropdown",
      "template": "<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n  <nve-icon-button slot=\"suffix\" icon-name=\"gear\" size=\"sm\" popovertarget=\"preferences-input\"></nve-icon-button>\n</nve-page-header>\n<nve-dropdown id=\"preferences-input\" position=\"bottom\" alignment=\"end\">\n  <nve-preferences-input name=\"theme\" value='{ \"color-scheme\": \"dark\" }'></nve-preferences-input>\n</nve-dropdown>\n",
      "summary": "Preferences input embedded in a dropdown menu triggered from a page header settings button.",
      "description": "",
      "composition": true,
      "tags": []
    }
  ]
}