npm - @usecapsule/core-components - Versions diffs - 1.0.13 → 2.0.0-dev.dropdown - Mend

@usecapsule/core-components 1.0.13 → 2.0.0-dev.dropdown

Files changed (173) hide show

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

	@@ -1 +1 @@
1	- {"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 } 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 }} part=\"modal-container\">\n <div class={{ 'modal-inner-container': true, 'no-footer': this.noFooter }} part=\"modal-inner-container\">\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"]}
1	+ {"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 CHANGED Viewed

@@ -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: 'fb52455d1a68056a20f95e7572dd4afcb1827c41' }, h("slot", { key: '70c5a7f0ecda8560c92ea6f907ad60650f1cdcf2' })));
     }
     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 CHANGED Viewed

	@@ -1 +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"]}
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;;;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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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: '061ac64aeb0f301d51f62ff889b6a817b0e5abba' }, h("div", { key: 'b6d260c1431d5540c07e976e8fc6d6680dcdda43', class: "pill-container" }, h("span", { key: '22d35f5d971c5ce45995e70af3eb9ef0446fdad1' }, this.text))));
     }
     static get is() { return "cpsl-pill"; }
     static get encapsulation() { return "shadow"; }

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

@@ -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 CHANGED Viewed

@@ -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);

package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.js CHANGED Viewed

@@ -32,7 +32,7 @@ export class CpslQrCode {
         qrCode.append(container);
     }
     render() {
-        return (h(Host, { key: 'c26c87e8a22d8134a60f9efebd1e27169d59cb0c' }, h("div", { key: 'd9a8ede7f1ffbcd80d58b916d38f38fea7fc4f74', id: "qr-container", class: "qr-container" })));
+        return (h(Host, { key: '8aa4d75e098ba25375d26e9e84e150cc70106ffa' }, h("div", { key: '02b8d5f1192ecce74476b76f5a6e8602589e2b58', id: "qr-container", class: "qr-container" })));
     }
     static get is() { return "cpsl-qr-code"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-row/cpsl-row.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class CpslRow {
     render() {
-        return (h(Host, { key: '6b0ced877619502c78baeccaceaf68f1feed6ea7' }, h("slot", { key: 'd132ce91967ad16904886baa14149ac8990d314f' })));
+        return (h(Host, { key: '5f061d20ff017b612a4bada01c66992795cbabe1' }, h("slot", { key: 'ba35af68f6f00e8b12ff3c091935482beb10d27c' })));
     }
     static get is() { return "cpsl-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.css CHANGED Viewed

@@ -59,19 +59,20 @@
   --slider-container-height: 44px;
   --slider-container-border-width: 1px;
   --slider-container-box-shadow: 0px 0px 4px 0px var(--cpsl-color-alpha-black-10) inset;
-  --slider-container-start-background-color: var(--cpsl-color-foreground-senary);
-  --slider-container-end-background-color: var(--cpsl-color-foreground-primary);
-  --slider-container-border-color: var(--cpsl-color-foreground-quinary);
+  --slider-container-start-background-color: var(--cpsl-color-slideButton-slider-container-start-background);
+  --slider-container-end-background-color: var(--cpsl-color-slideButton-slider-container-end-background);
+  --slider-container-start-border-color: var(--cpsl-color-slideButton-slider-container-start-border);
+  --slider-container-end-border-color: var(--cpsl-color-slideButton-slider-container-end-border);
   /* SLIDER VARS */
   --slider-border-width: 1px;
   --slider-box-shadow: 3px 0px 4px 0px var(--cpsl-color-alpha-black-16);
-  --slider-border-color: var(--cpsl-color-foreground-quinary);
-  --slider-background-color: var(--cpsl-color-foreground-primary);
-  --slider-color: var(--cpsl-color-text-inverted);
+  --slider-border-color: var(--cpsl-color-slideButton-slider-border);
+  --slider-background-color: var(--cpsl-color-slideButton-slider-background);
+  --slider-color: var(--cpsl-color-slideButton-slider-text);
   /* START TEXT VARS */
-  --start-text-color: var(--cpsl-color-text-secondary);
+  --start-text-color: var(--cpsl-color-slideButton-start-text);
   /* END TEXT VARS */
-  --end-text-color: var(--cpsl-color-text-inverted);
+  --end-text-color: var(--cpsl-color-slideButton-end-text);
   font-family: var(--cpsl-font-family, inherit);
   display: block;
 }
@@ -87,7 +88,6 @@
   height: var(--slider-container-height);
   border-width: var(--slider-container-border-width);
   border-style: solid;
-  border-color: var(--slider-container-border-color);
   border-radius: calc(var(--slider-container-height) / 2);
   box-shadow: var(--slider-container-box-shadow);
 }
@@ -102,11 +102,13 @@
 .start-slider-container-background {
   background-color: var(--slider-container-start-background-color);
+  border-color: var(--slider-container-start-border-color);
   opacity: 100%;
 }
 .end-slider-container-background {
   background-color: var(--slider-container-end-background-color);
+  border-color: var(--slider-container-end-border-color);
   opacity: 0%;
 }

package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js CHANGED Viewed

@@ -114,7 +114,7 @@ export class CpslSlideButton {
         return this.el.shadowRoot.getElementById('end-icon');
     }
     render() {
-        return (h(Host, { key: '393258461f583632bd2f0c98787790cd0ce1f8a7' }, h("div", { key: '655dfa975fc02ba1d01f09589c34b15bb50c4659', id: "slider-container", class: "slider-container" }, h("div", { key: '7971c73bd81c8ac3e7e8e561754f7df2a2d855c4', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '9e6f364011c1f75ab35de04019c43d5d3044b1e4', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '31eb370862bc888bf866f5b972740a655234bccc', id: "slider", class: { slider: true, disabled: this.disabled } }, h("cpsl-icon", { key: 'eb54452bb2fdbc202d1fe5c8fb77235b66255372', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), h("cpsl-icon", { key: '121f213932a0a9d178fa680406fc20c2aa8d6a69', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), h("span", { key: '81a41d0ef2a1340fe8b9b29c7304352330cc7594', id: "start-text", class: { 'start-text': true, 'disabled': this.disabled } }, this.startText), h("span", { key: 'b584c9d5fed842cc5a9b2897601d7184a3addaf8', id: "end-text", class: "end-text" }, this.endText))));
+        return (h(Host, { key: 'ce018bff4b8a965f6828bac0a16ab0ebbf5000d6' }, h("div", { key: '0620f35a12979b3262eca8b1a25a1af59745761d', id: "slider-container", class: "slider-container" }, h("div", { key: '07c87359d2fff731a4432c802845ace2d361980b', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '4140a0ab0f2f59693a35b9d36c0a0b6fd6152fbe', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '39ca4cbcc83d4a8667f93cbeca1dd6c1637d0db2', id: "slider", class: { slider: true, disabled: this.disabled } }, h("cpsl-icon", { key: 'f0733efde0e3a00b34d0dd08267e2893f3dfc658', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), h("cpsl-icon", { key: '5f77af9484aad6bc02a8caa89e5c066334f9835b', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), h("span", { key: 'ebf3026838ed70e406704ba85ecd68c0aa04db13', id: "start-text", class: { 'start-text': true, 'disabled': this.disabled } }, this.startText), h("span", { key: 'd13ea9ea109900c679c049702760b1c8ce08e38a', id: "end-text", class: "end-text" }, this.endText))));
     }
     static get is() { return "cpsl-slide-button"; }
     static get encapsulation() { return "shadow"; }
@@ -152,7 +152,7 @@ export class CpslSlideButton {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "\"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRings\" | \"capsule\" | \"check\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"figmaBrand\" | \"figma\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptionsDark\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"redditBrand\" | \"reddit\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"youtubeBrand\" | \"youtube\"",
+                    "resolved": "\"key\" | \"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"figmaBrand\" | \"figma\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"redditBrand\" | \"reddit\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"wallet\" | \"youtubeBrand\" | \"youtube\"",
                     "references": {
                         "IconType": {
                             "location": "import",
@@ -192,7 +192,7 @@ export class CpslSlideButton {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "\"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRings\" | \"capsule\" | \"check\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"figmaBrand\" | \"figma\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptionsDark\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"redditBrand\" | \"reddit\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"youtubeBrand\" | \"youtube\"",
+                    "resolved": "\"key\" | \"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"figmaBrand\" | \"figma\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"redditBrand\" | \"reddit\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"wallet\" | \"youtubeBrand\" | \"youtube\"",
                     "references": {
                         "IconType": {
                             "location": "import",

package/dist/collection/components/cpsl-spinner/cpsl-spinner.css CHANGED Viewed

@@ -54,8 +54,8 @@
    * }
    */
 :host {
-  --path-color: var(--cpsl-color-foreground-ternary);
-  --circle-color: var(--cpsl-color-text-primary);
+  --path-color: var(--cpsl-color-spinner-path);
+  --circle-color: var(--cpsl-color-spinner-circle);
   display: flex;
   justify-content: center;
   align-items: center;

package/dist/collection/components/cpsl-spinner/cpsl-spinner.js CHANGED Viewed

@@ -5,13 +5,13 @@ export class CpslSpinner {
         this.speed = 1;
     }
     render() {
-        return (h(Host, { key: 'c67c084c1bae79ba255ca736de4721d1f6ea928d', style: {
+        return (h(Host, { key: 'f52df0bdd08e1de7ffb6cdda5f1791b1524cbbbe', style: {
                 'height': `${this.size}px`,
                 'width': `${this.size}px`,
                 'animation': `spin ${this.speed}s linear infinite`,
                 '-webkit-animation': `spin ${this.speed}s linear infinite`,
                 '-moz-animation': `spin ${this.speed}s linear infinite`,
-            } }, h("svg", { key: 'a14c9a8d895fb713fd1a8533bca04fa6e60017d7', height: this.size, width: this.size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 54 54", fill: "none" }, h("path", { key: '5aaaf7cf5c649b717329266517e5ea1f39fccce8', d: "M43.1586 17C39.8082 11.5978 33.8243 8 27 8C16.5066 8 8 16.5066 8 27C8 37.4934 16.5066 46 27 46C33.8242 46 39.8082 42.4022 43.1586 37", "stroke-width": "6", "stroke-linecap": "round" }), h("circle", { key: 'a1a60d4f565a1cffb99177d4159a793621e7b288', cx: "45", cy: "27", r: "5" }))));
+            } }, h("svg", { key: '867ba4a123619a10de1700ed9c23a9c154fed67c', height: this.size, width: this.size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 54 54", fill: "none" }, h("path", { key: 'd4711f92c2dd5d85b01e26e3c3a82f776cd1b72f', d: "M43.1586 17C39.8082 11.5978 33.8243 8 27 8C16.5066 8 8 16.5066 8 27C8 37.4934 16.5066 46 27 46C33.8242 46 39.8082 42.4022 43.1586 37", "stroke-width": "6", "stroke-linecap": "round" }), h("circle", { key: '69cbe92b1cc4f8d1736d4529b78fc5969f127844', cx: "45", cy: "27", r: "5" }))));
     }
     static get is() { return "cpsl-spinner"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-tab/cpsl-tab.js CHANGED Viewed

@@ -21,7 +21,7 @@ export class CpslTab {
         }
     }
     render() {
-        return (h(Host, { key: 'd55a11bba84bea2f0d24c6190a84467aea4ac2d3', onClick: this.onTabClicked }, h("div", { key: '31e58097fd53e0286c6652eed32cb39b50e9ebf2', class: { 'tab-container': true } }, h("slot", { key: '01cdeb08c1f468de22ce7d01c6e5b8396231860e' }))));
+        return (h(Host, { key: 'ece9ef79afb7bd761b945f8495b5d7a5707eea28', onClick: this.onTabClicked }, h("div", { key: '787d62147f208c37bd7e494499be123317499ed3', class: { 'tab-container': true } }, h("slot", { key: '2834e0f4c14b2940941e0dbe78105835111688cf' }))));
     }
     static get is() { return "cpsl-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-tabs/cpsl-tabs.css CHANGED Viewed

@@ -58,12 +58,13 @@
   --tab-bottom-padding: 5px;
   --tab-left-padding: 16px;
   --tab-right-padding: 16px;
-  --font-size: 12px;
-  --line-height: 24px;
-  --border-width: 1px;
-  --border-color: var(--cpsl-color-input-border-placeholder);
-  --tabs-background-color: var(--cpsl-color-background-subtle);
-  --slider-background-color: var(--cpsl-color-background-primary);
+  --tabs-border-radius: var(--cpsl-border-radius-tabs);
+  --tabs-font-size: 12px;
+  --tabs-line-height: 24px;
+  --tabs-border-width: 1px;
+  --tabs-border-color: var(--cpsl-color-tabs-border);
+  --tabs-background-color: var(--cpsl-color-tabs-background);
+  --slider-background-color: var(--cpsl-color-tabs-slider-background);
   display: inline-block;
   max-width: 100%;
   font-family: var(--cpsl-font-family, inherit);
@@ -78,13 +79,13 @@
   display: flex;
   overflow-x: scroll;
   overflow-y: hidden;
-  border-width: var(--border-width);
+  border-width: var(--tabs-border-width);
   border-style: solid;
-  border-color: var(--border-color);
-  border-radius: var(--border-radius, 10000px);
+  border-color: var(--tabs-border-color);
+  border-radius: var(--tabs-border-radius);
   background-color: var(--tabs-background-color);
-  font-size: var(--font-size);
-  line-height: var(--line-height);
+  font-size: var(--tabs-font-size);
+  line-height: var(--tabs-line-height);
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
@@ -94,13 +95,13 @@
 .slider {
   position: absolute;
-  top: calc(var(--border-width) * -1);
-  bottom: calc(var(--border-width) * -1);
+  top: calc(var(--tabs-border-width) * -1);
+  bottom: calc(var(--tabs-border-width) * -1);
   left: -1px;
-  border-width: var(--border-width);
+  border-width: var(--tabs-border-width);
   border-style: solid;
-  border-color: var(--border-color);
-  border-radius: var(--border-radius, 10000px);
+  border-color: var(--tabs-border-color);
+  border-radius: var(--tabs-border-radius);
   background-color: var(--slider-background-color);
   box-shadow: -1px 0px 2px 0px var(--cpsl-color-alpha-black-10), 1px 0px 2px 0px var(--cpsl-color-alpha-black-10);
 }

package/dist/collection/components/cpsl-tabs/cpsl-tabs.js CHANGED Viewed

@@ -44,9 +44,9 @@ export class CpslTabs {
     }
     render() {
         const tabsPosition = this.el.getBoundingClientRect();
-        const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--border-width').slice(0, -2);
+        const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--tabs-border-width').slice(0, -2);
         const selectedTabRect = this.selectedTabRect;
-        return (h(Host, { key: '0ed728859b1d8e218bda3fdc4022cdd061552d8d', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, h("div", { key: 'b2cc2886ff4523c227b713385577375df9c1b4e7', class: "tabs-container" }, h("slot", { key: '591895925b58373da582610cf775d1828179b395' }), h("div", { key: '57bd7718e0525fdd20eaa5b005fc8d33408f45f8', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
+        return (h(Host, { key: '47d4b201d34630654f4d11c26972f0ddf9d9f748', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, h("div", { key: '2a956a61b65fb99445a76211448b0ca2b830baab', class: "tabs-container" }, h("slot", { key: '3ef04f0dacff55ea829b92e22b0f260e1f95bb95' }), h("div", { key: '4cf63ec114998fa41b3367c9c648467044f19d95', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
     }
     static get is() { return "cpsl-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-tabs/cpsl-tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-tabs.js","sourceRoot":"","sources":["../../../../src/components/cpsl-tabs/cpsl-tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAgB,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AASrG,MAAM,OAAO,QAAQ;;QA+DX,iBAAY,GAAG,CAAC,EAAoC,EAAE,EAAE;YAC9D,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC;YAE1B,IAAI,GAAG,KAAK,IAAI,CAAC,WAAW,EAAE,CAAC;gBAC7B,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,qBAAqB,EAAE,CAAC;gBAEtE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;oBACxB,GAAG;iBACJ,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC;;sBArEyB,KAAK;;;;IAwBhC,YAAY;QAEV,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,qBAAqB,EAAE,CAAC;QACrF,CAAC,EAAE,EAAE,CAAC,CAAC;IACT,CAAC;IAGD,SAAS,CAAC,QAAiB,EAAE,QAAiB;QAC5C,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC5C,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,qBAAqB,EAAE,CAAC;QACrF,CAAC;IACH,CAAC;IAED,iBAAiB;;QACf,IAAI,CAAC,eAAe,GAAG,MAAA,MAAA,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,0CAAE,qBAAqB,EAAE,mCAAK,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAc,CAAC;QAEvH,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YACrB,GAAG,EAAE,IAAI,CAAC,WAAW;SACtB,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB;;QACd,IAAI,CAAC,eAAe,GAAG,MAAA,MAAA,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,0CAAE,qBAAqB,EAAE,mCAAK,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAc,CAAC;QAGvH,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACrB,CAAC,EAAE,EAAE,CAAC,CAAC;IACT,CAAC;IAED,IAAY,IAAI;QACd,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC;IAC1D,CAAC;IAcD,MAAM;QACJ,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,qBAAqB,EAAE,CAAC;QAErD,MAAM,eAAe,GAAG,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,gBAAgB,CAAC,~~gBAAgB~~,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;~~QACnG~~,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;QAE7C,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,oBAAoB,EAAE,IAAI,CAAC,YAAY;YACpF,4DAAK,KAAK,EAAC,gBAAgB;gBACzB,8DAAa;gBACb,4DACE,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAC5C,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,eAAe,CAAC,KAAK,IAAI,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC,CAAC,GAAG,YAAY,CAAC,CAAC,GAAG,eAAe,GAAG,CAAC,IAAI,EAAE,GACrH,CACE,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,MAAM,MAAM,GAAG,CAAC,IAA0B,EAAE,GAAgC,EAAkC,EAAE;IAC9G,MAAM,KAAK,GAAG,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAE5E,OAAO,KAAK,CAAC;AACf,CAAC,CAAC","sourcesContent":["import { Component, Host, Element, h, Event, Prop, EventEmitter, State, Watch } from '@stencil/core';\nimport { TabClickEventDetail } from '../cpsl-tab/tab-interface';\nimport { TabsChangedEventDetail } from './tabs-interface';\n\n@Component({\n tag: 'cpsl-tabs',\n styleUrl: 'cpsl-tabs.scss',\n shadow: true,\n})\nexport class CpslTabs {\n @Element() el!: HTMLCpslTabsElement;\n\n @State() selectedTabRect?: DOMRect;\n @State() loaded: boolean = false;\n\n /*\n Whether or not the tabs take the full width of their container.\n /\n @Prop() fullWidth?: boolean;\n\n /\n The selected tab component\n /\n @Prop() selectedTab?: string;\n\n /\n Emitted when a tab is changed\n /\n @Event() cpslTabsChanged!: EventEmitter<TabsChangedEventDetail>;\n\n /\n Emitted when tabs are initialized\n * @internal\n /\n @Event() cpslTabsInit!: EventEmitter<TabsChangedEventDetail>;\n\n @Watch('fullWidth')\n updateSlider() {\n // Allow component to condense or expand before recalculating silder\n setTimeout(() => {\n this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();\n }, 50);\n }\n\n @Watch('selectedTab')\n updateTab(newValue?: string, oldValue?: string) {\n if (Boolean(newValue) && !Boolean(oldValue)) {\n this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();\n }\n }\n\n componentWillLoad() {\n this.selectedTabRect = getTab(this.tabs, this.selectedTab)?.getBoundingClientRect() ?? ({ width: 0, x: 0 } as DOMRect);\n\n this.cpslTabsInit.emit({\n tab: this.selectedTab,\n });\n }\n\n componentDidLoad() {\n this.selectedTabRect = getTab(this.tabs, this.selectedTab)?.getBoundingClientRect() ?? ({ width: 0, x: 0 } as DOMRect);\n\n // Allow slider to be rendered with the correct initial style before the transition is added\n setTimeout(() => {\n this.loaded = true;\n }, 50);\n }\n\n private get tabs() {\n return Array.from(this.el.querySelectorAll('cpsl-tab'));\n }\n\n private onTabClicked = (ev: CustomEvent<TabClickEventDetail>) => {\n const { tab } = ev.detail;\n\n if (tab !== this.selectedTab) {\n this.selectedTabRect = getTab(this.tabs, tab).getBoundingClientRect();\n\n this.cpslTabsChanged.emit({\n tab,\n });\n }\n };\n\n render() {\n const tabsPosition = this.el.getBoundingClientRect();\n // Get border width as a number\n const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--border-width').slice(0, -2);\n const selectedTabRect = this.selectedTabRect;\n\n return (\n <Host class={{ 'full-width': this.fullWidth }} onCpslTabButtonClick={this.onTabClicked}>\n <div class=\"tabs-container\">\n <slot></slot>\n <div\n class={{ slider: true, loaded: this.loaded }}\n style={{ width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth 2}px` }}\n />\n </div>\n </Host>\n );\n }\n}\n\nconst getTab = (tabs: HTMLCpslTabElement[], tab: string \| HTMLCpslTabElement): HTMLCpslTabElement \| undefined => {\n const tabEl = typeof tab === 'string' ? tabs.find(t => t.tab === tab) : tab;\n\n return tabEl;\n};\n"]}
1	+ {"version":3,"file":"cpsl-tabs.js","sourceRoot":"","sources":["../../../../src/components/cpsl-tabs/cpsl-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Element, h, Event, Prop, EventEmitter, State, Watch } from '@stencil/core';\nimport { TabClickEventDetail } from '../cpsl-tab/tab-interface';\nimport { TabsChangedEventDetail } from './tabs-interface';\n\n@Component({\n tag: 'cpsl-tabs',\n styleUrl: 'cpsl-tabs.scss',\n shadow: true,\n})\nexport class CpslTabs {\n @Element() el!: HTMLCpslTabsElement;\n\n @State() selectedTabRect?: DOMRect;\n @State() loaded: boolean = false;\n\n /*\n Whether or not the tabs take the full width of their container.\n /\n @Prop() fullWidth?: boolean;\n\n /\n The selected tab component\n /\n @Prop() selectedTab?: string;\n\n /\n Emitted when a tab is changed\n /\n @Event() cpslTabsChanged!: EventEmitter<TabsChangedEventDetail>;\n\n /\n Emitted when tabs are initialized\n * @internal\n /\n @Event() cpslTabsInit!: EventEmitter<TabsChangedEventDetail>;\n\n @Watch('fullWidth')\n updateSlider() {\n // Allow component to condense or expand before recalculating silder\n setTimeout(() => {\n this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();\n }, 50);\n }\n\n @Watch('selectedTab')\n updateTab(newValue?: string, oldValue?: string) {\n if (Boolean(newValue) && !Boolean(oldValue)) {\n this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();\n }\n }\n\n componentWillLoad() {\n this.selectedTabRect = getTab(this.tabs, this.selectedTab)?.getBoundingClientRect() ?? ({ width: 0, x: 0 } as DOMRect);\n\n this.cpslTabsInit.emit({\n tab: this.selectedTab,\n });\n }\n\n componentDidLoad() {\n this.selectedTabRect = getTab(this.tabs, this.selectedTab)?.getBoundingClientRect() ?? ({ width: 0, x: 0 } as DOMRect);\n\n // Allow slider to be rendered with the correct initial style before the transition is added\n setTimeout(() => {\n this.loaded = true;\n }, 50);\n }\n\n private get tabs() {\n return Array.from(this.el.querySelectorAll('cpsl-tab'));\n }\n\n private onTabClicked = (ev: CustomEvent<TabClickEventDetail>) => {\n const { tab } = ev.detail;\n\n if (tab !== this.selectedTab) {\n this.selectedTabRect = getTab(this.tabs, tab).getBoundingClientRect();\n\n this.cpslTabsChanged.emit({\n tab,\n });\n }\n };\n\n render() {\n const tabsPosition = this.el.getBoundingClientRect();\n // Get border width as a number\n const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--tabs-border-width').slice(0, -2);\n const selectedTabRect = this.selectedTabRect;\n\n return (\n <Host class={{ 'full-width': this.fullWidth }} onCpslTabButtonClick={this.onTabClicked}>\n <div class=\"tabs-container\">\n <slot></slot>\n <div\n class={{ slider: true, loaded: this.loaded }}\n style={{ width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth 2}px` }}\n />\n </div>\n </Host>\n );\n }\n}\n\nconst getTab = (tabs: HTMLCpslTabElement[], tab: string \| HTMLCpslTabElement): HTMLCpslTabElement \| undefined => {\n const tabEl = typeof tab === 'string' ? tabs.find(t => t.tab === tab) : tab;\n\n return tabEl;\n};\n"]}

package/dist/collection/components/cpsl-text/cpsl-text.css CHANGED Viewed

@@ -56,4 +56,105 @@
 :host {
   font-family: var(--cpsl-font-family, inherit);
   color: var(--cpsl-color-text-primary);
+  padding: 0px;
+  margin: 0px;
+  display: block;
+}
+:host p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  padding: 0px;
+  margin: 0px;
+  font-weight: inherit;
+  font-size: inherit;
+  letter-spacing: inherit;
+}
+:host(.primary) {
+  color: var(--cpsl-color-text-primary);
+}
+:host(.secondary) {
+  color: var(--cpsl-color-text-secondary);
+}
+:host(.subtle) {
+  color: var(--cpsl-color-text-subtle);
+}
+:host(.inverted) {
+  color: var(--cpsl-color-text-inverted);
+}
+:host(.error) {
+  color: var(--cpsl-color-text-error);
+}
+:host(.medium) {
+  font-weight: 500;
+}
+:host(.semi-bold) {
+  font-weight: 600;
+}
+:host(.bold) {
+  font-weight: 700;
+}
+:host(.body-2xs) {
+  font-size: var(--cpsl-font-size-body-2xs);
+}
+:host(.body-xs) {
+  font-size: var(--cpsl-font-size-body-xs);
+}
+:host(.body-s) {
+  font-size: var(--cpsl-font-size-body-s);
+}
+:host(.body-m) {
+  font-size: var(--cpsl-font-size-body-m);
+}
+:host(.body-l) {
+  font-size: var(--cpsl-font-size-body-l);
+}
+:host(.body-xl) {
+  font-size: var(--cpsl-font-size-body-xl);
+}
+:host(.heading-xs) {
+  font-size: var(--cpsl-font-size-heading-xs);
+}
+:host(.heading-s) {
+  font-size: var(--cpsl-font-size-heading-s);
+}
+:host(.heading-m) {
+  font-size: var(--cpsl-font-size-heading-m);
+  letter-spacing: -0.4px;
+}
+:host(.heading-l) {
+  font-size: var(--cpsl-font-size-heading-l);
+  letter-spacing: -1.12px;
+}
+:host(.heading-xl) {
+  font-size: var(--cpsl-font-size-heading-xl);
+  letter-spacing: -1.28px;
+}
+:host(.heading-2xl) {
+  font-size: var(--cpsl-font-size-heading-2xl);
+  letter-spacing: -1.44px;
 }