{% stories List with {
  "title": "Atoms/List",
  "parameters": {
    "componentSubtitle": "HTML List component with Bootstrap utility class support.",
    "docs": {
      "description": {
        "component": "Renders a list (ul or ol) with optional utility classes on the wrapper and each list item."
      },
      "story": {
        "inline": true
      }
    }
  },
  "argTypes": {
    "type": {
      "name": "List type",
      "description": "The HTML tag to use for the list (ul or ol).",
      "defaultValue": "ul",
      "control": "select",
      "options": {
        "'Unordered list'": "ul",
        "'Ordered list'": "ol"
      }
    },
    "items": {
      "name": "Items",
      "description": "An array of list items to render as a list.",
      "control": "object",
      "defaultValue": []
    },
    "list_utility_classes": {
      "name": "List Utility Classes",
      "description": "Extra Bootstrap or custom classes for the list element.",
      "control": "object",
      "defaultValue": []
    },
    "list_item_utility_classes": {
      "name": "List Item Utility Classes",
      "description": "Classes applied to each list item element.",
      "control": "object",
      "defaultValue": []
    },
    "attributes": {
      "name": "Attributes",
      "description": "HTML attributes for the list element.",
      "control": "object",
      "defaultValue": {}
    }
  }
} %}

{% story ListUnordered with {
  "name": "Unordered list",
  "args": {
    "type": "ul",
    "items": [
      "Item 1",
      "Item 2",
      "Item 3"
    ],
    "list_utility_classes": [],
    "list_item_utility_classes": []
  }
} %}
  {{ include("vartheme_bs5:list") }}
{% endstory %}

{% story ListOrdered with {
  "name": "Ordered list",
  "args": {
    "type": "ol",
    "items": [
      "First",
      "Second",
      "Third"
    ],
    "list_utility_classes": [],
    "list_item_utility_classes": []
  }
} %}
  {{ include("vartheme_bs5:list") }}
{% endstory %}

{% story ListGroup with {
  "name": "Bootstrap List Group",
  "args": {
    "type": "ul",
    "items": [
      "One",
      "Two",
      "Three"
    ],
    "list_utility_classes": ["list-group"],
    "list_item_utility_classes": ["list-group-item"]
  }
} %}
  {{ include("vartheme_bs5:list") }}
{% endstory %}

{% story FlushListGroup with {
  "name": "Bootstrap Flush List Group",
  "args": {
    "type": "ul",
    "items": [
      "One",
      "Two",
      "Three"
    ],
    "list_utility_classes": ["list-group", "list-group-flush"],
    "list_item_utility_classes": ["list-group-item"]
  }
} %}
  {{ include("vartheme_bs5:list") }}
{% endstory %}

{% story InlineList with {
  "name": "Inline list",
  "args": {
    "type": "ul",
    "items": [
      "Alpha",
      "Beta",
      "Gamma"
    ],
    "list_utility_classes": ["list-inline"],
    "list_item_utility_classes": ["list-inline-item", "px-2"]
  }
} %}
  {{ include("vartheme_bs5:list") }}
{% endstory %}

{% endstories %}
