From 28cf765323b8c7fe4440752968c651ccc1b16768 Mon Sep 17 00:00:00 2001
From: Elliott Marquez <emarquez@google.com>
Date: Fri, 22 Jun 2018 17:04:40 -0700
Subject: [PATCH] auto-converted by polymer-modulizer

---
 .travis.yml                                   |  24 +-
 bower.json                                    |  66 --
 demo/index.html                               |   6 +-
 demo/{paper-button.html => paper-button.js}   |  34 +-
 ...adio-button.html => paper-radio-button.js} |  48 +-
 index.html                                    |   4 +-
 manifest.json                                 |  79 +++
 package.json                                  |  34 +-
 paper-button-behavior.d.ts                    |  47 --
 paper-button-behavior.html                    |  89 ---
 paper-button-behavior.js                      |  88 +++
 paper-checked-element-behavior.d.ts           |  36 --
 paper-checked-element-behavior.html           |  57 --
 paper-checked-element-behavior.js             |  56 ++
 paper-inky-focus-behavior.d.ts                |  27 -
 paper-inky-focus-behavior.html                |  50 --
 paper-inky-focus-behavior.js                  |  49 ++
 paper-ripple-behavior.d.ts                    |  78 ---
 paper-ripple-behavior.html                    | 125 ----
 paper-ripple-behavior.js                      | 124 ++++
 test/index.html                               |   4 +-
 test/paper-button-behavior.html               | 147 ++---
 test/paper-checked-element-behavior.html      | 107 ++--
 test/paper-radio-button-behavior.html         |  59 +-
 test/paper-ripple-behavior.html               | 585 +++++++++---------
 ...hadowed-ripple.html => shadowed-ripple.js} |  41 +-
 test/{test-button.html => test-button.js}     |  34 +-
 ...radio-button.html => test-radio-button.js} |  32 +-
 28 files changed, 984 insertions(+), 1146 deletions(-)
 delete mode 100644 bower.json
 rename demo/{paper-button.html => paper-button.js} (73%)
 rename demo/{paper-radio-button.html => paper-radio-button.js} (74%)
 create mode 100644 manifest.json
 delete mode 100644 paper-button-behavior.d.ts
 delete mode 100644 paper-button-behavior.html
 create mode 100644 paper-button-behavior.js
 delete mode 100644 paper-checked-element-behavior.d.ts
 delete mode 100644 paper-checked-element-behavior.html
 create mode 100644 paper-checked-element-behavior.js
 delete mode 100644 paper-inky-focus-behavior.d.ts
 delete mode 100644 paper-inky-focus-behavior.html
 create mode 100644 paper-inky-focus-behavior.js
 delete mode 100644 paper-ripple-behavior.d.ts
 delete mode 100644 paper-ripple-behavior.html
 create mode 100644 paper-ripple-behavior.js
 rename test/{shadowed-ripple.html => shadowed-ripple.js} (65%)
 rename test/{test-button.html => test-button.js} (60%)
 rename test/{test-radio-button.html => test-radio-button.js} (59%)

diff --git a/.travis.yml b/.travis.yml
index 22b17e9..f38216f 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,31 +1,19 @@
 language: node_js
 sudo: 'false'
-before_script:
-  - npm install -g polymer-cli
-  - polymer install --variants
-  - >-
-    npm run update-types && git diff --exit-code || (echo -e
-    '\n\033[31mERROR:\033[0m Typings are stale. Please run "npm run
-    update-types".' && false)
-  - >-
-    npm run format && git diff --exit-code || (echo -e '\n\033[31mERROR:\033[0m
-    Project is not formatted. Please run "npm run format".' && false)
+before_script: npm install -g polymer-cli
 env:
   global:
-    - secure: >-
-        Q7DqYWnSrdVLOmxyUl/WK/gLklAlX+dmBhZB2WZzWVLocR58L6TbD24Qw47G5fVwGmGbiaEHlYPEsvzcAZhHgVmepq+IpPA68clm4juq+gL8quphB9xHiGCLdkNTTdKtLyU0PkIha6WkMrQ/swODaeEqvKYQQWxY5hBSguQtCYI=
-    - secure: >-
-        XyEmnfRSctjtugnNorCxITmncTRvB1Lxcm0vfSNgtV7Dmy/FNO3QebrqhFJXeansdl2MZ1NW5mJQfaTyotJuVIRrdVSYLfx37l3gdgqc7kMgc+/FaNy/NfptmHlJz2WhN2ZQOZ6heahEVSqg2kD1CG6A/ci3S/rZvl0Zk1y5ygQ=
+    - secure: Q7DqYWnSrdVLOmxyUl/WK/gLklAlX+dmBhZB2WZzWVLocR58L6TbD24Qw47G5fVwGmGbiaEHlYPEsvzcAZhHgVmepq+IpPA68clm4juq+gL8quphB9xHiGCLdkNTTdKtLyU0PkIha6WkMrQ/swODaeEqvKYQQWxY5hBSguQtCYI=
+    - secure: XyEmnfRSctjtugnNorCxITmncTRvB1Lxcm0vfSNgtV7Dmy/FNO3QebrqhFJXeansdl2MZ1NW5mJQfaTyotJuVIRrdVSYLfx37l3gdgqc7kMgc+/FaNy/NfptmHlJz2WhN2ZQOZ6heahEVSqg2kD1CG6A/ci3S/rZvl0Zk1y5ygQ=
 node_js: '9'
 addons:
   firefox: latest
   chrome: stable
 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
 cache:
   directories:
     - node_modules
+
diff --git a/bower.json b/bower.json
deleted file mode 100644
index e6437e2..0000000
--- a/bower.json
+++ /dev/null
@@ -1,66 +0,0 @@
-{
-  "name": "paper-behaviors",
-  "version": "2.1.1",
-  "description": "Common behaviors across the paper elements",
-  "authors": [
-    "The Polymer Authors"
-  ],
-  "main": [
-    "paper-button-behavior.html",
-    "paper-checked-element-behavior.html",
-    "paper-inky-focus-behavior.html"
-  ],
-  "keywords": [
-    "web-components",
-    "web-component",
-    "polymer",
-    "paper",
-    "behavior"
-  ],
-  "private": true,
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/PolymerElements/paper-behaviors"
-  },
-  "license": "http://polymer.github.io/LICENSE.txt",
-  "homepage": "https://github.com/PolymerElements/paper-behaviors",
-  "dependencies": {
-    "iron-behaviors": "PolymerElements/iron-behaviors#1 - 2",
-    "iron-checked-element-behavior": "PolymerElements/iron-checked-element-behavior#1 - 2",
-    "paper-ripple": "PolymerElements/paper-ripple#1 - 2",
-    "polymer": "Polymer/polymer#1.9 - 2"
-  },
-  "devDependencies": {
-    "iron-component-page": "polymerelements/iron-component-page#1 - 2",
-    "iron-test-helpers": "polymerelements/iron-test-helpers#1 - 2",
-    "paper-styles": "PolymerElements/paper-styles#1 - 2",
-    "test-fixture": "PolymerElements/test-fixture#^3.0.0-rc.1",
-    "web-component-tester": "^6.0.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
-  },
-  "ignore": [],
-  "variants": {
-    "1.x": {
-      "dependencies": {
-        "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
-        "iron-checked-element-behavior": "PolymerElements/iron-checked-element-behavior#^1.0.0",
-        "paper-ripple": "PolymerElements/paper-ripple#^1.0.0",
-        "polymer": "Polymer/polymer#^1.9"
-      },
-      "devDependencies": {
-        "iron-component-page": "polymerelements/iron-component-page#^1.0.0",
-        "iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
-        "paper-styles": "PolymerElements/paper-styles#^1.0.0",
-        "test-fixture": "PolymerElements/test-fixture#^1.0.0",
-        "web-component-tester": "^4.0.0",
-        "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
-      },
-      "resolutions": {
-        "webcomponentsjs": "^0.7"
-      }
-    }
-  },
-  "resolutions": {
-    "webcomponentsjs": "^1.0.0"
-  }
-}
diff --git a/demo/index.html b/demo/index.html
index 0303fef..8538efa 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -16,10 +16,10 @@
 
     <title>paper-behaviors demo</title>
 
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
 
-    <link href="paper-button.html" rel="import">
-    <link href="paper-radio-button.html" rel="import">
+    <script type="module" src="./paper-button.js"></script>
+    <script type="module" src="./paper-radio-button.js"></script>
 
     <style>
       body {
diff --git a/demo/paper-button.html b/demo/paper-button.js
similarity index 73%
rename from demo/paper-button.html
rename to demo/paper-button.js
index f4d7fe0..e699db6 100644
--- a/demo/paper-button.html
+++ b/demo/paper-button.js
@@ -1,4 +1,4 @@
-<!--
+/**
 @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
@@ -6,14 +6,15 @@
 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="../../paper-styles/element-styles/paper-material-styles.html">
-<link rel="import" href="../paper-button-behavior.html">
-
-<dom-module id="paper-button">
-  <template>
+*/
+import '@polymer/polymer/polymer-legacy.js';
+
+import '@polymer/paper-styles/element-styles/paper-material-styles.js';
+import { PaperButtonBehavior } from '../paper-button-behavior.js';
+import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+Polymer({
+  _template: html`
     <style include="paper-material-styles">
       :host {
         display: inline-block;
@@ -48,16 +49,11 @@
     </style>
 
     <!-- when using paper-material from paper-styles you must add a paper-material class -->
-    <div class="content paper-material" elevation$="[[elevation]]" animated>
+    <div class="content paper-material" elevation\$="[[elevation]]" animated="">
       <slot></slot>
     </div>
-  </template>
-
-  <script>
-    Polymer({
-      is: 'paper-button',
+`,
 
-      behaviors: [Polymer.PaperButtonBehavior]
-    });
-  </script>
-</dom-module>
+  is: 'paper-button',
+  behaviors: [PaperButtonBehavior]
+});
diff --git a/demo/paper-radio-button.html b/demo/paper-radio-button.js
similarity index 74%
rename from demo/paper-radio-button.html
rename to demo/paper-radio-button.js
index 68c27dc..e2cc6af 100644
--- a/demo/paper-radio-button.html
+++ b/demo/paper-radio-button.js
@@ -1,4 +1,4 @@
-<!--
+/**
 @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
@@ -6,13 +6,15 @@
 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="../paper-checked-element-behavior.html">
-
-<dom-module id="paper-radio-button">
-  <template>
+*/
+import '@polymer/polymer/polymer-legacy.js';
+
+import { PaperCheckedElementBehavior } from '../paper-checked-element-behavior.js';
+import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { PaperInkyFocusBehaviorImpl } from '../paper-inky-focus-behavior.js';
+Polymer({
+  _template: html`
     <style>
       :host {
         display: inline-block;
@@ -87,24 +89,18 @@
       <div id="offRadio"></div>
       <div id="onRadio"></div>
     </div>
-  </template>
-
-  <script>
-    Polymer({
-      is: 'paper-radio-button',
+`,
 
-      behaviors: [Polymer.PaperCheckedElementBehavior],
+  is: 'paper-radio-button',
+  behaviors: [PaperCheckedElementBehavior],
+  hostAttributes: {role: 'radio'},
 
-      hostAttributes: {role: 'radio'},
+  ready: function() {
+    this.toggles = true;
+  },
 
-      ready: function() {
-        this.toggles = true;
-      },
-
-      _createRipple: function() {
-        this._rippleContainer = this.$.radioContainer;
-        return Polymer.PaperInkyFocusBehaviorImpl._createRipple.call(this);
-      }
-    });
-  </script>
-</dom-module>
+  _createRipple: function() {
+    this._rippleContainer = this.$.radioContainer;
+    return PaperInkyFocusBehaviorImpl._createRipple.call(this);
+  }
+});
diff --git a/index.html b/index.html
index 37184ea..30f03a5 100644
--- a/index.html
+++ b/index.html
@@ -14,8 +14,8 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <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="../iron-component-page/iron-component-page.js"></script>
 
 </head>
 <body>
diff --git a/manifest.json b/manifest.json
new file mode 100644
index 0000000..541f850
--- /dev/null
+++ b/manifest.json
@@ -0,0 +1,79 @@
+{
+  "files": {
+    "paper-inky-focus-behavior.html": {
+      "convertedUrl": "paper-inky-focus-behavior.js",
+      "exports": {
+        "Polymer.PaperInkyFocusBehaviorImpl": "PaperInkyFocusBehaviorImpl",
+        "Polymer.PaperInkyFocusBehavior": "PaperInkyFocusBehavior"
+      }
+    },
+    "paper-ripple-behavior.html": {
+      "convertedUrl": "paper-ripple-behavior.js",
+      "exports": {
+        "Polymer.PaperRippleBehavior": "PaperRippleBehavior"
+      }
+    },
+    "paper-button-behavior.html": {
+      "convertedUrl": "paper-button-behavior.js",
+      "exports": {
+        "Polymer.PaperButtonBehaviorImpl": "PaperButtonBehaviorImpl",
+        "Polymer.PaperButtonBehavior": "PaperButtonBehavior"
+      }
+    },
+    "paper-checked-element-behavior.html": {
+      "convertedUrl": "paper-checked-element-behavior.js",
+      "exports": {
+        "Polymer.PaperCheckedElementBehaviorImpl": "PaperCheckedElementBehaviorImpl",
+        "Polymer.PaperCheckedElementBehavior": "PaperCheckedElementBehavior"
+      }
+    },
+    "index.html": {
+      "convertedUrl": "index.html",
+      "exports": {}
+    },
+    "demo/index.html": {
+      "convertedUrl": "demo/index.html",
+      "exports": {}
+    },
+    "demo/paper-button.html": {
+      "convertedUrl": "demo/paper-button.js",
+      "exports": {}
+    },
+    "demo/paper-radio-button.html": {
+      "convertedUrl": "demo/paper-radio-button.js",
+      "exports": {}
+    },
+    "test/index.html": {
+      "convertedUrl": "test/index.html",
+      "exports": {}
+    },
+    "test/paper-button-behavior.html": {
+      "convertedUrl": "test/paper-button-behavior.html",
+      "exports": {}
+    },
+    "test/test-button.html": {
+      "convertedUrl": "test/test-button.js",
+      "exports": {}
+    },
+    "test/paper-checked-element-behavior.html": {
+      "convertedUrl": "test/paper-checked-element-behavior.html",
+      "exports": {}
+    },
+    "test/paper-radio-button-behavior.html": {
+      "convertedUrl": "test/paper-radio-button-behavior.html",
+      "exports": {}
+    },
+    "test/test-radio-button.html": {
+      "convertedUrl": "test/test-radio-button.js",
+      "exports": {}
+    },
+    "test/paper-ripple-behavior.html": {
+      "convertedUrl": "test/paper-ripple-behavior.html",
+      "exports": {}
+    },
+    "test/shadowed-ripple.html": {
+      "convertedUrl": "test/shadowed-ripple.js",
+      "exports": {}
+    }
+  }
+}
diff --git a/package.json b/package.json
index 8d47d09..9ae9d5b 100644
--- a/package.json
+++ b/package.json
@@ -1,19 +1,47 @@
 {
-  "name": "@polymer/paper-behaviors",
-  "private": true,
   "description": "Common behaviors across the paper elements",
+  "keywords": [
+    "web-components",
+    "web-component",
+    "polymer",
+    "paper",
+    "behavior"
+  ],
   "repository": {
     "type": "git",
     "url": "git://github.com/PolymerElements/paper-behaviors"
   },
+  "homepage": "https://github.com/PolymerElements/paper-behaviors",
+  "name": "@polymer/paper-behaviors",
   "license": "BSD-3-Clause",
   "devDependencies": {
     "@polymer/gen-typescript-declarations": "^1.2.2",
     "bower": "^1.8.0",
-    "webmat": "^0.2.0"
+    "webmat": "^0.2.0",
+    "@polymer/iron-component-page": "^3.0.0-pre.20",
+    "@polymer/iron-test-helpers": "^3.0.0-pre.20",
+    "@polymer/paper-styles": "^3.0.0-pre.20",
+    "@polymer/test-fixture": "^3.0.0-pre.20",
+    "wct-browser-legacy": "^1.0.1",
+    "@webcomponents/webcomponentsjs": "^2.0.0"
   },
   "scripts": {
     "update-types": "bower install && gen-typescript-declarations --deleteExisting --outDir .",
     "format": "webmat && npm run update-types"
+  },
+  "version": "3.0.0-pre.20",
+  "resolutions": {
+    "inherits": "2.0.3",
+    "samsam": "1.1.3",
+    "supports-color": "3.1.2",
+    "type-detect": "1.0.0",
+    "@webcomponents/webcomponentsjs": "2.0.0-beta.2"
+  },
+  "author": "The Polymer Authors",
+  "dependencies": {
+    "@polymer/iron-behaviors": "^3.0.0-pre.20",
+    "@polymer/iron-checked-element-behavior": "^3.0.0-pre.20",
+    "@polymer/paper-ripple": "^3.0.0-pre.20",
+    "@polymer/polymer": "^3.0.0"
   }
 }
diff --git a/paper-button-behavior.d.ts b/paper-button-behavior.d.ts
deleted file mode 100644
index d0ed256..0000000
--- a/paper-button-behavior.d.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * DO NOT EDIT
- *
- * This file was automatically generated by
- *   https://github.com/Polymer/gen-typescript-declarations
- *
- * To modify these typings, edit the source file(s):
- *   paper-button-behavior.html
- */
-
-/// <reference path="../polymer/types/polymer.d.ts" />
-/// <reference path="../iron-behaviors/iron-button-state.d.ts" />
-/// <reference path="paper-ripple-behavior.d.ts" />
-
-declare namespace Polymer {
-
-  interface PaperButtonBehavior extends Polymer.IronButtonState, Polymer.IronControlState, Polymer.PaperRippleBehavior {
-
-    /**
-     * The z-depth of this element, from 0-5. Setting to 0 will remove the
-     * shadow, and each increasing number greater than 0 will be "deeper"
-     * than the last.
-     */
-    readonly elevation: number|null|undefined;
-    hostAttributes: object|null;
-
-    /**
-     * In addition to `IronButtonState` behavior, when space key goes down,
-     * create a ripple down effect.
-     *
-     * @param event .
-     */
-    _spaceKeyDownHandler(event: KeyboardEvent): void;
-
-    /**
-     * In addition to `IronButtonState` behavior, when space key goes up,
-     * create a ripple up effect.
-     *
-     * @param event .
-     */
-    _spaceKeyUpHandler(event: KeyboardEvent): void;
-    _calculateElevation(): void;
-    _computeKeyboardClass(receivedFocusFromKeyboard: any): void;
-  }
-
-  const PaperButtonBehavior: object;
-}
diff --git a/paper-button-behavior.html b/paper-button-behavior.html
deleted file mode 100644
index 63e07ae..0000000
--- a/paper-button-behavior.html
+++ /dev/null
@@ -1,89 +0,0 @@
-<!--
-@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-behaviors/iron-button-state.html">
-<link rel="import" href="paper-ripple-behavior.html">
-
-<script>
-  /** @polymerBehavior Polymer.PaperButtonBehavior */
-  Polymer.PaperButtonBehaviorImpl = {
-    properties: {
-      /**
-       * The z-depth of this element, from 0-5. Setting to 0 will remove the
-       * shadow, and each increasing number greater than 0 will be "deeper"
-       * than the last.
-       *
-       * @attribute elevation
-       * @type number
-       * @default 1
-       */
-      elevation: {type: Number, reflectToAttribute: true, readOnly: true}
-    },
-
-    observers: [
-      '_calculateElevation(focused, disabled, active, pressed, receivedFocusFromKeyboard)',
-      '_computeKeyboardClass(receivedFocusFromKeyboard)'
-    ],
-
-    hostAttributes: {role: 'button', tabindex: '0', animated: true},
-
-    _calculateElevation: function() {
-      var e = 1;
-      if (this.disabled) {
-        e = 0;
-      } else if (this.active || this.pressed) {
-        e = 4;
-      } else if (this.receivedFocusFromKeyboard) {
-        e = 3;
-      }
-      this._setElevation(e);
-    },
-
-    _computeKeyboardClass: function(receivedFocusFromKeyboard) {
-      this.toggleClass('keyboard-focus', receivedFocusFromKeyboard);
-    },
-
-    /**
-     * In addition to `IronButtonState` behavior, when space key goes down,
-     * create a ripple down effect.
-     *
-     * @param {!KeyboardEvent} event .
-     */
-    _spaceKeyDownHandler: function(event) {
-      Polymer.IronButtonStateImpl._spaceKeyDownHandler.call(this, event);
-      // Ensure that there is at most one ripple when the space key is held down.
-      if (this.hasRipple() && this.getRipple().ripples.length < 1) {
-        this._ripple.uiDownAction();
-      }
-    },
-
-    /**
-     * In addition to `IronButtonState` behavior, when space key goes up,
-     * create a ripple up effect.
-     *
-     * @param {!KeyboardEvent} event .
-     */
-    _spaceKeyUpHandler: function(event) {
-      Polymer.IronButtonStateImpl._spaceKeyUpHandler.call(this, event);
-      if (this.hasRipple()) {
-        this._ripple.uiUpAction();
-      }
-    }
-  };
-
-  /** @polymerBehavior */
-  Polymer.PaperButtonBehavior = [
-    Polymer.IronButtonState,
-    Polymer.IronControlState,
-    Polymer.PaperRippleBehavior,
-    Polymer.PaperButtonBehaviorImpl
-  ];
-</script>
diff --git a/paper-button-behavior.js b/paper-button-behavior.js
new file mode 100644
index 0000000..fdb8a5a
--- /dev/null
+++ b/paper-button-behavior.js
@@ -0,0 +1,88 @@
+/**
+@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
+*/
+import '@polymer/polymer/polymer-legacy.js';
+
+import { IronButtonStateImpl, IronButtonState } from '@polymer/iron-behaviors/iron-button-state.js';
+import { PaperRippleBehavior } from './paper-ripple-behavior.js';
+import { IronControlState } from '@polymer/iron-behaviors/iron-control-state.js';
+
+/** @polymerBehavior Polymer.PaperButtonBehavior */
+export const PaperButtonBehaviorImpl = {
+  properties: {
+    /**
+     * The z-depth of this element, from 0-5. Setting to 0 will remove the
+     * shadow, and each increasing number greater than 0 will be "deeper"
+     * than the last.
+     *
+     * @attribute elevation
+     * @type number
+     * @default 1
+     */
+    elevation: {type: Number, reflectToAttribute: true, readOnly: true}
+  },
+
+  observers: [
+    '_calculateElevation(focused, disabled, active, pressed, receivedFocusFromKeyboard)',
+    '_computeKeyboardClass(receivedFocusFromKeyboard)'
+  ],
+
+  hostAttributes: {role: 'button', tabindex: '0', animated: true},
+
+  _calculateElevation: function() {
+    var e = 1;
+    if (this.disabled) {
+      e = 0;
+    } else if (this.active || this.pressed) {
+      e = 4;
+    } else if (this.receivedFocusFromKeyboard) {
+      e = 3;
+    }
+    this._setElevation(e);
+  },
+
+  _computeKeyboardClass: function(receivedFocusFromKeyboard) {
+    this.toggleClass('keyboard-focus', receivedFocusFromKeyboard);
+  },
+
+  /**
+   * In addition to `IronButtonState` behavior, when space key goes down,
+   * create a ripple down effect.
+   *
+   * @param {!KeyboardEvent} event .
+   */
+  _spaceKeyDownHandler: function(event) {
+    IronButtonStateImpl._spaceKeyDownHandler.call(this, event);
+    // Ensure that there is at most one ripple when the space key is held down.
+    if (this.hasRipple() && this.getRipple().ripples.length < 1) {
+      this._ripple.uiDownAction();
+    }
+  },
+
+  /**
+   * In addition to `IronButtonState` behavior, when space key goes up,
+   * create a ripple up effect.
+   *
+   * @param {!KeyboardEvent} event .
+   */
+  _spaceKeyUpHandler: function(event) {
+    IronButtonStateImpl._spaceKeyUpHandler.call(this, event);
+    if (this.hasRipple()) {
+      this._ripple.uiUpAction();
+    }
+  }
+};
+
+/** @polymerBehavior */
+export const PaperButtonBehavior = [
+  IronButtonState,
+  IronControlState,
+  PaperRippleBehavior,
+  PaperButtonBehaviorImpl
+];
diff --git a/paper-checked-element-behavior.d.ts b/paper-checked-element-behavior.d.ts
deleted file mode 100644
index 1c28837..0000000
--- a/paper-checked-element-behavior.d.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * DO NOT EDIT
- *
- * This file was automatically generated by
- *   https://github.com/Polymer/gen-typescript-declarations
- *
- * To modify these typings, edit the source file(s):
- *   paper-checked-element-behavior.html
- */
-
-/// <reference path="../polymer/types/polymer.d.ts" />
-/// <reference path="../iron-checked-element-behavior/iron-checked-element-behavior.d.ts" />
-/// <reference path="paper-inky-focus-behavior.d.ts" />
-
-declare namespace Polymer {
-
-  /**
-   * Use `Polymer.PaperCheckedElementBehavior` to implement a custom element
-   * that has a `checked` property similar to `Polymer.IronCheckedElementBehavior`
-   * and is compatible with having a ripple effect.
-   */
-  interface PaperCheckedElementBehavior extends Polymer.PaperInkyFocusBehavior, Polymer.IronCheckedElementBehavior {
-
-    /**
-     * Synchronizes the element's `active` and `checked` state.
-     */
-    _buttonStateChanged(): void;
-
-    /**
-     * Synchronizes the element's checked state with its ripple effect.
-     */
-    _checkedChanged(): void;
-  }
-
-  const PaperCheckedElementBehavior: object;
-}
diff --git a/paper-checked-element-behavior.html b/paper-checked-element-behavior.html
deleted file mode 100644
index 79812a6..0000000
--- a/paper-checked-element-behavior.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<!--
-@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-checked-element-behavior/iron-checked-element-behavior.html">
-<link rel="import" href="paper-inky-focus-behavior.html">
-
-<script>
-  /**
-   * Use `Polymer.PaperCheckedElementBehavior` to implement a custom element
-   * that has a `checked` property similar to `Polymer.IronCheckedElementBehavior`
-   * and is compatible with having a ripple effect.
-   * @polymerBehavior Polymer.PaperCheckedElementBehavior
-   */
-  Polymer.PaperCheckedElementBehaviorImpl = {
-    /**
-     * Synchronizes the element's checked state with its ripple effect.
-     */
-    _checkedChanged: function() {
-      Polymer.IronCheckedElementBehaviorImpl._checkedChanged.call(this);
-      if (this.hasRipple()) {
-        if (this.checked) {
-          this._ripple.setAttribute('checked', '');
-        } else {
-          this._ripple.removeAttribute('checked');
-        }
-      }
-    },
-
-    /**
-     * Synchronizes the element's `active` and `checked` state.
-     */
-    _buttonStateChanged: function() {
-      Polymer.PaperRippleBehavior._buttonStateChanged.call(this);
-      if (this.disabled) {
-        return;
-      }
-      if (this.isAttached) {
-        this.checked = this.active;
-      }
-    }
-  };
-
-  /** @polymerBehavior Polymer.PaperCheckedElementBehavior */
-  Polymer.PaperCheckedElementBehavior = [
-    Polymer.PaperInkyFocusBehavior,
-    Polymer.IronCheckedElementBehavior,
-    Polymer.PaperCheckedElementBehaviorImpl
-  ];
-</script>
diff --git a/paper-checked-element-behavior.js b/paper-checked-element-behavior.js
new file mode 100644
index 0000000..69deaf2
--- /dev/null
+++ b/paper-checked-element-behavior.js
@@ -0,0 +1,56 @@
+/**
+@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
+*/
+import '@polymer/polymer/polymer-legacy.js';
+
+import { IronCheckedElementBehaviorImpl, IronCheckedElementBehavior } from '@polymer/iron-checked-element-behavior/iron-checked-element-behavior.js';
+import { PaperInkyFocusBehavior } from './paper-inky-focus-behavior.js';
+import { PaperRippleBehavior } from './paper-ripple-behavior.js';
+
+/**
+ * Use `Polymer.PaperCheckedElementBehavior` to implement a custom element
+ * that has a `checked` property similar to `Polymer.IronCheckedElementBehavior`
+ * and is compatible with having a ripple effect.
+ * @polymerBehavior Polymer.PaperCheckedElementBehavior
+ */
+export const PaperCheckedElementBehaviorImpl = {
+  /**
+   * Synchronizes the element's checked state with its ripple effect.
+   */
+  _checkedChanged: function() {
+    IronCheckedElementBehaviorImpl._checkedChanged.call(this);
+    if (this.hasRipple()) {
+      if (this.checked) {
+        this._ripple.setAttribute('checked', '');
+      } else {
+        this._ripple.removeAttribute('checked');
+      }
+    }
+  },
+
+  /**
+   * Synchronizes the element's `active` and `checked` state.
+   */
+  _buttonStateChanged: function() {
+    PaperRippleBehavior._buttonStateChanged.call(this);
+    if (this.disabled) {
+      return;
+    }
+    if (this.isAttached) {
+      this.checked = this.active;
+    }
+  }
+};
+
+/** @polymerBehavior Polymer.PaperCheckedElementBehavior */
+export const PaperCheckedElementBehavior = [
+  PaperInkyFocusBehavior,
+  IronCheckedElementBehavior,
+  PaperCheckedElementBehaviorImpl
+];
diff --git a/paper-inky-focus-behavior.d.ts b/paper-inky-focus-behavior.d.ts
deleted file mode 100644
index b674ce8..0000000
--- a/paper-inky-focus-behavior.d.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * DO NOT EDIT
- *
- * This file was automatically generated by
- *   https://github.com/Polymer/gen-typescript-declarations
- *
- * To modify these typings, edit the source file(s):
- *   paper-inky-focus-behavior.html
- */
-
-/// <reference path="../polymer/types/polymer.d.ts" />
-/// <reference path="../iron-behaviors/iron-button-state.d.ts" />
-/// <reference path="paper-ripple-behavior.d.ts" />
-
-declare namespace Polymer {
-
-  /**
-   * `Polymer.PaperInkyFocusBehavior` implements a ripple when the element has
-   * keyboard focus.
-   */
-  interface PaperInkyFocusBehavior extends Polymer.IronButtonState, Polymer.IronControlState, Polymer.PaperRippleBehavior {
-    _createRipple(): any;
-    _focusedChanged(receivedFocusFromKeyboard: any): void;
-  }
-
-  const PaperInkyFocusBehavior: object;
-}
diff --git a/paper-inky-focus-behavior.html b/paper-inky-focus-behavior.html
deleted file mode 100644
index bddefd4..0000000
--- a/paper-inky-focus-behavior.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!--
-@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-behaviors/iron-button-state.html">
-<link rel="import" href="paper-ripple-behavior.html">
-
-<script>
-  /**
-   * `Polymer.PaperInkyFocusBehavior` implements a ripple when the element has
-   * keyboard focus.
-   *
-   * @polymerBehavior Polymer.PaperInkyFocusBehavior
-   */
-  Polymer.PaperInkyFocusBehaviorImpl = {
-    observers: ['_focusedChanged(receivedFocusFromKeyboard)'],
-
-    _focusedChanged: function(receivedFocusFromKeyboard) {
-      if (receivedFocusFromKeyboard) {
-        this.ensureRipple();
-      }
-      if (this.hasRipple()) {
-        this._ripple.holdDown = receivedFocusFromKeyboard;
-      }
-    },
-
-    _createRipple: function() {
-      var ripple = Polymer.PaperRippleBehavior._createRipple();
-      ripple.id = 'ink';
-      ripple.setAttribute('center', '');
-      ripple.classList.add('circle');
-      return ripple;
-    }
-  };
-
-  /** @polymerBehavior Polymer.PaperInkyFocusBehavior */
-  Polymer.PaperInkyFocusBehavior = [
-    Polymer.IronButtonState,
-    Polymer.IronControlState,
-    Polymer.PaperRippleBehavior,
-    Polymer.PaperInkyFocusBehaviorImpl
-  ];
-</script>
diff --git a/paper-inky-focus-behavior.js b/paper-inky-focus-behavior.js
new file mode 100644
index 0000000..2a34da6
--- /dev/null
+++ b/paper-inky-focus-behavior.js
@@ -0,0 +1,49 @@
+/**
+@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
+*/
+import '@polymer/polymer/polymer-legacy.js';
+
+import { IronButtonState } from '@polymer/iron-behaviors/iron-button-state.js';
+import { PaperRippleBehavior } from './paper-ripple-behavior.js';
+import { IronControlState } from '@polymer/iron-behaviors/iron-control-state.js';
+
+/**
+ * `Polymer.PaperInkyFocusBehavior` implements a ripple when the element has
+ * keyboard focus.
+ *
+ * @polymerBehavior Polymer.PaperInkyFocusBehavior
+ */
+export const PaperInkyFocusBehaviorImpl = {
+  observers: ['_focusedChanged(receivedFocusFromKeyboard)'],
+
+  _focusedChanged: function(receivedFocusFromKeyboard) {
+    if (receivedFocusFromKeyboard) {
+      this.ensureRipple();
+    }
+    if (this.hasRipple()) {
+      this._ripple.holdDown = receivedFocusFromKeyboard;
+    }
+  },
+
+  _createRipple: function() {
+    var ripple = PaperRippleBehavior._createRipple();
+    ripple.id = 'ink';
+    ripple.setAttribute('center', '');
+    ripple.classList.add('circle');
+    return ripple;
+  }
+};
+
+/** @polymerBehavior Polymer.PaperInkyFocusBehavior */
+export const PaperInkyFocusBehavior = [
+  IronButtonState,
+  IronControlState,
+  PaperRippleBehavior,
+  PaperInkyFocusBehaviorImpl
+];
diff --git a/paper-ripple-behavior.d.ts b/paper-ripple-behavior.d.ts
deleted file mode 100644
index ede7a9f..0000000
--- a/paper-ripple-behavior.d.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * DO NOT EDIT
- *
- * This file was automatically generated by
- *   https://github.com/Polymer/gen-typescript-declarations
- *
- * To modify these typings, edit the source file(s):
- *   paper-ripple-behavior.html
- */
-
-/// <reference path="../polymer/types/polymer.d.ts" />
-/// <reference path="../iron-behaviors/iron-button-state.d.ts" />
-/// <reference path="../paper-ripple/paper-ripple.d.ts" />
-
-declare namespace Polymer {
-
-  /**
-   * `Polymer.PaperRippleBehavior` dynamically implements a ripple
-   * when the element has focus via pointer or keyboard.
-   *
-   * NOTE: This behavior is intended to be used in conjunction with and after
-   * `Polymer.IronButtonState` and `Polymer.IronControlState`.
-   */
-  interface PaperRippleBehavior {
-
-    /**
-     * If true, the element will not produce a ripple effect when interacted
-     * with via the pointer.
-     */
-    noink: boolean|null|undefined;
-    _rippleContainer: Element|null|undefined;
-
-    /**
-     * Ensures a `<paper-ripple>` element is available when the element is
-     * focused.
-     */
-    _buttonStateChanged(): void;
-
-    /**
-     * In addition to the functionality provided in `IronButtonState`, ensures
-     * a ripple effect is created when the element is in a `pressed` state.
-     */
-    _downHandler(event: any): void;
-
-    /**
-     * Ensures this element contains a ripple effect. For startup efficiency
-     * the ripple effect is dynamically on demand when needed.
-     *
-     * @param optTriggeringEvent (optional) event that triggered the
-     * ripple.
-     */
-    ensureRipple(optTriggeringEvent?: Event): void;
-
-    /**
-     * Returns the `<paper-ripple>` element used by this element to create
-     * ripple effects. The element's ripple is created on demand, when
-     * necessary, and calling this method will force the
-     * ripple to be created.
-     */
-    getRipple(): any;
-
-    /**
-     * Returns true if this element currently contains a ripple effect.
-     */
-    hasRipple(): boolean;
-
-    /**
-     * Create the element's ripple effect via creating a `<paper-ripple>`.
-     * Override this method to customize the ripple element.
-     *
-     * @returns Returns a `<paper-ripple>` element.
-     */
-    _createRipple(): PaperRippleElement;
-    _noinkChanged(noink: any): void;
-  }
-
-  const PaperRippleBehavior: object;
-}
diff --git a/paper-ripple-behavior.html b/paper-ripple-behavior.html
deleted file mode 100644
index 30ff8a7..0000000
--- a/paper-ripple-behavior.html
+++ /dev/null
@@ -1,125 +0,0 @@
-<!--
-@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-behaviors/iron-button-state.html">
-<link rel="import" href="../paper-ripple/paper-ripple.html">
-
-<script>
-  /**
-   * `Polymer.PaperRippleBehavior` dynamically implements a ripple
-   * when the element has focus via pointer or keyboard.
-   *
-   * NOTE: This behavior is intended to be used in conjunction with and after
-   * `Polymer.IronButtonState` and `Polymer.IronControlState`.
-   *
-   * @polymerBehavior Polymer.PaperRippleBehavior
-   */
-  Polymer.PaperRippleBehavior = {
-    properties: {
-      /**
-       * If true, the element will not produce a ripple effect when interacted
-       * with via the pointer.
-       */
-      noink: {type: Boolean, observer: '_noinkChanged'},
-
-      /**
-       * @type {Element|undefined}
-       */
-      _rippleContainer: {
-        type: Object,
-      }
-    },
-
-    /**
-     * Ensures a `<paper-ripple>` element is available when the element is
-     * focused.
-     */
-    _buttonStateChanged: function() {
-      if (this.focused) {
-        this.ensureRipple();
-      }
-    },
-
-    /**
-     * In addition to the functionality provided in `IronButtonState`, ensures
-     * a ripple effect is created when the element is in a `pressed` state.
-     */
-    _downHandler: function(event) {
-      Polymer.IronButtonStateImpl._downHandler.call(this, event);
-      if (this.pressed) {
-        this.ensureRipple(event);
-      }
-    },
-
-    /**
-     * Ensures this element contains a ripple effect. For startup efficiency
-     * the ripple effect is dynamically on demand when needed.
-     * @param {!Event=} optTriggeringEvent (optional) event that triggered the
-     * ripple.
-     */
-    ensureRipple: function(optTriggeringEvent) {
-      if (!this.hasRipple()) {
-        this._ripple = this._createRipple();
-        this._ripple.noink = this.noink;
-        var rippleContainer = this._rippleContainer || this.root;
-        if (rippleContainer) {
-          Polymer.dom(rippleContainer).appendChild(this._ripple);
-        }
-        if (optTriggeringEvent) {
-          // Check if the event happened inside of the ripple container
-          // Fall back to host instead of the root because distributed text
-          // nodes are not valid event targets
-          var domContainer = Polymer.dom(this._rippleContainer || this);
-          var target = Polymer.dom(optTriggeringEvent).rootTarget;
-          if (domContainer.deepContains(/** @type {Node} */ (target))) {
-            this._ripple.uiDownAction(optTriggeringEvent);
-          }
-        }
-      }
-    },
-
-    /**
-     * Returns the `<paper-ripple>` element used by this element to create
-     * ripple effects. The element's ripple is created on demand, when
-     * necessary, and calling this method will force the
-     * ripple to be created.
-     */
-    getRipple: function() {
-      this.ensureRipple();
-      return this._ripple;
-    },
-
-    /**
-     * Returns true if this element currently contains a ripple effect.
-     * @return {boolean}
-     */
-    hasRipple: function() {
-      return Boolean(this._ripple);
-    },
-
-    /**
-     * Create the element's ripple effect via creating a `<paper-ripple>`.
-     * Override this method to customize the ripple element.
-     * @return {!PaperRippleElement} Returns a `<paper-ripple>` element.
-     */
-    _createRipple: function() {
-      var element = /** @type {!PaperRippleElement} */ (
-          document.createElement('paper-ripple'));
-      return element;
-    },
-
-    _noinkChanged: function(noink) {
-      if (this.hasRipple()) {
-        this._ripple.noink = noink;
-      }
-    }
-  };
-</script>
diff --git a/paper-ripple-behavior.js b/paper-ripple-behavior.js
new file mode 100644
index 0000000..73454de
--- /dev/null
+++ b/paper-ripple-behavior.js
@@ -0,0 +1,124 @@
+/**
+@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
+*/
+import '@polymer/polymer/polymer-legacy.js';
+
+import { IronButtonStateImpl } from '@polymer/iron-behaviors/iron-button-state.js';
+import '@polymer/paper-ripple/paper-ripple.js';
+import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js';
+
+/**
+ * `Polymer.PaperRippleBehavior` dynamically implements a ripple
+ * when the element has focus via pointer or keyboard.
+ *
+ * NOTE: This behavior is intended to be used in conjunction with and after
+ * `Polymer.IronButtonState` and `Polymer.IronControlState`.
+ *
+ * @polymerBehavior Polymer.PaperRippleBehavior
+ */
+export const PaperRippleBehavior = {
+  properties: {
+    /**
+     * If true, the element will not produce a ripple effect when interacted
+     * with via the pointer.
+     */
+    noink: {type: Boolean, observer: '_noinkChanged'},
+
+    /**
+     * @type {Element|undefined}
+     */
+    _rippleContainer: {
+      type: Object,
+    }
+  },
+
+  /**
+   * Ensures a `<paper-ripple>` element is available when the element is
+   * focused.
+   */
+  _buttonStateChanged: function() {
+    if (this.focused) {
+      this.ensureRipple();
+    }
+  },
+
+  /**
+   * In addition to the functionality provided in `IronButtonState`, ensures
+   * a ripple effect is created when the element is in a `pressed` state.
+   */
+  _downHandler: function(event) {
+    IronButtonStateImpl._downHandler.call(this, event);
+    if (this.pressed) {
+      this.ensureRipple(event);
+    }
+  },
+
+  /**
+   * Ensures this element contains a ripple effect. For startup efficiency
+   * the ripple effect is dynamically on demand when needed.
+   * @param {!Event=} optTriggeringEvent (optional) event that triggered the
+   * ripple.
+   */
+  ensureRipple: function(optTriggeringEvent) {
+    if (!this.hasRipple()) {
+      this._ripple = this._createRipple();
+      this._ripple.noink = this.noink;
+      var rippleContainer = this._rippleContainer || this.root;
+      if (rippleContainer) {
+        dom(rippleContainer).appendChild(this._ripple);
+      }
+      if (optTriggeringEvent) {
+        // Check if the event happened inside of the ripple container
+        // Fall back to host instead of the root because distributed text
+        // nodes are not valid event targets
+        var domContainer = dom(this._rippleContainer || this);
+        var target = dom(optTriggeringEvent).rootTarget;
+        if (domContainer.deepContains(/** @type {Node} */ (target))) {
+          this._ripple.uiDownAction(optTriggeringEvent);
+        }
+      }
+    }
+  },
+
+  /**
+   * Returns the `<paper-ripple>` element used by this element to create
+   * ripple effects. The element's ripple is created on demand, when
+   * necessary, and calling this method will force the
+   * ripple to be created.
+   */
+  getRipple: function() {
+    this.ensureRipple();
+    return this._ripple;
+  },
+
+  /**
+   * Returns true if this element currently contains a ripple effect.
+   * @return {boolean}
+   */
+  hasRipple: function() {
+    return Boolean(this._ripple);
+  },
+
+  /**
+   * Create the element's ripple effect via creating a `<paper-ripple>`.
+   * Override this method to customize the ripple element.
+   * @return {!PaperRippleElement} Returns a `<paper-ripple>` element.
+   */
+  _createRipple: function() {
+    var element = /** @type {!PaperRippleElement} */ (
+        document.createElement('paper-ripple'));
+    return element;
+  },
+
+  _noinkChanged: function(noink) {
+    if (this.hasRipple()) {
+      this._ripple.noink = noink;
+    }
+  }
+};
diff --git a/test/index.html b/test/index.html
index b16a9b4..6c889d5 100644
--- a/test/index.html
+++ b/test/index.html
@@ -11,8 +11,8 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+  <script src="../../../wct-browser-legacy/browser.js"></script>
 </head>
 <body>
   <script>
diff --git a/test/paper-button-behavior.html b/test/paper-button-behavior.html
index ff85925..7e1f10d 100644
--- a/test/paper-button-behavior.html
+++ b/test/paper-button-behavior.html
@@ -13,14 +13,14 @@
 <head>
   <title>paper-button-behavior</title>
 
-  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+  <script src="../../../wct-browser-legacy/browser.js"></script>
   <script src="../../test-fixture/test-fixture-mocha.js"></script>
-  <script src="../../iron-test-helpers/mock-interactions.js"></script>
+  <script src="../../iron-test-helpers/mock-interactions.js" type="module"></script>
 
-  <link rel="import" href="../../polymer/polymer.html">
-  <link rel="import" href="../../test-fixture/test-fixture.html">
-  <link rel="import" href="test-button.html">
+  <script type="module" src="../../polymer/polymer-legacy.js"></script>
+  <script type="module" src="../../test-fixture/test-fixture.js"></script>
+  <script type="module" src="./test-button.js"></script>
 </head>
 <body>
 
@@ -30,84 +30,87 @@
     </template>
   </test-fixture>
 
-  <script>
-    suite('basic', function() {
-      var button;
-
-      setup(function() {
-        button = fixture('basic');
-      });
-
-      test('normal (no states)', function() {
-        assert.equal(button.elevation, 1);
-      });
-
-      test('set disabled property', function() {
-        button.disabled = true;
-        assert.equal(button.elevation, 0);
-      });
-
-      test('pressed and released', function() {
-        MockInteractions.down(button);
-        assert.equal(button.elevation, 4);
-        MockInteractions.up(button);
-        assert.equal(button.elevation, 1);
-        assert.ok(button.hasRipple());
-      });
+  <script type="module">
+import '@polymer/polymer/polymer-legacy.js';
+import '@polymer/test-fixture/test-fixture.js';
+import './test-button.js';
+suite('basic', function() {
+  var button;
+
+  setup(function() {
+    button = fixture('basic');
+  });
+
+  test('normal (no states)', function() {
+    assert.equal(button.elevation, 1);
+  });
+
+  test('set disabled property', function() {
+    button.disabled = true;
+    assert.equal(button.elevation, 0);
+  });
+
+  test('pressed and released', function() {
+    MockInteractions.down(button);
+    assert.equal(button.elevation, 4);
+    MockInteractions.up(button);
+    assert.equal(button.elevation, 1);
+    assert.ok(button.hasRipple());
+  });
+
+  suite('a button with toggles', function() {
+    setup(function() {
+      button.toggles = true;
+    });
 
-      suite('a button with toggles', function() {
-        setup(function() {
-          button.toggles = true;
-        });
-
-        test('activated by tap', function(done) {
-          MockInteractions.downAndUp(button, function() {
-            try {
-              assert.equal(button.elevation, 4);
-              assert.ok(button.hasRipple());
-              done();
-            } catch (e) {
-              done(e);
-            }
-          });
-        });
+    test('activated by tap', function(done) {
+      MockInteractions.downAndUp(button, function() {
+        try {
+          assert.equal(button.elevation, 4);
+          assert.ok(button.hasRipple());
+          done();
+        } catch (e) {
+          done(e);
+        }
       });
+    });
+  });
 
-      test('receives focused', function() {
-        MockInteractions.focus(button);
-        assert.equal(button.elevation, 3);
-        assert.ok(button.hasRipple());
-      });
+  test('receives focused', function() {
+    MockInteractions.focus(button);
+    assert.equal(button.elevation, 3);
+    assert.ok(button.hasRipple());
+  });
 
-      test('space key', function(done) {
-        const SPACE_KEY_CODE = 32;
-        var ripple;
-        MockInteractions.focus(button);
+  test('space key', function(done) {
+    const SPACE_KEY_CODE = 32;
+    var ripple;
+    MockInteractions.focus(button);
 
-        assert.ok(button.hasRipple());
+    assert.ok(button.hasRipple());
 
-        ripple = button.getRipple();
-        MockInteractions.keyDownOn(button, SPACE_KEY_CODE);
+    ripple = button.getRipple();
+    MockInteractions.keyDownOn(button, SPACE_KEY_CODE);
 
-        assert.equal(ripple.ripples.length, 1);
+    assert.equal(ripple.ripples.length, 1);
 
-        MockInteractions.keyDownOn(button, SPACE_KEY_CODE);
+    MockInteractions.keyDownOn(button, SPACE_KEY_CODE);
 
-        assert.equal(ripple.ripples.length, 1);
+    assert.equal(ripple.ripples.length, 1);
 
-        MockInteractions.keyUpOn(button, SPACE_KEY_CODE);
+    MockInteractions.keyUpOn(button, SPACE_KEY_CODE);
 
-        var transitionEndCalled = false;
-        ripple.addEventListener('transitionend', function() {
-          if (!transitionEndCalled) {
-            transitionEndCalled = true;
-            assert.equal(ripple.ripples.length, 0);
-            done();
-          }
-        });
-      });
+    var transitionEndCalled = false;
+    ripple.addEventListener('transitionend', function() {
+      if (!transitionEndCalled) {
+        transitionEndCalled = true;
+        assert.equal(ripple.ripples.length, 0);
+        done();
+      }
     });
-  </script>
+  });
+});
+</script>
 
 </body>
 </html>
diff --git a/test/paper-checked-element-behavior.html b/test/paper-checked-element-behavior.html
index 55787bd..d193ed9 100644
--- a/test/paper-checked-element-behavior.html
+++ b/test/paper-checked-element-behavior.html
@@ -13,26 +13,28 @@
 <head>
   <title>paper-checked-element-behavior</title>
 
-  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+  <script src="../../../wct-browser-legacy/browser.js"></script>
   <script src="../../test-fixture/test-fixture-mocha.js"></script>
-  <script src="../../iron-test-helpers/mock-interactions.js"></script>
+  <script src="../../iron-test-helpers/mock-interactions.js" type="module"></script>
 
-  <link rel="import" href="../../polymer/polymer.html">
-  <link rel="import" href="../../test-fixture/test-fixture.html">
-  <link rel="import" href="../paper-checked-element-behavior.html">
+  <script type="module" src="../../polymer/polymer-legacy.js"></script>
+  <script type="module" src="../../test-fixture/test-fixture.js"></script>
+  <script type="module" src="../paper-checked-element-behavior.js"></script>
 </head>
 <body>
 
   <dom-module id="test-checked">
     <template>
     </template>
-    <script>
-      HTMLImports.whenReady(function() {
-        Polymer(
-            {is: 'test-checked', behaviors: [Polymer.PaperCheckedElementBehavior]});
-      });
-    </script>
+    <script type="module">
+import '@polymer/polymer/polymer-legacy.js';
+import '@polymer/test-fixture/test-fixture.js';
+import { PaperCheckedElementBehavior } from '../paper-checked-element-behavior.js';
+import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
+Polymer(
+    {is: 'test-checked', behaviors: [PaperCheckedElementBehavior]});
+</script>
   </dom-module>
 
   <test-fixture id="basic">
@@ -41,53 +43,56 @@
     </template>
   </test-fixture>
 
-  <script>
-    suite('PaperCheckedElementBehavior', function() {
-      var checked;
+  <script type="module">
+import '@polymer/polymer/polymer-legacy.js';
+import '@polymer/test-fixture/test-fixture.js';
+import '../paper-checked-element-behavior.js';
+suite('PaperCheckedElementBehavior', function() {
+  var checked;
 
-      setup(function() {
-        checked = fixture('basic');
-      });
+  setup(function() {
+    checked = fixture('basic');
+  });
 
-      test('element checked when tapped to check', function() {
-        MockInteractions.tap(checked);
-        assert.isTrue(checked.checked);
-      });
+  test('element checked when tapped to check', function() {
+    MockInteractions.tap(checked);
+    assert.isTrue(checked.checked);
+  });
 
-      test('element checked when active', function() {
-        checked.active = true;
-        assert.isTrue(checked.checked);
-      });
+  test('element checked when active', function() {
+    checked.active = true;
+    assert.isTrue(checked.checked);
+  });
 
-      test('element not checked when disabled and made active', function() {
-        checked.disabled = true;
-        checked.active = true;
-        assert.isFalse(checked.checked);
-      });
+  test('element not checked when disabled and made active', function() {
+    checked.disabled = true;
+    checked.active = true;
+    assert.isFalse(checked.checked);
+  });
 
-      test('element not checked when disabled and tapped', function() {
-        checked.disabled = true;
+  test('element not checked when disabled and tapped', function() {
+    checked.disabled = true;
+    MockInteractions.tap(checked);
+    assert.isFalse(checked.checked);
+  });
+
+  test(
+      'element ripple has checked attribute when element tapped to check',
+      function() {
         MockInteractions.tap(checked);
-        assert.isFalse(checked.checked);
+        assert.isTrue(checked.hasRipple());
+        assert.isTrue(checked.getRipple().hasAttribute('checked'));
       });
 
-      test(
-          'element ripple has checked attribute when element tapped to check',
-          function() {
-            MockInteractions.tap(checked);
-            assert.isTrue(checked.hasRipple());
-            assert.isTrue(checked.getRipple().hasAttribute('checked'));
-          });
-
-      test(
-          'element ripple does not have checked attribute when element tapped to uncheck',
-          function() {
-            MockInteractions.tap(checked);
-            MockInteractions.tap(checked);
-            assert.isFalse(checked.getRipple().hasAttribute('checked'));
-          });
-    });
-  </script>
+  test(
+      'element ripple does not have checked attribute when element tapped to uncheck',
+      function() {
+        MockInteractions.tap(checked);
+        MockInteractions.tap(checked);
+        assert.isFalse(checked.getRipple().hasAttribute('checked'));
+      });
+});
+</script>
 
 </body>
 </html>
diff --git a/test/paper-radio-button-behavior.html b/test/paper-radio-button-behavior.html
index db218b2..d908e86 100644
--- a/test/paper-radio-button-behavior.html
+++ b/test/paper-radio-button-behavior.html
@@ -13,14 +13,14 @@
 <head>
   <title>paper-radio-button-behavior</title>
 
-  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+  <script src="../../../wct-browser-legacy/browser.js"></script>
   <script src="../../test-fixture/test-fixture-mocha.js"></script>
-  <script src="../../iron-test-helpers/mock-interactions.js"></script>
+  <script src="../../iron-test-helpers/mock-interactions.js" type="module"></script>
 
-  <link rel="import" href="../../polymer/polymer.html">
-  <link rel="import" href="../../test-fixture/test-fixture.html">
-  <link rel="import" href="test-radio-button.html">
+  <script type="module" src="../../polymer/polymer-legacy.js"></script>
+  <script type="module" src="../../test-fixture/test-fixture.js"></script>
+  <script type="module" src="./test-radio-button.js"></script>
 </head>
 <body>
 
@@ -30,28 +30,31 @@
     </template>
   </test-fixture>
 
-  <script>
-    suite('basic', function() {
-      var button;
-
-      setup(function() {
-        button = fixture('basic');
-        MockInteractions.blur(button);
-      });
-
-      test('normal (no states)', function() {
-        assert.isFalse(button.focused);
-        assert.isFalse(button.hasRipple());
-      });
-
-      test('receives focus', function() {
-        MockInteractions.focus(button);
-
-        assert.isTrue(button.focused);
-        assert.isTrue(button.hasRipple());
-      });
-    });
-  </script>
+  <script type="module">
+import '@polymer/polymer/polymer-legacy.js';
+import '@polymer/test-fixture/test-fixture.js';
+import './test-radio-button.js';
+suite('basic', function() {
+  var button;
+
+  setup(function() {
+    button = fixture('basic');
+    MockInteractions.blur(button);
+  });
+
+  test('normal (no states)', function() {
+    assert.isFalse(button.focused);
+    assert.isFalse(button.hasRipple());
+  });
+
+  test('receives focus', function() {
+    MockInteractions.focus(button);
+
+    assert.isTrue(button.focused);
+    assert.isTrue(button.hasRipple());
+  });
+});
+</script>
 
 </body>
 </html>
diff --git a/test/paper-ripple-behavior.html b/test/paper-ripple-behavior.html
index 9bd6736..a95c7bc 100644
--- a/test/paper-ripple-behavior.html
+++ b/test/paper-ripple-behavior.html
@@ -13,32 +13,36 @@
 <head>
   <title>paper-ripple-behavior</title>
 
-  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-  <script src="../../web-component-tester/browser.js"></script>
-  <script src="../../iron-test-helpers/mock-interactions.js"></script>
-
-  <link rel="import" href="../../polymer/polymer.html">
-  <link rel="import" href="../../iron-behaviors/iron-button-state.html">
-  <link rel="import" href="../paper-ripple-behavior.html">
-  <link rel="import" href="shadowed-ripple.html">
+  <script src="../../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+  <script src="../../../wct-browser-legacy/browser.js"></script>
+  <script src="../../iron-test-helpers/mock-interactions.js" type="module"></script>
+
+  <script type="module" src="../../polymer/polymer-legacy.js"></script>
+  <script type="module" src="../../iron-behaviors/iron-button-state.js"></script>
+  <script type="module" src="../paper-ripple-behavior.js"></script>
+  <script type="module" src="./shadowed-ripple.js"></script>
 </head>
 <body>
 
   <dom-module id="test-ripple">
     <template>
     </template>
-    <script>
-      HTMLImports.whenReady(function() {
-        Polymer({
-          is: 'test-ripple',
-          behaviors: [
-            Polymer.IronButtonState,
-            Polymer.IronControlState,
-            Polymer.PaperRippleBehavior
-          ]
-        });
-      });
-    </script>
+    <script type="module">
+import '@polymer/polymer/polymer-legacy.js';
+import { IronButtonState } from '@polymer/iron-behaviors/iron-button-state.js';
+import { PaperRippleBehavior } from '../paper-ripple-behavior.js';
+import './shadowed-ripple.js';
+import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
+import { IronControlState } from '@polymer/iron-behaviors/iron-control-state.js';
+Polymer({
+  is: 'test-ripple',
+  behaviors: [
+    IronButtonState,
+    IronControlState,
+    PaperRippleBehavior
+  ]
+});
+</script>
   </dom-module>
 
   <test-fixture id="basic">
@@ -67,288 +71,293 @@
     </template>
   </test-fixture>
 
-  <script>
-    suite('PaperRippleBehavior', function() {
-      var ripple;
+  <script type="module">
+import '@polymer/polymer/polymer-legacy.js';
+import '@polymer/iron-behaviors/iron-button-state.js';
+import '../paper-ripple-behavior.js';
+import './shadowed-ripple.js';
+import { flush, dom } from '@polymer/polymer/lib/legacy/polymer.dom.js';
+suite('PaperRippleBehavior', function() {
+  var ripple;
+
+  setup(function() {
+    ripple = fixture('basic');
+  });
+
+  test('no ripple at startup', function() {
+    assert.isFalse(ripple.hasRipple());
+  });
+
+  test('calling getRipple returns ripple', function() {
+    assert.ok(ripple.getRipple());
+  });
+
+  test('focus generates ripple', function() {
+    MockInteractions.focus(ripple);
+    assert.ok(ripple.hasRipple());
+  });
+
+  test('down generates ripple', function() {
+    MockInteractions.down(ripple);
+    assert.ok(ripple.hasRipple());
+    MockInteractions.up(ripple);
+  });
+
+  suite('Correct Targeting', function() {
+    function assertInteractionCausesRipple(host, node, expected, msg) {
+      var ripple = host.getRipple();
+      flush();
+      MockInteractions.down(node);
+      assert.equal(ripple.ripples.length > 0, expected, msg);
+      MockInteractions.up(node);
+    }
+
+    function assertInteractionAtLocationCausesRipple(
+        host, node, location, expected, msg) {
+      var ripple = host.getRipple();
+      flush();
+      MockInteractions.down(node, location);
+      assert.equal(ripple.ripples.length > 0, expected, msg);
+      MockInteractions.up(node);
+    }
+
+    suite('basic', function() {
+      suite('container = host', function() {
+        setup(function() {
+          ripple = fixture('ShadowBasic');
+        });
 
-      setup(function() {
-        ripple = fixture('basic');
+        test('tap host', function() {
+          assertInteractionCausesRipple(ripple, ripple, true, 'ripple');
+        });
+        test('tap #wrapper', function() {
+          assertInteractionCausesRipple(
+              ripple, ripple.$.wrapper, true, '#wrapper');
+        });
+        test('tap #separate', function() {
+          assertInteractionCausesRipple(
+              ripple, ripple.$.separate, true, '#separate')
+        });
       });
 
-      test('no ripple at startup', function() {
-        assert.isFalse(ripple.hasRipple());
+      suite('container = wrapper', function() {
+        setup(function() {
+          ripple = fixture('ShadowBasic');
+          ripple._rippleContainer = ripple.$.wrapper;
+        });
+
+        test('tap host', function() {
+          assertInteractionCausesRipple(ripple, ripple, false, 'ripple');
+        });
+
+        test('tap #wrapper', function() {
+          assertInteractionCausesRipple(
+              ripple, ripple.$.wrapper, true, '#wrapper');
+        });
+
+        test('tap #separate', function() {
+          assertInteractionCausesRipple(
+              ripple, ripple.$.separate, false, '#separate')
+        });
+      });
+
+      suite('container = separate', function() {
+        setup(function() {
+          ripple = fixture('ShadowBasic');
+          ripple._rippleContainer = ripple.$.separate;
+        });
+
+        test('tap host', function() {
+          assertInteractionCausesRipple(ripple, ripple, false, 'ripple');
+        });
+
+        test('tap wrapper', function() {
+          assertInteractionCausesRipple(
+              ripple, ripple.$.wrapper, false, '#wrapper');
+        });
+
+        test('tap separate', function() {
+          assertInteractionCausesRipple(
+              ripple, ripple.$.separate, true, '#separate')
+        });
+      });
+    });
+
+    suite('distributed text', function() {
+      var textLocation;
+
+      function getTextLocation(ripple) {
+        // build a Range to get the BCR of a given text node
+        var r = document.createRange();
+        flush();
+        r.selectNode(dom(ripple.$.content).getDistributedNodes()[0]);
+        return MockInteractions.middleOfNode(r);
+      }
+
+      suite('container = host', function() {
+        setup(function() {
+          ripple = fixture('ShadowText');
+          textLocation = getTextLocation(ripple);
+        });
+
+        test('tap host', function() {
+          assertInteractionCausesRipple(ripple, ripple, true, 'ripple');
+        });
+
+        test('tap wrapper', function() {
+          assertInteractionCausesRipple(
+              ripple, ripple.$.wrapper, true, '#wrapper');
+        });
+
+        test('tap separate', function() {
+          assertInteractionCausesRipple(
+              ripple, ripple.$.separate, true, '#separate')
+        });
+
+        test('tap text', function() {
+          assertInteractionAtLocationCausesRipple(
+              ripple, ripple.$.wrapper, textLocation, true, 'text');
+        });
+      });
+
+      suite('container = wrapper', function() {
+        setup(function() {
+          ripple = fixture('ShadowText');
+          ripple._rippleContainer = ripple.$.wrapper;
+          textLocation = getTextLocation(ripple);
+        });
+
+        test('tap host', function() {
+          assertInteractionCausesRipple(ripple, ripple, false, 'ripple');
+        });
+
+        test('tap wrapper', function() {
+          assertInteractionCausesRipple(
+              ripple, ripple.$.wrapper, true, '#wrapper');
+        });
+
+        test('tap separate', function() {
+          assertInteractionCausesRipple(
+              ripple, ripple.$.separate, false, '#separate')
+        });
+
+        test('tap text', function() {
+          assertInteractionAtLocationCausesRipple(
+              ripple, ripple.$.wrapper, textLocation, true, 'text');
+        });
       });
 
-      test('calling getRipple returns ripple', function() {
-        assert.ok(ripple.getRipple());
+      suite('container = separate', function() {
+        setup(function() {
+          ripple = fixture('ShadowText');
+          ripple._rippleContainer = ripple.$.separate;
+          textLocation = getTextLocation(ripple);
+        });
+
+        test('tap host', function() {
+          assertInteractionCausesRipple(ripple, ripple, false, 'ripple');
+        });
+
+        test('tap wrapper', function() {
+          assertInteractionCausesRipple(
+              ripple, ripple.$.wrapper, false, '#wrapper');
+        });
+
+        test('tap separate', function() {
+          assertInteractionCausesRipple(
+              ripple, ripple.$.separate, true, '#separate')
+        });
+
+        test('tap text', function() {
+          assertInteractionAtLocationCausesRipple(
+              ripple, ripple.$.wrapper, textLocation, false, 'text');
+        });
       });
+    });
+
+    suite('distributed element', function() {
+      var source;
+
+      suite('container = host', function() {
+        setup(function() {
+          ripple = fixture('ShadowElement');
+          source = dom(ripple).querySelector('#source');
+        });
+
+        test('tap host', function() {
+          assertInteractionCausesRipple(ripple, ripple, true, 'ripple');
+        });
+
+        test('tap wrapper', function() {
+          assertInteractionCausesRipple(
+              ripple, ripple.$.wrapper, true, '#wrapper');
+        });
 
-      test('focus generates ripple', function() {
-        MockInteractions.focus(ripple);
-        assert.ok(ripple.hasRipple());
+        test('tap separate', function() {
+          assertInteractionCausesRipple(
+              ripple, ripple.$.separate, true, '#separate')
+        });
+
+        test('tap source', function() {
+          assertInteractionCausesRipple(ripple, source, true, '#source');
+        });
       });
 
-      test('down generates ripple', function() {
-        MockInteractions.down(ripple);
-        assert.ok(ripple.hasRipple());
-        MockInteractions.up(ripple);
+      suite('container = wrapper', function() {
+        setup(function() {
+          ripple = fixture('ShadowElement');
+          ripple._rippleContainer = ripple.$.wrapper;
+          source = dom(ripple).querySelector('#source');
+        });
+
+        test('tap host', function() {
+          assertInteractionCausesRipple(ripple, ripple, false, 'ripple');
+        });
+
+        test('tap wrapper', function() {
+          assertInteractionCausesRipple(
+              ripple, ripple.$.wrapper, true, '#wrapper');
+        });
+
+        test('tap separate', function() {
+          assertInteractionCausesRipple(
+              ripple, ripple.$.separate, false, '#separate')
+        });
+
+        test('tap source', function() {
+          assertInteractionCausesRipple(ripple, source, true, '#source');
+        });
       });
 
-      suite('Correct Targeting', function() {
-        function assertInteractionCausesRipple(host, node, expected, msg) {
-          var ripple = host.getRipple();
-          Polymer.dom.flush();
-          MockInteractions.down(node);
-          assert.equal(ripple.ripples.length > 0, expected, msg);
-          MockInteractions.up(node);
-        }
-
-        function assertInteractionAtLocationCausesRipple(
-            host, node, location, expected, msg) {
-          var ripple = host.getRipple();
-          Polymer.dom.flush();
-          MockInteractions.down(node, location);
-          assert.equal(ripple.ripples.length > 0, expected, msg);
-          MockInteractions.up(node);
-        }
-
-        suite('basic', function() {
-          suite('container = host', function() {
-            setup(function() {
-              ripple = fixture('ShadowBasic');
-            });
-
-            test('tap host', function() {
-              assertInteractionCausesRipple(ripple, ripple, true, 'ripple');
-            });
-            test('tap #wrapper', function() {
-              assertInteractionCausesRipple(
-                  ripple, ripple.$.wrapper, true, '#wrapper');
-            });
-            test('tap #separate', function() {
-              assertInteractionCausesRipple(
-                  ripple, ripple.$.separate, true, '#separate')
-            });
-          });
-
-          suite('container = wrapper', function() {
-            setup(function() {
-              ripple = fixture('ShadowBasic');
-              ripple._rippleContainer = ripple.$.wrapper;
-            });
-
-            test('tap host', function() {
-              assertInteractionCausesRipple(ripple, ripple, false, 'ripple');
-            });
-
-            test('tap #wrapper', function() {
-              assertInteractionCausesRipple(
-                  ripple, ripple.$.wrapper, true, '#wrapper');
-            });
-
-            test('tap #separate', function() {
-              assertInteractionCausesRipple(
-                  ripple, ripple.$.separate, false, '#separate')
-            });
-          });
-
-          suite('container = separate', function() {
-            setup(function() {
-              ripple = fixture('ShadowBasic');
-              ripple._rippleContainer = ripple.$.separate;
-            });
-
-            test('tap host', function() {
-              assertInteractionCausesRipple(ripple, ripple, false, 'ripple');
-            });
-
-            test('tap wrapper', function() {
-              assertInteractionCausesRipple(
-                  ripple, ripple.$.wrapper, false, '#wrapper');
-            });
-
-            test('tap separate', function() {
-              assertInteractionCausesRipple(
-                  ripple, ripple.$.separate, true, '#separate')
-            });
-          });
-        });
-
-        suite('distributed text', function() {
-          var textLocation;
-
-          function getTextLocation(ripple) {
-            // build a Range to get the BCR of a given text node
-            var r = document.createRange();
-            Polymer.dom.flush();
-            r.selectNode(Polymer.dom(ripple.$.content).getDistributedNodes()[0]);
-            return MockInteractions.middleOfNode(r);
-          }
-
-          suite('container = host', function() {
-            setup(function() {
-              ripple = fixture('ShadowText');
-              textLocation = getTextLocation(ripple);
-            });
-
-            test('tap host', function() {
-              assertInteractionCausesRipple(ripple, ripple, true, 'ripple');
-            });
-
-            test('tap wrapper', function() {
-              assertInteractionCausesRipple(
-                  ripple, ripple.$.wrapper, true, '#wrapper');
-            });
-
-            test('tap separate', function() {
-              assertInteractionCausesRipple(
-                  ripple, ripple.$.separate, true, '#separate')
-            });
-
-            test('tap text', function() {
-              assertInteractionAtLocationCausesRipple(
-                  ripple, ripple.$.wrapper, textLocation, true, 'text');
-            });
-          });
-
-          suite('container = wrapper', function() {
-            setup(function() {
-              ripple = fixture('ShadowText');
-              ripple._rippleContainer = ripple.$.wrapper;
-              textLocation = getTextLocation(ripple);
-            });
-
-            test('tap host', function() {
-              assertInteractionCausesRipple(ripple, ripple, false, 'ripple');
-            });
-
-            test('tap wrapper', function() {
-              assertInteractionCausesRipple(
-                  ripple, ripple.$.wrapper, true, '#wrapper');
-            });
-
-            test('tap separate', function() {
-              assertInteractionCausesRipple(
-                  ripple, ripple.$.separate, false, '#separate')
-            });
-
-            test('tap text', function() {
-              assertInteractionAtLocationCausesRipple(
-                  ripple, ripple.$.wrapper, textLocation, true, 'text');
-            });
-          });
-
-          suite('container = separate', function() {
-            setup(function() {
-              ripple = fixture('ShadowText');
-              ripple._rippleContainer = ripple.$.separate;
-              textLocation = getTextLocation(ripple);
-            });
-
-            test('tap host', function() {
-              assertInteractionCausesRipple(ripple, ripple, false, 'ripple');
-            });
-
-            test('tap wrapper', function() {
-              assertInteractionCausesRipple(
-                  ripple, ripple.$.wrapper, false, '#wrapper');
-            });
-
-            test('tap separate', function() {
-              assertInteractionCausesRipple(
-                  ripple, ripple.$.separate, true, '#separate')
-            });
-
-            test('tap text', function() {
-              assertInteractionAtLocationCausesRipple(
-                  ripple, ripple.$.wrapper, textLocation, false, 'text');
-            });
-          });
-        });
-
-        suite('distributed element', function() {
-          var source;
-
-          suite('container = host', function() {
-            setup(function() {
-              ripple = fixture('ShadowElement');
-              source = Polymer.dom(ripple).querySelector('#source');
-            });
-
-            test('tap host', function() {
-              assertInteractionCausesRipple(ripple, ripple, true, 'ripple');
-            });
-
-            test('tap wrapper', function() {
-              assertInteractionCausesRipple(
-                  ripple, ripple.$.wrapper, true, '#wrapper');
-            });
-
-            test('tap separate', function() {
-              assertInteractionCausesRipple(
-                  ripple, ripple.$.separate, true, '#separate')
-            });
-
-            test('tap source', function() {
-              assertInteractionCausesRipple(ripple, source, true, '#source');
-            });
-          });
-
-          suite('container = wrapper', function() {
-            setup(function() {
-              ripple = fixture('ShadowElement');
-              ripple._rippleContainer = ripple.$.wrapper;
-              source = Polymer.dom(ripple).querySelector('#source');
-            });
-
-            test('tap host', function() {
-              assertInteractionCausesRipple(ripple, ripple, false, 'ripple');
-            });
-
-            test('tap wrapper', function() {
-              assertInteractionCausesRipple(
-                  ripple, ripple.$.wrapper, true, '#wrapper');
-            });
-
-            test('tap separate', function() {
-              assertInteractionCausesRipple(
-                  ripple, ripple.$.separate, false, '#separate')
-            });
-
-            test('tap source', function() {
-              assertInteractionCausesRipple(ripple, source, true, '#source');
-            });
-          });
-
-          suite('container = separate', function() {
-            setup(function() {
-              ripple = fixture('ShadowElement');
-              ripple._rippleContainer = ripple.$.separate;
-              source = Polymer.dom(ripple).querySelector('#source');
-            });
-
-            test('tap host', function() {
-              assertInteractionCausesRipple(ripple, ripple, false, 'ripple');
-            });
-
-            test('tap wrapper', function() {
-              assertInteractionCausesRipple(
-                  ripple, ripple.$.wrapper, false, '#wrapper');
-            });
-
-            test('tap separate', function() {
-              assertInteractionCausesRipple(
-                  ripple, ripple.$.separate, true, '#separate')
-            });
-
-            test('tap source', function() {
-              assertInteractionCausesRipple(ripple, source, false, '#source');
-            });
-          });
+      suite('container = separate', function() {
+        setup(function() {
+          ripple = fixture('ShadowElement');
+          ripple._rippleContainer = ripple.$.separate;
+          source = dom(ripple).querySelector('#source');
+        });
+
+        test('tap host', function() {
+          assertInteractionCausesRipple(ripple, ripple, false, 'ripple');
+        });
+
+        test('tap wrapper', function() {
+          assertInteractionCausesRipple(
+              ripple, ripple.$.wrapper, false, '#wrapper');
+        });
+
+        test('tap separate', function() {
+          assertInteractionCausesRipple(
+              ripple, ripple.$.separate, true, '#separate')
+        });
+
+        test('tap source', function() {
+          assertInteractionCausesRipple(ripple, source, false, '#source');
         });
       });
     });
-  </script>
+  });
+});
+</script>
 
 </body>
 </html>
diff --git a/test/shadowed-ripple.html b/test/shadowed-ripple.js
similarity index 65%
rename from test/shadowed-ripple.html
rename to test/shadowed-ripple.js
index dcf4638..e2f3de7 100644
--- a/test/shadowed-ripple.html
+++ b/test/shadowed-ripple.js
@@ -1,5 +1,4 @@
-<!DOCTYPE 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
@@ -7,12 +6,16 @@
 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-behaviors/iron-button-state.html">
-<link rel="import" href="../paper-ripple-behavior.html">
-<dom-module id="sd-ripple">
-  <template>
+*/
+import '@polymer/polymer/polymer-legacy.js';
+
+import { IronButtonState } from '@polymer/iron-behaviors/iron-button-state.js';
+import { PaperRippleBehavior } from '../paper-ripple-behavior.js';
+import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { IronControlState } from '@polymer/iron-behaviors/iron-control-state.js';
+Polymer({
+  _template: html`
     <style>
       :host {
         display: block;
@@ -41,15 +44,13 @@
     <div id="wrapper">
       <slot id="content"></slot>
     </div>
-  </template>
-  <script>
-    Polymer({
-      is: 'sd-ripple',
-      behaviors: [
-        Polymer.IronButtonState,
-        Polymer.IronControlState,
-        Polymer.PaperRippleBehavior
-      ]
-    });
-  </script>
-</dom-module>
+`,
+
+  is: 'sd-ripple',
+
+  behaviors: [
+    IronButtonState,
+    IronControlState,
+    PaperRippleBehavior
+  ]
+});
diff --git a/test/test-button.html b/test/test-button.js
similarity index 60%
rename from test/test-button.html
rename to test/test-button.js
index 3d358d9..003a6d0 100644
--- a/test/test-button.html
+++ b/test/test-button.js
@@ -1,4 +1,4 @@
-<!--
+/**
 @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
@@ -6,25 +6,17 @@
 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="../paper-button-behavior.html">
-
-<dom-module id="test-button">
-
-  <template>
+*/
+import '@polymer/polymer/polymer-legacy.js';
+
+import { PaperButtonBehavior } from '../paper-button-behavior.js';
+import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+Polymer({
+  _template: html`
     <slot></slot>
-  </template>
-
-  <script>
-    Polymer({
-
-      is: 'test-button',
-
-      behaviors: [Polymer.PaperButtonBehavior]
-
-    });
-  </script>
+`,
 
-</dom-module>
+  is: 'test-button',
+  behaviors: [PaperButtonBehavior]
+});
diff --git a/test/test-radio-button.html b/test/test-radio-button.js
similarity index 59%
rename from test/test-radio-button.html
rename to test/test-radio-button.js
index 2af16b1..31cc854 100644
--- a/test/test-radio-button.html
+++ b/test/test-radio-button.js
@@ -1,4 +1,4 @@
-<!--
+/**
 @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
@@ -6,14 +6,15 @@
 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
--->
+*/
+import '@polymer/polymer/polymer-legacy.js';
 
-<link rel="import" href="../../polymer/polymer.html">
-<link rel="import" href="../paper-checked-element-behavior.html">
-<link rel="import" href="../../paper-ripple/paper-ripple.html">
-
-<dom-module id="test-radio-button">
-  <template>
+import { PaperCheckedElementBehavior } from '../paper-checked-element-behavior.js';
+import '@polymer/paper-ripple/paper-ripple.js';
+import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+Polymer({
+  _template: html`
     <style>
       :host #ink {
         position: absolute;
@@ -25,15 +26,10 @@
     </style>
     
     <div id="container">
-      <paper-ripple id="ink" class="circle" center></paper-ripple>
+      <paper-ripple id="ink" class="circle" center=""></paper-ripple>
     </div>
-  </template>
-</dom-module>
-
-<script>
-  Polymer({
-    is: 'test-radio-button',
+`,
 
-    behaviors: [Polymer.PaperCheckedElementBehavior]
-  });
-</script>
+  is: 'test-radio-button',
+  behaviors: [PaperCheckedElementBehavior]
+});