@if (isVisible) {
  <div
    class="sky-progress-indicator-item"
    [ngClass]="'sky-progress-indicator-item-status-' + statusName"
  >
    @if (showStatusMarker) {
      <sky-progress-indicator-status-marker [status]="status" />
    }

    <div class="sky-progress-indicator-item-content">
      @if (showTitle) {
        <div class="sky-progress-indicator-item-heading-wrapper" skyTrim>
          <span
            aria-level="2"
            class="sky-progress-indicator-item-heading"
            role="heading"
            [ngClass]="{
              'sky-deemphasized': statusName === 'pending',
              'sky-margin-inline-xs': !!helpPopoverContent
            }"
            [skyThemeClass]="{
              'sky-font-display-3': 'modern'
            }"
          >
            {{ formattedTitle }}
            @if (!helpKey && !helpPopoverContent) {
              <span class="sky-control-help-container" skyTrim
                ><ng-content select=".sky-control-help"></ng-content
              ></span>
            }
          </span>
          @if (helpKey || helpPopoverContent) {
            <sky-help-inline
              [helpKey]="helpKey"
              [labelText]="title"
              [popoverTitle]="helpPopoverTitle"
              [popoverContent]="helpPopoverContent"
            />
          }
        </div>
      }
      <div class="sky-progress-indicator-item-body">
        @if (statusName !== 'incomplete') {
          <ng-content />
        }
      </div>
    </div>
  </div>
}