@tmorrow/cre8-wc 1.0.25 → 1.1.1

package/lib/components/band/band.js

@@ -1,63 +1,32 @@
-import { css as d, html as h } from "lit";
-import { property as s } from "lit/decorators.js";
+import { css as h, html as c } from "lit";
+import { property as l } from "lit/decorators.js";
 import { Cre8Element as m } from "../cre8-element.js";
-const p = d`@import '../../design-tokens/core/scss/theming/component';
-
-// #BAND
-
-/**
- * 1) A container with a background that can house various recipes of Components within
- */
-.cre8-c-band {
-  background: var(--cre8-color-bg-subtle);
-  padding: calc(8px * 3) 0;
-
-  @media all and (min-width:$cre8-breakpoint-xl) {
-    padding: calc(8px * 4) 0;
-  }
-}
-
-/**
- * Branded variant
- */
-.cre8-c-band--branded {
-  color: var(--cre8-color-content-knockout);
-  background: var(--cre8-theme-color-utility-information);
-}
-
-/**
- * Full height
- * 1) Height set to 100% to fill a container like a sidebar
- */
-.cre8-c-band--full-height {
-  height: 100%;
-}
-`;
-var u = Object.defineProperty, l = (a, r, c, b) => {
-  for (var e = void 0, n = a.length - 1, i; n >= 0; n--)
-    (i = a[n]) && (e = i(r, c, e) || e);
-  return e && u(r, c, e), e;
+const p = 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-band{background:var(--cre8-color-bg-subtle);padding:1.5rem 0}@media all and (min-width: 1200px){.cre8-c-band{padding:2rem 0}}.cre8-c-band--branded{color:var(--cre8-color-content-knockout);background:var(--cre8-theme-color-utility-information)}.cre8-c-band--full-height{height:100%}`;
+var f = Object.defineProperty, o = (s, r, d, x) => {
+  for (var e = void 0, i = s.length - 1, n; i >= 0; i--)
+    (n = s[i]) && (e = n(r, d, e) || e);
+  return e && f(r, d, e), e;
 };
-const o = class o extends m {
+const a = class a extends m {
   render() {
     const r = this.componentClassNames("cre8-c-band", {
       "cre8-c-band--branded": this.variant === "branded",
       "cre8-c-band--full-height": this.fullHeight === !0
     });
-    return h`
+    return c`
       <div class="${r}">
         <slot></slot>
       </div>
     `;
   }
 };
-o.styles = [p];
-let t = o;
-l([
-  s()
+a.styles = [p];
+let t = a;
+o([
+  l()
 ], t.prototype, "variant");
-l([
-  s({ type: Boolean, reflect: !0 })
+o([
+  l({ type: Boolean, reflect: !0 })
 ], t.prototype, "fullHeight");
 customElements.get("cre8-band") === void 0 && customElements.define("cre8-band", t);
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"band.styles.d.ts","sourceRoot":"","sources":["../../../components/band/band.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBA+BX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"band.styles.d.ts","sourceRoot":"","sources":["../../../components/band/band.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAijE,CAAC;AAC9jE,eAAe,MAAM,CAAC"}

package/lib/components/breadcrumbs/breadcrumbs.js

@@ -1,39 +1,20 @@
-import { css as i, html as c } from "lit";
-import { property as m } from "lit/decorators.js";
+import { css as n, html as m } from "lit";
+import { property as o } from "lit/decorators.js";
 import { Cre8Element as p } from "../cre8-element.js";
-const d = i`@import '../../design-tokens/core/scss/theming/component';
-
-// #BREADCRUMBS
-
-:host {
-  display: inline-flex;
-}
-
-/**
- * 1) An ordered list of navigational hierarchy showing the user where they are on the site
- */
-.cre8-c-breadcrumbs__list {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  gap: calc(8px * 1);
-}
-`;
-var b = Object.defineProperty, f = (n, s, o, h) => {
-  for (var e = void 0, t = n.length - 1, l; t >= 0; t--)
-    (l = n[t]) && (e = l(s, o, e) || e);
-  return e && b(s, o, e), e;
+const h = 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:inline-flex}.cre8-c-breadcrumbs__list{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none;gap:0.5rem}`;
+var c = Object.defineProperty, f = (s, t, l, x) => {
+  for (var e = void 0, a = s.length - 1, d; a >= 0; a--)
+    (d = s[a]) && (e = d(t, l, e) || e);
+  return e && c(t, l, e), e;
 };
-const a = class a extends p {
+const i = class i extends p {
   constructor() {
     super(...arguments), this.navAriaLabel = "breadcrumbs";
   }
   render() {
-    const s = this.componentClassNames("cre8-c-breadcrumbs", {});
-    return c`
-      <nav aria-label="${this.navAriaLabel}"  class="${s}">
+    const t = this.componentClassNames("cre8-c-breadcrumbs", {});
+    return m`
+      <nav aria-label="${this.navAriaLabel}"  class="${t}">
         <ol class="cre8-c-breadcrumbs__list">
           <slot></slot>
         </ol>
@@ -41,10 +22,10 @@ const a = class a extends p {
     `;
   }
 };
-a.styles = [d];
-let r = a;
+i.styles = [h];
+let r = i;
 f([
-  m()
+  o()
 ], r.prototype, "navAriaLabel");
 customElements.get("cre8-breadcrumbs") === void 0 && customElements.define("cre8-breadcrumbs", r);
 export {

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

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

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

@@ -1,58 +1,23 @@
-import { s as c } from "../../Caret_Right-DZH0BlfG.js";
-import { css as i, html as r } from "lit";
-import { Cre8Element as n } from "../cre8-element.js";
-import "../../icon-DImqxDiW.js";
-const o = i`@import '../../design-tokens/core/scss/theming/component';
-
-:host {
-  display: inline-flex;
-}
-
-/**
- * 1) Singular item within the breadcrumbs component that contains a link elsewhere on the site
- */
-.cre8-c-breadcrumbs--item {
-  display: inline-flex;
-  align-items: center;
-
-  /**
-  * Breadcrumbs caret doesn't display for last breadcrumb item
-  */
-  :host(:last-child) & {
-    cre8-icon {
-      display: none;
-    }
-  }
-}
-
-/**
-* Breadcrumbs icon
-*/
-cre8-icon {
-  margin-left: calc(8px * 1);
-  color: var(--cre8-color-content-subtle);
-  display: inline-flex;
-  svg {
-    height: calc(8px * 2);
-    width: calc(8px * 2);
-  }
-}
-`, t = class t extends n {
+import { s as i } from "../../Caret_Right-DZH0BlfG.js";
+import { css as s, html as a } from "lit";
+import { Cre8Element as l } from "../cre8-element.js";
+import "../../icon-D22g8aWB.js";
+const n = s`*,::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}.cre8-c-breadcrumbs--item{display:inline-flex;align-items:center}:host(:last-child) .cre8-c-breadcrumbs--item cre8-icon{display:none}cre8-icon{margin-left:0.5rem;color:var(--cre8-color-content-subtle);display:inline-flex}cre8-icon svg{height:1rem;width:1rem}`, t = class t extends l {
   // Set the role before rendering for better accessibility
   // Because we're settting this role, we don't wrap the slot in an <li>
   connectedCallback() {
     this.setAttribute("role", "listitem"), super.connectedCallback();
   }
   render() {
-    const s = this.componentClassNames(
+    const r = this.componentClassNames(
       "cre8-c-breadcrumbs--item",
       {}
     );
-    return r`
-      <div class="${s}">
+    return a`
+      <div class="${r}">
         <slot></slot>
         <cre8-icon
-          svg="${c}"
+          svg="${i}"
           rotate="90"
           container-class="cre8-c-icon-wrapper"
           aria-hidden="true"
@@ -63,7 +28,7 @@ cre8-icon {
     `;
   }
 };
-t.styles = [o];
+t.styles = [n];
 let e = t;
 customElements.get("cre8-breadcrumbs-item") === void 0 && customElements.define("cre8-breadcrumbs-item", e);
 export {

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

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

package/lib/components/button/button.js

@@ -2,7 +2,7 @@ import { css as v, html as n, nothing as i } from "lit";
 import { ifDefined as c } from "lit-html/directives/if-defined.js";
 import { property as e, query as y } from "lit/decorators.js";
 import { Cre8FormElement as h } from "../cre8-form-element.js";
-import "../../icon-DImqxDiW.js";
+import "../../icon-D22g8aWB.js";
 import "../loading-spinner/loading-spinner.js";
 const g = v`
 @import '../../design-tokens/core/scss/theming/component';
@@ -767,8 +767,8 @@ color: var(--cre8-color-button-primary-inverse-content);
 
 .cre8-c-button--sm cre8-icon {
   svg {
-    height: calc(8px * 1.75);
-    width: calc(8px * 1.75);
+    height: size(1.75);
+    width: size(1.75);
   }
 }
 
@@ -782,8 +782,8 @@ color: var(--cre8-color-button-primary-inverse-content);
 
 .cre8-c-button--lg cre8-icon {
   svg {
-    height: calc(8px * 2.25);
-    width: calc(8px * 2.25);
+    height: size(2.25);
+    width: size(2.25);
   }
 }
 
@@ -795,22 +795,22 @@ color: var(--cre8-color-button-primary-inverse-content);
  */
 
 cre8-icon-legacy + .cre8-c-button__text:not(.cre8-u-is-vishidden) {
-  margin-left: calc(8px * 1);
+  margin-left: size(1);
 }
 
 cre8-icon + .cre8-c-button__text:not(.cre8-u-is-vishidden) {
-  margin-left: calc(8px * 1);
+  margin-left: size(1);
 }
 
 /**
    * Button icon directly after button text
    */
 .cre8-c-button__text:not(.cre8-u-is-vishidden) + cre8-icon-legacy {
-  margin-left: calc(8px * 1);
+  margin-left: size(1);
 }
 
 .cre8-c-button__text:not(.cre8-u-is-vishidden) + cre8-icon {
-  margin-left: calc(8px * 1);
+  margin-left: size(1);
 }
 /**
    * Button icon only
@@ -866,7 +866,7 @@ cre8-icon-legacy.cre8-u-is-vishidden {
 }
 
 span.cre8-c-button__icon {
-  margin-left: calc(8px * 1);
+  margin-left: size(1);
   max-width: fit-content;
   min-width: 0px;
   width: auto;
@@ -881,26 +881,26 @@ cre8-icon {
   justify-content: center;
 
   svg {
-    height: calc(8px * 2);
-    width: calc(8px * 2);
+    height: size(2);
+    width: size(2);
   }
 }
 `;
-var p = Object.defineProperty, o = (b, t, u, f) => {
+var f = Object.defineProperty, o = (b, t, u, p) => {
   for (var a = void 0, l = b.length - 1, s; l >= 0; l--)
     (s = b[l]) && (a = s(t, u, a) || a);
-  return a && p(t, u, a), a;
+  return a && f(t, u, a), a;
 };
 const d = class d extends h {
   constructor() {
     super(...arguments), this.text = "Button", this.variant = "primary", this.type = "button", this.iconRotateDegree = 0, this.iconPosition = void 0, this.size = "md", this.ariaLive = "assertive";
   }
   formSubmit() {
-    const t = this.internals.form;
+    const t = this._internals.form;
     t && t.requestSubmit();
   }
   formReset() {
-    const t = this.internals.form;
+    const t = this._internals.form;
     t && t.reset();
   }
   generateIconBefore() {

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

@@ -1,62 +1,31 @@
-import { css as c, html as p } from "lit";
-import { property as a } from "lit/decorators.js";
-import { Cre8Element as d } from "../cre8-element.js";
-const u = c`@import '../../design-tokens/core/scss/theming/component';
-
-/*------------------------------------*\
- #BUTTON-GROUP
-\*------------------------------------*/
-
-:host {
-  display: inline-flex;
-}
-
-/**
- * 1) Button Group
- */
-.cre8-c-button-group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: calc(8px * 2);
-}
-
-/**
-  * Button group for Modals
-  */
-.cre8-c-button-group--responsive-full-width {
-  flex-direction: column;
-    --cre8-button-width: 100%;
-
-  @media all and (min-width:$cre8-breakpoint-md) {
-    flex-direction: row;
-    --cre8-button-width: auto;
- }
-}
-`;
-var m = Object.defineProperty, f = (n, e, i, h) => {
-  for (var t = void 0, r = n.length - 1, l; r >= 0; r--)
-    (l = n[r]) && (t = l(e, i, t) || t);
-  return t && m(e, i, t), t;
+import { css as o, html as l } from "lit";
+import { property as p } from "lit/decorators.js";
+import { Cre8Element as h } from "../cre8-element.js";
+const m = o`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}.cre8-c-button-group{display:flex;flex-wrap:wrap;gap:1rem}.cre8-c-button-group--responsive-full-width{flex-direction:column;--cre8-button-width: 100%}@media all and (min-width: 768px){.cre8-c-button-group--responsive-full-width{flex-direction:row;--cre8-button-width: auto}}`;
+var c = Object.defineProperty, f = (a, t, d, x) => {
+  for (var e = void 0, i = a.length - 1, n; i >= 0; i--)
+    (n = a[i]) && (e = n(t, d, e) || e);
+  return e && c(t, d, e), e;
 };
-const s = class s extends d {
+const s = class s extends h {
   render() {
-    const e = this.componentClassNames("cre8-c-button-group", {
+    const t = this.componentClassNames("cre8-c-button-group", {
       "cre8-c-button-group--responsive-full-width": this.orientation === "responsive-full-width"
     });
-    return p`
-      <div class="${e}">
+    return l`
+      <div class="${t}">
         <slot></slot>
       </div>
     `;
   }
 };
-s.styles = [u];
-let o = s;
+s.styles = [m];
+let r = s;
 f([
-  a()
-], o.prototype, "orientation");
-customElements.get("cre8-button-group") === void 0 && customElements.define("cre8-button-group", o);
+  p()
+], r.prototype, "orientation");
+customElements.get("cre8-button-group") === void 0 && customElements.define("cre8-button-group", r);
 export {
-  o as Cre8ButtonGroup,
-  o as default
+  r as Cre8ButtonGroup,
+  r as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"button-group.styles.d.ts","sourceRoot":"","sources":["../../../components/button-group/button-group.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBA+BX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"button-group.styles.d.ts","sourceRoot":"","sources":["../../../components/button-group/button-group.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA4jE,CAAC;AACzkE,eAAe,MAAM,CAAC"}

package/lib/components/card/card.js

@@ -1,126 +1,13 @@
-import { css as h, html as o } from "lit";
-import { property as l } from "lit/decorators.js";
+import { css as h, html as i } from "lit";
+import { property as n } from "lit/decorators.js";
 import { Cre8Element as p } from "../cre8-element.js";
-const f = h`@import '../../design-tokens/core/scss/theming/component';
-
-// #CARD
-
-:host {
-  display: block;
-}
-
-/**
- * 1) A card is an organized block that typically contains a title, image,
- * text, and/or calls to action. It is made up of an optional header slot, required
- * body slot, and optional footer slot to place other Components and content within.
- */
-.cre8-c-card {
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-  padding: calc(8px * 3);
-  gap: calc(8px * 2);
-  border-color: var(--cre8-color-border-default);
-  border-style: var(--cre8-border-style-default);
-  border-width: var(--cre8-border-width-default);
-  border-radius: var(--cre8-border-radius-default);
-  background: var(--cre8-color-bg-default);
-}
-/**
- * Horizontal card
- * 1) Organized block with flex-direction set to row so that header => footer appears
- * from left to right rather than top to bottom
- */
-.cre8-c-card--horizontal{
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-}
-/**
- * Bare card
- * 1) Organized block without a border, background, or padding
- */
-.cre8-c-card--bare {
-  border: 0;
-  padding: 0;
-  gap: 0;
-  box-shadow: none;
-}
-/**
- * Horizontal-bare card
- * 1) Organized block with flex-direction set to row so that header => footer appears
- * from left to right rather than top to bottom without a border, background, or padding
- */
-.cre8-c-card--horizontal-bare{
-  flex-direction: row;
-  border: 0;
-  padding: 0;
-  gap: 0;
-  box-shadow: none;
-  align-items: center;
-  justify-content: center;
-}
-/**
- * Center aligned card
- * 1) Center content and text within the card
- */
-.cre8-c-card--align-center {
-  text-align: center; /* 1 */
-  align-items: center; /* 1 */
-  justify-content: center; /* 1 */
-}
-
-/**
- * Slotted image within a card
- * 1) Make the image full width
- */
-::slotted(img) {
-  width: 100%;
-}
-
-/**
- * Card header
- * 1) Remove flex so that body always takes up remaining space
- */
-.cre8-c-card__header {
-  display: block;
-  flex: none; /* 1 */
-}
-
-/**
- * Card body
- * 1) Flex applied to always fill the remaining space of the card
- */
-.cre8-c-card__body {
-  display: block;
-  flex: 1 1 auto; /* 1 */
-
-}
-
-/**
- * Card footer
- * 1) Remove flex so that body always takes up remaining space
- */
-.cre8-c-card__footer {
-  display: block;
-  flex: none; /* 1 */
-
-  .cre8-c-card--bare & {
-    padding: 0;
-  }
-  .cre8-c-card--horizontal-bare & {
-    padding: 0;
-  }
-}
-`;
-var b = Object.defineProperty, s = (d, t, i, m) => {
-  for (var e = void 0, a = d.length - 1, n; a >= 0; a--)
-    (n = d[a]) && (e = n(t, i, e) || e);
-  return e && b(t, i, e), e;
+const m = 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}:host{display:block}.cre8-c-card{overflow:hidden;display:flex;flex-direction:column;height:100%;width:100%;padding:1.5rem;gap:1rem;border-color:var(--cre8-color-border-default);border-style:var(--cre8-border-style-default);border-width:var(--cre8-border-width-default);border-radius:var(--cre8-border-radius-default);background:var(--cre8-color-bg-default)}.cre8-c-card--horizontal{flex-direction:row;align-items:center;justify-content:center}.cre8-c-card--bare{border:0;padding:0;gap:0;box-shadow:none}.cre8-c-card--horizontal-bare{flex-direction:row;border:0;padding:0;gap:0;box-shadow:none;align-items:center;justify-content:center}.cre8-c-card--align-center{text-align:center;align-items:center;justify-content:center}::slotted(img){width:100%}.cre8-c-card__header{display:block;flex:none}.cre8-c-card__body{display:block;flex:1 1 auto}.cre8-c-card__footer{display:block;flex:none}.cre8-c-card--bare .cre8-c-card__footer{padding:0}.cre8-c-card--horizontal-bare .cre8-c-card__footer{padding:0}`;
+var f = Object.defineProperty, l = (o, t, s, x) => {
+  for (var e = void 0, a = o.length - 1, c; a >= 0; a--)
+    (c = o[a]) && (e = c(t, s, e) || e);
+  return e && f(t, s, e), e;
 };
-const c = class c extends p {
+const d = class d extends p {
   render() {
     const t = this.componentClassNames("cre8-c-card", {
       "cre8-c-card--bare": this.variant === "bare",
@@ -128,24 +15,24 @@ const c = class c extends p {
       "cre8-c-card--horizontal-bare": this.variant === "horizontal-bare",
       "cre8-c-card--align-center": this.align === "center"
     });
-    return o`
+    return i`
       <div class="${t}" part="card">
-        ${this.slotNotEmpty("header") && o`<div class="cre8-c-card__header" part="header"><slot name="header"></slot></div>`}
+        ${this.slotNotEmpty("header") && i`<div class="cre8-c-card__header" part="header"><slot name="header"></slot></div>`}
         <div class="cre8-c-card__body" part="body">
           <slot></slot>
         </div>
-        ${this.slotNotEmpty("footer") && o`<div class="cre8-c-card__footer" part="footer"><slot name="footer"></slot></div>`}
+        ${this.slotNotEmpty("footer") && i`<div class="cre8-c-card__footer" part="footer"><slot name="footer"></slot></div>`}
       </div>
     `;
   }
 };
-c.styles = [f];
-let r = c;
-s([
-  l()
+d.styles = [m];
+let r = d;
+l([
+  n()
 ], r.prototype, "variant");
-s([
-  l()
+l([
+  n()
 ], r.prototype, "align");
 customElements.get("cre8-card") === void 0 && customElements.define("cre8-card", r);
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../../components/card/card.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAiHX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../../components/card/card.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAovF,CAAC;AACjwF,eAAe,MAAM,CAAC"}