@page "/components/tabs"

<PageTitle>Tabs — Lumeo</PageTitle>

<PageHeader Title="Tabs" Description="A set of layered sections of content, known as tab panels, that are displayed one at a time." />

<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>Switch between different views or categories within the same context.</li>
        <li>Organize related content like account settings, security, and notifications.</li>
        <li>Reduce page length by showing one content section at a time.</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default" Code="@_defaultCode">
        <Container MaxWidth="md" Center="false">
            <Tabs ActiveValue="account">
                <TabsList>
                    <TabsTrigger Value="account">Account</TabsTrigger>
                    <TabsTrigger Value="password">Password</TabsTrigger>
                </TabsList>
                <TabsContent Value="account">
                    <Card>
                        <CardHeader>
                            <Heading Level="3" Size="lg" Class="leading-none tracking-tight">Account</Heading>
                            <Lumeo.Text Size="sm" Color="muted">Make changes to your account here. Click save when you're done.</Lumeo.Text>
                        </CardHeader>
                        <CardContent>
                            <Stack Gap="4">
                                <FormField Label="Name">
                                    <Input Value="Pedro Duarte" />
                                </FormField>
                                <FormField Label="Username">
                                    <Input Value="@("@peduarte")" />
                                </FormField>
                            </Stack>
                        </CardContent>
                        <CardFooter>
                            <Button>Save changes</Button>
                        </CardFooter>
                    </Card>
                </TabsContent>
                <TabsContent Value="password">
                    <Card>
                        <CardHeader>
                            <Heading Level="3" Size="lg" Class="leading-none tracking-tight">Password</Heading>
                            <Lumeo.Text Size="sm" Color="muted">Change your password here. After saving, you'll be logged out.</Lumeo.Text>
                        </CardHeader>
                        <CardContent>
                            <Stack Gap="4">
                                <FormField Label="Current password">
                                    <Input type="password" />
                                </FormField>
                                <FormField Label="New password">
                                    <Input type="password" />
                                </FormField>
                            </Stack>
                        </CardContent>
                        <CardFooter>
                            <Button>Save password</Button>
                        </CardFooter>
                    </Card>
                </TabsContent>
            </Tabs>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Notifications" Code="@_notifCode">
        <Container MaxWidth="md" Center="false">
            <Tabs ActiveValue="all">
                <TabsList>
                    <TabsTrigger Value="all">All</TabsTrigger>
                    <TabsTrigger Value="unread">Unread</TabsTrigger>
                    <TabsTrigger Value="archived">Archived</TabsTrigger>
                </TabsList>
                <TabsContent Value="all">
                    <Stack Gap="2" Class="pt-2">
                        @foreach (var n in _notifications)
                        {
                            <Flex Gap="3" Align="start" Class="p-3 rounded-lg border bg-card">
                                <Text As="span" Class="@($"mt-1.5 h-2 w-2 rounded-full shrink-0 {(n.Unread ? "bg-primary" : "bg-muted")}")"></Text>
                                <Stack Gap="0">
                                    <Lumeo.Text Size="sm" Weight="medium">@n.Title</Lumeo.Text>
                                    <Lumeo.Text Size="xs" Color="muted">@n.Time</Lumeo.Text>
                                </Stack>
                            </Flex>
                        }
                    </Stack>
                </TabsContent>
                <TabsContent Value="unread">
                    <Stack Gap="2" Class="pt-2">
                        @foreach (var n in _notifications.Where(x => x.Unread))
                        {
                            <Flex Gap="3" Align="start" Class="p-3 rounded-lg border bg-card">
                                <Lumeo.Text As="span" Class="mt-1.5 h-2 w-2 rounded-full shrink-0 bg-primary"></Lumeo.Text>
                                <Stack Gap="0">
                                    <Lumeo.Text Size="sm" Weight="medium">@n.Title</Lumeo.Text>
                                    <Lumeo.Text Size="xs" Color="muted">@n.Time</Lumeo.Text>
                                </Stack>
                            </Flex>
                        }
                    </Stack>
                </TabsContent>
                <TabsContent Value="archived">
                    <Lumeo.Text Size="sm" Color="muted" Class="p-4 text-center">No archived notifications.</Lumeo.Text>
                </TabsContent>
            </Tabs>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Vertical Tabs" Code="@_verticalCode">
        <Tabs Orientation="Tabs.TabsOrientation.Vertical" @bind-ActiveValue="_verticalTab" Class="flex gap-4">
            <TabsList>
                <TabsTrigger Value="account">Account</TabsTrigger>
                <TabsTrigger Value="security">Security</TabsTrigger>
                <TabsTrigger Value="notifications">Notifications</TabsTrigger>
            </TabsList>
            <Stack Class="flex-1">
                <TabsContent Value="account">
                    <Card>
                        <CardHeader>
                            <Heading Level="3" Size="lg" Class="leading-none tracking-tight">Account</Heading>
                            <Lumeo.Text Size="sm" Color="muted">Manage your account settings.</Lumeo.Text>
                        </CardHeader>
                        <CardContent><Lumeo.Text Size="sm" Color="muted">Account settings content goes here.</Lumeo.Text></CardContent>
                    </Card>
                </TabsContent>
                <TabsContent Value="security">
                    <Card>
                        <CardHeader>
                            <Heading Level="3" Size="lg" Class="leading-none tracking-tight">Security</Heading>
                            <Lumeo.Text Size="sm" Color="muted">Update your security preferences.</Lumeo.Text>
                        </CardHeader>
                        <CardContent><Lumeo.Text Size="sm" Color="muted">Security settings content goes here.</Lumeo.Text></CardContent>
                    </Card>
                </TabsContent>
                <TabsContent Value="notifications">
                    <Card>
                        <CardHeader>
                            <Heading Level="3" Size="lg" Class="leading-none tracking-tight">Notifications</Heading>
                            <Lumeo.Text Size="sm" Color="muted">Configure notification preferences.</Lumeo.Text>
                        </CardHeader>
                        <CardContent><Lumeo.Text Size="sm" Color="muted">Notification settings content goes here.</Lumeo.Text></CardContent>
                    </Card>
                </TabsContent>
            </Stack>
        </Tabs>
    </ComponentDemo>

    <ComponentDemo Title="Simple" Code="@_simpleCode">
        <Container MaxWidth="md" Center="false">
            <Tabs ActiveValue="overview">
                <TabsList>
                    <TabsTrigger Value="overview">Overview</TabsTrigger>
                    <TabsTrigger Value="analytics">Analytics</TabsTrigger>
                    <TabsTrigger Value="reports">Reports</TabsTrigger>
                </TabsList>
                <TabsContent Value="overview">
                    <Lumeo.Text Size="sm" Color="muted" Class="p-4">Overview content goes here. View a summary of your data.</Lumeo.Text>
                </TabsContent>
                <TabsContent Value="analytics">
                    <Lumeo.Text Size="sm" Color="muted" Class="p-4">Analytics content goes here. Dive deeper into the numbers.</Lumeo.Text>
                </TabsContent>
                <TabsContent Value="reports">
                    <Lumeo.Text Size="sm" Color="muted" Class="p-4">Reports content goes here. Download and share your reports.</Lumeo.Text>
                </TabsContent>
            </Tabs>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Render mode — preserving panel state" Code="@_renderModeCode">
        <Container MaxWidth="md" Center="false">
            <Lumeo.Text Size="sm" Color="muted" Class="mb-3 block">Type something in the input, switch tabs and come back. With <code>RenderMode="Tabs.TabsRenderMode.Lazy"</code> the text survives — the panel stays mounted (hidden) once visited. The default <code>Active</code> mode would lose it.</Lumeo.Text>
            <Tabs ActiveValue="@_rmTab" ActiveValueChanged="@(v => _rmTab = v)" RenderMode="Tabs.TabsRenderMode.Lazy">
                <TabsList>
                    <TabsTrigger Value="form">Form</TabsTrigger>
                    <TabsTrigger Value="preview">Preview</TabsTrigger>
                    <TabsTrigger Value="settings">Settings</TabsTrigger>
                </TabsList>
                <TabsContent Value="form">
                    <div class="p-4 space-y-2">
                        <Lumeo.Text Size="sm" Class="font-medium">Your name</Lumeo.Text>
                        <Input Placeholder="Type here, then switch tabs..." />
                    </div>
                </TabsContent>
                <TabsContent Value="preview"><Lumeo.Text Size="sm" Color="muted" Class="p-4">Switch back to the Form tab — the input keeps its value.</Lumeo.Text></TabsContent>
                <TabsContent Value="settings"><Lumeo.Text Size="sm" Color="muted" Class="p-4">Once a tab has been visited, its panel stays in the DOM (hidden).</Lumeo.Text></TabsContent>
            </Tabs>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Sliding Indicator" Code="@_slidingCode">
        <Container MaxWidth="md" Center="false">
            <Tabs @bind-ActiveValue="_animatedTab" AnimatedIndicator="true">
                <TabsList>
                    <TabsTrigger Value="home">Home</TabsTrigger>
                    <TabsTrigger Value="search">Search</TabsTrigger>
                    <TabsTrigger Value="library">Library</TabsTrigger>
                    <TabsTrigger Value="settings">Settings</TabsTrigger>
                </TabsList>
                <TabsContent Value="home"><Lumeo.Text Size="sm" Color="muted" Class="p-4">A sliding underline follows the active tab.</Lumeo.Text></TabsContent>
                <TabsContent Value="search"><Lumeo.Text Size="sm" Color="muted" Class="p-4">Switch between tabs to see the animation.</Lumeo.Text></TabsContent>
                <TabsContent Value="library"><Lumeo.Text Size="sm" Color="muted" Class="p-4">The indicator measures each trigger via a one-shot JS call.</Lumeo.Text></TabsContent>
                <TabsContent Value="settings"><Lumeo.Text Size="sm" Color="muted" Class="p-4">No additional JS stays registered after the measurement.</Lumeo.Text></TabsContent>
            </Tabs>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Variant — interactive" Code="@_variantInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick a value to see it applied live.</Lumeo.Text>
            <Segmented @bind-Value="_variantSel" Options="_variantOptions" />
            <Tabs ActiveValue="alpha" Variant="@_activeTabsVariant">
                <TabsList>
                    <TabsTrigger Value="alpha">Alpha</TabsTrigger>
                    <TabsTrigger Value="beta">Beta</TabsTrigger>
                    <TabsTrigger Value="gamma">Gamma</TabsTrigger>
                </TabsList>
                <TabsContent Value="alpha"><Lumeo.Text Size="sm" Color="muted" Class="p-4">Content for Alpha.</Lumeo.Text></TabsContent>
                <TabsContent Value="beta"><Lumeo.Text Size="sm" Color="muted" Class="p-4">Content for Beta.</Lumeo.Text></TabsContent>
                <TabsContent Value="gamma"><Lumeo.Text Size="sm" Color="muted" Class="p-4">Content for Gamma.</Lumeo.Text></TabsContent>
            </Tabs>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Orientation — interactive" Code="@_orientationInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick a value to see it applied live.</Lumeo.Text>
            <Segmented @bind-Value="_orientationSel" Options="_orientationOptions" />
            <Tabs ActiveValue="one" Orientation="@_activeTabsOrientation" Class="@(_activeTabsOrientation == Tabs.TabsOrientation.Vertical ? "flex gap-4" : "")">
                <TabsList>
                    <TabsTrigger Value="one">Overview</TabsTrigger>
                    <TabsTrigger Value="two">Analytics</TabsTrigger>
                    <TabsTrigger Value="three">Reports</TabsTrigger>
                </TabsList>
                <div class="flex-1">
                    <TabsContent Value="one"><Lumeo.Text Size="sm" Color="muted" Class="p-4">Overview content.</Lumeo.Text></TabsContent>
                    <TabsContent Value="two"><Lumeo.Text Size="sm" Color="muted" Class="p-4">Analytics content.</Lumeo.Text></TabsContent>
                    <TabsContent Value="three"><Lumeo.Text Size="sm" Color="muted" Class="p-4">Reports content.</Lumeo.Text></TabsContent>
                </div>
            </Tabs>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="RenderMode — interactive" Code="@_renderModeInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick a value to see it applied live. With <code>Lazy</code>, type in the input, switch tabs, come back — the text survives.</Lumeo.Text>
            <Segmented @bind-Value="_renderModeSel" Options="_renderModeOptions" />
            <Tabs ActiveValue="form" RenderMode="@_activeRenderMode">
                <TabsList>
                    <TabsTrigger Value="form">Form</TabsTrigger>
                    <TabsTrigger Value="preview">Preview</TabsTrigger>
                    <TabsTrigger Value="settings">Settings</TabsTrigger>
                </TabsList>
                <TabsContent Value="form">
                    <div class="p-4 space-y-2">
                        <Lumeo.Text Size="sm" Weight="medium">Your name</Lumeo.Text>
                        <Input Placeholder="Type here, then switch tabs..." />
                    </div>
                </TabsContent>
                <TabsContent Value="preview"><Lumeo.Text Size="sm" Color="muted" Class="p-4">Switch back to Form — with Lazy the input keeps its value.</Lumeo.Text></TabsContent>
                <TabsContent Value="settings"><Lumeo.Text Size="sm" Color="muted" Class="p-4">Active (default): panel unmounts on switch. Lazy: stays mounted. Eager: all panels render up-front.</Lumeo.Text></TabsContent>
            </Tabs>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Swipe (Mobile)" Code="@_swipeCode">
        <Container MaxWidth="md" Center="false">
            <Lumeo.Text Size="sm" Color="muted" Class="mb-3 block">On a touch device, swipe left/right on the panel area to switch tabs. <code>SwipeWrap="false"</code> (default) stops at the first and last tab.</Lumeo.Text>
            <Tabs @bind-ActiveValue="_swipeTab" SwipeEnabled="true" SwipeWrap="false">
                <TabsList>
                    <TabsTrigger Value="alpha">Alpha</TabsTrigger>
                    <TabsTrigger Value="beta">Beta</TabsTrigger>
                    <TabsTrigger Value="gamma">Gamma</TabsTrigger>
                </TabsList>
                <TabsContent Value="alpha"><Lumeo.Text Size="sm" Color="muted" Class="p-4">Swipe left to go to Beta.</Lumeo.Text></TabsContent>
                <TabsContent Value="beta"><Lumeo.Text Size="sm" Color="muted" Class="p-4">Swipe left for Gamma, right for Alpha.</Lumeo.Text></TabsContent>
                <TabsContent Value="gamma"><Lumeo.Text Size="sm" Color="muted" Class="p-4">Swipe right to go back to Beta.</Lumeo.Text></TabsContent>
            </Tabs>
        </Container>
    </ComponentDemo>
</Stack>

<Alert Variant="Alert.AlertVariant.Info" ShowIcon="true" Class="mt-6">
    <strong>Mobile (rc.49).</strong> Tab triggers now have a minimum 44×44 px touch target area so they are easy to tap on mobile without accidentally activating an adjacent tab.
</Alert>

<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>ArrowLeft</Kbd></TableCell><TableCell>Moves focus to the previous tab trigger (horizontal orientation).</TableCell></TableRow>
                <TableRow><TableCell><Kbd>ArrowRight</Kbd></TableCell><TableCell>Moves focus to the next tab trigger (horizontal orientation).</TableCell></TableRow>
                <TableRow><TableCell><Kbd>ArrowUp</Kbd></TableCell><TableCell>Moves focus to the previous tab trigger (vertical orientation).</TableCell></TableRow>
                <TableRow><TableCell><Kbd>ArrowDown</Kbd></TableCell><TableCell>Moves focus to the next tab trigger (vertical orientation).</TableCell></TableRow>
                <TableRow><TableCell><Kbd>Home</Kbd></TableCell><TableCell>Moves focus to the first tab trigger.</TableCell></TableRow>
                <TableRow><TableCell><Kbd>End</Kbd></TableCell><TableCell>Moves focus to the last tab trigger.</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">Tabs</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">ActiveValue</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">""</td>
                            <td class="p-3 text-muted-foreground">The value of the currently active tab. Use with @@bind-ActiveValue for two-way binding.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ActiveValueChanged</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;string&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 active tab changes.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Orientation</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">TabsOrientation</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Horizontal</td>
                            <td class="p-3 text-muted-foreground">Layout direction of the tabs. Values: Tabs.TabsOrientation.Horizontal, Tabs.TabsOrientation.Vertical.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">AnimatedIndicator</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">When true (horizontal only), renders a sliding underline that animates between active triggers. Requires one JS measurement per tab change.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Variant</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Tabs.TabsVariant</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Default</td>
                            <td class="p-3 text-muted-foreground">Visual style of the list/triggers. Values: <code>Tabs.TabsVariant.Default</code>, <code>Card</code>, <code>Pill</code>.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">RenderMode</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">TabsRenderMode</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Active</td>
                            <td class="p-3 text-muted-foreground">When each panel is rendered and whether its state survives a tab switch. <code>Active</code> (default) — only the active panel is in the DOM; switching away unmounts it (form input, scroll, component state lost). <code>Lazy</code> — a panel renders on first activation and stays mounted (hidden) afterwards. <code>Eager</code> — all panels render immediately; inactive ones hidden. Values: <code>Tabs.TabsRenderMode.Active / Lazy / Eager</code>.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">SwipeEnabled</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">When true, a horizontal pointer drag (&gt;50 px horizontal, &lt;30 px vertical) on any <code>TabsContent</code> panel switches to the next or previous tab. Vertical scroll is unaffected (<code>touch-action: pan-y</code>). Swipes that start on an interactive element (button, input, textarea, contenteditable) are ignored.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">SwipeWrap</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">When true and <code>SwipeEnabled</code> is active, swiping past the last tab wraps around to the first (and vice-versa). Default <code>false</code> stops at the boundaries.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">TabsTrigger</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">Value</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">""</td>
                            <td class="p-3 text-muted-foreground">The value this tab trigger activates. Must match the Value of the corresponding TabsContent. Required.</td>
                        </tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Disabled</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">Disables the trigger so it cannot be selected.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">IconContent</td><td class="p-3 font-mono text-xs text-muted-foreground">RenderFragment?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">Slot rendered before the trigger label (icon).</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">TrailingContent</td><td class="p-3 font-mono text-xs text-muted-foreground">RenderFragment?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">Slot rendered after the trigger label (badge, counter, etc.).</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">IsClosable</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">Shows a close affordance; invokes OnClose when clicked.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">OnClose</td><td class="p-3 font-mono text-xs text-muted-foreground">EventCallback</td><td class="p-3 font-mono text-xs text-muted-foreground">—</td><td class="p-3 text-muted-foreground">Invoked when a closable trigger's close button is clicked.</td></tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">TabsContent</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">Value</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">""</td>
                            <td class="p-3 text-muted-foreground">The value of this tab panel. Must match the Value of the corresponding TabsTrigger. Required.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ForceMount</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">Always render this panel into the DOM (hidden when inactive), regardless of the parent <code>RenderMode</code>. Use for a single panel whose state must survive every switch — e.g. a half-filled form — while the rest of the set stays on the lighter default mode.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">TabsList</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">Scrollable</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 horizontal scrolling when triggers overflow.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">TrailingContent</td><td class="p-3 font-mono text-xs text-muted-foreground">RenderFragment?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">Content rendered after the last trigger (e.g., actions or filters).</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/accordion" class="text-primary hover:underline">Accordion</a> — Use when multiple sections can be expanded at once in a vertical layout.</li>
        <li><a href="/components/navigation-menu" class="text-primary hover:underline">NavigationMenu</a> — Use for top-level site navigation rather than in-page content switching.</li>
        <li><a href="/components/toggle-group" class="text-primary hover:underline">ToggleGroup</a> — A segmented control for switching between a small set of views.</li>
    </ul>
</div>

@code {
    private string _verticalTab = "account";
    private string _animatedTab = "home";
    private string _rmTab = "form";
    private string _swipeTab = "alpha";

    // Interactive: Variant
    private string _variantSel = "Default";
    private Tabs.TabsVariant _activeTabsVariant => Enum.Parse<Tabs.TabsVariant>(_variantSel);
    private List<Segmented.SegmentedOption> _variantOptions = new()
    {
        new() { Label = "Default", Value = "Default" },
        new() { Label = "Card", Value = "Card" },
        new() { Label = "Pill", Value = "Pill" },
    };

    // Interactive: Orientation
    private string _orientationSel = "Horizontal";
    private Tabs.TabsOrientation _activeTabsOrientation => Enum.Parse<Tabs.TabsOrientation>(_orientationSel);
    private List<Segmented.SegmentedOption> _orientationOptions = new()
    {
        new() { Label = "Horizontal", Value = "Horizontal" },
        new() { Label = "Vertical", Value = "Vertical" },
    };

    // Interactive: RenderMode
    private string _renderModeSel = "Active";
    private Tabs.TabsRenderMode _activeRenderMode => Enum.Parse<Tabs.TabsRenderMode>(_renderModeSel);
    private List<Segmented.SegmentedOption> _renderModeOptions = new()
    {
        new() { Label = "Active", Value = "Active" },
        new() { Label = "Lazy", Value = "Lazy" },
        new() { Label = "Eager", Value = "Eager" },
    };

    private string _variantInteractiveCode = @"<Segmented @bind-Value=""_variantSel"" Options=""_variantOptions"" />
<Tabs ActiveValue=""alpha"" Variant=""@_activeTabsVariant"">
    <TabsList>
        <TabsTrigger Value=""alpha"">Alpha</TabsTrigger>
        <TabsTrigger Value=""beta"">Beta</TabsTrigger>
        <TabsTrigger Value=""gamma"">Gamma</TabsTrigger>
    </TabsList>
    <TabsContent Value=""alpha"">Content for Alpha.</TabsContent>
    <TabsContent Value=""beta"">Content for Beta.</TabsContent>
    <TabsContent Value=""gamma"">Content for Gamma.</TabsContent>
</Tabs>

@code {
    private string _variantSel = ""Default"";
    private Tabs.TabsVariant _activeTabsVariant => Enum.Parse<Tabs.TabsVariant>(_variantSel);
    private List<Segmented.SegmentedOption> _variantOptions = new()
    {
        new() { Label = ""Default"", Value = ""Default"" },
        new() { Label = ""Card"", Value = ""Card"" },
        new() { Label = ""Pill"", Value = ""Pill"" },
    };
}";

    private string _orientationInteractiveCode = @"<Segmented @bind-Value=""_orientationSel"" Options=""_orientationOptions"" />
<Tabs ActiveValue=""one"" Orientation=""@_activeTabsOrientation""
      Class=""@(_activeTabsOrientation == Tabs.TabsOrientation.Vertical ? \""flex gap-4\"" : \""\"")\"">
    <TabsList>
        <TabsTrigger Value=""one"">Overview</TabsTrigger>
        <TabsTrigger Value=""two"">Analytics</TabsTrigger>
        <TabsTrigger Value=""three"">Reports</TabsTrigger>
    </TabsList>
    <div class=""flex-1"">
        <TabsContent Value=""one"">Overview content.</TabsContent>
        <TabsContent Value=""two"">Analytics content.</TabsContent>
        <TabsContent Value=""three"">Reports content.</TabsContent>
    </div>
</Tabs>

@code {
    private string _orientationSel = ""Horizontal"";
    private Tabs.TabsOrientation _activeTabsOrientation => Enum.Parse<Tabs.TabsOrientation>(_orientationSel);
    private List<Segmented.SegmentedOption> _orientationOptions = new()
    {
        new() { Label = ""Horizontal"", Value = ""Horizontal"" },
        new() { Label = ""Vertical"", Value = ""Vertical"" },
    };
}";

    private string _renderModeInteractiveCode = @"<Segmented @bind-Value=""_renderModeSel"" Options=""_renderModeOptions"" />
<Tabs ActiveValue=""form"" RenderMode=""@_activeRenderMode"">
    <TabsList>
        <TabsTrigger Value=""form"">Form</TabsTrigger>
        <TabsTrigger Value=""preview"">Preview</TabsTrigger>
        <TabsTrigger Value=""settings"">Settings</TabsTrigger>
    </TabsList>
    <TabsContent Value=""form"">
        <Input Placeholder=""Type here, then switch tabs..."" />
    </TabsContent>
    <TabsContent Value=""preview"">Switch back — with Lazy the input keeps its value.</TabsContent>
    <TabsContent Value=""settings"">Active: unmounts on switch. Lazy: stays mounted. Eager: renders up-front.</TabsContent>
</Tabs>

@code {
    private string _renderModeSel = ""Active"";
    private Tabs.TabsRenderMode _activeRenderMode => Enum.Parse<Tabs.TabsRenderMode>(_renderModeSel);
    private List<Segmented.SegmentedOption> _renderModeOptions = new()
    {
        new() { Label = ""Active"", Value = ""Active"" },
        new() { Label = ""Lazy"", Value = ""Lazy"" },
        new() { Label = ""Eager"", Value = ""Eager"" },
    };
}";

    private string _renderModeCode = @"@* Lazy: a panel renders the first time its tab is shown,
   then stays in the DOM (hidden) — its state survives switches.
   Active (default): only the active panel exists; switching unmounts it.
   Eager: every panel renders up-front, inactive ones hidden. *@
<Tabs @bind-ActiveValue=""_tab"" RenderMode=""Tabs.TabsRenderMode.Lazy"">
    <TabsList>
        <TabsTrigger Value=""form"">Form</TabsTrigger>
        <TabsTrigger Value=""preview"">Preview</TabsTrigger>
    </TabsList>
    <TabsContent Value=""form"">
        <Input Placeholder=""Survives a tab switch"" />
    </TabsContent>
    <TabsContent Value=""preview"">...</TabsContent>

    @* Or pin just one panel, leaving the rest on the light default: *@
    @* <TabsContent Value=""form"" ForceMount=""true"">...</TabsContent> *@
</Tabs>";

    private string _slidingCode = @"<Tabs @bind-ActiveValue=""_active"" AnimatedIndicator=""true"">
    <TabsList>
        <TabsTrigger Value=""home"">Home</TabsTrigger>
        <TabsTrigger Value=""search"">Search</TabsTrigger>
        <TabsTrigger Value=""library"">Library</TabsTrigger>
        <TabsTrigger Value=""settings"">Settings</TabsTrigger>
    </TabsList>
</Tabs>";

    private string _verticalCode = @"<Tabs Orientation=""Tabs.TabsOrientation.Vertical"" @bind-ActiveValue=""_verticalTab"" Class=""flex gap-4"">
    <TabsList>
        <TabsTrigger Value=""account"">Account</TabsTrigger>
        <TabsTrigger Value=""security"">Security</TabsTrigger>
        <TabsTrigger Value=""notifications"">Notifications</TabsTrigger>
    </TabsList>
    <div class=""flex-1"">
        <TabsContent Value=""account"">
            <Card>
                <CardHeader><CardTitle>Account</CardTitle><CardDescription>Manage your account settings.</CardDescription></CardHeader>
                <CardContent><Lumeo.Text Size=""sm"" Color=""muted"">Account settings content goes here.</Lumeo.Text></CardContent>
            </Card>
        </TabsContent>
        <TabsContent Value=""security"">
            <Card>
                <CardHeader><CardTitle>Security</CardTitle><CardDescription>Update your security preferences.</CardDescription></CardHeader>
                <CardContent><Lumeo.Text Size=""sm"" Color=""muted"">Security settings content goes here.</Lumeo.Text></CardContent>
            </Card>
        </TabsContent>
        <TabsContent Value=""notifications"">
            <Card>
                <CardHeader><CardTitle>Notifications</CardTitle><CardDescription>Configure notification preferences.</CardDescription></CardHeader>
                <CardContent><Lumeo.Text Size=""sm"" Color=""muted"">Notification settings content goes here.</Lumeo.Text></CardContent>
            </Card>
        </TabsContent>
    </div>
</Tabs>

@code {
    private string _verticalTab = ""account"";
}";

    private record NotifItem(string Title, string Time, bool Unread);
    private List<NotifItem> _notifications = new()
    {
        new("Your call has been confirmed.", "2 min ago", true),
        new("You have a new message!", "1 hour ago", true),
        new("Subscription expiring soon.", "3 hours ago", false),
        new("Report ready to download.", "2 days ago", false),
    };

    private string _notifCode = @"<Tabs ActiveValue=""all"">
    <TabsList>
        <TabsTrigger Value=""all"">All</TabsTrigger>
        <TabsTrigger Value=""unread"">Unread</TabsTrigger>
        <TabsTrigger Value=""archived"">Archived</TabsTrigger>
    </TabsList>
    <TabsContent Value=""all"">
        @foreach (var n in _notifications)
        {
            <Flex Gap=""3"" Align=""start"" Class=""p-3 rounded-lg border"">
                <span class=""mt-1.5 h-2 w-2 rounded-full @(n.Unread ? ""bg-primary"" : ""bg-muted"")""></span>
                <Stack Gap=""0"">
                    <Lumeo.Text Size=""sm"" Weight=""medium"">@n.Title</Lumeo.Text>
                    <Lumeo.Text Size=""xs"" Color=""muted"">@n.Time</Lumeo.Text>
                </Stack>
            </Flex>
        }
    </TabsContent>
    <TabsContent Value=""unread"">
        @foreach (var n in _notifications.Where(x => x.Unread)) { /* same */ }
    </TabsContent>
    <TabsContent Value=""archived"">
        <Lumeo.Text Size=""sm"" Color=""muted"" Class=""p-4 text-center"">No archived notifications.</Lumeo.Text>
    </TabsContent>
</Tabs>";

    private string _defaultCode = @"<Tabs ActiveValue=""account"">
    <TabsList>
        <TabsTrigger Value=""account"">Account</TabsTrigger>
        <TabsTrigger Value=""password"">Password</TabsTrigger>
    </TabsList>
    <TabsContent Value=""account"">
        <Card>
            <CardHeader>
                <Heading Level=""3"" Size=""lg"" Class=""leading-none tracking-tight"">Account</Heading>
                <Lumeo.Text Size=""sm"" Color=""muted"">Make changes to your account here.</Lumeo.Text>
            </CardHeader>
            <CardContent>
                <Stack Gap=""4"">
                    <FormField Label=""Name"">
                        <Input Value=""Pedro Duarte"" />
                    </FormField>
                    <FormField Label=""Username"">
                        <Input Value=""@peduarte"" />
                    </FormField>
                </Stack>
            </CardContent>
            <CardFooter>
                <Button>Save changes</Button>
            </CardFooter>
        </Card>
    </TabsContent>
    <TabsContent Value=""password"">
        <Card>
            <CardHeader>
                <Heading Level=""3"" Size=""lg"" Class=""leading-none tracking-tight"">Password</Heading>
                <Lumeo.Text Size=""sm"" Color=""muted"">Change your password here.</Lumeo.Text>
            </CardHeader>
            <CardContent>
                <Stack Gap=""4"">
                    <FormField Label=""Current password"">
                        <Input type=""password"" />
                    </FormField>
                    <FormField Label=""New password"">
                        <Input type=""password"" />
                    </FormField>
                </Stack>
            </CardContent>
            <CardFooter>
                <Button>Save password</Button>
            </CardFooter>
        </Card>
    </TabsContent>
</Tabs>";

    private string _simpleCode = @"<Tabs ActiveValue=""overview"">
    <TabsList>
        <TabsTrigger Value=""overview"">Overview</TabsTrigger>
        <TabsTrigger Value=""analytics"">Analytics</TabsTrigger>
        <TabsTrigger Value=""reports"">Reports</TabsTrigger>
    </TabsList>
    <TabsContent Value=""overview"">
        <Lumeo.Text Size=""sm"" Color=""muted"" Class=""p-4"">Overview content goes here.</Lumeo.Text>
    </TabsContent>
    <TabsContent Value=""analytics"">
        <Lumeo.Text Size=""sm"" Color=""muted"" Class=""p-4"">Analytics content goes here.</Lumeo.Text>
    </TabsContent>
    <TabsContent Value=""reports"">
        <Lumeo.Text Size=""sm"" Color=""muted"" Class=""p-4"">Reports content goes here.</Lumeo.Text>
    </TabsContent>
</Tabs>";

    private string _swipeCode = @"@* SwipeEnabled=""true"" — horizontal drag (>50 px) on a panel switches tabs.
   SwipeWrap=""false"" (default) stops at the first/last tab; set true for wrap-around.
   Uses pointer events + touch-action: pan-y so vertical scroll still works. *@
<Tabs @bind-ActiveValue=""_tab"" SwipeEnabled=""true"" SwipeWrap=""false"">
    <TabsList>
        <TabsTrigger Value=""alpha"">Alpha</TabsTrigger>
        <TabsTrigger Value=""beta"">Beta</TabsTrigger>
        <TabsTrigger Value=""gamma"">Gamma</TabsTrigger>
    </TabsList>
    <TabsContent Value=""alpha"">Swipe left to go to Beta.</TabsContent>
    <TabsContent Value=""beta"">Swipe left for Gamma, right for Alpha.</TabsContent>
    <TabsContent Value=""gamma"">Swipe right to go back to Beta.</TabsContent>
</Tabs>";
}
