@usecapsule/core-components 3.2.0-dev.1 → 3.3.0-dev.0

package/dist/collection/components/cpsl-select/cpsl-select.js

@@ -28,7 +28,7 @@ export class CpslSelect {
                     item.setAttribute('selected', 'false');
                 }
             });
-            if (!Boolean(this.selectedValue)) {
+            if (!this.selectedValue) {
                 this.hasSelectedItem = false;
             }
         };
@@ -48,6 +48,8 @@ export class CpslSelect {
         this.hasFocus = false;
         this.popoverOpen = false;
         this.hasSelectedItem = false;
+        this.anchorElId = undefined;
+        this.autoWidth = false;
         this.disabled = false;
         this.dropdownMaxHeight = undefined;
         this.errorText = undefined;
@@ -60,6 +62,8 @@ export class CpslSelect {
         this.selectedValue = undefined;
         this.showFormattedSelectedItem = undefined;
         this.showOptionalLabel = false;
+        this.showSearch = false;
+        this.searchPlaceholder = undefined;
     }
     onValueChange() {
         this.popoverEl.closePopover();
@@ -78,12 +82,15 @@ export class CpslSelect {
     }
     componentDidLoad() {
         this.popoverEl = this.el.shadowRoot.querySelector(`cpsl-popover`);
-        this.anchorEl = this.el.shadowRoot.getElementById('select-container');
+        this.anchorEl = this.anchorElId ? document.getElementById(this.anchorElId) : this.el.shadowRoot.getElementById('select-container');
         this.selectItem();
     }
     render() {
-        var _a, _b, _c, _d;
-        return (h(Host, { key: '3d3f052d6702fc9b74b03fc55b2766eec299c449', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) } }, this.label && (h("label", { class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '90ef0cd5ae49233665debddbfe9dd096e6434374', id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onMouseDown: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && h("slot", { name: "selected-item" }), h("div", { key: '6bee82c04abdfc2ad735f63e2ab793304fb6996a', class: "selected-container-content", id: "selected-container-content" }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (h("cpsl-text", { class: { 'selected-text': true, 'placeholder': !Boolean(this.selectedValue) } }, !Boolean(this.selectedValue) ? (_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select' : (_c = (_b = this.formatValue) === null || _b === void 0 ? void 0 : _b.call(this, this.selectedValue)) !== null && _c !== void 0 ? _c : this.selectedValue))), h("cpsl-icon", { key: 'f74f7d8b6201ba9032d5e1ccd75c487f0e4251bb', class: { 'chevron': true, 'open': this.popoverOpen, 'has-value': Boolean(this.selectedValue) }, icon: "chevronUp" }), h("input", { key: '0f14ad55bc376590da75f5e4f8664f9fcb893c6d', id: this.inputId, disabled: this.disabled, class: { disabled: this.disabled }, value: this.selectedValue, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.handleEnterPress, inputmode: "none" })), (this.errorText || this.helperText) && (h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", null, (_d = this.errorText) !== null && _d !== void 0 ? _d : this.helperText))), h("cpsl-popover", { key: 'df6d347b953633d1f8ecb71d4ee5767da4ddb223', autoWidth: false, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, h("div", { key: '524ffcfc61bcba174422770542516028ee37ad48', class: "dropdown" }, h("div", { key: 'fb72dace14c9dd43b48654e22bb268b2ffb06876', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, h("slot", { key: 'a67f1f8ebcb08b0827dbff2e2a5896cf707d6182', name: "items" }))))));
+        var _a, _b, _c, _d, _e;
+        return (h(Host, { key: '72be0f8b2d2eb537dc174bdc74aafa9b3c5a80e6', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) } }, this.label && (h("label", { key: '95a25acd1fad10b5ce01be175f5469468dbe5cdb', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '1f19b97f0d973264a9fa4c814b43095249496431', id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onMouseDown: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && h("slot", { key: '325527b35284e3058551175b2c392be1557a1a5e', name: "selected-item" }), h("div", { key: '4da5f55d383ee4725f81bd6d9d174c9231d74f1a', class: { 'selected-container-content': true, 'hidden': this.showFormattedSelectedItem }, id: "selected-container-content", style: {} }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (h("cpsl-text", { key: 'bc83e992888ae73bc863d96ef11d2b849a6f60f8', class: { 'selected-text': true, 'placeholder': !this.selectedValue } }, !this.selectedValue ? ((_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select') : ((_c = (_b = this.formatValue) === null || _b === void 0 ? void 0 : _b.call(this, this.selectedValue)) !== null && _c !== void 0 ? _c : this.selectedValue)))), h("cpsl-icon", { key: 'f96b40c6101c561b1e7cc605f157697209dd1e59', class: { 'chevron': true, 'open': this.popoverOpen, 'has-value': Boolean(this.selectedValue) }, icon: "chevronUp" }), h("input", { key: '8f660d9215da0960eb4ca37292fd4c400b65de77', id: this.inputId, disabled: this.disabled, class: { disabled: this.disabled }, value: this.selectedValue, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.handleEnterPress, inputmode: "none" })), (this.errorText || this.helperText) && (h("div", { key: '26eacb913e1d727ada026ef75a9d7d96478bae9b', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '3ec7937586e52f0858c2e4595596349d8ae4a57d' }, (_d = this.errorText) !== null && _d !== void 0 ? _d : this.helperText))), h("cpsl-popover", { key: '746e0d3b68f1f550c44cdb00f1a846209b34957d', part: "popover", autoWidth: this.autoWidth, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, h("div", { key: 'c1ec487ab2857c0613f3748123d25da32793a008', part: "dropdown", class: "dropdown" }, this.showSearch && (h("div", { key: '342450b93fa5b20d7663c8390ed006921e77b9d4', class: "search-container" }, h("cpsl-input", { key: 'a72472c811025a6d60e4c9bebe37fe7b56707f5d', onClick: e => e.stopPropagation(), placeholder: (_e = this.searchPlaceholder) !== null && _e !== void 0 ? _e : 'Search', value: "", onCpslInput: e => {
+                e.stopPropagation();
+                this.cpslSearchChange.emit(e.detail.value);
+            } }))), h("div", { key: 'c6977cc371d4fb6fce0162d983c53a15dce89590', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, h("slot", { key: 'b867d8f557e56105b7a5c7a5f84d26ef3fd25ac5', name: "items" }))))));
     }
     static get is() { return "cpsl-select"; }
     static get encapsulation() { return "shadow"; }
@@ -99,6 +106,41 @@ export class CpslSelect {
     }
     static get properties() {
         return {
+            "anchorElId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "ID of element to anchor popover to."
+                },
+                "attribute": "anchor-el-id",
+                "reflect": false
+            },
+            "autoWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` the popover container will use the width of the content, else it will be set to the width of the trigger.\nDefault is `false`"
+                },
+                "attribute": "auto-width",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -304,6 +346,41 @@ export class CpslSelect {
                 "attribute": "show-optional-label",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "showSearch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the dropdown will contain a search field."
+                },
+                "attribute": "show-search",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "searchPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder for the search field."
+                },
+                "attribute": "search-placeholder",
+                "reflect": false
             }
         };
     }
@@ -371,6 +448,21 @@ export class CpslSelect {
                     "resolved": "string",
                     "references": {}
                 }
+            }, {
+                "method": "cpslSearchChange",
+                "name": "cpslSearchChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the search value changes."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "el"; }

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

@@ -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!: HTMLDivElement;\n  @State() hasFocus = false;\n  @State() popoverOpen = false;\n  @State() hasSelectedItem = 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  // eslint-disable-next-line @stencil-community/reserved-member-names\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   * 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  @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.el.shadowRoot.getElementById('select-container') as HTMLDivElement;\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 (!Boolean(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\" id=\"selected-container-content\">\n            {(!this.hasSelectedItem || !this.showFormattedSelectedItem) && (\n              <cpsl-text class={{ 'selected-text': true, 'placeholder': !Boolean(this.selectedValue) }}>\n                {!Boolean(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 autoWidth={false} trigger={this.id} preventBlur={this.hasFocus} disabled={this.disabled} anchorEl={this.anchorEl}>\n          <div class=\"dropdown\">\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"]}
+{"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.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"]}

package/dist/collection/components/cpsl-select-item/cpsl-select-item.js

@@ -8,7 +8,7 @@ export class CpslSelectItem {
         this.value = undefined;
     }
     render() {
-        return (h(Host, { key: '5bc53f915d04dbdbad5a301cec8b7a6dcef21d82' }, h("div", { key: 'cd3beea4b16d1c01b21ca1b54d03da6e501f52bb', class: "outer-container", onClick: this.handleItemClick }, h("div", { key: 'c63a0a44649b4837d0d67f983d274785f41204c6', class: { 'inner-container': true, 'selected': this.selected } }, h("slot", { key: '99e548871325528b7d52295c9e6740324f5add51' })))));
+        return (h(Host, { key: 'c0407d16cc7afc4fba47acd8236da3f276d6e6dc' }, h("div", { key: '22b2c12c9c5b6109da3bc932b52e538da514a95d', part: "outer-container", class: "outer-container", onClick: this.handleItemClick }, h("div", { key: '1e7a33b947aec6444168a173ca8aa0059c40e823', part: "inner-container", class: { 'inner-container': true, 'selected': this.selected } }, h("slot", { key: '0e9d4878f0e8301ef0182038216249a63071eb27' })))));
     }
     static get is() { return "cpsl-select-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-select-item/cpsl-select-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"cpsl-select-item.js","sourceRoot":"","sources":["../../../../src/components/cpsl-select-item/cpsl-select-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,cAAc;;QAiBjB,oBAAe,GAAG,GAAG,EAAE;YAC7B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC5C,CAAC,CAAC;;;;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,IAAI,CAAC,eAAe;gBACxD,4DAAK,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAE;oBAChE,8DAAa,CACT,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, Event, h, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-select-item',\n  styleUrl: 'cpsl-select-item.scss',\n  shadow: true,\n})\nexport class CpslSelectItem {\n  /**\n   * Whether the item is selected or not.\n   */\n  @Prop() selected?: boolean;\n\n  /**\n   * Value of the item.\n   */\n  @Prop() value: string;\n\n  /**\n   * Called when item is clicked.\n   * @internal\n   */\n  @Event() cpslSelectItemClick: EventEmitter<string>;\n\n  private handleItemClick = () => {\n    this.cpslSelectItemClick.emit(this.value);\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"outer-container\" onClick={this.handleItemClick}>\n          <div class={{ 'inner-container': true, 'selected': this.selected }}>\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cpsl-select-item.js","sourceRoot":"","sources":["../../../../src/components/cpsl-select-item/cpsl-select-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,cAAc;;QAiBjB,oBAAe,GAAG,GAAG,EAAE;YAC7B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC5C,CAAC,CAAC;;;;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,IAAI,CAAC,eAAe;gBAC/E,4DAAK,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAE;oBACvF,8DAAa,CACT,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, Event, h, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-select-item',\n  styleUrl: 'cpsl-select-item.scss',\n  shadow: true,\n})\nexport class CpslSelectItem {\n  /**\n   * Whether the item is selected or not.\n   */\n  @Prop() selected?: boolean;\n\n  /**\n   * Value of the item.\n   */\n  @Prop() value: string;\n\n  /**\n   * Called when item is clicked.\n   * @internal\n   */\n  @Event() cpslSelectItemClick: EventEmitter<string>;\n\n  private handleItemClick = () => {\n    this.cpslSelectItemClick.emit(this.value);\n  };\n\n  render() {\n    return (\n      <Host>\n        <div part=\"outer-container\" class=\"outer-container\" onClick={this.handleItemClick}>\n          <div part=\"inner-container\" class={{ 'inner-container': true, 'selected': this.selected }}>\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -23,28 +23,36 @@ export class CpslSlideButton {
         };
         const dragMouseDown = (e) => {
             e.preventDefault();
+            // get the mouse cursor position at startup:
             pos3 = e.clientX;
             document.onmouseup = closeDragElement;
+            // call a function whenever the cursor moves:
             document.onmousemove = elementMouseDrag;
         };
         const dragTouchDown = (e) => {
             e.preventDefault();
             const touchLocation = e.targetTouches[0];
+            // get the mouse cursor position at startup:
             pos3 = touchLocation.clientX;
             document.ontouchend = closeDragElement;
+            // call a function whenever the cursor moves:
             document.ontouchmove = elementTouchDrag;
         };
         const elementMouseDrag = (e) => {
             e.preventDefault();
+            // calculate the new cursor position:
             pos1 = pos3 - e.clientX;
             pos3 = e.clientX;
+            // set the element's new position:
             finishElementDrag(pos1);
         };
         const elementTouchDrag = (e) => {
             e.preventDefault();
             const touchLocation = e.targetTouches[0];
+            // calculate the new cursor position:
             pos1 = pos3 - touchLocation.clientX;
             pos3 = touchLocation.clientX;
+            // set the element's new position:
             finishElementDrag(pos1);
         };
         const finishElementDrag = (pos) => {
@@ -77,6 +85,7 @@ export class CpslSlideButton {
                 endIconEl.style.opacity = '0%';
                 endBackgroundEl.style.opacity = '0%';
             }
+            // stop moving when mouse button is released:
             document.onmouseup = null;
             document.onmousemove = null;
             document.ontouchend = null;
@@ -90,7 +99,9 @@ export class CpslSlideButton {
         const sliderContainerEl = this.sliderContainerEl;
         const containerWidth = sliderContainerEl.clientWidth;
         const sliderHeight = el.getBoundingClientRect().height;
+        // Offset min by 1 for 1px left padding
         const minX = 1;
+        // Offset max by the slider width and 1px for padding
         const maxX = containerWidth - sliderHeight - 1;
         let pos1 = 0, pos3 = 0;
         el.onpointerdown = pointerDown;
@@ -114,7 +125,7 @@ export class CpslSlideButton {
         return this.el.shadowRoot.getElementById('end-icon');
     }
     render() {
-        return (h(Host, { key: '2c1481d71b13947115c6aca7ae38d88204f72f52' }, h("div", { key: '42880b0a9ac2c130fb3f7c03e79d1e73a72df1ab', id: "slider-container", class: "slider-container" }, h("div", { key: '62c5f7fe9b77c0cd16615fa78f3135a6c235ef53', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '0caceb1b45b6bea67d8b6f2a61884f7ae7f4b6f9', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '7bef562aed22abdda9183471a48242ec8f74e816', id: "slider", class: { slider: true, disabled: this.disabled } }, h("cpsl-icon", { key: 'e2ac31a4c8ed8cecd5495f0bd1b61d47055c4f0c', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), h("cpsl-icon", { key: 'c28b7aedf9289dc0bccc1c359a2ca7e2390a49ab', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), h("span", { key: 'f698ecc109722522c13c825b506311aebbbce116', id: "start-text", class: { 'start-text': true, 'disabled': this.disabled } }, this.startText), h("span", { key: 'bcbc4a152084760322b5c3377680b950cdfc4b4e', id: "end-text", class: "end-text" }, this.endText))));
+        return (h(Host, { key: '59a886a50251c2a35b5f9b7c82a24b6bbead4835' }, h("div", { key: 'a40904f525abdb06933010b738d30e7bc5318254', id: "slider-container", class: "slider-container" }, h("div", { key: 'f0142fc9e9ba63544ef4ca25ac4710ad75f35866', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '36f24475cfe8002f5fe6b532a4a5bed906ee502e', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '27ba6f34102be72b6daae01fe8e0748ebeeb906e', id: "slider", class: { slider: true, disabled: this.disabled } }, h("cpsl-icon", { key: '241d0ae75ae75974d16c2b57de631c0abf418c6b', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), h("cpsl-icon", { key: '719ab71c28ae7041b1371fb85a073467e7b5e0d3', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), h("span", { key: '2f770d1fd8eea0bd90e4072393952113565201e0', id: "start-text", class: { 'start-text': true, 'disabled': this.disabled } }, this.startText), h("span", { key: '377d99ef277482f649585bf8c5176a212c4610b8', id: "end-text", class: "end-text" }, this.endText))));
     }
     static get is() { return "cpsl-slide-button"; }
     static get encapsulation() { return "shadow"; }
@@ -152,7 +163,7 @@ export class CpslSlideButton {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "\"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircle\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"cube\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"doubleArc\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"home\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning01\" | \"lightning\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"menu\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"settings\" | \"signalBrand\" | \"signal\" | \"singleArc\" | \"snapchatBrand\" | \"snapchat\" | \"stars\" | \"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\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowCircleBrokenDownLeft\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"bank\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircle\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"creditCard\" | \"cube\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"dot\" | \"downloadCloud\" | \"download\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"githubBrand\" | \"github\" | \"globe\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroAlertCircle\" | \"heroCheckmarkCapsule\" | \"heroCheckmark\" | \"heroEmail\" | \"heroExternalConnection\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"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\" | \"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\"",
                     "references": {
                         "IconType": {
                             "location": "import",
@@ -192,7 +203,7 @@ export class CpslSlideButton {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "\"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircle\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"cube\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"doubleArc\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"home\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning01\" | \"lightning\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"menu\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"settings\" | \"signalBrand\" | \"signal\" | \"singleArc\" | \"snapchatBrand\" | \"snapchat\" | \"stars\" | \"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\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowCircleBrokenDownLeft\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"bank\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircle\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"creditCard\" | \"cube\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"dot\" | \"downloadCloud\" | \"download\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"githubBrand\" | \"github\" | \"globe\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroAlertCircle\" | \"heroCheckmarkCapsule\" | \"heroCheckmark\" | \"heroEmail\" | \"heroExternalConnection\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"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\" | \"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\"",
                     "references": {
                         "IconType": {
                             "location": "import",

package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"cpsl-slide-button.js","sourceRoot":"","sources":["../../../../src/components/cpsl-slide-button/cpsl-slide-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAQvF,MAAM,OAAO,eAAe;;;;;;;;IAiC1B,gBAAgB;QACd,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC;IAChE,CAAC;IAEO,WAAW,CAAC,EAAe;QACjC,MAAM,WAAW,GAAG,CAAC,CAAe,EAAE,EAAE;YACtC,IAAI,GAAG,CAAC,CAAC,OAAO,CAAC;YAEjB,QAAQ,CAAC,CAAC,WAAW,EAAE,CAAC;gBACtB,KAAK,OAAO;oBACV,EAAE,CAAC,WAAW,GAAG,aAAa,CAAC;oBAC/B,MAAM;gBACR;oBACE,EAAE,CAAC,YAAY,GAAG,aAAa,CAAC;YACpC,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,aAAa,GAAG,CAAC,CAAa,EAAE,EAAE;YACtC,CAAC,CAAC,cAAc,EAAE,CAAC;YAEnB,IAAI,GAAG,CAAC,CAAC,OAAO,CAAC;YACjB,QAAQ,CAAC,SAAS,GAAG,gBAAgB,CAAC;YAEtC,QAAQ,CAAC,WAAW,GAAG,gBAAgB,CAAC;QAC1C,CAAC,CAAC;QAEF,MAAM,aAAa,GAAG,CAAC,CAAa,EAAE,EAAE;YACtC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,aAAa,GAAG,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;YAEzC,IAAI,GAAG,aAAa,CAAC,OAAO,CAAC;YAC7B,QAAQ,CAAC,UAAU,GAAG,gBAAgB,CAAC;YAEvC,QAAQ,CAAC,WAAW,GAAG,gBAAgB,CAAC;QAC1C,CAAC,CAAC;QAEF,MAAM,gBAAgB,GAAG,CAAC,CAAa,EAAE,EAAE;YACzC,CAAC,CAAC,cAAc,EAAE,CAAC;YAEnB,IAAI,GAAG,IAAI,GAAG,CAAC,CAAC,OAAO,CAAC;YACxB,IAAI,GAAG,CAAC,CAAC,OAAO,CAAC;YAEjB,iBAAiB,CAAC,IAAI,CAAC,CAAC;QAC1B,CAAC,CAAC;QAEF,MAAM,gBAAgB,GAAG,CAAC,CAAa,EAAE,EAAE;YACzC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,aAAa,GAAG,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;YAEzC,IAAI,GAAG,IAAI,GAAG,aAAa,CAAC,OAAO,CAAC;YACpC,IAAI,GAAG,aAAa,CAAC,OAAO,CAAC;YAE7B,iBAAiB,CAAC,IAAI,CAAC,CAAC;QAC1B,CAAC,CAAC;QAEF,MAAM,iBAAiB,GAAG,CAAC,GAAW,EAAE,EAAE;YACxC,MAAM,MAAM,GAAG,EAAE,CAAC,UAAU,GAAG,GAAG,CAAC;YACnC,IAAI,MAAM,IAAI,IAAI,IAAI,MAAM,IAAI,IAAI,EAAE,CAAC;gBACrC,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;gBAE1F,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC,CAAC,GAAG,aAAa,GAAG,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC;gBAChE,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,aAAa,GAAG,GAAG,GAAG,CAAC;gBAEpD,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC,CAAC,GAAG,aAAa,GAAG,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC;gBAChE,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,aAAa,GAAG,GAAG,GAAG,CAAC;gBAEpD,eAAe,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,aAAa,GAAG,GAAG,GAAG,CAAC;gBAE1D,EAAE,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,MAAM,IAAI,CAAC;YAChC,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE;YAC5B,IAAI,EAAE,CAAC,UAAU,GAAG,YAAY,IAAI,cAAc,GAAG,YAAY,GAAG,CAAC,EAAE,CAAC;gBACtE,EAAE,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,IAAI,IAAI,CAAC;gBAC5B,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC;gBACjC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;gBACjC,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC;gBACjC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;gBACjC,eAAe,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;gBACvC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAC/B,CAAC;iBAAM,CAAC;gBACN,EAAE,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,IAAI,IAAI,CAAC;gBAC5B,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;gBACnC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC;gBAC/B,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;gBACnC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC;gBAC/B,eAAe,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC;YACvC,CAAC;YAED,QAAQ,CAAC,SAAS,GAAG,IAAI,CAAC;YAC1B,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC;YAC5B,QAAQ,CAAC,UAAU,GAAG,IAAI,CAAC;YAC3B,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC;QAC9B,CAAC,CAAC;QAEF,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;QACrC,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QACjC,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;QACrC,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QACjC,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;QAE7C,MAAM,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC;QACjD,MAAM,cAAc,GAAG,iBAAiB,CAAC,WAAW,CAAC;QAErD,MAAM,YAAY,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;QAGvD,MAAM,IAAI,GAAG,CAAC,CAAC;QAEf,MAAM,IAAI,GAAG,cAAc,GAAG,YAAY,GAAG,CAAC,CAAC;QAE/C,IAAI,IAAI,GAAG,CAAC,EACV,IAAI,GAAG,CAAC,CAAC;QAEX,EAAE,CAAC,aAAa,GAAG,WAAW,CAAC;IACjC,CAAC;IAED,IAAY,iBAAiB;QAC3B,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC;IAC/D,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;IACzD,CAAC;IAED,IAAY,SAAS;QACnB,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;IACvD,CAAC;IAED,IAAY,eAAe;QACzB,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,iCAAiC,CAAC,CAAC;IAC9E,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;IACzD,CAAC;IAED,IAAY,SAAS;QACnB,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;IACvD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,EAAE,EAAC,kBAAkB,EAAC,KAAK,EAAC,kBAAkB;gBACjD,4DAAK,EAAE,EAAC,mCAAmC,EAAC,KAAK,EAAE,EAAE,mCAAmC,EAAE,IAAI,EAAE,6BAA6B,EAAE,IAAI,EAAE,GAAI;gBACzI,4DAAK,EAAE,EAAC,iCAAiC,EAAC,KAAK,EAAE,EAAE,iCAAiC,EAAE,IAAI,EAAE,6BAA6B,EAAE,IAAI,EAAE,GAAI;gBACrI,4DAAK,EAAE,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE;oBAC/D,kEAAW,EAAE,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,SAAS,GAAI;oBAChG,kEAAW,EAAE,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,GAAI,CACtF;gBACN,6DAAM,EAAE,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAE,IAC3E,IAAI,CAAC,SAAS,CACV;gBACP,6DAAM,EAAE,EAAC,UAAU,EAAC,KAAK,EAAC,UAAU,IACjC,IAAI,CAAC,OAAO,CACR,CACH,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Element, EventEmitter, Event } from '@stencil/core';\nimport { IconType } from '../../interface';\n\n@Component({\n  tag: 'cpsl-slide-button',\n  styleUrl: 'cpsl-slide-button.scss',\n  shadow: true,\n})\nexport class CpslSlideButton {\n  @Element() el!: HTMLCpslSlideButtonElement;\n\n  /**\n   * Whether or not the component is disabled. If true, the component will display the `startText`.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * The name of the ending icon to show.\n   */\n  @Prop() endIcon: IconType;\n\n  /**\n   * The ending text.\n   */\n  @Prop() endText: string;\n\n  /**\n   * The name of the starting icon to show.\n   */\n  @Prop() startIcon: IconType;\n\n  /**\n   * The starting text.\n   */\n  @Prop() startText: string;\n\n  /**\n   * The `cpslComplete` event is fired when the slider is at the end.\n   */\n  @Event() cpslComplete!: EventEmitter<boolean>;\n\n  componentDidLoad() {\n    this.dragElement(this.el.shadowRoot.getElementById('slider'));\n  }\n\n  private dragElement(el: HTMLElement) {\n    const pointerDown = (e: PointerEvent) => {\n      pos3 = e.clientX;\n\n      switch (e.pointerType) {\n        case 'mouse':\n          el.onmousedown = dragMouseDown;\n          break;\n        default:\n          el.ontouchstart = dragTouchDown;\n      }\n    };\n\n    const dragMouseDown = (e: MouseEvent) => {\n      e.preventDefault();\n      // get the mouse cursor position at startup:\n      pos3 = e.clientX;\n      document.onmouseup = closeDragElement;\n      // call a function whenever the cursor moves:\n      document.onmousemove = elementMouseDrag;\n    };\n\n    const dragTouchDown = (e: TouchEvent) => {\n      e.preventDefault();\n      const touchLocation = e.targetTouches[0];\n      // get the mouse cursor position at startup:\n      pos3 = touchLocation.clientX;\n      document.ontouchend = closeDragElement;\n      // call a function whenever the cursor moves:\n      document.ontouchmove = elementTouchDrag;\n    };\n\n    const elementMouseDrag = (e: MouseEvent) => {\n      e.preventDefault();\n      // calculate the new cursor position:\n      pos1 = pos3 - e.clientX;\n      pos3 = e.clientX;\n      // set the element's new position:\n      finishElementDrag(pos1);\n    };\n\n    const elementTouchDrag = (e: TouchEvent) => {\n      e.preventDefault();\n      const touchLocation = e.targetTouches[0];\n      // calculate the new cursor position:\n      pos1 = pos3 - touchLocation.clientX;\n      pos3 = touchLocation.clientX;\n      // set the element's new position:\n      finishElementDrag(pos1);\n    };\n\n    const finishElementDrag = (pos: number) => {\n      const newPos = el.offsetLeft - pos;\n      if (newPos >= minX && newPos <= maxX) {\n        const newPosPercent = Math.max(Math.min(Math.round((newPos / maxX) * 100) / 100, 100), 0);\n\n        startTextEl.style.opacity = `${(1 - newPosPercent * 2) * 100}%`;\n        endTextEl.style.opacity = `${newPosPercent * 100}%`;\n\n        startIconEl.style.opacity = `${(1 - newPosPercent * 2) * 100}%`;\n        endIconEl.style.opacity = `${newPosPercent * 100}%`;\n\n        endBackgroundEl.style.opacity = `${newPosPercent * 100}%`;\n\n        el.style.left = `${newPos}px`;\n      }\n    };\n\n    const closeDragElement = () => {\n      if (el.offsetLeft + sliderHeight >= containerWidth - sliderHeight / 2) {\n        el.style.left = `${maxX}px`;\n        startTextEl.style.opacity = '0%';\n        endTextEl.style.opacity = '100%';\n        startIconEl.style.opacity = '0%';\n        endIconEl.style.opacity = '100%';\n        endBackgroundEl.style.opacity = '100%';\n        this.cpslComplete.emit(true);\n      } else {\n        el.style.left = `${minX}px`;\n        startTextEl.style.opacity = '100%';\n        endTextEl.style.opacity = '0%';\n        startIconEl.style.opacity = '100%';\n        endIconEl.style.opacity = '0%';\n        endBackgroundEl.style.opacity = '0%';\n      }\n      // stop moving when mouse button is released:\n      document.onmouseup = null;\n      document.onmousemove = null;\n      document.ontouchend = null;\n      document.ontouchmove = null;\n    };\n\n    const startIconEl = this.startIconEl;\n    const endIconEl = this.endIconEl;\n    const startTextEl = this.startTextEl;\n    const endTextEl = this.endTextEl;\n    const endBackgroundEl = this.endBackgroundEl;\n\n    const sliderContainerEl = this.sliderContainerEl;\n    const containerWidth = sliderContainerEl.clientWidth;\n\n    const sliderHeight = el.getBoundingClientRect().height;\n\n    // Offset min by 1 for 1px left padding\n    const minX = 1;\n    // Offset max by the slider width and 1px for padding\n    const maxX = containerWidth - sliderHeight - 1;\n\n    let pos1 = 0,\n      pos3 = 0;\n\n    el.onpointerdown = pointerDown;\n  }\n\n  private get sliderContainerEl() {\n    return this.el.shadowRoot.getElementById('slider-container');\n  }\n\n  private get startTextEl() {\n    return this.el.shadowRoot.getElementById('start-text');\n  }\n\n  private get endTextEl() {\n    return this.el.shadowRoot.getElementById('end-text');\n  }\n\n  private get endBackgroundEl() {\n    return this.el.shadowRoot.getElementById('end-slider-container-background');\n  }\n\n  private get startIconEl() {\n    return this.el.shadowRoot.getElementById('start-icon');\n  }\n\n  private get endIconEl() {\n    return this.el.shadowRoot.getElementById('end-icon');\n  }\n\n  render() {\n    return (\n      <Host>\n        <div id=\"slider-container\" class=\"slider-container\">\n          <div id=\"start-slider-container-background\" class={{ 'start-slider-container-background': true, 'slider-container-background': true }} />\n          <div id=\"end-slider-container-background\" class={{ 'end-slider-container-background': true, 'slider-container-background': true }} />\n          <div id=\"slider\" class={{ slider: true, disabled: this.disabled }}>\n            <cpsl-icon id=\"start-icon\" class={{ 'start-icon': true, 'icon': true }} icon={this.startIcon} />\n            <cpsl-icon id=\"end-icon\" class={{ 'end-icon': true, 'icon': true }} icon={this.endIcon} />\n          </div>\n          <span id=\"start-text\" class={{ 'start-text': true, 'disabled': this.disabled }}>\n            {this.startText}\n          </span>\n          <span id=\"end-text\" class=\"end-text\">\n            {this.endText}\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cpsl-slide-button.js","sourceRoot":"","sources":["../../../../src/components/cpsl-slide-button/cpsl-slide-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Element, EventEmitter, Event } from '@stencil/core';\nimport { IconType } from '../../interface';\n\n@Component({\n  tag: 'cpsl-slide-button',\n  styleUrl: 'cpsl-slide-button.scss',\n  shadow: true,\n})\nexport class CpslSlideButton {\n  @Element() el!: HTMLCpslSlideButtonElement;\n\n  /**\n   * Whether or not the component is disabled. If true, the component will display the `startText`.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * The name of the ending icon to show.\n   */\n  @Prop() endIcon: IconType;\n\n  /**\n   * The ending text.\n   */\n  @Prop() endText: string;\n\n  /**\n   * The name of the starting icon to show.\n   */\n  @Prop() startIcon: IconType;\n\n  /**\n   * The starting text.\n   */\n  @Prop() startText: string;\n\n  /**\n   * The `cpslComplete` event is fired when the slider is at the end.\n   */\n  @Event() cpslComplete!: EventEmitter<boolean>;\n\n  componentDidLoad() {\n    this.dragElement(this.el.shadowRoot.getElementById('slider'));\n  }\n\n  private dragElement(el: HTMLElement) {\n    const pointerDown = (e: PointerEvent) => {\n      pos3 = e.clientX;\n\n      switch (e.pointerType) {\n        case 'mouse':\n          el.onmousedown = dragMouseDown;\n          break;\n        default:\n          el.ontouchstart = dragTouchDown;\n      }\n    };\n\n    const dragMouseDown = (e: MouseEvent) => {\n      e.preventDefault();\n      // get the mouse cursor position at startup:\n      pos3 = e.clientX;\n      document.onmouseup = closeDragElement;\n      // call a function whenever the cursor moves:\n      document.onmousemove = elementMouseDrag;\n    };\n\n    const dragTouchDown = (e: TouchEvent) => {\n      e.preventDefault();\n      const touchLocation = e.targetTouches[0];\n      // get the mouse cursor position at startup:\n      pos3 = touchLocation.clientX;\n      document.ontouchend = closeDragElement;\n      // call a function whenever the cursor moves:\n      document.ontouchmove = elementTouchDrag;\n    };\n\n    const elementMouseDrag = (e: MouseEvent) => {\n      e.preventDefault();\n      // calculate the new cursor position:\n      pos1 = pos3 - e.clientX;\n      pos3 = e.clientX;\n      // set the element's new position:\n      finishElementDrag(pos1);\n    };\n\n    const elementTouchDrag = (e: TouchEvent) => {\n      e.preventDefault();\n      const touchLocation = e.targetTouches[0];\n      // calculate the new cursor position:\n      pos1 = pos3 - touchLocation.clientX;\n      pos3 = touchLocation.clientX;\n      // set the element's new position:\n      finishElementDrag(pos1);\n    };\n\n    const finishElementDrag = (pos: number) => {\n      const newPos = el.offsetLeft - pos;\n      if (newPos >= minX && newPos <= maxX) {\n        const newPosPercent = Math.max(Math.min(Math.round((newPos / maxX) * 100) / 100, 100), 0);\n\n        startTextEl.style.opacity = `${(1 - newPosPercent * 2) * 100}%`;\n        endTextEl.style.opacity = `${newPosPercent * 100}%`;\n\n        startIconEl.style.opacity = `${(1 - newPosPercent * 2) * 100}%`;\n        endIconEl.style.opacity = `${newPosPercent * 100}%`;\n\n        endBackgroundEl.style.opacity = `${newPosPercent * 100}%`;\n\n        el.style.left = `${newPos}px`;\n      }\n    };\n\n    const closeDragElement = () => {\n      if (el.offsetLeft + sliderHeight >= containerWidth - sliderHeight / 2) {\n        el.style.left = `${maxX}px`;\n        startTextEl.style.opacity = '0%';\n        endTextEl.style.opacity = '100%';\n        startIconEl.style.opacity = '0%';\n        endIconEl.style.opacity = '100%';\n        endBackgroundEl.style.opacity = '100%';\n        this.cpslComplete.emit(true);\n      } else {\n        el.style.left = `${minX}px`;\n        startTextEl.style.opacity = '100%';\n        endTextEl.style.opacity = '0%';\n        startIconEl.style.opacity = '100%';\n        endIconEl.style.opacity = '0%';\n        endBackgroundEl.style.opacity = '0%';\n      }\n      // stop moving when mouse button is released:\n      document.onmouseup = null;\n      document.onmousemove = null;\n      document.ontouchend = null;\n      document.ontouchmove = null;\n    };\n\n    const startIconEl = this.startIconEl;\n    const endIconEl = this.endIconEl;\n    const startTextEl = this.startTextEl;\n    const endTextEl = this.endTextEl;\n    const endBackgroundEl = this.endBackgroundEl;\n\n    const sliderContainerEl = this.sliderContainerEl;\n    const containerWidth = sliderContainerEl.clientWidth;\n\n    const sliderHeight = el.getBoundingClientRect().height;\n\n    // Offset min by 1 for 1px left padding\n    const minX = 1;\n    // Offset max by the slider width and 1px for padding\n    const maxX = containerWidth - sliderHeight - 1;\n\n    let pos1 = 0,\n      pos3 = 0;\n\n    el.onpointerdown = pointerDown;\n  }\n\n  private get sliderContainerEl() {\n    return this.el.shadowRoot.getElementById('slider-container');\n  }\n\n  private get startTextEl() {\n    return this.el.shadowRoot.getElementById('start-text');\n  }\n\n  private get endTextEl() {\n    return this.el.shadowRoot.getElementById('end-text');\n  }\n\n  private get endBackgroundEl() {\n    return this.el.shadowRoot.getElementById('end-slider-container-background');\n  }\n\n  private get startIconEl() {\n    return this.el.shadowRoot.getElementById('start-icon');\n  }\n\n  private get endIconEl() {\n    return this.el.shadowRoot.getElementById('end-icon');\n  }\n\n  render() {\n    return (\n      <Host>\n        <div id=\"slider-container\" class=\"slider-container\">\n          <div id=\"start-slider-container-background\" class={{ 'start-slider-container-background': true, 'slider-container-background': true }} />\n          <div id=\"end-slider-container-background\" class={{ 'end-slider-container-background': true, 'slider-container-background': true }} />\n          <div id=\"slider\" class={{ slider: true, disabled: this.disabled }}>\n            <cpsl-icon id=\"start-icon\" class={{ 'start-icon': true, 'icon': true }} icon={this.startIcon} />\n            <cpsl-icon id=\"end-icon\" class={{ 'end-icon': true, 'icon': true }} icon={this.endIcon} />\n          </div>\n          <span id=\"start-text\" class={{ 'start-text': true, 'disabled': this.disabled }}>\n            {this.startText}\n          </span>\n          <span id=\"end-text\" class=\"end-text\">\n            {this.endText}\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-spinner/cpsl-spinner.css

@@ -54,18 +54,13 @@
    * }
    */
 :host {
-  --path-color: var(--cpsl-color-spinner-path);
-  --circle-color: var(--cpsl-color-spinner-circle);
+  --bar-width: 12px;
+  --bar-color: var(--cpsl-color-foreground-0);
+  --background-color: var(--cpsl-color-background-0);
   display: flex;
   justify-content: center;
   align-items: center;
 }
-:host path {
-  stroke: var(--path-color);
-}
-:host circle {
-  fill: var(--circle-color);
-}
 @keyframes spin {
   0% {
     -webkit-transform: rotate(0deg);
@@ -91,4 +86,31 @@
   100% {
     -webkit-transform: rotate(360deg);
   }
+}
+
+.loader {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1;
+  background: conic-gradient(transparent, transparent 12%, var(--bar-color));
+  border-radius: 50%;
+  margin: auto;
+  animation: spin 0.8s cubic-bezier(0.3, 0.5, 0.5, 0.5) infinite;
+}
+.loader::before, .loader::after {
+  content: "";
+  position: absolute;
+  border-radius: inherit;
+}
+.loader::before {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  background: linear-gradient(to left, var(--bar-color) 50%, transparent 50%);
+  width: var(--bar-width);
+  aspect-ratio: 1;
+}
+.loader::after {
+  inset: var(--bar-width);
+  background: var(--background-color);
 }

package/dist/collection/components/cpsl-spinner/cpsl-spinner.js

@@ -5,13 +5,11 @@ export class CpslSpinner {
         this.speed = 1;
     }
     render() {
-        return (h(Host, { key: '10b3edc28ae27a3feaf90e9a23f8833f9880e717', style: {
-                'height': `${this.size}px`,
-                'width': `${this.size}px`,
-                'animation': `spin ${this.speed}s linear infinite`,
-                '-webkit-animation': `spin ${this.speed}s linear infinite`,
-                '-moz-animation': `spin ${this.speed}s linear infinite`,
-            } }, h("svg", { key: '2ce2e8a1d0b7ad7b34cbcdc0984883363740c0f5', height: this.size, width: this.size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 54 54", fill: "none" }, h("path", { key: 'e16659e096d7f2557e0fe829ed239c63a3e08011', d: "M43.1586 17C39.8082 11.5978 33.8243 8 27 8C16.5066 8 8 16.5066 8 27C8 37.4934 16.5066 46 27 46C33.8242 46 39.8082 42.4022 43.1586 37", "stroke-width": "6", "stroke-linecap": "round" }), h("circle", { key: '1cc780ff25da0556aa3012cfa28b457443689dec', cx: "45", cy: "27", r: "5" }))));
+        return (h(Host, { key: 'a7de26e1a17fb0abc34f1f046a922ef591c6e6f3', style: {
+                height: `${this.size}px`,
+                width: `${this.size}px`,
+                ['--bar-width']: `${this.size * 0.12}px`,
+            } }, h("div", { key: '0a2faf4d46509c15e59cd685a2799b0c5c0eb85c', class: "loader" })));
     }
     static get is() { return "cpsl-spinner"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-spinner/cpsl-spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"cpsl-spinner.js","sourceRoot":"","sources":["../../../../src/components/cpsl-spinner/cpsl-spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,WAAW;;oBAKE,EAAE;qBAMD,CAAC;;IAE1B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;gBAC1B,OAAO,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;gBACzB,WAAW,EAAE,QAAQ,IAAI,CAAC,KAAK,mBAAmB;gBAClD,mBAAmB,EAAE,QAAQ,IAAI,CAAC,KAAK,mBAAmB;gBAC1D,gBAAgB,EAAE,QAAQ,IAAI,CAAC,KAAK,mBAAmB;aACxD;YAED,4DAAK,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM;gBAC1G,6DACE,CAAC,EAAC,sIAAsI,kBAC3H,GAAG,oBACD,OAAO,GACtB;gBACF,+DAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,GAAG,CAC5B,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-spinner',\n  styleUrl: 'cpsl-spinner.scss',\n  shadow: true,\n})\nexport class CpslSpinner {\n  /**\n   * Size of the spinner in pixels.\n   * Default is 50.\n   */\n  @Prop() size?: number = 54;\n\n  /**\n   * Rotation speed of the spinner in seconds.\n   * Default is 1.\n   */\n  @Prop() speed?: number = 1;\n\n  render() {\n    return (\n      <Host\n        style={{\n          'height': `${this.size}px`,\n          'width': `${this.size}px`,\n          'animation': `spin ${this.speed}s linear infinite`,\n          '-webkit-animation': `spin ${this.speed}s linear infinite`,\n          '-moz-animation': `spin ${this.speed}s linear infinite`,\n        }}\n      >\n        <svg height={this.size} width={this.size} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 54 54\" fill=\"none\">\n          <path\n            d=\"M43.1586 17C39.8082 11.5978 33.8243 8 27 8C16.5066 8 8 16.5066 8 27C8 37.4934 16.5066 46 27 46C33.8242 46 39.8082 42.4022 43.1586 37\"\n            stroke-width=\"6\"\n            stroke-linecap=\"round\"\n          />\n          <circle cx=\"45\" cy=\"27\" r=\"5\" />\n        </svg>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cpsl-spinner.js","sourceRoot":"","sources":["../../../../src/components/cpsl-spinner/cpsl-spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,WAAW;;oBAKE,EAAE;qBAMD,CAAC;;IAE1B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;gBACxB,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;gBACvB,CAAC,aAAa,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,IAAI;aACzC;YAED,4DAAK,KAAK,EAAC,QAAQ,GAAG,CACjB,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-spinner',\n  styleUrl: 'cpsl-spinner.scss',\n  shadow: true,\n})\nexport class CpslSpinner {\n  /**\n   * Size of the spinner in pixels.\n   * Default is 50.\n   */\n  @Prop() size?: number = 54;\n\n  /**\n   * Rotation speed of the spinner in seconds.\n   * Default is 1.\n   */\n  @Prop() speed?: number = 1;\n\n  render() {\n    return (\n      <Host\n        style={{\n          height: `${this.size}px`,\n          width: `${this.size}px`,\n          ['--bar-width']: `${this.size * 0.12}px`,\n        }}\n      >\n        <div class=\"loader\" />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-switch/cpsl-switch.js

@@ -7,7 +7,7 @@ export class CpslSwitch {
         this.checked = undefined;
     }
     render() {
-        return (h(Host, { key: '4bb60b7497853c9445787089fb279bcf4755246b' }, h("input", { key: 'a8b054f90aba1040019d848737bf0e90f0796964', type: "checkbox", checked: this.checked }), h("span", { key: '569ddefabbef07dd1b9930475541b9dcb0352c80', onClick: this.handleSwitchClick, class: { container: true, checked: this.checked } }, h("span", { key: '23cc58424353fcd969546058e9849c8a85fddad1', class: { thumb: true, checked: this.checked } }))));
+        return (h(Host, { key: 'd324dea22ae9e0ce4755a91944f4f1e610ccabe1' }, h("input", { key: 'd132f929923c331ccb91e550ecd5098acb6c24df', type: "checkbox", checked: this.checked }), h("span", { key: '172dedb09d220dbe4a3ea95032ab0e4ea194bcd4', onClick: this.handleSwitchClick, class: { container: true, checked: this.checked } }, h("span", { key: 'e3d9bec7fdddb3445cc9db05886a705aeb3d9bea', class: { thumb: true, checked: this.checked } }))));
     }
     static get is() { return "cpsl-switch"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,8 @@
 :host {
-  --tab-color: var(--cpsl-color-text-primary);
+  --tab-color: var(--cpsl-color-text-secondary);
+  --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);
@@ -10,6 +13,20 @@
   cursor: pointer;
   z-index: 10;
 }
+:host ::slotted([slot=start]) {
+  --icon-color: var(--tab-color);
+  --height: var(--tab-icon-height);
+  --width: var(--tab-icon-width);
+}
+:host ::slotted([slot=end]) {
+  --icon-color: var(--tab-color);
+  --height: var(--tab-icon-height);
+  --width: var(--tab-icon-width);
+}
+
+:host(.selected) {
+  --tab-color: var(--cpsl-color-text-primary);
+}
 
 .tab-container {
   align-items: center;
@@ -20,4 +37,10 @@
   white-space: nowrap;
   font-weight: 500;
   color: var(--tab-color);
+  display: flex;
+  gap: var(--tab-gap);
+}
+
+.content {
+  flex: 1 1 auto;
 }

package/dist/collection/components/cpsl-tab/cpsl-tab.js

@@ -21,7 +21,7 @@ export class CpslTab {
         }
     }
     render() {
-        return (h(Host, { key: 'e95f29b005dfda39d9e973c9fc540567024eec27', onClick: this.onTabClicked }, h("div", { key: '13f246e19210d03b75ee73b8afe739bcb7fb3d7d', class: { 'tab-container': true } }, h("slot", { key: 'add7e0bea1d4c4addbed47fbde20f5ec05b52035' }))));
+        return (h(Host, { key: '43eb0e4547870b335aa19196bf391f2062df2b34', class: { selected: this.selected }, onClick: this.onTabClicked }, h("div", { key: '79d6974ea7641668144f6a9ba0250fc3262611e3', class: { 'tab-container': true } }, h("slot", { key: 'a52f47df870df25287254127d1e0754e98a9a02f', name: "start" }), h("div", { key: 'e97e9949a12bf7388599fdaec26c478436f284b2', class: "content" }, h("slot", { key: '05bdc0bb599c21f6b703c704f629e5368e86c818' })), h("slot", { key: '66169d0d87d651fe61f0dc2216a868a5f17bd78c', name: "end" }))));
     }
     static get is() { return "cpsl-tab"; }
     static get encapsulation() { return "shadow"; }