1.0.28

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-catalog",
-  "version": "1.0.23",
+  "version": "1.0.28",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1135,43 +1135,45 @@
       }
     },
     "@designestate/dees-domtools": {
-      "version": "1.0.79",
-      "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.79.tgz",
-      "integrity": "sha512-nPHJT8fH1UBx2Xwz4MRisgMI9O2l7j3swNfmkIbqIwP60tVcAYxy8+fy0Lj+M9JvtmA5btkikRHgmFNlFcUPsA==",
+      "version": "1.0.84",
+      "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.84.tgz",
+      "integrity": "sha512-bzGyuuxiiovuSW7lK877TolHFz7HV7F1FAENvqLXgA9bv4JAHDMQoIywUoJKHiNbCHK8UpnnAXy+PDmGixsMkw==",
       "requires": {
         "@apiglobal/typedrequest": "^1.0.54",
         "@designestate/dees-comms": "^1.0.7",
         "@pushrocks/lik": "^4.0.20",
         "@pushrocks/smartdelay": "^2.0.10",
         "@pushrocks/smartpromise": "^3.1.3",
-        "@pushrocks/smartrouter": "^1.0.6",
+        "@pushrocks/smartrouter": "^1.0.7",
+        "@pushrocks/smartrx": "^2.0.19",
         "@pushrocks/smartstate": "^1.0.21",
         "@pushrocks/webrequest": "^2.0.13",
-        "@pushrocks/websetup": "^3.0.11",
+        "@pushrocks/websetup": "^3.0.13",
         "@pushrocks/webstore": "^1.0.16",
         "lit-element": "^2.4.0",
         "sweet-scroll": "^4.0.0"
       }
     },
     "@designestate/dees-element": {
-      "version": "1.0.8",
-      "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-element/-/dees-element-1.0.8.tgz",
-      "integrity": "sha512-JNnA/WzdhvAKQOSvDf9+gUblQqgIaMx6Clguuj0qdeaG0mb6EEBoG8olTbQ4ojtwnWAi4bVnY9T66dYfAumv/A==",
+      "version": "1.0.10",
+      "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-element/-/dees-element-1.0.10.tgz",
+      "integrity": "sha512-aYVFBnXOn5oLno4A9eAAtBg90xTTiGI7ys7tYJ1DlGVxPFi3HJcUAMZskm6KCVaTxyhcSl2RQHpp4UqeFDtCQw==",
       "requires": {
-        "@designestate/dees-domtools": "^1.0.70",
+        "@designestate/dees-domtools": "^1.0.80",
+        "@pushrocks/smartrx": "^2.0.19",
         "lit-element": "^2.4.0"
       }
     },
     "@designestate/dees-wcctools": {
-      "version": "1.0.49",
-      "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-wcctools/-/dees-wcctools-1.0.49.tgz",
-      "integrity": "sha512-CO728tCPZ4vSbccuLibjvdgpO9yF7EnJ2hvFnJTcPM5oKSyIXZmUy3Iw3bJZGZgPqe2TSBNNzOF9la4TZRPc6g==",
+      "version": "1.0.54",
+      "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-wcctools/-/dees-wcctools-1.0.54.tgz",
+      "integrity": "sha512-rqA1rh1Es1HHR4w1EhfZfSMSuRSCLcA9n3cz2p9V5ZfB6yhpSuUAzZWoEii3i3cMWO2s3uthHIxFAMwRlpcPqw==",
       "requires": {
-        "@designestate/dees-domtools": "^1.0.74",
-        "@designestate/dees-element": "^1.0.6",
+        "@designestate/dees-domtools": "^1.0.81",
+        "@designestate/dees-element": "^1.0.10",
         "@gitzone/tsrun": "^1.2.12",
         "@pushrocks/smartdelay": "^2.0.10",
-        "@pushrocks/smartexpress": "^3.0.97",
+        "@pushrocks/smartexpress": "^3.0.98",
         "lit-element": "^2.4.0",
         "lit-html": "^1.3.0",
         "typescript": "^4.1.2"
@@ -1198,6 +1200,22 @@
         "@fortawesome/fontawesome-common-types": "^0.2.32"
       }
     },
+    "@fortawesome/free-regular-svg-icons": {
+      "version": "5.15.1",
+      "resolved": "https://verdaccio.lossless.one/@fortawesome%2ffree-regular-svg-icons/-/free-regular-svg-icons-5.15.1.tgz",
+      "integrity": "sha512-eD9NWFy89e7SVVtrLedJUxIpCBGhd4x7s7dhesokjyo1Tw62daqN5UcuAGu1NrepLLq1IeAYUVfWwnOjZ/j3HA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.32"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.1",
+      "resolved": "https://verdaccio.lossless.one/@fortawesome%2ffree-solid-svg-icons/-/free-solid-svg-icons-5.15.1.tgz",
+      "integrity": "sha512-EFMuKtzRMNbvjab/SvJBaOOpaqJfdSap/Nl6hst7CgrJxwfORR1drdTV6q1Ib/JVzq4xObdTDcT6sqTaXMqfdg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.32"
+      }
+    },
     "@gitzone/tsbuild": {
       "version": "2.1.25",
       "resolved": "https://verdaccio.lossless.one/@gitzone%2ftsbuild/-/tsbuild-2.1.25.tgz",
@@ -2396,9 +2414,9 @@
       }
     },
     "@pushrocks/websetup": {
-      "version": "3.0.11",
-      "resolved": "https://verdaccio.lossless.one/@pushrocks%2fwebsetup/-/websetup-3.0.11.tgz",
-      "integrity": "sha512-5nQqrQSiP5/WUv5pLsmjYAkfGosi2DqEH1mNrliOTr6iA8syGQ7bOQk4JY7jApjk64wO5L7l8qBGvKJuZ+p9Dw==",
+      "version": "3.0.15",
+      "resolved": "https://verdaccio.lossless.one/@pushrocks%2fwebsetup/-/websetup-3.0.15.tgz",
+      "integrity": "sha512-Ag4QQ7vMtsj1W3C7ED+8YA9xcdEh/7S6pEQNz/Mb6ZbL2JrQOgQRQZp1JSYMJOYaRnb9wG6Z/QZmysPWlAQBxw==",
       "requires": {
         "@pushrocks/smartdelay": "^2.0.10",
         "@pushrocks/smartpromise": "^3.1.3",
@@ -2552,9 +2570,9 @@
       }
     },
     "@types/connect": {
-      "version": "3.4.33",
-      "resolved": "https://verdaccio.lossless.one/@types%2fconnect/-/connect-3.4.33.tgz",
-      "integrity": "sha512-2+FrkXY4zllzTNfJth7jOqEHC+enpLeGslEhpnTAkg21GkRrWV4SsAtqchtT4YS9/nODBU2/ZfsBY2X4J/dX7A==",
+      "version": "3.4.34",
+      "resolved": "https://verdaccio.lossless.one/@types%2fconnect/-/connect-3.4.34.tgz",
+      "integrity": "sha512-ePPA/JuI+X0vb+gSWlPKOY0NdNAie/rPUqX2GUPpbZwiKTkSPhjXWuee47E4MtE54QVzGCQMQkAL6JhV2E1+cQ==",
       "requires": {
         "@types/node": "*"
       }
@@ -2595,9 +2613,9 @@
       }
     },
     "@types/express-serve-static-core": {
-      "version": "4.17.14",
-      "resolved": "https://verdaccio.lossless.one/@types%2fexpress-serve-static-core/-/express-serve-static-core-4.17.14.tgz",
-      "integrity": "sha512-uFTLwu94TfUFMToXNgRZikwPuZdOtDgs3syBtAIr/OXorL1kJqUJT9qCLnRZ5KBOWfZQikQ2xKgR2tnDj1OgDA==",
+      "version": "4.17.15",
+      "resolved": "https://verdaccio.lossless.one/@types%2fexpress-serve-static-core/-/express-serve-static-core-4.17.15.tgz",
+      "integrity": "sha512-pb71P0BrBAx7cQE+/7QnA1HTQUkdBKMlkPY7lHUMn0YvPJkL2UA+KW3BdWQ309IT+i9En/qm45ZxpjIcpgEhNQ==",
       "requires": {
         "@types/node": "*",
         "@types/qs": "*",
@@ -2674,9 +2692,9 @@
       "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA=="
     },
     "@types/node": {
-      "version": "14.14.10",
-      "resolved": "https://verdaccio.lossless.one/@types%2fnode/-/node-14.14.10.tgz",
-      "integrity": "sha512-J32dgx2hw8vXrSbu4ZlVhn1Nm3GbeCFNw2FWL8S5QKucHGY0cyNwjdQdO+KMBZ4wpmC7KhLCiNsdk1RFRIYUQQ=="
+      "version": "14.14.11",
+      "resolved": "https://verdaccio.lossless.one/@types%2fnode/-/node-14.14.11.tgz",
+      "integrity": "sha512-BJ97wAUuU3NUiUCp44xzUFquQEvnk1wu7q4CMEUYKJWjdkr0YWYDsm4RFtAvxYsNjLsKcrFt6RvK8r+mnzMbEQ=="
     },
     "@types/parcel-bundler": {
       "version": "1.12.1",
@@ -2763,9 +2781,9 @@
       "dev": true
     },
     "@types/yargs": {
-      "version": "15.0.10",
-      "resolved": "https://verdaccio.lossless.one/@types%2fyargs/-/yargs-15.0.10.tgz",
-      "integrity": "sha512-z8PNtlhrj7eJNLmrAivM7rjBESG6JwC5xP3RVk12i/8HVP7Xnx/sEmERnRImyEuUaJfO942X0qMOYsoupaJbZQ==",
+      "version": "15.0.11",
+      "resolved": "https://verdaccio.lossless.one/@types%2fyargs/-/yargs-15.0.11.tgz",
+      "integrity": "sha512-jfcNBxHFYJ4nPIacsi3woz1+kvUO6s1CyeEhtnDHBjHUMNj5UlW2GynmnSgiJJEdNg9yW5C8lfoNRZrHGv5EqA==",
       "dev": true,
       "requires": {
         "@types/yargs-parser": "*"
@@ -3467,16 +3485,16 @@
       }
     },
     "browserslist": {
-      "version": "4.14.7",
-      "resolved": "https://verdaccio.lossless.one/browserslist/-/browserslist-4.14.7.tgz",
-      "integrity": "sha512-BSVRLCeG3Xt/j/1cCGj1019Wbty0H+Yvu2AOuZSuoaUWn3RatbL33Cxk+Q4jRMRAbOm0p7SLravLjpnT6s0vzQ==",
+      "version": "4.15.0",
+      "resolved": "https://verdaccio.lossless.one/browserslist/-/browserslist-4.15.0.tgz",
+      "integrity": "sha512-IJ1iysdMkGmjjYeRlDU8PQejVwxvVO5QOfXH7ylW31GO6LwNRSmm/SgRXtNsEXqMLl2e+2H5eEJ7sfynF8TCaQ==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "^1.0.30001157",
+        "caniuse-lite": "^1.0.30001164",
         "colorette": "^1.2.1",
-        "electron-to-chromium": "^1.3.591",
+        "electron-to-chromium": "^1.3.612",
         "escalade": "^3.1.1",
-        "node-releases": "^1.1.66"
+        "node-releases": "^1.1.67"
       }
     },
     "buffer": {
@@ -3615,9 +3633,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001164",
-      "resolved": "https://verdaccio.lossless.one/caniuse-lite/-/caniuse-lite-1.0.30001164.tgz",
-      "integrity": "sha512-G+A/tkf4bu0dSp9+duNiXc7bGds35DioCyC6vgK2m/rjA4Krpy5WeZgZyfH2f0wj2kI6yAWWucyap6oOwmY1mg==",
+      "version": "1.0.30001165",
+      "resolved": "https://verdaccio.lossless.one/caniuse-lite/-/caniuse-lite-1.0.30001165.tgz",
+      "integrity": "sha512-8cEsSMwXfx7lWSUMA2s08z9dIgsnR5NAqjXP23stdsU3AUWkCr/rr4s4OFtHXn5XXr6+7kam3QFVoYyXNPdJPA==",
       "dev": true
     },
     "caseless": {
@@ -4031,12 +4049,12 @@
       "dev": true
     },
     "core-js-compat": {
-      "version": "3.8.0",
-      "resolved": "https://verdaccio.lossless.one/core-js-compat/-/core-js-compat-3.8.0.tgz",
-      "integrity": "sha512-o9QKelQSxQMYWHXc/Gc4L8bx/4F7TTraE5rhuN8I7mKBt5dBIUpXpIR3omv70ebr8ST5R3PqbDQr+ZI3+Tt1FQ==",
+      "version": "3.8.1",
+      "resolved": "https://verdaccio.lossless.one/core-js-compat/-/core-js-compat-3.8.1.tgz",
+      "integrity": "sha512-a16TLmy9NVD1rkjUGbwuyWkiDoN0FDpAwrfLONvHFQx0D9k7J9y0srwMT8QP/Z6HE3MIFaVynEeYwZwPX1o5RQ==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.14.7",
+        "browserslist": "^4.15.0",
         "semver": "7.0.0"
       },
       "dependencies": {
@@ -4476,9 +4494,9 @@
       }
     },
     "dayjs": {
-      "version": "1.9.6",
-      "resolved": "https://verdaccio.lossless.one/dayjs/-/dayjs-1.9.6.tgz",
-      "integrity": "sha512-HngNLtPEBWRo8EFVmHFmSXAjtCX8rGNqeXQI0Gh7wCTSqwaKgPIDqu9m07wABVopNwzvOeCb+2711vQhDlcIXw=="
+      "version": "1.9.7",
+      "resolved": "https://verdaccio.lossless.one/dayjs/-/dayjs-1.9.7.tgz",
+      "integrity": "sha512-IC877KBdMhBrCfBfJXHQlo0G8keZ0Opy7YIIq5QKtUbCuHMzim8S4PyiVK4YmihI3iOF9lhfUBW4AQWHTR5WHA=="
     },
     "deasync": {
       "version": "0.1.21",
@@ -4667,9 +4685,9 @@
       },
       "dependencies": {
         "domelementtype": {
-          "version": "2.0.2",
-          "resolved": "https://verdaccio.lossless.one/domelementtype/-/domelementtype-2.0.2.tgz",
-          "integrity": "sha512-wFwTwCVebUrMgGeAwRL/NhZtHAUyT9n9yg4IMDwf10+6iCMxSkVq9MGCVEH+QZWo1nNidy8kNvwmv4zWHDTqvA==",
+          "version": "2.1.0",
+          "resolved": "https://verdaccio.lossless.one/domelementtype/-/domelementtype-2.1.0.tgz",
+          "integrity": "sha512-LsTgx/L5VpD+Q8lmsXSHW2WpA+eBlZ9HPf3erD1IoPF00/3JKHZ3BknUVA2QGDNu69ZNmyFmCWBSO45XjYKC5w==",
           "dev": true
         }
       }
@@ -4792,9 +4810,9 @@
       "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
     },
     "electron-to-chromium": {
-      "version": "1.3.612",
-      "resolved": "https://verdaccio.lossless.one/electron-to-chromium/-/electron-to-chromium-1.3.612.tgz",
-      "integrity": "sha512-CdrdX1B6mQqxfw+51MPWB5qA6TKWjza9f5voBtUlRfEZEwZiFaxJLrhFI8zHE9SBAuGt4h84rQU6Ho9Bauo1LA==",
+      "version": "1.3.620",
+      "resolved": "https://verdaccio.lossless.one/electron-to-chromium/-/electron-to-chromium-1.3.620.tgz",
+      "integrity": "sha512-YbgWXUR2Mu+Fp6rm3GZ5YJdNo8SgZKLUTNSl2PNvdOcM8OIz07jRJnRkIaV9vdszFv9UUuGChh19w9qSuoLJgw==",
       "dev": true
     },
     "elliptic": {
@@ -5241,9 +5259,9 @@
       "dev": true
     },
     "fast-xml-parser": {
-      "version": "3.17.4",
-      "resolved": "https://verdaccio.lossless.one/fast-xml-parser/-/fast-xml-parser-3.17.4.tgz",
-      "integrity": "sha512-qudnQuyYBgnvzf5Lj/yxMcf4L9NcVWihXJg7CiU1L+oUCq8MUnFEfH2/nXR/W5uq+yvUN1h7z6s7vs2v1WkL1A=="
+      "version": "3.17.5",
+      "resolved": "https://verdaccio.lossless.one/fast-xml-parser/-/fast-xml-parser-3.17.5.tgz",
+      "integrity": "sha512-lEvThd1Xq+CCylf1n+05bUZCDZjTufaaaqpxM3JZ+4iDqtlG+d/oKgtMmg9GEMOuzBgUoalIzFOaClht9YiGJQ=="
     },
     "fastparse": {
       "version": "1.1.2",
@@ -6605,9 +6623,9 @@
       }
     },
     "is-negative-zero": {
-      "version": "2.0.0",
-      "resolved": "https://verdaccio.lossless.one/is-negative-zero/-/is-negative-zero-2.0.0.tgz",
-      "integrity": "sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE=",
+      "version": "2.0.1",
+      "resolved": "https://verdaccio.lossless.one/is-negative-zero/-/is-negative-zero-2.0.1.tgz",
+      "integrity": "sha512-2z6JzQvZRa9A2Y7xC6dQQm4FSTSTNWjKIYYTt4246eMTJmIo0Q+ZyOsU66X8lxK1AbB92dFeglPLrhwpeRKO6w==",
       "dev": true
     },
     "is-number": {
@@ -6787,9 +6805,9 @@
       "dev": true
     },
     "js-yaml": {
-      "version": "3.14.0",
-      "resolved": "https://verdaccio.lossless.one/js-yaml/-/js-yaml-3.14.0.tgz",
-      "integrity": "sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==",
+      "version": "3.14.1",
+      "resolved": "https://verdaccio.lossless.one/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
       "requires": {
         "argparse": "^1.0.7",
         "esprima": "^4.0.0"
@@ -9000,9 +9018,9 @@
       }
     },
     "rollup": {
-      "version": "2.34.0",
-      "resolved": "https://verdaccio.lossless.one/rollup/-/rollup-2.34.0.tgz",
-      "integrity": "sha512-dW5iLvttZzdVehjEuNJ1bWvuMEJjOWGmnuFS82WeKHTGXDkRHQeq/ExdifkSyJv9dLcR86ysKRmrIDyR6O0X8g==",
+      "version": "2.34.2",
+      "resolved": "https://verdaccio.lossless.one/rollup/-/rollup-2.34.2.tgz",
+      "integrity": "sha512-mvtQLqu3cNeoctS+kZ09iOPxrc1P1/Bt1z15enuQ5feyKOdM3MJAVFjjsygurDpSWn530xB4AlA83TWIzRstXA==",
       "dev": true,
       "requires": {
         "fsevents": "~2.1.2"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-catalog",
-  "version": "1.0.23",
+  "version": "1.0.28",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",
@@ -13,11 +13,13 @@
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@designestate/dees-domtools": "^1.0.79",
-    "@designestate/dees-wcctools": "^1.0.49",
+    "@designestate/dees-domtools": "^1.0.84",
+    "@designestate/dees-element": "^1.0.10",
+    "@designestate/dees-wcctools": "^1.0.54",
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
     "@fortawesome/free-brands-svg-icons": "^5.15.1",
-    "lit-element": "^2.4.0",
+    "@fortawesome/free-regular-svg-icons": "^5.15.1",
+    "@fortawesome/free-solid-svg-icons": "^5.15.1",
     "typescript": "^4.1.2"
   },
   "devDependencies": {

ts_web/elements/dees-button.ts

@@ -1,9 +1,11 @@
-import { customElement, html, LitElement, property, TemplateResult } from 'lit-element';
+import { customElement, html, DeesElement, property, TemplateResult } from '@designestate/dees-element';
 
 import * as domtools from '@designestate/dees-domtools';
 
 @customElement('dees-button')
-export class DeesButton extends LitElement {
+export class DeesButton extends DeesElement {
+  public static demo = () => html`<dees-button></dees-button>`
+
   @property()
   text: string;
 
@@ -13,9 +15,6 @@ export class DeesButton extends LitElement {
   @property()
   disabled = false;
 
-  @property()
-  isQuote = false;
-
   @property()
   isHidden = false;
 
@@ -43,15 +42,14 @@ export class DeesButton extends LitElement {
           font-size: 14px;
           display: block;
           text-align: center;
-          background: #333;
-          border-top: 1px solid #444;
+          background: ${this.goBright ? '#eee' : '#333'};
+          border-top: ${this.goBright ? '1px solid #eee' : '1px solid #444'};
           border-radius: 2px;
           line-height: 40px;
           padding: 0px 10px;
           min-width: 100px;
-          color: ${this.isQuote ? '#ffffff' : '#333333' };
           user-select: none;
-          color: #ccc;
+          color: ${this.goBright ? '#333' : ' #ccc'};
         }
 
         .button:hover {

ts_web/elements/dees-form.ts

@@ -8,11 +8,13 @@ import { DeesInputRadio } from './dees-input-radio';
 @customElement('dees-form')
 export class DeesForm extends LitElement {
   public static demo = () => html`
-    <dees-form style="display: block; margin:auto; width: 500px; padding: 20px; background: #111;">
-      <dees-input-text key="hello1"></dees-input-text>
-      <dees-input-text key="hello2"></dees-input-text>
+    <dees-form style="display: block; margin:auto; max-width: 500px; padding: 20px">
+      <dees-input-text key="hello1" label="a text"></dees-input-text>
+      <dees-input-text key="hello2" label="also a text"></dees-input-text>
+      <dees-input-checkbox key="hello3" label="another text"></dees-input-checkbox>
       <dees-form-submit>Submit</dees-form-submit>
-    </dees-form>`;
+    </dees-form>
+    `;
 
   public name: string = 'myform';
 

ts_web/elements/dees-icon.ts

@@ -2,15 +2,43 @@ import { LitElement, html, property, customElement } from 'lit-element';
 
 import * as domtools from '@designestate/dees-domtools';
 
-import { icon, IconDefinition } from "@fortawesome/fontawesome-svg-core";
-import { faFacebook, faTwitter, faLinkedin, faMedium } from '@fortawesome/free-brands-svg-icons';
+import { icon, IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import {
+  faFacebook,
+  faGoogle,
+  faLinkedin,
+  faMedium,
+  faSlackHash,
+  faTwitter,
+} from '@fortawesome/free-brands-svg-icons';
 
-type TBrand = 'facebook' | 'twitter' | 'linkedin' | 'medium';
-const brandIcons: {[key: string]: IconDefinition} = {
+import {} from '@fortawesome/free-regular-svg-icons';
+import { faDesktop, faRss, faUsers } from '@fortawesome/free-solid-svg-icons';
+
+type TFontAwesomeIcon =
+  // normal
+  | 'desktop'
+  | 'rss'
+  // brands
+  | 'facebook'
+  | 'google'
+  | 'twitter'
+  | 'linkedin'
+  | 'medium'
+  | 'slack'
+  | 'users';
+const faIcons: { [key: string]: IconDefinition } = {
+  // normal
+  desktop: faDesktop,
+  rss: faRss,
+  // brands
   facebook: faFacebook,
-  twitter: faTwitter,
+  google: faGoogle,
   linkedin: faLinkedin,
-  medium: faMedium
+  medium: faMedium,
+  slack: faSlackHash,
+  twitter: faTwitter,
+  users: faUsers,
 };
 
 @customElement('dees-icon')
@@ -20,14 +48,13 @@ export class DeesIcon extends LitElement {
       <dees-icon iconName="visibility"></dees-icon>
       <dees-icon brandName="facebook"></dees-icon>
     </div>
-
-    `;
+  `;
 
   @property()
   public iconName: string;
 
   @property()
-  public brandName: TBrand;
+  public brandName: TFontAwesomeIcon;
 
   @property()
   public svgSize: number = 20;
@@ -83,7 +110,9 @@ export class DeesIcon extends LitElement {
 
   firstUpdated() {
     if (this.brandName && !this.iconName) {
-      this.shadowRoot.querySelector('#iconContainer').innerHTML = icon(brandIcons[this.brandName]).html[0];
+      this.shadowRoot.querySelector('#iconContainer').innerHTML = icon(
+        faIcons[this.brandName]
+      ).html[0];
     }
   }
 }

ts_web/elements/dees-input-checkbox.ts

@@ -1,8 +1,8 @@
-import { customElement, LitElement, TemplateResult, property, html } from 'lit-element';
+import { customElement, DeesElement, TemplateResult, property, html } from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';
 
 @customElement('dees-input-checkbox')
-export class DeesInputCheckbox extends LitElement {
+export class DeesInputCheckbox extends DeesElement {
   public static demo = () => html`<dees-input-checkbox></dees-input-checkbox>`;
 
   @property()
@@ -33,11 +33,11 @@ export class DeesInputCheckbox extends LitElement {
           display: grid;
           grid-template-columns: 25px auto;
           padding: 5px 0px;
-          color: #ccc;
+          color: ${this.goBright ? '#333' : '#ccc'};
         }
 
         .maincontainer:hover {
-          color: #fff;
+          ${this.goBright ? '#000' : '#ccc'};
         }
 
         .label {
@@ -55,12 +55,12 @@ export class DeesInputCheckbox extends LitElement {
         .checkbox {
           transition: all 0.1s;
           box-sizing: border-box;
-          border: 1px solid #999;
+          border: 1px solid ${this.goBright ? '#CCC' : '#999'};
           border-radius: 2px;
           height: 24px;
           width: 24px;
           display: inline-block;
-          background: #222;
+          background: ${this.goBright ? '#fafafa' : '#222'};
         }
 
         .checkbox.selected {

ts_web/elements/dees-input-dropdown.ts

@@ -4,6 +4,8 @@ import * as domtools from '@designestate/dees-domtools';
 
 @customElement('dees-input-dropdown')
 export class DeesInputDropdown extends LitElement {
+  public static demo = () => html`<dees-input-dropdown></dees-input-dropdown>`
+
   @property()
   public label: string = 'Label';
 

ts_web/elements/dees-input-quantityselector.ts

@@ -1,8 +1,8 @@
-import { customElement, property, html, TemplateResult, LitElement } from 'lit-element';
+import { customElement, property, html, TemplateResult, DeesElement } from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';
 
 @customElement('dees-input-quantityselector')
-export class DeesInputQuantitySelector extends LitElement {
+export class DeesInputQuantitySelector extends DeesElement {
   public static demo = () => html`<dees-input-quantityselector></dees-input-quantityselector>`;
 
   @property()
@@ -32,8 +32,13 @@ export class DeesInputQuantitySelector extends LitElement {
           line-height: 40px;
           padding: 0px;
           min-width: 100px;
-          color: #CCC;
-          border: 1px solid #CCC;
+          color: ${this.goBright ? '#666' : '#CCC'};
+          border: ${this.goBright ? '1px solid #333' : '1px solid #CCC'};
+        }
+
+        .mainContainer:hover {
+          color: ${this.goBright ? '#333' : '#fff'};
+          border: ${this.goBright ? '1px solid #333' : '1px solid #fff'};
         }
 
         .minus {
@@ -57,10 +62,7 @@ export class DeesInputQuantitySelector extends LitElement {
           text-align: center;
         }
 
-        .mainContainer:hover {
-          color: #fff;
-          border: 1px solid #fff;
-        }
+        
       </style>
 
       <div class="maincontainer">

ts_web/elements/dees-input-text.ts

@@ -1,7 +1,7 @@
-import {customElement, LitElement, TemplateResult, property, html} from 'lit-element';
+import {customElement, DeesElement, TemplateResult, property, html} from '@designestate/dees-element';
 
 @customElement('dees-input-text')
-export class DeesInputText extends LitElement {
+export class DeesInputText extends DeesElement {
   public static demo = () => html`<dees-input-text></dees-input-text>`;
 
   @property()
@@ -28,7 +28,7 @@ export class DeesInputText extends LitElement {
         }
 
         .maincontainer {
-          color: #ccc;
+          color: ${this.goBright ? '#333' : '#ccc'};
         }
 
         .label {
@@ -38,10 +38,11 @@ export class DeesInputText extends LitElement {
 
         input {
           margin-top: 5px;
-          background: #222;
-          border: none;
-          border-top: 1px solid #444;
-          border-bottom: 1px solid #333;
+          background: ${this.goBright ? '#fafafa' : '#222'};
+          border-top: ${this.goBright ? '1px solid #CCC'  : '1px solid #444'};
+          border-bottom: ${this.goBright ? '1px solid #CCC' : '1px solid #333'};
+          border-right: ${this.goBright ? '1px solid #CCC' : 'none'};
+          border-left: ${this.goBright ? '1px solid #CCC' : 'none'};
           padding-left:10px;
           padding-right: 10px;
           border-radius: 2px;