@usecapsule/core-components 3.2.0 → 3.3.0-dev.0

package/dist/collection/components/cpsl-app-bar/cpsl-app-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"cpsl-app-bar.js","sourceRoot":"","sources":["../../../../src/components/cpsl-app-bar/cpsl-app-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,UAAU;;;wBAUmB,OAAO;;;IAO/C,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK;gBACH,2BAA2B;gBAC3B,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI,IACvB,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;YAG/E,4DACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE;oBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI;iBAC3B;gBAED,8DAAa,CACT;YACL,IAAI,CAAC,QAAQ,KAAK,OAAO,IAAI,CAC5B,4DACE,KAAK,EAAE;oBACL,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI;iBAC3B,GACD,CACH,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-app-bar',\n  styleUrl: 'cpsl-app-bar.scss',\n  shadow: true,\n})\nexport class CpslAppBar {\n  /**\n   * Height of the app bar.\n   */\n  @Prop() height: number;\n\n  /**\n   * The position of the drawer.\n   * Default is `fixed`.\n   */\n  @Prop() position?: 'fixed' | 'static' = 'fixed';\n\n  /**\n   * Override z-index.\n   */\n  @Prop() zIndexOverride?: number;\n\n  render() {\n    return (\n      <Host\n        style={{\n          // position: this.position,\n          height: `${this.height}px`,\n          ...(Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {}),\n        }}\n      >\n        <div\n          class=\"container\"\n          part=\"container\"\n          style={{\n            position: this.position,\n            height: `${this.height}px`,\n          }}\n        >\n          <slot></slot>\n        </div>\n        {this.position === 'fixed' && (\n          <div\n            style={{\n              height: `${this.height}px`,\n            }}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cpsl-app-bar.js","sourceRoot":"","sources":["../../../../src/components/cpsl-app-bar/cpsl-app-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,UAAU;;;wBAUmB,OAAO;;;IAO/C,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK;gBACH,2BAA2B;gBAC3B,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI,IACvB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;YAGtE,4DACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE;oBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI;iBAC3B;gBAED,8DAAa,CACT;YACL,IAAI,CAAC,QAAQ,KAAK,OAAO,IAAI,CAC5B,4DACE,KAAK,EAAE;oBACL,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI;iBAC3B,GACD,CACH,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-app-bar',\n  styleUrl: 'cpsl-app-bar.scss',\n  shadow: true,\n})\nexport class CpslAppBar {\n  /**\n   * Height of the app bar.\n   */\n  @Prop() height: number;\n\n  /**\n   * The position of the drawer.\n   * Default is `fixed`.\n   */\n  @Prop() position?: 'fixed' | 'static' = 'fixed';\n\n  /**\n   * Override z-index.\n   */\n  @Prop() zIndexOverride?: number;\n\n  render() {\n    return (\n      <Host\n        style={{\n          // position: this.position,\n          height: `${this.height}px`,\n          ...(this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {}),\n        }}\n      >\n        <div\n          class=\"container\"\n          part=\"container\"\n          style={{\n            position: this.position,\n            height: `${this.height}px`,\n          }}\n        >\n          <slot></slot>\n        </div>\n        {this.position === 'fixed' && (\n          <div\n            style={{\n              height: `${this.height}px`,\n            }}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/{cpsl-modal/cpsl-modal.css → cpsl-auth-modal/cpsl-auth-modal.css}

@@ -54,29 +54,15 @@
    * }
    */
 :host {
-  --container-width: 360px;
-  --container-gap: 16px;
-  --container-border-radius: var(--cpsl-border-radius-modal);
-  --container-border-width: 1px;
-  --container-border-color: var(--cpsl-color-modal-border);
-  --container-background-color: var(--cpsl-color-modal-surface-footer);
-  --container-padding-bottom: 16px;
-  --container-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.12);
-  --inner-container-background-color: var(--cpsl-color-modal-surface-main);
-  --inner-container-border-radius: var(--cpsl-border-radius-modal);
-  --inner-container-box-shadow: 0px 1px 2px 0px var(--cpsl-color-alpha-black-8);
-  --inner-container-padding-top: 16px;
-  --inner-container-padding-end: 16px;
-  --inner-container-padding-bottom: 24px;
-  --inner-container-padding-start: 16px;
-  --inner-container-margin-bottom: 16px;
+  --container-width: 560px;
+  --container-gap: 8px;
   display: block;
-  z-index: 10005;
+  z-index: 10011;
   position: relative;
 }
 
 :host cpsl-overlay {
-  z-index: 10005;
+  z-index: 10011;
 }
 
 @media (max-width: 480px) {
@@ -93,21 +79,21 @@
     border-bottom-left-radius: 0px;
     border-bottom-right-radius: 0px;
   }
+  :host(.include-mobile-styling) .modal-body-card {
+    --card-border-radius-bl: 0px;
+    --card-border-radius-br: 0px;
+  }
 }
 
 :host(.no-overlay) {
   z-index: 0;
 }
-
-.modal-header {
-  position: sticky;
-  top: 0;
-  padding-top: var(--inner-container-padding-top);
-  background: var(--inner-container-background-color);
+:host(.no-overlay) .modal-body-card {
+  --card-border-width: 1px;
 }
 
 .modal-wrapper {
-  z-index: 10005;
+  z-index: 10011;
   position: fixed;
   top: 0;
   left: 0;
@@ -124,19 +110,10 @@
 .modal-container {
   position: relative;
   overflow: hidden;
-  -webkit-padding-start: var(--container-padding-start);
-  padding-inline-start: var(--container-padding-start);
-  -webkit-padding-end: var(--container-padding-end);
-  padding-inline-end: var(--container-padding-end);
-  padding-top: var(--container-padding-top);
-  padding-bottom: var(--container-padding-bottom);
   width: var(--container-width);
   display: flex;
   flex-direction: column;
-  border: var(--container-border-width) solid var(--container-border-color);
-  border-radius: var(--container-border-radius);
-  box-shadow: var(--container-box-shadow);
-  background: var(--container-background-color);
+  gap: var(--container-gap);
   max-width: 95vw;
   max-height: 95vh;
   max-height: 95dvh;
@@ -148,35 +125,33 @@
 .modal-container ::-webkit-scrollbar {
   display: none;
 }
-
-.modal-inner-container {
-  -webkit-padding-start: var(--inner-container-padding-start);
-  padding-inline-start: var(--inner-container-padding-start);
-  -webkit-padding-end: var(--inner-container-padding-end);
-  padding-inline-end: var(--inner-container-padding-end);
-  padding-top: 0;
-  padding-bottom: var(--inner-container-padding-bottom);
-  margin-bottom: var(--inner-container-margin-bottom);
-  border-radius: var(--inner-container-border-radius);
-  box-shadow: var(--inner-container-box-shadow);
-  background: var(--inner-container-background-color);
+.modal-container.no-footer {
+  gap: 0px;
 }
 
-.expanded {
-  height: 0px;
-  overflow: hidden;
-  display: none;
+.modal-body-card {
+  --card-padding-top: 16px;
+  --card-padding-bottom: 16px;
+  --card-padding-start: 16px;
+  --card-padding-end: 16px;
+  --card-border-width: 0px;
+  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.08);
 }
 
-.modal-inner-container.no-footer {
-  margin-bottom: 0px;
-  box-shadow: none;
+.no-opacity {
+  opacity: 0;
 }
 
-.modal-container.no-footer {
-  padding-bottom: 0px;
+.mobile-footer {
+  margin-top: 16px;
 }
 
-.no-opacity {
-  opacity: 0;
+.footer-hidden {
+  height: 0px;
+  visibility: hidden;
+  --card-padding-top: 0px;
+  --card-padding-bottom: 0px;
+  --card-padding-start: 0px;
+  --card-padding-end: 0px;
+  --card-border-width: 0px;
 }

package/dist/collection/components/{cpsl-modal/cpsl-modal.js → cpsl-auth-modal/cpsl-auth-modal.js}

@@ -1,26 +1,17 @@
 import { Host, h } from "@stencil/core";
 import gsap from "gsap";
-import Draggable from "gsap/Draggable";
 import { MOBILE_SIZE } from "../../constants";
-gsap.registerPlugin(Draggable);
 const mm = gsap.matchMedia();
-export class CpslModal {
+export class CpslAuthModal {
     constructor() {
-        this.getDraggableHeight = () => {
-            return this.innerContainerEl.clientHeight;
-        };
         this.hasFooter = undefined;
+        this.isMobile = undefined;
         this.enterTransitionDuration = 0.15;
         this.exitTransitionDuration = 0.15;
-        this.footerExpanded = undefined;
-        this.footerTransitionDuration = 0.15;
         this.noOverlay = undefined;
         this.open = undefined;
         this.zIndexOverride = undefined;
     }
-    toggleHeight() {
-        this.footerExpanded ? this.expandFooterTl.play() : this.expandFooterTl.reverse();
-    }
     toggleModal() {
         if (this.hasAnimatedIn) {
             this.handleAnimation();
@@ -30,13 +21,12 @@ export class CpslModal {
         this.handleAnimation();
         this.hasAnimatedIn = true;
         mm.add(`(min-width: ${MOBILE_SIZE + 1}px)`, () => {
-            var _a;
-            (_a = this.draggable) === null || _a === void 0 ? void 0 : _a.disable();
             gsap.timeline({}).set(this.modalWrapperEl, { yPercent: 0, scale: this.open ? 1 : 0.8, opacity: this.open ? 1 : 0 });
+            this.isMobile = false;
         });
         mm.add(`(max-width: ${MOBILE_SIZE}px)`, () => {
-            this.initDraggable();
             gsap.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });
+            this.isMobile = true;
         });
         this.hasFooter = this.footerSlotEl.assignedNodes().length >= 1;
         this.footerSlotEl.addEventListener('slotchange', () => {
@@ -57,7 +47,6 @@ export class CpslModal {
                         this.cpslModalEntering.emit();
                     },
                     onComplete: () => {
-                        this.addExpandAnim();
                         this.cpslModalEntered.emit();
                     },
                 })
@@ -75,7 +64,6 @@ export class CpslModal {
                         this.cpslModalEntering.emit();
                     },
                     onComplete: () => {
-                        this.addExpandAnim();
                         this.cpslModalEntered.emit();
                     },
                 })
@@ -125,106 +113,37 @@ export class CpslModal {
             }
         }
     }
-    addExpandAnim() {
-        setTimeout(() => {
-            this.expandFooterTl = gsap
-                .timeline({
-                reversed: true,
-                paused: true,
-                onReverseComplete: () => {
-                    this.contentEl.style.setProperty('height', 'auto');
-                },
-                defaults: {
-                    duration: this.footerTransitionDuration,
-                },
-            })
-                .set(this.footerExpandedEl, { overflow: 'auto', display: 'block' })
-                .set(this.headerExpandedEl, { display: 'block' })
-                .to(this.innerContainerEl, { paddingBottom: '8px' })
-                .to(this.contentEl, { height: '0px', overflow: 'hidden', opacity: 0 }, '<')
-                .to(this.footerEl, { height: '0px', overflow: 'hidden', opacity: 0 }, '<')
-                .to(this.footerExpandedEl, { height: 'auto', opacity: 1 }, '<')
-                .to(this.headerExpandedEl, { height: 'auto', opacity: 1 }, '<');
-        }, 10);
-    }
-    initDraggable() {
-        this.draggable = Draggable.create(this.modalContainerEl, {
-            trigger: this.headerEl,
-            dragClickables: false,
-            type: 'y',
-            edgeResistance: 0.2,
-            liveSnap: {
-                y: function (y) {
-                    if (y < 0)
-                        return 0; // Restricts dragging to down
-                    return y;
-                },
-            },
-            onDrag: () => {
-                const y = gsap.utils.mapRange(0, this.getDraggableHeight(), 1, 0, this.draggable.y);
-                gsap.set(this.overlayEl, { opacity: y });
-            },
-            onDragEnd: () => {
-                if (this.draggable.y > 60) {
-                    this.cpslModalRequestClose.emit();
-                }
-                else {
-                    gsap.set(this.overlayEl, { opacity: 1 });
-                    gsap.set(this.modalWrapperEl, { yPercent: -100 });
-                    gsap.set(this.modalContainerEl, { y: 0 });
-                }
-            },
-        })[0];
-    }
     get footerEl() {
         return this.el.shadowRoot.getElementById('modal-footer');
     }
-    get footerExpandedEl() {
-        return this.el.shadowRoot.getElementById('modal-footer-expanded');
-    }
-    get headerExpandedEl() {
-        return this.el.shadowRoot.getElementById('modal-header-expanded');
-    }
-    get innerContainerEl() {
-        return this.el.shadowRoot.getElementById('modal-inner-container');
-    }
-    get contentEl() {
-        return this.el.shadowRoot.getElementById('modal-content');
-    }
     get modalWrapperEl() {
         return this.el.shadowRoot.getElementById('modal-wrapper');
     }
     get modalContainerEl() {
         return this.el.shadowRoot.getElementById('modal-container');
     }
-    get overlayEl() {
-        return this.el.shadowRoot.getElementById('overlay');
-    }
     get footerSlotEl() {
         return this.footerEl.querySelectorAll('slot')[0];
     }
-    get headerEl() {
-        return this.el.shadowRoot.getElementById('modal-header');
-    }
     get Modal() {
-        return (h("div", { class: { 'modal-container': true, 'no-footer': !this.hasFooter }, part: "modal-container", id: "modal-container" }, h("slot", null), h("div", { id: "modal-inner-container", class: { 'modal-inner-container': true, 'no-footer': !this.hasFooter }, part: "modal-inner-container" }, h("div", { id: "modal-content", part: "modal-content" }, h("div", { id: "modal-header", class: "modal-header", part: "modal-header" }, h("slot", { name: "header" })), h("div", { id: "modal-body", class: "modal-body", part: "modal-body" }, h("slot", { name: "body" }))), h("div", { id: "modal-header-expanded", class: { 'modal-header': true, 'expanded': true, 'no-opacity': true }, part: "modal-header-expanded" }, h("slot", { name: "footerExpandedHeader" }))), h("div", { id: "modal-footer", part: "modal-footer" }, h("slot", { name: "footer" })), h("div", { id: "modal-footer-expanded", class: { 'expanded': true, 'no-opacity': true }, part: "modal-footer-expanded" }, h("slot", { name: "footerExpandedFooter" }))));
+        return (h("div", { class: { 'modal-container': true, 'no-footer': !this.hasFooter }, part: "modal-container", id: "modal-container" }, h("cpsl-card", { id: "modal-body-card", class: { 'modal-body-card': true }, part: "modal-body-card" }, h("slot", { name: "body" }), this.isMobile && (h("div", { class: "mobile-footer" }, h("slot", { name: "footer" })))), h("cpsl-card", { id: "modal-footer", part: "modal-footer", class: { 'footer-hidden': !this.hasFooter, 'modal-body-card': true }, style: { display: !this.isMobile ? 'block' : 'none' } }, h("slot", { name: "footer" }))));
     }
     render() {
         if (this.noOverlay) {
-            return (h(Host, { style: Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {}, class: "no-overlay" }, this.Modal));
+            return (h(Host, { style: this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {}, class: "no-overlay" }, this.Modal));
         }
-        return (h(Host, { style: Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {}, class: { 'include-mobile-styling': true } }, h("cpsl-overlay", { zIndexOverride: Boolean(this.zIndexOverride) ? this.zIndexOverride : undefined, id: "overlay", open: this.open, enterTransitionDuration: this.enterTransitionDuration, exitTransitionDuration: this.exitTransitionDuration }), h("div", { id: "modal-wrapper", class: "modal-wrapper" }, this.Modal)));
+        return (h(Host, { style: this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {}, class: { 'include-mobile-styling': true } }, h("cpsl-overlay", { zIndexOverride: this.zIndexOverride ? this.zIndexOverride : undefined, id: "overlay", open: this.open, enterTransitionDuration: this.enterTransitionDuration, exitTransitionDuration: this.exitTransitionDuration }), h("div", { id: "modal-wrapper", class: "modal-wrapper" }, this.Modal)));
     }
-    static get is() { return "cpsl-modal"; }
+    static get is() { return "cpsl-auth-modal"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["cpsl-modal.scss"]
+            "$": ["cpsl-auth-modal.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["cpsl-modal.css"]
+            "$": ["cpsl-auth-modal.css"]
         };
     }
     static get properties() {
@@ -265,41 +184,6 @@ export class CpslModal {
                 "reflect": false,
                 "defaultValue": "0.15"
             },
-            "footerExpanded": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether or not to show `footerExpandedFooter` and `footerExpandedHeader` slots."
-                },
-                "attribute": "footer-expanded",
-                "reflect": false
-            },
-            "footerTransitionDuration": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Duration in seconds of the footer expansion animation.\nDefault is 0.15."
-                },
-                "attribute": "footer-transition-duration",
-                "reflect": false,
-                "defaultValue": "0.15"
-            },
             "noOverlay": {
                 "type": "boolean",
                 "mutable": false,
@@ -355,7 +239,8 @@ export class CpslModal {
     }
     static get states() {
         return {
-            "hasFooter": {}
+            "hasFooter": {},
+            "isMobile": {}
         };
     }
     static get events() {
@@ -439,12 +324,9 @@ export class CpslModal {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
-                "propName": "footerExpanded",
-                "methodName": "toggleHeight"
-            }, {
                 "propName": "open",
                 "methodName": "toggleModal"
             }];
     }
 }
-//# sourceMappingURL=cpsl-modal.js.map
+//# sourceMappingURL=cpsl-auth-modal.js.map

package/dist/collection/components/cpsl-auth-modal/cpsl-auth-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-auth-modal.js","sourceRoot":"","sources":["../../../../src/components/cpsl-auth-modal/cpsl-auth-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, Watch, h, Event, EventEmitter } from '@stencil/core';\nimport gsap from 'gsap';\nimport { MOBILE_SIZE } from '../../constants';\n\nconst mm = gsap.matchMedia();\n@Component({\n  tag: 'cpsl-auth-modal',\n  styleUrl: 'cpsl-auth-modal.scss',\n  shadow: true,\n})\nexport class CpslAuthModal {\n  private hasAnimatedIn: boolean;\n\n  @Element() el!: HTMLCpslAuthModalElement;\n\n  @State() hasFooter: boolean;\n  @State() isMobile: boolean;\n\n  /**\n   * Duration in seconds of the modal entering.\n   * Default is .15.\n   */\n  @Prop() enterTransitionDuration?: number = 0.15;\n\n  /**\n   * Duration in seconds of the modal exiting.\n   * Default is .15.\n   */\n  @Prop() exitTransitionDuration?: number = 0.15;\n\n  /**\n   * Whether or not to show the overlay. This will always show the modal, regardless of the value of `open`.\n   */\n  @Prop() noOverlay?: boolean;\n\n  /**\n   * Whether or not to show the modal.\n   */\n  @Prop() open: boolean;\n\n  /**\n   * Emitted when enter animation starts.\n   */\n  @Event() cpslModalEntering!: EventEmitter<null>;\n\n  /**\n   * Emitted when enter animation finishes.\n   */\n  @Event() cpslModalEntered!: EventEmitter<null>;\n\n  /**\n   * Emitted when exit animation starts.\n   */\n  @Event() cpslModalExiting!: EventEmitter<null>;\n\n  /**\n   * Emitted when exit animation finishes.\n   */\n  @Event() cpslModalExited!: EventEmitter<null>;\n\n  /**\n   * Emitted when exit animation finishes.\n   */\n  @Event() cpslModalRequestClose!: EventEmitter<null>;\n\n  /**\n   * Override z-index.\n   */\n  @Prop() zIndexOverride?: number;\n\n  @Watch('open')\n  toggleModal() {\n    if (this.hasAnimatedIn) {\n      this.handleAnimation();\n    }\n  }\n\n  componentDidLoad() {\n    this.handleAnimation();\n    this.hasAnimatedIn = true;\n\n    mm.add(`(min-width: ${MOBILE_SIZE + 1}px)`, () => {\n      gsap.timeline({}).set(this.modalWrapperEl, { yPercent: 0, scale: this.open ? 1 : 0.8, opacity: this.open ? 1 : 0 });\n      this.isMobile = false;\n    });\n    mm.add(`(max-width: ${MOBILE_SIZE}px)`, () => {\n      gsap.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });\n      this.isMobile = true;\n    });\n\n    this.hasFooter = this.footerSlotEl.assignedNodes().length >= 1;\n    this.footerSlotEl.addEventListener('slotchange', () => {\n      if (this.footerSlotEl.assignedNodes().length >= 1) {\n        this.hasFooter = true;\n      } else {\n        this.hasFooter = false;\n      }\n    });\n  }\n\n  private handleAnimation() {\n    if (this.open) {\n      if (window.innerWidth >= MOBILE_SIZE + 1) {\n        gsap\n          .timeline({\n            onStart: () => {\n              this.cpslModalEntering.emit();\n            },\n            onComplete: () => {\n              this.cpslModalEntered.emit();\n            },\n          })\n          .set(this.modalWrapperEl, { display: 'flex', yPercent: 0 })\n          .to(this.modalWrapperEl, {\n            scale: 1,\n            opacity: 1,\n            duration: this.enterTransitionDuration,\n          });\n      } else {\n        gsap\n          .timeline({\n            onStart: () => {\n              this.cpslModalEntering.emit();\n            },\n            onComplete: () => {\n              this.cpslModalEntered.emit();\n            },\n          })\n          .set(this.modalWrapperEl, { display: 'flex', scale: 1, opacity: 1 })\n          .to(this.modalWrapperEl, {\n            yPercent: -100,\n            duration: this.enterTransitionDuration,\n          });\n      }\n    } else {\n      if (window.innerWidth >= MOBILE_SIZE + 1) {\n        gsap\n          .timeline({\n            onStart: () => {\n              this.cpslModalExiting.emit();\n            },\n            onComplete: () => {\n              this.cpslModalExited.emit();\n              this.modalWrapperEl?.style.setProperty('display', 'none');\n            },\n          })\n          .to(this.modalWrapperEl, {\n            scale: 0.8,\n            opacity: 0,\n            duration: this.exitTransitionDuration,\n          });\n      } else {\n        gsap\n          .timeline({\n            onStart: () => {\n              this.cpslModalExiting.emit();\n            },\n            onComplete: () => {\n              this.cpslModalExited.emit();\n              this.modalWrapperEl?.style.setProperty('display', 'none');\n            },\n          })\n          .to(this.modalWrapperEl, {\n            yPercent: 0,\n            duration: this.exitTransitionDuration,\n          })\n          .set(this.modalContainerEl, { y: 0 });\n      }\n    }\n  }\n\n  private get footerEl() {\n    return this.el.shadowRoot.getElementById('modal-footer');\n  }\n\n  private get modalWrapperEl() {\n    return this.el.shadowRoot.getElementById('modal-wrapper');\n  }\n\n  private get modalContainerEl() {\n    return this.el.shadowRoot.getElementById('modal-container');\n  }\n\n  private get footerSlotEl() {\n    return this.footerEl.querySelectorAll('slot')[0];\n  }\n\n  private get Modal() {\n    return (\n      <div class={{ 'modal-container': true, 'no-footer': !this.hasFooter }} part=\"modal-container\" id=\"modal-container\">\n        <cpsl-card id=\"modal-body-card\" class={{ 'modal-body-card': true }} part=\"modal-body-card\">\n          <slot name=\"body\"></slot>\n          {this.isMobile && (\n            <div class=\"mobile-footer\">\n              <slot name=\"footer\"></slot>\n            </div>\n          )}\n        </cpsl-card>\n        <cpsl-card\n          id=\"modal-footer\"\n          part=\"modal-footer\"\n          class={{ 'footer-hidden': !this.hasFooter, 'modal-body-card': true }}\n          style={{ display: !this.isMobile ? 'block' : 'none' }}\n        >\n          <slot name=\"footer\"></slot>\n        </cpsl-card>\n      </div>\n    );\n  }\n\n  render() {\n    if (this.noOverlay) {\n      return (\n        <Host style={this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {}} class=\"no-overlay\">\n          {this.Modal}\n        </Host>\n      );\n    }\n\n    return (\n      <Host style={this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {}} class={{ 'include-mobile-styling': true }}>\n        <cpsl-overlay\n          zIndexOverride={this.zIndexOverride ? this.zIndexOverride : undefined}\n          id=\"overlay\"\n          open={this.open}\n          enterTransitionDuration={this.enterTransitionDuration}\n          exitTransitionDuration={this.exitTransitionDuration}\n        />\n        <div id=\"modal-wrapper\" class=\"modal-wrapper\">\n          {this.Modal}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-button/cpsl-button.css

@@ -101,6 +101,22 @@
   --button-secondary-active-background-color: var(--cpsl-color-secondary-button-surface-pressed);
   --button-secondary-active-border-color: var(--cpsl-color-secondary-button-border-default);
   --button-secondary-active-icon-color: var(--cpsl-color-secondary-button-text);
+  --button-tertiary-color: var(--cpsl-color-tertiary-button-text);
+  --button-tertiary-background-color: var(--cpsl-color-tertiary-button-surface-default);
+  --button-tertiary-border-color: var(--cpsl-color-tertiary-button-border-default);
+  --button-tertiary-icon-color: var(--cpsl-color-tertiary-button-text);
+  --button-tertiary-disabled-color: var(--cpsl-color-text-disabled);
+  --button-tertiary-disabled-background-color: var(--cpsl-color-tertiary-button-surface-disabled);
+  --button-tertiary-disabled-border-color: var(--cpsl-color-tertiary-button-border-disabled);
+  --button-tertiary-disabled-icon-color: var(--cpsl-color-tertiary-button-text);
+  --button-tertiary-hover-color: var(--cpsl-color-tertiary-button-text);
+  --button-tertiary-hover-background-color: var(--cpsl-color-tertiary-button-surface-hover);
+  --button-tertiary-hover-border-color: var(--cpsl-color-tertiary-button-surface-hover);
+  --button-tertiary-hover-icon-color: var(--cpsl-color-tertiary-button-text);
+  --button-tertiary-active-color: var(--cpsl-color-tertiary-button-text);
+  --button-tertiary-active-background-color: var(--cpsl-color-tertiary-button-surface-pressed);
+  --button-tertiary-active-border-color: var(--cpsl-color-tertiary-button-surface-pressed);
+  --button-tertiary-active-icon-color: var(--cpsl-color-tertiary-button-text);
   --button-ghost-color: var(--cpsl-color-ghost-button-default);
   --button-ghost-disabled-color: var(--cpsl-color-ghost-button-disabled);
   --button-ghost-hover-color: var(--cpsl-color-ghost-button-hover);
@@ -151,6 +167,11 @@
   --button-padding-bottom: 13px;
 }
 
+:host(.small.tertiary) {
+  --button-padding-top: 13px;
+  --button-padding-bottom: 13px;
+}
+
 :host(.medium) {
   --button-font-size: var(--cpsl-font-size-body-m);
   --button-padding-top: 14px;
@@ -161,12 +182,21 @@
   --button-padding-top: 15px;
   --button-padding-bottom: 15px;
 }
+:host(.medium) :host(.tertiary) {
+  --button-padding-top: 15px;
+  --button-padding-bottom: 15px;
+}
 
 :host(.medium.primary) {
   --button-padding-top: 15px;
   --button-padding-bottom: 15px;
 }
 
+:host(.medium.tertiary) {
+  --button-padding-top: 15px;
+  --button-padding-bottom: 15px;
+}
+
 :host(.disabled) {
   cursor: default;
   pointer-events: none;
@@ -198,6 +228,9 @@
 :host(.primary):host(.disabled) ::slotted(cpsl-icon) {
   --icon-color: var(--button-primary-disabled-icon-color);
 }
+:host(.primary):host(.disabled) ::slotted(cpsl-spinner) {
+  --background-color: var(--button-primary-disabled-background-color);
+}
 :host(.primary) :not(.disabled):hover {
   --button-color: var(--button-primary-hover-color);
   --button-background-color: var(--button-primary-hover-background-color);
@@ -236,6 +269,9 @@
 :host(.secondary):host(.disabled) ::slotted(cpsl-icon) {
   --icon-color: var(--button-secondary-disabled-icon-color);
 }
+:host(.secondary):host(.disabled) ::slotted(cpsl-spinner) {
+  --background-color: var(--button-secondary-disabled-icon-color);
+}
 :host(.secondary) :not(.disabled):hover {
   --button-color: var(--button-secondary-hover-color);
   --button-border-color: var(--button-secondary-hover-border-color);
@@ -256,6 +292,50 @@
   --button-outline-color: var(--cpsl-color-secondary-button-outline);
 }
 
+:host(.tertiary) {
+  --button-border-radius: var(--cpsl-border-radius-tertiary-button);
+  --button-color: var(--button-tertiary-color);
+  --button-background-color: var(--button-tertiary-background-color);
+  --button-border-color: var(--button-tertiary-border-color);
+  --button-padding-start: 17px;
+  --button-padding-end: 17px;
+  --button-border-width: 0px;
+}
+:host(.tertiary) ::slotted(cpsl-icon) {
+  --icon-color: var(--button-tertiary-icon-color);
+}
+:host(.tertiary):host(.disabled) {
+  --button-color: var(--button-tertiary-disabled-color);
+  --button-background-color: var(--button-tertiary-disabled-background-color);
+  --button-border-color: var(--button-tertiary-disabled-border-color);
+  --button-outline-color: transparent;
+}
+:host(.tertiary):host(.disabled) ::slotted(cpsl-icon) {
+  --icon-color: var(--button-tertiary-disabled-icon-color);
+}
+:host(.tertiary):host(.disabled) ::slotted(cpsl-spinner) {
+  --background-color: var(--button-tertiary-disabled-icon-color);
+}
+:host(.tertiary) :not(.disabled):hover {
+  --button-color: var(--button-tertiary-hover-color);
+  --button-background-color: var(--button-tertiary-hover-background-color);
+  --button-border-color: var(--button-tertiary-hover-border-color);
+}
+:host(.tertiary) :not(.disabled):hover ::slotted(cpsl-icon) {
+  --icon-color: var(--button-tertiary-hover-icon-color);
+}
+:host(.tertiary) :not(.disabled):active {
+  --button-color: var(--button-tertiary-active-color);
+  --button-background-color: var(--button-tertiary-active-background-color);
+  --button-border-color: var(--button-tertiary-active-border-color);
+}
+:host(.tertiary) :not(.disabled):active ::slotted(cpsl-icon) {
+  --icon-color: var(--button-tertiary-active-icon-color);
+}
+:host(.tertiary) :not(.disabled):focus-visible {
+  --button-outline-color: var(--cpsl-color-tertiary-button-outline);
+}
+
 :host(.ghost) {
   --button-color: var(--button-ghost-color);
   --button-background-color: transparent;
@@ -269,8 +349,6 @@
 }
 :host(.ghost) ::slotted(cpsl-icon) {
   --icon-color: var(--button-ghost-color);
-  --height: var(--cpsl-font-size-body-xl);
-  --width: var(--cpsl-font-size-body-xl);
 }
 :host(.ghost):host(.disabled) {
   --button-color: var(--button-ghost-disabled-color);
@@ -278,6 +356,9 @@
 :host(.ghost):host(.disabled) ::slotted(cpsl-icon) {
   --icon-color: var(--button-ghost-disabled-color);
 }
+:host(.ghost):host(.disabled) ::slotted(cpsl-spinner) {
+  --background-color: var(--button-ghost-disabled-color);
+}
 :host(.ghost) :not(.disabled):hover {
   --button-color: var(--button-ghost-hover-color);
 }
@@ -379,4 +460,10 @@
 
 :host ::slotted(cpsl-text) {
   color: var(--button-color);
+}
+:host ::slotted(cpsl-icon-group) {
+  --container-border-color: var(--button-background-color);
+}
+:host ::slotted(cpsl-spinner) {
+  --background-color: var(--button-background-color);
 }

package/dist/collection/components/cpsl-button/cpsl-button.js

@@ -10,10 +10,11 @@ export class CpslButton {
         this.variant = 'primary';
     }
     render() {
-        return (h(Host, { key: '554350e7af597bd14c9584f9924f73e04fe44093', class: {
+        return (h(Host, { key: '7411754a763990dcbef83edbef353ebf3066f71d', class: {
                 // VARIANTS
                 'primary': this.variant === 'primary',
                 'secondary': this.variant === 'secondary',
+                'tertiary': this.variant === 'tertiary',
                 'ghost': this.variant === 'ghost',
                 'destructive': this.variant === 'destructive',
                 // STATE
@@ -22,7 +23,7 @@ export class CpslButton {
                 // SIZES
                 'small': this.size === 'small',
                 'medium': this.size === 'medium',
-            } }, h(this.as, { key: '20b6865c03e312d263c523f681bb775d8626fc9c', href: this.href, target: this.target, part: "button-native", class: "button-native" }, h("slot", { key: '4ee8d68b06ce21288e63bfcff9aa186908b89af2', name: "start" }), h("slot", { key: '9c0a5f0daa64c75886d03fb830739c8f8cfb65d9' }), h("slot", { key: 'cf9addee55b0a0d8f487313c972d7b48d6f8c75c', name: "end" }))));
+            } }, h(this.as, { key: '1c49c08c3ea7a105ce6c69302e2adc2bc6a443eb', href: this.href, target: this.target, part: "button-native", class: "button-native" }, h("slot", { key: '5ef09afd70e95c9c596c46d84a8d3410a8eba2a9', name: "start" }), h("slot", { key: 'f055ad44f74ca07a612c967432714c00e4b56ba9' }), h("slot", { key: '2a53e40d635b3de4441aed9005b4bb13d42e9d04', name: "end" }))));
     }
     static get is() { return "cpsl-button"; }
     static get encapsulation() { return "shadow"; }
@@ -148,15 +149,15 @@ export class CpslButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary' | 'ghost' | 'destructive'",
-                    "resolved": "\"destructive\" | \"ghost\" | \"primary\" | \"secondary\"",
+                    "original": "'primary' | 'secondary' | 'tertiary' | 'ghost' | 'destructive'",
+                    "resolved": "\"destructive\" | \"ghost\" | \"primary\" | \"secondary\" | \"tertiary\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The variant of the button.\nOptions are: `\"primary\"`, `\"secondary\", `\"icon\", `\"text\"`.\nDefault is: `\"primary\"`."
+                    "text": "The variant of the button.\nOptions are: `\"primary\"`, `\"secondary\", `\"tertiary\", `\"ghost\"`, `\"destructive\"`.\nDefault is: `\"primary\"`."
                 },
                 "attribute": "variant",
                 "reflect": true,

package/dist/collection/components/cpsl-button/cpsl-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"cpsl-button.js","sourceRoot":"","sources":["../../../../src/components/cpsl-button/cpsl-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,UAAU;;kBAMS,QAAQ;wBAMQ,KAAK;yBAMrB,KAAK;;oBAYC,QAAQ;;uBAY2C,SAAS;;IAEhG,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,WAAW;gBACX,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACrC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;gBACzC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBACjC,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,aAAa;gBAC7C,QAAQ;gBACR,UAAU,EAAE,IAAI,CAAC,QAAQ;gBACzB,YAAY,EAAE,IAAI,CAAC,SAAS;gBAC5B,QAAQ;gBACR,OAAO,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBAC9B,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;aACjC;YAED,EAAC,IAAI,CAAC,EAAE,qDAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAC,eAAe,EAAC,KAAK,EAAC,eAAe;gBACvF,6DAAM,IAAI,EAAC,OAAO,GAAQ;gBAC1B,8DAAa;gBACb,6DAAM,IAAI,EAAC,KAAK,GAAQ,CAChB,CACL,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-button',\n  styleUrl: 'cpsl-button.scss',\n  shadow: true,\n})\nexport class CpslButton {\n  /**\n   * The tag for the button.\n   * Options are: `\"button\"`, `\"a\".\n   * Default is: `\"button\"`.\n   */\n  @Prop() as?: 'button' | 'a' = 'button';\n\n  /**\n   * If the button is disabled.\n   * Default is: false.\n   */\n  @Prop({ reflect: true }) disabled?: boolean = false;\n\n  /**\n   * Whether the button takes the full width of it's container.\n   * Default is: false.\n   */\n  @Prop() fullWidth?: boolean = false;\n\n  /**\n   * href to use when using a link.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The size of the button.\n   * Options are: `\"small\"`, `\"medium\".\n   * Default is: `\"medium\"`.\n   */\n  @Prop() size?: 'small' | 'medium' = 'medium';\n\n  /**\n   * target to use when using a link.\n   */\n  @Prop() target?: string;\n\n  /**\n   * The variant of the button.\n   * Options are: `\"primary\"`, `\"secondary\", `\"icon\", `\"text\"`.\n   * Default is: `\"primary\"`.\n   */\n  @Prop({ reflect: true }) variant?: 'primary' | 'secondary' | 'ghost' | 'destructive' = 'primary';\n\n  render() {\n    return (\n      <Host\n        class={{\n          // VARIANTS\n          'primary': this.variant === 'primary',\n          'secondary': this.variant === 'secondary',\n          'ghost': this.variant === 'ghost',\n          'destructive': this.variant === 'destructive',\n          // STATE\n          'disabled': this.disabled,\n          'full-width': this.fullWidth,\n          // SIZES\n          'small': this.size === 'small',\n          'medium': this.size === 'medium',\n        }}\n      >\n        <this.as href={this.href} target={this.target} part=\"button-native\" class=\"button-native\">\n          <slot name=\"start\"></slot>\n          <slot></slot>\n          <slot name=\"end\"></slot>\n        </this.as>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cpsl-button.js","sourceRoot":"","sources":["../../../../src/components/cpsl-button/cpsl-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,UAAU;;kBAMS,QAAQ;wBAMQ,KAAK;yBAMrB,KAAK;;oBAYC,QAAQ;;uBAYwD,SAAS;;IAE7G,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,WAAW;gBACX,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACrC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;gBACzC,UAAU,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACvC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBACjC,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,aAAa;gBAC7C,QAAQ;gBACR,UAAU,EAAE,IAAI,CAAC,QAAQ;gBACzB,YAAY,EAAE,IAAI,CAAC,SAAS;gBAC5B,QAAQ;gBACR,OAAO,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBAC9B,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;aACjC;YAED,EAAC,IAAI,CAAC,EAAE,qDAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAC,eAAe,EAAC,KAAK,EAAC,eAAe;gBACvF,6DAAM,IAAI,EAAC,OAAO,GAAQ;gBAC1B,8DAAa;gBACb,6DAAM,IAAI,EAAC,KAAK,GAAQ,CAChB,CACL,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-button',\n  styleUrl: 'cpsl-button.scss',\n  shadow: true,\n})\nexport class CpslButton {\n  /**\n   * The tag for the button.\n   * Options are: `\"button\"`, `\"a\".\n   * Default is: `\"button\"`.\n   */\n  @Prop() as?: 'button' | 'a' = 'button';\n\n  /**\n   * If the button is disabled.\n   * Default is: false.\n   */\n  @Prop({ reflect: true }) disabled?: boolean = false;\n\n  /**\n   * Whether the button takes the full width of it's container.\n   * Default is: false.\n   */\n  @Prop() fullWidth?: boolean = false;\n\n  /**\n   * href to use when using a link.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The size of the button.\n   * Options are: `\"small\"`, `\"medium\".\n   * Default is: `\"medium\"`.\n   */\n  @Prop() size?: 'small' | 'medium' = 'medium';\n\n  /**\n   * target to use when using a link.\n   */\n  @Prop() target?: string;\n\n  /**\n   * The variant of the button.\n   * Options are: `\"primary\"`, `\"secondary\", `\"tertiary\", `\"ghost\"`, `\"destructive\"`.\n   * Default is: `\"primary\"`.\n   */\n  @Prop({ reflect: true }) variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'destructive' = 'primary';\n\n  render() {\n    return (\n      <Host\n        class={{\n          // VARIANTS\n          'primary': this.variant === 'primary',\n          'secondary': this.variant === 'secondary',\n          'tertiary': this.variant === 'tertiary',\n          'ghost': this.variant === 'ghost',\n          'destructive': this.variant === 'destructive',\n          // STATE\n          'disabled': this.disabled,\n          'full-width': this.fullWidth,\n          // SIZES\n          'small': this.size === 'small',\n          'medium': this.size === 'medium',\n        }}\n      >\n        <this.as href={this.href} target={this.target} part=\"button-native\" class=\"button-native\">\n          <slot name=\"start\"></slot>\n          <slot></slot>\n          <slot name=\"end\"></slot>\n        </this.as>\n      </Host>\n    );\n  }\n}\n"]}