{
  "element": "nve-week",
  "entrypoint": "@nvidia-elements/core/week/week.examples.json",
  "items": [
    {
      "id": "week",
      "name": "Default",
      "template": "<nve-week>\n  <label>label</label>\n  <input type=\"week\" />\n  <nve-control-message>message</nve-control-message>\n</nve-week>\n",
      "summary": "Basic week picker input for selecting specific weeks in a year for scheduling and planning.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "week-datalist",
      "name": "Datalist",
      "template": "<nve-week>\n  <label>label</label>\n  <input type=\"week\" />\n  <nve-control-message>message</nve-control-message>\n  <datalist>\n    <option value=\"2018-W25\"></option>\n    <option value=\"2018-W26\"></option>\n    <option value=\"2018-W27\"></option>\n  </datalist>\n</nve-week>\n",
      "summary": "Week picker with datalist providing suggested week options for quick selection from predefined weeks.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "week-vertical",
      "name": "Vertical",
      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-week>\n    <label>label</label>\n    <input type=\"week\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-week>\n  <nve-week>\n    <label>disabled</label>\n    <input type=\"week\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-week>\n  <nve-week>\n    <label>success</label>\n    <input type=\"week\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-week>\n  <nve-week>\n    <label>error</label>\n    <input type=\"week\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-week>\n</div>\n",
      "summary": "Week pickers with vertical layout including validation states for disabled, success, and error.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "week-horizontal",
      "name": "Horizontal",
      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-week layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"week\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-week>\n  <nve-week layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"week\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-week>\n  <nve-week layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"week\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-week>\n  <nve-week layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"week\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-week>\n</div>\n",
      "summary": "Week pickers with horizontal layout showing validation states for inline forms and compact layouts.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "week-export-parts",
      "name": "ExportParts",
      "template": "<style>\n  nve-week::part(icon-button) {\n    --background: red;\n  }\n  nve-week::part(icon-button-icon) {\n    --color: blue;\n  }\n</style>\n<nve-week>\n  <label>label</label>\n  <input type=\"week\" />\n  <nve-control-message>message</nve-control-message>\n</nve-week>\n",
      "summary": "Use CSS export parts for advanced theming of nested shadow root elements.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    }
  ]
}