feat(checkbox): drive component with native checkbox (#415)

Also fixes lack of visual focus state.

closes #250

Author: robertmesserle

src/components/checkbox/checkbox.html

@@ -1,5 +1,18 @@
-<div class="md-checkbox-layout">
+<label class="md-checkbox-layout">
   <div class="md-checkbox-inner-container">
+    <input class="md-checkbox-input" type="checkbox"
+           [id]="inputId"
+           [checked]="checked"
+           [disabled]="disabled"
+           [name]="name"
+           [tabIndex]="tabindex"
+           [indeterminate]="indeterminate"
+           [attr.aria-label]="ariaLabel"
+           [attr.aria-labelledby]="ariaLabelledby"
+           (focus)="onInputFocus()"
+           (blur)="onInputBlur()"
+           (change)="onInteractionEvent($event)">
+    <div class="md-ink-ripple"></div>
     <div class="md-checkbox-frame"></div>
     <div class="md-checkbox-background">
       <svg version="1.1"
@@ -16,7 +29,7 @@
       <div class="md-checkbox-mixedmark"></div>
     </div>
   </div>
-  <label [id]="labelId">
+  <span class="md-checkbox-label">
     <ng-content></ng-content>
-  </label>
-</div>
+  </span>
+</label>

src/components/checkbox/checkbox.scss

@@ -1,6 +1,7 @@
 @import "default-theme";
 @import "theme-functions";
 @import "variables";
+@import "mixins";
 
 /** The width/height of the checkbox element. */
 $md-checkbox-size: $md-toggle-size !default;
@@ -217,11 +218,8 @@ $_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1)
 }
 
 md-checkbox {
-  cursor: pointer;
-
-  &:focus {
-    // TODO(traviskaufman): Add ink ripple on focus state, once ripple is implemented.
-    outline: none;
+  &, label {
+    cursor: pointer;
   }
 }
 
@@ -251,7 +249,7 @@ md-checkbox {
 }
 
 // TODO(kara): Remove this style when fixing vertical baseline
-.md-checkbox-layout label {
+.md-checkbox-layout .md-checkbox-label {
   line-height: 24px;
 }
 
@@ -461,3 +459,11 @@ md-checkbox {
     }
   }
 }
+
+// Underlying native input element.
+// Visually hidden but still able to respond to focus.
+.md-checkbox-input {
+  @include md-visually-hidden;
+}
+
+@include md-temporary-ink-ripple(checkbox);