Stepper

<div class="flex w-full flex-col gap-4">
  <div class="flex items-center gap-2">
    <span class="text-text-tertiary text-xs font-medium">Active step:</span>
    <Badge size="xs" intent="primary" variant="soft">{interactiveStep + 1} / 4</Badge>
  </div>
  <Stepper bind:activeStep={interactiveStep} clickable>
    <StepperStep label="Account" description="Create account" />
    <StepperStep label="Profile" description="Your details" />
    <StepperStep label="Preferences" description="Customize" optional />
    <StepperStep label="Done" description="All set" />
  </Stepper>
  <div class="flex gap-2">
    <Button
      size="sm"
      variant="outlined"
      disabled={interactiveStep === 0}
      onclick={() => (interactiveStep = Math.max(0, interactiveStep - 1))}
    >
      Back
    </Button>
    <Button
      size="sm"
      disabled={interactiveStep === 3}
      onclick={() => (interactiveStep = Math.min(3, interactiveStep + 1))}
    >
      Next
    </Button>
  </div>
</div>

<Stepper activeStep={2}>
  <StepperStep label="Account" description="Completed" />
  <StepperStep label="Payment" description="Card declined" state="error" />
  <StepperStep label="Shipping" description="Verify address" state="warning" />
  <StepperStep label="Review" description="Final check" />
</Stepper>

<Stepper activeStep={1}>
  <StepperStep label="Account" description="Required" />
  <StepperStep label="Avatar" description="Upload photo" optional />
  <StepperStep label="Bio" description="Tell us about you" optional />
  <StepperStep label="Finish" description="Complete setup" />
</Stepper>

<Stepper activeStep={1} orientation="vertical">
  <StepperStep label="Create Account" description="Enter your email and password">
    <div class="bg-surface-elevated border-border-subtle rounded-contain border p-4">
      <p class="text-text-secondary text-sm">
        Enter your credentials to create a new account. We'll send a verification email to
        confirm your address.
      </p>
    </div>
  </StepperStep>
  <StepperStep label="Personal Info" description="Tell us about yourself">
    <div class="bg-surface-elevated border-border-subtle rounded-contain border p-4">
      <p class="text-text-secondary text-sm">
        Fill in your name, date of birth, and contact information. This helps us personalize
        your experience.
      </p>
    </div>
  </StepperStep>
  <StepperStep label="Preferences" description="Customize your experience" optional>
    <div class="bg-surface-elevated border-border-subtle rounded-contain border p-4">
      <p class="text-text-secondary text-sm">
        Choose your notification preferences, language, and theme settings.
      </p>
    </div>
  </StepperStep>
  <StepperStep label="Complete" description="Review and finish" />
</Stepper>

<Stepper activeStep={2} orientation="vertical">
  <StepperStep label="Account Created" description="Email verified" />
  <StepperStep label="Payment Failed" description="Card was declined" state="error">
    <div class="border-danger/20 bg-danger/5 rounded-contain border p-4">
      <p class="text-danger text-sm font-medium">
        Your card ending in •••• 4242 was declined. Please update your payment method.
      </p>
    </div>
  </StepperStep>
  <StepperStep label="Ship Order" description="Awaiting payment" />
</Stepper>

<Stepper
  activeStep={1}
  slotClasses={{
    separator: 'h-1 rounded-none'
  }}
>
  <StepperStep label="Draft" description="Write content" />
  <StepperStep label="Review" description="Get feedback" />
  <StepperStep label="Publish" description="Go live" />
</Stepper>

<Stepper
  unstyled
  activeStep={1}
  class="flex w-full items-center [&>li:last-child_[data-stepper-separator]]:hidden"
>
  <StepperStep
    unstyled
    label="Design"
    slotClasses={{
      stepItem: 'flex items-center [&:not(:last-child)]:flex-1',
      step: 'flex items-center gap-2.5 shrink-0',
      indicator:
        'flex size-9 items-center justify-center rounded-full text-sm font-semibold bg-white/25 text-white backdrop-blur-md border-2 border-white/30',
      label: 'text-sm font-medium text-white/90',
      separator: 'h-0.5 flex-1 mx-3 bg-white/20 rounded-full'
    }}
  />
  <StepperStep
    unstyled
    label="Develop"
    slotClasses={{
      stepItem: 'flex items-center [&:not(:last-child)]:flex-1',
      step: 'flex items-center gap-2.5 shrink-0',
      indicator:
        'flex size-9 items-center justify-center rounded-full text-sm font-semibold bg-white/40 text-white backdrop-blur-md border-2 border-white/50 shadow-lg shadow-white/10',
      label: 'text-sm font-semibold text-white',
      separator: 'h-0.5 flex-1 mx-3 bg-white/20 rounded-full'
    }}
  />
  <StepperStep
    unstyled
    label="Deploy"
    slotClasses={{
      stepItem: 'flex items-center',
      step: 'flex items-center gap-2.5 shrink-0',
      indicator:
        'flex size-9 items-center justify-center rounded-full text-sm font-semibold bg-white/10 text-white/50 backdrop-blur-md border-2 border-white/15',
      label: 'text-sm font-medium text-white/50',
      separator: 'hidden'
    }}
  />
</Stepper>