From 53a45a38e23198a98d3deec42d7fc947eb491ee2 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 7 Dec 2018 15:21:42 +0100
Subject: [PATCH 1/4] upgraded partial of styleguide

---
 .../components/navigation/Menu/Menu.vue       | 10 ++++---
 .../components/typography/Icon/Icon.vue       | 14 ++++++++++
 .../components/typography/Icon/style.scss     | 27 ++++++++++++++++++-
 styleguide/src/system/icons/svg/angellist.svg |  5 ++++
 .../src/system/icons/svg/balance-scale.svg    |  5 ++++
 styleguide/src/system/icons/svg/bell.svg      |  5 ++++
 styleguide/src/system/icons/svg/bullhorn.svg  |  5 ++++
 styleguide/src/system/icons/svg/gamepad.svg   |  5 ++++
 .../src/system/icons/svg/graduation-cap.svg   |  5 ++++
 styleguide/src/system/icons/svg/leaf.svg      |  5 ++++
 .../src/system/icons/svg/mouse-pointer.svg    |  5 ++++
 .../src/system/icons/svg/paint-brush.svg      |  5 ++++
 styleguide/src/system/icons/svg/paw.svg       |  5 ++++
 styleguide/src/system/icons/svg/recycle.svg   |  5 ++++
 .../src/system/icons/svg/toggle-off.svg       |  5 ++++
 styleguide/src/system/icons/svg/toggle-on.svg |  5 ++++
 styleguide/src/system/icons/svg/tree.svg      |  5 ++++
 .../src/system/icons/svg/university.svg       |  5 ++++
 18 files changed, 122 insertions(+), 4 deletions(-)
 create mode 100755 styleguide/src/system/icons/svg/angellist.svg
 create mode 100755 styleguide/src/system/icons/svg/balance-scale.svg
 create mode 100755 styleguide/src/system/icons/svg/bell.svg
 create mode 100755 styleguide/src/system/icons/svg/bullhorn.svg
 create mode 100755 styleguide/src/system/icons/svg/gamepad.svg
 create mode 100755 styleguide/src/system/icons/svg/graduation-cap.svg
 create mode 100755 styleguide/src/system/icons/svg/leaf.svg
 create mode 100755 styleguide/src/system/icons/svg/mouse-pointer.svg
 create mode 100755 styleguide/src/system/icons/svg/paint-brush.svg
 create mode 100755 styleguide/src/system/icons/svg/paw.svg
 create mode 100755 styleguide/src/system/icons/svg/recycle.svg
 create mode 100755 styleguide/src/system/icons/svg/toggle-off.svg
 create mode 100755 styleguide/src/system/icons/svg/toggle-on.svg
 create mode 100755 styleguide/src/system/icons/svg/tree.svg
 create mode 100755 styleguide/src/system/icons/svg/university.svg

diff --git a/styleguide/src/system/components/navigation/Menu/Menu.vue b/styleguide/src/system/components/navigation/Menu/Menu.vue
index 03ad2a88b..7d36fd6cc 100644
--- a/styleguide/src/system/components/navigation/Menu/Menu.vue
+++ b/styleguide/src/system/components/navigation/Menu/Menu.vue
@@ -13,9 +13,13 @@
           :route="route"
           :parents="[]"
           :name="route.name">
-          <ds-menu-item
-            :key="route.path ? route.path : index"
-            :route="route" />
+          <slot
+            :route="route"
+            name="Navigation">
+            <ds-menu-item
+              :key="route.path ? route.path : index"
+              :route="route" />
+          </slot>
         </slot>
       </slot>
     </ul>
diff --git a/styleguide/src/system/components/typography/Icon/Icon.vue b/styleguide/src/system/components/typography/Icon/Icon.vue
index 85176aff2..602bc43cd 100644
--- a/styleguide/src/system/components/typography/Icon/Icon.vue
+++ b/styleguide/src/system/components/typography/Icon/Icon.vue
@@ -3,6 +3,7 @@
     :is="tag"
     :aria-label="ariaLabel"
     class="ds-icon"
+    :class="[size && `ds-icon-size-${size}`]"
   >
     <component
       v-if="svgComponent"
@@ -40,6 +41,19 @@ export default {
     tag: {
       type: String,
       default: 'span'
+    },
+    /**
+     * Which size should the icon have?
+     * `xx-small, x-small, small, base, large, x-large, xx-large, xxx-large`
+     */
+    size: {
+      type: String,
+      default: null,
+      validator: value => {
+        return value.match(
+          /(xx-small|x-small|small|base|large|x-large|xx-large|xxx-large)/
+        )
+      }
     }
   },
   computed: {
diff --git a/styleguide/src/system/components/typography/Icon/style.scss b/styleguide/src/system/components/typography/Icon/style.scss
index 1decda16d..2664dc697 100644
--- a/styleguide/src/system/components/typography/Icon/style.scss
+++ b/styleguide/src/system/components/typography/Icon/style.scss
@@ -17,4 +17,29 @@
   // overflow: visible;
   // Use this if the icons are build with solids
   fill: currentColor
-}
\ No newline at end of file
+}
+
+.ds-icon-size-xx-small {
+  font-size: $font-size-xx-small
+}
+.ds-icon-size-x-small {
+  font-size: $font-size-x-small
+}
+.ds-icon-size-small {
+  font-size: $font-size-small
+}
+.ds-icon-size-base {
+  font-size: $font-size-base
+}
+.ds-icon-size-large {
+  font-size: $font-size-large
+}
+.ds-icon-size-x-large {
+  font-size: $font-size-x-large
+}
+.ds-icon-size-xx-large {
+  font-size: $font-size-xx-large
+}
+.ds-icon-size-xxx-large {
+  font-size: $font-size-xxx-large
+}
diff --git a/styleguide/src/system/icons/svg/angellist.svg b/styleguide/src/system/icons/svg/angellist.svg
new file mode 100755
index 000000000..34123f5f0
--- /dev/null
+++ b/styleguide/src/system/icons/svg/angellist.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>angellist</title>
+<path d="M12.813 4c0.312 0.021 0.615 0.118 0.875 0.25 0.521 0.265 0.919 0.67 1.281 1.125 0.725 0.91 1.311 2.103 1.813 3.313 0.207 0.498 0.39 0.985 0.563 1.469 0.109-0.401 0.21-0.808 0.344-1.219 0.391-1.201 0.902-2.395 1.594-3.344 0.346-0.474 0.731-0.895 1.25-1.188s1.174-0.421 1.813-0.281c0.628 0.138 1.091 0.677 1.281 1.156s0.24 0.97 0.25 1.5c0.020 1.060-0.168 2.29-0.406 3.5-0.385 1.96-0.863 3.535-1.063 4.188 0.328 0.248 0.624 0.516 0.844 0.813 1.025 1.382 0.75 3.010 0.75 3.375 0 4.219-1.55 6.731-3.406 8s-3.874 1.344-4.75 1.344c-0.805 0-2.922 0.024-4.938-0.906s-3.906-3.011-3.906-6.563c0-1.078 0.261-1.996 0.906-2.625 0.403-0.392 0.929-0.57 1.469-0.625-0.205-0.548-0.361-1.162-0.281-1.844 0.089-0.757 0.563-1.558 1.344-2.063 0.319-0.206 0.672-0.326 1.031-0.344 0.169-0.008 0.336 0.001 0.5 0.031-0.273-0.768-0.577-1.665-0.844-2.625-0.325-1.173-0.597-2.383-0.625-3.469-0.014-0.543 0.037-1.059 0.219-1.563s0.577-1.017 1.156-1.25c0.303-0.122 0.625-0.177 0.938-0.156zM12.656 5.969c-0.013-0.002-0.018 0.026-0.031 0.031 0.004 0.007-0.006 0.024-0.031 0.094-0.051 0.14-0.104 0.453-0.094 0.844 0.020 0.781 0.229 1.879 0.531 2.969 0.497 1.791 1.081 3.25 1.313 3.813 0.442-0.431 1.082-0.719 1.781-0.719h0.063c-0.255-0.9-0.658-2.135-1.25-3.563-0.465-1.121-1.026-2.178-1.531-2.813-0.253-0.317-0.492-0.526-0.625-0.594-0.066-0.034-0.103-0.060-0.125-0.063zM21.656 6.125c-0.047-0-0.102 0.001-0.156 0.031-0.168 0.095-0.391 0.304-0.625 0.625-0.468 0.641-0.925 1.687-1.281 2.781-0.488 1.498-0.754 2.761-0.906 3.594 0.721 0.094 1.355 0.232 1.906 0.406 0.238-0.82 0.595-2.103 0.906-3.688 0.224-1.139 0.39-2.277 0.375-3.063-0.006-0.332-0.054-0.548-0.094-0.688-0.040 0.001-0.078 0-0.125 0zM16.125 15c-0.248 0-0.319 0.061-0.406 0.156s-0.169 0.254-0.188 0.469c-0.015 0.179 0.007 0.355 0.063 0.5 0.046 0.070 0.080 0.147 0.125 0.219 0.020 0.024 0.040 0.042 0.063 0.063 0.062 0.056 0.14 0.102 0.219 0.125 1.258 0.369 2.844 0.844 2.844 0.844 0.399 0.115 0.723 0.546 0.723 0.961 0 0.444-0.352 0.881-0.785 0.977 0 0-0.565 0.117-1.125 0.469-0.348 0.218-0.665 0.461-0.844 0.813-0.109 0.214-0.156 0.468-0.156 0.781 0 0.866 0.241 1.414 0.469 1.75s0.375 0.406 0.375 0.406l-1.094 1.656s-0.515-0.316-0.938-0.938c-0.189-0.278-0.354-0.651-0.5-1.063-0.079 0.184-0.099 0.39-0.219 0.531-0.466 0.55-1.139 0.906-1.906 0.906-0.74 0-1.409-0.369-1.906-0.813s-0.89-0.987-1.281-1.594l1.688-1.094c0.346 0.537 0.672 0.982 0.938 1.219s0.412 0.281 0.563 0.281c0.124 0 0.312-0.113 0.375-0.188-0.216-0.366-0.428-0.696-0.656-1-0.988-1.312-2.049-2.044-2.656-2.188-0.376-0.089-0.483-0.046-0.594 0.063s-0.313 0.471-0.313 1.219c0 2.907 1.245 4.056 2.75 4.75s3.296 0.719 4.094 0.719c0.727 0 2.304-0.097 3.625-1s2.531-2.589 2.531-6.344c0-0.822 0.143-1.5-0.344-2.156s-1.846-1.5-5.531-1.5zM11.5 15.031c-0.34 0.22-0.376 0.367-0.406 0.625s0.025 0.662 0.188 1.063c0.324 0.802 0.938 1.531 0.938 1.531 0.663 0.506 1.276 1.177 1.875 2l0.063-0.031c-0.196-0.257-0.218-0.129-0.063-0.125s0.414-0.041 0.594-0.125 0.279-0.181 0.313-0.25 0.064-0.147-0.063-0.469c-0.536-1.37-1.376-2.666-2.156-3.438-0.39-0.386-0.765-0.63-1-0.719s-0.239-0.090-0.281-0.063z"></path>
+</svg>
diff --git a/styleguide/src/system/icons/svg/balance-scale.svg b/styleguide/src/system/icons/svg/balance-scale.svg
new file mode 100755
index 000000000..f5e446fd2
--- /dev/null
+++ b/styleguide/src/system/icons/svg/balance-scale.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>balance-scale</title>
+<path d="M16 5c1.292 0 2.394 0.844 2.813 2h7.188v2h-1.406l0.281 0.5 4 7 0.125 0.25v0.25c0 2.75-2.25 5-5 5s-5-2.25-5-5v-0.25l0.125-0.25 4-7 0.281-0.5h-4.594c-0.304 0.84-0.973 1.509-1.813 1.813v13.188h4v2h-10v-2h4v-13.188c-0.842-0.304-1.507-0.969-1.813-1.813h-4.594l0.281 0.5 4 7 0.125 0.25v0.25c0 2.75-2.251 5-5 5s-5-2.25-5-5v-0.25l0.125-0.25 4-7 0.281-0.5h-1.406v-2h7.188c0.418-1.156 1.521-2 2.813-2zM16 7c-0.564 0-1 0.436-1 1s0.436 1 1 1 1-0.436 1-1-0.436-1-1-1zM8 12.031l-2.281 3.969h4.563zM24 12.031l-2.281 3.969h4.563zM5.25 18c0.402 1.161 1.444 2 2.75 2s2.348-0.839 2.75-2h-5.5zM21.25 18c0.402 1.161 1.444 2 2.75 2s2.348-0.839 2.75-2h-5.5z"></path>
+</svg>
diff --git a/styleguide/src/system/icons/svg/bell.svg b/styleguide/src/system/icons/svg/bell.svg
new file mode 100755
index 000000000..ee58c443c
--- /dev/null
+++ b/styleguide/src/system/icons/svg/bell.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>bell</title>
+<path d="M15 3c1.105 0 2 0.895 2 2 0 0.085-0.021 0.168-0.031 0.25 3.521 0.924 6.031 4.273 6.031 8.031v8.719c0 0.565 0.435 1 1 1h1v2h-7.188c0.114 0.316 0.188 0.647 0.188 1 0 1.645-1.355 3-3 3s-3-1.355-3-3c0-0.353 0.073-0.684 0.188-1h-7.188v-2h1c0.565 0 1-0.435 1-1v-9c0-3.726 2.574-6.866 6.031-7.75-0.010-0.082-0.031-0.165-0.031-0.25 0-1.105 0.895-2 2-2zM14.563 7c-3.118 0.226-5.563 2.824-5.563 6v9c0 0.353-0.073 0.684-0.188 1h12.375c-0.114-0.316-0.188-0.647-0.188-1v-8.719c0-3.319-2.546-6.183-5.813-6.281-0.064-0.002-0.124-0-0.188 0-0.148 0-0.292-0.011-0.438 0zM15 25c-0.564 0-1 0.436-1 1s0.436 1 1 1 1-0.436 1-1-0.436-1-1-1z"></path>
+</svg>
diff --git a/styleguide/src/system/icons/svg/bullhorn.svg b/styleguide/src/system/icons/svg/bullhorn.svg
new file mode 100755
index 000000000..95e0d21d3
--- /dev/null
+++ b/styleguide/src/system/icons/svg/bullhorn.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>bullhorn</title>
+<path d="M28 3.031v9.156c1.156 0.418 2 1.521 2 2.813s-0.844 2.394-2 2.813v9.156l-1.594-1.156s-2.007-1.443-4.875-2.906-6.587-2.906-9.813-2.906h-3.375l1.625 5.719 0.344 1.281h-6.063l-0.219-0.719-2-7-0.031-0.156v-9.125h9.719c3.27 0 6.987-1.412 9.844-2.875s4.844-2.938 4.844-2.938zM26 6.75c-0.82 0.558-1.459 1.064-3.531 2.125-2.929 1.5-6.726 3.050-10.469 3.125v6c3.708 0.073 7.499 1.595 10.438 3.094 2.078 1.060 2.735 1.567 3.563 2.125v-16.469zM4 12v6h6v-6h-6zM4.344 20l1.406 5h1.906l-1.406-5h-1.906z"></path>
+</svg>
diff --git a/styleguide/src/system/icons/svg/gamepad.svg b/styleguide/src/system/icons/svg/gamepad.svg
new file mode 100755
index 000000000..85a2b7434
--- /dev/null
+++ b/styleguide/src/system/icons/svg/gamepad.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>gamepad</title>
+<path d="M16 7c6.383 0 11.969 2.063 11.969 2.063l0.594 0.219 0.063 0.594 1.344 10.25c0.365 2.835-1.665 5.479-4.5 5.844-2.639 0.34-5.005-1.44-5.625-3.969h-7.688c-0.619 2.529-2.985 4.309-5.625 3.969-2.835-0.365-4.865-3.009-4.5-5.844l1.344-10.25 0.063-0.594 0.594-0.219s5.586-2.063 11.969-2.063zM16 9c-5.486 0-10.007 1.524-10.75 1.781l-1.219 9.625c-0.227 1.763 0.987 3.335 2.75 3.563s3.368-0.987 3.594-2.75l0.031-0.344 0.125-0.875h10.938l0.125 0.875 0.031 0.344c0.227 1.763 1.832 2.977 3.594 2.75 1.763-0.227 2.977-1.8 2.75-3.563l-1.219-9.625c-0.743-0.258-5.264-1.781-10.75-1.781zM9 12h2v2h2v2h-2v2h-2v-2h-2v-2h2v-2zM22 12c0.552 0 1 0.448 1 1s-0.448 1-1 1-1-0.448-1-1 0.448-1 1-1zM20 14c0.552 0 1 0.448 1 1s-0.448 1-1 1-1-0.448-1-1 0.448-1 1-1zM24 14c0.552 0 1 0.448 1 1s-0.448 1-1 1-1-0.448-1-1 0.448-1 1-1zM22 16c0.552 0 1 0.448 1 1s-0.448 1-1 1-1-0.448-1-1 0.448-1 1-1z"></path>
+</svg>
diff --git a/styleguide/src/system/icons/svg/graduation-cap.svg b/styleguide/src/system/icons/svg/graduation-cap.svg
new file mode 100755
index 000000000..5d35226d3
--- /dev/null
+++ b/styleguide/src/system/icons/svg/graduation-cap.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>graduation-cap</title>
+<path d="M16 6.781l0.313 0.094 15.344 5.125-2.844 0.938-2.813 0.938v5.125c0 0.82-0.499 1.5-1.094 1.969s-1.332 0.798-2.219 1.094c-1.773 0.591-4.112 0.938-6.688 0.938s-4.914-0.346-6.688-0.938c-0.887-0.296-1.624-0.625-2.219-1.094s-1.094-1.149-1.094-1.969v-5.125l-2-0.656v8.063c0.597 0.346 1 0.979 1 1.719 0 1.105-0.895 2-2 2s-2-0.895-2-2c0-0.74 0.403-1.373 1-1.719v-8.75l-1.656-0.531 2.844-0.938 12.5-4.188zM16 8.875l-9.375 3.125 9.375 3.125 9.375-3.125zM8 14.563v4.438c0 0.009-0.004 0.126 0.313 0.375s0.883 0.565 1.625 0.813c1.484 0.495 3.667 0.813 6.063 0.813s4.579-0.318 6.063-0.813c0.742-0.247 1.309-0.563 1.625-0.813s0.313-0.366 0.313-0.375v-4.438l-7.688 2.563-0.313 0.094-0.313-0.094z"></path>
+</svg>
diff --git a/styleguide/src/system/icons/svg/leaf.svg b/styleguide/src/system/icons/svg/leaf.svg
new file mode 100755
index 000000000..52b1693ba
--- /dev/null
+++ b/styleguide/src/system/icons/svg/leaf.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>leaf</title>
+<path d="M25.031 4l0.313 1.094s1.656 5.616 1.656 13.438c0 3.995-0.921 6.637-2.344 8.281s-3.306 2.188-4.844 2.188c-1.728 0-3.206-0.784-4.375-1.594s-2.165-1.731-2.344-1.844l1.063-1.688c0.704 0.445 1.398 1.177 2.406 1.875s2.173 1.25 3.25 1.25c1.083 0 2.301-0.33 3.313-1.5s1.875-3.282 1.875-6.969c0-6.501-1.022-10.659-1.344-11.875-3.442 1.276-7.451 1.856-10.688 3-1.789 0.632-3.284 1.437-4.313 2.563s-1.656 2.577-1.656 4.781c0 1.938 1.058 3.143 2.219 3.969 0.603 0.429 1.187 0.698 1.625 0.875 1.72-2.744 4.356-6.157 8.438-10.531l1.438 1.375c-6.808 7.295-9.428 11.855-10.375 14.625-0.473 1.385-0.53 2.32-0.5 3s0.217 1.058 0.156 1.781l-2-0.188c-0.002 0.020-0.116-0.597-0.156-1.5s0.047-2.151 0.594-3.75c0.303-0.885 0.756-1.918 1.375-3.063-0.512-0.228-1.12-0.551-1.75-1-1.477-1.051-3.063-2.897-3.063-5.594 0-2.605 0.833-4.643 2.188-6.125s3.168-2.402 5.125-3.094c3.913-1.384 8.509-1.908 11.688-3.313z"></path>
+</svg>
diff --git a/styleguide/src/system/icons/svg/mouse-pointer.svg b/styleguide/src/system/icons/svg/mouse-pointer.svg
new file mode 100755
index 000000000..2917ef518
--- /dev/null
+++ b/styleguide/src/system/icons/svg/mouse-pointer.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>mouse-pointer</title>
+<path d="M9 2.594l1.719 1.688 16.125 16.156-7.094 0.875 1.844 3.625 0.438 0.906-0.875 0.438-4 2.063-0.438-0.906-2.031-4.031-4.031 3.375-1.656 1.375v-25.563zM11 7.438v16.406l4.313-3.625 0.594 1.125 2.156 4.313 1.313-0.688-2.063-4-0.656-1.281 1.406-0.188 4.5-0.531z"></path>
+</svg>
diff --git a/styleguide/src/system/icons/svg/paint-brush.svg b/styleguide/src/system/icons/svg/paint-brush.svg
new file mode 100755
index 000000000..03b06aac6
--- /dev/null
+++ b/styleguide/src/system/icons/svg/paint-brush.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>paint-brush</title>
+<path d="M24.813 4.031c0.837 0 1.648 0.335 2.281 0.969 1.267 1.267 1.267 3.327 0 4.594v0.031l-12.688 12.5-0.5 0.469c-0.124 0.793-0.46 1.572-1.063 2.188l-0.031 0.031c-1.318 1.318-3.898 3.188-7.813 3.188h-1.844l1-1.563c0.967-1.474 1.37-2.804 1.688-4s0.479-2.31 1.313-3.219c0.565-0.616 1.282-0.985 2.031-1.125l0.625-0.594 12.688-12.5c0.633-0.633 1.476-0.969 2.313-0.969zM24.813 6c-0.313 0-0.64 0.14-0.906 0.406l-9.063 8.906 1.813 1.813 9.031-8.938c0.533-0.533 0.533-1.248 0-1.781-0.267-0.267-0.562-0.406-0.875-0.406zM13.406 16.719l-1.5 1.469 1.813 1.813 1.5-1.469zM9.969 20.031c-0.506-0.014-0.997 0.153-1.344 0.531-0.267 0.291-0.511 1.152-0.844 2.406-0.216 0.814-0.55 1.794-1.031 2.844 2.249-0.421 3.787-1.537 4.656-2.406 0.827-0.827 0.808-2.069 0.031-2.781-0.417-0.383-0.963-0.579-1.469-0.594z"></path>
+</svg>
diff --git a/styleguide/src/system/icons/svg/paw.svg b/styleguide/src/system/icons/svg/paw.svg
new file mode 100755
index 000000000..364ff1918
--- /dev/null
+++ b/styleguide/src/system/icons/svg/paw.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>paw</title>
+<path d="M12.5 5c1.069 0 2.002 0.608 2.594 1.438s0.906 1.903 0.906 3.063-0.314 2.233-0.906 3.063-1.525 1.438-2.594 1.438-2.002-0.608-2.594-1.438-0.906-1.903-0.906-3.063 0.314-2.233 0.906-3.063 1.525-1.438 2.594-1.438zM16 9.5c0-1.159 0.314-2.233 0.906-3.063s1.525-1.438 2.594-1.438 2.002 0.608 2.594 1.438 0.906 1.903 0.906 3.063-0.314 2.233-0.906 3.063-1.525 1.438-2.594 1.438-2.002-0.608-2.594-1.438-0.906-1.903-0.906-3.063zM12.5 7c-0.312 0-0.656 0.156-0.969 0.594s-0.531 1.133-0.531 1.906 0.219 1.469 0.531 1.906 0.657 0.594 0.969 0.594 0.656-0.156 0.969-0.594 0.531-1.133 0.531-1.906-0.219-1.469-0.531-1.906-0.657-0.594-0.969-0.594zM19.5 7c-0.312 0-0.656 0.156-0.969 0.594s-0.531 1.133-0.531 1.906 0.219 1.469 0.531 1.906 0.657 0.594 0.969 0.594 0.656-0.156 0.969-0.594 0.531-1.133 0.531-1.906-0.219-1.469-0.531-1.906-0.657-0.594-0.969-0.594zM7.5 12c1.069 0 2.002 0.608 2.594 1.438s0.906 1.903 0.906 3.063-0.314 2.233-0.906 3.063-1.525 1.438-2.594 1.438-2.002-0.608-2.594-1.438-0.906-1.903-0.906-3.063 0.314-2.233 0.906-3.063 1.525-1.438 2.594-1.438zM24.5 12c1.069 0 2.002 0.608 2.594 1.438s0.906 1.903 0.906 3.063-0.314 2.233-0.906 3.063-1.525 1.438-2.594 1.438-2.002-0.608-2.594-1.438-0.906-1.903-0.906-3.063 0.314-2.233 0.906-3.063 1.525-1.438 2.594-1.438zM7.5 14c-0.312 0-0.656 0.156-0.969 0.594s-0.531 1.133-0.531 1.906 0.219 1.469 0.531 1.906 0.657 0.594 0.969 0.594 0.656-0.156 0.969-0.594 0.531-1.133 0.531-1.906-0.219-1.469-0.531-1.906-0.657-0.594-0.969-0.594zM24.5 14c-0.312 0-0.656 0.156-0.969 0.594s-0.531 1.133-0.531 1.906 0.219 1.469 0.531 1.906 0.657 0.594 0.969 0.594 0.656-0.156 0.969-0.594 0.531-1.133 0.531-1.906-0.219-1.469-0.531-1.906-0.657-0.594-0.969-0.594zM16 16c1.339 0 2.29 0.861 2.75 1.625s0.73 1.417 0.969 1.656c0.142 0.142 1.126 0.562 2.125 1.094 0.5 0.266 1.012 0.582 1.438 1.094s0.719 1.238 0.719 2.031c0 1.921-1.579 3.5-3.5 3.5-0.867 0-1.77-0.279-2.656-0.531s-1.844-0.469-1.844-0.469-0.957 0.216-1.844 0.469-1.79 0.531-2.656 0.531c-1.921 0-3.5-1.579-3.5-3.5 0-0.813 0.291-1.538 0.719-2.063s0.935-0.869 1.438-1.125c1.006-0.513 1.97-0.877 2.125-1.031 0.264-0.264 0.544-0.897 1-1.656s1.385-1.625 2.719-1.625zM16 18c-0.667 0-0.737 0.135-1.031 0.625s-0.514 1.358-1.25 2.094c-0.845 0.845-1.881 0.995-2.625 1.375-0.372 0.19-0.677 0.39-0.844 0.594s-0.25 0.41-0.25 0.813c0 0.841 0.659 1.5 1.5 1.5 0.29 0 1.224-0.221 2.094-0.469s1.59-0.531 2.406-0.531c0.817 0 1.536 0.284 2.406 0.531s1.803 0.469 2.094 0.469c0.841 0 1.5-0.659 1.5-1.5 0-0.353-0.077-0.542-0.25-0.75s-0.464-0.423-0.844-0.625c-0.759-0.404-1.801-0.583-2.625-1.406-0.727-0.727-0.952-1.568-1.25-2.063s-0.37-0.656-1.031-0.656z"></path>
+</svg>
diff --git a/styleguide/src/system/icons/svg/recycle.svg b/styleguide/src/system/icons/svg/recycle.svg
new file mode 100755
index 000000000..9bbdb3ad3
--- /dev/null
+++ b/styleguide/src/system/icons/svg/recycle.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>recycle</title>
+<path d="M16 3.969c1.055 0 2.118 0.517 2.75 1.5l3.125 5.063 1.438-0.844v5.313l-4.625-2.594 1.5-0.875-3.125-5c-0.53-0.824-1.553-0.806-2.094 0l-2.813 4.594-1.719-1.031 2.813-4.625c0.632-0.983 1.695-1.5 2.75-1.5zM10.406 12.094v5.313l-1.531-0.938-2.625 4.25v0.031l-0.031 0.031c-0.665 0.968 0.015 2.219 1.281 2.219h5.5v2h-5.5c-2.712 0-4.409-3.084-2.938-5.313 0.012-0.018-0.012-0.045 0-0.063l0.031 0.031 2.563-4.219-1.25-0.75zM25.063 15.656l2.5 4v0.031c1.36 2.312-0.332 5.313-2.969 5.313h-5.594v2l-4.906-3 4.906-3v2h5.594c1.163 0 1.89-1.193 1.25-2.281l-2.5-4z"></path>
+</svg>
diff --git a/styleguide/src/system/icons/svg/toggle-off.svg b/styleguide/src/system/icons/svg/toggle-off.svg
new file mode 100755
index 000000000..c69ce1b5f
--- /dev/null
+++ b/styleguide/src/system/icons/svg/toggle-off.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>toggle-off</title>
+<path d="M9 7h14c4.959 0 9 4.041 9 9s-4.041 9-9 9h-14c-0.94 0-1.835-0.137-2.688-0.406-0.282-0.088-0.543-0.198-0.813-0.313-2.413-1.023-4.298-3.072-5.094-5.594-0.003-0.009 0.003-0.022 0-0.031-0.264-0.845-0.406-1.727-0.406-2.656 0-0.94 0.137-1.835 0.406-2.688 0.088-0.282 0.198-0.543 0.313-0.813 1.023-2.413 3.072-4.298 5.594-5.094 0.282-0.088 0.582-0.159 0.875-0.219 0.585-0.12 1.193-0.188 1.813-0.188zM9 9c-3.635 0-6.612 2.743-6.969 6.281-0.024 0.236-0.031 0.476-0.031 0.719 0 3.878 3.123 7 7 7s7-3.122 7-7-3.122-7-7-7zM14.625 9c2.051 1.652 3.375 4.171 3.375 7s-1.324 5.348-3.375 7h8.375c3.878 0 7-3.122 7-7s-3.122-7-7-7h-8.375z"></path>
+</svg>
diff --git a/styleguide/src/system/icons/svg/toggle-on.svg b/styleguide/src/system/icons/svg/toggle-on.svg
new file mode 100755
index 000000000..280c7d249
--- /dev/null
+++ b/styleguide/src/system/icons/svg/toggle-on.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>toggle-on</title>
+<path d="M9 7h14c4.959 0 9 4.041 9 9s-4.041 9-9 9h-14c-4.962 0-9-4.037-9-9s4.038-9 9-9zM23 9c-3.878 0-7 3.122-7 7s3.122 7 7 7 7-3.122 7-7-3.122-7-7-7z"></path>
+</svg>
diff --git a/styleguide/src/system/icons/svg/tree.svg b/styleguide/src/system/icons/svg/tree.svg
new file mode 100755
index 000000000..e0534af45
--- /dev/null
+++ b/styleguide/src/system/icons/svg/tree.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>tree</title>
+<path d="M16 3.594l0.719 0.688 5.938 5.969 1 0.969-1.281 0.625s-1.015 0.366-2.438 0.688l4.406 4.406 1 0.969-1.25 0.625s-1.079 0.304-1.625 0.5l3.594 3.594 0.969 1-1.219 0.625s-2.462 1.176-6.813 1.594v3.156h-2v-3.031c-0.335 0.011-0.648 0.031-1 0.031s-0.666-0.021-1-0.031v3.031h-2v-3.156c-4.343-0.417-6.781-1.594-6.781-1.594l-1.25-0.625 0.969-1 3.594-3.594c-0.546-0.196-1.625-0.5-1.625-0.5l-1.25-0.625 1-0.969 4.406-4.406c-1.422-0.322-2.438-0.688-2.438-0.688l-1.281-0.625 1-0.969 5.938-5.969zM16 6.438l-4 3.969c0.593 0.199 0.714 0.356 2.188 0.5l1.813 0.188 1.813-0.188c1.474-0.144 1.594-0.301 2.188-0.5zM16 11.438l-1.188 1.156-4.594 4.594c0.465 0.163 0.453 0.219 1.406 0.406l1.844 0.375-1.344 1.313-3.625 3.656c1.287 0.457 3.459 1.063 7.5 1.063 4.077 0 6.258-0.607 7.531-1.063l-3.656-3.656-1.344-1.313 1.844-0.375c0.953-0.188 0.941-0.243 1.406-0.406l-4.594-4.594z"></path>
+</svg>
diff --git a/styleguide/src/system/icons/svg/university.svg b/styleguide/src/system/icons/svg/university.svg
new file mode 100755
index 000000000..cddb5775a
--- /dev/null
+++ b/styleguide/src/system/icons/svg/university.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>university</title>
+<path d="M16 3.906l12.375 5.156 0.625 0.281v2.656h-2v11h2v5h-26v-5h2v-11h-2v-2.656l0.625-0.281 12-5zM16 6.094l-9.375 3.906h18.75zM7 12v11h2v-11h-2zM11 12v11h2v-11h-2zM15 12v11h2v-11h-2zM19 12v11h2v-11h-2zM23 12v11h2v-11h-2zM5 25v1h22v-1h-22z"></path>
+</svg>

From 2ef13980a63e569a68202d4a8819c61ca8085852 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 7 Dec 2018 16:09:23 +0100
Subject: [PATCH 2/4] upgrade styleguide the second

---
 .../components/data-display/Avatar/style.scss |   2 +-
 .../components/data-display/Table/Table.vue   |  22 +-
 .../components/data-display/Table/style.scss  |  29 +-
 .../data-input/FormItem/FormItem.vue          |   9 +-
 .../data-input/FormItem/InputError.vue        |   0
 .../data-input/FormItem/InputLabel.vue        |   0
 .../components/data-input/FormItem/style.scss |   0
 .../components/data-input/Input/Input.vue     |   3 +-
 .../components/data-input/Input/demo.md       |   0
 .../components/data-input/Input/style.scss    |   0
 .../components/data-input/Select/Select.vue   | 248 ++++++++++++--
 .../Select/__snapshots__/spec.js.snap         |  69 ++++
 .../components/data-input/Select/demo.md      | 154 +++++++++
 .../components/data-input/Select/spec.js      | 309 ++++++++++++++++++
 .../components/data-input/Select/style.scss   | 148 ++++++++-
 .../components/data-input/shared/input.js     |  23 +-
 .../components/data-input/shared/input.scss   |  79 +++--
 .../data-input/shared/multiinput.js           |  49 +++
 .../system/components/layout/Card/Card.vue    |  23 +-
 .../src/system/components/layout/Card/demo.md |  17 +
 .../components/typography/Chip/Chip.vue       |  93 ++++++
 .../system/components/typography/Chip/demo.md |  62 ++++
 .../components/typography/Chip/style.scss     |  81 +++++
 .../src/system/styles/shared/_form.scss       |  12 +-
 .../src/system/styles/shared/_mixins.scss     |  32 +-
 styleguide/src/system/tokens/color.yml        |   4 +
 styleguide/src/system/tokens/font-size.yml    |   2 +-
 styleguide/src/system/tokens/z-index.yml      |   2 +
 28 files changed, 1376 insertions(+), 96 deletions(-)
 mode change 100644 => 100755 styleguide/src/system/components/data-input/FormItem/FormItem.vue
 mode change 100644 => 100755 styleguide/src/system/components/data-input/FormItem/InputError.vue
 mode change 100644 => 100755 styleguide/src/system/components/data-input/FormItem/InputLabel.vue
 mode change 100644 => 100755 styleguide/src/system/components/data-input/FormItem/style.scss
 mode change 100644 => 100755 styleguide/src/system/components/data-input/Input/Input.vue
 mode change 100644 => 100755 styleguide/src/system/components/data-input/Input/demo.md
 mode change 100644 => 100755 styleguide/src/system/components/data-input/Input/style.scss
 mode change 100644 => 100755 styleguide/src/system/components/data-input/Select/Select.vue
 create mode 100755 styleguide/src/system/components/data-input/Select/__snapshots__/spec.js.snap
 mode change 100644 => 100755 styleguide/src/system/components/data-input/Select/demo.md
 create mode 100755 styleguide/src/system/components/data-input/Select/spec.js
 mode change 100644 => 100755 styleguide/src/system/components/data-input/Select/style.scss
 mode change 100644 => 100755 styleguide/src/system/components/data-input/shared/input.js
 mode change 100644 => 100755 styleguide/src/system/components/data-input/shared/input.scss
 create mode 100755 styleguide/src/system/components/data-input/shared/multiinput.js
 create mode 100755 styleguide/src/system/components/typography/Chip/Chip.vue
 create mode 100755 styleguide/src/system/components/typography/Chip/demo.md
 create mode 100755 styleguide/src/system/components/typography/Chip/style.scss

diff --git a/styleguide/src/system/components/data-display/Avatar/style.scss b/styleguide/src/system/components/data-display/Avatar/style.scss
index a4019a5f2..d6932d85e 100644
--- a/styleguide/src/system/components/data-display/Avatar/style.scss
+++ b/styleguide/src/system/components/data-display/Avatar/style.scss
@@ -19,7 +19,7 @@
     height: 100%;
     top: 0px;
     left: 0px;
-    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+    box-shadow: inset 0 0 0 1px rgba($color-neutral-0, .1);
     border-radius: 50%;
   }
 
diff --git a/styleguide/src/system/components/data-display/Table/Table.vue b/styleguide/src/system/components/data-display/Table/Table.vue
index ddc204677..3d21532de 100644
--- a/styleguide/src/system/components/data-display/Table/Table.vue
+++ b/styleguide/src/system/components/data-display/Table/Table.vue
@@ -5,7 +5,11 @@
     <table
       cellpadding="0"
       cellspacing="0"
-      class="ds-table">
+      class="ds-table"
+      :class="[
+        condensed && 'ds-table-condensed',
+        bordered && 'ds-table-bordered'
+    ]">
       <colgroup>
         <col
           v-for="header in headers"
@@ -24,7 +28,7 @@
       <tbody>
         <tr
           v-for="(row, index) in rows"
-          :key="index">
+          :key="row.key || index">
           <ds-table-col
             v-for="col in row"
             :key="col.key">
@@ -75,6 +79,20 @@ export default {
       default() {
         return null
       }
+    },
+    /**
+     * Should the table be more condense?
+     */
+    condensed: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Should the table have borders?
+     */
+    bordered: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {
diff --git a/styleguide/src/system/components/data-display/Table/style.scss b/styleguide/src/system/components/data-display/Table/style.scss
index bdebc8d23..7d59a6e9d 100644
--- a/styleguide/src/system/components/data-display/Table/style.scss
+++ b/styleguide/src/system/components/data-display/Table/style.scss
@@ -11,19 +11,34 @@
 
 .ds-table-col {
   @include reset;
-  border-bottom: $border-color-softer solid $border-size-base;
   vertical-align: top;
   padding: $space-small $space-xx-small;
-
-  &:last-child {
-    padding-right: 0;
-  }
 }
 
 .ds-table-head-col {
   @include reset;
-  border-bottom: $border-color-softer solid $border-size-base;
   padding: $space-small $space-xx-small;
   text-align: left;
   font-weight: $font-weight-bold;
-}
\ No newline at end of file
+}
+
+// bordered
+.ds-table-bordered {
+  .ds-table-col,
+  .ds-table-head-col {
+    border-bottom: $border-color-softer dotted $border-size-base;
+  }
+
+  tr:last-child .ds-table-col {
+    border-bottom: none;
+  }
+}
+
+// condensed
+.ds-table-condensed {
+  .ds-table-col,
+  .ds-table-head-col {
+    padding-top: $space-x-small;
+    padding-bottom: $space-x-small;
+  }
+}
diff --git a/styleguide/src/system/components/data-input/FormItem/FormItem.vue b/styleguide/src/system/components/data-input/FormItem/FormItem.vue
old mode 100644
new mode 100755
index 235a3dc46..44ffc1813
--- a/styleguide/src/system/components/data-input/FormItem/FormItem.vue
+++ b/styleguide/src/system/components/data-input/FormItem/FormItem.vue
@@ -1,10 +1,9 @@
 <template>
-  <div
+  <div 
     class="ds-form-item"
-    :class="$parentInput ? $parentInput.stateClasses : ''">
-    <ds-input-label
-      v-if="$parentInput"
-      :label="$parentInput.label"
+    :class="$parentInput.stateClasses">
+    <ds-input-label 
+      :label="$parentInput.label" 
       :for="$parentInput.id" />
     <slot/>
     <ds-input-error :error="$parentInput ? $parentInput.error : null" />
diff --git a/styleguide/src/system/components/data-input/FormItem/InputError.vue b/styleguide/src/system/components/data-input/FormItem/InputError.vue
old mode 100644
new mode 100755
diff --git a/styleguide/src/system/components/data-input/FormItem/InputLabel.vue b/styleguide/src/system/components/data-input/FormItem/InputLabel.vue
old mode 100644
new mode 100755
diff --git a/styleguide/src/system/components/data-input/FormItem/style.scss b/styleguide/src/system/components/data-input/FormItem/style.scss
old mode 100644
new mode 100755
diff --git a/styleguide/src/system/components/data-input/Input/Input.vue b/styleguide/src/system/components/data-input/Input/Input.vue
old mode 100644
new mode 100755
index 4925547df..0b99ce98e
--- a/styleguide/src/system/components/data-input/Input/Input.vue
+++ b/styleguide/src/system/components/data-input/Input/Input.vue
@@ -17,11 +17,12 @@
         :type="type"
         :autofocus="autofocus"
         :placeholder="placeholder"
+        :tabindex="tabindex"
         :disabled="disabled"
         :readonly="readonly"
         :is="tag"
         :value.prop="innerValue"
-        @input="input"
+        @input="handleInput"
         @focus="handleFocus"
         @blur="handleBlur"
         :rows="type === 'textarea' ? rows : null"
diff --git a/styleguide/src/system/components/data-input/Input/demo.md b/styleguide/src/system/components/data-input/Input/demo.md
old mode 100644
new mode 100755
diff --git a/styleguide/src/system/components/data-input/Input/style.scss b/styleguide/src/system/components/data-input/Input/style.scss
old mode 100644
new mode 100755
diff --git a/styleguide/src/system/components/data-input/Select/Select.vue b/styleguide/src/system/components/data-input/Select/Select.vue
old mode 100644
new mode 100755
index 48b86015d..e615dd6ea
--- a/styleguide/src/system/components/data-input/Select/Select.vue
+++ b/styleguide/src/system/components/data-input/Select/Select.vue
@@ -1,33 +1,119 @@
 <template>
   <ds-form-item>
-    <div class="ds-select-wrap">
+    <div
+      class="ds-select-wrap"
+      v-click-outside="handleBlur"
+      :tabindex="searchable ? -1 : tabindex"
+      @keydown.self.down.prevent="pointerNext"
+      @keydown.self.up.prevent="pointerPrev"
+      @keypress.enter.prevent.stop.self="selectPointerOption"
+      @keyup.esc="close">
       <div
         v-if="icon"
         class="ds-select-icon">
         <ds-icon :name="icon"/>
       </div>
-      <select
+      <div
         class="ds-select"
+        @click="handleClick"
         :class="[
           icon && `ds-select-has-icon`,
-          iconRight && `ds-select-has-icon-right`
-        ]"
-        :id="id"
-        :name="model"
-        :autofocus="autofocus"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :readonly="readonly"
-        :value.prop="innerValue"
-        @input="input"
-        @focus="handleFocus"
-        @blur="handleBlur">
-        <option
-          v-for="option in options"
-          :key="option.label || option">
-          {{ option.label || option }}
-        </option>
-      </select>
+          iconRight && `ds-select-has-icon-right`,
+          multiple && `ds-select-multiple`
+      ]">
+        <div
+          v-if="multiple"
+          class="ds-selected-options">
+          <div
+            class="ds-selected-option"
+            v-for="(value, index) in innerValue"
+            :key="value">
+            <!-- @slot Slot to provide a custom selected option display -->
+            <slot
+              name="optionitem"
+              :value="value">
+              <ds-chip
+                removable
+                @remove="deselectOption(index)"
+                color="primary">
+                {{ value }}
+              </ds-chip>
+            </slot>
+          </div>
+          <input
+            ref="search"
+            class="ds-select-search"
+            :id="id"
+            :name="model"
+            :autofocus="autofocus"
+            :placeholder="placeholder"
+            :tabindex="tabindex"
+            :disabled="disabled"
+            :readonly="readonly"
+            v-model="searchString"
+            @focus="handleFocus"
+            @keydown.delete.stop="deselectLastOption"
+            @keydown.down.prevent="pointerNext"
+            @keydown.up.prevent="pointerPrev"
+            @keypress.enter.prevent.stop="selectPointerOption"
+            @keyup.esc="close">
+        </div>
+        <div
+          v-else
+          class="ds-select-value">
+          <div
+            v-if="placeholder && !innerValue"
+            class="ds-select-placeholder">
+            {{ placeholder }}
+          </div>
+          <!-- @slot Slot to provide a custom value display -->
+          <slot
+            v-else
+            name="value"
+            :value="innerValue">
+            {{ innerValue }}
+          </slot>
+        </div>
+        <input
+          v-if="!multiple"
+          ref="search"
+          class="ds-select-search"
+          :id="id"
+          :name="model"
+          :autofocus="autofocus"
+          :placeholder="placeholder"
+          :tabindex="tabindex"
+          :disabled="disabled"
+          :readonly="readonly"
+          v-model="searchString"
+          @focus="handleFocus"
+          @keydown.delete.stop="deselectLastOption"
+          @keydown.down.prevent="pointerNext"
+          @keydown.up.prevent="pointerPrev"
+          @keypress.enter.prevent.stop="selectPointerOption"
+          @keyup.esc="close">
+      </div>
+      <div class="ds-select-dropdown">
+        <ul class="ds-select-options">
+          <li
+            class="ds-select-option"
+            :class="[
+              isSelected(option) && `ds-select-option-is-selected`,
+              pointer === index && `ds-select-option-hover`
+            ]"
+            v-for="(option, index) in filteredOptions"
+            @click="handleSelect(option)"
+            @mouseover="setPointer(index)"
+            :key="option.label || option">
+            <!-- @slot Slot to provide custom option items -->
+            <slot
+              name="option"
+              :option="option">
+              {{ option.label || option }}
+            </slot>
+          </li>
+        </ul>
+      </div>
       <div
         v-if="iconRight"
         class="ds-select-icon-right">
@@ -39,6 +125,11 @@
 
 <script>
 import inputMixin from '../shared/input'
+import multiinputMixin from '../shared/multiinput'
+import ClickOutside from 'vue-click-outside'
+import DsFormItem from '@@/components/data-input/FormItem/FormItem'
+import DsChip from '@@/components/typography/Chip/Chip'
+import DsIcon from '@@/components/typography/Icon/Icon'
 
 /**
  * Used for handling basic user input.
@@ -46,7 +137,21 @@ import inputMixin from '../shared/input'
  */
 export default {
   name: 'DsSelect',
-  mixins: [inputMixin],
+  mixins: [inputMixin, multiinputMixin],
+  components: {
+    DsFormItem,
+    DsChip,
+    DsIcon
+  },
+  directives: {
+    ClickOutside
+  },
+  data() {
+    return {
+      searchString: '',
+      pointer: 0
+    }
+  },
   props: {
     /**
      * The placeholder shown when value is empty.
@@ -69,13 +174,6 @@ export default {
       type: Boolean,
       default: false
     },
-    /**
-     * Whether the user can select multiple items
-     */
-    multiple: {
-      type: Boolean,
-      default: false
-    },
     /**
      * The name of the input's icon.
      */
@@ -88,7 +186,7 @@ export default {
      */
     iconRight: {
       type: String,
-      default: null
+      default: 'angle-down'
     },
     /**
      * The select options.
@@ -98,6 +196,98 @@ export default {
       default() {
         return []
       }
+    },
+    /**
+     * Whether the options are searchable
+     */
+    searchable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    filteredOptions() {
+      if (!this.searchString) {
+        return this.options
+      }
+      const searchParts = this.searchString.split(' ')
+
+      return this.options.filter(option => {
+        const value = option.value || option
+        return searchParts.every(part => {
+          if (!part) {
+            return true
+          }
+          return value.toLowerCase().includes(part.toLowerCase())
+        })
+      })
+    },
+    pointerMax() {
+      return this.filteredOptions.length - 1
+    }
+  },
+  watch: {
+    pointerMax(max) {
+      if (max < this.pointer) {
+        this.$nextTick(() => {
+          this.pointer = max
+        })
+      }
+    }
+  },
+  methods: {
+    handleSelect(options) {
+      this.selectOption(options)
+      this.resetSearch()
+      if (this.multiple) {
+        this.$refs.search.focus()
+        this.handleFocus()
+      } else {
+        this.close()
+      }
+    },
+    resetSearch() {
+      this.searchString = ''
+    },
+    handleClick() {
+      if (!this.focus || this.multiple) {
+        this.$refs.search.focus()
+        this.handleFocus()
+      }
+    },
+    close() {
+      this.$refs.search.blur()
+      this.handleBlur()
+    },
+    deselectLastOption() {
+      if (
+        this.multiple &&
+        this.innerValue &&
+        this.innerValue.length &&
+        !this.searchString.length
+      ) {
+        this.deselectOption(this.innerValue.length - 1)
+      }
+    },
+    setPointer(index) {
+      this.pointer = index
+    },
+    pointerPrev() {
+      if (this.pointer === 0) {
+        this.pointer = this.pointerMax
+      } else {
+        this.pointer--
+      }
+    },
+    pointerNext() {
+      if (this.pointer === this.pointerMax) {
+        this.pointer = 0
+      } else {
+        this.pointer++
+      }
+    },
+    selectPointerOption() {
+      this.handleSelect(this.filteredOptions[this.pointer])
     }
   }
 }
diff --git a/styleguide/src/system/components/data-input/Select/__snapshots__/spec.js.snap b/styleguide/src/system/components/data-input/Select/__snapshots__/spec.js.snap
new file mode 100755
index 000000000..27c32691c
--- /dev/null
+++ b/styleguide/src/system/components/data-input/Select/__snapshots__/spec.js.snap
@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Select.vue matches snapshot 1`] = `
+<dsformitem-stub>
+  <div
+    class="ds-select-wrap"
+    tabindex="-1"
+  >
+    <!---->
+     
+    <div
+      class="ds-select ds-select-has-icon-right"
+    >
+      <div
+        class="ds-select-value"
+      >
+        
+          1
+        
+      </div>
+       
+      <input
+        class="ds-select-search"
+        tabindex="0"
+      />
+    </div>
+     
+    <div
+      class="ds-select-dropdown"
+    >
+      <ul
+        class="ds-select-options"
+      >
+        <li
+          class="ds-select-option ds-select-option-is-selected ds-select-option-hover"
+        >
+          
+            1
+          
+        </li>
+        <li
+          class="ds-select-option"
+        >
+          
+            2
+          
+        </li>
+        <li
+          class="ds-select-option"
+        >
+          
+            3
+          
+        </li>
+      </ul>
+    </div>
+     
+    <div
+      class="ds-select-icon-right"
+    >
+      <dsicon-stub
+        arialabel="icon"
+        name="angle-down"
+        tag="span"
+      />
+    </div>
+  </div>
+</dsformitem-stub>
+`;
diff --git a/styleguide/src/system/components/data-input/Select/demo.md b/styleguide/src/system/components/data-input/Select/demo.md
old mode 100644
new mode 100755
index 299dc662d..c80c9c391
--- a/styleguide/src/system/components/data-input/Select/demo.md
+++ b/styleguide/src/system/components/data-input/Select/demo.md
@@ -2,4 +2,158 @@
 
 ```
 <ds-select :options="['blue', 'red', 'green']" />
+```
+
+## Usage with label
+
+```
+<ds-select
+  label="Color"
+  :options="['blue', 'red', 'green']" />
+```
+
+## Bind to a value
+
+Use v-model to bind a value to the select input.
+
+```
+<template>
+  <div>
+    <ds-select
+      v-model="color"
+      :options="['blue', 'red', 'green']"
+      placeholder="Color ..."></ds-select>
+    <ds-text>Your color: {{ color }}</ds-text>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        color: 'blue'
+      }
+    }
+  }
+</script>
+```
+
+## Multiselect
+
+Use the multiple prop to allow the user selecting multiple values.
+
+```
+<template>
+  <div>
+    <ds-select
+      v-model="color"
+      :options="['blue', 'red', 'green']"
+      placeholder="Color ..."
+      multiple></ds-select>
+    <ds-text>Your colors: {{ color }}</ds-text>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        color: ['blue', 'red']
+      }
+    }
+  }
+</script>
+```
+
+## Options as objects
+
+Options can be objects with a label and a value property.
+
+```
+<template>
+  <div>
+    <ds-select
+      v-model="color"
+      :options="colorOptions"
+      placeholder="Color ..."></ds-select>
+    <ds-text>Your color: {{ color }}</ds-text>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        color: '',
+        colorOptions: [
+          {
+            label: 'blue',
+            value: '#0e17d8'
+          },
+          {
+            label: 'red',
+            value: '#d80e3f'
+          },
+          {
+            label: 'green',
+            value: '#0ed853'
+          }
+        ]
+      }
+    }
+  }
+</script>
+```
+
+## Validation
+
+We use <a href="https://github.com/yiminghe/async-validator" targe="_blank">async-validator schemas</a> for validation.
+
+If you need to validate more than one field it is better to use the form component.
+
+```
+<template>
+  <div>
+    <ds-select
+      v-model="color"
+      :options="['blue', 'red', 'green']"
+      :schema="{type: 'enum', enum: ['green'], message: 'Please choose green :)' }"
+      placeholder="Color ..." />
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        color: ''
+      }
+    }
+  }
+</script>
+```
+
+## Select sizes
+
+```
+<ds-select placeholder="Small ..." size="small"></ds-select>
+<ds-select placeholder="Base ..."></ds-select>
+<ds-select placeholder="Large ..." size="large"></ds-select>
+```
+
+## Select icons
+
+Add an icon to help the user identify the select fields usage.
+
+```
+<ds-select
+  placeholder="User ..."
+  icon="user"></ds-select>
+<ds-select
+  placeholder="Day ..."
+  icon="clock"></ds-select>
+<ds-select
+  placeholder="User ..."
+  size="small"
+  icon="user"></ds-select>
+<ds-select
+  placeholder="User ..."
+  size="large"
+  icon="user"></ds-select>
 ```
\ No newline at end of file
diff --git a/styleguide/src/system/components/data-input/Select/spec.js b/styleguide/src/system/components/data-input/Select/spec.js
new file mode 100755
index 000000000..88f7da935
--- /dev/null
+++ b/styleguide/src/system/components/data-input/Select/spec.js
@@ -0,0 +1,309 @@
+import { shallowMount } from '@vue/test-utils'
+import Comp from './Select.vue'
+
+describe('Select.vue', () => {
+  describe('Events emitting', () => {
+    describe('@input', () => {
+      test('should be called when the value is changed passing the new value', () => {
+        const wrapper = shallowMount(Comp, {
+          propsData: {
+            value: '3',
+            options: ['1', '2', '3']
+          }
+        })
+        wrapper.vm.selectOption(wrapper.vm.options[0])
+        expect(wrapper.emitted().input[0]).toEqual(['1'])
+      })
+      test('should be called when an option is clicked passing the options value', () => {
+        const wrapper = shallowMount(Comp, {
+          propsData: {
+            value: '3',
+            options: ['1', '2', '3']
+          }
+        })
+        wrapper.find('.ds-select-option').trigger('click')
+        expect(wrapper.emitted().input[0]).toEqual(['1'])
+      })
+    })
+  })
+
+  describe('innerValue', () => {
+    test('should contain a single selected value by default', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          value: '1',
+          options: ['1', '2', '3']
+        }
+      })
+      expect(wrapper.vm.innerValue).toEqual('1')
+    })
+    test('should contain an array of values when multiple: true', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          value: ['1'],
+          options: ['1', '2', '3'],
+          multiple: true
+        }
+      })
+      expect(wrapper.vm.innerValue).toEqual(['1'])
+    })
+  })
+
+  describe('options', () => {
+    test('should highlight the selected value', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          value: '1',
+          options: ['1', '2', '3']
+        }
+      })
+      const option = wrapper.find('.ds-select-option')
+      expect(option.classes()).toContain('ds-select-option-is-selected')
+    })
+    test('should highlight all selected values when multiple: true', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          value: ['1', '2'],
+          options: ['1', '2', '3'],
+          multiple: true
+        }
+      })
+      const option = wrapper.findAll('.ds-select-option')
+      expect(option.at(0).classes()).toContain('ds-select-option-is-selected')
+      expect(option.at(1).classes()).toContain('ds-select-option-is-selected')
+    })
+  })
+
+  describe('selectOption', () => {
+    test('should set innerValue to selected value', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          value: '3',
+          options: ['1', '2', '3']
+        }
+      })
+      wrapper.vm.selectOption(wrapper.vm.options[0])
+      expect(wrapper.vm.innerValue).toEqual('1')
+    })
+    test('should add selected value to innerValue when multiple: true', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          value: ['3'],
+          options: ['1', '2', '3'],
+          multiple: true
+        }
+      })
+      wrapper.vm.selectOption(wrapper.vm.options[0])
+      expect(wrapper.vm.innerValue).toEqual(['3', '1'])
+    })
+    test('should toggle selected value in innerValue when multiple: true', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          value: ['3', '1'],
+          options: ['1', '2', '3'],
+          multiple: true
+        }
+      })
+      wrapper.vm.selectOption(wrapper.vm.options[0])
+      expect(wrapper.vm.innerValue).toEqual(['3'])
+    })
+  })
+
+  describe('search', () => {
+    test('should filter options by search string', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          options: ['cat', 'duck', 'dog']
+        }
+      })
+      wrapper.vm.searchString = 'do'
+      expect(wrapper.vm.filteredOptions).toEqual(['dog'])
+    })
+
+    test('should be case insensitive', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          options: ['cat', 'duck', 'dog']
+        }
+      })
+      wrapper.vm.searchString = 'DO'
+      expect(wrapper.vm.filteredOptions).toEqual(['dog'])
+    })
+
+    test('should ignore spaces', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          options: ['cat', 'duck', 'dog']
+        }
+      })
+      wrapper.vm.searchString = 'd o'
+      expect(wrapper.vm.filteredOptions).toEqual(['dog'])
+    })
+
+    test('should display filtered options', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          options: ['cat', 'duck', 'dog']
+        }
+      })
+      wrapper.vm.searchString = 'do'
+      const filteredOptions = wrapper.findAll('.ds-select-option')
+      expect(filteredOptions.length).toEqual(1)
+    })
+
+    test('should work when using search input', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          options: ['cat', 'duck', 'dog']
+        }
+      })
+      const searchInput = wrapper.find('.ds-select-search')
+      searchInput.setValue('do')
+      expect(wrapper.vm.filteredOptions).toEqual(['dog'])
+    })
+  })
+
+  describe('pointer', () => {
+    test('should be set by mouse over option', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          options: ['1', '2', '3']
+        }
+      })
+      const options = wrapper.findAll('.ds-select-option')
+      options.at(2).trigger('mouseover')
+      expect(wrapper.vm.pointer).toEqual(2)
+    })
+
+    test('should be set by pointerNext', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          options: ['1', '2', '3']
+        }
+      })
+      wrapper.vm.pointerNext()
+      expect(wrapper.vm.pointer).toEqual(1)
+    })
+
+    test('should be set to 0 by pointerNext when on last entry', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          options: ['1', '2', '3']
+        }
+      })
+      wrapper.vm.pointer = 2
+      wrapper.vm.pointerNext()
+      expect(wrapper.vm.pointer).toEqual(0)
+    })
+
+    test('should be set by pointerPrev', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          options: ['1', '2', '3']
+        }
+      })
+      wrapper.vm.pointer = 1
+      wrapper.vm.pointerPrev()
+      expect(wrapper.vm.pointer).toEqual(0)
+    })
+
+    test('should be set to last entry by pointerPrev when 0', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          options: ['1', '2', '3']
+        }
+      })
+      wrapper.vm.pointerPrev()
+      expect(wrapper.vm.pointer).toEqual(2)
+    })
+
+    test('should be set by key down on wrap', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          options: ['1', '2', '3']
+        }
+      })
+      const wrap = wrapper.find('.ds-select-wrap')
+      wrap.trigger('keydown.down')
+      expect(wrapper.vm.pointer).toEqual(1)
+    })
+
+    test('should be set by key up on wrap', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          options: ['1', '2', '3']
+        }
+      })
+      const wrap = wrapper.find('.ds-select-wrap')
+      wrap.trigger('keydown.up')
+      expect(wrapper.vm.pointer).toEqual(2)
+    })
+
+    test('should be set by key down on search input', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          options: ['1', '2', '3']
+        }
+      })
+      const searchInput = wrapper.find('.ds-select-search')
+      searchInput.trigger('keydown.down')
+      expect(wrapper.vm.pointer).toEqual(1)
+    })
+
+    test('should be set by key up on search input', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          options: ['1', '2', '3']
+        }
+      })
+      const searchInput = wrapper.find('.ds-select-search')
+      searchInput.trigger('keydown.up')
+      expect(wrapper.vm.pointer).toEqual(2)
+    })
+
+    test('should select option by pointer value', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          options: ['1', '2', '3']
+        }
+      })
+      wrapper.vm.pointer = 1
+      wrapper.vm.selectPointerOption()
+      expect(wrapper.vm.innerValue).toEqual('2')
+    })
+
+    test('should select option by enter key on wrap', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          options: ['1', '2', '3']
+        }
+      })
+      wrapper.vm.pointer = 1
+      const wrap = wrapper.find('.ds-select-wrap')
+      wrap.trigger('keypress.enter')
+      expect(wrapper.vm.innerValue).toEqual('2')
+    })
+
+    test('should select option by enter key on search input', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          options: ['1', '2', '3']
+        }
+      })
+      wrapper.vm.pointer = 1
+      const searchInput = wrapper.find('.ds-select-search')
+      searchInput.trigger('keypress.enter')
+      expect(wrapper.vm.innerValue).toEqual('2')
+    })
+  })
+
+  it('matches snapshot', () => {
+    const wrapper = shallowMount(Comp, {
+      propsData: {
+        value: '1',
+        options: ['1', '2', '3']
+      }
+    })
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})
\ No newline at end of file
diff --git a/styleguide/src/system/components/data-input/Select/style.scss b/styleguide/src/system/components/data-input/Select/style.scss
old mode 100644
new mode 100755
index 5b7a84690..524df126a
--- a/styleguide/src/system/components/data-input/Select/style.scss
+++ b/styleguide/src/system/components/data-input/Select/style.scss
@@ -1,3 +1,149 @@
 @import '../shared/input.scss';
 
-@include input(ds-select);
\ No newline at end of file
+@include input(ds-select);
+
+.ds-select {
+  user-select: none;
+  .ds-input-has-focus & {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+.ds-select-search, .ds-select-value {
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: $input-border-size solid transparent;
+  padding: $input-padding-vertical $space-x-small;
+  line-height: $line-height-base;
+
+  .ds-input-size-small & {
+    padding: $input-padding-vertical-small $space-x-small;
+  }
+
+  .ds-input-size-large & {
+    padding: $input-padding-vertical-large $space-x-small;
+  }
+
+  .ds-select-has-icon & {
+    padding-left: $input-height;
+
+    .ds-input-size-small & {
+      padding-left: $input-height-small;
+    }
+
+    .ds-input-size-large & {
+      padding-left: $input-height-large;
+    }
+  }
+
+  .ds-select-has-icon-right & {
+    padding-right: $input-height;
+
+    .ds-input-size-small & {
+      padding-right: $input-height-small;
+    }
+
+    .ds-input-size-large & {
+      padding-right: $input-height-large;
+    }
+  }
+}
+
+.ds-select-search {
+  appearance: none;
+  font-size: inherit;
+  font-family: $font-family-text;
+  width: 100%;
+  background: transparent;
+  color: $text-color-base;
+  outline: none;
+  user-select: text;
+
+  opacity: 0;
+
+  &::placeholder {
+    color: $text-color-disabled;
+  }
+
+  .ds-input-has-focus & {
+    opacity: 1;
+  }
+
+  .ds-select-multiple & {
+    position: relative;
+    display: inline-flex;
+    width: auto;
+    height: auto;
+    padding: 0;
+    opacity: 1;
+  }
+}
+
+.ds-select-placeholder, .ds-select-value {
+  pointer-events: none;
+
+  .ds-input-has-focus & {
+    opacity: 0;
+  }
+}
+
+.ds-select-placeholder {
+  color: $text-color-disabled;
+}
+
+.ds-selected-options {
+  display: flex;
+}
+
+.ds-selected-option {
+  display: inline-flex;
+  margin-right: $space-xx-small;
+}
+
+.ds-select-dropdown {
+  position: absolute;
+  z-index: $z-index-dropdown;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  background-color: $background-color-base;
+  border: $input-border-size solid $border-color-active;
+  border-top: 0;
+  border-bottom-left-radius: $border-radius-base;
+  border-bottom-right-radius: $border-radius-base;
+  visibility: hidden;
+  opacity: 0;
+  transition: all $duration-short $ease-out;
+  max-height: 240px;
+  overflow: auto;
+
+  .ds-input-has-focus & {
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
+.ds-select-options {
+  @include reset-list;
+}
+
+.ds-select-option {
+  padding: $input-padding-vertical $space-x-small;
+  cursor: pointer;
+  transition: all $duration-short $ease-out;
+
+  &.ds-select-option-hover {
+    background-color: $background-color-primary;
+    color: $text-color-primary-inverse;
+  }
+}
+
+.ds-select-option-is-selected {
+  background-color: $background-color-soft;
+  color: $text-color-primary;
+}
diff --git a/styleguide/src/system/components/data-input/shared/input.js b/styleguide/src/system/components/data-input/shared/input.js
old mode 100644
new mode 100755
index 2780a3dff..e93f96ec5
--- a/styleguide/src/system/components/data-input/shared/input.js
+++ b/styleguide/src/system/components/data-input/shared/input.js
@@ -20,7 +20,7 @@ export default {
      * The value of the input. Can be passed via v-model.
      */
     value: {
-      type: [String, Object, Number],
+      type: [String, Object, Number, Array],
       default: null
     },
     /**
@@ -56,7 +56,7 @@ export default {
      */
     schema: {
       type: Object,
-      default: () => ({})
+      default: () => null
     },
     /**
      * The input's size.
@@ -68,6 +68,10 @@ export default {
       validator: value => {
         return value.match(/(small|base|large)/)
       }
+    },
+    tabindex: {
+      type: Number,
+      default: 0
     }
   },
   data() {
@@ -107,9 +111,13 @@ export default {
     }
   },
   methods: {
-    input(event) {
+    handleInput(event) {
+      this.input(event.target.value)
+    },
+    input(value) {
+      this.innerValue = value
       if (this.$parentForm) {
-        this.$parentForm.update(this.model, event.target.value)
+        this.$parentForm.update(this.model, value)
       } else {
         /**
          * Fires after user input.
@@ -117,8 +125,8 @@ export default {
          *
          * @event input
          */
-        this.$emit('input', event.target.value)
-        this.validate(event.target.value)
+        this.$emit('input', value)
+        this.validate(value)
       }
     },
     handleFormUpdate(data, errors) {
@@ -126,6 +134,9 @@ export default {
       this.error = errors ? errors[this.model] : null
     },
     validate(value) {
+      if (!this.schema) {
+        return
+      }
       const validator = new Schema({ input: this.schema })
       // Prevent validator from printing to console
       // eslint-disable-next-line
diff --git a/styleguide/src/system/components/data-input/shared/input.scss b/styleguide/src/system/components/data-input/shared/input.scss
old mode 100644
new mode 100755
index 5991feb99..b0f30f5db
--- a/styleguide/src/system/components/data-input/shared/input.scss
+++ b/styleguide/src/system/components/data-input/shared/input.scss
@@ -2,63 +2,67 @@
   .#{$class}-wrap {
     position: relative;
   }
-
+  
   .#{$class} {
+    appearance: none;
     box-sizing: border-box;
-    font-size: $font-size-base;
+    font-size: $input-font-size-base;
     line-height: $line-height-base;
     font-family: $font-family-text;
     width: 100%;
     padding: $input-padding-vertical $space-x-small;
     height: $input-height;
-
+  
     color: $text-color-base;
     background: $background-color-base;
-
-    border: $input-border-size solid $border-color-soft;
+  
+    border: $input-border-size solid $border-color-base;
     border-radius: $border-radius-base;
     outline: none;
     transition: all $duration-short $ease-out;
-
+  
     &::placeholder {
       color: $text-color-disabled;
     }
-
+  
+    .ds-input-has-focus &,
     &:focus {
       border-color: $border-color-active;
       background: $background-color-base;
     }
-
-    .#{$class}-is-disabled &,
+  
+    .ds-input-is-disabled &,
     &:disabled {
       color: $text-color-disabled;
       opacity: $opacity-disabled;
       cursor: not-allowed;
     }
-
-    .#{$class}-has-error & {
+  
+    .ds-input-has-error & {
       border-color: $border-color-danger;
     }
   }
-
-  .#{$class}-size-small {
+  
+  .ds-input-size-small {
     font-size: $font-size-small;
-
+  
     .#{$class} {
+      font-size: $input-font-size-small;
       height: $input-height-small;
       padding: $input-padding-vertical-small $space-x-small;
     }
   }
-
-  .#{$class}-size-large {
+  
+  .ds-input-size-large {
     font-size: $font-size-large;
-
+  
     .#{$class} {
+      font-size: $input-font-size-large;
       height: $input-height-large;
       padding: $input-padding-vertical-large $space-x-small;
     }
   }
-
+  
   .#{$class}-icon,
   .#{$class}-icon-right {
     position: absolute;
@@ -71,32 +75,47 @@
     width: $input-height;
     color: $text-color-softer;
     transition: color $duration-short $ease-out;
-
-    .#{$class}-has-focus & {
+    pointer-events: none;
+  
+    .ds-input-has-focus & {
       color: $text-color-base;
     }
-  }
 
+    .ds-input-size-small & {
+      width: $input-height-small;
+    }
+
+    .ds-input-size-large & {
+      width: $input-height-large;
+    }
+  }
+  
   .#{$class}-icon-right {
     right: 0;
     left: auto;
   }
-
+  
   .#{$class}-has-icon {
     padding-left: $input-height;
+  
+    .ds-input-size-small & {
+      padding-left: $input-height-small;
+    }
 
-    .#{$class}-size-small &,
-    .#{$class}-size-large & {
-      padding-left: $input-height;
+    .ds-input-size-large & {
+      padding-left: $input-height-large;
     }
   }
-
+  
   .#{$class}-has-icon-right {
     padding-right: $input-height;
 
-    .#{$class}-size-small &,
-    .#{$class}-size-large & {
-      padding-right: $input-height;
+    .ds-input-size-small & {
+      padding-right: $input-height-small;
     }
-  }
+
+    .ds-input-size-large & {
+      padding-right: $input-height-large;
+    }
+  }         
 }
diff --git a/styleguide/src/system/components/data-input/shared/multiinput.js b/styleguide/src/system/components/data-input/shared/multiinput.js
new file mode 100755
index 000000000..8666b9812
--- /dev/null
+++ b/styleguide/src/system/components/data-input/shared/multiinput.js
@@ -0,0 +1,49 @@
+/**
+ * @mixin
+ */
+export default {
+  props: {
+    /**
+     * Whether the user can select multiple items
+     */
+    multiple: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    selectOption(option) {
+      const newValue = option.value || option
+      if (this.multiple) {
+        this.selectMultiOption(newValue)
+      } else {
+        this.input(newValue)
+      }
+    },
+    selectMultiOption(value) {
+      if (!this.innerValue) {
+        return this.input([value])
+      }
+      const index = this.innerValue.indexOf(value)
+      if (index < 0) {
+        return this.input([...this.innerValue, value])
+      }
+      this.deselectOption(index)
+    },
+    deselectOption(index) {
+      const newArray = [...this.innerValue]
+      newArray.splice(index, 1)
+      this.input(newArray)
+    },
+    isSelected(option) {
+      if (!this.innerValue) {
+        return false
+      }
+      const value = option.value || option
+      if (this.multiple) {
+        return this.innerValue.includes(value)
+      }
+      return this.innerValue === value
+    }
+  }
+}
diff --git a/styleguide/src/system/components/layout/Card/Card.vue b/styleguide/src/system/components/layout/Card/Card.vue
index d45f047cd..c55e1e81b 100644
--- a/styleguide/src/system/components/layout/Card/Card.vue
+++ b/styleguide/src/system/components/layout/Card/Card.vue
@@ -14,9 +14,9 @@
       v-if="image || $slots.image">
       <!-- @slot Content of the card's image -->
       <slot name="image">
-        <img 
-          :src="image" 
-          v-if="!error" 
+        <img
+          :src="image"
+          v-if="!error"
           @error="onError" >
       </slot>
     </div>
@@ -36,7 +36,14 @@
       </slot>
     </header>
     <div class="ds-card-content">
-      <slot />
+      <template v-if="space">
+        <ds-space :margin="space">
+          <slot />
+        </ds-space>
+      </template>
+      <template v-else>
+        <slot />
+      </template>
     </div>
     <footer
       class="ds-card-footer"
@@ -125,6 +132,14 @@ export default {
     hover: {
       type: Boolean,
       default: false
+    },
+    /**
+     * If you need some spacing you can provide it here like for ds-space
+     * `xxx-small, xx-small, x-small, small, large, x-large, xx-large, xxx-large`
+     */
+    space: {
+      type: String,
+      default: null
     }
   },
   data() {
diff --git a/styleguide/src/system/components/layout/Card/demo.md b/styleguide/src/system/components/layout/Card/demo.md
index 21eb8a4b1..398e4e157 100644
--- a/styleguide/src/system/components/layout/Card/demo.md
+++ b/styleguide/src/system/components/layout/Card/demo.md
@@ -21,6 +21,23 @@ Set a header and image for the card and provide some content.
 </ds-flex>
 ```
 
+## Space
+
+Need more or less space top and bottom of the card?
+Specify with with the `space` prop
+
+```html
+<ds-card space="xx-small">
+  xx-small  
+</ds-card>
+```
+
+```html
+<ds-card space="xx-large">
+  xx-large  
+</ds-card>
+```
+
 ## Cards with footer
 
 Most commonly the footer will contain some actions connected to the content.
diff --git a/styleguide/src/system/components/typography/Chip/Chip.vue b/styleguide/src/system/components/typography/Chip/Chip.vue
new file mode 100755
index 000000000..b5baed90b
--- /dev/null
+++ b/styleguide/src/system/components/typography/Chip/Chip.vue
@@ -0,0 +1,93 @@
+<template>
+  <component
+    :is="tag"
+    class="ds-chip"
+    :class="[
+      `ds-chip-size-${size}`,
+      `ds-chip-${color}`,
+      removable && 'ds-chip-removable',
+      round && 'ds-chip-round'
+    ]"
+  >
+    <slot />
+    <button
+      v-if="removable"
+      @click="remove"
+      class="ds-chip-close">
+      <ds-icon name="close" />
+    </button>
+  </component>
+</template>
+
+<script>
+/**
+ * Chips are used to represent small blocks of information.
+ * Their most common usage is for displaying contacts or tags.
+ * @version 1.0.0
+ */
+export default {
+  name: 'DsChip',
+  props: {
+    /**
+     * The background color used for the chip.
+     * `medium, inverse, primary, success, warning, danger`
+     */
+    color: {
+      type: String,
+      default: 'medium',
+      validator: value => {
+        return value.match(/(medium|inverse|primary|success|warning|danger)/)
+      }
+    },
+    /**
+     * The size used for the text.
+     * `base, large, small`
+     */
+    size: {
+      type: String,
+      default: 'base',
+      validator: value => {
+        return value.match(/(base|large|small)/)
+      }
+    },
+    /**
+     * Whether the chip should be removeable
+     * `true, false`
+     */
+    removable: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Whether the chip should be rounded
+     * `true, false`
+     */
+    round: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * The html element name used for the text.
+     */
+    tag: {
+      type: String,
+      default: 'span'
+    }
+  },
+  methods: {
+    remove() {
+      /**
+       * Fires after user clicked the remove button.
+       *
+       * @event remove
+       */
+      this.$emit('remove')
+    }
+  }
+}
+</script>
+
+<style lang="scss" src="./style.scss">
+</style>
+
+<docs src="./demo.md"></docs>
diff --git a/styleguide/src/system/components/typography/Chip/demo.md b/styleguide/src/system/components/typography/Chip/demo.md
new file mode 100755
index 000000000..af57221f1
--- /dev/null
+++ b/styleguide/src/system/components/typography/Chip/demo.md
@@ -0,0 +1,62 @@
+## Chip colors
+
+Use different colors to emphasize or provide meaning.
+
+```
+<ds-chip>Medium</ds-chip>
+<ds-chip color="inverse">Inverse</ds-chip>
+<ds-chip color="primary">Primary</ds-chip>
+<ds-chip color="success">Success</ds-chip>
+<ds-chip color="warning">Warning</ds-chip>
+<ds-chip color="danger">Danger</ds-chip>
+```
+
+## Chip sizes
+
+Use different sizes to create hierarchy (defaults to `base`).
+
+```
+<ds-chip size="small">Small</ds-chip>
+<ds-chip size="base">Base</ds-chip>
+<ds-chip size="large">Large</ds-chip>
+```
+
+## Deletable
+
+A chip can be deletable.
+
+```
+<template>
+  <div>
+    <ds-chip
+      v-for="(tag, index) in tags"
+      @remove="removeTag(index)"
+      removable
+      :key="tag">
+      {{ tag }}
+    </ds-chip>
+    <ds-chip
+      v-for="(tag, index) in tags"
+      @remove="removeTag(index)"
+      removable
+      color="primary"
+      :key="tag">
+      {{ tag }}
+    </ds-chip>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        tags: ['Dog', 'Cat', 'Duck']
+      }
+    },
+    methods: {
+      removeTag (index) {
+        this.tags.splice(index, 1)
+      }
+    }
+  }
+</script>
+```
diff --git a/styleguide/src/system/components/typography/Chip/style.scss b/styleguide/src/system/components/typography/Chip/style.scss
new file mode 100755
index 000000000..f1f96abb7
--- /dev/null
+++ b/styleguide/src/system/components/typography/Chip/style.scss
@@ -0,0 +1,81 @@
+.ds-chip {
+  @include reset;
+  @include stack-space($space-xx-small);
+  position: relative;
+  display: inline-block;
+  font-family: $font-family-text;
+  line-height: $line-height-base;
+  padding: $space-xx-small $space-x-small;
+  border-radius: $border-radius-base;
+  font-weight: $font-weight-bold;
+  color: $text-color-base;
+  background-color: $background-color-softest;
+
+  &.ds-chip-removable {
+    padding-right: $space-x-small + $space-small;
+  }
+}
+
+.ds-chip-inverse {
+  color: $text-color-inverse;
+  background-color: $background-color-inverse-softer;
+}
+
+.ds-chip-primary {
+  color: $text-color-primary-inverse;
+  background-color: $background-color-primary;
+}
+
+.ds-chip-success {
+  color: $text-color-success-inverse;
+  background-color: $background-color-success;
+}
+
+.ds-chip-warning {
+  color: $text-color-warning-inverse;
+  background-color: $background-color-warning;
+}
+
+.ds-chip-danger {
+  color: $text-color-danger-inverse;
+  background-color: $background-color-danger;
+}
+
+.ds-chip-round {
+  border-radius: $border-radius-rounded;
+}
+
+.ds-chip-size-base {
+  font-size: $font-size-small;
+}
+
+.ds-chip-size-small {
+  font-size: $font-size-x-small;
+}
+
+.ds-chip-size-large {
+  font-size: $font-size-base;
+}
+
+.ds-chip-close {
+  @include reset-button;
+  position: absolute;
+  right: $space-xx-small;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: $font-size-x-small;
+  width: $space-small;
+  height: $space-small;
+  border-radius: $border-radius-circle;
+  //background-color: $background-color-base;
+  opacity: $opacity-soft;
+  cursor: pointer;
+  transition: all $duration-short $ease-out-sharp;
+
+  &:hover {
+    opacity: 1;
+  }
+}
\ No newline at end of file
diff --git a/styleguide/src/system/styles/shared/_form.scss b/styleguide/src/system/styles/shared/_form.scss
index 7e861b542..f40cac326 100644
--- a/styleguide/src/system/styles/shared/_form.scss
+++ b/styleguide/src/system/styles/shared/_form.scss
@@ -1,23 +1,27 @@
 /* FORM VARIABLES / MIXINS
 --------------------------------------------- */
 
+$input-font-size-base: $font-size-base;
 $input-border-size: $border-size-base;
 $input-padding-vertical: $space-x-small;
 $input-height: calc(
   #{$font-size-base * $line-height-base} + #{($input-padding-vertical + $input-border-size) * 2}
 );
 
-$input-padding-vertical-small: $space-xx-small;
+$input-font-size-small: $font-size-base;
+$input-padding-vertical-small: $space-xxx-small;
 $input-height-small: calc(
-  #{$font-size-small * $line-height-base} + #{($input-padding-vertical-small + $input-border-size) * 2}
+  #{$font-size-base * $line-height-base} + #{($input-padding-vertical-small + $input-border-size) * 2}
 );
 
+$input-font-size-large: $font-size-large;
 $input-padding-vertical-large: $space-x-small;
 $input-height-large: calc(
-  #{$font-size-large * $line-height-base} + #{($input-padding-vertical-large + $input-border-size) * 2}
+  #{$input-font-size-large * $line-height-base} + #{($input-padding-vertical-large + $input-border-size) * 2}
 );
 
+// $input-font-size-large: $font-size-x-large;
 $input-padding-vertical-x-large: $space-small;
 $input-height-x-large: calc(
-  #{$font-size-x-large * $line-height-base} + #{($input-padding-vertical-x-large + $input-border-size) * 2}
+  #{$input-font-size-large * $line-height-base} + #{($input-padding-vertical-x-large + $input-border-size) * 2}
 );
diff --git a/styleguide/src/system/styles/shared/_mixins.scss b/styleguide/src/system/styles/shared/_mixins.scss
index 18c51c777..922577750 100644
--- a/styleguide/src/system/styles/shared/_mixins.scss
+++ b/styleguide/src/system/styles/shared/_mixins.scss
@@ -2,15 +2,11 @@
 --------------------------------------------- */
 
 /* AUTO SCALING FOR TYPE WITH MIN/MAX SIZES
-
   @param {Number}  $responsive  - Viewport-based size
   @param {Number}  $min         - Minimum font size (px)
   @param {Number}  $max         - Maximum font size (px) (optional)
-
   @param {Number}  $fallback    - Fallback for viewport-based units (optional)
-
   @example SCSS - 5vw size, 35px min & 150px max size + 50px fallback:
-
   @include responsive-font(5vw, 35px, 150px, 50px);
 */
 @mixin responsive-font($responsive, $min, $max: false, $fallback: false) {
@@ -44,6 +40,32 @@
   margin: 0;
 }
 
+@mixin reset-list {
+  @include reset;
+  list-style: none;
+}
+
+@mixin reset-button {
+  @include reset;
+  border: 0;
+  width: auto;
+  overflow: visible;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: normal;
+  outline: none;
+  font-smoothing: inherit;
+  -webkit-font-smoothing: inherit;
+  -moz-osx-font-smoothing: inherit;
+  -webkit-appearance: none;
+
+  &::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+  }
+}
+
 @mixin clearfix {
   &:before, &:after {
     display: table;
@@ -104,4 +126,4 @@
     border-bottom-left-radius: $size;
     border-bottom-right-radius: $size;
   }
-}
\ No newline at end of file
+}
diff --git a/styleguide/src/system/tokens/color.yml b/styleguide/src/system/tokens/color.yml
index f1648a448..2ba577e73 100644
--- a/styleguide/src/system/tokens/color.yml
+++ b/styleguide/src/system/tokens/color.yml
@@ -291,6 +291,10 @@ props:
     value: *color-neutral-80
     category: border-color
 
+  - name: border-color-light
+    value: *color-neutral-90
+    category: border-color
+
   - name: border-color-active
     value: *color-primary
     category: border-color
diff --git a/styleguide/src/system/tokens/font-size.yml b/styleguide/src/system/tokens/font-size.yml
index 9fd1a31c9..0189ed2da 100644
--- a/styleguide/src/system/tokens/font-size.yml
+++ b/styleguide/src/system/tokens/font-size.yml
@@ -17,7 +17,7 @@ props:
   - name: font-size-base
     value: "1rem"
   - name: font-size-body
-    value: "16px"
+    value: "15px"
   - name: font-size-small
     value: "0.8rem"
   - name: font-size-x-small
diff --git a/styleguide/src/system/tokens/z-index.yml b/styleguide/src/system/tokens/z-index.yml
index b73e233d0..90937ddb6 100644
--- a/styleguide/src/system/tokens/z-index.yml
+++ b/styleguide/src/system/tokens/z-index.yml
@@ -6,6 +6,8 @@
 props:
   - name: z-index-modal
     value: "9999"
+  - name: z-index-dropdown
+    value: "8888"
   - name: z-index-page-submenu
     value: "2500"
   - name: z-index-page-header

From 32dd2e4d4b211976a5ff7571ef9540243e24870a Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 7 Dec 2018 16:11:30 +0100
Subject: [PATCH 3/4] fixed whitespace

---
 .../components/data-input/shared/input.scss   | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/styleguide/src/system/components/data-input/shared/input.scss b/styleguide/src/system/components/data-input/shared/input.scss
index b0f30f5db..8d7eb59fe 100755
--- a/styleguide/src/system/components/data-input/shared/input.scss
+++ b/styleguide/src/system/components/data-input/shared/input.scss
@@ -2,7 +2,7 @@
   .#{$class}-wrap {
     position: relative;
   }
-  
+
   .#{$class} {
     appearance: none;
     box-sizing: border-box;
@@ -12,57 +12,57 @@
     width: 100%;
     padding: $input-padding-vertical $space-x-small;
     height: $input-height;
-  
+
     color: $text-color-base;
     background: $background-color-base;
-  
+
     border: $input-border-size solid $border-color-base;
     border-radius: $border-radius-base;
     outline: none;
     transition: all $duration-short $ease-out;
-  
+
     &::placeholder {
       color: $text-color-disabled;
     }
-  
+
     .ds-input-has-focus &,
     &:focus {
       border-color: $border-color-active;
       background: $background-color-base;
     }
-  
+
     .ds-input-is-disabled &,
     &:disabled {
       color: $text-color-disabled;
       opacity: $opacity-disabled;
       cursor: not-allowed;
     }
-  
+
     .ds-input-has-error & {
       border-color: $border-color-danger;
     }
   }
-  
+
   .ds-input-size-small {
     font-size: $font-size-small;
-  
+
     .#{$class} {
       font-size: $input-font-size-small;
       height: $input-height-small;
       padding: $input-padding-vertical-small $space-x-small;
     }
   }
-  
+
   .ds-input-size-large {
     font-size: $font-size-large;
-  
+
     .#{$class} {
       font-size: $input-font-size-large;
       height: $input-height-large;
       padding: $input-padding-vertical-large $space-x-small;
     }
   }
-  
+
   .#{$class}-icon,
   .#{$class}-icon-right {
     position: absolute;
@@ -76,7 +76,7 @@
     color: $text-color-softer;
     transition: color $duration-short $ease-out;
     pointer-events: none;
-  
+
     .ds-input-has-focus & {
       color: $text-color-base;
     }
@@ -89,15 +89,15 @@
       width: $input-height-large;
     }
   }
-  
+
   .#{$class}-icon-right {
     right: 0;
     left: auto;
   }
-  
+
   .#{$class}-has-icon {
     padding-left: $input-height;
-  
+
     .ds-input-size-small & {
       padding-left: $input-height-small;
     }
@@ -106,7 +106,7 @@
       padding-left: $input-height-large;
     }
   }
-  
+
   .#{$class}-has-icon-right {
     padding-right: $input-height;
 
@@ -117,5 +117,5 @@
     .ds-input-size-large & {
       padding-right: $input-height-large;
     }
-  }         
+  }
 }

From ff8203555595958f1f205f1e1a2331d21347c9d8 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 7 Dec 2018 17:20:40 +0100
Subject: [PATCH 4/4] format styleguide config files

---
 styleguide/.eslintrc.js            | 24 ++++++++++++------------
 styleguide/.postcssrc.js           |  2 +-
 styleguide/babel.config.js         |  2 +-
 styleguide/tests/unit/.eslintrc.js |  2 +-
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/styleguide/.eslintrc.js b/styleguide/.eslintrc.js
index f99fcaee6..ab800e647 100644
--- a/styleguide/.eslintrc.js
+++ b/styleguide/.eslintrc.js
@@ -1,14 +1,14 @@
 module.exports = {
-	root: true,
-	env: {
-		node: true
-	},
-	extends: ['plugin:vue/strongly-recommended', '@vue/prettier'],
-	rules: {
-		'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-		'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
-	},
-	parserOptions: {
-		parser: 'babel-eslint'
-	}
+  root: true,
+  env: {
+    node: true
+  },
+  extends: ['plugin:vue/strongly-recommended', '@vue/prettier'],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  }
 }
diff --git a/styleguide/.postcssrc.js b/styleguide/.postcssrc.js
index 100cc0124..961986e2b 100644
--- a/styleguide/.postcssrc.js
+++ b/styleguide/.postcssrc.js
@@ -2,4 +2,4 @@ module.exports = {
   plugins: {
     autoprefixer: {}
   }
-}
\ No newline at end of file
+}
diff --git a/styleguide/babel.config.js b/styleguide/babel.config.js
index c75f6e9e8..5808c33db 100644
--- a/styleguide/babel.config.js
+++ b/styleguide/babel.config.js
@@ -1,4 +1,4 @@
 module.exports = {
   presets: ['@vue/app'],
-  plugins: ["@babel/plugin-syntax-dynamic-import"]
+  plugins: ['@babel/plugin-syntax-dynamic-import']
 }
diff --git a/styleguide/tests/unit/.eslintrc.js b/styleguide/tests/unit/.eslintrc.js
index 4e51c63f4..cc7654c38 100644
--- a/styleguide/tests/unit/.eslintrc.js
+++ b/styleguide/tests/unit/.eslintrc.js
@@ -5,4 +5,4 @@ module.exports = {
   rules: {
     'import/no-extraneous-dependencies': 'off'
   }
-}
\ No newline at end of file
+}