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

Sign up to get free protection for your applications and to get access to all the features.
Files changed (85) 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-bea93fae.entry.js +29 -0
  10. package/dist/capsule/p-bea93fae.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} +123 -16
  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-overlay/cpsl-overlay.js +1 -1
  40. package/dist/collection/components/cpsl-pill/cpsl-pill.js +1 -1
  41. package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.js +1 -1
  42. package/dist/collection/components/cpsl-row/cpsl-row.js +1 -1
  43. package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js +3 -3
  44. package/dist/collection/components/cpsl-spinner/cpsl-spinner.js +2 -2
  45. package/dist/collection/components/cpsl-tab/cpsl-tab.js +1 -1
  46. package/dist/collection/components/cpsl-tabs/cpsl-tabs.js +1 -1
  47. package/dist/collection/components/cpsl-text/cpsl-text.css +101 -0
  48. package/dist/collection/components/cpsl-text/cpsl-text.js +110 -1
  49. package/dist/collection/components/cpsl-text/cpsl-text.js.map +1 -1
  50. package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.js +2 -2
  51. package/dist/collection/index.js +1 -1
  52. package/dist/collection/index.js.map +1 -1
  53. package/dist/collection/interface.js.map +1 -1
  54. package/dist/collection/utils/theme/generateFont.js +25 -4
  55. package/dist/collection/utils/theme/generateFont.js.map +1 -1
  56. package/dist/collection/utils/theme/generateTheme.js +2 -3
  57. package/dist/collection/utils/theme/generateTheme.js.map +1 -1
  58. package/dist/esm/capsule.js +1 -1
  59. package/dist/esm/{cpsl-alert_17.entry.js → cpsl-alert_18.entry.js} +123 -17
  60. package/dist/esm/cpsl-alert_18.entry.js.map +1 -0
  61. package/dist/esm/cpsl-grid.entry.js +2 -2
  62. package/dist/esm/cpsl-info-box.entry.js +1 -1
  63. package/dist/esm/cpsl-row.entry.js +1 -1
  64. package/dist/esm/index-f00e090c.js +2 -2
  65. package/dist/esm/index.js +28 -8
  66. package/dist/esm/index.js.map +1 -1
  67. package/dist/esm/loader.js +1 -1
  68. package/dist/types/assets/icons/index.d.ts +1 -0
  69. package/dist/types/components/cpsl-dropdown/cpsl-dropdown.d.ts +25 -0
  70. package/dist/types/components/cpsl-text/cpsl-text.d.ts +4 -0
  71. package/dist/types/components.d.ts +53 -0
  72. package/dist/types/index.d.ts +1 -1
  73. package/dist/types/interface.d.ts +15 -0
  74. package/dist/types/utils/theme/generateFont.d.ts +1 -1
  75. package/dist/types/utils/theme/generateTheme.d.ts +1 -2
  76. package/package.json +1 -1
  77. package/dist/capsule/p-202a85c9.entry.js +0 -29
  78. package/dist/capsule/p-202a85c9.entry.js.map +0 -1
  79. package/dist/capsule/p-f604b591.entry.js +0 -2
  80. package/dist/cjs/cpsl-alert_17.cjs.entry.js.map +0 -1
  81. package/dist/esm/cpsl-alert_17.entry.js.map +0 -1
  82. /package/dist/capsule/{p-68c73705.entry.js.map → p-0cab90fa.entry.js.map} +0 -0
  83. /package/dist/capsule/{p-91412151.entry.js.map → p-193ac141.entry.js.map} +0 -0
  84. /package/dist/capsule/{p-f604b591.entry.js.map → p-cb8dc0a4.entry.js.map} +0 -0
  85. /package/dist/types/Users/{taylorbosch → vinay}/Documents/GitHub/Capsule/component-library/core/.stencil/scripts/buildIconLibrary.d.ts +0 -0
@@ -0,0 +1,2 @@
1
+ import{r as s,h as a,H as r}from"./p-6fb7c4d1.js";const c=":host{display:flex;flex-wrap:wrap}";const f=c;const e=class{constructor(a){s(this,a)}render(){return a(r,{key:"5f061d20ff017b612a4bada01c66992795cbabe1"},a("slot",{key:"ba35af68f6f00e8b12ff3c091935482beb10d27c"}))}};e.style=f;export{e as cpsl_row};
2
+ //# sourceMappingURL=p-cb8dc0a4.entry.js.map
@@ -19,7 +19,7 @@ const patchBrowser = () => {
19
19
 
20
20
  patchBrowser().then(async (options) => {
21
21
  await appGlobals.globalScripts();
22
- return index.bootstrapLazy([["cpsl-animation.cjs",[[1,"cpsl-animation",{"src":[1],"replayAnimation":[64]}]]],["cpsl-col.cjs",[[1,"cpsl-col",{"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"pull":[1],"pullXs":[1,"pull-xs"],"pullSm":[1,"pull-sm"],"pullMd":[1,"pull-md"],"pullLg":[1,"pull-lg"],"pullXl":[1,"pull-xl"],"push":[1],"pushXs":[1,"push-xs"],"pushSm":[1,"push-sm"],"pushMd":[1,"push-md"],"pushLg":[1,"push-lg"],"pushXl":[1,"push-xl"],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]},[[9,"resize","onResize"]]]]],["cpsl-grid.cjs",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-info-box.cjs",[[1,"cpsl-info-box"]]],["cpsl-row.cjs",[[1,"cpsl-row"]]],["cpsl-alert_17.cjs",[[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]}],[1,"cpsl-input",{"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"noAutoDisable":[4,"no-auto-disable"],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"inputmode":[1],"label":[1],"max":[8],"maxlength":[2],"min":[8],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"]}],[1,"cpsl-modal",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"footerExpanded":[4,"footer-expanded"],"footerTransitionDuration":[2,"footer-transition-duration"],"noOverlay":[4,"no-overlay"],"open":[4],"hasFooter":[32]},null,{"footerExpanded":["toggleHeight"],"open":["toggleModal"]}],[1,"cpsl-slide-button",{"disabled":[4],"endIcon":[1,"end-icon"],"endText":[1,"end-text"],"startIcon":[1,"start-icon"],"startText":[1,"start-text"]}],[1,"cpsl-tile-button",{"src":[1],"icon":[1]}],[1,"cpsl-alert",{"type":[1],"icon":[1]}],[1,"cpsl-button",{"disabled":[516],"variant":[513]}],[1,"cpsl-divider"],[1,"cpsl-pill",{"text":[1]}],[1,"cpsl-progress-indicator",{"totalSteps":[2,"total-steps"],"step":[2]}],[1,"cpsl-qr-code",{"url":[1],"imageSrc":[1,"image-src"],"size":[2]}],[1,"cpsl-spinner",{"size":[2],"speed":[2]}],[1,"cpsl-tab",{"selected":[4],"tab":[1]},[[8,"cpslTabsChanged","onTabsChanged"],[8,"cpslTabsInit","onTabsInit"]]],[1,"cpsl-tabs",{"fullWidth":[4,"full-width"],"selectedTab":[1,"selected-tab"],"selectedTabRect":[32],"loaded":[32]},null,{"fullWidth":["updateSlider"],"selectedTab":["updateTab"]}],[1,"cpsl-text"],[1,"cpsl-overlay",{"open":[4],"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"]},null,{"open":["toggleHeight"]}],[1,"cpsl-icon",{"src":[1],"icon":[1]}]]]], options);
22
+ return index.bootstrapLazy([["cpsl-animation.cjs",[[1,"cpsl-animation",{"src":[1],"replayAnimation":[64]}]]],["cpsl-col.cjs",[[1,"cpsl-col",{"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"pull":[1],"pullXs":[1,"pull-xs"],"pullSm":[1,"pull-sm"],"pullMd":[1,"pull-md"],"pullLg":[1,"pull-lg"],"pullXl":[1,"pull-xl"],"push":[1],"pushXs":[1,"push-xs"],"pushSm":[1,"push-sm"],"pushMd":[1,"push-md"],"pushLg":[1,"push-lg"],"pushXl":[1,"push-xl"],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]},[[9,"resize","onResize"]]]]],["cpsl-grid.cjs",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-info-box.cjs",[[1,"cpsl-info-box"]]],["cpsl-row.cjs",[[1,"cpsl-row"]]],["cpsl-alert_18.cjs",[[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]}],[1,"cpsl-input",{"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"noAutoDisable":[4,"no-auto-disable"],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"inputmode":[1],"label":[1],"max":[8],"maxlength":[2],"min":[8],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"]}],[1,"cpsl-modal",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"footerExpanded":[4,"footer-expanded"],"footerTransitionDuration":[2,"footer-transition-duration"],"noOverlay":[4,"no-overlay"],"open":[4],"hasFooter":[32]},null,{"footerExpanded":["toggleHeight"],"open":["toggleModal"]}],[1,"cpsl-slide-button",{"disabled":[4],"endIcon":[1,"end-icon"],"endText":[1,"end-text"],"startIcon":[1,"start-icon"],"startText":[1,"start-text"]}],[1,"cpsl-tile-button",{"src":[1],"icon":[1]}],[1,"cpsl-alert",{"type":[1],"icon":[1]}],[1,"cpsl-button",{"disabled":[516],"variant":[513]}],[1,"cpsl-divider"],[1,"cpsl-dropdown",{"width":[1],"items":[16],"isOpen":[32],"selectedItem":[32]},null,{"isOpen":["handleOpenChange"]}],[1,"cpsl-pill",{"text":[1]}],[1,"cpsl-progress-indicator",{"totalSteps":[2,"total-steps"],"step":[2]}],[1,"cpsl-qr-code",{"url":[1],"imageSrc":[1,"image-src"],"size":[2]}],[1,"cpsl-spinner",{"size":[2],"speed":[2]}],[1,"cpsl-tab",{"selected":[4],"tab":[1]},[[8,"cpslTabsChanged","onTabsChanged"],[8,"cpslTabsInit","onTabsInit"]]],[1,"cpsl-tabs",{"fullWidth":[4,"full-width"],"selectedTab":[1,"selected-tab"],"selectedTabRect":[32],"loaded":[32]},null,{"fullWidth":["updateSlider"],"selectedTab":["updateTab"]}],[1,"cpsl-text",{"color":[1],"variant":[1],"weight":[1]}],[1,"cpsl-overlay",{"open":[4],"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"]},null,{"open":["toggleHeight"]}],[1,"cpsl-icon",{"src":[1],"icon":[1]}]]]], options);
23
23
  });
24
24
 
25
25
  exports.setNonce = index.setNonce;
@@ -149,6 +149,11 @@ const Check = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" strok
149
149
  </svg>
150
150
  `;
151
151
 
152
+ const ChevronUp = `<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
153
+ <path d="M13 7L7 0.999999L1 7" stroke="#525252" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
154
+ </svg>
155
+ `;
156
+
152
157
  const Clock = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
153
158
  <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"/>
154
159
  </svg>
@@ -618,7 +623,7 @@ const Youtube = `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentCo
618
623
  </svg>
619
624
  `;
620
625
 
621
- 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, };
626
+ 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, };
622
627
 
623
628
  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}";
624
629
  const CpslAlertStyle0 = cpslAlertCss;
@@ -778,6 +783,58 @@ const CpslDivider = class {
778
783
  };
779
784
  CpslDivider.style = CpslDividerStyle0;
780
785
 
786
+ 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}";
787
+ const CpslDropdownStyle0 = cpslDropdownCss;
788
+
789
+ const CpslDropdown = class {
790
+ constructor(hostRef) {
791
+ index.registerInstance(this, hostRef);
792
+ this.toggleDropdown = () => {
793
+ this.isOpen = !this.isOpen;
794
+ };
795
+ this.selectItem = (item) => {
796
+ this.selectedItem = item;
797
+ this.toggleDropdown();
798
+ };
799
+ this.handleItemSelect = (item) => () => {
800
+ this.selectItem(item);
801
+ };
802
+ this.width = '100%';
803
+ this.isOpen = false;
804
+ this.selectedItem = undefined;
805
+ this.items = [];
806
+ }
807
+ handleOpenChange() {
808
+ if (this.isOpen) {
809
+ this.adjustPosition();
810
+ }
811
+ }
812
+ adjustPosition() {
813
+ var _a;
814
+ const dropdownOptions = this.el.shadowRoot.querySelector('.dropdown-options');
815
+ const hostRect = this.el.getBoundingClientRect();
816
+ const parentRect = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
817
+ if (parentRect) {
818
+ this.width = `${parentRect.width}px`;
819
+ dropdownOptions.style.left = `${parentRect.left - hostRect.left}px`;
820
+ }
821
+ }
822
+ componentWillLoad() {
823
+ if (this.items.length > 0) {
824
+ this.selectedItem = this.items[0];
825
+ }
826
+ }
827
+ render() {
828
+ var _a, _b, _c;
829
+ return (index.h(index.Host, { key: '6882468bccd50b57e16ce09ca360392415c0b1ce', style: { width: this.width } }, index.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}`, index.h("div", { key: '9d266062c49e3fce689eccf57229534043d975e8', innerHTML: Icons['chevronUp'] })), index.h("ul", { key: 'c82c76fae351883748e0094d218cfff8261b8ed8', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.items.map(item => index.h("li", { onClick: this.handleItemSelect(item) }, index.h("span", { innerHTML: item.icon }), item.label, " ", index.h("span", { class: "dropdown-value" }, item.value))))));
830
+ }
831
+ get el() { return index.getElement(this); }
832
+ static get watchers() { return {
833
+ "isOpen": ["handleOpenChange"]
834
+ }; }
835
+ };
836
+ CpslDropdown.style = CpslDropdownStyle0;
837
+
781
838
  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}";
782
839
  const CpslIconStyle0 = cpslIconCss;
783
840
 
@@ -788,12 +845,12 @@ const CpslIcon = class {
788
845
  this.icon = undefined;
789
846
  }
790
847
  render() {
791
- return (index.h(index.Host, { key: '81ab45a6a6bb0597743d8ebc490d56f97b9a15a4', part: "icon", role: "img" }, !Boolean(this.icon) ? index.h("img", { src: this.src }) : index.h("div", { innerHTML: Icons[this.icon] })));
848
+ return (index.h(index.Host, { key: '89f3081baf013558e965cc6682811d66dc2b188d', part: "icon", role: "img" }, !Boolean(this.icon) ? index.h("img", { src: this.src }) : index.h("div", { innerHTML: Icons[this.icon] })));
792
849
  }
793
850
  };
794
851
  CpslIcon.style = CpslIconStyle0;
795
852
 
796
- 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)}";
853
+ 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)}";
797
854
  const CpslInputStyle0 = cpslInputCss;
798
855
 
799
856
  const CpslInput = class {
@@ -903,7 +960,7 @@ const CpslInput = class {
903
960
  }
904
961
  render() {
905
962
  var _a;
906
- return (index.h(index.Host, { key: '8c48ad9321e4ceed1855d6b9850598359845ee33', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value) } }, this.label && (index.h("label", { class: "label", htmlFor: this.inputId }, this.label)), index.h("div", { key: 'dabef328fd031b799790d6c3009ef1989d79e018', onClick: this.focusInput, class: { 'input-container': true, 'error-container': Boolean(this.errorText) } }, index.h("slot", { key: '073431d3070382067bf105eb33732894751b6f35', name: "start" }), index.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 }), index.h("slot", { key: '7209afd4ee22c085e884c2156321cf40f3f34631', name: "end" })), (this.errorText || this.helperText) && (index.h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, index.h("cpsl-icon", { icon: Boolean(this.errorText) ? 'alertCircle' : 'infoCircle' }), index.h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
963
+ return (index.h(index.Host, { key: '3e1a55cf2869a31c54ab03c3ecf2bae84ef5031b', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value) } }, this.label && (index.h("label", { class: "label", htmlFor: this.inputId }, this.label)), index.h("div", { key: '00a7a2d2dde66c610a9626044aae8ed75b9e9bf3', onClick: this.focusInput, class: { 'input-container': true, 'error-container': Boolean(this.errorText) } }, index.h("slot", { key: 'aefa6ccf3ca17216da5a657e104f471109836c78', name: "start" }), index.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 }), index.h("slot", { key: '246e05dbbc4740ce09bd9b4bba779eb0d1010882', name: "end" })), (this.errorText || this.helperText) && (index.h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, index.h("cpsl-icon", { icon: Boolean(this.errorText) ? 'alertCircle' : 'infoCircle' }), index.h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
907
964
  }
908
965
  get el() { return index.getElement(this); }
909
966
  static get watchers() { return {
@@ -10309,7 +10366,7 @@ const CpslOverlay = class {
10309
10366
  }
10310
10367
  }
10311
10368
  render() {
10312
- return (index.h(index.Host, { key: '4d8c07e1704e32808745d92d5befa8a4145a779f' }, index.h("slot", { key: 'f767b8da95b657cf8c118c298c38acaf72af8e8c' })));
10369
+ return (index.h(index.Host, { key: 'fb52455d1a68056a20f95e7572dd4afcb1827c41' }, index.h("slot", { key: '70c5a7f0ecda8560c92ea6f907ad60650f1cdcf2' })));
10313
10370
  }
10314
10371
  get el() { return index.getElement(this); }
10315
10372
  static get watchers() { return {
@@ -10327,7 +10384,7 @@ const CpslPill = class {
10327
10384
  this.text = undefined;
10328
10385
  }
10329
10386
  render() {
10330
- return (index.h(index.Host, { key: 'c0d7930033e08ea264480fd457b176755eac7662' }, index.h("div", { key: 'b0f6d184dcfe34559b62a9c9da4354f5bfb59797', class: "pill-container" }, index.h("span", { key: '88634c4cd20dba3d850c51bb4089649364112566' }, this.text))));
10387
+ return (index.h(index.Host, { key: '061ac64aeb0f301d51f62ff889b6a817b0e5abba' }, index.h("div", { key: 'b6d260c1431d5540c07e976e8fc6d6680dcdda43', class: "pill-container" }, index.h("span", { key: '22d35f5d971c5ce45995e70af3eb9ef0446fdad1' }, this.text))));
10331
10388
  }
10332
10389
  };
10333
10390
  CpslPill.style = CpslPillStyle0;
@@ -10402,7 +10459,7 @@ const CpslQrCode = class {
10402
10459
  qrCode.append(container);
10403
10460
  }
10404
10461
  render() {
10405
- return (index.h(index.Host, { key: '5d582e113aff18956f54928d914685e1bef923a6' }, index.h("div", { key: '5a81f7e78bf5263b1409c3ba348694acbee6b49a', id: "qr-container", class: "qr-container" })));
10462
+ return (index.h(index.Host, { key: '8aa4d75e098ba25375d26e9e84e150cc70106ffa' }, index.h("div", { key: '02b8d5f1192ecce74476b76f5a6e8602589e2b58', id: "qr-container", class: "qr-container" })));
10406
10463
  }
10407
10464
  get el() { return index.getElement(this); }
10408
10465
  };
@@ -10528,7 +10585,7 @@ const CpslSlideButton = class {
10528
10585
  return this.el.shadowRoot.getElementById('end-icon');
10529
10586
  }
10530
10587
  render() {
10531
- return (index.h(index.Host, { key: 'd01cbdfa0b7e8f17ebb3a1f7ba49aded0ec70de6' }, index.h("div", { key: '37fd16cc1f2d7fb26929438a382f0684195d16f9', id: "slider-container", class: "slider-container" }, index.h("div", { key: '2504155ec8fb97a2daea8c1856db4332edf69fd4', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), index.h("div", { key: '475d235f0c1ea7ac8551c81cf94ca0dd657d3d74', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), index.h("div", { key: 'c534e20d7d609392ef2f52e20b7b66a3cbb2d207', id: "slider", class: { slider: true, disabled: this.disabled } }, index.h("cpsl-icon", { key: '76ea202fba460ab3083ba48e673582bf37440544', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), index.h("cpsl-icon", { key: 'dd92b0769644334cdba131523099cabc49b6f4e9', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), index.h("span", { key: '97ff537baacce0bc3a2c31cc25fefc6078015f54', id: "start-text", class: { 'start-text': true, 'disabled': this.disabled } }, this.startText), index.h("span", { key: 'c51e4d97e30e6b03adcf9fb9567a75f865822c9d', id: "end-text", class: "end-text" }, this.endText))));
10588
+ return (index.h(index.Host, { key: 'ce018bff4b8a965f6828bac0a16ab0ebbf5000d6' }, index.h("div", { key: '0620f35a12979b3262eca8b1a25a1af59745761d', id: "slider-container", class: "slider-container" }, index.h("div", { key: '07c87359d2fff731a4432c802845ace2d361980b', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), index.h("div", { key: '4140a0ab0f2f59693a35b9d36c0a0b6fd6152fbe', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), index.h("div", { key: '39ca4cbcc83d4a8667f93cbeca1dd6c1637d0db2', id: "slider", class: { slider: true, disabled: this.disabled } }, index.h("cpsl-icon", { key: 'f0733efde0e3a00b34d0dd08267e2893f3dfc658', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), index.h("cpsl-icon", { key: '5f77af9484aad6bc02a8caa89e5c066334f9835b', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), index.h("span", { key: 'ebf3026838ed70e406704ba85ecd68c0aa04db13', id: "start-text", class: { 'start-text': true, 'disabled': this.disabled } }, this.startText), index.h("span", { key: 'd13ea9ea109900c679c049702760b1c8ce08e38a', id: "end-text", class: "end-text" }, this.endText))));
10532
10589
  }
10533
10590
  get el() { return index.getElement(this); }
10534
10591
  };
@@ -10544,13 +10601,13 @@ const CpslSpinner = class {
10544
10601
  this.speed = 1;
10545
10602
  }
10546
10603
  render() {
10547
- return (index.h(index.Host, { key: 'ccfa5727ea42f54e265ed2fc40632c608485a980', style: {
10604
+ return (index.h(index.Host, { key: 'f52df0bdd08e1de7ffb6cdda5f1791b1524cbbbe', style: {
10548
10605
  'height': `${this.size}px`,
10549
10606
  'width': `${this.size}px`,
10550
10607
  'animation': `spin ${this.speed}s linear infinite`,
10551
10608
  '-webkit-animation': `spin ${this.speed}s linear infinite`,
10552
10609
  '-moz-animation': `spin ${this.speed}s linear infinite`,
10553
- } }, index.h("svg", { key: '507b1f733ae8bdf6d53966b1b64d687911f7c8a3', height: this.size, width: this.size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 54 54", fill: "none" }, index.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" }), index.h("circle", { key: '1e60ac891f97076ad558fb83f51c552f34626370', cx: "45", cy: "27", r: "5" }))));
10610
+ } }, index.h("svg", { key: '867ba4a123619a10de1700ed9c23a9c154fed67c', height: this.size, width: this.size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 54 54", fill: "none" }, index.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" }), index.h("circle", { key: '69cbe92b1cc4f8d1736d4529b78fc5969f127844', cx: "45", cy: "27", r: "5" }))));
10554
10611
  }
10555
10612
  };
10556
10613
  CpslSpinner.style = CpslSpinnerStyle0;
@@ -10582,7 +10639,7 @@ const CpslTab = class {
10582
10639
  }
10583
10640
  }
10584
10641
  render() {
10585
- return (index.h(index.Host, { key: '482701b2915c5e5e30c3ee8c13ef35ef4c7cfcb8', onClick: this.onTabClicked }, index.h("div", { key: '583db91ddbbf32225880b03d8521b117a85f5bf1', class: { 'tab-container': true } }, index.h("slot", { key: 'a1596c1858376a41ee72d4133966fd7ed75e79c0' }))));
10642
+ return (index.h(index.Host, { key: 'ece9ef79afb7bd761b945f8495b5d7a5707eea28', onClick: this.onTabClicked }, index.h("div", { key: '787d62147f208c37bd7e494499be123317499ed3', class: { 'tab-container': true } }, index.h("slot", { key: '2834e0f4c14b2940941e0dbe78105835111688cf' }))));
10586
10643
  }
10587
10644
  get el() { return index.getElement(this); }
10588
10645
  };
@@ -10641,7 +10698,7 @@ const CpslTabs = class {
10641
10698
  const tabsPosition = this.el.getBoundingClientRect();
10642
10699
  const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--tabs-border-width').slice(0, -2);
10643
10700
  const selectedTabRect = this.selectedTabRect;
10644
- return (index.h(index.Host, { key: 'db244b5a0ed262508ff5e5ca45e8f61cfcd6df35', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, index.h("div", { key: '9acd1dcaab946f97d68d5fe625859c245b6fbebc', class: "tabs-container" }, index.h("slot", { key: '6e58a5354af8118118773c9a296f06b90067d416' }), index.h("div", { key: '87a9977e13ccc5b3993d459284ce4dc886eb1103', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
10701
+ return (index.h(index.Host, { key: '47d4b201d34630654f4d11c26972f0ddf9d9f748', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, index.h("div", { key: '2a956a61b65fb99445a76211448b0ca2b830baab', class: "tabs-container" }, index.h("slot", { key: '3ef04f0dacff55ea829b92e22b0f260e1f95bb95' }), index.h("div", { key: '4cf63ec114998fa41b3367c9c648467044f19d95', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
10645
10702
  }
10646
10703
  get el() { return index.getElement(this); }
10647
10704
  static get watchers() { return {
@@ -10655,15 +10712,64 @@ const getTab = (tabs, tab) => {
10655
10712
  };
10656
10713
  CpslTabs.style = CpslTabsStyle0;
10657
10714
 
10658
- const cpslTextCss = ":host{font-family:var(--cpsl-font-family, inherit);color:var(--cpsl-color-text-primary)}";
10715
+ 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}";
10659
10716
  const CpslTextStyle0 = cpslTextCss;
10660
10717
 
10661
10718
  const CpslText = class {
10662
10719
  constructor(hostRef) {
10663
10720
  index.registerInstance(this, hostRef);
10721
+ this.color = 'primary';
10722
+ this.variant = 'bodyM';
10723
+ this.weight = 'regular';
10724
+ }
10725
+ get Content() {
10726
+ switch (this.variant) {
10727
+ case 'headingXS': {
10728
+ return (index.h("h6", null, index.h("slot", null)));
10729
+ }
10730
+ case 'headingS': {
10731
+ return (index.h("h5", null, index.h("slot", null)));
10732
+ }
10733
+ case 'headingM': {
10734
+ return (index.h("h4", null, index.h("slot", null)));
10735
+ }
10736
+ case 'headingL': {
10737
+ return (index.h("h3", null, index.h("slot", null)));
10738
+ }
10739
+ case 'headingXL': {
10740
+ return (index.h("h2", null, index.h("slot", null)));
10741
+ }
10742
+ case 'heading2XL': {
10743
+ return (index.h("h1", null, index.h("slot", null)));
10744
+ }
10745
+ default: {
10746
+ return (index.h("p", null, index.h("slot", null)));
10747
+ }
10748
+ }
10664
10749
  }
10665
10750
  render() {
10666
- return (index.h(index.Host, { key: '14b6b911fe1c66fa0dbc118207755123110fd85a' }, index.h("slot", { key: 'ebf8c3b818cc85fd06bc4feb3d7c2b21818fcc9c' })));
10751
+ return (index.h(index.Host, { key: '33b70ccfe3929f306d0a9b956ec2a4e16bf751b8', class: {
10752
+ 'primary': this.color === 'primary',
10753
+ 'secondary': this.color === 'secondary',
10754
+ 'subtle': this.color === 'subtle',
10755
+ 'inverted': this.color === 'inverted',
10756
+ 'error': this.color === 'error',
10757
+ 'medium': this.weight === 'medium',
10758
+ 'semi-bold': this.weight === 'semiBold',
10759
+ 'bold': this.weight === 'bold',
10760
+ 'body-2xs': this.variant === 'body2XS',
10761
+ 'body-xs': this.variant === 'bodyXS',
10762
+ 'body-s': this.variant === 'bodyS',
10763
+ 'body-m': this.variant === 'bodyM',
10764
+ 'body-l': this.variant === 'bodyL',
10765
+ 'body-xl': this.variant === 'bodyXL',
10766
+ 'heading-xs': this.variant === 'headingXS',
10767
+ 'heading-s': this.variant === 'headingS',
10768
+ 'heading-m': this.variant === 'headingM',
10769
+ 'heading-l': this.variant === 'headingL',
10770
+ 'heading-xl': this.variant === 'headingXL',
10771
+ 'heading-2xl': this.variant === 'heading2XL',
10772
+ } }, this.Content));
10667
10773
  }
10668
10774
  };
10669
10775
  CpslText.style = CpslTextStyle0;
@@ -10678,7 +10784,7 @@ const CpslTileButton = class {
10678
10784
  this.icon = undefined;
10679
10785
  }
10680
10786
  render() {
10681
- return (index.h(index.Host, { key: 'f86ee8387b40817115e680cad78b3cab4af7b35f' }, index.h("button", { key: '7fa11eeed97fd89c8d5640cb270403c6bab8cda1', class: "button-native" }, index.h("cpsl-icon", { key: '0b605c0839dd930cc97a70fd867619929c3ce5af', exportparts: "icon", src: this.src, icon: this.icon }), index.h("slot", { key: '8c3fe5d96e1443cd7a454589cdb279a684773a83' }))));
10787
+ return (index.h(index.Host, { key: '61cbce3574220ee8009ab95c3e37d80535543d1c' }, index.h("button", { key: '50169b226155e2b06014c415dd522dfc0deb799c', class: "button-native" }, index.h("cpsl-icon", { key: '9ee77a4d725f4bec258ae753365a1f5aca733ff5', exportparts: "icon", src: this.src, icon: this.icon }), index.h("slot", { key: 'b01617dbca7322d9cc8f58c30680cd5f3ed0f576' }))));
10682
10788
  }
10683
10789
  };
10684
10790
  CpslTileButton.style = CpslTileButtonStyle0;
@@ -10687,6 +10793,7 @@ exports.cpsl_alert = CpslAlert;
10687
10793
  exports.cpsl_button = CpslButton;
10688
10794
  exports.cpsl_code_input = CpslCodeInput;
10689
10795
  exports.cpsl_divider = CpslDivider;
10796
+ exports.cpsl_dropdown = CpslDropdown;
10690
10797
  exports.cpsl_icon = CpslIcon;
10691
10798
  exports.cpsl_input = CpslInput;
10692
10799
  exports.cpsl_modal = CpslModal;
@@ -10701,4 +10808,4 @@ exports.cpsl_tabs = CpslTabs;
10701
10808
  exports.cpsl_text = CpslText;
10702
10809
  exports.cpsl_tile_button = CpslTileButton;
10703
10810
 
10704
- //# sourceMappingURL=cpsl-alert_17.cjs.entry.js.map
10811
+ //# sourceMappingURL=cpsl-alert_18.cjs.entry.js.map