Step Indicator v1.0.0

<div class="steps">

  <div class="steps__navigation">

    <ol role="list">
      <li>

        <a href="#section-1" class="steps__btn">

          <span class="steps__btn__container">

            <span class="steps__btn__count"><span class="visually-hidden">Step </span>1</span> 

            <span aria-hidden="true" class="steps__btn__icon steps__btn__icon--check"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg></span>

            <span aria-hidden="true" class="steps__btn__icon steps__btn__icon--edit"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"/></svg></span>

          </span>

          <span class="steps__btn__label">Fate Erat</span> 

          <span class="steps__btn__complete visually-hidden">(Completed)</span>

        </a>

      </li>
      <li>

        <a href="#section-2" class="steps__btn">

          <span class="steps__btn__container">

            <span class="steps__btn__count">2</span> 

            <span aria-hidden="true" class="steps__btn__icon steps__btn__icon--check"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg></span>

            <span aria-hidden="true" class="steps__btn__icon steps__btn__icon--edit"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"/></svg></span>

          </span>

          <span class="steps__btn__label">Unsectetur Adipiscing</span> 

          <span class="steps__btn__complete visually-hidden">(Completed)</span>
      
        </a>

      </li>
      <li>

        <a href="#section-3" class="steps__btn">

          <span class="steps__btn__container">

            <span class="steps__btn__count">3</span> 

            <span aria-hidden="true" class="steps__btn__icon steps__btn__icon--check"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg></span>

            <span aria-hidden="true" class="steps__btn__icon steps__btn__icon--edit"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"/></svg></span>

          </span>

          <span class="steps__btn__label">Dacus Velit</span> 

          <span class="steps__btn__complete visually-hidden">(Completed)</span>
          
        </a>

      </li>
      <li>

        <a href="#section-4" class="steps__btn">

          <span class="steps__btn__container">

            <span class="steps__btn__count">4</span>

            <span aria-hidden="true" class="steps__btn__icon steps__btn__icon--check"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg></span>

            <span aria-hidden="true" class="steps__btn__icon steps__btn__icon--edit"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"/></svg></span>

          </span>

          <span class="steps__btn__label">Aegna</span> 

          <span class="steps__btn__complete visually-hidden">(Completed)</span>

        </a>

      </li>
      <li>

        <a href="#section-5" class="steps__btn">

          <span class="steps__btn__container">

            <span class="steps__btn__count">5</span> 

            <span aria-hidden="true" class="steps__btn__icon steps__btn__icon--check"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg></span>

            <span aria-hidden="true" class="steps__btn__icon steps__btn__icon--edit"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"/></svg></span>

          </span>

          <span class="steps__btn__label">Nolutpat Mi</span> 

          <span class="steps__btn__complete visually-hidden">(Completed)</span>

        </a>

      </li>
    </ol> 

  </div>

  <section class="steps__section active" id="section-1">

    <h2>Fate Erat</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod, ante erat imperdiet velit, nec laoreet enim lacus a velit. <a href="#!">Nam luctus</a>, enim in interdum condimentum, nisl diam iaculis lorem, vel volutpat mi leo sit amet lectus. Praesent non odio bibendum magna bibendum accumsan.</p>

    <p>Fusce vel quam sollicitudin, semper lacus ac, malesuada mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent dapibus mi dui, imperdiet tempor tortor malesuada a. Pellentesque imperdiet dui et neque pulvinar, nec egestas urna mattis.</p>

  </section>

  <section class="steps__section" id="section-2">

    <h2>Unsectetur Adipiscing</h2>

    <p>Fusce vel quam sollicitudin, semper lacus ac, malesuada mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent dapibus mi dui, imperdiet tempor tortor malesuada a. Mauris elementum nisi at leo molestie finibus.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod, ante erat imperdiet velit, nec laoreet enim lacus a velit. <a href="#!">Nam luctus</a>, enim in interdum condimentum, nisl diam iaculis lorem, vel volutpat mi leo sit amet lectus. Praesent non odio bibendum magna bibendum accumsan.</p>

  </section>

  <section class="steps__section" id="section-3">

    <h2>Dacus Velit</h2>

    <p>Consectetur adipiscing elit. Nam euismod, ante erat imperdiet velit, nec laoreet enim lacus a velit. <a href="#!">Nuctus</a>, enim in interdum condimentum, nisl diam iaculis lorem, vel volutpat mi leo sit amet lectus. Praesent non odio bibendum magna bibendum accumsan.</p>

    <p>Pellentesque imperdiet dui et neque pulvinar, nec egestas urna mattis.</p>

  </section>

  <section class="steps__section" id="section-4">

    <h2>Aegna</h2>

    <p>Nam euismod, ante erat imperdiet velit, nec laoreet enim lacus a velit. <a href="#!">Nam luctus</a>, enim in interdum condimentum, nisl diam iaculis lorem, vel volutpat mi leo sit amet lectus. Praesent non odio bibendum magna bibendum accumsan.</p>

  </section>

  <section class="steps__section" id="section-5">

    <h2>Nolutpat Mi</h2>

    <p>Nam euismod, ante erat imperdiet velit, nec laoreet enim lacus a velit. <a href="#!">Nam luctus</a>, enim in interdum condimentum, nisl diam iaculis lorem, vel volutpat mi leo sit amet lectus. Praesent non odio bibendum magna bibendum accumsan.</p>

    <p>Consectetur adipiscing elit. Nam euismod, ante erat imperdiet velit, nec laoreet enim lacus a velit. <a href="#!">Nuctus</a>, enim in interdum condimentum, nisl diam iaculis lorem, vel volutpat mi leo sit amet lectus. Praesent non odio bibendum magna bibendum accumsan.</p>

    <p>Pellentesque imperdiet dui et neque pulvinar, nec egestas urna mattis.</p>

  </section>

</div>

/*!

  Radancy Component Library: Step Indicator
  Contributor(s): 
  Michael "Spell" Spellacy

  Dependencies: Sass

*/

.steps {

  // Component Variables

  --steps-color-active: #CCC;
  --steps-color-complete: #008000;
  --steps-color-light: #FFF;
  --steps-color-dark: #000;
  --steps-color-neutral: #767676;
  --steps-color-primary: #6F00EF;

  --scroll-color-track: #EEE;
  --scroll-color-thumb: var(--steps-color-primary);
  --scroll-color-active: #666;

  $item-count: 5;

  @keyframes animateCount {

    0% {
    opacity: 0;
    }
  
    50% {
    transform: scale(1.4);
    }
  
    100% {
    opacity: 1;
    transform: scale(1);
    }

  }

  @keyframes animateRule {

    0% {
    width: 0;
    }

    100% {
    width: 100%;
    }

  }

  ol {
  display: grid;
  grid-auto-flow: column;
  list-style: none;
  margin: 0;
  padding: 0;
  }

  li {
  scroll-snap-align: center;
  min-width: calc(150rem / 16);
  }

  // Progress 

  &__navigation {
  overflow-x: auto;
  padding: 2em 0 1em;
  scroll-snap-type: inline mandatory;

  // Fallback Scrollbar

  scrollbar-color: var(--scroll-color-thumb) var(--scroll-color-track);
  scrollbar-width: thin;

    // TODO: Add native scrollbar hover: https://nerdy.dev/notebook/custom-scrollbar.html 

    @supports #{"\selector(::-webkit-scrollbar)"} {

      scrollbar-color: initial;
      scrollbar-width: auto;

      &::-webkit-scrollbar {
      height: calc(8rem / 16);
      }

      &::-webkit-scrollbar-track, &::-webkit-scrollbar-thumb {
      border-radius: 100vw;
      }

      &::-webkit-scrollbar-track {
      background-color: var(--scroll-color-track);
      }

      &::-webkit-scrollbar-thumb {
      background-color: var(--scroll-color-thumb);
      
        &:hover {
        background-color: var(--scroll-color-active);
        }

      }
  
    }

  }

  // Step (Button)

  &__btn {
  background-color: transparent;
  border: 0;
  color: var(--steps-color-dark);
  display: grid;
  font: inherit;
  grid-template-rows: 1fr 1fr; 
  padding: 0;
  text-align: center;
  text-decoration: none;

    &:not([href]) {
    color: var(--steps-color-neutral);
    pointer-events: none;
    }

    // Line

    &::before {
    align-self: center;
    animation-duration: 800ms;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    background-color: var(--steps-color-neutral);
    content: "";
    display: block;
    grid-area: 1 / 1;
    height: 2px;

      @media (prefers-reduced-motion: no-preference) {

        animation-name: animateRule;
        width: 0;

      }

      @for $i from 1 through $item-count {

        li:nth-child(#{$i}) & {
    
          animation-delay: #{($i - 1) * 800ms};
    
        }
  
      }

    }

    &__complete {
    display: none;
    }

    &__container {
    animation-duration: 300ms;
    animation-fill-mode: forwards;
    display: grid;
    grid-area: 1 / 1;
    justify-self: center;
    place-items: center;
    transform-origin: center;
    width: fit-content;

      @media (prefers-reduced-motion: no-preference) {

        animation-name: animateCount;
        opacity: 0;

      }

      @for $i from 1 through $item-count {

        li:nth-child(#{$i}) & {
      
          animation-delay: #{690ms * $i};
      
        }
    
      }

    }

    // Interactive State(s)

    &:focus &__container, &:hover &__container {
    transform-origin: center;
    transform: scale(1.2);
    transition: transform 300ms ease-in-out;
    }

    &:focus &__count, &:hover &__count, &:visited &__count {
    background-color: var(--steps-color-primary);
    }
  
    &:focus &__icon--edit svg, &:hover &__icon--edit svg, &:visited &__icon--edit svg {
    stroke: var(--steps-color-primary);
    }

    // Count

    &__count {
    background-color: var(--steps-color-neutral);
    border-radius: 100vw;
    color: var(--steps-color-light);
    display: grid;
    font-weight: 700;
    grid-area: 1 / 1;
    height: calc(56rem / 16);
    place-items: center;
    width: calc(56rem / 16);

      [aria-current="step"] & {
      background-color: var(--steps-color-primary);
      }

    }

    // Label

    &__label {
    align-self: center;
    line-height: normal;
    }

    // Checkmark & Edit Icon

    &__icon {
    display: none;
    grid-area: 1 / 1;
    inset-inline-start: calc(28rem/16);
    place-self: center;
    position: relative;
    width: calc(25rem/16);

      @media (scripting: enabled) {

        &--edit {
        display: block;
        }

      }

      svg {
      fill: #fff;
      stroke: var(--steps-color-neutral);
      stroke-width: 20px;
      }

    }

    // States 
    // Note: May need more refinement.

    &--finished &__count {
    background-color: var(--steps-color-complete);
    }
      
    &--finished &__complete, 
    &--finished[aria-pressed="false"] &__icon--check, 
    &--finished[aria-pressed="true"] &__icon--edit, 
    &:not(&--finished) &__icon--edit, 
    &:not(&--finished):not([aria-pressed="true"]) &__icon--edit {
   // display: block;
    }

    &--finished &__icon svg {
    stroke: var(--steps-color-complete);
    }

    &:not(&--finished):not([aria-pressed="true"]) &__icon--edit svg {
    //stroke: var(--steps-color-neutral);
    }
      
    &:not(&--finished) &__icon--edit svg {
    // stroke: var(--steps-color-primary);
    }

  }

  // Sections

  &__section {
  background-color: var(--steps-color-active);
  border-radius: 5px;
  margin-block-start: 1em;
  padding: 1em;

    @media (scripting: enabled) {

      &:not(.active) {

        display: none;

      }

    }

    &:target {
    outline: 3px solid var(--steps-color-primary);
    }

  }

}

/*!

  Radancy Component Library: Step Indicator

  Contributor(s):
  Michael "Spell" Spellacy

*/

(function() {

  "use strict";

  // Display which component is in use via console:

  console.log("%c Step Indicator v1.0.0 in use. ", "background: #6e00ee; color: #fff");

  // Basic functionality for multi-step navigation and form buttons

  let stepsBtn = document.querySelectorAll(".steps__btn");
  let stepsSection = document.querySelectorAll(".steps__section");

  stepsBtn.forEach(function(button, index) {

    let dataTarget = button.getAttribute("href").replace("#", "");
    
    button.setAttribute("data-target", dataTarget);

    if (index == 0) {

      button.setAttribute("aria-current", "step");

    }

    if (index !== 0) {

      button.removeAttribute("href");

    }

  });

  stepsSection.forEach(function(section) {

    // section.classList.remove("active");

    var nextStep = document.createElement("button");

    nextStep.textContent = "Next";

    section.append(nextStep);

    nextStep.addEventListener("click", function() {





// Remove aria-aria-pressed, where found.

stepsBtn.forEach(function(button) {

  button.removeAttribute("aria-current");

});

// Remove active state from all sections.

stepsSection.forEach(function(section) {

  section.classList.remove("active");

});

// Get section and button targets

//let stepsBtnTarget = document.querySelector(".steps__btn[aria-controls=" + button.getAttribute("aria-controls") + "]");
let stepsSectionTarget = document.querySelector("#" + button.getAttribute("data-target"));

// Apply aria-pressed to selected step in navigation

//stepsBtnTarget.setAttribute("aria-current", "step");

// Load selected section

stepsSectionTarget.classList.add("active");
// stepsSectionTarget.setAttribute("tabindex", "-1");
// stepsSectionTarget.focus();

//});













    });

  });



})();