@tmorrow/cre8-wc 1.0.25 → 1.1.1

package/lib/components/alert/alert.js

@@ -1,234 +1,69 @@
-import { d as u, f as g, b as h, c as p } from "../../icon-DImqxDiW.js";
-import { s as b } from "../../Error-aYunUubM.js";
-import { css as v, nothing as m, html as e } from "lit";
+import { d as h, f as p, b as g, c as m } from "../../icon-D22g8aWB.js";
+import { s as u } from "../../Error-aYunUubM.js";
+import { css as f, nothing as v, html as r } from "lit";
 import { property as t } from "lit/decorators.js";
 import "../button/button.js";
 import "../link/link.js";
 import "../heading/heading.js";
 import "../text-passage/text-passage.js";
-import { Cre8Element as f } from "../cre8-element.js";
-const C = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+import { Cre8Element as b } from "../cre8-element.js";
+const y = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
 <path d="M11.7133 15.4286C11.7133 15.5802 11.6531 15.7255 11.5459 15.8327C11.4388 15.9398 11.2934 16 11.1419 16H5.42827C5.27674 16 5.13141 15.9398 5.02426 15.8327C4.91711 15.7255 4.85691 15.5802 4.85691 15.4286C4.85691 15.2771 4.91711 15.1318 5.02426 15.0246C5.13141 14.9175 5.27674 14.8573 5.42827 14.8573H11.1419C11.2934 14.8573 11.4388 14.9175 11.5459 15.0246C11.6531 15.1318 11.7133 15.2771 11.7133 15.4286ZM14.5701 6.28682C14.5726 7.23931 14.3574 8.17978 13.941 9.03644C13.5246 9.89311 12.918 10.6433 12.1675 11.2298C12.0272 11.3374 11.9133 11.4756 11.8346 11.6339C11.7558 11.7923 11.7144 11.9665 11.7133 12.1433V12.5718C11.7133 12.8749 11.5929 13.1655 11.3786 13.3798C11.1643 13.5942 10.8736 13.7145 10.5705 13.7145H5.99964C5.69657 13.7145 5.40591 13.5942 5.19161 13.3798C4.9773 13.1655 4.85691 12.8749 4.85691 12.5718V12.1433C4.85679 11.9686 4.81662 11.7963 4.73949 11.6395C4.66235 11.4828 4.55031 11.3458 4.41196 11.2391C3.66333 10.6561 3.05715 9.91037 2.63929 9.05844C2.22143 8.20652 2.00285 7.2707 2.00009 6.32182C1.98152 2.91792 4.73264 0.0832435 8.13368 0.00182421C8.97169 -0.0183701 9.80527 0.129276 10.5854 0.436073C11.3655 0.74287 12.0763 1.20262 12.6761 1.78826C13.2758 2.3739 13.7523 3.07359 14.0776 3.84616C14.4029 4.61873 14.5703 5.44857 14.5701 6.28682ZM12.2768 5.61976C12.1286 4.7922 11.7305 4.02991 11.1359 3.4355C10.5414 2.8411 9.77903 2.44311 8.95144 2.29513C8.87744 2.28266 8.80171 2.28488 8.72857 2.30168C8.65543 2.31847 8.58631 2.34951 8.52516 2.39301C8.46401 2.43652 8.41204 2.49164 8.37219 2.55524C8.33235 2.61883 8.30542 2.68965 8.29295 2.76365C8.28047 2.83765 8.2827 2.91339 8.29949 2.98653C8.31628 3.05967 8.34732 3.12879 8.39083 3.18993C8.43433 3.25108 8.48946 3.30306 8.55305 3.3429C8.61664 3.38275 8.68746 3.40967 8.76147 3.42215C9.9449 3.62141 10.9491 4.62558 11.1498 5.81116C11.1724 5.94423 11.2414 6.065 11.3445 6.15207C11.4477 6.23914 11.5783 6.28687 11.7133 6.28682C11.7456 6.28663 11.7778 6.284 11.8097 6.27897C11.959 6.25347 12.0921 6.1697 12.1797 6.04608C12.2673 5.92246 12.3022 5.76911 12.2768 5.61976Z"/>
 </svg>
-`, _ = v`@import '../../design-tokens/core/scss/theming/component';
-
-dialog {
-  border: none;
-  width: 100%;
-}
-
-.cre8-c-alert {
-  padding: var(--cre8-spacing-16);
-  border-width: var(--cre8-border-width-default);
-  border-style: var(--cre8-border-style-default);
-  border-radius: var(--cre8-border-radius-default);
-
-  .cre8-c-alert__container {
-    display: flex;
-    gap: var(--cre8-spacing-8);
-    position: relative;
-
-    .cre8-c-alert__message-container {
-      color: var(--cre8-color-content-knockout);
-      display: flex;
-      flex-direction: column;
-
-      .cre8-c-alert__heading-container {
-        @include cre8-typography-title-small;
-      }
-
-      .cre8-c-alert__body-container {
-        @include cre8-typography-body-small;
-        padding-bottom: var(--cre8-spacing-8);
-      }
-
-      .cre8-c-alert__footer-container {
-        padding: 0;
-      }
-    }
-  }
-
-  .cre8-c-alert__close-btn {
-    position: absolute;
-    top: -10px;
-    right: 0px;
-  }
-
-  &.cre8-c-alert--emphasis-subtle {
-    .cre8-c-alert__message-container {
-      color: var(--cre8-color-content-default);
-    }
-  }
-
-  &.cre8-c-alert--banner {
-    border-radius: 0;
-    border: none;
-  }
-
-  &.cre8-c-alert--warning {
-    .cre8-c-alert__message-container {
-      color: var(--cre8-color-content-default);
-    }
-  }
-}
-
-.cre8-c-alert--standalone {
-  border-radius: var(--cre8-border-radius-default);
-  width: calc(8px * 45);
-
-  .cre8-c-alert__container {
-    display: flex;
-    gap: var(--cre8-spacing-8);
-    position: relative;
-  }
-}
-
-.cre8-c-alert__icon {
-  height: var(--cre8-spacing-16);
-  min-height: var(--cre8-spacing-16);
-  width: var(--cre8-spacing-16);
-  min-width: var(--cre8-spacing-16);
-}
-
-.cre8-c-alert--info,
-.cre8-c-alert--success,
-.cre8-c-alert--error,
-.cre8-c-alert--neutral,
-.cre8-c-alert--notification {
-  color: var(--cre8-color-content-knockout);
-}
-
-/**
- * Alert info
- */
-.cre8-c-alert--info {
-  background: var(--cre8-color-bg-info-strong);
-  border-color: var(--cre8-color-border-info);
-
-  &.cre8-c-alert--emphasis-subtle {
-    background: var(--cre8-color-bg-info);
-    color: var(--cre8-color-content-info-icon);
-  }
-}
-
-/**
- * Alert warning
- */
-.cre8-c-alert--warning {
-  background: var(--cre8-color-bg-warning-strong);
-  border-color: var(--cre8-color-border-warning);
-  color: var(--cre8-color-content-default);
-
-  &.cre8-c-alert--emphasis-subtle {
-    background: var(--cre8-color-bg-warning);
-  }
-}
-
-/**
- * Alert success
- */
-.cre8-c-alert--success {
-  background: var(--cre8-color-bg-success-strong);
-  border-color: var(--cre8-color-border-success);
-
-  &.cre8-c-alert--emphasis-subtle {
-    background: var(--cre8-color-bg-success);
-    color: var(--cre8-color-content-success-icon);
-  }
-}
-
-/**
- * Alert error
- */
-.cre8-c-alert--error {
-  background: var(--cre8-color-bg-error-strong);
-  border-color: var(--cre8-color-border-error);
-
-  &.cre8-c-alert--emphasis-subtle {
-    background: var(--cre8-color-bg-error);
-    color: var(--cre8-color-content-error-icon);
-  }
-}
-
-/**
- * Alert neutral
- */
-.cre8-c-alert--neutral {
-  background: var(--cre8-color-bg-strong);
-  border-color: var(--cre8-color-border-neutral);
-
-  &.cre8-c-alert--emphasis-subtle {
-    background: var(--cre8-color-bg-subtle);
-    color: var(--cre8-color-content-default);
-  }
-}
-
-/**
- * Alert notification
- */
-.cre8-c-alert--notification {
-  background: var(--cre8-color-bg-attention-strong);
-  border-color: var(--cre8-color-border-attention);
-
-  &.cre8-c-alert--emphasis-subtle {
-    background: var(--cre8-color-bg-subtle);
-    color: var(--cre8-color-content-attention-icon);
-  }
-}
-`;
-var y = Object.defineProperty, c = (n, o, l, $) => {
-  for (var a = void 0, s = n.length - 1, d; s >= 0; s--)
-    (d = n[s]) && (a = d(o, l, a) || a);
-  return a && y(o, l, a), a;
+`, x = 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}dialog{border:none;width:100%}.cre8-c-alert{padding:var(--cre8-spacing-16);border-width:var(--cre8-border-width-default);border-style:var(--cre8-border-style-default);border-radius:var(--cre8-border-radius-default)}.cre8-c-alert .cre8-c-alert__container{display:flex;gap:var(--cre8-spacing-8);position:relative}.cre8-c-alert .cre8-c-alert__container .cre8-c-alert__message-container{color:var(--cre8-color-content-knockout);display:flex;flex-direction:column}.cre8-c-alert .cre8-c-alert__container .cre8-c-alert__message-container .cre8-c-alert__heading-container{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-alert .cre8-c-alert__container .cre8-c-alert__message-container .cre8-c-alert__heading-container{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-alert .cre8-c-alert__container .cre8-c-alert__message-container .cre8-c-alert__body-container{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-bottom:var(--cre8-spacing-8)}.cre8-c-alert .cre8-c-alert__container .cre8-c-alert__message-container .cre8-c-alert__footer-container{padding:0}.cre8-c-alert .cre8-c-alert__close-btn{position:absolute;top:-10px;right:0px}.cre8-c-alert.cre8-c-alert--emphasis-subtle .cre8-c-alert__message-container{color:var(--cre8-color-content-default)}.cre8-c-alert.cre8-c-alert--banner{border-radius:0;border:none}.cre8-c-alert.cre8-c-alert--warning .cre8-c-alert__message-container{color:var(--cre8-color-content-default)}.cre8-c-alert--standalone{border-radius:var(--cre8-border-radius-default);width:22.5rem}.cre8-c-alert--standalone .cre8-c-alert__container{display:flex;gap:var(--cre8-spacing-8);position:relative}.cre8-c-alert__icon{height:var(--cre8-spacing-16);min-height:var(--cre8-spacing-16);width:var(--cre8-spacing-16);min-width:var(--cre8-spacing-16)}.cre8-c-alert--info,.cre8-c-alert--success,.cre8-c-alert--error,.cre8-c-alert--neutral,.cre8-c-alert--notification{color:var(--cre8-color-content-knockout)}.cre8-c-alert--info{background:var(--cre8-color-bg-info-strong);border-color:var(--cre8-color-border-info)}.cre8-c-alert--info.cre8-c-alert--emphasis-subtle{background:var(--cre8-color-bg-info);color:var(--cre8-color-content-info-icon)}.cre8-c-alert--warning{background:var(--cre8-color-bg-warning-strong);border-color:var(--cre8-color-border-warning);color:var(--cre8-color-content-default)}.cre8-c-alert--warning.cre8-c-alert--emphasis-subtle{background:var(--cre8-color-bg-warning)}.cre8-c-alert--success{background:var(--cre8-color-bg-success-strong);border-color:var(--cre8-color-border-success)}.cre8-c-alert--success.cre8-c-alert--emphasis-subtle{background:var(--cre8-color-bg-success);color:var(--cre8-color-content-success-icon)}.cre8-c-alert--error{background:var(--cre8-color-bg-error-strong);border-color:var(--cre8-color-border-error)}.cre8-c-alert--error.cre8-c-alert--emphasis-subtle{background:var(--cre8-color-bg-error);color:var(--cre8-color-content-error-icon)}.cre8-c-alert--neutral{background:var(--cre8-color-bg-strong);border-color:var(--cre8-color-border-neutral)}.cre8-c-alert--neutral.cre8-c-alert--emphasis-subtle{background:var(--cre8-color-bg-subtle);color:var(--cre8-color-content-default)}.cre8-c-alert--notification{background:var(--cre8-color-bg-attention-strong);border-color:var(--cre8-color-border-attention)}.cre8-c-alert--notification.cre8-c-alert--emphasis-subtle{background:var(--cre8-color-bg-subtle);color:var(--cre8-color-content-attention-icon)}`;
+var _ = Object.defineProperty, a = (l, c, n, w) => {
+  for (var o = void 0, i = l.length - 1, d; i >= 0; i--)
+    (d = l[i]) && (o = d(c, n, o) || o);
+  return o && _(c, n, o), o;
 };
-const i = class i extends f {
+const s = class s extends b {
   constructor() {
-    super(...arguments), this.status = "info", this.variant = "standalone", this.emphasis = "subtle", this.iconAlert = void 0, this.headerText = void 0, this.ctaBody = void 0, this.checkEmphasisAlert = () => this.emphasis !== "subtle", this.mapStatusToIconAlert = (o) => {
-      switch (o) {
+    super(...arguments), this.status = "info", this.variant = "standalone", this.emphasis = "subtle", this.iconAlert = void 0, this.headerText = void 0, this.ctaBody = void 0, this.checkEmphasisAlert = () => this.emphasis !== "subtle", this.mapStatusToIconAlert = (c) => {
+      switch (c) {
         case "error":
-          return e`<cre8-icon
-              svg="${b}"
+          return r`<cre8-icon
+              svg="${u}"
               aria-label="${this.iconTitle}"
               aria-hidden="true"
               class="cre8-c-alert__icon"
               ></cre8-icon>`;
         case "success":
-          return e`<cre8-icon
-              svg="${h}"
+          return r`<cre8-icon
+              svg="${g}"
               aria-label="${this.iconTitle}"
               aria-hidden="true"
               class="cre8-c-alert__icon"
               ></cre8-icon>`;
         case "warning":
-          return e`<cre8-icon
-              svg="${g}"
+          return r`<cre8-icon
+              svg="${p}"
               aria-label="${this.iconTitle}"
               aria-hidden="true"
               class="cre8-c-alert__icon"
               ></cre8-icon>`;
         case "notification":
-          return e`<cre8-icon
-              svg="${C}"
+          return r`<cre8-icon
+              svg="${y}"
               aria-label="${this.iconTitle}"
               aria-hidden="true"
               class="cre8-c-alert__icon"
               ></cre8-icon>`;
         case "info":
-          return e`<cre8-icon
-              svg="${u}"
+          return r`<cre8-icon
+              svg="${h}"
               aria-label="${this.iconTitle}"
               aria-hidden="true"
               class="cre8-c-alert__icon"
               ></cre8-icon>`;
         case "neutral":
-          return e`<cre8-icon
-              svg="${u}"
+          return r`<cre8-icon
+              svg="${h}"
               aria-label="${this.iconTitle}"
               aria-hidden="true"
               class="cre8-c-alert__icon"
               ></cre8-icon>`;
         default:
-          return m;
+          return v;
       }
     };
   }
@@ -240,7 +75,7 @@ const i = class i extends f {
     this.dismissed = !0;
   }
   render() {
-    const o = this.componentClassNames("cre8-c-alert", {
+    const c = this.componentClassNames("cre8-c-alert", {
       "cre8-c-alert--error": this.status === "error",
       "cre8-c-alert--info": this.status === "info",
       "cre8-c-alert--notification": this.status === "notification",
@@ -252,17 +87,17 @@ const i = class i extends f {
       "cre8-c-alert--emphasis-subtle": this.emphasis === "subtle",
       "cre8-c-alert--notdismissible": this.notDismissible
     });
-    return this.dismissed ? null : e`
+    return this.dismissed ? null : r`
           <dialog open>
-            <div class="${o}">
+            <div class="${c}">
               <div class="cre8-c-alert__container">
-                ${this.status ? e` ${this.mapStatusToIconAlert(this.status)}` : ""}
+                ${this.status ? r` ${this.mapStatusToIconAlert(this.status)}` : ""}
                 <div class="cre8-c-alert__message-container">
                   <div class="cre8-c-alert__heading-container">
-                    ${this.headerText ? e`${this.headerText}` : ""}
-                    ${this.notDismissible ? "" : e`<cre8-button
+                    ${this.headerText ? r`${this.headerText}` : ""}
+                    ${this.notDismissible ? "" : r`<cre8-button
                      class="cre8-c-alert__close-btn"
-                     svg='${p}'
+                     svg='${m}'
                      iconRotateDegree="90"
                      iconPosition="after"
                      variant="tertiary"
@@ -285,37 +120,37 @@ const i = class i extends f {
         `;
   }
 };
-i.styles = [_];
-let r = i;
-c([
+s.styles = [x];
+let e = s;
+a([
   t({ reflect: !0 })
-], r.prototype, "status");
-c([
+], e.prototype, "status");
+a([
   t({ reflect: !0 })
-], r.prototype, "variant");
-c([
+], e.prototype, "variant");
+a([
   t({ reflect: !0 })
-], r.prototype, "emphasis");
-c([
+], e.prototype, "emphasis");
+a([
   t({ type: String })
-], r.prototype, "iconAlert");
-c([
+], e.prototype, "iconAlert");
+a([
   t()
-], r.prototype, "iconTitle");
-c([
+], e.prototype, "iconTitle");
+a([
   t({ type: String })
-], r.prototype, "headerText");
-c([
+], e.prototype, "headerText");
+a([
   t({ type: String })
-], r.prototype, "ctaBody");
-c([
+], e.prototype, "ctaBody");
+a([
   t({ type: Boolean, reflect: !0 })
-], r.prototype, "dismissed");
-c([
+], e.prototype, "dismissed");
+a([
   t({ type: Boolean, reflect: !0 })
-], r.prototype, "notDismissible");
-customElements.get("cre8-alert") === void 0 && customElements.define("cre8-alert", r);
+], e.prototype, "notDismissible");
+customElements.get("cre8-alert") === void 0 && customElements.define("cre8-alert", e);
 export {
-  r as Cre8Alert,
-  r as default
+  e as Cre8Alert,
+  e as default
 };

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

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

package/lib/components/badge/badge.js

@@ -1,151 +1,20 @@
-import l from "classnames";
-import { css as b, html as s } from "lit";
-import { property as t } from "lit/decorators.js";
-import { Cre8Element as u } from "../cre8-element.js";
-import "../../icon-DImqxDiW.js";
-const h = b`
-@import '../../design-tokens/core/scss/theming/component';
-
-:host {
-  display: inline-flex;
-}
-
-/**
- * 1) Badges are blocks of color with text inside used for messaging
- */
-.cre8-c-badge {
-  @include cre8-typography-label-small();
-  display: inline-flex;
-  border-radius: var(--cre8-border-radius-badge);
-  padding: var(--cre8-badge-padding-vertical) var(--cre8-badge-padding-horizontal);
-
-  color: var(--cre8-color-content-knockout);
-  background-color: var(--cre8-color-bg-strong);
-  align-items: center;
-}
-
-/**
- * Success badge
- */
-.cre8-c-badge--success {
-  background-color: var(--cre8-color-bg-success-strong);
-}
-
-/**
- * Warning badge
- */
-.cre8-c-badge--warning {
-  background-color: var(--cre8-color-bg-warning-strong);
-  color: var(--cre8-color-content-default);
-}
-
-/**
-* Creating space between icon and text
-*/
-cre8-icon {
-  height: var(--cre8-icon-height, calc(8px * 2));
-  margin-right: calc(8px * 0.5);
-}
-
-/**
- * Error badge
- */
-.cre8-c-badge--error {
-  background-color: var(--cre8-color-bg-error-strong);
-}
-
-/**
- * Info badge
- */
-.cre8-c-badge--info {
-  background-color: var(--cre8-color-bg-info-strong);
-}
-
-/**
- * Attention badge
- */
-.cre8-c-badge--attention {
-  background-color: var(--cre8-color-bg-attention-strong);
-}
-
-/**
- * Light neutral (default) badge
- */
-.cre8-c-badge--light {
-  background-color: var(--cre8-color-bg-subtle);
-  color: var(--cre8-color-content-default);
-}
-
-/**
- * Light Success badge
- */
-.cre8-c-badge--light.cre8-c-badge--success {
-  background-color: var(--cre8-color-bg-success);
-  color: var(--cre8-color-content-success);
-}
-
-/**
- * Light Warning badge
- */
-.cre8-c-badge--light.cre8-c-badge--warning {
-  background-color: var(--cre8-color-bg-warning);
-}
-
-/**
- * Light Error badge
- */
-.cre8-c-badge--light.cre8-c-badge--error {
-  background-color: var(--cre8-color-bg-error);
-  color: var(--cre8-color-content-error);
-}
-
-/**
- * Light Info badge
- */
-.cre8-c-badge--light.cre8-c-badge--info {
-  background-color: var(--cre8-color-bg-info);
-}
-
-/**
- * Light Attention badge
- */
-.cre8-c-badge--light.cre8-c-badge--attention {
-  background-color: var(--cre8-color-bg-attention);
-}
-
-/**
- * White neutral (default) badge
- */
-.cre8-c-badge--white {
-  background-color: var(--cre8-color-bg-default);
-  color: var(--cre8-color-content-default);
-}
-
-/**
- * White Success badge
- */
-.cre8-c-badge--white.cre8-c-badge--success {
-  color: var(--cre8-color-content-success);
-}
-
-/**
- * White Error badge
- */
-.cre8-c-badge--white.cre8-c-badge--error {
-  background-color: none;
-  color: var(--cre8-color-content-error);
-}`;
-var v = Object.defineProperty, n = (r, o, i, m) => {
-  for (var c = void 0, a = r.length - 1, d; a >= 0; a--)
-    (d = r[a]) && (c = d(o, i, c) || c);
-  return c && v(o, i, c), c;
-}, p = /* @__PURE__ */ ((r) => (r[r.error = 0] = "error", r[r.warning = 1] = "warning", r[r.success = 2] = "success", r[r.info = 3] = "info", r[r.attention = 4] = "attention", r[r.undefined = 5] = "undefined", r))(p || {}), f = /* @__PURE__ */ ((r) => (r[r.light = 0] = "light", r[r.white = 1] = "white", r[r.undefined = 2] = "undefined", r))(f || {});
-const g = class g extends u {
+import g from "classnames";
+import { css as h, html as d } from "lit";
+import { property as c } from "lit/decorators.js";
+import { Cre8Element as p } from "../cre8-element.js";
+import "../../icon-D22g8aWB.js";
+const b = 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:inline-flex}.cre8-c-badge{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);display:inline-flex;border-radius:var(--cre8-border-radius-badge);padding:var(--cre8-badge-padding-vertical) var(--cre8-badge-padding-horizontal);color:var(--cre8-color-content-knockout);background-color:var(--cre8-color-bg-strong);align-items:center}.cre8-c-badge--success{background-color:var(--cre8-color-bg-success-strong)}.cre8-c-badge--warning{background-color:var(--cre8-color-bg-warning-strong);color:var(--cre8-color-content-default)}cre8-icon{height:var(--cre8-icon-height, 1rem);margin-right:0.25rem}.cre8-c-badge--error{background-color:var(--cre8-color-bg-error-strong)}.cre8-c-badge--info{background-color:var(--cre8-color-bg-info-strong)}.cre8-c-badge--attention{background-color:var(--cre8-color-bg-attention-strong)}.cre8-c-badge--light{background-color:var(--cre8-color-bg-subtle);color:var(--cre8-color-content-default)}.cre8-c-badge--light.cre8-c-badge--success{background-color:var(--cre8-color-bg-success);color:var(--cre8-color-content-success)}.cre8-c-badge--light.cre8-c-badge--warning{background-color:var(--cre8-color-bg-warning)}.cre8-c-badge--light.cre8-c-badge--error{background-color:var(--cre8-color-bg-error);color:var(--cre8-color-content-error)}.cre8-c-badge--light.cre8-c-badge--info{background-color:var(--cre8-color-bg-info)}.cre8-c-badge--light.cre8-c-badge--attention{background-color:var(--cre8-color-bg-attention)}.cre8-c-badge--white{background-color:var(--cre8-color-bg-default);color:var(--cre8-color-content-default)}.cre8-c-badge--white.cre8-c-badge--success{color:var(--cre8-color-content-success)}.cre8-c-badge--white.cre8-c-badge--error{background-color:none;color:var(--cre8-color-content-error)}`;
+var m = Object.defineProperty, a = (e, o, s, v) => {
+  for (var t = void 0, i = e.length - 1, l; i >= 0; i--)
+    (l = e[i]) && (t = l(o, s, t) || t);
+  return t && m(o, s, t), t;
+}, f = /* @__PURE__ */ ((e) => (e[e.error = 0] = "error", e[e.warning = 1] = "warning", e[e.success = 2] = "success", e[e.info = 3] = "info", e[e.attention = 4] = "attention", e[e.undefined = 5] = "undefined", e))(f || {}), u = /* @__PURE__ */ ((e) => (e[e.light = 0] = "light", e[e.white = 1] = "white", e[e.undefined = 2] = "undefined", e))(u || {});
+const n = class n extends p {
   constructor() {
     super(...arguments), this.text = void 0;
   }
   render() {
-    const o = l("cre8-c-badge", {
+    const o = g("cre8-c-badge", {
       "cre8-c-badge--success": this.status === "success",
       "cre8-c-badge--warning": this.status === "warning",
       "cre8-c-badge--error": this.status === "error",
@@ -154,31 +23,31 @@ const g = class g extends u {
       "cre8-c-badge--light": this.variant === "light",
       "cre8-c-badge--white": this.variant === "white"
     });
-    return s`<div class="${o}">
-        ${this.svg ? s` <cre8-icon 
+    return d`<div class="${o}">
+        ${this.svg ? d` <cre8-icon 
             svg='${this.svg}' aria-hidden='true'></cre8-icon>
         </cre8-icon>` : ""} 
         ${this.text} 
         </div> `;
   }
 };
-g.styles = [h];
-let e = g;
-n([
-  t({ type: String })
-], e.prototype, "text");
-n([
-  t({ type: String })
-], e.prototype, "status");
-n([
-  t({ type: String })
-], e.prototype, "variant");
-n([
-  t({ type: String })
-], e.prototype, "svg");
-customElements.get("cre8-badge") === void 0 && customElements.define("cre8-badge", e);
+n.styles = [b];
+let r = n;
+a([
+  c({ type: String })
+], r.prototype, "text");
+a([
+  c({ type: String })
+], r.prototype, "status");
+a([
+  c({ type: String })
+], r.prototype, "variant");
+a([
+  c({ type: String })
+], r.prototype, "svg");
+customElements.get("cre8-badge") === void 0 && customElements.define("cre8-badge", r);
 export {
-  e as Cre8Badge,
-  p as status,
-  f as variant
+  r as Cre8Badge,
+  f as status,
+  u as variant
 };

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

@@ -1 +1 @@
-{"version":3,"file":"badge.styles.d.ts","sourceRoot":"","sources":["../../../components/badge/badge.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAmIV,CAAC;AACH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"badge.styles.d.ts","sourceRoot":"","sources":["../../../components/badge/badge.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAmxH,CAAC;AAChyH,eAAe,MAAM,CAAC"}