{
  "name": "ds-progress-steps",
  "description": "Step progress indicator",
  "docUrl": "https://design.soracom.io/design-system/elements/progress-steps/",
  "category": "elements",
  "htmlElements": [
    "ul",
    "ol"
  ],
  "isWebComponent": false,
  "modifiers": {
    "special": [
      "--1",
      "--2",
      "--3",
      "--4",
      "--5",
      "--6",
      "--7",
      "--8",
      "--9",
      "--10"
    ]
  },
  "examples": [
    {
      "name": "basic",
      "html": "<ul class=\"ds-progress-steps\"><li>Step 1</li><li>Step 2</li><li>Step 3</li><li>Step 4</li></ul>"
    },
    {
      "name": "step-1",
      "html": "<ul class=\"ds-progress-steps --1\"><li>Register</li><li>Configure</li><li>Verify</li><li>Complete</li></ul>"
    },
    {
      "name": "step-2",
      "html": "<ul class=\"ds-progress-steps --2\"><li>Register</li><li>Configure</li><li>Verify</li><li>Complete</li></ul>"
    },
    {
      "name": "step-3",
      "html": "<ul class=\"ds-progress-steps --3\"><li>Register</li><li>Configure</li><li>Verify</li><li>Complete</li></ul>"
    },
    {
      "name": "completed",
      "html": "<ul class=\"ds-progress-steps --4\"><li>Register</li><li>Configure</li><li>Verify</li><li>Complete</li></ul>"
    }
  ]
}