@tmorrow/cre8-wc 1.1.2 → 1.1.3

package/lib/components/date-picker/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../../components/date-picker/date-picker.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport styles from './date-picker.styles';\nimport { Cre8Field } from '../field/field';\nimport './calendar/calendar';\n\n/**\n * The Date Picker component renders a form group with label, control, help text and validation styling much\n * like the Field component but exclusively for type=date.\n * Cre8DatePicker inherits the Cre8Field component.\n */\nexport class Cre8DatePicker extends Cre8Field {\n   @query('input[type=\"date\"]')\n   override field!: HTMLInputElement;\n\n   /**\n    * The type of the form field.\n    * For Date Picker, this is always 'date'.\n    */\n   override type: 'text' | 'email' | 'number' | 'url' | 'tel' | 'password' | 'date' = 'date';\n   static override styles = [styles];\n\n  @state() showCalendar = false;\n\n  /**\n   * Quick Shortcuts Variant\n   * @attr {boolean}\n   *\n   */\n  @property({ type: Boolean, reflect: true })\n      hasShortcuts?: boolean;\n  /**\n   * Handle Date On Input\n   * 1) Set the input's value equal to the event.target.value when the input is changed.\n   * 2) Set the internal form value of the input to the updated value\n   */\n  private handleDateOnInput(e: Event) {\n    /* 1 */\n      this.value = (e.target as HTMLInputElement).value;\n\n    /* 2 */\n      this._internals.setFormValue(this.value);\n  }\n\n  private handleCalendarSelect(e: CustomEvent) {\n      this.value = e.detail.date;\n\n      this._internals.setFormValue(this.value);\n      this.showCalendar = false;\n  }\n\n  private handleOutsideClick(e: CustomEvent) {\n      const calendarIcon = this.renderRoot.querySelector('.cre8-c-date-picker');\n\n      if (this.showCalendar && !e.detail.composedPath.includes(calendarIcon)) {\n          this.showCalendar = false;\n      }\n  }\n\n  private toggleCalendar() {\n      if (!this.disabled && !this.readonly) {\n          this.showCalendar = !this.showCalendar;\n      }\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-date-picker', {\n          'cre8-is-error': this.isError,\n          'cre8-is-success': this.isSuccess,\n          'cre8-c-date-picker--disabled': this.disabled,\n          'cre8-c-date-picker--read-only': this.readonly,\n      });\n\n      this.type = 'date';\n\n      return html`\n      <div class=\"${componentClassNames}\">\n        <label class=\"cre8-c-date-picker__label\" for=\"${this.fieldId}\"\n          >${this.label}</label\n        >\n        <div class=\"cre8-c-date-picker__body\">\n          <input\n            class=\"cre8-c-date-picker__input\"\n            autocomplete=${ifDefined(this.autocomplete)}\n            type=\"${this.type}\"\n            id=\"${this.fieldId}\"\n            name=\"${ifDefined(this.name)}\"\n            max=${ifDefined(this.max)}\n            min=${ifDefined(this.min)}\n            value=\"${ifDefined(this.value)}\"\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            ?disabled=\"${this.disabled}\"\n            aria-describedby=\"${ifDefined(this.fieldNoteAria())}\"\n            placeholder=\"${ifDefined(this.placeholder)}\"\n            @input=${this.handleDateOnInput}\n            @click=${this.toggleCalendar}\n          />\n          <cre8-button\n            class=\"cre8-c-date-picker__calendar-icon-button\"\n            aria-expanded=\"${this.showCalendar}\"\n            aria-label=\"Show Calendar\"\n            ?disabled=\"${this.disabled || this.readonly}\"\n            ?hideText=${true}\n            iconName=\"calendar-datepicker\"\n            variant=\"tertiary\"\n            @click=\"${this.toggleCalendar}\"\n          ></cre8-button>\n        </div>\n        ${this.showCalendar\n        ? html`<cre8-calendar\n              fieldDate=\"${ifDefined(this.value)}\"\n              ?hasShortcuts=${this.hasShortcuts}\n              @dateSelect=\"${this.handleCalendarSelect}\"\n              @outsideClick=\"${this.handleOutsideClick}\"\n            ></cre8-calendar>`\n        : nothing}\n        ${this.fieldNote || this.slotNotEmpty('fieldNote')\n        ? html`<cre8-field-note\n              id=${this.ariaDescribedBy}\n              class=\"cre8-c-date-picker__field-note\"\n              ><slot name=\"fieldNote\">${this.fieldNote}</slot></cre8-field-note\n            >`\n        : nothing}\n        ${this.renderSuccessErrorFieldNote()}\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-date-picker') === undefined) {\n    customElements.define('cre8-date-picker', Cre8DatePicker);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-date-picker': Cre8DatePicker;\n  }\n}\n\nexport default Cre8DatePicker;\n"]}

package/lib/components/date-picker/date-picker.styles.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:block}.cre8-c-date-picker__label{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:block;margin-bottom:0.5rem}.cre8-c-date-picker__body{position:relative;display:flex;align-items:center}input::-webkit-calendar-picker-indicator{display:none}input[type=date]::-webkit-input-placeholder{visibility:hidden !important}.cre8-c-date-picker__calendar-icon-button{position:absolute;right:0.5rem;background:var(--cre8-color-bg-default);border:none;border-radius:0;--cre8-icon-height: size(3);--cre8-icon-width: size(3)}.cre8-c-date-picker--disabled .cre8-c-date-picker__calendar-icon-button,.cre8-c-date-picker--read-only .cre8-c-date-picker__calendar-icon-button{background:var(--cre8-color-bg-disabled)}.cre8-c-date-picker__input{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);outline:var(--cre8-border-width-focus) solid rgba(0,0,0,0);outline-offset:0.125rem;-webkit-appearance:none;width:100%;border-width:var(--cre8-border-width-default);border-style:solid;border-color:var(--cre8-color-border-strong);border-radius:var(--cre8-border-radius-default);padding:0.75rem 0.5rem;color:var(--cre8-color-content-default);background-color:var(--cre8-color-bg-default);transition:outline-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),border-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),background-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),color var(--cre8-anim-fade-quick) var(--cre8-anim-ease)}.cre8-c-date-picker__input:hover:not(:disabled),.cre8-c-date-picker__input:focus:not(:disabled),.cre8-c-date-picker__input:active:not(:disabled),.cre8-c-date-picker__input:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-is-error .cre8-c-date-picker__input:hover:not(:disabled),.cre8-is-error .cre8-c-date-picker__input:focus:not(:disabled),.cre8-is-error .cre8-c-date-picker__input:active:not(:disabled),.cre8-is-error .cre8-c-date-picker__input:focus-visible{outline-color:var(--cre8-color-border-error)}.cre8-is-success .cre8-c-date-picker__input:hover:not(:disabled),.cre8-is-success .cre8-c-date-picker__input:focus:not(:disabled),.cre8-is-success .cre8-c-date-picker__input:active:not(:disabled),.cre8-is-success .cre8-c-date-picker__input:focus-visible{outline-color:var(--cre8-color-border-success)}.cre8-c-date-picker__input:disabled{background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled);color:var(--cre8-color-content-disabled);cursor:not-allowed}.cre8-c-date-picker__input:disabled::placeholder{color:var(--cre8-color-content-disabled)}.cre8-c-date-picker__input::placeholder{color:var(--cre8-color-content-subtle)}.cre8-is-error .cre8-c-date-picker__input{border-color:var(--cre8-color-border-error)}.cre8-is-success .cre8-c-date-picker__input{border-color:var(--cre8-color-border-success)}.cre8-c-date-picker__input:read-only{background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled);cursor:default}`;
+export default styles;
+//# sourceMappingURL=date-picker.styles.js.map

package/lib/components/date-picker/date-picker.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.styles.js","sourceRoot":"","sources":["../../../components/date-picker/date-picker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,o0KAAo0K,CAAC;AACv1K,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:block}.cre8-c-date-picker__label{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:block;margin-bottom:0.5rem}.cre8-c-date-picker__body{position:relative;display:flex;align-items:center}input::-webkit-calendar-picker-indicator{display:none}input[type=date]::-webkit-input-placeholder{visibility:hidden !important}.cre8-c-date-picker__calendar-icon-button{position:absolute;right:0.5rem;background:var(--cre8-color-bg-default);border:none;border-radius:0;--cre8-icon-height: size(3);--cre8-icon-width: size(3)}.cre8-c-date-picker--disabled .cre8-c-date-picker__calendar-icon-button,.cre8-c-date-picker--read-only .cre8-c-date-picker__calendar-icon-button{background:var(--cre8-color-bg-disabled)}.cre8-c-date-picker__input{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);outline:var(--cre8-border-width-focus) solid rgba(0,0,0,0);outline-offset:0.125rem;-webkit-appearance:none;width:100%;border-width:var(--cre8-border-width-default);border-style:solid;border-color:var(--cre8-color-border-strong);border-radius:var(--cre8-border-radius-default);padding:0.75rem 0.5rem;color:var(--cre8-color-content-default);background-color:var(--cre8-color-bg-default);transition:outline-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),border-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),background-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),color var(--cre8-anim-fade-quick) var(--cre8-anim-ease)}.cre8-c-date-picker__input:hover:not(:disabled),.cre8-c-date-picker__input:focus:not(:disabled),.cre8-c-date-picker__input:active:not(:disabled),.cre8-c-date-picker__input:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-is-error .cre8-c-date-picker__input:hover:not(:disabled),.cre8-is-error .cre8-c-date-picker__input:focus:not(:disabled),.cre8-is-error .cre8-c-date-picker__input:active:not(:disabled),.cre8-is-error .cre8-c-date-picker__input:focus-visible{outline-color:var(--cre8-color-border-error)}.cre8-is-success .cre8-c-date-picker__input:hover:not(:disabled),.cre8-is-success .cre8-c-date-picker__input:focus:not(:disabled),.cre8-is-success .cre8-c-date-picker__input:active:not(:disabled),.cre8-is-success .cre8-c-date-picker__input:focus-visible{outline-color:var(--cre8-color-border-success)}.cre8-c-date-picker__input:disabled{background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled);color:var(--cre8-color-content-disabled);cursor:not-allowed}.cre8-c-date-picker__input:disabled::placeholder{color:var(--cre8-color-content-disabled)}.cre8-c-date-picker__input::placeholder{color:var(--cre8-color-content-subtle)}.cre8-is-error .cre8-c-date-picker__input{border-color:var(--cre8-color-border-error)}.cre8-is-success .cre8-c-date-picker__input{border-color:var(--cre8-color-border-success)}.cre8-c-date-picker__input:read-only{background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled);cursor:default}`;\nexport default styles;\n"]}

package/lib/components/divider/divider.js

@@ -1,36 +1,46 @@
-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 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 a = class a extends m {
-  constructor() {
-    super(...arguments), this.variant = "horizontal";
-  }
-  render() {
-    const t = this.componentClassNames("cre8-c-divider", {
-      "cre8-c-divider--horizontal": this.variant === "horizontal",
-      "cre8-c-divider--vertical": this.variant === "vertical",
-      "cre8-c-divider--brand": this.status === "brand",
-      "cre8-c-divider--knockout": this.status === "knockout"
-    });
-    return h` <div class="${t}"><wbr></div> `;
-  }
-};
-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 {
-  r as Cre8Divider,
-  r as default
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+import { html, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './divider.styles.js';
+/**
+ * The divider component is a separator between sections of content or groups of items.
+ * It often contains a horizontal or vertical line.
+*/
+export class Cre8Divider extends Cre8Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Divider variants
+         * - By default, the component renders the horizontal divider
+         * - **vertical** renders the vertical divider
+        */
+        this.variant = 'horizontal';
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-divider', {
+            'cre8-c-divider--horizontal': this.variant === 'horizontal',
+            'cre8-c-divider--vertical': this.variant === 'vertical',
+            'cre8-c-divider--brand': this.status === 'brand',
+            'cre8-c-divider--knockout': this.status === 'knockout',
+        });
+        return html ` <div class="${componentClassNames}"><wbr></div> `;
+    }
+}
+Cre8Divider.styles = [styles];
+__decorate([
+    property()
+], Cre8Divider.prototype, "variant", void 0);
+__decorate([
+    property()
+], Cre8Divider.prototype, "status", void 0);
+if (customElements.get('cre8-divider') === undefined) {
+    customElements.define('cre8-divider', Cre8Divider);
+}
+export default Cre8Divider;
+//# sourceMappingURL=divider.js.map

package/lib/components/divider/divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../../components/divider/divider.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAEzC;;;EAGE;AAEF,MAAM,OAAO,WAAY,SAAQ,WAAW;IAA5C;;QAGE;;;;UAIE;QAEE,YAAO,GAA8B,YAAY,CAAC;IAqBxD,CAAC;IAVC,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,EAAE;YACnE,4BAA4B,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY;YAC3D,0BAA0B,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;YACvD,uBAAuB,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO;YAChD,0BAA0B,EAAE,IAAI,CAAC,MAAM,KAAK,UAAU;SACzD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA,gBAAgB,mBAAmB,gBAAgB,CAAC;IACnE,CAAC;;AA5BQ,kBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAQvB;IADH,QAAQ,EAAE;4CAC2C;AASlD;IADH,QAAQ,EAAE;2CACS;AActB,IAAI,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,KAAK,SAAS,EAAE,CAAC;IACnD,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;AACvD,CAAC;AAQD,eAAe,WAAW,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './divider.styles.js';\n\n/**\n * The divider component is a separator between sections of content or groups of items.\n * It often contains a horizontal or vertical line.\n*/\n\nexport class Cre8Divider extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Divider variants\n   * - By default, the component renders the horizontal divider\n   * - **vertical** renders the vertical divider\n  */\n  @property()\n      variant: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Status (a color variant prop)\n   * - By default, the divider has gray color.\n   * - **brand**, the divider has blue color.\n   * - **knockout**, the divider has white color.\n   */\n  @property()\n      status?: string;\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-divider', {\n          'cre8-c-divider--horizontal': this.variant === 'horizontal',\n          'cre8-c-divider--vertical': this.variant === 'vertical',\n          'cre8-c-divider--brand': this.status === 'brand',\n          'cre8-c-divider--knockout': this.status === 'knockout',\n      });\n\n      return html` <div class=\"${componentClassNames}\"><wbr></div> `;\n  }\n}\n\nif (customElements.get('cre8-divider') === undefined) {\n    customElements.define('cre8-divider', Cre8Divider);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-divider': Cre8Divider;\n  }\n}\n\nexport default Cre8Divider;\n"]}

package/lib/components/divider/divider.styles.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::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)}`;
+export default styles;
+//# sourceMappingURL=divider.styles.js.map

package/lib/components/divider/divider.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.styles.js","sourceRoot":"","sources":["../../../components/divider/divider.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,0vEAA0vE,CAAC;AAC7wE,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::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)}`;\nexport default styles;\n"]}

package/lib/components/dropdown/dropdown.js

@@ -1,70 +1,104 @@
-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;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const d = class d extends g {
-  constructor() {
-    super(), this.open = !1, this.buttonText = "", this.dropdownWithLink = !1, this._closeDropdown.bind(this);
-  }
-  connectedCallback() {
-    super.connectedCallback(), document.addEventListener("click", this._closeDropdown);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), document.removeEventListener("click", this._closeDropdown);
-  }
-  _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%"));
-  }
-  _closeDropdown() {
-    this.open = !1;
-  }
-  render() {
-    const t = this.componentClassNames("cre8-c-dropdown", {
-      "cre8-c-dropdown--close": !this.open,
-      "cre8-c-dropdown--open": this.open
-    });
-    return o`
+import { html, nothing, } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import svgCaretDown from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Filled/Caret_Down.svg?raw';
+import { Cre8Element } from '../cre8-element';
+import styles from './dropdown.styles.js';
+/**
+ * The Dropdown menu itself is a container that can host multiple interactive items, commonly formatted as a list
+ */
+export class Cre8Dropdown extends Cre8Element {
+    constructor() {
+        super();
+        this.open = false;
+        /**
+         * Dropdown header
+         */
+        this.buttonText = '';
+        /**
+         * button text represents as a link
+         */
+        this.dropdownWithLink = false;
+        this._closeDropdown.bind(this);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('click', this._closeDropdown);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('click', this._closeDropdown);
+    }
+    _toggleDropdown(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.open = !this.open;
+        if (this.open) {
+            this._updateDropdownPosition();
+        }
+    }
+    _updateDropdownPosition() {
+        if (this.dropdownContent && this.open) {
+            if (this.maxHeight) {
+                this.dropdownContent.style.maxHeight = this.maxHeight;
+                this.dropdownContent.style.overflowY = 'auto';
+            }
+            if (this.dropdownWithLink) {
+                this.dropdownContent.style.top = '85%';
+            }
+        }
+    }
+    _closeDropdown() {
+        this.open = false;
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-dropdown', {
+            'cre8-c-dropdown--close': !this.open,
+            'cre8-c-dropdown--open': this.open,
+        });
+        return html `
       <div class="cre8-c-dropdown-container">
-      ${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}
+      ${this.dropdownWithLink
+            ? html `<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
+                ? html `<cre8-icon svg='${svgCaretDown}' aria-hidden="true" class="cre8-c-dropdown--icon-link"></cre8-icon>`
+                : nothing}
+      </a>`
+            : html `<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
+                ? html `<cre8-icon svg='${svgCaretDown}' aria-hidden="true" class="cre8-c-dropdown--icon-button"></cre8-icon>`
+                : nothing}
         </button>`}
-        <ul role="list" class="${t}">
+        <ul role="list" class="${componentClassNames}">
           <slot></slot>
         </ul>
       </div>
     `;
-  }
-};
-d.styles = [m];
-let e = d;
-n([
-  u()
-], e.prototype, "open");
-n([
-  a({ type: String })
-], e.prototype, "buttonText");
-n([
-  a()
-], e.prototype, "maxHeight");
-n([
-  w(".cre8-c-dropdown")
-], e.prototype, "dropdownContent");
-n([
-  a()
-], e.prototype, "dropdownWithLink");
-customElements.get("cre8-dropdown") === void 0 && customElements.define("cre8-dropdown", e);
-export {
-  e as Cre8Dropdown,
-  e as default
-};
+    }
+}
+Cre8Dropdown.styles = [styles];
+__decorate([
+    state()
+], Cre8Dropdown.prototype, "open", void 0);
+__decorate([
+    property({ type: String })
+], Cre8Dropdown.prototype, "buttonText", void 0);
+__decorate([
+    property()
+], Cre8Dropdown.prototype, "maxHeight", void 0);
+__decorate([
+    query('.cre8-c-dropdown')
+], Cre8Dropdown.prototype, "dropdownContent", void 0);
+__decorate([
+    property()
+], Cre8Dropdown.prototype, "dropdownWithLink", void 0);
+if (customElements.get('cre8-dropdown') === undefined) {
+    customElements.define('cre8-dropdown', Cre8Dropdown);
+}
+export default Cre8Dropdown;
+//# sourceMappingURL=dropdown.js.map

package/lib/components/dropdown/dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../components/dropdown/dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing,  } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport svgCaretDown from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Filled/Caret_Down.svg?raw';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './dropdown.styles.js';\n\n/**\n * The Dropdown menu itself is a container that can host multiple interactive items, commonly formatted as a list\n */\n\nexport class Cre8Dropdown extends Cre8Element {\n    static styles = [styles];\n\n    @state() open = false;\n\n  /**\n   * Dropdown header\n   */\n  @property({ type: String })\n      buttonText = '';\n\n  /**\n   * Enables scrolling once content reached to specified height, the height should mention in px units, ex: 100px\n   */\n  @property()\n      maxHeight?: string;\n\n  @query('.cre8-c-dropdown')\n      dropdownContent!: HTMLElement;\n\n  /**\n   * button text represents as a link\n   */\n  @property()\n      dropdownWithLink = false;\n\n  constructor() {\n      super();\n      this._closeDropdown.bind(this);\n  }\n\n  connectedCallback() {\n      super.connectedCallback();\n      document.addEventListener('click', this._closeDropdown);\n  }\n\n  disconnectedCallback() {\n      super.disconnectedCallback();\n      document.removeEventListener('click', this._closeDropdown);\n  }\n\n  private _toggleDropdown(e: Event) {\n      e.preventDefault();\n      e.stopPropagation();\n      this.open = !this.open;\n      if (this.open) {\n          this._updateDropdownPosition();\n      }\n  }\n\n\n  private _updateDropdownPosition() {\n      if (this.dropdownContent && this.open) {\n          if (this.maxHeight) {\n              this.dropdownContent.style.maxHeight = this.maxHeight;\n              this.dropdownContent.style.overflowY = 'auto';\n          }\n          if (this.dropdownWithLink) {\n              this.dropdownContent.style.top = '85%';\n          }\n      }\n  }\n\n  private _closeDropdown() {\n      this.open = false;\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-dropdown', {\n          'cre8-c-dropdown--close': !this.open,\n          'cre8-c-dropdown--open': this.open,\n      });\n\n      return html`\n      <div class=\"cre8-c-dropdown-container\">\n      ${this.dropdownWithLink\n        ? html`<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}\n        ${this.buttonText\n        ? html`<cre8-icon svg='${svgCaretDown}' aria-hidden=\"true\" class=\"cre8-c-dropdown--icon-link\"></cre8-icon>`\n        : nothing}\n      </a>`\n        : html`<button aria-haspopup=\"true\" class=\"cre8-c-dropdown--toggle cre8-c-dropdown--button\" aria-expanded=\"${this.open ? 'true' : 'false'}\" @click=\"${this._toggleDropdown}\">${this.buttonText}\n      ${this.buttonText\n        ? html`<cre8-icon svg='${svgCaretDown}' aria-hidden=\"true\" class=\"cre8-c-dropdown--icon-button\"></cre8-icon>`\n        : nothing}\n        </button>`\n}\n        <ul role=\"list\" class=\"${componentClassNames}\">\n          <slot></slot>\n        </ul>\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-dropdown') === undefined) {\n    customElements.define('cre8-dropdown', Cre8Dropdown);\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-dropdown': Cre8Dropdown;\n  }\n}\n\nexport default Cre8Dropdown;\n"]}

package/lib/components/dropdown/dropdown.styles.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::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}`;
+export default styles;
+//# sourceMappingURL=dropdown.styles.js.map

package/lib/components/dropdown/dropdown.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.styles.js","sourceRoot":"","sources":["../../../components/dropdown/dropdown.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,w7GAAw7G,CAAC;AAC38G,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::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}`;\nexport default styles;\n"]}

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

@@ -1,33 +1,40 @@
-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 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;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const o = class o extends p {
-  constructor() {
-    super(...arguments), this.ariaLabel = "";
-  }
-  _handleClick(e) {
-    this.dispatchEvent(new Event("dropdown-item-selected", e));
-  }
-  render() {
-    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="${r}" @click=${this._handleClick}><slot></slot></button>
+import { html, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './dropdown-item.styles.js';
+/**
+ * The Dropdown item component is designed to be used with Dropdown component, each item represents a
+ * selectable option or action within the dropdown menu. It can be configured to trigger actions, navigate
+ * to links, initiate commands when clicked.
+ */
+export class Cre8DropdownItem extends Cre8Element {
+    constructor() {
+        super(...arguments);
+        this.ariaLabel = '';
+    }
+    _handleClick(e) {
+        this.dispatchEvent(new Event('dropdown-item-selected', e));
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-dropdown-item', {});
+        const linkAriaLabel = this.ariaLabel || `Link to ${this.textContent}` || 'Drop down Item';
+        return html `<li class="${componentClassNames}" role="listitem">
+        <button aria-label="${linkAriaLabel}" @click=${this._handleClick}><slot></slot></button>
       </li>`;
-  }
-};
-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 {
-  a as Cre8DropdownItem,
-  a as default
-};
+    }
+}
+Cre8DropdownItem.styles = [styles];
+__decorate([
+    property({ type: String })
+], Cre8DropdownItem.prototype, "ariaLabel", void 0);
+if (customElements.get('cre8-dropdown-item') === undefined) {
+    customElements.define('cre8-dropdown-item', Cre8DropdownItem);
+}
+export default Cre8DropdownItem;
+//# sourceMappingURL=dropdown-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-item.js","sourceRoot":"","sources":["../../../components/dropdown-item/dropdown-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAE/C;;;;GAIG;AACH,MAAM,OAAO,gBAAiB,SAAQ,WAAW;IAAjD;;QAIM,cAAS,GAAG,EAAE,CAAC;IAarB,CAAC;IAXS,YAAY,CAAC,CAAa;QAC9B,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,wBAAwB,EAAE,CAAC,CAAC,CAAC,CAAC;IAC/D,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;QAC/E,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,IAAI,WAAW,IAAI,CAAC,WAAW,EAAE,IAAI,gBAAgB,CAAC;QAC1F,OAAO,IAAI,CAAA,cAAc,mBAAmB;8BACpB,aAAa,YAAY,IAAI,CAAC,YAAY;YAC5D,CAAC;IACX,CAAC;;AAfQ,uBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGvB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACR;AAerB,IAAI,cAAc,CAAC,GAAG,CAAC,oBAAoB,CAAC,KAAK,SAAS,EAAE,CAAC;IACzD,cAAc,CAAC,MAAM,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,CAAC;AAClE,CAAC;AAQD,eAAe,gBAAgB,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './dropdown-item.styles.js';\n\n/**\n * The Dropdown item component is designed to be used with Dropdown component, each item represents a\n * selectable option or action within the dropdown menu. It can be configured to trigger actions, navigate\n * to links, initiate commands when clicked.\n */\nexport class Cre8DropdownItem extends Cre8Element {\n    static styles = [styles];\n\n  @property({ type: String })\n      ariaLabel = '';\n\n  private _handleClick(e: MouseEvent) {\n      this.dispatchEvent(new Event('dropdown-item-selected', e));\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-dropdown-item', {});\n      const linkAriaLabel = this.ariaLabel || `Link to ${this.textContent}` || 'Drop down Item';\n      return html`<li class=\"${componentClassNames}\" role=\"listitem\">\n        <button aria-label=\"${linkAriaLabel}\" @click=${this._handleClick}><slot></slot></button>\n      </li>`;\n  }\n}\n\nif (customElements.get('cre8-dropdown-item') === undefined) {\n    customElements.define('cre8-dropdown-item', Cre8DropdownItem);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-dropdown-item': Cre8DropdownItem;\n  }\n}\n\nexport default Cre8DropdownItem;\n"]}

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

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::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)}`;
+export default styles;
+//# sourceMappingURL=dropdown-item.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-item.styles.js","sourceRoot":"","sources":["../../../components/dropdown-item/dropdown-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,0sFAA0sF,CAAC;AAC7tF,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::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)}`;\nexport default styles;\n"]}

package/lib/components/feature/feature.js

@@ -1,42 +1,47 @@
-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;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const s = class s extends h {
-  render() {
-    const t = this.componentClassNames("cre8-c-feature", {
-      "cre8-c-feature--inverted": this.inverted === !0
-    });
-    return m`
-      <div class="${t}" part="feature">
+import { html, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './feature.styles.js';
+/**
+ * @slot - The component content
+ */
+export class Cre8Feature extends Cre8Element {
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-feature', {
+            'cre8-c-feature--inverted': this.inverted === true,
+        });
+        return html `
+      <div class="${componentClassNames}" part="feature">
         <div class="cre8-c-feature__body" part="body">
           <slot></slot>
         </div>
-        ${this.imgAlt ? m`<div class="cre8-c-feature__media">
+        ${this.imgAlt
+            ? html `<div class="cre8-c-feature__media">
               <img class="cre8-c-feature__image" src=${this.imgSrc} alt=${this.imgAlt} part="image" />
-            </div>` : ""}
+            </div>`
+            : ''}
       </div>
     `;
-  }
-};
-s.styles = [p];
-let r = s;
-d([
-  a()
-], r.prototype, "imgSrc");
-d([
-  a()
-], r.prototype, "imgAlt");
-d([
-  a({ type: Boolean, reflect: !0 })
-], r.prototype, "inverted");
-customElements.get("cre8-feature") === void 0 && customElements.define("cre8-feature", r);
-export {
-  r as Cre8Feature,
-  r as default
-};
+    }
+}
+Cre8Feature.styles = [styles];
+__decorate([
+    property()
+], Cre8Feature.prototype, "imgSrc", void 0);
+__decorate([
+    property()
+], Cre8Feature.prototype, "imgAlt", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Feature.prototype, "inverted", void 0);
+if (customElements.get('cre8-feature') === undefined) {
+    customElements.define('cre8-feature', Cre8Feature);
+}
+export default Cre8Feature;
+//# sourceMappingURL=feature.js.map

package/lib/components/feature/feature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"feature.js","sourceRoot":"","sources":["../../../components/feature/feature.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAEzC;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,WAAW;IAsB1C,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,EAAE;YACnE,0BAA0B,EAAE,IAAI,CAAC,QAAQ,KAAK,IAAI;SACrD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACG,mBAAmB;;;;UAI7B,IAAI,CAAC,MAAM;YACb,CAAC,CAAC,IAAI,CAAA;uDACyC,IAAI,CAAC,MAAM,QAAQ,IAAI,CAAC,MAAM;mBAClE;YACX,CAAC,CAAC,EAAE;;KAEP,CAAC;IACJ,CAAC;;AAtCQ,kBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAMvB;IADH,QAAQ,EAAE;2CACS;AAMhB;IADH,QAAQ,EAAE;2CACS;AAOhB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACpB;AAsBzB,IAAI,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,KAAK,SAAS,EAAE,CAAC;IACnD,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;AACvD,CAAC;AAQD,eAAe,WAAW,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './feature.styles.js';\n\n/**\n * @slot - The component content\n */\nexport class Cre8Feature extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Image source\n   */\n  @property()\n      imgSrc?: string;\n\n  /**\n   * Image alt text\n   */\n  @property()\n      imgAlt?: string;\n\n  /**\n   * Inverted variant\n   * 1) Used for dark backgrounds\n   */\n  @property({ type: Boolean, reflect: true })\n      inverted?: boolean;\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-feature', {\n          'cre8-c-feature--inverted': this.inverted === true,\n      });\n\n      return html`\n      <div class=\"${componentClassNames}\" part=\"feature\">\n        <div class=\"cre8-c-feature__body\" part=\"body\">\n          <slot></slot>\n        </div>\n        ${this.imgAlt\n        ? html`<div class=\"cre8-c-feature__media\">\n              <img class=\"cre8-c-feature__image\" src=${this.imgSrc} alt=${this.imgAlt} part=\"image\" />\n            </div>`\n        : ''}\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-feature') === undefined) {\n    customElements.define('cre8-feature', Cre8Feature);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-feature': Cre8Feature;\n  }\n}\n\nexport default Cre8Feature;\n"]}