@tmorrow/cre8-wc 1.1.2 → 1.1.3

package/lib/components/select-tile-list/select-tile-list.js

@@ -1,31 +1,45 @@
-import { css as f, html as p } from "lit";
-import { ifDefined as a } from "lit-html/directives/if-defined.js";
-import { property as t } from "lit/decorators.js";
-import { nanoid as h } from "nanoid";
-import { Cre8Element as m } from "../cre8-element.js";
-import "../field-note/field-note.js";
-const y = 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}:host{display:block}.cre8-c-select-tile-list{border:var(--cre8-border-width-none);padding:var(--cre8-spacing-0);margin:var(--cre8-spacing-0)}.cre8-c-select-tile-list__legend{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);margin-bottom:0.5rem}.cre8-c-select-tile-list__list{gap:1.5rem;display:grid;grid-template-columns:repeat(auto-fit, var(--cre8-select-tile-list-item-width, 13rem))}.cre8-c-select-tile-list__rows .cre8-c-select-tile-list__list{grid-template-columns:unset}`;
-var g = Object.defineProperty, r = (d, s, c, u) => {
-  for (var i = void 0, l = d.length - 1, n; l >= 0; l--)
-    (n = d[l]) && (i = n(s, c, i) || i);
-  return i && g(s, c, i), i;
+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 m {
-  constructor() {
-    super(...arguments), this.variant = "columns";
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.fieldNote && (this.ariaDescribedBy = this.ariaDescribedBy || h());
-  }
-  render() {
-    const s = this.componentClassNames("cre8-c-select-tile-list", {
-      "cre8-c-select-tile-list__rows": this.variant === "rows"
-    });
-    return p`
-      <fieldset class="${s}">
+import { html, } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { property } from 'lit/decorators.js';
+import { nanoid } from 'nanoid';
+import { Cre8Element } from '../cre8-element';
+import '../field-note/field-note';
+import styles from './select-tile-list.styles.js';
+/**
+ * Select Tile List is a container design to hold multiple Select Tile Components.
+ *
+ * @slot "" - The default slot norminally contains multiple `<select-tile />` Components.
+ * @cssprop "--cre8-select-tile-list-item-width" - Width of each child. Not used for horizontal.
+ */
+export class Cre8SelectTileList extends Cre8Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether to show the tiles side by side (columns) or stacked vertically (rows).
+         */
+        this.variant = 'columns';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.fieldNote) {
+            this.ariaDescribedBy = this.ariaDescribedBy || nanoid();
+        }
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-select-tile-list', {
+            'cre8-c-select-tile-list__rows': this.variant === 'rows',
+        });
+        return html `
+      <fieldset class="${componentClassNames}">
         <legend
           class="cre8-c-select-tile-list__legend"
-          aria-describedby="${a(this.ariaDescribedBy)}"
+          aria-describedby="${ifDefined(this.ariaDescribedBy)}"
         >
           ${this.label}
         </legend>
@@ -34,47 +48,47 @@ const o = class o extends m {
             <slot></slot>
           </div>
         </div>
-        ${this.fieldNote ? p`<cre8-field-note
+        ${this.fieldNote
+            ? html `<cre8-field-note
           ?inverted=${this.fieldNoteKnockout}
-          id=${a(this.ariaDescribedBy)}
-          iconName=${a(this.fieldNoteIconName)}
+          id=${ifDefined(this.ariaDescribedBy)}
+          iconName=${ifDefined(this.fieldNoteIconName)}
           ?isSuccess=${this.fieldNoteIsSuccess}
           ?isError=${this.fieldNoteIsError}
         >
           ${this.fieldNote}
-        </cre8-field-note>` : ""}
+        </cre8-field-note>` : ''}
       </fieldset>
     `;
-  }
-};
-o.styles = [y];
-let e = o;
-r([
-  t({ reflect: !0 })
-], e.prototype, "variant");
-r([
-  t({ reflect: !0 })
-], e.prototype, "label");
-r([
-  t({ reflect: !0 })
-], e.prototype, "fieldNote");
-r([
-  t()
-], e.prototype, "ariaDescribedBy");
-r([
-  t({ reflect: !0 })
-], e.prototype, "fieldNoteIconName");
-r([
-  t({ type: Boolean, reflect: !0 })
-], e.prototype, "fieldNoteKnockout");
-r([
-  t({ type: Boolean, reflect: !0 })
-], e.prototype, "fieldNoteIsSuccess");
-r([
-  t({ type: Boolean, reflect: !0 })
-], e.prototype, "fieldNoteIsError");
-customElements.get("cre8-select-tile-list") === void 0 && customElements.define("cre8-select-tile-list", e);
-export {
-  e as Cre8SelectTileList,
-  e as default
-};
+    }
+}
+Cre8SelectTileList.styles = [styles];
+__decorate([
+    property({ reflect: true })
+], Cre8SelectTileList.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], Cre8SelectTileList.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], Cre8SelectTileList.prototype, "fieldNote", void 0);
+__decorate([
+    property()
+], Cre8SelectTileList.prototype, "ariaDescribedBy", void 0);
+__decorate([
+    property({ reflect: true })
+], Cre8SelectTileList.prototype, "fieldNoteIconName", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8SelectTileList.prototype, "fieldNoteKnockout", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8SelectTileList.prototype, "fieldNoteIsSuccess", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8SelectTileList.prototype, "fieldNoteIsError", void 0);
+if (customElements.get('cre8-select-tile-list') === undefined) {
+    customElements.define('cre8-select-tile-list', Cre8SelectTileList);
+}
+export default Cre8SelectTileList;
+//# sourceMappingURL=select-tile-list.js.map

package/lib/components/select-tile-list/select-tile-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-tile-list.js","sourceRoot":"","sources":["../../../components/select-tile-list/select-tile-list.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,0BAA0B,CAAC;AAClC,OAAO,MAAM,MAAM,8BAA8B,CAAC;AAElD;;;;;GAKG;AACH,MAAM,OAAO,kBAAmB,SAAQ,WAAW;IAAnD;;QAGE;;WAEG;QAEC,YAAO,GAAuB,SAAS,CAAC;IAkF9C,CAAC;IAtCC,iBAAiB;QACb,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACjB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,IAAI,MAAM,EAAE,CAAC;QAC5D,CAAC;IACL,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,yBAAyB,EAAE;YAC5E,+BAA+B,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;SAC3D,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;yBACQ,mBAAmB;;;8BAGd,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC;;YAEjD,IAAI,CAAC,KAAK;;;;;;;UAOZ,IAAI,CAAC,SAAS;YAChB,CAAC,CAAC,IAAI,CAAA;sBACQ,IAAI,CAAC,iBAAiB;eAC7B,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC;qBACzB,SAAS,CAAC,IAAI,CAAC,iBAAiB,CAAC;uBAC/B,IAAI,CAAC,kBAAkB;qBACzB,IAAI,CAAC,gBAAgB;;YAE9B,IAAI,CAAC,SAAS;2BACC,CAAC,CAAC,CAAC,EAAE;;KAE3B,CAAC;IACJ,CAAC;;AAvFQ,yBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAMvB;IADH,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACgB;AAMxC;IADH,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACT;AAMf;IADH,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDACL;AAMnB;IADH,QAAQ,EAAE;2DACkB;AAMzB;IADH,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6DACG;AAM3B;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6DACX;AAM5B;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8DACV;AAM7B;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4DACZ;AA0CjC,IAAI,cAAc,CAAC,GAAG,CAAC,uBAAuB,CAAC,KAAK,SAAS,EAAE,CAAC;IAC5D,cAAc,CAAC,MAAM,CAAC,uBAAuB,EAAE,kBAAkB,CAAC,CAAC;AACvE,CAAC;AAQD,eAAe,kBAAkB,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport { Cre8Element } from '../cre8-element';\nimport '../field-note/field-note';\nimport styles from './select-tile-list.styles.js';\n\n/**\n * Select Tile List is a container design to hold multiple Select Tile Components.\n *\n * @slot \"\" - The default slot norminally contains multiple `<select-tile />` Components.\n * @cssprop \"--cre8-select-tile-list-item-width\" - Width of each child. Not used for horizontal.\n */\nexport class Cre8SelectTileList extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Whether to show the tiles side by side (columns) or stacked vertically (rows).\n   */\n  @property({ reflect: true })\n      variant: 'columns' | 'rows' = 'columns';\n\n  /**\n   * Select Tile container label\n   */\n  @property({ reflect: true })\n      label?: string;\n\n  /**\n   * Select Tile container fieldnote\n   */\n  @property({ reflect: true })\n      fieldNote?: string;\n\n  /**\n   * Select Tile container fieldnote aria describe by\n   */\n  @property()\n      ariaDescribedBy?: string;\n\n  /**\n   * Select Tile container fieldnote icon name\n   */\n  @property({ reflect: true })\n      fieldNoteIconName?: string;\n\n  /**\n   * Select Tile container fieldnote knockout\n   */\n  @property({ type: Boolean, reflect: true })\n      fieldNoteKnockout?: boolean;\n\n  /**\n   * Select Tile container fieldnote isSuccess\n   */\n  @property({ type: Boolean, reflect: true })\n      fieldNoteIsSuccess?: boolean;\n\n  /**\n   * Select Tile container fieldnote isError\n   */\n  @property({ type: Boolean, reflect: true })\n      fieldNoteIsError?: boolean;\n\n  connectedCallback() {\n      super.connectedCallback();\n      if (this.fieldNote) {\n          this.ariaDescribedBy = this.ariaDescribedBy || nanoid();\n      }\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-select-tile-list', {\n          'cre8-c-select-tile-list__rows': this.variant === 'rows',\n      });\n\n      return html`\n      <fieldset class=\"${componentClassNames}\">\n        <legend\n          class=\"cre8-c-select-tile-list__legend\"\n          aria-describedby=\"${ifDefined(this.ariaDescribedBy)}\"\n        >\n          ${this.label}\n        </legend>\n        <div class=\"cre8-c-select-tile-list__body\">\n          <div class=\"cre8-c-select-tile-list__list\" role=\"list\">\n            <slot></slot>\n          </div>\n        </div>\n        ${this.fieldNote\n        ? html`<cre8-field-note\n          ?inverted=${this.fieldNoteKnockout}\n          id=${ifDefined(this.ariaDescribedBy)}\n          iconName=${ifDefined(this.fieldNoteIconName)}\n          ?isSuccess=${this.fieldNoteIsSuccess}\n          ?isError=${this.fieldNoteIsError}\n        >\n          ${this.fieldNote}\n        </cre8-field-note>` : ''}\n      </fieldset>\n    `;\n  }\n}\n\nif (customElements.get('cre8-select-tile-list') === undefined) {\n    customElements.define('cre8-select-tile-list', Cre8SelectTileList);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-select-tile-list': Cre8SelectTileList;\n  }\n}\n\nexport default Cre8SelectTileList;\n"]}

package/lib/components/select-tile-list/select-tile-list.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-select-tile-list{border:var(--cre8-border-width-none);padding:var(--cre8-spacing-0);margin:var(--cre8-spacing-0)}.cre8-c-select-tile-list__legend{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);margin-bottom:0.5rem}.cre8-c-select-tile-list__list{gap:1.5rem;display:grid;grid-template-columns:repeat(auto-fit, var(--cre8-select-tile-list-item-width, 13rem))}.cre8-c-select-tile-list__rows .cre8-c-select-tile-list__list{grid-template-columns:unset}`;
+export default styles;
+//# sourceMappingURL=select-tile-list.styles.js.map

package/lib/components/select-tile-list/select-tile-list.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-tile-list.styles.js","sourceRoot":"","sources":["../../../components/select-tile-list/select-tile-list.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,6iFAA6iF,CAAC;AAChkF,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-select-tile-list{border:var(--cre8-border-width-none);padding:var(--cre8-spacing-0);margin:var(--cre8-spacing-0)}.cre8-c-select-tile-list__legend{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);margin-bottom:0.5rem}.cre8-c-select-tile-list__list{gap:1.5rem;display:grid;grid-template-columns:repeat(auto-fit, var(--cre8-select-tile-list-item-width, 13rem))}.cre8-c-select-tile-list__rows .cre8-c-select-tile-list__list{grid-template-columns:unset}`;\nexport default styles;\n"]}

package/lib/components/skeleton-loader/skeleton-loader.js

@@ -1,43 +1,72 @@
-import { css as c, html as h } from "lit";
-import { property as a } from "lit/decorators.js";
-import { Cre8Element as p } from "../cre8-element.js";
-const m = c`*,::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-skeleton-loader{width:100%;height:auto;border-radius:var(--cre8-border-radius-small);aspect-ratio:16/3;background:linear-gradient(-90deg, #f6f6f6 0%, #ebebeb 50%, #f6f6f6 100%);background-size:400% 400%;animation:pulse 1.25s linear infinite}.cre8-c-skeleton-loader--rectangle{aspect-ratio:16/6}.cre8-c-skeleton-loader--square{aspect-ratio:1/1}.cre8-c-skeleton-loader--circle{aspect-ratio:1/1;border-radius:50%}@keyframes pulse{0%{background-position:0% 0%}100%{background-position:-135% 0%}}`;
-var f = Object.defineProperty, s = (d, r, l, g) => {
-  for (var e = void 0, i = d.length - 1, n; i >= 0; i--)
-    (n = d[i]) && (e = n(r, l, e) || e);
-  return e && f(r, l, 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 o = class o extends p {
-  constructor() {
-    super(...arguments), this.variant = "rectangle";
-  }
-  render() {
-    const r = this.componentClassNames("cre8-c-skeleton-loader", {
-      "cre8-c-skeleton-loader--rectangle": this.variant === "rectangle",
-      "cre8-c-skeleton-loader--square": this.variant === "square",
-      "cre8-c-skeleton-loader--circle": this.variant === "circle"
-    });
-    return h`
+import { html, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './skeleton-loader.styles.js';
+/**
+ * Skeleton Loader allows for the ability to create placeholder UI loading states.
+ * Developers are encouraged to pass into the Skeleton Loader their own parameters
+ * to create simple (or complex) loading screens.
+ *
+ * ## How to Use
+ * Skeleton states are simplified versions of components used on an initial page load
+ * to indicate that the information on the page has not fully loaded yet.
+ * They only appear for only a few seconds, disappearing once components and content populate the page.
+ * These loaders use motion to convey that the page is not stuck and that data is still being loaded.
+ * This can help to reduce user uncertainty. Skeleton objects should generally be visualized
+ * by simple primitives which mimic the original content in a recognizable way.
+ * It is recommended to use a more elaborate form if that is needed to make the component recognizable.
+ *
+ * Never represent toast notifications, overflow menus, dropdown items, modals, and loaders with skeleton states.
+ * Elements inside a modal may have a skeleton state, but the modal itself should not.
+ *
+ * **IMPORTANT!** This is not a loading element and will provide no value to a screen reader user,
+ * this is a decorative element only!
+ */
+export class Cre8SkeletonLoader extends Cre8Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Style variant
+         * - **rectangle** renders a featureless rectangle as a placeholder for loading elements
+         * - **square** renders a featureless square as a placeholder for loading elements
+         * - **circle** renders a featureless circle as a placeholder for loading elements
+         * @type {"rectangle" | "square" | "circle"}
+         * @attr {string}
+         */
+        this.variant = 'rectangle';
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-skeleton-loader', {
+            'cre8-c-skeleton-loader--rectangle': this.variant === 'rectangle',
+            'cre8-c-skeleton-loader--square': this.variant === 'square',
+            'cre8-c-skeleton-loader--circle': this.variant === 'circle',
+        });
+        return html `
     <div
-        class="${r}"
-        style="height: ${this.height ?? "auto"}; width: ${this.width ?? "auto"}"
+        class="${componentClassNames}"
+        style="height: ${this.height ?? 'auto'}; width: ${this.width ?? 'auto'}"
     ></div>
     `;
-  }
-};
-o.styles = [m];
-let t = o;
-s([
-  a()
-], t.prototype, "variant");
-s([
-  a()
-], t.prototype, "height");
-s([
-  a()
-], t.prototype, "width");
-customElements.get("cre8-skeleton-loader") === void 0 && customElements.define("cre8-skeleton-loader", t);
-export {
-  t as Cre8SkeletonLoader,
-  t as default
-};
+    }
+}
+Cre8SkeletonLoader.styles = [styles];
+__decorate([
+    property()
+], Cre8SkeletonLoader.prototype, "variant", void 0);
+__decorate([
+    property()
+], Cre8SkeletonLoader.prototype, "height", void 0);
+__decorate([
+    property()
+], Cre8SkeletonLoader.prototype, "width", void 0);
+if (customElements.get('cre8-skeleton-loader') === undefined) {
+    customElements.define('cre8-skeleton-loader', Cre8SkeletonLoader);
+}
+export default Cre8SkeletonLoader;
+//# sourceMappingURL=skeleton-loader.js.map

package/lib/components/skeleton-loader/skeleton-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-loader.js","sourceRoot":"","sources":["../../../components/skeleton-loader/skeleton-loader.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,6BAA6B,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,MAAM,OAAO,kBAAmB,SAAQ,WAAW;IAAnD;;QAGA;;;;;;;WAOG;QAEC,YAAO,GAAuC,WAAW,CAAC;IAgC9D,CAAC;IAdD,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,wBAAwB,EAAE;YAC3E,mCAAmC,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;YACjE,gCAAgC,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YAC3D,gCAAgC,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;SAC9D,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;;iBAEE,mBAAmB;yBACX,IAAI,CAAC,MAAM,IAAI,MAAM,YAAY,IAAI,CAAC,KAAK,IAAI,MAAM;;KAEzE,CAAC;IACN,CAAC;;AA1CU,yBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAWzB;IADH,QAAQ,EAAE;mDACmD;AAQ1D;IADH,QAAQ,EAAE;kDACS;AAQhB;IADH,QAAQ,EAAE;iDACQ;AAkBnB,IAAI,cAAc,CAAC,GAAG,CAAC,sBAAsB,CAAC,KAAK,SAAS,EAAE,CAAC;IAC3D,cAAc,CAAC,MAAM,CAAC,sBAAsB,EAAE,kBAAkB,CAAC,CAAC;AACtE,CAAC;AAQD,eAAe,kBAAkB,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './skeleton-loader.styles.js';\n\n/**\n * Skeleton Loader allows for the ability to create placeholder UI loading states.\n * Developers are encouraged to pass into the Skeleton Loader their own parameters\n * to create simple (or complex) loading screens.\n *\n * ## How to Use\n * Skeleton states are simplified versions of components used on an initial page load\n * to indicate that the information on the page has not fully loaded yet.\n * They only appear for only a few seconds, disappearing once components and content populate the page.\n * These loaders use motion to convey that the page is not stuck and that data is still being loaded.\n * This can help to reduce user uncertainty. Skeleton objects should generally be visualized\n * by simple primitives which mimic the original content in a recognizable way.\n * It is recommended to use a more elaborate form if that is needed to make the component recognizable.\n *\n * Never represent toast notifications, overflow menus, dropdown items, modals, and loaders with skeleton states.\n * Elements inside a modal may have a skeleton state, but the modal itself should not.\n *\n * **IMPORTANT!** This is not a loading element and will provide no value to a screen reader user,\n * this is a decorative element only!\n */\n\nexport class Cre8SkeletonLoader extends Cre8Element {\n    static styles = [styles];\n\n/**\n * Style variant\n * - **rectangle** renders a featureless rectangle as a placeholder for loading elements\n * - **square** renders a featureless square as a placeholder for loading elements\n * - **circle** renders a featureless circle as a placeholder for loading elements\n * @type {\"rectangle\" | \"square\" | \"circle\"}\n * @attr {string}\n */\n@property()\n    variant?: 'rectangle' | 'square' | 'circle' = 'rectangle';\n\n/**\n * Height inline style\n * 1. Used to set a height on the skeleton if specific size is needed\n * @attr {string}\n */\n@property()\n    height?: string;\n\n/**\n * Width inline style\n * 1. Used to set a width on the skeleton if specific size is needed\n * @attr {string}\n */\n@property()\n    width?: string;\n\nrender() {\n    const componentClassNames = this.componentClassNames('cre8-c-skeleton-loader', {\n        'cre8-c-skeleton-loader--rectangle': this.variant === 'rectangle',\n        'cre8-c-skeleton-loader--square': this.variant === 'square',\n        'cre8-c-skeleton-loader--circle': this.variant === 'circle',\n    });\n\n    return html`\n    <div\n        class=\"${componentClassNames}\"\n        style=\"height: ${this.height ?? 'auto'}; width: ${this.width ?? 'auto'}\"\n    ></div>\n    `;\n}\n}\n\nif (customElements.get('cre8-skeleton-loader') === undefined) {\n    customElements.define('cre8-skeleton-loader', Cre8SkeletonLoader);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-skeleton-loader': Cre8SkeletonLoader;\n    }\n}\n\nexport default Cre8SkeletonLoader;\n"]}

package/lib/components/skeleton-loader/skeleton-loader.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-skeleton-loader{width:100%;height:auto;border-radius:var(--cre8-border-radius-small);aspect-ratio:16/3;background:linear-gradient(-90deg, #f6f6f6 0%, #ebebeb 50%, #f6f6f6 100%);background-size:400% 400%;animation:pulse 1.25s linear infinite}.cre8-c-skeleton-loader--rectangle{aspect-ratio:16/6}.cre8-c-skeleton-loader--square{aspect-ratio:1/1}.cre8-c-skeleton-loader--circle{aspect-ratio:1/1;border-radius:50%}@keyframes pulse{0%{background-position:0% 0%}100%{background-position:-135% 0%}}`;
+export default styles;
+//# sourceMappingURL=skeleton-loader.styles.js.map

package/lib/components/skeleton-loader/skeleton-loader.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-loader.styles.js","sourceRoot":"","sources":["../../../components/skeleton-loader/skeleton-loader.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,ixEAAixE,CAAC;AACpyE,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-skeleton-loader{width:100%;height:auto;border-radius:var(--cre8-border-radius-small);aspect-ratio:16/3;background:linear-gradient(-90deg, #f6f6f6 0%, #ebebeb 50%, #f6f6f6 100%);background-size:400% 400%;animation:pulse 1.25s linear infinite}.cre8-c-skeleton-loader--rectangle{aspect-ratio:16/6}.cre8-c-skeleton-loader--square{aspect-ratio:1/1}.cre8-c-skeleton-loader--circle{aspect-ratio:1/1;border-radius:50%}@keyframes pulse{0%{background-position:0% 0%}100%{background-position:-135% 0%}}`;\nexport default styles;\n"]}

package/lib/components/split-button/split-button.js

@@ -1,21 +1,26 @@
-import { css as c, html as p } from "lit";
-import { state as h, property as a } from "lit/decorators.js";
-import { Cre8Element as m } from "../cre8-element.js";
-import "../button/button.js";
-const x = c`*,::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-split-button{width:fit-content;display:block}.cre8-c-split-button__button-container{display:flex;max-width:fit-content}`;
-var f = Object.defineProperty, r = (o, t, d, u) => {
-  for (var i = void 0, s = o.length - 1, l; s >= 0; s--)
-    (l = o[s]) && (i = l(t, d, i) || i);
-  return i && f(t, d, i), i;
+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 n = class n extends m {
-  constructor() {
-    super(...arguments), this.dropdownOpen = !1;
-  }
-  render() {
-    const t = this.componentClassNames("cre8-c-split-button", {});
-    return p`
-      <div class="${t}">
+import { html, } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import '../button/button';
+import styles from './split-button.styles.js';
+/**
+ * @slot - The component content , this will consist of the dropdown when the user clicks the caret
+ */
+export class Cre8SplitButton extends Cre8Element {
+    constructor() {
+        super(...arguments);
+        this.dropdownOpen = false;
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-split-button', {});
+        return html `
+      <div class="${componentClassNames}">
         <div class="cre8-c-split-button__button-container">
           <cre8-button
             class="cre8-c-split-button__text-button"
@@ -31,7 +36,7 @@ const n = class n extends m {
             class="cre8-c-split-button__arrow-button"
             variant="icon-only secondary"
             splitButtonType="caret"
-            iconName="${this.dropdownOpen ? "delta-down" : "delta-up"}"
+            iconName="${this.dropdownOpen ? 'delta-down' : 'delta-up'}"
             ?disabled=${this.disabled}
             hideText="true"
             size="${this.size}"
@@ -39,33 +44,33 @@ const n = class n extends m {
           >
           </cre8-button>
         </div>
-        ${this.dropdownOpen ? p`<slot></slot>` : ""}
+        ${this.dropdownOpen ? html `<slot></slot>` : ''}
       </div>
     `;
-  }
-  _textClick(t) {
-    this.dispatchEvent(new Event("text-click", t));
-  }
-  _dropdownClick(t) {
-    this.dropdownOpen = !this.dropdownOpen, this.dispatchEvent(new Event("dropdown-click", t));
-  }
-};
-n.styles = [x];
-let e = n;
-r([
-  h()
-], e.prototype, "dropdownOpen");
-r([
-  a({ type: Boolean, reflect: !0 })
-], e.prototype, "disabled");
-r([
-  a()
-], e.prototype, "size");
-r([
-  a()
-], e.prototype, "buttonText");
-customElements.get("cre8-split-button") === void 0 && customElements.define("cre8-split-button", e);
-export {
-  e as Cre8SplitButton,
-  e as default
-};
+    }
+    _textClick(e) {
+        this.dispatchEvent(new Event('text-click', e));
+    }
+    _dropdownClick(e) {
+        this.dropdownOpen = !this.dropdownOpen;
+        this.dispatchEvent(new Event('dropdown-click', e));
+    }
+}
+Cre8SplitButton.styles = [styles];
+__decorate([
+    state()
+], Cre8SplitButton.prototype, "dropdownOpen", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8SplitButton.prototype, "disabled", void 0);
+__decorate([
+    property()
+], Cre8SplitButton.prototype, "size", void 0);
+__decorate([
+    property()
+], Cre8SplitButton.prototype, "buttonText", void 0);
+if (customElements.get('cre8-split-button') === undefined) {
+    customElements.define('cre8-split-button', Cre8SplitButton);
+}
+export default Cre8SplitButton;
+//# sourceMappingURL=split-button.js.map

package/lib/components/split-button/split-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-button.js","sourceRoot":"","sources":["../../../components/split-button/split-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAE9C;;GAEG;AACH,MAAM,OAAO,eAAgB,SAAQ,WAAW;IAAhD;;QAIM,iBAAY,GAAG,KAAK,CAAC;IAgE3B,CAAC;IAzCC,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,qBAAqB,EAAE,EAAE,CAAC,CAAC;QAEhF,OAAO,IAAI,CAAA;oBACG,mBAAmB;;;;;;wBAMf,IAAI,CAAC,QAAQ;oBACjB,IAAI,CAAC,UAAU;oBACf,IAAI,CAAC,IAAI;sBACP,IAAI,CAAC,UAAU;;;;;;;wBAOb,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU;wBAC7C,IAAI,CAAC,QAAQ;;oBAEjB,IAAI,CAAC,IAAI;sBACP,IAAI,CAAC,cAAc;;;;UAI/B,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA,eAAe,CAAC,CAAC,CAAC,EAAE;;KAEjD,CAAC;IACJ,CAAC;IAEO,UAAU,CAAC,CAAa;QAC5B,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;IACnD,CAAC;IAEO,cAAc,CAAC,CAAa;QAChC,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;QACvC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,CAAC;IACvD,CAAC;;AAlEQ,sBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGvB;IADH,KAAK,EAAE;qDACiB;AAGrB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACpB;AAYnB;IADH,QAAQ,EAAE;6CACY;AAMnB;IADH,QAAQ,EAAE;mDACY;AA6CzB,IAAI,cAAc,CAAC,GAAG,CAAC,mBAAmB,CAAC,KAAK,SAAS,EAAE,CAAC;IACxD,cAAc,CAAC,MAAM,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC;AAChE,CAAC;AAQD,eAAe,eAAe,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport '../button/button';\nimport styles from './split-button.styles.js';\n\n/**\n * @slot - The component content , this will consist of the dropdown when the user clicks the caret\n */\nexport class Cre8SplitButton extends Cre8Element {\n    static styles = [styles];\n\n  @state()\n      dropdownOpen = false;\n\n  @property({ type: Boolean, reflect: true })\n      disabled?: boolean;\n\n  /**\n   * Size variant\n   * <cre8-text-passage size=\"sm\">\n   * <ul>\n   * <li>**sm** shrinks the button typography and overall size</li>\n   * <li>**lg** increases the button typography size and overall size</li>\n   * </ul>\n   * </cre8-text-passage>\n   */\n  @property()\n      size?: 'sm' | 'lg';\n\n  /**\n   * Display text on the button\n   */\n  @property()\n      buttonText: string;\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-split-button', {});\n\n      return html`\n      <div class=\"${componentClassNames}\">\n        <div class=\"cre8-c-split-button__button-container\">\n          <cre8-button\n            class=\"cre8-c-split-button__text-button\"\n            variant=\"secondary\"\n            splitButtonType=\"text\"\n            ?disabled=${this.disabled}\n            text=\"${this.buttonText}\"\n            size=\"${this.size}\"\n            @click=\"${this._textClick}\"\n          >\n          </cre8-button>\n          <cre8-button\n            class=\"cre8-c-split-button__arrow-button\"\n            variant=\"icon-only secondary\"\n            splitButtonType=\"caret\"\n            iconName=\"${this.dropdownOpen ? 'delta-down' : 'delta-up'}\"\n            ?disabled=${this.disabled}\n            hideText=\"true\"\n            size=\"${this.size}\"\n            @click=\"${this._dropdownClick}\"\n          >\n          </cre8-button>\n        </div>\n        ${this.dropdownOpen ? html`<slot></slot>` : ''}\n      </div>\n    `;\n  }\n\n  private _textClick(e: MouseEvent) {\n      this.dispatchEvent(new Event('text-click', e));\n  }\n\n  private _dropdownClick(e: MouseEvent) {\n      this.dropdownOpen = !this.dropdownOpen;\n      this.dispatchEvent(new Event('dropdown-click', e));\n  }\n}\n\nif (customElements.get('cre8-split-button') === undefined) {\n    customElements.define('cre8-split-button', Cre8SplitButton);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-split-button': Cre8SplitButton;\n  }\n}\n\nexport default Cre8SplitButton;\n"]}

package/lib/components/split-button/split-button.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-split-button{width:fit-content;display:block}.cre8-c-split-button__button-container{display:flex;max-width:fit-content}`;
+export default styles;
+//# sourceMappingURL=split-button.styles.js.map

package/lib/components/split-button/split-button.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-button.styles.js","sourceRoot":"","sources":["../../../components/split-button/split-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,y4DAAy4D,CAAC;AAC55D,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-split-button{width:fit-content;display:block}.cre8-c-split-button__button-container{display:flex;max-width:fit-content}`;\nexport default styles;\n"]}

package/lib/components/submenu/submenu.js

@@ -1,19 +1,22 @@
-import { css as r, html as i } from "lit";
-import { Cre8Element as a } from "../cre8-element.js";
-const d = r`*,::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-submenu{list-style:none;padding:0;margin:0}`, t = class t extends a {
-  render() {
-    const s = this.componentClassNames("cre8-c-submenu", {});
-    return i`
-      <ul role="list" class="${s}">
+import { html, } from 'lit';
+import { Cre8Element } from '../cre8-element';
+import styles from './submenu.styles.js';
+/**
+ * @slot - The component content
+ */
+export class Cre8Submenu extends Cre8Element {
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-submenu', {});
+        return html `
+      <ul role="list" class="${componentClassNames}">
         <slot></slot>
       </ul>
     `;
-  }
-};
-t.styles = [d];
-let e = t;
-customElements.get("cre8-submenu") === void 0 && customElements.define("cre8-submenu", e);
-export {
-  e as Cre8Submenu,
-  e as default
-};
+    }
+}
+Cre8Submenu.styles = [styles];
+if (customElements.get('cre8-submenu') === undefined) {
+    customElements.define('cre8-submenu', Cre8Submenu);
+}
+export default Cre8Submenu;
+//# sourceMappingURL=submenu.js.map

package/lib/components/submenu/submenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"submenu.js","sourceRoot":"","sources":["../../../components/submenu/submenu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAEzC;;GAEG;AAEH,MAAM,OAAO,WAAY,SAAQ,WAAW;IAGxC,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,EAAE,EAAE,CAAC,CAAC;QAE3E,OAAO,IAAI,CAAA;+BACY,mBAAmB;;;KAG7C,CAAC;IACF,CAAC;;AAVM,kBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAa7B,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 { Cre8Element } from '../cre8-element';\nimport styles from './submenu.styles.js';\n\n/**\n * @slot - The component content\n */\n\nexport class Cre8Submenu extends Cre8Element {\n    static styles = [styles];\n\n    render() {\n        const componentClassNames = this.componentClassNames('cre8-c-submenu', {});\n\n        return html`\n      <ul role=\"list\" class=\"${componentClassNames}\">\n        <slot></slot>\n      </ul>\n    `;\n    }\n}\n\nif (customElements.get('cre8-submenu') === undefined) {\n    customElements.define('cre8-submenu', Cre8Submenu);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-submenu': Cre8Submenu;\n  }\n}\n\nexport default Cre8Submenu;\n"]}

package/lib/components/submenu/submenu.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-submenu{list-style:none;padding:0;margin:0}`;
+export default styles;
+//# sourceMappingURL=submenu.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"submenu.styles.js","sourceRoot":"","sources":["../../../components/submenu/submenu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,6zDAA6zD,CAAC;AACh1D,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-submenu{list-style:none;padding:0;margin:0}`;\nexport default styles;\n"]}