component(): sidenav component.

src/components/button/button.scss

@@ -89,7 +89,7 @@ $md-fab-mini-line-height: rem(4.00) !default;
   // Use a CSS class for focus style because we only want to render the focus style when
   // the focus originated from a keyboard event (see JS source for more details).
   &:hover, &.md-button-focus {
-    background: md-color($md-background, 500, 0.2);
+    background: md-color($md-background, background, 0.2);
   }
 
   &.md-primary {
@@ -157,8 +157,8 @@ $md-fab-mini-line-height: rem(4.00) !default;
 [md-raised-button] {
   @include md-raised-button();
 
-  color: md-color($md-background, default-contrast);
-  background-color: md-color($md-background, 50);
+  color: md-color($md-foreground, text);
+  background-color: md-color($md-background, background);
 }
 
 [md-fab] {

src/components/card/card.scss

@@ -15,7 +15,7 @@ md-card {
   border-radius: $md-card-border-radius;
   box-shadow: $md-shadow-bottom-z-1;
   font-family: $font-family;
-  background: md-color($md-background, 50);       // TODO(kara): use updated background palette
+  background: md-color($md-background, card);
 }
 
 md-card:hover {

src/components/sidenav/README.md

@@ -0,0 +1,83 @@
+# MdSidenav
+
+MdSidenav is the side navigation component for Material 2. It is composed of two components; `<md-sidenav-layout>` and `<md-sidenav>`.
+
+## Screenshots
+
+<img src="https://material.angularjs.org/material2_assets/sidenav-example.png">
+
+
+## `<md-sidenav-layout>`
+
+The parent component. Contains the code necessary to coordinate one or two sidenav and the backdrop.
+
+### Properties
+
+| Name | Description |
+| --- | --- |
+| `start` | The start aligned `MdSidenav` instance, or `null` if none is specified. In LTR direction, this is the sidenav shown on the left side. In RTL direction, it will show on the right. There can only be one sidenav on either side. |
+| `end` | The end aligned `MdSidenav` instance, or `null` if none is specified. This is the sidenav opposing the `start` sidenav. There can only be one sidenav on either side. |
+
+## `<md-sidenav>`
+
+The sidenav panel.
+
+### Bound Properties
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `align` | `"start"|"end"` | The alignment of this sidenav. In LTR direction, `"start"` will be shown on the left, `"end"` on the right. In RTL, it is reversed. `"start"` is used by default. An exception will be thrown if there are more than 1 sidenav on either side. |
+| `mode` | `"over"|"push"|"side"` | The mode or styling of the sidenav, default being `"over"`. With `"over"` the sidenav will appear above the content, and a backdrop will be shown. With `"push"` the sidenav will push the content of the `<md-sidenav-layout>` to the side, and show a backdrop over it. `"side"` will resize the content and keep the sidenav opened. Clicking the backdrop will close sidenavs that do not have `mode="side"`. |
+| `opened` | `boolean` | Whether or not the sidenav is opened. Use this binding to open/close the sidenav. |
+
+### Events
+
+| Name | Description |
+| --- | --- |
+| `open-start` | Emitted when the sidenav is starting opening. This should only be used to coordinate animations. |
+| `close-start` | Emitted when the sidenav is starting closing. This should only be used to coordinate animations. |
+| `open` | Emitted when the sidenav is done opening. Use this for, e.g., setting focus on controls or updating state. |
+| `close` | Emitted when the sidenav is done closing. |
+
+### Methods
+
+| Signature | Description |
+| --- | --- |
+| `open(): Promise<void>` | Open the sidenav. Equivalent to `opened = true`. Returns a promise that will resolve when the animation completes, or be rejected if the animation was cancelled. |
+| `close(): Promise<void>` | Close the sidenav. Equivalent to `opened = false`. Returns a promise that will resolve when the animation completes, or be rejected if the animation was cancelled. |
+| `toggle(): Promise<void>` | Toggle the sidenav. This is equivalent to `opened = !opened`. Returns a promise that will resolve when the animation completes, or be rejected if the animation was cancelled. |
+
+### Notes
+
+The `<md-sidenav>` will resize based on its content. You can also set its width in CSS, like so:
+
+```css
+md-sidenav {
+  width: 200px;
+}
+```
+
+Try to avoid percent based width as `resize` events are not (yet) supported.
+
+## Examples
+
+Here's a simple example of using the sidenav:
+
+```html
+<app>
+  <md-sidenav-layout>
+    <md-sidenav #start (open)="mybutton.focus()">
+      Start Sidenav.
+      <br>
+      <md-button #mybutton (click)="start.close()">Close</button>
+    </md-sidenav>
+    <md-sidenav #end align="end">
+      End Sidenav.
+      <md-button (click)="end.close()">Close</button>
+    </md-sidenav>
+
+    My regular content. This will be moved into the proper DOM at runtime.
+  </md-sidenav-layout>
+</app>
+```
+

src/components/sidenav/sidenav.html

@@ -0,0 +1,11 @@
+<div class="md-sidenav-backdrop" (click)="onBackdropClick_()"
+     [class.md-sidenav-shown]="showBackdrop_"></div>
+
+<ng-content select="md-sidenav"></ng-content>
+
+<md-content [style.margin-left.px]="marginLeft_"
+            [style.margin-right.px]="marginRight_"
+            [style.left.px]="positionLeft_"
+            [style.right.px]="positionRight_">
+  <ng-content></ng-content>
+</md-content>

src/components/sidenav/sidenav.scss

@@ -0,0 +1,143 @@
+@import "default-theme";
+@import "mixins";
+@import "variables";
+@import "shadows";
+
+
+// We use invert() here to have the darken the background color expected to be used. If the
+// background is light, we use a dark backdrop. If the background is dark, we use a light backdrop.
+$md-sidenav-backdrop-color: invert(md-color($md-background, card, 0.6)) !default;
+$md-sidenav-background-color: md-color($md-background, dialog) !default;
+$md-sidenav-push-background-color: md-color($md-background, dialog) !default;
+
+
+/**
+ * Mixin to help with defining LTR/RTL `transform: translateX()` values.
+ * @param $open The translation value when the sidenav is opened.
+ * @param $close The translation value when the sidenav is closed.
+ */
+@mixin md-sidenav-transition($open, $close) {
+  transform: translateX($close);
+
+  &.md-sidenav-closed {
+    // We use `visibility: hidden | visible` because `display: none` will not animate any
+    // transitions, while visibility will interpolate transitions properly.
+    // see https://developer.mozilla.org/en-US/docs/Web/CSS/visibility, the Interpolation
+    // section.
+    visibility: hidden;
+  }
+  &.md-sidenav-closing {
+    transform: translateX($close);
+    will-change: transform;
+  }
+  &.md-sidenav-opening {
+    visibility: visible;
+    transform: translateX($open);
+    will-change: transform;
+    box-shadow: $md-shadow-bottom-z-1;
+  }
+  &.md-sidenav-opened {
+    transform: translateX($open);
+    box-shadow: $md-shadow-bottom-z-1;
+  }
+}
+
+
+:host {
+  // We need a stacking context here so that the backdrop and drawers are clipped to the
+  // MdSidenavLayout. This creates a new z-index stack so we use low numbered z-indices.
+  // We create another stacking context in the `<md-content>` and in each sidenav so that
+  // the application content does not get messed up with our own CSS.
+  @include md-stacking-context();
+
+  box-sizing: border-box;
+
+  // Need this to take up space in the layout.
+  display: block;
+
+  // Hide the sidenavs when they're closed.
+  overflow-x: hidden;
+
+  transition: margin-left $swift-ease-out-duration $swift-ease-out-timing-function,
+              margin-right $swift-ease-out-duration $swift-ease-out-timing-function;
+
+  & > .md-sidenav-backdrop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    display: block;
+
+    // Because of the new stacking context, the z-index stack is new and we can use our own
+    // numbers.
+    z-index: 2;
+
+    // We use `visibility: hidden | visible` because `display: none` will not animate any
+    // transitions, while visibility will interpolate transitions properly.
+    // see https://developer.mozilla.org/en-US/docs/Web/CSS/visibility, the Interpolation
+    // section.
+    visibility: hidden;
+
+    &.md-sidenav-shown {
+      visibility: visible;
+      background-color: $md-sidenav-backdrop-color;
+      transition: background-color $swift-ease-out-duration $swift-ease-out-timing-function;
+    }
+  }
+
+  & > md-content {
+    @include md-stacking-context();
+
+    display: block;
+    transition: margin-left $swift-ease-out-duration $swift-ease-out-timing-function,
+                margin-right $swift-ease-out-duration $swift-ease-out-timing-function,
+                left $swift-ease-out-duration $swift-ease-out-timing-function,
+                right $swift-ease-out-duration $swift-ease-out-timing-function;
+  }
+
+  > md-sidenav {
+    @include md-stacking-context();
+
+    display: block;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    z-index: 3;
+
+    background-color: $md-sidenav-background-color;
+
+    transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
+
+    @include md-sidenav-transition(0, -100%);
+
+    &.md-sidenav-push {
+      background-color: $md-sidenav-push-background-color;
+    }
+
+    &.md-sidenav-side {
+      z-index: 1;
+    }
+
+    &.md-sidenav-end {
+      right: 0;
+
+      @include md-sidenav-transition(0, 100%);
+    }
+  }
+}
+
+
+:host-context([dir="rtl"]) {
+  > md-sidenav {
+    @include md-sidenav-transition(0, 100%);
+
+    &.md-sidenav-end {
+      left: 0;
+      right: auto;
+
+      @include md-sidenav-transition(0, -100%);
+    }
+  }
+}