@tmorrow/cre8-wc 1.0.26 → 1.1.1

package/lib/components/field/field.js

@@ -1,150 +1,16 @@
-import { css as f, html as l, nothing as h } from "lit";
+import { css as f, html as l, nothing as u } from "lit";
 import { ifDefined as i } from "lit-html/directives/if-defined.js";
 import { property as t, query as y } from "lit/decorators.js";
 import { nanoid as d } from "nanoid";
-import { Cre8FormElement as b } from "../cre8-form-element.js";
+import { Cre8FormElement as m } from "../cre8-form-element.js";
 import "../field-note/field-note.js";
-const v = f`
-:host {
-  display: block;
-}
-
-/**
- * Field Label
- */
-.cre8-c-field__label {
-  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);
-  display: block;
-  margin-bottom: calc(8px * 1);
-}
-
-/**
- * Field Body
- * 1) The div that contains the input and icons
- */
-.cre8-c-field__body {
-  position: relative;
-}
-
-/**
- * Field Input
- * 1) The html5 input element
- */
-.cre8-c-field__input {
-  /* Typography */
-  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);
-
-  /* Focus transparent base */
-  outline: var(--cre8-border-width-focus) solid transparent;
-  outline-offset: calc(8px * 0.25);
-
-  /* Input styles */
-  -webkit-appearance: none;
-  width: 100%;
-  border-width: var(--cre8-border-width-default);
-  border-style: solid;
-  border-color: var(--cre8-color-border-strong);
-  border-radius: var(--cre8-border-radius-default);
-  padding: calc(8px * 1.5) calc(8px * 1);
-  color: var(--cre8-color-content-default);
-  background-color: var(--cre8-color-bg-default);
-  transition: outline-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease), border-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease), background-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease), color var(--cre8-anim-fade-quick) var(--cre8-anim-ease);
-}
-
-/**
- * Hover, focus, active, and focus-visible styles for default input elements
- */
-.cre8-c-field__input:hover:not(:disabled),
-.cre8-c-field__input:focus:not(:disabled),
-.cre8-c-field__input:active:not(:disabled),
-.cre8-c-field__input:focus-visible {
-  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);
-  outline-offset: calc(8px * 0.25);
-}
-
-/**
- * Error state focus
- */
-.cre8-is-error .cre8-c-field__input:hover:not(:disabled),
-.cre8-is-error .cre8-c-field__input:focus:not(:disabled),
-.cre8-is-error .cre8-c-field__input:active:not(:disabled),
-.cre8-is-error .cre8-c-field__input:focus-visible {
-  outline-color: var(--cre8-color-border-error);
-}
-
-/**
- * Success state focus
- */
-.cre8-is-success .cre8-c-field__input:hover:not(:disabled),
-.cre8-is-success .cre8-c-field__input:focus:not(:disabled),
-.cre8-is-success .cre8-c-field__input:active:not(:disabled),
-.cre8-is-success .cre8-c-field__input:focus-visible {
-  outline-color: var(--cre8-color-border-success);
-}
-
-/**
- * Disabled styles for default input elements
- */
-.cre8-c-field__input:disabled {
-  background-color: var(--cre8-color-bg-disabled);
-  border-color: var(--cre8-color-border-disabled);
-  color: var(--cre8-color-content-disabled);
-  cursor: not-allowed;
-}
-
-/**
- * Disabled placeholder text colors
- */
-.cre8-c-field__input:disabled::placeholder {
-  color: var(--cre8-color-content-disabled);
-}
-
-/**
- * Placeholder styles for default input elements
- */
-.cre8-c-field__input::placeholder {
-  color: var(--cre8-color-content-subtle);
-}
-
-/**
- * Error state for default input elements
- */
-.cre8-is-error .cre8-c-field__input {
-  border-color: var(--cre8-color-border-error);
-}
-
-/**
- * Success state for default input elements
- */
-.cre8-is-success .cre8-c-field__input {
-  border-color: var(--cre8-color-border-success);
-}
-
-/**
- * Readonly input styles
- */
-.cre8-c-field__input:read-only {
-  background-color: var(--cre8-color-bg-disabled);
-  border-color: var(--cre8-color-border-disabled);
-  cursor: default;
-}
-`;
-var m = Object.defineProperty, r = (p, o, a, _) => {
-  for (var s = void 0, c = p.length - 1, u; c >= 0; c--)
-    (u = p[c]) && (s = u(o, a, s) || s);
-  return s && m(o, a, s), s;
+const b = f`*,::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:block}.cre8-c-field__label{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);display:block;margin-bottom:0.5rem}.cre8-c-field__body{position:relative}.cre8-c-field__input{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);outline:var(--cre8-border-width-focus) solid rgba(0,0,0,0);outline-offset:0.125rem;-webkit-appearance:none;width:100%;border-width:var(--cre8-border-width-default);border-style:solid;border-color:var(--cre8-color-border-strong);border-radius:var(--cre8-border-radius-default);padding:0.75rem 0.5rem;color:var(--cre8-color-content-default);background-color:var(--cre8-color-bg-default);transition:outline-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),border-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),background-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),color var(--cre8-anim-fade-quick) var(--cre8-anim-ease)}.cre8-c-field__input:hover:not(:disabled),.cre8-c-field__input:focus:not(:disabled),.cre8-c-field__input:active:not(:disabled),.cre8-c-field__input:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-is-error .cre8-c-field__input:hover:not(:disabled),.cre8-is-error .cre8-c-field__input:focus:not(:disabled),.cre8-is-error .cre8-c-field__input:active:not(:disabled),.cre8-is-error .cre8-c-field__input:focus-visible{outline-color:var(--cre8-color-border-error)}.cre8-is-success .cre8-c-field__input:hover:not(:disabled),.cre8-is-success .cre8-c-field__input:focus:not(:disabled),.cre8-is-success .cre8-c-field__input:active:not(:disabled),.cre8-is-success .cre8-c-field__input:focus-visible{outline-color:var(--cre8-color-border-success)}.cre8-c-field__input:disabled{background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled);color:var(--cre8-color-content-disabled);cursor:not-allowed}.cre8-c-field__input:disabled::placeholder{color:var(--cre8-color-content-disabled)}.cre8-c-field__input::placeholder{color:var(--cre8-color-content-subtle)}.cre8-is-error .cre8-c-field__input{border-color:var(--cre8-color-border-error)}.cre8-is-success .cre8-c-field__input{border-color:var(--cre8-color-border-success)}.cre8-c-field__input:read-only{background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled);cursor:default}`;
+var v = Object.defineProperty, r = (p, o, s, g) => {
+  for (var a = void 0, c = p.length - 1, h; c >= 0; c--)
+    (h = p[c]) && (a = h(o, s, a) || a);
+  return a && v(o, s, a), a;
 };
-const n = class n extends b {
+const n = class n extends m {
   constructor() {
     super(...arguments), this.type = "text", this.label = "Label", this.ariaLive = "polite", this.errorText = "Error", this.successText = "Success";
   }
@@ -178,8 +44,8 @@ const n = class n extends b {
    * 2) Set the internal form value of the input to the updated value
    */
   _handleOnInput(o) {
-    const a = o.target.value;
-    this.value = a, this._internals.setFormValue(this.value);
+    const s = o.target.value;
+    this.value = s, this._internals.setFormValue(this.value);
   }
   /**
    * Render the success or error field notes
@@ -233,13 +99,13 @@ const n = class n extends b {
         </div>
         ${this.fieldNote || this.slotNotEmpty("fieldNote") ? l`<cre8-field-note id=${this.ariaDescribedBy} class="cre8-c-field__field-note"
               ><slot name="fieldNote">${this.fieldNote}</slot></cre8-field-note
-            >` : h}
+            >` : u}
         ${this.renderSuccessErrorFieldNote()}
       </div>
     `;
   }
 };
-n.styles = [v];
+n.styles = [b];
 let e = n;
 r([
   t()

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

@@ -1 +1 @@
-{"version":3,"file":"field.styles.d.ts","sourceRoot":"","sources":["../../../components/field/field.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAsIX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"field.styles.d.ts","sourceRoot":"","sources":["../../../components/field/field.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA+qJ,CAAC;AAC5rJ,eAAe,MAAM,CAAC"}

package/lib/components/field-note/field-note.js

@@ -1,59 +1,15 @@
-import { b as f } from "../../icon-DImqxDiW.js";
-import { s as p } from "../../Error-aYunUubM.js";
-import { css as m, html as c } from "lit";
-import { property as s } from "lit/decorators.js";
-import { Cre8Element as u } from "../cre8-element.js";
-const v = m`@import '../../design-tokens/core/scss/theming/component';
-
-:host {
-  display: flex;
-}
-
-/**
- * Field Note
- * 1) Messaging associated with the form field usually located below the form field input
- */
-.cre8-c-field-note {
-  display: flex;
-  align-items: flex-start;
-  gap: calc(8px * 0.5);
-  color: var(--cre8-color-content-default);
-  margin-top: calc(8px * 0.5);
-}
-
-.cre8-field-note-icon {
-  margin-top: calc(8px * 0.5);
-  height: calc(8px * 2);
-  width: calc(8px * 2);
-}
-
-/**
- * Field Note Error State
- */
-.cre8-c-field-note.cre8-is-error {
-  color: var(--cre8-color-content-error);
-}
-
-/**
- * Field Note Success State
- */
-.cre8-c-field-note.cre8-is-success {
-  color: var(--cre8-color-content-success);
-}
-
-/**
- * Inverted field note
- */
-.cre8-c-field-note--inverted {
-  color: var(--cre8-color-content-knockout);
-}
-`;
-var h = Object.defineProperty, i = (n, t, a, g) => {
-  for (var e = void 0, o = n.length - 1, d; o >= 0; o--)
-    (d = n[o]) && (e = d(t, a, e) || e);
-  return e && h(t, a, e), e;
+import { b as h } from "../../icon-D22g8aWB.js";
+import { s as m } from "../../Error-aYunUubM.js";
+import { css as p, html as s } from "lit";
+import { property as o } from "lit/decorators.js";
+import { Cre8Element as f } from "../cre8-element.js";
+const x = p`*,::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}.cre8-c-field-note{display:flex;align-items:flex-start;gap:0.25rem;color:var(--cre8-color-content-default);margin-top:0.25rem}.cre8-field-note-icon{margin-top:0.25rem;height:1rem;width:1rem}.cre8-c-field-note.cre8-is-error{color:var(--cre8-color-content-error)}.cre8-c-field-note.cre8-is-success{color:var(--cre8-color-content-success)}.cre8-c-field-note--inverted{color:var(--cre8-color-content-knockout)}`;
+var g = Object.defineProperty, a = (l, t, n, u) => {
+  for (var e = void 0, i = l.length - 1, d; i >= 0; i--)
+    (d = l[i]) && (e = d(t, n, e) || e);
+  return e && g(t, n, e), e;
 };
-const l = class l extends u {
+const c = class c extends f {
   /**
    * Check if there are success or error states and set "aria-live=polite"
    */
@@ -65,27 +21,27 @@ const l = class l extends u {
       "cre8-is-error": this.isError,
       "cre8-is-success": this.isSuccess
     });
-    return c`
+    return s`
         <div
           aria-live="${this.fieldNoteAriaLive() ?? "off"}"
           class="${t}">
-        ${this.isError === !0 ? c`<cre8-icon class="cre8-field-note-icon" svg='${p}' aria-hidden="true" ></cre8-icon>` : ""}
-            ${this.isSuccess === !0 ? c`<cre8-icon class="cre8-field-note-icon" svg='${f}' aria-hidden="true"></cre8-icon>` : ""}
+        ${this.isError === !0 ? s`<cre8-icon class="cre8-field-note-icon" svg='${m}' aria-hidden="true" ></cre8-icon>` : ""}
+            ${this.isSuccess === !0 ? s`<cre8-icon class="cre8-field-note-icon" svg='${h}' aria-hidden="true"></cre8-icon>` : ""}
           <div><slot></slot></div>
         </div>
     `;
   }
 };
-l.styles = [v];
-let r = l;
-i([
-  s({ type: Boolean, reflect: !0 })
+c.styles = [x];
+let r = c;
+a([
+  o({ type: Boolean, reflect: !0 })
 ], r.prototype, "isError");
-i([
-  s({ type: Boolean, reflect: !0 })
+a([
+  o({ type: Boolean, reflect: !0 })
 ], r.prototype, "isSuccess");
-i([
-  s()
+a([
+  o()
 ], r.prototype, "iconName");
 customElements.get("cre8-field-note") === void 0 && customElements.define("cre8-field-note", r);
 export {

package/lib/components/field-note/field-note.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field-note.styles.d.ts","sourceRoot":"","sources":["../../../components/field-note/field-note.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBA4CX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"field-note.styles.d.ts","sourceRoot":"","sources":["../../../components/field-note/field-note.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAyrE,CAAC;AACtsE,eAAe,MAAM,CAAC"}

package/lib/components/footer/footer.js

@@ -1,30 +1,11 @@
-import { css as r, html as o } from "lit";
-import { Cre8Element as s } from "../cre8-element.js";
-const n = r`@import '../../design-tokens/core/scss/theming/component';
-@import '@cre8_dev/cre8-design-tokens/lib/web/layouts/breakpoints.scss';
-
-// #FOOTER
-
-/**
- * 1) Container used to house various Components and content for the global footer
- */
-.cre8-c-footer {
-  @include cre8-typography-body-default();
-  background: var(--cre8-color-bg-brand-xstrong);
-  color: var(--cre8-color-content-knockout);
-  padding-top: calc(8px * 5);
-  padding-bottom: calc(8px * 6);
-
-  @media all and (min-width:$cre8-breakpoint-lg) {
-    padding-top: calc(8px * 6.875);
-  }
-}
-`, e = class e extends s {
+import { css as o, html as e } from "lit";
+import { Cre8Element as i } from "../cre8-element.js";
+const s = o`*,::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-footer{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);background:var(--cre8-color-bg-brand-xstrong);color:var(--cre8-color-content-knockout);padding-top:2.5rem;padding-bottom:3rem}@media all and (min-width: 960px){.cre8-c-footer{padding-top:3.4375rem}}`, r = class r extends i {
   render() {
-    const c = this.componentClassNames("cre8-c-footer", {});
-    return o`
-      <footer class="${c}" role="contentinfo">
-        ${this.slotNotEmpty("top") && o`<div class="cre8-c-footer__top">
+    const a = this.componentClassNames("cre8-c-footer", {});
+    return e`
+      <footer class="${a}" role="contentinfo">
+        ${this.slotNotEmpty("top") && e`<div class="cre8-c-footer__top">
           <cre8-layout-container>
             <slot name="top"></slot>
           </cre8-layout-container>
@@ -34,7 +15,7 @@ const n = r`@import '../../design-tokens/core/scss/theming/component';
             <slot></slot>
           </cre8-layout-container>
         </div>
-        ${this.slotNotEmpty("bottom") && o`<div class="cre8-c-footer__bottom">
+        ${this.slotNotEmpty("bottom") && e`<div class="cre8-c-footer__bottom">
           <cre8-layout-container>
             <slot name="bottom"></slot>
           </cre8-layout-container>
@@ -43,8 +24,8 @@ const n = r`@import '../../design-tokens/core/scss/theming/component';
     `;
   }
 };
-e.styles = [n];
-let t = e;
+r.styles = [s];
+let t = r;
 customElements.get("cre8-footer") === void 0 && customElements.define("cre8-footer", t);
 export {
   t as Cre8Footer,

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

@@ -1 +1 @@
-{"version":3,"file":"footer.styles.d.ts","sourceRoot":"","sources":["../../../components/footer/footer.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAmBX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"footer.styles.d.ts","sourceRoot":"","sources":["../../../components/footer/footer.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAu1E,CAAC;AACp2E,eAAe,MAAM,CAAC"}

package/lib/components/global-nav/global-nav.js

@@ -1,46 +1,23 @@
-import { css as v, html as d } from "lit";
-import { property as s } from "lit/decorators.js";
-import { Cre8Element as m } from "../cre8-element.js";
-const p = v`@import '../../design-tokens/core/scss/theming/component';
-
-// #GLOBAL NAV
-
-/**
- * Inverted Global nav
- */
-.cre8-c-global-nav--inverted {
-  --cre8-global-nav-link-color: var(--cre8-color-content-knockout);
-}
-
-/**
- * Global nav list
- * 1) Stack on small screens within the toggleable menu but place side by side on large screens
- */
-.cre8-c-global-nav__list {
-  display: flex;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  list-style: none;
-  overflow: auto;
-}
-`;
-var b = Object.defineProperty, a = (r, l, i, g) => {
-  for (var e = void 0, o = r.length - 1, c; o >= 0; o--)
-    (c = r[o]) && (e = c(l, i, e) || e);
-  return e && b(l, i, e), e;
+import { css as p, html as h } from "lit";
+import { property as i } from "lit/decorators.js";
+import { Cre8Element as c } from "../cre8-element.js";
+const m = p`*,::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-global-nav--inverted{--cre8-global-nav-link-color: var(--cre8-color-content-knockout)}.cre8-c-global-nav__list{display:flex;margin:0;padding:0;width:100%;list-style:none;overflow:auto}`;
+var f = Object.defineProperty, s = (n, r, o, g) => {
+  for (var e = void 0, a = n.length - 1, d; a >= 0; a--)
+    (d = n[a]) && (e = d(r, o, e) || e);
+  return e && f(r, o, e), e;
 };
-const n = class n extends m {
+const l = class l extends c {
   constructor() {
     super(...arguments), this.navAriaLabel = "global";
   }
   render() {
-    const l = this.componentClassNames("cre8-c-global-nav", {
+    const r = this.componentClassNames("cre8-c-global-nav", {
       "cre8-c-global-nav--side-by-side": this.behavior === "side-by-side",
       "cre8-c-global-nav--inverted": this.inverted === !0
     });
-    return d`
-      <nav aria-label="${this.navAriaLabel}" class="${l}">
+    return h`
+      <nav aria-label="${this.navAriaLabel}" class="${r}">
         <ul class="cre8-c-global-nav__list">
           <slot></slot>
         </ul>
@@ -48,16 +25,16 @@ const n = class n extends m {
     `;
   }
 };
-n.styles = [p];
-let t = n;
-a([
-  s({ type: Boolean, reflect: !0 })
+l.styles = [m];
+let t = l;
+s([
+  i({ type: Boolean, reflect: !0 })
 ], t.prototype, "inverted");
-a([
-  s()
+s([
+  i()
 ], t.prototype, "behavior");
-a([
-  s()
+s([
+  i()
 ], t.prototype, "navAriaLabel");
 customElements.get("cre8-global-nav") === void 0 && customElements.define("cre8-global-nav", t);
 export {

package/lib/components/global-nav/global-nav.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"global-nav.styles.d.ts","sourceRoot":"","sources":["../../../components/global-nav/global-nav.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAuBX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"global-nav.styles.d.ts","sourceRoot":"","sources":["../../../components/global-nav/global-nav.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAg9D,CAAC;AAC79D,eAAe,MAAM,CAAC"}

package/lib/components/global-nav-item/global-nav-item.js

@@ -1,93 +1,14 @@
-import { css as h, html as r } from "lit";
-import { ifDefined as v } from "lit-html/directives/if-defined.js";
-import { property as n, state as p } from "lit/decorators.js";
-import { Cre8Element as u } from "../cre8-element.js";
-const f = h`@import '../../design-tokens/core/scss/theming/component';
-
-// #PRIMARY NAV ITEM
-
-/**
- * Actual primary nav list item
- */
-
-/**
- * Content within the primary nav item
- */
-.cre8-c-global-nav__item-content {
-  display: flex;
-  align-items: baseline;
-}
-
-/**
- * Primary navigation link
- * 1) Used to remove any sort of default button styles when a button tag is rendered
- */
-.cre8-c-global-nav__link {
-  @include cre8-typography-body-small;
-  display: flex;
-  align-items: center;
-  appearance: none; /* 1 */
-  background: transparent; /* 1 */
-  border: none;
-  //border: 1px solid var(--cre8-color-header-menu-border-default); /* 1 */
-  white-space: nowrap;
-  width: 100%;
-  margin: 0;
-  padding: calc(8px * 1) calc(8px * 2);
-  color: var(--cre8-global-nav-link-color, var(--cre8-color-content-subtle));
-  text-decoration: none;
-  transition: all var(--cre8-anim-fade-quick) var(--cre8-anim-ease);
-  cursor: pointer;
-
-  &:hover,
-  &:focus-visible {
-    //border-color: var(--cre8-color-header-menu-border-hover);
-    background: var(--cre8-color-header-menu-bg-hover);
-    color: var(--cre8-color-header-menu-content-hover);
-  }
-
-  &:active {
-    border-color: var(--cre8-color-header-menu-border-pressed);
-    background: var(--cre8-color-header-menu-bg-pressed);
-    color: var(--cre8-color-header-menu-content-pressed);
-  }
-}
-
-/**
- * Icon within primary navigation item
- * 1) TODO: Figure out how to pass down calc(8px * 1.5) instead of static rem value
- */
-cre8-icon-legacy {
-  --cre8-icon-height: #{calc(8px * 1)}; /* 1 */
-  --cre8-icon-width: #{calc(8px * 1)}; /* 1 */
-  margin-left: auto;
-  transition: transform var(--cre8-anim-fade-quick) var(--cre8-anim-ease);
-
-  /**
-  * Icon within active primary nav item
-  * 1) Rotate the icon to show that the dropdown is open
-  */
-  .cre8-c-global-nav__item.cre8-is-active & {
-    transform: rotate(-180deg); /* 1 */
-  }
-
-  @media all and (min-width:$cre8-breakpoint-lg) {
-    margin-left: calc(8px * 1);
-  }
-}
-
-.cre8-c-global-nav__item-after {
-  --cre8-icon-height: #{calc(8px * 1.5)};
-  --cre8-icon-width: #{calc(8px * 1.5)};
-  margin-left: calc(8px * 1);
-}
-`;
-var g = Object.defineProperty, a = (d, e, t, c) => {
-  for (var o = void 0, s = d.length - 1, m; s >= 0; s--)
-    (m = d[s]) && (o = m(e, t, o) || o);
-  return o && g(e, t, o), o;
+import { css as m, html as a } from "lit";
+import { ifDefined as p } from "lit-html/directives/if-defined.js";
+import { property as n, state as f } from "lit/decorators.js";
+import { Cre8Element as g } from "../cre8-element.js";
+const v = 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-global-nav__item-content{display:flex;align-items:baseline}.cre8-c-global-nav__link{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);display:flex;align-items:center;appearance:none;background:rgba(0,0,0,0);border:none;white-space:nowrap;width:100%;margin:0;padding:0.5rem 1rem;color:var(--cre8-global-nav-link-color, var(--cre8-color-content-subtle));text-decoration:none;transition:all var(--cre8-anim-fade-quick) var(--cre8-anim-ease);cursor:pointer}.cre8-c-global-nav__link:hover,.cre8-c-global-nav__link:focus-visible{background:var(--cre8-color-header-menu-bg-hover);color:var(--cre8-color-header-menu-content-hover)}.cre8-c-global-nav__link:active{border-color:var(--cre8-color-header-menu-border-pressed);background:var(--cre8-color-header-menu-bg-pressed);color:var(--cre8-color-header-menu-content-pressed)}cre8-icon-legacy{--cre8-icon-height: 0.5rem;--cre8-icon-width: 0.5rem;margin-left:auto;transition:transform var(--cre8-anim-fade-quick) var(--cre8-anim-ease)}.cre8-c-global-nav__item.cre8-is-active cre8-icon-legacy{transform:rotate(-180deg)}@media all and (min-width: 960px){cre8-icon-legacy{margin-left:0.5rem}}.cre8-c-global-nav__item-after{--cre8-icon-height: 0.75rem;--cre8-icon-width: 0.75rem;margin-left:0.5rem}`;
+var u = Object.defineProperty, o = (d, e, t, s) => {
+  for (var r = void 0, l = d.length - 1, h; l >= 0; l--)
+    (h = d[l]) && (r = h(e, t, r) || r);
+  return r && u(e, t, r), r;
 };
-const l = class l extends u {
+const c = class c extends g {
   /**
    * Initialize functions
    */
@@ -135,8 +56,8 @@ const l = class l extends u {
    * 2) Toggle active state of element selected
    */
   _clickHandler(e) {
-    e.preventDefault(), this.parentNode && this.parentNode.querySelectorAll("cre8-global-nav-item").forEach((c) => {
-      c !== this && (c.isActive = !1);
+    e.preventDefault(), this.parentNode && this.parentNode.querySelectorAll("cre8-global-nav-item").forEach((s) => {
+      s !== this && (s.isActive = !1);
     }), this.isActive = !this.isActive;
   }
   closePanel() {
@@ -158,10 +79,10 @@ const l = class l extends u {
       "cre8-is-active": this.isActive === !0,
       "cre8-c-global-nav__item--megamenu": this.megaMenu === !0
     });
-    return this.megaMenu ? r`
+    return this.megaMenu ? a`
             <li class="${e}" @keydown=${this._handleOnKeyDown}>
                 <div class="cre8-c-global-nav__item-content">
-                    ${this.slotNotEmpty("itemBefore") && r`
+                    ${this.slotNotEmpty("itemBefore") && a`
                     <div class="cre8-c-global-nav__item-before">
                         <slot name="itemBefore"></slot>
                     </div>`}
@@ -171,20 +92,20 @@ const l = class l extends u {
                         aria-expanded=${this.isActive === !0}
                     >
                         ${this.text}
-                        <cre8-icon-legacy aria-hidden="true" name="${v(this.iconName)}"></cre8-icon-legacy>
+                        <cre8-icon-legacy aria-hidden="true" name="${p(this.iconName)}"></cre8-icon-legacy>
                     </button>
                 </div>
             </li>
-        ` : r`
+        ` : a`
             <li class="${e}">
                 <div class="cre8-c-global-nav__item-content">
                     <a class="cre8-c-global-nav__link" href="${this.href}">
-                        ${this.slotNotEmpty("itemBefore") && r`
+                        ${this.slotNotEmpty("itemBefore") && a`
                         <div class="cre8-c-global-nav__item-before">
                             <slot name="itemBefore"></slot>
                         </div>`}
                         ${this.text}
-                        ${this.slotNotEmpty("itemAfter") && r`
+                        ${this.slotNotEmpty("itemAfter") && a`
                         <div class="cre8-c-global-nav__item-after">
                             <slot name="itemAfter"></slot>
                         </div>`}
@@ -194,22 +115,22 @@ const l = class l extends u {
         `;
   }
 };
-l.styles = [f];
-let i = l;
-a([
+c.styles = [v];
+let i = c;
+o([
   n()
 ], i.prototype, "text");
-a([
+o([
   n()
 ], i.prototype, "href");
-a([
+o([
   n()
 ], i.prototype, "iconName");
-a([
+o([
   n({ type: Boolean, reflect: !0 })
 ], i.prototype, "megaMenu");
-a([
-  p()
+o([
+  f()
 ], i.prototype, "isActive");
 customElements.get("cre8-global-nav-item") === void 0 && customElements.define("cre8-global-nav-item", i);
 export {