@usecapsule/core-components 1.0.0 → 1.0.2
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/capsule/capsule.esm.js +1 -1
- package/dist/capsule/{p-888b5108.entry.js → p-e91564e1.entry.js} +4 -4
- package/dist/capsule/p-e91564e1.entry.js.map +1 -0
- package/dist/cjs/cpsl-alert_17.cjs.entry.js +20 -8
- package/dist/cjs/cpsl-alert_17.cjs.entry.js.map +1 -1
- package/dist/collection/assets/icons/index.js +2 -1
- package/dist/collection/assets/icons/index.js.map +1 -1
- package/dist/collection/assets/icons/more-login-options-dark.svg +11 -0
- package/dist/collection/assets/icons/more-login-options.svg +0 -1
- package/dist/collection/components/cpsl-alert/cpsl-alert.css +1 -0
- package/dist/collection/components/cpsl-alert/cpsl-alert.js +1 -1
- package/dist/collection/components/cpsl-button/cpsl-button.css +1 -0
- package/dist/collection/components/cpsl-divider/cpsl-divider.css +1 -0
- package/dist/collection/components/cpsl-icon/cpsl-icon.js +1 -1
- package/dist/collection/components/cpsl-input/cpsl-input.css +6 -4
- package/dist/collection/components/cpsl-input/cpsl-input.js +1 -1
- package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.css +1 -0
- package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js +2 -2
- package/dist/collection/components/cpsl-tab/cpsl-tab.css +1 -0
- package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.js +1 -1
- package/dist/esm/cpsl-alert_17.entry.js +20 -8
- package/dist/esm/cpsl-alert_17.entry.js.map +1 -1
- package/dist/types/assets/icons/index.d.ts +1 -0
- package/package.json +2 -2
- package/dist/capsule/p-888b5108.entry.js.map +0 -1
|
@@ -518,8 +518,20 @@ const Mail = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke
|
|
|
518
518
|
</svg>
|
|
519
519
|
`;
|
|
520
520
|
|
|
521
|
+
const MoreLoginOptionsDark = `<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
522
|
+
<path d="M6.1 20C6.98366 20 7.7 19.2837 7.7 18.4C7.7 17.5164 6.98366 16.8 6.1 16.8C5.21634 16.8 4.5 17.5164 4.5 18.4C4.5 19.2837 5.21634 20 6.1 20Z" fill="#808080"/>
|
|
523
|
+
<path d="M6.1 13.5999C6.98366 13.5999 7.7 12.8836 7.7 11.9999C7.7 11.1162 6.98366 10.3999 6.1 10.3999C5.21634 10.3999 4.5 11.1162 4.5 11.9999C4.5 12.8836 5.21634 13.5999 6.1 13.5999Z" fill="#3F3F3F"/>
|
|
524
|
+
<path d="M6.1 7.2C6.98366 7.2 7.7 6.48366 7.7 5.6C7.7 4.71634 6.98366 4 6.1 4C5.21634 4 4.5 4.71634 4.5 5.6C4.5 6.48366 5.21634 7.2 6.1 7.2Z" fill="#3F3F3F"/>
|
|
525
|
+
<path d="M12.4999 20C13.3836 20 14.0999 19.2837 14.0999 18.4C14.0999 17.5164 13.3836 16.8 12.4999 16.8C11.6162 16.8 10.8999 17.5164 10.8999 18.4C10.8999 19.2837 11.6162 20 12.4999 20Z" fill="#3F3F3F"/>
|
|
526
|
+
<path d="M12.4999 13.5999C13.3836 13.5999 14.0999 12.8836 14.0999 11.9999C14.0999 11.1162 13.3836 10.3999 12.4999 10.3999C11.6162 10.3999 10.8999 11.1162 10.8999 11.9999C10.8999 12.8836 11.6162 13.5999 12.4999 13.5999Z" fill="#808080"/>
|
|
527
|
+
<path d="M12.4999 7.2C13.3836 7.2 14.0999 6.48366 14.0999 5.6C14.0999 4.71634 13.3836 4 12.4999 4C11.6162 4 10.8999 4.71634 10.8999 5.6C10.8999 6.48366 11.6162 7.2 12.4999 7.2Z" fill="#808080"/>
|
|
528
|
+
<path d="M18.9 20C19.7837 20 20.5 19.2837 20.5 18.4C20.5 17.5164 19.7837 16.8 18.9 16.8C18.0164 16.8 17.3 17.5164 17.3 18.4C17.3 19.2837 18.0164 20 18.9 20Z" fill="#3F3F3F"/>
|
|
529
|
+
<path d="M18.9 13.5999C19.7837 13.5999 20.5 12.8836 20.5 11.9999C20.5 11.1162 19.7837 10.3999 18.9 10.3999C18.0164 10.3999 17.3 11.1162 17.3 11.9999C17.3 12.8836 18.0164 13.5999 18.9 13.5999Z" fill="#3F3F3F"/>
|
|
530
|
+
<path d="M18.9 7.2C19.7837 7.2 20.5 6.48366 20.5 5.6C20.5 4.71634 19.7837 4 18.9 4C18.0164 4 17.3 4.71634 17.3 5.6C17.3 6.48366 18.0164 7.2 18.9 7.2Z" fill="#808080"/>
|
|
531
|
+
</svg>
|
|
532
|
+
`;
|
|
533
|
+
|
|
521
534
|
const MoreLoginOptions = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
522
|
-
<rect width="24" height="24" fill="white"/>
|
|
523
535
|
<path d="M5.6 20C6.48366 20 7.2 19.2836 7.2 18.4C7.2 17.5163 6.48366 16.8 5.6 16.8C4.71634 16.8 4 17.5163 4 18.4C4 19.2836 4.71634 20 5.6 20Z" fill="#737373"/>
|
|
524
536
|
<path d="M5.6 13.6C6.48366 13.6 7.2 12.8836 7.2 12C7.2 11.1163 6.48366 10.4 5.6 10.4C4.71634 10.4 4 11.1163 4 12C4 12.8836 4.71634 13.6 5.6 13.6Z" fill="#A3A3A3"/>
|
|
525
537
|
<path d="M5.6 7.2C6.48366 7.2 7.2 6.48366 7.2 5.6C7.2 4.71634 6.48366 4 5.6 4C4.71634 4 4 4.71634 4 5.6C4 6.48366 4.71634 7.2 5.6 7.2Z" fill="#A3A3A3"/>
|
|
@@ -704,9 +716,9 @@ const Youtube = `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentCo
|
|
|
704
716
|
</svg>
|
|
705
717
|
`;
|
|
706
718
|
|
|
707
|
-
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, 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, };
|
|
719
|
+
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, };
|
|
708
720
|
|
|
709
|
-
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}";
|
|
721
|
+
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}";
|
|
710
722
|
const CpslAlertStyle0 = cpslAlertCss;
|
|
711
723
|
|
|
712
724
|
const CpslAlert = class {
|
|
@@ -732,7 +744,7 @@ const CpslAlert = class {
|
|
|
732
744
|
};
|
|
733
745
|
CpslAlert.style = CpslAlertStyle0;
|
|
734
746
|
|
|
735
|
-
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)}";
|
|
747
|
+
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)}";
|
|
736
748
|
const CpslButtonStyle0 = cpslButtonCss;
|
|
737
749
|
|
|
738
750
|
const CpslButton = class {
|
|
@@ -851,7 +863,7 @@ const CpslCodeInput = class {
|
|
|
851
863
|
};
|
|
852
864
|
CpslCodeInput.style = CpslCodeInputStyle0;
|
|
853
865
|
|
|
854
|
-
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)}";
|
|
866
|
+
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)}";
|
|
855
867
|
const CpslDividerStyle0 = cpslDividerCss;
|
|
856
868
|
|
|
857
869
|
const CpslDivider = class {
|
|
@@ -880,7 +892,7 @@ const CpslIcon = class {
|
|
|
880
892
|
};
|
|
881
893
|
CpslIcon.style = CpslIconStyle0;
|
|
882
894
|
|
|
883
|
-
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:
|
|
895
|
+
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)}";
|
|
884
896
|
const CpslInputStyle0 = cpslInputCss;
|
|
885
897
|
|
|
886
898
|
const CpslInput = class {
|
|
@@ -7222,7 +7234,7 @@ const CpslQrCode = class {
|
|
|
7222
7234
|
};
|
|
7223
7235
|
CpslQrCode.style = CpslQrCodeStyle0;
|
|
7224
7236
|
|
|
7225
|
-
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)}";
|
|
7237
|
+
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)}";
|
|
7226
7238
|
const CpslSlideButtonStyle0 = cpslSlideButtonCss;
|
|
7227
7239
|
|
|
7228
7240
|
const CpslSlideButton = class {
|
|
@@ -7339,7 +7351,7 @@ const CpslSpinner = class {
|
|
|
7339
7351
|
};
|
|
7340
7352
|
CpslSpinner.style = CpslSpinnerStyle0;
|
|
7341
7353
|
|
|
7342
|
-
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}";
|
|
7354
|
+
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;font-weight:500}";
|
|
7343
7355
|
const CpslTabStyle0 = cpslTabCss;
|
|
7344
7356
|
|
|
7345
7357
|
const CpslTab = class {
|