From cf10520521426e7967dbb9c1309db8faad782257 Mon Sep 17 00:00:00 2001
From: Elliott Marquez <emarquez@google.com>
Date: Fri, 11 Jan 2019 17:11:00 -0800
Subject: [PATCH 1/5] create dropdown lite

---
 iron-dropdown-lite.html | 484 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 484 insertions(+)
 create mode 100644 iron-dropdown-lite.html

diff --git a/iron-dropdown-lite.html b/iron-dropdown-lite.html
new file mode 100644
index 0000000..63060f6
--- /dev/null
+++ b/iron-dropdown-lite.html
@@ -0,0 +1,484 @@
+<!--
+@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-control-state.html">
+<link rel="import" href="../iron-overlay-behavior/iron-overlay-behavior.html">
+<!--TODO remove this import -->
+<link rel="import" href="iron-dropdown-scroll-manager.html">
+
+<!--
+`<iron-dropdown>` is a generalized element that is useful when you have
+hidden content (`dropdown-content`) that is revealed due to some change in
+state that should cause it to do so.
+
+Note that this is a low-level element intended to be used as part of other
+composite elements that cause dropdowns to be revealed.
+
+Examples of elements that might be implemented using an `iron-dropdown`
+include comboboxes, menubuttons, selects. The list goes on.
+
+The `<iron-dropdown>` element exposes attributes that allow the position
+of the `dropdown-content` relative to the `dropdown-trigger` to be
+configured.
+
+    <iron-dropdown horizontal-align="right" vertical-align="top">
+      <div slot="dropdown-content">Hello!</div>
+    </iron-dropdown>
+
+In the above example, the `<div>` assigned to the `dropdown-content` slot will be
+hidden until the dropdown element has `opened` set to true, or when the `open`
+method is called on the element.
+
+### Changes in 2.0
+- Removed the private property `_focusTarget` which was deprecated.
+- Distribution moved from the `class="dropdown-content"` to `slot="dropdown-content"`.
+- `<iron-dropdown>` animations are not based on the deprecated `neon-animation` component, and use CSS keyframe animations
+
+### Animations
+
+Set the `entry-animation` and/or `exit-animation` attributes to add an animation when the dialog
+is opened or closed. Included in the component are:
+- fade-in-animation
+- fade-out-animation
+- scale-up-animation
+- scale-down-animation
+
+These animations are not based on the deprecated `neon-animation` component, and use CSS keyframe animations.
+This change reduces code size, and uses the platform. You can implement custom entry/exit animations using
+CSS keyframe animations; define the animation keyframes, a CSS class for the animation, and assign the class to the `entry/exit-animation`, e.g.
+
+    <style>
+      \@keyframes expand-animation {
+        from {
+          max-height: 10px;
+          opacity: 0;
+        }
+        to {
+          max-height: 100px;
+        }
+      }
+
+      .expand-animation {
+        animation-name: expand-animation;
+        animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
+        animation-delay: 150ms;
+        animation-duration: 200ms;
+      }
+    </style>
+
+    <iron-dropdown entry-animation="expand-animation"
+                   exit-animation="fade-out-animation">
+      <div slot="dropdown-content">Hello!</div>
+    </iron-dropdown>
+
+@demo demo/index.html
+-->
+
+<dom-module id="iron-dropdown-lite">
+  <template>
+    <style>
+      :host {
+        position: fixed;
+        transform-origin: left top;
+      }
+
+      :host([horizontal-align="right"]) {
+        transform-origin: right top;
+      }
+
+      :host([vertical-align="bottom"]) {
+        transform-origin: left bottom;
+      }
+
+      :host([horizontal-align="right"][vertical-align="bottom"]) {
+        transform-origin: right bottom;
+      }
+
+      ::slotted(*) {
+        overflow: auto;
+      }
+
+      :host(.animating) {
+        pointer-events: none;
+        animation-duration: 500ms;
+        animation-fill-mode: both;
+        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      :host(.fade-in-animation) {
+        animation-name: fade-in-animation;
+      }
+
+      @keyframes fade-in-animation {
+        from {
+          opacity: 0;
+        }
+      }
+
+      :host(.fade-out-animation) {
+        animation-name: fade-out-animation;
+      }
+
+      @keyframes fade-out-animation {
+        to {
+          opacity: 0;
+        }
+      }
+
+      :host(.scale-up-animation) {
+        animation-name: scale-up-animation;
+      }
+
+      @keyframes scale-up-animation {
+        from {
+          transform: scale(0);
+        }
+      }
+
+      :host(.scale-down-animation) {
+        animation-name: scale-down-animation;
+      }
+
+      @keyframes scale-down-animation {
+        to {
+          transform: scale(0);
+        }
+      }
+    </style>
+    <slot id="content" name="dropdown-content"></slot>
+  </template>
+
+  <script>
+    (function() {
+      'use strict';
+
+      Polymer({
+        is: 'iron-dropdown-lite',
+
+        behaviors: [
+          Polymer.IronControlState,
+          Polymer.IronA11yKeysBehavior,
+          Polymer.IronOverlayBehavior,
+        ],
+
+        properties: {
+          /**
+           * The orientation against which to align the dropdown content
+           * horizontally relative to the dropdown trigger.
+           * Overridden from `Polymer.IronFitBehavior`.
+           */
+          horizontalAlign: {
+            type: String,
+            value: 'left',
+            reflectToAttribute: true
+          },
+
+          /**
+           * The orientation against which to align the dropdown content
+           * vertically relative to the dropdown trigger.
+           * Overridden from `Polymer.IronFitBehavior`.
+           */
+          verticalAlign: {
+            type: String,
+            value: 'top',
+            reflectToAttribute: true
+          },
+
+          /**
+           * The class defining the entry animation.
+           */
+          entryAnimation: {
+            type: String
+          },
+
+          /**
+           * The class defining the exit animation.
+           */
+          exitAnimation: {
+            type: String
+          },
+
+          /**
+           * Deprecated, use `entryAnimation` and `exitAnimation` instead.
+           * `iron-dropdown` doesn't depend anymore on `neon-animation`, and this property is kept
+           * here to not break bindings. Setting it won't have effects on the animation.
+           * @deprecated
+           */
+          animationConfig: {
+            type: Object
+          },
+
+          /**
+           * Deprecated, use `entryAnimation` instead.
+           * `iron-dropdown` doesn't depend anymore on `neon-animation`, and this property is kept
+           * here to not break bindings. Setting it won't have effects on the animation.
+           * @deprecated
+           */
+          openAnimationConfig: {
+            type: Object
+          },
+
+          /**
+           * Deprecated, use `exitAnimation` instead.
+           * `iron-dropdown` doesn't depend anymore on `neon-animation`, and this property is kept
+           * here to not break bindings. Setting it won't have effects on the animation.
+           * @deprecated
+           */
+          closeAnimationConfig: {
+            type: Object
+          },
+
+          /**
+           * If provided, this will be the element that will be focused when
+           * the dropdown opens.
+           */
+          focusTarget: {
+            type: Object
+          },
+
+          /**
+           * Set to true to disable animations when opening and closing the
+           * dropdown.
+           */
+          noAnimations: {
+            type: Boolean,
+            value: false
+          },
+
+          /**
+           * By default, the dropdown will constrain scrolling on the page
+           * to itself when opened.
+           * Set to true in order to prevent scroll from being constrained
+           * to the dropdown when it opens.
+           * This property is a shortcut to set `scrollAction` to lock or refit.
+           * Prefer directly setting the `scrollAction` property.
+           */
+          allowOutsideScroll: {
+            type: Boolean,
+            value: false,
+            observer: '_allowOutsideScrollChanged'
+          }
+        },
+
+        listeners: {
+          'animationend': '_onAnimationEnd'
+        },
+
+        observers: [
+          '_updateOverlayPosition(positionTarget, verticalAlign, horizontalAlign, verticalOffset, horizontalOffset)'
+        ],
+
+        /**
+         * The element that is contained by the dropdown, if any.
+         */
+        get containedElement() {
+          // Polymer 2.x returns slot.assignedNodes which can contain text nodes.
+          var nodes = Polymer.dom(this.$.content).getDistributedNodes();
+          for (var i = 0, l = nodes.length; i < l; i++) {
+            if (nodes[i].nodeType === Node.ELEMENT_NODE) {
+              return nodes[i];
+            }
+          }
+        },
+
+        ready: function() {
+          // Ensure scrollAction is set.
+          if (!this.scrollAction) {
+            this.scrollAction = this.allowOutsideScroll ? 'refit' : 'lock';
+          }
+          if (this.openAnimationConfig || this.closeAnimationConfig || this.animationConfig) {
+            console.warn('Configuring animations through animationConfig, openAnimationConfig, ' +
+              'or closeAnimationConfig is no longer supported. ' +
+              'Use entryAnimation and exitAnimation instead.');
+            // Set this for backwards-compat.
+            this.animationConfig = this.animationConfig || {
+              open: this.openAnimationConfig,
+              close: this.closeAnimationConfig
+            };
+          }
+          this._readied = true;
+        },
+
+        attached: function() {
+          if (!this.sizingTarget || this.sizingTarget === this) {
+            this.sizingTarget = this.containedElement || this;
+          }
+        },
+
+        detached: function() {
+          this._cancelAnimation();
+        },
+
+        /**
+         * `iron-dropdown` doesn't depend anymore on `neon-animation`.
+         * This method was previously inherited from `Polymer.NeonAnimatableBehavior`,
+         * now is a no-op.
+         * @deprecated
+         */
+        cancelAnimation: function() {},
+
+        /**
+         * `iron-dropdown` doesn't depend anymore on `neon-animation`.
+         * This method was previously inherited from `Polymer.NeonAnimatableBehavior`,
+         * now is a no-op.
+         * @param {string=} type
+         * @param {!Object=} cookie
+         * @deprecated
+         */
+        playAnimation: function(type, cookie) {},
+
+        /**
+         * `iron-dropdown` doesn't depend anymore on `neon-animation`.
+         * This method was previously inherited from `Polymer.NeonAnimatableBehavior`,
+         * now is a no-op.
+         * @deprecated
+         */
+        getAnimationConfig: function(type) { return []; },
+
+        /**
+         * Called when the value of `opened` changes.
+         * Overridden from `IronOverlayBehavior`
+         * @private
+         */
+        _openedChanged: function() {
+          if (this.opened && this.disabled) {
+            this.cancel();
+          } else {
+            this._cancelAnimation();
+            Polymer.IronOverlayBehaviorImpl._openedChanged.apply(this, arguments);
+          }
+        },
+
+        /**
+         * Overridden from `IronOverlayBehavior`.
+         * @private
+         */
+        _renderOpened: function() {
+          if (!this.noAnimations && this.entryAnimation) {
+            this._playAnimation(this.entryAnimation);
+          } else {
+            Polymer.IronOverlayBehaviorImpl._renderOpened.apply(this, arguments);
+          }
+        },
+
+        /**
+         * Overridden from `IronOverlayBehavior`.
+         * @private
+         */
+        _renderClosed: function() {
+          if (!this.noAnimations && this.exitAnimation) {
+            this._playAnimation(this.exitAnimation);
+          } else {
+            Polymer.IronOverlayBehaviorImpl._renderClosed.apply(this, arguments);
+          }
+        },
+
+        /**
+         * @private
+         */
+        _cancelAnimation: function() {
+          if (this._pendingAnimation) {
+            this.classList.remove('animating');
+            this.classList.remove(this._pendingAnimation);
+            this._pendingAnimation = null;
+          }
+        },
+
+        /**
+         * @param {!string} animation
+         * @private
+         */
+        _playAnimation: function(animation) {
+          this.classList.add('animating');
+          this.classList.add(animation);
+          this._pendingAnimation = animation;
+          if (this._willAnimate() === false) {
+            console.info(animation + ' animation was not played');
+            this._onAnimationEnd();
+          }
+        },
+
+        /**
+         * @private
+         */
+        _willAnimate: function() {
+          // If CSS Class does not have animation-name considered not be an animation
+          var style = getComputedStyle(this);
+          return (style.getPropertyValue('animation-name') !== 'none' &&
+            style.getPropertyValue('animation-duration') !== '0ms');
+        },
+
+        /**
+         * Called when animation finishes on the dropdown (when opening or
+         * closing). Responsible for "completing" the process of opening or
+         * closing the dropdown by positioning it or setting its display to
+         * none.
+         * @param {Event=} event
+         * @private
+         */
+        _onAnimationEnd: function(event) {
+          if (event && event.target !== this) {
+            return;
+          }
+          // Removes the classes.
+          this._cancelAnimation();
+          if (this.opened) {
+            this._finishRenderOpened();
+          } else {
+            this._finishRenderClosed();
+          }
+        },
+
+        /**
+         * Updates the overlay position based on configured horizontal
+         * and vertical alignment.
+         * @private
+         */
+        _updateOverlayPosition: function() {
+          if (this.isAttached) {
+            // This triggers iron-resize, and iron-overlay-behavior will call refit if needed.
+            this.notifyResize();
+          }
+        },
+
+        /**
+         * Sets scrollAction according to the value of allowOutsideScroll.
+         * Prefer setting directly scrollAction.
+         * @private
+         */
+        _allowOutsideScrollChanged: function(allowOutsideScroll) {
+          // Wait until initial values are all set.
+          if (!this._readied) {
+            return;
+          }
+          if (!allowOutsideScroll) {
+            this.scrollAction = 'lock';
+          } else if (!this.scrollAction || this.scrollAction === 'lock') {
+            this.scrollAction = 'refit';
+          }
+        },
+
+        /**
+         * Apply focus to focusTarget or containedElement
+         * @private
+         */
+        _applyFocus: function() {
+          var focusTarget = this.focusTarget || this.containedElement;
+          if (focusTarget && this.opened && !this.noAutoFocus) {
+            focusTarget.focus();
+          } else {
+            Polymer.IronOverlayBehaviorImpl._applyFocus.apply(this, arguments);
+          }
+        }
+      });
+    })();
+  </script>
+</dom-module>
\ No newline at end of file

From e959112cd89925439c0a888a3848ba531d1e7e9c Mon Sep 17 00:00:00 2001
From: Elliott Marquez <emarquez@google.com>
Date: Fri, 11 Jan 2019 17:11:10 -0800
Subject: [PATCH 2/5] add tests for iron-dropdown-lite

---
 test/index.html              |   2 +
 test/iron-dropdown-lite.html | 560 +++++++++++++++++++++++++++++++++++
 2 files changed, 562 insertions(+)
 create mode 100644 test/iron-dropdown-lite.html

diff --git a/test/index.html b/test/index.html
index 1080d00..f0de1c1 100644
--- a/test/index.html
+++ b/test/index.html
@@ -20,6 +20,8 @@
     WCT.loadSuites([
       'iron-dropdown.html?wc-shadydom=true&wc-ce=true',  // shady
       'iron-dropdown.html?dom=shadow',                   // shadow
+      'iron-dropdown-lite.html?wc-shadydom=true&wc-ce=true',  // shady
+      'iron-dropdown-lite.html?dom=shadow',                   // shadow
     ]);
   </script>
 </body>
diff --git a/test/iron-dropdown-lite.html b/test/iron-dropdown-lite.html
new file mode 100644
index 0000000..2c15bc2
--- /dev/null
+++ b/test/iron-dropdown-lite.html
@@ -0,0 +1,560 @@
+<!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">
+  <title>iron-dropdown-lite basic tests</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../iron-test-helpers/mock-interactions.js"></script>
+
+  <script>
+    // Don't load the web animations polyfill if we're using neon-animations
+    // 1.x, which loads it itself.
+    // TODO(bicknellr): Remove when updating to 3.x, bower.json may be removed.
+    (function() {
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', '../../neon-animation/bower.json', false);
+    xhr.send();
+
+    const bowerJson = JSON.parse(xhr.responseText);
+    if (typeof bowerJson.version !== 'string' ||
+        parseInt(bowerJson.version.split('.')[0], 10) !== 1) {
+      document.write(
+          '<script src="../../web-animations-js/web-animations-next-lite.min.js"></scr' +
+          'ipt>');
+    }
+    })();
+  </script>
+
+  <link rel="import" href="../iron-dropdown-lite.html">
+  <link rel="import" href="../../neon-animation/animations/fade-in-animation.html">
+
+</head>
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+  }
+
+  .container {
+    display: block;
+    position: relative;
+    width: 100px;
+    height: 100px;
+    background-color: yellow;
+  }
+
+  .positioned {
+    position: absolute;
+    top: 40px;
+    left: 40px;
+  }
+
+  [slot="dropdown-content"] {
+    width: 50px;
+    height: 50px;
+    background-color: orange;
+  }
+
+  .big {
+    width: 3000px;
+    height: 3000px;
+  }
+</style>
+
+<body>
+
+  <test-fixture id="TrivialDropdown">
+    <template>
+      <iron-dropdown-lite>
+        <div slot="dropdown-content"></div>
+      </iron-dropdown-lite>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="NonLockingDropdown">
+    <template>
+      <iron-dropdown-lite allow-outside-scroll>
+        <div slot="dropdown-content">I don't lock scroll!</div>
+      </iron-dropdown-lite>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="AlignedDropdown">
+    <template>
+      <div class="container">
+        <iron-dropdown-lite horizontal-align="right" vertical-align="top">
+          <div slot="dropdown-content" class="big"></div>
+        </iron-dropdown-lite>
+      </div>
+    </template>
+  </test-fixture>
+
+  <!-- Absolutely position the dropdown so that it has enough space to move around -->
+  <test-fixture id="OffsetDropdownTopLeft">
+    <template>
+      <div class="container positioned">
+        <iron-dropdown-lite>
+          <div slot="dropdown-content"></div>
+        </iron-dropdown-lite>
+      </div>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="OffsetDropdownBottomRight">
+    <template>
+      <div class="container positioned">
+        <iron-dropdown-lite horizontal-align="right" vertical-align="bottom">
+          <div slot="dropdown-content"></div>
+        </iron-dropdown-lite>
+      </div>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="FocusableContentDropdown">
+    <template>
+      <iron-dropdown-lite>
+        <div slot="dropdown-content" tabindex="0">
+          <div class="subcontent" tabindex="0"></div>
+        </div>
+      </iron-dropdown-lite>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="RTLDropdownLeft">
+    <template>
+      <div dir="rtl" class="container">
+        <iron-dropdown-lite>
+          <div slot="dropdown-content"></div>
+        </iron-dropdown-lite>
+      </div>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="RTLDropdownRight">
+    <template>
+      <div dir="rtl" class="container">
+        <iron-dropdown-lite horizontal-align="right">
+          <div slot="dropdown-content"></div>
+        </iron-dropdown-lite>
+      </div>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="sizingTarget">
+    <template>
+      <iron-dropdown-lite>
+        <div slot="dropdown-content">
+          <div class="subcontent"></div>
+        </div>
+      </iron-dropdown-lite>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="EmptyDropdown">
+    <template>
+      <iron-dropdown-lite></iron-dropdown-lite>
+    </template>
+  </test-fixture>
+
+  <script>
+    function elementIsVisible(element) {
+      var contentRect = element.getBoundingClientRect();
+      var computedStyle = window.getComputedStyle(element);
+
+      return computedStyle.display !== 'none' && contentRect.width > 0 &&
+          contentRect.height > 0;
+    }
+
+    function runAfterOpen(overlay, callback) {
+      overlay.addEventListener('iron-overlay-opened', callback);
+      overlay.open();
+    }
+
+    function fireWheel(node, deltaX, deltaY) {
+      // IE 11 doesn't support WheelEvent, use CustomEvent.
+      var event = new CustomEvent(
+          'wheel', {cancelable: true, bubbles: true, composed: true});
+      event.deltaX = deltaX;
+      event.deltaY = deltaY;
+      node.dispatchEvent(event);
+      return event;
+    }
+
+    function dispatchScroll(target, scrollLeft, scrollTop) {
+      target.scrollLeft = scrollLeft;
+      target.scrollTop = scrollTop;
+      target.dispatchEvent(
+          new CustomEvent('scroll', {bubbles: true, composed: true}));
+    }
+
+    suite('<iron-dropdown-lite>', function() {
+      var dropdown;
+      var content;
+
+      suite('basic', function() {
+        setup(function() {
+          dropdown = fixture('TrivialDropdown');
+          content =
+              Polymer.dom(dropdown).querySelector('[slot="dropdown-content"]');
+        });
+
+        test('effectively hides the dropdown content', function() {
+          expect(elementIsVisible(content)).to.be.equal(false);
+        });
+
+        test('shows dropdown content when opened', function(done) {
+          runAfterOpen(dropdown, function() {
+            expect(elementIsVisible(content)).to.be.equal(true);
+            done();
+          });
+        });
+
+        test('hides dropdown content when outside is clicked', function(done) {
+          runAfterOpen(dropdown, function() {
+            expect(elementIsVisible(content)).to.be.equal(true);
+            dropdown.addEventListener('iron-overlay-closed', function() {
+              expect(elementIsVisible(content)).to.be.equal(false);
+              done();
+            });
+            MockInteractions.tap(dropdown.parentNode);
+          });
+        });
+
+        suite('when content is focusable', function() {
+          setup(function() {
+            dropdown = fixture('FocusableContentDropdown');
+            content =
+                Polymer.dom(dropdown).querySelector('[slot="dropdown-content"]');
+          });
+          test('focuses the content when opened', function(done) {
+            runAfterOpen(dropdown, function() {
+              expect(document.activeElement).to.be.equal(content);
+              done();
+            });
+          });
+
+          test('focuses a configured focus target', function(done) {
+            var focusableChild =
+                Polymer.dom(content).querySelector('div[tabindex]');
+            dropdown.focusTarget = focusableChild;
+
+            runAfterOpen(dropdown, function() {
+              expect(document.activeElement).to.not.be.equal(content);
+              expect(document.activeElement).to.be.equal(focusableChild);
+              done();
+            });
+          });
+        });
+
+        suite('when dropdown is empty', function() {
+          test('keeps the sizingTarget default value', function() {
+            dropdown = fixture('EmptyDropdown');
+            expect(dropdown.sizingTarget).to.be.equal(dropdown);
+          });
+        });
+      });
+
+      suite('locking scroll', function() {
+        var bigDiv, scrollTarget;
+        suiteSetup(function() {
+          bigDiv = document.createElement('div');
+          bigDiv.classList.add('big');
+          document.body.appendChild(bigDiv);
+          // Need to discover if html or body is scrollable.
+          // Here we are sure the page is scrollable.
+          document.documentElement.scrollTop = 1;
+          if (document.documentElement.scrollTop === 1) {
+            document.documentElement.scrollTop = 0;
+            scrollTarget = document.documentElement;
+          } else {
+            scrollTarget = document.body;
+          }
+        });
+
+        suiteTeardown(function() {
+          document.body.removeChild(bigDiv);
+        });
+
+        setup(function() {
+          dropdown = fixture('TrivialDropdown');
+        });
+
+        teardown(function() {
+          dispatchScroll(scrollTarget, 0, 0);
+        });
+
+        test('should lock, only once', function(done) {
+          var openCount = 0;
+          runAfterOpen(dropdown, function() {
+            expect(Polymer.IronDropdownScrollManager._lockingElements.length)
+                .to.be.equal(1);
+            expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(
+                       document.body))
+                .to.be.equal(true);
+            expect(fireWheel(document.body, 0, 10).defaultPrevented)
+                .to.be.equal(true);
+
+            if (openCount === 0) {
+              // This triggers a second `pushScrollLock` with the same element,
+              // however that should not add the element to the `_lockingElements`
+              // stack twice
+              dropdown.close();
+              dropdown.open();
+            } else {
+              done();
+            }
+            openCount++;
+          });
+        });
+
+        test('should lock scroll', function(done) {
+          runAfterOpen(dropdown, function() {
+            dispatchScroll(scrollTarget, 10, 10);
+            assert.equal(scrollTarget.scrollTop, 0, 'scrollTop ok');
+            assert.equal(scrollTarget.scrollLeft, 0, 'scrollLeft ok');
+            done();
+          });
+        });
+
+        test('can be disabled with `allowOutsideScroll`', function(done) {
+          dropdown.allowOutsideScroll = true;
+          runAfterOpen(dropdown, function() {
+            dispatchScroll(scrollTarget, 10, 10);
+            assert.equal(scrollTarget.scrollTop, 10, 'scrollTop ok');
+            assert.equal(scrollTarget.scrollLeft, 10, 'scrollLeft ok');
+            done();
+          });
+        });
+      });
+
+      suite('non locking scroll', function() {
+        setup(function() {
+          dropdown = fixture('NonLockingDropdown');
+        });
+
+        test('can be disabled with `allowOutsideScroll`', function(done) {
+          runAfterOpen(dropdown, function() {
+            expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(
+                       document.body))
+                .to.be.equal(false);
+            expect(fireWheel(document.body, 0, 10).defaultPrevented)
+                .to.be.equal(false);
+            done();
+          });
+        });
+      });
+
+      suite('aligned dropdown', function() {
+        var parent;
+        var parentRect;
+        var dropdownRect;
+
+        setup(function() {
+          parent = fixture('AlignedDropdown');
+          dropdown = parent.querySelector('iron-dropdown-lite');
+          parentRect = parent.getBoundingClientRect();
+        });
+
+        test('can be re-aligned to the right and the top', function(done) {
+          runAfterOpen(dropdown, function() {
+            dropdownRect = dropdown.getBoundingClientRect();
+            assert.equal(dropdownRect.top, parentRect.top, 'top ok');
+            assert.equal(dropdownRect.left, 0, 'left ok');
+            assert.equal(dropdownRect.bottom, window.innerHeight, 'bottom ok');
+            assert.equal(dropdownRect.right, parentRect.right, 'right ok');
+            done();
+          });
+        });
+
+        test('can be re-aligned to the bottom', function(done) {
+          dropdown.verticalAlign = 'bottom';
+          runAfterOpen(dropdown, function() {
+            dropdownRect = dropdown.getBoundingClientRect();
+            assert.equal(dropdownRect.top, 0, 'top ok');
+            assert.equal(dropdownRect.left, 0, 'left ok');
+            assert.equal(dropdownRect.bottom, parentRect.bottom, 'bottom ok');
+            assert.equal(dropdownRect.right, parentRect.right, 'right ok');
+            done();
+          });
+        });
+
+        test('handles parent\'s stacking context', function(done) {
+          // This will create a new stacking context.
+          parent.style.transform = 'translateZ(0)';
+          runAfterOpen(dropdown, function() {
+            dropdownRect = dropdown.getBoundingClientRect();
+            assert.equal(dropdownRect.top, parentRect.top, 'top ok');
+            assert.equal(dropdownRect.left, 0, 'left ok');
+            assert.equal(dropdownRect.bottom, window.innerHeight, 'bottom ok');
+            assert.equal(dropdownRect.right, parentRect.right, 'right ok');
+            done();
+          });
+        });
+      });
+
+      suite('when align is left/top, with an offset', function() {
+        var dropdownRect;
+        var offsetDropdownRect;
+        setup(function() {
+          var parent = fixture('OffsetDropdownTopLeft');
+          dropdown = parent.querySelector('iron-dropdown-lite');
+        });
+
+        test('can be offset towards the bottom right', function(done) {
+          runAfterOpen(dropdown, function() {
+            dropdownRect = dropdown.getBoundingClientRect();
+            dropdown.verticalOffset = 10;
+            dropdown.horizontalOffset = 10;
+            // Force refit instead of waiting for requestAnimationFrame.
+            dropdown.refit();
+            offsetDropdownRect = dropdown.getBoundingClientRect();
+            // verticalAlign is top, so a positive offset moves down.
+            assert.equal(dropdownRect.top + 10, offsetDropdownRect.top, 'top ok');
+            // horizontalAlign is left, so a positive offset moves to the right.
+            assert.equal(
+                dropdownRect.left + 10, offsetDropdownRect.left, 'left ok');
+            done();
+          });
+        });
+
+        test('can be offset towards the top left', function(done) {
+          runAfterOpen(dropdown, function() {
+            dropdownRect = dropdown.getBoundingClientRect();
+            dropdown.verticalOffset = -10;
+            dropdown.horizontalOffset = -10;
+            // Force refit instead of waiting for requestAnimationFrame.
+            dropdown.refit();
+            offsetDropdownRect = dropdown.getBoundingClientRect();
+            // verticalAlign is top, so a negative offset moves up.
+            assert.equal(dropdownRect.top - 10, offsetDropdownRect.top, 'top ok');
+            // horizontalAlign is left, so a negative offset moves to the left.
+            assert.equal(
+                dropdownRect.left - 10, offsetDropdownRect.left, 'left ok');
+            done();
+          });
+        });
+      });
+
+      suite('when align is right/bottom, with an offset', function() {
+        var dropdownRect;
+        var offsetDropdownRect;
+        setup(function() {
+          var parent = fixture('OffsetDropdownBottomRight');
+          dropdown = parent.querySelector('iron-dropdown-lite');
+        });
+
+        test('can be offset towards the top left', function(done) {
+          runAfterOpen(dropdown, function() {
+            dropdownRect = dropdown.getBoundingClientRect();
+            dropdown.verticalOffset = 10;
+            dropdown.horizontalOffset = 10;
+            // Force refit instead of waiting for requestAnimationFrame.
+            dropdown.refit();
+            offsetDropdownRect = dropdown.getBoundingClientRect();
+            // verticalAlign is bottom, so a positive offset moves up.
+            assert.equal(
+                dropdownRect.bottom - 10, offsetDropdownRect.bottom, 'bottom ok');
+            // horizontalAlign is right, so a positive offset moves to the left.
+            assert.equal(
+                dropdownRect.right - 10, offsetDropdownRect.right, 'right ok');
+            done();
+          });
+        });
+
+        test('can be offset towards the bottom right', function(done) {
+          runAfterOpen(dropdown, function() {
+            dropdownRect = dropdown.getBoundingClientRect();
+            dropdown.verticalOffset = -10;
+            dropdown.horizontalOffset = -10;
+            // Force refit instead of waiting for requestAnimationFrame.
+            dropdown.refit();
+            offsetDropdownRect = dropdown.getBoundingClientRect();
+            // verticalAlign is bottom, so a negative offset moves down.
+            assert.equal(
+                dropdownRect.bottom + 10, offsetDropdownRect.bottom, 'bottom ok');
+            // horizontalAlign is right, so a positive offset moves to the right.
+            assert.equal(
+                dropdownRect.right + 10, offsetDropdownRect.right, 'right ok');
+            done();
+          });
+        });
+      });
+
+      suite('RTL', function() {
+        var dropdownRect;
+
+        test('with horizontalAlign=left', function(done) {
+          var parent = fixture('RTLDropdownLeft');
+          dropdown = parent.querySelector('iron-dropdown-lite');
+          runAfterOpen(dropdown, function() {
+            // In RTL, if `horizontalAlign` is "left", that's the same as
+            // being right-aligned in LTR. So the dropdown should be in the top
+            // right corner.
+            dropdownRect = dropdown.getBoundingClientRect();
+            expect(dropdownRect.top).to.be.equal(0);
+            expect(dropdownRect.right).to.be.equal(100);
+            done();
+          });
+        });
+
+        test('with horizontalAlign=right', function(done) {
+          var parent = fixture('RTLDropdownRight');
+          dropdown = parent.querySelector('iron-dropdown-lite');
+          runAfterOpen(dropdown, function() {
+            // In RTL, if `horizontalAlign` is "right", that's the same as
+            // being left-aligned in LTR. So the dropdown should be in the top
+            // left corner.
+            dropdownRect = dropdown.getBoundingClientRect();
+            expect(dropdownRect.top).to.be.equal(0);
+            expect(dropdownRect.left).to.be.equal(0);
+            done();
+          });
+        });
+      });
+
+      suite('sizing target', function() {
+        setup(function() {
+          dropdown = fixture('sizingTarget');
+          content =
+              Polymer.dom(dropdown).querySelector('[slot="dropdown-content"]');
+        });
+
+        test('sizingTarget is the content element by default', function(done) {
+          runAfterOpen(dropdown, function() {
+            expect(dropdown.sizingTarget).to.be.equal(content);
+            expect(content.style.maxHeight).to.be.not.empty;
+            expect(content.style.maxWidth).to.be.not.empty;
+            done();
+          });
+        });
+
+        test('sizingTarget can be set to a child element', function(done) {
+          var subcontent = Polymer.dom(dropdown).querySelector('.subcontent');
+          dropdown.sizingTarget = subcontent;
+
+          runAfterOpen(dropdown, function() {
+            expect(dropdown.sizingTarget).to.be.equal(subcontent);
+            expect(subcontent.style.maxHeight).to.be.not.empty;
+            expect(subcontent.style.maxWidth).to.be.not.empty;
+            done();
+          });
+        });
+      });
+    });
+  </script>
+</body>
+
+</html>

From 017f1ecbac99b46872d62fc14e669a211f3dc50c Mon Sep 17 00:00:00 2001
From: Elliott Marquez <emarquez@google.com>
Date: Fri, 11 Jan 2019 17:12:48 -0800
Subject: [PATCH 3/5] run update types

---
 iron-dropdown-lite.d.ts | 186 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 186 insertions(+)
 create mode 100644 iron-dropdown-lite.d.ts

diff --git a/iron-dropdown-lite.d.ts b/iron-dropdown-lite.d.ts
new file mode 100644
index 0000000..16c494b
--- /dev/null
+++ b/iron-dropdown-lite.d.ts
@@ -0,0 +1,186 @@
+/**
+ * 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):
+ *   iron-dropdown-lite.html
+ */
+
+/// <reference path="../polymer/types/polymer.d.ts" />
+/// <reference path="../iron-behaviors/iron-control-state.d.ts" />
+/// <reference path="../iron-overlay-behavior/iron-overlay-behavior.d.ts" />
+/// <reference path="iron-dropdown-scroll-manager.d.ts" />
+
+/**
+ * `<iron-dropdown>` is a generalized element that is useful when you have
+ * hidden content (`dropdown-content`) that is revealed due to some change in
+ * state that should cause it to do so.
+ *
+ * Note that this is a low-level element intended to be used as part of other
+ * composite elements that cause dropdowns to be revealed.
+ *
+ * Examples of elements that might be implemented using an `iron-dropdown`
+ * include comboboxes, menubuttons, selects. The list goes on.
+ *
+ * The `<iron-dropdown>` element exposes attributes that allow the position
+ * of the `dropdown-content` relative to the `dropdown-trigger` to be
+ * configured.
+ *
+ *     <iron-dropdown horizontal-align="right" vertical-align="top">
+ *       <div slot="dropdown-content">Hello!</div>
+ *     </iron-dropdown>
+ *
+ * In the above example, the `<div>` assigned to the `dropdown-content` slot will be
+ * hidden until the dropdown element has `opened` set to true, or when the `open`
+ * method is called on the element.
+ *
+ * ### Changes in 2.0
+ * - Removed the private property `_focusTarget` which was deprecated.
+ * - Distribution moved from the `class="dropdown-content"` to `slot="dropdown-content"`.
+ * - `<iron-dropdown>` animations are not based on the deprecated `neon-animation` component, and use CSS keyframe animations
+ *
+ * ### Animations
+ *
+ * Set the `entry-animation` and/or `exit-animation` attributes to add an animation when the dialog
+ * is opened or closed. Included in the component are:
+ * - fade-in-animation
+ * - fade-out-animation
+ * - scale-up-animation
+ * - scale-down-animation
+ *
+ * These animations are not based on the deprecated `neon-animation` component, and use CSS keyframe animations.
+ * This change reduces code size, and uses the platform. You can implement custom entry/exit animations using
+ * CSS keyframe animations; define the animation keyframes, a CSS class for the animation, and assign the class to the `entry/exit-animation`, e.g.
+ *
+ *     <style>
+ *       \@keyframes expand-animation {
+ *         from {
+ *           max-height: 10px;
+ *           opacity: 0;
+ *         }
+ *         to {
+ *           max-height: 100px;
+ *         }
+ *       }
+ *
+ *       .expand-animation {
+ *         animation-name: expand-animation;
+ *         animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
+ *         animation-delay: 150ms;
+ *         animation-duration: 200ms;
+ *       }
+ *     </style>
+ *
+ *     <iron-dropdown entry-animation="expand-animation"
+ *                    exit-animation="fade-out-animation">
+ *       <div slot="dropdown-content">Hello!</div>
+ *     </iron-dropdown>
+ */
+interface IronDropdownLiteElement extends Polymer.Element, Polymer.IronControlState, Polymer.IronA11yKeysBehavior, Polymer.IronOverlayBehavior {
+
+  /**
+   * The orientation against which to align the dropdown content
+   * horizontally relative to the dropdown trigger.
+   * Overridden from `Polymer.IronFitBehavior`.
+   */
+  horizontalAlign: string|null|undefined;
+
+  /**
+   * The orientation against which to align the dropdown content
+   * vertically relative to the dropdown trigger.
+   * Overridden from `Polymer.IronFitBehavior`.
+   */
+  verticalAlign: string|null|undefined;
+
+  /**
+   * The class defining the entry animation.
+   */
+  entryAnimation: string|null|undefined;
+
+  /**
+   * The class defining the exit animation.
+   */
+  exitAnimation: string|null|undefined;
+
+  /**
+   * Deprecated, use `entryAnimation` and `exitAnimation` instead.
+   * `iron-dropdown` doesn't depend anymore on `neon-animation`, and this
+   * property is kept here to not break bindings. Setting it won't have
+   * effects on the animation.
+   */
+  animationConfig: object|null|undefined;
+
+  /**
+   * Deprecated, use `entryAnimation` instead.
+   * `iron-dropdown` doesn't depend anymore on `neon-animation`, and this
+   * property is kept here to not break bindings. Setting it won't have
+   * effects on the animation.
+   */
+  openAnimationConfig: object|null|undefined;
+
+  /**
+   * Deprecated, use `exitAnimation` instead.
+   * `iron-dropdown` doesn't depend anymore on `neon-animation`, and this
+   * property is kept here to not break bindings. Setting it won't have
+   * effects on the animation.
+   */
+  closeAnimationConfig: object|null|undefined;
+
+  /**
+   * If provided, this will be the element that will be focused when
+   * the dropdown opens.
+   */
+  focusTarget: object|null|undefined;
+
+  /**
+   * Set to true to disable animations when opening and closing the
+   * dropdown.
+   */
+  noAnimations: boolean|null|undefined;
+
+  /**
+   * By default, the dropdown will constrain scrolling on the page
+   * to itself when opened.
+   * Set to true in order to prevent scroll from being constrained
+   * to the dropdown when it opens.
+   * This property is a shortcut to set `scrollAction` to lock or refit.
+   * Prefer directly setting the `scrollAction` property.
+   */
+  allowOutsideScroll: boolean|null|undefined;
+
+  /**
+   * The element that is contained by the dropdown, if any.
+   *        
+   */
+  readonly containedElement: any;
+  ready(): void;
+  attached(): void;
+  detached(): void;
+
+  /**
+   * `iron-dropdown` doesn't depend anymore on `neon-animation`.
+   * This method was previously inherited from `Polymer.NeonAnimatableBehavior`,
+   * now is a no-op.
+   */
+  cancelAnimation(): void;
+
+  /**
+   * `iron-dropdown` doesn't depend anymore on `neon-animation`.
+   * This method was previously inherited from `Polymer.NeonAnimatableBehavior`,
+   * now is a no-op.
+   */
+  playAnimation(type?: string, cookie?: object): void;
+
+  /**
+   * `iron-dropdown` doesn't depend anymore on `neon-animation`.
+   * This method was previously inherited from `Polymer.NeonAnimatableBehavior`,
+   * now is a no-op.
+   */
+  getAnimationConfig(type: any): any;
+}
+
+interface HTMLElementTagNameMap {
+  "iron-dropdown-lite": IronDropdownLiteElement;
+}

From 0cc8322650ca5aca8304f4d39a60b2f28ba11671 Mon Sep 17 00:00:00 2001
From: Elliott Marquez <emarquez@google.com>
Date: Fri, 11 Jan 2019 17:12:57 -0800
Subject: [PATCH 4/5] format iron-dropdown-lite

---
 iron-dropdown-lite.html | 549 +++++++++++++++++++---------------------
 test/index.html         |   4 +-
 2 files changed, 266 insertions(+), 287 deletions(-)

diff --git a/iron-dropdown-lite.html b/iron-dropdown-lite.html
index 63060f6..820a693 100644
--- a/iron-dropdown-lite.html
+++ b/iron-dropdown-lite.html
@@ -158,327 +158,306 @@
 
   <script>
     (function() {
-      'use strict';
-
-      Polymer({
-        is: 'iron-dropdown-lite',
-
-        behaviors: [
-          Polymer.IronControlState,
-          Polymer.IronA11yKeysBehavior,
-          Polymer.IronOverlayBehavior,
-        ],
-
-        properties: {
-          /**
-           * The orientation against which to align the dropdown content
-           * horizontally relative to the dropdown trigger.
-           * Overridden from `Polymer.IronFitBehavior`.
-           */
-          horizontalAlign: {
-            type: String,
-            value: 'left',
-            reflectToAttribute: true
-          },
-
-          /**
-           * The orientation against which to align the dropdown content
-           * vertically relative to the dropdown trigger.
-           * Overridden from `Polymer.IronFitBehavior`.
-           */
-          verticalAlign: {
-            type: String,
-            value: 'top',
-            reflectToAttribute: true
-          },
-
-          /**
-           * The class defining the entry animation.
-           */
-          entryAnimation: {
-            type: String
-          },
-
-          /**
-           * The class defining the exit animation.
-           */
-          exitAnimation: {
-            type: String
-          },
-
-          /**
-           * Deprecated, use `entryAnimation` and `exitAnimation` instead.
-           * `iron-dropdown` doesn't depend anymore on `neon-animation`, and this property is kept
-           * here to not break bindings. Setting it won't have effects on the animation.
-           * @deprecated
-           */
-          animationConfig: {
-            type: Object
-          },
-
-          /**
-           * Deprecated, use `entryAnimation` instead.
-           * `iron-dropdown` doesn't depend anymore on `neon-animation`, and this property is kept
-           * here to not break bindings. Setting it won't have effects on the animation.
-           * @deprecated
-           */
-          openAnimationConfig: {
-            type: Object
-          },
-
-          /**
-           * Deprecated, use `exitAnimation` instead.
-           * `iron-dropdown` doesn't depend anymore on `neon-animation`, and this property is kept
-           * here to not break bindings. Setting it won't have effects on the animation.
-           * @deprecated
-           */
-          closeAnimationConfig: {
-            type: Object
-          },
-
-          /**
-           * If provided, this will be the element that will be focused when
-           * the dropdown opens.
-           */
-          focusTarget: {
-            type: Object
-          },
-
-          /**
-           * Set to true to disable animations when opening and closing the
-           * dropdown.
-           */
-          noAnimations: {
-            type: Boolean,
-            value: false
-          },
-
-          /**
-           * By default, the dropdown will constrain scrolling on the page
-           * to itself when opened.
-           * Set to true in order to prevent scroll from being constrained
-           * to the dropdown when it opens.
-           * This property is a shortcut to set `scrollAction` to lock or refit.
-           * Prefer directly setting the `scrollAction` property.
-           */
-          allowOutsideScroll: {
-            type: Boolean,
-            value: false,
-            observer: '_allowOutsideScrollChanged'
-          }
-        },
+    'use strict';
 
-        listeners: {
-          'animationend': '_onAnimationEnd'
-        },
+    Polymer({
+      is: 'iron-dropdown-lite',
 
-        observers: [
-          '_updateOverlayPosition(positionTarget, verticalAlign, horizontalAlign, verticalOffset, horizontalOffset)'
-        ],
+      behaviors: [
+        Polymer.IronControlState,
+        Polymer.IronA11yKeysBehavior,
+        Polymer.IronOverlayBehavior,
+      ],
 
+      properties: {
         /**
-         * The element that is contained by the dropdown, if any.
+         * The orientation against which to align the dropdown content
+         * horizontally relative to the dropdown trigger.
+         * Overridden from `Polymer.IronFitBehavior`.
          */
-        get containedElement() {
-          // Polymer 2.x returns slot.assignedNodes which can contain text nodes.
-          var nodes = Polymer.dom(this.$.content).getDistributedNodes();
-          for (var i = 0, l = nodes.length; i < l; i++) {
-            if (nodes[i].nodeType === Node.ELEMENT_NODE) {
-              return nodes[i];
-            }
-          }
-        },
-
-        ready: function() {
-          // Ensure scrollAction is set.
-          if (!this.scrollAction) {
-            this.scrollAction = this.allowOutsideScroll ? 'refit' : 'lock';
-          }
-          if (this.openAnimationConfig || this.closeAnimationConfig || this.animationConfig) {
-            console.warn('Configuring animations through animationConfig, openAnimationConfig, ' +
-              'or closeAnimationConfig is no longer supported. ' +
-              'Use entryAnimation and exitAnimation instead.');
-            // Set this for backwards-compat.
-            this.animationConfig = this.animationConfig || {
-              open: this.openAnimationConfig,
-              close: this.closeAnimationConfig
-            };
-          }
-          this._readied = true;
-        },
-
-        attached: function() {
-          if (!this.sizingTarget || this.sizingTarget === this) {
-            this.sizingTarget = this.containedElement || this;
-          }
-        },
-
-        detached: function() {
-          this._cancelAnimation();
-        },
+        horizontalAlign: {type: String, value: 'left', reflectToAttribute: true},
 
         /**
-         * `iron-dropdown` doesn't depend anymore on `neon-animation`.
-         * This method was previously inherited from `Polymer.NeonAnimatableBehavior`,
-         * now is a no-op.
-         * @deprecated
+         * The orientation against which to align the dropdown content
+         * vertically relative to the dropdown trigger.
+         * Overridden from `Polymer.IronFitBehavior`.
          */
-        cancelAnimation: function() {},
+        verticalAlign: {type: String, value: 'top', reflectToAttribute: true},
 
         /**
-         * `iron-dropdown` doesn't depend anymore on `neon-animation`.
-         * This method was previously inherited from `Polymer.NeonAnimatableBehavior`,
-         * now is a no-op.
-         * @param {string=} type
-         * @param {!Object=} cookie
-         * @deprecated
+         * The class defining the entry animation.
          */
-        playAnimation: function(type, cookie) {},
+        entryAnimation: {type: String},
 
         /**
-         * `iron-dropdown` doesn't depend anymore on `neon-animation`.
-         * This method was previously inherited from `Polymer.NeonAnimatableBehavior`,
-         * now is a no-op.
-         * @deprecated
+         * The class defining the exit animation.
          */
-        getAnimationConfig: function(type) { return []; },
+        exitAnimation: {type: String},
 
         /**
-         * Called when the value of `opened` changes.
-         * Overridden from `IronOverlayBehavior`
-         * @private
-         */
-        _openedChanged: function() {
-          if (this.opened && this.disabled) {
-            this.cancel();
-          } else {
-            this._cancelAnimation();
-            Polymer.IronOverlayBehaviorImpl._openedChanged.apply(this, arguments);
-          }
-        },
-
-        /**
-         * Overridden from `IronOverlayBehavior`.
-         * @private
-         */
-        _renderOpened: function() {
-          if (!this.noAnimations && this.entryAnimation) {
-            this._playAnimation(this.entryAnimation);
-          } else {
-            Polymer.IronOverlayBehaviorImpl._renderOpened.apply(this, arguments);
-          }
-        },
-
-        /**
-         * Overridden from `IronOverlayBehavior`.
-         * @private
+         * Deprecated, use `entryAnimation` and `exitAnimation` instead.
+         * `iron-dropdown` doesn't depend anymore on `neon-animation`, and this
+         * property is kept here to not break bindings. Setting it won't have
+         * effects on the animation.
+         * @deprecated
          */
-        _renderClosed: function() {
-          if (!this.noAnimations && this.exitAnimation) {
-            this._playAnimation(this.exitAnimation);
-          } else {
-            Polymer.IronOverlayBehaviorImpl._renderClosed.apply(this, arguments);
-          }
-        },
+        animationConfig: {type: Object},
 
         /**
-         * @private
+         * Deprecated, use `entryAnimation` instead.
+         * `iron-dropdown` doesn't depend anymore on `neon-animation`, and this
+         * property is kept here to not break bindings. Setting it won't have
+         * effects on the animation.
+         * @deprecated
          */
-        _cancelAnimation: function() {
-          if (this._pendingAnimation) {
-            this.classList.remove('animating');
-            this.classList.remove(this._pendingAnimation);
-            this._pendingAnimation = null;
-          }
-        },
+        openAnimationConfig: {type: Object},
 
         /**
-         * @param {!string} animation
-         * @private
+         * Deprecated, use `exitAnimation` instead.
+         * `iron-dropdown` doesn't depend anymore on `neon-animation`, and this
+         * property is kept here to not break bindings. Setting it won't have
+         * effects on the animation.
+         * @deprecated
          */
-        _playAnimation: function(animation) {
-          this.classList.add('animating');
-          this.classList.add(animation);
-          this._pendingAnimation = animation;
-          if (this._willAnimate() === false) {
-            console.info(animation + ' animation was not played');
-            this._onAnimationEnd();
-          }
-        },
+        closeAnimationConfig: {type: Object},
 
         /**
-         * @private
+         * If provided, this will be the element that will be focused when
+         * the dropdown opens.
          */
-        _willAnimate: function() {
-          // If CSS Class does not have animation-name considered not be an animation
-          var style = getComputedStyle(this);
-          return (style.getPropertyValue('animation-name') !== 'none' &&
-            style.getPropertyValue('animation-duration') !== '0ms');
-        },
+        focusTarget: {type: Object},
 
         /**
-         * Called when animation finishes on the dropdown (when opening or
-         * closing). Responsible for "completing" the process of opening or
-         * closing the dropdown by positioning it or setting its display to
-         * none.
-         * @param {Event=} event
-         * @private
+         * Set to true to disable animations when opening and closing the
+         * dropdown.
          */
-        _onAnimationEnd: function(event) {
-          if (event && event.target !== this) {
-            return;
-          }
-          // Removes the classes.
-          this._cancelAnimation();
-          if (this.opened) {
-            this._finishRenderOpened();
-          } else {
-            this._finishRenderClosed();
-          }
-        },
+        noAnimations: {type: Boolean, value: false},
 
         /**
-         * Updates the overlay position based on configured horizontal
-         * and vertical alignment.
-         * @private
+         * By default, the dropdown will constrain scrolling on the page
+         * to itself when opened.
+         * Set to true in order to prevent scroll from being constrained
+         * to the dropdown when it opens.
+         * This property is a shortcut to set `scrollAction` to lock or refit.
+         * Prefer directly setting the `scrollAction` property.
          */
-        _updateOverlayPosition: function() {
-          if (this.isAttached) {
-            // This triggers iron-resize, and iron-overlay-behavior will call refit if needed.
-            this.notifyResize();
+        allowOutsideScroll:
+            {type: Boolean, value: false, observer: '_allowOutsideScrollChanged'}
+      },
+
+      listeners: {'animationend': '_onAnimationEnd'},
+
+      observers: [
+        '_updateOverlayPosition(positionTarget, verticalAlign, horizontalAlign, verticalOffset, horizontalOffset)'
+      ],
+
+      /**
+       * The element that is contained by the dropdown, if any.
+       */
+      get containedElement() {
+        // Polymer 2.x returns slot.assignedNodes which can contain text nodes.
+        var nodes = Polymer.dom(this.$.content).getDistributedNodes();
+        for (var i = 0, l = nodes.length; i < l; i++) {
+          if (nodes[i].nodeType === Node.ELEMENT_NODE) {
+            return nodes[i];
           }
-        },
+        }
+      },
 
-        /**
-         * Sets scrollAction according to the value of allowOutsideScroll.
-         * Prefer setting directly scrollAction.
-         * @private
-         */
-        _allowOutsideScrollChanged: function(allowOutsideScroll) {
-          // Wait until initial values are all set.
-          if (!this._readied) {
-            return;
-          }
-          if (!allowOutsideScroll) {
-            this.scrollAction = 'lock';
-          } else if (!this.scrollAction || this.scrollAction === 'lock') {
-            this.scrollAction = 'refit';
-          }
-        },
+      ready: function() {
+        // Ensure scrollAction is set.
+        if (!this.scrollAction) {
+          this.scrollAction = this.allowOutsideScroll ? 'refit' : 'lock';
+        }
+        if (this.openAnimationConfig || this.closeAnimationConfig ||
+            this.animationConfig) {
+          console.warn(
+              'Configuring animations through animationConfig, openAnimationConfig, ' +
+              'or closeAnimationConfig is no longer supported. ' +
+              'Use entryAnimation and exitAnimation instead.');
+          // Set this for backwards-compat.
+          this.animationConfig = this.animationConfig ||
+              {open: this.openAnimationConfig, close: this.closeAnimationConfig};
+        }
+        this._readied = true;
+      },
 
-        /**
-         * Apply focus to focusTarget or containedElement
-         * @private
-         */
-        _applyFocus: function() {
-          var focusTarget = this.focusTarget || this.containedElement;
-          if (focusTarget && this.opened && !this.noAutoFocus) {
-            focusTarget.focus();
-          } else {
-            Polymer.IronOverlayBehaviorImpl._applyFocus.apply(this, arguments);
-          }
+      attached: function() {
+        if (!this.sizingTarget || this.sizingTarget === this) {
+          this.sizingTarget = this.containedElement || this;
         }
-      });
+      },
+
+      detached: function() {
+        this._cancelAnimation();
+      },
+
+      /**
+       * `iron-dropdown` doesn't depend anymore on `neon-animation`.
+       * This method was previously inherited from `Polymer.NeonAnimatableBehavior`,
+       * now is a no-op.
+       * @deprecated
+       */
+      cancelAnimation: function() {},
+
+      /**
+       * `iron-dropdown` doesn't depend anymore on `neon-animation`.
+       * This method was previously inherited from `Polymer.NeonAnimatableBehavior`,
+       * now is a no-op.
+       * @param {string=} type
+       * @param {!Object=} cookie
+       * @deprecated
+       */
+      playAnimation: function(type, cookie) {},
+
+      /**
+       * `iron-dropdown` doesn't depend anymore on `neon-animation`.
+       * This method was previously inherited from `Polymer.NeonAnimatableBehavior`,
+       * now is a no-op.
+       * @deprecated
+       */
+      getAnimationConfig: function(type) {
+        return [];
+      },
+
+      /**
+       * Called when the value of `opened` changes.
+       * Overridden from `IronOverlayBehavior`
+       * @private
+       */
+      _openedChanged: function() {
+        if (this.opened && this.disabled) {
+          this.cancel();
+        } else {
+          this._cancelAnimation();
+          Polymer.IronOverlayBehaviorImpl._openedChanged.apply(this, arguments);
+        }
+      },
+
+      /**
+       * Overridden from `IronOverlayBehavior`.
+       * @private
+       */
+      _renderOpened: function() {
+        if (!this.noAnimations && this.entryAnimation) {
+          this._playAnimation(this.entryAnimation);
+        } else {
+          Polymer.IronOverlayBehaviorImpl._renderOpened.apply(this, arguments);
+        }
+      },
+
+      /**
+       * Overridden from `IronOverlayBehavior`.
+       * @private
+       */
+      _renderClosed: function() {
+        if (!this.noAnimations && this.exitAnimation) {
+          this._playAnimation(this.exitAnimation);
+        } else {
+          Polymer.IronOverlayBehaviorImpl._renderClosed.apply(this, arguments);
+        }
+      },
+
+      /**
+       * @private
+       */
+      _cancelAnimation: function() {
+        if (this._pendingAnimation) {
+          this.classList.remove('animating');
+          this.classList.remove(this._pendingAnimation);
+          this._pendingAnimation = null;
+        }
+      },
+
+      /**
+       * @param {!string} animation
+       * @private
+       */
+      _playAnimation: function(animation) {
+        this.classList.add('animating');
+        this.classList.add(animation);
+        this._pendingAnimation = animation;
+        if (this._willAnimate() === false) {
+          console.info(animation + ' animation was not played');
+          this._onAnimationEnd();
+        }
+      },
+
+      /**
+       * @private
+       */
+      _willAnimate: function() {
+        // If CSS Class does not have animation-name considered not be an animation
+        var style = getComputedStyle(this);
+        return (
+            style.getPropertyValue('animation-name') !== 'none' &&
+            style.getPropertyValue('animation-duration') !== '0ms');
+      },
+
+      /**
+       * Called when animation finishes on the dropdown (when opening or
+       * closing). Responsible for "completing" the process of opening or
+       * closing the dropdown by positioning it or setting its display to
+       * none.
+       * @param {Event=} event
+       * @private
+       */
+      _onAnimationEnd: function(event) {
+        if (event && event.target !== this) {
+          return;
+        }
+        // Removes the classes.
+        this._cancelAnimation();
+        if (this.opened) {
+          this._finishRenderOpened();
+        } else {
+          this._finishRenderClosed();
+        }
+      },
+
+      /**
+       * Updates the overlay position based on configured horizontal
+       * and vertical alignment.
+       * @private
+       */
+      _updateOverlayPosition: function() {
+        if (this.isAttached) {
+          // This triggers iron-resize, and iron-overlay-behavior will call refit if
+          // needed.
+          this.notifyResize();
+        }
+      },
+
+      /**
+       * Sets scrollAction according to the value of allowOutsideScroll.
+       * Prefer setting directly scrollAction.
+       * @private
+       */
+      _allowOutsideScrollChanged: function(allowOutsideScroll) {
+        // Wait until initial values are all set.
+        if (!this._readied) {
+          return;
+        }
+        if (!allowOutsideScroll) {
+          this.scrollAction = 'lock';
+        } else if (!this.scrollAction || this.scrollAction === 'lock') {
+          this.scrollAction = 'refit';
+        }
+      },
+
+      /**
+       * Apply focus to focusTarget or containedElement
+       * @private
+       */
+      _applyFocus: function() {
+        var focusTarget = this.focusTarget || this.containedElement;
+        if (focusTarget && this.opened && !this.noAutoFocus) {
+          focusTarget.focus();
+        } else {
+          Polymer.IronOverlayBehaviorImpl._applyFocus.apply(this, arguments);
+        }
+      }
+    });
     })();
   </script>
 </dom-module>
\ No newline at end of file
diff --git a/test/index.html b/test/index.html
index f0de1c1..6913864 100644
--- a/test/index.html
+++ b/test/index.html
@@ -18,8 +18,8 @@
 <body>
   <script>
     WCT.loadSuites([
-      'iron-dropdown.html?wc-shadydom=true&wc-ce=true',  // shady
-      'iron-dropdown.html?dom=shadow',                   // shadow
+      'iron-dropdown.html?wc-shadydom=true&wc-ce=true',       // shady
+      'iron-dropdown.html?dom=shadow',                        // shadow
       'iron-dropdown-lite.html?wc-shadydom=true&wc-ce=true',  // shady
       'iron-dropdown-lite.html?dom=shadow',                   // shadow
     ]);

From 2b36878b123b1a1454ec32945ecd69f833f1b60e Mon Sep 17 00:00:00 2001
From: Elliott Marquez <emarquez@google.com>
Date: Fri, 11 Jan 2019 19:42:26 -0800
Subject: [PATCH 5/5] demo for iron-dropdown-lite

---
 bower.json                   |   2 +-
 demo/iron-dropdown-lite.html | 210 +++++++++++++++++++++++++++++++++++
 demo/x-select-lite.html      |  72 ++++++++++++
 iron-dropdown-lite.html      |   2 +-
 4 files changed, 284 insertions(+), 2 deletions(-)
 create mode 100644 demo/iron-dropdown-lite.html
 create mode 100644 demo/x-select-lite.html

diff --git a/bower.json b/bower.json
index bb8147d..df81584 100644
--- a/bower.json
+++ b/bower.json
@@ -10,7 +10,7 @@
     "web-component",
     "polymer"
   ],
-  "main": "iron-dropdown.html",
+  "main": ["iron-dropdown.html", "iron-dropdown-lite.html"],
   "private": true,
   "repository": {
     "type": "git",
diff --git a/demo/iron-dropdown-lite.html b/demo/iron-dropdown-lite.html
new file mode 100644
index 0000000..f3f54d5
--- /dev/null
+++ b/demo/iron-dropdown-lite.html
@@ -0,0 +1,210 @@
+<!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>iron-dropdown-lite</title>
+
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+  <link rel="import" href="../../iron-image/iron-image.html">
+  <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+  <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
+
+  <link rel="import" href="x-select-lite.html">
+
+  <custom-style><style is="custom-style" include="demo-pages-shared-styles">
+    demo-snippet {
+      --demo-snippet-code: {
+        max-height: 250px;
+      }
+    }
+
+    [slot="dropdown-content"] {
+      background-color: white;
+      line-height: 20px;
+      border-radius: 3px;
+      box-shadow: 0px 2px 6px #ccc;
+    }
+
+    .random-content {
+      padding: 1.5em 2em;
+      max-width: 250px;
+    }
+
+    button {
+      border: 1px solid #ccc;
+      background-color: #eee;
+      padding: 1em;
+      border-radius: 3px;
+      cursor: pointer;
+    }
+
+    button:focus {
+      outline: none;
+      border-color: blue;
+    }
+
+    ul, li {
+      display: block;
+      position: relative;
+      margin: 0;
+      padding: 0;
+    }
+
+    a {
+      display: block;
+      position: relative;
+      padding: 1em;
+      text-decoration: none;
+    }
+
+    li:not(:last-of-type) {
+      border-bottom: 1px solid #eee;
+    }
+
+    a:hover {
+      text-decoration: underline;
+    }
+
+    iron-image {
+      padding: 1em;
+      background-color: #fff;
+      box-shadow: 0px 2px 6px #ccc;
+      border-radius: 3px;
+    }
+  </style></custom-style>
+</head>
+
+<body unresolved class="centered">
+  <h3>Basic</h3>
+  <demo-snippet class="centered-demo">
+    <template>
+      <x-select-lite>
+        <button slot="dropdown-trigger">Basic</button>
+        <div slot="dropdown-content" class="random-content">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </div>
+      </x-select-lite>
+      <x-select-lite>
+        <button slot="dropdown-trigger">Overflowing</button>
+        <div slot="dropdown-content" class="random-content">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
+            quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
+            eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure
+            reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
+        </div>
+      </x-select-lite>
+    </template>
+  </demo-snippet>
+
+  <h3>Alignment</h3>
+  <demo-snippet class="centered-demo">
+    <template>
+      <x-select-lite vertical-align="bottom">
+        <button slot="dropdown-trigger">Bottom-left Aligned</button>
+        <div slot="dropdown-content" class="random-content">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </div>
+      </x-select-lite>
+      <x-select-lite horizontal-align="right" vertical-align="top">
+        <button slot="dropdown-trigger">Top-right Aligned</button>
+        <div slot="dropdown-content" class="random-content">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </div>
+      </x-select-lite>
+    </template>
+  </demo-snippet>
+
+  <h3>Scroll actions</h3>
+  <demo-snippet class="centered-demo">
+    <template>
+      <x-select-lite scroll-action="refit">
+        <button slot="dropdown-trigger">Refit on scroll</button>
+        <div slot="dropdown-content" class="random-content">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </div>
+      </x-select-lite>
+      <x-select-lite scroll-action="cancel">
+        <button slot="dropdown-trigger">Close on scroll</button>
+        <div slot="dropdown-content" class="random-content">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </div>
+      </x-select-lite>
+    </template>
+  </demo-snippet>
+
+  <h3>Content</h3>
+  <demo-snippet class="centered-demo">
+    <template>
+      <x-select-lite horizontal-align="left" vertical-align="top">
+        <button slot="dropdown-trigger">Content</button>
+        <iron-image slot="dropdown-content" src="../../iron-image/demo/polymer.svg"></iron-image>
+      </x-select-lite>
+      <x-select-lite horizontal-align="right" vertical-align="top">
+        <button slot="dropdown-trigger">Unordered list</button>
+        <ul slot="dropdown-content" tabindex="0">
+          <dom-repeat id="Demo">
+            <template is="dom-repeat">
+              <li><a href="javascript:void(0)">[[item]]</a></li>
+            </template>
+          </dom-repeat>
+        </ul>
+      </x-select-lite>
+
+      <script>
+        Demo.items = [
+          'allosaurus',
+          'brontosaurus',
+          'carcharodontosaurus',
+          'diplodocus',
+          'ekrixinatosaurus',
+          'fukuiraptor',
+          'gallimimus',
+          'hadrosaurus',
+          'iguanodon',
+          'jainosaurus',
+          'kritosaurus',
+          'liaoceratops',
+          'megalosaurus',
+          'nemegtosaurus',
+          'ornithomimus',
+          'protoceratops',
+          'quetecsaurus',
+          'rajasaurus',
+          'stegosaurus',
+          'triceratops',
+          'utahraptor',
+          'vulcanodon',
+          'wannanosaurus',
+          'xenoceratops',
+          'yandusaurus',
+          'zephyrosaurus'
+        ];
+        // Support hybrid mode.
+        Demo.firstElementChild.items = Demo.items;
+      </script>
+    </template>
+  </demo-snippet>
+
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/demo/x-select-lite.html b/demo/x-select-lite.html
new file mode 100644
index 0000000..1b6da41
--- /dev/null
+++ b/demo/x-select-lite.html
@@ -0,0 +1,72 @@
+<!--
+@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="../iron-dropdown-lite.html">
+
+<dom-module id="x-select-lite">
+  <template>
+    <style>
+      :host {
+        display: inline-block;
+        margin: 1em;
+      }
+
+      @keyframes expand-animation {
+        from {
+          max-height: 50px;
+          opacity: 0;
+        }
+        to {
+          max-height: 100vh;
+        }
+      }
+
+      .expand-animation {
+        animation-name: expand-animation;
+        animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
+        animation-delay: 150ms;
+        animation-duration: 200ms;
+      }
+
+      .fade-out-animation {
+        animation-duration: 150ms;
+      }
+    </style>
+    <div on-tap="open">
+      <slot name="dropdown-trigger"></slot>
+    </div>
+    <iron-dropdown-lite
+        id="dropdown"
+        vertical-align="[[verticalAlign]]"
+        horizontal-align="[[horizontalAlign]]"
+        disabled="[[disabled]]"
+        scroll-action="[[scrollAction]]"
+        entry-animation="expand-animation"
+        exit-animation="fade-out-animation">
+      <slot name="dropdown-content" slot="dropdown-content"></slot>
+    </iron-dropdown-lite>
+  </template>
+  <script>
+    Polymer({
+      is: 'x-select-lite',
+
+      properties: {
+        verticalAlign: String,
+        horizontalAlign: String,
+        disabled: Boolean,
+        scrollAction: String,
+      },
+
+      open: function() {
+        this.$.dropdown.open();
+      }
+    });
+  </script>
+</dom-module>
\ No newline at end of file
diff --git a/iron-dropdown-lite.html b/iron-dropdown-lite.html
index 820a693..4aebc8c 100644
--- a/iron-dropdown-lite.html
+++ b/iron-dropdown-lite.html
@@ -79,7 +79,7 @@
       <div slot="dropdown-content">Hello!</div>
     </iron-dropdown>
 
-@demo demo/index.html
+@demo demo/iron-dropdown-lite.html
 -->
 
 <dom-module id="iron-dropdown-lite">