@lumeo-ui/mcp-server 2.0.0-rc.35 → 2.0.0-rc.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lumeo-ui/mcp-server",
-  "version": "2.0.0-rc.35",
+  "version": "2.0.0-rc.37",
   "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.35",
-  "generated": "2026-05-12T20:42:26.5402362Z",
+  "version": "2.0.0-rc.37",
+  "generated": "2026-05-13T06:54:44.3772199Z",
   "stats": {
     "componentCount": 145,
-    "totalParameters": 3423,
+    "totalParameters": 3431,
     "totalEnums": 101,
-    "totalRecords": 56,
+    "totalRecords": 57,
     "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>"
@@ -5099,8 +5119,8 @@
         {
           "name": "LoadingText",
           "type": "string?",
-          "default": "\"Loading…\"",
-          "description": "Label rendered next to the spinner inside the loading pill. Set to null or empty to hide the text and show only the spinner. Defaults to \"Loading…\".",
+          "default": null,
+          "description": "Label rendered next to the spinner inside the loading pill. Set to null or empty to hide the text and show only the spinner. When not set, uses the active locale's \"Chart.Loading\" string (default: \"Loading…\").",
           "isCascading": false,
           "captureUnmatched": false
         }
@@ -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": {},
@@ -15818,6 +15846,70 @@
           "isCascading": false,
           "captureUnmatched": false
         },
+        {
+          "name": "OnBatchSave",
+          "type": "EventCallback<DataGridBatchSaveEventArgs<TItem>>",
+          "default": null,
+          "description": "Fired when the user clicks \"Save all\" while EditMode is Batch. Args carry the buffered modifications + added rows. On a clean callback return (no exception), the grid's pending-changes buffer is cleared automatically.",
+          "isCascading": false,
+          "captureUnmatched": false
+        },
+        {
+          "name": "ShowAddRow",
+          "type": "bool",
+          "default": null,
+          "description": "When true and NewItemFactory is set, renders a thin \"+ Add row\" trigger below the body. Each click creates a TItem via the factory, pushes it into the added-rows buffer, and immediately shows it inline so cells can be filled in. Only meaningful in Batch.",
+          "isCascading": false,
+          "captureUnmatched": false
+        },
+        {
+          "name": "NewItemFactory",
+          "type": "Func<TItem>?",
+          "default": null,
+          "description": "Factory used by the \"+ Add row\" trigger to produce a fresh TItem. Required when ShowAddRow is true. The returned item is stored in the added-rows buffer; the user fills its cells inline and the row is delivered via OnBatchSave.",
+          "isCascading": false,
+          "captureUnmatched": false
+        },
+        {
+          "name": "ColumnVirtualize",
+          "type": "bool",
+          "default": null,
+          "description": "Simplified column virtualization: caps the number of horizontally- rendered data columns at MaxVisibleColumns. Pinned columns always make the cut. Default false.",
+          "isCascading": false,
+          "captureUnmatched": false
+        },
+        {
+          "name": "MaxVisibleColumns",
+          "type": "int",
+          "default": "30",
+          "description": "Maximum columns rendered when ColumnVirtualize is true. Default 30.",
+          "isCascading": false,
+          "captureUnmatched": false
+        },
+        {
+          "name": "BatchSaveAllText",
+          "type": "string?",
+          "default": "\"Save all\"",
+          "description": "Label for the batch-mode \"Save all\" button. Override for localization.",
+          "isCascading": false,
+          "captureUnmatched": false
+        },
+        {
+          "name": "BatchDiscardText",
+          "type": "string?",
+          "default": "\"Discard\"",
+          "description": "Label for the batch-mode \"Discard\" button. Override for localization.",
+          "isCascading": false,
+          "captureUnmatched": false
+        },
+        {
+          "name": "BatchAddRowText",
+          "type": "string?",
+          "default": "\"Add row\"",
+          "description": "Label for the batch-mode \"+ Add row\" trigger. Override for localization.",
+          "isCascading": false,
+          "captureUnmatched": false
+        },
         {
           "name": "OnColumnReorder",
           "type": "EventCallback<ColumnReorderEventArgs>",
@@ -15934,6 +16026,11 @@
           "type": "EventCallback<RowEditEventArgs<TItem>>",
           "description": null
         },
+        {
+          "name": "OnBatchSave",
+          "type": "EventCallback<DataGridBatchSaveEventArgs<TItem>>",
+          "description": "Fired when the user clicks \"Save all\" while EditMode is Batch. Args carry the buffered modifications + added rows. On a clean callback return (no exception), the grid's pending-changes buffer is cleared automatically."
+        },
         {
           "name": "OnColumnReorder",
           "type": "EventCallback<ColumnReorderEventArgs>",
@@ -19718,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": {
@@ -22400,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": {},
@@ -22494,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": {},
@@ -23264,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": {},
@@ -24255,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": {},
@@ -24993,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": {
@@ -27794,7 +27903,12 @@
       "records": [
         {
           "name": "ColumnLeaf",
-          "signature": "ColumnLeaf(string Label, object? Key, IReadOnlyList<TItem> Items)",
+          "signature": "ColumnLeaf(\r\n        string Label,\r\n        string PathKey,\r\n        object?[] Path,\r\n        IReadOnlyList<TItem> Items,\r\n        bool IsGrandTotal)",
+          "description": null
+        },
+        {
+          "name": "HeaderEntry",
+          "signature": "HeaderEntry(string Label, int ColSpan, int RowSpan, bool IsGrandTotal)",
           "description": null
         },
         {
@@ -27815,15 +27929,19 @@
       "examples": [
         {
           "title": "Sales by region × year",
-          "code": "<PivotGrid TItem=\"Sale\"\n           Items=\"_sales\"\n           RowFields=\"@(new List<PivotField<Sale>> { new(\"Region\", s => s.Region) })\"\n           ColumnFields=\"@(new List<PivotField<Sale>> { new(\"Year\", s => s.Year, v => \"FY \" + v) })\"\n           Measures=\"@(new List<PivotMeasure<Sale>> { new(\"Revenue\", s => s.Amount, PivotAggregate.Sum, d => \"$\" + d.ToString(\"N0\")) })\" />\n\n@code {\n    record Sale(string Region, string Country, int Year, int Quarter, decimal Amount, int Units);\n    List<Sale> _sales = new() { /* ... */ };\n}"
+          "code": "<PivotGrid TItem=\"Sale\"\r\n           Items=\"_sales\"\r\n           RowFields=\"@(new List<PivotField<Sale>> { new(\"Region\", s => s.Region) })\"\r\n           ColumnFields=\"@(new List<PivotField<Sale>> { new(\"Year\", s => s.Year, v => \"FY \" + v) })\"\r\n           Measures=\"@(new List<PivotMeasure<Sale>> { new(\"Revenue\", s => s.Amount, PivotAggregate.Sum, d => \"$\" + d.ToString(\"N0\")) })\" />\r\n\r\n@code {\r\n    record Sale(string Region, string Country, int Year, int Quarter, decimal Amount, int Units);\r\n    List<Sale> _sales = new() { /* ... */ };\r\n}"
         },
         {
           "title": "Multiple measures (sum + count)",
-          "code": "<PivotGrid TItem=\"Sale\"\n           Items=\"_sales\"\n           RowFields=\"_regionField\"\n           ColumnFields=\"_yearField\"\n           Measures=\"@(new List<PivotMeasure<Sale>> {\n               new(\"Revenue\", s => s.Amount, PivotAggregate.Sum, d => \"$\" + d.ToString(\"N0\")),\n               new(\"Deals\", s => s.Units, PivotAggregate.Count),\n           })\" />"
+          "code": "<PivotGrid TItem=\"Sale\"\r\n           Items=\"_sales\"\r\n           RowFields=\"_regionField\"\r\n           ColumnFields=\"_yearField\"\r\n           Measures=\"@(new List<PivotMeasure<Sale>> {\r\n               new(\"Revenue\", s => s.Amount, PivotAggregate.Sum, d => \"$\" + d.ToString(\"N0\")),\r\n               new(\"Deals\", s => s.Units, PivotAggregate.Count),\r\n           })\" />"
         },
         {
           "title": "Collapsible nested row groups",
-          "code": "<PivotGrid TItem=\"Sale\"\n           Items=\"_sales\"\n           RowFields=\"@(new List<PivotField<Sale>> {\n               new(\"Region\", s => s.Region),\n               new(\"Country\", s => s.Country),\n           })\"\n           ColumnFields=\"_yearField\"\n           Measures=\"_amountMeasure\"\n           Collapsible=\"true\"\n           Compact=\"true\" />"
+          "code": "<PivotGrid TItem=\"Sale\"\r\n           Items=\"_sales\"\r\n           RowFields=\"@(new List<PivotField<Sale>> {\r\n               new(\"Region\", s => s.Region),\r\n               new(\"Country\", s => s.Country),\r\n           })\"\r\n           ColumnFields=\"_yearField\"\r\n           Measures=\"_amountMeasure\"\r\n           Collapsible=\"true\"\r\n           Compact=\"true\" />"
+        },
+        {
+          "title": "Multi-level column hierarchy (Year &gt; Quarter)",
+          "code": "<PivotGrid TItem=\"Sale\"\r\n           Items=\"_sales\"\r\n           RowFields=\"_regionCountryFields\"\r\n           ColumnFields=\"@(new List<PivotField<Sale>> {\r\n               new(\"Year\",    s => s.Year, v => \"FY \" + v),\r\n               new(\"Quarter\", s => s.Quarter, v => \"Q\" + v),\r\n           })\"\r\n           Measures=\"_amountMeasure\"\r\n           Compact=\"true\" />"
         }
       ],
       "subComponents": {},
@@ -28868,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": {},
@@ -30018,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": {},
@@ -32823,6 +32945,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>"
@@ -34113,6 +34239,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": {},
@@ -34572,6 +34702,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": {},
@@ -35191,6 +35325,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": {},
@@ -35361,6 +35503,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": {
@@ -35613,8 +35759,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": {
@@ -37614,8 +37760,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": {
@@ -38678,7 +38824,9 @@
       ],
       "namespace": "Lumeo",
       "inheritsFrom": null,
-      "implements": [],
+      "implements": [
+        "IAsyncDisposable"
+      ],
       "parameters": [
         {
           "name": "ChildContent",
@@ -38708,7 +38856,7 @@
           "name": "Overflow",
           "type": "bool",
           "default": null,
-          "description": "When true the toolbar collapses items that don't fit into a trailing \"⋯\" dropdown. Use VisibleCount to control how many items are shown inline.",
+          "description": "When true the toolbar collapses items that don't fit into a trailing \"⋯\" dropdown. Use VisibleCount to control how many items are shown inline, or leave it at -1 (the default) to let the toolbar auto-measure via ResizeObserver.",
           "isCascading": false,
           "captureUnmatched": false
         },
@@ -38716,7 +38864,7 @@
           "name": "VisibleCount",
           "type": "int",
           "default": "-1",
-          "description": "Number of leading items to show inline when Overflow is true. Items past this index are collapsed into the \"⋯\" dropdown. -1 (default) means show all items (no overflow). Set to a positive integer to collapse trailing items.",
+          "description": "Number of leading items to show inline when Overflow is true. -1 (default) — auto-measure mode: a ResizeObserver measures the container width on every resize and computes the maximum number of items that fit before a \"⋯\" trigger button is needed. No consumer configuration required. Positive integer — manual mode: exactly that many items are shown inline and the rest collapse into the \"⋯\" dropdown regardless of available space.",
           "isCascading": false,
           "captureUnmatched": false
         },
@@ -38991,6 +39139,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-12T20:42:24.5776633Z",
+  "generated": "2026-05-13T06:54:43.3072285Z",
   "components": {
     "accordion": {
       "name": "Accordion",
@@ -2182,7 +2182,9 @@
         "UI/PivotGrid/PivotGrid.razor",
         "UI/PivotGrid/PivotMeasure.cs"
       ],
-      "dependencies": [],
+      "dependencies": [
+        "list"
+      ],
       "packageDependencies": [
         "Blazicons.Lucide"
       ],