feat(chip): new chip-set component

src/components/chip-set/chip-set.mdx

@@ -0,0 +1,32 @@
+---
+name: Chip set
+route: /chip-set
+menu: Components
+---
+
+# Chip set
+
+<limel-props name="limel-chip-set" />
+
+## CSS variables
+
+| Name                          | Description                                           |
+| ----------------------------- | ----------------------------------------------------- |
+| --icon-background-color       | Background color of the icon. Defaults to transparent |
+| --icon-color                  | Color of the icon. Defaults to 54% black              |
+
+## Example
+
+<limel-example name="limel-example-chip-set" />
+
+### Choice chip set
+
+<limel-example name="limel-example-chip-set-choice" path="chip-set" />
+
+### Filter chip set
+
+<limel-example name="limel-example-chip-set-filter" path="chip-set" />
+
+### Input chip set
+
+<limel-example name="limel-example-chip-set-input" path="chip-set" />

src/components/chip-set/chip-set.scss

@@ -0,0 +1,48 @@
+@import "@lime-material/chips/mdc-chips";
+@import '@lime-material/theme/mdc-theme';
+@import '@lime-material/textfield/mdc-text-field';
+
+:host([disabled]) {
+    pointer-events: none;
+
+    .mdc-chip-set {
+        opacity: 0.5;
+    }
+}
+
+limel-icon.mdc-chip__icon.mdc-chip__icon--leading {
+    background-color: var(--icon-background-color, transparent);
+    padding: 0.5rem;
+    margin-left: -1.2rem !important;
+    color: var(--icon-color, rgba(0,0,0,.54));
+}
+
+.mdc-chip-set.mdc-chip-set--input {
+    margin-top: 2rem;
+    width: 100%;
+}
+
+
+.mdc-text-field {
+    width: 100%;
+    height: auto;
+    cursor: text;
+
+    input {
+        width: auto;
+        border-bottom: none;
+        height: auto;
+        padding-top: 0;
+        flex-grow: 1;
+        flex-shrink: 0;
+
+        &.hidden {
+            display: none;
+        }
+    }
+
+    .mdc-floating-label--float-above {
+        top: 2rem;
+        bottom: auto;
+    }
+}