@lumeo-ui/mcp-server 2.0.0-rc.36 → 2.0.0-rc.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lumeo-ui/mcp-server",
-  "version": "2.0.0-rc.36",
+  "version": "2.0.0-rc.38",
   "description": "Model Context Protocol server for the Lumeo Blazor component library. Lets LLMs (Claude, Copilot, Cursor) author correct Lumeo markup.",
   "type": "module",
   "main": "dist/index.js",

package/src/components-api.json

@@ -1,12 +1,12 @@
 {
   "$schema": "https://lumeo.nativ.sh/components-api-schema.json",
-  "version": "2.0.0-rc.36",
-  "generated": "2026-05-13T06:19:03.9303031Z",
+  "version": "2.0.0-rc.38",
+  "generated": "2026-05-13T07:19:07.9817901Z",
   "stats": {
     "componentCount": 145,
-    "totalParameters": 3431,
+    "totalParameters": 3438,
     "totalEnums": 101,
-    "totalRecords": 57,
+    "totalRecords": 58,
     "thinFallbacks": []
   },
   "themeTokens": [
@@ -519,6 +519,10 @@
         {
           "title": "Multiple",
           "code": "<Accordion Type=\"Accordion.AccordionType.Multiple\">\r\n    <AccordionItem Value=\"item-1\">\r\n        <AccordionTrigger>What is Lumeo?</AccordionTrigger>\r\n        <AccordionContent>Lumeo is a Blazor component library inspired by shadcn/ui, built with Tailwind CSS.</AccordionContent>\r\n    </AccordionItem>\r\n    <AccordionItem Value=\"item-2\">\r\n        <AccordionTrigger>Which .NET version?</AccordionTrigger>\r\n        <AccordionContent>Lumeo targets .NET 10 and uses Tailwind CSS v4 for styling.</AccordionContent>\r\n    </AccordionItem>\r\n    <AccordionItem Value=\"item-3\">\r\n        <AccordionTrigger>Can I customize it?</AccordionTrigger>\r\n        <AccordionContent>Absolutely. All components accept a Class parameter for additional CSS classes.</AccordionContent>\r\n    </AccordionItem>\r\n</Accordion>"
+        },
+        {
+          "title": "Type — interactive",
+          "code": "<Segmented @bind-Value=\"_accordionTypeSel\" Options=\"_accordionTypeOptions\" />\r\n<Accordion Type=\"@_activeAccordionType\">\r\n    <AccordionItem Value=\"a\">\r\n        <AccordionTrigger>Is it accessible?</AccordionTrigger>\r\n        <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>\r\n    </AccordionItem>\r\n    <AccordionItem Value=\"b\">\r\n        <AccordionTrigger>Is it styled?</AccordionTrigger>\r\n        <AccordionContent>Yes. It comes with default styles.</AccordionContent>\r\n    </AccordionItem>\r\n    <AccordionItem Value=\"c\">\r\n        <AccordionTrigger>Is it animated?</AccordionTrigger>\r\n        <AccordionContent>Yes. Animated by default.</AccordionContent>\r\n    </AccordionItem>\r\n</Accordion>\r\n\r\n@code {\r\n    private string _accordionTypeSel = \"Single\";\r\n    private Accordion.AccordionType _activeAccordionType => Enum.Parse<Accordion.AccordionType>(_accordionTypeSel);\r\n    private List<Segmented.SegmentedOption> _accordionTypeOptions = new()\r\n    {\r\n        new() { Label = \"Single\", Value = \"Single\" },\r\n        new() { Label = \"Multiple\", Value = \"Multiple\" },\r\n    };\r\n}"
         }
       ],
       "subComponents": {
@@ -1866,6 +1870,10 @@
           "title": "With Search",
           "code": "<AppBar>\n    <StartContent>\n        <Lumeo.Text Size=\"sm\" Weight=\"semibold\">Dashboard</Lumeo.Text>\n    </StartContent>\n    <ChildContent>\n        <Input Placeholder=\"Search...\" Class=\"max-w-xs h-8 text-sm\" />\n    </ChildContent>\n    <EndContent>\n        <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">\n            <Blazicon Svg=\"Lucide.Bell\" class=\"h-4 w-4\" />\n        </Button>\n        <Avatar><AvatarFallback>JD</AvatarFallback></Avatar>\n    </EndContent>\n</AppBar>"
         },
+        {
+          "title": "Appearance toggles — interactive",
+          "code": "<Switch @bind-Checked=\"_elevated\" />\n<Switch @bind-Checked=\"_bordered\" />\n<AppBar Elevated=\"@_elevated\" Bordered=\"@_bordered\">\n    <StartContent>\n        <Lumeo.Text Size=\"sm\" Weight=\"semibold\">My App</Lumeo.Text>\n    </StartContent>\n    <EndContent>\n        <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">Sign In</Button>\n        <Button Size=\"Button.ButtonSize.Sm\">Get Started</Button>\n    </EndContent>\n</AppBar>\n\n@code {\n    private bool _elevated = false;\n    private bool _bordered = true;\n}"
+        },
         {
           "title": "Elevated (no border)",
           "code": "<AppBar Elevated=\"true\" Bordered=\"false\">\n    <StartContent>\n        <Lumeo.Text Size=\"sm\" Weight=\"semibold\">My App</Lumeo.Text>\n    </StartContent>\n    <EndContent>\n        <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">\n            <Blazicon Svg=\"Lucide.Settings\" class=\"h-4 w-4\" />\n        </Button>\n    </EndContent>\n</AppBar>"
@@ -1939,6 +1947,10 @@
         {
           "title": "Media Card",
           "code": "<Card>\r\n    <AspectRatio Ratio=\"16.0 / 9.0\" Class=\"rounded-t-lg overflow-hidden bg-muted\">\r\n        <div class=\"flex items-center justify-center h-full text-muted-foreground\">\r\n            Thumbnail\r\n        </div>\r\n    </AspectRatio>\r\n    <CardContent Class=\"p-4\">\r\n        <Lumeo.Text Weight=\"semibold\">Getting Started with Lumeo</Lumeo.Text>\r\n        <Lumeo.Text Size=\"sm\" Color=\"muted\" Class=\"mt-1\">Learn how to build beautiful UIs.</Lumeo.Text>\r\n    </CardContent>\r\n</Card>"
+        },
+        {
+          "title": "Ratio — interactive",
+          "code": "<AspectRatio Ratio=\"16.0 / 9.0\" Class=\"rounded-md overflow-hidden bg-muted\">\r\n    <div class=\"flex items-center justify-center h-full text-sm text-muted-foreground\">16:9</div>\r\n</AspectRatio>"
         }
       ],
       "subComponents": {},
@@ -2433,6 +2445,10 @@
           "title": "Variants",
           "code": "<Badge>Default</Badge>\r\n<Badge Variant=\"Badge.BadgeVariant.Secondary\">Secondary</Badge>\r\n<Badge Variant=\"Badge.BadgeVariant.Outline\">Outline</Badge>\r\n<Badge Variant=\"Badge.BadgeVariant.Destructive\">Destructive</Badge>\r\n<Badge Variant=\"Badge.BadgeVariant.Success\">Success</Badge>\r\n<Badge Variant=\"Badge.BadgeVariant.Warning\">Warning</Badge>"
         },
+        {
+          "title": "Variant (interactive)",
+          "code": "<Segmented @bind-Value=\"_variant\">\r\n    <SegmentedItem Value=\"@Badge.BadgeVariant.Default\">Default</SegmentedItem>\r\n    <SegmentedItem Value=\"@Badge.BadgeVariant.Secondary\">Secondary</SegmentedItem>\r\n    <SegmentedItem Value=\"@Badge.BadgeVariant.Outline\">Outline</SegmentedItem>\r\n    <SegmentedItem Value=\"@Badge.BadgeVariant.Destructive\">Destructive</SegmentedItem>\r\n    <SegmentedItem Value=\"@Badge.BadgeVariant.Success\">Success</SegmentedItem>\r\n    <SegmentedItem Value=\"@Badge.BadgeVariant.Warning\">Warning</SegmentedItem>\r\n</Segmented>\r\n<Badge Variant=\"@_variant\">@_variant.ToString()</Badge>\r\n\r\n@code { private Badge.BadgeVariant _variant = Badge.BadgeVariant.Default; }"
+        },
         {
           "title": "Usage Examples",
           "code": "<Flex Align=\"center\" Gap=\"2\">\r\n    <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"medium\">Status</Lumeo.Text>\r\n    <Badge Variant=\"Badge.BadgeVariant.Success\">Active</Badge>\r\n</Flex>\r\n<Flex Align=\"center\" Gap=\"2\">\r\n    <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"medium\">Priority</Lumeo.Text>\r\n    <Badge Variant=\"Badge.BadgeVariant.Destructive\">High</Badge>\r\n</Flex>"
@@ -2440,10 +2456,6 @@
         {
           "title": "In a Card",
           "code": "<Card>\r\n    <CardHeader>\r\n        <Flex Align=\"center\" Justify=\"between\">\r\n            <Heading Level=\"3\" Size=\"lg\">Notifications</Heading>\r\n            <Badge>3 new</Badge>\r\n        </Flex>\r\n        <Lumeo.Text Size=\"sm\" Color=\"muted\">You have unread messages.</Lumeo.Text>\r\n    </CardHeader>\r\n</Card>"
-        },
-        {
-          "title": "Dot Badge",
-          "code": "<Stack Class=\"relative\">\r\n    <Blazicon Svg=\"Lucide.Bell\" class=\"h-5 w-5\" />\r\n    <Badge IsDot=\"true\" Class=\"absolute -top-1 -right-1\" />\r\n</Stack>\r\n<Stack Class=\"relative\">\r\n    <Blazicon Svg=\"Lucide.Mail\" class=\"h-5 w-5\" />\r\n    <Badge IsDot=\"true\" Variant=\"Badge.BadgeVariant.Destructive\" Class=\"absolute -top-1 -right-1\" />\r\n</Stack>"
         }
       ],
       "subComponents": {},
@@ -2656,6 +2668,10 @@
           "title": "Basic 4-column bento",
           "code": "<Bento Columns=\"4\" Gap=\"Bento.BentoGap.Md\">\r\n    <BentoTile Span=\"2\" Title=\"Revenue\" Description=\"Last 30 days\">\r\n        <div class=\"text-3xl font-semibold text-foreground\">$48,290</div>\r\n    </BentoTile>\r\n    <BentoTile Title=\"New users\"><div class=\"text-2xl font-semibold\">1,204</div></BentoTile>\r\n    <BentoTile Title=\"Churn\"><div class=\"text-2xl font-semibold\">2.1%</div></BentoTile>\r\n    <BentoTile Span=\"2\" Title=\"Latest activity\" Description=\"Feed\">\r\n        <div class=\"text-sm text-muted-foreground\">No events in the last hour.</div>\r\n    </BentoTile>\r\n    <BentoTile Title=\"Sessions\"><div class=\"text-2xl font-semibold\">8,492</div></BentoTile>\r\n    <BentoTile Title=\"Avg. duration\"><div class=\"text-2xl font-semibold\">4m 12s</div></BentoTile>\r\n</Bento>"
         },
+        {
+          "title": "Gap (interactive)",
+          "code": "<Segmented @bind-Value=\"_gap\">\r\n    <SegmentedItem Value=\"@Bento.BentoGap.Sm\">Sm</SegmentedItem>\r\n    <SegmentedItem Value=\"@Bento.BentoGap.Md\">Md</SegmentedItem>\r\n    <SegmentedItem Value=\"@Bento.BentoGap.Lg\">Lg</SegmentedItem>\r\n</Segmented>\r\n<Bento Columns=\"4\" Gap=\"@_gap\">\r\n    <BentoTile Title=\"Revenue\"><div class=\"text-2xl font-semibold\">$48,290</div></BentoTile>\r\n    <BentoTile Title=\"Users\"><div class=\"text-2xl font-semibold\">12,402</div></BentoTile>\r\n    <BentoTile Title=\"Sessions\"><div class=\"text-2xl font-semibold\">8,492</div></BentoTile>\r\n    <BentoTile Title=\"Churn\"><div class=\"text-2xl font-semibold\">2.1%</div></BentoTile>\r\n</Bento>\r\n\r\n@code { private Bento.BentoGap _gap = Bento.BentoGap.Md; }"
+        },
         {
           "title": "Dashboard — KPI row + spark + wide tile",
           "code": "<Bento Columns=\"3\" Gap=\"Bento.BentoGap.Md\">\r\n    <KpiCard Label=\"Revenue\" Value=\"$48,290\" Delta=\"12.3\" />\r\n    <KpiCard Label=\"Active users\" Value=\"12,402\" Delta=\"4.8\" />\r\n    <KpiCard Label=\"MRR\" Value=\"$9,820\" Delta=\"-1.2\" />\r\n</Bento>\r\n<Bento Columns=\"3\" Gap=\"Bento.BentoGap.Md\">\r\n    <SparkCard Label=\"Page views\" Value=\"184k\" Data=\"@sparkA\" />\r\n    <SparkCard Label=\"Signups\" Value=\"421\" Data=\"@sparkB\" />\r\n    <BentoTile Title=\"Traffic\" Description=\"Last 7 days\">\r\n        <Chart ... />\r\n    </BentoTile>\r\n</Bento>"
@@ -4388,6 +4404,10 @@
           "title": "With Loop",
           "code": "<Carousel Loop=\"true\">\r\n    <CarouselContent>\r\n        @for (var i = 1; i <= 5; i++)\r\n        {\r\n            var index = i;\r\n            <CarouselItem>\r\n                <div class=\"p-1\">\r\n                    <Card>\r\n                        <CardContent Class=\"flex aspect-square items-center justify-center p-6\">\r\n                            <span class=\"text-4xl font-semibold\">@index</span>\r\n                        </CardContent>\r\n                    </Card>\r\n                </div>\r\n            </CarouselItem>\r\n        }\r\n    </CarouselContent>\r\n    <CarouselPrevious />\r\n    <CarouselNext />\r\n</Carousel>"
         },
+        {
+          "title": "Orientation — interactive",
+          "code": "<Segmented @bind-Value=\"_orientationSel\" Options=\"_orientationOptions\" />\r\n<Carousel Orientation=\"@(Enum.Parse<Carousel.CarouselOrientation>(_orientationSel))\">\r\n    <CarouselContent>\r\n        @for (var i = 1; i <= 4; i++) {\r\n            var index = i;\r\n            <CarouselItem>\r\n                <Card>\r\n                    <CardContent Class=\"flex aspect-square items-center justify-center p-6\">\r\n                        <span class=\"text-4xl font-semibold\">@index</span>\r\n                    </CardContent>\r\n                </Card>\r\n            </CarouselItem>\r\n        }\r\n    </CarouselContent>\r\n    <CarouselPrevious />\r\n    <CarouselNext />\r\n</Carousel>\r\n\r\n@code {\r\n    private string _orientationSel = \"Horizontal\";\r\n    private List<Segmented.SegmentedOption> _orientationOptions = new()\r\n    {\r\n        new() { Label = \"Horizontal\", Value = \"Horizontal\" },\r\n        new() { Label = \"Vertical\", Value = \"Vertical\" },\r\n    };\r\n}"
+        },
         {
           "title": "Product Gallery",
           "code": "<Carousel>\r\n    <CarouselContent>\r\n        @foreach (var product in _products)\r\n        {\r\n            <CarouselItem>\r\n                <div class=\"p-1\">\r\n                    <Card>\r\n                        <AspectRatio Ratio=\"4.0 / 3.0\" Class=\"rounded-t-lg overflow-hidden bg-muted\">\r\n                            <div class=\"flex items-center justify-center h-full text-sm text-muted-foreground\">@product.Category</div>\r\n                        </AspectRatio>\r\n                        <CardContent Class=\"p-4\">\r\n                            <Lumeo.Text Size=\"sm\" Weight=\"semibold\">@product.Name</Lumeo.Text>\r\n                            <Lumeo.Text Size=\"sm\" Color=\"muted\">@product.Price</Lumeo.Text>\r\n                        </CardContent>\r\n                    </Card>\r\n                </div>\r\n            </CarouselItem>\r\n        }\r\n    </CarouselContent>\r\n    <CarouselPrevious />\r\n    <CarouselNext />\r\n</Carousel>"
@@ -12969,6 +12989,10 @@
         {
           "title": "Custom Size",
           "code": "<Code Size=\"xs\">text-xs code</Code>\n<Code Size=\"base\">text-base code</Code>\n<Code Size=\"lg\">text-lg code</Code>"
+        },
+        {
+          "title": "Variant — interactive",
+          "code": "@* inline — pill-styled within text *@\n<Code Variant=\"inline\">dotnet add package Lumeo</Code>\n\n@* block — full-width scrollable code block *@\n<Code Variant=\"block\">dotnet add package Lumeo</Code>"
         }
       ],
       "subComponents": {},
@@ -14747,6 +14771,10 @@
         {
           "title": "Different Max Widths",
           "code": "<Container MaxWidth=\"sm\">Small container</Container>\r\n<Container MaxWidth=\"md\">Medium container</Container>\r\n<Container MaxWidth=\"lg\">Large container</Container>\r\n<Container MaxWidth=\"xl\">Extra large container</Container>"
+        },
+        {
+          "title": "MaxWidth — interactive",
+          "code": "<Container MaxWidth=\"lg\">\r\n    Content constrained to max-w-lg\r\n</Container>"
         }
       ],
       "subComponents": {},
@@ -19787,8 +19815,8 @@
           "code": "<Drawer @bind-Open=\"_preventDrawerOpen\">\r\n    <DrawerTrigger>\r\n        <Button Variant=\"Button.ButtonVariant.Outline\">Open Protected Drawer</Button>\r\n    </DrawerTrigger>\r\n    <DrawerContent PreventClose=\"true\">\r\n        <DrawerHeader>\r\n            <DrawerTitle>Confirm Action</DrawerTitle>\r\n            <DrawerDescription>You must choose an option to continue.</DrawerDescription>\r\n        </DrawerHeader>\r\n        <Stack Gap=\"2\" Class=\"p-4\">\r\n            <Button Class=\"w-full\" OnClick=\"@(() => _preventDrawerOpen = false)\">Confirm</Button>\r\n            <Button Variant=\"Button.ButtonVariant.Outline\" Class=\"w-full\" OnClick=\"@(() => _preventDrawerOpen = false)\">Cancel</Button>\r\n        </Stack>\r\n    </DrawerContent>\r\n</Drawer>\r\n\r\n@code {\r\n    private bool _preventDrawerOpen;\r\n}"
         },
         {
-          "title": "Simple Drawer",
-          "code": "<Drawer @bind-Open=\"_isOpen\">\r\n    <DrawerTrigger>\r\n        <Button>View Details</Button>\r\n    </DrawerTrigger>\r\n    <DrawerContent>\r\n        <DrawerHeader>\r\n            <DrawerTitle>Order Details</DrawerTitle>\r\n            <DrawerDescription>Review your recent order information.</DrawerDescription>\r\n        </DrawerHeader>\r\n        <Stack Gap=\"2\" Class=\"p-4\">\r\n            <Flex Justify=\"between\" Class=\"text-sm\">\r\n                <Lumeo.Text As=\"span\" Size=\"sm\" Color=\"muted\">Order ID</Lumeo.Text>\r\n                <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"medium\">#12345</Lumeo.Text>\r\n            </Flex>\r\n        </Stack>\r\n        <DrawerFooter>\r\n            <DrawerClose>\r\n                <Button Class=\"w-full\">Close</Button>\r\n            </DrawerClose>\r\n        </DrawerFooter>\r\n    </DrawerContent>\r\n</Drawer>\r\n\r\n@code {\r\n    private bool _isOpen;\r\n}"
+          "title": "Side — interactive",
+          "code": "<Segmented @bind-Value=\"_drawerSideSel\" Options=\"_drawerSideOptions\" />\r\n<Drawer @bind-Open=\"_open\">\r\n    <DrawerTrigger>\r\n        <Button Variant=\"Button.ButtonVariant.Outline\">Open Drawer (@_drawerSideSel)</Button>\r\n    </DrawerTrigger>\r\n    <DrawerContent Side=\"@_activeDrawerSide\">\r\n        <DrawerHeader>\r\n            <DrawerTitle>@_drawerSideSel Drawer</DrawerTitle>\r\n            <DrawerDescription>Slides in from the @_drawerSideSel.ToLower().</DrawerDescription>\r\n        </DrawerHeader>\r\n        <DrawerFooter>\r\n            <DrawerClose><Button Class=\"w-full\">Close</Button></DrawerClose>\r\n        </DrawerFooter>\r\n    </DrawerContent>\r\n</Drawer>\r\n\r\n@code {\r\n    private string _drawerSideSel = \"Bottom\";\r\n    private DrawerContent.DrawerSide _activeDrawerSide => Enum.Parse<DrawerContent.DrawerSide>(_drawerSideSel);\r\n    private List<Segmented.SegmentedOption> _drawerSideOptions = new()\r\n    {\r\n        new() { Label = \"Top\", Value = \"Top\" },\r\n        new() { Label = \"Right\", Value = \"Right\" },\r\n        new() { Label = \"Bottom\", Value = \"Bottom\" },\r\n        new() { Label = \"Left\", Value = \"Left\" },\r\n    };\r\n}"
         }
       ],
       "subComponents": {
@@ -22469,6 +22497,10 @@
         {
           "title": "Different Gaps",
           "code": "<Grid Columns=\"3\" RowGap=\"6\" ColGap=\"2\">\r\n    <div>1</div>\r\n    <div>2</div>\r\n    <!-- ... -->\r\n</Grid>"
+        },
+        {
+          "title": "Columns — interactive",
+          "code": "<Grid Columns=\"4\" Gap=\"3\">\r\n    @for (var i = 1; i <= 12; i++)\r\n    {\r\n        <div>@i</div>\r\n    }\r\n</Grid>"
         }
       ],
       "subComponents": {},
@@ -22563,6 +22595,10 @@
         {
           "title": "Tracking",
           "code": "<Heading Level=\"1\">Default tight tracking</Heading>\r\n<Heading Level=\"1\" Tracking=\"normal\">Normal tracking</Heading>\r\n<Heading Level=\"1\" Tracking=\"wide\">Wide tracking</Heading>"
+        },
+        {
+          "title": "Level — interactive",
+          "code": "<Heading Level=\"2\">This is a level 2 heading</Heading>"
         }
       ],
       "subComponents": {},
@@ -23333,12 +23369,12 @@
           "code": "<ImageCompare BeforeSrc=\"img1.jpg\" AfterSrc=\"img2.jpg\"\r\n             Orientation=\"ImageCompare.ImageCompareOrientation.Vertical\"\r\n             Height=\"320px\" />"
         },
         {
-          "title": "Custom Initial Position",
-          "code": "<ImageCompare BeforeSrc=\"before.jpg\" AfterSrc=\"after.jpg\"\r\n             InitialPosition=\"25\" Height=\"280px\" />"
+          "title": "Orientation (interactive)",
+          "code": "<Segmented @bind-Value=\"_orientation\">\r\n    <SegmentedItem Value=\"@ImageCompare.ImageCompareOrientation.Horizontal\">Horizontal</SegmentedItem>\r\n    <SegmentedItem Value=\"@ImageCompare.ImageCompareOrientation.Vertical\">Vertical</SegmentedItem>\r\n</Segmented>\r\n<ImageCompare BeforeSrc=\"before.jpg\" AfterSrc=\"after.jpg\"\r\n             BeforeLabel=\"Before\" AfterLabel=\"After\"\r\n             Orientation=\"@_orientation\" Height=\"280px\" />\r\n\r\n@code { private ImageCompare.ImageCompareOrientation _orientation = ImageCompare.ImageCompareOrientation.Horizontal; }"
         },
         {
-          "title": "No Labels",
-          "code": "<ImageCompare BeforeSrc=\"before.jpg\" AfterSrc=\"after.jpg\"\r\n             BeforeLabel=\"\" AfterLabel=\"\" Height=\"260px\" />"
+          "title": "Custom Initial Position",
+          "code": "<ImageCompare BeforeSrc=\"before.jpg\" AfterSrc=\"after.jpg\"\r\n             InitialPosition=\"25\" Height=\"280px\" />"
         }
       ],
       "subComponents": {},
@@ -24324,8 +24360,8 @@
           "code": "<Flex Align=\"center\" Justify=\"between\" Class=\"rounded-md border px-3 py-2\">\r\n    <Lumeo.Text As=\"span\" Size=\"sm\" Color=\"muted\">Open command palette</Lumeo.Text>\r\n    <Flex Align=\"center\" Gap=\"1\">\r\n        <Kbd>Ctrl</Kbd>\r\n        <Lumeo.Text As=\"span\" Size=\"xs\" Color=\"muted\">+</Lumeo.Text>\r\n        <Kbd>K</Kbd>\r\n    </Flex>\r\n</Flex>"
         },
         {
-          "title": "Keyboard Shortcut Service",
-          "code": "@inject KeyboardShortcutService Shortcuts\r\n@implements IAsyncDisposable\r\n\r\n@code {\r\n    private IAsyncDisposable? _shortcut;\r\n\r\n    protected override async Task OnAfterRenderAsync(bool firstRender)\r\n    {\r\n        if (firstRender)\r\n        {\r\n            _shortcut = await Shortcuts.RegisterAsync(\"ctrl+k\", () =>\r\n            {\r\n                // Handle shortcut\r\n                return Task.CompletedTask;\r\n            });\r\n        }\r\n    }\r\n\r\n    public async ValueTask DisposeAsync()\r\n    {\r\n        if (_shortcut is not null) await _shortcut.DisposeAsync();\r\n    }\r\n}"
+          "title": "Size — interactive",
+          "code": "<Kbd Size=\"Kbd.KbdSize.Sm\">Ctrl</Kbd>\r\n<Kbd>Ctrl</Kbd>          @* Default *@\r\n<Kbd Size=\"Kbd.KbdSize.Lg\">Ctrl</Kbd>"
         }
       ],
       "subComponents": {},
@@ -25062,6 +25098,10 @@
         {
           "title": "Single Column Panel",
           "code": "<MegaMenu>\r\n    <MegaMenuItem Label=\"Company\">\r\n        <MegaMenuPanel Columns=\"1\" FullWidth=\"false\">\r\n            <MegaMenuGroup>\r\n                <MegaMenuLink Href=\"/about\" Title=\"About Us\" />\r\n                <MegaMenuLink Href=\"/careers\" Title=\"Careers\" />\r\n            </MegaMenuGroup>\r\n        </MegaMenuPanel>\r\n    </MegaMenuItem>\r\n</MegaMenu>"
+        },
+        {
+          "title": "Orientation — interactive",
+          "code": "<Segmented @bind-Value=\"_orientationSel\" Options=\"_orientationOptions\" />\r\n<MegaMenu Orientation=\"@_activeMegaMenuOrientation\">\r\n    <MegaMenuItem Label=\"Products\">\r\n        <MegaMenuPanel Columns=\"2\">\r\n            <MegaMenuGroup Title=\"Design\">\r\n                <MegaMenuLink Href=\"#\" Title=\"Components\" Description=\"Pre-built UI components\" />\r\n            </MegaMenuGroup>\r\n            <MegaMenuGroup Title=\"Development\">\r\n                <MegaMenuLink Href=\"#\" Title=\"CLI\" Description=\"Command-line tooling\" />\r\n            </MegaMenuGroup>\r\n        </MegaMenuPanel>\r\n    </MegaMenuItem>\r\n    <MegaMenuItem Label=\"Docs\" Href=\"#\" />\r\n</MegaMenu>\r\n\r\n@code {\r\n    private string _orientationSel = \"Horizontal\";\r\n    private MegaMenu.MegaMenuOrientation _activeMegaMenuOrientation =>\r\n        Enum.Parse<MegaMenu.MegaMenuOrientation>(_orientationSel);\r\n    private List<Segmented.SegmentedOption> _orientationOptions = new()\r\n    {\r\n        new() { Label = \"Horizontal\", Value = \"Horizontal\" },\r\n        new() { Label = \"Vertical\", Value = \"Vertical\" },\r\n    };\r\n}"
         }
       ],
       "subComponents": {
@@ -28946,8 +28986,8 @@
           "code": "<QRCode Value=\"...\" ErrorCorrectionLevel=\"QRCode.QRErrorLevel.Low\" />\r\n<QRCode Value=\"...\" ErrorCorrectionLevel=\"QRCode.QRErrorLevel.Medium\" />\r\n<QRCode Value=\"...\" ErrorCorrectionLevel=\"QRCode.QRErrorLevel.Quartile\" />\r\n<QRCode Value=\"...\" ErrorCorrectionLevel=\"QRCode.QRErrorLevel.High\" />"
         },
         {
-          "title": "Custom Colors",
-          "code": "<QRCode Value=\"...\" ForegroundColor=\"white\" BackgroundColor=\"transparent\" />"
+          "title": "Error Correction Level (interactive)",
+          "code": "<Segmented @bind-Value=\"_level\">\r\n    <SegmentedItem Value=\"@QRCode.QRErrorLevel.Low\">Low</SegmentedItem>\r\n    <SegmentedItem Value=\"@QRCode.QRErrorLevel.Medium\">Medium</SegmentedItem>\r\n    <SegmentedItem Value=\"@QRCode.QRErrorLevel.Quartile\">Quartile</SegmentedItem>\r\n    <SegmentedItem Value=\"@QRCode.QRErrorLevel.High\">High</SegmentedItem>\r\n</Segmented>\r\n<QRCode Value=\"https://lumeo.nativ.sh/\" Size=\"160\" ErrorCorrectionLevel=\"@_level\" />\r\n\r\n@code { private QRCode.QRErrorLevel _level = QRCode.QRErrorLevel.Medium; }"
         }
       ],
       "subComponents": {},
@@ -30096,6 +30136,10 @@
         {
           "title": "All Statuses",
           "code": "<Result Status=\"Result.ResultStatus.Warning\" Title=\"Warning\" SubTitle=\"Proceed with caution.\" />\r\n<Result Status=\"Result.ResultStatus.Info\" Title=\"Information\" SubTitle=\"Useful info.\" />\r\n<Result Status=\"Result.ResultStatus.NotFound\" Title=\"404 Not Found\" SubTitle=\"Page does not exist.\" />\r\n<Result Status=\"Result.ResultStatus.Forbidden\" Title=\"403 Forbidden\" SubTitle=\"No permission.\" />"
+        },
+        {
+          "title": "Status — interactive",
+          "code": "<Result Status=\"Result.ResultStatus.Success\" Title=\"Success Result\" SubTitle=\"This is a success result page.\" />"
         }
       ],
       "subComponents": {},
@@ -31379,7 +31423,8 @@
       "description": "Pill-shaped tab-like single-select control.",
       "nugetPackage": "Lumeo",
       "files": [
-        "UI/Segmented/Segmented.razor"
+        "UI/Segmented/Segmented.razor",
+        "UI/Segmented/SegmentedItem.razor"
       ],
       "namespace": "Lumeo",
       "inheritsFrom": null,
@@ -31405,7 +31450,15 @@
           "name": "Options",
           "type": "List<SegmentedOption>?",
           "default": null,
-          "description": null,
+          "description": "Data-driven options. When set, takes precedence over ChildContent. Leave null and pass SegmentedItem children for the compound-component flavour.",
+          "isCascading": false,
+          "captureUnmatched": false
+        },
+        {
+          "name": "ChildContent",
+          "type": "RenderFragment?",
+          "default": null,
+          "description": "Compound-mode content — one or more SegmentedItem. Ignored when Options is set.",
           "isCascading": false,
           "captureUnmatched": false
         },
@@ -31442,7 +31495,13 @@
         }
       ],
       "enums": [],
-      "records": [],
+      "records": [
+        {
+          "name": "SegmentedContext",
+          "signature": "SegmentedContext(\n        string? Value,\n        EventCallback<string> Select,\n        Func<bool, string> GetItemClasses)",
+          "description": "Cascading context for compound-mode SegmentedItem children — they read the active value + the parent's item-class function (so style stays consistent with Options-mode) and invoke Select on click."
+        }
+      ],
       "cssVars": [
         "--color-background",
         "--color-foreground",
@@ -31464,7 +31523,70 @@
           "code": "new SegmentedOption { Label = \"Weekly\", Value = \"weekly\", Disabled = true }"
         }
       ],
-      "subComponents": {},
+      "subComponents": {
+        "SegmentedItem": {
+          "componentName": "SegmentedItem",
+          "fileName": "SegmentedItem.razor",
+          "namespace": "Lumeo",
+          "inheritsFrom": null,
+          "implements": [],
+          "parameters": [
+            {
+              "name": "Context",
+              "type": "Segmented.SegmentedContext?",
+              "default": null,
+              "description": null,
+              "isCascading": true,
+              "captureUnmatched": false
+            },
+            {
+              "name": "Value",
+              "type": "string",
+              "default": "\"\"",
+              "description": "The value selected when this item is clicked. Must match one of the parent Segmented's expected values.",
+              "isCascading": false,
+              "captureUnmatched": false
+            },
+            {
+              "name": "ChildContent",
+              "type": "RenderFragment?",
+              "default": null,
+              "description": null,
+              "isCascading": false,
+              "captureUnmatched": false
+            },
+            {
+              "name": "IconContent",
+              "type": "RenderFragment?",
+              "default": null,
+              "description": "Optional leading icon slot.",
+              "isCascading": false,
+              "captureUnmatched": false
+            },
+            {
+              "name": "Disabled",
+              "type": "bool",
+              "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
     },
@@ -32901,6 +33023,10 @@
           "title": "Overlay",
           "code": "<SidebarProvider @bind-IsCollapsed=\"_isCollapsed\" Variant=\"SidebarProvider.SidebarVariant.Overlay\">\r\n    <SidebarComponent>\r\n        <SidebarHeader>\r\n            <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"semibold\">Workspace</Lumeo.Text>\r\n        </SidebarHeader>\r\n        <SidebarContent>\r\n            <SidebarGroup>\r\n                <SidebarGroupLabel>Navigation</SidebarGroupLabel>\r\n                <SidebarMenu>\r\n                    <SidebarMenuItem>\r\n                        <SidebarMenuButton Href=\"#\" IsActive=\"true\">\r\n                            <IconContent><Blazicon Svg=\"Lucide.House\" class=\"h-4 w-4\" /></IconContent>\r\n                            <LabelContent><span>Home</span></LabelContent>\r\n                        </SidebarMenuButton>\r\n                    </SidebarMenuItem>\r\n                </SidebarMenu>\r\n            </SidebarGroup>\r\n        </SidebarContent>\r\n    </SidebarComponent>\r\n    <main class=\"flex-1 p-6\">\r\n        <SidebarTrigger />\r\n        <Lumeo.Text Size=\"sm\" Color=\"muted\">Click backdrop to dismiss.</Lumeo.Text>\r\n    </main>\r\n</SidebarProvider>"
         },
+        {
+          "title": "Side — interactive",
+          "code": "<Segmented @bind-Value=\"_sidebarSideSel\" Options=\"_sidebarSideOptions\" />\r\n<SidebarProvider>\r\n    <SidebarComponent Side=\"@_activeSidebarSide\">\r\n        <SidebarHeader>...</SidebarHeader>\r\n        <SidebarContent>...</SidebarContent>\r\n    </SidebarComponent>\r\n    <main class=\"flex-1 p-6\">\r\n        <SidebarTrigger />\r\n    </main>\r\n</SidebarProvider>\r\n\r\n@code {\r\n    private string _sidebarSideSel = \"Left\";\r\n    private SidebarComponent.SidebarSide _activeSidebarSide =>\r\n        Enum.Parse<SidebarComponent.SidebarSide>(_sidebarSideSel);\r\n    private List<Segmented.SegmentedOption> _sidebarSideOptions = new()\r\n    {\r\n        new() { Label = \"Left\", Value = \"Left\" },\r\n        new() { Label = \"Right\", Value = \"Right\" },\r\n    };\r\n}"
+        },
         {
           "title": "Icon",
           "code": "<SidebarProvider @bind-IsCollapsed=\"_isCollapsed\" Variant=\"SidebarProvider.SidebarVariant.Icon\">\r\n    <SidebarComponent>\r\n        <SidebarContent>\r\n            <SidebarGroup>\r\n                <SidebarMenu>\r\n                    <SidebarMenuItem>\r\n                        <SidebarMenuButton Href=\"#\" IsActive=\"true\" Tooltip=\"Home\">\r\n                            <IconContent><Blazicon Svg=\"Lucide.House\" class=\"h-4 w-4\" /></IconContent>\r\n                            <LabelContent><span>Home</span></LabelContent>\r\n                        </SidebarMenuButton>\r\n                    </SidebarMenuItem>\r\n                </SidebarMenu>\r\n            </SidebarGroup>\r\n        </SidebarContent>\r\n    </SidebarComponent>\r\n    <main class=\"flex-1 p-6\">\r\n        <SidebarTrigger />\r\n        <Lumeo.Text Size=\"sm\" Color=\"muted\">Toggle to expand with labels.</Lumeo.Text>\r\n    </main>\r\n</SidebarProvider>"
@@ -34191,6 +34317,10 @@
         {
           "title": "Without Data (Label + Value only)",
           "code": "<SparkCard Label=\"Uptime\" Value=\"99.98%\" />\n<SparkCard Label=\"SLA\" Value=\"100%\" />\n<SparkCard Label=\"Incidents\" Value=\"0\" />"
+        },
+        {
+          "title": "Variant (interactive)",
+          "code": "<Segmented @bind-Value=\"_variant\">\n    <SegmentedItem Value=\"@SparkCard.SparkCardVariant.Default\">Default</SegmentedItem>\n    <SegmentedItem Value=\"@SparkCard.SparkCardVariant.Bordered\">Bordered</SegmentedItem>\n    <SegmentedItem Value=\"@SparkCard.SparkCardVariant.Filled\">Filled</SegmentedItem>\n</Segmented>\n<Grid Columns=\"3\" Gap=\"4\">\n    <SparkCard Label=\"Revenue\" Value=\"$24,800\" Data=\"@_data\" Variant=\"@_variant\" />\n    <SparkCard Label=\"Sessions\" Value=\"8,412\" Data=\"@_data\" Variant=\"@_variant\" />\n    <SparkCard Label=\"Bounce Rate\" Value=\"34.2%\" Data=\"@_data\" Variant=\"@_variant\" />\n</Grid>\n\n@code { private SparkCard.SparkCardVariant _variant = SparkCard.SparkCardVariant.Default; }"
         }
       ],
       "subComponents": {},
@@ -34650,6 +34780,10 @@
         {
           "title": "In a Button",
           "code": "<Button Disabled=\"true\">\r\n    <Spinner Size=\"Spinner.SpinnerSize.Sm\" Class=\"mr-2\" />\r\n    Please wait\r\n</Button>"
+        },
+        {
+          "title": "Variant — interactive",
+          "code": "<Spinner Variant=\"Spinner.SpinnerVariant.Ring\" />\r\n<Spinner Variant=\"Spinner.SpinnerVariant.Dots\" />\r\n<Spinner Variant=\"Spinner.SpinnerVariant.Bars\" />"
         }
       ],
       "subComponents": {},
@@ -35269,6 +35403,14 @@
         {
           "title": "With Trend",
           "code": "<Statistic Title=\"Sales\" Value=\"1,234\" ShowTrend=\"true\" TrendValue=\"+12.5%\" TrendDirection=\"Statistic.TrendType.Up\" />\r\n<Statistic Title=\"Returns\" Value=\"42\" ShowTrend=\"true\" TrendValue=\"-3.2%\" TrendDirection=\"Statistic.TrendType.Down\" />"
+        },
+        {
+          "title": "Size (interactive)",
+          "code": "<Segmented @bind-Value=\"_size\">\r\n    <SegmentedItem Value=\"@Statistic.StatisticSize.Small\">Small</SegmentedItem>\r\n    <SegmentedItem Value=\"@Statistic.StatisticSize.Medium\">Medium</SegmentedItem>\r\n    <SegmentedItem Value=\"@Statistic.StatisticSize.Large\">Large</SegmentedItem>\r\n</Segmented>\r\n<Statistic Title=\"Monthly Revenue\" Value=\"48,290\" Size=\"@_size\" ShowTrend=\"true\" TrendValue=\"+12%\" TrendDirection=\"Statistic.TrendType.Up\">\r\n    <Prefix><Lumeo.Text As=\"span\">$</Lumeo.Text></Prefix>\r\n</Statistic>\r\n\r\n@code { private Statistic.StatisticSize _size = Statistic.StatisticSize.Medium; }"
+        },
+        {
+          "title": "Variant (interactive)",
+          "code": "<Segmented @bind-Value=\"_variant\">\r\n    <SegmentedItem Value=\"@Statistic.StatisticVariant.Default\">Default</SegmentedItem>\r\n    <SegmentedItem Value=\"@Statistic.StatisticVariant.Minimal\">Minimal</SegmentedItem>\r\n    <SegmentedItem Value=\"@Statistic.StatisticVariant.Bordered\">Bordered</SegmentedItem>\r\n</Segmented>\r\n<Grid Columns=\"3\" Gap=\"4\">\r\n    <Statistic Title=\"Users\" Value=\"12,847\" Variant=\"@_variant\" />\r\n    <Statistic Title=\"Revenue\" Value=\"48,290\" Variant=\"@_variant\" ShowTrend=\"true\" TrendValue=\"+8%\" TrendDirection=\"Statistic.TrendType.Up\">\r\n        <Prefix><Lumeo.Text As=\"span\">$</Lumeo.Text></Prefix>\r\n    </Statistic>\r\n    <Statistic Title=\"Churn\" Value=\"2.1\" Variant=\"@_variant\" ShowTrend=\"true\" TrendValue=\"-0.3%\" TrendDirection=\"Statistic.TrendType.Down\">\r\n        <Suffix><Lumeo.Text As=\"span\">%</Lumeo.Text></Suffix>\r\n    </Statistic>\r\n</Grid>\r\n\r\n@code { private Statistic.StatisticVariant _variant = Statistic.StatisticVariant.Default; }"
         }
       ],
       "subComponents": {},
@@ -35439,6 +35581,10 @@
         {
           "title": "Vertical Orientation",
           "code": "<Stepper @bind-ActiveStep=\"_step\" Orientation=\"Stepper.StepperOrientation.Vertical\">\n    <StepperStep Title=\"Choose plan\" Description=\"Pick a subscription\">\n        <Lumeo.Text Size=\"sm\" Color=\"muted\">Select the plan that fits your needs.</Lumeo.Text>\n    </StepperStep>\n    <StepperStep Title=\"Payment\" Description=\"Enter billing details\">\n        <Input Placeholder=\"Card number\" />\n    </StepperStep>\n    <StepperStep Title=\"Confirm\">\n        <Lumeo.Text Size=\"sm\" Color=\"muted\">Confirm and activate.</Lumeo.Text>\n    </StepperStep>\n</Stepper>"
+        },
+        {
+          "title": "Orientation — interactive",
+          "code": "<Segmented @bind-Value=\"_orientationSel\" Options=\"_orientationOptions\" />\n<Stepper @bind-ActiveStep=\"_step\" Orientation=\"@_activeStepperOrientation\">\n    <StepperStep Title=\"Account Info\" Description=\"Set up your account\">\n        <Input Placeholder=\"Email address\" />\n    </StepperStep>\n    <StepperStep Title=\"Profile\" Description=\"Personalize your profile\">\n        <Input Placeholder=\"Display name\" />\n    </StepperStep>\n    <StepperStep Title=\"Review\" Description=\"Confirm your details\">\n        <Lumeo.Text Size=\"sm\" Color=\"muted\">Review your information.</Lumeo.Text>\n    </StepperStep>\n</Stepper>\n\n@code {\n    private string _orientationSel = \"Horizontal\";\n    private Stepper.StepperOrientation _activeStepperOrientation =>\n        Enum.Parse<Stepper.StepperOrientation>(_orientationSel);\n    private List<Segmented.SegmentedOption> _orientationOptions = new()\n    {\n        new() { Label = \"Horizontal\", Value = \"Horizontal\" },\n        new() { Label = \"Vertical\", Value = \"Vertical\" },\n    };\n}"
         }
       ],
       "subComponents": {
@@ -35691,8 +35837,8 @@
           "code": "<Steps CurrentStep=\"2\" Orientation=\"Steps.StepsOrientation.Vertical\">\r\n    <StepsItem Title=\"Sign Up\" Description=\"Create an account\" />\r\n    <StepsItem Title=\"Verify Email\" Description=\"Confirm your email\" />\r\n    <StepsItem Title=\"Set Password\" Description=\"Choose a password\" />\r\n    <StepsItem Title=\"Done\" Description=\"Start using the app\" />\r\n</Steps>"
         },
         {
-          "title": "Animated Steps",
-          "code": "<Steps @bind-CurrentStep=\"_step\" Animated=\"true\">\r\n    <StepsItem Title=\"Account\" Description=\"Create your account\" />\r\n    <StepsItem Title=\"Profile\" Description=\"Set up your profile\" />\r\n    <StepsItem Title=\"Payment\" Description=\"Add billing\" />\r\n    <StepsItem Title=\"Complete\" Description=\"All done\" />\r\n</Steps>\r\n<Flex Justify=\"center\" Gap=\"2\">\r\n    <Button Variant=\"Button.ButtonVariant.Outline\" OnClick=\"() => { if (_step > 0) _step--; }\">Previous</Button>\r\n    <Button OnClick=\"() => { if (_step < 3) _step++; }\">Next</Button>\r\n</Flex>"
+          "title": "Orientation (interactive)",
+          "code": "<Segmented @bind-Value=\"_orientation\">\r\n    <SegmentedItem Value=\"@Steps.StepsOrientation.Horizontal\">Horizontal</SegmentedItem>\r\n    <SegmentedItem Value=\"@Steps.StepsOrientation.Vertical\">Vertical</SegmentedItem>\r\n</Segmented>\r\n<Steps CurrentStep=\"1\" Orientation=\"@_orientation\">\r\n    <StepsItem Title=\"Account\" Description=\"Create your account\" />\r\n    <StepsItem Title=\"Profile\" Description=\"Set up your profile\" />\r\n    <StepsItem Title=\"Payment\" Description=\"Add billing info\" />\r\n    <StepsItem Title=\"Done\" Description=\"All finished\" />\r\n</Steps>\r\n\r\n@code { private Steps.StepsOrientation _orientation = Steps.StepsOrientation.Horizontal; }"
         }
       ],
       "subComponents": {
@@ -37692,8 +37838,8 @@
           "code": "<Timeline Orientation=\"Timeline.TimelineOrientation.Horizontal\">\r\n    <TimelineItem Title=\"Step 1\" Description=\"Planning\" />\r\n    <TimelineItem Title=\"Step 2\" Description=\"Design\" />\r\n    <TimelineItem Title=\"Step 3\" Description=\"Development\" />\r\n    <TimelineItem Title=\"Step 4\" Description=\"Launch\" />\r\n</Timeline>"
         },
         {
-          "title": "Animated Timeline",
-          "code": "<Timeline Animated=\"true\" @bind-ActiveIndex=\"_activeIndex\">\r\n    <TimelineItem Title=\"Order placed\" Time=\"Jan 1, 2025\" />\r\n    <TimelineItem Title=\"Processing\" Time=\"Jan 2, 2025\" />\r\n    <TimelineItem Title=\"Shipped\" Time=\"Jan 3, 2025\" />\r\n    <TimelineItem Title=\"Delivered\" Time=\"Jan 5, 2025\" />\r\n</Timeline>\r\n<Flex Gap=\"2\">\r\n    <Button OnClick=\"() => { if (_activeIndex > 0) _activeIndex--; }\">Previous</Button>\r\n    <Button OnClick=\"() => { if (_activeIndex < 3) _activeIndex++; }\">Next</Button>\r\n</Flex>\r\n\r\n@code { private int _activeIndex = 1; }"
+          "title": "Orientation (interactive)",
+          "code": "<Segmented @bind-Value=\"_orientation\">\r\n    <SegmentedItem Value=\"@Timeline.TimelineOrientation.Vertical\">Vertical</SegmentedItem>\r\n    <SegmentedItem Value=\"@Timeline.TimelineOrientation.Horizontal\">Horizontal</SegmentedItem>\r\n</Segmented>\r\n<Timeline Orientation=\"@_orientation\">\r\n    <TimelineItem Title=\"Planning\" Description=\"Scope defined\" Time=\"Jan 1\" />\r\n    <TimelineItem Title=\"Design\" Description=\"Wireframes approved\" Time=\"Jan 8\" />\r\n    <TimelineItem Title=\"Development\" Description=\"Sprint in progress\" Time=\"Jan 15\" />\r\n    <TimelineItem Title=\"Launch\" Description=\"Shipped to production\" Time=\"Feb 1\" />\r\n</Timeline>\r\n\r\n@code { private Timeline.TimelineOrientation _orientation = Timeline.TimelineOrientation.Vertical; }"
         }
       ],
       "subComponents": {
@@ -39071,6 +39217,10 @@
           "title": "Expanded by Default",
           "code": "<ToolCallCard ToolName=\"analyze_sentiment\"\n              Status=\"ToolCallCard.ToolCallStatus.Success\"\n              Input=\"{&quot;text&quot;: &quot;Lumeo makes Blazor development a joy!&quot;}\"\n              Output=\"{&quot;sentiment&quot;: &quot;positive&quot;, &quot;score&quot;: 0.96}\"\n              DurationMs=\"128\"\n              DefaultOpen=\"true\" />"
         },
+        {
+          "title": "Status (interactive)",
+          "code": "<Segmented @bind-Value=\"_status\">\n    <SegmentedItem Value=\"@ToolCallCard.ToolCallStatus.Pending\">Pending</SegmentedItem>\n    <SegmentedItem Value=\"@ToolCallCard.ToolCallStatus.Running\">Running</SegmentedItem>\n    <SegmentedItem Value=\"@ToolCallCard.ToolCallStatus.Success\">Success</SegmentedItem>\n    <SegmentedItem Value=\"@ToolCallCard.ToolCallStatus.Error\">Error</SegmentedItem>\n</Segmented>\n<ToolCallCard ToolName=\"run_query\" Status=\"@_status\"\n              Input=\"{&quot;sql&quot;: &quot;SELECT * FROM users&quot;}\"\n              Output=\"@(_status == Success ? \"10 rows\" : null)\"\n              ErrorMessage=\"@(_status == Error ? \"Timeout\" : null)\" />\n\n@code { private ToolCallCard.ToolCallStatus _status = ToolCallCard.ToolCallStatus.Pending; }"
+        },
         {
           "title": "Multiple Tool Calls",
           "code": "@foreach (var call in _toolCalls)\n{\n    <ToolCallCard ToolName=\"@call.Name\"\n                  Status=\"@call.Status\"\n                  Input=\"@call.Input\"\n                  Output=\"@call.Output\"\n                  DurationMs=\"@call.DurationMs\" />\n}"

package/src/registry.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://lumeo.nativ.sh/registry-schema.json",
   "version": "2.0.0",
-  "generated": "2026-05-13T06:19:03.0451418Z",
+  "generated": "2026-05-13T07:19:07.0465652Z",
   "components": {
     "accordion": {
       "name": "Accordion",
@@ -2626,7 +2626,8 @@
       "hasDocsPage": true,
       "nugetPackage": "Lumeo",
       "files": [
-        "UI/Segmented/Segmented.razor"
+        "UI/Segmented/Segmented.razor",
+        "UI/Segmented/SegmentedItem.razor"
       ],
       "dependencies": [],
       "packageDependencies": [],