{
  "name": "Collapsible",
  "category": "Navigation",
  "subcategory": null,
  "description": "Single expandable region with animated height transition.",
  "thumbnail": "/preview-cards/collapsible.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/Collapsible/Collapsible.razor",
    "UI/Collapsible/CollapsibleContent.razor",
    "UI/Collapsible/CollapsibleTrigger.razor"
  ],
  "dependencies": [],
  "packageDependencies": [],
  "cssVars": [
    "--color-ring",
    "--radius"
  ],
  "api": {
    "name": "Collapsible",
    "category": "Navigation",
    "subcategory": null,
    "description": "Single expandable region with animated height transition.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/Collapsible/Collapsible.razor",
      "UI/Collapsible/CollapsibleContent.razor",
      "UI/Collapsible/CollapsibleTrigger.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "ChildContent",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Open",
        "type": "bool",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "OpenChanged",
        "type": "EventCallback<bool>",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "IsOpen",
        "type": "bool",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "IsOpenChanged",
        "type": "EventCallback<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": "OpenChanged",
        "type": "EventCallback<bool>",
        "description": null
      },
      {
        "name": "IsOpenChanged",
        "type": "EventCallback<bool>",
        "description": null
      }
    ],
    "enums": [],
    "records": [
      {
        "name": "CollapsibleContext",
        "signature": "CollapsibleContext(bool IsOpen, EventCallback Toggle)",
        "description": null
      }
    ],
    "cssVars": [
      "--color-ring",
      "--radius"
    ],
    "examples": [
      {
        "title": "Default",
        "code": "<Collapsible @bind-Open=\"_isOpen\">\n    <div class=\"flex items-center justify-between\">\n        <h4 class=\"text-sm font-semibold\">Starred Repositories</h4>\n        <CollapsibleTrigger>\n            <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">\n                <Blazicon Svg=\"Lucide.ChevronDown\" class=\"h-4 w-4\" />\n            </Button>\n        </CollapsibleTrigger>\n    </div>\n    <CollapsibleContent>\n        <div class=\"rounded-md border px-4 py-2 text-sm\">Content here</div>\n    </CollapsibleContent>\n</Collapsible>"
      },
      {
        "title": "Initially Open",
        "code": "<Collapsible @bind-Open=\"_isOpen\">\n    <CollapsibleTrigger>\n        <span class=\"text-sm font-medium\">More info</span>\n    </CollapsibleTrigger>\n    <CollapsibleContent>\n        <p class=\"mt-2 text-sm text-muted-foreground\">Expandable content.</p>\n    </CollapsibleContent>\n</Collapsible>"
      },
      {
        "title": "Sidebar Section",
        "code": "<Collapsible @bind-Open=\"_isOpen\">\n    <CollapsibleTrigger>\n        <div class=\"flex items-center justify-between px-2 py-1.5 rounded-md hover:bg-accent cursor-pointer\">\n            <div class=\"flex items-center gap-2 text-sm font-medium\">\n                <Blazicon Svg=\"Lucide.Settings\" class=\"h-4 w-4\" /> Settings\n            </div>\n            <Blazicon Svg=\"Lucide.ChevronDown\" class=\"@($\"h-4 w-4 transition-transform {(_isOpen ? \\\"rotate-180\\\" : \\\"\\\")}\")}\" />\n        </div>\n    </CollapsibleTrigger>\n    <CollapsibleContent>\n        <div class=\"pl-6 mt-1 space-y-1\">\n            <div class=\"px-2 py-1.5 text-sm text-muted-foreground\">General</div>\n            <div class=\"px-2 py-1.5 text-sm text-muted-foreground\">Security</div>\n            <div class=\"px-2 py-1.5 text-sm text-muted-foreground\">Notifications</div>\n        </div>\n    </CollapsibleContent>\n</Collapsible>"
      }
    ],
    "subComponents": {
      "CollapsibleContent": {
        "componentName": "CollapsibleContent",
        "fileName": "CollapsibleContent.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "Context",
            "type": "Collapsible.CollapsibleContext",
            "default": "default!",
            "description": null,
            "isCascading": true,
            "captureUnmatched": false
          },
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "ForceMount",
            "type": "bool",
            "default": null,
            "description": "When true, this content is always rendered into the DOM (with the hidden attribute when the collapsible is closed) instead of being unmounted. Use when child state must survive collapsing. Default false preserves the original unmount behaviour.",
            "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
      },
      "CollapsibleTrigger": {
        "componentName": "CollapsibleTrigger",
        "fileName": "CollapsibleTrigger.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "Context",
            "type": "Collapsible.CollapsibleContext",
            "default": "default!",
            "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
      }
    },
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "collapsible",
  "docsUrl": "https://lumeo.nativ.sh/components/collapsible",
  "sourceUrl": [
    {
      "file": "UI/Collapsible/Collapsible.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Collapsible/Collapsible.razor"
    },
    {
      "file": "UI/Collapsible/CollapsibleContent.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Collapsible/CollapsibleContent.razor"
    },
    {
      "file": "UI/Collapsible/CollapsibleTrigger.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Collapsible/CollapsibleTrigger.razor"
    }
  ],
  "source": [
    {
      "path": "UI/Collapsible/Collapsible.razor",
      "content": "@namespace Lumeo\n\n@{\n    var context = new CollapsibleContext(Open, EventCallback.Factory.Create(this, Toggle));\n}\n\n<div class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    <CascadingValue Value=\"context\" IsFixed=\"false\">\n        @ChildContent\n    </CascadingValue>\n</div>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public bool Open { get; set; }\n    [Parameter] public EventCallback<bool> OpenChanged { get; set; }\n\n    [Obsolete(\"Use Open instead. IsOpen will be removed in a future release.\")]\n    [Parameter] public bool IsOpen { get => Open; set => Open = value; }\n\n    [Obsolete(\"Use OpenChanged instead. IsOpenChanged will be removed in a future release.\")]\n    [Parameter] public EventCallback<bool> IsOpenChanged { get => OpenChanged; set => OpenChanged = value; }\n\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"{Class}\".Trim();\n\n    private async Task Toggle()\n    {\n        Open = !Open;\n        await OpenChanged.InvokeAsync(Open);\n    }\n\n    public record CollapsibleContext(bool IsOpen, EventCallback Toggle);\n}\n"
    },
    {
      "path": "UI/Collapsible/CollapsibleContent.razor",
      "content": "@namespace Lumeo\n\n@if (ForceMount || Context.IsOpen)\n{\n    <div class=\"@CssClass\" hidden=\"@(Context.IsOpen ? null : \"hidden\")\" @attributes=\"AdditionalAttributes\">\n        @ChildContent\n    </div>\n}\n\n@code {\n    [CascadingParameter] public Collapsible.CollapsibleContext Context { get; set; } = default!;\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n\n    /// <summary>\n    /// When true, this content is always rendered into the DOM (with the\n    /// <c>hidden</c> attribute when the collapsible is closed) instead of\n    /// being unmounted. Use when child state must survive collapsing.\n    /// Default <c>false</c> preserves the original unmount behaviour.\n    /// </summary>\n    [Parameter] public bool ForceMount { get; set; }\n\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"animate-accordion-down overflow-hidden {Class}\".Trim();\n}\n"
    },
    {
      "path": "UI/Collapsible/CollapsibleTrigger.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@CssClass\" role=\"button\" tabindex=\"0\" aria-expanded=\"@Context.IsOpen\" @onclick=\"Context.Toggle\" @onkeydown=\"HandleKeyDown\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</div>\n\n@code {\n    [CascadingParameter] public Collapsible.CollapsibleContext Context { get; set; } = default!;\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 => $\"cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm {Class}\".Trim();\n\n    private async Task HandleKeyDown(KeyboardEventArgs e)\n    {\n        if (e.Key == \"Enter\" || e.Key == \" \")\n        {\n            await Context.Toggle.InvokeAsync();\n        }\n    }\n}\n"
    }
  ],
  "slots": [
    {
      "name": "ChildContent",
      "owner": "Collapsible",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "CollapsibleContent",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "CollapsibleTrigger",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [],
  "cascadingDependencies": [
    {
      "name": "Context",
      "type": "Collapsible.CollapsibleContext",
      "required": true
    }
  ],
  "relatedComponents": [
    {
      "name": "CollapsibleContent",
      "reason": "sub-component"
    },
    {
      "name": "CollapsibleTrigger",
      "reason": "sub-component"
    }
  ],
  "keyboardInteractions": [
    {
      "key": "Enter",
      "action": "HandleKeyDown handles Enter in CollapsibleTrigger.razor"
    },
    {
      "key": " ",
      "action": "HandleKeyDown handles   in CollapsibleTrigger.razor"
    }
  ],
  "tests": [
    "tests/Lumeo.Tests/Components/PivotGrid/PivotGridTests.cs"
  ],
  "mdSummary": "# Collapsible\n\nSingle expandable region with animated height transition.\n\n**Package:** `Lumeo` · **Category:** Navigation\n**Docs:** https://lumeo.nativ.sh/components/collapsible\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| Collapsible | ChildContent | `RenderFragment?` | `` |  |\n| Collapsible | Open | `bool` | `` |  |\n| Collapsible | OpenChanged | `EventCallback<bool>` | `` |  |\n| Collapsible | IsOpen | `bool` | `` |  |\n| Collapsible | IsOpenChanged | `EventCallback<bool>` | `` |  |\n| Collapsible | Class | `string?` | `` |  |\n| Collapsible | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| CollapsibleContent | Context | `Collapsible.CollapsibleContext` | `default!` |  |\n| CollapsibleContent | ChildContent | `RenderFragment?` | `` |  |\n| CollapsibleContent | ForceMount | `bool` | `` | When true, this content is always rendered into the DOM (with the hidden attribute when the collapsible is closed) instead of being unmounted. Use when child state must survive collapsing. Default false preserves the original unmount behaviour. |\n| CollapsibleContent | Class | `string?` | `` |  |\n| CollapsibleContent | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| CollapsibleTrigger | Context | `Collapsible.CollapsibleContext` | `default!` |  |\n| CollapsibleTrigger | ChildContent | `RenderFragment?` | `` |  |\n| CollapsibleTrigger | Class | `string?` | `` |  |\n| CollapsibleTrigger | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `ChildContent` (Collapsible) — RenderFragment slot\n- `ChildContent` (CollapsibleContent) — RenderFragment slot\n- `ChildContent` (CollapsibleTrigger) — RenderFragment slot\n\n## Events\n- `OpenChanged` (`EventCallback<bool>`)\n- `IsOpenChanged` (`EventCallback<bool>`)\n\n## Sub-components\n- `CollapsibleContent`, `CollapsibleTrigger`\n\n## Cascading values it expects\n- `Context` (`Collapsible.CollapsibleContext`)\n\n## Services it injects\n- (none)\n\n## Keyboard\n- `Enter` — HandleKeyDown handles Enter in CollapsibleTrigger.razor\n- ` ` — HandleKeyDown handles   in CollapsibleTrigger.razor\n\n## Example\n```razor\n<Collapsible />\n```\n\n## CSS variables\n`--color-ring`, `--radius`\n\n## Files\n- `UI/Collapsible/Collapsible.razor`\n- `UI/Collapsible/CollapsibleContent.razor`\n- `UI/Collapsible/CollapsibleTrigger.razor`\n"
}