{
  "name": "Sidebar",
  "category": "Navigation",
  "subcategory": null,
  "description": "Collapsible app sidebar with groups, menu, and trigger.",
  "thumbnail": "/preview-cards/sidebar.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/Sidebar/SidebarComponent.razor",
    "UI/Sidebar/SidebarContent.razor",
    "UI/Sidebar/SidebarFooter.razor",
    "UI/Sidebar/SidebarGroup.razor",
    "UI/Sidebar/SidebarGroupLabel.razor",
    "UI/Sidebar/SidebarHeader.razor",
    "UI/Sidebar/SidebarMenu.razor",
    "UI/Sidebar/SidebarMenuButton.razor",
    "UI/Sidebar/SidebarMenuItem.razor",
    "UI/Sidebar/SidebarProvider.razor",
    "UI/Sidebar/SidebarSeparator.razor",
    "UI/Sidebar/SidebarTrigger.razor"
  ],
  "dependencies": [],
  "packageDependencies": [
    "Blazicons.Lucide"
  ],
  "cssVars": [
    "--color-accent",
    "--color-accent-foreground",
    "--color-border",
    "--color-foreground",
    "--color-muted",
    "--color-muted-foreground",
    "--radius"
  ],
  "api": {
    "name": "Sidebar",
    "category": "Navigation",
    "subcategory": null,
    "description": "Collapsible app sidebar with groups, menu, and trigger.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/Sidebar/SidebarComponent.razor",
      "UI/Sidebar/SidebarContent.razor",
      "UI/Sidebar/SidebarFooter.razor",
      "UI/Sidebar/SidebarGroup.razor",
      "UI/Sidebar/SidebarGroupLabel.razor",
      "UI/Sidebar/SidebarHeader.razor",
      "UI/Sidebar/SidebarMenu.razor",
      "UI/Sidebar/SidebarMenuButton.razor",
      "UI/Sidebar/SidebarMenuItem.razor",
      "UI/Sidebar/SidebarProvider.razor",
      "UI/Sidebar/SidebarSeparator.razor",
      "UI/Sidebar/SidebarTrigger.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "State",
        "type": "SidebarProvider.SidebarState?",
        "default": null,
        "description": null,
        "isCascading": true,
        "captureUnmatched": false
      },
      {
        "name": "ChildContent",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Side",
        "type": "SidebarSide",
        "default": "SidebarSide.Left",
        "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": "SidebarSide",
        "values": [
          "Left",
          "Right"
        ],
        "description": null
      }
    ],
    "records": [],
    "cssVars": [
      "--color-accent",
      "--color-accent-foreground",
      "--color-border",
      "--color-foreground",
      "--color-muted",
      "--color-muted-foreground",
      "--radius"
    ],
    "examples": [
      {
        "title": "Push (Default)",
        "code": "<SidebarProvider @bind-IsCollapsed=\"_isCollapsed\">\n    <SidebarComponent>\n        <SidebarHeader>\n            <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"semibold\">Acme Inc</Lumeo.Text>\n        </SidebarHeader>\n        <SidebarContent>\n            <SidebarGroup>\n                <SidebarGroupLabel>Platform</SidebarGroupLabel>\n                <SidebarMenu>\n                    <SidebarMenuItem>\n                        <SidebarMenuButton Href=\"#\" IsActive=\"true\">\n                            <IconContent><Blazicon Svg=\"Lucide.House\" class=\"h-4 w-4\" /></IconContent>\n                            <LabelContent><span>Dashboard</span></LabelContent>\n                        </SidebarMenuButton>\n                    </SidebarMenuItem>\n                </SidebarMenu>\n            </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n            <Avatar Src=\"\" Fallback=\"CN\" />\n        </SidebarFooter>\n    </SidebarComponent>\n    <main class=\"flex-1 p-6\">\n        <SidebarTrigger />\n    </main>\n</SidebarProvider>"
      },
      {
        "title": "Overlay",
        "code": "<SidebarProvider @bind-IsCollapsed=\"_isCollapsed\" Variant=\"SidebarProvider.SidebarVariant.Overlay\">\n    <SidebarComponent>\n        <SidebarHeader>\n            <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"semibold\">Workspace</Lumeo.Text>\n        </SidebarHeader>\n        <SidebarContent>\n            <SidebarGroup>\n                <SidebarGroupLabel>Navigation</SidebarGroupLabel>\n                <SidebarMenu>\n                    <SidebarMenuItem>\n                        <SidebarMenuButton Href=\"#\" IsActive=\"true\">\n                            <IconContent><Blazicon Svg=\"Lucide.House\" class=\"h-4 w-4\" /></IconContent>\n                            <LabelContent><span>Home</span></LabelContent>\n                        </SidebarMenuButton>\n                    </SidebarMenuItem>\n                </SidebarMenu>\n            </SidebarGroup>\n        </SidebarContent>\n    </SidebarComponent>\n    <main class=\"flex-1 p-6\">\n        <SidebarTrigger />\n        <Lumeo.Text Size=\"sm\" Color=\"muted\">Click backdrop to dismiss.</Lumeo.Text>\n    </main>\n</SidebarProvider>"
      },
      {
        "title": "Side — interactive",
        "code": "<Segmented @bind-Value=\"_sidebarSideSel\" Options=\"_sidebarSideOptions\" />\n<SidebarProvider>\n    <SidebarComponent Side=\"@_activeSidebarSide\">\n        <SidebarHeader>...</SidebarHeader>\n        <SidebarContent>...</SidebarContent>\n    </SidebarComponent>\n    <main class=\"flex-1 p-6\">\n        <SidebarTrigger />\n    </main>\n</SidebarProvider>\n\n@code {\n    private string _sidebarSideSel = \"Left\";\n    private SidebarComponent.SidebarSide _activeSidebarSide =>\n        Enum.Parse<SidebarComponent.SidebarSide>(_sidebarSideSel);\n    private List<Segmented.SegmentedOption> _sidebarSideOptions = new()\n    {\n        new() { Label = \"Left\", Value = \"Left\" },\n        new() { Label = \"Right\", Value = \"Right\" },\n    };\n}"
      },
      {
        "title": "Icon",
        "code": "<SidebarProvider @bind-IsCollapsed=\"_isCollapsed\" Variant=\"SidebarProvider.SidebarVariant.Icon\">\n    <SidebarComponent>\n        <SidebarContent>\n            <SidebarGroup>\n                <SidebarMenu>\n                    <SidebarMenuItem>\n                        <SidebarMenuButton Href=\"#\" IsActive=\"true\" Tooltip=\"Home\">\n                            <IconContent><Blazicon Svg=\"Lucide.House\" class=\"h-4 w-4\" /></IconContent>\n                            <LabelContent><span>Home</span></LabelContent>\n                        </SidebarMenuButton>\n                    </SidebarMenuItem>\n                </SidebarMenu>\n            </SidebarGroup>\n        </SidebarContent>\n    </SidebarComponent>\n    <main class=\"flex-1 p-6\">\n        <SidebarTrigger />\n        <Lumeo.Text Size=\"sm\" Color=\"muted\">Toggle to expand with labels.</Lumeo.Text>\n    </main>\n</SidebarProvider>"
      }
    ],
    "subComponents": {
      "SidebarContent": {
        "componentName": "SidebarContent",
        "fileName": "SidebarContent.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "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": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "SidebarFooter": {
        "componentName": "SidebarFooter",
        "fileName": "SidebarFooter.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "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": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "SidebarGroup": {
        "componentName": "SidebarGroup",
        "fileName": "SidebarGroup.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "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": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "SidebarGroupLabel": {
        "componentName": "SidebarGroupLabel",
        "fileName": "SidebarGroupLabel.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "State",
            "type": "SidebarProvider.SidebarState?",
            "default": null,
            "description": null,
            "isCascading": true,
            "captureUnmatched": false
          },
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "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": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "SidebarHeader": {
        "componentName": "SidebarHeader",
        "fileName": "SidebarHeader.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "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": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "SidebarMenu": {
        "componentName": "SidebarMenu",
        "fileName": "SidebarMenu.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "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": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "SidebarMenuButton": {
        "componentName": "SidebarMenuButton",
        "fileName": "SidebarMenuButton.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "State",
            "type": "SidebarProvider.SidebarState?",
            "default": null,
            "description": null,
            "isCascading": true,
            "captureUnmatched": false
          },
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "IconContent",
            "type": "RenderFragment?",
            "default": null,
            "description": "Icon slot. Named IconContent to avoid shadowing the &lt;Icon&gt; component.",
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "LabelContent",
            "type": "RenderFragment?",
            "default": null,
            "description": "Label slot. Named LabelContent to avoid shadowing the &lt;Label&gt; component.",
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Href",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Tooltip",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "IsActive",
            "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": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "SidebarMenuItem": {
        "componentName": "SidebarMenuItem",
        "fileName": "SidebarMenuItem.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "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": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "SidebarProvider": {
        "componentName": "SidebarProvider",
        "fileName": "SidebarProvider.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "IsCollapsed",
            "type": "bool",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "IsCollapsedChanged",
            "type": "EventCallback<bool>",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Variant",
            "type": "SidebarVariant",
            "default": "SidebarVariant.Push",
            "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": "IsCollapsedChanged",
            "type": "EventCallback<bool>",
            "description": null
          }
        ],
        "enums": [
          {
            "name": "SidebarVariant",
            "values": [
              "Push",
              "Overlay",
              "Icon"
            ],
            "description": null
          }
        ],
        "records": [
          {
            "name": "SidebarState",
            "signature": "SidebarState(bool IsCollapsed, EventCallback Toggle, SidebarVariant Variant)",
            "description": null
          }
        ],
        "parseFailed": false,
        "parseError": null
      },
      "SidebarSeparator": {
        "componentName": "SidebarSeparator",
        "fileName": "SidebarSeparator.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "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": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "SidebarTrigger": {
        "componentName": "SidebarTrigger",
        "fileName": "SidebarTrigger.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "State",
            "type": "SidebarProvider.SidebarState",
            "default": "default!",
            "description": null,
            "isCascading": true,
            "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": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      }
    },
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "sidebar",
  "docsUrl": "https://lumeo.nativ.sh/components/sidebar",
  "sourceUrl": [
    {
      "file": "UI/Sidebar/SidebarComponent.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Sidebar/SidebarComponent.razor"
    },
    {
      "file": "UI/Sidebar/SidebarContent.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Sidebar/SidebarContent.razor"
    },
    {
      "file": "UI/Sidebar/SidebarFooter.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Sidebar/SidebarFooter.razor"
    },
    {
      "file": "UI/Sidebar/SidebarGroup.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Sidebar/SidebarGroup.razor"
    },
    {
      "file": "UI/Sidebar/SidebarGroupLabel.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Sidebar/SidebarGroupLabel.razor"
    },
    {
      "file": "UI/Sidebar/SidebarHeader.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Sidebar/SidebarHeader.razor"
    },
    {
      "file": "UI/Sidebar/SidebarMenu.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Sidebar/SidebarMenu.razor"
    },
    {
      "file": "UI/Sidebar/SidebarMenuButton.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Sidebar/SidebarMenuButton.razor"
    },
    {
      "file": "UI/Sidebar/SidebarMenuItem.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Sidebar/SidebarMenuItem.razor"
    },
    {
      "file": "UI/Sidebar/SidebarProvider.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Sidebar/SidebarProvider.razor"
    },
    {
      "file": "UI/Sidebar/SidebarSeparator.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Sidebar/SidebarSeparator.razor"
    },
    {
      "file": "UI/Sidebar/SidebarTrigger.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Sidebar/SidebarTrigger.razor"
    }
  ],
  "source": [
    {
      "path": "UI/Sidebar/SidebarComponent.razor",
      "content": "@namespace Lumeo\n\n@if (Variant == SidebarProvider.SidebarVariant.Overlay && !IsCollapsed)\n{\n    <div class=\"absolute inset-0 z-30 bg-black/50 transition-opacity\" @onclick=\"DismissOverlay\"></div>\n}\n<aside class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</aside>\n\n@code {\n    [CascadingParameter] public SidebarProvider.SidebarState? State { get; set; }\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public SidebarSide Side { get; set; } = SidebarSide.Left;\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private bool IsCollapsed => State?.IsCollapsed ?? false;\n    private SidebarProvider.SidebarVariant Variant => State?.Variant ?? SidebarProvider.SidebarVariant.Push;\n\n    private string CssClass\n    {\n        get\n        {\n            var baseCss = \"flex h-full flex-col border-r bg-sidebar text-sidebar-foreground overflow-y-auto overflow-x-hidden transition-all duration-300\";\n\n            var variantCss = Variant switch\n            {\n                SidebarProvider.SidebarVariant.Overlay =>\n                    $\"absolute z-40 top-0 {(Side == SidebarSide.Right ? \"right-0\" : \"left-0\")} w-64 shadow-xl {(IsCollapsed ? (Side == SidebarSide.Right ? \"translate-x-full\" : \"-translate-x-full\") : \"translate-x-0\")}\",\n                SidebarProvider.SidebarVariant.Icon => $\"shrink-0 {(IsCollapsed ? \"w-16\" : \"w-64\")}\",\n                _ => $\"shrink-0 {(IsCollapsed ? \"w-0 border-r-0\" : \"w-64\")}\"\n            };\n\n            var sideCss = Side == SidebarSide.Right ? \"order-last border-l border-r-0\" : \"\";\n\n            return $\"{baseCss} {variantCss} {sideCss} {Class}\".Trim();\n        }\n    }\n\n    private async Task DismissOverlay()\n    {\n        if (State is not null)\n            await State.Toggle.InvokeAsync();\n    }\n\n    public enum SidebarSide { Left, Right }\n}\n"
    },
    {
      "path": "UI/Sidebar/SidebarContent.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</div>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"flex flex-1 flex-col gap-1 overflow-auto px-2 py-3 {Class}\".Trim();\n}\n"
    },
    {
      "path": "UI/Sidebar/SidebarFooter.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</div>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"flex flex-col gap-2 border-t border-border/40 p-4 {Class}\".Trim();\n}\n"
    },
    {
      "path": "UI/Sidebar/SidebarGroup.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</div>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"flex flex-col gap-1 py-2 {Class}\".Trim();\n}\n"
    },
    {
      "path": "UI/Sidebar/SidebarGroupLabel.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</div>\n\n@code {\n    [CascadingParameter] public SidebarProvider.SidebarState? State { get; set; }\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private bool IsCollapsed => State?.IsCollapsed ?? false;\n\n    private string CssClass => string.Join(\" \", new[] { \"px-3 py-1 text-xs font-medium text-muted-foreground\", IsCollapsed ? \"sr-only\" : null, Class }.Where(s => !string.IsNullOrWhiteSpace(s)));\n}\n"
    },
    {
      "path": "UI/Sidebar/SidebarHeader.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</div>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"flex flex-col gap-2 border-b border-border/40 p-4 {Class}\".Trim();\n}\n"
    },
    {
      "path": "UI/Sidebar/SidebarMenu.razor",
      "content": "@namespace Lumeo\n\n<ul class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</ul>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"flex flex-col gap-0.5 {Class}\".Trim();\n}\n"
    },
    {
      "path": "UI/Sidebar/SidebarMenuButton.razor",
      "content": "@namespace Lumeo\n\n<a href=\"@Href\" class=\"@CssClass\" title=\"@Tooltip\" @attributes=\"AdditionalAttributes\">\n    @if (IconContent is not null)\n    {\n        <span class=\"shrink-0 inline-flex items-center justify-center\">@IconContent</span>\n        @if (LabelContent is not null)\n        {\n            <span class=\"@LabelCssClass\">@LabelContent</span>\n        }\n    }\n    else\n    {\n        @ChildContent\n    }\n</a>\n\n@code {\n    [CascadingParameter] public SidebarProvider.SidebarState? State { get; set; }\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n\n    /// <summary>Icon slot. Named <c>IconContent</c> to avoid shadowing the <c>&lt;Icon&gt;</c> component.</summary>\n    [Parameter] public RenderFragment? IconContent { get; set; }\n\n    /// <summary>Label slot. Named <c>LabelContent</c> to avoid shadowing the <c>&lt;Label&gt;</c> component.</summary>\n    [Parameter] public RenderFragment? LabelContent { get; set; }\n\n    [Parameter] public string? Href { get; set; }\n    [Parameter] public string? Tooltip { get; set; }\n    [Parameter] public bool IsActive { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private bool IsCollapsed => State?.IsCollapsed ?? false;\n\n    private string CssClass => string.Join(\" \", new[] {\n        \"flex items-center gap-3 rounded-lg py-2 min-h-11 sm:min-h-0 text-muted-foreground hover:text-foreground hover:bg-sidebar-accent w-full overflow-hidden\",\n        \"transition-[padding,background-color,color] duration-300 ease-out\",\n        IsCollapsed ? \"px-4\" : \"px-3\",\n        IsActive ? \"bg-sidebar-accent text-sidebar-accent-foreground font-medium\" : null,\n        Class\n    }.Where(s => !string.IsNullOrWhiteSpace(s)));\n\n    // Opacity-only fade. The sidebar's own width transition handles the visual shrink\n    // — the label stays at natural width and is clipped by the parent's overflow-x-hidden,\n    // so the icon stays put while the sidebar narrows instead of \"sliding to center\".\n    // A small delay on the fade makes the sidebar start shrinking first, avoiding the\n    // awkward mid-state where labels are gone but sidebar is still wide.\n    private string LabelCssClass => string.Join(\" \", new[] {\n        \"whitespace-nowrap transition-opacity duration-150 ease-out\",\n        IsCollapsed ? \"opacity-0 delay-0\" : \"opacity-100 delay-150\"\n    });\n}\n"
    },
    {
      "path": "UI/Sidebar/SidebarMenuItem.razor",
      "content": "@namespace Lumeo\n\n<li class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</li>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"relative {Class}\".Trim();\n}\n"
    },
    {
      "path": "UI/Sidebar/SidebarProvider.razor",
      "content": "@namespace Lumeo\n\n@{\n    var context = new SidebarState(IsCollapsed, EventCallback.Factory.Create(this, Toggle), Variant);\n}\n\n<CascadingValue Value=\"context\" IsFixed=\"false\">\n    <div class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n        @ChildContent\n    </div>\n</CascadingValue>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public bool IsCollapsed { get; set; }\n    [Parameter] public EventCallback<bool> IsCollapsedChanged { get; set; }\n    [Parameter] public SidebarVariant Variant { get; set; } = SidebarVariant.Push;\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass\n    {\n        get\n        {\n            var variant = Variant == SidebarVariant.Overlay ? \"relative overflow-hidden\" : \"\";\n            return $\"flex h-full w-full {variant} {Class}\".Trim();\n        }\n    }\n\n    private async Task Toggle()\n    {\n        IsCollapsed = !IsCollapsed;\n        await IsCollapsedChanged.InvokeAsync(IsCollapsed);\n    }\n\n    public record SidebarState(bool IsCollapsed, EventCallback Toggle, SidebarVariant Variant);\n    public enum SidebarVariant { Push, Overlay, Icon }\n}\n"
    },
    {
      "path": "UI/Sidebar/SidebarSeparator.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@CssClass\" role=\"none\" @attributes=\"AdditionalAttributes\"></div>\n\n@code {\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"mx-3 my-2 h-px bg-border {Class}\".Trim();\n}\n"
    },
    {
      "path": "UI/Sidebar/SidebarTrigger.razor",
      "content": "@namespace Lumeo\n\n<button class=\"@CssClass\" @onclick=\"State.Toggle\" title=\"Toggle sidebar\" @attributes=\"AdditionalAttributes\">\n    @if (State?.IsCollapsed == true)\n    {\n        <Blazicon Svg=\"Lucide.PanelLeftOpen\" class=\"h-4 w-4\" />\n    }\n    else\n    {\n        <Blazicon Svg=\"Lucide.PanelLeftClose\" class=\"h-4 w-4\" />\n    }\n</button>\n\n@code {\n    [CascadingParameter] public SidebarProvider.SidebarState State { get; set; } = default!;\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground h-9 w-9 {Class}\".Trim();\n}\n"
    }
  ],
  "slots": [
    {
      "name": "ChildContent",
      "owner": "Sidebar",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "SidebarContent",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "SidebarFooter",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "SidebarGroup",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "SidebarGroupLabel",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "SidebarHeader",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "SidebarMenu",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "SidebarMenuButton",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "IconContent",
      "owner": "SidebarMenuButton",
      "type": "RenderFragment?",
      "description": "Icon slot. Named IconContent to avoid shadowing the &lt;Icon&gt; component."
    },
    {
      "name": "LabelContent",
      "owner": "SidebarMenuButton",
      "type": "RenderFragment?",
      "description": "Label slot. Named LabelContent to avoid shadowing the &lt;Label&gt; component."
    },
    {
      "name": "ChildContent",
      "owner": "SidebarMenuItem",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "SidebarProvider",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [],
  "cascadingDependencies": [
    {
      "name": "State",
      "type": "SidebarProvider.SidebarState?",
      "required": false
    }
  ],
  "relatedComponents": [
    {
      "name": "SidebarComponent",
      "reason": "sub-component"
    },
    {
      "name": "SidebarContent",
      "reason": "sub-component"
    },
    {
      "name": "SidebarFooter",
      "reason": "sub-component"
    },
    {
      "name": "SidebarGroup",
      "reason": "sub-component"
    },
    {
      "name": "SidebarGroupLabel",
      "reason": "sub-component"
    },
    {
      "name": "SidebarHeader",
      "reason": "sub-component"
    },
    {
      "name": "SidebarMenu",
      "reason": "sub-component"
    },
    {
      "name": "SidebarMenuButton",
      "reason": "sub-component"
    },
    {
      "name": "SidebarMenuItem",
      "reason": "sub-component"
    },
    {
      "name": "SidebarProvider",
      "reason": "sub-component"
    },
    {
      "name": "SidebarSeparator",
      "reason": "sub-component"
    },
    {
      "name": "SidebarTrigger",
      "reason": "sub-component"
    }
  ],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/Sidebar/SidebarTests.cs",
    "tests/Lumeo.Tests/Contract/ComponentContractTests.cs"
  ],
  "mdSummary": "# Sidebar\n\nCollapsible app sidebar with groups, menu, and trigger.\n\n**Package:** `Lumeo` · **Category:** Navigation\n**Docs:** https://lumeo.nativ.sh/components/sidebar\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| Sidebar | State | `SidebarProvider.SidebarState?` | `` |  |\n| Sidebar | ChildContent | `RenderFragment?` | `` |  |\n| Sidebar | Side | `SidebarSide` | `SidebarSide.Left` |  |\n| Sidebar | Class | `string?` | `` |  |\n| Sidebar | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| SidebarContent | ChildContent | `RenderFragment?` | `` |  |\n| SidebarContent | Class | `string?` | `` |  |\n| SidebarContent | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| SidebarFooter | ChildContent | `RenderFragment?` | `` |  |\n| SidebarFooter | Class | `string?` | `` |  |\n| SidebarFooter | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| SidebarGroup | ChildContent | `RenderFragment?` | `` |  |\n| SidebarGroup | Class | `string?` | `` |  |\n| SidebarGroup | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| SidebarGroupLabel | State | `SidebarProvider.SidebarState?` | `` |  |\n| SidebarGroupLabel | ChildContent | `RenderFragment?` | `` |  |\n| SidebarGroupLabel | Class | `string?` | `` |  |\n| SidebarGroupLabel | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| SidebarHeader | ChildContent | `RenderFragment?` | `` |  |\n| SidebarHeader | Class | `string?` | `` |  |\n| SidebarHeader | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| SidebarMenu | ChildContent | `RenderFragment?` | `` |  |\n| SidebarMenu | Class | `string?` | `` |  |\n| SidebarMenu | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| SidebarMenuButton | State | `SidebarProvider.SidebarState?` | `` |  |\n| SidebarMenuButton | ChildContent | `RenderFragment?` | `` |  |\n| SidebarMenuButton | IconContent | `RenderFragment?` | `` | Icon slot. Named IconContent to avoid shadowing the &lt;Icon&gt; component. |\n| SidebarMenuButton | LabelContent | `RenderFragment?` | `` | Label slot. Named LabelContent to avoid shadowing the &lt;Label&gt; component. |\n| SidebarMenuButton | Href | `string?` | `` |  |\n| SidebarMenuButton | Tooltip | `string?` | `` |  |\n| SidebarMenuButton | IsActive | `bool` | `` |  |\n| SidebarMenuButton | Class | `string?` | `` |  |\n| SidebarMenuButton | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| SidebarMenuItem | ChildContent | `RenderFragment?` | `` |  |\n| SidebarMenuItem | Class | `string?` | `` |  |\n| SidebarMenuItem | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| SidebarProvider | ChildContent | `RenderFragment?` | `` |  |\n| SidebarProvider | IsCollapsed | `bool` | `` |  |\n| SidebarProvider | IsCollapsedChanged | `EventCallback<bool>` | `` |  |\n| SidebarProvider | Variant | `SidebarVariant` | `SidebarVariant.Push` |  |\n| SidebarProvider | Class | `string?` | `` |  |\n| SidebarProvider | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| SidebarSeparator | Class | `string?` | `` |  |\n| SidebarSeparator | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| SidebarTrigger | State | `SidebarProvider.SidebarState` | `default!` |  |\n| SidebarTrigger | Class | `string?` | `` |  |\n| SidebarTrigger | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `ChildContent` (Sidebar) — RenderFragment slot\n- `ChildContent` (SidebarContent) — RenderFragment slot\n- `ChildContent` (SidebarFooter) — RenderFragment slot\n- `ChildContent` (SidebarGroup) — RenderFragment slot\n- `ChildContent` (SidebarGroupLabel) — RenderFragment slot\n- `ChildContent` (SidebarHeader) — RenderFragment slot\n- `ChildContent` (SidebarMenu) — RenderFragment slot\n- `ChildContent` (SidebarMenuButton) — RenderFragment slot\n- `IconContent` (SidebarMenuButton) — Icon slot. Named IconContent to avoid shadowing the &lt;Icon&gt; component.\n- `LabelContent` (SidebarMenuButton) — Label slot. Named LabelContent to avoid shadowing the &lt;Label&gt; component.\n- `ChildContent` (SidebarMenuItem) — RenderFragment slot\n- `ChildContent` (SidebarProvider) — RenderFragment slot\n\n## Events\n- (none)\n\n## Sub-components\n- `SidebarComponent`, `SidebarContent`, `SidebarFooter`, `SidebarGroup`, `SidebarGroupLabel`, `SidebarHeader`, `SidebarMenu`, `SidebarMenuButton`, `SidebarMenuItem`, `SidebarProvider`, `SidebarSeparator`, `SidebarTrigger`\n\n## Cascading values it expects\n- `State` (`SidebarProvider.SidebarState?`)\n\n## Services it injects\n- (none)\n\n## Keyboard\n—\n\n## Example\n```razor\n<Sidebar />\n```\n\n## CSS variables\n`--color-accent`, `--color-accent-foreground`, `--color-border`, `--color-foreground`, `--color-muted`, `--color-muted-foreground`, `--radius`\n\n## Files\n- `UI/Sidebar/SidebarComponent.razor`\n- `UI/Sidebar/SidebarContent.razor`\n- `UI/Sidebar/SidebarFooter.razor`\n- `UI/Sidebar/SidebarGroup.razor`\n- `UI/Sidebar/SidebarGroupLabel.razor`\n- `UI/Sidebar/SidebarHeader.razor`\n- `UI/Sidebar/SidebarMenu.razor`\n- `UI/Sidebar/SidebarMenuButton.razor`\n- `UI/Sidebar/SidebarMenuItem.razor`\n- `UI/Sidebar/SidebarProvider.razor`\n- `UI/Sidebar/SidebarSeparator.razor`\n- `UI/Sidebar/SidebarTrigger.razor`\n"
}