scu-web-components 0.0.19 → 0.0.22

package/dist/docs/components/ScwCard.json

@@ -27,7 +27,8 @@
       "type": {
         "text": "string | undefined"
       },
-      "description": "(ScwCard) The src of the image within the card"
+      "description": "(ScwCard) The src of the image within the card",
+      "attribute": "src"
     },
     {
       "kind": "field",
@@ -35,7 +36,8 @@
       "type": {
         "text": "string | undefined"
       },
-      "description": "(ScwCard) The srcset of the image within the card"
+      "description": "(ScwCard) The srcset of the image within the card",
+      "attribute": "srcset"
     },
     {
       "kind": "field",
@@ -43,39 +45,54 @@
       "type": {
         "text": "string | undefined"
       },
-      "description": "(ScwCard) Alternative description of the image."
+      "description": "(ScwCard) Alternative description of the image.",
+      "attribute": "alt"
     },
     {
       "kind": "field",
-      "name": "_heading",
+      "name": "heading",
       "type": {
         "text": "string | undefined"
       },
-      "description": "(ScwCard) Main title or header of the card (determined by\n<h1, h2, h3> content)"
+      "description": "(ScwCard) Main title or header of the card (determined by\n<h1, h2, h3> content)",
+      "attribute": "heading"
     },
     {
       "kind": "field",
-      "name": "_superHeading",
+      "name": "superHeading",
       "type": {
         "text": "string | undefined"
       },
-      "description": "(ScwCard) Super title, describing a category or area pertaining to title\n(determined by <sup> content)"
+      "description": "(ScwCard) Super title, describing a category or area pertaining to title\n(determined by <sup> content)",
+      "attribute": "superHeading"
     },
     {
       "kind": "field",
-      "name": "_description",
+      "name": "description",
       "type": {
         "text": "string | undefined"
       },
-      "description": "(ScwCard) Fuller description of what the card is about (determined by\n<p> content)"
+      "description": "(ScwCard) Fuller description of what the card is about (determined by\n<p> content)",
+      "attribute": "description"
     },
     {
       "kind": "field",
-      "name": "_linkLabel",
+      "name": "linkLabel",
       "type": {
         "text": "string | undefined"
       },
-      "description": "(ScwCard) Label on the link"
+      "description": "(ScwCard) Label on the link",
+      "attribute": "linkLabel"
+    },
+    {
+      "kind": "field",
+      "name": "preload",
+      "type": {
+        "text": "boolean"
+      },
+      "default": "false",
+      "description": "(ScwCard) whether to preload image or not",
+      "attribute": "preload"
     },
     {
       "kind": "field",
@@ -173,8 +190,8 @@
     },
     {
       "kind": "method",
-      "name": "renderHeading",
-      "description": "Render heading area",
+      "name": "renderButton",
+      "description": "Render link area",
       "return": {
         "type": {
           "text": "object"
@@ -183,11 +200,11 @@
     },
     {
       "kind": "method",
-      "name": "renderButton",
-      "description": "Render link area",
+      "name": "getSizeStringForHeader",
+      "description": "get string to use in the size attribute of scw-header",
       "return": {
         "type": {
-          "text": "object"
+          "text": "string"
         }
       }
     },
@@ -398,6 +415,71 @@
     }
   ],
   "attributes": [
+    {
+      "name": "src",
+      "type": {
+        "text": "string | undefined"
+      },
+      "description": "(ScwCard) The src of the image within the card",
+      "fieldName": "src"
+    },
+    {
+      "name": "srcset",
+      "type": {
+        "text": "string | undefined"
+      },
+      "description": "(ScwCard) The srcset of the image within the card",
+      "fieldName": "srcset"
+    },
+    {
+      "name": "alt",
+      "type": {
+        "text": "string | undefined"
+      },
+      "description": "(ScwCard) Alternative description of the image.",
+      "fieldName": "alt"
+    },
+    {
+      "name": "heading",
+      "type": {
+        "text": "string | undefined"
+      },
+      "description": "(ScwCard) Main title or header of the card (determined by\n<h1, h2, h3> content)",
+      "fieldName": "heading"
+    },
+    {
+      "name": "superHeading",
+      "type": {
+        "text": "string | undefined"
+      },
+      "description": "(ScwCard) Super title, describing a category or area pertaining to title\n(determined by <sup> content)",
+      "fieldName": "superHeading"
+    },
+    {
+      "name": "description",
+      "type": {
+        "text": "string | undefined"
+      },
+      "description": "(ScwCard) Fuller description of what the card is about (determined by\n<p> content)",
+      "fieldName": "description"
+    },
+    {
+      "name": "linkLabel",
+      "type": {
+        "text": "string | undefined"
+      },
+      "description": "(ScwCard) Label on the link",
+      "fieldName": "linkLabel"
+    },
+    {
+      "name": "preload",
+      "type": {
+        "text": "boolean"
+      },
+      "default": "false",
+      "description": "(ScwCard) whether to preload image or not",
+      "fieldName": "preload"
+    },
     {
       "name": "size",
       "type": {
@@ -518,7 +600,7 @@
     {
       "title": "Large Size (h1)",
       "description": "scw-card is configured with nested html elements.",
-      "code": "\n        <scw-card>\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          <h1>Heading</h1>\n          <p>a description</p>\n        </scw-card>"
+      "code": "\n        <scw-card\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          super-heading=\"Category\"\n          heading=\"heading\"\n          size=\"h1\"\n          description=\"a description\">\n        </scw-card>"
     },
     {
       "title": "Medium Size (h2)",

package/dist/docs/components/ScwImage.json

@@ -61,6 +61,25 @@
       "description": "(ScwImage) src of image",
       "attribute": "src"
     },
+    {
+      "kind": "field",
+      "name": "alt",
+      "type": {
+        "text": "string | undefined"
+      },
+      "description": "(ScwImage) alt of image",
+      "attribute": "alt"
+    },
+    {
+      "kind": "field",
+      "name": "preload",
+      "type": {
+        "text": "boolean"
+      },
+      "default": "false",
+      "description": "(ScwImage) whether to preload image or not",
+      "attribute": "preload"
+    },
     {
       "kind": "field",
       "name": "noLazyLoading",
@@ -438,6 +457,23 @@
       "description": "(ScwImage) src of image",
       "fieldName": "src"
     },
+    {
+      "name": "alt",
+      "type": {
+        "text": "string | undefined"
+      },
+      "description": "(ScwImage) alt of image",
+      "fieldName": "alt"
+    },
+    {
+      "name": "preload",
+      "type": {
+        "text": "boolean"
+      },
+      "default": "false",
+      "description": "(ScwImage) whether to preload image or not",
+      "fieldName": "preload"
+    },
     {
       "name": "no-lazy-loading",
       "type": {
@@ -560,42 +596,42 @@
     {
       "title": "Simple",
       "description": "\n        scw-image acts mosly like an img tag (versus a picture tag) with\n        many added features and ADA requirements.",
-      "code": "\n        <scw-image\n          aria-label=\"scw-image example\"\n          style=\"width: 200px; height: 100px;\"\n          src=\"https://dummyimage.com/200x100\">\n        </scw-image>"
+      "code": "\n        <scw-image\n          alt=\"scw-image example\"\n          style=\"width: 200px; height: 100px;\"\n          src=\"https://dummyimage.com/200x100\">\n        </scw-image>"
     },
     {
       "title": "Sizing",
       "description": "\n        scw-image forces you to establish the size of the image or it will\n         not show up correctly. This minimizes layout shifts.\n         \"aspect-ratio\" has been added to help \n         size images abstractly. The image in the middle is collasped because\n         it only defines the width.",
-      "code": "\n      <scw-flex-h\n        scw-gap-2s>\n        <scw-image\n          aria-label=\"scw-image example\"\n          style=\"width: 200px; height: 100px;\"\n          src=\"https://dummyimage.com/200x100\">\n        </scw-image>\n        <scw-image\n          aria-label=\"scw-image example\"\n          style=\"width: 200px;\"\n          src=\"https://dummyimage.com/200x100\">\n        </scw-image>\n        <scw-image\n          aria-label=\"scw-image example\"\n          style=\"width: 200px;\"\n          aspect-ratio=\"2:1\"\n          src=\"https://dummyimage.com/200x100\">\n        </scw-image>\n      </scw-flex>"
+      "code": "\n      <scw-flex-h\n        scw-gap-2s>\n        <scw-image\n          alt=\"scw-image example\"\n          style=\"width: 200px; height: 100px;\"\n          src=\"https://dummyimage.com/200x100\">\n        </scw-image>\n        <scw-image\n          alt=\"scw-image example\"\n          style=\"width: 200px;\"\n          src=\"https://dummyimage.com/200x100\">\n        </scw-image>\n        <scw-image\n          alt=\"scw-image example\"\n          style=\"width: 200px;\"\n          aspect-ratio=\"2:1\"\n          src=\"https://dummyimage.com/200x100\">\n        </scw-image>\n      </scw-flex>"
     },
     {
       "title": "scrset",
       "description": "\n        This includes using srcset. However, it does NOT use the default \n        combination of \"srcset\" and \"sizes\"\n        to determine which image to use. Instead it establishes the image's\n        \"sizes\" by the size of the image itself that is updated at specific\n        breakpoints (\"sm, md, lg\" by default). The size established within \n        srcset will determine when it is used. To see this work with this \n        example, shrink the browser down, refresh, and then resize the browser \n        outward. Caching will effect predictable changes.",
-      "code": "\n        <scw-image\n          aria-label=\"scw-image example\"\n          style=\"width: 70%;\"\n          aspect-ratio=\"3:1\"\n          resize-breakpoints=\"sm, 04, 05, md, lg, 09, 10\"\n          srcset=\"\n            https://dummyimage.com/100x33 100w,\n            https://dummyimage.com/200x66 200w,\n            https://dummyimage.com/300x100 300w,\n            https://dummyimage.com/400x133 400w\">\n        </scw-image>"
+      "code": "\n        <scw-image\n          alt=\"scw-image example\"\n          style=\"width: 70%;\"\n          aspect-ratio=\"3:1\"\n          resize-breakpoints=\"sm, 04, 05, md, lg, 09, 10\"\n          srcset=\"\n            https://dummyimage.com/100x33 100w,\n            https://dummyimage.com/200x66 200w,\n            https://dummyimage.com/300x100 300w,\n            https://dummyimage.com/400x133 400w\">\n        </scw-image>"
     },
     {
       "title": "lazy loading",
       "description": "\n        scw-image only loads it's images if it knows it is on the screen (or \n          close to being visible on the screen). If you scroll the page you \n          may notice the images loading during scroll. You can turn this \n          off with \"no-lazy-loading\". It's recommended to use aspect-ratio\n          and a defined width when using lazy loading.",
-      "code": "\n        <scw-image\n          aria-label=\"scw-image example\"\n          style=\"width: 300px;\"\n          aspect-ratio=\"3:1\"\n          no-lazy-loading\n          src=\"https://dummyimage.com/300x100\">\n        </scw-image>"
+      "code": "\n        <scw-image\n          alt=\"scw-image example\"\n          style=\"width: 300px;\"\n          aspect-ratio=\"3:1\"\n          no-lazy-loading\n          src=\"https://dummyimage.com/300x100\">\n        </scw-image>"
     },
     {
       "title": "aspect-ratio",
       "description": "\n        scw-image also has 'aspect-ratio' which will render the component at\n        a specific height relative to it's width. You will have to declare some\n        kind of width for this to work. However, this is recommended \n        because it will avoid the page jumping after the image loads and also\n        allows for srcset to use different resolution images.",
-      "code": "\n        <scw-image\n          aria-label=\"scw-image example\"\n          style=\"width: var( --col-4 );\"\n          aspect-ratio=\"3:1\"\n          src=\"https://dummyimage.com/300x100\">\n        </scw-image>"
+      "code": "\n        <scw-image\n          alt=\"scw-image example\"\n          style=\"width: var( --col-4 );\"\n          aspect-ratio=\"3:1\"\n          src=\"https://dummyimage.com/300x100\">\n        </scw-image>"
     },
     {
       "title": "object-fit and object-position",
       "description": "\n        With the aspect-ratio tag it becomes easier to use object-fit and\n        object-position (native css properties). Note that\n        these are attributes, not css properties.",
-      "code": "\n        <scw-image\n          aria-label=\"scw-image example\"\n          style=\"\n            width: 200px; float: left; clear: left;\n            background-color: var( --color-primary-09 )\"\n          aspect-ratio=\"1:1\"\n          object-fit=\"none\"\n          object-position=\"right top\"\n          src=\"https://dummyimage.com/100x100\">\n        </scw-image>\n        <scw-float\n          style=\"\n            float: right; clear: right;\n            width: var( --col-6 );\n            --gap: var( --scw-spacing-1 );\">\n          <scw-link \n            aria-label=\"none, right top\"\n            onclick=\"\n            this.parentElement.previousElementSibling.src = \n              'https://dummyimage.com/100x100';\n            this.parentElement.previousElementSibling.objectFit = 'none';\n            this.parentElement.previousElementSibling.objectPosition = \n              'right top';\"\n            \">\n          </scw-link>\n          <scw-link \n            aria-label=\"scale-down, top\"\n            onclick=\"\n            this.parentElement.previousElementSibling.src = \n              'https://dummyimage.com/500x200';\n            this.parentElement.previousElementSibling.objectFit = 'scale-down';\n            this.parentElement.previousElementSibling.objectPosition = \n              'top';\"\n            \">\n          </scw-link>\n          <scw-link \n            aria-label=\"cover\"\n            onclick=\"\n            this.parentElement.previousElementSibling.src = \n              'https://dummyimage.com/400x400';\n            this.parentElement.previousElementSibling.objectFit = 'cover';\n            this.parentElement.previousElementSibling.objectPosition = '';\">\n          </scw-link>\n          <scw-link \n            aria-label=\"cover, right\"\n            onclick=\"\n            this.parentElement.previousElementSibling.src = \n              'https://dummyimage.com/400x200';\n            this.parentElement.previousElementSibling.objectFit = 'cover';\n            this.parentElement.previousElementSibling.objectPosition = \n              'right';\">\n          </scw-link>\n          <scw-link \n            aria-label=\"fill\"\n            onclick=\"\n            this.parentElement.previousElementSibling.src = \n              'https://dummyimage.com/100x200';\n            this.parentElement.previousElementSibling.objectFit = 'fill';\n            this.parentElement.previousElementSibling.objectPosition = '';\">\n          </scw-link>\n        </scw-float>"
+      "code": "\n        <scw-image\n          alt=\"scw-image example\"\n          style=\"\n            width: 200px; float: left; clear: left;\n            background-color: var( --color-primary-09 )\"\n          aspect-ratio=\"1:1\"\n          object-fit=\"none\"\n          object-position=\"right top\"\n          src=\"https://dummyimage.com/100x100\">\n        </scw-image>\n        <scw-float\n          style=\"\n            float: right; clear: right;\n            width: var( --col-6 );\n            --gap: var( --scw-spacing-1 );\">\n          <scw-link \n            aria-label=\"none, right top\"\n            onclick=\"\n            this.parentElement.previousElementSibling.src = \n              'https://dummyimage.com/100x100';\n            this.parentElement.previousElementSibling.objectFit = 'none';\n            this.parentElement.previousElementSibling.objectPosition = \n              'right top';\"\n            \">\n          </scw-link>\n          <scw-link \n            aria-label=\"scale-down, top\"\n            onclick=\"\n            this.parentElement.previousElementSibling.src = \n              'https://dummyimage.com/500x200';\n            this.parentElement.previousElementSibling.objectFit = 'scale-down';\n            this.parentElement.previousElementSibling.objectPosition = \n              'top';\"\n            \">\n          </scw-link>\n          <scw-link \n            aria-label=\"cover\"\n            onclick=\"\n            this.parentElement.previousElementSibling.src = \n              'https://dummyimage.com/400x400';\n            this.parentElement.previousElementSibling.objectFit = 'cover';\n            this.parentElement.previousElementSibling.objectPosition = '';\">\n          </scw-link>\n          <scw-link \n            aria-label=\"cover, right\"\n            onclick=\"\n            this.parentElement.previousElementSibling.src = \n              'https://dummyimage.com/400x200';\n            this.parentElement.previousElementSibling.objectFit = 'cover';\n            this.parentElement.previousElementSibling.objectPosition = \n              'right';\">\n          </scw-link>\n          <scw-link \n            aria-label=\"fill\"\n            onclick=\"\n            this.parentElement.previousElementSibling.src = \n              'https://dummyimage.com/100x200';\n            this.parentElement.previousElementSibling.objectFit = 'fill';\n            this.parentElement.previousElementSibling.objectPosition = '';\">\n          </scw-link>\n        </scw-float>"
     },
     {
       "title": "link",
-      "description": "\n        scw-image controls it's own linking behavior (versus wrapping it in\n          an anchor tag). Do this with a \"link\" attribute and either \n          a nested anchor or adding a click event.",
-      "code": "\n        <scw-flex-h\n          scw-gap-2s>\n          <scw-image\n            aria-label=\"scw-image example\"\n            style=\"width: 100px;\"\n            aspect-ratio=\"1:1\"\n            src=\"https://dummyimage.com/100x100\"\n            href=\"https://www.summitcreditunion.com\"\n            target=\"_blank\">\n          </scw-image>\n          <scw-image\n            aria-label=\"scw-image example\"\n            style=\"width: 100px;\"\n            aspect-ratio=\"1:1\"\n            src=\"https://dummyimage.com/100x100\">\n            <a href=\"https://www.summitcreditunion.com\"\n              target=\"_blank\">\n              Summit Credit Union\n            </a>\n          </scw-image>\n          <scw-image\n            aria-label=\"scw-image example\"\n            style=\"width: 100px;\"\n            aspect-ratio=\"1:1\"\n            src=\"https://dummyimage.com/100x100\"\n            onclick=\"alert('clicked')\">\n          </scw-image>\n        </scw-flex-h>"
+      "description": "\n        scw-image controls it's own linking behavior (versus wrapping it in\n          an anchor tag). Do this with the link attributes, a nested\n          anchor tag, or adding a click event.",
+      "code": "\n        <scw-flex-h\n          scw-gap-2s>\n          <scw-image\n            alt=\"scw-image example\"\n            aria-label=\"Summit Credit Union\"\n            style=\"width: 100px;\"\n            aspect-ratio=\"1:1\"\n            src=\"https://dummyimage.com/100x100\"\n            href=\"https://www.summitcreditunion.com\"\n            target=\"_blank\">\n          </scw-image>\n          <scw-image\n            alt=\"scw-image example\"\n            style=\"width: 100px;\"\n            aspect-ratio=\"1:1\"\n            src=\"https://dummyimage.com/100x100\">\n            <a href=\"https://www.summitcreditunion.com\"\n              target=\"_blank\">\n              Summit Credit Union\n            </a>\n          </scw-image>\n          <scw-image\n            alt=\"scw-image example\"\n            aria-label=\"Summit Credit Union\"\n            style=\"width: 100px;\"\n            aspect-ratio=\"1:1\"\n            src=\"https://dummyimage.com/100x100\"\n            onclick=\"alert('clicked')\">\n          </scw-image>\n        </scw-flex-h>"
     },
     {
       "title": "errors",
-      "description": "Hover image to see error. scw-image requires aria-label and\n      image information.",
-      "code": "\n      <scw-flex-h\n        scw-gap-2s>\n        <scw-image\n          style=\"width: 100px; height: 100px;\"\n          src=\"https://dummyimage.com/100x100\">\n        </scw-image>\n        <scw-image\n          aria-label=\"No image information\"\n          style=\"width: 100px; height: 100px;\">\n        </scw-image>\n      </scw-flex-h>"
+      "description": "Hover image to see error. scw-image requires alt and\n      image information.",
+      "code": "\n      <scw-flex-h\n        scw-gap-2s>\n        <scw-image\n          style=\"width: 100px; height: 100px;\"\n          src=\"https://dummyimage.com/100x100\">\n        </scw-image>\n        <scw-image\n          alt=\"No image information\"\n          style=\"width: 100px; height: 100px;\">\n        </scw-image>\n      </scw-flex-h>"
     }
   ]
 }

package/dist/docs/components/manifest.json

@@ -1,9 +1,9 @@
 [
   {
-    "name": "ScwAlert",
-    "fileName": "ScwAlert.json",
-    "tagName": "scw-alert",
-    "category": "interactive"
+    "name": "ScwCenterComponent",
+    "fileName": "ScwCenterComponent.json",
+    "tagName": "scw-center-component",
+    "category": "layouts"
   },
   {
     "name": "ScwButton",
@@ -11,6 +11,12 @@
     "tagName": "scw-button",
     "category": "interactive"
   },
+  {
+    "name": "ScwAlert",
+    "fileName": "ScwAlert.json",
+    "tagName": "scw-alert",
+    "category": "interactive"
+  },
   {
     "name": "ScwCard",
     "fileName": "ScwCard.json",
@@ -18,10 +24,10 @@
     "category": "interactive"
   },
   {
-    "name": "ScwFlexHComponent",
-    "fileName": "ScwFlexHComponent.json",
-    "tagName": "scw-flex-h-component",
-    "category": "layouts"
+    "name": "ScwComponent",
+    "fileName": "ScwComponent.json",
+    "tagName": "scw-component",
+    "category": "base"
   },
   {
     "name": "ScwFlexVComponent",
@@ -29,12 +35,6 @@
     "tagName": "scw-flex-v-component",
     "category": "layouts"
   },
-  {
-    "name": "ScwComponent",
-    "fileName": "ScwComponent.json",
-    "tagName": "scw-component",
-    "category": "base"
-  },
   {
     "name": "ScwElementComponent",
     "fileName": "ScwElementComponent.json",
@@ -42,10 +42,10 @@
     "category": "layouts"
   },
   {
-    "name": "ScwHeading",
-    "fileName": "ScwHeading.json",
-    "tagName": "scw-heading",
-    "category": "interactive"
+    "name": "ScwFormComponent",
+    "fileName": "ScwFormComponent.json",
+    "tagName": "scw-form-component",
+    "category": "base"
   },
   {
     "name": "ScwFloatComponent",
@@ -54,23 +54,11 @@
     "category": "layouts"
   },
   {
-    "name": "ScwCenterComponent",
-    "fileName": "ScwCenterComponent.json",
-    "tagName": "scw-center-component",
+    "name": "ScwFlexHComponent",
+    "fileName": "ScwFlexHComponent.json",
+    "tagName": "scw-flex-h-component",
     "category": "layouts"
   },
-  {
-    "name": "ScwFormComponent",
-    "fileName": "ScwFormComponent.json",
-    "tagName": "scw-form-component",
-    "category": "base"
-  },
-  {
-    "name": "ScwIcon",
-    "fileName": "ScwIcon.json",
-    "tagName": "scw-icon",
-    "category": "interactive"
-  },
   {
     "name": "ScwImage",
     "fileName": "ScwImage.json",
@@ -78,9 +66,9 @@
     "category": "interactive"
   },
   {
-    "name": "ScwInput",
-    "fileName": "ScwInput.json",
-    "tagName": "scw-input",
+    "name": "ScwForm",
+    "fileName": "ScwForm.json",
+    "tagName": "scw-form",
     "category": "form"
   },
   {
@@ -90,9 +78,9 @@
     "category": "form"
   },
   {
-    "name": "ScwForm",
-    "fileName": "ScwForm.json",
-    "tagName": "scw-form",
+    "name": "ScwInput",
+    "fileName": "ScwInput.json",
+    "tagName": "scw-input",
     "category": "form"
   },
   {
@@ -101,12 +89,6 @@
     "tagName": "scw-link-base",
     "category": "interactive"
   },
-  {
-    "name": "ScwInputLayout",
-    "fileName": "ScwInputLayout.json",
-    "tagName": "scw-input-layout",
-    "category": "form"
-  },
   {
     "name": "ScwLayoutComponent",
     "fileName": "ScwLayoutComponent.json",
@@ -114,10 +96,16 @@
     "category": "layouts"
   },
   {
-    "name": "ScwLink",
-    "fileName": "ScwLink.json",
-    "tagName": "scw-link",
-    "category": "interactive"
+    "name": "ScwPaneComponent",
+    "fileName": "ScwPaneComponent.json",
+    "tagName": "scw-pane-component",
+    "category": "layouts"
+  },
+  {
+    "name": "ScwInputLayout",
+    "fileName": "ScwInputLayout.json",
+    "tagName": "scw-input-layout",
+    "category": "form"
   },
   {
     "name": "ScwMenu",
@@ -132,15 +120,9 @@
     "category": "interactive"
   },
   {
-    "name": "ScwMenuItem",
-    "fileName": "ScwMenuItem.json",
-    "tagName": "scw-menu-item",
-    "category": "interactive"
-  },
-  {
-    "name": "ScwPaneComponent",
-    "fileName": "ScwPaneComponent.json",
-    "tagName": "scw-pane-component",
+    "name": "ScwResponsive",
+    "fileName": "ScwResponsive.json",
+    "tagName": "scw-responsive",
     "category": "layouts"
   },
   {
@@ -150,10 +132,10 @@
     "category": "form"
   },
   {
-    "name": "ScwResponsive",
-    "fileName": "ScwResponsive.json",
-    "tagName": "scw-responsive",
-    "category": "layouts"
+    "name": "ScwSingleInputLayout",
+    "fileName": "ScwSingleInputLayout.json",
+    "tagName": "scw-single-input-layout",
+    "category": "form"
   },
   {
     "name": "ScwSingleInput",
@@ -162,17 +144,11 @@
     "category": "form"
   },
   {
-    "name": "ScwSingleInputLayout",
-    "fileName": "ScwSingleInputLayout.json",
-    "tagName": "scw-single-input-layout",
+    "name": "ScwTextarea",
+    "fileName": "ScwTextarea.json",
+    "tagName": "scw-textarea",
     "category": "form"
   },
-  {
-    "name": "ScwStackComponent",
-    "fileName": "ScwStackComponent.json",
-    "tagName": "scw-stack-component",
-    "category": "layouts"
-  },
   {
     "name": "ScwTest",
     "fileName": "ScwTest.json",
@@ -180,10 +156,10 @@
     "category": "interactive"
   },
   {
-    "name": "ScwTextarea",
-    "fileName": "ScwTextarea.json",
-    "tagName": "scw-textarea",
-    "category": "form"
+    "name": "ScwStackComponent",
+    "fileName": "ScwStackComponent.json",
+    "tagName": "scw-stack-component",
+    "category": "layouts"
   },
   {
     "name": "ScwValidate",
@@ -196,5 +172,29 @@
     "fileName": "ScwValidation.json",
     "tagName": "scw-validation",
     "category": "form"
+  },
+  {
+    "name": "ScwHeading",
+    "fileName": "ScwHeading.json",
+    "tagName": "scw-heading",
+    "category": "interactive"
+  },
+  {
+    "name": "ScwIcon",
+    "fileName": "ScwIcon.json",
+    "tagName": "scw-icon",
+    "category": "interactive"
+  },
+  {
+    "name": "ScwLink",
+    "fileName": "ScwLink.json",
+    "tagName": "scw-link",
+    "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.18",
+  "version": "0.0.21",
   "navigation": [
     {
       "id": "tokens",

package/dist/scw-alert/ScwAlert.js

@@ -1,2 +1,2 @@
-import{a}from"../chunks/chunk.IVLESGJX.js";import"../chunks/chunk.OXJR2CBC.js";import"../chunks/chunk.QRG5WBRU.js";import"../chunks/chunk.HCMPRDIX.js";import"../chunks/chunk.BK6PO2CX.js";import"../chunks/chunk.WQARFGAY.js";import"../chunks/chunk.AY3YRO2L.js";import"../chunks/chunk.WWTEGHW5.js";import"../chunks/chunk.WO7EIYQ3.js";import"../chunks/chunk.ZZQE6TG6.js";import"../chunks/chunk.2NDGSXCD.js";import"../chunks/chunk.ZS4C3T6Z.js";import"../chunks/chunk.3MIP3PMW.js";import"../chunks/chunk.5YJY6NT6.js";export{a as default};
+import{a}from"../chunks/chunk.O5A7YZKV.js";import"../chunks/chunk.S4MESEBR.js";import"../chunks/chunk.QRG5WBRU.js";import"../chunks/chunk.HCMPRDIX.js";import"../chunks/chunk.BK6PO2CX.js";import"../chunks/chunk.WQARFGAY.js";import"../chunks/chunk.AY3YRO2L.js";import"../chunks/chunk.WWTEGHW5.js";import"../chunks/chunk.WO7EIYQ3.js";import"../chunks/chunk.ZZQE6TG6.js";import"../chunks/chunk.2NDGSXCD.js";import"../chunks/chunk.ZS4C3T6Z.js";import"../chunks/chunk.3MIP3PMW.js";import"../chunks/chunk.5YJY6NT6.js";export{a as default};
 //# sourceMappingURL=ScwAlert.js.map

package/dist/scw-alert/scw-alert.js

@@ -1,2 +1,2 @@
-import"../chunks/chunk.AAY3CIZJ.js";import"../chunks/chunk.IVLESGJX.js";import"../chunks/chunk.OXJR2CBC.js";import"../chunks/chunk.QRG5WBRU.js";import"../chunks/chunk.HCMPRDIX.js";import"../chunks/chunk.BK6PO2CX.js";import"../chunks/chunk.WQARFGAY.js";import"../chunks/chunk.AY3YRO2L.js";import"../chunks/chunk.WWTEGHW5.js";import"../chunks/chunk.WO7EIYQ3.js";import"../chunks/chunk.ZZQE6TG6.js";import"../chunks/chunk.2NDGSXCD.js";import"../chunks/chunk.ZS4C3T6Z.js";import"../chunks/chunk.3MIP3PMW.js";import"../chunks/chunk.5YJY6NT6.js";
+import"../chunks/chunk.SIJSFRVB.js";import"../chunks/chunk.O5A7YZKV.js";import"../chunks/chunk.S4MESEBR.js";import"../chunks/chunk.QRG5WBRU.js";import"../chunks/chunk.HCMPRDIX.js";import"../chunks/chunk.BK6PO2CX.js";import"../chunks/chunk.WQARFGAY.js";import"../chunks/chunk.AY3YRO2L.js";import"../chunks/chunk.WWTEGHW5.js";import"../chunks/chunk.WO7EIYQ3.js";import"../chunks/chunk.ZZQE6TG6.js";import"../chunks/chunk.2NDGSXCD.js";import"../chunks/chunk.ZS4C3T6Z.js";import"../chunks/chunk.3MIP3PMW.js";import"../chunks/chunk.5YJY6NT6.js";
 //# sourceMappingURL=scw-alert.js.map

package/dist/scw-button/ScwButton.js

@@ -1,2 +1,2 @@
-import{a}from"../chunks/chunk.6ZMSNT4Z.js";import"../chunks/chunk.ME4SPAUY.js";import"../chunks/chunk.PXQQTQKT.js";import"../chunks/chunk.K3V3AEZG.js";import"../chunks/chunk.27N4OQ6C.js";import"../chunks/chunk.FKI5D2PU.js";import"../chunks/chunk.VCT62IUP.js";import"../chunks/chunk.2VW3SHYK.js";import"../chunks/chunk.HVX5PATU.js";import"../chunks/chunk.IDOYH5TU.js";import"../chunks/chunk.5HZ4WTGH.js";import"../chunks/chunk.OXJR2CBC.js";import"../chunks/chunk.QRG5WBRU.js";import"../chunks/chunk.HCMPRDIX.js";import"../chunks/chunk.BK6PO2CX.js";import"../chunks/chunk.WQARFGAY.js";import"../chunks/chunk.AY3YRO2L.js";import"../chunks/chunk.WWTEGHW5.js";import"../chunks/chunk.WO7EIYQ3.js";import"../chunks/chunk.ZZQE6TG6.js";import"../chunks/chunk.2NDGSXCD.js";import"../chunks/chunk.ZS4C3T6Z.js";import"../chunks/chunk.3MIP3PMW.js";import"../chunks/chunk.5YJY6NT6.js";export{a as default};
+import{a}from"../chunks/chunk.KLCHR5KI.js";import"../chunks/chunk.RBSBLP6E.js";import"../chunks/chunk.PXQQTQKT.js";import"../chunks/chunk.K3V3AEZG.js";import"../chunks/chunk.27N4OQ6C.js";import"../chunks/chunk.2SWJYWHF.js";import"../chunks/chunk.VCT62IUP.js";import"../chunks/chunk.2VW3SHYK.js";import"../chunks/chunk.LAQTQIRZ.js";import"../chunks/chunk.7VW267FJ.js";import"../chunks/chunk.5HZ4WTGH.js";import"../chunks/chunk.S4MESEBR.js";import"../chunks/chunk.QRG5WBRU.js";import"../chunks/chunk.HCMPRDIX.js";import"../chunks/chunk.BK6PO2CX.js";import"../chunks/chunk.WQARFGAY.js";import"../chunks/chunk.AY3YRO2L.js";import"../chunks/chunk.WWTEGHW5.js";import"../chunks/chunk.WO7EIYQ3.js";import"../chunks/chunk.ZZQE6TG6.js";import"../chunks/chunk.2NDGSXCD.js";import"../chunks/chunk.ZS4C3T6Z.js";import"../chunks/chunk.3MIP3PMW.js";import"../chunks/chunk.5YJY6NT6.js";export{a as default};
 //# sourceMappingURL=ScwButton.js.map

package/dist/scw-button/scw-button.js

@@ -1,2 +1,2 @@
-import"../chunks/chunk.C6XDQDFO.js";import"../chunks/chunk.6ZMSNT4Z.js";import"../chunks/chunk.ME4SPAUY.js";import"../chunks/chunk.PXQQTQKT.js";import"../chunks/chunk.K3V3AEZG.js";import"../chunks/chunk.27N4OQ6C.js";import"../chunks/chunk.FKI5D2PU.js";import"../chunks/chunk.VCT62IUP.js";import"../chunks/chunk.2VW3SHYK.js";import"../chunks/chunk.HVX5PATU.js";import"../chunks/chunk.IDOYH5TU.js";import"../chunks/chunk.5HZ4WTGH.js";import"../chunks/chunk.OXJR2CBC.js";import"../chunks/chunk.QRG5WBRU.js";import"../chunks/chunk.HCMPRDIX.js";import"../chunks/chunk.BK6PO2CX.js";import"../chunks/chunk.WQARFGAY.js";import"../chunks/chunk.AY3YRO2L.js";import"../chunks/chunk.WWTEGHW5.js";import"../chunks/chunk.WO7EIYQ3.js";import"../chunks/chunk.ZZQE6TG6.js";import"../chunks/chunk.2NDGSXCD.js";import"../chunks/chunk.ZS4C3T6Z.js";import"../chunks/chunk.3MIP3PMW.js";import"../chunks/chunk.5YJY6NT6.js";
+import"../chunks/chunk.7RDBE3IG.js";import"../chunks/chunk.KLCHR5KI.js";import"../chunks/chunk.RBSBLP6E.js";import"../chunks/chunk.PXQQTQKT.js";import"../chunks/chunk.K3V3AEZG.js";import"../chunks/chunk.27N4OQ6C.js";import"../chunks/chunk.2SWJYWHF.js";import"../chunks/chunk.VCT62IUP.js";import"../chunks/chunk.2VW3SHYK.js";import"../chunks/chunk.LAQTQIRZ.js";import"../chunks/chunk.7VW267FJ.js";import"../chunks/chunk.5HZ4WTGH.js";import"../chunks/chunk.S4MESEBR.js";import"../chunks/chunk.QRG5WBRU.js";import"../chunks/chunk.HCMPRDIX.js";import"../chunks/chunk.BK6PO2CX.js";import"../chunks/chunk.WQARFGAY.js";import"../chunks/chunk.AY3YRO2L.js";import"../chunks/chunk.WWTEGHW5.js";import"../chunks/chunk.WO7EIYQ3.js";import"../chunks/chunk.ZZQE6TG6.js";import"../chunks/chunk.2NDGSXCD.js";import"../chunks/chunk.ZS4C3T6Z.js";import"../chunks/chunk.3MIP3PMW.js";import"../chunks/chunk.5YJY6NT6.js";
 //# sourceMappingURL=scw-button.js.map

package/dist/scw-card/ScwCard.js

@@ -1,2 +1,2 @@
-import{a}from"../chunks/chunk.5MKWHHCQ.js";import"../chunks/chunk.RGGLFZST.js";import"../chunks/chunk.HVX5PATU.js";import"../chunks/chunk.IDOYH5TU.js";import"../chunks/chunk.5HZ4WTGH.js";import"../chunks/chunk.OXJR2CBC.js";import"../chunks/chunk.QRG5WBRU.js";import"../chunks/chunk.HCMPRDIX.js";import"../chunks/chunk.BK6PO2CX.js";import"../chunks/chunk.WQARFGAY.js";import"../chunks/chunk.AY3YRO2L.js";import"../chunks/chunk.WWTEGHW5.js";import"../chunks/chunk.WO7EIYQ3.js";import"../chunks/chunk.ZZQE6TG6.js";import"../chunks/chunk.2NDGSXCD.js";import"../chunks/chunk.ZS4C3T6Z.js";import"../chunks/chunk.3MIP3PMW.js";import"../chunks/chunk.UM2EZXNH.js";import"../chunks/chunk.IQBNP7BC.js";import"../chunks/chunk.5YJY6NT6.js";export{a as default};
+import{a}from"../chunks/chunk.3FBPDSVX.js";import"../chunks/chunk.RGGLFZST.js";import"../chunks/chunk.LAQTQIRZ.js";import"../chunks/chunk.7VW267FJ.js";import"../chunks/chunk.5HZ4WTGH.js";import"../chunks/chunk.S4MESEBR.js";import"../chunks/chunk.QRG5WBRU.js";import"../chunks/chunk.HCMPRDIX.js";import"../chunks/chunk.BK6PO2CX.js";import"../chunks/chunk.WQARFGAY.js";import"../chunks/chunk.AY3YRO2L.js";import"../chunks/chunk.WWTEGHW5.js";import"../chunks/chunk.WO7EIYQ3.js";import"../chunks/chunk.ZZQE6TG6.js";import"../chunks/chunk.2NDGSXCD.js";import"../chunks/chunk.ZS4C3T6Z.js";import"../chunks/chunk.3MIP3PMW.js";import"../chunks/chunk.Y2P62L7U.js";import"../chunks/chunk.IQBNP7BC.js";import"../chunks/chunk.5YJY6NT6.js";export{a as default};
 //# sourceMappingURL=ScwCard.js.map

package/dist/scw-card/scw-card-light-dom.js

@@ -1,2 +1,2 @@
-import{a}from"../chunks/chunk.UM2EZXNH.js";import"../chunks/chunk.IQBNP7BC.js";import"../chunks/chunk.5YJY6NT6.js";export{a as default};
+import{a}from"../chunks/chunk.Y2P62L7U.js";import"../chunks/chunk.IQBNP7BC.js";import"../chunks/chunk.5YJY6NT6.js";export{a as default};
 //# sourceMappingURL=scw-card-light-dom.js.map

package/dist/scw-card/scw-card.js

@@ -1,2 +1,2 @@
-import"../chunks/chunk.SFYYUOOR.js";import"../chunks/chunk.5MKWHHCQ.js";import"../chunks/chunk.RGGLFZST.js";import"../chunks/chunk.HVX5PATU.js";import"../chunks/chunk.IDOYH5TU.js";import"../chunks/chunk.5HZ4WTGH.js";import"../chunks/chunk.OXJR2CBC.js";import"../chunks/chunk.QRG5WBRU.js";import"../chunks/chunk.HCMPRDIX.js";import"../chunks/chunk.BK6PO2CX.js";import"../chunks/chunk.WQARFGAY.js";import"../chunks/chunk.AY3YRO2L.js";import"../chunks/chunk.WWTEGHW5.js";import"../chunks/chunk.WO7EIYQ3.js";import"../chunks/chunk.ZZQE6TG6.js";import"../chunks/chunk.2NDGSXCD.js";import"../chunks/chunk.ZS4C3T6Z.js";import"../chunks/chunk.3MIP3PMW.js";import"../chunks/chunk.UM2EZXNH.js";import"../chunks/chunk.IQBNP7BC.js";import"../chunks/chunk.5YJY6NT6.js";
+import"../chunks/chunk.UVVG6NF4.js";import"../chunks/chunk.3FBPDSVX.js";import"../chunks/chunk.RGGLFZST.js";import"../chunks/chunk.LAQTQIRZ.js";import"../chunks/chunk.7VW267FJ.js";import"../chunks/chunk.5HZ4WTGH.js";import"../chunks/chunk.S4MESEBR.js";import"../chunks/chunk.QRG5WBRU.js";import"../chunks/chunk.HCMPRDIX.js";import"../chunks/chunk.BK6PO2CX.js";import"../chunks/chunk.WQARFGAY.js";import"../chunks/chunk.AY3YRO2L.js";import"../chunks/chunk.WWTEGHW5.js";import"../chunks/chunk.WO7EIYQ3.js";import"../chunks/chunk.ZZQE6TG6.js";import"../chunks/chunk.2NDGSXCD.js";import"../chunks/chunk.ZS4C3T6Z.js";import"../chunks/chunk.3MIP3PMW.js";import"../chunks/chunk.Y2P62L7U.js";import"../chunks/chunk.IQBNP7BC.js";import"../chunks/chunk.5YJY6NT6.js";
 //# sourceMappingURL=scw-card.js.map