{
  "element": "nve-steps",
  "entrypoint": "@nvidia-elements/core/steps/steps.examples.json",
  "items": [
    {
      "id": "steps",
      "name": "Default",
      "template": "<nve-steps behavior-select>\n  <nve-steps-item status=\"success\">Step 1</nve-steps-item>\n  <nve-steps-item status=\"danger\">Step 2</nve-steps-item>\n  <nve-steps-item selected>Step 3</nve-steps-item>\n  <nve-steps-item status=\"pending\">Step 4</nve-steps-item>\n  <nve-steps-item disabled>Disabled</nve-steps-item>\n</nve-steps>\n",
      "summary": "Interactive step indicator with status colors for multi-step workflows. Use for wizards, onboarding flows, or process tracking where users can navigate between steps.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "steps-condensed",
      "name": "Condensed",
      "template": "<nve-steps behavior-select container=\"condensed\">\n  <nve-steps-item status=\"success\">Step 1</nve-steps-item>\n  <nve-steps-item status=\"danger\">Step 2</nve-steps-item>\n  <nve-steps-item selected>Step 3</nve-steps-item>\n  <nve-steps-item status=\"pending\">Step 4</nve-steps-item>\n  <nve-steps-item disabled>Disabled</nve-steps-item>\n</nve-steps>\n",
      "summary": "Condensed step indicator with reduced visual weight. Ideal for space-constrained layouts or secondary navigation where steps need less prominence.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "steps-vertical-steps",
      "name": "VerticalSteps",
      "template": "<nve-steps vertical behavior-select style=\"width: 150px\">\n  <nve-steps-item selected>Step 1</nve-steps-item>\n  <nve-steps-item>Step 2</nve-steps-item>\n  <nve-steps-item>Step 3</nve-steps-item>\n  <nve-steps-item disabled>Disabled</nve-steps-item>\n  <nve-steps-item>Step 5</nve-steps-item>\n</nve-steps>\n",
      "summary": "Vertical step layout for sidebar navigation or tall containers. Use when horizontal space constrains layout or steps require longer labels.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "steps-vertical-condensed-steps",
      "name": "VerticalCondensedSteps",
      "template": "<nve-steps vertical container=\"condensed\" behavior-select>\n  <nve-steps-item selected>Step 1</nve-steps-item>\n  <nve-steps-item>Step 2</nve-steps-item>\n  <nve-steps-item>Step 3</nve-steps-item>\n  <nve-steps-item disabled>Disabled</nve-steps-item>\n  <nve-steps-item>Step 5</nve-steps-item>\n</nve-steps>\n",
      "summary": "Vertical condensed steps combining both layout options. Ideal for dense sidebar navigation with minimal visual footprint.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "steps-stateless-steps",
      "name": "StatelessSteps",
      "template": "<nve-steps>\n  <nve-steps-item selected>Step 1</nve-steps-item>\n  <nve-steps-item>Step 2</nve-steps-item>\n  <nve-steps-item>Step 3</nve-steps-item>\n  <nve-steps-item>Step 4</nve-steps-item>\n  <nve-steps-item disabled>Disabled</nve-steps-item>\n</nve-steps>\n",
      "summary": "Display-only steps without interactive selection behavior. Use for showing progress indicators where external logic controls step navigation.",
      "description": "",
      "composition": false,
      "tags": []
    }
  ]
}