@getpara/core-components 0.1.0

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

@@ -0,0 +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.js';\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[]) => 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   * If `true`, the user can select more than one value.\n   */\n  @Prop() multiple?: boolean;\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 | 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   * The color of the selected item or placeholder text.\n   * Options are: `\"primary\"`, `\"secondary\", `\"tertiary\", `\"subtle\", `\"inverted\", `\"error\".\n   * Default is: `\"primary\"`.\n   */\n  @Prop() selectedItemColor?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'inverted' | 'error' | 'contrast' = 'primary';\n\n  /**\n   * The variant of the selected item or placeholder text.\n   * Options are: `\"body2XS\"`, `\"bodyXS\", `\"bodyS\", `\"bodyM\", `\"bodyL\", `\"bodyXL\", `\"headingXS\", `\"headingS\", `\"headingM\", `\"headingL\", `\"headingXL\", `\"heading2XL\".\n   * Default is: `\"bodyM\"`.\n   */\n  @Prop() selectedItemVariant?: 'body2XS' | 'bodyXS' | 'bodyS' | 'bodyM' | 'bodyL' | 'bodyXL' | 'headingXS' | 'headingS' | 'headingM' | 'headingL' | 'headingXL' | 'heading2XL' =\n    'bodyM';\n\n  /**\n   * The weight of the selected item or placeholder text.\n   * Options are: `\"regular\"`, `\"medium\", `\"semiBold\", `\"bold\".\n   * Default is: `\"regular\"`.\n   */\n  @Prop() selectedItemWeight?: 'regular' | 'medium' | 'semiBold' | 'bold' = 'regular';\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    if (!this.multiple) {\n      this.popoverEl.closePopover();\n    }\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 (typeof this.selectedValue === 'string') {\n        if (item.value === this.selectedValue) {\n          item.setAttribute('selected', 'true');\n        } else {\n          item.setAttribute('selected', 'false');\n        }\n      } else {\n        if (this.selectedValue?.includes(item.value)) {\n          item.setAttribute('selected', 'true');\n        } else {\n          item.setAttribute('selected', 'false');\n        }\n      }\n    });\n\n    this.hasSelectedItem = typeof this.selectedValue === 'string' ? !!this.selectedValue : !!this.selectedValue?.length;\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    const selectedValueAsString = typeof this.selectedValue === 'string' ? this.selectedValue : this.selectedValue.join(', ');\n\n    return (\n      <Host id={this.id} class={{ 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': this.hasSelectedItem }}>\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\n                class={{ 'selected-text': true, 'placeholder': !this.selectedValue }}\n                part=\"selected-text\"\n                color={this.selectedItemColor}\n                variant={this.selectedItemVariant}\n                weight={this.selectedItemWeight}\n              >\n                {!this.selectedValue ? (this.placeholder ?? 'Select') : (this.formatValue?.(this.selectedValue) ?? selectedValueAsString)}\n              </cpsl-text>\n            )}\n          </div>\n          <cpsl-icon part=\"icon\" class={{ 'chevron': true, 'open': !this.noIconAnimation && this.popoverOpen, 'has-value': this.hasSelectedItem }} 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          <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        </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      </Host>\n    );\n  }\n}\n\nlet inputIds = 0;\n"]}

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

@@ -0,0 +1,115 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+   * A heuristic that applies CSS to mobile
+   * viewports (i.e. phones, not tablets).
+   *
+   * Usage:
+   * @include mobile-viewport() {
+   *   :host {
+   *     background-color: blue;
+   *   }
+   * }
+   */
+:host {
+  --outer-container-padding-start: 8px;
+  --outer-container-padding-end: 8px;
+  --outer-container-padding-top: 8px;
+  --outer-container-padding-bottom: 8px;
+  --container-background-color: var(--cpsl-color-select-surface-default);
+  --container-hover-background-color: var(--cpsl-color-select-surface-hover);
+  --container-border-radius: calc(var(--cpsl-border-radius-select) - 4px);
+  --container-padding-start: 8px;
+  --container-padding-end: 8px;
+  --container-padding-top: 8px;
+  --container-padding-bottom: 8px;
+  display: block;
+  font-family: var(--cpsl-font-family, inherit);
+  color: var(--cpsl-color-text-primary);
+  cursor: pointer;
+}
+
+.inner-container {
+  -webkit-padding-start: var(--container-padding-start);
+  padding-inline-start: var(--container-padding-start);
+  -webkit-padding-end: var(--container-padding-end);
+  padding-inline-end: var(--container-padding-end);
+  padding-top: var(--container-padding-top);
+  padding-bottom: var(--container-padding-bottom);
+  background-color: var(--container-background-color);
+  border-radius: var(--container-border-radius);
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.outer-container {
+  -webkit-padding-start: var(--outer-container-padding-start);
+  padding-inline-start: var(--outer-container-padding-start);
+  -webkit-padding-end: var(--outer-container-padding-end);
+  padding-inline-end: var(--outer-container-padding-end);
+  padding-top: var(--outer-container-padding-top);
+  padding-bottom: var(--outer-container-padding-bottom);
+  background-color: var(--container-background-color);
+}
+.outer-container:hover > .inner-container {
+  background-color: var(--container-hover-background-color);
+}
+
+.selected {
+  background-color: var(--container-hover-background-color);
+}
+
+:host(.in-select-box) {
+  --container-background-color: transparent;
+  --container-hover-background-color: transparent;
+  --container-border-width: 0px;
+  --container-padding-start: 0px;
+  --container-padding-end: 0px;
+  --container-padding-top: 0px;
+  --container-padding-bottom: 0px;
+  flex: 1;
+  height: 100%;
+}

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

@@ -0,0 +1,85 @@
+import { Host, h } from "@stencil/core";
+export class CpslSelectItem {
+    constructor() {
+        this.handleItemClick = () => {
+            this.cpslSelectItemClick.emit(this.value);
+        };
+        this.selected = undefined;
+        this.value = undefined;
+    }
+    render() {
+        return (h(Host, { key: '532ed86577783bc61c40a18de178e63d16cf24c1' }, h("div", { key: 'ebf183f51dc2082e853cda6f490ab1b1a2c72f99', part: "outer-container", class: "outer-container", onClick: this.handleItemClick }, h("div", { key: '1e2c94c4e4a61638fc7a0439a36672bc22f47d28', part: "inner-container", class: { 'inner-container': true, 'selected': this.selected } }, h("slot", { key: 'a5c01c9f324912eff3c7958370bbec29050e4f4a' })))));
+    }
+    static get is() { return "cpsl-select-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-select-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-select-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the item is selected or not."
+                },
+                "attribute": "selected",
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value of the item."
+                },
+                "attribute": "value",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "cpslSelectItemClick",
+                "name": "cpslSelectItemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Called when item is clicked."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=cpsl-select-item.js.map

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

@@ -0,0 +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,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.css

@@ -0,0 +1,175 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+   * A heuristic that applies CSS to mobile
+   * viewports (i.e. phones, not tablets).
+   *
+   * Usage:
+   * @include mobile-viewport() {
+   *   :host {
+   *     background-color: blue;
+   *   }
+   * }
+   */
+:host {
+  /* SLIDER CONTAINER VARS */
+  --slider-container-font-size: 14px;
+  --slider-container-height: 44px;
+  --slider-container-border-width: 1px;
+  --slider-container-box-shadow: 0px 0px 4px 0px var(--cpsl-color-alpha-black-10) inset;
+  --slider-container-start-background-color: var(--cpsl-color-slideButton-slider-container-start-background);
+  --slider-container-end-background-color: var(--cpsl-color-slideButton-slider-container-end-background);
+  --slider-container-start-border-color: var(--cpsl-color-slideButton-slider-container-start-border);
+  --slider-container-end-border-color: var(--cpsl-color-slideButton-slider-container-end-border);
+  /* SLIDER VARS */
+  --slider-border-width: 1px;
+  --slider-box-shadow: 3px 0px 4px 0px var(--cpsl-color-alpha-black-16);
+  --slider-border-color: var(--cpsl-color-slideButton-slider-border);
+  --slider-background-color: var(--cpsl-color-slideButton-slider-background);
+  --slider-color: var(--cpsl-color-slideButton-slider-text);
+  /* START TEXT VARS */
+  --start-text-color: var(--cpsl-color-slideButton-start-text);
+  /* END TEXT VARS */
+  --end-text-color: var(--cpsl-color-slideButton-end-text);
+  font-family: var(--cpsl-font-family, inherit);
+  display: block;
+}
+
+.slider-container {
+  overflow: hidden;
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  font-size: var(--slider-container-font-size);
+  font-weight: 500;
+  height: var(--slider-container-height);
+  border-width: var(--slider-container-border-width);
+  border-style: solid;
+  border-radius: calc(var(--slider-container-height) / 2);
+  box-shadow: var(--slider-container-box-shadow);
+}
+
+.slider-container-background {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.start-slider-container-background {
+  background: var(--slider-container-start-background-color);
+  border-color: var(--slider-container-start-border-color);
+  opacity: 100%;
+}
+
+.end-slider-container-background {
+  background: var(--slider-container-end-background-color);
+  border-color: var(--slider-container-end-border-color);
+  opacity: 0%;
+}
+
+.start-text {
+  user-select: none;
+  color: var(--start-text-color);
+  position: absolute;
+  text-align: center;
+  opacity: 100%;
+  width: calc(100% - var(--slider-container-height) - 8px - 16px);
+  left: calc(var(--slider-container-height) - 4px + 8px);
+}
+.start-text.disabled {
+  left: 0;
+  width: 100%;
+}
+
+.end-text {
+  user-select: none;
+  color: var(--end-text-color);
+  position: absolute;
+  text-align: center;
+  opacity: 0%;
+  width: calc(100% - var(--slider-container-height) - 8px);
+  left: 16px;
+}
+
+.icon {
+  position: absolute;
+}
+
+.start-icon {
+  opacity: 100%;
+}
+
+.end-icon {
+  opacity: 0%;
+}
+
+.slider {
+  left: 1px;
+  cursor: pointer;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  z-index: 10;
+  height: calc(var(--slider-container-height) - 4px);
+  width: calc(var(--slider-container-height) - 4px);
+  color: var(--slider-color);
+  background: var(--slider-background-color);
+  border-width: var(--slider-border-width);
+  border-style: solid;
+  border-color: var(--slider-border-color);
+  border-radius: 100%;
+  box-shadow: var(--slider-box-shadow);
+}
+.slider cpsl-icon {
+  --icon-color: var(--slider-color);
+}
+.slider.disabled {
+  visibility: hidden;
+}