2.6.0: Upgrade to Polymer 2.6.0.

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "polymer-cdn",
-  "version": "2.3.1",
+  "version": "2.6.0",
   "main": "polymer.js",
   "homepage": "https://github.com/Download/polymer-cdn",
   "authors": [

lib/app-layout/.bower.json

@@ -1,6 +1,6 @@
 {
   "name": "app-layout",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "description": "A set of layout elements for your app",
   "authors": [
     "The Polymer Authors"
@@ -65,11 +65,11 @@
   "resolutions": {
     "webcomponentsjs": "^1.0.0"
   },
-  "_release": "2.0.4",
+  "_release": "2.1.0",
   "_resolution": {
     "type": "version",
-    "tag": "v2.0.4",
-    "commit": "623997a76bea695a51de0d4e96e11a8198e367da"
+    "tag": "v2.1.0",
+    "commit": "934f0d1cd3a635f5d5e2ed07739f217fe9dfc8ec"
   },
   "_source": "https://github.com/PolymerElements/app-layout.git",
   "_target": "^2.0.4",

lib/app-layout/.github/CODEOWNERS

@@ -0,0 +1,2 @@
+* @keanulee @frankiefu
+/.travis.yml @azakus

lib/app-layout/.gitignore

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

lib/app-layout/.travis.yml

@@ -13,6 +13,10 @@ addons:
 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)
 script:
   - xvfb-run polymer test
   - >-

lib/app-layout/README.md

@@ -1,4 +1,4 @@
-# App Layout [![Build Status](https://travis-ci.org/PolymerElements/app-layout.svg?branch=master)](https://travis-ci.org/PolymerElements/app-layout) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://beta.webcomponents.org/element/PolymerElements/app-layout)
+# App Layout [![Build Status](https://travis-ci.org/PolymerElements/app-layout.svg?branch=master)](https://travis-ci.org/PolymerElements/app-layout) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/PolymerElements/app-layout)
 
 A collection of elements, along with guidelines and templates that can be used to structure your app’s layout.
 

lib/app-layout/app-box/app-box.d.ts

@@ -0,0 +1,117 @@
+/**
+ * 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):
+ *   app-box/app-box.html
+ */
+
+/// <reference path="../../polymer/types/polymer.d.ts" />
+/// <reference path="../../iron-flex-layout/iron-flex-layout.d.ts" />
+/// <reference path="../../iron-resizable-behavior/iron-resizable-behavior.d.ts" />
+/// <reference path="../app-scroll-effects/app-scroll-effects-behavior.d.ts" />
+
+/**
+ * app-box is a container element that can have scroll effects - visual effects based on
+ * scroll position. For example, the parallax effect can be used to move an image at a slower
+ * rate than the foreground.
+ *
+ * ```html
+ * <app-box style="height: 100px;" effects="parallax-background">
+ *   <img slot="background" src="picture.png" style="width: 100%; height: 600px;">
+ * </app-box>
+ * ```
+ *
+ * Notice the `background` attribute in the `img` element; this attribute specifies that that
+ * image is used as the background. By adding the background to the light dom, you can compose
+ * backgrounds that can change dynamically. Alternatively, the mixin `--app-box-background-front-layer`
+ * allows to style the background. For example:
+ *
+ * ```css
+ *   .parallaxAppBox {
+ *     --app-box-background-front-layer: {
+ *       background-image: url(picture.png);
+ *     };
+ *   }
+ * ```
+ *
+ * Finally, app-box can have content inside. For example:
+ *
+ * ```html
+ * <app-box effects="parallax-background">
+ *   <h2>Sub title</h2>
+ * </app-box>
+ * ```
+ *
+ * #### Importing the effects
+ *
+ * To use the scroll effects, you must explicitly import them in addition to `app-box`:
+ *
+ * ```html
+ * <link rel="import" href="/bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
+ * ```
+ *
+ * #### List of effects
+ *
+ * **parallax-background**
+ * A simple parallax effect that vertically translates the backgrounds based on a fraction
+ * of the scroll position. For example:
+ *
+ * ```css
+ * app-header {
+ *   --app-header-background-front-layer: {
+ *     background-image: url(...);
+ *   };
+ * }
+ * ```
+ * ```html
+ * <app-header style="height: 300px;" effects="parallax-background">
+ *   <app-toolbar>App name</app-toolbar>
+ * </app-header>
+ * ```
+ *
+ * The fraction determines how far the background moves relative to the scroll position.
+ * This value can be assigned via the `scalar` config value and it is typically a value
+ * between 0 and 1 inclusive. If `scalar=0`, the background doesn't move away from the header.
+ *
+ * ## Styling
+ *
+ * Mixin | Description | Default
+ * ----------------|-------------|----------
+ * `--app-box-background-front-layer` | Applies to the front layer of the background | {}
+ */
+interface AppBoxElement extends Polymer.Element, Polymer.AppScrollEffectsBehavior, Polymer.IronResizableBehavior {
+
+  /**
+   * The current scroll progress.
+   */
+  _progress: number;
+  _updateScrollState(scrollTop: any): void;
+
+  /**
+   * Returns true if this app-box is on the screen.
+   * That is, visible in the current viewport.
+   */
+  isOnScreen(): boolean;
+  _getDOMRef(id: any): any;
+  attached(): void;
+  _debounceRaf(fn: any): void;
+
+  /**
+   * Resets the layout. This method is automatically called when the element is attached to the DOM.
+   */
+  resetLayout(): void;
+  _getElementTop(): any;
+  _resizeHandler(): void;
+
+  /**
+   * Returns an object containing the progress value of the scroll effects.
+   */
+  getScrollState(): object|null;
+}
+
+interface HTMLElementTagNameMap {
+  "app-box": AppBoxElement;
+}

lib/app-layout/app-drawer-layout/app-drawer-layout.d.ts

@@ -0,0 +1,168 @@
+/**
+ * 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):
+ *   app-drawer-layout/app-drawer-layout.html
+ */
+
+/// <reference path="../../polymer/types/polymer.d.ts" />
+/// <reference path="../../iron-media-query/iron-media-query.d.ts" />
+/// <reference path="../app-layout-behavior/app-layout-behavior.d.ts" />
+
+/**
+ * app-drawer-layout is a wrapper element that positions an app-drawer and other content. When
+ * the viewport width is smaller than `responsiveWidth`, this element changes to narrow layout.
+ * In narrow layout, the drawer will be stacked on top of the main content. The drawer will slide
+ * in/out to hide/reveal the main content.
+ *
+ * By default the drawer is aligned to the start, which is left in LTR layouts:
+ *
+ * ```html
+ * <app-drawer-layout>
+ *   <app-drawer slot="drawer">
+ *     drawer content
+ *   </app-drawer>
+ *   <div>
+ *     main content
+ *   </div>
+ * </app-drawer-layout>
+ * ```
+ *
+ * Align the drawer at the end:
+ *
+ * ```html
+ * <app-drawer-layout>
+ *   <app-drawer slot="drawer" align="end">
+ *      drawer content
+ *   </app-drawer>
+ *   <div>
+ *     main content
+ *   </div>
+ * </app-drawer-layout>
+ * ```
+ *
+ * With an app-header-layout:
+ *
+ * ```html
+ * <app-drawer-layout>
+ *   <app-drawer slot="drawer">
+ *     drawer-content
+ *   </app-drawer>
+ *   <app-header-layout>
+ *     <app-header slot="header">
+ *       <app-toolbar>
+ *         <div main-title>App name</div>
+ *       </app-toolbar>
+ *     </app-header>
+ *
+ *     main content
+ *
+ *   </app-header-layout>
+ * </app-drawer-layout>
+ * ```
+ *
+ * Add the `drawer-toggle` attribute to elements inside `app-drawer-layout` that toggle the drawer on click events:
+ *
+ * ```html
+ * <app-drawer-layout>
+ *   <app-drawer slot="drawer">
+ *     drawer-content
+ *   </app-drawer>
+ *   <app-header-layout>
+ *     <app-header slot="header">
+ *       <app-toolbar>
+ *         <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
+ *         <div main-title>App name</div>
+ *       </app-toolbar>
+ *     </app-header>
+ *
+ *     main content
+ *
+ *   </app-header-layout>
+ * </app-drawer-layout>
+ * ```
+ *
+ * *NOTE:** With app-layout 2.0, the `drawer-toggle` element needs to be manually hidden
+ * when app-drawer-layout is not in narrow layout. To add this, add the following CSS rule where
+ * app-drawer-layout is used:
+ *
+ * ```css
+ * app-drawer-layout:not([narrow]) [drawer-toggle] {
+ *   display: none;
+ * }
+ * ```
+ *
+ * Add the `fullbleed` attribute to app-drawer-layout to make it fit the size of its container:
+ *
+ * ```html
+ * <app-drawer-layout fullbleed>
+ *   <app-drawer slot="drawer">
+ *      drawer content
+ *   </app-drawer>
+ *   <div>
+ *     main content
+ *   </div>
+ * </app-drawer-layout>
+ * ```
+ *
+ * ### Styling
+ *
+ * Custom property                          | Description                          | Default
+ * -----------------------------------------|--------------------------------------|---------
+ * `--app-drawer-width`                     | Width of the drawer                  | 256px
+ * `--app-drawer-layout-content-transition` | Transition for the content container | none
+ *
+ * *NOTE:** If you use <app-drawer> with <app-drawer-layout> and specify a value for
+ * `--app-drawer-width`, that value must be accessible by both elements. This can be done by
+ * defining the value on the `:host` that contains <app-drawer-layout> (or `html` if outside
+ * a shadow root):
+ *
+ * ```css
+ * :host {
+ *   --app-drawer-width: 300px;
+ * }
+ * ```
+ */
+interface AppDrawerLayoutElement extends Polymer.Element, Polymer.AppLayoutBehavior {
+
+  /**
+   * If true, ignore `responsiveWidth` setting and force the narrow layout.
+   */
+  forceNarrow: boolean|null|undefined;
+
+  /**
+   * If the viewport's width is smaller than this value, the panel will change to narrow
+   * layout. In the mode the drawer will be closed.
+   */
+  responsiveWidth: string|null|undefined;
+
+  /**
+   * Returns true if it is in narrow layout. This is useful if you need to show/hide
+   * elements based on the layout.
+   */
+  readonly narrow: boolean|null|undefined;
+
+  /**
+   * If true, the drawer will initially be opened when in narrow layout mode.
+   */
+  openedWhenNarrow: boolean|null|undefined;
+  _drawerPosition: string|null|undefined;
+
+  /**
+   * A reference to the app-drawer element.
+   */
+  readonly drawer: any;
+  attached(): void;
+  _updateLayoutStates(): void;
+  _clickHandler(e: any): void;
+  _narrowChanged(): void;
+  _onQueryMatchesChanged(event: any): void;
+  _computeMediaQuery(forceNarrow: any, responsiveWidth: any): any;
+}
+
+interface HTMLElementTagNameMap {
+  "app-drawer-layout": AppDrawerLayoutElement;
+}

lib/app-layout/app-drawer/README.md

@@ -35,9 +35,9 @@ Custom property                  | Description                            | Defa
 `--app-drawer-content-container` | Mixin for the drawer content container | {}
 `--app-drawer-scrim-background`  | Background for the scrim               | rgba(0, 0, 0, 0.5)
 
-**NOTE:** If you use <app-drawer> with <app-drawer-layout> and specify a value for
+**NOTE:** If you use `<app-drawer>` with `<app-drawer-layout>` and specify a value for
 `--app-drawer-width`, that value must be accessible by both elements. This can be done by
-defining the value on the `:host` that contains <app-drawer-layout> (or `html` if outside
+defining the value on the `:host` that contains `<app-drawer-layout>` (or `html` if outside
 a shadow root):
 
 ```css