Add styling part

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-color-picker",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "",
   "main": "tp-color-picker.js",
   "scripts": {

tp-color-picker.js

@@ -31,6 +31,7 @@ class TpColorPicker extends FormElement(DomQuery(LitElement)) {
 
         .wrap {
           display: flex;
+          flex-direction: column;
           flex-wrap: wrap;
           height: 200px;
           width: 360px;
@@ -83,7 +84,7 @@ class TpColorPicker extends FormElement(DomQuery(LitElement)) {
     return html`
       <tp-popup id="popup" part="popup" @is-open-changed=${e => this.isOpen = e.detail}>
         <div slot="toggle" part="selection" style="${this._showPickedColor(this.value)}"></div>
-        <div slot="content" @click="${this._selectColor}">
+        <div slot="content" part="selector" @click="${this._selectColor}">
           <div class="wrap">
             ${this.colorList.map(color => html`
               <div color style="${this._bgColor(color)}"></div>
@@ -123,6 +124,12 @@ class TpColorPicker extends FormElement(DomQuery(LitElement)) {
     ];
   }
 
+  randomColor() {
+    const randomColor = this.colorList[Math.floor(Math.random() * this.colorList.length)];
+    this.value = randomColor;
+    return randomColor;
+  }
+
   _selectColor(e) {
     const target = e.composedPath()[0];
     if (target.hasAttribute('color')) {