npm - @usecapsule/core-components - Versions diffs - 3.5.1 → 3.6.0-dev.0 - Mend

@usecapsule/core-components 3.5.1 → 3.6.0-dev.0

Files changed (81) hide show

package/dist/collection/components/cpsl-select/cpsl-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-select.js","sourceRoot":"","sources":["../../../../src/components/cpsl-select/cpsl-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Element, h, Prop, State, EventEmitter, Event, Watch, Listen } from '@stencil/core';\n\n@Component({\n tag: 'cpsl-select',\n styleUrl: 'cpsl-select.scss',\n shadow: true,\n})\nexport class CpslSelect {\n @Element() el!: HTMLCpslSelectElement;\n private popoverEl!: HTMLCpslPopoverElement;\n private inputId = `cpsl-select-${inputIds++}`;\n\n @State() anchorEl!: HTMLElement;\n @State() hasFocus = false;\n @State() popoverOpen = false;\n @State() hasSelectedItem = false;\n\n /*\n ID of element to anchor popover to.\n /\n @Prop() anchorElId?: string;\n\n /\n If `true` the popover container will use the width of the content, else it will be set to the width of the trigger.\n * Default is `false`\n /\n @Prop() autoWidth?: boolean = false;\n\n /\n If `true`, the user cannot interact with the input.\n /\n @Prop() disabled = false;\n\n /\n Set the max height of the dropdown.\n /\n @Prop() dropdownMaxHeight?: number;\n\n /\n Error text to show below the input. If this is provided the input will enter an error state.\n /\n @Prop() errorText?: string;\n\n /\n Format value for display when selected.\n /\n @Prop() formatValue?: (value: string) => string;\n\n /\n Helper text to show below the input. If `\"errorText\"` is provided that will take precedence.\n /\n @Prop() helperText?: string;\n\n /\n ID of the element, must be unique for the popover trigger.\n /\n\n @Prop() id: string = `${this.inputId}-trigger`;\n\n /\n The label for the input.\n /\n @Prop() label?: string;\n\n /\n Placeholder to display if `selectedValue` is empty.\n /\n @Prop() placeholder?: string;\n\n /\n If `true`, the user must fill in a value before submitting a form.\n /\n @Prop() required = false;\n\n /\n Value of the selected item.\n /\n @Prop() selectedValue?: string;\n\n /\n Will show the formatted selected item (passed in the `selected-item` slot) in the select rather than the item value.\n /\n @Prop() showFormattedSelectedItem?: boolean;\n\n /\n If `true`, the label will display an \"optional\" tag.\n /\n @Prop() showOptionalLabel = false;\n\n /\n If `true`, the dropdown will contain a search field.\n /\n @Prop() showSearch = false;\n\n /\n Placeholder for the search field.\n /\n @Prop() searchPlaceholder?: string;\n\n /\n Emitted when the input loses focus.\n /\n @Event() cpslBlur!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the input has focus.\n /\n @Event() cpslFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the value changes.\n /\n @Event() cpslSelectValueChange!: EventEmitter<string>;\n\n /\n Emitted when the search value changes.\n /\n @Event() cpslSearchChange!: EventEmitter<string>;\n\n @Watch('selectedValue')\n onValueChange() {\n this.popoverEl.closePopover();\n }\n\n @Watch('selectedValue')\n handleValueChange() {\n this.selectItem();\n }\n\n @Listen('cpslSelectItemClick')\n selectItemClickHandler(event: CustomEvent<string>) {\n this.cpslSelectValueChange.emit(event.detail);\n }\n\n @Listen('cpslOpen')\n onPopoverOpen() {\n this.popoverOpen = true;\n }\n\n @Listen('cpslClose')\n onPopoverClose() {\n this.popoverOpen = false;\n }\n\n componentDidLoad() {\n this.popoverEl = this.el.shadowRoot.querySelector(`cpsl-popover`) as HTMLCpslPopoverElement;\n this.anchorEl = this.anchorElId ? document.getElementById(this.anchorElId) : this.el.shadowRoot.getElementById('select-container');\n\n this.selectItem();\n }\n\n private onBlur = (ev: FocusEvent) => {\n this.hasFocus = false;\n\n this.popoverEl.closePopover();\n\n this.cpslBlur.emit(ev);\n };\n\n private onFocus = (ev: FocusEvent) => {\n this.hasFocus = true;\n\n this.cpslFocus.emit(ev);\n };\n\n private handleEnterPress = (ev: KeyboardEvent) => {\n if (ev.key === 'Enter') {\n ev.preventDefault();\n this.el.dispatchEvent(new MouseEvent('mousedown'));\n }\n };\n\n private selectItem = () => {\n const items = Array.from(this.el.querySelectorAll('cpsl-select-item')) as HTMLCpslSelectItemElement[];\n\n items.forEach(item => {\n if (item.value === this.selectedValue) {\n item.setAttribute('selected', 'true');\n this.hasSelectedItem = true;\n } else {\n item.setAttribute('selected', 'false');\n }\n });\n\n if (!this.selectedValue) {\n this.hasSelectedItem = false;\n }\n };\n\n private handleClickOutside = (event: MouseEvent) => {\n if (this.hasFocus && !this.el.contains(event.target as Node)) {\n this.hasFocus = false;\n window.removeEventListener('click', this.handleClickOutside);\n }\n };\n\n private handleClick = () => {\n if (!this.disabled) {\n this.hasFocus = true;\n window.addEventListener('click', this.handleClickOutside);\n }\n };\n\n render() {\n return (\n <Host id={this.id} class={{ 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) }}>\n {this.label && (\n <label class=\"label\" htmlFor={this.inputId}>\n {this.label}\n {this.required ? '' : ' '}\n {!this.required && this.showOptionalLabel ? <span class=\"optional-label\">(optional)</span> : ''}\n </label>\n )}\n <div id=\"select-container\" class={{ 'select-container': true, 'error-container': Boolean(this.errorText) }} onMouseDown={this.handleClick}>\n {this.hasSelectedItem && this.showFormattedSelectedItem && <slot name=\"selected-item\"></slot>}\n <div class={{ 'selected-container-content': true, 'hidden': this.hasSelectedItem && this.showFormattedSelectedItem }} id=\"selected-container-content\" style={{}}>\n {(!this.hasSelectedItem \|\| !this.showFormattedSelectedItem) && (\n <cpsl-text class={{ 'selected-text': true, 'placeholder': !this.selectedValue }}>\n {!this.selectedValue ? (this.placeholder ?? 'Select') : (this.formatValue?.(this.selectedValue) ?? this.selectedValue)}\n </cpsl-text>\n )}\n </div>\n <cpsl-icon class={{ 'chevron': true, 'open': this.popoverOpen, 'has-value': Boolean(this.selectedValue) }} icon=\"chevronUp\" />\n <input\n id={this.inputId}\n disabled={this.disabled}\n class={{ disabled: this.disabled }}\n value={this.selectedValue}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onKeyPress={this.handleEnterPress}\n inputmode=\"none\"\n />\n </div>\n {(this.errorText \|\| this.helperText) && (\n <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n <span>{this.errorText ?? this.helperText}</span>\n </div>\n )}\n <cpsl-popover part=\"popover\" autoWidth={this.autoWidth} trigger={this.id} preventBlur={this.hasFocus} disabled={this.disabled} anchorEl={this.anchorEl}>\n <div part=\"dropdown\" class=\"dropdown\">\n {this.showSearch && (\n <div class=\"search-container\">\n <cpsl-input\n onClick={e => e.stopPropagation()}\n placeholder={this.searchPlaceholder ?? 'Search'}\n value=\"\"\n onCpslInput={e => {\n e.stopPropagation();\n this.cpslSearchChange.emit(e.detail.value);\n }}\n />\n </div>\n )}\n <div class=\"dropdown-inner\" style={{ maxHeight: `${this.dropdownMaxHeight}px` }}>\n <slot name=\"items\"></slot>\n </div>\n </div>\n </cpsl-popover>\n </Host>\n );\n }\n}\n\nlet inputIds = 0;\n"]}
1	+ {"version":3,"file":"cpsl-select.js","sourceRoot":"","sources":["../../../../src/components/cpsl-select/cpsl-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Element, h, Prop, State, EventEmitter, Event, Watch, Listen } from '@stencil/core';\nimport { IconType } from '../../interface';\n\n@Component({\n tag: 'cpsl-select',\n styleUrl: 'cpsl-select.scss',\n shadow: true,\n})\nexport class CpslSelect {\n @Element() el!: HTMLCpslSelectElement;\n private popoverEl!: HTMLCpslPopoverElement;\n private inputId = `cpsl-select-${inputIds++}`;\n\n @State() anchorEl!: HTMLElement;\n @State() hasFocus = false;\n @State() popoverOpen = false;\n @State() hasSelectedItem = false;\n\n /*\n ID of element to anchor popover to.\n /\n @Prop() anchorElId?: string;\n\n /\n If `true` the popover container will use the width of the content, else it will be set to the width of the trigger.\n * Default is `false`\n /\n @Prop() autoWidth?: boolean = false;\n\n /\n If `true`, the user cannot interact with the input.\n /\n @Prop() disabled = false;\n\n /\n Set the max height of the dropdown.\n /\n @Prop() dropdownMaxHeight?: number;\n\n /\n Error text to show below the input. If this is provided the input will enter an error state.\n /\n @Prop() errorText?: string;\n\n /\n Format value for display when selected.\n /\n @Prop() formatValue?: (value: string) => string;\n\n /\n Helper text to show below the input. If `\"errorText\"` is provided that will take precedence.\n /\n @Prop() helperText?: string;\n\n /\n ID of the element, must be unique for the popover trigger.\n /\n\n @Prop() id: string = `${this.inputId}-trigger`;\n\n /\n The name of the icon to use for the end icon.\n * Default: `chevronUp`\n /\n @Prop() icon?: IconType = 'chevronUp';\n\n /\n The label for the input.\n /\n @Prop() label?: string;\n\n /\n Whether or not to show the rotation animation for the end icon.\n /\n @Prop() noIconAnimation?: boolean;\n\n /\n Placeholder to display if `selectedValue` is empty.\n /\n @Prop() placeholder?: string;\n\n /\n If `true`, the user must fill in a value before submitting a form.\n /\n @Prop() required = false;\n\n /\n Value of the selected item.\n /\n @Prop() selectedValue?: string;\n\n /\n Will show the formatted selected item (passed in the `selected-item` slot) in the select rather than the item value.\n /\n @Prop() showFormattedSelectedItem?: boolean;\n\n /\n If `true`, the label will display an \"optional\" tag.\n /\n @Prop() showOptionalLabel = false;\n\n /\n If `true`, the dropdown will contain a search field.\n /\n @Prop() showSearch = false;\n\n /\n Placeholder for the search field.\n /\n @Prop() searchPlaceholder?: string;\n\n /\n Emitted when the input loses focus.\n /\n @Event() cpslBlur!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the input has focus.\n /\n @Event() cpslFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the value changes.\n /\n @Event() cpslSelectValueChange!: EventEmitter<string>;\n\n /\n Emitted when the search value changes.\n /\n @Event() cpslSearchChange!: EventEmitter<string>;\n\n @Watch('selectedValue')\n onValueChange() {\n this.popoverEl.closePopover();\n }\n\n @Watch('selectedValue')\n handleValueChange() {\n this.selectItem();\n }\n\n @Listen('cpslSelectItemClick')\n selectItemClickHandler(event: CustomEvent<string>) {\n this.cpslSelectValueChange.emit(event.detail);\n }\n\n @Listen('cpslOpen')\n onPopoverOpen() {\n this.popoverOpen = true;\n }\n\n @Listen('cpslClose')\n onPopoverClose() {\n this.popoverOpen = false;\n }\n\n componentDidLoad() {\n this.popoverEl = this.el.shadowRoot.querySelector(`cpsl-popover`) as HTMLCpslPopoverElement;\n this.anchorEl = this.anchorElId ? document.getElementById(this.anchorElId) : this.el.shadowRoot.getElementById('select-container');\n\n this.selectItem();\n }\n\n private onBlur = (ev: FocusEvent) => {\n this.hasFocus = false;\n\n this.popoverEl.closePopover();\n\n this.cpslBlur.emit(ev);\n };\n\n private onFocus = (ev: FocusEvent) => {\n this.hasFocus = true;\n\n this.cpslFocus.emit(ev);\n };\n\n private handleEnterPress = (ev: KeyboardEvent) => {\n if (ev.key === 'Enter') {\n ev.preventDefault();\n this.el.dispatchEvent(new MouseEvent('mousedown'));\n }\n };\n\n private selectItem = () => {\n const items = Array.from(this.el.querySelectorAll('cpsl-select-item')) as HTMLCpslSelectItemElement[];\n\n items.forEach(item => {\n if (item.value === this.selectedValue) {\n item.setAttribute('selected', 'true');\n } else {\n item.setAttribute('selected', 'false');\n }\n });\n\n this.hasSelectedItem = !!this.selectedValue;\n };\n\n private handleClickOutside = (event: MouseEvent) => {\n if (this.hasFocus && !this.el.contains(event.target as Node)) {\n this.hasFocus = false;\n window.removeEventListener('click', this.handleClickOutside);\n }\n };\n\n private handleClick = () => {\n if (!this.disabled) {\n this.hasFocus = true;\n window.addEventListener('click', this.handleClickOutside);\n }\n };\n\n render() {\n return (\n <Host id={this.id} class={{ 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) }}>\n {this.label && (\n <label class=\"label\" htmlFor={this.inputId}>\n {this.label}\n {this.required ? '' : ' '}\n {!this.required && this.showOptionalLabel ? <span class=\"optional-label\">(optional)</span> : ''}\n </label>\n )}\n <div part=\"select-container\" id=\"select-container\" class={{ 'select-container': true, 'error-container': Boolean(this.errorText) }} onMouseDown={this.handleClick}>\n {this.hasSelectedItem && this.showFormattedSelectedItem && <slot name=\"selected-item\"></slot>}\n <div class={{ 'selected-container-content': true, 'hidden': this.hasSelectedItem && this.showFormattedSelectedItem }} id=\"selected-container-content\" style={{}}>\n {(!this.hasSelectedItem \|\| !this.showFormattedSelectedItem) && (\n <cpsl-text class={{ 'selected-text': true, 'placeholder': !this.selectedValue }}>\n {!this.selectedValue ? (this.placeholder ?? 'Select') : (this.formatValue?.(this.selectedValue) ?? this.selectedValue)}\n </cpsl-text>\n )}\n </div>\n <cpsl-icon part=\"icon\" class={{ 'chevron': true, 'open': !this.noIconAnimation && this.popoverOpen, 'has-value': Boolean(this.selectedValue) }} icon={this.icon} />\n <input\n id={this.inputId}\n disabled={this.disabled}\n class={{ disabled: this.disabled }}\n value={this.selectedValue}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onKeyPress={this.handleEnterPress}\n inputmode=\"none\"\n />\n </div>\n {(this.errorText \|\| this.helperText) && (\n <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n <span>{this.errorText ?? this.helperText}</span>\n </div>\n )}\n <cpsl-popover part=\"popover\" autoWidth={this.autoWidth} trigger={this.id} preventBlur={this.hasFocus} disabled={this.disabled} anchorEl={this.anchorEl}>\n <div part=\"dropdown\" class=\"dropdown\">\n {this.showSearch && (\n <div class=\"search-container\">\n <cpsl-input\n onClick={e => e.stopPropagation()}\n placeholder={this.searchPlaceholder ?? 'Search'}\n value=\"\"\n onCpslInput={e => {\n e.stopPropagation();\n this.cpslSearchChange.emit(e.detail.value);\n }}\n />\n </div>\n )}\n <div class=\"dropdown-inner\" style={{ maxHeight: `${this.dropdownMaxHeight}px` }}>\n <slot name=\"items\"></slot>\n </div>\n </div>\n </cpsl-popover>\n </Host>\n );\n }\n}\n\nlet inputIds = 0;\n"]}

package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js CHANGED Viewed

@@ -163,7 +163,7 @@ export class CpslSlideButton {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "\"search\" | \"alertCircle\" | \"alertTriangle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowCircleBrokenDownLeft\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"bank\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircleFilled\" | \"checkCircle\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"cosmos\" | \"creditCard\" | \"cube\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"dot\" | \"downloadCloud\" | \"download\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"ethereum\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"folder\" | \"githubBrand\" | \"github\" | \"globe\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroAlertCircle\" | \"heroCheckmarkCapsule\" | \"heroCheckmark\" | \"heroEmail\" | \"heroExternalConnection\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroPlusCircleCapsule\" | \"heroPlusCircle\" | \"heroWallet\" | \"home\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning01\" | \"lightning\" | \"linkExternal\" | \"linkedinBrand\" | \"linkedin\" | \"logOut\" | \"mail\" | \"menu\" | \"moonpayBrand\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"puzzlePiece\" | \"qrCode02\" | \"qrCode\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"send\" | \"settings\" | \"shield\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"solana\" | \"stars\" | \"stripeBrand\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"wallet\" | \"x\" | \"youtubeBrand\" | \"youtube\" | \"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BQ2\" | \"BQ3\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CD2\" | \"CF\" | \"CH\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DS\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB2\" | \"GB\" | \"GD\" | \"GE\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PN\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SE\" | \"SG\" | \"SI\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WS\" | \"YE\" | \"ZA\" | \"ZM\" | \"ZW\"",
+                    "resolved": "\"search\" | \"alertCircle\" | \"alertTriangle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arbitrumBrand\" | \"arrowCircleBrokenDownLeft\" | \"arrowCircleDownFilled\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"bank\" | \"baseBrand\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"celoBrand\" | \"checkCircleFilled\" | \"checkCircle\" | \"check\" | \"chevronDown\" | \"chevronSelectorVertical\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy07\" | \"copy\" | \"cosmos\" | \"creditCard02\" | \"creditCard\" | \"cube03\" | \"cubeOutline\" | \"cube\" | \"currencyDollar\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"dot\" | \"dots\" | \"downloadCloud\" | \"download\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"edit02\" | \"ethereum\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"folder\" | \"githubBrand\" | \"github\" | \"globe\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroAlertCircle\" | \"heroCheckmarkCapsule\" | \"heroCheckmark\" | \"heroEmail\" | \"heroExternalConnection\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroPlusCircleCapsule\" | \"heroPlusCircle\" | \"heroWallet\" | \"home\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning01\" | \"lightning\" | \"linkExternal\" | \"linkedinBrand\" | \"linkedin\" | \"logOut\" | \"mail\" | \"menu\" | \"moonpayBrand\" | \"moreLoginOptions\" | \"optimismBrand\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"plus\" | \"polygonBrand\" | \"polygon\" | \"puzzlePiece\" | \"qrCode02\" | \"qrCode\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"send\" | \"settings\" | \"shield\" | \"signalBrand\" | \"signal\" | \"sliders\" | \"snapchatBrand\" | \"snapchat\" | \"solana\" | \"star04Filled\" | \"stars\" | \"stripeBrand\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"trash\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"usdcBrand\" | \"user\" | \"wallet\" | \"x\" | \"youtubeBrand\" | \"youtube\" | \"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BQ2\" | \"BQ3\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CD2\" | \"CF\" | \"CH\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DS\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB2\" | \"GB\" | \"GD\" | \"GE\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PN\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SE\" | \"SG\" | \"SI\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WS\" | \"YE\" | \"ZA\" | \"ZM\" | \"ZW\"",
                     "references": {
                         "IconType": {
                             "location": "import",
@@ -203,7 +203,7 @@ export class CpslSlideButton {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "\"search\" | \"alertCircle\" | \"alertTriangle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowCircleBrokenDownLeft\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"bank\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircleFilled\" | \"checkCircle\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"cosmos\" | \"creditCard\" | \"cube\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"dot\" | \"downloadCloud\" | \"download\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"ethereum\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"folder\" | \"githubBrand\" | \"github\" | \"globe\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroAlertCircle\" | \"heroCheckmarkCapsule\" | \"heroCheckmark\" | \"heroEmail\" | \"heroExternalConnection\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroPlusCircleCapsule\" | \"heroPlusCircle\" | \"heroWallet\" | \"home\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning01\" | \"lightning\" | \"linkExternal\" | \"linkedinBrand\" | \"linkedin\" | \"logOut\" | \"mail\" | \"menu\" | \"moonpayBrand\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"puzzlePiece\" | \"qrCode02\" | \"qrCode\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"send\" | \"settings\" | \"shield\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"solana\" | \"stars\" | \"stripeBrand\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"wallet\" | \"x\" | \"youtubeBrand\" | \"youtube\" | \"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BQ2\" | \"BQ3\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CD2\" | \"CF\" | \"CH\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DS\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB2\" | \"GB\" | \"GD\" | \"GE\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PN\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SE\" | \"SG\" | \"SI\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WS\" | \"YE\" | \"ZA\" | \"ZM\" | \"ZW\"",
+                    "resolved": "\"search\" | \"alertCircle\" | \"alertTriangle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arbitrumBrand\" | \"arrowCircleBrokenDownLeft\" | \"arrowCircleDownFilled\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"bank\" | \"baseBrand\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"celoBrand\" | \"checkCircleFilled\" | \"checkCircle\" | \"check\" | \"chevronDown\" | \"chevronSelectorVertical\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy07\" | \"copy\" | \"cosmos\" | \"creditCard02\" | \"creditCard\" | \"cube03\" | \"cubeOutline\" | \"cube\" | \"currencyDollar\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"dot\" | \"dots\" | \"downloadCloud\" | \"download\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"edit02\" | \"ethereum\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"folder\" | \"githubBrand\" | \"github\" | \"globe\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroAlertCircle\" | \"heroCheckmarkCapsule\" | \"heroCheckmark\" | \"heroEmail\" | \"heroExternalConnection\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroPlusCircleCapsule\" | \"heroPlusCircle\" | \"heroWallet\" | \"home\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning01\" | \"lightning\" | \"linkExternal\" | \"linkedinBrand\" | \"linkedin\" | \"logOut\" | \"mail\" | \"menu\" | \"moonpayBrand\" | \"moreLoginOptions\" | \"optimismBrand\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"plus\" | \"polygonBrand\" | \"polygon\" | \"puzzlePiece\" | \"qrCode02\" | \"qrCode\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"send\" | \"settings\" | \"shield\" | \"signalBrand\" | \"signal\" | \"sliders\" | \"snapchatBrand\" | \"snapchat\" | \"solana\" | \"star04Filled\" | \"stars\" | \"stripeBrand\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"trash\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"usdcBrand\" | \"user\" | \"wallet\" | \"x\" | \"youtubeBrand\" | \"youtube\" | \"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BQ2\" | \"BQ3\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CD2\" | \"CF\" | \"CH\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DS\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB2\" | \"GB\" | \"GD\" | \"GE\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PN\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SE\" | \"SG\" | \"SI\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WS\" | \"YE\" | \"ZA\" | \"ZM\" | \"ZW\"",
                     "references": {
                         "IconType": {
                             "location": "import",

package/dist/collection/components/cpsl-tab/cpsl-tab.css CHANGED Viewed

@@ -3,10 +3,6 @@
   --tab-gap: 2px;
   --tab-icon-height: 16px;
   --tab-icon-width: 16px;
-  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;
@@ -39,6 +35,10 @@
   color: var(--tab-color);
   display: flex;
   gap: var(--tab-gap);
+  padding-top: var(--tab-top-padding);
+  padding-bottom: var(--tab-bottom-padding);
+  padding-left: var(--tab-left-padding);
+  padding-right: var(--tab-right-padding);
 }
 .content {

package/dist/collection/components/cpsl-tabs/cpsl-tabs.css CHANGED Viewed

@@ -66,6 +66,7 @@
   --tabs-background-color: var(--cpsl-color-tabs-background);
   --slider-background-color: var(--cpsl-color-tabs-slider-background);
   display: inline-block;
+  width: fit-content;
   max-width: 100%;
   font-family: var(--cpsl-font-family, inherit);
 }

package/dist/collection/components/cpsl-text/cpsl-text.css CHANGED Viewed

@@ -54,21 +54,8 @@
    * }
    */
 :host {
-  font-family: var(--cpsl-font-family, inherit);
-  color: var(--cpsl-color-text-primary);
-  padding: 0px;
-  margin: 0px;
   display: block;
 }
-:host::-moz-selection {
-  /* Code for Firefox */
-  color: var(--cpsl-color-text-inverted) !important;
-  background: var(--cpsl-color-background-64) !important;
-}
-:host::selection {
-  color: var(--cpsl-color-text-inverted) !important;
-  background: var(--cpsl-color-background-64) !important;
-}
 :host p,
 h1,
@@ -77,107 +64,245 @@ h3,
 h4,
 h5,
 h6 {
+  font-family: var(--cpsl-font-family, inherit);
   padding: 0px;
   margin: 0px;
-  font-weight: inherit;
-  font-size: inherit;
-  letter-spacing: inherit;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-smooth: never;
 }
-:host(.primary) {
-  color: var(--cpsl-color-text-primary);
+:host p::-moz-selection,
+h1::-moz-selection,
+h2::-moz-selection,
+h3::-moz-selection,
+h4::-moz-selection,
+h5::-moz-selection,
+h6::-moz-selection {
+  /* Code for Firefox */
+  color: var(--cpsl-color-text-inverted) !important;
+  background: var(--cpsl-color-background-64) !important;
 }
-:host(.secondary) {
-  color: var(--cpsl-color-text-secondary);
+:host p::selection,
+h1::selection,
+h2::selection,
+h3::selection,
+h4::selection,
+h5::selection,
+h6::selection {
+  color: var(--cpsl-color-text-inverted) !important;
+  background: var(--cpsl-color-background-64) !important;
 }
-:host(.tertiary) {
-  color: var(--cpsl-color-text-tertiary);
+:host p.primary,
+h1.primary,
+h2.primary,
+h3.primary,
+h4.primary,
+h5.primary,
+h6.primary {
+  color: var(--color-override, var(--cpsl-color-text-primary));
 }
-:host(.subtle) {
-  color: var(--cpsl-color-text-subtle);
+:host p.secondary,
+h1.secondary,
+h2.secondary,
+h3.secondary,
+h4.secondary,
+h5.secondary,
+h6.secondary {
+  color: var(--color-override, var(--cpsl-color-text-secondary));
 }
-:host(.inverted) {
-  color: var(--cpsl-color-text-inverted);
+:host p.tertiary,
+h1.tertiary,
+h2.tertiary,
+h3.tertiary,
+h4.tertiary,
+h5.tertiary,
+h6.tertiary {
+  color: var(--color-override, var(--cpsl-color-text-tertiary));
 }
-:host(.error) {
-  color: var(--cpsl-color-text-error);
+:host p.subtle,
+h1.subtle,
+h2.subtle,
+h3.subtle,
+h4.subtle,
+h5.subtle,
+h6.subtle {
+  color: var(--color-override, var(--cpsl-color-text-subtle));
 }
-:host(.contrast) {
-  color: var(--cpsl-color-text-contrast);
+:host p.inverted,
+h1.inverted,
+h2.inverted,
+h3.inverted,
+h4.inverted,
+h5.inverted,
+h6.inverted {
+  color: var(--color-override, var(--cpsl-color-text-inverted));
 }
-:host(.medium) {
+:host p.error,
+h1.error,
+h2.error,
+h3.error,
+h4.error,
+h5.error,
+h6.error {
+  color: var(--color-override, var(--cpsl-color-text-error));
+}
+:host p.contrast,
+h1.contrast,
+h2.contrast,
+h3.contrast,
+h4.contrast,
+h5.contrast,
+h6.contrast {
+  color: var(--color-override, var(--cpsl-color-text-contrast));
+}
+:host p.regular,
+h1.regular,
+h2.regular,
+h3.regular,
+h4.regular,
+h5.regular,
+h6.regular {
+  font-weight: 400;
+}
+:host p.medium,
+h1.medium,
+h2.medium,
+h3.medium,
+h4.medium,
+h5.medium,
+h6.medium {
   font-weight: 500;
 }
-:host(.semi-bold) {
+:host p.semi-bold,
+h1.semi-bold,
+h2.semi-bold,
+h3.semi-bold,
+h4.semi-bold,
+h5.semi-bold,
+h6.semi-bold {
   font-weight: 600;
 }
-:host(.bold) {
+:host p.bold,
+h1.bold,
+h2.bold,
+h3.bold,
+h4.bold,
+h5.bold,
+h6.bold {
   font-weight: 700;
 }
-:host(.body-2xs) {
+:host p.body-2xs,
+h1.body-2xs,
+h2.body-2xs,
+h3.body-2xs,
+h4.body-2xs,
+h5.body-2xs,
+h6.body-2xs {
   font-size: var(--cpsl-font-size-body-2xs);
 }
-:host(.body-xs) {
+:host p.body-xs,
+h1.body-xs,
+h2.body-xs,
+h3.body-xs,
+h4.body-xs,
+h5.body-xs,
+h6.body-xs {
   font-size: var(--cpsl-font-size-body-xs);
 }
-:host(.body-s) {
+:host p.body-s,
+h1.body-s,
+h2.body-s,
+h3.body-s,
+h4.body-s,
+h5.body-s,
+h6.body-s {
   font-size: var(--cpsl-font-size-body-s);
   line-height: 142.857%;
 }
-:host(.body-m) {
+:host p.body-m,
+h1.body-m,
+h2.body-m,
+h3.body-m,
+h4.body-m,
+h5.body-m,
+h6.body-m {
   font-size: var(--cpsl-font-size-body-m);
   line-height: 150%;
 }
-:host(.body-l) {
+:host p.body-l,
+h1.body-l,
+h2.body-l,
+h3.body-l,
+h4.body-l,
+h5.body-l,
+h6.body-l {
   font-size: var(--cpsl-font-size-body-l);
   line-height: 140%;
 }
-:host(.body-xl) {
+:host p.body-xl,
+h1.body-xl,
+h2.body-xl,
+h3.body-xl,
+h4.body-xl,
+h5.body-xl,
+h6.body-xl {
   font-size: var(--cpsl-font-size-body-xl);
 }
-:host(.heading-xs) {
+:host p.heading-xs,
+h1.heading-xs,
+h2.heading-xs,
+h3.heading-xs,
+h4.heading-xs,
+h5.heading-xs,
+h6.heading-xs {
   font-size: var(--cpsl-font-size-heading-xs);
 }
-:host(.heading-s) {
+:host p.heading-s,
+h1.heading-s,
+h2.heading-s,
+h3.heading-s,
+h4.heading-s,
+h5.heading-s,
+h6.heading-s {
   font-size: var(--cpsl-font-size-heading-s);
 }
-:host(.heading-m) {
+:host p.heading-m,
+h1.heading-m,
+h2.heading-m,
+h3.heading-m,
+h4.heading-m,
+h5.heading-m,
+h6.heading-m {
   font-size: var(--cpsl-font-size-heading-m);
   letter-spacing: -0.4px;
 }
-:host(.heading-l) {
+:host p.heading-l,
+h1.heading-l,
+h2.heading-l,
+h3.heading-l,
+h4.heading-l,
+h5.heading-l,
+h6.heading-l {
   font-size: var(--cpsl-font-size-heading-l);
   letter-spacing: -1.12px;
 }
-:host(.heading-xl) {
+:host p.heading-xl,
+h1.heading-xl,
+h2.heading-xl,
+h3.heading-xl,
+h4.heading-xl,
+h5.heading-xl,
+h6.heading-xl {
   font-size: var(--cpsl-font-size-heading-xl);
   letter-spacing: -1.28px;
 }
-:host(.heading-2xl) {
+:host p.heading-2xl,
+h1.heading-2xl,
+h2.heading-2xl,
+h3.heading-2xl,
+h4.heading-2xl,
+h5.heading-2xl,
+h6.heading-2xl {
   font-size: var(--cpsl-font-size-heading-2xl);
   letter-spacing: -1.44px;
 }

package/dist/collection/components/cpsl-text/cpsl-text.js CHANGED Viewed

@@ -1,37 +1,39 @@
 import { Host, h } from "@stencil/core";
+const TEXT_EL_PART = 'text-element';
 export class CpslText {
     constructor() {
+        this.getContent = ({ classes, }) => {
+            switch (this.variant) {
+                case 'headingXS': {
+                    return (h("h6", { class: classes, part: TEXT_EL_PART }, h("slot", null)));
+                }
+                case 'headingS': {
+                    return (h("h5", { class: classes, part: TEXT_EL_PART }, h("slot", null)));
+                }
+                case 'headingM': {
+                    return (h("h4", { class: classes, part: TEXT_EL_PART }, h("slot", null)));
+                }
+                case 'headingL': {
+                    return (h("h3", { class: classes, part: TEXT_EL_PART }, h("slot", null)));
+                }
+                case 'headingXL': {
+                    return (h("h2", { class: classes, part: TEXT_EL_PART }, h("slot", null)));
+                }
+                case 'heading2XL': {
+                    return (h("h1", { class: classes, part: TEXT_EL_PART }, h("slot", null)));
+                }
+                default: {
+                    return (h("p", { class: classes, part: TEXT_EL_PART }, h("slot", null)));
+                }
+            }
+        };
         this.color = 'primary';
         this.variant = 'bodyM';
         this.weight = 'regular';
     }
-    get Content() {
-        switch (this.variant) {
-            case 'headingXS': {
-                return (h("h6", null, h("slot", null)));
-            }
-            case 'headingS': {
-                return (h("h5", null, h("slot", null)));
-            }
-            case 'headingM': {
-                return (h("h4", null, h("slot", null)));
-            }
-            case 'headingL': {
-                return (h("h3", null, h("slot", null)));
-            }
-            case 'headingXL': {
-                return (h("h2", null, h("slot", null)));
-            }
-            case 'heading2XL': {
-                return (h("h1", null, h("slot", null)));
-            }
-            default: {
-                return (h("p", null, h("slot", null)));
-            }
-        }
-    }
     render() {
-        return (h(Host, { key: 'e5bbaea870c32c4ed4f77094fb57988d6fa8b2fc', class: {
+        return (h(Host, { key: '4e5d967b96ae69553f1826a31cd0baf84735cdb0' }, this.getContent({
+            classes: {
                 // COLORS
                 'primary': this.color === 'primary',
                 'secondary': this.color === 'secondary',
@@ -57,7 +59,8 @@ export class CpslText {
                 'heading-l': this.variant === 'headingL',
                 'heading-xl': this.variant === 'headingXL',
                 'heading-2xl': this.variant === 'heading2XL',
-            } }, this.Content));
+            },
+        })));
     }
     static get is() { return "cpsl-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-text/cpsl-text.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-text.js","sourceRoot":"","sources":["../../../../src/components/cpsl-text/cpsl-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;~~AAOzD~~,MAAM,OAAO,QAAQ;;~~qBAMmF~~,~~SAAS;uBAOqD~~,OAAO~~;sBAO7G~~,~~SAAS;;IAEvE~~,~~IAAY~~,~~OAAO~~;~~QACjB~~,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;~~YACrB~~,KAAK,WAAW,CAAC,CAAC,CAAC;~~gBACjB~~,OAAO,CACL;~~oBACE~~,eAAa,CACV,CACN,CAAC;~~YACJ~~,CAAC;~~YACD~~,KAAK,UAAU,CAAC,CAAC,CAAC;~~gBAChB~~,OAAO,CACL;~~oBACE~~,eAAa,CACV,CACN,CAAC;~~YACJ~~,CAAC;~~YACD~~,KAAK,UAAU,CAAC,CAAC,CAAC;~~gBAChB~~,OAAO,CACL;~~oBACE~~,eAAa,CACV,CACN,CAAC;~~YACJ~~,CAAC;~~YACD~~,KAAK,UAAU,CAAC,CAAC,CAAC;~~gBAChB~~,OAAO,CACL;~~oBACE~~,eAAa,CACV,CACN,CAAC;~~YACJ~~,CAAC;~~YACD~~,KAAK,WAAW,CAAC,CAAC,CAAC;~~gBACjB~~,OAAO,CACL;~~oBACE~~,eAAa,CACV,CACN,CAAC;~~YACJ~~,CAAC;~~YACD~~,KAAK,YAAY,CAAC,CAAC,CAAC;~~gBAClB~~,OAAO,CACL;~~oBACE~~,eAAa,CACV,CACN,CAAC;~~YACJ~~,CAAC;~~YACD~~,OAAO,CAAC,CAAC,CAAC;~~gBACR~~,OAAO,CACL;~~oBACE~~,eAAa,CACX,CACL,CAAC;~~YACJ~~,CAAC;~~QACH~~,CAAC;~~IACH~~,CAAC;~~IAED~~,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,~~qDACH~~,~~KAAK~~,EAAE;~~gBACL~~,SAAS;gBACT,SAAS,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;gBACnC,WAAW,EAAE,IAAI,CAAC,KAAK,KAAK,WAAW;gBACvC,UAAU,EAAE,IAAI,CAAC,KAAK,KAAK,UAAU;gBACrC,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;gBACjC,UAAU,EAAE,IAAI,CAAC,KAAK,KAAK,UAAU;gBACrC,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;gBAC/B,UAAU,EAAE,IAAI,CAAC,KAAK,KAAK,UAAU;gBACrC,UAAU;gBACV,QAAQ,EAAE,IAAI,CAAC,MAAM,KAAK,QAAQ;gBAClC,WAAW,EAAE,IAAI,CAAC,MAAM,KAAK,UAAU;gBACvC,MAAM,EAAE,IAAI,CAAC,MAAM,KAAK,MAAM;gBAC9B,QAAQ;gBACR,UAAU,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACtC,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;gBACpC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBAClC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBAClC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBAClC,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;gBACpC,YAAY,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;gBAC1C,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACxC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACxC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACxC,YAAY,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;gBAC1C,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY;aAC7C,~~IAEA,IAAI,~~CAAC,~~OAAO~~,CACR,~~CACR,~~CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'cpsl-text',\n styleUrl: 'cpsl-text.scss',\n shadow: true,\n})\nexport class CpslText {\n /*\n The color of text.\n * Options are: `\"primary\"`, `\"secondary\", `\"tertiary\", `\"subtle\", `\"inverted\", `\"error\".\n * Default is: `\"primary\"`.\n /\n @Prop() color?: 'primary' \| 'secondary' \| 'tertiary' \| 'subtle' \| 'inverted' \| 'error' \| 'contrast' = 'primary';\n\n /\n The variant of text.\n * Options are: `\"body2XS\"`, `\"bodyXS\", `\"bodyS\", `\"bodyM\", `\"bodyL\", `\"bodyXL\", `\"headingXS\", `\"headingS\", `\"headingM\", `\"headingL\", `\"headingXL\", `\"heading2XL\".\n * Default is: `\"bodyM\"`.\n /\n @Prop() variant?: 'body2XS' \| 'bodyXS' \| 'bodyS' \| 'bodyM' \| 'bodyL' \| 'bodyXL' \| 'headingXS' \| 'headingS' \| 'headingM' \| 'headingL' \| 'headingXL' \| 'heading2XL' = 'bodyM';\n\n /\n The weight of text.\n * Options are: `\"regular\"`, `\"medium\", `\"semiBold\", `\"bold\".\n * Default is: `\"regular\"`.\n */\n @Prop() weight?: 'regular' \| 'medium' \| 'semiBold' \| 'bold' = 'regular';\n\n private ~~get~~ ~~Content~~() {\n switch (this.variant) {\n case 'headingXS': {\n return (\n <h6>\n <slot></slot>\n </h6>\n );\n }\n case 'headingS': {\n return (\n <h5>\n <slot></slot>\n </h5>\n );\n }\n case 'headingM': {\n return (\n <h4>\n <slot></slot>\n </h4>\n );\n }\n case 'headingL': {\n return (\n <h3>\n <slot></slot>\n </h3>\n );\n }\n case 'headingXL': {\n return (\n <h2>\n <slot></slot>\n </h2>\n );\n }\n case 'heading2XL': {\n return (\n <h1>\n <slot></slot>\n </h1>\n );\n }\n default: {\n return (\n <p>\n <slot></slot>\n </p>\n );\n }\n }\n }\n\n render() {\n return (\n <Host\n ~~class=~~{{\n // COLORS\n 'primary': this.color === 'primary',\n 'secondary': this.color === 'secondary',\n 'tertiary': this.color === 'tertiary',\n 'subtle': this.color === 'subtle',\n 'inverted': this.color === 'inverted',\n 'error': this.color === 'error',\n 'contrast': this.color === 'contrast',\n // WEIGHTS\n 'medium': this.weight === 'medium',\n 'semi-bold': this.weight === 'semiBold',\n 'bold': this.weight === 'bold',\n // SIZES\n 'body-2xs': this.variant === 'body2XS',\n 'body-xs': this.variant === 'bodyXS',\n 'body-s': this.variant === 'bodyS',\n 'body-m': this.variant === 'bodyM',\n 'body-l': this.variant === 'bodyL',\n 'body-xl': this.variant === 'bodyXL',\n 'heading-xs': this.variant === 'headingXS',\n 'heading-s': this.variant === 'headingS',\n 'heading-m': this.variant === 'headingM',\n 'heading-l': this.variant === 'headingL',\n 'heading-xl': this.variant === 'headingXL',\n 'heading-2xl': this.variant === 'heading2XL',\n }}\n ~~>\n~~ ~~{this.Content~~}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"cpsl-text.js","sourceRoot":"","sources":["../../../../src/components/cpsl-text/cpsl-text.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\nconst TEXT_EL_PART = 'text-element';\n\n@Component({\n tag: 'cpsl-text',\n styleUrl: 'cpsl-text.scss',\n shadow: true,\n})\nexport class CpslText {\n /*\n The color of text.\n * Options are: `\"primary\"`, `\"secondary\", `\"tertiary\", `\"subtle\", `\"inverted\", `\"error\".\n * Default is: `\"primary\"`.\n /\n @Prop() color?: 'primary' \| 'secondary' \| 'tertiary' \| 'subtle' \| 'inverted' \| 'error' \| 'contrast' = 'primary';\n\n /\n The variant of text.\n * Options are: `\"body2XS\"`, `\"bodyXS\", `\"bodyS\", `\"bodyM\", `\"bodyL\", `\"bodyXL\", `\"headingXS\", `\"headingS\", `\"headingM\", `\"headingL\", `\"headingXL\", `\"heading2XL\".\n * Default is: `\"bodyM\"`.\n /\n @Prop() variant?: 'body2XS' \| 'bodyXS' \| 'bodyS' \| 'bodyM' \| 'bodyL' \| 'bodyXL' \| 'headingXS' \| 'headingS' \| 'headingM' \| 'headingL' \| 'headingXL' \| 'heading2XL' = 'bodyM';\n\n /\n The weight of text.\n * Options are: `\"regular\"`, `\"medium\", `\"semiBold\", `\"bold\".\n * Default is: `\"regular\"`.\n */\n @Prop() weight?: 'regular' \| 'medium' \| 'semiBold' \| 'bold' = 'regular';\n\n private getContent = ({\n classes,\n }: {\n classes: {\n [className: string]: boolean;\n };\n }) => {\n switch (this.variant) {\n case 'headingXS': {\n return (\n <h6 class={classes} part={TEXT_EL_PART}>\n <slot></slot>\n </h6>\n );\n }\n case 'headingS': {\n return (\n <h5 class={classes} part={TEXT_EL_PART}>\n <slot></slot>\n </h5>\n );\n }\n case 'headingM': {\n return (\n <h4 class={classes} part={TEXT_EL_PART}>\n <slot></slot>\n </h4>\n );\n }\n case 'headingL': {\n return (\n <h3 class={classes} part={TEXT_EL_PART}>\n <slot></slot>\n </h3>\n );\n }\n case 'headingXL': {\n return (\n <h2 class={classes} part={TEXT_EL_PART}>\n <slot></slot>\n </h2>\n );\n }\n case 'heading2XL': {\n return (\n <h1 class={classes} part={TEXT_EL_PART}>\n <slot></slot>\n </h1>\n );\n }\n default: {\n return (\n <p class={classes} part={TEXT_EL_PART}>\n <slot></slot>\n </p>\n );\n }\n }\n };\n\n render() {\n return (\n <Host>\n {this.getContent({\n classes: {\n // COLORS\n 'primary': this.color === 'primary',\n 'secondary': this.color === 'secondary',\n 'tertiary': this.color === 'tertiary',\n 'subtle': this.color === 'subtle',\n 'inverted': this.color === 'inverted',\n 'error': this.color === 'error',\n 'contrast': this.color === 'contrast',\n // WEIGHTS\n 'medium': this.weight === 'medium',\n 'semi-bold': this.weight === 'semiBold',\n 'bold': this.weight === 'bold',\n // SIZES\n 'body-2xs': this.variant === 'body2XS',\n 'body-xs': this.variant === 'bodyXS',\n 'body-s': this.variant === 'bodyS',\n 'body-m': this.variant === 'bodyM',\n 'body-l': this.variant === 'bodyL',\n 'body-xl': this.variant === 'bodyXL',\n 'heading-xs': this.variant === 'headingXS',\n 'heading-s': this.variant === 'headingS',\n 'heading-m': this.variant === 'headingM',\n 'heading-l': this.variant === 'headingL',\n 'heading-xl': this.variant === 'headingXL',\n 'heading-2xl': this.variant === 'heading2XL',\n },\n })}\n </Host>\n );\n }\n}\n"]}