@tmorrow/cre8-wc 1.0.26 → 1.1.1

package/lib/components/primary-nav-item/primary-nav-item.js

@@ -1,181 +1,14 @@
-import { css as p, html as a } from "lit";
-import { ifDefined as h } from "lit-html/directives/if-defined.js";
+import { css as h, html as a } from "lit";
+import { ifDefined as p } from "lit-html/directives/if-defined.js";
 import { property as o, state as v } from "lit/decorators.js";
-import { Cre8Element as u } from "../cre8-element.js";
-const y = p`@import '../../design-tokens/core/scss/theming/component';
-
-// #PRIMARY NAV ITEM
-
-/**
- * Actual primary nav list item
- */
-.cre8-c-primary-nav__item {
-  border-bottom-width: var(--cre8-border-width-default);
-  border-bottom-style: var(--cre8-border-style-default);
-  border-bottom-color: var(--cre8-color-border-subtle);
-
-  @media all and (min-width:$cre8-breakpoint-lg) {
-    border-bottom: none;
-  }
-}
-
-/**
- * Content within the primary nav item
- */
-.cre8-c-primary-nav__item-content {
-  display: flex;
-  align-items: baseline;
-}
-
-/**
- * Primary navigation link
- * 1) Used to remove any sort of default button styles when a button tag is rendered
- */
-.cre8-c-primary-nav__link {
-  @include cre8-typography-label-default;
-  display: flex;
-  align-items: center;
-  appearance: none; /* 1 */
-  background: transparent; /* 1 */
-  border: none;
-  //border: 1px solid var(--cre8-color-header-menu-border-default); /* 1 */
-  white-space: nowrap;
-  width: 100%;
-  margin: 0;
-  padding: calc(8px * 2) calc(8px * 4);
-  color: var(--cre8-primary-nav-link-color, var(--cre8-color-header-menu-content-default));
-  text-decoration: none;
-  transition: all var(--cre8-anim-fade-quick) var(--cre8-anim-ease);
-  cursor: pointer;
-
-  &:hover,
-  &:focus-visible {
-    //border-color: var(--cre8-color-header-menu-border-hover);
-    background: var(--cre8-color-header-menu-bg-hover);
-    color: var(--cre8-color-header-menu-content-hover);
-  }
-
-  &:active {
-    border-color: var(--cre8-color-header-menu-border-pressed);
-    background: var(--cre8-color-header-menu-bg-pressed);
-    color: var(--cre8-color-header-menu-content-pressed);
-  }
-
-  /**
-  * Primary navigation link within active primary nav item
-  */
-  .cre8-c-primary-nav__item.cre8-is-active & {
-    background: var(--cre8-color-bg-brand);
-    color: var(--cre8-color-header-menu-content-hover);
-  }
-
-  /**
-  * Medium screen primary navigation
-  */
-  @media all and (min-width:$cre8-breakpoint-lg) {
-    padding: calc(8px * 2) calc(8px * 1);
-  }
-
-  @media all and (min-width:$cre8-breakpoint-lg) {
-    padding: calc(8px * 2);
-    border-bottom: none;
-  }
-}
-
-/**
- * Icon within primary navigation item
- */
-cre8-icon-legacy {
-  --cre8-icon-height: #{calc(8px * 1.5)}; /* 1 */
-  --cre8-icon-width: #{calc(8px * 1.5)}; /* 1 */
-  margin-left: auto;
-  transition: transform var(--cre8-anim-fade-quick) var(--cre8-anim-ease);
-
-  /**
-  * Icon within active primary nav item
-  * 1) Rotate the icon to show that the dropdown is open
-  */
-  .cre8-c-primary-nav__item.cre8-is-active & {
-    transform: rotate(-180deg); /* 1 */
-  }
-
-  @media all and (min-width:$cre8-breakpoint-lg) {
-    margin-left: calc(8px * 1);
-  }
-}
-
-/**
- * Primary nav item panel
- * 1) Panel for the dropdown content
- * 1) Hide when not active
- */
-.cre8-c-primary-nav__item-panel {
-  //display: none;
-  visibility: hidden; /* 1 */
-  width: 100%;
-  height: 0; /* 1 */
-  overflow: hidden; /* 1 */
-  background: transparent;
-  opacity: 0; /* 1 */
-  transition: all 0s var(--cre8-anim-ease);
-  z-index: -1;
-
-  @media all and (min-width:$cre8-breakpoint-lg) {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    height: auto;
-    box-shadow: var(--cre8-theme-box-shadow-md);
-  }
-
-  /**
-  * Primary nav item panel within active item
-  * 1) Show the primary nav item dropdown
-  */
-  .cre8-c-primary-nav__item.cre8-is-active & {
-    display: block;
-    visibility: visible; /* 1 */
-    height: auto; /* 1 */
-    padding-top: calc(8px * 4);
-    padding-bottom: calc(8px * 4);
-    background: var(--cre8-color-bg-default);
-    opacity: 1; /* 1 */
-    z-index: 1;
-    transition: opacity var(--cre8-anim-fade-quick) var(--cre8-anim-ease);
-  }
-}
-
-/**
-* Primary nav item panel inner container
-* 1) Container within primary nav item panel that caps the content width and aligns
-*/
-.cre8-c-primary-nav__item-panel-inner {
-  /**
-  * Primary nav item inner container within megamenu item
-  * 1) Cap the content width and center
-  */
-  .cre8-c-primary-nav__item--megamenu & {
-    max-width: 70rem; /* 1 */
-    padding-right: calc(8px * 4);
-    padding-left: calc(8px * 4);
-    margin: 0 auto; /* 1 */
-  }
-}
-
-.cre8-c-primary-nav__item-before {
-  margin-right: calc(8px * 1);
-}
-
-.cre8-c-primary-nav__item-after {
-  margin-left: calc(8px * 1);
-}
-`;
-var f = Object.defineProperty, n = (d, e, t, c) => {
-  for (var r = void 0, s = d.length - 1, m; s >= 0; s--)
-    (m = d[s]) && (r = m(e, t, r) || r);
-  return r && f(e, t, r), r;
+import { Cre8Element as f } from "../cre8-element.js";
+const y = 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-primary-nav__item{border-bottom-width:var(--cre8-border-width-default);border-bottom-style:var(--cre8-border-style-default);border-bottom-color:var(--cre8-color-border-subtle)}@media all and (min-width: 960px){.cre8-c-primary-nav__item{border-bottom:none}}.cre8-c-primary-nav__item-content{display:flex;align-items:baseline}.cre8-c-primary-nav__link{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);display:flex;align-items:center;appearance:none;background:rgba(0,0,0,0);border:none;white-space:nowrap;width:100%;margin:0;padding:1rem 2rem;color:var(--cre8-primary-nav-link-color, var(--cre8-color-header-menu-content-default));text-decoration:none;transition:all var(--cre8-anim-fade-quick) var(--cre8-anim-ease);cursor:pointer}.cre8-c-primary-nav__link:hover,.cre8-c-primary-nav__link:focus-visible{background:var(--cre8-color-header-menu-bg-hover);color:var(--cre8-color-header-menu-content-hover)}.cre8-c-primary-nav__link:active{border-color:var(--cre8-color-header-menu-border-pressed);background:var(--cre8-color-header-menu-bg-pressed);color:var(--cre8-color-header-menu-content-pressed)}.cre8-c-primary-nav__item.cre8-is-active .cre8-c-primary-nav__link{background:var(--cre8-color-bg-brand);color:var(--cre8-color-header-menu-content-hover)}@media all and (min-width: 960px){.cre8-c-primary-nav__link{padding:1rem 0.5rem}}@media all and (min-width: 960px){.cre8-c-primary-nav__link{padding:1rem;border-bottom:none}}cre8-icon-legacy{--cre8-icon-height: 0.75rem;--cre8-icon-width: 0.75rem;margin-left:auto;transition:transform var(--cre8-anim-fade-quick) var(--cre8-anim-ease)}.cre8-c-primary-nav__item.cre8-is-active cre8-icon-legacy{transform:rotate(-180deg)}@media all and (min-width: 960px){cre8-icon-legacy{margin-left:0.5rem}}.cre8-c-primary-nav__item-panel{visibility:hidden;width:100%;height:0;overflow:hidden;background:rgba(0,0,0,0);opacity:0;transition:all 0s var(--cre8-anim-ease);z-index:-1}@media all and (min-width: 960px){.cre8-c-primary-nav__item-panel{position:absolute;top:100%;left:0;height:auto;box-shadow:var(--cre8-theme-box-shadow-md)}}.cre8-c-primary-nav__item.cre8-is-active .cre8-c-primary-nav__item-panel{display:block;visibility:visible;height:auto;padding-top:2rem;padding-bottom:2rem;background:var(--cre8-color-bg-default);opacity:1;z-index:1;transition:opacity var(--cre8-anim-fade-quick) var(--cre8-anim-ease)}.cre8-c-primary-nav__item--megamenu .cre8-c-primary-nav__item-panel-inner{max-width:70rem;padding-right:2rem;padding-left:2rem;margin:0 auto}.cre8-c-primary-nav__item-before{margin-right:0.5rem}.cre8-c-primary-nav__item-after{margin-left:0.5rem}`;
+var u = Object.defineProperty, n = (d, e, r, c) => {
+  for (var i = void 0, s = d.length - 1, m; s >= 0; s--)
+    (m = d[s]) && (i = m(e, r, i) || i);
+  return i && u(e, r, i), i;
 };
-const l = class l extends u {
+const l = class l extends f {
   /**
    * Initialize functions
    */
@@ -214,8 +47,8 @@ const l = class l extends u {
       return;
     if (!this.shadowRoot?.host)
       throw Error("Could not determine navigation context during click handler");
-    const t = e.composedPath().includes(this.shadowRoot.host);
-    this.isActive && !t && (this.isActive = !1);
+    const r = e.composedPath().includes(this.shadowRoot.host);
+    this.isActive && !r && (this.isActive = !1);
   }
   /**
    * Toggle active state of primary nav item
@@ -233,11 +66,11 @@ const l = class l extends u {
   _handleOnKeyDown(e) {
     if (e.key === "Escape" && this.isActive === !0) {
       this._closePanel();
-      const t = this.shadowRoot?.querySelector(
+      const r = this.shadowRoot?.querySelector(
         ".cre8-c-primary-nav__link"
       );
-      t && setTimeout(() => {
-        t.focus();
+      r && setTimeout(() => {
+        r.focus();
       }, 1);
     }
   }
@@ -265,7 +98,7 @@ const l = class l extends u {
                                 <slot name="itemAfter"></slot>
                             </div>
                         `}
-                        <cre8-icon-legacy aria-hidden="true" name="${h(this.iconName)}"></cre8-icon-legacy>
+                        <cre8-icon-legacy aria-hidden="true" name="${p(this.iconName)}"></cre8-icon-legacy>
                     </button>
                 </div>
                 <div class="cre8-c-primary-nav__item-panel">
@@ -296,24 +129,24 @@ const l = class l extends u {
   }
 };
 l.styles = [y];
-let i = l;
+let t = l;
 n([
   o()
-], i.prototype, "text");
+], t.prototype, "text");
 n([
   o()
-], i.prototype, "href");
+], t.prototype, "href");
 n([
   o()
-], i.prototype, "iconName");
+], t.prototype, "iconName");
 n([
   o({ type: Boolean, reflect: !0 })
-], i.prototype, "megaMenu");
+], t.prototype, "megaMenu");
 n([
   v()
-], i.prototype, "isActive");
-customElements.get("cre8-primary-nav-item") === void 0 && customElements.define("cre8-primary-nav-item", i);
+], t.prototype, "isActive");
+customElements.get("cre8-primary-nav-item") === void 0 && customElements.define("cre8-primary-nav-item", t);
 export {
-  i as Cre8PrimaryNavItem,
-  i as default
+  t as Cre8PrimaryNavItem,
+  t as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"primary-nav-item.styles.d.ts","sourceRoot":"","sources":["../../../components/primary-nav-item/primary-nav-item.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAuKX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"primary-nav-item.styles.d.ts","sourceRoot":"","sources":["../../../components/primary-nav-item/primary-nav-item.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAqoJ,CAAC;AAClpJ,eAAe,MAAM,CAAC"}

package/lib/components/progress-meter/progress-meter.js

@@ -1,132 +1,28 @@
-import { css as i, html as l } from "lit";
+import { css as p, html as l } from "lit";
 import { property as s } from "lit/decorators.js";
-import { nanoid as p } from "nanoid";
-import { Cre8Element as u } from "../cre8-element.js";
-const b = i`@import '../../design-tokens/core/scss/theming/component';
-
-/**
- * 1) Progress Meter
- * 2) Progress bar fill color custom property
- */
-
- :host {
-  display: block;
- }
-
-.cre8-c-progress-meter__progress {
-  --cre8-progress-meter-background: var(--cre8-color-content-brand); /* 2 */
-  width: 100%;
-  height: var(--cre8-progress-meter-height, calc(8px * 1));
-  background: var(--cre8-color-bg-transparent);
-  border-width: var(--cre8-border-width-default);
-  border-style: var(--cre8-border-style-default);
-  border-color: var(--cre8-color-border-strong);
-  border-radius: var(--cre8-border-radius-round);
-
-  .cre8-c-progress-meter--knockout & {
-    --cre8-progress-meter-background: var(--cre8-color-content-brand-knockout);
-    border-color: var(--cre8-color-border-default);
-  }
-  
-  /**
-  * Progress bar background styling error
-  */
-  .cre8-c-progress-meter--error & {
-    --cre8-progress-meter-background: var(--cre8-color-bg-error-strong);
-  }
-
-  /**
-  * Progress bar background styling warning
-  */
-  .cre8-c-progress-meter--warning & {
-    --cre8-progress-meter-background: var(--cre8-color-bg-warning-strong);
-  }
-
-  /**
-  * Progress bar background styling success
-  */
-  .cre8-c-progress-meter--success & {
-    --cre8-progress-meter-background: var(--cre8-color-bg-success-strong);
-  }
-
-
-  /**
-  * Progress bar background styling indeterminate
-  */
-  .cre8-c-progress-meter--indeterminate & {
-    --cre8-progress-meter-background: repeating-linear-gradient(
-      -45deg,
-      #009bdf,
-      #009bdf 10px,
-      #00628e 10px,
-      #00628e 20px
-    ); // TODO Possibly tokenize these
-  }
-}
-
-/**
- * Progress bar sr-only escriptor
- */
-.cre8-c-progress-meter__sr-only {
-  @include visuallyHidden;
-}
-
-
-/**
- * Progress bar background styling
- */
-progress {
-  color: var(--cre8-progress-meter-background);
-  appearance: none;
-}
-
-/**
- * Progress bar background styling for Mozilla
- */
-progress::-moz-progress-bar {
-  background: var(--cre8-progress-meter-background);
-  border-radius: var(--cre8-border-radius-round);
-}
-
-/**
- * Progress bar background styling for Safari and Chrome
- */
-progress::-webkit-progress-bar {
-  background: var(--cre8-color-bg-subtle);
-  border-radius: var(--cre8-border-radius-round);
-}
-progress::-webkit-progress-value {
-  background: var(--cre8-progress-meter-background);
-  border-radius: var(--cre8-border-radius-round);
-}
-
-/**
- * Hide Label except for screen readers
- */
-.cre8-c-progress-meter__label {
-  @include visuallyHidden;
-}
-`;
-var m = Object.defineProperty, o = (r, t, d, v) => {
-  for (var c = void 0, a = r.length - 1, g; a >= 0; a--)
-    (g = r[a]) && (c = g(t, d, c) || c);
-  return c && m(t, d, c), c;
-}, k = /* @__PURE__ */ ((r) => (r[r.error = 0] = "error", r[r.warning = 1] = "warning", r[r.success = 2] = "success", r[r.undefined = 3] = "undefined", r))(k || {});
-const n = class n extends u {
+import { nanoid as g } from "nanoid";
+import { Cre8Element as m } from "../cre8-element.js";
+const h = p`*,::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-progress-meter__progress{--cre8-progress-meter-background: var(--cre8-color-content-brand);width:100%;height:var(--cre8-progress-meter-height, 0.5rem);background:var(--cre8-color-bg-transparent);border-width:var(--cre8-border-width-default);border-style:var(--cre8-border-style-default);border-color:var(--cre8-color-border-strong);border-radius:var(--cre8-border-radius-round)}.cre8-c-progress-meter--knockout .cre8-c-progress-meter__progress{--cre8-progress-meter-background: var(--cre8-color-content-brand-knockout);border-color:var(--cre8-color-border-default)}.cre8-c-progress-meter--error .cre8-c-progress-meter__progress{--cre8-progress-meter-background: var(--cre8-color-bg-error-strong)}.cre8-c-progress-meter--warning .cre8-c-progress-meter__progress{--cre8-progress-meter-background: var(--cre8-color-bg-warning-strong)}.cre8-c-progress-meter--success .cre8-c-progress-meter__progress{--cre8-progress-meter-background: var(--cre8-color-bg-success-strong)}.cre8-c-progress-meter--indeterminate .cre8-c-progress-meter__progress{--cre8-progress-meter-background: repeating-linear-gradient(-45deg, #009bdf, #009bdf 10px, #00628e 10px, #00628e 20px)}.cre8-c-progress-meter__sr-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}progress{color:var(--cre8-progress-meter-background);appearance:none}progress::-moz-progress-bar{background:var(--cre8-progress-meter-background);border-radius:var(--cre8-border-radius-round)}progress::-webkit-progress-bar{background:var(--cre8-color-bg-subtle);border-radius:var(--cre8-border-radius-round)}progress::-webkit-progress-value{background:var(--cre8-progress-meter-background);border-radius:var(--cre8-border-radius-round)}.cre8-c-progress-meter__label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}`;
+var u = Object.defineProperty, t = (r, a, d, f) => {
+  for (var o = void 0, i = r.length - 1, n; i >= 0; i--)
+    (n = r[i]) && (o = n(a, d, o) || o);
+  return o && u(a, d, o), o;
+}, b = /* @__PURE__ */ ((r) => (r[r.error = 0] = "error", r[r.warning = 1] = "warning", r[r.success = 2] = "success", r[r.undefined = 3] = "undefined", r))(b || {});
+const c = class c extends m {
   constructor() {
     super(...arguments), this.max = 100;
   }
   connectedCallback() {
-    super.connectedCallback(), this.fieldId = this.fieldId || p();
+    super.connectedCallback(), this.fieldId = this.fieldId || g();
   }
   render() {
-    const t = this.componentClassNames("cre8-c-progress-meter", {
+    const a = this.componentClassNames("cre8-c-progress-meter", {
       "cre8-c-progress-meter--error": this.status === "error",
       "cre8-c-progress-meter--warning": this.status === "warning",
       "cre8-c-progress-meter--success": this.status === "success",
       "cre8-c-progress-meter--knockout": this.knockout
     });
-    return l`<div class="${t}">
+    return l`<div class="${a}">
       <label class="cre8-c-progress-meter__label" for="${this.fieldId}">${this.label}</label>
       <span class="cre8-c-progress-meter__sr-only">${Math.round(this.value / this.max * 100)}%</span>
       <progress
@@ -142,31 +38,31 @@ const n = class n extends u {
     </div>`;
   }
 };
-n.styles = [b];
-let e = n;
-o([
+c.styles = [h];
+let e = c;
+t([
   s()
 ], e.prototype, "status");
-o([
+t([
   s({ type: Boolean, reflect: !0 })
 ], e.prototype, "knockout");
-o([
+t([
   s()
 ], e.prototype, "max");
-o([
+t([
   s()
 ], e.prototype, "value");
-o([
+t([
   s()
 ], e.prototype, "fieldId");
-o([
+t([
   s()
 ], e.prototype, "name");
-o([
+t([
   s()
 ], e.prototype, "label");
 customElements.get("cre8-progress-meter") === void 0 && customElements.define("cre8-progress-meter", e);
 export {
   e as Cre8ProgressMeter,
-  k as status
+  b as status
 };

package/lib/components/progress-meter/progress-meter.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress-meter.styles.d.ts","sourceRoot":"","sources":["../../../components/progress-meter/progress-meter.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAwGX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"progress-meter.styles.d.ts","sourceRoot":"","sources":["../../../components/progress-meter/progress-meter.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAonH,CAAC;AACjoH,eAAe,MAAM,CAAC"}

package/lib/components/progress-steps/progress-steps.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress-steps.styles.d.ts","sourceRoot":"","sources":["../../../components/progress-steps/progress-steps.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAeX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"progress-steps.styles.d.ts","sourceRoot":"","sources":["../../../components/progress-steps/progress-steps.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAg8D,CAAC;AAC78D,eAAe,MAAM,CAAC"}

package/lib/components/progress-steps-item/progress-steps-item.js

@@ -1,106 +1,15 @@
 import { css as p, html as d } from "lit";
-import { property as c } from "lit/decorators.js";
-import { Cre8Element as g } from "../cre8-element.js";
-const v = p`@import '../../design-tokens/core/scss/theming/component';
-
-:host(:first-child)::part(left-divider),
-:host(:last-child)::part(right-divider){
-  visibility: hidden;
-}
-
-.cre8-c-progress-steps-item--complete {
-  --divider-color-left: var(--cre8-color-border-brand);
-  --divider-color-right: var(--cre8-color-border-brand);
-  --icon-color: var(--cre8-color-content-brand);
-  --name-color: var(--cre8-color-content-brand);
-}
-
-.cre8-c-progress-steps-item--current {
-  --divider-color-left: var(--cre8-color-border-brand);
-  --divider-color-right: var(--cre8-color-border-strong);
-  --icon-color: var(--cre8-color-content-brand);
-  --name-color: var(--cre8-color-content-brand);
-}
-
-.cre8-c-progress-steps-item--error {
-  --divider-color-left: var(--cre8-color-border-brand);
-  --divider-color-right: var(--cre8-color-border-strong);
-  --icon-color: var(--cre8-color-content-error-icon);
-  --name-color: var(--cre8-color-content-error);
-}
-
-.cre8-c-progress-steps-item--incomplete {
-  --divider-color-left: var(--cre8-color-border-strong);
-  --divider-color-right: var(--cre8-color-border-strong);
-  --icon-color: var(--cre8-color-content-subtle);
-  --name-color: var(--cre8-color-content-subtle);
-}
-
-.cre8-c-progress-steps-item--warning {
-  --divider-color-left: var(--cre8-color-border-brand);
-  --divider-color-right: var(--cre8-color-border-strong);
-  --icon-color: var(--cre8-color-content-warning-icon);
-  --name-color: var(--cre8-color-content-default);
-}
-
-.cre8-c-progress-steps-item {
-  @include cre8-typography-title-small();
-  text-align: center;
-}
-
-.cre8-c-progress-steps-item__top-container {
-  align-items: center;
-  display: flex;
-  padding-bottom: var(--cre8-spacing-8);
-}
-
-.cre8-c-progress-steps-item__svg {
-  color: var(--icon-color);
-  height: calc(8px * 2.5);
-  margin-left: var(--cre8-spacing-8);
-  margin-right: var(--cre8-spacing-8);
-  width: calc(8px * 2.5);
-  svg {
-    height: calc(8px * 2.5);
-    width: calc(8px * 2.5);
-  }
-}
-
-.cre8-c-progress-steps-item__message {
-  @include cre8-typography-body-small;
-  padding-left: var(--cre8-spacing-16);
-  padding-right: var(--cre8-spacing-16);
-}
-
-.cre8-c-progress-steps-item__name {
-  @include cre8-typography-title-small;
-  color: var(--name-color);
-  padding-left: var(--cre8-spacing-16);
-  padding-right: var(--cre8-spacing-16);
-}
-
-.cre8-c-progress-steps-item__divider--left,
-.cre8-c-progress-steps-item__divider--right{
-  height: calc(8px * 0.25);
-  width: 100%;
-}
-
-.cre8-c-progress-steps-item__divider--left {
-  background-color: var(--divider-color-left);
-}
-
-.cre8-c-progress-steps-item__divider--right {
-  background-color: var(--divider-color-right);
-}
-`;
-var m = Object.defineProperty, t = (a, o, n, h) => {
-  for (var e = void 0, s = a.length - 1, l; s >= 0; s--)
-    (l = a[s]) && (e = l(o, n, e) || e);
-  return e && m(o, n, e), e;
+import { property as i } from "lit/decorators.js";
+import { Cre8Element as m } from "../cre8-element.js";
+const g = p`*,::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(:first-child)::part(left-divider),:host(:last-child)::part(right-divider){visibility:hidden}.cre8-c-progress-steps-item--complete{--divider-color-left: var(--cre8-color-border-brand);--divider-color-right: var(--cre8-color-border-brand);--icon-color: var(--cre8-color-content-brand);--name-color: var(--cre8-color-content-brand)}.cre8-c-progress-steps-item--current{--divider-color-left: var(--cre8-color-border-brand);--divider-color-right: var(--cre8-color-border-strong);--icon-color: var(--cre8-color-content-brand);--name-color: var(--cre8-color-content-brand)}.cre8-c-progress-steps-item--error{--divider-color-left: var(--cre8-color-border-brand);--divider-color-right: var(--cre8-color-border-strong);--icon-color: var(--cre8-color-content-error-icon);--name-color: var(--cre8-color-content-error)}.cre8-c-progress-steps-item--incomplete{--divider-color-left: var(--cre8-color-border-strong);--divider-color-right: var(--cre8-color-border-strong);--icon-color: var(--cre8-color-content-subtle);--name-color: var(--cre8-color-content-subtle)}.cre8-c-progress-steps-item--warning{--divider-color-left: var(--cre8-color-border-brand);--divider-color-right: var(--cre8-color-border-strong);--icon-color: var(--cre8-color-content-warning-icon);--name-color: var(--cre8-color-content-default)}.cre8-c-progress-steps-item{font-family:var(--cre8-typography-title-small-mobile-font-family);font-size:var(--cre8-typography-title-small-mobile-font-size);font-weight:var(--cre8-typography-title-small-mobile-font-weight);line-height:var(--cre8-typography-title-small-mobile-line-height);text-decoration:var(--cre8-typography-title-small-mobile-text-decoration);text-transform:var(--cre8-typography-title-small-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-progress-steps-item{font-family:var(--cre8-typography-title-small-font-family);font-size:var(--cre8-typography-title-small-font-size);font-weight:var(--cre8-typography-title-small-font-weight);line-height:var(--cre8-typography-title-small-line-height);text-decoration:var(--cre8-typography-title-small-text-decoration);text-transform:var(--cre8-typography-title-small-text-transform)}}.cre8-c-progress-steps-item{text-align:center}.cre8-c-progress-steps-item__top-container{align-items:center;display:flex;padding-bottom:var(--cre8-spacing-8)}.cre8-c-progress-steps-item__svg{color:var(--icon-color);height:1.25rem;margin-left:var(--cre8-spacing-8);margin-right:var(--cre8-spacing-8);width:1.25rem}.cre8-c-progress-steps-item__svg svg{height:1.25rem;width:1.25rem}.cre8-c-progress-steps-item__message{font-family:var(--cre8-typography-body-small-font-family);font-size:var(--cre8-typography-body-small-font-size);font-weight:var(--cre8-typography-body-small-font-weight);line-height:var(--cre8-typography-body-small-line-height);text-decoration:var(--cre8-typography-body-small-text-decoration);text-transform:var(--cre8-typography-body-small-text-transform);padding-left:var(--cre8-spacing-16);padding-right:var(--cre8-spacing-16)}.cre8-c-progress-steps-item__name{font-family:var(--cre8-typography-title-small-mobile-font-family);font-size:var(--cre8-typography-title-small-mobile-font-size);font-weight:var(--cre8-typography-title-small-mobile-font-weight);line-height:var(--cre8-typography-title-small-mobile-line-height);text-decoration:var(--cre8-typography-title-small-mobile-text-decoration);text-transform:var(--cre8-typography-title-small-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-progress-steps-item__name{font-family:var(--cre8-typography-title-small-font-family);font-size:var(--cre8-typography-title-small-font-size);font-weight:var(--cre8-typography-title-small-font-weight);line-height:var(--cre8-typography-title-small-line-height);text-decoration:var(--cre8-typography-title-small-text-decoration);text-transform:var(--cre8-typography-title-small-text-transform)}}.cre8-c-progress-steps-item__name{color:var(--name-color);padding-left:var(--cre8-spacing-16);padding-right:var(--cre8-spacing-16)}.cre8-c-progress-steps-item__divider--left,.cre8-c-progress-steps-item__divider--right{height:0.125rem;width:100%}.cre8-c-progress-steps-item__divider--left{background-color:var(--divider-color-left)}.cre8-c-progress-steps-item__divider--right{background-color:var(--divider-color-right)}`;
+var h = Object.defineProperty, o = (c, t, l, v) => {
+  for (var r = void 0, s = c.length - 1, n; s >= 0; s--)
+    (n = c[s]) && (r = n(t, l, r) || r);
+  return r && h(t, l, r), r;
 };
-const i = class i extends g {
+const a = class a extends m {
   render() {
-    const o = this.componentClassNames("cre8-c-progress-steps-item", {
+    const t = this.componentClassNames("cre8-c-progress-steps-item", {
       "cre8-c-progress-steps-item--complete": this.state === "complete",
       "cre8-c-progress-steps-item--current": this.state === "current",
       "cre8-c-progress-steps-item--error": this.state === "error",
@@ -108,7 +17,7 @@ const i = class i extends g {
       "cre8-c-progress-steps-item--warning": this.state === "warning"
     });
     return d`
-        <div class='${o}'>
+        <div class='${t}'>
             <div class='cre8-c-progress-steps-item__top-container'>
               <div class='cre8-c-progress-steps-item__divider--left' part='left-divider'></div>
               <span class='cre8-c-progress-steps-item__svg'>
@@ -122,22 +31,22 @@ const i = class i extends g {
         `;
   }
 };
-i.styles = [v];
-let r = i;
-t([
-  c()
-], r.prototype, "message");
-t([
-  c()
-], r.prototype, "name");
-t([
-  c()
-], r.prototype, "state");
-t([
-  c()
-], r.prototype, "svg");
-customElements.get("cre8-progress-steps-item") === void 0 && customElements.define("cre8-progress-steps-item", r);
+a.styles = [g];
+let e = a;
+o([
+  i()
+], e.prototype, "message");
+o([
+  i()
+], e.prototype, "name");
+o([
+  i()
+], e.prototype, "state");
+o([
+  i()
+], e.prototype, "svg");
+customElements.get("cre8-progress-steps-item") === void 0 && customElements.define("cre8-progress-steps-item", e);
 export {
-  r as Cre8ProgressStepsItem,
-  r as default
+  e as Cre8ProgressStepsItem,
+  e as default
 };

package/lib/components/progress-steps-item/progress-steps-item.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress-steps-item.styles.d.ts","sourceRoot":"","sources":["../../../components/progress-steps-item/progress-steps-item.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBA2FX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"progress-steps-item.styles.d.ts","sourceRoot":"","sources":["../../../components/progress-steps-item/progress-steps-item.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA69L,CAAC;AAC1+L,eAAe,MAAM,CAAC"}