{
  "element": "nve-dot",
  "entrypoint": "@nvidia-elements/core/dot/dot.examples.json",
  "items": [
    {
      "id": "dot",
      "name": "Default",
      "template": "<nve-dot status=\"starting\"></nve-dot>\n",
      "summary": "Basic dot component with status indicator, providing a simple visual cue for process states and system status.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "dot-size",
      "name": "Size",
      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-dot size=\"sm\">10</nve-dot>\n  <nve-dot>10</nve-dot>\n  <nve-dot size=\"lg\">10</nve-dot>\n</div>\n<br />\n<div nve-layout=\"row gap:lg\">\n  <nve-dot size=\"sm\"></nve-dot>\n  <nve-dot></nve-dot>\n  <nve-dot size=\"lg\"></nve-dot>\n</div>\n",
      "summary": "Different dot sizes to accommodate layout contexts from compact indicators to prominent status displays.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "dot-support-status",
      "name": "SupportStatus",
      "template": "<div nve-layout=\"row gap:md\">\n  <nve-dot></nve-dot>\n  <nve-dot status=\"accent\"></nve-dot>\n  <nve-dot status=\"warning\"></nve-dot>\n  <nve-dot status=\"success\"></nve-dot>\n  <nve-dot status=\"danger\"></nve-dot>\n</div>\n",
      "summary": "Semantic color variations for general status communication, enabling clear visual distinction of different states and priorities.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "dot-number",
      "name": "Number",
      "template": "<div nve-layout=\"row gap:md\">\n  <nve-dot>10</nve-dot>\n  <nve-dot status=\"accent\" aria-label=\"10 notifications\">10</nve-dot>\n  <nve-dot status=\"warning\" aria-label=\"10 notifications\">10</nve-dot>\n  <nve-dot status=\"success\" aria-label=\"10 notifications\">10</nve-dot>\n  <nve-dot status=\"danger\" aria-label=\"10 notifications\">10</nve-dot>\n</div>\n",
      "summary": "Dot with numeric content for notification badges and counters, providing clear visual indicators of quantity or alerts.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "dot-status",
      "name": "Status",
      "template": "<div nve-layout=\"row gap:md\">\n  <nve-dot status=\"scheduled\"></nve-dot>\n  <nve-dot status=\"queued\"></nve-dot>\n  <nve-dot status=\"pending\"></nve-dot>\n  <nve-dot status=\"starting\"></nve-dot>\n  <nve-dot status=\"running\"></nve-dot>\n  <nve-dot status=\"restarting\"></nve-dot>\n  <nve-dot status=\"stopping\"></nve-dot>\n  <nve-dot status=\"finished\"></nve-dot>\n  <nve-dot status=\"failed\"></nve-dot>\n  <nve-dot status=\"unknown\"></nve-dot>\n</div>\n",
      "summary": "Comprehensive process status indicators for system operations, providing clear visual feedback on job states and workflow progress.",
      "description": "",
      "composition": false,
      "tags": []
    }
  ]
}