@tmorrow/cre8-wc 1.0.26 → 1.1.1

package/lib/components/band/band.js

@@ -1,263 +1,13 @@
 import { css as h, html as c } from "lit";
 import { property as l } from "lit/decorators.js";
-import { Cre8Element as u } from "../cre8-element.js";
-const m = h`/**
- * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
- */
-*,
-::slotted(*),
-*:before,
-*:after {
-  box-sizing: border-box;
-}
-
-:root {
-  --size-base-unit: 0.5rem;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
-/**
- * Visually hidden from display
- */
-/*
-=======
-Animations
-=======
-*/
-: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;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
-/**
- * Visually hidden from display
- */
-/**
- * 1) A container with a background that can house various recipes of Components within
- */
-.cre8-c-band {
-  background: var(--cre8-color-bg-subtle);
-  padding: 24px 0;
-}
-@media all and (min-width: 1200px) {
-  .cre8-c-band {
-    padding: 32px 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%;
-}
-  /* sourceMappingURL=band.module.css.map */
-`;
-var f = Object.defineProperty, d = (s, r, o, p) => {
-  for (var e = void 0, a = s.length - 1, n; a >= 0; a--)
-    (n = s[a]) && (e = n(r, o, e) || e);
-  return e && f(r, o, e), e;
+import { Cre8Element as m } from "../cre8-element.js";
+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 i = class i extends u {
+const a = class a extends m {
   render() {
     const r = this.componentClassNames("cre8-c-band", {
       "cre8-c-band--branded": this.variant === "branded",
@@ -270,12 +20,12 @@ const i = class i extends u {
     `;
   }
 };
-i.styles = [m];
-let t = i;
-d([
+a.styles = [p];
+let t = a;
+o([
   l()
 ], t.prototype, "variant");
-d([
+o([
   l({ type: Boolean, reflect: !0 })
 ], t.prototype, "fullHeight");
 customElements.get("cre8-band") === void 0 && customElements.define("cre8-band", t);

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,yBA0PX,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,15 +881,15 @@ 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() {