@tmorrow/cre8-wc 1.1.2 → 1.1.3

package/lib/components/grid/grid.js

@@ -1,49 +1,52 @@
-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;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const c = class c extends g {
-  render() {
-    const r = this.componentClassNames("cre8-c-grid", {
-      "cre8-c-grid--side-by-side": this.variant === "side-by-side",
-      "cre8-c-grid--2up": this.variant === "2up",
-      "cre8-c-grid--3up": this.variant === "3up",
-      "cre8-c-grid--1-3up": this.variant === "1-3up",
-      "cre8-c-grid--4up": this.variant === "4up",
-      "cre8-c-grid--1-4up": this.variant === "1-4up",
-      "cre8-c-grid--1-2-4up": this.variant === "1-2-4up",
-      "cre8-c-grid--2-4-6up": this.variant === "2-4-6up",
-      "cre8-c-grid--gap-none": this.gap === "none",
-      "cre8-c-grid--gap-sm": this.gap === "sm",
-      "cre8-c-grid--gap-lg": this.gap === "lg",
-      "cre8-c-grid--break-faster": this.break === "faster",
-      "cre8-c-grid--break-slower": this.break === "slower"
-    });
-    return p`
-      <div class="${r}">
+import { html, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './grid.styles.js';
+/**
+ * @slot - The grid items
+ */
+export class Cre8Grid extends Cre8Element {
+    render() {
+        const componentClassName = this.componentClassNames('cre8-c-grid', {
+            'cre8-c-grid--side-by-side': this.variant === 'side-by-side',
+            'cre8-c-grid--2up': this.variant === '2up',
+            'cre8-c-grid--3up': this.variant === '3up',
+            'cre8-c-grid--1-3up': this.variant === '1-3up',
+            'cre8-c-grid--4up': this.variant === '4up',
+            'cre8-c-grid--1-4up': this.variant === '1-4up',
+            'cre8-c-grid--1-2-4up': this.variant === '1-2-4up',
+            'cre8-c-grid--2-4-6up': this.variant === '2-4-6up',
+            'cre8-c-grid--gap-none': this.gap === 'none',
+            'cre8-c-grid--gap-sm': this.gap === 'sm',
+            'cre8-c-grid--gap-lg': this.gap === 'lg',
+            'cre8-c-grid--break-faster': this.break === 'faster',
+            'cre8-c-grid--break-slower': this.break === 'slower',
+        });
+        return html `
+      <div class="${componentClassName}">
         <slot></slot>
       </div>
     `;
-  }
-};
-c.styles = [o];
-let i = c;
-a([
-  t()
-], i.prototype, "variant");
-a([
-  t()
-], i.prototype, "gap");
-a([
-  t()
-], i.prototype, "break");
-customElements.get("cre8-grid") === void 0 && customElements.define("cre8-grid", i);
-export {
-  i as Cre8Grid,
-  i as default
-};
+    }
+}
+Cre8Grid.styles = [styles];
+__decorate([
+    property()
+], Cre8Grid.prototype, "variant", void 0);
+__decorate([
+    property()
+], Cre8Grid.prototype, "gap", void 0);
+__decorate([
+    property()
+], Cre8Grid.prototype, "break", void 0);
+if (customElements.get('cre8-grid') === undefined) {
+    customElements.define('cre8-grid', Cre8Grid);
+}
+export default Cre8Grid;
+//# sourceMappingURL=grid.js.map

package/lib/components/grid/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../../components/grid/grid.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAEtC;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,WAAW;IA2CvC,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE;YAC/D,2BAA2B,EAAE,IAAI,CAAC,OAAO,KAAK,cAAc;YAC5D,kBAAkB,EAAE,IAAI,CAAC,OAAO,KAAK,KAAK;YAC1C,kBAAkB,EAAE,IAAI,CAAC,OAAO,KAAK,KAAK;YAC1C,oBAAoB,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YAC9C,kBAAkB,EAAE,IAAI,CAAC,OAAO,KAAK,KAAK;YAC1C,oBAAoB,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YAC9C,sBAAsB,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAClD,sBAAsB,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAClD,uBAAuB,EAAE,IAAI,CAAC,GAAG,KAAK,MAAM;YAC5C,qBAAqB,EAAE,IAAI,CAAC,GAAG,KAAK,IAAI;YACxC,qBAAqB,EAAE,IAAI,CAAC,GAAG,KAAK,IAAI;YACxC,2BAA2B,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;YACpD,2BAA2B,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;SACvD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACG,kBAAkB;;;KAGjC,CAAC;IACJ,CAAC;;AAhEQ,eAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAoBvB;IADH,QAAQ,EAAE;yCACsF;AAS7F;IADH,QAAQ,EAAE;qCACoB;AAW3B;IADH,QAAQ,EAAE;uCACqB;AA2BlC,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,CAAC;IAChD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AACjD,CAAC;AAQD,eAAe,QAAQ,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './grid.styles.js';\n\n/**\n * @slot - The grid items\n */\nexport class Cre8Grid extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Style variant\n   * - **side-by-side** yields a grid whose grid items display side-by-side (2 per row) on all screen sizes\n   * - **2up** yields a grid whose grid items are stacked on small screens\n   *   but display side-by-side when enough screen real estate is available to do so\n   * - **3up** yields a grid whose grid items are stacked on small screens,\n   *   transforms to a 2-across pattern and then transforms again to a 3-across pattern\n   * - **1-3up** yields a grid whose grid items are stacked on small screens\n   *   and transforms to a 3-across pattern on larger screens\n   * - **4up** yields a grid whose grid items are stacked on small screens,\n   *   transforms to a 2-across pattern, transforms again to a 3-across pattern,\n   *   and ultimately transforms to a 4-across pattern\n   * - **1-2-4up** yields a grid whose grid items are stacked on small screens,\n   *   transforms to a 2-across pattern, and ultimately transforms to a 4-across pattern\n   * - **1-4up** yields a grid whose grid items are stacked on small screens,\n   *   transforms to a 4-across pattern on medium/large screens\n   */\n  @property()\n      variant?: 'side-by-side' | '2up' | '3up' | '1-3up' | '4up' | '1-4up' | '1-2-4up' | '2-4-6up';\n\n  /**\n   * Style variant\n   * - **none** yields a grid whose grid items are spaced without any gutter in between\n   * - **sm** yields a grid whose grid items are spaced with a gap smaller than the default\n   * - **lg** yields a grid whose grid items are spaced with a gap larger than the default\n   */\n  @property()\n      gap?: 'none' | 'sm' | 'lg';\n\n  /**\n   * Break variant\n   * - **faster** breaks the grid at a smaller width than the default.\n   *   Example: 2up grid breaks to 2 per row at smaller width than default\n   * - **slower** breaks the grid at a larger width than the default.\n   *   Example: 2up grid breaks to 2 per row at larger width than default\n   * - **lg** yields a grid whose grid items are spaced with a gap larger than the default\n   */\n  @property()\n      break?: 'faster' | 'slower';\n\n  render() {\n      const componentClassName = this.componentClassNames('cre8-c-grid', {\n          'cre8-c-grid--side-by-side': this.variant === 'side-by-side',\n          'cre8-c-grid--2up': this.variant === '2up',\n          'cre8-c-grid--3up': this.variant === '3up',\n          'cre8-c-grid--1-3up': this.variant === '1-3up',\n          'cre8-c-grid--4up': this.variant === '4up',\n          'cre8-c-grid--1-4up': this.variant === '1-4up',\n          'cre8-c-grid--1-2-4up': this.variant === '1-2-4up',\n          'cre8-c-grid--2-4-6up': this.variant === '2-4-6up',\n          'cre8-c-grid--gap-none': this.gap === 'none',\n          'cre8-c-grid--gap-sm': this.gap === 'sm',\n          'cre8-c-grid--gap-lg': this.gap === 'lg',\n          'cre8-c-grid--break-faster': this.break === 'faster',\n          'cre8-c-grid--break-slower': this.break === 'slower',\n      });\n\n      return html`\n      <div class=\"${componentClassName}\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-grid') === undefined) {\n    customElements.define('cre8-grid', Cre8Grid);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-grid': Cre8Grid;\n  }\n}\n\nexport default Cre8Grid;\n"]}

package/lib/components/grid/grid.styles.js

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"grid-item.js","sourceRoot":"","sources":["../../../components/grid-item/grid-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAE3C;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,WAAW;IAGzC,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC;QAE7E,OAAO,IAAI,CAAA;oBACC,kBAAkB;;;KAGjC,CAAC;IACF,CAAC;;AAVM,mBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAa7B,IAAI,cAAc,CAAC,GAAG,CAAC,gBAAgB,CAAC,KAAK,SAAS,EAAE,CAAC;IACrD,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAC;AAC1D,CAAC;AAQD,eAAe,YAAY,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './grid-item.styles.js';\n\n/**\n * @slot - The content of the grid item\n */\nexport class Cre8GridItem extends Cre8Element {\n    static styles = [styles];\n\n    render() {\n        const componentClassName = this.componentClassNames('cre8-c-grid__item', {});\n\n        return html`\n      <div class=\"${componentClassName}\">\n        <slot></slot>\n      </div>\n    `;\n    }\n}\n\nif (customElements.get('cre8-grid-item') === undefined) {\n    customElements.define('cre8-grid-item', Cre8GridItem);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-grid-item': Cre8GridItem;\n  }\n}\n\nexport default Cre8GridItem;\n"]}

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

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

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

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

package/lib/components/header/header.js

@@ -1,20 +1,25 @@
-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 = 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;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const d = class d extends h {
-  render() {
-    const t = this.componentClassNames("cre8-c-header", {
-      "cre8-is-active": this.isActive === !0
-    });
-    return i`
-      <header class="${t}">
-        ${this.slotNotEmpty("top") && i`<div class="cre8-c-header__top">
+import { html, } from 'lit';
+import { state } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './header.styles.js';
+/**
+ * @slot - The header content
+ */
+export class Cre8Header extends Cre8Element {
+    render() {
+        const componentClassName = this.componentClassNames('cre8-c-header', {
+            'cre8-is-active': this.isActive === true,
+        });
+        return html `
+      <header class="${componentClassName}">
+        ${this.slotNotEmpty('top')
+            && html `<div class="cre8-c-header__top">
           <cre8-layout-container>
             <div class="cre8-c-header__top-inner">
               <slot name="top"></slot>
@@ -28,22 +33,22 @@ const d = class d extends h {
             </div>
           </cre8-layout-container>
         </div>
-        ${this.slotNotEmpty("bottom") && i`<div class="cre8-c-header__bottom">
+        ${this.slotNotEmpty('bottom')
+            && html `<div class="cre8-c-header__bottom">
           <cre8-layout-container>
             <slot name="bottom"></slot>
           </cre8-layout-container>
         </div>`}
       </header>
     `;
-  }
-};
-d.styles = [m];
-let r = d;
-x([
-  l()
-], r.prototype, "isActive");
-customElements.get("cre8-header") === void 0 && customElements.define("cre8-header", r);
-export {
-  r as Cre8Header,
-  r as default
-};
+    }
+}
+Cre8Header.styles = [styles];
+__decorate([
+    state()
+], Cre8Header.prototype, "isActive", void 0);
+if (customElements.get('cre8-header') === undefined) {
+    customElements.define('cre8-header', Cre8Header);
+}
+export default Cre8Header;
+//# sourceMappingURL=header.js.map

package/lib/components/header/header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.js","sourceRoot":"","sources":["../../../components/header/header.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAExC;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,WAAW;IAUzC,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,eAAe,EAAE;YACjE,gBAAgB,EAAE,IAAI,CAAC,QAAQ,KAAK,IAAI;SAC3C,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;uBACM,kBAAkB;UAC/B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;eACvB,IAAI,CAAA;;;;;;eAMA;;;;;;;;UAQL,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;eAC1B,IAAI,CAAA;;;;eAIA;;KAEV,CAAC;IACJ,CAAC;;AAvCQ,iBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAOvB;IADH,KAAK,EAAE;4CACe;AAmCzB,IAAI,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,KAAK,SAAS,EAAE,CAAC;IAClD,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;AACrD,CAAC;AAQD,eAAe,UAAU,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { state } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './header.styles.js';\n\n/**\n * @slot - The header content\n */\nexport class Cre8Header extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Is active state\n   * 1) Set to true when small screen menu is open\n   */\n  @state()\n      isActive?: boolean;\n\n  render() {\n      const componentClassName = this.componentClassNames('cre8-c-header', {\n          'cre8-is-active': this.isActive === true,\n      });\n\n      return html`\n      <header class=\"${componentClassName}\">\n        ${this.slotNotEmpty('top')\n        && html`<div class=\"cre8-c-header__top\">\n          <cre8-layout-container>\n            <div class=\"cre8-c-header__top-inner\">\n              <slot name=\"top\"></slot>\n            </div>\n          </cre8-layout-container>\n        </div>`}\n        <div class=\"cre8-c-header__middle\">\n          <cre8-layout-container>\n            <div class=\"cre8-c-header__middle-inner\">\n              <slot></slot>\n            </div>\n          </cre8-layout-container>\n        </div>\n        ${this.slotNotEmpty('bottom')\n        && html`<div class=\"cre8-c-header__bottom\">\n          <cre8-layout-container>\n            <slot name=\"bottom\"></slot>\n          </cre8-layout-container>\n        </div>`}\n      </header>\n    `;\n  }\n}\n\nif (customElements.get('cre8-header') === undefined) {\n    customElements.define('cre8-header', Cre8Header);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-header': Cre8Header;\n  }\n}\n\nexport default Cre8Header;\n"]}

package/lib/components/header/header.styles.js

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

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

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

package/lib/components/heading/heading.js

@@ -1,78 +1,115 @@
-import { css as y, html as t } from "lit";
-import { property as i } from "lit/decorators.js";
-import { Cre8Element as c } from "../cre8-element.js";
-const d = y`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline;text-align:left}.cre8-c-heading,.cre8-c-heading--title-large{font-family:var(--cre8-typography-title-large-mobile-font-family);font-size:var(--cre8-typography-title-large-mobile-font-size);font-weight:var(--cre8-typography-title-large-mobile-font-weight);line-height:var(--cre8-typography-title-large-mobile-line-height);text-decoration:var(--cre8-typography-title-large-mobile-text-decoration);text-transform:var(--cre8-typography-title-large-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading,.cre8-c-heading--title-large{font-family:var(--cre8-typography-title-large-font-family);font-size:var(--cre8-typography-title-large-font-size);font-weight:var(--cre8-typography-title-large-font-weight);line-height:var(--cre8-typography-title-large-line-height);text-decoration:var(--cre8-typography-title-large-text-decoration);text-transform:var(--cre8-typography-title-large-text-transform)}}.cre8-c-heading,.cre8-c-heading--title-large{margin:0;color:var(--cre8-color-content-default)}.cre8-c-heading--headline-large{font-family:var(--cre8-typography-headline-large-mobile-font-family);font-size:var(--cre8-typography-headline-large-mobile-font-size);font-weight:var(--cre8-typography-headline-large-mobile-font-weight);line-height:var(--cre8-typography-headline-large-mobile-line-height);text-decoration:var(--cre8-typography-headline-large-mobile-text-decoration);text-transform:var(--cre8-typography-headline-large-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--headline-large{font-family:var(--cre8-typography-headline-large-font-family);font-size:var(--cre8-typography-headline-large-font-size);font-weight:var(--cre8-typography-headline-large-font-weight);line-height:var(--cre8-typography-headline-large-line-height);text-decoration:var(--cre8-typography-headline-large-text-decoration);text-transform:var(--cre8-typography-headline-large-text-transform)}}.cre8-c-heading--headline-default{font-family:var(--cre8-typography-headline-default-mobile-font-family);font-size:var(--cre8-typography-headline-default-mobile-font-size);font-weight:var(--cre8-typography-headline-default-mobile-font-weight);line-height:var(--cre8-typography-headline-default-mobile-line-height);text-decoration:var(--cre8-typography-headline-default-mobile-text-decoration);text-transform:var(--cre8-typography-headline-default-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--headline-default{font-family:var(--cre8-typography-headline-default-font-family);font-size:var(--cre8-typography-headline-default-font-size);font-weight:var(--cre8-typography-headline-default-font-weight);line-height:var(--cre8-typography-headline-default-line-height);text-decoration:var(--cre8-typography-headline-default-text-decoration);text-transform:var(--cre8-typography-headline-default-text-transform)}}.cre8-c-heading--headline-small{font-family:var(--cre8-typography-headline-small-mobile-font-family);font-size:var(--cre8-typography-headline-small-mobile-font-size);font-weight:var(--cre8-typography-headline-small-mobile-font-weight);line-height:var(--cre8-typography-headline-small-mobile-line-height);text-decoration:var(--cre8-typography-headline-small-mobile-text-decoration);text-transform:var(--cre8-typography-headline-small-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--headline-small{font-family:var(--cre8-typography-headline-small-font-family);font-size:var(--cre8-typography-headline-small-font-size);font-weight:var(--cre8-typography-headline-small-font-weight);line-height:var(--cre8-typography-headline-small-line-height);text-decoration:var(--cre8-typography-headline-small-text-decoration);text-transform:var(--cre8-typography-headline-small-text-transform)}}.cre8-c-heading--title-xlarge{font-family:var(--cre8-typography-title-xlarge-mobile-font-family);font-size:var(--cre8-typography-title-xlarge-mobile-font-size);font-weight:var(--cre8-typography-title-xlarge-mobile-font-weight);line-height:var(--cre8-typography-title-xlarge-mobile-line-height);text-decoration:var(--cre8-typography-title-xlarge-mobile-text-decoration);text-transform:var(--cre8-typography-title-xlarge-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--title-xlarge{font-family:var(--cre8-typography-title-xlarge-font-family);font-size:var(--cre8-typography-title-xlarge-font-size);font-weight:var(--cre8-typography-title-xlarge-font-weight);line-height:var(--cre8-typography-title-xlarge-line-height);text-decoration:var(--cre8-typography-title-xlarge-text-decoration);text-transform:var(--cre8-typography-title-xlarge-text-transform)}}.cre8-c-heading--title-large{font-family:var(--cre8-typography-title-large-mobile-font-family);font-size:var(--cre8-typography-title-large-mobile-font-size);font-weight:var(--cre8-typography-title-large-mobile-font-weight);line-height:var(--cre8-typography-title-large-mobile-line-height);text-decoration:var(--cre8-typography-title-large-mobile-text-decoration);text-transform:var(--cre8-typography-title-large-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--title-large{font-family:var(--cre8-typography-title-large-font-family);font-size:var(--cre8-typography-title-large-font-size);font-weight:var(--cre8-typography-title-large-font-weight);line-height:var(--cre8-typography-title-large-line-height);text-decoration:var(--cre8-typography-title-large-text-decoration);text-transform:var(--cre8-typography-title-large-text-transform)}}.cre8-c-heading--title-default{font-family:var(--cre8-typography-title-default-mobile-font-family);font-size:var(--cre8-typography-title-default-mobile-font-size);font-weight:var(--cre8-typography-title-default-mobile-font-weight);line-height:var(--cre8-typography-title-default-mobile-line-height);text-decoration:var(--cre8-typography-title-default-mobile-text-decoration);text-transform:var(--cre8-typography-title-default-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--title-default{font-family:var(--cre8-typography-title-default-font-family);font-size:var(--cre8-typography-title-default-font-size);font-weight:var(--cre8-typography-title-default-font-weight);line-height:var(--cre8-typography-title-default-line-height);text-decoration:var(--cre8-typography-title-default-text-decoration);text-transform:var(--cre8-typography-title-default-text-transform)}}.cre8-c-heading--title-small{font-family:var(--cre8-typography-title-small-mobile-font-family);font-size:var(--cre8-typography-title-small-mobile-font-size);font-weight:var(--cre8-typography-title-small-mobile-font-weight);line-height:var(--cre8-typography-title-small-mobile-line-height);text-decoration:var(--cre8-typography-title-small-mobile-text-decoration);text-transform:var(--cre8-typography-title-small-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--title-small{font-family:var(--cre8-typography-title-small-font-family);font-size:var(--cre8-typography-title-small-font-size);font-weight:var(--cre8-typography-title-small-font-weight);line-height:var(--cre8-typography-title-small-line-height);text-decoration:var(--cre8-typography-title-small-text-decoration);text-transform:var(--cre8-typography-title-small-text-transform)}}.cre8-c-heading--display-small{font-family:var(--cre8-typography-display-small-mobile-font-family);font-size:var(--cre8-typography-display-small-mobile-font-size);font-weight:var(--cre8-typography-display-small-mobile-font-weight);line-height:var(--cre8-typography-display-small-mobile-line-height);text-decoration:var(--cre8-typography-display-small-mobile-text-decoration);text-transform:var(--cre8-typography-display-small-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--display-small{font-family:var(--cre8-typography-display-small-font-family);font-size:var(--cre8-typography-display-small-font-size);font-weight:var(--cre8-typography-display-small-font-weight);line-height:var(--cre8-typography-display-small-line-height);text-decoration:var(--cre8-typography-display-small-text-decoration);text-transform:var(--cre8-typography-display-small-text-transform)}}.cre8-c-heading--display-default{font-family:var(--cre8-typography-display-default-mobile-font-family);font-size:var(--cre8-typography-display-default-mobile-font-size);font-weight:var(--cre8-typography-display-default-mobile-font-weight);line-height:var(--cre8-typography-display-default-mobile-line-height);text-decoration:var(--cre8-typography-display-default-mobile-text-decoration);text-transform:var(--cre8-typography-display-default-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--display-default{font-family:var(--cre8-typography-display-default-font-family);font-size:var(--cre8-typography-display-default-font-size);font-weight:var(--cre8-typography-display-default-font-weight);line-height:var(--cre8-typography-display-default-line-height);text-decoration:var(--cre8-typography-display-default-text-decoration);text-transform:var(--cre8-typography-display-default-text-transform)}}.cre8-c-heading--label-large{font-family:var(--cre8-typography-label-large-font-family);font-size:var(--cre8-typography-label-large-font-size);font-weight:var(--cre8-typography-label-large-font-weight);line-height:var(--cre8-typography-label-large-line-height);text-decoration:var(--cre8-typography-label-large-text-decoration);text-transform:var(--cre8-typography-label-large-text-transform)}.cre8-c-heading--label-default{font-family:var(--cre8-typography-label-default-font-family);font-size:var(--cre8-typography-label-default-font-size);font-weight:var(--cre8-typography-label-default-font-weight);line-height:var(--cre8-typography-label-default-line-height);text-decoration:var(--cre8-typography-label-default-text-decoration);text-transform:var(--cre8-typography-label-default-text-transform)}.cre8-c-heading--label-small{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-heading--meta-large{font-family:var(--cre8-typography-meta-large-font-family);font-size:var(--cre8-typography-meta-large-font-size);font-weight:var(--cre8-typography-meta-large-font-weight);line-height:var(--cre8-typography-meta-large-line-height);text-decoration:var(--cre8-typography-meta-large-text-decoration);text-transform:var(--cre8-typography-meta-large-text-transform);text-transform:uppercase}.cre8-c-heading--meta-default{font-family:var(--cre8-typography-meta-default-font-family);font-size:var(--cre8-typography-meta-default-font-size);font-weight:var(--cre8-typography-meta-default-font-weight);line-height:var(--cre8-typography-meta-default-line-height);text-decoration:var(--cre8-typography-meta-default-text-decoration);text-transform:var(--cre8-typography-meta-default-text-transform);text-transform:uppercase}.cre8-c-heading--meta-small{font-family:var(--cre8-typography-meta-small-font-family);font-size:var(--cre8-typography-meta-small-font-size);font-weight:var(--cre8-typography-meta-small-font-weight);line-height:var(--cre8-typography-meta-small-line-height);text-decoration:var(--cre8-typography-meta-small-text-decoration);text-transform:var(--cre8-typography-meta-small-text-transform);text-transform:uppercase}.cre8-c-heading--brand-color{color:var(--cre8-color-content-brand-strong)}.cre8-c-heading--brand-color.cre8-c-heading--inverted{color:var(--cre8-color-content-brand-knockout)}.cre8-c-heading--inverted{color:var(--cre8-color-content-knockout)}`;
-var f = Object.defineProperty, o = (g, l, e, s) => {
-  for (var r = void 0, n = g.length - 1, p; n >= 0; n--)
-    (p = g[n]) && (r = p(l, e, r) || r);
-  return r && f(l, e, r), r;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const h = class h extends c {
-  constructor() {
-    super(...arguments), this.tagVariant = "h5";
-  }
-  render() {
-    const l = this.type ? {} : {
-      "cre8-c-heading--headline-large": this.tagVariant === "h1",
-      "cre8-c-heading--headline-default": this.tagVariant === "h2",
-      "cre8-c-heading--headline-small": this.tagVariant === "h3",
-      "cre8-c-heading--title-large": this.tagVariant === "h4",
-      "cre8-c-heading--title-default": this.tagVariant === "h5",
-      "cre8-c-heading--title-small": this.tagVariant === "h6"
-    }, e = this.componentClassNames("cre8-c-heading", {
-      ...l,
-      "cre8-c-heading--headline-large": this.type === "headline-large",
-      "cre8-c-heading--headline-default": this.type === "headline-default",
-      "cre8-c-heading--headline-small": this.type === "headline-small",
-      "cre8-c-heading--title-large": this.type === "title-large",
-      "cre8-c-heading--title-default": this.type === "title-default",
-      "cre8-c-heading--title-small": this.type === "title-small",
-      "cre8-c-heading--title-xlarge": this.type === "title-xlarge",
-      "cre8-c-heading--display-default": this.type === "display-default",
-      "cre8-c-heading--display-small": this.type === "display-small",
-      "cre8-c-heading--label-large": this.type === "label-large",
-      "cre8-c-heading--label-default": this.type === "label-default",
-      "cre8-c-heading--label-small": this.type === "label-small",
-      "cre8-c-heading--meta-large": this.type === "meta-large",
-      "cre8-c-heading--meta-default": this.type === "meta-default",
-      "cre8-c-heading--meta-small": this.type === "meta-small",
-      "cre8-c-heading--brand-color": this.brandColor,
-      "cre8-c-heading--inverted": this.inverted
-    });
-    switch (this.tagVariant) {
-      case "h1":
-        return t` <h1 part="tag" class="${e}"><slot></slot></h1> `;
-      case "h2":
-        return t` <h2 part="tag" class="${e}"><slot></slot></h2> `;
-      case "h3":
-        return t` <h3 part="tag" class="${e}"><slot></slot></h3> `;
-      case "h4":
-        return t` <h4 part="tag" class="${e}"><slot></slot></h4> `;
-      case "h5":
-        return t` <h5 part="tag" class="${e}"><slot></slot></h5> `;
-      case "h6":
-        return t` <h6 part="tag" class="${e}"><slot></slot></h6> `;
-      default:
-        return t` <h4 part="tag" class="${e}"><slot></slot></h4> `;
+import { html, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './heading.styles.js';
+/**
+ *  HTML headings are titles or subtitles that you want to display on a webpage. The H1 is the most important and H6
+ *  is the least important in the content hierarchy.
+ *
+ * # How to Use
+ * 1. The cre8-heading tag wraps around one of the six native HTML "h" tags, depending on your chosen variation.
+ * 2. There are two main use cases for using this component:
+ *    text passage headings and Components with a title (i.e. modal, card or alert)
+ * 3. There will be instances when the design requires the heading text to have the brand color applied
+ *    in which case you should set the [brandColor](?path=/story/cre8-components-heading--brand-color)
+ *    attribute to true on the cre8-heading tag.
+ * 4. For dark backgrounds, add the [inverted](?path=/story/cre8-components-heading--inverted)
+ *    attribute to the tag for white text.
+ *
+ *
+ * @slot - The heading text content
+ */
+export class Cre8Heading extends Cre8Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Dynamic tag name for the component
+         * 1) This is needed to use proper semantic heading treatments depending on where the banner lives on the page
+         * <cre8-text-passage size="small">
+         * <ul>
+         * <li>**h1** renders an `h1` tag</li>
+         * <li>**h2** renders an `h2` tag. This is the default</li>
+         * <li>**h3** renders an `h3` tag</li>
+         * <li>**h4** renders an `h4` tag</li>
+         * <li>**h5** renders an `h5` tag</li>
+         * <li>**h6** renders an `h6` tag</li>
+         * </ul>
+         * </cre8-text-passage>
+         *
+         * @attr{string}
+         */
+        this.tagVariant = 'h5';
     }
-  }
-};
-h.styles = [d];
-let a = h;
-o([
-  i()
-], a.prototype, "type");
-o([
-  i()
-], a.prototype, "tagVariant");
-o([
-  i({ type: Boolean, reflect: !0 })
-], a.prototype, "inverted");
-o([
-  i({ type: Boolean, reflect: !0 })
-], a.prototype, "brandColor");
-customElements.get("cre8-heading") === void 0 && customElements.define("cre8-heading", a);
-export {
-  a as Cre8Heading,
-  a as default
-};
+    render() {
+        const tagVariantClassNames = !this.type
+            ? {
+                'cre8-c-heading--headline-large': this.tagVariant === 'h1',
+                'cre8-c-heading--headline-default': this.tagVariant === 'h2',
+                'cre8-c-heading--headline-small': this.tagVariant === 'h3',
+                'cre8-c-heading--title-large': this.tagVariant === 'h4',
+                'cre8-c-heading--title-default': this.tagVariant === 'h5',
+                'cre8-c-heading--title-small': this.tagVariant === 'h6',
+            }
+            : {};
+        const componentClassName = this.componentClassNames('cre8-c-heading', {
+            ...tagVariantClassNames,
+            'cre8-c-heading--headline-large': this.type === 'headline-large',
+            'cre8-c-heading--headline-default': this.type === 'headline-default',
+            'cre8-c-heading--headline-small': this.type === 'headline-small',
+            'cre8-c-heading--title-large': this.type === 'title-large',
+            'cre8-c-heading--title-default': this.type === 'title-default',
+            'cre8-c-heading--title-small': this.type === 'title-small',
+            'cre8-c-heading--title-xlarge': this.type === 'title-xlarge',
+            'cre8-c-heading--display-default': this.type === 'display-default',
+            'cre8-c-heading--display-small': this.type === 'display-small',
+            'cre8-c-heading--label-large': this.type === 'label-large',
+            'cre8-c-heading--label-default': this.type === 'label-default',
+            'cre8-c-heading--label-small': this.type === 'label-small',
+            'cre8-c-heading--meta-large': this.type === 'meta-large',
+            'cre8-c-heading--meta-default': this.type === 'meta-default',
+            'cre8-c-heading--meta-small': this.type === 'meta-small',
+            'cre8-c-heading--brand-color': this.brandColor,
+            'cre8-c-heading--inverted': this.inverted,
+        });
+        switch (this.tagVariant) {
+            case 'h1':
+                return html ` <h1 part="tag" class="${componentClassName}"><slot></slot></h1> `;
+            case 'h2':
+                return html ` <h2 part="tag" class="${componentClassName}"><slot></slot></h2> `;
+            case 'h3':
+                return html ` <h3 part="tag" class="${componentClassName}"><slot></slot></h3> `;
+            case 'h4':
+                return html ` <h4 part="tag" class="${componentClassName}"><slot></slot></h4> `;
+            case 'h5':
+                return html ` <h5 part="tag" class="${componentClassName}"><slot></slot></h5> `;
+            case 'h6':
+                return html ` <h6 part="tag" class="${componentClassName}"><slot></slot></h6> `;
+            default:
+                return html ` <h4 part="tag" class="${componentClassName}"><slot></slot></h4> `;
+        }
+    }
+}
+Cre8Heading.styles = [styles];
+__decorate([
+    property()
+], Cre8Heading.prototype, "type", void 0);
+__decorate([
+    property()
+], Cre8Heading.prototype, "tagVariant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Heading.prototype, "inverted", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Heading.prototype, "brandColor", void 0);
+if (customElements.get('cre8-heading') === undefined) {
+    customElements.define('cre8-heading', Cre8Heading);
+}
+export default Cre8Heading;
+//# sourceMappingURL=heading.js.map

package/lib/components/heading/heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.js","sourceRoot":"","sources":["../../../components/heading/heading.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAErC;;;;;;;;;;;;;;;;GAgBG;AACP,MAAM,OAAO,WAAY,SAAQ,WAAW;IAA5C;;QA2CI;;;;;;;;;;;;;;;WAeG;QAEC,eAAU,GAA4C,IAAI,CAAC;IAoEnE,CAAC;IAlDG,MAAM;QACF,MAAM,oBAAoB,GAAG,CAAC,IAAI,CAAC,IAAI;YACnC,CAAC,CAAC;gBACE,gCAAgC,EAAE,IAAI,CAAC,UAAU,KAAK,IAAI;gBAC1D,kCAAkC,EAAE,IAAI,CAAC,UAAU,KAAK,IAAI;gBAC5D,gCAAgC,EAAE,IAAI,CAAC,UAAU,KAAK,IAAI;gBAC1D,6BAA6B,EAAE,IAAI,CAAC,UAAU,KAAK,IAAI;gBACvD,+BAA+B,EAAE,IAAI,CAAC,UAAU,KAAK,IAAI;gBACzD,6BAA6B,EAAE,IAAI,CAAC,UAAU,KAAK,IAAI;aAC1D;YACD,CAAC,CAAC,EAAE,CAAC;QAET,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,EAAE;YAClE,GAAG,oBAAoB;YACvB,gCAAgC,EAAE,IAAI,CAAC,IAAI,KAAK,gBAAgB;YAChE,kCAAkC,EAAE,IAAI,CAAC,IAAI,KAAK,kBAAkB;YACpE,gCAAgC,EAAE,IAAI,CAAC,IAAI,KAAK,gBAAgB;YAChE,6BAA6B,EAAE,IAAI,CAAC,IAAI,KAAK,aAAa;YAC1D,+BAA+B,EAAE,IAAI,CAAC,IAAI,KAAK,eAAe;YAC9D,6BAA6B,EAAE,IAAI,CAAC,IAAI,KAAK,aAAa;YAC1D,8BAA8B,EAAE,IAAI,CAAC,IAAI,KAAK,cAAc;YAC5D,iCAAiC,EAAE,IAAI,CAAC,IAAI,KAAK,iBAAiB;YAClE,+BAA+B,EAAE,IAAI,CAAC,IAAI,KAAK,eAAe;YAC9D,6BAA6B,EAAE,IAAI,CAAC,IAAI,KAAK,aAAa;YAC1D,+BAA+B,EAAE,IAAI,CAAC,IAAI,KAAK,eAAe;YAC9D,6BAA6B,EAAE,IAAI,CAAC,IAAI,KAAK,aAAa;YAC1D,4BAA4B,EAAE,IAAI,CAAC,IAAI,KAAK,YAAY;YACxD,8BAA8B,EAAE,IAAI,CAAC,IAAI,KAAK,cAAc;YAC5D,4BAA4B,EAAE,IAAI,CAAC,IAAI,KAAK,YAAY;YACxD,6BAA6B,EAAE,IAAI,CAAC,UAAU;YAC9C,0BAA0B,EAAE,IAAI,CAAC,QAAQ;SAC5C,CAAC,CAAC;QAEH,QAAQ,IAAI,CAAC,UAAU,EAAE,CAAC;YACtB,KAAK,IAAI;gBACL,OAAO,IAAI,CAAA,0BAA0B,kBAAkB,uBAAuB,CAAC;YACnF,KAAK,IAAI;gBACL,OAAO,IAAI,CAAA,0BAA0B,kBAAkB,uBAAuB,CAAC;YACnF,KAAK,IAAI;gBACL,OAAO,IAAI,CAAA,0BAA0B,kBAAkB,uBAAuB,CAAC;YACnF,KAAK,IAAI;gBACL,OAAO,IAAI,CAAA,0BAA0B,kBAAkB,uBAAuB,CAAC;YACnF,KAAK,IAAI;gBACL,OAAO,IAAI,CAAA,0BAA0B,kBAAkB,uBAAuB,CAAC;YACnF,KAAK,IAAI;gBACL,OAAO,IAAI,CAAA,0BAA0B,kBAAkB,uBAAuB,CAAC;YACnF;gBACI,OAAO,IAAI,CAAA,0BAA0B,kBAAkB,uBAAuB,CAAC;QACvF,CAAC;IACL,CAAC;;AA9HM,kBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAyBrB;IADH,QAAQ,EAAE;yCAgBQ;AAmBf;IADH,QAAQ,EAAE;+CACoD;AAQ3D;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACpB;AAQnB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAClB;AAuD7B,IAAI,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,KAAK,SAAS,EAAE,CAAC;IACnD,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;AACvD,CAAC;AAQD,eAAe,WAAW,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './heading.styles.js';\n\n    /**\n     *  HTML headings are titles or subtitles that you want to display on a webpage. The H1 is the most important and H6\n     *  is the least important in the content hierarchy.\n     *\n     * # How to Use\n     * 1. The cre8-heading tag wraps around one of the six native HTML \"h\" tags, depending on your chosen variation.\n     * 2. There are two main use cases for using this component:\n     *    text passage headings and Components with a title (i.e. modal, card or alert)\n     * 3. There will be instances when the design requires the heading text to have the brand color applied\n     *    in which case you should set the [brandColor](?path=/story/cre8-components-heading--brand-color)\n     *    attribute to true on the cre8-heading tag.\n     * 4. For dark backgrounds, add the [inverted](?path=/story/cre8-components-heading--inverted)\n     *    attribute to the tag for white text.\n     *\n     *\n     * @slot - The heading text content\n     */\nexport class Cre8Heading extends Cre8Element {\n    static styles = [styles];\n\n    /**\n     * Heading type\n     * <cre8-text-passage size=\"small\">\n     * <ul>\n     * <li>**display-default** renders a heading with the heading display-default preset treatment</li>\n     * <li>**display-small** renders a heading with the heading display-small preset treatment</li>\n     * <li>**headline-large** renders a heading with the heading headline-large preset treatment</li>\n     * <li>**headline-default** renders a heading with the heading headline-default preset treatment</li>\n     * <li>**headline-small** renders a heading with the heading headline-small preset treatment</li>\n     * <li>**title-xlarge** renders a heading with the heading title-xlarge preset treatment</li>\n     * <li>**title-large** renders a heading with the heading title-large preset treatment</li>\n     * <li>**title-default** renders a heading with the heading title-default preset treatment</li>\n     * <li>**title-small** renders a heading with the heading title-small preset treatment</li>\n     * <li>**label-large** renders a heading with the label-large preset treatment</li>\n     * <li>**label** renders a heading with the label preset treatment</li>\n     * <li>**label-small** renders a heading with the label-small preset treatment</li>\n     * <li>**meta-large** renders a heading with the meta-large preset treatment</li>\n     * <li>**meta-default** renders a heading with the meta-default preset treatment</li>\n     * <li>**meta-small** renders a heading with the meta-small preset treatment</li>\n     * </ul>\n     * </cre8-text-passage>\n     */\n    @property()\n        type?:\n        | 'display-default'\n        | 'display-small'\n        | 'headline-large'\n        | 'headline-default'\n        | 'headline-small'\n        | 'title-xlarge'\n        | 'title-large'\n        | 'title-default'\n        | 'title-small'\n        | 'label-large'\n        | 'label-default'\n        | 'label-small'\n        | 'meta-large'\n        | 'meta-default'\n        | 'meta-small';\n\n    /**\n     * Dynamic tag name for the component\n     * 1) This is needed to use proper semantic heading treatments depending on where the banner lives on the page\n     * <cre8-text-passage size=\"small\">\n     * <ul>\n     * <li>**h1** renders an `h1` tag</li>\n     * <li>**h2** renders an `h2` tag. This is the default</li>\n     * <li>**h3** renders an `h3` tag</li>\n     * <li>**h4** renders an `h4` tag</li>\n     * <li>**h5** renders an `h5` tag</li>\n     * <li>**h6** renders an `h6` tag</li>\n     * </ul>\n     * </cre8-text-passage>\n     *\n     * @attr{string}\n     */\n    @property()\n        tagVariant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h5';\n\n    /**\n     * Invert the color of the font from dark to light. An inverted `heading` should be used on a dark background.\n     *\n     * @attr{boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n        inverted?: boolean;\n\n    /**\n     * Apply the brand color to the heading text.\n     *\n     * @attr{boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n        brandColor?: boolean;\n\n    render() {\n        const tagVariantClassNames = !this.type\n            ? {\n                'cre8-c-heading--headline-large': this.tagVariant === 'h1',\n                'cre8-c-heading--headline-default': this.tagVariant === 'h2',\n                'cre8-c-heading--headline-small': this.tagVariant === 'h3',\n                'cre8-c-heading--title-large': this.tagVariant === 'h4',\n                'cre8-c-heading--title-default': this.tagVariant === 'h5',\n                'cre8-c-heading--title-small': this.tagVariant === 'h6',\n            }\n            : {};\n\n        const componentClassName = this.componentClassNames('cre8-c-heading', {\n            ...tagVariantClassNames,\n            'cre8-c-heading--headline-large': this.type === 'headline-large',\n            'cre8-c-heading--headline-default': this.type === 'headline-default',\n            'cre8-c-heading--headline-small': this.type === 'headline-small',\n            'cre8-c-heading--title-large': this.type === 'title-large',\n            'cre8-c-heading--title-default': this.type === 'title-default',\n            'cre8-c-heading--title-small': this.type === 'title-small',\n            'cre8-c-heading--title-xlarge': this.type === 'title-xlarge',\n            'cre8-c-heading--display-default': this.type === 'display-default',\n            'cre8-c-heading--display-small': this.type === 'display-small',\n            'cre8-c-heading--label-large': this.type === 'label-large',\n            'cre8-c-heading--label-default': this.type === 'label-default',\n            'cre8-c-heading--label-small': this.type === 'label-small',\n            'cre8-c-heading--meta-large': this.type === 'meta-large',\n            'cre8-c-heading--meta-default': this.type === 'meta-default',\n            'cre8-c-heading--meta-small': this.type === 'meta-small',\n            'cre8-c-heading--brand-color': this.brandColor,\n            'cre8-c-heading--inverted': this.inverted,\n        });\n\n        switch (this.tagVariant) {\n            case 'h1':\n                return html` <h1 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h1> `;\n            case 'h2':\n                return html` <h2 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h2> `;\n            case 'h3':\n                return html` <h3 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h3> `;\n            case 'h4':\n                return html` <h4 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h4> `;\n            case 'h5':\n                return html` <h5 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h5> `;\n            case 'h6':\n                return html` <h6 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h6> `;\n            default:\n                return html` <h4 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h4> `;\n        }\n    }\n}\n\n\nif (customElements.get('cre8-heading') === undefined) {\n    customElements.define('cre8-heading', Cre8Heading);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-heading': Cre8Heading;\n    }\n}\n\nexport default Cre8Heading;\n"]}