scu-web-components 0.0.9 → 0.0.10

package/dist/tokens/tokens.html

@@ -13,7 +13,7 @@
 
 		<script type="module">
 			import run from './apps/tokens/main.js';
-			run('.', import.meta, '0.6.1', '../example/dist/tokens' );
+			run('.', import.meta, '0.6.4', '../example/dist/tokens' );
 		</script>
 		<style>
 			body, html {
@@ -42,7 +42,7 @@
 		<div id="main"></div>
 
 		<div id="main-loading">
-			Loading Summit Tokenizer Style Guide 0.6.1
+			Loading Summit Tokenizer Style Guide 0.6.4
 		</div>
 
   </body>

package/dist/utils/getIconSvg.js

@@ -1,2 +1,2 @@
-import{a}from"../chunks/chunk.N7MT3ZFK.js";import"../chunks/chunk.U64II52Y.js";export{a as default};
+import{a}from"../chunks/chunk.IJGTQGRH.js";import"../chunks/chunk.U64II52Y.js";export{a as default};
 //# sourceMappingURL=getIconSvg.js.map

package/dist/utils/suffix.js

@@ -1,2 +1,2 @@
-import{a}from"../chunks/chunk.DNFIAFTE.js";import"../chunks/chunk.GXYIL7OD.js";import"../chunks/chunk.U64II52Y.js";export{a as default};
+import{a}from"../chunks/chunk.QUYGJ2UW.js";import"../chunks/chunk.73WS6N4K.js";import"../chunks/chunk.U64II52Y.js";export{a as default};
 //# sourceMappingURL=suffix.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "scu-web-components",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "Summit Credit Union Design System components for use on member facing apps and websites",
   "author": "srouse",
   "license": "MIT",
@@ -42,7 +42,7 @@
     "glob-promise": "^4.2.0",
     "lit": "^2.0.2",
     "rgb-hex": "^4.0.0",
-    "scu-tokenizer": "0.6.1",
+    "scu-tokenizer": "0.6.4",
     "sinon": "^11.1.2",
     "static-params": "^0.2.1"
   },

package/dist/chunks/chunk.4527LW5H.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["sass-plugin-0:/Users/scottrouse/Workspace/scu-design-system-mono/scu-web-components/src/scw-link/scss/scw-link.scss", "../../src/scw-link/scw-link.ts"],
-  "sourcesContent": ["import {css} from \"lit-element/lit-element.js\";\nexport default css`\n:host {\n  /* scw element */\n  position: relative;\n  box-sizing: border-box;\n  --margin-right: initial;\n  --margin-bottom: initial;\n  --gap-h-int: initial;\n  --gap-v-int: initial;\n  margin-right: var(--margin-right, var(--gap-h-int, initial));\n  margin-bottom: var(--margin-bottom, var(--gap-v-int, initial));\n  display: block;\n}\n\n:host([warning]) {\n  outline: 2px solid red !important;\n}\n\n:host([design=text]) {\n  outline: none;\n  display: inline;\n}\n:host([design=text]) .label {\n  color: var(--scw-color-primary-03);\n  text-decoration: underline;\n}\n\n:host([design=text]:focus-visible) {\n  box-shadow: var(--scw-effect-focus-shadow);\n  border-radius: 4px 4px 4px 4px;\n}\n:host([design=text]:focus-visible) .label {\n  color: var(--scw-color-primary-03);\n}\n\n:host([design=text]:hover),\n:host([design=text][hover]) {\n  cursor: pointer;\n}\n:host([design=text]:hover) .label,\n:host([design=text][hover]) .label {\n  color: var(--scw-color-primary-01);\n}\n\n:host([design=text][aria-disabled=true]) {\n  cursor: auto;\n  pointer-events: none;\n}\n:host([design=text][aria-disabled=true]) .label {\n  color: var(--scw-color-grey-07);\n}\n\n:host([design=solid]) {\n  outline: none;\n  user-select: none;\n  background-color: var(--scw-color-accent-03, var(--scw-color-primary-03));\n  border-radius: 10px 10px 10px 10px;\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: center;\n  align-items: center;\n  padding-left: calc(var(--scw-spacing-1) * 1.6);\n  padding-right: calc(var(--scw-spacing-1) * 1.6);\n  padding-top: calc(var(--scw-spacing-1) * 0.5);\n  padding-bottom: calc(var(--scw-spacing-1) * 0.5);\n  display: inline-flex;\n}\n:host([design=solid]) > *:not(:last-child) {\n  margin-right: calc(var(--scw-spacing-1) * 0.4);\n  --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );\n}\n:host([design=solid]) .label {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-06-font);\n  color: var(--scw-color-grey-10);\n  min-height: 22px;\n}\n:host([design=solid]) .icon {\n  width: 24px;\n  height: 24px;\n}\n:host([design=solid]) .icon svg {\n  box-sizing: border-box;\n  vertical-align: top;\n  width: 100%;\n  height: 100%;\n  fill: var(--scw-color-grey-10);\n}\n:host([design=solid]) .icon svg * {\n  fill: var(--scw-color-grey-10);\n}\n\n:host([design=solid][icon][icon-side=left]) {\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: center;\n  align-items: center;\n  padding-left: calc(var(--scw-spacing-1) * 1.2);\n  padding-right: calc(var(--scw-spacing-1) * 1.6);\n  padding-top: calc(var(--scw-spacing-1) * 0.4);\n  padding-bottom: calc(var(--scw-spacing-1) * 0.4);\n  display: inline-flex;\n}\n:host([design=solid][icon][icon-side=left]) > *:not(:last-child) {\n  margin-right: calc(var(--scw-spacing-1) * 0.4);\n  --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );\n}\n\n:host([design=solid][icon][icon-side=right]) {\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: center;\n  align-items: center;\n  padding-left: calc(var(--scw-spacing-1) * 1.6);\n  padding-right: calc(var(--scw-spacing-1) * 1.2);\n  padding-top: calc(var(--scw-spacing-1) * 0.4);\n  padding-bottom: calc(var(--scw-spacing-1) * 0.4);\n  display: inline-flex;\n}\n:host([design=solid][icon][icon-side=right]) > *:not(:last-child) {\n  margin-right: calc(var(--scw-spacing-1) * 0.4);\n  --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );\n}\n\n:host([design=solid]:focus-visible) {\n  background-color: var(--scw-color-accent-03, var(--scw-color-primary-03));\n  border-radius: 10px 10px 10px 10px;\n  box-shadow: var(--scw-effect-focus-shadow);\n}\n:host([design=solid]:focus-visible) .label {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-06-font);\n  color: var(--scw-color-grey-10);\n}\n\n:host([design=solid]:hover),\n:host([design=solid][hover]) {\n  background-color: var(--scw-color-accent-01, var(--scw-color-primary-01));\n  border-radius: 10px 10px 10px 10px;\n  cursor: pointer;\n}\n:host([design=solid]:hover) .label,\n:host([design=solid][hover]) .label {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-06-font);\n  color: var(--scw-color-grey-10);\n}\n\n:host([design=solid][aria-disabled=true]) {\n  background-color: var(--scw-color-grey-095);\n  border-radius: 10px 10px 10px 10px;\n  cursor: auto;\n  pointer-events: none;\n}\n:host([design=solid][aria-disabled=true]) .label {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-06-font);\n  color: var(--scw-color-grey-07);\n}\n:host([design=solid][aria-disabled=true]) .icon svg {\n  fill: var(--scw-color-grey-07);\n}\n:host([design=solid][aria-disabled=true]) .icon svg * {\n  fill: var(--scw-color-grey-07);\n}\n\n:host([design=outlined]) {\n  outline: none;\n  user-select: none;\n  background-color: var(--scw-color-grey-10);\n  border-radius: 10px 10px 10px 10px;\n  border-width: 2px;\n  border-style: solid;\n  border-color: var(--scw-color-accent-04, var(--scw-color-primary-04));\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: center;\n  align-items: center;\n  padding-left: calc(var(--scw-spacing-1) * 1.6);\n  padding-right: calc(var(--scw-spacing-1) * 1.6);\n  padding-top: calc(var(--scw-spacing-1) * 0.5);\n  padding-bottom: calc(var(--scw-spacing-1) * 0.5);\n  display: inline-flex;\n}\n:host([design=outlined]) > *:not(:last-child) {\n  margin-right: calc(var(--scw-spacing-1) * 0.4);\n  --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );\n}\n:host([design=outlined]) .label {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-06-font);\n  color: var(--scw-color-accent-03, var(--scw-color-primary-03));\n  min-height: 22px;\n}\n:host([design=outlined]) .icon {\n  width: 24px;\n  height: 24px;\n}\n:host([design=outlined]) .icon svg {\n  box-sizing: border-box;\n  vertical-align: top;\n  width: 100%;\n  height: 100%;\n  fill: var(--scw-color-primary-03);\n}\n:host([design=outlined]) .icon svg * {\n  fill: var(--scw-color-primary-03);\n}\n\n:host([design=outlined][icon][icon-side=left]) {\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: center;\n  align-items: center;\n  padding-left: calc(var(--scw-spacing-1) * 1.2);\n  padding-right: calc(var(--scw-spacing-1) * 1.6);\n  padding-top: calc(var(--scw-spacing-1) * 0.4);\n  padding-bottom: calc(var(--scw-spacing-1) * 0.4);\n  display: inline-flex;\n}\n:host([design=outlined][icon][icon-side=left]) > *:not(:last-child) {\n  margin-right: calc(var(--scw-spacing-1) * 0.4);\n  --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );\n}\n\n:host([design=outlined][icon][icon-side=right]) {\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: center;\n  align-items: center;\n  padding-left: calc(var(--scw-spacing-1) * 1.6);\n  padding-right: calc(var(--scw-spacing-1) * 1.2);\n  padding-top: calc(var(--scw-spacing-1) * 0.4);\n  padding-bottom: calc(var(--scw-spacing-1) * 0.4);\n  display: inline-flex;\n}\n:host([design=outlined][icon][icon-side=right]) > *:not(:last-child) {\n  margin-right: calc(var(--scw-spacing-1) * 0.4);\n  --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );\n}\n\n:host([design=outlined]:focus-visible) {\n  background-color: var(--scw-color-grey-10);\n  border-radius: 10px 10px 10px 10px;\n  border-width: 2px;\n  border-style: solid;\n  border-color: var(--scw-color-accent-03, var(--scw-color-primary-03));\n  box-shadow: var(--scw-effect-focus-shadow);\n}\n:host([design=outlined]:focus-visible) .label {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-06-font);\n  color: var(--scw-color-accent-03, var(--scw-color-primary-03));\n}\n\n:host([design=outlined]:hover),\n:host([design=outlined][hover]) {\n  background-color: var(--scw-color-grey-10);\n  border-radius: 10px 10px 10px 10px;\n  border-width: 2px;\n  border-style: solid;\n  border-color: var(--scw-color-accent-01, var(--scw-color-primary-01));\n  cursor: pointer;\n}\n:host([design=outlined]:hover) .label,\n:host([design=outlined][hover]) .label {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-06-font);\n  color: var(--scw-color-accent-01, var(--scw-color-primary-01));\n}\n\n:host([design=outlined][aria-disabled=true]) {\n  background-color: var(--scw-color-grey-10);\n  border-radius: 10px 10px 10px 10px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--scw-color-grey-09);\n  cursor: auto;\n  pointer-events: none;\n}\n:host([design=outlined][aria-disabled=true]) .label {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-06-font);\n  color: var(--scw-color-grey-07);\n}\n:host([design=outlined][aria-disabled=true]) .icon svg {\n  fill: var(--scw-color-grey-07);\n}\n:host([design=outlined][aria-disabled=true]) .icon svg * {\n  fill: var(--scw-color-grey-07);\n}\n\n:host([design=plain]) {\n  outline: none;\n  display: inline-block;\n}\n\n:host([design=plain]:hover),\n:host([design=plain][hover]) {\n  cursor: pointer;\n}\n\n:host([design=plain]:focus-visible) {\n  box-shadow: var(--scw-effect-focus-shadow);\n  border-radius: 4px 4px 4px 4px;\n}\n\n:host([design=plain][aria-disabled=true]) {\n  cursor: auto;\n  pointer-events: none;\n}\n\n:host([design=solid][color=mortgage]) {\n  background-color: var(--scw-color-accent-04, var(--scw-color-accent-mortgage-04));\n  border-radius: 10px 10px 10px 10px;\n}\n\n:host([design=solid][color=mortgage]:hover),\n:host([design=solid][color=mortgage][hover]) {\n  background-color: var(--scw-color-accent-01, var(--scw-color-accent-mortgage-01));\n  border-radius: 10px 10px 10px 10px;\n}\n\n:host([design=outlined][color=mortgage]) {\n  background-color: var(--scw-color-grey-10);\n  border-radius: 10px 10px 10px 10px;\n  border-width: 2px;\n  border-style: solid;\n  border-color: var(--scw-color-accent-04, var(--scw-color-accent-mortgage-04));\n}\n:host([design=outlined][color=mortgage]) .label {\n  color: var(--scw-color-accent-mortgage-03);\n}\n:host([design=outlined][color=mortgage]) .icon svg {\n  fill: var(--scw-color-accent-mortgage-03);\n}\n:host([design=outlined][color=mortgage]) .icon svg * {\n  fill: var(--scw-color-accent-mortgage-03);\n}\n\n:host([design=outlined][color=mortgage]:hover),\n:host([design=outlined][color=mortgage][hover]) {\n  background-color: var(--scw-color-grey-10);\n  border-radius: 10px 10px 10px 10px;\n  border-width: 2px;\n  border-style: solid;\n  border-color: var(--scw-color-accent-01, var(--scw-color-accent-mortgage-01));\n}\n:host([design=outlined][color=mortgage]:hover) .label,\n:host([design=outlined][color=mortgage][hover]) .label {\n  color: var(--scw-color-accent-mortgage-01);\n}\n:host([design=outlined][color=mortgage]:hover) .icon svg,\n:host([design=outlined][color=mortgage][hover]) .icon svg {\n  fill: var(--scw-color-accent-mortgage-01);\n}\n:host([design=outlined][color=mortgage]:hover) .icon svg *,\n:host([design=outlined][color=mortgage][hover]) .icon svg * {\n  fill: var(--scw-color-accent-mortgage-01);\n}\n\n:host([design=text][color=mortgage]) .label {\n  color: var(--scw-color-accent-mortgage-03);\n}\n\n:host([design=text][color=mortgage]:hover) .label {\n  color: var(--scw-color-accent-mortgage-01);\n}\n\n:host([design=solid][color=savings]) {\n  background-color: var(--scw-color-accent-04, var(--scw-color-accent-savings-04));\n  border-radius: 10px 10px 10px 10px;\n}\n\n:host([design=solid][color=savings]:hover),\n:host([design=solid][color=savings][hover]) {\n  background-color: var(--scw-color-accent-01, var(--scw-color-accent-savings-01));\n  border-radius: 10px 10px 10px 10px;\n}\n\n:host([design=outlined][color=savings]) {\n  background-color: var(--scw-color-grey-10);\n  border-radius: 10px 10px 10px 10px;\n  border-width: 2px;\n  border-style: solid;\n  border-color: var(--scw-color-accent-04, var(--scw-color-accent-savings-04));\n}\n:host([design=outlined][color=savings]) .label {\n  color: var(--scw-color-accent-savings-03);\n}\n:host([design=outlined][color=savings]) .icon svg {\n  fill: var(--scw-color-accent-savings-03);\n}\n:host([design=outlined][color=savings]) .icon svg * {\n  fill: var(--scw-color-accent-savings-03);\n}\n\n:host([design=outlined][color=savings]:hover),\n:host([design=outlined][color=savings][hover]) {\n  background-color: var(--scw-color-grey-10);\n  border-radius: 10px 10px 10px 10px;\n  border-width: 2px;\n  border-style: solid;\n  border-color: var(--scw-color-accent-01, var(--scw-color-accent-savings-01));\n}\n:host([design=outlined][color=savings]:hover) .label,\n:host([design=outlined][color=savings][hover]) .label {\n  color: var(--scw-color-accent-savings-01);\n}\n:host([design=outlined][color=savings]:hover) .icon svg,\n:host([design=outlined][color=savings][hover]) .icon svg {\n  fill: var(--scw-color-accent-savings-01);\n}\n:host([design=outlined][color=savings]:hover) .icon svg *,\n:host([design=outlined][color=savings][hover]) .icon svg * {\n  fill: var(--scw-color-accent-savings-01);\n}\n\n:host([design=text][color=savings]) .label {\n  color: var(--scw-color-accent-savings-03);\n}\n\n:host([design=text][color=savings]:hover) .label {\n  color: var(--scw-color-accent-savings-01);\n}\n\n:host([design=solid][color=student]) {\n  background-color: var(--scw-color-accent-04, var(--scw-color-accent-student-04));\n  border-radius: 10px 10px 10px 10px;\n}\n\n:host([design=solid][color=student]:hover),\n:host([design=solid][color=student][hover]) {\n  background-color: var(--scw-color-accent-01, var(--scw-color-accent-student-01));\n  border-radius: 10px 10px 10px 10px;\n}\n\n:host([design=outlined][color=student]) {\n  background-color: var(--scw-color-grey-10);\n  border-radius: 10px 10px 10px 10px;\n  border-width: 2px;\n  border-style: solid;\n  border-color: var(--scw-color-accent-04, var(--scw-color-accent-student-04));\n}\n:host([design=outlined][color=student]) .label {\n  color: var(--scw-color-accent-student-03);\n}\n:host([design=outlined][color=student]) .icon svg {\n  fill: var(--scw-color-accent-student-03);\n}\n:host([design=outlined][color=student]) .icon svg * {\n  fill: var(--scw-color-accent-student-03);\n}\n\n:host([design=outlined][color=student]:hover),\n:host([design=outlined][color=student][hover]) {\n  background-color: var(--scw-color-grey-10);\n  border-radius: 10px 10px 10px 10px;\n  border-width: 2px;\n  border-style: solid;\n  border-color: var(--scw-color-accent-01, var(--scw-color-accent-student-01));\n}\n:host([design=outlined][color=student]:hover) .label,\n:host([design=outlined][color=student][hover]) .label {\n  color: var(--scw-color-accent-student-01);\n}\n:host([design=outlined][color=student]:hover) .icon svg,\n:host([design=outlined][color=student][hover]) .icon svg {\n  fill: var(--scw-color-accent-student-01);\n}\n:host([design=outlined][color=student]:hover) .icon svg *,\n:host([design=outlined][color=student][hover]) .icon svg * {\n  fill: var(--scw-color-accent-student-01);\n}\n\n:host([design=text][color=student]) .label {\n  color: var(--scw-color-accent-student-03);\n}\n\n:host([design=text][color=student]:hover) .label {\n  color: var(--scw-color-accent-student-01);\n}\n\n:host([design=solid][color=investments]) {\n  background-color: var(--scw-color-accent-04, var(--scw-color-accent-investments-04));\n  border-radius: 10px 10px 10px 10px;\n}\n\n:host([design=solid][color=investments]:hover),\n:host([design=solid][color=investments][hover]) {\n  background-color: var(--scw-color-accent-01, var(--scw-color-accent-investments-01));\n  border-radius: 10px 10px 10px 10px;\n}\n\n:host([design=outlined][color=investments]) {\n  background-color: var(--scw-color-grey-10);\n  border-radius: 10px 10px 10px 10px;\n  border-width: 2px;\n  border-style: solid;\n  border-color: var(--scw-color-accent-04, var(--scw-color-accent-investments-04));\n}\n:host([design=outlined][color=investments]) .label {\n  color: var(--scw-color-accent-investments-03);\n}\n:host([design=outlined][color=investments]) .icon svg {\n  fill: var(--scw-color-accent-investments-03);\n}\n:host([design=outlined][color=investments]) .icon svg * {\n  fill: var(--scw-color-accent-investments-03);\n}\n\n:host([design=outlined][color=investments]:hover),\n:host([design=outlined][color=investments][hover]) {\n  background-color: var(--scw-color-grey-10);\n  border-radius: 10px 10px 10px 10px;\n  border-width: 2px;\n  border-style: solid;\n  border-color: var(--scw-color-accent-01, var(--scw-color-accent-investments-01));\n}\n:host([design=outlined][color=investments]:hover) .label,\n:host([design=outlined][color=investments][hover]) .label {\n  color: var(--scw-color-accent-investments-01);\n}\n:host([design=outlined][color=investments]:hover) .icon svg,\n:host([design=outlined][color=investments][hover]) .icon svg {\n  fill: var(--scw-color-accent-investments-01);\n}\n:host([design=outlined][color=investments]:hover) .icon svg *,\n:host([design=outlined][color=investments][hover]) .icon svg * {\n  fill: var(--scw-color-accent-investments-01);\n}\n\n:host([design=text][color=investments]) .label {\n  color: var(--scw-color-accent-investments-03);\n}\n\n:host([design=text][color=investments]:hover) .label {\n  color: var(--scw-color-accent-investments-01);\n}\n\n:host([design=solid][color=checking]) {\n  background-color: var(--scw-color-accent-04, var(--scw-color-accent-checking-04));\n  border-radius: 10px 10px 10px 10px;\n}\n\n:host([design=solid][color=checking]:hover),\n:host([design=solid][color=checking][hover]) {\n  background-color: var(--scw-color-accent-01, var(--scw-color-accent-checking-01));\n  border-radius: 10px 10px 10px 10px;\n}\n\n:host([design=outlined][color=checking]) {\n  background-color: var(--scw-color-grey-10);\n  border-radius: 10px 10px 10px 10px;\n  border-width: 2px;\n  border-style: solid;\n  border-color: var(--scw-color-accent-04, var(--scw-color-accent-checking-04));\n}\n:host([design=outlined][color=checking]) .label {\n  color: var(--scw-color-accent-checking-03);\n}\n:host([design=outlined][color=checking]) .icon svg {\n  fill: var(--scw-color-accent-checking-03);\n}\n:host([design=outlined][color=checking]) .icon svg * {\n  fill: var(--scw-color-accent-checking-03);\n}\n\n:host([design=outlined][color=checking]:hover),\n:host([design=outlined][color=checking][hover]) {\n  background-color: var(--scw-color-grey-10);\n  border-radius: 10px 10px 10px 10px;\n  border-width: 2px;\n  border-style: solid;\n  border-color: var(--scw-color-accent-01, var(--scw-color-accent-checking-01));\n}\n:host([design=outlined][color=checking]:hover) .label,\n:host([design=outlined][color=checking][hover]) .label {\n  color: var(--scw-color-accent-checking-01);\n}\n:host([design=outlined][color=checking]:hover) .icon svg,\n:host([design=outlined][color=checking][hover]) .icon svg {\n  fill: var(--scw-color-accent-checking-01);\n}\n:host([design=outlined][color=checking]:hover) .icon svg *,\n:host([design=outlined][color=checking][hover]) .icon svg * {\n  fill: var(--scw-color-accent-checking-01);\n}\n\n:host([design=text][color=checking]) .label {\n  color: var(--scw-color-accent-checking-03);\n}\n\n:host([design=text][color=checking]:hover) .label {\n  color: var(--scw-color-accent-checking-01);\n}\n\n:host([design=solid][color=credit-cards]) {\n  background-color: var(--scw-color-accent-04, var(--scw-color-accent-credit-cards-04));\n  border-radius: 10px 10px 10px 10px;\n}\n\n:host([design=solid][color=credit-cards]:hover),\n:host([design=solid][color=credit-cards][hover]) {\n  background-color: var(--scw-color-accent-01, var(--scw-color-accent-credit-cards-01));\n  border-radius: 10px 10px 10px 10px;\n}\n\n:host([design=outlined][color=credit-cards]) {\n  background-color: var(--scw-color-grey-10);\n  border-radius: 10px 10px 10px 10px;\n  border-width: 2px;\n  border-style: solid;\n  border-color: var(--scw-color-accent-04, var(--scw-color-accent-credit-cards-04));\n}\n:host([design=outlined][color=credit-cards]) .label {\n  color: var(--scw-color-accent-credit-cards-03);\n}\n:host([design=outlined][color=credit-cards]) .icon svg {\n  fill: var(--scw-color-accent-credit-cards-03);\n}\n:host([design=outlined][color=credit-cards]) .icon svg * {\n  fill: var(--scw-color-accent-credit-cards-03);\n}\n\n:host([design=outlined][color=credit-cards]:hover),\n:host([design=outlined][color=credit-cards][hover]) {\n  background-color: var(--scw-color-grey-10);\n  border-radius: 10px 10px 10px 10px;\n  border-width: 2px;\n  border-style: solid;\n  border-color: var(--scw-color-accent-01, var(--scw-color-accent-credit-cards-01));\n}\n:host([design=outlined][color=credit-cards]:hover) .label,\n:host([design=outlined][color=credit-cards][hover]) .label {\n  color: var(--scw-color-accent-credit-cards-01);\n}\n:host([design=outlined][color=credit-cards]:hover) .icon svg,\n:host([design=outlined][color=credit-cards][hover]) .icon svg {\n  fill: var(--scw-color-accent-credit-cards-01);\n}\n:host([design=outlined][color=credit-cards]:hover) .icon svg *,\n:host([design=outlined][color=credit-cards][hover]) .icon svg * {\n  fill: var(--scw-color-accent-credit-cards-01);\n}\n\n:host([design=text][color=credit-cards]) .label {\n  color: var(--scw-color-accent-credit-cards-03);\n}\n\n:host([design=text][color=credit-cards]:hover) .label {\n  color: var(--scw-color-accent-credit-cards-01);\n}\n\n:host(:focus) {\n  box-shadow: var(--scw-effect-focus-shadow);\n}\n\n:host(:focus:not(:focus-visible)) {\n  box-shadow: none;\n}\n\n:host .label {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n}`;\n", "import {html} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport {unsafeHTML} from 'lit/directives/unsafe-html.js';\nimport styles from './scss/scw-link.scss';\nimport {\n  ScwLinkSide,\n  ScwLinkDesigns,\n  ScwLinkColors,\n} from './scw-link-enums';\nimport getIconSvg from '../utils/getIconSvg';\nimport validate from './scw-link-validate';\nimport {Components} from '../utils/enums/Components';\nimport {ScwMenuItemDesigns} from '../scw-menu-item/scw-menu-item-enums';\nimport ScwLinkBase from '../scw-link-base/scw-link-base';\n\n/**\n * ScwLink\n * @class\n * @tag scw-link\n *\n * @slot [default=\"<a href target />\"]\n    (OPTIONAL) anchor (for SEO) will determine the label, href, and target.\n * @slot [default=\"<... />\"]\n    (OPTIONAL) random content (paired with design=\"plain\") will wrap that\n    content with a link.\n */\nexport default class ScwLink extends ScwLinkBase {\n  /**\n  * styles\n  */\n  static get styles() {\n    return [\n      super.styles,\n      styles,\n    ];\n  }\n\n  // ============== ScwLink ==================================================\n  /**\n  * (ScwLink) Determines the icon to use with the text\n  * @type {string}\n  */\n  @property({type: String, reflect: true})\n    icon: string | undefined;\n\n  /**\n  * (ScwLink) Determines which side the icon should show up on\n  * @type {string}\n  */\n  @property({type: String, reflect: true, attribute: 'icon-side'})\n    iconSide: ScwLinkSide = ScwLinkSide.left;\n\n  /**\n  * (ScwLink) The design style of the link.\n  * @type {string}\n  */\n  @property({type: String, reflect: true})\n    design: ScwLinkDesigns | ScwMenuItemDesigns = ScwLinkDesigns.solid;\n\n  /**\n  * (ScwLink) The design style of the link.\n  * @type {string}\n  */\n  @property({type: String, reflect: true})\n    color: ScwLinkColors = ScwLinkColors.primary;\n\n  @state() _svgInfo : string = '';\n\n  /**\n  * Constructor\n  */\n  constructor() {\n    super();\n    this.element = Components.link;\n    this.link = true;// this one is always a link\n  }\n\n  /** parseAndValidateLightDom, just adding local parsing and validation */\n  parseAndValidateLightDom() {\n    super.parseAndValidateLightDom();\n    validate( this );\n    getIconSvg(this.icon, (svgInfo: string | false ) => {\n      if (svgInfo === false ) {\n        this.warn(`scw-icon could not find ${this.icon}`);\n      } else {\n        this._svgInfo = svgInfo;\n      }\n    });\n  }\n\n  /**\n  * Way to extend valid design types...\n  * @return {object} object of valid designs relative to this object\n  */\n  validDesigns() : object {\n    return ScwLinkDesigns;\n  }\n\n  /**\n  * Way to extend valid design icon types...\n  * @return {boolean}\n  */\n  doShowIcon() : boolean {\n    if ( this.icon &&\n      this.design !== ScwLinkDesigns.plain &&\n      this.design !== ScwLinkDesigns.text ) {\n      return true;\n    }\n    return false;\n  }\n\n  /**\n  * render\n  * @return {object} component DOM\n  */\n  render(): object {\n    const doShowIcon = this.doShowIcon();\n\n    if (this.design === ScwLinkDesigns.plain) {\n      return html`<slot></slot>`;\n    }\n\n    return html`\n      ${doShowIcon && this.iconSide === ScwLinkSide.left ?\n      html`\n        <div class=\"icon\">\n          ${unsafeHTML(this._svgInfo)}\n        </div>` : ''}\n        <div class=\"label\">\n          ${this.ariaLabel}\n        </div>\n      ${doShowIcon && this.iconSide === ScwLinkSide.right ?\n      html`\n        <div class=\"icon\">\n          ${unsafeHTML(this._svgInfo)}\n        </div>` : ''}`;\n  }\n}\n"],
-  "mappings": "8VACA,GAAO,GAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;GCyBf,mBAAqC,EAAY,CA6C/C,aAAc,CACZ,QAtBA,cAAwB,EAAY,KAOpC,YAA8C,EAAe,MAO7D,WAAuB,EAAc,QAE9B,cAAoB,GAO3B,KAAK,QAAU,EAAW,KAC1B,KAAK,KAAO,aA5CH,SAAS,CAClB,MAAO,CACL,MAAM,OACN,GA6CJ,0BAA2B,CACzB,MAAM,2BACN,EAAU,MACV,EAAW,KAAK,KAAM,AAAC,GAA6B,CAClD,AAAI,IAAY,GACd,KAAK,KAAK,2BAA2B,KAAK,QAE1C,KAAK,SAAW,IAStB,cAAwB,CACtB,MAAO,GAOT,YAAuB,CACrB,MAAK,QAAK,MACR,KAAK,SAAW,EAAe,OAC/B,KAAK,SAAW,EAAe,MAUnC,QAAiB,CACf,GAAM,GAAa,KAAK,aAExB,MAAI,MAAK,SAAW,EAAe,MAC1B,iBAGF;AAAA,QACH,GAAc,KAAK,WAAa,EAAY,KAC9C;AAAA;AAAA,YAEM,EAAW,KAAK;AAAA,gBACV;AAAA;AAAA,YAEN,KAAK;AAAA;AAAA,QAET,GAAc,KAAK,WAAa,EAAY,MAC9C;AAAA;AAAA,YAEM,EAAW,KAAK;AAAA,gBACV,OA5Fd,GADD,EAAS,CAAC,KAAM,OAAQ,QAAS,MAChC,AAjBJ,EAiBI,oBAOA,GADD,EAAS,CAAC,KAAM,OAAQ,QAAS,GAAM,UAAW,eACjD,AAxBJ,EAwBI,wBAOA,GADD,EAAS,CAAC,KAAM,OAAQ,QAAS,MAChC,AA/BJ,EA+BI,sBAOA,GADD,EAAS,CAAC,KAAM,OAAQ,QAAS,MAChC,AAtCJ,EAsCI,qBAEO,GAAR,KAAQ,AAxCX,EAwCW",
-  "names": []
-}

package/dist/chunks/chunk.DNFIAFTE.js

@@ -1,2 +0,0 @@
-import{a as f}from"./chunk.GXYIL7OD.js";function t(i="-"){return f?.suffix?`${i}${f?.suffix}`:""}export{t as a};
-//# sourceMappingURL=chunk.DNFIAFTE.js.map

package/dist/chunks/chunk.KH7QGSJX.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["sass-plugin-0:/Users/scottrouse/Workspace/scu-design-system-mono/scu-web-components/src/scw-single-input-layout/scss/scw-single-input-layout.scss", "../../src/scw-single-input-layout/scw-single-input-layout.ts"],
-  "sourcesContent": ["import {css} from \"lit-element/lit-element.js\";\nexport default css`\n:host {\n  background-color: white;\n  display: flex;\n  flex-flow: column nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n}\n:host > *:not(:last-child) {\n  margin-bottom: calc(var(--scw-spacing-1) * 0.6);\n  --margin-bottom: calc( var( --scw-spacing-1 ) * 0.6 );\n}\n:host .input-field-single {\n  flex: 1;\n}\n:host .input-feedback {\n  background-color: rgba(0, 0, 0, 0);\n  align-self: stretch;\n  text-align: LEFT;\n  font: var(--scw-type-text-04-font);\n  color: var(--scw-color-error);\n}\n\n.input-field {\n  background-color: rgba(0, 0, 0, 0);\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n  align-self: stretch;\n  padding: 0;\n}\n.input-field > *:not(:last-child) {\n  margin-right: 0px;\n  --margin-right: 0px;\n}\n.input-field .left-icon {\n  background-color: var(--scw-color-grey-095);\n  border-radius: 4px 0px 0px 4px;\n  align-self: stretch;\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: center;\n  align-items: center;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n}\n.input-field .left-icon > *:not(:last-child) {\n  margin-right: var(--scw-spacing-1);\n  --margin-right: var( --scw-spacing-1 );\n}\n.input-field .left-icon .icon {\n  background-color: rgba(0, 0, 0, 0);\n}\n.input-field .input-text {\n  background-color: rgba(0, 0, 0, 0);\n  flex: 1;\n}\n.input-field .right-icon-2 {\n  align-self: center;\n}\n.input-field .right-icon {\n  align-self: center;\n}\n.input-field .right-action {\n  background-color: var(--scw-color-accent-03, var(--scw-color-primary-03));\n  border-radius: 0px 4px 4px 0px;\n  align-self: stretch;\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  padding-left: calc(var(--scw-spacing-1) * 0.4);\n  padding-right: calc(var(--scw-spacing-1) * 0.4);\n  padding-top: 0px;\n  padding-bottom: 0px;\n  border-radius: 0;\n}\n.input-field .right-action > *:not(:last-child) {\n  margin-right: var(--scw-spacing-1);\n  --margin-right: var( --scw-spacing-1 );\n}\n\n:host .input-field {\n  background-color: var(--scw-color-grey-10);\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  border-color: var(--scw-color-accent-03, var(--scw-color-primary-03));\n  align-self: stretch;\n}\n\n:host([aria-disabled]) .input-field {\n  background-color: var(--scw-color-grey-092);\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  border-color: var(--scw-color-grey-08);\n  align-self: stretch;\n}\n\n:host([invalid]) .input-field {\n  background-color: var(--scw-color-grey-10);\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  border-color: var(--scw-color-error);\n  align-self: stretch;\n}\n\n:host([focused]) .input-field {\n  background-color: var(--scw-color-grey-10);\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  border-color: var(--scw-color-accent-03, var(--scw-color-primary-03));\n  box-shadow: var(--scw-effect-focus-shadow);\n  align-self: stretch;\n}\n\n::slotted(*) {\n  width: 100%;\n}`;\n", "import {html} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport ScwComponent from '../scw-component/scw-component';\nimport {Components} from '../utils/enums/Components';\nimport styles from './scss/scw-single-input-layout.scss';\nimport {emit, ScwEvents} from '../utils/events/event';\n\n\nexport enum ScwSingleInputLayoutActions {\n  rightIcon = 'right-icon',\n  right2Icon = 'right-2-icon',\n  rightAction = 'right-action'\n}\n\n/**\n * ScwSingleInputLayout\n * @class\n * @tag scw-single-input-layout\n * @status new\n * @since 0.0.5\n *\n * @event scw-action - This fires when one of the various icons or submit\n *  button is clicked. detail is {action:\n * 'right-icon'|'right-2-icon'|'right-action'}\n */\nexport default class ScwSingleInputLayout extends ScwComponent {\n  /**\n  * styles\n  */\n   static get styles() {\n    return [\n      super.styles,\n      styles,\n    ];\n  }\n\n  /** constructor */\n  constructor() {\n    super();\n    this.element = Components.singleInputLayout;\n  }\n\n  // ============== ScwSingleInputLayout =======================================\n  /** (ScwSingleInputLayout) the text to use for feedback */\n  @property({type: String})\n    feedback: string | undefined;\n\n  /** (ScwSingleInputLayout) hides the feedback label */\n  @property({type: String, attribute: 'hide-feedback'})\n   hideFeedback: boolean = false;\n\n  /** (ScwSingleInputLayout) shows left action section and determines what icon\n  * is used within the left action. */\n  @property({type: String, attribute: 'left-action-icon'})\n    leftActionIcon: string | undefined;\n\n  /** (ScwSingleInputLayout) shows right action section and determines what icon\n  * is used within the right action. */\n  @property({type: String, attribute: 'right-action-icon'})\n   rightActionIcon: string | undefined;\n\n  /** (ScwSingleInputLayout) shows first right icon and determines the icon\n  * svg. */\n  @property({type: String, attribute: 'right-icon'})\n   rightIcon: string | undefined;\n\n  /** (ScwSingleInputLayout) shows second right icon and determines the icon\n  * svg. */\n  @property({type: String, attribute: 'right-2-icon'})\n    right2Icon: string | undefined;\n\n  /**\n  * Handle click from right 2 icon.\n  * @param {Event} evt\n  */\n  _right2ClickHandler(evt : Event) {\n    evt.stopPropagation();\n    emit(\n      ScwEvents.action, this,\n      {action: ScwSingleInputLayoutActions.right2Icon},\n    );\n  }\n\n  /**\n  * Handle click from right icon.\n  * @param {Event} evt\n  */\n  _rightClickHandler(evt : Event) {\n    evt.stopPropagation();\n    emit(\n      ScwEvents.action, this,\n      {action: ScwSingleInputLayoutActions.rightIcon},\n    );\n  }\n\n  /**\n  * Handle click from right action icon.\n  * @param {Event} evt\n  */\n  _rightActionClickHandler(evt : Event) {\n    evt.stopPropagation();\n    emit(\n      ScwEvents.action, this,\n      {action: ScwSingleInputLayoutActions.rightAction},\n    );\n  }\n\n  /**\n  * render\n  * @return {object} component DOM\n  */\n  render(): object {\n    return html`\n      <div class=\"input-field\">\n        ${this.leftActionIcon ?\n    html`\n            <div class=\"left-icon\">\n              <scw-icon\n                class=\"icon\"\n                .icon=\"${this.leftActionIcon}\"\n                size=\"30\">\n              </scw-icon>\n            </div>` : ''}\n        <div class=\"input-field-single\">\n          <slot></slot>\n        </div>\n        ${this.right2Icon ?\n    html`\n            <scw-icon\n              class=\"right-icon-2\"\n              .icon=\"${this.right2Icon}\"\n              size=\"30\"\n              aria-label=\"Clear Input\"\n              link\n              @click=${this._right2ClickHandler}>\n            </scw-icon>` : '' }\n        ${this.rightIcon ?\n    html`\n            <scw-icon\n              class=\"right-icon\"\n              .icon=\"${this.rightIcon}\"\n              size=\"30\"\n              aria-label=\"Show Password\"\n              link\n              @click=${this._rightClickHandler}>\n            </scw-icon>` : '' }\n        ${this.rightActionIcon ?\n    html`\n            <div class=\"right-action\">\n              <scw-icon\n                class=\"icon-right-action\"\n                .icon=\"${this.rightActionIcon}\"\n                color=\"white\"\n                size=\"30\"\n                aria-label=\"Submit Search\"\n                link\n                @click=${this._rightActionClickHandler}>\n              </scw-icon>\n            </div>` : '' }\n      </div>\n      ${!this.hideFeedback ?\n    html`\n          <div class=\"input-feedback\">\n            ${this.feedback}&nbsp;\n          </div>` : ''}\n    `;\n  }\n}\n\n"],
-  "mappings": "4LACA,GAAO,GAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;GCOR,GAAK,GAAL,UAAK,EAAL,CACL,YAAY,aACZ,aAAa,eACb,cAAc,iBAHJ,WAiBZ,mBAAkD,EAAa,CAY7D,aAAc,CACZ,QAWD,kBAAwB,GAVvB,KAAK,QAAU,EAAW,4BAVhB,SAAS,CACnB,MAAO,CACL,MAAM,OACN,GA2CJ,oBAAoB,EAAa,CAC/B,EAAI,kBACJ,EACE,EAAU,OAAQ,KAClB,CAAC,OAAQ,EAA4B,aAQzC,mBAAmB,EAAa,CAC9B,EAAI,kBACJ,EACE,EAAU,OAAQ,KAClB,CAAC,OAAQ,EAA4B,YAQzC,yBAAyB,EAAa,CACpC,EAAI,kBACJ,EACE,EAAU,OAAQ,KAClB,CAAC,OAAQ,EAA4B,cAQzC,QAAiB,CACf,MAAO;AAAA;AAAA,UAED,KAAK,eACX;AAAA;AAAA;AAAA;AAAA,yBAIqB,KAAK;AAAA;AAAA;AAAA,oBAGR;AAAA;AAAA;AAAA;AAAA,UAIZ,KAAK,WACX;AAAA;AAAA;AAAA,uBAGmB,KAAK;AAAA;AAAA;AAAA;AAAA,uBAIL,KAAK;AAAA,yBACD;AAAA,UACjB,KAAK,UACX;AAAA;AAAA;AAAA,uBAGmB,KAAK;AAAA;AAAA;AAAA;AAAA,uBAIL,KAAK;AAAA,yBACD;AAAA,UACjB,KAAK,gBACX;AAAA;AAAA;AAAA;AAAA,yBAIqB,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,yBAKL,KAAK;AAAA;AAAA,oBAER;AAAA;AAAA,QAEd,AAAC,KAAK,aAIM,GAHhB;AAAA;AAAA,cAEU,KAAK;AAAA;AAAA,QAtHf,GADD,EAAS,CAAC,KAAM,UACf,AApBJ,EAoBI,wBAID,GADA,EAAS,CAAC,KAAM,OAAQ,UAAW,mBACnC,AAxBH,EAwBG,4BAKC,GADD,EAAS,CAAC,KAAM,OAAQ,UAAW,sBAClC,AA7BJ,EA6BI,8BAKD,GADA,EAAS,CAAC,KAAM,OAAQ,UAAW,uBACnC,AAlCH,EAkCG,+BAKA,GADA,EAAS,CAAC,KAAM,OAAQ,UAAW,gBACnC,AAvCH,EAuCG,yBAKC,GADD,EAAS,CAAC,KAAM,OAAQ,UAAW,kBAClC,AA5CJ,EA4CI",
-  "names": []
-}

package/dist/chunks/icon-color-test.GINUB7ES.js

@@ -1,2 +0,0 @@
-import"./chunk.U64II52Y.js";var l='<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="26.1923" cy="25.1923" r="20.1923" fill="%23386004"/><ellipse cx="33.8847" cy="34.3269" rx="20.1923" ry="20.6731" fill="%2363A60A"/></svg>';export{l as default};
-//# sourceMappingURL=icon-color-test.GINUB7ES.js.map

package/dist/chunks/icon-color-test.GINUB7ES.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../tokens/source/assets/icon-color-test.js"],
-  "sourcesContent": ["export default '<svg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"26.1923\" cy=\"25.1923\" r=\"20.1923\" fill=\"%23386004\"/><ellipse cx=\"33.8847\" cy=\"34.3269\" rx=\"20.1923\" ry=\"20.6731\" fill=\"%2363A60A\"/></svg>';"],
-  "mappings": "4BAAA,GAAO,GAAQ",
-  "names": []
-}