@page "/components/sheet"

<PageTitle>Sheet — Lumeo</PageTitle>

<PageHeader Title="Sheet" Description="A panel that slides in from the edge of the screen, typically used for navigation or forms." />

<Alert Variant="Alert.AlertVariant.Info" ShowIcon="true" Class="mb-6 mt-6">
    <ChildContent>
        <strong>Popovers inside Sheet/Drawer.</strong> The slide-in animation
        used to create a CSS containing-block trap that broke
        <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono">position: fixed</code>
        popovers (Select, DatePicker, Combobox) inside Sheets. Fixed in rc.21
        — the slide keyframes now end at <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono">transform: none</code>
        instead of identity-translate. If you still need predictability for older
        rc consumers, set <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono">Animation="SheetAnimation.Fade"</code>
        or <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono">Animation="SheetAnimation.None"</code>.
    </ChildContent>
</Alert>

<div class="mt-10 space-y-3">
    <Heading Id="when-to-use" Level="2" Class="scroll-mt-20">When to Use</Heading>
    <ul class="list-disc list-inside space-y-1 text-muted-foreground text-sm">
        <li>Display side panels for editing profiles, settings, or detail views</li>
        <li>Build slide-out navigation menus for mobile or compact layouts</li>
        <li>Show supplementary forms or configuration options without leaving the current page</li>
        <li>Present multi-step content in a panel that slides in from any edge</li>
        <li>Create responsive overlays that adapt between Sheet (desktop) and Drawer (mobile)</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default (Right)" Code="@_defaultCode">
        <Sheet @bind-Open="_isOpen">
            <SheetTrigger>
                <Button Variant="Button.ButtonVariant.Outline">Open Sheet</Button>
            </SheetTrigger>
            <SheetContent>
                <SheetHeader>
                    <SheetTitle>Edit Profile</SheetTitle>
                    <SheetDescription>Make changes to your profile here. Click save when you're done.</SheetDescription>
                </SheetHeader>
                <Grid Columns="4" Gap="4" Class="items-center py-4">
                    <Label Class="text-right">Name</Label>
                    <Input Class="col-span-3" Value="John Doe" />
                    <Label Class="text-right">Username</Label>
                    <Input Class="col-span-3" Value="@("@johndoe")" />
                </Grid>
                <SheetFooter>
                    <SheetClose>
                        <Button>Save Changes</Button>
                    </SheetClose>
                </SheetFooter>
            </SheetContent>
        </Sheet>
    </ComponentDemo>

    <ComponentDemo Title="Side Variations" Code="@_sideCode">
        <Flex Gap="2" Wrap="true">
            <Sheet @bind-Open="_isTopOpen">
                <SheetTrigger>
                    <Button Variant="Button.ButtonVariant.Outline">Top</Button>
                </SheetTrigger>
                <SheetContent Side="SheetContent.SheetSide.Top">
                    <SheetHeader>
                        <SheetTitle>Top Sheet</SheetTitle>
                        <SheetDescription>This sheet slides in from the top.</SheetDescription>
                    </SheetHeader>
                </SheetContent>
            </Sheet>
            <Sheet @bind-Open="_isRightOpen">
                <SheetTrigger>
                    <Button Variant="Button.ButtonVariant.Outline">Right</Button>
                </SheetTrigger>
                <SheetContent Side="SheetContent.SheetSide.Right">
                    <SheetHeader>
                        <SheetTitle>Right Sheet</SheetTitle>
                        <SheetDescription>This sheet slides in from the right.</SheetDescription>
                    </SheetHeader>
                </SheetContent>
            </Sheet>
            <Sheet @bind-Open="_isBottomOpen">
                <SheetTrigger>
                    <Button Variant="Button.ButtonVariant.Outline">Bottom</Button>
                </SheetTrigger>
                <SheetContent Side="SheetContent.SheetSide.Bottom">
                    <SheetHeader>
                        <SheetTitle>Bottom Sheet</SheetTitle>
                        <SheetDescription>This sheet slides in from the bottom.</SheetDescription>
                    </SheetHeader>
                </SheetContent>
            </Sheet>
            <Sheet @bind-Open="_isLeftOpen">
                <SheetTrigger>
                    <Button Variant="Button.ButtonVariant.Outline">Left</Button>
                </SheetTrigger>
                <SheetContent Side="SheetContent.SheetSide.Left">
                    <SheetHeader>
                        <SheetTitle>Left Sheet</SheetTitle>
                        <SheetDescription>This sheet slides in from the left.</SheetDescription>
                    </SheetHeader>
                </SheetContent>
            </Sheet>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Sizes" Code="@_sizesCode">
        <Flex Gap="2" Wrap="true">
            @foreach (var size in Enum.GetValues<SheetContent.SheetSize>())
            {
                <Sheet @bind-Open="@_sheetSizeOpen[size]">
                    <SheetTrigger>
                        <Button Variant="Button.ButtonVariant.Outline">@size</Button>
                    </SheetTrigger>
                    <SheetContent Size="@size">
                        <SheetHeader>
                            <SheetTitle>@size Sheet</SheetTitle>
                            <SheetDescription>This sheet uses Size="SheetContent.SheetSize.@size"</SheetDescription>
                        </SheetHeader>
                        <Stack Gap="4" Class="py-4">
                            <Lumeo.Text Size="sm" Color="muted">Sheet content goes here.</Lumeo.Text>
                        </Stack>
                    </SheetContent>
                </Sheet>
            }
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Prevent Close" Code="@_preventCloseCode">
        <Sheet @bind-Open="_preventSheetOpen">
            <SheetTrigger>
                <Button Variant="Button.ButtonVariant.Outline">Open Protected Sheet</Button>
            </SheetTrigger>
            <SheetContent PreventClose="true">
                <SheetHeader>
                    <SheetTitle>Protected Sheet</SheetTitle>
                    <SheetDescription>This sheet cannot be dismissed by clicking outside.</SheetDescription>
                </SheetHeader>
                <Stack Gap="4" Class="py-4">
                    <Button OnClick="@(() => _preventSheetOpen = false)">Close Sheet</Button>
                </Stack>
            </SheetContent>
        </Sheet>
    </ComponentDemo>

    <ComponentDemo Title="Side — interactive" Code="@_sideInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick a value to see it applied live.</Lumeo.Text>
            <Segmented @bind-Value="_sheetSideSel" Options="_sheetSideOptions" />
            <div>
                <Sheet @bind-Open="_sideInteractiveOpen">
                    <SheetTrigger>
                        <Button Variant="Button.ButtonVariant.Outline">Open Sheet (@_sheetSideSel)</Button>
                    </SheetTrigger>
                    <SheetContent Side="@_activeSheetSide">
                        <SheetHeader>
                            <SheetTitle>@_sheetSideSel Sheet</SheetTitle>
                            <SheetDescription>This sheet slides in from the @_sheetSideSel.ToLower().</SheetDescription>
                        </SheetHeader>
                    </SheetContent>
                </Sheet>
            </div>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Navigation Sheet" Code="@_navCode">
        <Sheet @bind-Open="_isNavOpen">
            <SheetTrigger>
                <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Icon">
                    <DynamicIcon Name="Menu" Class="h-4 w-4" />
                </Button>
            </SheetTrigger>
            <SheetContent Side="SheetContent.SheetSide.Left">
                <SheetHeader>
                    <SheetTitle>Navigation</SheetTitle>
                    <SheetDescription>Browse the application.</SheetDescription>
                </SheetHeader>
                <Stack Gap="2" Class="py-4">
                    <SheetClose>
                        <Lumeo.Text As="span" Size="sm" Weight="medium" Class="block w-full rounded-md px-3 py-2 hover:bg-accent cursor-pointer">Home</Lumeo.Text>
                    </SheetClose>
                    <SheetClose>
                        <Lumeo.Text As="span" Size="sm" Weight="medium" Class="block w-full rounded-md px-3 py-2 hover:bg-accent cursor-pointer">About</Lumeo.Text>
                    </SheetClose>
                    <SheetClose>
                        <Lumeo.Text As="span" Size="sm" Weight="medium" Class="block w-full rounded-md px-3 py-2 hover:bg-accent cursor-pointer">Services</Lumeo.Text>
                    </SheetClose>
                    <SheetClose>
                        <Lumeo.Text As="span" Size="sm" Weight="medium" Class="block w-full rounded-md px-3 py-2 hover:bg-accent cursor-pointer">Contact</Lumeo.Text>
                    </SheetClose>
                </Stack>
            </SheetContent>
        </Sheet>
    </ComponentDemo>

    <Alert Variant="Alert.AlertVariant.Info" ShowIcon="true" Class="mt-6">
        <strong>Mobile (rc.49).</strong> Set <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono">SwipeToClose="true"</code> on <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono">SheetContent</code> to let users dismiss the sheet with a touch swipe. The swipe direction matches the <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono">Side</code> parameter — swipe-down on a Bottom sheet, swipe-right on a Right sheet, etc. Default <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono">false</code> because Sheets often contain scrollable content; only enable it when the sheet's content fits without scrolling.
    </Alert>

    <ComponentDemo Title="Swipe-to-Close — All 4 Sides" Code="@_swipeAllSidesCode">
        <Stack Gap="3">
            <Lumeo.Text Size="sm" Color="muted">Open any side and try the swipe gesture (works on touch devices and mouse-drag).</Lumeo.Text>
            <Flex Gap="2" Wrap="true">
                <Sheet @bind-Open="_swipeTopOpen">
                    <SheetTrigger><Button Variant="Button.ButtonVariant.Outline">Top — swipe up</Button></SheetTrigger>
                    <SheetContent Side="SheetContent.SheetSide.Top" SwipeToClose="true">
                        <SheetHeader>
                            <SheetTitle>Quick Actions</SheetTitle>
                            <SheetDescription>Swipe up to dismiss, or tap an action below.</SheetDescription>
                        </SheetHeader>
                        <Grid Columns="3" Gap="3" Class="py-6">
                            <Stack Gap="2" Class="items-center"><Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Icon" Class="h-11 w-11"><Blazicon Svg="Lucide.Bell" class="h-5 w-5" /></Button><Lumeo.Text Size="xs">Notify</Lumeo.Text></Stack>
                            <Stack Gap="2" Class="items-center"><Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Icon" Class="h-11 w-11"><Blazicon Svg="Lucide.Star" class="h-5 w-5" /></Button><Lumeo.Text Size="xs">Favorite</Lumeo.Text></Stack>
                            <Stack Gap="2" Class="items-center"><Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Icon" Class="h-11 w-11"><Blazicon Svg="Lucide.Share2" class="h-5 w-5" /></Button><Lumeo.Text Size="xs">Share</Lumeo.Text></Stack>
                        </Grid>
                    </SheetContent>
                </Sheet>
                <Sheet @bind-Open="_swipeRightOpen">
                    <SheetTrigger><Button Variant="Button.ButtonVariant.Outline">Right — swipe right</Button></SheetTrigger>
                    <SheetContent Side="SheetContent.SheetSide.Right" SwipeToClose="true" Size="SheetContent.SheetSize.Lg">
                        <SheetHeader>
                            <SheetTitle>Edit Profile</SheetTitle>
                            <SheetDescription>Swipe right to dismiss, or save changes.</SheetDescription>
                        </SheetHeader>
                        <Stack Gap="4" Class="py-4">
                            <Stack Gap="2"><Label>Name</Label><Input Value="John Doe" /></Stack>
                            <Stack Gap="2"><Label>Email</Label><Input Value="john@example.com" Type="email" /></Stack>
                            <Stack Gap="2"><Label>Bio</Label><Textarea Value="Senior engineer." Rows="3" /></Stack>
                        </Stack>
                        <SheetFooter>
                            <SheetClose><Button>Save Changes</Button></SheetClose>
                        </SheetFooter>
                    </SheetContent>
                </Sheet>
                <Sheet @bind-Open="_swipeBottomOpen">
                    <SheetTrigger><Button Variant="Button.ButtonVariant.Outline">Bottom — swipe down</Button></SheetTrigger>
                    <SheetContent Side="SheetContent.SheetSide.Bottom" SwipeToClose="true">
                        <SheetHeader>
                            <SheetTitle>Filter Results</SheetTitle>
                            <SheetDescription>Pick a sort order — swipe down to cancel.</SheetDescription>
                        </SheetHeader>
                        <Stack Gap="2" Class="py-4">
                            @foreach (var opt in new[] { "Newest first", "Oldest first", "Most popular", "Price: low → high", "Price: high → low" })
                            {
                                <SheetClose>
                                    <Button Variant="Button.ButtonVariant.Ghost" Class="w-full justify-start h-11">@opt</Button>
                                </SheetClose>
                            }
                        </Stack>
                    </SheetContent>
                </Sheet>
                <Sheet @bind-Open="_swipeLeftOpen">
                    <SheetTrigger><Button Variant="Button.ButtonVariant.Outline">Left — swipe left</Button></SheetTrigger>
                    <SheetContent Side="SheetContent.SheetSide.Left" SwipeToClose="true">
                        <SheetHeader>
                            <SheetTitle>Navigation</SheetTitle>
                            <SheetDescription>Swipe left to close.</SheetDescription>
                        </SheetHeader>
                        <Stack Gap="1" Class="py-4">
                            @foreach (var item in new[] { ("Home", "House"), ("Dashboard", "LayoutDashboard"), ("Reports", "BarChart3"), ("Settings", "Settings"), ("Help", "CircleHelp") })
                            {
                                <SheetClose>
                                    <Flex Align="center" Gap="3" Class="rounded-md px-3 py-3 hover:bg-accent cursor-pointer">
                                        <DynamicIcon Name="@item.Item2" Class="h-5 w-5 text-muted-foreground" />
                                        <Lumeo.Text Size="sm" Weight="medium">@item.Item1</Lumeo.Text>
                                    </Flex>
                                </SheetClose>
                            }
                        </Stack>
                    </SheetContent>
                </Sheet>
            </Flex>
        </Stack>
    </ComponentDemo>
</Stack>

<div class="mt-12">
    <Heading Id="keyboard-interactions" Level="2" Class="scroll-mt-20">Keyboard Interactions</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Key</TableHead>
                    <TableHead>Action</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell><Kbd>Escape</Kbd></TableCell><TableCell>Close the sheet (unless PreventClose is enabled)</TableCell></TableRow>
                <TableRow><TableCell><Kbd>Tab</Kbd></TableCell><TableCell>Cycle focus through interactive elements within the sheet (focus trap)</TableCell></TableRow>
                <TableRow><TableCell><Kbd>Shift + Tab</Kbd></TableCell><TableCell>Move focus to the previous interactive element within the sheet</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>
</div>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</Heading>

    <Stack Gap="8" Class="mt-8">
        <Stack>
            <Heading Level="3" Class="mb-3">Sheet</Heading>
            <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
                <table class="w-full min-w-[600px] text-sm">
                    <thead>
                        <tr class="border-b border-border/40 bg-muted/40">
                            <th class="text-left p-3 font-medium text-foreground">Property</th>
                            <th class="text-left p-3 font-medium text-foreground">Type</th>
                            <th class="text-left p-3 font-medium text-foreground">Default</th>
                            <th class="text-left p-3 font-medium text-foreground">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Open</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">false</td>
                            <td class="p-3 text-muted-foreground">Controls whether the sheet is open. Use with @@bind-Open for two-way binding.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">OpenChanged</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;bool&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Callback invoked when the open state changes.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">IsOpen</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">&gt; Open</td>
                            <td class="p-3 text-muted-foreground">Obsolete alias for Open; will be removed in a future release.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">IsOpenChanged</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;bool&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">&gt; OpenChanged</td>
                            <td class="p-3 text-muted-foreground">Obsolete alias for OpenChanged; will be removed in a future release.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">SheetContent</Heading>
            <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
                <table class="w-full min-w-[600px] text-sm">
                    <thead>
                        <tr class="border-b border-border/40 bg-muted/40">
                            <th class="text-left p-3 font-medium text-foreground">Property</th>
                            <th class="text-left p-3 font-medium text-foreground">Type</th>
                            <th class="text-left p-3 font-medium text-foreground">Default</th>
                            <th class="text-left p-3 font-medium text-foreground">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Side</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">SheetSide</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Right</td>
                            <td class="p-3 text-muted-foreground">Which edge the sheet slides in from. Values: Top, Right, Bottom, Left.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Size</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">SheetSize</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Default</td>
                            <td class="p-3 text-muted-foreground">Sheet dimension. On <code>Left</code>/<code>Right</code> this controls width; on <code>Top</code>/<code>Bottom</code> it controls height (2.1.1). Values: Sm, Default, Lg, Xl, Full — where <strong>Full on Top/Bottom takes the entire viewport</strong>, the mobile-fullscreen bottom-sheet pattern.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">PreventClose</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">false</td>
                            <td class="p-3 text-muted-foreground">Prevents closing via backdrop click or Escape key.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">SwipeToClose</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">false</td>
                            <td class="p-3 text-muted-foreground">Enables touch swipe-to-dismiss in the direction matching <code>Side</code> (Top→up, Right→right, Bottom→down, Left→left). Default false because Sheets often contain scrollable content — enable only when content fits without scrolling. Added in rc.49.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">SheetTrigger / SheetClose / SheetHeader / SheetFooter / SheetTitle / SheetDescription</Heading>
            <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
                <table class="w-full min-w-[600px] text-sm">
                    <thead>
                        <tr class="border-b border-border/40 bg-muted/40">
                            <th class="text-left p-3 font-medium text-foreground">Property</th>
                            <th class="text-left p-3 font-medium text-foreground">Type</th>
                            <th class="text-left p-3 font-medium text-foreground">Default</th>
                            <th class="text-left p-3 font-medium text-foreground">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary italic text-muted-foreground" colspan="4">These layout sub-components mirror the Dialog API: SheetTrigger opens, SheetClose closes, SheetHeader/Footer are flex containers, SheetTitle/Description style the text.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>
    </Stack>
</Stack>

<div class="mt-12">
    <Heading Id="related" Level="2" Class="scroll-mt-20">Related Components</Heading>
    <ul class="mt-4 space-y-2 text-sm">
        <li><a href="/components/drawer" class="text-primary hover:underline">Drawer</a> — Use for mobile-first bottom sheet overlays with swipe-to-dismiss</li>
        <li><a href="/components/dialog" class="text-primary hover:underline">Dialog</a> — Use for centered modals that demand user attention and a decision</li>
        <li><a href="/components/sidebar" class="text-primary hover:underline">Sidebar</a> — Use for persistent navigation panels that remain visible alongside content</li>
    </ul>
</div>

@code {
    private bool _isOpen;
    private bool _isTopOpen;
    private bool _isRightOpen;
    private bool _isBottomOpen;
    private bool _isLeftOpen;
    private bool _isNavOpen;
    private bool _preventSheetOpen;
    private bool _sideInteractiveOpen;
    private bool _swipeTopOpen;
    private bool _swipeRightOpen;
    private bool _swipeBottomOpen;
    private bool _swipeLeftOpen;
    private Dictionary<SheetContent.SheetSize, bool> _sheetSizeOpen = Enum.GetValues<SheetContent.SheetSize>()
        .ToDictionary(s => s, _ => false);

    // Interactive: Side
    private string _sheetSideSel = "Right";
    private SheetContent.SheetSide _activeSheetSide => Enum.Parse<SheetContent.SheetSide>(_sheetSideSel);
    private List<Segmented.SegmentedOption> _sheetSideOptions = new()
    {
        new() { Label = "Top", Value = "Top" },
        new() { Label = "Right", Value = "Right" },
        new() { Label = "Bottom", Value = "Bottom" },
        new() { Label = "Left", Value = "Left" },
    };
    private string _sideInteractiveCode = @"<Segmented @bind-Value=""_sheetSideSel"" Options=""_sheetSideOptions"" />
<Sheet @bind-Open=""_open"">
    <SheetTrigger>
        <Button Variant=""Button.ButtonVariant.Outline"">Open Sheet (@_sheetSideSel)</Button>
    </SheetTrigger>
    <SheetContent Side=""@_activeSheetSide"">
        <SheetHeader>
            <SheetTitle>@_sheetSideSel Sheet</SheetTitle>
            <SheetDescription>This sheet slides in from the @_sheetSideSel.ToLower().</SheetDescription>
        </SheetHeader>
    </SheetContent>
</Sheet>

@code {
    private string _sheetSideSel = ""Right"";
    private SheetContent.SheetSide _activeSheetSide => Enum.Parse<SheetContent.SheetSide>(_sheetSideSel);
    private List<Segmented.SegmentedOption> _sheetSideOptions = new()
    {
        new() { Label = ""Top"", Value = ""Top"" },
        new() { Label = ""Right"", Value = ""Right"" },
        new() { Label = ""Bottom"", Value = ""Bottom"" },
        new() { Label = ""Left"", Value = ""Left"" },
    };
}";

    private string _sizesCode = @"@foreach (var size in Enum.GetValues<SheetContent.SheetSize>())
{
    <Sheet @bind-Open=""@_sheetSizeOpen[size]"">
        <SheetTrigger>
            <Button Variant=""Button.ButtonVariant.Outline"">@size</Button>
        </SheetTrigger>
        <SheetContent Size=""@size"">
            <SheetHeader>
                <SheetTitle>@size Sheet</SheetTitle>
                <SheetDescription>This sheet uses Size=""SheetContent.SheetSize.@size""</SheetDescription>
            </SheetHeader>
            <Stack Gap=""4"" Class=""py-4"">
                <Lumeo.Text Size=""sm"" Color=""muted"">Sheet content goes here.</Lumeo.Text>
            </Stack>
        </SheetContent>
    </Sheet>
}

@code {
    private Dictionary<SheetContent.SheetSize, bool> _sheetSizeOpen =
        Enum.GetValues<SheetContent.SheetSize>().ToDictionary(s => s, _ => false);
}";

    private string _preventCloseCode = @"<Sheet @bind-Open=""_preventSheetOpen"">
    <SheetTrigger>
        <Button Variant=""Button.ButtonVariant.Outline"">Open Protected Sheet</Button>
    </SheetTrigger>
    <SheetContent PreventClose=""true"">
        <SheetHeader>
            <SheetTitle>Protected Sheet</SheetTitle>
            <SheetDescription>This sheet cannot be dismissed by clicking outside.</SheetDescription>
        </SheetHeader>
        <Stack Gap=""4"" Class=""py-4"">
            <Button OnClick=""@(() => _preventSheetOpen = false)"">Close Sheet</Button>
        </Stack>
    </SheetContent>
</Sheet>

@code {
    private bool _preventSheetOpen;
}";

    private string _defaultCode = @"<Sheet @bind-Open=""_isOpen"">
    <SheetTrigger>
        <Button Variant=""Button.ButtonVariant.Outline"">Open Sheet</Button>
    </SheetTrigger>
    <SheetContent>
        <SheetHeader>
            <SheetTitle>Edit Profile</SheetTitle>
            <SheetDescription>Make changes to your profile here.</SheetDescription>
        </SheetHeader>
        <Grid Columns=""4"" Gap=""4"" Class=""items-center py-4"">
            <Label Class=""text-right"">Name</Label>
            <Input Class=""col-span-3"" Value=""John Doe"" />
        </Grid>
        <SheetFooter>
            <SheetClose>
                <Button>Save Changes</Button>
            </SheetClose>
        </SheetFooter>
    </SheetContent>
</Sheet>

@code {
    private bool _isOpen;
}";

    private string _sideCode = @"<Sheet @bind-Open=""_isTopOpen"">
    <SheetTrigger>
        <Button Variant=""Button.ButtonVariant.Outline"">Top</Button>
    </SheetTrigger>
    <SheetContent Side=""SheetContent.SheetSide.Top"">
        <SheetHeader>
            <SheetTitle>Top Sheet</SheetTitle>
            <SheetDescription>This sheet slides in from the top.</SheetDescription>
        </SheetHeader>
    </SheetContent>
</Sheet>

<Sheet @bind-Open=""_isLeftOpen"">
    <SheetTrigger>
        <Button Variant=""Button.ButtonVariant.Outline"">Left</Button>
    </SheetTrigger>
    <SheetContent Side=""SheetContent.SheetSide.Left"">
        <SheetHeader>
            <SheetTitle>Left Sheet</SheetTitle>
            <SheetDescription>This sheet slides in from the left.</SheetDescription>
        </SheetHeader>
    </SheetContent>
</Sheet>";

    private string _swipeAllSidesCode = @"<!-- SwipeToClose works on all 4 sides — direction matches Side -->
<Sheet @bind-Open=""_bottomOpen"">
    <SheetTrigger><Button>Bottom — swipe down</Button></SheetTrigger>
    <SheetContent Side=""SheetContent.SheetSide.Bottom"" SwipeToClose=""true"">
        <SheetHeader><SheetTitle>Filter Results</SheetTitle></SheetHeader>
    </SheetContent>
</Sheet>

<Sheet @bind-Open=""_rightOpen"">
    <SheetTrigger><Button>Right — swipe right</Button></SheetTrigger>
    <SheetContent Side=""SheetContent.SheetSide.Right"" SwipeToClose=""true"" Size=""SheetContent.SheetSize.Lg"">
        <SheetHeader><SheetTitle>Edit Profile</SheetTitle></SheetHeader>
        @* ...form content... *@
    </SheetContent>
</Sheet>";

    private string _navCode = @"<Sheet @bind-Open=""_isOpen"">
    <SheetTrigger>
        <Button Variant=""Button.ButtonVariant.Outline"" Size=""Button.ButtonSize.Icon"">
            <Blazicon Svg=""Lucide.Menu"" class=""h-4 w-4"" />
        </Button>
    </SheetTrigger>
    <SheetContent Side=""SheetContent.SheetSide.Left"">
        <SheetHeader>
            <SheetTitle>Navigation</SheetTitle>
            <SheetDescription>Browse the application.</SheetDescription>
        </SheetHeader>
        <nav class=""flex flex-col gap-2 py-4"">
            <SheetClose>
                <span class=""block w-full rounded-md px-3 py-2 text-sm hover:bg-accent cursor-pointer"">Home</span>
            </SheetClose>
            <SheetClose>
                <span class=""block w-full rounded-md px-3 py-2 text-sm hover:bg-accent cursor-pointer"">About</span>
            </SheetClose>
        </nav>
    </SheetContent>
</Sheet>

@code {
    private bool _isOpen;
}";
}
