scu-web-components 0.0.9 → 0.0.10

package/dist/docs/documents/Themeing.html

@@ -0,0 +1,251 @@
+<div class="referencePage">
+  <h1 id="themeing">Themeing</h1>
+<h2 id="color-themeing">Color Themeing</h2>
+<p>There are classes/attributes that allow for color themeing that will change all 
+the colors within to be the desired color (excluding greys 
+and action colors). These are called &quot;group aliases&quot; in Figma in that you can 
+effect multiple colors through a single name, or alias. If you have a section 
+within this section that you want to protect from the theme use 
+&quot;scw-color-theme-initial&quot; and it will use it default colors.</p>
+<p><scw-flex-h
+  scw-background-color-grey-092
+  scw-padding-2s
+  scw-gap-1s
+  scw-alignment-stretch>
+  <scw-element
+    scw-text-bold-04>
+    Themes:
+  </scw-element>
+  <scw-element id="renderContent"
+    onclick="
+    const content = `
+      <scw-heading color='primary'>
+        <h3>scw-heading</h3>
+      </scw-heading>
+      <scw-link
+        aria-label='scw-link'>
+      </scw-link>
+      <scw-icon
+        icon='icon-color-test'
+        aria-label='scw-icon'>
+      </scw-icon>
+      <scw-element
+        scw-color-primary-04
+        scw-fill>
+        scw-element
+      </scw-element>
+      <scw-heading
+        scw-color-theme-initial
+        color='primary'>
+        <h3>Protected Heading</h3>
+      </scw-heading>`;
+    const eElements = document.querySelector('#example-elements');
+    eElements.innerHTML = content;">
+  </scw-element>
+  <scw-link
+    aria-label="Student"
+    design="text"
+    onclick="
+      document.querySelector('#example-elements').setAttribute('class','scw-color-theme-accent-student');
+      document.querySelector('#example-code').innerHTML = 'Class: scw-color-theme-student';
+      document.querySelector('#renderContent').click()">
+  </scw-link>
+  <scw-link
+    aria-label="Mortgage"
+    design="text"
+    onclick="
+      document.querySelector('#example-elements').setAttribute('class','scw-color-theme-accent-mortgage');
+      document.querySelector('#example-code').innerHTML = 'Class: scw-color-theme-mortgage';
+      document.querySelector('#renderContent').click()">
+  </scw-link>
+  <scw-link
+    aria-label="Checking"
+    design="text"
+    onclick="
+      document.querySelector('#example-elements').setAttribute('class','scw-color-theme-accent-checking');
+      document.querySelector('#example-code').innerHTML = 'Class: scw-color-theme-checking';
+      document.querySelector('#renderContent').click()">
+  </scw-link>
+  <scw-link
+    aria-label="Business"
+    design="text"
+    onclick="
+      document.querySelector('#example-elements').setAttribute('class','scw-color-theme-accent-business');
+      document.querySelector('#example-code').innerHTML = 'Class: scw-color-theme-business';
+      document.querySelector('#renderContent').click()">
+  </scw-link>
+  <scw-link
+    aria-label="Primary"
+    design="text"
+    onclick="
+      document.querySelector('#example-elements').setAttribute('class','scw-color-theme-primary');
+      document.querySelector('#example-code').innerHTML = 'Class: scw-color-theme-primary';
+      document.querySelector('#renderContent').click()">
+  </scw-link>
+  <scw-link
+    aria-label="Initial"
+    design="text"
+    onclick="
+      document.querySelector('#example-elements').setAttribute('class','scw-color-theme-initial');
+      document.querySelector('#example-code').innerHTML = 'Class: scw-color-theme-initial';
+      document.querySelector('#renderContent').click()">
+  </scw-link>
+</scw-flex-h>
+<scw-flex-v
+  scw-width-col-12
+  scw-border-grey-09
+  scw-alignment-stretch>
+  <scw-flex-v
+    scw-padding-2s
+    scw-background-color-grey-092
+    id="example-code">
+    Class: 
+  </scw-flex-v>
+  <scw-flex-h
+    id="example-elements"
+    scw-padding-2s
+    scw-gap-2s>
+    Choose a Theme...
+  </scw-flex-h>
+</scw-flex-v></p>
+<h2 id="multicolor-icons">Multicolor Icons</h2>
+<p>Multicolor Icons are possible using scw-icon and Figma icons. They are 
+preprocessed to use the design system css variables.</p>
+<p><scw-flex-h
+  scw-padding-2s
+  scw-gap-2s>
+  <scw-icon
+    icon='icon-color-test'
+    aria-label='scw-icon'>
+  </scw-icon>
+  <scw-icon
+    icon='icon-color-test'
+    aria-label='scw-icon'
+    color="primary">
+  </scw-icon>
+  <scw-icon
+    icon='icon-color-test'
+    aria-label='scw-icon'
+    color="credit-cards">
+  </scw-icon>
+  <scw-icon
+    scw-color-theme-accent-student
+    icon='icon-color-test'
+    aria-label='scw-icon'>
+  </scw-icon>
+</scw-flex-h></p>
+<h2 id="details">Details</h2>
+<p>Technically the entire design system is by default themed because every 
+component predominately uses CSS Variables for styling and layout. For example,
+this is how scw-link would style itself:</p>
+<pre><code class="language-css">.bg {
+  background-color: var(--scw-color-theme-03, var(--scw-color-primary-03));
+  padding-left: calc(var(--scw-spacing-1) * 1.6);
+  padding-right: calc(var(--scw-spacing-1) * 1.6);
+  padding-top: calc(var(--scw-spacing-1) * 0.5);
+  padding-bottom: calc(var(--scw-spacing-1) * 0.5);
+}
+
+.label {
+  font: var(--scw-type-text-bold-06-font);
+  color: var(--scw-color-grey-10);
+}
+</code></pre>
+<p>To create a theme you could simply redefine those variables with a class. This 
+theme changes all the primary colors into greys:</p>
+<pre><code class="language-css">.myGreyTheme {
+  --scw-color-primary-01: var( --scw-color-grey-01 );
+  --scw-color-primary-02: var( --scw-color-grey-02 );
+  --scw-color-primary-03: var( --scw-color-grey-03 );
+  --scw-color-primary-04: var( --scw-color-grey-04 );
+  --scw-color-primary-05: var( --scw-color-grey-05 );
+  --scw-color-primary: var( --scw-color-grey );
+  --scw-color-primary-06: var( --scw-color-grey-06 );
+  --scw-color-primary-07: var( --scw-color-grey-07 );
+  --scw-color-primary-08: var( --scw-color-grey-08 );
+  --scw-color-primary-09: var( --scw-color-grey-09 );
+  --scw-color-primary-092: var( --scw-color-grey-092 );
+  --scw-color-primary-095: var( --scw-color-grey-095 );
+
+  --scw-spacing-1: 14px;
+}
+</code></pre>
+<p>There are many accent colors in this design system, so a group also exists
+that allows you to change all of the colors at once. This works through 
+CSS variable fallbacks:</p>
+<pre><code class="language-css">/* elements use this, --scw-color-theme-01 is undefined by default */
+.scw-color-accent-student-01,
+[scw-color-accent-student-01] {
+  color: var( --scw-color-theme-01 , var( --scw-color-accent-student-01 ));
+  --color: var( --scw-color-theme-01 , var( --scw-color-accent-student-01 ));
+}
+
+/* color themes can then influence all colors */
+.scw-color-theme-primary,
+[scw-color-theme-primary] {
+  --scw-color-theme-01: var( --scw-color-primary-01 );
+  --scw-color-theme-02: var( --scw-color-primary-02 );
+  --scw-color-theme-03: var( --scw-color-primary-03 );
+  --scw-color-theme-04: var( --scw-color-primary-04 );
+  --scw-color-theme-05: var( --scw-color-primary-05 );
+  --scw-color-theme: var( --scw-color-primary );
+  --scw-color-theme-06: var( --scw-color-primary-06 );
+  --scw-color-theme-07: var( --scw-color-primary-07 );
+  --scw-color-theme-08: var( --scw-color-primary-08 );
+  --scw-color-theme-09: var( --scw-color-primary-09 );
+  --scw-color-theme-092: var( --scw-color-primary-092 );
+  --scw-color-theme-095: var( --scw-color-primary-095 );
+}
+</code></pre>
+<p>In Figma these group aliases are defined on the Token Component.</p>
+
+</div>
+
+<style>
+  .referencePage {
+    margin: var( --spacing-9 ) var( --col-1-6 );
+  }
+
+  .referencePage a {
+    color: var( --color-primary-03 );
+  }
+
+  .referencePage pre {
+    background: #f9f9f9;
+    border-left: 6px solid #ccc;
+    margin: 1.5em 0;
+    padding: 1em 20px;
+    font-size: 13px;
+  }
+
+  .referencePage blockquote {
+    background: #f9f9f9;
+    border-left: 6px solid #ccc;
+    margin: 1.5em 0;
+    padding: 1em 20px;
+    quotes: "\201C""\201D""\2018""\2019";
+  }
+  .referencePage blockquote:before {
+    color: #ccc;
+    content: open-quote;
+    font-size: 4em;
+    line-height: 0.1em;
+    margin-right: 0.25em;
+    vertical-align: -0.4em;
+  }
+  .referencePage blockquote p {
+    display: inline;
+  }
+
+  .referencePage h1 {
+    font: var( --type-text-bold-10-font );
+  }
+
+  .referencePage h2 {
+    font: var( --type-text-bold-09-font ); 
+  }
+
+  .referencePage h3 {
+    font: var( --type-text-bold-08-font );
+  }
+</style>

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

@@ -1,2 +1,2 @@
-import{a as m}from"../chunks/chunk.4527LW5H.js";import"../chunks/chunk.7XABOXJ5.js";import"../chunks/chunk.ALATCVPK.js";import{a as n,b as r}from"../chunks/chunk.HXIXDONQ.js";import"../chunks/chunk.C3ATQQAV.js";import"../chunks/chunk.N7MT3ZFK.js";import"../chunks/chunk.IF5XHJTB.js";import{b as t}from"../chunks/chunk.Y45V2UNS.js";import"../chunks/chunk.2GHJYU6N.js";import"../chunks/chunk.4RQHMHFC.js";import"../chunks/chunk.GOBVJQFJ.js";import"../chunks/chunk.KNBJLHZX.js";import"../chunks/chunk.HOJVKEO5.js";import"../chunks/chunk.DNFIAFTE.js";import"../chunks/chunk.GXYIL7OD.js";import{a as s}from"../chunks/chunk.REQCODIT.js";import"../chunks/chunk.PYJPWHGD.js";import"../chunks/chunk.72IXMPA6.js";import"../chunks/chunk.C5UQJBE6.js";import"../chunks/chunk.QTXBHR77.js";import"../chunks/chunk.HPXOJJE6.js";import"../chunks/chunk.AR26ERMX.js";import{a as i}from"../chunks/chunk.AYIEP2QZ.js";import{d as o}from"../chunks/chunk.U64II52Y.js";var e=class extends m{constructor(){super();this.submitType=t.submit;this.element=i.button}connectedCallback(){super.connectedCallback(),this.addEventListener("click",()=>{this.submitType===t.submit&&n(r.submitIntent,this)})}establishRole(){this.setAttribute("role","button")}};o([s({type:t,reflect:!0,attribute:"submit-type"})],e.prototype,"submitType",2);export{e as default};
+import{a as m}from"../chunks/chunk.AG6E4ZNZ.js";import"../chunks/chunk.7XABOXJ5.js";import"../chunks/chunk.ALATCVPK.js";import{a as n,b as r}from"../chunks/chunk.HXIXDONQ.js";import"../chunks/chunk.C3ATQQAV.js";import"../chunks/chunk.IJGTQGRH.js";import"../chunks/chunk.IF5XHJTB.js";import{b as t}from"../chunks/chunk.IULCMWN5.js";import"../chunks/chunk.2GHJYU6N.js";import"../chunks/chunk.4RQHMHFC.js";import"../chunks/chunk.GOBVJQFJ.js";import"../chunks/chunk.KNBJLHZX.js";import"../chunks/chunk.HOJVKEO5.js";import"../chunks/chunk.QUYGJ2UW.js";import"../chunks/chunk.73WS6N4K.js";import{a as s}from"../chunks/chunk.REQCODIT.js";import"../chunks/chunk.PYJPWHGD.js";import"../chunks/chunk.72IXMPA6.js";import"../chunks/chunk.C5UQJBE6.js";import"../chunks/chunk.QTXBHR77.js";import"../chunks/chunk.HPXOJJE6.js";import"../chunks/chunk.AR26ERMX.js";import{a as i}from"../chunks/chunk.AYIEP2QZ.js";import{d as o}from"../chunks/chunk.U64II52Y.js";var e=class extends m{constructor(){super();this.submitType=t.submit;this.element=i.button}connectedCallback(){super.connectedCallback(),this.addEventListener("click",()=>{this.submitType===t.submit&&n(r.submitIntent,this)})}establishRole(){this.setAttribute("role","button")}};o([s({type:t,reflect:!0,attribute:"submit-type"})],e.prototype,"submitType",2);export{e as default};
 //# sourceMappingURL=scw-button.js.map

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

@@ -1,4 +1,4 @@
-import{a as c,b as o}from"../chunks/chunk.HTGFFVNF.js";import{a as m}from"../chunks/chunk.4RQHMHFC.js";import"../chunks/chunk.GOBVJQFJ.js";import"../chunks/chunk.KNBJLHZX.js";import{a as g}from"../chunks/chunk.HOJVKEO5.js";import{a as x}from"../chunks/chunk.DNFIAFTE.js";import"../chunks/chunk.GXYIL7OD.js";import{a as f}from"../chunks/chunk.N6E2GBUT.js";import{a as u}from"../chunks/chunk.P57FQNZH.js";import{a as n,b as l,c as p}from"../chunks/chunk.OUXJ77RI.js";import{a as r,b as s,d,j as h}from"../chunks/chunk.REQCODIT.js";import"../chunks/chunk.PYJPWHGD.js";import"../chunks/chunk.72IXMPA6.js";import"../chunks/chunk.C5UQJBE6.js";import"../chunks/chunk.QTXBHR77.js";import"../chunks/chunk.HPXOJJE6.js";import"../chunks/chunk.AR26ERMX.js";import{a}from"../chunks/chunk.AYIEP2QZ.js";import{d as i}from"../chunks/chunk.U64II52Y.js";var b=d`
+import{a as c,b as o}from"../chunks/chunk.HTGFFVNF.js";import{a as m}from"../chunks/chunk.4RQHMHFC.js";import"../chunks/chunk.GOBVJQFJ.js";import"../chunks/chunk.KNBJLHZX.js";import{a as g}from"../chunks/chunk.HOJVKEO5.js";import{a as x}from"../chunks/chunk.QUYGJ2UW.js";import"../chunks/chunk.73WS6N4K.js";import{a as f}from"../chunks/chunk.N6E2GBUT.js";import{a as u}from"../chunks/chunk.P57FQNZH.js";import{a as n,b as l,c as p}from"../chunks/chunk.OUXJ77RI.js";import{a as r,b as s,d,j as h}from"../chunks/chunk.REQCODIT.js";import"../chunks/chunk.PYJPWHGD.js";import"../chunks/chunk.72IXMPA6.js";import"../chunks/chunk.C5UQJBE6.js";import"../chunks/chunk.QTXBHR77.js";import"../chunks/chunk.HPXOJJE6.js";import"../chunks/chunk.AR26ERMX.js";import{a}from"../chunks/chunk.AYIEP2QZ.js";import{d as i}from"../chunks/chunk.U64II52Y.js";var b=d`
 :host {
   /* scw element */
   position: relative;
@@ -69,7 +69,7 @@ import{a as c,b as o}from"../chunks/chunk.HTGFFVNF.js";import{a as m}from"../chu
   padding-bottom: 0px;
   /*.image-box {
     width: 100%;
-    padding-bottom: 91.5789473684%;
+    padding-bottom: 88.9473684211%;
     position: relative;
   }*/
   /*.image {
@@ -95,37 +95,37 @@ import{a as c,b as o}from"../chunks/chunk.HTGFFVNF.js";import{a as m}from"../chu
 :host .super-heading.mortgage {
   text-align: LEFT;
   font: var(--scw-type-text-bold-condensed-font);
-  color: var(--scw-color-accent-04, var(--scw-color-accent-mortgage-04));
+  color: var(--scw-color-theme-04, var(--scw-color-accent-mortgage-04));
   align-self: stretch;
 }
 :host .super-heading.savings {
   text-align: LEFT;
   font: var(--scw-type-text-bold-condensed-font);
-  color: var(--scw-color-accent-04, var(--scw-color-accent-savings-04));
+  color: var(--scw-color-theme-04, var(--scw-color-accent-savings-04));
   align-self: stretch;
 }
 :host .super-heading.student {
   text-align: LEFT;
   font: var(--scw-type-text-bold-condensed-font);
-  color: var(--scw-color-accent-04, var(--scw-color-accent-student-04));
+  color: var(--scw-color-theme-04, var(--scw-color-accent-student-04));
   align-self: stretch;
 }
 :host .super-heading.investments {
   text-align: LEFT;
   font: var(--scw-type-text-bold-condensed-font);
-  color: var(--scw-color-accent-04, var(--scw-color-accent-investments-04));
+  color: var(--scw-color-theme-04, var(--scw-color-accent-investments-04));
   align-self: stretch;
 }
 :host .super-heading.checking {
   text-align: LEFT;
   font: var(--scw-type-text-bold-condensed-font);
-  color: var(--scw-color-accent-04, var(--scw-color-accent-checking-04));
+  color: var(--scw-color-theme-04, var(--scw-color-accent-checking-04));
   align-self: stretch;
 }
 :host .super-heading.credit-cards {
   text-align: LEFT;
   font: var(--scw-type-text-bold-condensed-font);
-  color: var(--scw-color-accent-04, var(--scw-color-accent-credit-cards-04));
+  color: var(--scw-color-theme-04, var(--scw-color-accent-credit-cards-04));
   align-self: stretch;
 }
 
@@ -166,7 +166,7 @@ import{a as c,b as o}from"../chunks/chunk.HTGFFVNF.js";import{a as m}from"../chu
 :host .super-heading {
   text-align: LEFT;
   font: var(--scw-type-text-bold-condensed-font);
-  color: var(--scw-color-accent-03, var(--scw-color-primary-03));
+  color: var(--scw-color-theme-03, var(--scw-color-primary-03));
   align-self: stretch;
 }
 :host .description {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["sass-plugin-0:/Users/scottrouse/Workspace/scu-design-system-mono/scu-web-components/src/scw-card/scss/scw-card.scss", "../../src/scw-card/scw-card.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([size=medium]) {\n  display: block;\n  background-color: rgba(0, 0, 0, 0);\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  /*.image-box {\n    width: 100%;\n    padding-bottom: 38.8888888889%;\n    position: relative;\n  }*/\n  /*.image {\n    @include size-medium-image-mixins.box;\n\n    position: absolute;\n    inset: 0;\n    background-position: center;\n    background-size: cover;\n  }*/\n  /*.action {\n    @include size-medium-action-mixins.box;\n    @include size-medium-action-mixins.sizing;\n  }*/\n}\n:host([size=medium]) > *:not(:last-child) {\n  margin-bottom: calc(var(--scw-spacing-1) * 0.8);\n  --margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );\n}\n:host([size=medium]) .description {\n  text-align: LEFT;\n  font: var(--scw-type-text-font);\n  color: var(--scw-color-grey-02);\n  align-self: stretch;\n}\n\n:host([size=small]) {\n  display: block;\n  background-color: rgba(0, 0, 0, 0);\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  /*.image-box {\n    width: 100%;\n    padding-bottom: 91.5789473684%;\n    position: relative;\n  }*/\n  /*.image {\n    @include size-small-image-mixins.box;\n\n    position: absolute;\n    inset: 0;\n    background-position: center;\n    background-size: cover;\n  }*/\n}\n:host([size=small]) > *:not(:last-child) {\n  margin-bottom: calc(var(--scw-spacing-1) * 0.8);\n  --margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );\n}\n:host([size=small]) .description {\n  display: none;\n}\n:host([size=small]) .action {\n  display: none;\n}\n\n:host .super-heading.mortgage {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-condensed-font);\n  color: var(--scw-color-accent-04, var(--scw-color-accent-mortgage-04));\n  align-self: stretch;\n}\n:host .super-heading.savings {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-condensed-font);\n  color: var(--scw-color-accent-04, var(--scw-color-accent-savings-04));\n  align-self: stretch;\n}\n:host .super-heading.student {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-condensed-font);\n  color: var(--scw-color-accent-04, var(--scw-color-accent-student-04));\n  align-self: stretch;\n}\n:host .super-heading.investments {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-condensed-font);\n  color: var(--scw-color-accent-04, var(--scw-color-accent-investments-04));\n  align-self: stretch;\n}\n:host .super-heading.checking {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-condensed-font);\n  color: var(--scw-color-accent-04, var(--scw-color-accent-checking-04));\n  align-self: stretch;\n}\n:host .super-heading.credit-cards {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-condensed-font);\n  color: var(--scw-color-accent-04, var(--scw-color-accent-credit-cards-04));\n  align-self: stretch;\n}\n\n:host {\n  display: block;\n  background-color: rgba(0, 0, 0, 0);\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  /*.image {\n    @include default-image-mixins.box;\n\n    position: absolute;\n    inset: 0;\n    background-position: center;\n    background-size: cover;\n  }*/\n}\n:host > *:not(:last-child) {\n  margin-bottom: calc(var(--scw-spacing-1) * 0.8);\n  --margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );\n}\n:host .image-box {\n  background-color: var(--scw-color-grey-09);\n  border-radius: 10px 10px 10px 10px;\n  align-self: stretch;\n  flex: 1;\n}\n:host .heading {\n  background-color: rgba(0, 0, 0, 0);\n  align-self: stretch;\n}\n:host .super-heading {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-condensed-font);\n  color: var(--scw-color-accent-03, var(--scw-color-primary-03));\n  align-self: stretch;\n}\n:host .description {\n  text-align: LEFT;\n  font: var(--scw-type-text-06-font);\n  color: var(--scw-color-grey-02);\n  align-self: stretch;\n}\n:host .action {\n  width: 83px;\n  height: 32px;\n}\n\n:host([action=none]) {\n  pointer-events: none;\n}\n\n:host([action=whole]) {\n  pointer-events: all;\n}\n\n:host([action=whole]:hover) {\n  cursor: pointer;\n}\n\n:host([action=whole]:focus-visible) {\n  outline: none;\n  box-shadow: var(--scw-effect-focus-shadow);\n  border-radius: 10px 10px 4px 4px;\n}\n\n:host([action=link]) {\n  pointer-events: none;\n}\n:host([action=link]) scw-link {\n  pointer-events: all;\n}`;\n", "import {property, state} from 'lit/decorators.js';\nimport {html} from 'lit/static-html.js';// import {html} from 'lit';\nimport {unsafeStatic} from 'lit/static-html.js';// USE DIFFERENT 'html'!!!!\nimport styles from './scss/scw-card.scss';\nimport ScwComponent from '../scw-component/scw-component';\nimport {ScwCardSizes, ScwCardActions, ScwCardColors} from './scw-card-enums';\nimport parseLightDomCard from './scw-card-light-dom';\nimport {initInteractiveEvents} from '../scw-link-base/linkBehavior';\nimport ScwLinkBase from '../scw-link-base/scw-link-base';\nimport validate from './scw-card-validate';\nimport {Components} from '../utils/enums/Components';\nimport getSuffix from '../utils/suffix';\n\n/**\n * ScwCard a first LitElement web component\n * @class\n * @tag scw-card\n *\n * @slot [default=\"<img src alt /><h1, h2, h3 /><sup /><p />\"]\n    The parts of scw-card are configured via nested html elements.\n    img defines the image, heading the main heading, sup the category heading,\n    and p the descriptive text. Only headings is required (with src, srcset,\n    and alt attributes).\n * @slot [default=\"<img src alt /><h1, h2, h3 /><sup /><p /><a />\"]\n    Adding an anchor will show a link.\n * @slot [default=\"<a><img src alt /><h1, h2, h3 /><sup /><p /></a>\"]\n    Wrapping the entire content in an anchor will make it interactive\n */\nexport default class ScwCard extends ScwLinkBase {\n  /**\n  * styles\n  */\n   static get styles() {\n    return [\n      super.styles,\n      styles,\n    ];\n  }\n\n  // ============== ScwCard ==================================================\n  /** (ScwCard) The design style of the link. */\n  @property({type: String, reflect: true})\n   color: ScwCardColors = ScwCardColors.primary;\n\n  /** (ScwCard) The src of the image within the card */\n  @state() src: string | undefined;\n\n  /** (ScwCard) The srcset of the image within the card */\n  @state() srcset: string | undefined;\n\n  /** (ScwCard) Alternative description of the image. */\n  @state() alt: string | undefined;\n\n  /** (ScwCard) Main title or header of the card (determined by\n  * <h1, h2, h3> content) */\n  @state() _heading: string | undefined;\n\n  /** (ScwCard) Super title, describing a category or area pertaining to title\n  * (determined by <sup> content) */\n  @state() _superHeading: string | undefined;\n\n  /** (ScwCard) Fuller description of what the card is about (determined by\n  * <p> content) */\n  @state() _description: string | undefined;\n\n  /** (ScwCard) Label on the link */\n  @state() _linkLabel : string | undefined;\n\n  /** (ScwCard) Readonly - Size of the card. This\n  * is determined by the nested html content (h1  = large,\n  * h2 = medium, h3 = small). */\n  @property({type: String, reflect: true})\n    size: ScwCardSizes = ScwCardSizes.large;\n\n  /** (ScwCard) Readonly - The type of action (whole card, link, or none).\n   * This is determined by the use of an anchor tag. */\n  @property({type: String, reflect: true})\n    action: ScwCardActions = ScwCardActions.none;\n\n  /** scw-header with versioning suffix */\n  headerNodeName : any;\n\n  /** scw-image with versioning suffix */\n  imageNodeName : any;\n\n  /** scw-link with versioning suffix */\n  linkNodeName : any;\n\n  /**\n  * Constructor\n  */\n  constructor() {\n    super();\n    this.element = Components.card;\n    initInteractiveEvents( this );\n    this.clickHandler = this.clickHandler.bind(this);\n\n    const suffix = getSuffix();\n    this.headerNodeName = unsafeStatic(`scw-${Components.heading}${suffix}`);\n    this.imageNodeName = unsafeStatic(`scw-${Components.image}${suffix}`);\n    this.linkNodeName = unsafeStatic(`scw-${Components.link}${suffix}`);\n\n    this._allowClicksToPropagate = true;// allows child button to work\n  }\n\n  /** parseAndValidateLightDom, just adding local parsing and validation */\n  parseAndValidateLightDom() {\n    parseLightDomCard(this);\n    validate( this );\n    super.parseAndValidateLightDom();\n  }\n\n  /**\n  * Handle click event from link so it doesn't trigger twice\n  * @param {Event} evt\n  */\n  clickHandler(evt : Event) {\n    evt.stopPropagation();\n    this.click();\n  }\n\n  /**\n  * change the main heading to be the error.\n  * @param {string} message describing warning\n  */\n  warn( message: string ) {\n    this._heading = `error: ${message}`;\n    ScwComponent.prototype.warn.call(this, message );\n  }\n\n  /**\n  * Render image area\n  * @return {object} component DOM\n  */\n  renderImage() {\n    if (\n      ( this.src || this.srcset ) &&\n      this.alt ) {\n      // ultimately this is simpliest way to do this (versus CSS...)\n      // it is NOT connected to Figma proportions as a consequence.\n      let aspectRatio = '636:350';\n      if (this.size === ScwCardSizes.medium ) {\n        aspectRatio = '414:163';\n      } else if (this.size === ScwCardSizes.small) {\n        aspectRatio = '1:1';\n      }\n\n      return html`\n        <${this.imageNodeName}\n            class=\"image-box\"\n            src=\"${this.src}\"\n            srcset=\"${this.srcset}\"\n            aria-label=\"${this.alt}\"\n            aspect-ratio=\"${aspectRatio}\"\n            object-fit=\"cover\">\n        </${this.imageNodeName}>\n      `;\n    }\n  }\n\n  /**\n  * Render heading area\n  * @return {object} component DOM\n  */\n  renderHeading() {\n    switch ( this.size ) {\n    case ScwCardSizes.large:\n      return html`\n           <${this.headerNodeName} \n            dynamic class=\"heading\">\n            <h1>${this._heading}</h1>\n           </${this.headerNodeName}>`;\n    case ScwCardSizes.medium:\n      return html`\n           <${this.headerNodeName} \n            dynamic class=\"heading\">\n            <h2>${this._heading}</h2>\n           </${this.headerNodeName}>`;\n    case ScwCardSizes.small:\n      return html`\n           <${this.headerNodeName} \n            dynamic class=\"heading\">\n            <h3>${this._heading}</h3>\n           </${this.headerNodeName}>`;\n    }\n  }\n\n  /**\n  * Render link area\n  * @return {object} component DOM\n  */\n  renderButton() {\n    if ( this.action === ScwCardActions.link) {\n      return html`\n        <${this.linkNodeName}\n          color=\"${this.color}\"\n          aria-label=\"${this._linkLabel ? this._linkLabel : 'no label'}\" \n          @click=\"${this.clickHandler}\">\n        </${this.linkNodeName}>`;\n    }\n    return null;\n  }\n\n  /**\n  * render body\n  * @return {object} component DOM\n  */\n  renderBody() : object {\n    return html`\n       ${this.renderImage()}\n       ${this._superHeading ?\n          html`\n          <div class=\"super-heading ${this.color}\">\n            ${this._superHeading}\n          </div>` : ''\n        }\n       ${this.renderHeading()}\n       ${this._description ?\n          html`\n          <div class=\"description\">\n            ${this._description}\n          </div>` : ''\n        }`;\n  }\n\n  /**\n  * render\n  * @return {object} component DOM\n  */\n  render() : object {\n    if (this.action === ScwCardActions.whole) {\n      return this.renderBody();\n    } else {\n      return html`\n        ${this.renderBody()}\n        ${this.renderButton()}`;\n    };\n  }\n}\n"],
+  "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([size=medium]) {\n  display: block;\n  background-color: rgba(0, 0, 0, 0);\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  /*.image-box {\n    width: 100%;\n    padding-bottom: 38.8888888889%;\n    position: relative;\n  }*/\n  /*.image {\n    @include size-medium-image-mixins.box;\n\n    position: absolute;\n    inset: 0;\n    background-position: center;\n    background-size: cover;\n  }*/\n  /*.action {\n    @include size-medium-action-mixins.box;\n    @include size-medium-action-mixins.sizing;\n  }*/\n}\n:host([size=medium]) > *:not(:last-child) {\n  margin-bottom: calc(var(--scw-spacing-1) * 0.8);\n  --margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );\n}\n:host([size=medium]) .description {\n  text-align: LEFT;\n  font: var(--scw-type-text-font);\n  color: var(--scw-color-grey-02);\n  align-self: stretch;\n}\n\n:host([size=small]) {\n  display: block;\n  background-color: rgba(0, 0, 0, 0);\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  /*.image-box {\n    width: 100%;\n    padding-bottom: 88.9473684211%;\n    position: relative;\n  }*/\n  /*.image {\n    @include size-small-image-mixins.box;\n\n    position: absolute;\n    inset: 0;\n    background-position: center;\n    background-size: cover;\n  }*/\n}\n:host([size=small]) > *:not(:last-child) {\n  margin-bottom: calc(var(--scw-spacing-1) * 0.8);\n  --margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );\n}\n:host([size=small]) .description {\n  display: none;\n}\n:host([size=small]) .action {\n  display: none;\n}\n\n:host .super-heading.mortgage {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-condensed-font);\n  color: var(--scw-color-theme-04, var(--scw-color-accent-mortgage-04));\n  align-self: stretch;\n}\n:host .super-heading.savings {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-condensed-font);\n  color: var(--scw-color-theme-04, var(--scw-color-accent-savings-04));\n  align-self: stretch;\n}\n:host .super-heading.student {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-condensed-font);\n  color: var(--scw-color-theme-04, var(--scw-color-accent-student-04));\n  align-self: stretch;\n}\n:host .super-heading.investments {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-condensed-font);\n  color: var(--scw-color-theme-04, var(--scw-color-accent-investments-04));\n  align-self: stretch;\n}\n:host .super-heading.checking {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-condensed-font);\n  color: var(--scw-color-theme-04, var(--scw-color-accent-checking-04));\n  align-self: stretch;\n}\n:host .super-heading.credit-cards {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-condensed-font);\n  color: var(--scw-color-theme-04, var(--scw-color-accent-credit-cards-04));\n  align-self: stretch;\n}\n\n:host {\n  display: block;\n  background-color: rgba(0, 0, 0, 0);\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  /*.image {\n    @include default-image-mixins.box;\n\n    position: absolute;\n    inset: 0;\n    background-position: center;\n    background-size: cover;\n  }*/\n}\n:host > *:not(:last-child) {\n  margin-bottom: calc(var(--scw-spacing-1) * 0.8);\n  --margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );\n}\n:host .image-box {\n  background-color: var(--scw-color-grey-09);\n  border-radius: 10px 10px 10px 10px;\n  align-self: stretch;\n  flex: 1;\n}\n:host .heading {\n  background-color: rgba(0, 0, 0, 0);\n  align-self: stretch;\n}\n:host .super-heading {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-condensed-font);\n  color: var(--scw-color-theme-03, var(--scw-color-primary-03));\n  align-self: stretch;\n}\n:host .description {\n  text-align: LEFT;\n  font: var(--scw-type-text-06-font);\n  color: var(--scw-color-grey-02);\n  align-self: stretch;\n}\n:host .action {\n  width: 83px;\n  height: 32px;\n}\n\n:host([action=none]) {\n  pointer-events: none;\n}\n\n:host([action=whole]) {\n  pointer-events: all;\n}\n\n:host([action=whole]:hover) {\n  cursor: pointer;\n}\n\n:host([action=whole]:focus-visible) {\n  outline: none;\n  box-shadow: var(--scw-effect-focus-shadow);\n  border-radius: 10px 10px 4px 4px;\n}\n\n:host([action=link]) {\n  pointer-events: none;\n}\n:host([action=link]) scw-link {\n  pointer-events: all;\n}`;\n", "import {property, state} from 'lit/decorators.js';\nimport {html} from 'lit/static-html.js';// import {html} from 'lit';\nimport {unsafeStatic} from 'lit/static-html.js';// USE DIFFERENT 'html'!!!!\nimport styles from './scss/scw-card.scss';\nimport ScwComponent from '../scw-component/scw-component';\nimport {ScwCardSizes, ScwCardActions, ScwCardColors} from './scw-card-enums';\nimport parseLightDomCard from './scw-card-light-dom';\nimport {initInteractiveEvents} from '../scw-link-base/linkBehavior';\nimport ScwLinkBase from '../scw-link-base/scw-link-base';\nimport validate from './scw-card-validate';\nimport {Components} from '../utils/enums/Components';\nimport getSuffix from '../utils/suffix';\n\n/**\n * ScwCard a first LitElement web component\n * @class\n * @tag scw-card\n *\n * @slot [default=\"<img src alt /><h1, h2, h3 /><sup /><p />\"]\n    The parts of scw-card are configured via nested html elements.\n    img defines the image, heading the main heading, sup the category heading,\n    and p the descriptive text. Only headings is required (with src, srcset,\n    and alt attributes).\n * @slot [default=\"<img src alt /><h1, h2, h3 /><sup /><p /><a />\"]\n    Adding an anchor will show a link.\n * @slot [default=\"<a><img src alt /><h1, h2, h3 /><sup /><p /></a>\"]\n    Wrapping the entire content in an anchor will make it interactive\n */\nexport default class ScwCard extends ScwLinkBase {\n  /**\n  * styles\n  */\n   static get styles() {\n    return [\n      super.styles,\n      styles,\n    ];\n  }\n\n  // ============== ScwCard ==================================================\n  /** (ScwCard) The design style of the link. */\n  @property({type: String, reflect: true})\n   color: ScwCardColors = ScwCardColors.primary;\n\n  /** (ScwCard) The src of the image within the card */\n  @state() src: string | undefined;\n\n  /** (ScwCard) The srcset of the image within the card */\n  @state() srcset: string | undefined;\n\n  /** (ScwCard) Alternative description of the image. */\n  @state() alt: string | undefined;\n\n  /** (ScwCard) Main title or header of the card (determined by\n  * <h1, h2, h3> content) */\n  @state() _heading: string | undefined;\n\n  /** (ScwCard) Super title, describing a category or area pertaining to title\n  * (determined by <sup> content) */\n  @state() _superHeading: string | undefined;\n\n  /** (ScwCard) Fuller description of what the card is about (determined by\n  * <p> content) */\n  @state() _description: string | undefined;\n\n  /** (ScwCard) Label on the link */\n  @state() _linkLabel : string | undefined;\n\n  /** (ScwCard) Readonly - Size of the card. This\n  * is determined by the nested html content (h1  = large,\n  * h2 = medium, h3 = small). */\n  @property({type: String, reflect: true})\n    size: ScwCardSizes = ScwCardSizes.large;\n\n  /** (ScwCard) Readonly - The type of action (whole card, link, or none).\n   * This is determined by the use of an anchor tag. */\n  @property({type: String, reflect: true})\n    action: ScwCardActions = ScwCardActions.none;\n\n  /** scw-header with versioning suffix */\n  headerNodeName : any;\n\n  /** scw-image with versioning suffix */\n  imageNodeName : any;\n\n  /** scw-link with versioning suffix */\n  linkNodeName : any;\n\n  /**\n  * Constructor\n  */\n  constructor() {\n    super();\n    this.element = Components.card;\n    initInteractiveEvents( this );\n    this.clickHandler = this.clickHandler.bind(this);\n\n    const suffix = getSuffix();\n    this.headerNodeName = unsafeStatic(`scw-${Components.heading}${suffix}`);\n    this.imageNodeName = unsafeStatic(`scw-${Components.image}${suffix}`);\n    this.linkNodeName = unsafeStatic(`scw-${Components.link}${suffix}`);\n\n    this._allowClicksToPropagate = true;// allows child button to work\n  }\n\n  /** parseAndValidateLightDom, just adding local parsing and validation */\n  parseAndValidateLightDom() {\n    parseLightDomCard(this);\n    validate( this );\n    super.parseAndValidateLightDom();\n  }\n\n  /**\n  * Handle click event from link so it doesn't trigger twice\n  * @param {Event} evt\n  */\n  clickHandler(evt : Event) {\n    evt.stopPropagation();\n    this.click();\n  }\n\n  /**\n  * change the main heading to be the error.\n  * @param {string} message describing warning\n  */\n  warn( message: string ) {\n    this._heading = `error: ${message}`;\n    ScwComponent.prototype.warn.call(this, message );\n  }\n\n  /**\n  * Render image area\n  * @return {object} component DOM\n  */\n  renderImage() {\n    if (\n      ( this.src || this.srcset ) &&\n      this.alt ) {\n      // ultimately this is simpliest way to do this (versus CSS...)\n      // it is NOT connected to Figma proportions as a consequence.\n      let aspectRatio = '636:350';\n      if (this.size === ScwCardSizes.medium ) {\n        aspectRatio = '414:163';\n      } else if (this.size === ScwCardSizes.small) {\n        aspectRatio = '1:1';\n      }\n\n      return html`\n        <${this.imageNodeName}\n            class=\"image-box\"\n            src=\"${this.src}\"\n            srcset=\"${this.srcset}\"\n            aria-label=\"${this.alt}\"\n            aspect-ratio=\"${aspectRatio}\"\n            object-fit=\"cover\">\n        </${this.imageNodeName}>\n      `;\n    }\n  }\n\n  /**\n  * Render heading area\n  * @return {object} component DOM\n  */\n  renderHeading() {\n    switch ( this.size ) {\n    case ScwCardSizes.large:\n      return html`\n           <${this.headerNodeName} \n            dynamic class=\"heading\">\n            <h1>${this._heading}</h1>\n           </${this.headerNodeName}>`;\n    case ScwCardSizes.medium:\n      return html`\n           <${this.headerNodeName} \n            dynamic class=\"heading\">\n            <h2>${this._heading}</h2>\n           </${this.headerNodeName}>`;\n    case ScwCardSizes.small:\n      return html`\n           <${this.headerNodeName} \n            dynamic class=\"heading\">\n            <h3>${this._heading}</h3>\n           </${this.headerNodeName}>`;\n    }\n  }\n\n  /**\n  * Render link area\n  * @return {object} component DOM\n  */\n  renderButton() {\n    if ( this.action === ScwCardActions.link) {\n      return html`\n        <${this.linkNodeName}\n          color=\"${this.color}\"\n          aria-label=\"${this._linkLabel ? this._linkLabel : 'no label'}\" \n          @click=\"${this.clickHandler}\">\n        </${this.linkNodeName}>`;\n    }\n    return null;\n  }\n\n  /**\n  * render body\n  * @return {object} component DOM\n  */\n  renderBody() : object {\n    return html`\n       ${this.renderImage()}\n       ${this._superHeading ?\n          html`\n          <div class=\"super-heading ${this.color}\">\n            ${this._superHeading}\n          </div>` : ''\n        }\n       ${this.renderHeading()}\n       ${this._description ?\n          html`\n          <div class=\"description\">\n            ${this._description}\n          </div>` : ''\n        }`;\n  }\n\n  /**\n  * render\n  * @return {object} component DOM\n  */\n  render() : object {\n    if (this.action === ScwCardActions.whole) {\n      return this.renderBody();\n    } else {\n      return html`\n        ${this.renderBody()}\n        ${this.renderButton()}`;\n    };\n  }\n}\n"],
   "mappings": "o0BACA,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;GC2Bf,mBAAqC,EAAY,CA+D/C,aAAc,CACZ,QAlDD,WAAuB,EAAc,QA8BpC,UAAqB,EAAa,MAKlC,YAAyB,EAAe,KAgBxC,KAAK,QAAU,EAAW,KAC1B,EAAuB,MACvB,KAAK,aAAe,KAAK,aAAa,KAAK,MAE3C,GAAM,GAAS,IACf,KAAK,eAAiB,EAAa,OAAO,EAAW,UAAU,KAC/D,KAAK,cAAgB,EAAa,OAAO,EAAW,QAAQ,KAC5D,KAAK,aAAe,EAAa,OAAO,EAAW,OAAO,KAE1D,KAAK,wBAA0B,aAtErB,SAAS,CACnB,MAAO,CACL,MAAM,OACN,GAuEJ,0BAA2B,CACzB,EAAkB,MAClB,EAAU,MACV,MAAM,2BAOR,aAAa,EAAa,CACxB,EAAI,kBACJ,KAAK,QAOP,KAAM,EAAkB,CACtB,KAAK,SAAW,UAAU,IAC1B,EAAa,UAAU,KAAK,KAAK,KAAM,GAOzC,aAAc,CACZ,GACI,MAAK,KAAO,KAAK,SACnB,KAAK,IAAM,CAGX,GAAI,GAAc,UAClB,MAAI,MAAK,OAAS,EAAa,OAC7B,EAAc,UACL,KAAK,OAAS,EAAa,OACpC,GAAc,OAGT;AAAA,WACF,KAAK;AAAA;AAAA,mBAEG,KAAK;AAAA,sBACF,KAAK;AAAA,0BACD,KAAK;AAAA,4BACH;AAAA;AAAA,YAEhB,KAAK;AAAA,SASf,eAAgB,CACd,OAAS,KAAK,UACT,GAAa,MAChB,MAAO;AAAA,cACC,KAAK;AAAA;AAAA,kBAED,KAAK;AAAA,eACR,KAAK,sBACX,GAAa,OAChB,MAAO;AAAA,cACC,KAAK;AAAA;AAAA,kBAED,KAAK;AAAA,eACR,KAAK,sBACX,GAAa,MAChB,MAAO;AAAA,cACC,KAAK;AAAA;AAAA,kBAED,KAAK;AAAA,eACR,KAAK,mBAQlB,cAAe,CACb,MAAK,MAAK,SAAW,EAAe,KAC3B;AAAA,WACF,KAAK;AAAA,mBACG,KAAK;AAAA,wBACA,KAAK,WAAa,KAAK,WAAa;AAAA,oBACxC,KAAK;AAAA,YACb,KAAK,gBAEN,KAOT,YAAsB,CACpB,MAAO;AAAA,SACF,KAAK;AAAA,SACL,KAAK,cACJ;AAAA,sCAC4B,KAAK;AAAA,cAC7B,KAAK;AAAA,kBACC;AAAA,SAEX,KAAK;AAAA,SACL,KAAK,aACJ;AAAA;AAAA,cAEI,KAAK;AAAA,kBACC,KAQlB,QAAkB,CAChB,MAAI,MAAK,SAAW,EAAe,MAC1B,KAAK,aAEL;AAAA,UACH,KAAK;AAAA,UACL,KAAK,mBAjMZ,GADA,EAAS,CAAC,KAAM,OAAQ,QAAS,MACjC,AAdH,EAcG,qBAGQ,GAAR,KAAQ,AAjBX,EAiBW,mBAGA,GAAR,KAAQ,AApBX,EAoBW,sBAGA,GAAR,KAAQ,AAvBX,EAuBW,mBAIA,GAAR,KAAQ,AA3BX,EA2BW,wBAIA,GAAR,KAAQ,AA/BX,EA+BW,6BAIA,GAAR,KAAQ,AAnCX,EAmCW,4BAGA,GAAR,KAAQ,AAtCX,EAsCW,0BAMP,GADD,EAAS,CAAC,KAAM,OAAQ,QAAS,MAChC,AA5CJ,EA4CI,oBAKA,GADD,EAAS,CAAC,KAAM,OAAQ,QAAS,MAChC,AAjDJ,EAiDI",
   "names": []
 }

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

@@ -1,2 +1,2 @@
-import{a,b,c}from"../chunks/chunk.Y45V2UNS.js";import"../chunks/chunk.2GHJYU6N.js";import"../chunks/chunk.DNFIAFTE.js";import"../chunks/chunk.GXYIL7OD.js";import"../chunks/chunk.REQCODIT.js";import"../chunks/chunk.PYJPWHGD.js";import"../chunks/chunk.72IXMPA6.js";import"../chunks/chunk.C5UQJBE6.js";import"../chunks/chunk.QTXBHR77.js";import"../chunks/chunk.HPXOJJE6.js";import"../chunks/chunk.AR26ERMX.js";import"../chunks/chunk.AYIEP2QZ.js";import"../chunks/chunk.U64II52Y.js";export{b as ScwFormComponentSubmitTypes,a as ScwFormComponentTypes,c as default};
+import{a,b,c}from"../chunks/chunk.IULCMWN5.js";import"../chunks/chunk.2GHJYU6N.js";import"../chunks/chunk.QUYGJ2UW.js";import"../chunks/chunk.73WS6N4K.js";import"../chunks/chunk.REQCODIT.js";import"../chunks/chunk.PYJPWHGD.js";import"../chunks/chunk.72IXMPA6.js";import"../chunks/chunk.C5UQJBE6.js";import"../chunks/chunk.QTXBHR77.js";import"../chunks/chunk.HPXOJJE6.js";import"../chunks/chunk.AR26ERMX.js";import"../chunks/chunk.AYIEP2QZ.js";import"../chunks/chunk.U64II52Y.js";export{b as ScwFormComponentSubmitTypes,a as ScwFormComponentTypes,c as default};
 //# sourceMappingURL=scw-form-component.js.map

package/dist/scw-heading/scw-heading.js

@@ -1,4 +1,4 @@
-import{a as n}from"../chunks/chunk.3H2NAQH2.js";import{a as c}from"../chunks/chunk.ZHMCYMDR.js";import{a as o,b as l}from"../chunks/chunk.JUF22V7O.js";import{a as i}from"../chunks/chunk.4RQHMHFC.js";import"../chunks/chunk.GOBVJQFJ.js";import"../chunks/chunk.KNBJLHZX.js";import"../chunks/chunk.HOJVKEO5.js";import{a as e,d as a,i as r}from"../chunks/chunk.REQCODIT.js";import"../chunks/chunk.PYJPWHGD.js";import"../chunks/chunk.72IXMPA6.js";import"../chunks/chunk.C5UQJBE6.js";import"../chunks/chunk.QTXBHR77.js";import"../chunks/chunk.HPXOJJE6.js";import"../chunks/chunk.AR26ERMX.js";import{a as h}from"../chunks/chunk.AYIEP2QZ.js";import{d as t}from"../chunks/chunk.U64II52Y.js";var d=a`
+import{a as n}from"../chunks/chunk.3H2NAQH2.js";import{a as l}from"../chunks/chunk.ZHMCYMDR.js";import{a as o,b as c}from"../chunks/chunk.JUF22V7O.js";import{a as i}from"../chunks/chunk.4RQHMHFC.js";import"../chunks/chunk.GOBVJQFJ.js";import"../chunks/chunk.KNBJLHZX.js";import"../chunks/chunk.HOJVKEO5.js";import{a as e,d as a,i as r}from"../chunks/chunk.REQCODIT.js";import"../chunks/chunk.PYJPWHGD.js";import"../chunks/chunk.72IXMPA6.js";import"../chunks/chunk.C5UQJBE6.js";import"../chunks/chunk.QTXBHR77.js";import"../chunks/chunk.HPXOJJE6.js";import"../chunks/chunk.AR26ERMX.js";import{a as h}from"../chunks/chunk.AYIEP2QZ.js";import{d as t}from"../chunks/chunk.U64II52Y.js";var v=a`
 :host {
   /* scw element */
   position: relative;
@@ -17,83 +17,83 @@ import{a as n}from"../chunks/chunk.3H2NAQH2.js";import{a as c}from"../chunks/chu
 }
 
 :host([color=primary]) h1, :host([color=primary]) h2, :host([color=primary]) h3, :host([color=primary]) h4, :host([color=primary]) h5 {
-  color: var(--scw-color-primary-04);
+  color: var(--scw-color-theme-04, var(--scw-color-primary-04));
 }
 
 :host([color=primary]:hover) h1, :host([color=primary]:hover) h2, :host([color=primary]:hover) h3, :host([color=primary]:hover) h4, :host([color=primary]:hover) h5 {
-  color: var(--scw-color-primary-04);
+  color: var(--scw-color-theme-04, var(--scw-color-primary-04));
 }
 
 :host([color=primary]) a:focus-visible h1, :host([color=primary]) a:focus-visible h2, :host([color=primary]) a:focus-visible h3, :host([color=primary]) a:focus-visible h4, :host([color=primary]) a:focus-visible h5 {
-  color: var(--scw-color-primary-04);
+  color: var(--scw-color-theme-04, var(--scw-color-primary-04));
 }
 
 :host([color=primary][aria-disabled=true]) h1, :host([color=primary][aria-disabled=true]) h2, :host([color=primary][aria-disabled=true]) h3, :host([color=primary][aria-disabled=true]) h4, :host([color=primary][aria-disabled=true]) h5 {
-  color: var(--scw-color-primary-09);
+  color: var(--scw-color-theme-09, var(--scw-color-primary-09));
 }
 
 :host([color=mortgage]) h1, :host([color=mortgage]) h2, :host([color=mortgage]) h3, :host([color=mortgage]) h4, :host([color=mortgage]) h5 {
-  color: var(--scw-color-accent-mortgage-04);
+  color: var(--scw-color-theme-04, var(--scw-color-accent-mortgage-04));
 }
 
 :host([color=mortgage]:hover) h1, :host([color=mortgage]:hover) h2, :host([color=mortgage]:hover) h3, :host([color=mortgage]:hover) h4, :host([color=mortgage]:hover) h5 {
-  color: var(--scw-color-accent-mortgage-04);
+  color: var(--scw-color-theme-04, var(--scw-color-accent-mortgage-04));
 }
 
 :host([color=mortgage]) a:focus-visible h1, :host([color=mortgage]) a:focus-visible h2, :host([color=mortgage]) a:focus-visible h3, :host([color=mortgage]) a:focus-visible h4, :host([color=mortgage]) a:focus-visible h5 {
-  color: var(--scw-color-accent-mortgage-04);
+  color: var(--scw-color-theme-04, var(--scw-color-accent-mortgage-04));
 }
 
 :host([color=mortgage][aria-disabled=true]) h1, :host([color=mortgage][aria-disabled=true]) h2, :host([color=mortgage][aria-disabled=true]) h3, :host([color=mortgage][aria-disabled=true]) h4, :host([color=mortgage][aria-disabled=true]) h5 {
-  color: var(--scw-color-accent-mortgage-09);
+  color: var(--scw-color-theme-09, var(--scw-color-accent-mortgage-09));
 }
 
 :host([color=savings]) h1, :host([color=savings]) h2, :host([color=savings]) h3, :host([color=savings]) h4, :host([color=savings]) h5 {
-  color: var(--scw-color-accent-savings-04);
+  color: var(--scw-color-theme-04, var(--scw-color-accent-savings-04));
 }
 
 :host([color=savings]:hover) h1, :host([color=savings]:hover) h2, :host([color=savings]:hover) h3, :host([color=savings]:hover) h4, :host([color=savings]:hover) h5 {
-  color: var(--scw-color-accent-savings-04);
+  color: var(--scw-color-theme-04, var(--scw-color-accent-savings-04));
 }
 
 :host([color=savings]) a:focus-visible h1, :host([color=savings]) a:focus-visible h2, :host([color=savings]) a:focus-visible h3, :host([color=savings]) a:focus-visible h4, :host([color=savings]) a:focus-visible h5 {
-  color: var(--scw-color-accent-savings-04);
+  color: var(--scw-color-theme-04, var(--scw-color-accent-savings-04));
 }
 
 :host([color=savings][aria-disabled=true]) h1, :host([color=savings][aria-disabled=true]) h2, :host([color=savings][aria-disabled=true]) h3, :host([color=savings][aria-disabled=true]) h4, :host([color=savings][aria-disabled=true]) h5 {
-  color: var(--scw-color-accent-savings-09);
+  color: var(--scw-color-theme-09, var(--scw-color-accent-savings-09));
 }
 
 :host([color=student]) h1, :host([color=student]) h2, :host([color=student]) h3, :host([color=student]) h4, :host([color=student]) h5 {
-  color: var(--scw-color-accent-student-04);
+  color: var(--scw-color-theme-04, var(--scw-color-accent-student-04));
 }
 
 :host([color=student]:hover) h1, :host([color=student]:hover) h2, :host([color=student]:hover) h3, :host([color=student]:hover) h4, :host([color=student]:hover) h5 {
-  color: var(--scw-color-accent-student-04);
+  color: var(--scw-color-theme-04, var(--scw-color-accent-student-04));
 }
 
 :host([color=student]) a:focus-visible h1, :host([color=student]) a:focus-visible h2, :host([color=student]) a:focus-visible h3, :host([color=student]) a:focus-visible h4, :host([color=student]) a:focus-visible h5 {
-  color: var(--scw-color-accent-student-04);
+  color: var(--scw-color-theme-04, var(--scw-color-accent-student-04));
 }
 
 :host([color=student][aria-disabled=true]) h1, :host([color=student][aria-disabled=true]) h2, :host([color=student][aria-disabled=true]) h3, :host([color=student][aria-disabled=true]) h4, :host([color=student][aria-disabled=true]) h5 {
-  color: var(--scw-color-accent-student-09);
+  color: var(--scw-color-theme-09, var(--scw-color-accent-student-09));
 }
 
 :host([color=investments]) h1, :host([color=investments]) h2, :host([color=investments]) h3, :host([color=investments]) h4, :host([color=investments]) h5 {
-  color: var(--scw-color-accent-investments-04);
+  color: var(--scw-color-theme-04, var(--scw-color-accent-investments-04));
 }
 
 :host([color=investments]:hover) h1, :host([color=investments]:hover) h2, :host([color=investments]:hover) h3, :host([color=investments]:hover) h4, :host([color=investments]:hover) h5 {
-  color: var(--scw-color-accent-investments-04);
+  color: var(--scw-color-theme-04, var(--scw-color-accent-investments-04));
 }
 
 :host([color=investments]) a:focus-visible h1, :host([color=investments]) a:focus-visible h2, :host([color=investments]) a:focus-visible h3, :host([color=investments]) a:focus-visible h4, :host([color=investments]) a:focus-visible h5 {
-  color: var(--scw-color-accent-investments-04);
+  color: var(--scw-color-theme-04, var(--scw-color-accent-investments-04));
 }
 
 :host([color=investments][aria-disabled=true]) h1, :host([color=investments][aria-disabled=true]) h2, :host([color=investments][aria-disabled=true]) h3, :host([color=investments][aria-disabled=true]) h4, :host([color=investments][aria-disabled=true]) h5 {
-  color: var(--scw-color-accent-investments-09);
+  color: var(--scw-color-theme-09, var(--scw-color-accent-investments-09));
 }
 
 :host {
@@ -148,22 +148,22 @@ import{a as n}from"../chunks/chunk.3H2NAQH2.js";import{a as c}from"../chunks/chu
 }
 :host h2 {
   text-align: LEFT;
-  font: var(--scw-type-text-bold-08-font);
+  font: var(--scw-type-text-bold-condensed-09-font);
   color: var(--scw-color-grey-02);
 }
 :host h3 {
   text-align: LEFT;
-  font: var(--scw-type-text-bold-condensed-07-font);
+  font: var(--scw-type-text-bold-condensed-08-font);
   color: var(--scw-color-grey-02);
 }
 :host h4 {
   text-align: LEFT;
-  font: var(--scw-type-text-bold-06-font);
+  font: var(--scw-type-text-bold-condensed-07-font);
   color: var(--scw-color-grey-02);
 }
 :host h5 {
   text-align: LEFT;
-  font: var(--scw-type-text-bold-condensed-font);
+  font: var(--scw-type-text-bold-condensed-06-font);
   color: var(--scw-color-grey-02);
-}`;var s=class extends i{constructor(){super();this.size=o.H1;this.color=l.default;this.element=h.heading}static get styles(){return[super.styles,d]}parseAndValidateLightDom(){super.parseAndValidateLightDom(),n(this),c(this)}renderHeading(){switch(this.size){case o.H5:return r`<h5>${this.ariaLabel}</h5>`;case o.H4:return r`<h4>${this.ariaLabel}</h4>`;case o.H3:return r`<h3>${this.ariaLabel}</h3>`;case o.H2:return r`<h2>${this.ariaLabel}</h2>`;case o.H1:default:return r`<h1>${this.ariaLabel}</h1>`}}render(){return this.renderHeading()}};t([e({type:String,reflect:!0})],s.prototype,"size",2),t([e({type:String,reflect:!0})],s.prototype,"color",2);export{s as default};
+}`;var s=class extends i{constructor(){super();this.size=o.H1;this.color=c.default;this.element=h.heading}static get styles(){return[super.styles,v]}parseAndValidateLightDom(){super.parseAndValidateLightDom(),n(this),l(this)}renderHeading(){switch(this.size){case o.H5:return r`<h5>${this.ariaLabel}</h5>`;case o.H4:return r`<h4>${this.ariaLabel}</h4>`;case o.H3:return r`<h3>${this.ariaLabel}</h3>`;case o.H2:return r`<h2>${this.ariaLabel}</h2>`;case o.H1:default:return r`<h1>${this.ariaLabel}</h1>`}}render(){return this.renderHeading()}};t([e({type:String,reflect:!0})],s.prototype,"size",2),t([e({type:String,reflect:!0})],s.prototype,"color",2);export{s as default};
 //# sourceMappingURL=scw-heading.js.map

package/dist/scw-heading/scw-heading.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["sass-plugin-0:/Users/scottrouse/Workspace/scu-design-system-mono/scu-web-components/src/scw-heading/scss/scw-heading.scss", "../../src/scw-heading/scw-heading.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([color=primary]) h1, :host([color=primary]) h2, :host([color=primary]) h3, :host([color=primary]) h4, :host([color=primary]) h5 {\n  color: var(--scw-color-primary-04);\n}\n\n:host([color=primary]:hover) h1, :host([color=primary]:hover) h2, :host([color=primary]:hover) h3, :host([color=primary]:hover) h4, :host([color=primary]:hover) h5 {\n  color: var(--scw-color-primary-04);\n}\n\n:host([color=primary]) a:focus-visible h1, :host([color=primary]) a:focus-visible h2, :host([color=primary]) a:focus-visible h3, :host([color=primary]) a:focus-visible h4, :host([color=primary]) a:focus-visible h5 {\n  color: var(--scw-color-primary-04);\n}\n\n:host([color=primary][aria-disabled=true]) h1, :host([color=primary][aria-disabled=true]) h2, :host([color=primary][aria-disabled=true]) h3, :host([color=primary][aria-disabled=true]) h4, :host([color=primary][aria-disabled=true]) h5 {\n  color: var(--scw-color-primary-09);\n}\n\n:host([color=mortgage]) h1, :host([color=mortgage]) h2, :host([color=mortgage]) h3, :host([color=mortgage]) h4, :host([color=mortgage]) h5 {\n  color: var(--scw-color-accent-mortgage-04);\n}\n\n:host([color=mortgage]:hover) h1, :host([color=mortgage]:hover) h2, :host([color=mortgage]:hover) h3, :host([color=mortgage]:hover) h4, :host([color=mortgage]:hover) h5 {\n  color: var(--scw-color-accent-mortgage-04);\n}\n\n:host([color=mortgage]) a:focus-visible h1, :host([color=mortgage]) a:focus-visible h2, :host([color=mortgage]) a:focus-visible h3, :host([color=mortgage]) a:focus-visible h4, :host([color=mortgage]) a:focus-visible h5 {\n  color: var(--scw-color-accent-mortgage-04);\n}\n\n:host([color=mortgage][aria-disabled=true]) h1, :host([color=mortgage][aria-disabled=true]) h2, :host([color=mortgage][aria-disabled=true]) h3, :host([color=mortgage][aria-disabled=true]) h4, :host([color=mortgage][aria-disabled=true]) h5 {\n  color: var(--scw-color-accent-mortgage-09);\n}\n\n:host([color=savings]) h1, :host([color=savings]) h2, :host([color=savings]) h3, :host([color=savings]) h4, :host([color=savings]) h5 {\n  color: var(--scw-color-accent-savings-04);\n}\n\n:host([color=savings]:hover) h1, :host([color=savings]:hover) h2, :host([color=savings]:hover) h3, :host([color=savings]:hover) h4, :host([color=savings]:hover) h5 {\n  color: var(--scw-color-accent-savings-04);\n}\n\n:host([color=savings]) a:focus-visible h1, :host([color=savings]) a:focus-visible h2, :host([color=savings]) a:focus-visible h3, :host([color=savings]) a:focus-visible h4, :host([color=savings]) a:focus-visible h5 {\n  color: var(--scw-color-accent-savings-04);\n}\n\n:host([color=savings][aria-disabled=true]) h1, :host([color=savings][aria-disabled=true]) h2, :host([color=savings][aria-disabled=true]) h3, :host([color=savings][aria-disabled=true]) h4, :host([color=savings][aria-disabled=true]) h5 {\n  color: var(--scw-color-accent-savings-09);\n}\n\n:host([color=student]) h1, :host([color=student]) h2, :host([color=student]) h3, :host([color=student]) h4, :host([color=student]) h5 {\n  color: var(--scw-color-accent-student-04);\n}\n\n:host([color=student]:hover) h1, :host([color=student]:hover) h2, :host([color=student]:hover) h3, :host([color=student]:hover) h4, :host([color=student]:hover) h5 {\n  color: var(--scw-color-accent-student-04);\n}\n\n:host([color=student]) a:focus-visible h1, :host([color=student]) a:focus-visible h2, :host([color=student]) a:focus-visible h3, :host([color=student]) a:focus-visible h4, :host([color=student]) a:focus-visible h5 {\n  color: var(--scw-color-accent-student-04);\n}\n\n:host([color=student][aria-disabled=true]) h1, :host([color=student][aria-disabled=true]) h2, :host([color=student][aria-disabled=true]) h3, :host([color=student][aria-disabled=true]) h4, :host([color=student][aria-disabled=true]) h5 {\n  color: var(--scw-color-accent-student-09);\n}\n\n:host([color=investments]) h1, :host([color=investments]) h2, :host([color=investments]) h3, :host([color=investments]) h4, :host([color=investments]) h5 {\n  color: var(--scw-color-accent-investments-04);\n}\n\n:host([color=investments]:hover) h1, :host([color=investments]:hover) h2, :host([color=investments]:hover) h3, :host([color=investments]:hover) h4, :host([color=investments]:hover) h5 {\n  color: var(--scw-color-accent-investments-04);\n}\n\n:host([color=investments]) a:focus-visible h1, :host([color=investments]) a:focus-visible h2, :host([color=investments]) a:focus-visible h3, :host([color=investments]) a:focus-visible h4, :host([color=investments]) a:focus-visible h5 {\n  color: var(--scw-color-accent-investments-04);\n}\n\n:host([color=investments][aria-disabled=true]) h1, :host([color=investments][aria-disabled=true]) h2, :host([color=investments][aria-disabled=true]) h3, :host([color=investments][aria-disabled=true]) h4, :host([color=investments][aria-disabled=true]) h5 {\n  color: var(--scw-color-accent-investments-09);\n}\n\n:host {\n  display: block;\n}\n\n:host(:focus-visible) {\n  outline: none;\n  box-shadow: var(--scw-effect-focus-shadow);\n  border-radius: 4px 4px 4px 4px;\n}\n\n:host([link]) h1:hover, :host([link]) h2:hover, :host([link]) h3:hover, :host([link]) h4:hover, :host([link]) h5:hover,\n:host([anchor]) h1:hover,\n:host([anchor]) h2:hover,\n:host([anchor]) h3:hover,\n:host([anchor]) h4:hover,\n:host([anchor]) h5:hover {\n  cursor: pointer;\n  text-decoration: underline;\n}\n\n:host([link][aria-disabled=true]) h1, :host([link][aria-disabled=true]) h2, :host([link][aria-disabled=true]) h3, :host([link][aria-disabled=true]) h4, :host([link][aria-disabled=true]) h5,\n:host([anchor][aria-disabled=true]) h1,\n:host([anchor][aria-disabled=true]) h2,\n:host([anchor][aria-disabled=true]) h3,\n:host([anchor][aria-disabled=true]) h4,\n:host([anchor][aria-disabled=true]) h5 {\n  color: var(--scw-color-grey-06);\n}\n:host([link][aria-disabled=true]) h1:hover, :host([link][aria-disabled=true]) h2:hover, :host([link][aria-disabled=true]) h3:hover, :host([link][aria-disabled=true]) h4:hover, :host([link][aria-disabled=true]) h5:hover,\n:host([anchor][aria-disabled=true]) h1:hover,\n:host([anchor][aria-disabled=true]) h2:hover,\n:host([anchor][aria-disabled=true]) h3:hover,\n:host([anchor][aria-disabled=true]) h4:hover,\n:host([anchor][aria-disabled=true]) h5:hover {\n  cursor: auto;\n  text-decoration: initial;\n}\n\n:host a {\n  text-decoration: none;\n}\n:host h1, :host h2, :host h3, :host h4, :host h5 {\n  margin: 0;\n  padding: 0;\n}\n:host h1 {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-condensed-10-font);\n  color: var(--scw-color-grey-02);\n}\n:host h2 {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-08-font);\n  color: var(--scw-color-grey-02);\n}\n:host h3 {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-condensed-07-font);\n  color: var(--scw-color-grey-02);\n}\n:host h4 {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-06-font);\n  color: var(--scw-color-grey-02);\n}\n:host h5 {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-condensed-font);\n  color: var(--scw-color-grey-02);\n}`;\n", "import {html} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport styles from './scss/scw-heading.scss';\nimport {ScwHeadingColors, ScwHeadingSizes} from './scw-heading-enums';\nimport validate from './scw-heading-validate';\nimport {Components} from '../utils/enums/Components';\nimport ScwLinkBase from '../scw-link-base/scw-link-base';\nimport parseLightDomHeading from './parseLightDomHeading';\n\n/**\n * ScwHeading\n * @class\n * @tag scw-heading\n *\n * @slot [default=\"<h1, h2, h3, h4, h5 />\"]\n    heading html (for SEO) will determine the size and label.\n * @slot [default=\"<a href target><h1, h2, h3, h4, h5 /></a>\"]\n    (OPTIONAL) anchor (for SEO) will determine the label, href, and target in\n    addition to size and label.\n */\nexport default class ScwHeading extends ScwLinkBase {\n  /**\n  * styles\n  */\n   static get styles() {\n    return [\n      super.styles,\n      styles,\n    ];\n  }\n\n  // ============== ScwHeading =================================================\n  /**\n  * (ScwHeader) Size of heading (h1, h2, h3, h4, h5)\n  * @type {string}\n  */\n  @property({type: String, reflect: true})\n    size: ScwHeadingSizes = ScwHeadingSizes.H1;\n\n  /**\n  * (ScwHeader) Color of heading ( default, primary, mortgage )\n  * @type {string}\n  */\n  @property({type: String, reflect: true})\n    color: ScwHeadingColors = ScwHeadingColors.default;\n\n  /**\n  * Constructor\n  */\n  constructor() {\n    super();\n    this.element = Components.heading;\n  }\n\n  /** parseAndValidateLightDom, just adding local parsing and validation */\n  parseAndValidateLightDom() {\n    super.parseAndValidateLightDom();\n    parseLightDomHeading(this);\n    validate( this );\n  }\n\n  /**\n  * renderHeading\n  * @return {object} component DOM\n  */\n  renderHeading(): object {\n    switch ( this.size ) {\n    case ScwHeadingSizes.H5:\n      return html`<h5>${this.ariaLabel}</h5>`;\n    case ScwHeadingSizes.H4:\n      return html`<h4>${this.ariaLabel}</h4>`;\n    case ScwHeadingSizes.H3:\n      return html`<h3>${this.ariaLabel}</h3>`;\n    case ScwHeadingSizes.H2:\n      return html`<h2>${this.ariaLabel}</h2>`;\n    case ScwHeadingSizes.H1:\n    default:\n      return html`<h1>${this.ariaLabel}</h1>`;\n    }\n  }\n\n  /**\n  * render\n  * @return {object} component DOM\n  */\n  render(): object {\n    return this.renderHeading();\n  }\n}\n"],
+  "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([color=primary]) h1, :host([color=primary]) h2, :host([color=primary]) h3, :host([color=primary]) h4, :host([color=primary]) h5 {\n  color: var(--scw-color-theme-04, var(--scw-color-primary-04));\n}\n\n:host([color=primary]:hover) h1, :host([color=primary]:hover) h2, :host([color=primary]:hover) h3, :host([color=primary]:hover) h4, :host([color=primary]:hover) h5 {\n  color: var(--scw-color-theme-04, var(--scw-color-primary-04));\n}\n\n:host([color=primary]) a:focus-visible h1, :host([color=primary]) a:focus-visible h2, :host([color=primary]) a:focus-visible h3, :host([color=primary]) a:focus-visible h4, :host([color=primary]) a:focus-visible h5 {\n  color: var(--scw-color-theme-04, var(--scw-color-primary-04));\n}\n\n:host([color=primary][aria-disabled=true]) h1, :host([color=primary][aria-disabled=true]) h2, :host([color=primary][aria-disabled=true]) h3, :host([color=primary][aria-disabled=true]) h4, :host([color=primary][aria-disabled=true]) h5 {\n  color: var(--scw-color-theme-09, var(--scw-color-primary-09));\n}\n\n:host([color=mortgage]) h1, :host([color=mortgage]) h2, :host([color=mortgage]) h3, :host([color=mortgage]) h4, :host([color=mortgage]) h5 {\n  color: var(--scw-color-theme-04, var(--scw-color-accent-mortgage-04));\n}\n\n:host([color=mortgage]:hover) h1, :host([color=mortgage]:hover) h2, :host([color=mortgage]:hover) h3, :host([color=mortgage]:hover) h4, :host([color=mortgage]:hover) h5 {\n  color: var(--scw-color-theme-04, var(--scw-color-accent-mortgage-04));\n}\n\n:host([color=mortgage]) a:focus-visible h1, :host([color=mortgage]) a:focus-visible h2, :host([color=mortgage]) a:focus-visible h3, :host([color=mortgage]) a:focus-visible h4, :host([color=mortgage]) a:focus-visible h5 {\n  color: var(--scw-color-theme-04, var(--scw-color-accent-mortgage-04));\n}\n\n:host([color=mortgage][aria-disabled=true]) h1, :host([color=mortgage][aria-disabled=true]) h2, :host([color=mortgage][aria-disabled=true]) h3, :host([color=mortgage][aria-disabled=true]) h4, :host([color=mortgage][aria-disabled=true]) h5 {\n  color: var(--scw-color-theme-09, var(--scw-color-accent-mortgage-09));\n}\n\n:host([color=savings]) h1, :host([color=savings]) h2, :host([color=savings]) h3, :host([color=savings]) h4, :host([color=savings]) h5 {\n  color: var(--scw-color-theme-04, var(--scw-color-accent-savings-04));\n}\n\n:host([color=savings]:hover) h1, :host([color=savings]:hover) h2, :host([color=savings]:hover) h3, :host([color=savings]:hover) h4, :host([color=savings]:hover) h5 {\n  color: var(--scw-color-theme-04, var(--scw-color-accent-savings-04));\n}\n\n:host([color=savings]) a:focus-visible h1, :host([color=savings]) a:focus-visible h2, :host([color=savings]) a:focus-visible h3, :host([color=savings]) a:focus-visible h4, :host([color=savings]) a:focus-visible h5 {\n  color: var(--scw-color-theme-04, var(--scw-color-accent-savings-04));\n}\n\n:host([color=savings][aria-disabled=true]) h1, :host([color=savings][aria-disabled=true]) h2, :host([color=savings][aria-disabled=true]) h3, :host([color=savings][aria-disabled=true]) h4, :host([color=savings][aria-disabled=true]) h5 {\n  color: var(--scw-color-theme-09, var(--scw-color-accent-savings-09));\n}\n\n:host([color=student]) h1, :host([color=student]) h2, :host([color=student]) h3, :host([color=student]) h4, :host([color=student]) h5 {\n  color: var(--scw-color-theme-04, var(--scw-color-accent-student-04));\n}\n\n:host([color=student]:hover) h1, :host([color=student]:hover) h2, :host([color=student]:hover) h3, :host([color=student]:hover) h4, :host([color=student]:hover) h5 {\n  color: var(--scw-color-theme-04, var(--scw-color-accent-student-04));\n}\n\n:host([color=student]) a:focus-visible h1, :host([color=student]) a:focus-visible h2, :host([color=student]) a:focus-visible h3, :host([color=student]) a:focus-visible h4, :host([color=student]) a:focus-visible h5 {\n  color: var(--scw-color-theme-04, var(--scw-color-accent-student-04));\n}\n\n:host([color=student][aria-disabled=true]) h1, :host([color=student][aria-disabled=true]) h2, :host([color=student][aria-disabled=true]) h3, :host([color=student][aria-disabled=true]) h4, :host([color=student][aria-disabled=true]) h5 {\n  color: var(--scw-color-theme-09, var(--scw-color-accent-student-09));\n}\n\n:host([color=investments]) h1, :host([color=investments]) h2, :host([color=investments]) h3, :host([color=investments]) h4, :host([color=investments]) h5 {\n  color: var(--scw-color-theme-04, var(--scw-color-accent-investments-04));\n}\n\n:host([color=investments]:hover) h1, :host([color=investments]:hover) h2, :host([color=investments]:hover) h3, :host([color=investments]:hover) h4, :host([color=investments]:hover) h5 {\n  color: var(--scw-color-theme-04, var(--scw-color-accent-investments-04));\n}\n\n:host([color=investments]) a:focus-visible h1, :host([color=investments]) a:focus-visible h2, :host([color=investments]) a:focus-visible h3, :host([color=investments]) a:focus-visible h4, :host([color=investments]) a:focus-visible h5 {\n  color: var(--scw-color-theme-04, var(--scw-color-accent-investments-04));\n}\n\n:host([color=investments][aria-disabled=true]) h1, :host([color=investments][aria-disabled=true]) h2, :host([color=investments][aria-disabled=true]) h3, :host([color=investments][aria-disabled=true]) h4, :host([color=investments][aria-disabled=true]) h5 {\n  color: var(--scw-color-theme-09, var(--scw-color-accent-investments-09));\n}\n\n:host {\n  display: block;\n}\n\n:host(:focus-visible) {\n  outline: none;\n  box-shadow: var(--scw-effect-focus-shadow);\n  border-radius: 4px 4px 4px 4px;\n}\n\n:host([link]) h1:hover, :host([link]) h2:hover, :host([link]) h3:hover, :host([link]) h4:hover, :host([link]) h5:hover,\n:host([anchor]) h1:hover,\n:host([anchor]) h2:hover,\n:host([anchor]) h3:hover,\n:host([anchor]) h4:hover,\n:host([anchor]) h5:hover {\n  cursor: pointer;\n  text-decoration: underline;\n}\n\n:host([link][aria-disabled=true]) h1, :host([link][aria-disabled=true]) h2, :host([link][aria-disabled=true]) h3, :host([link][aria-disabled=true]) h4, :host([link][aria-disabled=true]) h5,\n:host([anchor][aria-disabled=true]) h1,\n:host([anchor][aria-disabled=true]) h2,\n:host([anchor][aria-disabled=true]) h3,\n:host([anchor][aria-disabled=true]) h4,\n:host([anchor][aria-disabled=true]) h5 {\n  color: var(--scw-color-grey-06);\n}\n:host([link][aria-disabled=true]) h1:hover, :host([link][aria-disabled=true]) h2:hover, :host([link][aria-disabled=true]) h3:hover, :host([link][aria-disabled=true]) h4:hover, :host([link][aria-disabled=true]) h5:hover,\n:host([anchor][aria-disabled=true]) h1:hover,\n:host([anchor][aria-disabled=true]) h2:hover,\n:host([anchor][aria-disabled=true]) h3:hover,\n:host([anchor][aria-disabled=true]) h4:hover,\n:host([anchor][aria-disabled=true]) h5:hover {\n  cursor: auto;\n  text-decoration: initial;\n}\n\n:host a {\n  text-decoration: none;\n}\n:host h1, :host h2, :host h3, :host h4, :host h5 {\n  margin: 0;\n  padding: 0;\n}\n:host h1 {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-condensed-10-font);\n  color: var(--scw-color-grey-02);\n}\n:host h2 {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-condensed-09-font);\n  color: var(--scw-color-grey-02);\n}\n:host h3 {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-condensed-08-font);\n  color: var(--scw-color-grey-02);\n}\n:host h4 {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-condensed-07-font);\n  color: var(--scw-color-grey-02);\n}\n:host h5 {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-condensed-06-font);\n  color: var(--scw-color-grey-02);\n}`;\n", "import {html} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport styles from './scss/scw-heading.scss';\nimport {ScwHeadingColors, ScwHeadingSizes} from './scw-heading-enums';\nimport validate from './scw-heading-validate';\nimport {Components} from '../utils/enums/Components';\nimport ScwLinkBase from '../scw-link-base/scw-link-base';\nimport parseLightDomHeading from './parseLightDomHeading';\n\n/**\n * ScwHeading\n * @class\n * @tag scw-heading\n *\n * @slot [default=\"<h1, h2, h3, h4, h5 />\"]\n    heading html (for SEO) will determine the size and label.\n * @slot [default=\"<a href target><h1, h2, h3, h4, h5 /></a>\"]\n    (OPTIONAL) anchor (for SEO) will determine the label, href, and target in\n    addition to size and label.\n */\nexport default class ScwHeading extends ScwLinkBase {\n  /**\n  * styles\n  */\n   static get styles() {\n    return [\n      super.styles,\n      styles,\n    ];\n  }\n\n  // ============== ScwHeading =================================================\n  /**\n  * (ScwHeader) Size of heading (h1, h2, h3, h4, h5)\n  * @type {string}\n  */\n  @property({type: String, reflect: true})\n    size: ScwHeadingSizes = ScwHeadingSizes.H1;\n\n  /**\n  * (ScwHeader) Color of heading ( default, primary, mortgage )\n  * @type {string}\n  */\n  @property({type: String, reflect: true})\n    color: ScwHeadingColors = ScwHeadingColors.default;\n\n  /**\n  * Constructor\n  */\n  constructor() {\n    super();\n    this.element = Components.heading;\n  }\n\n  /** parseAndValidateLightDom, just adding local parsing and validation */\n  parseAndValidateLightDom() {\n    super.parseAndValidateLightDom();\n    parseLightDomHeading(this);\n    validate( this );\n  }\n\n  /**\n  * renderHeading\n  * @return {object} component DOM\n  */\n  renderHeading(): object {\n    switch ( this.size ) {\n    case ScwHeadingSizes.H5:\n      return html`<h5>${this.ariaLabel}</h5>`;\n    case ScwHeadingSizes.H4:\n      return html`<h4>${this.ariaLabel}</h4>`;\n    case ScwHeadingSizes.H3:\n      return html`<h3>${this.ariaLabel}</h3>`;\n    case ScwHeadingSizes.H2:\n      return html`<h2>${this.ariaLabel}</h2>`;\n    case ScwHeadingSizes.H1:\n    default:\n      return html`<h1>${this.ariaLabel}</h1>`;\n    }\n  }\n\n  /**\n  * render\n  * @return {object} component DOM\n  */\n  render(): object {\n    return this.renderHeading();\n  }\n}\n"],
   "mappings": "yqBACA,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;GCmBf,mBAAwC,EAAY,CA6BlD,aAAc,CACZ,QAbA,UAAwB,EAAgB,GAOxC,WAA0B,EAAiB,QAO3C,KAAK,QAAU,EAAW,kBA3BhB,SAAS,CACnB,MAAO,CACL,MAAM,OACN,GA4BJ,0BAA2B,CACzB,MAAM,2BACN,EAAqB,MACrB,EAAU,MAOZ,eAAwB,CACtB,OAAS,KAAK,UACT,GAAgB,GACnB,MAAO,SAAW,KAAK,qBACpB,GAAgB,GACnB,MAAO,SAAW,KAAK,qBACpB,GAAgB,GACnB,MAAO,SAAW,KAAK,qBACpB,GAAgB,GACnB,MAAO,SAAW,KAAK,qBACpB,GAAgB,WAEnB,MAAO,SAAW,KAAK,kBAQ3B,QAAiB,CACf,MAAO,MAAK,kBAjDZ,GADD,EAAS,CAAC,KAAM,OAAQ,QAAS,MAChC,AAjBJ,EAiBI,oBAOA,GADD,EAAS,CAAC,KAAM,OAAQ,QAAS,MAChC,AAxBJ,EAwBI",
   "names": []
 }