Add popup part. Rename #list to #popup.

Add css var for styling popup background.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-dropdown",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "",
   "main": "tp-dropdown.js",
   "scripts": {

tp-dropdown.js

@@ -117,7 +117,7 @@ class TpDropdown extends BaseElement {
           opacity: 1;
         }
 
-        #list {
+        #popup {
           pointer-events: none;
           transition: opacity 0ms;
           opacity: 0;
@@ -126,12 +126,12 @@ class TpDropdown extends BaseElement {
           height: auto;
         }
 
-        #list[open] {
+        #popup[open] {
           pointer-events: all;
           transition: opacity 180ms;
           opacity: 1;
           border-radius: 2px;
-          background: #FAFAFA;
+          background: var(--tp-dropdown-popup-bg, #FAFAFA);
           height: auto;
           box-shadow: var(--shadow-2dp);
         }
@@ -202,7 +202,7 @@ class TpDropdown extends BaseElement {
 
         @media all and (min-width: 0) and (max-width: 480px) {
 
-          :host(:not([not-responsive])) #list {
+          :host(:not([not-responsive])) #popup {
             top: 40px !important;
             bottom: 40px !important;
             left: 40px !important;
@@ -249,7 +249,7 @@ class TpDropdown extends BaseElement {
             <tp-icon id="toggleIcon" ?open="${isOpen}" .icon=${TpDropdown.selectorIcon}></tp-icon>
           </div>
         </div>
-        <div id="list" ?open="${isOpen}">
+        <div id="popup" ?open="${isOpen}" part="popup">
           ${filterable ? html`
             <tp-input part="filter" exportparts="wrap:filterWrap" id="filter" .value=${this._filterTerm || ''} @input=${e => this._filterTerm = e.target.value} .inert=${!isOpen} ?hidden=${!(filterable || extensible)}>
               <input type="text" placeholder=${filterPlaceholder}>
@@ -561,8 +561,8 @@ class TpDropdown extends BaseElement {
 
     var spaceBottom = winHeight - rect.top - rect.height - filterHeight;
     this.$.itemList.style.maxHeight = (spaceBottom - 20) + 'px';
-    this.$.list.style.maxWidth = rect.width + 'px';
-    this.$.list.style.minWidth = rect.width + 'px';
+    this.$.popup.style.maxWidth = rect.width + 'px';
+    this.$.popup.style.minWidth = rect.width + 'px';
 
     var useTopLayout = spaceBottom < 150;
 
@@ -570,7 +570,7 @@ class TpDropdown extends BaseElement {
       this.$.itemList.style.maxHeight = (rect.top - 20) + 'px';
     }
 
-    this._posFixed(this, this.$.list, {
+    this._posFixed(this, this.$.popup, {
       spacing: 0,
       valign: useTopLayout ? 'top' : 'bottom',
       halign: 'left'
@@ -580,7 +580,7 @@ class TpDropdown extends BaseElement {
     setTimeout(() => {
       var lastItem = this.$.itemList.querySelector('div[role="option"]:last-of-type');
       if (lastItem) {
-        this.$.list.style.maxHeight = lastItem.getBoundingClientRect().top + 'px';
+        this.$.popup.style.maxHeight = lastItem.getBoundingClientRect().top + 'px';
       }
     });
   }