src/components/ui/Stepper.astro
<!-- blurr-lint-disable A2 -->
---
// Stepper, recovered from blurr-components.pages.dev
---
<div class="stepper stepper--horizontal stepper--md" data-component="stepper" data-current="1" role="list" aria-label="Stappen"> <div class="stepper__step stepper__step--completed" role="listitem" data-step="0"> <!-- Node --> <div class="stepper__node"> <svg class="stepper__check" width="14" height="14" viewBox="0 0 14 14" fill="none"> <path d="M2.5 7l3 3 5.5-5.5" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </div> <!-- Connector line --> <div class="stepper__line"> <div class="stepper__line-fill"></div> </div> <!-- Text --> <div class="stepper__text"> <span class="stepper__label">Account aanmaken</span> <span class="stepper__desc">E-mail en wachtwoord</span> </div> </div><div class="stepper__step stepper__step--active" role="listitem" aria-current="step" data-step="1"> <!-- Node --> <div class="stepper__node"> <span class="stepper__num">2</span> </div> <!-- Connector line --> <div class="stepper__line"> <div class="stepper__line-fill"></div> </div> <!-- Text --> <div class="stepper__text"> <span class="stepper__label">Bedrijfsgegevens</span> <span class="stepper__desc">Naam en sector</span> </div> </div><div class="stepper__step" role="listitem" data-step="2"> <!-- Node --> <div class="stepper__node"> <span class="stepper__num">3</span> </div> <!-- Connector line --> <div class="stepper__line"> <div class="stepper__line-fill"></div> </div> <!-- Text --> <div class="stepper__text"> <span class="stepper__label">Betaling</span> <span class="stepper__desc">Kies je plan</span> </div> </div><div class="stepper__step" role="listitem" data-step="3"> <!-- Node --> <div class="stepper__node"> <span class="stepper__num">4</span> </div> <!-- Connector line --> <!-- Text --> <div class="stepper__text"> <span class="stepper__label">Bevestiging</span> <span class="stepper__desc">Je bent er bijna</span> </div> </div> </div>
<style>
.stepper--horizontal{display:flex;align-items:flex-start}
.stepper--horizontal .stepper__step{display:flex;flex-direction:column;align-items:center;flex:1;position:relative;text-align:center}
.stepper--horizontal .stepper__node{position:relative;z-index:1}
.stepper--horizontal .stepper__line{position:absolute;top:0;left:calc(50% + 20px);right:calc(-50% + 20px);height:2px;background:#0000001a;overflow:hidden;top:20px;transform:translateY(-50%)}
.stepper--horizontal .stepper__text{margin-top:.75rem;display:flex;flex-direction:column;gap:.125rem}
.stepper--vertical{display:flex;flex-direction:column;gap:0}
.stepper--vertical .stepper__step{display:flex;align-items:flex-start;gap:1rem;position:relative;padding-bottom:2rem}
.stepper--vertical .stepper__step:last-child{padding-bottom:0}
.stepper--vertical .stepper__line{position:absolute;left:19px;top:40px;bottom:0;width:2px;background:#0000001a;overflow:hidden}
.stepper--vertical .stepper__text{padding-top:.25rem;display:flex;flex-direction:column;gap:.125rem}
.stepper__node{width:40px;height:40px;border-radius:50%;border:2px solid rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--color-bg, #fff);color:var(--color-muted, #6b7280);transition:border-color .25s,background .25s,color .25s}
.stepper--sm .stepper__node{width:32px;height:32px}
.stepper--lg .stepper__node{width:48px;height:48px}
.stepper__step--active .stepper__node,.stepper__step--completed .stepper__node{border-color:var(--color-accent, #6366f1);background:var(--color-accent, #6366f1);color:#fff}
.stepper__line-fill{height:100%;width:0%;background:var(--color-accent, #6366f1);transition: transform .4s,height .4s}
.stepper--horizontal .stepper__step--completed .stepper__line-fill{width:100%}
.stepper--vertical .stepper__line-fill{width:100%;height:0%}
.stepper--vertical .stepper__step--completed .stepper__line-fill{height:100%}
.stepper__num{font-size:.8125rem;font-weight:700;font-feature-settings:"tnum"}
.stepper__label{font-size:.875rem;font-weight:600;color:#0006;transition:color .2s}
.stepper--sm .stepper__label{font-size:.8125rem}
.stepper--lg .stepper__label{font-size:1rem}
.stepper__step--active .stepper__label,.stepper__step--completed .stepper__label{color:var(--color-primary, #0a0a0a)}
.stepper__desc{font-size:.8125rem;color:var(--color-muted, #6b7280);line-height:1.4}
.stepper__step--clickable{cursor:pointer}
.stepper__step--clickable:hover .stepper__node{border-color:var(--color-accent, #6366f1)}
.stepper--horizontal{flex-direction:column;gap:0}
.stepper--horizontal .stepper__step{flex-direction:row;text-align:left;align-items:center;flex:none;padding-bottom:1.5rem;position:relative}
.stepper--horizontal .stepper__line{position:absolute;inset:40px auto 0 19px;width:2px;height:auto;transform:none}
.stepper--horizontal .stepper__text{margin-top:0}
.stepper--horizontal .stepper__step--completed .stepper__line-fill{width:100%;height:100%}
</style>