scu-web-components 0.0.21 → 0.0.22

package/dist/chunks/chunk.RBSBLP6E.js

@@ -0,0 +1,256 @@
+import{b as d}from"./chunk.PXQQTQKT.js";import{a as n}from"./chunk.K3V3AEZG.js";import{a as g}from"./chunk.27N4OQ6C.js";import{d as l}from"./chunk.S4MESEBR.js";import{a as i,b as r,c as a}from"./chunk.HCMPRDIX.js";import{a as t}from"./chunk.ZS4C3T6Z.js";import{g as o}from"./chunk.5YJY6NT6.js";var p=i`
+:host .label {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}`;var w=i`
+:host([design=text]) .scw-link-base {
+  outline: none;
+  display: inline;
+}
+:host([design=text]) .scw-link-base .label {
+  text-align: LEFT;
+  font: var(--scw-type-text-font);
+  color: var(--scw-color-03, var(--scw-color-primary-03));
+  text-decoration: underline;
+}
+
+:host([design=text]:hover) a.scw-link-base .label,
+:host([design=text][hover]) a.scw-link-base .label {
+  text-align: LEFT;
+  font: var(--scw-type-text-font);
+  color: var(--scw-color-01, var(--scw-color-primary-01));
+}
+
+:host([design=text][aria-disabled=true]) .scw-link-base .label {
+  text-align: LEFT;
+  font: var(--scw-type-text-font);
+  color: var(--scw-color-grey-07);
+}`;var h=i`
+:host([design=solid]) .scw-link-base {
+  outline: none;
+  user-select: none;
+  background-color: var(--scw-color-03, var(--scw-color-primary-03));
+  border-radius: 10px 10px 10px 10px;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  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);
+  display: inline-flex;
+}
+:host([design=solid]) .scw-link-base > *:not(:last-child) {
+  margin-right: calc(var(--scw-spacing-1) * 0.4);
+  --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );
+}
+:host([design=solid]) .scw-link-base .label {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-06-font);
+  color: var(--scw-color-grey-10);
+  min-height: 22px;
+}
+:host([design=solid]) .scw-link-base .icon {
+  width: 24px;
+  height: 24px;
+}
+:host([design=solid]) .scw-link-base .icon svg {
+  box-sizing: border-box;
+  vertical-align: top;
+  width: 100%;
+  height: 100%;
+  fill: var(--scw-color-grey-10);
+}
+:host([design=solid]) .scw-link-base .icon svg * {
+  fill: var(--scw-color-grey-10);
+}
+
+:host([design=solid][icon][icon-side=left]) .scw-link-base {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: calc(var(--scw-spacing-1) * 1.2);
+  padding-right: calc(var(--scw-spacing-1) * 1.6);
+  padding-top: calc(var(--scw-spacing-1) * 0.4);
+  padding-bottom: calc(var(--scw-spacing-1) * 0.4);
+  display: inline-flex;
+}
+:host([design=solid][icon][icon-side=left]) .scw-link-base > *:not(:last-child) {
+  margin-right: calc(var(--scw-spacing-1) * 0.4);
+  --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );
+}
+
+:host([design=solid][icon][icon-side=right]) .scw-link-base {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: calc(var(--scw-spacing-1) * 1.6);
+  padding-right: calc(var(--scw-spacing-1) * 1.2);
+  padding-top: calc(var(--scw-spacing-1) * 0.4);
+  padding-bottom: calc(var(--scw-spacing-1) * 0.4);
+  display: inline-flex;
+}
+:host([design=solid][icon][icon-side=right]) .scw-link-base > *:not(:last-child) {
+  margin-right: calc(var(--scw-spacing-1) * 0.4);
+  --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );
+}
+
+:host([design=solid]:hover) a.scw-link-base,
+:host([design=solid][hover]) a.scw-link-base {
+  background-color: var(--scw-color-01, var(--scw-color-primary-01));
+  border-radius: 10px 10px 10px 10px;
+}
+:host([design=solid]:hover) a.scw-link-base .label,
+:host([design=solid][hover]) a.scw-link-base .label {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-06-font);
+  color: var(--scw-color-grey-10);
+}
+
+:host([design=solid][aria-disabled=true]) .scw-link-base {
+  background-color: var(--scw-color-grey-095);
+  border-radius: 10px 10px 10px 10px;
+}
+:host([design=solid][aria-disabled=true]) .scw-link-base .label {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-06-font);
+  color: var(--scw-color-grey-07);
+}
+:host([design=solid][aria-disabled=true]) .scw-link-base .icon svg {
+  fill: var(--scw-color-grey-07);
+}
+:host([design=solid][aria-disabled=true]) .scw-link-base .icon svg * {
+  fill: var(--scw-color-grey-07);
+}`;var f=i`
+:host([design=outlined]) .scw-link-base {
+  outline: none;
+  user-select: none;
+  background-color: var(--scw-color-grey-10);
+  border-radius: 10px 10px 10px 10px;
+  border-width: 2px;
+  border-style: solid;
+  border-color: var(--scw-color-04, var(--scw-color-primary-04));
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  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.3);
+  padding-bottom: calc(var(--scw-spacing-1) * 0.3);
+  display: inline-flex;
+}
+:host([design=outlined]) .scw-link-base > *:not(:last-child) {
+  margin-right: calc(var(--scw-spacing-1) * 0.4);
+  --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );
+}
+:host([design=outlined]) .scw-link-base .label {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-06-font);
+  color: var(--scw-color-03, var(--scw-color-primary-03));
+  min-height: 22px;
+}
+:host([design=outlined]) .scw-link-base .icon {
+  width: 24px;
+  height: 24px;
+}
+:host([design=outlined]) .scw-link-base .icon svg {
+  box-sizing: border-box;
+  vertical-align: top;
+  width: 100%;
+  height: 100%;
+  fill: var(--scw-color-primary-03);
+}
+:host([design=outlined]) .scw-link-base .icon svg * {
+  fill: var(--scw-color-primary-03);
+}
+
+:host([design=outlined][icon][icon-side=left]) .scw-link-base {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: calc(var(--scw-spacing-1) * 1.2);
+  padding-right: calc(var(--scw-spacing-1) * 1.6);
+  padding-top: calc(var(--scw-spacing-1) * 0.2);
+  padding-bottom: calc(var(--scw-spacing-1) * 0.2);
+  display: inline-flex;
+}
+:host([design=outlined][icon][icon-side=left]) .scw-link-base > *:not(:last-child) {
+  margin-right: calc(var(--scw-spacing-1) * 0.4);
+  --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );
+}
+
+:host([design=outlined][icon][icon-side=right]) .scw-link-base {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: calc(var(--scw-spacing-1) * 1.6);
+  padding-right: calc(var(--scw-spacing-1) * 1.2);
+  padding-top: calc(var(--scw-spacing-1) * 0.2);
+  padding-bottom: calc(var(--scw-spacing-1) * 0.2);
+  display: inline-flex;
+}
+:host([design=outlined][icon][icon-side=right]) .scw-link-base > *:not(:last-child) {
+  margin-right: calc(var(--scw-spacing-1) * 0.4);
+  --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );
+}
+
+:host([design=outlined]:hover) a.scw-link-base,
+:host([design=outlined][hover]) a.scw-link-base {
+  background-color: var(--scw-color-grey-10);
+  border-radius: 10px 10px 10px 10px;
+  border-width: 2px;
+  border-style: solid;
+  border-color: var(--scw-color-01, var(--scw-color-primary-01));
+}
+:host([design=outlined]:hover) a.scw-link-base .label,
+:host([design=outlined][hover]) a.scw-link-base .label {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-06-font);
+  color: var(--scw-color-01, var(--scw-color-primary-01));
+}
+
+:host([design=outlined][aria-disabled=true]) .scw-link-base {
+  background-color: var(--scw-color-grey-10);
+  border-radius: 10px 10px 10px 10px;
+  border-width: 2px;
+  border-style: solid;
+  border-color: var(--scw-color-grey-09);
+}
+:host([design=outlined][aria-disabled=true]) .scw-link-base .label {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-06-font);
+  color: var(--scw-color-grey-07);
+}
+:host([design=outlined][aria-disabled=true]) .scw-link-base .icon svg {
+  fill: var(--scw-color-grey-07);
+}
+:host([design=outlined][aria-disabled=true]) .scw-link-base .icon svg * {
+  fill: var(--scw-color-grey-07);
+}`;var b=i`
+:host([design=plain]) .scw-link-base {
+  outline: none;
+  display: inline-block;
+}`;var s=class extends l{constructor(){super();this.iconSide="left";this.design="solid";this._svgInfo="";this.element="link"}static get styles(){return[super.styles,p]}parseAndValidateLightDom(){super.parseAndValidateLightDom(),g(this.icon,e=>{e===!1?this.warn(`scw-icon could not find ${this.icon}`):this._svgInfo=e})}validDesigns(){return d}doShowIcon(){return!!(this.icon&&this.design!=="plain"&&this.design!=="text")}renderContent(){let e=this.doShowIcon(),c=`<style>${this.findStyle().cssText}</style>`;return this.design==="plain"?t`
+        ${n(c)}
+        <slot></slot>
+      `:t`
+      ${e&&this.iconSide==="left"?t`
+        <div class="icon">
+          ${n(this._svgInfo)}
+        </div>`:""}
+        ${n(c)}
+        <div class="label">
+          ${this.ariaLabel}
+        </div>
+      ${e&&this.iconSide==="right"?t`
+        <div class="icon">
+          ${n(this._svgInfo)}
+        </div>`:""}`}findStyle(){switch(this.design){case"solid":return h;case"outlined":return f;case"text":return w;case"plain":default:return b}}render(){return this.renderLink(this.renderContent())}};o([r({type:String,reflect:!0})],s.prototype,"icon",2),o([r({type:String,reflect:!0,attribute:"icon-side"})],s.prototype,"iconSide",2),o([r({type:String,reflect:!0})],s.prototype,"design",2),o([a()],s.prototype,"_svgInfo",2);export{s as a};
+//# sourceMappingURL=chunk.RBSBLP6E.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sass-plugin-0:/Users/scottrouse/Workspace/scu-design-system-mono/scu-web-components/src/scw-link/scss/scw-link.scss", "sass-plugin-0:/Users/scottrouse/Workspace/scu-design-system-mono/scu-web-components/src/scw-link/scss/scw-link-text.scss", "sass-plugin-0:/Users/scottrouse/Workspace/scu-design-system-mono/scu-web-components/src/scw-link/scss/scw-link-solid.scss", "sass-plugin-0:/Users/scottrouse/Workspace/scu-design-system-mono/scu-web-components/src/scw-link/scss/scw-link-outlined.scss", "sass-plugin-0:/Users/scottrouse/Workspace/scu-design-system-mono/scu-web-components/src/scw-link/scss/scw-link-plain.scss", "../../src/scw-link/ScwLink.ts"],
+  "sourcesContent": ["import {css} from \"lit-element/lit-element.js\";\nexport default css`\n:host .label {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n}`;\n", "import {css} from \"lit-element/lit-element.js\";\nexport default css`\n:host([design=text]) .scw-link-base {\n  outline: none;\n  display: inline;\n}\n:host([design=text]) .scw-link-base .label {\n  text-align: LEFT;\n  font: var(--scw-type-text-font);\n  color: var(--scw-color-03, var(--scw-color-primary-03));\n  text-decoration: underline;\n}\n\n:host([design=text]:hover) a.scw-link-base .label,\n:host([design=text][hover]) a.scw-link-base .label {\n  text-align: LEFT;\n  font: var(--scw-type-text-font);\n  color: var(--scw-color-01, var(--scw-color-primary-01));\n}\n\n:host([design=text][aria-disabled=true]) .scw-link-base .label {\n  text-align: LEFT;\n  font: var(--scw-type-text-font);\n  color: var(--scw-color-grey-07);\n}`;\n", "import {css} from \"lit-element/lit-element.js\";\nexport default css`\n:host([design=solid]) .scw-link-base {\n  outline: none;\n  user-select: none;\n  background-color: var(--scw-color-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]) .scw-link-base > *: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]) .scw-link-base .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]) .scw-link-base .icon {\n  width: 24px;\n  height: 24px;\n}\n:host([design=solid]) .scw-link-base .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]) .scw-link-base .icon svg * {\n  fill: var(--scw-color-grey-10);\n}\n\n:host([design=solid][icon][icon-side=left]) .scw-link-base {\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]) .scw-link-base > *: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]) .scw-link-base {\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]) .scw-link-base > *: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]:hover) a.scw-link-base,\n:host([design=solid][hover]) a.scw-link-base {\n  background-color: var(--scw-color-01, var(--scw-color-primary-01));\n  border-radius: 10px 10px 10px 10px;\n}\n:host([design=solid]:hover) a.scw-link-base .label,\n:host([design=solid][hover]) a.scw-link-base .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]) .scw-link-base {\n  background-color: var(--scw-color-grey-095);\n  border-radius: 10px 10px 10px 10px;\n}\n:host([design=solid][aria-disabled=true]) .scw-link-base .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]) .scw-link-base .icon svg {\n  fill: var(--scw-color-grey-07);\n}\n:host([design=solid][aria-disabled=true]) .scw-link-base .icon svg * {\n  fill: var(--scw-color-grey-07);\n}`;\n", "import {css} from \"lit-element/lit-element.js\";\nexport default css`\n:host([design=outlined]) .scw-link-base {\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-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.3);\n  padding-bottom: calc(var(--scw-spacing-1) * 0.3);\n  display: inline-flex;\n}\n:host([design=outlined]) .scw-link-base > *: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]) .scw-link-base .label {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-06-font);\n  color: var(--scw-color-03, var(--scw-color-primary-03));\n  min-height: 22px;\n}\n:host([design=outlined]) .scw-link-base .icon {\n  width: 24px;\n  height: 24px;\n}\n:host([design=outlined]) .scw-link-base .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]) .scw-link-base .icon svg * {\n  fill: var(--scw-color-primary-03);\n}\n\n:host([design=outlined][icon][icon-side=left]) .scw-link-base {\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.2);\n  padding-bottom: calc(var(--scw-spacing-1) * 0.2);\n  display: inline-flex;\n}\n:host([design=outlined][icon][icon-side=left]) .scw-link-base > *: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]) .scw-link-base {\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.2);\n  padding-bottom: calc(var(--scw-spacing-1) * 0.2);\n  display: inline-flex;\n}\n:host([design=outlined][icon][icon-side=right]) .scw-link-base > *: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]:hover) a.scw-link-base,\n:host([design=outlined][hover]) a.scw-link-base {\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-01, var(--scw-color-primary-01));\n}\n:host([design=outlined]:hover) a.scw-link-base .label,\n:host([design=outlined][hover]) a.scw-link-base .label {\n  text-align: LEFT;\n  font: var(--scw-type-text-bold-06-font);\n  color: var(--scw-color-01, var(--scw-color-primary-01));\n}\n\n:host([design=outlined][aria-disabled=true]) .scw-link-base {\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-grey-09);\n}\n:host([design=outlined][aria-disabled=true]) .scw-link-base .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]) .scw-link-base .icon svg {\n  fill: var(--scw-color-grey-07);\n}\n:host([design=outlined][aria-disabled=true]) .scw-link-base .icon svg * {\n  fill: var(--scw-color-grey-07);\n}`;\n", "import {css} from \"lit-element/lit-element.js\";\nexport default css`\n:host([design=plain]) .scw-link-base {\n  outline: none;\n  display: inline-block;\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 stylesText from './scss/scw-link-text.scss';\nimport stylesSolid from './scss/scw-link-solid.scss';\nimport stylesOutline from './scss/scw-link-outlined.scss';\nimport stylesPlain from './scss/scw-link-plain.scss';\nimport {\n  ScwLinkSide,\n  ScwLinkDesigns,\n} from './scw-link-enums';\nimport getIconSvg from '../utils/getIconSvg';\nimport {Components} from '../utils/enums/Components';\nimport {ScwMenuItemDesigns} from '../scw-menu-item/scw-menu-item-enums';\nimport ScwLinkBase from '../scw-link-base/ScwLinkBase';\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  @state() _svgInfo : string = '';\n\n  /**\n  * Constructor\n  */\n  constructor() {\n    super();\n    this.element = Components.link;\n  }\n\n  /** parseAndValidateLightDom, just adding local parsing and validation */\n  parseAndValidateLightDom() {\n    super.parseAndValidateLightDom();\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  * renderContent\n  * @return {object} component DOM\n  */\n  renderContent(): object {\n    const doShowIcon = this.doShowIcon();\n    // ssr is fighting injecting css this way...\n    const localCss = `<style>${this.findStyle().cssText}</style>`;\n\n    if (this.design === ScwLinkDesigns.plain) {\n      return html`\n        ${unsafeHTML(localCss)}\n        <slot></slot>\n      `;\n    }\n\n    return html`\n      ${doShowIcon && this.iconSide === ScwLinkSide.left ?\n      html`\n        <div class=\"icon\">\n          ${unsafeHTML(this._svgInfo)}\n        </div>` : ''}\n        ${unsafeHTML(localCss)}\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  /**\n   * find the style per design\n   * @return {object}\n   */\n  findStyle() {\n    switch (this.design) {\n      case ScwLinkDesigns.solid:\n        return stylesSolid;\n      case ScwLinkDesigns.outlined:\n        return stylesOutline;\n      case ScwLinkDesigns.text:\n        return stylesText;\n      case ScwLinkDesigns.plain:\n      default:\n        return stylesPlain;\n    }\n  }\n\n  /**\n  * render\n  * @return {object} component DOM\n  */\n   render(): object {\n    return this.renderLink(\n      this.renderContent(),\n    );\n  }\n}\n"],
+  "mappings": "sSACA,GAAO,GAAQ;AAAA;AAAA;AAAA;AAAA;GCAf,GAAO,GAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;GCAf,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;GCAf,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;GCAf,GAAO,GAAQ;AAAA;AAAA;AAAA;GC2Bf,mBAAqC,EAAY,CAsC/C,aAAc,CACZ,MAAM,EAfN,cAAwB,OAOxB,YAA8C,QAEvC,cAAoB,GAO3B,KAAK,QAAU,MACjB,WArCW,SAAS,CAClB,MAAO,CACL,MAAM,OACN,CACF,CACF,CAmCA,0BAA2B,CACzB,MAAM,yBAAyB,EAC/B,EAAW,KAAK,KAAM,AAAC,GAA6B,CAClD,AAAI,IAAY,GACd,KAAK,KAAK,2BAA2B,KAAK,MAAM,EAEhD,KAAK,SAAW,CAEpB,CAAC,CACH,CAMA,cAAwB,CACtB,MAAO,EACT,CAMA,YAAuB,CACrB,MAAK,QAAK,MACR,KAAK,SAAW,SAChB,KAAK,SAAW,OAIpB,CAMA,eAAwB,CACtB,GAAM,GAAa,KAAK,WAAW,EAE7B,EAAW,UAAU,KAAK,UAAU,EAAE,kBAE5C,MAAI,MAAK,SAAW,QACX;AAAA,UACH,EAAW,CAAQ;AAAA;AAAA,QAKlB;AAAA,QACH,GAAc,KAAK,WAAa,OAClC;AAAA;AAAA,YAEM,EAAW,KAAK,QAAQ;AAAA,gBAClB;AAAA,UACR,EAAW,CAAQ;AAAA;AAAA,YAEjB,KAAK;AAAA;AAAA,QAET,GAAc,KAAK,WAAa,QAClC;AAAA;AAAA,YAEM,EAAW,KAAK,QAAQ;AAAA,gBAClB,IAChB,CAMA,WAAY,CACV,OAAQ,KAAK,YACN,QACH,MAAO,OACJ,WACH,MAAO,OACJ,OACH,MAAO,OACJ,gBAEH,MAAO,GAEb,CAMC,QAAiB,CAChB,MAAO,MAAK,WACV,KAAK,cAAc,CACrB,CACF,CACF,EAvHI,GADF,AAAC,EAAS,CAAC,KAAM,OAAQ,QAAS,EAAI,CAAC,GACrC,AAjBJ,EAiBI,oBAOA,GADF,AAAC,EAAS,CAAC,KAAM,OAAQ,QAAS,GAAM,UAAW,WAAW,CAAC,GAC7D,AAxBJ,EAwBI,wBAOA,GADF,AAAC,EAAS,CAAC,KAAM,OAAQ,QAAS,EAAI,CAAC,GACrC,AA/BJ,EA+BI,sBAEO,GAAT,AAAC,EAAM,GAAE,AAjCX,EAiCW",
+  "names": []
+}

package/dist/chunks/chunk.RXMGI7HR.js

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utils/suffix.ts"],
+  "sourcesContent": ["import {config} from '../scw';\n\n/**\n * Pulls suffix from global design system config with some formatting options\n * @param {string} connector\n * @return {string}\n */\nexport default function getSuffix(connector: string = '-') {\n  return config ? config.suffix ? `${connector}${config.suffix}` : '' : '';\n}\n\n"],
+  "mappings": "wCAOe,WAAmB,EAAoB,IAAK,CACzD,MAAO,IAAS,EAAO,OAAS,GAAG,IAAY,EAAO,SAAgB,EACxE",
+  "names": []
+}

package/dist/chunks/chunk.S4MESEBR.js

@@ -0,0 +1,32 @@
+import{a as u}from"./chunk.QRG5WBRU.js";import{a as l,b as r,e as f}from"./chunk.HCMPRDIX.js";import{a,d as c}from"./chunk.ZS4C3T6Z.js";import{b,d as m,f as g,g as i}from"./chunk.5YJY6NT6.js";var p={};m(p,{validationWarnings:()=>v});var v,d=b(()=>{v={ariaLabelWarning:"link without a label",noIconWarning:"could not find the icon"}});var s=n=>n!=null?n:c;var h=l`
+.scw-link-base {
+  display: block;
+  text-decoration: none;
+}
+.scw-link-base:focus-visible {
+  outline: none;
+  box-shadow: var(--scw-effect-focus-shadow);
+  border-radius: 4px;
+}
+.scw-link-base:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}`;var{validationWarnings:k}=(d(),g(p)),t=class extends f{constructor(){super();this.ariaLabel="";this.ariaDisabled="false";this.element="link-base"}static get styles(){return[super.styles,h]}updated(){this.ariaDisabled==="true"?this.addEventListener("click",this.cancelEvent,{capture:!0}):this.removeEventListener("click",this.cancelEvent,{capture:!0})}cancelEvent(e){e.preventDefault(),e.stopImmediatePropagation()}parseAndValidateLightDom(){super.parseAndValidateLightDom(),u(this),this.isLink()&&this.ariaLabel.trim().length===0&&this.warn(k.ariaLabelWarning)}isLink(){return!!(this.href||this.getAttribute("onclick"))}renderLink(e,o){return this.isLink()&&this.ariaDisabled!=="true"?a`
+        <a
+          class="scw-link-base"
+          style="${s(o)}"
+          href="${this.href?this.href:"javascript:"}"
+          target="${this.target?this.target:"_self"}"
+          aria-label="${this.ariaLabel}">
+          ${e}
+        </a>`:a`
+        <div class="scw-link-base"
+          style="${s(o)}">
+          ${e}
+        </div>`}render(){return this.renderLink(a`${this._lastWarning?this._lastWarning:this.ariaLabel}`)}};i([r({type:String,reflect:!0,attribute:"aria-label"})],t.prototype,"ariaLabel",2),i([r({type:String,attribute:"aria-disabled"})],t.prototype,"ariaDisabled",2),i([r({type:String,reflect:!0})],t.prototype,"href",2),i([r({type:String,reflect:!0})],t.prototype,"target",2);export{s as a,p as b,d as c,t as d};
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+//# sourceMappingURL=chunk.S4MESEBR.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utils/validation/warnings.mjs", "../../../node_modules/lit-html/src/directives/if-defined.ts", "sass-plugin-0:/Users/scottrouse/Workspace/scu-design-system-mono/scu-web-components/src/scw-link-base/scss/scw-link-base.scss", "../../src/scw-link-base/ScwLinkBase.ts"],
+  "sourcesContent": ["\n\nexport const validationWarnings = {\n  ariaLabelWarning: 'link without a label',\n  noIconWarning: 'could not find the icon',\n};\n", "/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport {nothing} from '../lit-html.js';\n\n/**\n * For AttributeParts, sets the attribute if the value is defined and removes\n * the attribute if the value is undefined.\n *\n * For other part types, this directive is a no-op.\n */\nexport const ifDefined = <T>(value: T) => value ?? nothing;\n", "import {css} from \"lit-element/lit-element.js\";\nexport default css`\n.scw-link-base {\n  display: block;\n  text-decoration: none;\n}\n.scw-link-base:focus-visible {\n  outline: none;\n  box-shadow: var(--scw-effect-focus-shadow);\n  border-radius: 4px;\n}\n.scw-link-base:focus:not(:focus-visible) {\n  outline: none;\n  box-shadow: none;\n}`;\n", "import {html} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport ScwComponent from '../scw-component/ScwComponent';\nimport parseLightDomAnchor from './parseLightDomAnchor';\nimport {Components} from '../utils/enums/Components';\nimport styles from './scss/scw-link-base.scss';\nconst {validationWarnings} = require('../utils/validation/warnings.mjs');\n\n/**\n * ScwLinkBase\n * @class\n * @tag scw-link-base\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 ScwLinkBase extends ScwComponent {/**\n  * styles\n  */\n  static get styles() {\n    return [\n      super.styles,\n      styles,\n    ];\n  }\n\n  // ============== ScwLinkBase =======================================\n  /**\n  * (ScwLinkBase) Main text within component\n  * @type {string}\n  */\n  @property({type: String, reflect: true, attribute: 'aria-label'})\n    ariaLabel: string = '';\n\n  /**\n  * (ScwLinkBase) Makes the link unclickable and faded out.\n  * @type {string}\n  */\n  @property({type: String, attribute: 'aria-disabled'})\n    ariaDisabled: string = 'false';\n\n  /**\n  * (ScwLinkBase) link location - private\n  * ...should not be able to be set directly b/c scu-link should use this\n  */\n  @property({type: String, reflect: true})\n    href : string | undefined;\n\n  /**\n  * (ScwLinkBase) link target - private\n  * ...should not be able to be set directly b/c scu-link should use this\n  */\n  @property({type: String, reflect: true})\n    target : '_blank' | '_parent' | '_self' | '_top' | undefined;\n\n  /**\n  * Constructor\n  */\n  constructor() {\n    super();\n    this.element = Components.linkBase;\n  }\n\n  /**\n   * request update\n   */\n  updated() {\n    if (this.ariaDisabled === 'true') {\n      this.addEventListener('click', this.cancelEvent, {capture: true} );\n    } else {\n      this.removeEventListener('click', this.cancelEvent, {capture: true} );\n    }\n  }\n\n  /**\n   * cancel event\n   * @param {Event} evt\n   */\n  cancelEvent(evt: Event) {\n    evt.preventDefault();\n    evt.stopImmediatePropagation();\n  }\n\n  /**\n   * override with anchor info\n   */\n  parseAndValidateLightDom() {\n    super.parseAndValidateLightDom();\n    parseLightDomAnchor(this);\n    if (this.isLink() && this.ariaLabel.trim().length === 0) {\n      this.warn(validationWarnings.ariaLabelWarning);// 'link without a label');\n    }\n  }\n\n  /**\n   * Should this element be rendered as a link...\n   * @return {boolean}\n   */\n  isLink() {\n    if (this.href || this.getAttribute('onclick')) {\n      return true;\n    }\n    return false;\n  }\n\n  /**\n  * renderLink\n  * @param {object} children\n  * @param {string} styles\n  * @return {object} component DOM\n  */\n  renderLink(children: object, styles?: string): object {\n    if (this.isLink() && this.ariaDisabled !== 'true') {\n      return html`\n        <a\n          class=\"scw-link-base\"\n          style=\"${ifDefined(styles)}\"\n          href=\"${this.href ? this.href : 'javascript:'}\"\n          target=\"${this.target ? this.target : '_self'}\"\n          aria-label=\"${this.ariaLabel}\">\n          ${children}\n        </a>`;\n    } else {\n      // need a consistent container for styling\n      return html`\n        <div class=\"scw-link-base\"\n          style=\"${ifDefined(styles)}\">\n          ${children}\n        </div>`;\n    }\n  }\n\n  /**\n  * render\n  * @return {object} component DOM\n  */\n  render(): object {\n    return this.renderLink(\n      html`${this._lastWarning ? this._lastWarning : this.ariaLabel}`,\n    );\n  }\n}\n"],
+  "mappings": "gMAAA,4CAEa,GAFb,SAEO,AAAM,EAAqB,CAChC,iBAAkB,uBAClB,cAAe,yBACjB,OCSa,GAAgB,GAAa,AAAA,GAAA,KAAA,EAAS,ECbnD,GAAO,GAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;GCMf,GAAM,CAAC,sBAAsB,WAa7B,eAAyC,EAAa,CA0CpD,aAAc,CACZ,MAAM,EA3BN,eAAoB,GAOpB,kBAAuB,QAqBvB,KAAK,QAAU,WACjB,WA1CW,SAAS,CAClB,MAAO,CACL,MAAM,OACN,CACF,CACF,CA0CA,SAAU,CACR,AAAI,KAAK,eAAiB,OACxB,KAAK,iBAAiB,QAAS,KAAK,YAAa,CAAC,QAAS,EAAI,CAAE,EAEjE,KAAK,oBAAoB,QAAS,KAAK,YAAa,CAAC,QAAS,EAAI,CAAE,CAExE,CAMA,YAAY,EAAY,CACtB,EAAI,eAAe,EACnB,EAAI,yBAAyB,CAC/B,CAKA,0BAA2B,CACzB,MAAM,yBAAyB,EAC/B,EAAoB,IAAI,EACpB,KAAK,OAAO,GAAK,KAAK,UAAU,KAAK,EAAE,SAAW,GACpD,KAAK,KAAK,EAAmB,gBAAgB,CAEjD,CAMA,QAAS,CACP,MAAI,QAAK,MAAQ,KAAK,aAAa,SAAS,EAI9C,CAQA,WAAW,EAAkB,EAAyB,CACpD,MAAI,MAAK,OAAO,GAAK,KAAK,eAAiB,OAClC;AAAA;AAAA;AAAA,mBAGM,EAAU,CAAM;AAAA,kBACjB,KAAK,KAAO,KAAK,KAAO;AAAA,oBACtB,KAAK,OAAS,KAAK,OAAS;AAAA,wBACxB,KAAK;AAAA,YACjB;AAAA,cAIC;AAAA;AAAA,mBAEM,EAAU,CAAM;AAAA,YACvB;AAAA,eAGV,CAMA,QAAiB,CACf,MAAO,MAAK,WACV,IAAO,KAAK,aAAe,KAAK,aAAe,KAAK,WACtD,CACF,CACF,EA7GI,GADF,AAAC,EAAS,CAAC,KAAM,OAAQ,QAAS,GAAM,UAAW,YAAY,CAAC,GAC9D,AAhBJ,EAgBI,yBAOA,GADF,AAAC,EAAS,CAAC,KAAM,OAAQ,UAAW,eAAe,CAAC,GAClD,AAvBJ,EAuBI,4BAOA,GADF,AAAC,EAAS,CAAC,KAAM,OAAQ,QAAS,EAAI,CAAC,GACrC,AA9BJ,EA8BI,oBAOA,GADF,AAAC,EAAS,CAAC,KAAM,OAAQ,QAAS,EAAI,CAAC,GACrC,AArCJ,EAqCI",
+  "names": []
+}

package/dist/chunks/chunk.SIJSFRVB.js

@@ -0,0 +1,2 @@
+import{a as e}from"./chunk.O5A7YZKV.js";customElements.define("scw-alert",e);
+//# sourceMappingURL=chunk.SIJSFRVB.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/scw-alert/scw-alert.ts"],
+  "sourcesContent": ["import ScwAlert from './ScwAlert.js';\ncustomElements.define('scw-alert', ScwAlert );\n"],
+  "mappings": "wCACA,eAAe,OAAO,YAAa,CAAS",
+  "names": []
+}

package/dist/chunks/chunk.TXOGG2T7.js

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utils/suffix.ts"],
+  "sourcesContent": ["import {config} from '../scw';\n\n/**\n * Pulls suffix from global design system config with some formatting options\n * @param {string} connector\n * @return {string}\n */\nexport default function getSuffix(connector: string = '-') {\n  return config ? config.suffix ? `${connector}${config.suffix}` : '' : '';\n}\n\n"],
+  "mappings": "wCAOe,WAAmB,EAAoB,IAAK,CACzD,MAAO,IAAS,EAAO,OAAS,GAAG,IAAY,EAAO,SAAgB,EACxE",
+  "names": []
+}

package/dist/chunks/chunk.UVVG6NF4.js

@@ -0,0 +1,2 @@
+import{a as c}from"./chunk.3FBPDSVX.js";customElements.define("scw-card",c);
+//# sourceMappingURL=chunk.UVVG6NF4.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/scw-card/scw-card.ts"],
+  "sourcesContent": ["import ScwCard from './ScwCard';\ncustomElements.define('scw-card', ScwCard );\n"],
+  "mappings": "wCACA,eAAe,OAAO,WAAY,CAAQ",
+  "names": []
+}

package/dist/chunks/chunk.W3ITQHQQ.js

@@ -0,0 +1,245 @@
+import{a as r,b as s}from"./chunk.RGGLFZST.js";import{a as g}from"./chunk.62GWBO3B.js";import{a as n,d as l}from"./chunk.S4MESEBR.js";import{a,b as i,e as c}from"./chunk.HCMPRDIX.js";import{a as d}from"./chunk.Y2P62L7U.js";import{g as e}from"./chunk.5YJY6NT6.js";var p=a`
+:host {
+  /* scw element */
+  position: relative;
+  box-sizing: border-box;
+  --margin-right: initial;
+  --margin-bottom: initial;
+  --gap-h-int: initial;
+  --gap-v-int: initial;
+  margin-right: var(--margin-right, var(--gap-h-int, initial));
+  margin-bottom: var(--margin-bottom, var(--gap-v-int, initial));
+  display: block;
+}
+
+:host([warning]) {
+  outline: 2px solid red !important;
+}
+
+:host([size=medium]) {
+  display: block;
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  /*.image-box {
+    width: 100%;
+    padding-bottom: 38.8888888889%;
+    position: relative;
+  }*/
+  /*.image {
+    @include size-medium-image-mixins.box;
+
+    position: absolute;
+    inset: 0;
+    background-position: center;
+    background-size: cover;
+  }*/
+  /*.action {
+    @include size-medium-action-mixins.box;
+    @include size-medium-action-mixins.sizing;
+  }*/
+}
+:host([size=medium]) > *:not(:last-child) {
+  margin-bottom: calc(var(--scw-spacing-1) * 0.8);
+  --margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+}
+:host([size=medium]) .image-box {
+  height: 161px;
+}
+:host([size=medium]) .description {
+  text-align: LEFT;
+  font: var(--scw-type-text-font);
+  color: var(--scw-color-grey-02);
+  align-self: stretch;
+}
+
+:host([size=small]) {
+  display: block;
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  /*.image-box {
+    width: 100%;
+    padding-bottom: 88.9473684211%;
+    position: relative;
+  }*/
+  /*.image {
+    @include size-small-image-mixins.box;
+
+    position: absolute;
+    inset: 0;
+    background-position: center;
+    background-size: cover;
+  }*/
+}
+:host([size=small]) > *:not(:last-child) {
+  margin-bottom: calc(var(--scw-spacing-1) * 0.8);
+  --margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+}
+:host([size=small]) .image-box {
+  height: 169px;
+}
+:host([size=small]) .description {
+  display: none;
+}
+:host([size=small]) .action {
+  display: none;
+}
+
+:host .super-heading.mortgage {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-condensed-font);
+  color: var(--scw-color-04, var(--scw-color-mortgage-04));
+  align-self: stretch;
+}
+:host .super-heading.savings {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-condensed-font);
+  color: var(--scw-color-04, var(--scw-color-savings-04));
+  align-self: stretch;
+}
+:host .super-heading.student {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-condensed-font);
+  color: var(--scw-color-04, var(--scw-color-student-04));
+  align-self: stretch;
+}
+:host .super-heading.investments {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-condensed-font);
+  color: var(--scw-color-04, var(--scw-color-investments-04));
+  align-self: stretch;
+}
+:host .super-heading.checking {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-condensed-font);
+  color: var(--scw-color-04, var(--scw-color-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-04, var(--scw-color-credit-cards-04));
+  align-self: stretch;
+}
+
+:host {
+  display: block;
+  background-color: var(--scw-color, rgba(0, 0, 0, 0));
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  /*.image {
+    @include default-image-mixins.box;
+
+    position: absolute;
+    inset: 0;
+    background-position: center;
+    background-size: cover;
+  }*/
+}
+:host > *:not(:last-child) {
+  margin-bottom: calc(var(--scw-spacing-1) * 0.8);
+  --margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+}
+:host .image-box {
+  background-color: var(--scw-color-09, var(--scw-color-grey-09));
+  border-radius: 10px 10px 10px 10px;
+  align-self: stretch;
+  flex: 1;
+  flex: initial;
+  overflow: hidden;
+  height: 345px;
+}
+:host .heading {
+  background-color: rgba(0, 0, 0, 0);
+  align-self: stretch;
+}
+:host .super-heading {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-condensed-font);
+  color: var(--scw-color-03, var(--scw-color-primary-03));
+  align-self: stretch;
+}
+:host .description {
+  text-align: LEFT;
+  font: var(--scw-type-text-06-font);
+  color: var(--scw-color-02, var(--scw-color-grey-02));
+  align-self: stretch;
+}
+:host .action {
+  width: 83px;
+  height: 32px;
+}
+
+:host([action=none]) {
+  pointer-events: none;
+}
+
+:host([action=whole]) {
+  pointer-events: all;
+}
+
+:host([action=whole]:hover) {
+  cursor: pointer;
+}
+
+:host([action=whole]:focus-visible) {
+  outline: none;
+  box-shadow: var(--scw-effect-focus-shadow);
+  border-radius: 10px 10px 4px 4px;
+}
+
+:host([action=link]) {
+  pointer-events: none;
+}
+:host([action=link]) scw-link {
+  pointer-events: all;
+}`;var t=class extends l{constructor(){super();this.size="large";this.action="none";this.element="card",this.clickHandler=this.clickHandler.bind(this);let o=g();this.headerNodeName=r(`scw-${"heading"}${o}`),this.imageNodeName=r(`scw-${"image"}${o}`),this.linkNodeName=r(`scw-${"link"}${o}`)}static get styles(){return[super.styles,p]}parseAndValidateLightDom(){d(this),super.parseAndValidateLightDom()}clickHandler(o){o.stopPropagation(),this.click()}warn(o){this.heading=`error: ${o}`,c.prototype.warn.call(this,o)}renderImage(){if((this.src||this.srcset)&&this.alt)return s`
+        <scw-image
+          class="image-box"
+          src="${n(this.src)}"
+          srcset="${n(this.srcset)}"
+          alt="${this.alt}"
+          object-fit="cover">
+      </scw-image>
+      `}renderButton(){return this.action==="link"?s`
+        <scw-link
+          aria-label="${this.linkLabel?this.linkLabel:"no label"}" 
+          @click="${this.clickHandler}">
+        </scw-link>`:null}getSizeStringForHeader(){switch(this.size){case"large":return"h1";case"medium":return"h2";case"small":return"h3"}}renderBody(){return s`
+       ${this.renderImage()}
+       ${this.superHeading?s`
+          <div class="super-heading">
+            ${this.superHeading}
+          </div>`:""}
+       <scw-heading
+          style="--scw-color-04: var( --scw-color-grey-02 );"
+          dynamic class="heading"
+          aria-label="${n(this.heading)}"
+          size="${this.getSizeStringForHeader()}">
+        </scw-heading>
+       ${this.description?s`
+          <div class="description">
+            ${this.description}
+          </div>`:""}`}render(){return this.action==="whole"?this.renderBody():s`
+        ${this.renderBody()}
+        ${this.renderButton()}`}};e([i()],t.prototype,"src",2),e([i()],t.prototype,"srcset",2),e([i()],t.prototype,"alt",2),e([i()],t.prototype,"heading",2),e([i()],t.prototype,"superHeading",2),e([i()],t.prototype,"description",2),e([i()],t.prototype,"linkLabel",2),e([i({type:String,reflect:!0})],t.prototype,"size",2),e([i({type:String,reflect:!0})],t.prototype,"action",2);export{t as a};
+//# sourceMappingURL=chunk.W3ITQHQQ.js.map