@lumeo-ui/mcp-server 4.1.0-preview.1 → 4.1.0-preview.10

package/src/components-api.json

@@ -1,10 +1,10 @@
 {
   "$schema": "https://lumeo.nativ.sh/components-api-schema.json",
-  "version": "4.1.0-preview.1",
-  "generated": "2026-07-02T08:47:23.5739781Z",
+  "version": "4.1.0-preview.10",
+  "generated": "2026-07-05T09:59:54.2901968Z",
   "stats": {
     "componentCount": 164,
-    "totalParameters": 4166,
+    "totalParameters": 4179,
     "totalEnums": 74,
     "totalRecords": 72,
     "serviceCount": 33,
@@ -5041,11 +5041,11 @@
         },
         {
           "title": "With Icon",
-          "code": "<Alert>\n    <Flex Gap=\"3\">\n        <Blazicon Svg=\"Lucide.Info\" class=\"h-4 w-4 mt-0.5\" />\n        <Stack Gap=\"0\">\n            <Heading Level=\"5\" Size=\"sm\" Weight=\"medium\" Class=\"mb-1 leading-none tracking-tight\">Information</Heading>\n            <Lumeo.Text Size=\"sm\" Leading=\"relaxed\">This action will update your preferences.</Lumeo.Text>\n        </Stack>\n    </Flex>\n</Alert>\n<Alert Variant=\"Alert.AlertVariant.Destructive\">\n    <Flex Gap=\"3\">\n        <Blazicon Svg=\"Lucide.CircleAlert\" class=\"h-4 w-4 mt-0.5\" />\n        <Stack Gap=\"0\">\n            <Heading Level=\"5\" Size=\"sm\" Weight=\"medium\" Class=\"mb-1 leading-none tracking-tight\">Something went wrong</Heading>\n            <Lumeo.Text Size=\"sm\" Leading=\"relaxed\">Could not save your changes. Please try again.</Lumeo.Text>\n        </Stack>\n    </Flex>\n</Alert>"
+          "code": "<Alert>\n    <Flex Gap=\"3\">\n        <SvgGlyph Svg=\"@(Lucide.Info)\" class=\"h-4 w-4 mt-0.5\" />\n        <Stack Gap=\"0\">\n            <Heading Level=\"5\" Size=\"sm\" Weight=\"medium\" Class=\"mb-1 leading-none tracking-tight\">Information</Heading>\n            <Lumeo.Text Size=\"sm\" Leading=\"relaxed\">This action will update your preferences.</Lumeo.Text>\n        </Stack>\n    </Flex>\n</Alert>\n<Alert Variant=\"Alert.AlertVariant.Destructive\">\n    <Flex Gap=\"3\">\n        <SvgGlyph Svg=\"@(Lucide.CircleAlert)\" class=\"h-4 w-4 mt-0.5\" />\n        <Stack Gap=\"0\">\n            <Heading Level=\"5\" Size=\"sm\" Weight=\"medium\" Class=\"mb-1 leading-none tracking-tight\">Something went wrong</Heading>\n            <Lumeo.Text Size=\"sm\" Leading=\"relaxed\">Could not save your changes. Please try again.</Lumeo.Text>\n        </Stack>\n    </Flex>\n</Alert>"
         },
         {
           "title": "With Action",
-          "code": "<Alert>\n    <Flex Align=\"start\" Justify=\"between\" Gap=\"4\">\n        <Flex Gap=\"3\">\n            <Blazicon Svg=\"Lucide.Bell\" class=\"h-4 w-4 mt-0.5 text-primary\" />\n            <Stack Gap=\"0\">\n                <Heading Level=\"5\" Size=\"sm\" Weight=\"medium\" Class=\"mb-1 leading-none tracking-tight\">New feature available</Heading>\n                <Lumeo.Text Size=\"sm\" Leading=\"relaxed\">Dark mode is now available for all users.</Lumeo.Text>\n            </Stack>\n        </Flex>\n        <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\">Try it</Button>\n    </Flex>\n</Alert>"
+          "code": "<Alert>\n    <Flex Align=\"start\" Justify=\"between\" Gap=\"4\">\n        <Flex Gap=\"3\">\n            <SvgGlyph Svg=\"@(Lucide.Bell)\" class=\"h-4 w-4 mt-0.5 text-primary\" />\n            <Stack Gap=\"0\">\n                <Heading Level=\"5\" Size=\"sm\" Weight=\"medium\" Class=\"mb-1 leading-none tracking-tight\">New feature available</Heading>\n                <Lumeo.Text Size=\"sm\" Leading=\"relaxed\">Dark mode is now available for all users.</Lumeo.Text>\n            </Stack>\n        </Flex>\n        <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\">Try it</Button>\n    </Flex>\n</Alert>"
         }
       ],
       "subComponents": {},
@@ -5196,7 +5196,7 @@
         },
         {
           "title": "Unsaved Changes",
-          "code": "<AlertDialog @bind-Open=\"_isOpen\">\n    <AlertDialogTrigger>\n        <Button Variant=\"Button.ButtonVariant.Ghost\">\n            <Blazicon Svg=\"Lucide.X\" class=\"h-4 w-4\" /> Close Editor\n        </Button>\n    </AlertDialogTrigger>\n    <AlertDialogContent>\n        <AlertDialogHeader>\n            <AlertDialogTitle>Discard unsaved changes?</AlertDialogTitle>\n            <AlertDialogDescription>\n                You have unsaved changes. If you close now, your changes will be lost.\n            </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n            <AlertDialogCancel>Keep Editing</AlertDialogCancel>\n            <AlertDialogAction>Discard Changes</AlertDialogAction>\n        </AlertDialogFooter>\n    </AlertDialogContent>\n</AlertDialog>"
+          "code": "<AlertDialog @bind-Open=\"_isOpen\">\n    <AlertDialogTrigger>\n        <Button Variant=\"Button.ButtonVariant.Ghost\">\n            <SvgGlyph Svg=\"@(Lucide.X)\" class=\"h-4 w-4\" /> Close Editor\n        </Button>\n    </AlertDialogTrigger>\n    <AlertDialogContent>\n        <AlertDialogHeader>\n            <AlertDialogTitle>Discard unsaved changes?</AlertDialogTitle>\n            <AlertDialogDescription>\n                You have unsaved changes. If you close now, your changes will be lost.\n            </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n            <AlertDialogCancel>Keep Editing</AlertDialogCancel>\n            <AlertDialogAction>Discard Changes</AlertDialogAction>\n        </AlertDialogFooter>\n    </AlertDialogContent>\n</AlertDialog>"
         },
         {
           "title": "Loading Action",
@@ -5956,7 +5956,7 @@
         },
         {
           "title": "With Search",
-          "code": "<AppBar>\n    <StartContent>\n        <Lumeo.Text Size=\"sm\" Weight=\"semibold\">Dashboard</Lumeo.Text>\n    </StartContent>\n    <ChildContent>\n        <Input Placeholder=\"Search...\" Class=\"max-w-xs h-8 text-sm\" />\n    </ChildContent>\n    <EndContent>\n        <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">\n            <Blazicon Svg=\"Lucide.Bell\" class=\"h-4 w-4\" />\n        </Button>\n        <Avatar><AvatarFallback>JD</AvatarFallback></Avatar>\n    </EndContent>\n</AppBar>"
+          "code": "<AppBar>\n    <StartContent>\n        <Lumeo.Text Size=\"sm\" Weight=\"semibold\">Dashboard</Lumeo.Text>\n    </StartContent>\n    <ChildContent>\n        <Input Placeholder=\"Search...\" Class=\"max-w-xs h-8 text-sm\" />\n    </ChildContent>\n    <EndContent>\n        <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">\n            <SvgGlyph Svg=\"@(Lucide.Bell)\" class=\"h-4 w-4\" />\n        </Button>\n        <Avatar><AvatarFallback>JD</AvatarFallback></Avatar>\n    </EndContent>\n</AppBar>"
         },
         {
           "title": "Appearance toggles — interactive",
@@ -5964,7 +5964,7 @@
         },
         {
           "title": "Elevated (no border)",
-          "code": "<AppBar Elevated=\"true\" Bordered=\"false\">\n    <StartContent>\n        <Lumeo.Text Size=\"sm\" Weight=\"semibold\">My App</Lumeo.Text>\n    </StartContent>\n    <EndContent>\n        <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">\n            <Blazicon Svg=\"Lucide.Settings\" class=\"h-4 w-4\" />\n        </Button>\n    </EndContent>\n</AppBar>"
+          "code": "<AppBar Elevated=\"true\" Bordered=\"false\">\n    <StartContent>\n        <Lumeo.Text Size=\"sm\" Weight=\"semibold\">My App</Lumeo.Text>\n    </StartContent>\n    <EndContent>\n        <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">\n            <SvgGlyph Svg=\"@(Lucide.Settings)\" class=\"h-4 w-4\" />\n        </Button>\n    </EndContent>\n</AppBar>"
         }
       ],
       "subComponents": {},
@@ -6379,7 +6379,7 @@
           "name": "Shape",
           "type": "AvatarShape",
           "default": "AvatarShape.Circle",
-          "description": null,
+          "description": "Avatar outline. Circle (default) and Square are literal contracts — a Circle avatar stays a circle in every theme. Themed follows the theme radius token instead: it renders identically to Circle at stock radii (the computed radius exceeds half the avatar size, so corners clamp to a full circle) and squares off along with the rest of the UI in sharp themes (--radius: 0) — pick it for sharp-brand designs.",
           "isCascading": false,
           "captureUnmatched": false,
           "isEditorRequired": false
@@ -6436,7 +6436,8 @@
           "name": "AvatarShape",
           "values": [
             "Circle",
-            "Square"
+            "Square",
+            "Themed"
           ],
           "description": null
         },
@@ -6467,7 +6468,7 @@
         },
         {
           "title": "Fallback Initials",
-          "code": "<Avatar>\n    <AvatarFallback>JD</AvatarFallback>\n</Avatar>\n<Avatar>\n    <AvatarFallback>\n        <Blazicon Svg=\"Lucide.User\" class=\"h-4 w-4\" />\n    </AvatarFallback>\n</Avatar>"
+          "code": "<Avatar>\n    <AvatarFallback>JD</AvatarFallback>\n</Avatar>\n<Avatar>\n    <AvatarFallback>\n        <SvgGlyph Svg=\"@(Lucide.User)\" class=\"h-4 w-4\" />\n    </AvatarFallback>\n</Avatar>"
         },
         {
           "title": "Sizes",
@@ -6779,7 +6780,7 @@
         },
         {
           "title": "Custom Content",
-          "code": "<BackToTop>\n    <Blazicon Svg=\"Lucide.ChevronUp\" class=\"h-5 w-5\" />\n</BackToTop>"
+          "code": "<BackToTop>\n    <SvgGlyph Svg=\"@(Lucide.ChevronUp)\" class=\"h-5 w-5\" />\n</BackToTop>"
         },
         {
           "title": "Interactive: Visibility Threshold",
@@ -6852,7 +6853,7 @@
           "name": "Pill",
           "type": "bool",
           "default": null,
-          "description": "Pill shape (rounded-full) instead of the default rounded-md — for count/quota chips.",
+          "description": "Pill shape instead of the default rounded-md — for count/quota chips. Theme-radius-aware: renders as a full pill at stock radii and squares off along with the rest of the UI in sharp themes (--radius: 0).",
           "isCascading": false,
           "captureUnmatched": false,
           "isEditorRequired": false
@@ -8013,11 +8014,11 @@
         },
         {
           "title": "With Icons",
-          "code": "<Breadcrumb>\n    <BreadcrumbList>\n        <BreadcrumbItem>\n            <BreadcrumbLink Href=\"#\">\n                <Blazicon Svg=\"Lucide.Home\" class=\"h-4 w-4\" />\n            </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n            <BreadcrumbLink Href=\"#\">Documents</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n            <BreadcrumbLink Href=\"#\">Projects</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n            <BreadcrumbPage>Report.pdf</BreadcrumbPage>\n        </BreadcrumbItem>\n    </BreadcrumbList>\n</Breadcrumb>"
+          "code": "<Breadcrumb>\n    <BreadcrumbList>\n        <BreadcrumbItem>\n            <BreadcrumbLink Href=\"#\">\n                <SvgGlyph Svg=\"@(Lucide.Home)\" class=\"h-4 w-4\" />\n            </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n            <BreadcrumbLink Href=\"#\">Documents</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n            <BreadcrumbLink Href=\"#\">Projects</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n            <BreadcrumbPage>Report.pdf</BreadcrumbPage>\n        </BreadcrumbItem>\n    </BreadcrumbList>\n</Breadcrumb>"
         },
         {
           "title": "Custom Separator",
-          "code": "<Breadcrumb>\n    <BreadcrumbList>\n        <BreadcrumbItem>\n            <BreadcrumbLink Href=\"#\">Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n            <Blazicon Svg=\"Lucide.Slash\" class=\"h-4 w-4\" />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n            <BreadcrumbLink Href=\"#\">Settings</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n            <Blazicon Svg=\"Lucide.Slash\" class=\"h-4 w-4\" />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n            <BreadcrumbPage>Profile</BreadcrumbPage>\n        </BreadcrumbItem>\n    </BreadcrumbList>\n</Breadcrumb>"
+          "code": "<Breadcrumb>\n    <BreadcrumbList>\n        <BreadcrumbItem>\n            <BreadcrumbLink Href=\"#\">Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n            <SvgGlyph Svg=\"@(Lucide.Slash)\" class=\"h-4 w-4\" />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n            <BreadcrumbLink Href=\"#\">Settings</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n            <SvgGlyph Svg=\"@(Lucide.Slash)\" class=\"h-4 w-4\" />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n            <BreadcrumbPage>Profile</BreadcrumbPage>\n        </BreadcrumbItem>\n    </BreadcrumbList>\n</Breadcrumb>"
         }
       ],
       "subComponents": {
@@ -8561,11 +8562,11 @@
         },
         {
           "title": "Sizes",
-          "code": "<Button Size=\"Button.ButtonSize.Sm\">Small</Button>\n<Button>Default</Button>\n<Button Size=\"Button.ButtonSize.Lg\">Large</Button>\n<Button Size=\"Button.ButtonSize.Icon\">\n    <Blazicon Svg=\"Lucide.ChevronRight\" class=\"h-4 w-4\" />\n</Button>"
+          "code": "<Button Size=\"Button.ButtonSize.Sm\">Small</Button>\n<Button>Default</Button>\n<Button Size=\"Button.ButtonSize.Lg\">Large</Button>\n<Button Size=\"Button.ButtonSize.Icon\">\n    <SvgGlyph Svg=\"@(Lucide.ChevronRight)\" class=\"h-4 w-4\" />\n</Button>"
         },
         {
           "title": "With Icon",
-          "code": "<Button>\n    <Blazicon Svg=\"Lucide.Mail\" class=\"h-4 w-4\" />\n    Login with Email\n</Button>\n<Button Variant=\"Button.ButtonVariant.Secondary\">\n    <Blazicon Svg=\"Lucide.Loader2\" class=\"h-4 w-4 animate-spin\" />\n    Please wait\n</Button>"
+          "code": "<Button>\n    <SvgGlyph Svg=\"@(Lucide.Mail)\" class=\"h-4 w-4\" />\n    Login with Email\n</Button>\n<Button Variant=\"Button.ButtonVariant.Secondary\">\n    <SvgGlyph Svg=\"@(Lucide.Loader2)\" class=\"h-4 w-4 animate-spin\" />\n    Please wait\n</Button>"
         },
         {
           "title": "Disabled",
@@ -8654,7 +8655,7 @@
       "examples": [
         {
           "title": "Horizontal (default)",
-          "code": "<ButtonGroup>\n    <Button Variant=\"Button.ButtonVariant.Outline\">\n        <Blazicon Svg=\"Lucide.Bold\" class=\"h-4 w-4\" />\n    </Button>\n    <Button Variant=\"Button.ButtonVariant.Outline\">\n        <Blazicon Svg=\"Lucide.Italic\" class=\"h-4 w-4\" />\n    </Button>\n    <Button Variant=\"Button.ButtonVariant.Outline\">\n        <Blazicon Svg=\"Lucide.Underline\" class=\"h-4 w-4\" />\n    </Button>\n</ButtonGroup>"
+          "code": "<ButtonGroup>\n    <Button Variant=\"Button.ButtonVariant.Outline\">\n        <SvgGlyph Svg=\"@(Lucide.Bold)\" class=\"h-4 w-4\" />\n    </Button>\n    <Button Variant=\"Button.ButtonVariant.Outline\">\n        <SvgGlyph Svg=\"@(Lucide.Italic)\" class=\"h-4 w-4\" />\n    </Button>\n    <Button Variant=\"Button.ButtonVariant.Outline\">\n        <SvgGlyph Svg=\"@(Lucide.Underline)\" class=\"h-4 w-4\" />\n    </Button>\n</ButtonGroup>"
         },
         {
           "title": "Vertical",
@@ -9131,11 +9132,11 @@
         },
         {
           "title": "Card with Actions",
-          "code": "<Card>\n    <CardHeader>\n        <Heading Level=\"3\" Size=\"lg\" Class=\"leading-none tracking-tight\">Blog Post</Heading>\n        <Lumeo.Text Size=\"sm\" Color=\"muted\">Published on Jan 12, 2025</Lumeo.Text>\n    </CardHeader>\n    <CardContent>\n        <Lumeo.Text Size=\"sm\" Color=\"foreground\">\n            Learn how to build accessible, composable UI components using\n            Blazor and Tailwind CSS in this in-depth guide.\n        </Lumeo.Text>\n    </CardContent>\n    <CardFooter>\n        <Flex Gap=\"2\" Class=\"w-full\">\n            <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\">\n                <Blazicon Svg=\"Lucide.Copy\" class=\"h-4 w-4\" /> Edit\n            </Button>\n            <Button Variant=\"Button.ButtonVariant.Destructive\" Size=\"Button.ButtonSize.Sm\">\n                <Blazicon Svg=\"Lucide.Trash\" class=\"h-4 w-4\" /> Delete\n            </Button>\n        </Flex>\n    </CardFooter>\n</Card>"
+          "code": "<Card>\n    <CardHeader>\n        <Heading Level=\"3\" Size=\"lg\" Class=\"leading-none tracking-tight\">Blog Post</Heading>\n        <Lumeo.Text Size=\"sm\" Color=\"muted\">Published on Jan 12, 2025</Lumeo.Text>\n    </CardHeader>\n    <CardContent>\n        <Lumeo.Text Size=\"sm\" Color=\"foreground\">\n            Learn how to build accessible, composable UI components using\n            Blazor and Tailwind CSS in this in-depth guide.\n        </Lumeo.Text>\n    </CardContent>\n    <CardFooter>\n        <Flex Gap=\"2\" Class=\"w-full\">\n            <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\">\n                <SvgGlyph Svg=\"@(Lucide.Copy)\" class=\"h-4 w-4\" /> Edit\n            </Button>\n            <Button Variant=\"Button.ButtonVariant.Destructive\" Size=\"Button.ButtonSize.Sm\">\n                <SvgGlyph Svg=\"@(Lucide.Trash)\" class=\"h-4 w-4\" /> Delete\n            </Button>\n        </Flex>\n    </CardFooter>\n</Card>"
         },
         {
           "title": "Horizontal Card",
-          "code": "<Card>\n    <Flex>\n        <Center Class=\"w-32 h-32 rounded-l-lg bg-muted shrink-0\">\n            <Blazicon Svg=\"Lucide.Star\" class=\"h-10 w-10 text-muted-foreground\" />\n        </Center>\n        <Stack Gap=\"0\" Class=\"flex-1\">\n            <CardHeader>\n                <Heading Level=\"3\" Size=\"base\" Weight=\"semibold\" Class=\"leading-none tracking-tight\">Featured Article</Heading>\n                <Lumeo.Text Size=\"sm\" Color=\"muted\">5 min read</Lumeo.Text>\n            </CardHeader>\n            <CardContent>\n                <Lumeo.Text Size=\"sm\" Color=\"muted\">\n                    An introduction to modern component-driven design systems.\n                </Lumeo.Text>\n            </CardContent>\n            <CardFooter>\n                <Button Variant=\"Button.ButtonVariant.Link\" Class=\"px-0\">Read more</Button>\n            </CardFooter>\n        </Stack>\n    </Flex>\n</Card>"
+          "code": "<Card>\n    <Flex>\n        <Center Class=\"w-32 h-32 rounded-l-lg bg-muted shrink-0\">\n            <SvgGlyph Svg=\"@(Lucide.Star)\" class=\"h-10 w-10 text-muted-foreground\" />\n        </Center>\n        <Stack Gap=\"0\" Class=\"flex-1\">\n            <CardHeader>\n                <Heading Level=\"3\" Size=\"base\" Weight=\"semibold\" Class=\"leading-none tracking-tight\">Featured Article</Heading>\n                <Lumeo.Text Size=\"sm\" Color=\"muted\">5 min read</Lumeo.Text>\n            </CardHeader>\n            <CardContent>\n                <Lumeo.Text Size=\"sm\" Color=\"muted\">\n                    An introduction to modern component-driven design systems.\n                </Lumeo.Text>\n            </CardContent>\n            <CardFooter>\n                <Button Variant=\"Button.ButtonVariant.Link\" Class=\"px-0\">Read more</Button>\n            </CardFooter>\n        </Stack>\n    </Flex>\n</Card>"
         },
         {
           "title": "With Form",
@@ -10512,7 +10513,25 @@
               "name": "Gradient",
               "type": "bool",
               "default": "true",
-              "description": null,
+              "description": "When true (default) the fill uses a lighter opacity than a solid area. This is the legacy opacity-only behaviour and is unaffected by GradientFill.",
+              "isCascading": false,
+              "captureUnmatched": false,
+              "isEditorRequired": false
+            },
+            {
+              "name": "GradientFill",
+              "type": "bool",
+              "default": null,
+              "description": "Opt into a real vertical gradient fill: each series' area fades from its own (brand/theme) colour at the top to transparent at the bottom, the look used by modern dashboards. Off by default so existing charts are unchanged. Override the stops with GradientStops.",
+              "isCascading": false,
+              "captureUnmatched": false,
+              "isEditorRequired": false
+            },
+            {
+              "name": "GradientStops",
+              "type": "List<EChartGradientColorStop>?",
+              "default": null,
+              "description": "Explicit gradient colour-stops applied to every series' area fill when set (implies GradientFill). Offsets run 0 (top) → 1 (bottom); colours accept theme tokens like var(--color-primary). When null and GradientFill is true, a per-series colour → transparent fade is used.",
               "isCascading": false,
               "captureUnmatched": false,
               "isEditorRequired": false
@@ -19839,7 +19858,7 @@
       "examples": [
         {
           "title": "Default",
-          "code": "<Collapsible @bind-Open=\"_isOpen\">\n    <div class=\"flex items-center justify-between\">\n        <h4 class=\"text-sm font-semibold\">Starred Repositories</h4>\n        <CollapsibleTrigger>\n            <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">\n                <Blazicon Svg=\"Lucide.ChevronDown\" class=\"h-4 w-4\" />\n            </Button>\n        </CollapsibleTrigger>\n    </div>\n    <CollapsibleContent>\n        <div class=\"rounded-md border px-4 py-2 text-sm\">Content here</div>\n    </CollapsibleContent>\n</Collapsible>"
+          "code": "<Collapsible @bind-Open=\"_isOpen\">\n    <div class=\"flex items-center justify-between\">\n        <h4 class=\"text-sm font-semibold\">Starred Repositories</h4>\n        <CollapsibleTrigger>\n            <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">\n                <SvgGlyph Svg=\"@(Lucide.ChevronDown)\" class=\"h-4 w-4\" />\n            </Button>\n        </CollapsibleTrigger>\n    </div>\n    <CollapsibleContent>\n        <div class=\"rounded-md border px-4 py-2 text-sm\">Content here</div>\n    </CollapsibleContent>\n</Collapsible>"
         },
         {
           "title": "Initially Open",
@@ -19847,7 +19866,7 @@
         },
         {
           "title": "Sidebar Section",
-          "code": "<Collapsible @bind-Open=\"_isOpen\">\n    <CollapsibleTrigger>\n        <div class=\"flex items-center justify-between px-2 py-1.5 rounded-md hover:bg-accent cursor-pointer\">\n            <div class=\"flex items-center gap-2 text-sm font-medium\">\n                <Blazicon Svg=\"Lucide.Settings\" class=\"h-4 w-4\" /> Settings\n            </div>\n            <Blazicon Svg=\"Lucide.ChevronDown\" class=\"@($\"h-4 w-4 transition-transform {(_isOpen ? \\\"rotate-180\\\" : \\\"\\\")}\")}\" />\n        </div>\n    </CollapsibleTrigger>\n    <CollapsibleContent>\n        <div class=\"pl-6 mt-1 space-y-1\">\n            <div class=\"px-2 py-1.5 text-sm text-muted-foreground\">General</div>\n            <div class=\"px-2 py-1.5 text-sm text-muted-foreground\">Security</div>\n            <div class=\"px-2 py-1.5 text-sm text-muted-foreground\">Notifications</div>\n        </div>\n    </CollapsibleContent>\n</Collapsible>"
+          "code": "<Collapsible @bind-Open=\"_isOpen\">\n    <CollapsibleTrigger>\n        <div class=\"flex items-center justify-between px-2 py-1.5 rounded-md hover:bg-accent cursor-pointer\">\n            <div class=\"flex items-center gap-2 text-sm font-medium\">\n                <SvgGlyph Svg=\"@(Lucide.Settings)\" class=\"h-4 w-4\" /> Settings\n            </div>\n            <SvgGlyph Svg=\"@(Lucide.ChevronDown)\" class=\"@($\"h-4 w-4 transition-transform {(_isOpen ? \\\"rotate-180\\\" : \\\"\\\")}\")}\" />\n        </div>\n    </CollapsibleTrigger>\n    <CollapsibleContent>\n        <div class=\"pl-6 mt-1 space-y-1\">\n            <div class=\"px-2 py-1.5 text-sm text-muted-foreground\">General</div>\n            <div class=\"px-2 py-1.5 text-sm text-muted-foreground\">Security</div>\n            <div class=\"px-2 py-1.5 text-sm text-muted-foreground\">Notifications</div>\n        </div>\n    </CollapsibleContent>\n</Collapsible>"
         }
       ],
       "subComponents": {
@@ -21248,7 +21267,7 @@
       "examples": [
         {
           "title": "Default",
-          "code": "<Command>\n    <CommandInput Placeholder=\"Type a command or search...\" />\n    <CommandList>\n        <CommandGroup Heading=\"Suggestions\">\n            <CommandItem>\n                <Blazicon Svg=\"Lucide.Calendar\" class=\"mr-2 h-4 w-4\" />\n                <span>Calendar</span>\n            </CommandItem>\n            <CommandItem>\n                <Blazicon Svg=\"Lucide.Settings\" class=\"mr-2 h-4 w-4\" />\n                <span>Settings</span>\n            </CommandItem>\n        </CommandGroup>\n        <CommandSeparator />\n        <CommandGroup Heading=\"Actions\">\n            <CommandItem>\n                <Blazicon Svg=\"Lucide.User\" class=\"mr-2 h-4 w-4\" />\n                <span>Profile</span>\n            </CommandItem>\n        </CommandGroup>\n    </CommandList>\n</Command>"
+          "code": "<Command>\n    <CommandInput Placeholder=\"Type a command or search...\" />\n    <CommandList>\n        <CommandGroup Heading=\"Suggestions\">\n            <CommandItem>\n                <SvgGlyph Svg=\"@(Lucide.Calendar)\" class=\"mr-2 h-4 w-4\" />\n                <span>Calendar</span>\n            </CommandItem>\n            <CommandItem>\n                <SvgGlyph Svg=\"@(Lucide.Settings)\" class=\"mr-2 h-4 w-4\" />\n                <span>Settings</span>\n            </CommandItem>\n        </CommandGroup>\n        <CommandSeparator />\n        <CommandGroup Heading=\"Actions\">\n            <CommandItem>\n                <SvgGlyph Svg=\"@(Lucide.User)\" class=\"mr-2 h-4 w-4\" />\n                <span>Profile</span>\n            </CommandItem>\n        </CommandGroup>\n    </CommandList>\n</Command>"
         },
         {
           "title": "Compact",
@@ -21256,7 +21275,7 @@
         },
         {
           "title": "Navigation",
-          "code": "<Command>\n    <CommandInput Placeholder=\"Go to...\" />\n    <CommandList>\n        <CommandGroup Heading=\"Pages\">\n            <CommandItem>\n                <Blazicon Svg=\"Lucide.House\" class=\"mr-2 h-4 w-4\" />\n                <span>Dashboard</span>\n            </CommandItem>\n            <CommandItem>\n                <Blazicon Svg=\"Lucide.User\" class=\"mr-2 h-4 w-4\" />\n                <span>Profile</span>\n            </CommandItem>\n            <CommandItem>\n                <Blazicon Svg=\"Lucide.Settings\" class=\"mr-2 h-4 w-4\" />\n                <span>Settings</span>\n            </CommandItem>\n        </CommandGroup>\n        <CommandSeparator />\n        <CommandGroup Heading=\"Recent\">\n            <CommandItem>\n                <Blazicon Svg=\"Lucide.Bell\" class=\"mr-2 h-4 w-4\" />\n                <span>Notifications</span>\n            </CommandItem>\n            <CommandItem>\n                <Blazicon Svg=\"Lucide.Mail\" class=\"mr-2 h-4 w-4\" />\n                <span>Messages</span>\n            </CommandItem>\n        </CommandGroup>\n    </CommandList>\n</Command>"
+          "code": "<Command>\n    <CommandInput Placeholder=\"Go to...\" />\n    <CommandList>\n        <CommandGroup Heading=\"Pages\">\n            <CommandItem>\n                <SvgGlyph Svg=\"@(Lucide.House)\" class=\"mr-2 h-4 w-4\" />\n                <span>Dashboard</span>\n            </CommandItem>\n            <CommandItem>\n                <SvgGlyph Svg=\"@(Lucide.User)\" class=\"mr-2 h-4 w-4\" />\n                <span>Profile</span>\n            </CommandItem>\n            <CommandItem>\n                <SvgGlyph Svg=\"@(Lucide.Settings)\" class=\"mr-2 h-4 w-4\" />\n                <span>Settings</span>\n            </CommandItem>\n        </CommandGroup>\n        <CommandSeparator />\n        <CommandGroup Heading=\"Recent\">\n            <CommandItem>\n                <SvgGlyph Svg=\"@(Lucide.Bell)\" class=\"mr-2 h-4 w-4\" />\n                <span>Notifications</span>\n            </CommandItem>\n            <CommandItem>\n                <SvgGlyph Svg=\"@(Lucide.Mail)\" class=\"mr-2 h-4 w-4\" />\n                <span>Messages</span>\n            </CommandItem>\n        </CommandGroup>\n    </CommandList>\n</Command>"
         },
         {
           "title": "Disabled Items",
@@ -21402,6 +21421,15 @@
               "captureUnmatched": false,
               "isEditorRequired": false
             },
+            {
+              "name": "AutoFocus",
+              "type": "bool",
+              "default": null,
+              "description": "Focuses the search input on first render via the existing focus interop. Mirrors cmdk, where a bare Command.Input does NOT autofocus but a dialog-hosted command palette does — so this is opt-in (default false): set AutoFocus=\"true\" when hosting the palette in a Dialog/Popover so the user can type immediately on open. The HTML autofocus attribute is a no-op in Blazor WASM, hence the post-render FocusElement hop (see Input.AutoFocus).",
+              "isCascading": false,
+              "captureUnmatched": false,
+              "isEditorRequired": false
+            },
             {
               "name": "Class",
               "type": "string?",
@@ -21640,7 +21668,7 @@
           "Home"
         ],
         "keyboardInteractive": true,
-        "focusManaged": false
+        "focusManaged": true
       },
       "parseFailed": false,
       "parseError": null
@@ -23299,7 +23327,7 @@
           "name": "Compact",
           "type": "bool",
           "default": null,
-          "description": null,
+          "description": "Dense layout: header and body cells drop from px-3 py-2 to px-2 py-1 (and the root text shrinks to text-sm), so the effective row height genuinely decreases — not just the font size. The flag flows to every cell through DataGridContext{TItem}, so toggling it after first render re-pads the grid live. When virtualization is active (see VirtualItemSize) the default row-height estimate is auto-tightened under Compact unless you pass an explicit VirtualItemSize. Default false.",
           "isCascading": false,
           "captureUnmatched": false,
           "isEditorRequired": false
@@ -23425,7 +23453,7 @@
           "name": "VirtualItemSize",
           "type": "float",
           "default": "41f",
-          "description": "Estimated row height in CSS pixels — used by &lt;Virtualize&gt; to size the scroll spacers. Tune if your rows are taller (dense badges, two-line cells). Default 41px.",
+          "description": "Estimated row height in CSS pixels — used by &lt;Virtualize&gt; to size the scroll spacers. Tune if your rows are taller (dense badges, two-line cells). Default 41px. When Compact is on and this parameter is left at its default, the estimate auto-tightens to CompactVirtualItemSizepx so the scroll spacers match the shorter compact rows; pass an explicit value to override either way.",
           "isCascading": false,
           "captureUnmatched": false,
           "isEditorRequired": false
@@ -24552,6 +24580,24 @@
               "captureUnmatched": false,
               "isEditorRequired": false
             },
+            {
+              "name": "Visible",
+              "type": "bool",
+              "default": "true",
+              "description": "Two-way bindable column visibility. Seeds the registered column's initial visibility and lets a consumer show/hide the column programmatically via @bind-Visible. When the user toggles the column through the built-in column-chooser, VisibleChanged fires so the bound value follows. Default true.",
+              "isCascading": false,
+              "captureUnmatched": false,
+              "isEditorRequired": false
+            },
+            {
+              "name": "VisibleChanged",
+              "type": "EventCallback<bool>",
+              "default": null,
+              "description": "Fires when the column's visibility changes through the built-in UI — the callback half of Visible's two-way binding.",
+              "isCascading": false,
+              "captureUnmatched": false,
+              "isEditorRequired": false
+            },
             {
               "name": "AdditionalAttributes",
               "type": "Dictionary<string, object>?",
@@ -24562,7 +24608,13 @@
               "isEditorRequired": false
             }
           ],
-          "events": [],
+          "events": [
+            {
+              "name": "VisibleChanged",
+              "type": "EventCallback<bool>",
+              "description": "Fires when the column's visibility changes through the built-in UI — the callback half of Visible's two-way binding."
+            }
+          ],
           "enums": [],
           "records": [],
           "gotchas": [],
@@ -26023,16 +26075,21 @@
       },
       "a11y": {
         "roles": [
+          "checkbox",
           "columnheader",
           "dialog",
           "gridcell",
+          "menu",
+          "menuitem",
           "row",
           "status"
         ],
         "ariaAttributes": [
+          "aria-checked",
           "aria-colcount",
           "aria-colindex",
           "aria-expanded",
+          "aria-haspopup",
           "aria-hidden",
           "aria-label",
           "aria-level",
@@ -28128,7 +28185,7 @@
         },
         {
           "title": "Confirmation Dialog",
-          "code": "<Dialog @bind-Open=\"_isOpen\">\n    <DialogTrigger>\n        <Button Variant=\"Button.ButtonVariant.Destructive\">\n            <Blazicon Svg=\"Lucide.Trash\" class=\"h-4 w-4\" /> Delete Account\n        </Button>\n    </DialogTrigger>\n    <DialogContent>\n        <DialogHeader>\n            <DialogTitle>Are you absolutely sure?</DialogTitle>\n            <DialogDescription>\n                This action cannot be undone. This will permanently delete your\n                account and remove your data from our servers.\n            </DialogDescription>\n        </DialogHeader>\n        <DialogFooter>\n            <DialogClose>\n                <Button Variant=\"Button.ButtonVariant.Outline\">Cancel</Button>\n            </DialogClose>\n            <DialogClose>\n                <Button Variant=\"Button.ButtonVariant.Destructive\">Yes, delete account</Button>\n            </DialogClose>\n        </DialogFooter>\n    </DialogContent>\n</Dialog>\n\n@code {\n    private bool _isOpen;\n}"
+          "code": "<Dialog @bind-Open=\"_isOpen\">\n    <DialogTrigger>\n        <Button Variant=\"Button.ButtonVariant.Destructive\">\n            <SvgGlyph Svg=\"@(Lucide.Trash)\" class=\"h-4 w-4\" /> Delete Account\n        </Button>\n    </DialogTrigger>\n    <DialogContent>\n        <DialogHeader>\n            <DialogTitle>Are you absolutely sure?</DialogTitle>\n            <DialogDescription>\n                This action cannot be undone. This will permanently delete your\n                account and remove your data from our servers.\n            </DialogDescription>\n        </DialogHeader>\n        <DialogFooter>\n            <DialogClose>\n                <Button Variant=\"Button.ButtonVariant.Outline\">Cancel</Button>\n            </DialogClose>\n            <DialogClose>\n                <Button Variant=\"Button.ButtonVariant.Destructive\">Yes, delete account</Button>\n            </DialogClose>\n        </DialogFooter>\n    </DialogContent>\n</Dialog>\n\n@code {\n    private bool _isOpen;\n}"
         },
         {
           "title": "Prevent Close",
@@ -28652,7 +28709,7 @@
       "examples": [
         {
           "title": "LTR vs RTL",
-          "code": "@* Same markup, two directions. *@\n<DirectionProvider Direction=\"LayoutDirection.Rtl\">\n    <Flex Align=\"center\" Gap=\"3\">\n        <Blazicon Svg=\"Lucide.Info\" class=\"h-5 w-5 text-primary shrink-0\" />\n        <Lumeo.Text Size=\"sm\">Mirrors under RTL.</Lumeo.Text>\n        <Button Size=\"Lumeo.Size.Sm\" Class=\"ms-auto\">Action</Button>\n    </Flex>\n</DirectionProvider>\n\n@code {\n    // LayoutDirection lives in Lumeo.Services.\n}"
+          "code": "@* Same markup, two directions. *@\n<DirectionProvider Direction=\"LayoutDirection.Rtl\">\n    <Flex Align=\"center\" Gap=\"3\">\n        <SvgGlyph Svg=\"@(Lucide.Info)\" class=\"h-5 w-5 text-primary shrink-0\" />\n        <Lumeo.Text Size=\"sm\">Mirrors under RTL.</Lumeo.Text>\n        <Button Size=\"Lumeo.Size.Sm\" Class=\"ms-auto\">Action</Button>\n    </Flex>\n</DirectionProvider>\n\n@code {\n    // LayoutDirection lives in Lumeo.Services.\n}"
         },
         {
           "title": "Wrapping the whole app",
@@ -28750,11 +28807,11 @@
       "examples": [
         {
           "title": "Basic Dock",
-          "code": "<Dock>\n    <button class=\"w-12 h-12 rounded-xl bg-card border border-border/40 flex items-center justify-center\" title=\"Home\">\n        <Blazicon Svg=\"Lucide.House\" class=\"h-6 w-6 text-foreground/80\" />\n    </button>\n    <button class=\"w-12 h-12 rounded-xl bg-card border border-border/40 flex items-center justify-center\" title=\"Files\">\n        <Blazicon Svg=\"Lucide.FolderOpen\" class=\"h-6 w-6 text-foreground/80\" />\n    </button>\n    <button class=\"w-12 h-12 rounded-xl bg-card border border-border/40 flex items-center justify-center\" title=\"Mail\">\n        <Blazicon Svg=\"Lucide.Mail\" class=\"h-6 w-6 text-foreground/80\" />\n    </button>\n</Dock>"
+          "code": "<Dock>\n    <button class=\"w-12 h-12 rounded-xl bg-card border border-border/40 flex items-center justify-center\" title=\"Home\">\n        <SvgGlyph Svg=\"Lucide.House\" class=\"h-6 w-6 text-foreground/80\" />\n    </button>\n    <button class=\"w-12 h-12 rounded-xl bg-card border border-border/40 flex items-center justify-center\" title=\"Files\">\n        <SvgGlyph Svg=\"Lucide.FolderOpen\" class=\"h-6 w-6 text-foreground/80\" />\n    </button>\n    <button class=\"w-12 h-12 rounded-xl bg-card border border-border/40 flex items-center justify-center\" title=\"Mail\">\n        <SvgGlyph Svg=\"Lucide.Mail\" class=\"h-6 w-6 text-foreground/80\" />\n    </button>\n</Dock>"
         },
         {
           "title": "Custom Scale & Radius",
-          "code": "<Dock MaxScale=\"2.2\" MagnifyRadius=\"120\">\n    <!-- dock items with Blazicon icons -->\n</Dock>"
+          "code": "<Dock MaxScale=\"2.2\" MagnifyRadius=\"120\">\n    <!-- dock items with SvgGlyph icons -->\n</Dock>"
         }
       ],
       "subComponents": {},
@@ -28886,7 +28943,7 @@
         },
         {
           "title": "Filters Drawer",
-          "code": "<Drawer @bind-Open=\"_isFiltersOpen\">\n    <DrawerTrigger>\n        <Button Variant=\"Button.ButtonVariant.Outline\">\n            <Blazicon Svg=\"Lucide.Settings\" class=\"h-4 w-4\" /> Filters\n        </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n        <DrawerHeader>\n            <DrawerTitle>Filter Results</DrawerTitle>\n            <DrawerDescription>Narrow down your search.</DrawerDescription>\n        </DrawerHeader>\n        <Stack Gap=\"4\" Class=\"p-4\">\n            <Select @bind-Value=\"_filterCategory\">\n                <SelectTrigger><span>@(_filterCategory ?? \"All categories\")</span></SelectTrigger>\n                <SelectContent>\n                    <SelectItem Value=\"electronics\">Electronics</SelectItem>\n                    <SelectItem Value=\"clothing\">Clothing</SelectItem>\n                </SelectContent>\n            </Select>\n        </Stack>\n        <DrawerFooter>\n            <DrawerClose><Button Class=\"w-full\">Apply Filters</Button></DrawerClose>\n        </DrawerFooter>\n    </DrawerContent>\n</Drawer>"
+          "code": "<Drawer @bind-Open=\"_isFiltersOpen\">\n    <DrawerTrigger>\n        <Button Variant=\"Button.ButtonVariant.Outline\">\n            <SvgGlyph Svg=\"@(Lucide.Settings)\" class=\"h-4 w-4\" /> Filters\n        </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n        <DrawerHeader>\n            <DrawerTitle>Filter Results</DrawerTitle>\n            <DrawerDescription>Narrow down your search.</DrawerDescription>\n        </DrawerHeader>\n        <Stack Gap=\"4\" Class=\"p-4\">\n            <Select @bind-Value=\"_filterCategory\">\n                <SelectTrigger><span>@(_filterCategory ?? \"All categories\")</span></SelectTrigger>\n                <SelectContent>\n                    <SelectItem Value=\"electronics\">Electronics</SelectItem>\n                    <SelectItem Value=\"clothing\">Clothing</SelectItem>\n                </SelectContent>\n            </Select>\n        </Stack>\n        <DrawerFooter>\n            <DrawerClose><Button Class=\"w-full\">Apply Filters</Button></DrawerClose>\n        </DrawerFooter>\n    </DrawerContent>\n</Drawer>"
         },
         {
           "title": "Prevent Close",
@@ -30619,7 +30676,7 @@
       "examples": [
         {
           "title": "Basic Feature Grid",
-          "code": "<FeatureGrid Title=\"Everything in the box\"\n             Subtitle=\"A focused set of primitives that compose into anything.\">\n    <FeatureItem Title=\"Theming\" Description=\"Every color is a CSS variable.\">\n        <IconContent><Blazicon Svg=\"Lucide.Palette\" class=\"h-5 w-5\" /></IconContent>\n    </FeatureItem>\n    <FeatureItem Title=\"Accessible\" Description=\"WAI-ARIA roles and keyboard navigation.\">\n        <IconContent><Blazicon Svg=\"Lucide.Accessibility\" class=\"h-5 w-5\" /></IconContent>\n    </FeatureItem>\n    <FeatureItem Title=\"Density\" Description=\"Flip a panel between compact and spacious.\">\n        <IconContent><Blazicon Svg=\"Lucide.Rows3\" class=\"h-5 w-5\" /></IconContent>\n    </FeatureItem>\n</FeatureGrid>"
+          "code": "<FeatureGrid Title=\"Everything in the box\"\n             Subtitle=\"A focused set of primitives that compose into anything.\">\n    <FeatureItem Title=\"Theming\" Description=\"Every color is a CSS variable.\">\n        <IconContent><SvgGlyph Svg=\"@(Lucide.Palette)\" class=\"h-5 w-5\" /></IconContent>\n    </FeatureItem>\n    <FeatureItem Title=\"Accessible\" Description=\"WAI-ARIA roles and keyboard navigation.\">\n        <IconContent><SvgGlyph Svg=\"@(Lucide.Accessibility)\" class=\"h-5 w-5\" /></IconContent>\n    </FeatureItem>\n    <FeatureItem Title=\"Density\" Description=\"Flip a panel between compact and spacious.\">\n        <IconContent><SvgGlyph Svg=\"@(Lucide.Rows3)\" class=\"h-5 w-5\" /></IconContent>\n    </FeatureItem>\n</FeatureGrid>"
         },
         {
           "title": "Two Columns",
@@ -30627,7 +30684,7 @@
         },
         {
           "title": "Standalone Feature Item",
-          "code": "<FeatureItem Title=\"Fast by default\" Description=\"A small CSS bundle keeps your app lean.\">\n    <IconContent><Blazicon Svg=\"Lucide.Zap\" class=\"h-5 w-5\" /></IconContent>\n</FeatureItem>"
+          "code": "<FeatureItem Title=\"Fast by default\" Description=\"A small CSS bundle keeps your app lean.\">\n    <IconContent><SvgGlyph Svg=\"@(Lucide.Zap)\" class=\"h-5 w-5\" /></IconContent>\n</FeatureItem>"
         }
       ],
       "subComponents": {},
@@ -30725,7 +30782,7 @@
       "examples": [
         {
           "title": "Basic",
-          "code": "<FeatureItem Title=\"Fast by default\" Description=\"A small CSS bundle keeps your app lean.\">\n    <IconContent><Blazicon Svg=\"Lucide.Zap\" class=\"h-5 w-5\" /></IconContent>\n</FeatureItem>"
+          "code": "<FeatureItem Title=\"Fast by default\" Description=\"A small CSS bundle keeps your app lean.\">\n    <IconContent><SvgGlyph Svg=\"@(Lucide.Zap)\" class=\"h-5 w-5\" /></IconContent>\n</FeatureItem>"
         },
         {
           "title": "Without an Icon",
@@ -30733,11 +30790,11 @@
         },
         {
           "title": "With Extra Content",
-          "code": "<FeatureItem Title=\"Accessible\" Description=\"WAI-ARIA roles, keyboard navigation, and focus management built in.\">\n    <IconContent><Blazicon Svg=\"Lucide.Accessibility\" class=\"h-5 w-5\" /></IconContent>\n    <ChildContent>\n        <a href=\"/docs/accessibility\" class=\"mt-3 inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline\">\n            Learn more\n            <Blazicon Svg=\"Lucide.ArrowRight\" class=\"h-4 w-4\" />\n        </a>\n    </ChildContent>\n</FeatureItem>"
+          "code": "<FeatureItem Title=\"Accessible\" Description=\"WAI-ARIA roles, keyboard navigation, and focus management built in.\">\n    <IconContent><SvgGlyph Svg=\"@(Lucide.Accessibility)\" class=\"h-5 w-5\" /></IconContent>\n    <ChildContent>\n        <a href=\"/docs/accessibility\" class=\"mt-3 inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline\">\n            Learn more\n            <SvgGlyph Svg=\"@(Lucide.ArrowRight)\" class=\"h-4 w-4\" />\n        </a>\n    </ChildContent>\n</FeatureItem>"
         },
         {
           "title": "In a Feature Grid",
-          "code": "<FeatureGrid Columns=\"2\" Title=\"Composes into a grid\">\n    <FeatureItem Title=\"Fast\" Description=\"Small CSS bundle, tree-shakeable.\">\n        <IconContent><Blazicon Svg=\"Lucide.Zap\" class=\"h-5 w-5\" /></IconContent>\n    </FeatureItem>\n    <FeatureItem Title=\"Themeable\" Description=\"Every color is a CSS variable.\">\n        <IconContent><Blazicon Svg=\"Lucide.Palette\" class=\"h-5 w-5\" /></IconContent>\n    </FeatureItem>\n</FeatureGrid>"
+          "code": "<FeatureGrid Columns=\"2\" Title=\"Composes into a grid\">\n    <FeatureItem Title=\"Fast\" Description=\"Small CSS bundle, tree-shakeable.\">\n        <IconContent><SvgGlyph Svg=\"@(Lucide.Zap)\" class=\"h-5 w-5\" /></IconContent>\n    </FeatureItem>\n    <FeatureItem Title=\"Themeable\" Description=\"Every color is a CSS variable.\">\n        <IconContent><SvgGlyph Svg=\"@(Lucide.Palette)\" class=\"h-5 w-5\" /></IconContent>\n    </FeatureItem>\n</FeatureGrid>"
         }
       ],
       "subComponents": {},
@@ -32571,6 +32628,24 @@
           "captureUnmatched": false,
           "isEditorRequired": false
         },
+        {
+          "name": "ZoomLevels",
+          "type": "IReadOnlyList<GanttViewMode>?",
+          "default": null,
+          "description": "Restricts which zoom buttons the toolbar renders, in the given order. When null or empty the full default set (Day, Week, Month, Year) is shown — matching the previous hardcoded toolbar. Only toolbar-representable levels are drawn: QuarterDay / HalfDay have no toolbar button and are silently skipped here (still settable via ViewMode). Example: ZoomLevels=\"new[]{ GanttViewMode.Day, GanttViewMode.Week, GanttViewMode.Month }\".",
+          "isCascading": false,
+          "captureUnmatched": false,
+          "isEditorRequired": false
+        },
+        {
+          "name": "DefaultZoom",
+          "type": "GanttViewMode?",
+          "default": null,
+          "description": "The zoom level selected on first render. When set it seeds the initial toolbar selection (and the level the timeline mounts at), overriding ViewMode's default — handy for uncontrolled usage, e.g. ZoomLevels=\"…\" DefaultZoom=\"GanttViewMode.Week\". After mount, ViewMode / @bind-ViewMode govern as before. Null falls back to ViewMode (the existing behaviour).",
+          "isCascading": false,
+          "captureUnmatched": false,
+          "isEditorRequired": false
+        },
         {
           "name": "OnTaskClick",
           "type": "EventCallback<GanttTask>",
@@ -33816,10 +33891,11 @@
       "name": "Icon",
       "category": "Utility",
       "subcategory": null,
-      "description": "Icon wrapper — renders Lucide icons via Blazicons.",
+      "description": "Icon wrapper — renders the built-in LumeoIcons set (Lucide-derived) or any IconSource natively.",
       "nugetPackage": "Lumeo",
       "files": [
-        "UI/Icon/Icon.razor"
+        "UI/Icon/Icon.razor",
+        "UI/Icon/SvgGlyph.razor"
       ],
       "namespace": "Lumeo",
       "inheritsFrom": null,
@@ -33829,16 +33905,16 @@
           "name": "Name",
           "type": "string?",
           "default": null,
-          "description": "Lucide icon name (PascalCase, e.g. \"Search\", \"ChevronDown\", \"TrendingUp\"). Unknown names fall back to a Circle. Use Svg to supply any icon directly (Lucide or any other Blazicons library).",
+          "description": "Lucide icon name (PascalCase, e.g. \"Search\", \"ChevronDown\", \"TrendingUp\"). Unknown names fall back to a Circle. Use Svg to supply any icon directly (any IconSource, e.g. from a Lumeo icon pack).",
           "isCascading": false,
           "captureUnmatched": false,
           "isEditorRequired": false
         },
         {
           "name": "Svg",
-          "type": "SvgIcon?",
+          "type": "IconSource?",
           "default": null,
-          "description": "Direct Blazicons SvgIcon reference — takes precedence over Name. Lets consumers use any icon library (Lucide, Bootstrap, FluentUI, Material, FontAwesome, Ionicons, MDI).",
+          "description": "Direct IconSource reference — takes precedence over Name. Lets consumers supply any vendored icon (e.g. LumeoIcons.Search or an icon-pack member).",
           "isCascading": false,
           "captureUnmatched": false,
           "isEditorRequired": false
@@ -33852,6 +33928,15 @@
           "captureUnmatched": false,
           "isEditorRequired": false
         },
+        {
+          "name": "StrokeWidth",
+          "type": "double?",
+          "default": null,
+          "description": "Overrides the IconSource's stroke width on the rendered svg. Only affects Stroke-style icons (Lucide, Tabler); ignored for Fill sets (Phosphor, Material, Bootstrap) where stroke is not used. When null (default) the icon source's own StrokeWidth is used.",
+          "isCascading": false,
+          "captureUnmatched": false,
+          "isEditorRequired": false
+        },
         {
           "name": "Title",
           "type": "string?",
@@ -33888,7 +33973,50 @@
         "--color-foreground"
       ],
       "examples": [],
-      "subComponents": {},
+      "subComponents": {
+        "SvgGlyph": {
+          "componentName": "SvgGlyph",
+          "fileName": "SvgGlyph.razor",
+          "namespace": "Lumeo",
+          "inheritsFrom": null,
+          "implements": [],
+          "parameters": [
+            {
+              "name": "Svg",
+              "type": "IconSource",
+              "default": "default!",
+              "description": "The icon to render. Its Content becomes the inner markup and its ViewBox/RenderStyle/ StrokeWidth style the root &lt;svg&gt;.",
+              "isCascading": false,
+              "captureUnmatched": false,
+              "isEditorRequired": true
+            },
+            {
+              "name": "StrokeWidth",
+              "type": "double?",
+              "default": null,
+              "description": "Optional root stroke-width override for Stroke icons. When null (default) the icon's own StrokeWidth is used; ignored for Fill icons.",
+              "isCascading": false,
+              "captureUnmatched": false,
+              "isEditorRequired": false
+            },
+            {
+              "name": "AdditionalAttributes",
+              "type": "Dictionary<string, object>?",
+              "default": null,
+              "description": "Arbitrary attributes (class, aria-*, role, title, …) splatted onto the root &lt;svg&gt;. Sizing is done here via classes (e.g. h-4 w-4), exactly like the icon component it replaces. A consumer-supplied attribute that collides with one this component sets (e.g. fill) wins, because the splat is applied last.",
+              "isCascading": false,
+              "captureUnmatched": true,
+              "isEditorRequired": false
+            }
+          ],
+          "events": [],
+          "enums": [],
+          "records": [],
+          "gotchas": [],
+          "parseFailed": false,
+          "parseError": null
+        }
+      },
       "a11y": {
         "roles": [
           "img"
@@ -35738,7 +35866,7 @@
         },
         {
           "title": "With Icon and Sparkline",
-          "code": "<KpiCard Label=\"Page Views\" Value=\"94,210\" Delta=\"5.7\">\n    <IconContent>\n        <Blazicon Svg=\"Lucide.TrendingUp\" class=\"h-4 w-4\" />\n    </IconContent>\n    <SparkContent>\n        <Sparkline Data=\"@_viewData\" Class=\"h-10 w-full\" />\n    </SparkContent>\n</KpiCard>"
+          "code": "<KpiCard Label=\"Page Views\" Value=\"94,210\" Delta=\"5.7\">\n    <IconContent>\n        <SvgGlyph Svg=\"@(Lucide.TrendingUp)\" class=\"h-4 w-4\" />\n    </IconContent>\n    <SparkContent>\n        <Sparkline Data=\"@_viewData\" Class=\"h-10 w-full\" />\n    </SparkContent>\n</KpiCard>"
         }
       ],
       "subComponents": {},
@@ -37713,7 +37841,7 @@
         },
         {
           "title": "Icons and Disabled Item",
-          "code": "<MegaMenu>\n    <MegaMenuItem Label=\"Products\" Icon=\"Lucide.Box\">\n        <MegaMenuPanel Columns=\"2\">\n            <MegaMenuGroup Title=\"Design\">\n                <MegaMenuLink Href=\"#\" Icon=\"Lucide.Component\" Title=\"Components\" Description=\"Pre-built UI components\" />\n                <MegaMenuLink Href=\"#\" Icon=\"Lucide.LayoutTemplate\" Title=\"Templates\" Description=\"Starter page templates\" />\n            </MegaMenuGroup>\n            <MegaMenuGroup Title=\"Development\">\n                <MegaMenuLink Href=\"#\" Icon=\"Lucide.Terminal\" Title=\"CLI\" Description=\"Command-line tooling\" />\n                <MegaMenuLink Href=\"#\" Icon=\"Lucide.BookOpen\" Title=\"API Reference\" Description=\"Complete API docs\" Disabled=\"true\" />\n            </MegaMenuGroup>\n        </MegaMenuPanel>\n    </MegaMenuItem>\n    <MegaMenuItem Label=\"Docs\" Icon=\"Lucide.FileText\" Href=\"#\" />\n    <MegaMenuItem Label=\"Archived\" Disabled=\"true\" />\n</MegaMenu>"
+          "code": "<MegaMenu>\n    <MegaMenuItem Label=\"Products\" Icon=\"LumeoIcons.Box\">\n        <MegaMenuPanel Columns=\"2\">\n            <MegaMenuGroup Title=\"Design\">\n                <MegaMenuLink Href=\"#\" Icon=\"LumeoIcons.Component\" Title=\"Components\" Description=\"Pre-built UI components\" />\n                <MegaMenuLink Href=\"#\" Icon=\"LumeoIcons.LayoutTemplate\" Title=\"Templates\" Description=\"Starter page templates\" />\n            </MegaMenuGroup>\n            <MegaMenuGroup Title=\"Development\">\n                <MegaMenuLink Href=\"#\" Icon=\"LumeoIcons.Terminal\" Title=\"CLI\" Description=\"Command-line tooling\" />\n                <MegaMenuLink Href=\"#\" Icon=\"LumeoIcons.BookOpen\" Title=\"API Reference\" Description=\"Complete API docs\" Disabled=\"true\" />\n            </MegaMenuGroup>\n        </MegaMenuPanel>\n    </MegaMenuItem>\n    <MegaMenuItem Label=\"Docs\" Icon=\"LumeoIcons.FileText\" Href=\"#\" />\n    <MegaMenuItem Label=\"Archived\" Disabled=\"true\" />\n</MegaMenu>"
         },
         {
           "title": "Orientation — interactive",
@@ -37801,9 +37929,9 @@
             },
             {
               "name": "Icon",
-              "type": "SvgIcon?",
+              "type": "IconSource?",
               "default": null,
-              "description": null,
+              "description": "Optional leading icon. Supply an IconSource from a Lumeo.Icons pack (e.g. Lucide.Home) or from LumeoIcons.",
               "isCascading": false,
               "captureUnmatched": false,
               "isEditorRequired": false
@@ -37903,9 +38031,9 @@
             },
             {
               "name": "Icon",
-              "type": "SvgIcon?",
+              "type": "IconSource?",
               "default": null,
-              "description": null,
+              "description": "Optional leading icon. Supply an IconSource from a Lumeo.Icons pack (e.g. Lucide.Home) or from LumeoIcons.",
               "isCascading": false,
               "captureUnmatched": false,
               "isEditorRequired": false
@@ -41941,9 +42069,9 @@
         },
         {
           "name": "Icon",
-          "type": "Blazicons.SvgIcon?",
+          "type": "Lumeo.IconSource?",
           "default": null,
-          "description": null,
+          "description": "Optional leading icon shown beside the title. Supply an IconSource from a Lumeo.Icons pack (e.g. Lucide.TriangleAlert) or from LumeoIcons.",
           "isCascading": false,
           "captureUnmatched": false,
           "isEditorRequired": false
@@ -42207,6 +42335,15 @@
               "captureUnmatched": false,
               "isEditorRequired": false
             },
+            {
+              "name": "FocusOnOpen",
+              "type": "bool",
+              "default": "true",
+              "description": "When true (default), focus moves into the popover surface on open so its @onkeydown handler receives Escape and keyboard users land inside the dialog (the Radix onOpenAutoFocus default). Set to false when the trigger is a typeable control that must KEEP focus while the popover opens (e.g. DatePicker's keyboard-input trigger) — the surface still positions, registers click-outside and saves/restores focus, it just doesn't steal focus from the trigger on open.",
+              "isCascading": false,
+              "captureUnmatched": false,
+              "isEditorRequired": false
+            },
             {
               "name": "Class",
               "type": "string?",
@@ -42958,7 +43095,7 @@
         },
         {
           "title": "With Leading and Trailing Content",
-          "code": "<PromptInput @bind-Value=\"_prompt\" OnSend=\"@HandleSend\" Placeholder=\"Message Claude…\">\n    <LeadingContent>\n        <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Icon\" Class=\"h-7 w-7\">\n            <Blazicon Svg=\"Lucide.Paperclip\" class=\"h-4 w-4\" />\n        </Button>\n    </LeadingContent>\n    <TrailingContent>\n        <span class=\"text-xs text-muted-foreground\">Shift+Enter for newline</span>\n    </TrailingContent>\n</PromptInput>"
+          "code": "<PromptInput @bind-Value=\"_prompt\" OnSend=\"@HandleSend\" Placeholder=\"Message Claude…\">\n    <LeadingContent>\n        <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Icon\" Class=\"h-7 w-7\">\n            <SvgGlyph Svg=\"@(Lucide.Paperclip)\" class=\"h-4 w-4\" />\n        </Button>\n    </LeadingContent>\n    <TrailingContent>\n        <span class=\"text-xs text-muted-foreground\">Shift+Enter for newline</span>\n    </TrailingContent>\n</PromptInput>"
         }
       ],
       "subComponents": {},
@@ -45701,7 +45838,7 @@
         },
         {
           "title": "Sticky bottom tab bar (realistic example)",
-          "code": "<div class=\"relative h-64 border border-border/40 rounded-md overflow-hidden bg-background\">\n    <div class=\"p-4 space-y-2 overflow-y-auto h-full pb-16\">\n        <!-- scrollable content -->\n    </div>\n    <SafeArea Bottom=\"true\" Top=\"false\"\n              Class=\"absolute bottom-0 left-0 right-0 bg-card border-t border-border/40\">\n        <Flex Justify=\"around\" Class=\"py-3\">\n            <Button Variant=\"Button.ButtonVariant.Ghost\">\n                <Blazicon Svg=\"Lucide.Bell\" class=\"h-5 w-5\" />\n            </Button>\n            <Button Variant=\"Button.ButtonVariant.Ghost\">\n                <Blazicon Svg=\"Lucide.Search\" class=\"h-5 w-5\" />\n            </Button>\n            <Button Variant=\"Button.ButtonVariant.Ghost\">\n                <Blazicon Svg=\"Lucide.User\" class=\"h-5 w-5\" />\n            </Button>\n        </Flex>\n    </SafeArea>\n</div>"
+          "code": "<div class=\"relative h-64 border border-border/40 rounded-md overflow-hidden bg-background\">\n    <div class=\"p-4 space-y-2 overflow-y-auto h-full pb-16\">\n        <!-- scrollable content -->\n    </div>\n    <SafeArea Bottom=\"true\" Top=\"false\"\n              Class=\"absolute bottom-0 left-0 right-0 bg-card border-t border-border/40\">\n        <Flex Justify=\"around\" Class=\"py-3\">\n            <Button Variant=\"Button.ButtonVariant.Ghost\">\n                <SvgGlyph Svg=\"@(Lucide.Bell)\" class=\"h-5 w-5\" />\n            </Button>\n            <Button Variant=\"Button.ButtonVariant.Ghost\">\n                <SvgGlyph Svg=\"@(Lucide.Search)\" class=\"h-5 w-5\" />\n            </Button>\n            <Button Variant=\"Button.ButtonVariant.Ghost\">\n                <SvgGlyph Svg=\"@(Lucide.User)\" class=\"h-5 w-5\" />\n            </Button>\n        </Flex>\n    </SafeArea>\n</div>"
         }
       ],
       "subComponents": {},
@@ -48409,11 +48546,11 @@
       "examples": [
         {
           "title": "Push (Default)",
-          "code": "<SidebarProvider @bind-IsCollapsed=\"_isCollapsed\">\n    <SidebarComponent>\n        <SidebarHeader>\n            <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"semibold\">Acme Inc</Lumeo.Text>\n        </SidebarHeader>\n        <SidebarContent>\n            <SidebarGroup>\n                <SidebarGroupLabel>Platform</SidebarGroupLabel>\n                <SidebarMenu>\n                    <SidebarMenuItem>\n                        <SidebarMenuButton Href=\"#\" IsActive=\"true\">\n                            <IconContent><Blazicon Svg=\"Lucide.House\" class=\"h-4 w-4\" /></IconContent>\n                            <LabelContent><span>Dashboard</span></LabelContent>\n                        </SidebarMenuButton>\n                    </SidebarMenuItem>\n                </SidebarMenu>\n            </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n            <Avatar><AvatarFallback>CN</AvatarFallback></Avatar>\n        </SidebarFooter>\n    </SidebarComponent>\n    <main class=\"flex-1 p-6\">\n        <SidebarTrigger />\n    </main>\n</SidebarProvider>"
+          "code": "<SidebarProvider @bind-IsCollapsed=\"_isCollapsed\">\n    <SidebarComponent>\n        <SidebarHeader>\n            <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"semibold\">Acme Inc</Lumeo.Text>\n        </SidebarHeader>\n        <SidebarContent>\n            <SidebarGroup>\n                <SidebarGroupLabel>Platform</SidebarGroupLabel>\n                <SidebarMenu>\n                    <SidebarMenuItem>\n                        <SidebarMenuButton Href=\"#\" IsActive=\"true\">\n                            <IconContent><SvgGlyph Svg=\"@(Lucide.House)\" class=\"h-4 w-4\" /></IconContent>\n                            <LabelContent><span>Dashboard</span></LabelContent>\n                        </SidebarMenuButton>\n                    </SidebarMenuItem>\n                </SidebarMenu>\n            </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n            <Avatar><AvatarFallback>CN</AvatarFallback></Avatar>\n        </SidebarFooter>\n    </SidebarComponent>\n    <main class=\"flex-1 p-6\">\n        <SidebarTrigger />\n    </main>\n</SidebarProvider>"
         },
         {
           "title": "Overlay",
-          "code": "<SidebarProvider @bind-IsCollapsed=\"_isCollapsed\" Variant=\"SidebarProvider.SidebarVariant.Overlay\">\n    <SidebarComponent>\n        <SidebarHeader>\n            <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"semibold\">Workspace</Lumeo.Text>\n        </SidebarHeader>\n        <SidebarContent>\n            <SidebarGroup>\n                <SidebarGroupLabel>Navigation</SidebarGroupLabel>\n                <SidebarMenu>\n                    <SidebarMenuItem>\n                        <SidebarMenuButton Href=\"#\" IsActive=\"true\">\n                            <IconContent><Blazicon Svg=\"Lucide.House\" class=\"h-4 w-4\" /></IconContent>\n                            <LabelContent><span>Home</span></LabelContent>\n                        </SidebarMenuButton>\n                    </SidebarMenuItem>\n                </SidebarMenu>\n            </SidebarGroup>\n        </SidebarContent>\n    </SidebarComponent>\n    <main class=\"flex-1 p-6\">\n        <SidebarTrigger />\n        <Lumeo.Text Size=\"sm\" Color=\"muted\">Click backdrop to dismiss.</Lumeo.Text>\n    </main>\n</SidebarProvider>"
+          "code": "<SidebarProvider @bind-IsCollapsed=\"_isCollapsed\" Variant=\"SidebarProvider.SidebarVariant.Overlay\">\n    <SidebarComponent>\n        <SidebarHeader>\n            <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"semibold\">Workspace</Lumeo.Text>\n        </SidebarHeader>\n        <SidebarContent>\n            <SidebarGroup>\n                <SidebarGroupLabel>Navigation</SidebarGroupLabel>\n                <SidebarMenu>\n                    <SidebarMenuItem>\n                        <SidebarMenuButton Href=\"#\" IsActive=\"true\">\n                            <IconContent><SvgGlyph Svg=\"@(Lucide.House)\" class=\"h-4 w-4\" /></IconContent>\n                            <LabelContent><span>Home</span></LabelContent>\n                        </SidebarMenuButton>\n                    </SidebarMenuItem>\n                </SidebarMenu>\n            </SidebarGroup>\n        </SidebarContent>\n    </SidebarComponent>\n    <main class=\"flex-1 p-6\">\n        <SidebarTrigger />\n        <Lumeo.Text Size=\"sm\" Color=\"muted\">Click backdrop to dismiss.</Lumeo.Text>\n    </main>\n</SidebarProvider>"
         },
         {
           "title": "Side — interactive",
@@ -48421,7 +48558,7 @@
         },
         {
           "title": "Icon",
-          "code": "<SidebarProvider @bind-IsCollapsed=\"_isCollapsed\" Variant=\"SidebarProvider.SidebarVariant.Icon\">\n    <SidebarComponent>\n        <SidebarContent>\n            <SidebarGroup>\n                <SidebarMenu>\n                    <SidebarMenuItem>\n                        <SidebarMenuButton Href=\"#\" IsActive=\"true\" Tooltip=\"Home\">\n                            <IconContent><Blazicon Svg=\"Lucide.House\" class=\"h-4 w-4\" /></IconContent>\n                            <LabelContent><span>Home</span></LabelContent>\n                        </SidebarMenuButton>\n                    </SidebarMenuItem>\n                </SidebarMenu>\n            </SidebarGroup>\n        </SidebarContent>\n    </SidebarComponent>\n    <main class=\"flex-1 p-6\">\n        <SidebarTrigger />\n        <Lumeo.Text Size=\"sm\" Color=\"muted\">Toggle to expand with labels.</Lumeo.Text>\n    </main>\n</SidebarProvider>"
+          "code": "<SidebarProvider @bind-IsCollapsed=\"_isCollapsed\" Variant=\"SidebarProvider.SidebarVariant.Icon\">\n    <SidebarComponent>\n        <SidebarContent>\n            <SidebarGroup>\n                <SidebarMenu>\n                    <SidebarMenuItem>\n                        <SidebarMenuButton Href=\"#\" IsActive=\"true\" Tooltip=\"Home\">\n                            <IconContent><SvgGlyph Svg=\"@(Lucide.House)\" class=\"h-4 w-4\" /></IconContent>\n                            <LabelContent><span>Home</span></LabelContent>\n                        </SidebarMenuButton>\n                    </SidebarMenuItem>\n                </SidebarMenu>\n            </SidebarGroup>\n        </SidebarContent>\n    </SidebarComponent>\n    <main class=\"flex-1 p-6\">\n        <SidebarTrigger />\n        <Lumeo.Text Size=\"sm\" Color=\"muted\">Toggle to expand with labels.</Lumeo.Text>\n    </main>\n</SidebarProvider>"
         }
       ],
       "subComponents": {
@@ -53378,7 +53515,8 @@
           "values": [
             "Default",
             "Card",
-            "Pill"
+            "Pill",
+            "Underline"
           ],
           "description": null
         },
@@ -53419,7 +53557,7 @@
         },
         {
           "title": "Icon reveal",
-          "code": "<Tabs ActiveValue=\"members\" IconReveal Variant=\"Tabs.TabsVariant.Card\">\n    <TabsList>\n        <TabsTrigger Value=\"members\">\n            <IconContent><Blazicon Svg=\"Lucide.Users\" class=\"h-4 w-4\" /></IconContent>\n            Members\n        </TabsTrigger>\n        <TabsTrigger Value=\"credentials\">\n            <IconContent><Blazicon Svg=\"Lucide.Award\" class=\"h-4 w-4\" /></IconContent>\n            Shared Credentials\n        </TabsTrigger>\n        @* …more icon tabs… *@\n    </TabsList>\n    <TabsContent Value=\"members\">Team members and their roles.</TabsContent>\n    <TabsContent Value=\"credentials\">Credentials shared with this team.</TabsContent>\n</Tabs>"
+          "code": "<Tabs ActiveValue=\"members\" IconReveal Variant=\"Tabs.TabsVariant.Card\">\n    <TabsList>\n        <TabsTrigger Value=\"members\">\n            <IconContent><SvgGlyph Svg=\"@(Lucide.Users)\" class=\"h-4 w-4\" /></IconContent>\n            Members\n        </TabsTrigger>\n        <TabsTrigger Value=\"credentials\">\n            <IconContent><SvgGlyph Svg=\"@(Lucide.Award)\" class=\"h-4 w-4\" /></IconContent>\n            Shared Credentials\n        </TabsTrigger>\n        @* …more icon tabs… *@\n    </TabsList>\n    <TabsContent Value=\"members\">Team members and their roles.</TabsContent>\n    <TabsContent Value=\"credentials\">Credentials shared with this team.</TabsContent>\n</Tabs>"
         },
         {
           "title": "Notifications",
@@ -54757,6 +54895,15 @@
           "captureUnmatched": false,
           "isEditorRequired": false
         },
+        {
+          "name": "IncludeSystem",
+          "type": "bool",
+          "default": "true",
+          "description": "When true (default) the toggle walks the full three-way mode cycle (System → Dark → Light). Set to false for a binary Light ↔ Dark toggle: every click visibly changes the theme — the System step is skipped (useful in app shells where an \"invisible\" System→Dark click reads as a broken button when the OS is already dark).",
+          "isCascading": false,
+          "captureUnmatched": false,
+          "isEditorRequired": false
+        },
         {
           "name": "AdditionalAttributes",
           "type": "Dictionary<string, object>?",
@@ -54937,7 +55084,7 @@
         },
         {
           "title": "With Icons",
-          "code": "<Timeline>\n    <TimelineItem Title=\"Account created\" Time=\"9:00 AM\">\n        <IconContent><Blazicon Svg=\"Lucide.UserPlus\" class=\"h-4 w-4\" /></IconContent>\n    </TimelineItem>\n    <TimelineItem Title=\"Profile updated\" Time=\"10:30 AM\">\n        <IconContent><Blazicon Svg=\"Lucide.Pencil\" class=\"h-4 w-4\" /></IconContent>\n    </TimelineItem>\n</Timeline>"
+          "code": "<Timeline>\n    <TimelineItem Title=\"Account created\" Time=\"9:00 AM\">\n        <IconContent><SvgGlyph Svg=\"@(Lucide.UserPlus)\" class=\"h-4 w-4\" /></IconContent>\n    </TimelineItem>\n    <TimelineItem Title=\"Profile updated\" Time=\"10:30 AM\">\n        <IconContent><SvgGlyph Svg=\"@(Lucide.Pencil)\" class=\"h-4 w-4\" /></IconContent>\n    </TimelineItem>\n</Timeline>"
         },
         {
           "title": "Alternate Layout",
@@ -56091,19 +56238,19 @@
       "examples": [
         {
           "title": "Default",
-          "code": "<Toggle @bind-Pressed=\"_bold\">\n    <Blazicon Svg=\"Lucide.Bold\" class=\"h-4 w-4\" />\n</Toggle>\n\n@code {\n    private bool _bold;\n}"
+          "code": "<Toggle @bind-Pressed=\"_bold\">\n    <SvgGlyph Svg=\"@(Lucide.Bold)\" class=\"h-4 w-4\" />\n</Toggle>\n\n@code {\n    private bool _bold;\n}"
         },
         {
           "title": "Variants",
-          "code": "<Toggle @bind-Pressed=\"_pressed1\">\n    <Blazicon Svg=\"Lucide.Bold\" class=\"h-4 w-4\" />\n</Toggle>\n<Toggle Variant=\"Toggle.ToggleVariant.Outline\" @bind-Pressed=\"_pressed2\">\n    <Blazicon Svg=\"Lucide.Italic\" class=\"h-4 w-4\" />\n</Toggle>"
+          "code": "<Toggle @bind-Pressed=\"_pressed1\">\n    <SvgGlyph Svg=\"@(Lucide.Bold)\" class=\"h-4 w-4\" />\n</Toggle>\n<Toggle Variant=\"Toggle.ToggleVariant.Outline\" @bind-Pressed=\"_pressed2\">\n    <SvgGlyph Svg=\"@(Lucide.Italic)\" class=\"h-4 w-4\" />\n</Toggle>"
         },
         {
           "title": "Sizes",
-          "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>"
+          "code": "<Toggle Size=\"Lumeo.Size.Sm\" @bind-Pressed=\"_sm\">\n    <SvgGlyph Svg=\"@(Lucide.Bold)\" class=\"h-3 w-3\" />\n</Toggle>\n<Toggle @bind-Pressed=\"_md\">\n    <SvgGlyph Svg=\"@(Lucide.Bold)\" class=\"h-4 w-4\" />\n</Toggle>\n<Toggle Size=\"Lumeo.Size.Lg\" @bind-Pressed=\"_lg\">\n    <SvgGlyph Svg=\"@(Lucide.Bold)\" class=\"h-5 w-5\" />\n</Toggle>"
         },
         {
           "title": "With Text",
-          "code": "<Toggle @bind-Pressed=\"_pressed\">\n    <Blazicon Svg=\"Lucide.Bold\" class=\"h-4 w-4\" />\n    Bold\n</Toggle>"
+          "code": "<Toggle @bind-Pressed=\"_pressed\">\n    <SvgGlyph Svg=\"@(Lucide.Bold)\" class=\"h-4 w-4\" />\n    Bold\n</Toggle>"
         }
       ],
       "subComponents": {},
@@ -56277,15 +56424,15 @@
       "examples": [
         {
           "title": "Single Selection",
-          "code": "<ToggleGroup Type=\"ToggleGroup.ToggleGroupType.Single\">\n    <ToggleGroupItem Value=\"bold\">\n        <Blazicon Svg=\"Lucide.Bold\" class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem Value=\"italic\">\n        <Blazicon Svg=\"Lucide.Italic\" class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem Value=\"underline\">\n        <Blazicon Svg=\"Lucide.Underline\" class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n</ToggleGroup>"
+          "code": "<ToggleGroup Type=\"ToggleGroup.ToggleGroupType.Single\">\n    <ToggleGroupItem Value=\"bold\">\n        <SvgGlyph Svg=\"@(Lucide.Bold)\" class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem Value=\"italic\">\n        <SvgGlyph Svg=\"@(Lucide.Italic)\" class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem Value=\"underline\">\n        <SvgGlyph Svg=\"@(Lucide.Underline)\" class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n</ToggleGroup>"
         },
         {
           "title": "Multiple Selection",
-          "code": "<ToggleGroup Type=\"ToggleGroup.ToggleGroupType.Multiple\">\n    <ToggleGroupItem Value=\"bold\">\n        <Blazicon Svg=\"Lucide.Bold\" class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem Value=\"italic\">\n        <Blazicon Svg=\"Lucide.Italic\" class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem Value=\"underline\">\n        <Blazicon Svg=\"Lucide.Underline\" class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n</ToggleGroup>"
+          "code": "<ToggleGroup Type=\"ToggleGroup.ToggleGroupType.Multiple\">\n    <ToggleGroupItem Value=\"bold\">\n        <SvgGlyph Svg=\"@(Lucide.Bold)\" class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem Value=\"italic\">\n        <SvgGlyph Svg=\"@(Lucide.Italic)\" class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem Value=\"underline\">\n        <SvgGlyph Svg=\"@(Lucide.Underline)\" class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n</ToggleGroup>"
         },
         {
           "title": "Outline Variant",
-          "code": "<ToggleGroup Type=\"ToggleGroup.ToggleGroupType.Single\" Variant=\"ToggleGroup.ToggleGroupVariant.Outline\">\n    <ToggleGroupItem Value=\"left\">\n        <Blazicon Svg=\"Lucide.AlignLeft\" class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem Value=\"center\">\n        <Blazicon Svg=\"Lucide.AlignCenter\" class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem Value=\"right\">\n        <Blazicon Svg=\"Lucide.AlignRight\" class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n</ToggleGroup>"
+          "code": "<ToggleGroup Type=\"ToggleGroup.ToggleGroupType.Single\" Variant=\"ToggleGroup.ToggleGroupVariant.Outline\">\n    <ToggleGroupItem Value=\"left\">\n        <SvgGlyph Svg=\"@(Lucide.AlignLeft)\" class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem Value=\"center\">\n        <SvgGlyph Svg=\"@(Lucide.AlignCenter)\" class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem Value=\"right\">\n        <SvgGlyph Svg=\"@(Lucide.AlignRight)\" class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n</ToggleGroup>"
         },
         {
           "title": "Sizes",
@@ -56512,7 +56659,7 @@
       "examples": [
         {
           "title": "Basic Toolbar",
-          "code": "<Toolbar>\n    <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">\n        <Blazicon Svg=\"Lucide.Bold\" class=\"h-4 w-4\" />\n    </Button>\n    <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">\n        <Blazicon Svg=\"Lucide.Italic\" class=\"h-4 w-4\" />\n    </Button>\n    <ToolbarSeparator />\n    <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">\n        <Blazicon Svg=\"Lucide.AlignLeft\" class=\"h-4 w-4\" />\n    </Button>\n</Toolbar>"
+          "code": "<Toolbar>\n    <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">\n        <SvgGlyph Svg=\"@(Lucide.Bold)\" class=\"h-4 w-4\" />\n    </Button>\n    <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">\n        <SvgGlyph Svg=\"@(Lucide.Italic)\" class=\"h-4 w-4\" />\n    </Button>\n    <ToolbarSeparator />\n    <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">\n        <SvgGlyph Svg=\"@(Lucide.AlignLeft)\" class=\"h-4 w-4\" />\n    </Button>\n</Toolbar>"
         },
         {
           "title": "With Spacer and Groups",
@@ -56892,7 +57039,7 @@
         },
         {
           "title": "With Icons",
-          "code": "<Tooltip>\n    <TooltipTrigger>\n        <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Icon\">\n            <Blazicon Svg=\"Lucide.Bold\" class=\"h-4 w-4\" />\n        </Button>\n    </TooltipTrigger>\n    <TooltipContent>\n        <p>Bold</p>\n    </TooltipContent>\n</Tooltip>\n\n<Tooltip>\n    <TooltipTrigger>\n        <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Icon\">\n            <Blazicon Svg=\"Lucide.Italic\" class=\"h-4 w-4\" />\n        </Button>\n    </TooltipTrigger>\n    <TooltipContent>\n        <p>Italic</p>\n    </TooltipContent>\n</Tooltip>"
+          "code": "<Tooltip>\n    <TooltipTrigger>\n        <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Icon\">\n            <SvgGlyph Svg=\"@(Lucide.Bold)\" class=\"h-4 w-4\" />\n        </Button>\n    </TooltipTrigger>\n    <TooltipContent>\n        <p>Bold</p>\n    </TooltipContent>\n</Tooltip>\n\n<Tooltip>\n    <TooltipTrigger>\n        <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Icon\">\n            <SvgGlyph Svg=\"@(Lucide.Italic)\" class=\"h-4 w-4\" />\n        </Button>\n    </TooltipTrigger>\n    <TooltipContent>\n        <p>Italic</p>\n    </TooltipContent>\n</Tooltip>"
         },
         {
           "title": "Placement",
@@ -58391,7 +58538,7 @@
           "name": "Icon",
           "type": "RenderFragment?",
           "default": null,
-          "description": "Custom leading icon. Defaults to Lucide.Upload.",
+          "description": "Custom leading icon. Defaults to LumeoIcons.Upload.",
           "isCascading": false,
           "captureUnmatched": false,
           "isEditorRequired": false
@@ -58454,7 +58601,7 @@
         },
         {
           "title": "Custom Label and Icon",
-          "code": "<UploadTrigger Variant=\"Button.ButtonVariant.Outline\" OnFilesSelected=\"@HandleFiles\">\n    <Icon>\n        <Blazicon Svg=\"Lucide.Image\" class=\"h-4 w-4\" />\n    </Icon>\n    <ChildContent>\n        <span>Replace photo</span>\n    </ChildContent>\n</UploadTrigger>\n\n<UploadTrigger Size=\"Button.ButtonSize.Icon\" Variant=\"Button.ButtonVariant.Ghost\" OnFilesSelected=\"@HandleFiles\" aria-label=\"Attach file\">\n    <Icon>\n        <Blazicon Svg=\"Lucide.Paperclip\" class=\"h-4 w-4\" />\n    </Icon>\n    @* Empty ChildContent suppresses the default text label *@\n    <ChildContent></ChildContent>\n</UploadTrigger>"
+          "code": "<UploadTrigger Variant=\"Button.ButtonVariant.Outline\" OnFilesSelected=\"@HandleFiles\">\n    <Icon>\n        <SvgGlyph Svg=\"@(Lucide.Image)\" class=\"h-4 w-4\" />\n    </Icon>\n    <ChildContent>\n        <span>Replace photo</span>\n    </ChildContent>\n</UploadTrigger>\n\n<UploadTrigger Size=\"Button.ButtonSize.Icon\" Variant=\"Button.ButtonVariant.Ghost\" OnFilesSelected=\"@HandleFiles\" aria-label=\"Attach file\">\n    <Icon>\n        <SvgGlyph Svg=\"@(Lucide.Paperclip)\" class=\"h-4 w-4\" />\n    </Icon>\n    @* Empty ChildContent suppresses the default text label *@\n    <ChildContent></ChildContent>\n</UploadTrigger>"
         }
       ],
       "subComponents": {},