Step Group

<gstock-step-group> | GstockStepGroup

Color

Use the color attribute to set change color each step in the step group.

Step 1 Step 2 Step 3 Step 4 This is the step 1 panel content. This is the step 2 panel content. This is the step 3 panel content. This is the step 4 panel content.
Step 1 Step 2 Step 3 Step 4 This is the step 1 panel content. This is the step 2 panel content. This is the step 3 panel content. This is the step 4 panel content. 
<gstock-step-group color="primary">
  <gstock-step slot="nav" panel="step-1" active>Step 1</gstock-step>
  <gstock-step slot="nav" panel="step-2">Step 2</gstock-step>
  <gstock-step slot="nav" panel="step-3">Step 3</gstock-step>
  <gstock-step slot="nav" panel="step-4">Step 4</gstock-step>

  <gstock-step-panel name="step-1">This is the step 1 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-2">This is the step 2 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-3">This is the step 3 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-4">This is the step 4 panel content.</gstock-step-panel>
</gstock-step-group>

<br />

<gstock-step-group color="secondary">
  <gstock-step slot="nav" panel="step-1" active>Step 1</gstock-step>
  <gstock-step slot="nav" panel="step-2">Step 2</gstock-step>
  <gstock-step slot="nav" panel="step-3">Step 3</gstock-step>
  <gstock-step slot="nav" panel="step-4">Step 4</gstock-step>

  <gstock-step-panel name="step-1">This is the step 1 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-2">This is the step 2 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-3">This is the step 3 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-4">This is the step 4 panel content.</gstock-step-panel>
</gstock-step-group>

Size

Use the size attribute to change the size each step in the step group.

Use size="small" to position steps above the content.

Step 1 Step 2 Step 3 Step 4 This is the step 1 panel content. This is the step 2 panel content. This is the step 3 panel content. This is the step 4 panel content. 
<gstock-step-group size="small">
  <gstock-step slot="nav" panel="step-1" active>Step 1</gstock-step>
  <gstock-step slot="nav" panel="step-2">Step 2</gstock-step>
  <gstock-step slot="nav" panel="step-3">Step 3</gstock-step>
  <gstock-step slot="nav" panel="step-4">Step 4</gstock-step>

  <gstock-step-panel name="step-1">This is the step 1 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-2">This is the step 2 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-3">This is the step 3 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-4">This is the step 4 panel content.</gstock-step-panel>
</gstock-step-group>

Use size="medium" to position steps above the content. This is the default.

Step 1 Step 2 Step 3 Step 4 This is the step 1 panel content. This is the step 2 panel content. This is the step 3 panel content. This is the step 4 panel content. 
<gstock-step-group size="medium">
  <gstock-step slot="nav" panel="step-1" active>Step 1</gstock-step>
  <gstock-step slot="nav" panel="step-2">Step 2</gstock-step>
  <gstock-step slot="nav" panel="step-3">Step 3</gstock-step>
  <gstock-step slot="nav" panel="step-4">Step 4</gstock-step>

  <gstock-step-panel name="step-1">This is the step 1 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-2">This is the step 2 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-3">This is the step 3 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-4">This is the step 4 panel content.</gstock-step-panel>
</gstock-step-group>

Use size="large" to position steps above the content.

Step 1 Step 2 Step 3 Step 4 This is the step 1 panel content. This is the step 2 panel content. This is the step 3 panel content. This is the step 4 panel content. 
<gstock-step-group size="large">
  <gstock-step slot="nav" panel="step-1" active>Step 1</gstock-step>
  <gstock-step slot="nav" panel="step-2">Step 2</gstock-step>
  <gstock-step slot="nav" panel="step-3">Step 3</gstock-step>
  <gstock-step slot="nav" panel="step-4">Step 4</gstock-step>

  <gstock-step-panel name="step-1">This is the step 1 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-2">This is the step 2 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-3">This is the step 3 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-4">This is the step 4 panel content.</gstock-step-panel>
</gstock-step-group>

Placement

Use the placement attribute to display the step group horizontally or vertically. The supported values are top, bottom, start or end.

Use placement="top" to position steps above the content. This is the default.

Step 1 Step 2 Step 3 Step 4 This is the step 1 panel content. This is the step 2 panel content. This is the step 3 panel content. This is the step 4 panel content. 
<gstock-step-group placement="top">
  <gstock-step slot="nav" panel="step-1" active>Step 1</gstock-step>
  <gstock-step slot="nav" panel="step-2">Step 2</gstock-step>
  <gstock-step slot="nav" panel="step-3">Step 3</gstock-step>
  <gstock-step slot="nav" panel="step-4">Step 4</gstock-step>

  <gstock-step-panel name="step-1">This is the step 1 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-2">This is the step 2 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-3">This is the step 3 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-4">This is the step 4 panel content.</gstock-step-panel>
</gstock-step-group>

Use placement="bottom" to position steps below the content.

Step 1 Step 2 Step 3 Step 4 This is the step 1 panel content. This is the step 2 panel content. This is the step 3 panel content. This is the step 4 panel content. 
<gstock-step-group placement="bottom">
  <gstock-step slot="nav" panel="step-1" active>Step 1</gstock-step>
  <gstock-step slot="nav" panel="step-2">Step 2</gstock-step>
  <gstock-step slot="nav" panel="step-3">Step 3</gstock-step>
  <gstock-step slot="nav" panel="step-4">Step 4</gstock-step>

  <gstock-step-panel name="step-1">This is the step 1 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-2">This is the step 2 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-3">This is the step 3 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-4">This is the step 4 panel content.</gstock-step-panel>
</gstock-step-group>

Use placement="start" to position steps at the start in line.

Step 1 Step 2 Step 3 Step 4 This is the step 1 panel content. This is the step 2 panel content. This is the step 3 panel content. This is the step 4 panel content. 
<gstock-step-group placement="start">
  <gstock-step slot="nav" panel="step-1" active>Step 1</gstock-step>
  <gstock-step slot="nav" panel="step-2">Step 2</gstock-step>
  <gstock-step slot="nav" panel="step-3">Step 3</gstock-step>
  <gstock-step slot="nav" panel="step-4">Step 4</gstock-step>

  <gstock-step-panel name="step-1">This is the step 1 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-2">This is the step 2 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-3">This is the step 3 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-4">This is the step 4 panel content.</gstock-step-panel>
</gstock-step-group>

Use placement="end" to position steps at the end in line.

Step 1 Step 2 Step 3 Step 4 This is the step 1 panel content. This is the step 2 panel content. This is the step 3 panel content. This is the step 4 panel content. 
<gstock-step-group placement="end">
  <gstock-step slot="nav" panel="step-1" active>Step 1</gstock-step>
  <gstock-step slot="nav" panel="step-2">Step 2</gstock-step>
  <gstock-step slot="nav" panel="step-3">Step 3</gstock-step>
  <gstock-step slot="nav" panel="step-4">Step 4</gstock-step>

  <gstock-step-panel name="step-1">This is the step 1 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-2">This is the step 2 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-3">This is the step 3 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-4">This is the step 4 panel content.</gstock-step-panel>
</gstock-step-group>

Scroll controls

Use the scroll-controls attribute to show navigation buttons in start and end positions when there are more steps than space allows, the nav will be scrollable.

Step 1 Step 2 Step 3 Step 4 Step 5 Step 6 Step 7 Step 8 This is the step 1 panel content. This is the step 2 panel content. This is the step 3 panel content. This is the step 4 panel content. This is the step 5 panel content. This is the step 6 panel content. This is the step 7 panel content. This is the step 8 panel content. 
<gstock-step-group scroll-controls>
  <gstock-step slot="nav" panel="step-1" active>Step 1</gstock-step>
  <gstock-step slot="nav" panel="step-2">Step 2</gstock-step>
  <gstock-step slot="nav" panel="step-3">Step 3</gstock-step>
  <gstock-step slot="nav" panel="step-4">Step 4</gstock-step>
  <gstock-step slot="nav" panel="step-5">Step 5</gstock-step>
  <gstock-step slot="nav" panel="step-6">Step 6</gstock-step>
  <gstock-step slot="nav" panel="step-7">Step 7</gstock-step>
  <gstock-step slot="nav" panel="step-8">Step 8</gstock-step>

  <gstock-step-panel name="step-1">This is the step 1 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-2">This is the step 2 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-3">This is the step 3 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-4">This is the step 4 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-5">This is the step 5 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-6">This is the step 6 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-7">This is the step 7 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-8">This is the step 8 panel content.</gstock-step-panel>
</gstock-step-group>

<style>
  gstock-step-group::part(base) {
    max-width: 500px;
  }
</style>

Use the next and previous methods to navigate programmatically by sliding through the steps.

Step 1 Step 2 Step 3 Step 4 This is the step 1 panel content. This is the step 2 panel content. This is the step 3 panel content. This is the step 4 panel content. 
<gstock-step-group>
  <gstock-step slot="nav" panel="step-1" active>Step 1</gstock-step>
  <gstock-step slot="nav" panel="step-2">Step 2</gstock-step>
  <gstock-step slot="nav" panel="step-3" disabled>Step 3</gstock-step>
  <gstock-step slot="nav" panel="step-4">Step 4</gstock-step>
</gstock-step-group>

  <gstock-step-panel name="step-1">This is the step 1 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-2">This is the step 2 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-3">This is the step 3 panel content.</gstock-step-panel>
  <gstock-step-panel name="step-4">This is the step 4 panel content.</gstock-step-panel>

<gstock-icon-button icon="chevron-left" variant="outlined" size="small"></gstock-icon-button>
<gstock-icon-button icon="chevron-right" variant="outlined" size="small"></gstock-icon-button>
<div class="current-step"></div>

<script type="module">
  const stepGroup = document.querySelector('gstock-step-group');
  const previousButton = document.querySelector('gstock-icon-button[icon=chevron-left]');
  const nextButton = document.querySelector('gstock-icon-button[icon=chevron-right]');
  const currentStep = document.querySelector('.current-step');

  function changeNavigationStatus(stepGroupEl) {
    const activeStep = stepGroupEl.getActiveStep();
    currentStep.innerHTML = `<span>Current Step: ${activeStep?.panel}<span>`;

    if (activeStep.panel === "step-1") {
      previousButton.disabled = true;
      nextButton.disabled = false;
    }

    if (activeStep.panel === "step-4") {
      previousButton.disabled = false;
      nextButton.disabled = true;
    }

    if (activeStep.panel !== "step-1" && activeStep.panel !== "step-4") {
      previousButton.disabled = false;
      nextButton.disabled = false;
    }
  }

  const whenAllDefined = Promise.all([
    customElements.whenDefined('gstock-step'),
    customElements.whenDefined('gstock-step-group'),
    customElements.whenDefined('gstock-step-panel'),
  ]).then(() => {
    changeNavigationStatus(stepGroup);

    stepGroup.addEventListener('gstock-step-show-event', (event) => {
      changeNavigationStatus(event.target);
    });

    previousButton.addEventListener('click', () => {
      stepGroup.previous();
    });

    nextButton.addEventListener('click', () => {
      stepGroup.next();
    });
  });
</script>