From 5fb917c14a03610c7507cd8c80909656c0bca3a3 Mon Sep 17 00:00:00 2001
From: Aron Graham <aron.graham@ge.com>
Date: Wed, 2 Jan 2019 12:36:29 +1000
Subject: [PATCH 1/7] added read-only property to disable user interactions on
 items #79

---
 HISTORY.md                         | 959 +++++++++++++++--------------
 bower.json                         |   2 +-
 demo/simple_demo.html              |  20 +
 package.json                       |   2 +-
 px-dropdown-api.json               | 758 +++++++++++++----------
 px-dropdown-content.html           |  22 +-
 px-dropdown.html                   |   8 +
 test/px-dropdown-custom-tests.js   |  39 +-
 test/px-dropdown-test-fixture.html |   7 +
 9 files changed, 996 insertions(+), 821 deletions(-)

diff --git a/HISTORY.md b/HISTORY.md
index 18ea3dbe..b6bec41b 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -1,547 +1,550 @@
-v4.7.9
-==================
-* fix max-width of dropdown-trigger
-
-v4.7.8
-==================
-* Removed id #searchbox from px-dropdown and used the class variable .search__box.
-* This ensures no duplicate 'non-unique id' error that chrome console checks for.
-
-v4.7.6
-==================
-* fix event documentation
-
-v4.7.5
-==================
-* fix width inheritance of content on resize
-* close dropdown when trigger tapped again
-
-v4.7.4
-==================
-* fix width inheritance of content
-
-v4.7.3
-==================
-* fix width inheritance
-
-v4.7.2
-==================
-* revert all accidental sass changes from 4.7.0
-
-v4.7.1
-==================
-* fix mobile responsiveness
-
-v4.7.0
-==================
-* add disable-truncate property for content items
-
-v4.6.0
-==================
-* Adding px-overlay-content to optionally hoist content.
-* px-dropdown was broken up into two sub components to facilitate hoisting.
-  * Adds JS to dynamically watch for a trigger element to be added to the trigger slot so we can avoid breaking the API. We can't just pass the trigger down because in v1 Shadow DOM slots passed down twice that are empty still wipe out any
-default content.
-  * Refactor px-dropdown-content to just listen for click event emitting from the trigger
-  * Move all code that deals with items into px-dropdown-content to cleanly seperate concerns. px-dropdown is just a wrapper that connects the trigger and content together and passes properties and slotted content down.
-
-v4.5.4
-==================
-* fixing demo pages for IE11
-
-v4.5.3
-==================
-* update demo to be clearer
-
-v4.5.2
-==================
-* revert simple_demo change
-
-v4.5.1
-==================
-* add min width/height vars for product-switcher
-
-v4.5.0
-==================
-* add mobile responsiveness
-* add caret and header/footer slots to support px-product-switcher
-
-v4.4.3
-==================
-* update tests
-
-v4.4.2
-==================
-* fix keyboard a11y
-
-v4.4.1
-==================
-* fix icon size (#70)
-
-v4.4.0
-==================
-* allow disableSelect on individual items
-
-v4.3.4
-==================
-* fix v4.3.1 to work in Polymer 1
-
-v4.3.3
-==================
-* remove min btn width
-
-v4.3.2
-==================
-* add disableSelect property for use in menus
-
-v4.3.1
-==================
-* make _itemsChanged more flexible
-
-v4.3.0
-==================
-* add app-localize-behavior (#68)
-
-v4.2.2
-==================
-* fix sizing issues (#67)
-
-v4.2.1
-==================
-* Add missing style var to docs
-
-v4.2.0
-==================
-* Adds `trigger` slot to support developer-defined custom trigger, see docs for
+# v4.7.10
+
+- added read-only property to item list. user can see the items (not disabled) but can not click them.
+
+# v4.7.9
+
+- fix max-width of dropdown-trigger
+
+# v4.7.8
+
+- Removed id #searchbox from px-dropdown and used the class variable .search\_\_box.
+- This ensures no duplicate 'non-unique id' error that chrome console checks for.
+
+# v4.7.6
+
+- fix event documentation
+
+# v4.7.5
+
+- fix width inheritance of content on resize
+- close dropdown when trigger tapped again
+
+# v4.7.4
+
+- fix width inheritance of content
+
+# v4.7.3
+
+- fix width inheritance
+
+# v4.7.2
+
+- revert all accidental sass changes from 4.7.0
+
+# v4.7.1
+
+- fix mobile responsiveness
+
+# v4.7.0
+
+- add disable-truncate property for content items
+
+# v4.6.0
+
+- Adding px-overlay-content to optionally hoist content.
+- px-dropdown was broken up into two sub components to facilitate hoisting.
+  - Adds JS to dynamically watch for a trigger element to be added to the trigger slot so we can avoid breaking the API. We can't just pass the trigger down because in v1 Shadow DOM slots passed down twice that are empty still wipe out any
+    default content.
+  - Refactor px-dropdown-content to just listen for click event emitting from the trigger
+  - Move all code that deals with items into px-dropdown-content to cleanly seperate concerns. px-dropdown is just a wrapper that connects the trigger and content together and passes properties and slotted content down.
+
+# v4.5.4
+
+- fixing demo pages for IE11
+
+# v4.5.3
+
+- update demo to be clearer
+
+# v4.5.2
+
+- revert simple_demo change
+
+# v4.5.1
+
+- add min width/height vars for product-switcher
+
+# v4.5.0
+
+- add mobile responsiveness
+- add caret and header/footer slots to support px-product-switcher
+
+# v4.4.3
+
+- update tests
+
+# v4.4.2
+
+- fix keyboard a11y
+
+# v4.4.1
+
+- fix icon size (#70)
+
+# v4.4.0
+
+- allow disableSelect on individual items
+
+# v4.3.4
+
+- fix v4.3.1 to work in Polymer 1
+
+# v4.3.3
+
+- remove min btn width
+
+# v4.3.2
+
+- add disableSelect property for use in menus
+
+# v4.3.1
+
+- make \_itemsChanged more flexible
+
+# v4.3.0
+
+- add app-localize-behavior (#68)
+
+# v4.2.2
+
+- fix sizing issues (#67)
+
+# v4.2.1
+
+- Add missing style var to docs
+
+# v4.2.0
+
+- Adds `trigger` slot to support developer-defined custom trigger, see docs for
   more information
 
-v4.1.0
-==================
-* Polymer 1.x/2.x hybrid element support
+# v4.1.0
+
+- Polymer 1.x/2.x hybrid element support
+
+# v4.0.18
+
+- fix demo
+
+# v4.0.17
+
+- add device flags
+
+# v4.0.16
+
+- remove web-animations (#62)
+
+# v4.0.15
+
+- resolve version conflict for web-animations (#62)
+
+# v4.0.14
+
+- add null check (#59)
+
+# v4.0.13
+
+- expose variable to fix style of breadcrumbs
+
+# v4.0.12
+
+- handle items changes correctly, new boolean
+
+# v4.0.11
+
+- revert 4.0.10
+
+# v4.0.10
+
+- clear selections on items change
+
+# v4.0.9
+
+- add support for icons in the dropdown
+
+# v4.0.8
+
+- add missing style vars to docs
+
+# v4.0.7
+
+- fix typo
+
+# v4.0.6
+
+- add back px-dropdown-click event
+
+# v4.0.5
+
+- Fix comment for analyzer
+
+# v4.0.4
+
+- switch to px-utl:check icon
+
+# v4.0.3
+
+- runtime theming for demo
+
+# v4.0.2
+
+- update demo per design feedback
+
+# v4.0.1
+
+- Changed how search icon is positioned
+
+# v4.0.0
+
+- rebuild of the px-dropdown component using iron-dropdown and iron-selector
+- added new icons
+- code review fixes
+- fix #50, #51, #52
+- add prop for disableClear
+
+# v3.1.1
+
+- fix for failing FF unit test
+
+# v3.1.0
+
+- merge PR #36 to add keyboard support
+
+# v3.0.0
+
+- turned off new functionality from PR #32 by default
+
+# v2.5.1 (tag deleted)
+
+- fixed display issue with search box, added unit tests
+
+# v2.5.0 (tag deleted)
+
+- merge PR #32, add search and sort functionality
+
+# v2.4.5
+
+- changed position back to relative, fixed demo
+
+# v2.4.4
+
+- changed position to absolute
+
+# v2.4.3
+
+- improved accessibility
+
+# v2.4.2
+
+- fix disabled text color
+
+# v2.4.0
+
+- added chevron css vars
+
+# v2.3.1
+
+- remove old theming and remove shields from subcomponent
+
+# v2.3.0
+
+- standardized style variable naming
+
+# v2.2.11
+
+- fixed CodePen for subcomponent
+
+# v2.2.10
+
+- updated usage documentation
+
+# v2.2.9
+
+- Ensure tooltip is hidden when scrolling the dropdown content
+
+# v2.2.8
+
+- Ensure click on checkboxes don't throw an error
+
+# v2.2.7
+
+- Update demo with multiple pages
+
+# v2.2.6
+
+- added new demo component
+
+# v2.2.5
+
+- clear up checkbox-mode confusion from demo (#28)
+
+# v2.2.4
+
+- Update colors design to pick up new colors
+
+# v2.2.3
+
+- rebuild demo css
+
+# v2.2.2
+
+- changing ghp.sh to account for Alpha releases
+
+# v2.2.1
+
+- fixed event propogation per #26
+
+# v2.2.0
+
+- added capability to disable a dropdown item
+
+# v2.1.4
+
+- added styles for validation classes from px-forms-design
+
+# v2.1.3
+
+- fix missing comma in bower.json
+
+# v2.1.2
+
+- updating dropdown styles to match spec and adding checkbox mode to demo
+
+# v2.1.1
+
+- Updated iron-dropdown dependency
+
+# v2.1.0
+
+- Updated dependencies
+
+# v2.0.8
+
+- changing browser in wct testing from safari 8 to safari 10 on elcapitan
+
+# v2.0.7
+
+- added --px-dropdown-text-color css var
+
+# v2.0.6
+
+- changing all devDeps to ^
+
+# v2.0.5
+
+- Update px-theme to 2.0.1 and update test fixtures
+
+# v2.0.4
+
+- removing px-theme style call
+
+# v2.0.3
+
+- changing Gruntfile.js to gulpfile.js
+
+# v2.0.2
+
+- fixed style variables for consistency
+
+# v2.0.1
+
+- added the style header in the docs
+
+# v2.0.0
+
+- added css variables, and changed previous ones to match the BEM naming.
+
+# v1.0.1
+
+- bower updating px-demo-snippet
+
+# v1.0.0
+
+- accepted PR that fixed multiple checkbox behavior and standardized event names
+
+# v0.13.0
+
+- added property for disabled dropdown
+
+# v0.12.3
+
+- Updated dependencies
+
+# v0.12.1
+
+- Fixed dropdown-content demo
+
+# v0.12.0
+
+- Uprev
+
+# v0.11.5
+
+- fixed demo bug
+
+# v0.11.4
+
+- removed the text and chevron demo pages, since they are internal, and made the components load with parentComponent, so they can work with codepen.
+
+# v0.11.3
+
+- added parent-name to demo-snippet and changed over the polymer-font-awesome library
+
+# v0.11.2
+
+- added other demo pages to vulcanize
+
+# v0.11.1
+
+- updated demo bugs
+
+# v0.11.0
 
-v4.0.18
-==================
-* fix demo
+- Added 'selectedKey' attribute to dropdown, representing the key of the currently selected item
 
-v4.0.17
-==================
-* add device flags
+# v0.10.5
 
-v4.0.16
-==================
-* remove web-animations (#62)
+- updated mega demo styles and bower px-demo-snippet to ^
 
-v4.0.15
-==================
-* resolve version conflict for web-animations (#62)
+# v0.10.4
 
-v4.0.14
-==================
-* add null check (#59)
+- added image to readme, removed watch, added view on github
 
-v4.0.13
-==================
-* expose variable to fix style of breadcrumbs
+# v0.10.3
 
-v4.0.12
-==================
-* handle items changes correctly, new boolean
+- updated gh-pages script to vulcanize demo
 
-v4.0.11
-==================
-* revert 4.0.10
+# v0.10.1
 
-v4.0.10
-==================
-* clear selections on items change
+- Fix to make px-dropdown play with Angular nicely. Added Angular demo, also.
 
-v4.0.9
-==================
-* add support for icons in the dropdown
+# v0.10.0
 
-v4.0.8
-==================
-* add missing style vars to docs
+- Upgrade to Polymer 1.5.0
 
-v4.0.7
-==================
-* fix typo
+# v0.9.9
 
-v4.0.6
-==================
-* add back px-dropdown-click event
+- Added --dropdown_content_margin to control the dropdown content margin
 
-v4.0.5
-==================
-* Fix comment for analyzer
+# v0.9.8
 
-v4.0.4
-==================
-* switch to px-utl:check icon
+- Added --dropdown_text_padding to control text padding and make internal element use flex layout
 
-v4.0.3
-==================
-* runtime theming for demo
+# v0.9.7
 
-v4.0.2
-==================
-* update demo per design feedback
+- up minor version on polymer font awesome
 
-v4.0.1
-==================
-* Changed how search icon is positioned
+# v0.9.6
 
-v4.0.0
-==================
-* rebuild of the px-dropdown component using iron-dropdown and iron-selector
-* added new icons
-* code review fixes
-* fix #50, #51, #52
-* add prop for disableClear
+- removed dependency on .px-dropdown-content class
 
-v3.1.1
-==================
-* fix for failing FF unit test
+# v0.9.5
 
-v3.1.0
-==================
-* merge PR #36 to add keyboard support
+- added oss_notice to bower ignore
 
-v3.0.0
-==================
-* turned off new functionality from PR #32 by default
+# v0.9.4
 
-v2.5.1 (tag deleted)
-==================
-* fixed display issue with search box, added unit tests
+- added pull request test for travis and updated OSS Notice
 
-v2.5.0 (tag deleted)
-==================
-* merge PR #32, add search and sort functionality
+# v0.9.3
 
-v2.4.5
-==================
-* changed position back to relative, fixed demo
+- added auto github pages functionality
 
-v2.4.4
-==================
-* changed position to absolute
+# v0.9.2
 
-v2.4.3
-==================
-* improved accessibility
+- Minor CSS text colour fix.
 
-v2.4.2
-==================
-* fix disabled text color
+# v0.9.1
 
-v2.4.0
-==================
-* added chevron css vars
+- Fix bug where selecting an item having a tooltip would set the value and displayValue to this item + its tooltip
 
-v2.3.1
-==================
-* remove old theming and remove shields from subcomponent
+# v0.9.0
 
-v2.3.0
-==================
-* standardized style variable naming
+- Upgrade to Polymer 1.4.0
 
-v2.2.11
-==================
-* fixed CodePen for subcomponent
+# v0.8.1
 
-v2.2.10
-==================
-* updated usage documentation
+- display-value attribute now notifies
 
-v2.2.9
-==================
-* Ensure tooltip is hidden when scrolling the dropdown content
+# v0.8.0
 
-v2.2.8
-==================
-* Ensure click on checkboxes don't throw an error
+- Apply scroll lock only if content has vertical scroll bars
+- added 'checkbox-mode' attribute on px-dropdown-content, allowing it to function as a list of items with checkboxes
 
-v2.2.7
-==================
-* Update demo with multiple pages
+# v0.7.4
 
-v2.2.6
-==================
-* added new demo component
+- brought the default border color for dropdown.
 
-v2.2.5
-==================
-* clear up checkbox-mode confusion from demo (#28)
+# v0.7.3
 
-v2.2.4
-==================
-* Update colors design to pick up new colors
+- Fix tooltip bug in datatable
+  v0.7.2
+  ================
+- removed documentation from README, and replaced with link to github page, where cos are auto generated.
 
-v2.2.3
-==================
-* rebuild demo css
+# v0.7.1
 
-v2.2.2
-==================
-* changing ghp.sh to account for Alpha releases
+- updated readme and added stopPropagation on internal events
 
-v2.2.1
-==================
-* fixed event propogation per #26
+# v0.7.0
 
-v2.2.0
-==================
-* added capability to disable a dropdown item
+- removed px-dropdown-lock-width
+- added readonly 'value' attribute on dropdown, computed from display-value. Fire "change" event on dropdown when value changes
 
-v2.1.4
-==================
-* added styles for validation classes from px-forms-design
+# v0.6.2
 
-v2.1.3
-==================
-* fix missing comma in bower.json
+- more data-table fixes. Fire px-dropdown-lock-width event when requiring a container to lock its width to the dropdown width.
 
-v2.1.2
-==================
-* updating dropdown styles to match spec and adding checkbox mode to demo
+# v0.6.1
 
-v2.1.1
-==================
-* Updated iron-dropdown dependency
+- fix bug when embedded in data-table
 
-v2.1.0
-==================
-* Updated dependencies
+# v0.6.0
 
-v2.0.8
-==================
-* changing browser in wct testing from safari 8 to safari 10 on elcapitan
+- fix firefox positioning bug
+- added allow-outside-scroll attribute on px-dropdown-content. By default lock scrolling on the dropdown when open and prevent scrolling everywhere else.
 
-v2.0.7
-==================
-* added --px-dropdown-text-color css var
+# v0.5.0
 
-v2.0.6
-==================
-* changing all devDeps to ^
+- px-dropdown-text now already included in px-dropdown. Use display-value attribute on px-dropdown to set its text
 
-v2.0.5
-==================
-* Update px-theme to 2.0.1 and update test fixtures
+# v0.4.1
 
-v2.0.4
-==================
-* removing px-theme style call
+- fixed Shadow Dom support
+- fixed IE10 selected value bug
 
+# v0.4.0
 
-v2.0.3
-==================
-* changing Gruntfile.js to gulpfile.js
+- new attribute on px-dropdown: prevent-close-on-outside-click. Default to false and dropdown now automatically closes on outside clicks
 
-v2.0.2
-==================
-* fixed style variables for consistency
+# v0.3.0
 
-v2.0.1
-==================
-* added the style header in the docs
+- make it more obvious it is possible to scroll by reducing the height of the dropdown by half an item's height if the dropdown has scrollbars
+- added bound-target attribute: if set the dropdown will always try to fit within this HTMLElement
+- fixed setDivWidth on click function bug.
 
-v2.0.0
-==================
-* added css variables, and changed previous ones to match the BEM naming.
+# v0.2.0
 
-v1.0.1
-==================
-* bower updating px-demo-snippet
+- changed the way the initial text is passed in (added attribute display-value)
+- added a hide-chevron attribute
+- Updated styles
+- max container character count now also applies to the px-text portion of the component.
 
-v1.0.0
-===============
-* accepted PR that fixed multiple checkbox behavior and standardized event names
+# v0.1.0
 
-v0.13.0
-===============
-* added property for disabled dropdown
+- added smart orientation which detects if the dropdown will show below the viewport, and display the dropdown above the element clicked.
+- Updated styles/spacing/chevron
+- removed the need to call px-dropdown-chevron - it's baked into the component now.
 
-v0.12.3
-===============
-* Updated dependencies
+# v0.0.3
 
-v0.12.1
-===============
-* Fixed dropdown-content demo
+- Updated License
 
-v0.12.0
-===============
-* Uprev
+# v0.0.2
 
-v0.11.5
-===============
-* fixed demo bug
+- added hover and opened styles/classes
 
-v0.11.4
-===============
-* removed the text and chevron demo pages, since they are internal, and made the components load with parentComponent, so they can work with codepen.
+# v0.0.1
 
-v0.11.3
-===============
-* added parent-name to demo-snippet and changed over the polymer-font-awesome library
-
-v0.11.2
-===============
-* added other demo pages to vulcanize
-
-v0.11.1
-===============
-* updated demo bugs
-
-v0.11.0
-===============
-* Added 'selectedKey' attribute to dropdown, representing the key of the currently selected item
-
-v0.10.5
-===============
-* updated mega demo styles and bower px-demo-snippet to ^
-
-v0.10.4
-===============
-* added image to readme, removed watch, added view on github
-
-v0.10.3
-===============
-* updated gh-pages script to vulcanize demo
-
-v0.10.1
-===============
-* Fix to make px-dropdown play with Angular nicely. Added Angular demo, also.
-
-v0.10.0
-===============
-* Upgrade to Polymer 1.5.0
-
-v0.9.9
-===============
-* Added --dropdown_content_margin to control the dropdown content margin
-
-v0.9.8
-===============
-* Added --dropdown_text_padding to control text padding and make internal element use flex layout
-
-v0.9.7
-===============
-* up minor version on polymer font awesome
-
-v0.9.6
-===============
-* removed dependency on .px-dropdown-content class
-
-v0.9.5
-===============
-* added oss_notice to bower ignore
-
-v0.9.4
-===============
-* added pull request test for travis and updated OSS Notice
-
-v0.9.3
-===============
-* added auto github pages functionality
-
-v0.9.2
-===============
-* Minor CSS text colour fix.
-
-v0.9.1
-===============
-* Fix bug where selecting an item having a tooltip would set the value and displayValue to this item + its tooltip
-
-v0.9.0
-===============
-* Upgrade to Polymer 1.4.0
-
-v0.8.1
-================
-* display-value attribute now notifies
-
-v0.8.0
-================
-* Apply scroll lock only if content has vertical scroll bars
-* added 'checkbox-mode' attribute on px-dropdown-content, allowing it to function as a list of items with checkboxes
-
-v0.7.4
-================
-* brought the default border color for dropdown.
-
-v0.7.3
-================
-* Fix tooltip bug in datatable
-v0.7.2
-================
-* removed documentation from README, and replaced with link to github page, where cos are auto generated.
-
-v0.7.1
-================
-* updated readme and added stopPropagation on internal events
-
-v0.7.0
-================
-* removed px-dropdown-lock-width
-* added readonly 'value' attribute on dropdown, computed from display-value. Fire "change" event on dropdown when value changes
-
-v0.6.2
-================
-* more data-table fixes. Fire px-dropdown-lock-width event when requiring a container to lock its width to the dropdown width.
-
-v0.6.1
-================
-* fix bug when embedded in data-table
-
-v0.6.0
-=================
-* fix firefox positioning bug
-* added allow-outside-scroll attribute on px-dropdown-content. By default lock scrolling on the dropdown when open and prevent scrolling everywhere else.
-
-v0.5.0
-==================
-* px-dropdown-text now already included in px-dropdown. Use display-value attribute on px-dropdown to set its text
-
-v0.4.1
-==================
-* fixed Shadow Dom support
-* fixed IE10 selected value bug
-
-v0.4.0
-==================
-* new attribute on px-dropdown: prevent-close-on-outside-click. Default to false and dropdown now automatically closes on outside clicks
-
-v0.3.0
-==================
-* make it more obvious it is possible to scroll by reducing the height of the dropdown by half an item's height if the dropdown has scrollbars
-* added bound-target attribute: if set the dropdown will always try to fit within this HTMLElement
-* fixed setDivWidth on click function bug.
-
-v0.2.0
-==================
-* changed the way the initial text is passed in (added attribute display-value)
-* added a hide-chevron attribute
-* Updated styles
-* max container character count now also applies to the px-text portion of the component.
-
-v0.1.0
-==================
-* added smart orientation which detects if the dropdown will show below the viewport, and display the dropdown above the element clicked.
-* Updated styles/spacing/chevron
-* removed the need to call px-dropdown-chevron - it's baked into the component now.
-
-v0.0.3
-==================
-* Updated License
-
-v0.0.2
-==================
-* added hover and opened styles/classes
-
-v0.0.1
-==================
-* Initial release, px-dropdown supports receiving an array of items, and displays a dropdown list when either the text or the chevron are clicked. A click on the item itself fires off a "px-dropdown-click" event, and passed the click event with it.
+- Initial release, px-dropdown supports receiving an array of items, and displays a dropdown list when either the text or the chevron are clicked. A click on the item itself fires off a "px-dropdown-click" event, and passed the click event with it.
diff --git a/bower.json b/bower.json
index a47e70ae..a5017f4d 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "px-dropdown",
-  "version": "4.7.9",
+  "version": "4.7.10",
   "main": [
     "px-dropdown.html"
   ],
diff --git a/demo/simple_demo.html b/demo/simple_demo.html
index e126fa3a..2bd5596e 100644
--- a/demo/simple_demo.html
+++ b/demo/simple_demo.html
@@ -51,8 +51,19 @@
       items='[{"key":"1","val":"test test test test test test test test test test test test test test test test iPhone"},{"key":"2","val":"Android"},{"key":"3","val":"Blackberry"},{"key":"4","val":"I am a menu item so I cannot be selected","disableSelect":true},{"key":"5","val":"Flip Phone","disabled":true}]'>
     </px-dropdown>
     </br>
+    <p>Disabled Dropdown</p>
+    <px-dropdown
+        display-value="Disabled"
+        hoist
+        disabled
+        container-type="disDropdown"
+        items='[{"key":"1","val":"iPhone"},{"key":"2","val":"Android"},{"key":"3","val":"Blackberry"},{"key":"4","val":"Windows Windows Windows Windows Windows Windows Windows Phone"},{"key":"5","val":"Flip Phone","disabled":true}]'
+        multi>
+    </px-dropdown>
+    </br>
     <p>Multi Select</p>
     <px-dropdown
+      id="multiSelect"
       hoist
       container-type="bar"
       items='[{"key":"1","val":"iPhone"},{"key":"2","val":"Android"},{"key":"3","val":"Blackberry"},{"key":"4","val":"Windows Windows Windows Windows Windows Windows Windows Phone"},{"key":"5","val":"Flip Phone","disabled":true}]'
@@ -61,11 +72,20 @@
     </br>
     <p>Disable Select (Like a Menu)</p>
     <px-dropdown
+      id="disableSelect"
       container-type="baz"
       items='[{"key":"1","val":"Do something"},{"key":"2","val":"Do something else"},{"key":"3","val":"Do one"}]'
       disable-select>
     </px-dropdown>
     </br>
+    <p>Set Items to Read Only</p>
+    <px-dropdown 
+      id="readOnly"
+      display-value="Read Only Items"
+      container-type="readOnly"
+      read-only items='[{"key":"1","val":"One Read Only"},{"key":"2","val":"Two Read Only"},{"key":"3","val":"Three Read Only"},{"key":"4","val":"Four Read Only"}]'>
+    </px-dropdown>
+    </br>
     <p>Search Mode</p>
     <px-dropdown
       items='["Alabama", "Alaska", "American Samoa", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "District Of Columbia", "Federated States Of Micronesia", "Florida", "Georgia", "Guam", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Marshall Islands", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Northern Mariana Islands", "Ohio", "Oklahoma", "Oregon", "Palau", "Pennsylvania", "Puerto Rico", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virgin Islands", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]'
diff --git a/package.json b/package.json
index 6f70a0e8..3408e102 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "px-dropdown",
   "author": "General Electric",
   "description": "A Predix UI Dropdown component",
-  "version": "4.7.9",
+  "version": "4.7.10",
   "extName": null,
   "repository": {
     "type": "git",
diff --git a/px-dropdown-api.json b/px-dropdown-api.json
index 8943f2b7..00a31835 100644
--- a/px-dropdown-api.json
+++ b/px-dropdown-api.json
@@ -1012,11 +1012,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 347,
+              "line": 354,
               "column": 7
             },
             "end": {
-              "line": 350,
+              "line": 357,
               "column": 7
             }
           },
@@ -1032,11 +1032,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 359,
+              "line": 366,
               "column": 6
             },
             "end": {
-              "line": 369,
+              "line": 376,
               "column": 7
             }
           },
@@ -1074,11 +1074,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 351,
+              "line": 358,
               "column": 6
             },
             "end": {
-              "line": 354,
+              "line": 361,
               "column": 7
             }
           },
@@ -1271,6 +1271,25 @@
             "polymer": {}
           }
         },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "description": "If set, the items list will be in read only mode, the list is not disabled\nbut the user can not click the items. No events are fired.",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 172,
+              "column": 7
+            },
+            "end": {
+              "line": 174,
+              "column": 7
+            }
+          },
+          "metadata": {
+            "polymer": {}
+          }
+        },
         {
           "name": "disableTruncate",
           "type": "boolean",
@@ -1278,11 +1297,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 173,
+              "line": 180,
               "column": 6
             },
             "end": {
-              "line": 175,
+              "line": 182,
               "column": 7
             }
           },
@@ -1297,11 +1316,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 180,
+              "line": 187,
               "column": 6
             },
             "end": {
-              "line": 183,
+              "line": 190,
               "column": 7
             }
           },
@@ -1318,11 +1337,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 198,
+              "line": 205,
               "column": 6
             },
             "end": {
-              "line": 201,
+              "line": 208,
               "column": 7
             }
           },
@@ -1339,11 +1358,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 207,
+              "line": 214,
               "column": 6
             },
             "end": {
-              "line": 209,
+              "line": 216,
               "column": 7
             }
           },
@@ -1358,11 +1377,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 214,
+              "line": 221,
               "column": 6
             },
             "end": {
-              "line": 217,
+              "line": 224,
               "column": 7
             }
           },
@@ -1379,11 +1398,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 222,
+              "line": 229,
               "column": 6
             },
             "end": {
-              "line": 225,
+              "line": 232,
               "column": 7
             }
           },
@@ -1400,11 +1419,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 230,
+              "line": 237,
               "column": 6
             },
             "end": {
-              "line": 233,
+              "line": 240,
               "column": 7
             }
           },
@@ -1421,11 +1440,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 237,
+              "line": 244,
               "column": 6
             },
             "end": {
-              "line": 240,
+              "line": 247,
               "column": 7
             }
           },
@@ -1442,11 +1461,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 246,
+              "line": 253,
               "column": 6
             },
             "end": {
-              "line": 248,
+              "line": 255,
               "column": 7
             }
           },
@@ -1461,11 +1480,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 252,
+              "line": 259,
               "column": 6
             },
             "end": {
-              "line": 254,
+              "line": 261,
               "column": 7
             }
           },
@@ -1480,11 +1499,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 259,
+              "line": 266,
               "column": 6
             },
             "end": {
-              "line": 261,
+              "line": 268,
               "column": 7
             }
           },
@@ -1499,11 +1518,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 266,
+              "line": 273,
               "column": 6
             },
             "end": {
-              "line": 269,
+              "line": 276,
               "column": 7
             }
           },
@@ -1520,11 +1539,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 275,
+              "line": 282,
               "column": 6
             },
             "end": {
-              "line": 277,
+              "line": 284,
               "column": 7
             }
           },
@@ -1539,11 +1558,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 282,
+              "line": 289,
               "column": 6
             },
             "end": {
-              "line": 284,
+              "line": 291,
               "column": 7
             }
           },
@@ -1558,11 +1577,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 290,
+              "line": 297,
               "column": 6
             },
             "end": {
-              "line": 292,
+              "line": 299,
               "column": 7
             }
           },
@@ -1577,11 +1596,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 298,
+              "line": 305,
               "column": 6
             },
             "end": {
-              "line": 300,
+              "line": 307,
               "column": 7
             }
           },
@@ -1596,11 +1615,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 307,
+              "line": 314,
               "column": 6
             },
             "end": {
-              "line": 309,
+              "line": 316,
               "column": 7
             }
           },
@@ -1615,11 +1634,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 316,
+              "line": 323,
               "column": 6
             },
             "end": {
-              "line": 318,
+              "line": 325,
               "column": 7
             }
           },
@@ -1634,11 +1653,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 323,
+              "line": 330,
               "column": 6
             },
             "end": {
-              "line": 326,
+              "line": 333,
               "column": 7
             }
           },
@@ -1653,11 +1672,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 330,
+              "line": 337,
               "column": 6
             },
             "end": {
-              "line": 332,
+              "line": 339,
               "column": 7
             }
           },
@@ -1672,11 +1691,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 337,
+              "line": 344,
               "column": 6
             },
             "end": {
-              "line": 339,
+              "line": 346,
               "column": 7
             }
           },
@@ -1691,11 +1710,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 373,
+              "line": 380,
               "column": 6
             },
             "end": {
-              "line": 375,
+              "line": 382,
               "column": 7
             }
           },
@@ -1710,11 +1729,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 380,
+              "line": 387,
               "column": 6
             },
             "end": {
-              "line": 382,
+              "line": 389,
               "column": 7
             }
           },
@@ -1729,11 +1748,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 387,
+              "line": 394,
               "column": 6
             },
             "end": {
-              "line": 390,
+              "line": 397,
               "column": 7
             }
           },
@@ -1749,11 +1768,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 395,
+              "line": 402,
               "column": 7
             },
             "end": {
-              "line": 400,
+              "line": 407,
               "column": 7
             }
           },
@@ -1903,11 +1922,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 412,
+              "line": 419,
               "column": 4
             },
             "end": {
-              "line": 416,
+              "line": 423,
               "column": 5
             }
           },
@@ -1920,11 +1939,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 417,
+              "line": 424,
               "column": 4
             },
             "end": {
-              "line": 421,
+              "line": 428,
               "column": 5
             }
           },
@@ -1937,11 +1956,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 422,
+              "line": 429,
               "column": 4
             },
             "end": {
-              "line": 424,
+              "line": 431,
               "column": 5
             }
           },
@@ -1954,11 +1973,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 425,
+              "line": 432,
               "column": 4
             },
             "end": {
-              "line": 431,
+              "line": 438,
               "column": 5
             }
           },
@@ -1975,11 +1994,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 432,
+              "line": 439,
               "column": 4
             },
             "end": {
-              "line": 434,
+              "line": 441,
               "column": 5
             }
           },
@@ -1992,11 +2011,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 435,
+              "line": 442,
               "column": 4
             },
             "end": {
-              "line": 437,
+              "line": 444,
               "column": 5
             }
           },
@@ -2009,11 +2028,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 441,
+              "line": 448,
               "column": 4
             },
             "end": {
-              "line": 450,
+              "line": 457,
               "column": 5
             }
           },
@@ -2033,11 +2052,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 451,
+              "line": 458,
               "column": 4
             },
             "end": {
-              "line": 460,
+              "line": 467,
               "column": 5
             }
           },
@@ -2050,11 +2069,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 470,
+              "line": 477,
               "column": 4
             },
             "end": {
-              "line": 499,
+              "line": 506,
               "column": 5
             }
           },
@@ -2067,11 +2086,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 504,
+              "line": 511,
               "column": 4
             },
             "end": {
-              "line": 524,
+              "line": 532,
               "column": 5
             }
           },
@@ -2088,11 +2107,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 528,
+              "line": 536,
               "column": 4
             },
             "end": {
-              "line": 530,
+              "line": 538,
               "column": 5
             }
           },
@@ -2109,11 +2128,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 534,
+              "line": 542,
               "column": 4
             },
             "end": {
-              "line": 536,
+              "line": 544,
               "column": 5
             }
           },
@@ -2133,11 +2152,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 550,
+              "line": 558,
               "column": 4
             },
             "end": {
-              "line": 562,
+              "line": 570,
               "column": 5
             }
           },
@@ -2154,11 +2173,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 567,
+              "line": 575,
               "column": 4
             },
             "end": {
-              "line": 594,
+              "line": 602,
               "column": 5
             }
           },
@@ -2175,11 +2194,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 599,
+              "line": 607,
               "column": 4
             },
             "end": {
-              "line": 625,
+              "line": 633,
               "column": 5
             }
           },
@@ -2196,11 +2215,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 629,
+              "line": 637,
               "column": 4
             },
             "end": {
-              "line": 631,
+              "line": 639,
               "column": 5
             }
           },
@@ -2213,11 +2232,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 636,
+              "line": 644,
               "column": 4
             },
             "end": {
-              "line": 646,
+              "line": 654,
               "column": 5
             }
           },
@@ -2230,11 +2249,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 650,
+              "line": 658,
               "column": 4
             },
             "end": {
-              "line": 657,
+              "line": 665,
               "column": 5
             }
           },
@@ -2260,11 +2279,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 661,
+              "line": 669,
               "column": 4
             },
             "end": {
-              "line": 666,
+              "line": 674,
               "column": 5
             }
           },
@@ -2284,11 +2303,11 @@
           "privacy": "private",
           "sourceRange": {
             "start": {
-              "line": 672,
+              "line": 680,
               "column": 4
             },
             "end": {
-              "line": 675,
+              "line": 683,
               "column": 5
             }
           },
@@ -2301,11 +2320,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 680,
+              "line": 688,
               "column": 4
             },
             "end": {
-              "line": 704,
+              "line": 712,
               "column": 5
             }
           },
@@ -2319,17 +2338,34 @@
             }
           ]
         },
+        {
+          "name": "_setReadOnly",
+          "description": "Adds the class that sets pointer-events = none to disable user interactions.",
+          "privacy": "protected",
+          "sourceRange": {
+            "start": {
+              "line": 716,
+              "column": 4
+            },
+            "end": {
+              "line": 720,
+              "column": 5
+            }
+          },
+          "metadata": {},
+          "params": []
+        },
         {
           "name": "_setFocusedOption",
           "description": "Adds or removes the focused class for keyboard navigation.",
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 708,
+              "line": 724,
               "column": 4
             },
             "end": {
-              "line": 716,
+              "line": 732,
               "column": 5
             }
           },
@@ -2349,11 +2385,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 720,
+              "line": 736,
               "column": 4
             },
             "end": {
-              "line": 805,
+              "line": 821,
               "column": 5
             }
           },
@@ -2370,11 +2406,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 809,
+              "line": 825,
               "column": 4
             },
             "end": {
-              "line": 817,
+              "line": 833,
               "column": 5
             }
           },
@@ -2391,11 +2427,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 821,
+              "line": 837,
               "column": 4
             },
             "end": {
-              "line": 823,
+              "line": 839,
               "column": 5
             }
           },
@@ -2412,11 +2448,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 827,
+              "line": 843,
               "column": 4
             },
             "end": {
-              "line": 829,
+              "line": 845,
               "column": 5
             }
           },
@@ -2442,11 +2478,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 833,
+              "line": 849,
               "column": 4
             },
             "end": {
-              "line": 835,
+              "line": 851,
               "column": 5
             }
           },
@@ -2463,11 +2499,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 839,
+              "line": 855,
               "column": 4
             },
             "end": {
-              "line": 841,
+              "line": 857,
               "column": 5
             }
           },
@@ -2490,11 +2526,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 842,
+              "line": 858,
               "column": 4
             },
             "end": {
-              "line": 844,
+              "line": 860,
               "column": 5
             }
           },
@@ -2514,11 +2550,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 845,
+              "line": 861,
               "column": 4
             },
             "end": {
-              "line": 847,
+              "line": 863,
               "column": 5
             }
           },
@@ -2538,11 +2574,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 848,
+              "line": 864,
               "column": 4
             },
             "end": {
-              "line": 850,
+              "line": 866,
               "column": 5
             }
           },
@@ -2562,11 +2598,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 851,
+              "line": 867,
               "column": 4
             },
             "end": {
-              "line": 853,
+              "line": 869,
               "column": 5
             }
           },
@@ -2590,7 +2626,7 @@
           "column": 10
         },
         "end": {
-          "line": 854,
+          "line": 870,
           "column": 3
         }
       },
@@ -2602,11 +2638,11 @@
           "description": "A valid IETF language tag as a string that `app-localize-behavior` will\nuse to localize this component.\n\nSee https://github.com/PolymerElements/app-localize-behavior for API\ndocumentation and more information.",
           "sourceRange": {
             "start": {
-              "line": 347,
+              "line": 354,
               "column": 7
             },
             "end": {
-              "line": 350,
+              "line": 357,
               "column": 7
             }
           },
@@ -2618,11 +2654,11 @@
           "description": "A dictionary of strings used within the component for AppLocalizeBehavior\nto use, based on the selected `language` property.",
           "sourceRange": {
             "start": {
-              "line": 359,
+              "line": 366,
               "column": 6
             },
             "end": {
-              "line": 369,
+              "line": 376,
               "column": 7
             }
           },
@@ -2652,11 +2688,11 @@
           "description": "",
           "sourceRange": {
             "start": {
-              "line": 351,
+              "line": 358,
               "column": 6
             },
             "end": {
-              "line": 354,
+              "line": 361,
               "column": 7
             }
           },
@@ -2811,16 +2847,32 @@
           "metadata": {},
           "type": "boolean"
         },
+        {
+          "name": "read-only",
+          "description": "If set, the items list will be in read only mode, the list is not disabled\nbut the user can not click the items. No events are fired.",
+          "sourceRange": {
+            "start": {
+              "line": 172,
+              "column": 7
+            },
+            "end": {
+              "line": 174,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "type": "boolean"
+        },
         {
           "name": "disable-truncate",
           "description": "By default, dropdown items longer than the max-width of the dropdown\nwill be truncated, with the full string available on hover tooltip.\nIf this property is set, items will not be truncated, but will wrap instead.",
           "sourceRange": {
             "start": {
-              "line": 173,
+              "line": 180,
               "column": 6
             },
             "end": {
-              "line": 175,
+              "line": 182,
               "column": 7
             }
           },
@@ -2832,11 +2884,11 @@
           "description": "The text that is displayed in the label of the dropdown.\nUpdated when the selections change.",
           "sourceRange": {
             "start": {
-              "line": 180,
+              "line": 187,
               "column": 6
             },
             "end": {
-              "line": 183,
+              "line": 190,
               "column": 7
             }
           },
@@ -2848,11 +2900,11 @@
           "description": "An array that contains the list of items which show up in the dropdown.\nEach item can either be a simple string, or an object consisting of:\n* 'key' - a unique identifier (number or string)\n* 'val' - the actual text that is displayed\n* 'disabled' - whether the item should be disabled completely - can't be selected nor used as a menu option (optional)\n* 'disableSelect` - whether the item should be disabled for selection, but can still be used as a menu option (optional)\n* 'selected' - whether the item should be selected at instantiation (optional)\n* 'icon' - an icon name from the px-icon-set to display next to the item (optional)\n* 'color' - the color to use for the icon - if not specified, the default text colors will be used (optional)\n\nNote: if you specify more than one item as `selected`, but `multi` is not enabled,\nonly the *first* selected item will be chosen. See also `clearSelectionsOnChange`.",
           "sourceRange": {
             "start": {
-              "line": 198,
+              "line": 205,
               "column": 6
             },
             "end": {
-              "line": 201,
+              "line": 208,
               "column": 7
             }
           },
@@ -2864,11 +2916,11 @@
           "description": "If set to true, multiple values can be selected in the dropdown.\nSelected values are reflected in the `selectedValues` property.\nIf set to false, a single selected value is reflected in `selected`.",
           "sourceRange": {
             "start": {
-              "line": 207,
+              "line": 214,
               "column": 6
             },
             "end": {
-              "line": 209,
+              "line": 216,
               "column": 7
             }
           },
@@ -2880,11 +2932,11 @@
           "description": "Which property of each dropdown item will be used to get/set\nthe selected items - should be one of \"key\" or \"val\".",
           "sourceRange": {
             "start": {
-              "line": 214,
+              "line": 221,
               "column": 6
             },
             "end": {
-              "line": 217,
+              "line": 224,
               "column": 7
             }
           },
@@ -2896,11 +2948,11 @@
           "description": "Gets or sets the selected item when `multi` is false.\nWill either be a single key or value based on `selectBy`.",
           "sourceRange": {
             "start": {
-              "line": 222,
+              "line": 229,
               "column": 6
             },
             "end": {
-              "line": 225,
+              "line": 232,
               "column": 7
             }
           },
@@ -2912,11 +2964,11 @@
           "description": "Gets or sets the selected items when `multi` is true.\nWill either be an array of keys or values based on `selectBy`.",
           "sourceRange": {
             "start": {
-              "line": 230,
+              "line": 237,
               "column": 6
             },
             "end": {
-              "line": 233,
+              "line": 240,
               "column": 7
             }
           },
@@ -2928,11 +2980,11 @@
           "description": "A read-only array of the selected `<div>` elements in the dropdown.",
           "sourceRange": {
             "start": {
-              "line": 237,
+              "line": 244,
               "column": 6
             },
             "end": {
-              "line": 240,
+              "line": 247,
               "column": 7
             }
           },
@@ -2944,11 +2996,11 @@
           "description": "By default, the dropdown will constrain scrolling on the page to\nitself when opened. Set to true in order to allow scrolling of\nthe page while the dropdown is open.",
           "sourceRange": {
             "start": {
-              "line": 246,
+              "line": 253,
               "column": 6
             },
             "end": {
-              "line": 248,
+              "line": 255,
               "column": 7
             }
           },
@@ -2960,11 +3012,11 @@
           "description": "Whether the dropdown should be disabled and non-interactive.",
           "sourceRange": {
             "start": {
-              "line": 252,
+              "line": 259,
               "column": 6
             },
             "end": {
-              "line": 254,
+              "line": 261,
               "column": 7
             }
           },
@@ -2976,11 +3028,11 @@
           "description": "If true, the dropdown will include a search box, whereby the\ndropdown items can be filtered with a search term.",
           "sourceRange": {
             "start": {
-              "line": 259,
+              "line": 266,
               "column": 6
             },
             "end": {
-              "line": 261,
+              "line": 268,
               "column": 7
             }
           },
@@ -2992,11 +3044,11 @@
           "description": "The value of the search box, used for filtering the dropdown\nitems when searchMode is true.",
           "sourceRange": {
             "start": {
-              "line": 266,
+              "line": 273,
               "column": 6
             },
             "end": {
-              "line": 269,
+              "line": 276,
               "column": 7
             }
           },
@@ -3008,11 +3060,11 @@
           "description": "What to sort the dropdown items by - one of \"key\" or \"val\".\nBy default, the items will be displayed in the order they are\npassed into the component.",
           "sourceRange": {
             "start": {
-              "line": 275,
+              "line": 282,
               "column": 6
             },
             "end": {
-              "line": 277,
+              "line": 284,
               "column": 7
             }
           },
@@ -3024,11 +3076,11 @@
           "description": "The height of the trigger element, used for calculating offset distance\nfor the dropdown. Set this value if you use the `trigger` slot.",
           "sourceRange": {
             "start": {
-              "line": 282,
+              "line": 289,
               "column": 6
             },
             "end": {
-              "line": 284,
+              "line": 291,
               "column": 7
             }
           },
@@ -3040,11 +3092,11 @@
           "description": "By default, the dropdown menu will be flush against the trigger.\nEnable this property to show a caret between the two. Useful\nin iconic menus and used by the application/product switcher.",
           "sourceRange": {
             "start": {
-              "line": 290,
+              "line": 297,
               "column": 6
             },
             "end": {
-              "line": 292,
+              "line": 299,
               "column": 7
             }
           },
@@ -3056,11 +3108,11 @@
           "description": "By default the dropdown will attempt to automatically align itself\nvertically and horizontally based on the available space. Set this flag\nto turn off that automatic behavior and force a certain `verticalAlign` / `horizontalAlign`.",
           "sourceRange": {
             "start": {
-              "line": 298,
+              "line": 305,
               "column": 6
             },
             "end": {
-              "line": 300,
+              "line": 307,
               "column": 7
             }
           },
@@ -3072,11 +3124,11 @@
           "description": "Vertical alignment of the dropdown relative to the trigger.\nShould be one of `top` or `bottom` where `top` means that the dropdown\nand trigger are aligned at the top, so the dropdown will extend _below_ the trigger.\nOverridden by dynamic alignment, unless `disableDynamicAlign` is true.",
           "sourceRange": {
             "start": {
-              "line": 307,
+              "line": 314,
               "column": 6
             },
             "end": {
-              "line": 309,
+              "line": 316,
               "column": 7
             }
           },
@@ -3088,11 +3140,11 @@
           "description": "Horizontal alignment of the dropdown relative to the trigger.\nShould be one of `left` or `right` where `left` means that the dropdown\nand trigger are aligned on their left side, so the dropdown will extend _to the right_.\nOverridden by dynamic alignment, unless `disableDynamicAlign` is true.",
           "sourceRange": {
             "start": {
-              "line": 316,
+              "line": 323,
               "column": 6
             },
             "end": {
-              "line": 318,
+              "line": 325,
               "column": 7
             }
           },
@@ -3104,11 +3156,11 @@
           "description": "Whether to display the mobile version of the dropdown, which appears as a fullscreen modal.\nAutomatically detected based on the breakpoint specified in `mobileAt`.",
           "sourceRange": {
             "start": {
-              "line": 323,
+              "line": 330,
               "column": 6
             },
             "end": {
-              "line": 326,
+              "line": 333,
               "column": 7
             }
           },
@@ -3120,11 +3172,11 @@
           "description": "The breakpoint (in # of pixels) at which to display the mobile version of px-dropdown.",
           "sourceRange": {
             "start": {
-              "line": 330,
+              "line": 337,
               "column": 6
             },
             "end": {
-              "line": 332,
+              "line": 339,
               "column": 7
             }
           },
@@ -3136,11 +3188,11 @@
           "description": "By default, the mobile dropdown will show Apply/Clear buttons.\nSet this property to hide them.",
           "sourceRange": {
             "start": {
-              "line": 337,
+              "line": 344,
               "column": 6
             },
             "end": {
-              "line": 339,
+              "line": 346,
               "column": 7
             }
           },
@@ -3152,11 +3204,11 @@
           "description": "Binding target for iron-a11y-keys",
           "sourceRange": {
             "start": {
-              "line": 373,
+              "line": 380,
               "column": 6
             },
             "end": {
-              "line": 375,
+              "line": 382,
               "column": 7
             }
           },
@@ -3344,11 +3396,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 189,
+              "line": 190,
               "column": 6
             },
             "end": {
-              "line": 193,
+              "line": 194,
               "column": 7
             }
           },
@@ -3366,11 +3418,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 197,
+              "line": 198,
               "column": 6
             },
             "end": {
-              "line": 200,
+              "line": 201,
               "column": 7
             }
           },
@@ -3386,11 +3438,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 205,
+              "line": 206,
               "column": 6
             },
             "end": {
-              "line": 207,
+              "line": 208,
               "column": 7
             }
           },
@@ -3405,11 +3457,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 212,
+              "line": 213,
               "column": 6
             },
             "end": {
-              "line": 215,
+              "line": 216,
               "column": 7
             }
           },
@@ -3425,11 +3477,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 221,
+              "line": 222,
               "column": 6
             },
             "end": {
-              "line": 226,
+              "line": 227,
               "column": 7
             }
           },
@@ -3448,11 +3500,31 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 235,
+              "line": 236,
               "column": 6
             },
             "end": {
-              "line": 238,
+              "line": 239,
+              "column": 7
+            }
+          },
+          "metadata": {
+            "polymer": {}
+          },
+          "defaultValue": "false"
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "description": "If set to true, users can still open the dropdown but can not click on items",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 243,
+              "column": 6
+            },
+            "end": {
+              "line": 246,
               "column": 7
             }
           },
@@ -3468,11 +3540,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 244,
+              "line": 252,
               "column": 6
             },
             "end": {
-              "line": 247,
+              "line": 255,
               "column": 7
             }
           },
@@ -3488,11 +3560,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 253,
+              "line": 261,
               "column": 6
             },
             "end": {
-              "line": 256,
+              "line": 264,
               "column": 7
             }
           },
@@ -3508,11 +3580,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 261,
+              "line": 269,
               "column": 7
             },
             "end": {
-              "line": 263,
+              "line": 271,
               "column": 7
             }
           },
@@ -3527,11 +3599,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 278,
+              "line": 286,
               "column": 6
             },
             "end": {
-              "line": 284,
+              "line": 292,
               "column": 7
             }
           },
@@ -3549,11 +3621,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 290,
+              "line": 298,
               "column": 6
             },
             "end": {
-              "line": 293,
+              "line": 301,
               "column": 7
             }
           },
@@ -3569,11 +3641,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 298,
+              "line": 306,
               "column": 6
             },
             "end": {
-              "line": 301,
+              "line": 309,
               "column": 7
             }
           },
@@ -3589,11 +3661,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 306,
+              "line": 314,
               "column": 6
             },
             "end": {
-              "line": 310,
+              "line": 318,
               "column": 7
             }
           },
@@ -3611,11 +3683,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 315,
+              "line": 323,
               "column": 6
             },
             "end": {
-              "line": 318,
+              "line": 326,
               "column": 7
             }
           },
@@ -3632,11 +3704,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 322,
+              "line": 330,
               "column": 6
             },
             "end": {
-              "line": 328,
+              "line": 336,
               "column": 7
             }
           },
@@ -3654,11 +3726,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 334,
+              "line": 342,
               "column": 6
             },
             "end": {
-              "line": 337,
+              "line": 345,
               "column": 7
             }
           },
@@ -3674,11 +3746,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 342,
+              "line": 350,
               "column": 6
             },
             "end": {
-              "line": 345,
+              "line": 353,
               "column": 7
             }
           },
@@ -3694,11 +3766,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 349,
+              "line": 357,
               "column": 6
             },
             "end": {
-              "line": 352,
+              "line": 360,
               "column": 7
             }
           },
@@ -3714,11 +3786,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 357,
+              "line": 365,
               "column": 6
             },
             "end": {
-              "line": 360,
+              "line": 368,
               "column": 7
             }
           },
@@ -3734,11 +3806,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 365,
+              "line": 373,
               "column": 6
             },
             "end": {
-              "line": 368,
+              "line": 376,
               "column": 7
             }
           },
@@ -3754,11 +3826,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 374,
+              "line": 382,
               "column": 6
             },
             "end": {
-              "line": 376,
+              "line": 384,
               "column": 7
             }
           },
@@ -3773,11 +3845,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 382,
+              "line": 390,
               "column": 6
             },
             "end": {
-              "line": 385,
+              "line": 393,
               "column": 7
             }
           },
@@ -3793,11 +3865,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 393,
+              "line": 401,
               "column": 6
             },
             "end": {
-              "line": 396,
+              "line": 404,
               "column": 7
             }
           },
@@ -3813,11 +3885,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 401,
+              "line": 409,
               "column": 6
             },
             "end": {
-              "line": 404,
+              "line": 412,
               "column": 7
             }
           },
@@ -3833,11 +3905,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 409,
+              "line": 417,
               "column": 6
             },
             "end": {
-              "line": 412,
+              "line": 420,
               "column": 7
             }
           },
@@ -3853,11 +3925,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 418,
+              "line": 426,
               "column": 6
             },
             "end": {
-              "line": 421,
+              "line": 429,
               "column": 7
             }
           },
@@ -3873,11 +3945,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 427,
+              "line": 435,
               "column": 6
             },
             "end": {
-              "line": 430,
+              "line": 438,
               "column": 7
             }
           },
@@ -3893,11 +3965,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 437,
+              "line": 445,
               "column": 6
             },
             "end": {
-              "line": 440,
+              "line": 448,
               "column": 7
             }
           },
@@ -3913,11 +3985,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 447,
+              "line": 455,
               "column": 6
             },
             "end": {
-              "line": 450,
+              "line": 458,
               "column": 7
             }
           },
@@ -3933,11 +4005,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 455,
+              "line": 463,
               "column": 6
             },
             "end": {
-              "line": 458,
+              "line": 466,
               "column": 7
             }
           },
@@ -3952,11 +4024,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 462,
+              "line": 470,
               "column": 6
             },
             "end": {
-              "line": 465,
+              "line": 473,
               "column": 7
             }
           },
@@ -3972,11 +4044,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 470,
+              "line": 478,
               "column": 6
             },
             "end": {
-              "line": 473,
+              "line": 481,
               "column": 7
             }
           },
@@ -3992,11 +4064,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 481,
+              "line": 489,
               "column": 6
             },
             "end": {
-              "line": 484,
+              "line": 492,
               "column": 7
             }
           },
@@ -4012,11 +4084,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 485,
+              "line": 493,
               "column": 6
             },
             "end": {
-              "line": 488,
+              "line": 496,
               "column": 7
             }
           },
@@ -4032,11 +4104,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 493,
+              "line": 501,
               "column": 6
             },
             "end": {
-              "line": 504,
+              "line": 512,
               "column": 7
             }
           },
@@ -4052,11 +4124,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 508,
+              "line": 516,
               "column": 6
             },
             "end": {
-              "line": 513,
+              "line": 521,
               "column": 7
             }
           },
@@ -4071,11 +4143,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 518,
+              "line": 526,
               "column": 6
             },
             "end": {
-              "line": 520,
+              "line": 528,
               "column": 7
             }
           },
@@ -4090,11 +4162,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 525,
+              "line": 533,
               "column": 6
             },
             "end": {
-              "line": 528,
+              "line": 536,
               "column": 7
             }
           },
@@ -4110,11 +4182,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 532,
+              "line": 540,
               "column": 6
             },
             "end": {
-              "line": 535,
+              "line": 543,
               "column": 7
             }
           },
@@ -4131,11 +4203,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 537,
+              "line": 545,
               "column": 4
             },
             "end": {
-              "line": 549,
+              "line": 557,
               "column": 5
             }
           },
@@ -4148,11 +4220,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 550,
+              "line": 558,
               "column": 4
             },
             "end": {
-              "line": 558,
+              "line": 566,
               "column": 5
             }
           },
@@ -4165,11 +4237,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 559,
+              "line": 567,
               "column": 4
             },
             "end": {
-              "line": 561,
+              "line": 569,
               "column": 5
             }
           },
@@ -4425,11 +4497,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 562,
+              "line": 570,
               "column": 4
             },
             "end": {
-              "line": 564,
+              "line": 572,
               "column": 5
             }
           },
@@ -4442,11 +4514,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 569,
+              "line": 577,
               "column": 4
             },
             "end": {
-              "line": 574,
+              "line": 582,
               "column": 5
             }
           },
@@ -4459,11 +4531,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 583,
+              "line": 591,
               "column": 4
             },
             "end": {
-              "line": 598,
+              "line": 606,
               "column": 5
             }
           },
@@ -4480,11 +4552,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 602,
+              "line": 610,
               "column": 4
             },
             "end": {
-              "line": 608,
+              "line": 616,
               "column": 5
             }
           },
@@ -4502,11 +4574,11 @@
       "metadata": {},
       "sourceRange": {
         "start": {
-          "line": 176,
+          "line": 177,
           "column": 10
         },
         "end": {
-          "line": 621,
+          "line": 629,
           "column": 3
         }
       },
@@ -4536,11 +4608,11 @@
           "description": "A flag which reflects if the dropdown trigger has been clicked or not.",
           "sourceRange": {
             "start": {
-              "line": 189,
+              "line": 190,
               "column": 6
             },
             "end": {
-              "line": 193,
+              "line": 194,
               "column": 7
             }
           },
@@ -4552,11 +4624,11 @@
           "description": "Whether or not to hide the chevron icon from the dropdown.",
           "sourceRange": {
             "start": {
-              "line": 197,
+              "line": 198,
               "column": 6
             },
             "end": {
-              "line": 200,
+              "line": 201,
               "column": 7
             }
           },
@@ -4568,11 +4640,11 @@
           "description": "A CSS selector which specifies the bounding target the dropdown will be\ndisplayed within. Defaults to `window`.",
           "sourceRange": {
             "start": {
-              "line": 205,
+              "line": 206,
               "column": 6
             },
             "end": {
-              "line": 207,
+              "line": 208,
               "column": 7
             }
           },
@@ -4584,11 +4656,11 @@
           "description": "Whether the dropdown will close when a user clicks\noutside of it. Set to true to prevent dropdown from closing.",
           "sourceRange": {
             "start": {
-              "line": 212,
+              "line": 213,
               "column": 6
             },
             "end": {
-              "line": 215,
+              "line": 216,
               "column": 7
             }
           },
@@ -4600,11 +4672,11 @@
           "description": "The placeholder text to display in the dropdown. If the\nselected value(s) are cleared out, the displayValue will be\nreplaced in the dropdown.",
           "sourceRange": {
             "start": {
-              "line": 221,
+              "line": 222,
               "column": 6
             },
             "end": {
-              "line": 226,
+              "line": 227,
               "column": 7
             }
           },
@@ -4616,11 +4688,27 @@
           "description": "If set to true, users are unable to clear out the dropdown\nonce a selection has been made. Useful for required single-select\ndropdowns where an empty state would be undesirable. Not recommended\nfor multi-select dropdowns, as it means the user will simply lose the ability\nto quickly deselect all checked options (there is currently no mechanism\nwhich requires a user to select at least one option).",
           "sourceRange": {
             "start": {
-              "line": 235,
+              "line": 236,
               "column": 6
             },
             "end": {
-              "line": 238,
+              "line": 239,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "type": "boolean"
+        },
+        {
+          "name": "read-only",
+          "description": "If set to true, users can still open the dropdown but can not click on items",
+          "sourceRange": {
+            "start": {
+              "line": 243,
+              "column": 6
+            },
+            "end": {
+              "line": 246,
               "column": 7
             }
           },
@@ -4632,11 +4720,11 @@
           "description": "If set to true, users can still open the dropdown and click on items,\nbut they will not be selected. Use this property in use cases where\nthe dropdown is used as a menu instead of a form input.",
           "sourceRange": {
             "start": {
-              "line": 244,
+              "line": 252,
               "column": 6
             },
             "end": {
-              "line": 247,
+              "line": 255,
               "column": 7
             }
           },
@@ -4648,11 +4736,11 @@
           "description": "By default, dropdown items longer than the max-width of the dropdown\nwill be truncated, with the full string available on hover tooltip.\nIf this property is set, items will not be truncated, but will wrap instead.",
           "sourceRange": {
             "start": {
-              "line": 253,
+              "line": 261,
               "column": 6
             },
             "end": {
-              "line": 256,
+              "line": 264,
               "column": 7
             }
           },
@@ -4664,11 +4752,11 @@
           "description": "An array that contains the list of items which show up in the dropdown.\nEach item can either be a simple string, or an object consisting of:\n* 'key' - a unique identifier (number or string)\n* 'val' - the actual text that is displayed\n* 'disabled' - whether the item should be disabled completely - can't be selected nor used as a menu option (optional)\n* 'disableSelect` - whether the item should be disabled for selection, but can still be used as a menu option (optional)\n* 'selected' - whether the item should be selected at instantiation (optional)\n* 'icon' - an icon name from the px-icon-set to display next to the item (optional)\n* 'color' - the color to use for the icon - if not specified, the default text colors will be used (optional)\n\nNote: if you specify more than one item as `selected`, but `multi` is not enabled,\nonly the *first* selected item will be chosen. See also `clearSelectionsOnChange`.",
           "sourceRange": {
             "start": {
-              "line": 278,
+              "line": 286,
               "column": 6
             },
             "end": {
-              "line": 284,
+              "line": 292,
               "column": 7
             }
           },
@@ -4680,11 +4768,11 @@
           "description": "If set to true, multiple values can be selected in the dropdown.\nSelected values are reflected in the `selectedValues` property.\nIf set to false, a single selected value is reflected in `selected`.",
           "sourceRange": {
             "start": {
-              "line": 290,
+              "line": 298,
               "column": 6
             },
             "end": {
-              "line": 293,
+              "line": 301,
               "column": 7
             }
           },
@@ -4696,11 +4784,11 @@
           "description": "Which property of each dropdown item will be used to get/set\nthe selected items - should be one of \"key\" or \"val\".",
           "sourceRange": {
             "start": {
-              "line": 298,
+              "line": 306,
               "column": 6
             },
             "end": {
-              "line": 301,
+              "line": 309,
               "column": 7
             }
           },
@@ -4712,11 +4800,11 @@
           "description": "Gets or sets the selected item when `multi` is false.\nWill either be a single key or value based on `selectBy`.",
           "sourceRange": {
             "start": {
-              "line": 306,
+              "line": 314,
               "column": 6
             },
             "end": {
-              "line": 310,
+              "line": 318,
               "column": 7
             }
           },
@@ -4728,11 +4816,11 @@
           "description": "Gets or sets the selected items when `multi` is true.\nWill either be an array of keys or values based on `selectBy`.",
           "sourceRange": {
             "start": {
-              "line": 315,
+              "line": 323,
               "column": 6
             },
             "end": {
-              "line": 318,
+              "line": 326,
               "column": 7
             }
           },
@@ -4744,11 +4832,11 @@
           "description": "A read-only array of the selected `<div>` elements in the dropdown.",
           "sourceRange": {
             "start": {
-              "line": 322,
+              "line": 330,
               "column": 6
             },
             "end": {
-              "line": 328,
+              "line": 336,
               "column": 7
             }
           },
@@ -4760,11 +4848,11 @@
           "description": "By default, the dropdown will constrain scrolling on the page to\nitself when opened. Set to true in order to allow scrolling of\nthe page while the dropdown is open.",
           "sourceRange": {
             "start": {
-              "line": 334,
+              "line": 342,
               "column": 6
             },
             "end": {
-              "line": 337,
+              "line": 345,
               "column": 7
             }
           },
@@ -4776,11 +4864,11 @@
           "description": "Style for the button that invokes the dropdown.\nOne of 'default','bare','bare--primary', 'tertiary', or 'icon'.",
           "sourceRange": {
             "start": {
-              "line": 342,
+              "line": 350,
               "column": 6
             },
             "end": {
-              "line": 345,
+              "line": 353,
               "column": 7
             }
           },
@@ -4792,11 +4880,11 @@
           "description": "Whether the dropdown should be disabled and non-interactive.",
           "sourceRange": {
             "start": {
-              "line": 349,
+              "line": 357,
               "column": 6
             },
             "end": {
-              "line": 352,
+              "line": 360,
               "column": 7
             }
           },
@@ -4808,11 +4896,11 @@
           "description": "If true, the dropdown will include a search box, whereby the\ndropdown items can be filtered with a search term.",
           "sourceRange": {
             "start": {
-              "line": 357,
+              "line": 365,
               "column": 6
             },
             "end": {
-              "line": 360,
+              "line": 368,
               "column": 7
             }
           },
@@ -4824,11 +4912,11 @@
           "description": "The value of the search box, used for filtering the dropdown\nitems when searchMode is true.",
           "sourceRange": {
             "start": {
-              "line": 365,
+              "line": 373,
               "column": 6
             },
             "end": {
-              "line": 368,
+              "line": 376,
               "column": 7
             }
           },
@@ -4840,11 +4928,11 @@
           "description": "What to sort the dropdown items by - one of \"key\" or \"val\".\nBy default, the items will be displayed in the order they are\npassed into the component.",
           "sourceRange": {
             "start": {
-              "line": 374,
+              "line": 382,
               "column": 6
             },
             "end": {
-              "line": 376,
+              "line": 384,
               "column": 7
             }
           },
@@ -4856,11 +4944,11 @@
           "description": "If set to true, the display-value will always show up in the\ninvoking button of the dropdown. Useful in cases like the\npx-data-table, where \"Show/Hide Columns\" should always appear.",
           "sourceRange": {
             "start": {
-              "line": 382,
+              "line": 390,
               "column": 6
             },
             "end": {
-              "line": 385,
+              "line": 393,
               "column": 7
             }
           },
@@ -4872,11 +4960,11 @@
           "description": "If buttonStyle is set to 'icon' this property will dictate\nwhich icon will be displayed inside of the dropdown button.\nThe `displayValue`, selected values, and chevron will not be displayed.\nPerfect for icon-invoked menus. The value of this property should\nbe a valid px-icon name, e.g. 'px-utl:app-settings'",
           "sourceRange": {
             "start": {
-              "line": 393,
+              "line": 401,
               "column": 6
             },
             "end": {
-              "line": 396,
+              "line": 404,
               "column": 7
             }
           },
@@ -4888,11 +4976,11 @@
           "description": "Set this property if you would like the `selected` and `selectedValues`\nproperties to be cleared whenever mutations are made to the `items` array.",
           "sourceRange": {
             "start": {
-              "line": 401,
+              "line": 409,
               "column": 6
             },
             "end": {
-              "line": 404,
+              "line": 412,
               "column": 7
             }
           },
@@ -4904,11 +4992,11 @@
           "description": "The height of the trigger element, used for calculating offset distance\nfor the dropdown. Set this value if you use the `trigger` slot.",
           "sourceRange": {
             "start": {
-              "line": 409,
+              "line": 417,
               "column": 6
             },
             "end": {
-              "line": 412,
+              "line": 420,
               "column": 7
             }
           },
@@ -4920,11 +5008,11 @@
           "description": "By default, the dropdown menu will be flush against the trigger.\nEnable this property to show a caret between the two. Useful\nin iconic menus and used by the application/product switcher.",
           "sourceRange": {
             "start": {
-              "line": 418,
+              "line": 426,
               "column": 6
             },
             "end": {
-              "line": 421,
+              "line": 429,
               "column": 7
             }
           },
@@ -4936,11 +5024,11 @@
           "description": "By default the dropdown will attempt to automatically align itself\nvertically and horizontally based on the available space. Set this flag\nto turn off that automatic behavior and force a certain `verticalAlign` / `horizontalAlign`.",
           "sourceRange": {
             "start": {
-              "line": 427,
+              "line": 435,
               "column": 6
             },
             "end": {
-              "line": 430,
+              "line": 438,
               "column": 7
             }
           },
@@ -4952,11 +5040,11 @@
           "description": "Vertical alignment of the dropdown relative to the trigger.\nShould be one of `top` or `bottom` where `top` means that the dropdown\nand trigger are aligned at the top, so the dropdown will extend _below_ the trigger.\nOverridden by dynamic alignment, unless `disableDynamicAlign` is true.",
           "sourceRange": {
             "start": {
-              "line": 437,
+              "line": 445,
               "column": 6
             },
             "end": {
-              "line": 440,
+              "line": 448,
               "column": 7
             }
           },
@@ -4968,11 +5056,11 @@
           "description": "Horizontal alignment of the dropdown relative to the trigger.\nShould be one of `left` or `right` where `left` means that the dropdown\nand trigger are aligned on their left side, so the dropdown will extend _to the right_.\nOverridden by dynamic alignment, unless `disableDynamicAlign` is true.",
           "sourceRange": {
             "start": {
-              "line": 447,
+              "line": 455,
               "column": 6
             },
             "end": {
-              "line": 450,
+              "line": 458,
               "column": 7
             }
           },
@@ -4984,11 +5072,11 @@
           "description": "Whether to display the mobile version of the dropdown, which appears as a fullscreen modal.\nAutomatically detected based on the breakpoint specified in `mobileAt`.",
           "sourceRange": {
             "start": {
-              "line": 455,
+              "line": 463,
               "column": 6
             },
             "end": {
-              "line": 458,
+              "line": 466,
               "column": 7
             }
           },
@@ -5000,11 +5088,11 @@
           "description": "The breakpoint (in # of pixels) at which to display the mobile version of px-dropdown.",
           "sourceRange": {
             "start": {
-              "line": 462,
+              "line": 470,
               "column": 6
             },
             "end": {
-              "line": 465,
+              "line": 473,
               "column": 7
             }
           },
@@ -5016,11 +5104,11 @@
           "description": "By default, the mobile dropdown will show Apply/Clear buttons.\nSet this property to hide them.",
           "sourceRange": {
             "start": {
-              "line": 470,
+              "line": 478,
               "column": 6
             },
             "end": {
-              "line": 473,
+              "line": 481,
               "column": 7
             }
           },
@@ -5032,11 +5120,11 @@
           "description": "A valid IETF language tag as a string that `app-localize-behavior` will\nuse to localize this component.\n\nSee https://github.com/PolymerElements/app-localize-behavior for API\ndocumentation and more information.",
           "sourceRange": {
             "start": {
-              "line": 481,
+              "line": 489,
               "column": 6
             },
             "end": {
-              "line": 484,
+              "line": 492,
               "column": 7
             }
           },
@@ -5048,11 +5136,11 @@
           "description": "",
           "sourceRange": {
             "start": {
-              "line": 485,
+              "line": 493,
               "column": 6
             },
             "end": {
-              "line": 488,
+              "line": 496,
               "column": 7
             }
           },
@@ -5064,11 +5152,11 @@
           "description": "A dictionary of strings used within the component for AppLocalizeBehavior\nto use, based on the selected `language` property.",
           "sourceRange": {
             "start": {
-              "line": 493,
+              "line": 501,
               "column": 6
             },
             "end": {
-              "line": 504,
+              "line": 512,
               "column": 7
             }
           },
@@ -5080,11 +5168,11 @@
           "description": "Specifies if the dropdown content should get hoisted to a container in order to escape its current stacking context",
           "sourceRange": {
             "start": {
-              "line": 532,
+              "line": 540,
               "column": 6
             },
             "end": {
-              "line": 535,
+              "line": 543,
               "column": 7
             }
           },
diff --git a/px-dropdown-content.html b/px-dropdown-content.html
index c9454a72..85a1f854 100644
--- a/px-dropdown-content.html
+++ b/px-dropdown-content.html
@@ -166,6 +166,14 @@
       disableSelect: {
         type: Boolean
       },
+      /**
+       * If set, the items list will be in read only mode, the list is not disabled
+       * but the user can not click the items. Though like the disNo events are fired.
+       */
+       readOnly: {
+        type: Boolean,
+        observer: '_setReadOnly'
+      },
       /**
        * By default, dropdown items longer than the max-width of the dropdown
        * will be truncated, with the full string available on hover tooltip.
@@ -548,8 +556,8 @@
     *
     * @event px-dropdown-click
     */
-    _handleActivate: function(evt) {
-      if(evt.detail.item.hasAttribute('disabled')) {
+    _handleActivate: function(evt) { 
+      if(evt.detail.item.hasAttribute('disabled') || this.readOnly) {
         evt.preventDefault();
       }
       else if (this.disableSelect || evt.detail.item.disableSelect) {
@@ -703,6 +711,16 @@
 
       return sortValue;
     },
+    /**
+     * Adds the class that sets pointer-events = none to disable user interactions.
+     */
+    _setReadOnly: function() {
+      if(this.readOnly) {
+        this.toggleClass('dropdown-option__item',true,Polymer.dom(this.$.dropdown).querySelector('.dropdown-content'));
+      } else {
+        this.toggleClass('dropdown-option__item',false,Polymer.dom(this.$.dropdown).querySelector('.dropdown-content'));
+      }
+    },
     /**
      * Adds or removes the focused class for keyboard navigation.
      */
diff --git a/px-dropdown.html b/px-dropdown.html
index 14529100..a4cf5440 100644
--- a/px-dropdown.html
+++ b/px-dropdown.html
@@ -150,6 +150,7 @@
         bound-target="[[boundTarget]]"
         prevent-close-on-outside-click="[[preventCloseOnOutsideClick]]"
         disable-select="[[disableSelect]]"
+        read-only="[[readOnly]]"
         select-by="[[selectBy]]"
         selected="{{selected}}"
         selected-values="{{selectedValues}}"
@@ -237,6 +238,13 @@
         type: Boolean,
         value: false
       },
+      /**
+       * If set to true, users can still open the dropdown but can not click on items
+       */
+      readOnly: {
+        type: Boolean,
+        value: false
+      },
       /**
        * If set to true, users can still open the dropdown and click on items,
        * but they will not be selected. Use this property in use cases where
diff --git a/test/px-dropdown-custom-tests.js b/test/px-dropdown-custom-tests.js
index 47476f3c..b2a4715d 100644
--- a/test/px-dropdown-custom-tests.js
+++ b/test/px-dropdown-custom-tests.js
@@ -291,7 +291,7 @@ describe("Custom Automation Tests for sort feature px-dropdown", function(done)
     });
   });
 
-  it("Sort mode: items can be sorted by values or keys", function(done) {
+  it("Sort mode: items can be sorted by keys", function(done) {
     let selector = px_dropdown.$.content.$.selector,
       divs = Polymer.dom(selector.root).querySelectorAll("div");
 
@@ -302,14 +302,14 @@ describe("Custom Automation Tests for sort feature px-dropdown", function(done)
     done();
   });
 
-  it("Sort mode: items can be sorted by values or keys", function(done) {
+  it("Sort mode: items can be sorted by values", function(done) {
     let selector = px_dropdown.$.content.$.selector,
       divs = Polymer.dom(selector.root).querySelectorAll("div");
 
     assert.equal(divs[0].textContent.trim(), "Four");
-    px_dropdown.sortMode = "key";
+    px_dropdown.sortMode = "val";
     divs = Polymer.dom(selector.root).querySelectorAll("div");
-    assert.equal(divs[0].textContent.trim(), "One");
+    assert.equal(divs[0].textContent.trim(), "Four");
     done();
   });
 });
@@ -421,6 +421,37 @@ describe("Disabled element tests for px-dropdown", function(done) {
     done();
   });
 });
+describe("Read Only item tests for px-dropdown", function(done) {
+  let px_dropdown;
+
+  beforeEach(function(done) {
+    px_dropdown = fixture("dropdown-readonly-element-fixture");
+    flush(() => {
+      done();
+    });
+  });
+
+  it("When menu items set to read only the items can not be selected", function(done) {
+    (px_dropdown_content = px_dropdown.$.content.$.dropdown),
+      (px_dropdown_button = px_dropdown.$.trigger.$.trigger),
+      (dropdown_option = Polymer.dom(
+        px_dropdown.$.content.root
+      ).querySelectorAll(".dropdown-option")[1]);
+
+    var item_click = function(e) {
+      assert.fail(null, null, "should not be able to select read only items");
+      done();
+    };
+    px_dropdown_button.click();
+    px_dropdown.addEventListener("px-dropdown-selection-changed", item_click);
+    dropdown_option.click();
+    px_dropdown.removeEventListener(
+      "px-dropdown-selection-changed",
+      item_click
+    );
+    done();
+  });
+});
 
 describe("Custom trigger tests for px-dropdown", function() {
   let px_dropdown;
diff --git a/test/px-dropdown-test-fixture.html b/test/px-dropdown-test-fixture.html
index 3d4f16a7..a2f9dce9 100644
--- a/test/px-dropdown-test-fixture.html
+++ b/test/px-dropdown-test-fixture.html
@@ -50,6 +50,13 @@
       </template>
     </test-fixture>
 
+    <test-fixture id="dropdown-readonly-element-fixture">
+        <template>
+            <px-dropdown read-only items='[{"key":"1","val":"One Read Only"},{"key":"2","val":"Two Read Only"},{"key":"3","val":"Three Read Only"},{"key":"4","val":"Four Read Only"}]'>
+            </px-dropdown>
+        </template>
+    </test-fixture>
+
     <test-fixture id="dropdown-multi-element-fixture">
       <template>
         <px-dropdown items='[{"key":"1","val":"One"},{"key":"2","val":"Two","selected":"true"},{"key":"3","val":"Three"},{"key":"4","val":"Four"}]' multi>

From 152dcc90575d99ff11c0f0ef500b54fe70a80a25 Mon Sep 17 00:00:00 2001
From: Aron Graham <aron.graham@ge.com>
Date: Wed, 2 Jan 2019 12:37:31 +1000
Subject: [PATCH 2/7] update api

---
 px-dropdown-api.json | 310 ++++++++++++++++++++++---------------------
 1 file changed, 156 insertions(+), 154 deletions(-)

diff --git a/px-dropdown-api.json b/px-dropdown-api.json
index 00a31835..ae7fce14 100644
--- a/px-dropdown-api.json
+++ b/px-dropdown-api.json
@@ -1012,11 +1012,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 354,
+              "line": 355,
               "column": 7
             },
             "end": {
-              "line": 357,
+              "line": 358,
               "column": 7
             }
           },
@@ -1032,11 +1032,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 366,
+              "line": 367,
               "column": 6
             },
             "end": {
-              "line": 376,
+              "line": 377,
               "column": 7
             }
           },
@@ -1074,11 +1074,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 358,
+              "line": 359,
               "column": 6
             },
             "end": {
-              "line": 361,
+              "line": 362,
               "column": 7
             }
           },
@@ -1274,7 +1274,7 @@
         {
           "name": "readOnly",
           "type": "boolean",
-          "description": "If set, the items list will be in read only mode, the list is not disabled\nbut the user can not click the items. No events are fired.",
+          "description": "If set, the items list will be in read only mode, the list is not disabled\nbut the user can not click the items. Though like the disNo events are fired.",
           "privacy": "public",
           "sourceRange": {
             "start": {
@@ -1282,12 +1282,14 @@
               "column": 7
             },
             "end": {
-              "line": 174,
+              "line": 175,
               "column": 7
             }
           },
           "metadata": {
-            "polymer": {}
+            "polymer": {
+              "observer": "\"_setReadOnly\""
+            }
           }
         },
         {
@@ -1297,11 +1299,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 180,
+              "line": 181,
               "column": 6
             },
             "end": {
-              "line": 182,
+              "line": 183,
               "column": 7
             }
           },
@@ -1316,11 +1318,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 187,
+              "line": 188,
               "column": 6
             },
             "end": {
-              "line": 190,
+              "line": 191,
               "column": 7
             }
           },
@@ -1337,11 +1339,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 205,
+              "line": 206,
               "column": 6
             },
             "end": {
-              "line": 208,
+              "line": 209,
               "column": 7
             }
           },
@@ -1358,11 +1360,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 214,
+              "line": 215,
               "column": 6
             },
             "end": {
-              "line": 216,
+              "line": 217,
               "column": 7
             }
           },
@@ -1377,11 +1379,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 221,
+              "line": 222,
               "column": 6
             },
             "end": {
-              "line": 224,
+              "line": 225,
               "column": 7
             }
           },
@@ -1398,11 +1400,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 229,
+              "line": 230,
               "column": 6
             },
             "end": {
-              "line": 232,
+              "line": 233,
               "column": 7
             }
           },
@@ -1419,11 +1421,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 237,
+              "line": 238,
               "column": 6
             },
             "end": {
-              "line": 240,
+              "line": 241,
               "column": 7
             }
           },
@@ -1440,11 +1442,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 244,
+              "line": 245,
               "column": 6
             },
             "end": {
-              "line": 247,
+              "line": 248,
               "column": 7
             }
           },
@@ -1461,11 +1463,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 253,
+              "line": 254,
               "column": 6
             },
             "end": {
-              "line": 255,
+              "line": 256,
               "column": 7
             }
           },
@@ -1480,11 +1482,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 259,
+              "line": 260,
               "column": 6
             },
             "end": {
-              "line": 261,
+              "line": 262,
               "column": 7
             }
           },
@@ -1499,11 +1501,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 266,
+              "line": 267,
               "column": 6
             },
             "end": {
-              "line": 268,
+              "line": 269,
               "column": 7
             }
           },
@@ -1518,11 +1520,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 273,
+              "line": 274,
               "column": 6
             },
             "end": {
-              "line": 276,
+              "line": 277,
               "column": 7
             }
           },
@@ -1539,11 +1541,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 282,
+              "line": 283,
               "column": 6
             },
             "end": {
-              "line": 284,
+              "line": 285,
               "column": 7
             }
           },
@@ -1558,11 +1560,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 289,
+              "line": 290,
               "column": 6
             },
             "end": {
-              "line": 291,
+              "line": 292,
               "column": 7
             }
           },
@@ -1577,11 +1579,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 297,
+              "line": 298,
               "column": 6
             },
             "end": {
-              "line": 299,
+              "line": 300,
               "column": 7
             }
           },
@@ -1596,11 +1598,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 305,
+              "line": 306,
               "column": 6
             },
             "end": {
-              "line": 307,
+              "line": 308,
               "column": 7
             }
           },
@@ -1615,11 +1617,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 314,
+              "line": 315,
               "column": 6
             },
             "end": {
-              "line": 316,
+              "line": 317,
               "column": 7
             }
           },
@@ -1634,11 +1636,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 323,
+              "line": 324,
               "column": 6
             },
             "end": {
-              "line": 325,
+              "line": 326,
               "column": 7
             }
           },
@@ -1653,11 +1655,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 330,
+              "line": 331,
               "column": 6
             },
             "end": {
-              "line": 333,
+              "line": 334,
               "column": 7
             }
           },
@@ -1672,11 +1674,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 337,
+              "line": 338,
               "column": 6
             },
             "end": {
-              "line": 339,
+              "line": 340,
               "column": 7
             }
           },
@@ -1691,11 +1693,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 344,
+              "line": 345,
               "column": 6
             },
             "end": {
-              "line": 346,
+              "line": 347,
               "column": 7
             }
           },
@@ -1710,11 +1712,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 380,
+              "line": 381,
               "column": 6
             },
             "end": {
-              "line": 382,
+              "line": 383,
               "column": 7
             }
           },
@@ -1729,11 +1731,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 387,
+              "line": 388,
               "column": 6
             },
             "end": {
-              "line": 389,
+              "line": 390,
               "column": 7
             }
           },
@@ -1748,11 +1750,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 394,
+              "line": 395,
               "column": 6
             },
             "end": {
-              "line": 397,
+              "line": 398,
               "column": 7
             }
           },
@@ -1768,11 +1770,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 402,
+              "line": 403,
               "column": 7
             },
             "end": {
-              "line": 407,
+              "line": 408,
               "column": 7
             }
           },
@@ -1922,11 +1924,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 419,
+              "line": 420,
               "column": 4
             },
             "end": {
-              "line": 423,
+              "line": 424,
               "column": 5
             }
           },
@@ -1939,11 +1941,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 424,
+              "line": 425,
               "column": 4
             },
             "end": {
-              "line": 428,
+              "line": 429,
               "column": 5
             }
           },
@@ -1956,11 +1958,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 429,
+              "line": 430,
               "column": 4
             },
             "end": {
-              "line": 431,
+              "line": 432,
               "column": 5
             }
           },
@@ -1973,11 +1975,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 432,
+              "line": 433,
               "column": 4
             },
             "end": {
-              "line": 438,
+              "line": 439,
               "column": 5
             }
           },
@@ -1994,11 +1996,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 439,
+              "line": 440,
               "column": 4
             },
             "end": {
-              "line": 441,
+              "line": 442,
               "column": 5
             }
           },
@@ -2011,11 +2013,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 442,
+              "line": 443,
               "column": 4
             },
             "end": {
-              "line": 444,
+              "line": 445,
               "column": 5
             }
           },
@@ -2028,11 +2030,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 448,
+              "line": 449,
               "column": 4
             },
             "end": {
-              "line": 457,
+              "line": 458,
               "column": 5
             }
           },
@@ -2052,11 +2054,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 458,
+              "line": 459,
               "column": 4
             },
             "end": {
-              "line": 467,
+              "line": 468,
               "column": 5
             }
           },
@@ -2069,11 +2071,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 477,
+              "line": 478,
               "column": 4
             },
             "end": {
-              "line": 506,
+              "line": 507,
               "column": 5
             }
           },
@@ -2086,7 +2088,7 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 511,
+              "line": 512,
               "column": 4
             },
             "end": {
@@ -2348,7 +2350,7 @@
               "column": 4
             },
             "end": {
-              "line": 720,
+              "line": 722,
               "column": 5
             }
           },
@@ -2361,11 +2363,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 724,
+              "line": 726,
               "column": 4
             },
             "end": {
-              "line": 732,
+              "line": 734,
               "column": 5
             }
           },
@@ -2385,11 +2387,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 736,
+              "line": 738,
               "column": 4
             },
             "end": {
-              "line": 821,
+              "line": 823,
               "column": 5
             }
           },
@@ -2406,11 +2408,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 825,
+              "line": 827,
               "column": 4
             },
             "end": {
-              "line": 833,
+              "line": 835,
               "column": 5
             }
           },
@@ -2427,11 +2429,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 837,
+              "line": 839,
               "column": 4
             },
             "end": {
-              "line": 839,
+              "line": 841,
               "column": 5
             }
           },
@@ -2448,11 +2450,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 843,
+              "line": 845,
               "column": 4
             },
             "end": {
-              "line": 845,
+              "line": 847,
               "column": 5
             }
           },
@@ -2478,11 +2480,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 849,
+              "line": 851,
               "column": 4
             },
             "end": {
-              "line": 851,
+              "line": 853,
               "column": 5
             }
           },
@@ -2499,11 +2501,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 855,
+              "line": 857,
               "column": 4
             },
             "end": {
-              "line": 857,
+              "line": 859,
               "column": 5
             }
           },
@@ -2526,11 +2528,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 858,
+              "line": 860,
               "column": 4
             },
             "end": {
-              "line": 860,
+              "line": 862,
               "column": 5
             }
           },
@@ -2550,11 +2552,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 861,
+              "line": 863,
               "column": 4
             },
             "end": {
-              "line": 863,
+              "line": 865,
               "column": 5
             }
           },
@@ -2574,11 +2576,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 864,
+              "line": 866,
               "column": 4
             },
             "end": {
-              "line": 866,
+              "line": 868,
               "column": 5
             }
           },
@@ -2598,11 +2600,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 867,
+              "line": 869,
               "column": 4
             },
             "end": {
-              "line": 869,
+              "line": 871,
               "column": 5
             }
           },
@@ -2626,7 +2628,7 @@
           "column": 10
         },
         "end": {
-          "line": 870,
+          "line": 872,
           "column": 3
         }
       },
@@ -2638,11 +2640,11 @@
           "description": "A valid IETF language tag as a string that `app-localize-behavior` will\nuse to localize this component.\n\nSee https://github.com/PolymerElements/app-localize-behavior for API\ndocumentation and more information.",
           "sourceRange": {
             "start": {
-              "line": 354,
+              "line": 355,
               "column": 7
             },
             "end": {
-              "line": 357,
+              "line": 358,
               "column": 7
             }
           },
@@ -2654,11 +2656,11 @@
           "description": "A dictionary of strings used within the component for AppLocalizeBehavior\nto use, based on the selected `language` property.",
           "sourceRange": {
             "start": {
-              "line": 366,
+              "line": 367,
               "column": 6
             },
             "end": {
-              "line": 376,
+              "line": 377,
               "column": 7
             }
           },
@@ -2688,11 +2690,11 @@
           "description": "",
           "sourceRange": {
             "start": {
-              "line": 358,
+              "line": 359,
               "column": 6
             },
             "end": {
-              "line": 361,
+              "line": 362,
               "column": 7
             }
           },
@@ -2849,14 +2851,14 @@
         },
         {
           "name": "read-only",
-          "description": "If set, the items list will be in read only mode, the list is not disabled\nbut the user can not click the items. No events are fired.",
+          "description": "If set, the items list will be in read only mode, the list is not disabled\nbut the user can not click the items. Though like the disNo events are fired.",
           "sourceRange": {
             "start": {
               "line": 172,
               "column": 7
             },
             "end": {
-              "line": 174,
+              "line": 175,
               "column": 7
             }
           },
@@ -2868,11 +2870,11 @@
           "description": "By default, dropdown items longer than the max-width of the dropdown\nwill be truncated, with the full string available on hover tooltip.\nIf this property is set, items will not be truncated, but will wrap instead.",
           "sourceRange": {
             "start": {
-              "line": 180,
+              "line": 181,
               "column": 6
             },
             "end": {
-              "line": 182,
+              "line": 183,
               "column": 7
             }
           },
@@ -2884,11 +2886,11 @@
           "description": "The text that is displayed in the label of the dropdown.\nUpdated when the selections change.",
           "sourceRange": {
             "start": {
-              "line": 187,
+              "line": 188,
               "column": 6
             },
             "end": {
-              "line": 190,
+              "line": 191,
               "column": 7
             }
           },
@@ -2900,11 +2902,11 @@
           "description": "An array that contains the list of items which show up in the dropdown.\nEach item can either be a simple string, or an object consisting of:\n* 'key' - a unique identifier (number or string)\n* 'val' - the actual text that is displayed\n* 'disabled' - whether the item should be disabled completely - can't be selected nor used as a menu option (optional)\n* 'disableSelect` - whether the item should be disabled for selection, but can still be used as a menu option (optional)\n* 'selected' - whether the item should be selected at instantiation (optional)\n* 'icon' - an icon name from the px-icon-set to display next to the item (optional)\n* 'color' - the color to use for the icon - if not specified, the default text colors will be used (optional)\n\nNote: if you specify more than one item as `selected`, but `multi` is not enabled,\nonly the *first* selected item will be chosen. See also `clearSelectionsOnChange`.",
           "sourceRange": {
             "start": {
-              "line": 205,
+              "line": 206,
               "column": 6
             },
             "end": {
-              "line": 208,
+              "line": 209,
               "column": 7
             }
           },
@@ -2916,11 +2918,11 @@
           "description": "If set to true, multiple values can be selected in the dropdown.\nSelected values are reflected in the `selectedValues` property.\nIf set to false, a single selected value is reflected in `selected`.",
           "sourceRange": {
             "start": {
-              "line": 214,
+              "line": 215,
               "column": 6
             },
             "end": {
-              "line": 216,
+              "line": 217,
               "column": 7
             }
           },
@@ -2932,11 +2934,11 @@
           "description": "Which property of each dropdown item will be used to get/set\nthe selected items - should be one of \"key\" or \"val\".",
           "sourceRange": {
             "start": {
-              "line": 221,
+              "line": 222,
               "column": 6
             },
             "end": {
-              "line": 224,
+              "line": 225,
               "column": 7
             }
           },
@@ -2948,11 +2950,11 @@
           "description": "Gets or sets the selected item when `multi` is false.\nWill either be a single key or value based on `selectBy`.",
           "sourceRange": {
             "start": {
-              "line": 229,
+              "line": 230,
               "column": 6
             },
             "end": {
-              "line": 232,
+              "line": 233,
               "column": 7
             }
           },
@@ -2964,11 +2966,11 @@
           "description": "Gets or sets the selected items when `multi` is true.\nWill either be an array of keys or values based on `selectBy`.",
           "sourceRange": {
             "start": {
-              "line": 237,
+              "line": 238,
               "column": 6
             },
             "end": {
-              "line": 240,
+              "line": 241,
               "column": 7
             }
           },
@@ -2980,11 +2982,11 @@
           "description": "A read-only array of the selected `<div>` elements in the dropdown.",
           "sourceRange": {
             "start": {
-              "line": 244,
+              "line": 245,
               "column": 6
             },
             "end": {
-              "line": 247,
+              "line": 248,
               "column": 7
             }
           },
@@ -2996,11 +2998,11 @@
           "description": "By default, the dropdown will constrain scrolling on the page to\nitself when opened. Set to true in order to allow scrolling of\nthe page while the dropdown is open.",
           "sourceRange": {
             "start": {
-              "line": 253,
+              "line": 254,
               "column": 6
             },
             "end": {
-              "line": 255,
+              "line": 256,
               "column": 7
             }
           },
@@ -3012,11 +3014,11 @@
           "description": "Whether the dropdown should be disabled and non-interactive.",
           "sourceRange": {
             "start": {
-              "line": 259,
+              "line": 260,
               "column": 6
             },
             "end": {
-              "line": 261,
+              "line": 262,
               "column": 7
             }
           },
@@ -3028,11 +3030,11 @@
           "description": "If true, the dropdown will include a search box, whereby the\ndropdown items can be filtered with a search term.",
           "sourceRange": {
             "start": {
-              "line": 266,
+              "line": 267,
               "column": 6
             },
             "end": {
-              "line": 268,
+              "line": 269,
               "column": 7
             }
           },
@@ -3044,11 +3046,11 @@
           "description": "The value of the search box, used for filtering the dropdown\nitems when searchMode is true.",
           "sourceRange": {
             "start": {
-              "line": 273,
+              "line": 274,
               "column": 6
             },
             "end": {
-              "line": 276,
+              "line": 277,
               "column": 7
             }
           },
@@ -3060,11 +3062,11 @@
           "description": "What to sort the dropdown items by - one of \"key\" or \"val\".\nBy default, the items will be displayed in the order they are\npassed into the component.",
           "sourceRange": {
             "start": {
-              "line": 282,
+              "line": 283,
               "column": 6
             },
             "end": {
-              "line": 284,
+              "line": 285,
               "column": 7
             }
           },
@@ -3076,11 +3078,11 @@
           "description": "The height of the trigger element, used for calculating offset distance\nfor the dropdown. Set this value if you use the `trigger` slot.",
           "sourceRange": {
             "start": {
-              "line": 289,
+              "line": 290,
               "column": 6
             },
             "end": {
-              "line": 291,
+              "line": 292,
               "column": 7
             }
           },
@@ -3092,11 +3094,11 @@
           "description": "By default, the dropdown menu will be flush against the trigger.\nEnable this property to show a caret between the two. Useful\nin iconic menus and used by the application/product switcher.",
           "sourceRange": {
             "start": {
-              "line": 297,
+              "line": 298,
               "column": 6
             },
             "end": {
-              "line": 299,
+              "line": 300,
               "column": 7
             }
           },
@@ -3108,11 +3110,11 @@
           "description": "By default the dropdown will attempt to automatically align itself\nvertically and horizontally based on the available space. Set this flag\nto turn off that automatic behavior and force a certain `verticalAlign` / `horizontalAlign`.",
           "sourceRange": {
             "start": {
-              "line": 305,
+              "line": 306,
               "column": 6
             },
             "end": {
-              "line": 307,
+              "line": 308,
               "column": 7
             }
           },
@@ -3124,11 +3126,11 @@
           "description": "Vertical alignment of the dropdown relative to the trigger.\nShould be one of `top` or `bottom` where `top` means that the dropdown\nand trigger are aligned at the top, so the dropdown will extend _below_ the trigger.\nOverridden by dynamic alignment, unless `disableDynamicAlign` is true.",
           "sourceRange": {
             "start": {
-              "line": 314,
+              "line": 315,
               "column": 6
             },
             "end": {
-              "line": 316,
+              "line": 317,
               "column": 7
             }
           },
@@ -3140,11 +3142,11 @@
           "description": "Horizontal alignment of the dropdown relative to the trigger.\nShould be one of `left` or `right` where `left` means that the dropdown\nand trigger are aligned on their left side, so the dropdown will extend _to the right_.\nOverridden by dynamic alignment, unless `disableDynamicAlign` is true.",
           "sourceRange": {
             "start": {
-              "line": 323,
+              "line": 324,
               "column": 6
             },
             "end": {
-              "line": 325,
+              "line": 326,
               "column": 7
             }
           },
@@ -3156,11 +3158,11 @@
           "description": "Whether to display the mobile version of the dropdown, which appears as a fullscreen modal.\nAutomatically detected based on the breakpoint specified in `mobileAt`.",
           "sourceRange": {
             "start": {
-              "line": 330,
+              "line": 331,
               "column": 6
             },
             "end": {
-              "line": 333,
+              "line": 334,
               "column": 7
             }
           },
@@ -3172,11 +3174,11 @@
           "description": "The breakpoint (in # of pixels) at which to display the mobile version of px-dropdown.",
           "sourceRange": {
             "start": {
-              "line": 337,
+              "line": 338,
               "column": 6
             },
             "end": {
-              "line": 339,
+              "line": 340,
               "column": 7
             }
           },
@@ -3188,11 +3190,11 @@
           "description": "By default, the mobile dropdown will show Apply/Clear buttons.\nSet this property to hide them.",
           "sourceRange": {
             "start": {
-              "line": 344,
+              "line": 345,
               "column": 6
             },
             "end": {
-              "line": 346,
+              "line": 347,
               "column": 7
             }
           },
@@ -3204,11 +3206,11 @@
           "description": "Binding target for iron-a11y-keys",
           "sourceRange": {
             "start": {
-              "line": 380,
+              "line": 381,
               "column": 6
             },
             "end": {
-              "line": 382,
+              "line": 383,
               "column": 7
             }
           },

From 22c8471bcfa44d86e3934d634efe6ed943a2ed3f Mon Sep 17 00:00:00 2001
From: Aron Graham <aron.graham@ge.com>
Date: Thu, 3 Jan 2019 14:25:13 +1000
Subject: [PATCH 3/7] updates to style and function of read-only and added
 disabled-viewable

---
 css/px-dropdown-styles.html |  4 ++-
 demo/simple_demo.html       | 51 ++++++++++++++++++++++--------
 px-dropdown-content.html    | 38 +++++++++++++++++------
 px-dropdown-trigger.html    | 62 ++++++++++++++++++++++++++++++++-----
 px-dropdown.html            | 12 ++++++-
 sass/px-dropdown.scss       | 45 +++++++++++++++++++++++++++
 6 files changed, 181 insertions(+), 31 deletions(-)

diff --git a/css/px-dropdown-styles.html b/css/px-dropdown-styles.html
index fa4316dc..65987777 100644
--- a/css/px-dropdown-styles.html
+++ b/css/px-dropdown-styles.html
@@ -17,7 +17,9 @@
 <dom-module id="px-dropdown-styles">
 <template>
 <style>
-@charset "UTF-8";.btn,.truncate{white-space:nowrap}.btn,.text-input,select,textarea{transition:background .4s,border-color .4s,color .4s}.dropdown-content,.dropdown-trigger{max-width:var(--px-dropdown-max-width,400px)}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:link,a:visited{color:#007acc}a:hover{color:#005c99}a:active{color:#003d66}a:active,a:hover{outline:0}.float--right{float:right!important}.float--left{float:left!important}.float--none{float:none!important}.text--left{text-align:left!important}.text--center{text-align:center!important}.proceed,.text--right{text-align:right!important}.full-height{height:100%!important}.informative{cursor:help!important}.pointer{cursor:pointer!important}.muted{opacity:.5!important}.caps{text-transform:uppercase!important}.hidden{display:none!important;visibility:hidden}.a11y,.visuallyhidden{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}.a11y.focusable:active,.a11y.focusable:focus,.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{position:static;overflow:visible;width:auto;height:auto;margin:0;clip:auto}@media screen and (min-width:45em) and (max-width:63.9375em){.a11y-lap,.visuallyhidden-lap{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (max-width:63.9375em){.a11y-portable,.visuallyhidden-portable{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (max-width:44.9375em){.a11y-palm,.visuallyhidden-palm{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:45em){.a11y-lap-and-up,.visuallyhidden-lap-and-up{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:64em){.a11y-desk,.a11y-desk-and-up,.visuallyhidden-desk,.visuallyhidden-desk-and-up{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:120em){.a11y-large-and-up,.visuallyhidden-large-and-up{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi),(min-resolution:2dppx){.a11y-retina,.visuallyhidden-retina{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}.invisible{visibility:hidden!important}.truncate{overflow:hidden;text-overflow:ellipsis}.flex{display:flex}.inline--flex{display:inline-flex}.flex--row{flex-direction:row}.flex--row--rev{flex-direction:row-reverse}.flex--col{flex-direction:column}.flex--col--rev{flex-direction:column-reverse}.flex--nowrap{flex-wrap:nowrap}.flex--wrap{flex-wrap:wrap}.flex--wrap--rev{flex-wrap:wrap-reverse}.flex--left{justify-content:flex-start}.flex--center{justify-content:center}.flex--right{justify-content:flex-end}.flex--justify{justify-content:space-between}.flex--spaced{justify-content:space-around}.flex--top{align-items:flex-start}.flex--middle{align-items:center}.flex--bottom{align-items:flex-end}.flex--stretch{align-items:stretch}.flex--baseline{align-items:baseline}.flex--top--multi{align-content:flex-start}.flex--middle--multi{align-content:center}.flex--bottom--multi{align-content:flex-end}.flex--stretch--multi{align-content:stretch}.flex--justify--multi{align-content:space-between}.flex--spaced--multi{align-content:space-around}.flex__item{flex:1}.flex__item--msfix{flex:1 1 auto}.flex__item--top{align-self:flex-start}.flex__item--middle{-ms-grid-row-align:center;align-self:center}.flex__item--bottom{align-self:flex-end}.flex__item--baseline{align-self:baseline}fieldset{margin:0}.form-field,legend{margin-bottom:1.33333rem}fieldset,fieldset legend{border:0;padding:0}legend{font-weight:700}.form-field:last-child{margin-bottom:2.66667rem}label{display:block;margin-bottom:.26667rem;cursor:pointer;text-transform:uppercase;font-size:12px;color:var(--px-input-label-text-color,#677e8c);letter-spacing:var(--px-headings-letter-spacing,.3px)}label.disabled{cursor:not-allowed}.label--inline{display:inline-block;margin-bottom:0}.label--inline+.text-input{margin-left:.66667rem}.text-input,select,textarea{font:inherit;outline:0;background-color:var(--px-input-background-color,transparent)}.text-input:disabled,.text-input[readonly],select:disabled,select[readonly],textarea:disabled,textarea[readonly]{border-color:var(--px-input-border-color--disabled,rgba(0,0,0,.2));color:var(--px-input-text-color--disabled,rgba(0,0,0,.2));cursor:not-allowed;background-color:var(--px-input-background-color--disabled,transparent)}.text-input:hover,select:hover,textarea:hover{background-color:var(--px-input-background-color--hover,#d8e0e5)}.text-input:-ms-input-placeholder,select:-ms-input-placeholder,textarea:-ms-input-placeholder{color:var(--px-input-text-color--placeholder,rgba(0,0,0,.3))}.text-input::placeholder,select::placeholder,textarea::placeholder{color:var(--px-input-text-color--placeholder,rgba(0,0,0,.3))}.text-input:focus:-ms-input-placeholder,select:focus:-ms-input-placeholder,textarea:focus:-ms-input-placeholder{color:var(--px-input-text-color--placeholder--focused,rgba(0,0,0,.3))}.text-input:focus::placeholder,select:focus::placeholder,textarea:focus::placeholder{color:var(--px-input-text-color--placeholder--focused,rgba(0,0,0,.3))}.text-input:disabled:-ms-input-placeholder,select:disabled:-ms-input-placeholder,textarea:disabled:-ms-input-placeholder{color:var(--px-input-text-color--disabled,rgba(0,0,0,.2))}.text-input:disabled::placeholder,select:disabled::placeholder,textarea:disabled::placeholder{color:var(--px-input-text-color--disabled,rgba(0,0,0,.2))}.text-input{height:2em;width:100%;border:none;border-radius:0;border-bottom:1px solid var(--px-input-border-color--outer,#889aa5);padding:0 .33333rem;color:var(--px-input-text-color,#2c404c)}.text-input:focus,textarea:focus{color:var(--px-input-text-color--focused,inherit)}.text-input:focus{border-color:var(--px-input-border-color--outer--focused,#007acc);background-color:var(--px-input-background-color--focused,#eefbff)}.text-input+[type=checkbox],.text-input+[type=radio]{margin-left:1.33333rem}.text-input+.label--inline{margin-left:.66667rem}.text-input:-ms-input-placeholder{padding-top:1px}.text-input::placeholder{padding-top:1px}.text-input::-ms-clear{display:none}textarea{width:100%;color:var(--px-input-text-color,#2c404c);overflow:auto;min-height:calc(120px + .66667rem);padding:.33333rem .66667rem;resize:vertical;border:1px solid var(--px-input-border-color--outer,#889aa5);border-radius:0}textarea:focus{background-color:var(--px-input-textarea-background--focused,#eefbff);border:1px solid var(--px-input-border-color--outer--focused,#007acc)}select{width:auto;padding:0 3em 0 1em;box-shadow:none;height:calc(2em);cursor:pointer;background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20viewBox%3D%220%200%20658%201024%22%3E%3Cpath%20fill%3D%22%232c404c%22%20d%3D%22M614.286%20420.571q0%207.429-5.714%2013.143l-266.286%20266.286q-5.714%205.714-13.143%205.714t-13.143-5.714l-266.286-266.286q-5.714-5.714-5.714-13.143t5.714-13.143l28.571-28.571q5.714-5.714%2013.143-5.714t13.143%205.714l224.571%20224.571%20224.571-224.571q5.714-5.714%2013.143-5.714t13.143%205.714l28.571%2028.571q5.714%205.714%205.714%2013.143z%22%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:calc(100% - .66667rem) 37.5%;color:var(--px-select-text-color,#2c404c);background-color:var(--px-select-background-color,#d8e0e5);border:var(--px-select-border-color,transparent);-webkit-appearance:none;-moz-appearance:none;border-radius:0}select:hover{background-color:var(--px-select-background-color--hover,#a3b5bf)}select:active{background-color:var(--px-select-background-color--active,#889aa5)}select:disabled,select[readonly]{background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20viewBox%3D%220%200%20658%201024%22%3E%3Cpath%20fill%3D%22%23c5d1d8%22%20d%3D%22M614.286%20420.571q0%207.429-5.714%2013.143l-266.286%20266.286q-5.714%205.714-13.143%205.714t-13.143-5.714l-266.286-266.286q-5.714-5.714-5.714-13.143t5.714-13.143l28.571-28.571q5.714-5.714%2013.143-5.714t13.143%205.714l224.571%20224.571%20224.571-224.571q5.714-5.714%2013.143-5.714t13.143%205.714l28.571%2028.571q5.714%205.714%205.714%2013.143z%22%2F%3E%3C%2Fsvg%3E");color:var(--px-input-text-color--disabled,rgba(0,0,0,.2))}select[multiple]{padding:.33333rem;cursor:pointer;border:none;background:var(--px-multiselect-background-color,#ebeff2)}select::-ms-expand{display:none}@-moz-document url-prefix(){select{padding-top:.4em;padding-bottom:.4em}}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){select{padding-top:.4em;padding-bottom:.4em}}.label--inline [type=cancel],.label--inline+[type=submit],.text-input [type=cancel],.text-input+[type=submit]{margin-left:1.33333rem}[type=checkbox],[type=radio]{margin:0;padding:0;font-size:1.05em;cursor:pointer;outline:0}[type=checkbox][disabled],[type=checkbox][disabled]+.label--inline,[type=radio][disabled],[type=radio][disabled]+.label--inline{cursor:not-allowed}[type=checkbox]+.label--inline{padding-left:5px}[type=radio]+.label--inline{padding-left:3px}.form-field__help{display:inline-block;margin-top:0;margin-left:.33333rem;font-size:12px;line-height:inherit;color:var(--px-input-text-color--help,#677e8c)}.btn{display:inline-block;overflow:visible;height:var(--px-btn-height,2em);min-width:var(--px-btn-min-width,4.66667em);margin:0;border:1px solid var(--px-btn-border-color,transparent);border-radius:0!important;padding:0 calc(var(--px-btn-height,2em)/ 2);box-shadow:var(--px-btn-shadow--light,none);font:inherit;line-height:calc(var(--px-btn-height,2em) - 2px);-webkit-font-smoothing:antialiased;cursor:pointer;text-align:center;text-decoration:none;text-transform:none;background-color:var(--px-btn-background,#d8e0e5)}.u-mt-,.u-mv-{margin-top:.66667rem!important}.u-mb-,.u-mv-{margin-bottom:.66667rem!important}.btn,.btn:active,.btn:hover,.btn:link,.btn:visited{color:var(--px-btn-color,#2c404c)}.btn:focus,.btn:hover{border-color:var(--px-btn-border-color--hover,transparent);box-shadow:var(--px-btn-shadow,none);background-color:var(--px-btn-background--hover,#a3b5bf)}.btn:active{border-color:var(--px-btn-border-color--pressed,transparent);box-shadow:none;background-color:var(--px-btn-background--pressed,#889aa5);outline:0}.btn--bare,.btn--bare--primary,.btn--bare--primary:active,.btn--bare--primary:focus,.btn--bare--primary:hover,.btn--bare--primary:link,.btn--bare--primary:visited,.btn--bare:active,.btn--bare:focus,.btn--bare:hover,.btn--bare:link,.btn--bare:visited{box-shadow:none;background:0 0;outline:0}@-moz-document url-prefix(){.btn:not(button){line-height:1.8em}}.btn--bare,.btn--bare--primary{line-height:inherit;height:var(--px-btn-height,2em);padding-right:0;padding-left:0}button.btn{-webkit-appearance:button}.btn+.btn{margin-left:.66667rem}.btn--bare{border:0!important;border-radius:0!important}.btn--bare,.btn--bare:link,.btn--bare:visited{color:var(--px-btn-bare-color,#2c404c)}.btn--bare:focus,.btn--bare:hover{color:var(--px-btn-bare-color--hover,#007acc)}.btn--bare:active{color:var(--px-btn-bare-color--pressed,#003d66)}.btn--bare--primary{border:0!important;border-radius:0!important}.btn--bare--primary,.btn--bare--primary:link,.btn--bare--primary:visited{color:var(--px-btn-primary-bare-color--visited,#007acc)}.btn--bare--primary:focus,.btn--bare--primary:hover{color:var(--px-btn-primary-bare-color--hover,#005c99)}.btn--bare--primary:active,.btn--bare--primary:focus{color:var(--px-btn-primary-bare-color--pressed,#003d66)}.btn--primary{border-color:var(--px-btn-primary-border-color,transparent);box-shadow:var(--px-btn-shadow,none);background-color:var(--px-btn-primary-background,#364c59)}.btn--primary,.btn--primary:active,.btn--primary:hover,.btn--primary:link,.btn--primary:visited{color:var(--px-btn-primary-color,#fff)}.btn--primary:focus,.btn--primary:hover{border-color:transparent;background-color:var(--px-btn-primary-background--hover,#23343f)}.btn--primary:active{border-color:transparent;background-color:var(--px-btn-primary-background--pressed,#121f26)}.btn--tertiary{border:1px solid;box-shadow:none;background-color:var(--px-btn-tertiary-background,transparent)}.btn--tertiary,.btn--tertiary:active,.btn--tertiary:hover,.btn--tertiary:link,.btn--tertiary:visited{border-color:var(--px-btn-tertiary-border-color,#889aa5);color:var(--px-btn-tertiary-color,#007acc)}.btn--tertiary:focus,.btn--tertiary:hover{color:var(--px-btn-tertiary-color--hover,#005c99);border-color:var(--px-btn-tertiary-border-color,#889aa5);box-shadow:none;background-color:var(--px-btn-tertiary-background--hover,#c5d1d8)}.btn--tertiary:active{color:var(--px-btn-tertiary-color--pressed,#003d66);border-color:var(--px-btn-tertiary-border-color,#889aa5);box-shadow:none;background-color:var(--px-btn-tertiary-background--pressed,#96a8b2)}.btn--disabled,.btn--disabled:active,.btn--disabled:focus,.btn--disabled:hover,.btn--disabled:link,.btn--disabled:visited,.btn[disabled],.btn[disabled]:active,.btn[disabled]:focus,.btn[disabled]:hover,.btn[disabled]:link,.btn[disabled]:visited{color:var(--px-btn-disabled-color,rgba(0,0,0,.2));border:1px solid;border-color:var(--px-btn-disabled-border-color,rgba(0,0,0,.2));box-shadow:none;background-color:var(--px-btn-disabled-background,transparent);pointer-events:none}.btn--icon{height:var(--px-btn-height,2em);width:var(--px-btn-height,2em);min-width:var(--px-btn-height,2em);padding-right:0;padding-left:0;border:var(--px-btn-icon-border,0 solid)!important;background-color:var(--px-btn-icon-background,transparent)!important}@-moz-document url-prefix(){.btn--icon{line-height:1.8em}}.shadow-component{box-shadow:0 1px 1px var(--px-shadow-component,rgba(0,0,0,.2))}.shadow-temporary{box-shadow:0 1px 3px var(--px-shadow-temporary,rgba(0,0,0,.2))}.shadow-navigation{box-shadow:0 2px 4px var(--px-shadow-navigation,rgba(0,0,0,.2))}.shadow-notification{box-shadow:0 4px 8px var(--px-shadow-notification,rgba(0,0,0,.2))}.shadow-modal{box-shadow:0 6px 12px var(--px-shadow-modal,rgba(0,0,0,.2))}:host{/*! Comment to prevent cssmin munging this rule with html above and borking Safari */box-sizing:border-box;display:flex;position:relative;color:var(--px-dropdown-text-color,inherit);--px-btn-min-width:0}:host[disabled]{cursor:not-allowed}:host.validation-error .dropdown-trigger{border-color:var(--px-validation-error-text-color,red);color:inherit}:host.validation-warning .dropdown-trigger{border-color:var(--px-validation-warning-text-color,orange);color:inherit}:host.validation-success .dropdown-trigger{border-color:var(--px-validation-success-text-color,green);color:inherit}.dropdown-icon{--iron-icon-width:1.06667rem;--iron-icon-height:1.06667rem;margin-left:.33333rem}.dropdown{font-size:var(--px-dropdown-content-font-size,inherit);color:var(--px-dropdown-text-color,inherit);min-width:inherit}#target,.trigger{width:inherit}.dropdown-trigger{width:inherit;display:flex;align-items:center;padding-left:.66667rem;padding-right:.66667rem;outline:0;font-weight:var(--px-dropdown-font-weight,normal);height:auto}.dropdown-label{overflow:hidden;flex-grow:1;text-overflow:ellipsis;text-align:left}.custom-icon{--iron-icon-width:var(--px-dropdown-icon-size, calculateRem(16px));--iron-icon-height:var(--px-dropdown-icon-size, calculateRem(16px))}.dropdown-content{background-color:var(--px-dropdown-bg-color,#fff);border:1px solid var(--px-dropdown-border-color,gray);max-height:var(--px-dropdown-max-height,300px);min-width:var(--px-dropdown-min-width,inherit);min-height:var(--px-dropdown-min-height);display:flex;flex-direction:column}:host([mobile]) .dropdown-content{max-width:90vw;max-height:80vh;width:90vw;min-width:0;min-height:0;margin-left:5vw}.selector{flex-grow:1;overflow-y:auto}.dropdown-option{padding-left:var(--px-dropdown-item-padding,.66667rem);padding-right:var(--px-dropdown-item-padding,.66667rem);padding-top:var(--px-dropdown-item-padding);padding-bottom:var(--px-dropdown-item-padding);height:var(--px-dropdown-item-height,2rem);cursor:pointer;display:flex;align-items:center}.dropdown-option .select-icon{opacity:0}.dropdown-option.focused{background-color:var(--px-dropdown-bg-color--hover,#d3d3d3)}.dropdown-option.iron-selected{background-color:var(--px-dropdown-bg-color--selected,#00f);color:var(--px-dropdown-text-color--selected,#fff)}.dropdown-option.iron-selected .select-icon{opacity:1;stroke:var(--px-dropdown-text-color--selected,#fff);color:var(--px-dropdown-text-color--selected,#fff)}.dropdown-option[disabled]{color:var(--px-dropdown-text-color--disabled,gray);background-color:var(--px-dropdown-bg-color--disabled,transparent);cursor:not-allowed}.dropdown-option[disabled] .select-icon{stroke:var(--px-dropdown-text-color--disabled,gray);color:var(--px-dropdown-text-color--disabled,gray)}:host([mobile]) .dropdown-option{padding:var(--px-dropdown-item-padding,1rem);height:var(--px-dropdown-item-height,4rem)}:host([mobile]) .dropdown-option.iron-selected{background-color:var(--px-dropdown-bg-color--selected--mobile,#eee);color:var(--px-dropdown-text-color,#000);border-left:5px solid var(--px-dropdown-bg-color--selected,#00f)}.dropdown-option__item{pointer-events:none}.item-icon{--iron-icon-width:var(--px-dropdown-item-icon-size, calculateRem(16px));--iron-icon-height:var(--px-dropdown-item-icon-size, calculateRem(16px))}.checkbox{margin-right:.33333rem;outline:0;flex-shrink:0}.u-mh-,.u-mr-{margin-right:.66667rem!important}.search__form{position:relative;display:block}.search__icon{position:absolute;top:0;right:.53333rem;display:block;padding:4px}.u-ph--,.u-pl--{padding-left:.33333rem!important}.u-pt--,.u-pv--{padding-top:.33333rem!important}.u-pb--,.u-pv--{padding-bottom:.33333rem!important}.search__icon--tappable{cursor:pointer}.search__box{padding-right:1.5rem}.u-ph--,.u-pr--{padding-right:.33333rem!important}.fixed{flex-shrink:0}.dropdown.left:after,.dropdown.left:before{left:var(--px-dropdown-caret-left,1rem)}.dropdown.right:after,.dropdown.right:before{right:var(--px-dropdown-caret-right,.6rem)}.dropdown.top:after,.dropdown.top:before{bottom:calc(100% - 1px);border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.dropdown.top:after{border-color:rgba(136,183,213,0);border-bottom-color:var(--px-dropdown-bg-color,#000);border-width:5px;margin-left:-5px}.dropdown.top:before{border-color:rgba(194,225,245,0);border-bottom-color:var(--px-dropdown-border-color,gray);border-width:6px;margin-left:-6px}.dropdown.bottom:after,.dropdown.bottom:before{top:calc(100% - 1px);border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.dropdown.bottom:after{border-color:rgba(136,183,213,0);border-top-color:var(--px-dropdown-bg-color,#000);border-width:5px;margin-left:-5px}.dropdown.bottom:before{border-color:rgba(194,225,245,0);border-top-color:var(--px-dropdown-border-color,gray);border-width:6px;margin-left:-6px}.u-mh-,.u-ml-{margin-left:.66667rem!important}.u-m-{margin:.66667rem!important}.u-p--{padding:.33333rem!important}.u-ph-,.u-pr-{padding-right:.66667rem!important}.u-ph-,.u-pl-{padding-left:.66667rem!important}.u-pt-,.u-pv-{padding-top:.66667rem!important}.u-pb-,.u-pv-{padding-bottom:.66667rem!important}.u-p-{padding:.66667rem!important}.u-ph0,.u-pr0{padding-right:0!important}.u-ph0,.u-pl0{padding-left:0!important}.u-pt0,.u-pv0{padding-top:0!important}.u-pb0,.u-pv0{padding-bottom:0!important}.u-p0{padding:0!important}
+@charset "UTF-8";.btn,.truncate{white-space:nowrap}.btn,.text-input,select,textarea{transition:background .4s,border-color .4s,color .4s}.dropdown-content,.dropdown-trigger{max-width:var(--px-dropdown-max-width,400px)}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:link,a:visited{color:#007acc}a:hover{color:#005c99}a:active{color:#003d66}a:active,a:hover{outline:0}.float--right{float:right!important}.float--left{float:left!important}.float--none{float:none!important}.text--left{text-align:left!important}.text--center{text-align:center!important}.proceed,.text--right{text-align:right!important}.full-height{height:100%!important}.informative{cursor:help!important}.pointer{cursor:pointer!important}.muted{opacity:.5!important}.caps{text-transform:uppercase!important}.hidden{display:none!important;visibility:hidden}.a11y,.visuallyhidden{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}.a11y.focusable:active,.a11y.focusable:focus,.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{position:static;overflow:visible;width:auto;height:auto;margin:0;clip:auto}@media screen and (min-width:45em) and (max-width:63.9375em){.a11y-lap,.visuallyhidden-lap{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (max-width:63.9375em){.a11y-portable,.visuallyhidden-portable{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (max-width:44.9375em){.a11y-palm,.visuallyhidden-palm{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:45em){.a11y-lap-and-up,.visuallyhidden-lap-and-up{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:64em){.a11y-desk,.a11y-desk-and-up,.visuallyhidden-desk,.visuallyhidden-desk-and-up{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:120em){.a11y-large-and-up,.visuallyhidden-large-and-up{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi),(min-resolution:2dppx){.a11y-retina,.visuallyhidden-retina{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}.invisible{visibility:hidden!important}.truncate{overflow:hidden;text-overflow:ellipsis}.flex{display:flex}.inline--flex{display:inline-flex}.flex--row{flex-direction:row}.flex--row--rev{flex-direction:row-reverse}.flex--col{flex-direction:column}.flex--col--rev{flex-direction:column-reverse}.flex--nowrap{flex-wrap:nowrap}.flex--wrap{flex-wrap:wrap}.flex--wrap--rev{flex-wrap:wrap-reverse}.flex--left{justify-content:flex-start}.flex--center{justify-content:center}.flex--right{justify-content:flex-end}.flex--justify{justify-content:space-between}.flex--spaced{justify-content:space-around}.flex--top{align-items:flex-start}.flex--middle{align-items:center}.flex--bottom{align-items:flex-end}.flex--stretch{align-items:stretch}.flex--baseline{align-items:baseline}.flex--top--multi{align-content:flex-start}.flex--middle--multi{align-content:center}.flex--bottom--multi{align-content:flex-end}.flex--stretch--multi{align-content:stretch}.flex--justify--multi{align-content:space-between}.flex--spaced--multi{align-content:space-around}.flex__item{flex:1}.flex__item--msfix{flex:1 1 auto}.flex__item--top{align-self:flex-start}.flex__item--middle{-ms-grid-row-align:center;align-self:center}.flex__item--bottom{align-self:flex-end}.flex__item--baseline{align-self:baseline}fieldset{margin:0}.form-field,legend{margin-bottom:1.33333rem}fieldset,fieldset legend{border:0;padding:0}legend{font-weight:700}.form-field:last-child{margin-bottom:2.66667rem}label{display:block;margin-bottom:.26667rem;cursor:pointer;text-transform:uppercase;font-size:12px;color:var(--px-input-label-text-color,#677e8c);letter-spacing:var(--px-headings-letter-spacing,.3px)}label.disabled{cursor:not-allowed}.label--inline{display:inline-block;margin-bottom:0}.label--inline+.text-input{margin-left:.66667rem}.text-input,select,textarea{font:inherit;outline:0;background-color:var(--px-input-background-color,transparent)}.text-input:disabled,.text-input[readonly],select:disabled,select[readonly],textarea:disabled,textarea[readonly]{border-color:var(--px-input-border-color--disabled,rgba(0,0,0,.2));color:var(--px-input-text-color--disabled,rgba(0,0,0,.2));cursor:not-allowed;background-color:var(--px-input-background-color--disabled,transparent)}.text-input:hover,select:hover,textarea:hover{background-color:var(--px-input-background-color--hover,#d8e0e5)}.text-input:-ms-input-placeholder,select:-ms-input-placeholder,textarea:-ms-input-placeholder{color:var(--px-input-text-color--placeholder,rgba(0,0,0,.3))}.text-input::placeholder,select::placeholder,textarea::placeholder{color:var(--px-input-text-color--placeholder,rgba(0,0,0,.3))}.text-input:focus:-ms-input-placeholder,select:focus:-ms-input-placeholder,textarea:focus:-ms-input-placeholder{color:var(--px-input-text-color--placeholder--focused,rgba(0,0,0,.3))}.text-input:focus::placeholder,select:focus::placeholder,textarea:focus::placeholder{color:var(--px-input-text-color--placeholder--focused,rgba(0,0,0,.3))}.text-input:disabled:-ms-input-placeholder,select:disabled:-ms-input-placeholder,textarea:disabled:-ms-input-placeholder{color:var(--px-input-text-color--disabled,rgba(0,0,0,.2))}.text-input:disabled::placeholder,select:disabled::placeholder,textarea:disabled::placeholder{color:var(--px-input-text-color--disabled,rgba(0,0,0,.2))}.text-input{height:2em;width:100%;border:none;border-radius:0;border-bottom:1px solid var(--px-input-border-color--outer,#889aa5);padding:0 .33333rem;color:var(--px-input-text-color,#2c404c)}.text-input:focus,textarea:focus{color:var(--px-input-text-color--focused,inherit)}.text-input:focus{border-color:var(--px-input-border-color--outer--focused,#007acc);background-color:var(--px-input-background-color--focused,#eefbff)}.text-input+[type=checkbox],.text-input+[type=radio]{margin-left:1.33333rem}.text-input+.label--inline{margin-left:.66667rem}.text-input:-ms-input-placeholder{padding-top:1px}.text-input::placeholder{padding-top:1px}.text-input::-ms-clear{display:none}textarea{width:100%;color:var(--px-input-text-color,#2c404c);overflow:auto;min-height:calc(120px + .66667rem);padding:.33333rem .66667rem;resize:vertical;border:1px solid var(--px-input-border-color--outer,#889aa5);border-radius:0}textarea:focus{background-color:var(--px-input-textarea-background--focused,#eefbff);border:1px solid var(--px-input-border-color--outer--focused,#007acc)}select{width:auto;padding:0 3em 0 1em;box-shadow:none;height:calc(2em);cursor:pointer;background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20viewBox%3D%220%200%20658%201024%22%3E%3Cpath%20fill%3D%22%232c404c%22%20d%3D%22M614.286%20420.571q0%207.429-5.714%2013.143l-266.286%20266.286q-5.714%205.714-13.143%205.714t-13.143-5.714l-266.286-266.286q-5.714-5.714-5.714-13.143t5.714-13.143l28.571-28.571q5.714-5.714%2013.143-5.714t13.143%205.714l224.571%20224.571%20224.571-224.571q5.714-5.714%2013.143-5.714t13.143%205.714l28.571%2028.571q5.714%205.714%205.714%2013.143z%22%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:calc(100% - .66667rem) 37.5%;color:var(--px-select-text-color,#2c404c);background-color:var(--px-select-background-color,#d8e0e5);border:var(--px-select-border-color,transparent);-webkit-appearance:none;-moz-appearance:none;border-radius:0}select:hover{background-color:var(--px-select-background-color--hover,#a3b5bf)}select:active{background-color:var(--px-select-background-color--active,#889aa5)}select:disabled,select[readonly]{background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20viewBox%3D%220%200%20658%201024%22%3E%3Cpath%20fill%3D%22%23c5d1d8%22%20d%3D%22M614.286%20420.571q0%207.429-5.714%2013.143l-266.286%20266.286q-5.714%205.714-13.143%205.714t-13.143-5.714l-266.286-266.286q-5.714-5.714-5.714-13.143t5.714-13.143l28.571-28.571q5.714-5.714%2013.143-5.714t13.143%205.714l224.571%20224.571%20224.571-224.571q5.714-5.714%2013.143-5.714t13.143%205.714l28.571%2028.571q5.714%205.714%205.714%2013.143z%22%2F%3E%3C%2Fsvg%3E");color:var(--px-input-text-color--disabled,rgba(0,0,0,.2))}select[multiple]{padding:.33333rem;cursor:pointer;border:none;background:var(--px-multiselect-background-color,#ebeff2)}select::-ms-expand{display:none}@-moz-document url-prefix(){select{padding-top:.4em;padding-bottom:.4em}}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){select{padding-top:.4em;padding-bottom:.4em}}.label--inline [type=cancel],.label--inline+[type=submit],.text-input [type=cancel],.text-input+[type=submit]{margin-left:1.33333rem}[type=checkbox],[type=radio]{margin:0;padding:0;font-size:1.05em;cursor:pointer;outline:0}[type=checkbox][disabled],[type=checkbox][disabled]+.label--inline,[type=radio][disabled],[type=radio][disabled]+.label--inline{cursor:not-allowed}[type=checkbox]+.label--inline{padding-left:5px}[type=radio]+.label--inline{padding-left:3px}.form-field__help{display:inline-block;margin-top:0;margin-left:.33333rem;font-size:12px;line-height:inherit;color:var(--px-input-text-color--help,#677e8c)}.btn{display:inline-block;overflow:visible;height:var(--px-btn-height,2em);min-width:var(--px-btn-min-width,4.66667em);margin:0;border:1px solid var(--px-btn-border-color,transparent);border-radius:0!important;padding:0 calc(var(--px-btn-height,2em)/ 2);box-shadow:var(--px-btn-shadow--light,none);font:inherit;line-height:calc(var(--px-btn-height,2em) - 2px);-webkit-font-smoothing:antialiased;cursor:pointer;text-align:center;text-decoration:none;text-transform:none;background-color:var(--px-btn-background,#d8e0e5)}.u-mt-,.u-mv-{margin-top:.66667rem!important}.u-mb-,.u-mv-{margin-bottom:.66667rem!important}.btn,.btn:active,.btn:hover,.btn:link,.btn:visited{color:var(--px-btn-color,#2c404c)}.btn:focus,.btn:hover{border-color:var(--px-btn-border-color--hover,transparent);box-shadow:var(--px-btn-shadow,none);background-color:var(--px-btn-background--hover,#a3b5bf)}.btn:active{border-color:var(--px-btn-border-color--pressed,transparent);box-shadow:none;background-color:var(--px-btn-background--pressed,#889aa5);outline:0}.btn--bare,.btn--bare--primary,.btn--bare--primary:active,.btn--bare--primary:focus,.btn--bare--primary:hover,.btn--bare--primary:link,.btn--bare--primary:visited,.btn--bare:active,.btn--bare:focus,.btn--bare:hover,.btn--bare:link,.btn--bare:visited{box-shadow:none;background:0 0;outline:0}@-moz-document url-prefix(){.btn:not(button){line-height:1.8em}}.btn--bare,.btn--bare--primary{line-height:inherit;height:var(--px-btn-height,2em);padding-right:0;padding-left:0}button.btn{-webkit-appearance:button}.btn+.btn{margin-left:.66667rem}.btn--bare{border:0!important;border-radius:0!important}.btn--bare,.btn--bare:link,.btn--bare:visited{color:var(--px-btn-bare-color,#2c404c)}.btn--bare:focus,.btn--bare:hover{color:var(--px-btn-bare-color--hover,#007acc)}.btn--bare:active{color:var(--px-btn-bare-color--pressed,#003d66)}.btn--bare--primary{border:0!important;border-radius:0!important}.btn--bare--primary,.btn--bare--primary:link,.btn--bare--primary:visited{color:var(--px-btn-primary-bare-color--visited,#007acc)}.btn--bare--primary:focus,.btn--bare--primary:hover{color:var(--px-btn-primary-bare-color--hover,#005c99)}.btn--bare--primary:active,.btn--bare--primary:focus{color:var(--px-btn-primary-bare-color--pressed,#003d66)}.btn--primary{border-color:var(--px-btn-primary-border-color,transparent);box-shadow:var(--px-btn-shadow,none);background-color:var(--px-btn-primary-background,#364c59)}.btn--primary,.btn--primary:active,.btn--primary:hover,.btn--primary:link,.btn--primary:visited{color:var(--px-btn-primary-color,#fff)}.btn--primary:focus,.btn--primary:hover{border-color:transparent;background-color:var(--px-btn-primary-background--hover,#23343f)}.btn--primary:active{border-color:transparent;background-color:var(--px-btn-primary-background--pressed,#121f26)}.btn--tertiary{border:1px solid;box-shadow:none;background-color:var(--px-btn-tertiary-background,transparent)}.btn--tertiary,.btn--tertiary:active,.btn--tertiary:hover,.btn--tertiary:link,.btn--tertiary:visited{border-color:var(--px-btn-tertiary-border-color,#889aa5);color:var(--px-btn-tertiary-color,#007acc)}.btn--tertiary:focus,.btn--tertiary:hover{color:var(--px-btn-tertiary-color--hover,#005c99);border-color:var(--px-btn-tertiary-border-color,#889aa5);box-shadow:none;background-color:var(--px-btn-tertiary-background--hover,#c5d1d8)}.btn--tertiary:active{color:var(--px-btn-tertiary-color--pressed,#003d66);border-color:var(--px-btn-tertiary-border-color,#889aa5);box-shadow:none;background-color:var(--px-btn-tertiary-background--pressed,#96a8b2)}.btn--disabled,.btn--disabled:active,.btn--disabled:focus,.btn--disabled:hover,.btn--disabled:link,.btn--disabled:visited,.btn[disabled],.btn[disabled]:active,.btn[disabled]:focus,.btn[disabled]:hover,.btn[disabled]:link,.btn[disabled]:visited{color:var(--px-btn-disabled-color,rgba(0,0,0,.2));border:1px solid;border-color:var(--px-btn-disabled-border-color,rgba(0,0,0,.2));box-shadow:none;background-color:var(--px-btn-disabled-background,transparent);pointer-events:none}.btn--icon{height:var(--px-btn-height,2em);width:var(--px-btn-height,2em);min-width:var(--px-btn-height,2em);padding-right:0;padding-left:0;border:var(--px-btn-icon-border,0 solid)!important;background-color:var(--px-btn-icon-background,transparent)!important}@-moz-document url-prefix(){.btn--icon{line-height:1.8em}}.shadow-component{box-shadow:0 1px 1px var(--px-shadow-component,rgba(0,0,0,.2))}.shadow-temporary{box-shadow:0 1px 3px var(--px-shadow-temporary,rgba(0,0,0,.2))}.shadow-navigation{box-shadow:0 2px 4px var(--px-shadow-navigation,rgba(0,0,0,.2))}.shadow-notification{box-shadow:0 4px 8px var(--px-shadow-notification,rgba(0,0,0,.2))}.shadow-modal{box-shadow:0 6px 12px var(--px-shadow-modal,rgba(0,0,0,.2))}:host{/*! Comment to prevent cssmin munging this rule with html above and borking Safari */box-sizing:border-box;display:flex;position:relative;color:var(--px-dropdown-text-color,inherit);--px-btn-min-width:0}:host[disabled]{cursor:not-allowed}:host.validation-error .dropdown-trigger{border-color:var(--px-validation-error-text-color,red);color:inherit}:host.validation-warning .dropdown-trigger{border-color:var(--px-validation-warning-text-color,orange);color:inherit}:host.validation-success .dropdown-trigger{border-color:var(--px-validation-success-text-color,green);color:inherit}.dropdown-icon{--iron-icon-width:1.06667rem;--iron-icon-height:1.06667rem;margin-left:.33333rem}.dropdown{font-size:var(--px-dropdown-content-font-size,inherit);color:var(--px-dropdown-text-color,inherit);min-width:inherit}#target,.trigger{width:inherit}.dropdown-trigger{width:inherit;display:flex;align-items:center;padding-left:.66667rem;padding-right:.66667rem;outline:0;font-weight:var(--px-dropdown-font-weight,normal);height:auto}.dropdown-trigger.btn--disabled{cursor:not-allowed;pointer-events:unset}.dropdown-label{overflow:hidden;flex-grow:1;text-overflow:ellipsis;text-align:left}.custom-icon{--iron-icon-width:var(--px-dropdown-icon-size, calculateRem(16px));--iron-icon-height:var(--px-dropdown-icon-size, calculateRem(16px))}.dropdown-content{background-color:var(--px-dropdown-bg-color,#fff);border:1px solid var(--px-dropdown-border-color,gray);max-height:var(--px-dropdown-max-height,300px);min-width:var(--px-dropdown-min-width,inherit);min-height:var(--px-dropdown-min-height);display:flex;flex-direction:column}:host([mobile]) .dropdown-content{max-width:90vw;max-height:80vh;width:90vw;min-width:0;min-height:0;margin-left:5vw}.selector{flex-grow:1;overflow-y:auto}.dropdown--disabled-viewable{--px-btn-color:var(--px-btn-disabled-color);--px-btn-border-color:var(--px-btn-disabled-border-color);--px-btn-background:var(--px-btn-disabled-background);--px-btn-border-color--hover:var(--px-btn-disabled-border-color);--px-btn-border-color--pressed:var(--px-btn-disabled-border-color);--px-btn-background--hover:transparent;--px-btn-background--pressed:transparent;--px-dropdown-text-color:var(--px-dropdown-text-color--disabled)!important;--px-dropdown-text-color--selected:var(
+    --px-dropdown-text-color--disabled
+  )!important;--px-dropdown-bg-color:var(--px-dropdown-bg-color--disabled)!important;--px-dropdown-bg-color--hover:transparent!important;--px-dropdown-bg-color--selected:transparent!important}.dropdown--disabled-viewable .dropdown-option{color:var(--px-dropdown-text-color--selected,#fff);pointer-events:none}.dropdown--read-only-multi{--px-dropdown-font-weight:400;--px-dropdown-text-color:var(--px-base-text-color);--px-dropdown-text-color--selected:var(--px-base-text-color);--px-dropdown-bg-color:var(--px-dropdown-bg-color--disabled);--px-dropdown-bg-color--hover:transparent;--px-dropdown-bg-color--selected:transparent}.dropdown--read-only-multi .dropdown-option{pointer-events:none}.dropdown--read-only{--px-dropdown-text-color:var(--px-base-text-color);--px-dropdown-text-color--selected:var(--px-base-text-color);--px-dropdown-bg-color--hover:#ebeff2;--px-dropdown-bg-color--selected:#ebeff2}.dropdown--read-only .dropdown-option{pointer-events:none}.dropdown-option{padding-left:var(--px-dropdown-item-padding,.66667rem);padding-right:var(--px-dropdown-item-padding,.66667rem);padding-top:var(--px-dropdown-item-padding);padding-bottom:var(--px-dropdown-item-padding);height:var(--px-dropdown-item-height,2rem);cursor:pointer;display:flex;align-items:center}.dropdown-option .select-icon{opacity:0}.dropdown-option.focused{background-color:var(--px-dropdown-bg-color--hover,#d3d3d3)}.dropdown-option.iron-selected{background-color:var(--px-dropdown-bg-color--selected,#00f);color:var(--px-dropdown-text-color--selected,#fff)}.dropdown-option.iron-selected .select-icon{opacity:1;stroke:var(--px-dropdown-text-color--selected,#fff);color:var(--px-dropdown-text-color--selected,#fff)}.dropdown-option[disabled]{color:var(--px-dropdown-text-color--disabled,gray);background-color:var(--px-dropdown-bg-color--disabled,transparent);cursor:not-allowed}.dropdown-option[disabled] .select-icon{stroke:var(--px-dropdown-text-color--disabled,gray);color:var(--px-dropdown-text-color--disabled,gray)}:host([mobile]) .dropdown-option{padding:var(--px-dropdown-item-padding,1rem);height:var(--px-dropdown-item-height,4rem)}:host([mobile]) .dropdown-option.iron-selected{background-color:var(--px-dropdown-bg-color--selected--mobile,#eee);color:var(--px-dropdown-text-color,#000);border-left:5px solid var(--px-dropdown-bg-color--selected,#00f)}.dropdown-option__item{pointer-events:none}.item-icon{--iron-icon-width:var(--px-dropdown-item-icon-size, calculateRem(16px));--iron-icon-height:var(--px-dropdown-item-icon-size, calculateRem(16px))}.checkbox{margin-right:.33333rem;outline:0;flex-shrink:0}.u-mh-,.u-mr-{margin-right:.66667rem!important}.search__form{position:relative;display:block}.search__icon{position:absolute;top:0;right:.53333rem;display:block;padding:4px}.u-ph--,.u-pl--{padding-left:.33333rem!important}.u-pt--,.u-pv--{padding-top:.33333rem!important}.u-pb--,.u-pv--{padding-bottom:.33333rem!important}.search__icon--tappable{cursor:pointer}.search__box{padding-right:1.5rem}.u-ph--,.u-pr--{padding-right:.33333rem!important}.fixed{flex-shrink:0}.dropdown.left:after,.dropdown.left:before{left:var(--px-dropdown-caret-left,1rem)}.dropdown.right:after,.dropdown.right:before{right:var(--px-dropdown-caret-right,.6rem)}.dropdown.top:after,.dropdown.top:before{bottom:calc(100% - 1px);border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.dropdown.top:after{border-color:rgba(136,183,213,0);border-bottom-color:var(--px-dropdown-bg-color,#000);border-width:5px;margin-left:-5px}.dropdown.top:before{border-color:rgba(194,225,245,0);border-bottom-color:var(--px-dropdown-border-color,gray);border-width:6px;margin-left:-6px}.dropdown.bottom:after,.dropdown.bottom:before{top:calc(100% - 1px);border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.dropdown.bottom:after{border-color:rgba(136,183,213,0);border-top-color:var(--px-dropdown-bg-color,#000);border-width:5px;margin-left:-5px}.dropdown.bottom:before{border-color:rgba(194,225,245,0);border-top-color:var(--px-dropdown-border-color,gray);border-width:6px;margin-left:-6px}.u-mh-,.u-ml-{margin-left:.66667rem!important}.u-m-{margin:.66667rem!important}.u-p--{padding:.33333rem!important}.u-ph-,.u-pr-{padding-right:.66667rem!important}.u-ph-,.u-pl-{padding-left:.66667rem!important}.u-pt-,.u-pv-{padding-top:.66667rem!important}.u-pb-,.u-pv-{padding-bottom:.66667rem!important}.u-p-{padding:.66667rem!important}.u-ph0,.u-pr0{padding-right:0!important}.u-ph0,.u-pl0{padding-left:0!important}.u-pt0,.u-pv0{padding-top:0!important}.u-pb0,.u-pv0{padding-bottom:0!important}.u-p0{padding:0!important}
 </style>
 </template>
 </dom-module>
\ No newline at end of file
diff --git a/demo/simple_demo.html b/demo/simple_demo.html
index 2bd5596e..f46ad836 100644
--- a/demo/simple_demo.html
+++ b/demo/simple_demo.html
@@ -53,12 +53,24 @@
     </br>
     <p>Disabled Dropdown</p>
     <px-dropdown
-        display-value="Disabled"
-        hoist
-        disabled
-        container-type="disDropdown"
-        items='[{"key":"1","val":"iPhone"},{"key":"2","val":"Android"},{"key":"3","val":"Blackberry"},{"key":"4","val":"Windows Windows Windows Windows Windows Windows Windows Phone"},{"key":"5","val":"Flip Phone","disabled":true}]'
-        multi>
+      display-value="Disabled"
+      hoist
+      disabled
+      container-type="disDropdown"
+      items='[{"key":"1","val":"iPhone"},{"key":"2","val":"Android"},{"key":"3","val":"Blackberry"},{"key":"4","val":"Windows Windows Windows Windows Windows Windows Windows Phone"},{"key":"5","val":"Flip Phone","disabled":true}]'
+      multi>
+    </px-dropdown>
+    </br>
+    <p>Disabled Viewable Dropdown</p>
+    <px-dropdown
+      display-value="Disabled Viewable"
+      hoist
+      disabled-viewable
+      container-type="disDropdown"
+      select-by="key"
+      selected-values='["1","3"]'
+      items='[{"key":"1","val":"iPhone"},{"key":"2","val":"Android"},{"key":"3","val":"Blackberry"},{"key":"4","val":"Windows Windows Windows Windows Windows Windows Windows Phone"},{"key":"5","val":"Flip Phone","disabled":true}]'
+      multi>
     </px-dropdown>
     </br>
     <p>Multi Select</p>
@@ -66,24 +78,37 @@
       id="multiSelect"
       hoist
       container-type="bar"
+      selected-values='["2","3","5"]'
       items='[{"key":"1","val":"iPhone"},{"key":"2","val":"Android"},{"key":"3","val":"Blackberry"},{"key":"4","val":"Windows Windows Windows Windows Windows Windows Windows Phone"},{"key":"5","val":"Flip Phone","disabled":true}]'
       multi>
     </px-dropdown>
     </br>
-    <p>Disable Select (Like a Menu)</p>
+    <p>Multi Select and Read Only</p>
     <px-dropdown
-      id="disableSelect"
-      container-type="baz"
-      items='[{"key":"1","val":"Do something"},{"key":"2","val":"Do something else"},{"key":"3","val":"Do one"}]'
-      disable-select>
+      id="multiSelect"
+      hoist
+      read-only
+      container-type="bar"
+      selected-values='["2","5"]'
+      items='[{"key":"1","val":"iPhone"},{"key":"2","val":"Android"},{"key":"3","val":"Blackberry"},{"key":"4","val":"Windows Windows Windows Windows Windows Windows Windows Phone"},{"key":"5","val":"Flip Phone","disabled":true}]'
+      multi>
     </px-dropdown>
     </br>
-    <p>Set Items to Read Only</p>
+    <p>Single Select Read Only</p>
     <px-dropdown 
       id="readOnly"
       display-value="Read Only Items"
       container-type="readOnly"
-      read-only items='[{"key":"1","val":"One Read Only"},{"key":"2","val":"Two Read Only"},{"key":"3","val":"Three Read Only"},{"key":"4","val":"Four Read Only"}]'>
+      read-only items='[{"key":"1","val":"One Read Only"},{"key":"2","val":"Two Read Only"},{"key":"3","val":"Three Read Only","selected":"true"},{"key":"4","val":"Four Read Only","disabled":"true"}]'>
+    </px-dropdown>
+    </br>
+    <p>Disable Select (Like a Menu)</p>
+    <px-dropdown
+      id="disableSelect"
+      display-value="My Menu"
+      container-type="baz"
+      items='[{"key":"1","val":"Do something"},{"key":"2","val":"Do something else"},{"key":"3","val":"Do one"}]'
+      disable-select>
     </px-dropdown>
     </br>
     <p>Search Mode</p>
diff --git a/px-dropdown-content.html b/px-dropdown-content.html
index 85a1f854..d104b8bc 100644
--- a/px-dropdown-content.html
+++ b/px-dropdown-content.html
@@ -115,7 +115,7 @@
        * Bind to a `<px-dropdown-trigger>` element. A tap on the trigger
        * will open the dropdown.
        */
-       openTrigger: {
+      openTrigger: {
         type: HTMLElement,
         observer: '_openTriggerChanged'
       },
@@ -168,12 +168,20 @@
       },
       /**
        * If set, the items list will be in read only mode, the list is not disabled
-       * but the user can not click the items. Though like the disNo events are fired.
+       * but the user can not click the items. No events are fired.
        */
-       readOnly: {
+      readOnly: {
         type: Boolean,
         observer: '_setReadOnly'
       },
+      /**
+       * If set, the items list will be in read only mode, the list is disabled
+       * and the user can not click the items. No events are fired.
+       */
+      disabledViewable: {
+        type: Boolean,
+        observer: '_setDisabledViewableClass'
+      },
       /**
        * By default, dropdown items longer than the max-width of the dropdown
        * will be truncated, with the full string available on hover tooltip.
@@ -353,7 +361,7 @@
        * See https://github.com/PolymerElements/app-localize-behavior for API
        * documentation and more information.
        */
-       language: {
+      language: {
         type: String,
         value: 'en'
       },
@@ -557,7 +565,7 @@
     * @event px-dropdown-click
     */
     _handleActivate: function(evt) { 
-      if(evt.detail.item.hasAttribute('disabled') || this.readOnly) {
+      if(evt.detail.item.hasAttribute('disabled') || this.readOnly || this.disabledViewable) {
         evt.preventDefault();
       }
       else if (this.disableSelect || evt.detail.item.disableSelect) {
@@ -714,11 +722,23 @@
     /**
      * Adds the class that sets pointer-events = none to disable user interactions.
      */
-    _setReadOnly: function() {
-      if(this.readOnly) {
-        this.toggleClass('dropdown-option__item',true,Polymer.dom(this.$.dropdown).querySelector('.dropdown-content'));
+    _setReadOnly: function() {      
+      if (this.multi && this.readOnly){
+        this.toggleClass('dropdown--read-only-multi',true,Polymer.dom(this.$.dropdown).querySelector('.dropdown-content'));
+      } else if (this.readOnly) {
+        this.toggleClass('dropdown--read-only',true,Polymer.dom(this.$.dropdown).querySelector('.dropdown-content'));
+      } else {
+        this.toggleClass('dropdown--read-only',false,Polymer.dom(this.$.dropdown).querySelector('.dropdown-content'));
+      }
+    },
+    /**
+     * Calculates the class for a disabled viewable dropdown.
+     */
+    _setDisabledViewableClass: function() {
+      if(this.disabledViewable) {
+        this.toggleClass('dropdown--disabled-viewable',true,Polymer.dom(this.$.dropdown).querySelector('.dropdown-content'));
       } else {
-        this.toggleClass('dropdown-option__item',false,Polymer.dom(this.$.dropdown).querySelector('.dropdown-content'));
+        this.toggleClass('dropdown--disabled-viewable',false,Polymer.dom(this.$.dropdown).querySelector('.dropdown-content'));
       }
     },
     /**
diff --git a/px-dropdown-trigger.html b/px-dropdown-trigger.html
index 557f0105..469d611a 100644
--- a/px-dropdown-trigger.html
+++ b/px-dropdown-trigger.html
@@ -25,9 +25,9 @@
   <template>
     <style include="px-dropdown-styles"></style>
     <div class="trigger">
-      <div id="trigger" class$="dropdown-trigger btn {{_getDisabledClass(disabled)}} {{_getClass(buttonStyle)}}" tabindex="0">
+      <div id="trigger" class$="dropdown-trigger btn {{_getClass(buttonStyle)}}" tabindex="0">
         <template is="dom-if" if="{{!_isEqual(buttonStyle,'icon')}}">
-          <div id="label" title="{{displayValueSelected}}" class="dropdown-label">{{displayValueSelected}}</div>
+          <div id="label" class="dropdown-label">{{displayValueSelected}}</div>
         </template>
         <template is="dom-if" if="{{_isEqual(buttonStyle,'icon')}}">
           <px-icon class="custom-icon" icon="{{icon}}"></px-icon>
@@ -55,7 +55,7 @@
       /**
        * A flag which reflects if the dropdown trigger has been clicked or not.
        */
-       opened: {
+      opened: {
         type: Boolean,
         notify: true,
         value: false
@@ -124,6 +124,30 @@
       icon: {
         type: String,
         value: ''
+      },
+      /**
+       * If set, the items list will be in read only mode, the list is disabled
+       * and the user can not click the items. No events are fired.
+       */
+      disabledViewable: {
+        type: Boolean,
+        observer: '_setDisabledViewableClass'
+      },
+      /**
+       * If set, the items list will be in read only mode, the list is disabled
+       * and the user can not click the items. No events are fired.
+       */
+      readOnly: {
+        type: Boolean,
+        observer: '_setReadOnlyClass'
+      },
+      /**
+       * If set, the items list will be in read only mode, the list is disabled
+       * and the user can not click the items. No events are fired.
+       */
+      disabled: {
+        type: Boolean,
+        observer: '_setDisabledClass'
       }
     },
     attached: function() {
@@ -156,8 +180,32 @@
     /**
      * Calculates the class for a disabled dropdown.
      */
-    _getDisabledClass: function() {
-      return this.disabled ? 'btn--disabled' : '';
+    _setDisabledClass: function() {
+      if(this.disabled) {
+        this.toggleClass('btn--disabled',true,Polymer.dom(this.$.trigger));
+      } else {
+        this.toggleClass('btn--disabled',false,Polymer.dom(this.$.trigger));
+      }
+    },
+    /**
+     * Calculates the class for a disabled viewable dropdown.
+     */
+    _setDisabledViewableClass: function() { 
+      if(this.disabledViewable) {
+        this.toggleClass('dropdown--disabled-viewable',true,Polymer.dom(this.$.trigger));
+      } else {
+        this.toggleClass('dropdown--disabled-viewable',false,Polymer.dom(this.$.trigger));
+      }
+    },
+    /**
+     * Calculates the class for a disabled viewable dropdown.
+     */
+    _setReadOnlyClass: function() { 
+      if(this.readOnly) {
+        this.toggleClass('dropdown--read-only',true,Polymer.dom(this.$.trigger));
+      } else {
+        this.toggleClass('dropdown--read-only',false,Polymer.dom(this.$.trigger));
+      }
     },
     /**
      * Calculates the class for a bare dropdown.
@@ -180,7 +228,7 @@
      */
     _showClearButton: function(disableClear, buttonStyle, opened, selected, selectedValues) {
       // Always hide it if the configuration is present or the 'icon' button style is used.
-      if(disableClear || buttonStyle === 'icon') {
+      if(this.readOnly || this.disabledViewable || disableClear || buttonStyle === 'icon') {
         return false;
       }
       // Show it if the dropdown is opened and something is selected.
@@ -201,7 +249,7 @@
         return false;
       }
       // Show it if the clear button is disabled, or if nothing is selected, otherwise it looks too empty.
-      else if(!opened || disableClear || (opened && !selected && selectedValues.length === 0)) {
+      else if(this.readOnly || this.disabledViewable || !opened || disableClear || (opened && !selected && selectedValues.length === 0)) {
         return true;
       }
       // Otherwise hide it.
diff --git a/px-dropdown.html b/px-dropdown.html
index a4cf5440..ccfed118 100644
--- a/px-dropdown.html
+++ b/px-dropdown.html
@@ -121,6 +121,8 @@
           resources="[[resources]]"
           use-key-if-missing="[[useKeyIfMissing]]"
           disabled="[[disabled]]"
+          disabled-viewable="[[disabledViewable]]"
+          read-only="[[readOnly]]"
           hide-chevron="[[hideChevron]]"
           display-value="[[displayValue]]"
           disable-clear="[[disableClear]]"
@@ -147,6 +149,7 @@
         resources="[[resources]]"
         use-key-if-missing="[[useKeyIfMissing]]"
         disabled="[[disabled]]"
+        disabled-viewable="[[disabledViewable]]"
         bound-target="[[boundTarget]]"
         prevent-close-on-outside-click="[[preventCloseOnOutsideClick]]"
         disable-select="[[disableSelect]]"
@@ -267,7 +270,7 @@
        * The text that is displayed in the label of the dropdown.
        * Updated when the selections change.
        */
-       _displayValueSelected: {
+      _displayValueSelected: {
         type: String
       },
       /**
@@ -359,6 +362,13 @@
         type: Boolean,
         value: false
       },
+      /**
+       * Whether the dropdown should be disabled and interactive.
+       */
+      disabledViewable: {
+        type: Boolean,
+        value: false
+      },
       /**
        * If true, the dropdown will include a search box, whereby the
        * dropdown items can be filtered with a search term.
diff --git a/sass/px-dropdown.scss b/sass/px-dropdown.scss
index cfcb4d54..4f9a94c5 100644
--- a/sass/px-dropdown.scss
+++ b/sass/px-dropdown.scss
@@ -83,6 +83,10 @@ $inuit-enable-btn--primary: true;
   outline: none;
   font-weight: var(--px-dropdown-font-weight, normal);
   height: auto;
+  &.btn--disabled {
+    cursor: not-allowed;
+    pointer-events: unset;
+  }
 }
 .dropdown-label {
   overflow: hidden;
@@ -116,6 +120,47 @@ $inuit-enable-btn--primary: true;
   flex-grow: 1;
   overflow-y: auto;
 }
+.dropdown--disabled-viewable {
+  --px-btn-color: var(--px-btn-disabled-color);
+  --px-btn-border-color: var(--px-btn-disabled-border-color);
+  --px-btn-background: var(--px-btn-disabled-background);
+  --px-btn-border-color--hover: var(--px-btn-disabled-border-color);
+  --px-btn-border-color--pressed: var(--px-btn-disabled-border-color);
+  --px-btn-background--hover: transparent;
+  --px-btn-background--pressed: transparent;
+  --px-dropdown-text-color: var(--px-dropdown-text-color--disabled) !important;
+  --px-dropdown-text-color--selected: var(
+    --px-dropdown-text-color--disabled
+  ) !important;
+  --px-dropdown-bg-color: var(--px-dropdown-bg-color--disabled) !important;
+  --px-dropdown-bg-color--hover: transparent !important;
+  --px-dropdown-bg-color--selected: transparent !important;
+  .dropdown-option {
+    color: var(--px-dropdown-text-color--selected, #fff);
+    pointer-events: none;
+  }
+}
+
+.dropdown--read-only-multi {
+  --px-dropdown-font-weight: 400;
+  --px-dropdown-text-color: var(--px-base-text-color);
+  --px-dropdown-text-color--selected: var(--px-base-text-color);
+  --px-dropdown-bg-color: var(--px-dropdown-bg-color--disabled);
+  --px-dropdown-bg-color--hover: transparent;
+  --px-dropdown-bg-color--selected: transparent;
+  .dropdown-option {
+    pointer-events: none;
+  }
+}
+.dropdown--read-only {
+  --px-dropdown-text-color: var(--px-base-text-color);
+  --px-dropdown-text-color--selected: var(--px-base-text-color);
+  --px-dropdown-bg-color--hover: #ebeff2;
+  --px-dropdown-bg-color--selected: #ebeff2;
+  .dropdown-option {
+    pointer-events: none;
+  }
+}
 .dropdown-option {
   padding-left: var(
     --px-dropdown-item-padding,

From 1151238f3253dc1989ff4de21d41450c10899cc5 Mon Sep 17 00:00:00 2001
From: Aron Graham <aron.graham@ge.com>
Date: Fri, 4 Jan 2019 11:13:16 +1000
Subject: [PATCH 4/7] added more tests for different px-dropdown states of
 disabled, read-only and disabled-viewable

---
 demo/simple_demo.html            |  2 +
 package-lock.json                |  2 +-
 px-dropdown-content.html         | 10 +++-
 test/px-dropdown-custom-tests.js | 98 +++++++++++++++++++++++++++++---
 4 files changed, 100 insertions(+), 12 deletions(-)

diff --git a/demo/simple_demo.html b/demo/simple_demo.html
index f46ad836..aa67216b 100644
--- a/demo/simple_demo.html
+++ b/demo/simple_demo.html
@@ -53,6 +53,7 @@
     </br>
     <p>Disabled Dropdown</p>
     <px-dropdown
+      id="disabledDropdown"
       display-value="Disabled"
       hoist
       disabled
@@ -63,6 +64,7 @@
     </br>
     <p>Disabled Viewable Dropdown</p>
     <px-dropdown
+      id="disabledViewable"
       display-value="Disabled Viewable"
       hoist
       disabled-viewable
diff --git a/package-lock.json b/package-lock.json
index 66de3747..69896219 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
     "name": "px-dropdown",
-    "version": "4.7.8",
+    "version": "4.7.10",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {
diff --git a/px-dropdown-content.html b/px-dropdown-content.html
index d104b8bc..78ec90de 100644
--- a/px-dropdown-content.html
+++ b/px-dropdown-content.html
@@ -441,9 +441,13 @@
     },
     _handleCancel: function(e) {
       e.preventDefault();
-      e.stopPropagation();
-      if(Polymer.dom(e.detail).path.indexOf(this.openTrigger) === -1) {
-        this.$.dropdown.close();
+      var dropdownPath = Polymer.dom(e.detail).path;
+      if (dropdownPath){
+        if(dropdownPath.indexOf(this.openTrigger) === -1) {
+          this.$.dropdown.close();
+        }
+      } else {
+        this.$.dropdown.allowOutsideScroll = true;
       }
     },
     close: function() {
diff --git a/test/px-dropdown-custom-tests.js b/test/px-dropdown-custom-tests.js
index b2a4715d..3d862600 100644
--- a/test/px-dropdown-custom-tests.js
+++ b/test/px-dropdown-custom-tests.js
@@ -421,28 +421,110 @@ describe("Disabled element tests for px-dropdown", function(done) {
     done();
   });
 });
-describe("Read Only item tests for px-dropdown", function(done) {
+
+describe("Test the different px-dropdown states of disabled, read-only and disabled-viewable", function(done) {
   let px_dropdown;
+  let px_dropdown_content;
+  let px_dropdown_button;
+  let dropdown_option;
 
   beforeEach(function(done) {
-    px_dropdown = fixture("dropdown-readonly-element-fixture");
+    px_dropdown = fixture("dropdown-fixture");
     flush(() => {
+      px_dropdown_content = px_dropdown.$.content.$.dropdown.querySelector(
+        ".dropdown-content"
+      );
+      px_dropdown_button = px_dropdown.$.trigger.$.trigger;
+      dropdown_option = Polymer.dom(
+        px_dropdown.$.content.root
+      ).querySelectorAll(".dropdown-option")[1];
       done();
     });
   });
 
-  it("When menu items set to read only the items can not be selected", function(done) {
-    (px_dropdown_content = px_dropdown.$.content.$.dropdown),
-      (px_dropdown_button = px_dropdown.$.trigger.$.trigger),
-      (dropdown_option = Polymer.dom(
-        px_dropdown.$.content.root
-      ).querySelectorAll(".dropdown-option")[1]);
+  it("When dropdown is set to disabled, read-only and disabled-viewable the dropdown can not be opened as disabled takes priority", function(done) {
+    px_dropdown.setAttribute("disabled", "");
+    px_dropdown.setAttribute("disabled-visible", "");
+    px_dropdown.setAttribute("read-only", "");
+
+    var item_click = function(evt) {
+      assert.fail(null, null, "should not be able to open dropdown");
+      done();
+    };
+    px_dropdown.addEventListener("trigger-tapped", item_click);
+    px_dropdown_button.click();
+
+    assert.isTrue(
+      px_dropdown.hasAttribute("disabled"),
+      "expected dropdown-content to have class disabled"
+    );
+    px_dropdown.removeEventListener("trigger-tapped", item_click);
+    done();
+  });
+
+  it("When dropdown is set to disabled the dropdown can not be opened", function(done) {
+    px_dropdown.setAttribute("disabled", "");
+    px_dropdown.removeAttribute("disabled-visible");
+    px_dropdown.removeAttribute("read-only");
+
+    var item_click = function(evt) {
+      assert.fail(null, null, "should not be able to open dropdown");
+      done();
+    };
+    px_dropdown.addEventListener("trigger-tapped", item_click);
+    px_dropdown_button.click();
+
+    assert.isTrue(
+      px_dropdown.hasAttribute("disabled"),
+      "expected dropdown-content to have class disabled"
+    );
+    px_dropdown.removeEventListener("trigger-tapped", item_click);
+    done();
+  });
+
+  it("When dropdown is set to read only the items can not be selected", function(done) {
+    px_dropdown.setAttribute("read-only", "");
+    px_dropdown.removeAttribute("disabled-visible");
+    px_dropdown.removeAttribute("disabled");
 
     var item_click = function(e) {
       assert.fail(null, null, "should not be able to select read only items");
       done();
     };
     px_dropdown_button.click();
+
+    assert.isTrue(px_dropdown.opened, "expected dropdown to open");
+    assert.isTrue(
+      px_dropdown.hasAttribute("read-only"),
+      "expected dropdown-content to have class read-only"
+    );
+
+    px_dropdown.addEventListener("px-dropdown-selection-changed", item_click);
+    dropdown_option.click();
+    px_dropdown.removeEventListener(
+      "px-dropdown-selection-changed",
+      item_click
+    );
+    done();
+  });
+
+  it("When dropdown is set to disabled-viewable the items can viewed but not selected", function(done) {
+    px_dropdown.setAttribute("disabled-viewable", "");
+    px_dropdown.removeAttribute("disabled");
+    px_dropdown.removeAttribute("read-only");
+
+    var item_click = function(evt) {
+      assert.fail(null, null, "should not be able to select read only items");
+      done();
+    };
+    px_dropdown_button.click();
+
+    assert.isTrue(px_dropdown.opened, "expected dropdown to open");
+    assert.isTrue(
+      px_dropdown.hasAttribute("disabled-viewable"),
+      "expected dropdown-content to have class disabled-viewable"
+    );
+
     px_dropdown.addEventListener("px-dropdown-selection-changed", item_click);
     dropdown_option.click();
     px_dropdown.removeEventListener(

From 766ef32ee238cdacceac77dbdd550934e073c63f Mon Sep 17 00:00:00 2001
From: Aron Graham <aron.graham@ge.com>
Date: Fri, 4 Jan 2019 11:16:20 +1000
Subject: [PATCH 5/7] update api

---
 px-dropdown-api.json | 985 +++++++++++++++++++++++++++----------------
 1 file changed, 610 insertions(+), 375 deletions(-)

diff --git a/px-dropdown-api.json b/px-dropdown-api.json
index ae7fce14..2137259d 100644
--- a/px-dropdown-api.json
+++ b/px-dropdown-api.json
@@ -166,7 +166,7 @@
           "sourceRange": {
             "start": {
               "line": 57,
-              "column": 7
+              "column": 6
             },
             "end": {
               "line": 61,
@@ -326,6 +326,69 @@
             "polymer": {}
           },
           "defaultValue": "\"\""
+        },
+        {
+          "name": "disabledViewable",
+          "type": "boolean",
+          "description": "If set, the items list will be in read only mode, the list is disabled\nand the user can not click the items. No events are fired.",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 131,
+              "column": 6
+            },
+            "end": {
+              "line": 134,
+              "column": 7
+            }
+          },
+          "metadata": {
+            "polymer": {
+              "observer": "\"_setDisabledViewableClass\""
+            }
+          }
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "description": "If set, the items list will be in read only mode, the list is disabled\nand the user can not click the items. No events are fired.",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 139,
+              "column": 6
+            },
+            "end": {
+              "line": 142,
+              "column": 7
+            }
+          },
+          "metadata": {
+            "polymer": {
+              "observer": "\"_setReadOnlyClass\""
+            }
+          }
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "description": "If set, the items list will be in read only mode, the list is disabled\nand the user can not click the items. No events are fired.",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 147,
+              "column": 6
+            },
+            "end": {
+              "line": 150,
+              "column": 7
+            }
+          },
+          "metadata": {
+            "polymer": {
+              "observer": "\"_setDisabledClass\""
+            }
+          }
         }
       ],
       "methods": [
@@ -468,11 +531,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 128,
+              "line": 152,
               "column": 4
             },
             "end": {
-              "line": 130,
+              "line": 154,
               "column": 5
             }
           },
@@ -485,11 +548,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 131,
+              "line": 155,
               "column": 4
             },
             "end": {
-              "line": 133,
+              "line": 157,
               "column": 5
             }
           },
@@ -502,11 +565,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 137,
+              "line": 161,
               "column": 4
             },
             "end": {
-              "line": 142,
+              "line": 166,
               "column": 5
             }
           },
@@ -523,11 +586,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 146,
+              "line": 170,
               "column": 4
             },
             "end": {
-              "line": 148,
+              "line": 172,
               "column": 5
             }
           },
@@ -540,11 +603,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 152,
+              "line": 176,
               "column": 4
             },
             "end": {
-              "line": 154,
+              "line": 178,
               "column": 5
             }
           },
@@ -559,16 +622,50 @@
           ]
         },
         {
-          "name": "_getDisabledClass",
+          "name": "_setDisabledClass",
           "description": "Calculates the class for a disabled dropdown.",
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 158,
+              "line": 182,
+              "column": 4
+            },
+            "end": {
+              "line": 188,
+              "column": 5
+            }
+          },
+          "metadata": {},
+          "params": []
+        },
+        {
+          "name": "_setDisabledViewableClass",
+          "description": "Calculates the class for a disabled viewable dropdown.",
+          "privacy": "protected",
+          "sourceRange": {
+            "start": {
+              "line": 192,
               "column": 4
             },
             "end": {
-              "line": 160,
+              "line": 198,
+              "column": 5
+            }
+          },
+          "metadata": {},
+          "params": []
+        },
+        {
+          "name": "_setReadOnlyClass",
+          "description": "Calculates the class for a disabled viewable dropdown.",
+          "privacy": "protected",
+          "sourceRange": {
+            "start": {
+              "line": 202,
+              "column": 4
+            },
+            "end": {
+              "line": 208,
               "column": 5
             }
           },
@@ -581,11 +678,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 164,
+              "line": 212,
               "column": 4
             },
             "end": {
-              "line": 170,
+              "line": 218,
               "column": 5
             }
           },
@@ -598,11 +695,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 174,
+              "line": 222,
               "column": 4
             },
             "end": {
-              "line": 176,
+              "line": 224,
               "column": 5
             }
           },
@@ -615,11 +712,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 180,
+              "line": 228,
               "column": 4
             },
             "end": {
-              "line": 193,
+              "line": 241,
               "column": 5
             }
           },
@@ -648,11 +745,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 197,
+              "line": 245,
               "column": 4
             },
             "end": {
-              "line": 211,
+              "line": 259,
               "column": 5
             }
           },
@@ -688,7 +785,7 @@
           "column": 10
         },
         "end": {
-          "line": 212,
+          "line": 260,
           "column": 3
         }
       },
@@ -809,7 +906,7 @@
           "sourceRange": {
             "start": {
               "line": 57,
-              "column": 7
+              "column": 6
             },
             "end": {
               "line": 61,
@@ -930,6 +1027,54 @@
           },
           "metadata": {},
           "type": "string"
+        },
+        {
+          "name": "disabled-viewable",
+          "description": "If set, the items list will be in read only mode, the list is disabled\nand the user can not click the items. No events are fired.",
+          "sourceRange": {
+            "start": {
+              "line": 131,
+              "column": 6
+            },
+            "end": {
+              "line": 134,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "type": "boolean"
+        },
+        {
+          "name": "read-only",
+          "description": "If set, the items list will be in read only mode, the list is disabled\nand the user can not click the items. No events are fired.",
+          "sourceRange": {
+            "start": {
+              "line": 139,
+              "column": 6
+            },
+            "end": {
+              "line": 142,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "type": "boolean"
+        },
+        {
+          "name": "disabled",
+          "description": "If set, the items list will be in read only mode, the list is disabled\nand the user can not click the items. No events are fired.",
+          "sourceRange": {
+            "start": {
+              "line": 147,
+              "column": 6
+            },
+            "end": {
+              "line": 150,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "type": "boolean"
         }
       ],
       "events": [
@@ -1012,11 +1157,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 355,
-              "column": 7
+              "line": 363,
+              "column": 6
             },
             "end": {
-              "line": 358,
+              "line": 366,
               "column": 7
             }
           },
@@ -1032,11 +1177,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 367,
+              "line": 375,
               "column": 6
             },
             "end": {
-              "line": 377,
+              "line": 385,
               "column": 7
             }
           },
@@ -1074,11 +1219,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 359,
+              "line": 367,
               "column": 6
             },
             "end": {
-              "line": 362,
+              "line": 370,
               "column": 7
             }
           },
@@ -1140,7 +1285,7 @@
           "sourceRange": {
             "start": {
               "line": 117,
-              "column": 7
+              "column": 6
             },
             "end": {
               "line": 120,
@@ -1274,12 +1419,12 @@
         {
           "name": "readOnly",
           "type": "boolean",
-          "description": "If set, the items list will be in read only mode, the list is not disabled\nbut the user can not click the items. Though like the disNo events are fired.",
+          "description": "If set, the items list will be in read only mode, the list is not disabled\nbut the user can not click the items. No events are fired.",
           "privacy": "public",
           "sourceRange": {
             "start": {
               "line": 172,
-              "column": 7
+              "column": 6
             },
             "end": {
               "line": 175,
@@ -1292,6 +1437,27 @@
             }
           }
         },
+        {
+          "name": "disabledViewable",
+          "type": "boolean",
+          "description": "If set, the items list will be in read only mode, the list is disabled\nand the user can not click the items. No events are fired.",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 180,
+              "column": 6
+            },
+            "end": {
+              "line": 183,
+              "column": 7
+            }
+          },
+          "metadata": {
+            "polymer": {
+              "observer": "\"_setDisabledViewableClass\""
+            }
+          }
+        },
         {
           "name": "disableTruncate",
           "type": "boolean",
@@ -1299,11 +1465,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 181,
+              "line": 189,
               "column": 6
             },
             "end": {
-              "line": 183,
+              "line": 191,
               "column": 7
             }
           },
@@ -1318,11 +1484,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 188,
+              "line": 196,
               "column": 6
             },
             "end": {
-              "line": 191,
+              "line": 199,
               "column": 7
             }
           },
@@ -1339,11 +1505,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 206,
+              "line": 214,
               "column": 6
             },
             "end": {
-              "line": 209,
+              "line": 217,
               "column": 7
             }
           },
@@ -1360,11 +1526,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 215,
+              "line": 223,
               "column": 6
             },
             "end": {
-              "line": 217,
+              "line": 225,
               "column": 7
             }
           },
@@ -1379,11 +1545,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 222,
+              "line": 230,
               "column": 6
             },
             "end": {
-              "line": 225,
+              "line": 233,
               "column": 7
             }
           },
@@ -1400,11 +1566,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 230,
+              "line": 238,
               "column": 6
             },
             "end": {
-              "line": 233,
+              "line": 241,
               "column": 7
             }
           },
@@ -1421,11 +1587,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 238,
+              "line": 246,
               "column": 6
             },
             "end": {
-              "line": 241,
+              "line": 249,
               "column": 7
             }
           },
@@ -1442,11 +1608,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 245,
+              "line": 253,
               "column": 6
             },
             "end": {
-              "line": 248,
+              "line": 256,
               "column": 7
             }
           },
@@ -1463,11 +1629,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 254,
+              "line": 262,
               "column": 6
             },
             "end": {
-              "line": 256,
+              "line": 264,
               "column": 7
             }
           },
@@ -1482,11 +1648,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 260,
+              "line": 268,
               "column": 6
             },
             "end": {
-              "line": 262,
+              "line": 270,
               "column": 7
             }
           },
@@ -1501,11 +1667,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 267,
+              "line": 275,
               "column": 6
             },
             "end": {
-              "line": 269,
+              "line": 277,
               "column": 7
             }
           },
@@ -1520,11 +1686,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 274,
+              "line": 282,
               "column": 6
             },
             "end": {
-              "line": 277,
+              "line": 285,
               "column": 7
             }
           },
@@ -1541,11 +1707,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 283,
+              "line": 291,
               "column": 6
             },
             "end": {
-              "line": 285,
+              "line": 293,
               "column": 7
             }
           },
@@ -1560,11 +1726,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 290,
+              "line": 298,
               "column": 6
             },
             "end": {
-              "line": 292,
+              "line": 300,
               "column": 7
             }
           },
@@ -1579,11 +1745,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 298,
+              "line": 306,
               "column": 6
             },
             "end": {
-              "line": 300,
+              "line": 308,
               "column": 7
             }
           },
@@ -1598,11 +1764,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 306,
+              "line": 314,
               "column": 6
             },
             "end": {
-              "line": 308,
+              "line": 316,
               "column": 7
             }
           },
@@ -1617,11 +1783,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 315,
+              "line": 323,
               "column": 6
             },
             "end": {
-              "line": 317,
+              "line": 325,
               "column": 7
             }
           },
@@ -1636,11 +1802,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 324,
+              "line": 332,
               "column": 6
             },
             "end": {
-              "line": 326,
+              "line": 334,
               "column": 7
             }
           },
@@ -1655,11 +1821,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 331,
+              "line": 339,
               "column": 6
             },
             "end": {
-              "line": 334,
+              "line": 342,
               "column": 7
             }
           },
@@ -1674,11 +1840,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 338,
+              "line": 346,
               "column": 6
             },
             "end": {
-              "line": 340,
+              "line": 348,
               "column": 7
             }
           },
@@ -1693,11 +1859,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 345,
+              "line": 353,
               "column": 6
             },
             "end": {
-              "line": 347,
+              "line": 355,
               "column": 7
             }
           },
@@ -1712,11 +1878,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 381,
+              "line": 389,
               "column": 6
             },
             "end": {
-              "line": 383,
+              "line": 391,
               "column": 7
             }
           },
@@ -1731,11 +1897,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 388,
+              "line": 396,
               "column": 6
             },
             "end": {
-              "line": 390,
+              "line": 398,
               "column": 7
             }
           },
@@ -1750,11 +1916,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 395,
+              "line": 403,
               "column": 6
             },
             "end": {
-              "line": 398,
+              "line": 406,
               "column": 7
             }
           },
@@ -1770,11 +1936,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 403,
+              "line": 411,
               "column": 7
             },
             "end": {
-              "line": 408,
+              "line": 416,
               "column": 7
             }
           },
@@ -1924,11 +2090,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 420,
+              "line": 428,
               "column": 4
             },
             "end": {
-              "line": 424,
+              "line": 432,
               "column": 5
             }
           },
@@ -1941,11 +2107,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 425,
+              "line": 433,
               "column": 4
             },
             "end": {
-              "line": 429,
+              "line": 437,
               "column": 5
             }
           },
@@ -1958,11 +2124,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 430,
+              "line": 438,
               "column": 4
             },
             "end": {
-              "line": 432,
+              "line": 440,
               "column": 5
             }
           },
@@ -1975,11 +2141,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 433,
+              "line": 441,
               "column": 4
             },
             "end": {
-              "line": 439,
+              "line": 451,
               "column": 5
             }
           },
@@ -1996,11 +2162,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 440,
+              "line": 452,
               "column": 4
             },
             "end": {
-              "line": 442,
+              "line": 454,
               "column": 5
             }
           },
@@ -2013,11 +2179,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 443,
+              "line": 455,
               "column": 4
             },
             "end": {
-              "line": 445,
+              "line": 457,
               "column": 5
             }
           },
@@ -2030,11 +2196,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 449,
+              "line": 461,
               "column": 4
             },
             "end": {
-              "line": 458,
+              "line": 470,
               "column": 5
             }
           },
@@ -2054,11 +2220,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 459,
+              "line": 471,
               "column": 4
             },
             "end": {
-              "line": 468,
+              "line": 480,
               "column": 5
             }
           },
@@ -2071,11 +2237,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 478,
+              "line": 490,
               "column": 4
             },
             "end": {
-              "line": 507,
+              "line": 519,
               "column": 5
             }
           },
@@ -2088,11 +2254,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 512,
+              "line": 524,
               "column": 4
             },
             "end": {
-              "line": 532,
+              "line": 544,
               "column": 5
             }
           },
@@ -2109,11 +2275,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 536,
+              "line": 548,
               "column": 4
             },
             "end": {
-              "line": 538,
+              "line": 550,
               "column": 5
             }
           },
@@ -2130,11 +2296,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 542,
+              "line": 554,
               "column": 4
             },
             "end": {
-              "line": 544,
+              "line": 556,
               "column": 5
             }
           },
@@ -2154,11 +2320,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 558,
+              "line": 570,
               "column": 4
             },
             "end": {
-              "line": 570,
+              "line": 582,
               "column": 5
             }
           },
@@ -2175,11 +2341,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 575,
+              "line": 587,
               "column": 4
             },
             "end": {
-              "line": 602,
+              "line": 614,
               "column": 5
             }
           },
@@ -2196,11 +2362,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 607,
+              "line": 619,
               "column": 4
             },
             "end": {
-              "line": 633,
+              "line": 645,
               "column": 5
             }
           },
@@ -2217,11 +2383,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 637,
+              "line": 649,
               "column": 4
             },
             "end": {
-              "line": 639,
+              "line": 651,
               "column": 5
             }
           },
@@ -2234,11 +2400,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 644,
+              "line": 656,
               "column": 4
             },
             "end": {
-              "line": 654,
+              "line": 666,
               "column": 5
             }
           },
@@ -2251,11 +2417,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 658,
+              "line": 670,
               "column": 4
             },
             "end": {
-              "line": 665,
+              "line": 677,
               "column": 5
             }
           },
@@ -2281,11 +2447,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 669,
+              "line": 681,
               "column": 4
             },
             "end": {
-              "line": 674,
+              "line": 686,
               "column": 5
             }
           },
@@ -2305,11 +2471,11 @@
           "privacy": "private",
           "sourceRange": {
             "start": {
-              "line": 680,
+              "line": 692,
               "column": 4
             },
             "end": {
-              "line": 683,
+              "line": 695,
               "column": 5
             }
           },
@@ -2322,11 +2488,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 688,
+              "line": 700,
               "column": 4
             },
             "end": {
-              "line": 712,
+              "line": 724,
               "column": 5
             }
           },
@@ -2346,11 +2512,28 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 716,
+              "line": 728,
               "column": 4
             },
             "end": {
-              "line": 722,
+              "line": 736,
+              "column": 5
+            }
+          },
+          "metadata": {},
+          "params": []
+        },
+        {
+          "name": "_setDisabledViewableClass",
+          "description": "Calculates the class for a disabled viewable dropdown.",
+          "privacy": "protected",
+          "sourceRange": {
+            "start": {
+              "line": 740,
+              "column": 4
+            },
+            "end": {
+              "line": 746,
               "column": 5
             }
           },
@@ -2363,11 +2546,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 726,
+              "line": 750,
               "column": 4
             },
             "end": {
-              "line": 734,
+              "line": 758,
               "column": 5
             }
           },
@@ -2387,11 +2570,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 738,
+              "line": 762,
               "column": 4
             },
             "end": {
-              "line": 823,
+              "line": 847,
               "column": 5
             }
           },
@@ -2408,11 +2591,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 827,
+              "line": 851,
               "column": 4
             },
             "end": {
-              "line": 835,
+              "line": 859,
               "column": 5
             }
           },
@@ -2429,11 +2612,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 839,
+              "line": 863,
               "column": 4
             },
             "end": {
-              "line": 841,
+              "line": 865,
               "column": 5
             }
           },
@@ -2450,11 +2633,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 845,
+              "line": 869,
               "column": 4
             },
             "end": {
-              "line": 847,
+              "line": 871,
               "column": 5
             }
           },
@@ -2480,11 +2663,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 851,
+              "line": 875,
               "column": 4
             },
             "end": {
-              "line": 853,
+              "line": 877,
               "column": 5
             }
           },
@@ -2501,11 +2684,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 857,
+              "line": 881,
               "column": 4
             },
             "end": {
-              "line": 859,
+              "line": 883,
               "column": 5
             }
           },
@@ -2528,11 +2711,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 860,
+              "line": 884,
               "column": 4
             },
             "end": {
-              "line": 862,
+              "line": 886,
               "column": 5
             }
           },
@@ -2552,11 +2735,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 863,
+              "line": 887,
               "column": 4
             },
             "end": {
-              "line": 865,
+              "line": 889,
               "column": 5
             }
           },
@@ -2576,11 +2759,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 866,
+              "line": 890,
               "column": 4
             },
             "end": {
-              "line": 868,
+              "line": 892,
               "column": 5
             }
           },
@@ -2600,11 +2783,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 869,
+              "line": 893,
               "column": 4
             },
             "end": {
-              "line": 871,
+              "line": 895,
               "column": 5
             }
           },
@@ -2628,7 +2811,7 @@
           "column": 10
         },
         "end": {
-          "line": 872,
+          "line": 896,
           "column": 3
         }
       },
@@ -2640,11 +2823,11 @@
           "description": "A valid IETF language tag as a string that `app-localize-behavior` will\nuse to localize this component.\n\nSee https://github.com/PolymerElements/app-localize-behavior for API\ndocumentation and more information.",
           "sourceRange": {
             "start": {
-              "line": 355,
-              "column": 7
+              "line": 363,
+              "column": 6
             },
             "end": {
-              "line": 358,
+              "line": 366,
               "column": 7
             }
           },
@@ -2656,11 +2839,11 @@
           "description": "A dictionary of strings used within the component for AppLocalizeBehavior\nto use, based on the selected `language` property.",
           "sourceRange": {
             "start": {
-              "line": 367,
+              "line": 375,
               "column": 6
             },
             "end": {
-              "line": 377,
+              "line": 385,
               "column": 7
             }
           },
@@ -2690,11 +2873,11 @@
           "description": "",
           "sourceRange": {
             "start": {
-              "line": 359,
+              "line": 367,
               "column": 6
             },
             "end": {
-              "line": 362,
+              "line": 370,
               "column": 7
             }
           },
@@ -2743,7 +2926,7 @@
           "sourceRange": {
             "start": {
               "line": 117,
-              "column": 7
+              "column": 6
             },
             "end": {
               "line": 120,
@@ -2851,11 +3034,11 @@
         },
         {
           "name": "read-only",
-          "description": "If set, the items list will be in read only mode, the list is not disabled\nbut the user can not click the items. Though like the disNo events are fired.",
+          "description": "If set, the items list will be in read only mode, the list is not disabled\nbut the user can not click the items. No events are fired.",
           "sourceRange": {
             "start": {
               "line": 172,
-              "column": 7
+              "column": 6
             },
             "end": {
               "line": 175,
@@ -2865,16 +3048,32 @@
           "metadata": {},
           "type": "boolean"
         },
+        {
+          "name": "disabled-viewable",
+          "description": "If set, the items list will be in read only mode, the list is disabled\nand the user can not click the items. No events are fired.",
+          "sourceRange": {
+            "start": {
+              "line": 180,
+              "column": 6
+            },
+            "end": {
+              "line": 183,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "type": "boolean"
+        },
         {
           "name": "disable-truncate",
           "description": "By default, dropdown items longer than the max-width of the dropdown\nwill be truncated, with the full string available on hover tooltip.\nIf this property is set, items will not be truncated, but will wrap instead.",
           "sourceRange": {
             "start": {
-              "line": 181,
+              "line": 189,
               "column": 6
             },
             "end": {
-              "line": 183,
+              "line": 191,
               "column": 7
             }
           },
@@ -2886,11 +3085,11 @@
           "description": "The text that is displayed in the label of the dropdown.\nUpdated when the selections change.",
           "sourceRange": {
             "start": {
-              "line": 188,
+              "line": 196,
               "column": 6
             },
             "end": {
-              "line": 191,
+              "line": 199,
               "column": 7
             }
           },
@@ -2902,11 +3101,11 @@
           "description": "An array that contains the list of items which show up in the dropdown.\nEach item can either be a simple string, or an object consisting of:\n* 'key' - a unique identifier (number or string)\n* 'val' - the actual text that is displayed\n* 'disabled' - whether the item should be disabled completely - can't be selected nor used as a menu option (optional)\n* 'disableSelect` - whether the item should be disabled for selection, but can still be used as a menu option (optional)\n* 'selected' - whether the item should be selected at instantiation (optional)\n* 'icon' - an icon name from the px-icon-set to display next to the item (optional)\n* 'color' - the color to use for the icon - if not specified, the default text colors will be used (optional)\n\nNote: if you specify more than one item as `selected`, but `multi` is not enabled,\nonly the *first* selected item will be chosen. See also `clearSelectionsOnChange`.",
           "sourceRange": {
             "start": {
-              "line": 206,
+              "line": 214,
               "column": 6
             },
             "end": {
-              "line": 209,
+              "line": 217,
               "column": 7
             }
           },
@@ -2918,11 +3117,11 @@
           "description": "If set to true, multiple values can be selected in the dropdown.\nSelected values are reflected in the `selectedValues` property.\nIf set to false, a single selected value is reflected in `selected`.",
           "sourceRange": {
             "start": {
-              "line": 215,
+              "line": 223,
               "column": 6
             },
             "end": {
-              "line": 217,
+              "line": 225,
               "column": 7
             }
           },
@@ -2934,11 +3133,11 @@
           "description": "Which property of each dropdown item will be used to get/set\nthe selected items - should be one of \"key\" or \"val\".",
           "sourceRange": {
             "start": {
-              "line": 222,
+              "line": 230,
               "column": 6
             },
             "end": {
-              "line": 225,
+              "line": 233,
               "column": 7
             }
           },
@@ -2950,11 +3149,11 @@
           "description": "Gets or sets the selected item when `multi` is false.\nWill either be a single key or value based on `selectBy`.",
           "sourceRange": {
             "start": {
-              "line": 230,
+              "line": 238,
               "column": 6
             },
             "end": {
-              "line": 233,
+              "line": 241,
               "column": 7
             }
           },
@@ -2966,11 +3165,11 @@
           "description": "Gets or sets the selected items when `multi` is true.\nWill either be an array of keys or values based on `selectBy`.",
           "sourceRange": {
             "start": {
-              "line": 238,
+              "line": 246,
               "column": 6
             },
             "end": {
-              "line": 241,
+              "line": 249,
               "column": 7
             }
           },
@@ -2982,11 +3181,11 @@
           "description": "A read-only array of the selected `<div>` elements in the dropdown.",
           "sourceRange": {
             "start": {
-              "line": 245,
+              "line": 253,
               "column": 6
             },
             "end": {
-              "line": 248,
+              "line": 256,
               "column": 7
             }
           },
@@ -2998,11 +3197,11 @@
           "description": "By default, the dropdown will constrain scrolling on the page to\nitself when opened. Set to true in order to allow scrolling of\nthe page while the dropdown is open.",
           "sourceRange": {
             "start": {
-              "line": 254,
+              "line": 262,
               "column": 6
             },
             "end": {
-              "line": 256,
+              "line": 264,
               "column": 7
             }
           },
@@ -3014,11 +3213,11 @@
           "description": "Whether the dropdown should be disabled and non-interactive.",
           "sourceRange": {
             "start": {
-              "line": 260,
+              "line": 268,
               "column": 6
             },
             "end": {
-              "line": 262,
+              "line": 270,
               "column": 7
             }
           },
@@ -3030,11 +3229,11 @@
           "description": "If true, the dropdown will include a search box, whereby the\ndropdown items can be filtered with a search term.",
           "sourceRange": {
             "start": {
-              "line": 267,
+              "line": 275,
               "column": 6
             },
             "end": {
-              "line": 269,
+              "line": 277,
               "column": 7
             }
           },
@@ -3046,11 +3245,11 @@
           "description": "The value of the search box, used for filtering the dropdown\nitems when searchMode is true.",
           "sourceRange": {
             "start": {
-              "line": 274,
+              "line": 282,
               "column": 6
             },
             "end": {
-              "line": 277,
+              "line": 285,
               "column": 7
             }
           },
@@ -3062,11 +3261,11 @@
           "description": "What to sort the dropdown items by - one of \"key\" or \"val\".\nBy default, the items will be displayed in the order they are\npassed into the component.",
           "sourceRange": {
             "start": {
-              "line": 283,
+              "line": 291,
               "column": 6
             },
             "end": {
-              "line": 285,
+              "line": 293,
               "column": 7
             }
           },
@@ -3078,11 +3277,11 @@
           "description": "The height of the trigger element, used for calculating offset distance\nfor the dropdown. Set this value if you use the `trigger` slot.",
           "sourceRange": {
             "start": {
-              "line": 290,
+              "line": 298,
               "column": 6
             },
             "end": {
-              "line": 292,
+              "line": 300,
               "column": 7
             }
           },
@@ -3094,11 +3293,11 @@
           "description": "By default, the dropdown menu will be flush against the trigger.\nEnable this property to show a caret between the two. Useful\nin iconic menus and used by the application/product switcher.",
           "sourceRange": {
             "start": {
-              "line": 298,
+              "line": 306,
               "column": 6
             },
             "end": {
-              "line": 300,
+              "line": 308,
               "column": 7
             }
           },
@@ -3110,11 +3309,11 @@
           "description": "By default the dropdown will attempt to automatically align itself\nvertically and horizontally based on the available space. Set this flag\nto turn off that automatic behavior and force a certain `verticalAlign` / `horizontalAlign`.",
           "sourceRange": {
             "start": {
-              "line": 306,
+              "line": 314,
               "column": 6
             },
             "end": {
-              "line": 308,
+              "line": 316,
               "column": 7
             }
           },
@@ -3126,11 +3325,11 @@
           "description": "Vertical alignment of the dropdown relative to the trigger.\nShould be one of `top` or `bottom` where `top` means that the dropdown\nand trigger are aligned at the top, so the dropdown will extend _below_ the trigger.\nOverridden by dynamic alignment, unless `disableDynamicAlign` is true.",
           "sourceRange": {
             "start": {
-              "line": 315,
+              "line": 323,
               "column": 6
             },
             "end": {
-              "line": 317,
+              "line": 325,
               "column": 7
             }
           },
@@ -3142,11 +3341,11 @@
           "description": "Horizontal alignment of the dropdown relative to the trigger.\nShould be one of `left` or `right` where `left` means that the dropdown\nand trigger are aligned on their left side, so the dropdown will extend _to the right_.\nOverridden by dynamic alignment, unless `disableDynamicAlign` is true.",
           "sourceRange": {
             "start": {
-              "line": 324,
+              "line": 332,
               "column": 6
             },
             "end": {
-              "line": 326,
+              "line": 334,
               "column": 7
             }
           },
@@ -3158,11 +3357,11 @@
           "description": "Whether to display the mobile version of the dropdown, which appears as a fullscreen modal.\nAutomatically detected based on the breakpoint specified in `mobileAt`.",
           "sourceRange": {
             "start": {
-              "line": 331,
+              "line": 339,
               "column": 6
             },
             "end": {
-              "line": 334,
+              "line": 342,
               "column": 7
             }
           },
@@ -3174,11 +3373,11 @@
           "description": "The breakpoint (in # of pixels) at which to display the mobile version of px-dropdown.",
           "sourceRange": {
             "start": {
-              "line": 338,
+              "line": 346,
               "column": 6
             },
             "end": {
-              "line": 340,
+              "line": 348,
               "column": 7
             }
           },
@@ -3190,11 +3389,11 @@
           "description": "By default, the mobile dropdown will show Apply/Clear buttons.\nSet this property to hide them.",
           "sourceRange": {
             "start": {
-              "line": 345,
+              "line": 353,
               "column": 6
             },
             "end": {
-              "line": 347,
+              "line": 355,
               "column": 7
             }
           },
@@ -3206,11 +3405,11 @@
           "description": "Binding target for iron-a11y-keys",
           "sourceRange": {
             "start": {
-              "line": 381,
+              "line": 389,
               "column": 6
             },
             "end": {
-              "line": 383,
+              "line": 391,
               "column": 7
             }
           },
@@ -3398,11 +3597,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 190,
+              "line": 193,
               "column": 6
             },
             "end": {
-              "line": 194,
+              "line": 197,
               "column": 7
             }
           },
@@ -3420,11 +3619,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 198,
+              "line": 201,
               "column": 6
             },
             "end": {
-              "line": 201,
+              "line": 204,
               "column": 7
             }
           },
@@ -3440,11 +3639,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 206,
+              "line": 209,
               "column": 6
             },
             "end": {
-              "line": 208,
+              "line": 211,
               "column": 7
             }
           },
@@ -3459,11 +3658,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 213,
+              "line": 216,
               "column": 6
             },
             "end": {
-              "line": 216,
+              "line": 219,
               "column": 7
             }
           },
@@ -3479,11 +3678,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 222,
+              "line": 225,
               "column": 6
             },
             "end": {
-              "line": 227,
+              "line": 230,
               "column": 7
             }
           },
@@ -3502,11 +3701,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 236,
+              "line": 239,
               "column": 6
             },
             "end": {
-              "line": 239,
+              "line": 242,
               "column": 7
             }
           },
@@ -3522,11 +3721,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 243,
+              "line": 246,
               "column": 6
             },
             "end": {
-              "line": 246,
+              "line": 249,
               "column": 7
             }
           },
@@ -3542,11 +3741,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 252,
+              "line": 255,
               "column": 6
             },
             "end": {
-              "line": 255,
+              "line": 258,
               "column": 7
             }
           },
@@ -3562,11 +3761,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 261,
+              "line": 264,
               "column": 6
             },
             "end": {
-              "line": 264,
+              "line": 267,
               "column": 7
             }
           },
@@ -3582,11 +3781,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 269,
-              "column": 7
+              "line": 272,
+              "column": 6
             },
             "end": {
-              "line": 271,
+              "line": 274,
               "column": 7
             }
           },
@@ -3601,11 +3800,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 286,
+              "line": 289,
               "column": 6
             },
             "end": {
-              "line": 292,
+              "line": 295,
               "column": 7
             }
           },
@@ -3623,11 +3822,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 298,
+              "line": 301,
               "column": 6
             },
             "end": {
-              "line": 301,
+              "line": 304,
               "column": 7
             }
           },
@@ -3643,11 +3842,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 306,
+              "line": 309,
               "column": 6
             },
             "end": {
-              "line": 309,
+              "line": 312,
               "column": 7
             }
           },
@@ -3663,11 +3862,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 314,
+              "line": 317,
               "column": 6
             },
             "end": {
-              "line": 318,
+              "line": 321,
               "column": 7
             }
           },
@@ -3685,11 +3884,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 323,
+              "line": 326,
               "column": 6
             },
             "end": {
-              "line": 326,
+              "line": 329,
               "column": 7
             }
           },
@@ -3706,11 +3905,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 330,
+              "line": 333,
               "column": 6
             },
             "end": {
-              "line": 336,
+              "line": 339,
               "column": 7
             }
           },
@@ -3728,11 +3927,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 342,
+              "line": 345,
               "column": 6
             },
             "end": {
-              "line": 345,
+              "line": 348,
               "column": 7
             }
           },
@@ -3748,11 +3947,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 350,
+              "line": 353,
               "column": 6
             },
             "end": {
-              "line": 353,
+              "line": 356,
               "column": 7
             }
           },
@@ -3768,11 +3967,31 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 357,
+              "line": 360,
               "column": 6
             },
             "end": {
-              "line": 360,
+              "line": 363,
+              "column": 7
+            }
+          },
+          "metadata": {
+            "polymer": {}
+          },
+          "defaultValue": "false"
+        },
+        {
+          "name": "disabledViewable",
+          "type": "boolean",
+          "description": "Whether the dropdown should be disabled and interactive.",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 367,
+              "column": 6
+            },
+            "end": {
+              "line": 370,
               "column": 7
             }
           },
@@ -3788,11 +4007,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 365,
+              "line": 375,
               "column": 6
             },
             "end": {
-              "line": 368,
+              "line": 378,
               "column": 7
             }
           },
@@ -3808,11 +4027,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 373,
+              "line": 383,
               "column": 6
             },
             "end": {
-              "line": 376,
+              "line": 386,
               "column": 7
             }
           },
@@ -3828,11 +4047,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 382,
+              "line": 392,
               "column": 6
             },
             "end": {
-              "line": 384,
+              "line": 394,
               "column": 7
             }
           },
@@ -3847,11 +4066,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 390,
+              "line": 400,
               "column": 6
             },
             "end": {
-              "line": 393,
+              "line": 403,
               "column": 7
             }
           },
@@ -3867,11 +4086,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 401,
+              "line": 411,
               "column": 6
             },
             "end": {
-              "line": 404,
+              "line": 414,
               "column": 7
             }
           },
@@ -3887,11 +4106,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 409,
+              "line": 419,
               "column": 6
             },
             "end": {
-              "line": 412,
+              "line": 422,
               "column": 7
             }
           },
@@ -3907,11 +4126,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 417,
+              "line": 427,
               "column": 6
             },
             "end": {
-              "line": 420,
+              "line": 430,
               "column": 7
             }
           },
@@ -3927,11 +4146,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 426,
+              "line": 436,
               "column": 6
             },
             "end": {
-              "line": 429,
+              "line": 439,
               "column": 7
             }
           },
@@ -3947,11 +4166,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 435,
+              "line": 445,
               "column": 6
             },
             "end": {
-              "line": 438,
+              "line": 448,
               "column": 7
             }
           },
@@ -3967,11 +4186,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 445,
+              "line": 455,
               "column": 6
             },
             "end": {
-              "line": 448,
+              "line": 458,
               "column": 7
             }
           },
@@ -3987,11 +4206,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 455,
+              "line": 465,
               "column": 6
             },
             "end": {
-              "line": 458,
+              "line": 468,
               "column": 7
             }
           },
@@ -4007,11 +4226,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 463,
+              "line": 473,
               "column": 6
             },
             "end": {
-              "line": 466,
+              "line": 476,
               "column": 7
             }
           },
@@ -4026,11 +4245,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 470,
+              "line": 480,
               "column": 6
             },
             "end": {
-              "line": 473,
+              "line": 483,
               "column": 7
             }
           },
@@ -4046,11 +4265,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 478,
+              "line": 488,
               "column": 6
             },
             "end": {
-              "line": 481,
+              "line": 491,
               "column": 7
             }
           },
@@ -4066,11 +4285,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 489,
+              "line": 499,
               "column": 6
             },
             "end": {
-              "line": 492,
+              "line": 502,
               "column": 7
             }
           },
@@ -4086,11 +4305,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 493,
+              "line": 503,
               "column": 6
             },
             "end": {
-              "line": 496,
+              "line": 506,
               "column": 7
             }
           },
@@ -4106,11 +4325,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 501,
+              "line": 511,
               "column": 6
             },
             "end": {
-              "line": 512,
+              "line": 522,
               "column": 7
             }
           },
@@ -4126,11 +4345,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 516,
+              "line": 526,
               "column": 6
             },
             "end": {
-              "line": 521,
+              "line": 531,
               "column": 7
             }
           },
@@ -4145,11 +4364,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 526,
+              "line": 536,
               "column": 6
             },
             "end": {
-              "line": 528,
+              "line": 538,
               "column": 7
             }
           },
@@ -4164,11 +4383,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 533,
+              "line": 543,
               "column": 6
             },
             "end": {
-              "line": 536,
+              "line": 546,
               "column": 7
             }
           },
@@ -4184,11 +4403,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 540,
+              "line": 550,
               "column": 6
             },
             "end": {
-              "line": 543,
+              "line": 553,
               "column": 7
             }
           },
@@ -4205,11 +4424,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 545,
+              "line": 555,
               "column": 4
             },
             "end": {
-              "line": 557,
+              "line": 567,
               "column": 5
             }
           },
@@ -4222,11 +4441,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 558,
+              "line": 568,
               "column": 4
             },
             "end": {
-              "line": 566,
+              "line": 576,
               "column": 5
             }
           },
@@ -4239,11 +4458,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 567,
+              "line": 577,
               "column": 4
             },
             "end": {
-              "line": 569,
+              "line": 579,
               "column": 5
             }
           },
@@ -4499,11 +4718,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 570,
+              "line": 580,
               "column": 4
             },
             "end": {
-              "line": 572,
+              "line": 582,
               "column": 5
             }
           },
@@ -4516,11 +4735,11 @@
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 577,
+              "line": 587,
               "column": 4
             },
             "end": {
-              "line": 582,
+              "line": 592,
               "column": 5
             }
           },
@@ -4533,11 +4752,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 591,
+              "line": 601,
               "column": 4
             },
             "end": {
-              "line": 606,
+              "line": 616,
               "column": 5
             }
           },
@@ -4554,11 +4773,11 @@
           "privacy": "protected",
           "sourceRange": {
             "start": {
-              "line": 610,
+              "line": 620,
               "column": 4
             },
             "end": {
-              "line": 616,
+              "line": 626,
               "column": 5
             }
           },
@@ -4576,11 +4795,11 @@
       "metadata": {},
       "sourceRange": {
         "start": {
-          "line": 177,
+          "line": 180,
           "column": 10
         },
         "end": {
-          "line": 629,
+          "line": 639,
           "column": 3
         }
       },
@@ -4610,11 +4829,11 @@
           "description": "A flag which reflects if the dropdown trigger has been clicked or not.",
           "sourceRange": {
             "start": {
-              "line": 190,
+              "line": 193,
               "column": 6
             },
             "end": {
-              "line": 194,
+              "line": 197,
               "column": 7
             }
           },
@@ -4626,11 +4845,11 @@
           "description": "Whether or not to hide the chevron icon from the dropdown.",
           "sourceRange": {
             "start": {
-              "line": 198,
+              "line": 201,
               "column": 6
             },
             "end": {
-              "line": 201,
+              "line": 204,
               "column": 7
             }
           },
@@ -4642,11 +4861,11 @@
           "description": "A CSS selector which specifies the bounding target the dropdown will be\ndisplayed within. Defaults to `window`.",
           "sourceRange": {
             "start": {
-              "line": 206,
+              "line": 209,
               "column": 6
             },
             "end": {
-              "line": 208,
+              "line": 211,
               "column": 7
             }
           },
@@ -4658,11 +4877,11 @@
           "description": "Whether the dropdown will close when a user clicks\noutside of it. Set to true to prevent dropdown from closing.",
           "sourceRange": {
             "start": {
-              "line": 213,
+              "line": 216,
               "column": 6
             },
             "end": {
-              "line": 216,
+              "line": 219,
               "column": 7
             }
           },
@@ -4674,11 +4893,11 @@
           "description": "The placeholder text to display in the dropdown. If the\nselected value(s) are cleared out, the displayValue will be\nreplaced in the dropdown.",
           "sourceRange": {
             "start": {
-              "line": 222,
+              "line": 225,
               "column": 6
             },
             "end": {
-              "line": 227,
+              "line": 230,
               "column": 7
             }
           },
@@ -4690,11 +4909,11 @@
           "description": "If set to true, users are unable to clear out the dropdown\nonce a selection has been made. Useful for required single-select\ndropdowns where an empty state would be undesirable. Not recommended\nfor multi-select dropdowns, as it means the user will simply lose the ability\nto quickly deselect all checked options (there is currently no mechanism\nwhich requires a user to select at least one option).",
           "sourceRange": {
             "start": {
-              "line": 236,
+              "line": 239,
               "column": 6
             },
             "end": {
-              "line": 239,
+              "line": 242,
               "column": 7
             }
           },
@@ -4706,11 +4925,11 @@
           "description": "If set to true, users can still open the dropdown but can not click on items",
           "sourceRange": {
             "start": {
-              "line": 243,
+              "line": 246,
               "column": 6
             },
             "end": {
-              "line": 246,
+              "line": 249,
               "column": 7
             }
           },
@@ -4722,11 +4941,11 @@
           "description": "If set to true, users can still open the dropdown and click on items,\nbut they will not be selected. Use this property in use cases where\nthe dropdown is used as a menu instead of a form input.",
           "sourceRange": {
             "start": {
-              "line": 252,
+              "line": 255,
               "column": 6
             },
             "end": {
-              "line": 255,
+              "line": 258,
               "column": 7
             }
           },
@@ -4738,11 +4957,11 @@
           "description": "By default, dropdown items longer than the max-width of the dropdown\nwill be truncated, with the full string available on hover tooltip.\nIf this property is set, items will not be truncated, but will wrap instead.",
           "sourceRange": {
             "start": {
-              "line": 261,
+              "line": 264,
               "column": 6
             },
             "end": {
-              "line": 264,
+              "line": 267,
               "column": 7
             }
           },
@@ -4754,11 +4973,11 @@
           "description": "An array that contains the list of items which show up in the dropdown.\nEach item can either be a simple string, or an object consisting of:\n* 'key' - a unique identifier (number or string)\n* 'val' - the actual text that is displayed\n* 'disabled' - whether the item should be disabled completely - can't be selected nor used as a menu option (optional)\n* 'disableSelect` - whether the item should be disabled for selection, but can still be used as a menu option (optional)\n* 'selected' - whether the item should be selected at instantiation (optional)\n* 'icon' - an icon name from the px-icon-set to display next to the item (optional)\n* 'color' - the color to use for the icon - if not specified, the default text colors will be used (optional)\n\nNote: if you specify more than one item as `selected`, but `multi` is not enabled,\nonly the *first* selected item will be chosen. See also `clearSelectionsOnChange`.",
           "sourceRange": {
             "start": {
-              "line": 286,
+              "line": 289,
               "column": 6
             },
             "end": {
-              "line": 292,
+              "line": 295,
               "column": 7
             }
           },
@@ -4770,11 +4989,11 @@
           "description": "If set to true, multiple values can be selected in the dropdown.\nSelected values are reflected in the `selectedValues` property.\nIf set to false, a single selected value is reflected in `selected`.",
           "sourceRange": {
             "start": {
-              "line": 298,
+              "line": 301,
               "column": 6
             },
             "end": {
-              "line": 301,
+              "line": 304,
               "column": 7
             }
           },
@@ -4786,11 +5005,11 @@
           "description": "Which property of each dropdown item will be used to get/set\nthe selected items - should be one of \"key\" or \"val\".",
           "sourceRange": {
             "start": {
-              "line": 306,
+              "line": 309,
               "column": 6
             },
             "end": {
-              "line": 309,
+              "line": 312,
               "column": 7
             }
           },
@@ -4802,11 +5021,11 @@
           "description": "Gets or sets the selected item when `multi` is false.\nWill either be a single key or value based on `selectBy`.",
           "sourceRange": {
             "start": {
-              "line": 314,
+              "line": 317,
               "column": 6
             },
             "end": {
-              "line": 318,
+              "line": 321,
               "column": 7
             }
           },
@@ -4818,11 +5037,11 @@
           "description": "Gets or sets the selected items when `multi` is true.\nWill either be an array of keys or values based on `selectBy`.",
           "sourceRange": {
             "start": {
-              "line": 323,
+              "line": 326,
               "column": 6
             },
             "end": {
-              "line": 326,
+              "line": 329,
               "column": 7
             }
           },
@@ -4834,11 +5053,11 @@
           "description": "A read-only array of the selected `<div>` elements in the dropdown.",
           "sourceRange": {
             "start": {
-              "line": 330,
+              "line": 333,
               "column": 6
             },
             "end": {
-              "line": 336,
+              "line": 339,
               "column": 7
             }
           },
@@ -4850,11 +5069,11 @@
           "description": "By default, the dropdown will constrain scrolling on the page to\nitself when opened. Set to true in order to allow scrolling of\nthe page while the dropdown is open.",
           "sourceRange": {
             "start": {
-              "line": 342,
+              "line": 345,
               "column": 6
             },
             "end": {
-              "line": 345,
+              "line": 348,
               "column": 7
             }
           },
@@ -4866,11 +5085,11 @@
           "description": "Style for the button that invokes the dropdown.\nOne of 'default','bare','bare--primary', 'tertiary', or 'icon'.",
           "sourceRange": {
             "start": {
-              "line": 350,
+              "line": 353,
               "column": 6
             },
             "end": {
-              "line": 353,
+              "line": 356,
               "column": 7
             }
           },
@@ -4882,11 +5101,27 @@
           "description": "Whether the dropdown should be disabled and non-interactive.",
           "sourceRange": {
             "start": {
-              "line": 357,
+              "line": 360,
               "column": 6
             },
             "end": {
-              "line": 360,
+              "line": 363,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "type": "boolean"
+        },
+        {
+          "name": "disabled-viewable",
+          "description": "Whether the dropdown should be disabled and interactive.",
+          "sourceRange": {
+            "start": {
+              "line": 367,
+              "column": 6
+            },
+            "end": {
+              "line": 370,
               "column": 7
             }
           },
@@ -4898,11 +5133,11 @@
           "description": "If true, the dropdown will include a search box, whereby the\ndropdown items can be filtered with a search term.",
           "sourceRange": {
             "start": {
-              "line": 365,
+              "line": 375,
               "column": 6
             },
             "end": {
-              "line": 368,
+              "line": 378,
               "column": 7
             }
           },
@@ -4914,11 +5149,11 @@
           "description": "The value of the search box, used for filtering the dropdown\nitems when searchMode is true.",
           "sourceRange": {
             "start": {
-              "line": 373,
+              "line": 383,
               "column": 6
             },
             "end": {
-              "line": 376,
+              "line": 386,
               "column": 7
             }
           },
@@ -4930,11 +5165,11 @@
           "description": "What to sort the dropdown items by - one of \"key\" or \"val\".\nBy default, the items will be displayed in the order they are\npassed into the component.",
           "sourceRange": {
             "start": {
-              "line": 382,
+              "line": 392,
               "column": 6
             },
             "end": {
-              "line": 384,
+              "line": 394,
               "column": 7
             }
           },
@@ -4946,11 +5181,11 @@
           "description": "If set to true, the display-value will always show up in the\ninvoking button of the dropdown. Useful in cases like the\npx-data-table, where \"Show/Hide Columns\" should always appear.",
           "sourceRange": {
             "start": {
-              "line": 390,
+              "line": 400,
               "column": 6
             },
             "end": {
-              "line": 393,
+              "line": 403,
               "column": 7
             }
           },
@@ -4962,11 +5197,11 @@
           "description": "If buttonStyle is set to 'icon' this property will dictate\nwhich icon will be displayed inside of the dropdown button.\nThe `displayValue`, selected values, and chevron will not be displayed.\nPerfect for icon-invoked menus. The value of this property should\nbe a valid px-icon name, e.g. 'px-utl:app-settings'",
           "sourceRange": {
             "start": {
-              "line": 401,
+              "line": 411,
               "column": 6
             },
             "end": {
-              "line": 404,
+              "line": 414,
               "column": 7
             }
           },
@@ -4978,11 +5213,11 @@
           "description": "Set this property if you would like the `selected` and `selectedValues`\nproperties to be cleared whenever mutations are made to the `items` array.",
           "sourceRange": {
             "start": {
-              "line": 409,
+              "line": 419,
               "column": 6
             },
             "end": {
-              "line": 412,
+              "line": 422,
               "column": 7
             }
           },
@@ -4994,11 +5229,11 @@
           "description": "The height of the trigger element, used for calculating offset distance\nfor the dropdown. Set this value if you use the `trigger` slot.",
           "sourceRange": {
             "start": {
-              "line": 417,
+              "line": 427,
               "column": 6
             },
             "end": {
-              "line": 420,
+              "line": 430,
               "column": 7
             }
           },
@@ -5010,11 +5245,11 @@
           "description": "By default, the dropdown menu will be flush against the trigger.\nEnable this property to show a caret between the two. Useful\nin iconic menus and used by the application/product switcher.",
           "sourceRange": {
             "start": {
-              "line": 426,
+              "line": 436,
               "column": 6
             },
             "end": {
-              "line": 429,
+              "line": 439,
               "column": 7
             }
           },
@@ -5026,11 +5261,11 @@
           "description": "By default the dropdown will attempt to automatically align itself\nvertically and horizontally based on the available space. Set this flag\nto turn off that automatic behavior and force a certain `verticalAlign` / `horizontalAlign`.",
           "sourceRange": {
             "start": {
-              "line": 435,
+              "line": 445,
               "column": 6
             },
             "end": {
-              "line": 438,
+              "line": 448,
               "column": 7
             }
           },
@@ -5042,11 +5277,11 @@
           "description": "Vertical alignment of the dropdown relative to the trigger.\nShould be one of `top` or `bottom` where `top` means that the dropdown\nand trigger are aligned at the top, so the dropdown will extend _below_ the trigger.\nOverridden by dynamic alignment, unless `disableDynamicAlign` is true.",
           "sourceRange": {
             "start": {
-              "line": 445,
+              "line": 455,
               "column": 6
             },
             "end": {
-              "line": 448,
+              "line": 458,
               "column": 7
             }
           },
@@ -5058,11 +5293,11 @@
           "description": "Horizontal alignment of the dropdown relative to the trigger.\nShould be one of `left` or `right` where `left` means that the dropdown\nand trigger are aligned on their left side, so the dropdown will extend _to the right_.\nOverridden by dynamic alignment, unless `disableDynamicAlign` is true.",
           "sourceRange": {
             "start": {
-              "line": 455,
+              "line": 465,
               "column": 6
             },
             "end": {
-              "line": 458,
+              "line": 468,
               "column": 7
             }
           },
@@ -5074,11 +5309,11 @@
           "description": "Whether to display the mobile version of the dropdown, which appears as a fullscreen modal.\nAutomatically detected based on the breakpoint specified in `mobileAt`.",
           "sourceRange": {
             "start": {
-              "line": 463,
+              "line": 473,
               "column": 6
             },
             "end": {
-              "line": 466,
+              "line": 476,
               "column": 7
             }
           },
@@ -5090,11 +5325,11 @@
           "description": "The breakpoint (in # of pixels) at which to display the mobile version of px-dropdown.",
           "sourceRange": {
             "start": {
-              "line": 470,
+              "line": 480,
               "column": 6
             },
             "end": {
-              "line": 473,
+              "line": 483,
               "column": 7
             }
           },
@@ -5106,11 +5341,11 @@
           "description": "By default, the mobile dropdown will show Apply/Clear buttons.\nSet this property to hide them.",
           "sourceRange": {
             "start": {
-              "line": 478,
+              "line": 488,
               "column": 6
             },
             "end": {
-              "line": 481,
+              "line": 491,
               "column": 7
             }
           },
@@ -5122,11 +5357,11 @@
           "description": "A valid IETF language tag as a string that `app-localize-behavior` will\nuse to localize this component.\n\nSee https://github.com/PolymerElements/app-localize-behavior for API\ndocumentation and more information.",
           "sourceRange": {
             "start": {
-              "line": 489,
+              "line": 499,
               "column": 6
             },
             "end": {
-              "line": 492,
+              "line": 502,
               "column": 7
             }
           },
@@ -5138,11 +5373,11 @@
           "description": "",
           "sourceRange": {
             "start": {
-              "line": 493,
+              "line": 503,
               "column": 6
             },
             "end": {
-              "line": 496,
+              "line": 506,
               "column": 7
             }
           },
@@ -5154,11 +5389,11 @@
           "description": "A dictionary of strings used within the component for AppLocalizeBehavior\nto use, based on the selected `language` property.",
           "sourceRange": {
             "start": {
-              "line": 501,
+              "line": 511,
               "column": 6
             },
             "end": {
-              "line": 512,
+              "line": 522,
               "column": 7
             }
           },
@@ -5170,11 +5405,11 @@
           "description": "Specifies if the dropdown content should get hoisted to a container in order to escape its current stacking context",
           "sourceRange": {
             "start": {
-              "line": 540,
+              "line": 550,
               "column": 6
             },
             "end": {
-              "line": 543,
+              "line": 553,
               "column": 7
             }
           },
@@ -5235,7 +5470,7 @@
               "column": 6
             },
             "end": {
-              "line": 132,
+              "line": 134,
               "column": 13
             }
           }

From 3288d563c63abf9360268251759ad11c95657768 Mon Sep 17 00:00:00 2001
From: Aron Graham <aron.graham@ge.com>
Date: Fri, 4 Jan 2019 13:52:15 +1000
Subject: [PATCH 6/7] fix tests for Safari

---
 test/px-dropdown-custom-tests.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/test/px-dropdown-custom-tests.js b/test/px-dropdown-custom-tests.js
index 3d862600..9ef71a11 100644
--- a/test/px-dropdown-custom-tests.js
+++ b/test/px-dropdown-custom-tests.js
@@ -493,7 +493,6 @@ describe("Test the different px-dropdown states of disabled, read-only and disab
     };
     px_dropdown_button.click();
 
-    assert.isTrue(px_dropdown.opened, "expected dropdown to open");
     assert.isTrue(
       px_dropdown.hasAttribute("read-only"),
       "expected dropdown-content to have class read-only"
@@ -519,7 +518,6 @@ describe("Test the different px-dropdown states of disabled, read-only and disab
     };
     px_dropdown_button.click();
 
-    assert.isTrue(px_dropdown.opened, "expected dropdown to open");
     assert.isTrue(
       px_dropdown.hasAttribute("disabled-viewable"),
       "expected dropdown-content to have class disabled-viewable"

From 0e3458b00e773603567bdf5074bc20389e511c3f Mon Sep 17 00:00:00 2001
From: Aron Graham <aron.graham@ge.com>
Date: Fri, 4 Jan 2019 14:07:13 +1000
Subject: [PATCH 7/7] updated history notes

---
 HISTORY.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/HISTORY.md b/HISTORY.md
index b6bec41b..b3104acc 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -1,6 +1,8 @@
 # v4.7.10
 
-- added read-only property to item list. user can see the items (not disabled) but can not click them.
+- Added read-only and disabled-viewable properties to px-dropdown.
+- read-only allows user to open px-dropdown in an active state but they can not select items
+- disabled-viewable allows user to open px-dropdown even though its in a disabled state but they can not select items
 
 # v4.7.9