@tmorrow/cre8-wc 1.1.2 → 1.1.3

package/lib/components/linelength-container/linelength-container.js

@@ -1,19 +1,22 @@
-import { css as r, html as s } from "lit";
-import { Cre8Element as a } from "../cre8-element.js";
-const d = r`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-linelength-container{max-width:var(--cre8-l-linelength-width)}`, t = class t extends a {
-  render() {
-    const i = this.componentClassNames("cre8-c-linelength-container", {});
-    return s`
-      <div class="${i}">
+import { html, } from 'lit';
+import { Cre8Element } from '../cre8-element';
+import styles from './linelength-container.styles.js';
+/**
+ * @slot - The component content
+ */
+export class Cre8LinelengthContainer extends Cre8Element {
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-linelength-container', {});
+        return html `
+      <div class="${componentClassNames}">
         <slot></slot>
       </div>
     `;
-  }
-};
-t.styles = [d];
-let e = t;
-customElements.get("cre8-linelength-container") === void 0 && customElements.define("cre8-linelength-container", e);
-export {
-  e as Cre8LinelengthContainer,
-  e as default
-};
+    }
+}
+Cre8LinelengthContainer.styles = [styles];
+if (customElements.get('cre8-linelength-container') === undefined) {
+    customElements.define('cre8-linelength-container', Cre8LinelengthContainer);
+}
+export default Cre8LinelengthContainer;
+//# sourceMappingURL=linelength-container.js.map

package/lib/components/linelength-container/linelength-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"linelength-container.js","sourceRoot":"","sources":["../../../components/linelength-container/linelength-container.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,kCAAkC,CAAC;AAEtD;;GAEG;AACH,MAAM,OAAO,uBAAwB,SAAQ,WAAW;IAGpD,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,6BAA6B,EAAE,EAAE,CAAC,CAAC;QAExF,OAAO,IAAI,CAAA;oBACC,mBAAmB;;;KAGlC,CAAC;IACF,CAAC;;AAVM,8BAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAa7B,IAAI,cAAc,CAAC,GAAG,CAAC,2BAA2B,CAAC,KAAK,SAAS,EAAE,CAAC;IAChE,cAAc,CAAC,MAAM,CAAC,2BAA2B,EAAE,uBAAuB,CAAC,CAAC;AAChF,CAAC;AAQD,eAAe,uBAAuB,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './linelength-container.styles.js';\n\n/**\n * @slot - The component content\n */\nexport class Cre8LinelengthContainer extends Cre8Element {\n    static styles = [styles];\n\n    render() {\n        const componentClassNames = this.componentClassNames('cre8-c-linelength-container', {});\n\n        return html`\n      <div class=\"${componentClassNames}\">\n        <slot></slot>\n      </div>\n    `;\n    }\n}\n\nif (customElements.get('cre8-linelength-container') === undefined) {\n    customElements.define('cre8-linelength-container', Cre8LinelengthContainer);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-linelength-container': Cre8LinelengthContainer;\n  }\n}\n\nexport default Cre8LinelengthContainer;\n"]}

package/lib/components/linelength-container/linelength-container.styles.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-linelength-container{max-width:var(--cre8-l-linelength-width)}`;
+export default styles;
+//# sourceMappingURL=linelength-container.styles.js.map

package/lib/components/linelength-container/linelength-container.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"linelength-container.styles.js","sourceRoot":"","sources":["../../../components/linelength-container/linelength-container.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,g1DAAg1D,CAAC;AACn2D,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-linelength-container{max-width:var(--cre8-l-linelength-width)}`;\nexport default styles;\n"]}

package/lib/components/link/link.js

@@ -1,112 +1,150 @@
-import { css as v, html as c, nothing as n } from "lit";
-import { property as r } from "lit/decorators.js";
-import { ifDefined as l } from "lit-html/directives/if-defined.js";
-import { Cre8Element as k } from "../cre8-element.js";
-const f = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 0C6.41775 0 4.87103 0.469192 3.55544 1.34824C2.23985 2.22729 1.21447 3.47672 0.608967 4.93853C0.00346628 6.40034 -0.15496 8.00887 0.153721 9.56072C0.462403 11.1126 1.22433 12.538 2.34315 13.6569C3.46197 14.7757 4.88743 15.5376 6.43928 15.8463C7.99113 16.155 9.59966 15.9965 11.0615 15.391C12.5233 14.7855 13.7727 13.7602 14.6518 12.4446C15.5308 11.129 16 9.58225 16 8C15.9978 5.87895 15.1542 3.84542 13.6544 2.34562C12.1546 0.845814 10.121 0.00223986 8 0ZM11.0769 8.61538H6.40846L7.82 10.0262C7.87718 10.0833 7.92253 10.1512 7.95347 10.2259C7.98442 10.3006 8.00034 10.3807 8.00034 10.4615C8.00034 10.5424 7.98442 10.6225 7.95347 10.6972C7.92253 10.7719 7.87718 10.8397 7.82 10.8969C7.76283 10.9541 7.69495 10.9994 7.62025 11.0304C7.54554 11.0613 7.46548 11.0773 7.38462 11.0773C7.30376 11.0773 7.22369 11.0613 7.14899 11.0304C7.07429 10.9994 7.00641 10.9541 6.94923 10.8969L4.48769 8.43538C4.43048 8.37823 4.38509 8.31036 4.35412 8.23565C4.32315 8.16095 4.30721 8.08087 4.30721 8C4.30721 7.91913 4.32315 7.83905 4.35412 7.76434C4.38509 7.68964 4.43048 7.62177 4.48769 7.56461L6.94923 5.10308C7.0647 4.9876 7.22132 4.92273 7.38462 4.92273C7.54792 4.92273 7.70453 4.9876 7.82 5.10308C7.93547 5.21855 8.00034 5.37516 8.00034 5.53846C8.00034 5.70176 7.93547 5.85837 7.82 5.97385L6.40846 7.38461H11.0769C11.2401 7.38461 11.3967 7.44945 11.5121 7.56486C11.6275 7.68026 11.6923 7.83679 11.6923 8C11.6923 8.16321 11.6275 8.31973 11.5121 8.43514C11.3967 8.55055 11.2401 8.61538 11.0769 8.61538Z"/>
-</svg>
-`, g = v`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}.cre8-c-link{display:inline-flex;text-decoration:none;height:100%;color:var(--cre8-color-content-link)}.cre8-c-link:hover .cre8-c-link__text,.cre8-c-link:hover .cre8-c-link__text-area{color:var(--cre8-color-content-link-hover);border-color:var(--cre8-color-border-transparent);background-color:var(--cre8-color-bg-opacity-transparent)}.cre8-c-link:focus{outline:none}.cre8-c-link:focus .cre8-c-link__text,.cre8-c-link:focus .cre8-c-link__text-area{border-color:var(--cre8-color-border-transparent);background-color:var(--cre8-color-bg-active);color:var(--cre8-color-content-link-focus)}.cre8-c-link:focus .cre8-c-link__cta-wrapper{color:var(--cre8-color-content-link-focus);outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem;background-color:var(--cre8-color-button-primary-bg-hover);border:var(--cre8-border-width-focus) var(--cre8-border-style-default) var(--color-border-active-outline)}.cre8-c-link:active .cre8-c-link__text,.cre8-c-link:active .cre8-c-link__text-area{border-color:var(--cre8-color-border-transparent);background-color:var(--cre8-color-bg-opacity-transparent);color:var(--cre8-color-content-link-active)}.cre8-c-link__text-area{display:inline-flex;justify-content:center;text-align:center;align-items:center}.cre8-c-link__text{font-family:var(--cre8-typography-body-default-link-font-family);font-size:var(--cre8-typography-body-default-link-font-size);font-weight:var(--cre8-typography-body-default-link-font-weight);line-height:var(--cre8-typography-body-default-link-line-height);text-decoration:var(--cre8-typography-body-default-link-text-decoration);text-transform:var(--cre8-typography-body-default-link-text-transform);color:var(--cre8-color-content-link);display:inline-flex}.cre8-c-link--sm .cre8-c-link__text{font-family:var(--cre8-typography-body-small-link-font-family);font-size:var(--cre8-typography-body-small-link-font-size);font-weight:var(--cre8-typography-body-small-link-font-weight);line-height:var(--cre8-typography-body-small-link-line-height);text-decoration:var(--cre8-typography-body-small-link-text-decoration);text-transform:var(--cre8-typography-body-small-link-text-transform)}.cre8-c-link--lg .cre8-c-link__text{font-family:var(--cre8-typography-body-large-link-font-family);font-size:var(--cre8-typography-body-large-link-font-size);font-weight:var(--cre8-typography-body-large-link-font-weight);line-height:var(--cre8-typography-body-large-link-line-height);text-decoration:var(--cre8-typography-body-large-link-text-decoration);text-transform:var(--cre8-typography-body-large-link-text-transform)}.cre8-c-link__no-underline .cre8-c-link__text{text-decoration:none}.cre8-c-link__icon-wrapper{display:inline-flex}.cre8-c-link__icon{display:inline-flex;height:1.5rem;width:1.5rem}.cre8-c-link--sm .cre8-c-link__icon{--cre8-icon-height: var(--cre8-icon-size-small);--cre8-icon-width: var(--cre8-icon-size-small);height:1.375rem;width:1.375rem}.cre8-c-link--lg .cre8-c-link__icon{--cre8-icon-height: var(--cre8-icon-size-large);--cre8-icon-width: var(--cre8-icon-size-large);height:1.625rem;width:1.625rem}.cre8-c-link__variation{display:inline-flex;justify-content:center;align-items:center}.cre8-c-link__cta-wrapper{color:var(--cre8-color-button-primary-content);display:inline-flex;margin-left:0.5rem;padding:var(--cre8-spacing-4);background-color:var(--cre8-color-content-link);border-radius:var(--cre8-border-radius-round);border-width:var(--cre8-border-width-button-default)}.cre8-c-link__cta-wrapper svg{height:1rem;width:1rem}.cre8-c-link__icon.before{padding-right:0.5rem}.cre8-c-link__icon.after{padding-left:0.5rem}::slotted([slot=badge]){padding-left:0.5rem}.cre8-c-link--inverted .cre8-c-link__text{color:var(--cre8-color-content-inverse-link)}.cre8-c-link--inverted .cre8-c-link__icon{color:var(--cre8-color-content-inverse-link)}.cre8-c-link--inverted .cre8-c-link__cta-wrapper{--cre8-icon-fill: var(--cre8-color-content-brand);color:var(--cre8-color-content-brand);background-color:var(--cre8-color-content-inverse-link)}.cre8-c-link--inverted:hover .cre8-c-link__text,.cre8-c-link--inverted:hover .cre8-c-link__text-area{color:var(--cre8-color-content-inverse-link-hover)}.cre8-c-link--inverted:hover .cre8-c-link__icon{fill:var(--cre8-color-content-inverse-link-hover)}.cre8-c-link--inverted:active .cre8-c-link__text,.cre8-c-link--inverted:active .cre8-c-link__text-area{color:var(--cre8-color-content-inverse-link-active)}.cre8-c-link--inverted:active .cre8-c-link__icon{fill:var(--cre8-color-content-inverse-link-active)}.cre8-c-link--inverted:focus{outline:none}.cre8-c-link--inverted:focus .cre8-c-link__icon{background-color:var(--cre8-color-bg-inverse-active);fill:var(--cre8-color-content-inverse-link-focus)}.cre8-c-link--inverted:focus .cre8-c-link__text,.cre8-c-link--inverted:focus .cre8-c-link__text-area{background-color:var(--cre8-color-bg-inverse-active);color:var(--cre8-color-content-inverse-link-focus)}.cre8-c-link--inverted:focus .cre8-c-link__cta-wrapper{background-color:var(--cre8-color-content-inverse-link);color:var(--cre8-color-content-inverse-link-focus);outline:var(--cre8-border-width-focus) var(--cre8-border-style-default) var(--cre8-color-content-inverse-link);outline-offset:0.125rem}cre8-icon{display:flex;align-items:center}`;
-var y = Object.defineProperty, t = (d, o, p, m) => {
-  for (var i = void 0, a = d.length - 1, h; a >= 0; a--)
-    (h = d[a]) && (i = h(o, p, i) || i);
-  return i && y(o, p, i), i;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const s = class s extends k {
-  constructor() {
-    super(...arguments), this.iconRotateDegree = 0, this.iconPosition = void 0, this.ctaIcon = "arrow-forward";
-  }
-  generateIcon() {
-    return this.iconName ? c`
+import svgArrowLeft from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Filled/Arrow_-_Left.svg?raw';
+import { html, nothing, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './link.styles.js';
+/**
+ * Link Component are strictly used in the case where the component will take
+ * the user away from the current page to a new url.
+ * In this vein, this component should ONLY be used in situations an anchor tag would be used (an href is required)
+ * This goes for the variations as well such as the Call To Action Link
+ *
+ * **Note**
+ *
+ * For link with icon:
+ * - **iconRotateDegree** & **iconFlipDirection** props are optional.
+ * - They are used to set up the correct direction for icons, for example,
+ * arrows, caret up or caret down.
+ *
+*/
+export class Cre8Link extends Cre8Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * iconRotateDegree is used for <cre8-icon> to set the arrow in the correct direction
+         */
+        this.iconRotateDegree = 0;
+        /**
+         * Icon position
+         * - **before** places the icon before the button text
+         * - **after** places the icon after the button text
+         */
+        this.iconPosition = undefined;
+        /**
+         * Call To Action Icon
+         */
+        this.ctaIcon = 'arrow-forward';
+    }
+    generateIcon() {
+        if (this.iconName) {
+            return html `
           <div class="cre8-c-link__icon-wrapper">
             <cre8-icon-legacy
               class="cre8-c-link__icon ${this.iconPosition}"
               aria-hidden="true"
-              name="${l(this.iconName)}">
+              name="${ifDefined(this.iconName)}">
             </cre8-icon-legacy>
-          </div>` : this.svg ? c`
+          </div>`;
+        }
+        if (this.svg) {
+            return html `
           <div class="cre8-c-link__icon-wrapper">
             <cre8-icon
               class="cre8-c-link__icon ${this.iconPosition}"
               aria-hidden="true"
               svg='${this.svg}' rotate="${Number(this.iconRotateDegree)}" flip="${this.iconFlipDirection}">
             </cre8-icon>
-          </div>` : n;
-  }
-  render() {
-    const o = this.componentClassNames("cre8-c-link", {
-      "cre8-c-link--inverted": this.inverted,
-      "cre8-c-link--sm": this.size === "sm",
-      "cre8-c-link--lg": this.size === "lg",
-      "cre8-c-link__no-underline": this.noUnderline
-    });
-    return c`
+          </div>`;
+        }
+        return nothing;
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-link', {
+            'cre8-c-link--inverted': this.inverted,
+            'cre8-c-link--sm': this.size === 'sm',
+            'cre8-c-link--lg': this.size === 'lg',
+            'cre8-c-link__no-underline': this.noUnderline,
+        });
+        return html `
       <a
-        class="${o}"
-        href="${l(this.href)}"
-        rel="${l(this.rel)}"
-        target="${l(this.target)}"
+        class="${componentClassNames}"
+        href="${ifDefined(this.href)}"
+        rel="${ifDefined(this.rel)}"
+        target="${ifDefined(this.target)}"
       >
         <div class="cre8-c-link__text-area">
-          ${this.iconPosition === "before" ? c`${this.generateIcon()}` : n}
+          ${this.iconPosition === 'before'
+            ? html `${this.generateIcon()}`
+            : nothing}
           <span class="cre8-c-link__text">
             <slot></slot>
           </span>
-          ${this.iconPosition === "after" ? c`${this.generateIcon()}` : n}
+          ${this.iconPosition === 'after'
+            ? html `${this.generateIcon()}`
+            : nothing}
         </div>
         <div class="cre8-c-link__variation">
           <slot name="badge"></slot>
-          ${this.ctaLink ? c`<div class="cre8-c-link__cta-wrapper">
-                <cre8-icon class="cre8-c-link__action" svg='${f}' 
+          ${this.ctaLink
+            ? html `<div class="cre8-c-link__cta-wrapper">
+                <cre8-icon class="cre8-c-link__action" svg='${svgArrowLeft}' 
                 rotate="180" aria-hidden="true"></cre8-icon>
-              </div>` : n}
+              </div>`
+            : nothing}
         </div>
       </a>
     `;
-  }
-};
-s.styles = [g];
-let e = s;
-t([
-  r()
-], e.prototype, "href");
-t([
-  r()
-], e.prototype, "rel");
-t([
-  r()
-], e.prototype, "target");
-t([
-  r()
-], e.prototype, "iconName");
-t([
-  r()
-], e.prototype, "svg");
-t([
-  r({ type: Number })
-], e.prototype, "iconRotateDegree");
-t([
-  r()
-], e.prototype, "iconFlipDirection");
-t([
-  r()
-], e.prototype, "iconPosition");
-t([
-  r()
-], e.prototype, "ctaIcon");
-t([
-  r({ type: Boolean })
-], e.prototype, "ctaLink");
-t([
-  r({ type: Boolean })
-], e.prototype, "noUnderline");
-t([
-  r()
-], e.prototype, "size");
-t([
-  r({ type: Boolean })
-], e.prototype, "inverted");
-customElements.get("cre8-link") === void 0 && customElements.define("cre8-link", e);
-export {
-  e as Cre8Link,
-  e as default
-};
+    }
+}
+Cre8Link.styles = [styles];
+__decorate([
+    property()
+], Cre8Link.prototype, "href", void 0);
+__decorate([
+    property()
+], Cre8Link.prototype, "rel", void 0);
+__decorate([
+    property()
+], Cre8Link.prototype, "target", void 0);
+__decorate([
+    property()
+], Cre8Link.prototype, "iconName", void 0);
+__decorate([
+    property()
+], Cre8Link.prototype, "svg", void 0);
+__decorate([
+    property({ type: Number })
+], Cre8Link.prototype, "iconRotateDegree", void 0);
+__decorate([
+    property()
+], Cre8Link.prototype, "iconFlipDirection", void 0);
+__decorate([
+    property()
+], Cre8Link.prototype, "iconPosition", void 0);
+__decorate([
+    property()
+], Cre8Link.prototype, "ctaIcon", void 0);
+__decorate([
+    property({ type: Boolean })
+], Cre8Link.prototype, "ctaLink", void 0);
+__decorate([
+    property({ type: Boolean })
+], Cre8Link.prototype, "noUnderline", void 0);
+__decorate([
+    property()
+], Cre8Link.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean })
+], Cre8Link.prototype, "inverted", void 0);
+if (customElements.get('cre8-link') === undefined) {
+    customElements.define('cre8-link', Cre8Link);
+}
+export default Cre8Link;
+//# sourceMappingURL=link.js.map

package/lib/components/link/link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.js","sourceRoot":"","sources":["../../../components/link/link.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,YAAY,MAAM,yGAAyG,CAAC;AACnI,OAAO,EACH,IAAI,EAAE,OAAO,GAChB,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAEtC;;;;;;;;;;;;;EAaE;AAEF,MAAM,OAAO,QAAS,SAAQ,WAAW;IAAzC;;QA2CE;;WAEG;QAEC,qBAAgB,GAAY,CAAC,CAAC;QAQlC;;;;WAIG;QAEC,iBAAY,GAAwB,SAAS,CAAC;QAElD;;WAEG;QAEC,YAAO,GAAG,eAAe,CAAC;IA0FhC,CAAC;IA9DS,YAAY;QAChB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,OAAO,IAAI,CAAA;;;yCAGoB,IAAI,CAAC,YAAY;;sBAEpC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;;iBAE7B,CAAC;QACZ,CAAC;QAED,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;YACX,OAAO,IAAI,CAAA;;;yCAGoB,IAAI,CAAC,YAAY;;qBAErC,IAAI,CAAC,GAAG,aAAa,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,WAAW,IAAI,CAAC,iBAAiB;;iBAEvF,CAAC;QACZ,CAAC;QAAC,OAAO,OAAO,CAAC;IACrB,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE;YAChE,uBAAuB,EAAE,IAAI,CAAC,QAAQ;YACtC,iBAAiB,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YACrC,iBAAiB,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YACrC,2BAA2B,EAAE,IAAI,CAAC,WAAW;SAChD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;;iBAEA,mBAAmB;gBACpB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;eACrB,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;kBAChB,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC;;;YAG5B,IAAI,CAAC,YAAY,KAAK,QAAQ;YAClC,CAAC,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,YAAY,EAAE,EAAE;YAC9B,CAAC,CAAC,OAAO;;;;YAIL,IAAI,CAAC,YAAY,KAAK,OAAO;YACjC,CAAC,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,YAAY,EAAE,EAAE;YAC9B,CAAC,CAAC,OAAO;;;;YAIL,IAAI,CAAC,OAAO;YAChB,CAAC,CAAC,IAAI,CAAA;8DACgD,YAAY;;qBAErD;YACb,CAAC,CAAC,OAAO;;;KAGZ,CAAC;IACJ,CAAC;;AA3JQ,eAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAMvB;IADH,QAAQ,EAAE;sCACM;AAMb;IADH,QAAQ,EAAE;qCACM;AAab;IADH,QAAQ,EAAE;wCAC0C;AAOjD;IADH,QAAQ,EAAE;0CACW;AAQlB;IADH,QAAQ,EAAE;qCACM;AAMb;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACO;AAM9B;IADH,QAAQ,EAAE;mDACoB;AAQ3B;IADH,QAAQ,EAAE;8CACuC;AAM9C;IADH,QAAQ,EAAE;yCACmB;AAM1B;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCACN;AAMlB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACF;AAQtB;IADH,QAAQ,EAAE;sCACY;AAMnB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACL;AAkEzB,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,CAAC;IAChD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AACjD,CAAC;AAQD,eAAe,QAAQ,CAAC","sourcesContent":["import svgArrowLeft from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Filled/Arrow_-_Left.svg?raw';\nimport {\n    html, nothing,\n} from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './link.styles.js';\n\n/**\n * Link Component are strictly used in the case where the component will take\n * the user away from the current page to a new url.\n * In this vein, this component should ONLY be used in situations an anchor tag would be used (an href is required)\n * This goes for the variations as well such as the Call To Action Link\n *\n * **Note**\n *\n * For link with icon:\n * - **iconRotateDegree** & **iconFlipDirection** props are optional.\n * - They are used to set up the correct direction for icons, for example,\n * arrows, caret up or caret down.\n *\n*/\n\nexport class Cre8Link extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Href attribute of the anchor tag\n   */\n  @property()\n      href: string;\n\n  /**\n   * Rel attribute of the anchor tag\n   */\n  @property()\n      rel?: string;\n\n  /**\n   * Target attribute for a link (i.e. set to _blank to open in new tab)\n   * - **_blank** yields a link that opens in a new tab\n   * - **_self** yields a link that loads the URL into the same browsing context as the current one.\n   *   This is the default behavior\n   * - **_parent** yields a link that loads the URL into the parent browsing context of the current one.\n   *   If there is no parent, this behaves the same way as _self\n   * - **_top** yields a link that loads the URL into the top-level browsing context.\n   *   If there is no parent, this behaves the same way as _self.\n   */\n  @property()\n      target?: '_blank' | '_self' | '_parent' | '_top';\n\n  /**\n   * DEPRECATED: Icon name, use svg instead\n   * @deprecated\n   */\n  @property()\n      iconName?: string;\n\n  /**\n   * svg as a raw string\n   * - For links with icon, the icon is defined by this prop.\n   * - Pass in a raw svg as a String for using <cre8-icon>\n   */\n  @property()\n      svg?: string;\n\n  /**\n   * iconRotateDegree is used for <cre8-icon> to set the arrow in the correct direction\n   */\n  @property({ type: Number })\n      iconRotateDegree?: number = 0;\n\n  /**\n   * iconFlipDirection is used for <cre8-icon> to set the icon in the correct direction\n   */\n  @property()\n      iconFlipDirection?: string;\n\n  /**\n   * Icon position\n   * - **before** places the icon before the button text\n   * - **after** places the icon after the button text\n   */\n  @property()\n      iconPosition?: 'before' | 'after' = undefined;\n\n  /**\n   * Call To Action Icon\n   */\n  @property()\n      ctaIcon = 'arrow-forward';\n\n  /**\n   * Call To Action Link\n   */\n  @property({ type: Boolean })\n      ctaLink?: boolean;\n\n  /**\n   * Link with no underline\n   */\n  @property({ type: Boolean })\n      noUnderline?: boolean;\n\n  /**\n   * Size variant (default is medium)\n   * - **sm** shrinks the link typography and overall size\n   * - **lg** increases the link typography size and overall size\n   */\n  @property()\n      size?: 'sm' | 'lg';\n\n  /**\n   * Inverted colors Link (onDark)\n   */\n  @property({ type: Boolean })\n      inverted?: boolean;\n\n  private generateIcon() {\n      if (this.iconName) {\n          return html`\n          <div class=\"cre8-c-link__icon-wrapper\">\n            <cre8-icon-legacy\n              class=\"cre8-c-link__icon ${this.iconPosition}\"\n              aria-hidden=\"true\"\n              name=\"${ifDefined(this.iconName)}\">\n            </cre8-icon-legacy>\n          </div>`;\n      }\n\n      if (this.svg) {\n          return html`\n          <div class=\"cre8-c-link__icon-wrapper\">\n            <cre8-icon\n              class=\"cre8-c-link__icon ${this.iconPosition}\"\n              aria-hidden=\"true\"\n              svg='${this.svg}' rotate=\"${Number(this.iconRotateDegree)}\" flip=\"${this.iconFlipDirection}\">\n            </cre8-icon>\n          </div>`;\n      } return nothing;\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-link', {\n          'cre8-c-link--inverted': this.inverted,\n          'cre8-c-link--sm': this.size === 'sm',\n          'cre8-c-link--lg': this.size === 'lg',\n          'cre8-c-link__no-underline': this.noUnderline,\n      });\n\n      return html`\n      <a\n        class=\"${componentClassNames}\"\n        href=\"${ifDefined(this.href)}\"\n        rel=\"${ifDefined(this.rel)}\"\n        target=\"${ifDefined(this.target)}\"\n      >\n        <div class=\"cre8-c-link__text-area\">\n          ${this.iconPosition === 'before'\n        ? html`${this.generateIcon()}`\n        : nothing}\n          <span class=\"cre8-c-link__text\">\n            <slot></slot>\n          </span>\n          ${this.iconPosition === 'after'\n        ? html`${this.generateIcon()}`\n        : nothing}\n        </div>\n        <div class=\"cre8-c-link__variation\">\n          <slot name=\"badge\"></slot>\n          ${this.ctaLink\n        ? html`<div class=\"cre8-c-link__cta-wrapper\">\n                <cre8-icon class=\"cre8-c-link__action\" svg='${svgArrowLeft}' \n                rotate=\"180\" aria-hidden=\"true\"></cre8-icon>\n              </div>`\n        : nothing}\n        </div>\n      </a>\n    `;\n  }\n}\n\nif (customElements.get('cre8-link') === undefined) {\n    customElements.define('cre8-link', Cre8Link);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-link': Cre8Link;\n  }\n}\n\nexport default Cre8Link;\n"]}

package/lib/components/link/link.styles.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}.cre8-c-link{display:inline-flex;text-decoration:none;height:100%;color:var(--cre8-color-content-link)}.cre8-c-link:hover .cre8-c-link__text,.cre8-c-link:hover .cre8-c-link__text-area{color:var(--cre8-color-content-link-hover);border-color:var(--cre8-color-border-transparent);background-color:var(--cre8-color-bg-opacity-transparent)}.cre8-c-link:focus{outline:none}.cre8-c-link:focus .cre8-c-link__text,.cre8-c-link:focus .cre8-c-link__text-area{border-color:var(--cre8-color-border-transparent);background-color:var(--cre8-color-bg-active);color:var(--cre8-color-content-link-focus)}.cre8-c-link:focus .cre8-c-link__cta-wrapper{color:var(--cre8-color-content-link-focus);outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem;background-color:var(--cre8-color-button-primary-bg-hover);border:var(--cre8-border-width-focus) var(--cre8-border-style-default) var(--color-border-active-outline)}.cre8-c-link:active .cre8-c-link__text,.cre8-c-link:active .cre8-c-link__text-area{border-color:var(--cre8-color-border-transparent);background-color:var(--cre8-color-bg-opacity-transparent);color:var(--cre8-color-content-link-active)}.cre8-c-link__text-area{display:inline-flex;justify-content:center;text-align:center;align-items:center}.cre8-c-link__text{font-family:var(--cre8-typography-body-default-link-font-family);font-size:var(--cre8-typography-body-default-link-font-size);font-weight:var(--cre8-typography-body-default-link-font-weight);line-height:var(--cre8-typography-body-default-link-line-height);text-decoration:var(--cre8-typography-body-default-link-text-decoration);text-transform:var(--cre8-typography-body-default-link-text-transform);color:var(--cre8-color-content-link);display:inline-flex}.cre8-c-link--sm .cre8-c-link__text{font-family:var(--cre8-typography-body-small-link-font-family);font-size:var(--cre8-typography-body-small-link-font-size);font-weight:var(--cre8-typography-body-small-link-font-weight);line-height:var(--cre8-typography-body-small-link-line-height);text-decoration:var(--cre8-typography-body-small-link-text-decoration);text-transform:var(--cre8-typography-body-small-link-text-transform)}.cre8-c-link--lg .cre8-c-link__text{font-family:var(--cre8-typography-body-large-link-font-family);font-size:var(--cre8-typography-body-large-link-font-size);font-weight:var(--cre8-typography-body-large-link-font-weight);line-height:var(--cre8-typography-body-large-link-line-height);text-decoration:var(--cre8-typography-body-large-link-text-decoration);text-transform:var(--cre8-typography-body-large-link-text-transform)}.cre8-c-link__no-underline .cre8-c-link__text{text-decoration:none}.cre8-c-link__icon-wrapper{display:inline-flex}.cre8-c-link__icon{display:inline-flex;height:1.5rem;width:1.5rem}.cre8-c-link--sm .cre8-c-link__icon{--cre8-icon-height: var(--cre8-icon-size-small);--cre8-icon-width: var(--cre8-icon-size-small);height:1.375rem;width:1.375rem}.cre8-c-link--lg .cre8-c-link__icon{--cre8-icon-height: var(--cre8-icon-size-large);--cre8-icon-width: var(--cre8-icon-size-large);height:1.625rem;width:1.625rem}.cre8-c-link__variation{display:inline-flex;justify-content:center;align-items:center}.cre8-c-link__cta-wrapper{color:var(--cre8-color-button-primary-content);display:inline-flex;margin-left:0.5rem;padding:var(--cre8-spacing-4);background-color:var(--cre8-color-content-link);border-radius:var(--cre8-border-radius-round);border-width:var(--cre8-border-width-button-default)}.cre8-c-link__cta-wrapper svg{height:1rem;width:1rem}.cre8-c-link__icon.before{padding-right:0.5rem}.cre8-c-link__icon.after{padding-left:0.5rem}::slotted([slot=badge]){padding-left:0.5rem}.cre8-c-link--inverted .cre8-c-link__text{color:var(--cre8-color-content-inverse-link)}.cre8-c-link--inverted .cre8-c-link__icon{color:var(--cre8-color-content-inverse-link)}.cre8-c-link--inverted .cre8-c-link__cta-wrapper{--cre8-icon-fill: var(--cre8-color-content-brand);color:var(--cre8-color-content-brand);background-color:var(--cre8-color-content-inverse-link)}.cre8-c-link--inverted:hover .cre8-c-link__text,.cre8-c-link--inverted:hover .cre8-c-link__text-area{color:var(--cre8-color-content-inverse-link-hover)}.cre8-c-link--inverted:hover .cre8-c-link__icon{fill:var(--cre8-color-content-inverse-link-hover)}.cre8-c-link--inverted:active .cre8-c-link__text,.cre8-c-link--inverted:active .cre8-c-link__text-area{color:var(--cre8-color-content-inverse-link-active)}.cre8-c-link--inverted:active .cre8-c-link__icon{fill:var(--cre8-color-content-inverse-link-active)}.cre8-c-link--inverted:focus{outline:none}.cre8-c-link--inverted:focus .cre8-c-link__icon{background-color:var(--cre8-color-bg-inverse-active);fill:var(--cre8-color-content-inverse-link-focus)}.cre8-c-link--inverted:focus .cre8-c-link__text,.cre8-c-link--inverted:focus .cre8-c-link__text-area{background-color:var(--cre8-color-bg-inverse-active);color:var(--cre8-color-content-inverse-link-focus)}.cre8-c-link--inverted:focus .cre8-c-link__cta-wrapper{background-color:var(--cre8-color-content-inverse-link);color:var(--cre8-color-content-inverse-link-focus);outline:var(--cre8-border-width-focus) var(--cre8-border-style-default) var(--cre8-color-content-inverse-link);outline-offset:0.125rem}cre8-icon{display:flex;align-items:center}`;
+export default styles;
+//# sourceMappingURL=link.styles.js.map

package/lib/components/link/link.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.styles.js","sourceRoot":"","sources":["../../../components/link/link.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,48NAA48N,CAAC;AAC/9N,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}.cre8-c-link{display:inline-flex;text-decoration:none;height:100%;color:var(--cre8-color-content-link)}.cre8-c-link:hover .cre8-c-link__text,.cre8-c-link:hover .cre8-c-link__text-area{color:var(--cre8-color-content-link-hover);border-color:var(--cre8-color-border-transparent);background-color:var(--cre8-color-bg-opacity-transparent)}.cre8-c-link:focus{outline:none}.cre8-c-link:focus .cre8-c-link__text,.cre8-c-link:focus .cre8-c-link__text-area{border-color:var(--cre8-color-border-transparent);background-color:var(--cre8-color-bg-active);color:var(--cre8-color-content-link-focus)}.cre8-c-link:focus .cre8-c-link__cta-wrapper{color:var(--cre8-color-content-link-focus);outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem;background-color:var(--cre8-color-button-primary-bg-hover);border:var(--cre8-border-width-focus) var(--cre8-border-style-default) var(--color-border-active-outline)}.cre8-c-link:active .cre8-c-link__text,.cre8-c-link:active .cre8-c-link__text-area{border-color:var(--cre8-color-border-transparent);background-color:var(--cre8-color-bg-opacity-transparent);color:var(--cre8-color-content-link-active)}.cre8-c-link__text-area{display:inline-flex;justify-content:center;text-align:center;align-items:center}.cre8-c-link__text{font-family:var(--cre8-typography-body-default-link-font-family);font-size:var(--cre8-typography-body-default-link-font-size);font-weight:var(--cre8-typography-body-default-link-font-weight);line-height:var(--cre8-typography-body-default-link-line-height);text-decoration:var(--cre8-typography-body-default-link-text-decoration);text-transform:var(--cre8-typography-body-default-link-text-transform);color:var(--cre8-color-content-link);display:inline-flex}.cre8-c-link--sm .cre8-c-link__text{font-family:var(--cre8-typography-body-small-link-font-family);font-size:var(--cre8-typography-body-small-link-font-size);font-weight:var(--cre8-typography-body-small-link-font-weight);line-height:var(--cre8-typography-body-small-link-line-height);text-decoration:var(--cre8-typography-body-small-link-text-decoration);text-transform:var(--cre8-typography-body-small-link-text-transform)}.cre8-c-link--lg .cre8-c-link__text{font-family:var(--cre8-typography-body-large-link-font-family);font-size:var(--cre8-typography-body-large-link-font-size);font-weight:var(--cre8-typography-body-large-link-font-weight);line-height:var(--cre8-typography-body-large-link-line-height);text-decoration:var(--cre8-typography-body-large-link-text-decoration);text-transform:var(--cre8-typography-body-large-link-text-transform)}.cre8-c-link__no-underline .cre8-c-link__text{text-decoration:none}.cre8-c-link__icon-wrapper{display:inline-flex}.cre8-c-link__icon{display:inline-flex;height:1.5rem;width:1.5rem}.cre8-c-link--sm .cre8-c-link__icon{--cre8-icon-height: var(--cre8-icon-size-small);--cre8-icon-width: var(--cre8-icon-size-small);height:1.375rem;width:1.375rem}.cre8-c-link--lg .cre8-c-link__icon{--cre8-icon-height: var(--cre8-icon-size-large);--cre8-icon-width: var(--cre8-icon-size-large);height:1.625rem;width:1.625rem}.cre8-c-link__variation{display:inline-flex;justify-content:center;align-items:center}.cre8-c-link__cta-wrapper{color:var(--cre8-color-button-primary-content);display:inline-flex;margin-left:0.5rem;padding:var(--cre8-spacing-4);background-color:var(--cre8-color-content-link);border-radius:var(--cre8-border-radius-round);border-width:var(--cre8-border-width-button-default)}.cre8-c-link__cta-wrapper svg{height:1rem;width:1rem}.cre8-c-link__icon.before{padding-right:0.5rem}.cre8-c-link__icon.after{padding-left:0.5rem}::slotted([slot=badge]){padding-left:0.5rem}.cre8-c-link--inverted .cre8-c-link__text{color:var(--cre8-color-content-inverse-link)}.cre8-c-link--inverted .cre8-c-link__icon{color:var(--cre8-color-content-inverse-link)}.cre8-c-link--inverted .cre8-c-link__cta-wrapper{--cre8-icon-fill: var(--cre8-color-content-brand);color:var(--cre8-color-content-brand);background-color:var(--cre8-color-content-inverse-link)}.cre8-c-link--inverted:hover .cre8-c-link__text,.cre8-c-link--inverted:hover .cre8-c-link__text-area{color:var(--cre8-color-content-inverse-link-hover)}.cre8-c-link--inverted:hover .cre8-c-link__icon{fill:var(--cre8-color-content-inverse-link-hover)}.cre8-c-link--inverted:active .cre8-c-link__text,.cre8-c-link--inverted:active .cre8-c-link__text-area{color:var(--cre8-color-content-inverse-link-active)}.cre8-c-link--inverted:active .cre8-c-link__icon{fill:var(--cre8-color-content-inverse-link-active)}.cre8-c-link--inverted:focus{outline:none}.cre8-c-link--inverted:focus .cre8-c-link__icon{background-color:var(--cre8-color-bg-inverse-active);fill:var(--cre8-color-content-inverse-link-focus)}.cre8-c-link--inverted:focus .cre8-c-link__text,.cre8-c-link--inverted:focus .cre8-c-link__text-area{background-color:var(--cre8-color-bg-inverse-active);color:var(--cre8-color-content-inverse-link-focus)}.cre8-c-link--inverted:focus .cre8-c-link__cta-wrapper{background-color:var(--cre8-color-content-inverse-link);color:var(--cre8-color-content-inverse-link-focus);outline:var(--cre8-border-width-focus) var(--cre8-border-style-default) var(--cre8-color-content-inverse-link);outline-offset:0.125rem}cre8-icon{display:flex;align-items:center}`;\nexport default styles;\n"]}

package/lib/components/link-list/link-list.js

@@ -1,49 +1,52 @@
-import { css as d, html as p } from "lit";
-import { property as r } from "lit/decorators.js";
-import { Cre8Element as m } from "../cre8-element.js";
-const h = d`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-link-list{font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);display:flex;flex-direction:column;padding:0;margin-top:-1rem;list-style:none}.cre8-c-link-list ::slotted(cre8-link-list-item){margin-top:1rem}.cre8-c-link-list--secondary{--cre8-link-list-item-active-text-color: var(--cre8-color-content-default);color:var(--cre8-color-content-subtle)}.cre8-c-link-list--inverted{--cre8-link-list-link-color: var(--cre8-color-content-knockout)}.cre8-c-link-list--display{color:var(--cre8-color-content-strong)}.cre8-c-link-list--condensed{margin-top:-0.625rem}.cre8-c-link-list--condensed ::slotted(cre8-link-list-item){margin-top:0.625rem}.cre8-c-link-list--sm{font-family:var(--cre8-typography-body-small-font-family);font-size:var(--cre8-typography-body-small-font-size);font-weight:var(--cre8-typography-body-small-font-weight);line-height:var(--cre8-typography-body-small-line-height);text-decoration:var(--cre8-typography-body-small-text-decoration);text-transform:var(--cre8-typography-body-small-text-transform)}.cre8-c-link-list--horizontal{flex-direction:row;flex-wrap:wrap;margin:-0.5rem 0 0 -1rem}.cre8-c-link-list--horizontal ::slotted(cre8-link-list-item){margin-top:0.5rem;margin-left:1rem}@media all and (max-width: 768px){.cre8-c-link-list--responsive{flex-direction:row;flex-wrap:wrap;margin:-0.5rem 0 0 -1rem}.cre8-c-link-list--responsive ::slotted(cre8-link-list-item){margin-top:0.5rem;margin-left:1rem}}`;
-var f = Object.defineProperty, i = (s, a, n, y) => {
-  for (var t = void 0, l = s.length - 1, c; l >= 0; l--)
-    (c = s[l]) && (t = c(a, n, t) || t);
-  return t && f(a, n, t), t;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const o = class o extends m {
-  render() {
-    const a = this.componentClassNames("cre8-c-link-list", {
-      "cre8-c-link-list--secondary": this.variant === "secondary",
-      "cre8-c-link-list--display": this.variant === "display",
-      "cre8-c-link-list--inverted": this.inverted === !0,
-      "cre8-c-link-list--responsive": this.behavior === "responsive",
-      "cre8-c-link-list--horizontal": this.behavior === "horizontal",
-      "cre8-c-link-list--condensed": this.spacing === "condensed",
-      "cre8-c-link-list--sm": this.size === "sm"
-    });
-    return p`
-      <ul class="${a}">
+import { html, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './link-list.styles.js';
+/**
+ * @slot - The link list items
+ */
+export class Cre8LinkList extends Cre8Element {
+    render() {
+        const componentClassName = this.componentClassNames('cre8-c-link-list', {
+            'cre8-c-link-list--secondary': this.variant === 'secondary',
+            'cre8-c-link-list--display': this.variant === 'display',
+            'cre8-c-link-list--inverted': this.inverted === true,
+            'cre8-c-link-list--responsive': this.behavior === 'responsive',
+            'cre8-c-link-list--horizontal': this.behavior === 'horizontal',
+            'cre8-c-link-list--condensed': this.spacing === 'condensed',
+            'cre8-c-link-list--sm': this.size === 'sm',
+        });
+        return html `
+      <ul class="${componentClassName}">
         <slot></slot>
       </ul>
     `;
-  }
-};
-o.styles = [h];
-let e = o;
-i([
-  r()
-], e.prototype, "behavior");
-i([
-  r({ type: Boolean, reflect: !0 })
-], e.prototype, "inverted");
-i([
-  r()
-], e.prototype, "size");
-i([
-  r()
-], e.prototype, "spacing");
-i([
-  r()
-], e.prototype, "variant");
-customElements.get("cre8-link-list") === void 0 && customElements.define("cre8-link-list", e);
-export {
-  e as Cre8LinkList,
-  e as default
-};
+    }
+}
+Cre8LinkList.styles = [styles];
+__decorate([
+    property()
+], Cre8LinkList.prototype, "behavior", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8LinkList.prototype, "inverted", void 0);
+__decorate([
+    property()
+], Cre8LinkList.prototype, "size", void 0);
+__decorate([
+    property()
+], Cre8LinkList.prototype, "spacing", void 0);
+__decorate([
+    property()
+], Cre8LinkList.prototype, "variant", void 0);
+if (customElements.get('cre8-link-list') === undefined) {
+    customElements.define('cre8-link-list', Cre8LinkList);
+}
+export default Cre8LinkList;
+//# sourceMappingURL=link-list.js.map

package/lib/components/link-list/link-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-list.js","sourceRoot":"","sources":["../../../components/link-list/link-list.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAE3C;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,WAAW;IAwC3C,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,EAAE;YACpE,6BAA6B,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;YAC3D,2BAA2B,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YACvD,4BAA4B,EAAE,IAAI,CAAC,QAAQ,KAAK,IAAI;YACpD,8BAA8B,EAAE,IAAI,CAAC,QAAQ,KAAK,YAAY;YAC9D,8BAA8B,EAAE,IAAI,CAAC,QAAQ,KAAK,YAAY;YAC9D,6BAA6B,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;YAC3D,sBAAsB,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;SAC7C,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;mBACE,kBAAkB;;;KAGhC,CAAC;IACJ,CAAC;;AAvDQ,mBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAQvB;IADH,QAAQ,EAAE;8CACgC;AAOvC;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACpB;AAOnB;IADH,QAAQ,EAAE;0CACK;AAOZ;IADH,QAAQ,EAAE;6CACe;AAQtB;IADH,QAAQ,EAAE;6CAC2B;AAqBxC,IAAI,cAAc,CAAC,GAAG,CAAC,gBAAgB,CAAC,KAAK,SAAS,EAAE,CAAC;IACrD,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAC;AAC1D,CAAC;AAQD,eAAe,YAAY,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './link-list.styles.js';\n\n/**\n * @slot - The link list items\n */\nexport class Cre8LinkList extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Behavioral variant\n   * - **responsive** renders a horizontal wrapping link list that converts to a stacked link list on large screens\n   * - **horizontal** renders a horizontal wrapping link list on all screens\n   */\n  @property()\n      behavior?: 'responsive' | 'horizontal';\n\n  /**\n   * Inverted variant\n   * 1. Used for dark backgrounds\n   */\n  @property({ type: Boolean, reflect: true })\n      inverted?: boolean;\n\n  /**\n   * Size variants\n   * - **sm** renders a link list with a smaller typography\n   */\n  @property()\n      size?: 'sm';\n\n  /**\n   * Spacing between link list items\n   * - **condensed** renders a link list with a more compact display\n   */\n  @property()\n      spacing?: 'condensed';\n\n  /**\n   * Style variants\n   * - **secondary** renders a link list with a more subtle visual treatment\n   * - **display** renders a link list with a display treatment (e.g. article title)\n   */\n  @property()\n      variant?: 'secondary' | 'display';\n\n  render() {\n      const componentClassName = this.componentClassNames('cre8-c-link-list', {\n          'cre8-c-link-list--secondary': this.variant === 'secondary',\n          'cre8-c-link-list--display': this.variant === 'display',\n          'cre8-c-link-list--inverted': this.inverted === true,\n          'cre8-c-link-list--responsive': this.behavior === 'responsive',\n          'cre8-c-link-list--horizontal': this.behavior === 'horizontal',\n          'cre8-c-link-list--condensed': this.spacing === 'condensed',\n          'cre8-c-link-list--sm': this.size === 'sm',\n      });\n\n      return html`\n      <ul class=\"${componentClassName}\">\n        <slot></slot>\n      </ul>\n    `;\n  }\n}\n\nif (customElements.get('cre8-link-list') === undefined) {\n    customElements.define('cre8-link-list', Cre8LinkList);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-link-list': Cre8LinkList;\n  }\n}\n\nexport default Cre8LinkList;\n"]}

package/lib/components/link-list/link-list.styles.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-link-list{font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);display:flex;flex-direction:column;padding:0;margin-top:-1rem;list-style:none}.cre8-c-link-list ::slotted(cre8-link-list-item){margin-top:1rem}.cre8-c-link-list--secondary{--cre8-link-list-item-active-text-color: var(--cre8-color-content-default);color:var(--cre8-color-content-subtle)}.cre8-c-link-list--inverted{--cre8-link-list-link-color: var(--cre8-color-content-knockout)}.cre8-c-link-list--display{color:var(--cre8-color-content-strong)}.cre8-c-link-list--condensed{margin-top:-0.625rem}.cre8-c-link-list--condensed ::slotted(cre8-link-list-item){margin-top:0.625rem}.cre8-c-link-list--sm{font-family:var(--cre8-typography-body-small-font-family);font-size:var(--cre8-typography-body-small-font-size);font-weight:var(--cre8-typography-body-small-font-weight);line-height:var(--cre8-typography-body-small-line-height);text-decoration:var(--cre8-typography-body-small-text-decoration);text-transform:var(--cre8-typography-body-small-text-transform)}.cre8-c-link-list--horizontal{flex-direction:row;flex-wrap:wrap;margin:-0.5rem 0 0 -1rem}.cre8-c-link-list--horizontal ::slotted(cre8-link-list-item){margin-top:0.5rem;margin-left:1rem}@media all and (max-width: 768px){.cre8-c-link-list--responsive{flex-direction:row;flex-wrap:wrap;margin:-0.5rem 0 0 -1rem}.cre8-c-link-list--responsive ::slotted(cre8-link-list-item){margin-top:0.5rem;margin-left:1rem}}`;
+export default styles;
+//# sourceMappingURL=link-list.styles.js.map

package/lib/components/link-list/link-list.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-list.styles.js","sourceRoot":"","sources":["../../../components/link-list/link-list.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,69GAA69G,CAAC;AACh/G,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-link-list{font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);display:flex;flex-direction:column;padding:0;margin-top:-1rem;list-style:none}.cre8-c-link-list ::slotted(cre8-link-list-item){margin-top:1rem}.cre8-c-link-list--secondary{--cre8-link-list-item-active-text-color: var(--cre8-color-content-default);color:var(--cre8-color-content-subtle)}.cre8-c-link-list--inverted{--cre8-link-list-link-color: var(--cre8-color-content-knockout)}.cre8-c-link-list--display{color:var(--cre8-color-content-strong)}.cre8-c-link-list--condensed{margin-top:-0.625rem}.cre8-c-link-list--condensed ::slotted(cre8-link-list-item){margin-top:0.625rem}.cre8-c-link-list--sm{font-family:var(--cre8-typography-body-small-font-family);font-size:var(--cre8-typography-body-small-font-size);font-weight:var(--cre8-typography-body-small-font-weight);line-height:var(--cre8-typography-body-small-line-height);text-decoration:var(--cre8-typography-body-small-text-decoration);text-transform:var(--cre8-typography-body-small-text-transform)}.cre8-c-link-list--horizontal{flex-direction:row;flex-wrap:wrap;margin:-0.5rem 0 0 -1rem}.cre8-c-link-list--horizontal ::slotted(cre8-link-list-item){margin-top:0.5rem;margin-left:1rem}@media all and (max-width: 768px){.cre8-c-link-list--responsive{flex-direction:row;flex-wrap:wrap;margin:-0.5rem 0 0 -1rem}.cre8-c-link-list--responsive ::slotted(cre8-link-list-item){margin-top:0.5rem;margin-left:1rem}}`;\nexport default styles;\n"]}