7/11 master -> stable

AceEditor/index.html

@@ -25,7 +25,7 @@
  </ace-app>
 
 
-    <element name="ace-app" extends="g-app">
+    <polymer-element name="ace-app" extends="g-app">
       <template> 
         <style>
           ajaxorg-ace {
@@ -49,7 +49,7 @@
         </g-panels>
       </template>
       <script>
-        Polymer.register(this, {
+        Polymer('ace-app', {
           ready: function() {
             this.super();
             this.$.ace.value = this.textContent;
@@ -59,6 +59,6 @@
           }
         });
       </script>
-    </element>
+    </polymer-element>
   </body>
 </html>

Gallery/elements.html

@@ -3,8 +3,9 @@
 Use of this source code is governed by a BSD-style
 license that can be found in the LICENSE file.
 -->
+<link rel="import" href="../../polymer-elements/polymer-meta/polymer-meta.html">
 <link rel="import" href="../../polymer-elements/polymer-page/polymer-page.html">
-<link rel="import" href="../../polymer-elements/polymer-layout/polymer-flex-layout.html">
+<link rel="import" href="../../polymer-elements/polymer-flex-layout/polymer-flex-layout.html">
 <link rel="import" href="../../polymer-ui-elements/polymer-ui-toolbar/polymer-ui-toolbar.html">
 <link rel="import" href="../../polymer-ui-elements/polymer-ui-icon-button/polymer-ui-icon-button.html">
 <!-- app -->

Gallery/elements/ga-app.html

@@ -3,9 +3,9 @@
 Use of this source code is governed by a BSD-style
 license that can be found in the LICENSE file.
 -->
-<element name="ga-app" attributes="metadata" on-select-card="showDetail">
-  <link rel="stylesheet" href="css/ga-app.css">
+<polymer-element name="ga-app" attributes="metadata" on-select-card="showDetail">
   <template>
+    <link rel="stylesheet" href="css/ga-app.css">
     <polymer-flex-layout vertical></polymer-flex-layout>
     <polymer-ui-toolbar theme="polymer-ui-dark-theme">
       <polymer-ui-icon-button icon="menu" hidden="{{mainShowing}}" on-tap="showMain"></polymer-ui-icon-button>
@@ -25,7 +25,7 @@
     <ga-meta id="meta" list="{{metadata}}"></ga-meta>
   </template>
   <script>
-    Polymer.register(this, {
+    Polymer('ga-app', {
       selectedPanel: 'main',
       searchSlideOpened: false,
       inserted: function() {
@@ -47,7 +47,7 @@
       },
       searchSlideOpenedChanged: function() {
         this.$.main.classList.toggle('slide-opened', this.searchSlideOpened);
-        if (this.searchSlideOpened) {
+        if (!this.searchSlideOpened) {
           this.$.input.value = '';
           this.search();
         } else {
@@ -73,4 +73,4 @@
       }
     });
   </script>
-</element>
+</polymer-element>

Gallery/elements/ga-cards.html

@@ -3,9 +3,9 @@
 Use of this source code is governed by a BSD-style
 license that can be found in the LICENSE file.
 -->
-<element name="ga-cards" attributes="items selected">
-  <link rel="stylesheet" href="css/ga-cards.css">
+<polymer-element name="ga-cards" attributes="items selected">
   <template>
+    <link rel="stylesheet" href="css/ga-cards.css">
     <template repeat="{{items}}">
       <div class="card">
         <div class="inner" touch-action="none" on-tap="selectCard">
@@ -17,11 +17,11 @@
     </template>
   </template>
   <script>
-    Polymer.register(this, {
+    Polymer('ga-cards', {
       selectCard: function(event, detail, sender) {
         this.selected = sender.templateInstance.model;
         this.fire('select-card');
       }
     });
   </script>
-</element>
+</polymer-element>

Gallery/elements/ga-detail.html

@@ -3,9 +3,9 @@
 Use of this source code is governed by a BSD-style
 license that can be found in the LICENSE file.
 -->
-<element name="ga-detail" attributes="item">
-  <link rel="stylesheet" href="css/ga-detail.css">
+<polymer-element name="ga-detail" attributes="item">
   <template>
+    <link rel="stylesheet" href="css/ga-detail.css">
     <div class="main" touch-action="pan-y">
       <div class="inner">
         <div class="title">{{item.id}} <span class="label">({{item.label}})</span></div>
@@ -20,10 +20,10 @@
     </div>
   </template>
   <script>
-    Polymer.register(this, {
+    Polymer('ga-detail', {
       itemChanged: function() {
         this.$.description.innerHTML = this.item.description;
       }
     });
   </script>
-</element>
+</polymer-element>

Gallery/elements/ga-meta.html

@@ -3,42 +3,9 @@
 Use of this source code is governed by a BSD-style
 license that can be found in the LICENSE file.
 -->
-<element name="ga-meta" attributes="list label author publishedDate description imageUrl sourceUrl demoUrl">
-  <template>
-    <style>
-      @host {   
-        * {
-          display: none;
-        }
-      }
-    </style>
-  </template>
+<polymer-element name="ga-meta" extends="polymer-meta"
+    attributes="author publishedDate description imageUrl sourceUrl demoUrl">
   <script>
-    var metaData = {}, metaArray = [];
-    Polymer.register(this, {
-      ready: function() {
-        this.idChanged();
-      },
-      idChanged: function(old) {
-        if (this.id && this.id !== 'meta') {
-          this.unregister(this, old);
-          metaData[this.id] = this;
-          metaArray.push(this);
-        }
-      },
-      unregister: function(meta, id) {
-        delete metaData[id || meta.id];
-        var i = metaArray.indexOf(meta);
-        if (i >= 0) {
-          metaArray.splice(i, 1);
-        }
-      },
-      get list() {
-        return metaArray;
-      },
-      byId: function(id) {
-        return metaData[id];
-      }
-    });
+    Polymer('ga-meta');
   </script>
-</element>
+</polymer-element>

MemoryGame/index.html

@@ -11,7 +11,7 @@
     <script src="../../polymer/polymer.js"></script>
     <script src="game.js"></script>
 
-    <element name="g-card" attributes="tile">
+    <polymer-element name="g-card" attributes="tile">
         <link rel="stylesheet" href="card.css">
       <template>
           <div class="card {{ flipped: tile.flipped }}">
@@ -20,12 +20,12 @@
           </div>
       </template>
       <script>
-        Polymer.register(this, {
+        Polymer('g-card', {
         });
       </script>
-    </element>
+    </polymer-element>
 
-    <element name="match-game">
+    <polymer-element name="match-game">
       <template>
         <style>
           div {
@@ -44,7 +44,7 @@
         <div class="message">{{ game.message }}</div>
       </template>
       <script>
-        Polymer.register(this, {
+        Polymer('match-game', {
           ready: function() {
             this.game = new Game(['8-ball', 'kronos', 'baked-potato',
                                   'dinosaur', 'rocket', 'skinny-unicorn',
@@ -55,7 +55,7 @@
           }
         });
       </script>
-    </element>
+    </polymer-element>
 
   </head>
 

PolymerElementsPlayground/elements.html → Playground/elements.html

@@ -4,8 +4,12 @@
 license that can be found in the LICENSE file.
 -->
 
+<!-- flex layout css -->
+<link rel="stylesheet" href="../../polymer-elements/polymer-flex-layout/polymer-flex-layout.css">
+
 <!-- polymer-elements -->
-<link rel="import" href="../../polymer-elements/polymer-layout/polymer-flex-layout.html">
+<link rel="import" href="../../polymer-elements/polymer-flex-layout/polymer-flex-layout.html">
+<link rel="import" href="../../polymer-elements/polymer-collapse/polymer-collapse.html">
 <link rel="import" href="../../polymer-elements/polymer-meta/polymer-meta.html">
 
 <!-- polymer-ui-elements -->
@@ -18,3 +22,5 @@
 <link rel="import" href="../../polymer-ui-elements/polymer-ui-ratings/polymer-ui-ratings.html">
 <link rel="import" href="../../polymer-ui-elements/polymer-ui-toggle-button/polymer-ui-toggle-button.html">
 <link rel="import" href="../../polymer-ui-elements/polymer-ui-tabs/polymer-ui-tabs.html">
+<link rel="import" href="../../polymer-ui-elements/polymer-ui-splitter/polymer-ui-splitter.html">
+<link rel="import" href="../../polymer-ui-elements/polymer-ui-accordion/polymer-ui-accordion.html">

Playground/index.html

@@ -6,12 +6,20 @@
 -->
 <html>
   <head>
-    <title>Playground</title>
+    <title>Polymer Playground</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <link rel="icon" href="favicon.ico">
+    <!-- load polymer -->
     <script src="../../polymer/polymer.js"></script>
+    <!-- import elements -->
+    <link rel="import" href="elements.html">
     <link rel="import" href="src/pg-app.html">
+    <!-- load metadata -->
+    <link rel="import" href="metadata.html">
+    <!--  -->
+    <link rel="stylesheet" href="../../polymer-ui-elements/basic.css">
   </head>
-  <body>
-    <pg-app></pg-app>
+  <body class="polymer-ui-body-text">
+    <pg-app class="polymer-ui-fit" theme="polymer-ui-dark-theme"></pg-app>
   </body>
 </html>