bem'ing up the item

app/styleguide/item/_item.scss

@@ -12,7 +12,7 @@ $default-item-active-bg-color: nth($palette-secondary, 4);
 // Disabled Button Colors
 $disabled-item-text-color: nth($palette-disabled, 5);
 
-.PaperItem {
+.wsk-item {
   border       : none;
   color        : $default-item-text-color;
   background   : transparent;
@@ -29,27 +29,29 @@ $disabled-item-text-color: nth($palette-disabled, 5);
   cursor       : pointer;
 }
 
-.PaperItem[disabled] {
+.wsk-item[disabled] {
   color           : $disabled-item-text-color;
   cursor          : auto;
 }
 
-.PaperItem:hover {
+.wsk-item:hover {
   background-color: $default-item-hover-bg-color;
 }
 
-.PaperItem:focus {
+.wsk-item:focus {
   outline: none;
   background-color: $default-item-focus-bg-color;
 }
-.PaperItem::-moz-focus-inner {
+
+.wsk-item::-moz-focus-inner {
   border: 0;
 }
-.PaperItem:active {
+
+.wsk-item:active {
   background-color: $default-item-active-bg-color;
 }
 
-.PaperItem .PaperItem-rippleContainer {
+.wsk-item--ripple-container {
   display: block;
   height: 100%;
   left: 0px;

app/styleguide/item/demo.html

@@ -16,14 +16,14 @@
 
   <div class="PreviewBlock">
 
-    <button class="PaperItem wsk-js-ripple-effect">Australia</button>
-    <button class="PaperItem wsk-js-ripple-effect">Canada</button>
-    <button disabled class="PaperItem wsk-js-ripple-effect">United States of America</button>
-    <button class="PaperItem wsk-js-ripple-effect">United Kingdom</button>
+    <button class="wsk-item wsk-js-ripple-effect">Australia</button>
+    <button class="wsk-item wsk-js-ripple-effect">Canada</button>
+    <button disabled class="wsk-item wsk-js-ripple-effect">United States of America</button>
+    <button class="wsk-item wsk-js-ripple-effect">United Kingdom</button>
 
     <br />
 
-    <a href="#" class="PaperItem wsk-js-ripple-effect">Web Starter Kit</a>
+    <a href="#" class="wsk-item wsk-js-ripple-effect">Web Starter Kit</a>
 
   </div>
 

app/styleguide/item/item.js

@@ -2,13 +2,16 @@
 
 window.addEventListener('load', function() {
   var itemElementsWithRipples =
-      document.querySelectorAll('.PaperItem.wsk-js-ripple-effect');
+      document.querySelectorAll('.wsk-js-ripple-effect');
+  
   for (var i = 0; i < itemElementsWithRipples.length; i++) {
     var rippleContainer = document.createElement('span');
-    rippleContainer.classList.add('PaperItem-rippleContainer');
+    rippleContainer.classList.add('wsk-item--ripple-container');
+    
     var ripple = document.createElement('span');
     ripple.classList.add('wsk-ripple');
     rippleContainer.appendChild(ripple);
+    
     itemElementsWithRipples[i].appendChild(rippleContainer);
   }
 });