From a8c55eaf8a3cb46034fa229762005161449b0c63 Mon Sep 17 00:00:00 2001
From: Matthew de Nobrega <matt.denobrega@gmail.com>
Date: Sun, 17 Apr 2016 11:46:00 +0200
Subject: [PATCH 01/23] feat(input): add support for spellcheck attribute

---
 src/components/input/input.html | 1 +
 src/components/input/input.ts   | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/input/input.html b/src/components/input/input.html
index 3a45fd18cac8..3303da2895b9 100644
--- a/src/components/input/input.html
+++ b/src/components/input/input.html
@@ -15,6 +15,7 @@
              [id]="id"
              [disabled]="disabled"
              [required]="required"
+             [spellcheck]="spellcheck"
              [attr.maxlength]="maxLength"
              [type]="type"
              (focus)="onFocus()"
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index bb44e0a10c6b..ada34c9a6d97 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -138,6 +138,7 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
   @Input() maxLength: number = -1;
   @Input() placeholder: string;
   @Input() @BooleanFieldValue() required: boolean = false;
+  @Input() @BooleanFieldValue() spellcheck: boolean = false;
   @Input() type: string = 'text';
 
   get value(): any { return this._value; };

From 1a803d277dc198120c0671777dfb0aeb78f29fd2 Mon Sep 17 00:00:00 2001
From: Matthew de Nobrega <matt.denobrega@gmail.com>
Date: Sun, 24 Apr 2016 18:13:24 +0200
Subject: [PATCH 02/23] feat(input): add support for more input attributes

---
 src/components/input/input.html    |  15 +-
 src/components/input/input.spec.ts | 371 +++++++++++++++++++++++++++++
 src/components/input/input.ts      |  14 +-
 3 files changed, 395 insertions(+), 5 deletions(-)

diff --git a/src/components/input/input.html b/src/components/input/input.html
index f177fd3870a5..47f44eb332e9 100644
--- a/src/components/input/input.html
+++ b/src/components/input/input.html
@@ -12,11 +12,20 @@
              [attr.aria-disabled]="ariaDisabled"
              [attr.aria-required]="ariaRequired"
              [attr.aria-invalid]="ariaInvalid"
-             [id]="id"
+             [attr.autocomplete]="autoComplete"
+             [autofocus]="autoFocus"
              [disabled]="disabled"
-             [required]="required"
-             [spellcheck]="spellcheck"
+             [id]="id"
+             [attr.list]="list"
+             [attr.max]="max"
              [attr.maxlength]="maxLength"
+             [attr.min]="min"
+             [attr.minlength]="minLength"
+             [readonly]="readOnly"
+             [required]="required"
+             [spellcheck]="spellCheck"
+             [attr.step]="step"
+             [attr.tabindex]="tabIndex"
              [type]="type"
              (focus)="onFocus()"
              (blur)="onBlur()"
diff --git a/src/components/input/input.spec.ts b/src/components/input/input.spec.ts
index b70f6b7096a1..9d1fd3f873d7 100644
--- a/src/components/input/input.spec.ts
+++ b/src/components/input/input.spec.ts
@@ -243,6 +243,368 @@ export function main() {
           expect(typeof fixture.componentInstance.value).toBe('number');
         });
     }));
+
+    it('supports the autoComplete attribute', injectAsync([], () => {
+      var template = '<md-input [autoComplete]="autoComplete"></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('autocomplete')).toBeNull();
+
+            fixture.componentInstance.autoComplete = 'on';
+            fixture.detectChanges();
+            expect(el.getAttribute('autocomplete')).toEqual('on');
+          })();
+        });
+    }));
+
+    it('supports the autoComplete attribute as an unbound attribute', injectAsync([], () => {
+      var template = '<md-input autoComplete></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('autocomplete')).toEqual('');
+          })();
+        });
+    }));
+
+    it('supports the autoComplete attribute as an unbound value attribute', injectAsync([], () => {
+      var template = '<md-input autoComplete="name"></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('autocomplete')).toEqual('name');
+          })();
+        });
+    }));
+
+    it('supports the autoFocus attribute', injectAsync([], () => {
+      var template = '<md-input [autoFocus]="autoFocus"></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('autofocus')).toBeNull();
+
+            fixture.componentInstance.autoFocus = true;
+            fixture.detectChanges();
+            expect(el.getAttribute('autofocus')).toEqual('');
+          })();
+        });
+    }));
+
+    it('supports the autoFocus attribute as an unbound attribute', injectAsync([], () => {
+      var template = '<md-input autoFocus></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('autofocus')).toEqual('');
+          })();
+        });
+    }));
+
+    it('supports the disabled attribute', injectAsync([], () => {
+      var template = '<md-input [disabled]="disabled"></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.componentInstance.disabled = false;
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('disabled')).toEqual(null);
+
+            fixture.componentInstance.disabled = true;
+            fixture.detectChanges();
+            expect(el.getAttribute('disabled')).toEqual('');
+          })();
+        });
+    }));
+
+    it('supports the disabled attribute as an unbound attribute', injectAsync([], () => {
+      var template = '<md-input disabled></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('disabled')).toEqual('');
+          })();
+        });
+    }));
+
+    it('supports the list attribute', injectAsync([], () => {
+      var template = '<md-input [list]="list"></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.componentInstance.disabled = false;
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('list')).toEqual(null);
+
+            fixture.componentInstance.list = 'datalist-id';
+            fixture.detectChanges();
+            expect(el.getAttribute('list')).toEqual('datalist-id');
+          })();
+        });
+    }));
+
+    it('supports the max attribute', injectAsync([], () => {
+      var template = '<md-input [max]="max"></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.componentInstance.disabled = false;
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('max')).toEqual(null);
+
+            fixture.componentInstance.max = 10;
+            fixture.detectChanges();
+            expect(el.getAttribute('max')).toEqual('10');
+
+            fixture.componentInstance.max = '2000-01-02';
+            fixture.detectChanges();
+            expect(el.getAttribute('max')).toEqual('2000-01-02');
+          })();
+        });
+    }));
+
+    it('supports the min attribute', injectAsync([], () => {
+      var template = '<md-input [min]="min"></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.componentInstance.disabled = false;
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('min')).toEqual(null);
+
+            fixture.componentInstance.min = 10;
+            fixture.detectChanges();
+            expect(el.getAttribute('min')).toEqual('10');
+
+            fixture.componentInstance.min = '2000-01-02';
+            fixture.detectChanges();
+            expect(el.getAttribute('min')).toEqual('2000-01-02');
+          })();
+        });
+    }));
+
+    it('supports the readOnly attribute', injectAsync([], () => {
+      var template = '<md-input [readOnly]="readOnly"></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('readonly')).toBeNull();
+
+            fixture.componentInstance.readOnly = true;
+            fixture.detectChanges();
+            expect(el.getAttribute('readonly')).toEqual('');
+          })();
+        });
+    }));
+
+    it('supports the readOnly attribute as an unbound attribute', injectAsync([], () => {
+      var template = '<md-input readOnly></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('readonly')).toEqual('');
+          })();
+        });
+    }));
+
+    it('supports the required attribute', injectAsync([], () => {
+      var template = '<md-input [required]="required"></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('required')).toBeNull();
+
+            fixture.componentInstance.required = true;
+            fixture.detectChanges();
+            expect(el.getAttribute('required')).toEqual('');
+          })();
+        });
+    }));
+
+    it('supports the required attribute as an unbound attribute', injectAsync([], () => {
+      var template = '<md-input required></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('required')).toEqual('');
+          })();
+        });
+    }));
+
+    it('supports the spellCheck attribute', injectAsync([], () => {
+      var template = '<md-input [spellCheck]="spellCheck"></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('spellcheck')).toEqual('false');
+
+            fixture.componentInstance.spellCheck = true;
+            fixture.detectChanges();
+            expect(el.getAttribute('spellcheck')).toEqual('true');
+          })();
+        });
+    }));
+
+    it('supports the spellCheck attribute as an unbound attribute', injectAsync([], () => {
+      var template = '<md-input spellCheck></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('spellcheck')).toEqual('true');
+          })();
+        });
+    }));
+
+    it('supports the step attribute', injectAsync([], () => {
+      var template = '<md-input [step]="step"></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('step')).toEqual(null);
+
+            fixture.componentInstance.step = 0.5;
+            fixture.detectChanges();
+            expect(el.getAttribute('step')).toEqual('0.5');
+          })();
+        });
+    }));
+
+    it('supports the tabIndex attribute', injectAsync([], () => {
+      var template = '<md-input [tabIndex]="tabIndex"></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('tabindex')).toEqual(null);
+
+            fixture.componentInstance.tabIndex = 1;
+            fixture.detectChanges();
+            expect(el.getAttribute('tabindex')).toEqual('1');
+          })();
+        });
+    }));
   });
 }
 
@@ -391,3 +753,12 @@ class MdInputAriaTestController {
   ariaLabel: string = 'label';
   ariaDisabled: boolean = true;
 }
+
+@Component({
+  selector: 'test-input-controller',
+  template: `
+    <md-input></md-input>
+  `,
+  directives: [MdInput]
+})
+class MdInputOptionalAttributeController {}
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index d3a1a00eff94..bf93fb393769 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -131,14 +131,24 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
    */
   @Input() align: 'start' | 'end' = 'start';
   @Input() dividerColor: 'primary' | 'accent' | 'warn' = 'primary';
-  @Input() @BooleanFieldValue() disabled: boolean = false;
   @Input() @BooleanFieldValue() floatingPlaceholder: boolean = true;
   @Input() hintLabel: string = '';
+
+  @Input() autoComplete: string;
+  @Input() @BooleanFieldValue() autoFocus: boolean = false;
+  @Input() @BooleanFieldValue() disabled: boolean = false;
   @Input() id: string = `md-input-${nextUniqueId++}`;
+  @Input() list: string;
+  @Input() max: string;
   @Input() maxLength: number = -1;
+  @Input() min: string;
+  @Input() minLength: number;
   @Input() placeholder: string;
+  @Input() @BooleanFieldValue() readOnly: boolean = false;
   @Input() @BooleanFieldValue() required: boolean = false;
-  @Input() @BooleanFieldValue() spellcheck: boolean = false;
+  @Input() @BooleanFieldValue() spellCheck: boolean = false;
+  @Input() step: number;
+  @Input() tabIndex: number;
   @Input() type: string = 'text';
 
   get value(): any { return this._value; };

From 7b3698cb39384f3e96f8783641fa43b40314bb9b Mon Sep 17 00:00:00 2001
From: Kara Erickson <karakara@google.com>
Date: Mon, 25 Apr 2016 10:23:04 -0700
Subject: [PATCH 03/23] feat(list): add icon support

---
 src/components/list/list-item.html | 2 +-
 src/components/list/list.scss      | 8 ++++++++
 src/demo-app/list/list-demo.html   | 1 +
 src/demo-app/list/list-demo.scss   | 5 +++++
 src/demo-app/list/list-demo.ts     | 3 ++-
 5 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/list/list-item.html b/src/components/list/list-item.html
index 07f97a500837..63f1544b67a3 100644
--- a/src/components/list/list-item.html
+++ b/src/components/list/list-item.html
@@ -1,5 +1,5 @@
 <div class="md-list-item">
-  <ng-content select="[md-list-avatar]"></ng-content>
+  <ng-content select="[md-list-avatar],[md-list-icon]"></ng-content>
   <div class="md-list-text"><ng-content select="[md-line]"></ng-content></div>
   <ng-content></ng-content>
 </div>
\ No newline at end of file
diff --git a/src/components/list/list.scss b/src/components/list/list.scss
index 035e11b988c9..3263e4c9a800 100644
--- a/src/components/list/list.scss
+++ b/src/components/list/list.scss
@@ -3,6 +3,7 @@
 
 $md-list-side-padding: 16px;
 $md-list-avatar-size: 40px;
+$md-list-icon-size: 24px;
 
 /*  Normal list variables */
 $md-list-top-padding: 8px;
@@ -83,6 +84,13 @@ based on whether the list is in dense mode.
     height: $md-list-avatar-size;
     border-radius: 50%;
   }
+
+  [md-list-icon] {
+    width: $md-list-icon-size;
+    height: $md-list-icon-size;
+    border-radius: 50%;
+    padding: 4px;
+  }
 }
 
 /*
diff --git a/src/demo-app/list/list-demo.html b/src/demo-app/list/list-demo.html
index 2f87affaef3e..f6de4c683557 100644
--- a/src/demo-app/list/list-demo.html
+++ b/src/demo-app/list/list-demo.html
@@ -87,6 +87,7 @@ <h2>Nav lists</h2>
     </md-nav-list>
     <md-nav-list>
       <a md-list-item *ngFor="#link of links" href="http://www.google.com">
+        <md-icon md-list-icon>folder</md-icon>
         <span md-line>{{ link.name }}</span>
         <span md-line class="demo-secondary-text"> Description </span>
       </a>
diff --git a/src/demo-app/list/list-demo.scss b/src/demo-app/list/list-demo.scss
index d1ac6a18f0ce..b42fc322c906 100644
--- a/src/demo-app/list/list-demo.scss
+++ b/src/demo-app/list/list-demo.scss
@@ -13,6 +13,11 @@
     margin-top: 20px;
   }
 
+  [md-list-icon] {
+    color: white;
+    background: rgba(0,0,0,0.3);
+  }
+
   i {
     color: rgba(0,0,0,0.12);
   }
diff --git a/src/demo-app/list/list-demo.ts b/src/demo-app/list/list-demo.ts
index e28e99983318..3462da4a8b20 100644
--- a/src/demo-app/list/list-demo.ts
+++ b/src/demo-app/list/list-demo.ts
@@ -1,12 +1,13 @@
 import {Component} from 'angular2/core';
 import {MdButton} from '../../components/button/button';
 import {MD_LIST_DIRECTIVES} from '../../components/list/list';
+import {MdIcon} from '../../components/icon/icon';
 
 @Component({
   selector: 'list-demo',
   templateUrl: 'demo-app/list/list-demo.html',
   styleUrls: ['demo-app/list/list-demo.css'],
-  directives: [MD_LIST_DIRECTIVES, MdButton]
+  directives: [MD_LIST_DIRECTIVES, MdButton, MdIcon]
 })
 export class ListDemo {
   items: string[] = [

From 2f3e9dbb073bf2cbae8b199bf05730fc551bd80c Mon Sep 17 00:00:00 2001
From: Kara Erickson <karakara@google.com>
Date: Mon, 25 Apr 2016 11:38:40 -0700
Subject: [PATCH 04/23] fix(theme): update default theme

---
 src/components/button/_button-theme.scss | 2 +-
 src/components/checkbox/checkbox.scss    | 2 +-
 src/core/style/_default-theme.scss       | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/button/_button-theme.scss b/src/components/button/_button-theme.scss
index ca5c154530dd..008f9aefbd98 100644
--- a/src/components/button/_button-theme.scss
+++ b/src/components/button/_button-theme.scss
@@ -1,6 +1,6 @@
 
 // Applies specified coloring to three supported palettes
-@mixin md-button-theme ($property, $color:500, $opacity: 1) {
+@mixin md-button-theme ($property, $color: 'default', $opacity: 1) {
   &.md-primary {
     #{$property}: md-color($md-primary, $color, $opacity);
   }
diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss
index bead2ca8f351..f61897b45de1 100644
--- a/src/components/checkbox/checkbox.scss
+++ b/src/components/checkbox/checkbox.scss
@@ -13,7 +13,7 @@ $md-checkbox-border-color: if($md-is-dark-theme, rgba(white, 0.7), rgba(black, 0
 /** The color of the checkbox's checkmark / mixedmark. */
 $md-checkbox-mark-color: md-color($md-background, background);
 /** The color that is used as the checkbox background when it is checked. */
-$md-checkbox-background-color: md-color($md-primary, 500);
+$md-checkbox-background-color: md-color($md-accent, 500);
 /** The base duration used for the majority of transitions for the checkbox. */
 $md-checkbox-transition-duration: 90ms;
 /** The amount of spacing between the checkbox and its label. */
diff --git a/src/core/style/_default-theme.scss b/src/core/style/_default-theme.scss
index 24624767c823..22ca178e79b7 100644
--- a/src/core/style/_default-theme.scss
+++ b/src/core/style/_default-theme.scss
@@ -6,8 +6,8 @@
 $md-is-dark-theme: false;
 
 
-$md-primary: md-palette($md-blue, 500, 100, 700, $md-contrast-palettes);
-$md-accent: md-palette($md-red, A200, A100, A400, $md-contrast-palettes);
-$md-warn: md-palette($md-orange, 500, 300, 800, $md-contrast-palettes);
+$md-primary: md-palette($md-teal, 500, 100, 700, $md-contrast-palettes);
+$md-accent: md-palette($md-purple, 500, 300,800, $md-contrast-palettes);
+$md-warn: md-palette($md-red, 500, 300, 900, $md-contrast-palettes);
 $md-foreground: if($md-is-dark-theme, $md-dark-theme-foreground, $md-light-theme-foreground);
 $md-background: if($md-is-dark-theme, $md-dark-theme-background, $md-light-theme-background);

From aa6c740fbd56aff6d6076815cae7c843253cb804 Mon Sep 17 00:00:00 2001
From: Kara Erickson <karakara@google.com>
Date: Mon, 25 Apr 2016 12:00:36 -0700
Subject: [PATCH 05/23] feat(sidenav): add fullscreen mode

---
 src/components/sidenav/sidenav.scss | 19 ++++++++++++++-----
 src/demo-app/demo-app.html          |  2 +-
 src/demo-app/demo-app.scss          |  5 -----
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/sidenav/sidenav.scss b/src/components/sidenav/sidenav.scss
index 42843ae2f3a5..18dfeabcce08 100644
--- a/src/components/sidenav/sidenav.scss
+++ b/src/components/sidenav/sidenav.scss
@@ -42,6 +42,15 @@ $md-sidenav-push-background-color: md-color($md-background, dialog) !default;
   }
 }
 
+/* This mixin ensures a sidenav element spans the whole viewport. */
+@mixin md-sidenav-fullscreen {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
 
 :host {
   // We need a stacking context here so that the backdrop and drawers are clipped to the
@@ -52,6 +61,10 @@ $md-sidenav-push-background-color: md-color($md-background, dialog) !default;
 
   box-sizing: border-box;
 
+  &[fullscreen] {
+    @include md-sidenav-fullscreen();
+  }
+
   // Need this to take up space in the layout.
   display: block;
 
@@ -59,11 +72,7 @@ $md-sidenav-push-background-color: md-color($md-background, dialog) !default;
   overflow-x: hidden;
 
   & > .md-sidenav-backdrop {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    @include md-sidenav-fullscreen();
 
     display: block;
 
diff --git a/src/demo-app/demo-app.html b/src/demo-app/demo-app.html
index c983bdd25be9..a3844694d52d 100644
--- a/src/demo-app/demo-app.html
+++ b/src/demo-app/demo-app.html
@@ -1,4 +1,4 @@
-<md-sidenav-layout class="demo-root">
+<md-sidenav-layout class="demo-root" fullscreen>
   <md-sidenav #start>
     <md-nav-list>
       <a md-list-item [routerLink]="['ButtonDemo']">Button</a>
diff --git a/src/demo-app/demo-app.scss b/src/demo-app/demo-app.scss
index f1ba033500e3..5b1850a9ada9 100644
--- a/src/demo-app/demo-app.scss
+++ b/src/demo-app/demo-app.scss
@@ -1,10 +1,5 @@
 .demo-root {
   font-family: Roboto, 'Helvetica Neue', sans-serif;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
 
   // Helps fonts on OSX looks more consistent with other systems
   // Isn't currently in button styles due to performance concerns

From e933e4e70e4ceebadac8689e2098e3e7f252f300 Mon Sep 17 00:00:00 2001
From: Kara <kara@users.noreply.github.com>
Date: Mon, 25 Apr 2016 12:27:58 -0700
Subject: [PATCH 06/23] chore(sidenav): add todo for fullscreen (#353)

---
 src/components/sidenav/sidenav.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/sidenav/sidenav.scss b/src/components/sidenav/sidenav.scss
index 18dfeabcce08..4d808b44ea75 100644
--- a/src/components/sidenav/sidenav.scss
+++ b/src/components/sidenav/sidenav.scss
@@ -42,7 +42,7 @@ $md-sidenav-push-background-color: md-color($md-background, dialog) !default;
   }
 }
 
-/* This mixin ensures a sidenav element spans the whole viewport. */
+/* This mixin ensures a sidenav element spans the whole viewport.*/
 @mixin md-sidenav-fullscreen {
   position: absolute;
   top: 0;
@@ -61,6 +61,7 @@ $md-sidenav-push-background-color: md-color($md-background, dialog) !default;
 
   box-sizing: border-box;
 
+  // TODO(hansl): Update this with a more robust solution.
   &[fullscreen] {
     @include md-sidenav-fullscreen();
   }

From 0672356290148d27e13d0e33c0bff9b44a58cda0 Mon Sep 17 00:00:00 2001
From: Kara Erickson <karakara@google.com>
Date: Mon, 25 Apr 2016 14:59:20 -0700
Subject: [PATCH 07/23] fix(button): cleaned up button theming

---
 src/components/button/_button-base.scss | 13 +++++++++----
 src/demo-app/button/button-demo.scss    |  2 ++
 src/demo-app/demo-app.scss              |  4 ----
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/button/_button-base.scss b/src/components/button/_button-base.scss
index d15636afb44a..cc989e29e724 100644
--- a/src/components/button/_button-base.scss
+++ b/src/components/button/_button-base.scss
@@ -51,7 +51,7 @@ $md-mini-fab-padding: 8px !default;
   font-size: $md-body-font-size-base;
   font-family: $md-font-family;
   font-weight: 500;
-  color: md-color($md-foreground, text);
+  color: currentColor;
 
   // Sizing.
   margin: $md-button-margin;
@@ -69,7 +69,7 @@ $md-mini-fab-padding: 8px !default;
 %md-raised-button {
   @extend %md-button-base;
 
-  @include md-elevation(1);
+  @include md-elevation(2);
   @include md-button-theme('color', default-contrast);
   @include md-button-theme('background-color');
 
@@ -82,7 +82,7 @@ $md-mini-fab-padding: 8px !default;
               md-elevation-transition-property-value();
 
   &:active {
-    @include md-elevation(2);
+    @include md-elevation(8);
   }
 
   &.md-button-focus {
@@ -102,9 +102,14 @@ $md-mini-fab-padding: 8px !default;
   min-width: 0;
   border-radius: $md-fab-border-radius;
   background-color: md-color($md-accent);
+  color: md-color($md-accent, default-contrast);
   width: $size;
   height: $size;
-  padding: $padding;
+  padding: 0;
+
+  i {
+    padding: $padding 0;
+  }
 
   &.md-button-focus {
     background-color: md-color($md-accent, 600);
diff --git a/src/demo-app/button/button-demo.scss b/src/demo-app/button/button-demo.scss
index 8e826dc48cc9..9cb6349e0ef8 100644
--- a/src/demo-app/button/button-demo.scss
+++ b/src/demo-app/button/button-demo.scss
@@ -6,6 +6,8 @@
   }
 
   section {
+    display: flex;
+    align-items: center;
     background-color: #f7f7f7;
     margin: 8px;
   }
diff --git a/src/demo-app/demo-app.scss b/src/demo-app/demo-app.scss
index 5b1850a9ada9..bf3e1f9263a1 100644
--- a/src/demo-app/demo-app.scss
+++ b/src/demo-app/demo-app.scss
@@ -34,10 +34,6 @@
       justify-content: space-between;
       width: 100%;
     }
-
-    button {
-      color: white;
-    }
   }
 
   h1 {

From 77be2df5634316d6bd8a7b78c124b03b88d66b12 Mon Sep 17 00:00:00 2001
From: Kara Erickson <karakara@google.com>
Date: Mon, 25 Apr 2016 16:14:07 -0700
Subject: [PATCH 08/23] feat(card): add alignment shortcuts for md-card-actions

---
 src/components/card/README.md    | 5 +++++
 src/components/card/card.scss    | 5 +++++
 src/demo-app/card/card-demo.html | 4 ++++
 3 files changed, 14 insertions(+)

diff --git a/src/components/card/README.md b/src/components/card/README.md
index ef62bd4429f6..14c28409ac0c 100644
--- a/src/components/card/README.md
+++ b/src/components/card/README.md
@@ -51,6 +51,11 @@ Output:
 
 <img src="https://material.angularjs.org/material2_assets/cards/sections-card-min.png">
 
+#### Preset shortcuts
+
+`md-card-actions` has a few layout shortcuts. You can add `align="end"` to align the buttons at the end of
+the main axis (flex-end). The default is `align="start"` (flex-start).
+
 ### Preset layouts
 
 You can also leverage preset layouts that format some of the sections together.
diff --git a/src/components/card/card.scss b/src/components/card/card.scss
index f99a69d1fe31..02f9c60f5c66 100644
--- a/src/components/card/card.scss
+++ b/src/components/card/card.scss
@@ -55,6 +55,11 @@ md-card-actions {
   margin-left: -16px;
   margin-right: -16px;
   padding: 8px 0;
+
+  &[align='end'] {
+    display: flex;
+    justify-content: flex-end;
+  }
 }
 
 [md-card-image] {
diff --git a/src/demo-app/card/card-demo.html b/src/demo-app/card/card-demo.html
index a577da8565ba..12617c5f74d1 100644
--- a/src/demo-app/card/card-demo.html
+++ b/src/demo-app/card/card-demo.html
@@ -26,6 +26,10 @@
     <md-card-content>
       <p>Here is some content</p>
     </md-card-content>
+    <md-card-actions align="end">
+      <button md-button>LIKE</button>
+      <button md-button>SHARE</button>
+    </md-card-actions>
   </md-card>
 
   <md-card>

From 9a6ab352f4da6431f27f2f943cff8ee23e3fc7cf Mon Sep 17 00:00:00 2001
From: Kara Erickson <karakara@google.com>
Date: Mon, 25 Apr 2016 15:51:01 -0700
Subject: [PATCH 09/23] chore(icon): add package.json

---
 src/components/icon/package.json | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 src/components/icon/package.json

diff --git a/src/components/icon/package.json b/src/components/icon/package.json
new file mode 100644
index 000000000000..a0e8b8c790f5
--- /dev/null
+++ b/src/components/icon/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "@angular2-material/icon",
+  "version": "2.0.0-alpha.3",
+  "description": "Angular 2 Material icon",
+  "main": "./icon.js",
+  "typings": "./icon.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/angular/material2.git"
+  },
+  "keywords": [
+    "angular",
+    "material",
+    "material design",
+    "components",
+    "icon"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/angular/material2/issues"
+  },
+  "homepage": "https://github.com/angular/material2#readme",
+  "peerDependencies": {
+    "angular2": "^2.0.0-beta.8",
+    "@angular2-material/core": "2.0.0-alpha.3"
+  }
+}

From f4a7266b094998080d45196551ff628bde456b96 Mon Sep 17 00:00:00 2001
From: Kara Erickson <karakara@google.com>
Date: Tue, 26 Apr 2016 10:51:51 -0700
Subject: [PATCH 10/23] fix(checkbox): fix horizontal spacing between
 checkboxes and radio buttons

---
 src/components/checkbox/checkbox.scss    |  9 ++++++--
 src/components/radio/radio.scss          | 26 ++++++++++++++----------
 src/core/style/_variables.scss           |  5 +++++
 src/demo-app/checkbox/checkbox-demo.html |  2 +-
 src/demo-app/checkbox/checkbox-demo.scss |  4 ++++
 src/demo-app/radio/radio-demo.scss       |  4 ++++
 6 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss
index f61897b45de1..9ce568fcb0a7 100644
--- a/src/components/checkbox/checkbox.scss
+++ b/src/components/checkbox/checkbox.scss
@@ -3,7 +3,7 @@
 @import "variables";
 
 /** The width/height of the checkbox element. */
-$md-checkbox-size: 18px !default;
+$md-checkbox-size: $md-toggle-size !default;
 /** The width of the line used to draw the checkmark / mixedmark. */
 $md-checkbox-mark-stroke-size: 2/15 * $md-checkbox-size !default;
 /** The width of the checkbox border shown when the checkbox is unchecked. */
@@ -17,7 +17,7 @@ $md-checkbox-background-color: md-color($md-accent, 500);
 /** The base duration used for the majority of transitions for the checkbox. */
 $md-checkbox-transition-duration: 90ms;
 /** The amount of spacing between the checkbox and its label. */
-$md-checkbox-item-spacing: 4px;
+$md-checkbox-item-spacing: $md-toggle-padding;
 
 // Manual calculation done on SVG
 $_md-checkbox-mark-path-length: 22.910259;
@@ -250,6 +250,11 @@ $_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1)
   }
 }
 
+// TODO(kara): Remove this style when fixing vertical baseline
+.md-checkbox-layout label {
+  line-height: 24px;
+}
+
 .md-checkbox-frame {
   @extend %md-checkbox-outer-box;
 
diff --git a/src/components/radio/radio.scss b/src/components/radio/radio.scss
index 22913dcae1de..d1589500e1a2 100644
--- a/src/components/radio/radio.scss
+++ b/src/components/radio/radio.scss
@@ -1,6 +1,7 @@
 @import "default-theme";
+@import "variables";
 
-$md-radio-width: 20px !default;
+$md-radio-size: $md-toggle-size !default;
 
 // Top-level host container.
 md-radio-button {
@@ -12,7 +13,6 @@ md-radio-button {
 .md-radio-label {
   cursor: pointer;
   display: block;
-  padding: 8px;
   white-space: nowrap;
 }
 
@@ -20,10 +20,10 @@ md-radio-button {
 .md-radio-container {
   box-sizing: border-box;
   display: inline-block;
-  height: $md-radio-width;
+  height: $md-radio-size;
   position: relative;
   top: 2px;
-  width: $md-radio-width;
+  width: $md-radio-size;
 }
 
 // TODO(mtlin): Replace when ink ripple component is implemented.
@@ -60,12 +60,12 @@ md-radio-button {
   border: solid 2px;
   border-radius: 50%;
   box-sizing: border-box;
-  height: $md-radio-width;
+  height: $md-radio-size;
   left: 0;
   position: absolute;
   top: 0;
   transition: border-color ease 0.28s;
-  width: $md-radio-width;
+  width: $md-radio-size;
 
   .md-radio-checked & {
     border-color: md-color($md-accent);
@@ -81,13 +81,13 @@ md-radio-button {
   background-color: md-color($md-accent);
   border-radius: 50%;
   box-sizing: border-box;
-  height: $md-radio-width;
+  height: $md-radio-size;
   left: 0;
   position: absolute;
   top: 0;
   transition: transform ease 0.28s, background-color ease 0.28s;
   transform: scale(0);
-  width: $md-radio-width;
+  width: $md-radio-size;
 
   .md-radio-checked & {
     transform: scale(0.5);
@@ -103,11 +103,15 @@ md-radio-button {
   display: inline-block;
   float: right;
   line-height: 24px;
-  // Equal padding on both sides, for RTL.
-  padding-left: 8px;
-  padding-right: 8px;
+  padding-left: $md-toggle-padding;
   position: relative;
   vertical-align: top;
+
+  [dir='rtl'] & {
+    float: left;
+    padding-right: $md-toggle-padding;
+    padding-left: 0;
+  }
 }
 
 // Underlying native input element.
diff --git a/src/core/style/_variables.scss b/src/core/style/_variables.scss
index d4ce138117c9..00d65b5fc226 100644
--- a/src/core/style/_variables.scss
+++ b/src/core/style/_variables.scss
@@ -15,6 +15,11 @@ $z-index-drawer: 100 !default;
 // Global constants
 $pi: 3.14159265;
 
+// Padding between input toggles and their labels
+$md-toggle-padding: 8px !default;
+// Width and height of input toggles
+$md-toggle-size: 20px !default;
+
 // Easing Curves
 // TODO(jelbourn): all of these need to be revisited
 
diff --git a/src/demo-app/checkbox/checkbox-demo.html b/src/demo-app/checkbox/checkbox-demo.html
index cd108fb13db9..b811f6969563 100644
--- a/src/demo-app/checkbox/checkbox-demo.html
+++ b/src/demo-app/checkbox/checkbox-demo.html
@@ -6,7 +6,7 @@ <h1>md-checkbox: Basic Example</h1>
              [align]="alignment">
   Do you want to <em>foobar</em> the <em>bazquux</em>?
 </md-checkbox> - <strong>{{printResult()}}</strong>
-<div>
+<div class="demo-checkboxes">
 <input id="indeterminate-toggle"
        type="checkbox"
        [(ngModel)]="isIndeterminate"
diff --git a/src/demo-app/checkbox/checkbox-demo.scss b/src/demo-app/checkbox/checkbox-demo.scss
index e69de29bb2d1..a71b2ef00c16 100644
--- a/src/demo-app/checkbox/checkbox-demo.scss
+++ b/src/demo-app/checkbox/checkbox-demo.scss
@@ -0,0 +1,4 @@
+.demo-checkboxes {
+  margin: 8px 0;
+  
+}
\ No newline at end of file
diff --git a/src/demo-app/radio/radio-demo.scss b/src/demo-app/radio/radio-demo.scss
index fd85f1baa3b4..16163c533357 100644
--- a/src/demo-app/radio/radio-demo.scss
+++ b/src/demo-app/radio/radio-demo.scss
@@ -7,4 +7,8 @@
   background-color: #f7f7f7;
   margin: 8px;
   padding: 16px;
+
+  md-radio-button {
+    margin: 8px;
+  }
 }
\ No newline at end of file

From a9bc5fac8eb07d71201e265f51127a80df5d95e9 Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@gmail.com>
Date: Tue, 26 Apr 2016 14:14:24 -0400
Subject: [PATCH 11/23] chore: use md-icon instead of <i> in demos. (#345)

---
 src/components/button/README.md         | 22 +++++++++----------
 src/components/button/_button-base.scss |  2 +-
 src/components/icon/icon.scss           |  2 --
 src/components/list/README.md           | 28 ++++++++++++-------------
 src/demo-app/button/button-demo.html    | 24 ++++++++++-----------
 src/demo-app/button/button-demo.ts      |  3 ++-
 src/demo-app/input/input-demo.html      |  6 +++---
 src/demo-app/input/input-demo.scss      |  2 ++
 src/demo-app/input/input-demo.ts        |  3 ++-
 src/demo-app/list/list-demo.html        |  4 ++--
 src/demo-app/list/list-demo.scss        |  8 +++----
 src/demo-app/toolbar/toolbar-demo.html  | 18 ++++++++--------
 src/demo-app/toolbar/toolbar-demo.ts    |  3 ++-
 13 files changed, 64 insertions(+), 61 deletions(-)

diff --git a/src/components/button/README.md b/src/components/button/README.md
index df9bb47b2cc5..dbf36dc73985 100644
--- a/src/components/button/README.md
+++ b/src/components/button/README.md
@@ -27,23 +27,23 @@ There are five types of buttons:
     * Defaults background to "accent" palette defined in theme
     * Box shadow applied
     * 40 by 40 px
- 
+
 Each is an attribute directive that you can add to a `button` or `a` tag.  You can provide custom content to the button by inserting it
 between the tags, as you would with a normal button.
- 
+
 Example:
- 
+
  ```html
 <button md-button>FLAT</button>
 <button md-raised-button>RAISED</button>
 <button md-icon-button>
-    <i class="material-icons md-24">favorite</i>
+    <md-icon class="md-24">favorite</md-icon>
 </button>
 <button md-fab>
-    <i class="material-icons md-24">add</i>
+    <md-icon class="md-24">add</md-icon>
 </button>
 <button md-mini-fab>
-    <i class="material-icons md-24">add</i>
+    <md-icon class="md-24">add</md-icon>
 </button>
  ```
 
@@ -53,13 +53,13 @@ Output:
 
 ### Theming
 
-All button types can be themed to match your "primary" palette, your "accent" palette, or your "warn" palette using the `color` attribute. 
+All button types can be themed to match your "primary" palette, your "accent" palette, or your "warn" palette using the `color` attribute.
 Simply pass in the palette name.
 
-In flat buttons, the palette chosen will affect the text color, while in other buttons, it affects the background. 
+In flat buttons, the palette chosen will affect the text color, while in other buttons, it affects the background.
 
 Example:
- 
+
  ```html
 <button md-raised-button color="primary">PRIMARY</button>
 <button md-raised-button color="accent">ACCENT</button>
@@ -90,8 +90,8 @@ Output:
  * In high contrast mode, a strong border is added to the button to make it easier to see.
  * Button focus events originating from the keyboard will retain focus styles, while button focus events from the mouse will not.
  * As `md-button` is added to an existing `button` or `a` tag, it enjoys all the accessibility natively built into these elements.
- 
- 
+
+
 ### Upcoming work
 
 We will also be adding ink ripples to buttons in an upcoming milestone.
diff --git a/src/components/button/_button-base.scss b/src/components/button/_button-base.scss
index cc989e29e724..fc591935e7d0 100644
--- a/src/components/button/_button-base.scss
+++ b/src/components/button/_button-base.scss
@@ -107,7 +107,7 @@ $md-mini-fab-padding: 8px !default;
   height: $size;
   padding: 0;
 
-  i {
+  i, md-icon {
     padding: $padding 0;
   }
 
diff --git a/src/components/icon/icon.scss b/src/components/icon/icon.scss
index 1fa23d71bc13..a8bd0cebe37d 100644
--- a/src/components/icon/icon.scss
+++ b/src/components/icon/icon.scss
@@ -13,7 +13,5 @@ md-icon {
   display: inline-block;
   fill: currentColor;
   height: $md-icon-size;
-  margin: auto;
-  vertical-align: middle;
   width: $md-icon-size;
 }
diff --git a/src/components/list/README.md b/src/components/list/README.md
index 4f9ced0631b2..74ea93547ed5 100644
--- a/src/components/list/README.md
+++ b/src/components/list/README.md
@@ -32,8 +32,8 @@ Output:
 
 ### Multi-line lists
 
-If your list requires multiple lines per list item, annotate each line with an `md-line` attribute. 
-You can use whichever heading tag is appropriate for your DOM hierarchy (doesn't have to be `h3`), 
+If your list requires multiple lines per list item, annotate each line with an `md-line` attribute.
+You can use whichever heading tag is appropriate for your DOM hierarchy (doesn't have to be `h3`),
 as long as the `md-line` attribute is included.
 
 ```html
@@ -62,13 +62,13 @@ Two line list output:
 
 <img src="https://material.angularjs.org/material2_assets/list/two-line-list.png">
 
-Three line list output: 
+Three line list output:
 
 <img src="https://material.angularjs.org/material2_assets/list/three-line-list.png">
 
 ### Lists with avatars
 
-To include an avatar, add an image tag with an `md-list-avatar` attribute. 
+To include an avatar, add an image tag with an `md-list-avatar` attribute.
 
 ```html
 <md-list>
@@ -86,11 +86,11 @@ To include an avatar, add an image tag with an `md-list-avatar` attribute.
 Output:
 
 <img src="https://material.angularjs.org/material2_assets/list/list-with-avatar-2.png">
-    
+
 ### Dense lists
-Lists are also available in "dense layout" mode, which shrinks the font size and height of the list 
-to suit UIs that may need to display more information.  To enable this mode, add a `dense` attribute 
-to the main `md-list` tag.  
+Lists are also available in "dense layout" mode, which shrinks the font size and height of the list
+to suit UIs that may need to display more information.  To enable this mode, add a `dense` attribute
+to the main `md-list` tag.
 
 
 ```html
@@ -114,17 +114,17 @@ use `<md-divider>` tags.
 <md-list>
    <h3 md-subheader>Folders</h3>
    <md-list-item *ngFor="#folder of folders">
-      <i md-list-avatar class="material-icons">folder</i>
+      <md-icon md-list-avatar>folder</md-icon>
       <h4 md-line>{{folder.name}}</h4>
       <p md-line class="demo-2"> {{folder.updated}} </p>
    </md-list-item>
    <md-divider></md-divider>
    <h3 md-subheader>Notes</h3>
    <md-list-item *ngFor="#note of notes">
-      <i md-list-avatar class="material-icons">note</i>
+      <md-icon md-list-avatar>note</md-icon>
       <h4 md-line>{{note.name}}</h4>
       <p md-line class="demo-2"> {{note.updated}} </p>
-   </md-list-item>   
+   </md-list-item>
 </md-list>
 ```
 
@@ -151,13 +151,13 @@ If you require a more complex nav list (e.g. with more than one target per item)
   <md-list-item *ngFor="#link of links">
      <a md-line href="...">{{ link }}</a>
      <button md-icon-button (click)="showInfo(link)">
-        <i class="material-icons">info</i>
+        <md-icon>info</md-icon>
      </button>
   </md-list-item>
 </md-nav-list>
 ```
 
 ### Lists with secondary text
-Secondary text styling will be part of a broader typography module to 
-[come later](https://github.com/angular/material2/issues/205), and won’t be implemented as part of this component 
+Secondary text styling will be part of a broader typography module to
+[come later](https://github.com/angular/material2/issues/205), and won’t be implemented as part of this component
 specifically. Gray text in the examples above comes from a "demo-2" class added manually by the demo.
\ No newline at end of file
diff --git a/src/demo-app/button/button-demo.html b/src/demo-app/button/button-demo.html
index a6e25ecb431c..3b4d4beeffa3 100644
--- a/src/demo-app/button/button-demo.html
+++ b/src/demo-app/button/button-demo.html
@@ -3,10 +3,10 @@
     <button md-button>flat</button>
     <button md-raised-button>raised</button>
     <button md-fab>
-      <i class="material-icons md-24">check</i>
+      <md-icon class="md-24">check</md-icon>
     </button>
     <button md-mini-fab>
-      <i class="material-icons md-24">check</i>
+      <md-icon class="md-24">check</md-icon>
     </button>
   </section>
 
@@ -14,10 +14,10 @@
     <a href="http://www.google.com" md-button color="primary">link</a>
     <a href="http://www.google.com" md-raised-button>link</a>
     <a href="http://www.google.com" md-fab>
-      <i class="material-icons md-24">check</i>
+      <md-icon class="md-24">check</md-icon>
     </a>
     <a href="http://www.google.com" md-mini-fab>
-      <i class="material-icons md-24">check</i>
+      <md-icon class="md-24">check</md-icon>
     </a>
   </section>
 
@@ -35,27 +35,27 @@
 
   <section>
     <button md-fab color="primary">
-      <i class="material-icons md-24">home</i>
+      <md-icon class="md-24">home</md-icon>
     </button>
     <button md-fab color="accent">
-      <i class="material-icons md-24">favorite</i>
+      <md-icon class="md-24">favorite</md-icon>
     </button>
     <button md-fab color="warn">
-      <i class="material-icons md-24">feedback</i>
+      <md-icon class="md-24">feedback</md-icon>
     </button>
   </section>
 
   <section>
     <button md-icon-button color="primary">
-      <i class="material-icons md-24">menu</i>
+      <md-icon class="md-24">menu</md-icon>
     </button>
 
     <button md-icon-button color="accent">
-      <i class="material-icons md-24">favorite</i>
+      <md-icon class="md-24">favorite</md-icon>
     </button>
 
     <button md-icon-button>
-      <i class="material-icons md-24">more_vert</i>
+      <md-icon class="md-24">more_vert</md-icon>
     </button>
   </section>
 
@@ -69,11 +69,11 @@
     <a href="http://www.google.com" md-button color="accent" [disabled]="isDisabled">off</a>
     <button md-raised-button color="primary" [disabled]="isDisabled">off</button>
     <button md-mini-fab [disabled]="isDisabled">
-      <i class="material-icons md-24">check</i>
+      <md-icon class="md-24">check</md-icon>
     </button>
 
     <button md-icon-button color="accent" [disabled]="isDisabled">
-      <i class="material-icons md-24">favorite</i>
+      <md-icon class="md-24">favorite</md-icon>
     </button>
   </section>
   <section>
diff --git a/src/demo-app/button/button-demo.ts b/src/demo-app/button/button-demo.ts
index 8304c19ac193..07aedc1ac3f7 100644
--- a/src/demo-app/button/button-demo.ts
+++ b/src/demo-app/button/button-demo.ts
@@ -1,11 +1,12 @@
 import {Component} from 'angular2/core';
 import {MdButton, MdAnchor} from '../../components/button/button';
+import {MdIcon} from '../../components/icon/icon';
 
 @Component({
     selector: 'button-demo',
     templateUrl: 'demo-app/button/button-demo.html',
     styleUrls: ['demo-app/button/button-demo.css'],
-    directives: [MdButton, MdAnchor]
+    directives: [MdButton, MdAnchor, MdIcon]
 })
 export class ButtonDemo {
   isDisabled: boolean = false;
diff --git a/src/demo-app/input/input-demo.html b/src/demo-app/input/input-demo.html
index 0c466a9e722a..6e7b157dc93b 100644
--- a/src/demo-app/input/input-demo.html
+++ b/src/demo-app/input/input-demo.html
@@ -85,10 +85,10 @@
     <p>
       <md-input>
         <md-placeholder>
-          I <i class="material-icons demo-icons">favorite</i> <b>bold</b> placeholder
+          I <md-icon class="demo-icons">favorite</md-icon> <b>bold</b> placeholder
         </md-placeholder>
         <md-hint>
-          I also <i class="material-icons demo-icons">home</i> <i>italic</i> hint labels
+          I also <md-icon class="demo-icons">home</md-icon> <i>italic</i> hint labels
         </md-hint>
       </md-input>
     </p>
@@ -122,7 +122,7 @@
       <br/>
       Both:
       <md-input #email placeholder="Email Address" value="angular-core" align="end">
-        <span md-prefix><i [class.primary]="email.focused" class="material-icons demo-icons demo-transform">email</i>&nbsp;</span>
+        <span md-prefix><md-icon [class.primary]="email.focused" class="demo-icons demo-transform">email</md-icon>&nbsp;</span>
         <span md-suffix class="demo-transform" [class.primary]="email.focused">&nbsp;@gmail.com</span>
       </md-input>
     </p>
diff --git a/src/demo-app/input/input-demo.scss b/src/demo-app/input/input-demo.scss
index e28f5c1c93f1..4ec33a506a96 100644
--- a/src/demo-app/input/input-demo.scss
+++ b/src/demo-app/input/input-demo.scss
@@ -13,7 +13,9 @@
 
 .demo-icons {
   font-size: 100%;
+  height: inherit;
   vertical-align: top;
+  width: inherit;
 }
 
 .demo-transform {
diff --git a/src/demo-app/input/input-demo.ts b/src/demo-app/input/input-demo.ts
index 65370b747648..b0c74263a981 100644
--- a/src/demo-app/input/input-demo.ts
+++ b/src/demo-app/input/input-demo.ts
@@ -3,6 +3,7 @@ import {MD_INPUT_DIRECTIVES} from '../../components/input/input';
 import {MdButton} from '../../components/button/button';
 import {MdCard} from '../../components/card/card';
 import {MdCheckbox} from '../../components/checkbox/checkbox';
+import {MdIcon} from '../../components/icon/icon';
 import {MdToolbar} from '../../components/toolbar/toolbar';
 
 
@@ -12,7 +13,7 @@ let max = 5;
   selector: 'input-demo',
   templateUrl: 'demo-app/input/input-demo.html',
   styleUrls: ['demo-app/input/input-demo.css'],
-  directives: [MdCard, MdCheckbox, MdButton, MdToolbar, MD_INPUT_DIRECTIVES]
+  directives: [MdCard, MdCheckbox, MdButton, MdIcon, MdToolbar, MD_INPUT_DIRECTIVES]
 })
 export class InputDemo {
   dividerColor: boolean;
diff --git a/src/demo-app/list/list-demo.html b/src/demo-app/list/list-demo.html
index f6de4c683557..0982bab7d57f 100644
--- a/src/demo-app/list/list-demo.html
+++ b/src/demo-app/list/list-demo.html
@@ -81,7 +81,7 @@ <h2>Nav lists</h2>
       <md-list-item *ngFor="#link of links">
         <a md-line href="http://www.google.com">{{ link.name }}</a>
         <button md-icon-button (click)="infoClicked=!infoClicked">
-          <i class="material-icons">info</i>
+          <md-icon>info</md-icon>
         </button>
       </md-list-item>
     </md-nav-list>
@@ -96,7 +96,7 @@ <h2>Nav lists</h2>
       <md-list-item *ngFor="#link of links">
         <a md-line href="http://www.google.com">{{ link.name }}</a>
         <button md-icon-button (click)="infoClicked=!infoClicked">
-          <i class="material-icons">info</i>
+          <md-icon class="material-icons">info</md-icon>
         </button>
       </md-list-item>
     </md-nav-list>
diff --git a/src/demo-app/list/list-demo.scss b/src/demo-app/list/list-demo.scss
index b42fc322c906..0aab51351a7d 100644
--- a/src/demo-app/list/list-demo.scss
+++ b/src/demo-app/list/list-demo.scss
@@ -13,14 +13,14 @@
     margin-top: 20px;
   }
 
+  md-icon {
+    color: rgba(0,0,0,0.12);
+  }
+
   [md-list-icon] {
     color: white;
     background: rgba(0,0,0,0.3);
   }
-
-  i {
-    color: rgba(0,0,0,0.12);
-  }
 }
 
 .demo-secondary-text {
diff --git a/src/demo-app/toolbar/toolbar-demo.html b/src/demo-app/toolbar/toolbar-demo.html
index 2426c6113e83..e6d3f30c5172 100644
--- a/src/demo-app/toolbar/toolbar-demo.html
+++ b/src/demo-app/toolbar/toolbar-demo.html
@@ -2,34 +2,34 @@
 
   <p>
     <md-toolbar>
-      <i class="material-icons demo-toolbar-icon">menu</i>
+      <md-icon class="demo-toolbar-icon">menu</md-icon>
       <span>Default Toolbar</span>
 
       <span class="demo-fill-remaining"></span>
 
-      <i class="material-icons">code</i>
+      <md-icon>code</md-icon>
     </md-toolbar>
   </p>
 
   <p>
     <md-toolbar color="primary">
-      <i class="material-icons demo-toolbar-icon">menu</i>
+      <md-icon class="demo-toolbar-icon">menu</md-icon>
       <span>Primary Toolbar</span>
 
       <span class="demo-fill-remaining"></span>
 
-      <i class="material-icons">code</i>
+      <md-icon>code</md-icon>
     </md-toolbar>
   </p>
 
   <p>
     <md-toolbar color="accent">
-      <i class="material-icons demo-toolbar-icon">menu</i>
+      <md-icon class="demo-toolbar-icon">menu</md-icon>
       <span>Accent Toolbar</span>
 
       <span class="demo-fill-remaining"></span>
 
-      <i class="material-icons">code</i>
+      <md-icon>code</md-icon>
     </md-toolbar>
   </p>
 
@@ -51,7 +51,7 @@
 
         <span class="demo-fill-remaining"></span>
 
-        <i class="material-icons demo-toolbar-icon">verified_user</i>
+        <md-icon class="demo-toolbar-icon">verified_user</md-icon>
       </md-toolbar-row>
 
       <md-toolbar-row>
@@ -59,8 +59,8 @@
 
         <span class="demo-fill-remaining"></span>
 
-        <i class="material-icons demo-toolbar-icon">favorite</i>
-        <i class="material-icons demo-toolbar-icon">delete</i>
+        <md-icon class="demo-toolbar-icon">favorite</md-icon>
+        <md-icon class="demo-toolbar-icon">delete</md-icon>
       </md-toolbar-row>
     </md-toolbar>
   </p>
diff --git a/src/demo-app/toolbar/toolbar-demo.ts b/src/demo-app/toolbar/toolbar-demo.ts
index b23f60335e84..a2bfedcea988 100644
--- a/src/demo-app/toolbar/toolbar-demo.ts
+++ b/src/demo-app/toolbar/toolbar-demo.ts
@@ -1,11 +1,12 @@
 import {Component} from 'angular2/core';
+import {MdIcon} from '../../components/icon/icon';
 import {MdToolbar} from '../../components/toolbar/toolbar';
 
 @Component({
   selector: 'toolbar-demo',
   templateUrl: 'demo-app/toolbar/toolbar-demo.html',
   styleUrls: ['demo-app/toolbar/toolbar-demo.css'],
-  directives: [MdToolbar]
+  directives: [MdToolbar, MdIcon]
 })
 export class ToolbarDemo {
 

From dbe3cc5ec5a835ff26bd589bf6cbef1014faa0aa Mon Sep 17 00:00:00 2001
From: Kara Erickson <karakara@google.com>
Date: Tue, 26 Apr 2016 11:05:04 -0700
Subject: [PATCH 12/23] fix(sidenav): add min width for empty navs

---
 src/components/sidenav/sidenav.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/sidenav/sidenav.scss b/src/components/sidenav/sidenav.scss
index 4d808b44ea75..18e38aee1784 100644
--- a/src/components/sidenav/sidenav.scss
+++ b/src/components/sidenav/sidenav.scss
@@ -107,6 +107,7 @@ $md-sidenav-push-background-color: md-color($md-background, dialog) !default;
     top: 0;
     bottom: 0;
     z-index: 3;
+    min-width: 5%;
 
     background-color: $md-sidenav-background-color;
 

From ca5339bdc9e68d9c7518d1323e8e70a2fc501ae0 Mon Sep 17 00:00:00 2001
From: Kara Erickson <karakara@google.com>
Date: Thu, 28 Apr 2016 09:09:45 -0700
Subject: [PATCH 13/23] chore(demo): update to hammer on google cdn

---
 src/index.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/index.html b/src/index.html
index db5c2f8b16fb..dc88807a9014 100644
--- a/src/index.html
+++ b/src/index.html
@@ -24,8 +24,7 @@
   <script src="vendor/angular2/bundles/http.dev.js"></script>
   <script src="vendor/angular2/bundles/router.dev.js"></script>
 
-  <!-- TODO: Replace with updated Hammer version in Google CDN -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.6/hammer.min.js"></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/hammerjs/2.0.8/hammer.min.js"></script>
   <script>
     System.config({
       packages: {

From 9857f0ff81e8809adc1067c2f8af81d2cedee5bc Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@gmail.com>
Date: Fri, 29 Apr 2016 11:22:08 -0400
Subject: [PATCH 14/23] docs(icon): add README (#372)

---
 src/components/icon/README.md | 116 ++++++++++++++++++++++++++++++++++
 1 file changed, 116 insertions(+)
 create mode 100644 src/components/icon/README.md

diff --git a/src/components/icon/README.md b/src/components/icon/README.md
new file mode 100644
index 000000000000..355a8db009b7
--- /dev/null
+++ b/src/components/icon/README.md
@@ -0,0 +1,116 @@
+# md-icon
+
+`md-icon` is a component that displays an icon, which can be a font glyph or an SVG image.
+
+## MdIconRegistry
+
+`MdIconRegistry` is an injectable service that allows you to associate icon names with SVG URLs and define aliases for CSS font classes. Its methods are discussed below and listed in the API summary.
+
+## Font icons
+
+### Ligatures
+
+Some fonts are designed to show icons by using [ligatures](https://en.wikipedia.org/wiki/Typographic_ligature), for example by rendering the text "home" as a home image. To use a ligature icon, put its text in the content of the `md-icon` component, for example:
+```html
+<md-icon>home</md-icon>
+```
+
+By default the [Material icons font](http://google.github.io/material-design-icons/#icon-font-for-the-web) is used. (You will still need to include the HTML to load the font and its CSS, as described in the link). You can specify a different font by setting the `fontSet` input to either the CSS class to apply to use the desired font, or to an alias previously registered with `MdIconRegistry.registerFontClassAlias`, for example:
+```javascript
+mdIconRegistry.registerFontClassAlias('myfont', 'my-icon-font-class');
+```
+
+```html
+<md-icon fontSet="myfont">help</md-icon>
+```
+
+### Font icons via CSS
+
+Fonts can also display icons by defining a CSS class for each icon glyph, which typically uses a :before selector to cause the icon to appear. [FontAwesome](https://fortawesome.github.io/Font-Awesome/examples/) uses this approach to display its icons. To use such a font, set the `fontSet` input to the font's CSS class (either the class itself or an alias registered with `MdIconRegistry.registerFontClassAlias`), and set the `fontIcon` input to the class for the specific icon to show. Example:
+
+```html
+<md-icon fontSet="fa" fontIcon="fa-square"></md-icon>
+```
+
+For both types of font icons, you can specify the default font class to use when `fontSet` is not explicitly set by calling `MdIconRegistry.setDefaultFontSetClass`.
+
+## SVG icons
+
+When an `md-icon` component displays an SVG icon, it does so by directly inlining the SVG content into the page as a child of the component. (Rather than using an <img> tag or a div background image). This makes it easier to apply CSS styles to SVG icons. For example, the default color of the SVG content is the CSS [currentColor](http://www.quirksmode.org/css/color/currentcolor.html) value. This makes SVG icons by default have the same color as surrounding text, and allows you to change the color by setting the "color" style on the `md-icon` element.
+
+### Icons from URLs
+
+SVG icons can be used either by directly specifying the icon's URL, or by associating an icon name with a URL and then referring to the name. To use a URL directly, set the `svgSrc` input:
+```html
+<md-icon svgSrc="/assets/sun.svg"></md-icon>
+```
+
+### Named icons
+
+To associate a name with an icon URL, use the `addSvgIcon` or `addSvgIconInNamespace` methods of `MdIconRegistry`. After registering an icon, it can be displayed by setting the `svgIcon` input. For an icon in the default namespace, use the name directly. For a non-default namespace, use the format `[namespace]:[name]`. Examples:
+```javascript
+mdIconRegistry.addSvgIcon('moon', '/assets/moon.svg');
+mdIconRegistry.addSvgIconInNamespace('animals', 'cat', '/assets/cat.svg');
+```
+
+```html
+<md-icon svgIcon="moon"></svg-icon>
+<md-icon svgIcon="animals:cat"></svg-icon>
+```
+
+### Icon sets
+
+Icon sets allow grouping multiple icons into a single SVG file. The content of an icon set file looks like this, where each nested `<svg>` tag defines an individual icon, and is identified with a unique "id" attribute.
+```
+<svg>
+  <defs>
+    <svg id="mercury">...</svg>
+    <svg id="venus">...</svg>
+    <svg id="earth">...</svg>
+    <svg id="mars">...</svg>
+  </defs>
+</svg>
+```
+
+Icon sets are registered using the `addSvgIconSet` or `addSvgIconSetInNamespace` methods of `MdIconRegistry`. After an icon set is registered, each of its embedded icons can be accessed by their "id" attributes. To display an icon from an icon set, use the `svgIcon` input in the same way as for individually registered icons. Example:
+```javascript
+mdIconRegistry.addSvgIconSetInNamespace('planets', '/assets/planets.svg');
+```
+
+```html
+<md-icon svgIcon="planets:venus"></md-icon>
+```
+
+Multiple icon sets can be registered in the same namespace. If you request an icon whose id appears in more than one icon set, the icon from the most recently registered set will be used.
+
+Note that all SVG icons are fetched via XmlHttpRequest, and due to the same-origin policy their URLs must be on the same domain as the containing page, or their servers must be configured to allow cross-domain access.
+
+### Accessibility
+
+If you set an "aria-label" attribute on the md-icon element, its value will be used as-is. If you do not, the md-icon component will attempt to set the aria-label value from one of these sources:
+* The `alt` attribute
+* The `fontIcon` input
+* The name of the icon from the `svgIcon` input (not including any namespace)
+* The text content of the component (for ligature icons)
+
+### API Summary
+
+md-icon Properties:
+
+| Name         | Type     | Description |
+| ---          | ---      | --- |
+| `svgSrc`     | string   | The URL of the SVG icon to display |
+| `svgIcon`    | string   | The name (and possibly namespace) of an icon previously registered with `MdIconRegistry.addSvgIcon` or `MdIconRegistry.addSvgIconInNamespace` |
+| `fontSet`    | string   | The font to use to display an icon glyph. The value can be either a CSS class name, or an alias previously defined with `MdIconRegistry.registerFontClassAlias` |
+| `fontIcon`   | string   | The CSS class that identifies the specific icon to use from an icon font |
+
+MdIconRegistry methods (all methods return `this` for chaining):
+
+| Signature   | Description |
+| ---         | --- |
+| addSvgIcon(name: string, url: string): MdIconProvider | Associates an icon name with a URL in the default namespace. When an `md-icon` component has its `svgIcon` input set to this name, the icon will be loaded from this URL. |
+| addSvgIconInNamespace(namespace: string, iconName: string, url: string): MdIconProvider | Associates an icon name with a URL in the specified namespace. |
+| addSvgIconSet(url: string): MdIconProvider | Makes the icons contained in the icon set from a URL available in the default namespace. |
+| addSvgIconSetInNamespace(namespace: string, url: string): MdIconProvider | Makes the icons contained in the icon set from a URL available in the specified namespace. |
+| registerFontClassAlias(alias: string, className: string): MdIconProvider | Associates a font alias with a CSS class. When an `md-icon` component has its `fontSet` input set to the alias, the CSS class will be added to the component's element. It is assumed that the user has defined a corresponding CSS rule to set the desired font. |
+| setDefaultFontSetClass(className: string): MdIconProvider | Sets the default CSS class to apply to font icons when mdFontSet is not set. |

From fea592345441296cc3d0a37ae6663176dc7847e3 Mon Sep 17 00:00:00 2001
From: Kara Erickson <karakara@google.com>
Date: Fri, 29 Apr 2016 15:48:40 -0700
Subject: [PATCH 15/23] fix(sidenav): prevent content from scrolling when
 sidenav is open

---
 src/components/sidenav/sidenav.scss |  7 +++++
 src/components/sidenav/sidenav.ts   | 40 ++++++++++++++++++++++-------
 src/demo-app/demo-app.scss          |  9 +++----
 3 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/src/components/sidenav/sidenav.scss b/src/components/sidenav/sidenav.scss
index 18e38aee1784..8e9a710faa81 100644
--- a/src/components/sidenav/sidenav.scss
+++ b/src/components/sidenav/sidenav.scss
@@ -64,6 +64,10 @@ $md-sidenav-push-background-color: md-color($md-background, dialog) !default;
   // TODO(hansl): Update this with a more robust solution.
   &[fullscreen] {
     @include md-sidenav-fullscreen();
+
+    &.md-sidenav-opened {
+      overflow: hidden;
+    }
   }
 
   // Need this to take up space in the layout.
@@ -109,6 +113,9 @@ $md-sidenav-push-background-color: md-color($md-background, dialog) !default;
     z-index: 3;
     min-width: 5%;
 
+    // TODO(kara): revisit scrolling behavior for sidenavs
+    overflow-y: auto;
+
     background-color: $md-sidenav-background-color;
 
     @include md-sidenav-transition(0, -100%);
diff --git a/src/components/sidenav/sidenav.ts b/src/components/sidenav/sidenav.ts
index 28a50ac25dda..93d72fa3f1f2 100644
--- a/src/components/sidenav/sidenav.ts
+++ b/src/components/sidenav/sidenav.ts
@@ -13,6 +13,7 @@ import {
   Type,
   ChangeDetectionStrategy,
   EventEmitter,
+  Renderer
 } from 'angular2/core';
 import {BaseException} from 'angular2/src/facade/exceptions';
 import {Dir} from '../../core/rtl/dir';
@@ -49,7 +50,7 @@ export class MdSidenav {
   @Input() mode: 'over' | 'push' | 'side' = 'over';
 
   /** Whether the sidenav is opened. */
-  @Input('opened') private _opened: boolean;
+  @Input('opened') private _opened: boolean = false;
 
   /** Event emitted when the sidenav is being opened. Use this to synchronize animations. */
   @Output('open-start') onOpenStart = new EventEmitter<void>();
@@ -247,7 +248,8 @@ export class MdSidenavLayout implements AfterContentInit {
   get start() { return this._start; }
   get end() { return this._end; }
 
-  constructor(@Optional() @Host() private _dir: Dir) {
+  constructor(@Optional() @Host() private _dir: Dir, private _element: ElementRef,
+              private _renderer: Renderer) {
     // If a `Dir` directive exists up the tree, listen direction changes and update the left/right
     // properties to point to the proper start/end.
     if (_dir != null) {
@@ -258,9 +260,28 @@ export class MdSidenavLayout implements AfterContentInit {
   ngAfterContentInit() {
     // On changes, assert on consistency.
     this._sidenavs.changes.subscribe(() => this._validateDrawers());
+    this._sidenavs.forEach((sidenav: MdSidenav) => this._watchSidenavToggle(sidenav));
     this._validateDrawers();
   }
 
+  /*
+  * Subscribes to sidenav events in order to set a class on the main layout element when the sidenav
+  * is open and the backdrop is visible. This ensures any overflow on the layout element is properly
+  * hidden.
+  * */
+  private _watchSidenavToggle(sidenav: MdSidenav): void {
+    if (!sidenav || sidenav.mode === 'side') { return; }
+    sidenav.onOpen.subscribe(() => this._setLayoutClass(sidenav, true));
+    sidenav.onClose.subscribe(() => this._setLayoutClass(sidenav, false));
+  }
+
+  /*
+  * Toggles the 'md-sidenav-opened' class on the main 'md-sidenav-layout' element.
+  * */
+  private _setLayoutClass(sidenav: MdSidenav, bool: boolean): void {
+    this._renderer.setElementClass(this._element.nativeElement, 'md-sidenav-opened', bool);
+  }
+
 
   /** The sidenav at the start/end alignment, independent of direction. */
   private _start: MdSidenav;
@@ -318,9 +339,13 @@ export class MdSidenavLayout implements AfterContentInit {
     }
   }
 
-  private _isShowingBackdrop() {
-    return (this._start != null && this._start.mode != 'side' && this._start.opened)
-        || (this._end != null && this._end.mode != 'side' && this._end.opened);
+  private _isShowingBackdrop(): boolean {
+    return (this._isSidenavOpen(this._start) && this._start.mode != 'side')
+        || (this._isSidenavOpen(this._end) && this._end.mode != 'side');
+  }
+
+  private _isSidenavOpen(side: MdSidenav): boolean {
+    return side != null && side.opened;
   }
 
   /**
@@ -330,10 +355,7 @@ export class MdSidenavLayout implements AfterContentInit {
    * @private
    */
   private _getSidenavEffectiveWidth(sidenav: MdSidenav, mode: string): number {
-    if (sidenav != null && sidenav.mode == mode && sidenav.opened) {
-      return sidenav._width;
-    }
-    return 0;
+    return (this._isSidenavOpen(sidenav) && sidenav.mode == mode) ? sidenav._width : 0;
   }
 
   private _getMarginLeft() {
diff --git a/src/demo-app/demo-app.scss b/src/demo-app/demo-app.scss
index bf3e1f9263a1..eec56e9018bf 100644
--- a/src/demo-app/demo-app.scss
+++ b/src/demo-app/demo-app.scss
@@ -9,13 +9,13 @@
   }
 
   md-sidenav {
-    width: 15%;
+    min-width: 15%;
 
     [md-button] {
       width: 100%;
-      position: absolute;
+      position: relative;
       bottom: 0;
-      margin-bottom: 24px;
+      margin: 24px 0;
     }
   }
 
@@ -39,5 +39,4 @@
   h1 {
     font-size: 20px;
   }
-}
-
+}
\ No newline at end of file

From 6e4fe5e4172bb150f8d46c9f007ba2c2ff5bdf3a Mon Sep 17 00:00:00 2001
From: Jeremy Elbourn <jelbourn@gmail.com>
Date: Fri, 29 Apr 2016 18:33:11 -0700
Subject: [PATCH 16/23] fix: update angular to beta.17 (#378)

---
 package.json                                |   6 +-
 src/components/button/button.spec.ts        |  26 ++--
 src/components/checkbox/README.md           |   2 +-
 src/components/checkbox/checkbox.ts         |   2 +-
 src/components/icon/icon-registry.ts        |  23 +++-
 src/components/icon/icon.spec.ts            |  55 ++++----
 src/components/icon/icon.ts                 |  28 ++--
 src/components/input/input.spec.ts          | 138 ++++++++++----------
 src/components/list/README.md               |  16 +--
 src/components/list/list.spec.ts            |  10 +-
 src/components/radio/README.md              |   4 +-
 src/components/radio/radio.spec.ts          |  60 +++++----
 src/components/radio/radio.ts               |   4 +-
 src/components/sidenav/sidenav.html         |  12 +-
 src/components/sidenav/sidenav.ts           |  12 +-
 src/core/annotations/field-value.ts         |   7 +-
 src/core/overlay/overlay.spec.ts            |  11 +-
 src/core/overlay/overlay.ts                 |   7 +-
 src/core/portal/dom-portal-host.ts          |  17 +--
 src/core/portal/portal-directives.ts        |  16 ++-
 src/core/portal/portal.spec.ts              |  29 ++--
 src/core/portal/portal.ts                   |  14 +-
 src/demo-app/checkbox/nested-checklist.html |   4 +-
 src/demo-app/input/input-demo.html          |   2 +-
 src/demo-app/list/list-demo.html            |  24 ++--
 src/demo-app/overlay/overlay-demo.ts        |   9 +-
 src/demo-app/radio/radio-demo.html          |   2 +-
 test/karma.config.ts                        |   3 +
 28 files changed, 273 insertions(+), 270 deletions(-)

diff --git a/package.json b/package.json
index 8837096f1bc0..aebcb234be87 100644
--- a/package.json
+++ b/package.json
@@ -25,13 +25,13 @@
     "node": ">= 4.2.1 < 5"
   },
   "dependencies": {
-    "angular2": "2.0.0-beta.15",
+    "angular2": "2.0.0-beta.17",
     "es6-promise": "^3.0.2",
     "es6-shim": "^0.35.0",
     "reflect-metadata": "0.1.2",
-    "rxjs": "5.0.0-beta.2",
+    "rxjs": "5.0.0-beta.6",
     "systemjs": "0.19.20",
-    "zone.js": "0.6.10"
+    "zone.js": "0.6.12"
   },
   "devDependencies": {
     "add-stream": "^1.0.0",
diff --git a/src/components/button/button.spec.ts b/src/components/button/button.spec.ts
index 916fd15c2f4a..ffe5d3614463 100644
--- a/src/components/button/button.spec.ts
+++ b/src/components/button/button.spec.ts
@@ -1,16 +1,10 @@
-import {
-  it,
-  describe,
-  expect,
-  beforeEach,
-  inject,
-  TestComponentBuilder
-} from 'angular2/testing';
+import {it, describe, expect, beforeEach, inject, TestComponentBuilder} from 'angular2/testing';
 import {Component} from 'angular2/core';
 import {By} from 'angular2/platform/browser';
-
 import {MdButton, MdAnchor} from './button';
 
+
+
 export function main() {
   describe('MdButton', () => {
     let builder: TestComponentBuilder;
@@ -21,7 +15,7 @@ export function main() {
 
     // General button tests
     it('should apply class based on color attribute', (done: () => void) => {
-      return builder.createAsync(TestApp).then((fixture) => {
+      return builder.createAsync(TestApp).then(fixture => {
         let testComponent = fixture.debugElement.componentInstance;
         let buttonDebugElement = fixture.debugElement.query(By.css('button'));
         let aDebugElement = fixture.debugElement.query(By.css('a'));
@@ -40,7 +34,7 @@ export function main() {
     });
 
     it('should should not clear previous defined classes', (done: () => void) => {
-      return builder.createAsync(TestApp).then((fixture) => {
+      return builder.createAsync(TestApp).then(fixture => {
         let testComponent = fixture.debugElement.componentInstance;
         let buttonDebugElement = fixture.debugElement.query(By.css('button'));
 
@@ -66,7 +60,7 @@ export function main() {
     // Regular button tests
     describe('button[md-button]', () => {
       it('should handle a click on the button', (done: () => void) => {
-        return builder.createAsync(TestApp).then((fixture) => {
+        return builder.createAsync(TestApp).then(fixture => {
           let testComponent = fixture.debugElement.componentInstance;
           let buttonDebugElement = fixture.debugElement.query(By.css('button'));
 
@@ -77,7 +71,7 @@ export function main() {
       });
 
       it('should not increment if disabled', (done: () => void) => {
-        return builder.createAsync(TestApp).then((fixture) => {
+        return builder.createAsync(TestApp).then(fixture => {
           let testComponent = fixture.debugElement.componentInstance;
           let buttonDebugElement = fixture.debugElement.query(By.css('button'));
 
@@ -96,7 +90,7 @@ export function main() {
     // Anchor button tests
     describe('a[md-button]', () => {
       it('should not redirect if disabled', (done: () => void) => {
-        return builder.createAsync(TestApp).then((fixture) => {
+        return builder.createAsync(TestApp).then(fixture => {
           let testComponent = fixture.debugElement.componentInstance;
           let buttonDebugElement = fixture.debugElement.query(By.css('a'));
 
@@ -110,7 +104,7 @@ export function main() {
       });
 
       it('should remove tabindex if disabled', (done: () => void) => {
-        return builder.createAsync(TestApp).then((fixture) => {
+        return builder.createAsync(TestApp).then(fixture => {
           let testComponent = fixture.debugElement.componentInstance;
           let buttonDebugElement = fixture.debugElement.query(By.css('a'));
           expect(buttonDebugElement.nativeElement.getAttribute('tabIndex')).toBe(null);
@@ -123,7 +117,7 @@ export function main() {
       });
 
       it('should add aria-disabled attribute if disabled', (done: () => void) => {
-        return builder.createAsync(TestApp).then((fixture) => {
+        return builder.createAsync(TestApp).then(fixture => {
           let testComponent = fixture.debugElement.componentInstance;
           let buttonDebugElement = fixture.debugElement.query(By.css('a'));
           fixture.detectChanges();
diff --git a/src/components/checkbox/README.md b/src/components/checkbox/README.md
index c8e61c74a072..e7cfc28a36d4 100644
--- a/src/components/checkbox/README.md
+++ b/src/components/checkbox/README.md
@@ -15,7 +15,7 @@ A demo of the checkbox can be found at https://plnkr.co/edit/P7qce8lN9n2flS6kBhD
 
 ```html
 <ul>
-  <li *ngFor="#todo of todos">
+  <li *ngFor="let todo of todos">
     <md-checkbox [checked]="todo.completed"
                  (change)="todo.completed = $event">
       {{todo.name}}
diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts
index 43619673cd90..d91883185d60 100644
--- a/src/components/checkbox/checkbox.ts
+++ b/src/components/checkbox/checkbox.ts
@@ -105,7 +105,7 @@ export class MdCheckbox implements ControlValueAccessor {
   @Input() tabindex: number = 0;
 
   /** Event emitted when the checkbox's `checked` value changes. */
-  @Output() change: EventEmitter<boolean> = new EventEmitter();
+  @Output() change: EventEmitter<boolean> = new EventEmitter<boolean>();
 
   /** Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor. */
   onTouched: () => any = () => {};
diff --git a/src/components/icon/icon-registry.ts b/src/components/icon/icon-registry.ts
index d9246074b4ab..27704ff18d90 100644
--- a/src/components/icon/icon-registry.ts
+++ b/src/components/icon/icon-registry.ts
@@ -143,11 +143,11 @@ export class MdIconRegistry {
    */
   getSvgIconFromUrl(url: string): Observable<SVGElement> {
     if (this._cachedIconsByUrl.has(url)) {
-      return Observable.of(this._cachedIconsByUrl.get(url).cloneNode(true));
+      return Observable.of(cloneSvg(this._cachedIconsByUrl.get(url)));
     }
     return this._loadSvgIconFromConfig(new SvgIconConfig(url))
         .do(svg => this._cachedIconsByUrl.set(url, svg))
-        .map(svg => svg.cloneNode(true));
+        .map(svg => cloneSvg(svg));
   }
 
   /**
@@ -175,12 +175,12 @@ export class MdIconRegistry {
   private _getSvgFromConfig(config: SvgIconConfig): Observable<SVGElement> {
     if (config.svgElement) {
       // We already have the SVG element for this icon, return a copy.
-      return Observable.of(config.svgElement.cloneNode(true));
+      return Observable.of(cloneSvg(config.svgElement));
     } else {
       // Fetch the icon from the config's URL, cache it, and return a copy.
       return this._loadSvgIconFromConfig(config)
           .do(svg => config.svgElement = svg)
-          .map(svg => svg.cloneNode(true));
+          .map(svg => cloneSvg(svg));
     }
   }
 
@@ -209,7 +209,7 @@ export class MdIconRegistry {
         .filter(iconSetConfig => !iconSetConfig.svgElement)
         .map(iconSetConfig =>
             this._loadSvgIconSetFromConfig(iconSetConfig)
-                .catch((err: any, source: any, caught: any): Observable<SVGElement> => {
+                .catch((err: any, caught: Observable<SVGElement>): Observable<SVGElement> => {
                   // Swallow errors fetching individual URLs so the combined Observable won't
                   // necessarily fail.
                   console.log(`Loading icon set URL: ${iconSetConfig.url} failed: ${err}`);
@@ -349,8 +349,11 @@ export class MdIconRegistry {
     if (this._inProgressUrlFetches.has(url)) {
       return this._inProgressUrlFetches.get(url);
     }
-    const req = this._http.get(url)
-        .map((response) => response.text())
+
+    // TODO(jelbourn): for some reason, the `finally` operator "loses" the generic type on the
+    // Observable. Figure out why and fix it.
+    const req = <Observable<string>> this._http.get(url)
+        .map(response => response.text())
         .finally(() => {
           this._inProgressUrlFetches.delete(url);
         })
@@ -359,3 +362,9 @@ export class MdIconRegistry {
     return req;
   }
 }
+
+
+/** Clones an SVGElement while preserving type information. */
+function cloneSvg(svg: SVGElement) {
+  return <SVGElement> svg.cloneNode(true);
+}
diff --git a/src/components/icon/icon.spec.ts b/src/components/icon/icon.spec.ts
index 8405400fc807..b9bd6cb8bacc 100644
--- a/src/components/icon/icon.spec.ts
+++ b/src/components/icon/icon.spec.ts
@@ -1,24 +1,21 @@
 import {
-  it,
-  describe,
-  expect,
-  beforeEach,
-  beforeEachProviders,
-  inject,
-  TestComponentBuilder,
+    it,
+    describe,
+    expect,
+    beforeEach,
+    beforeEachProviders,
+    inject,
+    TestComponentBuilder
 } from 'angular2/testing';
-import {
-  HTTP_PROVIDERS,
-  XHRBackend} from 'angular2/http';
+import {HTTP_PROVIDERS, XHRBackend} from 'angular2/http';
 import {MockBackend} from 'angular2/http/testing';
-import {
-  provide,
-  Component} from 'angular2/core';
-
+import {provide, Component} from 'angular2/core';
 import {MdIcon} from './icon';
 import {MdIconRegistry} from './icon-registry';
 import {getFakeSvgHttpResponse} from './fake-svgs';
 
+
+
 /** Returns the CSS classes assigned to an element as a sorted array. */
 const sortedClassNames = (elem: Element) => elem.className.split(' ').sort();
 
@@ -74,7 +71,7 @@ export function main() {
 
     describe('Ligature icons', () => {
       it('should add material-icons class by default', (done: () => void) => {
-        return builder.createAsync(MdIconLigatureTestApp).then((fixture) => {
+        return builder.createAsync(MdIconLigatureTestApp).then(fixture => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
           testComponent.iconName = 'home';
@@ -86,7 +83,7 @@ export function main() {
 
       it('should use alternate icon font if set', (done: () => void) => {
         mdIconRegistry.setDefaultFontSetClass('myfont');
-        return builder.createAsync(MdIconLigatureTestApp).then((fixture) => {
+        return builder.createAsync(MdIconLigatureTestApp).then(fixture => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
           testComponent.iconName = 'home';
@@ -99,7 +96,7 @@ export function main() {
 
     describe('Icons from URLs', () => {
       it('should fetch SVG icon from URL and inline the content', (done: () => void) => {
-        return builder.createAsync(MdIconFromSvgUrlTestApp).then((fixture) => {
+        return builder.createAsync(MdIconFromSvgUrlTestApp).then(fixture => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
           let svgElement: any;
@@ -135,7 +132,7 @@ export function main() {
       it('should register icon URLs by name', (done: () => void) => {
         mdIconRegistry.addSvgIcon('fluffy', 'cat.svg');
         mdIconRegistry.addSvgIcon('fido', 'dog.svg');
-        return builder.createAsync(MdIconFromSvgNameTestApp).then((fixture) => {
+        return builder.createAsync(MdIconFromSvgNameTestApp).then(fixture => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
           let svgElement: SVGElement;
@@ -168,7 +165,7 @@ export function main() {
 
       it('should extract icon from SVG icon set', (done: () => void) => {
         mdIconRegistry.addSvgIconSetInNamespace('farm', 'farm-set-1.svg');
-        return builder.createAsync(MdIconFromSvgNameTestApp).then((fixture) => {
+        return builder.createAsync(MdIconFromSvgNameTestApp).then(fixture => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
           let svgElement: any;
@@ -207,7 +204,7 @@ export function main() {
         mdIconRegistry.addSvgIconSetInNamespace('farm', 'farm-set-1.svg');
         mdIconRegistry.addSvgIconSetInNamespace('farm', 'farm-set-2.svg');
         mdIconRegistry.addSvgIconSetInNamespace('arrows', 'arrow-set.svg');
-        return builder.createAsync(MdIconFromSvgNameTestApp).then((fixture) => {
+        return builder.createAsync(MdIconFromSvgNameTestApp).then(fixture => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
           let svgElement: any;
@@ -250,7 +247,7 @@ export function main() {
 
       it('should not wrap <svg> elements in icon sets in another svg tag', (done: () => void) => {
         mdIconRegistry.addSvgIconSet('arrow-set.svg');
-        return builder.createAsync(MdIconFromSvgNameTestApp).then((fixture) => {
+        return builder.createAsync(MdIconFromSvgNameTestApp).then(fixture => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
           let svgElement: any;
@@ -268,7 +265,7 @@ export function main() {
       });
 
       it('should return unmodified copies of icons from URLs', (done: () => void) => {
-        return builder.createAsync(MdIconFromSvgUrlTestApp).then((fixture) => {
+        return builder.createAsync(MdIconFromSvgUrlTestApp).then(fixture => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
           let svgElement: any;
@@ -299,7 +296,7 @@ export function main() {
 
       it('should return unmodified copies of icons from icon sets', (done: () => void) => {
         mdIconRegistry.addSvgIconSet('arrow-set.svg');
-        return builder.createAsync(MdIconFromSvgNameTestApp).then((fixture) => {
+        return builder.createAsync(MdIconFromSvgNameTestApp).then(fixture => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
           let svgElement: any;
@@ -333,7 +330,7 @@ export function main() {
       it('should apply CSS classes for custom font and icon', (done: () => void) => {
         mdIconRegistry.registerFontClassAlias('f1', 'font1');
         mdIconRegistry.registerFontClassAlias('f2');
-        return builder.createAsync(MdIconCustomFontCssTestApp).then((fixture) => {
+        return builder.createAsync(MdIconCustomFontCssTestApp).then(fixture => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
           testComponent.fontSet = 'f1';
@@ -361,10 +358,12 @@ export function main() {
 
     describe('aria label', () => {
       it('should set aria label from text content if not specified', (done: () => void) => {
-        return builder.createAsync(MdIconLigatureTestApp).then((fixture) => {
+        return builder.createAsync(MdIconLigatureTestApp).then(fixture => {
+
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
           testComponent.iconName = 'home';
+
           fixture.detectChanges();
           expect(mdIconElement.getAttribute('aria-label')).toBe('home');
 
@@ -377,7 +376,7 @@ export function main() {
       });
 
       it('should use alt tag if aria label is not specified', (done: () => void) => {
-        return builder.createAsync(MdIconLigatureWithAriaBindingTestApp).then((fixture) => {
+        return builder.createAsync(MdIconLigatureWithAriaBindingTestApp).then(fixture => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
           testComponent.iconName = 'home';
@@ -394,7 +393,7 @@ export function main() {
       });
 
       it('should use provided aria label rather than icon name', (done: () => void) => {
-        return builder.createAsync(MdIconLigatureWithAriaBindingTestApp).then((fixture) => {
+        return builder.createAsync(MdIconLigatureWithAriaBindingTestApp).then(fixture => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
           testComponent.iconName = 'home';
@@ -406,7 +405,7 @@ export function main() {
       });
 
       it('should use provided aria label rather than font icon', (done: () => void) => {
-        return builder.createAsync(MdIconCustomFontCssTestApp).then((fixture) => {
+        return builder.createAsync(MdIconCustomFontCssTestApp).then(fixture => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
           testComponent.fontSet = 'f1';
diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index 44d4bd4b5047..04b5d1154447 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -1,21 +1,20 @@
 import {
-  AfterContentChecked,
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  Input,
-  OnChanges,
-  OnInit,
-  Renderer,
-  SimpleChange,
-  ViewEncapsulation,
+    ChangeDetectionStrategy,
+    Component,
+    ElementRef,
+    Input,
+    OnChanges,
+    OnInit,
+    Renderer,
+    SimpleChange,
+    ViewEncapsulation,
+    AfterViewChecked
 } from 'angular2/core';
-import {NgClass} from 'angular2/common';
 import {BaseException} from 'angular2/src/facade/exceptions';
-
 import {MdIconRegistry} from './icon-registry';
 
 
+
 /** Exception thrown when an invalid icon name is passed to an md-icon component. */
 export class MdIconInvalidNameException extends BaseException {
   constructor(iconName: string) {
@@ -63,11 +62,10 @@ export class MdIconInvalidNameException extends BaseException {
   host: {
     'role': 'img',
   },
-  directives: [NgClass],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MdIcon implements OnChanges, OnInit, AfterContentChecked {
+export class MdIcon implements OnChanges, OnInit, AfterViewChecked {
   @Input() svgSrc: string;
   @Input() svgIcon: string;
   @Input() fontSet: string;
@@ -143,7 +141,7 @@ export class MdIcon implements OnChanges, OnInit, AfterContentChecked {
     }
   }
 
-  ngAfterContentChecked() {
+  ngAfterViewChecked() {
     // Update aria label here because it may depend on the projected text content.
     // (e.g. <md-icon>home</md-icon> should use 'home').
     this._updateAriaLabel();
diff --git a/src/components/input/input.spec.ts b/src/components/input/input.spec.ts
index b70f6b7096a1..24ad7d0a8f83 100644
--- a/src/components/input/input.spec.ts
+++ b/src/components/input/input.spec.ts
@@ -5,18 +5,14 @@ import {
   beforeEach,
   fakeAsync,
   inject,
-  ComponentFixture,
   TestComponentBuilder,
-  injectAsync,
   tick,
 } from 'angular2/testing';
 import {Component} from 'angular2/core';
 import {By} from 'angular2/platform/browser';
 import {
   MdInput,
-  MdInputDuplicatedHintException,
   MD_INPUT_DIRECTIVES,
-  MdInputPlaceholderConflictException
 } from './input';
 
 
@@ -28,17 +24,17 @@ export function main() {
       builder = tcb;
     }));
 
-    it('creates a native <input> element', injectAsync([], () => {
+    it('creates a native <input> element', () => {
       return builder.createAsync(MdInputBaseTestController)
-        .then((fixture) => {
+        .then(fixture => {
           fixture.detectChanges();
           expect(fixture.debugElement.query(By.css('input'))).toBeTruthy();
         });
-    }));
+    });
 
-    it('support ngModel', injectAsync([], () => {
+    it('support ngModel', () => {
       return builder.createAsync(MdInputBaseTestController)
-        .then((fixture) => {
+        .then(fixture => {
           fixture.detectChanges();
           fakeAsync(() => {
             let instance = fixture.componentInstance;
@@ -56,25 +52,24 @@ export function main() {
             expect(el.value).toEqual('world');
           })();
         });
-    }));
-
-    it('counts characters', injectAsync([], () => {
-      return builder.createAsync(MdInputBaseTestController)
-        .then((fixture) => {
-          let instance = fixture.componentInstance;
-          fixture.detectChanges();
-          let inputInstance = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
-          expect(inputInstance.characterCount).toEqual(0);
-
-          instance.model = 'hello';
-          fixture.detectChanges();
-          expect(inputInstance.characterCount).toEqual(5);
-        });
-    }));
-
-    it('copies aria attributes to the inner input', injectAsync([], () => {
+    });
+
+    it('counts characters', () => {
+      return builder.createAsync(MdInputBaseTestController).then(fixture => {
+        let instance = fixture.componentInstance;
+        fixture.detectChanges();
+        let inputInstance = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
+        expect(inputInstance.characterCount).toEqual(0);
+
+        instance.model = 'hello';
+        fixture.detectChanges();
+        expect(inputInstance.characterCount).toEqual(5);
+      });
+    });
+
+    it('copies aria attributes to the inner input', () => {
       return builder.createAsync(MdInputAriaTestController)
-        .then((fixture) => {
+        .then(fixture => {
           let instance = fixture.componentInstance;
           fixture.detectChanges();
           let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
@@ -85,41 +80,42 @@ export function main() {
 
           expect(el.getAttribute('aria-disabled')).toBeTruthy();
         });
-    }));
+    });
+
+    it('validates there\'s only one hint label per side', () => {
 
-    it('validates there\'s only one hint label per side', injectAsync([], () => {
       return builder.createAsync(MdInputInvalidHintTestController)
-        .then((fixture: ComponentFixture) => {
-          fakeAsync(() => {
+        .then(fixture => {
             expect(() => fixture.detectChanges())
-              .toThrow(new MdInputDuplicatedHintException('start'));
-          })();
+              .toThrow();
+              // TODO(jelbourn): .toThrow(new MdInputDuplicatedHintException('start'));
+              // See https://github.com/angular/angular/issues/8348
         });
-    }));
+    });
 
-    it(`validates there's only one hint label per side (attribute)`, injectAsync([], () => {
+    it(`validates there's only one hint label per side (attribute)`, () => {
       return builder.createAsync(MdInputInvalidHint2TestController)
-        .then((fixture: ComponentFixture) => {
-          fakeAsync(() => {
-            expect(() => fixture.detectChanges())
-              .toThrow(new MdInputDuplicatedHintException('start'));
-          })();
+        .then(fixture => {
+          expect(() => fixture.detectChanges())
+            .toThrow();
+            // TODO(jelbourn): .toThrow(new MdInputDuplicatedHintException('start'));
+            // See https://github.com/angular/angular/issues/8348
         });
-    }));
+    });
 
-    it('validates there\'s only one placeholder', injectAsync([], () => {
+    it('validates there\'s only one placeholder', () => {
       return builder.createAsync(MdInputInvalidPlaceholderTestController)
-        .then((fixture: ComponentFixture) => {
-          fakeAsync(() => {
-            expect(() => fixture.detectChanges())
-              .toThrow(new MdInputPlaceholderConflictException());
-          })();
+        .then(fixture => {
+          expect(() => fixture.detectChanges())
+            .toThrow();
+            // TODO(jelbourn): .toThrow(new MdInputPlaceholderConflictException());
+            // See https://github.com/angular/angular/issues/8348
         });
-    }));
+    });
 
-    it('validates the type', injectAsync([], () => {
+    it('validates the type', () => {
       return builder.createAsync(MdInputInvalidTypeTestController)
-        .then((fixture: ComponentFixture) => {
+        .then(fixture => {
           fakeAsync(() => {
             // Technically this throws during the OnChanges detection phase,
             // so the error is really a ChangeDetectionError and it becomes
@@ -129,11 +125,11 @@ export function main() {
               .toThrow(/* new MdInputUnsupportedTypeException('file') */);
           })();
         });
-    }));
+    });
 
-    it('supports hint labels attribute', injectAsync([], () => {
+    it('supports hint labels attribute', () => {
       return builder.createAsync(MdInputHintLabelTestController)
-        .then((fixture: ComponentFixture) => {
+        .then(fixture => {
           fakeAsync(() => {
             fixture.detectChanges();
 
@@ -145,11 +141,11 @@ export function main() {
             expect(fixture.debugElement.query(By.css('.md-hint'))).not.toBeNull();
           })();
         });
-    }));
+    });
 
-    it('supports hint labels elements', injectAsync([], () => {
+    it('supports hint labels elements', () => {
       return builder.createAsync(MdInputHintLabel2TestController)
-        .then((fixture: ComponentFixture) => {
+        .then(fixture => {
           fakeAsync(() => {
             fixture.detectChanges();
 
@@ -163,11 +159,11 @@ export function main() {
             expect(el.textContent).toBe('label');
           })();
         });
-    }));
+    });
 
-    it('supports placeholder attribute', injectAsync([], () => {
+    it('supports placeholder attribute', () => {
       return builder.createAsync(MdInputPlaceholderAttrTestComponent)
-        .then((fixture: ComponentFixture) => {
+        .then(fixture => {
           fakeAsync(() => {
             fixture.detectChanges();
 
@@ -182,11 +178,11 @@ export function main() {
             expect(el.nativeElement.textContent).not.toMatch(/\*/g);
           })();
         });
-    }));
+    });
 
-    it('supports placeholder element', injectAsync([], () => {
+    it('supports placeholder element', () => {
       return builder.createAsync(MdInputPlaceholderElementTestComponent)
-        .then((fixture: ComponentFixture) => {
+        .then(fixture => {
           fakeAsync(() => {
             fixture.detectChanges();
 
@@ -202,11 +198,11 @@ export function main() {
             expect(el.nativeElement.textContent).not.toMatch(/\*/g);
           })();
         });
-    }));
+    });
 
-    it('supports placeholder required star', injectAsync([], () => {
+    it('supports placeholder required star', () => {
       return builder.createAsync(MdInputPlaceholderRequiredTestComponent)
-        .then((fixture: ComponentFixture) => {
+        .then(fixture => {
           fakeAsync(() => {
             fixture.detectChanges();
 
@@ -215,11 +211,11 @@ export function main() {
             expect(el.nativeElement.textContent).toMatch(/hello\s+\*/g);
           })();
         });
-    }));
+    });
 
-    it('supports number types and conserved its value type from Angular', injectAsync([], () => {
+    it('supports number types and conserved its value type from Angular', () => {
       return builder.createAsync(MdInputNumberTypeConservedTestComponent)
-        .then((fixture: ComponentFixture) => {
+        .then(fixture => {
           fixture.detectChanges();
 
           const inputEl = fixture.debugElement.query(By.css('input')).nativeElement;
@@ -235,14 +231,14 @@ export function main() {
           // Something along the chain of events is asynchronous but does not use Zones, therefore
           // we need to wait for that something to propagate. Using fakeAsync fails, just returning
           // Promise.resolve(fixture) fails as well, but this passes.
-          return new Promise((resolve) => {
-            window.setTimeout(() => resolve(fixture), 0);
+          return new Promise(resolve => {
+            setTimeout(() => resolve(fixture), 0);
           });
         }).then((fixture: any) => {
           expect(fixture.componentInstance.value).toBe(3);
           expect(typeof fixture.componentInstance.value).toBe('number');
         });
-    }));
+    });
   });
 }
 
diff --git a/src/components/list/README.md b/src/components/list/README.md
index 74ea93547ed5..ae7dc01adbed 100644
--- a/src/components/list/README.md
+++ b/src/components/list/README.md
@@ -39,7 +39,7 @@ as long as the `md-line` attribute is included.
 ```html
 <!-- two line list -->
 <md-list>
-  <md-list-item *ngFor="#message of messages">
+  <md-list-item *ngFor="let message of messages">
     <h3 md-line> {{message.from}} </h3>
     <p md-line>
       <span> {{message.subject}} </span>
@@ -50,7 +50,7 @@ as long as the `md-line` attribute is included.
 
 <!-- three line list -->
 <md-list>
-  <md-list-item *ngFor="#message of messages">
+  <md-list-item *ngFor="let message of messages">
     <h3 md-line> {{message.from}} </h3>
     <p md-line> {{message.subject}} </p>
     <p md-line class="demo-2"> {{message.message}} </p>
@@ -72,7 +72,7 @@ To include an avatar, add an image tag with an `md-list-avatar` attribute.
 
 ```html
 <md-list>
-  <md-list-item *ngFor="#message of messages">
+  <md-list-item *ngFor="let message of messages">
     <img md-list-avatar src="..." alt="...">
     <h3 md-line> {{message.from}} </h3>
     <p md-line>
@@ -113,14 +113,14 @@ use `<md-divider>` tags.
 ```html
 <md-list>
    <h3 md-subheader>Folders</h3>
-   <md-list-item *ngFor="#folder of folders">
+   <md-list-item *ngFor="let folder of folders">
       <md-icon md-list-avatar>folder</md-icon>
       <h4 md-line>{{folder.name}}</h4>
       <p md-line class="demo-2"> {{folder.updated}} </p>
    </md-list-item>
    <md-divider></md-divider>
    <h3 md-subheader>Notes</h3>
-   <md-list-item *ngFor="#note of notes">
+   <md-list-item *ngFor="let note of notes">
       <md-icon md-list-avatar>note</md-icon>
       <h4 md-line>{{note.name}}</h4>
       <p md-line class="demo-2"> {{note.updated}} </p>
@@ -140,7 +140,7 @@ Simple nav lists can tack an `md-list-item` attribute onto the anchor tag itself
 
 ```html
 <md-nav-list>
-   <a md-list-item href="..." *ngFor="#link of links"> {{ link }} </a>
+   <a md-list-item href="..." *ngFor="let link of links"> {{ link }} </a>
 </md-nav-list>
 ```
 
@@ -148,7 +148,7 @@ If you require a more complex nav list (e.g. with more than one target per item)
 
 ```html
 <md-nav-list>
-  <md-list-item *ngFor="#link of links">
+  <md-list-item *ngFor="let link of links">
      <a md-line href="...">{{ link }}</a>
      <button md-icon-button (click)="showInfo(link)">
         <md-icon>info</md-icon>
@@ -160,4 +160,4 @@ If you require a more complex nav list (e.g. with more than one target per item)
 ### Lists with secondary text
 Secondary text styling will be part of a broader typography module to
 [come later](https://github.com/angular/material2/issues/205), and won’t be implemented as part of this component
-specifically. Gray text in the examples above comes from a "demo-2" class added manually by the demo.
\ No newline at end of file
+specifically. Gray text in the examples above comes from a "demo-2" class added manually by the demo.
diff --git a/src/components/list/list.spec.ts b/src/components/list/list.spec.ts
index 1d5ec794e1cd..2c5688e7857d 100644
--- a/src/components/list/list.spec.ts
+++ b/src/components/list/list.spec.ts
@@ -39,7 +39,7 @@ export function main() {
     it('should apply md-2-line class to lists with two lines', (done: () => void) => {
       var template = `
         <md-list>
-          <md-list-item *ngFor="#item of items">
+          <md-list-item *ngFor="let item of items">
             <img src="">
             <h3 md-line>{{item.name}}</h3>
             <p md-line>{{item.description}}</p>
@@ -59,7 +59,7 @@ export function main() {
     it('should apply md-3-line class to lists with three lines', (done: () => void) => {
       var template = `
         <md-list>
-          <md-list-item *ngFor="#item of items">
+          <md-list-item *ngFor="let item of items">
             <h3 md-line>{{item.name}}</h3>
             <p md-line>{{item.description}}</p>
             <p md-line>Some other text</p>
@@ -101,7 +101,7 @@ export function main() {
     it('should not clear custom classes provided by user', (done: () => void) => {
       var template = `
         <md-list>
-          <md-list-item class="test-class" *ngFor="#item of items">
+          <md-list-item class="test-class" *ngFor="let item of items">
             <h3 md-line>{{item.name}}</h3>
             <p md-line>{{item.description}}</p>
           </md-list-item>
@@ -119,7 +119,7 @@ export function main() {
     it('should update classes if number of lines change', (done: () => void) => {
       var template = `
         <md-list>
-          <md-list-item *ngFor="#item of items">
+          <md-list-item *ngFor="let item of items">
             <h3 md-line>{{item.name}}</h3>
             <p md-line>{{item.description}}</p>
             <p md-line *ngIf="showThirdLine">Some other text</p>
@@ -145,7 +145,7 @@ export function main() {
     it('should add aria roles properly', (done: () => void) => {
       var template = `
         <md-list>
-          <md-list-item *ngFor="#item of items">
+          <md-list-item *ngFor="let item of items">
             {{item.name}}
           </md-list-item>
         </md-list>
diff --git a/src/components/radio/README.md b/src/components/radio/README.md
index 4268b61fec09..f30a783dcb98 100644
--- a/src/components/radio/README.md
+++ b/src/components/radio/README.md
@@ -15,7 +15,7 @@ A basic radio group would have the following markup.
 A dynamic example, populated from a `data` variable:
 ```html
 <md-radio-group [(value)]="groupValue">
-  <md-radio-button *ngFor="#d of data" [value]="d.value">
+  <md-radio-button *ngFor="let d of data" [value]="d.value">
     {{d.label}}
   </md-radio-button>
 </md-radio-group>
@@ -24,7 +24,7 @@ A dynamic example, populated from a `data` variable:
 A dynamic example for use inside a form showing support for `[(ngModel)]`:
 ```html
 <md-radio-group [(ngModel)]="chosenOption">
-  <md-radio-button *ngFor="#o of options" [value]="o.value">
+  <md-radio-button *ngFor="let o of options" [value]="o.value">
     {{o.label}}
   </md-radio-button>
 </md-radio-group>
diff --git a/src/components/radio/radio.spec.ts b/src/components/radio/radio.spec.ts
index 16464c68d36d..d00a106ca707 100644
--- a/src/components/radio/radio.spec.ts
+++ b/src/components/radio/radio.spec.ts
@@ -29,7 +29,7 @@ export function main() {
               <md-radio-button></md-radio-button>
             </md-radio-group>`)
         .createAsync(TestApp)
-        .then((fixture) => {
+        .then(fixture => {
           let button = fixture.debugElement.query(By.css('md-radio-button'));
 
           fixture.detectChanges();
@@ -41,7 +41,7 @@ export function main() {
       builder
         .overrideTemplate(TestApp, '<md-radio-button disabled></md-radio-button>')
         .createAsync(TestApp)
-        .then((fixture) => {
+        .then(fixture => {
           let button = fixture.debugElement.query(By.css('md-radio-button'));
 
           fixture.detectChanges();
@@ -59,7 +59,7 @@ export function main() {
               <md-radio-button></md-radio-button>
             </md-radio-group>`)
         .createAsync(TestApp)
-        .then((fixture) => {
+        .then(fixture => {
           let button = fixture.debugElement.query(By.css('md-radio-button'));
 
           fixture.detectChanges();
@@ -74,17 +74,18 @@ export function main() {
               <md-radio-button value="1"></md-radio-button>
             </md-radio-group>`)
         .createAsync(TestApp)
-        .then((fixture) => {
+        .then(fixture => {
           let button = fixture.debugElement.query(By.css('md-radio-button'));
           let group = fixture.debugElement.query(By.css('md-radio-group'));
+          let radioGroupInstance = group.injector.get(MdRadioGroup);
 
-          group.componentInstance.selected = button.componentInstance;
+          radioGroupInstance.selected = button.componentInstance;
           fixture.detectChanges();
-          expect(group.componentInstance.value).toBe('1');
+          expect(radioGroupInstance.value).toBe('1');
 
           button.componentInstance.value = '2';
           fixture.detectChanges();
-          expect(group.componentInstance.value).toBe('2');
+          expect(radioGroupInstance.value).toBe('2');
         }).then(done);
     });
 
@@ -92,7 +93,7 @@ export function main() {
       builder
         .overrideTemplate(TestApp, '<md-radio-button></md-radio-button>')
         .createAsync(TestApp)
-        .then((fixture) => {
+        .then(fixture => {
           let button = fixture.debugElement.query(By.css('md-radio-button'));
           let input = button.query(By.css('input'));
 
@@ -109,7 +110,7 @@ export function main() {
       builder
         .overrideTemplate(TestApp, '<md-radio-button></md-radio-button>')
         .createAsync(TestApp)
-        .then((fixture) => {
+        .then(fixture => {
           fakeAsync(function() {
             let button = fixture.debugElement.query(By.css('md-radio-button'));
             let changeEvent: MdRadioChange = null;
@@ -130,7 +131,7 @@ export function main() {
       builder
         .overrideTemplate(TestApp, '<md-radio-button></md-radio-button>')
         .createAsync(TestApp)
-        .then((fixture) => {
+        .then(fixture => {
           let button = fixture.debugElement.query(By.css('md-radio-button'));
           let input = button.query(By.css('input'));
 
@@ -190,17 +191,18 @@ export function main() {
               <md-radio-button value="2"></md-radio-button>
             </md-radio-group>`)
         .createAsync(TestApp)
-        .then((fixture) => {
+        .then(fixture => {
           let buttons = fixture.debugElement.queryAll(By.css('md-radio-button'));
           let group = fixture.debugElement.query(By.css('md-radio-group'));
+          let radioGroupInstance = group.injector.get(MdRadioGroup);
 
           fixture.detectChanges();
-          expect(group.componentInstance.selected).toBe(null);
+          expect(radioGroupInstance.selected).toBe(null);
 
-          group.componentInstance.value = '2';
+          radioGroupInstance.value = '2';
 
           fixture.detectChanges();
-          expect(group.componentInstance.selected).toBe(buttons[1].componentInstance);
+          expect(radioGroupInstance.selected).toBe(buttons[1].componentInstance);
         }).then(done);
     });
 
@@ -212,18 +214,19 @@ export function main() {
               <md-radio-button></md-radio-button>
             </md-radio-group>`)
         .createAsync(TestApp)
-        .then((fixture) => {
+        .then(fixture => {
           let buttons = fixture.debugElement.queryAll(By.css('md-radio-button'));
           let group = fixture.debugElement.query(By.css('md-radio-group'));
+          let radioGroupInstance = group.injector.get(MdRadioGroup);
 
           fixture.detectChanges();
-          expect(group.componentInstance.selected).toBe(null);
+          expect(radioGroupInstance.selected).toBe(null);
 
-          group.componentInstance.selected = buttons[0].componentInstance;
+          radioGroupInstance.selected = buttons[0].componentInstance;
           fixture.detectChanges();
           expect(isSinglySelected(buttons[0], buttons)).toBe(true);
 
-          group.componentInstance.selected = buttons[1].componentInstance;
+          radioGroupInstance.selected = buttons[1].componentInstance;
           fixture.detectChanges();
           expect(isSinglySelected(buttons[1], buttons)).toBe(true);
         }).then(done);
@@ -237,17 +240,18 @@ export function main() {
               <md-radio-button></md-radio-button>
             </md-radio-group>`)
         .createAsync(TestApp)
-        .then((fixture) => {
+        .then(fixture => {
           fakeAsync(function() {
             let buttons = fixture.debugElement.queryAll(By.css('md-radio-button'));
             let group = fixture.debugElement.query(By.css('md-radio-group'));
+            let radioGroupInstance = group.injector.get(MdRadioGroup);
 
             let changeEvent: MdRadioChange = null;
-            group.componentInstance.change.subscribe((evt: MdRadioChange) => {
+            radioGroupInstance.change.subscribe((evt: MdRadioChange) => {
               changeEvent = evt;
             });
 
-            group.componentInstance.selected = buttons[1].componentInstance;
+            radioGroupInstance.selected = buttons[1].componentInstance;
             fixture.detectChanges();
             tick();
 
@@ -265,22 +269,23 @@ export function main() {
               <md-radio-button [value]="1"></md-radio-button>
             </md-radio-group>`)
         .createAsync(TestApp)
-        .then((fixture) => {
+        .then(fixture => {
           fakeAsync(function() {
             let buttons = fixture.debugElement.queryAll(By.css('md-radio-button'));
             let group = fixture.debugElement.query(By.css('md-radio-group'));
+            let radioGroupInstance = group.injector.get(MdRadioGroup);
 
             fixture.detectChanges();
             expect(buttons[0].componentInstance.checked).toBe(false);
             expect(buttons[1].componentInstance.checked).toBe(false);
             expect(fixture.componentInstance.choice).toBe(undefined);
 
-            group.componentInstance.selected = buttons[0].componentInstance;
+            radioGroupInstance.selected = buttons[0].componentInstance;
             fixture.detectChanges();
             expect(isSinglySelected(buttons[0], buttons)).toBe(true);
             expect(fixture.componentInstance.choice).toBe(0);
 
-            group.componentInstance.selected = buttons[1].componentInstance;
+            radioGroupInstance.selected = buttons[1].componentInstance;
             fixture.detectChanges();
             expect(isSinglySelected(buttons[1], buttons)).toBe(true);
             expect(fixture.componentInstance.choice).toBe(1);
@@ -296,21 +301,22 @@ export function main() {
               <md-radio-button [value]="1"></md-radio-button>
             </md-radio-group>`)
         .createAsync(TestAppWithInitialValue)
-        .then((fixture) => {
+        .then(fixture => {
           fakeAsync(function() {
             let buttons = fixture.debugElement.queryAll(By.css('md-radio-button'));
             let group = fixture.debugElement.query(By.css('md-radio-group'));
+            let radioGroupInstance = group.injector.get(MdRadioGroup);
 
             fixture.detectChanges();
             expect(isSinglySelected(buttons[1], buttons)).toBe(true);
             expect(fixture.componentInstance.choice).toBe(1);
 
-            group.componentInstance.selected = buttons[0].componentInstance;
+            radioGroupInstance.selected = buttons[0].componentInstance;
             fixture.detectChanges();
             expect(isSinglySelected(buttons[0], buttons)).toBe(true);
             expect(fixture.componentInstance.choice).toBe(0);
 
-            group.componentInstance.selected = buttons[1].componentInstance;
+            radioGroupInstance.selected = buttons[1].componentInstance;
             fixture.detectChanges();
             expect(isSinglySelected(buttons[1], buttons)).toBe(true);
             expect(fixture.componentInstance.choice).toBe(1);
diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts
index 70aea7446a1e..1301ed83999f 100644
--- a/src/components/radio/radio.ts
+++ b/src/components/radio/radio.ts
@@ -77,7 +77,7 @@ export class MdRadioGroup implements AfterContentInit, ControlValueAccessor {
 
   /** Event emitted when the group value changes. */
   @Output()
-  change: EventEmitter<MdRadioChange> = new EventEmitter();
+  change: EventEmitter<MdRadioChange> = new EventEmitter<MdRadioChange>();
 
   /** Child radio buttons. */
   @ContentChildren(forwardRef(() => MdRadioButton))
@@ -232,7 +232,7 @@ export class MdRadioButton implements OnInit {
 
   /** Event emitted when the group value changes. */
   @Output()
-  change: EventEmitter<MdRadioChange> = new EventEmitter();
+  change: EventEmitter<MdRadioChange> = new EventEmitter<MdRadioChange>();
 
   constructor(@Optional() radioGroup: MdRadioGroup, public radioDispatcher: MdRadioDispatcher) {
     // Assertions. Ideally these should be stripped out by the compiler.
diff --git a/src/components/sidenav/sidenav.html b/src/components/sidenav/sidenav.html
index daad959b38f5..1e50a4e3b0e4 100644
--- a/src/components/sidenav/sidenav.html
+++ b/src/components/sidenav/sidenav.html
@@ -1,11 +1,11 @@
-<div class="md-sidenav-backdrop" (click)="_closeModalSidenav()"
-     [class.md-sidenav-shown]="_isShowingBackdrop()"></div>
+<div class="md-sidenav-backdrop" (click)="closeModalSidenav()"
+     [class.md-sidenav-shown]="isShowingBackdrop()"></div>
 
 <ng-content select="md-sidenav"></ng-content>
 
-<md-content [style.margin-left.px]="_getMarginLeft()"
-            [style.margin-right.px]="_getMarginRight()"
-            [style.left.px]="_getPositionLeft()"
-            [style.right.px]="_getPositionRight()">
+<md-content [style.margin-left.px]="getMarginLeft()"
+            [style.margin-right.px]="getMarginRight()"
+            [style.left.px]="getPositionLeft()"
+            [style.right.px]="getPositionRight()">
   <ng-content></ng-content>
 </md-content>
diff --git a/src/components/sidenav/sidenav.ts b/src/components/sidenav/sidenav.ts
index 93d72fa3f1f2..6ac2f36dacea 100644
--- a/src/components/sidenav/sidenav.ts
+++ b/src/components/sidenav/sidenav.ts
@@ -330,7 +330,7 @@ export class MdSidenavLayout implements AfterContentInit {
     }
   }
 
-  private _closeModalSidenav() {
+  closeModalSidenav() {
     if (this._start != null && this._start.mode != 'side') {
       this._start.close();
     }
@@ -339,7 +339,7 @@ export class MdSidenavLayout implements AfterContentInit {
     }
   }
 
-  private _isShowingBackdrop(): boolean {
+  isShowingBackdrop(): boolean {
     return (this._isSidenavOpen(this._start) && this._start.mode != 'side')
         || (this._isSidenavOpen(this._end) && this._end.mode != 'side');
   }
@@ -358,19 +358,19 @@ export class MdSidenavLayout implements AfterContentInit {
     return (this._isSidenavOpen(sidenav) && sidenav.mode == mode) ? sidenav._width : 0;
   }
 
-  private _getMarginLeft() {
+  getMarginLeft() {
     return this._getSidenavEffectiveWidth(this._left, 'side');
   }
 
-  private _getMarginRight() {
+  getMarginRight() {
     return this._getSidenavEffectiveWidth(this._right, 'side');
   }
 
-  private _getPositionLeft() {
+  getPositionLeft() {
     return this._getSidenavEffectiveWidth(this._left, 'push');
   }
 
-  private _getPositionRight() {
+  getPositionRight() {
     return this._getSidenavEffectiveWidth(this._right, 'push');
   }
 }
diff --git a/src/core/annotations/field-value.ts b/src/core/annotations/field-value.ts
index 8c28a5155145..7583e146236a 100644
--- a/src/core/annotations/field-value.ts
+++ b/src/core/annotations/field-value.ts
@@ -1,6 +1,3 @@
-declare var Symbol: any;
-
-
 /**
  * Annotation Factory that allows HTML style boolean attributes. For example,
  * a field declared like this:
@@ -17,9 +14,7 @@ declare var Symbol: any;
 function booleanFieldValueFactory() {
   return function booleanFieldValueMetadata(target: any, key: string): void {
     const defaultValue = target[key];
-
-    // Use a fallback if Symbol isn't available.
-    const localKey = Symbol ? Symbol(key) : `__md_private_symbol_${key}`;
+    const localKey = `__md_private_symbol_${key}`;
     target[localKey] = defaultValue;
 
     Object.defineProperty(target, key, {
diff --git a/src/core/overlay/overlay.spec.ts b/src/core/overlay/overlay.spec.ts
index 97515256278b..594cd88cecd9 100644
--- a/src/core/overlay/overlay.spec.ts
+++ b/src/core/overlay/overlay.spec.ts
@@ -10,10 +10,9 @@ import {
   beforeEachProviders,
 } from 'angular2/testing';
 import {
-  Component,
-  ViewChild,
-  ElementRef,
-  provide,
+    Component,
+    ViewChild,
+    provide, ViewContainerRef,
 } from 'angular2/core';
 import {TemplatePortalDirective} from '../portal/portal-directives';
 import {TemplatePortal, ComponentPortal} from '../portal/portal';
@@ -47,7 +46,7 @@ export function main() {
       builder.createAsync(TestComponentWithTemplatePortals).then(fixture => {
         fixture.detectChanges();
         templatePortal = fixture.componentInstance.templatePortal;
-        componentPortal = new ComponentPortal(PizzaMsg, fixture.componentInstance.elementRef);
+        componentPortal = new ComponentPortal(PizzaMsg, fixture.componentInstance.viewContainerRef);
       });
 
       flushMicrotasks();
@@ -157,7 +156,7 @@ class PizzaMsg {}
 })
 class TestComponentWithTemplatePortals {
   @ViewChild(TemplatePortalDirective) templatePortal: TemplatePortalDirective;
-  constructor(public elementRef: ElementRef) { }
+  constructor(public viewContainerRef: ViewContainerRef) { }
 }
 
 class FakePositionStrategy implements PositionStrategy {
diff --git a/src/core/overlay/overlay.ts b/src/core/overlay/overlay.ts
index f10b3f5be267..850b842f2bbe 100644
--- a/src/core/overlay/overlay.ts
+++ b/src/core/overlay/overlay.ts
@@ -1,6 +1,5 @@
 import {
   DynamicComponentLoader,
-  AppViewManager,
   OpaqueToken,
   Inject,
   Injectable,
@@ -40,8 +39,7 @@ let defaultState = new OverlayState();
 export class Overlay {
   constructor(
       @Inject(OVERLAY_CONTAINER_TOKEN) private _overlayContainerElement: HTMLElement,
-      private _dynamicComponentLoader: DynamicComponentLoader,
-      private _appViewManager: AppViewManager) {
+      private _dynamicComponentLoader: DynamicComponentLoader) {
   }
 
   /**
@@ -96,8 +94,7 @@ export class Overlay {
   private _createPortalHost(pane: HTMLElement): DomPortalHost {
     return new DomPortalHost(
         pane,
-        this._dynamicComponentLoader,
-        this._appViewManager);
+        this._dynamicComponentLoader);
   }
 
   /**
diff --git a/src/core/portal/dom-portal-host.ts b/src/core/portal/dom-portal-host.ts
index 7500bf35c286..bf0dff6981ad 100644
--- a/src/core/portal/dom-portal-host.ts
+++ b/src/core/portal/dom-portal-host.ts
@@ -1,4 +1,4 @@
-import {DynamicComponentLoader, AppViewManager, ComponentRef} from 'angular2/core';
+import {DynamicComponentLoader, ComponentRef, EmbeddedViewRef} from 'angular2/core';
 import {BasePortalHost, ComponentPortal, TemplatePortal} from './portal';
 import {MdComponentPortalAttachedToDomWithoutOriginException} from './portal-exceptions';
 
@@ -12,26 +12,27 @@ import {MdComponentPortalAttachedToDomWithoutOriginException} from './portal-exc
 export class DomPortalHost extends BasePortalHost {
   constructor(
       private _hostDomElement: Element,
-      private _componentLoader: DynamicComponentLoader,
-      private _viewManager: AppViewManager) {
+      private _componentLoader: DynamicComponentLoader) {
     super();
   }
 
   /** Attach the given ComponentPortal to DOM element using the DynamicComponentLoader. */
   attachComponentPortal(portal: ComponentPortal): Promise<ComponentRef> {
-    if (portal.origin == null) {
+    if (portal.viewContainerRef == null) {
       throw new MdComponentPortalAttachedToDomWithoutOriginException();
     }
 
-    return this._componentLoader.loadNextToLocation(portal.component, portal.origin).then(ref => {
-      this._hostDomElement.appendChild(ref.hostView.rootNodes[0]);
-      this.setDisposeFn(() => ref.dispose());
+    return this._componentLoader.loadNextToLocation(
+        portal.component, portal.viewContainerRef).then(ref => {
+      let hostView = <EmbeddedViewRef> ref.hostView;
+      this._hostDomElement.appendChild(hostView.rootNodes[0]);
+      this.setDisposeFn(() => ref.destroy());
       return ref;
     });
   }
 
   attachTemplatePortal(portal: TemplatePortal): Promise<Map<string, any>> {
-    let viewContainer = this._viewManager.getViewContainer(portal.templateRef.elementRef);
+    let viewContainer = portal.viewContainerRef;
     let viewRef = viewContainer.createEmbeddedView(portal.templateRef);
     // TODO(jelbourn): locals don't currently work with DomPortalHost; investigate whether there
     // is a bug in Angular.
diff --git a/src/core/portal/portal-directives.ts b/src/core/portal/portal-directives.ts
index 725144773f25..a3ad916e2271 100644
--- a/src/core/portal/portal-directives.ts
+++ b/src/core/portal/portal-directives.ts
@@ -3,11 +3,12 @@ import {
     Directive,
     TemplateRef,
     DynamicComponentLoader,
-    ElementRef,
     ViewContainerRef
 } from 'angular2/core';
 import {Portal, TemplatePortal, ComponentPortal, BasePortalHost} from './portal';
 
+
+
 /**
  * Directive version of a `TemplatePortal`. Because the directive *is* a TemplatePortal,
  * the directive instance itself can be attached to a host, enabling declarative use of portals.
@@ -22,8 +23,8 @@ import {Portal, TemplatePortal, ComponentPortal, BasePortalHost} from './portal'
   exportAs: 'portal',
 })
 export class TemplatePortalDirective extends TemplatePortal {
-  constructor(templateRef: TemplateRef) {
-    super(templateRef);
+  constructor(templateRef: TemplateRef, viewContainerRef: ViewContainerRef) {
+    super(templateRef, viewContainerRef);
   }
 }
 
@@ -45,7 +46,6 @@ export class PortalHostDirective extends BasePortalHost {
 
   constructor(
       private _dynamicComponentLoader: DynamicComponentLoader,
-      private _elementRef: ElementRef,
       private _viewContainerRef: ViewContainerRef) {
     super();
   }
@@ -64,12 +64,14 @@ export class PortalHostDirective extends BasePortalHost {
 
     // If the portal specifies an origin, use that as the logical location of the component
     // in the application tree. Otherwise use the location of this PortalHost.
-    let elementRef = portal.origin != null ? portal.origin : this._elementRef;
+    let viewContainerRef = portal.viewContainerRef != null ?
+        portal.viewContainerRef :
+        this._viewContainerRef;
 
     // Typecast is necessary for Dart transpilation.
-    return this._dynamicComponentLoader.loadNextToLocation(portal.component, elementRef)
+    return this._dynamicComponentLoader.loadNextToLocation(portal.component, viewContainerRef)
       .then(ref => {
-        this.setDisposeFn(() => ref.dispose());
+        this.setDisposeFn(() => ref.destroy());
         return ref;
       });
   }
diff --git a/src/core/portal/portal.spec.ts b/src/core/portal/portal.spec.ts
index 6cecd14c79fa..e7e80d7e1eae 100644
--- a/src/core/portal/portal.spec.ts
+++ b/src/core/portal/portal.spec.ts
@@ -7,7 +7,7 @@ import {
   ComponentFixture,
   TestComponentBuilder,
 } from 'angular2/testing';
-import {Component, ViewChildren, QueryList, ElementRef} from 'angular2/core';
+import {Component, ViewChildren, QueryList, ViewContainerRef} from 'angular2/core';
 import {TemplatePortalDirective} from './portal-directives';
 import {Portal} from './portal';
 import {ComponentPortal} from './portal';
@@ -15,7 +15,6 @@ import {PortalHostDirective} from './portal-directives';
 import {fakeAsync} from 'angular2/testing';
 import {flushMicrotasks} from 'angular2/testing';
 import {DynamicComponentLoader} from 'angular2/core';
-import {AppViewManager} from 'angular2/core';
 import {DomPortalHost} from './dom-portal-host';
 
 
@@ -219,28 +218,26 @@ export function main() {
 
     describe('DomPortalHost', function() {
       let componentLoader: DynamicComponentLoader;
-      let viewManager: AppViewManager;
-      let someElementRef: ElementRef;
+      let someViewContainerRef: ViewContainerRef;
       let someDomElement: HTMLElement;
       let host: DomPortalHost;
 
       beforeEach(inject(
-          [DynamicComponentLoader, AppViewManager],
-          fakeAsync((dcl: DynamicComponentLoader, avm: AppViewManager) => {
-        viewManager = avm;
+          [DynamicComponentLoader],
+          fakeAsync((dcl: DynamicComponentLoader) => {
         componentLoader = dcl;
         someDomElement = document.createElement('div');
-        host = new DomPortalHost(someDomElement, componentLoader, viewManager);
+        host = new DomPortalHost(someDomElement, componentLoader);
 
-        builder.createAsync(ArbitraryElementRefComponent).then(fixture => {
-          someElementRef = fixture.componentInstance.elementRef;
+        builder.createAsync(ArbitraryViewContainerRefComponent).then(fixture => {
+          someViewContainerRef = fixture.componentInstance.viewContainerRef;
         });
 
         flushMicrotasks();
       })));
 
       it('should attach and detach a component portal', fakeAsyncTest(() => {
-        let portal = new ComponentPortal(PizzaMsg, someElementRef);
+        let portal = new ComponentPortal(PizzaMsg, someViewContainerRef);
 
         let componentInstance: PizzaMsg;
         portal.attach(host).then(ref => {
@@ -334,7 +331,7 @@ export function main() {
         host.detach();
         flushMicrotasks();
 
-        host.attach(new ComponentPortal(PizzaMsg, someElementRef));
+        host.attach(new ComponentPortal(PizzaMsg, someViewContainerRef));
         flushMicrotasks();
 
         expect(someDomElement.textContent).toContain('Pizza');
@@ -351,13 +348,13 @@ export function main() {
 })
 class PizzaMsg {}
 
-/** Simple component to grab an arbitrary ElementRef */
+/** Simple component to grab an arbitrary ViewContainerRef */
 @Component({
   selector: 'some-placeholder',
   template: '<p>Hello</p>'
 })
-class ArbitraryElementRefComponent {
-  constructor(public elementRef: ElementRef) { }
+class ArbitraryViewContainerRefComponent {
+  constructor(public viewContainerRef: ViewContainerRef) { }
 }
 
 
@@ -375,7 +372,7 @@ class ArbitraryElementRefComponent {
 
   <template portal> {{fruit}} </template>
 
-  <template portal #yum="appetizer">{{yum}}</template>
+  <template portal let-yum="appetizer">{{yum}}</template>
   `,
   directives: [PortalHostDirective, TemplatePortalDirective],
 })
diff --git a/src/core/portal/portal.ts b/src/core/portal/portal.ts
index 6eb255a0bfbb..971e8b394cde 100644
--- a/src/core/portal/portal.ts
+++ b/src/core/portal/portal.ts
@@ -1,4 +1,4 @@
-import {TemplateRef, Type} from 'angular2/core';
+import {TemplateRef, Type, ViewContainerRef} from 'angular2/core';
 import {ElementRef} from 'angular2/core';
 import {ComponentRef} from 'angular2/core';
 
@@ -71,12 +71,12 @@ export class ComponentPortal extends Portal<ComponentRef> {
    * This is different from where the component *renders*, which is determined by the PortalHost.
    * The origin necessary when the host is outside of the Angular application context.
    */
-  public origin: ElementRef;
+  public viewContainerRef: ViewContainerRef;
 
-  constructor(component: Type, origin: ElementRef = null) {
+  constructor(component: Type, viewContainerRef: ViewContainerRef = null) {
     super();
     this.component = component;
-    this.origin = origin;
+    this.viewContainerRef = viewContainerRef;
   }
 }
 
@@ -88,6 +88,9 @@ export class TemplatePortal extends Portal<Map<string, any>> {
   /** The embedded template that will be used to instantiate an embedded View in the host. */
   templateRef: TemplateRef;
 
+  /** Reference to the ViewContainer into which the template will be stamped out. */
+  viewContainerRef: ViewContainerRef;
+
   /**
    * Additional locals for the instantiated embedded view.
    * These locals can be seen as "exports" for the template, such as how ngFor has
@@ -96,9 +99,10 @@ export class TemplatePortal extends Portal<Map<string, any>> {
    */
   locals: Map<string, any> = new Map<string, any>();
 
-  constructor(template: TemplateRef) {
+  constructor(template: TemplateRef, viewContainerRef: ViewContainerRef) {
     super();
     this.templateRef = template;
+    this.viewContainerRef = viewContainerRef;
   }
 
   get origin(): ElementRef {
diff --git a/src/demo-app/checkbox/nested-checklist.html b/src/demo-app/checkbox/nested-checklist.html
index 439202c1a6e5..309ffeddce79 100644
--- a/src/demo-app/checkbox/nested-checklist.html
+++ b/src/demo-app/checkbox/nested-checklist.html
@@ -1,6 +1,6 @@
 <h2>Tasks</h2>
 <ul>
-  <li *ngFor="#task of tasks">
+  <li *ngFor="let task of tasks">
     <md-checkbox [(ngModel)]="task.completed"
                  [checked]="allComplete(task.subtasks)"
                  [indeterminate]="someComplete(task.subtasks)"
@@ -8,7 +8,7 @@ <h2>Tasks</h2>
       <h3>{{task.name}}</h3>
     </md-checkbox>
     <ul>
-      <li *ngFor="#subtask of task.subtasks">
+      <li *ngFor="let subtask of task.subtasks">
         <md-checkbox [(ngModel)]="subtask.completed">
           {{subtask.name}}
         </md-checkbox>
diff --git a/src/demo-app/input/input-demo.html b/src/demo-app/input/input-demo.html
index 6e7b157dc93b..6acaf024faaa 100644
--- a/src/demo-app/input/input-demo.html
+++ b/src/demo-app/input/input-demo.html
@@ -145,7 +145,7 @@
         <button (click)="addABunch(1000)">Add 1000</button>
       </td>
     </thead>
-    <tr *ngFor="#item of items; #i = index">
+    <tr *ngFor="let item of items; let i = index">
       <td>{{i+1}}</td>
       <td>
         <md-input type="number" placeholder="value" aria-label="hello" [(ngModel)]="items[i].value"></md-input>
diff --git a/src/demo-app/list/list-demo.html b/src/demo-app/list/list-demo.html
index 0982bab7d57f..5cb977fb51e9 100644
--- a/src/demo-app/list/list-demo.html
+++ b/src/demo-app/list/list-demo.html
@@ -9,13 +9,13 @@ <h2>Normal lists</h2>
 
     <md-list>
       <h3 md-subheader>Items</h3>
-      <md-list-item *ngFor="#item of items">
+      <md-list-item *ngFor="let item of items">
         {{item}}
       </md-list-item>
     </md-list>
 
     <md-list>
-      <md-list-item *ngFor="#contact of contacts">
+      <md-list-item *ngFor="let contact of contacts">
         <h3 md-line>{{contact.name}}</h3>
         <p md-line *ngIf="thirdLine">extra line</p>
         <p md-line class="demo-secondary-text">{{contact.headline}}</p>
@@ -24,7 +24,7 @@ <h3 md-line>{{contact.name}}</h3>
 
     <md-list>
       <h3 md-subheader>Today</h3>
-      <md-list-item *ngFor="#message of messages">
+      <md-list-item *ngFor="let message of messages">
         <img md-list-avatar [src]="message.image" alt="Image of {{message.from}}">
         <h4 md-line>{{message.from}}</h4>
         <p md-line>
@@ -33,7 +33,7 @@ <h4 md-line>{{message.from}}</h4>
         </p>
       </md-list-item>
       <md-divider></md-divider>
-      <md-list-item *ngFor="#message of messages">
+      <md-list-item *ngFor="let message of messages">
         <h4 md-line>{{message.from}}</h4>
         <p md-line> {{message.subject}} </p>
         <p md-line class="demo-secondary-text">{{message.message}} </p>
@@ -45,13 +45,13 @@ <h4 md-line>{{message.from}}</h4>
     <h2>Dense lists</h2>
     <md-list dense>
       <h3 md-subheader>Items</h3>
-      <md-list-item *ngFor="#item of items">
+      <md-list-item *ngFor="let item of items">
         {{item}}
       </md-list-item>
     </md-list>
 
     <md-list dense>
-      <md-list-item *ngFor="#contact of contacts">
+      <md-list-item *ngFor="let contact of contacts">
         <h3 md-line>{{contact.name}}</h3>
         <p md-line class="demo-secondary-text">{{contact.headline}}</p>
       </md-list-item>
@@ -59,7 +59,7 @@ <h3 md-line>{{contact.name}}</h3>
 
     <md-list dense>
       <h3 md-subheader>Today</h3>
-      <md-list-item *ngFor="#message of messages">
+      <md-list-item *ngFor="let message of messages">
         <img md-list-avatar [src]="message.image" alt="Image of {{message.from}}">
         <h4 md-line>{{message.from}}</h4>
         <p md-line> {{message.subject}} </p>
@@ -70,7 +70,7 @@ <h4 md-line>{{message.from}}</h4>
   <div>
     <h2>Nav lists</h2>
     <md-nav-list>
-      <a md-list-item *ngFor="#link of links" href="http://www.google.com">
+      <a md-list-item *ngFor="let link of links" href="http://www.google.com">
         {{ link.name }}
       </a>
     </md-nav-list>
@@ -78,7 +78,7 @@ <h2>Nav lists</h2>
       More info!
     </div>
     <md-nav-list>
-      <md-list-item *ngFor="#link of links">
+      <md-list-item *ngFor="let link of links">
         <a md-line href="http://www.google.com">{{ link.name }}</a>
         <button md-icon-button (click)="infoClicked=!infoClicked">
           <md-icon>info</md-icon>
@@ -86,14 +86,14 @@ <h2>Nav lists</h2>
       </md-list-item>
     </md-nav-list>
     <md-nav-list>
-      <a md-list-item *ngFor="#link of links" href="http://www.google.com">
+      <a md-list-item *ngFor="let link of links" href="http://www.google.com">
         <md-icon md-list-icon>folder</md-icon>
         <span md-line>{{ link.name }}</span>
         <span md-line class="demo-secondary-text"> Description </span>
       </a>
     </md-nav-list>
     <md-nav-list dense>
-      <md-list-item *ngFor="#link of links">
+      <md-list-item *ngFor="let link of links">
         <a md-line href="http://www.google.com">{{ link.name }}</a>
         <button md-icon-button (click)="infoClicked=!infoClicked">
           <md-icon class="material-icons">info</md-icon>
@@ -101,4 +101,4 @@ <h2>Nav lists</h2>
       </md-list-item>
     </md-nav-list>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/demo-app/overlay/overlay-demo.ts b/src/demo-app/overlay/overlay-demo.ts
index 6044961e748d..601251b3a8ea 100644
--- a/src/demo-app/overlay/overlay-demo.ts
+++ b/src/demo-app/overlay/overlay-demo.ts
@@ -1,4 +1,7 @@
-import {Component, ElementRef, ViewChildren, QueryList, ViewEncapsulation} from 'angular2/core';
+import {
+    Component, ViewChildren, QueryList, ViewEncapsulation,
+    ViewContainerRef
+} from 'angular2/core';
 import {
   Overlay,
   OverlayState} from '../../core/overlay/overlay';
@@ -19,7 +22,7 @@ export class OverlayDemo {
 
   @ViewChildren(TemplatePortalDirective) templatePortals: QueryList<Portal<any>>;
 
-  constructor(public overlay: Overlay, public elementRef: ElementRef) { }
+  constructor(public overlay: Overlay, public viewContainerRef: ViewContainerRef) { }
 
   openRotiniPanel() {
     let config = new OverlayState();
@@ -32,7 +35,7 @@ export class OverlayDemo {
     this.nextPosition += 30;
 
     this.overlay.create(config).then(ref => {
-      ref.attach(new ComponentPortal(PastaPanel, this.elementRef));
+      ref.attach(new ComponentPortal(PastaPanel, this.viewContainerRef));
     });
   }
 
diff --git a/src/demo-app/radio/radio-demo.html b/src/demo-app/radio/radio-demo.html
index c3d0cb20dc83..802d0070a149 100644
--- a/src/demo-app/radio/radio-demo.html
+++ b/src/demo-app/radio/radio-demo.html
@@ -22,7 +22,7 @@ <h1>Favorite Season Example</h1>
 <h2>Dynamic Example with two-way data-binding</h2>
 <section class="demo-section">
   <md-radio-group name="more_options" [(ngModel)]="favoriteSeason">
-    <md-radio-button *ngFor="#season of seasonOptions" name="more_options" [value]="season">
+    <md-radio-button *ngFor="let season of seasonOptions" name="more_options" [value]="season">
       {{season}}
     </md-radio-button>
   </md-radio-group>
diff --git a/test/karma.config.ts b/test/karma.config.ts
index e06e46a3b86a..82a5957b9ae4 100644
--- a/test/karma.config.ts
+++ b/test/karma.config.ts
@@ -26,6 +26,9 @@ export function config(config) {
       // Angular 2 polyfills *must* be loaded after es6-shim and system-polyfills in order to
       // setup the monkey-patches for zones.
       {pattern: 'node_modules/angular2/bundles/angular2-polyfills.js', included: true, watched: false},
+      {pattern: 'node_modules/zone.js/dist/jasmine-patch.js', included: true, watched: false},
+      {pattern: 'node_modules/zone.js/dist/async-test.js', included: true, watched: false},
+      {pattern: 'node_modules/zone.js/dist/fake-async-test.js', included: true, watched: false},
       {pattern: 'node_modules/systemjs/dist/system.src.js', included: true, watched: false},
       {pattern: 'node_modules/rxjs/bundles/Rx.js', included: true, watched: false},
       'node_modules/reflect-metadata/Reflect.js',

From 04c8a1f8301263f415f4ee6345b0cccf3ab31b03 Mon Sep 17 00:00:00 2001
From: Jeremy Elbourn <jelbourn@gmail.com>
Date: Tue, 3 May 2016 22:38:22 -0700
Subject: [PATCH 17/23] feat: update to @angular rc0 packages & latest CLI
 (#384)

- Includes update to newest router
- Completely rewrites checkbox tests
---
 .travis.yml                                   |    1 +
 angular-cli-build.js                          |   17 +-
 angular-cli.json                              |   25 +
 package.json                                  |   26 +-
 public/empty-placeholder                      |    0
 src/components/button/button.spec.ts          |    7 +-
 src/components/button/button.ts               |    2 +-
 src/components/card/card.ts                   |    2 +-
 src/components/checkbox/checkbox.scss         |    2 +-
 src/components/checkbox/checkbox.spec.ts      | 1019 ++++++-----------
 src/components/checkbox/checkbox.ts           |   33 +-
 src/components/grid-list/grid-list.ts         |    2 +-
 src/components/icon/fake-svgs.ts              |    2 +-
 src/components/icon/icon-registry.ts          |   19 +-
 src/components/icon/icon.spec.ts              |   10 +-
 src/components/icon/icon.ts                   |   11 +-
 src/components/input/input.spec.ts            |   16 +-
 src/components/input/input.ts                 |   21 +-
 src/components/list/list.spec.ts              |    8 +-
 src/components/list/list.ts                   |   15 +-
 .../progress-bar/progress-bar.spec.ts         |    7 +-
 src/components/progress-bar/progress-bar.ts   |   11 +-
 .../progress-circle/progress-circle.spec.ts   |    7 +-
 .../progress-circle/progress-circle.ts        |    2 +-
 src/components/radio/radio.spec.ts            |    8 +-
 src/components/radio/radio.ts                 |   10 +-
 src/components/radio/radio_dispatcher.ts      |    4 +-
 src/components/sidenav/sidenav.spec.ts        |   19 +-
 src/components/sidenav/sidenav.ts             |   45 +-
 src/components/toolbar/toolbar.spec.ts        |    8 +-
 src/components/toolbar/toolbar.ts             |    6 +-
 src/core/async/promise-completer.ts           |   13 +
 src/core/gestures/MdGestureConfig.ts          |    4 +-
 .../live-announcer/live-announcer.spec.ts     |   15 +-
 src/core/live-announcer/live-announcer.ts     |    2 +-
 src/core/overlay/overlay.spec.ts              |    6 +-
 src/core/overlay/overlay.ts                   |    2 +-
 .../position/global-position-strategy.spec.ts |    2 +-
 .../position/relative-position-strategy.ts    |    2 +-
 src/core/portal/dom-portal-host.ts            |   13 +-
 src/core/portal/portal-directives.ts          |    9 +-
 ...{portal-exceptions.ts => portal-errors.ts} |   17 +-
 src/core/portal/portal.spec.ts                |  132 +--
 src/core/portal/portal.ts                     |   41 +-
 src/core/rtl/dir.ts                           |    2 +-
 src/demo-app/button/button-demo.ts            |    2 +-
 src/demo-app/card/card-demo.ts                |    2 +-
 src/demo-app/checkbox/checkbox-demo.html      |    4 +
 src/demo-app/checkbox/checkbox-demo.ts        |    5 +-
 src/demo-app/demo-app.html                    |   32 +-
 src/demo-app/demo-app.ts                      |   40 +-
 src/demo-app/gestures/gestures-demo.ts        |    2 +-
 src/demo-app/grid-list/grid-list-demo.ts      |    2 +-
 src/demo-app/icon/icon-demo.ts                |    2 +-
 src/demo-app/input/input-demo.ts              |    2 +-
 src/demo-app/list/list-demo.ts                |    2 +-
 .../live-announcer/live-announcer-demo.ts     |    2 +-
 src/demo-app/overlay/overlay-demo.ts          |    2 +-
 src/demo-app/portal/portal-demo.ts            |    6 +-
 .../progress-bar/progress-bar-demo.ts         |    2 +-
 .../progress-circle/progress-circle-demo.ts   |    2 +-
 src/demo-app/radio/radio-demo.ts              |    2 +-
 src/demo-app/sidenav/sidenav-demo.ts          |    2 +-
 src/demo-app/toolbar/toolbar-demo.ts          |    2 +-
 src/index.html                                |   34 +-
 src/main.ts                                   |   12 +-
 src/system-config.ts                          |   66 ++
 test/karma-test-shim.js                       |  126 +-
 test/karma.config.ts                          |   25 +-
 69 files changed, 862 insertions(+), 1141 deletions(-)
 create mode 100644 angular-cli.json
 create mode 100644 public/empty-placeholder
 create mode 100644 src/core/async/promise-completer.ts
 rename src/core/portal/{portal-exceptions.ts => portal-errors.ts} (71%)
 create mode 100644 src/system-config.ts

diff --git a/.travis.yml b/.travis.yml
index 8866678cc2f7..35196cb09681 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -46,6 +46,7 @@ matrix:
   allow_failures:
   - env: "MODE=saucelabs_optional"
   - env: "MODE=browserstack_optional"
+  - env: "MODE=e2e"
 
 install:
   - npm install
diff --git a/angular-cli-build.js b/angular-cli-build.js
index 92c173c48d8d..362ba6d06168 100644
--- a/angular-cli-build.js
+++ b/angular-cli-build.js
@@ -20,17 +20,24 @@ module.exports = function(defaults) {
         'src/core/style'
       ]
     },
-    vendorNpmFiles: []
+    vendorNpmFiles: [
+      'systemjs/dist/system-polyfills.js',
+      'systemjs/dist/system.src.js',
+      'zone.js/dist/*.js',
+      'es6-shim/es6-shim.js',
+      'reflect-metadata/*.js',
+      'rxjs/**/*.js',
+      '@angular/**/*.js',
+    ]
   });
 
-  const ngTree = angularAppTree.toTree();
-  const cssAutoprefixed = autoPrefixerTree(new Funnel(ngTree, {
+  const cssAutoprefixed = autoPrefixerTree(new Funnel(angularAppTree, {
     include: [ '**/*.css' ]
   }));
 
   return new MergeTree([
     new Funnel('src', { include: ['**/*.scss']}),
-    angularAppTree.toTree(),
-    cssAutoprefixed
+    angularAppTree,
+    cssAutoprefixed,
   ], { overwrite: true });
 };
diff --git a/angular-cli.json b/angular-cli.json
new file mode 100644
index 000000000000..b416b34f14ee
--- /dev/null
+++ b/angular-cli.json
@@ -0,0 +1,25 @@
+{
+  "project": {
+    "version": "0.0.37",
+    "name": "material2"
+  },
+  "apps": [
+    {"main": "src/main.ts", "tsconfig": "src/tsconfig.json"}
+  ],
+  "addons": [],
+  "packages": [],
+  "e2e": {
+    "protractor": {
+      "config": "test/protractor.conf.js"
+    }
+  },
+  "test": {
+    "karma": {
+      "config": "test/karma.conf.js"
+    }
+  },
+  "defaults": {
+    "prefix": "",
+    "sourceDir": "src"
+  }
+}
diff --git a/package.json b/package.json
index aebcb234be87..f536813c2cc8 100644
--- a/package.json
+++ b/package.json
@@ -25,45 +25,51 @@
     "node": ">= 4.2.1 < 5"
   },
   "dependencies": {
-    "angular2": "2.0.0-beta.17",
+    "@angular/common": "2.0.0-rc.0",
+    "@angular/compiler": "2.0.0-rc.0",
+    "@angular/core": "2.0.0-rc.0",
+    "@angular/router": "2.0.0-rc.0",
+    "@angular/http": "2.0.0-rc.0",
+    "@angular/platform-browser": "2.0.0-rc.0",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.0",
     "es6-promise": "^3.0.2",
     "es6-shim": "^0.35.0",
-    "reflect-metadata": "0.1.2",
+    "reflect-metadata": "0.1.3",
     "rxjs": "5.0.0-beta.6",
-    "systemjs": "0.19.20",
+    "systemjs": "0.19.26",
     "zone.js": "0.6.12"
   },
   "devDependencies": {
     "add-stream": "^1.0.0",
-    "angular-cli": "^0.0.31",
+    "angular-cli": "0.0.37",
     "broccoli-autoprefixer": "^4.1.0",
     "broccoli-funnel": "^1.0.1",
     "broccoli-merge-trees": "^1.1.1",
     "browserstacktunnel-wrapper": "^1.4.2",
     "conventional-changelog": "^1.1.0",
-    "ember-cli-inject-live-reload": "^1.3.0",
+    "ember-cli-inject-live-reload": "^1.4.0",
     "firebase-tools": "^2.2.1",
     "fs-extra": "^0.26.5",
     "glob": "^6.0.4",
     "gulp": "^3.9.1",
     "gulp-inline-ng2-template": "^1.1.2",
-    "jasmine-core": "^2.3.4",
+    "jasmine-core": "^2.4.1",
     "js-yaml": "^3.5.2",
     "karma": "^0.13.15",
     "karma-browserstack-launcher": "^0.1.7",
-    "karma-chrome-launcher": "^0.2.1",
+    "karma-chrome-launcher": "^0.2.3",
     "karma-firefox-launcher": "^0.1.7",
-    "karma-jasmine": "^0.3.6",
+    "karma-jasmine": "^0.3.8",
     "karma-sauce-launcher": "^0.2.14",
     "node-sass": "^3.4.2",
-    "protractor": "^3.1.1",
+    "protractor": "^3.3.0",
     "sass": "^0.5.0",
     "strip-ansi": "^3.0.0",
     "symlink-or-copy": "^1.0.1",
     "ts-node": "^0.5.5",
     "tslint": "^3.5.0",
     "typescript": "^1.8.0",
-    "typings": "^0.6.8",
+    "typings": "^0.8.1",
     "which": "^1.2.4"
   }
 }
diff --git a/public/empty-placeholder b/public/empty-placeholder
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/src/components/button/button.spec.ts b/src/components/button/button.spec.ts
index ffe5d3614463..8116e687600a 100644
--- a/src/components/button/button.spec.ts
+++ b/src/components/button/button.spec.ts
@@ -1,6 +1,7 @@
-import {it, describe, expect, beforeEach, inject, TestComponentBuilder} from 'angular2/testing';
-import {Component} from 'angular2/core';
-import {By} from 'angular2/platform/browser';
+import {it, describe, expect, beforeEach, inject} from '@angular/core/testing';
+import {TestComponentBuilder} from '@angular/compiler/testing';
+import {Component} from '@angular/core';
+import {By} from '@angular/platform-browser';
 import {MdButton, MdAnchor} from './button';
 
 
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index d63055cfb9c5..2e5127c2b942 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -6,7 +6,7 @@ import {
   ChangeDetectionStrategy,
   ElementRef,
   Renderer,
-} from 'angular2/core';
+} from '@angular/core';
 
 // TODO(jelbourn): Ink ripples.
 // TODO(jelbourn): Make the `isMouseDown` stuff done with one global listener.
diff --git a/src/components/card/card.ts b/src/components/card/card.ts
index 6127fbd9cfe4..69901a276477 100644
--- a/src/components/card/card.ts
+++ b/src/components/card/card.ts
@@ -1,4 +1,4 @@
-import {Component, ViewEncapsulation, ChangeDetectionStrategy} from 'angular2/core';
+import {Component, ViewEncapsulation, ChangeDetectionStrategy} from '@angular/core';
 
 
 /*
diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss
index 9ce568fcb0a7..1ad59c831cae 100644
--- a/src/components/checkbox/checkbox.scss
+++ b/src/components/checkbox/checkbox.scss
@@ -216,7 +216,7 @@ $_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1)
   pointer-events: none;
 }
 
-.md-checkbox {
+md-checkbox {
   cursor: pointer;
 
   &:focus {
diff --git a/src/components/checkbox/checkbox.spec.ts b/src/components/checkbox/checkbox.spec.ts
index 84a2fa126d45..05404886d01f 100644
--- a/src/components/checkbox/checkbox.spec.ts
+++ b/src/components/checkbox/checkbox.spec.ts
@@ -1,813 +1,502 @@
 import {
-  it,
-  describe,
-  expect,
-  beforeEach,
-  fakeAsync,
-  inject,
-  tick,
-  ComponentFixture,
-  TestComponentBuilder,
-} from 'angular2/testing';
-import {Component, DebugElement, EventEmitter} from 'angular2/core';
-import {By} from 'angular2/platform/browser';
-
+    it,
+    beforeEach,
+    inject,
+    async,
+    fakeAsync,
+    flushMicrotasks
+} from '@angular/core/testing';
+import {FORM_DIRECTIVES, NgModel, NgControl} from '@angular/common';
+import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing';
+import {Component, DebugElement} from '@angular/core';
+import {By} from '@angular/platform-browser';
 import {MdCheckbox} from './checkbox';
+import {PromiseCompleter} from '../../core/async/promise-completer';
 
-// IE11 does not support event constructors, so we need to perform this check.
-var BROWSER_SUPPORTS_EVENT_CONSTRUCTORS: boolean = (function() {
-  // See: https://github.com/rauschma/event_constructors_check/blob/gh-pages/index.html#L39
-  try {
-    return new Event('submit', { bubbles: false }).bubbles === false &&
-           new Event('submit', { bubbles: true }).bubbles === true;
-  } catch (e) {
-    return false;
-  }
-})();
 
-export function main() {
-  describe('MdCheckbox', function() {
-    var builder: TestComponentBuilder;
 
-    beforeEach(inject([TestComponentBuilder], function(tcb: TestComponentBuilder) {
-      builder = tcb;
-    }));
+describe('MdCheckbox', () => {
+  let builder: TestComponentBuilder;
+  let fixture: ComponentFixture<any>;
 
-    it('attaches a class "md-checkbox" to the host element', function(done: () => void) {
-      builder.createAsync(CheckboxController).then(function(fixture) {
-        fixture.detectChanges();
-        let el = fixture.debugElement.query(By.css('.md-checkbox'));
-        expect(el).not.toBeNull();
-      }).then(done).catch(done);
-    });
-    it('attaches a unique id to the host element', function(done: () => void) {
-      builder.createAsync(CheckboxMultiController).then(function(fixture) {
-        fixture.detectChanges();
-        let first = fixture.debugElement.query(By.css('.md-checkbox:first-of-type'));
-        let second = fixture.debugElement.query(By.css('.md-checkbox:nth-of-type(2)'));
-        expect(first.nativeElement.id).toMatch(/^md\-checkbox\-\d$/g);
-        expect(second.nativeElement.id).toMatch(/^md\-checkbox\-\d$/g);
-        expect(first.nativeElement.id).not.toEqual(second.nativeElement.id);
-      }).then(done).catch(done);
-    });
+  beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+    builder = tcb;
+  }));
 
-    it('allows clients to provide their own id', function(done: () => void) {
-      builder.createAsync(CheckboxCustomIdController).then(function(fixture) {
-        fixture.detectChanges();
-        let component = fixture.componentInstance;
-        let el = fixture.debugElement.query(By.css('.md-checkbox'));
-        expect(el.nativeElement.id).toEqual(component.checkboxId);
-      }).then(done).catch(done);
-    });
+  describe('basic behaviors', () => {
+    let checkboxDebugElement: DebugElement;
+    let checkboxNativeElement: HTMLElement;
+    let checkboxInstance: MdCheckbox;
+    let testComponent: SingleCheckbox;
 
-    it('creates a label with an id based off the checkbox id', function(done: () => void) {
-      builder.createAsync(CheckboxController).then(function(fixture) {
+    beforeEach(async(() => {
+      builder.createAsync(SingleCheckbox).then(f => {
+        fixture = f;
         fixture.detectChanges();
-        let el = fixture.debugElement.query(By.css('.md-checkbox'));
-        let label = el.nativeElement.querySelector('label');
-        expect(label.id).toEqual(`${el.nativeElement.id}-label`);
-      }).then(done).catch(done);
-    });
 
-    it('uses <ng-content></ng-content> for the label markup', function(done: () => void) {
-      builder.createAsync(CheckboxController).then(function(fixture) {
-        fixture.detectChanges();
-        let el = fixture.debugElement.query(By.css('.md-checkbox'));
-        let label = el.nativeElement.querySelector('label');
-        expect(label.innerHTML.trim()).toEqual('<em>my</em> checkbox');
-      }).then(done).catch(done);
-    });
+        checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox));
+        checkboxNativeElement = checkboxDebugElement.nativeElement;
+        checkboxInstance = checkboxDebugElement.componentInstance;
+        testComponent = fixture.debugElement.componentInstance;
+      });
+    }));
 
-    it('adds a checkbox role attribute to the host element', function(done: () => void) {
-      builder.createAsync(CheckboxController).then(function(fixture) {
-        fixture.detectChanges();
-        let el = fixture.debugElement.query(By.css('.md-checkbox'));
-        expect(el.nativeElement.getAttribute('role')).toEqual('checkbox');
-      }).then(done).catch(done);
-    });
+    it('should add and remove the checked state', () => {
+      expect(checkboxInstance.checked).toBe(false);
+      expect(checkboxNativeElement.classList).not.toContain('md-checkbox-checked');
+      expect(checkboxNativeElement.getAttribute('aria-checked')).toBe('false');
 
-    it('defaults "aria-checked" to "false" on the host element', function(done: () => void) {
-      builder.createAsync(CheckboxController).then(function(fixture) {
-        fixture.detectChanges();
-        let el = fixture.debugElement.query(By.css('.md-checkbox'));
-        expect(el.nativeElement.getAttribute('aria-checked')).toEqual('false');
-      }).then(done).catch(done);
-    });
+      testComponent.isChecked = true;
+      fixture.detectChanges();
 
-    it('defaults "aria-disabled" to "false" on the host element', function(done: () => void) {
-      builder.createAsync(CheckboxController).then(function(fixture) {
-        fixture.detectChanges();
-        let el = fixture.debugElement.query(By.css('.md-checkbox'));
-        expect(el.nativeElement.getAttribute('aria-disabled')).toEqual('false');
-      }).then(done).catch(done);
-    });
+      expect(checkboxInstance.checked).toBe(true);
+      expect(checkboxNativeElement.classList).toContain('md-checkbox-checked');
+      expect(checkboxNativeElement.getAttribute('aria-checked')).toBe('true');
 
-    it('defaults tabindex to 0 to the host element', function(done: () => void) {
-      builder.createAsync(CheckboxController).then(function(fixture) {
-        fixture.detectChanges();
-        let el = fixture.debugElement.query(By.css('.md-checkbox'));
-        expect(el.nativeElement.tabIndex).toEqual(0);
-      }).then(done).catch(done);
-    });
+      testComponent.isChecked = false;
+      fixture.detectChanges();
 
-    it('allows clients to provide their own tabindex', function(done: () => void) {
-      builder.createAsync(CheckboxCustomTabindexController).then(function(fixture) {
-        fixture.detectChanges();
-        let component = fixture.componentInstance;
-        let el = fixture.debugElement.query(By.css('.md-checkbox'));
-        expect(el.nativeElement.tabIndex).toEqual(component.checkboxTabindex);
-      }).then(done).catch(done);
+      expect(checkboxInstance.checked).toBe(false);
+      expect(checkboxNativeElement.classList).not.toContain('md-checkbox-checked');
+      expect(checkboxNativeElement.getAttribute('aria-checked')).toBe('false');
     });
 
-    it('allows clients to provide an aria-label', function(done: () => void) {
-      builder.createAsync(CheckboxCustomArialabelController).then(function(fixture) {
-        fixture.detectChanges();
-        let component = fixture.componentInstance;
-        let el = fixture.debugElement.query(By.css('.md-checkbox'));
-        expect(el.nativeElement.getAttribute('aria-label')).toEqual(component.checkboxLabel);
-      }).then(done).catch(done);
-    });
+    it('should add and remove indeterminate state', () => {
+      expect(checkboxNativeElement.classList).not.toContain('md-checkbox-checked');
+      expect(checkboxNativeElement.getAttribute('aria-checked')).toBe('false');
 
-    it('sets the "aria-labelledby" attribute to the id of the label', function(done: () => void) {
-      builder.createAsync(CheckboxController).then(function(fixture) {
-        fixture.detectChanges();
-        let el = fixture.debugElement.query(By.css('.md-checkbox'));
-        let label = el.nativeElement.querySelector('label');
-        expect(el.nativeElement.getAttribute('aria-labelledby')).toEqual(label.id);
-      }).then(done).catch(done);
-    });
+      testComponent.isIndeterminate = true;
+      fixture.detectChanges();
 
-    describe('when given an "align" input with a value of "end"', function() {
-      var fixture: ComponentFixture;
+      expect(checkboxNativeElement.classList).toContain('md-checkbox-indeterminate');
+      expect(checkboxNativeElement.getAttribute('aria-checked')).toBe('mixed');
 
-      beforeEach(function(done: () => void) {
-        builder.createAsync(CheckboxEndAlignedController).then(function(f) {
-          fixture = f;
-          fixture.detectChanges();
-        }).then(done).catch(done);
-      });
+      testComponent.isIndeterminate = false;
+      fixture.detectChanges();
 
-      it('sets an "md-checkbox-align-end" class on the host element', function() {
-        let el = fixture.debugElement.query(By.css('.md-checkbox'));
-        expect(el.nativeElement.className).toContain('md-checkbox-align-end');
-      });
+      expect(checkboxNativeElement.classList).not.toContain('md-checkbox-indeterminate');
+      expect(checkboxNativeElement.getAttribute('aria-checked')).toBe('false');
     });
 
-    describe(`when the checkbox's checked value is set`, function() {
-      var fixture: ComponentFixture;
-      var controller: CheckboxController;
-      var changePromise: Promise<boolean>;
-      var waitingForChange: boolean;
-
-      function waitForChange(): Promise<boolean> {
-        if (waitingForChange) {
-          throw new Error('You are already waiting for a change!');
-        }
-        waitingForChange = true;
-        return new Promise(function(resolve, reject) {
-          controller.eventProxy.subscribe(resolve, reject);
-        }).then(function(val) {
-          waitingForChange = false;
-          return val;
-        });
-      }
-
-      beforeEach(function(done: () => void) {
-        builder.createAsync(CheckboxController).then(function(f) {
-          fixture = f;
-          controller = fixture.componentInstance;
-
-          changePromise = waitForChange();
-          controller.isChecked = true;
-          fixture.detectChanges();
-        }).then(done).catch(done);
-      });
+    it('should toggle checked state on click', () => {
+      expect(checkboxInstance.checked).toBe(false);
 
-      it('adds a "md-checkbox-checked" modifier class to the host element', function() {
-        let el = fixture.debugElement.query(By.css('.md-checkbox'));
-        expect(el.nativeElement.className).toContain('md-checkbox-checked');
-      });
+      checkboxNativeElement.click();
+      fixture.detectChanges();
 
-      it('sets "aria-checked" to be "true" on the host element', function() {
-        let el = fixture.debugElement.query(By.css('md-checkbox'));
-        controller.isIndeterminate = false;
-        controller.isChecked = true;
-        fixture.detectChanges();
-        expect(el.nativeElement.getAttribute('aria-checked')).toEqual('true');
-      });
-
-      it('emits a change event with the currently checked value', function(done: () => void) {
-        changePromise.then(function(isChecked) {
-          expect(isChecked).toBe(true);
+      expect(checkboxInstance.checked).toBe(true);
 
-          let nextChangePromise = waitForChange();
-          controller.isChecked = false;
-          fixture.detectChanges();
+      checkboxNativeElement.click();
+      fixture.detectChanges();
 
-          return nextChangePromise;
-        }).then(function(isChecked) {
-          expect(isChecked).toBe(false);
-        }).then(done).catch(done);
-      });
+      expect(checkboxInstance.checked).toBe(false);
     });
 
-    describe('when the checkbox is indeterminate', function() {
-      var fixture: ComponentFixture;
-      var controller: CheckboxController;
-
-      beforeEach(function(done: () => void) {
-        builder.createAsync(CheckboxController).then(function(f) {
-          fixture = f;
-          controller = fixture.componentInstance;
+    it('should change from indeterminate to checked on click', () => {
+      testComponent.isIndeterminate = true;
+      fixture.detectChanges();
 
-          controller.isIndeterminate = true;
-          fixture.detectChanges();
-        }).then(done).catch(done);
-      });
+      checkboxNativeElement.click();
+      fixture.detectChanges();
 
-      it('adds a "md-checkbox-indeterminate" class to the host element', function() {
-        let el = fixture.debugElement.query(By.css('.md-checkbox'));
-        expect(el.nativeElement.className).toContain('md-checkbox-indeterminate');
-      });
+      expect(checkboxInstance.checked).toBe(true);
+      expect(checkboxInstance.indeterminate).toBe(false);
 
-      it('sets "aria-checked" to "mixed" on the host element', function() {
-        let el = fixture.debugElement.query(By.css('.md-checkbox'));
-        expect(el.nativeElement.getAttribute('aria-checked')).toEqual('mixed');
-      });
+      checkboxNativeElement.click();
+      fixture.detectChanges();
 
-      describe('when re-checked to true', function() {
-        beforeEach(function() {
-          controller.isChecked = true;
-          fixture.detectChanges();
-        });
+      expect(checkboxInstance.checked).toBe(false);
+      expect(checkboxInstance.indeterminate).toBe(false);
+    });
 
-        it('removes md-checkbox-indeterminate', function() {
-          let el = fixture.debugElement.query(By.css('.md-checkbox'));
-          expect(el.nativeElement.className).not.toContain('md-checkbox-indeterminate');
-        });
-      });
+    it('should add and remove disabled state', () => {
+      expect(checkboxInstance.disabled).toBe(false);
+      expect(checkboxNativeElement.classList).not.toContain('md-checkbox-disabled');
+      expect(checkboxNativeElement.tabIndex).toBe(0);
 
-      describe('when re-checked to false', function() {
-        beforeEach(function() {
-          controller.isChecked = true;
-          fixture.detectChanges();
+      testComponent.isDisabled = true;
+      fixture.detectChanges();
 
-          controller.isIndeterminate = true;
-          fixture.detectChanges();
+      expect(checkboxInstance.disabled).toBe(true);
+      expect(checkboxNativeElement.classList).toContain('md-checkbox-disabled');
+      expect(checkboxNativeElement.hasAttribute('tabindex')).toBe(false);
 
-          controller.isChecked = false;
-          fixture.detectChanges();
-        });
+      testComponent.isDisabled = false;
+      fixture.detectChanges();
 
-        it('removes md-checkbox-indeterminate', function() {
-          let el = fixture.debugElement.query(By.css('.md-checkbox'));
-          expect(el.nativeElement.className).not.toContain('md-checkbox-indeterminate');
-        });
-      });
+      expect(checkboxInstance.disabled).toBe(false);
+      expect(checkboxNativeElement.classList).not.toContain('md-checkbox-disabled');
+      expect(checkboxNativeElement.tabIndex).toBe(0);
     });
 
-    describe('when the checkbox is disabled', function() {
-      var fixture: ComponentFixture;
-      var controller: CheckboxController;
+    it('should not toggle `checked` state upon interation while disabled', () => {
+      testComponent.isDisabled = true;
+      fixture.detectChanges();
 
-      beforeEach(function(done: () => void) {
-        builder.createAsync(CheckboxController).then(function(f) {
-          fixture = f;
-          controller = fixture.componentInstance;
-          fixture.detectChanges();
+      checkboxNativeElement.click();
+      expect(checkboxInstance.checked).toBe(false);
+    });
 
-          controller.isDisabled = true;
-          fixture.detectChanges();
-        }).then(done).catch(done);
-      });
+    it('should overwrite indeterminate state when checked is re-set', () => {
+      testComponent.isIndeterminate = true;
+      fixture.detectChanges();
 
-      it('adds a "md-checkbox-disabled" class to the host element', function() {
-        let el = fixture.debugElement.query(By.css('.md-checkbox'));
-        expect(el.nativeElement.className).toContain('md-checkbox-disabled');
-      });
+      testComponent.isChecked = true;
+      fixture.detectChanges();
 
-      it('removes the tabindex attribute from the host element', function() {
-        let el = fixture.debugElement.query(By.css('.md-checkbox'));
-        expect(el.nativeElement.hasAttribute('tabindex')).toBe(false);
-      });
+      expect(checkboxInstance.checked).toBe(true);
+      expect(checkboxInstance.indeterminate).toBe(false);
+    });
 
-      it('sets "aria-disabled" to "true" on the host element', function() {
-        let el = fixture.debugElement.query(By.css('.md-checkbox'));
-        expect(el.nativeElement.getAttribute('aria-disabled')).toEqual('true');
-      });
+    it('should preserve the user-provided id', () => {
+      expect(checkboxNativeElement.id).toBe('simple-check');
+    });
 
-      it('restores the previously set tabindex when re-enabled', function(done: () => void) {
-        builder.createAsync(CheckboxCustomTabindexController).then(function(f) {
-          fixture = f;
-          let tabindexController: CheckboxCustomTabindexController = fixture.componentInstance;
-
-          tabindexController.isDisabled = true;
-          fixture.detectChanges();
-          let el = fixture.debugElement.query(By.css('.md-checkbox'));
-          expect(el.nativeElement.hasAttribute('tabindex')).toBe(false);
-
-          tabindexController.isDisabled = false;
-          fixture.detectChanges();
-          el = fixture.debugElement.query(By.css('.md-checkbox'));
-          expect(el.nativeElement.getAttribute('tabindex')).toEqual(
-              String(tabindexController.checkboxTabindex));
-        }).then(done).catch(done);
-      });
+    it('should create a label element with its own unique id for aria-labelledby', () => {
+      let labelElement = checkboxNativeElement.querySelector('label');
+      expect(labelElement.id).toBeTruthy();
+      expect(labelElement.id).not.toBe(checkboxNativeElement.id);
+      expect(checkboxNativeElement.getAttribute('aria-labelledby')).toBe(labelElement.id);
+    });
 
-      describe('when the tabindex input is changed while disabled', function() {
-        var tabindexController: CheckboxCustomTabindexController;
-        var newTabindex: number;
+    it('should project the checkbox content into the label element', () => {
+      let labelElement = checkboxNativeElement.querySelector('label');
 
-        beforeEach(function(done: () => void) {
-          newTabindex = 10;
+      expect(labelElement.textContent.trim()).toBe('Simple checkbox');
+    });
 
-          builder.createAsync(CheckboxCustomTabindexController).then(function(f) {
-            fixture = f;
-            tabindexController = fixture.componentInstance;
+    it('should mark the host element with role="checkbox"', () => {
+      expect(checkboxNativeElement.getAttribute('role')).toBe('checkbox');
+    });
 
-            tabindexController.isDisabled = true;
-            tabindexController.checkboxTabindex = newTabindex;
-            fixture.detectChanges();
-          }).then(done).catch(done);
-        });
+    it('should make the host element a tab stop', () => {
+      expect(checkboxNativeElement.tabIndex).toBe(0);
+    });
 
-        it('keeps the tabindex removed from the host', function() {
-          let el = fixture.debugElement.query(By.css('.md-checkbox'));
-          expect(el.nativeElement.hasAttribute('tabindex')).toBe(false);
-        });
+    it('should add a css class to end-align the checkbox', () => {
+      testComponent.alignment = 'end';
+      fixture.detectChanges();
 
-        it('uses the newly changed tabindex when re-enabled', function() {
-          tabindexController.isDisabled = false;
-          fixture.detectChanges();
+      expect(checkboxNativeElement.classList).toContain('md-checkbox-align-end');
+    });
 
-          let el = fixture.debugElement.query(By.css('.md-checkbox'));
-          expect(el.nativeElement.getAttribute('tabindex')).toEqual(String(newTabindex));
-        });
+    it('should emit a change event when the `checked` value changes', () => {
+      // TODO(jelbourn): this *should* work with async(), but fixture.whenStable currently doesn't
+      // know to look at pending macro tasks.
+      // See https://github.com/angular/angular/issues/8389
+      // As a short-term solution, use a promise (which jasmine knows how to understand).
+      let promiseCompleter = new PromiseCompleter();
+      checkboxInstance.change.subscribe(() => {
+        promiseCompleter.resolve();
       });
-    });
 
-    describe('when the checkbox is clicked', function() {
-      var fixture: ComponentFixture;
-      var controller: CheckboxController;
-      var el: DebugElement;
+      testComponent.isChecked = true;
+      fixture.detectChanges();
 
-      function clickCheckbox(): Event {
-        return click(el, fixture);
-      }
+      return promiseCompleter.promise;
+    });
 
-      beforeEach(function(done: () => void) {
-        builder.createAsync(CheckboxController).then(function(f) {
-          fixture = f;
-          controller = fixture.componentInstance;
+    it('should stop propagation of interaction events when disabed', () => {
+      testComponent.isDisabled = true;
+      fixture.detectChanges();
 
-          fixture.detectChanges();
-          el = fixture.debugElement.query(By.css('.md-checkbox'));
-        }).then(done).catch(done);
-      });
+      checkboxNativeElement.click();
+      fixture.detectChanges();
 
-      it('toggles the checked value', function() {
-        clickCheckbox();
-        expect(el.nativeElement.className).toContain('md-checkbox-checked');
+      expect(testComponent.parentElementClicked).toBe(false);
+    });
 
-        clickCheckbox();
-        expect(el.nativeElement.className).not.toContain('md-checkbox-checked');
-      });
+    it('should not scroll when pressing space on the checkbox', () => {
+      let keyboardEvent = dispatchKeyboardEvent('keydown', checkboxNativeElement, ' ');
+      fixture.detectChanges();
 
-      describe('when the checkbox is disabled', function() {
-        beforeEach(function() {
-          controller.isDisabled = true;
-          fixture.detectChanges();
-        });
-
-        it('stops the click event from propagating', function() {
-          let evt = clickCheckbox();
-          expect(evt.stopPropagation).toHaveBeenCalled();
-        });
-
-        it('does not alter the checked value', function() {
-          clickCheckbox();
-          expect(el.nativeElement.className).not.toContain('md-checkbox-checked');
-        });
-      });
+      expect(keyboardEvent.preventDefault).toHaveBeenCalled();
     });
 
-    describe('when the checkbox is focused', function() {
-      var fixture: ComponentFixture;
-      var controller: CheckboxController;
-      var el: DebugElement;
-
-      function dispatchUIEventOnEl(evtName: string) {
-        var evt: Event;
-        if (BROWSER_SUPPORTS_EVENT_CONSTRUCTORS) {
-          evt = new Event(evtName);
-        } else {
-          evt = document.createEvent('Event');
-          evt.initEvent(evtName, true, true);
-        }
-        el.nativeElement.dispatchEvent(evt);
-        fixture.detectChanges();
-      }
+    it('should toggle the checked state when pressing space', () => {
+      dispatchKeyboardEvent('keyup', checkboxNativeElement, ' ');
+      fixture.detectChanges();
 
-      beforeEach(function(done: () => void) {
-        builder.createAsync(CheckboxController).then(function(f) {
-          fixture = f;
-          controller = fixture.componentInstance;
+      expect(checkboxInstance.checked).toBe(true);
 
-          fixture.detectChanges();
-          el = fixture.debugElement.query(By.css('.md-checkbox'));
-        }).then(done).catch(done);
-      });
+      dispatchKeyboardEvent('keyup', checkboxNativeElement, ' ');
+      fixture.detectChanges();
 
-      it('blocks spacebar keydown events from performing their default behavior', function() {
-        dispatchUIEventOnEl('focus');
+      expect(checkboxInstance.checked).toBe(false);
+    });
 
-        var evt = keydown(el, ' ', fixture);
-        expect(evt.preventDefault).toHaveBeenCalled();
-      });
+    it('should not toggle the checked state when pressing space if disabled', () => {
+      testComponent.isDisabled = true;
+      fixture.detectChanges();
 
-      it('does not block other keyboard events from performing their default behavior', function() {
-        dispatchUIEventOnEl('focus');
+      dispatchKeyboardEvent('keyup', checkboxNativeElement, ' ');
+      fixture.detectChanges();
 
-        var evt = keydown(el, 'Tab', fixture);
-        expect(evt.preventDefault).not.toHaveBeenCalled();
-      });
+      expect(checkboxInstance.checked).toBe(false);
+      expect(testComponent.parentElementKeyedUp).toBe(false);
     });
 
-    describe('when a spacebar press occurs on the checkbox', function() {
-      var fixture: ComponentFixture;
-      var controller: CheckboxController;
-      var el: DebugElement;
+    describe('state transition css classes', () => {
+      it('should transition unchecked -> checked -> unchecked', () => {
+        testComponent.isChecked = true;
+        fixture.detectChanges();
+        expect(checkboxNativeElement.classList).toContain('md-checkbox-anim-unchecked-checked');
 
-      function spacePress(): Event {
-        return keyup(el, ' ', fixture);
-      }
+        testComponent.isChecked = false;
+        fixture.detectChanges();
+        expect(checkboxNativeElement.classList).not.toContain('md-checkbox-anim-unchecked-checked');
+        expect(checkboxNativeElement.classList).toContain('md-checkbox-anim-checked-unchecked');
+      });
 
-      beforeEach(function(done: () => void) {
-        builder.createAsync(CheckboxController).then(function(f) {
-          fixture = f;
-          controller = fixture.componentInstance;
+      it('should transition unchecked -> indeterminate -> unchecked', () => {
+        testComponent.isIndeterminate = true;
+        fixture.detectChanges();
 
-          fixture.detectChanges();
-          el = fixture.debugElement.query(By.css('.md-checkbox'));
-        }).then(done).catch(done);
-      });
+        expect(checkboxNativeElement.classList)
+            .toContain('md-checkbox-anim-unchecked-indeterminate');
 
-      it('toggles the checked value', function() {
-        spacePress();
-        expect(el.nativeElement.className).toContain('md-checkbox-checked');
+        testComponent.isIndeterminate = false;
+        fixture.detectChanges();
 
-        spacePress();
-        expect(el.nativeElement.className).not.toContain('md-checkbox-checked');
+        expect(checkboxNativeElement.classList)
+            .not.toContain('md-checkbox-anim-unchecked-indeterminate');
+        expect(checkboxNativeElement.classList)
+            .toContain('md-checkbox-anim-indeterminate-unchecked');
       });
 
-      describe('when the checkbox is disabled', function() {
-        beforeEach(function() {
-          controller.isDisabled = true;
-          fixture.detectChanges();
-        });
-
-        it('stops the click event from propagating', function() {
-          let evt = spacePress();
-          expect(evt.stopPropagation).toHaveBeenCalled();
-        });
-
-        it('does not alter the checked value', function() {
-          spacePress();
-          expect(el.nativeElement.className).not.toContain('md-checkbox-checked');
-        });
-      });
-    });
+      it('should transition indeterminate -> checked', () => {
+        testComponent.isIndeterminate = true;
+        fixture.detectChanges();
 
-    describe('usage as a form control', function() {
-      var fixture: ComponentFixture;
-      var controller: CheckboxFormcontrolController;
+        testComponent.isChecked = true;
+        fixture.detectChanges();
 
-      beforeEach(function(done: () => void) {
-        builder.createAsync(CheckboxFormcontrolController).then(function(f) {
-          fixture = f;
-          controller = fixture.componentInstance;
-          fixture.detectChanges();
-        }).then(done).catch(done);
+        expect(checkboxNativeElement.classList).not.toContain(
+            'md-checkbox-anim-unchecked-indeterminate');
+        expect(checkboxNativeElement.classList).toContain('md-checkbox-anim-indeterminate-checked');
       });
 
-      // NOTE(traviskaufman): This test is not that elegant, but I have not found a better way
-      // to test through ngModel as of now.
-      // See: https://github.com/angular/angular/issues/7409
-      it('supports ngModel/ngControl', function(done: () => void) {
-        var el:  DebugElement;
-        var invalidMsg: DebugElement;
-
-        fakeAsync(function() {
-          el = fixture.debugElement.query(By.css('.md-checkbox'));
-          invalidMsg = fixture.debugElement.query(By.css('#invalid-msg'));
-
-          fixture.detectChanges();
-          tick();
-          expect(el.nativeElement.className).toContain('ng-untouched');
-          expect(el.nativeElement.className).toContain('ng-pristine');
-          expect(invalidMsg.nativeElement.hidden).toBe(true);
-
-          controller.model.isChecked = true;
-          fixture.detectChanges();
-          tick();
-          fixture.detectChanges();
-
-          expect(el.nativeElement.className).toContain('md-checkbox-checked');
-          expect(el.nativeElement.className).toContain('ng-dirty');
-          expect(el.nativeElement.className).toContain('ng-valid');
-
-          var blur: Event;
-          if (BROWSER_SUPPORTS_EVENT_CONSTRUCTORS) {
-            blur = new Event('blur');
-          } else {
-            blur = document.createEvent('UIEvent');
-            (<UIEvent>blur).initUIEvent('blur', true, true, window, 0);
-          }
-          el.nativeElement.dispatchEvent(blur);
-          fixture.detectChanges();
-          tick();
-          expect(el.nativeElement.className).toContain('ng-touched');
-        })();
-
-        let onceChanged = controller.model.waitForChange();
-        click(el, fixture);
-        onceChanged.then(function() {
-          expect(controller.model.isChecked).toBe(false);
-        }).then(done).catch(done);
-      });
-    });
+      it('should not apply transition classes when there is no state change', () => {
+        testComponent.isChecked = checkboxInstance.checked;
+        fixture.detectChanges();
+        expect(checkboxNativeElement).not.toMatch(/^md\-checkbox\-anim/g);
 
-    describe('applying transition classes', function() {
-      var fixture: ComponentFixture;
-      var controller: CheckboxController;
+        testComponent.isIndeterminate = checkboxInstance.indeterminate;
+        expect(checkboxNativeElement).not.toMatch(/^md\-checkbox\-anim/g);
+      });
 
-      beforeEach(function(done: () => void) {
-        builder.createAsync(CheckboxController).then(function(f) {
-          fixture = f;
-          controller = fixture.componentInstance;
-          fixture.detectChanges();
-        }).then(done).catch(done);
+      it('should not initially have any transition classes', () => {
+        expect(checkboxNativeElement).not.toMatch(/^md\-checkbox\-anim/g);
       });
+    });
+  });
 
-      it('applies transition classes when going from unchecked <-> checked', function() {
-        let el = fixture.debugElement.query(By.css('.md-checkbox'));
+  describe('with provided aria-label ', () => {
+    let checkboxDebugElement: DebugElement;
+    let checkboxNativeElement: HTMLElement;
 
-        controller.isChecked = true;
-        fixture.detectChanges();
-        expect(el.nativeElement.className).toContain('md-checkbox-anim-unchecked-checked');
+    it('should use the provided aria-label', async(() => {
+      builder.createAsync(CheckboxWithAriaLabel).then(f => {
+        fixture = f;
+        checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox));
+        checkboxNativeElement = checkboxDebugElement.nativeElement;
 
-        controller.isChecked = false;
-        fixture.detectChanges();
-        expect(el.nativeElement.className).not.toContain('md-checkbox-anim-unchecked-checked');
-        expect(el.nativeElement.className).toContain('md-checkbox-anim-checked-unchecked');
+        expect(checkboxNativeElement.getAttribute('aria-label')).toBe('Super effective');
       });
+    }));
+  });
 
-      it('applies transition classes when going from unchecked <-> indeterminate', function() {
-        let el = fixture.debugElement.query(By.css('.md-checkbox'));
+  describe('with provided tabIndex', () => {
+    let checkboxDebugElement: DebugElement;
+    let checkboxNativeElement: HTMLElement;
+    let testComponent: CheckboxWithTabIndex;
 
-        controller.isIndeterminate = true;
+    beforeEach(async(() => {
+      builder.createAsync(CheckboxWithTabIndex).then(f => {
+        fixture = f;
         fixture.detectChanges();
-        expect(el.nativeElement.className).toContain('md-checkbox-anim-unchecked-indeterminate');
 
-        controller.isIndeterminate = false;
-        fixture.detectChanges();
-        expect(el.nativeElement.className).not.toContain(
-            'md-checkbox-anim-unchecked-indeterminate');
-        expect(el.nativeElement.className).toContain('md-checkbox-anim-indeterminate-unchecked');
+        testComponent = fixture.debugElement.componentInstance;
+        checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox));
+        checkboxNativeElement = checkboxDebugElement.nativeElement;
       });
+    }));
 
-      it('applies a transition class when going from checked -> indeterminate', function() {
-        let el = fixture.debugElement.query(By.css('.md-checkbox'));
+    it('should preserve any given tabIndex', async(() => {
+      expect(checkboxNativeElement.tabIndex).toBe(7);
+    }));
 
-        controller.isChecked = true;
-        fixture.detectChanges();
+    it('should preserve given tabIndex when the checkbox is disabled then enabled', () => {
+      testComponent.isDisabled = true;
+      fixture.detectChanges();
 
-        controller.isIndeterminate = true;
-        fixture.detectChanges();
-        expect(el.nativeElement.className).not.toContain('md-checkbox-anim-unchecked-checked');
-        expect(el.nativeElement.className).toContain('md-checkbox-anim-checked-indeterminate');
-      });
+      testComponent.customTabIndex = 13;
+      fixture.detectChanges();
 
-      it('applies a transition class when going from indeterminate -> checked', function() {
-        let el = fixture.debugElement.query(By.css('.md-checkbox'));
+      testComponent.isDisabled = false;
+      fixture.detectChanges();
 
-        controller.isIndeterminate = true;
-        fixture.detectChanges();
+      expect(checkboxNativeElement.tabIndex).toBe(13);
+    });
+  });
 
-        controller.isChecked = true;
+  describe('with multiple checkboxes', () => {
+    beforeEach(async(() => {
+      builder.createAsync(MultipleCheckboxes).then(f => {
+        fixture = f;
         fixture.detectChanges();
-        expect(el.nativeElement.className).not.toContain(
-            'md-checkbox-anim-unchecked-indeterminate');
-        expect(el.nativeElement.className).toContain('md-checkbox-anim-indeterminate-checked');
       });
+    }));
 
-      it('does not apply any transition classes when there is nothing to transition', function() {
-        let el = fixture.debugElement.query(By.css('.md-checkbox'));
+    it('should assign a unique id to each checkbox', () => {
+      let [firstId, secondId] =
+          fixture.debugElement.queryAll(By.directive(MdCheckbox))
+          .map(debugElement => debugElement.nativeElement.id);
 
-        controller.isChecked = controller.isChecked;
-        fixture.detectChanges();
-        expect(el.nativeElement.className).not.toMatch(/^md\-checkbox\-anim/g);
+      expect(firstId).toBeTruthy();
+      expect(secondId).toBeTruthy();
+      expect(firstId).not.toEqual(secondId);
+    });
+  });
 
-        controller.isIndeterminate = controller.isIndeterminate;
-        fixture.detectChanges();
-        expect(el.nativeElement.className).not.toMatch(/^md\-checkbox\-anim/g);
+  describe('with ngModel and ngControl', () => {
+    beforeEach(async(() => {
+      builder.createAsync(CheckboxWithFormDirectives).then(f => {
+        f.detectChanges();
+        fixture = f;
       });
+    }));
 
-      it('does not apply any transition classes when the component is initialized', function() {
-        let el = fixture.debugElement.query(By.css('.md-checkbox'));
-        expect(el.nativeElement.className).not.toMatch(/^md\-checkbox\-anim/g);
-      });
+    it('should be in pristine, untouched, and valid states initially', fakeAsync(() => {
+      flushMicrotasks();
 
-      describe('when interacted with from the initial state', function() {
-        beforeEach(function(done: any) {
-          builder.createAsync(CheckboxBarebonesController).then(function(f) {
-            fixture = f;
-            controller = fixture.componentInstance;
-            fixture.detectChanges();
-          }).then(done).catch(done.fail);
-        });
-
-        it('applies a transition class when checked', function() {
-          let el = fixture.debugElement.query(By.css('.md-checkbox'));
-          click(el, fixture);
-          expect(el.nativeElement.className).toContain('md-checkbox-anim-unchecked-checked');
-        });
-
-        it('applies a transition class when made indeterminate', function() {
-          let el = fixture.debugElement.query(By.css('.md-checkbox'));
-          controller.isIndeterminate = true;
-          fixture.detectChanges();
-          expect(el.nativeElement.className).toContain('md-checkbox-anim-unchecked-indeterminate');
-        });
-      });
-    });
-  });
-}
+      let checkboxElement = fixture.debugElement.query(By.directive(MdCheckbox));
+      let ngControl = <NgControl> checkboxElement.injector.get(NgControl);
 
-function click(el: DebugElement, fixture: ComponentFixture) {
-  var clickEvent: Event;
-  if (BROWSER_SUPPORTS_EVENT_CONSTRUCTORS) {
-    clickEvent = new Event('click');
-  } else {
-    clickEvent = document.createEvent('UIEvent');
-    (<UIEvent>clickEvent).initUIEvent('click', true, true, window, 1);
-  }
-  spyOn(clickEvent, 'stopPropagation').and.callThrough();
-  el.nativeElement.dispatchEvent(clickEvent);
-  fixture.detectChanges();
-  return clickEvent;
-}
+      expect(ngControl.valid).toBe(true);
+      expect(ngControl.pristine).toBe(true);
+      expect(ngControl.touched).toBe(false);
 
-// TODO(traviskaufman): Reinvestigate implementation of this method once tests in Dart begin to run.
-function keyEvent(name: string, el: DebugElement, key: string, fixture: ComponentFixture): Event {
-  var kbdEvent: Event;
-  if (BROWSER_SUPPORTS_EVENT_CONSTRUCTORS) {
-    kbdEvent = new KeyboardEvent(name);
-  } else {
-    kbdEvent = document.createEvent('Event');
-    kbdEvent.initEvent(name, true, true);
-  }
-  // Hack DOM Level 3 Events "key" prop into keyboard event.
-  Object.defineProperty(kbdEvent, 'key', {
-    value: key,
-    enumerable: false,
-    writable: false,
-    configurable: true
+      // TODO(jelbourn): test that `touched` and `pristine` state are modified appropriately.
+      // This is currently blocked on issues with async() and fakeAsync().
+    }));
   });
-  spyOn(kbdEvent, 'preventDefault').and.callThrough();
-  spyOn(kbdEvent, 'stopPropagation').and.callThrough();
-  el.nativeElement.dispatchEvent(kbdEvent);
-  fixture.detectChanges();
-  return kbdEvent;
-}
 
-function keydown(el: DebugElement, key: string, fixture: ComponentFixture): Event {
-  return keyEvent('keydown', el, key, fixture);
-}
+});
 
-function keyup(el: DebugElement, key: string, fixture: ComponentFixture): Event {
-  return keyEvent('keyup', el, key, fixture);
-}
 
+/** Simple component for testing a single checkbox. */
 @Component({
-  selector: 'checkbox-controller',
+  directives: [MdCheckbox],
   template: `
-    <md-checkbox [checked]="isChecked"
-                 [indeterminate]="isIndeterminate"
-                 [disabled]="isDisabled"
-                 (change)="eventProxy.emit($event)">
-      <em>my</em> checkbox
+  <div (click)="parentElementClicked = true" (keyup)="parentElementKeyedUp = true">    
+    <md-checkbox 
+        id="simple-check"
+        [align]="alignment"
+        [checked]="isChecked" 
+        [indeterminate]="isIndeterminate" 
+        [disabled]="isDisabled"
+        (change)="changeCount = changeCount + 1">
+      Simple checkbox
     </md-checkbox>
-  `,
-  directives: [MdCheckbox]
+  </div>`
 })
-class CheckboxController {
+class SingleCheckbox {
+  alignment: string = 'start';
   isChecked: boolean = false;
   isIndeterminate: boolean = false;
   isDisabled: boolean = false;
-  eventProxy: EventEmitter<boolean> = new EventEmitter<boolean>();
+  parentElementClicked: boolean = false;
+  parentElementKeyedUp: boolean = false;
+  lastKeydownEvent: Event = null;
 }
 
+/** Simple component for testing an MdCheckbox with ngModel and ngControl. */
 @Component({
-  selector: 'checkbox-multi-controller',
+  directives: [MdCheckbox, FORM_DIRECTIVES, NgModel],
   template: `
-    <md-checkbox></md-checkbox>
-    <md-checkbox></md-checkbox>
+    <form>
+      <md-checkbox ngControl="cb" [(ngModel)]="isGood">Be good</md-checkbox>
+    </form>
   `,
-  directives: [MdCheckbox]
 })
-class CheckboxMultiController {}
+class CheckboxWithFormDirectives {
+  isGood: boolean = false;
+}
 
-@Component({
-  selector: 'checkbox-custom-id-controller',
+/** Simple test component with multiple checkboxes. */
+@Component(({
+  directives: [MdCheckbox],
   template: `
-    <md-checkbox [id]="checkboxId"></md-checkbox>
-  `,
-  directives: [MdCheckbox]
-})
-class CheckboxCustomIdController {
-  checkboxId: string = 'my-checkbox';
-}
+    <md-checkbox>Option 1</md-checkbox>
+    <md-checkbox>Option 2</md-checkbox>
+  `
+}))
+class MultipleCheckboxes { }
+
 
+/** Simple test component with tabIndex */
 @Component({
-  selector: 'checkbox-custom-tabindex-controller',
+  directives: [MdCheckbox],
   template: `
-    <md-checkbox [tabindex]="checkboxTabindex" [disabled]="isDisabled"></md-checkbox>
-  `,
-  directives: [MdCheckbox]
+    <md-checkbox [tabindex]="customTabIndex" [disabled]="isDisabled">
+    </md-checkbox>`,
 })
-class CheckboxCustomTabindexController {
-  checkboxTabindex: number = 5;
+class CheckboxWithTabIndex {
+  customTabIndex: number = 7;
   isDisabled: boolean = false;
 }
 
+/** Simple test component with an aria-label set. */
 @Component({
-  selector: 'checkbox-custom-arialabel-controller',
-  template: `
-    <md-checkbox [aria-label]="checkboxLabel"></md-checkbox>
-  `,
-  directives: [MdCheckbox]
+  directives: [MdCheckbox],
+  template: `<md-checkbox aria-label="Super effective"></md-checkbox>`
 })
-class CheckboxCustomArialabelController {
-  checkboxLabel: string = 'My awesome checkbox';
-}
+class CheckboxWithAriaLabel { }
 
-class FormcontrolModel {
-  private _isChecked = false;
-  private _changeEmitter = new EventEmitter<boolean>();
+// TODO(jelbourn): remove eveything below when Angular supports faking events.
 
-  get isChecked(): boolean {
-    return this._isChecked;
-  }
 
-  set isChecked(isChecked: boolean) {
-    let shouldEmitChange = this._isChecked !== isChecked;
-    this._isChecked = isChecked;
-    if (shouldEmitChange) {
-      this._changeEmitter.emit(this._isChecked);
-    }
+var BROWSER_SUPPORTS_EVENT_CONSTRUCTORS: boolean = (function() {
+  // See: https://github.com/rauschma/event_constructors_check/blob/gh-pages/index.html#L39
+  try {
+    return new Event('submit', { bubbles: false }).bubbles === false &&
+           new Event('submit', { bubbles: true }).bubbles === true;
+  } catch (e) {
+    return false;
   }
+})();
 
-  waitForChange(): Promise<boolean> {
-    return new Promise((resolve, reject) => {
-      let subscription: {unsubscribe: () => void};
-      let subscriber = function(isChecked: boolean) {
-        subscription.unsubscribe();
-        resolve(isChecked);
-      };
-      subscription = this._changeEmitter.subscribe(subscriber, reject);
-    });
+
+/**
+ * Dispatches a keyboard event from an element.
+ * @param eventName The name of the event to dispatch, such as "keydown".
+ * @param element The element from which the event will be dispatched.
+ * @param key The key tied to the KeyboardEvent.
+ * @returns The artifically created keyboard event.
+ */
+function dispatchKeyboardEvent(eventName: string, element: HTMLElement, key: string): Event {
+  let keyboardEvent: Event;
+  if (BROWSER_SUPPORTS_EVENT_CONSTRUCTORS) {
+    keyboardEvent = new KeyboardEvent(eventName);
+  } else {
+    keyboardEvent = document.createEvent('Event');
+    keyboardEvent.initEvent(eventName, true, true);
   }
-}
 
-@Component({
-  selector: 'checkbox-formcontrol-controller',
-  template: `
-    <form>
-      <md-checkbox [(ngModel)]="model.isChecked"
-                   ngControl="cb" #cb="ngForm">
-      </md-checkbox>
-      <p id="invalid-msg" [hidden]="cb.valid || cb.pristine">INVALID!</p>
-    </form>
-  `,
-  directives: [MdCheckbox]
-})
-class CheckboxFormcontrolController {
-  model = new FormcontrolModel();
-}
+  // Hack DOM Level 3 Events "key" prop into keyboard event.
+  Object.defineProperty(keyboardEvent, 'key', {
+    value: key,
+    enumerable: false,
+    writable: false,
+    configurable: true,
+  });
 
-@Component({
-  selector: 'checkbox-end-aligned-controller',
-  template: `<md-checkbox [align]="'end'"></md-checkbox>`,
-  directives: [MdCheckbox]
-})
-class CheckboxEndAlignedController {}
+  // Using spyOn seems to be the *only* way to determine if preventDefault is called, since it
+  // seems that `defaultPrevented` does not get set with the technique.
+  spyOn(keyboardEvent, 'preventDefault').and.callThrough();
 
-@Component({
-  selector: 'checkbox-barebones-controller',
-  template: `<md-checkbox [indeterminate]="isIndeterminate"></md-checkbox>`,
-  directives: [MdCheckbox]
-})
-class CheckboxBarebonesController {
-  public isIndeterminate: boolean = false;
+  element.dispatchEvent(keyboardEvent);
+  return keyboardEvent;
 }
+
diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts
index d91883185d60..8ac0105ea657 100644
--- a/src/components/checkbox/checkbox.ts
+++ b/src/components/checkbox/checkbox.ts
@@ -8,13 +8,14 @@ import {
   Provider,
   Renderer,
   ViewEncapsulation,
-  forwardRef
-} from 'angular2/core';
-
+  forwardRef,
+} from '@angular/core';
 import {
   NG_VALUE_ACCESSOR,
-  ControlValueAccessor
-} from 'angular2/src/common/forms/directives/control_value_accessor';
+  ControlValueAccessor,
+} from '@angular/common';
+
+
 
 /**
  * Monotonically increasing integer used to auto-generate unique ids for checkbox components.
@@ -60,7 +61,6 @@ enum TransitionCheckState {
   host: {
     'role': 'checkbox',
     '[id]': 'id',
-    '[class.md-checkbox]': 'true',
     '[class.md-checkbox-indeterminate]': 'indeterminate',
     '[class.md-checkbox-checked]': 'checked',
     '[class.md-checkbox-disabled]': 'disabled',
@@ -110,6 +110,9 @@ export class MdCheckbox implements ControlValueAccessor {
   /** Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor. */
   onTouched: () => any = () => {};
 
+  /** Whether the `checked` state has been set to its initial value. */
+  private _isInitialized: boolean = false;
+
   private _currentAnimationClass: string = '';
 
   private _currentCheckState: TransitionCheckState = TransitionCheckState.Init;
@@ -131,11 +134,19 @@ export class MdCheckbox implements ControlValueAccessor {
   }
 
   set checked(checked: boolean) {
-    this._indeterminate = false;
-    this._checked = checked;
-    this._transitionCheckState(
-        this._checked ? TransitionCheckState.Checked : TransitionCheckState.Unchecked);
-    this.change.emit(this._checked);
+    if (checked != this.checked) {
+      this._indeterminate = false;
+      this._checked = checked;
+      this._transitionCheckState(
+          this._checked ? TransitionCheckState.Checked : TransitionCheckState.Unchecked);
+
+      // Only fire a change event if this isn't the first time the checked property is ever set.
+      if (this._isInitialized) {
+        this.change.emit(this._checked);
+      }
+    }
+
+    this._isInitialized = true;
   }
 
   /**
diff --git a/src/components/grid-list/grid-list.ts b/src/components/grid-list/grid-list.ts
index beea794f5e7c..8853bbdca372 100644
--- a/src/components/grid-list/grid-list.ts
+++ b/src/components/grid-list/grid-list.ts
@@ -1,4 +1,4 @@
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'md-grid-list',
diff --git a/src/components/icon/fake-svgs.ts b/src/components/icon/fake-svgs.ts
index 791996498b63..7a9a08a12ce2 100644
--- a/src/components/icon/fake-svgs.ts
+++ b/src/components/icon/fake-svgs.ts
@@ -1,6 +1,6 @@
 import {
   Response,
-  ResponseOptions} from 'angular2/http';
+  ResponseOptions} from '@angular/http';
 
 /**
  * Fake URLs and associated SVG documents used by tests.
diff --git a/src/components/icon/icon-registry.ts b/src/components/icon/icon-registry.ts
index 27704ff18d90..9fd8be75ae7f 100644
--- a/src/components/icon/icon-registry.ts
+++ b/src/components/icon/icon-registry.ts
@@ -1,11 +1,10 @@
-import {Injectable} from 'angular2/core';
-import {BaseException} from 'angular2/src/facade/exceptions';
-import {Http} from 'angular2/http';
+import {Injectable} from '@angular/core';
+import {Http} from '@angular/http';
 import {Observable} from 'rxjs/Rx';
 
 
 /** Exception thrown when attempting to load an icon with a name that cannot be found. */
-export class MdIconNameNotFoundException extends BaseException {
+export class MdIconNameNotFoundError extends Error {
   constructor(iconName: string) {
       super(`Unable to find icon with the name "${iconName}"`);
   }
@@ -15,7 +14,7 @@ export class MdIconNameNotFoundException extends BaseException {
  * Exception thrown when attempting to load SVG content that does not contain the expected
  * <svg> tag.
  */
-export class MdIconSvgTagNotFoundException extends BaseException {
+export class MdIconSvgTagNotFoundError extends Error {
   constructor() {
       super('<svg> tag not found');
   }
@@ -153,7 +152,7 @@ export class MdIconRegistry {
   /**
    * Returns an Observable that produces the icon (as an <svg> DOM element) with the given name
    * and namespace. The icon must have been previously registered with addIcon or addIconSet;
-   * if not, the Observable will throw an MdIconNameNotFoundException.
+   * if not, the Observable will throw an MdIconNameNotFoundError.
    */
   getNamedSvgIcon(name: string, namespace = ''): Observable<SVGElement> {
     // Return (copy of) cached icon if possible.
@@ -166,7 +165,7 @@ export class MdIconRegistry {
     if (iconSetConfigs) {
       return this._getSvgFromIconSetConfigs(name, iconSetConfigs);
     }
-    return Observable.throw(new MdIconNameNotFoundException(key));
+    return Observable.throw(new MdIconNameNotFoundError(key));
   }
 
   /**
@@ -190,7 +189,7 @@ export class MdIconRegistry {
    * if found copies the element to a new <svg> element. If not found, fetches all icon sets
    * that have not been cached, and searches again after all fetches are completed.
    * The returned Observable produces the SVG element if possible, and throws
-   * MdIconNameNotFoundException if no icon with the specified name can be found.
+   * MdIconNameNotFoundError if no icon with the specified name can be found.
    */
   private _getSvgFromIconSetConfigs(name: string, iconSetConfigs: SvgIconConfig[]):
       Observable<SVGElement> {
@@ -227,7 +226,7 @@ export class MdIconRegistry {
         .map((ignoredResults: any) => {
           const foundIcon = this._extractIconWithNameFromAnySet(name, iconSetConfigs);
           if (!foundIcon) {
-            throw new MdIconNameNotFoundException(name);
+            throw new MdIconNameNotFoundError(name);
           }
           return foundIcon;
         });
@@ -318,7 +317,7 @@ export class MdIconRegistry {
     div.innerHTML = str;
     const svg = <SVGElement>div.querySelector('svg');
     if (!svg) {
-      throw new MdIconSvgTagNotFoundException();
+      throw new MdIconSvgTagNotFoundError();
     }
     return svg;
   }
diff --git a/src/components/icon/icon.spec.ts b/src/components/icon/icon.spec.ts
index b9bd6cb8bacc..6390ff083137 100644
--- a/src/components/icon/icon.spec.ts
+++ b/src/components/icon/icon.spec.ts
@@ -5,11 +5,11 @@ import {
     beforeEach,
     beforeEachProviders,
     inject,
-    TestComponentBuilder
-} from 'angular2/testing';
-import {HTTP_PROVIDERS, XHRBackend} from 'angular2/http';
-import {MockBackend} from 'angular2/http/testing';
-import {provide, Component} from 'angular2/core';
+} from '@angular/core/testing';
+import {TestComponentBuilder} from '@angular/compiler/testing';
+import {HTTP_PROVIDERS, XHRBackend} from '@angular/http';
+import {MockBackend} from '@angular/http/testing';
+import {provide, Component} from '@angular/core';
 import {MdIcon} from './icon';
 import {MdIconRegistry} from './icon-registry';
 import {getFakeSvgHttpResponse} from './fake-svgs';
diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index 04b5d1154447..7d312ceea969 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -9,14 +9,13 @@ import {
     SimpleChange,
     ViewEncapsulation,
     AfterViewChecked
-} from 'angular2/core';
-import {BaseException} from 'angular2/src/facade/exceptions';
+} from '@angular/core';
 import {MdIconRegistry} from './icon-registry';
 
 
 
 /** Exception thrown when an invalid icon name is passed to an md-icon component. */
-export class MdIconInvalidNameException extends BaseException {
+export class MdIconInvalidNameError extends Error {
   constructor(iconName: string) {
       super(`Invalid icon name: "${name}"`);
   }
@@ -89,12 +88,12 @@ export class MdIcon implements OnChanges, OnInit, AfterViewChecked {
    * The separator for the two fields is ':'. If there is no separator, an empty
    * string is returned for the icon set and the entire value is returned for
    * the icon name. If the argument is falsy, returns an array of two empty strings.
-   * Throws a MdIconInvalidNameException if the name contains two or more ':' separators.
+   * Throws a MdIconInvalidNameError if the name contains two or more ':' separators.
    * Examples:
    *   'social:cake' -> ['social', 'cake']
    *   'penguin' -> ['', 'penguin']
    *   null -> ['', '']
-   *   'a:b:c' -> (throws MdIconInvalidNameException)
+   *   'a:b:c' -> (throws MdIconInvalidNameError)
    */
   private _splitIconName(iconName: string): [string, string] {
     if (!iconName) {
@@ -108,7 +107,7 @@ export class MdIcon implements OnChanges, OnInit, AfterViewChecked {
       case 2:
         return <[string, string]>parts;
       default:
-        throw new MdIconInvalidNameException(iconName);
+        throw new MdIconInvalidNameError(iconName);
     }
   }
 
diff --git a/src/components/input/input.spec.ts b/src/components/input/input.spec.ts
index 24ad7d0a8f83..9d4f393b4b8e 100644
--- a/src/components/input/input.spec.ts
+++ b/src/components/input/input.spec.ts
@@ -5,11 +5,11 @@ import {
   beforeEach,
   fakeAsync,
   inject,
-  TestComponentBuilder,
   tick,
-} from 'angular2/testing';
-import {Component} from 'angular2/core';
-import {By} from 'angular2/platform/browser';
+} from '@angular/core/testing';
+import {TestComponentBuilder} from '@angular/compiler/testing';
+import {Component} from '@angular/core';
+import {By} from '@angular/platform-browser';
 import {
   MdInput,
   MD_INPUT_DIRECTIVES,
@@ -88,7 +88,7 @@ export function main() {
         .then(fixture => {
             expect(() => fixture.detectChanges())
               .toThrow();
-              // TODO(jelbourn): .toThrow(new MdInputDuplicatedHintException('start'));
+              // TODO(jelbourn): .toThrow(new MdInputDuplicatedHintError('start'));
               // See https://github.com/angular/angular/issues/8348
         });
     });
@@ -98,7 +98,7 @@ export function main() {
         .then(fixture => {
           expect(() => fixture.detectChanges())
             .toThrow();
-            // TODO(jelbourn): .toThrow(new MdInputDuplicatedHintException('start'));
+            // TODO(jelbourn): .toThrow(new MdInputDuplicatedHintError('start'));
             // See https://github.com/angular/angular/issues/8348
         });
     });
@@ -108,7 +108,7 @@ export function main() {
         .then(fixture => {
           expect(() => fixture.detectChanges())
             .toThrow();
-            // TODO(jelbourn): .toThrow(new MdInputPlaceholderConflictException());
+            // TODO(jelbourn): .toThrow(new MdInputPlaceholderConflictError());
             // See https://github.com/angular/angular/issues/8348
         });
     });
@@ -122,7 +122,7 @@ export function main() {
             // hard to build a full exception to compare with.
             // We just check for any exception in this case.
             expect(() => fixture.detectChanges())
-              .toThrow(/* new MdInputUnsupportedTypeException('file') */);
+              .toThrow(/* new MdInputUnsupportedTypeError('file') */);
           })();
         });
     });
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index d3a1a00eff94..c90d27ae0a4c 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -11,12 +11,11 @@ import {
   ContentChildren,
   QueryList,
   OnChanges,
-} from 'angular2/core';
+} from '@angular/core';
 import {
   NG_VALUE_ACCESSOR,
   ControlValueAccessor
-} from 'angular2/src/common/forms/directives/control_value_accessor';
-import {BaseException} from 'angular2/src/facade/exceptions';
+} from '@angular/common';
 import {BooleanFieldValue} from '../../core/annotations/field-value';
 
 
@@ -28,7 +27,7 @@ const MD_INPUT_CONTROL_VALUE_ACCESSOR = new Provider(
       multi: true
     });
 
-// Invalid input type. Using one of these will throw an MdInputUnsupportedTypeException.
+// Invalid input type. Using one of these will throw an MdInputUnsupportedTypeError.
 const MD_INPUT_INVALID_INPUT_TYPE = [
   'file',
   'radio',
@@ -39,19 +38,19 @@ const MD_INPUT_INVALID_INPUT_TYPE = [
 let nextUniqueId = 0;
 
 
-export class MdInputPlaceholderConflictException extends BaseException {
+export class MdInputPlaceholderConflictError extends Error {
   constructor() {
     super('Placeholder attribute and child element were both specified.');
   }
 }
 
-export class MdInputUnsupportedTypeException extends BaseException {
+export class MdInputUnsupportedTypeError extends Error {
   constructor(type: string) {
     super(`Input type "${type}" isn't supported by md-input.`);
   }
 }
 
-export class MdInputDuplicatedHintException extends BaseException {
+export class MdInputDuplicatedHintError extends Error {
   constructor(align: string) {
     super(`A hint was already declared for 'align="${align}"'.`);
   }
@@ -227,10 +226,10 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
    */
   private _validateConstraints() {
     if (this.placeholder != '' && this.placeholder != null && this._placeholderChild != null) {
-      throw new MdInputPlaceholderConflictException();
+      throw new MdInputPlaceholderConflictError();
     }
     if (MD_INPUT_INVALID_INPUT_TYPE.indexOf(this.type) != -1) {
-      throw new MdInputUnsupportedTypeException(this.type);
+      throw new MdInputUnsupportedTypeError(this.type);
     }
 
     if (this._hintChildren) {
@@ -240,12 +239,12 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
       this._hintChildren.forEach((hint: MdHint) => {
         if (hint.align == 'start') {
           if (startHint || this.hintLabel) {
-            throw new MdInputDuplicatedHintException('start');
+            throw new MdInputDuplicatedHintError('start');
           }
           startHint = hint;
         } else if (hint.align == 'end') {
           if (endHint) {
-            throw new MdInputDuplicatedHintException('end');
+            throw new MdInputDuplicatedHintError('end');
           }
           endHint = hint;
         }
diff --git a/src/components/list/list.spec.ts b/src/components/list/list.spec.ts
index 2c5688e7857d..1f19aa1f7f7b 100644
--- a/src/components/list/list.spec.ts
+++ b/src/components/list/list.spec.ts
@@ -4,10 +4,10 @@ import {
   expect,
   beforeEach,
   inject,
-  TestComponentBuilder
-} from 'angular2/testing';
-import {Component} from 'angular2/core';
-import {By} from 'angular2/platform/browser';
+} from '@angular/core/testing';
+import {TestComponentBuilder} from '@angular/compiler/testing';
+import {Component} from '@angular/core';
+import {By} from '@angular/platform-browser';
 
 import {MD_LIST_DIRECTIVES} from './list';
 
diff --git a/src/components/list/list.ts b/src/components/list/list.ts
index ccba49c9f4ff..d70990fcbe6f 100644
--- a/src/components/list/list.ts
+++ b/src/components/list/list.ts
@@ -1,5 +1,16 @@
-import {Component, ViewEncapsulation, ContentChildren, ContentChild, QueryList, Directive,
-  ElementRef, Renderer, AfterContentInit} from 'angular2/core';
+import {
+    Component,
+    ViewEncapsulation,
+    ContentChildren,
+    ContentChild,
+    QueryList,
+    Directive,
+    ElementRef,
+    Renderer,
+    AfterContentInit,
+} from '@angular/core';
+
+
 
 @Component({
   selector: 'md-list, md-nav-list',
diff --git a/src/components/progress-bar/progress-bar.spec.ts b/src/components/progress-bar/progress-bar.spec.ts
index 8e7932d16386..505f2b17483b 100644
--- a/src/components/progress-bar/progress-bar.spec.ts
+++ b/src/components/progress-bar/progress-bar.spec.ts
@@ -1,6 +1,7 @@
-import {beforeEach, describe, expect, inject, it, TestComponentBuilder} from 'angular2/testing';
-import {Component} from 'angular2/core';
-import {By} from 'angular2/platform/browser';
+import {beforeEach, describe, expect, inject, it} from '@angular/core/testing';
+import {TestComponentBuilder} from '@angular/compiler/testing';
+import {Component} from '@angular/core';
+import {By} from '@angular/platform-browser';
 import {MdProgressBar} from './progress-bar';
 
 
diff --git a/src/components/progress-bar/progress-bar.ts b/src/components/progress-bar/progress-bar.ts
index d07581d5ff05..0f5efc0c93df 100644
--- a/src/components/progress-bar/progress-bar.ts
+++ b/src/components/progress-bar/progress-bar.ts
@@ -3,8 +3,7 @@ import {
     ChangeDetectionStrategy,
     HostBinding,
     Input,
-} from 'angular2/core';
-import {isPresent} from 'angular2/src/facade/lang';
+} from '@angular/core';
 
 
 // TODO(josephperrott): Benchpress tests.
@@ -38,9 +37,7 @@ export class MdProgressBar {
     return this._value;
   }
   set value(v: number) {
-    if (isPresent(v)) {
-      this._value = MdProgressBar.clamp(v);
-    }
+    this._value = MdProgressBar.clamp(v || 0);
   }
 
 
@@ -55,9 +52,7 @@ export class MdProgressBar {
     return this._bufferValue;
   }
   set bufferValue(v: number) {
-    if (isPresent(v)) {
-      this._bufferValue = MdProgressBar.clamp(v);
-    }
+    this._bufferValue = MdProgressBar.clamp(v || 0);
   }
 
 
diff --git a/src/components/progress-circle/progress-circle.spec.ts b/src/components/progress-circle/progress-circle.spec.ts
index dbf3a6d78bb1..2cb19b6c1d36 100644
--- a/src/components/progress-circle/progress-circle.spec.ts
+++ b/src/components/progress-circle/progress-circle.spec.ts
@@ -4,9 +4,10 @@ import {
   expect,
   beforeEach,
   inject,
-  TestComponentBuilder} from 'angular2/testing';
-import {Component, DebugElement} from 'angular2/core';
-import {By} from 'angular2/platform/browser';
+} from '@angular/core/testing';
+import {TestComponentBuilder} from '@angular/compiler/testing';
+import {Component, DebugElement} from '@angular/core';
+import {By} from '@angular/platform-browser';
 import {MdProgressCircle} from './progress-circle';
 
 
diff --git a/src/components/progress-circle/progress-circle.ts b/src/components/progress-circle/progress-circle.ts
index 5b0bc877d0f9..34655b893733 100644
--- a/src/components/progress-circle/progress-circle.ts
+++ b/src/components/progress-circle/progress-circle.ts
@@ -3,7 +3,7 @@ import {
   ChangeDetectionStrategy,
   HostBinding,
   Input
-} from 'angular2/core';
+} from '@angular/core';
 
 
 // TODO(josephperrott): Benchpress tests.
diff --git a/src/components/radio/radio.spec.ts b/src/components/radio/radio.spec.ts
index d00a106ca707..ca408650f200 100644
--- a/src/components/radio/radio.spec.ts
+++ b/src/components/radio/radio.spec.ts
@@ -6,10 +6,10 @@ import {
   fakeAsync,
   inject,
   tick,
-  TestComponentBuilder
-} from 'angular2/testing';
-import {Component, DebugElement} from 'angular2/core';
-import {By} from 'angular2/platform/browser';
+} from '@angular/core/testing';
+import {TestComponentBuilder} from '@angular/compiler/testing';
+import {Component, DebugElement} from '@angular/core';
+import {By} from '@angular/platform-browser';
 
 import {MdRadioButton, MdRadioGroup, MdRadioChange} from './radio';
 import {MdRadioDispatcher} from './radio_dispatcher';
diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts
index 1301ed83999f..8310a1919d6a 100644
--- a/src/components/radio/radio.ts
+++ b/src/components/radio/radio.ts
@@ -14,16 +14,18 @@ import {
   QueryList,
   ViewEncapsulation,
   forwardRef
-} from 'angular2/core';
-
+} from '@angular/core';
 import {
   NG_VALUE_ACCESSOR,
   ControlValueAccessor
-} from 'angular2/src/common/forms/directives/control_value_accessor';
-
+} from '@angular/common';
 import {MdRadioDispatcher} from './radio_dispatcher';
+
+
 export {MdRadioDispatcher} from './radio_dispatcher';
 
+
+
 /**
  * Provider Expression that allows md-radio-group to register as a ControlValueAccessor. This
  * allows it to support [(ngModel)] and ngControl.
diff --git a/src/components/radio/radio_dispatcher.ts b/src/components/radio/radio_dispatcher.ts
index f142b9c6b797..cfd6d9eee1f9 100644
--- a/src/components/radio/radio_dispatcher.ts
+++ b/src/components/radio/radio_dispatcher.ts
@@ -1,4 +1,6 @@
-import {Injectable} from 'angular2/core';
+import {Injectable} from '@angular/core';
+
+
 
 /**
  * Class for radio buttons to coordinate unique selection based on name.
diff --git a/src/components/sidenav/sidenav.spec.ts b/src/components/sidenav/sidenav.spec.ts
index 779f759e7f24..f63429e3443f 100644
--- a/src/components/sidenav/sidenav.spec.ts
+++ b/src/components/sidenav/sidenav.spec.ts
@@ -3,21 +3,20 @@ import {
   describe,
   expect,
   beforeEach,
-  ComponentFixture,
-  TestComponentBuilder,
   fakeAsync,
   inject,
   injectAsync,
   tick
-} from 'angular2/testing';
-import {XHR} from 'angular2/src/compiler/xhr';
+} from '@angular/core/testing';
+import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing';
+import {XHR} from '@angular/compiler';
 import {
   Component,
   Type,
   ViewMetadata
-} from 'angular2/core';
+} from '@angular/core';
 
-import {By} from 'angular2/platform/browser';
+import {By} from '@angular/platform-browser';
 import {MdSidenav, MdSidenavLayout, MD_SIDENAV_DIRECTIVES} from './sidenav';
 
 
@@ -30,8 +29,8 @@ function fakeAsyncAdaptor(fn: () => void) {
  * Create a ComponentFixture from the builder. This takes a template and a style for sidenav.
  */
 function createFixture(appType: Type, builder: TestComponentBuilder,
-    template: string, style: string): ComponentFixture {
-  let fixture: ComponentFixture = null;
+    template: string, style: string): ComponentFixture<any> {
+  let fixture: ComponentFixture<any> = null;
   // Remove the styles (which remove the animations/transitions).
   builder
     .overrideView(MdSidenavLayout, new ViewMetadata({
@@ -39,14 +38,14 @@ function createFixture(appType: Type, builder: TestComponentBuilder,
       styles: [style],
       directives: [MdSidenav],
     }))
-    .createAsync(appType).then((f: ComponentFixture) => { fixture = f; });
+    .createAsync(appType).then((f: ComponentFixture<any>) => { fixture = f; });
   tick();
 
   return fixture;
 }
 
 
-function endSidenavTransition(fixture: ComponentFixture) {
+function endSidenavTransition(fixture: ComponentFixture<any>) {
   let sidenav: any = fixture.debugElement.query(By.directive(MdSidenav)).componentInstance;
   sidenav.onTransitionEnd({
     target: (<any>sidenav)._elementRef.nativeElement,
diff --git a/src/components/sidenav/sidenav.ts b/src/components/sidenav/sidenav.ts
index 6ac2f36dacea..8482baff6de6 100644
--- a/src/components/sidenav/sidenav.ts
+++ b/src/components/sidenav/sidenav.ts
@@ -1,29 +1,28 @@
 import {
-  AfterContentInit,
-  Component,
-  ContentChildren,
-  ElementRef,
-  Host,
-  HostBinding,
-  HostListener,
-  Input,
-  Optional,
-  Output,
-  QueryList,
-  Type,
-  ChangeDetectionStrategy,
-  EventEmitter,
-  Renderer
-} from 'angular2/core';
-import {BaseException} from 'angular2/src/facade/exceptions';
+    AfterContentInit,
+    Component,
+    ContentChildren,
+    ElementRef,
+    Host,
+    HostBinding,
+    HostListener,
+    Input,
+    Optional,
+    Output,
+    QueryList,
+    Type,
+    ChangeDetectionStrategy,
+    EventEmitter,
+    Renderer
+} from '@angular/core';
 import {Dir} from '../../core/rtl/dir';
-import {PromiseCompleter} from 'angular2/src/facade/promise';
+import {PromiseCompleter} from '../../core/async/promise-completer';
 
 
 /**
  * Exception thrown when two MdSidenav are matching the same side.
  */
-export class MdDuplicatedSidenavException extends BaseException {
+export class MdDuplicatedSidenavError extends Error {
   constructor(align: string) {
     super(`A sidenav was already declared for 'align="${align}"'`);
   }
@@ -307,12 +306,12 @@ export class MdSidenavLayout implements AfterContentInit {
     this._sidenavs.forEach(sidenav => {
       if (sidenav.align == 'end') {
         if (this._end != null) {
-          throw new MdDuplicatedSidenavException('end');
+          throw new MdDuplicatedSidenavError('end');
         }
         this._end = sidenav;
       } else {
         if (this._start != null) {
-          throw new MdDuplicatedSidenavException('start');
+          throw new MdDuplicatedSidenavError('start');
         }
         this._start = sidenav;
       }
@@ -351,8 +350,8 @@ export class MdSidenavLayout implements AfterContentInit {
   /**
    * Return the width of the sidenav, if it's in the proper mode and opened.
    * This may relayout the view, so do not call this often.
-   * @param MdSidenav
-   * @private
+   * @param sidenav
+   * @param mode
    */
   private _getSidenavEffectiveWidth(sidenav: MdSidenav, mode: string): number {
     return (this._isSidenavOpen(sidenav) && sidenav.mode == mode) ? sidenav._width : 0;
diff --git a/src/components/toolbar/toolbar.spec.ts b/src/components/toolbar/toolbar.spec.ts
index d385334d9bee..0970fe713741 100644
--- a/src/components/toolbar/toolbar.spec.ts
+++ b/src/components/toolbar/toolbar.spec.ts
@@ -1,13 +1,13 @@
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {
   it,
   describe,
   expect,
   beforeEach,
   inject,
-  TestComponentBuilder
-} from 'angular2/testing';
-import {By} from 'angular2/platform/browser';
+} from '@angular/core/testing';
+import {TestComponentBuilder} from '@angular/compiler/testing';
+import {By} from '@angular/platform-browser';
 import {MdToolbar} from './toolbar';
 
 export function main() {
diff --git a/src/components/toolbar/toolbar.ts b/src/components/toolbar/toolbar.ts
index fa36e3f357b3..2638a0066be8 100644
--- a/src/components/toolbar/toolbar.ts
+++ b/src/components/toolbar/toolbar.ts
@@ -2,9 +2,9 @@ import {
   Component,
   ChangeDetectionStrategy,
   Input
-} from 'angular2/core';
-import {Renderer} from 'angular2/core';
-import {ElementRef} from 'angular2/core';
+} from '@angular/core';
+import {Renderer} from '@angular/core';
+import {ElementRef} from '@angular/core';
 
 @Component({
   selector: 'md-toolbar',
diff --git a/src/core/async/promise-completer.ts b/src/core/async/promise-completer.ts
new file mode 100644
index 000000000000..c205601e8433
--- /dev/null
+++ b/src/core/async/promise-completer.ts
@@ -0,0 +1,13 @@
+
+export class PromiseCompleter<R> {
+  promise: Promise<R>;
+  resolve: (value?: R | PromiseLike<R>) => void;
+  reject: (error?: any, stackTrace?: string) => void;
+
+  constructor() {
+    this.promise = new Promise((res, rej) => {
+      this.resolve = res;
+      this.reject = rej;
+    });
+  }
+}
diff --git a/src/core/gestures/MdGestureConfig.ts b/src/core/gestures/MdGestureConfig.ts
index 21a7f295fb4f..a6c5d583e48d 100644
--- a/src/core/gestures/MdGestureConfig.ts
+++ b/src/core/gestures/MdGestureConfig.ts
@@ -1,5 +1,5 @@
-import {Injectable} from 'angular2/core';
-import {HammerGestureConfig} from 'angular2/src/platform/browser_common';
+import {Injectable} from '@angular/core';
+import {HammerGestureConfig} from '@angular/platform-browser';
 
 /* Adjusts configuration of our gesture library, Hammer. */
 @Injectable()
diff --git a/src/core/live-announcer/live-announcer.spec.ts b/src/core/live-announcer/live-announcer.spec.ts
index 46d8136617cb..20fd3ba29a39 100644
--- a/src/core/live-announcer/live-announcer.spec.ts
+++ b/src/core/live-announcer/live-announcer.spec.ts
@@ -4,16 +4,15 @@ import {
   expect,
   beforeEach,
   inject,
-  TestComponentBuilder,
-  ComponentFixture,
   fakeAsync,
   flushMicrotasks,
   tick,
   beforeEachProviders,
   getTestInjector
-} from 'angular2/testing';
-import {Component, provide} from 'angular2/core';
-import {By} from 'angular2/platform/browser';
+} from '@angular/core/testing';
+import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing';
+import {Component, provide} from '@angular/core';
+import {By} from '@angular/platform-browser';
 import {MdLiveAnnouncer, LIVE_ANNOUNCER_ELEMENT_TOKEN} from './live-announcer';
 
 export function main() {
@@ -38,7 +37,7 @@ export function main() {
     });
 
     it('should correctly update the announce text', fakeAsyncTest(() => {
-      let appFixture: ComponentFixture = null;
+      let appFixture: ComponentFixture<TestApp> = null;
 
       builder.createAsync(TestApp).then(fixture => {
         appFixture = fixture;
@@ -58,7 +57,7 @@ export function main() {
     }));
 
     it('should correctly update the politeness attribute', fakeAsyncTest(() => {
-      let appFixture: ComponentFixture = null;
+      let appFixture: ComponentFixture<TestApp> = null;
 
       builder.createAsync(TestApp).then(fixture => {
         appFixture = fixture;
@@ -76,7 +75,7 @@ export function main() {
     }));
 
     it('should apply the aria-live value polite by default', fakeAsyncTest(() => {
-      let appFixture: ComponentFixture = null;
+      let appFixture: ComponentFixture<TestApp> = null;
 
       builder.createAsync(TestApp).then(fixture => {
         appFixture = fixture;
diff --git a/src/core/live-announcer/live-announcer.ts b/src/core/live-announcer/live-announcer.ts
index 51c02166f9a6..8af32e027add 100644
--- a/src/core/live-announcer/live-announcer.ts
+++ b/src/core/live-announcer/live-announcer.ts
@@ -3,7 +3,7 @@ import {
   OpaqueToken,
   Optional,
   Inject
-} from 'angular2/core';
+} from '@angular/core';
 
 export const LIVE_ANNOUNCER_ELEMENT_TOKEN  = new OpaqueToken('mdLiveAnnouncerElement');
 
diff --git a/src/core/overlay/overlay.spec.ts b/src/core/overlay/overlay.spec.ts
index 594cd88cecd9..48450b21d223 100644
--- a/src/core/overlay/overlay.spec.ts
+++ b/src/core/overlay/overlay.spec.ts
@@ -4,16 +4,16 @@ import {
   expect,
   beforeEach,
   inject,
-  TestComponentBuilder,
   fakeAsync,
   flushMicrotasks,
   beforeEachProviders,
-} from 'angular2/testing';
+} from '@angular/core/testing';
+import {TestComponentBuilder} from '@angular/compiler/testing';
 import {
     Component,
     ViewChild,
     provide, ViewContainerRef,
-} from 'angular2/core';
+} from '@angular/core';
 import {TemplatePortalDirective} from '../portal/portal-directives';
 import {TemplatePortal, ComponentPortal} from '../portal/portal';
 import {Overlay, OVERLAY_CONTAINER_TOKEN} from './overlay';
diff --git a/src/core/overlay/overlay.ts b/src/core/overlay/overlay.ts
index 850b842f2bbe..8bcec53073fa 100644
--- a/src/core/overlay/overlay.ts
+++ b/src/core/overlay/overlay.ts
@@ -4,7 +4,7 @@ import {
   Inject,
   Injectable,
   ElementRef
-} from 'angular2/core';
+} from '@angular/core';
 import {OverlayState} from './overlay-state';
 import {DomPortalHost} from '../portal/dom-portal-host';
 import {OverlayRef} from './overlay-ref';
diff --git a/src/core/overlay/position/global-position-strategy.spec.ts b/src/core/overlay/position/global-position-strategy.spec.ts
index 1d3123dbeddc..c1c541030efc 100644
--- a/src/core/overlay/position/global-position-strategy.spec.ts
+++ b/src/core/overlay/position/global-position-strategy.spec.ts
@@ -6,7 +6,7 @@ import {
   inject,
   fakeAsync,
   flushMicrotasks,
-} from 'angular2/testing';
+} from '@angular/core/testing';
 import {GlobalPositionStrategy} from './global-position-strategy';
 
 
diff --git a/src/core/overlay/position/relative-position-strategy.ts b/src/core/overlay/position/relative-position-strategy.ts
index 337027a18cd8..4ae60d7b4a00 100644
--- a/src/core/overlay/position/relative-position-strategy.ts
+++ b/src/core/overlay/position/relative-position-strategy.ts
@@ -1,5 +1,5 @@
 import {PositionStrategy} from './position-strategy';
-import {ElementRef} from 'angular2/core';
+import {ElementRef} from '@angular/core';
 
 export class RelativePositionStrategy implements PositionStrategy {
   constructor(private _relativeTo: ElementRef) { }
diff --git a/src/core/portal/dom-portal-host.ts b/src/core/portal/dom-portal-host.ts
index bf0dff6981ad..737388b86778 100644
--- a/src/core/portal/dom-portal-host.ts
+++ b/src/core/portal/dom-portal-host.ts
@@ -1,6 +1,6 @@
-import {DynamicComponentLoader, ComponentRef, EmbeddedViewRef} from 'angular2/core';
+import {DynamicComponentLoader, ComponentRef, EmbeddedViewRef} from '@angular/core';
 import {BasePortalHost, ComponentPortal, TemplatePortal} from './portal';
-import {MdComponentPortalAttachedToDomWithoutOriginException} from './portal-exceptions';
+import {MdComponentPortalAttachedToDomWithoutOriginError} from './portal-errors';
 
 
 /**
@@ -17,14 +17,14 @@ export class DomPortalHost extends BasePortalHost {
   }
 
   /** Attach the given ComponentPortal to DOM element using the DynamicComponentLoader. */
-  attachComponentPortal(portal: ComponentPortal): Promise<ComponentRef> {
+  attachComponentPortal(portal: ComponentPortal): Promise<ComponentRef<any>> {
     if (portal.viewContainerRef == null) {
-      throw new MdComponentPortalAttachedToDomWithoutOriginException();
+      throw new MdComponentPortalAttachedToDomWithoutOriginError();
     }
 
     return this._componentLoader.loadNextToLocation(
         portal.component, portal.viewContainerRef).then(ref => {
-      let hostView = <EmbeddedViewRef> ref.hostView;
+      let hostView = <EmbeddedViewRef<any>> ref.hostView;
       this._hostDomElement.appendChild(hostView.rootNodes[0]);
       this.setDisposeFn(() => ref.destroy());
       return ref;
@@ -34,9 +34,6 @@ export class DomPortalHost extends BasePortalHost {
   attachTemplatePortal(portal: TemplatePortal): Promise<Map<string, any>> {
     let viewContainer = portal.viewContainerRef;
     let viewRef = viewContainer.createEmbeddedView(portal.templateRef);
-    // TODO(jelbourn): locals don't currently work with DomPortalHost; investigate whether there
-    // is a bug in Angular.
-    portal.locals.forEach((v, k) => viewRef.setLocal(k, v));
 
     viewRef.rootNodes.forEach(rootNode => this._hostDomElement.appendChild(rootNode));
 
diff --git a/src/core/portal/portal-directives.ts b/src/core/portal/portal-directives.ts
index a3ad916e2271..68780abb32d6 100644
--- a/src/core/portal/portal-directives.ts
+++ b/src/core/portal/portal-directives.ts
@@ -4,7 +4,7 @@ import {
     TemplateRef,
     DynamicComponentLoader,
     ViewContainerRef
-} from 'angular2/core';
+} from '@angular/core';
 import {Portal, TemplatePortal, ComponentPortal, BasePortalHost} from './portal';
 
 
@@ -23,7 +23,7 @@ import {Portal, TemplatePortal, ComponentPortal, BasePortalHost} from './portal'
   exportAs: 'portal',
 })
 export class TemplatePortalDirective extends TemplatePortal {
-  constructor(templateRef: TemplateRef, viewContainerRef: ViewContainerRef) {
+  constructor(templateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef) {
     super(templateRef, viewContainerRef);
   }
 }
@@ -59,7 +59,7 @@ export class PortalHostDirective extends BasePortalHost {
   }
 
   /** Attach the given ComponentPortal to this PortlHost using the DynamicComponentLoader. */
-  attachComponentPortal(portal: ComponentPortal): Promise<ComponentRef> {
+  attachComponentPortal(portal: ComponentPortal): Promise<ComponentRef<any>> {
     portal.setAttachedHost(this);
 
     // If the portal specifies an origin, use that as the logical location of the component
@@ -80,8 +80,7 @@ export class PortalHostDirective extends BasePortalHost {
   attachTemplatePortal(portal: TemplatePortal): Promise<Map<string, any>> {
     portal.setAttachedHost(this);
 
-    let viewRef = this._viewContainerRef.createEmbeddedView(portal.templateRef);
-    portal.locals.forEach((v, k) => viewRef.setLocal(k, v));
+    this._viewContainerRef.createEmbeddedView(portal.templateRef);
     this.setDisposeFn(() => this._viewContainerRef.clear());
 
     // TODO(jelbourn): return locals from view
diff --git a/src/core/portal/portal-exceptions.ts b/src/core/portal/portal-errors.ts
similarity index 71%
rename from src/core/portal/portal-exceptions.ts
rename to src/core/portal/portal-errors.ts
index d30aa59e03eb..bef0ef3d7986 100644
--- a/src/core/portal/portal-exceptions.ts
+++ b/src/core/portal/portal-errors.ts
@@ -1,8 +1,5 @@
-import {BaseException} from 'angular2/src/facade/exceptions';
-
-
 /** Exception thrown when a ComponentPortal is attached to a DomPortalHost without an origin. */
-export class MdComponentPortalAttachedToDomWithoutOriginException extends BaseException {
+export class MdComponentPortalAttachedToDomWithoutOriginError extends Error {
   constructor() {
       super(
           'A ComponentPortal must have an origin set when attached to a DomPortalHost ' +
@@ -11,28 +8,28 @@ export class MdComponentPortalAttachedToDomWithoutOriginException extends BaseEx
 }
 
 /** Exception thrown when attmepting to attach a null portal to a host. */
-export class MdNullPortalException extends BaseException {
+export class MdNullPortalError extends Error {
   constructor() {
       super('Must provide a portal to attach');
   }
 }
 
 /** Exception thrown when attmepting to attach a portal to a host that is already attached. */
-export class MdPortalAlreadyAttachedException extends BaseException {
+export class MdPortalAlreadyAttachedError extends Error {
   constructor() {
       super('Host already has a portal attached');
   }
 }
 
 /** Exception thrown when attmepting to attach a portal to an already-disposed host. */
-export class MdPortalHostAlreadyDisposedException extends BaseException {
+export class MdPortalHostAlreadyDisposedError extends Error {
   constructor() {
       super('This PortalHost has already been disposed');
   }
 }
 
 /** Exception thrown when attmepting to attach an unknown portal type. */
-export class MdUnknownPortalTypeException extends BaseException {
+export class MdUnknownPortalTypeErron extends Error {
   constructor() {
       super(
         'Attempting to attach an unknown Portal type. ' +
@@ -41,14 +38,14 @@ export class MdUnknownPortalTypeException extends BaseException {
 }
 
 /** Exception thrown when attmepting to attach a portal to a null host. */
-export class MdNullPortalHostException extends BaseException {
+export class MdNullPortalHostError extends Error {
   constructor() {
       super('Attmepting to attach a portal to a null PortalHost');
   }
 }
 
 /** Exception thrown when attmepting to detach a portal that is not attached. */
-export class MdNoPortalAttachedException extends BaseException {
+export class MdNoPortalAttachedErron extends Error {
   constructor() {
       super('Attmepting to detach a portal that is not attached to a host');
   }
diff --git a/src/core/portal/portal.spec.ts b/src/core/portal/portal.spec.ts
index e7e80d7e1eae..29b22ea8a62d 100644
--- a/src/core/portal/portal.spec.ts
+++ b/src/core/portal/portal.spec.ts
@@ -1,24 +1,25 @@
 import {
-  it,
-  describe,
-  expect,
-  beforeEach,
-  inject,
-  ComponentFixture,
-  TestComponentBuilder,
-} from 'angular2/testing';
-import {Component, ViewChildren, QueryList, ViewContainerRef} from 'angular2/core';
-import {TemplatePortalDirective} from './portal-directives';
-import {Portal} from './portal';
-import {ComponentPortal} from './portal';
-import {PortalHostDirective} from './portal-directives';
-import {fakeAsync} from 'angular2/testing';
-import {flushMicrotasks} from 'angular2/testing';
-import {DynamicComponentLoader} from 'angular2/core';
+    it,
+    describe,
+    expect,
+    beforeEach,
+    inject,
+    fakeAsync,
+    flushMicrotasks
+} from '@angular/core/testing';
+import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing';
+import {
+    Component,
+    ViewChildren,
+    QueryList,
+    ViewContainerRef,
+    DynamicComponentLoader
+} from '@angular/core';
+import {TemplatePortalDirective, PortalHostDirective} from './portal-directives';
+import {Portal, ComponentPortal} from './portal';
 import {DomPortalHost} from './dom-portal-host';
 
 
-
 export function main() {
   describe('Portals', () => {
     let builder: TestComponentBuilder;
@@ -28,8 +29,8 @@ export function main() {
     }));
 
     describe('PortalHostDirective', () => {
-      it('should load a component into the portal', fakeAsyncTest(() => {
-        let appFixture: ComponentFixture;
+      it('should load a component into the portal', fakeAsync(() => {
+        let appFixture: ComponentFixture<PortalTestApp>;
 
         builder.createAsync(PortalTestApp).then(fixture => {
           appFixture = fixture;
@@ -51,8 +52,8 @@ export function main() {
         expect(hostContainer.textContent).toContain('Pizza');
       }));
 
-      it('should load a <template> portal', fakeAsyncTest(() => {
-        let appFixture: ComponentFixture;
+      it('should load a <template> portal', fakeAsync(() => {
+        let appFixture: ComponentFixture<PortalTestApp>;
 
         builder.createAsync(PortalTestApp).then(fixture => {
           appFixture = fixture;
@@ -78,8 +79,8 @@ export function main() {
         expect(hostContainer.textContent).toContain('Cake');
       }));
 
-      it('should load a <template> portal with the `*` sugar', fakeAsyncTest(() => {
-        let appFixture: ComponentFixture;
+      it('should load a <template> portal with the `*` sugar', fakeAsync(() => {
+        let appFixture: ComponentFixture<PortalTestApp>;
 
         builder.createAsync(PortalTestApp).then(fixture => {
           appFixture = fixture;
@@ -105,8 +106,8 @@ export function main() {
         expect(hostContainer.textContent).toContain('Pie');
       }));
 
-      it('should load a <template> portal with a binding', fakeAsyncTest(() => {
-        let appFixture: ComponentFixture;
+      it('should load a <template> portal with a binding', fakeAsync(() => {
+        let appFixture: ComponentFixture<PortalTestApp>;
 
         builder.createAsync(PortalTestApp).then(fixture => {
           appFixture = fixture;
@@ -143,45 +144,8 @@ export function main() {
         expect(hostContainer.textContent).toContainError('Mango');
       }));
 
-      it('should load a <template> portal with extra locals', fakeAsyncTest(() => {
-        let appFixture: ComponentFixture;
-
-        builder.createAsync(PortalTestApp).then(fixture => {
-          appFixture = fixture;
-        });
-
-        // Flush the async creation of the PortalTestApp.
-        flushMicrotasks();
-
-        let testAppComponent = appFixture.debugElement.componentInstance;
-
-        // Detect changes initially so that the component's ViewChildren are resolved.
-        appFixture.detectChanges();
-
-        let locals = new Map<string, string>();
-        locals.set('appetizer', 'Samosa');
-
-        let templatePortal = testAppComponent.portalWithLocals;
-        templatePortal.locals = locals;
-
-        // Set the selectedHost to be a TemplatePortal.
-        testAppComponent.selectedPortal = templatePortal;
-        appFixture.detectChanges();
-
-        // Flush the attachment of the Portal.
-        flushMicrotasks();
-
-        // Now that the portal is attached, change detection has to happen again in order
-        // for the bindings to update.
-        appFixture.detectChanges();
-
-        // Expect that the content of the attached portal is present.
-        let hostContainer = appFixture.nativeElement.querySelector('.portal-container');
-        expect(hostContainer.textContent).toContain('Samosa');
-      }));
-
-      it('should change the attached portal', fakeAsyncTest(() => {
-        let appFixture: ComponentFixture;
+      it('should change the attached portal', fakeAsync(() => {
+        let appFixture: ComponentFixture<PortalTestApp>;
 
         builder.createAsync(PortalTestApp).then(fixture => {
           appFixture = fixture;
@@ -222,21 +186,22 @@ export function main() {
       let someDomElement: HTMLElement;
       let host: DomPortalHost;
 
-      beforeEach(inject(
-          [DynamicComponentLoader],
-          fakeAsync((dcl: DynamicComponentLoader) => {
+      beforeEach(inject([DynamicComponentLoader], (dcl: DynamicComponentLoader) => {
         componentLoader = dcl;
+      }));
+
+      beforeEach(() => {
         someDomElement = document.createElement('div');
         host = new DomPortalHost(someDomElement, componentLoader);
+      });
 
+      it('should attach and detach a component portal', fakeAsync(() => {
         builder.createAsync(ArbitraryViewContainerRefComponent).then(fixture => {
           someViewContainerRef = fixture.componentInstance.viewContainerRef;
         });
 
         flushMicrotasks();
-      })));
 
-      it('should attach and detach a component portal', fakeAsyncTest(() => {
         let portal = new ComponentPortal(PizzaMsg, someViewContainerRef);
 
         let componentInstance: PizzaMsg;
@@ -255,8 +220,8 @@ export function main() {
         expect(someDomElement.innerHTML).toBe('');
       }));
 
-      it('should attach and detach a template portal', fakeAsyncTest(() => {
-        let appFixture: ComponentFixture;
+      it('should attach and detach a template portal', fakeAsync(() => {
+        let appFixture: ComponentFixture<PortalTestApp>;
 
         builder.createAsync(PortalTestApp).then(fixture => {
           appFixture = fixture;
@@ -272,9 +237,8 @@ export function main() {
         expect(someDomElement.textContent).toContain('Cake');
       }));
 
-      it('should attach and detach a template portal with a binding', fakeAsyncTest(() => {
-        let appFixture: ComponentFixture;
-
+      it('should attach and detach a template portal with a binding', fakeAsync(() => {
+        let appFixture: ComponentFixture<PortalTestApp>;
         builder.createAsync(PortalTestApp).then(fixture => {
           appFixture = fixture;
         });
@@ -312,8 +276,14 @@ export function main() {
         expect(someDomElement.innerHTML).toBe('');
       }));
 
-      it('should change the attached portal', fakeAsyncTest(() => {
-        let appFixture: ComponentFixture;
+      it('should change the attached portal', fakeAsync(() => {
+        builder.createAsync(ArbitraryViewContainerRefComponent).then(fixture => {
+          someViewContainerRef = fixture.componentInstance.viewContainerRef;
+        });
+
+        flushMicrotasks();
+
+        let appFixture: ComponentFixture<PortalTestApp>;
 
         builder.createAsync(PortalTestApp).then(fixture => {
           appFixture = fixture;
@@ -371,8 +341,6 @@ class ArbitraryViewContainerRefComponent {
   <div *portal>Pie</div>
 
   <template portal> {{fruit}} </template>
-
-  <template portal let-yum="appetizer">{{yum}}</template>
   `,
   directives: [PortalHostDirective, TemplatePortalDirective],
 })
@@ -392,12 +360,4 @@ class PortalTestApp {
   get portalWithBinding() {
     return this.portals.toArray()[2];
   }
-
-  get portalWithLocals() {
-    return this.portals.last;
-  }
-}
-
-function fakeAsyncTest(fn: () => void) {
-  return inject([], fakeAsync(fn));
 }
diff --git a/src/core/portal/portal.ts b/src/core/portal/portal.ts
index 971e8b394cde..b34c1f82530a 100644
--- a/src/core/portal/portal.ts
+++ b/src/core/portal/portal.ts
@@ -1,15 +1,12 @@
-import {TemplateRef, Type, ViewContainerRef} from 'angular2/core';
-import {ElementRef} from 'angular2/core';
-import {ComponentRef} from 'angular2/core';
-
+import {TemplateRef, Type, ViewContainerRef, ElementRef, ComponentRef} from '@angular/core';
 import {
-  MdNullPortalHostException,
-  MdPortalAlreadyAttachedException,
-  MdNoPortalAttachedException,
-  MdNullPortalException,
-  MdPortalHostAlreadyDisposedException,
-  MdUnknownPortalTypeException
-} from './portal-exceptions';
+    MdNullPortalHostError,
+    MdPortalAlreadyAttachedError,
+    MdNoPortalAttachedErron,
+    MdNullPortalError,
+    MdPortalHostAlreadyDisposedError,
+    MdUnknownPortalTypeErron
+} from './portal-errors';
 
 
 /**
@@ -22,11 +19,11 @@ export abstract class Portal<T> {
   /** Attach this portal to a host. */
   attach(host: PortalHost): Promise<T> {
     if (host == null) {
-      throw new MdNullPortalHostException();
+      throw new MdNullPortalHostError();
     }
 
     if (host.hasAttached()) {
-      throw new MdPortalAlreadyAttachedException();
+      throw new MdPortalAlreadyAttachedError();
     }
 
     this._attachedHost = host;
@@ -37,7 +34,7 @@ export abstract class Portal<T> {
   detach(): Promise<void> {
     let host = this._attachedHost;
     if (host == null) {
-      throw new MdNoPortalAttachedException();
+      throw new MdNoPortalAttachedErron();
     }
 
     this._attachedHost = null;
@@ -62,7 +59,7 @@ export abstract class Portal<T> {
 /**
  * A `ComponentPortal` is a portal that instantiates some Component upon attachment.
  */
-export class ComponentPortal extends Portal<ComponentRef> {
+export class ComponentPortal extends Portal<ComponentRef<any>> {
   /** The type of the component that will be instantiated for attachment. */
   public component: Type;
 
@@ -86,7 +83,7 @@ export class ComponentPortal extends Portal<ComponentRef> {
  */
 export class TemplatePortal extends Portal<Map<string, any>> {
   /** The embedded template that will be used to instantiate an embedded View in the host. */
-  templateRef: TemplateRef;
+  templateRef: TemplateRef<any>;
 
   /** Reference to the ViewContainer into which the template will be stamped out. */
   viewContainerRef: ViewContainerRef;
@@ -99,7 +96,7 @@ export class TemplatePortal extends Portal<Map<string, any>> {
    */
   locals: Map<string, any> = new Map<string, any>();
 
-  constructor(template: TemplateRef, viewContainerRef: ViewContainerRef) {
+  constructor(template: TemplateRef<any>, viewContainerRef: ViewContainerRef) {
     super();
     this.templateRef = template;
     this.viewContainerRef = viewContainerRef;
@@ -156,15 +153,15 @@ export abstract class BasePortalHost implements PortalHost {
 
   attach(portal: Portal<any>): Promise<any> {
     if (portal == null) {
-      throw new MdNullPortalException();
+      throw new MdNullPortalError();
     }
 
     if (this.hasAttached()) {
-      throw new MdPortalAlreadyAttachedException();
+      throw new MdPortalAlreadyAttachedError();
     }
 
     if (this._isDisposed) {
-      throw new MdPortalHostAlreadyDisposedException();
+      throw new MdPortalHostAlreadyDisposedError();
     }
 
     if (portal instanceof ComponentPortal) {
@@ -175,10 +172,10 @@ export abstract class BasePortalHost implements PortalHost {
       return this.attachTemplatePortal(portal);
     }
 
-    throw new MdUnknownPortalTypeException();
+    throw new MdUnknownPortalTypeErron();
   }
 
-  abstract attachComponentPortal(portal: ComponentPortal): Promise<ComponentRef>;
+  abstract attachComponentPortal(portal: ComponentPortal): Promise<ComponentRef<any>>;
 
   abstract attachTemplatePortal(portal: TemplatePortal): Promise<Map<string, any>>;
 
diff --git a/src/core/rtl/dir.ts b/src/core/rtl/dir.ts
index d21757a0c02c..6c7f80ee0293 100644
--- a/src/core/rtl/dir.ts
+++ b/src/core/rtl/dir.ts
@@ -1,4 +1,4 @@
-import {Directive, HostBinding, Output, Input, EventEmitter} from 'angular2/core';
+import {Directive, HostBinding, Output, Input, EventEmitter} from '@angular/core';
 
 export type LayoutDirection = 'ltr' | 'rtl';
 
diff --git a/src/demo-app/button/button-demo.ts b/src/demo-app/button/button-demo.ts
index 07aedc1ac3f7..9f591b02144b 100644
--- a/src/demo-app/button/button-demo.ts
+++ b/src/demo-app/button/button-demo.ts
@@ -1,4 +1,4 @@
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {MdButton, MdAnchor} from '../../components/button/button';
 import {MdIcon} from '../../components/icon/icon';
 
diff --git a/src/demo-app/card/card-demo.ts b/src/demo-app/card/card-demo.ts
index 9ff44a12bd2f..8eaf7801bfab 100644
--- a/src/demo-app/card/card-demo.ts
+++ b/src/demo-app/card/card-demo.ts
@@ -1,4 +1,4 @@
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {MdButton} from '../../components/button/button';
 import {MD_CARD_DIRECTIVES} from '../../components/card/card';
 
diff --git a/src/demo-app/checkbox/checkbox-demo.html b/src/demo-app/checkbox/checkbox-demo.html
index b811f6969563..f7629fc9345c 100644
--- a/src/demo-app/checkbox/checkbox-demo.html
+++ b/src/demo-app/checkbox/checkbox-demo.html
@@ -1,11 +1,15 @@
 <h1>md-checkbox: Basic Example</h1>
+<form>
 <md-checkbox [(ngModel)]="isChecked"
+              ngControl="cb"
              (change)="isIndeterminate = false"
              [indeterminate]="isIndeterminate"
              [disabled]="isDisabled"
              [align]="alignment">
   Do you want to <em>foobar</em> the <em>bazquux</em>?
+
 </md-checkbox> - <strong>{{printResult()}}</strong>
+</form>
 <div class="demo-checkboxes">
 <input id="indeterminate-toggle"
        type="checkbox"
diff --git a/src/demo-app/checkbox/checkbox-demo.ts b/src/demo-app/checkbox/checkbox-demo.ts
index a1cf29155654..8f4a9b154405 100644
--- a/src/demo-app/checkbox/checkbox-demo.ts
+++ b/src/demo-app/checkbox/checkbox-demo.ts
@@ -1,4 +1,5 @@
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
+import {FORM_DIRECTIVES} from '@angular/common';
 import {MdCheckbox} from '../../components/checkbox/checkbox';
 
 interface Task {
@@ -61,7 +62,7 @@ class MdCheckboxDemoNestedChecklist {
   selector: 'md-checkbox-demo',
   templateUrl: 'demo-app/checkbox/checkbox-demo.html',
   styleUrls: ['demo-app/checkbox/checkbox-demo.css'],
-  directives: [MdCheckbox, MdCheckboxDemoNestedChecklist]
+  directives: [MdCheckbox, MdCheckboxDemoNestedChecklist, FORM_DIRECTIVES]
 })
 export class CheckboxDemo {
   isIndeterminate: boolean = false;
diff --git a/src/demo-app/demo-app.html b/src/demo-app/demo-app.html
index a3844694d52d..a4b60622bc16 100644
--- a/src/demo-app/demo-app.html
+++ b/src/demo-app/demo-app.html
@@ -1,22 +1,22 @@
 <md-sidenav-layout class="demo-root" fullscreen>
   <md-sidenav #start>
     <md-nav-list>
-      <a md-list-item [routerLink]="['ButtonDemo']">Button</a>
-      <a md-list-item [routerLink]="['CardDemo']">Card</a>
-      <a md-list-item [routerLink]="['CheckboxDemo']">Checkbox</a>
-      <a md-list-item [routerLink]="['GesturesDemo']">Gestures</a>
-      <a md-list-item [routerLink]="['GridListDemo']">Grid List</a>
-      <a md-list-item [routerLink]="['IconDemo']">Icon</a>
-      <a md-list-item [routerLink]="['InputDemo']">Input</a>
-      <a md-list-item [routerLink]="['ListDemo']">List</a>
-      <a md-list-item [routerLink]="['LiveAnnouncerDemo']">Live Announcer</a>
-      <a md-list-item [routerLink]="['OverlayDemo']">Overlay</a>
-      <a md-list-item [routerLink]="['PortalDemo']">Portal</a>
-      <a md-list-item [routerLink]="['ProgressCircleDemo']">Progress Circle</a>
-      <a md-list-item [routerLink]="['ProgressBarDemo']">Progress Bar</a>
-      <a md-list-item [routerLink]="['RadioDemo']">Radio</a>
-      <a md-list-item [routerLink]="['SidenavDemo']">Sidenav</a>
-      <a md-list-item [routerLink]="['ToolbarDemo']">Toolbar</a>
+      <a md-list-item [routerLink]="['button']">Button</a>
+      <a md-list-item [routerLink]="['card']">Card</a>
+      <a md-list-item [routerLink]="['checkbox']">Checkbox</a>
+      <a md-list-item [routerLink]="['gestures']">Gestures</a>
+      <a md-list-item [routerLink]="['grid-list']">Grid List</a>
+      <a md-list-item [routerLink]="['icon']">Icon</a>
+      <a md-list-item [routerLink]="['input']">Input</a>
+      <a md-list-item [routerLink]="['list']">List</a>
+      <a md-list-item [routerLink]="['live-announcer']">Live Announcer</a>
+      <a md-list-item [routerLink]="['overlay']">Overlay</a>
+      <a md-list-item [routerLink]="['portal']">Portal</a>
+      <a md-list-item [routerLink]="['progress-circle']">Progress Circle</a>
+      <a md-list-item [routerLink]="['progress-bar']">Progress Bar</a>
+      <a md-list-item [routerLink]="['radio']">Radio</a>
+      <a md-list-item [routerLink]="['sidenav']">Sidenav</a>
+      <a md-list-item [routerLink]="['toolbar']">Toolbar</a>
     </md-nav-list>
     <button md-button (click)="start.close()">CLOSE</button>
   </md-sidenav>
diff --git a/src/demo-app/demo-app.ts b/src/demo-app/demo-app.ts
index 112acd31fac2..4e63e2206f48 100644
--- a/src/demo-app/demo-app.ts
+++ b/src/demo-app/demo-app.ts
@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
-import {Route, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
+import {Component} from '@angular/core';
+import {Route, Routes, ROUTER_DIRECTIVES} from '@angular/router';
 import {CardDemo} from './card/card-demo';
 import {ButtonDemo} from './button/button-demo';
 import {IconDemo} from './icon/icon-demo';
@@ -48,23 +48,23 @@ export class Home {}
   ],
   pipes: []
 })
-@RouteConfig([
-  new Route({path: '/', name: 'Home', component: Home, useAsDefault: true}),
-  new Route({path: '/button',   name: 'ButtonDemo', component: ButtonDemo}),
-  new Route({path: '/card', name: 'CardDemo', component: CardDemo}),
-  new Route({path: '/radio', name: 'RadioDemo', component: RadioDemo}),
-  new Route({path: '/sidenav', name: 'SidenavDemo', component: SidenavDemo}),
-  new Route({path: '/progress-circle', name: 'ProgressCircleDemo', component: ProgressCircleDemo}),
-  new Route({path: '/progress-bar', name: 'ProgressBarDemo', component: ProgressBarDemo}),
-  new Route({path: '/portal', name: 'PortalDemo', component: PortalDemo}),
-  new Route({path: '/overlay', name: 'OverlayDemo', component: OverlayDemo}),
-  new Route({path: '/checkbox', name: 'CheckboxDemo', component: CheckboxDemo}),
-  new Route({path: '/input', name: 'InputDemo', component: InputDemo}),
-  new Route({path: '/toolbar', name: 'ToolbarDemo', component: ToolbarDemo}),
-  new Route({path: '/icon', name: 'IconDemo', component: IconDemo}),
-  new Route({path: '/list', name: 'ListDemo', component: ListDemo}),
-  new Route({path: '/live-announcer', name: 'LiveAnnouncerDemo', component: LiveAnnouncerDemo}),
-  new Route({path: '/gestures', name: 'GesturesDemo', component: GesturesDemo}),
-  new Route({path: '/grid-list', name: 'GridListDemo', component: GridListDemo}),
+@Routes([
+  new Route({path: '/', component: Home}),
+  new Route({path: '/button', component: ButtonDemo}),
+  new Route({path: '/card', component: CardDemo}),
+  new Route({path: '/radio', component: RadioDemo}),
+  new Route({path: '/sidenav', component: SidenavDemo}),
+  new Route({path: '/progress-circle', component: ProgressCircleDemo}),
+  new Route({path: '/progress-bar', component: ProgressBarDemo}),
+  new Route({path: '/portal', component: PortalDemo}),
+  new Route({path: '/overlay', component: OverlayDemo}),
+  new Route({path: '/checkbox', component: CheckboxDemo}),
+  new Route({path: '/input', component: InputDemo}),
+  new Route({path: '/toolbar', component: ToolbarDemo}),
+  new Route({path: '/icon', component: IconDemo}),
+  new Route({path: '/list', component: ListDemo}),
+  new Route({path: '/live-announcer', component: LiveAnnouncerDemo}),
+  new Route({path: '/gestures', component: GesturesDemo}),
+  new Route({path: '/grid-list', component: GridListDemo}),
 ])
 export class DemoApp { }
diff --git a/src/demo-app/gestures/gestures-demo.ts b/src/demo-app/gestures/gestures-demo.ts
index 87f93d82b656..70c27d455af1 100644
--- a/src/demo-app/gestures/gestures-demo.ts
+++ b/src/demo-app/gestures/gestures-demo.ts
@@ -1,4 +1,4 @@
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'gestures-demo',
diff --git a/src/demo-app/grid-list/grid-list-demo.ts b/src/demo-app/grid-list/grid-list-demo.ts
index 66480507d7ff..17892c52938a 100644
--- a/src/demo-app/grid-list/grid-list-demo.ts
+++ b/src/demo-app/grid-list/grid-list-demo.ts
@@ -1,4 +1,4 @@
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {MdGridList} from '../../components/grid-list/grid-list';
 
 @Component({
diff --git a/src/demo-app/icon/icon-demo.ts b/src/demo-app/icon/icon-demo.ts
index ae29dbedbd2b..c7df43059906 100644
--- a/src/demo-app/icon/icon-demo.ts
+++ b/src/demo-app/icon/icon-demo.ts
@@ -1,4 +1,4 @@
-import {Component, ViewEncapsulation} from 'angular2/core';
+import {Component, ViewEncapsulation} from '@angular/core';
 import {MdIcon} from '../../components/icon/icon';
 import {MdIconRegistry} from '../../components/icon/icon-registry';
 
diff --git a/src/demo-app/input/input-demo.ts b/src/demo-app/input/input-demo.ts
index b0c74263a981..1b46610e9b20 100644
--- a/src/demo-app/input/input-demo.ts
+++ b/src/demo-app/input/input-demo.ts
@@ -1,4 +1,4 @@
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {MD_INPUT_DIRECTIVES} from '../../components/input/input';
 import {MdButton} from '../../components/button/button';
 import {MdCard} from '../../components/card/card';
diff --git a/src/demo-app/list/list-demo.ts b/src/demo-app/list/list-demo.ts
index 3462da4a8b20..f24d2a63728e 100644
--- a/src/demo-app/list/list-demo.ts
+++ b/src/demo-app/list/list-demo.ts
@@ -1,4 +1,4 @@
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {MdButton} from '../../components/button/button';
 import {MD_LIST_DIRECTIVES} from '../../components/list/list';
 import {MdIcon} from '../../components/icon/icon';
diff --git a/src/demo-app/live-announcer/live-announcer-demo.ts b/src/demo-app/live-announcer/live-announcer-demo.ts
index e5b381749a9e..377438c6201a 100644
--- a/src/demo-app/live-announcer/live-announcer-demo.ts
+++ b/src/demo-app/live-announcer/live-announcer-demo.ts
@@ -1,4 +1,4 @@
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {MdLiveAnnouncer} from '../../core/live-announcer/live-announcer';
 
 @Component({
diff --git a/src/demo-app/overlay/overlay-demo.ts b/src/demo-app/overlay/overlay-demo.ts
index 601251b3a8ea..4e0c369e2b60 100644
--- a/src/demo-app/overlay/overlay-demo.ts
+++ b/src/demo-app/overlay/overlay-demo.ts
@@ -1,7 +1,7 @@
 import {
     Component, ViewChildren, QueryList, ViewEncapsulation,
     ViewContainerRef
-} from 'angular2/core';
+} from '@angular/core';
 import {
   Overlay,
   OverlayState} from '../../core/overlay/overlay';
diff --git a/src/demo-app/portal/portal-demo.ts b/src/demo-app/portal/portal-demo.ts
index 2ea7d81adf00..65a5e0980769 100644
--- a/src/demo-app/portal/portal-demo.ts
+++ b/src/demo-app/portal/portal-demo.ts
@@ -1,9 +1,9 @@
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {PortalHostDirective} from '../../core/portal/portal-directives';
 import {TemplatePortalDirective} from '../../core/portal/portal-directives';
 import {Portal} from '../../core/portal/portal';
-import {ViewChildren} from 'angular2/core';
-import {QueryList} from 'angular2/core';
+import {ViewChildren} from '@angular/core';
+import {QueryList} from '@angular/core';
 import {ComponentPortal} from '../../core/portal/portal';
 
 @Component({
diff --git a/src/demo-app/progress-bar/progress-bar-demo.ts b/src/demo-app/progress-bar/progress-bar-demo.ts
index 72162a5ff854..04a54c839532 100644
--- a/src/demo-app/progress-bar/progress-bar-demo.ts
+++ b/src/demo-app/progress-bar/progress-bar-demo.ts
@@ -1,4 +1,4 @@
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {MdButton} from '../../components/button/button';
 import {MdProgressBar} from '../../components/progress-bar/progress-bar';
 
diff --git a/src/demo-app/progress-circle/progress-circle-demo.ts b/src/demo-app/progress-circle/progress-circle-demo.ts
index c9cb567ca036..4b50fe6e2928 100644
--- a/src/demo-app/progress-circle/progress-circle-demo.ts
+++ b/src/demo-app/progress-circle/progress-circle-demo.ts
@@ -1,4 +1,4 @@
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {MdButton} from '../../components/button/button';
 import {MdProgressCircle, MdSpinner} from '../../components/progress-circle/progress-circle';
 
diff --git a/src/demo-app/radio/radio-demo.ts b/src/demo-app/radio/radio-demo.ts
index 3eaa7ee911ce..f5c13f5fc731 100644
--- a/src/demo-app/radio/radio-demo.ts
+++ b/src/demo-app/radio/radio-demo.ts
@@ -1,4 +1,4 @@
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {MdRadioButton, MdRadioGroup} from '../../components/radio/radio';
 import {MdRadioDispatcher} from '../../components/radio/radio_dispatcher';
 
diff --git a/src/demo-app/sidenav/sidenav-demo.ts b/src/demo-app/sidenav/sidenav-demo.ts
index 5f5d606cfcae..135ba46b94a1 100644
--- a/src/demo-app/sidenav/sidenav-demo.ts
+++ b/src/demo-app/sidenav/sidenav-demo.ts
@@ -1,4 +1,4 @@
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {MdButton} from '../../components/button/button';
 import {MD_SIDENAV_DIRECTIVES} from '../../components/sidenav/sidenav';
 
diff --git a/src/demo-app/toolbar/toolbar-demo.ts b/src/demo-app/toolbar/toolbar-demo.ts
index a2bfedcea988..0aefbb60125c 100644
--- a/src/demo-app/toolbar/toolbar-demo.ts
+++ b/src/demo-app/toolbar/toolbar-demo.ts
@@ -1,4 +1,4 @@
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {MdIcon} from '../../components/icon/icon';
 import {MdToolbar} from '../../components/toolbar/toolbar';
 
diff --git a/src/index.html b/src/index.html
index dc88807a9014..f5f78283e30a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -5,44 +5,30 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Material2</title>
   <base href="/">
-  <script src="vendor/es6-shim/es6-shim.js"></script>
-  <script src="vendor/systemjs/dist/system-polyfills.js"></script>
-  <script src="vendor/angular2/bundles/angular2-polyfills.js"></script>
   {{content-for 'head'}}
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link href="main.css" rel="stylesheet">
+
   <!-- FontAwesome for md-icon demo. -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
 </head>
 <body>
   <demo-app>Loading...</demo-app>
 
+  <script src="vendor/es6-shim/es6-shim.js"></script>
+  <script src="vendor/reflect-metadata/Reflect.js"></script>
+  <script src="vendor/systemjs/dist/system-polyfills.js"></script>
+  <script src="vendor/zone.js/dist/zone.js"></script>
   <script src="vendor/systemjs/dist/system.src.js"></script>
-  <script src="vendor/rxjs/bundles/Rx.js"></script>
-  <script src="vendor/angular2/bundles/angular2.dev.js"></script>
-  <script src="vendor/angular2/bundles/http.dev.js"></script>
-  <script src="vendor/angular2/bundles/router.dev.js"></script>
 
+  <!-- HammerJS for gestures -->
   <script src="https://ajax.googleapis.com/ajax/libs/hammerjs/2.0.8/hammer.min.js"></script>
+
   <script>
-    System.config({
-      packages: {
-        'demo-app': {
-          format: 'cjs',
-          defaultExtension: 'js'
-        },
-        'components': {
-          format: 'cjs',
-          defaultExtension: 'js'
-        },
-        'core': {
-          format: 'cjs',
-          defaultExtension: 'js'
-        },
-      }
-    });
-    System.import('main.js').then(null, console.error.bind(console));
+    System.import('system-config.js').then(function () {
+      System.import('main');
+    }).catch(console.error.bind(console));
   </script>
 </body>
 </html>
diff --git a/src/main.ts b/src/main.ts
index ade68ee21211..babe0c1e1c58 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,14 +1,14 @@
-import {bootstrap} from 'angular2/platform/browser';
-import {HAMMER_GESTURE_CONFIG} from 'angular2/src/platform/browser_common';
+import {bootstrap} from '@angular/platform-browser-dynamic';
+import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
 import {DemoApp} from './demo-app/demo-app';
-import {HTTP_PROVIDERS} from 'angular2/http';
-import {ROUTER_PROVIDERS} from 'angular2/router';
+import {HTTP_PROVIDERS} from '@angular/http';
+import {ROUTER_PROVIDERS} from '@angular/router';
 import {MdIconRegistry} from './components/icon/icon-registry';
 import {OVERLAY_CONTAINER_TOKEN} from './core/overlay/overlay';
 import {MdLiveAnnouncer} from './core/live-announcer/live-announcer';
-import {provide} from 'angular2/core';
+import {provide} from '@angular/core';
 import {createOverlayContainer} from './core/overlay/overlay-container';
-import {Renderer} from 'angular2/core';
+import {Renderer} from '@angular/core';
 import {MdGestureConfig} from './core/gestures/MdGestureConfig';
 import 'rxjs/Rx';
 
diff --git a/src/system-config.ts b/src/system-config.ts
new file mode 100644
index 000000000000..5a7d5f604a97
--- /dev/null
+++ b/src/system-config.ts
@@ -0,0 +1,66 @@
+/***********************************************************************************************
+ * User Configuration.
+ **********************************************************************************************/
+/** Map relative paths to URLs. */
+const map: any = {
+};
+
+/** User packages configuration. */
+const packages: any = {
+  'demo-app': {
+    format: 'cjs',
+    defaultExtension: 'js'
+  },
+  'components': {
+    format: 'cjs',
+    defaultExtension: 'js'
+  },
+  'core': {
+    format: 'cjs',
+    defaultExtension: 'js'
+  },
+};
+
+////////////////////////////////////////////////////////////////////////////////////////////////
+/***********************************************************************************************
+ * Everything underneath this line is managed by the CLI.
+ **********************************************************************************************/
+const barrels: string[] = [
+  // Angular specific barrels.
+  '@angular/core',
+  '@angular/common',
+  '@angular/compiler',
+  '@angular/http',
+  '@angular/router',
+  '@angular/platform-browser',
+  '@angular/platform-browser-dynamic',
+
+  // Thirdparty barrels.
+  'rxjs',
+
+  // App specific barrels.
+  'app',
+  'app/shared',
+  /** @cli-barrel */
+];
+
+const _cliSystemConfig = {};
+barrels.forEach((barrelName: string) => {
+  (<any> _cliSystemConfig)[barrelName] = { main: 'index' };
+});
+
+/** Type declaration for ambient System. */
+declare var System: any;
+
+// Apply the CLI SystemJS configuration.
+System.config({
+  map: {
+    '@angular': 'vendor/@angular',
+    'rxjs': 'vendor/rxjs',
+    'main': 'main.js'
+  },
+  packages: _cliSystemConfig
+});
+
+// Apply the user's configuration.
+System.config({ map, packages });
diff --git a/test/karma-test-shim.js b/test/karma-test-shim.js
index 63afe69caf15..e0809e59ed33 100644
--- a/test/karma-test-shim.js
+++ b/test/karma-test-shim.js
@@ -1,91 +1,57 @@
+/*global jasmine, __karma__, window*/
 Error.stackTraceLimit = Infinity;
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;
 
-jasmine.DEFAULT_TIMEOUT_INTERVAL = 4000;
+__karma__.loaded = function () {
+};
 
-__karma__.loaded = function() {};
+var distPath = '/base/dist/';
 
-
-/**
- * Gets map of module alias to location or package.
- * @param dir Directory name under `src/` for create a map for.
- */
-function getPathsMap(dir) {
-  return Object.keys(window.__karma__.files)
-    .filter(not(isSpecFile))
-    .filter(function(x) { return new RegExp('^/base/dist/' + dir + '/.*\\.js$').test(x); })
-    .reduce(function(pathsMapping, appPath) {
-      var pathToReplace = new RegExp('^/base/dist/' + dir + '/');
-      var moduleName = appPath.replace(pathToReplace, './').replace(/\.js$/, '');
-      pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath];
-      return pathsMapping;
-    }, {});
+function isJsFile(path) {
+  return path.slice(-3) == '.js';
 }
 
-System.config({
-  packages: {
-    'base/dist/components': {
-      defaultExtension: false,
-      format: 'cjs',
-      map: getPathsMap('components')
-    },
-    'base/dist/core': {
-      defaultExtension: false,
-      format: 'cjs',
-      map: getPathsMap('core')
-    },
-  }
-});
+function isSpecFile(path) {
+  return path.slice(-8) == '.spec.js';
+}
 
+function isMaterialFile(path) {
+  return isJsFile(path) && path.indexOf('vendor') == -1;
+}
 
-/**
- * Bootstrap the browser testing providers from Angular2. The equivalent code in TypeScript
- * would be:
- *
- * <code>
- *   import {setBaseTestProviders} from 'angular2/testing';
- *   import * as browser from 'angular2/platform/testing/browser';
- *
- *   setBaseTestProviders(browser.TEST_BROWSER_PLATFORM_PROVIDERS,
- *                        browser.TEST_BROWSER_APPLICATION_PROVIDERS);
- * </code>
- *
- * See https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta2-2016-01-28
- *
- * Followed by the normal import of all spec files, then bootstrap Karma.
- */
-Promise.all([
-  System.import('angular2/testing'),
-  System.import('angular2/platform/testing/browser'),
-]).then(function(imports) {
-  var testing = imports[0];
-  var browser = imports[1];
-  testing.setBaseTestProviders(browser.TEST_BROWSER_PLATFORM_PROVIDERS,
-                               browser.TEST_BROWSER_APPLICATION_PROVIDERS);
+var allSpecFiles = Object.keys(window.__karma__.files)
+  .filter(isSpecFile)
+  .filter(isMaterialFile);
 
-  return Promise.all(
-    Object.keys(window.__karma__.files)
-      .filter(isSpecFile)
-      .map(function(moduleName) {
-        return System.import(moduleName).then(function(module) {
-          if (module.hasOwnProperty('main')) {
-            return module.main();
-          } else {
-            return module;
-          }
-        });
-      }));
-}).then(function() {
-  __karma__.start();
-}, function(error) {
-  __karma__.error(error.stack || error);
+// Load our SystemJS configuration.
+System.config({
+  baseURL: distPath
 });
 
-function isSpecFile(path) {
-  return /\.spec\.js$/.test(path);
-}
-
-function not(fn) {
-  return function() {
-    return !fn.apply(this, arguments);
-  };
-}
+System.import('system-config.js').then(function() {
+  // Load and configure the TestComponentBuilder.
+  return Promise.all([
+    System.import('@angular/core/testing'),
+    System.import('@angular/platform-browser-dynamic/testing')
+  ]).then(function (providers) {
+    var testing = providers[0];
+    var testingBrowser = providers[1];
+
+    testing.setBaseTestProviders(testingBrowser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
+      testingBrowser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
+  });
+}).then(function() {
+  // Finally, load all spec files.
+  // This will run the tests directly.
+  return Promise.all(
+    allSpecFiles.map(function (moduleName) {
+      return System.import(moduleName).then(function(module) {
+        // TODO(jelbourn): remove `main` method from tests and this check.
+        if (module.hasOwnProperty('main')) {
+          return module.main();
+        } else {
+          return module;
+        }
+      });
+    }));
+}).then(__karma__.start, __karma__.error);
diff --git a/test/karma.config.ts b/test/karma.config.ts
index 82a5957b9ae4..f59485659c5b 100644
--- a/test/karma.config.ts
+++ b/test/karma.config.ts
@@ -19,22 +19,13 @@ export function config(config) {
       require('karma-firefox-launcher'),
     ],
     files: [
-      {pattern: 'node_modules/es6-shim/es6-shim.min.js', included: true, watched: false},
-      {pattern: 'node_modules/systemjs/dist/system-polyfills.js', included: true, watched: false},
-      'node_modules/angular2/es6/dev/src/testing/shims_for_IE.js',
-
-      // Angular 2 polyfills *must* be loaded after es6-shim and system-polyfills in order to
-      // setup the monkey-patches for zones.
-      {pattern: 'node_modules/angular2/bundles/angular2-polyfills.js', included: true, watched: false},
-      {pattern: 'node_modules/zone.js/dist/jasmine-patch.js', included: true, watched: false},
-      {pattern: 'node_modules/zone.js/dist/async-test.js', included: true, watched: false},
-      {pattern: 'node_modules/zone.js/dist/fake-async-test.js', included: true, watched: false},
-      {pattern: 'node_modules/systemjs/dist/system.src.js', included: true, watched: false},
-      {pattern: 'node_modules/rxjs/bundles/Rx.js', included: true, watched: false},
-      'node_modules/reflect-metadata/Reflect.js',
-      {pattern: 'node_modules/angular2/bundles/angular2.dev.js', included: true, watched: false},
-      {pattern: 'node_modules/angular2/bundles/http.dev.js', included: true, watched: false},
-      {pattern: 'node_modules/angular2/bundles/testing.dev.js', included: true, watched: false},
+      {pattern: 'dist/vendor/es6-shim/es6-shim.js', included: true, watched: false},
+      {pattern: 'dist/vendor/reflect-metadata/Reflect.js', included: true, watched: false},
+      {pattern: 'dist/vendor/systemjs/dist/system-polyfills.js', included: true, watched: false},
+      {pattern: 'dist/vendor/systemjs/dist/system.src.js', included: true, watched: false},
+      {pattern: 'dist/vendor/zone.js/dist/zone.js', included: true, watched: false},
+      {pattern: 'dist/vendor/zone.js/dist/async-test.js', included: true, watched: false},
+      {pattern: 'dist/vendor/zone.js/dist/fake-async-test.js', included: true, watched: false},
 
       {pattern: 'test/karma-test-shim.js', included: true, watched: true},
 
@@ -52,10 +43,8 @@ export function config(config) {
     ],
     proxies: {
       // required for component assests fetched by Angular's compiler
-      '/demo-app/': '/base/dist/demo-app/',
       '/components/': '/base/dist/components/',
       '/core/': '/base/dist/core/',
-      '/directives/': '/base/dist/directives/',
     },
 
     customLaunchers: customLaunchers,

From 5eab2b310a788791e3fd92e567b706a666479dad Mon Sep 17 00:00:00 2001
From: Kara <kara@users.noreply.github.com>
Date: Tue, 3 May 2016 23:23:43 -0700
Subject: [PATCH 18/23] chore(icon): export icon registry as part of icon
 (#366)

---
 src/components/icon/icon.ts    | 2 +-
 src/demo-app/icon/icon-demo.ts | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index 7d312ceea969..87c2a7171ab1 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -11,7 +11,7 @@ import {
     AfterViewChecked
 } from '@angular/core';
 import {MdIconRegistry} from './icon-registry';
-
+export {MdIconRegistry} from './icon-registry';
 
 
 /** Exception thrown when an invalid icon name is passed to an md-icon component. */
diff --git a/src/demo-app/icon/icon-demo.ts b/src/demo-app/icon/icon-demo.ts
index c7df43059906..d594a82f1a3b 100644
--- a/src/demo-app/icon/icon-demo.ts
+++ b/src/demo-app/icon/icon-demo.ts
@@ -1,6 +1,5 @@
 import {Component, ViewEncapsulation} from '@angular/core';
-import {MdIcon} from '../../components/icon/icon';
-import {MdIconRegistry} from '../../components/icon/icon-registry';
+import {MdIcon, MdIconRegistry} from '../../components/icon/icon';
 
 @Component({
   selector: 'md-icon-demo',

From 4f9051f5312f5e6621736c0d0017c33ebb1591e7 Mon Sep 17 00:00:00 2001
From: Jeremy Elbourn <jelbourn@google.com>
Date: Tue, 3 May 2016 23:49:24 -0700
Subject: [PATCH 19/23] chore: release alpha.4

---
 CHANGELOG.md                                | 24 +++++++++++++++++++++
 package.json                                |  2 +-
 src/components/button/package.json          |  5 ++---
 src/components/card/package.json            |  5 ++---
 src/components/checkbox/package.json        |  5 ++---
 src/components/grid-list/package.json       |  5 ++---
 src/components/icon/package.json            |  6 +++---
 src/components/input/package.json           |  5 ++---
 src/components/list/package.json            |  5 ++---
 src/components/progress-bar/package.json    |  5 ++---
 src/components/progress-circle/package.json |  5 ++---
 src/components/radio/package.json           |  5 ++---
 src/components/sidenav/package.json         |  5 ++---
 src/components/toolbar/package.json         |  4 ++--
 src/core/package.json                       |  5 +++--
 15 files changed, 53 insertions(+), 38 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c21de55c68ca..074b60b6de58 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,27 @@
+<a name="2.0.0-alpha.4"></a>
+# [2.0.0-alpha.4 mahogany-tambourine](https://github.com/angular/material2/compare/2.0.0-alpha.3...v2.0.0-alpha.4) (2016-05-04)
+
+
+### Bug Fixes
+
+* **button:** cleaned up button theming([0672356](https://github.com/angular/material2/commit/0672356))
+* **checkbox:** fix horizontal spacing between checkboxes and radio buttons([f4a7266](https://github.com/angular/material2/commit/f4a7266))
+* **sidenav:** add min width for empty navs([dbe3cc5](https://github.com/angular/material2/commit/dbe3cc5))
+* **sidenav:** prevent content from scrolling when sidenav is open([fea5923](https://github.com/angular/material2/commit/fea5923))
+* **theme:** new, more delightful default theme([2f3e9db](https://github.com/angular/material2/commit/2f3e9db))
+* update to @angular 2.0.0-rc.0 ([#384](https://github.com/angular/material2/issues/384))([04c8a1f](https://github.com/angular/material2/commit/04c8a1f))
+
+
+### Features
+
+* **icon:** initial md-icon implementation ([#281](https://github.com/angular/material2/issues/281))([a094a33](https://github.com/angular/material2/commit/a094a33))
+* **card:** add alignment shortcuts for md-card-actions([77be2df](https://github.com/angular/material2/commit/77be2df))
+* **grid-list:** basic scaffold for grid list (unreleased)([a9e1fa5](https://github.com/angular/material2/commit/a9e1fa5))
+* **list:** add icon support([7b3698c](https://github.com/angular/material2/commit/7b3698c))
+* **sidenav:** add fullscreen mode([aa6c740](https://github.com/angular/material2/commit/aa6c740))
+
+
+
 <a name="2.0.0-alpha.3"></a>
 # [2.0.0-alpha.3 cotton-candelabrum](https://github.com/angular/material2/compare/2.0.0-alpha.2...v2.0.0-alpha.3) (2016-04-21)
 
diff --git a/package.json b/package.json
index f536813c2cc8..b2c0c4bc99a1 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "inline-resources": "gulp inline-resources",
     "deploy": "firebase deploy"
   },
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.4",
   "license": "MIT",
   "engines": {
     "node": ">= 4.2.1 < 5"
diff --git a/src/components/button/package.json b/src/components/button/package.json
index 2a3d0925a177..5b7730fcd248 100644
--- a/src/components/button/package.json
+++ b/src/components/button/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@angular2-material/button",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.4",
   "description": "Angular 2 Material button",
   "main": "./button.js",
   "typings": "./button.d.ts",
@@ -23,7 +23,6 @@
   },
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
-    "angular2": "^2.0.0-beta.8",
-    "@angular2-material/core": "2.0.0-alpha.3"
+    "@angular2-material/core": "2.0.0-alpha.4"
   }
 }
diff --git a/src/components/card/package.json b/src/components/card/package.json
index edcffa006a20..cce49a85d3bb 100644
--- a/src/components/card/package.json
+++ b/src/components/card/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@angular2-material/card",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.4",
   "description": "Angular 2 Material card",
   "main": "./card.js",
   "typings": "./card.d.ts",
@@ -21,7 +21,6 @@
   },
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
-    "angular2": "^2.0.0-beta.8",
-    "@angular2-material/core": "2.0.0-alpha.3"
+    "@angular2-material/core": "2.0.0-alpha.4"
   }
 }
diff --git a/src/components/checkbox/package.json b/src/components/checkbox/package.json
index bd98504fe03b..e83a9db0b210 100644
--- a/src/components/checkbox/package.json
+++ b/src/components/checkbox/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@angular2-material/checkbox",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.4",
   "description": "Angular 2 Material checkbox",
   "main": "./checkbox.js",
   "typings": "./checkbox.d.ts",
@@ -21,7 +21,6 @@
   },
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
-    "angular2": "^2.0.0-beta.8",
-    "@angular2-material/core": "2.0.0-alpha.3"
+    "@angular2-material/core": "2.0.0-alpha.4"
   }
 }
diff --git a/src/components/grid-list/package.json b/src/components/grid-list/package.json
index dabefabd9fe7..0b0271551049 100644
--- a/src/components/grid-list/package.json
+++ b/src/components/grid-list/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@angular2-material/grid-list",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.4",
   "description": "Angular 2 Material grid list",
   "main": "./grid-list.js",
   "typings": "./grid-list.d.ts",
@@ -23,7 +23,6 @@
   },
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
-    "angular2": "^2.0.0-beta.8",
-    "@angular2-material/core": "2.0.0-alpha.3"
+    "@angular2-material/core": "2.0.0-alpha.4"
   }
 }
diff --git a/src/components/icon/package.json b/src/components/icon/package.json
index a0e8b8c790f5..a5efd72be8f9 100644
--- a/src/components/icon/package.json
+++ b/src/components/icon/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@angular2-material/icon",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.4",
   "description": "Angular 2 Material icon",
   "main": "./icon.js",
   "typings": "./icon.d.ts",
@@ -21,7 +21,7 @@
   },
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
-    "angular2": "^2.0.0-beta.8",
-    "@angular2-material/core": "2.0.0-alpha.3"
+    "@angular/http": "2.0.0-rc.0",
+    "@angular2-material/core": "2.0.0-alpha.4"
   }
 }
diff --git a/src/components/input/package.json b/src/components/input/package.json
index 6af76afaf14c..596a548f1dd7 100644
--- a/src/components/input/package.json
+++ b/src/components/input/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@angular2-material/input",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.4",
   "description": "Angular 2 Material input",
   "main": "./input.js",
   "typings": "./input.d.ts",
@@ -23,7 +23,6 @@
   },
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
-    "angular2": "^2.0.0-beta.8",
-    "@angular2-material/core": "2.0.0-alpha.3"
+    "@angular2-material/core": "2.0.0-alpha.4"
   }
 }
diff --git a/src/components/list/package.json b/src/components/list/package.json
index dc406f2e406e..9dead14e24b7 100644
--- a/src/components/list/package.json
+++ b/src/components/list/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@angular2-material/list",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.4",
   "description": "Angular 2 Material list",
   "main": "./list.js",
   "typings": "./list.d.ts",
@@ -21,7 +21,6 @@
   },
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
-    "angular2": "^2.0.0-beta.8",
-    "@angular2-material/core": "2.0.0-alpha.3"
+    "@angular2-material/core": "2.0.0-alpha.4"
   }
 }
diff --git a/src/components/progress-bar/package.json b/src/components/progress-bar/package.json
index 3e85e1069093..066aa9641d6e 100644
--- a/src/components/progress-bar/package.json
+++ b/src/components/progress-bar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@angular2-material/progress-bar",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.4",
   "description": "Angular 2 Material progress-bar",
   "main": "./progress-bar.js",
   "typings": "./progress-bar.d.ts",
@@ -23,7 +23,6 @@
   },
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
-    "angular2": "^2.0.0-beta.8",
-    "@angular2-material/core": "2.0.0-alpha.3"
+    "@angular2-material/core": "2.0.0-alpha.4"
   }
 }
diff --git a/src/components/progress-circle/package.json b/src/components/progress-circle/package.json
index 47f951ec3f51..357e05deea74 100644
--- a/src/components/progress-circle/package.json
+++ b/src/components/progress-circle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@angular2-material/progress-circle",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.4",
   "description": "Angular 2 Material progress-circle",
   "main": "./progress-circle.js",
   "typings": "./progress-circle.d.ts",
@@ -22,7 +22,6 @@
   },
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
-    "angular2": "^2.0.0-beta.8",
-    "@angular2-material/core": "2.0.0-alpha.3"
+    "@angular2-material/core": "2.0.0-alpha.4"
   }
 }
diff --git a/src/components/radio/package.json b/src/components/radio/package.json
index 23510f4d2129..e5215d22e9e6 100644
--- a/src/components/radio/package.json
+++ b/src/components/radio/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@angular2-material/radio",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.4",
   "description": "Angular 2 Material radio",
   "main": "./radio.js",
   "typings": "./radio.d.ts",
@@ -21,7 +21,6 @@
   },
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
-    "angular2": "^2.0.0-beta.8",
-    "@angular2-material/core": "2.0.0-alpha.3"
+    "@angular2-material/core": "2.0.0-alpha.4"
   }
 }
diff --git a/src/components/sidenav/package.json b/src/components/sidenav/package.json
index 810e818005b5..543f20e4dfe3 100644
--- a/src/components/sidenav/package.json
+++ b/src/components/sidenav/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@angular2-material/sidenav",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.4",
   "description": "Angular 2 Material sidenav",
   "main": "./sidenav.js",
   "typings": "./sidenav.d.ts",
@@ -24,7 +24,6 @@
   },
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
-    "angular2": "^2.0.0-beta.8",
-    "@angular2-material/core": "2.0.0-alpha.3"
+    "@angular2-material/core": "2.0.0-alpha.4"
   }
 }
diff --git a/src/components/toolbar/package.json b/src/components/toolbar/package.json
index 49d8c5ce7d39..f0c146c2b007 100644
--- a/src/components/toolbar/package.json
+++ b/src/components/toolbar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@angular2-material/toolbar",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.4",
   "description": "Angular 2 Material toolbar",
   "main": "./toolbar.js",
   "typings": "./toolbar.d.ts",
@@ -22,6 +22,6 @@
   },
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
-    "angular2": "^2.0.0-beta.8"
+    "@angular2-material/core": "2.0.0-alpha.4"
   }
 }
diff --git a/src/core/package.json b/src/core/package.json
index 6466e33b35b5..04ededf4e241 100644
--- a/src/core/package.json
+++ b/src/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@angular2-material/core",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.4",
   "description": "Angular 2 Material core",
   "main": "./core.js",
   "typings": "./core.d.ts",
@@ -20,6 +20,7 @@
   },
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
-    "angular2": "^2.0.0-beta.8"
+    "@angular/core": "^2.0.0-rc.0",
+    "@angular/common": "^2.0.0-rc.0"
   }
 }

From c56624289da6e29550e27a4e5f7d79034789ef04 Mon Sep 17 00:00:00 2001
From: Kara Erickson <karakara@google.com>
Date: Thu, 5 May 2016 19:59:41 -0700
Subject: [PATCH 20/23] fix(sidenav): add scrolling style to enable momentum
 scroll

---
 src/components/sidenav/sidenav.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/sidenav/sidenav.scss b/src/components/sidenav/sidenav.scss
index 8e9a710faa81..ae171487333a 100644
--- a/src/components/sidenav/sidenav.scss
+++ b/src/components/sidenav/sidenav.scss
@@ -60,6 +60,8 @@ $md-sidenav-push-background-color: md-color($md-background, dialog) !default;
   @include md-stacking-context();
 
   box-sizing: border-box;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
 
   // TODO(hansl): Update this with a more robust solution.
   &[fullscreen] {

From 0f89b8d47ee2ffc8ed050530866626a684c8b856 Mon Sep 17 00:00:00 2001
From: Kara Erickson <karakara@google.com>
Date: Tue, 10 May 2016 09:38:11 -0700
Subject: [PATCH 21/23] feat(grid-list): add grid-list component

---
 src/components/grid-list/grid-list-errors.ts |  26 +++
 src/components/grid-list/grid-list.html      |   4 +-
 src/components/grid-list/grid-list.scss      |  67 ++++++
 src/components/grid-list/grid-list.ts        | 154 ++++++++++++-
 src/components/grid-list/grid-tile.html      |   4 +
 src/components/grid-list/grid-tile.ts        |  53 +++++
 src/components/grid-list/tile-coordinator.ts | 142 ++++++++++++
 src/components/grid-list/tile-styler.ts      | 218 +++++++++++++++++++
 src/demo-app/grid-list/grid-list-demo.html   |  62 +++++-
 src/demo-app/grid-list/grid-list-demo.scss   |  15 ++
 src/demo-app/grid-list/grid-list-demo.ts     |  23 +-
 11 files changed, 761 insertions(+), 7 deletions(-)
 create mode 100644 src/components/grid-list/grid-list-errors.ts
 create mode 100644 src/components/grid-list/grid-tile.html
 create mode 100644 src/components/grid-list/grid-tile.ts
 create mode 100644 src/components/grid-list/tile-coordinator.ts
 create mode 100644 src/components/grid-list/tile-styler.ts

diff --git a/src/components/grid-list/grid-list-errors.ts b/src/components/grid-list/grid-list-errors.ts
new file mode 100644
index 000000000000..65dc797b0283
--- /dev/null
+++ b/src/components/grid-list/grid-list-errors.ts
@@ -0,0 +1,26 @@
+/**
+ * Exception thrown when cols property is missing from grid-list
+ */
+export class MdGridListColsError extends Error {
+  constructor() {
+    super(`md-grid-list: must pass in number of columns. Example: <md-grid-list cols="3">`);
+  }
+}
+
+/**
+ * Exception thrown when a tile's colspan is longer than the number of cols in list
+ */
+export class MdGridTileTooWideError extends Error {
+  constructor(cols: number, listLength: number) {
+    super(`Tile with colspan ${cols} is wider than grid with cols="${listLength}".`);
+  }
+}
+
+/**
+ * Exception thrown when an invalid ratio is passed in as a rowHeight
+ */
+export class MdGridListBadRatioError extends Error {
+  constructor(value: string) {
+    super(`md-grid-list: invalid ratio given for row-height: "${value}"`);
+  }
+}
diff --git a/src/components/grid-list/grid-list.html b/src/components/grid-list/grid-list.html
index 20ca1bf7e866..68ebf7c55c5f 100644
--- a/src/components/grid-list/grid-list.html
+++ b/src/components/grid-list/grid-list.html
@@ -1 +1,3 @@
-I'm a grid list!
\ No newline at end of file
+<div class="md-grid-list">
+  <ng-content></ng-content>
+</div>
\ No newline at end of file
diff --git a/src/components/grid-list/grid-list.scss b/src/components/grid-list/grid-list.scss
index e69de29bb2d1..d2372096a135 100644
--- a/src/components/grid-list/grid-list.scss
+++ b/src/components/grid-list/grid-list.scss
@@ -0,0 +1,67 @@
+// TODO(kara): Review this to see if MD spec updates are needed
+
+md-grid-list {
+  display: block;
+  position: relative;
+}
+
+md-grid-tile {
+  display: block;
+  position: absolute;
+
+  figure {
+    display: flex;
+    position: absolute;
+
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    padding: 0;
+    margin: 0;
+  }
+
+  // Headers & footers
+  md-grid-tile-header,
+  md-grid-tile-footer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 48px;
+    color: #fff;
+    background: rgba(0, 0, 0, 0.18);
+    overflow: hidden;
+
+    // Positioning
+    position: absolute;
+    left: 0;
+    right: 0;
+
+    h3,
+    h4 {
+      font-weight: 400;
+      margin: 0 0 0 16px;
+    }
+
+    h3 {
+      font-size: 14px;
+    }
+
+    h4 {
+      font-size: 12px;
+    }
+  }
+
+  md-grid-tile-header {
+    top: 0;
+  }
+
+  md-grid-tile-footer {
+    bottom: 0;
+  }
+}
diff --git a/src/components/grid-list/grid-list.ts b/src/components/grid-list/grid-list.ts
index 8853bbdca372..dc612c3f3d23 100644
--- a/src/components/grid-list/grid-list.ts
+++ b/src/components/grid-list/grid-list.ts
@@ -1,8 +1,158 @@
-import {Component} from '@angular/core';
+import {
+  Component,
+  ViewEncapsulation,
+  AfterContentChecked,
+  OnInit,
+  Input,
+  ContentChildren,
+  QueryList,
+  Renderer,
+  ElementRef
+} from '@angular/core';
+import {MdGridTile} from './grid-tile';
+import {TileCoordinator} from './tile-coordinator';
+import {
+    TileStyler,
+    FitTileStyler,
+    RatioTileStyler,
+    FixedTileStyler
+} from './tile-styler';
+import {MdGridListColsError} from './grid-list-errors';
+import {Dir} from '../../core/rtl/dir';
+
+// TODO(kara): Conditional (responsive) column count / row size.
+// TODO(kara): Re-layout on window resize / media change (debounced).
+// TODO(kara): gridTileHeader and gridTileFooter.
+
+const MD_FIT_MODE = 'fit';
 
 @Component({
   selector: 'md-grid-list',
+  host: { 'role': 'list' },
   templateUrl: './components/grid-list/grid-list.html',
   styleUrls: ['./components/grid-list/grid-list.css'],
+  encapsulation: ViewEncapsulation.None,
 })
-export class MdGridList {}
+export class MdGridList implements OnInit, AfterContentChecked {
+  /** Number of columns being rendered. */
+  _cols: number;
+
+  /** Row height value passed in by user. This can be one of three types:
+   * - Number value (ex: "100px"):  sets a fixed row height to that value
+   * - Ratio value (ex: "4:3"): sets the row height based on width:height ratio
+   * - "Fit" mode (ex: "fit"): sets the row height to total height divided by number of rows
+   * */
+  _rowHeight: string;
+
+  /** The amount of space between tiles. This will be something like '5px' or '2em'. */
+  _gutter: string = '1px';
+
+  /** Sets position and size styles for a tile */
+  _tileStyler: TileStyler;
+
+  /** Query list of tiles that are being rendered. */
+  @ContentChildren(MdGridTile) _tiles: QueryList<MdGridTile>;
+
+  constructor(private _renderer: Renderer, private _element: ElementRef,
+              private _dir: Dir) {}
+
+  @Input()
+  get cols() {
+    return this._cols;
+  }
+
+  set cols(value: any) {
+    this._cols = coerceToNumber(value);
+  }
+
+  @Input('gutterSize')
+  get gutterSize() {
+    return this._gutter;
+  }
+
+  set gutterSize(value: any) {
+    this._gutter = coerceToString(value);
+  }
+
+  /** Set internal representation of row height from the user-provided value. */
+  @Input()
+  set rowHeight(value: string | number) {
+    this._rowHeight = coerceToString(value);
+    this._setTileStyler();
+  }
+
+  ngOnInit() {
+    this._checkCols();
+    this._checkRowHeight();
+  }
+
+  /** The layout calculation is fairly cheap if nothing changes, so there's little cost
+   * to run it frequently. */
+  ngAfterContentChecked() {
+    this._layoutTiles();
+  }
+
+  /** Throw a friendly error if cols property is missing */
+  private _checkCols() {
+    if (!this.cols) {
+      throw new MdGridListColsError();
+    }
+  }
+
+  /** Default to equal width:height if rowHeight property is missing */
+  private _checkRowHeight(): void {
+    if (!this._rowHeight) {
+      this._tileStyler = new RatioTileStyler('1:1');
+    }
+  }
+
+  /** Creates correct Tile Styler subtype based on rowHeight passed in by user */
+  private _setTileStyler(): void {
+    if (this._rowHeight === MD_FIT_MODE) {
+      this._tileStyler = new FitTileStyler();
+    } else if (this._rowHeight && this._rowHeight.match(/:/g)) {
+      this._tileStyler = new RatioTileStyler(this._rowHeight);
+    } else {
+      this._tileStyler = new FixedTileStyler(this._rowHeight);
+    }
+  }
+
+  /** Computes and applies the size and position for all children grid tiles. */
+  private _layoutTiles(): void {
+    let tiles = this._tiles.toArray();
+    let tracker = new TileCoordinator(this.cols, tiles);
+    this._tileStyler.init(this.gutterSize, tracker, this.cols, this._dir);
+
+    for (let i = 0; i < tiles.length; i++) {
+      let pos = tracker.positions[i];
+      let tile = tiles[i];
+      this._tileStyler.setStyle(tile, pos.row, pos.col);
+    }
+    this.setListStyle(this._tileStyler.getComputedHeight());
+  }
+
+  /** Sets style on the main grid-list element, given the style name and value.
+   *  @internal
+   */
+  setListStyle(style: [string, string]): void {
+    if (style) {
+      this._renderer.setElementStyle(this._element.nativeElement, style[0], style[1]);
+    }
+  }
+}
+
+/** Converts values into strings. Falsy values become empty strings.
+ * @internal
+ */
+export function coerceToString(value: string | number): string {
+  return `${value || ''}`;
+}
+
+/** Converts a value that might be a string into a number.
+ * @internal
+ */
+export function coerceToNumber(value: string | number): number {
+  return typeof value === 'string' ? parseInt(value, 10) : value;
+}
+
+export const MD_GRID_LIST_DIRECTIVES: any[] = [MdGridList, MdGridTile];
diff --git a/src/components/grid-list/grid-tile.html b/src/components/grid-list/grid-tile.html
new file mode 100644
index 000000000000..cadd734bc6ab
--- /dev/null
+++ b/src/components/grid-list/grid-tile.html
@@ -0,0 +1,4 @@
+<!-- TODO(kara): Revisit why this is a figure.-->
+<figure>
+  <ng-content></ng-content>
+</figure>
\ No newline at end of file
diff --git a/src/components/grid-list/grid-tile.ts b/src/components/grid-list/grid-tile.ts
new file mode 100644
index 000000000000..419c11ff1c5f
--- /dev/null
+++ b/src/components/grid-list/grid-tile.ts
@@ -0,0 +1,53 @@
+import {
+  Component,
+  ViewEncapsulation,
+  Renderer,
+  ElementRef,
+  Input,
+} from '@angular/core';
+
+import {coerceToNumber} from './grid-list';
+
+@Component({
+  selector: 'md-grid-tile',
+  host: { 'role': 'listitem' },
+  templateUrl: './components/grid-list/grid-tile.html',
+  styleUrls: ['./components/grid-list/grid-list.css'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class MdGridTile {
+  _rowspan: number = 1;
+  _colspan: number = 1;
+  _element: HTMLElement;
+
+  constructor(private _renderer: Renderer, element: ElementRef) {
+    this._element = element.nativeElement;
+  }
+
+  @Input()
+  get rowspan() {
+    return this._rowspan;
+  }
+
+  @Input()
+  get colspan() {
+    return this._colspan;
+  }
+
+  set rowspan(value) {
+    this._rowspan = coerceToNumber(value);
+  }
+
+  set colspan(value) {
+    this._colspan = coerceToNumber(value);
+  }
+
+  /** Sets the style of the grid-tile element.  Needs to be set manually to avoid
+   * "Changed after checked" errors that would occur with HostBinding.
+   * @internal
+   */
+  setStyle(property: string, value: string): void {
+    this._renderer.setElementStyle(this._element, property, value);
+  }
+
+}
diff --git a/src/components/grid-list/tile-coordinator.ts b/src/components/grid-list/tile-coordinator.ts
new file mode 100644
index 000000000000..0e477838893c
--- /dev/null
+++ b/src/components/grid-list/tile-coordinator.ts
@@ -0,0 +1,142 @@
+import {MdGridTile} from './grid-tile';
+import {MdGridTileTooWideError} from './grid-list-errors';
+
+/**
+ * Class for determining, from a list of tiles, the (row, col) position of each of those tiles
+ * in the grid. This is necessary (rather than just rendering the tiles in normal document flow)
+ * because the tiles can have a rowspan.
+ *
+ * The positioning algorithm greedily places each tile as soon as it encounters a gap in the grid
+ * large enough to accommodate it so that the tiles still render in the same order in which they
+ * are given.
+ *
+ * The basis of the algorithm is the use of an array to track the already placed tiles. Each
+ * element of the array corresponds to a column, and the value indicates how many cells in that
+ * column are already occupied; zero indicates an empty cell. Moving "down" to the next row
+ * decrements each value in the tracking array (indicating that the column is one cell closer to
+ * being free).
+ */
+export class TileCoordinator {
+  /** Tracking array (see class description). */
+  tracker: number[];
+
+  /** Index at which the search for the next gap will start. */
+  columnIndex: number = 0;
+
+  /** The current row index. */
+  rowIndex: number = 0;
+
+  /** Gets the total number of rows occupied by tiles */
+  get rowCount(): number { return this.rowIndex + 1; }
+
+  /** Gets the total span of rows occupied by tiles.
+   * Ex: A list with 1 row that contains a tile with rowspan 2 will have a total rowspan of 2. */
+  get rowspan() {
+    let lastRowMax = Math.max(...this.tracker);
+    // if any of the tiles has a rowspan that pushes it beyond the total row count,
+    // add the difference to the rowcount
+    return lastRowMax > 1 ? this.rowCount + lastRowMax - 1 : this.rowCount;
+  }
+
+  /** The computed (row, col) position of each tile (the output). */
+  positions: TilePosition[];
+
+  constructor(numColumns: number, tiles: MdGridTile[]) {
+    this.tracker = new Array(numColumns);
+    this.tracker.fill(0, 0, this.tracker.length);
+
+    this.positions = tiles.map(tile => this._trackTile(tile));
+  }
+
+  /** Calculates the row and col position of a tile. */
+  private _trackTile(tile: MdGridTile): TilePosition {
+    // Find a gap large enough for this tile.
+    let gapStartIndex = this._findMatchingGap(tile.colspan);
+
+    // Place tile in the resulting gap.
+    this._markTilePosition(gapStartIndex, tile);
+
+    // The next time we look for a gap, the search will start at columnIndex, which should be
+    // immediately after the tile that has just been placed.
+    this.columnIndex = gapStartIndex + tile.colspan;
+
+    return new TilePosition(this.rowIndex, gapStartIndex);
+  }
+
+  /** Finds the next available space large enough to fit the tile. */
+  private _findMatchingGap(tileCols: number): number {
+    if (tileCols > this.tracker.length) {
+      throw new MdGridTileTooWideError(tileCols, this.tracker.length);
+    }
+
+    // Start index is inclusive, end index is exclusive.
+    let gapStartIndex = -1;
+    let gapEndIndex = -1;
+
+    // Look for a gap large enough to fit the given tile. Empty spaces are marked with a zero.
+    do {
+      // If we've reached the end of the row, go to the next row.
+      if (this.columnIndex + tileCols > this.tracker.length) {
+        this._nextRow();
+        continue;
+      }
+
+      gapStartIndex = this.tracker.indexOf(0, this.columnIndex);
+
+      // If there are no more empty spaces in this row at all, move on to the next row.
+      if (gapStartIndex == -1) {
+        this._nextRow();
+        continue;
+      }
+
+      gapEndIndex = this._findGapEndIndex(gapStartIndex);
+
+      // If a gap large enough isn't found, we want to start looking immediately after the current
+      // gap on the next iteration.
+      this.columnIndex = gapStartIndex + 1;
+
+      // Continue iterating until we find a gap wide enough for this tile.
+    } while (gapEndIndex - gapStartIndex < tileCols);
+    return gapStartIndex;
+  }
+
+  /** Move "down" to the next row. */
+  private _nextRow(): void {
+    this.columnIndex = 0;
+    this.rowIndex++;
+
+    // Decrement all spaces by one to reflect moving down one row.
+    for (let i = 0; i < this.tracker.length; i++) {
+      this.tracker[i] = Math.max(0, this.tracker[i] - 1);
+    }
+  }
+
+  /**
+   * Finds the end index (exclusive) of a gap given the index from which to start looking.
+   * The gap ends when a non-zero value is found.
+   */
+  private _findGapEndIndex(gapStartIndex: number): number {
+    for (let i = gapStartIndex + 1; i < this.tracker.length; i++) {
+      if (this.tracker[i] != 0) {
+        return i;
+      }
+    }
+
+    // The gap ends with the end of the row.
+    return this.tracker.length;
+  }
+
+  /** Update the tile tracker to account for the given tile in the given space. */
+  private _markTilePosition(start: number, tile: MdGridTile): void {
+    for (let i = 0; i < tile.colspan; i++) {
+      this.tracker[start + i] = tile.rowspan;
+    }
+  }
+}
+
+/** Simple data structure for tile position (row, col).
+ * @internal
+ */
+export class TilePosition {
+  constructor(public row: number, public col: number) {}
+}
diff --git a/src/components/grid-list/tile-styler.ts b/src/components/grid-list/tile-styler.ts
new file mode 100644
index 000000000000..5e342a5e4e6d
--- /dev/null
+++ b/src/components/grid-list/tile-styler.ts
@@ -0,0 +1,218 @@
+import {MdGridTile} from './grid-tile';
+import {TileCoordinator} from './tile-coordinator';
+import {MdGridListBadRatioError} from './grid-list-errors';
+import {Dir} from '../../core/rtl/dir';
+
+/* Sets the style properties for an individual tile, given the position calculated by the
+* Tile Coordinator. */
+export class TileStyler {
+  _gutterSize: string;
+  _rows: number = 0;
+  _rowspan: number = 0;
+  _cols: number;
+  _dir: Dir;
+
+  /** Adds grid-list layout info once it is available. Cannot be processed in the constructor
+   * because these properties haven't been calculated by that point.
+   * @internal
+   * */
+  init(_gutterSize: string, tracker: TileCoordinator, cols: number, dir: Dir): void {
+    this._gutterSize = normalizeUnits(_gutterSize);
+    this._rows = tracker.rowCount;
+    this._rowspan = tracker.rowspan;
+    this._cols = cols;
+    this._dir = dir;
+  }
+
+  /**
+   * Computes the amount of space a single 1x1 tile would take up (width or height).
+   * Used as a basis for other calculations.
+   * @internal
+   * @param sizePercent Percent of the total grid-list space that one 1x1 tile would take up.
+   * @param gutterFraction Fraction of the gutter size taken up by one 1x1 tile.
+   * @return The size of a 1x1 tile as an expression that can be evaluated via CSS calc().
+   */
+  getBaseTileSize(sizePercent: number, gutterFraction: number): string {
+    // Take the base size percent (as would be if evenly dividing the size between cells),
+    // and then subtracting the size of one gutter. However, since there are no gutters on the
+    // edges, each tile only uses a fraction (gutterShare = numGutters / numCells) of the gutter
+    // size. (Imagine having one gutter per tile, and then breaking up the extra gutter on the
+    // edge evenly among the cells).
+    return `(${sizePercent}% - ( ${this._gutterSize} * ${gutterFraction} ))`;
+  }
+
+
+  /**
+   * Gets The horizontal or vertical position of a tile, e.g., the 'top' or 'left' property value.
+   * @internal
+   * @param offset Number of tiles that have already been rendered in the row/column.
+   * @param baseSize Base size of a 1x1 tile (as computed in getBaseTileSize).
+   * @return Position of the tile as a CSS calc() expression.
+   */
+  getTilePosition(baseSize: string, offset: number): string {
+    // The position comes the size of a 1x1 tile plus gutter for each previous tile in the
+    // row/column (offset).
+    return calc(`(${baseSize} + ${this._gutterSize}) * ${offset}`);
+  }
+
+
+  /**
+   * Gets the actual size of a tile, e.g., width or height, taking rowspan or colspan into account.
+   * @internal
+   * @param baseSize Base size of a 1x1 tile (as computed in getBaseTileSize).
+   * @param span The tile's rowspan or colspan.
+   * @return Size of the tile as a CSS calc() expression.
+   */
+  getTileSize(baseSize: string, span: number): string {
+    return `(${baseSize} * ${span}) + (${span - 1} * ${this._gutterSize})`;
+  }
+
+
+  /** Gets the style properties to be applied to a tile for the given row and column index.
+   * @internal
+   */
+  setStyle(tile: MdGridTile, rowIndex: number, colIndex: number): void {
+    // Percent of the available horizontal space that one column takes up.
+    let percentWidthPerTile = 100 / this._cols;
+
+    // Fraction of the vertical gutter size that each column takes up.
+    // For example, if there are 5 columns, each column uses 4/5 = 0.8 times the gutter width.
+    let gutterWidthFractionPerTile = (this._cols - 1) / this._cols;
+
+    this.setColStyles(tile, colIndex, percentWidthPerTile, gutterWidthFractionPerTile);
+    this.setRowStyles(tile, rowIndex, percentWidthPerTile, gutterWidthFractionPerTile);
+  }
+
+  /** Sets the horizontal placement of the tile in the list.
+   * @internal
+   */
+  setColStyles(tile: MdGridTile, colIndex: number, percentWidth: number,
+               gutterWidth: number) {
+    // Base horizontal size of a column.
+    let baseTileWidth = this.getBaseTileSize(percentWidth, gutterWidth);
+
+    // The width and horizontal position of each tile is always calculated the same way, but the
+    // height and vertical position depends on the rowMode.
+    let side = this._dir.value === 'ltr' ? 'left' : 'right';
+    tile.setStyle(side, this.getTilePosition(baseTileWidth, colIndex));
+    tile.setStyle('width', calc(this.getTileSize(baseTileWidth, tile.colspan)));
+  }
+
+  /** Sets the vertical placement of the tile in the list.
+   * This method will be implemented by each type of TileStyler.
+   * @internal
+   */
+  setRowStyles(tile: MdGridTile, rowIndex: number, percentWidth: number, gutterWidth: number) {}
+
+  /** Calculates the computed height and returns the correct style property to set.
+   * This method will be implemented by each type of TileStyler.
+   * @internal
+   */
+  getComputedHeight(): [string, string] { return null; }
+}
+
+
+/*  This type of styler is instantiated when the user passes in a fixed row height
+*   Example <md-grid-list cols="3" rowHeight="100px"> */
+export class FixedTileStyler extends TileStyler {
+
+  constructor(public fixedRowHeight: string) { super(); }
+
+  /** @internal */
+  init(gutterSize: string, tracker: TileCoordinator, cols: number, dir: Dir) {
+    super.init(gutterSize, tracker, cols, dir);
+    this.fixedRowHeight = normalizeUnits(this.fixedRowHeight);
+  }
+
+  /** @internal */
+  setRowStyles(tile: MdGridTile, rowIndex: number, percentWidth: number,
+               gutterWidth: number): void {
+    tile.setStyle('top', this.getTilePosition(this.fixedRowHeight, rowIndex));
+    tile.setStyle('height', calc(this.getTileSize(this.fixedRowHeight, tile.rowspan)));
+  }
+
+  /** @internal */
+  getComputedHeight(): [string, string] {
+    return ['height', calc(`${this._rowspan} * ${this.getTileSize(this.fixedRowHeight, 1)}`)];
+  }
+}
+
+/*  This type of styler is instantiated when the user passes in a width:height ratio
+ *  for the row height.  Example <md-grid-list cols="3" rowHeight="3:1"> */
+export class RatioTileStyler extends TileStyler {
+
+  /** Ratio width:height given by user to determine row height.*/
+  rowHeightRatio: number;
+  baseTileHeight: string;
+
+  constructor(value: string) {
+    super();
+    this._parseRatio(value);
+  }
+
+  /** @internal */
+  setRowStyles(tile: MdGridTile, rowIndex: number, percentWidth: number,
+               gutterWidth: number): void {
+    let percentHeightPerTile = percentWidth / this.rowHeightRatio;
+    this.baseTileHeight = this.getBaseTileSize(percentHeightPerTile, gutterWidth);
+
+    // Use paddingTop and marginTop to maintain the given aspect ratio, as
+    // a percentage-based value for these properties is applied versus the *width* of the
+    // containing block. See http://www.w3.org/TR/CSS2/box.html#margin-properties
+    tile.setStyle('marginTop', this.getTilePosition(this.baseTileHeight, rowIndex));
+    tile.setStyle('paddingTop', calc(this.getTileSize(this.baseTileHeight, tile.rowspan)));
+  }
+
+  /** @internal */
+  getComputedHeight(): [string, string] {
+    return [
+      'paddingBottom', calc(`${this._rowspan} * ${this.getTileSize(this.baseTileHeight, 1)}`)
+    ];
+  }
+
+  /** @internal */
+  private _parseRatio(value: string): void {
+    let ratioParts = value.split(':');
+
+    if (ratioParts.length !== 2) {
+      throw new MdGridListBadRatioError(value);
+    }
+
+    this.rowHeightRatio = parseFloat(ratioParts[0]) / parseFloat(ratioParts[1]);
+  }
+}
+
+/*  This type of styler is instantiated when the user selects a "fit" row height mode.
+ *  In other words, the row height will reflect the total height of the container divided
+ *  by the number of rows.  Example <md-grid-list cols="3" rowHeight="fit"> */
+export class FitTileStyler extends TileStyler {
+
+  /** @internal */
+  setRowStyles(tile: MdGridTile, rowIndex: number, percentWidth: number,
+               gutterWidth: number): void {
+    // Percent of the available vertical space that one row takes up.
+    let percentHeightPerTile = 100 / this._rowspan;
+
+    // Fraction of the horizontal gutter size that each column takes up.
+    let gutterHeightPerTile = (this._rows - 1) / this._rows;
+
+    // Base vertical size of a column.
+    let baseTileHeight = this.getBaseTileSize(percentHeightPerTile, gutterHeightPerTile);
+
+    tile.setStyle('top', this.getTilePosition(baseTileHeight, rowIndex));
+    tile.setStyle('height', calc(this.getTileSize(baseTileHeight, tile.rowspan)));
+  }
+}
+
+/** Wraps a CSS string in a calc function
+ * @internal
+ */
+function calc(exp: string): string { return `calc(${exp})`; }
+
+/** Appends pixels to a CSS string if no units are given.
+ * @internal
+ */
+function normalizeUnits(value: string): string {
+  return (value.match(/px|em|rem/)) ? value : value + 'px';
+}
+
diff --git a/src/demo-app/grid-list/grid-list-demo.html b/src/demo-app/grid-list/grid-list-demo.html
index 45e91f66ec0a..1ddfd2705072 100644
--- a/src/demo-app/grid-list/grid-list-demo.html
+++ b/src/demo-app/grid-list/grid-list-demo.html
@@ -1 +1,61 @@
-<md-grid-list></md-grid-list>
\ No newline at end of file
+<div class="demo-grid-list">
+  <md-card>
+    <md-card-title>Basic grid list</md-card-title>
+    <md-card-content class="demo-basic-list">
+      <md-grid-list cols="4" [rowHeight]="basicRowHeight">
+        <md-grid-tile> One </md-grid-tile>
+        <md-grid-tile> Two </md-grid-tile>
+        <md-grid-tile> Three </md-grid-tile>
+        <md-grid-tile> Four </md-grid-tile>
+      </md-grid-list>
+    </md-card-content>
+  </md-card>
+
+  <md-card>
+    <md-card-title>Fixed-height grid list</md-card-title>
+    <md-card-content>
+      <md-grid-list [cols]="fixedCols" [rowHeight]="fixedRowHeight">
+        <md-grid-tile *ngFor="let tile of tiles" [colspan]="tile.cols" [rowspan]="tile.rows"
+                      [style.background]="tile.color">
+          {{tile.text}}
+        </md-grid-tile>
+      </md-grid-list>
+    </md-card-content>
+    <md-card-actions>
+      <p>Change list cols: <input type="number" [(ngModel)]="fixedCols"></p>
+      <p>Change row height: <input type="number" [(ngModel)]="fixedRowHeight"></p>
+      <button md-button (click)="addTileCols()" color="primary">ADD COLSPAN (THREE)</button>
+    </md-card-actions>
+  </md-card>
+
+  <md-card>
+    <md-card-title>Ratio-height grid list</md-card-title>
+    <md-card-content class="demo-ratio-list">
+      <md-grid-list cols="2" [rowHeight]="ratio" gutterSize="4px">
+        <md-grid-tile *ngFor="let tile of tiles" [style.background]="'lightblue'">
+          {{tile.text}}
+        </md-grid-tile>
+      </md-grid-list>
+    </md-card-content>
+    <md-card-actions>
+      <p>Change ratio: <input [(ngModel)]="ratio"></p>
+    </md-card-actions>
+  </md-card>
+
+  <md-card>
+    <md-card-title>Fit-height grid list</md-card-title>
+    <md-card-content class="demo-fit-list">
+      <md-grid-list cols="2" rowHeight="fit" [gutterSize]="ratioGutter"
+                    [style.height]="fitListHeight">
+        <md-grid-tile *ngFor="let tile of tiles" [style.background]="'#F1EBBA'">
+          {{tile.text}}
+        </md-grid-tile>
+      </md-grid-list>
+    </md-card-content>
+    <md-card-actions>
+      <p>Change list height: <input [(ngModel)]="fitListHeight"></p>
+      <p>Change gutter: <input type="number" [(ngModel)]="ratioGutter"></p>
+    </md-card-actions>
+  </md-card>
+</div>
+
diff --git a/src/demo-app/grid-list/grid-list-demo.scss b/src/demo-app/grid-list/grid-list-demo.scss
index e69de29bb2d1..4e6856e6a191 100644
--- a/src/demo-app/grid-list/grid-list-demo.scss
+++ b/src/demo-app/grid-list/grid-list-demo.scss
@@ -0,0 +1,15 @@
+.demo-grid-list {
+  width: 800px;
+
+  md-card {
+    margin: 16px 0;
+  }
+
+  p {
+    margin: 16px;
+  }
+
+  .demo-basic-list md-grid-tile {
+    background: rgba(0,0,0,0.32);
+  }
+}
diff --git a/src/demo-app/grid-list/grid-list-demo.ts b/src/demo-app/grid-list/grid-list-demo.ts
index 17892c52938a..fc947fb5bcb4 100644
--- a/src/demo-app/grid-list/grid-list-demo.ts
+++ b/src/demo-app/grid-list/grid-list-demo.ts
@@ -1,10 +1,27 @@
 import {Component} from '@angular/core';
-import {MdGridList} from '../../components/grid-list/grid-list';
+import {MD_GRID_LIST_DIRECTIVES} from '../../components/grid-list/grid-list';
+import {MdButton} from '../../components/button/button';
+import {MD_CARD_DIRECTIVES} from '../../components/card/card';
 
 @Component({
   selector: 'grid-list-demo',
   templateUrl: 'demo-app/grid-list/grid-list-demo.html',
   styleUrls: ['demo-app/grid-list/grid-list-demo.css'],
-  directives: [MdGridList]
+  directives: [MD_GRID_LIST_DIRECTIVES, MdButton, MD_CARD_DIRECTIVES]
 })
-export class GridListDemo {}
+export class GridListDemo {
+  tiles: any[] = [
+    {text: 'One', cols: 3, rows: 1, color: 'lightblue'},
+    {text: 'Two', cols: 1, rows: 2, color: 'lightgreen'},
+    {text: 'Three', cols: 1, rows: 1, color: 'lightpink'},
+    {text: 'Four', cols: 2, rows: 1, color: '#DDBDF1'},
+  ];
+
+  fixedCols: number = 4;
+  fixedRowHeight: number = 100;
+  ratioGutter: number = 1;
+  fitListHeight: string = '400px';
+  ratio: string = '4:1';
+
+  addTileCols() { this.tiles[2].cols++; }
+}

From a117b7a22ce4208ba762a0523eed586d612268ac Mon Sep 17 00:00:00 2001
From: Matthew de Nobrega <matt.denobrega@gmail.com>
Date: Sun, 24 Apr 2016 18:13:24 +0200
Subject: [PATCH 22/23] feat(input): add support for more input attributes

---
 src/components/input/input.html    |  15 +-
 src/components/input/input.spec.ts | 373 ++++++++++++++++++++++++++++-
 src/components/input/input.ts      |  14 +-
 3 files changed, 396 insertions(+), 6 deletions(-)

diff --git a/src/components/input/input.html b/src/components/input/input.html
index f177fd3870a5..47f44eb332e9 100644
--- a/src/components/input/input.html
+++ b/src/components/input/input.html
@@ -12,11 +12,20 @@
              [attr.aria-disabled]="ariaDisabled"
              [attr.aria-required]="ariaRequired"
              [attr.aria-invalid]="ariaInvalid"
-             [id]="id"
+             [attr.autocomplete]="autoComplete"
+             [autofocus]="autoFocus"
              [disabled]="disabled"
-             [required]="required"
-             [spellcheck]="spellcheck"
+             [id]="id"
+             [attr.list]="list"
+             [attr.max]="max"
              [attr.maxlength]="maxLength"
+             [attr.min]="min"
+             [attr.minlength]="minLength"
+             [readonly]="readOnly"
+             [required]="required"
+             [spellcheck]="spellCheck"
+             [attr.step]="step"
+             [attr.tabindex]="tabIndex"
              [type]="type"
              (focus)="onFocus()"
              (blur)="onBlur()"
diff --git a/src/components/input/input.spec.ts b/src/components/input/input.spec.ts
index 9d4f393b4b8e..2be08105c9d0 100644
--- a/src/components/input/input.spec.ts
+++ b/src/components/input/input.spec.ts
@@ -238,7 +238,369 @@ export function main() {
           expect(fixture.componentInstance.value).toBe(3);
           expect(typeof fixture.componentInstance.value).toBe('number');
         });
-    });
+    }));
+
+    it('supports the autoComplete attribute', injectAsync([], () => {
+      var template = '<md-input [autoComplete]="autoComplete"></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('autocomplete')).toBeNull();
+
+            fixture.componentInstance.autoComplete = 'on';
+            fixture.detectChanges();
+            expect(el.getAttribute('autocomplete')).toEqual('on');
+          })();
+        });
+    }));
+
+    it('supports the autoComplete attribute as an unbound attribute', injectAsync([], () => {
+      var template = '<md-input autoComplete></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('autocomplete')).toEqual('');
+          })();
+        });
+    }));
+
+    it('supports the autoComplete attribute as an unbound value attribute', injectAsync([], () => {
+      var template = '<md-input autoComplete="name"></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('autocomplete')).toEqual('name');
+          })();
+        });
+    }));
+
+    it('supports the autoFocus attribute', injectAsync([], () => {
+      var template = '<md-input [autoFocus]="autoFocus"></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('autofocus')).toBeNull();
+
+            fixture.componentInstance.autoFocus = true;
+            fixture.detectChanges();
+            expect(el.getAttribute('autofocus')).toEqual('');
+          })();
+        });
+    }));
+
+    it('supports the autoFocus attribute as an unbound attribute', injectAsync([], () => {
+      var template = '<md-input autoFocus></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('autofocus')).toEqual('');
+          })();
+        });
+    }));
+
+    it('supports the disabled attribute', injectAsync([], () => {
+      var template = '<md-input [disabled]="disabled"></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.componentInstance.disabled = false;
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('disabled')).toEqual(null);
+
+            fixture.componentInstance.disabled = true;
+            fixture.detectChanges();
+            expect(el.getAttribute('disabled')).toEqual('');
+          })();
+        });
+    }));
+
+    it('supports the disabled attribute as an unbound attribute', injectAsync([], () => {
+      var template = '<md-input disabled></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('disabled')).toEqual('');
+          })();
+        });
+    }));
+
+    it('supports the list attribute', injectAsync([], () => {
+      var template = '<md-input [list]="list"></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.componentInstance.disabled = false;
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('list')).toEqual(null);
+
+            fixture.componentInstance.list = 'datalist-id';
+            fixture.detectChanges();
+            expect(el.getAttribute('list')).toEqual('datalist-id');
+          })();
+        });
+    }));
+
+    it('supports the max attribute', injectAsync([], () => {
+      var template = '<md-input [max]="max"></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.componentInstance.disabled = false;
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('max')).toEqual(null);
+
+            fixture.componentInstance.max = 10;
+            fixture.detectChanges();
+            expect(el.getAttribute('max')).toEqual('10');
+
+            fixture.componentInstance.max = '2000-01-02';
+            fixture.detectChanges();
+            expect(el.getAttribute('max')).toEqual('2000-01-02');
+          })();
+        });
+    }));
+
+    it('supports the min attribute', injectAsync([], () => {
+      var template = '<md-input [min]="min"></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.componentInstance.disabled = false;
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('min')).toEqual(null);
+
+            fixture.componentInstance.min = 10;
+            fixture.detectChanges();
+            expect(el.getAttribute('min')).toEqual('10');
+
+            fixture.componentInstance.min = '2000-01-02';
+            fixture.detectChanges();
+            expect(el.getAttribute('min')).toEqual('2000-01-02');
+          })();
+        });
+    }));
+
+    it('supports the readOnly attribute', injectAsync([], () => {
+      var template = '<md-input [readOnly]="readOnly"></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('readonly')).toBeNull();
+
+            fixture.componentInstance.readOnly = true;
+            fixture.detectChanges();
+            expect(el.getAttribute('readonly')).toEqual('');
+          })();
+        });
+    }));
+
+    it('supports the readOnly attribute as an unbound attribute', injectAsync([], () => {
+      var template = '<md-input readOnly></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('readonly')).toEqual('');
+          })();
+        });
+    }));
+
+    it('supports the required attribute', injectAsync([], () => {
+      var template = '<md-input [required]="required"></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('required')).toBeNull();
+
+            fixture.componentInstance.required = true;
+            fixture.detectChanges();
+            expect(el.getAttribute('required')).toEqual('');
+          })();
+        });
+    }));
+
+    it('supports the required attribute as an unbound attribute', injectAsync([], () => {
+      var template = '<md-input required></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('required')).toEqual('');
+          })();
+        });
+    }));
+
+    it('supports the spellCheck attribute', injectAsync([], () => {
+      var template = '<md-input [spellCheck]="spellCheck"></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('spellcheck')).toEqual('false');
+
+            fixture.componentInstance.spellCheck = true;
+            fixture.detectChanges();
+            expect(el.getAttribute('spellcheck')).toEqual('true');
+          })();
+        });
+    }));
+
+    it('supports the spellCheck attribute as an unbound attribute', injectAsync([], () => {
+      var template = '<md-input spellCheck></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('spellcheck')).toEqual('true');
+          })();
+        });
+    }));
+
+    it('supports the step attribute', injectAsync([], () => {
+      var template = '<md-input [step]="step"></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('step')).toEqual(null);
+
+            fixture.componentInstance.step = 0.5;
+            fixture.detectChanges();
+            expect(el.getAttribute('step')).toEqual('0.5');
+          })();
+        });
+    }));
+
+    it('supports the tabIndex attribute', injectAsync([], () => {
+      var template = '<md-input [tabIndex]="tabIndex"></md-input>';
+
+      return builder.overrideTemplate(MdInputOptionalAttributeController, template)
+        .createAsync(MdInputOptionalAttributeController)
+        .then((fixture: ComponentFixture) => {
+          fakeAsync(() => {
+            fixture.detectChanges();
+
+            let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            expect(el).not.toBeNull();
+            expect(el.getAttribute('tabindex')).toEqual(null);
+
+            fixture.componentInstance.tabIndex = 1;
+            fixture.detectChanges();
+            expect(el.getAttribute('tabindex')).toEqual('1');
+          })();
+        });
+    }));
   });
 }
 
@@ -387,3 +749,12 @@ class MdInputAriaTestController {
   ariaLabel: string = 'label';
   ariaDisabled: boolean = true;
 }
+
+@Component({
+  selector: 'test-input-controller',
+  template: `
+    <md-input></md-input>
+  `,
+  directives: [MdInput]
+})
+class MdInputOptionalAttributeController {}
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index c90d27ae0a4c..4d5d8c8587ff 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -130,14 +130,24 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
    */
   @Input() align: 'start' | 'end' = 'start';
   @Input() dividerColor: 'primary' | 'accent' | 'warn' = 'primary';
-  @Input() @BooleanFieldValue() disabled: boolean = false;
   @Input() @BooleanFieldValue() floatingPlaceholder: boolean = true;
   @Input() hintLabel: string = '';
+
+  @Input() autoComplete: string;
+  @Input() @BooleanFieldValue() autoFocus: boolean = false;
+  @Input() @BooleanFieldValue() disabled: boolean = false;
   @Input() id: string = `md-input-${nextUniqueId++}`;
+  @Input() list: string;
+  @Input() max: string;
   @Input() maxLength: number = -1;
+  @Input() min: string;
+  @Input() minLength: number;
   @Input() placeholder: string;
+  @Input() @BooleanFieldValue() readOnly: boolean = false;
   @Input() @BooleanFieldValue() required: boolean = false;
-  @Input() @BooleanFieldValue() spellcheck: boolean = false;
+  @Input() @BooleanFieldValue() spellCheck: boolean = false;
+  @Input() step: number;
+  @Input() tabIndex: number;
   @Input() type: string = 'text';
 
   get value(): any { return this._value; };

From b0ffe08bbb72c472f1ddb1ab163c89c837b0d392 Mon Sep 17 00:00:00 2001
From: Matthew de Nobrega <matt.denobrega@gmail.com>
Date: Tue, 10 May 2016 19:36:37 +0200
Subject: [PATCH 23/23] chore(input): updated tests to use untyped fixtures

---
 src/components/input/input.spec.ts | 110 ++++++++++++++---------------
 1 file changed, 55 insertions(+), 55 deletions(-)

diff --git a/src/components/input/input.spec.ts b/src/components/input/input.spec.ts
index 2be08105c9d0..8245af871bd1 100644
--- a/src/components/input/input.spec.ts
+++ b/src/components/input/input.spec.ts
@@ -238,14 +238,14 @@ export function main() {
           expect(fixture.componentInstance.value).toBe(3);
           expect(typeof fixture.componentInstance.value).toBe('number');
         });
-    }));
+    });
 
-    it('supports the autoComplete attribute', injectAsync([], () => {
+    it('supports the autoComplete attribute', () => {
       var template = '<md-input [autoComplete]="autoComplete"></md-input>';
 
       return builder.overrideTemplate(MdInputOptionalAttributeController, template)
         .createAsync(MdInputOptionalAttributeController)
-        .then((fixture: ComponentFixture) => {
+        .then((fixture) => {
           fakeAsync(() => {
             fixture.detectChanges();
 
@@ -259,14 +259,14 @@ export function main() {
             expect(el.getAttribute('autocomplete')).toEqual('on');
           })();
         });
-    }));
+    });
 
-    it('supports the autoComplete attribute as an unbound attribute', injectAsync([], () => {
+    it('supports the autoComplete attribute as an unbound attribute', () => {
       var template = '<md-input autoComplete></md-input>';
 
       return builder.overrideTemplate(MdInputOptionalAttributeController, template)
         .createAsync(MdInputOptionalAttributeController)
-        .then((fixture: ComponentFixture) => {
+        .then((fixture) => {
           fakeAsync(() => {
             fixture.detectChanges();
 
@@ -276,14 +276,14 @@ export function main() {
             expect(el.getAttribute('autocomplete')).toEqual('');
           })();
         });
-    }));
+    });
 
-    it('supports the autoComplete attribute as an unbound value attribute', injectAsync([], () => {
+    it('supports the autoComplete attribute as an unbound value attribute', () => {
       var template = '<md-input autoComplete="name"></md-input>';
 
       return builder.overrideTemplate(MdInputOptionalAttributeController, template)
         .createAsync(MdInputOptionalAttributeController)
-        .then((fixture: ComponentFixture) => {
+        .then((fixture) => {
           fakeAsync(() => {
             fixture.detectChanges();
 
@@ -293,14 +293,14 @@ export function main() {
             expect(el.getAttribute('autocomplete')).toEqual('name');
           })();
         });
-    }));
+    });
 
-    it('supports the autoFocus attribute', injectAsync([], () => {
+    it('supports the autoFocus attribute', () => {
       var template = '<md-input [autoFocus]="autoFocus"></md-input>';
 
       return builder.overrideTemplate(MdInputOptionalAttributeController, template)
         .createAsync(MdInputOptionalAttributeController)
-        .then((fixture: ComponentFixture) => {
+        .then((fixture) => {
           fakeAsync(() => {
             fixture.detectChanges();
 
@@ -314,14 +314,14 @@ export function main() {
             expect(el.getAttribute('autofocus')).toEqual('');
           })();
         });
-    }));
+    });
 
-    it('supports the autoFocus attribute as an unbound attribute', injectAsync([], () => {
+    it('supports the autoFocus attribute as an unbound attribute', () => {
       var template = '<md-input autoFocus></md-input>';
 
       return builder.overrideTemplate(MdInputOptionalAttributeController, template)
         .createAsync(MdInputOptionalAttributeController)
-        .then((fixture: ComponentFixture) => {
+        .then((fixture) => {
           fakeAsync(() => {
             fixture.detectChanges();
 
@@ -331,14 +331,14 @@ export function main() {
             expect(el.getAttribute('autofocus')).toEqual('');
           })();
         });
-    }));
+    });
 
-    it('supports the disabled attribute', injectAsync([], () => {
+    it('supports the disabled attribute', () => {
       var template = '<md-input [disabled]="disabled"></md-input>';
 
       return builder.overrideTemplate(MdInputOptionalAttributeController, template)
         .createAsync(MdInputOptionalAttributeController)
-        .then((fixture: ComponentFixture) => {
+        .then((fixture) => {
           fakeAsync(() => {
             fixture.componentInstance.disabled = false;
             fixture.detectChanges();
@@ -353,14 +353,14 @@ export function main() {
             expect(el.getAttribute('disabled')).toEqual('');
           })();
         });
-    }));
+    });
 
-    it('supports the disabled attribute as an unbound attribute', injectAsync([], () => {
+    it('supports the disabled attribute as an unbound attribute', () => {
       var template = '<md-input disabled></md-input>';
 
       return builder.overrideTemplate(MdInputOptionalAttributeController, template)
         .createAsync(MdInputOptionalAttributeController)
-        .then((fixture: ComponentFixture) => {
+        .then((fixture) => {
           fakeAsync(() => {
             fixture.detectChanges();
 
@@ -370,14 +370,14 @@ export function main() {
             expect(el.getAttribute('disabled')).toEqual('');
           })();
         });
-    }));
+    });
 
-    it('supports the list attribute', injectAsync([], () => {
+    it('supports the list attribute', () => {
       var template = '<md-input [list]="list"></md-input>';
 
       return builder.overrideTemplate(MdInputOptionalAttributeController, template)
         .createAsync(MdInputOptionalAttributeController)
-        .then((fixture: ComponentFixture) => {
+        .then((fixture) => {
           fakeAsync(() => {
             fixture.componentInstance.disabled = false;
             fixture.detectChanges();
@@ -392,14 +392,14 @@ export function main() {
             expect(el.getAttribute('list')).toEqual('datalist-id');
           })();
         });
-    }));
+    });
 
-    it('supports the max attribute', injectAsync([], () => {
+    it('supports the max attribute', () => {
       var template = '<md-input [max]="max"></md-input>';
 
       return builder.overrideTemplate(MdInputOptionalAttributeController, template)
         .createAsync(MdInputOptionalAttributeController)
-        .then((fixture: ComponentFixture) => {
+        .then((fixture) => {
           fakeAsync(() => {
             fixture.componentInstance.disabled = false;
             fixture.detectChanges();
@@ -418,14 +418,14 @@ export function main() {
             expect(el.getAttribute('max')).toEqual('2000-01-02');
           })();
         });
-    }));
+    });
 
-    it('supports the min attribute', injectAsync([], () => {
+    it('supports the min attribute', () => {
       var template = '<md-input [min]="min"></md-input>';
 
       return builder.overrideTemplate(MdInputOptionalAttributeController, template)
         .createAsync(MdInputOptionalAttributeController)
-        .then((fixture: ComponentFixture) => {
+        .then((fixture) => {
           fakeAsync(() => {
             fixture.componentInstance.disabled = false;
             fixture.detectChanges();
@@ -444,14 +444,14 @@ export function main() {
             expect(el.getAttribute('min')).toEqual('2000-01-02');
           })();
         });
-    }));
+    });
 
-    it('supports the readOnly attribute', injectAsync([], () => {
+    it('supports the readOnly attribute', () => {
       var template = '<md-input [readOnly]="readOnly"></md-input>';
 
       return builder.overrideTemplate(MdInputOptionalAttributeController, template)
         .createAsync(MdInputOptionalAttributeController)
-        .then((fixture: ComponentFixture) => {
+        .then((fixture) => {
           fakeAsync(() => {
             fixture.detectChanges();
 
@@ -465,14 +465,14 @@ export function main() {
             expect(el.getAttribute('readonly')).toEqual('');
           })();
         });
-    }));
+    });
 
-    it('supports the readOnly attribute as an unbound attribute', injectAsync([], () => {
+    it('supports the readOnly attribute as an unbound attribute', () => {
       var template = '<md-input readOnly></md-input>';
 
       return builder.overrideTemplate(MdInputOptionalAttributeController, template)
         .createAsync(MdInputOptionalAttributeController)
-        .then((fixture: ComponentFixture) => {
+        .then((fixture) => {
           fakeAsync(() => {
             fixture.detectChanges();
 
@@ -482,14 +482,14 @@ export function main() {
             expect(el.getAttribute('readonly')).toEqual('');
           })();
         });
-    }));
+    });
 
-    it('supports the required attribute', injectAsync([], () => {
+    it('supports the required attribute', () => {
       var template = '<md-input [required]="required"></md-input>';
 
       return builder.overrideTemplate(MdInputOptionalAttributeController, template)
         .createAsync(MdInputOptionalAttributeController)
-        .then((fixture: ComponentFixture) => {
+        .then((fixture) => {
           fakeAsync(() => {
             fixture.detectChanges();
 
@@ -503,14 +503,14 @@ export function main() {
             expect(el.getAttribute('required')).toEqual('');
           })();
         });
-    }));
+    });
 
-    it('supports the required attribute as an unbound attribute', injectAsync([], () => {
+    it('supports the required attribute as an unbound attribute', () => {
       var template = '<md-input required></md-input>';
 
       return builder.overrideTemplate(MdInputOptionalAttributeController, template)
         .createAsync(MdInputOptionalAttributeController)
-        .then((fixture: ComponentFixture) => {
+        .then((fixture) => {
           fakeAsync(() => {
             fixture.detectChanges();
 
@@ -520,14 +520,14 @@ export function main() {
             expect(el.getAttribute('required')).toEqual('');
           })();
         });
-    }));
+    });
 
-    it('supports the spellCheck attribute', injectAsync([], () => {
+    it('supports the spellCheck attribute', () => {
       var template = '<md-input [spellCheck]="spellCheck"></md-input>';
 
       return builder.overrideTemplate(MdInputOptionalAttributeController, template)
         .createAsync(MdInputOptionalAttributeController)
-        .then((fixture: ComponentFixture) => {
+        .then((fixture) => {
           fakeAsync(() => {
             fixture.detectChanges();
 
@@ -541,14 +541,14 @@ export function main() {
             expect(el.getAttribute('spellcheck')).toEqual('true');
           })();
         });
-    }));
+    });
 
-    it('supports the spellCheck attribute as an unbound attribute', injectAsync([], () => {
+    it('supports the spellCheck attribute as an unbound attribute', () => {
       var template = '<md-input spellCheck></md-input>';
 
       return builder.overrideTemplate(MdInputOptionalAttributeController, template)
         .createAsync(MdInputOptionalAttributeController)
-        .then((fixture: ComponentFixture) => {
+        .then((fixture) => {
           fakeAsync(() => {
             fixture.detectChanges();
 
@@ -558,14 +558,14 @@ export function main() {
             expect(el.getAttribute('spellcheck')).toEqual('true');
           })();
         });
-    }));
+    });
 
-    it('supports the step attribute', injectAsync([], () => {
+    it('supports the step attribute', () => {
       var template = '<md-input [step]="step"></md-input>';
 
       return builder.overrideTemplate(MdInputOptionalAttributeController, template)
         .createAsync(MdInputOptionalAttributeController)
-        .then((fixture: ComponentFixture) => {
+        .then((fixture) => {
           fakeAsync(() => {
             fixture.detectChanges();
 
@@ -579,14 +579,14 @@ export function main() {
             expect(el.getAttribute('step')).toEqual('0.5');
           })();
         });
-    }));
+    });
 
-    it('supports the tabIndex attribute', injectAsync([], () => {
+    it('supports the tabIndex attribute', () => {
       var template = '<md-input [tabIndex]="tabIndex"></md-input>';
 
       return builder.overrideTemplate(MdInputOptionalAttributeController, template)
         .createAsync(MdInputOptionalAttributeController)
-        .then((fixture: ComponentFixture) => {
+        .then((fixture) => {
           fakeAsync(() => {
             fixture.detectChanges();
 
@@ -600,7 +600,7 @@ export function main() {
             expect(el.getAttribute('tabindex')).toEqual('1');
           })();
         });
-    }));
+    });
   });
 }