Initial commit with buttons

2026-01-12 04:09:12 +00:00 · 2020-01-03 22:46:15 -05:00
commit f3e22d4d62
24 changed files with 1686 additions and 0 deletions
--- a/.editorconfig
+++ b/.editorconfig
@@ -0,0 +1,15 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,26 @@
+dist/
+www/
+loader/
+
+*~
+*.sw[mnpcod]
+*.log
+*.lock
+*.tmp
+*.tmp.*
+log.txt
+*.sublime-project
+*.sublime-workspace
+
+.stencil/
+.idea/
+.vscode/
+.sass-cache/
+.versions/
+node_modules/
+$RECYCLE.BIN/
+
+.DS_Store
+Thumbs.db
+UserInterfaceState.xcuserstate
+.env
--- a/.prettierignore
+++ b/.prettierignore
@@ -0,0 +1,3 @@
+node_modules
+dist
+package-lock.json
--- a/21
+++ b/21
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -0,0 +1,7 @@
+Copyright (c) 2020 A Beautiful Site, LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--- a/README.md
+++ b/README.md
@@ -0,0 +1,21 @@
+# Shoelace 2
+
+A forward-thinking component library built with Web Components.
+
+Designed and developed in New Hampshire by [Cory LaViska](https://twitter.com/claviska).
+
+## Installation
+
+TODO
+
+## Usage
+
+TODO
+
+## Developers
+
+TODO
+
+## Bugs, Questions, & Support
+
+TODO
--- a/package-lock.json
+++ b/package-lock.json
@@ -0,0 +1,765 @@
+{
+  "name": "shoelace",
+  "version": "0.0.1",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@babel/code-frame": {
+      "version": "7.5.5",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.5.5.tgz",
+      "integrity": "sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==",
+      "dev": true,
+      "requires": {
+        "@babel/highlight": "^7.0.0"
+      }
+    },
+    "@babel/highlight": {
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.5.0.tgz",
+      "integrity": "sha512-7dV4eu9gBxoM0dAnj/BCFDW9LFU0zvTrkq0ugM7pnHEgguOEeOz1so2ZghEdzviYzQEED0r4EAgpsBChKy1TRQ==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.0.0",
+        "esutils": "^2.0.2",
+        "js-tokens": "^4.0.0"
+      },
+      "dependencies": {
+        "esutils": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+          "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/runtime": {
+      "version": "7.7.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.7.tgz",
+      "integrity": "sha512-uCnC2JEVAu8AKB5do1WRIsvrdJ0flYx/A/9f/6chdacnEZ7LmavjdsDXr5ksYBegxtuTPR5Va9/+13QF/kFkCA==",
+      "dev": true,
+      "requires": {
+        "regenerator-runtime": "^0.13.2"
+      }
+    },
+    "@hapi/address": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
+      "integrity": "sha512-QD1PhQk+s31P1ixsX0H0Suoupp3VMXzIVMSwobR3F3MSUO2YCV0B7xqLcUw/Bh8yuvd3LhpyqLQWTNcRmp6IdQ==",
+      "dev": true
+    },
+    "@hapi/bourne": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@hapi/bourne/-/bourne-1.3.2.tgz",
+      "integrity": "sha512-1dVNHT76Uu5N3eJNTYcvxee+jzX4Z9lfciqRRHCU27ihbUcYi+iSc2iml5Ke1LXe1SyJCLA0+14Jh4tXJgOppA==",
+      "dev": true
+    },
+    "@hapi/hoek": {
+      "version": "8.5.0",
+      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.5.0.tgz",
+      "integrity": "sha512-7XYT10CZfPsH7j9F1Jmg1+d0ezOux2oM2GfArAzLwWe4mE2Dr3hVjsAL6+TFY49RRJlCdJDMw3nJsLFroTc8Kw==",
+      "dev": true
+    },
+    "@hapi/joi": {
+      "version": "15.1.1",
+      "resolved": "https://registry.npmjs.org/@hapi/joi/-/joi-15.1.1.tgz",
+      "integrity": "sha512-entf8ZMOK8sc+8YfeOlM8pCfg3b5+WZIKBfUaaJT8UsjAAPjartzxIYm3TIbjvA4u+u++KbcXD38k682nVHDAQ==",
+      "dev": true,
+      "requires": {
+        "@hapi/address": "2.x.x",
+        "@hapi/bourne": "1.x.x",
+        "@hapi/hoek": "8.x.x",
+        "@hapi/topo": "3.x.x"
+      }
+    },
+    "@hapi/topo": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/@hapi/topo/-/topo-3.1.6.tgz",
+      "integrity": "sha512-tAag0jEcjwH+P2quUfipd7liWCNX2F8NvYjQp2wtInsZxnMlypdw0FtAOLxtvvkO+GSRRbmNi8m/5y42PQJYCQ==",
+      "dev": true,
+      "requires": {
+        "@hapi/hoek": "^8.3.0"
+      }
+    },
+    "@stencil/core": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-1.8.3.tgz",
+      "integrity": "sha512-9+ugs+3OLokZPKKrm2QtmGD8t44U1w5SRCteL9HLU2bQNm8iN1SHRu9FBIAdvj1nIovwmsGZpb0+DyPVLfSv1g==",
+      "dev": true,
+      "requires": {
+        "typescript": "3.7.2"
+      }
+    },
+    "@stencil/sass": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-1.1.1.tgz",
+      "integrity": "sha512-Nny3JiFkpQa0RdXWCa4pzhKQYnHuDNzC9c4w35FcaZHXBVuZ1UHSHc7wI7By9SS1auYcySqpPOBVzgoCqXcYVQ==",
+      "dev": true
+    },
+    "@types/node": {
+      "version": "10.17.13",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.13.tgz",
+      "integrity": "sha512-pMCcqU2zT4TjqYFrWtYHKal7Sl30Ims6ulZ4UFXxI4xbtQqK/qqKwkDoBFCfooRqqmRu9vY3xaJRwxSh673aYg==",
+      "dev": true
+    },
+    "ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "requires": {
+        "color-convert": "^1.9.0"
+      }
+    },
+    "argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dev": true,
+      "requires": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "babel-extract-comments": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/babel-extract-comments/-/babel-extract-comments-1.0.0.tgz",
+      "integrity": "sha512-qWWzi4TlddohA91bFwgt6zO/J0X+io7Qp184Fw0m2JYRSTZnJbFR8+07KmzudHCZgOiKRCrjhylwv9Xd8gfhVQ==",
+      "dev": true,
+      "requires": {
+        "babylon": "^6.18.0"
+      }
+    },
+    "babel-plugin-syntax-object-rest-spread": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
+      "integrity": "sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=",
+      "dev": true
+    },
+    "babel-plugin-transform-object-rest-spread": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz",
+      "integrity": "sha1-DzZpLVD+9rfi1LOsFHgTepY7ewY=",
+      "dev": true,
+      "requires": {
+        "babel-plugin-syntax-object-rest-spread": "^6.8.0",
+        "babel-runtime": "^6.26.0"
+      }
+    },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "dev": true,
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
+          "dev": true
+        }
+      }
+    },
+    "babylon": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
+      "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
+      "dev": true
+    },
+    "balanced-match": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
+      "dev": true
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "builtin-modules": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz",
+      "integrity": "sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=",
+      "dev": true
+    },
+    "chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      }
+    },
+    "color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "dev": true
+    },
+    "commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true
+    },
+    "common-tags": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.0.tgz",
+      "integrity": "sha512-6P6g0uetGpW/sdyUy/iQQCbFF0kWVMSIVSyYz7Zgjcgh8mgw8PQzDNZeyZ5DQ2gM7LBoZPHmnjz8rUthkBG5tw==",
+      "dev": true
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "dev": true
+    },
+    "core-js": {
+      "version": "2.6.11",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
+      "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==",
+      "dev": true
+    },
+    "diff": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.1.tgz",
+      "integrity": "sha512-s2+XdvhPCOF01LRQBC8hf4vhbVmI2CGS5aZnxLJlT5FtdhPCDFq80q++zK2KlrVorVDdL5BOGZ/VfLrVtYNF+Q==",
+      "dev": true
+    },
+    "doctrine": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-0.7.2.tgz",
+      "integrity": "sha1-fLhgNZujvpDgQLJrcpzkv6ZUxSM=",
+      "dev": true,
+      "requires": {
+        "esutils": "^1.1.6",
+        "isarray": "0.0.1"
+      }
+    },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true
+    },
+    "esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "dev": true
+    },
+    "esutils": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-1.1.6.tgz",
+      "integrity": "sha1-wBzKqa5LiXxtDD4hCuUvPHqEQ3U=",
+      "dev": true
+    },
+    "fs-extra": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.3.tgz",
+      "integrity": "sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      }
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+      "dev": true
+    },
+    "get-own-enumerable-property-symbols": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
+      "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==",
+      "dev": true
+    },
+    "glob": {
+      "version": "7.1.6",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+      "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+      "dev": true,
+      "requires": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      }
+    },
+    "graceful-fs": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
+      "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==",
+      "dev": true
+    },
+    "has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "dev": true
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "dev": true,
+      "requires": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
+    },
+    "is-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
+      "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8=",
+      "dev": true
+    },
+    "is-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
+      "integrity": "sha1-/S2INUXEa6xaYz57mgnof6LLUGk=",
+      "dev": true
+    },
+    "isarray": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+      "dev": true
+    },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true
+    },
+    "js-yaml": {
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
+      "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
+      "dev": true,
+      "requires": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      }
+    },
+    "jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "lodash._reinterpolate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
+      "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=",
+      "dev": true
+    },
+    "lodash.template": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
+      "integrity": "sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==",
+      "dev": true,
+      "requires": {
+        "lodash._reinterpolate": "^3.0.0",
+        "lodash.templatesettings": "^4.0.0"
+      }
+    },
+    "lodash.templatesettings": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz",
+      "integrity": "sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==",
+      "dev": true,
+      "requires": {
+        "lodash._reinterpolate": "^3.0.0"
+      }
+    },
+    "minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "dev": true,
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
+    "minimist": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+      "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
+      "dev": true
+    },
+    "mkdirp": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+      "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+      "dev": true,
+      "requires": {
+        "minimist": "0.0.8"
+      }
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "dev": true,
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "dev": true
+    },
+    "path-parse": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
+      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
+      "dev": true
+    },
+    "pretty-bytes": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.3.0.tgz",
+      "integrity": "sha512-hjGrh+P926p4R4WbaB6OckyRtO0F0/lQBiT+0gnxjV+5kjPBrfVBFCsCLbMqVQeydvIoouYTCmmEURiH3R1Bdg==",
+      "dev": true
+    },
+    "regenerator-runtime": {
+      "version": "0.13.3",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
+      "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==",
+      "dev": true
+    },
+    "resolve": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.14.1.tgz",
+      "integrity": "sha512-fn5Wobh4cxbLzuHaE+nphztHy43/b++4M6SsGFC2gB8uYwf0C8LcarfCz1un7UTW8OFQg9iNjZ4xpcFVGebDPg==",
+      "dev": true,
+      "requires": {
+        "path-parse": "^1.0.6"
+      }
+    },
+    "semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "dev": true
+    },
+    "sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+      "dev": true
+    },
+    "stringify-object": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
+      "integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
+      "dev": true,
+      "requires": {
+        "get-own-enumerable-property-symbols": "^3.0.0",
+        "is-obj": "^1.0.1",
+        "is-regexp": "^1.0.0"
+      }
+    },
+    "strip-comments": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/strip-comments/-/strip-comments-1.0.2.tgz",
+      "integrity": "sha512-kL97alc47hoyIQSV165tTt9rG5dn4w1dNnBhOQ3bOU1Nc1hel09jnXANaHJ7vzHLd4Ju8kseDGzlev96pghLFw==",
+      "dev": true,
+      "requires": {
+        "babel-extract-comments": "^1.0.0",
+        "babel-plugin-transform-object-rest-spread": "^6.26.0"
+      }
+    },
+    "supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "requires": {
+        "has-flag": "^3.0.0"
+      }
+    },
+    "tslib": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.0.tgz",
+      "integrity": "sha512-f/qGG2tUkrISBlQZEjEqoZ3B2+npJjIf04H1wuAv9iA8i04Icp+61KRXxFdha22670NJopsZCIjhC3SnjPRKrQ==",
+      "dev": true
+    },
+    "tslint": {
+      "version": "5.20.1",
+      "resolved": "https://registry.npmjs.org/tslint/-/tslint-5.20.1.tgz",
+      "integrity": "sha512-EcMxhzCFt8k+/UP5r8waCf/lzmeSyVlqxqMEDQE7rWYiQky8KpIBz1JAoYXfROHrPZ1XXd43q8yQnULOLiBRQg==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "builtin-modules": "^1.1.1",
+        "chalk": "^2.3.0",
+        "commander": "^2.12.1",
+        "diff": "^4.0.1",
+        "glob": "^7.1.1",
+        "js-yaml": "^3.13.1",
+        "minimatch": "^3.0.4",
+        "mkdirp": "^0.5.1",
+        "resolve": "^1.3.2",
+        "semver": "^5.3.0",
+        "tslib": "^1.8.0",
+        "tsutils": "^2.29.0"
+      },
+      "dependencies": {
+        "tsutils": {
+          "version": "2.29.0",
+          "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz",
+          "integrity": "sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA==",
+          "dev": true,
+          "requires": {
+            "tslib": "^1.8.1"
+          }
+        }
+      }
+    },
+    "tslint-eslint-rules": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/tslint-eslint-rules/-/tslint-eslint-rules-5.4.0.tgz",
+      "integrity": "sha512-WlSXE+J2vY/VPgIcqQuijMQiel+UtmXS+4nvK4ZzlDiqBfXse8FAvkNnTcYhnQyOTW5KFM+uRRGXxYhFpuBc6w==",
+      "dev": true,
+      "requires": {
+        "doctrine": "0.7.2",
+        "tslib": "1.9.0",
+        "tsutils": "^3.0.0"
+      }
+    },
+    "tslint-ionic-rules": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/tslint-ionic-rules/-/tslint-ionic-rules-0.0.21.tgz",
+      "integrity": "sha512-F3iio3oYcy5LTH9cA6Xz6yrSOX/H8Twz00bWXZo9hyfmE7ZQgmNb6IHh1pK6cRtiToec+S99PDJlLvxlmr+hSw==",
+      "dev": true,
+      "requires": {
+        "@types/node": "^10.9.4",
+        "tslint-eslint-rules": "^5.3.1"
+      }
+    },
+    "tslint-stencil": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tslint-stencil/-/tslint-stencil-1.0.1.tgz",
+      "integrity": "sha512-PbjqOiHCOf8/HBxk3xwMTFy1722dqT6/ybS8RAvf+l8C6rje3FsZ/+cPYSeRGuUe3DS2DmuqtQ+6acro5yb1Kw==",
+      "dev": true
+    },
+    "tsutils": {
+      "version": "3.17.1",
+      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.17.1.tgz",
+      "integrity": "sha512-kzeQ5B8H3w60nFY2g8cJIuH7JDpsALXySGtwGJ0p2LSjLgay3NdIpqq5SoOBe46bKDW2iq25irHCr8wjomUS2g==",
+      "dev": true,
+      "requires": {
+        "tslib": "^1.8.1"
+      }
+    },
+    "typescript": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.2.tgz",
+      "integrity": "sha512-ml7V7JfiN2Xwvcer+XAf2csGO1bPBdRbFCkYBczNZggrBZ9c7G3riSUeJmqEU5uOtXNPMhE3n+R4FA/3YOAWOQ==",
+      "dev": true
+    },
+    "universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "dev": true
+    },
+    "workbox-background-sync": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-background-sync/-/workbox-background-sync-4.3.1.tgz",
+      "integrity": "sha512-1uFkvU8JXi7L7fCHVBEEnc3asPpiAL33kO495UMcD5+arew9IbKW2rV5lpzhoWcm/qhGB89YfO4PmB/0hQwPRg==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "^4.3.1"
+      }
+    },
+    "workbox-broadcast-update": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-broadcast-update/-/workbox-broadcast-update-4.3.1.tgz",
+      "integrity": "sha512-MTSfgzIljpKLTBPROo4IpKjESD86pPFlZwlvVG32Kb70hW+aob4Jxpblud8EhNb1/L5m43DUM4q7C+W6eQMMbA==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "^4.3.1"
+      }
+    },
+    "workbox-build": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-build/-/workbox-build-4.3.1.tgz",
+      "integrity": "sha512-UHdwrN3FrDvicM3AqJS/J07X0KXj67R8Cg0waq1MKEOqzo89ap6zh6LmaLnRAjpB+bDIz+7OlPye9iii9KBnxw==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.3.4",
+        "@hapi/joi": "^15.0.0",
+        "common-tags": "^1.8.0",
+        "fs-extra": "^4.0.2",
+        "glob": "^7.1.3",
+        "lodash.template": "^4.4.0",
+        "pretty-bytes": "^5.1.0",
+        "stringify-object": "^3.3.0",
+        "strip-comments": "^1.0.2",
+        "workbox-background-sync": "^4.3.1",
+        "workbox-broadcast-update": "^4.3.1",
+        "workbox-cacheable-response": "^4.3.1",
+        "workbox-core": "^4.3.1",
+        "workbox-expiration": "^4.3.1",
+        "workbox-google-analytics": "^4.3.1",
+        "workbox-navigation-preload": "^4.3.1",
+        "workbox-precaching": "^4.3.1",
+        "workbox-range-requests": "^4.3.1",
+        "workbox-routing": "^4.3.1",
+        "workbox-strategies": "^4.3.1",
+        "workbox-streams": "^4.3.1",
+        "workbox-sw": "^4.3.1",
+        "workbox-window": "^4.3.1"
+      }
+    },
+    "workbox-cacheable-response": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-cacheable-response/-/workbox-cacheable-response-4.3.1.tgz",
+      "integrity": "sha512-Rp5qlzm6z8IOvnQNkCdO9qrDgDpoPNguovs0H8C+wswLuPgSzSp9p2afb5maUt9R1uTIwOXrVQMmPfPypv+npw==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "^4.3.1"
+      }
+    },
+    "workbox-core": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-core/-/workbox-core-4.3.1.tgz",
+      "integrity": "sha512-I3C9jlLmMKPxAC1t0ExCq+QoAMd0vAAHULEgRZ7kieCdUd919n53WC0AfvokHNwqRhGn+tIIj7vcb5duCjs2Kg==",
+      "dev": true
+    },
+    "workbox-expiration": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-expiration/-/workbox-expiration-4.3.1.tgz",
+      "integrity": "sha512-vsJLhgQsQouv9m0rpbXubT5jw0jMQdjpkum0uT+d9tTwhXcEZks7qLfQ9dGSaufTD2eimxbUOJfWLbNQpIDMPw==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "^4.3.1"
+      }
+    },
+    "workbox-google-analytics": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-google-analytics/-/workbox-google-analytics-4.3.1.tgz",
+      "integrity": "sha512-xzCjAoKuOb55CBSwQrbyWBKqp35yg1vw9ohIlU2wTy06ZrYfJ8rKochb1MSGlnoBfXGWss3UPzxR5QL5guIFdg==",
+      "dev": true,
+      "requires": {
+        "workbox-background-sync": "^4.3.1",
+        "workbox-core": "^4.3.1",
+        "workbox-routing": "^4.3.1",
+        "workbox-strategies": "^4.3.1"
+      }
+    },
+    "workbox-navigation-preload": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-navigation-preload/-/workbox-navigation-preload-4.3.1.tgz",
+      "integrity": "sha512-K076n3oFHYp16/C+F8CwrRqD25GitA6Rkd6+qAmLmMv1QHPI2jfDwYqrytOfKfYq42bYtW8Pr21ejZX7GvALOw==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "^4.3.1"
+      }
+    },
+    "workbox-precaching": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-precaching/-/workbox-precaching-4.3.1.tgz",
+      "integrity": "sha512-piSg/2csPoIi/vPpp48t1q5JLYjMkmg5gsXBQkh/QYapCdVwwmKlU9mHdmy52KsDGIjVaqEUMFvEzn2LRaigqQ==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "^4.3.1"
+      }
+    },
+    "workbox-range-requests": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-range-requests/-/workbox-range-requests-4.3.1.tgz",
+      "integrity": "sha512-S+HhL9+iTFypJZ/yQSl/x2Bf5pWnbXdd3j57xnb0V60FW1LVn9LRZkPtneODklzYuFZv7qK6riZ5BNyc0R0jZA==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "^4.3.1"
+      }
+    },
+    "workbox-routing": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-routing/-/workbox-routing-4.3.1.tgz",
+      "integrity": "sha512-FkbtrODA4Imsi0p7TW9u9MXuQ5P4pVs1sWHK4dJMMChVROsbEltuE79fBoIk/BCztvOJ7yUpErMKa4z3uQLX+g==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "^4.3.1"
+      }
+    },
+    "workbox-strategies": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-4.3.1.tgz",
+      "integrity": "sha512-F/+E57BmVG8dX6dCCopBlkDvvhg/zj6VDs0PigYwSN23L8hseSRwljrceU2WzTvk/+BSYICsWmRq5qHS2UYzhw==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "^4.3.1"
+      }
+    },
+    "workbox-streams": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-streams/-/workbox-streams-4.3.1.tgz",
+      "integrity": "sha512-4Kisis1f/y0ihf4l3u/+ndMkJkIT4/6UOacU3A4BwZSAC9pQ9vSvJpIi/WFGQRH/uPXvuVjF5c2RfIPQFSS2uA==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "^4.3.1"
+      }
+    },
+    "workbox-sw": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-sw/-/workbox-sw-4.3.1.tgz",
+      "integrity": "sha512-0jXdusCL2uC5gM3yYFT6QMBzKfBr2XTk0g5TPAV4y8IZDyVNDyj1a8uSXy3/XrvkVTmQvLN4O5k3JawGReXr9w==",
+      "dev": true
+    },
+    "workbox-window": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-window/-/workbox-window-4.3.1.tgz",
+      "integrity": "sha512-C5gWKh6I58w3GeSc0wp2Ne+rqVw8qwcmZnQGpjiek8A2wpbxSJb1FdCoQVO+jDJs35bFgo/WETgl1fqgsxN0Hg==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "^4.3.1"
+      }
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+      "dev": true
+    }
+  }
+}
--- a/package.json
+++ b/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "shoelace",
+  "version": "0.0.1",
+  "description": "Stencil Component Starter",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "es2015": "dist/esm/index.mjs",
+  "es2017": "dist/esm/index.mjs",
+  "types": "dist/types/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/shoelace/shoelace.js",
+  "files": [
+    "dist/",
+    "loader/"
+  ],
+  "scripts": {
+    "build": "stencil build --docs",
+    "start": "stencil build --dev --watch --serve",
+    "test": "stencil test --spec --e2e",
+    "test.watch": "stencil test --spec --e2e --watchAll",
+    "generate": "stencil generate"
+  },
+  "devDependencies": {
+    "@stencil/core": "^1.8.3",
+    "@stencil/sass": "^1.1.1",
+    "tslint": "^5.20.1",
+    "tslint-ionic-rules": "0.0.21",
+    "tslint-stencil": "^1.0.1",
+    "workbox-build": "4.3.1"
+  },
+  "license": "MIT",
+  "dependencies": {}
+}
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -0,0 +1,17 @@
+module.exports = {
+  arrowParens: 'avoid',
+  bracketSpacing: true,
+  htmlWhitespaceSensitivity: 'css',
+  insertPragma: false,
+  jsxBracketSameLine: false,
+  jsxSingleQuote: false,
+  printWidth: 120,
+  proseWrap: 'preserve',
+  quoteProps: 'as-needed',
+  requirePragma: false,
+  semi: true,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'none',
+  useTabs: false
+};
--- a/src/assets/images/favicon.png
+++ b/src/assets/images/favicon.png
--- a/src/assets/images/logo.svg
+++ b/src/assets/images/logo.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="127px" height="141px" viewBox="0 0 127 141" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>logo</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="logo" fill-rule="nonzero" fill="#08d">
+            <path d="M102.375,90.85 C102.979,90.557 103.57,90.215 104.15,89.826 L106.425,88.501 C106.848,88.19 107.64,87.573 108.8,86.65 L108.95,86.501 C109.883,85.567 110.916,85.117 112.05,85.15 C112.55,85.15 113.133,85.284 113.8,85.55 L122.3,78 C122.533,77.8 122.767,77.633 123,77.5 L123.05,77.5 C123.95,76.967 124.7,77 125.3,77.6 C126.367,78.166 126.45,79.133 125.55,80.5 L116.65,88.399 C116.717,88.533 116.75,88.666 116.75,88.799 C116.883,89.399 116.833,89.999 116.6,90.599 C116.4,90.999 116.117,91.382 115.75,91.749 C115.379,92.145 114.996,92.528 114.6,92.898 L109.45,96.648 C108.99,96.97 108.523,97.27 108.05,97.548 C107.46,97.906 106.86,98.232 106.25,98.523 C105.985,98.644 105.718,98.76 105.45,98.874 C103.841,99.559 102.174,100.017 100.45,100.249 C99.65,106.982 97.35,113.183 93.55,118.849 C88.75,125.915 82.183,131.299 73.85,134.999 C65.55,138.699 56.567,140.549 46.9,140.549 C33.567,140.415 22.75,137.415 14.45,131.549 C4.817,124.75 0,115.7 0,104.399 L0,102.849 C0.333,95.149 2.6,87.849 6.8,80.95 C10.933,74.116 16.983,69.5 24.95,67.1 C29.05,65.9 33.166,65.3 37.3,65.3 C41.567,65.3 45.967,66.083 50.5,67.65 C55.033,69.216 60.15,71.916 65.85,75.75 L80.7,85.7 C84.833,88.399 88.6,90.233 92,91.2 C91.3,84.3 88.8,78.399 84.5,73.5 C80.2,68.533 74.717,64.9 68.05,62.6 L61.65,60.4 C55.783,58.333 51.417,56.3 48.55,54.3 C40.817,49.067 36.517,41.883 35.65,32.75 L35.5,30.05 C35.5,21.25 39.067,13.883 46.2,7.95 C52.567,2.65 60.133,0 68.9,0 C75.5,0 81.417,1.9 86.65,5.7 C91.917,9.533 94.9,14.967 95.6,22 L95.75,24.75 C95.75,29.85 94.433,34.216 91.8,37.85 C89.1,41.483 86.717,43.3 84.65,43.3 C84.21,43.269 83.802,43.21 83.425,43.125 L74.1,51.9 C72.6,52.733 71.583,52.583 71.05,51.45 C70.517,50.85 70.567,50.1 71.2,49.2 L71.25,49.15 C71.383,48.95 71.567,48.733 71.8,48.5 L80.475,40.275 C80.376,39.872 80.318,39.431 80.3,38.95 C80.3,37.817 80.75,36.867 81.65,36.1 C85.45,32.7 87.35,28.784 87.35,24.35 C87.35,19.95 85.683,16.25 82.35,13.25 C79.017,10.25 74.467,8.716 68.7,8.65 C61.5,8.65 55.583,10.817 50.95,15.15 C46.317,19.483 44,24.683 44,30.75 C44,35.65 45.883,40.066 49.65,44 C53.383,47.9 59.15,50.966 66.95,53.2 C77.883,56.367 86.233,61.7 92,69.2 C97.133,75.833 100,83.283 100.6,91.55 C101.199,91.365 101.791,91.132 102.375,90.85 Z M71.95,49.05 C71.95,49.35 72.117,49.5 72.45,49.5 C72.483,49.5 75.117,47.066 80.35,42.2 C80.35,41.533 78.95,42.45 76.15,44.95 C73.35,47.483 71.95,48.85 71.95,49.05 Z M74.15,50.8 C74.15,50.533 74.017,50.4 73.75,50.4 C73.45,50.4 73.183,50.55 72.95,50.85 C72.416,50.817 72.033,50.884 71.8,51.05 C71.7,51.117 71.65,51.183 71.65,51.25 C71.65,51.45 71.783,51.6 72.05,51.7 L72.95,51.7 C73.75,51.4 74.15,51.1 74.15,50.8 Z M80.35,45.35 C80.35,44.583 79.9,44.583 79,45.35 C78.567,45.75 78.017,46.317 77.35,47.05 C77.117,47.217 76.633,47.667 75.9,48.4 C75.133,49.2 74.75,49.683 74.75,49.85 L74.8,50.2 C75,50.267 75.133,50.3 75.2,50.3 C75.233,50.3 76.1,49.5 77.8,47.9 C79.5,46.3 80.35,45.45 80.35,45.35 Z M124.2,78.3 L115.8,85.7 C116.3,85.967 116.667,86.349 116.9,86.849 L125.2,79.45 C125.266,79.116 125.217,78.849 125.05,78.649 C124.883,78.517 124.6,78.399 124.2,78.3 Z M123.75,78.05 L123.55,77.85 L116.15,83.85 L116.6,84.4 L123.75,78.05 Z M91.85,99.899 C89.65,99.333 87.617,98.649 85.75,97.849 C81.55,96.149 76.333,93.183 70.1,88.95 L59.85,82 C55.517,79.233 51.567,77.166 48,75.8 C44.4,74.467 40.867,73.8 37.4,73.8 L35.9,73.8 C27.067,74.267 20.2,77.583 15.3,83.75 C10.734,89.45 8.45,96.184 8.45,103.95 C8.45,112.683 11.95,119.516 18.95,124.45 C25.916,129.416 35.467,131.899 47.6,131.899 C57.133,131.899 65.166,130.2 71.7,126.799 C78.2,123.399 83.25,118.899 86.85,113.299 C89.55,109.033 91.217,104.566 91.85,99.899 Z" id="Shape"></path>
+        </g>
+    </g>
+</svg>
--- a/src/assets/images/wordmark.svg
+++ b/src/assets/images/wordmark.svg
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -0,0 +1,98 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+
+
+import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
+
+
+export namespace Components {
+  interface SButton {
+    /**
+    * Set to true to draw a circle button.
+    */
+    'circle': boolean;
+    /**
+    * Set to true to disable the button
+    */
+    'disabled': boolean;
+    /**
+    * Set to true to draw an outlined button.
+    */
+    'outline': boolean;
+    /**
+    * Set to true to draw a rounded button.
+    */
+    'round': boolean;
+    /**
+    * The button's size, one of `small`, `medium`, or `large`.
+    */
+    'size': string;
+    /**
+    * The button's type, one of `default`, `primary`, `success`, `info`, `warning`, `danger`, or `text`.
+    */
+    'type': string;
+  }
+}
+
+declare global {
+
+
+  interface HTMLSButtonElement extends Components.SButton, HTMLStencilElement {}
+  var HTMLSButtonElement: {
+    prototype: HTMLSButtonElement;
+    new (): HTMLSButtonElement;
+  };
+  interface HTMLElementTagNameMap {
+    's-button': HTMLSButtonElement;
+  }
+}
+
+declare namespace LocalJSX {
+  interface SButton {
+    /**
+    * Set to true to draw a circle button.
+    */
+    'circle'?: boolean;
+    /**
+    * Set to true to disable the button
+    */
+    'disabled'?: boolean;
+    /**
+    * Set to true to draw an outlined button.
+    */
+    'outline'?: boolean;
+    /**
+    * Set to true to draw a rounded button.
+    */
+    'round'?: boolean;
+    /**
+    * The button's size, one of `small`, `medium`, or `large`.
+    */
+    'size'?: string;
+    /**
+    * The button's type, one of `default`, `primary`, `success`, `info`, `warning`, `danger`, or `text`.
+    */
+    'type'?: string;
+  }
+
+  interface IntrinsicElements {
+    's-button': SButton;
+  }
+}
+
+export { LocalJSX as JSX };
+
+
+declare module "@stencil/core" {
+  export namespace JSX {
+    interface IntrinsicElements {
+      's-button': LocalJSX.SButton & JSXBase.HTMLAttributes<HTMLSButtonElement>;
+    }
+  }
+}
+
+
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -0,0 +1,214 @@
+@import 'variables';
+@import './mixins';
+
+$button-font-family: $font-sans-serif !default;
+$button-font-weight: 500 !default;
+$button-font-size-sm: 12px !default;
+$button-font-size-md: 14px !default;
+$button-font-size-lg: 16px !default;
+
+$button-height-sm: $input-height-sm !default;
+$button-height-md: $input-height-md !default;
+$button-height-lg: $input-height-lg !default;
+
+$button-border-width-sm: 1px !default;
+$button-border-width-md: 1px !default;
+$button-border-width-lg: 1px !default;
+
+$button-border-radius-sm: 4px !default;
+$button-border-radius-md: 4px !default;
+$button-border-radius-lg: 4px !default;
+
+$button-padding-x-sm: 14px !default;
+$button-padding-x-md: 20px !default;
+$button-padding-x-lg: 26px !default;
+
+$button-transition-speed: 100ms !default;
+
+:host {
+  display: inline-block;
+}
+
+// Standard buttons
+.s-button:not(.s-button--outline) {
+  &.s-button--default {
+    @include button(
+      $color: $color-gray-40,
+      $background-color: $color-white,
+      $border-color: $color-gray-80,
+      $color--hover: tint($color-primary, 20%),
+      $background-color--hover: tint($color-primary, 90%),
+      $border-color--hover: tint($color-primary, 60%),
+      $color--focus: tint($color-primary, 20%),
+      $background-color--focus: tint($color-primary, 90%),
+      $border-color--focus: tint($color-primary, 60%),
+      $color--active: $color-primary,
+      $background-color--active: tint($color-primary, 90%),
+      $border-color--active: $color-primary
+    );
+  }
+
+  &.s-button--primary {
+    @include button-solid($color-white, $color-primary);
+  }
+
+  &.s-button--success {
+    @include button-solid($color-white, $color-success);
+  }
+
+  &.s-button--info {
+    @include button-solid($color-white, $color-info);
+  }
+
+  &.s-button--warning {
+    @include button-solid($color-white, $color-warning);
+  }
+
+  &.s-button--danger {
+    @include button-solid($color-white, $color-danger);
+  }
+}
+
+// Outline buttons
+.s-button.s-button--outline {
+  &.s-button--default {
+    @include button(
+      $color: $color-gray-40,
+      $background-color: $color-white,
+      $border-color: $color-gray-80,
+      $color--hover: tint($color-primary, 20%),
+      $background-color--hover: $color-white,
+      $border-color--hover: tint($color-primary, 20%),
+      $color--focus: tint($color-primary, 20%),
+      $background-color--focus: $color-white,
+      $border-color--focus: tint($color-primary, 20%),
+      $color--active: $color-primary,
+      $background-color--active: $color-white,
+      $border-color--active: $color-primary
+    );
+  }
+
+  &.s-button--primary {
+    @include button-outline($color-white, $color-primary);
+  }
+
+  &.s-button--success {
+    @include button-outline($color-white, $color-success);
+  }
+
+  &.s-button--info {
+    @include button-outline($color-white, $color-info);
+  }
+
+  &.s-button--warning {
+    @include button-outline($color-white, $color-warning);
+  }
+
+  &.s-button--danger {
+    @include button-outline($color-white, $color-danger);
+  }
+}
+
+// Text buttons
+.s-button--text {
+  @include button(
+    $color: $color-gray-20,
+    $background-color: transparent,
+    $border-color: transparent,
+    $color--hover: $color-gray-40,
+    $background-color--hover: transparent,
+    $border-color--hover: transparent,
+    $color--focus: $color-gray-40,
+    $background-color--focus: transparent,
+    $border-color--focus: transparent,
+    $color--active: $color-gray-10,
+    $background-color--active: transparent,
+    $border-color--active: transparent
+  );
+}
+
+// Size modifiers
+.s-button--small {
+  font-size: $button-font-size-sm;
+  height: $button-height-sm;
+  line-height: $button-height-sm - 2px; // top + bottom border
+  border-radius: $button-border-radius-sm;
+  padding: 0 $button-padding-x-sm;
+}
+
+.s-button--medium {
+  font-size: $button-font-size-md;
+  height: $button-height-md;
+  line-height: $button-height-md - 2px; // top + bottom border
+  border-radius: $button-border-radius-md;
+  padding: 0 $button-padding-x-md;
+}
+
+.s-button--large {
+  font-size: $button-font-size-lg;
+  height: $button-height-lg;
+  line-height: $button-height-lg - 2px; // top + bottom border
+  border-radius: $button-border-radius-lg;
+  padding: 0 $button-padding-x-lg;
+}
+
+// Round modifier
+.s-button--round {
+  &.s-button--small {
+    border-radius: $button-height-sm;
+  }
+
+  &.s-button--medium {
+    border-radius: $button-height-md;
+  }
+
+  &.s-button--large {
+    border-radius: $button-height-lg;
+  }
+}
+
+// Circle modifier
+.s-button--circle {
+  padding-left: 0;
+  padding-right: 0;
+
+  &.s-button--small {
+    width: $button-height-sm;
+    border-radius: 50%;
+  }
+
+  &.s-button--medium {
+    width: $button-height-md;
+    border-radius: 50%;
+  }
+
+  &.s-button--large {
+    width: $button-height-lg;
+    border-radius: 50%;
+  }
+
+  .s-button__prefix,
+  .s-button__suffix {
+    display: none;
+  }
+}
+
+// Slots
+.s-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .s-button__prefix:empty,
+  .s-button__suffix:empty {
+    display: none;
+  }
+
+  .s-button__prefix:not(:empty) {
+    margin-right: 0.25em;
+  }
+
+  .s-button__suffix:not(:empty) {
+    margin-left: 0.25em;
+  }
+}
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -0,0 +1,67 @@
+import { Component, Prop, h } from '@stencil/core';
+
+@Component({
+  tag: 's-button',
+  styleUrl: 'button.scss',
+  scoped: true,
+  shadow: false
+})
+export class ShoelaceButton {
+  /** The button's type, one of `default`, `primary`, `success`, `info`, `warning`, `danger`, or `text`. */
+  @Prop() type = 'default';
+
+  /** The button's size, one of `small`, `medium`, or `large`. */
+  @Prop() size = 'medium';
+
+  /** Set to true to draw an outlined button. */
+  @Prop() outline = false;
+
+  /** Set to true to draw a rounded button. */
+  @Prop() round = false;
+
+  /** Set to true to draw a circle button. */
+  @Prop() circle = false;
+
+  /** Set to true to disable the button */
+  @Prop() disabled = false;
+
+  render() {
+    return (
+      <button
+        class={{
+          's-button': true,
+
+          // Types
+          's-button--default': this.type === 'default',
+          's-button--primary': this.type === 'primary',
+          's-button--success': this.type === 'success',
+          's-button--info': this.type === 'info',
+          's-button--warning': this.type === 'warning',
+          's-button--danger': this.type === 'danger',
+          's-button--text': this.type === 'text',
+
+          // Sizes
+          's-button--small': this.size === 'small',
+          's-button--medium': this.size === 'medium',
+          's-button--large': this.size === 'large',
+
+          // Modifiers
+          's-button--outline': this.outline,
+          's-button--round': this.round,
+          's-button--circle': this.circle
+        }}
+        disabled={this.disabled}
+      >
+        <span class="s-button__prefix">
+          <slot name="prefix" />
+        </span>
+        <span class="s-button__label">
+          <slot />
+        </span>
+        <span class="s-button__suffix">
+          <slot name="suffix" />
+        </span>
+      </button>
+    );
+  }
+}
--- a/src/components/button/mixins.scss
+++ b/src/components/button/mixins.scss
@@ -0,0 +1,84 @@
+// Generates button styles
+@mixin button(
+  $color,
+  $background-color,
+  $border-color,
+  $color--hover,
+  $background-color--hover,
+  $border-color--hover,
+  $color--focus,
+  $background-color--focus,
+  $border-color--focus,
+  $color--active,
+  $background-color--active,
+  $border-color--active
+) {
+  display: inline-block;
+  font-family: $button-font-family;
+  font-weight: $button-font-weight;
+  color: $color;
+  background-color: $background-color;
+  border: solid 1px $border-color;
+  transition: $button-transition-speed background-color, $button-transition-speed color, $button-transition-speed border;
+  cursor: pointer;
+
+  &:hover:not(:disabled) {
+    background-color: $background-color--hover;
+    border-color: $border-color--hover;
+    color: $color--hover;
+  }
+
+  &:focus:not(:disabled) {
+    background-color: $background-color--focus;
+    border-color: $border-color--focus;
+    color: $color--focus;
+    outline: none;
+  }
+
+  &:active:not(:disabled) {
+    background-color: $background-color--active;
+    border-color: $border-color--active;
+    color: $color--active;
+  }
+
+  &[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+// Shortcut mixin for solid buttons
+@mixin button-solid($color, $background-color) {
+  @include button(
+    $color: $color,
+    $background-color: $background-color,
+    $border-color: $background-color,
+    $color--hover: $color,
+    $background-color--hover: tint($background-color, 15%),
+    $border-color--hover: tint($background-color, 15%),
+    $color--focus: $color,
+    $background-color--focus: tint($background-color, 15%),
+    $border-color--focus: tint($background-color, 15%),
+    $color--active: $color,
+    $background-color--active: shade($background-color, 15%),
+    $border-color--active: shade($background-color, 15%)
+  );
+}
+
+// Shortcut mixin for outline buttons
+@mixin button-outline($color, $background-color) {
+  @include button(
+    $color: $background-color,
+    $background-color: tint($background-color, 90%),
+    $border-color: tint($background-color, 60%),
+    $color--hover: $color,
+    $background-color--hover: $background-color,
+    $border-color--hover: $background-color,
+    $color--focus: $color,
+    $background-color--focus: $background-color,
+    $border-color--focus: $background-color,
+    $color--active: $color,
+    $background-color--active: shade($background-color, 15%),
+    $border-color--active: shade($background-color, 15%)
+  );
+}
--- a/src/components/button/readme.md
+++ b/src/components/button/readme.md
@@ -0,0 +1,19 @@
+# sl-button
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description     | Type     | Default     |
+| -------- | --------- | --------------- | -------- | ----------- |
+| `first`  | `first`   | The first name  | `string` | `undefined` |
+| `last`   | `last`    | The last name   | `string` | `undefined` |
+| `middle` | `middle`  | The middle name | `string` | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
--- a/src/index.html
+++ b/src/index.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+    <meta name="description" content="For when you don’t need the whole boot." />
+    <title>Shoelace: A forward-thinking component library built with Web Components</title>
+    <link rel="icon" href="/assets/images/favicon.png" />
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
+    <script type="module" src="/build/shoelace.esm.js"></script>
+    <script nomodule src="/build/shoelace.js"></script>
+
+    <style>
+      html,
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+          'Helvetica Neue', sans-serif;
+        font-size: 16px;
+      }
+
+      h1 img {
+        display: block;
+        max-width: 20rem;
+        margin: 2rem auto;
+      }
+    </style>
+  </head>
+  <body>
+    <s-button type="default">Default</s-button>
+    <s-button type="primary">Primary</s-button>
+    <s-button type="success">Success</s-button>
+    <s-button type="info">Info</s-button>
+    <s-button type="warning">Warning</s-button>
+    <s-button type="danger">Danger</s-button>
+
+    <br /><br />
+
+    <s-button type="default" outline>Default</s-button>
+    <s-button type="primary" outline>Primary</s-button>
+    <s-button type="success" outline>Success</s-button>
+    <s-button type="info" outline>Info</s-button>
+    <s-button type="warning" outline>Warning</s-button>
+    <s-button type="danger" outline>Danger</s-button>
+
+    <br /><br />
+
+    <s-button type="default" round>Default</s-button>
+    <s-button type="primary" round>Primary</s-button>
+    <s-button type="success" round>Success</s-button>
+    <s-button type="info" round>Info</s-button>
+    <s-button type="warning" round>Warning</s-button>
+    <s-button type="danger" round>Danger</s-button>
+
+    <br /><br />
+
+    <s-button type="default" round outline>Default</s-button>
+    <s-button type="primary" round outline>Primary</s-button>
+    <s-button type="success" round outline>Success</s-button>
+    <s-button type="info" round outline>Info</s-button>
+    <s-button type="warning" round outline>Warning</s-button>
+    <s-button type="danger" round outline>Danger</s-button>
+
+    <br /><br />
+
+    <s-button type="text">Text</s-button>
+    <s-button type="text" disabled>Text</s-button>
+
+    <br /><br />
+
+    <s-button size="small">Small</s-button>
+    <s-button size="medium">Medium</s-button>
+    <s-button size="large">Large</s-button>
+
+    <br /><br />
+
+    <s-button type="primary" round outline size="small">Primary</s-button>
+    <s-button type="primary" round outline size="medium">Primary</s-button>
+    <s-button type="primary" round outline size="large">Primary</s-button>
+
+    <br /><br />
+
+    <s-button type="default" size="small">
+      <span slot="prefix"><i class="fa fa-gear"></i></span>
+      Default
+      <span slot="suffix"><i class="fa fa-caret-down"></i></span>
+    </s-button>
+
+    <s-button type="default" size="medium">
+      <span slot="prefix"><i class="fa fa-gear"></i></span>
+      Default
+      <span slot="suffix"><i class="fa fa-caret-down"></i></span>
+    </s-button>
+
+    <s-button type="default" size="large">
+      <span slot="prefix"><i class="fa fa-gear"></i></span>
+      Default
+      <span slot="suffix"><i class="fa fa-caret-down"></i></span>
+    </s-button>
+
+    <br /><br />
+
+    <s-button type="default" size="small" circle>
+      <i class="fa fa-pencil"></i>
+    </s-button>
+
+    <s-button type="default" size="medium" circle>
+      <i class="fa fa-pencil"></i>
+    </s-button>
+
+    <s-button type="default" size="large" circle>
+      <i class="fa fa-pencil"></i>
+    </s-button>
+
+    <br /><br />
+
+    <s-button type="primary" size="small" circle>
+      <i class="fa fa-search"></i>
+    </s-button>
+
+    <s-button type="primary" size="medium" circle>
+      <i class="fa fa-search"></i>
+    </s-button>
+
+    <s-button type="primary" size="large" circle>
+      <i class="fa fa-search"></i>
+    </s-button>
+  </body>
+</html>
--- a/src/index.ts
+++ b/src/index.ts
@@ -0,0 +1 @@
+export * from './components';
--- a/src/styles/functions.scss
+++ b/src/styles/functions.scss
@@ -0,0 +1,18 @@
+// Slightly lighten a color
+@function tint($color, $percentage) {
+  @return mix(white, $color, $percentage);
+}
+
+// Slightly darken a color
+@function shade($color, $percentage) {
+  @return mix(black, $color, $percentage);
+}
+
+// Returns the optimal text color based on the background color
+@function bestTextColor($backgroundColor, $dark: #000, $light: #fff) {
+  @if (lightness($backgroundColor) > 50) {
+    @return $dark;
+  } @else {
+    @return $light;
+  }
+}
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -0,0 +1,38 @@
+@import 'functions';
+
+// Colors
+$color-primary: #409eff !default;
+$color-success: #67c23a !default;
+$color-info: #909399 !default;
+$color-warning: #e6a23c !default;
+$color-danger: #f56c6c !default;
+$color-white: #fff !default;
+$color-black: #00070b !default;
+
+$color-gray-10: tint($color-black, 10%) !default;
+$color-gray-20: tint($color-black, 20%) !default;
+$color-gray-30: tint($color-black, 30%) !default;
+$color-gray-40: tint($color-black, 40%) !default;
+$color-gray-50: tint($color-black, 50%) !default;
+$color-gray-60: tint($color-black, 60%) !default;
+$color-gray-70: tint($color-black, 70%) !default;
+$color-gray-80: tint($color-black, 80%) !default;
+$color-gray-90: tint($color-black, 90%) !default;
+
+// Fonts
+$font-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+  'Helvetica Neue', sans-serif !default;
+$font-serif: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif !default;
+$font-monospace: Menlo, Monaco, Courier New, monospace !default;
+$font-size: 16px !default;
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-bold: 500 !default;
+
+$text-color-primary: $color-gray-20;
+$text-color-secondary: $color-gray-60 !default;
+
+// Inputs
+$input-height-sm: 32px !default;
+$input-height-md: 38px !default;
+$input-height-lg: 44px !default;
--- a/stencil.config.ts
+++ b/stencil.config.ts
@@ -0,0 +1,24 @@
+import { Config } from '@stencil/core';
+import { sass } from '@stencil/sass';
+
+export const config: Config = {
+  namespace: 'shoelace',
+  outputTargets: [
+    {
+      type: 'dist',
+      esmLoaderPath: '../loader'
+    },
+    {
+      type: 'docs-readme'
+    },
+    {
+      type: 'www',
+      serviceWorker: undefined // disable service workers
+    }
+  ],
+  plugins: [
+    sass({
+      includePaths: ['./node_modules', './src/styles']
+    })
+  ]
+};
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "allowUnreachableCode": false,
+    "declaration": false,
+    "experimentalDecorators": true,
+    "lib": [
+      "dom",
+      "es2017",
+      "dom",
+      "dom.iterable"
+    ],
+    "moduleResolution": "node",
+    "module": "esnext",
+    "target": "es2017",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "jsx": "react",
+    "jsxFactory": "h"
+  },
+  "include": [
+    "src",
+    "types/jsx.d.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
--- a/tslint.json
+++ b/tslint.json
@@ -0,0 +1,34 @@
+{
+  "defaultSeverity": "error",
+  "extends": ["tslint-ionic-rules/strict", "tslint-stencil/default"],
+  "linterOptions": {
+    "exclude": ["**/*.spec.ts", "**/*.spec.tsx"]
+  },
+  "jsRules": {},
+  "rules": {
+    "component-member-order": [
+      true,
+      {
+        "order": [
+          "own-prop",
+          "element",
+          "state",
+          "watched-state",
+          "internal-prop",
+          "prop",
+          "watched-prop",
+          "event",
+          "lifecycle",
+          "listen",
+          "method",
+          "own-method",
+          "stencil-method"
+        ],
+        "alphabetical": false
+      }
+    ],
+    "trailing-comma": false,
+    "no-console": false
+  },
+  "rulesDirectory": []
+}