paper-toast

Luigi Serra
1 parent 12e73bf0
Showing 10 changed files with 562 additions and 350 deletions
bower.json
bower_components/paper-toast/.bower.json
bower_components/paper-toast/.gitignore
bower_components/paper-toast/README.md
bower_components/paper-toast/bower.json
bower_components/paper-toast/demo/index.html
bower_components/paper-toast/hero.svg
bower_components/paper-toast/index.html
bower_components/paper-toast/paper-toast.html
bower_components/paper-toast/test/basic.html
@@ -18,6 +18,7 @@
     "paper-fab-transitions": "~0.1.0",
     "paper-scroll-header-panel": "PolymerElements/paper-scroll-header-panel#~1.0.14",
     "iron-icon": "PolymerElements/iron-icon#~1.0.7",
-    "iron-icons": "PolymerElements/iron-icons#~1.1.2"
+    "iron-icons": "PolymerElements/iron-icons#~1.1.2",
+    "paper-toast": "PolymerElements/paper-toast#~1.2.1"
   }
 }
-<<<<<<< HEAD
 {
   "name": "paper-toast",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "A material design notification toast",
   "private": true,
   "license": "http://polymer.github.io/LICENSE.txt",
@@ -33,53 +32,13 @@
   },
   "ignore": [],
   "homepage": "https://github.com/PolymerElements/paper-toast",
-  "_release": "1.2.0",
+  "_release": "1.2.1",
   "_resolution": {
     "type": "version",
-    "tag": "v1.2.0",
-    "commit": "b365f5b9709757c02bd6a2b113f6df1a76f94a77"
+    "tag": "v1.2.1",
+    "commit": "c1ff94b116dcd95444b57e55020543658fc77de1"
   },
   "_source": "git://github.com/PolymerElements/paper-toast.git",
-  "_target": "~1.2.0",
-  "_originalSource": "PolymerElements/paper-toast",
-  "_direct": true
-=======
-{
-  "name": "paper-toast",
-  "version": "1.0.0",
-  "description": "A material design notification toast",
-  "private": true,
-  "license": "http://polymer.github.io/LICENSE.txt",
-  "authors": [
-    "The Polymer Authors"
-  ],
-  "keywords": [
-    "web-components",
-    "polymer",
-    "toast",
-    "notification"
-  ],
-  "main": "paper-toast.html",
-  "dependencies": {
-    "paper-styles": "PolymerElements/paper-styles#^1.0.0",
-    "polymer": "Polymer/polymer#^1.0.0",
-    "iron-a11y-announcer": "polymerelements/iron-a11y-announcer#^1.0.0"
-  },
-  "devDependencies": {
-    "iron-component-page": "polymerelements/iron-component-page#^1.0.0",
-    "paper-button": "polymerelements/paper-button#^1.0.0",
-    "web-component-tester": "*",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
-  },
-  "homepage": "https://github.com/PolymerElements/paper-toast",
-  "_release": "1.0.0",
-  "_resolution": {
-    "type": "version",
-    "tag": "v1.0.0",
-    "commit": "71e6c327f7aafe9c71010c83d4c4571f63990072"
-  },
-  "_source": "git://github.com/PolymerElements/paper-toast.git",
-  "_target": "^1.0.0",
-  "_originalSource": "PolymerElements/paper-toast"
->>>>>>> 8de1b08de87fafc78c8aa175c27a1aa837631903
+  "_target": "^1.0.0",
+  "_originalSource": "PolymerElements/paper-toast"
 }
 \ No newline at end of file
-bower_components
+bower_components
-paper-toast
-============
-
-A material design notification toast.
+
+<!---
+
+This README is automatically generated from the comments in these files:
+paper-toast.html
+
+Edit those files, and our readme bot will duplicate them over here!
+Edit this file, and the bot will squash your changes :)
+
+The bot does some handling of markdown. Please file a bug if it does the wrong
+thing! https://github.com/PolymerLabs/tedium/issues
+
+-->
+
+[![Build status](https://travis-ci.org/PolymerElements/paper-toast.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-toast)
+
+_[Demo and API docs](https://elements.polymer-project.org/elements/paper-toast)_
+
+
+##&lt;paper-toast&gt;
+
+Material design: [Snackbards & toasts](https://www.google.com/design/spec/components/snackbars-toasts.html)
+
+`paper-toast` provides a subtle notification toast. Only one `paper-toast` will
+be visible on screen.
+
+Use `opened` to show the toast:
+
+Example:
+
+```html
+<paper-toast text="Hello world!" opened></paper-toast>
+```
+
+Also `open()` or `show()` can be used to show the toast:
+
+Example:
+
+```html
+<paper-button on-click="openToast">Open Toast</paper-button>
+<paper-toast id="toast" text="Hello world!"></paper-toast>
+
+...
+
+openToast: function() {
+  this.$.toast.open();
+}
+```
+
+Set `duration` to 0, a negative number or Infinity to persist the toast on screen:
+
+Example:
+
+```html
+<paper-toast text="Terms and conditions" opened duration="0">
+  <a href="#">Show more</a>
+</paper-toast>
+```
+
+### Styling
+
+The following custom properties and mixins are available for styling:
+
+| Custom property | Description | Default |
+| --- | --- | --- |
+| `--paper-toast-background-color` | The paper-toast background-color | `#323232` |
+| `--paper-toast-color` | The paper-toast color | `#f1f1f1` |
+
+This element applies the mixin `--paper-font-common-base` but does not import `paper-styles/typography.html`.
+In order to apply the `Roboto` font to this element, make sure you've imported `paper-styles/typography.html`.
+
+
-{
-  "name": "paper-toast",
-  "version": "1.0.0",
-  "description": "A material design notification toast",
-  "private": true,
-  "license": "http://polymer.github.io/LICENSE.txt",
-  "authors": [
-    "The Polymer Authors"
-  ],
-  "keywords": [
-    "web-components",
-    "polymer",
-    "toast",
-    "notification"
-  ],
-  "main": "paper-toast.html",
-  "dependencies": {
-    "paper-styles": "PolymerElements/paper-styles#^1.0.0",
-    "polymer": "Polymer/polymer#^1.0.0",
-    "iron-a11y-announcer": "polymerelements/iron-a11y-announcer#^1.0.0"
-  },
-  "devDependencies": {
-    "iron-component-page": "polymerelements/iron-component-page#^1.0.0",
-    "paper-button": "polymerelements/paper-button#^1.0.0",
-    "web-component-tester": "*",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
-  }
-}
+{
+  "name": "paper-toast",
+  "version": "1.2.1",
+  "description": "A material design notification toast",
+  "private": true,
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "keywords": [
+    "web-components",
+    "polymer",
+    "toast",
+    "notification"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/paper-toast.git"
+  },
+  "main": "paper-toast.html",
+  "dependencies": {
+    "iron-a11y-announcer": "PolymerElements/iron-a11y-announcer#^1.0.0",
+    "iron-overlay-behavior": "PolymerElements/iron-overlay-behavior#^1.0.9",
+    "polymer": "Polymer/polymer#^1.1.0"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
+    "paper-button": "PolymerElements/paper-button#^1.0.0",
+    "web-component-tester": "^4.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  },
+  "ignore": []
+}
-<!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
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-<html>
-<head>
-  <title>paper-toast</title>
-
-  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
-  <meta name="mobile-web-app-capable" content="yes">
-  <meta name="apple-mobile-web-app-capable" content="yes">
-
-  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-
-  <link rel="import" href="../paper-toast.html">
-  <link rel="import" href="../../paper-button/paper-button.html" >
-
-  <style>
-    html, body {
-      height: 100%;
-    }
-
-    body {
-      overflow: hidden;
-      margin: 0;
-      font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
-      -webkit-tap-highlight-color: rgba(0,0,0,0);
-      -webkit-touch-callout: none;
-    }
-
-    paper-button {
-      margin: 20px;
-    }
-  </style>
-
-</head>
-<body>
-
-  <paper-button raised onclick="document.querySelector('#toast1').show()">Discard Draft</paper-button>
-
-  <paper-button raised onclick="document.querySelector('#toast2').show()">Get Messages</paper-button>
-
-  <paper-toast id="toast1" text="Your draft has been discarded."></paper-toast>
-
-  <paper-toast id="toast2" text="Connection timed out. Showing limited messages.">
-    <span role="button" tabindex="0" style="color: #eeff41;margin: 10px" onclick="console.log('RETRY')">Retry</span>
-  </paper-toast>
-
-</body>
-</html>
+<!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
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+
+<head>
+  <title>paper-toast</title>
+
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+  <link rel="import" href="../paper-toast.html">
+  <link rel="import" href="../../paper-button/paper-button.html">
+  <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+  <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
+
+  <style is="custom-style" include="demo-pages-shared-styles"></style>
+
+</head>
+
+<body unresolved class="centered">
+  <h3>Toast auto-closes after 3 seconds. Only one toast per time will be visible</h3>
+  <demo-snippet class="centered-demo">
+    <template>
+      <paper-button raised onclick="toast0.open()">Default toast</paper-button>
+      <paper-toast id="toast0" text="This toast auto-closes after 3 seconds"></paper-toast>
+    </template>
+  </demo-snippet>
+
+  <h3>Toast does not auto-close when <code>duration</code> is negative, <code>0</code>, or <code>Infinity</code></h3>
+  <demo-snippet class="centered-demo">
+    <template>
+      <style>
+        .yellow-button {
+          text-transform: none;
+          color: #eeff41;
+        }
+      </style>
+
+      <paper-button raised onclick="toast1.open()">Persistent toast</paper-button>
+
+      <paper-toast id="toast1" duration="0" text="This toast will stay opened until you close it, or open another toast.">
+        <paper-button onclick="toast1.toggle()" class="yellow-button">Close now!</paper-button>
+      </paper-toast>
+    </template>
+  </demo-snippet>
+
+  <h3>Toast can be styled</h3>
+  <demo-snippet class="centered-demo">
+    <template>
+      <style is="custom-style">
+        #toast2 {
+          --paper-toast-background-color: red;
+          --paper-toast-color: white;
+        }
+      </style>
+
+      <paper-button raised onclick="toast2.open()">Styled toast</paper-button>
+
+      <paper-toast id="toast2" class="fit-bottom" text="This toast is red and fits bottom!"></paper-toast>
+    </template>
+  </demo-snippet>
+
+  <h3>Toast can fit into any element</h3>
+  <demo-snippet class="centered-demo">
+    <template>
+      <style>
+        #container {
+          padding: 100px;
+          border: 1px solid gray;
+        }
+      </style>
+      <div id="container">
+        <paper-button raised onclick="toast3.open()">Open toast</paper-button>
+      </div>
+      <paper-toast id="toast3" class="fit-bottom" text="This toast fits into the container."></paper-toast>
+
+      <script>
+        toast3.fitInto = container;
+      </script>
+
+    </template>
+  </demo-snippet>
+</body>
+
+</html>
-<<<<<<< HEAD
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
-<g id="background" display="none">
-	<rect display="inline" fill="#B0BEC5" width="225" height="126"/>
-</g>
-<g id="label">
-</g>
-<g id="art">
-	<path d="M164,114H13V88h151V114z M15,112h147V90H15V112z"/>
-	<rect x="26" y="100" width="79" height="2"/>
-	<rect x="135" y="100" width="16" height="2"/>
-	<g id="ic_x5F_add_x0D_">
-	</g>
-</g>
-<g id="Guides">
-</g>
-</svg>
-=======
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
@@ -40,4 +18,3 @@
 <g id="Guides">
 </g>
 </svg>
->>>>>>> 8de1b08de87fafc78c8aa175c27a1aa837631903
-<!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
-The complete set of authors may be found at http://polymer.github.io/AUTHORS
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
-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
--->
-<html>
-<head>
-
-  <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">
-
-</head>
-<body>
-
-  <iron-component-page></iron-component-page>
-
-</body>
-</html>
+<!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
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+
+  <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">
+
+</head>
+<body>
+
+  <iron-component-page></iron-component-page>
+
+</body>
+</html>
-<!--
-@license
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-
-<link rel="import" href="../polymer/polymer.html">
-<link rel="import" href="../paper-styles/typography.html">
-<link rel="import" href="../iron-a11y-announcer/iron-a11y-announcer.html">
-
-<!--
-`paper-toast` provides a subtle notification toast.
-
-@group Paper Elements
-@element paper-toast
-@demo demo/index.html
-@hero hero.svg
--->
-<dom-module id="paper-toast">
-  <style>
-    :host {
-      display: inline-block;
-      position: fixed;
-
-      background: #323232;
-      color: #f1f1f1;
-      min-height: 48px;
-      min-width: 288px;
-      padding: 16px 24px 12px;
-      box-sizing: border-box;
-      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-      border-radius: 2px;
-      bottom: 12px;
-      left: 12px;
-      font-size: 14px;
-      cursor: default;
-
-      -webkit-transition: visibility 0.3s, -webkit-transform 0.3s;
-      transition: visibility 0.3s, transform 0.3s;
-
-      -webkit-transform: translateY(100px);
-      transform: translateY(100px);
-
-      visibility: hidden;
-    }
-
-    :host(.capsule) {
-      border-radius: 24px;
-    }
-
-    :host(.fit-bottom) {
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      min-width: 0;
-      border-radius: 0;
-    }
-
-    :host(.paper-toast-open){
-      visibility: visible;
-
-      -webkit-transform: translateY(0px);
-      transform: translateY(0px);
-    }
-  </style>
-  <template>
-    <span id="label">{{text}}</span>
-    <content></content>
-  </template>
-</dom-module>
-<script>
-(function() {
-
-  var PaperToast = Polymer({
-    is: 'paper-toast',
-
-    properties: {
-      /**
-       * The duration in milliseconds to show the toast.
-       */
-      duration: {
-        type: Number,
-        value: 3000
-      },
-
-      /**
-       * The text to display in the toast.
-       */
-      text: {
-        type: String,
-        value: ""
-      },
-
-      /**
-       * True if the toast is currently visible.
-       */
-      visible: {
-        type: Boolean,
-        readOnly: true,
-        value: false,
-        observer: '_visibleChanged'
-      }
-    },
-
-    created: function() {
-      Polymer.IronA11yAnnouncer.requestAvailability();
-    },
-
-    ready: function() {
-      this.async(function() {
-        this.hide();
-      });
-    },
-
-    /**
-     * Show the toast.
-     * @method show
-     */
-    show: function() {
-      if (PaperToast.currentToast) {
-        PaperToast.currentToast.hide();
-      }
-      PaperToast.currentToast = this;
-      this.removeAttribute('aria-hidden');
-      this._setVisible(true);
-      this.fire('iron-announce', {
-        text: this.text
-      });
-      this.debounce('hide', this.hide, this.duration);
-    },
-
-    /**
-     * Hide the toast
-     */
-    hide: function() {
-      this.setAttribute('aria-hidden', 'true');
-      this._setVisible(false);
-    },
-
-    /**
-     * Toggle the opened state of the toast.
-     * @method toggle
-     */
-    toggle: function() {
-      if (!this.visible) {
-        this.show();
-      } else {
-        this.hide();
-      }
-    },
-
-    _visibleChanged: function(visible) {
-      this.toggleClass('paper-toast-open', visible);
-    }
-  });
-
-  PaperToast.currentToast = null;
-
-})();
-</script>
+<!--
+@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-a11y-announcer/iron-a11y-announcer.html">
+<link rel="import" href="../iron-overlay-behavior/iron-overlay-behavior.html">
+
+<!--
+Material design: [Snackbards & toasts](https://www.google.com/design/spec/components/snackbars-toasts.html)
+
+`paper-toast` provides a subtle notification toast. Only one `paper-toast` will
+be visible on screen.
+
+Use `opened` to show the toast:
+
+Example:
+
+    <paper-toast text="Hello world!" opened></paper-toast>
+
+Also `open()` or `show()` can be used to show the toast:
+
+Example:
+
+    <paper-button on-click="openToast">Open Toast</paper-button>
+    <paper-toast id="toast" text="Hello world!"></paper-toast>
+
+    ...
+
+    openToast: function() {
+      this.$.toast.open();
+    }
+
+Set `duration` to 0, a negative number or Infinity to persist the toast on screen:
+
+Example:
+
+    <paper-toast text="Terms and conditions" opened duration="0">
+      <a href="#">Show more</a>
+    </paper-toast>
+
+
+### Styling
+The following custom properties and mixins are available for styling:
+
+Custom property | Description | Default
+----------------|-------------|----------
+`--paper-toast-background-color` | The paper-toast background-color | `#323232`
+`--paper-toast-color` | The paper-toast color | `#f1f1f1`
+
+This element applies the mixin `--paper-font-common-base` but does not import `paper-styles/typography.html`.
+In order to apply the `Roboto` font to this element, make sure you've imported `paper-styles/typography.html`.
+
+@group Paper Elements
+@element paper-toast
+@demo demo/index.html
+@hero hero.svg
+-->
+
+<dom-module id="paper-toast">
+  <template>
+    <style>
+      :host {
+        display: block;
+        position: fixed;
+        background-color: var(--paper-toast-background-color, #323232);
+        color: var(--paper-toast-color, #f1f1f1);
+        min-height: 48px;
+        min-width: 288px;
+        padding: 16px 24px;
+        box-sizing: border-box;
+        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+        border-radius: 2px;
+        left: 0;
+        bottom: 0;
+        margin: 12px;
+        font-size: 14px;
+        cursor: default;
+        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
+        transition: transform 0.3s, opacity 0.3s;
+        opacity: 0;
+        -webkit-transform: translateY(100px);
+        transform: translateY(100px);
+        @apply(--paper-font-common-base);
+      }
+
+      :host(.capsule) {
+        border-radius: 24px;
+      }
+
+      :host(.fit-bottom) {
+        width: 100%;
+        min-width: 0;
+        border-radius: 0;
+        margin: 0;
+      }
+
+      :host(.paper-toast-open) {
+        opacity: 1;
+        -webkit-transform: translateY(0px);
+        transform: translateY(0px);
+      }
+    </style>
+
+    <span id="label">{{text}}</span>
+    <content></content>
+  </template>
+
+  <script>
+    (function() {
+      // Keeps track of the toast currently opened.
+      var currentToast = null;
+
+      Polymer({
+        is: 'paper-toast',
+
+        behaviors: [
+          Polymer.IronOverlayBehavior
+        ],
+
+        properties: {
+          /**
+           * The duration in milliseconds to show the toast.
+           * Set to `0`, a negative number, or `Infinity`, to disable the
+           * toast auto-closing.
+           */
+          duration: {
+            type: Number,
+            value: 3000
+          },
+
+          /**
+           * The text to display in the toast.
+           */
+          text: {
+            type: String,
+            value: ''
+          },
+
+          /**
+           * Overridden from `IronOverlayBehavior`.
+           * Set to false to enable closing of the toast by clicking outside it.
+           */
+          noCancelOnOutsideClick: {
+            type: Boolean,
+            value: true
+          },
+
+          /**
+           * Overridden from `IronOverlayBehavior`.
+           * Set to true to disable auto-focusing the toast or child nodes with
+           * the `autofocus` attribute` when the overlay is opened.
+           */
+          noAutoFocus: {
+            type: Boolean,
+            value: true
+          }
+        },
+
+        listeners: {
+          'transitionend': '__onTransitionEnd'
+        },
+
+        /**
+         * Read-only. Deprecated. Use `opened` from `IronOverlayBehavior`.
+         * @property visible
+         * @deprecated
+         */
+        get visible() {
+          console.warn('`visible` is deprecated, use `opened` instead');
+          return this.opened;
+        },
+
+        /**
+         * Read-only. Can auto-close if duration is a positive finite number.
+         * @property _canAutoClose
+         */
+        get _canAutoClose() {
+          return this.duration > 0 && this.duration !== Infinity;
+        },
+
+        created: function() {
+          this._autoClose = null;
+          Polymer.IronA11yAnnouncer.requestAvailability();
+        },
+
+        /**
+         * Show the toast. Without arguments, this is the same as `open()` from `IronOverlayBehavior`.
+         * @param {Object|string|undefined} properties Properties to be set before opening the toast.
+         * e.g. `toast.show('hello')` or `toast.show({text: 'hello', duration: 3000})`
+         */
+        show: function(properties) {
+          if (typeof properties == 'string') {
+            properties = { text: properties };
+          }
+          for (var property in properties) {
+            if (property.indexOf('_') === 0) {
+              console.warn('The property "' + property + '" is private and was not set.');
+            } else if (property in this) {
+              this[property] = properties[property];
+            } else {
+              console.warn('The property "' + property + '" is not valid.');
+            }
+          }
+          this.open();
+        },
+
+        /**
+         * Hide the toast. Same as `close()` from `IronOverlayBehavior`.
+         */
+        hide: function() {
+          this.close();
+        },
+
+        /**
+         * Overridden from `IronFitBehavior`.
+         * Positions the toast at the bottom left of fitInto.
+         */
+        center: function () {
+          if (this.fitInto === window) {
+            this.style.bottom = this.style.left = '';
+          } else {
+            var rect = this.fitInto.getBoundingClientRect();
+            this.style.left = rect.left + 'px';
+            this.style.bottom = (window.innerHeight - rect.bottom) + 'px';
+          }
+        },
+
+        /**
+         * Called on transitions of the toast, indicating a finished animation
+         * @private
+         */
+        __onTransitionEnd: function(e) {
+          // there are different transitions that are happening when opening and
+          // closing the toast. The last one so far is for `opacity`.
+          // This marks the end of the transition, so we check for this to determine if this
+          // is the correct event.
+          if (e && e.target === this && e.propertyName === 'opacity') {
+            if (this.opened) {
+              this._finishRenderOpened();
+            } else {
+              this._finishRenderClosed();
+            }
+          }
+        },
+
+        /**
+         * Overridden from `IronOverlayBehavior`.
+         * Called when the value of `opened` changes.
+         */
+        _openedChanged: function() {
+          if (this._autoClose !== null) {
+            this.cancelAsync(this._autoClose);
+            this._autoClose = null;
+          }
+          if (this.opened) {
+            if (currentToast && currentToast !== this) {
+              currentToast.close();
+            }
+            currentToast = this;
+            this.fire('iron-announce', {
+              text: this.text
+            });
+            if (this._canAutoClose) {
+              this._autoClose = this.async(this.close, this.duration);
+            }
+          } else if (currentToast === this) {
+            currentToast = null;
+          }
+          Polymer.IronOverlayBehaviorImpl._openedChanged.apply(this, arguments);
+        },
+
+        /**
+         * Overridden from `IronOverlayBehavior`.
+         */
+        _renderOpened: function() {
+          this.classList.add('paper-toast-open');
+        },
+
+        /**
+         * Overridden from `IronOverlayBehavior`.
+         */
+        _renderClosed: function() {
+          this.classList.remove('paper-toast-open');
+        },
+
+        /**
+         * Overridden from `IronOverlayBehavior`.
+         * iron-fit-behavior will set the inline style position: static, which
+         * causes the toast to be rendered incorrectly when opened by default.
+         */
+        _onIronResize: function() {
+          Polymer.IronOverlayBehaviorImpl._onIronResize.apply(this, arguments);
+          if (this.opened) {
+            // Make sure there is no inline style for position.
+            this.style.position = '';
+          }
+        }
+
+        /**
+         * Fired when `paper-toast` is opened.
+         *
+         * @event 'iron-announce'
+         * @param {{text: string}} detail Contains text that will be announced.
+         */
+      });
+    })();
+  </script>
+</dom-module>
@@ -95,6 +95,16 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         });
       });
+      test('toast does not get focused', function(done) {
+        toast = fixture('show');
+        var spy = sinon.spy(toast, 'focus');
+        assert.isTrue(toast.noAutoFocus, 'no-auto-focus is true');
+        toast.addEventListener('iron-overlay-opened', function() {
+          assert.isFalse(spy.called, 'toast is not focused');
+          done();
+        });
+      });
+
       test('toast fires closed event', function(done) {
         toast = fixture('basic');
         toast.show({duration: 350});