{
  "name": "Marquee",
  "category": "Motion",
  "subcategory": null,
  "description": "Infinitely scrolling horizontal band of children.",
  "thumbnail": "/preview-cards/marquee.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo.Motion",
  "files": [
    "UI/Marquee/Marquee.razor"
  ],
  "dependencies": [],
  "packageDependencies": [],
  "cssVars": [
    "--color-foreground"
  ],
  "api": {
    "name": "Marquee",
    "category": "Motion",
    "subcategory": null,
    "description": "Infinitely scrolling horizontal band of children.",
    "nugetPackage": "Lumeo.Motion",
    "files": [
      "UI/Marquee/Marquee.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "ChildContent",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Speed",
        "type": "MarqueeSpeed",
        "default": "MarqueeSpeed.Normal",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Direction",
        "type": "MarqueeDirection",
        "default": "MarqueeDirection.Left",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "PauseOnHover",
        "type": "bool",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Reverse",
        "type": "bool",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Vertical",
        "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": [
      {
        "name": "MarqueeSpeed",
        "values": [
          "Slow",
          "Normal",
          "Fast"
        ],
        "description": null
      },
      {
        "name": "MarqueeDirection",
        "values": [
          "Left",
          "Right"
        ],
        "description": null
      }
    ],
    "records": [],
    "cssVars": [
      "--color-foreground"
    ],
    "examples": [
      {
        "title": "Default (Left Scroll)",
        "code": "<Marquee PauseOnHover=\"true\">\n    <div class=\"mx-6 text-sm font-medium text-muted-foreground\">Acme Corp</div>\n    <div class=\"mx-6 text-sm font-medium text-muted-foreground\">Globex</div>\n    <div class=\"mx-6 text-sm font-medium text-muted-foreground\">Initech</div>\n    <!-- more items -->\n</Marquee>"
      },
      {
        "title": "Reverse Direction",
        "code": "<Marquee Reverse=\"true\" Speed=\"Marquee.MarqueeSpeed.Slow\">\n    <Badge Class=\"mx-2\">Blazor</Badge>\n    <Badge Class=\"mx-2\">.NET 10</Badge>\n    <Badge Class=\"mx-2\">Tailwind CSS</Badge>\n</Marquee>"
      },
      {
        "title": "Fast Speed",
        "code": "<Marquee Speed=\"Marquee.MarqueeSpeed.Fast\" PauseOnHover=\"true\">\n    <div class=\"mx-6 text-sm font-mono text-muted-foreground\">Item 1</div>\n    <div class=\"mx-6 text-sm font-mono text-muted-foreground\">Item 2</div>\n</Marquee>"
      }
    ],
    "subComponents": {},
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "marquee",
  "docsUrl": "https://lumeo.nativ.sh/components/marquee",
  "sourceUrl": [
    {
      "file": "UI/Marquee/Marquee.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo.Motion/UI/Marquee/Marquee.razor"
    }
  ],
  "source": [
    {
      "path": "UI/Marquee/Marquee.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@CssClass\"\n     style=\"@StyleString\"\n     data-direction=\"@DirectionAttr\"\n     data-vertical=\"@(Vertical ? \"true\" : \"false\")\"\n     data-pause-hover=\"@(PauseOnHover ? \"true\" : \"false\")\"\n     @attributes=\"AdditionalAttributes\">\n    <div class=\"lumeo-marquee-track\">\n        @ChildContent\n    </div>\n    <div class=\"lumeo-marquee-track\" aria-hidden=\"true\">\n        @ChildContent\n    </div>\n</div>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public MarqueeSpeed Speed { get; set; } = MarqueeSpeed.Normal;\n    [Parameter] public MarqueeDirection Direction { get; set; } = MarqueeDirection.Left;\n    [Parameter] public bool PauseOnHover { get; set; }\n    [Parameter] public bool Reverse { get; set; }\n    [Parameter] public bool Vertical { 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 => string.Join(\" \", new[] { \"lumeo-marquee\", Class }.Where(s => !string.IsNullOrWhiteSpace(s)));\n\n    private string DurationCss => Speed switch\n    {\n        MarqueeSpeed.Slow => \"60s\",\n        MarqueeSpeed.Fast => \"12s\",\n        _ => \"30s\"\n    };\n\n    private string StyleString => $\"--lumeo-marquee-duration: {DurationCss};\";\n\n    // Reverse inverts the Direction parameter.\n    private string DirectionAttr\n    {\n        get\n        {\n            var dir = Direction;\n            if (Reverse) dir = dir == MarqueeDirection.Left ? MarqueeDirection.Right : MarqueeDirection.Left;\n            return dir == MarqueeDirection.Right ? \"right\" : \"left\";\n        }\n    }\n\n    public enum MarqueeSpeed { Slow, Normal, Fast }\n    public enum MarqueeDirection { Left, Right }\n}\n"
    }
  ],
  "slots": [
    {
      "name": "ChildContent",
      "owner": "Marquee",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [],
  "cascadingDependencies": [],
  "relatedComponents": [],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/Marquee/MarqueeTests.cs"
  ],
  "mdSummary": "# Marquee\n\nInfinitely scrolling horizontal band of children.\n\n**Package:** `Lumeo.Motion` · **Category:** Motion\n**Docs:** https://lumeo.nativ.sh/components/marquee\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| Marquee | ChildContent | `RenderFragment?` | `` |  |\n| Marquee | Speed | `MarqueeSpeed` | `MarqueeSpeed.Normal` |  |\n| Marquee | Direction | `MarqueeDirection` | `MarqueeDirection.Left` |  |\n| Marquee | PauseOnHover | `bool` | `` |  |\n| Marquee | Reverse | `bool` | `` |  |\n| Marquee | Vertical | `bool` | `` |  |\n| Marquee | Class | `string?` | `` |  |\n| Marquee | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `ChildContent` (Marquee) — RenderFragment slot\n\n## Events\n- (none)\n\n## Sub-components\n- (none)\n\n## Cascading values it expects\n- (none)\n\n## Services it injects\n- (none)\n\n## Keyboard\n—\n\n## Example\n```razor\n<Marquee />\n```\n\n## CSS variables\n`--color-foreground`\n\n## Files\n- `UI/Marquee/Marquee.razor`\n"
}