Adjusted styling of chip list and editable label. Cleaned up CSS and simplified a few things.

chip-list.js

@@ -15,10 +15,13 @@ class ChipList extends IgniteElement {
                 flex-direction: row;
                 flex-wrap: wrap;
                 gap: 12px;
-                border: solid 0.13rem transparent;
+                border: solid 0.15rem transparent;
                 border-radius: 0.3rem;
-                padding: 0.2rem;
-                margin-left: calc((0.13rem + 0.2rem) * -1);
+                padding: 0.4rem;
+            }
+
+            mt-chip-list:focus {
+                outline: none;
             }
 
             mt-chip-list:hover {
@@ -26,7 +29,7 @@ class ChipList extends IgniteElement {
             }
 
             mt-chip-list.editing {
-                border: solid 0.13rem #ced4da;
+                border: solid 0.15rem rgba(0,0,0,0.1);
                 border-radius: 0.3rem;
             }
 
@@ -144,6 +147,11 @@ class ChipList extends IgniteElement {
                                 //will focus the next avaiable element.
                                 if (e.key == "Tab") {
                                     this.searching = false;
+
+                                    if (this.stopEditingOnBlur) {
+                                        this.editing = false;
+                                    }
+
                                     this.input.innerHTML = "";
                                     return;
                                 }
@@ -192,8 +200,6 @@ class ChipList extends IgniteElement {
     }
 
     onFocus() {
-        console.log("ChpiList, focus called");
-
         if (!this.editing) {
             this.editing = true;
             this.input.focus();
@@ -218,7 +224,6 @@ class ChipList extends IgniteElement {
     }
 
     searchResultClick(item) {
-        console.log("Search result click");
         if (this.items == null) {
             this.items = [];
         }