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

Sign up to get free protection for your applications and to get access to all the features.
Files changed (88) hide show
  1. package/css/capsule-core.css +12 -0
  2. package/css/capsule-core.css.map +1 -1
  3. package/dist/capsule/capsule.esm.js +1 -1
  4. package/dist/capsule/capsule.esm.js.map +1 -1
  5. package/dist/capsule/index.esm.js +1 -1
  6. package/dist/capsule/index.esm.js.map +1 -1
  7. package/dist/capsule/{p-68c73705.entry.js → p-0cab90fa.entry.js} +2 -2
  8. package/dist/capsule/{p-91412151.entry.js → p-193ac141.entry.js} +2 -2
  9. package/dist/capsule/p-c7be2546.entry.js +29 -0
  10. package/dist/capsule/p-c7be2546.entry.js.map +1 -0
  11. package/dist/capsule/p-cb8dc0a4.entry.js +2 -0
  12. package/dist/cjs/capsule.cjs.js +1 -1
  13. package/dist/cjs/{cpsl-alert_17.cjs.entry.js → cpsl-alert_18.cjs.entry.js} +150 -37
  14. package/dist/cjs/cpsl-alert_18.cjs.entry.js.map +1 -0
  15. package/dist/cjs/cpsl-grid.cjs.entry.js +2 -2
  16. package/dist/cjs/cpsl-info-box.cjs.entry.js +1 -1
  17. package/dist/cjs/cpsl-row.cjs.entry.js +1 -1
  18. package/dist/cjs/index-3fccb5b4.js +2 -2
  19. package/dist/cjs/index.cjs.js +28 -8
  20. package/dist/cjs/index.cjs.js.map +1 -1
  21. package/dist/cjs/loader.cjs.js +1 -1
  22. package/dist/collection/assets/icons/chevron-up.svg +3 -0
  23. package/dist/collection/assets/icons/index.js +2 -1
  24. package/dist/collection/assets/icons/index.js.map +1 -1
  25. package/dist/collection/collection-manifest.json +1 -0
  26. package/dist/collection/components/cpsl-alert/cpsl-alert.js +1 -1
  27. package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.css +88 -0
  28. package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js +113 -0
  29. package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js.map +1 -0
  30. package/dist/collection/components/cpsl-dropdown/test/cpsl-dropdown.e2e.js +29 -0
  31. package/dist/collection/components/cpsl-dropdown/test/cpsl-dropdown.e2e.js.map +1 -0
  32. package/dist/collection/components/cpsl-dropdown/test/cpsl-dropdown.spec.js +37 -0
  33. package/dist/collection/components/cpsl-dropdown/test/cpsl-dropdown.spec.js.map +1 -0
  34. package/dist/collection/components/cpsl-grid/cpsl-grid.js +2 -2
  35. package/dist/collection/components/cpsl-icon/cpsl-icon.js +2 -2
  36. package/dist/collection/components/cpsl-info-box/cpsl-info-box.js +1 -1
  37. package/dist/collection/components/cpsl-input/cpsl-input.css +3 -3
  38. package/dist/collection/components/cpsl-input/cpsl-input.js +2 -2
  39. package/dist/collection/components/cpsl-modal/cpsl-modal.js +27 -21
  40. package/dist/collection/components/cpsl-modal/cpsl-modal.js.map +1 -1
  41. package/dist/collection/components/cpsl-overlay/cpsl-overlay.js +1 -1
  42. package/dist/collection/components/cpsl-pill/cpsl-pill.js +1 -1
  43. package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.js +1 -1
  44. package/dist/collection/components/cpsl-row/cpsl-row.js +1 -1
  45. package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js +3 -3
  46. package/dist/collection/components/cpsl-spinner/cpsl-spinner.js +2 -2
  47. package/dist/collection/components/cpsl-tab/cpsl-tab.js +1 -1
  48. package/dist/collection/components/cpsl-tabs/cpsl-tabs.js +1 -1
  49. package/dist/collection/components/cpsl-text/cpsl-text.css +101 -0
  50. package/dist/collection/components/cpsl-text/cpsl-text.js +110 -1
  51. package/dist/collection/components/cpsl-text/cpsl-text.js.map +1 -1
  52. package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.js +2 -2
  53. package/dist/collection/index.js +1 -1
  54. package/dist/collection/index.js.map +1 -1
  55. package/dist/collection/interface.js.map +1 -1
  56. package/dist/collection/utils/theme/generateFont.js +25 -4
  57. package/dist/collection/utils/theme/generateFont.js.map +1 -1
  58. package/dist/collection/utils/theme/generateTheme.js +2 -3
  59. package/dist/collection/utils/theme/generateTheme.js.map +1 -1
  60. package/dist/esm/capsule.js +1 -1
  61. package/dist/esm/{cpsl-alert_17.entry.js → cpsl-alert_18.entry.js} +150 -38
  62. package/dist/esm/cpsl-alert_18.entry.js.map +1 -0
  63. package/dist/esm/cpsl-grid.entry.js +2 -2
  64. package/dist/esm/cpsl-info-box.entry.js +1 -1
  65. package/dist/esm/cpsl-row.entry.js +1 -1
  66. package/dist/esm/index-f00e090c.js +2 -2
  67. package/dist/esm/index.js +28 -8
  68. package/dist/esm/index.js.map +1 -1
  69. package/dist/esm/loader.js +1 -1
  70. package/dist/types/assets/icons/index.d.ts +1 -0
  71. package/dist/types/components/cpsl-dropdown/cpsl-dropdown.d.ts +25 -0
  72. package/dist/types/components/cpsl-modal/cpsl-modal.d.ts +2 -0
  73. package/dist/types/components/cpsl-text/cpsl-text.d.ts +4 -0
  74. package/dist/types/components.d.ts +53 -0
  75. package/dist/types/index.d.ts +1 -1
  76. package/dist/types/interface.d.ts +15 -0
  77. package/dist/types/utils/theme/generateFont.d.ts +1 -1
  78. package/dist/types/utils/theme/generateTheme.d.ts +1 -2
  79. package/package.json +2 -3
  80. package/dist/capsule/p-202a85c9.entry.js +0 -29
  81. package/dist/capsule/p-202a85c9.entry.js.map +0 -1
  82. package/dist/capsule/p-f604b591.entry.js +0 -2
  83. package/dist/cjs/cpsl-alert_17.cjs.entry.js.map +0 -1
  84. package/dist/esm/cpsl-alert_17.entry.js.map +0 -1
  85. /package/dist/capsule/{p-68c73705.entry.js.map → p-0cab90fa.entry.js.map} +0 -0
  86. /package/dist/capsule/{p-91412151.entry.js.map → p-193ac141.entry.js.map} +0 -0
  87. /package/dist/capsule/{p-f604b591.entry.js.map → p-cb8dc0a4.entry.js.map} +0 -0
  88. /package/dist/types/Users/{taylorbosch → vinay}/Documents/GitHub/Capsule/component-library/core/.stencil/scripts/buildIconLibrary.d.ts +0 -0
@@ -145,6 +145,11 @@ const Check = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" strok
145
145
  </svg>
146
146
  `;
147
147
 
148
+ const ChevronUp = `<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
149
+ <path d="M13 7L7 0.999999L1 7" stroke="#525252" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
150
+ </svg>
151
+ `;
152
+
148
153
  const Clock = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
149
154
  <path d="M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
150
155
  </svg>
@@ -614,7 +619,7 @@ const Youtube = `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentCo
614
619
  </svg>
615
620
  `;
616
621
 
617
- const Icons = { alertCircle: AlertCircle, angelListBrand: AngelListBrand, angelList: AngelList, appleBrand: AppleBrand, apple: Apple, arrowNarrow: ArrowNarrow, arrow: Arrow, backupKit: BackupKit, capsuleLogo: CapsuleLogo, capsuleRingsDark: CapsuleRingsDark, capsuleRings: CapsuleRings, capsule: Capsule, check: Check, clock: Clock, close: Close, clubhouseBrand: ClubhouseBrand, clubhouse: Clubhouse, copy: Copy, discordBrand: DiscordBrand, discord: Discord, downloadCloud: DownloadCloud, dribbbleBrand: DribbbleBrand, dribbble: Dribbble, eyeOff: EyeOff, eye: Eye, facebookBrand: FacebookBrand, facebook: Facebook, figmaBrand: FigmaBrand, figma: Figma, githubBrand: GithubBrand, github: Github, googleBrand: GoogleBrand, google: Google, helpCircle: HelpCircle, heroEmail: HeroEmail, heroLock: HeroLock, heroPasskey: HeroPasskey, heroPhone: HeroPhone, heroWallet: HeroWallet, infoCircle: InfoCircle, instagramBrand: InstagramBrand, instagram: Instagram, key: Key, linkedinBrand: LinkedinBrand, linkedin: Linkedin, mail: Mail, moreLoginOptions: MoreLoginOptions, phone: Phone, pintrestBrand: PintrestBrand, pintrest: Pintrest, plusCircle: PlusCircle, redditBrand: RedditBrand, reddit: Reddit, signalBrand: SignalBrand, signal: Signal, snapchatBrand: SnapchatBrand, snapchat: Snapchat, telegramBrand: TelegramBrand, telegram: Telegram, tikTokBrand: TikTokBrand, tikTok: TikTok, tumblrBrand: TumblrBrand, tumblr: Tumblr, twitterBrand: TwitterBrand, twitter: Twitter, wallet: Wallet, youtubeBrand: YoutubeBrand, youtube: Youtube, };
622
+ const Icons = { alertCircle: AlertCircle, angelListBrand: AngelListBrand, angelList: AngelList, appleBrand: AppleBrand, apple: Apple, arrowNarrow: ArrowNarrow, arrow: Arrow, backupKit: BackupKit, capsuleLogo: CapsuleLogo, capsuleRingsDark: CapsuleRingsDark, capsuleRings: CapsuleRings, capsule: Capsule, check: Check, chevronUp: ChevronUp, clock: Clock, close: Close, clubhouseBrand: ClubhouseBrand, clubhouse: Clubhouse, copy: Copy, discordBrand: DiscordBrand, discord: Discord, downloadCloud: DownloadCloud, dribbbleBrand: DribbbleBrand, dribbble: Dribbble, eyeOff: EyeOff, eye: Eye, facebookBrand: FacebookBrand, facebook: Facebook, figmaBrand: FigmaBrand, figma: Figma, githubBrand: GithubBrand, github: Github, googleBrand: GoogleBrand, google: Google, helpCircle: HelpCircle, heroEmail: HeroEmail, heroLock: HeroLock, heroPasskey: HeroPasskey, heroPhone: HeroPhone, heroWallet: HeroWallet, infoCircle: InfoCircle, instagramBrand: InstagramBrand, instagram: Instagram, key: Key, linkedinBrand: LinkedinBrand, linkedin: Linkedin, mail: Mail, moreLoginOptions: MoreLoginOptions, phone: Phone, pintrestBrand: PintrestBrand, pintrest: Pintrest, plusCircle: PlusCircle, redditBrand: RedditBrand, reddit: Reddit, signalBrand: SignalBrand, signal: Signal, snapchatBrand: SnapchatBrand, snapchat: Snapchat, telegramBrand: TelegramBrand, telegram: Telegram, tikTokBrand: TikTokBrand, tikTok: TikTok, tumblrBrand: TumblrBrand, tumblr: Tumblr, twitterBrand: TwitterBrand, twitter: Twitter, wallet: Wallet, youtubeBrand: YoutubeBrand, youtube: Youtube, };
618
623
 
619
624
  const cpslAlertCss = ":host{--container-gap:8px;--container-padding-top:4px;--container-padding-bottom:4px;--container-padding-start:16px;--container-padding-end:16px;--container-font-size:clamp(12px, 0.75rem, 18px);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-alert);display:inline-block;font-family:var(--cpsl-font-family, inherit)}:host(.error){--container-background-color:var(--cpsl-color-alert-surface-error);--container-border-color:var(--cpsl-color-alert-border-error);--container-color:var(--cpsl-color-text-error)}.alert-container{border-radius:var(--container-border-radius);-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);font-size:var(--container-font-size);font-weight:500;display:flex;align-items:center;justify-content:center;gap:var(--container-gap);border-style:solid;border-width:var(--container-border-width);border-color:var(--container-border-color);background-color:var(--container-background-color);color:var(--container-color)}.icon{display:flex}";
620
625
  const CpslAlertStyle0 = cpslAlertCss;
@@ -774,6 +779,58 @@ const CpslDivider = class {
774
779
  };
775
780
  CpslDivider.style = CpslDividerStyle0;
776
781
 
782
+ const cpslDropdownCss = ":host{display:block;position:relative;font-family:Arial, sans-serif}.input-container{position:relative;width:100%}::slotted(cpsl-dropdown){position:absolute;width:100%;top:100%;left:0;z-index:2}.dropdown-button{display:flex;width:100%;padding:0 4px;background:none;border:none;align-items:center;justify-content:space-between;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:inherit;color:inherit}.dropdown-button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1}.dropdown-button div{margin-left:8px;display:flex;align-items:center}.dropdown-options{display:none;position:absolute;list-style:none;padding:0;margin:0;border:1px solid #ccc;background:white;z-index:1000}.dropdown-options.open{display:block;border-radius:8px;border:1px solid #483e3e}.dropdown-options.open{display:block;margin-top:20px}.dropdown-options li{padding:6px;cursor:pointer;display:flex;align-items:center;border-bottom:1px solid #ccc}.dropdown-options li svg{width:24px;height:24px;margin-right:8px;padding:0 8px}.dropdown-value{margin-left:8px;color:#6c757d}";
783
+ const CpslDropdownStyle0 = cpslDropdownCss;
784
+
785
+ const CpslDropdown = class {
786
+ constructor(hostRef) {
787
+ registerInstance(this, hostRef);
788
+ this.toggleDropdown = () => {
789
+ this.isOpen = !this.isOpen;
790
+ };
791
+ this.selectItem = (item) => {
792
+ this.selectedItem = item;
793
+ this.toggleDropdown();
794
+ };
795
+ this.handleItemSelect = (item) => () => {
796
+ this.selectItem(item);
797
+ };
798
+ this.width = '100%';
799
+ this.isOpen = false;
800
+ this.selectedItem = undefined;
801
+ this.items = [];
802
+ }
803
+ handleOpenChange() {
804
+ if (this.isOpen) {
805
+ this.adjustPosition();
806
+ }
807
+ }
808
+ adjustPosition() {
809
+ var _a;
810
+ const dropdownOptions = this.el.shadowRoot.querySelector('.dropdown-options');
811
+ const hostRect = this.el.getBoundingClientRect();
812
+ const parentRect = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
813
+ if (parentRect) {
814
+ this.width = `${parentRect.width}px`;
815
+ dropdownOptions.style.left = `${parentRect.left - hostRect.left}px`;
816
+ }
817
+ }
818
+ componentWillLoad() {
819
+ if (this.items.length > 0) {
820
+ this.selectedItem = this.items[0];
821
+ }
822
+ }
823
+ render() {
824
+ var _a, _b, _c;
825
+ return (h(Host, { key: '6882468bccd50b57e16ce09ca360392415c0b1ce', style: { width: this.width } }, h("button", { key: '0f34c3f861543fd6f2781adeb371f6dbbf4a7e7c', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, h("div", { key: '9d266062c49e3fce689eccf57229534043d975e8', innerHTML: Icons['chevronUp'] })), h("ul", { key: 'c82c76fae351883748e0094d218cfff8261b8ed8', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.items.map(item => h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: item.icon }), item.label, " ", h("span", { class: "dropdown-value" }, item.value))))));
826
+ }
827
+ get el() { return getElement(this); }
828
+ static get watchers() { return {
829
+ "isOpen": ["handleOpenChange"]
830
+ }; }
831
+ };
832
+ CpslDropdown.style = CpslDropdownStyle0;
833
+
777
834
  const cpslIconCss = ":host{display:block;--height:24px;--width:24px;--icon-color:var(--cpsl-color-text-primary);--icon-fill-color:var(--cpsl-color-text-primary);--icon-stroke-color:var(--cpsl-color-text-primary);width:var(--width);height:var(--height)}:host div{display:flex;width:var(--width);height:var(--height);color:var(--icon-color)}:host svg{width:var(--width);height:var(--height)}:host svg .background-16{fill:var(--cpsl-color-background-16)}:host svg .foreground-0{fill:var(--cpsl-color-foreground-0)}:host svg .fill{fill:var(--icon-fill-color)}:host svg .stroke{stroke:var(--icon-stroke-color)}:host img{width:var(--width);height:var(--height);object-fit:contain}";
778
835
  const CpslIconStyle0 = cpslIconCss;
779
836
 
@@ -784,12 +841,12 @@ const CpslIcon = class {
784
841
  this.icon = undefined;
785
842
  }
786
843
  render() {
787
- return (h(Host, { key: '81ab45a6a6bb0597743d8ebc490d56f97b9a15a4', part: "icon", role: "img" }, !Boolean(this.icon) ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
844
+ return (h(Host, { key: '89f3081baf013558e965cc6682811d66dc2b188d', part: "icon", role: "img" }, !Boolean(this.icon) ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
788
845
  }
789
846
  };
790
847
  CpslIcon.style = CpslIconStyle0;
791
848
 
792
- const cpslInputCss = ":host{--container-box-shadow:none;--container-box-shadow-color:var(--cpsl-color-alpha-black-16);--container-border-color:var(--cpsl-color-input-border-active);--container-border-error-color:var(--cpsl-color-input-border-error);--container-background-color:var(--cpsl-color-input-surface-default);--container-background-color-disabled:var(--cpsl-color-input-surface-disabled);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-input);--container-padding-top:4px;--container-padding-bottom:4px;--container-padding-end:4px;--container-padding-start:8px;--container-height:46px;--container-gap:8px;--input-background-color:var(--cpsl-color-input-surface-default);--input-background-color-disabled:var(--cpsl-color-input-surface-disabled);--input-color:var(--cpsl-color-text-primary);--input-placeholder-color:var(--cpsl-color-text-secondary);--input-font-size:clamp(16px, 1rem, 24px);--label-color:var(--cpsl-color-text-primary);--label-font-size:clamp(14px, 0.875rem, 21px);--label-margin-bottom:5px;--helper-text-color:var(--cpsl-color-text-secondary);--helper-text-error-color:var(--cpsl-color-text-error);--helper-text-icon-color:var(--cpsl-color-text-secondary);--helper-text-icon-error-color:var(--cpsl-color-text-error);--helper-text-icon-size:16px;--helper-text-font-size:clamp(14px, 0.875rem, 21px);--helper-text-margin-top:8px;display:block;font-family:var(--cpsl-font-family, inherit)}:host(.disabled){--container-background-color:var(--container-background-color-disabled);--input-background-color:var(--input-background-color-disabled);--input-color:var(--cpsl-color-text-secondary)}:host(:not(.has-value)){--container-border-color:var(--cpsl-color-input-border-placeholder);--input-color:var(--cpsl-color-text-secondary);--container-background-color:transparent;--input-background-color:transparent}:host(.focused){--container-box-shadow:0px 0px 0px 2px var(--container-box-shadow-color);--container-border-color:var(--cpsl-color-input-border-active);--container-background-color:var(--cpsl-color-input-surface-default)}.input-container{-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);display:flex;align-items:center;box-sizing:border-box;height:var(--container-height);gap:var(--container-gap);border-style:solid;border-width:var(--container-border-width);border-color:var(--container-border-color);border-radius:var(--container-border-radius);background-color:var(--container-background-color);box-shadow:var(--container-box-shadow)}.error-container{border-color:var(--container-border-error-color)}.native-input{flex:1;min-width:0;border:none;height:100%;box-sizing:border-box;font-size:var(--input-font-size);color:var(--input-color);background-color:var(--input-background-color);font-family:var(--cpsl-font-family, inherit)}.native-input:focus,.native-input:focus-visible{outline:none}.native-input::placeholder{color:var(--input-placeholder-color);opacity:1;}.label{display:inline-block;color:var(--label-color);font-size:var(--label-font-size);font-weight:500;margin-bottom:var(--label-margin-bottom)}.helper-text-container{display:flex;align-items:center;gap:4px;color:var(--helper-text-color);font-size:var(--helper-text-font-size);font-weight:500;margin-top:var(--helper-text-margin-top)}.helper-text-container cpsl-icon{--height:var(--helper-text-icon-size);--width:var(--helper-text-icon-size);--icon-color:var(--helper-text-icon-color)}.error-text{color:var(--helper-text-error-color)}.error-text cpsl-icon{--icon-color:var(--helper-text-icon-error-color)}:host ::slotted([slot=start]){flex:0}:host ::slotted([slot=end]){flex:0}:host ::slotted(cpsl-icon){--icon-color:var(--input-color)}:host ::slotted(cpsl-button){width:calc(var(--container-height) - var(--container-padding-top) - var(--container-padding-bottom) - var(--container-border-width) * 2);--button-border-radius:calc(var(--container-border-radius) - 2px)}";
849
+ const cpslInputCss = ":host{--container-box-shadow:none;--container-box-shadow-color:var(--cpsl-color-alpha-black-16);--container-border-color:var(--cpsl-color-input-border-active);--container-border-error-color:var(--cpsl-color-input-border-error);--container-background-color:var(--cpsl-color-input-surface-default);--container-background-color-disabled:var(--cpsl-color-input-surface-disabled);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-input);--container-padding-top:4px;--container-padding-bottom:4px;--container-padding-end:4px;--container-padding-start:8px;--container-height:46px;--container-gap:8px;--input-background-color:var(--cpsl-color-input-surface-default);--input-background-color-disabled:var(--cpsl-color-input-surface-disabled);--input-color:var(--cpsl-color-text-primary);--input-placeholder-color:var(--cpsl-color-text-secondary);--input-font-size:var(--cpsl-font-size-body-m);--label-color:var(--cpsl-color-text-primary);--label-font-size:var(--cpsl-font-size-body-s);--label-margin-bottom:5px;--helper-text-color:var(--cpsl-color-text-secondary);--helper-text-error-color:var(--cpsl-color-text-error);--helper-text-icon-color:var(--cpsl-color-text-secondary);--helper-text-icon-error-color:var(--cpsl-color-text-error);--helper-text-icon-size:16px;--helper-text-font-size:var(--cpsl-font-size-body-xs);--helper-text-margin-top:8px;display:block;font-family:var(--cpsl-font-family, inherit)}:host(.disabled){--container-background-color:var(--container-background-color-disabled);--input-background-color:var(--input-background-color-disabled);--input-color:var(--cpsl-color-text-secondary)}:host(:not(.has-value)){--container-border-color:var(--cpsl-color-input-border-placeholder);--input-color:var(--cpsl-color-text-secondary);--container-background-color:transparent;--input-background-color:transparent}:host(.focused){--container-box-shadow:0px 0px 0px 2px var(--container-box-shadow-color);--container-border-color:var(--cpsl-color-input-border-active);--container-background-color:var(--cpsl-color-input-surface-default)}.input-container{-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);display:flex;align-items:center;box-sizing:border-box;height:var(--container-height);gap:var(--container-gap);border-style:solid;border-width:var(--container-border-width);border-color:var(--container-border-color);border-radius:var(--container-border-radius);background-color:var(--container-background-color);box-shadow:var(--container-box-shadow)}.error-container{border-color:var(--container-border-error-color)}.native-input{flex:1;min-width:0;border:none;height:100%;box-sizing:border-box;font-size:var(--input-font-size);color:var(--input-color);background-color:var(--input-background-color);font-family:var(--cpsl-font-family, inherit)}.native-input:focus,.native-input:focus-visible{outline:none}.native-input::placeholder{color:var(--input-placeholder-color);opacity:1;}.label{display:inline-block;color:var(--label-color);font-size:var(--label-font-size);font-weight:500;margin-bottom:var(--label-margin-bottom)}.helper-text-container{display:flex;align-items:center;gap:4px;color:var(--helper-text-color);font-size:var(--helper-text-font-size);font-weight:500;margin-top:var(--helper-text-margin-top)}.helper-text-container cpsl-icon{--height:var(--helper-text-icon-size);--width:var(--helper-text-icon-size);--icon-color:var(--helper-text-icon-color)}.error-text{color:var(--helper-text-error-color)}.error-text cpsl-icon{--icon-color:var(--helper-text-icon-error-color)}:host ::slotted([slot=start]){flex:0}:host ::slotted([slot=end]){flex:0}:host ::slotted(cpsl-icon){--icon-color:var(--input-color)}:host ::slotted(cpsl-button){width:calc(var(--container-height) - var(--container-padding-top) - var(--container-padding-bottom) - var(--container-border-width) * 2);--button-border-radius:calc(var(--container-border-radius) - 2px)}";
793
850
  const CpslInputStyle0 = cpslInputCss;
794
851
 
795
852
  const CpslInput = class {
@@ -899,7 +956,7 @@ const CpslInput = class {
899
956
  }
900
957
  render() {
901
958
  var _a;
902
- return (h(Host, { key: '8c48ad9321e4ceed1855d6b9850598359845ee33', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value) } }, this.label && (h("label", { class: "label", htmlFor: this.inputId }, this.label)), h("div", { key: 'dabef328fd031b799790d6c3009ef1989d79e018', onClick: this.focusInput, class: { 'input-container': true, 'error-container': Boolean(this.errorText) } }, h("slot", { key: '073431d3070382067bf105eb33732894751b6f35', name: "start" }), h("input", { key: '877c48d4668358e5b46055464652b5c42028773c', class: "native-input", id: this.inputId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, type: this.type, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }), h("slot", { key: '7209afd4ee22c085e884c2156321cf40f3f34631', name: "end" })), (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)))));
959
+ return (h(Host, { key: '3e1a55cf2869a31c54ab03c3ecf2bae84ef5031b', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value) } }, this.label && (h("label", { class: "label", htmlFor: this.inputId }, this.label)), h("div", { key: '00a7a2d2dde66c610a9626044aae8ed75b9e9bf3', onClick: this.focusInput, class: { 'input-container': true, 'error-container': Boolean(this.errorText) } }, h("slot", { key: 'aefa6ccf3ca17216da5a657e104f471109836c78', name: "start" }), h("input", { key: '86e8426bff08ead8595bd40086fc7e5fc3c67295', class: "native-input", id: this.inputId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, type: this.type, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }), h("slot", { key: '246e05dbbc4740ce09bd9b4bba779eb0d1010882', name: "end" })), (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)))));
903
960
  }
904
961
  get el() { return getElement(this); }
905
962
  static get watchers() { return {
@@ -10083,6 +10140,32 @@ const CpslModal = class {
10083
10140
  this.footerExpanded ? this.expandFooterTl.play() : this.expandFooterTl.reverse();
10084
10141
  }
10085
10142
  toggleModal() {
10143
+ if (this.hasAnimatedIn) {
10144
+ this.handleAnimation();
10145
+ }
10146
+ }
10147
+ componentDidLoad() {
10148
+ this.handleAnimation();
10149
+ this.hasAnimatedIn = true;
10150
+ mm.add(`(min-width: ${MOBILE_SIZE + 1}px)`, () => {
10151
+ var _a;
10152
+ (_a = this.draggable) === null || _a === void 0 ? void 0 : _a.disable();
10153
+ gsapWithCSS.timeline({}).set(this.modalWrapperEl, { yPercent: 0, scale: this.open ? 1 : 0.8, opacity: this.open ? 1 : 0 });
10154
+ });
10155
+ mm.add(`(max-width: ${MOBILE_SIZE}px)`, () => {
10156
+ this.initDraggable();
10157
+ gsapWithCSS.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });
10158
+ });
10159
+ this.footerSlotEl.addEventListener('slotchange', () => {
10160
+ if (this.footerSlotEl.assignedNodes().length >= 1) {
10161
+ this.hasFooter = true;
10162
+ }
10163
+ else {
10164
+ this.hasFooter = false;
10165
+ }
10166
+ });
10167
+ }
10168
+ handleAnimation() {
10086
10169
  if (this.open) {
10087
10170
  if (window.innerWidth >= MOBILE_SIZE + 1) {
10088
10171
  gsapWithCSS
@@ -10157,25 +10240,6 @@ const CpslModal = class {
10157
10240
  }
10158
10241
  }
10159
10242
  }
10160
- componentDidLoad() {
10161
- mm.add(`(min-width: ${MOBILE_SIZE + 1}px)`, () => {
10162
- var _a;
10163
- (_a = this.draggable) === null || _a === void 0 ? void 0 : _a.disable();
10164
- gsapWithCSS.timeline({}).set(this.modalWrapperEl, { yPercent: 0, scale: this.open ? 1 : 0.8, opacity: this.open ? 1 : 0 });
10165
- });
10166
- mm.add(`(max-width: ${MOBILE_SIZE}px)`, () => {
10167
- this.initDraggable();
10168
- gsapWithCSS.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });
10169
- });
10170
- this.footerSlotEl.addEventListener('slotchange', () => {
10171
- if (this.footerSlotEl.assignedNodes().length >= 1) {
10172
- this.hasFooter = true;
10173
- }
10174
- else {
10175
- this.hasFooter = false;
10176
- }
10177
- });
10178
- }
10179
10243
  addExpandAnim() {
10180
10244
  setTimeout(() => {
10181
10245
  this.expandFooterTl = gsapWithCSS
@@ -10258,11 +10322,10 @@ const CpslModal = class {
10258
10322
  return this.el.shadowRoot.getElementById('modal-header');
10259
10323
  }
10260
10324
  get Modal() {
10261
- return (h("div", { class: { 'modal-container': true, 'no-footer': !this.hasFooter }, part: "modal-container", id: "modal-container" }, h("slot", null), h("div", { id: "modal-inner-container", class: { 'modal-inner-container': true, 'no-footer': !this.hasFooter }, part: "modal-inner-container" }, h("div", { id: "modal-content", part: "modal-content" }, h("div", { id: "modal-header", class: "modal-header" }, h("slot", { name: "header" })), h("slot", { name: "body" })), h("div", { id: "modal-header-expanded", class: { 'modal-header': true, 'expanded': true, 'no-opacity': true } }, h("slot", { name: "footerExpandedHeader" }))), h("div", { id: "modal-footer" }, h("slot", { name: "footer" })), h("div", { id: "modal-footer-expanded", class: { 'expanded': true, 'no-opacity': true } }, h("slot", { name: "footerExpandedFooter" }))));
10325
+ 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" }))));
10262
10326
  }
10263
10327
  render() {
10264
10328
  if (this.noOverlay) {
10265
- this.addExpandAnim();
10266
10329
  return h(Host, null, this.Modal);
10267
10330
  }
10268
10331
  return (h(Host, { class: { 'include-mobile-styling': true } }, h("cpsl-overlay", { id: "overlay", open: this.open, enterTransitionDuration: this.enterTransitionDuration, exitTransitionDuration: this.exitTransitionDuration }), h("div", { id: "modal-wrapper", class: "modal-wrapper" }, this.Modal)));
@@ -10305,7 +10368,7 @@ const CpslOverlay = class {
10305
10368
  }
10306
10369
  }
10307
10370
  render() {
10308
- return (h(Host, { key: '4d8c07e1704e32808745d92d5befa8a4145a779f' }, h("slot", { key: 'f767b8da95b657cf8c118c298c38acaf72af8e8c' })));
10371
+ return (h(Host, { key: 'fb52455d1a68056a20f95e7572dd4afcb1827c41' }, h("slot", { key: '70c5a7f0ecda8560c92ea6f907ad60650f1cdcf2' })));
10309
10372
  }
10310
10373
  get el() { return getElement(this); }
10311
10374
  static get watchers() { return {
@@ -10323,7 +10386,7 @@ const CpslPill = class {
10323
10386
  this.text = undefined;
10324
10387
  }
10325
10388
  render() {
10326
- return (h(Host, { key: 'c0d7930033e08ea264480fd457b176755eac7662' }, h("div", { key: 'b0f6d184dcfe34559b62a9c9da4354f5bfb59797', class: "pill-container" }, h("span", { key: '88634c4cd20dba3d850c51bb4089649364112566' }, this.text))));
10389
+ return (h(Host, { key: '061ac64aeb0f301d51f62ff889b6a817b0e5abba' }, h("div", { key: 'b6d260c1431d5540c07e976e8fc6d6680dcdda43', class: "pill-container" }, h("span", { key: '22d35f5d971c5ce45995e70af3eb9ef0446fdad1' }, this.text))));
10327
10390
  }
10328
10391
  };
10329
10392
  CpslPill.style = CpslPillStyle0;
@@ -10398,7 +10461,7 @@ const CpslQrCode = class {
10398
10461
  qrCode.append(container);
10399
10462
  }
10400
10463
  render() {
10401
- return (h(Host, { key: '5d582e113aff18956f54928d914685e1bef923a6' }, h("div", { key: '5a81f7e78bf5263b1409c3ba348694acbee6b49a', id: "qr-container", class: "qr-container" })));
10464
+ return (h(Host, { key: '8aa4d75e098ba25375d26e9e84e150cc70106ffa' }, h("div", { key: '02b8d5f1192ecce74476b76f5a6e8602589e2b58', id: "qr-container", class: "qr-container" })));
10402
10465
  }
10403
10466
  get el() { return getElement(this); }
10404
10467
  };
@@ -10524,7 +10587,7 @@ const CpslSlideButton = class {
10524
10587
  return this.el.shadowRoot.getElementById('end-icon');
10525
10588
  }
10526
10589
  render() {
10527
- return (h(Host, { key: 'd01cbdfa0b7e8f17ebb3a1f7ba49aded0ec70de6' }, h("div", { key: '37fd16cc1f2d7fb26929438a382f0684195d16f9', id: "slider-container", class: "slider-container" }, h("div", { key: '2504155ec8fb97a2daea8c1856db4332edf69fd4', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '475d235f0c1ea7ac8551c81cf94ca0dd657d3d74', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: 'c534e20d7d609392ef2f52e20b7b66a3cbb2d207', id: "slider", class: { slider: true, disabled: this.disabled } }, h("cpsl-icon", { key: '76ea202fba460ab3083ba48e673582bf37440544', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), h("cpsl-icon", { key: 'dd92b0769644334cdba131523099cabc49b6f4e9', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), h("span", { key: '97ff537baacce0bc3a2c31cc25fefc6078015f54', id: "start-text", class: { 'start-text': true, 'disabled': this.disabled } }, this.startText), h("span", { key: 'c51e4d97e30e6b03adcf9fb9567a75f865822c9d', id: "end-text", class: "end-text" }, this.endText))));
10590
+ return (h(Host, { key: 'ce018bff4b8a965f6828bac0a16ab0ebbf5000d6' }, h("div", { key: '0620f35a12979b3262eca8b1a25a1af59745761d', id: "slider-container", class: "slider-container" }, h("div", { key: '07c87359d2fff731a4432c802845ace2d361980b', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '4140a0ab0f2f59693a35b9d36c0a0b6fd6152fbe', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '39ca4cbcc83d4a8667f93cbeca1dd6c1637d0db2', id: "slider", class: { slider: true, disabled: this.disabled } }, h("cpsl-icon", { key: 'f0733efde0e3a00b34d0dd08267e2893f3dfc658', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), h("cpsl-icon", { key: '5f77af9484aad6bc02a8caa89e5c066334f9835b', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), h("span", { key: 'ebf3026838ed70e406704ba85ecd68c0aa04db13', id: "start-text", class: { 'start-text': true, 'disabled': this.disabled } }, this.startText), h("span", { key: 'd13ea9ea109900c679c049702760b1c8ce08e38a', id: "end-text", class: "end-text" }, this.endText))));
10528
10591
  }
10529
10592
  get el() { return getElement(this); }
10530
10593
  };
@@ -10540,13 +10603,13 @@ const CpslSpinner = class {
10540
10603
  this.speed = 1;
10541
10604
  }
10542
10605
  render() {
10543
- return (h(Host, { key: 'ccfa5727ea42f54e265ed2fc40632c608485a980', style: {
10606
+ return (h(Host, { key: 'f52df0bdd08e1de7ffb6cdda5f1791b1524cbbbe', style: {
10544
10607
  'height': `${this.size}px`,
10545
10608
  'width': `${this.size}px`,
10546
10609
  'animation': `spin ${this.speed}s linear infinite`,
10547
10610
  '-webkit-animation': `spin ${this.speed}s linear infinite`,
10548
10611
  '-moz-animation': `spin ${this.speed}s linear infinite`,
10549
- } }, h("svg", { key: '507b1f733ae8bdf6d53966b1b64d687911f7c8a3', height: this.size, width: this.size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 54 54", fill: "none" }, h("path", { key: 'ea462771d440975eea28cc13f2eb787c827746be', d: "M43.1586 17C39.8082 11.5978 33.8243 8 27 8C16.5066 8 8 16.5066 8 27C8 37.4934 16.5066 46 27 46C33.8242 46 39.8082 42.4022 43.1586 37", "stroke-width": "6", "stroke-linecap": "round" }), h("circle", { key: '1e60ac891f97076ad558fb83f51c552f34626370', cx: "45", cy: "27", r: "5" }))));
10612
+ } }, h("svg", { key: '867ba4a123619a10de1700ed9c23a9c154fed67c', height: this.size, width: this.size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 54 54", fill: "none" }, h("path", { key: 'd4711f92c2dd5d85b01e26e3c3a82f776cd1b72f', d: "M43.1586 17C39.8082 11.5978 33.8243 8 27 8C16.5066 8 8 16.5066 8 27C8 37.4934 16.5066 46 27 46C33.8242 46 39.8082 42.4022 43.1586 37", "stroke-width": "6", "stroke-linecap": "round" }), h("circle", { key: '69cbe92b1cc4f8d1736d4529b78fc5969f127844', cx: "45", cy: "27", r: "5" }))));
10550
10613
  }
10551
10614
  };
10552
10615
  CpslSpinner.style = CpslSpinnerStyle0;
@@ -10578,7 +10641,7 @@ const CpslTab = class {
10578
10641
  }
10579
10642
  }
10580
10643
  render() {
10581
- return (h(Host, { key: '482701b2915c5e5e30c3ee8c13ef35ef4c7cfcb8', onClick: this.onTabClicked }, h("div", { key: '583db91ddbbf32225880b03d8521b117a85f5bf1', class: { 'tab-container': true } }, h("slot", { key: 'a1596c1858376a41ee72d4133966fd7ed75e79c0' }))));
10644
+ return (h(Host, { key: 'ece9ef79afb7bd761b945f8495b5d7a5707eea28', onClick: this.onTabClicked }, h("div", { key: '787d62147f208c37bd7e494499be123317499ed3', class: { 'tab-container': true } }, h("slot", { key: '2834e0f4c14b2940941e0dbe78105835111688cf' }))));
10582
10645
  }
10583
10646
  get el() { return getElement(this); }
10584
10647
  };
@@ -10637,7 +10700,7 @@ const CpslTabs = class {
10637
10700
  const tabsPosition = this.el.getBoundingClientRect();
10638
10701
  const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--tabs-border-width').slice(0, -2);
10639
10702
  const selectedTabRect = this.selectedTabRect;
10640
- return (h(Host, { key: 'db244b5a0ed262508ff5e5ca45e8f61cfcd6df35', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, h("div", { key: '9acd1dcaab946f97d68d5fe625859c245b6fbebc', class: "tabs-container" }, h("slot", { key: '6e58a5354af8118118773c9a296f06b90067d416' }), h("div", { key: '87a9977e13ccc5b3993d459284ce4dc886eb1103', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
10703
+ return (h(Host, { key: '47d4b201d34630654f4d11c26972f0ddf9d9f748', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, h("div", { key: '2a956a61b65fb99445a76211448b0ca2b830baab', class: "tabs-container" }, h("slot", { key: '3ef04f0dacff55ea829b92e22b0f260e1f95bb95' }), h("div", { key: '4cf63ec114998fa41b3367c9c648467044f19d95', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
10641
10704
  }
10642
10705
  get el() { return getElement(this); }
10643
10706
  static get watchers() { return {
@@ -10651,15 +10714,64 @@ const getTab = (tabs, tab) => {
10651
10714
  };
10652
10715
  CpslTabs.style = CpslTabsStyle0;
10653
10716
 
10654
- const cpslTextCss = ":host{font-family:var(--cpsl-font-family, inherit);color:var(--cpsl-color-text-primary)}";
10717
+ const cpslTextCss = ":host{font-family:var(--cpsl-font-family, inherit);color:var(--cpsl-color-text-primary);padding:0px;margin:0px;display:block}:host p,h1,h2,h3,h4,h5,h6{padding:0px;margin:0px;font-weight:inherit;font-size:inherit;letter-spacing:inherit}:host(.primary){color:var(--cpsl-color-text-primary)}:host(.secondary){color:var(--cpsl-color-text-secondary)}:host(.subtle){color:var(--cpsl-color-text-subtle)}:host(.inverted){color:var(--cpsl-color-text-inverted)}:host(.error){color:var(--cpsl-color-text-error)}:host(.medium){font-weight:500}:host(.semi-bold){font-weight:600}:host(.bold){font-weight:700}:host(.body-2xs){font-size:var(--cpsl-font-size-body-2xs)}:host(.body-xs){font-size:var(--cpsl-font-size-body-xs)}:host(.body-s){font-size:var(--cpsl-font-size-body-s)}:host(.body-m){font-size:var(--cpsl-font-size-body-m)}:host(.body-l){font-size:var(--cpsl-font-size-body-l)}:host(.body-xl){font-size:var(--cpsl-font-size-body-xl)}:host(.heading-xs){font-size:var(--cpsl-font-size-heading-xs)}:host(.heading-s){font-size:var(--cpsl-font-size-heading-s)}:host(.heading-m){font-size:var(--cpsl-font-size-heading-m);letter-spacing:-0.4px}:host(.heading-l){font-size:var(--cpsl-font-size-heading-l);letter-spacing:-1.12px}:host(.heading-xl){font-size:var(--cpsl-font-size-heading-xl);letter-spacing:-1.28px}:host(.heading-2xl){font-size:var(--cpsl-font-size-heading-2xl);letter-spacing:-1.44px}";
10655
10718
  const CpslTextStyle0 = cpslTextCss;
10656
10719
 
10657
10720
  const CpslText = class {
10658
10721
  constructor(hostRef) {
10659
10722
  registerInstance(this, hostRef);
10723
+ this.color = 'primary';
10724
+ this.variant = 'bodyM';
10725
+ this.weight = 'regular';
10726
+ }
10727
+ get Content() {
10728
+ switch (this.variant) {
10729
+ case 'headingXS': {
10730
+ return (h("h6", null, h("slot", null)));
10731
+ }
10732
+ case 'headingS': {
10733
+ return (h("h5", null, h("slot", null)));
10734
+ }
10735
+ case 'headingM': {
10736
+ return (h("h4", null, h("slot", null)));
10737
+ }
10738
+ case 'headingL': {
10739
+ return (h("h3", null, h("slot", null)));
10740
+ }
10741
+ case 'headingXL': {
10742
+ return (h("h2", null, h("slot", null)));
10743
+ }
10744
+ case 'heading2XL': {
10745
+ return (h("h1", null, h("slot", null)));
10746
+ }
10747
+ default: {
10748
+ return (h("p", null, h("slot", null)));
10749
+ }
10750
+ }
10660
10751
  }
10661
10752
  render() {
10662
- return (h(Host, { key: '14b6b911fe1c66fa0dbc118207755123110fd85a' }, h("slot", { key: 'ebf8c3b818cc85fd06bc4feb3d7c2b21818fcc9c' })));
10753
+ return (h(Host, { key: '33b70ccfe3929f306d0a9b956ec2a4e16bf751b8', class: {
10754
+ 'primary': this.color === 'primary',
10755
+ 'secondary': this.color === 'secondary',
10756
+ 'subtle': this.color === 'subtle',
10757
+ 'inverted': this.color === 'inverted',
10758
+ 'error': this.color === 'error',
10759
+ 'medium': this.weight === 'medium',
10760
+ 'semi-bold': this.weight === 'semiBold',
10761
+ 'bold': this.weight === 'bold',
10762
+ 'body-2xs': this.variant === 'body2XS',
10763
+ 'body-xs': this.variant === 'bodyXS',
10764
+ 'body-s': this.variant === 'bodyS',
10765
+ 'body-m': this.variant === 'bodyM',
10766
+ 'body-l': this.variant === 'bodyL',
10767
+ 'body-xl': this.variant === 'bodyXL',
10768
+ 'heading-xs': this.variant === 'headingXS',
10769
+ 'heading-s': this.variant === 'headingS',
10770
+ 'heading-m': this.variant === 'headingM',
10771
+ 'heading-l': this.variant === 'headingL',
10772
+ 'heading-xl': this.variant === 'headingXL',
10773
+ 'heading-2xl': this.variant === 'heading2XL',
10774
+ } }, this.Content));
10663
10775
  }
10664
10776
  };
10665
10777
  CpslText.style = CpslTextStyle0;
@@ -10674,11 +10786,11 @@ const CpslTileButton = class {
10674
10786
  this.icon = undefined;
10675
10787
  }
10676
10788
  render() {
10677
- return (h(Host, { key: 'f86ee8387b40817115e680cad78b3cab4af7b35f' }, h("button", { key: '7fa11eeed97fd89c8d5640cb270403c6bab8cda1', class: "button-native" }, h("cpsl-icon", { key: '0b605c0839dd930cc97a70fd867619929c3ce5af', exportparts: "icon", src: this.src, icon: this.icon }), h("slot", { key: '8c3fe5d96e1443cd7a454589cdb279a684773a83' }))));
10789
+ return (h(Host, { key: '61cbce3574220ee8009ab95c3e37d80535543d1c' }, h("button", { key: '50169b226155e2b06014c415dd522dfc0deb799c', class: "button-native" }, h("cpsl-icon", { key: '9ee77a4d725f4bec258ae753365a1f5aca733ff5', exportparts: "icon", src: this.src, icon: this.icon }), h("slot", { key: 'b01617dbca7322d9cc8f58c30680cd5f3ed0f576' }))));
10678
10790
  }
10679
10791
  };
10680
10792
  CpslTileButton.style = CpslTileButtonStyle0;
10681
10793
 
10682
- export { CpslAlert as cpsl_alert, CpslButton as cpsl_button, CpslCodeInput as cpsl_code_input, CpslDivider as cpsl_divider, CpslIcon as cpsl_icon, CpslInput as cpsl_input, CpslModal as cpsl_modal, CpslOverlay as cpsl_overlay, CpslPill as cpsl_pill, CpslProgressIndicator as cpsl_progress_indicator, CpslQrCode as cpsl_qr_code, CpslSlideButton as cpsl_slide_button, CpslSpinner as cpsl_spinner, CpslTab as cpsl_tab, CpslTabs as cpsl_tabs, CpslText as cpsl_text, CpslTileButton as cpsl_tile_button };
10794
+ export { CpslAlert as cpsl_alert, CpslButton as cpsl_button, CpslCodeInput as cpsl_code_input, CpslDivider as cpsl_divider, CpslDropdown as cpsl_dropdown, CpslIcon as cpsl_icon, CpslInput as cpsl_input, CpslModal as cpsl_modal, CpslOverlay as cpsl_overlay, CpslPill as cpsl_pill, CpslProgressIndicator as cpsl_progress_indicator, CpslQrCode as cpsl_qr_code, CpslSlideButton as cpsl_slide_button, CpslSpinner as cpsl_spinner, CpslTab as cpsl_tab, CpslTabs as cpsl_tabs, CpslText as cpsl_text, CpslTileButton as cpsl_tile_button };
10683
10795
 
10684
- //# sourceMappingURL=cpsl-alert_17.entry.js.map
10796
+ //# sourceMappingURL=cpsl-alert_18.entry.js.map