checkboxes conform specs

addon/components/paper-checkbox.js

@@ -1,30 +1,37 @@
 import Ember from 'ember';
 import BaseFocusable from './base-focusable';
+import RippleMixin from '../mixins/ripple-mixin';
 
-export default BaseFocusable.extend({
+var KEY_CODE_SPACE = 32;
+
+export default BaseFocusable.extend(RippleMixin,{
   classNames:['paper-checkbox'],
-  classNameBindings:['checked'],
+  classNameBindings:['checked:paper-checked'],
+
+  //Alow element to be focusable by supplying a tabindex 0
+  attributeBindings:['tabindex'],
+  tabindex:function(){
+    return this.get('disabled') ? '-1' : '0';
+  }.property('disabled'),
+  checked:false,
+
   toggle:true,
-  checked:Ember.computed.alias('active'),
-  didInsertElement:function(){
-    this._super();
-    this.$('.paper-checkbox-mark').on('animationend MSAnimationEnd webkitAnimationEnd',
-      Ember.$.proxy(this.checkboxAnimationEnd,this));
-  },
-  willDestroyElement:function(){
-    this._super();
-    this.$('.paper-checkbox-mark').off('animationend MSAnimationEnd webkitAnimationEnd');
+  rippleContainerSelector:'.paper-container',
+
+  center: true,
+  animationDuration: 300,
+  mousedownPauseTime: 180,
+  animationName: 'inkRippleCheckbox',
+  animationTimingFunction: 'linear',
+
+  click:function(){
+    if(!this.get('disabled')){
+      this.toggleProperty('checked');
+    }
   },
-  checkedDidChange:Ember.observer('checked',function(){
-    this.setProperties({
-      checkmark: !this.get('checked'),
-      box: this.get('checked')
-    });
-  }).on('didInsertElement'),
-  checkboxAnimationEnd:function(){
-    this.setProperties({
-      checkmark: this.get('checked'),
-      box: !this.get('checked')
-    });
+  keyPress:function(ev){
+    if(ev.which === KEY_CODE_SPACE) {
+      this.click();
+    }
   }
 });

addon/mixins/ripple-mixin.js

@@ -56,11 +56,14 @@ export default Ember.Mixin.create({
     //TODO handle mouse hold case
   },
 
+  // Override to place ripple container in a different element,
+  // otherwise it will be appended on root element
+  rippleContainerSelector:'',
   rippleContainer:null,
   createRippleContainer:function(){
     if(!this.rippleContainer){
       this.rippleContainer = Ember.$('<div class="paper-ripple-container">');
-      this.$().append(this.rippleContainer);
+      this.$(this.rippleContainerSelector).append(this.rippleContainer);
     }
     return this.rippleContainer;
   },

app/templates/components/paper-checkbox.hbs

@@ -1,10 +1,8 @@
-<div class="paper-checkbox-container">
-  {{paper-ripple recenteringTouch=true
-      lastDownEvent=lastDownEvent lastUpEvent=lastUpEvent classNames="circle"}}
-  <div {{bind-attr class="checked:checked:unchecked checkmark box :paper-checkbox-mark"}}></div>
+<div class="paper-container">
+  <div class="paper-icon"></div>
 </div>
 {{#if template}}
-  <div class="paper-checkbox-label">
+  <div class="paper-label">
     {{yield}}
   </div>
-{{/if}}
+{{/if}}

index.js

@@ -1,5 +1,7 @@
 'use strict';
 
+var path = require('path');
+
 module.exports = {
   name: 'ember-paper',
   blueprintsPath: function blueprintsPath() {
@@ -16,6 +18,7 @@ module.exports = {
     app.import('vendor/ember-paper/paper-ripple.css');
     app.import('vendor/ember-paper/paper-shadow.css');
     app.import('vendor/ember-paper/paper-button.css');
+    app.import('vendor/ember-paper/paper-checkbox.css');
     app.import('vendor/ember-paper/styles.css');
 
     app.import(app.bowerDirectory+'/hammerjs/hammer.js');

vendor/ember-paper/paper-checkbox.css

@@ -0,0 +1,87 @@
+/* PAPER CHECKBOX */
+.paper-checkbox {
+  display: block;
+  margin: 15px;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+}
+.paper-checkbox .paper-container {
+  position: relative;
+  top: 4px;
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+}
+.paper-checkbox .paper-container .paper-ripple-container {
+  position: absolute;
+  display: block;
+  width: 54px;
+  height: 54px;
+  left: -18px;
+  top: -18px;
+}
+.paper-checkbox .paper-icon {
+  transition: 240ms;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 18px;
+  height: 18px;
+  border: 2px solid;
+  border-radius: 2px;
+}
+.paper-checkbox.paper-checked .paper-icon {
+  border: none;
+}
+.paper-checkbox[disabled] {
+  cursor: no-drop;
+}
+.paper-checkbox:focus .paper-label {
+  border-color: black;
+}
+.paper-checkbox.paper-checked .paper-icon:after {
+  transform: rotate(45deg);
+  position: absolute;
+  left: 6px;
+  top: 2px;
+  display: table;
+  width: 6px;
+  height: 12px;
+  border: 2px solid;
+  border-top: 0;
+  border-left: 0;
+  content: ' ';
+}
+.paper-checkbox .paper-label {
+  border: 1px dotted transparent;
+  position: relative;
+  display: inline-block;
+  margin-left: 10px;
+  vertical-align: middle;
+  white-space: normal;
+  pointer-events: none;
+}
+/* THEMING */
+
+.paper-checkbox .paper-ripple {
+  color: #0a8f08;
+}
+.paper-checkbox.paper-checked .paper-ripple {
+  color: #757575;
+}
+.paper-checkbox .paper-icon {
+  border-color: rgba(0, 0, 0, 0.54);
+}
+.paper-checkbox.paper-checked .paper-icon {
+  background-color: rgba(43, 175, 43, 0.87);
+}
+.paper-checkbox.paper-checked .paper-icon:after {
+  border-color: #eeeeee;
+}
+.paper-checkbox.disabled .paper-icon {
+  border-color: rgba(0, 0, 0, 0.26);
+}
+.paper-checkbox.disabled.paper-checked .paper-icon {
+  background-color: rgba(0, 0, 0, 0.26);
+}

vendor/ember-paper/paper-ripple.css

@@ -1,5 +1,36 @@
 /* PAPER RIPPLE */
 
+/* Checkbox ripple keyframes */
+@-webkit-keyframes inkRippleCheckbox {
+  0% {
+    transform: scale(0);
+    opacity: 0.4;
+  }
+  50% {
+    transform: scale(1.0);
+    opacity: 0.4;
+  }
+  100% {
+    transform: scale(1.0);
+    opacity: 0;
+  }
+}
+
+@keyframes inkRippleCheckbox {
+  0% {
+    transform: scale(0);
+    opacity: 0.4;
+  }
+  50% {
+    transform: scale(1.0);
+    opacity: 0.4;
+  }
+  100% {
+    transform: scale(1.0);
+    opacity: 0;
+  }
+}
+
 /* Button ripple keyframes */
 @-webkit-keyframes inkRippleButton {
   0% {