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-ajax.html b/src/g-ajax.html
index a02a72d9d3..cb868bca7a 100644
--- a/src/g-ajax.html
+++ b/src/g-ajax.html
@@ -14,65 +14,68 @@
   </template>
   <script>
     this.component({
-      prototype: {
+      ready: function() {
+        // wait until ready to auto go only 1x.
+        this.readied = true;
+        this.asyncMethod('autoChanged');
+      },
+      receive: function(inResponse, inXhr) {
+        if (this.isSuccess(inXhr)) {
+          this.response(inXhr);
+        } else {
+          this.error(inXhr);
+        }
+        this.complete(inXhr);
+      },
+      isSuccess: function(inXhr) {
+        var status = inXhr.status || 0;
+        return !status || (status >= 200 && status < 300);
+      },
+      response: function(inXhr) {
+        var response = this.evalResponse(inXhr);
+        this.fireEvent('response', {response: response, xhr: inXhr});
+      },
+      error: function(inXhr) {
+        var response = inXhr.status + ': ' + inXhr.responseText;
+        this.fireEvent('error', {response: response, xhr: inXhr});
+      },
+      complete: function(inXhr) {
+        this.fireEvent('complete', {response: inXhr.status, xhr: inXhr});
+      },
+      evalResponse: function(inXhr) {
+        return this[(this.handleAs || 'text') + 'Handler'](inXhr);
+      },
+      xmlHandler: function(inXhr) {
+        return inXhr.responseXML;
+      },
+      textHandler: function(inXhr) {
+        return inXhr.responseText;
+      },
+      jsonHandler: function(inXhr) {
+        var r = this.textHandler(inXhr);
+        try {
+          return JSON.parse(r);
+        } catch (x) {
+          return r;
+        }
+      },
+      autoChanged: function() {
+        if (this.auto && this.readied) {
+          this.go();
+        }
+      },
+      paramsChanged: function() {
+        if (this.auto && this.readied) {
+          this.go();
+        }
+      },
+      publish: {
         /**
          * Performs an Ajax request to the url specified.
          */
         go: function() {
-          var params = JSON.parse(this.params);
+          var params = this.params ? JSON.parse(this.params) : null;
           return this.$.xhr.request({url: this.url, callback: this.receive.bind(this), params: params});
-        },
-        receive: function(inResponse, inXhr) {
-          if (this.isSuccess(inXhr)) {
-            this.response(inXhr);
-          } else {
-            this.error(inXhr);
-          }
-          this.complete(inXhr);
-        },
-        isSuccess: function(inXhr) {
-          var status = inXhr.status || 0;
-          return !status || (status >= 200 && status < 300);
-        },
-        dispatchAjaxEvent: function(inType, inResponse, inXhr) {
-          this.dispatchEvent(new CustomEvent(inType,
-            {detail: {response: inResponse, xhr: inXhr}}));
-        },
-        response: function(inXhr) {
-          var response = this.evalResponse(inXhr);
-          this.dispatchAjaxEvent('response', response, inXhr);
-          // Here we want to expose the response as a model so that it can be
-          // consumed by other components.
-          this.model = this.model || {};
-          this.model.response = response;
-        },
-        error: function(inXhr) {
-          this.dispatchAjaxEvent('error', inXhr.status + ': ' + inXhr.responseText, inXhr);
-        },
-        complete: function(inXhr) {
-          this.dispatchAjaxEvent('complete', inXhr.status, inXhr);
-        },
-        evalResponse: function(inXhr) {
-          return this[(this.handleAs || 'text') + 'Handler'](inXhr);
-        },
-        xmlHandler: function(inXhr) {
-          return inXhr.responseXML;
-        },
-        textHandler: function(inXhr) {
-          return inXhr.responseText;
-        },
-        jsonHandler: function(inXhr) {
-          var r = this.textHandler(inXhr);
-          try {
-            return JSON.parse(r);
-          } catch (x) {
-            return r;
-          }
-        },
-        paramsChanged: function() {
-          if (this.auto) {
-            this.go();
-          }
         }
       }
     });
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-page.html b/src/g-page.html
index fb920c5ce5..a1df37431e 100644
--- a/src/g-page.html
+++ b/src/g-page.html
@@ -38,8 +38,10 @@
         sheet.setAttribute('g-page', '');
         sheet.removeAttribute('scoped');
         sheet.removeAttribute('id')
-        document.head.appendChild(sheet);
+        var head = document.head;
+        head.insertBefore(sheet, head.firstChild);
       }
+      sheet.textContent += '\n' + this.node.tagName.toLowerCase() + ' {height: 100%;}\n';
     }
   });
 </script>
diff --git a/src/g-panels.html b/src/g-panels.html
index 586112124b..5b00e49ac0 100644
--- a/src/g-panels.html
+++ b/src/g-panels.html
@@ -34,7 +34,7 @@
     ready: function() {
       // ensure default transition
       if (!this.transition) {
-        this.transition = this.defaultTransition;
+        this.node.transition = this.defaultTransition;
         if (this.index != null) {
           this.node.index = 0;
         }
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/src/g-xhr.html b/src/g-xhr.html
index d307940396..bb89d71df9 100644
--- a/src/g-xhr.html
+++ b/src/g-xhr.html
@@ -16,7 +16,42 @@
   </template>
   <script>
     this.component({
-      prototype: {
+      getTransport: function() {
+        try {
+          return new XMLHttpRequest();
+        } catch (e) {}
+        try {
+          return new ActiveXObject('Msxml2.XMLHTTP');
+        } catch (e) {}
+        try {
+          return new ActiveXObject('Microsoft.XMLHTTP');
+        } catch (e) {}
+        return false;
+      },
+      makeReadyStateHandler: function(inXhr, inCallback) {
+        inXhr.onreadystatechange = function() {
+          if (inXhr.readyState == 4) {
+            inCallback && inCallback.apply(null, [inXhr.responseText, inXhr]);
+          }
+        };
+      },
+      setRequestHeaders: function(inXhr, inHeaders) {
+        if (inHeaders) {
+          for (var name in inHeaders) {
+            xhr.setRequestHeader(name, inHeaders[name]);
+          }
+        }
+      },
+      toQueryString: function(inParams) {
+        var r = [];
+        for (var n in inParams) {
+          var v = inParams[n];
+          n = encodeURIComponent(n);
+          r.push(v === undefined || v === null ? n : (n + '=' + encodeURIComponent(v)));
+        }
+        return r.join('&');
+      },
+      publish: {
         /**
          * Sends a HTTP request to the server and returns the XHR object.
          *
@@ -48,41 +83,6 @@
             transport.onreadystatechange(transport);
           }
           return transport;
-        },
-        getTransport: function() {
-          try {
-            return new XMLHttpRequest();
-          } catch (e) {}
-          try {
-            return new ActiveXObject('Msxml2.XMLHTTP');
-          } catch (e) {}
-          try {
-            return new ActiveXObject('Microsoft.XMLHTTP');
-          } catch (e) {}
-          return false;
-        },
-        makeReadyStateHandler: function(inXhr, inCallback) {
-          inXhr.onreadystatechange = function() {
-            if (inXhr.readyState == 4) {
-              inCallback && inCallback.apply(null, [inXhr.responseText, inXhr]);
-            }
-          };
-        },
-        setRequestHeaders: function(inXhr, inHeaders) {
-          if (inHeaders) {
-            for (var name in inHeaders) {
-              xhr.setRequestHeader(name, inHeaders[name]);
-            }
-          }
-        },
-        toQueryString: function(inParams) {
-          var r = [];
-          for (var n in inParams) {
-            var v = inParams[n];
-            n = encodeURIComponent(n);
-            r.push(v === undefined || v === null ? n : (n + '=' + encodeURIComponent(v)));
-          }
-          return r.join('&');
         }
       }
     });
diff --git a/src/panel-transitions/g-flow-panel-transition.html b/src/panel-transitions/g-flow-panel-transition.html
index a49273929f..916c89f2dd 100644
--- a/src/panel-transitions/g-flow-panel-transition.html
+++ b/src/panel-transitions/g-flow-panel-transition.html
@@ -8,7 +8,6 @@
 <element name="g-flow-panel-transition" extends="g-panel-transition">
   <template>
     <style scoped id="flowsheet">
-      /* TODO(sorvell): replace when reference combinators arrive */
       g-panels[transition='flow'] > .right {
         left: auto;
         right: 0;
@@ -33,17 +32,14 @@
         setup: function(inPanels) {
           this.$super(arguments);
           this.listenForMediaMatch();
-          // TODO(sorvell): revert when reference combinators arrive
-          //this.panels.node.appendChild(this.$.flowsheet);
-          document.head.appendChild(this.$.flowsheet);
+          // TODO(sorvell): redo when reference combinators arrive
+          this.panels.node.appendChild(this.$.flowsheet);
           // TODO(sorvell): hack, must fix better
           // async refresh in case we need to wait for stylesheet to load
           this.asyncMethod('refresh');
         },
         teardown: function() {
-          // TODO(sorvell): revert when reference combinators arrive
-          //this.panels.node.removeChild(this.$.flowsheet);
-          document.head.removeChild(this.$.flowsheet);
+          this.panels.node.removeChild(this.$.flowsheet);
           this.$super();
         },
         listenForMediaMatch: function() {
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>