<.dm_stepper id="stepper-single-default">
  <:step label="Account" completed={true} />
  <:step label="Profile" active={true} />
  <:step label="Review" />
  <:step label="Complete" />
</.dm_stepper>

<.dm_stepper id="stepper-single-with-descriptions">
  <:step label="Sign Up" description="Create account" completed={true} />
  <:step label="Details" description="Fill in info" active={true} />
  <:step label="Confirm" description="Verify email" />
</.dm_stepper>

<.dm_stepper id="stepper-single-vertical" vertical>
  <:step label="Step 1" completed={true} />
  <:step label="Step 2" active={true} />
  <:step label="Step 3" />
</.dm_stepper>

<.dm_stepper id="stepper-single-error-state">
  <:step label="Upload" completed={true} />
  <:step label="Process" error={true} />
  <:step label="Complete" />
</.dm_stepper>

<.dm_stepper id="stepper-variants-dots" variant="dots">
  <:step label="Step 1" completed={true} />
  <:step label="Step 2" active={true} />
  <:step label="Step 3" />
</.dm_stepper>
<.dm_stepper id="stepper-variants-alt-labels" variant="alt-labels">
  <:step label="Start" completed={true} />
  <:step label="In Progress" active={true} />
  <:step label="Done" />
</.dm_stepper>
<.dm_stepper id="stepper-variants-icons" variant="icons">
  <:step label="Upload" completed={true} />
  <:step label="Process" active={true} />
  <:step label="Review" />
  <:step label="Finish" />
</.dm_stepper>

<.dm_stepper id="stepper-colors-secondary" color="secondary">
  <:step label="Step A" completed={true} />
  <:step label="Step B" active={true} />
  <:step label="Step C" />
</.dm_stepper>
<.dm_stepper id="stepper-colors-tertiary" color="tertiary">
  <:step label="Step A" completed={true} />
  <:step label="Step B" active={true} />
  <:step label="Step C" />
</.dm_stepper>
<.dm_stepper id="stepper-colors-accent" color="accent">
  <:step label="Step A" completed={true} />
  <:step label="Step B" active={true} />
  <:step label="Step C" />
</.dm_stepper>

<.dm_stepper id="stepper-sizes-small" size="sm">
  <:step label="Step 1" completed={true} />
  <:step label="Step 2" active={true} />
  <:step label="Step 3" />
</.dm_stepper>
<.dm_stepper id="stepper-sizes-large" size="lg">
  <:step label="Step 1" completed={true} />
  <:step label="Step 2" active={true} />
  <:step label="Step 3" />
</.dm_stepper>

<.dm_stepper id="stepper-single-clickable" clickable>
  <:step label="Step 1" completed={true} />
  <:step label="Step 2" active={true} />
  <:step label="Step 3" />
</.dm_stepper>

<.dm_stepper id="stepper-single-step-states">
  <:step label="Completed" completed={true} />
  <:step label="Active" active={true} />
  <:step label="Optional (skip)" optional={true} />
  <:step label="Disabled" disabled={true} />
  <:step label="Pending" />
</.dm_stepper>