From a1178386b423398366b140299928646fbe51320d Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sat, 17 Dec 2016 00:46:18 +0100
Subject: [PATCH 1/5] refactor: change the toolkit directive prefixes and
 remove Md prefix from toolkit classes

Renames the the component toolkit to use the `cdk-` prefix, in addition to removing the `Md` prefix from classes associated with the toolkit.
The following CSS classes have been renamed as well:

* `md-global-overlay-wrapper` -> `cdk-global-overlay-wrapper`
* `md-overlay-container` -> `cdk-overlay-container`
* `md-overlay-pane` -> `cdk-overlay-pane`
* `md-overlay-backdrop-showing` -> `cdk-overlay-backdrop-showing`
* `md-overlay-dark-backdrop` -> `cdk-overlay-dark-backdrop`
* `md-overlay-backdrop` -> `cdk-overlay-backdrop`
* `md-visually-hidden` -> `cdk-visually-hidden`
---
 e2e/components/dialog/dialog.e2e.ts           |  2 +-
 e2e/components/menu/menu-page.ts              |  2 +-
 .../button-toggle/button-toggle-demo.ts       |  4 +--
 .../live-announcer/live-announcer-demo.ts     |  4 +--
 src/demo-app/overlay/overlay-demo.html        | 10 +++----
 src/demo-app/overlay/overlay-demo.ts          |  2 +-
 src/demo-app/platform/platform-demo.ts        |  4 +--
 src/demo-app/portal/portal-demo.html          |  6 ++--
 src/demo-app/projection/projection-demo.ts    |  2 +-
 src/lib/button-toggle/button-toggle.html      |  2 +-
 src/lib/button-toggle/button-toggle.ts        |  6 ++--
 src/lib/button/button.scss                    |  4 +--
 src/lib/card/card.scss                        |  2 +-
 src/lib/checkbox/checkbox.html                |  2 +-
 src/lib/chips/chip.ts                         |  4 +--
 src/lib/core/_core.scss                       |  4 +--
 src/lib/core/a11y/README.md                   |  8 +++---
 src/lib/core/a11y/_a11y.scss                  |  6 ++--
 src/lib/core/a11y/focus-trap.spec.ts          | 20 ++++++-------
 src/lib/core/a11y/focus-trap.ts               |  6 ++--
 src/lib/core/a11y/index.ts                    |  4 +--
 .../core/a11y/interactivity-checker.spec.ts   | 16 +++++------
 src/lib/core/a11y/interactivity-checker.ts    |  4 +--
 src/lib/core/a11y/list-key-manager.ts         |  8 +++---
 src/lib/core/a11y/live-announcer.spec.ts      | 16 +++++------
 src/lib/core/a11y/live-announcer.ts           |  6 ++--
 .../unique-selection-dispatcher.ts            |  8 +++---
 src/lib/core/core.ts                          |  8 +++---
 .../{MdGestureConfig.ts => gesture-config.ts} |  2 +-
 src/lib/core/overlay/_overlay.scss            | 28 ++++++++-----------
 src/lib/core/overlay/overlay-container.ts     |  4 +--
 .../core/overlay/overlay-directives.spec.ts   | 12 ++++----
 src/lib/core/overlay/overlay-directives.ts    |  8 +++---
 src/lib/core/overlay/overlay-ref.ts           |  6 ++--
 src/lib/core/overlay/overlay-state.ts         |  2 +-
 src/lib/core/overlay/overlay.spec.ts          | 18 ++++++------
 src/lib/core/overlay/overlay.ts               |  4 +--
 .../position/global-position-strategy.spec.ts |  4 +--
 .../position/global-position-strategy.ts      |  2 +-
 src/lib/core/platform/index.ts                |  4 +--
 src/lib/core/platform/platform.ts             |  2 +-
 src/lib/core/portal/README.md                 | 12 ++++----
 src/lib/core/portal/portal-directives.ts      | 10 +++----
 src/lib/core/portal/portal-errors.ts          | 12 ++++----
 src/lib/core/portal/portal.spec.ts            |  8 +++---
 src/lib/core/portal/portal.ts                 | 26 ++++++++---------
 src/lib/core/projection/projection.spec.ts    |  8 +++---
 src/lib/core/projection/projection.ts         |  6 ++--
 src/lib/dialog/dialog-container.html          |  6 ++--
 src/lib/dialog/dialog.scss                    |  2 +-
 src/lib/dialog/dialog.spec.ts                 | 16 +++++------
 src/lib/dialog/index.ts                       |  4 +--
 src/lib/input/input-container.spec.ts         |  6 ++--
 src/lib/menu/menu-item.ts                     |  4 +--
 src/lib/menu/menu-trigger.ts                  |  2 +-
 src/lib/menu/menu.scss                        |  2 +-
 src/lib/menu/menu.spec.ts                     |  2 +-
 src/lib/radio/radio.html                      |  2 +-
 src/lib/radio/radio.ts                        |  6 ++--
 src/lib/select/select.html                    |  6 ++--
 src/lib/select/select.scss                    |  4 +--
 src/lib/select/select.spec.ts                 | 12 ++++----
 src/lib/sidenav/sidenav.html                  |  4 +--
 src/lib/sidenav/sidenav.scss                  |  2 +-
 src/lib/slide-toggle/slide-toggle.html        |  2 +-
 src/lib/slide-toggle/slide-toggle.scss        |  4 +--
 src/lib/slide-toggle/slide-toggle.ts          |  4 +--
 src/lib/slider/slider.ts                      |  6 ++--
 src/lib/slider/test-gesture-config.ts         |  6 ++--
 src/lib/snack-bar/snack-bar-container.html    |  2 +-
 src/lib/snack-bar/snack-bar-container.scss    |  2 +-
 src/lib/snack-bar/snack-bar.spec.ts           |  8 +++---
 src/lib/snack-bar/snack-bar.ts                |  6 ++--
 src/lib/tabs/tab-body.html                    |  2 +-
 src/lib/tabs/tab-group.html                   |  2 +-
 src/lib/tooltip/tooltip.scss                  |  2 +-
 76 files changed, 236 insertions(+), 238 deletions(-)
 rename src/lib/core/gestures/{MdGestureConfig.ts => gesture-config.ts} (97%)

diff --git a/e2e/components/dialog/dialog.e2e.ts b/e2e/components/dialog/dialog.e2e.ts
index 4af19720d6cb..74f1b397c1aa 100644
--- a/e2e/components/dialog/dialog.e2e.ts
+++ b/e2e/components/dialog/dialog.e2e.ts
@@ -91,7 +91,7 @@ describe('dialog', () => {
     browser.actions()
       // We need to move the cursor to the top left so
       // the dialog doesn't receive the click accidentally.
-      .mouseMove(element(by.css('.md-overlay-backdrop')).getWebElement(), { x: 0, y: 0 })
+      .mouseMove(element(by.css('.cdk-overlay-backdrop')).getWebElement(), { x: 0, y: 0 })
       .click()
       .perform();
   }
diff --git a/e2e/components/menu/menu-page.ts b/e2e/components/menu/menu-page.ts
index 270f7900a75f..7100f0d494f1 100644
--- a/e2e/components/menu/menu-page.ts
+++ b/e2e/components/menu/menu-page.ts
@@ -14,7 +14,7 @@ export class MenuPage {
 
   triggerTwo() { return element(by.id('trigger-two')); }
 
-  backdrop() { return element(by.css('.md-overlay-backdrop')); }
+  backdrop() { return element(by.css('.cdk-overlay-backdrop')); }
 
   items(index: number) { return element.all(by.css('[md-menu-item]')).get(index); }
 
diff --git a/src/demo-app/button-toggle/button-toggle-demo.ts b/src/demo-app/button-toggle/button-toggle-demo.ts
index bd667a95113c..67726b664518 100644
--- a/src/demo-app/button-toggle/button-toggle-demo.ts
+++ b/src/demo-app/button-toggle/button-toggle-demo.ts
@@ -1,11 +1,11 @@
 import {Component} from '@angular/core';
-import {MdUniqueSelectionDispatcher} from '@angular/material';
+import {UniqueSelectionDispatcher} from '@angular/material';
 
 @Component({
   moduleId: module.id,
   selector: 'button-toggle-demo',
   templateUrl: 'button-toggle-demo.html',
-  providers: [MdUniqueSelectionDispatcher],
+  providers: [UniqueSelectionDispatcher],
 })
 export class ButtonToggleDemo {
   isVertical = false;
diff --git a/src/demo-app/live-announcer/live-announcer-demo.ts b/src/demo-app/live-announcer/live-announcer-demo.ts
index d0538ad3ed01..bc43d069fcd2 100644
--- a/src/demo-app/live-announcer/live-announcer-demo.ts
+++ b/src/demo-app/live-announcer/live-announcer-demo.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MdLiveAnnouncer} from '@angular/material';
+import {LiveAnnouncer} from '@angular/material';
 
 @Component({
   moduleId: module.id,
@@ -8,7 +8,7 @@ import {MdLiveAnnouncer} from '@angular/material';
 })
 export class LiveAnnouncerDemo {
 
-  constructor(private live: MdLiveAnnouncer) {}
+  constructor(private live: LiveAnnouncer) {}
 
   announceText(message: string) {
     this.live.announce(message);
diff --git a/src/demo-app/overlay/overlay-demo.html b/src/demo-app/overlay/overlay-demo.html
index 83ac9bf82a26..91af08845104 100644
--- a/src/demo-app/overlay/overlay-demo.html
+++ b/src/demo-app/overlay/overlay-demo.html
@@ -6,16 +6,16 @@
   Pasta 2
 </button>
 
-<button overlay-origin (click)="openSpaghettiPanel()">
+<button cdk-overlay-origin (click)="openSpaghettiPanel()">
   Pasta 3
 </button>
 
 
-<button overlay-origin #trigger="overlayOrigin" (click)="isMenuOpen = !isMenuOpen">
+<button cdk-overlay-origin #trigger="cdkOverlayOrigin" (click)="isMenuOpen = !isMenuOpen">
   Open menu
 </button>
 
-<template connected-overlay [origin]="trigger" [width]="500" hasBackdrop [open]="isMenuOpen"
+<template cdk-connected-overlay [origin]="trigger" [width]="500" hasBackdrop [open]="isMenuOpen"
   (backdropClick)="isMenuOpen=false">
   <div style="background-color: mediumpurple" >
     This is the menu panel.
@@ -23,8 +23,8 @@
 </template>
 
 <!-- Template to load into an overlay. -->
-<template portal>
+<template cdk-portal>
   <p class="demo-fusilli"> Fusilli </p>
 </template>
 
-<button (click)="openPanelWithBackdrop()">Backdrop panel</button>
\ No newline at end of file
+<button (click)="openPanelWithBackdrop()">Backdrop panel</button>
diff --git a/src/demo-app/overlay/overlay-demo.ts b/src/demo-app/overlay/overlay-demo.ts
index d19173fee58c..c8f3708658a2 100644
--- a/src/demo-app/overlay/overlay-demo.ts
+++ b/src/demo-app/overlay/overlay-demo.ts
@@ -82,7 +82,7 @@ export class OverlayDemo {
       .global()
       .centerHorizontally();
     config.hasBackdrop = true;
-    config.backdropClass = 'md-overlay-transparent-backdrop';
+    config.backdropClass = 'cdk-overlay-transparent-backdrop';
 
     let overlayRef = this.overlay.create(config);
     overlayRef.attach(this.templatePortals.first);
diff --git a/src/demo-app/platform/platform-demo.ts b/src/demo-app/platform/platform-demo.ts
index 227b0d135aea..d96230627e95 100644
--- a/src/demo-app/platform/platform-demo.ts
+++ b/src/demo-app/platform/platform-demo.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MdPlatform, getSupportedInputTypes} from '@angular/material';
+import {Platform, getSupportedInputTypes} from '@angular/material';
 
 
 @Component({
@@ -10,5 +10,5 @@ import {MdPlatform, getSupportedInputTypes} from '@angular/material';
 export class PlatformDemo {
   supportedInputTypes = getSupportedInputTypes();
 
-  constructor(public platform: MdPlatform) {}
+  constructor(public platform: Platform) {}
 }
diff --git a/src/demo-app/portal/portal-demo.html b/src/demo-app/portal/portal-demo.html
index bb5e97f16309..95d29a441deb 100644
--- a/src/demo-app/portal/portal-demo.html
+++ b/src/demo-app/portal/portal-demo.html
@@ -1,6 +1,6 @@
 <h2> The portal host is here: </h2>
 <div class="demo-portal-host">
-  <template [portalHost]="selectedPortal"></template>
+  <template [cdkPortalHost]="selectedPortal"></template>
 </div>
 
 <button type="button" (click)="selectedPortal = programmingJoke">
@@ -20,12 +20,12 @@ <h2> The portal host is here: </h2>
     referring to something *in* the template (such as #item in ngFor). As such, the component
     has to use @ViewChild / @ViewChildren to get these references.
     See https://github.com/angular/angular/issues/7158 -->
-<template portal>
+<template cdk-portal>
   <p> - Why don't jokes work in octal?</p>
   <p> - Because 7 10 11.</p>
 </template>
 
-<div *portal>
+<div *cdk-portal>
  <p> - Did you hear about this year's Fibonacci Conference? </p>
  <p> - It's going to be as big as the last two put together. </p>
 </div>
diff --git a/src/demo-app/projection/projection-demo.ts b/src/demo-app/projection/projection-demo.ts
index 1749090dee53..70d9d6fdae04 100644
--- a/src/demo-app/projection/projection-demo.ts
+++ b/src/demo-app/projection/projection-demo.ts
@@ -7,7 +7,7 @@ import {DomProjectionHost, DomProjection} from '@angular/material';
   template: `
     <div class="demo-outer {{cssClass}}">
       Before
-      <dom-projection-host><ng-content></ng-content></dom-projection-host>
+      <cdk-dom-projection-host><ng-content></ng-content></cdk-dom-projection-host>
       After
     </div>
   `,
diff --git a/src/lib/button-toggle/button-toggle.html b/src/lib/button-toggle/button-toggle.html
index a4945b9ca8c5..60cccfd2e44a 100644
--- a/src/lib/button-toggle/button-toggle.html
+++ b/src/lib/button-toggle/button-toggle.html
@@ -1,5 +1,5 @@
 <label [attr.for]="inputId" class="md-button-toggle-label">
-  <input #input class="md-button-toggle-input md-visually-hidden"
+  <input #input class="md-button-toggle-input cdk-visually-hidden"
          [type]="_type"
          [id]="inputId"
          [checked]="checked"
diff --git a/src/lib/button-toggle/button-toggle.ts b/src/lib/button-toggle/button-toggle.ts
index b74de147c58f..9f5cdf20efb7 100644
--- a/src/lib/button-toggle/button-toggle.ts
+++ b/src/lib/button-toggle/button-toggle.ts
@@ -21,7 +21,7 @@ import {
 import {NG_VALUE_ACCESSOR, ControlValueAccessor, FormsModule} from '@angular/forms';
 import {Observable} from 'rxjs/Observable';
 import {
-  MdUniqueSelectionDispatcher,
+  UniqueSelectionDispatcher,
   coerceBooleanProperty,
   DefaultStyleCompatibilityModeModule,
 } from '../core';
@@ -298,7 +298,7 @@ export class MdButtonToggle implements OnInit {
 
   constructor(@Optional() toggleGroup: MdButtonToggleGroup,
               @Optional() toggleGroupMultiple: MdButtonToggleGroupMultiple,
-              public buttonToggleDispatcher: MdUniqueSelectionDispatcher,
+              public buttonToggleDispatcher: UniqueSelectionDispatcher,
               private _renderer: Renderer) {
     this.buttonToggleGroup = toggleGroup;
 
@@ -445,7 +445,7 @@ export class MdButtonToggleModule {
   static forRoot(): ModuleWithProviders {
     return {
       ngModule: MdButtonToggleModule,
-      providers: [MdUniqueSelectionDispatcher]
+      providers: [UniqueSelectionDispatcher]
     };
   }
 }
diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss
index eb6c245af397..ab8b119a55c4 100644
--- a/src/lib/button/button.scss
+++ b/src/lib/button/button.scss
@@ -81,7 +81,7 @@
   pointer-events: none;
   opacity: 0;
 
-  @include md-high-contrast {
+  @include cdk-high-contrast {
     // Note that IE will render this in the same way, no
     // matter whether the theme is light or dark. This helps
     // with the readability of focused buttons.
@@ -98,7 +98,7 @@
 }
 
 // Add an outline to make it more visible in high contrast mode.
-@include md-high-contrast {
+@include cdk-high-contrast {
   [md-button], [md-raised-button], [md-icon-button], [md-fab], [md-mini-fab] {
     outline: solid 1px;
   }
diff --git a/src/lib/card/card.scss b/src/lib/card/card.scss
index be1d355daa72..5eb975302435 100644
--- a/src/lib/card/card.scss
+++ b/src/lib/card/card.scss
@@ -17,7 +17,7 @@ md-card {
   border-radius: $md-card-border-radius;
   font-family: $md-font-family;
 
-  @include md-high-contrast {
+  @include cdk-high-contrast {
     outline: solid 1px;
   }
 }
diff --git a/src/lib/checkbox/checkbox.html b/src/lib/checkbox/checkbox.html
index 5fcbe07bd9cf..3196048f4992 100644
--- a/src/lib/checkbox/checkbox.html
+++ b/src/lib/checkbox/checkbox.html
@@ -1,7 +1,7 @@
 <label class="md-checkbox-layout">
   <div class="md-checkbox-inner-container">
     <input #input
-           class="md-checkbox-input md-visually-hidden" type="checkbox"
+           class="md-checkbox-input cdk-visually-hidden" type="checkbox"
            [id]="inputId"
            [required]="required"
            [checked]="checked"
diff --git a/src/lib/chips/chip.ts b/src/lib/chips/chip.ts
index 81cd0f48914d..40f7df92ef3e 100644
--- a/src/lib/chips/chip.ts
+++ b/src/lib/chips/chip.ts
@@ -9,7 +9,7 @@ import {
   Renderer
 } from '@angular/core';
 
-import {MdFocusable} from '../core/a11y/list-key-manager';
+import {Focusable} from '../core/a11y/list-key-manager';
 import {coerceBooleanProperty} from '../core/coercion/boolean-property';
 
 export interface MdChipEvent {
@@ -32,7 +32,7 @@ export interface MdChipEvent {
     '(click)': '_handleClick($event)'
   }
 })
-export class MdChip implements MdFocusable, OnInit, OnDestroy {
+export class MdChip implements Focusable, OnInit, OnDestroy {
 
   /* Whether or not the chip is disabled. */
   protected _disabled: boolean = null;
diff --git a/src/lib/core/_core.scss b/src/lib/core/_core.scss
index 085bd883aed8..c573e0f44438 100644
--- a/src/lib/core/_core.scss
+++ b/src/lib/core/_core.scss
@@ -17,8 +17,8 @@
   }
 
   @include md-ripple();
-  @include md-a11y();
-  @include md-overlay();
+  @include cdk-a11y();
+  @include cdk-overlay();
 }
 
 // Mixin that renders all of the core styles that depend on the theme.
diff --git a/src/lib/core/a11y/README.md b/src/lib/core/a11y/README.md
index 9c2e99a6e441..a98419c31666 100644
--- a/src/lib/core/a11y/README.md
+++ b/src/lib/core/a11y/README.md
@@ -1,5 +1,5 @@
-# MdLiveAnnouncer
-`MdLiveAnnouncer` is a service, which announces messages to several screenreaders.
+# LiveAnnouncer
+`LiveAnnouncer` is a service, which announces messages to several screenreaders.
 
 ### Methods
 
@@ -12,11 +12,11 @@ The service can be injected in a component.
 ```ts
 @Component({
   selector: 'my-component'
-  providers: [MdLiveAnnouncer]
+  providers: [LiveAnnouncer]
 })
 export class MyComponent {
 
- constructor(live: MdLiveAnnouncer) {
+ constructor(live: LiveAnnouncer) {
    live.announce("Hey Google");
  }
 
diff --git a/src/lib/core/a11y/_a11y.scss b/src/lib/core/a11y/_a11y.scss
index 1b6e98652b78..5070c8d5a19e 100644
--- a/src/lib/core/a11y/_a11y.scss
+++ b/src/lib/core/a11y/_a11y.scss
@@ -1,5 +1,5 @@
-@mixin md-a11y {
-  .md-visually-hidden {
+@mixin cdk-a11y {
+  .cdk-visually-hidden {
     border: 0;
     clip: rect(0 0 0 0);
     height: 1px;
@@ -17,7 +17,7 @@
  * to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
  * attribute, however Chrome handles high contrast differently.
  */
-@mixin md-high-contrast {
+@mixin cdk-high-contrast {
   @media screen and (-ms-high-contrast: active) {
     @content;
   }
diff --git a/src/lib/core/a11y/focus-trap.spec.ts b/src/lib/core/a11y/focus-trap.spec.ts
index 86357817dfe2..37889b2f226c 100644
--- a/src/lib/core/a11y/focus-trap.spec.ts
+++ b/src/lib/core/a11y/focus-trap.spec.ts
@@ -3,7 +3,7 @@ import {By} from '@angular/platform-browser';
 import {Component} from '@angular/core';
 import {FocusTrap} from './focus-trap';
 import {InteractivityChecker} from './interactivity-checker';
-import {MdPlatform} from '../platform/platform';
+import {Platform} from '../platform/platform';
 
 
 describe('FocusTrap', () => {
@@ -12,12 +12,12 @@ describe('FocusTrap', () => {
 
     let fixture: ComponentFixture<FocusTrapTestApp>;
     let focusTrapInstance: FocusTrap;
-    let platform: MdPlatform = new MdPlatform();
+    let platform: Platform = new Platform();
 
     beforeEach(async(() => {
       TestBed.configureTestingModule({
         declarations: [FocusTrap, FocusTrapTestApp],
-        providers: [InteractivityChecker, MdPlatform]
+        providers: [InteractivityChecker, Platform]
       });
 
       TestBed.compileComponents();
@@ -57,7 +57,7 @@ describe('FocusTrap', () => {
     beforeEach(async(() => {
       TestBed.configureTestingModule({
         declarations: [FocusTrap, FocusTrapTargetTestApp],
-        providers: [InteractivityChecker, MdPlatform]
+        providers: [InteractivityChecker, Platform]
       });
 
       TestBed.compileComponents();
@@ -87,10 +87,10 @@ describe('FocusTrap', () => {
 
 @Component({
   template: `
-    <focus-trap>
+    <cdk-focus-trap>
       <input>
       <button>SAVE</button>
-    </focus-trap>
+    </cdk-focus-trap>
     `
 })
 class FocusTrapTestApp { }
@@ -98,12 +98,12 @@ class FocusTrapTestApp { }
 
 @Component({
   template: `
-    <focus-trap>
+    <cdk-focus-trap>
       <input>
-      <button id="last" md-focus-end></button>
-      <button id="first" md-focus-start>SAVE</button>
+      <button id="last" cdk-focus-end></button>
+      <button id="first" cdk-focus-start>SAVE</button>
       <input>
-    </focus-trap>
+    </cdk-focus-trap>
     `
 })
 class FocusTrapTargetTestApp { }
diff --git a/src/lib/core/a11y/focus-trap.ts b/src/lib/core/a11y/focus-trap.ts
index cc52a1a8fcf8..a767e872b9cf 100644
--- a/src/lib/core/a11y/focus-trap.ts
+++ b/src/lib/core/a11y/focus-trap.ts
@@ -13,7 +13,7 @@ import {coerceBooleanProperty} from '../coercion/boolean-property';
  */
 @Component({
   moduleId: module.id,
-  selector: 'focus-trap',
+  selector: 'cdk-focus-trap',
   templateUrl: 'focus-trap.html',
   encapsulation: ViewEncapsulation.None,
 })
@@ -51,7 +51,7 @@ export class FocusTrap {
   /** Focuses the first tabbable element within the focus trap region. */
   focusFirstTabbableElement() {
     let rootElement = this.trappedContent.nativeElement;
-    let redirectToElement = rootElement.querySelector('[md-focus-start]') as HTMLElement ||
+    let redirectToElement = rootElement.querySelector('[cdk-focus-start]') as HTMLElement ||
                             this._getFirstTabbableElement(rootElement);
 
     if (redirectToElement) {
@@ -62,7 +62,7 @@ export class FocusTrap {
   /** Focuses the last tabbable element within the focus trap region. */
   focusLastTabbableElement() {
     let rootElement = this.trappedContent.nativeElement;
-    let focusTargets = rootElement.querySelectorAll('[md-focus-end]');
+    let focusTargets = rootElement.querySelectorAll('[cdk-focus-end]');
     let redirectToElement: HTMLElement = null;
 
     if (focusTargets.length) {
diff --git a/src/lib/core/a11y/index.ts b/src/lib/core/a11y/index.ts
index ff1d094c69e5..14fb20375323 100644
--- a/src/lib/core/a11y/index.ts
+++ b/src/lib/core/a11y/index.ts
@@ -1,11 +1,11 @@
 import {NgModule, ModuleWithProviders} from '@angular/core';
 import {FocusTrap} from './focus-trap';
-import {MdLiveAnnouncer} from './live-announcer';
+import {LiveAnnouncer} from './live-announcer';
 import {InteractivityChecker} from './interactivity-checker';
 import {CommonModule} from '@angular/common';
 import {PlatformModule} from '../platform/index';
 
-export const A11Y_PROVIDERS = [MdLiveAnnouncer, InteractivityChecker];
+export const A11Y_PROVIDERS = [LiveAnnouncer, InteractivityChecker];
 
 @NgModule({
   imports: [CommonModule, PlatformModule],
diff --git a/src/lib/core/a11y/interactivity-checker.spec.ts b/src/lib/core/a11y/interactivity-checker.spec.ts
index a722ec8bdd5e..5fefb4b0a800 100644
--- a/src/lib/core/a11y/interactivity-checker.spec.ts
+++ b/src/lib/core/a11y/interactivity-checker.spec.ts
@@ -1,10 +1,10 @@
 import {InteractivityChecker} from './interactivity-checker';
-import {MdPlatform} from '../platform/platform';
+import {Platform} from '../platform/platform';
 
 describe('InteractivityChecker', () => {
   let testContainerElement: HTMLElement;
   let checker: InteractivityChecker;
-  let platform: MdPlatform = new MdPlatform();
+  let platform: Platform = new Platform();
 
   beforeEach(() => {
     testContainerElement = document.createElement('div');
@@ -54,7 +54,7 @@ describe('InteractivityChecker', () => {
     it('should return false for the child of a `display: none` element', () => {
       testContainerElement.innerHTML =
         `<div style="display: none;">
-           <input> 
+           <input>
          </div>`;
       let input = testContainerElement.querySelector('input') as HTMLElement;
 
@@ -74,7 +74,7 @@ describe('InteractivityChecker', () => {
     it('should return false for the child of a `visibility: hidden` element', () => {
       testContainerElement.innerHTML =
         `<div style="visibility: hidden;">
-           <input> 
+           <input>
          </div>`;
       let input = testContainerElement.querySelector('input') as HTMLElement;
 
@@ -87,7 +87,7 @@ describe('InteractivityChecker', () => {
       testContainerElement.innerHTML =
         `<div style="visibility: hidden;">
            <div style="visibility: visible;">
-             <input> 
+             <input>
            </div>
          </div>`;
       let input = testContainerElement.querySelector('input') as HTMLElement;
@@ -155,7 +155,7 @@ describe('InteractivityChecker', () => {
     it('should return false for the child of a `display: none` element', () => {
       testContainerElement.innerHTML =
         `<div style="display: none;">
-           <input> 
+           <input>
          </div>`;
       let input = testContainerElement.querySelector('input') as HTMLElement;
 
@@ -175,7 +175,7 @@ describe('InteractivityChecker', () => {
     it('should return false for the child of a `visibility: hidden` element', () => {
       testContainerElement.innerHTML =
         `<div style="visibility: hidden;">
-           <input> 
+           <input>
          </div>`;
       let input = testContainerElement.querySelector('input') as HTMLElement;
 
@@ -188,7 +188,7 @@ describe('InteractivityChecker', () => {
       testContainerElement.innerHTML =
         `<div style="visibility: hidden;">
            <div style="visibility: visible;">
-             <input> 
+             <input>
            </div>
          </div>`;
       let input = testContainerElement.querySelector('input') as HTMLElement;
diff --git a/src/lib/core/a11y/interactivity-checker.ts b/src/lib/core/a11y/interactivity-checker.ts
index ed475d6f92e6..18e07be74309 100644
--- a/src/lib/core/a11y/interactivity-checker.ts
+++ b/src/lib/core/a11y/interactivity-checker.ts
@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {MdPlatform} from '../platform/platform';
+import {Platform} from '../platform/platform';
 
 /* The InteractivityChecker leans heavily on the ally.js accessibility utilities.
  * Methods like `isTabbable` are only covering specific edge-cases for the browsers which are
@@ -13,7 +13,7 @@ import {MdPlatform} from '../platform/platform';
 @Injectable()
 export class InteractivityChecker {
 
-  constructor(private _platform: MdPlatform) {}
+  constructor(private _platform: Platform) {}
 
   /** Gets whether an element is disabled. */
   isDisabled(element: HTMLElement) {
diff --git a/src/lib/core/a11y/list-key-manager.ts b/src/lib/core/a11y/list-key-manager.ts
index 9cca50160fa3..1f5d07b6c7d1 100644
--- a/src/lib/core/a11y/list-key-manager.ts
+++ b/src/lib/core/a11y/list-key-manager.ts
@@ -7,7 +7,7 @@ import {Subject} from 'rxjs/Subject';
  * This is the interface for focusable items (used by the ListKeyManager).
  * Each item must know how to focus itself and whether or not it is currently disabled.
  */
-export interface MdFocusable {
+export interface Focusable {
   focus(): void;
   disabled?: boolean;
 }
@@ -21,7 +21,7 @@ export class ListKeyManager {
   private _tabOut: Subject<any> = new Subject();
   private _wrap: boolean = false;
 
-  constructor(private _items: QueryList<MdFocusable>) {}
+  constructor(private _items: QueryList<Focusable>) {}
 
   /**
    * Turns on focus wrapping mode, which ensures that the focus will wrap to
@@ -121,7 +121,7 @@ export class ListKeyManager {
    * down the list until it finds an item that is not disabled, and it will wrap if it
    * encounters either end of the list.
    */
-  private _setWrapModeFocus(delta: number, items: MdFocusable[]): void {
+  private _setWrapModeFocus(delta: number, items: Focusable[]): void {
     // when focus would leave menu, wrap to beginning or end
     this._focusedItemIndex =
       (this._focusedItemIndex + delta + items.length) % items.length;
@@ -139,7 +139,7 @@ export class ListKeyManager {
    * continue to move down the list until it finds an item that is not disabled. If
    * it encounters either end of the list, it will stop and not wrap.
    */
-  private _setDefaultModeFocus(delta: number, items: MdFocusable[]): void {
+  private _setDefaultModeFocus(delta: number, items: Focusable[]): void {
     this._setFocusByIndex(this._focusedItemIndex + delta, delta, items);
   }
 
diff --git a/src/lib/core/a11y/live-announcer.spec.ts b/src/lib/core/a11y/live-announcer.spec.ts
index 2b0f958ee22d..7c9169af8761 100644
--- a/src/lib/core/a11y/live-announcer.spec.ts
+++ b/src/lib/core/a11y/live-announcer.spec.ts
@@ -1,21 +1,21 @@
 import {inject, fakeAsync, tick, ComponentFixture, TestBed} from '@angular/core/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
-import {MdLiveAnnouncer, LIVE_ANNOUNCER_ELEMENT_TOKEN} from './live-announcer';
+import {LiveAnnouncer, LIVE_ANNOUNCER_ELEMENT_TOKEN} from './live-announcer';
 
 
-describe('MdLiveAnnouncer', () => {
-  let announcer: MdLiveAnnouncer;
+describe('LiveAnnouncer', () => {
+  let announcer: LiveAnnouncer;
   let ariaLiveElement: Element;
   let fixture: ComponentFixture<TestApp>;
 
   describe('with default element', () => {
     beforeEach(() => TestBed.configureTestingModule({
       declarations: [TestApp],
-      providers: [MdLiveAnnouncer]
+      providers: [LiveAnnouncer]
     }));
 
-    beforeEach(fakeAsync(inject([MdLiveAnnouncer], (la: MdLiveAnnouncer) => {
+    beforeEach(fakeAsync(inject([LiveAnnouncer], (la: LiveAnnouncer) => {
       announcer = la;
       ariaLiveElement = getLiveElement();
       fixture = TestBed.createComponent(TestApp);
@@ -80,12 +80,12 @@ describe('MdLiveAnnouncer', () => {
         declarations: [TestApp],
         providers: [
           {provide: LIVE_ANNOUNCER_ELEMENT_TOKEN, useValue: customLiveElement},
-          MdLiveAnnouncer,
+          LiveAnnouncer,
         ],
       });
     });
 
-    beforeEach(inject([MdLiveAnnouncer], (la: MdLiveAnnouncer) => {
+    beforeEach(inject([LiveAnnouncer], (la: LiveAnnouncer) => {
         announcer = la;
         ariaLiveElement = getLiveElement();
       }));
@@ -109,7 +109,7 @@ function getLiveElement(): Element {
 
 @Component({template: `<button (click)="announceText('Test')">Announce</button>`})
 class TestApp {
-  constructor(public live: MdLiveAnnouncer) { };
+  constructor(public live: LiveAnnouncer) { };
 
   announceText(message: string) {
     this.live.announce(message);
diff --git a/src/lib/core/a11y/live-announcer.ts b/src/lib/core/a11y/live-announcer.ts
index ec7781396901..4f7b8827a327 100644
--- a/src/lib/core/a11y/live-announcer.ts
+++ b/src/lib/core/a11y/live-announcer.ts
@@ -5,12 +5,12 @@ import {
   Inject
 } from '@angular/core';
 
-export const LIVE_ANNOUNCER_ELEMENT_TOKEN  = new OpaqueToken('mdLiveAnnouncerElement');
+export const LIVE_ANNOUNCER_ELEMENT_TOKEN  = new OpaqueToken('liveAnnouncerElement');
 
 export type AriaLivePoliteness = 'off' | 'polite' | 'assertive';
 
 @Injectable()
-export class MdLiveAnnouncer {
+export class LiveAnnouncer {
 
   private _liveElement: Element;
 
@@ -50,7 +50,7 @@ export class MdLiveAnnouncer {
   private _createLiveElement(): Element {
     let liveEl = document.createElement('div');
 
-    liveEl.classList.add('md-visually-hidden');
+    liveEl.classList.add('cdk-visually-hidden');
     liveEl.setAttribute('aria-atomic', 'true');
     liveEl.setAttribute('aria-live', 'polite');
 
diff --git a/src/lib/core/coordination/unique-selection-dispatcher.ts b/src/lib/core/coordination/unique-selection-dispatcher.ts
index 1e6409a0d330..01738a76ff6a 100644
--- a/src/lib/core/coordination/unique-selection-dispatcher.ts
+++ b/src/lib/core/coordination/unique-selection-dispatcher.ts
@@ -2,7 +2,7 @@ import {Injectable} from '@angular/core';
 
 
 // Users of the Dispatcher never need to see this type, but TypeScript requires it to be exported.
-export type MdUniqueSelectionDispatcherListener = (id: string, name: string) => void;
+export type UniqueSelectionDispatcherListener = (id: string, name: string) => void;
 
 /**
  * Class to coordinate unique selection based on name.
@@ -14,8 +14,8 @@ export type MdUniqueSelectionDispatcherListener = (id: string, name: string) =>
  * less error-prone if they are simply passed through when the events occur.
  */
 @Injectable()
-export class MdUniqueSelectionDispatcher {
-  private _listeners: MdUniqueSelectionDispatcherListener[] = [];
+export class UniqueSelectionDispatcher {
+  private _listeners: UniqueSelectionDispatcherListener[] = [];
 
   /** Notify other items that selection for the given name has been set. */
   notify(id: string, name: string) {
@@ -25,7 +25,7 @@ export class MdUniqueSelectionDispatcher {
   }
 
   /** Listen for future changes to item selection. */
-  listen(listener: MdUniqueSelectionDispatcherListener) {
+  listen(listener: UniqueSelectionDispatcherListener) {
     this._listeners.push(listener);
   }
 }
diff --git a/src/lib/core/core.ts b/src/lib/core/core.ts
index 111d5915cd05..4f5d17ff58ee 100644
--- a/src/lib/core/core.ts
+++ b/src/lib/core/core.ts
@@ -46,7 +46,7 @@ export * from './overlay/position/connected-position-strategy';
 export * from './overlay/position/connected-position';
 
 // Gestures
-export {MdGestureConfig} from './gestures/MdGestureConfig';
+export {GestureConfig} from './gestures/gesture-config';
 
 // Ripple
 export {MdRipple, MdRippleModule} from './ripple/ripple';
@@ -54,7 +54,7 @@ export {MdRipple, MdRippleModule} from './ripple/ripple';
 // a11y
 export {
   AriaLivePoliteness,
-  MdLiveAnnouncer,
+  LiveAnnouncer,
   LIVE_ANNOUNCER_ELEMENT_TOKEN,
 } from './a11y/live-announcer';
 
@@ -65,8 +65,8 @@ export {isFakeMousedownFromScreenReader} from './a11y/fake-mousedown';
 export {A11yModule} from './a11y/index';
 
 export {
-  MdUniqueSelectionDispatcher,
-  MdUniqueSelectionDispatcherListener
+  UniqueSelectionDispatcher,
+  UniqueSelectionDispatcherListener
 } from './coordination/unique-selection-dispatcher';
 
 export {MdLineModule, MdLine, MdLineSetter} from './line/line';
diff --git a/src/lib/core/gestures/MdGestureConfig.ts b/src/lib/core/gestures/gesture-config.ts
similarity index 97%
rename from src/lib/core/gestures/MdGestureConfig.ts
rename to src/lib/core/gestures/gesture-config.ts
index be7651b7cdf5..63ad3fcd11d0 100644
--- a/src/lib/core/gestures/MdGestureConfig.ts
+++ b/src/lib/core/gestures/gesture-config.ts
@@ -3,7 +3,7 @@ import {HammerGestureConfig} from '@angular/platform-browser';
 
 /* Adjusts configuration of our gesture library, Hammer. */
 @Injectable()
-export class MdGestureConfig extends HammerGestureConfig {
+export class GestureConfig extends HammerGestureConfig {
 
   /* List of new event names to add to the gesture support list */
   events: string[] = [
diff --git a/src/lib/core/overlay/_overlay.scss b/src/lib/core/overlay/_overlay.scss
index 161d3ba53dc4..51a6d0ddaa10 100644
--- a/src/lib/core/overlay/_overlay.scss
+++ b/src/lib/core/overlay/_overlay.scss
@@ -3,12 +3,8 @@
 @import '../theming/theming';
 
 
-@mixin md-overlay() {
-  $md-dark-backdrop-color: md-color($md-grey, 900);
-
-  // TODO(jelbourn): change from the `md` prefix to something else for everything in the toolkit.
-
-  .md-overlay-container, .md-global-overlay-wrapper {
+@mixin cdk-overlay() {
+  .cdk-overlay-container, .cdk-global-overlay-wrapper {
     // Disable events from being captured on the overlay container.
     pointer-events: none;
 
@@ -20,7 +16,7 @@
   }
 
   // The overlay-container is an invisible element which contains all individual overlays.
-  .md-overlay-container {
+  .cdk-overlay-container {
     position: fixed;
     z-index: $md-z-index-overlay-container;
   }
@@ -29,21 +25,21 @@
   // This makes centering the overlay easy without running into the subpixel rendering
   // problems tied to using `transform` and without interfering with the other position
   // strategies.
-  .md-global-overlay-wrapper {
+  .cdk-global-overlay-wrapper {
     display: flex;
     position: absolute;
     z-index: $md-z-index-overlay;
   }
 
   // A single overlay pane.
-  .md-overlay-pane {
+  .cdk-overlay-pane {
     position: absolute;
     pointer-events: auto;
     box-sizing: border-box;
     z-index: $md-z-index-overlay;
   }
 
-  .md-overlay-backdrop {
+  .cdk-overlay-backdrop {
     // TODO(jelbourn): reuse sidenav fullscreen mixin.
     position: absolute;
     top: 0;
@@ -58,17 +54,17 @@
     // themes here. Currently using the values from Angular Material 1.
     transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function;
     opacity: 0;
-  }
 
-  .md-overlay-backdrop.md-overlay-backdrop-showing {
-    opacity: 0.48;
+    &.cdk-overlay-backdrop-showing {
+      opacity: 0.48;
+    }
   }
 
-  .md-overlay-dark-backdrop {
-    background: $md-dark-backdrop-color;
+  .cdk-overlay-dark-backdrop {
+    background: md-color($md-grey, 900); // TODO(crisbeto): make this theme-independent?
   }
 
-  .md-overlay-transparent-backdrop {
+  .cdk-overlay-transparent-backdrop {
     background: none;
   }
 }
diff --git a/src/lib/core/overlay/overlay-container.ts b/src/lib/core/overlay/overlay-container.ts
index 156812a43c96..daea34656c4a 100644
--- a/src/lib/core/overlay/overlay-container.ts
+++ b/src/lib/core/overlay/overlay-container.ts
@@ -18,11 +18,11 @@ export class OverlayContainer {
 
   /**
    * Create the overlay container element, which is simply a div
-   * with the 'md-overlay-container' class on the document body.
+   * with the 'cdk-overlay-container' class on the document body.
    */
   private _createContainer(): void {
     let container = document.createElement('div');
-    container.classList.add('md-overlay-container');
+    container.classList.add('cdk-overlay-container');
     document.body.appendChild(container);
     this._containerElement = container;
   }
diff --git a/src/lib/core/overlay/overlay-directives.spec.ts b/src/lib/core/overlay/overlay-directives.spec.ts
index 9e55cb6415c0..1750f02674f1 100644
--- a/src/lib/core/overlay/overlay-directives.spec.ts
+++ b/src/lib/core/overlay/overlay-directives.spec.ts
@@ -108,7 +108,7 @@ describe('Overlay directives', () => {
       fixture.componentInstance.isOpen = true;
       fixture.detectChanges();
 
-      let backdrop = overlayContainerElement.querySelector('.md-overlay-backdrop');
+      let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop');
       expect(backdrop).toBeTruthy();
     });
 
@@ -116,7 +116,7 @@ describe('Overlay directives', () => {
       fixture.componentInstance.isOpen = true;
       fixture.detectChanges();
 
-      let backdrop = overlayContainerElement.querySelector('.md-overlay-backdrop');
+      let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop');
       expect(backdrop).toBeNull();
     });
 
@@ -125,7 +125,7 @@ describe('Overlay directives', () => {
       fixture.componentInstance.isOpen = true;
       fixture.detectChanges();
 
-      const backdrop = overlayContainerElement.querySelector('.md-overlay-backdrop') as HTMLElement;
+      const backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
       expect(backdrop.classList).toContain('md-test-class');
     });
 
@@ -190,7 +190,7 @@ describe('Overlay directives', () => {
       fixture.componentInstance.isOpen = true;
       fixture.detectChanges();
 
-      const backdrop = overlayContainerElement.querySelector('.md-overlay-backdrop') as HTMLElement;
+      const backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
       backdrop.click();
       fixture.detectChanges();
 
@@ -232,8 +232,8 @@ describe('Overlay directives', () => {
 
 @Component({
   template: `
-  <button overlay-origin #trigger="overlayOrigin">Toggle menu</button>
-  <template connected-overlay [origin]="trigger" [open]="isOpen" [width]="width" [height]="height"
+  <button cdk-overlay-origin #trigger="cdkOverlayOrigin">Toggle menu</button>
+  <template cdk-connected-overlay [origin]="trigger" [open]="isOpen" [width]="width" [height]="height"
             [hasBackdrop]="hasBackdrop" backdropClass="md-test-class"
             (backdropClick)="backdropClicked=true" [offsetX]="offsetX" [offsetY]="offsetY"
             (positionChange)="positionChangeHandler($event)" (attach)="attachHandler()"
diff --git a/src/lib/core/overlay/overlay-directives.ts b/src/lib/core/overlay/overlay-directives.ts
index 10611389e3a6..06d81f6ac1d6 100644
--- a/src/lib/core/overlay/overlay-directives.ts
+++ b/src/lib/core/overlay/overlay-directives.ts
@@ -40,8 +40,8 @@ let defaultPositionList = [
  * ConnectedPositionStrategy.
  */
 @Directive({
-  selector: '[overlay-origin]',
-  exportAs: 'overlayOrigin',
+  selector: '[cdk-overlay-origin]',
+  exportAs: 'cdkOverlayOrigin',
 })
 export class OverlayOrigin {
   constructor(private _elementRef: ElementRef) { }
@@ -57,8 +57,8 @@ export class OverlayOrigin {
  * Directive to facilitate declarative creation of an Overlay using a ConnectedPositionStrategy.
  */
 @Directive({
-  selector: '[connected-overlay]',
-  exportAs: 'connectedOverlay'
+  selector: '[cdk-connected-overlay]',
+  exportAs: 'cdkConnectedOverlay'
 })
 export class ConnectedOverlayDirective implements OnDestroy {
   private _overlayRef: OverlayRef;
diff --git a/src/lib/core/overlay/overlay-ref.ts b/src/lib/core/overlay/overlay-ref.ts
index 62b36cdf5389..6d207b6f1e38 100644
--- a/src/lib/core/overlay/overlay-ref.ts
+++ b/src/lib/core/overlay/overlay-ref.ts
@@ -98,7 +98,7 @@ export class OverlayRef implements PortalHost {
   /** Attaches a backdrop for this overlay. */
   private _attachBackdrop() {
     this._backdropElement = document.createElement('div');
-    this._backdropElement.classList.add('md-overlay-backdrop');
+    this._backdropElement.classList.add('cdk-overlay-backdrop');
     this._backdropElement.classList.add(this._state.backdropClass);
 
     this._pane.parentElement.appendChild(this._backdropElement);
@@ -112,7 +112,7 @@ export class OverlayRef implements PortalHost {
     // Add class to fade-in the backdrop after one frame.
     requestAnimationFrame(() => {
       if (this._backdropElement) {
-        this._backdropElement.classList.add('md-overlay-backdrop-showing');
+        this._backdropElement.classList.add('cdk-overlay-backdrop-showing');
       }
     });
   }
@@ -136,7 +136,7 @@ export class OverlayRef implements PortalHost {
         }
       };
 
-      backdropToDetach.classList.remove('md-overlay-backdrop-showing');
+      backdropToDetach.classList.remove('cdk-overlay-backdrop-showing');
       backdropToDetach.classList.remove(this._state.backdropClass);
       backdropToDetach.addEventListener('transitionend', finishDetach);
 
diff --git a/src/lib/core/overlay/overlay-state.ts b/src/lib/core/overlay/overlay-state.ts
index f70b1fae378e..551b25754fb0 100644
--- a/src/lib/core/overlay/overlay-state.ts
+++ b/src/lib/core/overlay/overlay-state.ts
@@ -14,7 +14,7 @@ export class OverlayState {
   hasBackdrop: boolean = false;
 
   /** Custom class to add to the backdrop **/
-  backdropClass: string = 'md-overlay-dark-backdrop';
+  backdropClass: string = 'cdk-overlay-dark-backdrop';
 
   /** The width of the overlay panel. If a number is provided, pixel units are assumed. **/
   width: number | string;
diff --git a/src/lib/core/overlay/overlay.spec.ts b/src/lib/core/overlay/overlay.spec.ts
index 119b4a75d67a..1cd28e7d0535 100644
--- a/src/lib/core/overlay/overlay.spec.ts
+++ b/src/lib/core/overlay/overlay.spec.ts
@@ -190,9 +190,9 @@ describe('Overlay', () => {
       overlayRef.attach(componentPortal);
 
       viewContainerFixture.detectChanges();
-      let backdrop = overlayContainerElement.querySelector('.md-overlay-backdrop') as HTMLElement;
+      let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
       expect(backdrop).toBeTruthy();
-      expect(backdrop.classList).not.toContain('md-overlay-backdrop-showing');
+      expect(backdrop.classList).not.toContain('cdk-overlay-backdrop-showing');
 
       let backdropClickHandler = jasmine.createSpy('backdropClickHander');
       overlayRef.backdropClick().subscribe(backdropClickHandler);
@@ -206,19 +206,19 @@ describe('Overlay', () => {
       overlayRef.attach(componentPortal);
       viewContainerFixture.detectChanges();
 
-      let backdrop = overlayContainerElement.querySelector('.md-overlay-backdrop') as HTMLElement;
-      expect(backdrop.classList).toContain('md-overlay-dark-backdrop');
+      let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
+      expect(backdrop.classList).toContain('cdk-overlay-dark-backdrop');
     });
 
     it('should apply a custom overlay backdrop class', () => {
-      config.backdropClass = 'md-overlay-transparent-backdrop';
+      config.backdropClass = 'cdk-overlay-transparent-backdrop';
 
       let overlayRef = overlay.create(config);
       overlayRef.attach(componentPortal);
       viewContainerFixture.detectChanges();
 
-      let backdrop = overlayContainerElement.querySelector('.md-overlay-backdrop') as HTMLElement;
-      expect(backdrop.classList).toContain('md-overlay-transparent-backdrop');
+      let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
+      expect(backdrop.classList).toContain('cdk-overlay-transparent-backdrop');
     });
 
     it('should disable the pointer events of a backdrop that is being removed', () => {
@@ -226,7 +226,7 @@ describe('Overlay', () => {
       overlayRef.attach(componentPortal);
 
       viewContainerFixture.detectChanges();
-      let backdrop = overlayContainerElement.querySelector('.md-overlay-backdrop') as HTMLElement;
+      let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
 
       expect(backdrop.style.pointerEvents).toBeFalsy();
 
@@ -245,7 +245,7 @@ class PizzaMsg { }
 
 
 /** Test-bed component that contains a TempatePortal and an ElementRef. */
-@Component({template: `<template portal>Cake</template>`})
+@Component({template: `<template cdk-portal>Cake</template>`})
 class TestComponentWithTemplatePortals {
   @ViewChild(TemplatePortalDirective) templatePortal: TemplatePortalDirective;
 
diff --git a/src/lib/core/overlay/overlay.ts b/src/lib/core/overlay/overlay.ts
index 22a4d43e546e..77e341a117b8 100644
--- a/src/lib/core/overlay/overlay.ts
+++ b/src/lib/core/overlay/overlay.ts
@@ -59,8 +59,8 @@ export class Overlay {
    */
   private _createPaneElement(): HTMLElement {
     let pane = document.createElement('div');
-    pane.id = `md-overlay-${nextUniqueId++}`;
-    pane.classList.add('md-overlay-pane');
+    pane.id = `cdk-overlay-${nextUniqueId++}`;
+    pane.classList.add('cdk-overlay-pane');
 
     this._overlayContainer.getContainerElement().appendChild(pane);
 
diff --git a/src/lib/core/overlay/position/global-position-strategy.spec.ts b/src/lib/core/overlay/position/global-position-strategy.spec.ts
index acd0dc0f97e9..475fce5d6fd6 100644
--- a/src/lib/core/overlay/position/global-position-strategy.spec.ts
+++ b/src/lib/core/overlay/position/global-position-strategy.spec.ts
@@ -119,14 +119,14 @@ describe('GlobalPositonStrategy', () => {
     expect(element.style.position).toBe('static');
   }));
 
-  it('should wrap the element in a `md-global-overlay-wrapper`', fakeAsyncTest(() => {
+  it('should wrap the element in a `cdk-global-overlay-wrapper`', fakeAsyncTest(() => {
     strategy.apply(element);
 
     flushMicrotasks();
 
     let parent = element.parentNode as HTMLElement;
 
-    expect(parent.classList.contains('md-global-overlay-wrapper')).toBe(true);
+    expect(parent.classList.contains('cdk-global-overlay-wrapper')).toBe(true);
   }));
 
 
diff --git a/src/lib/core/overlay/position/global-position-strategy.ts b/src/lib/core/overlay/position/global-position-strategy.ts
index 23a9ec40a48a..994d4ee64bd9 100644
--- a/src/lib/core/overlay/position/global-position-strategy.ts
+++ b/src/lib/core/overlay/position/global-position-strategy.ts
@@ -106,7 +106,7 @@ export class GlobalPositionStrategy implements PositionStrategy {
   apply(element: HTMLElement): Promise<void> {
     if (!this._wrapper) {
       this._wrapper = document.createElement('div');
-      this._wrapper.classList.add('md-global-overlay-wrapper');
+      this._wrapper.classList.add('cdk-global-overlay-wrapper');
       element.parentNode.insertBefore(this._wrapper, element);
       this._wrapper.appendChild(element);
     }
diff --git a/src/lib/core/platform/index.ts b/src/lib/core/platform/index.ts
index e41a8341af96..82ed0453ac7a 100644
--- a/src/lib/core/platform/index.ts
+++ b/src/lib/core/platform/index.ts
@@ -1,5 +1,5 @@
 import {NgModule, ModuleWithProviders} from '@angular/core';
-import {MdPlatform} from './platform';
+import {Platform} from './platform';
 
 export * from './platform';
 export * from './features';
@@ -10,7 +10,7 @@ export class PlatformModule {
   static forRoot(): ModuleWithProviders {
     return {
       ngModule: PlatformModule,
-      providers: [MdPlatform],
+      providers: [Platform],
     };
   }
 }
diff --git a/src/lib/core/platform/platform.ts b/src/lib/core/platform/platform.ts
index 7e90e3cccf7e..df0a7b5ac90b 100755
--- a/src/lib/core/platform/platform.ts
+++ b/src/lib/core/platform/platform.ts
@@ -14,7 +14,7 @@ const hasV8BreakIterator = typeof(window) !== 'undefined' ?
  * @docs-private
  */
 @Injectable()
-export class MdPlatform {
+export class Platform {
   /** Layout Engines */
   EDGE = /(edge)/i.test(navigator.userAgent);
   TRIDENT = /(msie|trident)/i.test(navigator.userAgent);
diff --git a/src/lib/core/portal/README.md b/src/lib/core/portal/README.md
index dadd650f3978..c8c1b3b5cfb1 100644
--- a/src/lib/core/portal/README.md
+++ b/src/lib/core/portal/README.md
@@ -2,7 +2,7 @@
 
 ### Overview
 
-A `Portal `is a piece of UI that can be dynamically rendered to an open slot on the page. 
+A `Portal `is a piece of UI that can be dynamically rendered to an open slot on the page.
 
 The "piece of UI" can be either a `Component` or a `TemplateRef`.
 
@@ -10,7 +10,7 @@ The "open slot" is a `PortalHost`.
 
 Portals and PortalHosts are low-level building blocks that other concepts, such as overlays, can
 be built upon.
- 
+
 ##### `Portal<T>`
 | Method | Description |
 | --- | --- |
@@ -38,19 +38,19 @@ Used to get a portal from a `<template>`. `TemplatePortalDirectives` *is* a `Por
 
 Usage:
 ```html
-<template portal>
+<template cdk-portal>
   <p>The content of this template is captured by the portal.</p>
 </template>
 
 <!-- OR -->
 
 <!-- This result here is identical to the syntax above -->
-<p *portal>
+<p *cdk-portal>
   The content of this template is captured by the portal.
 </p>
 ```
 
-A component can use `@ViewChild` or `@ViewChildren` to get a reference to a 
+A component can use `@ViewChild` or `@ViewChildren` to get a reference to a
 `TemplatePortalDiective`.
 
 ##### `ComponentPortal`
@@ -68,5 +68,5 @@ Used to add a portal host to a template. `PortalHostDirective` *is* a `PortalHos
 Usage:
 ```html
 <!-- Attaches the `userSettingsPortal` from the previous example. -->
-<template [portalHost]="userSettingsPortal"></template>
+<template [cdk-portalHost]="userSettingsPortal"></template>
 ```
diff --git a/src/lib/core/portal/portal-directives.ts b/src/lib/core/portal/portal-directives.ts
index 75723027e7b2..81e2660a84ab 100644
--- a/src/lib/core/portal/portal-directives.ts
+++ b/src/lib/core/portal/portal-directives.ts
@@ -21,8 +21,8 @@ import {Portal, TemplatePortal, ComponentPortal, BasePortalHost} from './portal'
  * </template>
  */
 @Directive({
-  selector: '[portal]',
-  exportAs: 'portal',
+  selector: '[cdk-portal]',
+  exportAs: 'cdkPortal',
 })
 export class TemplatePortalDirective extends TemplatePortal {
   constructor(templateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef) {
@@ -36,11 +36,11 @@ export class TemplatePortalDirective extends TemplatePortal {
  * directly attached to it, enabling declarative use.
  *
  * Usage:
- * <template [portalHost]="greeting"></template>
+ * <template [cdkPortalHost]="greeting"></template>
  */
 @Directive({
-  selector: '[portalHost]',
-  inputs: ['portal: portalHost']
+  selector: '[cdkPortalHost]',
+  inputs: ['portal: cdkPortalHost']
 })
 export class PortalHostDirective extends BasePortalHost implements OnDestroy {
   /** The attached portal. */
diff --git a/src/lib/core/portal/portal-errors.ts b/src/lib/core/portal/portal-errors.ts
index f3f2e17aef6f..218c481af003 100644
--- a/src/lib/core/portal/portal-errors.ts
+++ b/src/lib/core/portal/portal-errors.ts
@@ -4,7 +4,7 @@ import {MdError} from '../errors/error';
  * Exception thrown when attempting to attach a null portal to a host.
  * @docs-private
  */
-export class MdNullPortalError extends MdError {
+export class NullPortalError extends MdError {
   constructor() {
       super('Must provide a portal to attach');
   }
@@ -14,7 +14,7 @@ export class MdNullPortalError extends MdError {
  * Exception thrown when attempting to attach a portal to a host that is already attached.
  * @docs-private
  */
-export class MdPortalAlreadyAttachedError extends MdError {
+export class PortalAlreadyAttachedError extends MdError {
   constructor() {
       super('Host already has a portal attached');
   }
@@ -24,7 +24,7 @@ export class MdPortalAlreadyAttachedError extends MdError {
  * Exception thrown when attempting to attach a portal to an already-disposed host.
  * @docs-private
  */
-export class MdPortalHostAlreadyDisposedError extends MdError {
+export class PortalHostAlreadyDisposedError extends MdError {
   constructor() {
       super('This PortalHost has already been disposed');
   }
@@ -34,7 +34,7 @@ export class MdPortalHostAlreadyDisposedError extends MdError {
  * Exception thrown when attempting to attach an unknown portal type.
  * @docs-private
  */
-export class MdUnknownPortalTypeError extends MdError {
+export class UnknownPortalTypeError extends MdError {
   constructor() {
       super(
         'Attempting to attach an unknown Portal type. ' +
@@ -46,7 +46,7 @@ export class MdUnknownPortalTypeError extends MdError {
  * Exception thrown when attempting to attach a portal to a null host.
  * @docs-private
  */
-export class MdNullPortalHostError extends MdError {
+export class NullPortalHostError extends MdError {
   constructor() {
       super('Attempting to attach a portal to a null PortalHost');
   }
@@ -56,7 +56,7 @@ export class MdNullPortalHostError extends MdError {
  * Exception thrown when attempting to detach a portal that is not attached.
  * @docs-private
  */
-export class MdNoPortalAttachedError extends MdError {
+export class NoPortalAttachedError extends MdError {
   constructor() {
       super('Attempting to detach a portal that is not attached to a host');
   }
diff --git a/src/lib/core/portal/portal.spec.ts b/src/lib/core/portal/portal.spec.ts
index 6f51d1ef686d..ab0b56919aa5 100644
--- a/src/lib/core/portal/portal.spec.ts
+++ b/src/lib/core/portal/portal.spec.ts
@@ -320,14 +320,14 @@ class ArbitraryViewContainerRefComponent {
   selector: 'portal-test',
   template: `
   <div class="portal-container">
-    <template [portalHost]="selectedPortal"></template>
+    <template [cdkPortalHost]="selectedPortal"></template>
   </div>
 
-  <template portal>Cake</template>
+  <template cdk-portal>Cake</template>
 
-  <div *portal>Pie</div>
+  <div *cdk-portal>Pie</div>
 
-  <template portal> {{fruit}} </template>`,
+  <template cdk-portal> {{fruit}} </template>`,
 })
 class PortalTestApp {
   @ViewChildren(TemplatePortalDirective) portals: QueryList<TemplatePortalDirective>;
diff --git a/src/lib/core/portal/portal.ts b/src/lib/core/portal/portal.ts
index b610291eea70..2e06379e6e17 100644
--- a/src/lib/core/portal/portal.ts
+++ b/src/lib/core/portal/portal.ts
@@ -6,12 +6,12 @@ import {
     Injector
 } from '@angular/core';
 import {
-    MdNullPortalHostError,
-    MdPortalAlreadyAttachedError,
-    MdNoPortalAttachedError,
-    MdNullPortalError,
-    MdPortalHostAlreadyDisposedError,
-    MdUnknownPortalTypeError
+    NullPortalHostError,
+    PortalAlreadyAttachedError,
+    NoPortalAttachedError,
+    NullPortalError,
+    PortalHostAlreadyDisposedError,
+    UnknownPortalTypeError
 } from './portal-errors';
 import {ComponentType} from '../overlay/generic-component-type';
 
@@ -27,11 +27,11 @@ export abstract class Portal<T> {
   /** Attach this portal to a host. */
   attach(host: PortalHost): T {
     if (host == null) {
-      throw new MdNullPortalHostError();
+      throw new NullPortalHostError();
     }
 
     if (host.hasAttached()) {
-      throw new MdPortalAlreadyAttachedError();
+      throw new PortalAlreadyAttachedError();
     }
 
     this._attachedHost = host;
@@ -42,7 +42,7 @@ export abstract class Portal<T> {
   detach(): void {
     let host = this._attachedHost;
     if (host == null) {
-      throw new MdNoPortalAttachedError();
+      throw new NoPortalAttachedError();
     }
 
     this._attachedHost = null;
@@ -168,15 +168,15 @@ export abstract class BasePortalHost implements PortalHost {
 
   attach(portal: Portal<any>): any {
     if (portal == null) {
-      throw new MdNullPortalError();
+      throw new NullPortalError();
     }
 
     if (this.hasAttached()) {
-      throw new MdPortalAlreadyAttachedError();
+      throw new PortalAlreadyAttachedError();
     }
 
     if (this._isDisposed) {
-      throw new MdPortalHostAlreadyDisposedError();
+      throw new PortalHostAlreadyDisposedError();
     }
 
     if (portal instanceof ComponentPortal) {
@@ -187,7 +187,7 @@ export abstract class BasePortalHost implements PortalHost {
       return this.attachTemplatePortal(portal);
     }
 
-    throw new MdUnknownPortalTypeError();
+    throw new UnknownPortalTypeError();
   }
 
   abstract attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T>;
diff --git a/src/lib/core/projection/projection.spec.ts b/src/lib/core/projection/projection.spec.ts
index 01cfd1acdb98..384f953368c3 100644
--- a/src/lib/core/projection/projection.spec.ts
+++ b/src/lib/core/projection/projection.spec.ts
@@ -24,7 +24,7 @@ describe('Projection', () => {
     const innerDivEl = appEl.querySelector('.inner');
 
     // Expect the reverse of the tests down there.
-    expect(appEl.querySelector('dom-projection-host')).not.toBeNull();
+    expect(appEl.querySelector('cdk-dom-projection-host')).not.toBeNull();
     expect(outerDivEl.querySelector('.inner')).not.toBe(innerDivEl);
 
     const innerHtml = appEl.innerHTML;
@@ -34,8 +34,8 @@ describe('Projection', () => {
 
     expect(appEl.innerHTML).not.toEqual(innerHtml);
 
-    // Assert `<dom-projection-host>` is not in the DOM anymore.
-    expect(appEl.querySelector('dom-projection-host')).toBeNull();
+    // Assert `<cdk-dom-projection-host>` is not in the DOM anymore.
+    expect(appEl.querySelector('cdk-dom-projection-host')).toBeNull();
 
     // Assert the outerDiv contains the innerDiv.
     expect(outerDivEl.querySelector('.inner')).toBe(innerDivEl);
@@ -51,7 +51,7 @@ describe('Projection', () => {
   selector: '[projection-test]',
   template: `
     <div class="outer">
-      <dom-projection-host><ng-content></ng-content></dom-projection-host>
+      <cdk-dom-projection-host><ng-content></ng-content></cdk-dom-projection-host>
     </div>
   `,
 })
diff --git a/src/lib/core/projection/projection.ts b/src/lib/core/projection/projection.ts
index 4d05b22d6836..6f01c3bc7277 100644
--- a/src/lib/core/projection/projection.ts
+++ b/src/lib/core/projection/projection.ts
@@ -9,7 +9,7 @@ function _replaceWith(toReplaceEl: HTMLElement, otherEl: HTMLElement) {
 
 /** @docs-private */
 @Directive({
-  selector: 'dom-projection-host'
+  selector: 'cdk-dom-projection-host'
 })
 export class DomProjectionHost {
   constructor(public ref: ElementRef) {}
@@ -29,10 +29,10 @@ export class DomProjection {
    * ```
    *   @Component({
    *     template: `<div>
-   *       <dom-projection-host>
+   *       <cdk-dom-projection-host>
    *         <div>other</div>
    *         <ng-content></ng-content>
-   *       </dom-projection-host>
+   *       </cdk-dom-projection-host>
    *     </div>`
    *   })
    *   class Cmpt {
diff --git a/src/lib/dialog/dialog-container.html b/src/lib/dialog/dialog-container.html
index f1c4963b9627..cb0ea3ee0468 100644
--- a/src/lib/dialog/dialog-container.html
+++ b/src/lib/dialog/dialog-container.html
@@ -1,3 +1,3 @@
-<focus-trap>
-  <template portalHost></template>
-</focus-trap>
+<cdk-focus-trap>
+  <template cdkPortalHost></template>
+</cdk-focus-trap>
diff --git a/src/lib/dialog/dialog.scss b/src/lib/dialog/dialog.scss
index 06492d08629c..71119a2d11f8 100644
--- a/src/lib/dialog/dialog.scss
+++ b/src/lib/dialog/dialog.scss
@@ -21,7 +21,7 @@ md-dialog-container {
   width: 100%;
   height: 100%;
 
-  @include md-high-contrast {
+  @include cdk-high-contrast {
     outline: solid 1px;
   }
 }
diff --git a/src/lib/dialog/dialog.spec.ts b/src/lib/dialog/dialog.spec.ts
index e88377b7593d..7983385e0131 100644
--- a/src/lib/dialog/dialog.spec.ts
+++ b/src/lib/dialog/dialog.spec.ts
@@ -129,7 +129,7 @@ describe('MdDialog', () => {
 
     viewContainerFixture.detectChanges();
 
-    let backdrop = overlayContainerElement.querySelector('.md-overlay-backdrop') as HTMLElement;
+    let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
     backdrop.click();
 
     expect(overlayContainerElement.querySelector('md-dialog-container')).toBeFalsy();
@@ -142,7 +142,7 @@ describe('MdDialog', () => {
 
     viewContainerFixture.detectChanges();
 
-    let overlayPane = overlayContainerElement.querySelector('.md-overlay-pane') as HTMLElement;
+    let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
 
     expect(overlayPane.style.width).toBe('500px');
   });
@@ -154,7 +154,7 @@ describe('MdDialog', () => {
 
     viewContainerFixture.detectChanges();
 
-    let overlayPane = overlayContainerElement.querySelector('.md-overlay-pane') as HTMLElement;
+    let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
 
     expect(overlayPane.style.height).toBe('100px');
   });
@@ -168,7 +168,7 @@ describe('MdDialog', () => {
 
     viewContainerFixture.detectChanges();
 
-    let overlayPane = overlayContainerElement.querySelector('.md-overlay-pane') as HTMLElement;
+    let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
 
     expect(overlayPane.style.marginTop).toBe('100px');
   });
@@ -182,7 +182,7 @@ describe('MdDialog', () => {
 
     viewContainerFixture.detectChanges();
 
-    let overlayPane = overlayContainerElement.querySelector('.md-overlay-pane') as HTMLElement;
+    let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
 
     expect(overlayPane.style.marginBottom).toBe('200px');
   });
@@ -196,7 +196,7 @@ describe('MdDialog', () => {
 
     viewContainerFixture.detectChanges();
 
-    let overlayPane = overlayContainerElement.querySelector('.md-overlay-pane') as HTMLElement;
+    let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
 
     expect(overlayPane.style.marginLeft).toBe('250px');
   });
@@ -210,7 +210,7 @@ describe('MdDialog', () => {
 
     viewContainerFixture.detectChanges();
 
-    let overlayPane = overlayContainerElement.querySelector('.md-overlay-pane') as HTMLElement;
+    let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
 
     expect(overlayPane.style.marginRight).toBe('125px');
   });
@@ -236,7 +236,7 @@ describe('MdDialog', () => {
 
       viewContainerFixture.detectChanges();
 
-      let backdrop = overlayContainerElement.querySelector('.md-overlay-backdrop') as HTMLElement;
+      let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
       backdrop.click();
 
       expect(overlayContainerElement.querySelector('md-dialog-container')).toBeTruthy();
diff --git a/src/lib/dialog/index.ts b/src/lib/dialog/index.ts
index fba41fd5e751..1180255bd710 100644
--- a/src/lib/dialog/index.ts
+++ b/src/lib/dialog/index.ts
@@ -5,7 +5,7 @@ import {
   OVERLAY_PROVIDERS,
   A11yModule,
   InteractivityChecker,
-  MdPlatform,
+  Platform,
   DefaultStyleCompatibilityModeModule,
 } from '../core';
 
@@ -47,7 +47,7 @@ export class MdDialogModule {
   static forRoot(): ModuleWithProviders {
     return {
       ngModule: MdDialogModule,
-      providers: [MdDialog, OVERLAY_PROVIDERS, InteractivityChecker, MdPlatform],
+      providers: [MdDialog, OVERLAY_PROVIDERS, InteractivityChecker, Platform],
     };
   }
 }
diff --git a/src/lib/input/input-container.spec.ts b/src/lib/input/input-container.spec.ts
index df092c0074d2..335acfaf3c40 100644
--- a/src/lib/input/input-container.spec.ts
+++ b/src/lib/input/input-container.spec.ts
@@ -4,7 +4,7 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {By} from '@angular/platform-browser';
 import {MdInputModule} from './input';
 import {MdInputContainer} from './input-container';
-import {MdPlatform} from '../core/platform/platform';
+import {Platform} from '../core/platform/platform';
 import {PlatformModule} from '../core/platform/index';
 import {
   MdInputContainerMissingMdInputError,
@@ -59,7 +59,7 @@ describe('MdInputContainer', function () {
   });
 
   it('should not be treated as empty if type is date',
-      inject([MdPlatform], (platform: MdPlatform) => {
+      inject([Platform], (platform: Platform) => {
         if (!(platform.TRIDENT || platform.FIREFOX)) {
           let fixture = TestBed.createComponent(MdInputContainerDateTestController);
           fixture.detectChanges();
@@ -72,7 +72,7 @@ describe('MdInputContainer', function () {
 
   // Firefox and IE don't support type="date" and fallback to type="text".
   it('should be treated as empty if type is date on Firefox and IE',
-      inject([MdPlatform], (platform: MdPlatform) => {
+      inject([Platform], (platform: Platform) => {
         if (platform.TRIDENT || platform.FIREFOX) {
           let fixture = TestBed.createComponent(MdInputContainerDateTestController);
           fixture.detectChanges();
diff --git a/src/lib/menu/menu-item.ts b/src/lib/menu/menu-item.ts
index 9bdd0d6e00f9..de302b443c8b 100644
--- a/src/lib/menu/menu-item.ts
+++ b/src/lib/menu/menu-item.ts
@@ -1,5 +1,5 @@
 import {Component, ElementRef, Input, HostBinding, Renderer} from '@angular/core';
-import {MdFocusable} from '../core/a11y/list-key-manager';
+import {Focusable} from '../core/a11y/list-key-manager';
 
 /**
  * This directive is intended to be used inside an md-menu tag.
@@ -16,7 +16,7 @@ import {MdFocusable} from '../core/a11y/list-key-manager';
   templateUrl: 'menu-item.html',
   exportAs: 'mdMenuItem'
 })
-export class MdMenuItem implements MdFocusable {
+export class MdMenuItem implements Focusable {
   _disabled: boolean;
 
   constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}
diff --git a/src/lib/menu/menu-trigger.ts b/src/lib/menu/menu-trigger.ts
index 0243aa248f1b..8ee11c7a8886 100644
--- a/src/lib/menu/menu-trigger.ts
+++ b/src/lib/menu/menu-trigger.ts
@@ -192,7 +192,7 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy {
     overlayState.positionStrategy = this._getPosition()
                                         .withDirection(this.dir);
     overlayState.hasBackdrop = true;
-    overlayState.backdropClass = 'md-overlay-transparent-backdrop';
+    overlayState.backdropClass = 'cdk-overlay-transparent-backdrop';
     overlayState.direction = this.dir;
     return overlayState;
   }
diff --git a/src/lib/menu/menu.scss b/src/lib/menu/menu.scss
index 6046f6232e30..ec80b0f00a4e 100644
--- a/src/lib/menu/menu.scss
+++ b/src/lib/menu/menu.scss
@@ -15,7 +15,7 @@ $md-menu-vertical-padding: 8px !default;
   // max height must be 100% of the viewport height + one row height
   max-height: calc(100vh + 48px);
 
-  @include md-high-contrast {
+  @include cdk-high-contrast {
     outline: solid 1px;
   }
 }
diff --git a/src/lib/menu/menu.spec.ts b/src/lib/menu/menu.spec.ts
index a4e82efacc74..06184d46335a 100644
--- a/src/lib/menu/menu.spec.ts
+++ b/src/lib/menu/menu.spec.ts
@@ -72,7 +72,7 @@ describe('MdMenu', () => {
     fixture.detectChanges();
     fixture.componentInstance.trigger.openMenu();
 
-    const backdrop = <HTMLElement>overlayContainerElement.querySelector('.md-overlay-backdrop');
+    const backdrop = <HTMLElement>overlayContainerElement.querySelector('.cdk-overlay-backdrop');
     backdrop.click();
     fixture.detectChanges();
 
diff --git a/src/lib/radio/radio.html b/src/lib/radio/radio.html
index b304f6e9ae91..24b9ba8c6dc1 100644
--- a/src/lib/radio/radio.html
+++ b/src/lib/radio/radio.html
@@ -12,7 +12,7 @@
          mdRippleBackgroundColor="rgba(0, 0, 0, 0)"></div>
   </div>
 
-  <input #input class="md-radio-input md-visually-hidden" type="radio"
+  <input #input class="md-radio-input cdk-visually-hidden" type="radio"
           [id]="inputId"
           [checked]="checked"
           [disabled]="disabled"
diff --git a/src/lib/radio/radio.ts b/src/lib/radio/radio.ts
index b710d7765976..d0f4bfaa6874 100644
--- a/src/lib/radio/radio.ts
+++ b/src/lib/radio/radio.ts
@@ -22,7 +22,7 @@ import {CommonModule} from '@angular/common';
 import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
 import {
   MdRippleModule,
-  MdUniqueSelectionDispatcher,
+  UniqueSelectionDispatcher,
   DefaultStyleCompatibilityModeModule,
 } from '../core';
 import {coerceBooleanProperty} from '../core/coercion/boolean-property';
@@ -297,7 +297,7 @@ export class MdRadioButton implements OnInit {
   constructor(@Optional() radioGroup: MdRadioGroup,
               private _elementRef: ElementRef,
               private _renderer: Renderer,
-              public radioDispatcher: MdUniqueSelectionDispatcher) {
+              public radioDispatcher: UniqueSelectionDispatcher) {
     // Assertions. Ideally these should be stripped out by the compiler.
     // TODO(jelbourn): Assert that there's no name binding AND a parent radio group.
 
@@ -480,7 +480,7 @@ export class MdRadioModule {
   static forRoot(): ModuleWithProviders {
     return {
       ngModule: MdRadioModule,
-      providers: [MdUniqueSelectionDispatcher, ViewportRuler],
+      providers: [UniqueSelectionDispatcher, ViewportRuler],
     };
   }
 }
diff --git a/src/lib/select/select.html b/src/lib/select/select.html
index 46f595c14e51..8c64b1567c5d 100644
--- a/src/lib/select/select.html
+++ b/src/lib/select/select.html
@@ -1,12 +1,12 @@
-<div class="md-select-trigger" overlay-origin (click)="toggle()" #origin="overlayOrigin" #trigger>
+<div class="md-select-trigger" cdk-overlay-origin (click)="toggle()" #origin="cdkOverlayOrigin" #trigger>
   <span class="md-select-placeholder" [class.md-floating-placeholder]="this.selected"
    [@transformPlaceholder]="_placeholderState" [style.width.px]="_selectedValueWidth"> {{ placeholder }} </span>
   <span class="md-select-value" *ngIf="selected"> {{ selected?.viewValue }} </span>
   <span class="md-select-arrow"></span>
 </div>
 
-<template connected-overlay [origin]="origin"  [open]="panelOpen" hasBackdrop (backdropClick)="close()"
-  backdropClass="md-overlay-transparent-backdrop" [positions]="_positions" [minWidth]="_triggerWidth"
+<template cdk-connected-overlay [origin]="origin"  [open]="panelOpen" hasBackdrop (backdropClick)="close()"
+  backdropClass="cdk-overlay-transparent-backdrop" [positions]="_positions" [minWidth]="_triggerWidth"
   [offsetY]="_offsetY" [offsetX]="_offsetX" (attach)="_setScrollTop()">
   <div class="md-select-panel" [@transformPanel]="'showing'" (@transformPanel.done)="_onPanelDone()"
     (keydown)="_keyManager.onKeydown($event)" [style.transformOrigin]="_transformOrigin">
diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss
index 0dc47e1177cb..04ca67077ebd 100644
--- a/src/lib/select/select.scss
+++ b/src/lib/select/select.scss
@@ -100,7 +100,7 @@ md-select {
   padding-bottom: 0;
   max-height: $md-select-panel-max-height;
 
-  @include md-high-contrast {
+  @include cdk-high-contrast {
     outline: solid 1px;
   }
 }
@@ -125,7 +125,7 @@ md-option {
   right: 0;
 
   // In high contrast mode this completely covers the text.
-  @include md-high-contrast {
+  @include cdk-high-contrast {
     opacity: 0.5;
   }
 }
diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts
index 856524937535..44935ebd5de3 100644
--- a/src/lib/select/select.spec.ts
+++ b/src/lib/select/select.spec.ts
@@ -86,7 +86,9 @@ describe('MdSelect', () => {
       trigger.click();
       fixture.detectChanges();
 
-      const backdrop = overlayContainerElement.querySelector('.md-overlay-backdrop') as HTMLElement;
+      const backdrop =
+          overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
+
       backdrop.click();
       fixture.detectChanges();
 
@@ -361,7 +363,7 @@ describe('MdSelect', () => {
         .toEqual(false, `Expected the control to stay untouched when menu opened.`);
 
       const backdrop =
-        overlayContainerElement.querySelector('.md-overlay-backdrop') as HTMLElement;
+        overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
       backdrop.click();
       dispatchEvent('blur', trigger);
       fixture.detectChanges();
@@ -511,7 +513,7 @@ describe('MdSelect', () => {
             .toEqual('floating-ltr', 'Expected placeholder to animate up to floating position.');
 
         const backdrop =
-          overlayContainerElement.querySelector('.md-overlay-backdrop') as HTMLElement;
+          overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
         backdrop.click();
         fixture.detectChanges();
 
@@ -1099,7 +1101,7 @@ describe('MdSelect', () => {
             .toContain(options[1].id, `Expected aria-owns to contain IDs of its child options.`);
 
         const backdrop =
-            overlayContainerElement.querySelector('.md-overlay-backdrop') as HTMLElement;
+            overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
         backdrop.click();
         fixture.detectChanges();
 
@@ -1125,7 +1127,7 @@ describe('MdSelect', () => {
         expect(options[0].id).not.toEqual(options[1].id, `Expected option IDs to be unique.`);
 
         const backdrop =
-            overlayContainerElement.querySelector('.md-overlay-backdrop') as HTMLElement;
+            overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
         backdrop.click();
         fixture.detectChanges();
 
diff --git a/src/lib/sidenav/sidenav.html b/src/lib/sidenav/sidenav.html
index ce783efc6f7e..3a3b01331fff 100644
--- a/src/lib/sidenav/sidenav.html
+++ b/src/lib/sidenav/sidenav.html
@@ -1,3 +1,3 @@
-<focus-trap class="md-sidenav-focus-trap" [disabled]="isFocusTrapDisabled">
+<cdk-focus-trap class="md-sidenav-focus-trap" [disabled]="isFocusTrapDisabled">
   <ng-content></ng-content>
-</focus-trap>
+</cdk-focus-trap>
diff --git a/src/lib/sidenav/sidenav.scss b/src/lib/sidenav/sidenav.scss
index 0d62c3c70975..cdcc7cedf28a 100644
--- a/src/lib/sidenav/sidenav.scss
+++ b/src/lib/sidenav/sidenav.scss
@@ -85,7 +85,7 @@
     visibility: visible;
   }
 
-  @include md-high-contrast {
+  @include cdk-high-contrast {
     opacity: 0.5;
   }
 }
diff --git a/src/lib/slide-toggle/slide-toggle.html b/src/lib/slide-toggle/slide-toggle.html
index ea096cdd8016..b1826671dd17 100644
--- a/src/lib/slide-toggle/slide-toggle.html
+++ b/src/lib/slide-toggle/slide-toggle.html
@@ -13,7 +13,7 @@
       </div>
     </div>
 
-    <input #input class="md-slide-toggle-input md-visually-hidden" type="checkbox"
+    <input #input class="md-slide-toggle-input cdk-visually-hidden" type="checkbox"
            [id]="getInputId()"
            [required]="required"
            [tabIndex]="tabIndex"
diff --git a/src/lib/slide-toggle/slide-toggle.scss b/src/lib/slide-toggle/slide-toggle.scss
index 6b877ece57dc..28e6ca24a191 100644
--- a/src/lib/slide-toggle/slide-toggle.scss
+++ b/src/lib/slide-toggle/slide-toggle.scss
@@ -118,7 +118,7 @@ md-slide-toggle {
 
   @include md-elevation(1);
 
-  @include md-high-contrast {
+  @include cdk-high-contrast {
     background: #fff;
     border: solid 1px #000;
   }
@@ -136,7 +136,7 @@ md-slide-toggle {
 
   border-radius: 8px;
 
-  @include md-high-contrast {
+  @include cdk-high-contrast {
     background: #fff;
   }
 }
diff --git a/src/lib/slide-toggle/slide-toggle.ts b/src/lib/slide-toggle/slide-toggle.ts
index 268330adc730..09674d2cfc6a 100644
--- a/src/lib/slide-toggle/slide-toggle.ts
+++ b/src/lib/slide-toggle/slide-toggle.ts
@@ -18,7 +18,7 @@ import {FormsModule, ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/for
 import {
   applyCssTransform,
   coerceBooleanProperty,
-  MdGestureConfig,
+  GestureConfig,
   DefaultStyleCompatibilityModeModule,
 } from '../core';
 import {Observable} from 'rxjs/Observable';
@@ -328,7 +328,7 @@ export class MdSlideToggleModule {
   static forRoot(): ModuleWithProviders {
     return {
       ngModule: MdSlideToggleModule,
-      providers: [{provide: HAMMER_GESTURE_CONFIG, useClass: MdGestureConfig}]
+      providers: [{provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig}]
     };
   }
 }
diff --git a/src/lib/slider/slider.ts b/src/lib/slider/slider.ts
index f9906be8f78f..3e539b71ad9c 100644
--- a/src/lib/slider/slider.ts
+++ b/src/lib/slider/slider.ts
@@ -13,7 +13,7 @@ import {
 import {NG_VALUE_ACCESSOR, ControlValueAccessor, FormsModule} from '@angular/forms';
 import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
 import {
-  MdGestureConfig,
+  GestureConfig,
   coerceBooleanProperty,
   coerceNumberProperty,
   DefaultStyleCompatibilityModeModule,
@@ -534,14 +534,14 @@ export class SliderRenderer {
   exports: [MdSlider, DefaultStyleCompatibilityModeModule],
   declarations: [MdSlider],
   providers: [
-    {provide: HAMMER_GESTURE_CONFIG, useClass: MdGestureConfig},
+    {provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig},
   ],
 })
 export class MdSliderModule {
   static forRoot(): ModuleWithProviders {
     return {
       ngModule: MdSliderModule,
-      providers: [{provide: HAMMER_GESTURE_CONFIG, useClass: MdGestureConfig}]
+      providers: [{provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig}]
     };
   }
 }
diff --git a/src/lib/slider/test-gesture-config.ts b/src/lib/slider/test-gesture-config.ts
index d9e83d28ad07..f4573b002035 100644
--- a/src/lib/slider/test-gesture-config.ts
+++ b/src/lib/slider/test-gesture-config.ts
@@ -1,12 +1,12 @@
 import {Injectable} from '@angular/core';
-import {MdGestureConfig} from '../core';
+import {GestureConfig} from '../core';
 
 /**
- * An extension of MdGestureConfig that exposes the underlying HammerManager instances.
+ * An extension of GestureConfig that exposes the underlying HammerManager instances.
  * Tests can use these instances to emit fake gesture events.
  */
 @Injectable()
-export class TestGestureConfig extends MdGestureConfig {
+export class TestGestureConfig extends GestureConfig {
   /**
    * A map of Hammer instances to element.
    * Used to emit events over instances for an element.
diff --git a/src/lib/snack-bar/snack-bar-container.html b/src/lib/snack-bar/snack-bar-container.html
index 23e1d44627f8..9ca2bad1e9cf 100644
--- a/src/lib/snack-bar/snack-bar-container.html
+++ b/src/lib/snack-bar/snack-bar-container.html
@@ -1 +1 @@
-<template portalHost></template>
\ No newline at end of file
+<template cdkPortalHost></template>
diff --git a/src/lib/snack-bar/snack-bar-container.scss b/src/lib/snack-bar/snack-bar-container.scss
index 049924165ac7..05ed9b53a4d6 100644
--- a/src/lib/snack-bar/snack-bar-container.scss
+++ b/src/lib/snack-bar/snack-bar-container.scss
@@ -21,7 +21,7 @@ $md-snack-bar-max-width: 568px !default;
   // Initial transformation is applied to start snack bar out of view.
   transform: translateY(100%);
 
-  @include md-high-contrast {
+  @include cdk-high-contrast {
     border: solid 1px;
   }
 }
diff --git a/src/lib/snack-bar/snack-bar.spec.ts b/src/lib/snack-bar/snack-bar.spec.ts
index 10a1b96d31df..7156212b7f09 100644
--- a/src/lib/snack-bar/snack-bar.spec.ts
+++ b/src/lib/snack-bar/snack-bar.spec.ts
@@ -11,7 +11,7 @@ import {NgModule, Component, Directive, ViewChild, ViewContainerRef} from '@angu
 import {CommonModule} from '@angular/common';
 import {MdSnackBar, MdSnackBarModule} from './snack-bar';
 import {MdSnackBarConfig} from './snack-bar-config';
-import {OverlayContainer, MdLiveAnnouncer} from '../core';
+import {OverlayContainer, LiveAnnouncer} from '../core';
 import {SimpleSnackBar} from './simple-snack-bar';
 
 
@@ -19,7 +19,7 @@ import {SimpleSnackBar} from './simple-snack-bar';
 
 describe('MdSnackBar', () => {
   let snackBar: MdSnackBar;
-  let liveAnnouncer: MdLiveAnnouncer;
+  let liveAnnouncer: LiveAnnouncer;
   let overlayContainerElement: HTMLElement;
 
   let testViewContainerRef: ViewContainerRef;
@@ -41,7 +41,7 @@ describe('MdSnackBar', () => {
     TestBed.compileComponents();
   }));
 
-  beforeEach(inject([MdSnackBar, MdLiveAnnouncer], (sb: MdSnackBar, la: MdLiveAnnouncer) => {
+  beforeEach(inject([MdSnackBar, LiveAnnouncer], (sb: MdSnackBar, la: LiveAnnouncer) => {
     snackBar = sb;
     liveAnnouncer = la;
   }));
@@ -173,7 +173,7 @@ describe('MdSnackBar', () => {
     expect(snackBarRef.instance)
       .toEqual(jasmine.any(BurritosNotification),
                'Expected the snack bar content component to be BurritosNotification');
-    expect(overlayContainerElement.textContent)
+    expect(overlayContainerElement.textContent.trim())
         .toBe('Burritos are on the way.',
               `Expected the overlay text content to be 'Burritos are on the way'`);
   });
diff --git a/src/lib/snack-bar/snack-bar.ts b/src/lib/snack-bar/snack-bar.ts
index bfc83c7e0f84..55f9dc74aefa 100644
--- a/src/lib/snack-bar/snack-bar.ts
+++ b/src/lib/snack-bar/snack-bar.ts
@@ -13,7 +13,7 @@ import {
   OverlayState,
   PortalModule,
   OVERLAY_PROVIDERS,
-  MdLiveAnnouncer,
+  LiveAnnouncer,
   DefaultStyleCompatibilityModeModule,
 } from '../core';
 import {CommonModule} from '@angular/common';
@@ -32,7 +32,7 @@ export class MdSnackBar {
   /** A reference to the current snack bar in the view. */
   private _snackBarRef: MdSnackBarRef<any>;
 
-  constructor(private _overlay: Overlay, private _live: MdLiveAnnouncer) {}
+  constructor(private _overlay: Overlay, private _live: LiveAnnouncer) {}
 
   /**
    * Creates and dispatches a snack bar with a custom component for the content, removing any
@@ -147,7 +147,7 @@ export class MdSnackBarModule {
   static forRoot(): ModuleWithProviders {
     return {
       ngModule: MdSnackBarModule,
-      providers: [MdSnackBar, OVERLAY_PROVIDERS, MdLiveAnnouncer]
+      providers: [MdSnackBar, OVERLAY_PROVIDERS, LiveAnnouncer]
     };
   }
 }
diff --git a/src/lib/tabs/tab-body.html b/src/lib/tabs/tab-body.html
index f5da5de92cd9..211fc4efe247 100644
--- a/src/lib/tabs/tab-body.html
+++ b/src/lib/tabs/tab-body.html
@@ -2,5 +2,5 @@
      [@translateTab]="_position"
      (@translateTab.start)="_onTranslateTabStarted($event)"
      (@translateTab.done)="_onTranslateTabComplete($event)">
-  <template portalHost></template>
+  <template cdkPortalHost></template>
 </div>
diff --git a/src/lib/tabs/tab-group.html b/src/lib/tabs/tab-group.html
index 3b9e3bcd0e7e..94b78d327a18 100644
--- a/src/lib/tabs/tab-group.html
+++ b/src/lib/tabs/tab-group.html
@@ -13,7 +13,7 @@
 
     <!-- If there is a label template, use it. -->
     <template [ngIf]="tab.templateLabel">
-      <template [portalHost]="tab.templateLabel"></template>
+      <template [cdkPortalHost]="tab.templateLabel"></template>
     </template>
 
     <!-- If there is not a label template, fall back to the text label. -->
diff --git a/src/lib/tooltip/tooltip.scss b/src/lib/tooltip/tooltip.scss
index a273324cb831..33aac8185327 100644
--- a/src/lib/tooltip/tooltip.scss
+++ b/src/lib/tooltip/tooltip.scss
@@ -20,7 +20,7 @@ $md-tooltip-padding: 8px;
   height: $md-tooltip-height;
   line-height: $md-tooltip-height;
 
-  @include md-high-contrast {
+  @include cdk-high-contrast {
     outline: solid 1px;
   }
 }

From 6ae31fa1074c5404f0ef64e9e316b3b452a86e8f Mon Sep 17 00:00:00 2001
From: Jeremy Elbourn <jelbourn@google.com>
Date: Fri, 16 Dec 2016 18:13:27 -0800
Subject: [PATCH 2/5] Re-export Md prefixed classes as deprecated

---
 src/lib/core/core.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/lib/core/core.ts b/src/lib/core/core.ts
index 4f5d17ff58ee..2a314300e8d7 100644
--- a/src/lib/core/core.ts
+++ b/src/lib/core/core.ts
@@ -32,6 +32,9 @@ export * from './projection/projection';
 // Platform
 export * from './platform/index';
 
+/** @deprecated */
+export {Platform as MdPlatform} from './platform/platform';
+
 // Overlay
 export {Overlay, OVERLAY_PROVIDERS} from './overlay/overlay';
 export {OverlayContainer} from './overlay/overlay-container';
@@ -58,6 +61,9 @@ export {
   LIVE_ANNOUNCER_ELEMENT_TOKEN,
 } from './a11y/live-announcer';
 
+/** @deprecated */
+export {LiveAnnouncer as MdLiveAnnouncer} from './a11y/live-announcer';
+
 export {FocusTrap} from './a11y/focus-trap';
 export {InteractivityChecker} from './a11y/interactivity-checker';
 export {isFakeMousedownFromScreenReader} from './a11y/fake-mousedown';
@@ -69,6 +75,11 @@ export {
   UniqueSelectionDispatcherListener
 } from './coordination/unique-selection-dispatcher';
 
+/** @deprecated */
+export {
+  UniqueSelectionDispatcher as MdUniqueSelectionDispatcher
+} from './coordination/unique-selection-dispatcher';
+
 export {MdLineModule, MdLine, MdLineSetter} from './line/line';
 
 // Style

From 8c894df33b8a271f3d2aabc088067659b6ae3433 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sun, 18 Dec 2016 12:07:20 +0200
Subject: [PATCH 3/5] Fix linter errors.

---
 src/lib/core/overlay/overlay-directives.spec.ts | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/lib/core/overlay/overlay-directives.spec.ts b/src/lib/core/overlay/overlay-directives.spec.ts
index 1750f02674f1..126e89fe8673 100644
--- a/src/lib/core/overlay/overlay-directives.spec.ts
+++ b/src/lib/core/overlay/overlay-directives.spec.ts
@@ -125,7 +125,8 @@ describe('Overlay directives', () => {
       fixture.componentInstance.isOpen = true;
       fixture.detectChanges();
 
-      const backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
+      const backdrop =
+          overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
       expect(backdrop.classList).toContain('md-test-class');
     });
 
@@ -190,7 +191,8 @@ describe('Overlay directives', () => {
       fixture.componentInstance.isOpen = true;
       fixture.detectChanges();
 
-      const backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
+      const backdrop =
+          overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
       backdrop.click();
       fixture.detectChanges();
 
@@ -233,7 +235,8 @@ describe('Overlay directives', () => {
 @Component({
   template: `
   <button cdk-overlay-origin #trigger="cdkOverlayOrigin">Toggle menu</button>
-  <template cdk-connected-overlay [origin]="trigger" [open]="isOpen" [width]="width" [height]="height"
+  <template cdk-connected-overlay [open]="isOpen" [width]="width" [height]="height"
+            [origin]="trigger"
             [hasBackdrop]="hasBackdrop" backdropClass="md-test-class"
             (backdropClick)="backdropClicked=true" [offsetX]="offsetX" [offsetY]="offsetY"
             (positionChange)="positionChangeHandler($event)" (attach)="attachHandler()"

From 7503c7dbf345880b4ea331f775951b44fdb0fa68 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sun, 18 Dec 2016 12:30:27 +0200
Subject: [PATCH 4/5] Change the overlay variable prefixes to `cdk-` and remove
 dependency on theming.

---
 src/lib/core/overlay/_overlay.scss | 12 +++++-------
 src/lib/core/style/_variables.scss |  9 ++++++---
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/lib/core/overlay/_overlay.scss b/src/lib/core/overlay/_overlay.scss
index 51a6d0ddaa10..4b4f0ef29f36 100644
--- a/src/lib/core/overlay/_overlay.scss
+++ b/src/lib/core/overlay/_overlay.scss
@@ -1,6 +1,4 @@
 @import '../style/variables';
-@import '../theming/palette';
-@import '../theming/theming';
 
 
 @mixin cdk-overlay() {
@@ -18,7 +16,7 @@
   // The overlay-container is an invisible element which contains all individual overlays.
   .cdk-overlay-container {
     position: fixed;
-    z-index: $md-z-index-overlay-container;
+    z-index: $cdk-z-index-overlay-container;
   }
 
   // We use an extra wrapper element in order to use make the overlay itself a flex item.
@@ -28,7 +26,7 @@
   .cdk-global-overlay-wrapper {
     display: flex;
     position: absolute;
-    z-index: $md-z-index-overlay;
+    z-index: $cdk-z-index-overlay;
   }
 
   // A single overlay pane.
@@ -36,7 +34,7 @@
     position: absolute;
     pointer-events: auto;
     box-sizing: border-box;
-    z-index: $md-z-index-overlay;
+    z-index: $cdk-z-index-overlay;
   }
 
   .cdk-overlay-backdrop {
@@ -47,7 +45,7 @@
     left: 0;
     right: 0;
 
-    z-index: $md-z-index-overlay-backdrop;
+    z-index: $cdk-z-index-overlay-backdrop;
     pointer-events: auto;
 
     // TODO(jelbourn): figure out if there are actually spec'ed colors for both light and dark
@@ -61,7 +59,7 @@
   }
 
   .cdk-overlay-dark-backdrop {
-    background: md-color($md-grey, 900); // TODO(crisbeto): make this theme-independent?
+    background: $cdk-overlay-dark-backdrop-background;
   }
 
   .cdk-overlay-transparent-backdrop {
diff --git a/src/lib/core/style/_variables.scss b/src/lib/core/style/_variables.scss
index 22567e9c34d1..c80127f5cf7f 100644
--- a/src/lib/core/style/_variables.scss
+++ b/src/lib/core/style/_variables.scss
@@ -22,9 +22,12 @@ $z-index-drawer: 100 !default;
 // We want overlays to always appear over user content, so set a baseline
 // very high z-index for the overlay container, which is where we create the new
 // stacking context for all overlays.
-$md-z-index-overlay-container: 1000;
-$md-z-index-overlay: 1000;
-$md-z-index-overlay-backdrop: 1;
+$cdk-z-index-overlay-container: 1000;
+$cdk-z-index-overlay: 1000;
+$cdk-z-index-overlay-backdrop: 1;
+
+// Background color for all of the backdrops
+$cdk-overlay-dark-backdrop-background: rgba(0, 0, 0, 0.6);
 
 
 // Global constants

From c4cb79127f1a29bac1935802f9281c816678578b Mon Sep 17 00:00:00 2001
From: Jeremy Elbourn <jelbourn@google.com>
Date: Mon, 19 Dec 2016 13:29:05 -0800
Subject: [PATCH 5/5] Add backwards compatible selectors for core directives

---
 src/lib/core/a11y/focus-trap.ts            |  2 +-
 src/lib/core/overlay/overlay-directives.ts |  4 ++--
 src/lib/core/portal/portal-directives.ts   | 12 +++++++++---
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/lib/core/a11y/focus-trap.ts b/src/lib/core/a11y/focus-trap.ts
index a767e872b9cf..14792284a294 100644
--- a/src/lib/core/a11y/focus-trap.ts
+++ b/src/lib/core/a11y/focus-trap.ts
@@ -13,7 +13,7 @@ import {coerceBooleanProperty} from '../coercion/boolean-property';
  */
 @Component({
   moduleId: module.id,
-  selector: 'cdk-focus-trap',
+  selector: 'cdk-focus-trap, focus-trap',
   templateUrl: 'focus-trap.html',
   encapsulation: ViewEncapsulation.None,
 })
diff --git a/src/lib/core/overlay/overlay-directives.ts b/src/lib/core/overlay/overlay-directives.ts
index 06d81f6ac1d6..2933c9906a03 100644
--- a/src/lib/core/overlay/overlay-directives.ts
+++ b/src/lib/core/overlay/overlay-directives.ts
@@ -40,7 +40,7 @@ let defaultPositionList = [
  * ConnectedPositionStrategy.
  */
 @Directive({
-  selector: '[cdk-overlay-origin]',
+  selector: '[cdk-overlay-origin], [overlay-origin]',
   exportAs: 'cdkOverlayOrigin',
 })
 export class OverlayOrigin {
@@ -57,7 +57,7 @@ export class OverlayOrigin {
  * Directive to facilitate declarative creation of an Overlay using a ConnectedPositionStrategy.
  */
 @Directive({
-  selector: '[cdk-connected-overlay]',
+  selector: '[cdk-connected-overlay], [connected-overlay]',
   exportAs: 'cdkConnectedOverlay'
 })
 export class ConnectedOverlayDirective implements OnDestroy {
diff --git a/src/lib/core/portal/portal-directives.ts b/src/lib/core/portal/portal-directives.ts
index 81e2660a84ab..83fd34fe333b 100644
--- a/src/lib/core/portal/portal-directives.ts
+++ b/src/lib/core/portal/portal-directives.ts
@@ -6,7 +6,8 @@ import {
     TemplateRef,
     ComponentFactoryResolver,
     ViewContainerRef,
-    OnDestroy
+    OnDestroy,
+    Input,
 } from '@angular/core';
 import {Portal, TemplatePortal, ComponentPortal, BasePortalHost} from './portal';
 
@@ -21,7 +22,7 @@ import {Portal, TemplatePortal, ComponentPortal, BasePortalHost} from './portal'
  * </template>
  */
 @Directive({
-  selector: '[cdk-portal]',
+  selector: '[cdk-portal], [portal]',
   exportAs: 'cdkPortal',
 })
 export class TemplatePortalDirective extends TemplatePortal {
@@ -39,7 +40,7 @@ export class TemplatePortalDirective extends TemplatePortal {
  * <template [cdkPortalHost]="greeting"></template>
  */
 @Directive({
-  selector: '[cdkPortalHost]',
+  selector: '[cdkPortalHost], [portalHost]',
   inputs: ['portal: cdkPortalHost']
 })
 export class PortalHostDirective extends BasePortalHost implements OnDestroy {
@@ -52,6 +53,11 @@ export class PortalHostDirective extends BasePortalHost implements OnDestroy {
     super();
   }
 
+  /** @deprecated */
+  @Input('portalHost')
+  get _deprecatedPortal() { return this.portal; }
+  set _deprecatedPortal(v) { this.portal = v; }
+
   get portal(): Portal<any> {
     return this._portal;
   }