4/17 master -> stable

.gitmodules

@@ -4,6 +4,6 @@
 [submodule "buildbot"]
 	path = buildbot
 	url = https://github.com/toolkitchen/buildbot.git
-[submodule "lib/test"]
-	path = lib/test
-	url = https://github.com/toolkitchen/test
+[submodule "tools"]
+	path = tools
+	url = https://github.com/toolkitchen/tools.git

README.md

@@ -1,2 +1,13 @@
-Coolkit
-=======
+# Toolkitchen:Toolkit
+
+## Brief Overview
+
+For more detailed info goto [http://toolkitchen.github.io/](http://toolkitchen.github.io/).
+
+The Toolkitchen Toolkit is a new type of library for the web, designed to leverage the existing browser infrastructure to provide the encapsulation and extendability currently only available in JS libraries.
+
+Toolkitchen Toolkit is based on a set of future technologies, including [Shadow DOM](https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html), [Custom Elements](https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/custom/index.html) and Model Driven Views. Currently these technologies are implemented as polyfills or shims, but as browsers adopt these features natively, the platform code that drives Toolkit evacipates, leaving only the value-adds.
+
+## Tools & Testing
+
+For running tests or building minified files, consult the [tooling information](http://toolkitchen.github.com/tooling-strategy.html).

components/css/g-menu-button.css

@@ -2,59 +2,61 @@
   * {
     display: inline-block;
     box-sizing: border-box;
+    -moz-box-sizing: border-box;
     width: 44px;
     height: 44px;
   }
 }
 
 #overlay {
   background: white;
-  border: 1px solid #cfcfcf;
-  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   margin: 9px 0 0 22px;
   -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
 }
 
 [valign=right] #overlay {
   -webkit-transform: translateX(-90%);
+  -moz-transform: translateX(-90%);
 }
 
 [valign=left] #overlay {
   -webkit-transform: translateX(-10%);
+  -moz-transform: translateX(-10%);
 }
 
 .arrow {
   height: 1px;
   width: 0;
-  margin: 0 auto;
-  margin-top: -22px;
+  margin: -17px auto 0;
   border-color: transparent transparent #cfcfcf transparent;
   border-style: solid;
-  border-width: 10px;
+  border-width: 8px;
 }
 
 .arrow-inner {
   border-bottom-color: white;
-  margin-top: -19px;
+  margin-top: -16px;
 }
 
 [valign=right] .arrow {
   position: relative;
-  left: -9px;
+  left: -7px;
   margin-left: 90%;
 }
 
 [valign=left] .arrow {
   position: relative;
-  left: -9px;
+  left: -7px;
   margin-left: 10%;
 }
 
 #menu {
+  display: block;
   box-sizing: border-box;
-  /* override g-menu @host *rule style */
-  border: 1px solid transparent !important;
-  box-shadow: none !important;
+  -moz-box-sizing: border-box;
 }
 
 /* TODO(ffu): adding responsive class won't work in native; to work in native
@@ -72,6 +74,7 @@ container */
   [responsive=true] #overlay  {
     position: absolute;
     -webkit-transform: translateX(0);
+    transform: translateX(0);
     right: 0;
     bottom: 0;
     left: 0;
@@ -82,11 +85,14 @@ container */
 
   [responsive=true] #overlay.slideup {
     -webkit-transform: translateY(100%);
+    transform: translateY(100%);
     /* override g-overlay @host rule style */
     -webkit-transition: -webkit-transform 0.218s !important;
+    transition: -webkit-transform 0.218s !important;
   }
 
   [responsive=true] #overlay.slideup.opened {
     -webkit-transform: translateY(0);
+    transform: translateY(0);
   }
 }

components/css/g-togglebutton.css

@@ -22,6 +22,7 @@
   font-weight: bold;
   color: #666;
   background-image: -webkit-linear-gradient(top, #EEEEEE, #e0e0e0);
+  background-image: -moz-linear-gradient(top, #EEEEEE, #e0e0e0);
   box-shadow: inset 0px 1px 2px 0 rgba(0,0,0,0.1);
 }
 
@@ -35,6 +36,7 @@
 .toggle span.on {
   color: #FFF;
   background-image: -webkit-linear-gradient(top, #3b93ff, #3689EE);
+  background-image: -moz-linear-gradient(top, #3b93ff, #3689EE);
   box-shadow: inset 0px 1px 2px 0 rgba(0,0,0,0.1);
   border-radius: 2px 0 0 2px;
 }
@@ -50,15 +52,19 @@
   border-radius: 2px;
   box-shadow: 0px 1px 2px 0 rgba(0,0,0,0.1);
   background-image: -webkit-linear-gradient(top, #f8f8f8, #f1f1f1);
+  background-image: -moz-linear-gradient(top, #f8f8f8, #f1f1f1);
   -webkit-transition: all 0.130s ease-out;
+  transition: all 0.130s ease-out;
 }
 
 .thumb.dragging {
   -webkit-transition: all 0;
+  transition: all 0;
 }
 
 .toggle.on .thumb {
   -webkit-transform: translate3d(47px, 0, 0);
+  transform: translate3d(47px, 0, 0);
 }
 
 .toggle .thumb::after {
@@ -70,6 +76,7 @@
   height: 9px;
   width: 17px;
   background-image: -webkit-linear-gradient(left, #ccc 50%, transparent 50%), -webkit-linear-gradient(left, #ccc 50%, transparent 50%), -webkit-linear-gradient(left, #ccc 50%, transparent 50%), -webkit-linear-gradient(left, #ccc 50%, transparent 50%), -webkit-linear-gradient(left, #ccc 50%, transparent 50%);
+  background-image: -moz-linear-gradient(left, #ccc 50%, transparent 50%), -moz-linear-gradient(left, #ccc 50%, transparent 50%), -moz-linear-gradient(left, #ccc 50%, transparent 50%), -moz-linear-gradient(left, #ccc 50%, transparent 50%), -moz-linear-gradient(left, #ccc 50%, transparent 50%);
   background-size: 2px;
   background-position: 0 0, 0 2px, 0 4px, 0 6px, 0 8px;
   background-repeat: repeat-x;

components/g-ajax.html

@@ -3,7 +3,10 @@
 Use of this source code is governed by a BSD-style
 license that can be found in the LICENSE file.
 -->
-<script>
+<!--
+/**
+ * @module Toolkit Elements
+ */
 /**
  * g-ajax can be used to perform XMLHttpRequests.
  *
@@ -32,7 +35,7 @@
  *
  * @event complete
  */
-</script>
+-->
 <link rel="import" href="g-xhr.html">
 <element name="g-ajax" attributes="url handleAs auto params response">
   <template>
@@ -131,6 +134,9 @@
           return r;
         }
       },
+      urlChanged: function() {
+        this.autoGo();
+      },
       paramsChanged: function() {
         this.autoGo();
       },
@@ -155,7 +161,12 @@
        * @method go
        */
       go: function() {
-        var params = typeof(this.params) == 'string' ? JSON.parse(this.params) : this.params || null;
+        // don't go if there's no url
+        if (!this.url) {
+          return;
+        }
+        var params = this.params && typeof(this.params) == 'string' ? 
+            JSON.parse(this.params) : this.params || null;
         return this.$.xhr.request({url: this.url, 
           callback: this.receive.bind(this), params: params});
       }

components/g-animation-group.html

@@ -5,6 +5,9 @@
       'par': ParGroup,
       'seq': SeqGroup
     };
+    /**
+     * @module Animation
+     */
     /**
      * Component for a group of animations.
      *
@@ -33,20 +36,22 @@
        * @type HTMLElement|Node
        * @optional
        */
-      target: null,
-      /**
-       * Group type. 'par' for parallel and 'seq' for sequence.
-       * @property type
-       * @type String
-       */
-      type: 'par',
-      // timing
-      duration: null,
-      fillMode: null,
-      easing: null,
-      iterationCount: null,
-      startDelay: null,
-      direction: null,
+      publish: {
+        target: null,
+        /**
+         * Group type. 'par' for parallel and 'seq' for sequence.
+         * @property type
+         * @type String
+         */
+        type: 'par',
+        // timing
+        duration: null,
+        fillMode: null,
+        easing: null,
+        iterationCount: null,
+        startDelay: null,
+        direction: null
+      },
       ready: function() {
         // TODO: need to do this for now.
         this.super();