@lumeo-ui/mcp-server 2.2.2 → 3.0.1

package/src/components-api.json

@@ -1,12 +1,12 @@
 {
   "$schema": "https://lumeo.nativ.sh/components-api-schema.json",
-  "version": "2.2.2",
-  "generated": "2026-05-21T07:27:51.6242641Z",
+  "version": "3.0.1",
+  "generated": "2026-05-21T13:54:18.3260556Z",
   "stats": {
     "componentCount": 149,
-    "totalParameters": 3510,
-    "totalEnums": 104,
-    "totalRecords": 59,
+    "totalParameters": 3580,
+    "totalEnums": 65,
+    "totalRecords": 62,
     "thinFallbacks": []
   },
   "themeTokens": [
@@ -251,7 +251,7 @@
       "examples": [
         {
           "title": "Analytics Dashboard",
-          "code": "<Tabs @bind-ActiveValue=\"_activeTab\" Orientation=\"Tabs.TabsOrientation.Vertical\" Class=\"gap-6\">\n\n    <TabsList Class=\"flex-col h-auto w-48 shrink-0 justify-start items-stretch gap-0.5 bg-muted/40 border border-border/40 p-2 rounded-[var(--radius-lg)]\">\n        <TabsTrigger Value=\"overview\" Class=\"justify-start text-sm h-8\">\n            <DynamicIcon Name=\"LayoutDashboard\" Class=\"h-3.5 w-3.5 mr-2\" />\n            Overview\n        </TabsTrigger>\n        <TabsTrigger Value=\"traffic\" Class=\"justify-start text-sm h-8\">\n            <DynamicIcon Name=\"Globe\" Class=\"h-3.5 w-3.5 mr-2\" />\n            Traffic Sources\n        </TabsTrigger>\n        <TabsTrigger Value=\"pages\" Class=\"justify-start text-sm h-8\">\n            <DynamicIcon Name=\"FileText\" Class=\"h-3.5 w-3.5 mr-2\" />\n            Top Pages\n        </TabsTrigger>\n        <TabsTrigger Value=\"devices\" Class=\"justify-start text-sm h-8\">\n            <DynamicIcon Name=\"Monitor\" Class=\"h-3.5 w-3.5 mr-2\" />\n            Devices\n        </TabsTrigger>\n    </TabsList>\n\n    <Stack Class=\"flex-1 min-w-0\" Gap=\"0\">\n\n        <!-- Overview Tab -->\n        <TabsContent Value=\"overview\">\n            <!-- KPI Row -->\n            <Grid Class=\"grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\n                @foreach (var kpi in _kpis) {\n                    <Card>\n                        <CardHeader><Lumeo.Text Class=\"text-xs text-muted-foreground\">@kpi.Label</Lumeo.Text></CardHeader>\n                        <CardContent>\n                            <Lumeo.Text Class=\"text-2xl font-bold\">@kpi.Value</Lumeo.Text>\n                            <Progress Value=\"@kpi.Percent\" Class=\"mt-3 h-1\" Variant=\"@kpi.Variant\" />\n                        </CardContent>\n                    </Card>\n                }\n            </Grid>\n            <!-- Line Chart -->\n            <Card>\n                <CardHeader><Heading Level=\"3\">Page Views</Heading></CardHeader>\n                <CardContent>\n                    <LineChart Categories=\"@_lineCategories\" Series=\"@_lineSeries\" Smooth=\"true\" ShowDots=\"true\" Height=\"240px\" />\n                </CardContent>\n            </Card>\n        </TabsContent>\n\n        <!-- Traffic Tab -->\n        <TabsContent Value=\"traffic\">\n            <Grid Class=\"grid-cols-1 lg:grid-cols-2 gap-4\">\n                <Card>\n                    <CardHeader><Heading Level=\"3\">Traffic by Source</Heading></CardHeader>\n                    <CardContent>\n                        <DonutChart Data=\"@_trafficDonut\" CenterLabel=\"148.4K\" InnerRadius=\"52%\" OuterRadius=\"72%\" Height=\"260px\" />\n                    </CardContent>\n                </Card>\n                <Card>\n                    <CardHeader><Heading Level=\"3\">Source Breakdown</Heading></CardHeader>\n                    <CardContent>\n                        @foreach (var src in _trafficSources) {\n                            <Flex Class=\"py-2.5 border-b last:border-0 hover:bg-muted/30\">\n                                <Lumeo.Text Class=\"flex-1 text-sm\">@src.Name</Lumeo.Text>\n                                <Lumeo.Text Class=\"text-sm font-medium\">@src.Sessions</Lumeo.Text>\n                            </Flex>\n                        }\n                    </CardContent>\n                </Card>\n            </Grid>\n        </TabsContent>\n\n        <!-- Pages Tab -->\n        <TabsContent Value=\"pages\">\n            <Card>\n                <CardHeader><Heading Level=\"3\">Top Pages</Heading></CardHeader>\n                <CardContent Class=\"px-0\">\n                    <Table>\n                        <TableHeader>\n                            <TableRow>\n                                <TableHead>Page</TableHead>\n                                <TableHead Class=\"text-right\">Views</TableHead>\n                                <TableHead Class=\"text-right\">Bounce</TableHead>\n                                <TableHead Class=\"text-right\">Avg. Time</TableHead>\n                            </TableRow>\n                        </TableHeader>\n                        <TableBody>\n                            @foreach (var page in _topPages) {\n                                <TableRow Class=\"hover:bg-muted/40\">\n                                    <TableCell Class=\"font-medium\">@page.Title</TableCell>\n                                    <TableCell Class=\"text-right\">@page.Views</TableCell>\n                                    <TableCell Class=\"text-right\"><Badge Variant=\"@page.BounceVariant\">@page.Bounce</Badge></TableCell>\n                                    <TableCell Class=\"text-right text-muted-foreground\">@page.AvgTime</TableCell>\n                                </TableRow>\n                            }\n                        </TableBody>\n                    </Table>\n                </CardContent>\n            </Card>\n        </TabsContent>\n\n        <!-- Devices Tab -->\n        <TabsContent Value=\"devices\">\n            <Grid Class=\"grid-cols-1 lg:grid-cols-2 gap-4\">\n                <Card>\n                    <CardHeader><Heading Level=\"3\">Device Type</Heading></CardHeader>\n                    <CardContent>\n                        @foreach (var d in _devices) {\n                            <Stack Gap=\"1.5\" Class=\"mb-3\">\n                                <Flex Class=\"items-center justify-between\">\n                                    <Lumeo.Text Class=\"text-sm font-medium\">@d.Name</Lumeo.Text>\n                                    <Lumeo.Text Class=\"text-sm\">@d.Sessions</Lumeo.Text>\n                                </Flex>\n                                <Progress Value=\"@d.Pct\" Class=\"h-1.5\" />\n                            </Stack>\n                        }\n                    </CardContent>\n                </Card>\n                <Card>\n                    <CardHeader><Heading Level=\"3\">Top Countries</Heading></CardHeader>\n                    <CardContent>\n                        @foreach (var c in _countries) {\n                            <Flex Class=\"py-2 border-b border-border/40 last:border-0 items-center gap-2\">\n                                <Lumeo.Text As=\"span\" Class=\"text-base\">@c.Flag</Lumeo.Text>\n                                <Lumeo.Text Class=\"flex-1 text-sm\">@c.Name</Lumeo.Text>\n                                <Lumeo.Text Class=\"text-sm font-medium\">@c.Sessions</Lumeo.Text>\n                            </Flex>\n                        }\n                    </CardContent>\n                </Card>\n            </Grid>\n        </TabsContent>\n\n    </Stack>\n\n</Tabs>"
+          "code": "<Tabs @bind-ActiveValue=\"_activeTab\" Orientation=\"Lumeo.Orientation.Vertical\" Class=\"gap-6\">\n\n    <TabsList Class=\"flex-col h-auto w-48 shrink-0 justify-start items-stretch gap-0.5 bg-muted/40 border border-border/40 p-2 rounded-[var(--radius-lg)]\">\n        <TabsTrigger Value=\"overview\" Class=\"justify-start text-sm h-8\">\n            <DynamicIcon Name=\"LayoutDashboard\" Class=\"h-3.5 w-3.5 mr-2\" />\n            Overview\n        </TabsTrigger>\n        <TabsTrigger Value=\"traffic\" Class=\"justify-start text-sm h-8\">\n            <DynamicIcon Name=\"Globe\" Class=\"h-3.5 w-3.5 mr-2\" />\n            Traffic Sources\n        </TabsTrigger>\n        <TabsTrigger Value=\"pages\" Class=\"justify-start text-sm h-8\">\n            <DynamicIcon Name=\"FileText\" Class=\"h-3.5 w-3.5 mr-2\" />\n            Top Pages\n        </TabsTrigger>\n        <TabsTrigger Value=\"devices\" Class=\"justify-start text-sm h-8\">\n            <DynamicIcon Name=\"Monitor\" Class=\"h-3.5 w-3.5 mr-2\" />\n            Devices\n        </TabsTrigger>\n    </TabsList>\n\n    <Stack Class=\"flex-1 min-w-0\" Gap=\"0\">\n\n        <!-- Overview Tab -->\n        <TabsContent Value=\"overview\">\n            <!-- KPI Row -->\n            <Grid Class=\"grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\n                @foreach (var kpi in _kpis) {\n                    <Card>\n                        <CardHeader><Lumeo.Text Class=\"text-xs text-muted-foreground\">@kpi.Label</Lumeo.Text></CardHeader>\n                        <CardContent>\n                            <Lumeo.Text Class=\"text-2xl font-bold\">@kpi.Value</Lumeo.Text>\n                            <Progress Value=\"@kpi.Percent\" Class=\"mt-3 h-1\" Variant=\"@kpi.Variant\" />\n                        </CardContent>\n                    </Card>\n                }\n            </Grid>\n            <!-- Line Chart -->\n            <Card>\n                <CardHeader><Heading Level=\"3\">Page Views</Heading></CardHeader>\n                <CardContent>\n                    <LineChart Categories=\"@_lineCategories\" Series=\"@_lineSeries\" Smooth=\"true\" ShowDots=\"true\" Height=\"240px\" />\n                </CardContent>\n            </Card>\n        </TabsContent>\n\n        <!-- Traffic Tab -->\n        <TabsContent Value=\"traffic\">\n            <Grid Class=\"grid-cols-1 lg:grid-cols-2 gap-4\">\n                <Card>\n                    <CardHeader><Heading Level=\"3\">Traffic by Source</Heading></CardHeader>\n                    <CardContent>\n                        <DonutChart Data=\"@_trafficDonut\" CenterLabel=\"148.4K\" InnerRadius=\"52%\" OuterRadius=\"72%\" Height=\"260px\" />\n                    </CardContent>\n                </Card>\n                <Card>\n                    <CardHeader><Heading Level=\"3\">Source Breakdown</Heading></CardHeader>\n                    <CardContent>\n                        @foreach (var src in _trafficSources) {\n                            <Flex Class=\"py-2.5 border-b last:border-0 hover:bg-muted/30\">\n                                <Lumeo.Text Class=\"flex-1 text-sm\">@src.Name</Lumeo.Text>\n                                <Lumeo.Text Class=\"text-sm font-medium\">@src.Sessions</Lumeo.Text>\n                            </Flex>\n                        }\n                    </CardContent>\n                </Card>\n            </Grid>\n        </TabsContent>\n\n        <!-- Pages Tab -->\n        <TabsContent Value=\"pages\">\n            <Card>\n                <CardHeader><Heading Level=\"3\">Top Pages</Heading></CardHeader>\n                <CardContent Class=\"px-0\">\n                    <Table>\n                        <TableHeader>\n                            <TableRow>\n                                <TableHead>Page</TableHead>\n                                <TableHead Class=\"text-right\">Views</TableHead>\n                                <TableHead Class=\"text-right\">Bounce</TableHead>\n                                <TableHead Class=\"text-right\">Avg. Time</TableHead>\n                            </TableRow>\n                        </TableHeader>\n                        <TableBody>\n                            @foreach (var page in _topPages) {\n                                <TableRow Class=\"hover:bg-muted/40\">\n                                    <TableCell Class=\"font-medium\">@page.Title</TableCell>\n                                    <TableCell Class=\"text-right\">@page.Views</TableCell>\n                                    <TableCell Class=\"text-right\"><Badge Variant=\"@page.BounceVariant\">@page.Bounce</Badge></TableCell>\n                                    <TableCell Class=\"text-right text-muted-foreground\">@page.AvgTime</TableCell>\n                                </TableRow>\n                            }\n                        </TableBody>\n                    </Table>\n                </CardContent>\n            </Card>\n        </TabsContent>\n\n        <!-- Devices Tab -->\n        <TabsContent Value=\"devices\">\n            <Grid Class=\"grid-cols-1 lg:grid-cols-2 gap-4\">\n                <Card>\n                    <CardHeader><Heading Level=\"3\">Device Type</Heading></CardHeader>\n                    <CardContent>\n                        @foreach (var d in _devices) {\n                            <Stack Gap=\"1.5\" Class=\"mb-3\">\n                                <Flex Class=\"items-center justify-between\">\n                                    <Lumeo.Text Class=\"text-sm font-medium\">@d.Name</Lumeo.Text>\n                                    <Lumeo.Text Class=\"text-sm\">@d.Sessions</Lumeo.Text>\n                                </Flex>\n                                <Progress Value=\"@d.Pct\" Class=\"h-1.5\" />\n                            </Stack>\n                        }\n                    </CardContent>\n                </Card>\n                <Card>\n                    <CardHeader><Heading Level=\"3\">Top Countries</Heading></CardHeader>\n                    <CardContent>\n                        @foreach (var c in _countries) {\n                            <Flex Class=\"py-2 border-b border-border/40 last:border-0 items-center gap-2\">\n                                <Lumeo.Text As=\"span\" Class=\"text-base\">@c.Flag</Lumeo.Text>\n                                <Lumeo.Text Class=\"flex-1 text-sm\">@c.Name</Lumeo.Text>\n                                <Lumeo.Text Class=\"text-sm font-medium\">@c.Sessions</Lumeo.Text>\n                            </Flex>\n                        }\n                    </CardContent>\n                </Card>\n            </Grid>\n        </TabsContent>\n\n    </Stack>\n\n</Tabs>"
         }
       ]
     },
@@ -292,7 +292,7 @@
       "examples": [
         {
           "title": "Chat Messaging Interface",
-          "code": "<!-- Chat layout: contact sidebar | message thread -->\n<Stack Class=\"w-full border border-border/40 rounded-xl overflow-hidden\" style=\"height: 600px;\">\n    <Flex Class=\"h-full\">\n\n        <!-- Contact Sidebar -->\n        <Flex Direction=\"col\" Class=\"w-72 border-r border-border/40 bg-card\">\n            <Flex Class=\"items-center justify-between px-4 pt-4 pb-3 border-b border-border/40\">\n                <Lumeo.Text As=\"span\" Class=\"text-base font-bold text-foreground\">Messages</Lumeo.Text>\n                <Flex Class=\"items-center gap-1\">\n                    <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Icon\" Class=\"h-8 w-8\">\n                        <DynamicIcon Name=\"Search\" Class=\"h-4 w-4\" />\n                    </Button>\n                    <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Icon\" Class=\"h-8 w-8\">\n                        <DynamicIcon Name=\"SquarePen\" Class=\"h-4 w-4\" />\n                    </Button>\n                </Flex>\n            </Flex>\n            <Stack Class=\"flex-1 overflow-y-auto\">\n                @foreach (var contact in _contacts)\n                {\n                    <button class=\"flex items-start gap-3 w-full px-3 py-2.5 hover:bg-muted/40 transition-colors\" @onclick=\"@(() => SelectContact(contact))\">\n                        <Stack Class=\"relative shrink-0\">\n                            <Avatar Size=\"Avatar.AvatarSize.Sm\">\n                                <AvatarFallback>@contact.Initials</AvatarFallback>\n                            </Avatar>\n                            @if (contact.IsOnline)\n                            {\n                                <Lumeo.Text As=\"span\" Class=\"absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full bg-primary border-2 border-card block\"></Lumeo.Text>\n                            }\n                        </Stack>\n                        <Stack Class=\"flex-1 min-w-0 gap-0.5\">\n                            <Flex Class=\"items-center justify-between\">\n                                <Lumeo.Text As=\"span\" Class=\"text-sm font-semibold text-foreground truncate\">@contact.Name</Lumeo.Text>\n                                <Lumeo.Text As=\"span\" Class=\"text-xs text-muted-foreground\">@contact.Timestamp</Lumeo.Text>\n                            </Flex>\n                            <Flex Class=\"items-center justify-between\">\n                                <Lumeo.Text Class=\"text-xs text-muted-foreground truncate\">@contact.LastMessage</Lumeo.Text>\n                                @if (contact.UnreadCount > 0) { <Badge Class=\"ml-1 shrink-0 h-4 min-w-4 text-[10px] px-1\">@contact.UnreadCount</Badge> }\n                            </Flex>\n                        </Stack>\n                    </button>\n                }\n            </Stack>\n        </Flex>\n\n        <!-- Chat Area -->\n        <Flex Direction=\"col\" Class=\"flex-1 overflow-hidden bg-background\">\n            <!-- Header -->\n            <Flex Class=\"items-center gap-3 px-4 py-3 border-b border-border/40 bg-card\">\n                <Stack Class=\"relative\">\n                    <Avatar Size=\"Avatar.AvatarSize.Sm\"><AvatarFallback>PK</AvatarFallback></Avatar>\n                    <Lumeo.Text As=\"span\" Class=\"absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full bg-primary border-2 border-card block\"></Lumeo.Text>\n                </Stack>\n                <Stack>\n                    <Lumeo.Text Class=\"text-sm font-semibold text-foreground\">Priya Kapoor</Lumeo.Text>\n                    <Lumeo.Text Class=\"text-xs text-primary\">Active now</Lumeo.Text>\n                </Stack>\n                <Flex Class=\"ml-auto items-center gap-1\">\n                    <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Icon\" Class=\"h-8 w-8\">\n                        <DynamicIcon Name=\"Phone\" Class=\"h-4 w-4\" />\n                    </Button>\n                    <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Icon\" Class=\"h-8 w-8\">\n                        <DynamicIcon Name=\"Video\" Class=\"h-4 w-4\" />\n                    </Button>\n                    <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Icon\" Class=\"h-8 w-8\">\n                        <DynamicIcon Name=\"Ellipsis\" Class=\"h-4 w-4\" />\n                    </Button>\n                </Flex>\n            </Flex>\n\n            <!-- Messages -->\n            <Stack Class=\"flex-1 overflow-y-auto px-4 py-4 gap-1\">\n                <!-- Time group separator -->\n                <Flex Class=\"items-center gap-3 my-3\">\n                    <Lumeo.Text As=\"span\" Class=\"flex-1 h-px bg-border/40 block\"></Lumeo.Text>\n                    <Lumeo.Text As=\"span\" Class=\"text-xs text-muted-foreground\">Today</Lumeo.Text>\n                    <Lumeo.Text As=\"span\" Class=\"flex-1 h-px bg-border/40 block\"></Lumeo.Text>\n                </Flex>\n                @foreach (var msg in _messages)\n                {\n                    <Flex Class=\"@(msg.IsSent ? \\\"items-end gap-2 justify-end\\\" : \\\"items-end gap-2 justify-start\\\")\">\n                        @if (!msg.IsSent)\n                        {\n                            <Avatar Size=\"Avatar.AvatarSize.Sm\" Class=\"shrink-0 mb-1\"><AvatarFallback>PK</AvatarFallback></Avatar>\n                        }\n                        <Stack Class=\"max-w-sm gap-1\">\n                            <Lumeo.Text As=\"div\" Class=\"@(msg.IsSent ? \\\"rounded-2xl rounded-br-sm px-3.5 py-2.5 text-sm bg-primary text-primary-foreground\\\" : \\\"rounded-2xl rounded-bl-sm px-3.5 py-2.5 text-sm bg-muted text-foreground\\\")\">@msg.Text</Lumeo.Text>\n                            <Lumeo.Text Class=\"text-xs text-muted-foreground px-1\">@msg.Time</Lumeo.Text>\n                        </Stack>\n                        @if (msg.IsSent)\n                        {\n                            <Avatar Size=\"Avatar.AvatarSize.Sm\" Class=\"shrink-0 mb-1\"><AvatarFallback>ME</AvatarFallback></Avatar>\n                        }\n                    </Flex>\n                }\n            </Stack>\n\n            <!-- Input -->\n            <Stack Class=\"border-t border-border/40 bg-card px-4 py-3 gap-2\">\n                <Flex Class=\"items-center gap-2 rounded-xl border border-border/40 bg-background px-3 py-2\">\n                    <Input placeholder=\"Type a message...\" @bind-Value=\"_newMessage\" Class=\"flex-1 border-0 shadow-none bg-transparent text-sm p-0 h-auto focus-visible:ring-0\" />\n                </Flex>\n                <Flex Class=\"items-center justify-between\">\n                    <Flex Class=\"items-center gap-1\">\n                        <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Icon\" Class=\"h-8 w-8\">\n                            <DynamicIcon Name=\"Paperclip\" Class=\"h-4 w-4\" />\n                        </Button>\n                        <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Icon\" Class=\"h-8 w-8\">\n                            <DynamicIcon Name=\"Smile\" Class=\"h-4 w-4\" />\n                        </Button>\n                        <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Icon\" Class=\"h-8 w-8\">\n                            <DynamicIcon Name=\"Mic\" Class=\"h-4 w-4\" />\n                        </Button>\n                    </Flex>\n                    <Button Size=\"Button.ButtonSize.Sm\" @onclick=\"SendMessage\">\n                        <DynamicIcon Name=\"Send\" Class=\"h-3.5 w-3.5 mr-1.5\" /> Send\n                    </Button>\n                </Flex>\n            </Stack>\n        </Flex>\n    </Flex>\n</Stack>\n\n@code {\n    private void SendMessage()\n    {\n        if (string.IsNullOrWhiteSpace(_newMessage)) return;\n        _messages.Add(new Message(_newMessage, true, DateTime.Now.ToString(\"h:mm tt\")));\n        _newMessage = string.Empty;\n    }\n}"
+          "code": "<!-- Chat layout: contact sidebar | message thread -->\n<Stack Class=\"w-full border border-border/40 rounded-xl overflow-hidden\" style=\"height: 600px;\">\n    <Flex Class=\"h-full\">\n\n        <!-- Contact Sidebar -->\n        <Flex Direction=\"col\" Class=\"w-72 border-r border-border/40 bg-card\">\n            <Flex Class=\"items-center justify-between px-4 pt-4 pb-3 border-b border-border/40\">\n                <Lumeo.Text As=\"span\" Class=\"text-base font-bold text-foreground\">Messages</Lumeo.Text>\n                <Flex Class=\"items-center gap-1\">\n                    <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Icon\" Class=\"h-8 w-8\">\n                        <DynamicIcon Name=\"Search\" Class=\"h-4 w-4\" />\n                    </Button>\n                    <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Icon\" Class=\"h-8 w-8\">\n                        <DynamicIcon Name=\"SquarePen\" Class=\"h-4 w-4\" />\n                    </Button>\n                </Flex>\n            </Flex>\n            <Stack Class=\"flex-1 overflow-y-auto\">\n                @foreach (var contact in _contacts)\n                {\n                    <button class=\"flex items-start gap-3 w-full px-3 py-2.5 hover:bg-muted/40 transition-colors\" @onclick=\"@(() => SelectContact(contact))\">\n                        <Stack Class=\"relative shrink-0\">\n                            <Avatar Size=\"Lumeo.Size.Sm\">\n                                <AvatarFallback>@contact.Initials</AvatarFallback>\n                            </Avatar>\n                            @if (contact.IsOnline)\n                            {\n                                <Lumeo.Text As=\"span\" Class=\"absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full bg-primary border-2 border-card block\"></Lumeo.Text>\n                            }\n                        </Stack>\n                        <Stack Class=\"flex-1 min-w-0 gap-0.5\">\n                            <Flex Class=\"items-center justify-between\">\n                                <Lumeo.Text As=\"span\" Class=\"text-sm font-semibold text-foreground truncate\">@contact.Name</Lumeo.Text>\n                                <Lumeo.Text As=\"span\" Class=\"text-xs text-muted-foreground\">@contact.Timestamp</Lumeo.Text>\n                            </Flex>\n                            <Flex Class=\"items-center justify-between\">\n                                <Lumeo.Text Class=\"text-xs text-muted-foreground truncate\">@contact.LastMessage</Lumeo.Text>\n                                @if (contact.UnreadCount > 0) { <Badge Class=\"ml-1 shrink-0 h-4 min-w-4 text-[10px] px-1\">@contact.UnreadCount</Badge> }\n                            </Flex>\n                        </Stack>\n                    </button>\n                }\n            </Stack>\n        </Flex>\n\n        <!-- Chat Area -->\n        <Flex Direction=\"col\" Class=\"flex-1 overflow-hidden bg-background\">\n            <!-- Header -->\n            <Flex Class=\"items-center gap-3 px-4 py-3 border-b border-border/40 bg-card\">\n                <Stack Class=\"relative\">\n                    <Avatar Size=\"Lumeo.Size.Sm\"><AvatarFallback>PK</AvatarFallback></Avatar>\n                    <Lumeo.Text As=\"span\" Class=\"absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full bg-primary border-2 border-card block\"></Lumeo.Text>\n                </Stack>\n                <Stack>\n                    <Lumeo.Text Class=\"text-sm font-semibold text-foreground\">Priya Kapoor</Lumeo.Text>\n                    <Lumeo.Text Class=\"text-xs text-primary\">Active now</Lumeo.Text>\n                </Stack>\n                <Flex Class=\"ml-auto items-center gap-1\">\n                    <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Icon\" Class=\"h-8 w-8\">\n                        <DynamicIcon Name=\"Phone\" Class=\"h-4 w-4\" />\n                    </Button>\n                    <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Icon\" Class=\"h-8 w-8\">\n                        <DynamicIcon Name=\"Video\" Class=\"h-4 w-4\" />\n                    </Button>\n                    <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Icon\" Class=\"h-8 w-8\">\n                        <DynamicIcon Name=\"Ellipsis\" Class=\"h-4 w-4\" />\n                    </Button>\n                </Flex>\n            </Flex>\n\n            <!-- Messages -->\n            <Stack Class=\"flex-1 overflow-y-auto px-4 py-4 gap-1\">\n                <!-- Time group separator -->\n                <Flex Class=\"items-center gap-3 my-3\">\n                    <Lumeo.Text As=\"span\" Class=\"flex-1 h-px bg-border/40 block\"></Lumeo.Text>\n                    <Lumeo.Text As=\"span\" Class=\"text-xs text-muted-foreground\">Today</Lumeo.Text>\n                    <Lumeo.Text As=\"span\" Class=\"flex-1 h-px bg-border/40 block\"></Lumeo.Text>\n                </Flex>\n                @foreach (var msg in _messages)\n                {\n                    <Flex Class=\"@(msg.IsSent ? \\\"items-end gap-2 justify-end\\\" : \\\"items-end gap-2 justify-start\\\")\">\n                        @if (!msg.IsSent)\n                        {\n                            <Avatar Size=\"Lumeo.Size.Sm\" Class=\"shrink-0 mb-1\"><AvatarFallback>PK</AvatarFallback></Avatar>\n                        }\n                        <Stack Class=\"max-w-sm gap-1\">\n                            <Lumeo.Text As=\"div\" Class=\"@(msg.IsSent ? \\\"rounded-2xl rounded-br-sm px-3.5 py-2.5 text-sm bg-primary text-primary-foreground\\\" : \\\"rounded-2xl rounded-bl-sm px-3.5 py-2.5 text-sm bg-muted text-foreground\\\")\">@msg.Text</Lumeo.Text>\n                            <Lumeo.Text Class=\"text-xs text-muted-foreground px-1\">@msg.Time</Lumeo.Text>\n                        </Stack>\n                        @if (msg.IsSent)\n                        {\n                            <Avatar Size=\"Lumeo.Size.Sm\" Class=\"shrink-0 mb-1\"><AvatarFallback>ME</AvatarFallback></Avatar>\n                        }\n                    </Flex>\n                }\n            </Stack>\n\n            <!-- Input -->\n            <Stack Class=\"border-t border-border/40 bg-card px-4 py-3 gap-2\">\n                <Flex Class=\"items-center gap-2 rounded-xl border border-border/40 bg-background px-3 py-2\">\n                    <Input placeholder=\"Type a message...\" @bind-Value=\"_newMessage\" Class=\"flex-1 border-0 shadow-none bg-transparent text-sm p-0 h-auto focus-visible:ring-0\" />\n                </Flex>\n                <Flex Class=\"items-center justify-between\">\n                    <Flex Class=\"items-center gap-1\">\n                        <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Icon\" Class=\"h-8 w-8\">\n                            <DynamicIcon Name=\"Paperclip\" Class=\"h-4 w-4\" />\n                        </Button>\n                        <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Icon\" Class=\"h-8 w-8\">\n                            <DynamicIcon Name=\"Smile\" Class=\"h-4 w-4\" />\n                        </Button>\n                        <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Icon\" Class=\"h-8 w-8\">\n                            <DynamicIcon Name=\"Mic\" Class=\"h-4 w-4\" />\n                        </Button>\n                    </Flex>\n                    <Button Size=\"Button.ButtonSize.Sm\" @onclick=\"SendMessage\">\n                        <DynamicIcon Name=\"Send\" Class=\"h-3.5 w-3.5 mr-1.5\" /> Send\n                    </Button>\n                </Flex>\n            </Stack>\n        </Flex>\n    </Flex>\n</Stack>\n\n@code {\n    private void SendMessage()\n    {\n        if (string.IsNullOrWhiteSpace(_newMessage)) return;\n        _messages.Add(new Message(_newMessage, true, DateTime.Now.ToString(\"h:mm tt\")));\n        _newMessage = string.Empty;\n    }\n}"
         }
       ]
     },
@@ -303,7 +303,7 @@
       "examples": [
         {
           "title": "Analytics Dashboard",
-          "code": "<!-- Top Bar -->\n<Flex Class=\"items-center justify-between gap-4 rounded-[var(--radius-lg)] bg-card px-4 py-3 shadow-sm\">\n    <Flex Class=\"items-center gap-3\">\n        <Flex Class=\"h-8 w-8 items-center justify-center rounded-md bg-primary\">\n            <DynamicIcon Name=\"BarChart3\" Class=\"h-4 w-4 text-primary-foreground\" />\n        </Flex>\n        <Lumeo.Text As=\"span\" Class=\"text-sm font-semibold text-foreground\">Nexara</Lumeo.Text>\n    </Flex>\n    <Flex Class=\"flex-1 max-w-sm items-center gap-2 rounded-md border border-border/40 bg-background px-3 h-9\">\n        <DynamicIcon Name=\"Search\" Class=\"h-3.5 w-3.5 text-muted-foreground\" />\n        <Input Placeholder=\"Search...\" Class=\"h-8 flex-1 bg-transparent border-0 shadow-none\" />\n    </Flex>\n    <Flex Class=\"items-center gap-1.5\">\n        <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Icon\" Class=\"h-8 w-8\">\n            <DynamicIcon Name=\"Bell\" Class=\"h-4 w-4\" />\n        </Button>\n        <Avatar Size=\"Avatar.AvatarSize.Sm\">\n            <AvatarFallback>PK</AvatarFallback>\n        </Avatar>\n        <DynamicIcon Name=\"ChevronDown\" Class=\"h-3.5 w-3.5 text-muted-foreground\" />\n    </Flex>\n</Flex>\n\n<!-- Stats Row -->\n<Grid Class=\"grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\n    @foreach (var stat in _stats)\n    {\n        <Card Class=\"rounded-[var(--radius-lg)] border-border/40\">\n            <CardHeader Class=\"pb-2\">\n                <Flex Class=\"items-center justify-between\">\n                    <Lumeo.Text Class=\"text-xs font-medium text-muted-foreground uppercase tracking-wider\">@stat.Label</Lumeo.Text>\n                    <DynamicIcon Name=\"@stat.IconName\" Class=\"h-3.5 w-3.5 text-muted-foreground\" />\n                </Flex>\n            </CardHeader>\n            <CardContent Class=\"pt-0\">\n                <Lumeo.Text Class=\"text-2xl font-bold text-foreground\">@stat.Value</Lumeo.Text>\n                <Flex Class=\"mt-1.5 items-center gap-1.5\">\n                    <DynamicIcon Name=\"@(stat.IsPositive ? \"TrendingUp\" : \"TrendingDown\")\" Class=\"h-3.5 w-3.5\" />\n                    <Lumeo.Text As=\"span\" Class=\"text-xs font-semibold\">@stat.Trend</Lumeo.Text>\n                    <Lumeo.Text As=\"span\" Class=\"text-xs text-muted-foreground\">vs last month</Lumeo.Text>\n                </Flex>\n                <Progress Value=\"@stat.ProgressValue\" Class=\"mt-3 h-1\" Variant=\"@stat.ProgressVariant\" />\n            </CardContent>\n        </Card>\n    }\n</Grid>\n\n<!-- Revenue Chart + Activity -->\n<Grid Class=\"grid-cols-1 lg:grid-cols-7 gap-4\">\n    <Card Class=\"lg:col-span-5\">\n        <CardHeader>\n            <Heading Level=\"3\">Revenue Overview</Heading>\n            <Lumeo.Text Class=\"text-sm text-muted-foreground\">12-month revenue vs. expenses</Lumeo.Text>\n        </CardHeader>\n        <CardContent>\n            <AreaChart Categories=\"@_areaCategories\" Series=\"@_areaSeries\" Smooth=\"true\" Gradient=\"true\" Height=\"340px\" />\n        </CardContent>\n    </Card>\n    <Card Class=\"lg:col-span-2\">\n        <CardHeader>\n            <Heading Level=\"3\">Activity</Heading>\n        </CardHeader>\n        <CardContent>\n            @foreach (var a in _activities)\n            {\n                <Flex Class=\"gap-2.5 py-2.5 border-b border-border/40 last:border-0 items-start hover:bg-muted/30 transition-colors\">\n                    <Avatar Class=\"h-7 w-7 shrink-0\"><AvatarFallback Class=\"text-[9px]\">@a.Initials</AvatarFallback></Avatar>\n                    <Stack Gap=\"0\">\n                        <Lumeo.Text Class=\"text-xs\">@a.Text</Lumeo.Text>\n                        <Lumeo.Text Class=\"text-[10px] text-muted-foreground\">@a.Time</Lumeo.Text>\n                    </Stack>\n                </Flex>\n            }\n        </CardContent>\n    </Card>\n</Grid>"
+          "code": "<!-- Top Bar -->\n<Flex Class=\"items-center justify-between gap-4 rounded-[var(--radius-lg)] bg-card px-4 py-3 shadow-sm\">\n    <Flex Class=\"items-center gap-3\">\n        <Flex Class=\"h-8 w-8 items-center justify-center rounded-md bg-primary\">\n            <DynamicIcon Name=\"BarChart3\" Class=\"h-4 w-4 text-primary-foreground\" />\n        </Flex>\n        <Lumeo.Text As=\"span\" Class=\"text-sm font-semibold text-foreground\">Nexara</Lumeo.Text>\n    </Flex>\n    <Flex Class=\"flex-1 max-w-sm items-center gap-2 rounded-md border border-border/40 bg-background px-3 h-9\">\n        <DynamicIcon Name=\"Search\" Class=\"h-3.5 w-3.5 text-muted-foreground\" />\n        <Input Placeholder=\"Search...\" Class=\"h-8 flex-1 bg-transparent border-0 shadow-none\" />\n    </Flex>\n    <Flex Class=\"items-center gap-1.5\">\n        <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Icon\" Class=\"h-8 w-8\">\n            <DynamicIcon Name=\"Bell\" Class=\"h-4 w-4\" />\n        </Button>\n        <Avatar Size=\"Lumeo.Size.Sm\">\n            <AvatarFallback>PK</AvatarFallback>\n        </Avatar>\n        <DynamicIcon Name=\"ChevronDown\" Class=\"h-3.5 w-3.5 text-muted-foreground\" />\n    </Flex>\n</Flex>\n\n<!-- Stats Row -->\n<Grid Class=\"grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\n    @foreach (var stat in _stats)\n    {\n        <Card Class=\"rounded-[var(--radius-lg)] border-border/40\">\n            <CardHeader Class=\"pb-2\">\n                <Flex Class=\"items-center justify-between\">\n                    <Lumeo.Text Class=\"text-xs font-medium text-muted-foreground uppercase tracking-wider\">@stat.Label</Lumeo.Text>\n                    <DynamicIcon Name=\"@stat.IconName\" Class=\"h-3.5 w-3.5 text-muted-foreground\" />\n                </Flex>\n            </CardHeader>\n            <CardContent Class=\"pt-0\">\n                <Lumeo.Text Class=\"text-2xl font-bold text-foreground\">@stat.Value</Lumeo.Text>\n                <Flex Class=\"mt-1.5 items-center gap-1.5\">\n                    <DynamicIcon Name=\"@(stat.IsPositive ? \"TrendingUp\" : \"TrendingDown\")\" Class=\"h-3.5 w-3.5\" />\n                    <Lumeo.Text As=\"span\" Class=\"text-xs font-semibold\">@stat.Trend</Lumeo.Text>\n                    <Lumeo.Text As=\"span\" Class=\"text-xs text-muted-foreground\">vs last month</Lumeo.Text>\n                </Flex>\n                <Progress Value=\"@stat.ProgressValue\" Class=\"mt-3 h-1\" Variant=\"@stat.ProgressVariant\" />\n            </CardContent>\n        </Card>\n    }\n</Grid>\n\n<!-- Revenue Chart + Activity -->\n<Grid Class=\"grid-cols-1 lg:grid-cols-7 gap-4\">\n    <Card Class=\"lg:col-span-5\">\n        <CardHeader>\n            <Heading Level=\"3\">Revenue Overview</Heading>\n            <Lumeo.Text Class=\"text-sm text-muted-foreground\">12-month revenue vs. expenses</Lumeo.Text>\n        </CardHeader>\n        <CardContent>\n            <AreaChart Categories=\"@_areaCategories\" Series=\"@_areaSeries\" Smooth=\"true\" Gradient=\"true\" Height=\"340px\" />\n        </CardContent>\n    </Card>\n    <Card Class=\"lg:col-span-2\">\n        <CardHeader>\n            <Heading Level=\"3\">Activity</Heading>\n        </CardHeader>\n        <CardContent>\n            @foreach (var a in _activities)\n            {\n                <Flex Class=\"gap-2.5 py-2.5 border-b border-border/40 last:border-0 items-start hover:bg-muted/30 transition-colors\">\n                    <Avatar Class=\"h-7 w-7 shrink-0\"><AvatarFallback Class=\"text-[9px]\">@a.Initials</AvatarFallback></Avatar>\n                    <Stack Gap=\"0\">\n                        <Lumeo.Text Class=\"text-xs\">@a.Text</Lumeo.Text>\n                        <Lumeo.Text Class=\"text-[10px] text-muted-foreground\">@a.Time</Lumeo.Text>\n                    </Stack>\n                </Flex>\n            }\n        </CardContent>\n    </Card>\n</Grid>"
         }
       ]
     },
@@ -408,7 +408,7 @@
       "examples": [
         {
           "title": "Social Media Timeline",
-          "code": "<!-- Three-column social feed layout -->\n<Flex Class=\"w-full gap-0\">\n\n  <!-- Left Rail -->\n  <Flex Direction=\"col\" Class=\"w-56 shrink-0 pr-4 border-r border-border/40\">\n    <Flex Class=\"items-center gap-3 px-2 py-3\">\n      <Avatar><AvatarFallback>ME</AvatarFallback></Avatar>\n      <Lumeo.Text Class=\"text-sm font-semibold\">You</Lumeo.Text>\n    </Flex>\n    <Separator />\n    @foreach (var nav in _navItems)\n    {\n      <button class=\"flex items-center gap-3 w-full rounded-lg px-3 py-2 text-sm font-medium transition-colors\n                      @(nav.IsActive ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:bg-accent')\">\n        <DynamicIcon Name=\"@nav.Icon\" Class=\"h-4 w-4\" />\n        @nav.Label\n        @if (nav.Badge > 0) { <Badge Class=\"ml-auto\">@nav.Badge</Badge> }\n      </button>\n    }\n    <Button Class=\"w-full mt-2\" Size=\"Button.ButtonSize.Sm\">\n      <DynamicIcon Name=\"PenLine\" Class=\"h-4 w-4 mr-2\" /> New Post\n    </Button>\n  </Flex>\n\n  <!-- Center Feed -->\n  <Stack Class=\"flex-1 px-6 min-w-0\">\n    <!-- Compose card -->\n    <Card Class=\"mb-4 border-border/40\">\n      <CardContent Class=\"pt-4\">\n        <Flex Gap=\"3\">\n          <Avatar><AvatarFallback>ME</AvatarFallback></Avatar>\n          <Stack Class=\"flex-1 gap-3\">\n            <Textarea AutoResize=\"true\" placeholder=\"What's on your mind?\" />\n            <Button IsLoading=\"@_isPosting\" OnClick=\"HandlePost\">\n              <DynamicIcon Name=\"Send\" Class=\"h-4 w-4 mr-1.5\" /> Post\n            </Button>\n          </Stack>\n        </Flex>\n      </CardContent>\n    </Card>\n\n    <!-- Post cards with like/comment/share/bookmark -->\n    @foreach (var post in _posts) { /* ... */ }\n  </Stack>\n\n  <!-- Right Rail -->\n  <Stack Class=\"w-64 shrink-0 pl-4 border-l border-border/40 gap-4\">\n    <Input placeholder=\"Search...\" Class=\"pl-9\" />\n\n    <!-- Trending topics -->\n    <Card Class=\"border-border/40\">\n      <CardHeader><Heading Level=\"4\">Trending</Heading></CardHeader>\n      <CardContent>\n        @foreach (var t in _trending) { /* tag + post count */ }\n      </CardContent>\n    </Card>\n\n    <!-- Who to follow -->\n    <Card Class=\"border-border/40\">\n      <CardHeader><Heading Level=\"4\">Who to Follow</Heading></CardHeader>\n      <CardContent>\n        @foreach (var s in _suggestions)\n        {\n          <Flex Class=\"items-center gap-3 py-2.5\">\n            <Avatar Size=\"Avatar.AvatarSize.Sm\"><AvatarFallback>@s.Initials</AvatarFallback></Avatar>\n            <Stack Class=\"flex-1 min-w-0\">\n              <Lumeo.Text Class=\"text-sm font-medium\">@s.Name</Lumeo.Text>\n              <Lumeo.Text Class=\"text-xs text-muted-foreground\">@s.Followers followers</Lumeo.Text>\n            </Stack>\n            <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\">Follow</Button>\n          </Flex>\n        }\n      </CardContent>\n    </Card>\n  </Stack>\n\n</Flex>"
+          "code": "<!-- Three-column social feed layout -->\n<Flex Class=\"w-full gap-0\">\n\n  <!-- Left Rail -->\n  <Flex Direction=\"col\" Class=\"w-56 shrink-0 pr-4 border-r border-border/40\">\n    <Flex Class=\"items-center gap-3 px-2 py-3\">\n      <Avatar><AvatarFallback>ME</AvatarFallback></Avatar>\n      <Lumeo.Text Class=\"text-sm font-semibold\">You</Lumeo.Text>\n    </Flex>\n    <Separator />\n    @foreach (var nav in _navItems)\n    {\n      <button class=\"flex items-center gap-3 w-full rounded-lg px-3 py-2 text-sm font-medium transition-colors\n                      @(nav.IsActive ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:bg-accent')\">\n        <DynamicIcon Name=\"@nav.Icon\" Class=\"h-4 w-4\" />\n        @nav.Label\n        @if (nav.Badge > 0) { <Badge Class=\"ml-auto\">@nav.Badge</Badge> }\n      </button>\n    }\n    <Button Class=\"w-full mt-2\" Size=\"Button.ButtonSize.Sm\">\n      <DynamicIcon Name=\"PenLine\" Class=\"h-4 w-4 mr-2\" /> New Post\n    </Button>\n  </Flex>\n\n  <!-- Center Feed -->\n  <Stack Class=\"flex-1 px-6 min-w-0\">\n    <!-- Compose card -->\n    <Card Class=\"mb-4 border-border/40\">\n      <CardContent Class=\"pt-4\">\n        <Flex Gap=\"3\">\n          <Avatar><AvatarFallback>ME</AvatarFallback></Avatar>\n          <Stack Class=\"flex-1 gap-3\">\n            <Textarea AutoResize=\"true\" placeholder=\"What's on your mind?\" />\n            <Button IsLoading=\"@_isPosting\" OnClick=\"HandlePost\">\n              <DynamicIcon Name=\"Send\" Class=\"h-4 w-4 mr-1.5\" /> Post\n            </Button>\n          </Stack>\n        </Flex>\n      </CardContent>\n    </Card>\n\n    <!-- Post cards with like/comment/share/bookmark -->\n    @foreach (var post in _posts) { /* ... */ }\n  </Stack>\n\n  <!-- Right Rail -->\n  <Stack Class=\"w-64 shrink-0 pl-4 border-l border-border/40 gap-4\">\n    <Input placeholder=\"Search...\" Class=\"pl-9\" />\n\n    <!-- Trending topics -->\n    <Card Class=\"border-border/40\">\n      <CardHeader><Heading Level=\"4\">Trending</Heading></CardHeader>\n      <CardContent>\n        @foreach (var t in _trending) { /* tag + post count */ }\n      </CardContent>\n    </Card>\n\n    <!-- Who to follow -->\n    <Card Class=\"border-border/40\">\n      <CardHeader><Heading Level=\"4\">Who to Follow</Heading></CardHeader>\n      <CardContent>\n        @foreach (var s in _suggestions)\n        {\n          <Flex Class=\"items-center gap-3 py-2.5\">\n            <Avatar Size=\"Lumeo.Size.Sm\"><AvatarFallback>@s.Initials</AvatarFallback></Avatar>\n            <Stack Class=\"flex-1 min-w-0\">\n              <Lumeo.Text Class=\"text-sm font-medium\">@s.Name</Lumeo.Text>\n              <Lumeo.Text Class=\"text-xs text-muted-foreground\">@s.Followers followers</Lumeo.Text>\n            </Stack>\n            <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\">Follow</Button>\n          </Flex>\n        }\n      </CardContent>\n    </Card>\n  </Stack>\n\n</Flex>"
         }
       ]
     },
@@ -419,7 +419,7 @@
       "examples": [
         {
           "title": "Task Tracker",
-          "code": "<!-- Task Tracker — Lumeo pattern -->\n<div class=\"flex flex-col rounded-[var(--radius-lg)] border border-border/40 overflow-hidden\" style=\"min-height:640px;\">\n\n  <!-- Top bar: breadcrumb, view tabs, search, filter, new issue -->\n  <div class=\"flex items-center gap-3 px-4 py-3 border-b border-border/40\">\n    <Lumeo.Text Class=\"font-semibold text-foreground\">Lumeo</Lumeo.Text>\n    <DynamicIcon Name=\"ChevronRight\" Class=\"h-3.5 w-3.5 text-muted-foreground\" />\n    <Lumeo.Text Class=\"text-muted-foreground\">Q2 Sprint</Lumeo.Text>\n\n    <Tabs ActiveValue=\"@_activeView\" ActiveValueChanged=\"@(v => _activeView = v)\" Class=\"flex-1\">\n      <TabsList Class=\"h-8\">\n        <TabsTrigger Value=\"all\">All</TabsTrigger>\n        <TabsTrigger Value=\"mine\">My Issues</TabsTrigger>\n        <TabsTrigger Value=\"active\">Active</TabsTrigger>\n        <TabsTrigger Value=\"backlog\">Backlog</TabsTrigger>\n        <TabsTrigger Value=\"done\">Done</TabsTrigger>\n      </TabsList>\n    </Tabs>\n\n    <Input placeholder=\"Search issues…\" Class=\"h-8 w-44\" />\n    <Button Size=\"Button.ButtonSize.Sm\" Class=\"h-8\"><DynamicIcon Name=\"Plus\" Class=\"h-4 w-4\" /> New issue</Button>\n  </div>\n\n  <!-- Body: nav rail + task list -->\n  <div class=\"flex flex-1 overflow-hidden\">\n\n    <!-- Left nav rail w-56 -->\n    <div class=\"w-56 shrink-0 border-r border-border/40 bg-muted/10 flex flex-col p-2 gap-0.5\">\n      @foreach (var n in _navRail) {\n        <button class=\"flex items-center gap-2.5 rounded-md px-2.5 py-2 text-sm text-muted-foreground hover:bg-accent/40\">\n          <DynamicIcon Name=\"@n.Icon\" Class=\"h-4 w-4 shrink-0\" /> @n.Label\n          @if (n.Count > 0) { <span class=\"ml-auto text-xs\">@n.Count</span> }\n        </button>\n      }\n    </div>\n\n    <!-- Task list, grouped by Status -->\n    <div class=\"flex-1 overflow-auto\">\n      @foreach (var group in VisibleTasks.GroupBy(t => t.Status).OrderBy(g => StatusOrder(g.Key))) {\n        <!-- Group header with collapse toggle -->\n        <div class=\"flex items-center gap-2.5 px-4 py-2.5 border-b bg-muted/20 sticky top-0\">\n          <DynamicIcon Name=\"ChevronDown\" Class=\"h-3.5 w-3.5 text-muted-foreground\" />\n          <DynamicIcon Name=\"@StatusIcon(group.Key)\" Class=\"h-4 w-4\" />\n          <Lumeo.Text Class=\"text-sm font-semibold\">@group.Key</Lumeo.Text>\n          <Badge Variant=\"Badge.BadgeVariant.Secondary\">@group.Count()</Badge>\n        </div>\n        <!-- Task rows -->\n        @foreach (var t in group) {\n          <div class=\"group flex items-center gap-3 px-4 py-2.5 border-b hover:bg-accent/30 transition-colors cursor-pointer\">\n            <Checkbox Class=\"opacity-0 group-hover:opacity-100\" />\n            <DynamicIcon Name=\"@PriorityIcon(t.Priority)\" Class=\"@PriorityColor(t.Priority)\" />\n            <Lumeo.Text Class=\"text-xs text-muted-foreground font-mono w-16\">@t.Id</Lumeo.Text>\n            <Lumeo.Text Class=\"flex-1 text-sm font-medium truncate\">@t.Title</Lumeo.Text>\n            @foreach (var label in t.Labels.Take(3)) { <Badge Variant=\"Badge.BadgeVariant.Secondary\">@label</Badge> }\n            <Avatar Size=\"Avatar.AvatarSize.Sm\"><AvatarFallback>@t.AssigneeInitials</AvatarFallback></Avatar>\n            <Lumeo.Text Class=\"text-xs text-muted-foreground\">@t.DueDate.ToString(\"MMM d\")</Lumeo.Text>\n          </div>\n        }\n      }\n    </div>\n  </div>\n\n  <!-- Bulk action bar (shown when _selectedTasks.Count > 0) -->\n  @if (_selectedTasks.Count > 0) {\n    <div class=\"flex items-center gap-3 px-4 py-3 border-t border-border/40 bg-accent/20\">\n      <Lumeo.Text Class=\"text-sm font-medium\">@_selectedTasks.Count selected</Lumeo.Text>\n      <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\" @onclick=\"@(() => _selectedTasks.Clear())\">Deselect</Button>\n      <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\">Assign to</Button>\n      <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\">Set priority</Button>\n      <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\" Class=\"text-destructive ml-auto\">Delete</Button>\n    </div>\n  }\n</div>"
+          "code": "<!-- Task Tracker — Lumeo pattern -->\n<div class=\"flex flex-col rounded-[var(--radius-lg)] border border-border/40 overflow-hidden\" style=\"min-height:640px;\">\n\n  <!-- Top bar: breadcrumb, view tabs, search, filter, new issue -->\n  <div class=\"flex items-center gap-3 px-4 py-3 border-b border-border/40\">\n    <Lumeo.Text Class=\"font-semibold text-foreground\">Lumeo</Lumeo.Text>\n    <DynamicIcon Name=\"ChevronRight\" Class=\"h-3.5 w-3.5 text-muted-foreground\" />\n    <Lumeo.Text Class=\"text-muted-foreground\">Q2 Sprint</Lumeo.Text>\n\n    <Tabs ActiveValue=\"@_activeView\" ActiveValueChanged=\"@(v => _activeView = v)\" Class=\"flex-1\">\n      <TabsList Class=\"h-8\">\n        <TabsTrigger Value=\"all\">All</TabsTrigger>\n        <TabsTrigger Value=\"mine\">My Issues</TabsTrigger>\n        <TabsTrigger Value=\"active\">Active</TabsTrigger>\n        <TabsTrigger Value=\"backlog\">Backlog</TabsTrigger>\n        <TabsTrigger Value=\"done\">Done</TabsTrigger>\n      </TabsList>\n    </Tabs>\n\n    <Input placeholder=\"Search issues…\" Class=\"h-8 w-44\" />\n    <Button Size=\"Button.ButtonSize.Sm\" Class=\"h-8\"><DynamicIcon Name=\"Plus\" Class=\"h-4 w-4\" /> New issue</Button>\n  </div>\n\n  <!-- Body: nav rail + task list -->\n  <div class=\"flex flex-1 overflow-hidden\">\n\n    <!-- Left nav rail w-56 -->\n    <div class=\"w-56 shrink-0 border-r border-border/40 bg-muted/10 flex flex-col p-2 gap-0.5\">\n      @foreach (var n in _navRail) {\n        <button class=\"flex items-center gap-2.5 rounded-md px-2.5 py-2 text-sm text-muted-foreground hover:bg-accent/40\">\n          <DynamicIcon Name=\"@n.Icon\" Class=\"h-4 w-4 shrink-0\" /> @n.Label\n          @if (n.Count > 0) { <span class=\"ml-auto text-xs\">@n.Count</span> }\n        </button>\n      }\n    </div>\n\n    <!-- Task list, grouped by Status -->\n    <div class=\"flex-1 overflow-auto\">\n      @foreach (var group in VisibleTasks.GroupBy(t => t.Status).OrderBy(g => StatusOrder(g.Key))) {\n        <!-- Group header with collapse toggle -->\n        <div class=\"flex items-center gap-2.5 px-4 py-2.5 border-b bg-muted/20 sticky top-0\">\n          <DynamicIcon Name=\"ChevronDown\" Class=\"h-3.5 w-3.5 text-muted-foreground\" />\n          <DynamicIcon Name=\"@StatusIcon(group.Key)\" Class=\"h-4 w-4\" />\n          <Lumeo.Text Class=\"text-sm font-semibold\">@group.Key</Lumeo.Text>\n          <Badge Variant=\"Badge.BadgeVariant.Secondary\">@group.Count()</Badge>\n        </div>\n        <!-- Task rows -->\n        @foreach (var t in group) {\n          <div class=\"group flex items-center gap-3 px-4 py-2.5 border-b hover:bg-accent/30 transition-colors cursor-pointer\">\n            <Checkbox Class=\"opacity-0 group-hover:opacity-100\" />\n            <DynamicIcon Name=\"@PriorityIcon(t.Priority)\" Class=\"@PriorityColor(t.Priority)\" />\n            <Lumeo.Text Class=\"text-xs text-muted-foreground font-mono w-16\">@t.Id</Lumeo.Text>\n            <Lumeo.Text Class=\"flex-1 text-sm font-medium truncate\">@t.Title</Lumeo.Text>\n            @foreach (var label in t.Labels.Take(3)) { <Badge Variant=\"Badge.BadgeVariant.Secondary\">@label</Badge> }\n            <Avatar Size=\"Lumeo.Size.Sm\"><AvatarFallback>@t.AssigneeInitials</AvatarFallback></Avatar>\n            <Lumeo.Text Class=\"text-xs text-muted-foreground\">@t.DueDate.ToString(\"MMM d\")</Lumeo.Text>\n          </div>\n        }\n      }\n    </div>\n  </div>\n\n  <!-- Bulk action bar (shown when _selectedTasks.Count > 0) -->\n  @if (_selectedTasks.Count > 0) {\n    <div class=\"flex items-center gap-3 px-4 py-3 border-t border-border/40 bg-accent/20\">\n      <Lumeo.Text Class=\"text-sm font-medium\">@_selectedTasks.Count selected</Lumeo.Text>\n      <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\" @onclick=\"@(() => _selectedTasks.Clear())\">Deselect</Button>\n      <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\">Assign to</Button>\n      <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\">Set priority</Button>\n      <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\" Class=\"text-destructive ml-auto\">Delete</Button>\n    </div>\n  }\n</div>"
         }
       ]
     }
@@ -561,7 +561,7 @@
               "name": "ForceMount",
               "type": "bool",
               "default": null,
-              "description": "When true, this panel is always rendered into the DOM (with the hidden attribute when closed) instead of being unmounted. Use when child state (form inputs, scroll position, expensive component init) must survive closing the accordion item. Default false preserves the original unmount behaviour.",
+              "description": "Preserved for API compatibility only — Accordion content is now always mounted to allow the grid-rows close animation to run on collapse, so this flag is effectively a no-op. Children always live in the DOM whether the panel is open or closed.",
               "isCascading": false,
               "captureUnmatched": false
             },
@@ -992,8 +992,8 @@
         },
         {
           "name": "Size",
-          "type": "AlertSize",
-          "default": "AlertSize.Medium",
+          "type": "Lumeo.Size",
+          "default": "Lumeo.Size.Md",
           "description": null,
           "isCascading": false,
           "captureUnmatched": false
@@ -1089,15 +1089,6 @@
             "Info"
           ],
           "description": null
-        },
-        {
-          "name": "AlertSize",
-          "values": [
-            "Small",
-            "Medium",
-            "Large"
-          ],
-          "description": null
         }
       ],
       "records": [],
@@ -1177,6 +1168,14 @@
           "isCascading": false,
           "captureUnmatched": false
         },
+        {
+          "name": "OnBeforeClose",
+          "type": "EventCallback<DismissEventArgs>",
+          "default": null,
+          "description": "Fires before any user-initiated dismiss (Escape key, the Cancel button, or the Action button). Set Cancel to true to abort. The Reason tells you which path fired (\"escape\", \"cancel\", \"action\").",
+          "isCascading": false,
+          "captureUnmatched": false
+        },
         {
           "name": "IsOpen",
           "type": "bool",
@@ -1200,6 +1199,11 @@
           "type": "EventCallback<bool>",
           "description": null
         },
+        {
+          "name": "OnBeforeClose",
+          "type": "EventCallback<DismissEventArgs>",
+          "description": "Fires before any user-initiated dismiss (Escape key, the Cancel button, or the Action button). Set Cancel to true to abort. The Reason tells you which path fired (\"escape\", \"cancel\", \"action\")."
+        },
         {
           "name": "IsOpenChanged",
           "type": "EventCallback<bool>",
@@ -1210,7 +1214,7 @@
       "records": [
         {
           "name": "AlertDialogContext",
-          "signature": "AlertDialogContext(bool IsOpen, EventCallback<bool> SetOpen, string TitleId, string DescriptionId)",
+          "signature": "AlertDialogContext(bool IsOpen, EventCallback<bool> SetOpen, string TitleId, string DescriptionId, Func<string, Task<bool>> TryDismiss)",
           "description": null
         }
       ],
@@ -1391,6 +1395,14 @@
               "isCascading": false,
               "captureUnmatched": false
             },
+            {
+              "name": "ZIndex",
+              "type": "int",
+              "default": "OverlayService.BaseZIndex",
+              "description": "Backdrop z-index. Content sits at ZIndex + 1. Defaults to BaseZIndex; OverlayProvider supplies an incrementing value per nested overlay.",
+              "isCascading": false,
+              "captureUnmatched": false
+            },
             {
               "name": "AdditionalAttributes",
               "type": "Dictionary<string, object>?",
@@ -1987,9 +1999,9 @@
         },
         {
           "name": "Size",
-          "type": "AvatarSize",
-          "default": "AvatarSize.Default",
-          "description": null,
+          "type": "Lumeo.Size",
+          "default": "Lumeo.Size.Md",
+          "description": "Avatar size. Supported values: Sm, Md (default), Lg, Xl. Other values fall through to Md.",
           "isCascading": false,
           "captureUnmatched": false
         },
@@ -2028,15 +2040,6 @@
       ],
       "events": [],
       "enums": [
-        {
-          "name": "AvatarSize",
-          "values": [
-            "Sm",
-            "Default",
-            "Lg"
-          ],
-          "description": null
-        },
         {
           "name": "AvatarShape",
           "values": [
@@ -2075,7 +2078,7 @@
         },
         {
           "title": "Sizes",
-          "code": "<Avatar Size=\"Avatar.AvatarSize.Sm\">\n    <AvatarImage Src=\"...\" Alt=\"Small\" />\n    <AvatarFallback>SM</AvatarFallback>\n</Avatar>\n<Avatar Size=\"Avatar.AvatarSize.Lg\">\n    <AvatarImage Src=\"...\" Alt=\"Large\" />\n    <AvatarFallback>LG</AvatarFallback>\n</Avatar>"
+          "code": "<Avatar Size=\"Lumeo.Size.Sm\">\n    <AvatarImage Src=\"...\" Alt=\"Small\" />\n    <AvatarFallback>SM</AvatarFallback>\n</Avatar>\n<Avatar Size=\"Lumeo.Size.Lg\">\n    <AvatarImage Src=\"...\" Alt=\"Large\" />\n    <AvatarFallback>LG</AvatarFallback>\n</Avatar>"
         },
         {
           "title": "Group",
@@ -3066,15 +3069,15 @@
       "examples": [
         {
           "title": "Basic",
-          "code": "<BottomNav>\n    <BottomNavItem Href=\"/\" Label=\"Home\">\n        <IconContent><Icon Name=\"House\" Size=\"Icon.IconSize.Sm\" /></IconContent>\n    </BottomNavItem>\n    <BottomNavItem Href=\"/search\" Label=\"Search\">\n        <IconContent><Icon Name=\"Search\" Size=\"Icon.IconSize.Sm\" /></IconContent>\n    </BottomNavItem>\n    <BottomNavItem Href=\"/inbox\" Label=\"Inbox\">\n        <IconContent><Icon Name=\"Inbox\" Size=\"Icon.IconSize.Sm\" /></IconContent>\n    </BottomNavItem>\n    <BottomNavItem Href=\"/profile\" Label=\"Profile\">\n        <IconContent><Icon Name=\"User\" Size=\"Icon.IconSize.Sm\" /></IconContent>\n    </BottomNavItem>\n</BottomNav>"
+          "code": "<BottomNav>\n    <BottomNavItem Href=\"/\" Label=\"Home\">\n        <IconContent><Icon Name=\"House\" Size=\"Lumeo.Size.Sm\" /></IconContent>\n    </BottomNavItem>\n    <BottomNavItem Href=\"/search\" Label=\"Search\">\n        <IconContent><Icon Name=\"Search\" Size=\"Lumeo.Size.Sm\" /></IconContent>\n    </BottomNavItem>\n    <BottomNavItem Href=\"/inbox\" Label=\"Inbox\">\n        <IconContent><Icon Name=\"Inbox\" Size=\"Lumeo.Size.Sm\" /></IconContent>\n    </BottomNavItem>\n    <BottomNavItem Href=\"/profile\" Label=\"Profile\">\n        <IconContent><Icon Name=\"User\" Size=\"Lumeo.Size.Sm\" /></IconContent>\n    </BottomNavItem>\n</BottomNav>"
         },
         {
           "title": "With Badges",
-          "code": "<BottomNavItem Href=\"/chat\" Label=\"Chat\">\n    <IconContent><Icon Name=\"MessageCircle\" Size=\"Icon.IconSize.Sm\" /></IconContent>\n    <Badge>3</Badge>\n</BottomNavItem>"
+          "code": "<BottomNavItem Href=\"/chat\" Label=\"Chat\">\n    <IconContent><Icon Name=\"MessageCircle\" Size=\"Lumeo.Size.Sm\" /></IconContent>\n    <Badge>3</Badge>\n</BottomNavItem>"
         },
         {
           "title": "With Center FAB",
-          "code": "<BottomNav>\n    <BottomNavItem Href=\"/\" Label=\"Home\" />\n    <BottomNavItem Href=\"/search\" Label=\"Search\" />\n\n    <BottomNavFab AriaLabel=\"Create\" OnClick=\"HandleCreate\">\n        <Icon Name=\"Plus\" Size=\"Icon.IconSize.Md\" />\n    </BottomNavFab>\n\n    <BottomNavItem Href=\"/inbox\" Label=\"Inbox\" />\n    <BottomNavItem Href=\"/profile\" Label=\"Profile\" />\n</BottomNav>"
+          "code": "<BottomNav>\n    <BottomNavItem Href=\"/\" Label=\"Home\" />\n    <BottomNavItem Href=\"/search\" Label=\"Search\" />\n\n    <BottomNavFab AriaLabel=\"Create\" OnClick=\"HandleCreate\">\n        <Icon Name=\"Plus\" Size=\"Lumeo.Size.Md\" />\n    </BottomNavFab>\n\n    <BottomNavItem Href=\"/inbox\" Label=\"Inbox\" />\n    <BottomNavItem Href=\"/profile\" Label=\"Profile\" />\n</BottomNav>"
         },
         {
           "title": "Animated Transitions",
@@ -3825,8 +3828,8 @@
         },
         {
           "name": "Orientation",
-          "type": "ButtonGroupOrientation",
-          "default": "ButtonGroupOrientation.Horizontal",
+          "type": "Lumeo.Orientation",
+          "default": "Lumeo.Orientation.Horizontal",
           "description": null,
           "isCascading": false,
           "captureUnmatched": false
@@ -3841,16 +3844,7 @@
         }
       ],
       "events": [],
-      "enums": [
-        {
-          "name": "ButtonGroupOrientation",
-          "values": [
-            "Horizontal",
-            "Vertical"
-          ],
-          "description": null
-        }
-      ],
+      "enums": [],
       "records": [],
       "cssVars": [
         "--radius"
@@ -3862,7 +3856,7 @@
         },
         {
           "title": "Vertical",
-          "code": "<ButtonGroup Orientation=\"ButtonGroup.ButtonGroupOrientation.Vertical\">\n    <Button Variant=\"Button.ButtonVariant.Outline\">Top</Button>\n    <Button Variant=\"Button.ButtonVariant.Outline\">Middle</Button>\n    <Button Variant=\"Button.ButtonVariant.Outline\">Bottom</Button>\n</ButtonGroup>"
+          "code": "<ButtonGroup Orientation=\"Lumeo.Orientation.Vertical\">\n    <Button Variant=\"Button.ButtonVariant.Outline\">Top</Button>\n    <Button Variant=\"Button.ButtonVariant.Outline\">Middle</Button>\n    <Button Variant=\"Button.ButtonVariant.Outline\">Bottom</Button>\n</ButtonGroup>"
         },
         {
           "title": "Mixed Variants",
@@ -4344,8 +4338,8 @@
       "parameters": [
         {
           "name": "Orientation",
-          "type": "CarouselOrientation",
-          "default": "CarouselOrientation.Horizontal",
+          "type": "Lumeo.Orientation",
+          "default": "Lumeo.Orientation.Horizontal",
           "description": null,
           "isCascading": false,
           "captureUnmatched": false
@@ -4392,20 +4386,11 @@
         }
       ],
       "events": [],
-      "enums": [
-        {
-          "name": "CarouselOrientation",
-          "values": [
-            "Horizontal",
-            "Vertical"
-          ],
-          "description": null
-        }
-      ],
+      "enums": [],
       "records": [
         {
           "name": "CarouselContext",
-          "signature": "CarouselContext(\n        string ContentId,\n        CarouselOrientation Orientation,\n        bool CanScrollPrev,\n        bool CanScrollNext,\n        EventCallback ScrollPrev,\n        EventCallback ScrollNext\n    )",
+          "signature": "CarouselContext(\n        string ContentId,\n        Lumeo.Orientation Orientation,\n        bool CanScrollPrev,\n        bool CanScrollNext,\n        EventCallback ScrollPrev,\n        EventCallback ScrollNext\n    )",
           "description": null
         }
       ],
@@ -4427,7 +4412,7 @@
         },
         {
           "title": "Orientation — interactive",
-          "code": "<Segmented @bind-Value=\"_orientationSel\" Options=\"_orientationOptions\" />\n<Carousel Orientation=\"@(Enum.Parse<Carousel.CarouselOrientation>(_orientationSel))\">\n    <CarouselContent>\n        @for (var i = 1; i <= 4; i++) {\n            var index = i;\n            <CarouselItem>\n                <Card>\n                    <CardContent Class=\"flex aspect-square items-center justify-center p-6\">\n                        <span class=\"text-4xl font-semibold\">@index</span>\n                    </CardContent>\n                </Card>\n            </CarouselItem>\n        }\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n</Carousel>\n\n@code {\n    private string _orientationSel = \"Horizontal\";\n    private List<Segmented.SegmentedOption> _orientationOptions = new()\n    {\n        new() { Label = \"Horizontal\", Value = \"Horizontal\" },\n        new() { Label = \"Vertical\", Value = \"Vertical\" },\n    };\n}"
+          "code": "<Segmented @bind-Value=\"_orientationSel\" Options=\"_orientationOptions\" />\n<Carousel Orientation=\"@(Enum.Parse<Lumeo.Orientation>(_orientationSel))\">\n    <CarouselContent>\n        @for (var i = 1; i <= 4; i++) {\n            var index = i;\n            <CarouselItem>\n                <Card>\n                    <CardContent Class=\"flex aspect-square items-center justify-center p-6\">\n                        <span class=\"text-4xl font-semibold\">@index</span>\n                    </CardContent>\n                </Card>\n            </CarouselItem>\n        }\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n</Carousel>\n\n@code {\n    private string _orientationSel = \"Horizontal\";\n    private List<Segmented.SegmentedOption> _orientationOptions = new()\n    {\n        new() { Label = \"Horizontal\", Value = \"Horizontal\" },\n        new() { Label = \"Vertical\", Value = \"Vertical\" },\n    };\n}"
         },
         {
           "title": "Product Gallery",
@@ -12752,8 +12737,8 @@
         },
         {
           "name": "Size",
-          "type": "ChipSize",
-          "default": "ChipSize.Default",
+          "type": "Lumeo.Size",
+          "default": "Lumeo.Size.Md",
           "description": null,
           "isCascading": false,
           "captureUnmatched": false
@@ -12860,15 +12845,6 @@
             "Solid"
           ],
           "description": null
-        },
-        {
-          "name": "ChipSize",
-          "values": [
-            "Sm",
-            "Default",
-            "Lg"
-          ],
-          "description": null
         }
       ],
       "records": [],
@@ -12891,7 +12867,7 @@
         },
         {
           "title": "Sizes",
-          "code": "<Flex Class=\"items-center gap-2\">\n    <Chip Size=\"Chip.ChipSize.Sm\">Small</Chip>\n    <Chip>Default</Chip>\n    <Chip Size=\"Chip.ChipSize.Lg\">Large</Chip>\n</Flex>"
+          "code": "<Flex Class=\"items-center gap-2\">\n    <Chip Size=\"Lumeo.Size.Sm\">Small</Chip>\n    <Chip>Default</Chip>\n    <Chip Size=\"Lumeo.Size.Lg\">Large</Chip>\n</Flex>"
         },
         {
           "title": "Closable",
@@ -13013,7 +12989,7 @@
         },
         {
           "title": "Block",
-          "code": "<Code Variant=\"block\">dotnet add package Lumeo --version 2.2.2</Code>"
+          "code": "<Code Variant=\"block\">dotnet add package Lumeo --version 2.2.3</Code>"
         },
         {
           "title": "Custom Size",
@@ -13166,7 +13142,7 @@
               "name": "ForceMount",
               "type": "bool",
               "default": null,
-              "description": "When true, this content is always rendered into the DOM (with the hidden attribute when the collapsible is closed) instead of being unmounted. Use when child state must survive collapsing. Default false preserves the original unmount behaviour.",
+              "description": "Preserved for API compatibility only — Collapsible content is now always mounted so the grid-rows close animation can run on collapse, so this flag is effectively a no-op. Children always live in the DOM whether the collapsible is open or closed.",
               "isCascading": false,
               "captureUnmatched": false
             },
@@ -14827,6 +14803,9 @@
         "UI/ContextMenu/ContextMenuRadioGroup.razor",
         "UI/ContextMenu/ContextMenuRadioItem.razor",
         "UI/ContextMenu/ContextMenuSeparator.razor",
+        "UI/ContextMenu/ContextMenuSub.razor",
+        "UI/ContextMenu/ContextMenuSubContent.razor",
+        "UI/ContextMenu/ContextMenuSubTrigger.razor",
         "UI/ContextMenu/ContextMenuTrigger.razor"
       ],
       "namespace": "Lumeo",
@@ -14922,6 +14901,10 @@
         {
           "title": "File Actions",
           "code": "<ContextMenu>\n    <ContextMenuTrigger>\n        <div class=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed\">\n            <div class=\"text-center\">\n                <div class=\"text-sm font-medium\">document.pdf</div>\n                <div class=\"text-xs text-muted-foreground mt-1\">Right click for options</div>\n            </div>\n        </div>\n    </ContextMenuTrigger>\n    <ContextMenuContent>\n        <ContextMenuItem>Open</ContextMenuItem>\n        <ContextMenuItem>Duplicate</ContextMenuItem>\n        <ContextMenuSeparator />\n        <ContextMenuItem>Move to...</ContextMenuItem>\n        <ContextMenuSeparator />\n        <ContextMenuItem>Add to Favorites</ContextMenuItem>\n        <ContextMenuSeparator />\n        <ContextMenuItem>Delete</ContextMenuItem>\n    </ContextMenuContent>\n</ContextMenu>"
+        },
+        {
+          "title": "Submenus",
+          "code": "<ContextMenu>\n    <ContextMenuTrigger>\n        <div class=\"rounded border border-dashed p-10 text-center\">Right-click</div>\n    </ContextMenuTrigger>\n    <ContextMenuContent>\n        <ContextMenuItem>Copy</ContextMenuItem>\n\n        <ContextMenuSub>\n            <ContextMenuSubTrigger>Share</ContextMenuSubTrigger>\n            <ContextMenuSubContent>\n                <ContextMenuItem>Email</ContextMenuItem>\n                <ContextMenuItem>Link</ContextMenuItem>\n\n                <ContextMenuSub>\n                    <ContextMenuSubTrigger>Export as…</ContextMenuSubTrigger>\n                    <ContextMenuSubContent>\n                        <ContextMenuItem>PDF</ContextMenuItem>\n                        <ContextMenuItem>PNG</ContextMenuItem>\n                    </ContextMenuSubContent>\n                </ContextMenuSub>\n            </ContextMenuSubContent>\n        </ContextMenuSub>\n\n        <ContextMenuSeparator />\n        <ContextMenuItem>Delete</ContextMenuItem>\n    </ContextMenuContent>\n</ContextMenu>"
         }
       ],
       "subComponents": {
@@ -15319,6 +15302,160 @@
           "parseFailed": false,
           "parseError": null
         },
+        "ContextMenuSub": {
+          "componentName": "ContextMenuSub",
+          "fileName": "ContextMenuSub.razor",
+          "namespace": "Lumeo",
+          "inheritsFrom": null,
+          "implements": [],
+          "parameters": [
+            {
+              "name": "RootContext",
+              "type": "ContextMenu.ContextMenuContext?",
+              "default": null,
+              "description": null,
+              "isCascading": true,
+              "captureUnmatched": false
+            },
+            {
+              "name": "ParentSubContext",
+              "type": "ContextMenuSubContext?",
+              "default": null,
+              "description": null,
+              "isCascading": true,
+              "captureUnmatched": false
+            },
+            {
+              "name": "ChildContent",
+              "type": "RenderFragment?",
+              "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": [
+            {
+              "name": "ContextMenuSubContext",
+              "signature": "ContextMenuSubContext(\n        bool IsOpen,\n        EventCallback<bool> SetOpen,\n        string WrapperId,\n        string TriggerId,\n        string ContentId,\n        EventCallback CloseTree,\n        Action ScheduleClose,\n        Action CancelClose)",
+              "description": null
+            }
+          ],
+          "parseFailed": false,
+          "parseError": null
+        },
+        "ContextMenuSubContent": {
+          "componentName": "ContextMenuSubContent",
+          "fileName": "ContextMenuSubContent.razor",
+          "namespace": "Lumeo",
+          "inheritsFrom": null,
+          "implements": [
+            "IAsyncDisposable"
+          ],
+          "parameters": [
+            {
+              "name": "SubContext",
+              "type": "ContextMenuSub.ContextMenuSubContext",
+              "default": "default!",
+              "description": null,
+              "isCascading": true,
+              "captureUnmatched": false
+            },
+            {
+              "name": "ChildContent",
+              "type": "RenderFragment?",
+              "default": null,
+              "description": null,
+              "isCascading": false,
+              "captureUnmatched": false
+            },
+            {
+              "name": "Class",
+              "type": "string?",
+              "default": null,
+              "description": null,
+              "isCascading": false,
+              "captureUnmatched": false
+            },
+            {
+              "name": "AdditionalAttributes",
+              "type": "Dictionary<string, object>?",
+              "default": null,
+              "description": null,
+              "isCascading": false,
+              "captureUnmatched": true
+            }
+          ],
+          "events": [],
+          "enums": [],
+          "records": [],
+          "parseFailed": false,
+          "parseError": null
+        },
+        "ContextMenuSubTrigger": {
+          "componentName": "ContextMenuSubTrigger",
+          "fileName": "ContextMenuSubTrigger.razor",
+          "namespace": "Lumeo",
+          "inheritsFrom": null,
+          "implements": [],
+          "parameters": [
+            {
+              "name": "SubContext",
+              "type": "ContextMenuSub.ContextMenuSubContext",
+              "default": "default!",
+              "description": null,
+              "isCascading": true,
+              "captureUnmatched": false
+            },
+            {
+              "name": "ChildContent",
+              "type": "RenderFragment?",
+              "default": null,
+              "description": null,
+              "isCascading": false,
+              "captureUnmatched": false
+            },
+            {
+              "name": "Disabled",
+              "type": "bool",
+              "default": null,
+              "description": null,
+              "isCascading": false,
+              "captureUnmatched": false
+            },
+            {
+              "name": "Class",
+              "type": "string?",
+              "default": null,
+              "description": null,
+              "isCascading": false,
+              "captureUnmatched": false
+            },
+            {
+              "name": "AdditionalAttributes",
+              "type": "Dictionary<string, object>?",
+              "default": null,
+              "description": null,
+              "isCascading": false,
+              "captureUnmatched": true
+            }
+          ],
+          "events": [],
+          "enums": [],
+          "records": [],
+          "parseFailed": false,
+          "parseError": null
+        },
         "ContextMenuTrigger": {
           "componentName": "ContextMenuTrigger",
           "fileName": "ContextMenuTrigger.razor",
@@ -18432,6 +18569,22 @@
           "isCascading": false,
           "captureUnmatched": false
         },
+        {
+          "name": "AllowKeyboardInput",
+          "type": "bool",
+          "default": "true",
+          "description": "When true (default), the trigger renders as a typeable &lt;input&gt; in the configured Format. On blur / Enter the buffer is parsed via DateOnly.TryParseExact(string, string, IFormatProvider, System.Globalization.DateTimeStyles, out DateOnly) (with a fallback to DateOnly.TryParse(string, IFormatProvider, System.Globalization.DateTimeStyles, out DateOnly)). On success the value commits via ValueChanged; on failure the buffer reverts and OnParseError fires. Set to false to keep the historic button-only trigger (input readonly). Has no effect for Range, Wheel, Inline, or when a custom TriggerContent is supplied.",
+          "isCascading": false,
+          "captureUnmatched": false
+        },
+        {
+          "name": "OnParseError",
+          "type": "EventCallback<string>",
+          "default": null,
+          "description": "Fires when keyboard input cannot be parsed against the active Format (or culture short pattern). The argument is the offending raw buffer.",
+          "isCascading": false,
+          "captureUnmatched": false
+        },
         {
           "name": "Inline",
           "type": "bool",
@@ -18515,6 +18668,11 @@
           "type": "EventCallback<TimeSpan?>",
           "description": null
         },
+        {
+          "name": "OnParseError",
+          "type": "EventCallback<string>",
+          "description": "Fires when keyboard input cannot be parsed against the active Format (or culture short pattern). The argument is the offending raw buffer."
+        },
         {
           "name": "OpenChanged",
           "type": "EventCallback<bool>",
@@ -18924,6 +19082,38 @@
           "isCascading": false,
           "captureUnmatched": false
         },
+        {
+          "name": "OffsetValue",
+          "type": "DateTimeOffset?",
+          "default": null,
+          "description": "Optional DateTimeOffset binding. When the caller binds this, it takes precedence: writes flow back through OffsetValueChanged with the offset that matches TimeZone at the picked wall-clock time (DST-aware). The plain ValueChanged still fires for back-compat. Recommended over Value when working with multi-zone scenarios.",
+          "isCascading": false,
+          "captureUnmatched": false
+        },
+        {
+          "name": "OffsetValueChanged",
+          "type": "EventCallback<DateTimeOffset?>",
+          "default": null,
+          "description": null,
+          "isCascading": false,
+          "captureUnmatched": false
+        },
+        {
+          "name": "TimeZone",
+          "type": "TimeZoneInfo?",
+          "default": null,
+          "description": "When non-null, all display/edit happens in this zone — the user picks a wall-clock instant in that zone, and the emitted DateTimeOffset carries the matching offset for that instant (DST-aware). When null, the picker behaves exactly as before (local time, no zone indicator).",
+          "isCascading": false,
+          "captureUnmatched": false
+        },
+        {
+          "name": "ShowTimeZoneLabel",
+          "type": "bool",
+          "default": "true",
+          "description": "When true (default) and TimeZone is set, renders a small \"Europe/Berlin (UTC+1)\"-style indicator next to the value.",
+          "isCascading": false,
+          "captureUnmatched": false
+        },
         {
           "name": "Use24Hour",
           "type": "bool",
@@ -19034,6 +19224,11 @@
           "name": "ValueChanged",
           "type": "EventCallback<DateTime?>",
           "description": null
+        },
+        {
+          "name": "OffsetValueChanged",
+          "type": "EventCallback<DateTimeOffset?>",
+          "description": null
         }
       ],
       "enums": [],
@@ -19374,6 +19569,14 @@
           "isCascading": false,
           "captureUnmatched": false
         },
+        {
+          "name": "OnBeforeClose",
+          "type": "EventCallback<DismissEventArgs>",
+          "default": null,
+          "description": "Fires before any user-initiated dismiss (Escape, backdrop click, X button, or a DialogClose trigger). Set Cancel to true to abort the dismiss — useful for \"discard unsaved changes?\" guards. Inspect Reason to find out which gesture asked to close.",
+          "isCascading": false,
+          "captureUnmatched": false
+        },
         {
           "name": "IsOpen",
           "type": "bool",
@@ -19397,6 +19600,11 @@
           "type": "EventCallback<bool>",
           "description": null
         },
+        {
+          "name": "OnBeforeClose",
+          "type": "EventCallback<DismissEventArgs>",
+          "description": "Fires before any user-initiated dismiss (Escape, backdrop click, X button, or a DialogClose trigger). Set Cancel to true to abort the dismiss — useful for \"discard unsaved changes?\" guards. Inspect Reason to find out which gesture asked to close."
+        },
         {
           "name": "IsOpenChanged",
           "type": "EventCallback<bool>",
@@ -19407,7 +19615,7 @@
       "records": [
         {
           "name": "DialogContext",
-          "signature": "DialogContext(bool IsOpen, EventCallback<bool> SetOpen, string TitleId, string DescriptionId)",
+          "signature": "DialogContext(bool IsOpen, EventCallback<bool> SetOpen, string TitleId, string DescriptionId, Func<string, Task<bool>> TryDismiss)",
           "description": null
         }
       ],
@@ -19548,6 +19756,14 @@
               "isCascading": false,
               "captureUnmatched": false
             },
+            {
+              "name": "ZIndex",
+              "type": "int",
+              "default": "OverlayService.BaseZIndex",
+              "description": "Backdrop z-index. Content sits at ZIndex + 1. Defaults to BaseZIndex; OverlayProvider supplies an incrementing value per nested overlay so a Dialog opened from inside another Dialog stacks above instead of colliding.",
+              "isCascading": false,
+              "captureUnmatched": false
+            },
             {
               "name": "AdditionalAttributes",
               "type": "Dictionary<string, object>?",
@@ -19921,6 +20137,14 @@
           "isCascading": false,
           "captureUnmatched": false
         },
+        {
+          "name": "OnBeforeClose",
+          "type": "EventCallback<DismissEventArgs>",
+          "default": null,
+          "description": "Fires before any user-initiated dismiss (Escape, backdrop click, swipe gesture, or a DrawerClose trigger). Set Cancel to true to abort. The Reason tells you which path fired (\"escape\", \"outside\", \"swipe\", \"close\").",
+          "isCascading": false,
+          "captureUnmatched": false
+        },
         {
           "name": "IsOpen",
           "type": "bool",
@@ -19944,6 +20168,11 @@
           "type": "EventCallback<bool>",
           "description": null
         },
+        {
+          "name": "OnBeforeClose",
+          "type": "EventCallback<DismissEventArgs>",
+          "description": "Fires before any user-initiated dismiss (Escape, backdrop click, swipe gesture, or a DrawerClose trigger). Set Cancel to true to abort. The Reason tells you which path fired (\"escape\", \"outside\", \"swipe\", \"close\")."
+        },
         {
           "name": "IsOpenChanged",
           "type": "EventCallback<bool>",
@@ -19954,7 +20183,7 @@
       "records": [
         {
           "name": "DrawerContext",
-          "signature": "DrawerContext(bool IsOpen, EventCallback<bool> SetOpen, string TitleId, string DescriptionId)",
+          "signature": "DrawerContext(bool IsOpen, EventCallback<bool> SetOpen, string TitleId, string DescriptionId, Func<string, Task<bool>> TryDismiss)",
           "description": null
         }
       ],
@@ -19979,7 +20208,7 @@
         },
         {
           "title": "Side — interactive",
-          "code": "<Segmented @bind-Value=\"_drawerSideSel\" Options=\"_drawerSideOptions\" />\n<Drawer @bind-Open=\"_open\">\n    <DrawerTrigger>\n        <Button Variant=\"Button.ButtonVariant.Outline\">Open Drawer (@_drawerSideSel)</Button>\n    </DrawerTrigger>\n    <DrawerContent Side=\"@_activeDrawerSide\">\n        <DrawerHeader>\n            <DrawerTitle>@_drawerSideSel Drawer</DrawerTitle>\n            <DrawerDescription>Slides in from the @_drawerSideSel.ToLower().</DrawerDescription>\n        </DrawerHeader>\n        <DrawerFooter>\n            <DrawerClose><Button Class=\"w-full\">Close</Button></DrawerClose>\n        </DrawerFooter>\n    </DrawerContent>\n</Drawer>\n\n@code {\n    private string _drawerSideSel = \"Bottom\";\n    private DrawerContent.DrawerSide _activeDrawerSide => Enum.Parse<DrawerContent.DrawerSide>(_drawerSideSel);\n    private List<Segmented.SegmentedOption> _drawerSideOptions = new()\n    {\n        new() { Label = \"Top\", Value = \"Top\" },\n        new() { Label = \"Right\", Value = \"Right\" },\n        new() { Label = \"Bottom\", Value = \"Bottom\" },\n        new() { Label = \"Left\", Value = \"Left\" },\n    };\n}"
+          "code": "<Segmented @bind-Value=\"_drawerSideSel\" Options=\"_drawerSideOptions\" />\n<Drawer @bind-Open=\"_open\">\n    <DrawerTrigger>\n        <Button Variant=\"Button.ButtonVariant.Outline\">Open Drawer (@_drawerSideSel)</Button>\n    </DrawerTrigger>\n    <DrawerContent Side=\"@_activeSide\">\n        <DrawerHeader>\n            <DrawerTitle>@_drawerSideSel Drawer</DrawerTitle>\n            <DrawerDescription>Slides in from the @_drawerSideSel.ToLower().</DrawerDescription>\n        </DrawerHeader>\n        <DrawerFooter>\n            <DrawerClose><Button Class=\"w-full\">Close</Button></DrawerClose>\n        </DrawerFooter>\n    </DrawerContent>\n</Drawer>\n\n@code {\n    private string _drawerSideSel = \"Bottom\";\n    private Lumeo.Side _activeSide => Enum.Parse<Lumeo.Side>(_drawerSideSel);\n    private List<Segmented.SegmentedOption> _drawerSideOptions = new()\n    {\n        new() { Label = \"Top\", Value = \"Top\" },\n        new() { Label = \"Right\", Value = \"Right\" },\n        new() { Label = \"Bottom\", Value = \"Bottom\" },\n        new() { Label = \"Left\", Value = \"Left\" },\n    };\n}"
         }
       ],
       "subComponents": {
@@ -20064,8 +20293,8 @@
             },
             {
               "name": "Side",
-              "type": "DrawerSide",
-              "default": "DrawerSide.Bottom",
+              "type": "Lumeo.Side",
+              "default": "Lumeo.Side.Bottom",
               "description": null,
               "isCascading": false,
               "captureUnmatched": false
@@ -20094,6 +20323,14 @@
               "isCascading": false,
               "captureUnmatched": false
             },
+            {
+              "name": "ZIndex",
+              "type": "int",
+              "default": "OverlayService.BaseZIndex",
+              "description": "Backdrop z-index. Content sits at ZIndex + 1. Defaults to BaseZIndex; OverlayProvider supplies an incrementing value per nested overlay.",
+              "isCascading": false,
+              "captureUnmatched": false
+            },
             {
               "name": "AdditionalAttributes",
               "type": "Dictionary<string, object>?",
@@ -20105,16 +20342,6 @@
           ],
           "events": [],
           "enums": [
-            {
-              "name": "DrawerSide",
-              "values": [
-                "Top",
-                "Right",
-                "Bottom",
-                "Left"
-              ],
-              "description": null
-            },
             {
               "name": "DrawerAnimation",
               "values": [
@@ -20469,6 +20696,9 @@
         "UI/DropdownMenu/DropdownMenuRadioGroup.razor",
         "UI/DropdownMenu/DropdownMenuRadioItem.razor",
         "UI/DropdownMenu/DropdownMenuSeparator.razor",
+        "UI/DropdownMenu/DropdownMenuSub.razor",
+        "UI/DropdownMenu/DropdownMenuSubContent.razor",
+        "UI/DropdownMenu/DropdownMenuSubTrigger.razor",
         "UI/DropdownMenu/DropdownMenuTrigger.razor"
       ],
       "namespace": "Lumeo",
@@ -20567,7 +20797,7 @@
         },
         {
           "title": "Alignment",
-          "code": "<DropdownMenu>\n    <DropdownMenuTrigger>\n        <Button Variant=\"Button.ButtonVariant.Outline\">Start</Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent Align=\"DropdownMenuContent.DropdownMenuAlign.Start\">\n        <DropdownMenuItem>Option 1</DropdownMenuItem>\n        <DropdownMenuItem>Option 2</DropdownMenuItem>\n    </DropdownMenuContent>\n</DropdownMenu>\n\n<DropdownMenu>\n    <DropdownMenuTrigger>\n        <Button Variant=\"Button.ButtonVariant.Outline\">End</Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent Align=\"DropdownMenuContent.DropdownMenuAlign.End\">\n        <DropdownMenuItem>Option 1</DropdownMenuItem>\n        <DropdownMenuItem>Option 2</DropdownMenuItem>\n    </DropdownMenuContent>\n</DropdownMenu>"
+          "code": "<DropdownMenu>\n    <DropdownMenuTrigger>\n        <Button Variant=\"Button.ButtonVariant.Outline\">Start</Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent Align=\"Lumeo.Align.Start\">\n        <DropdownMenuItem>Option 1</DropdownMenuItem>\n        <DropdownMenuItem>Option 2</DropdownMenuItem>\n    </DropdownMenuContent>\n</DropdownMenu>\n\n<DropdownMenu>\n    <DropdownMenuTrigger>\n        <Button Variant=\"Button.ButtonVariant.Outline\">End</Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent Align=\"Lumeo.Align.End\">\n        <DropdownMenuItem>Option 1</DropdownMenuItem>\n        <DropdownMenuItem>Option 2</DropdownMenuItem>\n    </DropdownMenuContent>\n</DropdownMenu>"
         }
       ],
       "subComponents": {
@@ -20658,16 +20888,16 @@
             },
             {
               "name": "Align",
-              "type": "DropdownMenuAlign",
-              "default": "DropdownMenuAlign.Start",
+              "type": "Lumeo.Align",
+              "default": "Lumeo.Align.Start",
               "description": null,
               "isCascading": false,
               "captureUnmatched": false
             },
             {
               "name": "Side",
-              "type": "DropdownMenuSide",
-              "default": "DropdownMenuSide.Bottom",
+              "type": "Lumeo.Side",
+              "default": "Lumeo.Side.Bottom",
               "description": null,
               "isCascading": false,
               "captureUnmatched": false
@@ -20698,27 +20928,7 @@
             }
           ],
           "events": [],
-          "enums": [
-            {
-              "name": "DropdownMenuAlign",
-              "values": [
-                "Start",
-                "Center",
-                "End"
-              ],
-              "description": null
-            },
-            {
-              "name": "DropdownMenuSide",
-              "values": [
-                "Top",
-                "Bottom",
-                "Left",
-                "Right"
-              ],
-              "description": null
-            }
-          ],
+          "enums": [],
           "records": [],
           "parseFailed": false,
           "parseError": null
@@ -21017,6 +21227,160 @@
           "parseFailed": false,
           "parseError": null
         },
+        "DropdownMenuSub": {
+          "componentName": "DropdownMenuSub",
+          "fileName": "DropdownMenuSub.razor",
+          "namespace": "Lumeo",
+          "inheritsFrom": null,
+          "implements": [],
+          "parameters": [
+            {
+              "name": "RootContext",
+              "type": "DropdownMenu.DropdownMenuContext?",
+              "default": null,
+              "description": null,
+              "isCascading": true,
+              "captureUnmatched": false
+            },
+            {
+              "name": "ParentSubContext",
+              "type": "DropdownMenuSubContext?",
+              "default": null,
+              "description": null,
+              "isCascading": true,
+              "captureUnmatched": false
+            },
+            {
+              "name": "ChildContent",
+              "type": "RenderFragment?",
+              "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": [
+            {
+              "name": "DropdownMenuSubContext",
+              "signature": "DropdownMenuSubContext(\n        bool IsOpen,\n        EventCallback<bool> SetOpen,\n        string WrapperId,\n        string TriggerId,\n        string ContentId,\n        EventCallback CloseTree,\n        Action ScheduleClose,\n        Action CancelClose)",
+              "description": null
+            }
+          ],
+          "parseFailed": false,
+          "parseError": null
+        },
+        "DropdownMenuSubContent": {
+          "componentName": "DropdownMenuSubContent",
+          "fileName": "DropdownMenuSubContent.razor",
+          "namespace": "Lumeo",
+          "inheritsFrom": null,
+          "implements": [
+            "IAsyncDisposable"
+          ],
+          "parameters": [
+            {
+              "name": "SubContext",
+              "type": "DropdownMenuSub.DropdownMenuSubContext",
+              "default": "default!",
+              "description": null,
+              "isCascading": true,
+              "captureUnmatched": false
+            },
+            {
+              "name": "ChildContent",
+              "type": "RenderFragment?",
+              "default": null,
+              "description": null,
+              "isCascading": false,
+              "captureUnmatched": false
+            },
+            {
+              "name": "Class",
+              "type": "string?",
+              "default": null,
+              "description": null,
+              "isCascading": false,
+              "captureUnmatched": false
+            },
+            {
+              "name": "AdditionalAttributes",
+              "type": "Dictionary<string, object>?",
+              "default": null,
+              "description": null,
+              "isCascading": false,
+              "captureUnmatched": true
+            }
+          ],
+          "events": [],
+          "enums": [],
+          "records": [],
+          "parseFailed": false,
+          "parseError": null
+        },
+        "DropdownMenuSubTrigger": {
+          "componentName": "DropdownMenuSubTrigger",
+          "fileName": "DropdownMenuSubTrigger.razor",
+          "namespace": "Lumeo",
+          "inheritsFrom": null,
+          "implements": [],
+          "parameters": [
+            {
+              "name": "SubContext",
+              "type": "DropdownMenuSub.DropdownMenuSubContext",
+              "default": "default!",
+              "description": null,
+              "isCascading": true,
+              "captureUnmatched": false
+            },
+            {
+              "name": "ChildContent",
+              "type": "RenderFragment?",
+              "default": null,
+              "description": null,
+              "isCascading": false,
+              "captureUnmatched": false
+            },
+            {
+              "name": "Disabled",
+              "type": "bool",
+              "default": null,
+              "description": null,
+              "isCascading": false,
+              "captureUnmatched": false
+            },
+            {
+              "name": "Class",
+              "type": "string?",
+              "default": null,
+              "description": null,
+              "isCascading": false,
+              "captureUnmatched": false
+            },
+            {
+              "name": "AdditionalAttributes",
+              "type": "Dictionary<string, object>?",
+              "default": null,
+              "description": null,
+              "isCascading": false,
+              "captureUnmatched": true
+            }
+          ],
+          "events": [],
+          "enums": [],
+          "records": [],
+          "parseFailed": false,
+          "parseError": null
+        },
         "DropdownMenuTrigger": {
           "componentName": "DropdownMenuTrigger",
           "fileName": "DropdownMenuTrigger.razor",
@@ -21486,8 +21850,8 @@
         },
         {
           "name": "Size",
-          "type": "FileUploadSize",
-          "default": "FileUploadSize.Default",
+          "type": "Lumeo.Size",
+          "default": "Lumeo.Size.Md",
           "description": "Size of the trigger when Variant=\"Button\". Mirrors ButtonSize so a button-variant FileUpload can match neighbouring buttons in toolbars or compact forms. Has no visual effect on Dropzone or Avatar variants today.",
           "isCascading": false,
           "captureUnmatched": false
@@ -21671,15 +22035,6 @@
           ],
           "description": null
         },
-        {
-          "name": "FileUploadSize",
-          "values": [
-            "Sm",
-            "Default",
-            "Lg"
-          ],
-          "description": null
-        },
         {
           "name": "FileUploadStatus",
           "values": [
@@ -22146,7 +22501,9 @@
           "fileName": "FormField.razor",
           "namespace": "Lumeo",
           "inheritsFrom": null,
-          "implements": [],
+          "implements": [
+            "IDisposable"
+          ],
           "parameters": [
             {
               "name": "Label",
@@ -22182,8 +22539,8 @@
             },
             {
               "name": "Orientation",
-              "type": "FormFieldOrientation",
-              "default": "FormFieldOrientation.Vertical",
+              "type": "Lumeo.Orientation",
+              "default": "Lumeo.Orientation.Vertical",
               "description": null,
               "isCascading": false,
               "captureUnmatched": false
@@ -22228,6 +22585,46 @@
               "isCascading": false,
               "captureUnmatched": true
             },
+            {
+              "name": "AsyncValidator",
+              "type": "Func<object?, Task<string?>>?",
+              "default": null,
+              "description": "Optional async validator. Receives the current Value, returns null when valid or an error message string otherwise. The result is stored in Errors against Name.",
+              "isCascading": false,
+              "captureUnmatched": false
+            },
+            {
+              "name": "AsyncValidationDebounceMs",
+              "type": "int",
+              "default": "0",
+              "description": "Debounce window in ms. 0 disables debouncing.",
+              "isCascading": false,
+              "captureUnmatched": false
+            },
+            {
+              "name": "AsyncValidateOn",
+              "type": "AsyncValidationTrigger",
+              "default": "AsyncValidationTrigger.OnBlur",
+              "description": "When async validation runs. Defaults to OnBlur.",
+              "isCascading": false,
+              "captureUnmatched": false
+            },
+            {
+              "name": "Value",
+              "type": "object?",
+              "default": null,
+              "description": "Current value of the bound input. Required for OnChange auto-triggering; also passed to the validator on blur. If unset, consumers may invoke ValidateAsync(object?) directly.",
+              "isCascading": false,
+              "captureUnmatched": false
+            },
+            {
+              "name": "OnValidatingChanged",
+              "type": "EventCallback<bool>",
+              "default": null,
+              "description": "Fired whenever IsValidating flips.",
+              "isCascading": false,
+              "captureUnmatched": false
+            },
             {
               "name": "ParentFormContext",
               "type": "FormContext?",
@@ -22237,13 +22634,19 @@
               "captureUnmatched": false
             }
           ],
-          "events": [],
+          "events": [
+            {
+              "name": "OnValidatingChanged",
+              "type": "EventCallback<bool>",
+              "description": "Fired whenever IsValidating flips."
+            }
+          ],
           "enums": [
             {
-              "name": "FormFieldOrientation",
+              "name": "AsyncValidationTrigger",
               "values": [
-                "Vertical",
-                "Horizontal"
+                "OnBlur",
+                "OnChange"
               ],
               "description": null
             }
@@ -22251,7 +22654,7 @@
           "records": [
             {
               "name": "FormFieldContext",
-              "signature": "FormFieldContext(string? Name, string? Error)",
+              "signature": "FormFieldContext(string? Name, string? Error, bool IsValidating)",
               "description": null
             }
           ],
@@ -23188,7 +23591,7 @@
         },
         {
           "title": "Alignment",
-          "code": "<HoverCard>\n    <HoverCardTrigger>\n        <Button Variant=\"Button.ButtonVariant.Outline\">Start</Button>\n    </HoverCardTrigger>\n    <HoverCardContent Align=\"HoverCardContent.HoverCardAlign.Start\">\n        <Lumeo.Text Size=\"sm\">Aligned to start.</Lumeo.Text>\n    </HoverCardContent>\n</HoverCard>\n\n<HoverCard>\n    <HoverCardTrigger>\n        <Button Variant=\"Button.ButtonVariant.Outline\">End</Button>\n    </HoverCardTrigger>\n    <HoverCardContent Align=\"HoverCardContent.HoverCardAlign.End\">\n        <Lumeo.Text Size=\"sm\">Aligned to end.</Lumeo.Text>\n    </HoverCardContent>\n</HoverCard>"
+          "code": "<HoverCard>\n    <HoverCardTrigger>\n        <Button Variant=\"Button.ButtonVariant.Outline\">Start</Button>\n    </HoverCardTrigger>\n    <HoverCardContent Align=\"Lumeo.Align.Start\">\n        <Lumeo.Text Size=\"sm\">Aligned to start.</Lumeo.Text>\n    </HoverCardContent>\n</HoverCard>\n\n<HoverCard>\n    <HoverCardTrigger>\n        <Button Variant=\"Button.ButtonVariant.Outline\">End</Button>\n    </HoverCardTrigger>\n    <HoverCardContent Align=\"Lumeo.Align.End\">\n        <Lumeo.Text Size=\"sm\">Aligned to end.</Lumeo.Text>\n    </HoverCardContent>\n</HoverCard>"
         },
         {
           "title": "With Arrow",
@@ -23227,16 +23630,16 @@
             },
             {
               "name": "Align",
-              "type": "HoverCardAlign",
-              "default": "HoverCardAlign.Center",
+              "type": "Lumeo.Align",
+              "default": "Lumeo.Align.Center",
               "description": null,
               "isCascading": false,
               "captureUnmatched": false
             },
             {
               "name": "Side",
-              "type": "HoverCardSide",
-              "default": "HoverCardSide.Bottom",
+              "type": "Lumeo.Side",
+              "default": "Lumeo.Side.Bottom",
               "description": null,
               "isCascading": false,
               "captureUnmatched": false
@@ -23267,25 +23670,7 @@
             }
           ],
           "events": [],
-          "enums": [
-            {
-              "name": "HoverCardAlign",
-              "values": [
-                "Start",
-                "Center",
-                "End"
-              ],
-              "description": null
-            },
-            {
-              "name": "HoverCardSide",
-              "values": [
-                "Top",
-                "Bottom"
-              ],
-              "description": null
-            }
-          ],
+          "enums": [],
           "records": [],
           "parseFailed": false,
           "parseError": null
@@ -23371,8 +23756,8 @@
         },
         {
           "name": "Size",
-          "type": "IconSize",
-          "default": "IconSize.Md",
+          "type": "Lumeo.Size",
+          "default": "Lumeo.Size.Md",
           "description": "Size preset. Sets Tailwind h-{n} w-{n} on the SVG. Defaults to Md (h-4 w-4).",
           "isCascading": false,
           "captureUnmatched": false
@@ -23395,19 +23780,7 @@
         }
       ],
       "events": [],
-      "enums": [
-        {
-          "name": "IconSize",
-          "values": [
-            "Xs",
-            "Sm",
-            "Md",
-            "Lg",
-            "Xl"
-          ],
-          "description": null
-        }
-      ],
+      "enums": [],
       "records": [],
       "cssVars": [
         "--color-foreground"
@@ -23686,8 +24059,8 @@
         },
         {
           "name": "Orientation",
-          "type": "ImageCompareOrientation",
-          "default": "ImageCompareOrientation.Horizontal",
+          "type": "Lumeo.Orientation",
+          "default": "Lumeo.Orientation.Horizontal",
           "description": null,
           "isCascading": false,
           "captureUnmatched": false
@@ -23710,16 +24083,7 @@
         }
       ],
       "events": [],
-      "enums": [
-        {
-          "name": "ImageCompareOrientation",
-          "values": [
-            "Horizontal",
-            "Vertical"
-          ],
-          "description": null
-        }
-      ],
+      "enums": [],
       "records": [],
       "cssVars": [
         "--color-background",
@@ -23733,11 +24097,11 @@
         },
         {
           "title": "Vertical Comparison",
-          "code": "<ImageCompare BeforeSrc=\"img1.jpg\" AfterSrc=\"img2.jpg\"\n             Orientation=\"ImageCompare.ImageCompareOrientation.Vertical\"\n             Height=\"320px\" />"
+          "code": "<ImageCompare BeforeSrc=\"img1.jpg\" AfterSrc=\"img2.jpg\"\n             Orientation=\"Lumeo.Orientation.Vertical\"\n             Height=\"320px\" />"
         },
         {
           "title": "Orientation (interactive)",
-          "code": "<Segmented @bind-Value=\"_orientation\">\n    <SegmentedItem Value=\"@ImageCompare.ImageCompareOrientation.Horizontal\">Horizontal</SegmentedItem>\n    <SegmentedItem Value=\"@ImageCompare.ImageCompareOrientation.Vertical\">Vertical</SegmentedItem>\n</Segmented>\n<ImageCompare BeforeSrc=\"before.jpg\" AfterSrc=\"after.jpg\"\n             BeforeLabel=\"Before\" AfterLabel=\"After\"\n             Orientation=\"@_orientation\" Height=\"280px\" />\n\n@code { private ImageCompare.ImageCompareOrientation _orientation = ImageCompare.ImageCompareOrientation.Horizontal; }"
+          "code": "<Segmented @bind-Value=\"_orientation\">\n    <SegmentedItem Value=\"@Lumeo.Orientation.Horizontal\">Horizontal</SegmentedItem>\n    <SegmentedItem Value=\"@Lumeo.Orientation.Vertical\">Vertical</SegmentedItem>\n</Segmented>\n<ImageCompare BeforeSrc=\"before.jpg\" AfterSrc=\"after.jpg\"\n             BeforeLabel=\"Before\" AfterLabel=\"After\"\n             Orientation=\"@_orientation\" Height=\"280px\" />\n\n@code { private Lumeo.Orientation _orientation = Lumeo.Orientation.Horizontal; }"
         },
         {
           "title": "Custom Initial Position",
@@ -24064,8 +24428,8 @@
         },
         {
           "name": "Size",
-          "type": "InputSize",
-          "default": "InputSize.Default",
+          "type": "Lumeo.Size",
+          "default": "Lumeo.Size.Md",
           "description": null,
           "isCascading": false,
           "captureUnmatched": false
@@ -24168,17 +24532,7 @@
           "description": null
         }
       ],
-      "enums": [
-        {
-          "name": "InputSize",
-          "values": [
-            "Sm",
-            "Default",
-            "Lg"
-          ],
-          "description": null
-        }
-      ],
+      "enums": [],
       "records": [],
       "cssVars": [
         "--color-destructive",
@@ -24672,8 +25026,8 @@
         },
         {
           "name": "Size",
-          "type": "KbdSize",
-          "default": "KbdSize.Default",
+          "type": "Lumeo.Size",
+          "default": "Lumeo.Size.Md",
           "description": null,
           "isCascading": false,
           "captureUnmatched": false
@@ -24696,17 +25050,7 @@
         }
       ],
       "events": [],
-      "enums": [
-        {
-          "name": "KbdSize",
-          "values": [
-            "Sm",
-            "Default",
-            "Lg"
-          ],
-          "description": null
-        }
-      ],
+      "enums": [],
       "records": [],
       "cssVars": [
         "--color-border",
@@ -24721,7 +25065,7 @@
         },
         {
           "title": "Sizes",
-          "code": "<Kbd Size=\"Kbd.KbdSize.Sm\">Ctrl</Kbd>\n<Kbd>Ctrl</Kbd>\n<Kbd Size=\"Kbd.KbdSize.Lg\">Ctrl</Kbd>"
+          "code": "<Kbd Size=\"Lumeo.Size.Sm\">Ctrl</Kbd>\n<Kbd>Ctrl</Kbd>\n<Kbd Size=\"Lumeo.Size.Lg\">Ctrl</Kbd>"
         },
         {
           "title": "In Context",
@@ -24729,7 +25073,7 @@
         },
         {
           "title": "Size — interactive",
-          "code": "<Kbd Size=\"Kbd.KbdSize.Sm\">Ctrl</Kbd>\n<Kbd>Ctrl</Kbd>          @* Default *@\n<Kbd Size=\"Kbd.KbdSize.Lg\">Ctrl</Kbd>"
+          "code": "<Kbd Size=\"Lumeo.Size.Sm\">Ctrl</Kbd>\n<Kbd>Ctrl</Kbd>          @* Default *@\n<Kbd Size=\"Lumeo.Size.Lg\">Ctrl</Kbd>"
         }
       ],
       "subComponents": {},
@@ -25080,8 +25424,8 @@
         },
         {
           "name": "Size",
-          "type": "ListSize",
-          "default": "ListSize.Default",
+          "type": "Lumeo.Size",
+          "default": "Lumeo.Size.Md",
           "description": null,
           "isCascading": false,
           "captureUnmatched": false
@@ -25104,21 +25448,11 @@
         }
       ],
       "events": [],
-      "enums": [
-        {
-          "name": "ListSize",
-          "values": [
-            "Sm",
-            "Default",
-            "Lg"
-          ],
-          "description": null
-        }
-      ],
+      "enums": [],
       "records": [
         {
           "name": "ListContext",
-          "signature": "ListContext(bool Bordered, bool Hoverable, ListSize Size)",
+          "signature": "ListContext(bool Bordered, bool Hoverable, Lumeo.Size Size)",
           "description": null
         }
       ],
@@ -25144,7 +25478,7 @@
         },
         {
           "title": "Sizes",
-          "code": "<List Bordered=\"true\" Size=\"List.ListSize.Sm\">...</List>\n<List Bordered=\"true\">...</List>\n<List Bordered=\"true\" Size=\"List.ListSize.Lg\">...</List>"
+          "code": "<List Bordered=\"true\" Size=\"Lumeo.Size.Sm\">...</List>\n<List Bordered=\"true\">...</List>\n<List Bordered=\"true\" Size=\"Lumeo.Size.Lg\">...</List>"
         }
       ],
       "subComponents": {
@@ -25407,8 +25741,8 @@
         },
         {
           "name": "Orientation",
-          "type": "MegaMenuOrientation",
-          "default": "MegaMenuOrientation.Horizontal",
+          "type": "Lumeo.Orientation",
+          "default": "Lumeo.Orientation.Horizontal",
           "description": null,
           "isCascading": false,
           "captureUnmatched": false
@@ -25431,16 +25765,7 @@
         }
       ],
       "events": [],
-      "enums": [
-        {
-          "name": "MegaMenuOrientation",
-          "values": [
-            "Horizontal",
-            "Vertical"
-          ],
-          "description": null
-        }
-      ],
+      "enums": [],
       "records": [
         {
           "name": "MegaMenuContext",
@@ -25470,7 +25795,7 @@
         },
         {
           "title": "Orientation — interactive",
-          "code": "<Segmented @bind-Value=\"_orientationSel\" Options=\"_orientationOptions\" />\n<MegaMenu Orientation=\"@_activeMegaMenuOrientation\">\n    <MegaMenuItem Label=\"Products\">\n        <MegaMenuPanel Columns=\"2\">\n            <MegaMenuGroup Title=\"Design\">\n                <MegaMenuLink Href=\"#\" Title=\"Components\" Description=\"Pre-built UI components\" />\n            </MegaMenuGroup>\n            <MegaMenuGroup Title=\"Development\">\n                <MegaMenuLink Href=\"#\" Title=\"CLI\" Description=\"Command-line tooling\" />\n            </MegaMenuGroup>\n        </MegaMenuPanel>\n    </MegaMenuItem>\n    <MegaMenuItem Label=\"Docs\" Href=\"#\" />\n</MegaMenu>\n\n@code {\n    private string _orientationSel = \"Horizontal\";\n    private MegaMenu.MegaMenuOrientation _activeMegaMenuOrientation =>\n        Enum.Parse<MegaMenu.MegaMenuOrientation>(_orientationSel);\n    private List<Segmented.SegmentedOption> _orientationOptions = new()\n    {\n        new() { Label = \"Horizontal\", Value = \"Horizontal\" },\n        new() { Label = \"Vertical\", Value = \"Vertical\" },\n    };\n}"
+          "code": "<Segmented @bind-Value=\"_orientationSel\" Options=\"_orientationOptions\" />\n<MegaMenu Orientation=\"@_activeOrientation\">\n    <MegaMenuItem Label=\"Products\">\n        <MegaMenuPanel Columns=\"2\">\n            <MegaMenuGroup Title=\"Design\">\n                <MegaMenuLink Href=\"#\" Title=\"Components\" Description=\"Pre-built UI components\" />\n            </MegaMenuGroup>\n            <MegaMenuGroup Title=\"Development\">\n                <MegaMenuLink Href=\"#\" Title=\"CLI\" Description=\"Command-line tooling\" />\n            </MegaMenuGroup>\n        </MegaMenuPanel>\n    </MegaMenuItem>\n    <MegaMenuItem Label=\"Docs\" Href=\"#\" />\n</MegaMenu>\n\n@code {\n    private string _orientationSel = \"Horizontal\";\n    private Lumeo.Orientation _activeOrientation =>\n        Enum.Parse<Lumeo.Orientation>(_orientationSel);\n    private List<Segmented.SegmentedOption> _orientationOptions = new()\n    {\n        new() { Label = \"Horizontal\", Value = \"Horizontal\" },\n        new() { Label = \"Vertical\", Value = \"Vertical\" },\n    };\n}"
         }
       ],
       "subComponents": {
@@ -25950,6 +26275,9 @@
         "UI/Menubar/MenubarMenu.razor",
         "UI/Menubar/MenubarSeparator.razor",
         "UI/Menubar/MenubarShortcut.razor",
+        "UI/Menubar/MenubarSub.razor",
+        "UI/Menubar/MenubarSubContent.razor",
+        "UI/Menubar/MenubarSubTrigger.razor",
         "UI/Menubar/MenubarTrigger.razor"
       ],
       "namespace": "Lumeo",
@@ -26302,6 +26630,160 @@
           "parseFailed": false,
           "parseError": null
         },
+        "MenubarSub": {
+          "componentName": "MenubarSub",
+          "fileName": "MenubarSub.razor",
+          "namespace": "Lumeo",
+          "inheritsFrom": null,
+          "implements": [],
+          "parameters": [
+            {
+              "name": "RootContext",
+              "type": "Menubar.MenubarContext?",
+              "default": null,
+              "description": null,
+              "isCascading": true,
+              "captureUnmatched": false
+            },
+            {
+              "name": "ParentSubContext",
+              "type": "MenubarSubContext?",
+              "default": null,
+              "description": null,
+              "isCascading": true,
+              "captureUnmatched": false
+            },
+            {
+              "name": "ChildContent",
+              "type": "RenderFragment?",
+              "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": [
+            {
+              "name": "MenubarSubContext",
+              "signature": "MenubarSubContext(\n        bool IsOpen,\n        EventCallback<bool> SetOpen,\n        string WrapperId,\n        string TriggerId,\n        string ContentId,\n        EventCallback CloseTree,\n        Action ScheduleClose,\n        Action CancelClose)",
+              "description": null
+            }
+          ],
+          "parseFailed": false,
+          "parseError": null
+        },
+        "MenubarSubContent": {
+          "componentName": "MenubarSubContent",
+          "fileName": "MenubarSubContent.razor",
+          "namespace": "Lumeo",
+          "inheritsFrom": null,
+          "implements": [
+            "IAsyncDisposable"
+          ],
+          "parameters": [
+            {
+              "name": "SubContext",
+              "type": "MenubarSub.MenubarSubContext",
+              "default": "default!",
+              "description": null,
+              "isCascading": true,
+              "captureUnmatched": false
+            },
+            {
+              "name": "ChildContent",
+              "type": "RenderFragment?",
+              "default": null,
+              "description": null,
+              "isCascading": false,
+              "captureUnmatched": false
+            },
+            {
+              "name": "Class",
+              "type": "string?",
+              "default": null,
+              "description": null,
+              "isCascading": false,
+              "captureUnmatched": false
+            },
+            {
+              "name": "AdditionalAttributes",
+              "type": "Dictionary<string, object>?",
+              "default": null,
+              "description": null,
+              "isCascading": false,
+              "captureUnmatched": true
+            }
+          ],
+          "events": [],
+          "enums": [],
+          "records": [],
+          "parseFailed": false,
+          "parseError": null
+        },
+        "MenubarSubTrigger": {
+          "componentName": "MenubarSubTrigger",
+          "fileName": "MenubarSubTrigger.razor",
+          "namespace": "Lumeo",
+          "inheritsFrom": null,
+          "implements": [],
+          "parameters": [
+            {
+              "name": "SubContext",
+              "type": "MenubarSub.MenubarSubContext",
+              "default": "default!",
+              "description": null,
+              "isCascading": true,
+              "captureUnmatched": false
+            },
+            {
+              "name": "ChildContent",
+              "type": "RenderFragment?",
+              "default": null,
+              "description": null,
+              "isCascading": false,
+              "captureUnmatched": false
+            },
+            {
+              "name": "Disabled",
+              "type": "bool",
+              "default": null,
+              "description": null,
+              "isCascading": false,
+              "captureUnmatched": false
+            },
+            {
+              "name": "Class",
+              "type": "string?",
+              "default": null,
+              "description": null,
+              "isCascading": false,
+              "captureUnmatched": false
+            },
+            {
+              "name": "AdditionalAttributes",
+              "type": "Dictionary<string, object>?",
+              "default": null,
+              "description": null,
+              "isCascading": false,
+              "captureUnmatched": true
+            }
+          ],
+          "events": [],
+          "enums": [],
+          "records": [],
+          "parseFailed": false,
+          "parseError": null
+        },
         "MenubarTrigger": {
           "componentName": "MenubarTrigger",
           "fileName": "MenubarTrigger.razor",
@@ -27488,6 +27970,7 @@
       "description": "Low-level backdrop primitive for custom popovers and modals.",
       "nugetPackage": "Lumeo",
       "files": [
+        "UI/Overlay/DismissEventArgs.cs",
         "UI/Overlay/OverlayProvider.razor"
       ],
       "namespace": "Lumeo",
@@ -27509,7 +27992,7 @@
         },
         {
           "title": "Open a Sheet",
-          "code": "@inject OverlayService OverlayService\n\n<Button OnClick=\"@OpenSheet\">Open Sheet</Button>\n\n@code {\n    private async Task OpenSheet()\n    {\n        await OverlayService.ShowSheetAsync<MySheetContent>(\n            title: \"Settings\",\n            side: SheetSide.Right);\n    }\n}"
+          "code": "@inject OverlayService OverlayService\n\n<Button OnClick=\"@OpenSheet\">Open Sheet</Button>\n\n@code {\n    private async Task OpenSheet()\n    {\n        await OverlayService.ShowSheetAsync<MySheetContent>(\n            title: \"Settings\",\n            side: Lumeo.Side.Right);\n    }\n}"
         },
         {
           "title": "Confirmation Dialog",
@@ -28575,15 +29058,15 @@
         },
         {
           "title": "Alignment",
-          "code": "<Popover>\n    <PopoverTrigger>\n        <Button Variant=\"Button.ButtonVariant.Outline\">Start</Button>\n    </PopoverTrigger>\n    <PopoverContent Align=\"PopoverContent.PopoverAlign.Start\">\n        <Lumeo.Text Size=\"sm\">Aligned to start.</Lumeo.Text>\n    </PopoverContent>\n</Popover>\n\n<Popover>\n    <PopoverTrigger>\n        <Button Variant=\"Button.ButtonVariant.Outline\">End</Button>\n    </PopoverTrigger>\n    <PopoverContent Align=\"PopoverContent.PopoverAlign.End\">\n        <Lumeo.Text Size=\"sm\">Aligned to end.</Lumeo.Text>\n    </PopoverContent>\n</Popover>"
+          "code": "<Popover>\n    <PopoverTrigger>\n        <Button Variant=\"Button.ButtonVariant.Outline\">Start</Button>\n    </PopoverTrigger>\n    <PopoverContent Align=\"Lumeo.Align.Start\">\n        <Lumeo.Text Size=\"sm\">Aligned to start.</Lumeo.Text>\n    </PopoverContent>\n</Popover>\n\n<Popover>\n    <PopoverTrigger>\n        <Button Variant=\"Button.ButtonVariant.Outline\">End</Button>\n    </PopoverTrigger>\n    <PopoverContent Align=\"Lumeo.Align.End\">\n        <Lumeo.Text Size=\"sm\">Aligned to end.</Lumeo.Text>\n    </PopoverContent>\n</Popover>"
         },
         {
           "title": "With Arrow",
-          "code": "<Popover>\n    <PopoverTrigger><Button Variant=\"Button.ButtonVariant.Outline\">Top</Button></PopoverTrigger>\n    <PopoverContent Side=\"PopoverContent.PopoverSide.Top\" ShowArrow=\"true\">\n        <Lumeo.Text Size=\"sm\">Popover on top with an arrow pointing at the trigger.</Lumeo.Text>\n    </PopoverContent>\n</Popover>"
+          "code": "<Popover>\n    <PopoverTrigger><Button Variant=\"Button.ButtonVariant.Outline\">Top</Button></PopoverTrigger>\n    <PopoverContent Side=\"Lumeo.Side.Top\" ShowArrow=\"true\">\n        <Lumeo.Text Size=\"sm\">Popover on top with an arrow pointing at the trigger.</Lumeo.Text>\n    </PopoverContent>\n</Popover>"
         },
         {
           "title": "Placement",
-          "code": "<Popover>\n    <PopoverTrigger><Button Variant=\"Button.ButtonVariant.Outline\">Top</Button></PopoverTrigger>\n    <PopoverContent Side=\"PopoverContent.PopoverSide.Top\">\n        <Lumeo.Text Size=\"sm\">Popover on top</Lumeo.Text>\n    </PopoverContent>\n</Popover>\n<Popover>\n    <PopoverTrigger><Button Variant=\"Button.ButtonVariant.Outline\">Bottom</Button></PopoverTrigger>\n    <PopoverContent Side=\"PopoverContent.PopoverSide.Bottom\">\n        <Lumeo.Text Size=\"sm\">Popover on bottom</Lumeo.Text>\n    </PopoverContent>\n</Popover>\n<Popover>\n    <PopoverTrigger><Button Variant=\"Button.ButtonVariant.Outline\">Left</Button></PopoverTrigger>\n    <PopoverContent Side=\"PopoverContent.PopoverSide.Left\">\n        <Lumeo.Text Size=\"sm\">Popover on left</Lumeo.Text>\n    </PopoverContent>\n</Popover>\n<Popover>\n    <PopoverTrigger><Button Variant=\"Button.ButtonVariant.Outline\">Right</Button></PopoverTrigger>\n    <PopoverContent Side=\"PopoverContent.PopoverSide.Right\">\n        <Lumeo.Text Size=\"sm\">Popover on right</Lumeo.Text>\n    </PopoverContent>\n</Popover>"
+          "code": "<Popover>\n    <PopoverTrigger><Button Variant=\"Button.ButtonVariant.Outline\">Top</Button></PopoverTrigger>\n    <PopoverContent Side=\"Lumeo.Side.Top\">\n        <Lumeo.Text Size=\"sm\">Popover on top</Lumeo.Text>\n    </PopoverContent>\n</Popover>\n<Popover>\n    <PopoverTrigger><Button Variant=\"Button.ButtonVariant.Outline\">Bottom</Button></PopoverTrigger>\n    <PopoverContent Side=\"Lumeo.Side.Bottom\">\n        <Lumeo.Text Size=\"sm\">Popover on bottom</Lumeo.Text>\n    </PopoverContent>\n</Popover>\n<Popover>\n    <PopoverTrigger><Button Variant=\"Button.ButtonVariant.Outline\">Left</Button></PopoverTrigger>\n    <PopoverContent Side=\"Lumeo.Side.Left\">\n        <Lumeo.Text Size=\"sm\">Popover on left</Lumeo.Text>\n    </PopoverContent>\n</Popover>\n<Popover>\n    <PopoverTrigger><Button Variant=\"Button.ButtonVariant.Outline\">Right</Button></PopoverTrigger>\n    <PopoverContent Side=\"Lumeo.Side.Right\">\n        <Lumeo.Text Size=\"sm\">Popover on right</Lumeo.Text>\n    </PopoverContent>\n</Popover>"
         }
       ],
       "subComponents": {
@@ -28614,16 +29097,16 @@
             },
             {
               "name": "Align",
-              "type": "PopoverAlign",
-              "default": "PopoverAlign.Center",
+              "type": "Lumeo.Align",
+              "default": "Lumeo.Align.Center",
               "description": null,
               "isCascading": false,
               "captureUnmatched": false
             },
             {
               "name": "Side",
-              "type": "PopoverSide",
-              "default": "PopoverSide.Bottom",
+              "type": "Lumeo.Side",
+              "default": "Lumeo.Side.Bottom",
               "description": null,
               "isCascading": false,
               "captureUnmatched": false
@@ -28654,27 +29137,7 @@
             }
           ],
           "events": [],
-          "enums": [
-            {
-              "name": "PopoverAlign",
-              "values": [
-                "Start",
-                "Center",
-                "End"
-              ],
-              "description": null
-            },
-            {
-              "name": "PopoverSide",
-              "values": [
-                "Top",
-                "Bottom",
-                "Left",
-                "Right"
-              ],
-              "description": null
-            }
-          ],
+          "enums": [],
           "records": [],
           "parseFailed": false,
           "parseError": null
@@ -29619,6 +30082,22 @@
               "description": "The parent group (null for the root) — used to support self-removal.",
               "isCascading": false,
               "captureUnmatched": false
+            },
+            {
+              "name": "Class",
+              "type": "string?",
+              "default": null,
+              "description": null,
+              "isCascading": false,
+              "captureUnmatched": false
+            },
+            {
+              "name": "AdditionalAttributes",
+              "type": "Dictionary<string, object>?",
+              "default": null,
+              "description": null,
+              "isCascading": false,
+              "captureUnmatched": true
             }
           ],
           "events": [],
@@ -29998,8 +30477,8 @@
         },
         {
           "name": "Size",
-          "type": "RatingSize",
-          "default": "RatingSize.Default",
+          "type": "Lumeo.Size",
+          "default": "Lumeo.Size.Md",
           "description": null,
           "isCascading": false,
           "captureUnmatched": false
@@ -30076,17 +30555,7 @@
           "description": null
         }
       ],
-      "enums": [
-        {
-          "name": "RatingSize",
-          "values": [
-            "Small",
-            "Default",
-            "Large"
-          ],
-          "description": null
-        }
-      ],
+      "enums": [],
       "records": [],
       "cssVars": [
         "--color-destructive",
@@ -30107,7 +30576,7 @@
         },
         {
           "title": "Sizes",
-          "code": "<Rating Value=\"3\" ReadOnly=\"true\" Size=\"Rating.RatingSize.Small\" />\n<Rating Value=\"3\" ReadOnly=\"true\" />\n<Rating Value=\"3\" ReadOnly=\"true\" Size=\"Rating.RatingSize.Large\" />"
+          "code": "<Rating Value=\"3\" ReadOnly=\"true\" Size=\"Lumeo.Size.Sm\" />\n<Rating Value=\"3\" ReadOnly=\"true\" />\n<Rating Value=\"3\" ReadOnly=\"true\" Size=\"Lumeo.Size.Lg\" />"
         },
         {
           "title": "Read-Only",
@@ -30173,8 +30642,8 @@
         },
         {
           "name": "Size",
-          "type": "ReasoningSize",
-          "default": "ReasoningSize.Medium",
+          "type": "Lumeo.Size",
+          "default": "Lumeo.Size.Md",
           "description": null,
           "isCascading": false,
           "captureUnmatched": false
@@ -30206,15 +30675,6 @@
       ],
       "events": [],
       "enums": [
-        {
-          "name": "ReasoningSize",
-          "values": [
-            "Small",
-            "Medium",
-            "Large"
-          ],
-          "description": null
-        },
         {
           "name": "ReasoningVariant",
           "values": [
@@ -30326,15 +30786,15 @@
       "examples": [
         {
           "title": "Horizontal",
-          "code": "<ResizablePanelGroup Direction=\"ResizablePanelGroup.ResizableDirection.Horizontal\"\n                       DefaultSizes=\"@(new double[] { 50, 50 })\" Class=\"min-h-[200px] rounded-lg border\">\n    <ResizablePanel Order=\"0\">\n        <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Panel One</span>\n        </div>\n    </ResizablePanel>\n    <ResizableHandle PanelIndex=\"0\" WithHandle=\"true\" />\n    <ResizablePanel Order=\"1\">\n        <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Panel Two</span>\n        </div>\n    </ResizablePanel>\n</ResizablePanelGroup>"
+          "code": "<ResizablePanelGroup Direction=\"Lumeo.Orientation.Horizontal\"\n                       DefaultSizes=\"@(new double[] { 50, 50 })\" Class=\"min-h-[200px] rounded-lg border\">\n    <ResizablePanel Order=\"0\">\n        <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Panel One</span>\n        </div>\n    </ResizablePanel>\n    <ResizableHandle PanelIndex=\"0\" WithHandle=\"true\" />\n    <ResizablePanel Order=\"1\">\n        <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Panel Two</span>\n        </div>\n    </ResizablePanel>\n</ResizablePanelGroup>"
         },
         {
           "title": "Vertical",
-          "code": "<ResizablePanelGroup Direction=\"ResizablePanelGroup.ResizableDirection.Vertical\"\n                       DefaultSizes=\"@(new double[] { 40, 60 })\" Class=\"min-h-[300px] rounded-lg border\">\n    <ResizablePanel Order=\"0\">\n        <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Top</span>\n        </div>\n    </ResizablePanel>\n    <ResizableHandle PanelIndex=\"0\" WithHandle=\"true\" />\n    <ResizablePanel Order=\"1\">\n        <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Bottom</span>\n        </div>\n    </ResizablePanel>\n</ResizablePanelGroup>"
+          "code": "<ResizablePanelGroup Direction=\"Lumeo.Orientation.Vertical\"\n                       DefaultSizes=\"@(new double[] { 40, 60 })\" Class=\"min-h-[300px] rounded-lg border\">\n    <ResizablePanel Order=\"0\">\n        <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Top</span>\n        </div>\n    </ResizablePanel>\n    <ResizableHandle PanelIndex=\"0\" WithHandle=\"true\" />\n    <ResizablePanel Order=\"1\">\n        <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Bottom</span>\n        </div>\n    </ResizablePanel>\n</ResizablePanelGroup>"
         },
         {
           "title": "Three Panels",
-          "code": "<ResizablePanelGroup Direction=\"ResizablePanelGroup.ResizableDirection.Horizontal\"\n                       DefaultSizes=\"@(new double[] { 25, 50, 25 })\" Class=\"min-h-[200px] rounded-lg border\">\n    <ResizablePanel Order=\"0\">\n        <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Sidebar</span>\n        </div>\n    </ResizablePanel>\n    <ResizableHandle PanelIndex=\"0\" WithHandle=\"true\" />\n    <ResizablePanel Order=\"1\">\n        <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Content</span>\n        </div>\n    </ResizablePanel>\n    <ResizableHandle PanelIndex=\"1\" WithHandle=\"true\" />\n    <ResizablePanel Order=\"2\">\n        <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Panel</span>\n        </div>\n    </ResizablePanel>\n</ResizablePanelGroup>"
+          "code": "<ResizablePanelGroup Direction=\"Lumeo.Orientation.Horizontal\"\n                       DefaultSizes=\"@(new double[] { 25, 50, 25 })\" Class=\"min-h-[200px] rounded-lg border\">\n    <ResizablePanel Order=\"0\">\n        <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Sidebar</span>\n        </div>\n    </ResizablePanel>\n    <ResizableHandle PanelIndex=\"0\" WithHandle=\"true\" />\n    <ResizablePanel Order=\"1\">\n        <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Content</span>\n        </div>\n    </ResizablePanel>\n    <ResizableHandle PanelIndex=\"1\" WithHandle=\"true\" />\n    <ResizablePanel Order=\"2\">\n        <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Panel</span>\n        </div>\n    </ResizablePanel>\n</ResizablePanelGroup>"
         }
       ],
       "subComponents": {
@@ -30435,8 +30895,8 @@
             },
             {
               "name": "Direction",
-              "type": "ResizableDirection",
-              "default": "ResizableDirection.Horizontal",
+              "type": "Lumeo.Orientation",
+              "default": "Lumeo.Orientation.Horizontal",
               "description": null,
               "isCascading": false,
               "captureUnmatched": false
@@ -30467,20 +30927,11 @@
             }
           ],
           "events": [],
-          "enums": [
-            {
-              "name": "ResizableDirection",
-              "values": [
-                "Horizontal",
-                "Vertical"
-              ],
-              "description": null
-            }
-          ],
+          "enums": [],
           "records": [
             {
               "name": "ResizablePanelGroupContext",
-              "signature": "ResizablePanelGroupContext(\n        string GroupId,\n        ResizableDirection Direction,\n        EventCallback<(int PanelIndex, double Delta)> OnHandleDrag,\n        Func<int, double> GetPanelSize,\n        int PanelCount,\n        Action<int, double, double> RegisterPanel\n    )",
+              "signature": "ResizablePanelGroupContext(\n        string GroupId,\n        Lumeo.Orientation Direction,\n        EventCallback<(int PanelIndex, double Delta)> OnHandleDrag,\n        Func<int, double> GetPanelSize,\n        int PanelCount,\n        Action<int, double, double> RegisterPanel\n    )",
               "description": null
             }
           ],
@@ -30514,8 +30965,8 @@
         },
         {
           "name": "Size",
-          "type": "ResultSize",
-          "default": "ResultSize.Medium",
+          "type": "Lumeo.Size",
+          "default": "Lumeo.Size.Md",
           "description": null,
           "isCascading": false,
           "captureUnmatched": false
@@ -32809,8 +33260,8 @@
       "parameters": [
         {
           "name": "Orientation",
-          "type": "SeparatorOrientation",
-          "default": "SeparatorOrientation.Horizontal",
+          "type": "Lumeo.Orientation",
+          "default": "Lumeo.Orientation.Horizontal",
           "description": null,
           "isCascading": false,
           "captureUnmatched": false
@@ -32841,16 +33292,7 @@
         }
       ],
       "events": [],
-      "enums": [
-        {
-          "name": "SeparatorOrientation",
-          "values": [
-            "Horizontal",
-            "Vertical"
-          ],
-          "description": null
-        }
-      ],
+      "enums": [],
       "records": [],
       "cssVars": [
         "--color-border",
@@ -32860,7 +33302,7 @@
       "examples": [
         {
           "title": "Horizontal",
-          "code": "<Stack Gap=\"1\">\n    <Heading Level=\"4\" Size=\"sm\" Weight=\"medium\" Class=\"leading-none\">Lumeo UI</Heading>\n    <Lumeo.Text Size=\"sm\" Color=\"muted\">An open-source component library for Blazor.</Lumeo.Text>\n</Stack>\n<Separator Class=\"my-4\" />\n<Flex Gap=\"4\" Align=\"center\" Class=\"h-5 text-sm\">\n    <Lumeo.Text As=\"span\" Size=\"sm\">Docs</Lumeo.Text>\n    <Separator Orientation=\"Separator.SeparatorOrientation.Vertical\" />\n    <Lumeo.Text As=\"span\" Size=\"sm\">Source</Lumeo.Text>\n    <Separator Orientation=\"Separator.SeparatorOrientation.Vertical\" />\n    <Lumeo.Text As=\"span\" Size=\"sm\">Blog</Lumeo.Text>\n</Flex>"
+          "code": "<Stack Gap=\"1\">\n    <Heading Level=\"4\" Size=\"sm\" Weight=\"medium\" Class=\"leading-none\">Lumeo UI</Heading>\n    <Lumeo.Text Size=\"sm\" Color=\"muted\">An open-source component library for Blazor.</Lumeo.Text>\n</Stack>\n<Separator Class=\"my-4\" />\n<Flex Gap=\"4\" Align=\"center\" Class=\"h-5 text-sm\">\n    <Lumeo.Text As=\"span\" Size=\"sm\">Docs</Lumeo.Text>\n    <Separator Orientation=\"Lumeo.Orientation.Vertical\" />\n    <Lumeo.Text As=\"span\" Size=\"sm\">Source</Lumeo.Text>\n    <Separator Orientation=\"Lumeo.Orientation.Vertical\" />\n    <Lumeo.Text As=\"span\" Size=\"sm\">Blog</Lumeo.Text>\n</Flex>"
         },
         {
           "title": "In a Card",
@@ -32868,7 +33310,7 @@
         },
         {
           "title": "Vertical",
-          "code": "<Flex Gap=\"4\" Align=\"center\" Class=\"h-5 text-sm\">\n    <Lumeo.Text As=\"span\" Size=\"sm\">Home</Lumeo.Text>\n    <Separator Orientation=\"Separator.SeparatorOrientation.Vertical\" />\n    <Lumeo.Text As=\"span\" Size=\"sm\">Components</Lumeo.Text>\n    <Separator Orientation=\"Separator.SeparatorOrientation.Vertical\" />\n    <Lumeo.Text As=\"span\" Size=\"sm\">Themes</Lumeo.Text>\n    <Separator Orientation=\"Separator.SeparatorOrientation.Vertical\" />\n    <Lumeo.Text As=\"span\" Size=\"sm\">GitHub</Lumeo.Text>\n</Flex>"
+          "code": "<Flex Gap=\"4\" Align=\"center\" Class=\"h-5 text-sm\">\n    <Lumeo.Text As=\"span\" Size=\"sm\">Home</Lumeo.Text>\n    <Separator Orientation=\"Lumeo.Orientation.Vertical\" />\n    <Lumeo.Text As=\"span\" Size=\"sm\">Components</Lumeo.Text>\n    <Separator Orientation=\"Lumeo.Orientation.Vertical\" />\n    <Lumeo.Text As=\"span\" Size=\"sm\">Themes</Lumeo.Text>\n    <Separator Orientation=\"Lumeo.Orientation.Vertical\" />\n    <Lumeo.Text As=\"span\" Size=\"sm\">GitHub</Lumeo.Text>\n</Flex>"
         },
         {
           "title": "With Label",
@@ -32923,6 +33365,14 @@
           "isCascading": false,
           "captureUnmatched": false
         },
+        {
+          "name": "OnBeforeClose",
+          "type": "EventCallback<DismissEventArgs>",
+          "default": null,
+          "description": "Fires before any user-initiated dismiss (Escape, backdrop click, swipe gesture, X button, or a SheetClose trigger). Set Cancel to true to abort. The Reason tells you which path fired (\"escape\", \"outside\", \"swipe\", \"close\").",
+          "isCascading": false,
+          "captureUnmatched": false
+        },
         {
           "name": "IsOpen",
           "type": "bool",
@@ -32946,6 +33396,11 @@
           "type": "EventCallback<bool>",
           "description": null
         },
+        {
+          "name": "OnBeforeClose",
+          "type": "EventCallback<DismissEventArgs>",
+          "description": "Fires before any user-initiated dismiss (Escape, backdrop click, swipe gesture, X button, or a SheetClose trigger). Set Cancel to true to abort. The Reason tells you which path fired (\"escape\", \"outside\", \"swipe\", \"close\")."
+        },
         {
           "name": "IsOpenChanged",
           "type": "EventCallback<bool>",
@@ -32956,7 +33411,7 @@
       "records": [
         {
           "name": "SheetContext",
-          "signature": "SheetContext(bool IsOpen, EventCallback<bool> SetOpen, string TitleId, string DescriptionId)",
+          "signature": "SheetContext(bool IsOpen, EventCallback<bool> SetOpen, string TitleId, string DescriptionId, Func<string, Task<bool>> TryDismiss)",
           "description": null
         }
       ],
@@ -32974,7 +33429,7 @@
         },
         {
           "title": "Side Variations",
-          "code": "<Sheet @bind-Open=\"_isTopOpen\">\n    <SheetTrigger>\n        <Button Variant=\"Button.ButtonVariant.Outline\">Top</Button>\n    </SheetTrigger>\n    <SheetContent Side=\"SheetContent.SheetSide.Top\">\n        <SheetHeader>\n            <SheetTitle>Top Sheet</SheetTitle>\n            <SheetDescription>This sheet slides in from the top.</SheetDescription>\n        </SheetHeader>\n    </SheetContent>\n</Sheet>\n\n<Sheet @bind-Open=\"_isLeftOpen\">\n    <SheetTrigger>\n        <Button Variant=\"Button.ButtonVariant.Outline\">Left</Button>\n    </SheetTrigger>\n    <SheetContent Side=\"SheetContent.SheetSide.Left\">\n        <SheetHeader>\n            <SheetTitle>Left Sheet</SheetTitle>\n            <SheetDescription>This sheet slides in from the left.</SheetDescription>\n        </SheetHeader>\n    </SheetContent>\n</Sheet>"
+          "code": "<Sheet @bind-Open=\"_isTopOpen\">\n    <SheetTrigger>\n        <Button Variant=\"Button.ButtonVariant.Outline\">Top</Button>\n    </SheetTrigger>\n    <SheetContent Side=\"Lumeo.Side.Top\">\n        <SheetHeader>\n            <SheetTitle>Top Sheet</SheetTitle>\n            <SheetDescription>This sheet slides in from the top.</SheetDescription>\n        </SheetHeader>\n    </SheetContent>\n</Sheet>\n\n<Sheet @bind-Open=\"_isLeftOpen\">\n    <SheetTrigger>\n        <Button Variant=\"Button.ButtonVariant.Outline\">Left</Button>\n    </SheetTrigger>\n    <SheetContent Side=\"Lumeo.Side.Left\">\n        <SheetHeader>\n            <SheetTitle>Left Sheet</SheetTitle>\n            <SheetDescription>This sheet slides in from the left.</SheetDescription>\n        </SheetHeader>\n    </SheetContent>\n</Sheet>"
         },
         {
           "title": "Sizes",
@@ -33067,8 +33522,8 @@
             },
             {
               "name": "Side",
-              "type": "SheetSide",
-              "default": "SheetSide.Right",
+              "type": "Lumeo.Side",
+              "default": "Lumeo.Side.Right",
               "description": null,
               "isCascading": false,
               "captureUnmatched": false
@@ -33113,6 +33568,14 @@
               "isCascading": false,
               "captureUnmatched": false
             },
+            {
+              "name": "ZIndex",
+              "type": "int",
+              "default": "OverlayService.BaseZIndex",
+              "description": "Backdrop z-index. Content sits at ZIndex + 1. Defaults to BaseZIndex; OverlayProvider supplies an incrementing value per nested overlay.",
+              "isCascading": false,
+              "captureUnmatched": false
+            },
             {
               "name": "AdditionalAttributes",
               "type": "Dictionary<string, object>?",
@@ -33124,16 +33587,6 @@
           ],
           "events": [],
           "enums": [
-            {
-              "name": "SheetSide",
-              "values": [
-                "Top",
-                "Right",
-                "Bottom",
-                "Left"
-              ],
-              "description": null
-            },
             {
               "name": "SheetSize",
               "values": [
@@ -33143,7 +33596,7 @@
                 "Xl",
                 "Full"
               ],
-              "description": null
+              "description": "Sheet sizes. Full is layout-intent (entire viewport), not a scale value, so this enum is intentionally NOT replaced by Size in 3.0."
             },
             {
               "name": "SheetAnimation",
@@ -33560,9 +34013,9 @@
         },
         {
           "name": "Side",
-          "type": "SidebarSide",
-          "default": "SidebarSide.Left",
-          "description": null,
+          "type": "Lumeo.Side",
+          "default": "Lumeo.Side.Left",
+          "description": "Which edge the sidebar anchors to. Only Left and Right are supported; Top/Bottom fall through to the Left default.",
           "isCascading": false,
           "captureUnmatched": false
         },
@@ -33584,16 +34037,7 @@
         }
       ],
       "events": [],
-      "enums": [
-        {
-          "name": "SidebarSide",
-          "values": [
-            "Left",
-            "Right"
-          ],
-          "description": null
-        }
-      ],
+      "enums": [],
       "records": [],
       "cssVars": [
         "--color-accent",
@@ -33616,7 +34060,7 @@
         },
         {
           "title": "Side — interactive",
-          "code": "<Segmented @bind-Value=\"_sidebarSideSel\" Options=\"_sidebarSideOptions\" />\n<SidebarProvider>\n    <SidebarComponent Side=\"@_activeSidebarSide\">\n        <SidebarHeader>...</SidebarHeader>\n        <SidebarContent>...</SidebarContent>\n    </SidebarComponent>\n    <main class=\"flex-1 p-6\">\n        <SidebarTrigger />\n    </main>\n</SidebarProvider>\n\n@code {\n    private string _sidebarSideSel = \"Left\";\n    private SidebarComponent.SidebarSide _activeSidebarSide =>\n        Enum.Parse<SidebarComponent.SidebarSide>(_sidebarSideSel);\n    private List<Segmented.SegmentedOption> _sidebarSideOptions = new()\n    {\n        new() { Label = \"Left\", Value = \"Left\" },\n        new() { Label = \"Right\", Value = \"Right\" },\n    };\n}"
+          "code": "<Segmented @bind-Value=\"_sidebarSideSel\" Options=\"_sidebarSideOptions\" />\n<SidebarProvider>\n    <SidebarComponent Side=\"@_activeSide\">\n        <SidebarHeader>...</SidebarHeader>\n        <SidebarContent>...</SidebarContent>\n    </SidebarComponent>\n    <main class=\"flex-1 p-6\">\n        <SidebarTrigger />\n    </main>\n</SidebarProvider>\n\n@code {\n    private string _sidebarSideSel = \"Left\";\n    private Lumeo.Side _activeSide =>\n        Enum.Parse<Lumeo.Side>(_sidebarSideSel);\n    private List<Segmented.SegmentedOption> _sidebarSideOptions = new()\n    {\n        new() { Label = \"Left\", Value = \"Left\" },\n        new() { Label = \"Right\", Value = \"Right\" },\n    };\n}"
         },
         {
           "title": "Icon",
@@ -34783,7 +35227,7 @@
         },
         {
           "title": "Fixed Size",
-          "code": "<Stack Direction=\"Stack.StackDirection.Horizontal\" Align=\"center\">\n    <Avatar />\n    <Spacer Size=\"4\" />\n    <Stack Gap=\"0\">\n        <Text Weight=\"medium\" Size=\"sm\">Jane Doe</Text>\n        <Text Color=\"muted\" Size=\"xs\">jane@example.com</Text>\n    </Stack>\n</Stack>"
+          "code": "<Stack Direction=\"Lumeo.Orientation.Horizontal\" Align=\"center\">\n    <Avatar />\n    <Spacer Size=\"4\" />\n    <Stack Gap=\"0\">\n        <Text Weight=\"medium\" Size=\"sm\">Jane Doe</Text>\n        <Text Color=\"muted\" Size=\"xs\">jane@example.com</Text>\n    </Stack>\n</Stack>"
         }
       ],
       "subComponents": {},
@@ -34837,8 +35281,8 @@
         },
         {
           "name": "Size",
-          "type": "SparkCardSize",
-          "default": "SparkCardSize.Medium",
+          "type": "Lumeo.Size",
+          "default": "Lumeo.Size.Md",
           "description": null,
           "isCascading": false,
           "captureUnmatched": false
@@ -34870,15 +35314,6 @@
       ],
       "events": [],
       "enums": [
-        {
-          "name": "SparkCardSize",
-          "values": [
-            "Small",
-            "Medium",
-            "Large"
-          ],
-          "description": null
-        },
         {
           "name": "SparkCardVariant",
           "values": [
@@ -35288,8 +35723,8 @@
       "parameters": [
         {
           "name": "Size",
-          "type": "SpinnerSize",
-          "default": "SpinnerSize.Default",
+          "type": "Lumeo.Size",
+          "default": "Lumeo.Size.Md",
           "description": null,
           "isCascading": false,
           "captureUnmatched": false
@@ -35337,15 +35772,6 @@
       ],
       "events": [],
       "enums": [
-        {
-          "name": "SpinnerSize",
-          "values": [
-            "Sm",
-            "Default",
-            "Lg"
-          ],
-          "description": null
-        },
         {
           "name": "SpinnerVariant",
           "values": [
@@ -35365,15 +35791,15 @@
       "examples": [
         {
           "title": "Sizes",
-          "code": "<Spinner Size=\"Spinner.SpinnerSize.Sm\" />\n<Spinner />\n<Spinner Size=\"Spinner.SpinnerSize.Lg\" />"
+          "code": "<Spinner Size=\"Lumeo.Size.Sm\" />\n<Spinner />\n<Spinner Size=\"Lumeo.Size.Lg\" />"
         },
         {
           "title": "With Text",
-          "code": "<Flex Align=\"center\" Gap=\"2\">\n    <Spinner Size=\"Spinner.SpinnerSize.Sm\" />\n    <Lumeo.Text As=\"span\" Size=\"sm\" Color=\"muted\">Loading...</Lumeo.Text>\n</Flex>"
+          "code": "<Flex Align=\"center\" Gap=\"2\">\n    <Spinner Size=\"Lumeo.Size.Sm\" />\n    <Lumeo.Text As=\"span\" Size=\"sm\" Color=\"muted\">Loading...</Lumeo.Text>\n</Flex>"
         },
         {
           "title": "In a Button",
-          "code": "<Button Disabled=\"true\">\n    <Spinner Size=\"Spinner.SpinnerSize.Sm\" Class=\"mr-2\" />\n    Please wait\n</Button>"
+          "code": "<Button Disabled=\"true\">\n    <Spinner Size=\"Lumeo.Size.Sm\" Class=\"mr-2\" />\n    Please wait\n</Button>"
         },
         {
           "title": "Variant — interactive",
@@ -35521,8 +35947,8 @@
       "parameters": [
         {
           "name": "Orientation",
-          "type": "SplitterOrientation",
-          "default": "SplitterOrientation.Horizontal",
+          "type": "Lumeo.Orientation",
+          "default": "Lumeo.Orientation.Horizontal",
           "description": null,
           "isCascading": false,
           "captureUnmatched": false
@@ -35553,20 +35979,11 @@
         }
       ],
       "events": [],
-      "enums": [
-        {
-          "name": "SplitterOrientation",
-          "values": [
-            "Horizontal",
-            "Vertical"
-          ],
-          "description": null
-        }
-      ],
+      "enums": [],
       "records": [
         {
           "name": "SplitterContext",
-          "signature": "SplitterContext(\n        string GroupId,\n        SplitterOrientation Orientation,\n        List<object> Children,\n        Action<object> RegisterChild,\n        Action<object> UnregisterChild,\n        Func<object, double, Task> ResizeNeighbors\n    )",
+          "signature": "SplitterContext(\n        string GroupId,\n        Lumeo.Orientation Orientation,\n        List<object> Children,\n        Action<object> RegisterChild,\n        Action<object> UnregisterChild,\n        Func<object, double, Task> ResizeNeighbors\n    )",
           "description": null
         }
       ],
@@ -35578,19 +35995,19 @@
       "examples": [
         {
           "title": "Two Panes — Horizontal",
-          "code": "<Splitter Orientation=\"Splitter.SplitterOrientation.Horizontal\"\n          Class=\"min-h-[200px] rounded-lg border\">\n    <SplitterPane Size=\"50\">Left</SplitterPane>\n    <SplitterDivider />\n    <SplitterPane Size=\"50\">Right</SplitterPane>\n</Splitter>"
+          "code": "<Splitter Orientation=\"Lumeo.Orientation.Horizontal\"\n          Class=\"min-h-[200px] rounded-lg border\">\n    <SplitterPane Size=\"50\">Left</SplitterPane>\n    <SplitterDivider />\n    <SplitterPane Size=\"50\">Right</SplitterPane>\n</Splitter>"
         },
         {
           "title": "Three Panes — Sidebar + Main + Aside",
-          "code": "<Splitter Orientation=\"Splitter.SplitterOrientation.Horizontal\"\n          Class=\"min-h-[260px] rounded-lg border\">\n    <SplitterPane Size=\"20\" MinSize=\"10\">Sidebar</SplitterPane>\n    <SplitterDivider />\n    <SplitterPane Size=\"55\">Main</SplitterPane>\n    <SplitterDivider />\n    <SplitterPane Size=\"25\" MinSize=\"10\">Aside</SplitterPane>\n</Splitter>"
+          "code": "<Splitter Orientation=\"Lumeo.Orientation.Horizontal\"\n          Class=\"min-h-[260px] rounded-lg border\">\n    <SplitterPane Size=\"20\" MinSize=\"10\">Sidebar</SplitterPane>\n    <SplitterDivider />\n    <SplitterPane Size=\"55\">Main</SplitterPane>\n    <SplitterDivider />\n    <SplitterPane Size=\"25\" MinSize=\"10\">Aside</SplitterPane>\n</Splitter>"
         },
         {
           "title": "Vertical Stack",
-          "code": "<Splitter Orientation=\"Splitter.SplitterOrientation.Vertical\"\n          Class=\"h-[320px] rounded-lg border\">\n    <SplitterPane Size=\"60\">Editor</SplitterPane>\n    <SplitterDivider />\n    <SplitterPane Size=\"40\">Terminal</SplitterPane>\n</Splitter>"
+          "code": "<Splitter Orientation=\"Lumeo.Orientation.Vertical\"\n          Class=\"h-[320px] rounded-lg border\">\n    <SplitterPane Size=\"60\">Editor</SplitterPane>\n    <SplitterDivider />\n    <SplitterPane Size=\"40\">Terminal</SplitterPane>\n</Splitter>"
         },
         {
           "title": "Nested — Horizontal containing Vertical",
-          "code": "<Splitter Orientation=\"Splitter.SplitterOrientation.Horizontal\"\n          Class=\"h-[360px] rounded-lg border\">\n    <SplitterPane Size=\"25\">Files</SplitterPane>\n    <SplitterDivider />\n    <SplitterPane Size=\"75\">\n        <Splitter Orientation=\"Splitter.SplitterOrientation.Vertical\" Class=\"h-full\">\n            <SplitterPane Size=\"65\">Code</SplitterPane>\n            <SplitterDivider />\n            <SplitterPane Size=\"35\">Output</SplitterPane>\n        </Splitter>\n    </SplitterPane>\n</Splitter>"
+          "code": "<Splitter Orientation=\"Lumeo.Orientation.Horizontal\"\n          Class=\"h-[360px] rounded-lg border\">\n    <SplitterPane Size=\"25\">Files</SplitterPane>\n    <SplitterDivider />\n    <SplitterPane Size=\"75\">\n        <Splitter Orientation=\"Lumeo.Orientation.Vertical\" Class=\"h-full\">\n            <SplitterPane Size=\"65\">Code</SplitterPane>\n            <SplitterDivider />\n            <SplitterPane Size=\"35\">Output</SplitterPane>\n        </Splitter>\n    </SplitterPane>\n</Splitter>"
         }
       ],
       "subComponents": {
@@ -35733,8 +36150,8 @@
       "parameters": [
         {
           "name": "Direction",
-          "type": "StackDirection",
-          "default": "StackDirection.Vertical",
+          "type": "Lumeo.Orientation",
+          "default": "Lumeo.Orientation.Vertical",
           "description": null,
           "isCascading": false,
           "captureUnmatched": false
@@ -35797,16 +36214,7 @@
         }
       ],
       "events": [],
-      "enums": [
-        {
-          "name": "StackDirection",
-          "values": [
-            "Vertical",
-            "Horizontal"
-          ],
-          "description": null
-        }
-      ],
+      "enums": [],
       "records": [],
       "cssVars": [
         "--color-foreground"
@@ -35818,15 +36226,15 @@
         },
         {
           "title": "Horizontal",
-          "code": "<Stack Direction=\"Stack.StackDirection.Horizontal\" Gap=\"3\">\n    <div>Item 1</div>\n    <div>Item 2</div>\n    <div>Item 3</div>\n</Stack>"
+          "code": "<Stack Direction=\"Lumeo.Orientation.Horizontal\" Gap=\"3\">\n    <div>Item 1</div>\n    <div>Item 2</div>\n    <div>Item 3</div>\n</Stack>"
         },
         {
           "title": "Gap Sizes",
-          "code": "<Stack Direction=\"Stack.StackDirection.Horizontal\" Gap=\"1\">...</Stack>\n<Stack Direction=\"Stack.StackDirection.Horizontal\" Gap=\"4\">...</Stack>\n<Stack Direction=\"Stack.StackDirection.Horizontal\" Gap=\"8\">...</Stack>"
+          "code": "<Stack Direction=\"Lumeo.Orientation.Horizontal\" Gap=\"1\">...</Stack>\n<Stack Direction=\"Lumeo.Orientation.Horizontal\" Gap=\"4\">...</Stack>\n<Stack Direction=\"Lumeo.Orientation.Horizontal\" Gap=\"8\">...</Stack>"
         },
         {
           "title": "Alignment",
-          "code": "<Stack Direction=\"Stack.StackDirection.Horizontal\" Gap=\"4\" Align=\"center\" Justify=\"between\" Class=\"w-full\">\n    <div>Item 1</div>\n    <div>Item 2</div>\n    <div>Item 3</div>\n</Stack>"
+          "code": "<Stack Direction=\"Lumeo.Orientation.Horizontal\" Gap=\"4\" Align=\"center\" Justify=\"between\" Class=\"w-full\">\n    <div>Item 1</div>\n    <div>Item 2</div>\n    <div>Item 3</div>\n</Stack>"
         }
       ],
       "subComponents": {},
@@ -35920,8 +36328,8 @@
         },
         {
           "name": "Size",
-          "type": "StatisticSize",
-          "default": "StatisticSize.Medium",
+          "type": "Lumeo.Size",
+          "default": "Lumeo.Size.Md",
           "description": null,
           "isCascading": false,
           "captureUnmatched": false
@@ -35961,15 +36369,6 @@
           ],
           "description": null
         },
-        {
-          "name": "StatisticSize",
-          "values": [
-            "Small",
-            "Medium",
-            "Large"
-          ],
-          "description": null
-        },
         {
           "name": "StatisticVariant",
           "values": [
@@ -36000,7 +36399,7 @@
         },
         {
           "title": "Size (interactive)",
-          "code": "<Segmented @bind-Value=\"_size\">\n    <SegmentedItem Value=\"@Statistic.StatisticSize.Small\">Small</SegmentedItem>\n    <SegmentedItem Value=\"@Statistic.StatisticSize.Medium\">Medium</SegmentedItem>\n    <SegmentedItem Value=\"@Statistic.StatisticSize.Large\">Large</SegmentedItem>\n</Segmented>\n<Statistic Title=\"Monthly Revenue\" Value=\"48,290\" Size=\"@_size\" ShowTrend=\"true\" TrendValue=\"+12%\" TrendDirection=\"Statistic.TrendType.Up\">\n    <Prefix><Lumeo.Text As=\"span\">$</Lumeo.Text></Prefix>\n</Statistic>\n\n@code { private Statistic.StatisticSize _size = Statistic.StatisticSize.Medium; }"
+          "code": "<Segmented @bind-Value=\"_size\">\n    <SegmentedItem Value=\"@Lumeo.Size.Sm\">Small</SegmentedItem>\n    <SegmentedItem Value=\"@Lumeo.Size.Md\">Medium</SegmentedItem>\n    <SegmentedItem Value=\"@Lumeo.Size.Lg\">Large</SegmentedItem>\n</Segmented>\n<Statistic Title=\"Monthly Revenue\" Value=\"48,290\" Size=\"@_size\" ShowTrend=\"true\" TrendValue=\"+12%\" TrendDirection=\"Statistic.TrendType.Up\">\n    <Prefix><Lumeo.Text As=\"span\">$</Lumeo.Text></Prefix>\n</Statistic>\n\n@code { private Lumeo.Size _size = Lumeo.Size.Md; }"
         },
         {
           "title": "Variant (interactive)",
@@ -36051,8 +36450,8 @@
         },
         {
           "name": "Orientation",
-          "type": "StepperOrientation",
-          "default": "StepperOrientation.Horizontal",
+          "type": "Lumeo.Orientation",
+          "default": "Lumeo.Orientation.Horizontal",
           "description": null,
           "isCascading": false,
           "captureUnmatched": false
@@ -36134,20 +36533,11 @@
           "description": null
         }
       ],
-      "enums": [
-        {
-          "name": "StepperOrientation",
-          "values": [
-            "Horizontal",
-            "Vertical"
-          ],
-          "description": null
-        }
-      ],
+      "enums": [],
       "records": [
         {
           "name": "StepperContext",
-          "signature": "StepperContext(\n        int ActiveStep,\n        EventCallback<int> SetActiveStep,\n        StepperOrientation Orientation,\n        bool Linear,\n        int StepCount,\n        Stepper Parent)",
+          "signature": "StepperContext(\n        int ActiveStep,\n        EventCallback<int> SetActiveStep,\n        Lumeo.Orientation Orientation,\n        bool Linear,\n        int StepCount,\n        Stepper Parent)",
           "description": null
         }
       ],
@@ -36174,11 +36564,11 @@
         },
         {
           "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>"
+          "code": "<Stepper @bind-ActiveStep=\"_step\" Orientation=\"Lumeo.Orientation.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}"
+          "code": "<Segmented @bind-Value=\"_orientationSel\" Options=\"_orientationOptions\" />\n<Stepper @bind-ActiveStep=\"_step\" Orientation=\"@_activeOrientation\">\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 Lumeo.Orientation _activeOrientation =>\n        Enum.Parse<Lumeo.Orientation>(_orientationSel);\n    private List<Segmented.SegmentedOption> _orientationOptions = new()\n    {\n        new() { Label = \"Horizontal\", Value = \"Horizontal\" },\n        new() { Label = \"Vertical\", Value = \"Vertical\" },\n    };\n}"
         }
       ],
       "subComponents": {
@@ -36342,8 +36732,8 @@
         },
         {
           "name": "Orientation",
-          "type": "StepsOrientation",
-          "default": "StepsOrientation.Horizontal",
+          "type": "Lumeo.Orientation",
+          "default": "Lumeo.Orientation.Horizontal",
           "description": null,
           "isCascading": false,
           "captureUnmatched": false
@@ -36381,27 +36771,19 @@
         }
       ],
       "enums": [
-        {
-          "name": "StepsOrientation",
-          "values": [
-            "Horizontal",
-            "Vertical"
-          ],
-          "description": null
-        },
         {
           "name": "StepsDirection",
           "values": [
             "Forward",
             "Backward"
           ],
-          "description": null
+          "description": "Direction of the user's most recent step transition. Drives the animated connector keyframes (forward draw vs reverse unwind). Component-specific (not a navigation direction in the cardinal sense), so intentionally NOT replaced by Side."
         }
       ],
       "records": [
         {
           "name": "StepsContext",
-          "signature": "StepsContext(int CurrentStep, bool Clickable, EventCallback<int> OnStepClick, StepsOrientation Orientation, bool Animated, StepsDirection Direction, int ReplayKey, Steps Parent)",
+          "signature": "StepsContext(int CurrentStep, bool Clickable, EventCallback<int> OnStepClick, Lumeo.Orientation Orientation, bool Animated, StepsDirection Direction, int ReplayKey, Steps Parent)",
           "description": null
         }
       ],
@@ -36428,11 +36810,11 @@
         },
         {
           "title": "Vertical Steps",
-          "code": "<Steps CurrentStep=\"2\" Orientation=\"Steps.StepsOrientation.Vertical\">\n    <StepsItem Title=\"Sign Up\" Description=\"Create an account\" />\n    <StepsItem Title=\"Verify Email\" Description=\"Confirm your email\" />\n    <StepsItem Title=\"Set Password\" Description=\"Choose a password\" />\n    <StepsItem Title=\"Done\" Description=\"Start using the app\" />\n</Steps>"
+          "code": "<Steps CurrentStep=\"2\" Orientation=\"Lumeo.Orientation.Vertical\">\n    <StepsItem Title=\"Sign Up\" Description=\"Create an account\" />\n    <StepsItem Title=\"Verify Email\" Description=\"Confirm your email\" />\n    <StepsItem Title=\"Set Password\" Description=\"Choose a password\" />\n    <StepsItem Title=\"Done\" Description=\"Start using the app\" />\n</Steps>"
         },
         {
           "title": "Orientation (interactive)",
-          "code": "<Segmented @bind-Value=\"_orientation\">\n    <SegmentedItem Value=\"@Steps.StepsOrientation.Horizontal\">Horizontal</SegmentedItem>\n    <SegmentedItem Value=\"@Steps.StepsOrientation.Vertical\">Vertical</SegmentedItem>\n</Segmented>\n<Steps CurrentStep=\"1\" Orientation=\"@_orientation\">\n    <StepsItem Title=\"Account\" Description=\"Create your account\" />\n    <StepsItem Title=\"Profile\" Description=\"Set up your profile\" />\n    <StepsItem Title=\"Payment\" Description=\"Add billing info\" />\n    <StepsItem Title=\"Done\" Description=\"All finished\" />\n</Steps>\n\n@code { private Steps.StepsOrientation _orientation = Steps.StepsOrientation.Horizontal; }"
+          "code": "<Segmented @bind-Value=\"_orientation\">\n    <SegmentedItem Value=\"@Lumeo.Orientation.Horizontal\">Horizontal</SegmentedItem>\n    <SegmentedItem Value=\"@Lumeo.Orientation.Vertical\">Vertical</SegmentedItem>\n</Segmented>\n<Steps CurrentStep=\"1\" Orientation=\"@_orientation\">\n    <StepsItem Title=\"Account\" Description=\"Create your account\" />\n    <StepsItem Title=\"Profile\" Description=\"Set up your profile\" />\n    <StepsItem Title=\"Payment\" Description=\"Add billing info\" />\n    <StepsItem Title=\"Done\" Description=\"All finished\" />\n</Steps>\n\n@code { private Lumeo.Orientation _orientation = Lumeo.Orientation.Horizontal; }"
         }
       ],
       "subComponents": {
@@ -36821,9 +37203,9 @@
         },
         {
           "name": "Size",
-          "type": "SwitchSize",
-          "default": "SwitchSize.Default",
-          "description": null,
+          "type": "Lumeo.Size",
+          "default": "Lumeo.Size.Md",
+          "description": "Switch size. Supports Sm, Md (default), Lg.",
           "isCascading": false,
           "captureUnmatched": false
         },
@@ -36867,17 +37249,7 @@
           "description": null
         }
       ],
-      "enums": [
-        {
-          "name": "SwitchSize",
-          "values": [
-            "Sm",
-            "Default",
-            "Lg"
-          ],
-          "description": null
-        }
-      ],
+      "enums": [],
       "records": [],
       "cssVars": [
         "--color-background",
@@ -37223,7 +37595,9 @@
       "files": [
         "UI/Tabs/Tabs.razor",
         "UI/Tabs/TabsContent.razor",
+        "UI/Tabs/TabsLayout.cs",
         "UI/Tabs/TabsList.razor",
+        "UI/Tabs/TabsReorderEventArgs.cs",
         "UI/Tabs/TabsTrigger.razor"
       ],
       "namespace": "Lumeo",
@@ -37256,8 +37630,8 @@
         },
         {
           "name": "Orientation",
-          "type": "TabsOrientation",
-          "default": "TabsOrientation.Horizontal",
+          "type": "Lumeo.Orientation",
+          "default": "Lumeo.Orientation.Horizontal",
           "description": null,
           "isCascading": false,
           "captureUnmatched": false
@@ -37327,14 +37701,6 @@
         }
       ],
       "enums": [
-        {
-          "name": "TabsOrientation",
-          "values": [
-            "Horizontal",
-            "Vertical"
-          ],
-          "description": null
-        },
         {
           "name": "TabsVariant",
           "values": [
@@ -37357,7 +37723,7 @@
       "records": [
         {
           "name": "TabsContext",
-          "signature": "TabsContext(\n        string ActiveValue,\n        EventCallback<string> SetValue,\n        TabsOrientation Orientation,\n        TabsVariant Variant,\n        Dictionary<string, (string TabId, string PanelId)> TabIds,\n        bool AnimatedIndicator,\n        TabsRenderMode RenderMode,\n        HashSet<string> ActivatedValues,\n        bool SwipeEnabled,\n        bool SwipeWrap,\n        Action<string> RegisterContent,\n        Func<string, Task> SwipeNavigate)",
+          "signature": "TabsContext(\n        string ActiveValue,\n        EventCallback<string> SetValue,\n        Lumeo.Orientation Orientation,\n        TabsVariant Variant,\n        Dictionary<string, (string TabId, string PanelId)> TabIds,\n        bool AnimatedIndicator,\n        TabsRenderMode RenderMode,\n        HashSet<string> ActivatedValues,\n        bool SwipeEnabled,\n        bool SwipeWrap,\n        Action<string> RegisterContent,\n        Func<string, Task> SwipeNavigate,\n        TabsReorderState Reorder)",
           "description": null
         }
       ],
@@ -37384,7 +37750,7 @@
         },
         {
           "title": "Vertical Tabs",
-          "code": "<Tabs Orientation=\"Tabs.TabsOrientation.Vertical\" @bind-ActiveValue=\"_verticalTab\" Class=\"flex gap-4\">\n    <TabsList>\n        <TabsTrigger Value=\"account\">Account</TabsTrigger>\n        <TabsTrigger Value=\"security\">Security</TabsTrigger>\n        <TabsTrigger Value=\"notifications\">Notifications</TabsTrigger>\n    </TabsList>\n    <div class=\"flex-1\">\n        <TabsContent Value=\"account\">\n            <Card>\n                <CardHeader><CardTitle>Account</CardTitle><CardDescription>Manage your account settings.</CardDescription></CardHeader>\n                <CardContent><Lumeo.Text Size=\"sm\" Color=\"muted\">Account settings content goes here.</Lumeo.Text></CardContent>\n            </Card>\n        </TabsContent>\n        <TabsContent Value=\"security\">\n            <Card>\n                <CardHeader><CardTitle>Security</CardTitle><CardDescription>Update your security preferences.</CardDescription></CardHeader>\n                <CardContent><Lumeo.Text Size=\"sm\" Color=\"muted\">Security settings content goes here.</Lumeo.Text></CardContent>\n            </Card>\n        </TabsContent>\n        <TabsContent Value=\"notifications\">\n            <Card>\n                <CardHeader><CardTitle>Notifications</CardTitle><CardDescription>Configure notification preferences.</CardDescription></CardHeader>\n                <CardContent><Lumeo.Text Size=\"sm\" Color=\"muted\">Notification settings content goes here.</Lumeo.Text></CardContent>\n            </Card>\n        </TabsContent>\n    </div>\n</Tabs>\n\n@code {\n    private string _verticalTab = \"account\";\n}"
+          "code": "<Tabs Orientation=\"Lumeo.Orientation.Vertical\" @bind-ActiveValue=\"_verticalTab\" Class=\"flex gap-4\">\n    <TabsList>\n        <TabsTrigger Value=\"account\">Account</TabsTrigger>\n        <TabsTrigger Value=\"security\">Security</TabsTrigger>\n        <TabsTrigger Value=\"notifications\">Notifications</TabsTrigger>\n    </TabsList>\n    <div class=\"flex-1\">\n        <TabsContent Value=\"account\">\n            <Card>\n                <CardHeader><CardTitle>Account</CardTitle><CardDescription>Manage your account settings.</CardDescription></CardHeader>\n                <CardContent><Lumeo.Text Size=\"sm\" Color=\"muted\">Account settings content goes here.</Lumeo.Text></CardContent>\n            </Card>\n        </TabsContent>\n        <TabsContent Value=\"security\">\n            <Card>\n                <CardHeader><CardTitle>Security</CardTitle><CardDescription>Update your security preferences.</CardDescription></CardHeader>\n                <CardContent><Lumeo.Text Size=\"sm\" Color=\"muted\">Security settings content goes here.</Lumeo.Text></CardContent>\n            </Card>\n        </TabsContent>\n        <TabsContent Value=\"notifications\">\n            <Card>\n                <CardHeader><CardTitle>Notifications</CardTitle><CardDescription>Configure notification preferences.</CardDescription></CardHeader>\n                <CardContent><Lumeo.Text Size=\"sm\" Color=\"muted\">Notification settings content goes here.</Lumeo.Text></CardContent>\n            </Card>\n        </TabsContent>\n    </div>\n</Tabs>\n\n@code {\n    private string _verticalTab = \"account\";\n}"
         },
         {
           "title": "Simple",
@@ -37497,6 +37863,38 @@
               "isCascading": false,
               "captureUnmatched": false
             },
+            {
+              "name": "Reorderable",
+              "type": "bool",
+              "default": null,
+              "description": "When true, each enabled TabsTrigger becomes draggable (HTML5 drag-and-drop on desktop, touch drag on mobile). On a successful reorder the library raises OnReorder with the from/to indices and moved value — the library does NOT mutate the order. The consumer's handler is responsible for updating the underlying collection and re-rendering.",
+              "isCascading": false,
+              "captureUnmatched": false
+            },
+            {
+              "name": "OnReorder",
+              "type": "EventCallback<TabsReorderEventArgs>",
+              "default": null,
+              "description": "Fires when the user drops a dragged TabsTrigger on a new position. Only meaningful when Reorderable is true.",
+              "isCascading": false,
+              "captureUnmatched": false
+            },
+            {
+              "name": "SavedLayout",
+              "type": "TabsLayout?",
+              "default": null,
+              "description": "Optional previously-persisted tab ordering. The library does not mutate the consumer's backing collection on its own — pass this to your parent component on init and apply Order to your collection before rendering. Mirrors DataGrid's SavedLayout parameter and pairs with OnLayoutChanged to round-trip the order through your storage of choice.",
+              "isCascading": false,
+              "captureUnmatched": false
+            },
+            {
+              "name": "OnLayoutChanged",
+              "type": "EventCallback<TabsLayout>",
+              "default": null,
+              "description": "Fires immediately after each successful reorder with the post-drop tab order, so the consumer can persist it (e.g. to local storage). The snapshot reflects the order the consumer's collection will have once it applies the corresponding OnReorder. Only meaningful when Reorderable is true. Pairs with SavedLayout to round-trip the order through storage.",
+              "isCascading": false,
+              "captureUnmatched": false
+            },
             {
               "name": "Class",
               "type": "string?",
@@ -37514,7 +37912,18 @@
               "captureUnmatched": true
             }
           ],
-          "events": [],
+          "events": [
+            {
+              "name": "OnReorder",
+              "type": "EventCallback<TabsReorderEventArgs>",
+              "description": "Fires when the user drops a dragged TabsTrigger on a new position. Only meaningful when Reorderable is true."
+            },
+            {
+              "name": "OnLayoutChanged",
+              "type": "EventCallback<TabsLayout>",
+              "description": "Fires immediately after each successful reorder with the post-drop tab order, so the consumer can persist it (e.g. to local storage). The snapshot reflects the order the consumer's collection will have once it applies the corresponding OnReorder. Only meaningful when Reorderable is true. Pairs with SavedLayout to round-trip the order through storage."
+            }
+          ],
           "enums": [],
           "records": [],
           "parseFailed": false,
@@ -38452,8 +38861,8 @@
         },
         {
           "name": "Orientation",
-          "type": "TimelineOrientation",
-          "default": "TimelineOrientation.Vertical",
+          "type": "Lumeo.Orientation",
+          "default": "Lumeo.Orientation.Vertical",
           "description": null,
           "isCascading": false,
           "captureUnmatched": false
@@ -38506,20 +38915,11 @@
           "description": "Two-way binding callback for ActiveIndex."
         }
       ],
-      "enums": [
-        {
-          "name": "TimelineOrientation",
-          "values": [
-            "Vertical",
-            "Horizontal"
-          ],
-          "description": null
-        }
-      ],
+      "enums": [],
       "records": [
         {
           "name": "TimelineContext",
-          "signature": "TimelineContext(TimelineOrientation Orientation, bool Animated, int? ActiveIndex, int? PreviousActiveIndex, int ReplayKey, Timeline Parent)",
+          "signature": "TimelineContext(Lumeo.Orientation Orientation, bool Animated, int? ActiveIndex, int? PreviousActiveIndex, int ReplayKey, Timeline Parent)",
           "description": null
         }
       ],
@@ -38544,11 +38944,11 @@
         },
         {
           "title": "Horizontal Timeline",
-          "code": "<Timeline Orientation=\"Timeline.TimelineOrientation.Horizontal\">\n    <TimelineItem Title=\"Step 1\" Description=\"Planning\" />\n    <TimelineItem Title=\"Step 2\" Description=\"Design\" />\n    <TimelineItem Title=\"Step 3\" Description=\"Development\" />\n    <TimelineItem Title=\"Step 4\" Description=\"Launch\" />\n</Timeline>"
+          "code": "<Timeline Orientation=\"Lumeo.Orientation.Horizontal\">\n    <TimelineItem Title=\"Step 1\" Description=\"Planning\" />\n    <TimelineItem Title=\"Step 2\" Description=\"Design\" />\n    <TimelineItem Title=\"Step 3\" Description=\"Development\" />\n    <TimelineItem Title=\"Step 4\" Description=\"Launch\" />\n</Timeline>"
         },
         {
           "title": "Orientation (interactive)",
-          "code": "<Segmented @bind-Value=\"_orientation\">\n    <SegmentedItem Value=\"@Timeline.TimelineOrientation.Vertical\">Vertical</SegmentedItem>\n    <SegmentedItem Value=\"@Timeline.TimelineOrientation.Horizontal\">Horizontal</SegmentedItem>\n</Segmented>\n<Timeline Orientation=\"@_orientation\">\n    <TimelineItem Title=\"Planning\" Description=\"Scope defined\" Time=\"Jan 1\" />\n    <TimelineItem Title=\"Design\" Description=\"Wireframes approved\" Time=\"Jan 8\" />\n    <TimelineItem Title=\"Development\" Description=\"Sprint in progress\" Time=\"Jan 15\" />\n    <TimelineItem Title=\"Launch\" Description=\"Shipped to production\" Time=\"Feb 1\" />\n</Timeline>\n\n@code { private Timeline.TimelineOrientation _orientation = Timeline.TimelineOrientation.Vertical; }"
+          "code": "<Segmented @bind-Value=\"_orientation\">\n    <SegmentedItem Value=\"@Lumeo.Orientation.Vertical\">Vertical</SegmentedItem>\n    <SegmentedItem Value=\"@Lumeo.Orientation.Horizontal\">Horizontal</SegmentedItem>\n</Segmented>\n<Timeline Orientation=\"@_orientation\">\n    <TimelineItem Title=\"Planning\" Description=\"Scope defined\" Time=\"Jan 1\" />\n    <TimelineItem Title=\"Design\" Description=\"Wireframes approved\" Time=\"Jan 8\" />\n    <TimelineItem Title=\"Development\" Description=\"Sprint in progress\" Time=\"Jan 15\" />\n    <TimelineItem Title=\"Launch\" Description=\"Shipped to production\" Time=\"Feb 1\" />\n</Timeline>\n\n@code { private Lumeo.Orientation _orientation = Lumeo.Orientation.Vertical; }"
         }
       ],
       "subComponents": {
@@ -38986,6 +39386,38 @@
           "isCascading": false,
           "captureUnmatched": false
         },
+        {
+          "name": "OnMouseEnter",
+          "type": "EventCallback",
+          "default": null,
+          "description": null,
+          "isCascading": false,
+          "captureUnmatched": false
+        },
+        {
+          "name": "OnMouseLeave",
+          "type": "EventCallback",
+          "default": null,
+          "description": null,
+          "isCascading": false,
+          "captureUnmatched": false
+        },
+        {
+          "name": "OnFocusIn",
+          "type": "EventCallback",
+          "default": null,
+          "description": null,
+          "isCascading": false,
+          "captureUnmatched": false
+        },
+        {
+          "name": "OnFocusOut",
+          "type": "EventCallback",
+          "default": null,
+          "description": null,
+          "isCascading": false,
+          "captureUnmatched": false
+        },
         {
           "name": "AdditionalAttributes",
           "type": "Dictionary<string, object>?",
@@ -38995,7 +39427,28 @@
           "captureUnmatched": true
         }
       ],
-      "events": [],
+      "events": [
+        {
+          "name": "OnMouseEnter",
+          "type": "EventCallback",
+          "description": null
+        },
+        {
+          "name": "OnMouseLeave",
+          "type": "EventCallback",
+          "description": null
+        },
+        {
+          "name": "OnFocusIn",
+          "type": "EventCallback",
+          "description": null
+        },
+        {
+          "name": "OnFocusOut",
+          "type": "EventCallback",
+          "description": null
+        }
+      ],
       "enums": [],
       "records": [],
       "cssVars": [
@@ -39363,8 +39816,8 @@
         },
         {
           "name": "Size",
-          "type": "ToggleSize",
-          "default": "ToggleSize.Default",
+          "type": "Lumeo.Size",
+          "default": "Lumeo.Size.Md",
           "description": null,
           "isCascading": false,
           "captureUnmatched": false
@@ -39417,15 +39870,6 @@
             "Outline"
           ],
           "description": null
-        },
-        {
-          "name": "ToggleSize",
-          "values": [
-            "Default",
-            "Sm",
-            "Lg"
-          ],
-          "description": null
         }
       ],
       "records": [],
@@ -39449,7 +39893,7 @@
         },
         {
           "title": "Sizes",
-          "code": "<Toggle Size=\"Toggle.ToggleSize.Sm\" @bind-Pressed=\"_sm\">\n    <Blazicon Svg=\"Lucide.Bold\" class=\"h-3 w-3\" />\n</Toggle>\n<Toggle @bind-Pressed=\"_md\">\n    <Blazicon Svg=\"Lucide.Bold\" class=\"h-4 w-4\" />\n</Toggle>\n<Toggle Size=\"Toggle.ToggleSize.Lg\" @bind-Pressed=\"_lg\">\n    <Blazicon Svg=\"Lucide.Bold\" class=\"h-5 w-5\" />\n</Toggle>"
+          "code": "<Toggle Size=\"Lumeo.Size.Sm\" @bind-Pressed=\"_sm\">\n    <Blazicon Svg=\"Lucide.Bold\" class=\"h-3 w-3\" />\n</Toggle>\n<Toggle @bind-Pressed=\"_md\">\n    <Blazicon Svg=\"Lucide.Bold\" class=\"h-4 w-4\" />\n</Toggle>\n<Toggle Size=\"Lumeo.Size.Lg\" @bind-Pressed=\"_lg\">\n    <Blazicon Svg=\"Lucide.Bold\" class=\"h-5 w-5\" />\n</Toggle>"
         },
         {
           "title": "With Text",
@@ -39500,8 +39944,8 @@
         },
         {
           "name": "Size",
-          "type": "ToggleGroupSize",
-          "default": "ToggleGroupSize.Default",
+          "type": "Lumeo.Size",
+          "default": "Lumeo.Size.Md",
           "description": null,
           "isCascading": false,
           "captureUnmatched": false
@@ -39583,21 +40027,12 @@
             "Outline"
           ],
           "description": null
-        },
-        {
-          "name": "ToggleGroupSize",
-          "values": [
-            "Default",
-            "Sm",
-            "Lg"
-          ],
-          "description": null
         }
       ],
       "records": [
         {
           "name": "ToggleGroupContext",
-          "signature": "ToggleGroupContext(ToggleGroupType Type, HashSet<string> SelectedItems, ToggleGroupVariant Variant, ToggleGroupSize Size, EventCallback<string> Toggle)",
+          "signature": "ToggleGroupContext(ToggleGroupType Type, HashSet<string> SelectedItems, ToggleGroupVariant Variant, Lumeo.Size Size, EventCallback<string> Toggle)",
           "description": null
         }
       ],
@@ -39625,7 +40060,7 @@
         },
         {
           "title": "Sizes",
-          "code": "<ToggleGroup Type=\"ToggleGroup.ToggleGroupType.Single\" Size=\"ToggleGroup.ToggleGroupSize.Sm\">\n    ...\n</ToggleGroup>\n\n<ToggleGroup Type=\"ToggleGroup.ToggleGroupType.Single\">\n    ...\n</ToggleGroup>\n\n<ToggleGroup Type=\"ToggleGroup.ToggleGroupType.Single\" Size=\"ToggleGroup.ToggleGroupSize.Lg\">\n    ...\n</ToggleGroup>"
+          "code": "<ToggleGroup Type=\"ToggleGroup.ToggleGroupType.Single\" Size=\"Lumeo.Size.Sm\">\n    ...\n</ToggleGroup>\n\n<ToggleGroup Type=\"ToggleGroup.ToggleGroupType.Single\">\n    ...\n</ToggleGroup>\n\n<ToggleGroup Type=\"ToggleGroup.ToggleGroupType.Single\" Size=\"Lumeo.Size.Lg\">\n    ...\n</ToggleGroup>"
         }
       ],
       "subComponents": {
@@ -40101,7 +40536,7 @@
       "records": [
         {
           "name": "TooltipContext",
-          "signature": "TooltipContext(bool IsOpen)",
+          "signature": "TooltipContext(bool IsOpen, string WrapperId)",
           "description": null
         }
       ],
@@ -40117,7 +40552,7 @@
         },
         {
           "title": "Side Variations",
-          "code": "<Tooltip>\n    <TooltipTrigger>\n        <Button Variant=\"Button.ButtonVariant.Outline\">Top</Button>\n    </TooltipTrigger>\n    <TooltipContent Side=\"TooltipContent.TooltipSide.Top\">\n        <p>Tooltip on top</p>\n    </TooltipContent>\n</Tooltip>\n\n<Tooltip>\n    <TooltipTrigger>\n        <Button Variant=\"Button.ButtonVariant.Outline\">Bottom</Button>\n    </TooltipTrigger>\n    <TooltipContent Side=\"TooltipContent.TooltipSide.Bottom\">\n        <p>Tooltip on bottom</p>\n    </TooltipContent>\n</Tooltip>"
+          "code": "<Tooltip>\n    <TooltipTrigger>\n        <Button Variant=\"Button.ButtonVariant.Outline\">Top</Button>\n    </TooltipTrigger>\n    <TooltipContent Side=\"Lumeo.Side.Top\">\n        <p>Tooltip on top</p>\n    </TooltipContent>\n</Tooltip>\n\n<Tooltip>\n    <TooltipTrigger>\n        <Button Variant=\"Button.ButtonVariant.Outline\">Bottom</Button>\n    </TooltipTrigger>\n    <TooltipContent Side=\"Lumeo.Side.Bottom\">\n        <p>Tooltip on bottom</p>\n    </TooltipContent>\n</Tooltip>"
         },
         {
           "title": "With Icons",
@@ -40125,7 +40560,7 @@
         },
         {
           "title": "Placement",
-          "code": "<Tooltip>\n    <TooltipTrigger><Button Variant=\"Button.ButtonVariant.Outline\">Top</Button></TooltipTrigger>\n    <TooltipContent Side=\"TooltipContent.TooltipSide.Top\">Top tooltip</TooltipContent>\n</Tooltip>\n<Tooltip>\n    <TooltipTrigger><Button Variant=\"Button.ButtonVariant.Outline\">Bottom</Button></TooltipTrigger>\n    <TooltipContent Side=\"TooltipContent.TooltipSide.Bottom\">Bottom tooltip</TooltipContent>\n</Tooltip>\n<Tooltip>\n    <TooltipTrigger><Button Variant=\"Button.ButtonVariant.Outline\">Left</Button></TooltipTrigger>\n    <TooltipContent Side=\"TooltipContent.TooltipSide.Left\">Left tooltip</TooltipContent>\n</Tooltip>\n<Tooltip>\n    <TooltipTrigger><Button Variant=\"Button.ButtonVariant.Outline\">Right</Button></TooltipTrigger>\n    <TooltipContent Side=\"TooltipContent.TooltipSide.Right\">Right tooltip</TooltipContent>\n</Tooltip>"
+          "code": "<Tooltip>\n    <TooltipTrigger><Button Variant=\"Button.ButtonVariant.Outline\">Top</Button></TooltipTrigger>\n    <TooltipContent Side=\"Lumeo.Side.Top\">Top tooltip</TooltipContent>\n</Tooltip>\n<Tooltip>\n    <TooltipTrigger><Button Variant=\"Button.ButtonVariant.Outline\">Bottom</Button></TooltipTrigger>\n    <TooltipContent Side=\"Lumeo.Side.Bottom\">Bottom tooltip</TooltipContent>\n</Tooltip>\n<Tooltip>\n    <TooltipTrigger><Button Variant=\"Button.ButtonVariant.Outline\">Left</Button></TooltipTrigger>\n    <TooltipContent Side=\"Lumeo.Side.Left\">Left tooltip</TooltipContent>\n</Tooltip>\n<Tooltip>\n    <TooltipTrigger><Button Variant=\"Button.ButtonVariant.Outline\">Right</Button></TooltipTrigger>\n    <TooltipContent Side=\"Lumeo.Side.Right\">Right tooltip</TooltipContent>\n</Tooltip>"
         }
       ],
       "subComponents": {
@@ -40134,7 +40569,9 @@
           "fileName": "TooltipContent.razor",
           "namespace": "Lumeo",
           "inheritsFrom": null,
-          "implements": [],
+          "implements": [
+            "IAsyncDisposable"
+          ],
           "parameters": [
             {
               "name": "Context",
@@ -40154,8 +40591,8 @@
             },
             {
               "name": "Side",
-              "type": "TooltipSide",
-              "default": "TooltipSide.Top",
+              "type": "Lumeo.Side",
+              "default": "Lumeo.Side.Top",
               "description": null,
               "isCascading": false,
               "captureUnmatched": false
@@ -40194,18 +40631,7 @@
             }
           ],
           "events": [],
-          "enums": [
-            {
-              "name": "TooltipSide",
-              "values": [
-                "Top",
-                "Bottom",
-                "Left",
-                "Right"
-              ],
-              "description": null
-            }
-          ],
+          "enums": [],
           "records": [],
           "parseFailed": false,
           "parseError": null
@@ -40481,22 +40907,11 @@
           "description": null
         }
       ],
-      "enums": [
-        {
-          "name": "TourPlacement",
-          "values": [
-            "Top",
-            "Bottom",
-            "Left",
-            "Right"
-          ],
-          "description": null
-        }
-      ],
+      "enums": [],
       "records": [
         {
           "name": "TourStepConfig",
-          "signature": "TourStepConfig(string? TargetSelector, string Title, string? Description = null, TourPlacement Placement = TourPlacement.Bottom)",
+          "signature": "TourStepConfig(string? TargetSelector, string Title, string? Description = null, Lumeo.Side Placement = Lumeo.Side.Bottom)",
           "description": null
         }
       ],
@@ -40517,11 +40932,11 @@
       "examples": [
         {
           "title": "Basic Tour",
-          "code": "<Flex Class=\"gap-3 flex-wrap\">\n    <Button id=\"tour-feature-1\" Variant=\"Button.ButtonVariant.Outline\">Dashboard</Button>\n    <Button id=\"tour-feature-2\" Variant=\"Button.ButtonVariant.Outline\">Team</Button>\n    <Button id=\"tour-feature-3\" Variant=\"Button.ButtonVariant.Outline\">Settings</Button>\n</Flex>\n<Button Variant=\"Button.ButtonVariant.Default\" OnClick=\"@(() => _tourOpen = true)\">\n    Start Tour\n</Button>\n\n<Tour @bind-Open=\"_tourOpen\"\n      Steps=\"@_tourSteps\"\n      OnComplete=\"@HandleComplete\"\n      OnSkip=\"@(() => _tourOpen = false)\" />\n\n@code {\n    private bool _tourOpen;\n\n    private List<Tour.TourStepConfig> _tourSteps = new()\n    {\n        new(\"#tour-feature-1\", \"Dashboard\", \"Get an overview of your key metrics.\", Tour.TourPlacement.Bottom),\n        new(\"#tour-feature-2\", \"Team Management\", \"Invite members and manage permissions.\", Tour.TourPlacement.Bottom),\n        new(\"#tour-feature-3\", \"Settings\", \"Customize your workspace and account.\", Tour.TourPlacement.Bottom),\n    };\n\n    private void HandleComplete() => _tourOpen = false;\n}"
+          "code": "<Flex Class=\"gap-3 flex-wrap\">\n    <Button id=\"tour-feature-1\" Variant=\"Button.ButtonVariant.Outline\">Dashboard</Button>\n    <Button id=\"tour-feature-2\" Variant=\"Button.ButtonVariant.Outline\">Team</Button>\n    <Button id=\"tour-feature-3\" Variant=\"Button.ButtonVariant.Outline\">Settings</Button>\n</Flex>\n<Button Variant=\"Button.ButtonVariant.Default\" OnClick=\"@(() => _tourOpen = true)\">\n    Start Tour\n</Button>\n\n<Tour @bind-Open=\"_tourOpen\"\n      Steps=\"@_tourSteps\"\n      OnComplete=\"@HandleComplete\"\n      OnSkip=\"@(() => _tourOpen = false)\" />\n\n@code {\n    private bool _tourOpen;\n\n    private List<Tour.TourStepConfig> _tourSteps = new()\n    {\n        new(\"#tour-feature-1\", \"Dashboard\", \"Get an overview of your key metrics.\", Lumeo.Side.Bottom),\n        new(\"#tour-feature-2\", \"Team Management\", \"Invite members and manage permissions.\", Lumeo.Side.Bottom),\n        new(\"#tour-feature-3\", \"Settings\", \"Customize your workspace and account.\", Lumeo.Side.Bottom),\n    };\n\n    private void HandleComplete() => _tourOpen = false;\n}"
         },
         {
           "title": "Custom Placements",
-          "code": "<Flex Class=\"justify-between gap-3\">\n    <Button id=\"tour-top\"    Variant=\"Button.ButtonVariant.Outline\">Top</Button>\n    <Button id=\"tour-right\"  Variant=\"Button.ButtonVariant.Outline\">Right</Button>\n    <Button id=\"tour-bottom\" Variant=\"Button.ButtonVariant.Outline\">Bottom</Button>\n    <Button id=\"tour-left\"   Variant=\"Button.ButtonVariant.Outline\">Left</Button>\n</Flex>\n<Button Variant=\"Button.ButtonVariant.Secondary\" OnClick=\"@(() => _open = true)\">\n    Tour Placements\n</Button>\n\n<Tour @bind-Open=\"_open\"\n      Steps=\"@_steps\"\n      OnComplete=\"@(() => _open = false)\"\n      OnSkip=\"@(() => _open = false)\" />\n\n@code {\n    private bool _open;\n\n    private List<Tour.TourStepConfig> _steps = new()\n    {\n        new(\"#tour-top\",    \"Top Placement\",    \"Tooltip above the element.\",  Tour.TourPlacement.Top),\n        new(\"#tour-right\",  \"Right Placement\",  \"Tooltip to the right.\",       Tour.TourPlacement.Right),\n        new(\"#tour-bottom\", \"Bottom Placement\", \"Tooltip below the element.\",  Tour.TourPlacement.Bottom),\n        new(\"#tour-left\",   \"Left Placement\",   \"Tooltip to the left.\",        Tour.TourPlacement.Left),\n    };\n}"
+          "code": "<Flex Class=\"justify-between gap-3\">\n    <Button id=\"tour-top\"    Variant=\"Button.ButtonVariant.Outline\">Top</Button>\n    <Button id=\"tour-right\"  Variant=\"Button.ButtonVariant.Outline\">Right</Button>\n    <Button id=\"tour-bottom\" Variant=\"Button.ButtonVariant.Outline\">Bottom</Button>\n    <Button id=\"tour-left\"   Variant=\"Button.ButtonVariant.Outline\">Left</Button>\n</Flex>\n<Button Variant=\"Button.ButtonVariant.Secondary\" OnClick=\"@(() => _open = true)\">\n    Tour Placements\n</Button>\n\n<Tour @bind-Open=\"_open\"\n      Steps=\"@_steps\"\n      OnComplete=\"@(() => _open = false)\"\n      OnSkip=\"@(() => _open = false)\" />\n\n@code {\n    private bool _open;\n\n    private List<Tour.TourStepConfig> _steps = new()\n    {\n        new(\"#tour-top\",    \"Top Placement\",    \"Tooltip above the element.\",  Lumeo.Side.Top),\n        new(\"#tour-right\",  \"Right Placement\",  \"Tooltip to the right.\",       Lumeo.Side.Right),\n        new(\"#tour-bottom\", \"Bottom Placement\", \"Tooltip below the element.\",  Lumeo.Side.Bottom),\n        new(\"#tour-left\",   \"Left Placement\",   \"Tooltip to the left.\",        Lumeo.Side.Left),\n    };\n}"
         }
       ],
       "subComponents": {},
@@ -41211,6 +41626,22 @@
               "description": null,
               "isCascading": false,
               "captureUnmatched": false
+            },
+            {
+              "name": "Class",
+              "type": "string?",
+              "default": null,
+              "description": null,
+              "isCascading": false,
+              "captureUnmatched": false
+            },
+            {
+              "name": "AdditionalAttributes",
+              "type": "Dictionary<string, object>?",
+              "default": null,
+              "description": null,
+              "isCascading": false,
+              "captureUnmatched": true
             }
           ],
           "events": [