{
  "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": {
    "utility": {
      "support": "custom",
      "values": [
        "--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>"
    }
  ]
}