### Install Code Syntax Highlighting Package

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/README.md

Install the optional NuGet package for code syntax highlighting capabilities.

```bash
# Optional: Code syntax highlighting
dotnet add package CodeBeam.MudBlazor.Extensions.Code
```

--------------------------------

### Install QR Code Package

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/README.md

Install the optional NuGet package for QR code and barcode generation functionality.

```bash
# Optional: QR codes and barcodes
dotnet add package CodeBeam.MudBlazor.Extensions.Qr
```

--------------------------------

### Install Main MudBlazor Extensions Package

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/configuration.md

Install the core MudBlazor Extensions NuGet package using the .NET CLI.

```bash
dotnet add package CodeBeam.MudBlazor.Extensions
```

--------------------------------

### Teleport Element Example

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/services.md

Example demonstrating how to use MudTeleportManager to move a div element to a target container.

```csharp
@inject MudTeleportManager TeleportManager

<div @ref="elementRef">Content to move</div>

<div class="target-location"></div>

@code {
    ElementReference elementRef;
    
    async Task MoveElement() {
        await TeleportManager.Teleport(elementRef, ".target-location");
    }
}
```

--------------------------------

### Install Optional MudBlazor Extensions Packages

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/configuration.md

Install optional packages for additional features like QR code support, syntax highlighting, and CSV mapping.

```bash
# For QR code and barcode support
dotnet add package CodeBeam.MudBlazor.Extensions.Qr

# For syntax highlighting (MudCodeViewer)
dotnet add package CodeBeam.MudBlazor.Extensions.Code

# For CSV import functionality
dotnet add package CodeBeam.MudBlazor.Extensions.CsvMapper
```

--------------------------------

### Install CSV Mapper Package

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/README.md

Install the optional NuGet package for CSV import and mapping features.

```bash
# Optional: CSV import
dotnet add package CodeBeam.MudBlazor.Extensions.CsvMapper
```

--------------------------------

### MudPopup Example

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/display-components.md

Demonstrates how to use the MudPopup component to display notifications. It shows how to bind the open state and customize content and actions.

```csharp
@page "/popup-demo"
@using MudExtensions

<MudButton Variant="Variant.Filled" 
           @onclick="() => open = true">
    Show Popup
</MudButton>

<MudPopup @bind-Open="open"
          PopupPosition="PopupPosition.Bottom"
          Icon="@Icons.Material.Filled.Info"
          Text="This is a notification popup"
          Color="Color.Info"
          Padding="16">
    <ActionContent>
        <MudButton Variant="Variant.Text" Size="Size.Small">Learn More</MudButton>
    </ActionContent>
</MudPopup>

@code {
    bool open;
}
```

--------------------------------

### MudAnimate Fade-in Example

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/animation-special-components.md

Demonstrates how to use the MudAnimate component to apply a fade-in animation to text. Includes a button to replay the animation.

```csharp
@page "/animate-demo"
@using MudExtensions

<MudAnimate Duration="1.5"
            Type="AnimationType.FadeIn"
            TimingFunction="AnimationTiming.EaseInOut"
            Iteration="1">
    <MudText Typo="Typo.h6">
        This text fades in smoothly
    </MudText>
</MudAnimate>

<MudButton Variant="Variant.Filled"
           @onclick="() => ReplayAnimation()">
    Replay Animation
</MudButton>

@code {
    void ReplayAnimation() {
        StateHasChanged();
    }
}
```

--------------------------------

### HTML Setup for MudBlazor Extensions

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/README.md

Include these links in your index.html or _Layout.cshtml to enable the MudBlazor Extensions CSS and JavaScript.

```html
<head>
    <link href="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.css" rel="stylesheet" />
</head>
<body>
    <script src="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.js"></script>
</body>
```

--------------------------------

### MudSignaturePad Example

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/animation-special-components.md

Demonstrates the MudSignaturePad component for capturing digital signatures. It includes configuration for dimensions, pen color, and size, along with buttons to clear the canvas and save the signature.

```csharp
@ref="signaturePad"
<MudSignaturePad @bind-ImageUrl="signatureUrl"
                 Width="500"
                 Height="250"
                 PenColor="#000000"
                 PenSize="3" />

<MudButton Variant="Variant.Filled"
           @onclick="() => signaturePad.ClearAsync()">
    Clear
</MudButton>

<MudButton Variant="Variant.Filled"
           Color="Color.Success"
           @onclick="SaveSignature">
    Save
</MudButton>

@code {
    MudSignaturePad signaturePad;
    string signatureUrl;
    
    async Task SaveSignature() {
        var imageData = await signaturePad.GetImageAsync();
        // Save imageData to database
    }
}
```

--------------------------------

### MudRangeSlider Example

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/input-components.md

Demonstrates a range slider for selecting a price range with custom step, min distance, and value display.

```csharp
@page "/range-slider-demo"
@using MudExtensions

<MudRangeSlider @bind-Value="minPrice" 
                @bind-UpperValue="maxPrice"
                Min="0" 
                Max="1000"
                MinDistance="10"
                Step="5"
                Display="true"
                ValueLabel="true"
                Color="Color.Primary">
    Price Range: $@minPrice - $@maxPrice
</MudRangeSlider>

@code {
    decimal minPrice = 100;
    decimal maxPrice = 500;
}
```

--------------------------------

### MudPage Layout Example

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/extended-utility-components.md

Demonstrates how to use MudPage to structure a page with a title, header, content, and footer. Ensure the ShowHeader and ShowFooter parameters are set appropriately for your layout.

```csharp
<MudPage Title="Dashboard" ShowHeader="true">
    <HeaderContent>
        <MudText Typo="Typo.h5">Welcome to Dashboard</MudText>
    </HeaderContent>
    
    <MudText>Page content goes here</MudText>
    
    <FooterContent>
        <MudText Typo="Typo.caption">© 2024 Company</MudText>
    </FooterContent>
</MudPage>
```

--------------------------------

### MudCodeInput Example

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/input-components.md

Illustrates a code input field with syntax highlighting for C# code, featuring a specified number of lines.

```csharp
<MudCodeInput @bind-Value="code" 
              Language="CodeLanguage.CSharp" 
              Label="C# Code"
              Lines="10" />

@code {
    string code = "var x = 10;";
}
```

--------------------------------

### MudSpeedDial Example

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/display-components.md

Shows how to implement a MudSpeedDial component for a floating action button with an expandable menu. Includes configuration for icon, position, and hover/click behavior.

```csharp
@ref="speedDial"
<MudSpeedDial Icon="@Icons.Material.Filled.Add"
              IconOnOpen="@Icons.Material.Filled.Close"
              Direction="Direction.Up"
              Origin="Origin.BottomRight"
              OpenOnHover="true">
    <MudSpeedDialAction Icon="@Icons.Material.Filled.Edit" />
    <MudSpeedDialAction Icon="@Icons.Material.Filled.Delete" Color="Color.Error" />
    <MudSpeedDialAction Icon="@Icons.Material.Filled.Share" Color="Color.Info" />
</MudSpeedDial>

@code {
    MudSpeedDial speedDial;
    
    void PerformAction() {
        speedDial.CloseMenu();
    }
}
```

--------------------------------

### Get CSS Property Example

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/services.md

Example of retrieving the 'color' CSS property value for elements with the class 'my-class'.

```csharp
var color = await CssManager.GetCss("my-class", "color");
```

--------------------------------

### MudTextFieldExtended Example

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/input-components.md

Demonstrates an extended text field with debouncing, a search icon, and placeholder text.

```csharp
<MudTextFieldExtended @bind-Value="searchText" 
                      Label="Search"
                      DebounceInterval="500"
                      Placeholder="Type to search..."
                      Variant="Variant.Outlined"
                      Adornment="Adornment.Start"
                      AdornmentIcon="@Icons.Material.Filled.Search" />

@code {
    string searchText = "";
}
```

--------------------------------

### Install MudExtensions CSS

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/README.md

Add the MudExtensions CSS to your HTML head section. This is required for the library's styling.

```html
<link href="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.css" rel="stylesheet" />


<link href="_content/CodeBeam.MudBlazor.Extensions.Code/prism/prism.min.css" rel="stylesheet" />
```

--------------------------------

### Scroll to Middle Async Example

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/services.md

Example demonstrating how to use ScrollToMiddleAsync to center a child element within a scrollable container.

```csharp
await ScrollManager.ScrollToMiddleAsync("scroll-container", "selected-item");
```

--------------------------------

### Register Individual MudExtensions Services

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/configuration.md

Register specific MudExtensions services individually if you do not need the full suite. This example shows registration for scroll utilities, CSS management, and DOM teleportation.

```csharp
builder.Services.AddScrollManagerExtended();    // Scroll utilities
builder.Services.AddMudCssManager();             // CSS management
builder.Services.AddMudTeleportManager();        // DOM teleport
```

--------------------------------

### Install MudExtensions JavaScript

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/README.md

Add the MudExtensions JavaScript to your HTML body section. This is required for the library's functionality.

```html
<script src="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.js"></script>


<script src="_content/CodeBeam.MudBlazor.Extensions.Code/prism/prism.min.js"></script>
```

--------------------------------

### MudPasswordField Example

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/input-components.md

Shows a password input field with a visibility toggle, suitable for secure entry.

```csharp
<MudPasswordField @bind-Value="password" 
                  Label="Password"
                  Variant="Variant.Outlined"
                  Margin="Margin.Normal"
                  HelperText="Enter your password" />

@code {
    string password = "";
}
```

--------------------------------

### MudComboBox Example

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/input-components.md

Demonstrates how to use the MudComboBox component for selecting an item from a list with search functionality. It binds to a string property and uses a list of strings as items. The component includes a label, placeholder, and enables searching.

```csharp
<MudComboBox T="string"
             @bind-SelectedValue="selectedCountry"
             Items="countries"
             Label="Select Country"
             Searchable="true"
             Placeholder="Type to filter..." />

@code {
    string selectedCountry;
    List<string> countries = new() { "USA", "UK", "Canada", "Australia" };
}
```

--------------------------------

### MudDateTimePicker Usage Example

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/picker-select-components.md

Shows how to implement the MudDateTimePicker component for selecting a specific date and time. It includes setting a label, minimum selectable date, and a custom format for displaying the selected date and time.

```csharp
<MudDateTimePicker @bind-Value="appointmentTime"
                   Label="Select Appointment Time"
                   MinDate="DateTime.Now"
                   Format="MM/dd/yyyy HH:mm tt" />

@code {
    DateTime? appointmentTime;
}
```

--------------------------------

### MudSection Collapsible Content Example

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/extended-utility-components.md

Shows how to use MudSection to create collapsible content areas. The Collapsible parameter controls whether the section can be expanded or collapsed by the user.

```csharp
<MudSection Title="Advanced Settings" Collapsible="true">
    <MudSwitch @bind-Checked="enableNotifications" Label="Enable Notifications" />
    <MudSwitch @bind-Checked="enableLogging" Label="Enable Logging" />
</MudSection>
```

--------------------------------

### Set CSS Property Example

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/services.md

Example of using MudCssManager to set the color CSS property for elements with the class 'my-class' to red.

```csharp
@inject MudCssManager CssManager

await CssManager.SetCss("my-class", CssProp.Color, "#FF0000");
```

--------------------------------

### MudTextM3 Material Design 3 Typography Example

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/extended-utility-components.md

Demonstrates applying Material Design 3 typography styles using MudTextM3. The 'Typo' parameter accepts values from the TypoM3 enum to control text appearance.

```csharp
<MudTextM3 Typo="TypoM3.HeadlineLarge">Large Headline</MudTextM3>
<MudTextM3 Typo="TypoM3.BodyMedium">Regular body text</MudTextM3>
<MudTextM3 Typo="TypoM3.LabelSmall">Small label</MudTextM3>
```

--------------------------------

### MudInputStyler with MudTextField

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/picker-select-components.md

Example of using MudInputStyler to customize the appearance of a MudTextField, including border color, radius, and background color.

```csharp
<MudInputStyler BorderColor="#FF0000"
                BorderRadius="8"
                BackgroundColor="#F5F5F5">
    <MudTextField @bind-Value="text"
                  Label="Styled Input" />
</MudInputStyler>

@code {
    string text = "";
}
```

--------------------------------

### MudDateWheelPicker Usage Example

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/picker-select-components.md

Demonstrates how to use the MudDateWheelPicker component with custom date format, label, and date constraints. The selected date is bound to a DateTime variable and displayed below the picker.

```csharp
@page "/date-wheel-demo"
@using MudExtensions 

<MudDateWheelPicker @bind-Value="selectedDate"
                    DateFormat="MM/dd/yyyy"
                    Label="Select Date"
                    MinDate="DateTime.Now.AddYears(-10)"
                    MaxDate="DateTime.Now"
                    SubmitOnClose="true" />

<MudText Class="mt-4">Selected: @selectedDate?.ToString("MMM dd, yyyy")</MudText>

@code {
    DateTime? selectedDate = DateTime.Now;
}
```

--------------------------------

### IndexOutOfRangeException Example in C#

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/errors.md

Illustrates the BarcodeResult indexer which can throw an IndexOutOfRangeException if accessed with coordinates outside the valid range of the bitMatrix.

```csharp
public class BarcodeResult
{
    public bool this[int x, int y] => bitMatrix[x, y];  
    // Throws IndexOutOfRangeException if x >= Columns or y >= Rows
}
```

--------------------------------

### MudChipField Basic Usage

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/input-components.md

Example of a basic MudChipField component configured for tag management with space as a delimiter and various styling options.

```csharp
@page "/chip-field-demo"
@using MudExtensions

<MudChipField @bind-Values="tags"
              Delimiter=" "
              ChipColor="Color.Primary"
              ChipVariant="Variant.Filled"
              WrapChips="true"
              BackspaceChipRemoval="true"
              MaxChips="10"
              Label="Add tags (space to create)" />

<MudText Class="mt-4">Tags: @string.Join(", ", tags ?? new())
</MudText>

@code {
    List<string> tags = new();
}
```

--------------------------------

### MudTeleport Content Rendering Example

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/extended-utility-components.md

Illustrates using MudTeleport to render content in a different part of the DOM. Define a target element with a specific ID and use the 'To' parameter to specify that ID.

```html
<!-- Define teleport target -->
<div id="modal-root"></div>

<!-- Teleport content to target -->
<MudTeleport To="#modal-root">
    <div class="modal">
        <p>This renders in #modal-root</p>
    </div>
</MudTeleport>
```

--------------------------------

### MudWatch for Value Changes

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/animation-special-components.md

Illustrates the MudWatch component, which monitors a specified value for changes. This example uses deep watching and includes a debounce delay before triggering a callback to handle the changes.

```csharp
<MudWatch Value="userData"
          Mode="WatchMode.Deep"
          OnChanged="OnUserDataChanged"
          Debounce="300" />

@code {
    Dictionary<string, object> userData = new();
    
    async Task OnUserDataChanged(object changedValue) {
        // React to user data changes
        await SaveUserData();
    }
}
```

--------------------------------

### MudCodeViewer with Syntax Highlighting

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/animation-special-components.md

Example of using MudCodeViewer to display a C# code snippet with line numbers, header, and a copy button. The code snippet is defined within the component's @code block.

```csharp
@page "/code-viewer-demo"
@using MudExtensions

<MudCodeViewer Code="codeSnippet"
               Language="CodeLanguage.CSharp"
               ShowLineNumbers="true"
               ShowHeader="true"
               Copyable="true"
               MaxHeight="400" />

@code {
    string codeSnippet = @"
public class Example
{
    public void HelloWorld()
    {
        Console.WriteLine(\"Hello, World!\");
    }
}
";
}
```

--------------------------------

### Development Build Configuration - launchSettings.json

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/configuration.md

Configures development server settings, including enabling .NET run messages and specifying the environment. This file is used for debugging and local development.

```json
{
  "profiles": {
    "https": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "applicationUrl": "https://localhost:7001;http://localhost:5001",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}
```

--------------------------------

### Configure MudExtensions for Blazor Server

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/configuration.md

Sets up MudExtensions services for a Blazor Server application. This is typically done in the Program.cs file.

```csharp
var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorComponents();
builder.Services.AddMudServices();
builder.Services.AddMudExtensions();

var app = builder.Build();
app.Run();
```

--------------------------------

### MudWheel Basic Usage

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/display-components.md

Demonstrates how to use the MudWheel component to display and select items from a list. Ensure the 'MudExtensions' namespace is imported.

```csharp
<MudWheel T="string"
          Items="colors"
          @bind-SelectedItem="selectedColor">
    <ItemTemplate>
        <div class="wheel-item">@context</div>
    </ItemTemplate>
</MudWheel>

@code {
    string selectedColor = "Red";
    List<string> colors = new() { "Red", "Blue", "Green", "Yellow" };
}
```

--------------------------------

### Configure MudExtensions for Blazor WebAssembly

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/configuration.md

Sets up MudExtensions services for a Blazor WebAssembly application. This is typically done in the Program.cs file.

```csharp
var builder = WebAssemblyHostBuilder.CreateDefault(args);

builder.RootComponents.Add<App>("#app");
builder.Services.AddMudServices();
builder.Services.AddMudExtensions();

await builder.Build().RunAsync();
```

--------------------------------

### Using Open Iconic with Foundation Classes

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/tests/CodeBeam.MudBlazor.Extensions.UnitTests.Viewer/wwwroot/css/open-iconic/README.md

Apply Foundation-compatible icon classes to span elements for displaying icons.

```html
<span class="fi-icon-name" title="icon name" aria-hidden="true"></span>
```

--------------------------------

### MudGallery Component

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/display-components.md

Illustrates the MudGallery component for displaying a collection of images with thumbnail navigation and lightbox features. Requires 'using MudExtensions;'.

```csharp
<MudGallery Items="imageUrls"
            ShowThumbnails="true"
            ThumbnailHeight="80"
            AllowFullscreen="true" />

@code {
    List<string> imageUrls = new() {
        "https://example.com/image1.jpg",
        "https://example.com/image2.jpg",
        "https://example.com/image3.jpg"
    };
}
```

--------------------------------

### Service Registration for MudBlazor Extensions

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/README.md

Register the necessary services for MudBlazor and MudBlazor Extensions in your Program.cs file.

```csharp
using MudExtensions.Services;

builder.Services.AddMudServices();
builder.Services.AddMudExtensions();
```

--------------------------------

### Get CSS Property (Enum)

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/services.md

Retrieves the value of a CSS property for elements matching a class name using a CssProp enum. Returns the value or null if not found.

```csharp
Task<string?> GetCss(string? className, CssProp cssProp)
```

--------------------------------

### Register MudExtensions Services

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/README.md

Register the MudExtensions services in your Program.cs file. This is necessary to enable the library's features.

```csharp
using MudExtensions.Services;
builder.Services.AddMudExtensions();
```

--------------------------------

### MudLoading Component

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/display-components.md

Demonstrates the basic usage of the MudLoading component to display a loading state with a circle loader.

```csharp
<MudLoading Loading="isLoading" 
            LoaderType="LoaderType.Circle"
            Color="Color.Primary"
            FullScreen="false">
    <MudText>Your content here</MudText>
</MudLoading>

@code {
    bool isLoading = true;
}
```

--------------------------------

### Get CSS Property (String)

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/services.md

Retrieves the value of a CSS property for elements matching a class name using a string for the property name. Returns the value or null if not found.

```csharp
Task<string?> GetCss(string? className, string? cssPropName)
```

--------------------------------

### Handle MudSignaturePad Initialization and Image Saving

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/errors.md

Wait for OnAfterRenderAsync before interacting with the MudSignaturePad canvas. Ensure the canvas is not empty before calling GetImageAsync and use correct color formats for PenColor/BackgroundColor.

```csharp
protected override async Task OnAfterRenderAsync(bool firstRender) {
    if (firstRender) {
        // Canvas is now initialized
        await Task.Delay(100);  // Ensure DOM is ready
    }
}

async Task SaveSignature() {
    try {
        var imageData = await signaturePad.GetImageAsync();
        if (string.IsNullOrEmpty(imageData)) {
            throw new InvalidOperationException("Signature is empty");
        }
        // Save imageData
    }
    catch (Exception ex) {
        Snackbar.Add($"Error: {ex.Message}", Severity.Error);
    }
}
```

--------------------------------

### Production Deployment - Minified CSS

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/configuration.md

Links the minified CSS file for production use. Ensure this path is correct in your application's index.html or _Layout.cshtml.

```html
<!-- Production CSS (minified) -->
<link href="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.css" 
      rel="stylesheet" />
```

--------------------------------

### Multi-Selection with Search and Select All

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/picker-select-components.md

Demonstrates a multi-select dropdown with search functionality and a 'select all' option. Use when users need to select multiple tags from a predefined list.

```csharp
<MudSelectExtended T="string"
                   @bind-SelectedValues="selectedTags"
                   Items="availableTags"
                   MultiSelection="true"
                   Searchable="true"
                   Label="Select Tags"
                   ShowSelectAll="true">
    <ItemTemplate>@context</ItemTemplate>
</MudSelectExtended>

@code {
    HashSet<string> selectedTags = new();
    List<string> availableTags = new() { "Important", "Urgent", "Low Priority" };
}
```

--------------------------------

### MudSplitter Component

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/display-components.md

Demonstrates the MudSplitter component for creating resizable split panes in a layout. Requires 'using MudExtensions;'.

```csharp
<MudSplitter Vertical="true">
    <Content1>
        <div class="pa-4">
            <MudText>Left Pane</MudText>
        </div>
    </Content1>
    <Content2>
        <div class="pa-4">
            <MudText>Right Pane</MudText>
        </div>
    </Content2>
</MudSplitter>
```

--------------------------------

### Build (string list overload)

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/types.md

Generates CSS keyframes for single property animation using a list of string values.

```APIDOC
## Build (string list overload)

### Description
Generates CSS keyframes for single property animation.

### Method Signature
```csharp
public static string Build(int ticks, List<string> values, string property, string defaultValue = "")
```

### Parameters
#### Path Parameters
- **ticks** (int) - Required - Number of keyframe steps
- **values** (List<string>) - Required - Property values for each tick
- **property** (string) - Required - CSS property with `-val-` placeholder
- **defaultValue** (string) - Optional - Default value if not specified

### Returns
string - CSS keyframe declaration

### Example
```csharp
var keyframes = KeyframeBuilder.Build(
    ticks: 3,
    values: new List<string> { "0px", "50px", "0px" },
    property: "transform: translateX(-val-)"
);
// Result: "0%{ transform: translateX(0px) }50%{ transform: translateX(50px) }100%{ transform: translateX(0px) }"
```
```

--------------------------------

### MudListExtended Basic Usage

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/extended-utility-components.md

Demonstrates basic usage of MudListExtended with single item selection. Ensure 'using MudExtensions;' is present.

```razor
<MudListExtended T="string"
                 Items="items"
                 @bind-SelectedItem="selectedItem"
                 MultiSelection="false">
    <ItemTemplate>
        <MudListItem>@context</MudListItem>
    </ItemTemplate>
</MudListExtended>

@code {
    List<string> items = new() { "Item 1", "Item 2", "Item 3" };
    string selectedItem;
}
```

--------------------------------

### SignaturePadOptions Class

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/types.md

Defines configuration options for customizing the behavior and appearance of the signature pad component.

```csharp
public class SignaturePadOptions
{
    public float DotSize { get; set; }
    public float MinWidth { get; set; }
    public float MaxWidth { get; set; }
    public float Throttle { get; set; }
    public float Velocity { get; set; }
    public float Acceleration { get; set; }
}
```

--------------------------------

### Production Deployment - Minified JavaScript

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/configuration.md

Includes the minified JavaScript file for production use. Ensure this path is correct in your application's index.html or _Layout.cshtml.

```html
<!-- Production JavaScript (minified) -->
<script src="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.js"></script>
```

--------------------------------

### MudBarcode QR Code Generation

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/animation-special-components.md

Shows how to generate a QR code for a given URL using the MudBarcode component. Includes a text label below the QR code.

```csharp
<MudBarcode Value="https://example.com/product/12345"
            Format="BarcodeFormat.QRCode"
            Width="300"
            Height="300" />

<MudText Class="mt-2">Scan to visit product page</MudText>
```

--------------------------------

### Including Open Iconic with Foundation

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/tests/CodeBeam.MudBlazor.Extensions.UnitTests.Viewer/wwwroot/css/open-iconic/README.md

Link the Foundation-specific stylesheet to use Open Iconic with Foundation classes.

```html
<link href="/open-iconic/font/css/open-iconic-foundation.css" rel="stylesheet">
```

--------------------------------

### Build (tuple list overload)

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/types.md

Generates CSS keyframes for two-property animation using a list of tuples.

```APIDOC
## Build (tuple list overload)

### Description
Generates CSS keyframes for two-property animation.

### Method Signature
```csharp
public static string Build(int ticks, List<Tuple<string, string>> values, string property, string defaultValue = "")
```

### Parameters
#### Path Parameters
- **ticks** (int) - Required - Number of keyframe steps
- **values** (List<Tuple<string, string>>) - Required - Pairs of property values for each tick
- **property** (string) - Required - CSS property with `-val1-` and `-val2-` placeholders
- **defaultValue** (string) - Optional - Default value if not specified

### Returns
string - CSS keyframe declaration
```

--------------------------------

### Move Element with MudTeleportManager

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/configuration.md

Demonstrates how to use MudTeleportManager to move an HTML element to a specified portal root. Ensure MudTeleportManager is injected and the target element exists.

```csharp
@inject MudTeleportManager TeleportManager

<div @ref="elementRef">Content</div>
<div id="portal-root"></div>

@code {
    ElementReference elementRef;
    
    async Task MoveElement() {
        await TeleportManager.Teleport(elementRef, "#portal-root");
    }
}
```

--------------------------------

### MudGallery

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/display-components.md

Image gallery component with lightbox and thumbnail navigation. Supports fullscreen and zoom functionalities.

```APIDOC
## MudGallery

### Description
Image gallery component with lightbox and thumbnail navigation. Supports fullscreen and zoom functionalities.

### Parameters

| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| Items | List<string> | null | List of image URLs |
| SelectedIndex | int | 0 | Currently displayed image index |
| ShowThumbnails | bool | true | If true, displays thumbnail strip |
| ThumbnailHeight | int | 60 | Thumbnail height in pixels |
| AllowFullscreen | bool | true | If true, enables fullscreen mode |
| AllowZoom | bool | true | If true, enables image zoom |
| Class | string | null | CSS classes |
| Style | string | null | Inline CSS styles |

### Example Usage

```csharp
<MudGallery Items="imageUrls"
            ShowThumbnails="true"
            ThumbnailHeight="80"
            AllowFullscreen="true" />

@code {
    List<string> imageUrls = new() {
        "https://example.com/image1.jpg",
        "https://example.com/image2.jpg",
        "https://example.com/image3.jpg"
    };
}
```
```

--------------------------------

### Font Selection with Preview

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/picker-select-components.md

A font picker component that allows users to select a font and see a live preview. Ideal for text styling options.

```csharp
<MudFontPicker @bind-SelectedFont="selectedFont"
               ShowPreview="true"
               PreviewText="Sample Text"
               Label="Choose Font" />

<div style="font-family: @selectedFont;">
    This text uses the selected font
</div>

@code {
    string selectedFont = "Arial";
}
```

--------------------------------

### Development Build Configuration - .csproj for SASS Compilation

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/configuration.md

Includes the MudBlazor.SassCompiler package for development builds, enabling SCSS file compilation. This is conditionally applied for Debug configurations.

```xml
<ItemGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
    <PackageReference Include="MudBlazor.SassCompiler" Version="..." />
</ItemGroup>
```

--------------------------------

### MudLoadingButton with Progress Indicator

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/README.md

Create a loading button that displays a progress indicator and text while an asynchronous operation is in progress.

```razor
<MudLoadingButton Loading="isLoading" @onclick="HandleClick">
    @if (isLoading) {
        <MudProgressCircular Size="Size.Small" Indeterminate="true" />
        <MudText Class="ms-2">Processing...</MudText>
    } else {
        <MudText>Click Me</MudText>
    }
</MudLoadingButton>
```

--------------------------------

### Include MudExtensions CSS Files

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/configuration.md

Add the main MudExtensions CSS and the optional MudCodeViewer CSS to your HTML head section.

```html
<!-- Main MudExtensions styles -->
<link href="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.css" 
      rel="stylesheet" />

<!-- For MudCodeViewer component (requires Code package) -->
<link href="_content/CodeBeam.MudBlazor.Extensions.Code/prism/prism.min.css" 
      rel="stylesheet" />
```

--------------------------------

### MudLoadingButton Component

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/display-components.md

Shows how to use MudLoadingButton to display a loading spinner within a button when an action is in progress. Requires 'using MudExtensions;'.

```csharp
<MudLoadingButton Loading="isLoading"
                  Variant="Variant.Filled"
                  Color="Color.Primary"
                  @onclick="HandleClick">
    @if (isLoading)
    {
        <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
        <MudText Class="ms-2">Saving...</MudText>
    }
    else
    {
        <MudText>Save</MudText>
    }
</MudLoadingButton>

@code {
    bool isLoading;
    
    async Task HandleClick() {
        isLoading = true;
        await Task.Delay(2000);
        isLoading = false;
    }
}
```

--------------------------------

### MudToggle with Labels

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/animation-special-components.md

Shows how to use the MudToggle component to create a custom switch with distinct labels for its checked and unchecked states. It also displays the current state using MudText.

```csharp
<MudToggle @bind-Checked="isDarkMode"
           CheckedLabel="Dark Mode"
           UncheckedLabel="Light Mode"
           Color="Color.Primary" />

<MudText Class="mt-2">
    Current mode: @(isDarkMode ? "Dark" : "Light")
</MudText>

@code {
    bool isDarkMode;
}
```

--------------------------------

### Register MudBlazor Extensions Services

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/errors.md

Ensure MudBlazor and MudExtensions services are registered in the DI container. This is typically done in Program.cs.

```csharp
builder.Services.AddMudServices();
builder.Services.AddMudExtensions();  // Registers all services
```

--------------------------------

### Using Open Iconic Standalone Classes

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/tests/CodeBeam.MudBlazor.Extensions.UnitTests.Viewer/wwwroot/css/open-iconic/README.md

Apply default Open Iconic classes to span elements for displaying icons when not using a framework.

```html
<span class="oi" data-glyph="icon-name" title="icon name" aria-hidden="true"></span>
```

--------------------------------

### Include MudBlazor Extensions CSS and JS

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/errors.md

Load the MudExtensions CSS and JavaScript files in the correct order in your HTML. This ensures that JavaScript interop functions are available.

```html
<link href="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.css" 
      rel="stylesheet" />

<script src="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.js"></script>
```

--------------------------------

### MudTypographyProvider

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/extended-utility-components.md

A utility component for applying the Material Design 3 typography system across child components.

```APIDOC
## MudTypographyProvider

### Description
Utility for applying Material Design 3 typography system.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **FontFamily** (string) - null - Base font family
- **ChildContent** (RenderFragment) - null - Child components
```

--------------------------------

### Including Open Iconic Standalone

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/tests/CodeBeam.MudBlazor.Extensions.UnitTests.Viewer/wwwroot/css/open-iconic/README.md

Link the default stylesheet for standalone use of Open Iconic icon font.

```html
<link href="/open-iconic/font/css/open-iconic.css" rel="stylesheet">
```

--------------------------------

### MudRangeSlider Constraint Logic in C#

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/errors.md

Demonstrates the internal constraint logic for MudRangeSlider, showing how values are auto-corrected or clamped to adhere to MinDistance, Min, and Max constraints.

```csharp
// In MudRangeSlider logic
if (value + minDistance >= upperValue) {
    value = upperValue - minDistance;  // Auto-correct
}

if (value < slideableMin) {
    value = slideableMin.Value;  // Clamp to constraint
}
```

--------------------------------

### MudLoadingButton

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/display-components.md

Button that displays loading state with spinner. Allows customization of variant, color, size, and click handling.

```APIDOC
## MudLoadingButton

### Description
Button that displays loading state with spinner. Allows customization of variant, color, size, and click handling.

### Parameters

| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| Loading | bool | false | If true, shows loading spinner |
| Disabled | bool | false | If true, button is disabled |
| OnClick | EventCallback | — | Button click handler |
| Variant | Variant | Filled | Button variant (Filled, Outlined, Text) |
| Color | Color | Primary | Button color |
| Size | Size | Medium | Button size (Small, Medium, Large) |
| FullWidth | bool | false | If true, button spans full width |
| Class | string | null | CSS classes |
| ChildContent | RenderFragment | null | Button text/content |

### Example Usage

```csharp
<MudLoadingButton Loading="isLoading"
                  Variant="Variant.Filled"
                  Color="Color.Primary"
                  @onclick="HandleClick">
    @if (isLoading)
    {
        <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
        <MudText Class="ms-2">Saving...</MudText>
    }
    else
    {
        <MudText>Save</MudText>
    }
</MudLoadingButton>

@code {
    bool isLoading;
    
    async Task HandleClick() {
        isLoading = true;
        await Task.Delay(2000);
        isLoading = false;
    }
}
```
```

--------------------------------

### Using Open Iconic with Bootstrap Classes

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/tests/CodeBeam.MudBlazor.Extensions.UnitTests.Viewer/wwwroot/css/open-iconic/README.md

Apply Bootstrap-compatible icon classes to span elements for displaying icons.

```html
<span class="oi oi-icon-name" title="icon name" aria-hidden="true"></span>
```

--------------------------------

### MudScrollbar Component

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/display-components.md

Shows how to apply a custom MudScrollbar to a scrollable container. Requires 'using MudExtensions;'.

```csharp
<MudScrollbar Horizontal="false" Color="Color.Primary">
    <div style="height: 300px; overflow-y: auto;">
        <!-- Content here -->
    </div>
</MudScrollbar>
```

--------------------------------

### MudColorProvider

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/extended-utility-components.md

A utility component for managing the application's color theme, allowing selection and customization of colors.

```APIDOC
## MudColorProvider

### Description
Utility for managing application color theme.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **SelectedColor** (string) - null - Current color (hex)
- **SelectedColorChanged** (EventCallback<string>) - — - Fires when color changes
- **AllowCustom** (bool) - true - If true, allows custom color input
- **Columns** (int) - 6 - Grid columns for color palette
- **Class** (string) - null - CSS classes
```

--------------------------------

### Build CSS Keyframes (String List Overload)

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/types.md

Generates CSS keyframes for single property animations using a list of string values. Use this when animating a single CSS property.

```csharp
public static string Build(int ticks, List<string> values, string property, string defaultValue = "")
```

```csharp
var keyframes = KeyframeBuilder.Build(
    ticks: 3,
    values: new List<string> { "0px", "50px", "0px" },
    property: "transform: translateX(-val-)"
);
// Result: "0%{ transform: translateX(0px) }50%{ transform: translateX(50px) }100%{ transform: translateX(0px) }"
```

--------------------------------

### Include MudExtensions JavaScript Files

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/configuration.md

Add the main MudExtensions JavaScript and the optional MudCodeViewer JavaScript to the end of your HTML body section.

```html
<!-- Main MudExtensions JavaScript -->
<script src="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.js"></script>

<!-- For MudCodeViewer component (requires Code package) -->
<script src="_content/CodeBeam.MudBlazor.Extensions.Code/prism/prism.min.js"></script>
```

--------------------------------

### Including Open Iconic with Bootstrap

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/tests/CodeBeam.MudBlazor.Extensions.UnitTests.Viewer/wwwroot/css/open-iconic/README.md

Link the Bootstrap-specific stylesheet to use Open Iconic with Bootstrap classes.

```html
<link href="/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
```

--------------------------------

### MudStepperExtended Basic Usage

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/extended-utility-components.md

Illustrates a basic multi-step form using MudStepperExtended with navigation buttons. Ensure 'using MudExtensions;' is present.

```razor
@ref="stepper"
<MudStepperExtended @bind-ActiveStep="currentStep"
                    Linear="true"
                    AllowStepSelection="true">
    <MudStepExtended>
        <Title>Step 1: Personal Info</Title>
        <Content>
            <MudTextField @bind-Value="name" Label="Name" />
        </Content>
    </MudStepExtended>
    
    <MudStepExtended>
        <Title>Step 2: Address</Title>
        <Content>
            <MudTextField @bind-Value="address" Label="Address" />
        </Content>
    </MudStepExtended>
    
    <MudStepExtended>
        <Title>Step 3: Review</Title>
        <Content>
            <MudText>Review your information</MudText>
        </Content>
    </MudStepExtended>
</MudStepperExtended>

<MudButton @onclick="() => stepper.PreviousStepAsync()">Back</MudButton>
<MudButton @onclick="() => stepper.NextStepAsync()">Next</MudButton>

@code {
    MudStepperExtended stepper;
    int currentStep;
    string name;
    string address;
}
```

--------------------------------

### Build CSS Keyframes (Tuple List Overload)

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/types.md

Generates CSS keyframes for two-property animations using a list of tuples. Use this when animating two related CSS properties simultaneously.

```csharp
public static string Build(int ticks, List<Tuple<string, string>> values, string property, string defaultValue = "")
```

--------------------------------

### Update CSS Link Path

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/BreakingChanges.md

The path for the MudBlazor.Extensions CSS file has been updated. Replace the old link with the new one provided.

```html
<link href="_content/CodeBeam.MudBlazor.Extensions/MudBlazor.Extensions.min.css" rel="stylesheet" />
```

--------------------------------

### MudTextM3

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/extended-utility-components.md

Implements Material Design 3 typography styles for text elements.

```APIDOC
## MudTextM3

### Description
Material Design 3 typography component.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **Typo** (TypoM3) - BodyMedium - Typography style
- **Color** (Color) - Inherit - Text color
- **Align** (Align) - Left - Text alignment
- **ChildContent** (RenderFragment) - null - Text content
- **Class** (string) - null - CSS classes

### TypoM3 Values
```csharp
public enum TypoM3
{
    DisplayLarge,
    DisplayMedium,
    DisplaySmall,
    HeadlineLarge,
    HeadlineMedium,
    HeadlineSmall,
    TitleLarge,
    TitleMedium,
    TitleSmall,
    BodyLarge,
    BodyMedium,
    BodySmall,
    LabelLarge,
    LabelMedium,
    LabelSmall
}
```

### Example Usage
```csharp
<MudTextM3 Typo="TypoM3.HeadlineLarge">Large Headline</MudTextM3>
<MudTextM3 Typo="TypoM3.BodyMedium">Regular body text</MudTextM3>
<MudTextM3 Typo="TypoM3.LabelSmall">Small label</MudTextM3>
```
```

--------------------------------

### MudDateWheelPicker for Date Selection

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/README.md

Implement MudDateWheelPicker for an intuitive, wheel-based date selection interface with date constraints.

```razor
<MudDateWheelPicker @bind-Value="selectedDate"
                    MinDate="DateTime.Now.AddYears(-1)"
                    Label="Select Date" />
```

--------------------------------

### KeyframeBuilder Class

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/types.md

Provides utility methods for generating CSS keyframes for animations.

```csharp
public class KeyframeBuilder
{
    public static string Build(int ticks, List<string> values, string property, string defaultValue = "")
    public static string Build(int ticks, List<Tuple<string, string>> values, string property, string defaultValue = "")
}
```

--------------------------------

### Handle Task Cancellation in Async Operations

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/errors.md

Implement CancellationTokenSource to gracefully handle component disposal during async operations. Catch OperationCanceledException to manage cancellation.

```csharp
private CancellationTokenSource _cancellationTokenSource;

protected override void OnInitialized() {
    _cancellationTokenSource = new CancellationTokenSource();
}

async Task LoadData() {
    try {
        await ScrollManager.ScrollToTopAsync("container");
    }
    catch (OperationCanceledException) {
        // Handle gracefully
    }
}

void Dispose() {
    _cancellationTokenSource?.Cancel();
    _cancellationTokenSource?.Dispose();
}
```

--------------------------------

### Add MudExtensions Namespace

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/README.md

Add the MudExtensions namespace to your _Imports.razor file for easier access to components. This is optional but recommended.

```razor
@using MudExtensions
```

--------------------------------

### Add MudExtensions to Razor Imports

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/configuration.md

Include necessary namespaces in your `_Imports.razor` file to make MudExtensions components and services readily available across your Blazor application.

```razor
@using MudExtensions
@using MudExtensions.Services
@using MudExtensions.Utilities
```

--------------------------------

### MudCodeViewer

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/api-reference/animation-special-components.md

Code display component with syntax highlighting. It supports various programming languages, line numbers, headers, copy functionality, and customizable themes and height.

```APIDOC
## MudCodeViewer

### Description
Code display component with syntax highlighting.

### Parameters
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| Code | string | null | Code content to display |
| Language | CodeLanguage | CSharp | Programming language: CSharp, JavaScript, Json, Sql, etc. |
| ShowLineNumbers | bool | true | If true, displays line numbers |
| ShowHeader | bool | true | If true, displays language header |
| Copyable | bool | true | If true, shows copy button |
| MaxHeight | int? | null | Maximum height in pixels |
| Theme | string | "dark" | Color theme: dark or light |
| Class | string | null | CSS classes |

### Example Usage
```csharp
@page "/code-viewer-demo"
@using MudExtensions

<MudCodeViewer Code="codeSnippet"
               Language="CodeLanguage.CSharp"
               ShowLineNumbers="true"
               ShowHeader="true"
               Copyable="true"
               MaxHeight="400" />

@code {
    string codeSnippet = @"
public class Example
{
    public void HelloWorld()
    {
        Console.WriteLine(\"Hello, World!\");
    }
}
";
}
```
```

--------------------------------

### BeforeInputEventArgs Class Definition

Source: https://github.com/codebeamorg/codebeam.mudblazor.extensions/blob/dev/_autodocs/types.md

Represents event arguments for input events occurring before text insertion. It includes properties to track composition status, input data, and event types like insert, delete, or paste, along with a flag to prevent default behavior.

```csharp
public class BeforeInputEventArgs : EventArgs
{
    public bool IsComposing { get; set; }
    public string? Data { get; set; }
    public bool IsInsert { get; set; }
    public bool IsDeleteBackward { get; set; }
    public bool IsDeleteForward { get; set; }
    public bool IsPaste { get; set; }
    public bool PreventDefault { get; set; }
}
```