{
  "name": "Carousel",
  "category": "Navigation",
  "subcategory": null,
  "description": "Slide-based content rotator with autoplay and keyboard nav.",
  "thumbnail": "/preview-cards/carousel.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/Carousel/Carousel.razor",
    "UI/Carousel/CarouselContent.razor",
    "UI/Carousel/CarouselItem.razor",
    "UI/Carousel/CarouselNext.razor",
    "UI/Carousel/CarouselPrevious.razor"
  ],
  "dependencies": [],
  "packageDependencies": [
    "Blazicons.Lucide"
  ],
  "cssVars": [
    "--color-accent",
    "--color-accent-foreground",
    "--color-background",
    "--radius"
  ],
  "api": {
    "name": "Carousel",
    "category": "Navigation",
    "subcategory": null,
    "description": "Slide-based content rotator with autoplay and keyboard nav.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/Carousel/Carousel.razor",
      "UI/Carousel/CarouselContent.razor",
      "UI/Carousel/CarouselItem.razor",
      "UI/Carousel/CarouselNext.razor",
      "UI/Carousel/CarouselPrevious.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [
      "IAsyncDisposable"
    ],
    "parameters": [
      {
        "name": "Orientation",
        "type": "CarouselOrientation",
        "default": "CarouselOrientation.Horizontal",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Loop",
        "type": "bool",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Disabled",
        "type": "bool",
        "default": null,
        "description": null,
        "isCascading": false,
        "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": [
      {
        "name": "CarouselOrientation",
        "values": [
          "Horizontal",
          "Vertical"
        ],
        "description": null
      }
    ],
    "records": [
      {
        "name": "CarouselContext",
        "signature": "CarouselContext(\n        string ContentId,\n        CarouselOrientation Orientation,\n        bool CanScrollPrev,\n        bool CanScrollNext,\n        EventCallback ScrollPrev,\n        EventCallback ScrollNext\n    )",
        "description": null
      }
    ],
    "cssVars": [
      "--color-accent",
      "--color-accent-foreground",
      "--color-background",
      "--radius"
    ],
    "examples": [
      {
        "title": "Default",
        "code": "<Carousel>\n    <CarouselContent>\n        @for (var i = 1; i <= 5; i++)\n        {\n            var index = i;\n            <CarouselItem>\n                <div class=\"p-1\">\n                    <Card>\n                        <CardContent Class=\"flex aspect-square items-center justify-center p-6\">\n                            <span class=\"text-4xl font-semibold\">@index</span>\n                        </CardContent>\n                    </Card>\n                </div>\n            </CarouselItem>\n        }\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n</Carousel>"
      },
      {
        "title": "With Loop",
        "code": "<Carousel Loop=\"true\">\n    <CarouselContent>\n        @for (var i = 1; i <= 5; i++)\n        {\n            var index = i;\n            <CarouselItem>\n                <div class=\"p-1\">\n                    <Card>\n                        <CardContent Class=\"flex aspect-square items-center justify-center p-6\">\n                            <span class=\"text-4xl font-semibold\">@index</span>\n                        </CardContent>\n                    </Card>\n                </div>\n            </CarouselItem>\n        }\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n</Carousel>"
      },
      {
        "title": "Orientation — interactive",
        "code": "<Segmented @bind-Value=\"_orientationSel\" Options=\"_orientationOptions\" />\n<Carousel Orientation=\"@(Enum.Parse<Carousel.CarouselOrientation>(_orientationSel))\">\n    <CarouselContent>\n        @for (var i = 1; i <= 4; i++) {\n            var index = i;\n            <CarouselItem>\n                <Card>\n                    <CardContent Class=\"flex aspect-square items-center justify-center p-6\">\n                        <span class=\"text-4xl font-semibold\">@index</span>\n                    </CardContent>\n                </Card>\n            </CarouselItem>\n        }\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n</Carousel>\n\n@code {\n    private string _orientationSel = \"Horizontal\";\n    private List<Segmented.SegmentedOption> _orientationOptions = new()\n    {\n        new() { Label = \"Horizontal\", Value = \"Horizontal\" },\n        new() { Label = \"Vertical\", Value = \"Vertical\" },\n    };\n}"
      },
      {
        "title": "Product Gallery",
        "code": "<Carousel>\n    <CarouselContent>\n        @foreach (var product in _products)\n        {\n            <CarouselItem>\n                <div class=\"p-1\">\n                    <Card>\n                        <AspectRatio Ratio=\"4.0 / 3.0\" Class=\"rounded-t-lg overflow-hidden bg-muted\">\n                            <div class=\"flex items-center justify-center h-full text-sm text-muted-foreground\">@product.Category</div>\n                        </AspectRatio>\n                        <CardContent Class=\"p-4\">\n                            <Lumeo.Text Size=\"sm\" Weight=\"semibold\">@product.Name</Lumeo.Text>\n                            <Lumeo.Text Size=\"sm\" Color=\"muted\">@product.Price</Lumeo.Text>\n                        </CardContent>\n                    </Card>\n                </div>\n            </CarouselItem>\n        }\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n</Carousel>"
      }
    ],
    "subComponents": {
      "CarouselContent": {
        "componentName": "CarouselContent",
        "fileName": "CarouselContent.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "Context",
            "type": "Carousel.CarouselContext",
            "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
      },
      "CarouselItem": {
        "componentName": "CarouselItem",
        "fileName": "CarouselItem.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "Context",
            "type": "Carousel.CarouselContext",
            "default": "default!",
            "description": null,
            "isCascading": true,
            "captureUnmatched": false
          },
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Index",
            "type": "int?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Total",
            "type": "int?",
            "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
      },
      "CarouselNext": {
        "componentName": "CarouselNext",
        "fileName": "CarouselNext.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "Context",
            "type": "Carousel.CarouselContext",
            "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
      },
      "CarouselPrevious": {
        "componentName": "CarouselPrevious",
        "fileName": "CarouselPrevious.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "Context",
            "type": "Carousel.CarouselContext",
            "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": "carousel",
  "docsUrl": "https://lumeo.nativ.sh/components/carousel",
  "sourceUrl": [
    {
      "file": "UI/Carousel/Carousel.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Carousel/Carousel.razor"
    },
    {
      "file": "UI/Carousel/CarouselContent.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Carousel/CarouselContent.razor"
    },
    {
      "file": "UI/Carousel/CarouselItem.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Carousel/CarouselItem.razor"
    },
    {
      "file": "UI/Carousel/CarouselNext.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Carousel/CarouselNext.razor"
    },
    {
      "file": "UI/Carousel/CarouselPrevious.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Carousel/CarouselPrevious.razor"
    }
  ],
  "source": [
    {
      "path": "UI/Carousel/Carousel.razor",
      "content": "@namespace Lumeo\n@implements IAsyncDisposable\n\n@{\n    var context = new CarouselContext(\n        _contentId,\n        Orientation,\n        _canScrollPrev && !Disabled,\n        _canScrollNext && !Disabled,\n        EventCallback.Factory.Create(this, ScrollPrev),\n        EventCallback.Factory.Create(this, ScrollNext)\n    );\n}\n\n<div role=\"region\" aria-roledescription=\"carousel\" class=\"@CssClass\" @onkeydown=\"HandleKeyDown\" @onkeydown:preventDefault=\"true\" @attributes=\"AdditionalAttributes\">\n    <CascadingValue Value=\"context\" IsFixed=\"false\">\n        @ChildContent\n    </CascadingValue>\n</div>\n\n@inject ComponentInteropService Interop\n@inject ThemeService Theme\n\n@code {\n    [Parameter] public CarouselOrientation Orientation { get; set; } = CarouselOrientation.Horizontal;\n    [Parameter] public bool Loop { get; set; }\n    [Parameter] public bool Disabled { 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 int _currentIndex;\n    private bool _canScrollPrev;\n    private bool _canScrollNext = true;\n    private readonly string _contentId = $\"carousel-{Guid.NewGuid():N}\";\n\n    private string CssClass => $\"relative {Class}\".Trim();\n\n    protected override async Task OnAfterRenderAsync(bool firstRender)\n    {\n        if (!firstRender) return;\n        try\n        {\n            var orientationStr = Orientation == CarouselOrientation.Horizontal ? \"horizontal\" : \"vertical\";\n            await Interop.RegisterCarouselSwipe(\n                _contentId,\n                orientationStr,\n                OnSwipe,\n                OnScrollPosition\n            );\n        }\n        catch (JSDisconnectedException) { }\n        catch (ObjectDisposedException) { }\n    }\n\n    private async Task OnSwipe(string direction)\n    {\n        if (direction == \"prev\")\n            await ScrollPrev();\n        else if (direction == \"next\")\n            await ScrollNext();\n    }\n\n    private Task OnScrollPosition(double scrollPos, double maxScroll, int nearestIndex)\n    {\n        var prevP = _canScrollPrev;\n        var prevN = _canScrollNext;\n        _canScrollPrev = scrollPos > 0;\n        _canScrollNext = scrollPos < maxScroll - 1;\n        // Sync _currentIndex from the scroll position so button navigation\n        // (ScrollNext/ScrollPrev) stays accurate after touch-swipe.\n        if (nearestIndex >= 0)\n            _currentIndex = nearestIndex;\n        if (prevP != _canScrollPrev || prevN != _canScrollNext)\n            StateHasChanged();\n        return Task.CompletedTask;\n    }\n\n    private async Task ScrollPrev()\n    {\n        if (Disabled) return;\n        if (!_canScrollPrev && !Loop) return;\n\n        if (_canScrollPrev)\n        {\n            _currentIndex--;\n        }\n        else if (Loop)\n        {\n            _currentIndex = -1;\n        }\n\n        await Interop.CarouselScrollTo(_contentId, _currentIndex < 0 ? int.MaxValue : _currentIndex);\n        StateHasChanged();\n    }\n\n    private async Task ScrollNext()\n    {\n        if (Disabled) return;\n        if (!_canScrollNext && !Loop) return;\n\n        if (_canScrollNext)\n        {\n            _currentIndex++;\n        }\n        else if (Loop)\n        {\n            _currentIndex = 0;\n        }\n\n        await Interop.CarouselScrollTo(_contentId, _currentIndex);\n        StateHasChanged();\n    }\n\n    private async Task HandleKeyDown(KeyboardEventArgs e)\n    {\n        if (Disabled) return;\n        if (Orientation == CarouselOrientation.Horizontal)\n        {\n            var isRtl = Theme.CurrentDirection == LayoutDirection.Rtl;\n            var (back, forward) = isRtl ? (\"ArrowRight\", \"ArrowLeft\") : (\"ArrowLeft\", \"ArrowRight\");\n            if (e.Key == back) await ScrollPrev();\n            else if (e.Key == forward) await ScrollNext();\n        }\n        else\n        {\n            if (e.Key == \"ArrowUp\") await ScrollPrev();\n            else if (e.Key == \"ArrowDown\") await ScrollNext();\n        }\n    }\n\n    public async ValueTask DisposeAsync()\n    {\n        try\n        {\n            await Interop.UnregisterCarouselSwipe(_contentId);\n        }\n        catch (JSDisconnectedException) { }\n    }\n\n    public enum CarouselOrientation { Horizontal, Vertical }\n\n    public record CarouselContext(\n        string ContentId,\n        CarouselOrientation Orientation,\n        bool CanScrollPrev,\n        bool CanScrollNext,\n        EventCallback ScrollPrev,\n        EventCallback ScrollNext\n    );\n}\n"
    },
    {
      "path": "UI/Carousel/CarouselContent.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    @if (Context.Orientation == Carousel.CarouselOrientation.Horizontal)\n    {\n        <div id=\"@Context.ContentId\"\n             class=\"flex -ms-4\"\n             style=\"overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none;\">\n            @ChildContent\n        </div>\n    }\n    else\n    {\n        <div id=\"@Context.ContentId\"\n             class=\"flex flex-col -mt-4\"\n             style=\"overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none;\">\n            @ChildContent\n        </div>\n    }\n</div>\n\n@code {\n    [CascadingParameter] public Carousel.CarouselContext 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 => $\"overflow-hidden {Class}\".Trim();\n}\n"
    },
    {
      "path": "UI/Carousel/CarouselItem.razor",
      "content": "@namespace Lumeo\n@inject Lumeo.Services.Localization.ILumeoLocalizer L\n\n@{\n    var isHorizontal = Context.Orientation == Carousel.CarouselOrientation.Horizontal;\n    var cssClass = isHorizontal\n        ? $\"min-w-0 shrink-0 grow-0 basis-full ps-4 {Class}\".Trim()\n        : $\"min-w-0 shrink-0 grow-0 basis-full pt-4 {Class}\".Trim();\n}\n\n<div role=\"group\" aria-roledescription=\"slide\" aria-label=\"@SlideLabel\" class=\"@cssClass\" style=\"scroll-snap-align: start;\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</div>\n\n@code {\n    [CascadingParameter] public Carousel.CarouselContext Context { get; set; } = default!;\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public int? Index { get; set; }\n    [Parameter] public int? Total { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string? SlideLabel => Index.HasValue && Total.HasValue\n        ? L[\"Carousel.SlideXofY\", Index.Value, Total.Value]\n        : null;\n}\n"
    },
    {
      "path": "UI/Carousel/CarouselNext.razor",
      "content": "@namespace Lumeo\n@inject Lumeo.Services.Localization.ILumeoLocalizer L\n\n@{\n    var isHorizontal = Context.Orientation == Carousel.CarouselOrientation.Horizontal;\n    var positionClass = isHorizontal\n        ? \"-end-12 top-1/2 -translate-y-1/2\"\n        : \"left-1/2 -translate-x-1/2 -bottom-12\";\n}\n\n<button class=\"@($\"absolute h-8 w-8 rounded-full border bg-background shadow-sm inline-flex items-center justify-center hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 {positionClass} {Class}\".Trim())\"\n        disabled=\"@(!Context.CanScrollNext)\"\n        aria-label=\"@L[\"Carousel.NextSlide\"]\"\n        @onclick=\"() => Context.ScrollNext.InvokeAsync()\"\n        @attributes=\"AdditionalAttributes\">\n    @if (isHorizontal)\n    {\n        <Blazicon Svg=\"Lucide.ChevronRight\" class=\"h-4 w-4 [dir=rtl]:rotate-180\" />\n    }\n    else\n    {\n        <Blazicon Svg=\"Lucide.ChevronDown\" class=\"h-4 w-4\" />\n    }\n    <span class=\"sr-only\">@L[\"Carousel.NextSlide\"]</span>\n</button>\n\n@code {\n    [CascadingParameter] public Carousel.CarouselContext Context { get; set; } = default!;\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n}\n"
    },
    {
      "path": "UI/Carousel/CarouselPrevious.razor",
      "content": "@namespace Lumeo\n@inject Lumeo.Services.Localization.ILumeoLocalizer L\n\n@{\n    var isHorizontal = Context.Orientation == Carousel.CarouselOrientation.Horizontal;\n    var positionClass = isHorizontal\n        ? \"-start-12 top-1/2 -translate-y-1/2\"\n        : \"left-1/2 -translate-x-1/2 -top-12\";\n}\n\n<button class=\"@($\"absolute h-8 w-8 rounded-full border bg-background shadow-sm inline-flex items-center justify-center hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 {positionClass} {Class}\".Trim())\"\n        disabled=\"@(!Context.CanScrollPrev)\"\n        aria-label=\"@L[\"Carousel.PreviousSlide\"]\"\n        @onclick=\"() => Context.ScrollPrev.InvokeAsync()\"\n        @attributes=\"AdditionalAttributes\">\n    @if (isHorizontal)\n    {\n        <Blazicon Svg=\"Lucide.ChevronLeft\" class=\"h-4 w-4 [dir=rtl]:rotate-180\" />\n    }\n    else\n    {\n        <Blazicon Svg=\"Lucide.ChevronUp\" class=\"h-4 w-4\" />\n    }\n    <span class=\"sr-only\">@L[\"Carousel.PreviousSlide\"]</span>\n</button>\n\n@code {\n    [CascadingParameter] public Carousel.CarouselContext Context { get; set; } = default!;\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n}\n"
    }
  ],
  "slots": [
    {
      "name": "ChildContent",
      "owner": "Carousel",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "CarouselContent",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "CarouselItem",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [
    {
      "service": "ComponentInteropService",
      "namespace": ""
    },
    {
      "service": "ThemeService",
      "namespace": ""
    },
    {
      "service": "ILumeoLocalizer",
      "namespace": "Lumeo.Services.Localization"
    }
  ],
  "cascadingDependencies": [
    {
      "name": "Context",
      "type": "Carousel.CarouselContext",
      "required": true
    }
  ],
  "relatedComponents": [
    {
      "name": "CarouselContent",
      "reason": "sub-component"
    },
    {
      "name": "CarouselItem",
      "reason": "sub-component"
    },
    {
      "name": "CarouselNext",
      "reason": "sub-component"
    },
    {
      "name": "CarouselPrevious",
      "reason": "sub-component"
    }
  ],
  "keyboardInteractions": [
    {
      "key": "ArrowUp",
      "action": "HandleKeyDown handles ArrowUp in Carousel.razor"
    },
    {
      "key": "ArrowDown",
      "action": "HandleKeyDown handles ArrowDown in Carousel.razor"
    }
  ],
  "tests": [
    "tests/Lumeo.Docs.Tests/Helpers/DocsTestContext.cs",
    "tests/Lumeo.Tests/Components/Carousel/CarouselTests.cs",
    "tests/Lumeo.Tests/Services/Interop/InteropAdapterTests.cs",
    "tests/Lumeo.Tests/Services/StrictInteropTests.cs"
  ],
  "mdSummary": "# Carousel\n\nSlide-based content rotator with autoplay and keyboard nav.\n\n**Package:** `Lumeo` · **Category:** Navigation\n**Docs:** https://lumeo.nativ.sh/components/carousel\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| Carousel | Orientation | `CarouselOrientation` | `CarouselOrientation.Horizontal` |  |\n| Carousel | Loop | `bool` | `` |  |\n| Carousel | Disabled | `bool` | `` |  |\n| Carousel | ChildContent | `RenderFragment?` | `` |  |\n| Carousel | Class | `string?` | `` |  |\n| Carousel | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| CarouselContent | Context | `Carousel.CarouselContext` | `default!` |  |\n| CarouselContent | ChildContent | `RenderFragment?` | `` |  |\n| CarouselContent | Class | `string?` | `` |  |\n| CarouselContent | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| CarouselItem | Context | `Carousel.CarouselContext` | `default!` |  |\n| CarouselItem | ChildContent | `RenderFragment?` | `` |  |\n| CarouselItem | Index | `int?` | `` |  |\n| CarouselItem | Total | `int?` | `` |  |\n| CarouselItem | Class | `string?` | `` |  |\n| CarouselItem | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| CarouselNext | Context | `Carousel.CarouselContext` | `default!` |  |\n| CarouselNext | Class | `string?` | `` |  |\n| CarouselNext | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| CarouselPrevious | Context | `Carousel.CarouselContext` | `default!` |  |\n| CarouselPrevious | Class | `string?` | `` |  |\n| CarouselPrevious | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `ChildContent` (Carousel) — RenderFragment slot\n- `ChildContent` (CarouselContent) — RenderFragment slot\n- `ChildContent` (CarouselItem) — RenderFragment slot\n\n## Events\n- (none)\n\n## Sub-components\n- `CarouselContent`, `CarouselItem`, `CarouselNext`, `CarouselPrevious`\n\n## Cascading values it expects\n- `Context` (`Carousel.CarouselContext`)\n\n## Services it injects\n- `ComponentInteropService` ()\n- `ThemeService` ()\n- `ILumeoLocalizer` (Lumeo.Services.Localization)\n\n## Keyboard\n- `ArrowUp` — HandleKeyDown handles ArrowUp in Carousel.razor\n- `ArrowDown` — HandleKeyDown handles ArrowDown in Carousel.razor\n\n## Example\n```razor\n<Carousel />\n```\n\n## CSS variables\n`--color-accent`, `--color-accent-foreground`, `--color-background`, `--radius`\n\n## Files\n- `UI/Carousel/Carousel.razor`\n- `UI/Carousel/CarouselContent.razor`\n- `UI/Carousel/CarouselItem.razor`\n- `UI/Carousel/CarouselNext.razor`\n- `UI/Carousel/CarouselPrevious.razor`\n"
}