Contact us Create app

Directory

← Back

dropdown

Polymer-based web component for a D2L dropdown

Author

Rating

Links

Popularity

<100

[ This description is mirrored from README.md at github.com/BrightspaceUI/dropdown on 2019-05-22 ]

Looking for SASS-based vui-dropdown? It's over here.

d2l-dropdown

Published on webcomponents.org Bower version Build status

A Polymer-based web component for dropdown/flyouts.

Installation

d2l-dropdown can be installed from Bower:

bower install d2l-dropdown

Usage

Include the webcomponents.js "lite" polyfill (for browsers who don't natively support web components), then import the opener and content components as needed:

<head>
  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
</head>

Generic Opener

d2l-dropdown is a generic opener for dropdown content (d2l-dropdown-content or d2l-dropdown-menu) enabling alternate opener implementation using existing elements/components. Provide and indicate your own opener element with the class attribute value d2l-dropdown-opener. Wire-up is automatic.

<d2l-dropdown>
  <button class="d2l-dropdown-opener">Open!</button>
  <d2l-dropdown-content>
    Some content...
  </d2l-dropdown-content>
</d2l-dropdown>

If the dropdown is initially empty when it's opened, the dropdown pointer will not be positioned correctly. In such cases, the no-auto-open attribute may be added to the opener, enabling you to take control of when the dropdown is actually opened:

<d2l-dropdown no-auto-open>
  ...
</d2l-dropdown>

dropdown.addEventListener('click', function() {
  // fetch some content
  ...
  // take control of when the dropdown is actually opened
  dropdown.toggleOpen();
});

Button Opener

d2l-dropdown-button is a d2l-button opener for dropdown content (d2l-dropdown-content or d2l-dropdown-menu). Provide text for the button and content component as needed.

<d2l-dropdown-button text="Open!" primary>
  <d2l-dropdown-content>
    Some content...
  </d2l-dropdown-content>
</d2l-dropdown-button>
  • primary - optionally render button as primary button

Subtle Button Opener

d2l-dropdown-button-subtle is a d2l-button-subtle opener for dropdown content (d2l-dropdown-content or d2l-dropdown-menu). Provide text for the button and content component as needed.

<d2l-dropdown-button-subtle text="Open!">
  <d2l-dropdown-content>
    Some content...
  </d2l-dropdown-content>
</d2l-dropdown-button-subtle>

Context Menu Opener

d2l-dropdown-context-menu is a simple/minimal opener for dropdown content (d2l-dropdown-content or d2l-dropdown-menu). Provide text for accessibility and content component as needed. Optionally, specify the translucent attribute for busy/rich backgrounds.

<d2l-dropdown-context-menu text="Open!">
  <d2l-dropdown-content>
    Some content...
  </d2l-dropdown-content>
</d2l-dropdown-context-menu>

More Opener

d2l-dropdown-more is a simple/minimal opener for dropdown content (d2l-dropdown-content or d2l-dropdown-menu). Provide text for accessibility and content component as needed. Optionally, specify the translucent attribute for busy/rich backgrounds.

<d2l-dropdown-more text="Open!">
  <d2l-dropdown-content>
    Some content...
  </d2l-dropdown-content>
</d2l-dropdown-more>

Visible on Ancestor Behavior

For busy/rich backgrounds, the d2l-dropdown-more and d2l-dropdown-context-menu openers support the VisibleOnAncestorBehavior that can be enabled by specifying the visible-on-ancestor attribute. See VisibleOnAncestorBehavior for more details on configuring that behavior.

<div class="translucent-container d2l-visible-on-ancestor-target">
  <img alt="" src="https://s.brightspace.com/course-images/images/e4fbb461-4cd9-4512-8304-44f2c2b741f1/tile-low-density-max-size.jpg"/>
  <d2l-dropdown-more text="Open!" translucent visible-on-ancestor>
    <d2l-dropdown-content>
      Some content...
    </d2l-dropdown-content>
  </d2l-dropdown-more>
</div>

Generic Content

d2l-dropdown-content is a generic container for dropdown content. It provides behavior such as sizing, positioning, and managing focus gain/loss.

<d2l-dropdown-button text="Open!" primary>
  <d2l-dropdown-content min-width="150" max-width="400">
    <a href="https://www.google.com">Google</a>
    <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>
    <a href="http://www.desire2learn.com">D2L</a>
  </d2l-dropdown-content>
</d2l-dropdown-button>
  • min-width (number) - optionally override default min-width
  • max-width (number) - optionally override default max-width
  • no-auto-fit - optionally opt out of auto-sizing
  • no-padding - optionally render with no padding
  • no-pointer - optionally render without a pointer
  • render-content - optionally stamp contents into DOM immediately
  • vertical-offset - optionally provide custom offset, positive or negative
  • align (enum) - optionally align dropdown. Valid values are "start","end". If not set, the dropdown will attempt be centred
  • boundary (object) - optionally provide boundaries to where the dropdown will appear. Valid properties are "above", "below", "left", "right"
// triggered when dropdown opened
content.addEventListener('d2l-dropdown-open', () => { ... });

// triggered when dropdown closed
content.addEventListener('d2l-dropdown-close', () => { ... });

Menu Content

d2l-dropdown-menu is a container for a d2l-menu component. It provides behavior in addition to the basic behavior of d2l-dropdown-content such as closing the menu when menu items are selected, resetting to the root of nested menus when reopening, etc.

<d2l-dropdown-button text="Open!" primary>
  <d2l-dropdown-menu id="dropdown">
    <d2l-menu label="Astronomy">
      <d2l-menu-item text="Introduction" id="first-item" ></d2l-menu-item>
      <d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
      <d2l-menu-item text="The Solar System">
        <d2l-menu>
          <d2l-menu-item text="Formation"></d2l-menu-item>
          <d2l-menu-item text="Modern Solar System"></d2l-menu-item>
          <d2l-menu-item text="Future Solar System"></d2l-menu-item>
          <d2l-menu-item text="The Planets"></d2l-menu-item>
          <d2l-menu-item text="The Sun"></d2l-menu-item>
          <d2l-menu-item text="Solar &amp; Lunar Eclipses"></d2l-menu-item>
          <d2l-menu-item text="Meteors &amp; Meteorites"></d2l-menu-item>
          <d2l-menu-item text="Asteroids"></d2l-menu-item>
          <d2l-menu-item text="Comets"></d2l-menu-item>
        </d2l-menu>
      </d2l-menu-item>
      <d2l-menu-item text="Stars &amp; Galaxies"></d2l-menu-item>
      <d2l-menu-item text="The Night Sky"></d2l-menu-item>
      <d2l-menu-item text="The Universe" id="last-item"></d2l-menu-item>
    </d2l-menu>
  </d2l-dropdown-menu>
</d2l-dropdown-button>

Developing, Testing and Contributing

After cloning the repo, run npm install to install dependencies.

If you don't have it already, install the Polymer CLI globally:

npm install -g polymer-cli

To start a local web server that hosts the demo page and tests:

polymer serve

To lint (eslint and Polymer lint):

npm run lint

To run unit tests locally using Polymer test:

npm run test:polymer:local

To lint AND run local unit tests:

npm test

Versioning

Commits and PR merges to master will automatically do a minor version bump which will:

  • Update the version in package.json
  • Add a tag matching the new version
  • Create a github release matching the new version

By using either [increment major] or [increment patch] notation inside your merge message, you can overwrite the default version upgrade of minor to the position of your choice.

Compatibility

(Loading compatibility data...)

Last updated: 2017-12-14

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • d2l-button#^4.7.3
  • d2l-colors#^3.1.2
  • d2l-icons#^5.0.0
  • d2l-menu#^1.1.0
  • d2l-polymer-behaviors#^1.7.3
  • iron-iconset-svg#^2.1.0
  • polymer#1 - 2
Released
2019-02-15
Maturity
IMPORTED
License
Apache License 2.0

Compatibility

Framework
Polymer 2.0+
Polymer 1.0+ in 5.2.1
Browser
Browser Independent

dropdown - Vaadin Add-on Directory

Polymer-based web component for a D2L dropdown dropdown - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/BrightspaceUI/dropdown](https://github.com//BrightspaceUI/dropdown/blob/v7.4.0/README.md) on 2019-05-22 ]** **Looking for SASS-based `vui-dropdown`?** It's [over here](https://github.com/Brightspace/valence-ui-dropdown/tree/sass). # d2l-dropdown [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/BrightspaceUI/dropdown) [![Bower version][bower-image]][bower-url] [![Build status][ci-image]][ci-url] A [Polymer](https://www.polymer-project.org)-based web component for dropdown/flyouts. ## Installation `d2l-dropdown` can be installed from [Bower][bower-url]: ```shell bower install d2l-dropdown ``` ## Usage Include the [webcomponents.js](http://webcomponents.org/polyfills/) "lite" polyfill (for browsers who don't natively support web components), then import the opener and content components as needed: ```html ``` ### Dropdown Openers #### Generic Opener `d2l-dropdown` is a generic opener for dropdown content (`d2l-dropdown-content` or `d2l-dropdown-menu`) enabling alternate opener implementation using existing elements/components. Provide and indicate your own opener element with the class attribute value `d2l-dropdown-opener`. Wire-up is automatic. ```html Some content... ``` If the dropdown is initially empty when it's opened, the dropdown pointer will not be positioned correctly. In such cases, the `no-auto-open` attribute may be added to the opener, enabling you to take control of when the dropdown is actually opened: ```html ... ``` ```javascript dropdown.addEventListener('click', function() { // fetch some content ... // take control of when the dropdown is actually opened dropdown.toggleOpen(); }); ``` #### Button Opener `d2l-dropdown-button` is a `d2l-button` opener for dropdown content (`d2l-dropdown-content` or `d2l-dropdown-menu`). Provide `text` for the button and content component as needed. ```html Some content... ``` * `primary` - optionally render button as primary button #### Subtle Button Opener `d2l-dropdown-button-subtle` is a `d2l-button-subtle` opener for dropdown content (`d2l-dropdown-content` or `d2l-dropdown-menu`). Provide `text` for the button and content component as needed. ```html Some content... ``` #### Context Menu Opener `d2l-dropdown-context-menu` is a simple/minimal opener for dropdown content (`d2l-dropdown-content` or `d2l-dropdown-menu`). Provide `text` for accessibility and content component as needed. Optionally, specify the `translucent` attribute for busy/rich backgrounds. ```html Some content... ``` #### More Opener `d2l-dropdown-more` is a simple/minimal opener for dropdown content (`d2l-dropdown-content` or `d2l-dropdown-menu`). Provide `text` for accessibility and content component as needed. Optionally, specify the `translucent` attribute for busy/rich backgrounds. ```html Some content... ``` #### Visible on Ancestor Behavior For busy/rich backgrounds, the `d2l-dropdown-more` and `d2l-dropdown-context-menu` openers support the [VisibleOnAncestorBehavior](https://github.com/Brightspace/d2l-polymer-behaviors-ui) that can be enabled by specifying the `visible-on-ancestor` attribute. See [VisibleOnAncestorBehavior](https://github.com/Brightspace/d2l-polymer-behaviors-ui) for more details on configuring that behavior. ```html
Some content...
``` ### Dropdown Contents #### Generic Content `d2l-dropdown-content` is a generic container for dropdown content. It provides behavior such as sizing, positioning, and managing focus gain/loss. ```html Google

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.

D2L ``` * `min-width` (number) - optionally override default min-width * `max-width` (number) - optionally override default max-width * `no-auto-fit` - optionally opt out of auto-sizing * `no-padding` - optionally render with no padding * `no-pointer` - optionally render without a pointer * `render-content` - optionally stamp contents into DOM immediately * `vertical-offset` - optionally provide custom offset, positive or negative * `align` (enum) - optionally align dropdown. Valid values are "start","end". If not set, the dropdown will attempt be centred * `boundary` (object) - optionally provide boundaries to where the dropdown will appear. Valid properties are "above", "below", "left", "right" ```javascript // triggered when dropdown opened content.addEventListener('d2l-dropdown-open', () => { ... }); // triggered when dropdown closed content.addEventListener('d2l-dropdown-close', () => { ... }); ``` #### Menu Content `d2l-dropdown-menu` is a container for a [d2l-menu](https://github.com/Brightspace/d2l-menu-ui) component. It provides behavior in addition to the basic behavior of `d2l-dropdown-content` such as closing the menu when menu items are selected, resetting to the root of nested menus when reopening, etc. ```html ``` ## Developing, Testing and Contributing After cloning the repo, run `npm install` to install dependencies. If you don't have it already, install the [Polymer CLI](https://www.polymer-project.org/2.0/docs/tools/polymer-cli) globally: ```shell npm install -g polymer-cli ``` To start a [local web server](https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#serve) that hosts the demo page and tests: ```shell polymer serve ``` To lint ([eslint](http://eslint.org/) and [Polymer lint](https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#lint)): ```shell npm run lint ``` To run unit tests locally using [Polymer test](https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#tests): ```shell npm run test:polymer:local ``` To lint AND run local unit tests: ```shell npm test ``` [bower-url]: http://bower.io/search/?q=d2l-dropdown [bower-image]: https://badge.fury.io/bo/d2l-dropdown.svg [ci-url]: https://travis-ci.org/BrightspaceUI/dropdown [ci-image]: https://travis-ci.org/BrightspaceUI/dropdown.svg?branch=master ## Versioning Commits and PR merges to master will automatically do a minor version bump which will: * Update the version in `package.json` * Add a tag matching the new version * Create a github release matching the new version By using either **[increment major]** or **[increment patch]** notation inside your merge message, you can overwrite the default version upgrade of minor to the position of your choice.
View on GitHub
GitHub Homepage
Issue tracker
Documentation
Online Demo

dropdown version 0.0.1
### Dependencies * polymer#^1.3.1 * vui-colors#^1.0.1

dropdown version 0.0.2
### Dependencies * polymer#^1.3.1 * vui-colors#^1.0.1

dropdown version 0.0.3
### Dependencies * polymer#^1.3.1 * vui-colors#^1.0.1 * vui-typography#~3.1.0

dropdown version 0.0.4
### Dependencies * polymer#^1.3.1 * vui-colors#^1.0.1 * vui-typography#~3.1.0

dropdown version 0.0.5
### Dependencies * polymer#^1.3.1 * vui-colors#^1.0.1 * vui-typography#~3.1.0

dropdown version 0.0.6
### Dependencies * iron-icon#PolymerElements/iron-icon#^1.0.0 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.3.1 * vui-colors#^1.0.1 * vui-typography#~3.1.0

dropdown version 0.0.7
### Dependencies * iron-icon#PolymerElements/iron-icon#^1.0.0 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.3.1 * vui-colors#^1.0.1 * vui-typography#~3.1.0

dropdown version 0.0.8
### Dependencies * iron-icon#PolymerElements/iron-icon#^1.0.0 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.3.1 * vui-colors#^1.0.1 * vui-typography#~3.1.0

dropdown version 0.0.9
### Dependencies * iron-icon#PolymerElements/iron-icon#^1.0.0 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.3.1 * vui-colors#^1.0.1 * vui-typography#~3.1.0

dropdown version 0.1.0
### Dependencies * d2l-colors#~2.0.0 * iron-icon#PolymerElements/iron-icon#^1.0.0 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.5.0

dropdown version 0.2.0
### Dependencies * d2l-colors#~2.0.0 * d2l-hierarchical-view#~0.0.3 * d2l-icons#~2.1.0 * iron-icon#PolymerElements/iron-icon#^1.0.0 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.5.0

dropdown version 0.2.1
### Dependencies * d2l-colors#~2.0.0 * d2l-hierarchical-view#~0.0.4 * d2l-icons#~2.1.0 * iron-icon#PolymerElements/iron-icon#^1.0.0 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.5.0

dropdown version 0.2.2
### Dependencies * d2l-colors#~2.0.0 * d2l-hierarchical-view#~0.0.6 * d2l-icons#~2.1.0 * iron-icon#PolymerElements/iron-icon#^1.0.0 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.5.0

dropdown version 0.3.0
### Dependencies * d2l-colors#~2.0.0 * d2l-hierarchical-view#~0.0.6 * d2l-icons#~2.1.0 * d2l-polymer-behaviors#~0.0.2 * iron-icon#PolymerElements/iron-icon#^1.0.0 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.5.0

dropdown version 0.3.1
### Dependencies * d2l-colors#~2.0.0 * d2l-hierarchical-view#~0.0.6 * d2l-icons#~2.1.0 * d2l-polymer-behaviors#~0.0.2 * iron-icon#PolymerElements/iron-icon#^1.0.0 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.5.0

dropdown version 0.3.2
### Dependencies * d2l-colors#~2.0.0 * d2l-hierarchical-view#~0.0.6 * d2l-icons#~2.1.0 * d2l-polymer-behaviors#~0.0.2 * iron-icon#PolymerElements/iron-icon#^1.0.0 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.5.0

dropdown version 0.3.3
### Dependencies * d2l-colors#~2.0.0 * d2l-hierarchical-view#~0.0.7 * d2l-icons#~2.1.0 * d2l-polymer-behaviors#~0.0.2 * iron-icon#PolymerElements/iron-icon#^1.0.0 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.5.0

dropdown version 0.3.4
### Dependencies * d2l-colors#~2.0.0 * d2l-hierarchical-view#~0.0.8 * d2l-icons#~2.4.0 * d2l-polymer-behaviors#~0.0.2 * iron-icon#PolymerElements/iron-icon#^1.0.0 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.5.0

dropdown version 0.3.5
### Dependencies * d2l-colors#~2.0.0 * d2l-hierarchical-view#~0.0.9 * d2l-icons#^2.5.0 * d2l-polymer-behaviors#~0.0.2 * iron-icon#PolymerElements/iron-icon#^1.0.0 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.5.0

dropdown version 0.3.6
### Dependencies * d2l-colors#~2.0.0 * d2l-hierarchical-view#~0.0.9 * d2l-icons#^2.5.0 * d2l-polymer-behaviors#~0.0.2 * iron-icon#PolymerElements/iron-icon#^1.0.0 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.5.0

dropdown version 0.3.7
### Dependencies * d2l-colors#~2.0.0 * d2l-hierarchical-view#~0.0.9 * d2l-icons#^2.5.0 * d2l-polymer-behaviors#~0.0.2 * iron-icon#PolymerElements/iron-icon#^1.0.0 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.5.0

dropdown version 0.3.8
### Dependencies * d2l-colors#~2.0.0 * d2l-hierarchical-view#~0.0.9 * d2l-icons#^2.5.0 * d2l-polymer-behaviors#~0.0.2 * iron-icon#PolymerElements/iron-icon#^1.0.0 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.5.0

dropdown version 0.3.9
### Dependencies * d2l-colors#~2.0.0 * d2l-hierarchical-view#~0.0.9 * d2l-icons#^2.5.0 * d2l-polymer-behaviors#~0.0.2 * iron-icon#PolymerElements/iron-icon#^1.0.0 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.5.0

dropdown version 0.3.10
### Dependencies * d2l-colors#^2.1.0 * d2l-hierarchical-view#~0.0.9 * d2l-icons#^2.5.0 * d2l-polymer-behaviors#~0.0.2 * iron-icon#PolymerElements/iron-icon#^1.0.0 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.5.0

dropdown version 1.0.0
### Dependencies * d2l-button#~3.0.1 * d2l-colors#^2.1.0 * d2l-hierarchical-view#~0.0.9 * d2l-icons#^2.5.0 * d2l-offscreen#~2.1.0 * d2l-polymer-behaviors#~0.0.3 * iron-icon#PolymerElements/iron-icon#^1.0.0 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.5.0

dropdown version 2.0.0
### Dependencies * d2l-button#~3.0.1 * d2l-colors#^2.1.0 * d2l-icons#^2.5.0 * d2l-menu#~0.0.1 * d2l-offscreen#~2.1.0 * d2l-polymer-behaviors#~0.0.3 * iron-icon#PolymerElements/iron-icon#^1.0.0 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.5.0

dropdown version 2.1.0
### Dependencies * d2l-button#~3.0.1 * d2l-colors#^2.1.0 * d2l-icons#^2.5.0 * d2l-menu#~0.0.1 * d2l-offscreen#~2.1.0 * d2l-polymer-behaviors#~0.0.3 * iron-icon#PolymerElements/iron-icon#^1.0.0 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.5.0

dropdown version 2.2.0
### Dependencies * d2l-button#~3.0.1 * d2l-colors#^2.1.0 * d2l-icons#^2.5.0 * d2l-menu#~0.0.2 * d2l-offscreen#~2.1.0 * d2l-polymer-behaviors#~0.0.3 * iron-icon#PolymerElements/iron-icon#^1.0.0 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.5.0

dropdown version 2.2.1
### Dependencies * d2l-button#~3.0.1 * d2l-colors#^2.1.0 * d2l-icons#^2.5.0 * d2l-menu#~0.0.3 * d2l-offscreen#~2.1.0 * d2l-polymer-behaviors#~0.0.3 * iron-icon#PolymerElements/iron-icon#^1.0.0 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.5.0

dropdown version 2.2.2
### Dependencies * d2l-button#~3.0.1 * d2l-colors#^2.1.0 * d2l-icons#^2.5.0 * d2l-menu#~0.0.4 * d2l-offscreen#~2.1.0 * d2l-polymer-behaviors#~0.0.3 * iron-icon#PolymerElements/iron-icon#^1.0.0 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.5.0

dropdown version 2.2.3
### Dependencies * d2l-button#~3.0.1 * d2l-colors#^2.1.0 * d2l-icons#^2.5.0 * d2l-menu#~0.0.4 * d2l-offscreen#~2.1.0 * d2l-polymer-behaviors#~0.0.3 * iron-icon#PolymerElements/iron-icon#^1.0.0 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.5.0

dropdown version 2.2.4
### Dependencies * d2l-button#~3.0.6 * d2l-colors#^2.1.0 * d2l-icons#^2.9.6 * d2l-menu#~0.0.7 * d2l-offscreen#~2.1.0 * d2l-polymer-behaviors#~0.0.4 * iron-icon#PolymerElements/iron-icon#^1.0.0 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.5.0

dropdown version 3.0.0
### Dependencies * d2l-button#~3.0.6 * d2l-colors#^2.1.0 * d2l-icons#^2.9.6 * d2l-menu#^0.2.0 * d2l-offscreen#~2.1.0 * d2l-polymer-behaviors#~0.0.4 * iron-icon#PolymerElements/iron-icon#^1.0.0 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.5.0

dropdown version 3.0.1
### Dependencies * d2l-button#~3.0.6 * d2l-colors#^2.1.0 * d2l-icons#^2.9.6 * d2l-menu#^0.2.0 * d2l-offscreen#^2.1.0 * d2l-polymer-behaviors#~0.0.4 * iron-icon#PolymerElements/iron-icon#^1.0.0 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.5.0

dropdown version 3.0.2
### Dependencies * d2l-button#~3.0.6 * d2l-colors#^2.1.0 * d2l-icons#^2.9.6 * d2l-menu#^0.2.0 * d2l-offscreen#^2.1.0 * d2l-polymer-behaviors#~0.0.4 * iron-icon#PolymerElements/iron-icon#^1.0.0 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.5.0

dropdown version 3.0.3
### Dependencies * d2l-button#~3.0.6 * d2l-colors#^2.1.0 * d2l-icons#^2.9.6 * d2l-menu#^0.2.0 * d2l-offscreen#^2.1.0 * d2l-polymer-behaviors#~0.0.4 * iron-icon#PolymerElements/iron-icon#^1.0.0 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.5.0

dropdown version 3.0.4
### Dependencies * d2l-button#^3.0.8 * d2l-colors#^2.2.3 * d2l-icons#^2.15.2 * d2l-menu#^0.2.6 * d2l-offscreen#^2.2.1 * d2l-polymer-behaviors#~0.0.4 * iron-icon#PolymerElements/iron-icon#^1.0.0 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.7.0

dropdown version 3.0.5
### Dependencies * d2l-button#^3.0.8 * d2l-colors#^2.2.3 * d2l-icons#^2.15.2 * d2l-menu#^0.2.7 * d2l-offscreen#^2.2.1 * d2l-polymer-behaviors#~0.0.4 * iron-icon#PolymerElements/iron-icon#^1.0.0 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.7.0

dropdown version 4.0.0
### Dependencies * d2l-button#^3.0.8 * d2l-colors#^2.2.3 * d2l-icons#^2.16.1 * d2l-menu#^0.2.8 * d2l-offscreen#^2.2.1 * d2l-polymer-behaviors#~0.0.4 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.7.0

dropdown version 4.0.1
### Dependencies * d2l-button#^3.0.8 * d2l-colors#^2.2.3 * d2l-icons#^2.16.1 * d2l-menu#^0.2.8 * d2l-offscreen#^2.2.1 * d2l-polymer-behaviors#~0.0.4 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.7.0

dropdown version 4.0.2
### Dependencies * d2l-button#^3.0.8 * d2l-colors#^2.2.3 * d2l-icons#^2.16.1 * d2l-menu#^0.2.8 * d2l-offscreen#^2.2.1 * d2l-polymer-behaviors#~0.0.4 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.7.0

dropdown version 5.0.0
### Dependencies * d2l-button#^3.0.8 * d2l-colors#^2.2.3 * d2l-icons#^3.0.0 * d2l-menu#^0.3.0 * d2l-offscreen#^2.2.1 * d2l-polymer-behaviors#~0.0.4 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.7.0

dropdown version 5.0.1
### Dependencies * d2l-button#^3.0.8 * d2l-colors#^2.2.3 * d2l-icons#^3.0.0 * d2l-menu#^0.3.0 * d2l-offscreen#^2.2.4 * d2l-polymer-behaviors#~0.0.4 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.7.0

dropdown version 5.0.2
### Dependencies * d2l-button#^3.0.8 * d2l-colors#^2.2.3 * d2l-icons#^3.0.0 * d2l-menu#^0.3.0 * d2l-offscreen#^2.2.4 * d2l-polymer-behaviors#~0.0.4 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.7.0

dropdown version 5.0.3
### Dependencies * d2l-button#^3.0.8 * d2l-colors#^2.2.3 * d2l-icons#^3.0.0 * d2l-menu#^0.3.0 * d2l-offscreen#^2.2.4 * d2l-polymer-behaviors#~0.0.4 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.7.0

dropdown version 5.0.4
### Dependencies * d2l-button#^3.0.8 * d2l-colors#^2.2.3 * d2l-icons#^3.0.0 * d2l-menu#^0.3.0 * d2l-offscreen#^2.2.4 * d2l-polymer-behaviors#~0.0.5 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.7.0

dropdown version 5.0.5
### Dependencies * d2l-button#^3.0.8 * d2l-colors#^2.2.3 * d2l-icons#^3.0.0 * d2l-menu#^0.3.0 * d2l-offscreen#^2.2.4 * d2l-polymer-behaviors#~0.0.5 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.7.0

dropdown version 5.0.6
### Dependencies * d2l-button#^3.0.8 * d2l-colors#^2.2.3 * d2l-icons#^3.0.0 * d2l-menu#^0.3.0 * d2l-offscreen#^2.2.4 * d2l-polymer-behaviors#~0.0.5 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.7.0

dropdown version 5.1.0
### Dependencies * d2l-button#^3.0.8 * d2l-colors#^2.2.3 * d2l-icons#^3.0.0 * d2l-menu#^0.3.0 * d2l-offscreen#^2.2.4 * d2l-polymer-behaviors#~0.0.5 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.7.0

dropdown version 5.1.1
### Dependencies * d2l-button#^3.0.8 * d2l-colors#^2.2.3 * d2l-icons#^3.0.0 * d2l-menu#^0.3.0 * d2l-offscreen#^2.2.4 * d2l-polymer-behaviors#~0.0.5 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.7.0

dropdown version 5.2.0
### Dependencies * d2l-button#^3.0.8 * d2l-colors#^2.2.3 * d2l-icons#^3.0.0 * d2l-menu#^0.3.0 * d2l-offscreen#^2.2.4 * d2l-polymer-behaviors#~0.0.5 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.7.0

dropdown version 5.2.1
### Dependencies * d2l-button#^3.3.1 * d2l-colors#^2.4.0 * d2l-icons#^3.3.1 * d2l-menu#^0.3.7 * d2l-offscreen#^2.2.4 * d2l-polymer-behaviors#~0.0.5 * iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.0.0 * polymer#^1.9.0

dropdown version 6.0.0
### Dependencies * d2l-button#^4.0.0 * d2l-colors#2.4 - 3 * d2l-icons#3.3 - 4 * d2l-menu#0.3.7 - 1.0 * d2l-offscreen#2.2.4 - 3 * d2l-polymer-behaviors#0.0.5 - 1 * iron-iconset-svg#PolymerElements/iron-iconset-svg#1 - 2 * polymer#Polymer/polymer#1 - 2

dropdown version 6.0.1
### Dependencies * d2l-button#^4.0.0 * d2l-colors#^2.4.0 || ^3.1.0 * d2l-icons#^3.6.0 || ^4.4.0 * d2l-menu#^0.3.7 || ^1.0.3 * d2l-offscreen#^2.2.5 || ^3.0.1 * d2l-polymer-behaviors#0.0.5 - 1 * iron-iconset-svg#PolymerElements/iron-iconset-svg#1 - 2 * polymer#Polymer/polymer#1 - 2

dropdown version 6.0.2
### Dependencies * d2l-button#^4.0.0 * d2l-colors#^2.4.0 || ^3.1.0 * d2l-icons#^3.6.0 || ^4.4.0 * d2l-menu#^0.3.7 || ^1.0.3 * d2l-offscreen#^2.2.5 || ^3.0.1 * d2l-polymer-behaviors#0.0.5 - 1 * iron-iconset-svg#PolymerElements/iron-iconset-svg#1 - 2 * polymer#Polymer/polymer#1 - 2

dropdown version 6.0.3
### Dependencies * d2l-button#^4.0.1 * d2l-colors#^2.4.0 || ^3.1.0 * d2l-icons#^3.6.0 || ^4.4.0 * d2l-menu#^0.3.7 || ^1.0.3 * d2l-offscreen#^2.2.5 || ^3.0.1 * d2l-polymer-behaviors#0.0.5 - 1 * iron-iconset-svg#PolymerElements/iron-iconset-svg#1 - 2 * polymer#Polymer/polymer#1 - 2

dropdown version 6.0.4
### Dependencies * d2l-button#^4.0.2 * d2l-colors#^3.1.2 * d2l-icons#^4.5.1 * d2l-menu#^1.0.4 * d2l-offscreen#^3.0.3 * d2l-polymer-behaviors#^1.1.1 * iron-iconset-svg#^2.1.0 * polymer#1.9.1 - 2

dropdown version 6.0.5
### Dependencies * d2l-button#^4.0.2 * d2l-colors#^3.1.2 * d2l-icons#^4.5.1 * d2l-menu#^1.0.4 * d2l-offscreen#^3.0.3 * d2l-polymer-behaviors#^1.2.0 * iron-iconset-svg#^2.1.0 * polymer#1.9.1 - 2

dropdown version 6.0.6
### Dependencies * d2l-button#^4.0.2 * d2l-colors#^3.1.2 * d2l-icons#^4.5.1 * d2l-menu#^1.0.4 * d2l-offscreen#^3.0.3 * d2l-polymer-behaviors#^1.2.0 * iron-iconset-svg#^2.1.0 * polymer#1 - 2

dropdown version 6.0.7
### Dependencies * d2l-button#^4.0.2 * d2l-colors#^3.1.2 * d2l-icons#^4.5.1 * d2l-menu#^1.0.4 * d2l-offscreen#^3.0.3 * d2l-polymer-behaviors#^1.2.0 * iron-iconset-svg#^2.1.0 * polymer#1 - 2

dropdown version 6.0.8
### Dependencies * d2l-button#^4.0.2 * d2l-colors#^3.1.2 * d2l-icons#^4.5.1 * d2l-menu#^1.0.4 * d2l-offscreen#^3.0.3 * d2l-polymer-behaviors#^1.2.0 * iron-iconset-svg#^2.1.0 * polymer#1 - 2

dropdown version 6.0.9
### Dependencies * d2l-button#^4.0.2 * d2l-colors#^3.1.2 * d2l-icons#^4.5.1 * d2l-menu#^1.0.4 * d2l-offscreen#^3.0.3 * d2l-polymer-behaviors#^1.2.0 * iron-iconset-svg#^2.1.0 * polymer#1 - 2

dropdown version 6.0.10
### Dependencies * d2l-button#^4.0.2 * d2l-colors#^3.1.2 * d2l-icons#^4.5.1 * d2l-menu#^1.0.4 * d2l-offscreen#^3.0.3 * d2l-polymer-behaviors#^1.2.0 * iron-iconset-svg#^2.1.0 * polymer#1 - 2

dropdown version 6.1.0
### Dependencies * d2l-button#^4.3.0 * d2l-colors#^3.1.2 * d2l-icons#^4.5.1 * d2l-menu#^1.0.4 * d2l-offscreen#^3.0.3 * d2l-polymer-behaviors#^1.2.0 * iron-iconset-svg#^2.1.0 * polymer#1 - 2

dropdown version 6.2.0
### Dependencies * d2l-button#^4.3.0 * d2l-colors#^3.1.2 * d2l-icons#^4.5.1 * d2l-menu#^1.0.4 * d2l-offscreen#^3.0.3 * d2l-polymer-behaviors#^1.2.0 * iron-iconset-svg#^2.1.0 * polymer#1 - 2

dropdown version 6.3.0
### Dependencies * d2l-button#^4.5.0 * d2l-colors#^3.1.2 * d2l-icons#^5.0.0 * d2l-menu#^1.1.0 * d2l-offscreen#^3.0.3 * d2l-polymer-behaviors#^1.2.0 * iron-iconset-svg#^2.1.0 * polymer#1 - 2

dropdown version 6.4.0
### Dependencies * d2l-button#^4.6.0 * d2l-colors#^3.1.2 * d2l-icons#^5.0.0 * d2l-menu#^1.1.0 * d2l-polymer-behaviors#^1.2.0 * iron-iconset-svg#^2.1.0 * polymer#1 - 2

dropdown version 6.5.0
### Dependencies * d2l-button#^4.6.0 * d2l-colors#^3.1.2 * d2l-icons#^5.0.0 * d2l-menu#^1.1.0 * d2l-polymer-behaviors#^1.2.0 * iron-iconset-svg#^2.1.0 * polymer#1 - 2

dropdown version 6.6.0
### Dependencies * d2l-button#^4.7.2 * d2l-colors#^3.1.2 * d2l-icons#^5.0.0 * d2l-menu#^1.1.0 * d2l-polymer-behaviors#^1.7.2 * iron-iconset-svg#^2.1.0 * polymer#1 - 2

dropdown version 6.6.1
### Dependencies * d2l-button#^4.7.3 * d2l-colors#^3.1.2 * d2l-icons#^5.0.0 * d2l-menu#^1.1.0 * d2l-polymer-behaviors#^1.7.3 * iron-iconset-svg#^2.1.0 * polymer#1 - 2

dropdown version 6.6.2
### Dependencies * d2l-button#^4.7.3 * d2l-colors#^3.1.2 * d2l-icons#^5.0.0 * d2l-menu#^1.1.0 * d2l-polymer-behaviors#^1.7.3 * iron-iconset-svg#^2.1.0 * polymer#1 - 2

dropdown version 6.6.3
### Dependencies * d2l-button#^4.7.3 * d2l-colors#^3.1.2 * d2l-icons#^5.0.0 * d2l-menu#^1.1.0 * d2l-polymer-behaviors#^1.7.3 * iron-iconset-svg#^2.1.0 * polymer#1 - 2

dropdown version 6.6.4
### Dependencies * d2l-button#^4.7.3 * d2l-colors#^3.1.2 * d2l-icons#^5.0.0 * d2l-menu#^1.1.0 * d2l-polymer-behaviors#^1.7.3 * iron-iconset-svg#^2.1.0 * polymer#1 - 2

dropdown version 6.6.5
### Dependencies * d2l-button#^4.7.3 * d2l-colors#^3.1.2 * d2l-icons#^5.0.0 * d2l-menu#^1.1.0 * d2l-polymer-behaviors#^1.7.3 * iron-iconset-svg#^2.1.0 * polymer#1 - 2

dropdown version 6.6.6
### Dependencies * d2l-button#^4.7.3 * d2l-colors#^3.1.2 * d2l-icons#^5.0.0 * d2l-menu#^1.1.0 * d2l-polymer-behaviors#^1.7.3 * iron-iconset-svg#^2.1.0 * polymer#1 - 2

Online