@lumeo-ui/mcp-server 2.0.0 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.js +3 -3
  2. package/package.json +1 -1
  3. package/src/components-api.json +1267 -370
  4. package/src/registry.json +89 -8
package/src/components-api.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "$schema": "https://lumeo.nativ.sh/components-api-schema.json",
3
- "version": "2.0.0-rc.38",
4
- "generated": "2026-05-13T07:19:07.9817901Z",
3
+ "version": "2.0.1",
4
+ "generated": "2026-05-19T14:33:49.3382347Z",
5
5
  "stats": {
6
- "componentCount": 145,
7
- "totalParameters": 3438,
8
- "totalEnums": 101,
9
- "totalRecords": 58,
6
+ "componentCount": 149,
7
+ "totalParameters": 3510,
8
+ "totalEnums": 104,
9
+ "totalRecords": 59,
10
10
  "thinFallbacks": []
11
11
  },
12
12
  "themeTokens": [
@@ -281,7 +281,7 @@
281
281
  "examples": [
282
282
  {
283
283
  "title": "Calendar View",
284
- "code": "<!-- Full calendar with event chips, filters, mini-calendar, upcoming list, and event composer -->\r\n<Flex Gap=\"4\" Class=\"min-w-[780px]\">\r\n\r\n <!-- Main Month Grid -->\r\n <Card Class=\"flex-1\">\r\n <CardHeader>\r\n <Flex Align=\"center\" Justify=\"between\">\r\n <Flex Align=\"center\" Gap=\"2\">\r\n <Button Variant=\"Outline\" Size=\"Icon\" OnClick=\"PrevMonth\">\r\n <DynamicIcon Name=\"ChevronLeft\" Class=\"h-4 w-4\" />\r\n </Button>\r\n <Heading Level=\"3\">@_currentMonth.ToString(\"MMMM yyyy\")</Heading>\r\n <Button Variant=\"Outline\" Size=\"Icon\" OnClick=\"NextMonth\">\r\n <DynamicIcon Name=\"ChevronRight\" Class=\"h-4 w-4\" />\r\n </Button>\r\n </Flex>\r\n <Flex Gap=\"2\">\r\n <Button Variant=\"Ghost\" Size=\"Sm\" OnClick=\"GoToToday\">Today</Button>\r\n <Button Variant=\"Default\" Size=\"Sm\" OnClick=\"() => _showComposer = true\">\r\n <DynamicIcon Name=\"Plus\" Class=\"h-4 w-4\" /> New Event\r\n </Button>\r\n </Flex>\r\n </Flex>\r\n </CardHeader>\r\n <CardContent>\r\n <!-- 7-column grid with event chips -->\r\n <div class=\"grid grid-cols-7 gap-px bg-border/40 rounded-lg overflow-hidden border border-border/40\">\r\n @for (int i = 0; i < totalCells; i++)\r\n {\r\n <div class=\"bg-background p-1.5 min-h-[80px] hover:bg-accent/60 transition-colors\">\r\n <!-- Day number with today highlight -->\r\n <span class=\"text-xs font-medium w-6 h-6 flex items-center justify-center rounded-full\">@dayNum</span>\r\n <!-- Event chips colored by category -->\r\n <div class=\"flex flex-col gap-0.5\">\r\n <div class=\"rounded px-1 py-0.5 text-[10px] font-medium bg-primary/15 text-primary truncate\">\r\n 9:00 Q2 All-hands\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <!-- Category legend with filter toggles -->\r\n <Flex Class=\"items-center gap-4 flex-wrap mt-4 pt-3 border-t border-border/40\">\r\n <button class=\"flex items-center gap-1.5 text-xs\">\r\n <span class=\"h-2.5 w-2.5 rounded-full bg-primary\"></span>\r\n <span class=\"text-muted-foreground\">Work</span>\r\n </button>\r\n <!-- ... more categories -->\r\n </Flex>\r\n </CardContent>\r\n </Card>\r\n\r\n <!-- Sidebar: mini-calendar, upcoming events, event detail/composer -->\r\n <Stack Gap=\"4\" Class=\"w-[280px]\">\r\n <!-- Mini calendar, upcoming list, event composer shown here -->\r\n </Stack>\r\n</Flex>\r\n\r\n@code {\r\n private DateTime _currentMonth = new DateTime(DateTime.Today.Year, DateTime.Today.Month, 1);\r\n private DateTime _selectedDate = DateTime.Today;\r\n\r\n private void PrevMonth() => _currentMonth = _currentMonth.AddMonths(-1);\r\n private void NextMonth() => _currentMonth = _currentMonth.AddMonths(1);\r\n private void GoToToday() { _currentMonth = new(DateTime.Today.Year, DateTime.Today.Month, 1); _selectedDate = DateTime.Today; }\r\n}"
284
+ "code": "<!-- Full calendar with event chips, filters, mini-calendar, upcoming list, and event composer -->\n<Flex Gap=\"4\" Class=\"min-w-[780px]\">\n\n <!-- Main Month Grid -->\n <Card Class=\"flex-1\">\n <CardHeader>\n <Flex Align=\"center\" Justify=\"between\">\n <Flex Align=\"center\" Gap=\"2\">\n <Button Variant=\"Outline\" Size=\"Icon\" OnClick=\"PrevMonth\">\n <DynamicIcon Name=\"ChevronLeft\" Class=\"h-4 w-4\" />\n </Button>\n <Heading Level=\"3\">@_currentMonth.ToString(\"MMMM yyyy\")</Heading>\n <Button Variant=\"Outline\" Size=\"Icon\" OnClick=\"NextMonth\">\n <DynamicIcon Name=\"ChevronRight\" Class=\"h-4 w-4\" />\n </Button>\n </Flex>\n <Flex Gap=\"2\">\n <Button Variant=\"Ghost\" Size=\"Sm\" OnClick=\"GoToToday\">Today</Button>\n <Button Variant=\"Default\" Size=\"Sm\" OnClick=\"() => _showComposer = true\">\n <DynamicIcon Name=\"Plus\" Class=\"h-4 w-4\" /> New Event\n </Button>\n </Flex>\n </Flex>\n </CardHeader>\n <CardContent>\n <!-- 7-column grid with event chips -->\n <div class=\"grid grid-cols-7 gap-px bg-border/40 rounded-lg overflow-hidden border border-border/40\">\n @for (int i = 0; i < totalCells; i++)\n {\n <div class=\"bg-background p-1.5 min-h-[80px] hover:bg-accent/60 transition-colors\">\n <!-- Day number with today highlight -->\n <span class=\"text-xs font-medium w-6 h-6 flex items-center justify-center rounded-full\">@dayNum</span>\n <!-- Event chips colored by category -->\n <div class=\"flex flex-col gap-0.5\">\n <div class=\"rounded px-1 py-0.5 text-[10px] font-medium bg-primary/15 text-primary truncate\">\n 9:00 Q2 All-hands\n </div>\n </div>\n </div>\n }\n </div>\n <!-- Category legend with filter toggles -->\n <Flex Class=\"items-center gap-4 flex-wrap mt-4 pt-3 border-t border-border/40\">\n <button class=\"flex items-center gap-1.5 text-xs\">\n <span class=\"h-2.5 w-2.5 rounded-full bg-primary\"></span>\n <span class=\"text-muted-foreground\">Work</span>\n </button>\n <!-- ... more categories -->\n </Flex>\n </CardContent>\n </Card>\n\n <!-- Sidebar: mini-calendar, upcoming events, event detail/composer -->\n <Stack Gap=\"4\" Class=\"w-[280px]\">\n <!-- Mini calendar, upcoming list, event composer shown here -->\n </Stack>\n</Flex>\n\n@code {\n private DateTime _currentMonth = new DateTime(DateTime.Today.Year, DateTime.Today.Month, 1);\n private DateTime _selectedDate = DateTime.Today;\n\n private void PrevMonth() => _currentMonth = _currentMonth.AddMonths(-1);\n private void NextMonth() => _currentMonth = _currentMonth.AddMonths(1);\n private void GoToToday() { _currentMonth = new(DateTime.Today.Year, DateTime.Today.Month, 1); _selectedDate = DateTime.Today; }\n}"
285
285
  }
286
286
  ]
287
287
  },
@@ -325,7 +325,7 @@
325
325
  "examples": [
326
326
  {
327
327
  "title": "File Browser",
328
- "code": "<!-- File Manager — Lumeo pattern -->\r\n<div class=\"flex rounded-[var(--radius-lg)] border border-border/40 overflow-hidden\" style=\"min-height:620px;\">\r\n\r\n <!-- Sidebar w-60 -->\r\n <div class=\"w-60 shrink-0 flex flex-col border-r border-border/40 bg-muted/20\">\r\n <!-- Workspace badge -->\r\n <div class=\"flex items-center gap-2.5 px-4 py-3.5 border-b border-border/40\">\r\n <div class=\"h-7 w-7 rounded-md bg-primary flex items-center justify-center\">\r\n <DynamicIcon Name=\"Layers\" Class=\"h-4 w-4 text-primary-foreground\" />\r\n </div>\r\n <Lumeo.Text Class=\"text-sm font-semibold truncate\">Lumeo Design</Lumeo.Text>\r\n </div>\r\n <!-- Nav items -->\r\n @foreach (var n in _navItems) {\r\n <button class=\"flex items-center gap-2.5 rounded-md px-2.5 py-2 text-sm text-muted-foreground hover:bg-accent/50\">\r\n <DynamicIcon Name=\"@n.Icon\" Class=\"h-4 w-4 shrink-0\" /> @n.Label\r\n </button>\r\n }\r\n <!-- Storage -->\r\n <Progress Value=\"28\" Class=\"h-1.5\" />\r\n <Lumeo.Text Class=\"text-xs text-muted-foreground\">14.2 / 50 GB</Lumeo.Text>\r\n <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\" Class=\"w-full\">Upgrade plan</Button>\r\n </div>\r\n\r\n <!-- Main -->\r\n <div class=\"flex-1 flex flex-col\">\r\n <!-- Toolbar: breadcrumb, search, view toggle, sort, New button -->\r\n <div class=\"flex items-center gap-3 px-5 py-3 border-b border-border/40\">\r\n <Breadcrumb Class=\"flex-1\">...</Breadcrumb>\r\n <Input placeholder=\"Search files…\" Class=\"h-8 w-48\" />\r\n <!-- grid/list toggle, sort select, New dropdown -->\r\n </div>\r\n\r\n <!-- Content area -->\r\n <div class=\"flex-1 overflow-auto p-5 space-y-6\">\r\n <!-- Pinned folders: 4-col grid of folder cards -->\r\n <!-- Recent files: 4-col thumbnail grid with hover actions -->\r\n <!-- All files: full Table with owner, modified, size, action icons -->\r\n </div>\r\n </div>\r\n</div>"
328
+ "code": "<!-- File Manager — Lumeo pattern -->\n<div class=\"flex rounded-[var(--radius-lg)] border border-border/40 overflow-hidden\" style=\"min-height:620px;\">\n\n <!-- Sidebar w-60 -->\n <div class=\"w-60 shrink-0 flex flex-col border-r border-border/40 bg-muted/20\">\n <!-- Workspace badge -->\n <div class=\"flex items-center gap-2.5 px-4 py-3.5 border-b border-border/40\">\n <div class=\"h-7 w-7 rounded-md bg-primary flex items-center justify-center\">\n <DynamicIcon Name=\"Layers\" Class=\"h-4 w-4 text-primary-foreground\" />\n </div>\n <Lumeo.Text Class=\"text-sm font-semibold truncate\">Lumeo Design</Lumeo.Text>\n </div>\n <!-- Nav items -->\n @foreach (var n in _navItems) {\n <button class=\"flex items-center gap-2.5 rounded-md px-2.5 py-2 text-sm text-muted-foreground hover:bg-accent/50\">\n <DynamicIcon Name=\"@n.Icon\" Class=\"h-4 w-4 shrink-0\" /> @n.Label\n </button>\n }\n <!-- Storage -->\n <Progress Value=\"28\" Class=\"h-1.5\" />\n <Lumeo.Text Class=\"text-xs text-muted-foreground\">14.2 / 50 GB</Lumeo.Text>\n <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\" Class=\"w-full\">Upgrade plan</Button>\n </div>\n\n <!-- Main -->\n <div class=\"flex-1 flex flex-col\">\n <!-- Toolbar: breadcrumb, search, view toggle, sort, New button -->\n <div class=\"flex items-center gap-3 px-5 py-3 border-b border-border/40\">\n <Breadcrumb Class=\"flex-1\">...</Breadcrumb>\n <Input placeholder=\"Search files…\" Class=\"h-8 w-48\" />\n <!-- grid/list toggle, sort select, New dropdown -->\n </div>\n\n <!-- Content area -->\n <div class=\"flex-1 overflow-auto p-5 space-y-6\">\n <!-- Pinned folders: 4-col grid of folder cards -->\n <!-- Recent files: 4-col thumbnail grid with hover actions -->\n <!-- All files: full Table with owner, modified, size, action icons -->\n </div>\n </div>\n</div>"
329
329
  }
330
330
  ]
331
331
  },
@@ -419,7 +419,7 @@
419
419
  "examples": [
420
420
  {
421
421
  "title": "Task Tracker",
422
- "code": "<!-- Task Tracker — Lumeo pattern -->\r\n<div class=\"flex flex-col rounded-[var(--radius-lg)] border border-border/40 overflow-hidden\" style=\"min-height:640px;\">\r\n\r\n <!-- Top bar: breadcrumb, view tabs, search, filter, new issue -->\r\n <div class=\"flex items-center gap-3 px-4 py-3 border-b border-border/40\">\r\n <Lumeo.Text Class=\"font-semibold text-foreground\">Lumeo</Lumeo.Text>\r\n <DynamicIcon Name=\"ChevronRight\" Class=\"h-3.5 w-3.5 text-muted-foreground\" />\r\n <Lumeo.Text Class=\"text-muted-foreground\">Q2 Sprint</Lumeo.Text>\r\n\r\n <Tabs ActiveValue=\"@_activeView\" ActiveValueChanged=\"@(v => _activeView = v)\" Class=\"flex-1\">\r\n <TabsList Class=\"h-8\">\r\n <TabsTrigger Value=\"all\">All</TabsTrigger>\r\n <TabsTrigger Value=\"mine\">My Issues</TabsTrigger>\r\n <TabsTrigger Value=\"active\">Active</TabsTrigger>\r\n <TabsTrigger Value=\"backlog\">Backlog</TabsTrigger>\r\n <TabsTrigger Value=\"done\">Done</TabsTrigger>\r\n </TabsList>\r\n </Tabs>\r\n\r\n <Input placeholder=\"Search issues…\" Class=\"h-8 w-44\" />\r\n <Button Size=\"Button.ButtonSize.Sm\" Class=\"h-8\"><DynamicIcon Name=\"Plus\" Class=\"h-4 w-4\" /> New issue</Button>\r\n </div>\r\n\r\n <!-- Body: nav rail + task list -->\r\n <div class=\"flex flex-1 overflow-hidden\">\r\n\r\n <!-- Left nav rail w-56 -->\r\n <div class=\"w-56 shrink-0 border-r border-border/40 bg-muted/10 flex flex-col p-2 gap-0.5\">\r\n @foreach (var n in _navRail) {\r\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\">\r\n <DynamicIcon Name=\"@n.Icon\" Class=\"h-4 w-4 shrink-0\" /> @n.Label\r\n @if (n.Count > 0) { <span class=\"ml-auto text-xs\">@n.Count</span> }\r\n </button>\r\n }\r\n </div>\r\n\r\n <!-- Task list, grouped by Status -->\r\n <div class=\"flex-1 overflow-auto\">\r\n @foreach (var group in VisibleTasks.GroupBy(t => t.Status).OrderBy(g => StatusOrder(g.Key))) {\r\n <!-- Group header with collapse toggle -->\r\n <div class=\"flex items-center gap-2.5 px-4 py-2.5 border-b bg-muted/20 sticky top-0\">\r\n <DynamicIcon Name=\"ChevronDown\" Class=\"h-3.5 w-3.5 text-muted-foreground\" />\r\n <DynamicIcon Name=\"@StatusIcon(group.Key)\" Class=\"h-4 w-4\" />\r\n <Lumeo.Text Class=\"text-sm font-semibold\">@group.Key</Lumeo.Text>\r\n <Badge Variant=\"Badge.BadgeVariant.Secondary\">@group.Count()</Badge>\r\n </div>\r\n <!-- Task rows -->\r\n @foreach (var t in group) {\r\n <div class=\"group flex items-center gap-3 px-4 py-2.5 border-b hover:bg-accent/30 transition-colors cursor-pointer\">\r\n <Checkbox Class=\"opacity-0 group-hover:opacity-100\" />\r\n <DynamicIcon Name=\"@PriorityIcon(t.Priority)\" Class=\"@PriorityColor(t.Priority)\" />\r\n <Lumeo.Text Class=\"text-xs text-muted-foreground font-mono w-16\">@t.Id</Lumeo.Text>\r\n <Lumeo.Text Class=\"flex-1 text-sm font-medium truncate\">@t.Title</Lumeo.Text>\r\n @foreach (var label in t.Labels.Take(3)) { <Badge Variant=\"Badge.BadgeVariant.Secondary\">@label</Badge> }\r\n <Avatar Size=\"Avatar.AvatarSize.Sm\"><AvatarFallback>@t.AssigneeInitials</AvatarFallback></Avatar>\r\n <Lumeo.Text Class=\"text-xs text-muted-foreground\">@t.DueDate.ToString(\"MMM d\")</Lumeo.Text>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Bulk action bar (shown when _selectedTasks.Count > 0) -->\r\n @if (_selectedTasks.Count > 0) {\r\n <div class=\"flex items-center gap-3 px-4 py-3 border-t border-border/40 bg-accent/20\">\r\n <Lumeo.Text Class=\"text-sm font-medium\">@_selectedTasks.Count selected</Lumeo.Text>\r\n <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\" @onclick=\"@(() => _selectedTasks.Clear())\">Deselect</Button>\r\n <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\">Assign to</Button>\r\n <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\">Set priority</Button>\r\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\" Class=\"text-destructive ml-auto\">Delete</Button>\r\n </div>\r\n }\r\n</div>"
422
+ "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>"
423
423
  }
424
424
  ]
425
425
  }
@@ -510,19 +510,19 @@
510
510
  "examples": [
511
511
  {
512
512
  "title": "Single (Default)",
513
- "code": "<Accordion Type=\"Accordion.AccordionType.Single\">\r\n <AccordionItem Value=\"item-1\">\r\n <AccordionTrigger>Is it accessible?</AccordionTrigger>\r\n <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>\r\n </AccordionItem>\r\n <AccordionItem Value=\"item-2\">\r\n <AccordionTrigger>Is it styled?</AccordionTrigger>\r\n <AccordionContent>Yes. It comes with default styles that match the other components' aesthetic.</AccordionContent>\r\n </AccordionItem>\r\n <AccordionItem Value=\"item-3\">\r\n <AccordionTrigger>Is it animated?</AccordionTrigger>\r\n <AccordionContent>Yes. It's animated by default, but you can disable it if you prefer.</AccordionContent>\r\n </AccordionItem>\r\n</Accordion>"
513
+ "code": "<Accordion Type=\"Accordion.AccordionType.Single\">\n <AccordionItem Value=\"item-1\">\n <AccordionTrigger>Is it accessible?</AccordionTrigger>\n <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>\n </AccordionItem>\n <AccordionItem Value=\"item-2\">\n <AccordionTrigger>Is it styled?</AccordionTrigger>\n <AccordionContent>Yes. It comes with default styles that match the other components' aesthetic.</AccordionContent>\n </AccordionItem>\n <AccordionItem Value=\"item-3\">\n <AccordionTrigger>Is it animated?</AccordionTrigger>\n <AccordionContent>Yes. It's animated by default, but you can disable it if you prefer.</AccordionContent>\n </AccordionItem>\n</Accordion>"
514
514
  },
515
515
  {
516
516
  "title": "FAQ",
517
- "code": "<Accordion Type=\"Accordion.AccordionType.Single\">\r\n <AccordionItem Value=\"q1\">\r\n <AccordionTrigger>What payment methods do you accept?</AccordionTrigger>\r\n <AccordionContent>We accept all major credit cards, PayPal, and bank transfers.</AccordionContent>\r\n </AccordionItem>\r\n <AccordionItem Value=\"q2\">\r\n <AccordionTrigger>Can I cancel my subscription at any time?</AccordionTrigger>\r\n <AccordionContent>Yes, cancel anytime. Access continues until end of billing period.</AccordionContent>\r\n </AccordionItem>\r\n <AccordionItem Value=\"q3\">\r\n <AccordionTrigger>Do you offer a free trial?</AccordionTrigger>\r\n <AccordionContent>14-day free trial, no credit card required.</AccordionContent>\r\n </AccordionItem>\r\n</Accordion>"
517
+ "code": "<Accordion Type=\"Accordion.AccordionType.Single\">\n <AccordionItem Value=\"q1\">\n <AccordionTrigger>What payment methods do you accept?</AccordionTrigger>\n <AccordionContent>We accept all major credit cards, PayPal, and bank transfers.</AccordionContent>\n </AccordionItem>\n <AccordionItem Value=\"q2\">\n <AccordionTrigger>Can I cancel my subscription at any time?</AccordionTrigger>\n <AccordionContent>Yes, cancel anytime. Access continues until end of billing period.</AccordionContent>\n </AccordionItem>\n <AccordionItem Value=\"q3\">\n <AccordionTrigger>Do you offer a free trial?</AccordionTrigger>\n <AccordionContent>14-day free trial, no credit card required.</AccordionContent>\n </AccordionItem>\n</Accordion>"
518
518
  },
519
519
  {
520
520
  "title": "Multiple",
521
- "code": "<Accordion Type=\"Accordion.AccordionType.Multiple\">\r\n <AccordionItem Value=\"item-1\">\r\n <AccordionTrigger>What is Lumeo?</AccordionTrigger>\r\n <AccordionContent>Lumeo is a Blazor component library inspired by shadcn/ui, built with Tailwind CSS.</AccordionContent>\r\n </AccordionItem>\r\n <AccordionItem Value=\"item-2\">\r\n <AccordionTrigger>Which .NET version?</AccordionTrigger>\r\n <AccordionContent>Lumeo targets .NET 10 and uses Tailwind CSS v4 for styling.</AccordionContent>\r\n </AccordionItem>\r\n <AccordionItem Value=\"item-3\">\r\n <AccordionTrigger>Can I customize it?</AccordionTrigger>\r\n <AccordionContent>Absolutely. All components accept a Class parameter for additional CSS classes.</AccordionContent>\r\n </AccordionItem>\r\n</Accordion>"
521
+ "code": "<Accordion Type=\"Accordion.AccordionType.Multiple\">\n <AccordionItem Value=\"item-1\">\n <AccordionTrigger>What is Lumeo?</AccordionTrigger>\n <AccordionContent>Lumeo is a Blazor component library inspired by shadcn/ui, built with Tailwind CSS.</AccordionContent>\n </AccordionItem>\n <AccordionItem Value=\"item-2\">\n <AccordionTrigger>Which .NET version?</AccordionTrigger>\n <AccordionContent>Lumeo targets .NET 10 and uses Tailwind CSS v4 for styling.</AccordionContent>\n </AccordionItem>\n <AccordionItem Value=\"item-3\">\n <AccordionTrigger>Can I customize it?</AccordionTrigger>\n <AccordionContent>Absolutely. All components accept a Class parameter for additional CSS classes.</AccordionContent>\n </AccordionItem>\n</Accordion>"
522
522
  },
523
523
  {
524
524
  "title": "Type — interactive",
525
- "code": "<Segmented @bind-Value=\"_accordionTypeSel\" Options=\"_accordionTypeOptions\" />\r\n<Accordion Type=\"@_activeAccordionType\">\r\n <AccordionItem Value=\"a\">\r\n <AccordionTrigger>Is it accessible?</AccordionTrigger>\r\n <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>\r\n </AccordionItem>\r\n <AccordionItem Value=\"b\">\r\n <AccordionTrigger>Is it styled?</AccordionTrigger>\r\n <AccordionContent>Yes. It comes with default styles.</AccordionContent>\r\n </AccordionItem>\r\n <AccordionItem Value=\"c\">\r\n <AccordionTrigger>Is it animated?</AccordionTrigger>\r\n <AccordionContent>Yes. Animated by default.</AccordionContent>\r\n </AccordionItem>\r\n</Accordion>\r\n\r\n@code {\r\n private string _accordionTypeSel = \"Single\";\r\n private Accordion.AccordionType _activeAccordionType => Enum.Parse<Accordion.AccordionType>(_accordionTypeSel);\r\n private List<Segmented.SegmentedOption> _accordionTypeOptions = new()\r\n {\r\n new() { Label = \"Single\", Value = \"Single\" },\r\n new() { Label = \"Multiple\", Value = \"Multiple\" },\r\n };\r\n}"
525
+ "code": "<Segmented @bind-Value=\"_accordionTypeSel\" Options=\"_accordionTypeOptions\" />\n<Accordion Type=\"@_activeAccordionType\">\n <AccordionItem Value=\"a\">\n <AccordionTrigger>Is it accessible?</AccordionTrigger>\n <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>\n </AccordionItem>\n <AccordionItem Value=\"b\">\n <AccordionTrigger>Is it styled?</AccordionTrigger>\n <AccordionContent>Yes. It comes with default styles.</AccordionContent>\n </AccordionItem>\n <AccordionItem Value=\"c\">\n <AccordionTrigger>Is it animated?</AccordionTrigger>\n <AccordionContent>Yes. Animated by default.</AccordionContent>\n </AccordionItem>\n</Accordion>\n\n@code {\n private string _accordionTypeSel = \"Single\";\n private Accordion.AccordionType _activeAccordionType => Enum.Parse<Accordion.AccordionType>(_accordionTypeSel);\n private List<Segmented.SegmentedOption> _accordionTypeOptions = new()\n {\n new() { Label = \"Single\", Value = \"Single\" },\n new() { Label = \"Multiple\", Value = \"Multiple\" },\n };\n}"
526
526
  }
527
527
  ],
528
528
  "subComponents": {
@@ -793,7 +793,11 @@
793
793
  "examples": [
794
794
  {
795
795
  "title": "Basic Affix",
796
- "code": "<Affix OffsetTop=\"80\">\r\n <div class=\"bg-background border rounded-lg p-4 shadow-sm\">\r\n This content sticks at 80px from top.\r\n </div>\r\n</Affix>"
796
+ "code": "<Affix OffsetTop=\"80\">\n <div class=\"bg-background border rounded-lg p-4 shadow-sm\">\n This content sticks at 80px from top.\n </div>\n</Affix>"
797
+ },
798
+ {
799
+ "title": "Interactive: Anchor & Offset",
800
+ "code": "@* Top anchor *@\n<Affix OffsetTop=\"80\">\n <Badge Class=\"px-4 py-1.5 text-sm shadow\">Affixed — Top 80px</Badge>\n</Affix>\n\n@* Bottom anchor *@\n<Affix OffsetBottom=\"40\">\n <Badge Class=\"px-4 py-1.5 text-sm shadow\">Affixed — Bottom 40px</Badge>\n</Affix>"
797
801
  }
798
802
  ],
799
803
  "subComponents": {},
@@ -1109,19 +1113,19 @@
1109
1113
  "examples": [
1110
1114
  {
1111
1115
  "title": "Default",
1112
- "code": "<Alert>\r\n <Heading Level=\"5\" Size=\"sm\" Weight=\"medium\" Class=\"mb-1 leading-none tracking-tight\">Heads up!</Heading>\r\n <Lumeo.Text Size=\"sm\" Leading=\"relaxed\">You can add components to your app using the CLI.</Lumeo.Text>\r\n</Alert>"
1116
+ "code": "<Alert>\n <Heading Level=\"5\" Size=\"sm\" Weight=\"medium\" Class=\"mb-1 leading-none tracking-tight\">Heads up!</Heading>\n <Lumeo.Text Size=\"sm\" Leading=\"relaxed\">You can add components to your app using the CLI.</Lumeo.Text>\n</Alert>"
1113
1117
  },
1114
1118
  {
1115
1119
  "title": "Destructive",
1116
- "code": "<Alert Variant=\"Alert.AlertVariant.Destructive\">\r\n <Heading Level=\"5\" Size=\"sm\" Weight=\"medium\" Class=\"mb-1 leading-none tracking-tight\">Error</Heading>\r\n <Lumeo.Text Size=\"sm\" Leading=\"relaxed\">Your session has expired. Please log in again.</Lumeo.Text>\r\n</Alert>"
1120
+ "code": "<Alert Variant=\"Alert.AlertVariant.Destructive\">\n <Heading Level=\"5\" Size=\"sm\" Weight=\"medium\" Class=\"mb-1 leading-none tracking-tight\">Error</Heading>\n <Lumeo.Text Size=\"sm\" Leading=\"relaxed\">Your session has expired. Please log in again.</Lumeo.Text>\n</Alert>"
1117
1121
  },
1118
1122
  {
1119
1123
  "title": "With Icon",
1120
- "code": "<Alert>\r\n <Flex Gap=\"3\">\r\n <Blazicon Svg=\"Lucide.Info\" class=\"h-4 w-4 mt-0.5\" />\r\n <Stack Gap=\"0\">\r\n <Heading Level=\"5\" Size=\"sm\" Weight=\"medium\" Class=\"mb-1 leading-none tracking-tight\">Information</Heading>\r\n <Lumeo.Text Size=\"sm\" Leading=\"relaxed\">This action will update your preferences.</Lumeo.Text>\r\n </Stack>\r\n </Flex>\r\n</Alert>\r\n<Alert Variant=\"Alert.AlertVariant.Destructive\">\r\n <Flex Gap=\"3\">\r\n <Blazicon Svg=\"Lucide.CircleAlert\" class=\"h-4 w-4 mt-0.5\" />\r\n <Stack Gap=\"0\">\r\n <Heading Level=\"5\" Size=\"sm\" Weight=\"medium\" Class=\"mb-1 leading-none tracking-tight\">Something went wrong</Heading>\r\n <Lumeo.Text Size=\"sm\" Leading=\"relaxed\">Could not save your changes. Please try again.</Lumeo.Text>\r\n </Stack>\r\n </Flex>\r\n</Alert>"
1124
+ "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>"
1121
1125
  },
1122
1126
  {
1123
1127
  "title": "With Action",
1124
- "code": "<Alert>\r\n <Flex Align=\"start\" Justify=\"between\" Gap=\"4\">\r\n <Flex Gap=\"3\">\r\n <Blazicon Svg=\"Lucide.Bell\" class=\"h-4 w-4 mt-0.5 text-primary\" />\r\n <Stack Gap=\"0\">\r\n <Heading Level=\"5\" Size=\"sm\" Weight=\"medium\" Class=\"mb-1 leading-none tracking-tight\">New feature available</Heading>\r\n <Lumeo.Text Size=\"sm\" Leading=\"relaxed\">Dark mode is now available for all users.</Lumeo.Text>\r\n </Stack>\r\n </Flex>\r\n <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\">Try it</Button>\r\n </Flex>\r\n</Alert>"
1128
+ "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>"
1125
1129
  }
1126
1130
  ],
1127
1131
  "subComponents": {},
@@ -1224,19 +1228,19 @@
1224
1228
  "examples": [
1225
1229
  {
1226
1230
  "title": "Default",
1227
- "code": "<AlertDialog @bind-Open=\"_isOpen\">\r\n <AlertDialogTrigger>\r\n <Button Variant=\"Button.ButtonVariant.Outline\">Delete Account</Button>\r\n </AlertDialogTrigger>\r\n <AlertDialogContent>\r\n <AlertDialogHeader>\r\n <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\r\n <AlertDialogDescription>\r\n This action cannot be undone. This will permanently delete your account\r\n and remove your data from our servers.\r\n </AlertDialogDescription>\r\n </AlertDialogHeader>\r\n <AlertDialogFooter>\r\n <AlertDialogCancel>Cancel</AlertDialogCancel>\r\n <AlertDialogAction>Continue</AlertDialogAction>\r\n </AlertDialogFooter>\r\n </AlertDialogContent>\r\n</AlertDialog>\r\n\r\n@code {\r\n private bool _isOpen;\r\n}"
1231
+ "code": "<AlertDialog @bind-Open=\"_isOpen\">\n <AlertDialogTrigger>\n <Button Variant=\"Button.ButtonVariant.Outline\">Delete Account</Button>\n </AlertDialogTrigger>\n <AlertDialogContent>\n <AlertDialogHeader>\n <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n <AlertDialogDescription>\n This action cannot be undone. This will permanently delete your account\n and remove your data from our servers.\n </AlertDialogDescription>\n </AlertDialogHeader>\n <AlertDialogFooter>\n <AlertDialogCancel>Cancel</AlertDialogCancel>\n <AlertDialogAction>Continue</AlertDialogAction>\n </AlertDialogFooter>\n </AlertDialogContent>\n</AlertDialog>\n\n@code {\n private bool _isOpen;\n}"
1228
1232
  },
1229
1233
  {
1230
1234
  "title": "With Action Handler",
1231
- "code": "<AlertDialog @bind-Open=\"_isOpen\">\r\n <AlertDialogTrigger>\r\n <Button Variant=\"Button.ButtonVariant.Destructive\">Remove Item</Button>\r\n </AlertDialogTrigger>\r\n <AlertDialogContent>\r\n <AlertDialogHeader>\r\n <AlertDialogTitle>Remove this item?</AlertDialogTitle>\r\n <AlertDialogDescription>\r\n This item will be permanently removed from your collection.\r\n </AlertDialogDescription>\r\n </AlertDialogHeader>\r\n <AlertDialogFooter>\r\n <AlertDialogCancel>Keep It</AlertDialogCancel>\r\n <AlertDialogAction OnAction=\"HandleRemove\">Yes, Remove</AlertDialogAction>\r\n </AlertDialogFooter>\r\n </AlertDialogContent>\r\n</AlertDialog>\r\n\r\n@code {\r\n private bool _isOpen;\r\n private void HandleRemove() { /* handle removal */ }\r\n}"
1235
+ "code": "<AlertDialog @bind-Open=\"_isOpen\">\n <AlertDialogTrigger>\n <Button Variant=\"Button.ButtonVariant.Destructive\">Remove Item</Button>\n </AlertDialogTrigger>\n <AlertDialogContent>\n <AlertDialogHeader>\n <AlertDialogTitle>Remove this item?</AlertDialogTitle>\n <AlertDialogDescription>\n This item will be permanently removed from your collection.\n </AlertDialogDescription>\n </AlertDialogHeader>\n <AlertDialogFooter>\n <AlertDialogCancel>Keep It</AlertDialogCancel>\n <AlertDialogAction OnAction=\"HandleRemove\">Yes, Remove</AlertDialogAction>\n </AlertDialogFooter>\n </AlertDialogContent>\n</AlertDialog>\n\n@code {\n private bool _isOpen;\n private void HandleRemove() { /* handle removal */ }\n}"
1232
1236
  },
1233
1237
  {
1234
1238
  "title": "Unsaved Changes",
1235
- "code": "<AlertDialog @bind-Open=\"_isOpen\">\r\n <AlertDialogTrigger>\r\n <Button Variant=\"Button.ButtonVariant.Ghost\">\r\n <Blazicon Svg=\"Lucide.X\" class=\"h-4 w-4\" /> Close Editor\r\n </Button>\r\n </AlertDialogTrigger>\r\n <AlertDialogContent>\r\n <AlertDialogHeader>\r\n <AlertDialogTitle>Discard unsaved changes?</AlertDialogTitle>\r\n <AlertDialogDescription>\r\n You have unsaved changes. If you close now, your changes will be lost.\r\n </AlertDialogDescription>\r\n </AlertDialogHeader>\r\n <AlertDialogFooter>\r\n <AlertDialogCancel>Keep Editing</AlertDialogCancel>\r\n <AlertDialogAction>Discard Changes</AlertDialogAction>\r\n </AlertDialogFooter>\r\n </AlertDialogContent>\r\n</AlertDialog>"
1239
+ "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>"
1236
1240
  },
1237
1241
  {
1238
1242
  "title": "Loading Action",
1239
- "code": "<AlertDialog @bind-Open=\"_loadingDialogOpen\">\r\n <AlertDialogTrigger>\r\n <Button Variant=\"Button.ButtonVariant.Destructive\">Delete Account</Button>\r\n </AlertDialogTrigger>\r\n <AlertDialogContent>\r\n <AlertDialogHeader>\r\n <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\r\n <AlertDialogDescription>This action cannot be undone. This will permanently delete your account.</AlertDialogDescription>\r\n </AlertDialogHeader>\r\n <AlertDialogFooter>\r\n <AlertDialogCancel>Cancel</AlertDialogCancel>\r\n <AlertDialogAction IsLoading=\"@_isDeleting\" OnAction=\"HandleDelete\">\r\n @(_isDeleting ? \"Deleting...\" : \"Delete\")\r\n </AlertDialogAction>\r\n </AlertDialogFooter>\r\n </AlertDialogContent>\r\n</AlertDialog>\r\n\r\n@code {\r\n private bool _loadingDialogOpen;\r\n private bool _isDeleting;\r\n\r\n private async Task HandleDelete()\r\n {\r\n _isDeleting = true;\r\n await Task.Delay(2000);\r\n _isDeleting = false;\r\n _loadingDialogOpen = false;\r\n }\r\n}"
1243
+ "code": "<AlertDialog @bind-Open=\"_loadingDialogOpen\">\n <AlertDialogTrigger>\n <Button Variant=\"Button.ButtonVariant.Destructive\">Delete Account</Button>\n </AlertDialogTrigger>\n <AlertDialogContent>\n <AlertDialogHeader>\n <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n <AlertDialogDescription>This action cannot be undone. This will permanently delete your account.</AlertDialogDescription>\n </AlertDialogHeader>\n <AlertDialogFooter>\n <AlertDialogCancel>Cancel</AlertDialogCancel>\n <AlertDialogAction IsLoading=\"@_isDeleting\" OnAction=\"HandleDelete\">\n @(_isDeleting ? \"Deleting...\" : \"Delete\")\n </AlertDialogAction>\n </AlertDialogFooter>\n </AlertDialogContent>\n</AlertDialog>\n\n@code {\n private bool _loadingDialogOpen;\n private bool _isDeleting;\n\n private async Task HandleDelete()\n {\n _isDeleting = true;\n await Task.Delay(2000);\n _isDeleting = false;\n _loadingDialogOpen = false;\n }\n}"
1240
1244
  }
1241
1245
  ],
1242
1246
  "subComponents": {
@@ -1938,19 +1942,19 @@
1938
1942
  "examples": [
1939
1943
  {
1940
1944
  "title": "16:9 Ratio",
1941
- "code": "<AspectRatio Ratio=\"16.0 / 9.0\" Class=\"rounded-md overflow-hidden bg-muted\">\r\n <div class=\"flex items-center justify-center h-full\">\r\n 16:9 Aspect Ratio\r\n </div>\r\n</AspectRatio>"
1945
+ "code": "<AspectRatio Ratio=\"16.0 / 9.0\" Class=\"rounded-md overflow-hidden bg-muted\">\n <div class=\"flex items-center justify-center h-full\">\n 16:9 Aspect Ratio\n </div>\n</AspectRatio>"
1942
1946
  },
1943
1947
  {
1944
1948
  "title": "Different Ratios",
1945
- "code": "<AspectRatio Ratio=\"1\" Class=\"rounded-md overflow-hidden bg-muted\">\r\n <div class=\"flex items-center justify-center h-full\">1:1</div>\r\n</AspectRatio>\r\n\r\n<AspectRatio Ratio=\"4.0 / 3.0\" Class=\"rounded-md overflow-hidden bg-muted\">\r\n <div class=\"flex items-center justify-center h-full\">4:3</div>\r\n</AspectRatio>"
1949
+ "code": "<AspectRatio Ratio=\"1\" Class=\"rounded-md overflow-hidden bg-muted\">\n <div class=\"flex items-center justify-center h-full\">1:1</div>\n</AspectRatio>\n\n<AspectRatio Ratio=\"4.0 / 3.0\" Class=\"rounded-md overflow-hidden bg-muted\">\n <div class=\"flex items-center justify-center h-full\">4:3</div>\n</AspectRatio>"
1946
1950
  },
1947
1951
  {
1948
1952
  "title": "Media Card",
1949
- "code": "<Card>\r\n <AspectRatio Ratio=\"16.0 / 9.0\" Class=\"rounded-t-lg overflow-hidden bg-muted\">\r\n <div class=\"flex items-center justify-center h-full text-muted-foreground\">\r\n Thumbnail\r\n </div>\r\n </AspectRatio>\r\n <CardContent Class=\"p-4\">\r\n <Lumeo.Text Weight=\"semibold\">Getting Started with Lumeo</Lumeo.Text>\r\n <Lumeo.Text Size=\"sm\" Color=\"muted\" Class=\"mt-1\">Learn how to build beautiful UIs.</Lumeo.Text>\r\n </CardContent>\r\n</Card>"
1953
+ "code": "<Card>\n <AspectRatio Ratio=\"16.0 / 9.0\" Class=\"rounded-t-lg overflow-hidden bg-muted\">\n <div class=\"flex items-center justify-center h-full text-muted-foreground\">\n Thumbnail\n </div>\n </AspectRatio>\n <CardContent Class=\"p-4\">\n <Lumeo.Text Weight=\"semibold\">Getting Started with Lumeo</Lumeo.Text>\n <Lumeo.Text Size=\"sm\" Color=\"muted\" Class=\"mt-1\">Learn how to build beautiful UIs.</Lumeo.Text>\n </CardContent>\n</Card>"
1950
1954
  },
1951
1955
  {
1952
1956
  "title": "Ratio — interactive",
1953
- "code": "<AspectRatio Ratio=\"16.0 / 9.0\" Class=\"rounded-md overflow-hidden bg-muted\">\r\n <div class=\"flex items-center justify-center h-full text-sm text-muted-foreground\">16:9</div>\r\n</AspectRatio>"
1957
+ "code": "<AspectRatio Ratio=\"16.0 / 9.0\" Class=\"rounded-md overflow-hidden bg-muted\">\n <div class=\"flex items-center justify-center h-full text-sm text-muted-foreground\">16:9</div>\n</AspectRatio>"
1954
1958
  }
1955
1959
  ],
1956
1960
  "subComponents": {},
@@ -2063,19 +2067,19 @@
2063
2067
  "examples": [
2064
2068
  {
2065
2069
  "title": "With Image",
2066
- "code": "<Avatar>\r\n <AvatarImage Src=\"https://github.com/shadcn.png\" Alt=\"User avatar\" />\r\n <AvatarFallback>CN</AvatarFallback>\r\n</Avatar>"
2070
+ "code": "<Avatar>\n <AvatarImage Src=\"https://github.com/shadcn.png\" Alt=\"User avatar\" />\n <AvatarFallback>CN</AvatarFallback>\n</Avatar>"
2067
2071
  },
2068
2072
  {
2069
2073
  "title": "Fallback Initials",
2070
- "code": "<Avatar>\r\n <AvatarFallback>JD</AvatarFallback>\r\n</Avatar>\r\n<Avatar>\r\n <AvatarFallback>\r\n <Blazicon Svg=\"Lucide.User\" class=\"h-4 w-4\" />\r\n </AvatarFallback>\r\n</Avatar>"
2074
+ "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>"
2071
2075
  },
2072
2076
  {
2073
2077
  "title": "Sizes",
2074
- "code": "<Avatar Size=\"Avatar.AvatarSize.Sm\">\r\n <AvatarImage Src=\"...\" Alt=\"Small\" />\r\n <AvatarFallback>SM</AvatarFallback>\r\n</Avatar>\r\n<Avatar Size=\"Avatar.AvatarSize.Lg\">\r\n <AvatarImage Src=\"...\" Alt=\"Large\" />\r\n <AvatarFallback>LG</AvatarFallback>\r\n</Avatar>"
2078
+ "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>"
2075
2079
  },
2076
2080
  {
2077
2081
  "title": "Group",
2078
- "code": "<Flex Class=\"-space-x-3\">\r\n <Avatar Class=\"border-2 border-background\">\r\n <AvatarImage Src=\"...\" Alt=\"User 1\" />\r\n <AvatarFallback>U1</AvatarFallback>\r\n </Avatar>\r\n <Avatar Class=\"border-2 border-background\">\r\n <AvatarFallback>U2</AvatarFallback>\r\n </Avatar>\r\n <Avatar Class=\"border-2 border-background\">\r\n <AvatarFallback>+3</AvatarFallback>\r\n </Avatar>\r\n</Flex>"
2082
+ "code": "<Flex Class=\"-space-x-3\">\n <Avatar Class=\"border-2 border-background\">\n <AvatarImage Src=\"...\" Alt=\"User 1\" />\n <AvatarFallback>U1</AvatarFallback>\n </Avatar>\n <Avatar Class=\"border-2 border-background\">\n <AvatarFallback>U2</AvatarFallback>\n </Avatar>\n <Avatar Class=\"border-2 border-background\">\n <AvatarFallback>+3</AvatarFallback>\n </Avatar>\n</Flex>"
2079
2083
  }
2080
2084
  ],
2081
2085
  "subComponents": {
@@ -2307,6 +2311,10 @@
2307
2311
  {
2308
2312
  "title": "Custom Threshold",
2309
2313
  "code": "<BackToTop VisibilityThreshold=\"500\" />"
2314
+ },
2315
+ {
2316
+ "title": "Interactive: Visibility Threshold",
2317
+ "code": "<BackToTop VisibilityThreshold=\"300\" />"
2310
2318
  }
2311
2319
  ],
2312
2320
  "subComponents": {},
@@ -2443,19 +2451,19 @@
2443
2451
  "examples": [
2444
2452
  {
2445
2453
  "title": "Variants",
2446
- "code": "<Badge>Default</Badge>\r\n<Badge Variant=\"Badge.BadgeVariant.Secondary\">Secondary</Badge>\r\n<Badge Variant=\"Badge.BadgeVariant.Outline\">Outline</Badge>\r\n<Badge Variant=\"Badge.BadgeVariant.Destructive\">Destructive</Badge>\r\n<Badge Variant=\"Badge.BadgeVariant.Success\">Success</Badge>\r\n<Badge Variant=\"Badge.BadgeVariant.Warning\">Warning</Badge>"
2454
+ "code": "<Badge>Default</Badge>\n<Badge Variant=\"Badge.BadgeVariant.Secondary\">Secondary</Badge>\n<Badge Variant=\"Badge.BadgeVariant.Outline\">Outline</Badge>\n<Badge Variant=\"Badge.BadgeVariant.Destructive\">Destructive</Badge>\n<Badge Variant=\"Badge.BadgeVariant.Success\">Success</Badge>\n<Badge Variant=\"Badge.BadgeVariant.Warning\">Warning</Badge>"
2447
2455
  },
2448
2456
  {
2449
2457
  "title": "Variant (interactive)",
2450
- "code": "<Segmented @bind-Value=\"_variant\">\r\n <SegmentedItem Value=\"@Badge.BadgeVariant.Default\">Default</SegmentedItem>\r\n <SegmentedItem Value=\"@Badge.BadgeVariant.Secondary\">Secondary</SegmentedItem>\r\n <SegmentedItem Value=\"@Badge.BadgeVariant.Outline\">Outline</SegmentedItem>\r\n <SegmentedItem Value=\"@Badge.BadgeVariant.Destructive\">Destructive</SegmentedItem>\r\n <SegmentedItem Value=\"@Badge.BadgeVariant.Success\">Success</SegmentedItem>\r\n <SegmentedItem Value=\"@Badge.BadgeVariant.Warning\">Warning</SegmentedItem>\r\n</Segmented>\r\n<Badge Variant=\"@_variant\">@_variant.ToString()</Badge>\r\n\r\n@code { private Badge.BadgeVariant _variant = Badge.BadgeVariant.Default; }"
2458
+ "code": "<Segmented @bind-Value=\"_variant\">\n <SegmentedItem Value=\"@Badge.BadgeVariant.Default\">Default</SegmentedItem>\n <SegmentedItem Value=\"@Badge.BadgeVariant.Secondary\">Secondary</SegmentedItem>\n <SegmentedItem Value=\"@Badge.BadgeVariant.Outline\">Outline</SegmentedItem>\n <SegmentedItem Value=\"@Badge.BadgeVariant.Destructive\">Destructive</SegmentedItem>\n <SegmentedItem Value=\"@Badge.BadgeVariant.Success\">Success</SegmentedItem>\n <SegmentedItem Value=\"@Badge.BadgeVariant.Warning\">Warning</SegmentedItem>\n</Segmented>\n<Badge Variant=\"@_variant\">@_variant.ToString()</Badge>\n\n@code { private Badge.BadgeVariant _variant = Badge.BadgeVariant.Default; }"
2451
2459
  },
2452
2460
  {
2453
2461
  "title": "Usage Examples",
2454
- "code": "<Flex Align=\"center\" Gap=\"2\">\r\n <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"medium\">Status</Lumeo.Text>\r\n <Badge Variant=\"Badge.BadgeVariant.Success\">Active</Badge>\r\n</Flex>\r\n<Flex Align=\"center\" Gap=\"2\">\r\n <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"medium\">Priority</Lumeo.Text>\r\n <Badge Variant=\"Badge.BadgeVariant.Destructive\">High</Badge>\r\n</Flex>"
2462
+ "code": "<Flex Align=\"center\" Gap=\"2\">\n <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"medium\">Status</Lumeo.Text>\n <Badge Variant=\"Badge.BadgeVariant.Success\">Active</Badge>\n</Flex>\n<Flex Align=\"center\" Gap=\"2\">\n <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"medium\">Priority</Lumeo.Text>\n <Badge Variant=\"Badge.BadgeVariant.Destructive\">High</Badge>\n</Flex>"
2455
2463
  },
2456
2464
  {
2457
2465
  "title": "In a Card",
2458
- "code": "<Card>\r\n <CardHeader>\r\n <Flex Align=\"center\" Justify=\"between\">\r\n <Heading Level=\"3\" Size=\"lg\">Notifications</Heading>\r\n <Badge>3 new</Badge>\r\n </Flex>\r\n <Lumeo.Text Size=\"sm\" Color=\"muted\">You have unread messages.</Lumeo.Text>\r\n </CardHeader>\r\n</Card>"
2466
+ "code": "<Card>\n <CardHeader>\n <Flex Align=\"center\" Justify=\"between\">\n <Heading Level=\"3\" Size=\"lg\">Notifications</Heading>\n <Badge>3 new</Badge>\n </Flex>\n <Lumeo.Text Size=\"sm\" Color=\"muted\">You have unread messages.</Lumeo.Text>\n </CardHeader>\n</Card>"
2459
2467
  }
2460
2468
  ],
2461
2469
  "subComponents": {},
@@ -2666,15 +2674,15 @@
2666
2674
  "examples": [
2667
2675
  {
2668
2676
  "title": "Basic 4-column bento",
2669
- "code": "<Bento Columns=\"4\" Gap=\"Bento.BentoGap.Md\">\r\n <BentoTile Span=\"2\" Title=\"Revenue\" Description=\"Last 30 days\">\r\n <div class=\"text-3xl font-semibold text-foreground\">$48,290</div>\r\n </BentoTile>\r\n <BentoTile Title=\"New users\"><div class=\"text-2xl font-semibold\">1,204</div></BentoTile>\r\n <BentoTile Title=\"Churn\"><div class=\"text-2xl font-semibold\">2.1%</div></BentoTile>\r\n <BentoTile Span=\"2\" Title=\"Latest activity\" Description=\"Feed\">\r\n <div class=\"text-sm text-muted-foreground\">No events in the last hour.</div>\r\n </BentoTile>\r\n <BentoTile Title=\"Sessions\"><div class=\"text-2xl font-semibold\">8,492</div></BentoTile>\r\n <BentoTile Title=\"Avg. duration\"><div class=\"text-2xl font-semibold\">4m 12s</div></BentoTile>\r\n</Bento>"
2677
+ "code": "<Bento Columns=\"4\" Gap=\"Bento.BentoGap.Md\">\n <BentoTile Span=\"2\" Title=\"Revenue\" Description=\"Last 30 days\">\n <div class=\"text-3xl font-semibold text-foreground\">$48,290</div>\n </BentoTile>\n <BentoTile Title=\"New users\"><div class=\"text-2xl font-semibold\">1,204</div></BentoTile>\n <BentoTile Title=\"Churn\"><div class=\"text-2xl font-semibold\">2.1%</div></BentoTile>\n <BentoTile Span=\"2\" Title=\"Latest activity\" Description=\"Feed\">\n <div class=\"text-sm text-muted-foreground\">No events in the last hour.</div>\n </BentoTile>\n <BentoTile Title=\"Sessions\"><div class=\"text-2xl font-semibold\">8,492</div></BentoTile>\n <BentoTile Title=\"Avg. duration\"><div class=\"text-2xl font-semibold\">4m 12s</div></BentoTile>\n</Bento>"
2670
2678
  },
2671
2679
  {
2672
2680
  "title": "Gap (interactive)",
2673
- "code": "<Segmented @bind-Value=\"_gap\">\r\n <SegmentedItem Value=\"@Bento.BentoGap.Sm\">Sm</SegmentedItem>\r\n <SegmentedItem Value=\"@Bento.BentoGap.Md\">Md</SegmentedItem>\r\n <SegmentedItem Value=\"@Bento.BentoGap.Lg\">Lg</SegmentedItem>\r\n</Segmented>\r\n<Bento Columns=\"4\" Gap=\"@_gap\">\r\n <BentoTile Title=\"Revenue\"><div class=\"text-2xl font-semibold\">$48,290</div></BentoTile>\r\n <BentoTile Title=\"Users\"><div class=\"text-2xl font-semibold\">12,402</div></BentoTile>\r\n <BentoTile Title=\"Sessions\"><div class=\"text-2xl font-semibold\">8,492</div></BentoTile>\r\n <BentoTile Title=\"Churn\"><div class=\"text-2xl font-semibold\">2.1%</div></BentoTile>\r\n</Bento>\r\n\r\n@code { private Bento.BentoGap _gap = Bento.BentoGap.Md; }"
2681
+ "code": "<Segmented @bind-Value=\"_gap\">\n <SegmentedItem Value=\"@Bento.BentoGap.Sm\">Sm</SegmentedItem>\n <SegmentedItem Value=\"@Bento.BentoGap.Md\">Md</SegmentedItem>\n <SegmentedItem Value=\"@Bento.BentoGap.Lg\">Lg</SegmentedItem>\n</Segmented>\n<Bento Columns=\"4\" Gap=\"@_gap\">\n <BentoTile Title=\"Revenue\"><div class=\"text-2xl font-semibold\">$48,290</div></BentoTile>\n <BentoTile Title=\"Users\"><div class=\"text-2xl font-semibold\">12,402</div></BentoTile>\n <BentoTile Title=\"Sessions\"><div class=\"text-2xl font-semibold\">8,492</div></BentoTile>\n <BentoTile Title=\"Churn\"><div class=\"text-2xl font-semibold\">2.1%</div></BentoTile>\n</Bento>\n\n@code { private Bento.BentoGap _gap = Bento.BentoGap.Md; }"
2674
2682
  },
2675
2683
  {
2676
2684
  "title": "Dashboard — KPI row + spark + wide tile",
2677
- "code": "<Bento Columns=\"3\" Gap=\"Bento.BentoGap.Md\">\r\n <KpiCard Label=\"Revenue\" Value=\"$48,290\" Delta=\"12.3\" />\r\n <KpiCard Label=\"Active users\" Value=\"12,402\" Delta=\"4.8\" />\r\n <KpiCard Label=\"MRR\" Value=\"$9,820\" Delta=\"-1.2\" />\r\n</Bento>\r\n<Bento Columns=\"3\" Gap=\"Bento.BentoGap.Md\">\r\n <SparkCard Label=\"Page views\" Value=\"184k\" Data=\"@sparkA\" />\r\n <SparkCard Label=\"Signups\" Value=\"421\" Data=\"@sparkB\" />\r\n <BentoTile Title=\"Traffic\" Description=\"Last 7 days\">\r\n <Chart ... />\r\n </BentoTile>\r\n</Bento>"
2685
+ "code": "<Bento Columns=\"3\" Gap=\"Bento.BentoGap.Md\">\n <KpiCard Label=\"Revenue\" Value=\"$48,290\" Delta=\"12.3\" />\n <KpiCard Label=\"Active users\" Value=\"12,402\" Delta=\"4.8\" />\n <KpiCard Label=\"MRR\" Value=\"$9,820\" Delta=\"-1.2\" />\n</Bento>\n<Bento Columns=\"3\" Gap=\"Bento.BentoGap.Md\">\n <SparkCard Label=\"Page views\" Value=\"184k\" Data=\"@sparkA\" />\n <SparkCard Label=\"Signups\" Value=\"421\" Data=\"@sparkB\" />\n <BentoTile Title=\"Traffic\" Description=\"Last 7 days\">\n <Chart ... />\n </BentoTile>\n</Bento>"
2678
2686
  }
2679
2687
  ],
2680
2688
  "subComponents": {
@@ -3057,19 +3065,19 @@
3057
3065
  "examples": [
3058
3066
  {
3059
3067
  "title": "Basic",
3060
- "code": "<BottomNav>\r\n <BottomNavItem Href=\"/\" Label=\"Home\">\r\n <IconContent><Icon Name=\"House\" Size=\"Icon.IconSize.Sm\" /></IconContent>\r\n </BottomNavItem>\r\n <BottomNavItem Href=\"/search\" Label=\"Search\">\r\n <IconContent><Icon Name=\"Search\" Size=\"Icon.IconSize.Sm\" /></IconContent>\r\n </BottomNavItem>\r\n <BottomNavItem Href=\"/inbox\" Label=\"Inbox\">\r\n <IconContent><Icon Name=\"Inbox\" Size=\"Icon.IconSize.Sm\" /></IconContent>\r\n </BottomNavItem>\r\n <BottomNavItem Href=\"/profile\" Label=\"Profile\">\r\n <IconContent><Icon Name=\"User\" Size=\"Icon.IconSize.Sm\" /></IconContent>\r\n </BottomNavItem>\r\n</BottomNav>"
3068
+ "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>"
3061
3069
  },
3062
3070
  {
3063
3071
  "title": "With Badges",
3064
- "code": "<BottomNavItem Href=\"/chat\" Label=\"Chat\">\r\n <IconContent><Icon Name=\"MessageCircle\" Size=\"Icon.IconSize.Sm\" /></IconContent>\r\n <Badge>3</Badge>\r\n</BottomNavItem>"
3072
+ "code": "<BottomNavItem Href=\"/chat\" Label=\"Chat\">\n <IconContent><Icon Name=\"MessageCircle\" Size=\"Icon.IconSize.Sm\" /></IconContent>\n <Badge>3</Badge>\n</BottomNavItem>"
3065
3073
  },
3066
3074
  {
3067
3075
  "title": "With Center FAB",
3068
- "code": "<BottomNav>\r\n <BottomNavItem Href=\"/\" Label=\"Home\" />\r\n <BottomNavItem Href=\"/search\" Label=\"Search\" />\r\n\r\n <BottomNavFab AriaLabel=\"Create\" OnClick=\"HandleCreate\">\r\n <Icon Name=\"Plus\" Size=\"Icon.IconSize.Md\" />\r\n </BottomNavFab>\r\n\r\n <BottomNavItem Href=\"/inbox\" Label=\"Inbox\" />\r\n <BottomNavItem Href=\"/profile\" Label=\"Profile\" />\r\n</BottomNav>"
3076
+ "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>"
3069
3077
  },
3070
3078
  {
3071
3079
  "title": "Animated Transitions",
3072
- "code": "<BottomNav AnimatedIndicator=\"true\">\r\n <BottomNavItem Href=\"/\" Label=\"Home\" />\r\n <BottomNavItem Href=\"/search\" Label=\"Search\" />\r\n <BottomNavItem Href=\"/inbox\" Label=\"Inbox\" />\r\n <BottomNavItem Href=\"/profile\" Label=\"Profile\" />\r\n</BottomNav>"
3080
+ "code": "<BottomNav AnimatedIndicator=\"true\">\n <BottomNavItem Href=\"/\" Label=\"Home\" />\n <BottomNavItem Href=\"/search\" Label=\"Search\" />\n <BottomNavItem Href=\"/inbox\" Label=\"Inbox\" />\n <BottomNavItem Href=\"/profile\" Label=\"Profile\" />\n</BottomNav>"
3073
3081
  }
3074
3082
  ],
3075
3083
  "subComponents": {
@@ -3312,15 +3320,15 @@
3312
3320
  "examples": [
3313
3321
  {
3314
3322
  "title": "Default",
3315
- "code": "<Breadcrumb>\r\n <BreadcrumbList>\r\n <BreadcrumbItem>\r\n <BreadcrumbLink Href=\"#\">Home</BreadcrumbLink>\r\n </BreadcrumbItem>\r\n <BreadcrumbSeparator />\r\n <BreadcrumbItem>\r\n <BreadcrumbLink Href=\"#\">Components</BreadcrumbLink>\r\n </BreadcrumbItem>\r\n <BreadcrumbSeparator />\r\n <BreadcrumbItem>\r\n <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\r\n </BreadcrumbItem>\r\n </BreadcrumbList>\r\n</Breadcrumb>"
3323
+ "code": "<Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink Href=\"#\">Home</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbLink Href=\"#\">Components</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n</Breadcrumb>"
3316
3324
  },
3317
3325
  {
3318
3326
  "title": "With Icons",
3319
- "code": "<Breadcrumb>\r\n <BreadcrumbList>\r\n <BreadcrumbItem>\r\n <BreadcrumbLink Href=\"#\">\r\n <Blazicon Svg=\"Lucide.Home\" class=\"h-4 w-4\" />\r\n </BreadcrumbLink>\r\n </BreadcrumbItem>\r\n <BreadcrumbSeparator />\r\n <BreadcrumbItem>\r\n <BreadcrumbLink Href=\"#\">Documents</BreadcrumbLink>\r\n </BreadcrumbItem>\r\n <BreadcrumbSeparator />\r\n <BreadcrumbItem>\r\n <BreadcrumbLink Href=\"#\">Projects</BreadcrumbLink>\r\n </BreadcrumbItem>\r\n <BreadcrumbSeparator />\r\n <BreadcrumbItem>\r\n <BreadcrumbPage>Report.pdf</BreadcrumbPage>\r\n </BreadcrumbItem>\r\n </BreadcrumbList>\r\n</Breadcrumb>"
3327
+ "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>"
3320
3328
  },
3321
3329
  {
3322
3330
  "title": "Custom Separator",
3323
- "code": "<Breadcrumb>\r\n <BreadcrumbList>\r\n <BreadcrumbItem>\r\n <BreadcrumbLink Href=\"#\">Home</BreadcrumbLink>\r\n </BreadcrumbItem>\r\n <BreadcrumbSeparator>\r\n <Blazicon Svg=\"Lucide.Slash\" class=\"h-4 w-4\" />\r\n </BreadcrumbSeparator>\r\n <BreadcrumbItem>\r\n <BreadcrumbLink Href=\"#\">Settings</BreadcrumbLink>\r\n </BreadcrumbItem>\r\n <BreadcrumbSeparator>\r\n <Blazicon Svg=\"Lucide.Slash\" class=\"h-4 w-4\" />\r\n </BreadcrumbSeparator>\r\n <BreadcrumbItem>\r\n <BreadcrumbPage>Profile</BreadcrumbPage>\r\n </BreadcrumbItem>\r\n </BreadcrumbList>\r\n</Breadcrumb>"
3331
+ "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>"
3324
3332
  }
3325
3333
  ],
3326
3334
  "subComponents": {
@@ -3766,19 +3774,19 @@
3766
3774
  "examples": [
3767
3775
  {
3768
3776
  "title": "Variants",
3769
- "code": "<Button>Default</Button>\r\n<Button Variant=\"Button.ButtonVariant.Secondary\">Secondary</Button>\r\n<Button Variant=\"Button.ButtonVariant.Destructive\">Destructive</Button>\r\n<Button Variant=\"Button.ButtonVariant.Outline\">Outline</Button>\r\n<Button Variant=\"Button.ButtonVariant.Ghost\">Ghost</Button>\r\n<Button Variant=\"Button.ButtonVariant.Link\">Link</Button>"
3777
+ "code": "<Button>Default</Button>\n<Button Variant=\"Button.ButtonVariant.Secondary\">Secondary</Button>\n<Button Variant=\"Button.ButtonVariant.Destructive\">Destructive</Button>\n<Button Variant=\"Button.ButtonVariant.Outline\">Outline</Button>\n<Button Variant=\"Button.ButtonVariant.Ghost\">Ghost</Button>\n<Button Variant=\"Button.ButtonVariant.Link\">Link</Button>"
3770
3778
  },
3771
3779
  {
3772
3780
  "title": "Sizes",
3773
- "code": "<Button Size=\"Button.ButtonSize.Sm\">Small</Button>\r\n<Button>Default</Button>\r\n<Button Size=\"Button.ButtonSize.Lg\">Large</Button>\r\n<Button Size=\"Button.ButtonSize.Icon\">\r\n <Blazicon Svg=\"Lucide.ChevronRight\" class=\"h-4 w-4\" />\r\n</Button>"
3781
+ "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>"
3774
3782
  },
3775
3783
  {
3776
3784
  "title": "With Icon",
3777
- "code": "<Button>\r\n <Blazicon Svg=\"Lucide.Mail\" class=\"h-4 w-4\" />\r\n Login with Email\r\n</Button>\r\n<Button Variant=\"Button.ButtonVariant.Secondary\">\r\n <Blazicon Svg=\"Lucide.Loader2\" class=\"h-4 w-4 animate-spin\" />\r\n Please wait\r\n</Button>"
3785
+ "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>"
3778
3786
  },
3779
3787
  {
3780
3788
  "title": "Disabled",
3781
- "code": "<Button disabled>Disabled</Button>\r\n<Button Variant=\"Button.ButtonVariant.Outline\" disabled>Disabled</Button>"
3789
+ "code": "<Button disabled>Disabled</Button>\n<Button Variant=\"Button.ButtonVariant.Outline\" disabled>Disabled</Button>"
3782
3790
  }
3783
3791
  ],
3784
3792
  "subComponents": {},
@@ -3879,7 +3887,9 @@
3879
3887
  ],
3880
3888
  "namespace": "Lumeo",
3881
3889
  "inheritsFrom": null,
3882
- "implements": [],
3890
+ "implements": [
3891
+ "IAsyncDisposable"
3892
+ ],
3883
3893
  "parameters": [
3884
3894
  {
3885
3895
  "name": "Value",
@@ -4025,6 +4035,14 @@
4025
4035
  "isCascading": false,
4026
4036
  "captureUnmatched": false
4027
4037
  },
4038
+ {
4039
+ "name": "SwipeEnabled",
4040
+ "type": "bool",
4041
+ "default": "true",
4042
+ "description": "When true (default), users can swipe left/right on the day grid to navigate to the next or previous month on touch devices. Vertical page scroll is unaffected (touch-action: pan-y). Set to false to disable swipe navigation.",
4043
+ "isCascading": false,
4044
+ "captureUnmatched": false
4045
+ },
4028
4046
  {
4029
4047
  "name": "Class",
4030
4048
  "type": "string?",
@@ -4077,15 +4095,15 @@
4077
4095
  },
4078
4096
  {
4079
4097
  "title": "Date Range Display",
4080
- "code": "<Stack Gap=\"1.5\">\r\n <Label>Check-in</Label>\r\n <div class=\"rounded-md border p-1\">\r\n <Calendar @bind-Value=\"_checkIn\" />\r\n </div>\r\n</Stack>\r\n@if (_checkIn.HasValue)\r\n{\r\n <Flex Align=\"center\" Gap=\"2\" Class=\"p-3 rounded-md bg-muted/50 text-sm\">\r\n <DynamicIcon Name=\"Calendar\" Class=\"h-4 w-4 text-muted-foreground\" />\r\n <Lumeo.Text As=\"span\" Size=\"sm\">Check-in: <strong>@_checkIn.Value.ToString(\"MMM d, yyyy\")</strong></Lumeo.Text>\r\n </Flex>\r\n}"
4098
+ "code": "<Stack Gap=\"1.5\">\n <Label>Check-in</Label>\n <div class=\"rounded-md border p-1\">\n <Calendar @bind-Value=\"_checkIn\" />\n </div>\n</Stack>\n@if (_checkIn.HasValue)\n{\n <Flex Align=\"center\" Gap=\"2\" Class=\"p-3 rounded-md bg-muted/50 text-sm\">\n <DynamicIcon Name=\"Calendar\" Class=\"h-4 w-4 text-muted-foreground\" />\n <Lumeo.Text As=\"span\" Size=\"sm\">Check-in: <strong>@_checkIn.Value.ToString(\"MMM d, yyyy\")</strong></Lumeo.Text>\n </Flex>\n}"
4081
4099
  },
4082
4100
  {
4083
4101
  "title": "Pre-selected Date",
4084
- "code": "<Calendar @bind-Value=\"_date\" />\r\n\r\n@code {\r\n private DateOnly? _date = DateOnly.FromDateTime(DateTime.Today);\r\n}"
4102
+ "code": "<Calendar @bind-Value=\"_date\" />\n\n@code {\n private DateOnly? _date = DateOnly.FromDateTime(DateTime.Today);\n}"
4085
4103
  },
4086
4104
  {
4087
4105
  "title": "Min & Max Date",
4088
- "code": "<Calendar @bind-Value=\"_date\" MinDate=\"@_minDate\" MaxDate=\"@_maxDate\" />\r\n\r\n@code {\r\n private DateOnly? _date;\r\n private DateOnly _minDate = DateOnly.FromDateTime(DateTime.Today.AddDays(-7));\r\n private DateOnly _maxDate = DateOnly.FromDateTime(DateTime.Today.AddDays(30));\r\n}"
4106
+ "code": "<Calendar @bind-Value=\"_date\" MinDate=\"@_minDate\" MaxDate=\"@_maxDate\" />\n\n@code {\n private DateOnly? _date;\n private DateOnly _minDate = DateOnly.FromDateTime(DateTime.Today.AddDays(-7));\n private DateOnly _maxDate = DateOnly.FromDateTime(DateTime.Today.AddDays(30));\n}"
4089
4107
  }
4090
4108
  ],
4091
4109
  "subComponents": {},
@@ -4169,19 +4187,19 @@
4169
4187
  "examples": [
4170
4188
  {
4171
4189
  "title": "Default",
4172
- "code": "<Card>\r\n <CardHeader>\r\n <Heading Level=\"3\" Size=\"lg\" Class=\"leading-none tracking-tight\">Notifications</Heading>\r\n <Lumeo.Text Size=\"sm\" Color=\"muted\">You have 3 unread messages.</Lumeo.Text>\r\n </CardHeader>\r\n <CardContent>\r\n <Lumeo.Text Size=\"sm\">Your recent notifications will appear here.</Lumeo.Text>\r\n </CardContent>\r\n <CardFooter>\r\n <Button Class=\"w-full\">Mark all as read</Button>\r\n </CardFooter>\r\n</Card>"
4190
+ "code": "<Card>\n <CardHeader>\n <Heading Level=\"3\" Size=\"lg\" Class=\"leading-none tracking-tight\">Notifications</Heading>\n <Lumeo.Text Size=\"sm\" Color=\"muted\">You have 3 unread messages.</Lumeo.Text>\n </CardHeader>\n <CardContent>\n <Lumeo.Text Size=\"sm\">Your recent notifications will appear here.</Lumeo.Text>\n </CardContent>\n <CardFooter>\n <Button Class=\"w-full\">Mark all as read</Button>\n </CardFooter>\n</Card>"
4173
4191
  },
4174
4192
  {
4175
4193
  "title": "Card with Actions",
4176
- "code": "<Card>\r\n <CardHeader>\r\n <Heading Level=\"3\" Size=\"lg\" Class=\"leading-none tracking-tight\">Blog Post</Heading>\r\n <Lumeo.Text Size=\"sm\" Color=\"muted\">Published on Jan 12, 2025</Lumeo.Text>\r\n </CardHeader>\r\n <CardContent>\r\n <Lumeo.Text Size=\"sm\" Color=\"foreground\">\r\n Learn how to build accessible, composable UI components using\r\n Blazor and Tailwind CSS in this in-depth guide.\r\n </Lumeo.Text>\r\n </CardContent>\r\n <CardFooter>\r\n <Flex Gap=\"2\" Class=\"w-full\">\r\n <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\">\r\n <Blazicon Svg=\"Lucide.Copy\" class=\"h-4 w-4\" /> Edit\r\n </Button>\r\n <Button Variant=\"Button.ButtonVariant.Destructive\" Size=\"Button.ButtonSize.Sm\">\r\n <Blazicon Svg=\"Lucide.Trash\" class=\"h-4 w-4\" /> Delete\r\n </Button>\r\n </Flex>\r\n </CardFooter>\r\n</Card>"
4194
+ "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>"
4177
4195
  },
4178
4196
  {
4179
4197
  "title": "Horizontal Card",
4180
- "code": "<Card>\r\n <Flex>\r\n <Center Class=\"w-32 h-32 rounded-l-lg bg-muted shrink-0\">\r\n <Blazicon Svg=\"Lucide.Star\" class=\"h-10 w-10 text-muted-foreground\" />\r\n </Center>\r\n <Stack Gap=\"0\" Class=\"flex-1\">\r\n <CardHeader>\r\n <Heading Level=\"3\" Size=\"base\" Weight=\"semibold\" Class=\"leading-none tracking-tight\">Featured Article</Heading>\r\n <Lumeo.Text Size=\"sm\" Color=\"muted\">5 min read</Lumeo.Text>\r\n </CardHeader>\r\n <CardContent>\r\n <Lumeo.Text Size=\"sm\" Color=\"muted\">\r\n An introduction to modern component-driven design systems.\r\n </Lumeo.Text>\r\n </CardContent>\r\n <CardFooter>\r\n <Button Variant=\"Button.ButtonVariant.Link\" Class=\"px-0\">Read more</Button>\r\n </CardFooter>\r\n </Stack>\r\n </Flex>\r\n</Card>"
4198
+ "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>"
4181
4199
  },
4182
4200
  {
4183
4201
  "title": "With Form",
4184
- "code": "<Card>\r\n <CardHeader>\r\n <Heading Level=\"3\" Size=\"lg\" Class=\"leading-none tracking-tight\">Create project</Heading>\r\n <Lumeo.Text Size=\"sm\" Color=\"muted\">Deploy your new project in one click.</Lumeo.Text>\r\n </CardHeader>\r\n <CardContent>\r\n <Stack Gap=\"4\">\r\n <FormField Label=\"Name\">\r\n <Input placeholder=\"Name of your project\" />\r\n </FormField>\r\n <FormField Label=\"Description\">\r\n <Input placeholder=\"Describe your project\" />\r\n </FormField>\r\n </Stack>\r\n </CardContent>\r\n <CardFooter>\r\n <Flex Justify=\"between\" Class=\"w-full\">\r\n <Button Variant=\"Button.ButtonVariant.Outline\">Cancel</Button>\r\n <Button>Deploy</Button>\r\n </Flex>\r\n </CardFooter>\r\n</Card>"
4202
+ "code": "<Card>\n <CardHeader>\n <Heading Level=\"3\" Size=\"lg\" Class=\"leading-none tracking-tight\">Create project</Heading>\n <Lumeo.Text Size=\"sm\" Color=\"muted\">Deploy your new project in one click.</Lumeo.Text>\n </CardHeader>\n <CardContent>\n <Stack Gap=\"4\">\n <FormField Label=\"Name\">\n <Input placeholder=\"Name of your project\" />\n </FormField>\n <FormField Label=\"Description\">\n <Input placeholder=\"Describe your project\" />\n </FormField>\n </Stack>\n </CardContent>\n <CardFooter>\n <Flex Justify=\"between\" Class=\"w-full\">\n <Button Variant=\"Button.ButtonVariant.Outline\">Cancel</Button>\n <Button>Deploy</Button>\n </Flex>\n </CardFooter>\n</Card>"
4185
4203
  }
4186
4204
  ],
4187
4205
  "subComponents": {
@@ -4385,7 +4403,7 @@
4385
4403
  "records": [
4386
4404
  {
4387
4405
  "name": "CarouselContext",
4388
- "signature": "CarouselContext(\r\n string ContentId,\r\n CarouselOrientation Orientation,\r\n bool CanScrollPrev,\r\n bool CanScrollNext,\r\n EventCallback ScrollPrev,\r\n EventCallback ScrollNext\r\n )",
4406
+ "signature": "CarouselContext(\n string ContentId,\n CarouselOrientation Orientation,\n bool CanScrollPrev,\n bool CanScrollNext,\n EventCallback ScrollPrev,\n EventCallback ScrollNext\n )",
4389
4407
  "description": null
4390
4408
  }
4391
4409
  ],
@@ -4398,19 +4416,19 @@
4398
4416
  "examples": [
4399
4417
  {
4400
4418
  "title": "Default",
4401
- "code": "<Carousel>\r\n <CarouselContent>\r\n @for (var i = 1; i <= 5; i++)\r\n {\r\n var index = i;\r\n <CarouselItem>\r\n <div class=\"p-1\">\r\n <Card>\r\n <CardContent Class=\"flex aspect-square items-center justify-center p-6\">\r\n <span class=\"text-4xl font-semibold\">@index</span>\r\n </CardContent>\r\n </Card>\r\n </div>\r\n </CarouselItem>\r\n }\r\n </CarouselContent>\r\n <CarouselPrevious />\r\n <CarouselNext />\r\n</Carousel>"
4419
+ "code": "<Carousel>\n <CarouselContent>\n @for (var i = 1; i <= 5; i++)\n {\n var index = i;\n <CarouselItem>\n <div class=\"p-1\">\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 </div>\n </CarouselItem>\n }\n </CarouselContent>\n <CarouselPrevious />\n <CarouselNext />\n</Carousel>"
4402
4420
  },
4403
4421
  {
4404
4422
  "title": "With Loop",
4405
- "code": "<Carousel Loop=\"true\">\r\n <CarouselContent>\r\n @for (var i = 1; i <= 5; i++)\r\n {\r\n var index = i;\r\n <CarouselItem>\r\n <div class=\"p-1\">\r\n <Card>\r\n <CardContent Class=\"flex aspect-square items-center justify-center p-6\">\r\n <span class=\"text-4xl font-semibold\">@index</span>\r\n </CardContent>\r\n </Card>\r\n </div>\r\n </CarouselItem>\r\n }\r\n </CarouselContent>\r\n <CarouselPrevious />\r\n <CarouselNext />\r\n</Carousel>"
4423
+ "code": "<Carousel Loop=\"true\">\n <CarouselContent>\n @for (var i = 1; i <= 5; i++)\n {\n var index = i;\n <CarouselItem>\n <div class=\"p-1\">\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 </div>\n </CarouselItem>\n }\n </CarouselContent>\n <CarouselPrevious />\n <CarouselNext />\n</Carousel>"
4406
4424
  },
4407
4425
  {
4408
4426
  "title": "Orientation — interactive",
4409
- "code": "<Segmented @bind-Value=\"_orientationSel\" Options=\"_orientationOptions\" />\r\n<Carousel Orientation=\"@(Enum.Parse<Carousel.CarouselOrientation>(_orientationSel))\">\r\n <CarouselContent>\r\n @for (var i = 1; i <= 4; i++) {\r\n var index = i;\r\n <CarouselItem>\r\n <Card>\r\n <CardContent Class=\"flex aspect-square items-center justify-center p-6\">\r\n <span class=\"text-4xl font-semibold\">@index</span>\r\n </CardContent>\r\n </Card>\r\n </CarouselItem>\r\n }\r\n </CarouselContent>\r\n <CarouselPrevious />\r\n <CarouselNext />\r\n</Carousel>\r\n\r\n@code {\r\n private string _orientationSel = \"Horizontal\";\r\n private List<Segmented.SegmentedOption> _orientationOptions = new()\r\n {\r\n new() { Label = \"Horizontal\", Value = \"Horizontal\" },\r\n new() { Label = \"Vertical\", Value = \"Vertical\" },\r\n };\r\n}"
4427
+ "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}"
4410
4428
  },
4411
4429
  {
4412
4430
  "title": "Product Gallery",
4413
- "code": "<Carousel>\r\n <CarouselContent>\r\n @foreach (var product in _products)\r\n {\r\n <CarouselItem>\r\n <div class=\"p-1\">\r\n <Card>\r\n <AspectRatio Ratio=\"4.0 / 3.0\" Class=\"rounded-t-lg overflow-hidden bg-muted\">\r\n <div class=\"flex items-center justify-center h-full text-sm text-muted-foreground\">@product.Category</div>\r\n </AspectRatio>\r\n <CardContent Class=\"p-4\">\r\n <Lumeo.Text Size=\"sm\" Weight=\"semibold\">@product.Name</Lumeo.Text>\r\n <Lumeo.Text Size=\"sm\" Color=\"muted\">@product.Price</Lumeo.Text>\r\n </CardContent>\r\n </Card>\r\n </div>\r\n </CarouselItem>\r\n }\r\n </CarouselContent>\r\n <CarouselPrevious />\r\n <CarouselNext />\r\n</Carousel>"
4431
+ "code": "<Carousel>\n <CarouselContent>\n @foreach (var product in _products)\n {\n <CarouselItem>\n <div class=\"p-1\">\n <Card>\n <AspectRatio Ratio=\"4.0 / 3.0\" Class=\"rounded-t-lg overflow-hidden bg-muted\">\n <div class=\"flex items-center justify-center h-full text-sm text-muted-foreground\">@product.Category</div>\n </AspectRatio>\n <CardContent Class=\"p-4\">\n <Lumeo.Text Size=\"sm\" Weight=\"semibold\">@product.Name</Lumeo.Text>\n <Lumeo.Text Size=\"sm\" Color=\"muted\">@product.Price</Lumeo.Text>\n </CardContent>\n </Card>\n </div>\n </CarouselItem>\n }\n </CarouselContent>\n <CarouselPrevious />\n <CarouselNext />\n</Carousel>"
4414
4432
  }
4415
4433
  ],
4416
4434
  "subComponents": {
@@ -4858,15 +4876,15 @@
4858
4876
  "examples": [
4859
4877
  {
4860
4878
  "title": "Basic Centering",
4861
- "code": "<Center Class=\"h-32 w-full\">\r\n <Text Color=\"muted\">Centered content</Text>\r\n</Center>"
4879
+ "code": "<Center Class=\"h-32 w-full\">\n <Text Color=\"muted\">Centered content</Text>\n</Center>"
4862
4880
  },
4863
4881
  {
4864
4882
  "title": "With Fixed Height",
4865
- "code": "<Center Height=\"200px\">\r\n <Stack Align=\"center\" Gap=\"2\">\r\n <DynamicIcon Name=\"Image\" Class=\"h-8 w-8 text-muted-foreground\" />\r\n <Text Color=\"muted\" Size=\"sm\">No image selected</Text>\r\n </Stack>\r\n</Center>"
4883
+ "code": "<Center Height=\"200px\">\n <Stack Align=\"center\" Gap=\"2\">\n <DynamicIcon Name=\"Image\" Class=\"h-8 w-8 text-muted-foreground\" />\n <Text Color=\"muted\" Size=\"sm\">No image selected</Text>\n </Stack>\n</Center>"
4866
4884
  },
4867
4885
  {
4868
4886
  "title": "Inline Center",
4869
- "code": "<Text>\r\n Click the\r\n <Center Inline=\"true\" Class=\"h-6 w-6 rounded bg-primary/20 mx-1\">\r\n <DynamicIcon Name=\"Plus\" Class=\"h-3 w-3 text-primary\" />\r\n </Center>\r\n icon to add an item.\r\n</Text>"
4887
+ "code": "<Text>\n Click the\n <Center Inline=\"true\" Class=\"h-6 w-6 rounded bg-primary/20 mx-1\">\n <DynamicIcon Name=\"Plus\" Class=\"h-3 w-3 text-primary\" />\n </Center>\n icon to add an item.\n</Text>"
4870
4888
  }
4871
4889
  ],
4872
4890
  "subComponents": {},
@@ -4884,8 +4902,6 @@
4884
4902
  "UI/Chart/ChartHelper.cs",
4885
4903
  "UI/Chart/ChartLabelHelper.cs",
4886
4904
  "UI/Chart/ChartPlaceholderFactory.cs",
4887
- "UI/Chart/ChartSkeleton.razor",
4888
- "UI/Chart/ChartSkeletonKind.cs",
4889
4905
  "UI/Chart/Charts/AreaChart.razor",
4890
4906
  "UI/Chart/Charts/BarChart.razor",
4891
4907
  "UI/Chart/Charts/BoxPlotChart.razor",
@@ -4916,6 +4932,8 @@
4916
4932
  "UI/Chart/Charts/TreemapChart.razor",
4917
4933
  "UI/Chart/Charts/WaterfallChart.razor",
4918
4934
  "UI/Chart/Charts/WordCloudChart.razor",
4935
+ "UI/Chart/ChartSkeleton.razor",
4936
+ "UI/Chart/ChartSkeletonKind.cs",
4919
4937
  "UI/Chart/EChartOption.cs"
4920
4938
  ],
4921
4939
  "namespace": "Lumeo",
@@ -12580,6 +12598,14 @@
12580
12598
  "isCascading": false,
12581
12599
  "captureUnmatched": false
12582
12600
  },
12601
+ {
12602
+ "name": "HapticFeedback",
12603
+ "type": "bool",
12604
+ "default": null,
12605
+ "description": "When true, triggers a short haptic vibration via navigator.vibrate() each time the checkbox state changes. Silently no-ops on browsers without the Vibration API (e.g. iOS Safari). Default is false.",
12606
+ "isCascading": false,
12607
+ "captureUnmatched": false
12608
+ },
12583
12609
  {
12584
12610
  "name": "Required",
12585
12611
  "type": "bool",
@@ -12664,19 +12690,19 @@
12664
12690
  "examples": [
12665
12691
  {
12666
12692
  "title": "Default",
12667
- "code": "<Flex Gap=\"2\" Align=\"center\">\r\n <Checkbox @bind-Checked=\"_checked\" />\r\n <Label>Accept terms and conditions</Label>\r\n</Flex>"
12693
+ "code": "<Flex Gap=\"2\" Align=\"center\">\n <Checkbox @bind-Checked=\"_checked\" />\n <Label>Accept terms and conditions</Label>\n</Flex>"
12668
12694
  },
12669
12695
  {
12670
12696
  "title": "With Binding",
12671
- "code": "<Flex Gap=\"2\" Align=\"center\">\r\n <Checkbox @bind-Checked=\"_checked\" />\r\n <Label>Enable notifications</Label>\r\n</Flex>\r\n<Lumeo.Text Size=\"sm\" Color=\"muted\">Checked: @_checked</Lumeo.Text>\r\n\r\n@code {\r\n private bool _checked = true;\r\n}"
12697
+ "code": "<Flex Gap=\"2\" Align=\"center\">\n <Checkbox @bind-Checked=\"_checked\" />\n <Label>Enable notifications</Label>\n</Flex>\n<Lumeo.Text Size=\"sm\" Color=\"muted\">Checked: @_checked</Lumeo.Text>\n\n@code {\n private bool _checked = true;\n}"
12672
12698
  },
12673
12699
  {
12674
12700
  "title": "Disabled",
12675
- "code": "<Checkbox Checked=\"false\" Disabled=\"true\" />\r\n<Checkbox Checked=\"true\" Disabled=\"true\" />"
12701
+ "code": "<Checkbox Checked=\"false\" Disabled=\"true\" />\n<Checkbox Checked=\"true\" Disabled=\"true\" />"
12676
12702
  },
12677
12703
  {
12678
12704
  "title": "Multiple Options",
12679
- "code": "<Checkbox @bind-Checked=\"_optionA\" />\r\n<Checkbox @bind-Checked=\"_optionB\" />\r\n<Checkbox @bind-Checked=\"_optionC\" />"
12705
+ "code": "<Checkbox @bind-Checked=\"_optionA\" />\n<Checkbox @bind-Checked=\"_optionB\" />\n<Checkbox @bind-Checked=\"_optionC\" />"
12680
12706
  }
12681
12707
  ],
12682
12708
  "subComponents": {},
@@ -12858,19 +12884,19 @@
12858
12884
  "examples": [
12859
12885
  {
12860
12886
  "title": "Variants",
12861
- "code": "<ChipGroup>\r\n <Chip>Default</Chip>\r\n <Chip Variant=\"Chip.ChipVariant.Outline\">Outline</Chip>\r\n <Chip Variant=\"Chip.ChipVariant.Solid\" Color=\"primary\">Primary</Chip>\r\n <Chip Variant=\"Chip.ChipVariant.Solid\" Color=\"destructive\">Destructive</Chip>\r\n <Chip Variant=\"Chip.ChipVariant.Solid\" Color=\"success\">Success</Chip>\r\n</ChipGroup>"
12887
+ "code": "<ChipGroup>\n <Chip>Default</Chip>\n <Chip Variant=\"Chip.ChipVariant.Outline\">Outline</Chip>\n <Chip Variant=\"Chip.ChipVariant.Solid\" Color=\"primary\">Primary</Chip>\n <Chip Variant=\"Chip.ChipVariant.Solid\" Color=\"destructive\">Destructive</Chip>\n <Chip Variant=\"Chip.ChipVariant.Solid\" Color=\"success\">Success</Chip>\n</ChipGroup>"
12862
12888
  },
12863
12889
  {
12864
12890
  "title": "Sizes",
12865
- "code": "<Flex Class=\"items-center gap-2\">\r\n <Chip Size=\"Chip.ChipSize.Sm\">Small</Chip>\r\n <Chip>Default</Chip>\r\n <Chip Size=\"Chip.ChipSize.Lg\">Large</Chip>\r\n</Flex>"
12891
+ "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>"
12866
12892
  },
12867
12893
  {
12868
12894
  "title": "Closable",
12869
- "code": "<ChipGroup>\r\n @foreach (var tag in _tags)\r\n {\r\n var t = tag;\r\n <Chip Closable=\"true\" OnClose=\"@(() => _tags.Remove(t))\">@t</Chip>\r\n }\r\n</ChipGroup>"
12895
+ "code": "<ChipGroup>\n @foreach (var tag in _tags)\n {\n var t = tag;\n <Chip Closable=\"true\" OnClose=\"@(() => _tags.Remove(t))\">@t</Chip>\n }\n</ChipGroup>"
12870
12896
  },
12871
12897
  {
12872
12898
  "title": "Clickable",
12873
- "code": "<ChipGroup>\r\n @foreach (var filter in _filters)\r\n {\r\n var f = filter;\r\n <Chip Clickable=\"true\"\r\n Variant=\"@(_active == f ? Chip.ChipVariant.Solid : Chip.ChipVariant.Outline)\"\r\n Color=\"@(_active == f ? \"primary\" : null)\"\r\n OnClick=\"@(() => _active = f)\">\r\n @f\r\n </Chip>\r\n }\r\n</ChipGroup>"
12899
+ "code": "<ChipGroup>\n @foreach (var filter in _filters)\n {\n var f = filter;\n <Chip Clickable=\"true\"\n Variant=\"@(_active == f ? Chip.ChipVariant.Solid : Chip.ChipVariant.Outline)\"\n Color=\"@(_active == f ? \"primary\" : null)\"\n OnClick=\"@(() => _active = f)\">\n @f\n </Chip>\n }\n</ChipGroup>"
12874
12900
  }
12875
12901
  ],
12876
12902
  "subComponents": {
@@ -12984,7 +13010,7 @@
12984
13010
  },
12985
13011
  {
12986
13012
  "title": "Block",
12987
- "code": "<Code Variant=\"block\">dotnet add package Lumeo --version 2.0.0</Code>"
13013
+ "code": "<Code Variant=\"block\">dotnet add package Lumeo --version 2.0.1</Code>"
12988
13014
  },
12989
13015
  {
12990
13016
  "title": "Custom Size",
@@ -13098,15 +13124,15 @@
13098
13124
  "examples": [
13099
13125
  {
13100
13126
  "title": "Default",
13101
- "code": "<Collapsible @bind-Open=\"_isOpen\">\r\n <div class=\"flex items-center justify-between\">\r\n <h4 class=\"text-sm font-semibold\">Starred Repositories</h4>\r\n <CollapsibleTrigger>\r\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">\r\n <Blazicon Svg=\"Lucide.ChevronDown\" class=\"h-4 w-4\" />\r\n </Button>\r\n </CollapsibleTrigger>\r\n </div>\r\n <CollapsibleContent>\r\n <div class=\"rounded-md border px-4 py-2 text-sm\">Content here</div>\r\n </CollapsibleContent>\r\n</Collapsible>"
13127
+ "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>"
13102
13128
  },
13103
13129
  {
13104
13130
  "title": "Initially Open",
13105
- "code": "<Collapsible @bind-Open=\"_isOpen\">\r\n <CollapsibleTrigger>\r\n <span class=\"text-sm font-medium\">More info</span>\r\n </CollapsibleTrigger>\r\n <CollapsibleContent>\r\n <p class=\"mt-2 text-sm text-muted-foreground\">Expandable content.</p>\r\n </CollapsibleContent>\r\n</Collapsible>"
13131
+ "code": "<Collapsible @bind-Open=\"_isOpen\">\n <CollapsibleTrigger>\n <span class=\"text-sm font-medium\">More info</span>\n </CollapsibleTrigger>\n <CollapsibleContent>\n <p class=\"mt-2 text-sm text-muted-foreground\">Expandable content.</p>\n </CollapsibleContent>\n</Collapsible>"
13106
13132
  },
13107
13133
  {
13108
13134
  "title": "Sidebar Section",
13109
- "code": "<Collapsible @bind-Open=\"_isOpen\">\r\n <CollapsibleTrigger>\r\n <div class=\"flex items-center justify-between px-2 py-1.5 rounded-md hover:bg-accent cursor-pointer\">\r\n <div class=\"flex items-center gap-2 text-sm font-medium\">\r\n <Blazicon Svg=\"Lucide.Settings\" class=\"h-4 w-4\" /> Settings\r\n </div>\r\n <Blazicon Svg=\"Lucide.ChevronDown\" class=\"@($\"h-4 w-4 transition-transform {(_isOpen ? \\\"rotate-180\\\" : \\\"\\\")}\")}\" />\r\n </div>\r\n </CollapsibleTrigger>\r\n <CollapsibleContent>\r\n <div class=\"pl-6 mt-1 space-y-1\">\r\n <div class=\"px-2 py-1.5 text-sm text-muted-foreground\">General</div>\r\n <div class=\"px-2 py-1.5 text-sm text-muted-foreground\">Security</div>\r\n <div class=\"px-2 py-1.5 text-sm text-muted-foreground\">Notifications</div>\r\n </div>\r\n </CollapsibleContent>\r\n</Collapsible>"
13135
+ "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>"
13110
13136
  }
13111
13137
  ],
13112
13138
  "subComponents": {
@@ -13740,7 +13766,7 @@
13740
13766
  "records": [
13741
13767
  {
13742
13768
  "name": "ComboboxContext",
13743
- "signature": "ComboboxContext(\r\n string? Value, HashSet<string>? Values, string SearchText, bool IsOpen, bool Multiple, bool IsSearchLoading, bool Creatable,\r\n EventCallback<string> OnSelect, EventCallback<bool> SetOpen, EventCallback<string> OnSearch,\r\n EventCallback<string> OnCreateItem,\r\n string WrapperId, string ContentId, int FocusedIndex, string? FocusedItemId, string? FocusedItemValue,\r\n EventCallback<int> SetFocusedIndex,\r\n Action<string, string> RegisterItem, Action<string> UnregisterItem, int ItemCount,\r\n bool Invalid, bool Required,\r\n // Data-bound mode params (null when composition mode)\r\n IEnumerable<object>? Items,\r\n Func<object, string> ItemValue,\r\n Func<object, string>? ItemText,\r\n Func<object, string?>? ItemGroup,\r\n Func<object, bool>? ItemDisabled,\r\n RenderFragment<object>? ItemTemplate,\r\n bool Virtualize,\r\n float ItemSize)",
13769
+ "signature": "ComboboxContext(\n string? Value, HashSet<string>? Values, string SearchText, bool IsOpen, bool Multiple, bool IsSearchLoading, bool Creatable,\n EventCallback<string> OnSelect, EventCallback<bool> SetOpen, EventCallback<string> OnSearch,\n EventCallback<string> OnCreateItem,\n string WrapperId, string ContentId, int FocusedIndex, string? FocusedItemId, string? FocusedItemValue,\n EventCallback<int> SetFocusedIndex,\n Action<string, string> RegisterItem, Action<string> UnregisterItem, int ItemCount,\n bool Invalid, bool Required,\n // Data-bound mode params (null when composition mode)\n IEnumerable<object>? Items,\n Func<object, string> ItemValue,\n Func<object, string>? ItemText,\n Func<object, string?>? ItemGroup,\n Func<object, bool>? ItemDisabled,\n RenderFragment<object>? ItemTemplate,\n bool Virtualize,\n float ItemSize)",
13744
13770
  "description": null
13745
13771
  }
13746
13772
  ],
@@ -13759,19 +13785,19 @@
13759
13785
  "examples": [
13760
13786
  {
13761
13787
  "title": "Default",
13762
- "code": "<Combobox @bind-Value=\"_selected\" @bind-Open=\"_isOpen\">\r\n <ComboboxInput Placeholder=\"Search frameworks...\" />\r\n <ComboboxContent>\r\n <ComboboxItem Value=\"blazor\">Blazor</ComboboxItem>\r\n <ComboboxItem Value=\"react\">React</ComboboxItem>\r\n <ComboboxItem Value=\"vue\">Vue.js</ComboboxItem>\r\n <ComboboxEmpty>No framework found.</ComboboxEmpty>\r\n </ComboboxContent>\r\n</Combobox>"
13788
+ "code": "<Combobox @bind-Value=\"_selected\" @bind-Open=\"_isOpen\">\n <ComboboxInput Placeholder=\"Search frameworks...\" />\n <ComboboxContent>\n <ComboboxItem Value=\"blazor\">Blazor</ComboboxItem>\n <ComboboxItem Value=\"react\">React</ComboboxItem>\n <ComboboxItem Value=\"vue\">Vue.js</ComboboxItem>\n <ComboboxEmpty>No framework found.</ComboboxEmpty>\n </ComboboxContent>\n</Combobox>"
13763
13789
  },
13764
13790
  {
13765
13791
  "title": "Country Selector",
13766
- "code": "<Label>Country</Label>\r\n<Combobox @bind-Value=\"_selected\" @bind-Open=\"_isOpen\">\r\n <ComboboxInput Placeholder=\"Search countries...\" />\r\n <ComboboxContent>\r\n <ComboboxItem Value=\"Australia\">Australia</ComboboxItem>\r\n <ComboboxItem Value=\"Canada\">Canada</ComboboxItem>\r\n <ComboboxItem Value=\"France\">France</ComboboxItem>\r\n <ComboboxItem Value=\"United Kingdom\">United Kingdom</ComboboxItem>\r\n <ComboboxItem Value=\"United States\">United States</ComboboxItem>\r\n <ComboboxEmpty>No country found.</ComboboxEmpty>\r\n </ComboboxContent>\r\n</Combobox>"
13792
+ "code": "<Label>Country</Label>\n<Combobox @bind-Value=\"_selected\" @bind-Open=\"_isOpen\">\n <ComboboxInput Placeholder=\"Search countries...\" />\n <ComboboxContent>\n <ComboboxItem Value=\"Australia\">Australia</ComboboxItem>\n <ComboboxItem Value=\"Canada\">Canada</ComboboxItem>\n <ComboboxItem Value=\"France\">France</ComboboxItem>\n <ComboboxItem Value=\"United Kingdom\">United Kingdom</ComboboxItem>\n <ComboboxItem Value=\"United States\">United States</ComboboxItem>\n <ComboboxEmpty>No country found.</ComboboxEmpty>\n </ComboboxContent>\n</Combobox>"
13767
13793
  },
13768
13794
  {
13769
13795
  "title": "With Label",
13770
- "code": "<Label>Language</Label>\r\n<Combobox @bind-Value=\"_selected\" @bind-Open=\"_isOpen\">\r\n <ComboboxInput Placeholder=\"Search languages...\" />\r\n <ComboboxContent>\r\n <ComboboxItem Value=\"C#\">C#</ComboboxItem>\r\n <ComboboxItem Value=\"TypeScript\">TypeScript</ComboboxItem>\r\n <ComboboxEmpty>No language found.</ComboboxEmpty>\r\n </ComboboxContent>\r\n</Combobox>"
13796
+ "code": "<Label>Language</Label>\n<Combobox @bind-Value=\"_selected\" @bind-Open=\"_isOpen\">\n <ComboboxInput Placeholder=\"Search languages...\" />\n <ComboboxContent>\n <ComboboxItem Value=\"C#\">C#</ComboboxItem>\n <ComboboxItem Value=\"TypeScript\">TypeScript</ComboboxItem>\n <ComboboxEmpty>No language found.</ComboboxEmpty>\n </ComboboxContent>\n</Combobox>"
13771
13797
  },
13772
13798
  {
13773
13799
  "title": "Multiple Selection",
13774
- "code": "<Combobox Multiple=\"true\" @bind-Values=\"_selectedFrameworks\" @bind-Open=\"_isOpen\">\r\n <ComboboxInput Placeholder=\"Select frameworks...\" />\r\n <ComboboxContent>\r\n <ComboboxItem Value=\"react\">React</ComboboxItem>\r\n <ComboboxItem Value=\"vue\">Vue</ComboboxItem>\r\n <ComboboxItem Value=\"angular\">Angular</ComboboxItem>\r\n <ComboboxItem Value=\"svelte\">Svelte</ComboboxItem>\r\n <ComboboxItem Value=\"blazor\">Blazor</ComboboxItem>\r\n </ComboboxContent>\r\n</Combobox>\r\n\r\n@code {\r\n private HashSet<string> _selectedFrameworks = new();\r\n private bool _isOpen;\r\n}"
13800
+ "code": "<Combobox Multiple=\"true\" @bind-Values=\"_selectedFrameworks\" @bind-Open=\"_isOpen\">\n <ComboboxInput Placeholder=\"Select frameworks...\" />\n <ComboboxContent>\n <ComboboxItem Value=\"react\">React</ComboboxItem>\n <ComboboxItem Value=\"vue\">Vue</ComboboxItem>\n <ComboboxItem Value=\"angular\">Angular</ComboboxItem>\n <ComboboxItem Value=\"svelte\">Svelte</ComboboxItem>\n <ComboboxItem Value=\"blazor\">Blazor</ComboboxItem>\n </ComboboxContent>\n</Combobox>\n\n@code {\n private HashSet<string> _selectedFrameworks = new();\n private bool _isOpen;\n}"
13775
13801
  }
13776
13802
  ],
13777
13803
  "subComponents": {
@@ -14100,7 +14126,7 @@
14100
14126
  "records": [
14101
14127
  {
14102
14128
  "name": "CommandContext",
14103
- "signature": "CommandContext(\r\n string SearchText,\r\n EventCallback<string> OnSearch,\r\n Action<string> RegisterItem,\r\n Action<string> UnregisterItem,\r\n int VisibleItemCount)",
14129
+ "signature": "CommandContext(\n string SearchText,\n EventCallback<string> OnSearch,\n Action<string> RegisterItem,\n Action<string> UnregisterItem,\n int VisibleItemCount)",
14104
14130
  "description": null
14105
14131
  }
14106
14132
  ],
@@ -14118,19 +14144,19 @@
14118
14144
  "examples": [
14119
14145
  {
14120
14146
  "title": "Default",
14121
- "code": "<Command>\r\n <CommandInput Placeholder=\"Type a command or search...\" />\r\n <CommandList>\r\n <CommandGroup Heading=\"Suggestions\">\r\n <CommandItem>\r\n <Blazicon Svg=\"Lucide.Calendar\" class=\"mr-2 h-4 w-4\" />\r\n <span>Calendar</span>\r\n </CommandItem>\r\n <CommandItem>\r\n <Blazicon Svg=\"Lucide.Settings\" class=\"mr-2 h-4 w-4\" />\r\n <span>Settings</span>\r\n </CommandItem>\r\n </CommandGroup>\r\n <CommandSeparator />\r\n <CommandGroup Heading=\"Actions\">\r\n <CommandItem>\r\n <Blazicon Svg=\"Lucide.User\" class=\"mr-2 h-4 w-4\" />\r\n <span>Profile</span>\r\n </CommandItem>\r\n </CommandGroup>\r\n </CommandList>\r\n</Command>"
14147
+ "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>"
14122
14148
  },
14123
14149
  {
14124
14150
  "title": "Compact",
14125
- "code": "<Command>\r\n <CommandInput Placeholder=\"Search...\" />\r\n <CommandList>\r\n <CommandGroup>\r\n <CommandItem>New File</CommandItem>\r\n <CommandItem>Open File</CommandItem>\r\n <CommandItem>Save</CommandItem>\r\n </CommandGroup>\r\n </CommandList>\r\n</Command>"
14151
+ "code": "<Command>\n <CommandInput Placeholder=\"Search...\" />\n <CommandList>\n <CommandGroup>\n <CommandItem>New File</CommandItem>\n <CommandItem>Open File</CommandItem>\n <CommandItem>Save</CommandItem>\n </CommandGroup>\n </CommandList>\n</Command>"
14126
14152
  },
14127
14153
  {
14128
14154
  "title": "Navigation",
14129
- "code": "<Command>\r\n <CommandInput Placeholder=\"Go to...\" />\r\n <CommandList>\r\n <CommandGroup Heading=\"Pages\">\r\n <CommandItem>\r\n <Blazicon Svg=\"Lucide.House\" class=\"mr-2 h-4 w-4\" />\r\n <span>Dashboard</span>\r\n </CommandItem>\r\n <CommandItem>\r\n <Blazicon Svg=\"Lucide.User\" class=\"mr-2 h-4 w-4\" />\r\n <span>Profile</span>\r\n </CommandItem>\r\n <CommandItem>\r\n <Blazicon Svg=\"Lucide.Settings\" class=\"mr-2 h-4 w-4\" />\r\n <span>Settings</span>\r\n </CommandItem>\r\n </CommandGroup>\r\n <CommandSeparator />\r\n <CommandGroup Heading=\"Recent\">\r\n <CommandItem>\r\n <Blazicon Svg=\"Lucide.Bell\" class=\"mr-2 h-4 w-4\" />\r\n <span>Notifications</span>\r\n </CommandItem>\r\n <CommandItem>\r\n <Blazicon Svg=\"Lucide.Mail\" class=\"mr-2 h-4 w-4\" />\r\n <span>Messages</span>\r\n </CommandItem>\r\n </CommandGroup>\r\n </CommandList>\r\n</Command>"
14155
+ "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>"
14130
14156
  },
14131
14157
  {
14132
14158
  "title": "With Shortcuts",
14133
- "code": "<Command Class=\"rounded-lg border shadow-md w-full max-w-md\">\r\n <CommandInput Placeholder=\"Type a command...\" />\r\n <CommandList>\r\n <CommandGroup Heading=\"Actions\">\r\n <CommandItem Shortcut=\"Ctrl+N\">New File</CommandItem>\r\n <CommandItem Shortcut=\"Ctrl+S\">Save</CommandItem>\r\n <CommandItem Shortcut=\"Ctrl+Shift+P\">Command Palette</CommandItem>\r\n </CommandGroup>\r\n <CommandGroup Heading=\"Navigation\">\r\n <CommandItem Shortcut=\"Ctrl+1\">Go to Dashboard</CommandItem>\r\n <CommandItem Shortcut=\"Ctrl+2\">Go to Settings</CommandItem>\r\n </CommandGroup>\r\n </CommandList>\r\n</Command>"
14159
+ "code": "<Command Class=\"rounded-lg border shadow-md w-full max-w-md\">\n <CommandInput Placeholder=\"Type a command...\" />\n <CommandList>\n <CommandGroup Heading=\"Actions\">\n <CommandItem Shortcut=\"Ctrl+N\">New File</CommandItem>\n <CommandItem Shortcut=\"Ctrl+S\">Save</CommandItem>\n <CommandItem Shortcut=\"Ctrl+Shift+P\">Command Palette</CommandItem>\n </CommandGroup>\n <CommandGroup Heading=\"Navigation\">\n <CommandItem Shortcut=\"Ctrl+1\">Go to Dashboard</CommandItem>\n <CommandItem Shortcut=\"Ctrl+2\">Go to Settings</CommandItem>\n </CommandGroup>\n </CommandList>\n</Command>"
14134
14160
  }
14135
14161
  ],
14136
14162
  "subComponents": {
@@ -14766,15 +14792,15 @@
14766
14792
  "examples": [
14767
14793
  {
14768
14794
  "title": "Centered Content",
14769
- "code": "<Container MaxWidth=\"md\">\r\n <p>Content centered within max-w-md</p>\r\n</Container>"
14795
+ "code": "<Container MaxWidth=\"md\">\n <p>Content centered within max-w-md</p>\n</Container>"
14770
14796
  },
14771
14797
  {
14772
14798
  "title": "Different Max Widths",
14773
- "code": "<Container MaxWidth=\"sm\">Small container</Container>\r\n<Container MaxWidth=\"md\">Medium container</Container>\r\n<Container MaxWidth=\"lg\">Large container</Container>\r\n<Container MaxWidth=\"xl\">Extra large container</Container>"
14799
+ "code": "<Container MaxWidth=\"sm\">Small container</Container>\n<Container MaxWidth=\"md\">Medium container</Container>\n<Container MaxWidth=\"lg\">Large container</Container>\n<Container MaxWidth=\"xl\">Extra large container</Container>"
14774
14800
  },
14775
14801
  {
14776
14802
  "title": "MaxWidth — interactive",
14777
- "code": "<Container MaxWidth=\"lg\">\r\n Content constrained to max-w-lg\r\n</Container>"
14803
+ "code": "<Container MaxWidth=\"lg\">\n Content constrained to max-w-lg\n</Container>"
14778
14804
  }
14779
14805
  ],
14780
14806
  "subComponents": {},
@@ -14883,15 +14909,15 @@
14883
14909
  "examples": [
14884
14910
  {
14885
14911
  "title": "Default",
14886
- "code": "<ContextMenu>\r\n <ContextMenuTrigger>\r\n <div class=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\r\n Right click here\r\n </div>\r\n </ContextMenuTrigger>\r\n <ContextMenuContent>\r\n <ContextMenuItem>Back</ContextMenuItem>\r\n <ContextMenuItem>Forward</ContextMenuItem>\r\n <ContextMenuItem>Reload</ContextMenuItem>\r\n <ContextMenuSeparator />\r\n <ContextMenuItem>Save As...</ContextMenuItem>\r\n <ContextMenuItem>Print</ContextMenuItem>\r\n </ContextMenuContent>\r\n</ContextMenu>"
14912
+ "code": "<ContextMenu>\n <ContextMenuTrigger>\n <div class=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n Right click here\n </div>\n </ContextMenuTrigger>\n <ContextMenuContent>\n <ContextMenuItem>Back</ContextMenuItem>\n <ContextMenuItem>Forward</ContextMenuItem>\n <ContextMenuItem>Reload</ContextMenuItem>\n <ContextMenuSeparator />\n <ContextMenuItem>Save As...</ContextMenuItem>\n <ContextMenuItem>Print</ContextMenuItem>\n </ContextMenuContent>\n</ContextMenu>"
14887
14913
  },
14888
14914
  {
14889
14915
  "title": "With Labels and Groups",
14890
- "code": "<ContextMenu>\r\n <ContextMenuTrigger>\r\n <div>Right click here</div>\r\n </ContextMenuTrigger>\r\n <ContextMenuContent>\r\n <ContextMenuLabel>Edit</ContextMenuLabel>\r\n <ContextMenuGroup>\r\n <ContextMenuItem>Cut</ContextMenuItem>\r\n <ContextMenuItem>Copy</ContextMenuItem>\r\n <ContextMenuItem>Paste</ContextMenuItem>\r\n </ContextMenuGroup>\r\n <ContextMenuSeparator />\r\n <ContextMenuLabel>View</ContextMenuLabel>\r\n <ContextMenuGroup>\r\n <ContextMenuItem>Zoom In</ContextMenuItem>\r\n <ContextMenuItem>Zoom Out</ContextMenuItem>\r\n </ContextMenuGroup>\r\n <ContextMenuSeparator />\r\n <ContextMenuItem Disabled=\"true\">Delete</ContextMenuItem>\r\n </ContextMenuContent>\r\n</ContextMenu>"
14916
+ "code": "<ContextMenu>\n <ContextMenuTrigger>\n <div>Right click here</div>\n </ContextMenuTrigger>\n <ContextMenuContent>\n <ContextMenuLabel>Edit</ContextMenuLabel>\n <ContextMenuGroup>\n <ContextMenuItem>Cut</ContextMenuItem>\n <ContextMenuItem>Copy</ContextMenuItem>\n <ContextMenuItem>Paste</ContextMenuItem>\n </ContextMenuGroup>\n <ContextMenuSeparator />\n <ContextMenuLabel>View</ContextMenuLabel>\n <ContextMenuGroup>\n <ContextMenuItem>Zoom In</ContextMenuItem>\n <ContextMenuItem>Zoom Out</ContextMenuItem>\n </ContextMenuGroup>\n <ContextMenuSeparator />\n <ContextMenuItem Disabled=\"true\">Delete</ContextMenuItem>\n </ContextMenuContent>\n</ContextMenu>"
14891
14917
  },
14892
14918
  {
14893
14919
  "title": "File Actions",
14894
- "code": "<ContextMenu>\r\n <ContextMenuTrigger>\r\n <div class=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed\">\r\n <div class=\"text-center\">\r\n <div class=\"text-sm font-medium\">document.pdf</div>\r\n <div class=\"text-xs text-muted-foreground mt-1\">Right click for options</div>\r\n </div>\r\n </div>\r\n </ContextMenuTrigger>\r\n <ContextMenuContent>\r\n <ContextMenuItem>Open</ContextMenuItem>\r\n <ContextMenuItem>Duplicate</ContextMenuItem>\r\n <ContextMenuSeparator />\r\n <ContextMenuItem>Move to...</ContextMenuItem>\r\n <ContextMenuSeparator />\r\n <ContextMenuItem>Add to Favorites</ContextMenuItem>\r\n <ContextMenuSeparator />\r\n <ContextMenuItem>Delete</ContextMenuItem>\r\n </ContextMenuContent>\r\n</ContextMenu>"
14920
+ "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>"
14895
14921
  }
14896
14922
  ],
14897
14923
  "subComponents": {
@@ -15294,7 +15320,9 @@
15294
15320
  "fileName": "ContextMenuTrigger.razor",
15295
15321
  "namespace": "Lumeo",
15296
15322
  "inheritsFrom": null,
15297
- "implements": [],
15323
+ "implements": [
15324
+ "IAsyncDisposable"
15325
+ ],
15298
15326
  "parameters": [
15299
15327
  {
15300
15328
  "name": "Context",
@@ -15327,6 +15355,22 @@
15327
15355
  "description": null,
15328
15356
  "isCascading": false,
15329
15357
  "captureUnmatched": true
15358
+ },
15359
+ {
15360
+ "name": "LongPressMs",
15361
+ "type": "int",
15362
+ "default": "500",
15363
+ "description": "Duration in milliseconds a touch must remain on the trigger (without significant movement) before the context menu opens. Default: 500ms.",
15364
+ "isCascading": false,
15365
+ "captureUnmatched": false
15366
+ },
15367
+ {
15368
+ "name": "MoveTolerancePx",
15369
+ "type": "double",
15370
+ "default": "10.0",
15371
+ "description": "Pixel threshold for touch movement that cancels the long-press timer. Above this, the user is interpreted as scrolling, not long-pressing.",
15372
+ "isCascading": false,
15373
+ "captureUnmatched": false
15330
15374
  }
15331
15375
  ],
15332
15376
  "events": [],
@@ -15343,7 +15387,7 @@
15343
15387
  "name": "DataGrid",
15344
15388
  "category": "Data Display",
15345
15389
  "subcategory": "Tables",
15346
- "description": "Enterprise grid: sort, filter, inline edit, group, pin, virtualize, export.",
15390
+ "description": "Enterprise grid: sort, filter, inline edit, multi-level group (client + server), pin, virtualize, export.",
15347
15391
  "nugetPackage": "Lumeo.DataGrid",
15348
15392
  "files": [
15349
15393
  "UI/DataGrid/DataGrid.razor",
@@ -16076,19 +16120,19 @@
16076
16120
  "examples": [
16077
16121
  {
16078
16122
  "title": "Basic DataGrid",
16079
- "code": "<DataGrid TItem=\"Employee\" Items=\"@employees\" PageSize=\"5\" ShowPagination=\"true\">\r\n <DataGridColumnDef TItem=\"Employee\" Title=\"Name\" Field=\"Name\" Sortable=\"true\" />\r\n <DataGridColumnDef TItem=\"Employee\" Title=\"Department\" Field=\"Department\" Sortable=\"true\" />\r\n <DataGridColumnDef TItem=\"Employee\" Title=\"Salary\" Field=\"Salary\" Sortable=\"true\" Format=\"C0\" />\r\n <DataGridColumnDef TItem=\"Employee\" Title=\"Start Date\" Field=\"StartDate\" Format=\"yyyy-MM-dd\" />\r\n</DataGrid>"
16123
+ "code": "<DataGrid TItem=\"Employee\" Items=\"@employees\" PageSize=\"5\" ShowPagination=\"true\">\n <DataGridColumnDef TItem=\"Employee\" Title=\"Name\" Field=\"Name\" Sortable=\"true\" />\n <DataGridColumnDef TItem=\"Employee\" Title=\"Department\" Field=\"Department\" Sortable=\"true\" />\n <DataGridColumnDef TItem=\"Employee\" Title=\"Salary\" Field=\"Salary\" Sortable=\"true\" Format=\"C0\" />\n <DataGridColumnDef TItem=\"Employee\" Title=\"Start Date\" Field=\"StartDate\" Format=\"yyyy-MM-dd\" />\n</DataGrid>"
16080
16124
  },
16081
16125
  {
16082
16126
  "title": "Toolbar, Search & Filtering",
16083
- "code": "<DataGrid TItem=\"Employee\" Items=\"@employees\" PageSize=\"5\"\r\n ShowToolbar=\"true\" ShowPagination=\"true\">\r\n <DataGridColumnDef TItem=\"Employee\" Title=\"Name\" Field=\"Name\"\r\n Sortable=\"true\" Filterable=\"true\" />\r\n <DataGridColumnDef TItem=\"Employee\" Title=\"Salary\" Field=\"Salary\"\r\n Filterable=\"true\" FilterType=\"DataGridFilterType.Number\" Format=\"C0\" />\r\n <DataGridColumnDef TItem=\"Employee\" Title=\"Status\" Field=\"Status\"\r\n Filterable=\"true\" />\r\n</DataGrid>"
16127
+ "code": "<DataGrid TItem=\"Employee\" Items=\"@employees\" PageSize=\"5\"\n ShowToolbar=\"true\" ShowPagination=\"true\">\n <DataGridColumnDef TItem=\"Employee\" Title=\"Name\" Field=\"Name\"\n Sortable=\"true\" Filterable=\"true\" />\n <DataGridColumnDef TItem=\"Employee\" Title=\"Salary\" Field=\"Salary\"\n Filterable=\"true\" FilterType=\"DataGridFilterType.Number\" Format=\"C0\" />\n <DataGridColumnDef TItem=\"Employee\" Title=\"Status\" Field=\"Status\"\n Filterable=\"true\" />\n</DataGrid>"
16084
16128
  },
16085
16129
  {
16086
16130
  "title": "Minimal toolbar (search only)",
16087
- "code": "<DataGrid TItem=\"Employee\" Items=\"@employees\" PageSize=\"5\"\r\n ShowToolbar=\"true\"\r\n ShowColumnChooser=\"false\"\r\n ShowExport=\"false\">\r\n <DataGridColumnDef TItem=\"Employee\" Title=\"Name\" Field=\"Name\" Sortable=\"true\" Filterable=\"true\" />\r\n <DataGridColumnDef TItem=\"Employee\" Title=\"Department\" Field=\"Department\" Sortable=\"true\" Filterable=\"true\" />\r\n <DataGridColumnDef TItem=\"Employee\" Title=\"Salary\" Field=\"Salary\" Sortable=\"true\" Format=\"C0\" />\r\n</DataGrid>"
16131
+ "code": "<DataGrid TItem=\"Employee\" Items=\"@employees\" PageSize=\"5\"\n ShowToolbar=\"true\"\n ShowColumnChooser=\"false\"\n ShowExport=\"false\">\n <DataGridColumnDef TItem=\"Employee\" Title=\"Name\" Field=\"Name\" Sortable=\"true\" Filterable=\"true\" />\n <DataGridColumnDef TItem=\"Employee\" Title=\"Department\" Field=\"Department\" Sortable=\"true\" Filterable=\"true\" />\n <DataGridColumnDef TItem=\"Employee\" Title=\"Salary\" Field=\"Salary\" Sortable=\"true\" Format=\"C0\" />\n</DataGrid>"
16088
16132
  },
16089
16133
  {
16090
16134
  "title": "Export-only toolbar",
16091
- "code": "<DataGrid TItem=\"Employee\" Items=\"@employees\" PageSize=\"5\"\r\n ShowToolbar=\"true\"\r\n ShowSearch=\"false\"\r\n ShowColumnChooser=\"false\">\r\n <DataGridColumnDef TItem=\"Employee\" Title=\"Name\" Field=\"Name\" Sortable=\"true\" />\r\n <DataGridColumnDef TItem=\"Employee\" Title=\"Department\" Field=\"Department\" Sortable=\"true\" />\r\n <DataGridColumnDef TItem=\"Employee\" Title=\"Salary\" Field=\"Salary\" Sortable=\"true\" Format=\"C0\" />\r\n</DataGrid>"
16135
+ "code": "<DataGrid TItem=\"Employee\" Items=\"@employees\" PageSize=\"5\"\n ShowToolbar=\"true\"\n ShowSearch=\"false\"\n ShowColumnChooser=\"false\">\n <DataGridColumnDef TItem=\"Employee\" Title=\"Name\" Field=\"Name\" Sortable=\"true\" />\n <DataGridColumnDef TItem=\"Employee\" Title=\"Department\" Field=\"Department\" Sortable=\"true\" />\n <DataGridColumnDef TItem=\"Employee\" Title=\"Salary\" Field=\"Salary\" Sortable=\"true\" Format=\"C0\" />\n</DataGrid>"
16092
16136
  }
16093
16137
  ],
16094
16138
  "subComponents": {
@@ -18000,19 +18044,19 @@
18000
18044
  "examples": [
18001
18045
  {
18002
18046
  "title": "Default",
18003
- "code": "<DataTable Items=\"_payments\" Context=\"payment\">\r\n <HeaderTemplate>\r\n <th class=\"h-10 px-4 text-left font-medium text-muted-foreground\">Status</th>\r\n <th class=\"h-10 px-4 text-left font-medium text-muted-foreground\">Email</th>\r\n <th class=\"h-10 px-4 text-right font-medium text-muted-foreground\">Amount</th>\r\n </HeaderTemplate>\r\n <RowTemplate>\r\n <td class=\"p-4\">@payment.Status</td>\r\n <td class=\"p-4\">@payment.Email</td>\r\n <td class=\"p-4 text-right\">$@payment.Amount</td>\r\n </RowTemplate>\r\n</DataTable>"
18047
+ "code": "<DataTable Items=\"_payments\" Context=\"payment\">\n <HeaderTemplate>\n <th class=\"h-10 px-4 text-left font-medium text-muted-foreground\">Status</th>\n <th class=\"h-10 px-4 text-left font-medium text-muted-foreground\">Email</th>\n <th class=\"h-10 px-4 text-right font-medium text-muted-foreground\">Amount</th>\n </HeaderTemplate>\n <RowTemplate>\n <td class=\"p-4\">@payment.Status</td>\n <td class=\"p-4\">@payment.Email</td>\n <td class=\"p-4 text-right\">$@payment.Amount</td>\n </RowTemplate>\n</DataTable>"
18004
18048
  },
18005
18049
  {
18006
18050
  "title": "Loading State",
18007
- "code": "<DataTable Items=\"Array.Empty<Item>()\" TItem=\"Item\" IsLoading=\"true\" SkeletonRows=\"3\">\r\n <HeaderTemplate>...</HeaderTemplate>\r\n <LoadingTemplate>\r\n <td class=\"p-4\"><Skeleton Class=\"h-4 w-16\" /></td>\r\n </LoadingTemplate>\r\n <RowTemplate>...</RowTemplate>\r\n</DataTable>"
18051
+ "code": "<DataTable Items=\"Array.Empty<Item>()\" TItem=\"Item\" IsLoading=\"true\" SkeletonRows=\"3\">\n <HeaderTemplate>...</HeaderTemplate>\n <LoadingTemplate>\n <td class=\"p-4\"><Skeleton Class=\"h-4 w-16\" /></td>\n </LoadingTemplate>\n <RowTemplate>...</RowTemplate>\n</DataTable>"
18008
18052
  },
18009
18053
  {
18010
18054
  "title": "Empty State",
18011
- "code": "<DataTable Items=\"Array.Empty<Item>()\" TItem=\"Item\">\r\n <HeaderTemplate>...</HeaderTemplate>\r\n <EmptyTemplate>\r\n <EmptyState Title=\"No data\" Description=\"Nothing to display.\" />\r\n </EmptyTemplate>\r\n <RowTemplate>...</RowTemplate>\r\n</DataTable>"
18055
+ "code": "<DataTable Items=\"Array.Empty<Item>()\" TItem=\"Item\">\n <HeaderTemplate>...</HeaderTemplate>\n <EmptyTemplate>\n <EmptyState Title=\"No data\" Description=\"Nothing to display.\" />\n </EmptyTemplate>\n <RowTemplate>...</RowTemplate>\n</DataTable>"
18012
18056
  },
18013
18057
  {
18014
18058
  "title": "Sortable Columns",
18015
- "code": "<DataTable Items=\"@GetSortedData()\" TItem=\"Item\" SortColumn=\"@_sortColumn\" SortDir=\"@_sortDir\" OnSort=\"@HandleSort\">\r\n <HeaderTemplate>\r\n <DataTableSortableHeader Column=\"name\" SortColumn=\"@_sortColumn\" SortDirection=\"@_sortDir\" OnSort=\"@HandleSort\">Name</DataTableSortableHeader>\r\n <DataTableSortableHeader Column=\"email\" SortColumn=\"@_sortColumn\" SortDirection=\"@_sortDir\" OnSort=\"@HandleSort\">Email</DataTableSortableHeader>\r\n <DataTableSortableHeader Column=\"role\" SortColumn=\"@_sortColumn\" SortDirection=\"@_sortDir\" OnSort=\"@HandleSort\">Role</DataTableSortableHeader>\r\n </HeaderTemplate>\r\n <RowTemplate>\r\n <td class=\"p-4\">@context.Name</td>\r\n <td class=\"p-4\">@context.Email</td>\r\n <td class=\"p-4\">@context.Role</td>\r\n </RowTemplate>\r\n</DataTable>\r\n\r\n@code {\r\n private string? _sortColumn;\r\n private DataTable<Item>.SortDirection _sortDir = DataTable<Item>.SortDirection.None;\r\n\r\n private void HandleSort((string Column, DataTable<Item>.SortDirection Direction) sort)\r\n {\r\n _sortColumn = sort.Column;\r\n _sortDir = sort.Direction;\r\n }\r\n}"
18059
+ "code": "<DataTable Items=\"@GetSortedData()\" TItem=\"Item\" SortColumn=\"@_sortColumn\" SortDir=\"@_sortDir\" OnSort=\"@HandleSort\">\n <HeaderTemplate>\n <DataTableSortableHeader Column=\"name\" SortColumn=\"@_sortColumn\" SortDirection=\"@_sortDir\" OnSort=\"@HandleSort\">Name</DataTableSortableHeader>\n <DataTableSortableHeader Column=\"email\" SortColumn=\"@_sortColumn\" SortDirection=\"@_sortDir\" OnSort=\"@HandleSort\">Email</DataTableSortableHeader>\n <DataTableSortableHeader Column=\"role\" SortColumn=\"@_sortColumn\" SortDirection=\"@_sortDir\" OnSort=\"@HandleSort\">Role</DataTableSortableHeader>\n </HeaderTemplate>\n <RowTemplate>\n <td class=\"p-4\">@context.Name</td>\n <td class=\"p-4\">@context.Email</td>\n <td class=\"p-4\">@context.Role</td>\n </RowTemplate>\n</DataTable>\n\n@code {\n private string? _sortColumn;\n private DataTable<Item>.SortDirection _sortDir = DataTable<Item>.SortDirection.None;\n\n private void HandleSort((string Column, DataTable<Item>.SortDirection Direction) sort)\n {\n _sortColumn = sort.Column;\n _sortDir = sort.Direction;\n }\n}"
18016
18060
  }
18017
18061
  ],
18018
18062
  "subComponents": {
@@ -18104,12 +18148,21 @@
18104
18148
  "nugetPackage": "Lumeo",
18105
18149
  "files": [
18106
18150
  "UI/DatePicker/DatePicker.razor",
18107
- "UI/DatePicker/DateRangePicker.razor"
18151
+ "UI/DatePicker/DateRangePicker.razor",
18152
+ "UI/DatePicker/DateWheelPicker.razor"
18108
18153
  ],
18109
18154
  "namespace": "Lumeo",
18110
18155
  "inheritsFrom": null,
18111
18156
  "implements": [],
18112
18157
  "parameters": [
18158
+ {
18159
+ "name": "Variant",
18160
+ "type": "DatePickerVariant",
18161
+ "default": "DatePickerVariant.Calendar",
18162
+ "description": "Picker visual style. Defaults to Calendar.",
18163
+ "isCascading": false,
18164
+ "captureUnmatched": false
18165
+ },
18113
18166
  {
18114
18167
  "name": "FormField",
18115
18168
  "type": "FormField.FormFieldContext?",
@@ -18473,6 +18526,14 @@
18473
18526
  "Year"
18474
18527
  ],
18475
18528
  "description": null
18529
+ },
18530
+ {
18531
+ "name": "DatePickerVariant",
18532
+ "values": [
18533
+ "Calendar",
18534
+ "Wheel"
18535
+ ],
18536
+ "description": "Visual style of the picker. Calendar renders the existing month-grid Calendar (default). Wheel renders three iOS-style snap-scrolling columns (day / month / year) — designed for mobile / touch UIs."
18476
18537
  }
18477
18538
  ],
18478
18539
  "records": [
@@ -18491,6 +18552,7 @@
18491
18552
  "--color-input",
18492
18553
  "--color-muted",
18493
18554
  "--color-muted-foreground",
18555
+ "--color-primary",
18494
18556
  "--radius"
18495
18557
  ],
18496
18558
  "examples": [
@@ -18609,9 +18671,9 @@
18609
18671
  },
18610
18672
  {
18611
18673
  "name": "Format",
18612
- "type": "string",
18613
- "default": "\"MMM dd, yyyy\"",
18614
- "description": null,
18674
+ "type": "string?",
18675
+ "default": null,
18676
+ "description": "Date format. When null (default) the inner DatePicker falls back to the effective culture's ShortDatePattern — so a de-DE user sees 15.03.2026 and an en-US user sees 3/15/2026 automatically.",
18615
18677
  "isCascading": false,
18616
18678
  "captureUnmatched": false
18617
18679
  },
@@ -18688,6 +18750,84 @@
18688
18750
  "records": [],
18689
18751
  "parseFailed": false,
18690
18752
  "parseError": null
18753
+ },
18754
+ "DateWheelPicker": {
18755
+ "componentName": "DateWheelPicker",
18756
+ "fileName": "DateWheelPicker.razor",
18757
+ "namespace": "Lumeo",
18758
+ "inheritsFrom": null,
18759
+ "implements": [
18760
+ "IDisposable"
18761
+ ],
18762
+ "parameters": [
18763
+ {
18764
+ "name": "Value",
18765
+ "type": "DateOnly?",
18766
+ "default": null,
18767
+ "description": null,
18768
+ "isCascading": false,
18769
+ "captureUnmatched": false
18770
+ },
18771
+ {
18772
+ "name": "ValueChanged",
18773
+ "type": "EventCallback<DateOnly?>",
18774
+ "default": null,
18775
+ "description": null,
18776
+ "isCascading": false,
18777
+ "captureUnmatched": false
18778
+ },
18779
+ {
18780
+ "name": "Min",
18781
+ "type": "DateOnly?",
18782
+ "default": null,
18783
+ "description": null,
18784
+ "isCascading": false,
18785
+ "captureUnmatched": false
18786
+ },
18787
+ {
18788
+ "name": "Max",
18789
+ "type": "DateOnly?",
18790
+ "default": null,
18791
+ "description": null,
18792
+ "isCascading": false,
18793
+ "captureUnmatched": false
18794
+ },
18795
+ {
18796
+ "name": "Culture",
18797
+ "type": "CultureInfo?",
18798
+ "default": null,
18799
+ "description": null,
18800
+ "isCascading": false,
18801
+ "captureUnmatched": false
18802
+ },
18803
+ {
18804
+ "name": "Class",
18805
+ "type": "string?",
18806
+ "default": null,
18807
+ "description": null,
18808
+ "isCascading": false,
18809
+ "captureUnmatched": false
18810
+ },
18811
+ {
18812
+ "name": "AdditionalAttributes",
18813
+ "type": "Dictionary<string, object>?",
18814
+ "default": null,
18815
+ "description": null,
18816
+ "isCascading": false,
18817
+ "captureUnmatched": true
18818
+ }
18819
+ ],
18820
+ "events": [
18821
+ {
18822
+ "name": "ValueChanged",
18823
+ "type": "EventCallback<DateOnly?>",
18824
+ "description": null
18825
+ }
18826
+ ],
18827
+ "enums": [],
18828
+ "records": [],
18829
+ "parseFailed": false,
18830
+ "parseError": null
18691
18831
  }
18692
18832
  },
18693
18833
  "parseFailed": false,
@@ -18858,6 +18998,14 @@
18858
18998
  "isCascading": false,
18859
18999
  "captureUnmatched": false
18860
19000
  },
19001
+ {
19002
+ "name": "FirstDayOfWeek",
19003
+ "type": "DayOfWeek?",
19004
+ "default": null,
19005
+ "description": "Override the locale-derived first day of week shown by the embedded calendar. Forwarded to the inner Calendar; leave null to fall back to CurrentCulture.",
19006
+ "isCascading": false,
19007
+ "captureUnmatched": false
19008
+ },
18861
19009
  {
18862
19010
  "name": "Class",
18863
19011
  "type": "string?",
@@ -18912,7 +19060,7 @@
18912
19060
  },
18913
19061
  {
18914
19062
  "title": "Min & Max Date",
18915
- "code": "<DateTimePicker @bind-Value=\"_dateTime\" MinDate=\"@_minDate\" MaxDate=\"@_maxDate\" Placeholder=\"Select within range\" />\r\n\r\n@code {\r\n private DateTime? _dateTime;\r\n private DateTime _minDate = DateTime.Today;\r\n private DateTime _maxDate = DateTime.Today.AddDays(30);\r\n}"
19063
+ "code": "<DateTimePicker @bind-Value=\"_dateTime\" MinDate=\"@_minDate\" MaxDate=\"@_maxDate\" Placeholder=\"Select within range\" />\n\n@code {\n private DateTime? _dateTime;\n private DateTime _minDate = DateTime.Today;\n private DateTime _maxDate = DateTime.Today.AddDays(30);\n}"
18916
19064
  }
18917
19065
  ],
18918
19066
  "subComponents": {},
@@ -18964,6 +19112,14 @@
18964
19112
  "isCascading": false,
18965
19113
  "captureUnmatched": false
18966
19114
  },
19115
+ {
19116
+ "name": "Culture",
19117
+ "type": "System.Globalization.CultureInfo?",
19118
+ "default": null,
19119
+ "description": "Overrides CurrentCulture for number formatting (decimal separator, group separator). Leave null to honour ASP.NET request localization — a de-DE user sees +12,5% while an en-US user sees +12.5%.",
19120
+ "isCascading": false,
19121
+ "captureUnmatched": false
19122
+ },
18967
19123
  {
18968
19124
  "name": "Class",
18969
19125
  "type": "string?",
@@ -19105,15 +19261,15 @@
19105
19261
  "examples": [
19106
19262
  {
19107
19263
  "title": "Basic",
19108
- "code": "<Descriptions Title=\"User Details\" Column=\"2\">\r\n <DescriptionsItem Label=\"Name\">John Doe</DescriptionsItem>\r\n <DescriptionsItem Label=\"Email\">john@example.com</DescriptionsItem>\r\n <DescriptionsItem Label=\"Role\">Administrator</DescriptionsItem>\r\n <DescriptionsItem Label=\"Status\">Active</DescriptionsItem>\r\n</Descriptions>"
19264
+ "code": "<Descriptions Title=\"User Details\" Column=\"2\">\n <DescriptionsItem Label=\"Name\">John Doe</DescriptionsItem>\n <DescriptionsItem Label=\"Email\">john@example.com</DescriptionsItem>\n <DescriptionsItem Label=\"Role\">Administrator</DescriptionsItem>\n <DescriptionsItem Label=\"Status\">Active</DescriptionsItem>\n</Descriptions>"
19109
19265
  },
19110
19266
  {
19111
19267
  "title": "Bordered",
19112
- "code": "<Descriptions Title=\"Order Details\" Bordered=\"true\" Column=\"3\">\r\n <DescriptionsItem Label=\"Order ID\">#2024-0127</DescriptionsItem>\r\n <DescriptionsItem Label=\"Date\">Jan 27, 2025</DescriptionsItem>\r\n <DescriptionsItem Label=\"Status\">Shipped</DescriptionsItem>\r\n</Descriptions>"
19268
+ "code": "<Descriptions Title=\"Order Details\" Bordered=\"true\" Column=\"3\">\n <DescriptionsItem Label=\"Order ID\">#2024-0127</DescriptionsItem>\n <DescriptionsItem Label=\"Date\">Jan 27, 2025</DescriptionsItem>\n <DescriptionsItem Label=\"Status\">Shipped</DescriptionsItem>\n</Descriptions>"
19113
19269
  },
19114
19270
  {
19115
19271
  "title": "Single Column",
19116
- "code": "<Descriptions Column=\"1\">\r\n <DescriptionsItem Label=\"Product\">Lumeo Pro License</DescriptionsItem>\r\n <DescriptionsItem Label=\"Price\">$99/year</DescriptionsItem>\r\n</Descriptions>"
19272
+ "code": "<Descriptions Column=\"1\">\n <DescriptionsItem Label=\"Product\">Lumeo Pro License</DescriptionsItem>\n <DescriptionsItem Label=\"Price\">$99/year</DescriptionsItem>\n</Descriptions>"
19117
19273
  }
19118
19274
  ],
19119
19275
  "subComponents": {
@@ -19258,19 +19414,19 @@
19258
19414
  "examples": [
19259
19415
  {
19260
19416
  "title": "Default",
19261
- "code": "<Dialog @bind-Open=\"_isOpen\">\r\n <DialogTrigger>\r\n <Button Variant=\"Button.ButtonVariant.Outline\">Edit Profile</Button>\r\n </DialogTrigger>\r\n <DialogContent>\r\n <DialogHeader>\r\n <DialogTitle>Edit Profile</DialogTitle>\r\n <DialogDescription>Make changes to your profile here.</DialogDescription>\r\n </DialogHeader>\r\n <Grid Columns=\"4\" Gap=\"4\" Class=\"items-center py-4\">\r\n <Label Class=\"text-right\">Name</Label>\r\n <Input Class=\"col-span-3\" Value=\"John Doe\" />\r\n <Label Class=\"text-right\">Username</Label>\r\n <Input Class=\"col-span-3\" Value=\"@johndoe\" />\r\n </Grid>\r\n <DialogFooter>\r\n <DialogClose>\r\n <Button Variant=\"Button.ButtonVariant.Outline\">Cancel</Button>\r\n </DialogClose>\r\n <DialogClose>\r\n <Button>Save Changes</Button>\r\n </DialogClose>\r\n </DialogFooter>\r\n </DialogContent>\r\n</Dialog>\r\n\r\n@code {\r\n private bool _isOpen;\r\n}"
19417
+ "code": "<Dialog @bind-Open=\"_isOpen\">\n <DialogTrigger>\n <Button Variant=\"Button.ButtonVariant.Outline\">Edit Profile</Button>\n </DialogTrigger>\n <DialogContent>\n <DialogHeader>\n <DialogTitle>Edit Profile</DialogTitle>\n <DialogDescription>Make changes to your profile here.</DialogDescription>\n </DialogHeader>\n <Grid Columns=\"4\" Gap=\"4\" Class=\"items-center py-4\">\n <Label Class=\"text-right\">Name</Label>\n <Input Class=\"col-span-3\" Value=\"John Doe\" />\n <Label Class=\"text-right\">Username</Label>\n <Input Class=\"col-span-3\" Value=\"@johndoe\" />\n </Grid>\n <DialogFooter>\n <DialogClose>\n <Button Variant=\"Button.ButtonVariant.Outline\">Cancel</Button>\n </DialogClose>\n <DialogClose>\n <Button>Save Changes</Button>\n </DialogClose>\n </DialogFooter>\n </DialogContent>\n</Dialog>\n\n@code {\n private bool _isOpen;\n}"
19262
19418
  },
19263
19419
  {
19264
19420
  "title": "Simple Dialog",
19265
- "code": "<Dialog @bind-Open=\"_isOpen\">\r\n <DialogTrigger>\r\n <Button>Share</Button>\r\n </DialogTrigger>\r\n <DialogContent>\r\n <DialogHeader>\r\n <DialogTitle>Share this document</DialogTitle>\r\n <DialogDescription>Anyone with the link can view this document.</DialogDescription>\r\n </DialogHeader>\r\n <Stack Gap=\"4\" Class=\"py-4\">\r\n <Input Value=\"https://example.com/share/abc123\" />\r\n </Stack>\r\n <DialogFooter>\r\n <DialogClose>\r\n <Button>Copy Link</Button>\r\n </DialogClose>\r\n </DialogFooter>\r\n </DialogContent>\r\n</Dialog>\r\n\r\n@code {\r\n private bool _isOpen;\r\n}"
19421
+ "code": "<Dialog @bind-Open=\"_isOpen\">\n <DialogTrigger>\n <Button>Share</Button>\n </DialogTrigger>\n <DialogContent>\n <DialogHeader>\n <DialogTitle>Share this document</DialogTitle>\n <DialogDescription>Anyone with the link can view this document.</DialogDescription>\n </DialogHeader>\n <Stack Gap=\"4\" Class=\"py-4\">\n <Input Value=\"https://example.com/share/abc123\" />\n </Stack>\n <DialogFooter>\n <DialogClose>\n <Button>Copy Link</Button>\n </DialogClose>\n </DialogFooter>\n </DialogContent>\n</Dialog>\n\n@code {\n private bool _isOpen;\n}"
19266
19422
  },
19267
19423
  {
19268
19424
  "title": "Confirmation Dialog",
19269
- "code": "<Dialog @bind-Open=\"_isOpen\">\r\n <DialogTrigger>\r\n <Button Variant=\"Button.ButtonVariant.Destructive\">\r\n <Blazicon Svg=\"Lucide.Trash\" class=\"h-4 w-4\" /> Delete Account\r\n </Button>\r\n </DialogTrigger>\r\n <DialogContent>\r\n <DialogHeader>\r\n <DialogTitle>Are you absolutely sure?</DialogTitle>\r\n <DialogDescription>\r\n This action cannot be undone. This will permanently delete your\r\n account and remove your data from our servers.\r\n </DialogDescription>\r\n </DialogHeader>\r\n <DialogFooter>\r\n <DialogClose>\r\n <Button Variant=\"Button.ButtonVariant.Outline\">Cancel</Button>\r\n </DialogClose>\r\n <DialogClose>\r\n <Button Variant=\"Button.ButtonVariant.Destructive\">Yes, delete account</Button>\r\n </DialogClose>\r\n </DialogFooter>\r\n </DialogContent>\r\n</Dialog>\r\n\r\n@code {\r\n private bool _isOpen;\r\n}"
19425
+ "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}"
19270
19426
  },
19271
19427
  {
19272
19428
  "title": "Prevent Close",
19273
- "code": "<Dialog @bind-Open=\"_preventCloseOpen\">\r\n <DialogTrigger>\r\n <Button Variant=\"Button.ButtonVariant.Outline\">Open Protected Dialog</Button>\r\n </DialogTrigger>\r\n <DialogContent PreventClose=\"true\">\r\n <DialogHeader>\r\n <DialogTitle>Unsaved Changes</DialogTitle>\r\n <DialogDescription>You have unsaved changes. Are you sure you want to leave?</DialogDescription>\r\n </DialogHeader>\r\n <DialogFooter>\r\n <Button Variant=\"Button.ButtonVariant.Outline\" OnClick=\"@(() => _preventCloseOpen = false)\">Discard</Button>\r\n <Button OnClick=\"@(() => _preventCloseOpen = false)\">Save Changes</Button>\r\n </DialogFooter>\r\n </DialogContent>\r\n</Dialog>\r\n\r\n@code {\r\n private bool _preventCloseOpen;\r\n}"
19429
+ "code": "<Dialog @bind-Open=\"_preventCloseOpen\">\n <DialogTrigger>\n <Button Variant=\"Button.ButtonVariant.Outline\">Open Protected Dialog</Button>\n </DialogTrigger>\n <DialogContent PreventClose=\"true\">\n <DialogHeader>\n <DialogTitle>Unsaved Changes</DialogTitle>\n <DialogDescription>You have unsaved changes. Are you sure you want to leave?</DialogDescription>\n </DialogHeader>\n <DialogFooter>\n <Button Variant=\"Button.ButtonVariant.Outline\" OnClick=\"@(() => _preventCloseOpen = false)\">Discard</Button>\n <Button OnClick=\"@(() => _preventCloseOpen = false)\">Save Changes</Button>\n </DialogFooter>\n </DialogContent>\n</Dialog>\n\n@code {\n private bool _preventCloseOpen;\n}"
19274
19430
  }
19275
19431
  ],
19276
19432
  "subComponents": {
@@ -19804,19 +19960,19 @@
19804
19960
  "examples": [
19805
19961
  {
19806
19962
  "title": "Default",
19807
- "code": "<Drawer @bind-Open=\"_isOpen\">\r\n <DrawerTrigger>\r\n <Button Variant=\"Button.ButtonVariant.Outline\">Open Drawer</Button>\r\n </DrawerTrigger>\r\n <DrawerContent>\r\n <DrawerHeader>\r\n <DrawerTitle>Move Goal</DrawerTitle>\r\n <DrawerDescription>Set your daily activity goal.</DrawerDescription>\r\n </DrawerHeader>\r\n <Stack Gap=\"0\" Class=\"p-4 text-center\">\r\n <Lumeo.Text Size=\"5xl\" Weight=\"bold\">@_goal</Lumeo.Text>\r\n <Lumeo.Text Size=\"sm\" Color=\"muted\">calories/day</Lumeo.Text>\r\n </Stack>\r\n <DrawerFooter>\r\n <DrawerClose>\r\n <Button Class=\"w-full\">Submit</Button>\r\n </DrawerClose>\r\n <DrawerClose>\r\n <Button Variant=\"Button.ButtonVariant.Outline\" Class=\"w-full\">Cancel</Button>\r\n </DrawerClose>\r\n </DrawerFooter>\r\n </DrawerContent>\r\n</Drawer>\r\n\r\n@code {\r\n private bool _isOpen;\r\n private int _goal = 350;\r\n}"
19963
+ "code": "<Drawer @bind-Open=\"_isOpen\">\n <DrawerTrigger>\n <Button Variant=\"Button.ButtonVariant.Outline\">Open Drawer</Button>\n </DrawerTrigger>\n <DrawerContent>\n <DrawerHeader>\n <DrawerTitle>Move Goal</DrawerTitle>\n <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n </DrawerHeader>\n <Stack Gap=\"0\" Class=\"p-4 text-center\">\n <Lumeo.Text Size=\"5xl\" Weight=\"bold\">@_goal</Lumeo.Text>\n <Lumeo.Text Size=\"sm\" Color=\"muted\">calories/day</Lumeo.Text>\n </Stack>\n <DrawerFooter>\n <DrawerClose>\n <Button Class=\"w-full\">Submit</Button>\n </DrawerClose>\n <DrawerClose>\n <Button Variant=\"Button.ButtonVariant.Outline\" Class=\"w-full\">Cancel</Button>\n </DrawerClose>\n </DrawerFooter>\n </DrawerContent>\n</Drawer>\n\n@code {\n private bool _isOpen;\n private int _goal = 350;\n}"
19808
19964
  },
19809
19965
  {
19810
19966
  "title": "Filters Drawer",
19811
- "code": "<Drawer @bind-Open=\"_isFiltersOpen\">\r\n <DrawerTrigger>\r\n <Button Variant=\"Button.ButtonVariant.Outline\">\r\n <Blazicon Svg=\"Lucide.Settings\" class=\"h-4 w-4\" /> Filters\r\n </Button>\r\n </DrawerTrigger>\r\n <DrawerContent>\r\n <DrawerHeader>\r\n <DrawerTitle>Filter Results</DrawerTitle>\r\n <DrawerDescription>Narrow down your search.</DrawerDescription>\r\n </DrawerHeader>\r\n <Stack Gap=\"4\" Class=\"p-4\">\r\n <Select @bind-Value=\"_filterCategory\">\r\n <SelectTrigger><span>@(_filterCategory ?? \"All categories\")</span></SelectTrigger>\r\n <SelectContent>\r\n <SelectItem Value=\"electronics\">Electronics</SelectItem>\r\n <SelectItem Value=\"clothing\">Clothing</SelectItem>\r\n </SelectContent>\r\n </Select>\r\n </Stack>\r\n <DrawerFooter>\r\n <DrawerClose><Button Class=\"w-full\">Apply Filters</Button></DrawerClose>\r\n </DrawerFooter>\r\n </DrawerContent>\r\n</Drawer>"
19967
+ "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>"
19812
19968
  },
19813
19969
  {
19814
19970
  "title": "Prevent Close",
19815
- "code": "<Drawer @bind-Open=\"_preventDrawerOpen\">\r\n <DrawerTrigger>\r\n <Button Variant=\"Button.ButtonVariant.Outline\">Open Protected Drawer</Button>\r\n </DrawerTrigger>\r\n <DrawerContent PreventClose=\"true\">\r\n <DrawerHeader>\r\n <DrawerTitle>Confirm Action</DrawerTitle>\r\n <DrawerDescription>You must choose an option to continue.</DrawerDescription>\r\n </DrawerHeader>\r\n <Stack Gap=\"2\" Class=\"p-4\">\r\n <Button Class=\"w-full\" OnClick=\"@(() => _preventDrawerOpen = false)\">Confirm</Button>\r\n <Button Variant=\"Button.ButtonVariant.Outline\" Class=\"w-full\" OnClick=\"@(() => _preventDrawerOpen = false)\">Cancel</Button>\r\n </Stack>\r\n </DrawerContent>\r\n</Drawer>\r\n\r\n@code {\r\n private bool _preventDrawerOpen;\r\n}"
19971
+ "code": "<Drawer @bind-Open=\"_preventDrawerOpen\">\n <DrawerTrigger>\n <Button Variant=\"Button.ButtonVariant.Outline\">Open Protected Drawer</Button>\n </DrawerTrigger>\n <DrawerContent PreventClose=\"true\">\n <DrawerHeader>\n <DrawerTitle>Confirm Action</DrawerTitle>\n <DrawerDescription>You must choose an option to continue.</DrawerDescription>\n </DrawerHeader>\n <Stack Gap=\"2\" Class=\"p-4\">\n <Button Class=\"w-full\" OnClick=\"@(() => _preventDrawerOpen = false)\">Confirm</Button>\n <Button Variant=\"Button.ButtonVariant.Outline\" Class=\"w-full\" OnClick=\"@(() => _preventDrawerOpen = false)\">Cancel</Button>\n </Stack>\n </DrawerContent>\n</Drawer>\n\n@code {\n private bool _preventDrawerOpen;\n}"
19816
19972
  },
19817
19973
  {
19818
19974
  "title": "Side — interactive",
19819
- "code": "<Segmented @bind-Value=\"_drawerSideSel\" Options=\"_drawerSideOptions\" />\r\n<Drawer @bind-Open=\"_open\">\r\n <DrawerTrigger>\r\n <Button Variant=\"Button.ButtonVariant.Outline\">Open Drawer (@_drawerSideSel)</Button>\r\n </DrawerTrigger>\r\n <DrawerContent Side=\"@_activeDrawerSide\">\r\n <DrawerHeader>\r\n <DrawerTitle>@_drawerSideSel Drawer</DrawerTitle>\r\n <DrawerDescription>Slides in from the @_drawerSideSel.ToLower().</DrawerDescription>\r\n </DrawerHeader>\r\n <DrawerFooter>\r\n <DrawerClose><Button Class=\"w-full\">Close</Button></DrawerClose>\r\n </DrawerFooter>\r\n </DrawerContent>\r\n</Drawer>\r\n\r\n@code {\r\n private string _drawerSideSel = \"Bottom\";\r\n private DrawerContent.DrawerSide _activeDrawerSide => Enum.Parse<DrawerContent.DrawerSide>(_drawerSideSel);\r\n private List<Segmented.SegmentedOption> _drawerSideOptions = new()\r\n {\r\n new() { Label = \"Top\", Value = \"Top\" },\r\n new() { Label = \"Right\", Value = \"Right\" },\r\n new() { Label = \"Bottom\", Value = \"Bottom\" },\r\n new() { Label = \"Left\", Value = \"Left\" },\r\n };\r\n}"
19975
+ "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}"
19820
19976
  }
19821
19977
  ],
19822
19978
  "subComponents": {
@@ -20392,19 +20548,19 @@
20392
20548
  "examples": [
20393
20549
  {
20394
20550
  "title": "Default",
20395
- "code": "<DropdownMenu>\r\n <DropdownMenuTrigger>\r\n <Button Variant=\"Button.ButtonVariant.Outline\">Open</Button>\r\n </DropdownMenuTrigger>\r\n <DropdownMenuContent>\r\n <DropdownMenuLabel>My Account</DropdownMenuLabel>\r\n <DropdownMenuSeparator />\r\n <DropdownMenuItem>Profile</DropdownMenuItem>\r\n <DropdownMenuItem>Settings</DropdownMenuItem>\r\n <DropdownMenuItem>Billing</DropdownMenuItem>\r\n <DropdownMenuSeparator />\r\n <DropdownMenuItem>Log out</DropdownMenuItem>\r\n </DropdownMenuContent>\r\n</DropdownMenu>"
20551
+ "code": "<DropdownMenu>\n <DropdownMenuTrigger>\n <Button Variant=\"Button.ButtonVariant.Outline\">Open</Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent>\n <DropdownMenuLabel>My Account</DropdownMenuLabel>\n <DropdownMenuSeparator />\n <DropdownMenuItem>Profile</DropdownMenuItem>\n <DropdownMenuItem>Settings</DropdownMenuItem>\n <DropdownMenuItem>Billing</DropdownMenuItem>\n <DropdownMenuSeparator />\n <DropdownMenuItem>Log out</DropdownMenuItem>\n </DropdownMenuContent>\n</DropdownMenu>"
20396
20552
  },
20397
20553
  {
20398
20554
  "title": "With Groups",
20399
- "code": "<DropdownMenu>\r\n <DropdownMenuTrigger>\r\n <Button Variant=\"Button.ButtonVariant.Outline\">Actions</Button>\r\n </DropdownMenuTrigger>\r\n <DropdownMenuContent>\r\n <DropdownMenuLabel>File</DropdownMenuLabel>\r\n <DropdownMenuGroup>\r\n <DropdownMenuItem>New File</DropdownMenuItem>\r\n <DropdownMenuItem>Open File</DropdownMenuItem>\r\n <DropdownMenuItem>Save</DropdownMenuItem>\r\n </DropdownMenuGroup>\r\n <DropdownMenuSeparator />\r\n <DropdownMenuLabel>Edit</DropdownMenuLabel>\r\n <DropdownMenuGroup>\r\n <DropdownMenuItem>Undo</DropdownMenuItem>\r\n <DropdownMenuItem>Redo</DropdownMenuItem>\r\n </DropdownMenuGroup>\r\n <DropdownMenuSeparator />\r\n <DropdownMenuItem Disabled=\"true\">Delete</DropdownMenuItem>\r\n </DropdownMenuContent>\r\n</DropdownMenu>"
20555
+ "code": "<DropdownMenu>\n <DropdownMenuTrigger>\n <Button Variant=\"Button.ButtonVariant.Outline\">Actions</Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent>\n <DropdownMenuLabel>File</DropdownMenuLabel>\n <DropdownMenuGroup>\n <DropdownMenuItem>New File</DropdownMenuItem>\n <DropdownMenuItem>Open File</DropdownMenuItem>\n <DropdownMenuItem>Save</DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuLabel>Edit</DropdownMenuLabel>\n <DropdownMenuGroup>\n <DropdownMenuItem>Undo</DropdownMenuItem>\n <DropdownMenuItem>Redo</DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuItem Disabled=\"true\">Delete</DropdownMenuItem>\n </DropdownMenuContent>\n</DropdownMenu>"
20400
20556
  },
20401
20557
  {
20402
20558
  "title": "With Arrow",
20403
- "code": "<DropdownMenu>\r\n <DropdownMenuTrigger><Button Variant=\"Button.ButtonVariant.Outline\">Actions</Button></DropdownMenuTrigger>\r\n <DropdownMenuContent ShowArrow=\"true\">\r\n <DropdownMenuItem>Edit</DropdownMenuItem>\r\n <DropdownMenuItem>Duplicate</DropdownMenuItem>\r\n <DropdownMenuSeparator />\r\n <DropdownMenuItem>Archive</DropdownMenuItem>\r\n </DropdownMenuContent>\r\n</DropdownMenu>"
20559
+ "code": "<DropdownMenu>\n <DropdownMenuTrigger><Button Variant=\"Button.ButtonVariant.Outline\">Actions</Button></DropdownMenuTrigger>\n <DropdownMenuContent ShowArrow=\"true\">\n <DropdownMenuItem>Edit</DropdownMenuItem>\n <DropdownMenuItem>Duplicate</DropdownMenuItem>\n <DropdownMenuSeparator />\n <DropdownMenuItem>Archive</DropdownMenuItem>\n </DropdownMenuContent>\n</DropdownMenu>"
20404
20560
  },
20405
20561
  {
20406
20562
  "title": "Alignment",
20407
- "code": "<DropdownMenu>\r\n <DropdownMenuTrigger>\r\n <Button Variant=\"Button.ButtonVariant.Outline\">Start</Button>\r\n </DropdownMenuTrigger>\r\n <DropdownMenuContent Align=\"DropdownMenuContent.DropdownMenuAlign.Start\">\r\n <DropdownMenuItem>Option 1</DropdownMenuItem>\r\n <DropdownMenuItem>Option 2</DropdownMenuItem>\r\n </DropdownMenuContent>\r\n</DropdownMenu>\r\n\r\n<DropdownMenu>\r\n <DropdownMenuTrigger>\r\n <Button Variant=\"Button.ButtonVariant.Outline\">End</Button>\r\n </DropdownMenuTrigger>\r\n <DropdownMenuContent Align=\"DropdownMenuContent.DropdownMenuAlign.End\">\r\n <DropdownMenuItem>Option 1</DropdownMenuItem>\r\n <DropdownMenuItem>Option 2</DropdownMenuItem>\r\n </DropdownMenuContent>\r\n</DropdownMenu>"
20563
+ "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>"
20408
20564
  }
20409
20565
  ],
20410
20566
  "subComponents": {
@@ -20976,15 +21132,15 @@
20976
21132
  "examples": [
20977
21133
  {
20978
21134
  "title": "Default",
20979
- "code": "<EmptyState\r\n Title=\"No results found\"\r\n Description=\"Try adjusting your search or filters.\" />"
21135
+ "code": "<EmptyState\n Title=\"No results found\"\n Description=\"Try adjusting your search or filters.\" />"
20980
21136
  },
20981
21137
  {
20982
21138
  "title": "With Icon and Action",
20983
- "code": "<EmptyState Title=\"No projects yet\" Description=\"Get started by creating your first project.\">\r\n <IconContent>\r\n <DynamicIcon Name=\"Plus\" Class=\"h-10 w-10\" />\r\n </IconContent>\r\n <Action>\r\n <Button>Create Project</Button>\r\n </Action>\r\n</EmptyState>"
21139
+ "code": "<EmptyState Title=\"No projects yet\" Description=\"Get started by creating your first project.\">\n <IconContent>\n <DynamicIcon Name=\"Plus\" Class=\"h-10 w-10\" />\n </IconContent>\n <Action>\n <Button>Create Project</Button>\n </Action>\n</EmptyState>"
20984
21140
  },
20985
21141
  {
20986
21142
  "title": "Inbox Empty",
20987
- "code": "<EmptyState Title=\"Inbox zero\" Description=\"You have no new messages.\">\r\n <IconContent>\r\n <DynamicIcon Name=\"Mail\" Class=\"h-10 w-10\" />\r\n </IconContent>\r\n</EmptyState>"
21143
+ "code": "<EmptyState Title=\"Inbox zero\" Description=\"You have no new messages.\">\n <IconContent>\n <DynamicIcon Name=\"Mail\" Class=\"h-10 w-10\" />\n </IconContent>\n</EmptyState>"
20988
21144
  }
20989
21145
  ],
20990
21146
  "subComponents": {},
@@ -21004,9 +21160,167 @@
21004
21160
  "namespace": "Lumeo",
21005
21161
  "inheritsFrom": null,
21006
21162
  "implements": [],
21007
- "parameters": [],
21008
- "events": [],
21009
- "enums": [],
21163
+ "parameters": [
21164
+ {
21165
+ "name": "Root",
21166
+ "type": "IReadOnlyList<FileSystemNode>?",
21167
+ "default": null,
21168
+ "description": null,
21169
+ "isCascading": false,
21170
+ "captureUnmatched": false
21171
+ },
21172
+ {
21173
+ "name": "CurrentPath",
21174
+ "type": "string?",
21175
+ "default": null,
21176
+ "description": "The ID of the currently open folder. Null means the root level. Uses Id as the path identifier.",
21177
+ "isCascading": false,
21178
+ "captureUnmatched": false
21179
+ },
21180
+ {
21181
+ "name": "CurrentPathChanged",
21182
+ "type": "EventCallback<string?>",
21183
+ "default": null,
21184
+ "description": null,
21185
+ "isCascading": false,
21186
+ "captureUnmatched": false
21187
+ },
21188
+ {
21189
+ "name": "LoadChildren",
21190
+ "type": "Func<FileSystemNode, Task<List<FileSystemNode>>>?",
21191
+ "default": null,
21192
+ "description": "Called the first time a folder is opened if its Children is null. Return the loaded children.",
21193
+ "isCascading": false,
21194
+ "captureUnmatched": false
21195
+ },
21196
+ {
21197
+ "name": "ViewMode",
21198
+ "type": "FileManagerViewMode",
21199
+ "default": "FileManagerViewMode.List",
21200
+ "description": null,
21201
+ "isCascading": false,
21202
+ "captureUnmatched": false
21203
+ },
21204
+ {
21205
+ "name": "ViewModeChanged",
21206
+ "type": "EventCallback<FileManagerViewMode>",
21207
+ "default": null,
21208
+ "description": null,
21209
+ "isCascading": false,
21210
+ "captureUnmatched": false
21211
+ },
21212
+ {
21213
+ "name": "SelectedNode",
21214
+ "type": "FileSystemNode?",
21215
+ "default": null,
21216
+ "description": null,
21217
+ "isCascading": false,
21218
+ "captureUnmatched": false
21219
+ },
21220
+ {
21221
+ "name": "SelectedNodeChanged",
21222
+ "type": "EventCallback<FileSystemNode?>",
21223
+ "default": null,
21224
+ "description": null,
21225
+ "isCascading": false,
21226
+ "captureUnmatched": false
21227
+ },
21228
+ {
21229
+ "name": "OnFileOpen",
21230
+ "type": "EventCallback<FileSystemNode>",
21231
+ "default": null,
21232
+ "description": null,
21233
+ "isCascading": false,
21234
+ "captureUnmatched": false
21235
+ },
21236
+ {
21237
+ "name": "OnRename",
21238
+ "type": "EventCallback<(FileSystemNode Node, string NewName)>",
21239
+ "default": null,
21240
+ "description": null,
21241
+ "isCascading": false,
21242
+ "captureUnmatched": false
21243
+ },
21244
+ {
21245
+ "name": "OnDelete",
21246
+ "type": "EventCallback<IReadOnlyList<FileSystemNode>>",
21247
+ "default": null,
21248
+ "description": null,
21249
+ "isCascading": false,
21250
+ "captureUnmatched": false
21251
+ },
21252
+ {
21253
+ "name": "OnNewFolder",
21254
+ "type": "EventCallback<FileSystemNode>",
21255
+ "default": null,
21256
+ "description": null,
21257
+ "isCascading": false,
21258
+ "captureUnmatched": false
21259
+ },
21260
+ {
21261
+ "name": "Class",
21262
+ "type": "string?",
21263
+ "default": null,
21264
+ "description": null,
21265
+ "isCascading": false,
21266
+ "captureUnmatched": false
21267
+ },
21268
+ {
21269
+ "name": "AdditionalAttributes",
21270
+ "type": "Dictionary<string, object>?",
21271
+ "default": null,
21272
+ "description": null,
21273
+ "isCascading": false,
21274
+ "captureUnmatched": true
21275
+ }
21276
+ ],
21277
+ "events": [
21278
+ {
21279
+ "name": "CurrentPathChanged",
21280
+ "type": "EventCallback<string?>",
21281
+ "description": null
21282
+ },
21283
+ {
21284
+ "name": "ViewModeChanged",
21285
+ "type": "EventCallback<FileManagerViewMode>",
21286
+ "description": null
21287
+ },
21288
+ {
21289
+ "name": "SelectedNodeChanged",
21290
+ "type": "EventCallback<FileSystemNode?>",
21291
+ "description": null
21292
+ },
21293
+ {
21294
+ "name": "OnFileOpen",
21295
+ "type": "EventCallback<FileSystemNode>",
21296
+ "description": null
21297
+ },
21298
+ {
21299
+ "name": "OnRename",
21300
+ "type": "EventCallback<(FileSystemNode Node, string NewName)>",
21301
+ "description": null
21302
+ },
21303
+ {
21304
+ "name": "OnDelete",
21305
+ "type": "EventCallback<IReadOnlyList<FileSystemNode>>",
21306
+ "description": null
21307
+ },
21308
+ {
21309
+ "name": "OnNewFolder",
21310
+ "type": "EventCallback<FileSystemNode>",
21311
+ "description": null
21312
+ }
21313
+ ],
21314
+ "enums": [
21315
+ {
21316
+ "name": "FileManagerViewMode",
21317
+ "values": [
21318
+ "List",
21319
+ "Grid"
21320
+ ],
21321
+ "description": null
21322
+ }
21323
+ ],
21010
21324
  "records": [],
21011
21325
  "cssVars": [
21012
21326
  "--color-accent",
@@ -21039,7 +21353,9 @@
21039
21353
  ],
21040
21354
  "namespace": "Lumeo",
21041
21355
  "inheritsFrom": null,
21042
- "implements": [],
21356
+ "implements": [
21357
+ "IAsyncDisposable"
21358
+ ],
21043
21359
  "parameters": [
21044
21360
  {
21045
21361
  "name": "FormField",
@@ -21468,19 +21784,19 @@
21468
21784
  "examples": [
21469
21785
  {
21470
21786
  "title": "Filters with various field types",
21471
- "code": "<FilterBar>\r\n <ChildContent>\r\n <Flex Gap=\"2\" Align=\"center\">\r\n <DropdownMenu>\r\n <DropdownMenuTrigger>\r\n <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\">\r\n <DynamicIcon Name=\"SlidersHorizontal\" Class=\"h-3.5 w-3.5 mr-1.5\" />\r\n Add Filter\r\n </Button>\r\n </DropdownMenuTrigger>\r\n <DropdownMenuContent>\r\n <DropdownMenuItem OnClick=\"@(() => ToggleField(\"Status\"))\">Status</DropdownMenuItem>\r\n <DropdownMenuItem OnClick=\"@(() => ToggleField(\"Priority\"))\">Priority</DropdownMenuItem>\r\n </DropdownMenuContent>\r\n </DropdownMenu>\r\n\r\n @if (_fields.Contains(\"Status\"))\r\n {\r\n <Select Value=\"@_status\" ValueChanged=\"v => _status = v\">\r\n <SelectTrigger Class=\"w-[160px] h-8 text-xs\">\r\n <Lumeo.Text As=\"span\">@(_status == \"\" ? \"Status\" : $\"Status: {_status}\")</Lumeo.Text>\r\n </SelectTrigger>\r\n <SelectContent>\r\n <SelectItem Value=\"Active\">Active</SelectItem>\r\n </SelectContent>\r\n </Select>\r\n }\r\n </Flex>\r\n </ChildContent>\r\n <Pills>\r\n @if (_status != \"\")\r\n {\r\n <FilterPill Label=\"Status\" Value=\"@_status\" OnDismiss=\"@(() => _status = \"\")\" />\r\n }\r\n </Pills>\r\n</FilterBar>"
21787
+ "code": "<FilterBar>\n <ChildContent>\n <Flex Gap=\"2\" Align=\"center\">\n <DropdownMenu>\n <DropdownMenuTrigger>\n <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\">\n <DynamicIcon Name=\"SlidersHorizontal\" Class=\"h-3.5 w-3.5 mr-1.5\" />\n Add Filter\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent>\n <DropdownMenuItem OnClick=\"@(() => ToggleField(\"Status\"))\">Status</DropdownMenuItem>\n <DropdownMenuItem OnClick=\"@(() => ToggleField(\"Priority\"))\">Priority</DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n\n @if (_fields.Contains(\"Status\"))\n {\n <Select Value=\"@_status\" ValueChanged=\"v => _status = v\">\n <SelectTrigger Class=\"w-[160px] h-8 text-xs\">\n <Lumeo.Text As=\"span\">@(_status == \"\" ? \"Status\" : $\"Status: {_status}\")</Lumeo.Text>\n </SelectTrigger>\n <SelectContent>\n <SelectItem Value=\"Active\">Active</SelectItem>\n </SelectContent>\n </Select>\n }\n </Flex>\n </ChildContent>\n <Pills>\n @if (_status != \"\")\n {\n <FilterPill Label=\"Status\" Value=\"@_status\" OnDismiss=\"@(() => _status = \"\")\" />\n }\n </Pills>\n</FilterBar>"
21472
21788
  },
21473
21789
  {
21474
21790
  "title": "Filters with search input",
21475
- "code": "<FilterBar>\r\n <ChildContent>\r\n <Flex Gap=\"2\" Align=\"center\">\r\n <Input placeholder=\"Search...\" Value=\"@_search\"\r\n OnInput=\"e => _search = e.Value?.ToString() ?? \"\"\" Class=\"h-8 w-[220px] text-xs\" />\r\n <Select Value=\"@_role\" ValueChanged=\"v => _role = v\">\r\n <SelectTrigger Class=\"w-[150px] h-8 text-xs\">\r\n <Lumeo.Text As=\"span\">@(_role == \"\" ? \"Role\" : _role)</Lumeo.Text>\r\n </SelectTrigger>\r\n <SelectContent>\r\n <SelectItem Value=\"Admin\">Admin</SelectItem>\r\n </SelectContent>\r\n </Select>\r\n </Flex>\r\n </ChildContent>\r\n <Pills>\r\n @if (_search != \"\")\r\n {\r\n <FilterPill Label=\"Search\" Value=\"@_search\" OnDismiss=\"@(() => _search = \"\")\" />\r\n }\r\n </Pills>\r\n</FilterBar>"
21791
+ "code": "<FilterBar>\n <ChildContent>\n <Flex Gap=\"2\" Align=\"center\">\n <Input placeholder=\"Search...\" Value=\"@_search\"\n OnInput=\"e => _search = e.Value?.ToString() ?? \"\"\" Class=\"h-8 w-[220px] text-xs\" />\n <Select Value=\"@_role\" ValueChanged=\"v => _role = v\">\n <SelectTrigger Class=\"w-[150px] h-8 text-xs\">\n <Lumeo.Text As=\"span\">@(_role == \"\" ? \"Role\" : _role)</Lumeo.Text>\n </SelectTrigger>\n <SelectContent>\n <SelectItem Value=\"Admin\">Admin</SelectItem>\n </SelectContent>\n </Select>\n </Flex>\n </ChildContent>\n <Pills>\n @if (_search != \"\")\n {\n <FilterPill Label=\"Search\" Value=\"@_search\" OnDismiss=\"@(() => _search = \"\")\" />\n }\n </Pills>\n</FilterBar>"
21476
21792
  },
21477
21793
  {
21478
21794
  "title": "Filters with multi-select",
21479
- "code": "<FilterBar>\r\n <ChildContent>\r\n <DropdownMenu>\r\n <DropdownMenuTrigger>\r\n <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\">\r\n Category: @_categories.Count selected\r\n </Button>\r\n </DropdownMenuTrigger>\r\n <DropdownMenuContent>\r\n @foreach (var cat in _allCategories)\r\n {\r\n <Flex Gap=\"2\" Align=\"center\" Class=\"px-2 py-1.5\">\r\n <Checkbox Checked=\"@_categories.Contains(cat)\"\r\n CheckedChanged=\"@(v => Toggle(cat, v))\" />\r\n <Lumeo.Text As=\"span\" Size=\"sm\">@cat</Lumeo.Text>\r\n </Flex>\r\n }\r\n </DropdownMenuContent>\r\n </DropdownMenu>\r\n </ChildContent>\r\n <Pills>\r\n @foreach (var cat in _categories)\r\n {\r\n <FilterPill Label=\"Category\" Value=\"@cat\"\r\n OnDismiss=\"@(() => _categories.Remove(cat))\" />\r\n }\r\n </Pills>\r\n</FilterBar>"
21795
+ "code": "<FilterBar>\n <ChildContent>\n <DropdownMenu>\n <DropdownMenuTrigger>\n <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\">\n Category: @_categories.Count selected\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent>\n @foreach (var cat in _allCategories)\n {\n <Flex Gap=\"2\" Align=\"center\" Class=\"px-2 py-1.5\">\n <Checkbox Checked=\"@_categories.Contains(cat)\"\n CheckedChanged=\"@(v => Toggle(cat, v))\" />\n <Lumeo.Text As=\"span\" Size=\"sm\">@cat</Lumeo.Text>\n </Flex>\n }\n </DropdownMenuContent>\n </DropdownMenu>\n </ChildContent>\n <Pills>\n @foreach (var cat in _categories)\n {\n <FilterPill Label=\"Category\" Value=\"@cat\"\n OnDismiss=\"@(() => _categories.Remove(cat))\" />\n }\n </Pills>\n</FilterBar>"
21480
21796
  },
21481
21797
  {
21482
21798
  "title": "Filters with data table",
21483
- "code": "<FilterBar>\r\n <ChildContent>\r\n <Input placeholder=\"Search...\" />\r\n <Select Value=\"@_status\" ValueChanged=\"v => _status = v\">...</Select>\r\n </ChildContent>\r\n <Pills>\r\n @if (_status != \"\")\r\n {\r\n <FilterPill Label=\"Status\" Value=\"@_status\" OnDismiss=\"...\" />\r\n }\r\n </Pills>\r\n</FilterBar>\r\n\r\n<Table>\r\n @foreach (var item in FilteredItems)\r\n {\r\n <TableRow>...</TableRow>\r\n }\r\n</Table>"
21799
+ "code": "<FilterBar>\n <ChildContent>\n <Input placeholder=\"Search...\" />\n <Select Value=\"@_status\" ValueChanged=\"v => _status = v\">...</Select>\n </ChildContent>\n <Pills>\n @if (_status != \"\")\n {\n <FilterPill Label=\"Status\" Value=\"@_status\" OnDismiss=\"...\" />\n }\n </Pills>\n</FilterBar>\n\n<Table>\n @foreach (var item in FilteredItems)\n {\n <TableRow>...</TableRow>\n }\n</Table>"
21484
21800
  }
21485
21801
  ],
21486
21802
  "subComponents": {
@@ -21643,19 +21959,19 @@
21643
21959
  "examples": [
21644
21960
  {
21645
21961
  "title": "Basic Row",
21646
- "code": "<Flex Gap=\"3\">\r\n <div>Item 1</div>\r\n <div>Item 2</div>\r\n <div>Item 3</div>\r\n</Flex>"
21962
+ "code": "<Flex Gap=\"3\">\n <div>Item 1</div>\n <div>Item 2</div>\n <div>Item 3</div>\n</Flex>"
21647
21963
  },
21648
21964
  {
21649
21965
  "title": "With Spacer",
21650
- "code": "<Flex Align=\"center\">\r\n <Text Weight=\"semibold\">Logo</Text>\r\n <Spacer />\r\n <Flex Gap=\"2\">\r\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">About</Button>\r\n <Button Size=\"Button.ButtonSize.Sm\">Sign In</Button>\r\n </Flex>\r\n</Flex>"
21966
+ "code": "<Flex Align=\"center\">\n <Text Weight=\"semibold\">Logo</Text>\n <Spacer />\n <Flex Gap=\"2\">\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">About</Button>\n <Button Size=\"Button.ButtonSize.Sm\">Sign In</Button>\n </Flex>\n</Flex>"
21651
21967
  },
21652
21968
  {
21653
21969
  "title": "Centered",
21654
- "code": "<Flex Align=\"center\" Justify=\"center\" Class=\"h-32 w-full\">\r\n <Text Color=\"muted\">Centered content</Text>\r\n</Flex>"
21970
+ "code": "<Flex Align=\"center\" Justify=\"center\" Class=\"h-32 w-full\">\n <Text Color=\"muted\">Centered content</Text>\n</Flex>"
21655
21971
  },
21656
21972
  {
21657
21973
  "title": "Wrapping",
21658
- "code": "<Flex Gap=\"2\" Wrap=\"true\">\r\n <div>1</div>\r\n <div>2</div>\r\n <!-- ... more items -->\r\n</Flex>"
21974
+ "code": "<Flex Gap=\"2\" Wrap=\"true\">\n <div>1</div>\n <div>2</div>\n <!-- ... more items -->\n</Flex>"
21659
21975
  }
21660
21976
  ],
21661
21977
  "subComponents": {},
@@ -21762,19 +22078,19 @@
21762
22078
  "examples": [
21763
22079
  {
21764
22080
  "title": "Input with Validation",
21765
- "code": "<FormField Name=\"email\" Label=\"Email\" Required=\"true\" Error=\"@_emailError\" HelpText=\"We will never share your email.\">\r\n <Input Type=\"email\" Placeholder=\"you@example.com\" @bind-Value=\"_emailValue\" />\r\n</FormField>\r\n<Button OnClick=\"ValidateEmail\">Validate</Button>\r\n\r\n@code {\r\n private string? _emailValue;\r\n private string? _emailError;\r\n\r\n private void ValidateEmail()\r\n {\r\n if (string.IsNullOrWhiteSpace(_emailValue) || !_emailValue.Contains('@'))\r\n _emailError = \"Please enter a valid email address.\";\r\n else\r\n _emailError = null;\r\n }\r\n}"
22081
+ "code": "<FormField Name=\"email\" Label=\"Email\" Required=\"true\" Error=\"@_emailError\" HelpText=\"We will never share your email.\">\n <Input Type=\"email\" Placeholder=\"you@example.com\" @bind-Value=\"_emailValue\" />\n</FormField>\n<Button OnClick=\"ValidateEmail\">Validate</Button>\n\n@code {\n private string? _emailValue;\n private string? _emailError;\n\n private void ValidateEmail()\n {\n if (string.IsNullOrWhiteSpace(_emailValue) || !_emailValue.Contains('@'))\n _emailError = \"Please enter a valid email address.\";\n else\n _emailError = null;\n }\n}"
21766
22082
  },
21767
22083
  {
21768
22084
  "title": "Select with Validation",
21769
- "code": "<FormField Name=\"role\" Label=\"Role\" Required=\"true\" Error=\"@_roleError\">\r\n <Select @bind-Value=\"_roleValue\">\r\n <SelectTrigger>\r\n <Text As=\"span\" Class=\"@(_roleValue == null ? \\\"text-muted-foreground\\\" : \"\")\">\r\n @(_roleValue ?? \"Select a role\")\r\n </Text>\r\n </SelectTrigger>\r\n <SelectContent>\r\n <SelectItem Value=\"admin\">Admin</SelectItem>\r\n <SelectItem Value=\"editor\">Editor</SelectItem>\r\n <SelectItem Value=\"viewer\">Viewer</SelectItem>\r\n </SelectContent>\r\n </Select>\r\n</FormField>\r\n<Button OnClick=\"ValidateRole\">Validate</Button>\r\n\r\n@code {\r\n private string? _roleValue;\r\n private string? _roleError;\r\n\r\n private void ValidateRole()\r\n {\r\n if (string.IsNullOrEmpty(_roleValue))\r\n _roleError = \"Please select a role.\";\r\n else\r\n _roleError = null;\r\n }\r\n}"
22085
+ "code": "<FormField Name=\"role\" Label=\"Role\" Required=\"true\" Error=\"@_roleError\">\n <Select @bind-Value=\"_roleValue\">\n <SelectTrigger>\n <Text As=\"span\" Class=\"@(_roleValue == null ? \\\"text-muted-foreground\\\" : \"\")\">\n @(_roleValue ?? \"Select a role\")\n </Text>\n </SelectTrigger>\n <SelectContent>\n <SelectItem Value=\"admin\">Admin</SelectItem>\n <SelectItem Value=\"editor\">Editor</SelectItem>\n <SelectItem Value=\"viewer\">Viewer</SelectItem>\n </SelectContent>\n </Select>\n</FormField>\n<Button OnClick=\"ValidateRole\">Validate</Button>\n\n@code {\n private string? _roleValue;\n private string? _roleError;\n\n private void ValidateRole()\n {\n if (string.IsNullOrEmpty(_roleValue))\n _roleError = \"Please select a role.\";\n else\n _roleError = null;\n }\n}"
21770
22086
  },
21771
22087
  {
21772
22088
  "title": "Checkbox and Switch with Validation",
21773
- "code": "<FormField Name=\"terms\" Error=\"@_termsError\">\r\n <Flex Gap=\"2\" Align=\"center\">\r\n <Checkbox @bind-Checked=\"_termsChecked\" />\r\n <Label>I accept the terms and conditions</Label>\r\n </Flex>\r\n</FormField>\r\n<FormField Name=\"notifications\" Label=\"Email Notifications\" HelpText=\"Receive updates about your account.\">\r\n <Switch @bind-Checked=\"_notifChecked\" />\r\n</FormField>\r\n<Button OnClick=\"ValidateTerms\">Submit</Button>\r\n\r\n@code {\r\n private bool _termsChecked;\r\n private bool _notifChecked = true;\r\n private string? _termsError;\r\n\r\n private void ValidateTerms()\r\n {\r\n _termsError = _termsChecked ? null : \"You must accept the terms to continue.\";\r\n }\r\n}"
22089
+ "code": "<FormField Name=\"terms\" Error=\"@_termsError\">\n <Flex Gap=\"2\" Align=\"center\">\n <Checkbox @bind-Checked=\"_termsChecked\" />\n <Label>I accept the terms and conditions</Label>\n </Flex>\n</FormField>\n<FormField Name=\"notifications\" Label=\"Email Notifications\" HelpText=\"Receive updates about your account.\">\n <Switch @bind-Checked=\"_notifChecked\" />\n</FormField>\n<Button OnClick=\"ValidateTerms\">Submit</Button>\n\n@code {\n private bool _termsChecked;\n private bool _notifChecked = true;\n private string? _termsError;\n\n private void ValidateTerms()\n {\n _termsError = _termsChecked ? null : \"You must accept the terms to continue.\";\n }\n}"
21774
22090
  },
21775
22091
  {
21776
22092
  "title": "Default",
21777
- "code": "<FormField Name=\"username\">\r\n <FormItem>\r\n <FormLabel>Username</FormLabel>\r\n <Input Placeholder=\"Enter your username\" />\r\n <FormDescription>This is your public display name.</FormDescription>\r\n </FormItem>\r\n</FormField>"
22093
+ "code": "<FormField Name=\"username\">\n <FormItem>\n <FormLabel>Username</FormLabel>\n <Input Placeholder=\"Enter your username\" />\n <FormDescription>This is your public display name.</FormDescription>\n </FormItem>\n</FormField>"
21778
22094
  }
21779
22095
  ],
21780
22096
  "subComponents": {
@@ -21902,6 +22218,14 @@
21902
22218
  "description": null,
21903
22219
  "isCascading": false,
21904
22220
  "captureUnmatched": true
22221
+ },
22222
+ {
22223
+ "name": "ParentFormContext",
22224
+ "type": "FormContext?",
22225
+ "default": null,
22226
+ "description": null,
22227
+ "isCascading": true,
22228
+ "captureUnmatched": false
21905
22229
  }
21906
22230
  ],
21907
22231
  "events": [],
@@ -22179,6 +22503,14 @@
22179
22503
  "isCascading": false,
22180
22504
  "captureUnmatched": false
22181
22505
  },
22506
+ {
22507
+ "name": "OnInitError",
22508
+ "type": "EventCallback<string>",
22509
+ "default": null,
22510
+ "description": null,
22511
+ "isCascading": false,
22512
+ "captureUnmatched": false
22513
+ },
22182
22514
  {
22183
22515
  "name": "Class",
22184
22516
  "type": "string?",
@@ -22216,6 +22548,11 @@
22216
22548
  "name": "OnProgressChange",
22217
22549
  "type": "EventCallback<GanttTask>",
22218
22550
  "description": null
22551
+ },
22552
+ {
22553
+ "name": "OnInitError",
22554
+ "type": "EventCallback<string>",
22555
+ "description": null
22219
22556
  }
22220
22557
  ],
22221
22558
  "enums": [],
@@ -22223,20 +22560,21 @@
22223
22560
  "cssVars": [
22224
22561
  "--color-border",
22225
22562
  "--color-card",
22563
+ "--color-destructive",
22226
22564
  "--radius"
22227
22565
  ],
22228
22566
  "examples": [
22229
22567
  {
22230
22568
  "title": "Basic project plan",
22231
- "code": "<Gantt Tasks=\"_tasks\" ViewMode=\"GanttViewMode.Day\" Height=\"420px\" />\r\n\r\n@code {\r\n private List<GanttTask> _tasks = new() {\r\n new(\"research\", \"Research\", DateTime.Today, DateTime.Today.AddDays(5)),\r\n new(\"design\", \"Design\", DateTime.Today.AddDays(5), DateTime.Today.AddDays(12), Dependencies: new[] { \"research\" }),\r\n new(\"development\", \"Development\", DateTime.Today.AddDays(12), DateTime.Today.AddDays(25), Dependencies: new[] { \"design\" }),\r\n new(\"testing\", \"Testing\", DateTime.Today.AddDays(22), DateTime.Today.AddDays(30), Dependencies: new[] { \"development\" }),\r\n new(\"launch\", \"Launch\", DateTime.Today.AddDays(30), DateTime.Today.AddDays(32), Dependencies: new[] { \"testing\" }),\r\n };\r\n}"
22569
+ "code": "<Gantt Tasks=\"_tasks\" ViewMode=\"GanttViewMode.Day\" Height=\"420px\" />\n\n@code {\n private List<GanttTask> _tasks = new() {\n new(\"research\", \"Research\", DateTime.Today, DateTime.Today.AddDays(5)),\n new(\"design\", \"Design\", DateTime.Today.AddDays(5), DateTime.Today.AddDays(12), Dependencies: new[] { \"research\" }),\n new(\"development\", \"Development\", DateTime.Today.AddDays(12), DateTime.Today.AddDays(25), Dependencies: new[] { \"design\" }),\n new(\"testing\", \"Testing\", DateTime.Today.AddDays(22), DateTime.Today.AddDays(30), Dependencies: new[] { \"development\" }),\n new(\"launch\", \"Launch\", DateTime.Today.AddDays(30), DateTime.Today.AddDays(32), Dependencies: new[] { \"testing\" }),\n };\n}"
22232
22570
  },
22233
22571
  {
22234
22572
  "title": "With progress bars",
22235
- "code": "<Gantt Tasks=\"_tasks\" ViewMode=\"GanttViewMode.Day\" Height=\"420px\" />\r\n\r\n@code {\r\n private List<GanttTask> _tasks = new() {\r\n new(\"research\", \"Research\", DateTime.Today, DateTime.Today.AddDays(5), Progress: 100),\r\n new(\"design\", \"Design\", DateTime.Today.AddDays(5), DateTime.Today.AddDays(12), Progress: 60, Dependencies: new[] { \"research\" }),\r\n new(\"development\", \"Development\", DateTime.Today.AddDays(12), DateTime.Today.AddDays(25), Progress: 30, Dependencies: new[] { \"design\" }),\r\n // ...\r\n };\r\n}"
22573
+ "code": "<Gantt Tasks=\"_tasks\" ViewMode=\"GanttViewMode.Day\" Height=\"420px\" />\n\n@code {\n private List<GanttTask> _tasks = new() {\n new(\"research\", \"Research\", DateTime.Today, DateTime.Today.AddDays(5), Progress: 100),\n new(\"design\", \"Design\", DateTime.Today.AddDays(5), DateTime.Today.AddDays(12), Progress: 60, Dependencies: new[] { \"research\" }),\n new(\"development\", \"Development\", DateTime.Today.AddDays(12), DateTime.Today.AddDays(25), Progress: 30, Dependencies: new[] { \"design\" }),\n // ...\n };\n}"
22236
22574
  },
22237
22575
  {
22238
22576
  "title": "Drag to reschedule + change progress",
22239
- "code": "<Gantt @bind-Tasks=\"_tasks\"\r\n ViewMode=\"GanttViewMode.Day\"\r\n OnDateChange=\"HandleDateChange\"\r\n OnProgressChange=\"HandleProgressChange\" />\r\n\r\n@code {\r\n private IEnumerable<GanttTask> _tasks = new List<GanttTask> { /* ... */ };\r\n private GanttTask? _last;\r\n\r\n Task HandleDateChange(GanttTask t) { _last = t; StateHasChanged(); return Task.CompletedTask; }\r\n Task HandleProgressChange(GanttTask t) { _last = t; StateHasChanged(); return Task.CompletedTask; }\r\n}"
22577
+ "code": "<Gantt @bind-Tasks=\"_tasks\"\n ViewMode=\"GanttViewMode.Day\"\n OnDateChange=\"HandleDateChange\"\n OnProgressChange=\"HandleProgressChange\" />\n\n@code {\n private IEnumerable<GanttTask> _tasks = new List<GanttTask> { /* ... */ };\n private GanttTask? _last;\n\n Task HandleDateChange(GanttTask t) { _last = t; StateHasChanged(); return Task.CompletedTask; }\n Task HandleProgressChange(GanttTask t) { _last = t; StateHasChanged(); return Task.CompletedTask; }\n}"
22240
22578
  },
22241
22579
  {
22242
22580
  "title": "View modes",
@@ -22488,19 +22826,19 @@
22488
22826
  "examples": [
22489
22827
  {
22490
22828
  "title": "Basic 3-Column",
22491
- "code": "<Grid Columns=\"3\" Gap=\"4\">\r\n <div>1</div>\r\n <div>2</div>\r\n <div>3</div>\r\n <div>4</div>\r\n <div>5</div>\r\n <div>6</div>\r\n</Grid>"
22829
+ "code": "<Grid Columns=\"3\" Gap=\"4\">\n <div>1</div>\n <div>2</div>\n <div>3</div>\n <div>4</div>\n <div>5</div>\n <div>6</div>\n</Grid>"
22492
22830
  },
22493
22831
  {
22494
22832
  "title": "Responsive Columns",
22495
- "code": "<Grid Columns=\"2\" Gap=\"4\" Class=\"md:grid-cols-4\">\r\n <div>1</div>\r\n <div>2</div>\r\n <!-- ... -->\r\n</Grid>"
22833
+ "code": "<Grid Columns=\"2\" Gap=\"4\" Class=\"md:grid-cols-4\">\n <div>1</div>\n <div>2</div>\n <!-- ... -->\n</Grid>"
22496
22834
  },
22497
22835
  {
22498
22836
  "title": "Different Gaps",
22499
- "code": "<Grid Columns=\"3\" RowGap=\"6\" ColGap=\"2\">\r\n <div>1</div>\r\n <div>2</div>\r\n <!-- ... -->\r\n</Grid>"
22837
+ "code": "<Grid Columns=\"3\" RowGap=\"6\" ColGap=\"2\">\n <div>1</div>\n <div>2</div>\n <!-- ... -->\n</Grid>"
22500
22838
  },
22501
22839
  {
22502
22840
  "title": "Columns — interactive",
22503
- "code": "<Grid Columns=\"4\" Gap=\"3\">\r\n @for (var i = 1; i <= 12; i++)\r\n {\r\n <div>@i</div>\r\n }\r\n</Grid>"
22841
+ "code": "<Grid Columns=\"4\" Gap=\"3\">\n @for (var i = 1; i <= 12; i++)\n {\n <div>@i</div>\n }\n</Grid>"
22504
22842
  }
22505
22843
  ],
22506
22844
  "subComponents": {},
@@ -22586,15 +22924,15 @@
22586
22924
  "examples": [
22587
22925
  {
22588
22926
  "title": "All Levels",
22589
- "code": "<Heading Level=\"1\">Heading Level 1</Heading>\r\n<Heading Level=\"2\">Heading Level 2</Heading>\r\n<Heading Level=\"3\">Heading Level 3</Heading>\r\n<Heading Level=\"4\">Heading Level 4</Heading>\r\n<Heading Level=\"5\">Heading Level 5</Heading>\r\n<Heading Level=\"6\">Heading Level 6</Heading>"
22927
+ "code": "<Heading Level=\"1\">Heading Level 1</Heading>\n<Heading Level=\"2\">Heading Level 2</Heading>\n<Heading Level=\"3\">Heading Level 3</Heading>\n<Heading Level=\"4\">Heading Level 4</Heading>\n<Heading Level=\"5\">Heading Level 5</Heading>\n<Heading Level=\"6\">Heading Level 6</Heading>"
22590
22928
  },
22591
22929
  {
22592
22930
  "title": "Custom Sizes",
22593
- "code": "<Heading Level=\"2\" Size=\"sm\">h2 with small text</Heading>\r\n<Heading Level=\"3\" Size=\"3xl\">h3 with 3xl text</Heading>\r\n<Heading Level=\"4\" Size=\"lg\" Weight=\"normal\">h4 with lg text, normal weight</Heading>"
22931
+ "code": "<Heading Level=\"2\" Size=\"sm\">h2 with small text</Heading>\n<Heading Level=\"3\" Size=\"3xl\">h3 with 3xl text</Heading>\n<Heading Level=\"4\" Size=\"lg\" Weight=\"normal\">h4 with lg text, normal weight</Heading>"
22594
22932
  },
22595
22933
  {
22596
22934
  "title": "Tracking",
22597
- "code": "<Heading Level=\"1\">Default tight tracking</Heading>\r\n<Heading Level=\"1\" Tracking=\"normal\">Normal tracking</Heading>\r\n<Heading Level=\"1\" Tracking=\"wide\">Wide tracking</Heading>"
22935
+ "code": "<Heading Level=\"1\">Default tight tracking</Heading>\n<Heading Level=\"1\" Tracking=\"normal\">Normal tracking</Heading>\n<Heading Level=\"1\" Tracking=\"wide\">Wide tracking</Heading>"
22598
22936
  },
22599
22937
  {
22600
22938
  "title": "Level — interactive",
@@ -22740,7 +23078,7 @@
22740
23078
  "namespace": "Lumeo",
22741
23079
  "inheritsFrom": null,
22742
23080
  "implements": [
22743
- "IDisposable"
23081
+ "IAsyncDisposable"
22744
23082
  ],
22745
23083
  "parameters": [
22746
23084
  {
@@ -22824,7 +23162,7 @@
22824
23162
  "records": [
22825
23163
  {
22826
23164
  "name": "HoverCardContext",
22827
- "signature": "HoverCardContext(bool IsOpen, EventCallback RequestOpen, EventCallback RequestClose, string WrapperId)",
23165
+ "signature": "HoverCardContext(bool IsOpen, EventCallback RequestOpen, EventCallback RequestClose, EventCallback RequestTogglePin, string WrapperId)",
22828
23166
  "description": null
22829
23167
  }
22830
23168
  ],
@@ -22837,19 +23175,19 @@
22837
23175
  "examples": [
22838
23176
  {
22839
23177
  "title": "Default",
22840
- "code": "<HoverCard>\r\n <HoverCardTrigger>\r\n <Button Variant=\"Button.ButtonVariant.Link\">@@blazor</Button>\r\n </HoverCardTrigger>\r\n <HoverCardContent>\r\n <Stack Gap=\"1\">\r\n <Heading Level=\"4\" Size=\"sm\" Weight=\"semibold\">@@blazor</Heading>\r\n <Lumeo.Text Size=\"sm\" Color=\"muted\">\r\n A free and open-source web framework.\r\n </Lumeo.Text>\r\n <Lumeo.Text As=\"span\" Size=\"xs\" Color=\"muted\">Joined December 2018</Lumeo.Text>\r\n </Stack>\r\n </HoverCardContent>\r\n</HoverCard>"
23178
+ "code": "<HoverCard>\n <HoverCardTrigger>\n <Button Variant=\"Button.ButtonVariant.Link\">@@blazor</Button>\n </HoverCardTrigger>\n <HoverCardContent>\n <Stack Gap=\"1\">\n <Heading Level=\"4\" Size=\"sm\" Weight=\"semibold\">@@blazor</Heading>\n <Lumeo.Text Size=\"sm\" Color=\"muted\">\n A free and open-source web framework.\n </Lumeo.Text>\n <Lumeo.Text As=\"span\" Size=\"xs\" Color=\"muted\">Joined December 2018</Lumeo.Text>\n </Stack>\n </HoverCardContent>\n</HoverCard>"
22841
23179
  },
22842
23180
  {
22843
23181
  "title": "Alignment",
22844
- "code": "<HoverCard>\r\n <HoverCardTrigger>\r\n <Button Variant=\"Button.ButtonVariant.Outline\">Start</Button>\r\n </HoverCardTrigger>\r\n <HoverCardContent Align=\"HoverCardContent.HoverCardAlign.Start\">\r\n <Lumeo.Text Size=\"sm\">Aligned to start.</Lumeo.Text>\r\n </HoverCardContent>\r\n</HoverCard>\r\n\r\n<HoverCard>\r\n <HoverCardTrigger>\r\n <Button Variant=\"Button.ButtonVariant.Outline\">End</Button>\r\n </HoverCardTrigger>\r\n <HoverCardContent Align=\"HoverCardContent.HoverCardAlign.End\">\r\n <Lumeo.Text Size=\"sm\">Aligned to end.</Lumeo.Text>\r\n </HoverCardContent>\r\n</HoverCard>"
23182
+ "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>"
22845
23183
  },
22846
23184
  {
22847
23185
  "title": "With Arrow",
22848
- "code": "<HoverCard>\r\n <HoverCardTrigger><Button Variant=\"Button.ButtonVariant.Outline\">Hover me</Button></HoverCardTrigger>\r\n <HoverCardContent ShowArrow=\"true\">\r\n <Stack Gap=\"1\">\r\n <Heading Level=\"4\" Size=\"sm\" Weight=\"semibold\">With arrow</Heading>\r\n <Lumeo.Text Size=\"sm\" Color=\"muted\">A small pointer ties the card to its trigger.</Lumeo.Text>\r\n </Stack>\r\n </HoverCardContent>\r\n</HoverCard>"
23186
+ "code": "<HoverCard>\n <HoverCardTrigger><Button Variant=\"Button.ButtonVariant.Outline\">Hover me</Button></HoverCardTrigger>\n <HoverCardContent ShowArrow=\"true\">\n <Stack Gap=\"1\">\n <Heading Level=\"4\" Size=\"sm\" Weight=\"semibold\">With arrow</Heading>\n <Lumeo.Text Size=\"sm\" Color=\"muted\">A small pointer ties the card to its trigger.</Lumeo.Text>\n </Stack>\n </HoverCardContent>\n</HoverCard>"
22849
23187
  },
22850
23188
  {
22851
23189
  "title": "User Profile",
22852
- "code": "<HoverCard>\r\n <HoverCardTrigger>\r\n <span class=\"font-medium underline cursor-pointer\">Jane Smith</span>\r\n </HoverCardTrigger>\r\n <HoverCardContent>\r\n <Stack Gap=\"2\">\r\n <Heading Level=\"4\" Size=\"sm\" Weight=\"semibold\">Jane Smith</Heading>\r\n <Lumeo.Text Size=\"sm\" Color=\"muted\">Senior Developer at Acme Inc.</Lumeo.Text>\r\n <Flex Align=\"center\" Gap=\"2\">\r\n <Lumeo.Text As=\"span\" Size=\"xs\" Color=\"muted\">42 repositories</Lumeo.Text>\r\n <Lumeo.Text As=\"span\" Size=\"xs\" Color=\"muted\">128 followers</Lumeo.Text>\r\n </Flex>\r\n </Stack>\r\n </HoverCardContent>\r\n</HoverCard>"
23190
+ "code": "<HoverCard>\n <HoverCardTrigger>\n <span class=\"font-medium underline cursor-pointer\">Jane Smith</span>\n </HoverCardTrigger>\n <HoverCardContent>\n <Stack Gap=\"2\">\n <Heading Level=\"4\" Size=\"sm\" Weight=\"semibold\">Jane Smith</Heading>\n <Lumeo.Text Size=\"sm\" Color=\"muted\">Senior Developer at Acme Inc.</Lumeo.Text>\n <Flex Align=\"center\" Gap=\"2\">\n <Lumeo.Text As=\"span\" Size=\"xs\" Color=\"muted\">42 repositories</Lumeo.Text>\n <Lumeo.Text As=\"span\" Size=\"xs\" Color=\"muted\">128 followers</Lumeo.Text>\n </Flex>\n </Stack>\n </HoverCardContent>\n</HoverCard>"
22853
23191
  }
22854
23192
  ],
22855
23193
  "subComponents": {
@@ -23142,6 +23480,14 @@
23142
23480
  "isCascading": false,
23143
23481
  "captureUnmatched": false
23144
23482
  },
23483
+ {
23484
+ "name": "Zoomable",
23485
+ "type": "bool",
23486
+ "default": "false",
23487
+ "description": "When true, registers a two-finger pinch-zoom gesture on the image container so touch users can zoom in/out on the image directly (independent of the fullscreen Preview overlay). Sets touch-action: none on the wrapper so the browser doesn't intercept the gesture for native page zoom.",
23488
+ "isCascading": false,
23489
+ "captureUnmatched": false
23490
+ },
23145
23491
  {
23146
23492
  "name": "Class",
23147
23493
  "type": "string?",
@@ -23179,6 +23525,10 @@
23179
23525
  {
23180
23526
  "title": "Gallery",
23181
23527
  "code": "<ImageGallery Images=\"@_images\" Columns=\"4\" />"
23528
+ },
23529
+ {
23530
+ "title": "Pinch-to-Zoom",
23531
+ "code": "<Image Src=\"photo.jpg\" Zoomable=\"true\" Alt=\"Pinch to zoom on mobile\" />"
23182
23532
  }
23183
23533
  ],
23184
23534
  "subComponents": {
@@ -23215,6 +23565,14 @@
23215
23565
  "isCascading": false,
23216
23566
  "captureUnmatched": false
23217
23567
  },
23568
+ {
23569
+ "name": "GesturesEnabled",
23570
+ "type": "bool",
23571
+ "default": "true",
23572
+ "description": "When true (default), enables horizontal swipe (prev/next image) and pinch-to-zoom gestures on the fullscreen preview overlay on touch devices.",
23573
+ "isCascading": false,
23574
+ "captureUnmatched": false
23575
+ },
23218
23576
  {
23219
23577
  "name": "Class",
23220
23578
  "type": "string?",
@@ -23362,19 +23720,19 @@
23362
23720
  "examples": [
23363
23721
  {
23364
23722
  "title": "Horizontal Comparison",
23365
- "code": "<ImageCompare BeforeSrc=\"before.jpg\" AfterSrc=\"after.jpg\"\r\n BeforeLabel=\"Before\" AfterLabel=\"After\" Height=\"320px\" />"
23723
+ "code": "<ImageCompare BeforeSrc=\"before.jpg\" AfterSrc=\"after.jpg\"\n BeforeLabel=\"Before\" AfterLabel=\"After\" Height=\"320px\" />"
23366
23724
  },
23367
23725
  {
23368
23726
  "title": "Vertical Comparison",
23369
- "code": "<ImageCompare BeforeSrc=\"img1.jpg\" AfterSrc=\"img2.jpg\"\r\n Orientation=\"ImageCompare.ImageCompareOrientation.Vertical\"\r\n Height=\"320px\" />"
23727
+ "code": "<ImageCompare BeforeSrc=\"img1.jpg\" AfterSrc=\"img2.jpg\"\n Orientation=\"ImageCompare.ImageCompareOrientation.Vertical\"\n Height=\"320px\" />"
23370
23728
  },
23371
23729
  {
23372
23730
  "title": "Orientation (interactive)",
23373
- "code": "<Segmented @bind-Value=\"_orientation\">\r\n <SegmentedItem Value=\"@ImageCompare.ImageCompareOrientation.Horizontal\">Horizontal</SegmentedItem>\r\n <SegmentedItem Value=\"@ImageCompare.ImageCompareOrientation.Vertical\">Vertical</SegmentedItem>\r\n</Segmented>\r\n<ImageCompare BeforeSrc=\"before.jpg\" AfterSrc=\"after.jpg\"\r\n BeforeLabel=\"Before\" AfterLabel=\"After\"\r\n Orientation=\"@_orientation\" Height=\"280px\" />\r\n\r\n@code { private ImageCompare.ImageCompareOrientation _orientation = ImageCompare.ImageCompareOrientation.Horizontal; }"
23731
+ "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; }"
23374
23732
  },
23375
23733
  {
23376
23734
  "title": "Custom Initial Position",
23377
- "code": "<ImageCompare BeforeSrc=\"before.jpg\" AfterSrc=\"after.jpg\"\r\n InitialPosition=\"25\" Height=\"280px\" />"
23735
+ "code": "<ImageCompare BeforeSrc=\"before.jpg\" AfterSrc=\"after.jpg\"\n InitialPosition=\"25\" Height=\"280px\" />"
23378
23736
  }
23379
23737
  ],
23380
23738
  "subComponents": {},
@@ -23607,7 +23965,7 @@
23607
23965
  "examples": [
23608
23966
  {
23609
23967
  "title": "Basic Inplace Edit",
23610
- "code": "<InplaceEditor @bind-Value=\"_name\" Placeholder=\"Click to edit...\" />\r\n\r\n@code {\r\n private string? _name = \"John Doe\";\r\n}"
23968
+ "code": "<InplaceEditor @bind-Value=\"_name\" Placeholder=\"Click to edit...\" />\n\n@code {\n private string? _name = \"John Doe\";\n}"
23611
23969
  },
23612
23970
  {
23613
23971
  "title": "With Save / Cancel Buttons",
@@ -23615,11 +23973,11 @@
23615
23973
  },
23616
23974
  {
23617
23975
  "title": "Textarea Mode",
23618
- "code": "<InplaceEditor @bind-Value=\"_bio\"\r\n EditMode=\"InplaceEditor.InplaceEditMode.Textarea\"\r\n Placeholder=\"Click to add a bio...\" />"
23976
+ "code": "<InplaceEditor @bind-Value=\"_bio\"\n EditMode=\"InplaceEditor.InplaceEditMode.Textarea\"\n Placeholder=\"Click to add a bio...\" />"
23619
23977
  },
23620
23978
  {
23621
23979
  "title": "Select Mode",
23622
- "code": "<InplaceEditor @bind-Value=\"_status\"\r\n EditMode=\"InplaceEditor.InplaceEditMode.Select\"\r\n SelectOptions=\"@_options\" />\r\n\r\n@code {\r\n private string? _status = \"Active\";\r\n private List<string> _options = new() { \"Active\", \"Inactive\", \"Pending\" };\r\n}"
23980
+ "code": "<InplaceEditor @bind-Value=\"_status\"\n EditMode=\"InplaceEditor.InplaceEditMode.Select\"\n SelectOptions=\"@_options\" />\n\n@code {\n private string? _status = \"Active\";\n private List<string> _options = new() { \"Active\", \"Inactive\", \"Pending\" };\n}"
23623
23981
  }
23624
23982
  ],
23625
23983
  "subComponents": {},
@@ -23829,7 +24187,7 @@
23829
24187
  },
23830
24188
  {
23831
24189
  "title": "With Binding",
23832
- "code": "<Input Value=\"@_name\" OnInput=\"@(e => _name = e.Value?.ToString() ?? \"\")\" placeholder=\"Enter your name\" />\r\n<Lumeo.Text Size=\"sm\" Color=\"muted\">Value: @_name</Lumeo.Text>\r\n\r\n@code {\r\n private string _name = \"\";\r\n}"
24190
+ "code": "<Input Value=\"@_name\" OnInput=\"@(e => _name = e.Value?.ToString() ?? \"\")\" placeholder=\"Enter your name\" />\n<Lumeo.Text Size=\"sm\" Color=\"muted\">Value: @_name</Lumeo.Text>\n\n@code {\n private string _name = \"\";\n}"
23833
24191
  },
23834
24192
  {
23835
24193
  "title": "File Input",
@@ -24076,7 +24434,7 @@
24076
24434
  "examples": [
24077
24435
  {
24078
24436
  "title": "Drag &amp; Drop Board",
24079
- "code": "<Kanban>\r\n <KanbanColumn Title=\"To Do\" Badge=\"3\">\r\n <KanbanCard Title=\"Design landing page\"\r\n Labels=\"@(new List<KanbanCard.KanbanLabel> { new() { Text = \"Design\", Color = \"primary\" } })\" />\r\n <KanbanCard Title=\"Write API docs\"\r\n Labels=\"@(new List<KanbanCard.KanbanLabel> { new() { Text = \"Docs\", Color = \"secondary\" } })\" />\r\n </KanbanColumn>\r\n <KanbanColumn Title=\"In Progress\" Badge=\"1\">\r\n <KanbanCard Title=\"Build auth flow\"\r\n Description=\"Login and register flow.\"\r\n Labels=\"@(new List<KanbanCard.KanbanLabel> { new() { Text = \"High\", Color = \"destructive\" } })\" />\r\n </KanbanColumn>\r\n <KanbanColumn Title=\"Done\" Badge=\"1\">\r\n <KanbanCard Title=\"Project setup\" Labels=\"@(new List<KanbanCard.KanbanLabel> { new() { Text = \"Done\", Color = \"success\" } })\" />\r\n </KanbanColumn>\r\n</Kanban>"
24437
+ "code": "<Kanban>\n <KanbanColumn Title=\"To Do\" Badge=\"3\">\n <KanbanCard Title=\"Design landing page\"\n Labels=\"@(new List<KanbanCard.KanbanLabel> { new() { Text = \"Design\", Color = \"primary\" } })\" />\n <KanbanCard Title=\"Write API docs\"\n Labels=\"@(new List<KanbanCard.KanbanLabel> { new() { Text = \"Docs\", Color = \"secondary\" } })\" />\n </KanbanColumn>\n <KanbanColumn Title=\"In Progress\" Badge=\"1\">\n <KanbanCard Title=\"Build auth flow\"\n Description=\"Login and register flow.\"\n Labels=\"@(new List<KanbanCard.KanbanLabel> { new() { Text = \"High\", Color = \"destructive\" } })\" />\n </KanbanColumn>\n <KanbanColumn Title=\"Done\" Badge=\"1\">\n <KanbanCard Title=\"Project setup\" Labels=\"@(new List<KanbanCard.KanbanLabel> { new() { Text = \"Done\", Color = \"success\" } })\" />\n </KanbanColumn>\n</Kanban>"
24080
24438
  },
24081
24439
  {
24082
24440
  "title": "With Add Card Button",
@@ -24084,7 +24442,7 @@
24084
24442
  },
24085
24443
  {
24086
24444
  "title": "Custom Header",
24087
- "code": "<KanbanColumn>\r\n <HeaderContent>\r\n <Flex Class=\"items-center gap-2\">\r\n <Lumeo.Text Class=\"text-sm font-medium\">Sprint 4</Lumeo.Text>\r\n <Badge Variant=\"Badge.BadgeVariant.Secondary\">5</Badge>\r\n </Flex>\r\n </HeaderContent>\r\n <KanbanCard Title=\"Task A\" />\r\n</KanbanColumn>"
24445
+ "code": "<KanbanColumn>\n <HeaderContent>\n <Flex Class=\"items-center gap-2\">\n <Lumeo.Text Class=\"text-sm font-medium\">Sprint 4</Lumeo.Text>\n <Badge Variant=\"Badge.BadgeVariant.Secondary\">5</Badge>\n </Flex>\n </HeaderContent>\n <KanbanCard Title=\"Task A\" />\n</KanbanColumn>"
24088
24446
  }
24089
24447
  ],
24090
24448
  "subComponents": {
@@ -24349,19 +24707,19 @@
24349
24707
  "examples": [
24350
24708
  {
24351
24709
  "title": "Default",
24352
- "code": "<Flex Align=\"center\" Gap=\"1\">\r\n <Kbd>Ctrl</Kbd>\r\n <Lumeo.Text As=\"span\" Size=\"sm\" Color=\"muted\">+</Lumeo.Text>\r\n <Kbd>K</Kbd>\r\n</Flex>"
24710
+ "code": "<Flex Align=\"center\" Gap=\"1\">\n <Kbd>Ctrl</Kbd>\n <Lumeo.Text As=\"span\" Size=\"sm\" Color=\"muted\">+</Lumeo.Text>\n <Kbd>K</Kbd>\n</Flex>"
24353
24711
  },
24354
24712
  {
24355
24713
  "title": "Sizes",
24356
- "code": "<Kbd Size=\"Kbd.KbdSize.Sm\">Ctrl</Kbd>\r\n<Kbd>Ctrl</Kbd>\r\n<Kbd Size=\"Kbd.KbdSize.Lg\">Ctrl</Kbd>"
24714
+ "code": "<Kbd Size=\"Kbd.KbdSize.Sm\">Ctrl</Kbd>\n<Kbd>Ctrl</Kbd>\n<Kbd Size=\"Kbd.KbdSize.Lg\">Ctrl</Kbd>"
24357
24715
  },
24358
24716
  {
24359
24717
  "title": "In Context",
24360
- "code": "<Flex Align=\"center\" Justify=\"between\" Class=\"rounded-md border px-3 py-2\">\r\n <Lumeo.Text As=\"span\" Size=\"sm\" Color=\"muted\">Open command palette</Lumeo.Text>\r\n <Flex Align=\"center\" Gap=\"1\">\r\n <Kbd>Ctrl</Kbd>\r\n <Lumeo.Text As=\"span\" Size=\"xs\" Color=\"muted\">+</Lumeo.Text>\r\n <Kbd>K</Kbd>\r\n </Flex>\r\n</Flex>"
24718
+ "code": "<Flex Align=\"center\" Justify=\"between\" Class=\"rounded-md border px-3 py-2\">\n <Lumeo.Text As=\"span\" Size=\"sm\" Color=\"muted\">Open command palette</Lumeo.Text>\n <Flex Align=\"center\" Gap=\"1\">\n <Kbd>Ctrl</Kbd>\n <Lumeo.Text As=\"span\" Size=\"xs\" Color=\"muted\">+</Lumeo.Text>\n <Kbd>K</Kbd>\n </Flex>\n</Flex>"
24361
24719
  },
24362
24720
  {
24363
24721
  "title": "Size — interactive",
24364
- "code": "<Kbd Size=\"Kbd.KbdSize.Sm\">Ctrl</Kbd>\r\n<Kbd>Ctrl</Kbd> @* Default *@\r\n<Kbd Size=\"Kbd.KbdSize.Lg\">Ctrl</Kbd>"
24722
+ "code": "<Kbd Size=\"Kbd.KbdSize.Sm\">Ctrl</Kbd>\n<Kbd>Ctrl</Kbd> @* Default *@\n<Kbd Size=\"Kbd.KbdSize.Lg\">Ctrl</Kbd>"
24365
24723
  }
24366
24724
  ],
24367
24725
  "subComponents": {},
@@ -24556,15 +24914,15 @@
24556
24914
  "examples": [
24557
24915
  {
24558
24916
  "title": "Default",
24559
- "code": "<Label>Email address</Label>\r\n<Input Type=\"email\" Placeholder=\"you@example.com\" />"
24917
+ "code": "<Label>Email address</Label>\n<Input Type=\"email\" Placeholder=\"you@example.com\" />"
24560
24918
  },
24561
24919
  {
24562
24920
  "title": "Required Field",
24563
- "code": "<Stack Gap=\"2\">\r\n <Flex Gap=\"1\" Align=\"center\">\r\n <Label>Email address</Label>\r\n <Lumeo.Text As=\"span\" Size=\"sm\" Color=\"destructive\">*</Lumeo.Text>\r\n </Flex>\r\n <Input type=\"email\" placeholder=\"you@example.com\" />\r\n <Lumeo.Text Size=\"xs\" Color=\"muted\">We'll never share your email.</Lumeo.Text>\r\n</Stack>\r\n<Stack Gap=\"2\">\r\n <Flex Align=\"center\" Justify=\"between\">\r\n <Label>Password</Label>\r\n <a href=\"#\" class=\"text-xs text-primary hover:underline\">Forgot password?</a>\r\n </Flex>\r\n <Input type=\"password\" placeholder=\"••••••••\" />\r\n</Stack>"
24921
+ "code": "<Stack Gap=\"2\">\n <Flex Gap=\"1\" Align=\"center\">\n <Label>Email address</Label>\n <Lumeo.Text As=\"span\" Size=\"sm\" Color=\"destructive\">*</Lumeo.Text>\n </Flex>\n <Input type=\"email\" placeholder=\"you@example.com\" />\n <Lumeo.Text Size=\"xs\" Color=\"muted\">We'll never share your email.</Lumeo.Text>\n</Stack>\n<Stack Gap=\"2\">\n <Flex Align=\"center\" Justify=\"between\">\n <Label>Password</Label>\n <a href=\"#\" class=\"text-xs text-primary hover:underline\">Forgot password?</a>\n </Flex>\n <Input type=\"password\" placeholder=\"••••••••\" />\n</Stack>"
24564
24922
  },
24565
24923
  {
24566
24924
  "title": "Multiple Fields",
24567
- "code": "<Stack Gap=\"2\">\r\n <Label>First name</Label>\r\n <Input Placeholder=\"John\" />\r\n</Stack>\r\n<Flex Gap=\"2\" Align=\"center\">\r\n <Checkbox @bind-Checked=\"_agreed\" />\r\n <Label>I agree to the terms and conditions</Label>\r\n</Flex>"
24925
+ "code": "<Stack Gap=\"2\">\n <Label>First name</Label>\n <Input Placeholder=\"John\" />\n</Stack>\n<Flex Gap=\"2\" Align=\"center\">\n <Checkbox @bind-Checked=\"_agreed\" />\n <Label>I agree to the terms and conditions</Label>\n</Flex>"
24568
24926
  }
24569
24927
  ],
24570
24928
  "subComponents": {},
@@ -24657,15 +25015,15 @@
24657
25015
  },
24658
25016
  {
24659
25017
  "title": "Variants",
24660
- "code": "<Link Href=\"#\" Variant=\"default\">Default</a>\r\n<Link Href=\"#\" Variant=\"muted\">Muted</a>\r\n<Link Href=\"#\" Variant=\"underline\">Underline</a>"
25018
+ "code": "<Link Href=\"#\" Variant=\"default\">Default</a>\n<Link Href=\"#\" Variant=\"muted\">Muted</a>\n<Link Href=\"#\" Variant=\"underline\">Underline</a>"
24661
25019
  },
24662
25020
  {
24663
25021
  "title": "External Link",
24664
- "code": "<Link Href=\"https://github.com\" External=\"true\">\r\n Visit GitHub\r\n</a>"
25022
+ "code": "<Link Href=\"https://github.com\" External=\"true\">\n Visit GitHub\n</a>"
24665
25023
  },
24666
25024
  {
24667
25025
  "title": "With Size",
24668
- "code": "<Link Href=\"#\" Size=\"xs\">Extra small</a>\r\n<Link Href=\"#\" Size=\"sm\">Small</a>\r\n<Link Href=\"#\">Default</a>\r\n<Link Href=\"#\" Size=\"lg\">Large</a>"
25026
+ "code": "<Link Href=\"#\" Size=\"xs\">Extra small</a>\n<Link Href=\"#\" Size=\"sm\">Small</a>\n<Link Href=\"#\">Default</a>\n<Link Href=\"#\" Size=\"lg\">Large</a>"
24669
25027
  }
24670
25028
  ],
24671
25029
  "subComponents": {},
@@ -24764,19 +25122,19 @@
24764
25122
  "examples": [
24765
25123
  {
24766
25124
  "title": "Basic List",
24767
- "code": "<List Bordered=\"true\">\r\n <ListItem Title=\"Alice Johnson\" Description=\"alice@example.com\" />\r\n <ListItem Title=\"Bob Smith\" Description=\"bob@example.com\" />\r\n <ListItem Title=\"Carol White\" Description=\"carol@example.com\" />\r\n</List>"
25125
+ "code": "<List Bordered=\"true\">\n <ListItem Title=\"Alice Johnson\" Description=\"alice@example.com\" />\n <ListItem Title=\"Bob Smith\" Description=\"bob@example.com\" />\n <ListItem Title=\"Carol White\" Description=\"carol@example.com\" />\n</List>"
24768
25126
  },
24769
25127
  {
24770
25128
  "title": "With Leading Icon",
24771
- "code": "<List Bordered=\"true\" Hoverable=\"true\">\r\n <ListItem Title=\"Inbox\" Description=\"12 unread\">\r\n <Leading><DynamicIcon Name=\"Inbox\" Class=\"h-5 w-5 text-muted-foreground\" /></Leading>\r\n </ListItem>\r\n <ListItem Title=\"Sent\">\r\n <Leading><DynamicIcon Name=\"Send\" Class=\"h-5 w-5 text-muted-foreground\" /></Leading>\r\n </ListItem>\r\n</List>"
25129
+ "code": "<List Bordered=\"true\" Hoverable=\"true\">\n <ListItem Title=\"Inbox\" Description=\"12 unread\">\n <Leading><DynamicIcon Name=\"Inbox\" Class=\"h-5 w-5 text-muted-foreground\" /></Leading>\n </ListItem>\n <ListItem Title=\"Sent\">\n <Leading><DynamicIcon Name=\"Send\" Class=\"h-5 w-5 text-muted-foreground\" /></Leading>\n </ListItem>\n</List>"
24772
25130
  },
24773
25131
  {
24774
25132
  "title": "With Trailing Content",
24775
- "code": "<List Bordered=\"true\">\r\n <ListItem Title=\"Notifications\">\r\n <Leading><DynamicIcon Name=\"Bell\" Class=\"h-5 w-5 text-muted-foreground\" /></Leading>\r\n <Trailing><Badge Variant=\"Badge.BadgeVariant.Default\">3</Badge></Trailing>\r\n </ListItem>\r\n <ListItem Title=\"Settings\">\r\n <Leading><DynamicIcon Name=\"Settings\" Class=\"h-5 w-5 text-muted-foreground\" /></Leading>\r\n <Trailing><DynamicIcon Name=\"ChevronRight\" Class=\"h-4 w-4 text-muted-foreground\" /></Trailing>\r\n </ListItem>\r\n</List>"
25133
+ "code": "<List Bordered=\"true\">\n <ListItem Title=\"Notifications\">\n <Leading><DynamicIcon Name=\"Bell\" Class=\"h-5 w-5 text-muted-foreground\" /></Leading>\n <Trailing><Badge Variant=\"Badge.BadgeVariant.Default\">3</Badge></Trailing>\n </ListItem>\n <ListItem Title=\"Settings\">\n <Leading><DynamicIcon Name=\"Settings\" Class=\"h-5 w-5 text-muted-foreground\" /></Leading>\n <Trailing><DynamicIcon Name=\"ChevronRight\" Class=\"h-4 w-4 text-muted-foreground\" /></Trailing>\n </ListItem>\n</List>"
24776
25134
  },
24777
25135
  {
24778
25136
  "title": "Sizes",
24779
- "code": "<List Bordered=\"true\" Size=\"List.ListSize.Sm\">...</List>\r\n<List Bordered=\"true\">...</List>\r\n<List Bordered=\"true\" Size=\"List.ListSize.Lg\">...</List>"
25137
+ "code": "<List Bordered=\"true\" Size=\"List.ListSize.Sm\">...</List>\n<List Bordered=\"true\">...</List>\n<List Bordered=\"true\" Size=\"List.ListSize.Lg\">...</List>"
24780
25138
  }
24781
25139
  ],
24782
25140
  "subComponents": {
@@ -25093,15 +25451,15 @@
25093
25451
  "examples": [
25094
25452
  {
25095
25453
  "title": "Basic Mega Menu",
25096
- "code": "<MegaMenu>\r\n <MegaMenuItem Label=\"Products\">\r\n <MegaMenuPanel Columns=\"3\">\r\n <MegaMenuGroup Title=\"Design\">\r\n <MegaMenuLink Href=\"/components\" Title=\"Components\" Description=\"Pre-built UI components\" />\r\n <MegaMenuLink Href=\"/templates\" Title=\"Templates\" Description=\"Starter templates\" />\r\n </MegaMenuGroup>\r\n <MegaMenuGroup Title=\"Development\">\r\n <MegaMenuLink Href=\"/docs\" Title=\"Documentation\" Description=\"Full API reference\" />\r\n </MegaMenuGroup>\r\n </MegaMenuPanel>\r\n </MegaMenuItem>\r\n <MegaMenuItem Label=\"Pricing\" Href=\"/pricing\" />\r\n</MegaMenu>"
25454
+ "code": "<MegaMenu>\n <MegaMenuItem Label=\"Products\">\n <MegaMenuPanel Columns=\"3\">\n <MegaMenuGroup Title=\"Design\">\n <MegaMenuLink Href=\"/components\" Title=\"Components\" Description=\"Pre-built UI components\" />\n <MegaMenuLink Href=\"/templates\" Title=\"Templates\" Description=\"Starter templates\" />\n </MegaMenuGroup>\n <MegaMenuGroup Title=\"Development\">\n <MegaMenuLink Href=\"/docs\" Title=\"Documentation\" Description=\"Full API reference\" />\n </MegaMenuGroup>\n </MegaMenuPanel>\n </MegaMenuItem>\n <MegaMenuItem Label=\"Pricing\" Href=\"/pricing\" />\n</MegaMenu>"
25097
25455
  },
25098
25456
  {
25099
25457
  "title": "Single Column Panel",
25100
- "code": "<MegaMenu>\r\n <MegaMenuItem Label=\"Company\">\r\n <MegaMenuPanel Columns=\"1\" FullWidth=\"false\">\r\n <MegaMenuGroup>\r\n <MegaMenuLink Href=\"/about\" Title=\"About Us\" />\r\n <MegaMenuLink Href=\"/careers\" Title=\"Careers\" />\r\n </MegaMenuGroup>\r\n </MegaMenuPanel>\r\n </MegaMenuItem>\r\n</MegaMenu>"
25458
+ "code": "<MegaMenu>\n <MegaMenuItem Label=\"Company\">\n <MegaMenuPanel Columns=\"1\" FullWidth=\"false\">\n <MegaMenuGroup>\n <MegaMenuLink Href=\"/about\" Title=\"About Us\" />\n <MegaMenuLink Href=\"/careers\" Title=\"Careers\" />\n </MegaMenuGroup>\n </MegaMenuPanel>\n </MegaMenuItem>\n</MegaMenu>"
25101
25459
  },
25102
25460
  {
25103
25461
  "title": "Orientation — interactive",
25104
- "code": "<Segmented @bind-Value=\"_orientationSel\" Options=\"_orientationOptions\" />\r\n<MegaMenu Orientation=\"@_activeMegaMenuOrientation\">\r\n <MegaMenuItem Label=\"Products\">\r\n <MegaMenuPanel Columns=\"2\">\r\n <MegaMenuGroup Title=\"Design\">\r\n <MegaMenuLink Href=\"#\" Title=\"Components\" Description=\"Pre-built UI components\" />\r\n </MegaMenuGroup>\r\n <MegaMenuGroup Title=\"Development\">\r\n <MegaMenuLink Href=\"#\" Title=\"CLI\" Description=\"Command-line tooling\" />\r\n </MegaMenuGroup>\r\n </MegaMenuPanel>\r\n </MegaMenuItem>\r\n <MegaMenuItem Label=\"Docs\" Href=\"#\" />\r\n</MegaMenu>\r\n\r\n@code {\r\n private string _orientationSel = \"Horizontal\";\r\n private MegaMenu.MegaMenuOrientation _activeMegaMenuOrientation =>\r\n Enum.Parse<MegaMenu.MegaMenuOrientation>(_orientationSel);\r\n private List<Segmented.SegmentedOption> _orientationOptions = new()\r\n {\r\n new() { Label = \"Horizontal\", Value = \"Horizontal\" },\r\n new() { Label = \"Vertical\", Value = \"Vertical\" },\r\n };\r\n}"
25462
+ "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}"
25105
25463
  }
25106
25464
  ],
25107
25465
  "subComponents": {
@@ -25557,6 +25915,10 @@
25557
25915
  {
25558
25916
  "title": "Custom Trigger",
25559
25917
  "code": "<Mention @bind-Value=\"_text\" Options=\"@_channels\" Trigger='#' />"
25918
+ },
25919
+ {
25920
+ "title": "Trigger Character",
25921
+ "code": "<Segmented @bind-Value=\"_mentionTriggerStr\">\n <SegmentedItem Value=\"@\">@@</SegmentedItem>\n <SegmentedItem Value=\"#\">#</SegmentedItem>\n <SegmentedItem Value=\"/\"> /</SegmentedItem>\n</Segmented>\n\n<Mention @bind-Value=\"_text\"\n Options=\"@GetOptionsForTrigger(_mentionTriggerStr)\"\n Trigger=\"@(_mentionTriggerStr[0])\"\n Placeholder=\"@($\\\"Type {_mentionTriggerStr} to trigger suggestions...\\\")\" />\n\n@code {\n private string _mentionTriggerStr = \"@\";\n private string? _text;\n}"
25560
25922
  }
25561
25923
  ],
25562
25924
  "subComponents": {},
@@ -25613,7 +25975,7 @@
25613
25975
  "records": [
25614
25976
  {
25615
25977
  "name": "MenubarContext",
25616
- "signature": "MenubarContext(\r\n string? OpenMenuId,\r\n EventCallback<string?> SetOpenMenuId,\r\n bool AnyOpen,\r\n List<string> MenuIds,\r\n Action<string> RegisterMenuId,\r\n Action<int> NavigateMenus)",
25978
+ "signature": "MenubarContext(\n string? OpenMenuId,\n EventCallback<string?> SetOpenMenuId,\n bool AnyOpen,\n List<string> MenuIds,\n Action<string> RegisterMenuId,\n Action<int> NavigateMenus)",
25617
25979
  "description": null
25618
25980
  }
25619
25981
  ],
@@ -25631,19 +25993,19 @@
25631
25993
  "examples": [
25632
25994
  {
25633
25995
  "title": "Default",
25634
- "code": "<Menubar>\r\n <MenubarMenu>\r\n <MenubarTrigger>File</MenubarTrigger>\r\n <MenubarContent>\r\n <MenubarItem>\r\n New Tab <MenubarShortcut>Ctrl+T</MenubarShortcut>\r\n </MenubarItem>\r\n <MenubarItem>\r\n New Window <MenubarShortcut>Ctrl+N</MenubarShortcut>\r\n </MenubarItem>\r\n <MenubarSeparator />\r\n <MenubarItem>\r\n Share <MenubarShortcut>Ctrl+S</MenubarShortcut>\r\n </MenubarItem>\r\n <MenubarSeparator />\r\n <MenubarItem>\r\n Print <MenubarShortcut>Ctrl+P</MenubarShortcut>\r\n </MenubarItem>\r\n </MenubarContent>\r\n </MenubarMenu>\r\n <MenubarMenu>\r\n <MenubarTrigger>Edit</MenubarTrigger>\r\n <MenubarContent>\r\n <MenubarItem>\r\n Undo <MenubarShortcut>Ctrl+Z</MenubarShortcut>\r\n </MenubarItem>\r\n <MenubarItem>\r\n Redo <MenubarShortcut>Ctrl+Y</MenubarShortcut>\r\n </MenubarItem>\r\n <MenubarSeparator />\r\n <MenubarItem>\r\n Cut <MenubarShortcut>Ctrl+X</MenubarShortcut>\r\n </MenubarItem>\r\n <MenubarItem>\r\n Copy <MenubarShortcut>Ctrl+C</MenubarShortcut>\r\n </MenubarItem>\r\n <MenubarItem>\r\n Paste <MenubarShortcut>Ctrl+V</MenubarShortcut>\r\n </MenubarItem>\r\n </MenubarContent>\r\n </MenubarMenu>\r\n <MenubarMenu>\r\n <MenubarTrigger>View</MenubarTrigger>\r\n <MenubarContent>\r\n <MenubarItem>\r\n Zoom In <MenubarShortcut>Ctrl++</MenubarShortcut>\r\n </MenubarItem>\r\n <MenubarItem>\r\n Zoom Out <MenubarShortcut>Ctrl+-</MenubarShortcut>\r\n </MenubarItem>\r\n <MenubarSeparator />\r\n <MenubarItem>Toggle Fullscreen</MenubarItem>\r\n </MenubarContent>\r\n </MenubarMenu>\r\n</Menubar>"
25996
+ "code": "<Menubar>\n <MenubarMenu>\n <MenubarTrigger>File</MenubarTrigger>\n <MenubarContent>\n <MenubarItem>\n New Tab <MenubarShortcut>Ctrl+T</MenubarShortcut>\n </MenubarItem>\n <MenubarItem>\n New Window <MenubarShortcut>Ctrl+N</MenubarShortcut>\n </MenubarItem>\n <MenubarSeparator />\n <MenubarItem>\n Share <MenubarShortcut>Ctrl+S</MenubarShortcut>\n </MenubarItem>\n <MenubarSeparator />\n <MenubarItem>\n Print <MenubarShortcut>Ctrl+P</MenubarShortcut>\n </MenubarItem>\n </MenubarContent>\n </MenubarMenu>\n <MenubarMenu>\n <MenubarTrigger>Edit</MenubarTrigger>\n <MenubarContent>\n <MenubarItem>\n Undo <MenubarShortcut>Ctrl+Z</MenubarShortcut>\n </MenubarItem>\n <MenubarItem>\n Redo <MenubarShortcut>Ctrl+Y</MenubarShortcut>\n </MenubarItem>\n <MenubarSeparator />\n <MenubarItem>\n Cut <MenubarShortcut>Ctrl+X</MenubarShortcut>\n </MenubarItem>\n <MenubarItem>\n Copy <MenubarShortcut>Ctrl+C</MenubarShortcut>\n </MenubarItem>\n <MenubarItem>\n Paste <MenubarShortcut>Ctrl+V</MenubarShortcut>\n </MenubarItem>\n </MenubarContent>\n </MenubarMenu>\n <MenubarMenu>\n <MenubarTrigger>View</MenubarTrigger>\n <MenubarContent>\n <MenubarItem>\n Zoom In <MenubarShortcut>Ctrl++</MenubarShortcut>\n </MenubarItem>\n <MenubarItem>\n Zoom Out <MenubarShortcut>Ctrl+-</MenubarShortcut>\n </MenubarItem>\n <MenubarSeparator />\n <MenubarItem>Toggle Fullscreen</MenubarItem>\n </MenubarContent>\n </MenubarMenu>\n</Menubar>"
25635
25997
  },
25636
25998
  {
25637
25999
  "title": "With Labels and Disabled Items",
25638
- "code": "<Menubar>\r\n <MenubarMenu>\r\n <MenubarTrigger>Account</MenubarTrigger>\r\n <MenubarContent>\r\n <MenubarLabel>My Account</MenubarLabel>\r\n <MenubarSeparator />\r\n <MenubarItem>Profile</MenubarItem>\r\n <MenubarItem>Settings</MenubarItem>\r\n <MenubarItem>Billing</MenubarItem>\r\n <MenubarSeparator />\r\n <MenubarItem Disabled=\"true\">Invite Team (Pro)</MenubarItem>\r\n </MenubarContent>\r\n </MenubarMenu>\r\n <MenubarMenu>\r\n <MenubarTrigger>Help</MenubarTrigger>\r\n <MenubarContent>\r\n <MenubarItem>Documentation</MenubarItem>\r\n <MenubarItem>Release Notes</MenubarItem>\r\n <MenubarSeparator />\r\n <MenubarItem>About</MenubarItem>\r\n </MenubarContent>\r\n </MenubarMenu>\r\n</Menubar>"
26000
+ "code": "<Menubar>\n <MenubarMenu>\n <MenubarTrigger>Account</MenubarTrigger>\n <MenubarContent>\n <MenubarLabel>My Account</MenubarLabel>\n <MenubarSeparator />\n <MenubarItem>Profile</MenubarItem>\n <MenubarItem>Settings</MenubarItem>\n <MenubarItem>Billing</MenubarItem>\n <MenubarSeparator />\n <MenubarItem Disabled=\"true\">Invite Team (Pro)</MenubarItem>\n </MenubarContent>\n </MenubarMenu>\n <MenubarMenu>\n <MenubarTrigger>Help</MenubarTrigger>\n <MenubarContent>\n <MenubarItem>Documentation</MenubarItem>\n <MenubarItem>Release Notes</MenubarItem>\n <MenubarSeparator />\n <MenubarItem>About</MenubarItem>\n </MenubarContent>\n </MenubarMenu>\n</Menubar>"
25639
26001
  },
25640
26002
  {
25641
26003
  "title": "Keyboard Navigation",
25642
- "code": "<Menubar>\r\n <MenubarMenu>\r\n <MenubarTrigger>File</MenubarTrigger>\r\n <MenubarContent>\r\n <MenubarItem>New Tab <MenubarShortcut>Ctrl+T</MenubarShortcut></MenubarItem>\r\n <MenubarItem>New Window <MenubarShortcut>Ctrl+N</MenubarShortcut></MenubarItem>\r\n <MenubarSeparator />\r\n <MenubarItem>Print <MenubarShortcut>Ctrl+P</MenubarShortcut></MenubarItem>\r\n </MenubarContent>\r\n </MenubarMenu>\r\n <MenubarMenu>\r\n <MenubarTrigger>Edit</MenubarTrigger>\r\n <MenubarContent>\r\n <MenubarItem>Undo <MenubarShortcut>Ctrl+Z</MenubarShortcut></MenubarItem>\r\n <MenubarItem>Redo <MenubarShortcut>Ctrl+Y</MenubarShortcut></MenubarItem>\r\n <MenubarSeparator />\r\n <MenubarItem>Cut <MenubarShortcut>Ctrl+X</MenubarShortcut></MenubarItem>\r\n <MenubarItem>Copy <MenubarShortcut>Ctrl+C</MenubarShortcut></MenubarItem>\r\n <MenubarItem>Paste <MenubarShortcut>Ctrl+V</MenubarShortcut></MenubarItem>\r\n </MenubarContent>\r\n </MenubarMenu>\r\n <MenubarMenu>\r\n <MenubarTrigger>View</MenubarTrigger>\r\n <MenubarContent>\r\n <MenubarItem>Zoom In <MenubarShortcut>Ctrl++</MenubarShortcut></MenubarItem>\r\n <MenubarItem>Zoom Out <MenubarShortcut>Ctrl+-</MenubarShortcut></MenubarItem>\r\n <MenubarSeparator />\r\n <MenubarItem>Full Screen <MenubarShortcut>F11</MenubarShortcut></MenubarItem>\r\n </MenubarContent>\r\n </MenubarMenu>\r\n</Menubar>"
26004
+ "code": "<Menubar>\n <MenubarMenu>\n <MenubarTrigger>File</MenubarTrigger>\n <MenubarContent>\n <MenubarItem>New Tab <MenubarShortcut>Ctrl+T</MenubarShortcut></MenubarItem>\n <MenubarItem>New Window <MenubarShortcut>Ctrl+N</MenubarShortcut></MenubarItem>\n <MenubarSeparator />\n <MenubarItem>Print <MenubarShortcut>Ctrl+P</MenubarShortcut></MenubarItem>\n </MenubarContent>\n </MenubarMenu>\n <MenubarMenu>\n <MenubarTrigger>Edit</MenubarTrigger>\n <MenubarContent>\n <MenubarItem>Undo <MenubarShortcut>Ctrl+Z</MenubarShortcut></MenubarItem>\n <MenubarItem>Redo <MenubarShortcut>Ctrl+Y</MenubarShortcut></MenubarItem>\n <MenubarSeparator />\n <MenubarItem>Cut <MenubarShortcut>Ctrl+X</MenubarShortcut></MenubarItem>\n <MenubarItem>Copy <MenubarShortcut>Ctrl+C</MenubarShortcut></MenubarItem>\n <MenubarItem>Paste <MenubarShortcut>Ctrl+V</MenubarShortcut></MenubarItem>\n </MenubarContent>\n </MenubarMenu>\n <MenubarMenu>\n <MenubarTrigger>View</MenubarTrigger>\n <MenubarContent>\n <MenubarItem>Zoom In <MenubarShortcut>Ctrl++</MenubarShortcut></MenubarItem>\n <MenubarItem>Zoom Out <MenubarShortcut>Ctrl+-</MenubarShortcut></MenubarItem>\n <MenubarSeparator />\n <MenubarItem>Full Screen <MenubarShortcut>F11</MenubarShortcut></MenubarItem>\n </MenubarContent>\n </MenubarMenu>\n</Menubar>"
25643
26005
  },
25644
26006
  {
25645
26007
  "title": "Text Editor",
25646
- "code": "<Menubar>\r\n <MenubarMenu>\r\n <MenubarTrigger>Format</MenubarTrigger>\r\n <MenubarContent>\r\n <MenubarLabel>Text</MenubarLabel>\r\n <MenubarItem>Bold <MenubarShortcut>Ctrl+B</MenubarShortcut></MenubarItem>\r\n <MenubarItem>Italic <MenubarShortcut>Ctrl+I</MenubarShortcut></MenubarItem>\r\n <MenubarItem>Underline <MenubarShortcut>Ctrl+U</MenubarShortcut></MenubarItem>\r\n <MenubarSeparator />\r\n <MenubarLabel>Alignment</MenubarLabel>\r\n <MenubarItem>Align Left</MenubarItem>\r\n <MenubarItem>Align Center</MenubarItem>\r\n <MenubarItem>Align Right</MenubarItem>\r\n </MenubarContent>\r\n </MenubarMenu>\r\n <MenubarMenu>\r\n <MenubarTrigger>Insert</MenubarTrigger>\r\n <MenubarContent>\r\n <MenubarItem>Image</MenubarItem>\r\n <MenubarItem>Table</MenubarItem>\r\n <MenubarItem>Link</MenubarItem>\r\n <MenubarSeparator />\r\n <MenubarItem Disabled=\"true\">Video (Pro)</MenubarItem>\r\n </MenubarContent>\r\n </MenubarMenu>\r\n <MenubarMenu>\r\n <MenubarTrigger>Tools</MenubarTrigger>\r\n <MenubarContent>\r\n <MenubarItem>Word Count <MenubarShortcut>Ctrl+W</MenubarShortcut></MenubarItem>\r\n <MenubarItem>Spell Check</MenubarItem>\r\n </MenubarContent>\r\n </MenubarMenu>\r\n</Menubar>"
26008
+ "code": "<Menubar>\n <MenubarMenu>\n <MenubarTrigger>Format</MenubarTrigger>\n <MenubarContent>\n <MenubarLabel>Text</MenubarLabel>\n <MenubarItem>Bold <MenubarShortcut>Ctrl+B</MenubarShortcut></MenubarItem>\n <MenubarItem>Italic <MenubarShortcut>Ctrl+I</MenubarShortcut></MenubarItem>\n <MenubarItem>Underline <MenubarShortcut>Ctrl+U</MenubarShortcut></MenubarItem>\n <MenubarSeparator />\n <MenubarLabel>Alignment</MenubarLabel>\n <MenubarItem>Align Left</MenubarItem>\n <MenubarItem>Align Center</MenubarItem>\n <MenubarItem>Align Right</MenubarItem>\n </MenubarContent>\n </MenubarMenu>\n <MenubarMenu>\n <MenubarTrigger>Insert</MenubarTrigger>\n <MenubarContent>\n <MenubarItem>Image</MenubarItem>\n <MenubarItem>Table</MenubarItem>\n <MenubarItem>Link</MenubarItem>\n <MenubarSeparator />\n <MenubarItem Disabled=\"true\">Video (Pro)</MenubarItem>\n </MenubarContent>\n </MenubarMenu>\n <MenubarMenu>\n <MenubarTrigger>Tools</MenubarTrigger>\n <MenubarContent>\n <MenubarItem>Word Count <MenubarShortcut>Ctrl+W</MenubarShortcut></MenubarItem>\n <MenubarItem>Spell Check</MenubarItem>\n </MenubarContent>\n </MenubarMenu>\n</Menubar>"
25647
26009
  }
25648
26010
  ],
25649
26011
  "subComponents": {
@@ -26055,15 +26417,15 @@
26055
26417
  "examples": [
26056
26418
  {
26057
26419
  "title": "Default",
26058
- "code": "<NavigationMenu>\r\n <NavigationMenuList>\r\n <NavigationMenuItem>\r\n <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>\r\n <NavigationMenuContent>\r\n <div class=\"grid gap-3 w-[400px] md:grid-cols-2\">\r\n <NavigationMenuLink Href=\"#\">\r\n <Lumeo.Text Size=\"sm\" Weight=\"medium\">Introduction</Lumeo.Text>\r\n <Lumeo.Text Size=\"sm\" Color=\"muted\" Class=\"mt-1\">\r\n Learn the basics of building with Lumeo.\r\n </Lumeo.Text>\r\n </NavigationMenuLink>\r\n <NavigationMenuLink Href=\"#\">\r\n <Lumeo.Text Size=\"sm\" Weight=\"medium\">Installation</Lumeo.Text>\r\n <Lumeo.Text Size=\"sm\" Color=\"muted\" Class=\"mt-1\">\r\n Add Lumeo to your Blazor project.\r\n </Lumeo.Text>\r\n </NavigationMenuLink>\r\n </div>\r\n </NavigationMenuContent>\r\n </NavigationMenuItem>\r\n <NavigationMenuItem>\r\n <NavigationMenuTrigger>Components</NavigationMenuTrigger>\r\n <NavigationMenuContent>\r\n <div class=\"grid gap-3 w-[400px] md:grid-cols-2\">\r\n <NavigationMenuLink Href=\"#\">\r\n <Lumeo.Text Size=\"sm\" Weight=\"medium\">Button</Lumeo.Text>\r\n <Lumeo.Text Size=\"sm\" Color=\"muted\" Class=\"mt-1\">\r\n Trigger actions or navigation events.\r\n </Lumeo.Text>\r\n </NavigationMenuLink>\r\n </div>\r\n </NavigationMenuContent>\r\n </NavigationMenuItem>\r\n <NavigationMenuItem>\r\n <NavigationMenuLink Href=\"#\">\r\n Documentation\r\n </NavigationMenuLink>\r\n </NavigationMenuItem>\r\n </NavigationMenuList>\r\n</NavigationMenu>"
26420
+ "code": "<NavigationMenu>\n <NavigationMenuList>\n <NavigationMenuItem>\n <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>\n <NavigationMenuContent>\n <div class=\"grid gap-3 w-[400px] md:grid-cols-2\">\n <NavigationMenuLink Href=\"#\">\n <Lumeo.Text Size=\"sm\" Weight=\"medium\">Introduction</Lumeo.Text>\n <Lumeo.Text Size=\"sm\" Color=\"muted\" Class=\"mt-1\">\n Learn the basics of building with Lumeo.\n </Lumeo.Text>\n </NavigationMenuLink>\n <NavigationMenuLink Href=\"#\">\n <Lumeo.Text Size=\"sm\" Weight=\"medium\">Installation</Lumeo.Text>\n <Lumeo.Text Size=\"sm\" Color=\"muted\" Class=\"mt-1\">\n Add Lumeo to your Blazor project.\n </Lumeo.Text>\n </NavigationMenuLink>\n </div>\n </NavigationMenuContent>\n </NavigationMenuItem>\n <NavigationMenuItem>\n <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n <NavigationMenuContent>\n <div class=\"grid gap-3 w-[400px] md:grid-cols-2\">\n <NavigationMenuLink Href=\"#\">\n <Lumeo.Text Size=\"sm\" Weight=\"medium\">Button</Lumeo.Text>\n <Lumeo.Text Size=\"sm\" Color=\"muted\" Class=\"mt-1\">\n Trigger actions or navigation events.\n </Lumeo.Text>\n </NavigationMenuLink>\n </div>\n </NavigationMenuContent>\n </NavigationMenuItem>\n <NavigationMenuItem>\n <NavigationMenuLink Href=\"#\">\n Documentation\n </NavigationMenuLink>\n </NavigationMenuItem>\n </NavigationMenuList>\n</NavigationMenu>"
26059
26421
  },
26060
26422
  {
26061
26423
  "title": "Simple Links",
26062
- "code": "<NavigationMenu>\r\n <NavigationMenuList>\r\n <NavigationMenuItem>\r\n <NavigationMenuLink Href=\"#\" Class=\"...\">Home</NavigationMenuLink>\r\n </NavigationMenuItem>\r\n <NavigationMenuItem>\r\n <NavigationMenuLink Href=\"#\" Class=\"...\">About</NavigationMenuLink>\r\n </NavigationMenuItem>\r\n <NavigationMenuItem>\r\n <NavigationMenuLink Href=\"#\" Class=\"...\">Blog</NavigationMenuLink>\r\n </NavigationMenuItem>\r\n <NavigationMenuItem>\r\n <NavigationMenuLink Href=\"#\" Class=\"...\">Contact</NavigationMenuLink>\r\n </NavigationMenuItem>\r\n </NavigationMenuList>\r\n</NavigationMenu>"
26424
+ "code": "<NavigationMenu>\n <NavigationMenuList>\n <NavigationMenuItem>\n <NavigationMenuLink Href=\"#\" Class=\"...\">Home</NavigationMenuLink>\n </NavigationMenuItem>\n <NavigationMenuItem>\n <NavigationMenuLink Href=\"#\" Class=\"...\">About</NavigationMenuLink>\n </NavigationMenuItem>\n <NavigationMenuItem>\n <NavigationMenuLink Href=\"#\" Class=\"...\">Blog</NavigationMenuLink>\n </NavigationMenuItem>\n <NavigationMenuItem>\n <NavigationMenuLink Href=\"#\" Class=\"...\">Contact</NavigationMenuLink>\n </NavigationMenuItem>\n </NavigationMenuList>\n</NavigationMenu>"
26063
26425
  },
26064
26426
  {
26065
26427
  "title": "With Badge",
26066
- "code": "<NavigationMenu>\r\n <NavigationMenuList>\r\n <NavigationMenuItem>\r\n <NavigationMenuTrigger>Products</NavigationMenuTrigger>\r\n <NavigationMenuContent>\r\n <NavigationMenuLink Href=\"#\">\r\n <Flex Align=\"center\" Gap=\"2\">\r\n <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"medium\">Analytics</Lumeo.Text>\r\n <Badge>New</Badge>\r\n </Flex>\r\n </NavigationMenuLink>\r\n <NavigationMenuLink Href=\"#\">\r\n <Flex Align=\"center\" Gap=\"2\">\r\n <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"medium\">API</Lumeo.Text>\r\n <Badge Variant=\"Badge.BadgeVariant.Secondary\">Beta</Badge>\r\n </Flex>\r\n </NavigationMenuLink>\r\n </NavigationMenuContent>\r\n </NavigationMenuItem>\r\n </NavigationMenuList>\r\n</NavigationMenu>"
26428
+ "code": "<NavigationMenu>\n <NavigationMenuList>\n <NavigationMenuItem>\n <NavigationMenuTrigger>Products</NavigationMenuTrigger>\n <NavigationMenuContent>\n <NavigationMenuLink Href=\"#\">\n <Flex Align=\"center\" Gap=\"2\">\n <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"medium\">Analytics</Lumeo.Text>\n <Badge>New</Badge>\n </Flex>\n </NavigationMenuLink>\n <NavigationMenuLink Href=\"#\">\n <Flex Align=\"center\" Gap=\"2\">\n <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"medium\">API</Lumeo.Text>\n <Badge Variant=\"Badge.BadgeVariant.Secondary\">Beta</Badge>\n </Flex>\n </NavigationMenuLink>\n </NavigationMenuContent>\n </NavigationMenuItem>\n </NavigationMenuList>\n</NavigationMenu>"
26067
26429
  }
26068
26430
  ],
26069
26431
  "subComponents": {
@@ -27091,15 +27453,15 @@
27091
27453
  },
27092
27454
  {
27093
27455
  "title": "2FA Verification",
27094
- "code": "<Card>\r\n <CardHeader>\r\n <Heading Level=\"3\">Two-factor authentication</Heading>\r\n <Lumeo.Text Size=\"sm\" Color=\"muted\">Enter the 6-digit code from your authenticator app.</Lumeo.Text>\r\n </CardHeader>\r\n <CardContent>\r\n <OtpInput @bind-Value=\"_tfaValue\" OnComplete=\"HandleTfa\" />\r\n @if (_tfaVerified)\r\n {\r\n <Badge Variant=\"Badge.BadgeVariant.Success\">Verified</Badge>\r\n }\r\n </CardContent>\r\n <CardFooter>\r\n <Button Class=\"w-full\" Disabled=\"@(_tfaValue.Length < 6)\">Verify</Button>\r\n </CardFooter>\r\n</Card>"
27456
+ "code": "<Card>\n <CardHeader>\n <Heading Level=\"3\">Two-factor authentication</Heading>\n <Lumeo.Text Size=\"sm\" Color=\"muted\">Enter the 6-digit code from your authenticator app.</Lumeo.Text>\n </CardHeader>\n <CardContent>\n <OtpInput @bind-Value=\"_tfaValue\" OnComplete=\"HandleTfa\" />\n @if (_tfaVerified)\n {\n <Badge Variant=\"Badge.BadgeVariant.Success\">Verified</Badge>\n }\n </CardContent>\n <CardFooter>\n <Button Class=\"w-full\" Disabled=\"@(_tfaValue.Length < 6)\">Verify</Button>\n </CardFooter>\n</Card>"
27095
27457
  },
27096
27458
  {
27097
27459
  "title": "4 Digit Code",
27098
27460
  "code": "<OtpInput @bind-Value=\"_otp\" Length=\"4\" />"
27099
27461
  },
27100
27462
  {
27101
- "title": "Paste Support",
27102
- "code": "<Lumeo.Text Size=\"sm\" Color=\"muted\">Try pasting a code like \"123456\" into any field</Lumeo.Text>\r\n<OtpInput Length=\"6\" @bind-Value=\"_pasteOtp\" OnComplete=\"@HandlePasteComplete\" />\r\n@if (!string.IsNullOrEmpty(_pasteResult))\r\n{\r\n <Lumeo.Text Size=\"sm\" Class=\"text-green-600\">Pasted code: @_pasteResult</Lumeo.Text>\r\n}\r\n\r\n@code {\r\n private string _pasteOtp = \"\";\r\n private string _pasteResult = \"\";\r\n private void HandlePasteComplete(string code)\r\n {\r\n _pasteResult = code;\r\n }\r\n}"
27463
+ "title": "Variable Length",
27464
+ "code": "<Segmented @bind-Value=\"_otpLength\">\n <SegmentedItem Value=\"4\">4 digits</SegmentedItem>\n <SegmentedItem Value=\"6\">6 digits</SegmentedItem>\n <SegmentedItem Value=\"8\">8 digits</SegmentedItem>\n</Segmented>\n\n<OtpInput Length=\"@(int.Parse(_otpLength))\" Value=\"@_otpValue\" ValueChanged=\"@(v => _otpValue = v)\" />\n\n@if (!string.IsNullOrEmpty(_otpValue))\n{\n <Lumeo.Text Size=\"sm\" Color=\"muted\">Value: @_otpValue</Lumeo.Text>\n}\n\n@code {\n private string _otpLength = \"6\";\n private string _otpValue = \"\";\n}"
27103
27465
  }
27104
27466
  ],
27105
27467
  "subComponents": {},
@@ -27202,15 +27564,19 @@
27202
27564
  "examples": [
27203
27565
  {
27204
27566
  "title": "Default",
27205
- "code": "<Pagination>\r\n <PaginationContent>\r\n <PaginationPrevious OnClick=\"@(() => GoToPage(_currentPage - 1))\"\r\n Disabled=\"@(_currentPage <= 1)\" />\r\n @for (int i = 1; i <= _totalPages; i++)\r\n {\r\n var page = i;\r\n <PaginationItem IsActive=\"@(page == _currentPage)\"\r\n OnClick=\"@(() => GoToPage(page))\">\r\n @page\r\n </PaginationItem>\r\n }\r\n <PaginationNext OnClick=\"@(() => GoToPage(_currentPage + 1))\"\r\n Disabled=\"@(_currentPage >= _totalPages)\" />\r\n </PaginationContent>\r\n</Pagination>\r\n\r\n@code {\r\n private int _currentPage = 1;\r\n private int _totalPages = 5;\r\n\r\n private void GoToPage(int page)\r\n {\r\n if (page >= 1 && page <= _totalPages)\r\n _currentPage = page;\r\n }\r\n}"
27567
+ "code": "<Pagination>\n <PaginationContent>\n <PaginationPrevious OnClick=\"@(() => GoToPage(_currentPage - 1))\"\n Disabled=\"@(_currentPage <= 1)\" />\n @for (int i = 1; i <= _totalPages; i++)\n {\n var page = i;\n <PaginationItem IsActive=\"@(page == _currentPage)\"\n OnClick=\"@(() => GoToPage(page))\">\n @page\n </PaginationItem>\n }\n <PaginationNext OnClick=\"@(() => GoToPage(_currentPage + 1))\"\n Disabled=\"@(_currentPage >= _totalPages)\" />\n </PaginationContent>\n</Pagination>\n\n@code {\n private int _currentPage = 1;\n private int _totalPages = 5;\n\n private void GoToPage(int page)\n {\n if (page >= 1 && page <= _totalPages)\n _currentPage = page;\n }\n}"
27206
27568
  },
27207
27569
  {
27208
27570
  "title": "Compact",
27209
- "code": "<Pagination>\r\n <PaginationContent>\r\n <PaginationPrevious OnClick=\"@(() => GoToPage(_currentPage - 1))\" Disabled=\"@(_currentPage <= 1)\" />\r\n <Lumeo.Text As=\"span\" Size=\"sm\" Color=\"muted\" Class=\"px-3 flex items-center\">@_currentPage / @_totalPages</Lumeo.Text>\r\n <PaginationNext OnClick=\"@(() => GoToPage(_currentPage + 1))\" Disabled=\"@(_currentPage >= _totalPages)\" />\r\n </PaginationContent>\r\n</Pagination>"
27571
+ "code": "<Pagination>\n <PaginationContent>\n <PaginationPrevious OnClick=\"@(() => GoToPage(_currentPage - 1))\" Disabled=\"@(_currentPage <= 1)\" />\n <Lumeo.Text As=\"span\" Size=\"sm\" Color=\"muted\" Class=\"px-3 flex items-center\">@_currentPage / @_totalPages</Lumeo.Text>\n <PaginationNext OnClick=\"@(() => GoToPage(_currentPage + 1))\" Disabled=\"@(_currentPage >= _totalPages)\" />\n </PaginationContent>\n</Pagination>"
27572
+ },
27573
+ {
27574
+ "title": "Size",
27575
+ "code": "<Segmented @bind-Value=\"_paginationSize\">\n <SegmentedItem Value=\"sm\">Sm</SegmentedItem>\n <SegmentedItem Value=\"md\">Md</SegmentedItem>\n <SegmentedItem Value=\"lg\">Lg</SegmentedItem>\n</Segmented>\n\n<Pagination>\n <PaginationContent>\n <PaginationPrevious OnClick=\"@(() => GoToPage(_currentPage - 1))\" Disabled=\"@(_currentPage <= 1)\" />\n @for (int i = 1; i <= 5; i++)\n {\n var page = i;\n <PaginationItem IsActive=\"@(page == _currentPage)\"\n OnClick=\"@(() => GoToPage(page))\"\n Class=\"@(_paginationSize switch { \\\"sm\\\" => \\\"h-7 w-7 text-xs\\\", \\\"lg\\\" => \\\"h-11 w-11 text-base\\\", _ => \\\"\\\" })\">\n @page\n </PaginationItem>\n }\n <PaginationNext OnClick=\"@(() => GoToPage(_currentPage + 1))\" Disabled=\"@(_currentPage >= 5)\" />\n </PaginationContent>\n</Pagination>\n\n@code {\n private string _paginationSize = \"md\";\n private int _currentPage = 1;\n}"
27210
27576
  },
27211
27577
  {
27212
27578
  "title": "With Ellipsis",
27213
- "code": "<Pagination>\r\n <PaginationContent>\r\n <PaginationPrevious OnClick=\"...\" />\r\n <PaginationItem IsActive=\"true\">1</PaginationItem>\r\n <PaginationItem>2</PaginationItem>\r\n <PaginationItem>3</PaginationItem>\r\n <PaginationEllipsis />\r\n <PaginationItem>8</PaginationItem>\r\n <PaginationItem>9</PaginationItem>\r\n <PaginationItem>10</PaginationItem>\r\n <PaginationNext OnClick=\"...\" />\r\n </PaginationContent>\r\n</Pagination>"
27579
+ "code": "<Pagination>\n <PaginationContent>\n <PaginationPrevious OnClick=\"...\" />\n <PaginationItem IsActive=\"true\">1</PaginationItem>\n <PaginationItem>2</PaginationItem>\n <PaginationItem>3</PaginationItem>\n <PaginationEllipsis />\n <PaginationItem>8</PaginationItem>\n <PaginationItem>9</PaginationItem>\n <PaginationItem>10</PaginationItem>\n <PaginationNext OnClick=\"...\" />\n </PaginationContent>\n</Pagination>"
27214
27580
  }
27215
27581
  ],
27216
27582
  "subComponents": {
@@ -27617,7 +27983,7 @@
27617
27983
  },
27618
27984
  {
27619
27985
  "title": "With Strength + Custom Placeholder",
27620
- "code": "<PasswordInput @bind-Value=\"_password\"\r\n ShowStrength=\"true\"\r\n Placeholder=\"Create a strong password\" />"
27986
+ "code": "<PasswordInput @bind-Value=\"_password\"\n ShowStrength=\"true\"\n Placeholder=\"Create a strong password\" />"
27621
27987
  }
27622
27988
  ],
27623
27989
  "subComponents": {},
@@ -27742,11 +28108,11 @@
27742
28108
  "examples": [
27743
28109
  {
27744
28110
  "title": "Strings",
27745
- "code": "<PickList TItem=\"string\"\r\n Items=\"_allDepartments\"\r\n SelectedItems=\"_pickedDepartments\"\r\n SelectedItemsChanged=\"OnDepartmentsChanged\"\r\n SourceTitle=\"All Departments\"\r\n TargetTitle=\"Assigned\" />"
28111
+ "code": "<PickList TItem=\"string\"\n Items=\"_allDepartments\"\n SelectedItems=\"_pickedDepartments\"\n SelectedItemsChanged=\"OnDepartmentsChanged\"\n SourceTitle=\"All Departments\"\n TargetTitle=\"Assigned\" />"
27746
28112
  },
27747
28113
  {
27748
28114
  "title": "Typed Records with Item Template",
27749
- "code": "<PickList TItem=\"UserInfo\"\r\n Items=\"_allUsers\"\r\n SelectedItems=\"_pickedUsers\"\r\n SelectedItemsChanged=\"OnUsersChanged\"\r\n SourceTitle=\"Users\"\r\n TargetTitle=\"Team Members\">\r\n <ItemTemplate>\r\n <div class=\"flex flex-col\">\r\n <span class=\"text-sm font-medium\">@context.Name</span>\r\n <span class=\"text-xs text-muted-foreground\">@context.Email</span>\r\n </div>\r\n </ItemTemplate>\r\n</PickList>"
28115
+ "code": "<PickList TItem=\"UserInfo\"\n Items=\"_allUsers\"\n SelectedItems=\"_pickedUsers\"\n SelectedItemsChanged=\"OnUsersChanged\"\n SourceTitle=\"Users\"\n TargetTitle=\"Team Members\">\n <ItemTemplate>\n <div class=\"flex flex-col\">\n <span class=\"text-sm font-medium\">@context.Name</span>\n <span class=\"text-xs text-muted-foreground\">@context.Email</span>\n </div>\n </ItemTemplate>\n</PickList>"
27750
28116
  }
27751
28117
  ],
27752
28118
  "subComponents": {},
@@ -27903,7 +28269,7 @@
27903
28269
  "records": [
27904
28270
  {
27905
28271
  "name": "ColumnLeaf",
27906
- "signature": "ColumnLeaf(\r\n string Label,\r\n string PathKey,\r\n object?[] Path,\r\n IReadOnlyList<TItem> Items,\r\n bool IsGrandTotal)",
28272
+ "signature": "ColumnLeaf(\n string Label,\n string PathKey,\n object?[] Path,\n IReadOnlyList<TItem> Items,\n bool IsGrandTotal)",
27907
28273
  "description": null
27908
28274
  },
27909
28275
  {
@@ -27929,19 +28295,19 @@
27929
28295
  "examples": [
27930
28296
  {
27931
28297
  "title": "Sales by region × year",
27932
- "code": "<PivotGrid TItem=\"Sale\"\r\n Items=\"_sales\"\r\n RowFields=\"@(new List<PivotField<Sale>> { new(\"Region\", s => s.Region) })\"\r\n ColumnFields=\"@(new List<PivotField<Sale>> { new(\"Year\", s => s.Year, v => \"FY \" + v) })\"\r\n Measures=\"@(new List<PivotMeasure<Sale>> { new(\"Revenue\", s => s.Amount, PivotAggregate.Sum, d => \"$\" + d.ToString(\"N0\")) })\" />\r\n\r\n@code {\r\n record Sale(string Region, string Country, int Year, int Quarter, decimal Amount, int Units);\r\n List<Sale> _sales = new() { /* ... */ };\r\n}"
28298
+ "code": "<PivotGrid TItem=\"Sale\"\n Items=\"_sales\"\n RowFields=\"@(new List<PivotField<Sale>> { new(\"Region\", s => s.Region) })\"\n ColumnFields=\"@(new List<PivotField<Sale>> { new(\"Year\", s => s.Year, v => \"FY \" + v) })\"\n Measures=\"@(new List<PivotMeasure<Sale>> { new(\"Revenue\", s => s.Amount, PivotAggregate.Sum, d => \"$\" + d.ToString(\"N0\")) })\" />\n\n@code {\n record Sale(string Region, string Country, int Year, int Quarter, decimal Amount, int Units);\n List<Sale> _sales = new() { /* ... */ };\n}"
27933
28299
  },
27934
28300
  {
27935
28301
  "title": "Multiple measures (sum + count)",
27936
- "code": "<PivotGrid TItem=\"Sale\"\r\n Items=\"_sales\"\r\n RowFields=\"_regionField\"\r\n ColumnFields=\"_yearField\"\r\n Measures=\"@(new List<PivotMeasure<Sale>> {\r\n new(\"Revenue\", s => s.Amount, PivotAggregate.Sum, d => \"$\" + d.ToString(\"N0\")),\r\n new(\"Deals\", s => s.Units, PivotAggregate.Count),\r\n })\" />"
28302
+ "code": "<PivotGrid TItem=\"Sale\"\n Items=\"_sales\"\n RowFields=\"_regionField\"\n ColumnFields=\"_yearField\"\n Measures=\"@(new List<PivotMeasure<Sale>> {\n new(\"Revenue\", s => s.Amount, PivotAggregate.Sum, d => \"$\" + d.ToString(\"N0\")),\n new(\"Deals\", s => s.Units, PivotAggregate.Count),\n })\" />"
27937
28303
  },
27938
28304
  {
27939
28305
  "title": "Collapsible nested row groups",
27940
- "code": "<PivotGrid TItem=\"Sale\"\r\n Items=\"_sales\"\r\n RowFields=\"@(new List<PivotField<Sale>> {\r\n new(\"Region\", s => s.Region),\r\n new(\"Country\", s => s.Country),\r\n })\"\r\n ColumnFields=\"_yearField\"\r\n Measures=\"_amountMeasure\"\r\n Collapsible=\"true\"\r\n Compact=\"true\" />"
28306
+ "code": "<PivotGrid TItem=\"Sale\"\n Items=\"_sales\"\n RowFields=\"@(new List<PivotField<Sale>> {\n new(\"Region\", s => s.Region),\n new(\"Country\", s => s.Country),\n })\"\n ColumnFields=\"_yearField\"\n Measures=\"_amountMeasure\"\n Collapsible=\"true\"\n Compact=\"true\" />"
27941
28307
  },
27942
28308
  {
27943
28309
  "title": "Multi-level column hierarchy (Year &gt; Quarter)",
27944
- "code": "<PivotGrid TItem=\"Sale\"\r\n Items=\"_sales\"\r\n RowFields=\"_regionCountryFields\"\r\n ColumnFields=\"@(new List<PivotField<Sale>> {\r\n new(\"Year\", s => s.Year, v => \"FY \" + v),\r\n new(\"Quarter\", s => s.Quarter, v => \"Q\" + v),\r\n })\"\r\n Measures=\"_amountMeasure\"\r\n Compact=\"true\" />"
28310
+ "code": "<PivotGrid TItem=\"Sale\"\n Items=\"_sales\"\n RowFields=\"_regionCountryFields\"\n ColumnFields=\"@(new List<PivotField<Sale>> {\n new(\"Year\", s => s.Year, v => \"FY \" + v),\n new(\"Quarter\", s => s.Quarter, v => \"Q\" + v),\n })\"\n Measures=\"_amountMeasure\"\n Compact=\"true\" />"
27945
28311
  }
27946
28312
  ],
27947
28313
  "subComponents": {},
@@ -28079,19 +28445,19 @@
28079
28445
  "examples": [
28080
28446
  {
28081
28447
  "title": "Basic Pop Confirm",
28082
- "code": "<PopConfirm Title=\"Delete this item?\"\r\n Description=\"This action cannot be undone.\"\r\n OnConfirm=\"@HandleConfirm\">\r\n <Button Variant=\"Button.ButtonVariant.Outline\">Delete item</Button>\r\n</PopConfirm>"
28448
+ "code": "<PopConfirm Title=\"Delete this item?\"\n Description=\"This action cannot be undone.\"\n OnConfirm=\"@HandleConfirm\">\n <Button Variant=\"Button.ButtonVariant.Outline\">Delete item</Button>\n</PopConfirm>"
28083
28449
  },
28084
28450
  {
28085
28451
  "title": "Destructive Action",
28086
- "code": "<PopConfirm Title=\"Delete account?\"\r\n Description=\"All data will be permanently removed.\"\r\n ConfirmText=\"Yes, delete\"\r\n IsDestructive=\"true\"\r\n OnConfirm=\"@HandleDelete\">\r\n <Button Variant=\"Button.ButtonVariant.Destructive\">Delete Account</Button>\r\n</PopConfirm>"
28452
+ "code": "<PopConfirm Title=\"Delete account?\"\n Description=\"All data will be permanently removed.\"\n ConfirmText=\"Yes, delete\"\n IsDestructive=\"true\"\n OnConfirm=\"@HandleDelete\">\n <Button Variant=\"Button.ButtonVariant.Destructive\">Delete Account</Button>\n</PopConfirm>"
28087
28453
  },
28088
28454
  {
28089
28455
  "title": "Custom Texts",
28090
- "code": "<PopConfirm Title=\"Archive project?\"\r\n ConfirmText=\"Archive\"\r\n CancelText=\"Keep active\"\r\n OnConfirm=\"@HandleArchive\">\r\n <Button Variant=\"Button.ButtonVariant.Secondary\">Archive Project</Button>\r\n</PopConfirm>"
28456
+ "code": "<PopConfirm Title=\"Archive project?\"\n ConfirmText=\"Archive\"\n CancelText=\"Keep active\"\n OnConfirm=\"@HandleArchive\">\n <Button Variant=\"Button.ButtonVariant.Secondary\">Archive Project</Button>\n</PopConfirm>"
28091
28457
  },
28092
28458
  {
28093
28459
  "title": "No Description",
28094
- "code": "<PopConfirm Title=\"Mark as complete?\" OnConfirm=\"@HandleComplete\">\r\n <Button Variant=\"Button.ButtonVariant.Ghost\">Complete</Button>\r\n</PopConfirm>"
28460
+ "code": "<PopConfirm Title=\"Mark as complete?\" OnConfirm=\"@HandleComplete\">\n <Button Variant=\"Button.ButtonVariant.Ghost\">Complete</Button>\n</PopConfirm>"
28095
28461
  }
28096
28462
  ],
28097
28463
  "subComponents": {},
@@ -28191,19 +28557,19 @@
28191
28557
  "examples": [
28192
28558
  {
28193
28559
  "title": "Default",
28194
- "code": "<Popover>\r\n <PopoverTrigger>\r\n <Button Variant=\"Button.ButtonVariant.Outline\">Open Popover</Button>\r\n </PopoverTrigger>\r\n <PopoverContent>\r\n <Stack Gap=\"4\">\r\n <Stack Gap=\"2\">\r\n <Heading Level=\"4\" Class=\"text-base font-medium leading-none\">Dimensions</Heading>\r\n <Lumeo.Text Size=\"sm\" Color=\"muted\">Set the dimensions for the layer.</Lumeo.Text>\r\n </Stack>\r\n <Grid Columns=\"3\" Gap=\"4\" Class=\"items-center\">\r\n <Label>Width</Label>\r\n <Input Class=\"col-span-2 h-8\" Value=\"100%\" />\r\n <Label>Height</Label>\r\n <Input Class=\"col-span-2 h-8\" Value=\"25px\" />\r\n </Grid>\r\n </Stack>\r\n </PopoverContent>\r\n</Popover>"
28560
+ "code": "<Popover>\n <PopoverTrigger>\n <Button Variant=\"Button.ButtonVariant.Outline\">Open Popover</Button>\n </PopoverTrigger>\n <PopoverContent>\n <Stack Gap=\"4\">\n <Stack Gap=\"2\">\n <Heading Level=\"4\" Class=\"text-base font-medium leading-none\">Dimensions</Heading>\n <Lumeo.Text Size=\"sm\" Color=\"muted\">Set the dimensions for the layer.</Lumeo.Text>\n </Stack>\n <Grid Columns=\"3\" Gap=\"4\" Class=\"items-center\">\n <Label>Width</Label>\n <Input Class=\"col-span-2 h-8\" Value=\"100%\" />\n <Label>Height</Label>\n <Input Class=\"col-span-2 h-8\" Value=\"25px\" />\n </Grid>\n </Stack>\n </PopoverContent>\n</Popover>"
28195
28561
  },
28196
28562
  {
28197
28563
  "title": "Alignment",
28198
- "code": "<Popover>\r\n <PopoverTrigger>\r\n <Button Variant=\"Button.ButtonVariant.Outline\">Start</Button>\r\n </PopoverTrigger>\r\n <PopoverContent Align=\"PopoverContent.PopoverAlign.Start\">\r\n <Lumeo.Text Size=\"sm\">Aligned to start.</Lumeo.Text>\r\n </PopoverContent>\r\n</Popover>\r\n\r\n<Popover>\r\n <PopoverTrigger>\r\n <Button Variant=\"Button.ButtonVariant.Outline\">End</Button>\r\n </PopoverTrigger>\r\n <PopoverContent Align=\"PopoverContent.PopoverAlign.End\">\r\n <Lumeo.Text Size=\"sm\">Aligned to end.</Lumeo.Text>\r\n </PopoverContent>\r\n</Popover>"
28564
+ "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>"
28199
28565
  },
28200
28566
  {
28201
28567
  "title": "With Arrow",
28202
- "code": "<Popover>\r\n <PopoverTrigger><Button Variant=\"Button.ButtonVariant.Outline\">Top</Button></PopoverTrigger>\r\n <PopoverContent Side=\"PopoverContent.PopoverSide.Top\" ShowArrow=\"true\">\r\n <Lumeo.Text Size=\"sm\">Popover on top with an arrow pointing at the trigger.</Lumeo.Text>\r\n </PopoverContent>\r\n</Popover>"
28568
+ "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>"
28203
28569
  },
28204
28570
  {
28205
28571
  "title": "Placement",
28206
- "code": "<Popover>\r\n <PopoverTrigger><Button Variant=\"Button.ButtonVariant.Outline\">Top</Button></PopoverTrigger>\r\n <PopoverContent Side=\"PopoverContent.PopoverSide.Top\">\r\n <Lumeo.Text Size=\"sm\">Popover on top</Lumeo.Text>\r\n </PopoverContent>\r\n</Popover>\r\n<Popover>\r\n <PopoverTrigger><Button Variant=\"Button.ButtonVariant.Outline\">Bottom</Button></PopoverTrigger>\r\n <PopoverContent Side=\"PopoverContent.PopoverSide.Bottom\">\r\n <Lumeo.Text Size=\"sm\">Popover on bottom</Lumeo.Text>\r\n </PopoverContent>\r\n</Popover>\r\n<Popover>\r\n <PopoverTrigger><Button Variant=\"Button.ButtonVariant.Outline\">Left</Button></PopoverTrigger>\r\n <PopoverContent Side=\"PopoverContent.PopoverSide.Left\">\r\n <Lumeo.Text Size=\"sm\">Popover on left</Lumeo.Text>\r\n </PopoverContent>\r\n</Popover>\r\n<Popover>\r\n <PopoverTrigger><Button Variant=\"Button.ButtonVariant.Outline\">Right</Button></PopoverTrigger>\r\n <PopoverContent Side=\"PopoverContent.PopoverSide.Right\">\r\n <Lumeo.Text Size=\"sm\">Popover on right</Lumeo.Text>\r\n </PopoverContent>\r\n</Popover>"
28572
+ "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>"
28207
28573
  }
28208
28574
  ],
28209
28575
  "subComponents": {
@@ -28545,19 +28911,19 @@
28545
28911
  "examples": [
28546
28912
  {
28547
28913
  "title": "Default",
28548
- "code": "<Progress Value=\"25\" />\r\n<Progress Value=\"50\" />\r\n<Progress Value=\"75\" />"
28914
+ "code": "<Progress Value=\"25\" />\n<Progress Value=\"50\" />\n<Progress Value=\"75\" />"
28549
28915
  },
28550
28916
  {
28551
28917
  "title": "Variants",
28552
- "code": "<Progress Value=\"60\" />\r\n<Progress Value=\"100\" Variant=\"Progress.ProgressVariant.Success\" />\r\n<Progress Value=\"45\" Variant=\"Progress.ProgressVariant.Warning\" />\r\n<Progress Value=\"80\" Variant=\"Progress.ProgressVariant.Destructive\" />"
28918
+ "code": "<Progress Value=\"60\" />\n<Progress Value=\"100\" Variant=\"Progress.ProgressVariant.Success\" />\n<Progress Value=\"45\" Variant=\"Progress.ProgressVariant.Warning\" />\n<Progress Value=\"80\" Variant=\"Progress.ProgressVariant.Destructive\" />"
28553
28919
  },
28554
28920
  {
28555
28921
  "title": "Interactive",
28556
- "code": "<Progress Value=\"@_value\" />\r\n<Flex Align=\"center\" Gap=\"2\">\r\n <Button OnClick=\"Decrease\">-10</Button>\r\n <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"medium\">@_value%</Lumeo.Text>\r\n <Button OnClick=\"Increase\">+10</Button>\r\n</Flex>\r\n\r\n@code {\r\n private int _value = 50;\r\n private void Increase() => _value = Math.Min(100, _value + 10);\r\n private void Decrease() => _value = Math.Max(0, _value - 10);\r\n}"
28922
+ "code": "<Progress Value=\"@_value\" />\n<Flex Align=\"center\" Gap=\"2\">\n <Button OnClick=\"Decrease\">-10</Button>\n <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"medium\">@_value%</Lumeo.Text>\n <Button OnClick=\"Increase\">+10</Button>\n</Flex>\n\n@code {\n private int _value = 50;\n private void Increase() => _value = Math.Min(100, _value + 10);\n private void Decrease() => _value = Math.Max(0, _value - 10);\n}"
28557
28923
  },
28558
28924
  {
28559
28925
  "title": "Indeterminate",
28560
- "code": "<Progress IsIndeterminate=\"true\" />\r\n<Progress IsIndeterminate=\"true\" Variant=\"Progress.ProgressVariant.Success\" />"
28926
+ "code": "<Progress IsIndeterminate=\"true\" />\n<Progress IsIndeterminate=\"true\" Variant=\"Progress.ProgressVariant.Success\" />"
28561
28927
  }
28562
28928
  ],
28563
28929
  "subComponents": {
@@ -28860,6 +29226,98 @@
28860
29226
  "parseFailed": false,
28861
29227
  "parseError": null
28862
29228
  },
29229
+ "PullToRefresh": {
29230
+ "name": "PullToRefresh",
29231
+ "category": "Utility",
29232
+ "subcategory": null,
29233
+ "description": "Pull To Refresh component.",
29234
+ "nugetPackage": "Lumeo",
29235
+ "files": [
29236
+ "UI/PullToRefresh/PullToRefresh.razor"
29237
+ ],
29238
+ "namespace": "Lumeo",
29239
+ "inheritsFrom": null,
29240
+ "implements": [
29241
+ "IAsyncDisposable"
29242
+ ],
29243
+ "parameters": [
29244
+ {
29245
+ "name": "ChildContent",
29246
+ "type": "RenderFragment?",
29247
+ "default": null,
29248
+ "description": null,
29249
+ "isCascading": false,
29250
+ "captureUnmatched": false
29251
+ },
29252
+ {
29253
+ "name": "OnRefresh",
29254
+ "type": "EventCallback",
29255
+ "default": null,
29256
+ "description": null,
29257
+ "isCascading": false,
29258
+ "captureUnmatched": false
29259
+ },
29260
+ {
29261
+ "name": "ThresholdPx",
29262
+ "type": "double",
29263
+ "default": "80",
29264
+ "description": null,
29265
+ "isCascading": false,
29266
+ "captureUnmatched": false
29267
+ },
29268
+ {
29269
+ "name": "MaxPullPx",
29270
+ "type": "double",
29271
+ "default": "120",
29272
+ "description": null,
29273
+ "isCascading": false,
29274
+ "captureUnmatched": false
29275
+ },
29276
+ {
29277
+ "name": "Class",
29278
+ "type": "string?",
29279
+ "default": null,
29280
+ "description": null,
29281
+ "isCascading": false,
29282
+ "captureUnmatched": false
29283
+ },
29284
+ {
29285
+ "name": "AdditionalAttributes",
29286
+ "type": "Dictionary<string, object>?",
29287
+ "default": null,
29288
+ "description": null,
29289
+ "isCascading": false,
29290
+ "captureUnmatched": true
29291
+ }
29292
+ ],
29293
+ "events": [
29294
+ {
29295
+ "name": "OnRefresh",
29296
+ "type": "EventCallback",
29297
+ "description": null
29298
+ }
29299
+ ],
29300
+ "enums": [],
29301
+ "records": [],
29302
+ "cssVars": [
29303
+ "--color-background",
29304
+ "--color-foreground",
29305
+ "--radius"
29306
+ ],
29307
+ "examples": [
29308
+ {
29309
+ "title": "Basic Pull to Refresh",
29310
+ "code": "<div class=\"h-64 rounded-lg border border-border/40 overflow-hidden\">\n <PullToRefresh OnRefresh=\"HandleRefresh\">\n <Stack Gap=\"3\" Class=\"p-4\">\n <Text Size=\"sm\" Color=\"muted\">Pull down to refresh · Count: @_refreshCount</Text>\n <div class=\"rounded-md border border-border/40 bg-muted/20 px-4 py-3 text-sm\">Item 1</div>\n <div class=\"rounded-md border border-border/40 bg-muted/20 px-4 py-3 text-sm\">Item 2</div>\n </Stack>\n </PullToRefresh>\n</div>\n\n@code {\n private int _refreshCount;\n\n private async Task HandleRefresh()\n {\n await Task.Delay(1000);\n _refreshCount++;\n }\n}"
29311
+ },
29312
+ {
29313
+ "title": "Custom Threshold and Max Pull",
29314
+ "code": "<PullToRefresh OnRefresh=\"HandleRefresh\" ThresholdPx=\"50\" MaxPullPx=\"80\">\n <Stack Gap=\"3\" Class=\"p-4\">\n <Text Size=\"sm\" Color=\"muted\">Triggers after only 50 px of pull</Text>\n <div class=\"rounded-md border border-border/40 bg-muted/20 px-4 py-3 text-sm\">Row 1</div>\n <div class=\"rounded-md border border-border/40 bg-muted/20 px-4 py-3 text-sm\">Row 2</div>\n </Stack>\n</PullToRefresh>"
29315
+ }
29316
+ ],
29317
+ "subComponents": {},
29318
+ "parseFailed": false,
29319
+ "parseError": null
29320
+ },
28863
29321
  "QRCode": {
28864
29322
  "name": "QRCode",
28865
29323
  "category": "Data Display",
@@ -28972,24 +29430,7 @@
28972
29430
  "cssVars": [
28973
29431
  "--radius"
28974
29432
  ],
28975
- "examples": [
28976
- {
28977
- "title": "Basic QR Code",
28978
- "code": "<QRCode Value=\"https://lumeo.nativ.sh/\" Size=\"200\" />"
28979
- },
28980
- {
28981
- "title": "Dynamic Value",
28982
- "code": "<Input @bind-Value=\"_url\" Placeholder=\"Enter URL...\" />\r\n<QRCode Value=\"@_url\" Size=\"180\" />"
28983
- },
28984
- {
28985
- "title": "Error Correction Levels",
28986
- "code": "<QRCode Value=\"...\" ErrorCorrectionLevel=\"QRCode.QRErrorLevel.Low\" />\r\n<QRCode Value=\"...\" ErrorCorrectionLevel=\"QRCode.QRErrorLevel.Medium\" />\r\n<QRCode Value=\"...\" ErrorCorrectionLevel=\"QRCode.QRErrorLevel.Quartile\" />\r\n<QRCode Value=\"...\" ErrorCorrectionLevel=\"QRCode.QRErrorLevel.High\" />"
28987
- },
28988
- {
28989
- "title": "Error Correction Level (interactive)",
28990
- "code": "<Segmented @bind-Value=\"_level\">\r\n <SegmentedItem Value=\"@QRCode.QRErrorLevel.Low\">Low</SegmentedItem>\r\n <SegmentedItem Value=\"@QRCode.QRErrorLevel.Medium\">Medium</SegmentedItem>\r\n <SegmentedItem Value=\"@QRCode.QRErrorLevel.Quartile\">Quartile</SegmentedItem>\r\n <SegmentedItem Value=\"@QRCode.QRErrorLevel.High\">High</SegmentedItem>\r\n</Segmented>\r\n<QRCode Value=\"https://lumeo.nativ.sh/\" Size=\"160\" ErrorCorrectionLevel=\"@_level\" />\r\n\r\n@code { private QRCode.QRErrorLevel _level = QRCode.QRErrorLevel.Medium; }"
28991
- }
28992
- ],
29433
+ "examples": [],
28993
29434
  "subComponents": {},
28994
29435
  "parseFailed": false,
28995
29436
  "parseError": null
@@ -29315,7 +29756,7 @@
29315
29756
  "records": [
29316
29757
  {
29317
29758
  "name": "RadioGroupContext",
29318
- "signature": "RadioGroupContext(\r\n string? Value,\r\n EventCallback<string> OnSelect,\r\n List<string> ItemValues,\r\n Dictionary<string, string> ItemIds)",
29759
+ "signature": "RadioGroupContext(\n string? Value,\n EventCallback<string> OnSelect,\n List<string> ItemValues,\n Dictionary<string, string> ItemIds)",
29319
29760
  "description": null
29320
29761
  }
29321
29762
  ],
@@ -29332,15 +29773,15 @@
29332
29773
  "examples": [
29333
29774
  {
29334
29775
  "title": "Default",
29335
- "code": "<RadioGroup @bind-Value=\"_selected\">\r\n <Flex Gap=\"2\" Align=\"center\">\r\n <RadioGroupItem Value=\"default\" />\r\n <Label>Default</Label>\r\n </Flex>\r\n <Flex Gap=\"2\" Align=\"center\">\r\n <RadioGroupItem Value=\"comfortable\" />\r\n <Label>Comfortable</Label>\r\n </Flex>\r\n <Flex Gap=\"2\" Align=\"center\">\r\n <RadioGroupItem Value=\"compact\" />\r\n <Label>Compact</Label>\r\n </Flex>\r\n</RadioGroup>"
29776
+ "code": "<RadioGroup @bind-Value=\"_selected\">\n <Flex Gap=\"2\" Align=\"center\">\n <RadioGroupItem Value=\"default\" />\n <Label>Default</Label>\n </Flex>\n <Flex Gap=\"2\" Align=\"center\">\n <RadioGroupItem Value=\"comfortable\" />\n <Label>Comfortable</Label>\n </Flex>\n <Flex Gap=\"2\" Align=\"center\">\n <RadioGroupItem Value=\"compact\" />\n <Label>Compact</Label>\n </Flex>\n</RadioGroup>"
29336
29777
  },
29337
29778
  {
29338
29779
  "title": "Pricing Plan",
29339
- "code": "<RadioGroup @bind-Value=\"_plan\" Class=\"grid grid-cols-3 gap-2\">\r\n @foreach (var p in new[] { (\"free\", \"Free\", \"$0\"), (\"pro\", \"Pro\", \"$15\"), (\"team\", \"Team\", \"$49\") })\r\n {\r\n <label class=\"@($\"flex flex-col items-center rounded-md border p-3 cursor-pointer {(_plan == p.Item1 ? \\\"border-primary\\\" : \\\"border-muted\\\")}\")>\r\n <RadioGroupItem Value=\"@p.Item1\" Class=\"sr-only\" />\r\n <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"semibold\">@p.Item2</Lumeo.Text>\r\n <Lumeo.Text As=\"span\" Size=\"xs\" Color=\"muted\">@p.Item3/mo</Lumeo.Text>\r\n </label>\r\n }\r\n</RadioGroup>"
29780
+ "code": "<RadioGroup @bind-Value=\"_plan\" Class=\"grid grid-cols-3 gap-2\">\n @foreach (var p in new[] { (\"free\", \"Free\", \"$0\"), (\"pro\", \"Pro\", \"$15\"), (\"team\", \"Team\", \"$49\") })\n {\n <label class=\"@($\"flex flex-col items-center rounded-md border p-3 cursor-pointer {(_plan == p.Item1 ? \\\"border-primary\\\" : \\\"border-muted\\\")}\")>\n <RadioGroupItem Value=\"@p.Item1\" Class=\"sr-only\" />\n <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"semibold\">@p.Item2</Lumeo.Text>\n <Lumeo.Text As=\"span\" Size=\"xs\" Color=\"muted\">@p.Item3/mo</Lumeo.Text>\n </label>\n }\n</RadioGroup>"
29340
29781
  },
29341
29782
  {
29342
29783
  "title": "With Form Field",
29343
- "code": "<FormField Name=\"plan\">\r\n <FormItem>\r\n <FormLabel>Notification preference</FormLabel>\r\n <RadioGroup @bind-Value=\"_notification\">\r\n <Flex Gap=\"2\" Align=\"center\">\r\n <RadioGroupItem Value=\"all\" />\r\n <Label>All notifications</Label>\r\n </Flex>\r\n <Flex Gap=\"2\" Align=\"center\">\r\n <RadioGroupItem Value=\"mentions\" />\r\n <Label>Mentions only</Label>\r\n </Flex>\r\n </RadioGroup>\r\n <FormDescription>Choose how you want to be notified.</FormDescription>\r\n </FormItem>\r\n</FormField>"
29784
+ "code": "<FormField Name=\"plan\">\n <FormItem>\n <FormLabel>Notification preference</FormLabel>\n <RadioGroup @bind-Value=\"_notification\">\n <Flex Gap=\"2\" Align=\"center\">\n <RadioGroupItem Value=\"all\" />\n <Label>All notifications</Label>\n </Flex>\n <Flex Gap=\"2\" Align=\"center\">\n <RadioGroupItem Value=\"mentions\" />\n <Label>Mentions only</Label>\n </Flex>\n </RadioGroup>\n <FormDescription>Choose how you want to be notified.</FormDescription>\n </FormItem>\n</FormField>"
29344
29785
  }
29345
29786
  ],
29346
29787
  "subComponents": {
@@ -29652,7 +30093,7 @@
29652
30093
  },
29653
30094
  {
29654
30095
  "title": "Sizes",
29655
- "code": "<Rating Value=\"3\" ReadOnly=\"true\" Size=\"Rating.RatingSize.Small\" />\r\n<Rating Value=\"3\" ReadOnly=\"true\" />\r\n<Rating Value=\"3\" ReadOnly=\"true\" Size=\"Rating.RatingSize.Large\" />"
30096
+ "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\" />"
29656
30097
  },
29657
30098
  {
29658
30099
  "title": "Read-Only",
@@ -29870,15 +30311,15 @@
29870
30311
  "examples": [
29871
30312
  {
29872
30313
  "title": "Horizontal",
29873
- "code": "<ResizablePanelGroup Direction=\"ResizablePanelGroup.ResizableDirection.Horizontal\"\r\n DefaultSizes=\"@(new double[] { 50, 50 })\" Class=\"min-h-[200px] rounded-lg border\">\r\n <ResizablePanel Order=\"0\">\r\n <div class=\"flex h-full items-center justify-center p-6\">\r\n <span class=\"font-semibold\">Panel One</span>\r\n </div>\r\n </ResizablePanel>\r\n <ResizableHandle PanelIndex=\"0\" WithHandle=\"true\" />\r\n <ResizablePanel Order=\"1\">\r\n <div class=\"flex h-full items-center justify-center p-6\">\r\n <span class=\"font-semibold\">Panel Two</span>\r\n </div>\r\n </ResizablePanel>\r\n</ResizablePanelGroup>"
30314
+ "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>"
29874
30315
  },
29875
30316
  {
29876
30317
  "title": "Vertical",
29877
- "code": "<ResizablePanelGroup Direction=\"ResizablePanelGroup.ResizableDirection.Vertical\"\r\n DefaultSizes=\"@(new double[] { 40, 60 })\" Class=\"min-h-[300px] rounded-lg border\">\r\n <ResizablePanel Order=\"0\">\r\n <div class=\"flex h-full items-center justify-center p-6\">\r\n <span class=\"font-semibold\">Top</span>\r\n </div>\r\n </ResizablePanel>\r\n <ResizableHandle PanelIndex=\"0\" WithHandle=\"true\" />\r\n <ResizablePanel Order=\"1\">\r\n <div class=\"flex h-full items-center justify-center p-6\">\r\n <span class=\"font-semibold\">Bottom</span>\r\n </div>\r\n </ResizablePanel>\r\n</ResizablePanelGroup>"
30318
+ "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>"
29878
30319
  },
29879
30320
  {
29880
30321
  "title": "Three Panels",
29881
- "code": "<ResizablePanelGroup Direction=\"ResizablePanelGroup.ResizableDirection.Horizontal\"\r\n DefaultSizes=\"@(new double[] { 25, 50, 25 })\" Class=\"min-h-[200px] rounded-lg border\">\r\n <ResizablePanel Order=\"0\">\r\n <div class=\"flex h-full items-center justify-center p-6\">\r\n <span class=\"font-semibold\">Sidebar</span>\r\n </div>\r\n </ResizablePanel>\r\n <ResizableHandle PanelIndex=\"0\" WithHandle=\"true\" />\r\n <ResizablePanel Order=\"1\">\r\n <div class=\"flex h-full items-center justify-center p-6\">\r\n <span class=\"font-semibold\">Content</span>\r\n </div>\r\n </ResizablePanel>\r\n <ResizableHandle PanelIndex=\"1\" WithHandle=\"true\" />\r\n <ResizablePanel Order=\"2\">\r\n <div class=\"flex h-full items-center justify-center p-6\">\r\n <span class=\"font-semibold\">Panel</span>\r\n </div>\r\n </ResizablePanel>\r\n</ResizablePanelGroup>"
30322
+ "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>"
29882
30323
  }
29883
30324
  ],
29884
30325
  "subComponents": {
@@ -30024,7 +30465,7 @@
30024
30465
  "records": [
30025
30466
  {
30026
30467
  "name": "ResizablePanelGroupContext",
30027
- "signature": "ResizablePanelGroupContext(\r\n string GroupId,\r\n ResizableDirection Direction,\r\n EventCallback<(int PanelIndex, double Delta)> OnHandleDrag,\r\n Func<int, double> GetPanelSize,\r\n int PanelCount,\r\n Action<int, double, double> RegisterPanel\r\n )",
30468
+ "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 )",
30028
30469
  "description": null
30029
30470
  }
30030
30471
  ],
@@ -30127,15 +30568,15 @@
30127
30568
  "examples": [
30128
30569
  {
30129
30570
  "title": "Success",
30130
- "code": "<Result Status=\"Result.ResultStatus.Success\" Title=\"Payment Successful\" SubTitle=\"Order confirmed.\">\r\n <Extra>\r\n <Button>Go to Dashboard</Button>\r\n <Button Variant=\"Button.ButtonVariant.Outline\">View Order</Button>\r\n </Extra>\r\n</Result>"
30571
+ "code": "<Result Status=\"Result.ResultStatus.Success\" Title=\"Payment Successful\" SubTitle=\"Order confirmed.\">\n <Extra>\n <Button>Go to Dashboard</Button>\n <Button Variant=\"Button.ButtonVariant.Outline\">View Order</Button>\n </Extra>\n</Result>"
30131
30572
  },
30132
30573
  {
30133
30574
  "title": "Error",
30134
- "code": "<Result Status=\"Result.ResultStatus.Error\" Title=\"Submission Failed\" SubTitle=\"Please check and try again.\">\r\n <Extra>\r\n <Button Variant=\"Button.ButtonVariant.Destructive\">Retry</Button>\r\n </Extra>\r\n</Result>"
30575
+ "code": "<Result Status=\"Result.ResultStatus.Error\" Title=\"Submission Failed\" SubTitle=\"Please check and try again.\">\n <Extra>\n <Button Variant=\"Button.ButtonVariant.Destructive\">Retry</Button>\n </Extra>\n</Result>"
30135
30576
  },
30136
30577
  {
30137
30578
  "title": "All Statuses",
30138
- "code": "<Result Status=\"Result.ResultStatus.Warning\" Title=\"Warning\" SubTitle=\"Proceed with caution.\" />\r\n<Result Status=\"Result.ResultStatus.Info\" Title=\"Information\" SubTitle=\"Useful info.\" />\r\n<Result Status=\"Result.ResultStatus.NotFound\" Title=\"404 Not Found\" SubTitle=\"Page does not exist.\" />\r\n<Result Status=\"Result.ResultStatus.Forbidden\" Title=\"403 Forbidden\" SubTitle=\"No permission.\" />"
30579
+ "code": "<Result Status=\"Result.ResultStatus.Warning\" Title=\"Warning\" SubTitle=\"Proceed with caution.\" />\n<Result Status=\"Result.ResultStatus.Info\" Title=\"Information\" SubTitle=\"Useful info.\" />\n<Result Status=\"Result.ResultStatus.NotFound\" Title=\"404 Not Found\" SubTitle=\"Page does not exist.\" />\n<Result Status=\"Result.ResultStatus.Forbidden\" Title=\"403 Forbidden\" SubTitle=\"No permission.\" />"
30139
30580
  },
30140
30581
  {
30141
30582
  "title": "Status — interactive",
@@ -30429,6 +30870,14 @@
30429
30870
  "isCascading": false,
30430
30871
  "captureUnmatched": false
30431
30872
  },
30873
+ {
30874
+ "name": "OnInitError",
30875
+ "type": "EventCallback<string>",
30876
+ "default": null,
30877
+ "description": null,
30878
+ "isCascading": false,
30879
+ "captureUnmatched": false
30880
+ },
30432
30881
  {
30433
30882
  "name": "Class",
30434
30883
  "type": "string?",
@@ -30451,6 +30900,11 @@
30451
30900
  "name": "ValueChanged",
30452
30901
  "type": "EventCallback<string?>",
30453
30902
  "description": null
30903
+ },
30904
+ {
30905
+ "name": "OnInitError",
30906
+ "type": "EventCallback<string>",
30907
+ "description": null
30454
30908
  }
30455
30909
  ],
30456
30910
  "enums": [
@@ -30905,6 +31359,104 @@
30905
31359
  "parseFailed": false,
30906
31360
  "parseError": null
30907
31361
  },
31362
+ "SafeArea": {
31363
+ "name": "SafeArea",
31364
+ "category": "Utility",
31365
+ "subcategory": null,
31366
+ "description": "Safe Area component.",
31367
+ "nugetPackage": "Lumeo",
31368
+ "files": [
31369
+ "UI/SafeArea/SafeArea.razor"
31370
+ ],
31371
+ "namespace": "Lumeo",
31372
+ "inheritsFrom": null,
31373
+ "implements": [],
31374
+ "parameters": [
31375
+ {
31376
+ "name": "ChildContent",
31377
+ "type": "RenderFragment?",
31378
+ "default": null,
31379
+ "description": null,
31380
+ "isCascading": false,
31381
+ "captureUnmatched": false
31382
+ },
31383
+ {
31384
+ "name": "Top",
31385
+ "type": "bool",
31386
+ "default": "true",
31387
+ "description": null,
31388
+ "isCascading": false,
31389
+ "captureUnmatched": false
31390
+ },
31391
+ {
31392
+ "name": "Bottom",
31393
+ "type": "bool",
31394
+ "default": "true",
31395
+ "description": null,
31396
+ "isCascading": false,
31397
+ "captureUnmatched": false
31398
+ },
31399
+ {
31400
+ "name": "Left",
31401
+ "type": "bool",
31402
+ "default": "false",
31403
+ "description": null,
31404
+ "isCascading": false,
31405
+ "captureUnmatched": false
31406
+ },
31407
+ {
31408
+ "name": "Right",
31409
+ "type": "bool",
31410
+ "default": "false",
31411
+ "description": null,
31412
+ "isCascading": false,
31413
+ "captureUnmatched": false
31414
+ },
31415
+ {
31416
+ "name": "Class",
31417
+ "type": "string?",
31418
+ "default": null,
31419
+ "description": null,
31420
+ "isCascading": false,
31421
+ "captureUnmatched": false
31422
+ },
31423
+ {
31424
+ "name": "AdditionalAttributes",
31425
+ "type": "Dictionary<string, object>?",
31426
+ "default": null,
31427
+ "description": null,
31428
+ "isCascading": false,
31429
+ "captureUnmatched": true
31430
+ }
31431
+ ],
31432
+ "events": [],
31433
+ "enums": [],
31434
+ "records": [],
31435
+ "cssVars": [
31436
+ "--color-foreground"
31437
+ ],
31438
+ "examples": [
31439
+ {
31440
+ "title": "Top and Bottom Safe Area",
31441
+ "code": "<SafeArea Top=\"true\" Bottom=\"true\">\n <div class=\"p-4\">\n <p>Content padded away from notch and home indicator.</p>\n </div>\n</SafeArea>"
31442
+ },
31443
+ {
31444
+ "title": "All Edges",
31445
+ "code": "<SafeArea Top=\"true\" Bottom=\"true\" Left=\"true\" Right=\"true\">\n <div class=\"p-4\">\n <p>Full safe-area padding on all four edges.</p>\n </div>\n</SafeArea>"
31446
+ },
31447
+ {
31448
+ "title": "Bottom Only (navigation bar pattern)",
31449
+ "code": "<!-- Bottom tab bar pattern: only bottom inset needed -->\n<SafeArea Top=\"false\" Bottom=\"true\">\n <nav class=\"flex items-center justify-around border-t border-border/40 px-4 py-3\">\n <span>Home</span>\n <span>Search</span>\n <span>Profile</span>\n </nav>\n</SafeArea>"
31450
+ },
31451
+ {
31452
+ "title": "Sticky bottom tab bar (realistic example)",
31453
+ "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>"
31454
+ }
31455
+ ],
31456
+ "subComponents": {},
31457
+ "parseFailed": false,
31458
+ "parseError": null
31459
+ },
30908
31460
  "Scheduler": {
30909
31461
  "name": "Scheduler",
30910
31462
  "category": "Data Display",
@@ -31073,6 +31625,14 @@
31073
31625
  "isCascading": false,
31074
31626
  "captureUnmatched": false
31075
31627
  },
31628
+ {
31629
+ "name": "OnInitError",
31630
+ "type": "EventCallback<string>",
31631
+ "default": null,
31632
+ "description": "Raised when JS initialization fails (e.g. CDN down, FullCalendar threw). The argument is the error message. When raised the component renders an error card instead of the calendar.",
31633
+ "isCascading": false,
31634
+ "captureUnmatched": false
31635
+ },
31076
31636
  {
31077
31637
  "name": "Class",
31078
31638
  "type": "string?",
@@ -31110,6 +31670,11 @@
31110
31670
  "name": "OnEventChange",
31111
31671
  "type": "EventCallback<SchedulerEvent>",
31112
31672
  "description": null
31673
+ },
31674
+ {
31675
+ "name": "OnInitError",
31676
+ "type": "EventCallback<string>",
31677
+ "description": "Raised when JS initialization fails (e.g. CDN down, FullCalendar threw). The argument is the error message. When raised the component renders an error card instead of the calendar."
31113
31678
  }
31114
31679
  ],
31115
31680
  "enums": [],
@@ -31117,6 +31682,7 @@
31117
31682
  "cssVars": [
31118
31683
  "--color-border",
31119
31684
  "--color-card",
31685
+ "--color-destructive",
31120
31686
  "--color-foreground",
31121
31687
  "--color-muted",
31122
31688
  "--color-muted-foreground",
@@ -31129,15 +31695,15 @@
31129
31695
  },
31130
31696
  {
31131
31697
  "title": "Week View (timed + all-day)",
31132
- "code": "<Scheduler Events=\"_events\"\r\n InitialView=\"SchedulerView.Week\"\r\n Height=\"620px\"\r\n BusinessHours=\"true\" />"
31698
+ "code": "<Scheduler Events=\"_events\"\n InitialView=\"SchedulerView.Week\"\n Height=\"620px\"\n BusinessHours=\"true\" />"
31133
31699
  },
31134
31700
  {
31135
31701
  "title": "Click to Create",
31136
- "code": "<Scheduler Events=\"_events\"\r\n InitialView=\"SchedulerView.Week\"\r\n OnDateSelect=\"HandleDateSelect\" />\r\n\r\n<Dialog @bind-Open=\"_open\">\r\n <DialogContent>\r\n <DialogHeader><DialogTitle>New event</DialogTitle></DialogHeader>\r\n <Input @bind-Value=\"_title\" placeholder=\"Title\" />\r\n <DialogFooter>\r\n <Button OnClick=\"Add\">Add event</Button>\r\n </DialogFooter>\r\n </DialogContent>\r\n</Dialog>\r\n\r\n@code {\r\n private bool _open;\r\n private SchedulerDateRange? _range;\r\n private string _title = \"\";\r\n private List<SchedulerEvent> _events = new();\r\n\r\n void HandleDateSelect(SchedulerDateRange r) { _range = r; _open = true; }\r\n void Add() {\r\n _events = _events.Append(new SchedulerEvent(\r\n Id: Guid.NewGuid().ToString(\"N\"),\r\n Title: _title,\r\n Start: _range!.Start,\r\n End: _range.End,\r\n AllDay: _range.AllDay\r\n )).ToList();\r\n _open = false;\r\n }\r\n}"
31702
+ "code": "<Scheduler Events=\"_events\"\n InitialView=\"SchedulerView.Week\"\n OnDateSelect=\"HandleDateSelect\" />\n\n<Dialog @bind-Open=\"_open\">\n <DialogContent>\n <DialogHeader><DialogTitle>New event</DialogTitle></DialogHeader>\n <Input @bind-Value=\"_title\" placeholder=\"Title\" />\n <DialogFooter>\n <Button OnClick=\"Add\">Add event</Button>\n </DialogFooter>\n </DialogContent>\n</Dialog>\n\n@code {\n private bool _open;\n private SchedulerDateRange? _range;\n private string _title = \"\";\n private List<SchedulerEvent> _events = new();\n\n void HandleDateSelect(SchedulerDateRange r) { _range = r; _open = true; }\n void Add() {\n _events = _events.Append(new SchedulerEvent(\n Id: Guid.NewGuid().ToString(\"N\"),\n Title: _title,\n Start: _range!.Start,\n End: _range.End,\n AllDay: _range.AllDay\n )).ToList();\n _open = false;\n }\n}"
31137
31703
  },
31138
31704
  {
31139
31705
  "title": "Drag to Reschedule",
31140
- "code": "<Scheduler @bind-Events=\"_events\" InitialView=\"SchedulerView.Week\" />\r\n\r\n@code {\r\n private IEnumerable<SchedulerEvent> _events = new List<SchedulerEvent> { /* ... */ };\r\n}"
31706
+ "code": "<Scheduler @bind-Events=\"_events\" InitialView=\"SchedulerView.Week\" />\n\n@code {\n private IEnumerable<SchedulerEvent> _events = new List<SchedulerEvent> { /* ... */ };\n}"
31141
31707
  }
31142
31708
  ],
31143
31709
  "subComponents": {},
@@ -31194,15 +31760,15 @@
31194
31760
  "examples": [
31195
31761
  {
31196
31762
  "title": "Vertical Scroll",
31197
- "code": "<ScrollArea Class=\"h-72 rounded-md border p-4\">\r\n <h4 class=\"mb-4 text-sm font-medium leading-none\">Tags</h4>\r\n @foreach (var tag in _tags)\r\n {\r\n <div class=\"text-sm py-2 border-b\">@tag</div>\r\n }\r\n</ScrollArea>"
31763
+ "code": "<ScrollArea Class=\"h-72 rounded-md border p-4\">\n <h4 class=\"mb-4 text-sm font-medium leading-none\">Tags</h4>\n @foreach (var tag in _tags)\n {\n <div class=\"text-sm py-2 border-b\">@tag</div>\n }\n</ScrollArea>"
31198
31764
  },
31199
31765
  {
31200
31766
  "title": "Chat Messages",
31201
- "code": "<ScrollArea Class=\"h-64 rounded-md border p-4\">\r\n <div class=\"space-y-3\">\r\n @foreach (var msg in _messages)\r\n {\r\n <div class=\"@($\"flex flex-col {(msg.Mine ? \"items-end\" : \"items-start\")}\")>\r\n <div class=\"@($\"rounded-lg px-3 py-2 text-sm {(msg.Mine ? \"bg-primary text-primary-foreground\" : \"bg-muted text-foreground\")}\")>\r\n @msg.Text\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n</ScrollArea>"
31767
+ "code": "<ScrollArea Class=\"h-64 rounded-md border p-4\">\n <div class=\"space-y-3\">\n @foreach (var msg in _messages)\n {\n <div class=\"@($\"flex flex-col {(msg.Mine ? \"items-end\" : \"items-start\")}\")>\n <div class=\"@($\"rounded-lg px-3 py-2 text-sm {(msg.Mine ? \"bg-primary text-primary-foreground\" : \"bg-muted text-foreground\")}\")>\n @msg.Text\n </div>\n </div>\n }\n </div>\n</ScrollArea>"
31202
31768
  },
31203
31769
  {
31204
31770
  "title": "Horizontal Scroll",
31205
- "code": "<ScrollArea Class=\"w-full whitespace-nowrap rounded-md border p-4\">\r\n <div class=\"flex gap-4\">\r\n @for (var i = 1; i <= 12; i++)\r\n {\r\n <div class=\"flex-shrink-0 w-32 h-20 rounded-md bg-muted flex items-center justify-center\">\r\n Item @i\r\n </div>\r\n }\r\n </div>\r\n</ScrollArea>"
31771
+ "code": "<ScrollArea Class=\"w-full whitespace-nowrap rounded-md border p-4\">\n <div class=\"flex gap-4\">\n @for (var i = 1; i <= 12; i++)\n {\n <div class=\"flex-shrink-0 w-32 h-20 rounded-md bg-muted flex items-center justify-center\">\n Item @i\n </div>\n }\n </div>\n</ScrollArea>"
31206
31772
  }
31207
31773
  ],
31208
31774
  "subComponents": {},
@@ -31304,11 +31870,11 @@
31304
31870
  "examples": [
31305
31871
  {
31306
31872
  "title": "Vertical Scrollspy",
31307
- "code": "<Scrollspy Class=\"flex gap-4\" @bind-ActiveId=\"_active\">\r\n <nav class=\"flex flex-col gap-1 w-40 shrink-0\">\r\n <ScrollspyLink Target=\"section-1\"\r\n Class=\"px-3 py-1.5 rounded-md text-sm font-medium text-muted-foreground\r\n data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\">\r\n Section 1\r\n </ScrollspyLink>\r\n <ScrollspyLink Target=\"section-2\" Class=\"...\">Section 2</ScrollspyLink>\r\n <ScrollspyLink Target=\"section-3\" Class=\"...\">Section 3</ScrollspyLink>\r\n </nav>\r\n <div class=\"flex-1 overflow-y-auto h-[400px] rounded-md border border-border/40\">\r\n <ScrollspySection Id=\"section-1\" Class=\"p-6 min-h-[300px]\">\r\n <h3>Section 1</h3>\r\n <p>Content for section 1...</p>\r\n </ScrollspySection>\r\n <ScrollspySection Id=\"section-2\" Class=\"p-6 min-h-[300px]\">\r\n <h3>Section 2</h3>\r\n <p>Content for section 2...</p>\r\n </ScrollspySection>\r\n <ScrollspySection Id=\"section-3\" Class=\"p-6 min-h-[300px]\">\r\n <h3>Section 3</h3>\r\n <p>Content for section 3...</p>\r\n </ScrollspySection>\r\n </div>\r\n</Scrollspy>\r\n\r\n@code {\r\n private string? _active;\r\n}"
31873
+ "code": "<Scrollspy Class=\"flex gap-4\" @bind-ActiveId=\"_active\">\n <nav class=\"flex flex-col gap-1 w-40 shrink-0\">\n <ScrollspyLink Target=\"section-1\"\n Class=\"px-3 py-1.5 rounded-md text-sm font-medium text-muted-foreground\n data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\">\n Section 1\n </ScrollspyLink>\n <ScrollspyLink Target=\"section-2\" Class=\"...\">Section 2</ScrollspyLink>\n <ScrollspyLink Target=\"section-3\" Class=\"...\">Section 3</ScrollspyLink>\n </nav>\n <div class=\"flex-1 overflow-y-auto h-[400px] rounded-md border border-border/40\">\n <ScrollspySection Id=\"section-1\" Class=\"p-6 min-h-[300px]\">\n <h3>Section 1</h3>\n <p>Content for section 1...</p>\n </ScrollspySection>\n <ScrollspySection Id=\"section-2\" Class=\"p-6 min-h-[300px]\">\n <h3>Section 2</h3>\n <p>Content for section 2...</p>\n </ScrollspySection>\n <ScrollspySection Id=\"section-3\" Class=\"p-6 min-h-[300px]\">\n <h3>Section 3</h3>\n <p>Content for section 3...</p>\n </ScrollspySection>\n </div>\n</Scrollspy>\n\n@code {\n private string? _active;\n}"
31308
31874
  },
31309
31875
  {
31310
31876
  "title": "Horizontal Nav",
31311
- "code": "<Scrollspy Class=\"flex flex-col\" @bind-ActiveId=\"_active\">\r\n <nav class=\"flex gap-1 mb-4 border-b pb-2\">\r\n <ScrollspyLink Target=\"section-1\"\r\n Class=\"px-3 py-1.5 rounded-md text-sm font-medium text-muted-foreground\r\n data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\">\r\n Section 1\r\n </ScrollspyLink>\r\n <ScrollspyLink Target=\"section-2\" Class=\"...\">Section 2</ScrollspyLink>\r\n </nav>\r\n <div class=\"overflow-y-auto h-[400px] rounded-md border border-border/40\">\r\n <ScrollspySection Id=\"section-1\" Class=\"p-6 min-h-[300px]\">\r\n <h3>Section 1</h3>\r\n <p>Content...</p>\r\n </ScrollspySection>\r\n <ScrollspySection Id=\"section-2\" Class=\"p-6 min-h-[300px]\">\r\n <h3>Section 2</h3>\r\n <p>Content...</p>\r\n </ScrollspySection>\r\n </div>\r\n</Scrollspy>\r\n\r\n@code {\r\n private string? _active;\r\n}"
31877
+ "code": "<Scrollspy Class=\"flex flex-col\" @bind-ActiveId=\"_active\">\n <nav class=\"flex gap-1 mb-4 border-b pb-2\">\n <ScrollspyLink Target=\"section-1\"\n Class=\"px-3 py-1.5 rounded-md text-sm font-medium text-muted-foreground\n data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\">\n Section 1\n </ScrollspyLink>\n <ScrollspyLink Target=\"section-2\" Class=\"...\">Section 2</ScrollspyLink>\n </nav>\n <div class=\"overflow-y-auto h-[400px] rounded-md border border-border/40\">\n <ScrollspySection Id=\"section-1\" Class=\"p-6 min-h-[300px]\">\n <h3>Section 1</h3>\n <p>Content...</p>\n </ScrollspySection>\n <ScrollspySection Id=\"section-2\" Class=\"p-6 min-h-[300px]\">\n <h3>Section 2</h3>\n <p>Content...</p>\n </ScrollspySection>\n </div>\n</Scrollspy>\n\n@code {\n private string? _active;\n}"
31312
31878
  }
31313
31879
  ],
31314
31880
  "subComponents": {
@@ -31904,7 +32470,7 @@
31904
32470
  "records": [
31905
32471
  {
31906
32472
  "name": "SelectContext",
31907
- "signature": "SelectContext(\r\n string? Value, bool IsOpen, bool Searchable, string SearchText,\r\n bool Multiple, List<string>? Values, bool IsLoading, bool Disabled, bool Clearable, bool Creatable, int MaxDisplayTags,\r\n EventCallback<string> OnSelect, EventCallback<bool> SetOpen, EventCallback<string> OnSearch,\r\n EventCallback OnClear, EventCallback<string> OnCreateItem,\r\n string WrapperId, string ContentId, int FocusedIndex, string? FocusedItemId, string? FocusedItemValue,\r\n EventCallback<int> SetFocusedIndex,\r\n Action<string, string> RegisterItem, Action<string> UnregisterItem,\r\n bool Invalid, bool Required,\r\n // Data-bound mode params (null when composition mode)\r\n IEnumerable<object>? Items,\r\n Func<object, string> ItemValue,\r\n Func<object, string>? ItemText,\r\n Func<object, string?>? ItemGroup,\r\n Func<object, bool>? ItemDisabled,\r\n RenderFragment<object>? ItemTemplate,\r\n bool Virtualize,\r\n float ItemSize)",
32473
+ "signature": "SelectContext(\n string? Value, bool IsOpen, bool Searchable, string SearchText,\n bool Multiple, List<string>? Values, bool IsLoading, bool Disabled, bool Clearable, bool Creatable, int MaxDisplayTags,\n EventCallback<string> OnSelect, EventCallback<bool> SetOpen, EventCallback<string> OnSearch,\n EventCallback OnClear, EventCallback<string> OnCreateItem,\n string WrapperId, string ContentId, int FocusedIndex, string? FocusedItemId, string? FocusedItemValue,\n EventCallback<int> SetFocusedIndex,\n Action<string, string> RegisterItem, Action<string> UnregisterItem,\n bool Invalid, bool Required,\n // Data-bound mode params (null when composition mode)\n IEnumerable<object>? Items,\n Func<object, string> ItemValue,\n Func<object, string>? ItemText,\n Func<object, string?>? ItemGroup,\n Func<object, bool>? ItemDisabled,\n RenderFragment<object>? ItemTemplate,\n bool Virtualize,\n float ItemSize)",
31908
32474
  "description": null
31909
32475
  }
31910
32476
  ],
@@ -31928,19 +32494,19 @@
31928
32494
  "examples": [
31929
32495
  {
31930
32496
  "title": "Default",
31931
- "code": "<Select @bind-Value=\"_selected\">\r\n <SelectTrigger>\r\n <span>@(_selected ?? \"Select a fruit\")</span>\r\n </SelectTrigger>\r\n <SelectContent>\r\n <SelectItem Value=\"apple\">Apple</SelectItem>\r\n <SelectItem Value=\"banana\">Banana</SelectItem>\r\n <SelectItem Value=\"cherry\">Cherry</SelectItem>\r\n </SelectContent>\r\n</Select>\r\n\r\n@code {\r\n private string? _selected;\r\n}"
32497
+ "code": "<Select @bind-Value=\"_selected\">\n <SelectTrigger>\n <span>@(_selected ?? \"Select a fruit\")</span>\n </SelectTrigger>\n <SelectContent>\n <SelectItem Value=\"apple\">Apple</SelectItem>\n <SelectItem Value=\"banana\">Banana</SelectItem>\n <SelectItem Value=\"cherry\">Cherry</SelectItem>\n </SelectContent>\n</Select>\n\n@code {\n private string? _selected;\n}"
31932
32498
  },
31933
32499
  {
31934
32500
  "title": "With Binding",
31935
- "code": "<Select @bind-Value=\"_selected\">\r\n <SelectTrigger>\r\n <span>@(_selected ?? \"Select a framework\")</span>\r\n </SelectTrigger>\r\n <SelectContent>\r\n <SelectItem Value=\"blazor\">Blazor</SelectItem>\r\n <SelectItem Value=\"react\">React</SelectItem>\r\n <SelectItem Value=\"vue\">Vue</SelectItem>\r\n </SelectContent>\r\n</Select>\r\n<Lumeo.Text Size=\"sm\" Color=\"muted\">Selected: @(_selected ?? \"none\")</Lumeo.Text>"
32501
+ "code": "<Select @bind-Value=\"_selected\">\n <SelectTrigger>\n <span>@(_selected ?? \"Select a framework\")</span>\n </SelectTrigger>\n <SelectContent>\n <SelectItem Value=\"blazor\">Blazor</SelectItem>\n <SelectItem Value=\"react\">React</SelectItem>\n <SelectItem Value=\"vue\">Vue</SelectItem>\n </SelectContent>\n</Select>\n<Lumeo.Text Size=\"sm\" Color=\"muted\">Selected: @(_selected ?? \"none\")</Lumeo.Text>"
31936
32502
  },
31937
32503
  {
31938
32504
  "title": "With Groups",
31939
- "code": "<Select @bind-Value=\"_selected\">\r\n <SelectTrigger>\r\n <span>@(_selected ?? \"Select a timezone\")</span>\r\n </SelectTrigger>\r\n <SelectContent>\r\n <SelectGroup>\r\n <SelectLabel>North America</SelectLabel>\r\n <SelectItem Value=\"est\">Eastern (EST)</SelectItem>\r\n <SelectItem Value=\"cst\">Central (CST)</SelectItem>\r\n </SelectGroup>\r\n <SelectGroup>\r\n <SelectLabel>Europe</SelectLabel>\r\n <SelectItem Value=\"gmt\">Greenwich (GMT)</SelectItem>\r\n <SelectItem Value=\"cet\">Central European (CET)</SelectItem>\r\n </SelectGroup>\r\n </SelectContent>\r\n</Select>"
32505
+ "code": "<Select @bind-Value=\"_selected\">\n <SelectTrigger>\n <span>@(_selected ?? \"Select a timezone\")</span>\n </SelectTrigger>\n <SelectContent>\n <SelectGroup>\n <SelectLabel>North America</SelectLabel>\n <SelectItem Value=\"est\">Eastern (EST)</SelectItem>\n <SelectItem Value=\"cst\">Central (CST)</SelectItem>\n </SelectGroup>\n <SelectGroup>\n <SelectLabel>Europe</SelectLabel>\n <SelectItem Value=\"gmt\">Greenwich (GMT)</SelectItem>\n <SelectItem Value=\"cet\">Central European (CET)</SelectItem>\n </SelectGroup>\n </SelectContent>\n</Select>"
31940
32506
  },
31941
32507
  {
31942
32508
  "title": "Searchable",
31943
- "code": "<Select Searchable=\"true\" @bind-Value=\"_selected\">\r\n <SelectTrigger>\r\n <span>@(_selected ?? \"Search countries...\")</span>\r\n </SelectTrigger>\r\n <SelectContent>\r\n <SelectItem Value=\"us\">United States</SelectItem>\r\n <SelectItem Value=\"uk\">United Kingdom</SelectItem>\r\n <SelectItem Value=\"ca\">Canada</SelectItem>\r\n </SelectContent>\r\n</Select>"
32509
+ "code": "<Select Searchable=\"true\" @bind-Value=\"_selected\">\n <SelectTrigger>\n <span>@(_selected ?? \"Search countries...\")</span>\n </SelectTrigger>\n <SelectContent>\n <SelectItem Value=\"us\">United States</SelectItem>\n <SelectItem Value=\"uk\">United Kingdom</SelectItem>\n <SelectItem Value=\"ca\">Canada</SelectItem>\n </SelectContent>\n</Select>"
31944
32510
  }
31945
32511
  ],
31946
32512
  "subComponents": {
@@ -32278,19 +32844,19 @@
32278
32844
  "examples": [
32279
32845
  {
32280
32846
  "title": "Horizontal",
32281
- "code": "<Stack Gap=\"1\">\r\n <Heading Level=\"4\" Size=\"sm\" Weight=\"medium\" Class=\"leading-none\">Lumeo UI</Heading>\r\n <Lumeo.Text Size=\"sm\" Color=\"muted\">An open-source component library for Blazor.</Lumeo.Text>\r\n</Stack>\r\n<Separator Class=\"my-4\" />\r\n<Flex Gap=\"4\" Align=\"center\" Class=\"h-5 text-sm\">\r\n <Lumeo.Text As=\"span\" Size=\"sm\">Docs</Lumeo.Text>\r\n <Separator Orientation=\"Separator.SeparatorOrientation.Vertical\" />\r\n <Lumeo.Text As=\"span\" Size=\"sm\">Source</Lumeo.Text>\r\n <Separator Orientation=\"Separator.SeparatorOrientation.Vertical\" />\r\n <Lumeo.Text As=\"span\" Size=\"sm\">Blog</Lumeo.Text>\r\n</Flex>"
32847
+ "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>"
32282
32848
  },
32283
32849
  {
32284
32850
  "title": "In a Card",
32285
- "code": "<Card>\r\n <CardContent Class=\"pt-4\">\r\n <Stack Gap=\"3\">\r\n <Flex Align=\"center\" Justify=\"between\" Class=\"text-sm\">\r\n <Lumeo.Text As=\"span\" Size=\"sm\" Color=\"muted\">Subtotal</Lumeo.Text>\r\n <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"medium\">$89.00</Lumeo.Text>\r\n </Flex>\r\n <Flex Align=\"center\" Justify=\"between\" Class=\"text-sm\">\r\n <Lumeo.Text As=\"span\" Size=\"sm\" Color=\"muted\">Shipping</Lumeo.Text>\r\n <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"medium\">$4.99</Lumeo.Text>\r\n </Flex>\r\n <Separator />\r\n <Flex Align=\"center\" Justify=\"between\" Class=\"text-sm font-semibold\">\r\n <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"semibold\">Total</Lumeo.Text>\r\n <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"semibold\">$93.99</Lumeo.Text>\r\n </Flex>\r\n </Stack>\r\n </CardContent>\r\n</Card>"
32851
+ "code": "<Card>\n <CardContent Class=\"pt-4\">\n <Stack Gap=\"3\">\n <Flex Align=\"center\" Justify=\"between\" Class=\"text-sm\">\n <Lumeo.Text As=\"span\" Size=\"sm\" Color=\"muted\">Subtotal</Lumeo.Text>\n <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"medium\">$89.00</Lumeo.Text>\n </Flex>\n <Flex Align=\"center\" Justify=\"between\" Class=\"text-sm\">\n <Lumeo.Text As=\"span\" Size=\"sm\" Color=\"muted\">Shipping</Lumeo.Text>\n <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"medium\">$4.99</Lumeo.Text>\n </Flex>\n <Separator />\n <Flex Align=\"center\" Justify=\"between\" Class=\"text-sm font-semibold\">\n <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"semibold\">Total</Lumeo.Text>\n <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"semibold\">$93.99</Lumeo.Text>\n </Flex>\n </Stack>\n </CardContent>\n</Card>"
32286
32852
  },
32287
32853
  {
32288
32854
  "title": "Vertical",
32289
- "code": "<Flex Gap=\"4\" Align=\"center\" Class=\"h-5 text-sm\">\r\n <Lumeo.Text As=\"span\" Size=\"sm\">Home</Lumeo.Text>\r\n <Separator Orientation=\"Separator.SeparatorOrientation.Vertical\" />\r\n <Lumeo.Text As=\"span\" Size=\"sm\">Components</Lumeo.Text>\r\n <Separator Orientation=\"Separator.SeparatorOrientation.Vertical\" />\r\n <Lumeo.Text As=\"span\" Size=\"sm\">Themes</Lumeo.Text>\r\n <Separator Orientation=\"Separator.SeparatorOrientation.Vertical\" />\r\n <Lumeo.Text As=\"span\" Size=\"sm\">GitHub</Lumeo.Text>\r\n</Flex>"
32855
+ "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>"
32290
32856
  },
32291
32857
  {
32292
32858
  "title": "With Label",
32293
- "code": "<Separator>or continue with</Separator>\r\n<Separator>Section Title</Separator>"
32859
+ "code": "<Separator>or continue with</Separator>\n<Separator>Section Title</Separator>"
32294
32860
  }
32295
32861
  ],
32296
32862
  "subComponents": {},
@@ -32388,19 +32954,19 @@
32388
32954
  "examples": [
32389
32955
  {
32390
32956
  "title": "Default (Right)",
32391
- "code": "<Sheet @bind-Open=\"_isOpen\">\r\n <SheetTrigger>\r\n <Button Variant=\"Button.ButtonVariant.Outline\">Open Sheet</Button>\r\n </SheetTrigger>\r\n <SheetContent>\r\n <SheetHeader>\r\n <SheetTitle>Edit Profile</SheetTitle>\r\n <SheetDescription>Make changes to your profile here.</SheetDescription>\r\n </SheetHeader>\r\n <Grid Columns=\"4\" Gap=\"4\" Class=\"items-center py-4\">\r\n <Label Class=\"text-right\">Name</Label>\r\n <Input Class=\"col-span-3\" Value=\"John Doe\" />\r\n </Grid>\r\n <SheetFooter>\r\n <SheetClose>\r\n <Button>Save Changes</Button>\r\n </SheetClose>\r\n </SheetFooter>\r\n </SheetContent>\r\n</Sheet>\r\n\r\n@code {\r\n private bool _isOpen;\r\n}"
32957
+ "code": "<Sheet @bind-Open=\"_isOpen\">\n <SheetTrigger>\n <Button Variant=\"Button.ButtonVariant.Outline\">Open Sheet</Button>\n </SheetTrigger>\n <SheetContent>\n <SheetHeader>\n <SheetTitle>Edit Profile</SheetTitle>\n <SheetDescription>Make changes to your profile here.</SheetDescription>\n </SheetHeader>\n <Grid Columns=\"4\" Gap=\"4\" Class=\"items-center py-4\">\n <Label Class=\"text-right\">Name</Label>\n <Input Class=\"col-span-3\" Value=\"John Doe\" />\n </Grid>\n <SheetFooter>\n <SheetClose>\n <Button>Save Changes</Button>\n </SheetClose>\n </SheetFooter>\n </SheetContent>\n</Sheet>\n\n@code {\n private bool _isOpen;\n}"
32392
32958
  },
32393
32959
  {
32394
32960
  "title": "Side Variations",
32395
- "code": "<Sheet @bind-Open=\"_isTopOpen\">\r\n <SheetTrigger>\r\n <Button Variant=\"Button.ButtonVariant.Outline\">Top</Button>\r\n </SheetTrigger>\r\n <SheetContent Side=\"SheetContent.SheetSide.Top\">\r\n <SheetHeader>\r\n <SheetTitle>Top Sheet</SheetTitle>\r\n <SheetDescription>This sheet slides in from the top.</SheetDescription>\r\n </SheetHeader>\r\n </SheetContent>\r\n</Sheet>\r\n\r\n<Sheet @bind-Open=\"_isLeftOpen\">\r\n <SheetTrigger>\r\n <Button Variant=\"Button.ButtonVariant.Outline\">Left</Button>\r\n </SheetTrigger>\r\n <SheetContent Side=\"SheetContent.SheetSide.Left\">\r\n <SheetHeader>\r\n <SheetTitle>Left Sheet</SheetTitle>\r\n <SheetDescription>This sheet slides in from the left.</SheetDescription>\r\n </SheetHeader>\r\n </SheetContent>\r\n</Sheet>"
32961
+ "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>"
32396
32962
  },
32397
32963
  {
32398
32964
  "title": "Sizes",
32399
- "code": "@foreach (var size in Enum.GetValues<SheetContent.SheetSize>())\r\n{\r\n <Sheet @bind-Open=\"@_sheetSizeOpen[size]\">\r\n <SheetTrigger>\r\n <Button Variant=\"Button.ButtonVariant.Outline\">@size</Button>\r\n </SheetTrigger>\r\n <SheetContent Size=\"@size\">\r\n <SheetHeader>\r\n <SheetTitle>@size Sheet</SheetTitle>\r\n <SheetDescription>This sheet uses Size=\"SheetContent.SheetSize.@size\"</SheetDescription>\r\n </SheetHeader>\r\n <Stack Gap=\"4\" Class=\"py-4\">\r\n <Lumeo.Text Size=\"sm\" Color=\"muted\">Sheet content goes here.</Lumeo.Text>\r\n </Stack>\r\n </SheetContent>\r\n </Sheet>\r\n}\r\n\r\n@code {\r\n private Dictionary<SheetContent.SheetSize, bool> _sheetSizeOpen =\r\n Enum.GetValues<SheetContent.SheetSize>().ToDictionary(s => s, _ => false);\r\n}"
32965
+ "code": "@foreach (var size in Enum.GetValues<SheetContent.SheetSize>())\n{\n <Sheet @bind-Open=\"@_sheetSizeOpen[size]\">\n <SheetTrigger>\n <Button Variant=\"Button.ButtonVariant.Outline\">@size</Button>\n </SheetTrigger>\n <SheetContent Size=\"@size\">\n <SheetHeader>\n <SheetTitle>@size Sheet</SheetTitle>\n <SheetDescription>This sheet uses Size=\"SheetContent.SheetSize.@size\"</SheetDescription>\n </SheetHeader>\n <Stack Gap=\"4\" Class=\"py-4\">\n <Lumeo.Text Size=\"sm\" Color=\"muted\">Sheet content goes here.</Lumeo.Text>\n </Stack>\n </SheetContent>\n </Sheet>\n}\n\n@code {\n private Dictionary<SheetContent.SheetSize, bool> _sheetSizeOpen =\n Enum.GetValues<SheetContent.SheetSize>().ToDictionary(s => s, _ => false);\n}"
32400
32966
  },
32401
32967
  {
32402
32968
  "title": "Prevent Close",
32403
- "code": "<Sheet @bind-Open=\"_preventSheetOpen\">\r\n <SheetTrigger>\r\n <Button Variant=\"Button.ButtonVariant.Outline\">Open Protected Sheet</Button>\r\n </SheetTrigger>\r\n <SheetContent PreventClose=\"true\">\r\n <SheetHeader>\r\n <SheetTitle>Protected Sheet</SheetTitle>\r\n <SheetDescription>This sheet cannot be dismissed by clicking outside.</SheetDescription>\r\n </SheetHeader>\r\n <Stack Gap=\"4\" Class=\"py-4\">\r\n <Button OnClick=\"@(() => _preventSheetOpen = false)\">Close Sheet</Button>\r\n </Stack>\r\n </SheetContent>\r\n</Sheet>\r\n\r\n@code {\r\n private bool _preventSheetOpen;\r\n}"
32969
+ "code": "<Sheet @bind-Open=\"_preventSheetOpen\">\n <SheetTrigger>\n <Button Variant=\"Button.ButtonVariant.Outline\">Open Protected Sheet</Button>\n </SheetTrigger>\n <SheetContent PreventClose=\"true\">\n <SheetHeader>\n <SheetTitle>Protected Sheet</SheetTitle>\n <SheetDescription>This sheet cannot be dismissed by clicking outside.</SheetDescription>\n </SheetHeader>\n <Stack Gap=\"4\" Class=\"py-4\">\n <Button OnClick=\"@(() => _preventSheetOpen = false)\">Close Sheet</Button>\n </Stack>\n </SheetContent>\n</Sheet>\n\n@code {\n private bool _preventSheetOpen;\n}"
32404
32970
  }
32405
32971
  ],
32406
32972
  "subComponents": {
@@ -32515,6 +33081,14 @@
32515
33081
  "isCascading": false,
32516
33082
  "captureUnmatched": false
32517
33083
  },
33084
+ {
33085
+ "name": "SwipeToClose",
33086
+ "type": "bool",
33087
+ "default": "false",
33088
+ "description": "When true, the sheet can be dismissed by swiping in the direction opposite to its Side (e.g. swipe-down on a Bottom sheet). Default false to avoid conflicts with scrollable content. Wire to true only when the sheet's content fits without scrolling.",
33089
+ "isCascading": false,
33090
+ "captureUnmatched": false
33091
+ },
32518
33092
  {
32519
33093
  "name": "Class",
32520
33094
  "type": "string?",
@@ -33017,19 +33591,19 @@
33017
33591
  "examples": [
33018
33592
  {
33019
33593
  "title": "Push (Default)",
33020
- "code": "<SidebarProvider @bind-IsCollapsed=\"_isCollapsed\">\r\n <SidebarComponent>\r\n <SidebarHeader>\r\n <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"semibold\">Acme Inc</Lumeo.Text>\r\n </SidebarHeader>\r\n <SidebarContent>\r\n <SidebarGroup>\r\n <SidebarGroupLabel>Platform</SidebarGroupLabel>\r\n <SidebarMenu>\r\n <SidebarMenuItem>\r\n <SidebarMenuButton Href=\"#\" IsActive=\"true\">\r\n <IconContent><Blazicon Svg=\"Lucide.House\" class=\"h-4 w-4\" /></IconContent>\r\n <LabelContent><span>Dashboard</span></LabelContent>\r\n </SidebarMenuButton>\r\n </SidebarMenuItem>\r\n </SidebarMenu>\r\n </SidebarGroup>\r\n </SidebarContent>\r\n <SidebarFooter>\r\n <Avatar Src=\"\" Fallback=\"CN\" />\r\n </SidebarFooter>\r\n </SidebarComponent>\r\n <main class=\"flex-1 p-6\">\r\n <SidebarTrigger />\r\n </main>\r\n</SidebarProvider>"
33594
+ "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 Src=\"\" Fallback=\"CN\" />\n </SidebarFooter>\n </SidebarComponent>\n <main class=\"flex-1 p-6\">\n <SidebarTrigger />\n </main>\n</SidebarProvider>"
33021
33595
  },
33022
33596
  {
33023
33597
  "title": "Overlay",
33024
- "code": "<SidebarProvider @bind-IsCollapsed=\"_isCollapsed\" Variant=\"SidebarProvider.SidebarVariant.Overlay\">\r\n <SidebarComponent>\r\n <SidebarHeader>\r\n <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"semibold\">Workspace</Lumeo.Text>\r\n </SidebarHeader>\r\n <SidebarContent>\r\n <SidebarGroup>\r\n <SidebarGroupLabel>Navigation</SidebarGroupLabel>\r\n <SidebarMenu>\r\n <SidebarMenuItem>\r\n <SidebarMenuButton Href=\"#\" IsActive=\"true\">\r\n <IconContent><Blazicon Svg=\"Lucide.House\" class=\"h-4 w-4\" /></IconContent>\r\n <LabelContent><span>Home</span></LabelContent>\r\n </SidebarMenuButton>\r\n </SidebarMenuItem>\r\n </SidebarMenu>\r\n </SidebarGroup>\r\n </SidebarContent>\r\n </SidebarComponent>\r\n <main class=\"flex-1 p-6\">\r\n <SidebarTrigger />\r\n <Lumeo.Text Size=\"sm\" Color=\"muted\">Click backdrop to dismiss.</Lumeo.Text>\r\n </main>\r\n</SidebarProvider>"
33598
+ "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>"
33025
33599
  },
33026
33600
  {
33027
33601
  "title": "Side — interactive",
33028
- "code": "<Segmented @bind-Value=\"_sidebarSideSel\" Options=\"_sidebarSideOptions\" />\r\n<SidebarProvider>\r\n <SidebarComponent Side=\"@_activeSidebarSide\">\r\n <SidebarHeader>...</SidebarHeader>\r\n <SidebarContent>...</SidebarContent>\r\n </SidebarComponent>\r\n <main class=\"flex-1 p-6\">\r\n <SidebarTrigger />\r\n </main>\r\n</SidebarProvider>\r\n\r\n@code {\r\n private string _sidebarSideSel = \"Left\";\r\n private SidebarComponent.SidebarSide _activeSidebarSide =>\r\n Enum.Parse<SidebarComponent.SidebarSide>(_sidebarSideSel);\r\n private List<Segmented.SegmentedOption> _sidebarSideOptions = new()\r\n {\r\n new() { Label = \"Left\", Value = \"Left\" },\r\n new() { Label = \"Right\", Value = \"Right\" },\r\n };\r\n}"
33602
+ "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}"
33029
33603
  },
33030
33604
  {
33031
33605
  "title": "Icon",
33032
- "code": "<SidebarProvider @bind-IsCollapsed=\"_isCollapsed\" Variant=\"SidebarProvider.SidebarVariant.Icon\">\r\n <SidebarComponent>\r\n <SidebarContent>\r\n <SidebarGroup>\r\n <SidebarMenu>\r\n <SidebarMenuItem>\r\n <SidebarMenuButton Href=\"#\" IsActive=\"true\" Tooltip=\"Home\">\r\n <IconContent><Blazicon Svg=\"Lucide.House\" class=\"h-4 w-4\" /></IconContent>\r\n <LabelContent><span>Home</span></LabelContent>\r\n </SidebarMenuButton>\r\n </SidebarMenuItem>\r\n </SidebarMenu>\r\n </SidebarGroup>\r\n </SidebarContent>\r\n </SidebarComponent>\r\n <main class=\"flex-1 p-6\">\r\n <SidebarTrigger />\r\n <Lumeo.Text Size=\"sm\" Color=\"muted\">Toggle to expand with labels.</Lumeo.Text>\r\n </main>\r\n</SidebarProvider>"
33606
+ "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>"
33033
33607
  }
33034
33608
  ],
33035
33609
  "subComponents": {
@@ -33611,19 +34185,19 @@
33611
34185
  "examples": [
33612
34186
  {
33613
34187
  "title": "Basic Shapes",
33614
- "code": "<Stack Gap=\"4\">\r\n <Skeleton Class=\"h-4 w-[250px]\" />\r\n <Skeleton Class=\"h-4 w-[200px]\" />\r\n <Skeleton Class=\"h-4 w-[150px]\" />\r\n</Stack>"
34188
+ "code": "<Stack Gap=\"4\">\n <Skeleton Class=\"h-4 w-[250px]\" />\n <Skeleton Class=\"h-4 w-[200px]\" />\n <Skeleton Class=\"h-4 w-[150px]\" />\n</Stack>"
33615
34189
  },
33616
34190
  {
33617
34191
  "title": "Card Skeleton",
33618
- "code": "<Card>\r\n <CardHeader>\r\n <Skeleton Class=\"h-5 w-[180px]\" />\r\n <Skeleton Class=\"h-4 w-[250px]\" />\r\n </CardHeader>\r\n <CardContent>\r\n <Stack Gap=\"2\">\r\n <Skeleton Class=\"h-4 w-full\" />\r\n <Skeleton Class=\"h-4 w-full\" />\r\n <Skeleton Class=\"h-4 w-[80%]\" />\r\n </Stack>\r\n </CardContent>\r\n</Card>"
34192
+ "code": "<Card>\n <CardHeader>\n <Skeleton Class=\"h-5 w-[180px]\" />\n <Skeleton Class=\"h-4 w-[250px]\" />\n </CardHeader>\n <CardContent>\n <Stack Gap=\"2\">\n <Skeleton Class=\"h-4 w-full\" />\n <Skeleton Class=\"h-4 w-full\" />\n <Skeleton Class=\"h-4 w-[80%]\" />\n </Stack>\n </CardContent>\n</Card>"
33619
34193
  },
33620
34194
  {
33621
34195
  "title": "Profile Skeleton",
33622
- "code": "<Flex Align=\"center\" Gap=\"4\">\r\n <Skeleton Class=\"h-12 w-12 rounded-full\" />\r\n <Stack Gap=\"2\">\r\n <Skeleton Class=\"h-4 w-[200px]\" />\r\n <Skeleton Class=\"h-4 w-[160px]\" />\r\n </Stack>\r\n</Flex>"
34196
+ "code": "<Flex Align=\"center\" Gap=\"4\">\n <Skeleton Class=\"h-12 w-12 rounded-full\" />\n <Stack Gap=\"2\">\n <Skeleton Class=\"h-4 w-[200px]\" />\n <Skeleton Class=\"h-4 w-[160px]\" />\n </Stack>\n</Flex>"
33623
34197
  },
33624
34198
  {
33625
34199
  "title": "List Skeleton",
33626
- "code": "@for (var i = 0; i < 3; i++)\r\n{\r\n <Flex Align=\"center\" Gap=\"4\">\r\n <Skeleton Class=\"h-10 w-10 rounded-full\" />\r\n <Stack Gap=\"2\" Class=\"flex-1\">\r\n <Skeleton Class=\"h-4 w-[60%]\" />\r\n <Skeleton Class=\"h-3 w-[40%]\" />\r\n </Stack>\r\n </Flex>\r\n}"
34200
+ "code": "@for (var i = 0; i < 3; i++)\n{\n <Flex Align=\"center\" Gap=\"4\">\n <Skeleton Class=\"h-10 w-10 rounded-full\" />\n <Stack Gap=\"2\" Class=\"flex-1\">\n <Skeleton Class=\"h-4 w-[60%]\" />\n <Skeleton Class=\"h-3 w-[40%]\" />\n </Stack>\n </Flex>\n}"
33627
34201
  }
33628
34202
  ],
33629
34203
  "subComponents": {
@@ -33993,15 +34567,15 @@
33993
34567
  "examples": [
33994
34568
  {
33995
34569
  "title": "Default",
33996
- "code": "<Slider @bind-Value=\"_value\" />\r\n<Lumeo.Text Size=\"sm\" Color=\"muted\">Value: @_value</Lumeo.Text>\r\n\r\n@code {\r\n private double _value = 50;\r\n}"
34570
+ "code": "<Slider @bind-Value=\"_value\" />\n<Lumeo.Text Size=\"sm\" Color=\"muted\">Value: @_value</Lumeo.Text>\n\n@code {\n private double _value = 50;\n}"
33997
34571
  },
33998
34572
  {
33999
34573
  "title": "Custom Range",
34000
- "code": "<Slider @bind-Value=\"_value\" Min=\"0\" Max=\"1000\" Step=\"50\" />\r\n\r\n@code {\r\n private double _value = 500;\r\n}"
34574
+ "code": "<Slider @bind-Value=\"_value\" Min=\"0\" Max=\"1000\" Step=\"50\" />\n\n@code {\n private double _value = 500;\n}"
34001
34575
  },
34002
34576
  {
34003
34577
  "title": "Step Values",
34004
- "code": "<Slider @bind-Value=\"_value\" Min=\"0\" Max=\"10\" Step=\"1\" />\r\n\r\n@code {\r\n private double _value = 5;\r\n}"
34578
+ "code": "<Slider @bind-Value=\"_value\" Min=\"0\" Max=\"10\" Step=\"1\" />\n\n@code {\n private double _value = 5;\n}"
34005
34579
  },
34006
34580
  {
34007
34581
  "title": "Disabled",
@@ -34023,7 +34597,9 @@
34023
34597
  ],
34024
34598
  "namespace": "Lumeo",
34025
34599
  "inheritsFrom": null,
34026
- "implements": [],
34600
+ "implements": [
34601
+ "IAsyncDisposable"
34602
+ ],
34027
34603
  "parameters": [
34028
34604
  {
34029
34605
  "name": "Items",
@@ -34185,11 +34761,11 @@
34185
34761
  "examples": [
34186
34762
  {
34187
34763
  "title": "Flex Spacer",
34188
- "code": "<Flex Align=\"center\">\r\n <Text Weight=\"semibold\">Brand</Text>\r\n <Spacer />\r\n <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\">Login</Button>\r\n</Flex>"
34764
+ "code": "<Flex Align=\"center\">\n <Text Weight=\"semibold\">Brand</Text>\n <Spacer />\n <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\">Login</Button>\n</Flex>"
34189
34765
  },
34190
34766
  {
34191
34767
  "title": "Fixed Size",
34192
- "code": "<Stack Direction=\"Stack.StackDirection.Horizontal\" Align=\"center\">\r\n <Avatar />\r\n <Spacer Size=\"4\" />\r\n <Stack Gap=\"0\">\r\n <Text Weight=\"medium\" Size=\"sm\">Jane Doe</Text>\r\n <Text Color=\"muted\" Size=\"xs\">jane@example.com</Text>\r\n </Stack>\r\n</Stack>"
34768
+ "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>"
34193
34769
  }
34194
34770
  ],
34195
34771
  "subComponents": {},
@@ -34664,7 +35240,7 @@
34664
35240
  "examples": [
34665
35241
  {
34666
35242
  "title": "Basic Speed Dial (Bottom Right)",
34667
- "code": "<SpeedDial Items=\"@_actions\" />\r\n\r\n@code {\r\n private List<SpeedDial.SpeedDialItem> _actions = new()\r\n {\r\n new() { Label = \"New Document\", Icon = \"\uD83D\uDCC4\" },\r\n new() { Label = \"Upload File\", Icon = \"\uD83D\uDCC1\" },\r\n new() { Label = \"Add Reminder\", Icon = \"\uD83D\uDD14\" },\r\n };\r\n}"
35243
+ "code": "<SpeedDial Items=\"@_actions\" />\n\n@code {\n private List<SpeedDial.SpeedDialItem> _actions = new()\n {\n new() { Label = \"New Document\", Icon = \"\uD83D\uDCC4\" },\n new() { Label = \"Upload File\", Icon = \"\uD83D\uDCC1\" },\n new() { Label = \"Add Reminder\", Icon = \"\uD83D\uDD14\" },\n };\n}"
34668
35244
  },
34669
35245
  {
34670
35246
  "title": "Bottom Left Position",
@@ -34672,7 +35248,7 @@
34672
35248
  },
34673
35249
  {
34674
35250
  "title": "Direction: Left",
34675
- "code": "<SpeedDial Items=\"@_actions\"\r\n Position=\"SpeedDial.SpeedDialPosition.TopRight\"\r\n Direction=\"SpeedDial.SpeedDialDirection.Left\" />"
35251
+ "code": "<SpeedDial Items=\"@_actions\"\n Position=\"SpeedDial.SpeedDialPosition.TopRight\"\n Direction=\"SpeedDial.SpeedDialDirection.Left\" />"
34676
35252
  }
34677
35253
  ],
34678
35254
  "subComponents": {},
@@ -34771,19 +35347,19 @@
34771
35347
  "examples": [
34772
35348
  {
34773
35349
  "title": "Sizes",
34774
- "code": "<Spinner Size=\"Spinner.SpinnerSize.Sm\" />\r\n<Spinner />\r\n<Spinner Size=\"Spinner.SpinnerSize.Lg\" />"
35350
+ "code": "<Spinner Size=\"Spinner.SpinnerSize.Sm\" />\n<Spinner />\n<Spinner Size=\"Spinner.SpinnerSize.Lg\" />"
34775
35351
  },
34776
35352
  {
34777
35353
  "title": "With Text",
34778
- "code": "<Flex Align=\"center\" Gap=\"2\">\r\n <Spinner Size=\"Spinner.SpinnerSize.Sm\" />\r\n <Lumeo.Text As=\"span\" Size=\"sm\" Color=\"muted\">Loading...</Lumeo.Text>\r\n</Flex>"
35354
+ "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>"
34779
35355
  },
34780
35356
  {
34781
35357
  "title": "In a Button",
34782
- "code": "<Button Disabled=\"true\">\r\n <Spinner Size=\"Spinner.SpinnerSize.Sm\" Class=\"mr-2\" />\r\n Please wait\r\n</Button>"
35358
+ "code": "<Button Disabled=\"true\">\n <Spinner Size=\"Spinner.SpinnerSize.Sm\" Class=\"mr-2\" />\n Please wait\n</Button>"
34783
35359
  },
34784
35360
  {
34785
35361
  "title": "Variant — interactive",
34786
- "code": "<Spinner Variant=\"Spinner.SpinnerVariant.Ring\" />\r\n<Spinner Variant=\"Spinner.SpinnerVariant.Dots\" />\r\n<Spinner Variant=\"Spinner.SpinnerVariant.Bars\" />"
35362
+ "code": "<Spinner Variant=\"Spinner.SpinnerVariant.Ring\" />\n<Spinner Variant=\"Spinner.SpinnerVariant.Dots\" />\n<Spinner Variant=\"Spinner.SpinnerVariant.Bars\" />"
34787
35363
  }
34788
35364
  ],
34789
35365
  "subComponents": {},
@@ -34972,7 +35548,7 @@
34972
35548
  "records": [
34973
35549
  {
34974
35550
  "name": "SplitterContext",
34975
- "signature": "SplitterContext(\r\n string GroupId,\r\n SplitterOrientation Orientation,\r\n List<object> Children,\r\n Action<object> RegisterChild,\r\n Action<object> UnregisterChild,\r\n Func<object, double, Task> ResizeNeighbors\r\n )",
35551
+ "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 )",
34976
35552
  "description": null
34977
35553
  }
34978
35554
  ],
@@ -34984,19 +35560,19 @@
34984
35560
  "examples": [
34985
35561
  {
34986
35562
  "title": "Two Panes — Horizontal",
34987
- "code": "<Splitter Orientation=\"Splitter.SplitterOrientation.Horizontal\"\r\n Class=\"min-h-[200px] rounded-lg border\">\r\n <SplitterPane Size=\"50\">Left</SplitterPane>\r\n <SplitterDivider />\r\n <SplitterPane Size=\"50\">Right</SplitterPane>\r\n</Splitter>"
35563
+ "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>"
34988
35564
  },
34989
35565
  {
34990
35566
  "title": "Three Panes — Sidebar + Main + Aside",
34991
- "code": "<Splitter Orientation=\"Splitter.SplitterOrientation.Horizontal\"\r\n Class=\"min-h-[260px] rounded-lg border\">\r\n <SplitterPane Size=\"20\" MinSize=\"10\">Sidebar</SplitterPane>\r\n <SplitterDivider />\r\n <SplitterPane Size=\"55\">Main</SplitterPane>\r\n <SplitterDivider />\r\n <SplitterPane Size=\"25\" MinSize=\"10\">Aside</SplitterPane>\r\n</Splitter>"
35567
+ "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>"
34992
35568
  },
34993
35569
  {
34994
35570
  "title": "Vertical Stack",
34995
- "code": "<Splitter Orientation=\"Splitter.SplitterOrientation.Vertical\"\r\n Class=\"h-[320px] rounded-lg border\">\r\n <SplitterPane Size=\"60\">Editor</SplitterPane>\r\n <SplitterDivider />\r\n <SplitterPane Size=\"40\">Terminal</SplitterPane>\r\n</Splitter>"
35571
+ "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>"
34996
35572
  },
34997
35573
  {
34998
35574
  "title": "Nested — Horizontal containing Vertical",
34999
- "code": "<Splitter Orientation=\"Splitter.SplitterOrientation.Horizontal\"\r\n Class=\"h-[360px] rounded-lg border\">\r\n <SplitterPane Size=\"25\">Files</SplitterPane>\r\n <SplitterDivider />\r\n <SplitterPane Size=\"75\">\r\n <Splitter Orientation=\"Splitter.SplitterOrientation.Vertical\" Class=\"h-full\">\r\n <SplitterPane Size=\"65\">Code</SplitterPane>\r\n <SplitterDivider />\r\n <SplitterPane Size=\"35\">Output</SplitterPane>\r\n </Splitter>\r\n </SplitterPane>\r\n</Splitter>"
35575
+ "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>"
35000
35576
  }
35001
35577
  ],
35002
35578
  "subComponents": {
@@ -35220,19 +35796,19 @@
35220
35796
  "examples": [
35221
35797
  {
35222
35798
  "title": "Basic Vertical",
35223
- "code": "<Stack Gap=\"3\">\r\n <div>Item 1</div>\r\n <div>Item 2</div>\r\n <div>Item 3</div>\r\n</Stack>"
35799
+ "code": "<Stack Gap=\"3\">\n <div>Item 1</div>\n <div>Item 2</div>\n <div>Item 3</div>\n</Stack>"
35224
35800
  },
35225
35801
  {
35226
35802
  "title": "Horizontal",
35227
- "code": "<Stack Direction=\"Stack.StackDirection.Horizontal\" Gap=\"3\">\r\n <div>Item 1</div>\r\n <div>Item 2</div>\r\n <div>Item 3</div>\r\n</Stack>"
35803
+ "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>"
35228
35804
  },
35229
35805
  {
35230
35806
  "title": "Gap Sizes",
35231
- "code": "<Stack Direction=\"Stack.StackDirection.Horizontal\" Gap=\"1\">...</Stack>\r\n<Stack Direction=\"Stack.StackDirection.Horizontal\" Gap=\"4\">...</Stack>\r\n<Stack Direction=\"Stack.StackDirection.Horizontal\" Gap=\"8\">...</Stack>"
35807
+ "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>"
35232
35808
  },
35233
35809
  {
35234
35810
  "title": "Alignment",
35235
- "code": "<Stack Direction=\"Stack.StackDirection.Horizontal\" Gap=\"4\" Align=\"center\" Justify=\"between\" Class=\"w-full\">\r\n <div>Item 1</div>\r\n <div>Item 2</div>\r\n <div>Item 3</div>\r\n</Stack>"
35811
+ "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>"
35236
35812
  }
35237
35813
  ],
35238
35814
  "subComponents": {},
@@ -35398,19 +35974,19 @@
35398
35974
  "examples": [
35399
35975
  {
35400
35976
  "title": "Basic Statistics",
35401
- "code": "<Statistic Title=\"Total Users\" Value=\"12,847\" />\r\n<Statistic Title=\"Revenue\" Value=\"48250\" Precision=\"2\">\r\n <Prefix><Lumeo.Text As=\"span\">$</Lumeo.Text></Prefix>\r\n</Statistic>"
35977
+ "code": "<Statistic Title=\"Total Users\" Value=\"12,847\" />\n<Statistic Title=\"Revenue\" Value=\"48250\" Precision=\"2\">\n <Prefix><Lumeo.Text As=\"span\">$</Lumeo.Text></Prefix>\n</Statistic>"
35402
35978
  },
35403
35979
  {
35404
35980
  "title": "With Trend",
35405
- "code": "<Statistic Title=\"Sales\" Value=\"1,234\" ShowTrend=\"true\" TrendValue=\"+12.5%\" TrendDirection=\"Statistic.TrendType.Up\" />\r\n<Statistic Title=\"Returns\" Value=\"42\" ShowTrend=\"true\" TrendValue=\"-3.2%\" TrendDirection=\"Statistic.TrendType.Down\" />"
35981
+ "code": "<Statistic Title=\"Sales\" Value=\"1,234\" ShowTrend=\"true\" TrendValue=\"+12.5%\" TrendDirection=\"Statistic.TrendType.Up\" />\n<Statistic Title=\"Returns\" Value=\"42\" ShowTrend=\"true\" TrendValue=\"-3.2%\" TrendDirection=\"Statistic.TrendType.Down\" />"
35406
35982
  },
35407
35983
  {
35408
35984
  "title": "Size (interactive)",
35409
- "code": "<Segmented @bind-Value=\"_size\">\r\n <SegmentedItem Value=\"@Statistic.StatisticSize.Small\">Small</SegmentedItem>\r\n <SegmentedItem Value=\"@Statistic.StatisticSize.Medium\">Medium</SegmentedItem>\r\n <SegmentedItem Value=\"@Statistic.StatisticSize.Large\">Large</SegmentedItem>\r\n</Segmented>\r\n<Statistic Title=\"Monthly Revenue\" Value=\"48,290\" Size=\"@_size\" ShowTrend=\"true\" TrendValue=\"+12%\" TrendDirection=\"Statistic.TrendType.Up\">\r\n <Prefix><Lumeo.Text As=\"span\">$</Lumeo.Text></Prefix>\r\n</Statistic>\r\n\r\n@code { private Statistic.StatisticSize _size = Statistic.StatisticSize.Medium; }"
35985
+ "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; }"
35410
35986
  },
35411
35987
  {
35412
35988
  "title": "Variant (interactive)",
35413
- "code": "<Segmented @bind-Value=\"_variant\">\r\n <SegmentedItem Value=\"@Statistic.StatisticVariant.Default\">Default</SegmentedItem>\r\n <SegmentedItem Value=\"@Statistic.StatisticVariant.Minimal\">Minimal</SegmentedItem>\r\n <SegmentedItem Value=\"@Statistic.StatisticVariant.Bordered\">Bordered</SegmentedItem>\r\n</Segmented>\r\n<Grid Columns=\"3\" Gap=\"4\">\r\n <Statistic Title=\"Users\" Value=\"12,847\" Variant=\"@_variant\" />\r\n <Statistic Title=\"Revenue\" Value=\"48,290\" Variant=\"@_variant\" ShowTrend=\"true\" TrendValue=\"+8%\" TrendDirection=\"Statistic.TrendType.Up\">\r\n <Prefix><Lumeo.Text As=\"span\">$</Lumeo.Text></Prefix>\r\n </Statistic>\r\n <Statistic Title=\"Churn\" Value=\"2.1\" Variant=\"@_variant\" ShowTrend=\"true\" TrendValue=\"-0.3%\" TrendDirection=\"Statistic.TrendType.Down\">\r\n <Suffix><Lumeo.Text As=\"span\">%</Lumeo.Text></Suffix>\r\n </Statistic>\r\n</Grid>\r\n\r\n@code { private Statistic.StatisticVariant _variant = Statistic.StatisticVariant.Default; }"
35989
+ "code": "<Segmented @bind-Value=\"_variant\">\n <SegmentedItem Value=\"@Statistic.StatisticVariant.Default\">Default</SegmentedItem>\n <SegmentedItem Value=\"@Statistic.StatisticVariant.Minimal\">Minimal</SegmentedItem>\n <SegmentedItem Value=\"@Statistic.StatisticVariant.Bordered\">Bordered</SegmentedItem>\n</Segmented>\n<Grid Columns=\"3\" Gap=\"4\">\n <Statistic Title=\"Users\" Value=\"12,847\" Variant=\"@_variant\" />\n <Statistic Title=\"Revenue\" Value=\"48,290\" Variant=\"@_variant\" ShowTrend=\"true\" TrendValue=\"+8%\" TrendDirection=\"Statistic.TrendType.Up\">\n <Prefix><Lumeo.Text As=\"span\">$</Lumeo.Text></Prefix>\n </Statistic>\n <Statistic Title=\"Churn\" Value=\"2.1\" Variant=\"@_variant\" ShowTrend=\"true\" TrendValue=\"-0.3%\" TrendDirection=\"Statistic.TrendType.Down\">\n <Suffix><Lumeo.Text As=\"span\">%</Lumeo.Text></Suffix>\n </Statistic>\n</Grid>\n\n@code { private Statistic.StatisticVariant _variant = Statistic.StatisticVariant.Default; }"
35414
35990
  }
35415
35991
  ],
35416
35992
  "subComponents": {},
@@ -35826,19 +36402,19 @@
35826
36402
  "examples": [
35827
36403
  {
35828
36404
  "title": "Basic Steps",
35829
- "code": "<Steps CurrentStep=\"1\">\r\n <StepsItem Title=\"Account\" Description=\"Create your account\" />\r\n <StepsItem Title=\"Profile\" Description=\"Set up your profile\" />\r\n <StepsItem Title=\"Complete\" Description=\"All done\" />\r\n</Steps>"
36405
+ "code": "<Steps CurrentStep=\"1\">\n <StepsItem Title=\"Account\" Description=\"Create your account\" />\n <StepsItem Title=\"Profile\" Description=\"Set up your profile\" />\n <StepsItem Title=\"Complete\" Description=\"All done\" />\n</Steps>"
35830
36406
  },
35831
36407
  {
35832
36408
  "title": "Interactive Steps",
35833
- "code": "<Steps @bind-CurrentStep=\"_step\" Clickable=\"true\">\r\n <StepsItem Title=\"Details\" />\r\n <StepsItem Title=\"Payment\" />\r\n <StepsItem Title=\"Review\" />\r\n <StepsItem Title=\"Confirm\" />\r\n</Steps>"
36409
+ "code": "<Steps @bind-CurrentStep=\"_step\" Clickable=\"true\">\n <StepsItem Title=\"Details\" />\n <StepsItem Title=\"Payment\" />\n <StepsItem Title=\"Review\" />\n <StepsItem Title=\"Confirm\" />\n</Steps>"
35834
36410
  },
35835
36411
  {
35836
36412
  "title": "Vertical Steps",
35837
- "code": "<Steps CurrentStep=\"2\" Orientation=\"Steps.StepsOrientation.Vertical\">\r\n <StepsItem Title=\"Sign Up\" Description=\"Create an account\" />\r\n <StepsItem Title=\"Verify Email\" Description=\"Confirm your email\" />\r\n <StepsItem Title=\"Set Password\" Description=\"Choose a password\" />\r\n <StepsItem Title=\"Done\" Description=\"Start using the app\" />\r\n</Steps>"
36413
+ "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>"
35838
36414
  },
35839
36415
  {
35840
36416
  "title": "Orientation (interactive)",
35841
- "code": "<Segmented @bind-Value=\"_orientation\">\r\n <SegmentedItem Value=\"@Steps.StepsOrientation.Horizontal\">Horizontal</SegmentedItem>\r\n <SegmentedItem Value=\"@Steps.StepsOrientation.Vertical\">Vertical</SegmentedItem>\r\n</Segmented>\r\n<Steps CurrentStep=\"1\" Orientation=\"@_orientation\">\r\n <StepsItem Title=\"Account\" Description=\"Create your account\" />\r\n <StepsItem Title=\"Profile\" Description=\"Set up your profile\" />\r\n <StepsItem Title=\"Payment\" Description=\"Add billing info\" />\r\n <StepsItem Title=\"Done\" Description=\"All finished\" />\r\n</Steps>\r\n\r\n@code { private Steps.StepsOrientation _orientation = Steps.StepsOrientation.Horizontal; }"
36417
+ "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; }"
35842
36418
  }
35843
36419
  ],
35844
36420
  "subComponents": {
@@ -36012,6 +36588,94 @@
36012
36588
  "parseFailed": false,
36013
36589
  "parseError": null
36014
36590
  },
36591
+ "SwipeActions": {
36592
+ "name": "SwipeActions",
36593
+ "category": "Utility",
36594
+ "subcategory": null,
36595
+ "description": "Swipe Actions component.",
36596
+ "nugetPackage": "Lumeo",
36597
+ "files": [
36598
+ "UI/SwipeActions/SwipeActions.razor"
36599
+ ],
36600
+ "namespace": "Lumeo",
36601
+ "inheritsFrom": null,
36602
+ "implements": [
36603
+ "IAsyncDisposable"
36604
+ ],
36605
+ "parameters": [
36606
+ {
36607
+ "name": "ChildContent",
36608
+ "type": "RenderFragment?",
36609
+ "default": null,
36610
+ "description": null,
36611
+ "isCascading": false,
36612
+ "captureUnmatched": false
36613
+ },
36614
+ {
36615
+ "name": "LeadingActions",
36616
+ "type": "RenderFragment?",
36617
+ "default": null,
36618
+ "description": null,
36619
+ "isCascading": false,
36620
+ "captureUnmatched": false
36621
+ },
36622
+ {
36623
+ "name": "TrailingActions",
36624
+ "type": "RenderFragment?",
36625
+ "default": null,
36626
+ "description": null,
36627
+ "isCascading": false,
36628
+ "captureUnmatched": false
36629
+ },
36630
+ {
36631
+ "name": "ActivationThresholdPx",
36632
+ "type": "double",
36633
+ "default": "80",
36634
+ "description": null,
36635
+ "isCascading": false,
36636
+ "captureUnmatched": false
36637
+ },
36638
+ {
36639
+ "name": "Class",
36640
+ "type": "string?",
36641
+ "default": null,
36642
+ "description": null,
36643
+ "isCascading": false,
36644
+ "captureUnmatched": false
36645
+ },
36646
+ {
36647
+ "name": "AdditionalAttributes",
36648
+ "type": "Dictionary<string, object>?",
36649
+ "default": null,
36650
+ "description": null,
36651
+ "isCascading": false,
36652
+ "captureUnmatched": true
36653
+ }
36654
+ ],
36655
+ "events": [],
36656
+ "enums": [],
36657
+ "records": [],
36658
+ "cssVars": [
36659
+ "--color-background"
36660
+ ],
36661
+ "examples": [
36662
+ {
36663
+ "title": "Trailing Actions (swipe left)",
36664
+ "code": "<SwipeActions>\n <TrailingActions>\n <Button Variant=\"Button.ButtonVariant.Destructive\" Class=\"h-full rounded-none px-5\">Delete</Button>\n <Button Variant=\"Button.ButtonVariant.Secondary\" Class=\"h-full rounded-none px-5\">Archive</Button>\n </TrailingActions>\n <ChildContent>\n <div class=\"flex items-center gap-3 border border-border/40 rounded-lg px-4 py-3 bg-background\">\n <Text Size=\"sm\">Project proposal draft</Text>\n </div>\n </ChildContent>\n</SwipeActions>"
36665
+ },
36666
+ {
36667
+ "title": "Leading and Trailing Actions",
36668
+ "code": "<SwipeActions>\n <LeadingActions>\n <Button Variant=\"Button.ButtonVariant.Secondary\" Class=\"h-full rounded-none px-5\">Pin</Button>\n </LeadingActions>\n <TrailingActions>\n <Button Variant=\"Button.ButtonVariant.Destructive\" Class=\"h-full rounded-none px-5\">Delete</Button>\n <Button Variant=\"Button.ButtonVariant.Secondary\" Class=\"h-full rounded-none px-5\">Snooze</Button>\n </TrailingActions>\n <ChildContent>\n <div class=\"flex items-center gap-3 border border-border/40 rounded-lg px-4 py-3 bg-background\">\n <Text Size=\"sm\">Meeting with design team</Text>\n </div>\n </ChildContent>\n</SwipeActions>"
36669
+ },
36670
+ {
36671
+ "title": "Custom Activation Threshold",
36672
+ "code": "<SwipeActions ActivationThresholdPx=\"40\">\n <TrailingActions>\n <Button Variant=\"Button.ButtonVariant.Destructive\" Class=\"h-full rounded-none px-6\">Remove</Button>\n </TrailingActions>\n <ChildContent>\n <div class=\"flex items-center gap-3 border border-border/40 rounded-lg px-4 py-3 bg-background\">\n <Text Size=\"sm\">Activates after only 40 px of swipe</Text>\n </div>\n </ChildContent>\n</SwipeActions>"
36673
+ }
36674
+ ],
36675
+ "subComponents": {},
36676
+ "parseFailed": false,
36677
+ "parseError": null
36678
+ },
36015
36679
  "Switch": {
36016
36680
  "name": "Switch",
36017
36681
  "category": "Forms",
@@ -36153,6 +36817,14 @@
36153
36817
  "isCascading": false,
36154
36818
  "captureUnmatched": false
36155
36819
  },
36820
+ {
36821
+ "name": "HapticFeedback",
36822
+ "type": "bool",
36823
+ "default": null,
36824
+ "description": "When true, triggers a short haptic vibration via navigator.vibrate() each time the switch is toggled. Silently no-ops on browsers without the Vibration API (e.g. iOS Safari). Default is false.",
36825
+ "isCascading": false,
36826
+ "captureUnmatched": false
36827
+ },
36156
36828
  {
36157
36829
  "name": "Class",
36158
36830
  "type": "string?",
@@ -36202,19 +36874,19 @@
36202
36874
  "examples": [
36203
36875
  {
36204
36876
  "title": "Default",
36205
- "code": "<Flex Gap=\"2\" Align=\"center\">\r\n <Switch @bind-Checked=\"_checked\" />\r\n <Label>Airplane Mode</Label>\r\n</Flex>\r\n\r\n@code {\r\n private bool _checked;\r\n}"
36877
+ "code": "<Flex Gap=\"2\" Align=\"center\">\n <Switch @bind-Checked=\"_checked\" />\n <Label>Airplane Mode</Label>\n</Flex>\n\n@code {\n private bool _checked;\n}"
36206
36878
  },
36207
36879
  {
36208
36880
  "title": "With Binding",
36209
- "code": "<Switch @bind-Checked=\"_checked\" />\r\n<Lumeo.Text Size=\"sm\" Color=\"muted\">Dark Mode is @(_checked ? \"on\" : \"off\")</Lumeo.Text>\r\n\r\n@code {\r\n private bool _checked = true;\r\n}"
36881
+ "code": "<Switch @bind-Checked=\"_checked\" />\n<Lumeo.Text Size=\"sm\" Color=\"muted\">Dark Mode is @(_checked ? \"on\" : \"off\")</Lumeo.Text>\n\n@code {\n private bool _checked = true;\n}"
36210
36882
  },
36211
36883
  {
36212
36884
  "title": "Disabled",
36213
- "code": "<Switch Checked=\"false\" Disabled=\"true\" />\r\n<Switch Checked=\"true\" Disabled=\"true\" />"
36885
+ "code": "<Switch Checked=\"false\" Disabled=\"true\" />\n<Switch Checked=\"true\" Disabled=\"true\" />"
36214
36886
  },
36215
36887
  {
36216
36888
  "title": "Settings Example",
36217
- "code": "<Flex Align=\"center\" Justify=\"between\">\r\n <Stack Gap=\"0\">\r\n <Lumeo.Text Size=\"sm\" Weight=\"medium\" Leading=\"none\">Email Notifications</Lumeo.Text>\r\n <Lumeo.Text Size=\"sm\" Color=\"muted\">Receive emails about account activity.</Lumeo.Text>\r\n </Stack>\r\n <Switch @bind-Checked=\"_emailNotif\" />\r\n</Flex>"
36889
+ "code": "<Flex Align=\"center\" Justify=\"between\">\n <Stack Gap=\"0\">\n <Lumeo.Text Size=\"sm\" Weight=\"medium\" Leading=\"none\">Email Notifications</Lumeo.Text>\n <Lumeo.Text Size=\"sm\" Color=\"muted\">Receive emails about account activity.</Lumeo.Text>\n </Stack>\n <Switch @bind-Checked=\"_emailNotif\" />\n</Flex>"
36218
36890
  }
36219
36891
  ],
36220
36892
  "subComponents": {},
@@ -36276,19 +36948,19 @@
36276
36948
  "examples": [
36277
36949
  {
36278
36950
  "title": "Default",
36279
- "code": "<Table>\r\n <TableCaption>A list of recent invoices.</TableCaption>\r\n <TableHeader>\r\n <TableRow>\r\n <TableHead>Invoice</TableHead>\r\n <TableHead>Status</TableHead>\r\n <TableHead>Method</TableHead>\r\n <TableHead Class=\"text-right\">Amount</TableHead>\r\n </TableRow>\r\n </TableHeader>\r\n <TableBody>\r\n @foreach (var invoice in _invoices)\r\n {\r\n <TableRow>\r\n <TableCell Class=\"font-medium\">@invoice.Id</TableCell>\r\n <TableCell>@invoice.Status</TableCell>\r\n <TableCell>@invoice.Method</TableCell>\r\n <TableCell Class=\"text-right\">@invoice.Amount</TableCell>\r\n </TableRow>\r\n }\r\n </TableBody>\r\n</Table>"
36951
+ "code": "<Table>\n <TableCaption>A list of recent invoices.</TableCaption>\n <TableHeader>\n <TableRow>\n <TableHead>Invoice</TableHead>\n <TableHead>Status</TableHead>\n <TableHead>Method</TableHead>\n <TableHead Class=\"text-right\">Amount</TableHead>\n </TableRow>\n </TableHeader>\n <TableBody>\n @foreach (var invoice in _invoices)\n {\n <TableRow>\n <TableCell Class=\"font-medium\">@invoice.Id</TableCell>\n <TableCell>@invoice.Status</TableCell>\n <TableCell>@invoice.Method</TableCell>\n <TableCell Class=\"text-right\">@invoice.Amount</TableCell>\n </TableRow>\n }\n </TableBody>\n</Table>"
36280
36952
  },
36281
36953
  {
36282
36954
  "title": "Simple Table",
36283
- "code": "<Table>\r\n <TableHeader>\r\n <TableRow>\r\n <TableHead>Name</TableHead>\r\n <TableHead>Role</TableHead>\r\n <TableHead>Department</TableHead>\r\n </TableRow>\r\n </TableHeader>\r\n <TableBody>\r\n <TableRow>\r\n <TableCell Class=\"font-medium\">Alice Johnson</TableCell>\r\n <TableCell>Engineer</TableCell>\r\n <TableCell>Engineering</TableCell>\r\n </TableRow>\r\n <TableRow>\r\n <TableCell Class=\"font-medium\">Bob Smith</TableCell>\r\n <TableCell>Designer</TableCell>\r\n <TableCell>Product</TableCell>\r\n </TableRow>\r\n </TableBody>\r\n</Table>"
36955
+ "code": "<Table>\n <TableHeader>\n <TableRow>\n <TableHead>Name</TableHead>\n <TableHead>Role</TableHead>\n <TableHead>Department</TableHead>\n </TableRow>\n </TableHeader>\n <TableBody>\n <TableRow>\n <TableCell Class=\"font-medium\">Alice Johnson</TableCell>\n <TableCell>Engineer</TableCell>\n <TableCell>Engineering</TableCell>\n </TableRow>\n <TableRow>\n <TableCell Class=\"font-medium\">Bob Smith</TableCell>\n <TableCell>Designer</TableCell>\n <TableCell>Product</TableCell>\n </TableRow>\n </TableBody>\n</Table>"
36284
36956
  },
36285
36957
  {
36286
36958
  "title": "Table with Status Badges",
36287
- "code": "<Table>\r\n <TableHeader>\r\n <TableRow>\r\n <TableHead>Task</TableHead>\r\n <TableHead>Assignee</TableHead>\r\n <TableHead>Priority</TableHead>\r\n <TableHead>Status</TableHead>\r\n </TableRow>\r\n </TableHeader>\r\n <TableBody>\r\n @foreach (var task in _tasks)\r\n {\r\n <TableRow>\r\n <TableCell Class=\"font-medium\">@task.Name</TableCell>\r\n <TableCell>@task.Assignee</TableCell>\r\n <TableCell><Badge Variant=\"@task.PriorityVariant\">@task.Priority</Badge></TableCell>\r\n <TableCell><Badge Variant=\"@task.StatusVariant\">@task.Status</Badge></TableCell>\r\n </TableRow>\r\n }\r\n </TableBody>\r\n</Table>"
36959
+ "code": "<Table>\n <TableHeader>\n <TableRow>\n <TableHead>Task</TableHead>\n <TableHead>Assignee</TableHead>\n <TableHead>Priority</TableHead>\n <TableHead>Status</TableHead>\n </TableRow>\n </TableHeader>\n <TableBody>\n @foreach (var task in _tasks)\n {\n <TableRow>\n <TableCell Class=\"font-medium\">@task.Name</TableCell>\n <TableCell>@task.Assignee</TableCell>\n <TableCell><Badge Variant=\"@task.PriorityVariant\">@task.Priority</Badge></TableCell>\n <TableCell><Badge Variant=\"@task.StatusVariant\">@task.Status</Badge></TableCell>\n </TableRow>\n }\n </TableBody>\n</Table>"
36288
36960
  },
36289
36961
  {
36290
36962
  "title": "Table with Pagination",
36291
- "code": "<Table>\r\n <TableHeader>\r\n <TableRow>\r\n <TableHead>Invoice</TableHead>\r\n <TableHead>Status</TableHead>\r\n <TableHead>Method</TableHead>\r\n <TableHead Class=\"text-right\">Amount</TableHead>\r\n </TableRow>\r\n </TableHeader>\r\n <TableBody>\r\n @foreach (var invoice in _invoices.Skip(_pageStart).Take(_pageSize))\r\n {\r\n <TableRow>\r\n <TableCell Class=\"font-medium\">@invoice.Id</TableCell>\r\n <TableCell>@invoice.Status</TableCell>\r\n <TableCell>@invoice.Method</TableCell>\r\n <TableCell Class=\"text-right\">@invoice.Amount</TableCell>\r\n </TableRow>\r\n }\r\n </TableBody>\r\n</Table>\r\n<Flex Align=\"center\" Justify=\"end\" Gap=\"2\" Class=\"mt-4\">\r\n <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\"\r\n Disabled=\"@(_tablePage <= 1)\" OnClick=\"@(() => GoTablePage(_tablePage - 1))\">\r\n <DynamicIcon Name=\"ChevronLeft\" Class=\"h-4 w-4\" /> Previous\r\n </Button>\r\n <Lumeo.Text As=\"span\" Size=\"sm\" Color=\"muted\">Page @_tablePage of @_tablePages</Lumeo.Text>\r\n <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\"\r\n Disabled=\"@(_tablePage >= _tablePages)\" OnClick=\"@(() => GoTablePage(_tablePage + 1))\">\r\n Next <DynamicIcon Name=\"ChevronRight\" Class=\"h-4 w-4\" />\r\n </Button>\r\n</Flex>"
36963
+ "code": "<Table>\n <TableHeader>\n <TableRow>\n <TableHead>Invoice</TableHead>\n <TableHead>Status</TableHead>\n <TableHead>Method</TableHead>\n <TableHead Class=\"text-right\">Amount</TableHead>\n </TableRow>\n </TableHeader>\n <TableBody>\n @foreach (var invoice in _invoices.Skip(_pageStart).Take(_pageSize))\n {\n <TableRow>\n <TableCell Class=\"font-medium\">@invoice.Id</TableCell>\n <TableCell>@invoice.Status</TableCell>\n <TableCell>@invoice.Method</TableCell>\n <TableCell Class=\"text-right\">@invoice.Amount</TableCell>\n </TableRow>\n }\n </TableBody>\n</Table>\n<Flex Align=\"center\" Justify=\"end\" Gap=\"2\" Class=\"mt-4\">\n <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\"\n Disabled=\"@(_tablePage <= 1)\" OnClick=\"@(() => GoTablePage(_tablePage - 1))\">\n <DynamicIcon Name=\"ChevronLeft\" Class=\"h-4 w-4\" /> Previous\n </Button>\n <Lumeo.Text As=\"span\" Size=\"sm\" Color=\"muted\">Page @_tablePage of @_tablePages</Lumeo.Text>\n <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\"\n Disabled=\"@(_tablePage >= _tablePages)\" OnClick=\"@(() => GoTablePage(_tablePage + 1))\">\n Next <DynamicIcon Name=\"ChevronRight\" Class=\"h-4 w-4\" />\n </Button>\n</Flex>"
36292
36964
  }
36293
36965
  ],
36294
36966
  "subComponents": {
@@ -36596,6 +37268,22 @@
36596
37268
  "isCascading": false,
36597
37269
  "captureUnmatched": false
36598
37270
  },
37271
+ {
37272
+ "name": "SwipeEnabled",
37273
+ "type": "bool",
37274
+ "default": null,
37275
+ "description": "When true, a horizontal pointer drag (&gt;50 px horizontal, &lt;30 px vertical) on any TabsContent panel switches to the next or previous tab. Default is false (opt-in).",
37276
+ "isCascading": false,
37277
+ "captureUnmatched": false
37278
+ },
37279
+ {
37280
+ "name": "SwipeWrap",
37281
+ "type": "bool",
37282
+ "default": null,
37283
+ "description": "When true, swiping past the last tab wraps around to the first (and vice-versa). Default is false (no wrap-around at boundaries).",
37284
+ "isCascading": false,
37285
+ "captureUnmatched": false
37286
+ },
36599
37287
  {
36600
37288
  "name": "Class",
36601
37289
  "type": "string?",
@@ -36651,7 +37339,7 @@
36651
37339
  "records": [
36652
37340
  {
36653
37341
  "name": "TabsContext",
36654
- "signature": "TabsContext(\r\n string ActiveValue,\r\n EventCallback<string> SetValue,\r\n TabsOrientation Orientation,\r\n TabsVariant Variant,\r\n Dictionary<string, (string TabId, string PanelId)> TabIds,\r\n bool AnimatedIndicator,\r\n TabsRenderMode RenderMode,\r\n HashSet<string> ActivatedValues)",
37342
+ "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)",
36655
37343
  "description": null
36656
37344
  }
36657
37345
  ],
@@ -36670,19 +37358,19 @@
36670
37358
  "examples": [
36671
37359
  {
36672
37360
  "title": "Default",
36673
- "code": "<Tabs ActiveValue=\"account\">\r\n <TabsList>\r\n <TabsTrigger Value=\"account\">Account</TabsTrigger>\r\n <TabsTrigger Value=\"password\">Password</TabsTrigger>\r\n </TabsList>\r\n <TabsContent Value=\"account\">\r\n <Card>\r\n <CardHeader>\r\n <Heading Level=\"3\" Size=\"lg\" Class=\"leading-none tracking-tight\">Account</Heading>\r\n <Lumeo.Text Size=\"sm\" Color=\"muted\">Make changes to your account here.</Lumeo.Text>\r\n </CardHeader>\r\n <CardContent>\r\n <Stack Gap=\"4\">\r\n <FormField Label=\"Name\">\r\n <Input Value=\"Pedro Duarte\" />\r\n </FormField>\r\n <FormField Label=\"Username\">\r\n <Input Value=\"@peduarte\" />\r\n </FormField>\r\n </Stack>\r\n </CardContent>\r\n <CardFooter>\r\n <Button>Save changes</Button>\r\n </CardFooter>\r\n </Card>\r\n </TabsContent>\r\n <TabsContent Value=\"password\">\r\n <Card>\r\n <CardHeader>\r\n <Heading Level=\"3\" Size=\"lg\" Class=\"leading-none tracking-tight\">Password</Heading>\r\n <Lumeo.Text Size=\"sm\" Color=\"muted\">Change your password here.</Lumeo.Text>\r\n </CardHeader>\r\n <CardContent>\r\n <Stack Gap=\"4\">\r\n <FormField Label=\"Current password\">\r\n <Input type=\"password\" />\r\n </FormField>\r\n <FormField Label=\"New password\">\r\n <Input type=\"password\" />\r\n </FormField>\r\n </Stack>\r\n </CardContent>\r\n <CardFooter>\r\n <Button>Save password</Button>\r\n </CardFooter>\r\n </Card>\r\n </TabsContent>\r\n</Tabs>"
37361
+ "code": "<Tabs ActiveValue=\"account\">\n <TabsList>\n <TabsTrigger Value=\"account\">Account</TabsTrigger>\n <TabsTrigger Value=\"password\">Password</TabsTrigger>\n </TabsList>\n <TabsContent Value=\"account\">\n <Card>\n <CardHeader>\n <Heading Level=\"3\" Size=\"lg\" Class=\"leading-none tracking-tight\">Account</Heading>\n <Lumeo.Text Size=\"sm\" Color=\"muted\">Make changes to your account here.</Lumeo.Text>\n </CardHeader>\n <CardContent>\n <Stack Gap=\"4\">\n <FormField Label=\"Name\">\n <Input Value=\"Pedro Duarte\" />\n </FormField>\n <FormField Label=\"Username\">\n <Input Value=\"@peduarte\" />\n </FormField>\n </Stack>\n </CardContent>\n <CardFooter>\n <Button>Save changes</Button>\n </CardFooter>\n </Card>\n </TabsContent>\n <TabsContent Value=\"password\">\n <Card>\n <CardHeader>\n <Heading Level=\"3\" Size=\"lg\" Class=\"leading-none tracking-tight\">Password</Heading>\n <Lumeo.Text Size=\"sm\" Color=\"muted\">Change your password here.</Lumeo.Text>\n </CardHeader>\n <CardContent>\n <Stack Gap=\"4\">\n <FormField Label=\"Current password\">\n <Input type=\"password\" />\n </FormField>\n <FormField Label=\"New password\">\n <Input type=\"password\" />\n </FormField>\n </Stack>\n </CardContent>\n <CardFooter>\n <Button>Save password</Button>\n </CardFooter>\n </Card>\n </TabsContent>\n</Tabs>"
36674
37362
  },
36675
37363
  {
36676
37364
  "title": "Notifications",
36677
- "code": "<Tabs ActiveValue=\"all\">\r\n <TabsList>\r\n <TabsTrigger Value=\"all\">All</TabsTrigger>\r\n <TabsTrigger Value=\"unread\">Unread</TabsTrigger>\r\n <TabsTrigger Value=\"archived\">Archived</TabsTrigger>\r\n </TabsList>\r\n <TabsContent Value=\"all\">\r\n @foreach (var n in _notifications)\r\n {\r\n <Flex Gap=\"3\" Align=\"start\" Class=\"p-3 rounded-lg border\">\r\n <span class=\"mt-1.5 h-2 w-2 rounded-full @(n.Unread ? \"bg-primary\" : \"bg-muted\")\"></span>\r\n <Stack Gap=\"0\">\r\n <Lumeo.Text Size=\"sm\" Weight=\"medium\">@n.Title</Lumeo.Text>\r\n <Lumeo.Text Size=\"xs\" Color=\"muted\">@n.Time</Lumeo.Text>\r\n </Stack>\r\n </Flex>\r\n }\r\n </TabsContent>\r\n <TabsContent Value=\"unread\">\r\n @foreach (var n in _notifications.Where(x => x.Unread)) { /* same */ }\r\n </TabsContent>\r\n <TabsContent Value=\"archived\">\r\n <Lumeo.Text Size=\"sm\" Color=\"muted\" Class=\"p-4 text-center\">No archived notifications.</Lumeo.Text>\r\n </TabsContent>\r\n</Tabs>"
37365
+ "code": "<Tabs ActiveValue=\"all\">\n <TabsList>\n <TabsTrigger Value=\"all\">All</TabsTrigger>\n <TabsTrigger Value=\"unread\">Unread</TabsTrigger>\n <TabsTrigger Value=\"archived\">Archived</TabsTrigger>\n </TabsList>\n <TabsContent Value=\"all\">\n @foreach (var n in _notifications)\n {\n <Flex Gap=\"3\" Align=\"start\" Class=\"p-3 rounded-lg border\">\n <span class=\"mt-1.5 h-2 w-2 rounded-full @(n.Unread ? \"bg-primary\" : \"bg-muted\")\"></span>\n <Stack Gap=\"0\">\n <Lumeo.Text Size=\"sm\" Weight=\"medium\">@n.Title</Lumeo.Text>\n <Lumeo.Text Size=\"xs\" Color=\"muted\">@n.Time</Lumeo.Text>\n </Stack>\n </Flex>\n }\n </TabsContent>\n <TabsContent Value=\"unread\">\n @foreach (var n in _notifications.Where(x => x.Unread)) { /* same */ }\n </TabsContent>\n <TabsContent Value=\"archived\">\n <Lumeo.Text Size=\"sm\" Color=\"muted\" Class=\"p-4 text-center\">No archived notifications.</Lumeo.Text>\n </TabsContent>\n</Tabs>"
36678
37366
  },
36679
37367
  {
36680
37368
  "title": "Vertical Tabs",
36681
- "code": "<Tabs Orientation=\"Tabs.TabsOrientation.Vertical\" @bind-ActiveValue=\"_verticalTab\" Class=\"flex gap-4\">\r\n <TabsList>\r\n <TabsTrigger Value=\"account\">Account</TabsTrigger>\r\n <TabsTrigger Value=\"security\">Security</TabsTrigger>\r\n <TabsTrigger Value=\"notifications\">Notifications</TabsTrigger>\r\n </TabsList>\r\n <div class=\"flex-1\">\r\n <TabsContent Value=\"account\">\r\n <Card>\r\n <CardHeader><CardTitle>Account</CardTitle><CardDescription>Manage your account settings.</CardDescription></CardHeader>\r\n <CardContent><Lumeo.Text Size=\"sm\" Color=\"muted\">Account settings content goes here.</Lumeo.Text></CardContent>\r\n </Card>\r\n </TabsContent>\r\n <TabsContent Value=\"security\">\r\n <Card>\r\n <CardHeader><CardTitle>Security</CardTitle><CardDescription>Update your security preferences.</CardDescription></CardHeader>\r\n <CardContent><Lumeo.Text Size=\"sm\" Color=\"muted\">Security settings content goes here.</Lumeo.Text></CardContent>\r\n </Card>\r\n </TabsContent>\r\n <TabsContent Value=\"notifications\">\r\n <Card>\r\n <CardHeader><CardTitle>Notifications</CardTitle><CardDescription>Configure notification preferences.</CardDescription></CardHeader>\r\n <CardContent><Lumeo.Text Size=\"sm\" Color=\"muted\">Notification settings content goes here.</Lumeo.Text></CardContent>\r\n </Card>\r\n </TabsContent>\r\n </div>\r\n</Tabs>\r\n\r\n@code {\r\n private string _verticalTab = \"account\";\r\n}"
37369
+ "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}"
36682
37370
  },
36683
37371
  {
36684
37372
  "title": "Simple",
36685
- "code": "<Tabs ActiveValue=\"overview\">\r\n <TabsList>\r\n <TabsTrigger Value=\"overview\">Overview</TabsTrigger>\r\n <TabsTrigger Value=\"analytics\">Analytics</TabsTrigger>\r\n <TabsTrigger Value=\"reports\">Reports</TabsTrigger>\r\n </TabsList>\r\n <TabsContent Value=\"overview\">\r\n <Lumeo.Text Size=\"sm\" Color=\"muted\" Class=\"p-4\">Overview content goes here.</Lumeo.Text>\r\n </TabsContent>\r\n <TabsContent Value=\"analytics\">\r\n <Lumeo.Text Size=\"sm\" Color=\"muted\" Class=\"p-4\">Analytics content goes here.</Lumeo.Text>\r\n </TabsContent>\r\n <TabsContent Value=\"reports\">\r\n <Lumeo.Text Size=\"sm\" Color=\"muted\" Class=\"p-4\">Reports content goes here.</Lumeo.Text>\r\n </TabsContent>\r\n</Tabs>"
37373
+ "code": "<Tabs ActiveValue=\"overview\">\n <TabsList>\n <TabsTrigger Value=\"overview\">Overview</TabsTrigger>\n <TabsTrigger Value=\"analytics\">Analytics</TabsTrigger>\n <TabsTrigger Value=\"reports\">Reports</TabsTrigger>\n </TabsList>\n <TabsContent Value=\"overview\">\n <Lumeo.Text Size=\"sm\" Color=\"muted\" Class=\"p-4\">Overview content goes here.</Lumeo.Text>\n </TabsContent>\n <TabsContent Value=\"analytics\">\n <Lumeo.Text Size=\"sm\" Color=\"muted\" Class=\"p-4\">Analytics content goes here.</Lumeo.Text>\n </TabsContent>\n <TabsContent Value=\"reports\">\n <Lumeo.Text Size=\"sm\" Color=\"muted\" Class=\"p-4\">Reports content goes here.</Lumeo.Text>\n </TabsContent>\n</Tabs>"
36686
37374
  }
36687
37375
  ],
36688
37376
  "subComponents": {
@@ -36691,7 +37379,9 @@
36691
37379
  "fileName": "TabsContent.razor",
36692
37380
  "namespace": "Lumeo",
36693
37381
  "inheritsFrom": null,
36694
- "implements": [],
37382
+ "implements": [
37383
+ "IAsyncDisposable"
37384
+ ],
36695
37385
  "parameters": [
36696
37386
  {
36697
37387
  "name": "Context",
@@ -37172,7 +37862,7 @@
37172
37862
  },
37173
37863
  {
37174
37864
  "title": "Generic TItem — User picker",
37175
- "code": "public record UserOption(string Name, string Email);\r\n\r\nprivate List<UserOption> _users = new();\r\nprivate List<UserOption> _suggestions = new() { /* … */ };\r\n\r\n<TagInput TItem=\"UserOption\"\r\n @bind-Tags=\"_users\"\r\n Suggestions=\"@_suggestions\"\r\n GetTagText=\"@(u => u.Name)\"\r\n GetSuggestionText=\"@(u => $\"{u.Name} {u.Email}\")\"\r\n CreateTag=\"@(text => new UserOption(text, text))\"\r\n Separators=\"@(new[] { \",\", \";\", \" \" })\">\r\n <TagTemplate Context=\"user\">\r\n <span class=\"chip\">\r\n <Avatar Initial=\"@user.Name[0]\" />\r\n @user.Name\r\n </span>\r\n </TagTemplate>\r\n <SuggestionTemplate Context=\"user\">\r\n <Stack Direction=\"Row\" Gap=\"2\">\r\n <Avatar Initial=\"@user.Name[0]\" />\r\n <Stack Gap=\"0\">\r\n <Text>@user.Name</Text>\r\n <Text Color=\"muted\">@user.Email</Text>\r\n </Stack>\r\n </Stack>\r\n </SuggestionTemplate>\r\n</TagInput>"
37865
+ "code": "public record UserOption(string Name, string Email);\n\nprivate List<UserOption> _users = new();\nprivate List<UserOption> _suggestions = new() { /* … */ };\n\n<TagInput TItem=\"UserOption\"\n @bind-Tags=\"_users\"\n Suggestions=\"@_suggestions\"\n GetTagText=\"@(u => u.Name)\"\n GetSuggestionText=\"@(u => $\"{u.Name} {u.Email}\")\"\n CreateTag=\"@(text => new UserOption(text, text))\"\n Separators=\"@(new[] { \",\", \";\", \" \" })\">\n <TagTemplate Context=\"user\">\n <span class=\"chip\">\n <Avatar Initial=\"@user.Name[0]\" />\n @user.Name\n </span>\n </TagTemplate>\n <SuggestionTemplate Context=\"user\">\n <Stack Direction=\"Row\" Gap=\"2\">\n <Avatar Initial=\"@user.Name[0]\" />\n <Stack Gap=\"0\">\n <Text>@user.Name</Text>\n <Text Color=\"muted\">@user.Email</Text>\n </Stack>\n </Stack>\n </SuggestionTemplate>\n</TagInput>"
37176
37866
  }
37177
37867
  ],
37178
37868
  "subComponents": {},
@@ -37288,19 +37978,19 @@
37288
37978
  "examples": [
37289
37979
  {
37290
37980
  "title": "Sizes",
37291
- "code": "<Text Size=\"xs\">Extra small text</Text>\r\n<Text Size=\"sm\">Small text</Text>\r\n<Text>Default text</Text>\r\n<Text Size=\"lg\">Large text</Text>\r\n<Text Size=\"xl\">Extra large text</Text>"
37981
+ "code": "<Text Size=\"xs\">Extra small text</Text>\n<Text Size=\"sm\">Small text</Text>\n<Text>Default text</Text>\n<Text Size=\"lg\">Large text</Text>\n<Text Size=\"xl\">Extra large text</Text>"
37292
37982
  },
37293
37983
  {
37294
37984
  "title": "Colors",
37295
- "code": "<Text Color=\"foreground\">Foreground</Text>\r\n<Text Color=\"muted\">Muted</Text>\r\n<Text Color=\"primary\">Primary</Text>\r\n<Text Color=\"destructive\">Destructive</Text>"
37985
+ "code": "<Text Color=\"foreground\">Foreground</Text>\n<Text Color=\"muted\">Muted</Text>\n<Text Color=\"primary\">Primary</Text>\n<Text Color=\"destructive\">Destructive</Text>"
37296
37986
  },
37297
37987
  {
37298
37988
  "title": "Weights",
37299
- "code": "<Text Weight=\"light\">Light</Text>\r\n<Text Weight=\"normal\">Normal</Text>\r\n<Text Weight=\"medium\">Medium</Text>\r\n<Text Weight=\"semibold\">Semibold</Text>\r\n<Text Weight=\"bold\">Bold</Text>"
37989
+ "code": "<Text Weight=\"light\">Light</Text>\n<Text Weight=\"normal\">Normal</Text>\n<Text Weight=\"medium\">Medium</Text>\n<Text Weight=\"semibold\">Semibold</Text>\n<Text Weight=\"bold\">Bold</Text>"
37300
37990
  },
37301
37991
  {
37302
37992
  "title": "Truncation",
37303
- "code": "<Container MaxWidth=\"xs\">\r\n <Text Truncate=\"true\">This is a very long piece of text that will be truncated...</Text>\r\n</Container>"
37993
+ "code": "<Container MaxWidth=\"xs\">\n <Text Truncate=\"true\">This is a very long piece of text that will be truncated...</Text>\n</Container>"
37304
37994
  }
37305
37995
  ],
37306
37996
  "subComponents": {},
@@ -37505,7 +38195,7 @@
37505
38195
  },
37506
38196
  {
37507
38197
  "title": "With Binding",
37508
- "code": "<Textarea Value=\"@_text\" OnInput=\"@(e => _text = e.Value?.ToString() ?? \"\")\" placeholder=\"Write something...\" />\r\n<Lumeo.Text Size=\"sm\" Color=\"muted\">Character count: @_text.Length</Lumeo.Text>\r\n\r\n@code {\r\n private string _text = \"\";\r\n}"
38198
+ "code": "<Textarea Value=\"@_text\" OnInput=\"@(e => _text = e.Value?.ToString() ?? \"\")\" placeholder=\"Write something...\" />\n<Lumeo.Text Size=\"sm\" Color=\"muted\">Character count: @_text.Length</Lumeo.Text>\n\n@code {\n private string _text = \"\";\n}"
37509
38199
  },
37510
38200
  {
37511
38201
  "title": "Disabled",
@@ -37513,7 +38203,7 @@
37513
38203
  },
37514
38204
  {
37515
38205
  "title": "With Label",
37516
- "code": "<FormField Label=\"Your Bio\" HelpText=\"You can use markdown for formatting.\">\r\n <Textarea placeholder=\"Tell us a little bit about yourself.\" rows=\"4\" />\r\n</FormField>"
38206
+ "code": "<FormField Label=\"Your Bio\" HelpText=\"You can use markdown for formatting.\">\n <Textarea placeholder=\"Tell us a little bit about yourself.\" rows=\"4\" />\n</FormField>"
37517
38207
  }
37518
38208
  ],
37519
38209
  "subComponents": {},
@@ -37655,11 +38345,11 @@
37655
38345
  },
37656
38346
  {
37657
38347
  "title": "In a Card",
37658
- "code": "<Card>\r\n <CardHeader>\r\n <Heading Level=\"3\">Appearance</Heading>\r\n <Lumeo.Text Size=\"sm\" Color=\"muted\">Customize the look and feel.</Lumeo.Text>\r\n </CardHeader>\r\n <CardContent>\r\n <ThemeSwitcher />\r\n </CardContent>\r\n</Card>"
38348
+ "code": "<Card>\n <CardHeader>\n <Heading Level=\"3\">Appearance</Heading>\n <Lumeo.Text Size=\"sm\" Color=\"muted\">Customize the look and feel.</Lumeo.Text>\n </CardHeader>\n <CardContent>\n <ThemeSwitcher />\n </CardContent>\n</Card>"
37659
38349
  },
37660
38350
  {
37661
38351
  "title": "Settings Row",
37662
- "code": "<Stack Gap=\"1\" Class=\"rounded-lg border bg-card p-1\">\r\n <Flex Align=\"center\" Justify=\"between\" Class=\"rounded-md px-3 py-2\">\r\n <Stack Gap=\"0\">\r\n <Lumeo.Text Size=\"sm\" Weight=\"medium\">Appearance</Lumeo.Text>\r\n <Lumeo.Text Size=\"xs\" Color=\"muted\">Choose your color scheme and mode</Lumeo.Text>\r\n </Stack>\r\n </Flex>\r\n <Separator />\r\n <Stack Class=\"px-3 py-3\">\r\n <ThemeSwitcher />\r\n </Stack>\r\n</Stack>"
38352
+ "code": "<Stack Gap=\"1\" Class=\"rounded-lg border bg-card p-1\">\n <Flex Align=\"center\" Justify=\"between\" Class=\"rounded-md px-3 py-2\">\n <Stack Gap=\"0\">\n <Lumeo.Text Size=\"sm\" Weight=\"medium\">Appearance</Lumeo.Text>\n <Lumeo.Text Size=\"xs\" Color=\"muted\">Choose your color scheme and mode</Lumeo.Text>\n </Stack>\n </Flex>\n <Separator />\n <Stack Class=\"px-3 py-3\">\n <ThemeSwitcher />\n </Stack>\n</Stack>"
37663
38353
  }
37664
38354
  ],
37665
38355
  "subComponents": {},
@@ -37708,11 +38398,11 @@
37708
38398
  },
37709
38399
  {
37710
38400
  "title": "In a Navbar",
37711
- "code": "<Flex Align=\"center\" Justify=\"between\" Class=\"rounded-lg border bg-card px-4 py-2\">\r\n <Lumeo.Text As=\"span\" Weight=\"semibold\">My App</Lumeo.Text>\r\n <Flex Align=\"center\" Gap=\"2\">\r\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">About</Button>\r\n <ThemeToggle />\r\n </Flex>\r\n</Flex>"
38401
+ "code": "<Flex Align=\"center\" Justify=\"between\" Class=\"rounded-lg border bg-card px-4 py-2\">\n <Lumeo.Text As=\"span\" Weight=\"semibold\">My App</Lumeo.Text>\n <Flex Align=\"center\" Gap=\"2\">\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">About</Button>\n <ThemeToggle />\n </Flex>\n</Flex>"
37712
38402
  },
37713
38403
  {
37714
38404
  "title": "With Label",
37715
- "code": "<Flex Align=\"center\" Gap=\"3\" Class=\"rounded-lg border bg-card px-4 py-3\">\r\n <ThemeToggle />\r\n <Stack Gap=\"0\">\r\n <Lumeo.Text Size=\"sm\" Weight=\"medium\">Dark Mode</Lumeo.Text>\r\n <Lumeo.Text Size=\"xs\" Color=\"muted\">Toggle light and dark theme</Lumeo.Text>\r\n </Stack>\r\n</Flex>"
38405
+ "code": "<Flex Align=\"center\" Gap=\"3\" Class=\"rounded-lg border bg-card px-4 py-3\">\n <ThemeToggle />\n <Stack Gap=\"0\">\n <Lumeo.Text Size=\"sm\" Weight=\"medium\">Dark Mode</Lumeo.Text>\n <Lumeo.Text Size=\"xs\" Color=\"muted\">Toggle light and dark theme</Lumeo.Text>\n </Stack>\n</Flex>"
37716
38406
  }
37717
38407
  ],
37718
38408
  "subComponents": {},
@@ -37827,19 +38517,19 @@
37827
38517
  "examples": [
37828
38518
  {
37829
38519
  "title": "Vertical Timeline",
37830
- "code": "<Timeline>\r\n <TimelineItem Title=\"Order placed\" Description=\"Your order has been placed.\" Time=\"Jan 1, 2025\" />\r\n <TimelineItem Title=\"Processing\" Description=\"Being processed.\" Time=\"Jan 2, 2025\" />\r\n <TimelineItem Title=\"Shipped\" Description=\"Shipped via express.\" Time=\"Jan 3, 2025\" />\r\n <TimelineItem Title=\"Delivered\" Description=\"Has been delivered.\" Time=\"Jan 5, 2025\" />\r\n</Timeline>"
38520
+ "code": "<Timeline>\n <TimelineItem Title=\"Order placed\" Description=\"Your order has been placed.\" Time=\"Jan 1, 2025\" />\n <TimelineItem Title=\"Processing\" Description=\"Being processed.\" Time=\"Jan 2, 2025\" />\n <TimelineItem Title=\"Shipped\" Description=\"Shipped via express.\" Time=\"Jan 3, 2025\" />\n <TimelineItem Title=\"Delivered\" Description=\"Has been delivered.\" Time=\"Jan 5, 2025\" />\n</Timeline>"
37831
38521
  },
37832
38522
  {
37833
38523
  "title": "With Icons",
37834
- "code": "<Timeline>\r\n <TimelineItem Title=\"Account created\" Time=\"9:00 AM\">\r\n <IconContent><Blazicon Svg=\"Lucide.UserPlus\" class=\"h-4 w-4\" /></IconContent>\r\n </TimelineItem>\r\n <TimelineItem Title=\"Profile updated\" Time=\"10:30 AM\">\r\n <IconContent><Blazicon Svg=\"Lucide.Pencil\" class=\"h-4 w-4\" /></IconContent>\r\n </TimelineItem>\r\n</Timeline>"
38524
+ "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>"
37835
38525
  },
37836
38526
  {
37837
38527
  "title": "Horizontal Timeline",
37838
- "code": "<Timeline Orientation=\"Timeline.TimelineOrientation.Horizontal\">\r\n <TimelineItem Title=\"Step 1\" Description=\"Planning\" />\r\n <TimelineItem Title=\"Step 2\" Description=\"Design\" />\r\n <TimelineItem Title=\"Step 3\" Description=\"Development\" />\r\n <TimelineItem Title=\"Step 4\" Description=\"Launch\" />\r\n</Timeline>"
38528
+ "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>"
37839
38529
  },
37840
38530
  {
37841
38531
  "title": "Orientation (interactive)",
37842
- "code": "<Segmented @bind-Value=\"_orientation\">\r\n <SegmentedItem Value=\"@Timeline.TimelineOrientation.Vertical\">Vertical</SegmentedItem>\r\n <SegmentedItem Value=\"@Timeline.TimelineOrientation.Horizontal\">Horizontal</SegmentedItem>\r\n</Segmented>\r\n<Timeline Orientation=\"@_orientation\">\r\n <TimelineItem Title=\"Planning\" Description=\"Scope defined\" Time=\"Jan 1\" />\r\n <TimelineItem Title=\"Design\" Description=\"Wireframes approved\" Time=\"Jan 8\" />\r\n <TimelineItem Title=\"Development\" Description=\"Sprint in progress\" Time=\"Jan 15\" />\r\n <TimelineItem Title=\"Launch\" Description=\"Shipped to production\" Time=\"Feb 1\" />\r\n</Timeline>\r\n\r\n@code { private Timeline.TimelineOrientation _orientation = Timeline.TimelineOrientation.Vertical; }"
38532
+ "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; }"
37843
38533
  }
37844
38534
  ],
37845
38535
  "subComponents": {
@@ -37942,12 +38632,21 @@
37942
38632
  "description": "Time-of-day picker with 12h/24h formats.",
37943
38633
  "nugetPackage": "Lumeo",
37944
38634
  "files": [
37945
- "UI/TimePicker/TimePicker.razor"
38635
+ "UI/TimePicker/TimePicker.razor",
38636
+ "UI/TimePicker/TimeWheelPicker.razor"
37946
38637
  ],
37947
38638
  "namespace": "Lumeo",
37948
38639
  "inheritsFrom": null,
37949
38640
  "implements": [],
37950
38641
  "parameters": [
38642
+ {
38643
+ "name": "Variant",
38644
+ "type": "TimePickerVariant",
38645
+ "default": "TimePickerVariant.List",
38646
+ "description": null,
38647
+ "isCascading": false,
38648
+ "captureUnmatched": false
38649
+ },
37951
38650
  {
37952
38651
  "name": "FormField",
37953
38652
  "type": "FormField.FormFieldContext?",
@@ -38022,9 +38721,9 @@
38022
38721
  },
38023
38722
  {
38024
38723
  "name": "Use24Hour",
38025
- "type": "bool",
38026
- "default": "true",
38027
- "description": null,
38724
+ "type": "bool?",
38725
+ "default": null,
38726
+ "description": "When true renders a 24-hour clock; when false renders 12-hour with AM/PM. When null (default) the picker derives the choice from EffectiveCulture's ShortTimePattern — de-DE, fr-FR and similar see 24-hour; en-US sees 12-hour.",
38028
38727
  "isCascading": false,
38029
38728
  "captureUnmatched": false
38030
38729
  },
@@ -38060,6 +38759,14 @@
38060
38759
  "isCascading": false,
38061
38760
  "captureUnmatched": false
38062
38761
  },
38762
+ {
38763
+ "name": "Culture",
38764
+ "type": "System.Globalization.CultureInfo?",
38765
+ "default": null,
38766
+ "description": "Overrides CurrentCulture for 24h/12h detection and AM/PM designators. Leave null to honour ASP.NET request localization.",
38767
+ "isCascading": false,
38768
+ "captureUnmatched": false
38769
+ },
38063
38770
  {
38064
38771
  "name": "Disabled",
38065
38772
  "type": "bool",
@@ -38092,7 +38799,16 @@
38092
38799
  "description": null
38093
38800
  }
38094
38801
  ],
38095
- "enums": [],
38802
+ "enums": [
38803
+ {
38804
+ "name": "TimePickerVariant",
38805
+ "values": [
38806
+ "List",
38807
+ "Wheel"
38808
+ ],
38809
+ "description": "Visual style of the picker. List renders the existing scrollable hour/minute columns inside a popover (default). Wheel renders inline iOS-style snap-scrolling columns. The Wheel variant doesn't show seconds."
38810
+ }
38811
+ ],
38096
38812
  "records": [],
38097
38813
  "cssVars": [
38098
38814
  "--color-accent",
@@ -38123,7 +38839,86 @@
38123
38839
  "code": "<TimePicker @bind-Value=\"_time\" MinuteStep=\"15\" />"
38124
38840
  }
38125
38841
  ],
38126
- "subComponents": {},
38842
+ "subComponents": {
38843
+ "TimeWheelPicker": {
38844
+ "componentName": "TimeWheelPicker",
38845
+ "fileName": "TimeWheelPicker.razor",
38846
+ "namespace": "Lumeo",
38847
+ "inheritsFrom": null,
38848
+ "implements": [
38849
+ "IDisposable"
38850
+ ],
38851
+ "parameters": [
38852
+ {
38853
+ "name": "Value",
38854
+ "type": "TimeSpan?",
38855
+ "default": null,
38856
+ "description": null,
38857
+ "isCascading": false,
38858
+ "captureUnmatched": false
38859
+ },
38860
+ {
38861
+ "name": "ValueChanged",
38862
+ "type": "EventCallback<TimeSpan?>",
38863
+ "default": null,
38864
+ "description": null,
38865
+ "isCascading": false,
38866
+ "captureUnmatched": false
38867
+ },
38868
+ {
38869
+ "name": "Use24Hour",
38870
+ "type": "bool?",
38871
+ "default": null,
38872
+ "description": "When true renders a 24-hour clock; when false renders 12-hour with AM/PM. When null (default), derived from ShortTimePattern.",
38873
+ "isCascading": false,
38874
+ "captureUnmatched": false
38875
+ },
38876
+ {
38877
+ "name": "MinuteStep",
38878
+ "type": "int",
38879
+ "default": "1",
38880
+ "description": null,
38881
+ "isCascading": false,
38882
+ "captureUnmatched": false
38883
+ },
38884
+ {
38885
+ "name": "Culture",
38886
+ "type": "CultureInfo?",
38887
+ "default": null,
38888
+ "description": null,
38889
+ "isCascading": false,
38890
+ "captureUnmatched": false
38891
+ },
38892
+ {
38893
+ "name": "Class",
38894
+ "type": "string?",
38895
+ "default": null,
38896
+ "description": null,
38897
+ "isCascading": false,
38898
+ "captureUnmatched": false
38899
+ },
38900
+ {
38901
+ "name": "AdditionalAttributes",
38902
+ "type": "Dictionary<string, object>?",
38903
+ "default": null,
38904
+ "description": null,
38905
+ "isCascading": false,
38906
+ "captureUnmatched": true
38907
+ }
38908
+ ],
38909
+ "events": [
38910
+ {
38911
+ "name": "ValueChanged",
38912
+ "type": "EventCallback<TimeSpan?>",
38913
+ "description": null
38914
+ }
38915
+ ],
38916
+ "enums": [],
38917
+ "records": [],
38918
+ "parseFailed": false,
38919
+ "parseError": null
38920
+ }
38921
+ },
38127
38922
  "parseFailed": false,
38128
38923
  "parseError": null
38129
38924
  },
@@ -38196,7 +38991,7 @@
38196
38991
  "examples": [
38197
38992
  {
38198
38993
  "title": "Default Toast",
38199
- "code": "@inject ToastService ToastService\r\n\r\n<Button OnClick=\"ShowDefault\">Show Toast</Button>\r\n\r\n<ToastProvider />\r\n\r\n@code {\r\n private void ShowDefault()\r\n {\r\n ToastService.Show(\"Scheduled\", \"Your event has been created.\");\r\n }\r\n}"
38994
+ "code": "@inject ToastService ToastService\n\n<Button OnClick=\"ShowDefault\">Show Toast</Button>\n\n<ToastProvider />\n\n@code {\n private void ShowDefault()\n {\n ToastService.Show(\"Scheduled\", \"Your event has been created.\");\n }\n}"
38200
38995
  },
38201
38996
  {
38202
38997
  "title": "Success Toast",
@@ -38208,7 +39003,7 @@
38208
39003
  },
38209
39004
  {
38210
39005
  "title": "All Variants",
38211
- "code": "@inject ToastService ToastService\r\n\r\n<Button OnClick=\"ShowDefault\">Default</Button>\r\n<Button OnClick=\"ShowSuccess\">Success</Button>\r\n<Button OnClick=\"ShowError\">Error</Button>\r\n\r\n<ToastProvider />\r\n\r\n@code {\r\n private void ShowDefault()\r\n => ToastService.Show(\"Scheduled\", \"Your event has been created.\");\r\n private void ShowSuccess()\r\n => ToastService.Success(\"Success\", \"Your changes have been saved.\");\r\n private void ShowError()\r\n => ToastService.Error(\"Error\", \"Something went wrong. Please try again.\");\r\n}"
39006
+ "code": "@inject ToastService ToastService\n\n<Button OnClick=\"ShowDefault\">Default</Button>\n<Button OnClick=\"ShowSuccess\">Success</Button>\n<Button OnClick=\"ShowError\">Error</Button>\n\n<ToastProvider />\n\n@code {\n private void ShowDefault()\n => ToastService.Show(\"Scheduled\", \"Your event has been created.\");\n private void ShowSuccess()\n => ToastService.Success(\"Success\", \"Your changes have been saved.\");\n private void ShowError()\n => ToastService.Error(\"Error\", \"Something went wrong. Please try again.\");\n}"
38212
39007
  }
38213
39008
  ],
38214
39009
  "subComponents": {
@@ -38626,19 +39421,19 @@
38626
39421
  "examples": [
38627
39422
  {
38628
39423
  "title": "Default",
38629
- "code": "<Toggle @bind-Pressed=\"_bold\">\r\n <Blazicon Svg=\"Lucide.Bold\" class=\"h-4 w-4\" />\r\n</Toggle>\r\n\r\n@code {\r\n private bool _bold;\r\n}"
39424
+ "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}"
38630
39425
  },
38631
39426
  {
38632
39427
  "title": "Variants",
38633
- "code": "<Toggle @bind-Pressed=\"_pressed1\">\r\n <Blazicon Svg=\"Lucide.Bold\" class=\"h-4 w-4\" />\r\n</Toggle>\r\n<Toggle Variant=\"Toggle.ToggleVariant.Outline\" @bind-Pressed=\"_pressed2\">\r\n <Blazicon Svg=\"Lucide.Italic\" class=\"h-4 w-4\" />\r\n</Toggle>"
39428
+ "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>"
38634
39429
  },
38635
39430
  {
38636
39431
  "title": "Sizes",
38637
- "code": "<Toggle Size=\"Toggle.ToggleSize.Sm\" @bind-Pressed=\"_sm\">\r\n <Blazicon Svg=\"Lucide.Bold\" class=\"h-3 w-3\" />\r\n</Toggle>\r\n<Toggle @bind-Pressed=\"_md\">\r\n <Blazicon Svg=\"Lucide.Bold\" class=\"h-4 w-4\" />\r\n</Toggle>\r\n<Toggle Size=\"Toggle.ToggleSize.Lg\" @bind-Pressed=\"_lg\">\r\n <Blazicon Svg=\"Lucide.Bold\" class=\"h-5 w-5\" />\r\n</Toggle>"
39432
+ "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>"
38638
39433
  },
38639
39434
  {
38640
39435
  "title": "With Text",
38641
- "code": "<Toggle @bind-Pressed=\"_pressed\">\r\n <Blazicon Svg=\"Lucide.Bold\" class=\"h-4 w-4\" />\r\n Bold\r\n</Toggle>"
39436
+ "code": "<Toggle @bind-Pressed=\"_pressed\">\n <Blazicon Svg=\"Lucide.Bold\" class=\"h-4 w-4\" />\n Bold\n</Toggle>"
38642
39437
  }
38643
39438
  ],
38644
39439
  "subComponents": {},
@@ -38798,19 +39593,19 @@
38798
39593
  "examples": [
38799
39594
  {
38800
39595
  "title": "Single Selection",
38801
- "code": "<ToggleGroup Type=\"ToggleGroup.ToggleGroupType.Single\">\r\n <ToggleGroupItem Value=\"bold\">\r\n <Blazicon Svg=\"Lucide.Bold\" class=\"h-4 w-4\" />\r\n </ToggleGroupItem>\r\n <ToggleGroupItem Value=\"italic\">\r\n <Blazicon Svg=\"Lucide.Italic\" class=\"h-4 w-4\" />\r\n </ToggleGroupItem>\r\n <ToggleGroupItem Value=\"underline\">\r\n <Blazicon Svg=\"Lucide.Underline\" class=\"h-4 w-4\" />\r\n </ToggleGroupItem>\r\n</ToggleGroup>"
39596
+ "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>"
38802
39597
  },
38803
39598
  {
38804
39599
  "title": "Multiple Selection",
38805
- "code": "<ToggleGroup Type=\"ToggleGroup.ToggleGroupType.Multiple\">\r\n <ToggleGroupItem Value=\"bold\">\r\n <Blazicon Svg=\"Lucide.Bold\" class=\"h-4 w-4\" />\r\n </ToggleGroupItem>\r\n <ToggleGroupItem Value=\"italic\">\r\n <Blazicon Svg=\"Lucide.Italic\" class=\"h-4 w-4\" />\r\n </ToggleGroupItem>\r\n <ToggleGroupItem Value=\"underline\">\r\n <Blazicon Svg=\"Lucide.Underline\" class=\"h-4 w-4\" />\r\n </ToggleGroupItem>\r\n</ToggleGroup>"
39600
+ "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>"
38806
39601
  },
38807
39602
  {
38808
39603
  "title": "Outline Variant",
38809
- "code": "<ToggleGroup Type=\"ToggleGroup.ToggleGroupType.Single\" Variant=\"ToggleGroup.ToggleGroupVariant.Outline\">\r\n <ToggleGroupItem Value=\"left\">\r\n <Blazicon Svg=\"Lucide.AlignLeft\" class=\"h-4 w-4\" />\r\n </ToggleGroupItem>\r\n <ToggleGroupItem Value=\"center\">\r\n <Blazicon Svg=\"Lucide.AlignCenter\" class=\"h-4 w-4\" />\r\n </ToggleGroupItem>\r\n <ToggleGroupItem Value=\"right\">\r\n <Blazicon Svg=\"Lucide.AlignRight\" class=\"h-4 w-4\" />\r\n </ToggleGroupItem>\r\n</ToggleGroup>"
39604
+ "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>"
38810
39605
  },
38811
39606
  {
38812
39607
  "title": "Sizes",
38813
- "code": "<ToggleGroup Type=\"ToggleGroup.ToggleGroupType.Single\" Size=\"ToggleGroup.ToggleGroupSize.Sm\">\r\n ...\r\n</ToggleGroup>\r\n\r\n<ToggleGroup Type=\"ToggleGroup.ToggleGroupType.Single\">\r\n ...\r\n</ToggleGroup>\r\n\r\n<ToggleGroup Type=\"ToggleGroup.ToggleGroupType.Single\" Size=\"ToggleGroup.ToggleGroupSize.Lg\">\r\n ...\r\n</ToggleGroup>"
39608
+ "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>"
38814
39609
  }
38815
39610
  ],
38816
39611
  "subComponents": {
@@ -38981,19 +39776,19 @@
38981
39776
  "examples": [
38982
39777
  {
38983
39778
  "title": "Basic Toolbar",
38984
- "code": "<Toolbar>\r\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">\r\n <Blazicon Svg=\"Lucide.Bold\" class=\"h-4 w-4\" />\r\n </Button>\r\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">\r\n <Blazicon Svg=\"Lucide.Italic\" class=\"h-4 w-4\" />\r\n </Button>\r\n <ToolbarSeparator />\r\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">\r\n <Blazicon Svg=\"Lucide.AlignLeft\" class=\"h-4 w-4\" />\r\n </Button>\r\n</Toolbar>"
39779
+ "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>"
38985
39780
  },
38986
39781
  {
38987
39782
  "title": "With Spacer and Groups",
38988
- "code": "<Toolbar>\r\n <ToolbarGroup>\r\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">Undo</Button>\r\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">Redo</Button>\r\n </ToolbarGroup>\r\n <ToolbarSeparator />\r\n <ToolbarGroup>\r\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">Bold</Button>\r\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">Italic</Button>\r\n </ToolbarGroup>\r\n <ToolbarSpacer />\r\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">Settings</Button>\r\n</Toolbar>"
39783
+ "code": "<Toolbar>\n <ToolbarGroup>\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">Undo</Button>\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">Redo</Button>\n </ToolbarGroup>\n <ToolbarSeparator />\n <ToolbarGroup>\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">Bold</Button>\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">Italic</Button>\n </ToolbarGroup>\n <ToolbarSpacer />\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">Settings</Button>\n</Toolbar>"
38989
39784
  },
38990
39785
  {
38991
39786
  "title": "Overflow Menu",
38992
- "code": "<!-- VisibleCount=3: first 3 items inline, rest collapse into ⋯ menu -->\r\n<Toolbar Overflow=\"true\" VisibleCount=\"3\">\r\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">Bold</Button>\r\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">Italic</Button>\r\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">Underline</Button>\r\n <ToolbarSeparator />\r\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">Left</Button>\r\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">Center</Button>\r\n</Toolbar>"
39787
+ "code": "<!-- VisibleCount=3: first 3 items inline, rest collapse into ⋯ menu -->\n<Toolbar Overflow=\"true\" VisibleCount=\"3\">\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">Bold</Button>\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">Italic</Button>\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">Underline</Button>\n <ToolbarSeparator />\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">Left</Button>\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">Center</Button>\n</Toolbar>"
38993
39788
  },
38994
39789
  {
38995
39790
  "title": "With Input",
38996
- "code": "<Toolbar>\r\n <Input Placeholder=\"Search...\" Class=\"h-7 text-sm w-48\" />\r\n <ToolbarSeparator />\r\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">Filter</Button>\r\n <ToolbarSpacer />\r\n <Button Size=\"Button.ButtonSize.Sm\">Export</Button>\r\n</Toolbar>"
39791
+ "code": "<Toolbar>\n <Input Placeholder=\"Search...\" Class=\"h-7 text-sm w-48\" />\n <ToolbarSeparator />\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">Filter</Button>\n <ToolbarSpacer />\n <Button Size=\"Button.ButtonSize.Sm\">Export</Button>\n</Toolbar>"
38997
39792
  }
38998
39793
  ],
38999
39794
  "subComponents": {
@@ -39244,7 +40039,7 @@
39244
40039
  "namespace": "Lumeo",
39245
40040
  "inheritsFrom": null,
39246
40041
  "implements": [
39247
- "IDisposable"
40042
+ "IAsyncDisposable"
39248
40043
  ],
39249
40044
  "parameters": [
39250
40045
  {
@@ -39297,19 +40092,19 @@
39297
40092
  "examples": [
39298
40093
  {
39299
40094
  "title": "Default",
39300
- "code": "<Tooltip>\r\n <TooltipTrigger>\r\n <Button Variant=\"Button.ButtonVariant.Outline\">Hover me</Button>\r\n </TooltipTrigger>\r\n <TooltipContent>\r\n <p>Add to library</p>\r\n </TooltipContent>\r\n</Tooltip>"
40095
+ "code": "<Tooltip>\n <TooltipTrigger>\n <Button Variant=\"Button.ButtonVariant.Outline\">Hover me</Button>\n </TooltipTrigger>\n <TooltipContent>\n <p>Add to library</p>\n </TooltipContent>\n</Tooltip>"
39301
40096
  },
39302
40097
  {
39303
40098
  "title": "Side Variations",
39304
- "code": "<Tooltip>\r\n <TooltipTrigger>\r\n <Button Variant=\"Button.ButtonVariant.Outline\">Top</Button>\r\n </TooltipTrigger>\r\n <TooltipContent Side=\"TooltipContent.TooltipSide.Top\">\r\n <p>Tooltip on top</p>\r\n </TooltipContent>\r\n</Tooltip>\r\n\r\n<Tooltip>\r\n <TooltipTrigger>\r\n <Button Variant=\"Button.ButtonVariant.Outline\">Bottom</Button>\r\n </TooltipTrigger>\r\n <TooltipContent Side=\"TooltipContent.TooltipSide.Bottom\">\r\n <p>Tooltip on bottom</p>\r\n </TooltipContent>\r\n</Tooltip>"
40099
+ "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>"
39305
40100
  },
39306
40101
  {
39307
40102
  "title": "With Icons",
39308
- "code": "<Tooltip>\r\n <TooltipTrigger>\r\n <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Icon\">\r\n <Blazicon Svg=\"Lucide.Bold\" class=\"h-4 w-4\" />\r\n </Button>\r\n </TooltipTrigger>\r\n <TooltipContent>\r\n <p>Bold</p>\r\n </TooltipContent>\r\n</Tooltip>\r\n\r\n<Tooltip>\r\n <TooltipTrigger>\r\n <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Icon\">\r\n <Blazicon Svg=\"Lucide.Italic\" class=\"h-4 w-4\" />\r\n </Button>\r\n </TooltipTrigger>\r\n <TooltipContent>\r\n <p>Italic</p>\r\n </TooltipContent>\r\n</Tooltip>"
40103
+ "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>"
39309
40104
  },
39310
40105
  {
39311
40106
  "title": "Placement",
39312
- "code": "<Tooltip>\r\n <TooltipTrigger><Button Variant=\"Button.ButtonVariant.Outline\">Top</Button></TooltipTrigger>\r\n <TooltipContent Side=\"TooltipContent.TooltipSide.Top\">Top tooltip</TooltipContent>\r\n</Tooltip>\r\n<Tooltip>\r\n <TooltipTrigger><Button Variant=\"Button.ButtonVariant.Outline\">Bottom</Button></TooltipTrigger>\r\n <TooltipContent Side=\"TooltipContent.TooltipSide.Bottom\">Bottom tooltip</TooltipContent>\r\n</Tooltip>\r\n<Tooltip>\r\n <TooltipTrigger><Button Variant=\"Button.ButtonVariant.Outline\">Left</Button></TooltipTrigger>\r\n <TooltipContent Side=\"TooltipContent.TooltipSide.Left\">Left tooltip</TooltipContent>\r\n</Tooltip>\r\n<Tooltip>\r\n <TooltipTrigger><Button Variant=\"Button.ButtonVariant.Outline\">Right</Button></TooltipTrigger>\r\n <TooltipContent Side=\"TooltipContent.TooltipSide.Right\">Right tooltip</TooltipContent>\r\n</Tooltip>"
40107
+ "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>"
39313
40108
  }
39314
40109
  ],
39315
40110
  "subComponents": {
@@ -39436,6 +40231,104 @@
39436
40231
  "parseFailed": false,
39437
40232
  "parseError": null
39438
40233
  },
40234
+ "TouchRipple": {
40235
+ "name": "TouchRipple",
40236
+ "category": "Utility",
40237
+ "subcategory": null,
40238
+ "description": "Touch Ripple component.",
40239
+ "nugetPackage": "Lumeo",
40240
+ "files": [
40241
+ "UI/TouchRipple/TouchRipple.razor"
40242
+ ],
40243
+ "namespace": "Lumeo",
40244
+ "inheritsFrom": null,
40245
+ "implements": [
40246
+ "IAsyncDisposable"
40247
+ ],
40248
+ "parameters": [
40249
+ {
40250
+ "name": "ChildContent",
40251
+ "type": "RenderFragment?",
40252
+ "default": null,
40253
+ "description": null,
40254
+ "isCascading": false,
40255
+ "captureUnmatched": false
40256
+ },
40257
+ {
40258
+ "name": "Color",
40259
+ "type": "string",
40260
+ "default": "\"currentColor\"",
40261
+ "description": null,
40262
+ "isCascading": false,
40263
+ "captureUnmatched": false
40264
+ },
40265
+ {
40266
+ "name": "Opacity",
40267
+ "type": "double",
40268
+ "default": "0.25",
40269
+ "description": null,
40270
+ "isCascading": false,
40271
+ "captureUnmatched": false
40272
+ },
40273
+ {
40274
+ "name": "DurationMs",
40275
+ "type": "int",
40276
+ "default": "500",
40277
+ "description": null,
40278
+ "isCascading": false,
40279
+ "captureUnmatched": false
40280
+ },
40281
+ {
40282
+ "name": "Class",
40283
+ "type": "string?",
40284
+ "default": null,
40285
+ "description": null,
40286
+ "isCascading": false,
40287
+ "captureUnmatched": false
40288
+ },
40289
+ {
40290
+ "name": "AdditionalAttributes",
40291
+ "type": "Dictionary<string, object>?",
40292
+ "default": null,
40293
+ "description": null,
40294
+ "isCascading": false,
40295
+ "captureUnmatched": true
40296
+ }
40297
+ ],
40298
+ "events": [],
40299
+ "enums": [],
40300
+ "records": [
40301
+ {
40302
+ "name": "RippleEntry",
40303
+ "signature": "RippleEntry(Guid Id, double X, double Y)",
40304
+ "description": null
40305
+ }
40306
+ ],
40307
+ "cssVars": [
40308
+ "--color-foreground"
40309
+ ],
40310
+ "examples": [
40311
+ {
40312
+ "title": "Basic Ripple on a Button",
40313
+ "code": "<TouchRipple Class=\"inline-block rounded-md\">\n <Button>Tap me</Button>\n</TouchRipple>"
40314
+ },
40315
+ {
40316
+ "title": "Custom Color",
40317
+ "code": "<TouchRipple Color=\"#3b82f6\" Class=\"inline-block rounded-md\">\n <Button Variant=\"ButtonVariant.Secondary\">Blue ripple</Button>\n</TouchRipple>\n\n<TouchRipple Color=\"#ef4444\" Class=\"inline-block rounded-md\">\n <Button Variant=\"ButtonVariant.Secondary\">Red ripple</Button>\n</TouchRipple>"
40318
+ },
40319
+ {
40320
+ "title": "Custom Opacity and Duration",
40321
+ "code": "<!-- High opacity, fast -->\n<TouchRipple Opacity=\"0.5\" DurationMs=\"300\" Class=\"inline-block rounded-md\">\n <Button Variant=\"ButtonVariant.Outline\">Fast (300 ms)</Button>\n</TouchRipple>\n\n<!-- Low opacity, slow -->\n<TouchRipple Opacity=\"0.1\" DurationMs=\"900\" Class=\"inline-block rounded-md\">\n <Button Variant=\"ButtonVariant.Outline\">Slow (900 ms)</Button>\n</TouchRipple>"
40322
+ },
40323
+ {
40324
+ "title": "Ripple on a Card",
40325
+ "code": "<TouchRipple Class=\"block rounded-xl w-full max-w-sm cursor-pointer\">\n <Card Class=\"p-5\">\n <Text Class=\"font-medium\">Interactive card</Text>\n <Text Size=\"sm\" Color=\"muted\">Tap anywhere to see the ripple.</Text>\n </Card>\n</TouchRipple>"
40326
+ }
40327
+ ],
40328
+ "subComponents": {},
40329
+ "parseFailed": false,
40330
+ "parseError": null
40331
+ },
39439
40332
  "Tour": {
39440
40333
  "name": "Tour",
39441
40334
  "category": "Overlay",
@@ -39602,11 +40495,11 @@
39602
40495
  "examples": [
39603
40496
  {
39604
40497
  "title": "Basic Tour",
39605
- "code": "<Flex Class=\"gap-3 flex-wrap\">\r\n <Button id=\"tour-feature-1\" Variant=\"Button.ButtonVariant.Outline\">Dashboard</Button>\r\n <Button id=\"tour-feature-2\" Variant=\"Button.ButtonVariant.Outline\">Team</Button>\r\n <Button id=\"tour-feature-3\" Variant=\"Button.ButtonVariant.Outline\">Settings</Button>\r\n</Flex>\r\n<Button Variant=\"Button.ButtonVariant.Default\" OnClick=\"@(() => _tourOpen = true)\">\r\n Start Tour\r\n</Button>\r\n\r\n<Tour @bind-Open=\"_tourOpen\"\r\n Steps=\"@_tourSteps\"\r\n OnComplete=\"@HandleComplete\"\r\n OnSkip=\"@(() => _tourOpen = false)\" />\r\n\r\n@code {\r\n private bool _tourOpen;\r\n\r\n private List<Tour.TourStepConfig> _tourSteps = new()\r\n {\r\n new(\"#tour-feature-1\", \"Dashboard\", \"Get an overview of your key metrics.\", Tour.TourPlacement.Bottom),\r\n new(\"#tour-feature-2\", \"Team Management\", \"Invite members and manage permissions.\", Tour.TourPlacement.Bottom),\r\n new(\"#tour-feature-3\", \"Settings\", \"Customize your workspace and account.\", Tour.TourPlacement.Bottom),\r\n };\r\n\r\n private void HandleComplete() => _tourOpen = false;\r\n}"
40498
+ "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}"
39606
40499
  },
39607
40500
  {
39608
40501
  "title": "Custom Placements",
39609
- "code": "<Flex Class=\"justify-between gap-3\">\r\n <Button id=\"tour-top\" Variant=\"Button.ButtonVariant.Outline\">Top</Button>\r\n <Button id=\"tour-right\" Variant=\"Button.ButtonVariant.Outline\">Right</Button>\r\n <Button id=\"tour-bottom\" Variant=\"Button.ButtonVariant.Outline\">Bottom</Button>\r\n <Button id=\"tour-left\" Variant=\"Button.ButtonVariant.Outline\">Left</Button>\r\n</Flex>\r\n<Button Variant=\"Button.ButtonVariant.Secondary\" OnClick=\"@(() => _open = true)\">\r\n Tour Placements\r\n</Button>\r\n\r\n<Tour @bind-Open=\"_open\"\r\n Steps=\"@_steps\"\r\n OnComplete=\"@(() => _open = false)\"\r\n OnSkip=\"@(() => _open = false)\" />\r\n\r\n@code {\r\n private bool _open;\r\n\r\n private List<Tour.TourStepConfig> _steps = new()\r\n {\r\n new(\"#tour-top\", \"Top Placement\", \"Tooltip above the element.\", Tour.TourPlacement.Top),\r\n new(\"#tour-right\", \"Right Placement\", \"Tooltip to the right.\", Tour.TourPlacement.Right),\r\n new(\"#tour-bottom\", \"Bottom Placement\", \"Tooltip below the element.\", Tour.TourPlacement.Bottom),\r\n new(\"#tour-left\", \"Left Placement\", \"Tooltip to the left.\", Tour.TourPlacement.Left),\r\n };\r\n}"
40502
+ "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}"
39610
40503
  }
39611
40504
  ],
39612
40505
  "subComponents": {},
@@ -39751,11 +40644,15 @@
39751
40644
  "examples": [
39752
40645
  {
39753
40646
  "title": "Basic Transfer",
39754
- "code": "<Transfer @bind-SourceItems=\"_source\" @bind-TargetItems=\"_target\"\r\n SourceTitle=\"Available\" TargetTitle=\"Selected\" />"
40647
+ "code": "<Transfer @bind-SourceItems=\"_source\" @bind-TargetItems=\"_target\"\n SourceTitle=\"Available\" TargetTitle=\"Selected\" />"
40648
+ },
40649
+ {
40650
+ "title": "OnChange — interactive",
40651
+ "code": "<Transfer @bind-SourceItems=\"_source\" @bind-TargetItems=\"_target\"\n OnChange=\"@(args => _lastChange = $\"Moved {args.MovedItems.Count} item(s) → {(args.Direction == \"\"right\"\" ? \"\"Selected\"\" : \"\"Available\"\")}\")\"\n SourceTitle=\"Available\" TargetTitle=\"Selected\" />\n@if (_lastChange is not null)\n{\n <Lumeo.Text Size=\"sm\" Color=\"muted\">Last change: @_lastChange</Lumeo.Text>\n}\n\n@code { private string? _lastChange; }"
39755
40652
  },
39756
40653
  {
39757
40654
  "title": "With Search",
39758
- "code": "<Transfer @bind-SourceItems=\"_source\" @bind-TargetItems=\"_target\"\r\n SourceTitle=\"Users\" TargetTitle=\"Team\" ShowSearch=\"true\" />"
40655
+ "code": "<Transfer @bind-SourceItems=\"_source\" @bind-TargetItems=\"_target\"\n SourceTitle=\"Users\" TargetTitle=\"Team\" ShowSearch=\"true\" />"
39759
40656
  }
39760
40657
  ],
39761
40658
  "subComponents": {},
@@ -39962,7 +40859,7 @@
39962
40859
  "examples": [
39963
40860
  {
39964
40861
  "title": "Basic Tree Select",
39965
- "code": "<TreeSelect @bind-Value=\"_selected\" Items=\"@_categories\" />\r\n\r\n@code {\r\n private string? _selected;\r\n private List<TreeSelect.TreeSelectItem> _categories = new()\r\n {\r\n new() { Label = \"Electronics\", Value = \"electronics\", Children = new()\r\n {\r\n new() { Label = \"Phones\", Value = \"phones\" },\r\n new() { Label = \"Computers\", Value = \"computers\" },\r\n }},\r\n new() { Label = \"Books\", Value = \"books\" },\r\n };\r\n}"
40862
+ "code": "<TreeSelect @bind-Value=\"_selected\" Items=\"@_categories\" />\n\n@code {\n private string? _selected;\n private List<TreeSelect.TreeSelectItem> _categories = new()\n {\n new() { Label = \"Electronics\", Value = \"electronics\", Children = new()\n {\n new() { Label = \"Phones\", Value = \"phones\" },\n new() { Label = \"Computers\", Value = \"computers\" },\n }},\n new() { Label = \"Books\", Value = \"books\" },\n };\n}"
39966
40863
  },
39967
40864
  {
39968
40865
  "title": "Searchable",
@@ -39970,7 +40867,7 @@
39970
40867
  },
39971
40868
  {
39972
40869
  "title": "Multi-select",
39973
- "code": "<TreeSelect Values=\"@_values\" ValuesChanged=\"@(v => _values = v)\"\r\n Items=\"@_categories\" Multiple=\"true\" Searchable=\"true\" />"
40870
+ "code": "<TreeSelect Values=\"@_values\" ValuesChanged=\"@(v => _values = v)\"\n Items=\"@_categories\" Multiple=\"true\" Searchable=\"true\" />"
39974
40871
  },
39975
40872
  {
39976
40873
  "title": "Expand All",
@@ -40412,11 +41309,11 @@
40412
41309
  "examples": [
40413
41310
  {
40414
41311
  "title": "Basic Watermark",
40415
- "code": "<Watermark Text=\"Confidential\">\r\n <Stack Gap=\"4\" Class=\"p-8\">\r\n <Lumeo.Text Color=\"foreground\">This document contains sensitive information.</Lumeo.Text>\r\n </Stack>\r\n</Watermark>"
41312
+ "code": "<Watermark Text=\"Confidential\">\n <Stack Gap=\"4\" Class=\"p-8\">\n <Lumeo.Text Color=\"foreground\">This document contains sensitive information.</Lumeo.Text>\n </Stack>\n</Watermark>"
40416
41313
  },
40417
41314
  {
40418
41315
  "title": "Custom Settings",
40419
- "code": "<Watermark Text=\"DRAFT\" Rotation=\"-30\" FontSize=\"20\" Opacity=\"0.15\" Gap=\"120\">\r\n <Stack Gap=\"2\" Class=\"p-8\">\r\n <Heading Level=\"3\" Size=\"lg\">Draft Document</Heading>\r\n <Lumeo.Text Color=\"muted\">This is a work in progress.</Lumeo.Text>\r\n </Stack>\r\n</Watermark>"
41316
+ "code": "<Watermark Text=\"DRAFT\" Rotation=\"-30\" FontSize=\"20\" Opacity=\"0.15\" Gap=\"120\">\n <Stack Gap=\"2\" Class=\"p-8\">\n <Heading Level=\"3\" Size=\"lg\">Draft Document</Heading>\n <Lumeo.Text Color=\"muted\">This is a work in progress.</Lumeo.Text>\n </Stack>\n</Watermark>"
40420
41317
  }
40421
41318
  ],
40422
41319
  "subComponents": {},