@angular/material 22.0.0-next.5 → 22.0.0-next.7

package/fesm2022/stepper.mjs

@@ -1,6 +1,6 @@
 import { CdkStepLabel, CdkStepHeader, CdkStep, CdkStepper, CdkStepperNext, CdkStepperPrevious, CdkStepperModule } from '@angular/cdk/stepper';
 import * as i0 from '@angular/core';
-import { Directive, Injectable, inject, ChangeDetectorRef, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, TemplateRef, ViewContainerRef, NgZone, Renderer2, signal, QueryList, EventEmitter, input, ElementRef, ContentChild, Output, ContentChildren, ViewChildren, NgModule } from '@angular/core';
+import { Directive, Service, inject, ChangeDetectorRef, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, TemplateRef, ViewContainerRef, NgZone, Renderer2, signal, QueryList, EventEmitter, input, ElementRef, ContentChild, Output, ContentChildren, ViewChildren, NgModule } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { Platform } from '@angular/cdk/platform';
 import { TemplatePortal, CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
@@ -24,7 +24,7 @@ import '@angular/cdk/layout';
 class MatStepLabel extends CdkStepLabel {
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.6",
+    version: "22.0.0-next.9",
     ngImport: i0,
     type: MatStepLabel,
     deps: null,
@@ -32,7 +32,7 @@ class MatStepLabel extends CdkStepLabel {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "14.0.0",
-    version: "22.0.0-next.6",
+    version: "22.0.0-next.9",
     type: MatStepLabel,
     isStandalone: true,
     selector: "[matStepLabel]",
@@ -42,7 +42,7 @@ class MatStepLabel extends CdkStepLabel {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.6",
+  version: "22.0.0-next.9",
   ngImport: i0,
   type: MatStepLabel,
   decorators: [{
@@ -60,30 +60,26 @@ class MatStepperIntl {
   editableLabel = 'Editable';
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.6",
+    version: "22.0.0-next.9",
     ngImport: i0,
     type: MatStepperIntl,
     deps: [],
-    target: i0.ɵɵFactoryTarget.Injectable
+    target: i0.ɵɵFactoryTarget.Service
   });
-  static ɵprov = i0.ɵɵngDeclareInjectable({
-    minVersion: "12.0.0",
-    version: "22.0.0-next.6",
+  static ɵprov = i0.ɵɵngDeclareService({
+    minVersion: "22.0.0",
+    version: "22.0.0-next.9",
     ngImport: i0,
-    type: MatStepperIntl,
-    providedIn: 'root'
+    type: MatStepperIntl
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.6",
+  version: "22.0.0-next.9",
   ngImport: i0,
   type: MatStepperIntl,
   decorators: [{
-    type: Injectable,
-    args: [{
-      providedIn: 'root'
-    }]
+    type: Service
   }]
 });
 
@@ -155,7 +151,7 @@ class MatStepHeader extends CdkStepHeader {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.6",
+    version: "22.0.0-next.9",
     ngImport: i0,
     type: MatStepHeader,
     deps: [],
@@ -163,7 +159,7 @@ class MatStepHeader extends CdkStepHeader {
   });
   static ɵcmp = i0.ɵɵngDeclareComponent({
     minVersion: "17.0.0",
-    version: "22.0.0-next.6",
+    version: "22.0.0-next.9",
     type: MatStepHeader,
     isStandalone: true,
     selector: "mat-step-header",
@@ -217,7 +213,7 @@ class MatStepHeader extends CdkStepHeader {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.6",
+  version: "22.0.0-next.9",
   ngImport: i0,
   type: MatStepHeader,
   decorators: [{
@@ -277,7 +273,7 @@ class MatStepperIcon {
   name;
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.6",
+    version: "22.0.0-next.9",
     ngImport: i0,
     type: MatStepperIcon,
     deps: [],
@@ -285,7 +281,7 @@ class MatStepperIcon {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "14.0.0",
-    version: "22.0.0-next.6",
+    version: "22.0.0-next.9",
     type: MatStepperIcon,
     isStandalone: true,
     selector: "ng-template[matStepperIcon]",
@@ -297,7 +293,7 @@ class MatStepperIcon {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.6",
+  version: "22.0.0-next.9",
   ngImport: i0,
   type: MatStepperIcon,
   decorators: [{
@@ -318,7 +314,7 @@ class MatStepContent {
   _template = inject(TemplateRef);
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.6",
+    version: "22.0.0-next.9",
     ngImport: i0,
     type: MatStepContent,
     deps: [],
@@ -326,7 +322,7 @@ class MatStepContent {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "14.0.0",
-    version: "22.0.0-next.6",
+    version: "22.0.0-next.9",
     type: MatStepContent,
     isStandalone: true,
     selector: "ng-template[matStepContent]",
@@ -335,7 +331,7 @@ class MatStepContent {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.6",
+  version: "22.0.0-next.9",
   ngImport: i0,
   type: MatStepContent,
   decorators: [{
@@ -375,7 +371,7 @@ class MatStep extends CdkStep {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.6",
+    version: "22.0.0-next.9",
     ngImport: i0,
     type: MatStep,
     deps: null,
@@ -383,7 +379,7 @@ class MatStep extends CdkStep {
   });
   static ɵcmp = i0.ɵɵngDeclareComponent({
     minVersion: "14.0.0",
-    version: "22.0.0-next.6",
+    version: "22.0.0-next.9",
     type: MatStep,
     isStandalone: true,
     selector: "mat-step",
@@ -431,7 +427,7 @@ class MatStep extends CdkStep {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.6",
+  version: "22.0.0-next.9",
   ngImport: i0,
   type: MatStep,
   decorators: [{
@@ -489,6 +485,7 @@ class MatStepper extends CdkStepper {
   color;
   labelPosition = 'end';
   headerPosition = 'top';
+  ariaLabel = null;
   headerPrefix = input(null, ...(ngDevMode ? [{
     debugName: "headerPrefix"
   }] : []));
@@ -575,7 +572,7 @@ class MatStepper extends CdkStepper {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.6",
+    version: "22.0.0-next.9",
     ngImport: i0,
     type: MatStepper,
     deps: [],
@@ -583,7 +580,7 @@ class MatStepper extends CdkStepper {
   });
   static ɵcmp = i0.ɵɵngDeclareComponent({
     minVersion: "17.0.0",
-    version: "22.0.0-next.6",
+    version: "22.0.0-next.9",
     type: MatStepper,
     isStandalone: true,
     selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]",
@@ -616,6 +613,13 @@ class MatStepper extends CdkStepper {
         isRequired: false,
         transformFunction: null
       },
+      ariaLabel: {
+        classPropertyName: "ariaLabel",
+        publicName: "aria-label",
+        isSignal: false,
+        isRequired: false,
+        transformFunction: null
+      },
       headerPrefix: {
         classPropertyName: "headerPrefix",
         publicName: "headerPrefix",
@@ -670,7 +674,7 @@ class MatStepper extends CdkStepper {
     exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"],
     usesInheritance: true,
     ngImport: i0,
-    template: "<!--\n  We need to project the content somewhere to avoid hydration errors. Some observations:\n  1. This is only necessary on the server.\n  2. We get a hydration error if there aren't any nodes after the `ng-content`.\n  3. We get a hydration error if `ng-content` is wrapped in another element.\n-->\n@if (_isServer) {\n  <ng-content/>\n}\n\n@switch (orientation) {\n  @case ('horizontal') {\n    <div class=\"mat-horizontal-stepper-wrapper\">\n      @if (headerPrefix()) {\n        <div class=\"mat-horizontal-stepper-header-wrapper\">\n          <ng-container [ngTemplateOutlet]=\"headerPrefix()\"/>\n          <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\"\n            [ngTemplateOutletContext]=\"{steps}\"/>\n        </div>\n      } @else {\n        <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\"\n          [ngTemplateOutletContext]=\"{steps}\"/>\n      }\n\n      <div class=\"mat-horizontal-content-container\">\n        @for (step of steps; track step) {\n          <div\n            #animatedContainer\n            class=\"mat-horizontal-stepper-content\"\n            role=\"tabpanel\"\n            [id]=\"_getStepContentId($index)\"\n            [attr.aria-labelledby]=\"_getStepLabelId($index)\"\n            [class]=\"'mat-horizontal-stepper-content-' + _getAnimationDirection($index)\"\n            [attr.inert]=\"selectedIndex === $index ? null : ''\">\n            <ng-container [ngTemplateOutlet]=\"step.content\"/>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  @case ('vertical') {\n    <div class=\"mat-vertical-stepper-wrapper\">\n      @if (headerPrefix()) {\n        <ng-container [ngTemplateOutlet]=\"headerPrefix()\"/>\n      }\n\n      @for (step of steps; track step) {\n        <div class=\"mat-step\">\n          <ng-container\n            [ngTemplateOutlet]=\"stepTemplate\"\n            [ngTemplateOutletContext]=\"{step}\"/>\n          <div\n            #animatedContainer\n            class=\"mat-vertical-content-container\"\n            [class.mat-stepper-vertical-line]=\"!$last\"\n            [class.mat-vertical-content-container-active]=\"selectedIndex === $index\"\n            [attr.inert]=\"selectedIndex === $index ? null : ''\">\n            <div \n              class=\"mat-vertical-stepper-content\"\n              role=\"region\"\n              [id]=\"_getStepContentId($index)\"\n              [attr.aria-labelledby]=\"_getStepLabelId($index)\">\n              <div class=\"mat-vertical-content\">\n                <ng-container [ngTemplateOutlet]=\"step.content\"/>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  }\n}\n\n<!-- Common step templating -->\n<ng-template let-step=\"step\" #stepTemplate>\n  <mat-step-header\n    [class.mat-horizontal-stepper-header]=\"orientation === 'horizontal'\"\n    [class.mat-vertical-stepper-header]=\"orientation === 'vertical'\"\n    (click)=\"step.select()\"\n    (keydown)=\"_onKeydown($event)\"\n    [tabIndex]=\"_getFocusIndex() === step.index() ? 0 : -1\"\n    [id]=\"_getStepLabelId(step.index())\"\n    [attr.role]=\"orientation === 'horizontal' ? 'tab' : 'button'\"\n    [attr.aria-posinset]=\"orientation === 'horizontal' ? step.index() + 1 : null\"\n    [attr.aria-setsize]=\"orientation === 'horizontal' ? steps.length : null\"\n    [attr.aria-selected]=\"orientation === 'horizontal' ? step.isSelected() : null\"\n    [attr.aria-current]=\"orientation === 'vertical' && step.isSelected() ? 'step' : null\"\n    [attr.aria-disabled]=\"orientation === 'vertical' && step.isSelected() ? 'true' : null\"\n    [attr.aria-expanded]=\"orientation === 'vertical' ? step.isSelected() : null\"\n    [attr.aria-controls]=\"_getStepContentId(step.index())\"\n    [attr.aria-label]=\"step.ariaLabel || null\"\n    [attr.aria-labelledby]=\"(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null\"\n    [attr.aria-disabled]=\"step.isNavigable() ? null : true\"\n    [index]=\"step.index()\"\n    [state]=\"step.indicatorType()\"\n    [label]=\"step.stepLabel || step.label\"\n    [selected]=\"step.isSelected()\"\n    [active]=\"step.isNavigable()\"\n    [optional]=\"step.optional\"\n    [errorMessage]=\"step.errorMessage\"\n    [iconOverrides]=\"_iconOverrides\"\n    [disableRipple]=\"disableRipple || !step.isNavigable()\"\n    [color]=\"step.color || color\"/>\n</ng-template>\n\n<ng-template #horizontalStepsTemplate let-steps=\"steps\">\n  <div \n    aria-orientation=\"horizontal\"\n    class=\"mat-horizontal-stepper-header-container\" \n    role=\"tablist\">\n    @for (step of steps; track step) {\n      <ng-container\n        [ngTemplateOutlet]=\"stepTemplate\"\n        [ngTemplateOutletContext]=\"{step}\"/>\n      @if (!$last) {\n        <div class=\"mat-stepper-horizontal-line\"></div>\n      }\n    }\n  </div>\n</ng-template>\n",
+    template: "<!--\n  We need to project the content somewhere to avoid hydration errors. Some observations:\n  1. This is only necessary on the server.\n  2. We get a hydration error if there aren't any nodes after the `ng-content`.\n  3. We get a hydration error if `ng-content` is wrapped in another element.\n-->\n@if (_isServer) {\n  <ng-content/>\n}\n\n@switch (orientation) {\n  @case ('horizontal') {\n    <div class=\"mat-horizontal-stepper-wrapper\">\n      @if (headerPrefix()) {\n        <div class=\"mat-horizontal-stepper-header-wrapper\">\n          <ng-container [ngTemplateOutlet]=\"headerPrefix()\"/>\n          <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\"\n            [ngTemplateOutletContext]=\"{steps}\"/>\n        </div>\n      } @else {\n        <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\"\n          [ngTemplateOutletContext]=\"{steps}\"/>\n      }\n\n      <div class=\"mat-horizontal-content-container\">\n        @for (step of steps; track step) {\n          <div\n            #animatedContainer\n            class=\"mat-horizontal-stepper-content\"\n            role=\"tabpanel\"\n            [id]=\"_getStepContentId($index)\"\n            [attr.aria-labelledby]=\"_getStepLabelId($index)\"\n            [class]=\"'mat-horizontal-stepper-content-' + _getAnimationDirection($index)\"\n            [attr.inert]=\"selectedIndex === $index ? null : ''\">\n            <ng-container [ngTemplateOutlet]=\"step.content\"/>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  @case ('vertical') {\n    <div class=\"mat-vertical-stepper-wrapper\">\n      @if (headerPrefix()) {\n        <ng-container [ngTemplateOutlet]=\"headerPrefix()\"/>\n      }\n\n      @for (step of steps; track step) {\n        <div class=\"mat-step\">\n          <ng-container\n            [ngTemplateOutlet]=\"stepTemplate\"\n            [ngTemplateOutletContext]=\"{step}\"/>\n          <div\n            #animatedContainer\n            class=\"mat-vertical-content-container\"\n            [class.mat-stepper-vertical-line]=\"!$last\"\n            [class.mat-vertical-content-container-active]=\"selectedIndex === $index\"\n            [attr.inert]=\"selectedIndex === $index ? null : ''\"\n            [attr.aria-label]=\"ariaLabel\">\n            <div\n              class=\"mat-vertical-stepper-content\"\n              role=\"region\"\n              [id]=\"_getStepContentId($index)\"\n              [attr.aria-labelledby]=\"_getStepLabelId($index)\">\n              <div class=\"mat-vertical-content\">\n                <ng-container [ngTemplateOutlet]=\"step.content\"/>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  }\n}\n\n<!-- Common step templating -->\n<ng-template let-step=\"step\" #stepTemplate>\n  <mat-step-header\n    [class.mat-horizontal-stepper-header]=\"orientation === 'horizontal'\"\n    [class.mat-vertical-stepper-header]=\"orientation === 'vertical'\"\n    (click)=\"step.select()\"\n    (keydown)=\"_onKeydown($event)\"\n    [tabIndex]=\"_getFocusIndex() === step.index() ? 0 : -1\"\n    [id]=\"_getStepLabelId(step.index())\"\n    [attr.role]=\"orientation === 'horizontal' ? 'tab' : 'button'\"\n    [attr.aria-posinset]=\"orientation === 'horizontal' ? step.index() + 1 : null\"\n    [attr.aria-setsize]=\"orientation === 'horizontal' ? steps.length : null\"\n    [attr.aria-selected]=\"orientation === 'horizontal' ? step.isSelected() : null\"\n    [attr.aria-current]=\"orientation === 'vertical' && step.isSelected() ? 'step' : null\"\n    [attr.aria-disabled]=\"orientation === 'vertical' && step.isSelected() ? 'true' : null\"\n    [attr.aria-expanded]=\"orientation === 'vertical' ? step.isSelected() : null\"\n    [attr.aria-controls]=\"_getStepContentId(step.index())\"\n    [attr.aria-label]=\"step.ariaLabel || null\"\n    [attr.aria-labelledby]=\"(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null\"\n    [attr.aria-disabled]=\"step.isNavigable() ? null : true\"\n    [index]=\"step.index()\"\n    [state]=\"step.indicatorType()\"\n    [label]=\"step.stepLabel || step.label\"\n    [selected]=\"step.isSelected()\"\n    [active]=\"step.isNavigable()\"\n    [optional]=\"step.optional\"\n    [errorMessage]=\"step.errorMessage\"\n    [iconOverrides]=\"_iconOverrides\"\n    [disableRipple]=\"disableRipple || !step.isNavigable()\"\n    [color]=\"step.color || color\"/>\n</ng-template>\n\n<ng-template #horizontalStepsTemplate let-steps=\"steps\">\n  <div\n    aria-orientation=\"horizontal\"\n    class=\"mat-horizontal-stepper-header-container\"\n    role=\"tablist\"\n    [attr.aria-label]=\"ariaLabel\">\n    @for (step of steps; track step) {\n      <ng-container\n        [ngTemplateOutlet]=\"stepTemplate\"\n        [ngTemplateOutletContext]=\"{step}\"/>\n      @if (!$last) {\n        <div class=\"mat-stepper-horizontal-line\"></div>\n      }\n    }\n  </div>\n</ng-template>\n",
     styles: [".mat-stepper-vertical,\n.mat-stepper-horizontal {\n  display: block;\n  font-family: var(--mat-stepper-container-text-font, var(--mat-sys-body-medium-font));\n  background: var(--mat-stepper-container-color, var(--mat-sys-surface));\n}\n\n.mat-horizontal-stepper-header-wrapper {\n  align-items: center;\n  display: flex;\n}\n\n.mat-horizontal-stepper-header-container {\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n}\n.mat-stepper-label-position-bottom .mat-horizontal-stepper-header-container {\n  align-items: flex-start;\n}\n.mat-stepper-header-position-bottom .mat-horizontal-stepper-header-container {\n  order: 1;\n}\n\n.mat-stepper-horizontal-line {\n  border-top-width: 1px;\n  border-top-style: solid;\n  flex: auto;\n  height: 0;\n  margin: 0 -16px;\n  min-width: 32px;\n  border-top-color: var(--mat-stepper-line-color, var(--mat-sys-outline));\n}\n.mat-stepper-label-position-bottom .mat-stepper-horizontal-line {\n  margin: 0;\n  min-width: 0;\n  position: relative;\n  top: calc(calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) + 12px);\n}\n\n.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before, [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::before, .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after, [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::after {\n  border-top-width: 1px;\n  border-top-style: solid;\n  content: \"\";\n  display: inline-block;\n  height: 0;\n  position: absolute;\n  width: calc(50% - 20px);\n}\n\n.mat-horizontal-stepper-header {\n  display: flex;\n  overflow: hidden;\n  align-items: center;\n  padding: 0 24px;\n  height: var(--mat-stepper-header-height, 72px);\n}\n.mat-horizontal-stepper-header .mat-step-icon {\n  margin-right: 8px;\n  flex: none;\n}\n[dir=rtl] .mat-horizontal-stepper-header .mat-step-icon {\n  margin-right: 0;\n  margin-left: 8px;\n}\n.mat-horizontal-stepper-header.mat-step-header-empty-label .mat-step-icon {\n  margin: 0;\n}\n.mat-horizontal-stepper-header::before, .mat-horizontal-stepper-header::after {\n  border-top-color: var(--mat-stepper-line-color, var(--mat-sys-outline));\n}\n.mat-stepper-label-position-bottom .mat-horizontal-stepper-header {\n  padding: calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) 24px;\n}\n.mat-stepper-label-position-bottom .mat-horizontal-stepper-header::before, .mat-stepper-label-position-bottom .mat-horizontal-stepper-header::after {\n  top: calc(calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) + 12px);\n}\n.mat-stepper-label-position-bottom .mat-horizontal-stepper-header {\n  box-sizing: border-box;\n  flex-direction: column;\n  height: auto;\n}\n.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after, [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::after {\n  right: 0;\n}\n.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before, [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::before {\n  left: 0;\n}\n[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:last-child::before, [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:first-child::after {\n  display: none;\n}\n.mat-stepper-label-position-bottom .mat-horizontal-stepper-header .mat-step-icon {\n  margin-right: 0;\n  margin-left: 0;\n}\n.mat-stepper-label-position-bottom .mat-horizontal-stepper-header .mat-step-label {\n  padding: 16px 0 0 0;\n  text-align: center;\n  width: 100%;\n}\n\n.mat-vertical-stepper-header {\n  display: flex;\n  align-items: center;\n  height: 24px;\n  padding: calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) 24px;\n}\n.mat-vertical-stepper-header .mat-step-icon {\n  margin-right: 12px;\n}\n[dir=rtl] .mat-vertical-stepper-header .mat-step-icon {\n  margin-right: 0;\n  margin-left: 12px;\n}\n\n.mat-horizontal-stepper-wrapper {\n  display: flex;\n  flex-direction: column;\n}\n\n.mat-horizontal-stepper-content {\n  visibility: hidden;\n  overflow: hidden;\n  outline: 0;\n  height: 0;\n}\n.mat-stepper-animations-enabled .mat-horizontal-stepper-content {\n  transition: transform var(--mat-stepper-animation-duration, 0) cubic-bezier(0.35, 0, 0.25, 1);\n}\n.mat-horizontal-stepper-content.mat-horizontal-stepper-content-previous {\n  transform: translate3d(-100%, 0, 0);\n}\n.mat-horizontal-stepper-content.mat-horizontal-stepper-content-next {\n  transform: translate3d(100%, 0, 0);\n}\n.mat-horizontal-stepper-content.mat-horizontal-stepper-content-current {\n  visibility: visible;\n  transform: none;\n  height: auto;\n}\n.mat-stepper-horizontal:not(.mat-stepper-animating) .mat-horizontal-stepper-content.mat-horizontal-stepper-content-current {\n  overflow: visible;\n}\n\n.mat-horizontal-content-container {\n  overflow: hidden;\n  padding: 0 24px 24px 24px;\n}\n@media (forced-colors: active) {\n  .mat-horizontal-content-container {\n    outline: solid 1px;\n  }\n}\n.mat-stepper-header-position-bottom .mat-horizontal-content-container {\n  padding: 24px 24px 0 24px;\n}\n\n.mat-vertical-content-container {\n  display: grid;\n  grid-template-rows: 0fr;\n  grid-template-columns: 100%;\n  margin-left: 36px;\n  border: 0;\n  position: relative;\n}\n.mat-stepper-animations-enabled .mat-vertical-content-container {\n  transition: grid-template-rows var(--mat-stepper-animation-duration, 0) cubic-bezier(0.4, 0, 0.2, 1);\n}\n.mat-vertical-content-container.mat-vertical-content-container-active {\n  grid-template-rows: 1fr;\n}\n.mat-step:last-child .mat-vertical-content-container {\n  border: none;\n}\n@media (forced-colors: active) {\n  .mat-vertical-content-container {\n    outline: solid 1px;\n  }\n}\n[dir=rtl] .mat-vertical-content-container {\n  margin-left: 0;\n  margin-right: 36px;\n}\n@supports not (grid-template-rows: 0fr) {\n  .mat-vertical-content-container {\n    height: 0;\n  }\n  .mat-vertical-content-container.mat-vertical-content-container-active {\n    height: auto;\n  }\n}\n\n.mat-stepper-vertical-line::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  border-left-width: 1px;\n  border-left-style: solid;\n  border-left-color: var(--mat-stepper-line-color, var(--mat-sys-outline));\n  top: calc(8px - calc((var(--mat-stepper-header-height, 72px) - 24px) / 2));\n  bottom: calc(8px - calc((var(--mat-stepper-header-height, 72px) - 24px) / 2));\n}\n[dir=rtl] .mat-stepper-vertical-line::before {\n  left: auto;\n  right: 0;\n}\n\n.mat-vertical-stepper-content {\n  overflow: hidden;\n  outline: 0;\n  visibility: hidden;\n}\n.mat-stepper-animations-enabled .mat-vertical-stepper-content {\n  transition: visibility var(--mat-stepper-animation-duration, 0) linear;\n}\n.mat-vertical-content-container-active > .mat-vertical-stepper-content {\n  visibility: visible;\n}\n\n.mat-vertical-content {\n  padding: 0 24px 24px 24px;\n}\n"],
     dependencies: [{
       kind: "directive",
@@ -689,7 +693,7 @@ class MatStepper extends CdkStepper {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.6",
+  version: "22.0.0-next.9",
   ngImport: i0,
   type: MatStepper,
   decorators: [{
@@ -713,7 +717,7 @@ i0.ɵɵngDeclareClassMetadata({
       encapsulation: ViewEncapsulation.None,
       changeDetection: ChangeDetectionStrategy.OnPush,
       imports: [NgTemplateOutlet, MatStepHeader],
-      template: "<!--\n  We need to project the content somewhere to avoid hydration errors. Some observations:\n  1. This is only necessary on the server.\n  2. We get a hydration error if there aren't any nodes after the `ng-content`.\n  3. We get a hydration error if `ng-content` is wrapped in another element.\n-->\n@if (_isServer) {\n  <ng-content/>\n}\n\n@switch (orientation) {\n  @case ('horizontal') {\n    <div class=\"mat-horizontal-stepper-wrapper\">\n      @if (headerPrefix()) {\n        <div class=\"mat-horizontal-stepper-header-wrapper\">\n          <ng-container [ngTemplateOutlet]=\"headerPrefix()\"/>\n          <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\"\n            [ngTemplateOutletContext]=\"{steps}\"/>\n        </div>\n      } @else {\n        <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\"\n          [ngTemplateOutletContext]=\"{steps}\"/>\n      }\n\n      <div class=\"mat-horizontal-content-container\">\n        @for (step of steps; track step) {\n          <div\n            #animatedContainer\n            class=\"mat-horizontal-stepper-content\"\n            role=\"tabpanel\"\n            [id]=\"_getStepContentId($index)\"\n            [attr.aria-labelledby]=\"_getStepLabelId($index)\"\n            [class]=\"'mat-horizontal-stepper-content-' + _getAnimationDirection($index)\"\n            [attr.inert]=\"selectedIndex === $index ? null : ''\">\n            <ng-container [ngTemplateOutlet]=\"step.content\"/>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  @case ('vertical') {\n    <div class=\"mat-vertical-stepper-wrapper\">\n      @if (headerPrefix()) {\n        <ng-container [ngTemplateOutlet]=\"headerPrefix()\"/>\n      }\n\n      @for (step of steps; track step) {\n        <div class=\"mat-step\">\n          <ng-container\n            [ngTemplateOutlet]=\"stepTemplate\"\n            [ngTemplateOutletContext]=\"{step}\"/>\n          <div\n            #animatedContainer\n            class=\"mat-vertical-content-container\"\n            [class.mat-stepper-vertical-line]=\"!$last\"\n            [class.mat-vertical-content-container-active]=\"selectedIndex === $index\"\n            [attr.inert]=\"selectedIndex === $index ? null : ''\">\n            <div \n              class=\"mat-vertical-stepper-content\"\n              role=\"region\"\n              [id]=\"_getStepContentId($index)\"\n              [attr.aria-labelledby]=\"_getStepLabelId($index)\">\n              <div class=\"mat-vertical-content\">\n                <ng-container [ngTemplateOutlet]=\"step.content\"/>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  }\n}\n\n<!-- Common step templating -->\n<ng-template let-step=\"step\" #stepTemplate>\n  <mat-step-header\n    [class.mat-horizontal-stepper-header]=\"orientation === 'horizontal'\"\n    [class.mat-vertical-stepper-header]=\"orientation === 'vertical'\"\n    (click)=\"step.select()\"\n    (keydown)=\"_onKeydown($event)\"\n    [tabIndex]=\"_getFocusIndex() === step.index() ? 0 : -1\"\n    [id]=\"_getStepLabelId(step.index())\"\n    [attr.role]=\"orientation === 'horizontal' ? 'tab' : 'button'\"\n    [attr.aria-posinset]=\"orientation === 'horizontal' ? step.index() + 1 : null\"\n    [attr.aria-setsize]=\"orientation === 'horizontal' ? steps.length : null\"\n    [attr.aria-selected]=\"orientation === 'horizontal' ? step.isSelected() : null\"\n    [attr.aria-current]=\"orientation === 'vertical' && step.isSelected() ? 'step' : null\"\n    [attr.aria-disabled]=\"orientation === 'vertical' && step.isSelected() ? 'true' : null\"\n    [attr.aria-expanded]=\"orientation === 'vertical' ? step.isSelected() : null\"\n    [attr.aria-controls]=\"_getStepContentId(step.index())\"\n    [attr.aria-label]=\"step.ariaLabel || null\"\n    [attr.aria-labelledby]=\"(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null\"\n    [attr.aria-disabled]=\"step.isNavigable() ? null : true\"\n    [index]=\"step.index()\"\n    [state]=\"step.indicatorType()\"\n    [label]=\"step.stepLabel || step.label\"\n    [selected]=\"step.isSelected()\"\n    [active]=\"step.isNavigable()\"\n    [optional]=\"step.optional\"\n    [errorMessage]=\"step.errorMessage\"\n    [iconOverrides]=\"_iconOverrides\"\n    [disableRipple]=\"disableRipple || !step.isNavigable()\"\n    [color]=\"step.color || color\"/>\n</ng-template>\n\n<ng-template #horizontalStepsTemplate let-steps=\"steps\">\n  <div \n    aria-orientation=\"horizontal\"\n    class=\"mat-horizontal-stepper-header-container\" \n    role=\"tablist\">\n    @for (step of steps; track step) {\n      <ng-container\n        [ngTemplateOutlet]=\"stepTemplate\"\n        [ngTemplateOutletContext]=\"{step}\"/>\n      @if (!$last) {\n        <div class=\"mat-stepper-horizontal-line\"></div>\n      }\n    }\n  </div>\n</ng-template>\n",
+      template: "<!--\n  We need to project the content somewhere to avoid hydration errors. Some observations:\n  1. This is only necessary on the server.\n  2. We get a hydration error if there aren't any nodes after the `ng-content`.\n  3. We get a hydration error if `ng-content` is wrapped in another element.\n-->\n@if (_isServer) {\n  <ng-content/>\n}\n\n@switch (orientation) {\n  @case ('horizontal') {\n    <div class=\"mat-horizontal-stepper-wrapper\">\n      @if (headerPrefix()) {\n        <div class=\"mat-horizontal-stepper-header-wrapper\">\n          <ng-container [ngTemplateOutlet]=\"headerPrefix()\"/>\n          <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\"\n            [ngTemplateOutletContext]=\"{steps}\"/>\n        </div>\n      } @else {\n        <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\"\n          [ngTemplateOutletContext]=\"{steps}\"/>\n      }\n\n      <div class=\"mat-horizontal-content-container\">\n        @for (step of steps; track step) {\n          <div\n            #animatedContainer\n            class=\"mat-horizontal-stepper-content\"\n            role=\"tabpanel\"\n            [id]=\"_getStepContentId($index)\"\n            [attr.aria-labelledby]=\"_getStepLabelId($index)\"\n            [class]=\"'mat-horizontal-stepper-content-' + _getAnimationDirection($index)\"\n            [attr.inert]=\"selectedIndex === $index ? null : ''\">\n            <ng-container [ngTemplateOutlet]=\"step.content\"/>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  @case ('vertical') {\n    <div class=\"mat-vertical-stepper-wrapper\">\n      @if (headerPrefix()) {\n        <ng-container [ngTemplateOutlet]=\"headerPrefix()\"/>\n      }\n\n      @for (step of steps; track step) {\n        <div class=\"mat-step\">\n          <ng-container\n            [ngTemplateOutlet]=\"stepTemplate\"\n            [ngTemplateOutletContext]=\"{step}\"/>\n          <div\n            #animatedContainer\n            class=\"mat-vertical-content-container\"\n            [class.mat-stepper-vertical-line]=\"!$last\"\n            [class.mat-vertical-content-container-active]=\"selectedIndex === $index\"\n            [attr.inert]=\"selectedIndex === $index ? null : ''\"\n            [attr.aria-label]=\"ariaLabel\">\n            <div\n              class=\"mat-vertical-stepper-content\"\n              role=\"region\"\n              [id]=\"_getStepContentId($index)\"\n              [attr.aria-labelledby]=\"_getStepLabelId($index)\">\n              <div class=\"mat-vertical-content\">\n                <ng-container [ngTemplateOutlet]=\"step.content\"/>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  }\n}\n\n<!-- Common step templating -->\n<ng-template let-step=\"step\" #stepTemplate>\n  <mat-step-header\n    [class.mat-horizontal-stepper-header]=\"orientation === 'horizontal'\"\n    [class.mat-vertical-stepper-header]=\"orientation === 'vertical'\"\n    (click)=\"step.select()\"\n    (keydown)=\"_onKeydown($event)\"\n    [tabIndex]=\"_getFocusIndex() === step.index() ? 0 : -1\"\n    [id]=\"_getStepLabelId(step.index())\"\n    [attr.role]=\"orientation === 'horizontal' ? 'tab' : 'button'\"\n    [attr.aria-posinset]=\"orientation === 'horizontal' ? step.index() + 1 : null\"\n    [attr.aria-setsize]=\"orientation === 'horizontal' ? steps.length : null\"\n    [attr.aria-selected]=\"orientation === 'horizontal' ? step.isSelected() : null\"\n    [attr.aria-current]=\"orientation === 'vertical' && step.isSelected() ? 'step' : null\"\n    [attr.aria-disabled]=\"orientation === 'vertical' && step.isSelected() ? 'true' : null\"\n    [attr.aria-expanded]=\"orientation === 'vertical' ? step.isSelected() : null\"\n    [attr.aria-controls]=\"_getStepContentId(step.index())\"\n    [attr.aria-label]=\"step.ariaLabel || null\"\n    [attr.aria-labelledby]=\"(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null\"\n    [attr.aria-disabled]=\"step.isNavigable() ? null : true\"\n    [index]=\"step.index()\"\n    [state]=\"step.indicatorType()\"\n    [label]=\"step.stepLabel || step.label\"\n    [selected]=\"step.isSelected()\"\n    [active]=\"step.isNavigable()\"\n    [optional]=\"step.optional\"\n    [errorMessage]=\"step.errorMessage\"\n    [iconOverrides]=\"_iconOverrides\"\n    [disableRipple]=\"disableRipple || !step.isNavigable()\"\n    [color]=\"step.color || color\"/>\n</ng-template>\n\n<ng-template #horizontalStepsTemplate let-steps=\"steps\">\n  <div\n    aria-orientation=\"horizontal\"\n    class=\"mat-horizontal-stepper-header-container\"\n    role=\"tablist\"\n    [attr.aria-label]=\"ariaLabel\">\n    @for (step of steps; track step) {\n      <ng-container\n        [ngTemplateOutlet]=\"stepTemplate\"\n        [ngTemplateOutletContext]=\"{step}\"/>\n      @if (!$last) {\n        <div class=\"mat-stepper-horizontal-line\"></div>\n      }\n    }\n  </div>\n</ng-template>\n",
       styles: [".mat-stepper-vertical,\n.mat-stepper-horizontal {\n  display: block;\n  font-family: var(--mat-stepper-container-text-font, var(--mat-sys-body-medium-font));\n  background: var(--mat-stepper-container-color, var(--mat-sys-surface));\n}\n\n.mat-horizontal-stepper-header-wrapper {\n  align-items: center;\n  display: flex;\n}\n\n.mat-horizontal-stepper-header-container {\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n}\n.mat-stepper-label-position-bottom .mat-horizontal-stepper-header-container {\n  align-items: flex-start;\n}\n.mat-stepper-header-position-bottom .mat-horizontal-stepper-header-container {\n  order: 1;\n}\n\n.mat-stepper-horizontal-line {\n  border-top-width: 1px;\n  border-top-style: solid;\n  flex: auto;\n  height: 0;\n  margin: 0 -16px;\n  min-width: 32px;\n  border-top-color: var(--mat-stepper-line-color, var(--mat-sys-outline));\n}\n.mat-stepper-label-position-bottom .mat-stepper-horizontal-line {\n  margin: 0;\n  min-width: 0;\n  position: relative;\n  top: calc(calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) + 12px);\n}\n\n.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before, [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::before, .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after, [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::after {\n  border-top-width: 1px;\n  border-top-style: solid;\n  content: \"\";\n  display: inline-block;\n  height: 0;\n  position: absolute;\n  width: calc(50% - 20px);\n}\n\n.mat-horizontal-stepper-header {\n  display: flex;\n  overflow: hidden;\n  align-items: center;\n  padding: 0 24px;\n  height: var(--mat-stepper-header-height, 72px);\n}\n.mat-horizontal-stepper-header .mat-step-icon {\n  margin-right: 8px;\n  flex: none;\n}\n[dir=rtl] .mat-horizontal-stepper-header .mat-step-icon {\n  margin-right: 0;\n  margin-left: 8px;\n}\n.mat-horizontal-stepper-header.mat-step-header-empty-label .mat-step-icon {\n  margin: 0;\n}\n.mat-horizontal-stepper-header::before, .mat-horizontal-stepper-header::after {\n  border-top-color: var(--mat-stepper-line-color, var(--mat-sys-outline));\n}\n.mat-stepper-label-position-bottom .mat-horizontal-stepper-header {\n  padding: calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) 24px;\n}\n.mat-stepper-label-position-bottom .mat-horizontal-stepper-header::before, .mat-stepper-label-position-bottom .mat-horizontal-stepper-header::after {\n  top: calc(calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) + 12px);\n}\n.mat-stepper-label-position-bottom .mat-horizontal-stepper-header {\n  box-sizing: border-box;\n  flex-direction: column;\n  height: auto;\n}\n.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after, [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::after {\n  right: 0;\n}\n.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before, [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::before {\n  left: 0;\n}\n[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:last-child::before, [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:first-child::after {\n  display: none;\n}\n.mat-stepper-label-position-bottom .mat-horizontal-stepper-header .mat-step-icon {\n  margin-right: 0;\n  margin-left: 0;\n}\n.mat-stepper-label-position-bottom .mat-horizontal-stepper-header .mat-step-label {\n  padding: 16px 0 0 0;\n  text-align: center;\n  width: 100%;\n}\n\n.mat-vertical-stepper-header {\n  display: flex;\n  align-items: center;\n  height: 24px;\n  padding: calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) 24px;\n}\n.mat-vertical-stepper-header .mat-step-icon {\n  margin-right: 12px;\n}\n[dir=rtl] .mat-vertical-stepper-header .mat-step-icon {\n  margin-right: 0;\n  margin-left: 12px;\n}\n\n.mat-horizontal-stepper-wrapper {\n  display: flex;\n  flex-direction: column;\n}\n\n.mat-horizontal-stepper-content {\n  visibility: hidden;\n  overflow: hidden;\n  outline: 0;\n  height: 0;\n}\n.mat-stepper-animations-enabled .mat-horizontal-stepper-content {\n  transition: transform var(--mat-stepper-animation-duration, 0) cubic-bezier(0.35, 0, 0.25, 1);\n}\n.mat-horizontal-stepper-content.mat-horizontal-stepper-content-previous {\n  transform: translate3d(-100%, 0, 0);\n}\n.mat-horizontal-stepper-content.mat-horizontal-stepper-content-next {\n  transform: translate3d(100%, 0, 0);\n}\n.mat-horizontal-stepper-content.mat-horizontal-stepper-content-current {\n  visibility: visible;\n  transform: none;\n  height: auto;\n}\n.mat-stepper-horizontal:not(.mat-stepper-animating) .mat-horizontal-stepper-content.mat-horizontal-stepper-content-current {\n  overflow: visible;\n}\n\n.mat-horizontal-content-container {\n  overflow: hidden;\n  padding: 0 24px 24px 24px;\n}\n@media (forced-colors: active) {\n  .mat-horizontal-content-container {\n    outline: solid 1px;\n  }\n}\n.mat-stepper-header-position-bottom .mat-horizontal-content-container {\n  padding: 24px 24px 0 24px;\n}\n\n.mat-vertical-content-container {\n  display: grid;\n  grid-template-rows: 0fr;\n  grid-template-columns: 100%;\n  margin-left: 36px;\n  border: 0;\n  position: relative;\n}\n.mat-stepper-animations-enabled .mat-vertical-content-container {\n  transition: grid-template-rows var(--mat-stepper-animation-duration, 0) cubic-bezier(0.4, 0, 0.2, 1);\n}\n.mat-vertical-content-container.mat-vertical-content-container-active {\n  grid-template-rows: 1fr;\n}\n.mat-step:last-child .mat-vertical-content-container {\n  border: none;\n}\n@media (forced-colors: active) {\n  .mat-vertical-content-container {\n    outline: solid 1px;\n  }\n}\n[dir=rtl] .mat-vertical-content-container {\n  margin-left: 0;\n  margin-right: 36px;\n}\n@supports not (grid-template-rows: 0fr) {\n  .mat-vertical-content-container {\n    height: 0;\n  }\n  .mat-vertical-content-container.mat-vertical-content-container-active {\n    height: auto;\n  }\n}\n\n.mat-stepper-vertical-line::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  border-left-width: 1px;\n  border-left-style: solid;\n  border-left-color: var(--mat-stepper-line-color, var(--mat-sys-outline));\n  top: calc(8px - calc((var(--mat-stepper-header-height, 72px) - 24px) / 2));\n  bottom: calc(8px - calc((var(--mat-stepper-header-height, 72px) - 24px) / 2));\n}\n[dir=rtl] .mat-stepper-vertical-line::before {\n  left: auto;\n  right: 0;\n}\n\n.mat-vertical-stepper-content {\n  overflow: hidden;\n  outline: 0;\n  visibility: hidden;\n}\n.mat-stepper-animations-enabled .mat-vertical-stepper-content {\n  transition: visibility var(--mat-stepper-animation-duration, 0) linear;\n}\n.mat-vertical-content-container-active > .mat-vertical-stepper-content {\n  visibility: visible;\n}\n\n.mat-vertical-content {\n  padding: 0 24px 24px 24px;\n}\n"]
     }]
   }],
@@ -754,6 +758,10 @@ i0.ɵɵngDeclareClassMetadata({
     headerPosition: [{
       type: Input
     }],
+    ariaLabel: [{
+      type: Input,
+      args: ['aria-label']
+    }],
     headerPrefix: [{
       type: i0.Input,
       args: [{
@@ -771,7 +779,7 @@ i0.ɵɵngDeclareClassMetadata({
 class MatStepperNext extends CdkStepperNext {
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.6",
+    version: "22.0.0-next.9",
     ngImport: i0,
     type: MatStepperNext,
     deps: null,
@@ -779,7 +787,7 @@ class MatStepperNext extends CdkStepperNext {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "14.0.0",
-    version: "22.0.0-next.6",
+    version: "22.0.0-next.9",
     type: MatStepperNext,
     isStandalone: true,
     selector: "button[matStepperNext]",
@@ -795,7 +803,7 @@ class MatStepperNext extends CdkStepperNext {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.6",
+  version: "22.0.0-next.9",
   ngImport: i0,
   type: MatStepperNext,
   decorators: [{
@@ -812,7 +820,7 @@ i0.ɵɵngDeclareClassMetadata({
 class MatStepperPrevious extends CdkStepperPrevious {
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.6",
+    version: "22.0.0-next.9",
     ngImport: i0,
     type: MatStepperPrevious,
     deps: null,
@@ -820,7 +828,7 @@ class MatStepperPrevious extends CdkStepperPrevious {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "14.0.0",
-    version: "22.0.0-next.6",
+    version: "22.0.0-next.9",
     type: MatStepperPrevious,
     isStandalone: true,
     selector: "button[matStepperPrevious]",
@@ -836,7 +844,7 @@ class MatStepperPrevious extends CdkStepperPrevious {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.6",
+  version: "22.0.0-next.9",
   ngImport: i0,
   type: MatStepperPrevious,
   decorators: [{
@@ -854,7 +862,7 @@ i0.ɵɵngDeclareClassMetadata({
 class MatStepperModule {
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.6",
+    version: "22.0.0-next.9",
     ngImport: i0,
     type: MatStepperModule,
     deps: [],
@@ -862,7 +870,7 @@ class MatStepperModule {
   });
   static ɵmod = i0.ɵɵngDeclareNgModule({
     minVersion: "14.0.0",
-    version: "22.0.0-next.6",
+    version: "22.0.0-next.9",
     ngImport: i0,
     type: MatStepperModule,
     imports: [PortalModule, CdkStepperModule, MatIconModule, MatRippleModule, MatStep, MatStepLabel, MatStepper, MatStepperNext, MatStepperPrevious, MatStepHeader, MatStepperIcon, MatStepContent],
@@ -870,7 +878,7 @@ class MatStepperModule {
   });
   static ɵinj = i0.ɵɵngDeclareInjector({
     minVersion: "12.0.0",
-    version: "22.0.0-next.6",
+    version: "22.0.0-next.9",
     ngImport: i0,
     type: MatStepperModule,
     providers: [ErrorStateMatcher],
@@ -879,7 +887,7 @@ class MatStepperModule {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.6",
+  version: "22.0.0-next.9",
   ngImport: i0,
   type: MatStepperModule,
   decorators: [{