@lumeo-ui/mcp-server 2.2.1 → 3.0.0

package/src/components-api.json

@@ -1,12 +1,12 @@
 {
   "$schema": "https://lumeo.nativ.sh/components-api-schema.json",
-  "version": "2.2.1",
-  "generated": "2026-05-21T06:16:56.6211752Z",
+  "version": "3.0.0",
+  "generated": "2026-05-21T12:36:12.5570853Z",
   "stats": {
     "componentCount": 149,
-    "totalParameters": 3510,
-    "totalEnums": 104,
-    "totalRecords": 59,
+    "totalParameters": 3578,
+    "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>"
         }
       ]
     }
@@ -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.1</Code>"
+          "code": "<Code Variant=\"block\">dotnet add package Lumeo --version 2.2.3</Code>"
         },
         {
           "title": "Custom Size",
@@ -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",
@@ -26182,16 +26510,236 @@
           "parseFailed": false,
           "parseError": null
         },
-        "MenubarMenu": {
-          "componentName": "MenubarMenu",
-          "fileName": "MenubarMenu.razor",
+        "MenubarMenu": {
+          "componentName": "MenubarMenu",
+          "fileName": "MenubarMenu.razor",
+          "namespace": "Lumeo",
+          "inheritsFrom": null,
+          "implements": [],
+          "parameters": [
+            {
+              "name": "Context",
+              "type": "Menubar.MenubarContext",
+              "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": [
+            {
+              "name": "MenubarMenuContext",
+              "signature": "MenubarMenuContext(string MenuId, string WrapperId)",
+              "description": null
+            }
+          ],
+          "parseFailed": false,
+          "parseError": null
+        },
+        "MenubarSeparator": {
+          "componentName": "MenubarSeparator",
+          "fileName": "MenubarSeparator.razor",
+          "namespace": "Lumeo",
+          "inheritsFrom": null,
+          "implements": [],
+          "parameters": [
+            {
+              "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
+        },
+        "MenubarShortcut": {
+          "componentName": "MenubarShortcut",
+          "fileName": "MenubarShortcut.razor",
+          "namespace": "Lumeo",
+          "inheritsFrom": null,
+          "implements": [],
+          "parameters": [
+            {
+              "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
+        },
+        "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": "Context",
-              "type": "Menubar.MenubarContext",
+              "name": "SubContext",
+              "type": "MenubarSub.MenubarSubContext",
               "default": "default!",
               "description": null,
               "isCascading": true,
@@ -26206,74 +26754,8 @@
               "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": [
-            {
-              "name": "MenubarMenuContext",
-              "signature": "MenubarMenuContext(string MenuId, string WrapperId)",
-              "description": null
-            }
-          ],
-          "parseFailed": false,
-          "parseError": null
-        },
-        "MenubarSeparator": {
-          "componentName": "MenubarSeparator",
-          "fileName": "MenubarSeparator.razor",
-          "namespace": "Lumeo",
-          "inheritsFrom": null,
-          "implements": [],
-          "parameters": [
-            {
-              "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
-        },
-        "MenubarShortcut": {
-          "componentName": "MenubarShortcut",
-          "fileName": "MenubarShortcut.razor",
-          "namespace": "Lumeo",
-          "inheritsFrom": null,
-          "implements": [],
-          "parameters": [
-            {
-              "name": "ChildContent",
-              "type": "RenderFragment?",
+              "name": "Disabled",
+              "type": "bool",
               "default": null,
               "description": null,
               "isCascading": false,
@@ -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",
@@ -35470,103 +35896,94 @@
           "captureUnmatched": true
         }
       ],
-      "events": [
-        {
-          "name": "OnClick",
-          "type": "EventCallback<Microsoft.AspNetCore.Components.Web.MouseEventArgs>",
-          "description": null
-        }
-      ],
-      "enums": [],
-      "records": [],
-      "cssVars": [
-        "--radius"
-      ],
-      "examples": [
-        {
-          "title": "Basic",
-          "code": "<SplitButton Text=\"Save\" OnClick=\"HandleSave\">\n    <MenuContent>\n        <DropdownMenuItem OnClick=\"HandleSaveAndPublish\">Save and Publish</DropdownMenuItem>\n        <DropdownMenuItem OnClick=\"HandleSaveAsDraft\">Save as Draft</DropdownMenuItem>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>Discard changes</DropdownMenuItem>\n    </MenuContent>\n</SplitButton>\n\n@code {\n    private void HandleSave() { /* primary action */ }\n    private void HandleSaveAndPublish() { /* secondary */ }\n    private void HandleSaveAsDraft() { /* secondary */ }\n}"
-        },
-        {
-          "title": "Variants",
-          "code": "<SplitButton Text=\"Default\">\n    <MenuContent>\n        <DropdownMenuItem>Option A</DropdownMenuItem>\n        <DropdownMenuItem>Option B</DropdownMenuItem>\n    </MenuContent>\n</SplitButton>\n<SplitButton Text=\"Secondary\" Variant=\"Button.ButtonVariant.Secondary\">\n    <MenuContent>\n        <DropdownMenuItem>Option A</DropdownMenuItem>\n        <DropdownMenuItem>Option B</DropdownMenuItem>\n    </MenuContent>\n</SplitButton>\n<SplitButton Text=\"Outline\" Variant=\"Button.ButtonVariant.Outline\">\n    <MenuContent>\n        <DropdownMenuItem>Option A</DropdownMenuItem>\n        <DropdownMenuItem>Option B</DropdownMenuItem>\n    </MenuContent>\n</SplitButton>"
-        },
-        {
-          "title": "Sizes",
-          "code": "<SplitButton Text=\"Small\" Size=\"Button.ButtonSize.Sm\">\n    <MenuContent><DropdownMenuItem>Option A</DropdownMenuItem></MenuContent>\n</SplitButton>\n<SplitButton Text=\"Default\">\n    <MenuContent><DropdownMenuItem>Option A</DropdownMenuItem></MenuContent>\n</SplitButton>\n<SplitButton Text=\"Large\" Size=\"Button.ButtonSize.Lg\">\n    <MenuContent><DropdownMenuItem>Option A</DropdownMenuItem></MenuContent>\n</SplitButton>"
-        },
-        {
-          "title": "Disabled",
-          "code": "<SplitButton Text=\"Disabled\" Disabled=\"true\">\n    <MenuContent>\n        <DropdownMenuItem>Option A</DropdownMenuItem>\n    </MenuContent>\n</SplitButton>"
-        }
-      ],
-      "subComponents": {},
-      "parseFailed": false,
-      "parseError": null
-    },
-    "Splitter": {
-      "name": "Splitter",
-      "category": "Navigation",
-      "subcategory": null,
-      "description": "Resizable split pane for horizontal/vertical layouts.",
-      "nugetPackage": "Lumeo",
-      "files": [
-        "UI/Splitter/Splitter.razor",
-        "UI/Splitter/SplitterDivider.razor",
-        "UI/Splitter/SplitterPane.razor"
-      ],
-      "namespace": "Lumeo",
-      "inheritsFrom": null,
-      "implements": [],
-      "parameters": [
-        {
-          "name": "Orientation",
-          "type": "SplitterOrientation",
-          "default": "SplitterOrientation.Horizontal",
-          "description": null,
-          "isCascading": false,
-          "captureUnmatched": false
-        },
-        {
-          "name": "ChildContent",
-          "type": "RenderFragment?",
-          "default": null,
-          "description": null,
-          "isCascading": false,
-          "captureUnmatched": false
-        },
-        {
-          "name": "Class",
-          "type": "string?",
-          "default": null,
-          "description": null,
-          "isCascading": false,
-          "captureUnmatched": false
-        },
-        {
-          "name": "AdditionalAttributes",
-          "type": "Dictionary<string, object>?",
-          "default": null,
-          "description": null,
-          "isCascading": false,
-          "captureUnmatched": true
-        }
-      ],
-      "events": [],
-      "enums": [
+      "events": [
         {
-          "name": "SplitterOrientation",
-          "values": [
-            "Horizontal",
-            "Vertical"
-          ],
+          "name": "OnClick",
+          "type": "EventCallback<Microsoft.AspNetCore.Components.Web.MouseEventArgs>",
           "description": null
         }
       ],
+      "enums": [],
+      "records": [],
+      "cssVars": [
+        "--radius"
+      ],
+      "examples": [
+        {
+          "title": "Basic",
+          "code": "<SplitButton Text=\"Save\" OnClick=\"HandleSave\">\n    <MenuContent>\n        <DropdownMenuItem OnClick=\"HandleSaveAndPublish\">Save and Publish</DropdownMenuItem>\n        <DropdownMenuItem OnClick=\"HandleSaveAsDraft\">Save as Draft</DropdownMenuItem>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>Discard changes</DropdownMenuItem>\n    </MenuContent>\n</SplitButton>\n\n@code {\n    private void HandleSave() { /* primary action */ }\n    private void HandleSaveAndPublish() { /* secondary */ }\n    private void HandleSaveAsDraft() { /* secondary */ }\n}"
+        },
+        {
+          "title": "Variants",
+          "code": "<SplitButton Text=\"Default\">\n    <MenuContent>\n        <DropdownMenuItem>Option A</DropdownMenuItem>\n        <DropdownMenuItem>Option B</DropdownMenuItem>\n    </MenuContent>\n</SplitButton>\n<SplitButton Text=\"Secondary\" Variant=\"Button.ButtonVariant.Secondary\">\n    <MenuContent>\n        <DropdownMenuItem>Option A</DropdownMenuItem>\n        <DropdownMenuItem>Option B</DropdownMenuItem>\n    </MenuContent>\n</SplitButton>\n<SplitButton Text=\"Outline\" Variant=\"Button.ButtonVariant.Outline\">\n    <MenuContent>\n        <DropdownMenuItem>Option A</DropdownMenuItem>\n        <DropdownMenuItem>Option B</DropdownMenuItem>\n    </MenuContent>\n</SplitButton>"
+        },
+        {
+          "title": "Sizes",
+          "code": "<SplitButton Text=\"Small\" Size=\"Button.ButtonSize.Sm\">\n    <MenuContent><DropdownMenuItem>Option A</DropdownMenuItem></MenuContent>\n</SplitButton>\n<SplitButton Text=\"Default\">\n    <MenuContent><DropdownMenuItem>Option A</DropdownMenuItem></MenuContent>\n</SplitButton>\n<SplitButton Text=\"Large\" Size=\"Button.ButtonSize.Lg\">\n    <MenuContent><DropdownMenuItem>Option A</DropdownMenuItem></MenuContent>\n</SplitButton>"
+        },
+        {
+          "title": "Disabled",
+          "code": "<SplitButton Text=\"Disabled\" Disabled=\"true\">\n    <MenuContent>\n        <DropdownMenuItem>Option A</DropdownMenuItem>\n    </MenuContent>\n</SplitButton>"
+        }
+      ],
+      "subComponents": {},
+      "parseFailed": false,
+      "parseError": null
+    },
+    "Splitter": {
+      "name": "Splitter",
+      "category": "Navigation",
+      "subcategory": null,
+      "description": "Resizable split pane for horizontal/vertical layouts.",
+      "nugetPackage": "Lumeo",
+      "files": [
+        "UI/Splitter/Splitter.razor",
+        "UI/Splitter/SplitterDivider.razor",
+        "UI/Splitter/SplitterPane.razor"
+      ],
+      "namespace": "Lumeo",
+      "inheritsFrom": null,
+      "implements": [],
+      "parameters": [
+        {
+          "name": "Orientation",
+          "type": "Lumeo.Orientation",
+          "default": "Lumeo.Orientation.Horizontal",
+          "description": null,
+          "isCascading": false,
+          "captureUnmatched": false
+        },
+        {
+          "name": "ChildContent",
+          "type": "RenderFragment?",
+          "default": null,
+          "description": null,
+          "isCascading": false,
+          "captureUnmatched": false
+        },
+        {
+          "name": "Class",
+          "type": "string?",
+          "default": null,
+          "description": null,
+          "isCascading": false,
+          "captureUnmatched": false
+        },
+        {
+          "name": "AdditionalAttributes",
+          "type": "Dictionary<string, object>?",
+          "default": null,
+          "description": null,
+          "isCascading": false,
+          "captureUnmatched": true
+        }
+      ],
+      "events": [],
+      "enums": [],
       "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",
@@ -37224,6 +37596,7 @@
         "UI/Tabs/Tabs.razor",
         "UI/Tabs/TabsContent.razor",
         "UI/Tabs/TabsList.razor",
+        "UI/Tabs/TabsReorderEventArgs.cs",
         "UI/Tabs/TabsTrigger.razor"
       ],
       "namespace": "Lumeo",
@@ -37256,8 +37629,8 @@
         },
         {
           "name": "Orientation",
-          "type": "TabsOrientation",
-          "default": "TabsOrientation.Horizontal",
+          "type": "Lumeo.Orientation",
+          "default": "Lumeo.Orientation.Horizontal",
           "description": null,
           "isCascading": false,
           "captureUnmatched": false
@@ -37327,14 +37700,6 @@
         }
       ],
       "enums": [
-        {
-          "name": "TabsOrientation",
-          "values": [
-            "Horizontal",
-            "Vertical"
-          ],
-          "description": null
-        },
         {
           "name": "TabsVariant",
           "values": [
@@ -37357,7 +37722,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 +37749,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 +37862,22 @@
               "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": "Class",
               "type": "string?",
@@ -37514,7 +37895,13 @@
               "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."
+            }
+          ],
           "enums": [],
           "records": [],
           "parseFailed": false,
@@ -38452,8 +38839,8 @@
         },
         {
           "name": "Orientation",
-          "type": "TimelineOrientation",
-          "default": "TimelineOrientation.Vertical",
+          "type": "Lumeo.Orientation",
+          "default": "Lumeo.Orientation.Vertical",
           "description": null,
           "isCascading": false,
           "captureUnmatched": false
@@ -38506,20 +38893,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 +38922,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 +39364,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 +39405,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 +39794,8 @@
         },
         {
           "name": "Size",
-          "type": "ToggleSize",
-          "default": "ToggleSize.Default",
+          "type": "Lumeo.Size",
+          "default": "Lumeo.Size.Md",
           "description": null,
           "isCascading": false,
           "captureUnmatched": false
@@ -39417,15 +39848,6 @@
             "Outline"
           ],
           "description": null
-        },
-        {
-          "name": "ToggleSize",
-          "values": [
-            "Default",
-            "Sm",
-            "Lg"
-          ],
-          "description": null
         }
       ],
       "records": [],
@@ -39449,7 +39871,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 +39922,8 @@
         },
         {
           "name": "Size",
-          "type": "ToggleGroupSize",
-          "default": "ToggleGroupSize.Default",
+          "type": "Lumeo.Size",
+          "default": "Lumeo.Size.Md",
           "description": null,
           "isCascading": false,
           "captureUnmatched": false
@@ -39583,21 +40005,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 +40038,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 +40514,7 @@
       "records": [
         {
           "name": "TooltipContext",
-          "signature": "TooltipContext(bool IsOpen)",
+          "signature": "TooltipContext(bool IsOpen, string WrapperId)",
           "description": null
         }
       ],
@@ -40117,7 +40530,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 +40538,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 +40547,9 @@
           "fileName": "TooltipContent.razor",
           "namespace": "Lumeo",
           "inheritsFrom": null,
-          "implements": [],
+          "implements": [
+            "IAsyncDisposable"
+          ],
           "parameters": [
             {
               "name": "Context",
@@ -40154,8 +40569,8 @@
             },
             {
               "name": "Side",
-              "type": "TooltipSide",
-              "default": "TooltipSide.Top",
+              "type": "Lumeo.Side",
+              "default": "Lumeo.Side.Top",
               "description": null,
               "isCascading": false,
               "captureUnmatched": false
@@ -40194,18 +40609,7 @@
             }
           ],
           "events": [],
-          "enums": [
-            {
-              "name": "TooltipSide",
-              "values": [
-                "Top",
-                "Bottom",
-                "Left",
-                "Right"
-              ],
-              "description": null
-            }
-          ],
+          "enums": [],
           "records": [],
           "parseFailed": false,
           "parseError": null
@@ -40481,22 +40885,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 +40910,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 +41604,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": [