<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8">
  <div class="callout">
    <p class="tw:mb-1 tw:text-sm tw:font-mono">
      <strong>PROGRESS:</strong> Completion indicators<br>
      <strong>VARIANTS:</strong> Bar | Stepper
    </p>
    <p class="tw:mb-0 tw:text-sm">
      Consolidated entry for progress indication. Bar is the continuous percentage bar;
      Stepper is the discrete multi-step sequence.
    </p>
  </div>
  <div data-controller="tabs">
    <div class="tabs" role="tablist">
      <button class="tab" role="tab" aria-selected="true" data-tabs-target="tab" data-tabs-anchor="bar" data-action="click->tabs#select keydown->tabs#keydown" type="button">Bar</button>
      <button class="tab" role="tab" aria-selected="false" data-tabs-target="tab" data-tabs-anchor="stepper" data-action="click->tabs#select keydown->tabs#keydown" type="button">Stepper</button>
    </div>
    <div class="tab-content">
      <div class="tab-panel" role="tabpanel" data-tabs-target="panel">
        <!-- Introductory callout -->
        <div class="callout">
          <p class="tw:mb-1 tw:text-sm tw:font-mono">
            <strong>PROGRESS BAR:</strong> Displays task or process completion status<br>
            <strong>VARIANTS:</strong> primary | success | danger | warning | info<br>
            <strong>SIZES:</strong> default (6px) | md (10px) | lg (16px)<br>
            <strong>MODES:</strong> determinate (fixed %) | indeterminate (bouncing)
          </p>
          <p class="tw:mb-0 tw:text-sm">
            Use progress bars to show how far along a process is. Choose determinate when
            the percentage is known, or indeterminate when the duration is unknown.
          </p>
        </div>
        <!-- ============================================
       Basic States (0% to 100%)
       ============================================ -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Basic States</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Determinate progress:</strong> Set the bar width to reflect completion percentage.
              Uses <code>.progress-bar-primary</code> by default.
            </p>
          </div>
          <div class="tw:space-y-4">
            <div>
              <p class="tw:text-sm text-muted tw:mb-1">0% — Not started</p>
              <div class="progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-label="Progress: 0%">
                <div class="progress-bar progress-bar-primary" style="width: 0%"></div>
              </div>
            </div>
            <div>
              <p class="tw:text-sm text-muted tw:mb-1">25% — Quarter complete</p>
              <div class="progress" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" aria-label="Progress: 25%">
                <div class="progress-bar progress-bar-primary" style="width: 25%"></div>
              </div>
            </div>
            <div>
              <p class="tw:text-sm text-muted tw:mb-1">50% — Half complete</p>
              <div class="progress" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" aria-label="Progress: 50%">
                <div class="progress-bar progress-bar-primary" style="width: 50%"></div>
              </div>
            </div>
            <div>
              <p class="tw:text-sm text-muted tw:mb-1">75% — Three quarters</p>
              <div class="progress" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" aria-label="Progress: 75%">
                <div class="progress-bar progress-bar-primary" class="tw:w-3/4"></div>
              </div>
            </div>
            <div>
              <p class="tw:text-sm text-muted tw:mb-1">100% — Complete</p>
              <div class="progress" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" aria-label="Progress: 100%">
                <div class="progress-bar progress-bar-success" style="width: 100%"></div>
              </div>
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><div class="progress" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"><br>
                <div class="progress-bar progress-bar-primary" style="width: 50%"></div><br>
              </div></code>
          </div>
        </div>
        <!-- ============================================
       Color Variants
       ============================================ -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Color Variants</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Semantic colors:</strong> Use color variants to convey meaning.
              Primary for general progress, success for completion, danger for critical limits,
              warning for caution, and info for informational processes.
            </p>
          </div>
          <div class="tw:space-y-4">
            <div>
              <p class="tw:text-sm text-muted tw:mb-1">Primary — <code>.progress-bar-primary</code></p>
              <div class="progress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" aria-label="Primary progress: 60%">
                <div class="progress-bar progress-bar-primary" style="width: 60%"></div>
              </div>
            </div>
            <div>
              <p class="tw:text-sm text-muted tw:mb-1">Success — <code>.progress-bar-success</code></p>
              <div class="progress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" aria-label="Success progress: 60%">
                <div class="progress-bar progress-bar-success" style="width: 60%"></div>
              </div>
            </div>
            <div>
              <p class="tw:text-sm text-muted tw:mb-1">Danger — <code>.progress-bar-danger</code></p>
              <div class="progress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" aria-label="Danger progress: 60%">
                <div class="progress-bar progress-bar-danger" style="width: 60%"></div>
              </div>
            </div>
            <div>
              <p class="tw:text-sm text-muted tw:mb-1">Warning — <code>.progress-bar-warning</code></p>
              <div class="progress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" aria-label="Warning progress: 60%">
                <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
              </div>
            </div>
            <div>
              <p class="tw:text-sm text-muted tw:mb-1">Info — <code>.progress-bar-info</code></p>
              <div class="progress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" aria-label="Info progress: 60%">
                <div class="progress-bar progress-bar-info" style="width: 60%"></div>
              </div>
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><div class="progress-bar progress-bar-success" style="width: 60%"></div></code>
          </div>
        </div>
        <!-- ============================================
       Size Variants
       ============================================ -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Size Variants</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Three sizes:</strong> Default (6px), medium (10px), and large (16px).
              Add <code>.progress-md</code> or <code>.progress-lg</code> to the track element.
            </p>
          </div>
          <div class="tw:space-y-4">
            <div>
              <p class="tw:text-sm text-muted tw:mb-1">Default (6px) — <code>.progress</code></p>
              <div class="progress" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" aria-label="Default size progress: 50%">
                <div class="progress-bar progress-bar-primary" style="width: 50%"></div>
              </div>
            </div>
            <div>
              <p class="tw:text-sm text-muted tw:mb-1">Medium (10px) — <code>.progress .progress-md</code></p>
              <div class="progress progress-md" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" aria-label="Medium size progress: 50%">
                <div class="progress-bar progress-bar-primary" style="width: 50%"></div>
              </div>
            </div>
            <div>
              <p class="tw:text-sm text-muted tw:mb-1">Large (16px) — <code>.progress .progress-lg</code></p>
              <div class="progress progress-lg" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" aria-label="Large size progress: 50%">
                <div class="progress-bar progress-bar-primary" style="width: 50%"></div>
              </div>
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><div class="progress progress-lg">...</div></code>
          </div>
        </div>
        <!-- ============================================
       Animated Progress (Demo)
       ============================================ -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Animated Progress (Demo)</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Stimulus-driven animation:</strong> The progress controller animates the bar
              from 0% to 100% over a configurable duration. Set <code>data-progress-loop-value="true"</code>
              to repeat continuously.
            </p>
          </div>
          <div class="tw:space-y-4">
            <div>
              <p class="tw:text-sm text-muted tw:mb-1">Looping animation (3 seconds per cycle)</p>
              <div data-controller="progress"
             data-progress-animate-value="true"
             data-progress-duration-value="3000"
             data-progress-loop-value="true">
                <div class="progress progress-md" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-label="Animated progress demo">
                  <div class="progress-bar progress-bar-primary"
                 data-progress-target="bar"
                 style="width: 0%"></div>
                </div>
              </div>
            </div>
            <div>
              <p class="tw:text-sm text-muted tw:mb-1">Looping animation — success color (5 seconds)</p>
              <div data-controller="progress"
             data-progress-animate-value="true"
             data-progress-duration-value="5000"
             data-progress-loop-value="true">
                <div class="progress progress-md" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-label="Animated success progress demo">
                  <div class="progress-bar progress-bar-success"
                 data-progress-target="bar"
                 style="width: 0%"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><div data-controller="progress" data-progress-animate-value="true" data-progress-loop-value="true"><br>
                <div class="progress"><br>
                  <div class="progress-bar progress-bar-primary" data-progress-target="bar"></div><br>
                </div><br>
              </div></code>
          </div>
        </div>
        <!-- ============================================
       Indeterminate Progress
       ============================================ -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Indeterminate Progress</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Unknown duration:</strong> When you cannot determine the percentage, use
              <code>.progress-indeterminate</code> on the track. The bar bounces continuously using
              a CSS-only animation. No JavaScript required.
            </p>
          </div>
          <div class="tw:space-y-4">
            <div>
              <p class="tw:text-sm text-muted tw:mb-1">Primary — indeterminate</p>
              <div class="progress progress-indeterminate" role="progressbar" aria-label="Loading...">
                <div class="progress-bar progress-bar-primary"></div>
              </div>
            </div>
            <div>
              <p class="tw:text-sm text-muted tw:mb-1">Success — indeterminate</p>
              <div class="progress progress-indeterminate" role="progressbar" aria-label="Loading...">
                <div class="progress-bar progress-bar-success"></div>
              </div>
            </div>
            <div>
              <p class="tw:text-sm text-muted tw:mb-1">Danger — indeterminate</p>
              <div class="progress progress-indeterminate" role="progressbar" aria-label="Loading...">
                <div class="progress-bar progress-bar-danger"></div>
              </div>
            </div>
            <div>
              <p class="tw:text-sm text-muted tw:mb-1">Warning — indeterminate</p>
              <div class="progress progress-indeterminate" role="progressbar" aria-label="Loading...">
                <div class="progress-bar progress-bar-warning"></div>
              </div>
            </div>
            <div>
              <p class="tw:text-sm text-muted tw:mb-1">Info — indeterminate</p>
              <div class="progress progress-indeterminate" role="progressbar" aria-label="Loading...">
                <div class="progress-bar progress-bar-info"></div>
              </div>
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><div class="progress progress-indeterminate" role="progressbar" aria-label="Loading..."><br>
                <div class="progress-bar progress-bar-primary"></div><br>
              </div></code>
          </div>
        </div>
        <!-- ============================================
       Indeterminate Sizes
       ============================================ -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Indeterminate — Size Variants</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Sizes work with indeterminate too:</strong> Combine <code>.progress-indeterminate</code>
              with <code>.progress-md</code> or <code>.progress-lg</code>.
            </p>
          </div>
          <div class="tw:space-y-4">
            <div>
              <p class="tw:text-sm text-muted tw:mb-1">Default (6px) — indeterminate</p>
              <div class="progress progress-indeterminate" role="progressbar" aria-label="Loading...">
                <div class="progress-bar progress-bar-info"></div>
              </div>
            </div>
            <div>
              <p class="tw:text-sm text-muted tw:mb-1">Medium (10px) — indeterminate</p>
              <div class="progress progress-md progress-indeterminate" role="progressbar" aria-label="Loading...">
                <div class="progress-bar progress-bar-info"></div>
              </div>
            </div>
            <div>
              <p class="tw:text-sm text-muted tw:mb-1">Large (16px) — indeterminate</p>
              <div class="progress progress-lg progress-indeterminate" role="progressbar" aria-label="Loading...">
                <div class="progress-bar progress-bar-info"></div>
              </div>
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><div class="progress progress-lg progress-indeterminate">...</div></code>
          </div>
        </div>
        <!-- ============================================
       Use Case Examples
       ============================================ -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Use Case Examples</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>In context:</strong> Progress bars within realistic UI scenarios.
            </p>
          </div>
          <div class="tw:space-y-4">
            <!-- File upload card -->
            <div class="card">
              <div class="card-body">
                <h3 class="h5 tw:mb-3">File Upload</h3>
                <div class="tw:flex tw:items-center tw:justify-between tw:mb-2">
                  <span class="tw:text-sm fw-medium">application-form.pdf</span>
                  <span class="tw:text-sm text-muted">72%</span>
                </div>
                <div class="progress progress-md" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" aria-label="Upload progress: 72%">
                  <div class="progress-bar progress-bar-primary" style="width: 72%"></div>
                </div>
                <p class="tw:text-sm text-muted tw:mt-2 tw:mb-0">Uploading... 1.4 MB of 2.0 MB</p>
              </div>
            </div>
            <!-- Application form completion -->
            <div class="card">
              <div class="card-body">
                <h3 class="h5 tw:mb-3">Application Form Completion</h3>
                <div class="tw:space-y-3">
                  <div>
                    <div class="tw:flex tw:items-center tw:justify-between tw:mb-1">
                      <span class="tw:text-sm">Personal Details</span>
                      <span class="badge badge-success-subtle tw:text-sm">Complete</span>
                    </div>
                    <div class="progress" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" aria-label="Personal details: complete">
                      <div class="progress-bar progress-bar-success" style="width: 100%"></div>
                    </div>
                  </div>
                  <div>
                    <div class="tw:flex tw:items-center tw:justify-between tw:mb-1">
                      <span class="tw:text-sm">Academic History</span>
                      <span class="badge badge-warning-subtle tw:text-sm">In Progress</span>
                    </div>
                    <div class="progress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" aria-label="Academic history: 60%">
                      <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
                    </div>
                  </div>
                  <div>
                    <div class="tw:flex tw:items-center tw:justify-between tw:mb-1">
                      <span class="tw:text-sm">Supporting Documents</span>
                      <span class="badge badge-secondary-subtle tw:text-sm">Not Started</span>
                    </div>
                    <div class="progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-label="Supporting documents: not started">
                      <div class="progress-bar progress-bar-primary" style="width: 0%"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- System processing -->
            <div class="card">
              <div class="card-body">
                <h3 class="h5 tw:mb-3">Loading results</h3>
                <p class="tw:text-sm text-muted tw:mb-3">Finding schools near you...</p>
                <div class="progress progress-md progress-indeterminate" role="progressbar" aria-label="Loading results...">
                  <div class="progress-bar progress-bar-info"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tab-panel" role="tabpanel" data-tabs-target="panel">
        <!-- Introductory callout -->
        <div class="callout">
          <p class="tw:mb-1 tw:text-sm tw:font-mono">
            <strong>STEPS / WIZARD:</strong> Multi-step progress indicator with navigable content panels<br>
            <strong>VARIANTS:</strong> Horizontal | Vertical | Dots-Only<br>
            <strong>SIZES:</strong> Small (.steps-sm) | Default | Large (.steps-lg)
          </p>
          <p class="tw:mb-0 tw:text-sm">
            Guide users through multi-step processes like onboarding, checkout, and registration.
            Supports linear (sequential) and non-linear (free) navigation modes, cancelable
            validation events, and automatic step state management.
          </p>
        </div>
        <!-- ============================================
       Section 1: Horizontal (Default)
       ============================================ -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Horizontal (Default)</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Default layout:</strong> Steps flow left-to-right with connector lines between indicators.
              Click "Continue" to advance, "Back" to return. Click a completed step indicator to jump back.
            </p>
          </div>
          <div class="steps" data-controller="steps" id="steps-horizontal">
            <div class="steps-header">
              <div class="step" data-steps-target="step" data-action="click->steps#goTo">
                <div class="step-indicator">1</div>
                <div class="step-label">Account</div>
              </div>
              <div class="step" data-steps-target="step" data-action="click->steps#goTo">
                <div class="step-indicator">2</div>
                <div class="step-label">Profile</div>
              </div>
              <div class="step" data-steps-target="step" data-action="click->steps#goTo">
                <div class="step-indicator">3</div>
                <div class="step-label">Preferences</div>
              </div>
              <div class="step" data-steps-target="step" data-action="click->steps#goTo">
                <div class="step-indicator">4</div>
                <div class="step-label">Review</div>
              </div>
            </div>
            <div class="steps-content">
              <div class="steps-panel" data-steps-target="panel">
                <div class="card">
                  <div class="card-body">
                    <h3 class="h5 tw:mb-3">Create Your Account</h3>
                    <div class="tw:space-y-3">
                      <div>
                        <label class="form-label" for="h-email">Email address <span class="tw:text-danger">*</span></label>
                        <input type="email" id="h-email" class="form-control" placeholder="name@school.edu">
                      </div>
                      <div>
                        <label class="form-label" for="h-password">Password <span class="tw:text-danger">*</span></label>
                        <input type="password" id="h-password" class="form-control" placeholder="Create a password">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="steps-panel" data-steps-target="panel">
                <div class="card">
                  <div class="card-body">
                    <h3 class="h5 tw:mb-3">Your Profile</h3>
                    <div class="tw:space-y-3">
                      <div>
                        <label class="form-label" for="h-name">Full name</label>
                        <input type="text" id="h-name" class="form-control" placeholder="Sarah Johnson">
                      </div>
                      <div>
                        <label class="form-label" for="h-role">I am a</label>
                        <select id="h-role" class="form-select">
                          <option>Select your role</option>
                          <option>Year 11 Student</option>
                          <option>Year 12 Student</option>
                          <option>Parent of Year 11</option>
                        </select>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="steps-panel" data-steps-target="panel">
                <div class="card">
                  <div class="card-body">
                    <h3 class="h5 tw:mb-3">Preferences</h3>
                    <div class="tw:space-y-3">
                      <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="h-notif" checked>
                        <label class="form-check-label" for="h-notif">Email notifications</label>
                      </div>
                      <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="h-dark">
                        <label class="form-check-label" for="h-dark">Dark mode</label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="steps-panel" data-steps-target="panel">
                <div class="card">
                  <div class="card-body">
                    <h3 class="h5 tw:mb-3">Review & Confirm</h3>
                    <p class="text-muted">Review your details before completing setup. You can go back to any previous step to make changes.</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="steps-footer">
              <button class="btn btn-secondary" data-steps-target="backBtn"
                data-action="click->steps#back" type="button">Back</button>
              <button class="btn btn-primary" data-steps-target="nextBtn"
                data-action="click->steps#next" type="button">Continue</button>
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><div class="steps" data-controller="steps">...</div></code>
          </div>
        </div>
        <!-- ============================================
       Section 2: Vertical Layout
       ============================================ -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Vertical Layout</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>.steps-vertical:</strong> Steps stack vertically with connectors between indicators.
              Content panel appears to the right of the step list. Ideal for longer forms
              and side-panel layouts.
            </p>
          </div>
          <div class="steps steps-vertical" data-controller="steps" id="steps-vertical">
            <div class="steps-header">
              <div class="step" data-steps-target="step" data-action="click->steps#goTo">
                <div class="step-indicator">1</div>
                <div>
                  <div class="step-label">Personal Details</div>
                  <div class="step-description">Name, date of birth, address</div>
                </div>
              </div>
              <div class="step" data-steps-target="step" data-action="click->steps#goTo">
                <div class="step-indicator">2</div>
                <div>
                  <div class="step-label">Academic History</div>
                  <div class="step-description">Previous schools, grades</div>
                </div>
              </div>
              <div class="step" data-steps-target="step" data-action="click->steps#goTo">
                <div class="step-indicator">3</div>
                <div>
                  <div class="step-label">Supporting Documents</div>
                  <div class="step-description">References, certificates</div>
                </div>
              </div>
              <div class="step" data-steps-target="step" data-action="click->steps#goTo">
                <div class="step-indicator">4</div>
                <div>
                  <div class="step-label">Parent Details</div>
                  <div class="step-description">Contact details</div>
                </div>
              </div>
              <div class="step" data-steps-target="step" data-action="click->steps#goTo">
                <div class="step-indicator">5</div>
                <div>
                  <div class="step-label">Submit</div>
                  <div class="step-description">Review and confirm</div>
                </div>
              </div>
            </div>
            <div class="steps-content">
              <div class="steps-panel" data-steps-target="panel">
                <div class="card">
                  <div class="card-body">
                    <h3 class="h5 tw:mb-3">Personal Details</h3>
                    <div class="tw:space-y-3">
                      <div>
                        <label class="form-label" for="v-firstname">First name</label>
                        <input type="text" id="v-firstname" class="form-control" placeholder="Emma">
                      </div>
                      <div>
                        <label class="form-label" for="v-lastname">Last name</label>
                        <input type="text" id="v-lastname" class="form-control" placeholder="Williams">
                      </div>
                      <div>
                        <label class="form-label" for="v-dob">Date of birth</label>
                        <input type="date" id="v-dob" class="form-control">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="steps-panel" data-steps-target="panel">
                <div class="card">
                  <div class="card-body">
                    <h3 class="h5 tw:mb-3">Academic History</h3>
                    <p class="text-muted">Enter details about previous schools and academic achievements.</p>
                  </div>
                </div>
              </div>
              <div class="steps-panel" data-steps-target="panel">
                <div class="card">
                  <div class="card-body">
                    <h3 class="h5 tw:mb-3">Supporting Documents</h3>
                    <p class="text-muted">Upload references, certificates, and other supporting materials.</p>
                  </div>
                </div>
              </div>
              <div class="steps-panel" data-steps-target="panel">
                <div class="card">
                  <div class="card-body">
                    <h3 class="h5 tw:mb-3">Parent Details</h3>
                    <p class="text-muted">Provide contact information for your parent or carer.</p>
                  </div>
                </div>
              </div>
              <div class="steps-panel" data-steps-target="panel">
                <div class="card">
                  <div class="card-body">
                    <h3 class="h5 tw:mb-3">Review & Submit</h3>
                    <p class="text-muted">Review all information before submitting the application.</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="steps-footer">
              <button class="btn btn-secondary" data-steps-target="backBtn"
                data-action="click->steps#back" type="button">Back</button>
              <button class="btn btn-primary" data-steps-target="nextBtn"
                data-action="click->steps#next" type="button">Continue</button>
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><div class="steps steps-vertical" data-controller="steps">...</div></code>
          </div>
        </div>
        <!-- ============================================
       Section 3: Dots-Only Variant
       ============================================ -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Dots-Only</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>.steps-dots:</strong> Compact dot indicators without labels. Active dot has a
              ring highlight. Ideal for onboarding flows, image carousels, and compact wizards.
            </p>
          </div>
          <div class="tw:max-w-md tw:mx-auto">
            <div class="steps steps-dots" data-controller="steps" id="steps-dots">
              <div class="steps-header">
                <div class="step" data-steps-target="step" data-action="click->steps#goTo">
                  <div class="step-indicator"></div>
                </div>
                <div class="step" data-steps-target="step" data-action="click->steps#goTo">
                  <div class="step-indicator"></div>
                </div>
                <div class="step" data-steps-target="step" data-action="click->steps#goTo">
                  <div class="step-indicator"></div>
                </div>
                <div class="step" data-steps-target="step" data-action="click->steps#goTo">
                  <div class="step-indicator"></div>
                </div>
                <div class="step" data-steps-target="step" data-action="click->steps#goTo">
                  <div class="step-indicator"></div>
                </div>
              </div>
              <div class="steps-content">
                <div class="steps-panel" data-steps-target="panel">
                  <div class="card">
                    <div class="card-body tw:text-center">
                      <i class="fa-solid fa-hand-wave tw:text-3xl tw:text-primary-500 tw:mb-3"></i>
                      <h3 class="h5 tw:mb-2">Welcome to A-One</h3>
                      <p class="text-muted tw:mb-0">Let's get you set up in just a few steps.</p>
                    </div>
                  </div>
                </div>
                <div class="steps-panel" data-steps-target="panel">
                  <div class="card">
                    <div class="card-body tw:text-center">
                      <i class="fa-solid fa-school tw:text-3xl tw:text-primary-500 tw:mb-3"></i>
                      <h3 class="h5 tw:mb-2">Your Interests</h3>
                      <p class="text-muted tw:mb-0">Tell us about the subjects and courses you're interested in.</p>
                    </div>
                  </div>
                </div>
                <div class="steps-panel" data-steps-target="panel">
                  <div class="card">
                    <div class="card-body tw:text-center">
                      <i class="fa-solid fa-users tw:text-3xl tw:text-primary-500 tw:mb-3"></i>
                      <h3 class="h5 tw:mb-2">Find Providers</h3>
                      <p class="text-muted tw:mb-0">Browse sixth forms and colleges that match your interests.</p>
                    </div>
                  </div>
                </div>
                <div class="steps-panel" data-steps-target="panel">
                  <div class="card">
                    <div class="card-body tw:text-center">
                      <i class="fa-solid fa-sliders tw:text-3xl tw:text-primary-500 tw:mb-3"></i>
                      <h3 class="h5 tw:mb-2">Application Preferences</h3>
                      <p class="text-muted tw:mb-0">Set your notification and application deadline reminders.</p>
                    </div>
                  </div>
                </div>
                <div class="steps-panel" data-steps-target="panel">
                  <div class="card">
                    <div class="card-body tw:text-center">
                      <i class="fa-regular fa-circle-check tw:text-3xl tw:text-green-500 tw:mb-3"></i>
                      <h3 class="h5 tw:mb-2">All Done!</h3>
                      <p class="text-muted tw:mb-0">You're ready to start exploring providers and submitting applications.</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="steps-footer tw:justify-center tw:gap-3">
                <button class="btn btn-secondary" data-steps-target="backBtn"
                  data-action="click->steps#back" type="button">Back</button>
                <button class="btn btn-primary" data-steps-target="nextBtn"
                  data-action="click->steps#next" type="button">Continue</button>
              </div>
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><div class="steps steps-dots" data-controller="steps">...</div></code>
          </div>
        </div>
        <!-- ============================================
       Section 4: Sizes
       ============================================ -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Sizes</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Size variants:</strong> <code>.steps-sm</code> (24px indicators),
              default (32px), and <code>.steps-lg</code> (40px indicators, thicker connectors).
            </p>
          </div>
          <div class="tw:space-y-8">
            <!-- Small -->
            <div>
              <h3 class="h6 tw:mb-3 text-muted">Small (.steps-sm)</h3>
              <div class="steps steps-sm">
                <div class="steps-header">
                  <div class="step completed">
                    <div class="step-indicator"><i class="fa-solid fa-check"></i></div>
                    <div class="step-label">Account</div>
                  </div>
                  <div class="step completed">
                    <div class="step-indicator"><i class="fa-solid fa-check"></i></div>
                    <div class="step-label">Profile</div>
                  </div>
                  <div class="step active">
                    <div class="step-indicator">3</div>
                    <div class="step-label">Settings</div>
                  </div>
                  <div class="step">
                    <div class="step-indicator">4</div>
                    <div class="step-label">Review</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- Default -->
            <div>
              <h3 class="h6 tw:mb-3 text-muted">Default</h3>
              <div class="steps">
                <div class="steps-header">
                  <div class="step completed">
                    <div class="step-indicator"><i class="fa-solid fa-check"></i></div>
                    <div class="step-label">Account</div>
                  </div>
                  <div class="step completed">
                    <div class="step-indicator"><i class="fa-solid fa-check"></i></div>
                    <div class="step-label">Profile</div>
                  </div>
                  <div class="step active">
                    <div class="step-indicator">3</div>
                    <div class="step-label">Settings</div>
                  </div>
                  <div class="step">
                    <div class="step-indicator">4</div>
                    <div class="step-label">Review</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- Large -->
            <div>
              <h3 class="h6 tw:mb-3 text-muted">Large (.steps-lg)</h3>
              <div class="steps steps-lg">
                <div class="steps-header">
                  <div class="step completed">
                    <div class="step-indicator"><i class="fa-solid fa-check"></i></div>
                    <div class="step-label">Account</div>
                  </div>
                  <div class="step completed">
                    <div class="step-indicator"><i class="fa-solid fa-check"></i></div>
                    <div class="step-label">Profile</div>
                  </div>
                  <div class="step active">
                    <div class="step-indicator">3</div>
                    <div class="step-label">Settings</div>
                  </div>
                  <div class="step">
                    <div class="step-indicator">4</div>
                    <div class="step-label">Review</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><div class="steps steps-sm">...</div></code> /
            <code><div class="steps steps-lg">...</div></code>
          </div>
        </div>
        <!-- ============================================
       Section 5: Step States
       ============================================ -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Step States</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>States:</strong> Completed (green circle, check icon), Active (white circle, blue border),
              Upcoming (gray translucent), and Error (red circle, X icon). States are managed via CSS classes
              <code>.completed</code>, <code>.active</code>, and <code>.error</code>.
            </p>
          </div>
          <div class="steps">
            <div class="steps-header">
              <div class="step completed">
                <div class="step-indicator"><i class="fa-solid fa-check"></i></div>
                <div class="step-label">Completed</div>
              </div>
              <div class="step active">
                <div class="step-indicator">2</div>
                <div class="step-label">Active</div>
              </div>
              <div class="step error">
                <div class="step-indicator"><i class="fa-solid fa-xmark"></i></div>
                <div class="step-label">Error</div>
              </div>
              <div class="step">
                <div class="step-indicator">4</div>
                <div class="step-label">Upcoming</div>
              </div>
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code>.step.completed</code> /
            <code>.step.active</code> /
            <code>.step.error</code> /
            <code>.step</code> (upcoming)
          </div>
        </div>
        <!-- ============================================
       Section 6: With Validation
       ============================================ -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">With Validation</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Cancelable events:</strong> Listen for <code>steps:beforeNext</code> and call
              <code>event.preventDefault()</code> to block advancement. This demo requires the
              checkbox to be checked before proceeding past step 1.
            </p>
          </div>
          <div class="steps" data-controller="steps" id="steps-validation">
            <div class="steps-header">
              <div class="step" data-steps-target="step" data-action="click->steps#goTo">
                <div class="step-indicator">1</div>
                <div class="step-label">Agreement</div>
              </div>
              <div class="step" data-steps-target="step" data-action="click->steps#goTo">
                <div class="step-indicator">2</div>
                <div class="step-label">Details</div>
              </div>
              <div class="step" data-steps-target="step" data-action="click->steps#goTo">
                <div class="step-indicator">3</div>
                <div class="step-label">Confirm</div>
              </div>
            </div>
            <div class="steps-content">
              <div class="steps-panel" data-steps-target="panel">
                <div class="card">
                  <div class="card-body">
                    <h3 class="h5 tw:mb-3">Terms & Conditions</h3>
                    <p class="text-muted tw:mb-3">Please read and accept the terms before continuing.</p>
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" id="val-agree" aria-describedby="val-error">
                      <label class="form-check-label" for="val-agree">
                        I agree to the Terms and Conditions
                      </label>
                    </div>
                    <p class="tw:text-danger tw:text-sm tw:mt-2 tw:hidden" id="val-error" role="alert">
                      You must agree to the terms before continuing.
                    </p>
                  </div>
                </div>
              </div>
              <div class="steps-panel" data-steps-target="panel">
                <div class="card">
                  <div class="card-body">
                    <h3 class="h5 tw:mb-3">Enter Details</h3>
                    <p class="text-muted">Fill in your information here.</p>
                  </div>
                </div>
              </div>
              <div class="steps-panel" data-steps-target="panel">
                <div class="card">
                  <div class="card-body">
                    <h3 class="h5 tw:mb-3">Confirmation</h3>
                    <p class="text-muted">All steps complete. Ready to submit.</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="steps-footer">
              <button class="btn btn-secondary" data-steps-target="backBtn"
                data-action="click->steps#back" type="button">Back</button>
              <button class="btn btn-primary" data-steps-target="nextBtn"
                data-action="click->steps#next" type="button">Continue</button>
            </div>
          </div>
          <!-- Inline validation script for demo purposes -->
          <script>
            document.addEventListener("DOMContentLoaded", () => {
              const stepsEl = document.getElementById("steps-validation")
              if (!stepsEl) return
              stepsEl.addEventListener("steps:beforeNext", (event) => {
                if (event.detail.index === 0) {
                  const checkbox = document.getElementById("val-agree")
                  const error = document.getElementById("val-error")
                  if (!checkbox.checked) {
                    event.preventDefault()
                    error.classList.remove("hidden")
                  } else {
                    error.classList.add("hidden")
                  }
                }
              })
            })
          </script>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code>data-action="steps:beforeNext->controller#validate"</code> — call
            <code>event.preventDefault()</code> to block
          </div>
        </div>
        <!-- ============================================
       Section 7: Non-Linear Mode
       ============================================ -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Non-Linear Navigation</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>data-steps-linear-value="false":</strong> Users can click any step indicator
              to jump directly to it, regardless of completion. Useful for tabed-style forms where
              sections are independent.
            </p>
          </div>
          <div class="steps" data-controller="steps" id="steps-nonlinear"
         data-steps-linear-value="false">
            <div class="steps-header">
              <div class="step" data-steps-target="step" data-action="click->steps#goTo">
                <div class="step-indicator">1</div>
                <div class="step-label">General</div>
              </div>
              <div class="step" data-steps-target="step" data-action="click->steps#goTo">
                <div class="step-indicator">2</div>
                <div class="step-label">Appearance</div>
              </div>
              <div class="step" data-steps-target="step" data-action="click->steps#goTo">
                <div class="step-indicator">3</div>
                <div class="step-label">Notifications</div>
              </div>
              <div class="step" data-steps-target="step" data-action="click->steps#goTo">
                <div class="step-indicator">4</div>
                <div class="step-label">Privacy</div>
              </div>
            </div>
            <div class="steps-content">
              <div class="steps-panel" data-steps-target="panel">
                <div class="card">
                  <div class="card-body">
                    <h3 class="h5 tw:mb-2">General Settings</h3>
                    <p class="text-muted tw:mb-0">Language, timezone, and regional preferences.</p>
                  </div>
                </div>
              </div>
              <div class="steps-panel" data-steps-target="panel">
                <div class="card">
                  <div class="card-body">
                    <h3 class="h5 tw:mb-2">Appearance</h3>
                    <p class="text-muted tw:mb-0">Theme, colours, and display options.</p>
                  </div>
                </div>
              </div>
              <div class="steps-panel" data-steps-target="panel">
                <div class="card">
                  <div class="card-body">
                    <h3 class="h5 tw:mb-2">Notifications</h3>
                    <p class="text-muted tw:mb-0">Email, push, and in-app notification preferences.</p>
                  </div>
                </div>
              </div>
              <div class="steps-panel" data-steps-target="panel">
                <div class="card">
                  <div class="card-body">
                    <h3 class="h5 tw:mb-2">Privacy</h3>
                    <p class="text-muted tw:mb-0">Data sharing, visibility, and consent settings.</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="steps-footer">
              <button class="btn btn-secondary" data-steps-target="backBtn"
                data-action="click->steps#back" type="button">Back</button>
              <button class="btn btn-primary" data-steps-target="nextBtn"
                data-action="click->steps#next" type="button">Continue</button>
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code>data-steps-linear-value="false"</code>
          </div>
        </div>
        <!-- ============================================
       Section 8: Initial Index (Resume)
       ============================================ -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Initial Index (Resume)</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>data-steps-index-value="2":</strong> Start the wizard at step 3. All preceding
              steps (1 and 2) are automatically marked as completed with green check indicators.
              Useful for resuming a partially completed workflow.
            </p>
          </div>
          <div class="steps" data-controller="steps" id="steps-resume"
         data-steps-index-value="2">
            <div class="steps-header">
              <div class="step" data-steps-target="step" data-action="click->steps#goTo">
                <div class="step-indicator">1</div>
                <div class="step-label">Account</div>
              </div>
              <div class="step" data-steps-target="step" data-action="click->steps#goTo">
                <div class="step-indicator">2</div>
                <div class="step-label">Profile</div>
              </div>
              <div class="step" data-steps-target="step" data-action="click->steps#goTo">
                <div class="step-indicator">3</div>
                <div class="step-label">Preferences</div>
              </div>
              <div class="step" data-steps-target="step" data-action="click->steps#goTo">
                <div class="step-indicator">4</div>
                <div class="step-label">Review</div>
              </div>
            </div>
            <div class="steps-content">
              <div class="steps-panel" data-steps-target="panel">
                <div class="card">
                  <div class="card-body">
                    <h3 class="h5 tw:mb-2">Account Setup</h3>
                    <p class="text-muted tw:mb-0">Already completed — click the step indicator to revisit.</p>
                  </div>
                </div>
              </div>
              <div class="steps-panel" data-steps-target="panel">
                <div class="card">
                  <div class="card-body">
                    <h3 class="h5 tw:mb-2">Profile Details</h3>
                    <p class="text-muted tw:mb-0">Already completed — click the step indicator to revisit.</p>
                  </div>
                </div>
              </div>
              <div class="steps-panel" data-steps-target="panel">
                <div class="card">
                  <div class="card-body">
                    <h3 class="h5 tw:mb-2">Preferences</h3>
                    <p class="text-muted tw:mb-0">You resumed here. Continue configuring your preferences.</p>
                  </div>
                </div>
              </div>
              <div class="steps-panel" data-steps-target="panel">
                <div class="card">
                  <div class="card-body">
                    <h3 class="h5 tw:mb-2">Review</h3>
                    <p class="text-muted tw:mb-0">Final review before completing setup.</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="steps-footer">
              <button class="btn btn-secondary" data-steps-target="backBtn"
                data-action="click->steps#back" type="button">Back</button>
              <button class="btn btn-primary" data-steps-target="nextBtn"
                data-action="click->steps#next" type="button">Continue</button>
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code>data-steps-index-value="2"</code> — steps 0 and 1 are auto-completed
          </div>
        </div>
      </div>
    </div>
  </div>
</div>