feat(tabs): fixed tabs

.gitignore

@@ -33,3 +33,4 @@
 /libpeerconnection.log
 npm-debug.log
 testem.log
+/.chrome

.travis.yml

@@ -2,7 +2,7 @@ language: node_js
 sudo: false
 
 node_js:
-  - '5.6.0'
+  - '6.9.1'
 
 addons:
   apt:

CONTRIBUTING.md

@@ -150,8 +150,7 @@ To ensure consistency throughout the source code, keep these rules in mind as yo
 * All features or bug fixes **must be tested** by one or more specs (unit-tests).
 * All public API methods **must be documented**. (Details TBD).
 * We follow [Google's JavaScript Style Guide][js-style-guide], but wrap all code at
-  **100 characters**. An automated formatter is available, see
-  [DEVELOPER.md](DEVELOPER.md#clang-format).
+  **100 characters**.
 
 ## <a name="commit"></a> Commit Message Guidelines
 
@@ -234,7 +233,7 @@ changes to be accepted, the CLA must be signed. It's a quick process, we promise
 [coc]: https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md
 [commit-message-format]: https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/preview
 [corporate-cla]: http://code.google.com/legal/corporate-cla-v1.0.html
-[dev-doc]: https://github.com/angular/material2/blob/master/DEVELOPER.md
+[dev-doc]: https://github.com/angular/material2/blob/master/DEV_ENVIRONMENT.md
 [github]: https://github.com/angular/material2
 [gitter]: https://gitter.im/angular/material2
 [individual-cla]: http://code.google.com/legal/individual-cla-v1.0.html

GETTING_STARTED.md

@@ -33,9 +33,11 @@ import { MaterialModule } from '@angular/material';
 export class PizzaPartyAppModule { }
 ```
 
-### Including core and theme styles:
-See the [theming guide](docs/theming.md) for more information.
+## Include the core and theme styles:
+This is **required** to apply all of the core and theme styles to your application. You can either
+use a pre-built theme, or define your own custom theme.
 
+:trident:  See the [theming guide](docs/theming.md) for instructions.
 
 ### Additional setup for `md-slide-toggle` and `md-slider`:
 The slide-toggle and slider components have a dependency on [HammerJS](http://hammerjs.github.io/).
@@ -44,16 +46,31 @@ Add HammerJS to your application via [npm](https://www.npmjs.com/package/hammerj
 (such as the [Google CDN](https://developers.google.com/speed/libraries/#hammerjs)), or served 
 directly from your app.
 
+## Configuring SystemJS
+If your project is using SystemJS for module loading, you will need to add `@angular/material` 
+to the SystemJS configuration:
+
+```js
+System.config({
+  // existing configuration options
+  map: {
+    ...,
+    '@angular/material': 'npm:@angular/material/material.umd.js'
+  }
+});
+```
+
 ### [Optional] Using Material Design icons with `md-icon`:
 
-- If you want to use Material Design icons, load the Material Design font in your `index.html`.  
-`md-icon` supports any font icons or svg icons, so this is only one potential option.
+- If you want to use Material Design icons in addition to Angular Material components, 
+load the Material Design font in your `index.html`.  
+`md-icon` supports any font icons or svg icons, so this is only one option for an icon source.
 
 **src/index.html**
 ```html
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 ```
 
-### Sample Angular Material 2 projects
+## Sample Angular Material 2 projects
 - [Material 2 Sample App](https://github.com/jelbourn/material2-app)
 - [Angular Connect 2016 Demo](https://github.com/kara/leashed-in)

README.md

@@ -1,5 +1,5 @@
 # Material Design for Angular 2
-[![NPM Version](https://badge.fury.io/js/%40angular2-material%2Fcore.svg)](https://www.npmjs.com/package/%2540angular2-material%2Fcore)
+[![npm version](https://badge.fury.io/js/%40angular%2Fmaterial.svg)](https://www.npmjs.com/package/%40angular%2Fmaterial)
 [![Build Status](https://travis-ci.org/angular/material2.svg?branch=master)](https://travis-ci.org/angular/material2)
 [![Gitter](https://badges.gitter.im/angular/material2.svg)](https://gitter.im/angular/material2?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
 
@@ -28,13 +28,15 @@ and which pieces are blocked) and make a comment.
 Also see our [`Good for community contribution`](https://github.com/angular/material2/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+for+community+contribution%22) 
 label.
 
-High level items planned for September 2016:
-* Work on Angular core towards 2.0.0 final
-* Preparing for conferences (Angular Connect and ng-europe)
-* Final features for dialog
-* Initial version of snackbar.
-* Additional behaviors for menu, start design for select.
-* Finalize high-level design details for data-table.
+High level items planned for November 2016:
+* Initial version of md-select
+* Continued bug bashing
+* Initial versions of autocomplete and chips
+* AoT compile e2e app
+* Continue work on https://material.angular.io site
+* Major refactoring for md-input
+* Tabs animations
+* Expanding e2e test coverage
 
 
 #### Feature status:
@@ -60,17 +62,17 @@ High level items planned for September 2016:
 | menu             | Initial version, needs enhancements | [README][17] |   [#119][0119] |
 | tooltip          | Initial version, needs enhancements | [README][18] |              - |
 | ripples          |  Available, but needs to be applied | [README][19] |   [#108][0108] |
-| dialog           |  Started, not yet ready for release |           -  |   [#114][0114] |
-| snackbar / toast |                    Proof-of-concept |           -  |   [#115][0115] |
+| dialog           |  Started, not yet ready for release | [README][22] |   [#114][0114] |
+| snackbar / toast | Initial version, needs enhancements | [README][21] |   [#115][0115] |
 | select           |                      Design started |           -  |   [#118][0118] |
-| textarea         |                         Not started |           -  |   [#546][0546] |
-| autocomplete     |                         Not started |           -  |   [#117][0117] |
-| chips            |                         Not started |           -  |   [#120][0120] |
-| theming          | In master, not released, some bugs  | [Guide][20]  |   [#123][0123] |
+| textarea         |                             Started |           -  |   [#546][0546] |
+| autocomplete     |                      Design started |           -  |   [#117][0117] |
+| chips            |                      Design started |           -  |   [#120][0120] |
+| theming          | Initial version, needs enhancements | [Guide][20]  |              - |
 | prod build       |                         Not started |           -  |              - |
 | docs site        |   UX design and tooling in progress |           -  |              - |
 | typography       |                         Not started |           -  |   [#205][0205] |
-| layout           |                         Not started |           -  |              - |
+| layout           |      Design in-progress, prototyped |           -  |              - |
 | fab speed-dial   |                         Not started |           -  |   [#860][0860] |
 | fab toolbar      |                         Not started |           -  |              - |
 | bottom-sheet     |                         Not started |           -  |              - |
@@ -100,6 +102,8 @@ High level items planned for September 2016:
 [18]: https://github.com/angular/material2/blob/master/src/lib/tooltip/README.md
 [19]: https://github.com/angular/material2/blob/master/src/lib/core/ripple/README.md
 [20]: https://github.com/angular/material2/blob/master/docs/theming.md
+[21]: https://github.com/angular/material2/blob/master/src/lib/snack-bar/README.md
+[22]: https://github.com/angular/material2/blob/master/src/lib/dialog/README.md
 
 [0107]: https://github.com/angular/material2/issues/107
 [0119]: https://github.com/angular/material2/issues/119

docs/theming-your-components.md

@@ -0,0 +1,69 @@
+#Theming your custom components
+In order to style your own components with Angular Material's tooling, the component's styles must be defined with Sass.
+
+## Using `@mixin` to automatically apply a theme
+
+### Why using `@mixin`
+The advantage of using a `@mixin` function is that when you change your theme, every file that uses it will be updated automatically.
+Calling it with a different theme argument allow multiple themes within the app or component.
+
+### How to use `@mixin`
+We can better theming our custom components adding a `@mixin` function to its theme file and then calling this function to apply a theme.
+
+All you need is to create a `@mixin` function in the custom-component-theme.scss
+
+```sass
+// Import all the tools needed to customize the theme and extract parts of it
+@import '~@angular/material/core/theming/all-theme';
+
+// Define a mixin that accepts a theme and outputs the color styles for the component.
+@mixin candy-carousel-theme($theme) {
+  // Extract whichever individual palettes you need from the theme.
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+
+  // Use md-color to extract individual colors from a palette as necessary.
+  .candy-carousel {
+    background-color: md-color($primary);
+    border-color: md-color($accent, A400);
+  }
+}
+```
+Now you just have have to call the `@mixin` function to apply the theme:
+
+```sass
+// Import a pre-built theme
+@import '~@angular/material/core/theming/prebuilt/deep-purple-amber';
+// Import your custom input theme file so you can call the custom-input-theme function
+@import 'app/candy-carousel/candy-carousel-theme.scss';
+
+// Using the $theme variable from the pre-built theme you can call the theming function
+@include candy-carousel-theme($theme);
+```
+
+For more details about the theming functions, see the comments in the
+[source](https://github.com/angular/material2/blob/master/src/lib/core/theming/_theming.scss).
+
+### Best practices using `@mixin`
+When using `@mixin`, the theme file should only contain the definitions that are affected by the passed-in theme.
+
+All styles that are not affected by the theme should be placed in a `candy-carousel.scss` file. This file should contain everything that is not affected by the theme like sizes, transitions...
+
+Styles that are affected by the theme should be placed in a separated theming file as `_candy-carousel-theme.scss` and the file should have a `_` before the name. This file should contain the `@mixin` function responsible for applying the theme to the component.
+
+
+## Using colors from a pallete
+You can consume the theming functions from the `@angular/material/core/theming/theming` and Material pallete vars from `@angular/material/core/theming/palette`. You can use the `md-color` function to extract a specific color from a palette. For example:
+
+```scss
+// Import theming functions
+@import '~@angular/material/core/theming/theming';
+// Import your custom theme
+@import 'src/unicorn-app-theme.scss';
+
+// Use md-color to extract individual colors from a palette as necessary.
+.candy-carousel {
+  background-color: md-color($candy-app-primary);
+  border-color: md-color($candy-app-accent, A400);
+}
+```

docs/theming.md

@@ -3,9 +3,9 @@
 
 ### What is a theme?
 A **theme** is the set of colors that will be applied to the Angular Material components. The
-library's approach to theming is based on the guidance from the [Material Design spec][1]. 
+library's approach to theming is based on the guidance from the [Material Design spec][1].
 
-In Angular Material, a theme is created by composing multiple palettes. In particular, 
+In Angular Material, a theme is created by composing multiple palettes. In particular,
 a theme consists of:
 * A primary palette: colors most widely used across all screens and components.
 * An accent palette: colors used for the floating action button and interactive elements.
@@ -21,9 +21,9 @@ app doesn't have to spend cycles generating theme styles on startup.
 ### Using a pre-built theme
 Angular Material comes prepackaged with several pre-built theme css files. These theme files also
 include all of the styles for core (styles common to all components), so you only have to include a
-single css file for Angular Material in your app. 
+single css file for Angular Material in your app.
 
-You can include a theme file directly into your application from 
+You can include a theme file directly into your application from
 `@angular/material/core/theming/prebuilt`
 
 If you're using Angular CLI, this is as simple as including one line
@@ -35,8 +35,8 @@ in your `style.css`  file:
 Alternatively, you can just reference the file directly. This would look something like
 ```html
 <link href="node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
-``` 
-The actual path will depend on your server setup. 
+```
+The actual path will depend on your server setup.
 
 You can also concatenate the file with the rest of your application's css.
 
@@ -56,25 +56,25 @@ the corresponding styles. A typical theme file will look something like this:
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue.
-$primary: md-palette($md-indigo);
-$accent:  md-palette($md-pink, A200, A100, A400);
+$candy-app-primary: md-palette($md-indigo);
+$candy-app-accent:  md-palette($md-pink, A200, A100, A400);
 
 // The warn palette is optional (defaults to red).
-$warn:    md-palette($md-red);
+$candy-app-warn:    md-palette($md-red);
 
 // Create the theme object (a Sass map containing all of the palettes).
-$theme: md-light-theme($primary, $accent, $warn);
+$candy-app-theme: md-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
 
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
-@include angular-material-theme($theme);
+@include angular-material-theme($candy-app-theme);
 ```
 
 You only need this single Sass file; you do not need to use Sass to style the rest of your app.
 
-If you are using the Angular CLI, support for compiling Sass to css is built-in; you only have to 
-add a new entry to the `"styles"` list in `angular-cli.json` pointing to the theme 
+If you are using the Angular CLI, support for compiling Sass to css is built-in; you only have to
+add a new entry to the `"styles"` list in `angular-cli.json` pointing to the theme
 file (e.g., `unicorn-app-theme.scss`).
 
 If you're not using the Angular CLI, you can use any existing Sass tooling to build the file (such
@@ -87,8 +87,8 @@ and then include the output file in your application.
 The theme file can be concatenated and minified with the rest of the application's css.
 
 #### Multiple themes
-You can extend the example above to define a second (or third or fourth) theme that is gated by 
-some selector. For example, we could append the following to the example above to define a 
+You can extend the example above to define a second (or third or fourth) theme that is gated by
+some selector. For example, we could append the following to the example above to define a
 secondary dark theme:
 ```scss
 .unicorn-dark-theme {
@@ -97,26 +97,16 @@ secondary dark theme:
   $dark-warn:    md-palette($md-deep-orange);
 
   $dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn);
-  
-@include angular-material-theme($dark-theme);   
+
+  @include angular-material-theme($dark-theme);   
 }
 ```
 
 With this, any element inside of a parent with the `unicorn-dark-theme` class will use this
 dark theme.
 
-### Styling your own components
-In order to style your own components with our tooling, the component's styles must be defined 
-with Sass. 
-
-You can consume the theming functions and variables from the `@angular/material/core/theming`.
-You can use the `md-color` function to extract a specific color from a palette. For example:
-```scss
-.unicorn-carousel {
-  background-color: md-color($primary);
-  color: md-color($primary, default-contrast);
-}
-```
+### Theming your own components
+For more details about theming your own components, see [theming-your-components.md](https://github.com/angular/material2/blob/master/docs/theming-your-components.md)
 
 ### Future work
 * Once CSS variables (custom properties) are available in all the browsers we support,

e2e/components/checkbox/checkbox.e2e.ts

@@ -0,0 +1,18 @@
+describe('checkbox', function () {
+  describe('check behavior', function () {
+    beforeEach(function() {
+      browser.get('/checkbox');
+    });
+    it('should be checked when clicked, and be unchecked when clicked again', function () {
+      element(by.id('test-checkbox')).click();
+      element(by.css('input[id=input-test-checkbox]')).getAttribute('checked').then((value: string) => {
+        expect(value).toBeTruthy('Expect checkbox "checked" property to be true');
+      });
+
+      element(by.id('test-checkbox')).click();
+      element(by.css('input[id=input-test-checkbox]')).getAttribute('checked').then((value: string) => {
+        expect(value).toBeFalsy('Expect checkbox "checked" property to be false');
+      });
+    });
+  });
+});