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

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

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

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

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

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

@@ -7,7 +7,7 @@ export class CpslAvatar {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'c148e7d268c681fa6a7273c109b9ab418f433c24' }, h("span", { key: 'd1f977ab0c5d6f6758f84fb33ed9e72d9a1270c9', class: { round: this.variant === 'round' } }, h("img", { key: '3a13f96266ee6476df2154a09b433dcf7ba44daf', src: this.src, alt: (_a = this.alt) !== null && _a !== void 0 ? _a : 'avatar' }))));
+        return (h(Host, { key: '04dfd668bc6ab12f758e82ccfd915f06e1de3504' }, h("span", { key: '906c7c6e113040b95273c987689e848954e14a1c', class: { round: this.variant === 'round' } }, h("img", { key: '2d952a27ebbeb118c931162487f2d7e13370b41f', src: this.src, alt: (_a = this.alt) !== null && _a !== void 0 ? _a : 'avatar' }))));
     }
     static get is() { return "cpsl-avatar"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -10,16 +10,20 @@ export class CpslButton {
         this.variant = 'primary';
     }
     render() {
-        return (h(Host, { key: 'c8c19be90600d9ca236b51e4e112d8350d7f611c', class: {
+        return (h(Host, { key: '7411754a763990dcbef83edbef353ebf3066f71d', class: {
+                // VARIANTS
                 'primary': this.variant === 'primary',
                 'secondary': this.variant === 'secondary',
+                'tertiary': this.variant === 'tertiary',
                 'ghost': this.variant === 'ghost',
                 'destructive': this.variant === 'destructive',
+                // STATE
                 'disabled': this.disabled,
                 'full-width': this.fullWidth,
+                // SIZES
                 'small': this.size === 'small',
                 'medium': this.size === 'medium',
-            } }, h(this.as, { key: '9ba756220f648f1d4123bd42df8d4db311800705', href: this.href, target: this.target, part: "button-native", class: "button-native" }, h("slot", { key: '7156e673a1a43ea808aeca1574b5f251c38bdc22', name: "start" }), h("slot", { key: 'a74790e4d6deb92b6e0380f6ca8551aacf5c3b8f' }), h("slot", { key: '73219152509968a55aeff2cdc56beefa9b9e5995', name: "end" }))));
+            } }, h(this.as, { key: '1c49c08c3ea7a105ce6c69302e2adc2bc6a443eb', href: this.href, target: this.target, part: "button-native", class: "button-native" }, h("slot", { key: '5ef09afd70e95c9c596c46d84a8d3410a8eba2a9', name: "start" }), h("slot", { key: 'f055ad44f74ca07a612c967432714c00e4b56ba9' }), h("slot", { key: '2a53e40d635b3de4441aed9005b4bb13d42e9d04', name: "end" }))));
     }
     static get is() { return "cpsl-button"; }
     static get encapsulation() { return "shadow"; }
@@ -145,15 +149,15 @@ export class CpslButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary' | 'ghost' | 'destructive'",
-                    "resolved": "\"destructive\" | \"ghost\" | \"primary\" | \"secondary\"",
+                    "original": "'primary' | 'secondary' | 'tertiary' | 'ghost' | 'destructive'",
+                    "resolved": "\"destructive\" | \"ghost\" | \"primary\" | \"secondary\" | \"tertiary\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The variant of the button.\nOptions are: `\"primary\"`, `\"secondary\", `\"icon\", `\"text\"`.\nDefault is: `\"primary\"`."
+                    "text": "The variant of the button.\nOptions are: `\"primary\"`, `\"secondary\", `\"tertiary\", `\"ghost\"`, `\"destructive\"`.\nDefault is: `\"primary\"`."
                 },
                 "attribute": "variant",
                 "reflect": true,

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

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

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

@@ -20,7 +20,7 @@ export class CpslButtonGroup {
             item.setAttribute('full-width', 'true');
             this.selectItem();
         });
-        if (Boolean((_a = this.otherSlots) === null || _a === void 0 ? void 0 : _a.length)) {
+        if ((_a = this.otherSlots) === null || _a === void 0 ? void 0 : _a.length) {
             console.error('cpsl-button is the only valid child of cpsl-button-group');
             this.otherSlots.forEach(item => item.remove());
         }
@@ -32,7 +32,7 @@ export class CpslButtonGroup {
         return this.el.querySelectorAll('&> *:not(cpsl-button)');
     }
     render() {
-        return (h(Host, { key: 'e15232f4180db66b6b7bd21b5e22980f197514be' }, h("slot", { key: 'f3c566eaf9574fb38331e8a44c5c369d1edd5223' })));
+        return (h(Host, { key: '91ccfcaf08be6fc45076376b19e63b5b58ab9b15' }, h("slot", { key: '9af22dc4fcbd76ebc32e476d1682e2fe41b33f81' })));
     }
     static get is() { return "cpsl-button-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"cpsl-button-group.js","sourceRoot":"","sources":["../../../../src/components/cpsl-button-group/cpsl-button-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOzE,MAAM,OAAO,eAAe;;;;IAS1B,UAAU;QACR,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YAC9B,IAAI,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,UAAU,EAAE,CAAC;gBAChC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;YACjC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;YACpC,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,mBAAmB;;QACjB,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YAC9B,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;YAC1C,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;YACxC,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC,CAAC,CAAC;QAEH,IAAI,OAAO,CAAC,MAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,CAAC,EAAE,CAAC;YACrC,OAAO,CAAC,KAAK,CAAC,0DAA0D,CAAC,CAAC;YAC1E,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QACjD,CAAC;IACH,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC;IACjD,CAAC;IAED,IAAY,UAAU;QACpB,OAAO,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;IAC3D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, Element, h, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-button-group',\n  styleUrl: 'cpsl-button-group.scss',\n  shadow: true,\n})\nexport class CpslButtonGroup {\n  @Element() el!: HTMLCpslButtonGroupElement;\n\n  /**\n   * The id of the selected button.\n   */\n  @Prop() selectedId?: string;\n\n  @Watch('selectedId')\n  selectItem() {\n    this.buttonSlots.forEach(item => {\n      if (item.id === this.selectedId) {\n        item.classList.add('selected');\n      } else {\n        item.classList.remove('selected');\n      }\n    });\n  }\n\n  componentWillRender() {\n    this.buttonSlots.forEach(item => {\n      item.setAttribute('variant', 'secondary');\n      item.setAttribute('full-width', 'true');\n      this.selectItem();\n    });\n\n    if (Boolean(this.otherSlots?.length)) {\n      console.error('cpsl-button is the only valid child of cpsl-button-group');\n      this.otherSlots.forEach(item => item.remove());\n    }\n  }\n\n  private get buttonSlots() {\n    return this.el.querySelectorAll('cpsl-button');\n  }\n\n  private get otherSlots() {\n    return this.el.querySelectorAll('&> *:not(cpsl-button)');\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cpsl-button-group.js","sourceRoot":"","sources":["../../../../src/components/cpsl-button-group/cpsl-button-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOzE,MAAM,OAAO,eAAe;;;;IAS1B,UAAU;QACR,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YAC9B,IAAI,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,UAAU,EAAE,CAAC;gBAChC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;YACjC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;YACpC,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,mBAAmB;;QACjB,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YAC9B,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;YAC1C,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;YACxC,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC,CAAC,CAAC;QAEH,IAAI,MAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,EAAE,CAAC;YAC5B,OAAO,CAAC,KAAK,CAAC,0DAA0D,CAAC,CAAC;YAC1E,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QACjD,CAAC;IACH,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC;IACjD,CAAC;IAED,IAAY,UAAU;QACpB,OAAO,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;IAC3D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, Element, h, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-button-group',\n  styleUrl: 'cpsl-button-group.scss',\n  shadow: true,\n})\nexport class CpslButtonGroup {\n  @Element() el!: HTMLCpslButtonGroupElement;\n\n  /**\n   * The id of the selected button.\n   */\n  @Prop() selectedId?: string;\n\n  @Watch('selectedId')\n  selectItem() {\n    this.buttonSlots.forEach(item => {\n      if (item.id === this.selectedId) {\n        item.classList.add('selected');\n      } else {\n        item.classList.remove('selected');\n      }\n    });\n  }\n\n  componentWillRender() {\n    this.buttonSlots.forEach(item => {\n      item.setAttribute('variant', 'secondary');\n      item.setAttribute('full-width', 'true');\n      this.selectItem();\n    });\n\n    if (this.otherSlots?.length) {\n      console.error('cpsl-button is the only valid child of cpsl-button-group');\n      this.otherSlots.forEach(item => item.remove());\n    }\n  }\n\n  private get buttonSlots() {\n    return this.el.querySelectorAll('cpsl-button');\n  }\n\n  private get otherSlots() {\n    return this.el.querySelectorAll('&> *:not(cpsl-button)');\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -60,7 +60,10 @@
   --card-padding-start: 24px;
   --card-border-width: 1px;
   --card-border-color: var(--cpsl-color-card-border);
-  --card-border-radius: var(--cpsl-border-radius-card);
+  --card-border-radius-tl: var(--cpsl-border-radius-card);
+  --card-border-radius-tr: var(--cpsl-border-radius-card);
+  --card-border-radius-bl: var(--cpsl-border-radius-card);
+  --card-border-radius-br: var(--cpsl-border-radius-card);
   --card-background-color: var(--cpsl-color-card-surface);
   display: block;
 }
@@ -76,6 +79,6 @@
   box-sizing: border-box;
   overflow: hidden;
   border: var(--card-border-width) solid var(--card-border-color);
-  border-radius: var(--card-border-radius);
+  border-radius: var(--card-border-radius-tl) var(--card-border-radius-tr) var(--card-border-radius-br) var(--card-border-radius-bl);
   background: var(--card-background-color);
 }

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class CpslCard {
     render() {
-        return (h(Host, { key: '8633aeaedaaf81af67835ee3ffc8964ec28ced92' }, h("div", { key: '432fabd329701f8ef51fc43ba0ca8af3d5182a47', class: { card: true }, part: "card-container" }, h("slot", { key: 'a23d1063d0a1c74ebc076fc67b63c4023f7f8565' }))));
+        return (h(Host, { key: '21177f5a9ceec0246dc1fa89a052bfdadacc3063' }, h("div", { key: '0940e0aaf62b24e1be0e99c736069b5bb463854c', class: { card: true }, part: "card-container" }, h("slot", { key: '6317e03f97be9841c03b040845591043bf203e36' }))));
     }
     static get is() { return "cpsl-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,7 +7,7 @@ export class CpslCheckbox {
         this.checked = undefined;
     }
     render() {
-        return (h(Host, { key: 'b5d7963285854a20983f8655c8a9545b8d0735e9' }, h("input", { key: 'b822a505e826f06d47f1da51fff0c7f310d9c9ce', type: "checkbox", checked: this.checked }), h("span", { key: '3747cf548b8d88ceee19eae5c1df78cdc5f9c87e', onClick: this.handleCheckboxClick, class: { container: true, checked: this.checked } }, h("cpsl-icon", { key: '9d5d0cdba4b22bc2167aed23e7748201320a6553', icon: "check" }))));
+        return (h(Host, { key: '236c0b027e72c0c25dbc2fd3183a77400c815f8c' }, h("input", { key: '8c350e21268b87d485b16796b2058c4e47f46e75', type: "checkbox", checked: this.checked }), h("span", { key: 'b1d8fc6dd380b67eb8940f55bba47810c54ee189', onClick: this.handleCheckboxClick, class: { container: true, checked: this.checked } }, h("cpsl-icon", { key: '2b3ddcad1e2b9007bda8135a810b75a1a2cfaeca', icon: "check" }))));
     }
     static get is() { return "cpsl-checkbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -95,6 +95,9 @@
   text-align: center;
   outline: none;
 }
+.code-input.has-value {
+  --input-border-color: var(--cpsl-color-accent-32);
+}
 .code-input:focus {
   --input-border-color: var(--cpsl-color-input-border-active);
 }

package/dist/collection/components/cpsl-code-input/cpsl-code-input.js

@@ -4,13 +4,18 @@ export class CpslCodeInput {
         this.handleInput = (ind, ev) => {
             var _a;
             const inputElements = this.inputs;
-            if (ev.inputType == 'insertText') {
+            // If getting an insertFromPaste remove the last element value since the value setting is handled in the paste event
+            if (ev.inputType === 'insertFromPaste') {
+                inputElements[Math.min(this.length - 1, ind)].value = '';
+                return;
+            }
+            if (ev.inputType === 'insertText') {
                 if (this.type === 'number' && isNaN(parseInt(ev.data))) {
                     inputElements[ind].value = '';
                     return;
                 }
-                inputElements[Math.min(this.length - 1, ind + 1)].focus();
                 const newCode = `${(_a = this.code) !== null && _a !== void 0 ? _a : ''}${ev.data}`;
+                inputElements[Math.min(this.length - 1, newCode.length)].focus();
                 this.cpslInput.emit({ value: newCode });
                 this.code = newCode;
             }
@@ -63,6 +68,7 @@ export class CpslCodeInput {
             const inputElements = this.inputs;
             const pastedCode = e.clipboardData.getData('text');
             if (this.type === 'number' && isNaN(parseInt(pastedCode))) {
+                // Remove illegal value from the first input. Not using a timeout here doesn't change the value properly.
                 setTimeout(() => {
                     inputElements[0].value = '';
                 }, 0);
@@ -74,7 +80,7 @@ export class CpslCodeInput {
             inputElements.forEach((input, index) => {
                 input.value = pastedCode.charAt(index);
             });
-            inputElements[this.length - 1].focus();
+            inputElements[Math.min(this.length - 1, pastedCode.length)].focus();
         };
         this.code = undefined;
         this.errorText = undefined;
@@ -87,10 +93,10 @@ export class CpslCodeInput {
     }
     render() {
         var _a;
-        return (h(Host, { key: '2f52778c8b8b51ef7c875b53394e7275bd93412f' }, h("div", { key: 'e96c3deea7d1e4eaaef4c72fbaca702b6bb46cf1', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
-            var _a;
-            return (h("input", { class: { 'code-input': true, 'error': Boolean(this.errorText) }, id: `code-input-${i}`, maxLength: 1, onKeyDown: ev => this.handleKeyDown(i, ev), onInput: ev => this.handleInput(i, ev), onFocus: () => this.handleFocus(i), onPaste: this.handlePaste, min: 0, max: 9, value: (_a = this.code) === null || _a === void 0 ? void 0 : _a[i], inputMode: this.type === 'number' ? 'numeric' : 'text' }));
-        })), (this.errorText || this.helperText) && (h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { icon: Boolean(this.errorText) ? 'alertCircle' : 'infoCircle' }), h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
+        return (h(Host, { key: 'fd588544d9cdebaaeb1961f4ecb5c5630e8e4699' }, h("div", { key: 'b795c99f0df6fbf4ba9a7118f3f737dbf22c7ee9', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
+            var _a, _b;
+            return (h("input", { class: { 'code-input': true, 'error': Boolean(this.errorText), 'has-value': ((_a = this.code) === null || _a === void 0 ? void 0 : _a[i]) !== undefined }, id: `code-input-${i}`, onKeyDown: ev => this.handleKeyDown(i, ev), onInput: ev => this.handleInput(i, ev), onFocus: () => this.handleFocus(i), onPaste: this.handlePaste, min: 0, max: 9, value: (_b = this.code) === null || _b === void 0 ? void 0 : _b[i], inputMode: this.type === 'number' ? 'numeric' : 'text' }));
+        })), (this.errorText || this.helperText) && (h("div", { key: '9cff50eb172f38af5065ad79e3c767f2e8ec33c9', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { key: 'c8d7dbbd0ec7a2015e2e8099d0448b847641b845', icon: this.errorText ? 'alertCircle' : 'infoCircle' }), h("span", { key: '4ae4009a2fb4d8f6dc4c985ea8d39c136cb23780' }, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
     }
     static get is() { return "cpsl-code-input"; }
     static get encapsulation() { return "shadow"; }