@usecapsule/core-components 1.0.11 → 1.0.13-dev.0

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

@@ -1,28 +1,169 @@
 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 {
     constructor() {
-        this.noFooter = undefined;
+        this.getDraggableHeight = () => {
+            return this.innerContainerEl.clientHeight;
+        };
+        this.hasFooter = undefined;
+        this.enterTransitionDuration = 0.15;
+        this.exitTransitionDuration = 0.15;
         this.footerExpanded = undefined;
-        this.transitionDuration = 0.5;
+        this.footerTransitionDuration = 0.15;
+        this.noOverlay = undefined;
+        this.open = undefined;
     }
     toggleHeight() {
         this.footerExpanded ? this.expandFooterTl.play() : this.expandFooterTl.reverse();
     }
-    componentDidLoad() {
-        if (!Boolean(this.el.querySelector('[slot="footer"]'))) {
-            this.noFooter = true;
+    toggleModal() {
+        if (this.open) {
+            if (window.innerWidth >= MOBILE_SIZE + 1) {
+                gsap
+                    .timeline({
+                    onStart: () => {
+                        this.cpslModalEntering.emit();
+                    },
+                    onComplete: () => {
+                        this.addExpandAnim();
+                        this.cpslModalEntered.emit();
+                    },
+                })
+                    .set(this.modalWrapperEl, { display: 'flex', yPercent: 0 })
+                    .to(this.modalWrapperEl, {
+                    scale: 1,
+                    opacity: 1,
+                    duration: this.enterTransitionDuration,
+                });
+            }
+            else {
+                gsap
+                    .timeline({
+                    onStart: () => {
+                        this.cpslModalEntering.emit();
+                    },
+                    onComplete: () => {
+                        this.addExpandAnim();
+                        this.cpslModalEntered.emit();
+                    },
+                })
+                    .set(this.modalWrapperEl, { display: 'flex', scale: 1, opacity: 1 })
+                    .to(this.modalWrapperEl, {
+                    yPercent: -100,
+                    duration: this.enterTransitionDuration,
+                });
+            }
+        }
+        else {
+            if (window.innerWidth >= MOBILE_SIZE + 1) {
+                gsap
+                    .timeline({
+                    onStart: () => {
+                        this.cpslModalExiting.emit();
+                    },
+                    onComplete: () => {
+                        this.cpslModalExited.emit();
+                        this.modalWrapperEl.style.setProperty('display', 'none');
+                    },
+                })
+                    .to(this.modalWrapperEl, {
+                    scale: 0.8,
+                    opacity: 0,
+                    duration: this.exitTransitionDuration,
+                });
+            }
+            else {
+                gsap
+                    .timeline({
+                    onStart: () => {
+                        this.cpslModalExiting.emit();
+                    },
+                    onComplete: () => {
+                        this.cpslModalExited.emit();
+                        this.modalWrapperEl.style.setProperty('display', 'none');
+                    },
+                })
+                    .to(this.modalWrapperEl, {
+                    yPercent: 0,
+                    duration: this.exitTransitionDuration,
+                })
+                    .set(this.modalContainerEl, { y: 0 });
+            }
         }
-        this.expandFooterTl = gsap
-            .timeline({ reversed: true, paused: true })
-            .to(this.bodyEl, { height: '0px', duration: this.transitionDuration })
-            .to(this.footerEl, { height: '0px', duration: this.transitionDuration }, '<')
-            .to(this.footerExpandedEl, { height: 'auto', duration: this.transitionDuration }, '<')
-            .to(this.headerEl, { height: '0px', duration: this.transitionDuration }, '<')
-            .to(this.headerExpandedEl, { height: 'auto', duration: this.transitionDuration }, '<');
     }
-    get bodyEl() {
-        return this.el.shadowRoot.getElementById('modal-body');
+    componentDidLoad() {
+        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 });
+        });
+        mm.add(`(max-width: ${MOBILE_SIZE}px)`, () => {
+            this.initDraggable();
+            gsap.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });
+        });
+        this.footerSlotEl.addEventListener('slotchange', () => {
+            if (this.footerSlotEl.assignedNodes().length >= 1) {
+                this.hasFooter = true;
+            }
+            else {
+                this.hasFooter = false;
+            }
+        });
+    }
+    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;
+                    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');
@@ -30,14 +171,39 @@ export class CpslModal {
     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 headerExpandedEl() {
-        return this.el.shadowRoot.getElementById('modal-header-expanded');
+    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" }, h("slot", { name: "header" })), h("slot", { name: "body" })), h("div", { id: "modal-header-expanded", class: { 'modal-header': true, 'expanded': true, 'no-opacity': true } }, h("slot", { name: "footerExpandedHeader" }))), h("div", { id: "modal-footer" }, h("slot", { name: "footer" })), h("div", { id: "modal-footer-expanded", class: { 'expanded': true, 'no-opacity': true } }, h("slot", { name: "footerExpandedFooter" }))));
     }
     render() {
-        return (h(Host, { key: 'aa5c26013878e80fe58a2826d4cae04db88dace3' }, h("div", { key: '5deda08b40a3e034e1c1b412eb7ab0c7780b4f53', class: { 'modal-container': true, 'no-footer': this.noFooter } }, h("div", { key: '6f5340b60ded651410a3eec83ecca3ee0e24f643', class: { 'modal-inner-container': true, 'no-footer': this.noFooter } }, h("div", { key: '632ecd039ac402971cd3f15efb30fc527402f0cd', id: "modal-header", class: "no-overflow" }, h("slot", { key: 'af0d35f477ff94d7f65b3bd81b845819ba8c8439', name: "header" })), h("div", { key: '6116bba4b65cebb91fd283106a58915216e5d828', id: "modal-header-expanded", class: { 'expanded': true, 'no-overflow': true } }, h("slot", { key: 'd7cd88d70a15e2a02bc590422913c481f0b61a2e', name: "footerExpandedHeader" })), h("div", { key: '72e1ede4c4754526c83f2723d322717d8888bf6d', id: "modal-body", class: "no-overflow" }, h("slot", { key: '66c63bb06b6b4ccce422855ecb483ab42ca6e27e', name: "body" }))), h("div", { key: 'fec82340b95072a6d3167fda064082005f760661', id: "modal-footer", class: "no-overflow" }, h("slot", { key: 'bcd91a6cf6ef753e4b0fbb163e93984a9afa15ca', name: "footer" })), h("div", { key: 'a39a058058adedb6494c307729823467d6c45df7', id: "modal-footer-expanded", class: { 'expanded': true, 'no-overflow': true } }, h("slot", { key: 'd5f0d390de50e0706358bd033655047c742298e2', name: "footerExpandedFooter" })))));
+        if (this.noOverlay) {
+            this.addExpandAnim();
+            return h(Host, null, this.Modal);
+        }
+        return (h(Host, { class: { 'include-mobile-styling': true } }, h("cpsl-overlay", { 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 encapsulation() { return "shadow"; }
@@ -53,6 +219,42 @@ export class CpslModal {
     }
     static get properties() {
         return {
+            "enterTransitionDuration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Duration in seconds of the modal entering.\nDefault is .15."
+                },
+                "attribute": "enter-transition-duration",
+                "reflect": false,
+                "defaultValue": "0.15"
+            },
+            "exitTransitionDuration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Duration in seconds of the modal exiting.\nDefault is .15."
+                },
+                "attribute": "exit-transition-duration",
+                "reflect": false,
+                "defaultValue": "0.15"
+            },
             "footerExpanded": {
                 "type": "boolean",
                 "mutable": false,
@@ -62,7 +264,7 @@ export class CpslModal {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Whether or not to show `footerExpandedFooter` and `footerExpandedHeader` slots."
@@ -70,7 +272,7 @@ export class CpslModal {
                 "attribute": "footer-expanded",
                 "reflect": false
             },
-            "transitionDuration": {
+            "footerTransitionDuration": {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
@@ -79,27 +281,142 @@ export class CpslModal {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Duration in seconds of the footer expansion animation.\nDefault is .5."
+                    "text": "Duration in seconds of the footer expansion animation.\nDefault is 0.15."
                 },
-                "attribute": "transition-duration",
+                "attribute": "footer-transition-duration",
                 "reflect": false,
-                "defaultValue": "0.5"
+                "defaultValue": "0.15"
+            },
+            "noOverlay": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not to show the overlay. This will always show the modal, regardless of the value of `open`."
+                },
+                "attribute": "no-overlay",
+                "reflect": false
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not to show the modal."
+                },
+                "attribute": "open",
+                "reflect": false
             }
         };
     }
     static get states() {
         return {
-            "noFooter": {}
+            "hasFooter": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "cpslModalEntering",
+                "name": "cpslModalEntering",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when enter animation starts."
+                },
+                "complexType": {
+                    "original": "null",
+                    "resolved": "null",
+                    "references": {}
+                }
+            }, {
+                "method": "cpslModalEntered",
+                "name": "cpslModalEntered",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when enter animation finishes."
+                },
+                "complexType": {
+                    "original": "null",
+                    "resolved": "null",
+                    "references": {}
+                }
+            }, {
+                "method": "cpslModalExiting",
+                "name": "cpslModalExiting",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when exit animation starts."
+                },
+                "complexType": {
+                    "original": "null",
+                    "resolved": "null",
+                    "references": {}
+                }
+            }, {
+                "method": "cpslModalExited",
+                "name": "cpslModalExited",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when exit animation finishes."
+                },
+                "complexType": {
+                    "original": "null",
+                    "resolved": "null",
+                    "references": {}
+                }
+            }, {
+                "method": "cpslModalRequestClose",
+                "name": "cpslModalRequestClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when exit animation finishes."
+                },
+                "complexType": {
+                    "original": "null",
+                    "resolved": "null",
+                    "references": {}
+                }
+            }];
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "footerExpanded",
                 "methodName": "toggleHeight"
+            }, {
+                "propName": "open",
+                "methodName": "toggleModal"
             }];
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"cpsl-modal.js","sourceRoot":"","sources":["../../../../src/components/cpsl-modal/cpsl-modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,MAAM,OAAO,SAAS;;;;kCAgBiB,GAAG;;IAGxC,YAAY;QACV,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;IACnF,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC;YACvD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACvB,CAAC;QAED,IAAI,CAAC,cAAc,GAAG,IAAI;aACvB,QAAQ,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;aAC1C,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,kBAAkB,EAAE,CAAC;aACrE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,kBAAkB,EAAE,EAAE,GAAG,CAAC;aAC5E,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,kBAAkB,EAAE,EAAE,GAAG,CAAC;aACrF,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,kBAAkB,EAAE,EAAE,GAAG,CAAC;aAC5E,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,kBAAkB,EAAE,EAAE,GAAG,CAAC,CAAC;IAC3F,CAAC;IAED,IAAY,MAAM;QAChB,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;IACzD,CAAC;IAED,IAAY,QAAQ;QAClB,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IAC3D,CAAC;IAED,IAAY,gBAAgB;QAC1B,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,uBAAuB,CAAC,CAAC;IACpE,CAAC;IAED,IAAY,QAAQ;QAClB,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IAC3D,CAAC;IAED,IAAY,gBAAgB;QAC1B,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,uBAAuB,CAAC,CAAC;IACpE,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,QAAQ,EAAE;gBACjE,4DAAK,KAAK,EAAE,EAAE,uBAAuB,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,QAAQ,EAAE;oBACvE,4DAAK,EAAE,EAAC,cAAc,EAAC,KAAK,EAAC,aAAa;wBACxC,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB;oBACN,4DAAK,EAAE,EAAC,uBAAuB,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE;wBAC9E,6DAAM,IAAI,EAAC,sBAAsB,GAAQ,CACrC;oBACN,4DAAK,EAAE,EAAC,YAAY,EAAC,KAAK,EAAC,aAAa;wBACtC,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CACF;gBACN,4DAAK,EAAE,EAAC,cAAc,EAAC,KAAK,EAAC,aAAa;oBACxC,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB;gBACN,4DAAK,EAAE,EAAC,uBAAuB,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE;oBAC9E,6DAAM,IAAI,EAAC,sBAAsB,GAAQ,CACrC,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport gsap from 'gsap';\n\n@Component({\n  tag: 'cpsl-modal',\n  styleUrl: 'cpsl-modal.scss',\n  shadow: true,\n})\nexport class CpslModal {\n  private expandFooterTl;\n\n  @Element() el!: HTMLCpslModalElement;\n\n  @State() noFooter: boolean;\n\n  /**\n   * Whether or not to show `footerExpandedFooter` and `footerExpandedHeader` slots.\n   */\n  @Prop() footerExpanded: boolean;\n\n  /**\n   * Duration in seconds of the footer expansion animation.\n   * Default is .5.\n   */\n  @Prop() transitionDuration: number = 0.5;\n\n  @Watch('footerExpanded')\n  toggleHeight() {\n    this.footerExpanded ? this.expandFooterTl.play() : this.expandFooterTl.reverse();\n  }\n\n  componentDidLoad() {\n    if (!Boolean(this.el.querySelector('[slot=\"footer\"]'))) {\n      this.noFooter = true;\n    }\n\n    this.expandFooterTl = gsap\n      .timeline({ reversed: true, paused: true })\n      .to(this.bodyEl, { height: '0px', duration: this.transitionDuration })\n      .to(this.footerEl, { height: '0px', duration: this.transitionDuration }, '<')\n      .to(this.footerExpandedEl, { height: 'auto', duration: this.transitionDuration }, '<')\n      .to(this.headerEl, { height: '0px', duration: this.transitionDuration }, '<')\n      .to(this.headerExpandedEl, { height: 'auto', duration: this.transitionDuration }, '<');\n  }\n\n  private get bodyEl() {\n    return this.el.shadowRoot.getElementById('modal-body');\n  }\n\n  private get footerEl() {\n    return this.el.shadowRoot.getElementById('modal-footer');\n  }\n\n  private get footerExpandedEl() {\n    return this.el.shadowRoot.getElementById('modal-footer-expanded');\n  }\n\n  private get headerEl() {\n    return this.el.shadowRoot.getElementById('modal-header');\n  }\n\n  private get headerExpandedEl() {\n    return this.el.shadowRoot.getElementById('modal-header-expanded');\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={{ 'modal-container': true, 'no-footer': this.noFooter }}>\n          <div class={{ 'modal-inner-container': true, 'no-footer': this.noFooter }}>\n            <div id=\"modal-header\" class=\"no-overflow\">\n              <slot name=\"header\"></slot>\n            </div>\n            <div id=\"modal-header-expanded\" class={{ 'expanded': true, 'no-overflow': true }}>\n              <slot name=\"footerExpandedHeader\"></slot>\n            </div>\n            <div id=\"modal-body\" class=\"no-overflow\">\n              <slot name=\"body\"></slot>\n            </div>\n          </div>\n          <div id=\"modal-footer\" class=\"no-overflow\">\n            <slot name=\"footer\"></slot>\n          </div>\n          <div id=\"modal-footer-expanded\" class={{ 'expanded': true, 'no-overflow': true }}>\n            <slot name=\"footerExpandedFooter\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cpsl-modal.js","sourceRoot":"","sources":["../../../../src/components/cpsl-modal/cpsl-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 Draggable from 'gsap/Draggable';\nimport { MOBILE_SIZE } from '../../constants';\n\ngsap.registerPlugin(Draggable);\nconst mm = gsap.matchMedia();\n@Component({\n  tag: 'cpsl-modal',\n  styleUrl: 'cpsl-modal.scss',\n  shadow: true,\n})\nexport class CpslModal {\n  private draggable: Draggable;\n  private expandFooterTl;\n\n  @Element() el!: HTMLCpslModalElement;\n\n  @State() hasFooter: 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 `footerExpandedFooter` and `footerExpandedHeader` slots.\n   */\n  @Prop() footerExpanded?: boolean;\n\n  /**\n   * Duration in seconds of the footer expansion animation.\n   * Default is 0.15.\n   */\n  @Prop() footerTransitionDuration?: 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  @Watch('footerExpanded')\n  toggleHeight() {\n    this.footerExpanded ? this.expandFooterTl.play() : this.expandFooterTl.reverse();\n  }\n\n  @Watch('open')\n  toggleModal() {\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.addExpandAnim();\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.addExpandAnim();\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  componentDidLoad() {\n    mm.add(`(min-width: ${MOBILE_SIZE + 1}px)`, () => {\n      this.draggable?.disable();\n      gsap.timeline({}).set(this.modalWrapperEl, { yPercent: 0, scale: this.open ? 1 : 0.8, opacity: this.open ? 1 : 0 });\n    });\n    mm.add(`(max-width: ${MOBILE_SIZE}px)`, () => {\n      this.initDraggable();\n      gsap.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });\n    });\n\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 addExpandAnim() {\n    setTimeout(() => {\n      this.expandFooterTl = gsap\n        .timeline({\n          reversed: true,\n          paused: true,\n          onReverseComplete: () => {\n            this.contentEl.style.setProperty('height', 'auto');\n          },\n          defaults: {\n            duration: this.footerTransitionDuration,\n          },\n        })\n        .set(this.footerExpandedEl, { overflow: 'auto', display: 'block' })\n        .set(this.headerExpandedEl, { display: 'block' })\n        .to(this.innerContainerEl, { paddingBottom: '8px' })\n        .to(this.contentEl, { height: '0px', overflow: 'hidden', opacity: 0 }, '<')\n        .to(this.footerEl, { height: '0px', overflow: 'hidden', opacity: 0 }, '<')\n        .to(this.footerExpandedEl, { height: 'auto', opacity: 1 }, '<')\n        .to(this.headerExpandedEl, { height: 'auto', opacity: 1 }, '<');\n    }, 10);\n  }\n\n  private getDraggableHeight = () => {\n    return this.innerContainerEl.clientHeight;\n  };\n\n  private initDraggable() {\n    this.draggable = Draggable.create(this.modalContainerEl, {\n      trigger: this.headerEl,\n      dragClickables: false,\n      type: 'y',\n      edgeResistance: 0.2,\n      liveSnap: {\n        y: function (y) {\n          if (y < 0) return 0; // Restricts dragging to down\n          return y;\n        },\n      },\n      onDrag: () => {\n        const y = gsap.utils.mapRange(0, this.getDraggableHeight(), 1, 0, this.draggable.y);\n        gsap.set(this.overlayEl, { opacity: y });\n      },\n      onDragEnd: () => {\n        if (this.draggable.y > 60) {\n          this.cpslModalRequestClose.emit();\n        } else {\n          gsap.set(this.overlayEl, { opacity: 1 });\n          gsap.set(this.modalWrapperEl, { yPercent: -100 });\n          gsap.set(this.modalContainerEl, { y: 0 });\n        }\n      },\n    })[0];\n  }\n\n  private get footerEl() {\n    return this.el.shadowRoot.getElementById('modal-footer');\n  }\n\n  private get footerExpandedEl() {\n    return this.el.shadowRoot.getElementById('modal-footer-expanded');\n  }\n\n  private get headerExpandedEl() {\n    return this.el.shadowRoot.getElementById('modal-header-expanded');\n  }\n\n  private get innerContainerEl() {\n    return this.el.shadowRoot.getElementById('modal-inner-container');\n  }\n\n  private get contentEl() {\n    return this.el.shadowRoot.getElementById('modal-content');\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 overlayEl() {\n    return this.el.shadowRoot.getElementById('overlay');\n  }\n\n  private get footerSlotEl() {\n    return this.footerEl.querySelectorAll('slot')[0];\n  }\n\n  private get headerEl() {\n    return this.el.shadowRoot.getElementById('modal-header');\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        <slot></slot>\n        <div id=\"modal-inner-container\" class={{ 'modal-inner-container': true, 'no-footer': !this.hasFooter }} part=\"modal-inner-container\">\n          <div id=\"modal-content\" part=\"modal-content\">\n            <div id=\"modal-header\" class=\"modal-header\">\n              <slot name=\"header\"></slot>\n            </div>\n            <slot name=\"body\"></slot>\n          </div>\n          <div id=\"modal-header-expanded\" class={{ 'modal-header': true, 'expanded': true, 'no-opacity': true }}>\n            <slot name=\"footerExpandedHeader\"></slot>\n          </div>\n        </div>\n        <div id=\"modal-footer\">\n          <slot name=\"footer\"></slot>\n        </div>\n        <div id=\"modal-footer-expanded\" class={{ 'expanded': true, 'no-opacity': true }}>\n          <slot name=\"footerExpandedFooter\"></slot>\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    if (this.noOverlay) {\n      this.addExpandAnim();\n      return <Host>{this.Modal}</Host>;\n    }\n\n    return (\n      <Host class={{ 'include-mobile-styling': true }}>\n        <cpsl-overlay id=\"overlay\" open={this.open} enterTransitionDuration={this.enterTransitionDuration} exitTransitionDuration={this.exitTransitionDuration} />\n        <div id=\"modal-wrapper\" class=\"modal-wrapper\">\n          {this.Modal}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -3,31 +3,30 @@ import gsap from "gsap";
 export class CpslOverlay {
     constructor() {
         this.open = undefined;
-        this.transitionDuration = 0.5;
+        this.enterTransitionDuration = 0.5;
+        this.exitTransitionDuration = 0.5;
     }
     toggleHeight() {
-        this.open ? this.showTl.play() : this.showTl.reverse();
+        this.open
+            ? gsap.timeline({ defaults: { duration: this.enterTransitionDuration } }).to(this.el, { display: 'block', opacity: 1 })
+            : gsap.timeline({ defaults: { duration: this.exitTransitionDuration } }).to(this.el, { display: 'none', opacity: 0 });
         if (this.open) {
             document.documentElement.style.overflow = 'hidden';
         }
         else {
             setTimeout(() => {
                 document.documentElement.style.overflow = 'auto';
-            }, this.transitionDuration * 1000);
+            }, this.exitTransitionDuration * 1000);
         }
     }
     componentDidLoad() {
-        this.showTl = gsap
-            .timeline({ reversed: true, paused: true })
-            .to(this.el, { display: 'block', duration: this.transitionDuration })
-            .to(this.el, { opacity: '100%', duration: this.transitionDuration }, '<');
         if (this.open) {
-            this.showTl.play();
+            gsap.timeline({ defaults: { duration: this.enterTransitionDuration } }).to(this.el, { display: 'block', opacity: 1 });
             document.documentElement.style.overflow = 'hidden';
         }
     }
     render() {
-        return (h(Host, { key: '55a5b7f277d010d63f1e991d210b038c393fb387' }, h("slot", { key: '59957e5f35e8b007ba32177672870d7240ca501c' })));
+        return (h(Host, { key: '4d8c07e1704e32808745d92d5befa8a4145a779f' }, h("slot", { key: 'f767b8da95b657cf8c118c298c38acaf72af8e8c' })));
     }
     static get is() { return "cpsl-overlay"; }
     static get encapsulation() { return "shadow"; }
@@ -60,7 +59,7 @@ export class CpslOverlay {
                 "attribute": "open",
                 "reflect": false
             },
-            "transitionDuration": {
+            "enterTransitionDuration": {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
@@ -69,12 +68,30 @@ export class CpslOverlay {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Duration in seconds of the fade out animation.\nDefault is .5."
+                },
+                "attribute": "enter-transition-duration",
+                "reflect": false,
+                "defaultValue": "0.5"
+            },
+            "exitTransitionDuration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Duration in seconds of the fade in/out animation.\nDefault is .5."
+                    "text": "Duration in seconds of the fade out animation.\nDefault is .5."
                 },
-                "attribute": "transition-duration",
+                "attribute": "exit-transition-duration",
                 "reflect": false,
                 "defaultValue": "0.5"
             }

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

@@ -1 +1 @@
-{"version":3,"file":"cpsl-overlay.js","sourceRoot":"","sources":["../../../../src/components/cpsl-overlay/cpsl-overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,MAAM,OAAO,WAAW;;;kCAce,GAAG;;IAGxC,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;QAEvD,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACrD,CAAC;aAAM,CAAC;YAEN,UAAU,CAAC,GAAG,EAAE;gBACd,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC;YACnD,CAAC,EAAE,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,CAAC;QACrC,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,MAAM,GAAG,IAAI;aACf,QAAQ,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;aAC1C,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,kBAAkB,EAAE,CAAC;aACpE,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,kBAAkB,EAAE,EAAE,GAAG,CAAC,CAAC;QAE5E,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YACnB,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACrD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Element, Watch } from '@stencil/core';\nimport gsap from 'gsap';\n\n@Component({\n  tag: 'cpsl-overlay',\n  styleUrl: 'cpsl-overlay.scss',\n  shadow: true,\n})\nexport class CpslOverlay {\n  private showTl;\n\n  @Element() el!: HTMLCpslOverlayElement;\n\n  /**\n   * Whether or not to show the overlay.\n   */\n  @Prop() open: boolean;\n\n  /**\n   * Duration in seconds of the fade in/out animation.\n   * Default is .5.\n   */\n  @Prop() transitionDuration: number = 0.5;\n\n  @Watch('open')\n  toggleHeight() {\n    this.open ? this.showTl.play() : this.showTl.reverse();\n\n    if (this.open) {\n      document.documentElement.style.overflow = 'hidden';\n    } else {\n      // Setting a timeout here to prevent modal from shifting when the scroll bar appears\n      setTimeout(() => {\n        document.documentElement.style.overflow = 'auto';\n      }, this.transitionDuration * 1000);\n    }\n  }\n\n  componentDidLoad() {\n    this.showTl = gsap\n      .timeline({ reversed: true, paused: true })\n      .to(this.el, { display: 'block', duration: this.transitionDuration })\n      .to(this.el, { opacity: '100%', duration: this.transitionDuration }, '<');\n\n    if (this.open) {\n      this.showTl.play();\n      document.documentElement.style.overflow = 'hidden';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cpsl-overlay.js","sourceRoot":"","sources":["../../../../src/components/cpsl-overlay/cpsl-overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,MAAM,OAAO,WAAW;;;uCAYqB,GAAG;sCAMJ,GAAG;;IAG7C,YAAY;QACV,IAAI,CAAC,IAAI;YACP,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,uBAAuB,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;YACvH,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,sBAAsB,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;QAExH,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACrD,CAAC;aAAM,CAAC;YAEN,UAAU,CAAC,GAAG,EAAE;gBACd,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC;YACnD,CAAC,EAAE,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,CAAC;QACzC,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,uBAAuB,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;YACtH,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACrD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Element, Watch } from '@stencil/core';\nimport gsap from 'gsap';\n\n@Component({\n  tag: 'cpsl-overlay',\n  styleUrl: 'cpsl-overlay.scss',\n  shadow: true,\n})\nexport class CpslOverlay {\n  @Element() el!: HTMLCpslOverlayElement;\n\n  /**\n   * Whether or not to show the overlay.\n   */\n  @Prop() open: boolean;\n\n  /**\n   * Duration in seconds of the fade out animation.\n   * Default is .5.\n   */\n  @Prop() enterTransitionDuration?: number = 0.5;\n\n  /**\n   * Duration in seconds of the fade out animation.\n   * Default is .5.\n   */\n  @Prop() exitTransitionDuration?: number = 0.5;\n\n  @Watch('open')\n  toggleHeight() {\n    this.open\n      ? gsap.timeline({ defaults: { duration: this.enterTransitionDuration } }).to(this.el, { display: 'block', opacity: 1 })\n      : gsap.timeline({ defaults: { duration: this.exitTransitionDuration } }).to(this.el, { display: 'none', opacity: 0 });\n\n    if (this.open) {\n      document.documentElement.style.overflow = 'hidden';\n    } else {\n      // Setting a timeout here to prevent modal from shifting when the scroll bar appears\n      setTimeout(() => {\n        document.documentElement.style.overflow = 'auto';\n      }, this.exitTransitionDuration * 1000);\n    }\n  }\n\n  componentDidLoad() {\n    if (this.open) {\n      gsap.timeline({ defaults: { duration: this.enterTransitionDuration } }).to(this.el, { display: 'block', opacity: 1 });\n      document.documentElement.style.overflow = 'hidden';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -54,12 +54,12 @@
    * }
    */
 :host {
-  --pill-text-color: var(--cpsl-color-text-inverted);
+  --pill-text-color: var(--cpsl-pill-text);
   --pill-text-size: clamp(10px, 0.625rem, 15px);
   --pill-text-line-height: 100%;
   --pill-container-height: 18px;
-  --pill-container-background-color: var(--cpsl-color-foreground-secondary);
-  --pill-container-border-color: var(--cpsl-color-foreground-primary);
+  --pill-container-background-color: var(--cpsl-color-pill-container-background);
+  --pill-container-border-color: var(--cpsl-color-pill-container-border);
   --pill-container-padding-start: 8px;
   --pill-container-padding-end: 8px;
   --pill-container-border-radius: var(--cpsl-border-radius-pill);

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

@@ -4,7 +4,7 @@ export class CpslPill {
         this.text = undefined;
     }
     render() {
-        return (h(Host, { key: 'd82e8cf09017e22aab2c4e4d42295310116aad3c' }, h("div", { key: 'f7ec5045fdcf0d69873f5ddbfc46976a8c3bbacb', class: "pill-container" }, h("span", { key: 'd715965cf771800ad57f63509865d47a7344da95' }, this.text))));
+        return (h(Host, { key: 'c0d7930033e08ea264480fd457b176755eac7662' }, h("div", { key: 'b0f6d184dcfe34559b62a9c9da4354f5bfb59797', class: "pill-container" }, h("span", { key: '88634c4cd20dba3d850c51bb4089649364112566' }, this.text))));
     }
     static get is() { return "cpsl-pill"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-progress-indicator/cpsl-progress-indicator.css

@@ -55,9 +55,9 @@
    */
 :host {
   --step-height: 3px;
-  --step-active-color: var(--cpsl-color-foreground-primary);
-  --step-next-color: var(--cpsl-color-foreground-quarternary);
-  --step-previous-color: var(--cpsl-color-foreground-ternary);
+  --step-active-color: var(--cpsl-color-progressIndicator-active);
+  --step-next-color: var(--cpsl-color-progressIndicator-next);
+  --step-previous-color: var(--cpsl-color-progressIndicator-previous);
   display: flex;
   align-items: center;
   justify-content: center;

package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.css

@@ -54,9 +54,9 @@
    * }
    */
 :host {
-  --qr-color: var(--cpsl-color-black);
-  --qr-background-color: var(--cpsl-color-white);
-  --qr-border-color: var(--cpsl-color-foreground-quinary);
+  --qr-color: var(--cpsl-color-qr-fill);
+  --qr-background-color: var(--cpsl-color-qr-background);
+  --qr-border-color: var(--cpsl-color-qr-border);
   --qr-border-radius: var(--cpsl-border-radius-qr-code);
   --qr-border-width: 1px;
   --qr-box-shadow: 0px 1px 2px var(--cpsl-color-alpha-black-10);