Step Group

<sl-step-group>
  <sl-step
    label="First"
    state="danger"
    active
  ></sl-step>
  <sl-step
    state="complete"
    label="Second"
  ></sl-step>
  <sl-step
    state="warning"
    label="Third"
  ></sl-step>
  <sl-step
    state="default"
    label="Fourth"
  ></sl-step>
</sl-step-group>

<sl-step-group id="example_1" >
  <sl-step
    label="First"
    active
  ></sl-step>
  <sl-step
    label="Second"
  ></sl-step>
  <sl-step
    label="Third"
  ></sl-step>
  <sl-step
    label="Fourth"
  ></sl-step>
  <sl-step
    label="Fifth"
  ></sl-step>
   <sl-step
    label="Sixth"
  ></sl-step>
</sl-step-group>

<sl-button id="example_1_disable" size="small">Disable</sl-button>
<sl-button id="example_1_enable" size="small">Enable</sl-button>
<sl-button id="example_1_next" size="small">Next</sl-button>
<sl-button id="example_1_prev" size="small">Prev</sl-button>
<sl-button id="example_1_error" size="small">Error</sl-button>
<sl-button id="example_1_warning" size="small">Warning</sl-button>
<sl-button id="example_1_default" size="small">Default</sl-button>
<sl-button id="example_1_complete" size="small">Complete</sl-button>

<script>
  const steps = document.querySelector('#example_1');

  const disableBtn = document.querySelector('#example_1_disable');
  disableBtn.addEventListener('click', () => steps.disableSteps([1,2,3,4]));

  const enableBtn = document.querySelector('#example_1_enable');
  enableBtn.addEventListener('click', () => steps.enableSteps([1,2,3,4]));

  const nextBtn = document.querySelector('#example_1_next');
  nextBtn.addEventListener('click', () => steps.progressToNext());

  const prevBtn = document.querySelector('#example_1_prev');
  prevBtn.addEventListener('click', () => steps.progressToPrev());

  const errorBtn = document.querySelector('#example_1_error');
  errorBtn.addEventListener('click', () => steps.setStepsDanger([3]));

  const warningBtn = document.querySelector('#example_1_warning');
  warningBtn.addEventListener('click', () => steps.setStepsWarning([3]));

  const defaultBtn = document.querySelector('#example_1_default');
  defaultBtn.addEventListener('click', () => steps.setStepsDefault([3]));

  const completeBtn = document.querySelector('#example_1_complete');
  completeBtn.addEventListener('click', () => steps.setStepsComplete([3]));

  document.querySelectorAll('#example_1 sl-step').forEach(x => {
    x.addEventListener('step-activate', function(e) {
      const index = e.detail?.index;
      alert(`Step ${index} is selected`);
    });
  });
</script>

<sl-step-group id="example_2" horizonal>
  <sl-step
    label="First"
    active
    horizontal
  ></sl-step>
  <sl-step
    label="Second"
    horizontal
  ></sl-step>
  <sl-step
    label="Third"
    horizontal
  ></sl-step>
  <sl-step
    label="Fourth"
    horizontal
  ></sl-step>
  <sl-step
    label="Fifth"
    horizontal
  ></sl-step>
   <sl-step
    label="Sixth"
    horizontal
  ></sl-step>
</sl-step-group>

<br>
<sl-button id="example_2_disable" size="small">Disable</sl-button>
<sl-button id="example_2_enable" size="small">Enable</sl-button>
<sl-button id="example_2_next" size="small">Next</sl-button>
<sl-button id="example_2_prev" size="small">Prev</sl-button>
<sl-button id="example_2_error" size="small">Error</sl-button>
<sl-button id="example_2_warning" size="small">Warning</sl-button>
<sl-button id="example_2_default" size="small">Default</sl-button>
<sl-button id="example_2_complete" size="small">Complete</sl-button>

<script>
  const steps = document.querySelector('#example_2');

  const disableBtn = document.querySelector('#example_2_disable');
  disableBtn.addEventListener('click', () => steps.disableSteps([1,2,3,4]));

  const enableBtn = document.querySelector('#example_2_enable');
  enableBtn.addEventListener('click', () => steps.enableSteps([1,2,3,4]));

  const nextBtn = document.querySelector('#example_2_next');
  nextBtn.addEventListener('click', () => steps.progressToNext());

  const prevBtn = document.querySelector('#example_2_prev');
  prevBtn.addEventListener('click', () => steps.progressToPrev());

  const errorBtn = document.querySelector('#example_2_error');
  errorBtn.addEventListener('click', () => steps.setStepsDanger([3]));

  const warningBtn = document.querySelector('#example_2_warning');
  warningBtn.addEventListener('click', () => steps.setStepsWarning([3]));

  const defaultBtn = document.querySelector('#example_2_default');
  defaultBtn.addEventListener('click', () => steps.setStepsDefault([3]));

  const completeBtn = document.querySelector('#example_2_complete');
  completeBtn.addEventListener('click', () => steps.setStepsComplete([3]));

  document.querySelectorAll('#example_2 sl-step').forEach(x => {
    x.addEventListener('step-activate', function(e) {
      const index = e.detail?.index;
      alert(`Step ${index} is selected`);
    });
  });
</script>