fix(material/stepper): handle empty label in horizontal stepper (#31665)

Fixes that the horizontal stepper was leaving a blank space if the step's label is empty.

Fixes #31655.

Author: crisbeto

goldens/material/stepper/index.api.md

@@ -82,6 +82,12 @@ export class MatStepHeader extends CdkStepHeader implements AfterViewInit, OnDes
     // (undocumented)
     _getDefaultTextForState(state: StepState): string;
     _getHostElement(): HTMLElement;
+    // (undocumented)
+    protected _hasEmptyLabel(): boolean;
+    // (undocumented)
+    protected _hasErrorLabel(): boolean;
+    // (undocumented)
+    protected _hasOptionalLabel(): boolean;
     iconOverrides: {
         [key: string]: TemplateRef<MatStepperIconContext>;
     };

src/material/stepper/step-header.html

@@ -41,11 +41,11 @@
     <div class="mat-step-text-label">{{label}}</div>
   }
 
-  @if (optional && state != 'error') {
+  @if (_hasOptionalLabel()) {
     <div class="mat-step-optional">{{_intl.optionalLabel}}</div>
   }
 
-  @if (state === 'error') {
+  @if (_hasErrorLabel()) {
     <div class="mat-step-sub-label-error">{{errorMessage}}</div>
   }
 </div>

src/material/stepper/step-header.scss

@@ -143,6 +143,10 @@ $fallbacks: m3-stepper.get-tokens();
     font-size: token-utils.slot(stepper-header-selected-state-label-text-size, $fallbacks);
     font-weight: token-utils.slot(stepper-header-selected-state-label-text-weight, $fallbacks);
   }
+
+  .mat-step-header-empty-label & {
+    min-width: 0;
+  }
 }
 
 .mat-step-text-label {

src/material/stepper/step-header.ts

@@ -34,6 +34,7 @@ import {_CdkPrivateStyleLoader, _VisuallyHiddenLoader} from '@angular/cdk/privat
   styleUrl: 'step-header.css',
   host: {
     'class': 'mat-step-header',
+    '[class.mat-step-header-empty-label]': '_hasEmptyLabel()',
     '[class]': '"mat-" + (color || "primary")',
     'role': 'tab',
   },
@@ -140,4 +141,21 @@ export class MatStepHeader extends CdkStepHeader implements AfterViewInit, OnDes
     }
     return state;
   }
+
+  protected _hasEmptyLabel() {
+    return (
+      !this._stringLabel() &&
+      !this._templateLabel() &&
+      !this._hasOptionalLabel() &&
+      !this._hasErrorLabel()
+    );
+  }
+
+  protected _hasOptionalLabel() {
+    return this.optional && this.state !== 'error';
+  }
+
+  protected _hasErrorLabel() {
+    return this.state === 'error';
+  }
 }

src/material/stepper/stepper.scss

@@ -81,6 +81,10 @@ $fallbacks: m3-stepper.get-tokens();
     }
   }
 
+  &.mat-step-header-empty-label .mat-step-icon {
+    margin: 0;
+  }
+
   $vertical-padding: _get-vertical-padding-calc();
 
   &::before,