@usecapsule/core-components 3.0.0 → 3.0.1-dev.2

package/dist/collection/assets/icons/lightning.svg

@@ -1,3 +1,3 @@
-<svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 14.8962L5 9.89624L1 8.39624L8 0.89624L7 5.89624L11 7.39624L4 14.8962Z" stroke="#A3A3A3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 2L4.09347 12.6879C3.74466 13.1064 3.57026 13.3157 3.56759 13.4925C3.56528 13.6461 3.63375 13.7923 3.75327 13.8889C3.89076 14 4.16319 14 4.70805 14H12L11 22L19.9066 11.3121C20.2554 10.8936 20.4298 10.6843 20.4324 10.5075C20.4348 10.3539 20.3663 10.2077 20.2468 10.1111C20.1093 10 19.8368 10 19.292 10H12L13 2Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/dist/collection/assets/icons/menu.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 12H21M3 6H21M3 18H21" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/collection/assets/icons/refresh.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 10C2 10 2.12132 9.15076 5.63604 5.63604C9.15076 2.12132 14.8492 2.12132 18.364 5.63604C19.6092 6.88131 20.4133 8.40072 20.7762 10M2 10V4M2 10H8M22 14C22 14 21.8787 14.8492 18.364 18.364C14.8492 21.8787 9.15076 21.8787 5.63604 18.364C4.39076 17.1187 3.58669 15.5993 3.22383 14M22 14V20M22 14H16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/collection/assets/icons/stars.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.5 13L7.28446 14.5689C7.54995 15.0999 7.68269 15.3654 7.86003 15.5954C8.01739 15.7996 8.20041 15.9826 8.40455 16.14C8.63462 16.3173 8.9001 16.4501 9.43108 16.7155L11 17.5L9.43108 18.2845C8.9001 18.5499 8.63462 18.6827 8.40455 18.86C8.20041 19.0174 8.01739 19.2004 7.86003 19.4046C7.68269 19.6346 7.54995 19.9001 7.28446 20.4311L6.5 22L5.71554 20.4311C5.45005 19.9001 5.31731 19.6346 5.13997 19.4046C4.98261 19.2004 4.79959 19.0174 4.59545 18.86C4.36538 18.6827 4.0999 18.5499 3.56892 18.2845L2 17.5L3.56892 16.7155C4.0999 16.4501 4.36538 16.3173 4.59545 16.14C4.79959 15.9826 4.98261 15.7996 5.13997 15.5954C5.31731 15.3654 5.45005 15.0999 5.71554 14.5689L6.5 13Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 2L16.1786 5.06442C16.4606 5.79765 16.6016 6.16426 16.8209 6.47264C17.0153 6.74595 17.254 6.98475 17.5274 7.17909C17.8357 7.39836 18.2024 7.53937 18.9356 7.82138L22 9L18.9356 10.1786C18.2024 10.4606 17.8357 10.6016 17.5274 10.8209C17.254 11.0153 17.0153 11.254 16.8209 11.5274C16.6016 11.8357 16.4606 12.2024 16.1786 12.9356L15 16L13.8214 12.9356C13.5394 12.2024 13.3984 11.8357 13.1791 11.5274C12.9847 11.254 12.746 11.0153 12.4726 10.8209C12.1643 10.6016 11.7976 10.4606 11.0644 10.1786L8 9L11.0644 7.82138C11.7976 7.53937 12.1643 7.39836 12.4726 7.17909C12.746 6.98475 12.9847 6.74595 13.1791 6.47264C13.3984 6.16426 13.5394 5.79765 13.8214 5.06442L15 2Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/collection/assets/icons/x.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 7L7 17M7 7L17 17" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/collection/collection-manifest.json

@@ -13,19 +13,24 @@
     "components/cpsl-divider/cpsl-divider.js",
     "components/cpsl-drawer/cpsl-drawer.js",
     "components/cpsl-dropdown/cpsl-dropdown.js",
+    "components/cpsl-file-upload/cpsl-file-upload.js",
     "components/cpsl-grid/cpsl-grid.js",
     "components/cpsl-icon/cpsl-icon.js",
     "components/cpsl-info-box/cpsl-info-box.js",
     "components/cpsl-input/cpsl-input.js",
     "components/cpsl-modal/cpsl-modal.js",
+    "components/cpsl-modal-v2/cpsl-modal-v2.js",
     "components/cpsl-nav-button-group/cpsl-nav-button-group.js",
     "components/cpsl-overlay/cpsl-overlay.js",
     "components/cpsl-pagination/cpsl-pagination.js",
     "components/cpsl-pill/cpsl-pill.js",
+    "components/cpsl-popover/cpsl-popover.js",
     "components/cpsl-progress-indicator/cpsl-progress-indicator.js",
     "components/cpsl-qr-code/cpsl-qr-code.js",
     "components/cpsl-radio/cpsl-radio.js",
     "components/cpsl-row/cpsl-row.js",
+    "components/cpsl-select/cpsl-select.js",
+    "components/cpsl-select-item/cpsl-select-item.js",
     "components/cpsl-slide-button/cpsl-slide-button.js",
     "components/cpsl-spinner/cpsl-spinner.js",
     "components/cpsl-switch/cpsl-switch.js",
@@ -37,8 +42,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.12.5",
-    "typescriptVersion": "5.3.3"
+    "version": "4.18.3",
+    "typescriptVersion": "5.4.5"
   },
   "collections": [],
   "bundles": []

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

@@ -25,7 +25,7 @@ export class CpslAlert {
         }
     }
     render() {
-        return (h(Host, { key: 'f7534f6c528225bc1c5704870eceb202304a8f37', class: { error: this.variant === 'error', warning: this.variant === 'warning', success: this.variant === 'success' } }, h("div", { key: 'fade95f15517a992708d924cd7a1ca17a6077c22', class: "alert-container" }, this.iconType && h("cpsl-icon", { icon: this.iconType }), h("slot", { key: '8a2ed501e583e444203fa6168c7eb10011ec57fe' }))));
+        return (h(Host, { key: 'f7534f6c528225bc1c5704870eceb202304a8f37', class: { error: this.variant === 'error', warning: this.variant === 'warning', success: this.variant === 'success' } }, h("div", { key: 'fade95f15517a992708d924cd7a1ca17a6077c22', class: "alert-container" }, this.iconType && h("cpsl-icon", { key: 'c037b1d18057d53d05e52be9cfbb81f234ea0f1d', icon: this.iconType }), h("slot", { key: 'ec02796cf9ad119f95be56701d28e3490b07bc43' }))));
     }
     static get is() { return "cpsl-alert"; }
     static get encapsulation() { return "shadow"; }
@@ -46,7 +46,7 @@ export class CpslAlert {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "\"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BQ2\" | \"BQ3\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CD2\" | \"CF\" | \"CH\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DS\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB2\" | \"GB\" | \"GD\" | \"GE\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PN\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SE\" | \"SG\" | \"SI\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WS\" | \"YE\" | \"ZA\" | \"ZM\" | \"ZW\" | \"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircle\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"figmaBrand\" | \"figma\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"home\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"settings\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"wallet\" | \"youtubeBrand\" | \"youtube\"",
+                    "resolved": "\"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BQ2\" | \"BQ3\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CD2\" | \"CF\" | \"CH\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DS\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB2\" | \"GB\" | \"GD\" | \"GE\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PN\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SE\" | \"SG\" | \"SI\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WS\" | \"YE\" | \"ZA\" | \"ZM\" | \"ZW\" | \"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircle\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"cube\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"figmaBrand\" | \"figma\" | \"file\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"home\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning01\" | \"lightning\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"menu\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"settings\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"stars\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"wallet\" | \"x\" | \"youtubeBrand\" | \"youtube\"",
                     "references": {
                         "IconType": {
                             "location": "import",

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

@@ -1 +1 @@
-{"version":3,"file":"cpsl-alert.js","sourceRoot":"","sources":["../../../../src/components/cpsl-alert/cpsl-alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,SAAS;;;uBAW2C,OAAO;;IAEtE,IAAY,QAAQ;QAClB,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,CAAC;QACZ,CAAC;QAED,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;YACrB,KAAK,QAAQ,CAAC,CAAC,CAAC;gBACd,OAAO,SAAS,CAAC;YACnB,CAAC;YACD,KAAK,SAAS,CAAC,CAAC,CAAC;gBACf,OAAO,aAAa,CAAC;YACvB,CAAC;YACD,KAAK,SAAS,CAAC,CAAC,CAAC;gBACf,OAAO,aAAa,CAAC;YACvB,CAAC;YACD,KAAK,OAAO,CAAC;YACb,OAAO,CAAC,CAAC,CAAC;gBACR,OAAO,aAAa,CAAC;YACvB,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE;YACxH,4DAAK,KAAK,EAAC,iBAAiB;gBACzB,IAAI,CAAC,QAAQ,IAAI,iBAAW,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAI;gBACpD,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { IconType } from '../../interface';\n\n@Component({\n  tag: 'cpsl-alert',\n  styleUrl: 'cpsl-alert.scss',\n  shadow: true,\n})\nexport class CpslAlert {\n  /**\n   * The name of the icon to show.\n   */\n  @Prop() icon?: IconType;\n\n  /**\n   * The variant of alert.\n   * Options are: `\"error\"` | `\"warning\"` | `\"success\"` | `\"custom\"`\n   * Default is: `\"error\"`.\n   */\n  @Prop() variant?: 'error' | 'warning' | 'success' | 'custom' = 'error';\n\n  private get iconType(): IconType | undefined {\n    if (Boolean(this.icon)) {\n      this.icon;\n    }\n\n    switch (this.variant) {\n      case 'custom': {\n        return undefined;\n      }\n      case 'success': {\n        return 'checkCircle';\n      }\n      case 'warning': {\n        return 'alertCircle';\n      }\n      case 'error':\n      default: {\n        return 'alertCircle';\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host class={{ error: this.variant === 'error', warning: this.variant === 'warning', success: this.variant === 'success' }}>\n        <div class=\"alert-container\">\n          {this.iconType && <cpsl-icon icon={this.iconType} />}\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cpsl-alert.js","sourceRoot":"","sources":["../../../../src/components/cpsl-alert/cpsl-alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,SAAS;;;uBAW2C,OAAO;;IAEtE,IAAY,QAAQ;QAClB,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,CAAC;QACZ,CAAC;QAED,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;YACrB,KAAK,QAAQ,CAAC,CAAC,CAAC;gBACd,OAAO,SAAS,CAAC;YACnB,CAAC;YACD,KAAK,SAAS,CAAC,CAAC,CAAC;gBACf,OAAO,aAAa,CAAC;YACvB,CAAC;YACD,KAAK,SAAS,CAAC,CAAC,CAAC;gBACf,OAAO,aAAa,CAAC;YACvB,CAAC;YACD,KAAK,OAAO,CAAC;YACb,OAAO,CAAC,CAAC,CAAC;gBACR,OAAO,aAAa,CAAC;YACvB,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE;YACxH,4DAAK,KAAK,EAAC,iBAAiB;gBACzB,IAAI,CAAC,QAAQ,IAAI,kEAAW,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAI;gBACpD,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { IconType } from '../../interface';\n\n@Component({\n  tag: 'cpsl-alert',\n  styleUrl: 'cpsl-alert.scss',\n  shadow: true,\n})\nexport class CpslAlert {\n  /**\n   * The name of the icon to show.\n   */\n  @Prop() icon?: IconType;\n\n  /**\n   * The variant of alert.\n   * Options are: `\"error\"` | `\"warning\"` | `\"success\"` | `\"custom\"`\n   * Default is: `\"error\"`.\n   */\n  @Prop() variant?: 'error' | 'warning' | 'success' | 'custom' = 'error';\n\n  private get iconType(): IconType | undefined {\n    if (Boolean(this.icon)) {\n      this.icon;\n    }\n\n    switch (this.variant) {\n      case 'custom': {\n        return undefined;\n      }\n      case 'success': {\n        return 'checkCircle';\n      }\n      case 'warning': {\n        return 'alertCircle';\n      }\n      case 'error':\n      default: {\n        return 'alertCircle';\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host class={{ error: this.variant === 'error', warning: this.variant === 'warning', success: this.variant === 'success' }}>\n        <div class=\"alert-container\">\n          {this.iconType && <cpsl-icon icon={this.iconType} />}\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -41,7 +41,7 @@ export class CpslAnimation {
         return this.el.shadowRoot.getElementById('animation-container');
     }
     render() {
-        return (h(Host, { key: '7a121c6f09a28dcffdd54d837b75d442b27c48f0' }, h("div", { key: '15accd8138d211272bcdce917fbcb347f7ce4697', part: "animation-container", id: "animation-container", class: "animation-container" })));
+        return (h(Host, { key: '5fab748126f7b18a9051aa89df1b8a78ef647648' }, h("div", { key: 'b9cac260ee00f54a56c7cd249850a8df5e84dc3b', part: "animation-container", id: "animation-container", class: "animation-container" })));
     }
     static get is() { return "cpsl-animation"; }
     static get encapsulation() { return "shadow"; }

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

@@ -3,14 +3,13 @@ export class CpslAppBar {
     constructor() {
         this.height = undefined;
         this.position = 'fixed';
+        this.zIndexOverride = undefined;
     }
     render() {
-        return (h(Host, { key: 'ea193eb47aaa71a32556004f5a43b8e903408054', style: {
-                height: `${this.height}px`,
-            } }, h("div", { key: '7e3c3b25bb6dfe9177de027ee9920c190b55b265', class: "container", part: "container", style: {
+        return (h(Host, { key: '4608b0dc424585b7e7f865d55b3d217ebe172f04', style: Object.assign({ height: `${this.height}px` }, (Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {})) }, h("div", { key: 'c598749bcfb29c806856573b9f61141b7b68022e', class: "container", part: "container", style: {
                 position: this.position,
                 height: `${this.height}px`,
-            } }, h("slot", { key: '00ac3af6b3485807bf63701f9b0b845efcb288c7' })), this.position === 'fixed' && (h("div", { style: {
+            } }, h("slot", { key: '7e2bd9efbe98ca5ff70dd0bc33333d95799f5fe7' })), this.position === 'fixed' && (h("div", { key: 'fc4e1e9f6414ccf74c816f19be79b7d4b0df8bd5', style: {
                 height: `${this.height}px`,
             } }))));
     }
@@ -62,6 +61,23 @@ export class CpslAppBar {
                 "attribute": "position",
                 "reflect": false,
                 "defaultValue": "'fixed'"
+            },
+            "zIndexOverride": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Override z-index."
+                },
+                "attribute": "z-index-override",
+                "reflect": false
             }
         };
     }

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

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

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

@@ -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 {