Test Tutorial 4

<step>

<step number>Step 1</step number>

<step header>This is the step header</step header>

<step content>This is where the step content would go.

It should hopefully preserve all formatting.

To test this out, here's some code:

.overflow-indicators {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 1;
  pointer-events: none;
}

.overflow-indicator {
  position: absolute;
  left: 0%;
  top: 0%;
  right: auto;
  bottom: 0%;
  width: 4rem;
  background-image: linear-gradient(90deg, var(--_theme---background), hsla(0, 0.00%, 0.00%, 0.00));
  opacity: 0;
  transition-property: opacity;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(.25, .46, .45, .94);
}

.overflow-indicator.is-left {}

.overflow-indicator.is-right {
  left: auto;
  top: 0%;
  right: 0%;
  bottom: 0%;
  background-image: linear-gradient(270deg, var(--_theme---background), hsla(0, 0.00%, 0.00%, 0.00));
}

.has-left-overflow .overflow-indicator.is-left {
  opacity: 1;
}

.has-right-overflow .overflow-indicator.is-right {
  opacity: 1;
}

To test even further, here is an image:

</step content>

</step>

‍

<step>

<step number>Step 2</step number>

<step header>This is the step header 2</step header>

<step content>This is where the step content would go.

It should hopefully preserve all formatting.

To test this out, here's some other code:

// Define selectors for containers that should have overflow indicators
export const OVERFLOW_CONTAINERS = {
  filters: '.filters_form',
};

/**
 * Initializes overflow indicators for all defined container types.
 * Requires HTML structure:
 * <div class="parent">
 *   <div class="[container-class]"><!-- Scrolling content --></div>
 *   <div class="overflow-indicators">
 *     <div class="overflow-indicator is-left"></div>
 *     <div class="overflow-indicator is-right"></div>
 *   </div>
 * </div>
 */
export function initOverflowIndicators() {
  // Combine all container selectors into one query
  const selectors = Object.values(OVERFLOW_CONTAINERS).join(', ');
  const containers = document.querySelectorAll(selectors);
  
  containers.forEach(container => {
    const parentContainer = container.parentElement;
    if (!parentContainer) return;

    function updateIndicators() {
      // Check if container can scroll in either direction
      const hasLeftOverflow = container.scrollLeft > 0;
      const hasRightOverflow = container.scrollLeft < (container.scrollWidth - container.clientWidth);
      
      // Toggle classes that control the opacity of the gradient overlays
      parentContainer.classList.toggle('has-left-overflow', hasLeftOverflow);
      parentContainer.classList.toggle('has-right-overflow', hasRightOverflow);
    }
    
    // Update indicators on scroll and window resize
    container.addEventListener('scroll', updateIndicators);
    window.addEventListener('resize', updateIndicators);
    
    // Check initial state
    updateIndicators();
  });
}

To test even further, here is an image:

</step content>

</step>

‍