{
  "name": "ds-list",
  "description": "List component with styling options",
  "docUrl": "https://design.soracom.io/design-system/elements/list/",
  "category": "elements",
  "htmlElements": [
    "ul",
    "ol"
  ],
  "isWebComponent": false,
  "modifiers": {
    "variant": {
      "support": "custom",
      "values": [
        "--lined",
        "--numbered",
        "--section"
      ]
    },
    "icon": {
      "support": "all"
    },
    "indent": {
      "support": "all"
    },
    "gap": {
      "support": "all"
    }
  },
  "examples": [
    {
      "name": "basic",
      "html": "<ul class=\"ds-list\"><li>List item 1</li><li>List item 2</li><li>List item 3</li></ul>"
    },
    {
      "name": "numbered",
      "html": "<ol class=\"ds-list --numbered\"><li>First item</li><li>Second item</li><li>Third item</li></ol>"
    },
    {
      "name": "lined",
      "html": "<ul class=\"ds-list --lined\"><li>Lined item 1</li><li>Lined item 2</li><li>Lined item 3</li></ul>"
    },
    {
      "name": "with-icon",
      "html": "<ul class=\"ds-list --icon --icon-check\"><li>Item with icon</li><li>Another item</li></ul>"
    },
    {
      "name": "item-icons",
      "html": "<ul class=\"ds-list\"><li class=\"--icon --icon-check\">Check item</li><li class=\"--icon --icon-star\">Star item</li><li class=\"--icon --icon-info\">Info item</li></ul>"
    },
    {
      "name": "section-divider",
      "html": "<ul class=\"ds-list --lined\"><li>Group 1 - Item 1</li><li>Group 1 - Item 2</li><li class=\"--section\">Group 2 - Item 1</li><li>Group 2 - Item 2</li></ul>"
    }
  ]
}