@scania/tegel 0.0.8 → 0.0.9

package/dist/collection/components/dropdown/dropdown.js

@@ -1,5 +1,5 @@
 import { h, Host, } from '@stencil/core';
-export class Dropdown {
+export class TdsDropdown {
   constructor() {
     this.modeVariant = null;
     this.placeholder = undefined;
@@ -31,7 +31,7 @@ export class Dropdown {
     this.listItemObject = undefined;
   }
   componentWillLoad() {
-    // If default option is set, update the default selectedLabel value
+    // If a default option is set, update the default selectedLabel value
     // this.host.children is a HTMLCollection type, cannot use forEach
     this.listItemObject = this.host.children;
     this.listItemArray = Array.from(this.listItemObject);
@@ -144,8 +144,8 @@ export class Dropdown {
       const distanceToBottom = this.host.getBoundingClientRect().top;
       const viewportHeight = window.innerHeight;
       this.openUpwards = distanceToBottom + this.dropdownMenuHeight + 57 > viewportHeight;
-      // If summary of dropdown menu height and its distance to the bottom is more than viewport height, open menu upwards
-      // Additional 57px is added as compensation for dropdown element own input/button height
+      // If summary of Dropdown menu height and its distance to the bottom is more than viewport height, open menu upwards
+      // Additional 57px is added as compensation for Dropdown element own input/button height
       // It is added on handleClick due to possible dynamic injection of data when component is already rendered
     }
     else {
@@ -156,7 +156,7 @@ export class Dropdown {
     if (typeof this.textInput !== 'undefined' || this.textInput === null) {
       if (!this.selectedLabel && this.selectedLabel.length <= 0) {
         this.textInput.value = '';
-        this.internalSddsSearch.emit('');
+        this.internalTdsSearch.emit('');
       }
       if (this.selectedLabel !== this.textInput.value) {
         this.textInput.value = this.selectedLabel;
@@ -184,7 +184,7 @@ export class Dropdown {
   }
   handleSearch(ev) {
     const searchTerm = ev.target.value;
-    this.internalSddsSearch.emit(searchTerm);
+    this.internalTdsSearch.emit(searchTerm);
     this.open = true;
   }
   deselectAll() {
@@ -203,36 +203,34 @@ export class Dropdown {
   }
   render() {
     return (h(Host, { class: `
-        ${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}
-        ${this.open && !this.disabled ? 'sdds-dropdown--open' : ''}
-        ${this.type === 'multiselect' ? 'sdds-dropdown-multiselect' : ''}
-        ${this.inline ? 'sdds-dropdown-inline' : ''}
-        ${this.selectedLabel.length > 0 || this.selectedLabel === ''
-        ? 'sdds-dropdown--selected'
-        : ''}
-        ${this.state ? 'sdds-dropdown--error' : ''}
-        ${this.openUpwards ? 'sdds-dropdown--open-upwards' : ''}
+        ${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}
+        ${this.open && !this.disabled ? 'tds-dropdown--open' : ''}
+        ${this.type === 'multiselect' ? 'tds-dropdown-multiselect' : ''}
+        ${this.inline ? 'tds-dropdown-inline' : ''}
+        ${this.selectedLabel.length > 0 || this.selectedLabel === '' ? 'tds-dropdown--selected' : ''}
+        ${this.state ? 'tds-dropdown--error' : ''}
+        ${this.openUpwards ? 'tds-dropdown--open-upwards' : ''}
         ${this.labelPosition === 'inside' && this.selectedLabelsArray.length > 0
-        ? 'sdds-dropdown--label-inside-position'
+        ? 'tds-dropdown--label-inside-position'
         : ''}
-       `, "selected-value": this.selectedValue, "selected-text": this.selectedLabel, "multi-selected-values": JSON.stringify(this.selectedValuesArray), "multi-selected-labels": JSON.stringify(this.selectedLabelsArray) }, h("span", { class: `sdds-dropdown sdds-dropdown-${this.size}` }, this.labelPosition === 'outside' && this.label.length > 0 ? (h("span", { class: "sdds-dropdown-label-outside" }, this.label)) : (''), h("button", { part: this.disabled ? 'dropdown-filter-disabled' : '', disabled: this.disabled, tabindex: this.disabled ? '-1' : null, class: `sdds-dropdown-toggle ${this.selectedValue === 'filter' ? 'is-filter' : ''} ${this.selectedValue !== '' || this.selectedLabelsArray.length > 0
-        ? 'sdds-dropdown-toggle--selected'
+       `, "selected-value": this.selectedValue, "selected-text": this.selectedLabel, "multi-selected-values": JSON.stringify(this.selectedValuesArray), "multi-selected-labels": JSON.stringify(this.selectedLabelsArray) }, h("span", { class: `tds-dropdown tds-dropdown-${this.size}` }, this.labelPosition === 'outside' && this.label.length > 0 ? (h("span", { class: "tds-dropdown-label-outside" }, this.label)) : (''), h("button", { part: this.disabled ? 'dropdown-filter-disabled' : '', disabled: this.disabled, tabindex: this.disabled ? '-1' : null, class: `tds-dropdown-toggle ${this.selectedValue === 'filter' ? 'is-filter' : ''} ${this.selectedValue !== '' || this.selectedLabelsArray.length > 0
+        ? 'tds-dropdown-toggle--selected'
         : ''}
                 ${this.labelPosition === 'inside' && this.selectedValue !== '' && this.size !== 'sm'
-        ? `sdds-dropdown-toggle-label-inside-${this.size}`
-        : `sdds-dropdown-toggle-${this.size}`}`, type: "button", onClick: () => this.handleClick(), ref: (node) => (this.node = node) }, h("span", { class: "sdds-dropdown-label" }, this.type === 'filter' ? (h("input", { part: this.disabled ? 'dropdown-filter-disabled' : '', disabled: this.disabled, tabindex: "-1", ref: (inputEl) => (this.textInput = inputEl), class: "sdds-dropdown-filter", type: "text", placeholder: this.placeholder, value: this.selectedLabel, autoComplete: "off" })) : (h("span", { class: {
-        'sdds-dropdown-label-container': true,
-        'sdds-dropdown-label-container--label-inside': this.labelPosition === 'inside' &&
+        ? `tds-dropdown-toggle-label-inside-${this.size}`
+        : `tds-dropdown-toggle-${this.size}`}`, type: "button", onClick: () => this.handleClick(), ref: (node) => (this.node = node) }, h("span", { class: "tds-dropdown-label" }, this.type === 'filter' ? (h("input", { part: this.disabled ? 'dropdown-filter-disabled' : '', disabled: this.disabled, tabindex: "-1", ref: (inputEl) => (this.textInput = inputEl), class: "tds-dropdown-filter", type: "text", placeholder: this.placeholder, value: this.selectedLabel, autoComplete: "off" })) : (h("span", { class: {
+        'tds-dropdown-label-container': true,
+        'tds-dropdown-label-container--label-inside': this.labelPosition === 'inside' &&
           this.size !== 'sm' &&
           (this.selectedLabel.length > 0 || this.selectedLabelsArray.length > 0),
       } }, this.size !== 'sm' &&
       (this.selectedLabel.length > 0 || this.selectedLabelsArray.length > 0) &&
       this.labelPosition === 'inside' &&
-      this.label.length > 0 && (h("span", { class: "sdds-dropdown-label-inside" }, this.label)), h("span", { class: `sdds-dropdown-label-main ${(this.selectedLabel.length === 0 ||
+      this.label.length > 0 && (h("span", { class: "tds-dropdown-label-inside" }, this.label)), h("span", { class: `tds-dropdown-label-main ${(this.selectedLabel.length === 0 ||
         (this.labelPosition === 'inside' && this.label.length < 0)) &&
-        'sdds-dropdown-placeholder'}` }, this.selectedLabel.length > 0 &&
+        'tds-dropdown-placeholder'}` }, this.selectedLabel.length > 0 &&
       this.type !== 'multiselect' &&
-      this.selectedLabel, this.type === 'multiselect' && (h("span", { class: "sdds-dropdown-multiselect-result" }, this.labelPosition !== 'inside' &&
+      this.selectedLabel, this.type === 'multiselect' && (h("span", { class: "tds-dropdown-multiselect-result" }, this.labelPosition !== 'inside' &&
       this.selectedLabelsArray.toString().length < 1 &&
       this.placeholder, this.selectedLabelsArray.toString().length > 0 &&
       this.selectedLabelsArray.toString().split(',').join(', '))), !this.selectedLabel &&
@@ -244,11 +242,11 @@ export class Dropdown {
       this.placeholder, !this.selectedLabel &&
       this.size === 'sm' &&
       this.labelPosition === 'inside' &&
-      this.placeholder)))), h("svg", { class: "sdds-dropdown-arrow", width: "12", height: "7", viewBox: "0 0 12 7", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1 1L6 6L11 1", stroke: "currentColor", "stroke-width": "1.25", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("span", { class: "sdds-dropdown-menu",
+      this.placeholder)))), h("svg", { class: "tds-dropdown-arrow", width: "12", height: "7", viewBox: "0 0 12 7", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1 1L6 6L11 1", stroke: "currentColor", "stroke-width": "1.25", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("span", { class: "tds-dropdown-menu",
       // Need to have reference in order to calc height and distance from bottom
-      ref: (dropdownMenu) => (this.dropdownMenuSelector = dropdownMenu) }, h("slot", null))), h("p", { class: "sdds-dropdown-helper" }, h("svg", { class: "sdds-dropdown-error-icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 4C9.37 4 3.996 9.374 3.996 16.004S9.371 28.007 16 28.007c6.63 0 12.004-5.374 12.004-12.003C28.004 9.374 22.629 4 16 4ZM2 16.004c0-7.732 6.268-14 14-14s14 6.268 14 14-6.268 14-14 14-14-6.268-14-14Z", fill: "currentColor" }), h("path", { d: "M14.803 14.47V10h2.376v4.47l-.352 4.295h-1.672l-.352-4.295Zm-.053 5.632h2.5v2.394h-2.5v-2.394Z", fill: "currentColor" })), h("span", null, this.helper))));
+      ref: (dropdownMenu) => (this.dropdownMenuSelector = dropdownMenu) }, h("slot", null))), h("p", { class: "tds-dropdown-helper" }, h("svg", { class: "tds-dropdown-error-icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 4C9.37 4 3.996 9.374 3.996 16.004S9.371 28.007 16 28.007c6.63 0 12.004-5.374 12.004-12.003C28.004 9.374 22.629 4 16 4ZM2 16.004c0-7.732 6.268-14 14-14s14 6.268 14 14-6.268 14-14 14-14-6.268-14-14Z", fill: "currentColor" }), h("path", { d: "M14.803 14.47V10h2.376v4.47l-.352 4.295h-1.672l-.352-4.295Zm-.053 5.632h2.5v2.394h-2.5v-2.394Z", fill: "currentColor" })), h("span", null, this.helper))));
   }
-  static get is() { return "sdds-dropdown"; }
+  static get is() { return "tds-dropdown"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
@@ -274,7 +272,7 @@ export class Dropdown {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set the variant of the dropdown."
+          "text": "Set the variant of the Dropdown."
         },
         "attribute": "mode-variant",
         "reflect": false,
@@ -292,7 +290,7 @@ export class Dropdown {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Placeholder text for dropdown with no selectedLabel item"
+          "text": "Placeholder text for Dropdown with no selectedLabel item"
         },
         "attribute": "placeholder",
         "reflect": false
@@ -361,7 +359,7 @@ export class Dropdown {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "`Controls type of dropdown."
+          "text": "`Controls type of Dropdown."
         },
         "attribute": "type",
         "reflect": false,
@@ -379,7 +377,7 @@ export class Dropdown {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Controls the size of dropdown. 'sm', 'md' and 'lg' correct values and 'small', 'medium' and 'large' are deprecated"
+          "text": "Controls the size of the Dropdown.\n'sm', 'md' and 'lg' correct values and 'small', 'medium' and 'large' are deprecated"
         },
         "attribute": "size",
         "reflect": false,
@@ -468,7 +466,7 @@ export class Dropdown {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Add helper text in the bottom of dropdown"
+          "text": "Add helper text in the bottom of Dropdown"
         },
         "attribute": "helper",
         "reflect": false,
@@ -486,7 +484,7 @@ export class Dropdown {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Direction that the dropdown will open. Default is auto."
+          "text": "Direction that the Dropdown will open. Default is auto."
         },
         "attribute": "open-direction",
         "reflect": false,
@@ -515,15 +513,15 @@ export class Dropdown {
   }
   static get events() {
     return [{
-        "method": "internalSddsSearch",
-        "name": "internalSddsSearch",
+        "method": "internalTdsSearch",
+        "name": "internalTdsSearch",
         "bubbles": true,
         "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [{
               "name": "internal",
-              "text": "Search event that is emitted to the sdds-dropdown-filter"
+              "text": "Search event that is emitted to the tds-dropdown-filter"
             }],
           "text": ""
         },
@@ -575,7 +573,7 @@ export class Dropdown {
         "capture": false,
         "passive": false
       }, {
-        "name": "internalSddsSelect",
+        "name": "internalTdsSelect",
         "method": "selectOptionHandler",
         "target": undefined,
         "capture": false,

package/dist/collection/components/dropdown-v2/dropdown-option-v2/dropdown-option-v2.css

@@ -1,20 +1,20 @@
 :host {
   display: block;
-  background-color: var(--sdds-dropdown-option-background);
+  background-color: var(--tds-dropdown-option-background);
 }
 :host .dropdown-option {
   display: flex;
   align-items: center;
-  color: var(--sdds-dropdown-option-color);
-  border-bottom: 1px solid var(--sdds-dropdown-option-border);
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
+  color: var(--tds-dropdown-option-color);
+  border-bottom: 1px solid var(--tds-dropdown-option-border);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
 }
 :host .dropdown-option.selected {
-  background-color: var(--sdds-dropdown-option-background-selected);
+  background-color: var(--tds-dropdown-option-background-selected);
 }
 :host .dropdown-option.disabled {
-  color: var(--sdds-dropdown-option-color-disabled);
+  color: var(--tds-dropdown-option-color-disabled);
 }
 :host .dropdown-option.lg {
   height: 47px;
@@ -37,25 +37,25 @@
   padding: 0 16px;
 }
 :host .dropdown-option button:focus {
-  outline: 2px solid var(--sdds-blue-400);
+  outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
 }
 :host .dropdown-option .multiselect {
   padding: 0 16px;
   width: 100%;
 }
-:host .dropdown-option .multiselect sdds-checkbox,
-:host .dropdown-option .multiselect .sdds-checkbox-webcomponent,
+:host .dropdown-option .multiselect tds-checkbox,
+:host .dropdown-option .multiselect .tds-checkbox-webcomponent,
 :host .dropdown-option .multiselect label {
   height: 100%;
   width: 100%;
 }
 :host .dropdown-option:hover {
-  background-color: var(--sdds-dropdown-option-background-hover);
+  background-color: var(--tds-dropdown-option-background-hover);
   cursor: pointer;
 }
 :host .dropdown-option:hover.disabled {
-  background-color: var(--sdds-dropdown-option-background);
+  background-color: var(--tds-dropdown-option-background);
   cursor: not-allowed;
 }
 

package/dist/collection/components/dropdown-v2/dropdown-option-v2/dropdown-option-v2.js

@@ -1,9 +1,9 @@
 import { Host, h } from '@stencil/core';
-export class SddsDropdownOptionV2 {
+export class TdsDropdownOptionV2 {
   constructor() {
     this.connectedCallback = () => {
       this.parentElement =
-        this.host.parentElement.tagName === 'SDDS-DROPDOWN-V2'
+        this.host.parentElement.tagName === 'TDS-DROPDOWN-V2'
           ? this.host.parentElement
           : this.host.getRootNode().host;
       this.multiselect = this.parentElement.multiselect;
@@ -15,7 +15,7 @@ export class SddsDropdownOptionV2 {
         this.selected = true;
         this.parentElement.setValue(this.value, this.label);
         this.parentElement.close();
-        this.sddsSelect.emit({
+        this.tdsSelect.emit({
           value: this.value,
           selected: this.selected,
         });
@@ -26,7 +26,7 @@ export class SddsDropdownOptionV2 {
         if (event.detail.checked) {
           this.parentElement.setValue(this.value, this.label);
           this.selected = true;
-          this.sddsSelect.emit({
+          this.tdsSelect.emit({
             value: this.value,
             selected: this.selected,
           });
@@ -34,7 +34,7 @@ export class SddsDropdownOptionV2 {
         else {
           this.parentElement.removeValue(this.value);
           this.selected = false;
-          this.sddsSelect.emit({
+          this.tdsSelect.emit({
             value: this.value,
             selected: this.selected,
           });
@@ -42,10 +42,10 @@ export class SddsDropdownOptionV2 {
       }
     };
     this.handleFocus = (event) => {
-      this.sddsFocus.emit(event);
+      this.tdsFocus.emit(event);
     };
     this.handleBlur = (event) => {
-      this.sddsBlur.emit(event);
+      this.tdsBlur.emit(event);
     };
     this.value = undefined;
     this.disabled = false;
@@ -68,13 +68,13 @@ export class SddsDropdownOptionV2 {
         if (event.key === 'Escape') {
           this.parentElement.close();
         }
-      } }, h("sdds-checkbox", { onSddsChange: (event) => {
+      } }, h("tds-checkbox", { onTdsChange: (event) => {
         this.handleMultiselect(event);
       }, disabled: this.disabled, checked: this.selected }, h("div", { slot: "label" }, h("slot", null))))) : (h("button", { onClick: () => {
         this.handleSingleSelect();
-      }, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), disabled: this.disabled }, h("div", { class: "single-select" }, h("slot", null), this.selected && h("sdds-icon", { name: "tick", size: "16px" })))))));
+      }, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), disabled: this.disabled }, h("div", { class: "single-select" }, h("slot", null), this.selected && h("tds-icon", { name: "tick", size: "16px" })))))));
   }
-  static get is() { return "sdds-dropdown-option-v2"; }
+  static get is() { return "tds-dropdown-option-v2"; }
   static get encapsulation() { return "shadow"; }
   static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
@@ -101,7 +101,7 @@ export class SddsDropdownOptionV2 {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Value for the dropdown option."
+          "text": "Value for the Dropdown option."
         },
         "attribute": "value",
         "reflect": false
@@ -135,14 +135,14 @@ export class SddsDropdownOptionV2 {
   }
   static get events() {
     return [{
-        "method": "sddsSelect",
-        "name": "sddsSelect",
+        "method": "tdsSelect",
+        "name": "tdsSelect",
         "bubbles": true,
         "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Click event for the dropdown option."
+          "text": "Click event for the Dropdown option."
         },
         "complexType": {
           "original": "{\n    selected: boolean;\n    value: string;\n  }",
@@ -150,14 +150,14 @@ export class SddsDropdownOptionV2 {
           "references": {}
         }
       }, {
-        "method": "sddsFocus",
-        "name": "sddsFocus",
+        "method": "tdsFocus",
+        "name": "tdsFocus",
         "bubbles": true,
         "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Focus event for the dropdown option."
+          "text": "Focus event for the Dropdown option."
         },
         "complexType": {
           "original": "FocusEvent",
@@ -169,14 +169,14 @@ export class SddsDropdownOptionV2 {
           }
         }
       }, {
-        "method": "sddsBlur",
-        "name": "sddsBlur",
+        "method": "tdsBlur",
+        "name": "tdsBlur",
         "bubbles": true,
         "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Blur event for the dropdown option."
+          "text": "Blur event for the Dropdown option."
         },
         "complexType": {
           "original": "FocusEvent",

package/dist/collection/components/dropdown-v2/dropdown-v2.css

@@ -2,12 +2,12 @@
   all: unset;
   height: 100%;
   width: 100%;
-  background-color: var(--sdds-dropdown-bg);
-  border-bottom: 1px solid var(--sdds-dropdown-border-bottom);
+  background-color: var(--tds-dropdown-bg);
+  border-bottom: 1px solid var(--tds-dropdown-border-bottom);
   border-radius: 4px 4px 0 0;
 }
 :host button:hover {
-  border-bottom: 1px solid var(--sdds-dropdown-border-bottom-hover);
+  border-bottom: 1px solid var(--tds-dropdown-border-bottom-hover);
 }
 :host button .value-wrapper {
   padding: 0 16px;
@@ -16,10 +16,10 @@
   justify-content: space-between;
 }
 :host button.placeholder {
-  color: var(--sdds-dropdown-placeholder-color);
+  color: var(--tds-dropdown-placeholder-color);
 }
 :host button.value {
-  color: var(--sdds-dropdown-value-color);
+  color: var(--tds-dropdown-value-color);
 }
 :host button:focus {
   border-bottom-color: transparent;
@@ -31,10 +31,10 @@
   left: 0;
   width: 100%;
   height: 2px;
-  background: var(--sdds-dropdown-border-bottom-open);
+  background: var(--tds-dropdown-border-bottom-open);
 }
 :host button:disabled {
-  color: var(--sdds-dropdown-disabled-color);
+  color: var(--tds-dropdown-disabled-color);
 }
 
 :host .filter {
@@ -42,16 +42,16 @@
   align-items: center;
   justify-content: space-between;
   height: 100%;
-  background-color: var(--sdds-dropdown-bg);
-  border-bottom: 1px solid var(--sdds-dropdown-border-bottom);
+  background-color: var(--tds-dropdown-bg);
+  border-bottom: 1px solid var(--tds-dropdown-border-bottom);
   padding-left: 16px;
   border-radius: 4px 4px 0 0;
 }
 :host .filter:hover {
-  border-bottom: 1px solid var(--sdds-dropdown-border-bottom-hover);
+  border-bottom: 1px solid var(--tds-dropdown-border-bottom-hover);
 }
 :host .filter.disabled {
-  color: var(--sdds-dropdown-disabled-color);
+  color: var(--tds-dropdown-disabled-color);
 }
 :host .filter .value-wrapper {
   display: flex;
@@ -60,9 +60,9 @@
 }
 :host .filter .label-inside-as-placeholder {
   position: absolute;
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
-  color: var(--sdds-dropdown-placeholder-color);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  color: var(--tds-dropdown-placeholder-color);
 }
 :host .filter .label-inside-as-placeholder.lg {
   top: 20px;
@@ -74,8 +74,8 @@
   display: none;
 }
 :host .filter .label-inside-as-placeholder.selected {
-  font: var(--sdds-detail-07);
-  letter-spacing: var(--sdds-detail-07-ls);
+  font: var(--tds-detail-07);
+  letter-spacing: var(--tds-detail-07-ls);
   transition: all 0.2s ease-in-out;
 }
 :host .filter .label-inside-as-placeholder.selected.lg {
@@ -100,7 +100,7 @@
   left: 0;
   width: 100%;
   height: 2px;
-  background: var(--sdds-dropdown-border-bottom-open);
+  background: var(--tds-dropdown-border-bottom-open);
 }
 :host .filter input {
   flex: 1;
@@ -108,12 +108,12 @@
   width: 100%;
 }
 :host .filter input::placeholder {
-  color: var(--sdds-dropdown-placeholder-color);
+  color: var(--tds-dropdown-placeholder-color);
 }
 :host .filter input:disabled::placeholder {
-  color: var(--sdds-dropdown-disabled-color);
+  color: var(--tds-dropdown-disabled-color);
 }
-:host .filter sdds-icon {
+:host .filter tds-icon {
   margin-right: 16px;
   z-index: 101;
 }
@@ -124,13 +124,13 @@
   z-index: 100;
 }
 :host .label-outside {
-  font: var(--sdds-detail-05);
-  letter-spacing: var(--sdds-detail-05-ls);
-  color: var(--sdds-dropdown-label-color);
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
+  color: var(--tds-dropdown-label-color);
   margin-bottom: 8px;
 }
 :host .label-outside.disabled {
-  color: var(--sdds-dropdown-disabled-color);
+  color: var(--tds-dropdown-disabled-color);
 }
 :host .dropdown-select {
   position: relative;
@@ -139,13 +139,13 @@
 :host .dropdown-select.disabled .placeholder,
 :host .dropdown-select.disabled .label-inside-as-placeholder,
 :host .dropdown-select.disabled .value-wrapper {
-  color: var(--sdds-dropdown-disabled-color);
+  color: var(--tds-dropdown-disabled-color);
 }
 :host .dropdown-select .label-inside {
   position: absolute;
-  font: var(--sdds-detail-07);
-  letter-spacing: var(--sdds-detail-07-ls);
-  color: var(--sdds-dropdown-label-inside-color);
+  font: var(--tds-detail-07);
+  letter-spacing: var(--tds-detail-07-ls);
+  color: var(--tds-dropdown-label-inside-color);
 }
 :host .dropdown-select .label-inside.lg {
   top: 12px;
@@ -167,14 +167,14 @@
   text-overflow: ellipsis;
 }
 :host .dropdown-select .label-inside-as-placeholder {
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
-  color: var(--sdds-dropdown-placeholder-color);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  color: var(--tds-dropdown-placeholder-color);
 }
 :host .dropdown-select .label-inside-as-placeholder.selected {
   position: absolute;
-  font: var(--sdds-detail-07);
-  letter-spacing: var(--sdds-detail-07-ls);
+  font: var(--tds-detail-07);
+  letter-spacing: var(--tds-detail-07-ls);
   transition: all 0.2s ease-in-out;
 }
 :host .dropdown-select .label-inside-as-placeholder.selected.lg {
@@ -200,18 +200,18 @@
 }
 :host .helper {
   margin-top: 4px;
-  color: var(--sdds-dropdown-helper-color);
-  font: var(--sdds-detail-05);
-  letter-spacing: var(--sdds-detail-05-ls);
+  color: var(--tds-dropdown-helper-color);
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
   display: flex;
   align-items: center;
   gap: 8px;
 }
 :host .helper.error {
-  color: var(--sdds-negative);
+  color: var(--tds-negative);
 }
 :host .helper.disabled {
-  color: var(--sdds-dropdown-disabled-color);
+  color: var(--tds-dropdown-disabled-color);
 }
 :host .dropdown-list {
   position: absolute;
@@ -228,7 +228,7 @@
   background-color: inherit;
 }
 :host .dropdown-list::-webkit-scrollbar-thumb {
-  background-color: var(--sdds-grey-300);
+  background-color: var(--tds-grey-300);
 }
 :host .dropdown-list ::-webkit-scrollbar-button {
   height: 0;
@@ -267,7 +267,7 @@
   display: flex;
   align-items: center;
   padding: 0 16px;
-  background-color: var(--sdds-dropdown-bg);
+  background-color: var(--tds-dropdown-bg);
 }
 :host .dropdown-list .no-result.lg {
   height: 56px;
@@ -278,9 +278,9 @@
 :host .dropdown-list .no-result.sm {
   height: 40px;
 }
-:host sdds-icon {
+:host tds-icon {
   transition: transform 0.2s ease-in-out;
 }
-:host sdds-icon.open {
+:host tds-icon.open {
   transform: rotateZ(180deg);
 }