update to polymer3

.gitignore

@@ -1,2 +1,4 @@
 bower_components*
 bower-*.json
+
+node_modules

.travis.yml

@@ -1,22 +1,21 @@
 language: node_js
 sudo: required
-before_script:
-- npm install -g polymer-cli
-- polymer install --variants
+before_script: npm install -g polymer-cli
 node_js: stable
 addons:
   firefox: latest
   apt:
     sources:
-    - google-chrome
+      - google-chrome
     packages:
-    - google-chrome-stable
+      - google-chrome-stable
   sauce_connect: true
 script:
-- xvfb-run polymer test
-- if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test -s 'default'; fi
+  - xvfb-run polymer test --module-resolution=node --npm
+  - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test --module-resolution=node --npm -s ''default''; fi'
 dist: trusty
 env:
   global:
-  - secure: AhT656+287bNaHUPaCe5eyeO3NGr50x4RoV5C3hB5Q6qkraVIu7PV8SjVN041wxXIkSJYe1bwh+f4LnmfrB1J1NBANk8RqrnY/Be/cq/2JmZFFT8F8Mk6vLEqY/81fGi16G/U2j0Ke6Fs423gCaLpvJLHoTz57n1uhduGPnYRKn+i691ktTjn6838oItBFDAcb89qOOlFr1oAlYKQHWmQ7MflD3xll62bOd4gN+1zU/fTE6ES2hSLhkhfcXfEHDuxlUnLcKM0VZxQ02em8o66EtAuWnL+MJviAUsEPd0ycFiCUID87RxsQJqgFZsHItQk5xvXYFDgxRfvR8JZnffc7XiFZYyuE8XVUluj8ugW1ATTqpgoiF42GD/fVYmGsmfUHJuJrcQroF0oq6mJhCGooLi23fzawi7nhERvGWib9meW43t9K4CrSVObn5zl7l4TxwNnBKFd4Wtuc0jLwTM9iClA5ULU+mY0pnwPnea8aQKIx7/HptaxjFBBIPVXYoHK7rqJR1N1dW5PZVmJS4U4nR1h1Rpw3Xno0RJXZgKhKLNkorpkCY4pWjtyGPdwv/LKZGnGUoQvJX0dQEsrDMfLWGT5OE5MJmdLCACxEUZbWduq18qLzGDevfXhOGJs/6bphj0F7SshM8jdEHX+Vp+4YSvuhF9LTEj8XJaTBpO1P0=
-  - secure: Shc1QD4paw7CAPNkaSnjH3vcQBzlBL4qrk+SBfvcnnDqW+cYjSZoZYseJkznOuNgRSb8lytXl7fb/p/5uTD7rW8mgKNYxrWrJzTEqcMRHGgLVLlYGyUFgdD2x6GFCVsY8rupHy1/8A/HFalVGc66sTWkyYIvTFZrKzw3aA9ogdonc4cnNwVGUQyJkDYh4LCjXvwLR3jg45baircECxAQAq4yvl9/aldjq36GLtMcALXqcOblF1kX/LMU+WGj0s3756moLhZvnO1uaF7M9uZ4XRfTE8yHw0RAaxyOHTyLSvVczuXspbB5FOyUEZiL6sk8YctUektxc3t7aFBtqJnE6UtZOnIpjnMZRHKIECQc1WbrdtWauexf0d9HGLAX2R+2wTRRoC3AVk+5QNCaJfV5WxifPTVe9KkXmmNtz2XMuXKRqaEz9YEl55SvCA7xTAz8sD2NG5hsBiO/Wehy2TkTFO1KE/g/+1sVBQkExKae+ZbSImBuvBbF28BKMwfwcZ4jrvct5Yx+xvBkyWbR7ZG3qMRpzBwH9WL8lFmIjzXrkDsT+j0hmbk1N0Vs4ZH7IFSLOdRwcmSxs4YRzecqjqM0jAW8ZYLfHnHP0S1z/CMV5b92NIMYUv51YS1gHPTwDxqmNWchILrHwOy2brfJpp/RfDBHjPKFoDt+MzbqAFYCcUk=
+    - secure: AhT656+287bNaHUPaCe5eyeO3NGr50x4RoV5C3hB5Q6qkraVIu7PV8SjVN041wxXIkSJYe1bwh+f4LnmfrB1J1NBANk8RqrnY/Be/cq/2JmZFFT8F8Mk6vLEqY/81fGi16G/U2j0Ke6Fs423gCaLpvJLHoTz57n1uhduGPnYRKn+i691ktTjn6838oItBFDAcb89qOOlFr1oAlYKQHWmQ7MflD3xll62bOd4gN+1zU/fTE6ES2hSLhkhfcXfEHDuxlUnLcKM0VZxQ02em8o66EtAuWnL+MJviAUsEPd0ycFiCUID87RxsQJqgFZsHItQk5xvXYFDgxRfvR8JZnffc7XiFZYyuE8XVUluj8ugW1ATTqpgoiF42GD/fVYmGsmfUHJuJrcQroF0oq6mJhCGooLi23fzawi7nhERvGWib9meW43t9K4CrSVObn5zl7l4TxwNnBKFd4Wtuc0jLwTM9iClA5ULU+mY0pnwPnea8aQKIx7/HptaxjFBBIPVXYoHK7rqJR1N1dW5PZVmJS4U4nR1h1Rpw3Xno0RJXZgKhKLNkorpkCY4pWjtyGPdwv/LKZGnGUoQvJX0dQEsrDMfLWGT5OE5MJmdLCACxEUZbWduq18qLzGDevfXhOGJs/6bphj0F7SshM8jdEHX+Vp+4YSvuhF9LTEj8XJaTBpO1P0=
+    - secure: Shc1QD4paw7CAPNkaSnjH3vcQBzlBL4qrk+SBfvcnnDqW+cYjSZoZYseJkznOuNgRSb8lytXl7fb/p/5uTD7rW8mgKNYxrWrJzTEqcMRHGgLVLlYGyUFgdD2x6GFCVsY8rupHy1/8A/HFalVGc66sTWkyYIvTFZrKzw3aA9ogdonc4cnNwVGUQyJkDYh4LCjXvwLR3jg45baircECxAQAq4yvl9/aldjq36GLtMcALXqcOblF1kX/LMU+WGj0s3756moLhZvnO1uaF7M9uZ4XRfTE8yHw0RAaxyOHTyLSvVczuXspbB5FOyUEZiL6sk8YctUektxc3t7aFBtqJnE6UtZOnIpjnMZRHKIECQc1WbrdtWauexf0d9HGLAX2R+2wTRRoC3AVk+5QNCaJfV5WxifPTVe9KkXmmNtz2XMuXKRqaEz9YEl55SvCA7xTAz8sD2NG5hsBiO/Wehy2TkTFO1KE/g/+1sVBQkExKae+ZbSImBuvBbF28BKMwfwcZ4jrvct5Yx+xvBkyWbR7ZG3qMRpzBwH9WL8lFmIjzXrkDsT+j0hmbk1N0Vs4ZH7IFSLOdRwcmSxs4YRzecqjqM0jAW8ZYLfHnHP0S1z/CMV5b92NIMYUv51YS1gHPTwDxqmNWchILrHwOy2brfJpp/RfDBHjPKFoDt+MzbqAFYCcUk=
+

demo/index.html

@@ -16,39 +16,56 @@
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
 
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
 
-    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
-    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
-    <link rel="import" href="../paper-swatch-picker.html">
+    <script type="module" src="../../../@polymer/iron-demo-helpers/demo-snippet.js"></script>
+    <script type="module" src="../../../@polymer/iron-demo-helpers/demo-pages-shared-styles.js"></script>
+    <script type="module" src="../paper-swatch-picker.js"></script>
 
     <!-- Ensure Web Animations polyfill is loaded since neon-animation 2.0 doesn't import it -->
-    <link rel="import" href="../../neon-animation/web-animations.html">
+    <script type="module" src="../../../@polymer/neon-animation/web-animations.js"></script>
 
-    <custom-style>
+    <!-- FIXME(polymer-modulizer):
+        These imperative modules that innerHTML your HTML are
+        a hacky way to be sure that any mixins in included style
+        modules are ready before any elements that reference them are
+        instantiated, otherwise the CSS @apply mixin polyfill won't be
+        able to expand the underlying CSS custom properties.
+        See: https://github.com/Polymer/polymer-modulizer/issues/154
+        -->
+    <script type="module">
+const $_documentContainer = document.createElement('template');
+
+$_documentContainer.innerHTML = `<custom-style>
       <style is="custom-style" include="demo-pages-shared-styles">
         paper-swatch-picker {
           margin: 0 10px;
         }
       </style>
-    </custom-style>
+    </custom-style>`;
+
+document.body.appendChild($_documentContainer.content);
+</script>
   </head>
   <body unresolved>
-    <div class="vertical-section-container centered">
+    <script type="module">
+const $_documentContainer = document.createElement('template');
+
+$_documentContainer.innerHTML = `<div class="vertical-section-container centered">
       <h3>A color picker of all the Material Design colours</h3>
       <demo-snippet class="centered-demo">
         <template>
           <paper-swatch-picker></paper-swatch-picker>
           <paper-swatch-picker color="#E91E63"></paper-swatch-picker>
           <!-- Disable the ripple on the color picker button -->
-          <paper-swatch-picker color="#2196F3" noink></paper-swatch-picker>
+          <paper-swatch-picker color="#2196F3" noink=""></paper-swatch-picker>
         </template>
       </demo-snippet>
 
       <h3>The palette used by the color picker can be configured</h3>
       <demo-snippet class="centered-demo">
         <template>
-          <paper-swatch-picker column-count=5 color-list='["#65a5f2", "#2b63ba", "#83be54", "#3b8638", "#f0d551", "#d7be48", "#e5943c", "#cf712e", "#a96ddb", "#6f4196"]' ></paper-swatch-picker>
+          <paper-swatch-picker column-count="5" color-list="[&quot;#65a5f2&quot;, &quot;#2b63ba&quot;, &quot;#83be54&quot;, &quot;#3b8638&quot;, &quot;#f0d551&quot;, &quot;#d7be48&quot;, &quot;#e5943c&quot;, &quot;#cf712e&quot;, &quot;#a96ddb&quot;, &quot;#6f4196&quot;]"></paper-swatch-picker>
         </template>
       </demo-snippet>
 
@@ -66,6 +83,9 @@ <h3>The picker can be styled using custom properties</h3>
           <paper-swatch-picker class="fancy"></paper-swatch-picker>
         </template>
       </demo-snippet>
-    </div>
+    </div>`;
+
+document.body.appendChild($_documentContainer.content);
+</script>
   </body>
 </html>

index.html

@@ -16,8 +16,8 @@
 
   <title>paper-swatch-picker</title>
 
-  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
-  <link rel="import" href="../iron-component-page/iron-component-page.html">
+  <script src="../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+  <script type="module" src="../../@polymer/iron-component-page/iron-component-page.js"></script>
 
 </head>
 <body>

package.json

@@ -0,0 +1,42 @@
+{
+  "description": "A color picker element using all the Material Design colours",
+  "keywords": [
+    "web-components",
+    "polymer",
+    "color",
+    "picker"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/paper-swatch-picker.git"
+  },
+  "homepage": "https://github.com/PolymerElements/paper-swatch-picker",
+  "name": "@katapult/paper-swatch-picker",
+  "version": "3.0.0",
+  "resolutions": {
+    "inherits": "2.0.3",
+    "samsam": "1.1.3",
+    "supports-color": "3.1.2",
+    "type-detect": "1.0.0"
+  },
+  "main": "paper-swatch-picker.js",
+  "author": "The Polymer Authors",
+  "license": "BSD-3-Clause",
+  "dependencies": {
+    "@polymer/iron-flex-layout": "^3.0.0",
+    "@polymer/iron-iconset-svg": "^3.0.0",
+    "@polymer/paper-icon-button": "^3.0.0",
+    "@polymer/paper-item": "^3.0.0",
+    "@polymer/paper-listbox": "^3.0.0",
+    "@polymer/paper-menu-button": "^3.0.0",
+    "@polymer/polymer": "^3.0.0"
+  },
+  "devDependencies": {
+    "@polymer/iron-component-page": "^4.0.0",
+    "@polymer/iron-demo-helpers": "^3.0.0",
+    "@polymer/iron-test-helpers": "^3.0.0",
+    "wct-browser-legacy": "^1.0.1",
+    "@webcomponents/webcomponentsjs": "^2.0.0",
+    "web-animations-js": "^2.3.1"
+  }
+}

paper-swatch-picker-icon.html → paper-swatch-picker-icon.js

@@ -1,18 +1,27 @@
-<!--
+import '../../@polymer/iron-icon/iron-icon.js';
+import '../../@polymer/iron-iconset-svg/iron-iconset-svg.js';
+const $_documentContainer = document.createElement('template');
+
+$_documentContainer.innerHTML = `<iron-iconset-svg size="24" name="swatch">
+<svg><defs>
+<g id="format-color-fill"><path d="M16.56 8.94L7.62 0 6.21 1.41l2.38 2.38-5.15 5.15c-.59.59-.59 1.54 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10L10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5z"></path><path fill-opacity=".36" d="M0 20h24v4H0z"></path></g>
+</defs></svg>
+</iron-iconset-svg>`;
+
+document.head.appendChild($_documentContainer.content);
+
+/**
 @license
 Copyright (c) 2016 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="../iron-icon/iron-icon.html">
-<link rel="import" href="../iron-iconset-svg/iron-iconset-svg.html">
-
-<iron-iconset-svg size="24" name="swatch">
-<svg><defs>
-<g id="format-color-fill"><path d="M16.56 8.94L7.62 0 6.21 1.41l2.38 2.38-5.15 5.15c-.59.59-.59 1.54 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10L10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5z"></path><path fill-opacity=".36" d="M0 20h24v4H0z"></path></g>
-</defs></svg>
-</iron-iconset-svg>
+*/
+/*
+  FIXME(polymer-modulizer): the above comments were extracted
+  from HTML and may be out of place here. Review them and
+  then delete this comment!
+*/
+;

test/index.html

@@ -12,7 +12,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <title>paper-swatch-picker tests</title>
-  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../../wct-browser-legacy/browser.js"></script>
 </head>
 <body>
   <script>