update elements and fix some bugs

lib/src/paper-tabs/paper-tabs.html

 <!--
 @license
 Copyright (c) 2015 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
 -->
 
 <link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
 <link rel="import" href="../iron-menu-behavior/iron-menubar-behavior.html">
 <link rel="import" href="../iron-icon/iron-icon.html">
 <link rel="import" href="../paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../paper-styles/color.html">
 <link rel="import" href="paper-tabs-icons.html">
 <link rel="import" href="paper-tab.html">
 
 <!--
+Material design: [Tabs](https://www.google.com/design/spec/components/tabs.html)
+
 `paper-tabs` makes it easy to explore and switch between different views or functional aspects of
 an app, or to browse categorized data sets.
 
 Use `selected` property to get or set the selected tab.
 
 Example:
 
     <paper-tabs selected="0">
       <paper-tab>TAB 1</paper-tab>
       <paper-tab>TAB 2</paper-tab>
@@ skipping 85 matching lines @@
       position: absolute;
       white-space: nowrap;
     }
 
     .hidden {
       display: none;
     }
 
     .not-visible {
       opacity: 0;
+      cursor: default;
     }
 
     paper-icon-button {
       width: 24px;
       padding: 16px;
     }
 
     #selectionBar {
       position: absolute;
       height: 2px;
@@ skipping 27 matching lines @@
     }
 
     #tabsContent > ::content > *:not(#selectionBar) {
       height: 100%;
     }
 
   </style>
 
   <template>
 
-    <paper-icon-button icon="paper-tabs:chevron-left" class$="[[_computeScrollButtonClass(_leftHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButtonUp" on-down="_onLeftScrollButtonDown"></paper-icon-button>
+    <paper-icon-button icon="paper-tabs:chevron-left" class$="[[_computeScrollButtonClass(_leftHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButtonUp" on-down="_onLeftScrollButtonDown" tabindex="-1"></paper-icon-button>
 
     <div id="tabsContainer" class="flex" on-track="_scroll" on-down="_down">
 
       <div id="tabsContent" class$="[[_computeTabsContentClass(scrollable)]]">
 
         <content select="*"></content>
 
         <div id="selectionBar" class$="[[_computeSelectionBarClass(noBar, alignBottom)]]"
             on-transitionend="_onBarTransitionEnd"></div>
 
       </div>
 
     </div>
 
-    <paper-icon-button icon="paper-tabs:chevron-right" class$="[[_computeScrollButtonClass(_rightHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButtonUp" on-down="_onRightScrollButtonDown"></paper-icon-button>
+    <paper-icon-button icon="paper-tabs:chevron-right" class$="[[_computeScrollButtonClass(_rightHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButtonUp" on-down="_onRightScrollButtonDown" tabindex="-1"></paper-icon-button>
 
   </template>
 
 </dom-module>
 
 <script>
 
   Polymer({
 
     is: 'paper-tabs',
@@ skipping 56 matching lines @@
       /**
        * If true, the tabs are aligned to bottom (the selection bar appears at the top).
        */
       alignBottom: {
         type: Boolean,
         value: false
       },
 
       /**
        * Gets or sets the selected element. The default is to use the index of the item.
-       *
-       * @type {string|number}
        */
       selected: {
         type: String,
         notify: true
       },
 
       selectable: {
         type: String,
         value: 'paper-tab'
       },
@@ skipping 223 matching lines @@
         this._positionBar(this._pos.width, this._pos.left);
       // bar animation done
       } else if (cl.contains('contract')) {
         cl.remove('contract');
       }
     }
 
   });
 
 </script>