{
  "element": "nve-resize-handle",
  "entrypoint": "@nvidia-elements/core/resize-handle/resize-handle.examples.json",
  "items": [
    {
      "id": "resize-handle",
      "name": "Default",
      "template": "<nve-resize-handle></nve-resize-handle>\n",
      "summary": "Basic horizontal resize handle for draggable panel dividers and split pane interfaces.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "resize-handle-vertical",
      "name": "Vertical",
      "template": "<div style=\"height: 200px\">\n  <nve-resize-handle orientation=\"vertical\"></nve-resize-handle>\n</div>\n",
      "summary": "Vertical resize handle for side-by-side panel layouts and horizontal split panes.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "resize-handle-split-horizontal",
      "name": "SplitHorizontal",
      "template": "<section\n  id=\"split-horizontal-demo\"\n  style=\"\n    display: grid;\n    width: 250px;\n    height: 250px;\n    grid-template-rows: 1fr auto 1fr;\n    border: 1px solid var(--nve-ref-border-color);\n  \"\n>\n  <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  <nve-resize-handle min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n  <div></div>\n</section>\n<script type=\"module\">\n  const handle = document.querySelector(\"#split-horizontal-demo nve-resize-handle\");\n  const split = document.querySelector(\"#split-horizontal-demo\");\n  handle.addEventListener(\"input\", (e) => (split.style.gridTemplateRows = \"1fr auto \" + e.target.value + \"px\"));\n</script>\n",
      "summary": "Horizontal split pane with draggable divider that adjusts top and bottom panel heights.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "resize-handle-split-vertical",
      "name": "SplitVertical",
      "template": "<section\n  id=\"split-vertical-demo\"\n  style=\"\n    display: grid;\n    width: 250px;\n    height: 250px;\n    grid-template-columns: 1fr auto 1fr;\n    border: 1px solid var(--nve-ref-border-color);\n  \"\n>\n  <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  <nve-resize-handle orientation=\"vertical\" min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n  <div></div>\n</section>\n<script type=\"module\">\n  const handle = document.querySelector(\"#split-vertical-demo nve-resize-handle\");\n  const split = document.querySelector(\"#split-vertical-demo\");\n  handle.addEventListener(\"input\", (e) => (split.style.gridTemplateColumns = e.target.value + \"px auto 1fr\"));\n</script>\n",
      "summary": "Vertical split pane with draggable divider that adjusts left and right panel widths.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "resize-handle-form",
      "name": "Form",
      "template": "<form id=\"form-demo\" nve-layout=\"column gap:lg\">\n  <section\n    style=\"\n      display: grid;\n      width: 250px;\n      height: 250px;\n      grid-template-rows: 1fr auto 1fr;\n      border: 1px solid var(--nve-ref-border-color);\n    \"\n  >\n    <div></div>\n    <nve-resize-handle name=\"resize\" min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n    <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  </section>\n  <nve-button>submit</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"#form-demo\");\n  const split = document.querySelector(\"#form-demo section\");\n  const handle = document.querySelector(\"#form-demo nve-resize-handle\");\n  form.addEventListener(\"submit\", (e) => {\n    e.preventDefault();\n    console.log(Object.fromEntries(new FormData(form)));\n    console.log(handle.form);\n  });\n  handle.addEventListener(\"change\", (e) => {\n    console.log(\"change\", e.target.value);\n  });\n  handle.addEventListener(\"input\", (e) => {\n    console.log(\"input\", e.target.value);\n    split.style.gridTemplateRows = \"1fr auto \" + e.target.value + \"px\";\n  });\n</script>\n",
      "summary": "Resize handle as a form control with name attribute for submitting resize values.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "resize-handle-prevent",
      "name": "PreventDefault",
      "template": "<form id=\"prevent-default-demo\" nve-layout=\"column gap:lg\">\n  <section\n    style=\"\n      display: grid;\n      width: 250px;\n      height: 250px;\n      grid-template-rows: 1fr auto 1fr;\n      border: 1px solid var(--nve-ref-border-color);\n    \"\n  >\n    <div></div>\n    <nve-resize-handle name=\"resize\" min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n    <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  </section>\n</form>\n<script type=\"module\">\n  const split = document.querySelector(\"#prevent-default-demo section\");\n  const handle = document.querySelector(\"#prevent-default-demo nve-resize-handle\");\n  handle.addEventListener(\"toggle\", (e) => {\n    e.preventDefault();\n    console.log(\"toggle defaultPrevented:\", e.defaultPrevented);\n  });\n  handle.addEventListener(\"input\", (e) => {\n    split.style.gridTemplateRows = \"1fr auto \" + e.target.value + \"px\";\n  });\n</script>\n",
      "summary": "Resize handle with prevented default toggle to disable snap-to-boundary on double-click. Use when the default collapse/expand behavior conflicts with custom resize constraints or when you need full control over toggle logic.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "resize-handle-line-width",
      "name": "LineWidth",
      "template": "<div style=\"height: 200px\">\n  <nve-resize-handle orientation=\"vertical\" style=\"--line-width: 6px\"></nve-resize-handle>\n</div>\n",
      "summary": "Custom line width styling for resize handle visibility using CSS custom property.",
      "description": "",
      "composition": false,
      "tags": [
        "theme"
      ]
    }
  ]
}