merge

README.md

@@ -2,9 +2,9 @@ Polymer docs are mostly in Markdown with some HTML. [Jekyll][jekyll] is used to
 
 ## Prereqs and installation requirements
 
-We use Jekyll 1.4.2+ and [Grunt][grunt] to generate the documentation, and compass to compile SASS to CSS. You'll need to install the requirements before working on the docs (these instructions assume [NPM is already installed](http://nodejs.org/download/)):
+We use Jekyll 2.0+ and [Grunt][grunt] to generate the documentation, and compass to compile SASS to CSS. You'll need to install the requirements before working on the docs (these instructions assume [NPM is already installed](http://nodejs.org/download/)):
 
-    gem install jekyll kramdown jekyll-page-hooks compass
+    gem install jekyll kramdown jekyll-page-hooks compass rouge
     npm install -g grunt-cli
 
 **Note:** If you receive permission warnings, you may need to run the above tasks with `sudo`.

docs/elements/layout-elements.md

@@ -62,7 +62,7 @@ The following example app uses a `<core-header-panel>` as its top-level layout:
 The following example uses a plain `<div>` as the header element, using the `core-header` class:
 
     <core-header-panel>
-       <div class=“core-header”>
+      <div class=“core-header”>
          My App
       </div>
       <div>

docs/elements/material.md

@@ -350,7 +350,7 @@ its parent  element:
 
 
      <div style="width: 100px; height: 100px;">
-      <paper-shadow z="3"></paper-shadow>
+       <paper-shadow z="3"></paper-shadow>
      </div>
 
 You can change the z-height of the target element by setting `z` on the

docs/polymer/binding-types.md

@@ -31,9 +31,9 @@ occurs. See [Node bindings](#node-bindings) for details.
 Using the `bind` attribute, you can create a single instance of a template bound to an object.
 
 {% raw %}
-    <template bind="{{ person }}">
+    <template bind="{{person}}">
       This template can bind to the person object’s properties, like
-      {{ name }}.
+      {{name}}.
     </template>
 {% endraw %}
 
@@ -45,9 +45,9 @@ if `person` has a property, `name`, {%raw%}`{{name}}`{%endraw%} evaluates to the
 For convenience, you can also create a _named scope_ when binding an object:
 
 {% raw %}
-    <template bind="{{ person as p}}">
+    <template bind="{{person as p}}">
       This template uses a named scope to access properties, like
-      {{ p.name }}.
+      {{p.name}}.
     </template>
 {% endraw %}
 
@@ -64,15 +64,18 @@ an array. Each instance is bound to an item in the array.
 The simplest format for a repeating template is:
 
 {% raw %}
-    <template repeat="{{ array }}">
-      Creates an instance with {{ bindings }} for every element in the array collection.
+    <template repeat="{{array}}">
+      Creates an instance with {{}} bindings  for every element in the array collection.
     </template>
 {% endraw %}
 
+Refer to the current item in `array` using an empty binding expression {%raw%}`{{}}`{%endraw%}, which matches
+the current binding scope. Refer to a property of the current item as {%raw%}`{{<var>propertyname</var>}}`{%endraw%}. 
+
 Like the `bind` attribute, the `repeat` attribute supports named scopes:
 
 {% raw %}
-    <template repeat="{{ user in users }}">
+    <template repeat="{{user in users}}">
       {{user.name}}
     </template>
 {% endraw %}
@@ -81,9 +84,9 @@ When using named scopes with the `repeat` attribute, the index value for each
 item in the array is also available by using the following syntax:
 
 {% raw %}
-    <template repeat="{{ user, userIndex in users }}">
-      <template repeat="{{ userFile, userFileIndex in user }}">
-        {{ userIndex }}:{{ userFileIndex }}.{{ userFile }}
+    <template repeat="{{user, userIndex in users}}">
+      <template repeat="{{userFile, userFileIndex in user}}">
+        {{userIndex}}:{{userFileIndex}}.{{userFile}}
       </template>
     </template>
 {% endraw %}
@@ -126,7 +129,7 @@ Item count: 3
 Conditional templates use the `if` attribute to conditionally create a template instance.
 
 {% raw %}
-    <template if="{{ conditionalValue }}">
+    <template if="{{conditionalValue}}">
       Binds if and only if conditionalValue is truthy.
     </template>
 {% endraw %}
@@ -138,9 +141,9 @@ Where the explicit binding is omitted, a nested template can inherit the scope o
 the containing template. Conditional templates are frequently used this way:
 
 {% raw %}
-    <template bind="{{ myOptions as m }}">
-      <template if="{{ m.showCounter }}">
-        <div>Counter: {{ m.counter }}</div>
+    <template bind="{{myOptions as m}}">
+      <template if="{{m.showCounter}}">
+        <div>Counter: {{m.counter}}</div>
       </template>
     </template>
 {% endraw %}
@@ -150,9 +153,9 @@ For more information on nesting templates, see [Expression scopes](/docs/polymer
 You can also use `if` with the  `repeat` attribute.
 
 {% raw %}
-    <template bind="{{ myList as list }}">
-      <template repeat="{{items in list.items}}" if="{{ list.showItems }}">
-        <li>{{ item.name }}</li>
+    <template bind="{{myList as list}}">
+      <template repeat="{{items in list.items}}" if="{{list.showItems}}">
+        <li>{{item.name}}</li>
       </template>
     </template>
 {% endraw %}
@@ -178,10 +181,10 @@ You can use the `ref` attribute to define recursive templates, such as tree stru
 {% raw %}
     <template>
       <ul>
-      <template repeat="{{ items }}" id="t">
+      <template repeat="{{items}}" id="t">
         <li>{{name}}
         <ul>
-          <template ref="t" repeat="{{ children }}"></template>
+          <template ref="t" repeat="{{children}}"></template>
         </ul>
       </li>
     </template>
@@ -338,14 +341,14 @@ For boolean attributes, you can control whether or not the attribute appears usi
 
 {% raw %}
 <pre class="prettyprint">
-<var>attribute</var>?={{ <var>boolean-expression</var> }}
+<var>attribute</var>?={{<var>boolean-expression</var>}}
 </pre>
 {%endraw%}
 
 If _boolean-expression_ is truthy, _attribute_  appears in the markup; otherwise it is omitted. For example:
 
 {% raw %}
-    <span hidden?="{{ isHidden }}">This may or may not be hidden.</span>
+    <span hidden?="{{isHidden}}">This may or may not be hidden.</span>
 {% endraw %}
 
 ### One-time bindings

docs/polymer/databinding-advanced.md

@@ -20,7 +20,7 @@ This section covers advanced topics that you don’t need to understand to get d
 
 ## How data binding works
 
-It may be easiest to understand data binding is by understanding what data binding is not -- it doesn’t work like traditional template systems.
+It may be easiest to understand what data binding is, by first understanding what data binding is not -- it doesn’t work like traditional template systems.
 
 In a traditional AJAX application, templating works by replacing innerHTML for some container element. Where the container contains a non-trivial DOM subtree, this has two drawbacks:
 
@@ -75,7 +75,7 @@ If you change `item.count` for one of the objects, the only thing that changes i
 
 ### How data binding tracks template instances
 
-When a template generates one or more instances, it inserts the instances immediate after itself. So
+When a template generates one or more instances, it inserts the instances immediately after itself. So
 the template itself serves as a marker for where the first instance starts. For each template
 instance, the template keeps track of the terminating node in the template instance. For the simple
 case, the terminating node is a clone of the last node in the template itself.

docs/polymer/databinding-compat.md

@@ -98,17 +98,17 @@ with support, you can use the standard template
 ## Binding to attributes
 
 Binding expressions to certain attributes can produce side effects in browsers that don't implement `<template>` natively. 
-For example, running {% raw %}`<img src="/users/{{ id }}.jpg">`{% endraw %} under the polyfill produces a network request that 404s.
+For example, running {% raw %}`<img src="/users/{{id}}.jpg">`{% endraw %} under the polyfill produces a network request that 404s.
 
 In addition, browsers such as IE sanitize certain attributes, disallowing {% raw %}`{{}}`{% endraw %} replacements in their text.
 
 To avoid these side effects, bindings in certain attributes can be prefixed with "_":
 
 {% raw %}
-    <img _src="/users/{{ id }}.jpg">
-    <div _style="color: {{ color }}">
-    <a _href="{{ url }}">Link</a>
-    <input type="number" _value="{{ number }}">
+    <img _src="/users/{{id}}.jpg">
+    <div _style="color: {{color}}">
+    <a _href="{{url}}">Link</a>
+    <input type="number" _value="{{number}}">
 {% endraw %}
 
 

docs/polymer/expressions.md

@@ -68,7 +68,7 @@ or a one-time binding:
 The value of the expression is evaluated and the result inserted as the value of the binding:
 
 {% raw %}
-    <div>Jill has {{ daughter.children.length + son.children.length }} grandchildren</div>
+    <div>Jill has {{daughter.children.length + son.children.length}} grandchildren</div>
 {% endraw %}
 
 may result in:
@@ -98,13 +98,13 @@ all ancestor scopes are visible, up-to and including the first ancestor **not**
 {% raw %}
     <template>
       <!-- outermost template -- element's properties available -->
-      <template bind="{{ organization as organization }}">
+      <template bind="{{organization as organization}}">
         <!-- organization.* available -->
-        <template bind="{{ organization.contact as contact }}">
+        <template bind="{{organization.contact as contact}}">
           <!-- organization.* & contact.* available -->
-          <template bind="{{ contact.address }}">
+          <template bind="{{contact.address}}">
             <!-- only properties of address are available -->
-            <template bind="{{ streetAddress as streetAddress}}">
+            <template bind="{{streetAddress as streetAddress}}">
               <!-- streetAddress.* and properties of address are available. 
                    NOT organization.* or contact.* -->
             </template>
@@ -136,13 +136,13 @@ If your filter depends on the properties of one of the paths or identifiers in y
 note that the expression isn't re-evaluated when properties change. For example, if you have an
 expression like:
 
-    {% raw %}{{ user | formatUserName}}{% endraw %}
+    {% raw %}{{user | formatUserName}}{% endraw %}
 
 The expression isn't re-evaluated when a property, such as `user.firstName` changes. If you need
 the filter to be re-run when a property changes, you can include it explicitly in the expression,
 like this:
 
-    {% raw %}{{ { firstName: user.firstName, lastName: user.lastName } | formatUserName }}{% endraw %}
+    {% raw %}{{ {firstName: user.firstName, lastName: user.lastName} | formatUserName}}{% endraw %}
 
 Since `user.firstName` and `user.lastName` are included explicitly in this expression, both
 properties are observed for changes.
@@ -156,7 +156,7 @@ key is truthy, the name will be applied as a class.
 For example:
 
 {% raw %}
-    <div class="{{ {active: user.selected, big: user.type == 'super'} | tokenList }}"> 
+    <div class="{{ {active: user.selected, big: user.type == 'super'} | tokenList}}"> 
 {% endraw %}
 
 results in the following if `user.selected == true` and `user.type == 'super'`:
@@ -205,7 +205,7 @@ your element by adding a method to the element's prototype. For example, to add
 And use the filter like this:
 
 {% raw %}
-    {{ s.who | toUpperCase }}
+    {{s.who | toUpperCase}}
 {% endraw %}
 
 This filter modifies values when they're being inserted into the DOM, so if `s.who` is set to `world`,
@@ -235,7 +235,7 @@ or `on-blur` event handler.
 You can pass parameters to a filter. For example:
 
 {% raw %}
-    {{ myNumber | toFixed(2) }}
+    {{myNumber | toFixed(2)}}
 {% endraw %}
 
 The code for the `toFixed` filter could look like this:
@@ -249,6 +249,6 @@ The code for the `toFixed` filter could look like this:
 You can also chain filters, passing the output of one filter to another:
 
 {% raw %}
-    {{ myNumber | toHex | toUpperCase }}
+    {{myNumber | toHex | toUpperCase}}
 {% endraw %}
 

docs/polymer/node_bind.md

@@ -46,7 +46,7 @@ Some elements have special properties which can be two-way data bound:
 - `Text` node - only handles bindings on its `textContent` property. 
 - `HTMLInputElement` - handles bindings on its `value` and `checked` properties.
 - `HTMLTextareaElement` - handles bindings on its `value` property.
-- `HTMLSelectElement` - handles bindings on its `selectedIndex` property.
+- `HTMLSelectElement` - handles bindings on its `value` and `selectedIndex` properties.
 
 **All other elements handle bindings to attributes**.
 

docs/polymer/styling.md

@@ -355,7 +355,7 @@ In rare cases, you may need to shim a stylesheet yourself. {{site.project_title}
      ...
     </style>
 
-    var style = document.querySelector('newstyles');
+    var style = document.querySelector('#newstyles');
 
     var cssText = Platform.ShadowCSS.shimCssText(
           style.textContent, 'my-scope');

docs/start/tutorial/step-3.md

@@ -41,7 +41,7 @@ Open the `post-list.html` file in your editor.
 <side-by-side>
 <pre>
 &lt;link rel="import" href="../components/polymer/polymer.html">
-&lt;link rel="import" href="post-service.html">
+&lt;link rel="import" href="../post-service/post-service.html">
 &lt;link rel="import" href="post-card.html">
 
 &lt;polymer-element name="post-list" attributes="show">

resources/faq.md

@@ -121,7 +121,7 @@ for developers that includes all of the the pieces for building
 {{site.project_title}}-based applications.
 
 ### Does {{site.project_title}} work with Chrome Apps? {#chromeapp}
-Yes. Here's [an example Polymer Chrome App](https://github.com/robdodson/polymerchromeapp) to get you started. It's important to note that Chrome Apps have a strict [Content Security Policy (CSP)](http://www.html5rocks.com/tutorials/security/content-security-policy/) which prevents the use of inline script elements. To handle the CSP limitation, this example uses our [Vulcanize](/articles/concatenating-web-components.html) build tool (in the form of [grunt-vulcanize](https://github.com/Polymer/grunt-vulcanize)) to turn inline script elements into external files. Be sure to read the [FAQ section on Content Security Policy](#csp) and the [Dealing with CSP](https://github.com/robdodson/polymerchromeapp#dealing-with-csp) section in the sample project's README.
+Yes. Here's [an example Polymer Chrome App](https://github.com/PolymerLabs/polymerchromeapp) to get you started. It's important to note that Chrome Apps have a strict [Content Security Policy (CSP)](http://www.html5rocks.com/tutorials/security/content-security-policy/) which prevents the use of inline script elements. To handle the CSP limitation, this example uses our [Vulcanize](/articles/concatenating-web-components.html) build tool (in the form of [grunt-vulcanize](https://github.com/Polymer/grunt-vulcanize)) to turn inline script elements into external files. Be sure to read the [FAQ section on Content Security Policy](#csp) and the [Dealing with CSP](https://github.com/PolymerLabs/polymerchromeapp#dealing-with-csp) section in the sample project's README.
 
 ### Does {{site.project_title}} work under Content Security Policy (CSP)? {#csp}
 

samples/databinding/attribute-binding.html

@@ -23,8 +23,8 @@ <h1>Bind To Attributes</h1>
 <polymer-element name='attribute-binding'>
 
     <ul>
-    <template id="colors" repeat="{{ colors }}">
-      <li style="color: {{ color }}">The style attribute of this list item is bound</li>
+    <template id="colors" repeat="{{colors}}">
+      <li style="color: {{color}}">The style attribute of this list item is bound</li>
     </template>
     </ul>
 
@@ -35,10 +35,10 @@ <h1>Bind To Attributes</h1>
     	ready: function() {
 
         	this.colors = [
-          { color: 'red' },
-          { color: 'blue' },
-          { color: 'green' },
-          { color: 'pink' }
+          {color: 'red'},
+          {color: 'blue'},
+          {color: 'green'},
+          {color: 'pink'}
         ];
     },
       rotateColors: function() {

samples/databinding/greeting-tag.html

@@ -5,7 +5,7 @@
   <template>
     <ul>
       <template repeat="{{s in salutations}}">
-        <li>{{s.what}}: <input type="text" value="{{ s.who }}"></li>
+        <li>{{s.what}}: <input type="text" value="{{s.who}}"></li>
       </template>
     </ul>
     <button on-click="{{updateModel}}">Update model</button>

samples/databinding/greeting-tag.js

@@ -1,12 +1,12 @@
 Polymer('greeting-tag', {
   ready: function() {
     this.salutations = [
-      { what: 'Hello', who: 'World'},
-      { what: 'Goodbye', who: 'DOM APIs'},
-      { what: 'Hello', who: 'Declarative'},
-      { what: 'Goodbye', who: 'Imperative'}
+      {what: 'Hello', who: 'World'},
+      {what: 'Goodbye', who: 'DOM APIs'},
+      {what: 'Hello', who: 'Declarative'},
+      {what: 'Goodbye', who: 'Imperative'}
     ];
-    this.alternates = [ 'Hello', 'Hola', 'Howdy'];
+    this.alternates = ['Hello', 'Hola', 'Howdy'];
     this.current = 0;
   },     
   updateModel: function() {

samples/databinding/recursive-template.html

@@ -22,10 +22,10 @@ <h1>Recursive Template</h1>
 <polymer-element name='tree-element'>
 <template>
 <ul>
-<template repeat="{{ items }}" id="t">
+<template repeat="{{items}}" id="t">
   <li>{{name}}
     <ul>
-      <template ref="t" repeat="{{ children }}"></template>
+      <template ref="t" repeat="{{children}}"></template>
     </ul>
   </li>
 </template>

samples/tutorial/finished/post-card.html

@@ -32,10 +32,10 @@
       position: absolute;
       top: 3px;
       right: 3px;
-      fill: #636363;
+      color: #636363;
     }
     :host([favorite]) core-icon-button {
-      fill: #da4336;
+      color: #da4336;
     }
     </style>
     <div class="card-header" layout horizontal center>