{
  "element": "nve-control",
  "entrypoint": "@nvidia-elements/core/forms/control/control.examples.json",
  "items": [
    {
      "id": "forms-control",
      "name": "Default",
      "template": "<nve-control>\n  <label>label</label>\n  <input />\n  <nve-control-message>message</nve-control-message>\n</nve-control>\n",
      "summary": "Basic form control wrapper with label, input, and validation message structure.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "forms-control-responsive",
      "name": "Responsive",
      "template": "<div\n  nve-layout=\"column gap:lg\"\n  style=\"padding: 12px; border: 1px solid #ccc; overflow-y: auto; resize: horizontal; max-width: 600px\"\n>\n  <nve-input layout=\"horizontal\">\n    <label>text label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n  <nve-select layout=\"horizontal\">\n    <label>select label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-search layout=\"horizontal-inline\">\n    <label>search label</label>\n    <input type=\"search\" placeholder=\"search\" />\n  </nve-search>\n  <nve-checkbox-group layout=\"horizontal-inline\">\n    <label>checkbox label</label>\n    <nve-checkbox>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-range layout=\"horizontal-inline\">\n    <label>label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n  <nve-textarea layout=\"horizontal-inline\">\n    <label>label</label>\n    <textarea></textarea>\n  </nve-textarea>\n</div>\n",
      "summary": "Responsive form controls with layout adaptation in resizable containers.",
      "description": "",
      "composition": true,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "forms-control-layout",
      "name": "Layout",
      "template": "<style>\n  #control-layout {\n    display: flex;\n    gap: 48px;\n    flex-direction: column;\n    min-width: 300px;\n    nve-control {\n      outline: 1px solid red;\n    }\n    nve-control-group {\n      outline: 1px solid blue;\n    }\n  }\n</style>\n<div id=\"control-layout\">\n  <nve-control>\n    <label>vertical</label>\n    <input />\n  </nve-control>\n  <nve-control>\n    <label>vertical</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\n  <nve-control layout=\"horizontal\">\n    <label>horizontal</label>\n    <input />\n  </nve-control>\n  <nve-control layout=\"horizontal\">\n    <label>horizontal</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\n  <nve-control-group layout=\"vertical\">\n    <label>vertical</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control-message>message</nve-control-message>\n  </nve-control-group>\n  <nve-control-group layout=\"vertical\">\n    <label>vertical</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n  </nve-control-group>\n  <nve-control-group layout=\"vertical-inline\">\n    <label>vertical-inline</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control-message>message</nve-control-message>\n  </nve-control-group>\n  <nve-control-group layout=\"vertical-inline\">\n    <label>vertical-inline</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n  </nve-control-group>\n  <nve-control-group layout=\"horizontal\">\n    <label>horizontal</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control-message>message</nve-control-message>\n  </nve-control-group>\n  <nve-control-group layout=\"horizontal\">\n    <label>horizontal</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n  </nve-control-group>\n  <nve-control-group layout=\"horizontal-inline\">\n    <label>horizontal-inline</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control-message>message</nve-control-message>\n  </nve-control-group>\n  <nve-control-group layout=\"horizontal-inline\">\n    <label>horizontal-inline</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n  </nve-control-group>\n</div>\n",
      "summary": "All control and control-group layout variations (vertical, horizontal, inline) with visual debugging.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "forms-control-required-field",
      "name": "RequiredField",
      "template": "<nve-control>\n  <label>validation</label>\n  <input required />\n  <nve-control-message>message</nve-control-message>\n  <nve-control-message error=\"valueMissing\">required</nve-control-message>\n</nve-control>\n",
      "summary": "Form control with HTML5 validation showing required field error messaging.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "forms-control-no-label-control",
      "name": "NoLabelControl",
      "template": "<nve-control>\n  <input type=\"search\" aria-label=\"search\" placeholder=\"search\" />\n</nve-control>\n",
      "summary": "Form control without visible label using aria-label for accessibility in compact layouts.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "forms-control-inline-control",
      "name": "InlineControl",
      "template": "<nve-control>\n  <label>enable logging</label>\n  <input type=\"checkbox\" checked />\n</nve-control>\n",
      "summary": "Inline control layout with checkbox positioned before its label for toggle-style inputs.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "forms-control-group",
      "name": "Group",
      "template": "<nve-control-group>\n  <label>environment</label>\n  <nve-control>\n    <label>local</label>\n    <input type=\"radio\" name=\"radio-group\" value=\"1\" checked />\n  </nve-control>\n  <nve-control>\n    <label>staging</label>\n    <input type=\"radio\" name=\"radio-group\" value=\"2\" />\n  </nve-control>\n  <nve-control>\n    <label>production</label>\n    <input type=\"radio\" name=\"radio-group\" value=\"3\" />\n  </nve-control>\n  <nve-control-message>message</nve-control-message>\n</nve-control-group>\n<br />\n<nve-control-group>\n  <label>environment</label>\n  <nve-control>\n    <label>local</label>\n    <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n  </nve-control>\n  <nve-control>\n    <label>staging</label>\n    <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n  </nve-control>\n  <nve-control>\n    <label>production</label>\n    <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n  </nve-control>\n  <nve-control-message>message</nve-control-message>\n</nve-control-group>\n",
      "summary": "Control group organizing related radio buttons and checkboxes with shared label and messaging.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "forms-control-date-control",
      "name": "DateControl",
      "template": "<nve-control>\n  <label>date</label>\n  <input type=\"date\" />\n  <nve-control-message>message</nve-control-message>\n</nve-control>\n",
      "summary": "Form control wrapping a native date input with label and message support.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "forms-control-textarea-control",
      "name": "TextareaControl",
      "template": "<nve-control>\n  <label>about</label>\n  <textarea></textarea>\n  <nve-control-message>message</nve-control-message>\n</nve-control>\n",
      "summary": "Form control wrapping a textarea element for multi-line text input.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "forms-control-datalist",
      "name": "Datalist",
      "template": "<nve-control>\n  <label>search</label>\n  <input type=\"search\" />\n  <datalist>\n    <option value=\"option 1\"></option>\n    <option value=\"option 2\"></option>\n    <option value=\"option 3\"></option>\n  </datalist>\n</nve-control>\n",
      "summary": "Form control with datalist providing autocomplete suggestions for search input.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "forms-control-status",
      "name": "Status",
      "template": "<div nve-layout=\"column gap:md\">\n  <nve-control>\n    <label>label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\n  <nve-control>\n    <label>disabled</label>\n    <input disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\n  <nve-control>\n    <label>success</label>\n    <input />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-control>\n  <nve-control>\n    <label>error</label>\n    <input />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-control>\n</div>\n",
      "summary": "Form controls showing all status states (default, disabled, success, error) for validation feedback.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    }
  ]
}