Added functionalities based on the tentative API doc.

src/demo-app/stepper/stepper-demo.html

@@ -1,15 +1,15 @@
 <h2>Veritcal Stepper Demo</h2>
 <mat-stepper [orientation]="'vertical'" [(selectedIndex)]="verticalActiveIndex">
-    <mat-step *ngFor="let step of steps" [label]="step.label"
-              [active]="step.active" [completed]="step.completed">
+    <mat-step *ngFor="let step of steps" [label]="step.label">
         <div>{{step.content}}</div>
+        <div>optional {{step.optional}}</div>
+        <div>editable {{step.editable}}</div>
     </mat-step>
 </mat-stepper>
 
 <h2>Horizontal Stepper Demo</h2>
 <mat-stepper [orientation]="'horizontal'" [(selectedIndex)]="horizontalActiveIndex">
-    <mat-step *ngFor="let step of steps" [label]="step.label"
-              [active]="step.active" [completed]="step.completed">
+    <mat-step *ngFor="let step of steps" [label]="step.label">
         <div>{{step.content}}</div>
     </mat-step>
 </mat-stepper>

src/demo-app/stepper/stepper-demo.ts

@@ -11,7 +11,7 @@ export class StepperDemo {
     horizontalActiveIndex = 0;
     steps = [
         {label: 'Step 1', content: 'Content 1'},
-        {label: 'Step 2', content: 'Content 2'},
-        {label: 'Step 3', content: 'Content 3'},
+        {label: 'Step 2', content: 'Content 2', optional: true},
+        {label: 'Step 3', content: 'Content 3', editable: false},
         ];
 }

src/lib/stepper/step.ts

@@ -8,6 +8,7 @@
 
 import {Component, ContentChild, Input, OnInit, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';
 import {TemplatePortal} from '../core/portal/portal';
+import {coerceBooleanProperty} from "@angular/cdk";
 
 @Component({
     moduleId: module.id,
@@ -20,30 +21,37 @@ export class MdStep {
     // @ViewChild(PortalHostDirective) _portalHost: PortalHostDirective;
 
     @Input()
+    label: string;
+
+    /** Whether the step is optional or not. */
+    @Input() optional: boolean = false;
+
+    /** Whether the step is editable or not. */
+    @Input() editable: boolean = true;
+
+    isLast: boolean = false;
+
+    /** Whether the step is active. */
     get active() { return this._active; }
     set active(value: boolean) {
         this._active = value;
     }
-    private _active: boolean = true;
+    private _active: boolean = false;
 
-    @Input()
-    label: string;
+    /** Whether the step has been selected. */
+    get selected(): boolean { return this._selected; }
+    set selected(value: boolean) {
+        this._selected = value;
+    }
+    private _selected: boolean = false;
 
-    @Input()
+    /** Whether the step has been completed. */
     get completed() { return this._completed; }
     set completed(value: boolean) {
         this._completed = value;
     }
     private _completed: boolean = false;
 
-    isLast: boolean = false;
-
-    private _selected: boolean = false;
-    set selected(value: boolean) {
-        this._selected = value;
-    }
-    get selected(): boolean { return this._selected; }
-
     // /** The portal that will be the hosted content of the step */
     // private _contentPortal: TemplatePortal | null = null;
     // get content(): TemplatePortal | null { return this._contentPortal; }

src/lib/stepper/stepper.html

@@ -12,7 +12,8 @@
         <div *ngIf="orientation == 'vertical' && indexOf(step) == selectedIndex">
             <ng-container [ngTemplateOutlet]="step.stepContent"></ng-container>
             <div>
-                <button md-button (click)="nextStep()">Continue</button>
+                <button md-button (click)="previousStep()">Back</button>
+                <button md-button (click)="nextStep()">Next</button>
                 <button md-button>Cancel</button>
             </div>
         </div>
@@ -21,7 +22,8 @@
 <div class="mat-stepper-horizontal" *ngIf="orientation == 'horizontal'">
     <ng-container [ngTemplateOutlet]="selectedStep.stepContent">
     <div>
-        <button md-button (click)="nextStep()">Continue</button>
+        <button md-button (click)="previousStep()">Back</button>
+        <button md-button (click)="nextStep()">Next</button>
         <button md-button>Cancel</button>
     </div>
     </ng-container>

src/lib/stepper/stepper.ts

@@ -34,14 +34,15 @@ export class MdStepper {
 
     @ContentChildren(MdStep) _steps: QueryList<MdStep>;
 
+    /** Orientation of the stepper component. */
     @Input()
     get orientation() { return this._orientation; }
     set orientation(value: string) {
         this._orientation = value;
     }
     private _orientation: string;
 
-    /** The index of the active tab. */
+    /** The index of the currently selected step. */
     @Input()
     set selectedIndex(value: number) {
         this._selectedIndex = value;
@@ -51,10 +52,15 @@ export class MdStepper {
     get selectedIndex(): number { return this._selectedIndex; }
     private _selectedIndex: number;
 
+    /** Optional input to support both linear and non-linear stepper component. */
+    @Input() linear: boolean = true;
+
+    /** Output to enable support for two-way binding on `[(selectedIndex)]` */
     @Output() get selectedIndexChange(): Observable<number> {
         return map.call(this.stepChangeEvent, event => event.index);
     }
 
+    /** Event emitted when the selected step has changed. */
     @Output() stepChangeEvent = new EventEmitter<MdStepChangeEvent>();
 
     get selectedStep(): MdStep {
@@ -80,10 +86,17 @@ export class MdStepper {
     }
 
     nextStep(): void {
+        if (this._selectedIndex == this._steps.length - 1) { return; }
         this._selectedIndex++;
         this.stepChangeEvent.emit(this._emitStepChangeEvent());
     }
 
+    previousStep(): void {
+        if (this._selectedIndex == 0) { return; }
+        this._selectedIndex--;
+        this.stepChangeEvent.emit(this._emitStepChangeEvent());
+    }
+
     private _emitStepChangeEvent(): MdStepChangeEvent {
         const event = new MdStepChangeEvent();
         event.index = this._selectedIndex;