{
  "name": "List",
  "category": "Data Display",
  "subcategory": "Lists & Trees",
  "description": "Ordered/unordered list with Lumeo typographic styling.",
  "thumbnail": "/preview-cards/list.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/List/List.razor",
    "UI/List/ListItem.razor"
  ],
  "dependencies": [],
  "packageDependencies": [],
  "cssVars": [
    "--color-accent",
    "--color-border",
    "--color-muted",
    "--color-muted-foreground",
    "--radius"
  ],
  "api": {
    "name": "List",
    "category": "Data Display",
    "subcategory": "Lists & Trees",
    "description": "Ordered/unordered list with Lumeo typographic styling.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/List/List.razor",
      "UI/List/ListItem.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "ChildContent",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Bordered",
        "type": "bool",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Hoverable",
        "type": "bool",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Size",
        "type": "ListSize",
        "default": "ListSize.Default",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Class",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "AdditionalAttributes",
        "type": "Dictionary<string, object>?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": true
      }
    ],
    "events": [],
    "enums": [
      {
        "name": "ListSize",
        "values": [
          "Sm",
          "Default",
          "Lg"
        ],
        "description": null
      }
    ],
    "records": [
      {
        "name": "ListContext",
        "signature": "ListContext(bool Bordered, bool Hoverable, ListSize Size)",
        "description": null
      }
    ],
    "cssVars": [
      "--color-accent",
      "--color-border",
      "--color-muted",
      "--color-muted-foreground",
      "--radius"
    ],
    "examples": [
      {
        "title": "Basic List",
        "code": "<List Bordered=\"true\">\n    <ListItem Title=\"Alice Johnson\" Description=\"alice@example.com\" />\n    <ListItem Title=\"Bob Smith\" Description=\"bob@example.com\" />\n    <ListItem Title=\"Carol White\" Description=\"carol@example.com\" />\n</List>"
      },
      {
        "title": "With Leading Icon",
        "code": "<List Bordered=\"true\" Hoverable=\"true\">\n    <ListItem Title=\"Inbox\" Description=\"12 unread\">\n        <Leading><DynamicIcon Name=\"Inbox\" Class=\"h-5 w-5 text-muted-foreground\" /></Leading>\n    </ListItem>\n    <ListItem Title=\"Sent\">\n        <Leading><DynamicIcon Name=\"Send\" Class=\"h-5 w-5 text-muted-foreground\" /></Leading>\n    </ListItem>\n</List>"
      },
      {
        "title": "With Trailing Content",
        "code": "<List Bordered=\"true\">\n    <ListItem Title=\"Notifications\">\n        <Leading><DynamicIcon Name=\"Bell\" Class=\"h-5 w-5 text-muted-foreground\" /></Leading>\n        <Trailing><Badge Variant=\"Badge.BadgeVariant.Default\">3</Badge></Trailing>\n    </ListItem>\n    <ListItem Title=\"Settings\">\n        <Leading><DynamicIcon Name=\"Settings\" Class=\"h-5 w-5 text-muted-foreground\" /></Leading>\n        <Trailing><DynamicIcon Name=\"ChevronRight\" Class=\"h-4 w-4 text-muted-foreground\" /></Trailing>\n    </ListItem>\n</List>"
      },
      {
        "title": "Sizes",
        "code": "<List Bordered=\"true\" Size=\"List.ListSize.Sm\">...</List>\n<List Bordered=\"true\">...</List>\n<List Bordered=\"true\" Size=\"List.ListSize.Lg\">...</List>"
      }
    ],
    "subComponents": {
      "ListItem": {
        "componentName": "ListItem",
        "fileName": "ListItem.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "Context",
            "type": "List.ListContext?",
            "default": null,
            "description": null,
            "isCascading": true,
            "captureUnmatched": false
          },
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Leading",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Trailing",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Title",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Description",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Href",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "OnClick",
            "type": "EventCallback",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Disabled",
            "type": "bool",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Class",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [
          {
            "name": "OnClick",
            "type": "EventCallback",
            "description": null
          }
        ],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      }
    },
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "list",
  "docsUrl": "https://lumeo.nativ.sh/components/list",
  "sourceUrl": [
    {
      "file": "UI/List/List.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/List/List.razor"
    },
    {
      "file": "UI/List/ListItem.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/List/ListItem.razor"
    }
  ],
  "source": [
    {
      "path": "UI/List/List.razor",
      "content": "@namespace Lumeo\n\n@{\n    var context = new ListContext(Bordered, Hoverable, Size);\n}\n\n<CascadingValue Value=\"context\" IsFixed=\"false\">\n    <ul role=\"list\" class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n        @ChildContent\n    </ul>\n</CascadingValue>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public bool Bordered { get; set; }\n    [Parameter] public bool Hoverable { get; set; }\n    [Parameter] public ListSize Size { get; set; } = ListSize.Default;\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => string.Join(\" \", new[] { \"w-full\", Bordered ? \"divide-y divide-border rounded-md border border-border\" : null, Class }.Where(s => !string.IsNullOrWhiteSpace(s)));\n\n    public record ListContext(bool Bordered, bool Hoverable, ListSize Size);\n\n    public enum ListSize { Sm, Default, Lg }\n}\n"
    },
    {
      "path": "UI/List/ListItem.razor",
      "content": "@namespace Lumeo\n\n@{\n    var paddingClass = Context?.Size switch\n    {\n        List.ListSize.Sm => \"px-3 py-2\",\n        List.ListSize.Lg => \"px-5 py-4\",\n        _ => \"px-4 py-3\"\n    };\n    var hoverClass = Context?.Hoverable == true ? \"hover:bg-accent/50 transition-colors\" : \"\";\n    var clickableClass = (OnClick.HasDelegate || !string.IsNullOrEmpty(Href)) ? \"cursor-pointer\" : \"\";\n    var disabledClass = Disabled ? \"opacity-50 pointer-events-none\" : \"\";\n    var liClass = $\"flex items-center gap-3 {paddingClass} {hoverClass} {clickableClass} {disabledClass} {Class}\".Trim();\n}\n\n@if (!string.IsNullOrEmpty(Href))\n{\n    <li class=\"@liClass\" @attributes=\"AdditionalAttributes\">\n        <a href=\"@Href\" class=\"flex flex-1 items-center gap-3 min-w-0\">\n            @if (Leading != null)\n            {\n                <div class=\"shrink-0\">@Leading</div>\n            }\n            <div class=\"flex-1 min-w-0\">\n                @if (Title != null)\n                {\n                    <p class=\"text-sm font-medium truncate\">@Title</p>\n                }\n                @if (Description != null)\n                {\n                    <p class=\"text-xs text-muted-foreground truncate\">@Description</p>\n                }\n                @ChildContent\n            </div>\n        </a>\n        @if (Trailing != null)\n        {\n            <div class=\"shrink-0\">@Trailing</div>\n        }\n    </li>\n}\nelse\n{\n    <li class=\"@liClass\" @onclick=\"HandleClick\" @attributes=\"AdditionalAttributes\">\n        @if (Leading != null)\n        {\n            <div class=\"shrink-0\">@Leading</div>\n        }\n        <div class=\"flex-1 min-w-0\">\n            @if (Title != null)\n            {\n                <p class=\"text-sm font-medium truncate\">@Title</p>\n            }\n            @if (Description != null)\n            {\n                <p class=\"text-xs text-muted-foreground truncate\">@Description</p>\n            }\n            @ChildContent\n        </div>\n        @if (Trailing != null)\n        {\n            <div class=\"shrink-0\">@Trailing</div>\n        }\n    </li>\n}\n\n@code {\n    [CascadingParameter] public List.ListContext? Context { get; set; }\n\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public RenderFragment? Leading { get; set; }\n    [Parameter] public RenderFragment? Trailing { get; set; }\n    [Parameter] public string? Title { get; set; }\n    [Parameter] public string? Description { get; set; }\n    [Parameter] public string? Href { get; set; }\n    [Parameter] public EventCallback OnClick { get; set; }\n    [Parameter] public bool Disabled { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private async Task HandleClick()\n    {\n        if (!Disabled && OnClick.HasDelegate)\n            await OnClick.InvokeAsync();\n    }\n}\n"
    }
  ],
  "slots": [
    {
      "name": "ChildContent",
      "owner": "List",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "ListItem",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "Leading",
      "owner": "ListItem",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "Trailing",
      "owner": "ListItem",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [],
  "cascadingDependencies": [
    {
      "name": "Context",
      "type": "List.ListContext?",
      "required": false
    }
  ],
  "relatedComponents": [
    {
      "name": "ListItem",
      "reason": "sub-component"
    }
  ],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/Cascader/CascaderTests.cs",
    "tests/Lumeo.Tests/Components/DataGrid/DataGridAutoSaveStaleTests.cs",
    "tests/Lumeo.Tests/Components/DataGrid/DataGridBatchEditTests.cs",
    "tests/Lumeo.Tests/Components/DataGrid/DataGridCrossTalkTests.cs",
    "tests/Lumeo.Tests/Components/DataGrid/DataGridCultureTests.cs",
    "tests/Lumeo.Tests/Components/DataGrid/DataGridExpandableTests.cs",
    "tests/Lumeo.Tests/Components/DataGrid/DataGridFilterExtensibilityTests.cs",
    "tests/Lumeo.Tests/Components/DataGrid/DataGridGroupPanelTests.cs",
    "tests/Lumeo.Tests/Components/DataGrid/DataGridKeyboardNavTests.cs",
    "tests/Lumeo.Tests/Components/DataGrid/DataGridLayoutJsonTests.cs",
    "tests/Lumeo.Tests/Components/DataGrid/DataGridRenderTreeTests.cs",
    "tests/Lumeo.Tests/Components/DataGrid/DataGridTests.cs",
    "tests/Lumeo.Tests/Components/DataGrid/DataGridToolbarTogglesTests.cs",
    "tests/Lumeo.Tests/Components/DataGrid/DataGridTreeBatchGroupTests.cs",
    "tests/Lumeo.Tests/Components/DataGrid/DataGridVirtualizedServerModeTests.cs",
    "tests/Lumeo.Tests/Components/DataTable/DataTableTests.cs",
    "tests/Lumeo.Tests/Components/DatePicker/DatePickerTests.cs",
    "tests/Lumeo.Tests/Components/FileManager/FileManagerTests.cs",
    "tests/Lumeo.Tests/Components/FileUpload/FileUploadTests.cs",
    "tests/Lumeo.Tests/Components/Gantt/GanttTests.cs",
    "tests/Lumeo.Tests/Components/Gauge/GaugeTests.cs",
    "tests/Lumeo.Tests/Components/PivotGrid/PivotGridTests.cs",
    "tests/Lumeo.Tests/Components/QueryBuilder/QueryBuilderTests.cs",
    "tests/Lumeo.Tests/Components/Scheduler/SchedulerTests.cs",
    "tests/Lumeo.Tests/Components/Segmented/SegmentedTests.cs",
    "tests/Lumeo.Tests/Components/Sortable/SortableListTests.cs",
    "tests/Lumeo.Tests/Components/SortableList/SortableListTests.cs",
    "tests/Lumeo.Tests/Components/SpeedDial/SpeedDialTests.cs",
    "tests/Lumeo.Tests/Components/TagInput/TagInputGenericTests.cs",
    "tests/Lumeo.Tests/Components/TagInput/TagInputTests.cs",
    "tests/Lumeo.Tests/Components/Tour/TourTests.cs",
    "tests/Lumeo.Tests/Components/Transfer/TransferTests.cs",
    "tests/Lumeo.Tests/Components/TreeSelect/TreeSelectTests.cs",
    "tests/Lumeo.Tests/Components/TreeView/TreeViewTests.cs",
    "tests/Lumeo.Tests/Helpers/TrackingInteropService.cs",
    "tests/Lumeo.Tests/Services/ComponentInteropServiceTests.cs",
    "tests/Lumeo.Tests/Services/DataGridExportServiceTests.cs",
    "tests/Lumeo.Tests/Services/DataGridLayoutServiceTests.cs",
    "tests/Lumeo.Tests/Services/DataGridServerServiceTests.cs"
  ],
  "mdSummary": "# List\n\nOrdered/unordered list with Lumeo typographic styling.\n\n**Package:** `Lumeo` · **Category:** Data Display/Lists & Trees\n**Docs:** https://lumeo.nativ.sh/components/list\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| List | ChildContent | `RenderFragment?` | `` |  |\n| List | Bordered | `bool` | `` |  |\n| List | Hoverable | `bool` | `` |  |\n| List | Size | `ListSize` | `ListSize.Default` |  |\n| List | Class | `string?` | `` |  |\n| List | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| ListItem | Context | `List.ListContext?` | `` |  |\n| ListItem | ChildContent | `RenderFragment?` | `` |  |\n| ListItem | Leading | `RenderFragment?` | `` |  |\n| ListItem | Trailing | `RenderFragment?` | `` |  |\n| ListItem | Title | `string?` | `` |  |\n| ListItem | Description | `string?` | `` |  |\n| ListItem | Href | `string?` | `` |  |\n| ListItem | OnClick | `EventCallback` | `` |  |\n| ListItem | Disabled | `bool` | `` |  |\n| ListItem | Class | `string?` | `` |  |\n| ListItem | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `ChildContent` (List) — RenderFragment slot\n- `ChildContent` (ListItem) — RenderFragment slot\n- `Leading` (ListItem) — RenderFragment slot\n- `Trailing` (ListItem) — RenderFragment slot\n\n## Events\n- (none)\n\n## Sub-components\n- `ListItem`\n\n## Cascading values it expects\n- `Context` (`List.ListContext?`)\n\n## Services it injects\n- (none)\n\n## Keyboard\n—\n\n## Example\n```razor\n<List />\n```\n\n## CSS variables\n`--color-accent`, `--color-border`, `--color-muted`, `--color-muted-foreground`, `--radius`\n\n## Files\n- `UI/List/List.razor`\n- `UI/List/ListItem.razor`\n"
}