{
  "$schema": "../manifest.schema.json",
  "schemaVersion": "1.0.0",
  "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"
      ]
    }
  },
  "structure": {
    "requiredChildren": [
      "li"
    ],
    "parts": {
      "step": {
        "element": "li",
        "required": true,
        "repeatable": true
      }
    },
    "patterns": {
      "unordered": "<ul class=\"ds-progress-steps\"><li>{step}</li></ul>",
      "ordered": "<ol class=\"ds-progress-steps\"><li>{step}</li></ol>"
    }
  },
  "attributes": {},
  "dataAttributes": [],
  "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>"
    }
  ]
}