@tmorrow/cre8-wc 1.1.2 → 1.1.3

package/lib/components/link-list-item/link-list-item.js

@@ -1,48 +1,51 @@
-import { css as m, html as l } from "lit";
-import { ifDefined as h } from "lit-html/directives/if-defined.js";
-import { property as s } from "lit/decorators.js";
-import { Cre8Element as p } from "../cre8-element.js";
-const f = m`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-link-list__item{display:flex;align-items:center}.cre8-c-link-list__link{display:flex;align-items:center;color:var(--cre8-link-list-link-color, var(--cre8-color-content-link));text-decoration:underline}.cre8-c-link-list__link:hover,.cre8-c-link-list__link:focus{color:var(--cre8-link-list-link-hover-color, var(--cre8-color-content-link-hover));text-decoration:none}.cre8-c-link-list__item.cre8-is-active .cre8-c-link-list__link{color:var(--cre8-link-list-item-active-text-color);font-weight:var(--cre8-font-weight-bold)}.cre8-c-link-list__item-before{margin-right:0.5rem}.cre8-c-link-list__item-after{margin-left:0.5rem}::slotted(cre8-icon-legacy){--cre8-icon-height: 1.5rem;--cre8-icon-width: 1.5rem}`;
-var x = Object.defineProperty, a = (n, i, c, k) => {
-  for (var e = void 0, r = n.length - 1, d; r >= 0; r--)
-    (d = n[r]) && (e = d(i, c, e) || e);
-  return e && x(i, c, 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 {
-  render() {
-    const i = this.componentClassNames("cre8-c-link-list__item", {
-      "cre8-is-active": this.isActive === !0
-    });
-    return l`
-      <li class="${i}">
-        <a class="cre8-c-link-list__link" href="${h(this.href)}">
-          ${this.slotNotEmpty("itemBefore") && l`
+import { html, } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './link-list-item.styles.js';
+/**
+ * @slot - The default slot to put badges or other Components
+ */
+export class Cre8LinkListItem extends Cre8Element {
+    render() {
+        const componentClassName = this.componentClassNames('cre8-c-link-list__item', {
+            'cre8-is-active': this.isActive === true,
+        });
+        return html `
+      <li class="${componentClassName}">
+        <a class="cre8-c-link-list__link" href="${ifDefined(this.href)}">
+          ${this.slotNotEmpty('itemBefore') && html `
           <div class="cre8-c-link-list__item-before">
             <slot name="itemBefore"></slot>
           </div>`}
           <slot></slot>
         </a>
-        ${this.slotNotEmpty("itemAfter") && l`
+        ${this.slotNotEmpty('itemAfter') && html `
         <div class="cre8-c-link-list__item-after">
           <slot name="itemAfter"></slot>
         </div>`}
       </li>
     `;
-  }
-};
-o.styles = [f];
-let t = o;
-a([
-  s()
-], t.prototype, "text");
-a([
-  s({ type: Boolean, reflect: !0 })
-], t.prototype, "isActive");
-a([
-  s()
-], t.prototype, "href");
-customElements.get("cre8-link-list-item") === void 0 && customElements.define("cre8-link-list-item", t);
-export {
-  t as Cre8LinkListItem,
-  t as default
-};
+    }
+}
+Cre8LinkListItem.styles = [styles];
+__decorate([
+    property()
+], Cre8LinkListItem.prototype, "text", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8LinkListItem.prototype, "isActive", void 0);
+__decorate([
+    property()
+], Cre8LinkListItem.prototype, "href", void 0);
+if (customElements.get('cre8-link-list-item') === undefined) {
+    customElements.define('cre8-link-list-item', Cre8LinkListItem);
+}
+export default Cre8LinkListItem;
+//# sourceMappingURL=link-list-item.js.map

package/lib/components/link-list-item/link-list-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-list-item.js","sourceRoot":"","sources":["../../../components/link-list-item/link-list-item.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,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAEhD;;GAEG;AACH,MAAM,OAAO,gBAAiB,SAAQ,WAAW;IAqB/C,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,wBAAwB,EAAE;YAC1E,gBAAgB,EAAE,IAAI,CAAC,QAAQ,KAAK,IAAI;SAC3C,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;mBACE,kBAAkB;kDACa,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;YAC1D,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,IAAI,IAAI,CAAA;;;iBAGlC;;;UAGP,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,IAAI,IAAI,CAAA;;;eAGjC;;KAEV,CAAC;IACJ,CAAC;;AAxCQ,uBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAMvB;IADH,QAAQ,EAAE;8CACO;AAMd;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDACpB;AAMnB;IADH,QAAQ,EAAE;8CACO;AAyBpB,IAAI,cAAc,CAAC,GAAG,CAAC,qBAAqB,CAAC,KAAK,SAAS,EAAE,CAAC;IAC1D,cAAc,CAAC,MAAM,CAAC,qBAAqB,EAAE,gBAAgB,CAAC,CAAC;AACnE,CAAC;AAQD,eAAe,gBAAgB,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './link-list-item.styles.js';\n\n/**\n * @slot - The default slot to put badges or other Components\n */\nexport class Cre8LinkListItem extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * The link text\n   */\n  @property()\n      text?: string;\n\n  /**\n   * Active link\n   */\n  @property({ type: Boolean, reflect: true })\n      isActive?: boolean;\n\n  /**\n   * The link URL\n   */\n  @property()\n      href?: string;\n\n  render() {\n      const componentClassName = this.componentClassNames('cre8-c-link-list__item', {\n          'cre8-is-active': this.isActive === true,\n      });\n\n      return html`\n      <li class=\"${componentClassName}\">\n        <a class=\"cre8-c-link-list__link\" href=\"${ifDefined(this.href)}\">\n          ${this.slotNotEmpty('itemBefore') && html`\n          <div class=\"cre8-c-link-list__item-before\">\n            <slot name=\"itemBefore\"></slot>\n          </div>`}\n          <slot></slot>\n        </a>\n        ${this.slotNotEmpty('itemAfter') && html`\n        <div class=\"cre8-c-link-list__item-after\">\n          <slot name=\"itemAfter\"></slot>\n        </div>`}\n      </li>\n    `;\n  }\n}\n\nif (customElements.get('cre8-link-list-item') === undefined) {\n    customElements.define('cre8-link-list-item', Cre8LinkListItem);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-link-list-item': Cre8LinkListItem;\n  }\n}\n\nexport default Cre8LinkListItem;\n"]}

package/lib/components/link-list-item/link-list-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-c-link-list__item{display:flex;align-items:center}.cre8-c-link-list__link{display:flex;align-items:center;color:var(--cre8-link-list-link-color, var(--cre8-color-content-link));text-decoration:underline}.cre8-c-link-list__link:hover,.cre8-c-link-list__link:focus{color:var(--cre8-link-list-link-hover-color, var(--cre8-color-content-link-hover));text-decoration:none}.cre8-c-link-list__item.cre8-is-active .cre8-c-link-list__link{color:var(--cre8-link-list-item-active-text-color);font-weight:var(--cre8-font-weight-bold)}.cre8-c-link-list__item-before{margin-right:0.5rem}.cre8-c-link-list__item-after{margin-left:0.5rem}::slotted(cre8-icon-legacy){--cre8-icon-height: 1.5rem;--cre8-icon-width: 1.5rem}`;
+export default styles;
+//# sourceMappingURL=link-list-item.styles.js.map

package/lib/components/link-list-item/link-list-item.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-list-item.styles.js","sourceRoot":"","sources":["../../../components/link-list-item/link-list-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,+8EAA+8E,CAAC;AACl+E,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-link-list__item{display:flex;align-items:center}.cre8-c-link-list__link{display:flex;align-items:center;color:var(--cre8-link-list-link-color, var(--cre8-color-content-link));text-decoration:underline}.cre8-c-link-list__link:hover,.cre8-c-link-list__link:focus{color:var(--cre8-link-list-link-hover-color, var(--cre8-color-content-link-hover));text-decoration:none}.cre8-c-link-list__item.cre8-is-active .cre8-c-link-list__link{color:var(--cre8-link-list-item-active-text-color);font-weight:var(--cre8-font-weight-bold)}.cre8-c-link-list__item-before{margin-right:0.5rem}.cre8-c-link-list__item-after{margin-left:0.5rem}::slotted(cre8-icon-legacy){--cre8-icon-height: 1.5rem;--cre8-icon-width: 1.5rem}`;\nexport default styles;\n"]}

package/lib/components/list/list.js

@@ -1,36 +1,39 @@
-import { css as m, html as p } from "lit";
-import { property as o } from "lit/decorators.js";
-import { Cre8Element as c } from "../cre8-element.js";
-const h = m`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-list{list-style:none;padding:0;margin:0;margin-bottom:1rem}::slotted(cre8-list-item){display:block;padding-top:1rem;padding-bottom:1rem;border-bottom:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-subtle)}.cre8-c-list--bare ::slotted(cre8-list-item){border-bottom:0}.cre8-c-list--condensed ::slotted(cre8-list-item){padding-top:0.5rem;padding-bottom:0.5rem}.cre8-c-list--padded ::slotted(cre8-list-item){padding-top:2rem;padding-bottom:2rem}`;
-var f = Object.defineProperty, n = (a, r, d, g) => {
-  for (var e = void 0, i = a.length - 1, l; i >= 0; i--)
-    (l = a[i]) && (e = l(r, d, e) || e);
-  return e && f(r, d, 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 c {
-  render() {
-    const r = this.componentClassNames("cre8-c-list", {
-      "cre8-c-list--bare": this.variant === "bare",
-      "cre8-c-list--padded": this.spacing === "padded",
-      "cre8-c-list--condensed": this.spacing === "condensed"
-    });
-    return p`
-      <ul class="${r}">
+import { html, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './list.styles.js';
+/**
+ * @slot - The list items
+ */
+export class Cre8List extends Cre8Element {
+    render() {
+        const componentClassName = this.componentClassNames('cre8-c-list', {
+            'cre8-c-list--bare': this.variant === 'bare',
+            'cre8-c-list--padded': this.spacing === 'padded',
+            'cre8-c-list--condensed': this.spacing === 'condensed',
+        });
+        return html `
+      <ul class="${componentClassName}">
         <slot></slot>
       </ul>
     `;
-  }
-};
-s.styles = [h];
-let t = s;
-n([
-  o()
-], t.prototype, "variant");
-n([
-  o()
-], t.prototype, "spacing");
-customElements.get("cre8-list") === void 0 && customElements.define("cre8-list", t);
-export {
-  t as Cre8List,
-  t as default
-};
+    }
+}
+Cre8List.styles = [styles];
+__decorate([
+    property()
+], Cre8List.prototype, "variant", void 0);
+__decorate([
+    property()
+], Cre8List.prototype, "spacing", void 0);
+if (customElements.get('cre8-list') === undefined) {
+    customElements.define('cre8-list', Cre8List);
+}
+export default Cre8List;
+//# sourceMappingURL=list.js.map

package/lib/components/list/list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../components/list/list.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,kBAAkB,CAAC;AAEtC;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,WAAW;IA0BvC,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE;YAC/D,mBAAmB,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YAC5C,qBAAqB,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YAChD,wBAAwB,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;SACzD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;mBACE,kBAAkB;;;KAGhC,CAAC;IACJ,CAAC;;AArCQ,eAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAWvB;IADH,QAAQ,EAAE;yCACU;AAYjB;IADH,QAAQ,EAAE;yCAC0B;AAiBvC,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,CAAC;IAChD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AACjD,CAAC;AAQD,eAAe,QAAQ,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './list.styles.js';\n\n/**\n * @slot - The list items\n */\nexport class Cre8List extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Style variants\n   * <cre8-text-passage size=\"sm\">\n   * <ul>\n   * <li>**bare** removes any lines from in between list items</li>\n   * </ul>\n   * </cre8-text-passage>\n   */\n  @property()\n      variant?: 'bare';\n\n  /**\n   * Spacing variants\n   * <cre8-text-passage size=\"sm\">\n   * <ul>\n   * <li>**padded** applies more padding in between list items compared to the default</li>\n   * <li>**condensed** reduces padding in between list items compared to the default</li>\n   * </ul>\n   * </cre8-text-passage>\n   */\n  @property()\n      spacing?: 'padded' | 'condensed';\n\n  render() {\n      const componentClassName = this.componentClassNames('cre8-c-list', {\n          'cre8-c-list--bare': this.variant === 'bare',\n          'cre8-c-list--padded': this.spacing === 'padded',\n          'cre8-c-list--condensed': this.spacing === 'condensed',\n      });\n\n      return html`\n      <ul class=\"${componentClassName}\">\n        <slot></slot>\n      </ul>\n    `;\n  }\n}\n\nif (customElements.get('cre8-list') === undefined) {\n    customElements.define('cre8-list', Cre8List);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-list': Cre8List;\n  }\n}\n\nexport default Cre8List;\n"]}

package/lib/components/list/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}.cre8-c-list{list-style:none;padding:0;margin:0;margin-bottom:1rem}::slotted(cre8-list-item){display:block;padding-top:1rem;padding-bottom:1rem;border-bottom:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-subtle)}.cre8-c-list--bare ::slotted(cre8-list-item){border-bottom:0}.cre8-c-list--condensed ::slotted(cre8-list-item){padding-top:0.5rem;padding-bottom:0.5rem}.cre8-c-list--padded ::slotted(cre8-list-item){padding-top:2rem;padding-bottom:2rem}`;
+export default styles;
+//# sourceMappingURL=list.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list.styles.js","sourceRoot":"","sources":["../../../components/list/list.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,svEAAsvE,CAAC;AACzwE,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-list{list-style:none;padding:0;margin:0;margin-bottom:1rem}::slotted(cre8-list-item){display:block;padding-top:1rem;padding-bottom:1rem;border-bottom:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-subtle)}.cre8-c-list--bare ::slotted(cre8-list-item){border-bottom:0}.cre8-c-list--condensed ::slotted(cre8-list-item){padding-top:0.5rem;padding-bottom:0.5rem}.cre8-c-list--padded ::slotted(cre8-list-item){padding-top:2rem;padding-bottom:2rem}`;\nexport default styles;\n"]}

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

@@ -1,24 +1,28 @@
-import { css as r, html as s } 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}`, t = class t extends a {
-  // Set the role before rendering for better accessibility
-  // Because we're settting this role, we don't wrap the slot in an <li>
-  connectedCallback() {
-    this.setAttribute("role", "listitem"), super.connectedCallback();
-  }
-  render() {
-    const i = this.componentClassNames("cre8-c-list__item", {});
-    return s`
-        <div class="${i}">
+import { html, } from 'lit';
+import { Cre8Element } from '../cre8-element';
+import styles from './list-item.styles.js';
+/**
+ * @slot - The content of the list item
+ */
+export class Cre8ListItem extends Cre8Element {
+    // Set the role before rendering for better accessibility
+    // Because we're settting this role, we don't wrap the slot in an <li>
+    connectedCallback() {
+        this.setAttribute('role', 'listitem');
+        super.connectedCallback();
+    }
+    render() {
+        const componentClassName = this.componentClassNames('cre8-c-list__item', {});
+        return html `
+        <div class="${componentClassName}">
           <slot></slot>
         </div>
       `;
-  }
-};
-t.styles = [d];
-let e = t;
-customElements.get("cre8-list-item") === void 0 && customElements.define("cre8-list-item", e);
-export {
-  e as Cre8ListItem,
-  e as default
-};
+    }
+}
+Cre8ListItem.styles = [styles];
+if (customElements.get('cre8-list-item') === undefined) {
+    customElements.define('cre8-list-item', Cre8ListItem);
+}
+export default Cre8ListItem;
+//# sourceMappingURL=list-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list-item.js","sourceRoot":"","sources":["../../../components/list-item/list-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAE3C;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,WAAW;IAGzC,yDAAyD;IACzD,sEAAsE;IACtE,iBAAiB;QACb,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACtC,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC9B,CAAC;IAED,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC;QAE7E,OAAO,IAAI,CAAA;sBACG,kBAAkB;;;OAGjC,CAAC;IACJ,CAAC;;AAjBM,mBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAoB7B,IAAI,cAAc,CAAC,GAAG,CAAC,gBAAgB,CAAC,KAAK,SAAS,EAAE,CAAC;IACrD,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAC;AAC1D,CAAC;AAQD,eAAe,YAAY,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './list-item.styles.js';\n\n/**\n * @slot - The content of the list item\n */\nexport class Cre8ListItem extends Cre8Element {\n    static styles = [styles];\n\n    // Set the role before rendering for better accessibility\n    // Because we're settting this role, we don't wrap the slot in an <li>\n    connectedCallback() {\n        this.setAttribute('role', 'listitem');\n        super.connectedCallback();\n    }\n\n    render() {\n        const componentClassName = this.componentClassNames('cre8-c-list__item', {});\n\n        return html`\n        <div class=\"${componentClassName}\">\n          <slot></slot>\n        </div>\n      `;\n    }\n}\n\nif (customElements.get('cre8-list-item') === undefined) {\n    customElements.define('cre8-list-item', Cre8ListItem);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-list-item': Cre8ListItem;\n  }\n}\n\nexport default Cre8ListItem;\n"]}

package/lib/components/list-item/list-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}`;
+export default styles;
+//# sourceMappingURL=list-item.styles.js.map

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

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

package/lib/components/loading-spinner/loading-spinner.js

@@ -1,96 +1,151 @@
-import { css as d, html as n, nothing as h } from "lit";
-import { property as i } from "lit/decorators.js";
-import { Cre8Element as m } from "../cre8-element.js";
-const g = d`*,::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}@keyframes loading{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes spinner-circle-animation{0%,25%{stroke-dashoffset:280;transform:rotate(0)}50%,75%{stroke-dashoffset:75;transform:rotate(45deg)}100%{stroke-dashoffset:280;transform:rotate(360deg)}}:host{display:inline-block;--spinner-stroke-dasharray: 282.743px;--spinner-large-stroke-width: 10;--spinner-small-stroke-width: 14;--spinner-large-width: 4.5rem;--spinner-small-width: 1.5rem;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)}.cre8-c-spinner,.cre8-c-spinner--large{--spinner-height: var(--spinner-large-width);--spinner-width: var(--spinner-large-width);--icon-color: var(--cre8-color-content-brand)}.cre8-c-spinner .cre8-c-spinner__icon,.cre8-c-spinner--large .cre8-c-spinner__icon{display:block}.cre8-c-spinner .cre8-c-spinner__label,.cre8-c-spinner--large .cre8-c-spinner__label{display:block;margin-top:var(--cre8-spacing-8)}.cre8-c-spinner--small{--spinner-height: var(--spinner-small-width);--spinner-width: var(--spinner-small-width);--icon-color: var(--cre8-color-content-brand);display:flex;align-items:center}.cre8-c-spinner--small .cre8-c-spinner__label{display:inline-block;margin-left:var(--cre8-spacing-8);margin-top:0;vertical-align:.35rem}.cre8-c-spinner--inverse{--icon-color: var(--cre8-color-content-brand-knockout);--label-color: var(--cre8-color-content-brand-knockout)}.cre8-c-spinner--secondary.cre8-c-spinner--inverse.cre8-c-spinner--neutral{--icon-color: var(--cre8-color-button-secondary-neutral-inverse-content-active);--label-color: var(--cre8-color-button-secondary-neutral-inverse-content-active)}.cre8-c-spinner--neutral{--icon-color: var(--cre8-color-button-secondary-neutral-content-active)}.cre8-c-spinner--primary.cre8-c-spinner--inverse{--icon-color: var(--cre8-color-button-primary-inverse-content-active)}.cre8-c-spinner--secondary.cre8-c-spinner--inverse{--icon-color: var(--cre8-color-button-secondary-inverse-content-active)}.cre8-c-spinner--tertiary.cre8-c-spinner--inverse{--icon-color: var(--cre8-color-button-tertiary-inverse-content-active)}.cre8-c-spinner__label{color:var(--label-color, var(--cre8-color-content-default))}.cre8-c-spinner__hidden-label{display:none}.cre8-c-spinner__icon{height:var(--spinner-height, 1em);width:var(--spinner-width, 1em)}.cre8-c-spinner__icon circle{fill:rgba(0,0,0,0);stroke:var(--icon-color, inherit);stroke-dasharray:var(--spinner-stroke-dasharray);stroke-linecap:round;stroke-width:var(--spinner-large-stroke-width);transform-origin:50% 50%}.cre8-c-spinner__icon-small circle{stroke-width:var(--spinner-small-stroke-width)}.cre8-c-spinner--indeterminate .cre8-c-spinner__icon{animation:loading 2s linear 0s infinite}.cre8-c-spinner--indeterminate .cre8-c-spinner__icon circle{animation-duration:1.4s;animation-iteration-count:infinite;animation-name:spinner-circle-animation;animation-timing-function:ease-in-out}.cre8-c-spinner--determinate .cre8-c-spinner__icon{overflow:hidden;transform:rotate(-90deg);transform-origin:center center}`;
-var f = Object.defineProperty, t = (l, r, s, v) => {
-  for (var a = void 0, c = l.length - 1, p; c >= 0; c--)
-    (p = l[c]) && (a = p(r, s, a) || a);
-  return a && f(r, s, a), a;
+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(), this.progress = 0, this.size = "large";
-    const r = Math.floor(Math.random() * 9e5) + 1e5;
-    this.labelId = `cre8-spinner-${r}`;
-  }
-  renderDeterminateSpinner() {
-    const r = Math.max(Math.min(100, this.progress === 0 ? this.progress = 1 : this.progress), 0), s = 2 * 3.1415926 * 45 - r / 100 * (2 * 3.1415926 * 45);
-    return n` ${this.size === "small" ? n`
+import { html, nothing, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './loading-spinner.styles.js';
+/**
+ * A loading spinner notifies the user that their request is being processed while the front end is retrieving data
+ * or performing slow computations.
+ *
+ * Providing visibility of a system's status is one of the most important rules of UI design. When the user has to
+ * guess or assume that the system is responding to their input, they may send a command such as submit multiple
+ * times, while also being anxious that the application is frozen or not working.
+ *
+ * While it is most ideal to improve system performance such that there is no perceptible delay, in some cases this
+ * is not possible. In these cases, the immediate response should be a progress indicator to give a visual indication
+ * that their command was received and that the application is working.
+ *
+ * The length of time for the system response is a good general guideline for which progress indicator to use.
+ *
+ * ## Determinable vs indeterminate progress
+ *
+ * A progress meter provides feedback that the system is working and gives the user an indication of how much time
+ * they will wait. This indicator should be used when the system response time is longer and determinable. See
+ * ProgressMeter component for further examples and accessibility considerations.
+ *
+ * ## How to Use
+ *
+ * The loading-spinner component can be used to indicate loading state on the component level all the way up to the
+ * page level. There are two loading styles: determinate (loading progress represents percentage of total load time)
+ * and indeterminate (a spinning animation that persists while loading continues)
+ *
+ * 1. Choose determinate or indeterminate. UX best practices leans more towards recommending the indeterminate
+ * progress indicator if load time is unknown, while determinate is less user friendly unless the label indicates
+ * the percentage loaded as well.
+ * 2. Choose a size and use it according to context, guidance should be given by your design or content team.
+ * 3. A common label to use is `Loading…`, guidance should be given by your design content team.
+ * 4. If you choose to use the determinate loader then you must also control the progress attribute's value which
+ * controls the percentage of the circle that shows (values 0-100 accepted);
+ * 5. For dark backgrounds, add the `inverse` attribute to the `<cre8-loading-spinner>` tag.
+ * 6. For accessibility reasons, always include a label input unless explicitly informed to do otherwise by design or
+ * accessibility teams.
+ * 7. The lg variant is usually suitable for containers or block level loading placeholders while the sm size is
+ * meant for more inline loading states.
+ *
+ */
+export class Cre8LoadingSpinner extends Cre8Element {
+    constructor() {
+        super();
+        /**
+         * Progress to display, between 0 and 100. Requires determinate property to be set to true.
+         * */
+        this.progress = 0;
+        /**
+         * Size of the progress indicator and position of the label, if a label has been defined using the label property.
+         * - **large** renders a large progress indicator at 72px in width/height with the label below.
+         * - **small** renders a small progress indicator at 24px in width/height with the label to the right.
+         */
+        this.size = 'large';
+        const randomId = Math.floor(Math.random() * 900000) + 100000;
+        this.labelId = `cre8-spinner-${randomId}`;
+    }
+    renderDeterminateSpinner() {
+        const progress = Math.max(Math.min(100, this.progress === 0 ? (this.progress = 1) : this.progress), 0);
+        const dashOffset = 2 * 3.1415926 * 45 - (progress / 100) * (2 * 3.1415926 * 45);
+        return html ` ${this.size === 'small'
+            ? html `
           <svg class="cre8-c-spinner__icon cre8-c-spinner__icon-small" aria-hidden="true" viewBox="0 0 100 100">
-            <circle cx="50%" cy="50%" r="43" stroke-dashoffset="${s}"></circle>
+            <circle cx="50%" cy="50%" r="43" stroke-dashoffset="${dashOffset}"></circle>
           </svg>
-        ` : n` <svg class="cre8-c-spinner__icon" aria-hidden="true" viewBox="0 0 100 100">
-          <circle cx="50%" cy="50%" r="45" stroke-dashoffset="${s}"></circle>
+        `
+            : html ` <svg class="cre8-c-spinner__icon" aria-hidden="true" viewBox="0 0 100 100">
+          <circle cx="50%" cy="50%" r="45" stroke-dashoffset="${dashOffset}"></circle>
         </svg>`}`;
-  }
-  renderInDeterminateSpinner() {
-    return n` ${this.size === "small" ? n`
+    }
+    renderInDeterminateSpinner() {
+        return html ` ${this.size === 'small'
+            ? html `
           <svg class="cre8-c-spinner__icon cre8-c-spinner__icon-small" aria-hidden="true" viewBox="0 0 100 100">
             <circle cx="50%" cy="50%" r="43"></circle>
           </svg>
-        ` : n` <svg class="cre8-c-spinner__icon" aria-hidden="true" viewBox="0 0 100 100">
+        `
+            : html ` <svg class="cre8-c-spinner__icon" aria-hidden="true" viewBox="0 0 100 100">
           <circle cx="50%" cy="50%" r="45"></circle>
         </svg>`}`;
-  }
-  render() {
-    const r = this.componentClassNames("cre8-c-spinner", {
-      "cre8-c-spinner--large": this.size === "large",
-      "cre8-c-spinner--small": this.size === "small",
-      "cre8-c-spinner--inverse": this.inverse,
-      "cre8-c-spinner--neutral": this.neutral,
-      "cre8-c-spinner--primary": this.buttonVariant === "primary",
-      "cre8-c-spinner--secondary": this.buttonVariant === "secondary",
-      "cre8-c-spinner--tertiary": this.buttonVariant === "tertiary",
-      "cre8-c-spinner--determinate": this.determinate,
-      "cre8-c-spinner--indeterminate": !this.determinate
-    });
-    return n`
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-spinner', {
+            'cre8-c-spinner--large': this.size === 'large',
+            'cre8-c-spinner--small': this.size === 'small',
+            'cre8-c-spinner--inverse': this.inverse,
+            'cre8-c-spinner--neutral': this.neutral,
+            'cre8-c-spinner--primary': this.buttonVariant === 'primary',
+            'cre8-c-spinner--secondary': this.buttonVariant === 'secondary',
+            'cre8-c-spinner--tertiary': this.buttonVariant === 'tertiary',
+            'cre8-c-spinner--determinate': this.determinate,
+            'cre8-c-spinner--indeterminate': !this.determinate,
+        });
+        return html `
       <div
-        class="${r}"
+        class="${componentClassNames}"
         role="progressbar"
         aria-labelledby="${this.labelId}"
         aria-valuemin="0"
         aria-valuemax="100"
-        aria-valuenow="${this.determinate ? this.progress : h}"
+        aria-valuenow="${this.determinate ? this.progress : nothing}"
         part="base"
       >
         ${this.determinate ? this.renderDeterminateSpinner() : this.renderInDeterminateSpinner()}
         <div
           id="${this.labelId}"
-          class="${this.label ? "cre8-c-spinner__label" : "cre8-c-spinner__hidden-label"}"
+          class="${!this.label ? 'cre8-c-spinner__hidden-label' : 'cre8-c-spinner__label'}"
           part="label"
         >
           ${this.label}
         </div>
       </div>
     `;
-  }
-};
-o.styles = g;
-let e = o;
-t([
-  i({ type: Boolean, reflect: !0 })
-], e.prototype, "determinate");
-t([
-  i({ type: Boolean, reflect: !0 })
-], e.prototype, "inverse");
-t([
-  i({ type: Boolean, reflect: !0 })
-], e.prototype, "neutral");
-t([
-  i()
-], e.prototype, "buttonVariant");
-t([
-  i()
-], e.prototype, "label");
-t([
-  i({ reflect: !0, type: Number })
-], e.prototype, "progress");
-t([
-  i()
-], e.prototype, "size");
-customElements.get("cre8-loading-spinner") === void 0 && customElements.define("cre8-loading-spinner", e);
-export {
-  e as Cre8LoadingSpinner,
-  e as default
-};
+    }
+}
+Cre8LoadingSpinner.styles = (styles);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8LoadingSpinner.prototype, "determinate", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8LoadingSpinner.prototype, "inverse", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8LoadingSpinner.prototype, "neutral", void 0);
+__decorate([
+    property()
+], Cre8LoadingSpinner.prototype, "buttonVariant", void 0);
+__decorate([
+    property()
+], Cre8LoadingSpinner.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true, type: Number })
+], Cre8LoadingSpinner.prototype, "progress", void 0);
+__decorate([
+    property()
+], Cre8LoadingSpinner.prototype, "size", void 0);
+if (customElements.get('cre8-loading-spinner') === undefined) {
+    customElements.define('cre8-loading-spinner', Cre8LoadingSpinner);
+}
+export default Cre8LoadingSpinner;
+//# sourceMappingURL=loading-spinner.js.map

package/lib/components/loading-spinner/loading-spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-spinner.js","sourceRoot":"","sources":["../../../components/loading-spinner/loading-spinner.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,GAAI,MAAM,KAAK,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,6BAA6B,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,OAAO,kBAAmB,SAAQ,WAAW;IAqDjD;QACI,KAAK,EAAE,CAAC;QAjBZ;;aAEK;QAED,aAAQ,GAAG,CAAC,CAAC;QAEjB;;;;WAIG;QAEC,SAAI,GAAuB,OAAO,CAAC;QAMnC,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,MAAM,CAAC,GAAG,MAAM,CAAC;QAC7D,IAAI,CAAC,OAAO,GAAG,gBAAgB,QAAQ,EAAE,CAAC;IAC9C,CAAC;IAEO,wBAAwB;QAC5B,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;QACvG,MAAM,UAAU,GAAG,CAAC,GAAG,SAAS,GAAG,EAAE,GAAG,CAAC,QAAQ,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,SAAS,GAAG,EAAE,CAAC,CAAC;QAEhF,OAAO,IAAI,CAAA,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO;YAChC,CAAC,CAAC,IAAI,CAAA;;kEAEkD,UAAU;;SAEnE;YACC,CAAC,CAAC,IAAI,CAAA;gEACgD,UAAU;eAC3D,EAAE,CAAC;IAChB,CAAC;IAEO,0BAA0B;QAC9B,OAAO,IAAI,CAAA,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO;YAChC,CAAC,CAAC,IAAI,CAAA;;;;SAIP;YACC,CAAC,CAAC,IAAI,CAAA;;eAED,EAAE,CAAC;IAChB,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,EAAE;YACnE,uBAAuB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;YAC9C,uBAAuB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;YAC9C,yBAAyB,EAAE,IAAI,CAAC,OAAO;YACvC,yBAAyB,EAAE,IAAI,CAAC,OAAO;YACvC,yBAAyB,EAAE,IAAI,CAAC,aAAa,KAAK,SAAS;YAC3D,2BAA2B,EAAE,IAAI,CAAC,aAAa,KAAK,WAAW;YAC/D,0BAA0B,EAAE,IAAI,CAAC,aAAa,KAAK,UAAU;YAC7D,6BAA6B,EAAE,IAAI,CAAC,WAAW;YAC/C,+BAA+B,EAAE,CAAC,IAAI,CAAC,WAAW;SACrD,CAAC,CAAC;QACH,OAAO,IAAI,CAAA;;iBAEA,mBAAmB;;2BAET,IAAI,CAAC,OAAO;;;yBAGd,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;;;UAGzD,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,wBAAwB,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,0BAA0B,EAAE;;gBAEhF,IAAI,CAAC,OAAO;mBACT,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,uBAAuB;;;YAG7E,IAAI,CAAC,KAAK;;;KAGjB,CAAC;IACJ,CAAC;;AArHQ,yBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AASvB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDACjB;AAMtB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACrB;AAMlB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACrB;AAMlB;IADH,QAAQ,EAAE;yDAC+C;AAOtD;IADH,QAAQ,EAAE;iDACQ;AAMf;IADH,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDACzB;AAQb;IADH,QAAQ,EAAE;gDAC4B;AAuEzC,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, nothing,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './loading-spinner.styles.js';\n\n/**\n * A loading spinner notifies the user that their request is being processed while the front end is retrieving data\n * or performing slow computations.\n *\n * Providing visibility of a system's status is one of the most important rules of UI design. When the user has to\n * guess or assume that the system is responding to their input, they may send a command such as submit multiple\n * times, while also being anxious that the application is frozen or not working.\n *\n * While it is most ideal to improve system performance such that there is no perceptible delay, in some cases this\n * is not possible. In these cases, the immediate response should be a progress indicator to give a visual indication\n * that their command was received and that the application is working.\n *\n * The length of time for the system response is a good general guideline for which progress indicator to use.\n *\n * ## Determinable vs indeterminate progress\n *\n * A progress meter provides feedback that the system is working and gives the user an indication of how much time\n * they will wait. This indicator should be used when the system response time is longer and determinable. See\n * ProgressMeter component for further examples and accessibility considerations.\n *\n * ## How to Use\n *\n * The loading-spinner component can be used to indicate loading state on the component level all the way up to the\n * page level. There are two loading styles: determinate (loading progress represents percentage of total load time)\n * and indeterminate (a spinning animation that persists while loading continues)\n *\n * 1. Choose determinate or indeterminate. UX best practices leans more towards recommending the indeterminate\n * progress indicator if load time is unknown, while determinate is less user friendly unless the label indicates\n * the percentage loaded as well.\n * 2. Choose a size and use it according to context, guidance should be given by your design or content team.\n * 3. A common label to use is `Loading…`, guidance should be given by your design content team.\n * 4. If you choose to use the determinate loader then you must also control the progress attribute's value which\n * controls the percentage of the circle that shows (values 0-100 accepted);\n * 5. For dark backgrounds, add the `inverse` attribute to the `<cre8-loading-spinner>` tag.\n * 6. For accessibility reasons, always include a label input unless explicitly informed to do otherwise by design or\n * accessibility teams.\n * 7. The lg variant is usually suitable for containers or block level loading placeholders while the sm size is\n * meant for more inline loading states.\n *\n */\nexport class Cre8LoadingSpinner extends Cre8Element {\n    static styles = (styles);\n\n  /**\n   * Mode of the spinner, defaults to indeterminate.\n   * If true, renders a standard progress indicator, fills via the progress property from 0% to 100%.\n   * If false or undefined, renders indeterminate spinner which animates in a spinning motion until component is\n   * destroyed.\n   */\n  @property({ type: Boolean, reflect: true })\n      determinate?: boolean;\n\n  /**\n   * Inverse property used for dark backgrounds.\n   */\n  @property({ type: Boolean, reflect: true })\n      inverse?: boolean;\n\n  /**\n   * Neutral property used for secondary neutral loading button.\n   */\n  @property({ type: Boolean, reflect: true })\n      neutral?: boolean;\n\n  /**\n   * Property that specifies which button variant is using the loading spinner\n   */\n  @property()\n      buttonVariant? : 'primary' | 'secondary' | 'tertiary';\n\n  /**\n   * Label to show along with progress indicator.\n   * This is required to meet accessibility requirements for this component.\n   */\n  @property()\n      label?: string;\n\n  /**\n   * Progress to display, between 0 and 100. Requires determinate property to be set to true.\n   * */\n  @property({ reflect: true, type: Number })\n      progress = 0;\n\n  /**\n   * Size of the progress indicator and position of the label, if a label has been defined using the label property.\n   * - **large** renders a large progress indicator at 72px in width/height with the label below.\n   * - **small** renders a small progress indicator at 24px in width/height with the label to the right.\n   */\n  @property()\n      size?: 'large' | 'small' = 'large';\n\n  private labelId: string;\n\n  constructor() {\n      super();\n      const randomId = Math.floor(Math.random() * 900000) + 100000;\n      this.labelId = `cre8-spinner-${randomId}`;\n  }\n\n  private renderDeterminateSpinner() {\n      const progress = Math.max(Math.min(100, this.progress === 0 ? (this.progress = 1) : this.progress), 0);\n      const dashOffset = 2 * 3.1415926 * 45 - (progress / 100) * (2 * 3.1415926 * 45);\n\n      return html` ${this.size === 'small'\n          ? html`\n          <svg class=\"cre8-c-spinner__icon cre8-c-spinner__icon-small\" aria-hidden=\"true\" viewBox=\"0 0 100 100\">\n            <circle cx=\"50%\" cy=\"50%\" r=\"43\" stroke-dashoffset=\"${dashOffset}\"></circle>\n          </svg>\n        `\n          : html` <svg class=\"cre8-c-spinner__icon\" aria-hidden=\"true\" viewBox=\"0 0 100 100\">\n          <circle cx=\"50%\" cy=\"50%\" r=\"45\" stroke-dashoffset=\"${dashOffset}\"></circle>\n        </svg>`}`;\n  }\n\n  private renderInDeterminateSpinner() {\n      return html` ${this.size === 'small'\n          ? html`\n          <svg class=\"cre8-c-spinner__icon cre8-c-spinner__icon-small\" aria-hidden=\"true\" viewBox=\"0 0 100 100\">\n            <circle cx=\"50%\" cy=\"50%\" r=\"43\"></circle>\n          </svg>\n        `\n          : html` <svg class=\"cre8-c-spinner__icon\" aria-hidden=\"true\" viewBox=\"0 0 100 100\">\n          <circle cx=\"50%\" cy=\"50%\" r=\"45\"></circle>\n        </svg>`}`;\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-spinner', {\n          'cre8-c-spinner--large': this.size === 'large',\n          'cre8-c-spinner--small': this.size === 'small',\n          'cre8-c-spinner--inverse': this.inverse,\n          'cre8-c-spinner--neutral': this.neutral,\n          'cre8-c-spinner--primary': this.buttonVariant === 'primary',\n          'cre8-c-spinner--secondary': this.buttonVariant === 'secondary',\n          'cre8-c-spinner--tertiary': this.buttonVariant === 'tertiary',\n          'cre8-c-spinner--determinate': this.determinate,\n          'cre8-c-spinner--indeterminate': !this.determinate,\n      });\n      return html`\n      <div\n        class=\"${componentClassNames}\"\n        role=\"progressbar\"\n        aria-labelledby=\"${this.labelId}\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow=\"${this.determinate ? this.progress : nothing}\"\n        part=\"base\"\n      >\n        ${this.determinate ? this.renderDeterminateSpinner() : this.renderInDeterminateSpinner()}\n        <div\n          id=\"${this.labelId}\"\n          class=\"${!this.label ? 'cre8-c-spinner__hidden-label' : 'cre8-c-spinner__label'}\"\n          part=\"label\"\n        >\n          ${this.label}\n        </div>\n      </div>\n    `;\n  }\n}\nif (customElements.get('cre8-loading-spinner') === undefined) {\n    customElements.define('cre8-loading-spinner', Cre8LoadingSpinner);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-loading-spinner': Cre8LoadingSpinner;\n  }\n}\n\nexport default Cre8LoadingSpinner;\n"]}

package/lib/components/loading-spinner/loading-spinner.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}@keyframes loading{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes spinner-circle-animation{0%,25%{stroke-dashoffset:280;transform:rotate(0)}50%,75%{stroke-dashoffset:75;transform:rotate(45deg)}100%{stroke-dashoffset:280;transform:rotate(360deg)}}:host{display:inline-block;--spinner-stroke-dasharray: 282.743px;--spinner-large-stroke-width: 10;--spinner-small-stroke-width: 14;--spinner-large-width: 4.5rem;--spinner-small-width: 1.5rem;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)}.cre8-c-spinner,.cre8-c-spinner--large{--spinner-height: var(--spinner-large-width);--spinner-width: var(--spinner-large-width);--icon-color: var(--cre8-color-content-brand)}.cre8-c-spinner .cre8-c-spinner__icon,.cre8-c-spinner--large .cre8-c-spinner__icon{display:block}.cre8-c-spinner .cre8-c-spinner__label,.cre8-c-spinner--large .cre8-c-spinner__label{display:block;margin-top:var(--cre8-spacing-8)}.cre8-c-spinner--small{--spinner-height: var(--spinner-small-width);--spinner-width: var(--spinner-small-width);--icon-color: var(--cre8-color-content-brand);display:flex;align-items:center}.cre8-c-spinner--small .cre8-c-spinner__label{display:inline-block;margin-left:var(--cre8-spacing-8);margin-top:0;vertical-align:.35rem}.cre8-c-spinner--inverse{--icon-color: var(--cre8-color-content-brand-knockout);--label-color: var(--cre8-color-content-brand-knockout)}.cre8-c-spinner--secondary.cre8-c-spinner--inverse.cre8-c-spinner--neutral{--icon-color: var(--cre8-color-button-secondary-neutral-inverse-content-active);--label-color: var(--cre8-color-button-secondary-neutral-inverse-content-active)}.cre8-c-spinner--neutral{--icon-color: var(--cre8-color-button-secondary-neutral-content-active)}.cre8-c-spinner--primary.cre8-c-spinner--inverse{--icon-color: var(--cre8-color-button-primary-inverse-content-active)}.cre8-c-spinner--secondary.cre8-c-spinner--inverse{--icon-color: var(--cre8-color-button-secondary-inverse-content-active)}.cre8-c-spinner--tertiary.cre8-c-spinner--inverse{--icon-color: var(--cre8-color-button-tertiary-inverse-content-active)}.cre8-c-spinner__label{color:var(--label-color, var(--cre8-color-content-default))}.cre8-c-spinner__hidden-label{display:none}.cre8-c-spinner__icon{height:var(--spinner-height, 1em);width:var(--spinner-width, 1em)}.cre8-c-spinner__icon circle{fill:rgba(0,0,0,0);stroke:var(--icon-color, inherit);stroke-dasharray:var(--spinner-stroke-dasharray);stroke-linecap:round;stroke-width:var(--spinner-large-stroke-width);transform-origin:50% 50%}.cre8-c-spinner__icon-small circle{stroke-width:var(--spinner-small-stroke-width)}.cre8-c-spinner--indeterminate .cre8-c-spinner__icon{animation:loading 2s linear 0s infinite}.cre8-c-spinner--indeterminate .cre8-c-spinner__icon circle{animation-duration:1.4s;animation-iteration-count:infinite;animation-name:spinner-circle-animation;animation-timing-function:ease-in-out}.cre8-c-spinner--determinate .cre8-c-spinner__icon{overflow:hidden;transform:rotate(-90deg);transform-origin:center center}`;
+export default styles;
+//# sourceMappingURL=loading-spinner.styles.js.map