Fixing issues and improving design.

chip.js

@@ -1,5 +1,5 @@
 import { IgniteElement } from "../ignite-html/ignite-element.js";
-import { IgniteTemplate, slot, button } from "../ignite-html/ignite-template.js";
+import { IgniteTemplate, slot, button, span } from "../ignite-html/ignite-template.js";
 
 class Chip extends IgniteElement {
     constructor() {
@@ -8,7 +8,9 @@ class Chip extends IgniteElement {
 
     get properties() {
         return {
-            onDelete: () => { }
+            onDelete: () => { },
+            background: null,
+            color: null
         }
     }
 
@@ -22,17 +24,24 @@ class Chip extends IgniteElement {
                 padding-left: 0.6em;
                 padding-right: 0.6em;
             }
+
+            mt-chip:hover {
+                filter: brightness(0.9);
+            }
         `;
     }
 
     render() {
-        return this.template.child(
-            new slot(this),
-            new button()
-                .class("btn ml-1 p-0")
-                .child(`<i class="fad fa-times-circle"></i>`)
-                .onClick(() => this.onDelete())
-        );
+        return this.template
+            .style("background", this.background)
+            .style("color", this.color)
+            .child(
+                new slot(this),
+                new button()
+                    .class("btn ml-1 p-0")
+                    .child(`<i class="fad fa-times-circle" style="--fa-secondary-color: rgba(0,0,0,0.3); --fa-primary-color: rgba(0,0,0,0.5);"></i>`)
+                    .onClick(() => this.onDelete())
+            );
     }
 }