@tmorrow/cre8-wc 1.0.26 → 1.1.1

package/lib/components/remove-tag/remove-tag.js

@@ -1,108 +1,15 @@
-import i from "classnames";
-import { css as u, html as v } from "lit";
-import { property as c } from "lit/decorators.js";
-import { c as g } from "../../icon-DImqxDiW.js";
-import { Cre8Element as b } from "../cre8-element.js";
-const m = u`@import '../../design-tokens/core/scss/theming/component';
-
-/**
- * Remove Tags are buttons with text accompanied by a Close icon.
- */
-.cre8-c-remove-tag {
-    @include cre8-typography-label-small;
-    display: flex;
-    align-items: center;
-    align-content: center;
-    appearance: none;
-    white-space: nowrap;
-    padding-left: var(--cre8-spacing-16);
-    padding-right: var(--cre8-spacing-16);
-    padding-top: var(--cre8-spacing-4);
-    padding-bottom: var(--cre8-spacing-4);
-    gap: var(--cre8-spacing-8);
-    border-width: var(--cre8-border-width-default);
-    border-style: var(--cre8-border-style-default);
-    cursor: pointer;
-
-    &:focus-visible {
-        @include focus;
-    }
-    /**
-    * Neutral remove tag
-    */
-    &.cre8-c-remove-tag--neutral {
-        background-color: var(--cre8-color-bg-default);
-        color: var(--cre8-color-content-default);
-        border-color: var(--cre8-color-border-strong);
-    
-        &:hover, &:focus {
-            background-color: var(--cre8-color-bg-default-hover);
-        }
-    }
-  
-    /**
-    * Branded remove tag
-    */
-    &.cre8-c-remove-tag--branded {
-        background-color: var(--cre8-color-bg-brand);
-        color: var(--cre8-color-content-default);
-        border-color: var(--cre8-color-border-transparent);
-    
-        &:hover, &:focus {
-          background-color: var(--cre8-color-bg-brand-hover);
-        }
-    }
-  
-    /**
-    * Neutral Hybrid remove tag
-    */
-    &.cre8-c-remove-tag--neutral-hybrid {
-        background-color: var(--cre8-color-bg-default);
-        color: var(--cre8-color-content-brand);
-        border-color: var(--cre8-color-border-strong);
-    
-        &:hover, &:focus {
-          background-color: var(--cre8-color-bg-default-hover);
-        }
-    }
-
-    /**
-    * Round remove tag
-    */
-    &.cre8-c-remove-tag--round {
-        border-radius: var(--cre8-border-radius-round);
-    }
-    
-    /**
-    * Square remove tag
-    */
-    &.cre8-c-remove-tag--square {
-        border-radius: var(--cre8-border-radius-small);
-    }
-
-    &:disabled {
-        background-color: var(--cre8-color-bg-disabled);
-        color: var(--cre8-color-content-disabled);
-        border-color: var(--cre8-color-border-disabled);
-        cursor: not-allowed;
-
-        &:hover, &:focus {
-            background-color: var(--cre8-color-bg-disabled);
-        }
-    }
-}
-
-.cre8-c-remove-tag-item__icon {
-    align-items: center;
-    width: calc(8px * 2);
-    height: calc(8px * 2);
-}`;
-var p = Object.defineProperty, t = (r, o, l, y) => {
-  for (var a = void 0, d = r.length - 1, s; d >= 0; d--)
-    (s = r[d]) && (a = s(o, l, a) || a);
-  return a && p(o, l, a), a;
-}, h = /* @__PURE__ */ ((r) => (r.Round = "round", r.Square = "square", r))(h || {}), f = /* @__PURE__ */ ((r) => (r.Neutral = "neutral", r.Branded = "branded", r.NeutralHybrid = "neutral-hybrid", r))(f || {});
-const n = class n extends b {
+import n from "classnames";
+import { css as m, html as g } from "lit";
+import { property as o } from "lit/decorators.js";
+import { c as h } from "../../icon-D22g8aWB.js";
+import { Cre8Element as p } from "../cre8-element.js";
+const v = m`*,::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-remove-tag{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:flex;align-items:center;align-content:center;appearance:none;white-space:nowrap;padding-left:var(--cre8-spacing-16);padding-right:var(--cre8-spacing-16);padding-top:var(--cre8-spacing-4);padding-bottom:var(--cre8-spacing-4);gap:var(--cre8-spacing-8);border-width:var(--cre8-border-width-default);border-style:var(--cre8-border-style-default);cursor:pointer}.cre8-c-remove-tag:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-remove-tag.cre8-c-remove-tag--neutral{background-color:var(--cre8-color-bg-default);color:var(--cre8-color-content-default);border-color:var(--cre8-color-border-strong)}.cre8-c-remove-tag.cre8-c-remove-tag--neutral:hover,.cre8-c-remove-tag.cre8-c-remove-tag--neutral:focus{background-color:var(--cre8-color-bg-default-hover)}.cre8-c-remove-tag.cre8-c-remove-tag--branded{background-color:var(--cre8-color-bg-brand);color:var(--cre8-color-content-default);border-color:var(--cre8-color-border-transparent)}.cre8-c-remove-tag.cre8-c-remove-tag--branded:hover,.cre8-c-remove-tag.cre8-c-remove-tag--branded:focus{background-color:var(--cre8-color-bg-brand-hover)}.cre8-c-remove-tag.cre8-c-remove-tag--neutral-hybrid{background-color:var(--cre8-color-bg-default);color:var(--cre8-color-content-brand);border-color:var(--cre8-color-border-strong)}.cre8-c-remove-tag.cre8-c-remove-tag--neutral-hybrid:hover,.cre8-c-remove-tag.cre8-c-remove-tag--neutral-hybrid:focus{background-color:var(--cre8-color-bg-default-hover)}.cre8-c-remove-tag.cre8-c-remove-tag--round{border-radius:var(--cre8-border-radius-round)}.cre8-c-remove-tag.cre8-c-remove-tag--square{border-radius:var(--cre8-border-radius-small)}.cre8-c-remove-tag:disabled{background-color:var(--cre8-color-bg-disabled);color:var(--cre8-color-content-disabled);border-color:var(--cre8-color-border-disabled);cursor:not-allowed}.cre8-c-remove-tag:disabled:hover,.cre8-c-remove-tag:disabled:focus{background-color:var(--cre8-color-bg-disabled)}.cre8-c-remove-tag-item__icon{align-items:center;width:1rem;height:1rem}`;
+var u = Object.defineProperty, c = (e, t, l, y) => {
+  for (var a = void 0, i = e.length - 1, s; i >= 0; i--)
+    (s = e[i]) && (a = s(t, l, a) || a);
+  return a && u(t, l, a), a;
+}, b = /* @__PURE__ */ ((e) => (e.Round = "round", e.Square = "square", e))(b || {}), f = /* @__PURE__ */ ((e) => (e.Neutral = "neutral", e.Branded = "branded", e.NeutralHybrid = "neutral-hybrid", e))(f || {});
+const d = class d extends p {
   constructor() {
     super(...arguments), this.color = "neutral", this.shape = "round";
   }
@@ -110,23 +17,23 @@ const n = class n extends b {
    * Dispatches an event when the tag is clicked
    */
   _handleRemoveTagClicked() {
-    const o = new CustomEvent("removeTagClicked", {
+    const t = new CustomEvent("removeTagClicked", {
       detail: { message: "Remove Tag clicked." },
       bubbles: !0,
       composed: !0
     });
-    this.dispatchEvent(o);
+    this.dispatchEvent(t);
   }
   render() {
-    const o = i("cre8-c-remove-tag", {
+    const t = n("cre8-c-remove-tag", {
       "cre8-c-remove-tag--neutral": this.color === "neutral",
       "cre8-c-remove-tag--branded": this.color === "branded",
       "cre8-c-remove-tag--neutral-hybrid": this.color === "neutral-hybrid",
       "cre8-c-remove-tag--round": this.shape === "round",
       "cre8-c-remove-tag--square": this.shape === "square"
     });
-    return v` <button
-      class="${o}"
+    return g` <button
+      class="${t}"
       @click="${this._handleRemoveTagClicked}"
       ?disabled=${this.disabled}
     >
@@ -135,31 +42,31 @@ const n = class n extends b {
         <cre8-icon
           width="16"
           height="16"
-          svg="${g}"
+          svg="${h}"
           aria-label="remove"
         ></cre8-icon>
       </div>
     </button>`;
   }
 };
-n.styles = [m];
-let e = n;
-t([
-  c({ type: String })
-], e.prototype, "text");
-t([
-  c({ type: String })
-], e.prototype, "color");
-t([
-  c({ type: String })
-], e.prototype, "shape");
-t([
-  c({ type: Boolean })
-], e.prototype, "disabled");
-customElements.get("cre8-remove-tag") === void 0 && customElements.define("cre8-remove-tag", e);
+d.styles = [v];
+let r = d;
+c([
+  o({ type: String })
+], r.prototype, "text");
+c([
+  o({ type: String })
+], r.prototype, "color");
+c([
+  o({ type: String })
+], r.prototype, "shape");
+c([
+  o({ type: Boolean })
+], r.prototype, "disabled");
+customElements.get("cre8-remove-tag") === void 0 && customElements.define("cre8-remove-tag", r);
 export {
   f as Color,
-  e as Cre8RemoveTag,
-  h as Shape,
-  e as default
+  r as Cre8RemoveTag,
+  b as Shape,
+  r as default
 };

package/lib/components/remove-tag/remove-tag.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"remove-tag.styles.d.ts","sourceRoot":"","sources":["../../../components/remove-tag/remove-tag.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBA6FV,CAAC;AACH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"remove-tag.styles.d.ts","sourceRoot":"","sources":["../../../components/remove-tag/remove-tag.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA2qI,CAAC;AACxrI,eAAe,MAAM,CAAC"}

package/lib/components/section/section.js

@@ -1,52 +1,21 @@
-import { css as d, html as c } from "lit";
-import { property as l } from "lit/decorators.js";
-import { Cre8Element as p } from "../cre8-element.js";
-const h = d`@import '../../design-tokens/core/scss/theming/component';
-
-#SECTION
-
-
-/**
- * 1) A major section of a page (<section> tag) with a title and optional description.
- */
-.cre8-c-section {
-  margin-bottom: calc(8px * 4);
-  display: block;
-}
-
-/**
- * Section header
- * 1) Contains the section title and possibly a description
- */
-.cre8-c-section-header {
-  display: flex;
-  justify-content: space-between;
-}
-
-/**
-* Section body
-*/
-.cre8-c-section__body {
-  padding-top: calc(8px * 2);
-  @media all and (min-width:$cre8-breakpoint-lg) {
-    padding-top: calc(8px * 4);
-  }
-}
-`;
-var m = Object.defineProperty, f = (i, t, a, g) => {
-  for (var e = void 0, o = i.length - 1, r; o >= 0; o--)
-    (r = i[o]) && (e = r(t, a, e) || e);
-  return e && m(t, a, e), e;
+import { css as l, html as s } from "lit";
+import { property as h } from "lit/decorators.js";
+import { Cre8Element as c } from "../cre8-element.js";
+const m = l`*,::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}#SECTION .cre8-c-section{margin-bottom:2rem;display:block}.cre8-c-section-header{display:flex;justify-content:space-between}.cre8-c-section__body{padding-top:1rem}@media all and (min-width: 960px){.cre8-c-section__body{padding-top:2rem}}`;
+var p = Object.defineProperty, f = (d, t, n, x) => {
+  for (var e = void 0, i = d.length - 1, o; i >= 0; i--)
+    (o = d[i]) && (e = o(t, n, e) || e);
+  return e && p(t, n, e), e;
 };
-const n = class n extends p {
+const a = class a extends c {
   render() {
     const t = this.componentClassNames("cre8-c-section", {});
-    return c`
+    return s`
       <section class="${t}">
-        ${this.headline ? c`<header class="cre8-c-section__header">
+        ${this.headline ? s`<header class="cre8-c-section__header">
               <cre8-heading tagVariant="h2">${this.headline}</cre8-heading>
               <slot name="header"></slot>
-            </header>` : c`<header class="cre8-c-section__header">
+            </header>` : s`<header class="cre8-c-section__header">
               <slot name="header"></slot>
             </header>`}
         <div class="cre8-c-section__body">
@@ -56,13 +25,13 @@ const n = class n extends p {
     `;
   }
 };
-n.styles = [h];
-let s = n;
+a.styles = [m];
+let r = a;
 f([
-  l()
-], s.prototype, "headline");
-customElements.get("cre8-section") === void 0 && customElements.define("cre8-section", s);
+  h()
+], r.prototype, "headline");
+customElements.get("cre8-section") === void 0 && customElements.define("cre8-section", r);
 export {
-  s as Cre8Section,
-  s as default
+  r as Cre8Section,
+  r as default
 };

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

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