@usecapsule/core-components 3.0.1 → 3.1.0

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

@@ -68,11 +68,12 @@
   --button-padding-start: 16px;
   --button-padding-end: 16px;
   --button-icon-size: var(--cpls-font-size-body-l);
+  --button-font-weight: 500;
   --button-primary-color: var(--cpsl-color-primary-button-text);
   --button-primary-background-color: var(--cpsl-color-primary-button-surface-default);
   --button-primary-border-color: var(--cpsl-color-primary-button-border-default);
   --button-primary-icon-color: var(--cpsl-color-primary-button-text);
-  --button-primary-disabled-color: var(--cpsl-color-primary-button-text);
+  --button-primary-disabled-color: var(--cpsl-color-text-disabled);
   --button-primary-disabled-background-color: var(--cpsl-color-primary-button-surface-disabled);
   --button-primary-disabled-border-color: var(--cpsl-color-primary-button-border-disabled);
   --button-primary-disabled-icon-color: var(--cpsl-color-primary-button-text);
@@ -88,7 +89,7 @@
   --button-secondary-background-color: var(--cpsl-color-secondary-button-surface-default);
   --button-secondary-border-color: var(--cpsl-color-secondary-button-border-default);
   --button-secondary-icon-color: var(--cpsl-color-secondary-button-text);
-  --button-secondary-disabled-color: var(--cpsl-color-secondary-button-text);
+  --button-secondary-disabled-color: var(--cpsl-color-text-disabled);
   --button-secondary-disabled-background-color: var(--cpsl-color-secondary-button-surface-disabled);
   --button-secondary-disabled-border-color: var(--cpsl-color-secondary-button-border-disabled);
   --button-secondary-disabled-icon-color: var(--cpsl-color-secondary-button-text);
@@ -100,12 +101,34 @@
   --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-icon-color: var(--cpsl-color-icon-button-default);
-  --button-icon-disabled-color: var(--cpsl-color-icon-button-disabled);
-  --button-icon-hover-color: var(--cpsl-color-icon-button-hover);
-  height: 100%;
+  --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);
+  --button-destructive-color: var(--cpsl-color-destructive-button-text);
+  --button-destructive-background-color: var(--cpsl-color-destructive-button-surface-default);
+  --button-destructive-border-color: var(--cpsl-color-destructive-button-border-default);
+  --button-destructive-icon-color: var(--cpsl-color-destructive-button-text);
+  --button-destructive-disabled-color: var(--cpsl-color-text-disabled);
+  --button-destructive-disabled-background-color: var(--cpsl-color-destructive-button-surface-disabled);
+  --button-destructive-disabled-border-color: var(--cpsl-color-destructive-button-border-disabled);
+  --button-destructive-disabled-icon-color: var(--cpsl-color-destructive-button-text);
+  --button-destructive-hover-color: var(--cpsl-color-destructive-button-text);
+  --button-destructive-hover-background-color: var(--cpsl-color-destructive-button-surface-hover);
+  --button-destructive-hover-border-color: var(--cpsl-color-destructive-button-border-default);
+  --button-destructive-hover-icon-color: var(--cpsl-color-destructive-button-text);
+  --button-destructive-active-color: var(--cpsl-color-destructive-button-text);
+  --button-destructive-active-background-color: var(--cpsl-color-destructive-button-surface-pressed);
+  --button-destructive-active-border-color: var(--cpsl-color-destructive-button-border-default);
+  --button-destructive-active-icon-color: var(--cpsl-color-destructive-button-text);
+  height: fit-content;
+  width: fit-content;
   display: inline-block;
   font-family: var(--cpsl-font-family, inherit);
+  -webkit-tap-highlight-color: transparent;
+}
+:host a {
+  height: fit-content;
+  width: auto !important;
 }
 
 :host(.full-width) {
@@ -123,12 +146,26 @@
   --button-icon-size: var(--cpsl-font-size-body-m);
 }
 
+:host(.small.primary) {
+  --button-padding-top: 13px;
+  --button-padding-bottom: 13px;
+}
+
 :host(.medium) {
   --button-font-size: var(--cpsl-font-size-body-m);
   --button-padding-top: 14px;
   --button-padding-bottom: 14px;
   --button-icon-size: var(--cpsl-font-size-body-l);
 }
+:host(.medium) :host(.primary) {
+  --button-padding-top: 15px;
+  --button-padding-bottom: 15px;
+}
+
+:host(.medium.primary) {
+  --button-padding-top: 15px;
+  --button-padding-bottom: 15px;
+}
 
 :host(.disabled) {
   cursor: default;
@@ -145,6 +182,9 @@
   --button-color: var(--button-primary-color);
   --button-background-color: var(--button-primary-background-color);
   --button-border-color: var(--button-primary-border-color);
+  --button-padding-start: 17px;
+  --button-padding-end: 17px;
+  --button-border-width: 0px;
 }
 :host(.primary) ::slotted(cpsl-icon) {
   --icon-color: var(--button-primary-icon-color);
@@ -179,9 +219,9 @@
 }
 
 :host(.secondary) {
-  --button-border-radius: var(--cpsl-border-radius-secondary-button);
+  --button-border-radius: var(--cpsl-border-radius-destructive-button);
   --button-color: var(--button-secondary-color);
-  --button-background-color: var(--button-primary-secondary-color);
+  --button-background-color: var(--button-secondary-background-color);
   --button-border-color: var(--button-secondary-border-color);
 }
 :host(.secondary) ::slotted(cpsl-icon) {
@@ -216,20 +256,71 @@
   --button-outline-color: var(--cpsl-color-secondary-button-outline);
 }
 
-:host(.icon) {
-  --button-color: transparent;
+:host(.ghost) {
+  --button-color: var(--button-ghost-color);
   --button-background-color: transparent;
   --button-border-color: transparent;
   --button-outline-color: transparent;
+  --button-padding-start: 0px;
+  --button-padding-end: 0px;
+  --button-padding-top: 0px;
+  --button-padding-bottom: 0px;
+  --button-border-width: 0px;
+}
+: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);
+}
+:host(.ghost):host(.disabled) ::slotted(cpsl-icon) {
+  --icon-color: var(--button-ghost-disabled-color);
+}
+:host(.ghost) :not(.disabled):hover {
+  --button-color: var(--button-ghost-hover-color);
+}
+:host(.ghost) :not(.disabled):hover ::slotted(cpsl-icon) {
+  --icon-color: var(--button-ghost-hover-color);
+}
+
+:host(.destructive) {
+  --button-border-radius: var(--cpsl-border-radius-secondary-button);
+  --button-color: var(--button-destructive-color);
+  --button-background-color: var(--button-destructive-background-color);
+  --button-border-color: var(--button-destructive-border-color);
+}
+:host(.destructive) ::slotted(cpsl-icon) {
+  --icon-color: var(--button-destructive-icon-color);
+}
+:host(.destructive):host(.disabled) {
+  --button-color: var(--button-destructive-disabled-color);
+  --button-background-color: var(--button-destructive-disabled-background-color);
+  --button-border-color: var(--button-destructive-disabled-border-color);
+  --button-outline-color: transparent;
+}
+:host(.destructive):host(.disabled) ::slotted(cpsl-icon) {
+  --icon-color: var(--button-destructive-disabled-icon-color);
+}
+:host(.destructive) :not(.disabled):hover {
+  --button-color: var(--button-destructive-hover-color);
+  --button-border-color: var(--button-destructive-hover-border-color);
+  --button-background-color: var(--button-destructive-hover-background-color);
+}
+:host(.destructive) :not(.disabled):hover ::slotted(cpsl-icon) {
+  --icon-color: var(--button-destructive-hover-icon-color);
 }
-:host(.icon) ::slotted(cpsl-icon) {
-  --icon-color: var(--button-icon-color);
+:host(.destructive) :not(.disabled):active {
+  --button-color: var(--button-destructive-active-color);
+  --button-border-color: var(--button-destructive-active-border-color);
+  --button-background-color: var(--button-destructive-active-background-color);
 }
-:host(.icon):host(.disabled) ::slotted(cpsl-icon) {
-  --icon-color: var(--button-icon-disabled-color);
+:host(.destructive) :not(.disabled):active ::slotted(cpsl-icon) {
+  --icon-color: var(--button-destructive-active-icon-color);
 }
-:host(.icon) :not(.disabled):hover ::slotted(cpsl-icon) {
-  --icon-color: var(--button-icon-hover-color);
+:host(.destructive) :not(.disabled):focus-visible {
+  --button-outline-color: var(--cpsl-color-destructive-button-outline);
 }
 
 .button-native {
@@ -244,11 +335,15 @@
   padding-top: var(--button-padding-top);
   padding-bottom: var(--button-padding-bottom);
   font-size: var(--button-font-size);
+  font-weight: var(--button-font-weight);
+  font-family: inherit;
+  white-space: nowrap;
+  text-decoration: none;
   border: 0px solid transparent;
   border-width: var(--button-border-width-top) var(--button-border-width-end) var(--button-border-width-bottom) var(--button-border-width-start);
   cursor: pointer;
   color: var(--button-color);
-  background-color: var(--button-background-color);
+  background: var(--button-background-color);
   border-color: var(--button-border-color);
   display: flex;
   justify-content: var(--button-justify-content);
@@ -257,6 +352,7 @@
   gap: var(--button-gap);
   word-break: break-all;
   outline-color: var(--button-outline-color);
+  -webkit-tap-highlight-color: transparent;
 }
 :host-context([dir=rtl]) .button-native {
   border-top-left-radius: var(--button-border-radius-top-end);

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

@@ -1,21 +1,25 @@
 import { Host, h } from "@stencil/core";
 export class CpslButton {
     constructor() {
+        this.as = 'button';
         this.disabled = false;
         this.fullWidth = false;
+        this.href = undefined;
         this.size = 'medium';
+        this.target = undefined;
         this.variant = 'primary';
     }
     render() {
-        return (h(Host, { key: '62f94f1db8f1019d47a3fcd481638dd21769b74f', class: {
+        return (h(Host, { key: '554350e7af597bd14c9584f9924f73e04fe44093', class: {
                 'primary': this.variant === 'primary',
                 'secondary': this.variant === 'secondary',
-                'icon': this.variant === 'icon',
+                'ghost': this.variant === 'ghost',
+                'destructive': this.variant === 'destructive',
                 'disabled': this.disabled,
                 'full-width': this.fullWidth,
                 'small': this.size === 'small',
                 'medium': this.size === 'medium',
-            } }, h("button", { key: '8b018abcc84330186611db6319bcf56022f5cccc', part: "button-native", class: "button-native" }, h("slot", { key: 'cad9e0b269752f30514957663de666eee0f2622c', name: "start" }), h("slot", { key: '6170188bf7734375bb3c99ae7ffab4d21c817e32' }), h("slot", { key: '2e483b4c7d21796c4e519c9c553483f633d2c8ac', name: "end" }))));
+            } }, h(this.as, { key: '20b6865c03e312d263c523f681bb775d8626fc9c', href: this.href, target: this.target, part: "button-native", class: "button-native" }, h("slot", { key: '4ee8d68b06ce21288e63bfcff9aa186908b89af2', name: "start" }), h("slot", { key: '9c0a5f0daa64c75886d03fb830739c8f8cfb65d9' }), h("slot", { key: 'cf9addee55b0a0d8f487313c972d7b48d6f8c75c', name: "end" }))));
     }
     static get is() { return "cpsl-button"; }
     static get encapsulation() { return "shadow"; }
@@ -31,6 +35,24 @@ export class CpslButton {
     }
     static get properties() {
         return {
+            "as": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'button' | 'a'",
+                    "resolved": "\"a\" | \"button\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The tag for the button.\nOptions are: `\"button\"`, `\"a\".\nDefault is: `\"button\"`."
+                },
+                "attribute": "as",
+                "reflect": false,
+                "defaultValue": "'button'"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -67,6 +89,23 @@ export class CpslButton {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "href to use when using a link."
+                },
+                "attribute": "href",
+                "reflect": false
+            },
             "size": {
                 "type": "string",
                 "mutable": false,
@@ -85,22 +124,39 @@ export class CpslButton {
                 "reflect": false,
                 "defaultValue": "'medium'"
             },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "target to use when using a link."
+                },
+                "attribute": "target",
+                "reflect": false
+            },
             "variant": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary' | 'icon'",
-                    "resolved": "\"icon\" | \"primary\" | \"secondary\"",
+                    "original": "'primary' | 'secondary' | 'ghost' | 'destructive'",
+                    "resolved": "\"destructive\" | \"ghost\" | \"primary\" | \"secondary\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The variant of the button.\nOptions are: `\"primary\"`, `\"secondary\", `\"icon\".\nDefault is: `\"primary\"`."
+                    "text": "The variant of the button.\nOptions are: `\"primary\"`, `\"secondary\", `\"icon\", `\"text\"`.\nDefault is: `\"primary\"`."
                 },
                 "attribute": "variant",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "'primary'"
             }
         };

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;;wBAKyB,KAAK;yBAMrB,KAAK;oBAOC,QAAQ;uBAOS,SAAS;;IAE9D,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,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;gBAE/B,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,+DAAQ,IAAI,EAAC,eAAe,EAAC,KAAK,EAAC,eAAe;gBAChD,6DAAM,IAAI,EAAC,OAAO,GAAQ;gBAC1B,8DAAa;gBACb,6DAAM,IAAI,EAAC,KAAK,GAAQ,CACjB,CACJ,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   * 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   * The size of the button.\n   * Options are: `\"small\"`, `\"medium\".\n   * Default is: `\"medium\"`.\n   */\n  @Prop() size?: 'small' | 'medium' = 'medium';\n\n  /**\n   * The variant of the button.\n   * Options are: `\"primary\"`, `\"secondary\", `\"icon\".\n   * Default is: `\"primary\"`.\n   */\n  @Prop() variant?: 'primary' | 'secondary' | 'icon' = 'primary';\n\n  render() {\n    return (\n      <Host\n        class={{\n          // VARIANTS\n          'primary': this.variant === 'primary',\n          'secondary': this.variant === 'secondary',\n          'icon': this.variant === 'icon',\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        <button part=\"button-native\" class=\"button-native\">\n          <slot name=\"start\"></slot>\n          <slot></slot>\n          <slot name=\"end\"></slot>\n        </button>\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;;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"]}

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

@@ -80,6 +80,7 @@
   --button-padding-end: 0px;
   --button-padding-top: 0px;
   --button-padding-bottom: 0px;
+  --button-border-radius: var(--cpsl-border-radius-button-group);
   height: var(--button-size);
   width: var(--button-size);
 }

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

@@ -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: '18830efc419c35995cc7b31a89e2405e230f4978' }, h("slot", { key: 'f466f88653fd0fe91b258c03706b13adc78be777' })));
     }
     static get is() { return "cpsl-button-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -77,5 +77,5 @@
   overflow: hidden;
   border: var(--card-border-width) solid var(--card-border-color);
   border-radius: var(--card-border-radius);
-  background-color: var(--card-background-color);
+  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: '3f2a22aad0a9dde3c6819ec9746576691d2084e5', class: { card: true } }, h("slot", { key: 'c6f573694f67d2096cac429c27f87f3b04547d4b' }))));
+        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-card/cpsl-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"cpsl-card.js","sourceRoot":"","sources":["../../../../src/components/cpsl-card/cpsl-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,QAAQ;IACnB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;gBACxB,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-card',\n  styleUrl: 'cpsl-card.scss',\n  shadow: true,\n})\nexport class CpslCard {\n  render() {\n    return (\n      <Host>\n        <div class={{ card: true }}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cpsl-card.js","sourceRoot":"","sources":["../../../../src/components/cpsl-card/cpsl-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,QAAQ;IACnB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,IAAI,EAAC,gBAAgB;gBAC/C,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-card',\n  styleUrl: 'cpsl-card.scss',\n  shadow: true,\n})\nexport class CpslCard {\n  render() {\n    return (\n      <Host>\n        <div class={{ card: true }} part=\"card-container\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -90,7 +90,7 @@ span.container {
   height: 100%;
   border-radius: var(--container-border-radius);
   border: var(--container-border-width) solid;
-  background-color: var(--container-background-color-default);
+  background: var(--container-background-color-default);
   border-color: var(--container-border-color-default);
   transition: all 0.15s ease-in-out;
 }
@@ -102,7 +102,7 @@ span.container cpsl-icon {
   transition: all 0.15s ease-in-out;
 }
 span.container.checked {
-  background-color: var(--container-background-color-checked);
+  background: var(--container-background-color-checked);
   border-color: var(--container-border-color-checked);
 }
 span.container.checked cpsl-icon {

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

@@ -90,7 +90,7 @@
   color: var(--input-color);
   width: var(--input-width);
   height: var(--input-height);
-  background-color: var(--input-background-color);
+  background: var(--input-background-color);
   box-sizing: border-box;
   text-align: center;
   outline: none;

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

@@ -87,10 +87,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) => {
+        return (h(Host, { key: 'cee793d35dc39dce79834dd7c73038bf50e41442' }, h("div", { key: '1df541a5ae880c512c6c70c3b5f1cf64e1a89b8b', 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)))));
+        })), (this.errorText || this.helperText) && (h("div", { key: '2001f525a89d0b57287cd97367c6646de0de163a', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { key: 'c274e60e8fd04e18b2ebff6386d1fa46916d2d66', icon: Boolean(this.errorText) ? 'alertCircle' : 'infoCircle' }), h("span", { key: '56566c698720936d4225eea8b07f042e67f570e5' }, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
     }
     static get is() { return "cpsl-code-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"cpsl-code-input.js","sourceRoot":"","sources":["../../../../src/components/cpsl-code-input/cpsl-code-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\nimport { CodeChangeEventDetail } from './code-change-interface';\n\n@Component({\n  tag: 'cpsl-code-input',\n  styleUrl: 'cpsl-code-input.scss',\n  shadow: true,\n})\nexport class CpslCodeInput {\n  @Element() el!: HTMLCpslCodeInputElement;\n\n  /**\n   * Value of the code.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable\n  @Prop({ mutable: true }) code: string;\n\n  /**\n   * Error text to show below the input. If this is provided the input will enter an error state.\n   */\n  @Prop() errorText?: string;\n\n  /**\n   * Helper text to show below the input. If `\"errorText\"` is provided that will take precedence.\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Length of the code.\n   */\n  @Prop() length: number;\n\n  /**\n   * Type of characters to accept in the code.\n   * Defaults to number.\n   */\n  @Prop() type?: 'number' | 'string' = 'number';\n\n  /**\n   * The `cpslInput` event is fired each time the user modifies the input's value.\n   */\n  @Event() cpslInput!: EventEmitter<CodeChangeEventDetail>;\n\n  private handleInput = (ind: number, ev: InputEvent) => {\n    const inputElements = this.inputs;\n    if (ev.inputType == 'insertText') {\n      if (this.type === 'number' && isNaN(parseInt(ev.data))) {\n        inputElements[ind].value = '';\n        return;\n      }\n      inputElements[Math.min(this.length - 1, ind + 1)].focus();\n\n      const newCode = `${this.code ?? ''}${ev.data}`;\n      this.cpslInput.emit({ value: newCode });\n      this.code = newCode;\n    }\n  };\n\n  private handleKeyDown = (ind: number, ev: KeyboardEvent) => {\n    const inputElements = this.inputs;\n\n    switch (ev.key) {\n      case 'Backspace': {\n        let newCode;\n        if (!inputElements[ind].value) {\n          inputElements[Math.max(0, ind - 1)].value = '';\n          inputElements[Math.max(0, ind - 1)].focus();\n          newCode = this.code.substring(0, ind - 1);\n        } else {\n          newCode = this.code.substring(0, ind);\n        }\n        this.cpslInput.emit({ value: newCode });\n        this.code = newCode;\n        break;\n      }\n      case 'ArrowLeft': {\n        setTimeout(() => {\n          this.inputs[ind].setSelectionRange(1, 1);\n        }, 0);\n        break;\n      }\n      default: {\n        break;\n      }\n    }\n  };\n\n  private handleFocus = (ind: number) => {\n    const inputElements = this.inputs;\n\n    for (const input of inputElements) {\n      if (!input.value) {\n        input.focus();\n        break;\n      } else if (input.id === `code-input-${this.length - 1}`) {\n        input.focus();\n        break;\n      }\n    }\n\n    setTimeout(() => {\n      inputElements[ind].setSelectionRange(1, 1);\n    }, 0);\n  };\n\n  // TODO: figure out why pasting a string populates the first input\n  private handlePaste = (e: ClipboardEvent) => {\n    const inputElements = this.inputs;\n    const pastedCode = e.clipboardData.getData('text');\n\n    if (this.type === 'number' && isNaN(parseInt(pastedCode))) {\n      // Remove illegal value from the first input. Not using a timeout here doesn't change the value properly.\n      setTimeout(() => {\n        inputElements[0].value = '';\n      }, 0);\n      return;\n    }\n\n    this.cpslInput.emit({\n      value: pastedCode,\n    });\n    inputElements.forEach((input, index) => {\n      input.value = pastedCode.charAt(index);\n    });\n    inputElements[this.length - 1].focus();\n  };\n\n  private get inputs() {\n    return Array.from(this.el.shadowRoot.querySelectorAll('input'));\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"code-container\">\n          {new Array(this.length).fill(0).map((_, i) => (\n            <input\n              class={{ 'code-input': true, 'error': Boolean(this.errorText) }}\n              id={`code-input-${i}`}\n              maxLength={1}\n              onKeyDown={ev => this.handleKeyDown(i, ev)}\n              onInput={ev => this.handleInput(i, ev)}\n              onFocus={() => this.handleFocus(i)}\n              onPaste={this.handlePaste}\n              min={0}\n              max={9}\n              value={this.code?.[i]}\n              inputMode={this.type === 'number' ? 'numeric' : 'text'}\n            />\n          ))}\n        </div>\n        {(this.errorText || this.helperText) && (\n          <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n            <cpsl-icon icon={Boolean(this.errorText) ? 'alertCircle' : 'infoCircle'} />\n            <span>{this.errorText ?? this.helperText}</span>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cpsl-code-input.js","sourceRoot":"","sources":["../../../../src/components/cpsl-code-input/cpsl-code-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\nimport { CodeChangeEventDetail } from './code-change-interface';\n\n@Component({\n  tag: 'cpsl-code-input',\n  styleUrl: 'cpsl-code-input.scss',\n  shadow: true,\n})\nexport class CpslCodeInput {\n  @Element() el!: HTMLCpslCodeInputElement;\n\n  /**\n   * Value of the code.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable\n  @Prop({ mutable: true }) code: string;\n\n  /**\n   * Error text to show below the input. If this is provided the input will enter an error state.\n   */\n  @Prop() errorText?: string;\n\n  /**\n   * Helper text to show below the input. If `\"errorText\"` is provided that will take precedence.\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Length of the code.\n   */\n  @Prop() length: number;\n\n  /**\n   * Type of characters to accept in the code.\n   * Defaults to number.\n   */\n  @Prop() type?: 'number' | 'string' = 'number';\n\n  /**\n   * The `cpslInput` event is fired each time the user modifies the input's value.\n   */\n  @Event() cpslInput!: EventEmitter<CodeChangeEventDetail>;\n\n  private handleInput = (ind: number, ev: InputEvent) => {\n    const inputElements = this.inputs;\n    if (ev.inputType == 'insertText') {\n      if (this.type === 'number' && isNaN(parseInt(ev.data))) {\n        inputElements[ind].value = '';\n        return;\n      }\n      inputElements[Math.min(this.length - 1, ind + 1)].focus();\n\n      const newCode = `${this.code ?? ''}${ev.data}`;\n      this.cpslInput.emit({ value: newCode });\n      this.code = newCode;\n    }\n  };\n\n  private handleKeyDown = (ind: number, ev: KeyboardEvent) => {\n    const inputElements = this.inputs;\n\n    switch (ev.key) {\n      case 'Backspace': {\n        let newCode;\n        if (!inputElements[ind].value) {\n          inputElements[Math.max(0, ind - 1)].value = '';\n          inputElements[Math.max(0, ind - 1)].focus();\n          newCode = this.code.substring(0, ind - 1);\n        } else {\n          newCode = this.code.substring(0, ind);\n        }\n        this.cpslInput.emit({ value: newCode });\n        this.code = newCode;\n        break;\n      }\n      case 'ArrowLeft': {\n        setTimeout(() => {\n          this.inputs[ind].setSelectionRange(1, 1);\n        }, 0);\n        break;\n      }\n      default: {\n        break;\n      }\n    }\n  };\n\n  private handleFocus = (ind: number) => {\n    const inputElements = this.inputs;\n\n    for (const input of inputElements) {\n      if (!input.value) {\n        input.focus();\n        break;\n      } else if (input.id === `code-input-${this.length - 1}`) {\n        input.focus();\n        break;\n      }\n    }\n\n    setTimeout(() => {\n      inputElements[ind].setSelectionRange(1, 1);\n    }, 0);\n  };\n\n  // TODO: figure out why pasting a string populates the first input\n  private handlePaste = (e: ClipboardEvent) => {\n    const inputElements = this.inputs;\n    const pastedCode = e.clipboardData.getData('text');\n\n    if (this.type === 'number' && isNaN(parseInt(pastedCode))) {\n      // Remove illegal value from the first input. Not using a timeout here doesn't change the value properly.\n      setTimeout(() => {\n        inputElements[0].value = '';\n      }, 0);\n      return;\n    }\n\n    this.cpslInput.emit({\n      value: pastedCode,\n    });\n    inputElements.forEach((input, index) => {\n      input.value = pastedCode.charAt(index);\n    });\n    inputElements[this.length - 1].focus();\n  };\n\n  private get inputs() {\n    return Array.from(this.el.shadowRoot.querySelectorAll('input'));\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"code-container\">\n          {new Array(this.length).fill(0).map((_, i) => (\n            <input\n              class={{ 'code-input': true, 'error': Boolean(this.errorText) }}\n              id={`code-input-${i}`}\n              maxLength={1}\n              onKeyDown={ev => this.handleKeyDown(i, ev)}\n              onInput={ev => this.handleInput(i, ev)}\n              onFocus={() => this.handleFocus(i)}\n              onPaste={this.handlePaste}\n              min={0}\n              max={9}\n              value={this.code?.[i]}\n              inputMode={this.type === 'number' ? 'numeric' : 'text'}\n            />\n          ))}\n        </div>\n        {(this.errorText || this.helperText) && (\n          <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n            <cpsl-icon icon={Boolean(this.errorText) ? 'alertCircle' : 'infoCircle'} />\n            <span>{this.errorText ?? this.helperText}</span>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -89,7 +89,7 @@ export class CpslCol {
     }
     render() {
         const isRTL = document.dir === 'rtl';
-        return (h(Host, { key: 'e883138d5be5bfcffaa61fc3f440cfaf3c2c567d', style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '51c74a5a0895f34074b65441be91f02c3243ba8c' })));
+        return (h(Host, { key: 'c8173c44fb66a24831c110618000da8edadbded8', style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '04fa1eb6e5d9feaa28141c55cc0cd72a5e0e39a7' })));
     }
     static get is() { return "cpsl-col"; }
     static get encapsulation() { return "shadow"; }

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

@@ -68,6 +68,6 @@
 
 :host div {
   flex: 1;
-  background-color: var(--divider-color);
+  background: var(--divider-color);
   height: var(--divider-height);
 }

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class CpslDivider {
     render() {
-        return (h(Host, { key: '1ed13a5022a89b899e6a16f168bff6b71c3c2ad8' }, h("div", { key: 'e9fec054de82d84298ac7cf7fc45f239a9a78442' }), h("slot", { key: 'c6ab3f0e787ee245d206b300c68192bfb3515aa6' }), h("div", { key: '5591e16b69c4cdce5cd5b9932923a189440b7fd5' })));
+        return (h(Host, { key: 'd5cffdef9344f7dcac4aae1bc2acca8c02d69946' }, h("div", { key: 'e07f8107804df83537a3b8e40d124c66d2fc6f44' }), h("slot", { key: 'd97f02d46a63d32d107838b5aa50654a9593cc8a' }), h("div", { key: '2316aed010b91a65c961e2f30cc2cde03b892429' })));
     }
     static get is() { return "cpsl-divider"; }
     static get encapsulation() { return "shadow"; }