@tmorrow/cre8-wc 1.0.25 → 1.1.1

package/lib/components/select-tile-list/select-tile-list.js

@@ -1,69 +1,31 @@
 import { css as f, html as p } from "lit";
-import { ifDefined as c } from "lit-html/directives/if-defined.js";
+import { ifDefined as a } from "lit-html/directives/if-defined.js";
 import { property as t } from "lit/decorators.js";
-import { nanoid as m } from "nanoid";
-import { Cre8Element as u } from "../cre8-element.js";
+import { nanoid as h } from "nanoid";
+import { Cre8Element as m } from "../cre8-element.js";
 import "../field-note/field-note.js";
-const h = f`@import '../../design-tokens/core/scss/theming/component';
-
-/*------------------------------------*\
- #SELECT-TILE-LIST
-\*------------------------------------*/
-
-:host {
-  display: block;
-}
-
-/** 
- * 1) Fieldset used for checkbox items
- */
-.cre8-c-select-tile-list {
-  border: var(--cre8-border-width-none);
-  padding: var(--cre8-spacing-0);
-  margin: var(--cre8-spacing-0);
-}
-
-/** 
-   * Checkbox field legend
-   */
-.cre8-c-select-tile-list__legend {
-  @include cre8-typography-label-default;
-  margin-bottom: calc(8px * 1);
-}
-
-.cre8-c-select-tile-list__list {
-  gap: calc(8px * 3);
-  display: grid;  
-
-  grid-template-columns: repeat(auto-fit, var(--cre8-select-tile-list-item-width, calc(8px * 26)));
-
-  .cre8-c-select-tile-list__rows & {
-    grid-template-columns: unset;
-  }
-}
-
-`;
-var y = Object.defineProperty, s = (a, r, d, b) => {
-  for (var i = void 0, l = a.length - 1, n; l >= 0; l--)
-    (n = a[l]) && (i = n(r, d, i) || i);
-  return i && y(r, d, i), i;
+const y = f`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:block}.cre8-c-select-tile-list{border:var(--cre8-border-width-none);padding:var(--cre8-spacing-0);margin:var(--cre8-spacing-0)}.cre8-c-select-tile-list__legend{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);margin-bottom:0.5rem}.cre8-c-select-tile-list__list{gap:1.5rem;display:grid;grid-template-columns:repeat(auto-fit, var(--cre8-select-tile-list-item-width, 13rem))}.cre8-c-select-tile-list__rows .cre8-c-select-tile-list__list{grid-template-columns:unset}`;
+var g = Object.defineProperty, r = (d, s, c, u) => {
+  for (var i = void 0, l = d.length - 1, n; l >= 0; l--)
+    (n = d[l]) && (i = n(s, c, i) || i);
+  return i && g(s, c, i), i;
 };
-const o = class o extends u {
+const o = class o extends m {
   constructor() {
     super(...arguments), this.variant = "columns";
   }
   connectedCallback() {
-    super.connectedCallback(), this.fieldNote && (this.ariaDescribedBy = this.ariaDescribedBy || m());
+    super.connectedCallback(), this.fieldNote && (this.ariaDescribedBy = this.ariaDescribedBy || h());
   }
   render() {
-    const r = this.componentClassNames("cre8-c-select-tile-list", {
+    const s = this.componentClassNames("cre8-c-select-tile-list", {
       "cre8-c-select-tile-list__rows": this.variant === "rows"
     });
     return p`
-      <fieldset class="${r}">
+      <fieldset class="${s}">
         <legend
           class="cre8-c-select-tile-list__legend"
-          aria-describedby="${c(this.ariaDescribedBy)}"
+          aria-describedby="${a(this.ariaDescribedBy)}"
         >
           ${this.label}
         </legend>
@@ -74,8 +36,8 @@ const o = class o extends u {
         </div>
         ${this.fieldNote ? p`<cre8-field-note
           ?inverted=${this.fieldNoteKnockout}
-          id=${c(this.ariaDescribedBy)}
-          iconName=${c(this.fieldNoteIconName)}
+          id=${a(this.ariaDescribedBy)}
+          iconName=${a(this.fieldNoteIconName)}
           ?isSuccess=${this.fieldNoteIsSuccess}
           ?isError=${this.fieldNoteIsError}
         >
@@ -85,30 +47,30 @@ const o = class o extends u {
     `;
   }
 };
-o.styles = [h];
+o.styles = [y];
 let e = o;
-s([
+r([
   t({ reflect: !0 })
 ], e.prototype, "variant");
-s([
+r([
   t({ reflect: !0 })
 ], e.prototype, "label");
-s([
+r([
   t({ reflect: !0 })
 ], e.prototype, "fieldNote");
-s([
+r([
   t()
 ], e.prototype, "ariaDescribedBy");
-s([
+r([
   t({ reflect: !0 })
 ], e.prototype, "fieldNoteIconName");
-s([
+r([
   t({ type: Boolean, reflect: !0 })
 ], e.prototype, "fieldNoteKnockout");
-s([
+r([
   t({ type: Boolean, reflect: !0 })
 ], e.prototype, "fieldNoteIsSuccess");
-s([
+r([
   t({ type: Boolean, reflect: !0 })
 ], e.prototype, "fieldNoteIsError");
 customElements.get("cre8-select-tile-list") === void 0 && customElements.define("cre8-select-tile-list", e);

package/lib/components/select-tile-list/select-tile-list.styles.d.ts.map

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

package/lib/components/skeleton-loader/skeleton-loader.js

@@ -1,97 +1,43 @@
-import { css as d, html as p } from "lit";
+import { css as c, html as h } from "lit";
 import { property as a } from "lit/decorators.js";
-import { Cre8Element as u } from "../cre8-element.js";
-const h = d`@import '../../design-tokens/core/scss/theming/component';
-
-:host {
-  display: block;
-}
-
-/**
- * Skeleton Loader
- * The hard coded value for color here is intentional and is uniform across all brands
- */
-.cre8-c-skeleton-loader {
-  width: 100%;
-  height: auto;
-  border-radius: var(--cre8-border-radius-small);
-  aspect-ratio: 16 / 3;
-  background: linear-gradient(-90deg, #f6f6f6 0%, #ebebeb 50%, #f6f6f6 100%);
-  background-size: 400% 400%;
-  animation: pulse 1.25s linear infinite;  
-}
-
-/**
- * Skeleton Loader - Rectangle
- */
-.cre8-c-skeleton-loader--rectangle {
-  aspect-ratio: 16 / 6;
-}
-
-/**
- * Skeleton Loader - Square
- */
-.cre8-c-skeleton-loader--square {
-  aspect-ratio: 1 / 1;
-}
-
-/**
- * Skeleton Loader - Circle
- */
-.cre8-c-skeleton-loader--circle {
-  aspect-ratio: 1 / 1;
-  border-radius: 50%;
-}
-
-/** 
- * Pulsing animation for loading look
- */
-@keyframes pulse {
-  0% {
-  background-position:  0% 0%;
-  }
-
-  100% {
-    background-position: -135% 0%;
-  }
-}
-`;
-var m = Object.defineProperty, s = (n, t, l, f) => {
-  for (var e = void 0, o = n.length - 1, c; o >= 0; o--)
-    (c = n[o]) && (e = c(t, l, e) || e);
-  return e && m(t, l, e), e;
+import { Cre8Element as p } from "../cre8-element.js";
+const m = c`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:block}.cre8-c-skeleton-loader{width:100%;height:auto;border-radius:var(--cre8-border-radius-small);aspect-ratio:16/3;background:linear-gradient(-90deg, #f6f6f6 0%, #ebebeb 50%, #f6f6f6 100%);background-size:400% 400%;animation:pulse 1.25s linear infinite}.cre8-c-skeleton-loader--rectangle{aspect-ratio:16/6}.cre8-c-skeleton-loader--square{aspect-ratio:1/1}.cre8-c-skeleton-loader--circle{aspect-ratio:1/1;border-radius:50%}@keyframes pulse{0%{background-position:0% 0%}100%{background-position:-135% 0%}}`;
+var f = Object.defineProperty, s = (d, r, l, g) => {
+  for (var e = void 0, i = d.length - 1, n; i >= 0; i--)
+    (n = d[i]) && (e = n(r, l, e) || e);
+  return e && f(r, l, e), e;
 };
-const i = class i extends u {
+const o = class o extends p {
   constructor() {
     super(...arguments), this.variant = "rectangle";
   }
   render() {
-    const t = this.componentClassNames("cre8-c-skeleton-loader", {
+    const r = this.componentClassNames("cre8-c-skeleton-loader", {
       "cre8-c-skeleton-loader--rectangle": this.variant === "rectangle",
       "cre8-c-skeleton-loader--square": this.variant === "square",
       "cre8-c-skeleton-loader--circle": this.variant === "circle"
     });
-    return p`
+    return h`
     <div
-        class="${t}"
+        class="${r}"
         style="height: ${this.height ?? "auto"}; width: ${this.width ?? "auto"}"
     ></div>
     `;
   }
 };
-i.styles = [h];
-let r = i;
+o.styles = [m];
+let t = o;
 s([
   a()
-], r.prototype, "variant");
+], t.prototype, "variant");
 s([
   a()
-], r.prototype, "height");
+], t.prototype, "height");
 s([
   a()
-], r.prototype, "width");
-customElements.get("cre8-skeleton-loader") === void 0 && customElements.define("cre8-skeleton-loader", r);
+], t.prototype, "width");
+customElements.get("cre8-skeleton-loader") === void 0 && customElements.define("cre8-skeleton-loader", t);
 export {
-  r as Cre8SkeletonLoader,
-  r as default
+  t as Cre8SkeletonLoader,
+  t as default
 };

package/lib/components/skeleton-loader/skeleton-loader.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton-loader.styles.d.ts","sourceRoot":"","sources":["../../../components/skeleton-loader/skeleton-loader.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAsDX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"skeleton-loader.styles.d.ts","sourceRoot":"","sources":["../../../components/skeleton-loader/skeleton-loader.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAuxE,CAAC;AACpyE,eAAe,MAAM,CAAC"}

package/lib/components/split-button/split-button.js

@@ -1,36 +1,20 @@
-import { css as a, html as l } from "lit";
-import { state as u, property as i } from "lit/decorators.js";
-import { Cre8Element as b } from "../cre8-element.js";
+import { css as c, html as p } from "lit";
+import { state as h, property as a } from "lit/decorators.js";
+import { Cre8Element as m } from "../cre8-element.js";
 import "../button/button.js";
-const h = a`@import '../../design-tokens/core/scss/theming/component';
-
-// #split-button
-
-/**
- * 1)
- */
-.cre8-c-split-button {
-  width: fit-content;
-  display: block;
-}
-
-.cre8-c-split-button__button-container {
-  display: flex;
-  max-width: fit-content;
-}
-`;
-var m = Object.defineProperty, o = (c, t, p, f) => {
-  for (var s = void 0, n = c.length - 1, d; n >= 0; n--)
-    (d = c[n]) && (s = d(t, p, s) || s);
-  return s && m(t, p, s), s;
+const x = c`*,::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-split-button{width:fit-content;display:block}.cre8-c-split-button__button-container{display:flex;max-width:fit-content}`;
+var f = Object.defineProperty, r = (o, t, d, u) => {
+  for (var i = void 0, s = o.length - 1, l; s >= 0; s--)
+    (l = o[s]) && (i = l(t, d, i) || i);
+  return i && f(t, d, i), i;
 };
-const r = class r extends b {
+const n = class n extends m {
   constructor() {
     super(...arguments), this.dropdownOpen = !1;
   }
   render() {
     const t = this.componentClassNames("cre8-c-split-button", {});
-    return l`
+    return p`
       <div class="${t}">
         <div class="cre8-c-split-button__button-container">
           <cre8-button
@@ -55,7 +39,7 @@ const r = class r extends b {
           >
           </cre8-button>
         </div>
-        ${this.dropdownOpen ? l`<slot></slot>` : ""}
+        ${this.dropdownOpen ? p`<slot></slot>` : ""}
       </div>
     `;
   }
@@ -66,19 +50,19 @@ const r = class r extends b {
     this.dropdownOpen = !this.dropdownOpen, this.dispatchEvent(new Event("dropdown-click", t));
   }
 };
-r.styles = [h];
-let e = r;
-o([
-  u()
+n.styles = [x];
+let e = n;
+r([
+  h()
 ], e.prototype, "dropdownOpen");
-o([
-  i({ type: Boolean, reflect: !0 })
+r([
+  a({ type: Boolean, reflect: !0 })
 ], e.prototype, "disabled");
-o([
-  i()
+r([
+  a()
 ], e.prototype, "size");
-o([
-  i()
+r([
+  a()
 ], e.prototype, "buttonText");
 customElements.get("cre8-split-button") === void 0 && customElements.define("cre8-split-button", e);
 export {

package/lib/components/split-button/split-button.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"split-button.styles.d.ts","sourceRoot":"","sources":["../../../components/split-button/split-button.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAgBX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"split-button.styles.d.ts","sourceRoot":"","sources":["../../../components/split-button/split-button.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA+4D,CAAC;AAC55D,eAAe,MAAM,CAAC"}

package/lib/components/submenu/submenu.js

@@ -1,27 +1,17 @@
-import { css as n, html as o } from "lit";
-import { Cre8Element as m } from "../cre8-element.js";
-const c = n`@import '../../design-tokens/core/scss/theming/component';
-
-/**
- * 1) Menu inserted into the dropdown/megamenu of the navigation
- */
-.cre8-c-submenu {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-`, s = class s extends m {
+import { css as r, html as i } 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-submenu{list-style:none;padding:0;margin:0}`, t = class t extends a {
   render() {
-    const t = this.componentClassNames("cre8-c-submenu", {});
-    return o`
-      <ul role="list" class="${t}">
+    const s = this.componentClassNames("cre8-c-submenu", {});
+    return i`
+      <ul role="list" class="${s}">
         <slot></slot>
       </ul>
     `;
   }
 };
-s.styles = [c];
-let e = s;
+t.styles = [d];
+let e = t;
 customElements.get("cre8-submenu") === void 0 && customElements.define("cre8-submenu", e);
 export {
   e as Cre8Submenu,

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

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

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

@@ -1,56 +1,35 @@
-import { css as u, html as i } from "lit";
-import { property as a } from "lit/decorators.js";
-import { Cre8Element as m } from "../cre8-element.js";
-const d = u`@import '../../design-tokens/core/scss/theming/component';
-
-/**
- * 1) Individual item with a link/button within submenu
- */
-.cre8-c-submenu-item__link {
-  color: var(--cre8-color-header-submenu-content-default);
-  background: var(--cre8-color-header-submenu-bg-default);
-  text-decoration: none;
-
-  &:hover,
-  &:focus {
-    color: var(--cre8-color-header-submenu-content-hover);
-    background: var(--cre8-color-header-submenu-bg-hover);
-  }
-
-  &:active {
-    color: var(--cre8-color-header-submenu-content-pressed);
-    background: var(--cre8-color-header-submenu-bg-pressed);
-  }
-}
-`;
-var h = Object.defineProperty, b = (n, r, c, f) => {
-  for (var e = void 0, s = n.length - 1, l; s >= 0; s--)
-    (l = n[s]) && (e = l(r, c, e) || e);
-  return e && h(r, c, e), e;
+import { css as d, html as l } from "lit";
+import { property as m } from "lit/decorators.js";
+import { Cre8Element as c } from "../cre8-element.js";
+const h = d`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-submenu-item__link{color:var(--cre8-color-header-submenu-content-default);background:var(--cre8-color-header-submenu-bg-default);text-decoration:none}.cre8-c-submenu-item__link:hover,.cre8-c-submenu-item__link:focus{color:var(--cre8-color-header-submenu-content-hover);background:var(--cre8-color-header-submenu-bg-hover)}.cre8-c-submenu-item__link:active{color:var(--cre8-color-header-submenu-content-pressed);background:var(--cre8-color-header-submenu-bg-pressed)}`;
+var p = Object.defineProperty, u = (a, t, n, f) => {
+  for (var e = void 0, s = a.length - 1, o; s >= 0; s--)
+    (o = a[s]) && (e = o(t, n, e) || e);
+  return e && p(t, n, e), e;
 };
-const o = class o extends m {
+const i = class i extends c {
   render() {
-    const r = this.componentClassNames("cre8-c-submenu-item", {});
-    return this.href ? i`
-        <li role="listitem" class="${r}">
+    const t = this.componentClassNames("cre8-c-submenu-item", {});
+    return this.href ? l`
+        <li role="listitem" class="${t}">
           <a href=${this.href} class="cre8-c-submenu-item__link">
             <slot></slot>
           </a>
         </li>
-      ` : i`<li role="listitem" class="${r}">
+      ` : l`<li role="listitem" class="${t}">
         <button class="cre8-c-submenu-item__link">
           <slot></slot>
         </button>
       </li>`;
   }
 };
-o.styles = [d];
-let t = o;
-b([
-  a()
-], t.prototype, "href");
-customElements.get("cre8-submenu-item") === void 0 && customElements.define("cre8-submenu-item", t);
+i.styles = [h];
+let r = i;
+u([
+  m()
+], r.prototype, "href");
+customElements.get("cre8-submenu-item") === void 0 && customElements.define("cre8-submenu-item", r);
 export {
-  t as Cre8SubmenuItem,
-  t as default
+  r as Cre8SubmenuItem,
+  r as default
 };

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

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

package/lib/components/tab/tab.js

@@ -1,96 +1,13 @@
-import { css as n, html as b } from "lit";
-import { property as c, query as p } from "lit/decorators.js";
-import { Cre8Element as v } from "../cre8-element.js";
-const u = n`@import '../../design-tokens/core/scss/theming/component';
-/*------------------------------------*\
- #TAB
-\*------------------------------------*/
-
-/**
- * Tab host
- */
-:host {
-  display: contents;
-}
-
-/**
- * Tab
- * 1. Make border appear to be inside the tab
- */
-.cre8-c-tab {
-  @include cre8-typography-label-default();
-  position: relative;
-  display: flex;
-  margin: 0;
-  flex-shrink: 0;
-  padding: 0;
-  align-items: center;
-  justify-content: center;
-  gap: calc(8px * 1);
-  color: var(--cre8-color-content-default);
-  background-color: transparent;
-  border: 0;
-  border-block-end: var(--cre8-border-width-tab-selected) var(--cre8-border-style-default) var(--cre8-color-border-default);
-  padding-block-start: calc(8px * 1);
-  padding-inline-end: calc(8px * 3);
-  padding-block-end: calc(calc(8px * 1) - var(--cre8-border-width-tab-selected)); /* 1 */
-  padding-inline-start: calc(8px * 3);
-  cursor: pointer;
-  overflow: hidden;
-  transition: border-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease), background-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease);
-
-  /**
-   * Tab hover state
-   */
-  &:hover {
-    background-color: var(--cre8-color-bg-brand-hover);
-  }
-
-  /**
-   * Tab focus visible state
-   * 1. Make the focus appear inside the tab to prevent the bottom border from showing
-   */
-  &:focus-visible {
-    @include focus;
-    outline-offset: calc(#{var(--cre8-border-width-focus)} * -1); /* 1 */
-    border-radius: var(--cre8-border-radius-small);
-    border-block-end-color: transparent;
-  }
-}
-
-/**
- * Tab active state
- */
-.cre8-c-tab.cre8-is-active:not(:focus-visible) {
-  color: var(--cre8-color-content-brand-strong);
-  background-color: transparent;
-  border-block-end: var(--cre8-border-width-tab-selected) var(--cre8-border-style-default) var(--cre8-color-border-brand-strong);
-  padding-block-end: calc(calc(8px * 1) - var(--cre8-border-width-tab-selected)); /* 1 */
-}
-
-/**
- * Tab small
- */
-.cre8-c-tab.cre8-c-tab--small {
-  @include cre8-typography-label-small();
-  padding-block-start: calc(8px * 0.5);
-  padding-inline-end: calc(8px * 2);
-  padding-block-end: calc(calc(8px * 0.5) - var(--cre8-border-width-tab-selected)); /* 1 */
-  padding-inline-start: calc(8px * 2);
-
-  /**
-   * Tab small active state
-   */
-  &.cre8-is-active:not(:focus-visible) {
-    padding-block-end: calc(calc(8px * 0.5) - var(--cre8-border-width-tab-selected)); /* 1 */
-  }
-}`;
-var h = Object.defineProperty, a = (s, e, l, m) => {
-  for (var r = void 0, o = s.length - 1, d; o >= 0; o--)
-    (d = s[o]) && (r = d(e, l, r) || r);
-  return r && h(e, l, r), r;
+import { css as n, html as p } from "lit";
+import { property as i, query as h } from "lit/decorators.js";
+import { Cre8Element as b } 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}:host{display:contents}.cre8-c-tab{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);position:relative;display:flex;margin:0;flex-shrink:0;padding:0;align-items:center;justify-content:center;gap:0.5rem;color:var(--cre8-color-content-default);background-color:rgba(0,0,0,0);border:0;border-block-end:var(--cre8-border-width-tab-selected) var(--cre8-border-style-default) var(--cre8-color-border-default);padding-block-start:0.5rem;padding-inline-end:1.5rem;padding-block-end:calc(0.5rem - var(--cre8-border-width-tab-selected));padding-inline-start:1.5rem;cursor:pointer;overflow:hidden;transition:border-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),background-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease)}.cre8-c-tab:hover{background-color:var(--cre8-color-bg-brand-hover)}.cre8-c-tab:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem;outline-offset:calc(var(--cre8-border-width-focus)*-1);border-radius:var(--cre8-border-radius-small);border-block-end-color:rgba(0,0,0,0)}.cre8-c-tab.cre8-is-active:not(:focus-visible){color:var(--cre8-color-content-brand-strong);background-color:rgba(0,0,0,0);border-block-end:var(--cre8-border-width-tab-selected) var(--cre8-border-style-default) var(--cre8-color-border-brand-strong);padding-block-end:calc(0.5rem - var(--cre8-border-width-tab-selected))}.cre8-c-tab.cre8-c-tab--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);padding-block-start:0.25rem;padding-inline-end:1rem;padding-block-end:calc(0.25rem - var(--cre8-border-width-tab-selected));padding-inline-start:1rem}.cre8-c-tab.cre8-c-tab--small.cre8-is-active:not(:focus-visible){padding-block-end:calc(0.25rem - var(--cre8-border-width-tab-selected))}`;
+var f = Object.defineProperty, a = (s, e, d, g) => {
+  for (var r = void 0, o = s.length - 1, c; o >= 0; o--)
+    (c = s[o]) && (r = c(e, d, r) || r);
+  return r && f(e, d, r), r;
 };
-const i = class i extends v {
+const l = class l extends b {
   /**
    * Updated
    * 1. Called when the element's DOM has been updated and rendered.
@@ -119,7 +36,7 @@ const i = class i extends v {
       "cre8-is-active": this.isActive,
       "cre8-c-tab--small": this.size === "sm"
     });
-    return b`
+    return p`
       <button
         role="tab"
         tabindex="-1"
@@ -133,22 +50,22 @@ const i = class i extends v {
     `;
   }
 };
-i.styles = [u];
-let t = i;
+l.styles = [m];
+let t = l;
 a([
-  c()
+  i()
 ], t.prototype, "size");
 a([
-  c({ type: Boolean, reflect: !0 })
+  i({ type: Boolean, reflect: !0 })
 ], t.prototype, "isActive");
 a([
-  c({ type: Number })
+  i({ type: Number })
 ], t.prototype, "index");
 a([
-  c()
+  i()
 ], t.prototype, "ariaLabelledBy");
 a([
-  p(".cre8-c-tab")
+  h(".cre8-c-tab")
 ], t.prototype, "_Cre8Tab");
 customElements.get("cre8-tab") === void 0 && customElements.define("cre8-tab", t);
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"tab.styles.d.ts","sourceRoot":"","sources":["../../../components/tab/tab.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAmFV,CAAC;AACH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"tab.styles.d.ts","sourceRoot":"","sources":["../../../components/tab/tab.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA2mI,CAAC;AACxnI,eAAe,MAAM,CAAC"}