@usecapsule/core-components 1.0.1 → 1.0.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (16) hide show
  1. package/dist/capsule/capsule.esm.js +1 -1
  2. package/dist/capsule/{p-09f5ed84.entry.js → p-7ceb7cc8.entry.js} +4 -4
  3. package/dist/capsule/p-7ceb7cc8.entry.js.map +1 -0
  4. package/dist/cjs/cpsl-alert_17.cjs.entry.js +7 -7
  5. package/dist/cjs/cpsl-alert_17.cjs.entry.js.map +1 -1
  6. package/dist/collection/components/cpsl-alert/cpsl-alert.css +1 -0
  7. package/dist/collection/components/cpsl-button/cpsl-button.css +1 -0
  8. package/dist/collection/components/cpsl-divider/cpsl-divider.css +1 -0
  9. package/dist/collection/components/cpsl-input/cpsl-input.css +6 -4
  10. package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.css +2 -0
  11. package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.css +1 -0
  12. package/dist/collection/components/cpsl-tab/cpsl-tab.css +3 -0
  13. package/dist/esm/cpsl-alert_17.entry.js +7 -7
  14. package/dist/esm/cpsl-alert_17.entry.js.map +1 -1
  15. package/package.json +2 -2
  16. package/dist/capsule/p-09f5ed84.entry.js.map +0 -1
package/dist/collection/components/cpsl-alert/cpsl-alert.css CHANGED
@@ -81,6 +81,7 @@
81
81
  padding-top: var(--container-padding-top);
82
82
  padding-bottom: var(--container-padding-bottom);
83
83
  font-size: var(--container-font-size);
84
+ font-weight: 500;
84
85
  display: flex;
85
86
  align-items: center;
86
87
  justify-content: center;
package/dist/collection/components/cpsl-button/cpsl-button.css CHANGED
@@ -143,6 +143,7 @@
143
143
  padding-top: var(--button-padding-top);
144
144
  padding-bottom: var(--button-padding-bottom);
145
145
  font-size: var(--container-font-size);
146
+ font-weight: 500;
146
147
  border: var(--button-border-width) solid transparent;
147
148
  cursor: pointer;
148
149
  color: var(--button-color);
package/dist/collection/components/cpsl-divider/cpsl-divider.css CHANGED
@@ -62,6 +62,7 @@
62
62
  color: var(--cpsl-color-text-subtle);
63
63
  font-family: var(--cpsl-font-family, inherit);
64
64
  font-size: clamp(12px, 0.75rem, 18px);
65
+ font-weight: 600;
65
66
  gap: 16px;
66
67
  }
67
68
 
package/dist/collection/components/cpsl-input/cpsl-input.css CHANGED
@@ -72,17 +72,17 @@
72
72
  --input-background-color-disabled: var(--cpsl-color-input-surface-disabled);
73
73
  --input-color: var(--cpsl-color-text-primary);
74
74
  --input-placeholder-color: var(--cpsl-color-text-secondary);
75
- --input-font-size: 14px;
75
+ --input-font-size: clamp(16px, 1rem, 24px);
76
76
  --label-color: var(--cpsl-color-text-primary);
77
- --label-font-size: 14px;
77
+ --label-font-size: clamp(14px, 0.875rem, 21px);
78
78
  --label-margin-bottom: 5px;
79
79
  --helper-text-color: var(--cpsl-color-text-secondary);
80
80
  --helper-text-error-color: var(--cpsl-color-text-error);
81
81
  --helper-text-icon-color: var(--cpsl-color-text-secondary);
82
82
  --helper-text-icon-error-color: var(--cpsl-color-text-error);
83
83
  --helper-text-icon-size: 16px;
84
- --helper-text-font-size: 12px;
85
- --helper-text-margin-top: 6px;
84
+ --helper-text-font-size: clamp(14px, 0.875rem, 21px);
85
+ --helper-text-margin-top: 8px;
86
86
  display: block;
87
87
  font-family: var(--cpsl-font-family, inherit);
88
88
  }
@@ -149,6 +149,7 @@
149
149
  display: inline-block;
150
150
  color: var(--label-color);
151
151
  font-size: var(--label-font-size);
152
+ font-weight: 500;
152
153
  margin-bottom: var(--label-margin-bottom);
153
154
  }
154
155
 
@@ -158,6 +159,7 @@
158
159
  gap: 4px;
159
160
  color: var(--helper-text-color);
160
161
  font-size: var(--helper-text-font-size);
162
+ font-weight: 500;
161
163
  margin-top: var(--helper-text-margin-top);
162
164
  }
163
165
  .helper-text-container cpsl-icon {
package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.css CHANGED
@@ -55,6 +55,7 @@
55
55
  */
56
56
  :host {
57
57
  --qr-color: var(--cpsl-color-black);
58
+ --qr-background-color: var(--cpsl-color-white);
58
59
  --qr-border-color: var(--cpsl-color-foreground-quinary);
59
60
  --qr-border-radius: var(--cpsl-border-radius-qr-code);
60
61
  --qr-border-width: 1px;
@@ -75,5 +76,6 @@
75
76
  border-width: var(--qr-border-width);
76
77
  border-color: var(--qr-border-color);
77
78
  border-radius: var(--qr-border-radius);
79
+ background-color: var(--qr-background-color);
78
80
  box-shadow: var(--qr-box-shadow);
79
81
  }
package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.css CHANGED
@@ -83,6 +83,7 @@
83
83
  display: flex;
84
84
  align-items: center;
85
85
  font-size: var(--slider-container-font-size);
86
+ font-weight: 500;
86
87
  height: var(--slider-container-height);
87
88
  border-width: var(--slider-container-border-width);
88
89
  border-style: solid;
package/dist/collection/components/cpsl-tab/cpsl-tab.css CHANGED
@@ -1,4 +1,5 @@
1
1
  :host {
2
+ --tab-color: var(--cpsl-color-text-primary);
2
3
  padding-top: var(--tab-top-padding);
3
4
  padding-bottom: var(--tab-bottom-padding);
4
5
  padding-left: var(--tab-left-padding);
@@ -17,4 +18,6 @@
17
18
  text-overflow: ellipsis;
18
19
  text-align: center;
19
20
  white-space: nowrap;
21
+ font-weight: 500;
22
+ color: var(--tab-color);
20
23
  }
package/dist/esm/cpsl-alert_17.entry.js CHANGED
@@ -714,7 +714,7 @@ const Youtube = `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentCo
714
714
 
715
715
  const Icons = { alertCircle: AlertCircle, angelListBrand: AngelListBrand, angelList: AngelList, appleBrand: AppleBrand, apple: Apple, arrowNarrow: ArrowNarrow, arrow: Arrow, backupKit: BackupKit, capsuleLogo: CapsuleLogo, 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, moreLoginOptionsDark: MoreLoginOptionsDark, moreLoginOptions: MoreLoginOptions, phone: Phone, pintrestBrand: PintrestBrand, pintrest: Pintrest, 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, xBrand: XBrand, x: X, youtubeBrand: YoutubeBrand, youtube: Youtube, };
716
716
 
717
- 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);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}";
717
+ 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}";
718
718
  const CpslAlertStyle0 = cpslAlertCss;
719
719
 
720
720
  const CpslAlert = class {
@@ -740,7 +740,7 @@ const CpslAlert = class {
740
740
  };
741
741
  CpslAlert.style = CpslAlertStyle0;
742
742
 
743
- const cpslButtonCss = ":host{--button-border-radius:var(--cpsl-border-radius-primary-button);--button-border-width:1px;--button-box-shadow:0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 2px 2px 0px var(--cpsl-color-alpha-white-25) inset, 0px -2px 2px 0px var(--cpsl-color-alpha-black-25) inset;--button-padding-top:10px;--button-padding-bottom:10px;--button-padding-start:16px;--button-padding-end:16px;--button-font-size:clamp(14px, 0.875rem, 21px);height:100%;width:100%;font-family:var(--cpsl-font-family, inherit)}:host(.button-disabled){cursor:default;pointer-events:none}:host(.primary){--button-color:var(--cpsl-color-text-inverted);--button-background-color:var(--cpsl-color-primary-button-surface-default);--button-border-color:var(--cpsl-color-primary-button-border-default)}:host(.primary):host(.button-disabled){--button-background-color:var(--cpsl-color-primary-button-surface-disabled);--button-border-color:var(--cpsl-color-primary-button-border-disabled);--button-box-shadow:none;--button-outline-color:transparent}:host(.primary) :not(.button-disabled):hover{--button-background-color:var(--cpsl-color-primary-button-surface-hover)}:host(.primary) :not(.button-disabled):active{--button-background-color:var(--cpsl-color-primary-button-surface-pressed)}:host(.primary) :not(.button-disabled):focus-visible{--button-outline-color:var(--cpsl-color-primary-button-outline)}:host(.primary) ::slotted(cpsl-icon){--icon-color:var(--cpsl-text-inverted)}:host(.secondary){--button-color:var(--cpsl-color-text-primary);--button-background-color:var(--cpsl-color-secondary-button-surface-default);--button-border-color:var(--cpsl-color-secondary-button-border-default)}:host(.secondary):host(.button-disabled){--button-background-color:var(--cpsl-color-secondary-button-surface-disabled);--button-border-color:var(--cpsl-color-secondary-button-border-disabled);--button-box-shadow:none;--button-outline-color:transparent}:host(.secondary) :not(.button-disabled):hover{--button-background-color:var(--cpsl-color-secondary-button-surface-hover)}:host(.secondary) :not(.button-disabled):active{--button-background-color:var(--cpsl-color-secondary-button-surface-pressed)}:host(.secondary) :not(.button-disabled):focus-visible{--button-outline-color:var(--cpsl-color-secondary-button-outline)}:host(.secondary) ::slotted(cpsl-icon){--icon-color:var(--cpsl-text-primary)}:host(.icon){--button-color:transparent;--button-background-color:transparent;--button-border-color:transparent;--button-box-shadow:none;--button-outline-color:transparent}:host(.icon) ::slotted(cpsl-icon){--icon-color:var(--cpsl-color-text-secondary)}:host(.icon) :not(.button-disabled):hover ::slotted(cpsl-icon){--icon-color:var(--cpsl-color-text-primary)}.button-native{border-radius:var(--button-border-radius);-webkit-padding-start:var(--button-padding-start);padding-inline-start:var(--button-padding-start);-webkit-padding-end:var(--button-padding-end);padding-inline-end:var(--button-padding-end);padding-top:var(--button-padding-top);padding-bottom:var(--button-padding-bottom);font-size:var(--container-font-size);border:var(--button-border-width) solid transparent;cursor:pointer;color:var(--button-color);background-color:var(--button-background-color);border-color:var(--button-border-color);display:flex;justify-content:center;align-items:center;height:100%;width:100%;box-shadow:var(--button-box-shadow);outline-color:var(--button-outline-color)}";
743
+ const cpslButtonCss = ":host{--button-border-radius:var(--cpsl-border-radius-primary-button);--button-border-width:1px;--button-box-shadow:0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 2px 2px 0px var(--cpsl-color-alpha-white-25) inset, 0px -2px 2px 0px var(--cpsl-color-alpha-black-25) inset;--button-padding-top:10px;--button-padding-bottom:10px;--button-padding-start:16px;--button-padding-end:16px;--button-font-size:clamp(14px, 0.875rem, 21px);height:100%;width:100%;font-family:var(--cpsl-font-family, inherit)}:host(.button-disabled){cursor:default;pointer-events:none}:host(.primary){--button-color:var(--cpsl-color-text-inverted);--button-background-color:var(--cpsl-color-primary-button-surface-default);--button-border-color:var(--cpsl-color-primary-button-border-default)}:host(.primary):host(.button-disabled){--button-background-color:var(--cpsl-color-primary-button-surface-disabled);--button-border-color:var(--cpsl-color-primary-button-border-disabled);--button-box-shadow:none;--button-outline-color:transparent}:host(.primary) :not(.button-disabled):hover{--button-background-color:var(--cpsl-color-primary-button-surface-hover)}:host(.primary) :not(.button-disabled):active{--button-background-color:var(--cpsl-color-primary-button-surface-pressed)}:host(.primary) :not(.button-disabled):focus-visible{--button-outline-color:var(--cpsl-color-primary-button-outline)}:host(.primary) ::slotted(cpsl-icon){--icon-color:var(--cpsl-text-inverted)}:host(.secondary){--button-color:var(--cpsl-color-text-primary);--button-background-color:var(--cpsl-color-secondary-button-surface-default);--button-border-color:var(--cpsl-color-secondary-button-border-default)}:host(.secondary):host(.button-disabled){--button-background-color:var(--cpsl-color-secondary-button-surface-disabled);--button-border-color:var(--cpsl-color-secondary-button-border-disabled);--button-box-shadow:none;--button-outline-color:transparent}:host(.secondary) :not(.button-disabled):hover{--button-background-color:var(--cpsl-color-secondary-button-surface-hover)}:host(.secondary) :not(.button-disabled):active{--button-background-color:var(--cpsl-color-secondary-button-surface-pressed)}:host(.secondary) :not(.button-disabled):focus-visible{--button-outline-color:var(--cpsl-color-secondary-button-outline)}:host(.secondary) ::slotted(cpsl-icon){--icon-color:var(--cpsl-text-primary)}:host(.icon){--button-color:transparent;--button-background-color:transparent;--button-border-color:transparent;--button-box-shadow:none;--button-outline-color:transparent}:host(.icon) ::slotted(cpsl-icon){--icon-color:var(--cpsl-color-text-secondary)}:host(.icon) :not(.button-disabled):hover ::slotted(cpsl-icon){--icon-color:var(--cpsl-color-text-primary)}.button-native{border-radius:var(--button-border-radius);-webkit-padding-start:var(--button-padding-start);padding-inline-start:var(--button-padding-start);-webkit-padding-end:var(--button-padding-end);padding-inline-end:var(--button-padding-end);padding-top:var(--button-padding-top);padding-bottom:var(--button-padding-bottom);font-size:var(--container-font-size);font-weight:500;border:var(--button-border-width) solid transparent;cursor:pointer;color:var(--button-color);background-color:var(--button-background-color);border-color:var(--button-border-color);display:flex;justify-content:center;align-items:center;height:100%;width:100%;box-shadow:var(--button-box-shadow);outline-color:var(--button-outline-color)}";
744
744
  const CpslButtonStyle0 = cpslButtonCss;
745
745
 
746
746
  const CpslButton = class {
@@ -859,7 +859,7 @@ const CpslCodeInput = class {
859
859
  };
860
860
  CpslCodeInput.style = CpslCodeInputStyle0;
861
861
 
862
- const cpslDividerCss = ":host{--divider-height:1px;--divider-color:var(--cpsl-color-divider);display:flex;align-items:center;height:24px;color:var(--cpsl-color-text-subtle);font-family:var(--cpsl-font-family, inherit);font-size:clamp(12px, 0.75rem, 18px);gap:16px}:host div{flex:1;background-color:var(--divider-color);height:var(--divider-height)}";
862
+ const cpslDividerCss = ":host{--divider-height:1px;--divider-color:var(--cpsl-color-divider);display:flex;align-items:center;height:24px;color:var(--cpsl-color-text-subtle);font-family:var(--cpsl-font-family, inherit);font-size:clamp(12px, 0.75rem, 18px);font-weight:600;gap:16px}:host div{flex:1;background-color:var(--divider-color);height:var(--divider-height)}";
863
863
  const CpslDividerStyle0 = cpslDividerCss;
864
864
 
865
865
  const CpslDivider = class {
@@ -888,7 +888,7 @@ const CpslIcon = class {
888
888
  };
889
889
  CpslIcon.style = CpslIconStyle0;
890
890
 
891
- 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:14px;--label-color:var(--cpsl-color-text-primary);--label-font-size:14px;--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:12px;--helper-text-margin-top:6px;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(.focused){--container-box-shadow:0px 0px 0px 2px var(--container-box-shadow-color)}:host(:not(.has-value)){--container-border-color:var(--cpsl-color-input-border-placeholder);--input-color:var(--cpsl-color-text-secondary)}.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);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);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)}";
891
+ 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(.focused){--container-box-shadow:0px 0px 0px 2px var(--container-box-shadow-color)}:host(:not(.has-value)){--container-border-color:var(--cpsl-color-input-border-placeholder);--input-color:var(--cpsl-color-text-secondary)}.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)}";
892
892
  const CpslInputStyle0 = cpslInputCss;
893
893
 
894
894
  const CpslInput = class {
@@ -7188,7 +7188,7 @@ var qrCodeStyling = {exports: {}};
7188
7188
 
7189
7189
  const QRCodeStyling = /*@__PURE__*/getDefaultExportFromCjs(qrCodeStyling.exports);
7190
7190
 
7191
- const cpslQrCodeCss = ":host{--qr-color:var(--cpsl-color-black);--qr-border-color:var(--cpsl-color-foreground-quinary);--qr-border-radius:var(--cpsl-border-radius-qr-code);--qr-border-width:1px;--qr-box-shadow:0px 1px 2px var(--cpsl-color-alpha-black-10);display:inline-block}.qr-container{-webkit-padding-start:var(--qr-padding-start);padding-inline-start:var(--qr-padding-start);-webkit-padding-end:var(--qr-padding-end);padding-inline-end:var(--qr-padding-end);padding-top:var(--qr-padding-top);padding-bottom:var(--qr-padding-bottom);display:flex;color:var(--qr-color);border-style:solid;border-width:var(--qr-border-width);border-color:var(--qr-border-color);border-radius:var(--qr-border-radius);box-shadow:var(--qr-box-shadow)}";
7191
+ const cpslQrCodeCss = ":host{--qr-color:var(--cpsl-color-black);--qr-background-color:var(--cpsl-color-white);--qr-border-color:var(--cpsl-color-foreground-quinary);--qr-border-radius:var(--cpsl-border-radius-qr-code);--qr-border-width:1px;--qr-box-shadow:0px 1px 2px var(--cpsl-color-alpha-black-10);display:inline-block}.qr-container{-webkit-padding-start:var(--qr-padding-start);padding-inline-start:var(--qr-padding-start);-webkit-padding-end:var(--qr-padding-end);padding-inline-end:var(--qr-padding-end);padding-top:var(--qr-padding-top);padding-bottom:var(--qr-padding-bottom);display:flex;color:var(--qr-color);border-style:solid;border-width:var(--qr-border-width);border-color:var(--qr-border-color);border-radius:var(--qr-border-radius);background-color:var(--qr-background-color);box-shadow:var(--qr-box-shadow)}";
7192
7192
  const CpslQrCodeStyle0 = cpslQrCodeCss;
7193
7193
 
7194
7194
  const CpslQrCode = class {
@@ -7230,7 +7230,7 @@ const CpslQrCode = class {
7230
7230
  };
7231
7231
  CpslQrCode.style = CpslQrCodeStyle0;
7232
7232
 
7233
- const cpslSlideButtonCss = ":host{--slider-container-font-size:14px;--slider-container-height:44px;--slider-container-border-width:1px;--slider-container-box-shadow:0px 0px 4px 0px var(--cpsl-color-alpha-black-10) inset;--slider-container-start-background-color:var(--cpsl-color-foreground-senary);--slider-container-end-background-color:var(--cpsl-color-foreground-primary);--slider-container-border-color:var(--cpsl-color-foreground-quinary);--slider-border-width:1px;--slider-box-shadow:3px 0px 4px 0px var(--cpsl-color-alpha-black-16);--slider-border-color:var(--cpsl-color-foreground-quinary);--slider-background-color:var(--cpsl-color-foreground-primary);--slider-color:var(--cpsl-color-text-inverted);--start-text-color:var(--cpsl-color-text-secondary);--end-text-color:var(--cpsl-color-text-inverted);font-family:var(--cpsl-font-family, inherit);display:block}.slider-container{overflow:hidden;position:relative;box-sizing:border-box;display:flex;align-items:center;font-size:var(--slider-container-font-size);height:var(--slider-container-height);border-width:var(--slider-container-border-width);border-style:solid;border-color:var(--slider-container-border-color);border-radius:calc(var(--slider-container-height) / 2);box-shadow:var(--slider-container-box-shadow)}.slider-container-background{position:absolute;top:0;bottom:0;left:0;right:0}.start-slider-container-background{background-color:var(--slider-container-start-background-color);opacity:100%}.end-slider-container-background{background-color:var(--slider-container-end-background-color);opacity:0%}.start-text{user-select:none;color:var(--start-text-color);position:absolute;text-align:center;opacity:100%;width:calc(100% - var(--slider-container-height) - 8px - 16px);left:calc(var(--slider-container-height) - 4px + 8px)}.end-text{user-select:none;color:var(--end-text-color);position:absolute;text-align:center;opacity:0%;width:calc(100% - var(--slider-container-height) - 8px - 16px);left:16px}.icon{position:absolute}.start-icon{opacity:100%}.end-icon{opacity:0%}.slider{left:1px;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;justify-content:center;position:absolute;z-index:10;height:calc(var(--slider-container-height) - 4px);width:calc(var(--slider-container-height) - 4px);color:var(--slider-color);background-color:var(--slider-background-color);border-width:var(--slider-border-width);border-style:solid;border-color:var(--slider-border-color);border-radius:100%;box-shadow:var(--slider-box-shadow)}.slider cpsl-icon{--icon-color:var(--slider-color)}";
7233
+ const cpslSlideButtonCss = ":host{--slider-container-font-size:14px;--slider-container-height:44px;--slider-container-border-width:1px;--slider-container-box-shadow:0px 0px 4px 0px var(--cpsl-color-alpha-black-10) inset;--slider-container-start-background-color:var(--cpsl-color-foreground-senary);--slider-container-end-background-color:var(--cpsl-color-foreground-primary);--slider-container-border-color:var(--cpsl-color-foreground-quinary);--slider-border-width:1px;--slider-box-shadow:3px 0px 4px 0px var(--cpsl-color-alpha-black-16);--slider-border-color:var(--cpsl-color-foreground-quinary);--slider-background-color:var(--cpsl-color-foreground-primary);--slider-color:var(--cpsl-color-text-inverted);--start-text-color:var(--cpsl-color-text-secondary);--end-text-color:var(--cpsl-color-text-inverted);font-family:var(--cpsl-font-family, inherit);display:block}.slider-container{overflow:hidden;position:relative;box-sizing:border-box;display:flex;align-items:center;font-size:var(--slider-container-font-size);font-weight:500;height:var(--slider-container-height);border-width:var(--slider-container-border-width);border-style:solid;border-color:var(--slider-container-border-color);border-radius:calc(var(--slider-container-height) / 2);box-shadow:var(--slider-container-box-shadow)}.slider-container-background{position:absolute;top:0;bottom:0;left:0;right:0}.start-slider-container-background{background-color:var(--slider-container-start-background-color);opacity:100%}.end-slider-container-background{background-color:var(--slider-container-end-background-color);opacity:0%}.start-text{user-select:none;color:var(--start-text-color);position:absolute;text-align:center;opacity:100%;width:calc(100% - var(--slider-container-height) - 8px - 16px);left:calc(var(--slider-container-height) - 4px + 8px)}.end-text{user-select:none;color:var(--end-text-color);position:absolute;text-align:center;opacity:0%;width:calc(100% - var(--slider-container-height) - 8px - 16px);left:16px}.icon{position:absolute}.start-icon{opacity:100%}.end-icon{opacity:0%}.slider{left:1px;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;justify-content:center;position:absolute;z-index:10;height:calc(var(--slider-container-height) - 4px);width:calc(var(--slider-container-height) - 4px);color:var(--slider-color);background-color:var(--slider-background-color);border-width:var(--slider-border-width);border-style:solid;border-color:var(--slider-border-color);border-radius:100%;box-shadow:var(--slider-box-shadow)}.slider cpsl-icon{--icon-color:var(--slider-color)}";
7234
7234
  const CpslSlideButtonStyle0 = cpslSlideButtonCss;
7235
7235
 
7236
7236
  const CpslSlideButton = class {
@@ -7347,7 +7347,7 @@ const CpslSpinner = class {
7347
7347
  };
7348
7348
  CpslSpinner.style = CpslSpinnerStyle0;
7349
7349
 
7350
- const cpslTabCss = ":host{padding-top:var(--tab-top-padding);padding-bottom:var(--tab-bottom-padding);padding-left:var(--tab-left-padding);padding-right:var(--tab-right-padding);display:flex;flex:1 1 auto;align-items:center;cursor:pointer;z-index:10}.tab-container{align-items:center;overflow:hidden;width:100%;text-overflow:ellipsis;text-align:center;white-space:nowrap}";
7350
+ const cpslTabCss = ":host{--tab-color:var(--cpsl-color-text-primary);padding-top:var(--tab-top-padding);padding-bottom:var(--tab-bottom-padding);padding-left:var(--tab-left-padding);padding-right:var(--tab-right-padding);display:flex;flex:1 1 auto;align-items:center;cursor:pointer;z-index:10}.tab-container{align-items:center;overflow:hidden;width:100%;text-overflow:ellipsis;text-align:center;white-space:nowrap;font-weight:500;color:var(--tab-color)}";
7351
7351
  const CpslTabStyle0 = cpslTabCss;
7352
7352
 
7353
7353
  const CpslTab = class {