@tmorrow/cre8-wc 1.0.26 → 1.1.1

package/lib/components/link/link.js

@@ -1,259 +1,64 @@
-import { css as k, html as n, nothing as i } from "lit";
+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 _ } from "../cre8-element.js";
-const h = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+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 = k`@import '../../design-tokens/core/scss/theming/component';
-
-:host {
-  display: inline-flex;
-}
-
-.cre8-c-link {
-  display: inline-flex;
-  text-decoration: none;
-  height: 100%;
-  color: var(--cre8-color-content-link);
-
-  &:hover {
-    .cre8-c-link__text,
-    .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);
-    }
-  }
-
-  &:focus {
-    outline: none;
-
-    .cre8-c-link__text,
-    .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__cta-wrapper {
-      color: var(--cre8-color-content-link-focus);
-      @include focus;
-      background-color: var(--cre8-color-button-primary-bg-hover); // TODO: CTA background color token not exists
-      border: var(--cre8-border-width-focus) var(--cre8-border-style-default) var(--color-border-active-outline);
-    }
-  }
-
-  &:active {
-    .cre8-c-link__text,
-    .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 {
-  @include cre8-typography-body-default-link();
-  color: var(--cre8-color-content-link);
-  display: inline-flex;
-
-  .cre8-c-link--sm & {
-    @include cre8-typography-body-small-link();
-  }
-
-  .cre8-c-link--lg & {
-    @include cre8-typography-body-large-link();
-  }
-}
-
-.cre8-c-link__text {
-  .cre8-c-link__no-underline & {
-    text-decoration: none;
-  }
-}
-
-.cre8-c-link__icon-wrapper {
-  display: inline-flex;
-}
-
-.cre8-c-link__icon {
-  display: inline-flex;
-  height: calc(8px * 3);
-  width: calc(8px * 3);
-
-  .cre8-c-link--sm & {
-    --cre8-icon-height: var(--cre8-icon-size-small);
-    --cre8-icon-width: var(--cre8-icon-size-small);
-    height: calc(8px * 2.75);
-    width: calc(8px * 2.75);
-  }
-
-  .cre8-c-link--lg & {
-    --cre8-icon-height: var(--cre8-icon-size-large);
-    --cre8-icon-width: var(--cre8-icon-size-large);
-    height: calc(8px * 3.25);
-    width: calc(8px * 3.25);
-  }
-}
-
-.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); // TODO: token not defined
-  display: inline-flex;
-  margin-left: calc(8px * 1);
-  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);
-
-  svg {
-    height: calc(8px * 2);
-    width: calc(8px * 2);
-  }
-}
-
-.cre8-c-link__icon.before {
-  padding-right: calc(8px * 1);
-}
-
-.cre8-c-link__icon.after {
-  padding-left: calc(8px * 1);
-}
-
-::slotted([slot='badge']) {
-  padding-left: calc(8px * 1);
-}
-
-.cre8-c-link--inverted {
-  .cre8-c-link__text {
-    color: var(--cre8-color-content-inverse-link);
-  }
-
-  .cre8-c-link__icon {
-    color: var(--cre8-color-content-inverse-link);;
-  }
-
-  .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);
-  }
-  
-  &:hover {
-    .cre8-c-link__text,
-    .cre8-c-link__text-area {
-      color: var(--cre8-color-content-inverse-link-hover);
-    }
-
-    .cre8-c-link__icon {
-      fill: var(--cre8-color-content-inverse-link-hover);
-    }
-  }
-
-  &:active {
-    .cre8-c-link__text,
-    .cre8-c-link__text-area {
-      color: var(--cre8-color-content-inverse-link-active);
-    }
-
-    .cre8-c-link__icon {
-      fill: var(--cre8-color-content-inverse-link-active);
-    }
-  }
-
-  &:focus {
-    outline: none;
-    .cre8-c-link__icon {
-      background-color:  var(--cre8-color-bg-inverse-active);
-      fill: var(--cre8-color-content-inverse-link-focus);
-    }
-
-    .cre8-c-link__text,
-    .cre8-c-link__text-area {
-      background-color:  var(--cre8-color-bg-inverse-active);
-      color: var(--cre8-color-content-inverse-link-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); //TODO: token not exists cre8-color-border-inverse-active-outline
-      outline-offset: calc(8px * 0.25);
-    }
-  }
-}
-
-cre8-icon {
-  display: flex;
-  align-items: center;
-}
-`;
-var f = Object.defineProperty, c = (d, t, p, u) => {
-  for (var o = void 0, a = d.length - 1, v; a >= 0; a--)
-    (v = d[a]) && (o = v(t, p, o) || o);
-  return o && f(t, p, o), o;
+`, 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;
 };
-const s = class s extends _ {
+const s = class s extends k {
   constructor() {
     super(...arguments), this.iconRotateDegree = 0, this.iconPosition = void 0, this.ctaIcon = "arrow-forward";
   }
   generateIcon() {
-    return this.iconName ? n`
+    return this.iconName ? c`
           <div class="cre8-c-link__icon-wrapper">
             <cre8-icon-legacy
               class="cre8-c-link__icon ${this.iconPosition}"
               aria-hidden="true"
               name="${l(this.iconName)}">
             </cre8-icon-legacy>
-          </div>` : this.svg ? n`
+          </div>` : this.svg ? c`
           <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>` : i;
+          </div>` : n;
   }
   render() {
-    const t = this.componentClassNames("cre8-c-link", {
+    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 n`
+    return c`
       <a
-        class="${t}"
+        class="${o}"
         href="${l(this.href)}"
         rel="${l(this.rel)}"
         target="${l(this.target)}"
       >
         <div class="cre8-c-link__text-area">
-          ${this.iconPosition === "before" ? n`${this.generateIcon()}` : i}
+          ${this.iconPosition === "before" ? c`${this.generateIcon()}` : n}
           <span class="cre8-c-link__text">
             <slot></slot>
           </span>
-          ${this.iconPosition === "after" ? n`${this.generateIcon()}` : i}
+          ${this.iconPosition === "after" ? c`${this.generateIcon()}` : n}
         </div>
         <div class="cre8-c-link__variation">
           <slot name="badge"></slot>
-          ${this.ctaLink ? n`<div class="cre8-c-link__cta-wrapper">
-                <cre8-icon class="cre8-c-link__action" svg='${h}' 
+          ${this.ctaLink ? c`<div class="cre8-c-link__cta-wrapper">
+                <cre8-icon class="cre8-c-link__action" svg='${f}' 
                 rotate="180" aria-hidden="true"></cre8-icon>
-              </div>` : i}
+              </div>` : n}
         </div>
       </a>
     `;
@@ -261,43 +66,43 @@ const s = class s extends _ {
 };
 s.styles = [g];
 let e = s;
-c([
+t([
   r()
 ], e.prototype, "href");
-c([
+t([
   r()
 ], e.prototype, "rel");
-c([
+t([
   r()
 ], e.prototype, "target");
-c([
+t([
   r()
 ], e.prototype, "iconName");
-c([
+t([
   r()
 ], e.prototype, "svg");
-c([
+t([
   r({ type: Number })
 ], e.prototype, "iconRotateDegree");
-c([
+t([
   r()
 ], e.prototype, "iconFlipDirection");
-c([
+t([
   r()
 ], e.prototype, "iconPosition");
-c([
+t([
   r()
 ], e.prototype, "ctaIcon");
-c([
+t([
   r({ type: Boolean })
 ], e.prototype, "ctaLink");
-c([
+t([
   r({ type: Boolean })
 ], e.prototype, "noUnderline");
-c([
+t([
   r()
 ], e.prototype, "size");
-c([
+t([
   r({ type: Boolean })
 ], e.prototype, "inverted");
 customElements.get("cre8-link") === void 0 && customElements.define("cre8-link", e);

package/lib/components/link/link.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"link.styles.d.ts","sourceRoot":"","sources":["../../../components/link/link.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAmMX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"link.styles.d.ts","sourceRoot":"","sources":["../../../components/link/link.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAk9N,CAAC;AAC/9N,eAAe,MAAM,CAAC"}

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

@@ -1,121 +1,15 @@
-import { css as p, html as d } from "lit";
-import { property as i } from "lit/decorators.js";
+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 k = p`@import '../../design-tokens/core/scss/theming/component';
-/**
- * A list of hyperlinks
- * 1) Override preset line-height value to condense link text. Note: this should
- *    be done sparingly to control wrapping text for specific scenarios
- */
-.cre8-c-link-list {
-  @include cre8-typography-body-default;
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  margin-top: calc(8px * -2);
-  list-style: none;
-
-  /**
-  * Slotted link list item
-  */
-  ::slotted(cre8-link-list-item) {
-    margin-top: calc(8px * 2);
-  }
-}
-
-/**
- * A secondary link list
- * 1) Uses a more subtle treatment than the default link list
- * 2) TODO: Create a tier 2 token for secondary link colors
- */
-.cre8-c-link-list--secondary {
-  --cre8-link-list-item-active-text-color: var(--cre8-color-content-default); /* 2 */
-  color: var(--cre8-color-content-subtle);
-}
-
-/**
- * Inverted link list
- * 1) Link list on a dark background
- */
-.cre8-c-link-list--inverted {
-  --cre8-link-list-link-color: var(--cre8-color-content-knockout);
-}
-
-/**
-* Display link list
-*/
-.cre8-c-link-list--display {
-  color: var(--cre8-color-content-strong);
-}
-
-/**
- * Condensed link list
- * 1) Removes spacing between link list items
- */
-.cre8-c-link-list--condensed {
-  margin-top: calc(8px * -1.25);
-
-  /**
-  * Slotted link list item within condensed link list
-  */
-  ::slotted(cre8-link-list-item) {
-    margin-top: calc(8px * 1.25);
-  }
-}
-
-/**
- * Small link list
- */
-.cre8-c-link-list--sm {
-  @include cre8-typography-body-small;
-}
-
-/**
- * Horizontal behavior
- * 1) Displays as a horizontal list
- */
-.cre8-c-link-list--horizontal {
-  flex-direction: row;
-  flex-wrap: wrap;
-  margin: calc(8px * -1) 0 0 calc(8px * -2);
-
-  /**
-  * Slotted link list item within horizontal link list
-  */
-  ::slotted(cre8-link-list-item) {
-    margin-top: calc(8px * 1);
-    margin-left: calc(8px * 2);
-  }
-}
-
-/**
- * Responsive behavior
- * 1) Displays as a horizontal list on small screens and moves to a vertical
- */
-.cre8-c-link-list--responsive {
-  @media all and (max-width:$cre8-breakpoint-md) {
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin: calc(8px * -1) 0 0 calc(8px * -2);
-
-    /**
-    * Slotted link list item within responsive link list
-    */
-    ::slotted(cre8-link-list-item) {
-      margin-top: calc(8px * 1);
-      margin-left: calc(8px * 2);
-    }
-  }
-}
-`;
-var h = Object.defineProperty, l = (o, n, c, v) => {
-  for (var t = void 0, s = o.length - 1, a; s >= 0; s--)
-    (a = o[s]) && (t = a(n, c, t) || t);
-  return t && h(n, c, t), t;
+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;
 };
-const r = class r extends m {
+const o = class o extends m {
   render() {
-    const n = this.componentClassNames("cre8-c-link-list", {
+    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,
@@ -124,29 +18,29 @@ const r = class r extends m {
       "cre8-c-link-list--condensed": this.spacing === "condensed",
       "cre8-c-link-list--sm": this.size === "sm"
     });
-    return d`
-      <ul class="${n}">
+    return p`
+      <ul class="${a}">
         <slot></slot>
       </ul>
     `;
   }
 };
-r.styles = [k];
-let e = r;
-l([
-  i()
+o.styles = [h];
+let e = o;
+i([
+  r()
 ], e.prototype, "behavior");
-l([
-  i({ type: Boolean, reflect: !0 })
+i([
+  r({ type: Boolean, reflect: !0 })
 ], e.prototype, "inverted");
-l([
-  i()
+i([
+  r()
 ], e.prototype, "size");
-l([
-  i()
+i([
+  r()
 ], e.prototype, "spacing");
-l([
-  i()
+i([
+  r()
 ], e.prototype, "variant");
 customElements.get("cre8-link-list") === void 0 && customElements.define("cre8-link-list", e);
 export {

package/lib/components/link-list/link-list.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"link-list.styles.d.ts","sourceRoot":"","sources":["../../../components/link-list/link-list.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBA0GX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"link-list.styles.d.ts","sourceRoot":"","sources":["../../../components/link-list/link-list.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAm+G,CAAC;AACh/G,eAAe,MAAM,CAAC"}

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

@@ -1,89 +1,28 @@
-import { css as f, html as s } from "lit";
-import { ifDefined as k } from "lit-html/directives/if-defined.js";
-import { property as n } from "lit/decorators.js";
+import { css as m, html as l } from "lit";
+import { ifDefined as h } from "lit-html/directives/if-defined.js";
+import { property as s } from "lit/decorators.js";
 import { Cre8Element as p } from "../cre8-element.js";
-const d = f`@import '../../design-tokens/core/scss/theming/component';
-
-/**
- * 1) An individual list item with a link inside
- */
-
-/**
- * Link list link
- * 1) Set to inherit color so that the link list link. Maybe a TODO
- */
-.cre8-c-link-list__item {
-  display: flex;
-  align-items: center;
-}
-
-/**
- * Link list link
- */
-.cre8-c-link-list__link {
-  display: flex;
-  align-items: center;
-  color: var(--cre8-link-list-link-color, var(--cre8-color-content-link));
-  text-decoration: underline;
-
-  &:hover,
-  &:focus {
-    color: var(--cre8-link-list-link-hover-color, var(--cre8-color-content-link-hover));
-    text-decoration: none;
-  }
-
-  /**
-  * Link list link within active link list item
-  * 1) This custom property cascade is set at the link list level
-  * 2) TODO: Discuss how we want to handle bold variants since mixins can't get passed down
-  */
-  .cre8-c-link-list__item.cre8-is-active & {
-    color: var(--cre8-link-list-item-active-text-color);
-    font-weight: var(--cre8-font-weight-bold); /* 2 */
-  }
-}
-
-/**
- * Link list item after
- * 1) Container to place things like badges after an item
- */
-.cre8-c-link-list__item-before {
-  margin-right: calc(8px * 1);
-}
-
-/**
- * Link list item after
- * 1) Container to place things like badges after an item
- */
-.cre8-c-link-list__item-after {
-  margin-left: calc(8px * 1);
-}
-
-::slotted(cre8-icon-legacy) {
-  --cre8-icon-height: #{calc(8px * 3)};
-  --cre8-icon-width: #{calc(8px * 3)};
-}
-`;
-var h = Object.defineProperty, r = (c, i, a, v) => {
-  for (var e = void 0, l = c.length - 1, m; l >= 0; l--)
-    (m = c[l]) && (e = m(i, a, e) || e);
-  return e && h(i, a, e), e;
+const f = m`*,::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__item{display:flex;align-items:center}.cre8-c-link-list__link{display:flex;align-items:center;color:var(--cre8-link-list-link-color, var(--cre8-color-content-link));text-decoration:underline}.cre8-c-link-list__link:hover,.cre8-c-link-list__link:focus{color:var(--cre8-link-list-link-hover-color, var(--cre8-color-content-link-hover));text-decoration:none}.cre8-c-link-list__item.cre8-is-active .cre8-c-link-list__link{color:var(--cre8-link-list-item-active-text-color);font-weight:var(--cre8-font-weight-bold)}.cre8-c-link-list__item-before{margin-right:0.5rem}.cre8-c-link-list__item-after{margin-left:0.5rem}::slotted(cre8-icon-legacy){--cre8-icon-height: 1.5rem;--cre8-icon-width: 1.5rem}`;
+var x = Object.defineProperty, a = (n, i, c, k) => {
+  for (var e = void 0, r = n.length - 1, d; r >= 0; r--)
+    (d = n[r]) && (e = d(i, c, e) || e);
+  return e && x(i, c, e), e;
 };
 const o = class o extends p {
   render() {
     const i = this.componentClassNames("cre8-c-link-list__item", {
       "cre8-is-active": this.isActive === !0
     });
-    return s`
+    return l`
       <li class="${i}">
-        <a class="cre8-c-link-list__link" href="${k(this.href)}">
-          ${this.slotNotEmpty("itemBefore") && s`
+        <a class="cre8-c-link-list__link" href="${h(this.href)}">
+          ${this.slotNotEmpty("itemBefore") && l`
           <div class="cre8-c-link-list__item-before">
             <slot name="itemBefore"></slot>
           </div>`}
           <slot></slot>
         </a>
-        ${this.slotNotEmpty("itemAfter") && s`
+        ${this.slotNotEmpty("itemAfter") && l`
         <div class="cre8-c-link-list__item-after">
           <slot name="itemAfter"></slot>
         </div>`}
@@ -91,16 +30,16 @@ const o = class o extends p {
     `;
   }
 };
-o.styles = [d];
+o.styles = [f];
 let t = o;
-r([
-  n()
+a([
+  s()
 ], t.prototype, "text");
-r([
-  n({ type: Boolean, reflect: !0 })
+a([
+  s({ type: Boolean, reflect: !0 })
 ], t.prototype, "isActive");
-r([
-  n()
+a([
+  s()
 ], t.prototype, "href");
 customElements.get("cre8-link-list-item") === void 0 && customElements.define("cre8-link-list-item", t);
 export {

package/lib/components/link-list-item/link-list-item.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"link-list-item.styles.d.ts","sourceRoot":"","sources":["../../../components/link-list-item/link-list-item.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBA6DX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"link-list-item.styles.d.ts","sourceRoot":"","sources":["../../../components/link-list-item/link-list-item.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAq9E,CAAC;AACl+E,eAAe,MAAM,CAAC"}