@tmorrow/cre8-wc 1.0.26 → 1.1.2

package/lib/components/list/list.js

@@ -1,83 +1,33 @@
-import { css as n, html as p } from "lit";
-import { property as a } from "lit/decorators.js";
-import { Cre8Element as m } from "../cre8-element.js";
-const b = n`@import '../../design-tokens/core/scss/theming/component';
-
-// #LIST
-
-/**
- * 1) Generic stacked list that allows for styling of borders in between items
- */
-.cre8-c-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  margin-bottom: calc(8px * 2);
-}
-
-/**
- * Slotted list item compponent
- * TODO: Add tier 2 variable that is used for light borders for cards, table rows, etc.
- */
-::slotted(cre8-list-item) {
-  display: block;
-  padding-top: calc(8px * 2);
-  padding-bottom: calc(8px * 2);
-  border-bottom: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-subtle);
-
-  /**
-  * List item with bare list
-  * 1) Remove the border between items
-  */
-  .cre8-c-list--bare & {
-    border-bottom: 0; /* 1 */
-  }
-
-  /**
-  * List item with condensed list
-  * 1) Reduce padding between items compared to the default
-  */
-  .cre8-c-list--condensed & {
-    padding-top: calc(8px * 1);
-    padding-bottom: calc(8px * 1);
-  }
-
-  /**
-  * List item with padded list
-  * 1) Increase padding between items compared to the default
-  */
-  .cre8-c-list--padded & {
-    padding-top: calc(8px * 4);
-    padding-bottom: calc(8px * 4);
-  }
-}
-`;
-var f = Object.defineProperty, l = (i, s, d, g) => {
-  for (var e = void 0, r = i.length - 1, c; r >= 0; r--)
-    (c = i[r]) && (e = c(s, d, e) || e);
-  return e && f(s, d, e), e;
+import { css as m, html as p } from "lit";
+import { property as o } from "lit/decorators.js";
+import { Cre8Element as c } from "../cre8-element.js";
+const h = 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-list{list-style:none;padding:0;margin:0;margin-bottom:1rem}::slotted(cre8-list-item){display:block;padding-top:1rem;padding-bottom:1rem;border-bottom:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-subtle)}.cre8-c-list--bare ::slotted(cre8-list-item){border-bottom:0}.cre8-c-list--condensed ::slotted(cre8-list-item){padding-top:0.5rem;padding-bottom:0.5rem}.cre8-c-list--padded ::slotted(cre8-list-item){padding-top:2rem;padding-bottom:2rem}`;
+var f = Object.defineProperty, n = (a, r, d, g) => {
+  for (var e = void 0, i = a.length - 1, l; i >= 0; i--)
+    (l = a[i]) && (e = l(r, d, e) || e);
+  return e && f(r, d, e), e;
 };
-const o = class o extends m {
+const s = class s extends c {
   render() {
-    const s = this.componentClassNames("cre8-c-list", {
+    const r = this.componentClassNames("cre8-c-list", {
       "cre8-c-list--bare": this.variant === "bare",
       "cre8-c-list--padded": this.spacing === "padded",
       "cre8-c-list--condensed": this.spacing === "condensed"
     });
     return p`
-      <ul class="${s}">
+      <ul class="${r}">
         <slot></slot>
       </ul>
     `;
   }
 };
-o.styles = [b];
-let t = o;
-l([
-  a()
+s.styles = [h];
+let t = s;
+n([
+  o()
 ], t.prototype, "variant");
-l([
-  a()
+n([
+  o()
 ], t.prototype, "spacing");
 customElements.get("cre8-list") === void 0 && customElements.define("cre8-list", t);
 export {

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

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

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

@@ -1,29 +1,24 @@
-import { css as i, html as o } from "lit";
-import { Cre8Element as n } from "../cre8-element.js";
-const c = i`@import '../../design-tokens/core/scss/theming/component';
-
-/**
- * 1) List item within the list component
- */
-`, e = class e extends n {
+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}`, t = class t extends a {
   // Set the role before rendering for better accessibility
   // Because we're settting this role, we don't wrap the slot in an <li>
   connectedCallback() {
     this.setAttribute("role", "listitem"), super.connectedCallback();
   }
   render() {
-    const s = this.componentClassNames("cre8-c-list__item", {});
-    return o`
-        <div class="${s}">
+    const i = this.componentClassNames("cre8-c-list__item", {});
+    return s`
+        <div class="${i}">
           <slot></slot>
         </div>
       `;
   }
 };
-e.styles = [c];
-let t = e;
-customElements.get("cre8-list-item") === void 0 && customElements.define("cre8-list-item", t);
+t.styles = [d];
+let e = t;
+customElements.get("cre8-list-item") === void 0 && customElements.define("cre8-list-item", e);
 export {
-  t as Cre8ListItem,
-  t as default
+  e as Cre8ListItem,
+  e as default
 };

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

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

package/lib/components/loading-spinner/loading-spinner.js

@@ -1,170 +1,26 @@
-import { css as d, html as n, nothing as m } from "lit";
+import { css as d, html as n, nothing as h } from "lit";
 import { property as i } from "lit/decorators.js";
-import { Cre8Element as h } from "../cre8-element.js";
-const v = d`@import '../../design-tokens/core/scss/theming/component';
-
-/* ------------------------------------ *\
-#SPINNER
-\* ------------------------------------ */
-
-@keyframes loading {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes spinner-circle-animation {
-  0%,
-  25% {
-    stroke-dashoffset: 280;
-    transform: rotate(0);
-  }
-
-  50%,
-  75% {
-    stroke-dashoffset: 75;
-    transform: rotate(45deg);
-  }
-
-  100% {
-    stroke-dashoffset: 280;
-    transform: rotate(360deg);
-  }
-}
-
-:host {
-  display: inline-block;
-  --spinner-stroke-dasharray: 282.743px;
-  --spinner-large-stroke-width: 10;
-  --spinner-small-stroke-width: 14;
-  --spinner-large-width: 4.5rem;
-  --spinner-small-width: 1.5rem;
-  @include cre8-typography-label-small();
-}
-
-.cre8-c-spinner,
-.cre8-c-spinner--large {
-  --spinner-height: var(--spinner-large-width);
-  --spinner-width: var(--spinner-large-width);
-  --icon-color: var(--cre8-color-content-brand);
-
-  .cre8-c-spinner__icon {
-    display: block;
-  }
-
-  .cre8-c-spinner__label {
-    display: block;
-    margin-top: var(--cre8-spacing-8);
-  }
-}
-
-.cre8-c-spinner--small {
-  --spinner-height: var(--spinner-small-width);
-  --spinner-width: var(--spinner-small-width);
-  --icon-color: var(--cre8-color-content-brand);
-  display: flex;
-  align-items: center;
-  .cre8-c-spinner__label {
-    display: inline-block;
-    margin-left: var(--cre8-spacing-8);
-    margin-top: 0;
-    vertical-align: 0.35rem;
-  }
-}
-
-.cre8-c-spinner--inverse {
-  --icon-color: var(--cre8-color-content-brand-knockout);
-  --label-color: var(--cre8-color-content-brand-knockout); // --cre8-color-content-default-knockout
-}
-
-.cre8-c-spinner--secondary.cre8-c-spinner--inverse.cre8-c-spinner--neutral {
-  --icon-color: var(--cre8-color-button-secondary-neutral-inverse-content-active);
-  --label-color: var(--cre8-color-button-secondary-neutral-inverse-content-active); // --cre8-color-content-default-knockout
-}
-
-.cre8-c-spinner--neutral {
-  --icon-color: var(--cre8-color-button-secondary-neutral-content-active);
-}
-
-.cre8-c-spinner--primary.cre8-c-spinner--inverse {
-  --icon-color: var(--cre8-color-button-primary-inverse-content-active);
-}
-
-.cre8-c-spinner--secondary.cre8-c-spinner--inverse {
-  --icon-color: var(--cre8-color-button-secondary-inverse-content-active);
-}
-
-.cre8-c-spinner--tertiary.cre8-c-spinner--inverse {
-  --icon-color: var(--cre8-color-button-tertiary-inverse-content-active);
-}
-
-.cre8-c-spinner__label {
-  color: var(--label-color, var(--cre8-color-content-default));
-}
-
-.cre8-c-spinner__hidden-label {
-  display: none;
-}
-
-.cre8-c-spinner__icon {
-  height: var(--spinner-height, 1em);
-  width: var(--spinner-width, 1em);
-
-  circle {
-    fill: transparent;
-    stroke: var(--icon-color, inherit);
-    stroke-dasharray: var(--spinner-stroke-dasharray);
-    stroke-linecap: round;
-    stroke-width: var(--spinner-large-stroke-width);
-    transform-origin: 50% 50%;
-  }
-}
-
-.cre8-c-spinner__icon-small {
-  circle {
-    stroke-width: var(--spinner-small-stroke-width);
-  }
-}
-
-.cre8-c-spinner--indeterminate .cre8-c-spinner__icon {
-  animation: loading 2s linear 0s infinite;
-
-  circle {
-    animation-duration: 1.4s;
-    animation-iteration-count: infinite;
-    animation-name: spinner-circle-animation;
-    animation-timing-function: ease-in-out;
-  }
-}
-
-.cre8-c-spinner--determinate .cre8-c-spinner__icon {
-  overflow: hidden;
-  transform: rotate(-90deg);
-  transform-origin: center center;
-}
-`;
-var u = Object.defineProperty, t = (l, r, c, g) => {
-  for (var s = void 0, a = l.length - 1, p; a >= 0; a--)
-    (p = l[a]) && (s = p(r, c, s) || s);
-  return s && u(r, c, s), s;
+import { Cre8Element as m } from "../cre8-element.js";
+const g = 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}@keyframes loading{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes spinner-circle-animation{0%,25%{stroke-dashoffset:280;transform:rotate(0)}50%,75%{stroke-dashoffset:75;transform:rotate(45deg)}100%{stroke-dashoffset:280;transform:rotate(360deg)}}:host{display:inline-block;--spinner-stroke-dasharray: 282.743px;--spinner-large-stroke-width: 10;--spinner-small-stroke-width: 14;--spinner-large-width: 4.5rem;--spinner-small-width: 1.5rem;font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform)}.cre8-c-spinner,.cre8-c-spinner--large{--spinner-height: var(--spinner-large-width);--spinner-width: var(--spinner-large-width);--icon-color: var(--cre8-color-content-brand)}.cre8-c-spinner .cre8-c-spinner__icon,.cre8-c-spinner--large .cre8-c-spinner__icon{display:block}.cre8-c-spinner .cre8-c-spinner__label,.cre8-c-spinner--large .cre8-c-spinner__label{display:block;margin-top:var(--cre8-spacing-8)}.cre8-c-spinner--small{--spinner-height: var(--spinner-small-width);--spinner-width: var(--spinner-small-width);--icon-color: var(--cre8-color-content-brand);display:flex;align-items:center}.cre8-c-spinner--small .cre8-c-spinner__label{display:inline-block;margin-left:var(--cre8-spacing-8);margin-top:0;vertical-align:.35rem}.cre8-c-spinner--inverse{--icon-color: var(--cre8-color-content-brand-knockout);--label-color: var(--cre8-color-content-brand-knockout)}.cre8-c-spinner--secondary.cre8-c-spinner--inverse.cre8-c-spinner--neutral{--icon-color: var(--cre8-color-button-secondary-neutral-inverse-content-active);--label-color: var(--cre8-color-button-secondary-neutral-inverse-content-active)}.cre8-c-spinner--neutral{--icon-color: var(--cre8-color-button-secondary-neutral-content-active)}.cre8-c-spinner--primary.cre8-c-spinner--inverse{--icon-color: var(--cre8-color-button-primary-inverse-content-active)}.cre8-c-spinner--secondary.cre8-c-spinner--inverse{--icon-color: var(--cre8-color-button-secondary-inverse-content-active)}.cre8-c-spinner--tertiary.cre8-c-spinner--inverse{--icon-color: var(--cre8-color-button-tertiary-inverse-content-active)}.cre8-c-spinner__label{color:var(--label-color, var(--cre8-color-content-default))}.cre8-c-spinner__hidden-label{display:none}.cre8-c-spinner__icon{height:var(--spinner-height, 1em);width:var(--spinner-width, 1em)}.cre8-c-spinner__icon circle{fill:rgba(0,0,0,0);stroke:var(--icon-color, inherit);stroke-dasharray:var(--spinner-stroke-dasharray);stroke-linecap:round;stroke-width:var(--spinner-large-stroke-width);transform-origin:50% 50%}.cre8-c-spinner__icon-small circle{stroke-width:var(--spinner-small-stroke-width)}.cre8-c-spinner--indeterminate .cre8-c-spinner__icon{animation:loading 2s linear 0s infinite}.cre8-c-spinner--indeterminate .cre8-c-spinner__icon circle{animation-duration:1.4s;animation-iteration-count:infinite;animation-name:spinner-circle-animation;animation-timing-function:ease-in-out}.cre8-c-spinner--determinate .cre8-c-spinner__icon{overflow:hidden;transform:rotate(-90deg);transform-origin:center center}`;
+var f = Object.defineProperty, t = (l, r, s, v) => {
+  for (var a = void 0, c = l.length - 1, p; c >= 0; c--)
+    (p = l[c]) && (a = p(r, s, a) || a);
+  return a && f(r, s, a), a;
 };
-const o = class o extends h {
+const o = class o extends m {
   constructor() {
     super(), this.progress = 0, this.size = "large";
     const r = Math.floor(Math.random() * 9e5) + 1e5;
     this.labelId = `cre8-spinner-${r}`;
   }
   renderDeterminateSpinner() {
-    const r = Math.max(Math.min(100, this.progress === 0 ? this.progress = 1 : this.progress), 0), c = 2 * 3.1415926 * 45 - r / 100 * (2 * 3.1415926 * 45);
+    const r = Math.max(Math.min(100, this.progress === 0 ? this.progress = 1 : this.progress), 0), s = 2 * 3.1415926 * 45 - r / 100 * (2 * 3.1415926 * 45);
     return n` ${this.size === "small" ? n`
           <svg class="cre8-c-spinner__icon cre8-c-spinner__icon-small" aria-hidden="true" viewBox="0 0 100 100">
-            <circle cx="50%" cy="50%" r="43" stroke-dashoffset="${c}"></circle>
+            <circle cx="50%" cy="50%" r="43" stroke-dashoffset="${s}"></circle>
           </svg>
         ` : n` <svg class="cre8-c-spinner__icon" aria-hidden="true" viewBox="0 0 100 100">
-          <circle cx="50%" cy="50%" r="45" stroke-dashoffset="${c}"></circle>
+          <circle cx="50%" cy="50%" r="45" stroke-dashoffset="${s}"></circle>
         </svg>`}`;
   }
   renderInDeterminateSpinner() {
@@ -195,7 +51,7 @@ const o = class o extends h {
         aria-labelledby="${this.labelId}"
         aria-valuemin="0"
         aria-valuemax="100"
-        aria-valuenow="${this.determinate ? this.progress : m}"
+        aria-valuenow="${this.determinate ? this.progress : h}"
         part="base"
       >
         ${this.determinate ? this.renderDeterminateSpinner() : this.renderInDeterminateSpinner()}
@@ -210,7 +66,7 @@ const o = class o extends h {
     `;
   }
 };
-o.styles = v;
+o.styles = g;
 let e = o;
 t([
   i({ type: Boolean, reflect: !0 })

package/lib/components/loading-spinner/loading-spinner.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loading-spinner.styles.d.ts","sourceRoot":"","sources":["../../../components/loading-spinner/loading-spinner.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAgJX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"loading-spinner.styles.d.ts","sourceRoot":"","sources":["../../../components/loading-spinner/loading-spinner.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAogK,CAAC;AACjhK,eAAe,MAAM,CAAC"}

package/lib/components/logo/logo.js

@@ -1,39 +1,29 @@
-import { css as m, html as i } from "lit";
-import { property as a } from "lit/decorators.js";
-import { Cre8Element as f } from "../cre8-element.js";
-const p = m`@import '../../design-tokens/core/scss/theming/component';
-
-// #LOGO
-
-/**
- * 1) Brand's logo
- */
-.cre8-c-logo {
-  display: flex;
-}
-`;
-var d = Object.defineProperty, h = (n, s, l, g) => {
-  for (var e = void 0, o = n.length - 1, c; o >= 0; o--)
-    (c = n[o]) && (e = c(s, l, e) || e);
-  return e && d(s, l, e), e;
+import { css as n, html as h } from "lit";
+import { property as o } from "lit/decorators.js";
+import { Cre8Element as m } from "../cre8-element.js";
+const p = n`*,::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-logo{display:flex}`;
+var f = Object.defineProperty, c = (a, t, d, x) => {
+  for (var e = void 0, i = a.length - 1, l; i >= 0; i--)
+    (l = a[i]) && (e = l(t, d, e) || e);
+  return e && f(t, d, e), e;
 };
-const r = class r extends f {
+const s = class s extends m {
   render() {
-    const s = this.componentClassNames("cre8-c-logo", {});
-    return i`
-      <a href="${this.href}" class="${s}">
+    const t = this.componentClassNames("cre8-c-logo", {});
+    return h`
+      <a href="${this.href}" class="${t}">
        
       </a>
     `;
   }
 };
-r.styles = [p];
-let t = r;
-h([
-  a()
-], t.prototype, "href");
-customElements.get("cre8-logo") === void 0 && customElements.define("cre8-logo", t);
+s.styles = [p];
+let r = s;
+c([
+  o()
+], r.prototype, "href");
+customElements.get("cre8-logo") === void 0 && customElements.define("cre8-logo", r);
 export {
-  t as Cre8Logo,
-  t as default
+  r as Cre8Logo,
+  r as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"logo.styles.d.ts","sourceRoot":"","sources":["../../../components/logo/logo.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAUX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"logo.styles.d.ts","sourceRoot":"","sources":["../../../components/logo/logo.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA0yD,CAAC;AACvzD,eAAe,MAAM,CAAC"}

package/lib/components/main/main.js

@@ -1,51 +1,27 @@
-import { css as i, html as m } from "lit";
-import { property as c } from "lit/decorators.js";
-import { Cre8Element as f } from "../cre8-element.js";
-const h = i`@import '../../design-tokens/core/scss/theming/component';
-
-// #MAIN
-
-/**
- * 1) Container for the main content on the page between the header and footer
- * 2) Set to flex: 1 0 auto for a footer that gets pushed all the way to the bottom
- * for pages that don't have a lot of content
- */
-:host {
-  display: flex;
-  flex-direction: column;
-  flex: 1 0 auto; /* 2 */
-}
-
-/**
- * Full height main container
- */
-.cre8-c-main--full-height {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  height: 100%;
-}
-`;
-var p = Object.defineProperty, u = (s, t, r, d) => {
-  for (var e = void 0, n = s.length - 1, a; n >= 0; n--)
-    (a = s[n]) && (e = a(t, r, e) || e);
-  return e && p(t, r, e), e;
+import { css as n, html as h } from "lit";
+import { property as m } from "lit/decorators.js";
+import { Cre8Element as o } from "../cre8-element.js";
+const p = n`*,::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:flex;flex-direction:column;flex:1 0 auto}.cre8-c-main--full-height{display:flex;flex-direction:column;flex:1;height:100%}`;
+var f = Object.defineProperty, c = (a, t, l, x) => {
+  for (var e = void 0, r = a.length - 1, d; r >= 0; r--)
+    (d = a[r]) && (e = d(t, l, e) || e);
+  return e && f(t, l, e), e;
 };
-const l = class l extends f {
+const s = class s extends o {
   render() {
     const t = this.componentClassNames("cre8-c-main", {
       "cre8-c-main--full-height": this.fullHeight === !0
     });
-    return m`<main class=${t}><slot></slot></main>`;
+    return h`<main class=${t}><slot></slot></main>`;
   }
 };
-l.styles = [h];
-let o = l;
-u([
-  c({ type: Boolean, reflect: !0 })
-], o.prototype, "fullHeight");
-customElements.get("cre8-main") === void 0 && customElements.define("cre8-main", o);
+s.styles = [p];
+let i = s;
+c([
+  m({ type: Boolean, reflect: !0 })
+], i.prototype, "fullHeight");
+customElements.get("cre8-main") === void 0 && customElements.define("cre8-main", i);
 export {
-  o as Cre8Main,
-  o as default
+  i as Cre8Main,
+  i as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"main.styles.d.ts","sourceRoot":"","sources":["../../../components/main/main.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAwBX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"main.styles.d.ts","sourceRoot":"","sources":["../../../components/main/main.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAu5D,CAAC;AACp6D,eAAe,MAAM,CAAC"}

package/lib/components/modal/modal.d.ts

@@ -2,6 +2,7 @@ import { PropertyValues } from 'lit';
 import { Cre8Element } from '../cre8-element';
 import '../icon/icon.js';
 import '@a11y/focus-trap';
+import '../../icons/System/Regular/Close.svg?raw';
 /**
  * Modal component should be used in all modal situations.
  * It is natuarally composable and can even have a custom header and remove the close button.

package/lib/components/modal/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../components/modal/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAU,MAAM,KAAK,CAAC;AAO7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,iBAAiB,CAAC;AACzB,OAAO,kBAAkB,CAAC;AAG1B;;;;;;;;;GASG;AACH,qBAAa,SAAU,SAAQ,WAAW;IACtC,MAAM,CAAC,MAAM,4BAAY;IAE7B;;OAEG;IAEC,YAAY,EAAE,cAAc,CAAC;IAEjC;;OAEG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;;;;;;;;OAYG;IAEC,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAE/D;;OAEG;IAEC,iBAAiB,EAAE,MAAM,CAAC;IAE9B;;OAEG;IAEC,cAAc,CAAC,EAAE,OAAO,CAAC;IAE7B;;OAEG;IAEC,eAAe,EAAE,MAAM,CAAW;IAEtC;;OAEG;IAEC,eAAe,EAAE,MAAM,CAAW;IAEtC;;OAEG;IAEC,SAAS,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,aAAa,CAAC,CAAC,EAAE,aAAa;IAM9B;;;OAGG;IACH,gBAAgB;IAUhB;;;OAGG;IAEH,oBAAoB,CAAC,CAAC,EAAE,KAAK;IAO7B;;;;OAIG;IAEH,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAsB/C,oBAAoB,GAAI,QAAQ,MAAM,0CAepC;IAEF;;;OAGG;IACH,oBAAoB;IAMpB,MAAM;CA2CL;AAMD,MAAM,WAAW,eAAgB,SAAQ,WAAW,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAC,CAAC;IACrE,IAAI,EAAE,aAAa,CAAC;IACpB,aAAa,EAAE,SAAS,CAAC;CAC5B;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,YAAY,EAAE,SAAS,CAAC;KAC3B;CACJ"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../components/modal/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAS,MAAM,KAAK,CAAC;AAO5C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,iBAAiB,CAAC;AACzB,OAAO,kBAAkB,CAAC;AAE1B,OAAO,0CAA0C,CAAC;AAElD;;;;;;;;;GASG;AACH,qBAAa,SAAU,SAAQ,WAAW;IACtC,MAAM,CAAC,MAAM,4BAAY;IAEzB;;OAEG;IAEH,YAAY,EAAE,cAAc,CAAC;IAE7B;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;;;;;;OAYG;IAEH,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAE3D;;OAEG;IAEH,iBAAiB,EAAE,MAAM,CAAC;IAE1B;;OAEG;IAEH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;OAEG;IAEH,eAAe,EAAE,MAAM,CAAW;IAElC;;OAEG;IAEH,eAAe,EAAE,MAAM,CAAW;IAElC;;OAEG;IAEH,SAAS,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,aAAa,CAAC,CAAC,EAAE,aAAa;IAM9B;;;OAGG;IACH,gBAAgB;IAUhB;;;OAGG;IAEH,oBAAoB,CAAC,CAAC,EAAE,KAAK;IAO7B;;;;OAIG;IAEH,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAsB/C,oBAAoB,GAAI,QAAQ,MAAM,0CAepC;IAEF;;;OAGG;IACH,oBAAoB;IAMpB,MAAM;CA2CT;AAMD,MAAM,WAAW,eAAgB,SAAQ,WAAW,CAAC;IAAE,QAAQ,EAAE,OAAO,CAAA;CAAE,CAAC;IACvE,IAAI,EAAE,aAAa,CAAC;IACpB,aAAa,EAAE,SAAS,CAAC;CAC5B;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,YAAY,EAAE,SAAS,CAAC;KAC3B;CACJ"}