fix tap-highlight and missing divider

dev/custom-fn.js

@@ -10,9 +10,9 @@ module.exports = function() {
    */
   function toggleBackground() {
     if (this.get()) {
-      Clay.getItemByAppKey('background').enable();
+      Clay.getItemByAppKey('colorTest').enable();
     } else {
-      Clay.getItemByAppKey('background').disable();
+      Clay.getItemByAppKey('colorTest').disable();
     }
   }
 

src/styles/clay/_base.scss

@@ -83,9 +83,12 @@ label {
   }
 }
 
+.tap-highlight {
+  @include tap-highlight();
+}
+
 .component {
   padding-bottom: $item-spacing-v;
-  @include tap-highlight();
 
   &.disabled {
     opacity: 0.25;
@@ -108,10 +111,10 @@ label {
     &:last-child,
     &:first-child {
       padding-bottom: $item-spacing-v;
-      
-      &:after {
-        display: none;
-      }
+    }
+
+    &:last-child:after {
+      display: none;
     }
 
     &:after {
@@ -130,6 +133,10 @@ label {
   .component-heading:first-child {
     background: $color-gray-3;
     border-radius: $border-radius $border-radius 0 0;
+
+    &:after {
+      display: none;
+    }
   }
 
 }
@@ -160,7 +167,7 @@ a {
     .input {
       display: table-cell;
     }
-    
+
     .input {
       text-align: right;
     }

src/styles/clay/components/checkboxgroup.scss

@@ -3,10 +3,8 @@
 
 .component-checkbox {
 
-  @include tap-highlight(rgba(0,0,0,0));
   display: block;
 
-
   > .label {
     display: block;
     padding-bottom: $item-spacing-v / 2;
@@ -16,7 +14,6 @@
 
     label {
       padding: $item-spacing-v / 2 0;
-      @include tap-highlight();
     }
 
     .label {

src/styles/clay/components/radiogroup.scss

@@ -3,10 +3,8 @@
 
 .component-radio {
 
-  @include tap-highlight(rgba(0,0,0,0));
   display: block;
 
-
   > .label {
     display: block;
     padding-bottom: $item-spacing-v / 2;
@@ -16,7 +14,6 @@
 
     label {
       padding: $item-spacing-v / 2 0;
-      @include tap-highlight();
     }
 
     .label {

src/templates/components/checkboxgroup.tpl

@@ -2,7 +2,7 @@
   <span class="label">{{{label}}}</span>
   <div class="checkbox-group">
     {{each options}}
-      <label>
+      <label class="tap-highlight">
         <span class="label">{{{this.label}}}</span>
         <input
           type="checkbox"

src/templates/components/color.tpl

@@ -1,4 +1,4 @@
-<div class="component component-color">
+<div class="component component-color tap-highlight">
   <label>
     <input
       data-manipulator-target

src/templates/components/input.tpl

@@ -1,4 +1,4 @@
-<label class="component component-input">
+<label class="component component-input tap-highlight">
   <span class="label">{{{label}}}</span>
   <span class="input">
     <input

src/templates/components/radiogroup.tpl

@@ -2,7 +2,7 @@
   <span class="label">{{{label}}}</span>
   <div class="radio-group">
     {{each options}}
-      <label>
+      <label class="tap-highlight">
         <span class="label">{{{this.label}}}</span>
         <input
           type="radio"

src/templates/components/select.tpl

@@ -1,4 +1,4 @@
-<label class="component component-select">
+<label class="component component-select tap-highlight">
   <span class="label">{{{label}}}</span>
   <span class="value"></span>
   <select data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}>

src/templates/components/toggle.tpl

@@ -1,4 +1,4 @@
-<label class="component component-toggle">
+<label class="component component-toggle tap-highlight">
   <span class="label">{{{label}}}</span>
   <span class="input">
     <input