{
  "element": "nve-date",
  "entrypoint": "@nvidia-elements/core/date/date.examples.json",
  "items": [
    {
      "id": "date",
      "name": "Default",
      "template": "<nve-date>\n  <label>date</label>\n  <input type=\"date\" />\n  <nve-control-message>message</nve-control-message>\n</nve-date>\n",
      "summary": "Basic date picker input with label and message for selecting calendar dates.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "date-datalist",
      "name": "Datalist",
      "template": "<nve-date>\n  <label>label</label>\n  <input type=\"date\" />\n  <nve-control-message>message</nve-control-message>\n  <datalist>\n    <option value=\"2018-07-22\"></option>\n    <option value=\"2018-01-01\"></option>\n    <option value=\"2018-12-31\"></option>\n  </datalist>\n</nve-date>\n",
      "summary": "Date picker with datalist providing suggested date options for quick selection from predefined dates.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "date-vertical",
      "name": "Vertical",
      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-date>\n    <label>label</label>\n    <input type=\"date\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n  <nve-date>\n    <label>disabled</label>\n    <input type=\"date\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n  <nve-date>\n    <label>success</label>\n    <input type=\"date\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-date>\n  <nve-date>\n    <label>error</label>\n    <input type=\"date\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-date>\n</div>\n",
      "summary": "Date pickers with vertical layout including validation states for disabled, success, and error.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "date-horizontal",
      "name": "Horizontal",
      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-date layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"date\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n  <nve-date layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"date\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n  <nve-date layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"date\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-date>\n  <nve-date layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"date\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-date>\n</div>\n",
      "summary": "Date pickers with horizontal layout showing validation states for inline forms and compact layouts.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "date-range",
      "name": "Range",
      "template": "<nve-input-group>\n  <label>date range</label>\n  <nve-date>\n    <input type=\"date\" aria-label=\"start date\" value=\"2018-07-22\" />\n  </nve-date>\n  <nve-date>\n    <input type=\"date\" aria-label=\"end date\" value=\"2022-07-22\" />\n  </nve-date>\n  <nve-control-message>message</nve-control-message>\n</nve-input-group>\n",
      "summary": "Date range input with start and end date pickers for selecting time periods and date intervals.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "date-types",
      "name": "Types",
      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-date layout=\"horizontal\">\n    <label>date label</label>\n    <input type=\"date\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n  <nve-datetime layout=\"horizontal\">\n    <label>datetime label</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-datetime>\n  <nve-month layout=\"horizontal\">\n    <label>month label</label>\n    <input type=\"month\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-month>\n  <nve-week layout=\"horizontal\">\n    <label>week label</label>\n    <input type=\"week\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-week>\n  <nve-time layout=\"horizontal\">\n    <label>time label</label>\n    <input type=\"time\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-time>\n  <nve-input-group layout=\"horizontal\">\n    <label>date range</label>\n    <nve-date>\n      <input type=\"date\" aria-label=\"start date\" value=\"2018-07-22\" />\n    </nve-date>\n    <nve-date>\n      <input type=\"date\" aria-label=\"end date\" value=\"2022-07-22\" />\n    </nve-date>\n    <nve-control-message>message</nve-control-message>\n  </nve-input-group>\n</div>\n",
      "summary": "Collection of temporal input types including date, datetime, month, week, time, and date range pickers.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "date-fit-text",
      "name": "FitText",
      "template": "<nve-date fit-text>\n  <label>date</label>\n  <input type=\"date\" value=\"2017-06-01\" />\n  <nve-control-message>message</nve-control-message>\n</nve-date>\n",
      "summary": "Date picker with fit-text styling that adjusts width to match the selected date value for compact displays.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    }
  ]
}