scu-web-components 0.0.9 → 0.0.10

package/dist/docs/components/ScwCard.json

@@ -531,7 +531,7 @@
     {
       "title": "Colors",
       "description": "",
-      "code": "\n        <scw-stack \n          class=\"scw-gap-2s\">\n          <scw-flex-h\n            class=\"\n              scw-fill-children\n              scw-gap-2s\">\n            <scw-card color=\"primary\">\n              <img \n                src=\"https://media.istockphoto.com/photos/mount-hood-oregon-picture-id1268487061?b=1&k=20&m=1268487061&s=170667a&w=0&h=3fHYwaImlqUETcjCnSV7YO2-PzCFvaX6VSQaiGfWqpc=\"\n                alt=\"img alt text\" />\n              <sup>Category</sup>\n              <h2>Heading</h2>\n              <p>a description</p>\n              <a href=\"https://www.summitcreditunion.com\" target=\"_blank\">\n                Take Action\n              </a>\n            </scw-card>\n            <scw-card color=\"mortgage\">\n              <img \n                src=\"https://media.istockphoto.com/photos/mount-hood-oregon-picture-id1268487061?b=1&k=20&m=1268487061&s=170667a&w=0&h=3fHYwaImlqUETcjCnSV7YO2-PzCFvaX6VSQaiGfWqpc=\"\n                alt=\"img alt text\" />\n              <sup>Category</sup>\n              <h2>Heading</h2>\n              <p>a description</p>\n              <a href=\"https://www.summitcreditunion.com\" target=\"_blank\">\n                Take Action\n              </a>\n            </scw-card>\n            <scw-card color=\"savings\">\n              <img \n                src=\"https://media.istockphoto.com/photos/mount-hood-oregon-picture-id1268487061?b=1&k=20&m=1268487061&s=170667a&w=0&h=3fHYwaImlqUETcjCnSV7YO2-PzCFvaX6VSQaiGfWqpc=\"\n                alt=\"img alt text\" />\n              <sup>Category</sup>\n              <h2>Heading</h2>\n              <p>a description</p>\n              <a href=\"https://www.summitcreditunion.com\" target=\"_blank\">\n                Take Action\n              </a>\n            </scw-card>\n            <scw-card color=\"student\">\n              <img \n                src=\"https://media.istockphoto.com/photos/mount-hood-oregon-picture-id1268487061?b=1&k=20&m=1268487061&s=170667a&w=0&h=3fHYwaImlqUETcjCnSV7YO2-PzCFvaX6VSQaiGfWqpc=\"\n                alt=\"img alt text\" />\n              <sup>Category</sup>\n              <h2>Heading</h2>\n              <p>a description</p>\n              <a href=\"https://www.summitcreditunion.com\" target=\"_blank\">\n                Take Action\n              </a>\n            </scw-card>\n          </scw-flex-h>\n          <scw-flex-h\n            class=\"\n              scw-fill-children\n              scw-gap-2s\">\n            <scw-card color=\"investments\">\n              <img \n                src=\"https://media.istockphoto.com/photos/mount-hood-oregon-picture-id1268487061?b=1&k=20&m=1268487061&s=170667a&w=0&h=3fHYwaImlqUETcjCnSV7YO2-PzCFvaX6VSQaiGfWqpc=\"\n                alt=\"img alt text\" />\n              <sup>Category</sup>\n              <h2>Heading</h2>\n              <p>a description</p>\n              <a href=\"https://www.summitcreditunion.com\" target=\"_blank\">\n                Take Action\n              </a>\n            </scw-card>\n            <scw-card color=\"checking\">\n              <img \n                src=\"https://media.istockphoto.com/photos/mount-hood-oregon-picture-id1268487061?b=1&k=20&m=1268487061&s=170667a&w=0&h=3fHYwaImlqUETcjCnSV7YO2-PzCFvaX6VSQaiGfWqpc=\"\n                alt=\"img alt text\" />\n              <sup>Category</sup>\n              <h2>Heading</h2>\n              <p>a description</p>\n              <a href=\"https://www.summitcreditunion.com\" target=\"_blank\">\n                Take Action\n              </a>\n            </scw-card>\n            <scw-card color=\"checking-purple\">\n              <img \n                src=\"https://media.istockphoto.com/photos/mount-hood-oregon-picture-id1268487061?b=1&k=20&m=1268487061&s=170667a&w=0&h=3fHYwaImlqUETcjCnSV7YO2-PzCFvaX6VSQaiGfWqpc=\"\n                alt=\"img alt text\" />\n              <sup>Category</sup>\n              <h2>Heading</h2>\n              <p>a description</p>\n              <a href=\"https://www.summitcreditunion.com\" target=\"_blank\">\n                Take Action\n              </a>\n            </scw-card>\n            <scw-card color=\"credit-cards\">\n              <img \n                src=\"https://media.istockphoto.com/photos/mount-hood-oregon-picture-id1268487061?b=1&k=20&m=1268487061&s=170667a&w=0&h=3fHYwaImlqUETcjCnSV7YO2-PzCFvaX6VSQaiGfWqpc=\"\n                alt=\"img alt text\" />\n              <sup>Category</sup>\n              <h2>Heading</h2>\n              <p>a description</p>\n              <a href=\"https://www.summitcreditunion.com\" target=\"_blank\">\n                Take Action\n              </a>\n            </scw-card>\n          </scw-flex-h>\n        </scw-stack>"
+      "code": "\n        <scw-stack \n          scw-gap-2s>\n          <scw-flex-h\n            scw-fill-children\n            scw-gap-2s>\n            <scw-card color=\"primary\">\n              <img \n                src=\"https://media.istockphoto.com/photos/mount-hood-oregon-picture-id1268487061?b=1&k=20&m=1268487061&s=170667a&w=0&h=3fHYwaImlqUETcjCnSV7YO2-PzCFvaX6VSQaiGfWqpc=\"\n                alt=\"img alt text\" />\n              <sup>Category</sup>\n              <h2>Heading</h2>\n              <p>a description</p>\n              <a href=\"https://www.summitcreditunion.com\" target=\"_blank\">\n                Take Action\n              </a>\n            </scw-card>\n            <scw-card color=\"mortgage\">\n              <img \n                src=\"https://media.istockphoto.com/photos/mount-hood-oregon-picture-id1268487061?b=1&k=20&m=1268487061&s=170667a&w=0&h=3fHYwaImlqUETcjCnSV7YO2-PzCFvaX6VSQaiGfWqpc=\"\n                alt=\"img alt text\" />\n              <sup>Category</sup>\n              <h2>Heading</h2>\n              <p>a description</p>\n              <a href=\"https://www.summitcreditunion.com\" target=\"_blank\">\n                Take Action\n              </a>\n            </scw-card>\n            <scw-card color=\"savings\">\n              <img \n                src=\"https://media.istockphoto.com/photos/mount-hood-oregon-picture-id1268487061?b=1&k=20&m=1268487061&s=170667a&w=0&h=3fHYwaImlqUETcjCnSV7YO2-PzCFvaX6VSQaiGfWqpc=\"\n                alt=\"img alt text\" />\n              <sup>Category</sup>\n              <h2>Heading</h2>\n              <p>a description</p>\n              <a href=\"https://www.summitcreditunion.com\" target=\"_blank\">\n                Take Action\n              </a>\n            </scw-card>\n            <scw-card color=\"student\">\n              <img \n                src=\"https://media.istockphoto.com/photos/mount-hood-oregon-picture-id1268487061?b=1&k=20&m=1268487061&s=170667a&w=0&h=3fHYwaImlqUETcjCnSV7YO2-PzCFvaX6VSQaiGfWqpc=\"\n                alt=\"img alt text\" />\n              <sup>Category</sup>\n              <h2>Heading</h2>\n              <p>a description</p>\n              <a href=\"https://www.summitcreditunion.com\" target=\"_blank\">\n                Take Action\n              </a>\n            </scw-card>\n          </scw-flex-h>\n          <scw-flex-h\n            scw-fill-children\n            scw-gap-2s>\n            <scw-card color=\"investments\">\n              <img \n                src=\"https://media.istockphoto.com/photos/mount-hood-oregon-picture-id1268487061?b=1&k=20&m=1268487061&s=170667a&w=0&h=3fHYwaImlqUETcjCnSV7YO2-PzCFvaX6VSQaiGfWqpc=\"\n                alt=\"img alt text\" />\n              <sup>Category</sup>\n              <h2>Heading</h2>\n              <p>a description</p>\n              <a href=\"https://www.summitcreditunion.com\" target=\"_blank\">\n                Take Action\n              </a>\n            </scw-card>\n            <scw-card color=\"checking\">\n              <img \n                src=\"https://media.istockphoto.com/photos/mount-hood-oregon-picture-id1268487061?b=1&k=20&m=1268487061&s=170667a&w=0&h=3fHYwaImlqUETcjCnSV7YO2-PzCFvaX6VSQaiGfWqpc=\"\n                alt=\"img alt text\" />\n              <sup>Category</sup>\n              <h2>Heading</h2>\n              <p>a description</p>\n              <a href=\"https://www.summitcreditunion.com\" target=\"_blank\">\n                Take Action\n              </a>\n            </scw-card>\n            <scw-card color=\"checking-purple\">\n              <img \n                src=\"https://media.istockphoto.com/photos/mount-hood-oregon-picture-id1268487061?b=1&k=20&m=1268487061&s=170667a&w=0&h=3fHYwaImlqUETcjCnSV7YO2-PzCFvaX6VSQaiGfWqpc=\"\n                alt=\"img alt text\" />\n              <sup>Category</sup>\n              <h2>Heading</h2>\n              <p>a description</p>\n              <a href=\"https://www.summitcreditunion.com\" target=\"_blank\">\n                Take Action\n              </a>\n            </scw-card>\n            <scw-card color=\"credit-cards\">\n              <img \n                src=\"https://media.istockphoto.com/photos/mount-hood-oregon-picture-id1268487061?b=1&k=20&m=1268487061&s=170667a&w=0&h=3fHYwaImlqUETcjCnSV7YO2-PzCFvaX6VSQaiGfWqpc=\"\n                alt=\"img alt text\" />\n              <sup>Category</sup>\n              <h2>Heading</h2>\n              <p>a description</p>\n              <a href=\"https://www.summitcreditunion.com\" target=\"_blank\">\n                Take Action\n              </a>\n            </scw-card>\n          </scw-flex-h>\n        </scw-stack>"
     },
     {
       "title": "Button Link",
@@ -546,17 +546,17 @@
     {
       "title": "Javascript Click",
       "description": "If you want an interactive scw-card but trigger Javascript\n      via the onclick event, you can use an anchor with a hashtag href and \n      an onclick event on scw-card. Note that scw-card\n      will figure out what will be clickable, so onclick event goes on to \n      scw-card regardless of whether you use a link or a whole card link",
-      "code": "\n        <scw-flex-h\n          class=\"scw-gap-2s\">\n          <scw-card\n            class=\"scw-width-col-3\"\n            onclick=\"alert('clicked')\">\n            <a href=\"#\">\n              <img \n                src=\"https://media.istockphoto.com/photos/mount-hood-oregon-picture-id1268487061?b=1&k=20&m=1268487061&s=170667a&w=0&h=3fHYwaImlqUETcjCnSV7YO2-PzCFvaX6VSQaiGfWqpc=\"\n                alt=\"img alt text\" />\n              <sup>Category</sup>\n              <h3>Heading</h3>\n              <p>a description</p>\n            </a>\n          </scw-card>\n          <scw-card\n            class=\"scw-width-col-3\"\n            onclick=\"alert('clicked')\">\n            <img \n              src=\"https://media.istockphoto.com/photos/mount-hood-oregon-picture-id1268487061?b=1&k=20&m=1268487061&s=170667a&w=0&h=3fHYwaImlqUETcjCnSV7YO2-PzCFvaX6VSQaiGfWqpc=\"\n              alt=\"img alt text\" />\n            <sup>Category</sup>\n            <h3>Heading</h3>\n            <p>a description</p>\n            <a href=\"#\">\n              Take Action\n            </a>\n          </scw-card>\n        </scw-flex-h>"
+      "code": "\n        <scw-flex-h\n          scw-gap-2s>\n          <scw-card\n            scw-width-col-3\n            onclick=\"alert('clicked')\">\n            <a href=\"#\">\n              <img \n                src=\"https://media.istockphoto.com/photos/mount-hood-oregon-picture-id1268487061?b=1&k=20&m=1268487061&s=170667a&w=0&h=3fHYwaImlqUETcjCnSV7YO2-PzCFvaX6VSQaiGfWqpc=\"\n                alt=\"img alt text\" />\n              <sup>Category</sup>\n              <h3>Heading</h3>\n              <p>a description</p>\n            </a>\n          </scw-card>\n          <scw-card\n            scw-width-col-3\n            onclick=\"alert('clicked')\">\n            <img \n              src=\"https://media.istockphoto.com/photos/mount-hood-oregon-picture-id1268487061?b=1&k=20&m=1268487061&s=170667a&w=0&h=3fHYwaImlqUETcjCnSV7YO2-PzCFvaX6VSQaiGfWqpc=\"\n              alt=\"img alt text\" />\n            <sup>Category</sup>\n            <h3>Heading</h3>\n            <p>a description</p>\n            <a href=\"#\">\n              Take Action\n            </a>\n          </scw-card>\n        </scw-flex-h>"
     },
     {
       "title": "Dynamic",
       "description": "If you need to change the child nodes after scw-card has rendered,\n      you can set the attribute 'dynamic' and it will watch for changes",
-      "code": "\n        <scw-flex-h\n          class=\"scw-gap-2\">\n          <scw-card\n            dynamic\n            class=\"scw-width-col-3\">\n            <img src=\"https://media.istockphoto.com/photos/mount-hood-oregon-picture-id1268487061?b=1&k=20&m=1268487061&s=170667a&w=0&h=3fHYwaImlqUETcjCnSV7YO2-PzCFvaX6VSQaiGfWqpc=\" alt=\"img alt text\" />\n            <sup>Category</sup>\n            <h2>Heading</h2>\n            <p>a description</p>\n            <a href=\"#\">\n              Take Action\n            </a>\n          </scw-card>\n          <scw-link\n            onclick=\"this.previousElementSibling.innerHTML = `<img src='https://media.istockphoto.com/photos/mount-hood-oregon-picture-id1268487061?b=1&k=20&m=1268487061&s=170667a&w=0&h=3fHYwaImlqUETcjCnSV7YO2-PzCFvaX6VSQaiGfWqpc=' alt='img alt text' />\n            <sup>New Category</sup>\n            <h2>New Heading</h2>\n            <p>New description</p>`;\"\n            aria-label=\"Change\">\n          </scw-link>\n          <scw-link\n            onclick=\"this.previousElementSibling.previousElementSibling.innerHTML = `<img src='https://clubk9.com/wp-content/uploads/2018/04/Depositphotos_4953129_original-1-256x256.jpg' alt='img alt text' />\n            <sup>Newer Category</sup>\n            <h2>Newer Heading</h2>\n            <p>Newer description</p>`;\"\n            aria-label=\"Change\">\n          </scw-link>\n        </scw-flex-h>"
+      "code": "\n        <scw-flex-h\n          scw-gap-2>\n          <scw-card\n            dynamic\n            scw-width-col-3>\n            <img src=\"https://media.istockphoto.com/photos/mount-hood-oregon-picture-id1268487061?b=1&k=20&m=1268487061&s=170667a&w=0&h=3fHYwaImlqUETcjCnSV7YO2-PzCFvaX6VSQaiGfWqpc=\" alt=\"img alt text\" />\n            <sup>Category</sup>\n            <h2>Heading</h2>\n            <p>a description</p>\n            <a href=\"#\">\n              Take Action\n            </a>\n          </scw-card>\n          <scw-link\n            onclick=\"this.previousElementSibling.innerHTML = `<img src='https://media.istockphoto.com/photos/mount-hood-oregon-picture-id1268487061?b=1&k=20&m=1268487061&s=170667a&w=0&h=3fHYwaImlqUETcjCnSV7YO2-PzCFvaX6VSQaiGfWqpc=' alt='img alt text' />\n            <sup>New Category</sup>\n            <h2>New Heading</h2>\n            <p>New description</p>`;\"\n            aria-label=\"Change\">\n          </scw-link>\n          <scw-link\n            onclick=\"this.previousElementSibling.previousElementSibling.innerHTML = `<img src='https://clubk9.com/wp-content/uploads/2018/04/Depositphotos_4953129_original-1-256x256.jpg' alt='img alt text' />\n            <sup>Newer Category</sup>\n            <h2>Newer Heading</h2>\n            <p>Newer description</p>`;\"\n            aria-label=\"Change\">\n          </scw-link>\n        </scw-flex-h>"
     },
     {
       "title": "Errors",
       "description": "Errors captured by scw-card.",
-      "code": "\n        <scw-flex-h\n          class=\"scw-gap-2s\">\n          <scw-card\n            class=\"scw-width-col-3\"\n            color=\"not-a-color\">\n            <img src=\"https://media.istockphoto.com/photos/mount-hood-oregon-picture-id1268487061?b=1&k=20&m=1268487061&s=170667a&w=0&h=3fHYwaImlqUETcjCnSV7YO2-PzCFvaX6VSQaiGfWqpc=\" alt=\"img alt text\" />\n            <sup>Category</sup>\n            <h3>Bad Color</h3>\n            <p>a description</p>\n          </scw-card>\n          <scw-stack\n            class=\"scw-width-col-3\">\n            <scw-card>\n            </scw-card>\n            <scw-card>\n              <h3>No Image</h3>\n            </scw-card>\n            <scw-card>\n              <img src=\"https://media.istockphoto.com/photos/mount-hood-oregon-picture-id1268487061?b=1&k=20&m=1268487061&s=170667a&w=0&h=3fHYwaImlqUETcjCnSV7YO2-PzCFvaX6VSQaiGfWqpc=\" />\n              <h3>No Image Alt</h3>\n            </scw-card>\n            <scw-card>\n              <img src=\"https://media.istockphoto.com/photos/mount-hood-oregon-picture-id1268487061?b=1&k=20&m=1268487061&s=170667a&w=0&h=3fHYwaImlqUETcjCnSV7YO2-PzCFvaX6VSQaiGfWqpc=\" alt=\"img alt text\" />\n              <sup>Category</sup>\n              <h3>Too Many Children</h3>\n              <p>a description</p>\n              <p>a description</p>\n              <p>a description</p>\n            </scw-card>\n          </scw-stack>\n        </scw-flex-h>"
+      "code": "\n        <scw-flex-h\n          scw-gap-2s>\n          <scw-card\n            scw-width-col-3\n            color=\"not-a-color\">\n            <img src=\"https://media.istockphoto.com/photos/mount-hood-oregon-picture-id1268487061?b=1&k=20&m=1268487061&s=170667a&w=0&h=3fHYwaImlqUETcjCnSV7YO2-PzCFvaX6VSQaiGfWqpc=\" alt=\"img alt text\" />\n            <sup>Category</sup>\n            <h3>Bad Color</h3>\n            <p>a description</p>\n          </scw-card>\n          <scw-stack\n            scw-width-col-3>\n            <scw-card>\n            </scw-card>\n            <scw-card>\n              <h3>No Image</h3>\n            </scw-card>\n            <scw-card>\n              <img src=\"https://media.istockphoto.com/photos/mount-hood-oregon-picture-id1268487061?b=1&k=20&m=1268487061&s=170667a&w=0&h=3fHYwaImlqUETcjCnSV7YO2-PzCFvaX6VSQaiGfWqpc=\" />\n              <h3>No Image Alt</h3>\n            </scw-card>\n            <scw-card>\n              <img src=\"https://media.istockphoto.com/photos/mount-hood-oregon-picture-id1268487061?b=1&k=20&m=1268487061&s=170667a&w=0&h=3fHYwaImlqUETcjCnSV7YO2-PzCFvaX6VSQaiGfWqpc=\" alt=\"img alt text\" />\n              <sup>Category</sup>\n              <h3>Too Many Children</h3>\n              <p>a description</p>\n              <p>a description</p>\n              <p>a description</p>\n            </scw-card>\n          </scw-stack>\n        </scw-flex-h>"
     }
   ]
 }

package/dist/docs/components/ScwIcon.json

@@ -427,6 +427,11 @@
       "description": "Turn icon into a link for Javascript actions (not SEO links)",
       "code": "\n        <scw-icon\n          icon=\"icon-placeholder\"\n          aria-label=\"Link Example\"\n          link\n          onclick=\"alert('see console for event'); console.log(event);\">\n        </scw-icon>"
     },
+    {
+      "title": "multicolor",
+      "description": "Specially designed icons can hook into the various stepped\n      colors (primary and accent) as well as recieve theme color overrides. The\n      last two examples are using themes with background-colors.",
+      "code": "\n        <scw-flex-h>\n          <scw-icon\n            icon=\"icon-color-test\"\n            role=\"img\"\n            aria-label=\"default\">\n          </scw-icon>\n          <scw-icon\n            icon=\"icon-color-test\"\n            color=\"primary\"\n            aria-label=\"primary\">\n          </scw-icon>\n          <scw-icon\n            icon=\"icon-color-test\"\n            color=\"mortgage\"\n            aria-label=\"mortgage\">\n          </scw-icon>\n          <scw-icon\n            icon=\"icon-color-test\"\n            color=\"investments\"\n            aria-label=\"investments\">\n          </scw-icon>\n          <scw-icon\n            icon=\"icon-color-test\"\n            color=\"credit-cards\"\n            aria-label=\"credit-cards\">\n          </scw-icon>\n          <scw-icon\n            icon=\"icon-color-test\"\n            color=\"student\"\n            aria-label=\"student\">\n          </scw-icon>\n          <scw-icon\n            icon=\"icon-color-test\"\n            color=\"savings\"\n            aria-label=\"savings\">\n          </scw-icon>\n          <scw-icon\n            icon=\"icon-color-test\"\n            color=\"checking\"\n            aria-label=\"checking\">\n          </scw-icon>\n          <scw-icon\n            style=\"\n              --scw-color-theme-02: #0f0;\n              --scw-color-theme-05: #f00;\"\n            icon=\"icon-color-test\">\n          </scw-icon>\n          <scw-icon\n            background-color=\"primary\"\n            color=\"checking\"\n            icon=\"icon-color-test\">\n          </scw-icon>\n          <scw-icon\n            style=\"\n              --scw-color-theme-02: #0f0;\n              --scw-color-theme-05: #aaa;\n              --scw-color-theme: #00f;\"\n            background-color=\"primary\"\n            icon=\"icon-color-test\">\n          </scw-icon>\n        </scw-flex-h>"
+    },
     {
       "title": "link (SEO)",
       "description": "Turn icon into a link (for SEO)",

package/dist/docs/components/manifest.json

@@ -1,10 +1,28 @@
 [
+  {
+    "name": "ScwCard",
+    "fileName": "ScwCard.json",
+    "tagName": "scw-card",
+    "category": "interactive"
+  },
   {
     "name": "ScwCenterComponent",
     "fileName": "ScwCenterComponent.json",
     "tagName": "scw-center-component",
     "category": "layouts"
   },
+  {
+    "name": "ScwFlexHComponent",
+    "fileName": "ScwFlexHComponent.json",
+    "tagName": "scw-flex-h-component",
+    "category": "layouts"
+  },
+  {
+    "name": "ScwComponent",
+    "fileName": "ScwComponent.json",
+    "tagName": "scw-component",
+    "category": "base"
+  },
   {
     "name": "ScwElementComponent",
     "fileName": "ScwElementComponent.json",
@@ -12,10 +30,10 @@
     "category": "layouts"
   },
   {
-    "name": "ScwFlexHComponent",
-    "fileName": "ScwFlexHComponent.json",
-    "tagName": "scw-flex-h-component",
-    "category": "layouts"
+    "name": "ScwButton",
+    "fileName": "ScwButton.json",
+    "tagName": "scw-button",
+    "category": "interactive"
   },
   {
     "name": "ScwFlexVComponent",
@@ -24,10 +42,10 @@
     "category": "layouts"
   },
   {
-    "name": "ScwCard",
-    "fileName": "ScwCard.json",
-    "tagName": "scw-card",
-    "category": "interactive"
+    "name": "ScwFloatComponent",
+    "fileName": "ScwFloatComponent.json",
+    "tagName": "scw-float-component",
+    "category": "layouts"
   },
   {
     "name": "ScwForm",
@@ -35,24 +53,12 @@
     "tagName": "scw-form",
     "category": "form"
   },
-  {
-    "name": "ScwComponent",
-    "fileName": "ScwComponent.json",
-    "tagName": "scw-component",
-    "category": "base"
-  },
   {
     "name": "ScwFormComponent",
     "fileName": "ScwFormComponent.json",
     "tagName": "scw-form-component",
     "category": "base"
   },
-  {
-    "name": "ScwFloatComponent",
-    "fileName": "ScwFloatComponent.json",
-    "tagName": "scw-float-component",
-    "category": "layouts"
-  },
   {
     "name": "ScwHeading",
     "fileName": "ScwHeading.json",
@@ -71,12 +77,6 @@
     "tagName": "scw-image",
     "category": "interactive"
   },
-  {
-    "name": "ScwInputLayout",
-    "fileName": "ScwInputLayout.json",
-    "tagName": "scw-input-layout",
-    "category": "form"
-  },
   {
     "name": "ScwInput",
     "fileName": "ScwInput.json",
@@ -89,18 +89,24 @@
     "tagName": "scw-input-field",
     "category": "form"
   },
-  {
-    "name": "ScwLink",
-    "fileName": "ScwLink.json",
-    "tagName": "scw-link",
-    "category": "interactive"
-  },
   {
     "name": "ScwLayoutComponent",
     "fileName": "ScwLayoutComponent.json",
     "tagName": "scw-layout-component",
     "category": "layouts"
   },
+  {
+    "name": "ScwInputLayout",
+    "fileName": "ScwInputLayout.json",
+    "tagName": "scw-input-layout",
+    "category": "form"
+  },
+  {
+    "name": "ScwLink",
+    "fileName": "ScwLink.json",
+    "tagName": "scw-link",
+    "category": "interactive"
+  },
   {
     "name": "ScwLinkBase",
     "fileName": "ScwLinkBase.json",
@@ -113,6 +119,12 @@
     "tagName": "scw-menu",
     "category": "interactive"
   },
+  {
+    "name": "ScwMenuItem",
+    "fileName": "ScwMenuItem.json",
+    "tagName": "scw-menu-item",
+    "category": "interactive"
+  },
   {
     "name": "ScwPageAlert",
     "fileName": "ScwPageAlert.json",
@@ -137,18 +149,18 @@
     "tagName": "scw-select",
     "category": "form"
   },
-  {
-    "name": "ScwSingleInputLayout",
-    "fileName": "ScwSingleInputLayout.json",
-    "tagName": "scw-single-input-layout",
-    "category": "form"
-  },
   {
     "name": "ScwSingleInput",
     "fileName": "ScwSingleInput.json",
     "tagName": "scw-single-input",
     "category": "form"
   },
+  {
+    "name": "ScwSingleInputLayout",
+    "fileName": "ScwSingleInputLayout.json",
+    "tagName": "scw-single-input-layout",
+    "category": "form"
+  },
   {
     "name": "ScwStackComponent",
     "fileName": "ScwStackComponent.json",
@@ -172,17 +184,5 @@
     "fileName": "ScwValidation.json",
     "tagName": "scw-validation",
     "category": "form"
-  },
-  {
-    "name": "ScwButton",
-    "fileName": "ScwButton.json",
-    "tagName": "scw-button",
-    "category": "interactive"
-  },
-  {
-    "name": "ScwMenuItem",
-    "fileName": "ScwMenuItem.json",
-    "tagName": "scw-menu-item",
-    "category": "interactive"
   }
 ]

package/dist/docs/config.json

@@ -1,6 +1,6 @@
 {
   "title": "Summit Credit Union Web Design System (SCW)",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "navigation": [
     {
       "id": "tokens",
@@ -28,6 +28,10 @@
       "title": "Styles",
       "url": "./documents/Styles.html"
     },
+    {
+      "title": "Themeing",
+      "url": "./documents/Themeing.html"
+    },
     {
       "title": "Layouts",
       "url": "./documents/Layouts.html"

package/dist/docs/documents/Layouts.html

@@ -11,7 +11,7 @@ gaps and alignments.</p>
     scw-text-bold-04>
     Layouts:
   </scw-element>
-  <scw-button
+  <scw-link
     aria-label="flex-h"
     design="text"
     onclick="document.layouts_innerhtml = `<scw-flex-h
@@ -31,8 +31,8 @@ gaps and alignments.</p>
 </scw-flex-h>`;
       document.querySelector('#example-preview').innerHTML = document.layouts_innerhtml;
       document.querySelector('#example-code').textContent = document.layouts_innerhtml;;">
-  </scw-button>
-  <scw-button
+  </scw-link>
+  <scw-link
     aria-label="flex-v"
     design="text"
     onclick="document.layouts_innerhtml = `<scw-flex-v
@@ -54,8 +54,8 @@ gaps and alignments.</p>
 </scw-flex-v>`;
       document.querySelector('#example-preview').innerHTML = document.layouts_innerhtml;
       document.querySelector('#example-code').textContent = document.layouts_innerhtml;;">
-  </scw-button>
-  <scw-button
+  </scw-link>
+  <scw-link
     aria-label="stack"
     design="text"
     onclick="document.layouts_innerhtml = `<scw-stack
@@ -74,8 +74,8 @@ gaps and alignments.</p>
 </scw-stack>`;
       document.querySelector('#example-preview').innerHTML = document.layouts_innerhtml;
       document.querySelector('#example-code').textContent = document.layouts_innerhtml;;">
-  </scw-button>
-  <scw-button
+  </scw-link>
+  <scw-link
     aria-label="layout"
     design="text"
     onclick="document.layouts_innerhtml = `<scw-layout
@@ -94,8 +94,8 @@ gaps and alignments.</p>
 </scw-layout>`;
       document.querySelector('#example-preview').innerHTML = document.layouts_innerhtml;
       document.querySelector('#example-code').textContent = document.layouts_innerhtml;;">
-  </scw-button>
-  <scw-button
+  </scw-link>
+  <scw-link
     aria-label="center"
     design="text"
     onclick="document.layouts_innerhtml = `<scw-center
@@ -115,8 +115,8 @@ gaps and alignments.</p>
 </scw-center>`;
       document.querySelector('#example-preview').innerHTML = document.layouts_innerhtml;
       document.querySelector('#example-code').textContent = document.layouts_innerhtml;;">
-  </scw-button>
-  <scw-button
+  </scw-link>
+  <scw-link
     aria-label="pane"
     design="text"
     onclick="document.layouts_innerhtml = `<scw-pane
@@ -159,8 +159,8 @@ gaps and alignments.</p>
 </scw-pane>`;
       document.querySelector('#example-preview').innerHTML = document.layouts_innerhtml;
       document.querySelector('#example-code').textContent = document.layouts_innerhtml;;">
-  </scw-button>
-  <scw-button
+  </scw-link>
+  <scw-link
     aria-label="float"
     design="text"
     onclick="document.layouts_innerhtml = `<scw-float
@@ -180,8 +180,8 @@ gaps and alignments.</p>
 </scw-float>`;
       document.querySelector('#example-preview').innerHTML = document.layouts_innerhtml;
       document.querySelector('#example-code').textContent = document.layouts_innerhtml;;">
-  </scw-button>
-  <scw-button
+  </scw-link>
+  <scw-link
     aria-label="element"
     design="text"
     onclick="document.layouts_innerhtml = `<scw-element
@@ -191,7 +191,7 @@ gaps and alignments.</p>
 </scw-element>`;
       document.querySelector('#example-preview').innerHTML = document.layouts_innerhtml;
       document.querySelector('#example-code').textContent = document.layouts_innerhtml;;">
-  </scw-button>
+  </scw-link>
 </scw-flex-h>
 <scw-flex-h
   scw-width-col-12
@@ -228,7 +228,7 @@ order...top-right, stretch-left, etc...</p>
     scw-text-bold-04>
     Alignments:
   </scw-element>
-  <scw-button
+  <scw-link
     aria-label="center"
     design="text"
     onclick="
@@ -238,8 +238,8 @@ order...top-right, stretch-left, etc...</p>
       document.querySelector('#alignment-flex-h').setAttribute('class', classes);
       document.querySelector('#alignment-flex-v').setAttribute('class', classes);
       document.querySelector('#alignment-code').innerHTML = classes;">
-  </scw-button>
-  <scw-button
+  </scw-link>
+  <scw-link
     aria-label="left"
     design="text"
     onclick="
@@ -249,8 +249,8 @@ order...top-right, stretch-left, etc...</p>
       document.querySelector('#alignment-flex-h').setAttribute('class', classes);
       document.querySelector('#alignment-flex-v').setAttribute('class', classes);
       document.querySelector('#alignment-code').innerHTML = classes;">
-  </scw-button>
-  <scw-button
+  </scw-link>
+  <scw-link
     aria-label="right"
     design="text"
     onclick="
@@ -260,8 +260,8 @@ order...top-right, stretch-left, etc...</p>
       document.querySelector('#alignment-flex-h').setAttribute('class', classes);
       document.querySelector('#alignment-flex-v').setAttribute('class', classes);
       document.querySelector('#alignment-code').innerHTML = classes;">
-  </scw-button>
-  <scw-button
+  </scw-link>
+  <scw-link
     aria-label="bottom-right"
     design="text"
     onclick="
@@ -271,8 +271,8 @@ order...top-right, stretch-left, etc...</p>
       document.querySelector('#alignment-flex-h').setAttribute('class', classes);
       document.querySelector('#alignment-flex-v').setAttribute('class', classes);
       document.querySelector('#alignment-code').innerHTML = classes;">
-  </scw-button>
-  <scw-button
+  </scw-link>
+  <scw-link
     aria-label="stretch"
     design="text"
     onclick="
@@ -282,8 +282,8 @@ order...top-right, stretch-left, etc...</p>
       document.querySelector('#alignment-flex-h').setAttribute('class', classes);
       document.querySelector('#alignment-flex-v').setAttribute('class', classes);
       document.querySelector('#alignment-code').innerHTML = classes;">
-  </scw-button>
-  <scw-button
+  </scw-link>
+  <scw-link
     aria-label="stretch-bottom"
     design="text"
     onclick="
@@ -293,8 +293,8 @@ order...top-right, stretch-left, etc...</p>
       document.querySelector('#alignment-flex-h').setAttribute('class', classes);
       document.querySelector('#alignment-flex-v').setAttribute('class', classes);
       document.querySelector('#alignment-code').innerHTML = classes;">
-  </scw-button>
-  <scw-button
+  </scw-link>
+  <scw-link
     aria-label="baseline"
     design="text"
     onclick="
@@ -304,8 +304,8 @@ order...top-right, stretch-left, etc...</p>
       document.querySelector('#alignment-flex-h').setAttribute('class', classes);
       document.querySelector('#alignment-flex-v').setAttribute('class', classes);
       document.querySelector('#alignment-code').innerHTML = classes;">
-  </scw-button>
-  <scw-button
+  </scw-link>
+  <scw-link
     aria-label="baseline-right"
     design="text"
     onclick="
@@ -315,7 +315,7 @@ order...top-right, stretch-left, etc...</p>
       document.querySelector('#alignment-flex-h').setAttribute('class', classes);
       document.querySelector('#alignment-flex-v').setAttribute('class', classes);
       document.querySelector('#alignment-code').innerHTML = classes;">
-  </scw-button>
+  </scw-link>
   <scw-element>
     ...
   </scw-element>
@@ -330,7 +330,7 @@ order...top-right, stretch-left, etc...</p>
     scw-text-bold-04>
     Gaps:
   </scw-element>
-  <scw-button
+  <scw-link
     aria-label="no gap"
     design="text"
     onclick="
@@ -340,8 +340,8 @@ order...top-right, stretch-left, etc...</p>
       document.querySelector('#alignment-flex-h').setAttribute('class', classes);
       document.querySelector('#alignment-flex-v').setAttribute('class', classes);
       document.querySelector('#alignment-code').innerHTML = classes;">
-  </scw-button>
-  <scw-button
+  </scw-link>
+  <scw-link
     aria-label="gap 1s"
     design="text"
     onclick="
@@ -351,8 +351,8 @@ order...top-right, stretch-left, etc...</p>
       document.querySelector('#alignment-flex-h').setAttribute('class', classes);
       document.querySelector('#alignment-flex-v').setAttribute('class', classes);
       document.querySelector('#alignment-code').innerHTML = classes;">
-  </scw-button>
-  <scw-button
+  </scw-link>
+  <scw-link
     aria-label="gap 2s"
     design="text"
     onclick="
@@ -362,8 +362,8 @@ order...top-right, stretch-left, etc...</p>
       document.querySelector('#alignment-flex-h').setAttribute('class', classes);
       document.querySelector('#alignment-flex-v').setAttribute('class', classes);
       document.querySelector('#alignment-code').innerHTML = classes;">
-  </scw-button>
-  <scw-button
+  </scw-link>
+  <scw-link
     aria-label="gap 3s"
     design="text"
     onclick="
@@ -373,7 +373,7 @@ order...top-right, stretch-left, etc...</p>
       document.querySelector('#alignment-flex-h').setAttribute('class', classes);
       document.querySelector('#alignment-flex-v').setAttribute('class', classes);
       document.querySelector('#alignment-code').innerHTML = classes;">
-  </scw-button>
+  </scw-link>
   <scw-element>
     ...
   </scw-element>

package/dist/docs/documents/Release History.html

@@ -1,6 +1,28 @@
 <div class="referencePage">
   <h1 id="release-history">Release History</h1>
 <ul>
+<li><p>Release v0.0.10 ( 2022-02-18 )</p>
+<ul>
+<li>Color Themeing. scu-tokenizer now allows for color alias grouping. Basically
+  creating a css variable that can control multiple colors across the design 
+  system. This also includes canned themes (scw-color-theme-primary) that 
+  will change all steps at one time.</li>
+</ul>
+</li>
+<li><p>Release v0.0.9 ( 2022-02-16 )</p>
+<ul>
+<li>Added alias groups to tokenization. This has enabled the primary color or
+  any of the accent colors to be changed via a single css variable. For 
+  instance, this will turn all colors of step 02 to grey:</li>
+</ul>
+<p>  --scw-color-accent-02: var( --scw-color-grey-02 );</p>
+<ul>
+<li>Updated all variables to have a prefix. --color-primary is now</li>
+</ul>
+<p>  --scw-color-primary. This will help align with the alias group functionality 
+  and enable a more elegant design system modularization (using two versions
+  of the design system on one page which is useful for micro frontends)</p>
+</li>
 <li><p>Release v0.0.8 ( 2022-02-15 )</p>
 <ul>
 <li>updates to documentation</li>