{
  "$schema": "../manifest.schema.json",
  "schemaVersion": "1.0.0",
  "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"
    }
  },
  "structure": {
    "requiredChildren": [
      "li"
    ],
    "parts": {
      "item": {
        "element": "li",
        "required": true,
        "repeatable": true
      }
    },
    "patterns": {
      "unordered": "<ul class=\"ds-list\"><li>{item}</li></ul>",
      "ordered": "<ol class=\"ds-list --numbered\"><li>{item}</li></ol>"
    }
  },
  "attributes": {
    "start": {
      "description": "Initial counter value for the SDS numbered ordered-list variant.",
      "pattern": "^(?:[1-9]|[12]\\d|3\\d|40)$",
      "default": "1",
      "appliesTo": [
        {
          "elements": [
            "ol"
          ]
        }
      ]
    }
  },
  "dataAttributes": [],
  "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": "numbered-start",
      "html": "<ol class=\"ds-list --numbered\" start=\"4\"><li>Fourth item</li><li>Fifth item</li><li>Sixth 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>"
    }
  ]
}