@tmorrow/cre8-wc 1.0.25 → 1.1.1

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

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

package/lib/components/grid/grid.js

@@ -1,335 +1,13 @@
-import { css as s, html as m } from "lit";
-import { property as d } from "lit/decorators.js";
-import { Cre8Element as p } from "../cre8-element.js";
-const g = s`@import '../../design-tokens/core/scss/theming/component';
-
-// #GRID
-
-/**
- * 1) Grid layout for items like cards, etc.
- */
-.cre8-c-grid {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  margin: calc(8px * -1.5);
-}
-
-/**
- * Grid with no gap in between items
- */
-.cre8-c-grid--gap-none {
-  margin: 0;
-}
-
-/**
- * Small gap grid
- * 1) Spacing between grid items is smaller than default
- */
-.cre8-c-grid--gap-sm {
-  margin: calc(8px * -0.5);
-}
-
-/**
- * Large gap grid
- * 1) Spacing between grid items is larger than default
- */
-.cre8-c-grid--gap-lg {
-  margin: calc(8px * -2);
-}
-
-/**
- * Side by Side Grid
- * 1) Grid that stays 2 items per row on all screen sizes
- */
-.cre8-c-grid--side-by-side {
-  flex-direction: row;
-}
-
-/**
- * 2up grid
- * 1) Stacked items on small screens to 2 items per row on medium/large screens
- */
-.cre8-c-grid--2up {
-  @media all and (min-width:$cre8-breakpoint-md) {
-    flex-direction: row;
-  }
-
-  /**
-  * 2up grid that breaks faster
-  * 1) Grid that breaks from 1 to 2up at a smaller viewport than the default
-  */
-  &.cre8-c-grid--break-faster {
-    @media all and (min-width:$cre8-breakpoint-sm) {
-      flex-direction: row;
-    }
-  }
-
-  /**
-  * 2up grid that breaks slower
-  * 1) Grid that breaks from 1 to 2up at a larger viewport than the default
-  */
-  &.cre8-c-grid--break-slower {
-    @media all and (min-width:$cre8-breakpoint-md) {
-      flex-direction: column;
-    }
-    @media all and (min-width:$cre8-breakpoint-xxl) {
-      flex-direction: row;
-    }
-  }
-}
-
-/**
- * 3up grid
- * 1) Stacked items on small screens to 3 items per row on medium/large screens
- */
-.cre8-c-grid--3up {
-  @media all and (min-width:$cre8-breakpoint-md) {
-    flex-direction: row;
-  }
-}
-
-/**
- * 1 to 3up grid
- * 1) Stacked items on small screens to 3 items per row on medium/large screens
- */
-.cre8-c-grid--1-3up {
-  @media all and (min-width:$cre8-breakpoint-lg) {
-    flex-direction: row;
-  }
-
-  /**
-  * 1 to 3 up grid that breaks faster
-  * 1) Grid that breaks from 1 to 3up at a smaller viewport than the default
-  */
-  &.cre8-c-grid--break-faster {
-    @media all and (min-width:$cre8-breakpoint-md) {
-      flex-direction: row;
-    }
-  }
-
-  /**
-  * 1 to 3up grid that breaks slower
-  * 1) Grid that breaks from 1 to 3up at a larger viewport than the default
-  */
-  &.cre8-c-grid--break-slower {
-    @media all and (min-width:$cre8-breakpoint-lg) {
-      flex-direction: column;
-    }
-    @media all and (min-width:$cre8-breakpoint-xl) {
-      flex-direction: row;
-    }
-  }
-}
-
-/**
- * 1 to 2 to 4up grid
- * 1) Stacked items on small screens to 2 items per row on medium screens to 4 items per row on large screens
- */
-.cre8-c-grid--1-2-4up {
-  @media all and (min-width:$cre8-breakpoint-sm) {
-    flex-direction: row;
-  }
-}
-
-/**
- * 1 to 4up grid
- * 1) Stacked items on small screens to 4 items per row on medium/large screens
- */
-.cre8-c-grid--1-4up {
-  @media all and (min-width:$cre8-breakpoint-md) {
-    flex-direction: row;
-  }
-}
-
-/**
- * 1 to 2 to 4up grid
- * 1) Stacked items on small screens to 2 items per row on small/medium screens to
- * 3 items per row on medium screens and 4 items per row on large screens
- */
-.cre8-c-grid--4up {
-  @media all and (min-width:$cre8-breakpoint-sm) {
-    flex-direction: row;
-  }
-}
-
-/**
-  * Slotted grid item within 4up Grid
-  */
-.cre8-c-grid--2-4-6up {
-  flex-direction: row;
-}
-
-/**
- * Slotted grid item
- */
-::slotted(cre8-grid-item) {
-  display: block;
-  padding: calc(8px * 1.5);
-
-  /**
-  * Slotted grid item within grid with no gap between items
-  */
-  .cre8-c-grid--gap-none > & {
-    padding: 0;
-  }
-
-  /**
-  * Slotted grid item within grid with small gap between items
-  */
-  .cre8-c-grid--gap-sm > & {
-    padding: calc(8px * 0.5);
-  }
-
-  /**
-  * Slotted grid item within grid with large gap between items
-  */
-  .cre8-c-grid--gap-lg > & {
-    padding: calc(8px * 2);
-  }
-
-  /**
-  * Slotted grid item within side by side grid
-  * 1) Grid that stays 2 items per row on all screen sizes
-  */
-  .cre8-c-grid--side-by-side > & {
-    width: 50%;
-  }
-
-  /**
-  * Slotted grid item within 2up Grid
-  */
-  .cre8-c-grid--2up > & {
-    @media all and (min-width:$cre8-breakpoint-md) {
-      width: 50%;
-    }
-  }
-
-  /**
-  * Slotted grid item within 2up break faster (small to large screens) Grid
-  */
-  .cre8-c-grid--2up.cre8-c-grid--break-faster > & {
-    @media all and (min-width:$cre8-breakpoint-sm) {
-      width: 50%;
-    }
-  }
-
-  /**
-  * Slotted grid item within 2up break slower (small to large screens) Grid
-  */
-  .cre8-c-grid--2up.cre8-c-grid--break-slower > & {
-    @media all and (min-width:$cre8-breakpoint-md) {
-      width: 100%;
-    }
-    @media all and (min-width:$cre8-breakpoint-xxl) {
-      width: 50%;
-    }
-  }
-
-  /**
-  * Slotted grid item within 3up Grid
-  */
-  .cre8-c-grid--3up > & {
-    @media all and (min-width:$cre8-breakpoint-md) {
-      width: 50%;
-    }
-
-    @media all and (min-width:$cre8-breakpoint-lg) {
-      width: 33.3333%;
-    }
-  }
-
-  /**
-  * Slotted grid item within 1-3up Grid
-  */
-  .cre8-c-grid--1-3up > & {
-    @media all and (min-width:$cre8-breakpoint-lg) {
-      width: 33.3333%;
-    }
-  }
-
-  /**
-  * Slotted grid item within 1 to 3up break faster (small to large screens) grid
-  */
-  .cre8-c-grid--1-3up.cre8-c-grid--break-faster > & {
-    @media all and (min-width:$cre8-breakpoint-md) {
-      width: 33.33%;
-    }
-  }
-
-  /**
-  * Slotted grid item within 2up break slower (small to large screens) Grid
-  */
-  .cre8-c-grid--1-3up.cre8-c-grid--break-slower > & {
-    @media all and (min-width:$cre8-breakpoint-lg) {
-      width: 100%;
-    }
-    @media all and (min-width:$cre8-breakpoint-xl) {
-      width: 33.33%;
-    }
-  }
-
-  /**
-  * Slotted grid item within 1-2-4up Grid
-  */
-  .cre8-c-grid--1-2-4up > & {
-    @media all and (min-width:$cre8-breakpoint-sm) {
-      width: 50%;
-    }
-
-    @media all and (min-width:$cre8-breakpoint-lg) {
-      width: 25%;
-    }
-  }
-
-  /**
-  * Slotted grid item within 1-2-4up Grid
-  */
-  .cre8-c-grid--1-4up > & {
-    @media all and (min-width:$cre8-breakpoint-md) {
-      width: 25%;
-    }
-  }
-
-  /**
-  * Slotted grid item within 4up Grid
-  */
-  .cre8-c-grid--4up > & {
-    @media all and (min-width:$cre8-breakpoint-sm) {
-      width: 50%;
-    }
-
-    @media all and (min-width:$cre8-breakpoint-md) {
-      width: 33.3333%;
-    }
-
-    @media all and (min-width:$cre8-breakpoint-lg) {
-      width: 25%;
-    }
-  }
-
-  /**
-  * Slotted grid item within 4up Grid
-  */
-  .cre8-c-grid--2-4-6up > & {
-    width: 50%;
-
-    @media all and (min-width:$cre8-breakpoint-lg) {
-      width: 25%;
-    }
-
-    @media all and (min-width:$cre8-breakpoint-xl) {
-      width: 16.66%;
-    }
-  }
-}
-`;
-var w = Object.defineProperty, a = (l, r, c, h) => {
-  for (var e = void 0, t = l.length - 1, o; t >= 0; t--)
-    (o = l[t]) && (e = o(r, c, e) || e);
-  return e && w(r, c, e), e;
+import { css as m, html as p } from "lit";
+import { property as t } from "lit/decorators.js";
+import { Cre8Element as g } from "../cre8-element.js";
+const o = 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-grid{display:flex;flex-direction:column;flex-wrap:wrap;margin:-0.75rem}.cre8-c-grid--gap-none{margin:0}.cre8-c-grid--gap-sm{margin:-0.25rem}.cre8-c-grid--gap-lg{margin:-1rem}.cre8-c-grid--side-by-side{flex-direction:row}@media all and (min-width: 768px){.cre8-c-grid--2up{flex-direction:row}}@media all and (min-width: 560px){.cre8-c-grid--2up.cre8-c-grid--break-faster{flex-direction:row}}@media all and (min-width: 768px){.cre8-c-grid--2up.cre8-c-grid--break-slower{flex-direction:column}}@media all and (min-width: 1400px){.cre8-c-grid--2up.cre8-c-grid--break-slower{flex-direction:row}}@media all and (min-width: 768px){.cre8-c-grid--3up{flex-direction:row}}@media all and (min-width: 960px){.cre8-c-grid--1-3up{flex-direction:row}}@media all and (min-width: 768px){.cre8-c-grid--1-3up.cre8-c-grid--break-faster{flex-direction:row}}@media all and (min-width: 960px){.cre8-c-grid--1-3up.cre8-c-grid--break-slower{flex-direction:column}}@media all and (min-width: 1200px){.cre8-c-grid--1-3up.cre8-c-grid--break-slower{flex-direction:row}}@media all and (min-width: 560px){.cre8-c-grid--1-2-4up{flex-direction:row}}@media all and (min-width: 768px){.cre8-c-grid--1-4up{flex-direction:row}}@media all and (min-width: 560px){.cre8-c-grid--4up{flex-direction:row}}.cre8-c-grid--2-4-6up{flex-direction:row}::slotted(cre8-grid-item){display:block;padding:0.75rem}.cre8-c-grid--gap-none>::slotted(cre8-grid-item){padding:0}.cre8-c-grid--gap-sm>::slotted(cre8-grid-item){padding:0.25rem}.cre8-c-grid--gap-lg>::slotted(cre8-grid-item){padding:1rem}.cre8-c-grid--side-by-side>::slotted(cre8-grid-item){width:50%}@media all and (min-width: 768px){.cre8-c-grid--2up>::slotted(cre8-grid-item){width:50%}}@media all and (min-width: 560px){.cre8-c-grid--2up.cre8-c-grid--break-faster>::slotted(cre8-grid-item){width:50%}}@media all and (min-width: 768px){.cre8-c-grid--2up.cre8-c-grid--break-slower>::slotted(cre8-grid-item){width:100%}}@media all and (min-width: 1400px){.cre8-c-grid--2up.cre8-c-grid--break-slower>::slotted(cre8-grid-item){width:50%}}@media all and (min-width: 768px){.cre8-c-grid--3up>::slotted(cre8-grid-item){width:50%}}@media all and (min-width: 960px){.cre8-c-grid--3up>::slotted(cre8-grid-item){width:33.3333%}}@media all and (min-width: 960px){.cre8-c-grid--1-3up>::slotted(cre8-grid-item){width:33.3333%}}@media all and (min-width: 768px){.cre8-c-grid--1-3up.cre8-c-grid--break-faster>::slotted(cre8-grid-item){width:33.33%}}@media all and (min-width: 960px){.cre8-c-grid--1-3up.cre8-c-grid--break-slower>::slotted(cre8-grid-item){width:100%}}@media all and (min-width: 1200px){.cre8-c-grid--1-3up.cre8-c-grid--break-slower>::slotted(cre8-grid-item){width:33.33%}}@media all and (min-width: 560px){.cre8-c-grid--1-2-4up>::slotted(cre8-grid-item){width:50%}}@media all and (min-width: 960px){.cre8-c-grid--1-2-4up>::slotted(cre8-grid-item){width:25%}}@media all and (min-width: 768px){.cre8-c-grid--1-4up>::slotted(cre8-grid-item){width:25%}}@media all and (min-width: 560px){.cre8-c-grid--4up>::slotted(cre8-grid-item){width:50%}}@media all and (min-width: 768px){.cre8-c-grid--4up>::slotted(cre8-grid-item){width:33.3333%}}@media all and (min-width: 960px){.cre8-c-grid--4up>::slotted(cre8-grid-item){width:25%}}.cre8-c-grid--2-4-6up>::slotted(cre8-grid-item){width:50%}@media all and (min-width: 960px){.cre8-c-grid--2-4-6up>::slotted(cre8-grid-item){width:25%}}@media all and (min-width: 1200px){.cre8-c-grid--2-4-6up>::slotted(cre8-grid-item){width:16.66%}}`;
+var h = Object.defineProperty, a = (l, r, n, w) => {
+  for (var e = void 0, d = l.length - 1, s; d >= 0; d--)
+    (s = l[d]) && (e = s(r, n, e) || e);
+  return e && h(r, n, e), e;
 };
-const n = class n extends p {
+const c = class c extends g {
   render() {
     const r = this.componentClassNames("cre8-c-grid", {
       "cre8-c-grid--side-by-side": this.variant === "side-by-side",
@@ -346,23 +24,23 @@ const n = class n extends p {
       "cre8-c-grid--break-faster": this.break === "faster",
       "cre8-c-grid--break-slower": this.break === "slower"
     });
-    return m`
+    return p`
       <div class="${r}">
         <slot></slot>
       </div>
     `;
   }
 };
-n.styles = [g];
-let i = n;
+c.styles = [o];
+let i = c;
 a([
-  d()
+  t()
 ], i.prototype, "variant");
 a([
-  d()
+  t()
 ], i.prototype, "gap");
 a([
-  d()
+  t()
 ], i.prototype, "break");
 customElements.get("cre8-grid") === void 0 && customElements.define("cre8-grid", i);
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"grid.styles.d.ts","sourceRoot":"","sources":["../../../components/grid/grid.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAkUX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"grid.styles.d.ts","sourceRoot":"","sources":["../../../components/grid/grid.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA2qK,CAAC;AACxrK,eAAe,MAAM,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"grid-item.styles.d.ts","sourceRoot":"","sources":["../../../components/grid-item/grid-item.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAQX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"grid-item.styles.d.ts","sourceRoot":"","sources":["../../../components/grid-item/grid-item.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA+yD,CAAC;AAC5zD,eAAe,MAAM,CAAC"}

package/lib/components/header/header.js

@@ -1,83 +1,20 @@
-import { css as s, html as a } from "lit";
+import { css as n, html as i } from "lit";
 import { state as l } from "lit/decorators.js";
 import { Cre8Element as h } from "../cre8-element.js";
-const m = s`@import '../../design-tokens/core/scss/theming/component';
-
-// #HEADER
-
-/**
-  * 1) Global header where the navigation, logo, and other content lives across the entire site
-  */
-.cre8-c-header {
-  background: var(--cre8-header-background, var(--cre8-color-header-bg-default));
-  color: var(--cre8-color-content-default);
-  position: relative;
-  z-index: 3;
-}
-
-/**
- * Header top section
- * 1) Optional slot used for global navigation usually
- */
-.cre8-c-header__top {
-  position: relative;
-  top: 0;
-  width: 100%;
-  z-index: 3;
-  background: var(--cre8-header-top-background);
-}
-
-/**
- * Inner container of the header top section
- * 1) Used to cap the width of the content within the header
- */
-.cre8-c-header__top-inner {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  overflow: auto;
-}
-
-/**
- * Header middle section
- * 1) Section of the site used for the logo and primary navigation
- */
-.cre8-c-header__middle {
-  width: 100%;
-  box-shadow: var(--cre8-theme-box-shadow-md);
-  border-bottom: var(--cre8-header-middle-border-bottom-color);
-}
-
-/**
- * Inner container of the header middle section
- * 1) Used to cap the width of the content within the header
- */
-.cre8-c-header__middle-inner {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding-top: calc(8px * 2);
-  padding-bottom: calc(8px * 2);
-}
-
-.cre8-c-header__bottom {
-  background: var(--cre8-header-bottom-background);
-  box-shadow: var(--cre8-header-bottom-box-shadow);
-}
-`;
-var p = Object.defineProperty, v = (i, t, d, u) => {
-  for (var e = void 0, r = i.length - 1, n; r >= 0; r--)
-    (n = i[r]) && (e = n(t, d, e) || e);
-  return e && p(t, d, e), e;
+const m = 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-header{background:var(--cre8-header-background, var(--cre8-color-header-bg-default));color:var(--cre8-color-content-default);position:relative;z-index:3}.cre8-c-header__top{position:relative;top:0;width:100%;z-index:3;background:var(--cre8-header-top-background)}.cre8-c-header__top-inner{display:flex;align-items:center;width:100%;overflow:auto}.cre8-c-header__middle{width:100%;box-shadow:var(--cre8-theme-box-shadow-md);border-bottom:var(--cre8-header-middle-border-bottom-color)}.cre8-c-header__middle-inner{display:flex;align-items:center;width:100%;padding-top:1rem;padding-bottom:1rem}.cre8-c-header__bottom{background:var(--cre8-header-bottom-background);box-shadow:var(--cre8-header-bottom-box-shadow)}`;
+var p = Object.defineProperty, x = (o, t, s, f) => {
+  for (var e = void 0, a = o.length - 1, c; a >= 0; a--)
+    (c = o[a]) && (e = c(t, s, e) || e);
+  return e && p(t, s, e), e;
 };
-const c = class c extends h {
+const d = class d extends h {
   render() {
     const t = this.componentClassNames("cre8-c-header", {
       "cre8-is-active": this.isActive === !0
     });
-    return a`
+    return i`
       <header class="${t}">
-        ${this.slotNotEmpty("top") && a`<div class="cre8-c-header__top">
+        ${this.slotNotEmpty("top") && i`<div class="cre8-c-header__top">
           <cre8-layout-container>
             <div class="cre8-c-header__top-inner">
               <slot name="top"></slot>
@@ -91,7 +28,7 @@ const c = class c extends h {
             </div>
           </cre8-layout-container>
         </div>
-        ${this.slotNotEmpty("bottom") && a`<div class="cre8-c-header__bottom">
+        ${this.slotNotEmpty("bottom") && i`<div class="cre8-c-header__bottom">
           <cre8-layout-container>
             <slot name="bottom"></slot>
           </cre8-layout-container>
@@ -100,13 +37,13 @@ const c = class c extends h {
     `;
   }
 };
-c.styles = [m];
-let o = c;
-v([
+d.styles = [m];
+let r = d;
+x([
   l()
-], o.prototype, "isActive");
-customElements.get("cre8-header") === void 0 && customElements.define("cre8-header", o);
+], r.prototype, "isActive");
+customElements.get("cre8-header") === void 0 && customElements.define("cre8-header", r);
 export {
-  o as Cre8Header,
-  o as default
+  r as Cre8Header,
+  r as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"header.styles.d.ts","sourceRoot":"","sources":["../../../components/header/header.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBA+DX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"header.styles.d.ts","sourceRoot":"","sources":["../../../components/header/header.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA+9E,CAAC;AAC5+E,eAAe,MAAM,CAAC"}