RubyGems - polymer-paper-rails - Versions diffs - 0.2.0 → 0.2.5 - Mend

polymer-paper-rails 0.2.0 → 0.2.5

Files changed (578) hide show

data/app/assets/components/core-overlay/tests/html/core-overlay-scroll.html ADDED Viewed

@@ -0,0 +1,130 @@
+<!doctype html>
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+  <title>core-overlay</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <script src="../../../webcomponentsjs/webcomponents.js"></script>
+  <script src="../../../polymer-test-tools/chai/chai.js"></script>
+  <script src="../../../polymer-test-tools/htmltest.js"></script>
+  <link rel="import" href="../../../core-transition/core-transition-css.html">
+  <link rel="import" href="../../core-overlay.html">
+  <style>
+    core-overlay {
+      width: 300px;
+      border: 1px solid black;
+      margin: 10px;
+      overflow: auto !important;
+    }
+    #content {
+      overflow: auto;
+    }
+  </style>
+</head>
+<body fullbleed unresolved>
+  <template is="auto-binding">
+    <core-overlay id="simple">
+        <div>Lots of Content that might overflow the overlay!</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+    </core-overlay>
+    <core-overlay id="sectioned" vertical layout sizingTarget="{{$.content}}">
+      <header>Stuff on top</header>
+      <section id="content">
+        <div>Lots of Content that might overflow the overlay!</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+      </section>
+      <footer>Stuff on bottom</footer>
+    </core-overlay>
+  </template>
+  <script>
+    addEventListener('template-bound', function(e) {
+      // setup
+      var simple = document.querySelector('#simple');
+      var sectioned = document.querySelector('#sectioned');
+      function testWhenOpen(element, test, next) {
+        var l1 = function() {
+          test();
+          element.async(function() {
+            element.opened = false;
+          }, null, 1);
+        };
+        var l2 = function() {
+          element.removeEventListener('core-overlay-open-completed', l1);
+          element.removeEventListener('core-overlay-close-completed', l2);
+          next();
+        };
+        element.addEventListener('core-overlay-open-completed', l1);
+        element.addEventListener('core-overlay-close-completed', l2);
+        element.opened = true;
+      }
+      asyncSeries([
+        // scrolling overlay does not overflow
+        function(next) {
+          testWhenOpen(simple, function() {
+            var rect = simple.getBoundingClientRect();
+            chai.assert.ok(0 < rect.top + 10, 'overlay constrained to window size');
+            chai.assert.ok(0 < rect.left + 10, 'overlay constrained to window size');
+            chai.assert.ok(window.innerWidth >= rect.right + 10, 'overlay constrained to window size');
+            chai.assert.ok(window.innerHeight >= rect.bottom + 10, 'overlay constrained to window size');
+          }, next);
+        },
+        // scrolling overlay does not overflow
+        function(next) {
+          testWhenOpen(sectioned, function() {
+            var rect = sectioned.getBoundingClientRect();
+            chai.assert.ok(0 < rect.top + 10, 'overlay constrained to window size');
+            chai.assert.ok(0 < rect.left + 10, 'overlay constrained to window size');
+            chai.assert.ok(window.innerWidth >= rect.right + 10, 'overlay constrained to window size');
+            chai.assert.ok(window.innerHeight >= rect.bottom + 10, 'overlay constrained to window size');
+          }, next);
+        },
+        // positioned scrolling overlay does not overflow
+        function(next) {
+          sectioned.style.top = sectioned.style.right = '';
+          sectioned.style.left = '300px';
+          sectioned.style.bottom = '200px'
+          testWhenOpen(sectioned, function() {
+            var rect = sectioned.getBoundingClientRect();
+            chai.assert.ok(0 < rect.top + 10, 'overlay constrained to window size');
+            chai.assert.ok(0 < rect.left + 10, 'overlay constrained to window size');
+            chai.assert.ok(window.innerWidth >= rect.right + 10, 'overlay constrained to window size');
+            chai.assert.ok(window.innerHeight >= rect.bottom + 10, 'overlay constrained to window size');
+          }, next);
+        }
+      ], done);
+    });
+  </script>
+</body>
+</html>
+</html>

data/app/assets/components/core-overlay/tests/js/htmltests.js ADDED Viewed

@@ -0,0 +1,6 @@
+htmlSuite('core-overlay', function() {
+  htmlTest('html/core-overlay-basic.html');
+  htmlTest('html/core-overlay-positioning.html');
+  htmlTest('html/core-overlay-positioning-margin.html');
+  htmlTest('html/core-overlay-scroll.html');
+});

data/app/assets/components/core-overlay/tests/runner.html ADDED Viewed

@@ -0,0 +1,14 @@
+<!doctype htmlz>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <title>Web Component Test Runner</title>
+  <script src="../../polymer-test-tools/ci-support.js"></script>
+</head>
+<body>
+  <script>
+    runTests('tests.json');
+  </script>
+</body>
+</html>

data/app/assets/components/core-overlay/tests/tests.json ADDED Viewed

@@ -0,0 +1,6 @@
+{
+	"tools": ["chai", "mocha-tdd"],
+	"tests": [
+		"js/htmltests.js"
+	]
+}

data/app/assets/components/core-scroll-header-panel/core-scroll-header-panel.html CHANGED Viewed

@@ -37,12 +37,11 @@ or, if you would prefer to do it in CSS, just give `html`, `body`, and `core-scr
     }
 `core-scroll-header-panel` works well with `core-toolbar` but can use any element
-that represents a header by adding a `core-header` class to it.  Use the attribute
-or class `content` to delineate the content section.
+that represents a header by adding a `core-header` class to it.
     <core-scroll-header-panel>
       <core-toolbar>Header</core-toolbar>
-      <div content>Content goes here...</div>
+      <div>Content goes here...</div>
     </core-scroll-header-panel>
 @group Polymer Core Elements
@@ -57,9 +56,9 @@ or class `content` to delineate the content section.
   <link rel="stylesheet" href="core-scroll-header-panel.css">
-  <div id="mainContainer" on-scroll="{{scroll}}">
+  <div id="mainContainer">
-    <content id="mainContent" select="[content], .content"></content>
+    <content id="mainContent" select=":not(core-toolbar):not(.core-header)"></content>
   </div>
@@ -76,6 +75,7 @@ or class `content` to delineate the content section.
 </template>
 <script>
+(function() {
   Polymer('core-scroll-header-panel', {
@@ -147,6 +147,7 @@ or class `content` to delineate the content section.
        *
        * @attribute headerHeight
        * @type number
+       * @default 0
        */
       headerHeight: 0,
@@ -158,6 +159,7 @@ or class `content` to delineate the content section.
        *
        * @attribute condensedHeaderHeight
        * @type number
+       * @default 0
        */
       condensedHeaderHeight: 0,
@@ -183,6 +185,15 @@ or class `content` to delineate the content section.
       'headerMargin fixed': 'setup'
     },
+    ready: function() {
+      this._scrollHandler = this.scroll.bind(this);
+      this.scroller.addEventListener('scroll', this._scrollHandler);
+    },
+    detached: function() {
+      this.scroller.removeEventListener('scroll', this._scrollHandler);
+    },
     domReady: function() {
       this.async('measureHeaderHeight');
     },
@@ -191,13 +202,25 @@ or class `content` to delineate the content section.
       return this.$.headerContent.getDistributedNodes()[0];
     },
+    /**
+     * Returns the scrollable element.
+     *
+     * @property scroller
+     * @type Object
+     */
     get scroller() {
       return this.$.mainContainer;
     },
+    /**
+     * Invoke this to tell `core-scroll-header-panel` to re-measure the header's
+     * height.
+     *
+     * @method measureHeaderHeight
+     */
     measureHeaderHeight: function() {
       var header = this.header;
-      if (this.header) {
+      if (header && header.offsetHeight) {
         this.headerHeight = header.offsetHeight;
       }
     },
@@ -276,8 +299,8 @@ or class `content` to delineate the content section.
     },
     translateY: function(s, y) {
-      s.transform = s.webkitTransform = y == null ? '' :
-          'translate3d(0, ' + y + 'px, 0)';
+      var t = y == null ? '' : 'translate3d(0, ' + y + 'px, 0)';
+      setTransform(s, t);
     },
     scroll: function(event) {
@@ -296,7 +319,7 @@ or class `content` to delineate the content section.
       }
       if (!event || !this.fixed && y !== this.y) {
-        requestAnimationFrame(this.transformHeader.bind(this, y));
+        this.transformHeader(y);
       }
       this.prevScrollTop = Math.max(sTop, 0);
@@ -308,6 +331,19 @@ or class `content` to delineate the content section.
     }
   });
+  //determine proper transform mechanizm
+  if (document.documentElement.style.transform !== undefined) {
+    var setTransform = function(style, string) {
+      style.transform = string;
+    }
+  } else {
+    var setTransform = function(style, string) {
+      style.webkitTransform = string;
+    }
+  }
+})();
 </script>
 </polymer-element>

data/app/assets/components/core-scroll-header-panel/metadata.html CHANGED Viewed

@@ -38,4 +38,4 @@
   </template>
-</x-meta>
+</x-meta>

data/app/assets/components/core-selector/core-selector.html CHANGED Viewed

@@ -66,7 +66,7 @@ Fired when an item element is tapped.
 <link rel="import" href="../core-selection/core-selection.html">
 <polymer-element name="core-selector"
-    attributes="selected multi valueattr selectedClass selectedProperty selectedAttribute selectedItem selectedModel selectedIndex notap target itemsSelector activateEvent">
+    attributes="selected multi valueattr selectedClass selectedProperty selectedAttribute selectedItem selectedModel selectedIndex notap excludedLocalNames target itemsSelector activateEvent">
   <template>
     <core-selection id="selection" multi="{{multi}}" on-core-select="{{selectionSelect}}"></core-selection>
@@ -160,6 +160,8 @@ Fired when an item element is tapped.
       /**
        * Returns the currently selected element. In multi-selection this returns
        * an array of selected elements.
+       * Note that you should not use this to set the selection. Instead use
+       * `selected`.
        *
        * @attribute selectedItem
        * @type Object
@@ -170,6 +172,8 @@ Fired when an item element is tapped.
       /**
        * In single selection, this returns the model associated with the
        * selected element.
+       * Note that you should not use this to set the selection. Instead use
+       * `selected`.
        *
        * @attribute selectedModel
        * @type Object
@@ -179,6 +183,8 @@ Fired when an item element is tapped.
       /**
        * In single selection, this returns the selected index.
+       * Note that you should not use this to set the selection. Instead use
+       * `selected`.
        *
        * @attribute selectedIndex
        * @type number
@@ -186,6 +192,26 @@ Fired when an item element is tapped.
        */
       selectedIndex: -1,
+      /**
+       * Nodes with local name that are in the list will not be included
+       * in the selection items.  In the following example, `items` returns four
+       * `core-item`'s and doesn't include `h3` and `hr`.
+       *
+       *     <core-selector excludedLocalNames="h3 hr">
+       *       <h3>Header</h3>
+       *       <core-item>Item1</core-item>
+       *       <core-item>Item2</core-item>
+       *       <hr>
+       *       <core-item>Item3</core-item>
+       *       <core-item>Item4</core-item>
+       *     </core-selector>
+       *
+       * @attribute excludedLocalNames
+       * @type string
+       * @default ''
+       */
+      excludedLocalNames: '',
       /**
        * The target element that contains items.  If this is not set
        * core-selector is the container.
@@ -198,7 +224,8 @@ Fired when an item element is tapped.
       /**
        * This can be used to query nodes from the target node to be used for
-       * selection items.  Note this only works if the 'target' property is set.
+       * selection items.  Note this only works if `target` is set
+       * and is not `core-selector` itself.
        *
        * Example:
        *
@@ -236,8 +263,16 @@ Fired when an item element is tapped.
        */
       notap: false,
+      defaultExcludedLocalNames: 'template',
+      observe: {
+        'selected multi': 'selectedChanged'
+      },
       ready: function() {
         this.activateListener = this.activateHandler.bind(this);
+        this.itemFilter = this.filterItem.bind(this);
+        this.excludedLocalNamesChanged();
         this.observer = new MutationObserver(this.updateSelected.bind(this));
         if (!this.target) {
           this.target = this;
@@ -256,9 +291,22 @@ Fired when an item element is tapped.
         var nodes = this.target !== this ? (this.itemsSelector ?
             this.target.querySelectorAll(this.itemsSelector) :
                 this.target.children) : this.$.items.getDistributedNodes();
-        return Array.prototype.filter.call(nodes || [], function(n) {
-          return n && n.localName !== 'template';
-        });
+        return Array.prototype.filter.call(nodes, this.itemFilter);
+      },
+      filterItem: function(node) {
+        return !this._excludedNames[node.localName];
+      },
+      excludedLocalNamesChanged: function() {
+        this._excludedNames = {};
+        var s = this.defaultExcludedLocalNames;
+        if (this.excludedLocalNames) {
+          s += ' ' + this.excludedLocalNames;
+        }
+        s.split(/\s+/g).forEach(function(n) {
+          this._excludedNames[n] = 1;
+        }, this);
       },
       targetChanged: function(old) {
@@ -292,15 +340,21 @@ Fired when an item element is tapped.
       },
       selectedChanged: function() {
-        this.updateSelected();
+        // TODO(ffu): Right now this is the only way to know that the `selected`
+        // is an array and was mutated, as opposed to newly assigned.
+        if (arguments.length === 1) {
+          this.processSplices(arguments[0]);
+        } else {
+          this.updateSelected();
+        }
       },
       updateSelected: function() {
         this.validateSelected();
         if (this.multi) {
-          this.clearSelection();
+          this.clearSelection(this.selected)
           this.selected && this.selected.forEach(function(s) {
-            this.valueToSelection(s);
+            this.setValueSelected(s, true)
           }, this);
         } else {
           this.valueToSelection(this.selected);
@@ -310,28 +364,47 @@ Fired when an item element is tapped.
       validateSelected: function() {
         // convert to an array for multi-selection
         if (this.multi && !Array.isArray(this.selected) &&
-            this.selected !== null && this.selected !== undefined) {
+            this.selected != null) {
           this.selected = [this.selected];
+        // use the first selected in the array for single-selection
+        } else if (!this.multi && Array.isArray(this.selected)) {
+          var s = this.selected[0];
+          this.clearSelection([s]);
+          this.selected = s;
         }
       },
-      clearSelection: function() {
-        if (this.multi) {
-          this.selection.slice().forEach(function(s) {
-            this.$.selection.setItemSelected(s, false);
-          }, this);
-        } else {
-          this.$.selection.setItemSelected(this.selection, false);
+      processSplices: function(splices) {
+        for (var i = 0, splice; splice = splices[i]; i++) {
+          for (var j = 0; j < splice.removed.length; j++) {
+            this.setValueSelected(splice.removed[j], false);
+          }
+          for (var j = 0; j < splice.addedCount; j++) {
+            this.setValueSelected(this.selected[splice.index + j], true);
+          }
         }
-        this.selectedItem = null;
-        this.$.selection.clear();
+      },
+      clearSelection: function(excludes) {
+        this.$.selection.selection.slice().forEach(function(item) {
+          var v = this.valueForNode(item) || this.items.indexOf(item);
+          if (!excludes || excludes.indexOf(v) < 0) {
+            this.$.selection.setItemSelected(item, false);
+          }
+        }, this);
       },
       valueToSelection: function(value) {
-        var item = (value === null || value === undefined) ?
-            null : this.items[this.valueToIndex(value)];
+        var item = this.valueToItem(value);
         this.$.selection.select(item);
       },
+      setValueSelected: function(value, isSelected) {
+        var item = this.valueToItem(value);
+        if (isSelected ^ this.$.selection.isSelected(item)) {
+          this.$.selection.setItemSelected(item, isSelected);
+        }
+      },
       updateSelectedItem: function() {
         this.selectedItem = this.selection;
@@ -347,6 +420,11 @@ Fired when an item element is tapped.
         this.selectedIndex = this.selectedItem ?
             parseInt(this.valueToIndex(this.selected)) : -1;
       },
+      valueToItem: function(value) {
+        return (value === null || value === undefined) ?
+            null : this.items[this.valueToIndex(value)];
+      },
       valueToIndex: function(value) {
         // find an item with value == value and return it's index
@@ -415,7 +493,6 @@ Fired when an item element is tapped.
         } else {
           this.selected.push(value);
         }
-        this.valueToSelection(value);
       },
       findDistributedTarget: function(target, nodes) {
@@ -434,25 +511,36 @@ Fired when an item element is tapped.
         var item = this.items[index];
         if (item) {
           this.selected = this.valueForNode(item) || index;
+          return item;
         }
       },
       /**
-       * Selects the previous item.  This should be used in single selection only.
+       * Selects the previous item. This should be used in single selection only.
        *
        * @method selectPrevious
+       * @param {boolean} wrapped if true and it is already at the first item,
+       *                  wrap to the end
+       * @returns the previous item or undefined if there is none
        */
-      selectPrevious: function() {
-        this.selectIndex(this.selectedIndex - 1);
+      selectPrevious: function(wrapped) {
+        var i = wrapped && !this.selectedIndex ?
+            this.items.length - 1 : this.selectedIndex - 1;
+        return this.selectIndex(i);
       },
       /**
        * Selects the next item.  This should be used in single selection only.
        *
        * @method selectNext
+       * @param {boolean} wrapped if true and it is already at the last item,
+       *                  wrap to the front
+       * @returns the next item or undefined if there is none
        */
-      selectNext: function() {
-        this.selectIndex(this.selectedIndex + 1);
+      selectNext: function(wrapped) {
+        var i = wrapped && this.selectedIndex >= this.items.length - 1 ?
+            0 : this.selectedIndex + 1;
+        return this.selectIndex(i);
       }
     });