scu-web-components 0.0.67 → 0.0.68

package/dist/docs/components/ScwHeading.json

@@ -261,7 +261,7 @@
     {
       "title": "Colors",
       "description": "",
-      "code": "\n        <scw-stack scw-gap-2s>\n          \n              <scw-heading\n                \n                aria-label=\"default\">\n              </scw-heading>\n            \n              <scw-heading\n                scw-theme-primary\n                aria-label=\"primary\">\n              </scw-heading>\n            \n              <scw-heading\n                scw-theme-grey\n                aria-label=\"grey\">\n              </scw-heading>\n            \n              <scw-heading\n                scw-theme-checking\n                aria-label=\"checking\">\n              </scw-heading>\n            \n              <scw-heading\n                scw-theme-red-shoes\n                aria-label=\"red-shoes\">\n              </scw-heading>\n            \n              <scw-heading\n                scw-theme-business\n                aria-label=\"business\">\n              </scw-heading>\n            \n              <scw-heading\n                scw-theme-personal\n                aria-label=\"personal\">\n              </scw-heading>\n            \n              <scw-heading\n                scw-theme-heloc\n                aria-label=\"heloc\">\n              </scw-heading>\n            \n              <scw-heading\n                scw-theme-mortgage\n                aria-label=\"mortgage\">\n              </scw-heading>\n            \n              <scw-heading\n                scw-theme-investments\n                aria-label=\"investments\">\n              </scw-heading>\n            \n              <scw-heading\n                scw-theme-credit-cards\n                aria-label=\"credit-cards\">\n              </scw-heading>\n            \n              <scw-heading\n                scw-theme-student\n                aria-label=\"student\">\n              </scw-heading>\n            \n              <scw-heading\n                scw-theme-savings\n                aria-label=\"savings\">\n              </scw-heading>\n            \n        </scw-stack>"
+      "code": "\n        <scw-stack scw-gap-2s>\n          \n              <scw-heading\n                scw-theme-primary\n                aria-label=\"primary\">\n              </scw-heading>\n            \n              <scw-heading\n                scw-theme-grey\n                aria-label=\"grey\">\n              </scw-heading>\n            \n              <scw-heading\n                scw-theme-checking\n                aria-label=\"checking\">\n              </scw-heading>\n            \n              <scw-heading\n                scw-theme-red-shoes\n                aria-label=\"red-shoes\">\n              </scw-heading>\n            \n              <scw-heading\n                scw-theme-business\n                aria-label=\"business\">\n              </scw-heading>\n            \n              <scw-heading\n                scw-theme-personal\n                aria-label=\"personal\">\n              </scw-heading>\n            \n              <scw-heading\n                scw-theme-heloc\n                aria-label=\"heloc\">\n              </scw-heading>\n            \n              <scw-heading\n                scw-theme-mortgage\n                aria-label=\"mortgage\">\n              </scw-heading>\n            \n              <scw-heading\n                scw-theme-investments\n                aria-label=\"investments\">\n              </scw-heading>\n            \n              <scw-heading\n                scw-theme-credit-cards\n                aria-label=\"credit-cards\">\n              </scw-heading>\n            \n              <scw-heading\n                scw-theme-student\n                aria-label=\"student\">\n              </scw-heading>\n            \n              <scw-heading\n                scw-theme-savings\n                aria-label=\"savings\">\n              </scw-heading>\n            \n        </scw-stack>"
     },
     {
       "title": "Button",

package/dist/docs/components/ScwIcon.json

@@ -44,17 +44,6 @@
       "attribute": "size",
       "reflects": true
     },
-    {
-      "kind": "field",
-      "name": "colorBackground",
-      "type": {
-        "text": "boolean"
-      },
-      "default": "false",
-      "description": "(ScwIcon) Background color (w/ accompanying state colors)",
-      "attribute": "color-background",
-      "reflects": true
-    },
     {
       "kind": "field",
       "name": "_svgInfo",
@@ -223,15 +212,6 @@
       "description": "(ScwIcon) Determines the square size of the icon",
       "fieldName": "size"
     },
-    {
-      "name": "color-background",
-      "type": {
-        "text": "boolean"
-      },
-      "default": "false",
-      "description": "(ScwIcon) Background color (w/ accompanying state colors)",
-      "fieldName": "colorBackground"
-    },
     {
       "name": "aria-label",
       "type": {
@@ -320,34 +300,29 @@
       "code": "\n        <scw-flex-h\n          scw-gap-2s\n          scw-margin-bottom-2s>\n          \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"10\"\n                size=\"10\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"20\"\n                size=\"20\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"30\"\n                size=\"30\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"40\"\n                size=\"40\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"50\"\n                size=\"50\">\n              </scw-icon>\n            \n        </scw-flex-h>\n        <scw-flex-h\n          scw-gap-2s>\n          \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"60\"\n                size=\"60\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"70\"\n                size=\"70\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"80\"\n                size=\"80\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"90\"\n                size=\"90\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"100\"\n                size=\"100\">\n              </scw-icon>\n            \n        </scw-flex-h>"
     },
     {
-      "title": "color",
+      "title": "single color styles",
       "description": "Shown with the various line/shape colors.",
-      "code": "\n        <scw-flex-h\n          scw-gap-2s\n          scw-margin-bottom-2s>\n          \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"default\"\n                color=\"default\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"primary\"\n                color=\"primary\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"grey\"\n                color=\"grey\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"checking\"\n                color=\"checking\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"red-shoes\"\n                color=\"red-shoes\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"business\"\n                color=\"business\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"personal\"\n                color=\"personal\">\n              </scw-icon>\n            \n        </scw-flex-h>\n        <scw-flex-h\n          scw-gap-2s>\n          \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"heloc\"\n                color=\"heloc\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"mortgage\"\n                color=\"mortgage\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"investments\"\n                color=\"investments\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"credit-cards\"\n                color=\"credit-cards\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"student\"\n                color=\"student\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"savings\"\n                color=\"savings\">\n              </scw-icon>\n            \n        </scw-flex-h>"
-    },
-    {
-      "title": "background colors",
-      "description": "Shown with the various background colors. Background colors\n      will override (line/shape) colors.",
-      "code": "\n        <scw-flex-h\n          scw-gap-2s\n          scw-margin-bottom-2s>\n          \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"default\"\n                color=\"default\"\n                color-background>\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"primary\"\n                color=\"primary\"\n                color-background>\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"grey\"\n                color=\"grey\"\n                color-background>\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"checking\"\n                color=\"checking\"\n                color-background>\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"red-shoes\"\n                color=\"red-shoes\"\n                color-background>\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"business\"\n                color=\"business\"\n                color-background>\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"personal\"\n                color=\"personal\"\n                color-background>\n              </scw-icon>\n            \n        </scw-flex-h>\n        <scw-flex-h\n          scw-gap-2s>\n          \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"heloc\"\n                color=\"heloc\"\n                color-background>\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"mortgage\"\n                color=\"mortgage\"\n                color-background>\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"investments\"\n                color=\"investments\"\n                color-background>\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"credit-cards\"\n                color=\"credit-cards\"\n                color-background>\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"student\"\n                color=\"student\"\n                color-background>\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"savings\"\n                color=\"savings\"\n                color-background>\n              </scw-icon>\n            \n        </scw-flex-h>"
+      "code": "\n        <scw-flex-h\n          scw-gap-2s\n          scw-margin-bottom-2s>\n          \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"primary\"\n                style=\"--scw-icon-color: var( --scw-color-primary-05 )\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"grey\"\n                style=\"--scw-icon-color: var( --scw-color-grey-05 )\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"checking\"\n                style=\"--scw-icon-color: var( --scw-color-checking-05 )\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"red-shoes\"\n                style=\"--scw-icon-color: var( --scw-color-red-shoes-05 )\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"business\"\n                style=\"--scw-icon-color: var( --scw-color-business-05 )\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"personal\"\n                style=\"--scw-icon-color: var( --scw-color-personal-05 )\">\n              </scw-icon>\n            \n        </scw-flex-h>\n        <scw-flex-h\n          scw-gap-2s>\n          \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"heloc\"\n                style=\"--scw-icon-color: var( --scw-color-heloc-05 )\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"mortgage\"\n                style=\"--scw-icon-color: var( --scw-color-mortgage-05 )\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"investments\"\n                style=\"--scw-icon-color: var( --scw-color-investments-05 )\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"credit-cards\"\n                style=\"--scw-icon-color: var( --scw-color-credit-cards-05 )\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"student\"\n                style=\"--scw-icon-color: var( --scw-color-student-05 )\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"savings\"\n                style=\"--scw-icon-color: var( --scw-color-savings-05 )\">\n              </scw-icon>\n            \n        </scw-flex-h>"
     },
     {
-      "title": "feedback background colors",
+      "title": "feedback colors",
       "description": "scw-icon also has notification colors.",
-      "code": "\n        <scw-flex-h\n          scw-gap-2s\n          scw-margin-bottom-2s>\n          \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"information\"\n                color=\"information\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"warning\"\n                color=\"warning\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"error\"\n                color=\"error\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"success\"\n                color=\"success\">\n              </scw-icon>\n            \n        </scw-flex-h>\n        <scw-flex-h\n          scw-gap-2s>\n          \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"information\"\n                color=\"information\"\n                color-background>\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"warning\"\n                color=\"warning\"\n                color-background>\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"error\"\n                color=\"error\"\n                color-background>\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"success\"\n                color=\"success\"\n                color-background>\n              </scw-icon>\n            \n        </scw-flex-h>"
+      "code": "\n        <scw-flex-h\n          scw-gap-2s\n          scw-margin-bottom-2s>\n          \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"information\"\n                style=\"--scw-icon-color: var( --scw-color-information )\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"warning\"\n                style=\"--scw-icon-color: var( --scw-color-warning )\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"error\"\n                style=\"--scw-icon-color: var( --scw-color-error )\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-placeholder\"\n                aria-label=\"success\"\n                style=\"--scw-icon-color: var( --scw-color-success )\">\n              </scw-icon>\n            \n        </scw-flex-h>"
     },
     {
       "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-gap-2s\n          scw-margin-bottom-2s>\n          \n              <scw-icon\n                icon=\"icon-color-test\"\n                aria-label=\"heloc\"\n                color=\"heloc\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-color-test\"\n                aria-label=\"mortgage\"\n                color=\"mortgage\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-color-test\"\n                aria-label=\"investments\"\n                color=\"investments\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-color-test\"\n                aria-label=\"credit-cards\"\n                color=\"credit-cards\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-color-test\"\n                aria-label=\"student\"\n                color=\"student\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-color-test\"\n                aria-label=\"savings\"\n                color=\"savings\">\n              </scw-icon>\n            \n        </scw-flex-h>\n        <scw-flex-h\n          scw-gap-2s>\n          \n              <scw-icon\n                icon=\"icon-color-test\"\n                aria-label=\"default\"\n                color=\"default\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-color-test\"\n                aria-label=\"primary\"\n                color=\"primary\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-color-test\"\n                aria-label=\"grey\"\n                color=\"grey\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-color-test\"\n                aria-label=\"checking\"\n                color=\"checking\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-color-test\"\n                aria-label=\"red-shoes\"\n                color=\"red-shoes\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-color-test\"\n                aria-label=\"business\"\n                color=\"business\">\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-color-test\"\n                aria-label=\"personal\"\n                color=\"personal\">\n              </scw-icon>\n            \n        </scw-flex-h>"
+      "description": "Specially designed icons can hook into the various stepped\n      colors (primary and accent) as well as recieve theme color overrides.",
+      "code": "\n        <scw-flex-h\n          scw-gap-2s\n          scw-margin-bottom-2s>\n          \n              <scw-icon\n                icon=\"icon-color-test\"\n                aria-label=\"primary\"\n                scw-theme-primary>\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-color-test\"\n                aria-label=\"grey\"\n                scw-theme-grey>\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-color-test\"\n                aria-label=\"checking\"\n                scw-theme-checking>\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-color-test\"\n                aria-label=\"red-shoes\"\n                scw-theme-red-shoes>\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-color-test\"\n                aria-label=\"business\"\n                scw-theme-business>\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-color-test\"\n                aria-label=\"personal\"\n                scw-theme-personal>\n              </scw-icon>\n            \n        </scw-flex-h>\n        <scw-flex-h\n          scw-gap-2s\n          scw-margin-bottom-2s>\n          \n              <scw-icon\n                icon=\"icon-color-test\"\n                aria-label=\"heloc\"\n                scw-theme-heloc>\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-color-test\"\n                aria-label=\"mortgage\"\n                scw-theme-mortgage>\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-color-test\"\n                aria-label=\"investments\"\n                scw-theme-investments>\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-color-test\"\n                aria-label=\"credit-cards\"\n                scw-theme-credit-cards>\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-color-test\"\n                aria-label=\"student\"\n                scw-theme-student>\n              </scw-icon>\n            \n              <scw-icon\n                icon=\"icon-color-test\"\n                aria-label=\"savings\"\n                scw-theme-savings>\n              </scw-icon>\n            \n        </scw-flex-h>"
     },
     {
       "title": "multicolor custom",
       "description": "custom color schemes can be applied by manipulating\n      the theme colors",
-      "code": "\n        <scw-flex-h>\n          <scw-icon\n            style=\"\n              --scw-color-02: #0f0;\n              --scw-color-05: #f00;\"\n            icon=\"icon-color-test\">\n          </scw-icon>\n          <scw-icon\n            style=\"\n              --scw-color-02: #0f0;\n              --scw-color-05: #aaf;\n              --scw-color-08: #00f;\"\n            icon=\"icon-color-test\">\n          </scw-icon>\n        </scw-flex-h>"
+      "code": "\n        <scw-flex-h>\n          <scw-icon\n            style=\"\n              --scw-theme-color-02: #0f0;\n              --scw-theme-color-05: #f00;\"\n            icon=\"icon-color-test\">\n          </scw-icon>\n          <scw-icon\n            style=\"\n              --scw-theme-color-02: #0f0;\n              --scw-theme-color-05: #aaf;\n              --scw-theme-color-08: #00f;\"\n            icon=\"icon-color-test\">\n          </scw-icon>\n        </scw-flex-h>"
     },
     {
       "title": "errors",
-      "description": "scw-icon validates color, background-color, icon, and \n      aria-label (when a link).",
-      "code": "\n        <scw-flex-h\n          scw-gap-2s>\n          <scw-icon\n            icon=\"icon-not-valid\"\n            aria-label=\"invalid icon\">\n          </scw-icon>\n        </scw-flex-h>"
+      "description": "scw-icon validates icon.",
+      "code": "\n        <scw-flex-h\n          scw-gap-2s>\n          <scw-icon\n            icon=\"icon-not-valid\">\n          </scw-icon>\n        </scw-flex-h>"
     }
   ]
 }

package/dist/docs/components/ScwLink.json

@@ -495,7 +495,7 @@
     },
     {
       "title": "Color Examples",
-      "code": "\n      <scw-stack\n        scw-gap-2s>\n          \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-link\n                color=\"default\"\n                design=\"solid\"\n                aria-label=\"default\">\n              </scw-link>\n              <scw-link\n                color=\"default\"\n                design=\"outlined\"\n                aria-label=\"default\">\n              </scw-link>\n              <scw-link\n                color=\"default\"\n                design=\"text\"\n                aria-label=\"default\">\n              </scw-link>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-link\n                color=\"primary\"\n                design=\"solid\"\n                aria-label=\"primary\">\n              </scw-link>\n              <scw-link\n                color=\"primary\"\n                design=\"outlined\"\n                aria-label=\"primary\">\n              </scw-link>\n              <scw-link\n                color=\"primary\"\n                design=\"text\"\n                aria-label=\"primary\">\n              </scw-link>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-link\n                color=\"grey\"\n                design=\"solid\"\n                aria-label=\"grey\">\n              </scw-link>\n              <scw-link\n                color=\"grey\"\n                design=\"outlined\"\n                aria-label=\"grey\">\n              </scw-link>\n              <scw-link\n                color=\"grey\"\n                design=\"text\"\n                aria-label=\"grey\">\n              </scw-link>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-link\n                color=\"checking\"\n                design=\"solid\"\n                aria-label=\"checking\">\n              </scw-link>\n              <scw-link\n                color=\"checking\"\n                design=\"outlined\"\n                aria-label=\"checking\">\n              </scw-link>\n              <scw-link\n                color=\"checking\"\n                design=\"text\"\n                aria-label=\"checking\">\n              </scw-link>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-link\n                color=\"red-shoes\"\n                design=\"solid\"\n                aria-label=\"red-shoes\">\n              </scw-link>\n              <scw-link\n                color=\"red-shoes\"\n                design=\"outlined\"\n                aria-label=\"red-shoes\">\n              </scw-link>\n              <scw-link\n                color=\"red-shoes\"\n                design=\"text\"\n                aria-label=\"red-shoes\">\n              </scw-link>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-link\n                color=\"business\"\n                design=\"solid\"\n                aria-label=\"business\">\n              </scw-link>\n              <scw-link\n                color=\"business\"\n                design=\"outlined\"\n                aria-label=\"business\">\n              </scw-link>\n              <scw-link\n                color=\"business\"\n                design=\"text\"\n                aria-label=\"business\">\n              </scw-link>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-link\n                color=\"personal\"\n                design=\"solid\"\n                aria-label=\"personal\">\n              </scw-link>\n              <scw-link\n                color=\"personal\"\n                design=\"outlined\"\n                aria-label=\"personal\">\n              </scw-link>\n              <scw-link\n                color=\"personal\"\n                design=\"text\"\n                aria-label=\"personal\">\n              </scw-link>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-link\n                color=\"heloc\"\n                design=\"solid\"\n                aria-label=\"heloc\">\n              </scw-link>\n              <scw-link\n                color=\"heloc\"\n                design=\"outlined\"\n                aria-label=\"heloc\">\n              </scw-link>\n              <scw-link\n                color=\"heloc\"\n                design=\"text\"\n                aria-label=\"heloc\">\n              </scw-link>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-link\n                color=\"mortgage\"\n                design=\"solid\"\n                aria-label=\"mortgage\">\n              </scw-link>\n              <scw-link\n                color=\"mortgage\"\n                design=\"outlined\"\n                aria-label=\"mortgage\">\n              </scw-link>\n              <scw-link\n                color=\"mortgage\"\n                design=\"text\"\n                aria-label=\"mortgage\">\n              </scw-link>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-link\n                color=\"investments\"\n                design=\"solid\"\n                aria-label=\"investments\">\n              </scw-link>\n              <scw-link\n                color=\"investments\"\n                design=\"outlined\"\n                aria-label=\"investments\">\n              </scw-link>\n              <scw-link\n                color=\"investments\"\n                design=\"text\"\n                aria-label=\"investments\">\n              </scw-link>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-link\n                color=\"credit-cards\"\n                design=\"solid\"\n                aria-label=\"credit-cards\">\n              </scw-link>\n              <scw-link\n                color=\"credit-cards\"\n                design=\"outlined\"\n                aria-label=\"credit-cards\">\n              </scw-link>\n              <scw-link\n                color=\"credit-cards\"\n                design=\"text\"\n                aria-label=\"credit-cards\">\n              </scw-link>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-link\n                color=\"student\"\n                design=\"solid\"\n                aria-label=\"student\">\n              </scw-link>\n              <scw-link\n                color=\"student\"\n                design=\"outlined\"\n                aria-label=\"student\">\n              </scw-link>\n              <scw-link\n                color=\"student\"\n                design=\"text\"\n                aria-label=\"student\">\n              </scw-link>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-link\n                color=\"savings\"\n                design=\"solid\"\n                aria-label=\"savings\">\n              </scw-link>\n              <scw-link\n                color=\"savings\"\n                design=\"outlined\"\n                aria-label=\"savings\">\n              </scw-link>\n              <scw-link\n                color=\"savings\"\n                design=\"text\"\n                aria-label=\"savings\">\n              </scw-link>\n            </scw-flex-h>\n            \n      </scw-stack>"
+      "code": "\n      <scw-stack\n        scw-gap-2s>\n          \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-link\n                color=\"primary\"\n                design=\"solid\"\n                aria-label=\"primary\">\n              </scw-link>\n              <scw-link\n                color=\"primary\"\n                design=\"outlined\"\n                aria-label=\"primary\">\n              </scw-link>\n              <scw-link\n                color=\"primary\"\n                design=\"text\"\n                aria-label=\"primary\">\n              </scw-link>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-link\n                color=\"grey\"\n                design=\"solid\"\n                aria-label=\"grey\">\n              </scw-link>\n              <scw-link\n                color=\"grey\"\n                design=\"outlined\"\n                aria-label=\"grey\">\n              </scw-link>\n              <scw-link\n                color=\"grey\"\n                design=\"text\"\n                aria-label=\"grey\">\n              </scw-link>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-link\n                color=\"checking\"\n                design=\"solid\"\n                aria-label=\"checking\">\n              </scw-link>\n              <scw-link\n                color=\"checking\"\n                design=\"outlined\"\n                aria-label=\"checking\">\n              </scw-link>\n              <scw-link\n                color=\"checking\"\n                design=\"text\"\n                aria-label=\"checking\">\n              </scw-link>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-link\n                color=\"red-shoes\"\n                design=\"solid\"\n                aria-label=\"red-shoes\">\n              </scw-link>\n              <scw-link\n                color=\"red-shoes\"\n                design=\"outlined\"\n                aria-label=\"red-shoes\">\n              </scw-link>\n              <scw-link\n                color=\"red-shoes\"\n                design=\"text\"\n                aria-label=\"red-shoes\">\n              </scw-link>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-link\n                color=\"business\"\n                design=\"solid\"\n                aria-label=\"business\">\n              </scw-link>\n              <scw-link\n                color=\"business\"\n                design=\"outlined\"\n                aria-label=\"business\">\n              </scw-link>\n              <scw-link\n                color=\"business\"\n                design=\"text\"\n                aria-label=\"business\">\n              </scw-link>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-link\n                color=\"personal\"\n                design=\"solid\"\n                aria-label=\"personal\">\n              </scw-link>\n              <scw-link\n                color=\"personal\"\n                design=\"outlined\"\n                aria-label=\"personal\">\n              </scw-link>\n              <scw-link\n                color=\"personal\"\n                design=\"text\"\n                aria-label=\"personal\">\n              </scw-link>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-link\n                color=\"heloc\"\n                design=\"solid\"\n                aria-label=\"heloc\">\n              </scw-link>\n              <scw-link\n                color=\"heloc\"\n                design=\"outlined\"\n                aria-label=\"heloc\">\n              </scw-link>\n              <scw-link\n                color=\"heloc\"\n                design=\"text\"\n                aria-label=\"heloc\">\n              </scw-link>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-link\n                color=\"mortgage\"\n                design=\"solid\"\n                aria-label=\"mortgage\">\n              </scw-link>\n              <scw-link\n                color=\"mortgage\"\n                design=\"outlined\"\n                aria-label=\"mortgage\">\n              </scw-link>\n              <scw-link\n                color=\"mortgage\"\n                design=\"text\"\n                aria-label=\"mortgage\">\n              </scw-link>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-link\n                color=\"investments\"\n                design=\"solid\"\n                aria-label=\"investments\">\n              </scw-link>\n              <scw-link\n                color=\"investments\"\n                design=\"outlined\"\n                aria-label=\"investments\">\n              </scw-link>\n              <scw-link\n                color=\"investments\"\n                design=\"text\"\n                aria-label=\"investments\">\n              </scw-link>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-link\n                color=\"credit-cards\"\n                design=\"solid\"\n                aria-label=\"credit-cards\">\n              </scw-link>\n              <scw-link\n                color=\"credit-cards\"\n                design=\"outlined\"\n                aria-label=\"credit-cards\">\n              </scw-link>\n              <scw-link\n                color=\"credit-cards\"\n                design=\"text\"\n                aria-label=\"credit-cards\">\n              </scw-link>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-link\n                color=\"student\"\n                design=\"solid\"\n                aria-label=\"student\">\n              </scw-link>\n              <scw-link\n                color=\"student\"\n                design=\"outlined\"\n                aria-label=\"student\">\n              </scw-link>\n              <scw-link\n                color=\"student\"\n                design=\"text\"\n                aria-label=\"student\">\n              </scw-link>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-link\n                color=\"savings\"\n                design=\"solid\"\n                aria-label=\"savings\">\n              </scw-link>\n              <scw-link\n                color=\"savings\"\n                design=\"outlined\"\n                aria-label=\"savings\">\n              </scw-link>\n              <scw-link\n                color=\"savings\"\n                design=\"text\"\n                aria-label=\"savings\">\n              </scw-link>\n            </scw-flex-h>\n            \n      </scw-stack>"
     },
     {
       "title": "Disabled State",

package/dist/docs/components/ScwMenuItem.json

@@ -588,7 +588,7 @@
     },
     {
       "title": "Color Examples",
-      "code": "\n      <scw-stack\n        scw-gap-2s>\n          \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-menu-item\n                color=\"default\"\n                design=\"solid\"\n                aria-label=\"default\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"default\"\n                design=\"outlined\"\n                aria-label=\"default\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"default\"\n                design=\"text\"\n                aria-label=\"default\">\n              </scw-menu-item>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-menu-item\n                color=\"primary\"\n                design=\"solid\"\n                aria-label=\"primary\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"primary\"\n                design=\"outlined\"\n                aria-label=\"primary\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"primary\"\n                design=\"text\"\n                aria-label=\"primary\">\n              </scw-menu-item>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-menu-item\n                color=\"grey\"\n                design=\"solid\"\n                aria-label=\"grey\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"grey\"\n                design=\"outlined\"\n                aria-label=\"grey\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"grey\"\n                design=\"text\"\n                aria-label=\"grey\">\n              </scw-menu-item>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-menu-item\n                color=\"checking\"\n                design=\"solid\"\n                aria-label=\"checking\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"checking\"\n                design=\"outlined\"\n                aria-label=\"checking\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"checking\"\n                design=\"text\"\n                aria-label=\"checking\">\n              </scw-menu-item>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-menu-item\n                color=\"red-shoes\"\n                design=\"solid\"\n                aria-label=\"red-shoes\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"red-shoes\"\n                design=\"outlined\"\n                aria-label=\"red-shoes\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"red-shoes\"\n                design=\"text\"\n                aria-label=\"red-shoes\">\n              </scw-menu-item>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-menu-item\n                color=\"business\"\n                design=\"solid\"\n                aria-label=\"business\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"business\"\n                design=\"outlined\"\n                aria-label=\"business\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"business\"\n                design=\"text\"\n                aria-label=\"business\">\n              </scw-menu-item>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-menu-item\n                color=\"personal\"\n                design=\"solid\"\n                aria-label=\"personal\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"personal\"\n                design=\"outlined\"\n                aria-label=\"personal\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"personal\"\n                design=\"text\"\n                aria-label=\"personal\">\n              </scw-menu-item>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-menu-item\n                color=\"heloc\"\n                design=\"solid\"\n                aria-label=\"heloc\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"heloc\"\n                design=\"outlined\"\n                aria-label=\"heloc\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"heloc\"\n                design=\"text\"\n                aria-label=\"heloc\">\n              </scw-menu-item>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-menu-item\n                color=\"mortgage\"\n                design=\"solid\"\n                aria-label=\"mortgage\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"mortgage\"\n                design=\"outlined\"\n                aria-label=\"mortgage\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"mortgage\"\n                design=\"text\"\n                aria-label=\"mortgage\">\n              </scw-menu-item>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-menu-item\n                color=\"investments\"\n                design=\"solid\"\n                aria-label=\"investments\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"investments\"\n                design=\"outlined\"\n                aria-label=\"investments\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"investments\"\n                design=\"text\"\n                aria-label=\"investments\">\n              </scw-menu-item>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-menu-item\n                color=\"credit-cards\"\n                design=\"solid\"\n                aria-label=\"credit-cards\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"credit-cards\"\n                design=\"outlined\"\n                aria-label=\"credit-cards\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"credit-cards\"\n                design=\"text\"\n                aria-label=\"credit-cards\">\n              </scw-menu-item>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-menu-item\n                color=\"student\"\n                design=\"solid\"\n                aria-label=\"student\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"student\"\n                design=\"outlined\"\n                aria-label=\"student\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"student\"\n                design=\"text\"\n                aria-label=\"student\">\n              </scw-menu-item>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-menu-item\n                color=\"savings\"\n                design=\"solid\"\n                aria-label=\"savings\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"savings\"\n                design=\"outlined\"\n                aria-label=\"savings\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"savings\"\n                design=\"text\"\n                aria-label=\"savings\">\n              </scw-menu-item>\n            </scw-flex-h>\n            \n      </scw-stack>"
+      "code": "\n      <scw-stack\n        scw-gap-2s>\n          \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-menu-item\n                color=\"primary\"\n                design=\"solid\"\n                aria-label=\"primary\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"primary\"\n                design=\"outlined\"\n                aria-label=\"primary\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"primary\"\n                design=\"text\"\n                aria-label=\"primary\">\n              </scw-menu-item>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-menu-item\n                color=\"grey\"\n                design=\"solid\"\n                aria-label=\"grey\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"grey\"\n                design=\"outlined\"\n                aria-label=\"grey\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"grey\"\n                design=\"text\"\n                aria-label=\"grey\">\n              </scw-menu-item>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-menu-item\n                color=\"checking\"\n                design=\"solid\"\n                aria-label=\"checking\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"checking\"\n                design=\"outlined\"\n                aria-label=\"checking\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"checking\"\n                design=\"text\"\n                aria-label=\"checking\">\n              </scw-menu-item>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-menu-item\n                color=\"red-shoes\"\n                design=\"solid\"\n                aria-label=\"red-shoes\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"red-shoes\"\n                design=\"outlined\"\n                aria-label=\"red-shoes\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"red-shoes\"\n                design=\"text\"\n                aria-label=\"red-shoes\">\n              </scw-menu-item>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-menu-item\n                color=\"business\"\n                design=\"solid\"\n                aria-label=\"business\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"business\"\n                design=\"outlined\"\n                aria-label=\"business\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"business\"\n                design=\"text\"\n                aria-label=\"business\">\n              </scw-menu-item>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-menu-item\n                color=\"personal\"\n                design=\"solid\"\n                aria-label=\"personal\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"personal\"\n                design=\"outlined\"\n                aria-label=\"personal\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"personal\"\n                design=\"text\"\n                aria-label=\"personal\">\n              </scw-menu-item>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-menu-item\n                color=\"heloc\"\n                design=\"solid\"\n                aria-label=\"heloc\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"heloc\"\n                design=\"outlined\"\n                aria-label=\"heloc\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"heloc\"\n                design=\"text\"\n                aria-label=\"heloc\">\n              </scw-menu-item>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-menu-item\n                color=\"mortgage\"\n                design=\"solid\"\n                aria-label=\"mortgage\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"mortgage\"\n                design=\"outlined\"\n                aria-label=\"mortgage\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"mortgage\"\n                design=\"text\"\n                aria-label=\"mortgage\">\n              </scw-menu-item>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-menu-item\n                color=\"investments\"\n                design=\"solid\"\n                aria-label=\"investments\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"investments\"\n                design=\"outlined\"\n                aria-label=\"investments\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"investments\"\n                design=\"text\"\n                aria-label=\"investments\">\n              </scw-menu-item>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-menu-item\n                color=\"credit-cards\"\n                design=\"solid\"\n                aria-label=\"credit-cards\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"credit-cards\"\n                design=\"outlined\"\n                aria-label=\"credit-cards\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"credit-cards\"\n                design=\"text\"\n                aria-label=\"credit-cards\">\n              </scw-menu-item>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-menu-item\n                color=\"student\"\n                design=\"solid\"\n                aria-label=\"student\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"student\"\n                design=\"outlined\"\n                aria-label=\"student\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"student\"\n                design=\"text\"\n                aria-label=\"student\">\n              </scw-menu-item>\n            </scw-flex-h>\n            \n              <scw-flex-h\n              scw-gap-2s>\n              <scw-menu-item\n                color=\"savings\"\n                design=\"solid\"\n                aria-label=\"savings\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"savings\"\n                design=\"outlined\"\n                aria-label=\"savings\">\n              </scw-menu-item>\n              <scw-menu-item\n                color=\"savings\"\n                design=\"text\"\n                aria-label=\"savings\">\n              </scw-menu-item>\n            </scw-flex-h>\n            \n      </scw-stack>"
     },
     {
       "title": "Disabled State",

package/dist/docs/components/ScwSlider.json

@@ -80,8 +80,7 @@
         "text": "string"
       },
       "default": "''",
-      "attribute": "tease",
-      "reflects": true
+      "attribute": "tease"
     },
     {
       "kind": "field",
@@ -184,6 +183,33 @@
       "privacy": "private",
       "default": "false"
     },
+    {
+      "kind": "field",
+      "name": "nextEnabled",
+      "type": {
+        "text": "boolean"
+      },
+      "privacy": "private",
+      "default": "false"
+    },
+    {
+      "kind": "field",
+      "name": "prevEnabled",
+      "type": {
+        "text": "boolean"
+      },
+      "privacy": "private",
+      "default": "false"
+    },
+    {
+      "kind": "field",
+      "name": "slideOffset",
+      "type": {
+        "text": "string"
+      },
+      "privacy": "private",
+      "default": "'0%'"
+    },
     {
       "kind": "field",
       "name": "boundSlideHandler",
@@ -328,6 +354,12 @@
       "privacy": "private",
       "description": "setIconWidth\n\nsets the width of the icons"
     },
+    {
+      "kind": "method",
+      "name": "handleTeasUpdate",
+      "privacy": "private",
+      "description": "handleTeasUpdate\n\nsets the teas value via js for ssr"
+    },
     {
       "kind": "method",
       "name": "initializeSlides",

package/dist/docs/components/manifest.json

@@ -6,9 +6,9 @@
     "category": "interactive"
   },
   {
-    "name": "ScwBlock",
-    "fileName": "ScwBlock.json",
-    "tagName": "scw-block",
+    "name": "ScwButton",
+    "fileName": "ScwButton.json",
+    "tagName": "scw-button",
     "category": "interactive"
   },
   {
@@ -18,9 +18,9 @@
     "category": "interactive"
   },
   {
-    "name": "ScwButton",
-    "fileName": "ScwButton.json",
-    "tagName": "scw-button",
+    "name": "ScwBlock",
+    "fileName": "ScwBlock.json",
+    "tagName": "scw-block",
     "category": "interactive"
   },
   {
@@ -41,12 +41,6 @@
     "tagName": "scw-element-component",
     "category": "layouts"
   },
-  {
-    "name": "ScwFloatComponent",
-    "fileName": "ScwFloatComponent.json",
-    "tagName": "scw-float-component",
-    "category": "layouts"
-  },
   {
     "name": "ScwFlexHComponent",
     "fileName": "ScwFlexHComponent.json",
@@ -54,10 +48,16 @@
     "category": "layouts"
   },
   {
-    "name": "ScwForm",
-    "fileName": "ScwForm.json",
-    "tagName": "scw-form",
-    "category": "form"
+    "name": "ScwFlexVComponent",
+    "fileName": "ScwFlexVComponent.json",
+    "tagName": "scw-flex-v-component",
+    "category": "layouts"
+  },
+  {
+    "name": "ScwFloatComponent",
+    "fileName": "ScwFloatComponent.json",
+    "tagName": "scw-float-component",
+    "category": "layouts"
   },
   {
     "name": "ScwFormComponent",
@@ -65,6 +65,12 @@
     "tagName": "scw-form-component",
     "category": "base"
   },
+  {
+    "name": "ScwForm",
+    "fileName": "ScwForm.json",
+    "tagName": "scw-form",
+    "category": "form"
+  },
   {
     "name": "ScwImage",
     "fileName": "ScwImage.json",
@@ -72,10 +78,10 @@
     "category": "interactive"
   },
   {
-    "name": "ScwFlexVComponent",
-    "fileName": "ScwFlexVComponent.json",
-    "tagName": "scw-flex-v-component",
-    "category": "layouts"
+    "name": "ScwInputField",
+    "fileName": "ScwInputField.json",
+    "tagName": "scw-input-field",
+    "category": "form"
   },
   {
     "name": "ScwInput",
@@ -84,9 +90,9 @@
     "category": "form"
   },
   {
-    "name": "ScwInputField",
-    "fileName": "ScwInputField.json",
-    "tagName": "scw-input-field",
+    "name": "ScwInputLayout",
+    "fileName": "ScwInputLayout.json",
+    "tagName": "scw-input-layout",
     "category": "form"
   },
   {
@@ -95,30 +101,24 @@
     "tagName": "scw-layout-component",
     "category": "layouts"
   },
-  {
-    "name": "ScwInputLayout",
-    "fileName": "ScwInputLayout.json",
-    "tagName": "scw-input-layout",
-    "category": "form"
-  },
   {
     "name": "ScwLinkBase",
     "fileName": "ScwLinkBase.json",
     "tagName": "scw-link-base",
     "category": "interactive"
   },
-  {
-    "name": "ScwPageAlert",
-    "fileName": "ScwPageAlert.json",
-    "tagName": "scw-page-alert",
-    "category": "interactive"
-  },
   {
     "name": "ScwMenu",
     "fileName": "ScwMenu.json",
     "tagName": "scw-menu",
     "category": "interactive"
   },
+  {
+    "name": "ScwPageAlert",
+    "fileName": "ScwPageAlert.json",
+    "tagName": "scw-page-alert",
+    "category": "interactive"
+  },
   {
     "name": "ScwPaneComponent",
     "fileName": "ScwPaneComponent.json",
@@ -143,18 +143,18 @@
     "tagName": "scw-single-input",
     "category": "form"
   },
-  {
-    "name": "ScwSingleInputLayout",
-    "fileName": "ScwSingleInputLayout.json",
-    "tagName": "scw-single-input-layout",
-    "category": "form"
-  },
   {
     "name": "ScwSlider",
     "fileName": "ScwSlider.json",
     "tagName": "scw-slider",
     "category": "interactive"
   },
+  {
+    "name": "ScwSingleInputLayout",
+    "fileName": "ScwSingleInputLayout.json",
+    "tagName": "scw-single-input-layout",
+    "category": "form"
+  },
   {
     "name": "ScwStackComponent",
     "fileName": "ScwStackComponent.json",
@@ -167,18 +167,18 @@
     "tagName": "scw-test",
     "category": "interactive"
   },
-  {
-    "name": "ScwValidate",
-    "fileName": "ScwValidate.json",
-    "tagName": "scw-validate",
-    "category": "form"
-  },
   {
     "name": "ScwStepper",
     "fileName": "ScwStepper.json",
     "tagName": "scw-stepper",
     "category": "interactive"
   },
+  {
+    "name": "ScwValidate",
+    "fileName": "ScwValidate.json",
+    "tagName": "scw-validate",
+    "category": "form"
+  },
   {
     "name": "ScwTextarea",
     "fileName": "ScwTextarea.json",
@@ -191,18 +191,18 @@
     "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": "ScwHeading",
+    "fileName": "ScwHeading.json",
+    "tagName": "scw-heading",
+    "category": "interactive"
+  },
   {
     "name": "ScwLink",
     "fileName": "ScwLink.json",

package/dist/docs/config.json

@@ -1,20 +1,20 @@
 {
   "title": "Summit Credit Union Web Design System (SCW)",
-  "version": "0.0.66",
+  "version": "0.0.68",
   "navigation": [
     {
       "id": "tokens",
       "title": "Component SASS",
-      "url": "../tokens/tokens.html?0.0.66"
+      "url": "../tokens/tokens.html?0.0.68"
     },
     {
       "id": "css",
       "title": "CSS",
-      "url": "../tokens/css.html?clipboardType=classes&0.0.66"
+      "url": "../tokens/css.html?clipboardType=classes&0.0.68"
     }
   ],
-  "moduleEmbed": "const scw = await import('../scw.js'); scw.defineComponents();",
-  "cssLink": "../scw.css",
+  "moduleEmbed": "const scw = await import('../scw.js?1682542768966'); scw.defineComponents();",
+  "cssLink": "../scw.css?1682542768966",
   "documents": [
     {
       "title": "Install",
@@ -28,10 +28,6 @@
       "title": "Styles",
       "url": "./documents/Styles.html"
     },
-    {
-      "title": "Themeing",
-      "url": "./documents/Themeing.html"
-    },
     {
       "title": "Layouts",
       "url": "./documents/Layouts.html"

package/dist/scw-button/ScwButton.js

@@ -1 +1 @@
-import{a}from"../chunks/chunk.NB2UXM6D.js";import"../chunks/chunk.TVWHZK7Q.js";import"../chunks/chunk.MTCXYFTQ.js";import"../chunks/chunk.AKSFDVPZ.js";import"../chunks/chunk.O4I5WK36.js";import"../chunks/chunk.UMR2BU3Z.js";import"../chunks/chunk.Z6P446BB.js";import"../chunks/chunk.YBPGY7E7.js";import"../chunks/chunk.AE3AY6FW.js";import"../chunks/chunk.DMJKBP4H.js";import"../chunks/chunk.NRBAPPP6.js";import"../chunks/chunk.2VHT7O7J.js";import"../chunks/chunk.2J63IRZ7.js";import"../chunks/chunk.W4CRIA2R.js";import"../chunks/chunk.NBAHMDHF.js";import"../chunks/chunk.XWW5KNEG.js";import"../chunks/chunk.L66ACKPC.js";import"../chunks/chunk.D2FLGPWL.js";import"../chunks/chunk.QYZXMI4E.js";import"../chunks/chunk.G2G2TPJK.js";import"../chunks/chunk.KRGVR4EU.js";export{a as default};
+import{a}from"../chunks/chunk.BWG7OWRL.js";import"../chunks/chunk.ZKVWPXJD.js";import"../chunks/chunk.MTCXYFTQ.js";import"../chunks/chunk.AKSFDVPZ.js";import"../chunks/chunk.O4I5WK36.js";import"../chunks/chunk.NQJIOISG.js";import"../chunks/chunk.Z6P446BB.js";import"../chunks/chunk.YBPGY7E7.js";import"../chunks/chunk.DO22HODO.js";import"../chunks/chunk.DMJKBP4H.js";import"../chunks/chunk.NRBAPPP6.js";import"../chunks/chunk.DF6X7MNF.js";import"../chunks/chunk.ZEJUULSN.js";import"../chunks/chunk.W4CRIA2R.js";import"../chunks/chunk.NBAHMDHF.js";import"../chunks/chunk.XWW5KNEG.js";import"../chunks/chunk.L66ACKPC.js";import"../chunks/chunk.D2FLGPWL.js";import"../chunks/chunk.QYZXMI4E.js";import"../chunks/chunk.G2G2TPJK.js";import"../chunks/chunk.KRGVR4EU.js";export{a as default};

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

@@ -1 +1 @@
-import"../chunks/chunk.HLBB625P.js";import"../chunks/chunk.NB2UXM6D.js";import"../chunks/chunk.TVWHZK7Q.js";import"../chunks/chunk.MTCXYFTQ.js";import"../chunks/chunk.AKSFDVPZ.js";import"../chunks/chunk.O4I5WK36.js";import"../chunks/chunk.UMR2BU3Z.js";import"../chunks/chunk.Z6P446BB.js";import"../chunks/chunk.YBPGY7E7.js";import"../chunks/chunk.AE3AY6FW.js";import"../chunks/chunk.DMJKBP4H.js";import"../chunks/chunk.NRBAPPP6.js";import"../chunks/chunk.2VHT7O7J.js";import"../chunks/chunk.2J63IRZ7.js";import"../chunks/chunk.W4CRIA2R.js";import"../chunks/chunk.NBAHMDHF.js";import"../chunks/chunk.XWW5KNEG.js";import"../chunks/chunk.L66ACKPC.js";import"../chunks/chunk.D2FLGPWL.js";import"../chunks/chunk.QYZXMI4E.js";import"../chunks/chunk.G2G2TPJK.js";import"../chunks/chunk.KRGVR4EU.js";
+import"../chunks/chunk.BSB2DCZM.js";import"../chunks/chunk.BWG7OWRL.js";import"../chunks/chunk.ZKVWPXJD.js";import"../chunks/chunk.MTCXYFTQ.js";import"../chunks/chunk.AKSFDVPZ.js";import"../chunks/chunk.O4I5WK36.js";import"../chunks/chunk.NQJIOISG.js";import"../chunks/chunk.Z6P446BB.js";import"../chunks/chunk.YBPGY7E7.js";import"../chunks/chunk.DO22HODO.js";import"../chunks/chunk.DMJKBP4H.js";import"../chunks/chunk.NRBAPPP6.js";import"../chunks/chunk.DF6X7MNF.js";import"../chunks/chunk.ZEJUULSN.js";import"../chunks/chunk.W4CRIA2R.js";import"../chunks/chunk.NBAHMDHF.js";import"../chunks/chunk.XWW5KNEG.js";import"../chunks/chunk.L66ACKPC.js";import"../chunks/chunk.D2FLGPWL.js";import"../chunks/chunk.QYZXMI4E.js";import"../chunks/chunk.G2G2TPJK.js";import"../chunks/chunk.KRGVR4EU.js";

package/dist/scw-card/ScwCard.js

@@ -1 +1 @@
-import{a}from"../chunks/chunk.4FRFLB2O.js";import"../chunks/chunk.K5LAHA72.js";import"../chunks/chunk.52AJYRNC.js";import"../chunks/chunk.NRBAPPP6.js";import"../chunks/chunk.2VHT7O7J.js";import"../chunks/chunk.2J63IRZ7.js";import"../chunks/chunk.W4CRIA2R.js";import"../chunks/chunk.NBAHMDHF.js";import"../chunks/chunk.XWW5KNEG.js";import"../chunks/chunk.L66ACKPC.js";import"../chunks/chunk.D2FLGPWL.js";import"../chunks/chunk.QYZXMI4E.js";import"../chunks/chunk.G2G2TPJK.js";import"../chunks/chunk.KRGVR4EU.js";export{a as default};
+import{a}from"../chunks/chunk.46X3ISTI.js";import"../chunks/chunk.K5LAHA72.js";import"../chunks/chunk.52AJYRNC.js";import"../chunks/chunk.NRBAPPP6.js";import"../chunks/chunk.DF6X7MNF.js";import"../chunks/chunk.ZEJUULSN.js";import"../chunks/chunk.W4CRIA2R.js";import"../chunks/chunk.NBAHMDHF.js";import"../chunks/chunk.XWW5KNEG.js";import"../chunks/chunk.L66ACKPC.js";import"../chunks/chunk.D2FLGPWL.js";import"../chunks/chunk.QYZXMI4E.js";import"../chunks/chunk.G2G2TPJK.js";import"../chunks/chunk.KRGVR4EU.js";export{a as default};

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

@@ -1 +1 @@
-import"../chunks/chunk.42NDAEHZ.js";import"../chunks/chunk.4FRFLB2O.js";import"../chunks/chunk.K5LAHA72.js";import"../chunks/chunk.52AJYRNC.js";import"../chunks/chunk.NRBAPPP6.js";import"../chunks/chunk.2VHT7O7J.js";import"../chunks/chunk.2J63IRZ7.js";import"../chunks/chunk.W4CRIA2R.js";import"../chunks/chunk.NBAHMDHF.js";import"../chunks/chunk.XWW5KNEG.js";import"../chunks/chunk.L66ACKPC.js";import"../chunks/chunk.D2FLGPWL.js";import"../chunks/chunk.QYZXMI4E.js";import"../chunks/chunk.G2G2TPJK.js";import"../chunks/chunk.KRGVR4EU.js";
+import"../chunks/chunk.KXWOEHXA.js";import"../chunks/chunk.46X3ISTI.js";import"../chunks/chunk.K5LAHA72.js";import"../chunks/chunk.52AJYRNC.js";import"../chunks/chunk.NRBAPPP6.js";import"../chunks/chunk.DF6X7MNF.js";import"../chunks/chunk.ZEJUULSN.js";import"../chunks/chunk.W4CRIA2R.js";import"../chunks/chunk.NBAHMDHF.js";import"../chunks/chunk.XWW5KNEG.js";import"../chunks/chunk.L66ACKPC.js";import"../chunks/chunk.D2FLGPWL.js";import"../chunks/chunk.QYZXMI4E.js";import"../chunks/chunk.G2G2TPJK.js";import"../chunks/chunk.KRGVR4EU.js";

package/dist/scw-components.js

@@ -1 +1 @@
-import"./chunks/chunk.HAQOB6IH.js";import"./chunks/chunk.X3QBLWJI.js";import"./chunks/chunk.JKR7SRJ4.js";import"./chunks/chunk.UBJDMVVJ.js";import"./chunks/chunk.ODR7TQZM.js";import"./chunks/chunk.SRCKTPOA.js";import"./chunks/chunk.OMZNZ3JG.js";import"./chunks/chunk.XQSIQJAT.js";import"./chunks/chunk.ZZNNPPOA.js";import"./chunks/chunk.QDUJKLYY.js";import"./chunks/chunk.4KKYOLD3.js";import"./chunks/chunk.UXYMEMUY.js";import"./chunks/chunk.IKVJCT2S.js";import"./chunks/chunk.C2P4K623.js";import"./chunks/chunk.JTWZNX5Q.js";import"./chunks/chunk.MEUEK2D7.js";import"./chunks/chunk.AWA6OPM7.js";import"./chunks/chunk.LCETNWRE.js";import"./chunks/chunk.PAYO5BJP.js";import"./chunks/chunk.SJF5RYGH.js";import"./chunks/chunk.QOBUVTFR.js";import"./chunks/chunk.G3UH4WRX.js";import"./chunks/chunk.4ZCEWMQZ.js";import"./chunks/chunk.GCL6DWXN.js";import"./chunks/chunk.PMX64IOC.js";import"./chunks/chunk.ZZLJXUSG.js";import"./chunks/chunk.UPVSYNR2.js";import"./chunks/chunk.BH4HRGGW.js";import"./chunks/chunk.J6NBCHRJ.js";import"./chunks/chunk.TYDPRKYF.js";import"./chunks/chunk.XUZADVOD.js";import"./chunks/chunk.3UVGS5YG.js";import"./chunks/chunk.NAUOSWV3.js";import"./chunks/chunk.42NDAEHZ.js";import"./chunks/chunk.4FRFLB2O.js";import"./chunks/chunk.K5LAHA72.js";import"./chunks/chunk.52AJYRNC.js";import"./chunks/chunk.VGYQSK5T.js";import"./chunks/chunk.CSHCPLUI.js";import"./chunks/chunk.ZLDYLT46.js";import"./chunks/chunk.MIF7FZXL.js";import"./chunks/chunk.JDZK6P5J.js";import"./chunks/chunk.3EMJHDON.js";import"./chunks/chunk.HLBB625P.js";import"./chunks/chunk.NB2UXM6D.js";import"./chunks/chunk.TVWHZK7Q.js";import"./chunks/chunk.MTCXYFTQ.js";import"./chunks/chunk.AKSFDVPZ.js";import"./chunks/chunk.O4I5WK36.js";import"./chunks/chunk.UMR2BU3Z.js";import"./chunks/chunk.Z6P446BB.js";import"./chunks/chunk.YBPGY7E7.js";import"./chunks/chunk.AE3AY6FW.js";import"./chunks/chunk.DMJKBP4H.js";import"./chunks/chunk.NRBAPPP6.js";import"./chunks/chunk.2VHT7O7J.js";import"./chunks/chunk.2J63IRZ7.js";import"./chunks/chunk.W4CRIA2R.js";import"./chunks/chunk.NBAHMDHF.js";import"./chunks/chunk.XWW5KNEG.js";import"./chunks/chunk.L66ACKPC.js";import"./chunks/chunk.D2FLGPWL.js";import"./chunks/chunk.QYZXMI4E.js";import"./chunks/chunk.G2G2TPJK.js";import"./chunks/chunk.KRGVR4EU.js";
+import"./chunks/chunk.ZROLFZ3Y.js";import"./chunks/chunk.6Y6UUMQR.js";import"./chunks/chunk.JKR7SRJ4.js";import"./chunks/chunk.UBJDMVVJ.js";import"./chunks/chunk.ODR7TQZM.js";import"./chunks/chunk.SRCKTPOA.js";import"./chunks/chunk.OMZNZ3JG.js";import"./chunks/chunk.XQSIQJAT.js";import"./chunks/chunk.ZZNNPPOA.js";import"./chunks/chunk.QDUJKLYY.js";import"./chunks/chunk.4KKYOLD3.js";import"./chunks/chunk.UXYMEMUY.js";import"./chunks/chunk.IKVJCT2S.js";import"./chunks/chunk.C2P4K623.js";import"./chunks/chunk.JTWZNX5Q.js";import"./chunks/chunk.MEUEK2D7.js";import"./chunks/chunk.AWA6OPM7.js";import"./chunks/chunk.I3VXMM2F.js";import"./chunks/chunk.NYPYATLP.js";import"./chunks/chunk.45XYG4KY.js";import"./chunks/chunk.QOBUVTFR.js";import"./chunks/chunk.G3UH4WRX.js";import"./chunks/chunk.4ZCEWMQZ.js";import"./chunks/chunk.GCL6DWXN.js";import"./chunks/chunk.PMX64IOC.js";import"./chunks/chunk.ZZLJXUSG.js";import"./chunks/chunk.UPVSYNR2.js";import"./chunks/chunk.BH4HRGGW.js";import"./chunks/chunk.J6NBCHRJ.js";import"./chunks/chunk.RZOHT2I2.js";import"./chunks/chunk.R74MMPY7.js";import"./chunks/chunk.3UVGS5YG.js";import"./chunks/chunk.NAUOSWV3.js";import"./chunks/chunk.KXWOEHXA.js";import"./chunks/chunk.46X3ISTI.js";import"./chunks/chunk.K5LAHA72.js";import"./chunks/chunk.52AJYRNC.js";import"./chunks/chunk.VGYQSK5T.js";import"./chunks/chunk.CSHCPLUI.js";import"./chunks/chunk.ZLDYLT46.js";import"./chunks/chunk.MIF7FZXL.js";import"./chunks/chunk.JDZK6P5J.js";import"./chunks/chunk.3EMJHDON.js";import"./chunks/chunk.BSB2DCZM.js";import"./chunks/chunk.BWG7OWRL.js";import"./chunks/chunk.ZKVWPXJD.js";import"./chunks/chunk.MTCXYFTQ.js";import"./chunks/chunk.AKSFDVPZ.js";import"./chunks/chunk.O4I5WK36.js";import"./chunks/chunk.NQJIOISG.js";import"./chunks/chunk.Z6P446BB.js";import"./chunks/chunk.YBPGY7E7.js";import"./chunks/chunk.DO22HODO.js";import"./chunks/chunk.DMJKBP4H.js";import"./chunks/chunk.NRBAPPP6.js";import"./chunks/chunk.DF6X7MNF.js";import"./chunks/chunk.ZEJUULSN.js";import"./chunks/chunk.W4CRIA2R.js";import"./chunks/chunk.NBAHMDHF.js";import"./chunks/chunk.XWW5KNEG.js";import"./chunks/chunk.L66ACKPC.js";import"./chunks/chunk.D2FLGPWL.js";import"./chunks/chunk.QYZXMI4E.js";import"./chunks/chunk.G2G2TPJK.js";import"./chunks/chunk.KRGVR4EU.js";

package/dist/scw-form-component/scw-form-component.js

@@ -1 +1 @@
-import{a,b,c}from"../chunks/chunk.AE3AY6FW.js";import"../chunks/chunk.DMJKBP4H.js";import"../chunks/chunk.2VHT7O7J.js";import"../chunks/chunk.2J63IRZ7.js";import"../chunks/chunk.W4CRIA2R.js";import"../chunks/chunk.NBAHMDHF.js";import"../chunks/chunk.XWW5KNEG.js";import"../chunks/chunk.L66ACKPC.js";import"../chunks/chunk.D2FLGPWL.js";import"../chunks/chunk.QYZXMI4E.js";import"../chunks/chunk.G2G2TPJK.js";import"../chunks/chunk.KRGVR4EU.js";export{b as ScwFormComponentSubmitTypes,a as ScwFormComponentTypes,c as default};
+import{a,b,c}from"../chunks/chunk.DO22HODO.js";import"../chunks/chunk.DMJKBP4H.js";import"../chunks/chunk.DF6X7MNF.js";import"../chunks/chunk.ZEJUULSN.js";import"../chunks/chunk.W4CRIA2R.js";import"../chunks/chunk.NBAHMDHF.js";import"../chunks/chunk.XWW5KNEG.js";import"../chunks/chunk.L66ACKPC.js";import"../chunks/chunk.D2FLGPWL.js";import"../chunks/chunk.QYZXMI4E.js";import"../chunks/chunk.G2G2TPJK.js";import"../chunks/chunk.KRGVR4EU.js";export{b as ScwFormComponentSubmitTypes,a as ScwFormComponentTypes,c as default};