diff --git a/src/css/g-ratings.css b/src/css/g-ratings.css
deleted file mode 100644
index 158e883b16..0000000000
--- a/src/css/g-ratings.css
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
- * Copyright 2012 The Toolkitchen Authors. All rights reserved.
- * Use of this source code is governed by a BSD-style
- * license that can be found in the LICENSE file.
- */
-.star {
-  display: inline-block;
-  width: 12px;
-  height: 21px;
-  background: url('../images/star_blank.svg') center no-repeat;
-  cursor: default;
-}
-
-.star.full {
-  background: url('../images/star_full.svg') center no-repeat;
-}
\ No newline at end of file
diff --git a/src/css/g-tabs.css b/src/css/g-tabs.css
deleted file mode 100644
index 9ece9d835c..0000000000
--- a/src/css/g-tabs.css
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * Copyright 2012 The Toolkitchen Authors. All rights reserved.
- * Use of this source code is governed by a BSD-style
- * license that can be found in the LICENSE file.
- */
-@host {
-  display: block;
-  height: 28px;
-  line-height: 28px;
-  border: 0;
-  border-bottom: 1px solid #ccc;
-}
-
-.vertical {
-  display: inline-block;
-  width: 71px;
-  height: 100%;
-  border: 0;
-  border-right: 1px solid #ccc;
-}
-
-.tabContainer > * {
-  display: inline-block;
-  min-width: 54px;
-  height: 27px;
-  line-height: 27px;
-  text-align: center;
-  padding: 0 8px;
-  cursor: default;
-  border: 1px solid transparent;
-  border-radius: 2px 2px 0 0;
-  -webkit-transition: all 0.218s;
-}
-
-.vertical .tabContainer > * {
-  border-radius: 2px 0 0 2px;
-}
-
-.tabContainer > :hover {
-  color: #555;
-}
-
-.tabContainer > .selected {
-  color: #202020;
-  border: 1px solid #ccc;
-}
\ No newline at end of file
diff --git a/src/g-icon.html b/src/g-icon.html
index 1c00224055..f2339622a0 100644
--- a/src/g-icon.html
+++ b/src/g-icon.html
@@ -20,7 +20,8 @@
         width: 21px;
         height: 21px;
         cursor: pointer;
-        background: no-repeat center contain;
+        background: no-repeat center;
+        background-size: contain;
       }
     </style>
     <div class="icon" style="background-image:url({{src}})"></div>
diff --git a/src/g-ratings.html b/src/g-ratings.html
index 0f6b46d148..ed1dab414b 100644
--- a/src/g-ratings.html
+++ b/src/g-ratings.html
@@ -5,35 +5,46 @@
  * license that can be found in the LICENSE file.
  */
 -->
-<element name="g-ratings"  attributes="value" handlers="click: clickHandler">
+<element name="g-ratings" attributes="count, value">
   <link rel="components" href="g-component.html">
-  <link rel="stylesheet" href="css/g-ratings.css" />
   <template>
-    <span class="star"></span>
-    <span class="star"></span>
-    <span class="star"></span>
-    <span class="star"></span>
-    <span class="star"></span>
+    <style>
+      .star {
+        display: inline-block;
+        width: 12px;
+        height: 21px;
+        background: url('images/star_blank.svg') center no-repeat;
+        cursor: default;
+      }
+      
+      .star.full {
+        background: url('images/star_full.svg') center no-repeat;
+      }
+    </style>
+    <template iterate="stars">
+      <span index="{{index}}" class="star {{starClass}}" on-click="starClick"></span>
+    </template>
   </template>
   <script>
     this.component({
-      shadowRootCreated: function(inRoot) {
-        this.stars = ShadowDOM.localQueryAll(inRoot, ".star");
+      ready: function() {
+        this.node.count = this.node.count || 5;
       },
-      created: function() {
+      countChanged: function() {
+        this.stars = [];
+        for (var i = 0; i < this.node.count; i++) {
+          this.stars.push({index: i});
+        }
         this.valueChanged();
       },
-      prototype: {
-        valueChanged: function() {
-          for (var i=0, s; s=this.stars[i]; i++) {
-            s.classList.toggle('full', i < Number(this.value));
-          }
-        },
-        clickHandler: function(e) {
-          var s = e.target;
-          var i = this.stars.indexOf(s);
-          this.value = i + (s.classList.contains('full') ? 0 : 1);
-        }
+      valueChanged: function() {
+        this.stars && this.stars.forEach(function(s, i) {
+          s.starClass = i < this.value ? 'full' : '';
+        }.bind(this));
+      },
+      starClick: function(e) {
+        var s = e.currentTarget.model;
+        this.node.value = s.index + (s.starClass == 'full' ? 0 : 1);
       }
     });
   </script>
diff --git a/src/g-tabs.html b/src/g-tabs.html
index aeb79955f3..0980df6115 100644
--- a/src/g-tabs.html
+++ b/src/g-tabs.html
@@ -7,18 +7,56 @@
 -->
 <element name="g-tabs" extends="g-selector" attributes="selected, multi, vertical" handlers="click: clickHandler">
   <link rel="components" href="g-selector.html">
-  <link rel="stylesheet" href="css/g-tabs.css" />
   <template>
-    <div class="tabContainer">
-      <shadow></shadow>
-    </div>
+    <style>
+      @host {
+        display: block;
+        height: 28px;
+        line-height: 28px;
+        border: 0;
+        border-bottom: 1px solid #ccc;
+      }
+      
+      @host.vertical {
+        display: inline-block;
+        width: 71px;
+        height: 100%;
+        border: 0;
+        border-right: 1px solid #ccc;
+      }
+      
+      @host > * {
+        display: inline-block;
+        min-width: 54px;
+        height: 27px;
+        line-height: 27px;
+        text-align: center;
+        padding: 0 8px;
+        cursor: default;
+        border: 1px solid transparent;
+        border-radius: 2px 2px 0 0;
+        -webkit-transition: all 0.218s;
+      }
+      
+      @host.vertical > * {
+        border-radius: 2px 0 0 2px;
+      }
+      
+      @host > :hover {
+        color: #555;
+      }
+      
+      @host > .selected {
+        color: #202020;
+        border: 1px solid #ccc;
+      }
+    </style>
+    <shadow></shadow>
   </template>
   <script>
     this.component({
-      prototype: {
-        verticalChanged: function() {
-          this.classList.toggle('vertical', this.vertical);
-        }
+      verticalChanged: function() {
+        this.node.classList.toggle('vertical', this.vertical);
       }
     });
   </script>
diff --git a/src/g-togglebutton.html b/src/g-togglebutton.html
index fe5dfbc976..56d558631b 100644
--- a/src/g-togglebutton.html
+++ b/src/g-togglebutton.html
@@ -17,14 +17,13 @@
   </template>
   <script>
     this.component({
-      prototype: {
-        valueChanged: function() {
-          this.$.toggle.classList.toggle('on', this.value);
-        },
+      valueChanged: function() {
+        this.$.toggle.classList.toggle('on', this.value);
+      },
+      publish: {
         toggle: function() {
-          this.value = !this.value;
+          this.node.value = !this.node.value;
         }
-        // TODO(ffu): need to add dragging support
       }
     });
   </script>
diff --git a/workbench/ratings.html b/workbench/ratings.html
index 3701949c38..fdf2c6ea3c 100644
--- a/workbench/ratings.html
+++ b/workbench/ratings.html
@@ -7,10 +7,12 @@
 <html>
 <head>
   <title>Ratings</title>
-  <script src="../../polyfills/Components/components-polyfill.js" shadow="shim"></script>
+  <script src="../../polyfills/Components/components-polyfill.js"></script>
   <link rel="components" href="../../toolkit/src/g-ratings.html">
 </head>
 <body>
   <g-ratings value="3"></g-ratings>
+  <br>
+  <g-ratings value="5" count="10"></g-ratings>
 </body>
 </html>
diff --git a/workbench/tabs.html b/workbench/tabs.html
index c7f42ee263..0d2fac5325 100644
--- a/workbench/tabs.html
+++ b/workbench/tabs.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <title>Tabs</title>
-  <script src="../../polyfills/Components/components-polyfill.js" shadow="shim"></script>
+  <script src="../../polyfills/Components/components-polyfill.js"></script>
   <link rel="components" href="../../toolkit/src/g-tabs.html">
 </head>
 <body>
diff --git a/workbench/togglebutton.html b/workbench/togglebutton.html
index 48a56161a5..b542880b68 100644
--- a/workbench/togglebutton.html
+++ b/workbench/togglebutton.html
@@ -7,7 +7,7 @@
 <html>
 <head>
   <title>Toggle Button</title>
-  <script src="../../polyfills/Components/components-polyfill.js" shadow="shim"></script>
+  <script src="../../polyfills/Components/components-polyfill.js"></script>
   <link rel="components" href="../../toolkit/src/g-togglebutton.html">
 </head>
 <body>