@page "/components/toggle-group"

<PageTitle>Toggle Group — Lumeo</PageTitle>

<PageHeader Title="Toggle Group" Description="A set of two-state buttons that can be toggled on or off." />

<Stack Gap="8">
    <ComponentDemo Title="Single Selection" Code="@_singleCode">
        <ToggleGroup Type="ToggleGroup.ToggleGroupType.Single">
            <ToggleGroupItem Value="bold">
                <DynamicIcon Name="Bold" Class="h-4 w-4" />
            </ToggleGroupItem>
            <ToggleGroupItem Value="italic">
                <DynamicIcon Name="Italic" Class="h-4 w-4" />
            </ToggleGroupItem>
            <ToggleGroupItem Value="underline">
                <DynamicIcon Name="Underline" Class="h-4 w-4" />
            </ToggleGroupItem>
        </ToggleGroup>
    </ComponentDemo>

    <ComponentDemo Title="Multiple Selection" Code="@_multipleCode">
        <ToggleGroup Type="ToggleGroup.ToggleGroupType.Multiple">
            <ToggleGroupItem Value="bold">
                <DynamicIcon Name="Bold" Class="h-4 w-4" />
            </ToggleGroupItem>
            <ToggleGroupItem Value="italic">
                <DynamicIcon Name="Italic" Class="h-4 w-4" />
            </ToggleGroupItem>
            <ToggleGroupItem Value="underline">
                <DynamicIcon Name="Underline" Class="h-4 w-4" />
            </ToggleGroupItem>
        </ToggleGroup>
    </ComponentDemo>

    <ComponentDemo Title="Outline Variant" Code="@_outlineCode">
        <ToggleGroup Type="ToggleGroup.ToggleGroupType.Single" Variant="ToggleGroup.ToggleGroupVariant.Outline">
            <ToggleGroupItem Value="left">
                <DynamicIcon Name="AlignLeft" Class="h-4 w-4" />
            </ToggleGroupItem>
            <ToggleGroupItem Value="center">
                <DynamicIcon Name="AlignCenter" Class="h-4 w-4" />
            </ToggleGroupItem>
            <ToggleGroupItem Value="right">
                <DynamicIcon Name="AlignRight" Class="h-4 w-4" />
            </ToggleGroupItem>
        </ToggleGroup>
    </ComponentDemo>

    <ComponentDemo Title="Sizes" Code="@_sizeCode">
        <Stack Gap="4">
            <ToggleGroup Type="ToggleGroup.ToggleGroupType.Single" Size="ToggleGroup.ToggleGroupSize.Sm">
                <ToggleGroupItem Value="bold">
                    <DynamicIcon Name="Bold" Class="h-3 w-3" />
                </ToggleGroupItem>
                <ToggleGroupItem Value="italic">
                    <DynamicIcon Name="Italic" Class="h-3 w-3" />
                </ToggleGroupItem>
                <ToggleGroupItem Value="underline">
                    <DynamicIcon Name="Underline" Class="h-3 w-3" />
                </ToggleGroupItem>
            </ToggleGroup>

            <ToggleGroup Type="ToggleGroup.ToggleGroupType.Single">
                <ToggleGroupItem Value="bold">
                    <DynamicIcon Name="Bold" Class="h-4 w-4" />
                </ToggleGroupItem>
                <ToggleGroupItem Value="italic">
                    <DynamicIcon Name="Italic" Class="h-4 w-4" />
                </ToggleGroupItem>
                <ToggleGroupItem Value="underline">
                    <DynamicIcon Name="Underline" Class="h-4 w-4" />
                </ToggleGroupItem>
            </ToggleGroup>

            <ToggleGroup Type="ToggleGroup.ToggleGroupType.Single" Size="ToggleGroup.ToggleGroupSize.Lg">
                <ToggleGroupItem Value="bold">
                    <DynamicIcon Name="Bold" Class="h-5 w-5" />
                </ToggleGroupItem>
                <ToggleGroupItem Value="italic">
                    <DynamicIcon Name="Italic" Class="h-5 w-5" />
                </ToggleGroupItem>
                <ToggleGroupItem Value="underline">
                    <DynamicIcon Name="Underline" Class="h-5 w-5" />
                </ToggleGroupItem>
            </ToggleGroup>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Disabled Items" Code="@_disabledCode">
        <ToggleGroup Type="ToggleGroup.ToggleGroupType.Multiple">
            <ToggleGroupItem Value="bold">
                <DynamicIcon Name="Bold" Class="h-4 w-4" />
            </ToggleGroupItem>
            <ToggleGroupItem Value="italic" Disabled="true">
                <DynamicIcon Name="Italic" Class="h-4 w-4" />
            </ToggleGroupItem>
            <ToggleGroupItem Value="underline">
                <DynamicIcon Name="Underline" Class="h-4 w-4" />
            </ToggleGroupItem>
        </ToggleGroup>
    </ComponentDemo>

    <ComponentDemo Title="Controlled (Bound Value)" Code="@_controlledCode">
        <Stack Gap="3">
            <ToggleGroup Type="ToggleGroup.ToggleGroupType.Single" @bind-Value="_format">
                <ToggleGroupItem Value="bold">
                    <DynamicIcon Name="Bold" Class="h-4 w-4" />
                </ToggleGroupItem>
                <ToggleGroupItem Value="italic">
                    <DynamicIcon Name="Italic" Class="h-4 w-4" />
                </ToggleGroupItem>
                <ToggleGroupItem Value="underline">
                    <DynamicIcon Name="Underline" Class="h-4 w-4" />
                </ToggleGroupItem>
            </ToggleGroup>
            <Text Size="Text.TextSize.Sm" Class="text-muted-foreground">Selected: @(_format ?? "none")</Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Variant — interactive preview" Code="@_interactiveVariantCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Switch Variant to see Default vs Outline styling applied to all items.</Lumeo.Text>
            <Segmented @bind-Value="_tgVariant">
                <SegmentedItem Value="Default">Default</SegmentedItem>
                <SegmentedItem Value="Outline">Outline</SegmentedItem>
            </Segmented>
            <ToggleGroup Type="ToggleGroup.ToggleGroupType.Single"
                         Variant="_tgVariantEnum">
                <ToggleGroupItem Value="left"><DynamicIcon Name="AlignLeft" Class="h-4 w-4" /></ToggleGroupItem>
                <ToggleGroupItem Value="center"><DynamicIcon Name="AlignCenter" Class="h-4 w-4" /></ToggleGroupItem>
                <ToggleGroupItem Value="right"><DynamicIcon Name="AlignRight" Class="h-4 w-4" /></ToggleGroupItem>
            </ToggleGroup>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Size — interactive preview" Code="@_interactiveSizeCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Switch Size to see Sm, Default, and Lg applied to the group.</Lumeo.Text>
            <Segmented @bind-Value="_tgSize">
                <SegmentedItem Value="Sm">Sm</SegmentedItem>
                <SegmentedItem Value="Default">Default</SegmentedItem>
                <SegmentedItem Value="Lg">Lg</SegmentedItem>
            </Segmented>
            <ToggleGroup Type="ToggleGroup.ToggleGroupType.Single"
                         Size="_tgSizeEnum">
                <ToggleGroupItem Value="bold"><DynamicIcon Name="Bold" Class="h-4 w-4" /></ToggleGroupItem>
                <ToggleGroupItem Value="italic"><DynamicIcon Name="Italic" Class="h-4 w-4" /></ToggleGroupItem>
                <ToggleGroupItem Value="underline"><DynamicIcon Name="Underline" Class="h-4 w-4" /></ToggleGroupItem>
            </ToggleGroup>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Type — interactive preview" Code="@_interactiveTypeCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Single allows only one active item; Multiple allows any number.</Lumeo.Text>
            <Segmented @bind-Value="_tgType">
                <SegmentedItem Value="Single">Single</SegmentedItem>
                <SegmentedItem Value="Multiple">Multiple</SegmentedItem>
            </Segmented>
            <ToggleGroup Type="_tgTypeEnum">
                <ToggleGroupItem Value="bold"><DynamicIcon Name="Bold" Class="h-4 w-4" /></ToggleGroupItem>
                <ToggleGroupItem Value="italic"><DynamicIcon Name="Italic" Class="h-4 w-4" /></ToggleGroupItem>
                <ToggleGroupItem Value="underline"><DynamicIcon Name="Underline" Class="h-4 w-4" /></ToggleGroupItem>
            </ToggleGroup>
            <Lumeo.Text Size="sm" Color="muted">Mode: @_tgType — try clicking multiple items</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="PressEffect — interactive preview" Description="Switch the press effect and then click the items to feel the difference." Code="@_interactivePressEffectCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Choose a PressEffect and click any item to feel the animation.</Lumeo.Text>
            <Segmented @bind-Value="_tgPressEffect">
                <SegmentedItem Value="None">None</SegmentedItem>
                <SegmentedItem Value="Scale">Scale</SegmentedItem>
                <SegmentedItem Value="Brightness">Brightness</SegmentedItem>
                <SegmentedItem Value="Ripple">Ripple</SegmentedItem>
            </Segmented>
            <ToggleGroup Type="ToggleGroup.ToggleGroupType.Multiple">
                <ToggleGroupItem Value="bold" PressEffect="_tgPressEffectEnum">
                    <DynamicIcon Name="Bold" Class="h-4 w-4" />
                </ToggleGroupItem>
                <ToggleGroupItem Value="italic" PressEffect="_tgPressEffectEnum">
                    <DynamicIcon Name="Italic" Class="h-4 w-4" />
                </ToggleGroupItem>
                <ToggleGroupItem Value="underline" PressEffect="_tgPressEffectEnum">
                    <DynamicIcon Name="Underline" Class="h-4 w-4" />
                </ToggleGroupItem>
                <ToggleGroupItem Value="strikethrough" PressEffect="_tgPressEffectEnum">
                    <DynamicIcon Name="Strikethrough" Class="h-4 w-4" />
                </ToggleGroupItem>
            </ToggleGroup>
            <Lumeo.Text Size="sm" Color="muted">Effect: @_tgPressEffect</Lumeo.Text>
        </Stack>
    </ComponentDemo>
</Stack>

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

    <Stack Gap="8">
        <Stack Gap="3">
            <Heading Level="3">ToggleGroup</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">Type</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">ToggleGroupType</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Single</td>
                            <td class="p-3 text-muted-foreground">Selection mode. Values: Single (only one item active), Multiple (any number of items active).</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">ToggleGroupVariant</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Default</td>
                            <td class="p-3 text-muted-foreground">Visual style applied to all items. Values: Default, Outline.</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">ToggleGroupSize</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Default</td>
                            <td class="p-3 text-muted-foreground">Size applied to all items. Values: Default, Sm, Lg.</td>
                        </tr>
                        <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">null</td>
                            <td class="p-3 text-muted-foreground">Selected value (Single mode). Supports @@bind-Value.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ValueChanged</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">Fires when selection changes in Single mode.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">SelectedValues</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">IEnumerable&lt;string&gt;?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Selected values (Multiple mode). Supports @@bind-SelectedValues.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">SelectedValuesChanged</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;IEnumerable&lt;string&gt;&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Fires when selection changes in Multiple mode.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack Gap="3">
            <Heading Level="3">ToggleGroupItem</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">Unique identifier for this item within the group. 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">When true, this specific item is non-interactive.</td>
                        </tr>
                                            <tr>
                            <td class="p-3 font-mono text-xs text-primary">PressEffect</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Button.ButtonPressEffect</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">None</td>
                            <td class="p-3 text-muted-foreground">Press feedback animation. Values: None, Scale, Brightness, Ripple.</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/toggle" class="text-primary hover:underline">Toggle</a> — A single two-state button; use ToggleGroup when you need several coordinated toggles.</li>
        <li><a href="/components/radio-group" class="text-primary hover:underline">RadioGroup</a> — Use for form-based single selection from a list of labelled options.</li>
        <li><a href="/components/segmented" class="text-primary hover:underline">Segmented</a> — A tab-like control for switching between views rather than toggling formatting.</li>
        <li><a href="/components/button" class="text-primary hover:underline">Button</a> — Use for one-shot actions; Toggle/ToggleGroup for persistent state.</li>
    </ul>
</div>

@code {
    private string? _format;
    private string _tgVariant = "Default";
    private string _tgSize = "Default";
    private string _tgType = "Single";
    private string _tgPressEffect = "None";

    private ToggleGroup.ToggleGroupVariant _tgVariantEnum =>
        Enum.TryParse<ToggleGroup.ToggleGroupVariant>(_tgVariant, out var v) ? v : ToggleGroup.ToggleGroupVariant.Default;
    private ToggleGroup.ToggleGroupSize _tgSizeEnum =>
        Enum.TryParse<ToggleGroup.ToggleGroupSize>(_tgSize, out var s) ? s : ToggleGroup.ToggleGroupSize.Default;
    private ToggleGroup.ToggleGroupType _tgTypeEnum =>
        Enum.TryParse<ToggleGroup.ToggleGroupType>(_tgType, out var t) ? t : ToggleGroup.ToggleGroupType.Single;
    private Button.ButtonPressEffect _tgPressEffectEnum =>
        Enum.TryParse<Button.ButtonPressEffect>(_tgPressEffect, out var p) ? p : Button.ButtonPressEffect.None;

    private string _interactiveVariantCode = @"<Segmented @bind-Value=""_variant"">
    <SegmentedItem Value=""Default"">Default</SegmentedItem>
    <SegmentedItem Value=""Outline"">Outline</SegmentedItem>
</Segmented>
<ToggleGroup Type=""ToggleGroup.ToggleGroupType.Single""
             Variant=""@Enum.Parse<ToggleGroup.ToggleGroupVariant>(_variant)"">
    <ToggleGroupItem Value=""left"">Left</ToggleGroupItem>
    <ToggleGroupItem Value=""center"">Center</ToggleGroupItem>
    <ToggleGroupItem Value=""right"">Right</ToggleGroupItem>
</ToggleGroup>

@code {
    private string _variant = ""Default"";
}";

    private string _interactiveSizeCode = @"<Segmented @bind-Value=""_size"">
    <SegmentedItem Value=""Sm"">Sm</SegmentedItem>
    <SegmentedItem Value=""Default"">Default</SegmentedItem>
    <SegmentedItem Value=""Lg"">Lg</SegmentedItem>
</Segmented>
<ToggleGroup Type=""ToggleGroup.ToggleGroupType.Single""
             Size=""@Enum.Parse<ToggleGroup.ToggleGroupSize>(_size)"">
    <ToggleGroupItem Value=""bold"">Bold</ToggleGroupItem>
    <ToggleGroupItem Value=""italic"">Italic</ToggleGroupItem>
    <ToggleGroupItem Value=""underline"">Underline</ToggleGroupItem>
</ToggleGroup>

@code {
    private string _size = ""Default"";
}";

    private string _interactiveTypeCode = @"<Segmented @bind-Value=""_type"">
    <SegmentedItem Value=""Single"">Single</SegmentedItem>
    <SegmentedItem Value=""Multiple"">Multiple</SegmentedItem>
</Segmented>
<ToggleGroup Type=""@Enum.Parse<ToggleGroup.ToggleGroupType>(_type)"">
    <ToggleGroupItem Value=""bold"">Bold</ToggleGroupItem>
    <ToggleGroupItem Value=""italic"">Italic</ToggleGroupItem>
    <ToggleGroupItem Value=""underline"">Underline</ToggleGroupItem>
</ToggleGroup>

@code {
    private string _type = ""Single"";
}";

    private string _controlledCode = @"<ToggleGroup Type=""ToggleGroup.ToggleGroupType.Single"" @bind-Value=""_format"">
    <ToggleGroupItem Value=""bold"">
        <Blazicon Svg=""Lucide.Bold"" class=""h-4 w-4"" />
    </ToggleGroupItem>
    <ToggleGroupItem Value=""italic"">
        <Blazicon Svg=""Lucide.Italic"" class=""h-4 w-4"" />
    </ToggleGroupItem>
    <ToggleGroupItem Value=""underline"">
        <Blazicon Svg=""Lucide.Underline"" class=""h-4 w-4"" />
    </ToggleGroupItem>
</ToggleGroup>
<Text>Selected: @(_format ?? ""none"")</Text>";

    private string _singleCode = @"<ToggleGroup Type=""ToggleGroup.ToggleGroupType.Single"">
    <ToggleGroupItem Value=""bold"">
        <Blazicon Svg=""Lucide.Bold"" class=""h-4 w-4"" />
    </ToggleGroupItem>
    <ToggleGroupItem Value=""italic"">
        <Blazicon Svg=""Lucide.Italic"" class=""h-4 w-4"" />
    </ToggleGroupItem>
    <ToggleGroupItem Value=""underline"">
        <Blazicon Svg=""Lucide.Underline"" class=""h-4 w-4"" />
    </ToggleGroupItem>
</ToggleGroup>";

    private string _multipleCode = @"<ToggleGroup Type=""ToggleGroup.ToggleGroupType.Multiple"">
    <ToggleGroupItem Value=""bold"">
        <Blazicon Svg=""Lucide.Bold"" class=""h-4 w-4"" />
    </ToggleGroupItem>
    <ToggleGroupItem Value=""italic"">
        <Blazicon Svg=""Lucide.Italic"" class=""h-4 w-4"" />
    </ToggleGroupItem>
    <ToggleGroupItem Value=""underline"">
        <Blazicon Svg=""Lucide.Underline"" class=""h-4 w-4"" />
    </ToggleGroupItem>
</ToggleGroup>";

    private string _outlineCode = @"<ToggleGroup Type=""ToggleGroup.ToggleGroupType.Single"" Variant=""ToggleGroup.ToggleGroupVariant.Outline"">
    <ToggleGroupItem Value=""left"">
        <Blazicon Svg=""Lucide.AlignLeft"" class=""h-4 w-4"" />
    </ToggleGroupItem>
    <ToggleGroupItem Value=""center"">
        <Blazicon Svg=""Lucide.AlignCenter"" class=""h-4 w-4"" />
    </ToggleGroupItem>
    <ToggleGroupItem Value=""right"">
        <Blazicon Svg=""Lucide.AlignRight"" class=""h-4 w-4"" />
    </ToggleGroupItem>
</ToggleGroup>";

    private string _sizeCode = @"<ToggleGroup Type=""ToggleGroup.ToggleGroupType.Single"" Size=""ToggleGroup.ToggleGroupSize.Sm"">
    ...
</ToggleGroup>

<ToggleGroup Type=""ToggleGroup.ToggleGroupType.Single"">
    ...
</ToggleGroup>

<ToggleGroup Type=""ToggleGroup.ToggleGroupType.Single"" Size=""ToggleGroup.ToggleGroupSize.Lg"">
    ...
</ToggleGroup>";

    private string _disabledCode = @"<ToggleGroup Type=""ToggleGroup.ToggleGroupType.Multiple"">
    <ToggleGroupItem Value=""bold"">
        <Blazicon Svg=""Lucide.Bold"" class=""h-4 w-4"" />
    </ToggleGroupItem>
    <ToggleGroupItem Value=""italic"" Disabled=""true"">
        <Blazicon Svg=""Lucide.Italic"" class=""h-4 w-4"" />
    </ToggleGroupItem>
    <ToggleGroupItem Value=""underline"">
        <Blazicon Svg=""Lucide.Underline"" class=""h-4 w-4"" />
    </ToggleGroupItem>
</ToggleGroup>";

    private string _interactivePressEffectCode = @"<Segmented @bind-Value=""_pressEffect"">
    <SegmentedItem Value=""None"">None</SegmentedItem>
    <SegmentedItem Value=""Scale"">Scale</SegmentedItem>
    <SegmentedItem Value=""Brightness"">Brightness</SegmentedItem>
    <SegmentedItem Value=""Ripple"">Ripple</SegmentedItem>
</Segmented>
<ToggleGroup Type=""ToggleGroup.ToggleGroupType.Multiple"">
    <ToggleGroupItem Value=""bold"" PressEffect=""@Enum.Parse<Button.ButtonPressEffect>(_pressEffect)"">
        <Blazicon Svg=""Lucide.Bold"" class=""h-4 w-4"" />
    </ToggleGroupItem>
    <ToggleGroupItem Value=""italic"" PressEffect=""@Enum.Parse<Button.ButtonPressEffect>(_pressEffect)"">
        <Blazicon Svg=""Lucide.Italic"" class=""h-4 w-4"" />
    </ToggleGroupItem>
    <ToggleGroupItem Value=""underline"" PressEffect=""@Enum.Parse<Button.ButtonPressEffect>(_pressEffect)"">
        <Blazicon Svg=""Lucide.Underline"" class=""h-4 w-4"" />
    </ToggleGroupItem>
    <ToggleGroupItem Value=""strikethrough"" PressEffect=""@Enum.Parse<Button.ButtonPressEffect>(_pressEffect)"">
        <Blazicon Svg=""Lucide.Strikethrough"" class=""h-4 w-4"" />
    </ToggleGroupItem>
</ToggleGroup>

@code {
    private string _pressEffect = ""None"";
}";
}
