@tmorrow/cre8-wc 1.0.26 → 1.1.1

package/lib/components/inline-alert/inline-alert.js

@@ -1,179 +1,18 @@
-import { d as u, f as v, b as p } from "../../icon-DImqxDiW.js";
-import { s as g } from "../../Error-aYunUubM.js";
-import { css as f, nothing as b, html as r } from "lit";
-import { property as i } from "lit/decorators.js";
-import { Cre8Element as C } from "../cre8-element.js";
-const h = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+import { d as h, f as u, b as g } from "../../icon-D22g8aWB.js";
+import { s as f } from "../../Error-aYunUubM.js";
+import { css as m, nothing as v, html as e } from "lit";
+import { property as n } from "lit/decorators.js";
+import { Cre8Element as b } from "../cre8-element.js";
+const p = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
 <path d="M8 0C6.41775 0 4.87103 0.469192 3.55544 1.34824C2.23985 2.22729 1.21447 3.47672 0.608967 4.93853C0.00346628 6.40034 -0.15496 8.00887 0.153721 9.56072C0.462403 11.1126 1.22433 12.538 2.34315 13.6569C3.46197 14.7757 4.88743 15.5376 6.43928 15.8463C7.99113 16.155 9.59966 15.9965 11.0615 15.391C12.5233 14.7855 13.7727 13.7602 14.6518 12.4446C15.5308 11.129 16 9.58225 16 8C15.9978 5.87895 15.1542 3.84542 13.6544 2.34562C12.1546 0.845814 10.121 0.00223986 8 0ZM8 12.9231C7.81743 12.9231 7.63897 12.8689 7.48717 12.7675C7.33537 12.6661 7.21706 12.5219 7.14719 12.3532C7.07732 12.1846 7.05904 11.999 7.09466 11.8199C7.13028 11.6409 7.21819 11.4764 7.34729 11.3473C7.47638 11.2182 7.64086 11.1303 7.81992 11.0947C7.99898 11.059 8.18458 11.0773 8.35325 11.1472C8.52192 11.2171 8.66608 11.3354 8.76751 11.4872C8.86894 11.639 8.92308 11.8174 8.92308 12C8.92308 12.2448 8.82583 12.4796 8.65271 12.6527C8.4796 12.8258 8.24482 12.9231 8 12.9231ZM8.61539 9.17538V9.23077C8.61539 9.39398 8.55055 9.5505 8.43514 9.66591C8.31974 9.78132 8.16321 9.84615 8 9.84615C7.83679 9.84615 7.68027 9.78132 7.56486 9.66591C7.44945 9.5505 7.38462 9.39398 7.38462 9.23077V8.61538C7.38462 8.45217 7.44945 8.29565 7.56486 8.18024C7.68027 8.06483 7.83679 8 8 8C9.01769 8 9.84616 7.30769 9.84616 6.46154C9.84616 5.61538 9.01769 4.92308 8 4.92308C6.98231 4.92308 6.15385 5.61538 6.15385 6.46154V6.76923C6.15385 6.93244 6.08901 7.08896 5.97361 7.20437C5.8582 7.31978 5.70167 7.38461 5.53846 7.38461C5.37525 7.38461 5.21873 7.31978 5.10332 7.20437C4.98791 7.08896 4.92308 6.93244 4.92308 6.76923V6.46154C4.92308 4.93461 6.30308 3.69231 8 3.69231C9.69692 3.69231 11.0769 4.93461 11.0769 6.46154C11.0769 7.79846 10.0185 8.91769 8.61539 9.17538Z"/>
 </svg>
-`, w = f`@import '../../design-tokens/core/scss/theming/component';
-
-:host {
-  display: inline-flex;
-}
-:host([fullWidth]) {
-  display: flex;
-}
-
-/**
- * Inline alert
- */
-.cre8-c-inline-alert {
-  @include cre8-typography-body-default();
-  font-weight: normal;
-  display: inline-flex;
-  align-items: flex-start;
-  gap: calc(8px * 1);
-  padding: calc(8px * 2);
-  color: var(--cre8-color-content-default);
-  background-color: var(--cre8-color-bg-info);
-  border-color: var(--cre8-color-border-info);
-  border-width: var(--cre8-border-width-default);
-  border-style: var(--cre8-border-style-default);
-  border-radius: var(--cre8-border-radius-default);
-}
-
-/**
- * Full-width inline alert
- */
-.cre8-c-inline-alert--full-width {
-  width: 100%;
-}
-
-/**
- * Inline alert with error variant
- */
-.cre8-c-inline-alert--error {
-  background-color: var(--cre8-color-bg-error);
-  border-color: var(--cre8-color-border-error);
-}
-
-/**
- * Inline alert with warning variant
- */
-.cre8-c-inline-alert--warning {
-  background-color: var(--cre8-color-bg-warning);
-  border-color: var(--cre8-color-border-warning);
-}
-
-/**
- * Inline alert with success variant
- */
-.cre8-c-inline-alert--success {
-  background-color: var(--cre8-color-bg-success);
-  border-color: var(--cre8-color-border-success);
-}
-
-/**
- * Inline alert with attention variant
- */
-.cre8-c-inline-alert--attention {
-  background-color: var(--cre8-color-bg-attention);
-  border-color: var(--cre8-color-border-attention);
-}
-
-/**
- * Inline alert with neutral variant
- */
-.cre8-c-inline-alert--neutral {
-  background-color: var(--cre8-color-bg-subtle);
-  border-color: var(--cre8-color-border-strong);
-}
-
-/**
- * Inline alert with variant - transparent
- */
-.cre8-c-inline-alert--transparent {
-  padding: 0;
-  border: none;
-  background-color: transparent;
-  gap: calc(8px * 1);
-  border-radius: none;
-}
-
-/**
- * Inline alert with variant - transparent and error
- */
-.cre8-c-inline-alert--transparent.cre8-c-inline-alert--error {
-  color: var(--cre8-color-content-error);
-}
-
-/**
- * Inline alert with variant - transparent and success
- */
-.cre8-c-inline-alert--transparent.cre8-c-inline-alert--success {
-  color: var(--cre8-color-content-success);
-}
-
-/**
- * Inline alert icon
- */
-.cre8-c-inline-alert__icon {
-  position: relative;
-  color: var(--cre8-color-content-info-icon);
-  height: calc(8px * 3);
-  width: calc(8px * 3);
-
-  /**
-   * Inline alert icon for error variant
-   */
-  .cre8-c-inline-alert--error & {
-    color: var(--cre8-color-content-error-icon);
-  }
-
-  /**
-   * Inline alert icon for warning variant
-   */
-  .cre8-c-inline-alert--warning & {
-    color: var(--cre8-color-content-warning-icon);
-  }
-
-  /**
-   * Inline alert icon for success variant
-   */
-  .cre8-c-inline-alert--success & {
-    color: var(--cre8-color-content-success-icon);
-  }
-
-  /**
-   * Inline alert icon for help variant
-   * Inline alert icon for info variant
-   */
-   .cre8-c-inline-alert--help,
-   .cre8-c-inline-alert--info
-    & {
-    color: var(--cre8-color-content-info-icon);
-  }
-
-  /**
-   * Inline alert icon for attention variant
-   */
-  .cre8-c-inline-alert--attention & {
-    color: var(--cre8-color-content-attention-icon);
-  }
-
-  /**
-   * Inline alert icon for neutral variant
-   */
-  .cre8-c-inline-alert--neutral & {
-    color: var(--cre8-color-content-default);
-  }
-
-  /**
-   * Inline alert icon
-   */
-  .cre8-c-inline-alert--transparent & {
-    top: 0;
-    padding: calc(8px * 0.25);
-  }
-}
-`;
-var m = Object.defineProperty, c = (l, n, s, I) => {
-  for (var t = void 0, a = l.length - 1, d; a >= 0; a--)
-    (d = l[a]) && (t = d(n, s, t) || t);
-  return t && m(n, s, t), t;
+`, y = 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}:host{display:inline-flex}:host([fullWidth]){display:flex}.cre8-c-inline-alert{font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);font-weight:normal;display:inline-flex;align-items:flex-start;gap:0.5rem;padding:1rem;color:var(--cre8-color-content-default);background-color:var(--cre8-color-bg-info);border-color:var(--cre8-color-border-info);border-width:var(--cre8-border-width-default);border-style:var(--cre8-border-style-default);border-radius:var(--cre8-border-radius-default)}.cre8-c-inline-alert--full-width{width:100%}.cre8-c-inline-alert--error{background-color:var(--cre8-color-bg-error);border-color:var(--cre8-color-border-error)}.cre8-c-inline-alert--warning{background-color:var(--cre8-color-bg-warning);border-color:var(--cre8-color-border-warning)}.cre8-c-inline-alert--success{background-color:var(--cre8-color-bg-success);border-color:var(--cre8-color-border-success)}.cre8-c-inline-alert--attention{background-color:var(--cre8-color-bg-attention);border-color:var(--cre8-color-border-attention)}.cre8-c-inline-alert--neutral{background-color:var(--cre8-color-bg-subtle);border-color:var(--cre8-color-border-strong)}.cre8-c-inline-alert--transparent{padding:0;border:none;background-color:rgba(0,0,0,0);gap:0.5rem;border-radius:none}.cre8-c-inline-alert--transparent.cre8-c-inline-alert--error{color:var(--cre8-color-content-error)}.cre8-c-inline-alert--transparent.cre8-c-inline-alert--success{color:var(--cre8-color-content-success)}.cre8-c-inline-alert__icon{position:relative;color:var(--cre8-color-content-info-icon);height:1.5rem;width:1.5rem}.cre8-c-inline-alert--error .cre8-c-inline-alert__icon{color:var(--cre8-color-content-error-icon)}.cre8-c-inline-alert--warning .cre8-c-inline-alert__icon{color:var(--cre8-color-content-warning-icon)}.cre8-c-inline-alert--success .cre8-c-inline-alert__icon{color:var(--cre8-color-content-success-icon)}.cre8-c-inline-alert__icon .cre8-c-inline-alert--help,.cre8-c-inline-alert--info .cre8-c-inline-alert__icon{color:var(--cre8-color-content-info-icon)}.cre8-c-inline-alert--attention .cre8-c-inline-alert__icon{color:var(--cre8-color-content-attention-icon)}.cre8-c-inline-alert--neutral .cre8-c-inline-alert__icon{color:var(--cre8-color-content-default)}.cre8-c-inline-alert--transparent .cre8-c-inline-alert__icon{top:0;padding:0.125rem}`;
+var w = Object.defineProperty, a = (l, t, s, x) => {
+  for (var i = void 0, c = l.length - 1, d; c >= 0; c--)
+    (d = l[c]) && (i = d(t, s, i) || i);
+  return i && w(t, s, i), i;
 };
-const o = class o extends C {
+const o = class o extends b {
   constructor() {
     super(...arguments), this.variant = "subtle", this.status = "info";
   }
@@ -182,56 +21,56 @@ const o = class o extends C {
   *#
   * this provides the recommendated alt text of different statuses
   */
-  mapStatusToIconInlineAlert(n) {
-    switch (n) {
+  mapStatusToIconInlineAlert(t) {
+    switch (t) {
       case "error":
-        return r`<cre8-icon 
-                svg='${g}' 
+        return e`<cre8-icon 
+                svg='${f}' 
                 aria-label="${this.iconTitle}"
                 aria-hidden="true"
                 class="cre8-c-inline-alert__icon"></cre8-icon>`;
       case "success":
-        return r`<cre8-icon 
-                svg='${p}' 
+        return e`<cre8-icon 
+                svg='${g}' 
                 aria-label="${this.iconTitle}"
                 aria-hidden="true"
                 class="cre8-c-inline-alert__icon"></cre8-icon>`;
       case "warning":
-        return r`<cre8-icon 
-                svg='${v}'
+        return e`<cre8-icon 
+                svg='${u}'
                 aria-label="${this.iconTitle}"
                 aria-hidden="true"
                 class="cre8-c-inline-alert__icon"></cre8-icon>`;
       case "help":
-        return r`<cre8-icon 
-                svg='${h}'
+        return e`<cre8-icon 
+                svg='${p}'
                 aria-label="${this.iconTitle}"
                 aria-hidden="true"
                 class="cre8-c-inline-alert__icon"></cre8-icon>`;
       case "info":
-        return r`<cre8-icon 
-                svg='${u}'
+        return e`<cre8-icon 
+                svg='${h}'
                 aria-label="${this.iconTitle}"
                 aria-hidden="true"
                 class="cre8-c-inline-alert__icon"></cre8-icon>`;
       case "attention":
-        return r`<cre8-icon 
-                svg='${u}'
+        return e`<cre8-icon 
+                svg='${h}'
                 aria-label="${this.iconTitle}"
                 aria-hidden="true"
                 class="cre8-c-inline-alert__icon"></cre8-icon>`;
       case "neutral":
-        return r`<cre8-icon 
-                svg='${h}'
+        return e`<cre8-icon 
+                svg='${p}'
                 aria-label="${this.iconTitle}"
                 aria-hidden="true"
                 class="cre8-c-inline-alert__icon"></cre8-icon>`;
       default:
-        return b;
+        return v;
     }
   }
   render() {
-    const n = this.componentClassNames("cre8-c-inline-alert", {
+    const t = this.componentClassNames("cre8-c-inline-alert", {
       "cre8-c-inline-alert--transparent": this.variant === "transparent",
       "cre8-c-inline-alert--error": this.status === "error",
       "cre8-c-inline-alert--warning": this.status === "warning",
@@ -242,9 +81,9 @@ const o = class o extends C {
       "cre8-c-inline-alert--info": this.status === "info",
       "cre8-c-inline-alert--full-width": this.fullWidth
     });
-    return r`
-        <div class="${n}">
-            ${this.iconName || this.status ? r` ${this.mapStatusToIconInlineAlert(this.status)}` : ""}
+    return e`
+        <div class="${t}">
+            ${this.iconName || this.status ? e` ${this.mapStatusToIconInlineAlert(this.status)}` : ""}
             <div class="cre8-c-inline-alert__body">
                 <slot></slot>
             </div>
@@ -252,25 +91,25 @@ const o = class o extends C {
         `;
   }
 };
-o.styles = [w];
-let e = o;
-c([
-  i()
-], e.prototype, "iconName");
-c([
-  i({ type: Boolean, reflect: !0 })
-], e.prototype, "fullWidth");
-c([
-  i()
-], e.prototype, "iconTitle");
-c([
-  i()
-], e.prototype, "variant");
-c([
-  i({ type: String })
-], e.prototype, "status");
-customElements.get("cre8-inline-alert") === void 0 && customElements.define("cre8-inline-alert", e);
+o.styles = [y];
+let r = o;
+a([
+  n()
+], r.prototype, "iconName");
+a([
+  n({ type: Boolean, reflect: !0 })
+], r.prototype, "fullWidth");
+a([
+  n()
+], r.prototype, "iconTitle");
+a([
+  n()
+], r.prototype, "variant");
+a([
+  n({ type: String })
+], r.prototype, "status");
+customElements.get("cre8-inline-alert") === void 0 && customElements.define("cre8-inline-alert", r);
 export {
-  e as Cre8InlineAlert,
-  e as default
+  r as Cre8InlineAlert,
+  r as default
 };

package/lib/components/inline-alert/inline-alert.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inline-alert.styles.d.ts","sourceRoot":"","sources":["../../../components/inline-alert/inline-alert.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAiKX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"inline-alert.styles.d.ts","sourceRoot":"","sources":["../../../components/inline-alert/inline-alert.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAi1I,CAAC;AAC91I,eAAe,MAAM,CAAC"}

package/lib/components/layout/layout.js

@@ -1,64 +1,31 @@
-import { css as l, html as c } from "lit";
-import { property as d } from "lit/decorators.js";
-import { Cre8Element as m } from "../cre8-element.js";
-const p = l`@import '../../design-tokens/core/scss/theming/component';
-
-// #LAYOUT
-
-/**
- * 1) Layout wrapper that houses layout section Components to create a layouts like
- * sidebar layouts that are 1 row across and not a grid
- */
-.cre8-c-layout {
-  display: grid;
-  flex: 1;
-  gap: calc(8px * 2);
-  grid-template-columns: minmax(0, 1fr);
-
-  @media all and (min-width:$cre8-breakpoint-lg) {
-    gap: calc(8px * 4);
-    grid-template-columns: minmax(0, 1fr) calc(var(--cre8-sidebar-width, 40%) - (calc(8px * 1))); /* 2 */
-  }
-}
-
-/**
- * Left sidebar layout
- * 1) Layout that is stacked on small screens and turns into a left sidebar with main
- * content to the right
- * 2) The main column stretches the full width minus the sidebar width and gap.
- *    The sidebar column has a minimum width value (enough to accommodate navigation
- *    and other sidebar content) but stretches to fit the content placed inside it.
- */
-.cre8-c-layout--left-sidebar {
-  @media all and (min-width:$cre8-breakpoint-lg) {
-    grid-template-columns: calc(var(--cre8-sidebar-width, 40%) - (calc(8px * 1))) minmax(0, 1fr); /* 2 */
-  }
-}
-`;
-var h = Object.defineProperty, u = (r, e, o, f) => {
-  for (var t = void 0, s = r.length - 1, n; s >= 0; s--)
-    (n = r[s]) && (t = n(e, o, t) || t);
-  return t && h(e, o, t), t;
+import { css as m, html as n } from "lit";
+import { property as o } from "lit/decorators.js";
+import { Cre8Element as p } from "../cre8-element.js";
+const h = m`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-layout{display:grid;flex:1;gap:1rem;grid-template-columns:minmax(0, 1fr)}@media all and (min-width: 960px){.cre8-c-layout{gap:2rem;grid-template-columns:minmax(0, 1fr) calc(var(--cre8-sidebar-width, 40%) - (0.5rem))}}@media all and (min-width: 960px){.cre8-c-layout--left-sidebar{grid-template-columns:calc(var(--cre8-sidebar-width, 40%) - (0.5rem)) minmax(0, 1fr)}}`;
+var c = Object.defineProperty, f = (s, t, d, x) => {
+  for (var e = void 0, i = s.length - 1, l; i >= 0; i--)
+    (l = s[i]) && (e = l(t, d, e) || e);
+  return e && c(t, d, e), e;
 };
-const i = class i extends m {
+const a = class a extends p {
   render() {
-    const e = this.componentClassNames("cre8-c-layout", {
+    const t = this.componentClassNames("cre8-c-layout", {
       "cre8-c-layout--left-sidebar": this.variant === "left-sidebar"
     });
-    return c`
-      <div class="${e}">
+    return n`
+      <div class="${t}">
         <slot></slot>
       </div>
     `;
   }
 };
-i.styles = [p];
-let a = i;
-u([
-  d()
-], a.prototype, "variant");
-customElements.get("cre8-layout") === void 0 && customElements.define("cre8-layout", a);
+a.styles = [h];
+let r = a;
+f([
+  o()
+], r.prototype, "variant");
+customElements.get("cre8-layout") === void 0 && customElements.define("cre8-layout", r);
 export {
-  a as Cre8Layout,
-  a as default
+  r as Cre8Layout,
+  r as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"layout.styles.d.ts","sourceRoot":"","sources":["../../../components/layout/layout.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAiCX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"layout.styles.d.ts","sourceRoot":"","sources":["../../../components/layout/layout.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAsoE,CAAC;AACnpE,eAAe,MAAM,CAAC"}

package/lib/components/layout-container/layout-container.js

@@ -1,54 +1,31 @@
-import { css as a, html as c } from "lit";
-import { property as m } from "lit/decorators.js";
-import { Cre8Element as h } from "../cre8-element.js";
-const d = a`@import '../../design-tokens/core/scss/theming/component';
-
-// #LAYOUT CONTAINER
-
-/**
- * Layout Container
- * 1) Caps the width of the content to the maximum width
- *    and centers the container
- */
-.cre8-l-layout-container {
-  width: 100%;
-  max-width: var(--cre8-l-max-width);
-  padding-right: calc(8px * 2);
-  padding-left: calc(8px * 2);
-  margin: 0 auto;
-}
-
-.cre8-l-layout-container--full-height {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  height: 100%;
-}
-`;
-var f = Object.defineProperty, p = (r, e, i, u) => {
-  for (var t = void 0, l = r.length - 1, s; l >= 0; l--)
-    (s = r[l]) && (t = s(e, i, t) || t);
-  return t && f(e, i, t), t;
+import { css as n, html as o } from "lit";
+import { property as h } from "lit/decorators.js";
+import { Cre8Element as m } from "../cre8-element.js";
+const p = n`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-l-layout-container{width:100%;max-width:var(--cre8-l-max-width);padding-right:1rem;padding-left:1rem;margin:0 auto}.cre8-l-layout-container--full-height{display:flex;flex-direction:column;flex:1;height:100%}`;
+var c = Object.defineProperty, f = (s, t, l, x) => {
+  for (var e = void 0, i = s.length - 1, d; i >= 0; i--)
+    (d = s[i]) && (e = d(t, l, e) || e);
+  return e && c(t, l, e), e;
 };
-const n = class n extends h {
+const a = class a extends m {
   render() {
-    const e = this.componentClassNames("cre8-l-layout-container", {
+    const t = this.componentClassNames("cre8-l-layout-container", {
       "cre8-l-layout-container--full-height": this.fullHeight === !0
     });
-    return c`
-      <div class="${e}">
+    return o`
+      <div class="${t}">
         <slot></slot>
       </div>
     `;
   }
 };
-n.styles = [d];
-let o = n;
-p([
-  m({ type: Boolean, reflect: !0 })
-], o.prototype, "fullHeight");
-customElements.get("cre8-layout-container") === void 0 && customElements.define("cre8-layout-container", o);
+a.styles = [p];
+let r = a;
+f([
+  h({ type: Boolean, reflect: !0 })
+], r.prototype, "fullHeight");
+customElements.get("cre8-layout-container") === void 0 && customElements.define("cre8-layout-container", r);
 export {
-  o as Cre8LayoutContainer,
-  o as default
+  r as Cre8LayoutContainer,
+  r as default
 };

package/lib/components/layout-container/layout-container.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout-container.styles.d.ts","sourceRoot":"","sources":["../../../components/layout-container/layout-container.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAuBX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"layout-container.styles.d.ts","sourceRoot":"","sources":["../../../components/layout-container/layout-container.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAq+D,CAAC;AACl/D,eAAe,MAAM,CAAC"}

package/lib/components/layout-section/layout-section.js

@@ -1,46 +1,37 @@
-import { css as p, html as a } from "lit";
+import { css as h, html as p } from "lit";
 import { property as l } from "lit/decorators.js";
-import { Cre8Element as h } from "../cre8-element.js";
-const u = p`@import '../../design-tokens/core/scss/theming/component';
-
-/**
- * 1) Section within the layout component for each item
- */
-.cre8-c-layout-section {
-  width: 100%;
-  height: 100%;
-}
-`;
-var d = Object.defineProperty, m = (i, s, c, f) => {
-  for (var t = void 0, o = i.length - 1, n; o >= 0; o--)
-    (n = i[o]) && (t = n(s, c, t) || t);
-  return t && d(s, c, t), t;
+import { Cre8Element as m } from "../cre8-element.js";
+const c = h`*,::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-layout-section{width:100%;height:100%}`;
+var f = Object.defineProperty, n = (a, r, d, x) => {
+  for (var e = void 0, i = a.length - 1, o; i >= 0; i--)
+    (o = a[i]) && (e = o(r, d, e) || e);
+  return e && f(r, d, e), e;
 };
-const r = class r extends h {
+const s = class s extends m {
   constructor() {
     super(...arguments), this.top = "1rem";
   }
   render() {
-    const s = this.componentClassNames("cre8-c-layout-section", {
+    const r = this.componentClassNames("cre8-c-layout-section", {
       "cre8-c-layout-section--sticky": this.behavior === "sticky"
     });
-    return a`
-      <div class="${s}" style=${`top: ${this.top}`}>
+    return p`
+      <div class="${r}" style=${`top: ${this.top}`}>
         <slot></slot>
       </div>
     `;
   }
 };
-r.styles = [u];
-let e = r;
-m([
+s.styles = [c];
+let t = s;
+n([
   l()
-], e.prototype, "behavior");
-m([
+], t.prototype, "behavior");
+n([
   l()
-], e.prototype, "top");
-customElements.get("cre8-layout-section") === void 0 && customElements.define("cre8-layout-section", e);
+], t.prototype, "top");
+customElements.get("cre8-layout-section") === void 0 && customElements.define("cre8-layout-section", t);
 export {
-  e as Cre8LayoutSection,
-  e as default
+  t as Cre8LayoutSection,
+  t as default
 };

package/lib/components/layout-section/layout-section.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout-section.styles.d.ts","sourceRoot":"","sources":["../../../components/layout-section/layout-section.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBASX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"layout-section.styles.d.ts","sourceRoot":"","sources":["../../../components/layout-section/layout-section.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA8zD,CAAC;AAC30D,eAAe,MAAM,CAAC"}

package/lib/components/linelength-container/linelength-container.js

@@ -1,24 +1,16 @@
-import { css as n, html as o } from "lit";
-import { Cre8Element as c } from "../cre8-element.js";
-const l = n`@import '../../design-tokens/core/scss/theming/component';
-
-/**
- * 1) Container used to cap the width of a passage of text to be readable
- */
-.cre8-c-linelength-container {
-  max-width: var(--cre8-l-linelength-width);
-}
-`, t = class t extends c {
+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-linelength-container{max-width:var(--cre8-l-linelength-width)}`, t = class t extends a {
   render() {
-    const s = this.componentClassNames("cre8-c-linelength-container", {});
-    return o`
-      <div class="${s}">
+    const i = this.componentClassNames("cre8-c-linelength-container", {});
+    return s`
+      <div class="${i}">
         <slot></slot>
       </div>
     `;
   }
 };
-t.styles = [l];
+t.styles = [d];
 let e = t;
 customElements.get("cre8-linelength-container") === void 0 && customElements.define("cre8-linelength-container", e);
 export {

package/lib/components/linelength-container/linelength-container.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"linelength-container.styles.d.ts","sourceRoot":"","sources":["../../../components/linelength-container/linelength-container.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAQX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"linelength-container.styles.d.ts","sourceRoot":"","sources":["../../../components/linelength-container/linelength-container.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAs1D,CAAC;AACn2D,eAAe,MAAM,CAAC"}