@tmorrow/cre8-wc 1.0.26 → 1.1.1

package/lib/components/date-picker/date-picker.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.styles.d.ts","sourceRoot":"","sources":["../../../components/date-picker/date-picker.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAoEX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"date-picker.styles.d.ts","sourceRoot":"","sources":["../../../components/date-picker/date-picker.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA00K,CAAC;AACv1K,eAAe,MAAM,CAAC"}

package/lib/components/divider/divider.js

@@ -1,54 +1,13 @@
-import { css as l, html as v } from "lit";
-import { property as s } from "lit/decorators.js";
+import { css as l, html as h } from "lit";
+import { property as n } from "lit/decorators.js";
 import { Cre8Element as m } from "../cre8-element.js";
-const h = l`@import '../../design-tokens/core/scss/theming/component';
-
-// #DIVIDER
-
-:host {
-  display: flex;
-}
-
-/**
- * Divider Element
- */
-.cre8-c-divider {
-  background-color: var(--cre8-color-border-default);
-  margin-top: calc(8px * 1);
-  margin-bottom: calc(8px * 1);
-}
-
-.cre8-c-divider--horizontal {
-  width: 100%;
-  height: var(--cre8-border-width-default);
-}
-
-.cre8-c-divider--vertical {
-  width: var(--cre8-border-width-default);
-  height: 100%;
-  margin-top: 0;
-  margin-bottom: 0;
-  margin-left: calc(8px * 1);
-  margin-right: calc(8px * 1);
-}
-
-/**
-* Divider colors
-*/
-.cre8-c-divider--brand {
-  background-color: var(--cre8-color-border-brand);
-}
-
-.cre8-c-divider--knockout {
-  background-color: var(--cre8-color-border-knockout);
-}
-`;
-var p = Object.defineProperty, n = (c, t, a, u) => {
-  for (var r = void 0, o = c.length - 1, d; o >= 0; o--)
-    (d = c[o]) && (r = d(t, a, r) || r);
-  return r && p(t, a, r), r;
+const p = 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}:host{display:flex}.cre8-c-divider{background-color:var(--cre8-color-border-default);margin-top:0.5rem;margin-bottom:0.5rem}.cre8-c-divider--horizontal{width:100%;height:var(--cre8-border-width-default)}.cre8-c-divider--vertical{width:var(--cre8-border-width-default);height:100%;margin-top:0;margin-bottom:0;margin-left:0.5rem;margin-right:0.5rem}.cre8-c-divider--brand{background-color:var(--cre8-color-border-brand)}.cre8-c-divider--knockout{background-color:var(--cre8-color-border-knockout)}`;
+var f = Object.defineProperty, c = (d, t, s, g) => {
+  for (var e = void 0, i = d.length - 1, o; i >= 0; i--)
+    (o = d[i]) && (e = o(t, s, e) || e);
+  return e && f(t, s, e), e;
 };
-const i = class i extends m {
+const a = class a extends m {
   constructor() {
     super(...arguments), this.variant = "horizontal";
   }
@@ -59,19 +18,19 @@ const i = class i extends m {
       "cre8-c-divider--brand": this.status === "brand",
       "cre8-c-divider--knockout": this.status === "knockout"
     });
-    return v` <div class="${t}"><wbr></div> `;
+    return h` <div class="${t}"><wbr></div> `;
   }
 };
-i.styles = [h];
-let e = i;
-n([
-  s()
-], e.prototype, "variant");
-n([
-  s()
-], e.prototype, "status");
-customElements.get("cre8-divider") === void 0 && customElements.define("cre8-divider", e);
+a.styles = [p];
+let r = a;
+c([
+  n()
+], r.prototype, "variant");
+c([
+  n()
+], r.prototype, "status");
+customElements.get("cre8-divider") === void 0 && customElements.define("cre8-divider", r);
 export {
-  e as Cre8Divider,
-  e as default
+  r as Cre8Divider,
+  r as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"divider.styles.d.ts","sourceRoot":"","sources":["../../../components/divider/divider.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAyCX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"divider.styles.d.ts","sourceRoot":"","sources":["../../../components/divider/divider.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAgwE,CAAC;AAC7wE,eAAe,MAAM,CAAC"}

package/lib/components/dropdown/dropdown.js

@@ -1,87 +1,14 @@
-import { css as h, nothing as l, html as t } from "lit";
-import { state as w, property as d, query as g } from "lit/decorators.js";
-import { s as u } from "../../Caret_Down-VI6aytYo.js";
-import { Cre8Element as b } from "../cre8-element.js";
-const f = h`@import '../../design-tokens/core/scss/theming/component';
-
-// #DROPDOWN
-
-/**
- * 1) Dropdown
- */
-
-.cre8-c-dropdown-container {
-  display: inline-flex;
-  position: relative;
-}
-.cre8-c-dropdown {
-  border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);
-  box-shadow: var(--cre8-shadow-default);
-  border-radius: var(--cre8-border-radius-default);
-  display: none;
-  flex-direction: column;
-  left: 0;
-  min-width: 100%;
-  padding: var(--cre8-spacing-8);
-  position: absolute;
-  top: 100%;
-  white-space: nowrap;
-}
-
-.cre8-c-dropdown--open {
-  display: flex;
-}
-
-.cre8-c-dropdown--icon-button {
-  color: var(--cre8-color-button-secondary-content);
-  margin-top: calc(8px * 1);
-}
-
-.cre8-c-dropdown--icon-link {
-  color: var(--cre8-color-content-link);
-  margin-top: calc(8px * 1);
-}
-
-.cre8-c-dropdown--toggle {
-  @include cre8-typography-label-default;
-  align-items: center;
-  justify-content: space-between;
-  display: flex;
-  gap: var(--cre8-spacing-8);
-  white-space: nowrap;
-}
-
-.cre8-c-dropdown--button {
-  background-color: var(--cre8-color-button-secondary-bg);
-  border: var(--cre8-border-style-default) var(--cre8-border-width-default) var(--cre8-color-button-secondary-border);
-  border-radius: var(--cre8-border-radius-button);
-  color: var(--cre8-color-button-secondary-content);
-  padding: var(--cre8-spacing-8) var(--cre8-spacing-16);
-}
-
-.cre8-c-dropdown--link {
-  color: var(--cre8-color-content-link);
-  background-color:  var(--cre8-color-bg-transparent);
-  text-decoration: underline;
-}
-
-
-.cre8-c-dropdown--close {
-  display: none;
-}
-
-ul {
-  list-style-type: none;
-  padding: var(--cre8-spacing-0);
-  margin: 0;
-}
-`;
-var v = Object.defineProperty, n = (s, e, a, m) => {
-  for (var r = void 0, c = s.length - 1, p; c >= 0; c--)
-    (p = s[c]) && (r = p(e, a, r) || r);
-  return r && v(e, a, r), r;
+import { css as f, nothing as p, html as o } from "lit";
+import { state as u, property as a, query as w } from "lit/decorators.js";
+import { s as h } from "../../Caret_Down-VI6aytYo.js";
+import { Cre8Element as g } from "../cre8-element.js";
+const m = 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}.cre8-c-dropdown-container{display:inline-flex;position:relative}.cre8-c-dropdown{border:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);box-shadow:var(--cre8-shadow-default);border-radius:var(--cre8-border-radius-default);display:none;flex-direction:column;left:0;min-width:100%;padding:var(--cre8-spacing-8);position:absolute;top:100%;white-space:nowrap}.cre8-c-dropdown--open{display:flex}.cre8-c-dropdown--icon-button{color:var(--cre8-color-button-secondary-content);margin-top:0.5rem}.cre8-c-dropdown--icon-link{color:var(--cre8-color-content-link);margin-top:0.5rem}.cre8-c-dropdown--toggle{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);align-items:center;justify-content:space-between;display:flex;gap:var(--cre8-spacing-8);white-space:nowrap}.cre8-c-dropdown--button{background-color:var(--cre8-color-button-secondary-bg);border:var(--cre8-border-style-default) var(--cre8-border-width-default) var(--cre8-color-button-secondary-border);border-radius:var(--cre8-border-radius-button);color:var(--cre8-color-button-secondary-content);padding:var(--cre8-spacing-8) var(--cre8-spacing-16)}.cre8-c-dropdown--link{color:var(--cre8-color-content-link);background-color:var(--cre8-color-bg-transparent);text-decoration:underline}.cre8-c-dropdown--close{display:none}ul{list-style-type:none;padding:var(--cre8-spacing-0);margin:0}`;
+var x = Object.defineProperty, n = (s, t, c, y) => {
+  for (var r = void 0, i = s.length - 1, l; i >= 0; i--)
+    (l = s[i]) && (r = l(t, c, r) || r);
+  return r && x(t, c, r), r;
 };
-const i = class i extends b {
+const d = class d extends g {
   constructor() {
     super(), this.open = !1, this.buttonText = "", this.dropdownWithLink = !1, this._closeDropdown.bind(this);
   }
@@ -91,8 +18,8 @@ const i = class i extends b {
   disconnectedCallback() {
     super.disconnectedCallback(), document.removeEventListener("click", this._closeDropdown);
   }
-  _toggleDropdown(e) {
-    e.preventDefault(), e.stopPropagation(), this.open = !this.open, this.open && this._updateDropdownPosition();
+  _toggleDropdown(t) {
+    t.preventDefault(), t.stopPropagation(), this.open = !this.open, this.open && this._updateDropdownPosition();
   }
   _updateDropdownPosition() {
     this.dropdownContent && this.open && (this.maxHeight && (this.dropdownContent.style.maxHeight = this.maxHeight, this.dropdownContent.style.overflowY = "auto"), this.dropdownWithLink && (this.dropdownContent.style.top = "85%"));
@@ -101,43 +28,43 @@ const i = class i extends b {
     this.open = !1;
   }
   render() {
-    const e = this.componentClassNames("cre8-c-dropdown", {
+    const t = this.componentClassNames("cre8-c-dropdown", {
       "cre8-c-dropdown--close": !this.open,
       "cre8-c-dropdown--open": this.open
     });
-    return t`
+    return o`
       <div class="cre8-c-dropdown-container">
-      ${this.dropdownWithLink ? t`<a href="#" aria-haspopup="true" class="cre8-c-dropdown--toggle cre8-c-dropdown--link" aria-expanded="${this.open ? "true" : "false"}" @click="${this._toggleDropdown}">${this.buttonText}
-        ${this.buttonText ? t`<cre8-icon svg='${u}' aria-hidden="true" class="cre8-c-dropdown--icon-link"></cre8-icon>` : l}
-      </a>` : t`<button aria-haspopup="true" class="cre8-c-dropdown--toggle cre8-c-dropdown--button" aria-expanded="${this.open ? "true" : "false"}" @click="${this._toggleDropdown}">${this.buttonText}
-      ${this.buttonText ? t`<cre8-icon svg='${u}' aria-hidden="true" class="cre8-c-dropdown--icon-button"></cre8-icon>` : l}
+      ${this.dropdownWithLink ? o`<a href="#" aria-haspopup="true" class="cre8-c-dropdown--toggle cre8-c-dropdown--link" aria-expanded="${this.open ? "true" : "false"}" @click="${this._toggleDropdown}">${this.buttonText}
+        ${this.buttonText ? o`<cre8-icon svg='${h}' aria-hidden="true" class="cre8-c-dropdown--icon-link"></cre8-icon>` : p}
+      </a>` : o`<button aria-haspopup="true" class="cre8-c-dropdown--toggle cre8-c-dropdown--button" aria-expanded="${this.open ? "true" : "false"}" @click="${this._toggleDropdown}">${this.buttonText}
+      ${this.buttonText ? o`<cre8-icon svg='${h}' aria-hidden="true" class="cre8-c-dropdown--icon-button"></cre8-icon>` : p}
         </button>`}
-        <ul role="list" class="${e}">
+        <ul role="list" class="${t}">
           <slot></slot>
         </ul>
       </div>
     `;
   }
 };
-i.styles = [f];
-let o = i;
+d.styles = [m];
+let e = d;
 n([
-  w()
-], o.prototype, "open");
+  u()
+], e.prototype, "open");
 n([
-  d({ type: String })
-], o.prototype, "buttonText");
+  a({ type: String })
+], e.prototype, "buttonText");
 n([
-  d()
-], o.prototype, "maxHeight");
+  a()
+], e.prototype, "maxHeight");
 n([
-  g(".cre8-c-dropdown")
-], o.prototype, "dropdownContent");
+  w(".cre8-c-dropdown")
+], e.prototype, "dropdownContent");
 n([
-  d()
-], o.prototype, "dropdownWithLink");
-customElements.get("cre8-dropdown") === void 0 && customElements.define("cre8-dropdown", o);
+  a()
+], e.prototype, "dropdownWithLink");
+customElements.get("cre8-dropdown") === void 0 && customElements.define("cre8-dropdown", e);
 export {
-  o as Cre8Dropdown,
-  o as default
+  e as Cre8Dropdown,
+  e as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown.styles.d.ts","sourceRoot":"","sources":["../../../components/dropdown/dropdown.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAyEX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"dropdown.styles.d.ts","sourceRoot":"","sources":["../../../components/dropdown/dropdown.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA87G,CAAC;AAC38G,eAAe,MAAM,CAAC"}

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

@@ -1,44 +1,13 @@
-import { css as c, html as l } from "lit";
-import { property as d } from "lit/decorators.js";
+import { css as n, html as l } from "lit";
+import { property as c } from "lit/decorators.js";
 import { Cre8Element as p } from "../cre8-element.js";
-const m = c`@import '../../design-tokens/core/scss/theming/component';
-
-/**
- * 1) Dropdown Item
- */
-
-.cre8-dropdown-item {
-  list-style-type: none;
-  > {
-    button {
-      @include cre8-typography-body-default;
-      background-color: var(--cre8-color-bg-default);
-      border: var(--cre8-border-width-none);
-      border-radius: var(--cre8-border-radius-default);
-      color: var(--cre8-color-content-default);
-      width: 100%;
-      cursor: pointer;
-      margin: var(--cre8-spacing-0);
-      padding: var(--cre8-spacing-8) var(--cre8-spacing-8);
-      text-align: left;
-
-      &:active,
-      &:hover,
-      &:focus {
-        background-color: var(--cre8-color-bg-brand-hover);
-        color: var(--cre8-color-content-default);
-        outline: var(--cre8-border-width-none);
-      }
-    }
-  }
-}
-`;
-var u = Object.defineProperty, v = (i, e, t, b) => {
-  for (var r = void 0, n = i.length - 1, s; n >= 0; n--)
-    (s = i[n]) && (r = s(e, t, r) || r);
-  return r && u(e, t, r), r;
+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}.cre8-dropdown-item{list-style-type:none}.cre8-dropdown-item>button{font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);background-color:var(--cre8-color-bg-default);border:var(--cre8-border-width-none);border-radius:var(--cre8-border-radius-default);color:var(--cre8-color-content-default);width:100%;cursor:pointer;margin:var(--cre8-spacing-0);padding:var(--cre8-spacing-8) var(--cre8-spacing-8);text-align:left}.cre8-dropdown-item>button:active,.cre8-dropdown-item>button:hover,.cre8-dropdown-item>button:focus{background-color:var(--cre8-color-bg-brand-hover);color:var(--cre8-color-content-default);outline:var(--cre8-border-width-none)}`;
+var m = Object.defineProperty, f = (d, e, r, g) => {
+  for (var t = void 0, i = d.length - 1, s; i >= 0; i--)
+    (s = d[i]) && (t = s(e, r, t) || t);
+  return t && m(e, r, t), t;
 };
-const a = class a extends p {
+const o = class o extends p {
   constructor() {
     super(...arguments), this.ariaLabel = "";
   }
@@ -46,19 +15,19 @@ const a = class a extends p {
     this.dispatchEvent(new Event("dropdown-item-selected", e));
   }
   render() {
-    const e = this.componentClassNames("cre8-dropdown-item", {}), t = this.ariaLabel || `Link to ${this.textContent}` || "Drop down Item";
+    const e = this.componentClassNames("cre8-dropdown-item", {}), r = this.ariaLabel || `Link to ${this.textContent}` || "Drop down Item";
     return l`<li class="${e}" role="listitem">
-        <button aria-label="${t}" @click=${this._handleClick}><slot></slot></button>
+        <button aria-label="${r}" @click=${this._handleClick}><slot></slot></button>
       </li>`;
   }
 };
-a.styles = [m];
-let o = a;
-v([
-  d({ type: String })
-], o.prototype, "ariaLabel");
-customElements.get("cre8-dropdown-item") === void 0 && customElements.define("cre8-dropdown-item", o);
+o.styles = [h];
+let a = o;
+f([
+  c({ type: String })
+], a.prototype, "ariaLabel");
+customElements.get("cre8-dropdown-item") === void 0 && customElements.define("cre8-dropdown-item", a);
 export {
-  o as Cre8DropdownItem,
-  o as default
+  a as Cre8DropdownItem,
+  a as default
 };

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

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

package/lib/components/feature/feature.js

@@ -1,101 +1,39 @@
-import { css as m, html as l } from "lit";
-import { property as i } from "lit/decorators.js";
-import { Cre8Element as f } from "../cre8-element.js";
-const u = m`@import '../../design-tokens/core/scss/theming/component';
-
-// #FEATURE
-
-/**
- * 1) A Feature is a prominent marketing block that contains
- *    Side by side information and an image
- */
-.cre8-c-feature {
-  display: flex; /* 2 */
-  flex-direction: column;
-  align-items: stretch;
-  color: var(--cre8-feature-text-color, var(--cre8-theme-color-core-text, var(--cre8-color-neutral-black)));
-  border-radius: var(--cre8-feature-border-radius, var(--cre8-border-radius-default, 0));
-
-  @media all and (min-width:$cre8-breakpoint-md) {
-    flex-direction: row;
-  }
-}
-
-/**
- * Inverted feature
- */
-.cre8-c-feature--inverted {
-  color: var(--cre8-feature-inverted-text-color, var(--cre8-theme-color-inverted, var(--cre8-color-neutral-white)));
-}
-
-/**
- * Feature body
- * 1) Container within feature that usually contains an excerpt of text
- * 2) Take up the remaining space on medr screens
- */
-.cre8-c-feature__body {
-  margin-bottom: calc(8px * 4);
-
-  @media all and (min-width:$cre8-breakpoint-md) {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    padding-right: calc(8px * 4);
-    margin-bottom: 0;
-  }
-}
-
-/**
- * Feature media container
- */
-.cre8-c-feature__media {
-  width: 100%;
-
-  @media all and (min-width:$cre8-breakpoint-md) {
-    width: 45%;
-  }
-}
-
-/**
- * Feature image
- */
-.cre8-c-feature__image {
-  display: block;
-  width: 100%;
-}
-`;
-var p = Object.defineProperty, c = (n, t, d, v) => {
-  for (var e = void 0, a = n.length - 1, s; a >= 0; a--)
-    (s = n[a]) && (e = s(t, d, e) || e);
-  return e && p(t, d, e), e;
+import { css as n, html as m } from "lit";
+import { property as a } from "lit/decorators.js";
+import { Cre8Element as h } from "../cre8-element.js";
+const p = 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}.cre8-c-feature{display:flex;flex-direction:column;align-items:stretch;color:var(--cre8-feature-text-color, var(--cre8-theme-color-core-text, var(--cre8-color-neutral-black)));border-radius:var(--cre8-feature-border-radius, var(--cre8-border-radius-default, 0))}@media all and (min-width: 768px){.cre8-c-feature{flex-direction:row}}.cre8-c-feature--inverted{color:var(--cre8-feature-inverted-text-color, var(--cre8-theme-color-inverted, var(--cre8-color-neutral-white)))}.cre8-c-feature__body{margin-bottom:2rem}@media all and (min-width: 768px){.cre8-c-feature__body{display:flex;flex-direction:column;flex:1;padding-right:2rem;margin-bottom:0}}.cre8-c-feature__media{width:100%}@media all and (min-width: 768px){.cre8-c-feature__media{width:45%}}.cre8-c-feature__image{display:block;width:100%}`;
+var f = Object.defineProperty, d = (l, t, o, x) => {
+  for (var e = void 0, i = l.length - 1, c; i >= 0; i--)
+    (c = l[i]) && (e = c(t, o, e) || e);
+  return e && f(t, o, e), e;
 };
-const o = class o extends f {
+const s = class s extends h {
   render() {
     const t = this.componentClassNames("cre8-c-feature", {
       "cre8-c-feature--inverted": this.inverted === !0
     });
-    return l`
+    return m`
       <div class="${t}" part="feature">
         <div class="cre8-c-feature__body" part="body">
           <slot></slot>
         </div>
-        ${this.imgAlt ? l`<div class="cre8-c-feature__media">
+        ${this.imgAlt ? m`<div class="cre8-c-feature__media">
               <img class="cre8-c-feature__image" src=${this.imgSrc} alt=${this.imgAlt} part="image" />
             </div>` : ""}
       </div>
     `;
   }
 };
-o.styles = [u];
-let r = o;
-c([
-  i()
+s.styles = [p];
+let r = s;
+d([
+  a()
 ], r.prototype, "imgSrc");
-c([
-  i()
+d([
+  a()
 ], r.prototype, "imgAlt");
-c([
-  i({ type: Boolean, reflect: !0 })
+d([
+  a({ type: Boolean, reflect: !0 })
 ], r.prototype, "inverted");
 customElements.get("cre8-feature") === void 0 && customElements.define("cre8-feature", r);
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"feature.styles.d.ts","sourceRoot":"","sources":["../../../components/feature/feature.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBA8DX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"feature.styles.d.ts","sourceRoot":"","sources":["../../../components/feature/feature.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA4iF,CAAC;AACzjF,eAAe,MAAM,CAAC"}