# SbStepper

A multi-step wizard component for guiding users through a sequential process.

## Parameters

| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| ActiveIndex | int | 0 | Current active step index (0-based) |
| Linear | bool | true | Whether steps must be completed in order |
| Orientation | SbStepperOrientation | Horizontal | Stepper orientation |
| ShowNavigation | bool | true | Whether to show navigation buttons |
| BackText | string? | null | Text for the Back button; when null, uses localized default (e.g. "Previous") |
| NextText | string? | null | Text for the Next button; when null, uses localized default |
| FinishText | string? | null | Text for the Finish button; when null, uses localized default |
| OptionalText | string? | null | Text for optional step label; when null, uses localized default |
| Class | string? | null | Additional CSS classes |

## Events

| Event | Type | Description |
|-------|------|-------------|
| ActiveIndexChanged | EventCallback\<int\> | Fired when active step changes |
| OnFinish | EventCallback | Fired when stepper is completed |

## Templates / Slots

| Slot | Type | Description |
|------|------|-------------|
| ChildContent | RenderFragment | Step content (SbStep components) |

## SbStep Parameters

Use `SbStep` inside `SbStepper` to define each step.

| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| Label | string | "" | Step label shown in the header |
| Description | string? | null | Optional description below the label |
| Optional | bool | false | When true, step is marked as optional (e.g. "Optional" label) |
| Icon | RenderFragment? | null | Custom icon for the step indicator (replaces the default number); completed steps still show a checkmark |
| ChildContent | RenderFragment? | null | Content shown when the step is active |

## SbStepperOrientation Enum

```csharp
public enum SbStepperOrientation
{
    Horizontal,
    Vertical
}
```

## CSS Classes

- `sb-stepper` - Base class
- `sb-stepper--horizontal` - Horizontal orientation
- `sb-stepper--vertical` - Vertical orientation
- `sb-stepper__steps` - Steps container
- `sb-stepper__step` - Individual step
- `sb-stepper__step--completed` - Completed step
- `sb-stepper__step--active` - Active step
- `sb-stepper__step--pending` - Pending step
- `sb-stepper__step--optional` - Optional step
- `sb-stepper__step-button` - Step button
- `sb-stepper__step-indicator` - Step number/icon indicator
- `sb-stepper__step-labels` - Step label container
- `sb-stepper__step-label` - Step label text
- `sb-stepper__step-description` - Step description
- `sb-stepper__step-optional` - Optional text label
- `sb-stepper__connector` - Connector line between steps
- `sb-stepper__connector--completed` - Completed connector
- `sb-stepper__content` - Content container
- `sb-stepper__navigation` - Navigation buttons container
- `sb-stepper__back` - Back button
- `sb-stepper__next` - Next button
- `sb-stepper__finish` - Finish button

## Examples

### Basic Usage

```razor
<SbStepper @bind-ActiveIndex="currentStep" OnFinish="HandleFinish">
    <SbStep Label="Account">
        <SbStack Gap="4">
            <SbTextField Label="Email" @bind-Value="email" />
            <SbTextField Label="Password" Type="password" @bind-Value="password" />
        </SbStack>
    </SbStep>
    <SbStep Label="Profile">
        <SbStack Gap="4">
            <SbTextField Label="First Name" @bind-Value="firstName" />
            <SbTextField Label="Last Name" @bind-Value="lastName" />
        </SbStack>
    </SbStep>
    <SbStep Label="Confirm">
        <SbStack Gap="2">
            <SbText>Email: @email</SbText>
            <SbText>Name: @firstName @lastName</SbText>
        </SbStack>
    </SbStep>
</SbStepper>

@code {
    private int currentStep = 0;
    private string email, password, firstName, lastName;
    
    private async Task HandleFinish()
    {
        // Submit the form
        await SaveUser();
    }
}
```

### With Step Descriptions

Use the `Description` parameter on `SbStep` to show a subtitle under each step label.

```razor
<SbStepper @bind-ActiveIndex="step">
    <SbStep Label="Account Information" Description="Enter your personal details">
        <SbStack Gap="4">
            <SbTextField Label="Full Name" @bind-Value="fullName" />
            <SbTextField Label="Email" @bind-Value="email" />
        </SbStack>
    </SbStep>
    <SbStep Label="Address" Description="Provide your shipping address">
        <SbStack Gap="4">
            <SbTextField Label="Street" @bind-Value="street" />
            <SbTextField Label="City" @bind-Value="city" />
        </SbStack>
    </SbStep>
    <SbStep Label="Review" Description="Confirm your information">
        <SbText>Review and submit.</SbText>
    </SbStep>
</SbStepper>
```

### Vertical Orientation

```razor
<SbStepper Orientation="SbStepperOrientation.Vertical" @bind-ActiveIndex="step">
    <SbStep Label="Step 1" Description="Enter basic information">
        Content for step 1
    </SbStep>
    <SbStep Label="Step 2" Description="Configure settings">
        Content for step 2
    </SbStep>
    <SbStep Label="Step 3" Description="Review and submit">
        Content for step 3
    </SbStep>
</SbStepper>
```

### With Optional Steps

```razor
<SbStepper @bind-ActiveIndex="step">
    <SbStep Label="Required Info">
        Required step content
    </SbStep>
    <SbStep Label="Additional Info" Optional="true">
        Optional step content - can be skipped
    </SbStep>
    <SbStep Label="Confirmation">
        Final step content
    </SbStep>
</SbStepper>
```

### Non-Linear Navigation

```razor
<SbStepper Linear="false" @bind-ActiveIndex="step">
    <SbStep Label="General">
        General settings
    </SbStep>
    <SbStep Label="Advanced">
        Advanced settings
    </SbStep>
    <SbStep Label="Review">
        Review settings
    </SbStep>
</SbStepper>
```

### Custom Button Text

```razor
<SbStepper 
    BackText="Previous"
    NextText="Continue"
    FinishText="Complete Setup"
    OptionalText="(Optional)"
    @bind-ActiveIndex="step">
    <SbStep Label="Step 1">Content 1</SbStep>
    <SbStep Label="Step 2" Optional="true">Content 2</SbStep>
    <SbStep Label="Step 3">Content 3</SbStep>
</SbStepper>
```

### Without Built-in Navigation

```razor
<SbStepper ShowNavigation="false" @bind-ActiveIndex="step">
    <SbStep Label="Step 1">
        <SbStack Gap="4">
            <p>Step 1 content</p>
            <SbButton OnClick="() => step++">Continue</SbButton>
        </SbStack>
    </SbStep>
    <SbStep Label="Step 2">
        <SbStack Gap="4">
            <p>Step 2 content</p>
            <SbStack Direction="SbStackDirection.Row" Gap="2">
                <SbButton Variant="SbButtonVariant.Outline" OnClick="() => step--">Back</SbButton>
                <SbButton OnClick="() => step++">Continue</SbButton>
            </SbStack>
        </SbStack>
    </SbStep>
</SbStepper>

@code {
    private int step = 0;
}
```

### Checkout Flow

```razor
<SbStepper @bind-ActiveIndex="checkoutStep" OnFinish="PlaceOrder">
    <SbStep Label="Cart" Description="Review your items">
        <Icon><SbIcon Name="shopping-cart" /></Icon>
        <ChildContent>
            <SbStack Gap="4">
                @foreach (var item in cartItems)
                {
                    <SbCard>
                        <SbStack Direction="SbStackDirection.Row" Justify="SbJustify.SpaceBetween">
                            <span>@item.Name</span>
                            <span>@item.Price.ToString("C")</span>
                        </SbStack>
                    </SbCard>
                }
                <SbText Weight="semibold">Total: @cartTotal.ToString("C")</SbText>
            </SbStack>
        </ChildContent>
    </SbStep>
    <SbStep Label="Shipping" Description="Enter shipping address">
        <Icon><SbIcon Name="truck" /></Icon>
        <ChildContent>
            <SbGrid Columns="2" Gap="4">
                <SbTextField Label="First Name" @bind-Value="shipping.FirstName" />
                <SbTextField Label="Last Name" @bind-Value="shipping.LastName" />
                <SbGridItem Span="2">
                    <SbTextField Label="Address" @bind-Value="shipping.Address" />
                </SbGridItem>
                <SbTextField Label="City" @bind-Value="shipping.City" />
                <SbTextField Label="Zip Code" @bind-Value="shipping.ZipCode" />
            </SbGrid>
        </ChildContent>
    </SbStep>
    <SbStep Label="Payment" Description="Enter payment details">
        <Icon><SbIcon Name="credit-card" /></Icon>
        <ChildContent>
            <SbStack Gap="4">
                <SbTextField Label="Card Number" @bind-Value="payment.CardNumber" />
                <SbGrid Columns="2" Gap="4">
                    <SbTextField Label="Expiry" Placeholder="MM/YY" @bind-Value="payment.Expiry" />
                    <SbTextField Label="CVC" @bind-Value="payment.CVC" />
                </SbGrid>
            </SbStack>
        </ChildContent>
    </SbStep>
    <SbStep Label="Confirm" Description="Review your order">
        <Icon><SbIcon Name="check-circle" /></Icon>
        <ChildContent>
            <SbAlert Severity="SbAlertSeverity.Success">
                Order ready to be placed!
            </SbAlert>
        </ChildContent>
    </SbStep>
</SbStepper>
```