@scania/tegel 0.0.8 → 0.0.9

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

@@ -1,86 +1,86 @@
 :root,
-.sdds-mode-light {
-  /* This one is overriding the --sdds-link css for the link component. */
-  --sdds-link-text-decoration: none;
-  --sdds-dropdown-color: var(--sdds-grey-958);
-  --sdds-dropdown-background: var(--sdds-grey-50);
-  --sdds-dropdown-background-hover: var(--sdds-grey-100);
-  --sdds-dropdown-disabled: var(--sdds-grey-400);
-  --sdds-dropdown-border: var(--sdds-grey-100);
-  --sdds-dropdown-label-inside: var(--sdds-grey-700);
-  --sdds-dropdown-label-outside: var(--sdds-grey-958);
-  --sdds-dropdown-placeholder: var(--sdds-grey-700);
-  --sdds-dropdown-border-not-focused: var(--sdds-grey-600);
-  --sdds-dropdown-option-color: var(--sdds-grey-900);
-  --sdds-dropdown-option-disabled-color: var(--sdds-grey-400);
-  --sdds-dropdown-background-disabled: var(--sdds-dropdown-background);
-}
-:root .sdds-mode-variant-primary,
-.sdds-mode-light .sdds-mode-variant-primary {
-  --sdds-dropdown-background: var(--sdds-grey-50);
-  --sdds-dropdown-background-hover: var(--sdds-grey-100);
-}
-:root .sdds-mode-variant-secondary,
-.sdds-mode-light .sdds-mode-variant-secondary {
-  --sdds-dropdown-background: var(--sdds-white);
-  --sdds-dropdown-background-hover: var(--sdds-grey-50);
+.tds-mode-light {
+  /* This one is overriding the --tds-link css for the link component. */
+  --tds-link-text-decoration: none;
+  --tds-dropdown-color: var(--tds-grey-958);
+  --tds-dropdown-background: var(--tds-grey-50);
+  --tds-dropdown-background-hover: var(--tds-grey-100);
+  --tds-dropdown-disabled: var(--tds-grey-400);
+  --tds-dropdown-border: var(--tds-grey-100);
+  --tds-dropdown-label-inside: var(--tds-grey-700);
+  --tds-dropdown-label-outside: var(--tds-grey-958);
+  --tds-dropdown-placeholder: var(--tds-grey-700);
+  --tds-dropdown-border-not-focused: var(--tds-grey-600);
+  --tds-dropdown-option-color: var(--tds-grey-900);
+  --tds-dropdown-option-disabled-color: var(--tds-grey-400);
+  --tds-dropdown-background-disabled: var(--tds-dropdown-background);
+}
+:root .tds-mode-variant-primary,
+.tds-mode-light .tds-mode-variant-primary {
+  --tds-dropdown-background: var(--tds-grey-50);
+  --tds-dropdown-background-hover: var(--tds-grey-100);
+}
+:root .tds-mode-variant-secondary,
+.tds-mode-light .tds-mode-variant-secondary {
+  --tds-dropdown-background: var(--tds-white);
+  --tds-dropdown-background-hover: var(--tds-grey-50);
 }
 
-.sdds-mode-dark {
-  --sdds-link-text-decoration: none;
-  --sdds-dropdown-color: var(--sdds-grey-400);
-  --sdds-dropdown-background: var(--sdds-grey-868);
-  --sdds-dropdown-background-hover: var(--sdds-grey-800);
-  --sdds-dropdown-disabled: var(--sdds-grey-800);
-  --sdds-dropdown-border: var(--sdds-grey-800);
-  --sdds-dropdown-label-inside: var(--sdds-grey-400);
-  --sdds-dropdown-label-outside: var(--sdds-grey-100);
-  --sdds-dropdown-placeholder: var(--sdds-grey-400);
-  --sdds-dropdown-border-not-focused: var(--sdds-grey-600);
-  --sdds-dropdown-option-color: var(--sdds-grey-50);
-  --sdds-dropdown-option-disabled-color: var(--sdds-grey-800);
-  --sdds-dropdown-background-disabled: var(--sdds-dropdown-background);
-}
-.sdds-mode-dark .sdds-mode-variant-primary {
-  --sdds-dropdown-background: var(--sdds-grey-868);
-  --sdds-dropdown-background-hover: var(--sdds-grey-800);
-}
-.sdds-mode-dark .sdds-mode-variant-secondary {
-  --sdds-dropdown-background: var(--sdds-grey-900);
-  --sdds-dropdown-background-hover: var(--sdds-grey-800);
+.tds-mode-dark {
+  --tds-link-text-decoration: none;
+  --tds-dropdown-color: var(--tds-grey-400);
+  --tds-dropdown-background: var(--tds-grey-868);
+  --tds-dropdown-background-hover: var(--tds-grey-800);
+  --tds-dropdown-disabled: var(--tds-grey-800);
+  --tds-dropdown-border: var(--tds-grey-800);
+  --tds-dropdown-label-inside: var(--tds-grey-400);
+  --tds-dropdown-label-outside: var(--tds-grey-100);
+  --tds-dropdown-placeholder: var(--tds-grey-400);
+  --tds-dropdown-border-not-focused: var(--tds-grey-600);
+  --tds-dropdown-option-color: var(--tds-grey-50);
+  --tds-dropdown-option-disabled-color: var(--tds-grey-800);
+  --tds-dropdown-background-disabled: var(--tds-dropdown-background);
+}
+.tds-mode-dark .tds-mode-variant-primary {
+  --tds-dropdown-background: var(--tds-grey-868);
+  --tds-dropdown-background-hover: var(--tds-grey-800);
+}
+.tds-mode-dark .tds-mode-variant-secondary {
+  --tds-dropdown-background: var(--tds-grey-900);
+  --tds-dropdown-background-hover: var(--tds-grey-800);
 }
 
-.sdds-dropdown-helper {
-  font: var(--sdds-detail-ex-05);
-  letter-spacing: var(--sdds-detail-ex-05-ls);
-  color: var(--sdds-grey-700);
-  margin-top: var(--sdds-spacing-element-4);
+.tds-dropdown-helper {
+  font: var(--tds-detail-ex-05);
+  letter-spacing: var(--tds-detail-ex-05-ls);
+  color: var(--tds-grey-700);
+  margin-top: var(--tds-spacing-element-4);
   display: flex;
 }
-.sdds-dropdown-helper .sdds-dropdown-error-icon {
+.tds-dropdown-helper .tds-dropdown-error-icon {
   width: 16px;
   height: 16px;
   padding-right: 9px;
   display: none;
 }
 
-.sdds-dropdown-label-inside {
-  font: var(--sdds-detail-ex-07);
-  letter-spacing: var(--sdds-detail-ex-07-ls);
-  color: var(--sdds-dropdown-label-inside);
+.tds-dropdown-label-inside {
+  font: var(--tds-detail-ex-07);
+  letter-spacing: var(--tds-detail-ex-07-ls);
+  color: var(--tds-dropdown-label-inside);
 }
 
-.sdds-dropdown-label-outside {
-  font: var(--sdds-detail-ex-05);
-  letter-spacing: var(--sdds-detail-ex-05-ls);
+.tds-dropdown-label-outside {
+  font: var(--tds-detail-ex-05);
+  letter-spacing: var(--tds-detail-ex-05-ls);
   display: block;
-  color: var(--sdds-dropdown-label-outside);
-  margin-bottom: var(--sdds-spacing-element-8);
+  color: var(--tds-dropdown-label-outside);
+  margin-bottom: var(--tds-spacing-element-8);
 }
 
 :host,
 ::slotted(*) {
-  color: var(--sdds-grey-958);
+  color: var(--tds-grey-958);
   box-sizing: border-box;
   box-sizing: border-box;
 }
@@ -91,14 +91,14 @@
 
 :host,
 ::slotted(*) {
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
-  color: var(--sdds-grey-958);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  color: var(--tds-grey-958);
   box-sizing: border-box;
 }
-:host .sdds-dropdown-label-outside,
-::slotted(*) .sdds-dropdown-label-outside {
-  color: var(--sdds-dropdown-label-outside);
+:host .tds-dropdown-label-outside,
+::slotted(*) .tds-dropdown-label-outside {
+  color: var(--tds-dropdown-label-outside);
   text-decoration: none;
 }
 
@@ -110,36 +110,36 @@
   cursor: not-allowed;
   caret-color: transparent;
   pointer-events: none;
-  color: var(--sdds-dropdown-disabled);
+  color: var(--tds-dropdown-disabled);
   border: none;
 }
 :host::part(dropdown-filter-disabled)::placeholder {
-  color: var(--sdds-dropdown-disabled);
+  color: var(--tds-dropdown-disabled);
 }
 
-.sdds-dropdown {
+.tds-dropdown {
   position: relative;
   display: flex;
   flex-flow: column wrap;
   width: 100%;
   border: 0;
 }
-.sdds-dropdown,
-.sdds-dropdown * {
+.tds-dropdown,
+.tds-dropdown * {
   box-sizing: border-box;
 }
-.sdds-dropdown .sdds-dropdown-toggle {
-  font: var(--sdds-detail-ex-02);
-  letter-spacing: var(--sdds-detail-ex-02-ls);
-  color: var(--sdds-dropdown-color);
+.tds-dropdown .tds-dropdown-toggle {
+  font: var(--tds-detail-ex-02);
+  letter-spacing: var(--tds-detail-ex-02-ls);
+  color: var(--tds-dropdown-color);
   display: flex;
   align-items: center;
-  background-color: var(--sdds-dropdown-background);
+  background-color: var(--tds-dropdown-background);
   cursor: pointer;
   transition: box-shadow 0.1s ease-in, border-bottom-color 150ms ease;
   border-radius: 4px 4px 0 0;
   border: none;
-  border-bottom: 1px solid var(--sdds-dropdown-border-not-focused);
+  border-bottom: 1px solid var(--tds-dropdown-border-not-focused);
   box-shadow: none;
   width: 100%;
   text-align: left;
@@ -148,44 +148,44 @@
   display: flex;
   align-items: center;
 }
-.sdds-dropdown .sdds-dropdown-toggle:hover {
-  border-bottom-color: var(--sdds-grey-600);
+.tds-dropdown .tds-dropdown-toggle:hover {
+  border-bottom-color: var(--tds-grey-600);
 }
-.sdds-dropdown .sdds-dropdown-toggle:focus::before {
+.tds-dropdown .tds-dropdown-toggle:focus::before {
   content: " ";
   position: absolute;
   z-index: 2;
   bottom: 0;
   left: 0;
   width: 100%;
-  border-bottom: 2px solid var(--sdds-blue-400);
+  border-bottom: 2px solid var(--tds-blue-400);
 }
-.sdds-dropdown .sdds-dropdown-toggle:active, .sdds-dropdown .sdds-dropdown-toggle.active .sdds-dropdown .sdds-dropdown-toggle.selected {
-  border-bottom-color: var(--sdds-dropdown-border-not-focused);
+.tds-dropdown .tds-dropdown-toggle:active, .tds-dropdown .tds-dropdown-toggle.active .tds-dropdown .tds-dropdown-toggle.selected {
+  border-bottom-color: var(--tds-dropdown-border-not-focused);
 }
-.sdds-dropdown .sdds-dropdown-toggle.is-filter {
+.tds-dropdown .tds-dropdown-toggle.is-filter {
   transition: border 0.1s ease-in 0.1s;
   cursor: text;
 }
-.sdds-dropdown .sdds-dropdown-toggle-lg {
+.tds-dropdown .tds-dropdown-toggle-lg {
   padding: 20px 16px;
 }
-.sdds-dropdown .sdds-dropdown-toggle-md {
+.tds-dropdown .tds-dropdown-toggle-md {
   padding: 16px;
 }
-.sdds-dropdown .sdds-dropdown-toggle-sm {
+.tds-dropdown .tds-dropdown-toggle-sm {
   padding: 12px 16px;
 }
-.sdds-dropdown .sdds-dropdown-toggle.sdds-dropdown-toggle-label-inside-lg {
+.tds-dropdown .tds-dropdown-toggle.tds-dropdown-toggle-label-inside-lg {
   padding: 20px 16px 16px;
 }
-.sdds-dropdown .sdds-dropdown-toggle.sdds-dropdown-toggle-label-inside-md {
+.tds-dropdown .tds-dropdown-toggle.tds-dropdown-toggle-label-inside-md {
   padding: 16px 16px 12px;
 }
-.sdds-dropdown .sdds-dropdown-toggle--selected:not(:focus) {
-  border-bottom: 1px solid var(--sdds-dropdown-border-not-focused);
+.tds-dropdown .tds-dropdown-toggle--selected:not(:focus) {
+  border-bottom: 1px solid var(--tds-dropdown-border-not-focused);
 }
-.sdds-dropdown .sdds-dropdown-arrow {
+.tds-dropdown .tds-dropdown-arrow {
   width: 20px;
   position: absolute;
   right: 16px;
@@ -193,40 +193,40 @@
   transform: rotate(0);
   transition: transform ease 250ms;
 }
-.sdds-dropdown .sdds-dropdown-placeholder {
-  color: var(--sdds-grey-700);
+.tds-dropdown .tds-dropdown-placeholder {
+  color: var(--tds-grey-700);
 }
-.sdds-dropdown .sdds-dropdown-label {
+.tds-dropdown .tds-dropdown-label {
   display: grid;
   width: calc(100% - 25px);
 }
-.sdds-dropdown .sdds-dropdown-label-container {
+.tds-dropdown .tds-dropdown-label-container {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.sdds-dropdown.sdds-dropdown.sdds-dropdown-sm .sdds-dropdown-label-container--label-inside {
+.tds-dropdown.tds-dropdown.tds-dropdown-sm .tds-dropdown-label-container--label-inside {
   padding-bottom: 12px;
 }
-.sdds-dropdown .sdds-dropdown-filter {
+.tds-dropdown .tds-dropdown-filter {
   border: 0;
   outline: none;
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
-  color: var(--sdds-dropdown-link);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  color: var(--tds-dropdown-link);
   width: 100%;
   background: transparent;
 }
-.sdds-dropdown .sdds-dropdown-filter:focus {
+.tds-dropdown .tds-dropdown-filter:focus {
   outline: none;
 }
-.sdds-dropdown .sdds-dropdown-filter::placeholder {
-  color: var(--sdds-grey-700);
+.tds-dropdown .tds-dropdown-filter::placeholder {
+  color: var(--tds-grey-700);
   opacity: 1;
 }
-.sdds-dropdown .sdds-dropdown-menu {
+.tds-dropdown .tds-dropdown-menu {
   z-index: 100;
-  background-color: var(--sdds-dropdown-background);
+  background-color: var(--tds-dropdown-background);
   position: absolute;
   top: 100%;
   left: 0;
@@ -236,137 +236,137 @@
   border-style: solid;
   border-width: 0 1px 1px;
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
-  border-left-color: var(--sdds-dropdown-border);
-  border-right-color: var(--sdds-dropdown-border);
+  border-left-color: var(--tds-dropdown-border);
+  border-right-color: var(--tds-dropdown-border);
   overflow-x: hidden;
   overflow-y: auto;
   transform: scaleY(0);
   transform-origin: top;
   transition: transform 250ms ease;
 }
-.sdds-dropdown .sdds-dropdown-menu::-webkit-scrollbar {
+.tds-dropdown .tds-dropdown-menu::-webkit-scrollbar {
   width: 4px;
   background-color: inherit;
 }
-.sdds-dropdown .sdds-dropdown-menu::-webkit-scrollbar-thumb {
-  background-color: var(--sdds-grey-300);
+.tds-dropdown .tds-dropdown-menu::-webkit-scrollbar-thumb {
+  background-color: var(--tds-grey-300);
 }
-.sdds-dropdown .sdds-dropdown-menu ::-webkit-scrollbar-button {
+.tds-dropdown .tds-dropdown-menu ::-webkit-scrollbar-button {
   height: 0;
   width: 0;
 }
-.sdds-dropdown.sdds-dropdown-lg .sdds-dropdown-toggle {
+.tds-dropdown.tds-dropdown-lg .tds-dropdown-toggle {
   height: 56px;
 }
-.sdds-dropdown.sdds-dropdown-md .sdds-dropdown-toggle {
+.tds-dropdown.tds-dropdown-md .tds-dropdown-toggle {
   height: 48px;
 }
-.sdds-dropdown.sdds-dropdown-sm .sdds-dropdown-toggle {
+.tds-dropdown.tds-dropdown-sm .tds-dropdown-toggle {
   height: 40px;
 }
 
-:host(.sdds-dropdown--open-upwards) .sdds-dropdown .sdds-dropdown-menu {
+:host(.tds-dropdown--open-upwards) .tds-dropdown .tds-dropdown-menu {
   top: auto;
   bottom: 100%;
   box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.1);
   transform-origin: bottom;
 }
 
-:host(.sdds-dropdown--open-upwards[label-position=outside]) span.sdds-dropdown-menu {
+:host(.tds-dropdown--open-upwards[label-position=outside]) span.tds-dropdown-menu {
   bottom: calc(100% - 24px);
 }
 
 :host([disabled=true]) {
   cursor: not-allowed;
 }
-:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle {
+:host([disabled=true]) .tds-dropdown .tds-dropdown-toggle {
   pointer-events: none;
-  color: var(--sdds-dropdown-option-disabled-color);
+  color: var(--tds-dropdown-option-disabled-color);
   border: none;
   padding: 0 16px;
 }
-:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle .sdds-dropdown-placeholder {
-  color: var(--sdds-dropdown-placeholder);
+:host([disabled=true]) .tds-dropdown .tds-dropdown-toggle .tds-dropdown-placeholder {
+  color: var(--tds-dropdown-placeholder);
 }
-:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle .sdds-dropdown-label-inside {
-  color: var(--sdds-dropdown-label-inside);
+:host([disabled=true]) .tds-dropdown .tds-dropdown-toggle .tds-dropdown-label-inside {
+  color: var(--tds-dropdown-label-inside);
 }
-:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle:focus::before {
+:host([disabled=true]) .tds-dropdown .tds-dropdown-toggle:focus::before {
   content: none;
 }
 
-:host(.sdds-dropdown--error) .sdds-dropdown .sdds-dropdown-toggle {
-  border-color: var(--sdds-negative);
+:host(.tds-dropdown--error) .tds-dropdown .tds-dropdown-toggle {
+  border-color: var(--tds-negative);
 }
-:host(.sdds-dropdown--error) .sdds-dropdown .sdds-dropdown-toggle:focus::before {
-  border-color: var(--sdds-negative);
+:host(.tds-dropdown--error) .tds-dropdown .tds-dropdown-toggle:focus::before {
+  border-color: var(--tds-negative);
 }
-:host(.sdds-dropdown--error) .sdds-dropdown-helper {
-  color: var(--sdds-negative);
+:host(.tds-dropdown--error) .tds-dropdown-helper {
+  color: var(--tds-negative);
 }
-:host(.sdds-dropdown--error) .sdds-dropdown-helper .sdds-dropdown-error-icon {
+:host(.tds-dropdown--error) .tds-dropdown-helper .tds-dropdown-error-icon {
   display: flex;
 }
 
-:host ::slotted(sdds-dropdown-option) {
+:host ::slotted(tds-dropdown-option) {
   display: flex;
-  padding: var(--sdds-spacing-element-16);
-  background-color: var(--sdds-dropdown-background);
+  padding: var(--tds-spacing-element-16);
+  background-color: var(--tds-dropdown-background);
   border-top: 1px solid transparent;
-  border-bottom: 1px solid var(--sdds-dropdown-border);
+  border-bottom: 1px solid var(--tds-dropdown-border);
   opacity: 0;
   visibility: hidden;
   cursor: pointer;
   box-sizing: border-box;
-  color: var(--sdds-dropdown-option-color);
+  color: var(--tds-dropdown-option-color);
 }
-:host ::slotted(sdds-dropdown-option:last-child) {
+:host ::slotted(tds-dropdown-option:last-child) {
   border-bottom-color: transparent;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-:host ::slotted(sdds-dropdown-option:hover),
-:host ::slotted(sdds-dropdown-option:focus) {
-  background-color: var(--sdds-dropdown-background-hover);
+:host ::slotted(tds-dropdown-option:hover),
+:host ::slotted(tds-dropdown-option:focus) {
+  background-color: var(--tds-dropdown-background-hover);
 }
-:host ::slotted(sdds-dropdown-option:hover:not(:focus):not(sdds-dropdown-option.selected)) {
-  background-color: var(--sdds-dropdown-background-hover);
+:host ::slotted(tds-dropdown-option:hover:not(:focus):not(tds-dropdown-option.selected)) {
+  background-color: var(--tds-dropdown-background-hover);
 }
-:host ::slotted(sdds-dropdown-option:hover:focus) {
+:host ::slotted(tds-dropdown-option:hover:focus) {
   outline: none;
 }
-:host ::slotted(sdds-dropdown-option:focus) {
-  outline: 2px solid var(--sdds-blue-400);
+:host ::slotted(tds-dropdown-option:focus) {
+  outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
 }
-:host ::slotted(sdds-dropdown-option.sdds-dropdown--selected),
-:host ::slotted(sdds-dropdown-option.selected),
-:host ::slotted(sdds-dropdown-option.active),
-:host ::slotted(sdds-dropdown-option:active) {
-  background-color: var(--sdds-dropdown-background-hover);
-  border-top: 1px solid var(--sdds-dropdown-border);
-  border-bottom: 1px solid var(--sdds-dropdown-border);
+:host ::slotted(tds-dropdown-option.tds-dropdown--selected),
+:host ::slotted(tds-dropdown-option.selected),
+:host ::slotted(tds-dropdown-option.active),
+:host ::slotted(tds-dropdown-option:active) {
+  background-color: var(--tds-dropdown-background-hover);
+  border-top: 1px solid var(--tds-dropdown-border);
+  border-bottom: 1px solid var(--tds-dropdown-border);
 }
-:host ::slotted(sdds-dropdown-option.sdds-option--no-result) {
+:host ::slotted(tds-dropdown-option.tds-option--no-result) {
   cursor: not-allowed;
   pointer-events: none;
 }
-:host ::slotted(sdds-dropdown-option.sdds-dropdown-option-disabled),
-:host ::slotted(sdds-dropdown-option.selected.sdds-dropdown-option-disabled) {
+:host ::slotted(tds-dropdown-option.tds-dropdown-option-disabled),
+:host ::slotted(tds-dropdown-option.selected.tds-dropdown-option-disabled) {
   cursor: not-allowed;
-  color: var(--sdds-dropdown-option-disabled-color);
-  background-color: var(--sdds-dropdown-background-disabled);
+  color: var(--tds-dropdown-option-disabled-color);
+  background-color: var(--tds-dropdown-background-disabled);
 }
 
-:host(.sdds-dropdown--open-upwards) ::slotted(sdds-dropdown-option:first-child) {
+:host(.tds-dropdown--open-upwards) ::slotted(tds-dropdown-option:first-child) {
   border-radius: 4px 4px 0 0;
 }
-:host(.sdds-dropdown--open-upwards) ::slotted(sdds-dropdown-option:last-child) {
+:host(.tds-dropdown--open-upwards) ::slotted(tds-dropdown-option:last-child) {
   border-radius: 0;
-  border-bottom: 1px solid var(--sdds-dropdown-border);
+  border-bottom: 1px solid var(--tds-dropdown-border);
 }
 
-.sdds-option-label {
+.tds-option-label {
   margin: auto 0;
   display: flex;
   align-content: center;
@@ -374,53 +374,53 @@
   flex-grow: 2;
 }
 
-.sdds-option-checkmark {
+.tds-option-checkmark {
   color: inherit;
   opacity: 0;
   transition: opacity 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);
-  margin-left: var(--sdds-spacing-element-16);
+  margin-left: var(--tds-spacing-element-16);
 }
-.sdds-option-checkmark path {
-  color: var(--sdds-dropdown-option-color);
+.tds-option-checkmark path {
+  color: var(--tds-dropdown-option-color);
 }
 
-:host([size=sm]) ::slotted(sdds-dropdown-option) {
-  padding: var(--sdds-spacing-element-12) var(--sdds-spacing-element-16);
+:host([size=sm]) ::slotted(tds-dropdown-option) {
+  padding: var(--tds-spacing-element-12) var(--tds-spacing-element-16);
 }
 
-:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-toggle {
+:host(.tds-dropdown--open) .tds-dropdown .tds-dropdown-toggle {
   box-shadow: 0 -1px 3px -1px rgba(0, 0, 0, 0.1);
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
-:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-toggle.is-filter::before {
+:host(.tds-dropdown--open) .tds-dropdown .tds-dropdown-toggle.is-filter::before {
   content: " ";
   position: absolute;
   z-index: 2;
   bottom: 0;
   left: 0;
   width: 100%;
-  border-bottom: 1px solid var(--sdds-blue-400);
+  border-bottom: 1px solid var(--tds-blue-400);
 }
-:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-arrow {
+:host(.tds-dropdown--open) .tds-dropdown .tds-dropdown-arrow {
   transform: rotate(180deg);
 }
-:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-menu {
+:host(.tds-dropdown--open) .tds-dropdown .tds-dropdown-menu {
   transform: scaleY(1);
 }
-:host(.sdds-dropdown--open) ::slotted(sdds-dropdown-option) {
+:host(.tds-dropdown--open) ::slotted(tds-dropdown-option) {
   visibility: visible;
   opacity: 1;
 }
 
-:host(.selected) .sdds-option-checkmark {
+:host(.selected) .tds-option-checkmark {
   opacity: 1;
 }
 
-.sdds-dropdown-label-inside {
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
-  color: var(--sdds-dropdown-label-inside);
+.tds-dropdown-label-inside {
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  color: var(--tds-dropdown-label-inside);
   position: absolute;
   transition: transform 250ms ease, color 200ms ease;
   width: calc(100% - 63px);
@@ -430,35 +430,35 @@
   font-size: 10px;
 }
 
-.sdds-dropdown-label-container.sdds-dropdown-label-container--label-inside .sdds-dropdown-placeholder {
+.tds-dropdown-label-container.tds-dropdown-label-container--label-inside .tds-dropdown-placeholder {
   display: block;
   padding-top: 4px;
 }
 
-.sdds-dropdown-lg .sdds-dropdown-label-inside {
+.tds-dropdown-lg .tds-dropdown-label-inside {
   display: block;
   top: 16px;
 }
 
-.sdds-dropdown-md .sdds-dropdown-label-inside {
+.tds-dropdown-md .tds-dropdown-label-inside {
   display: block;
   top: 12px;
 }
 
-.sdds-dropdown.sdds-dropdown-sm .sdds-dropdown-label-inside {
+.tds-dropdown.tds-dropdown-sm .tds-dropdown-label-inside {
   display: none;
 }
 
-.sdds-dropdown-multiselect-result {
+.tds-dropdown-multiselect-result {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.sdds-option-checkbox {
+.tds-option-checkbox {
   margin-right: 8px;
 }
 
-.sdds-form-label {
+.tds-form-label {
   display: flex;
 }