npm - @scania/tegel - Versions diffs - 0.0.7 → 0.0.9 - Mend

@scania/tegel 0.0.7 → 0.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1423) hide show

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

@@ -1,423 +1,86 @@
-/* https://medium.com/swlh/full-text-styling-with-a-single-line-of-css-838e8c666f4d */
-:root {
-  /* FUNCTIONAL TYPOGRAPHY */
-  --sdds-headline-01: normal normal bold 40px/40px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-01-ls: 0;
-  --sdds-headline-02: normal normal bold 32px/32px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-02-ls: -0.04em;
-  --sdds-headline-03: normal normal bold 24px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-03-ls: -0.03em;
-  --sdds-headline-04: normal normal bold 20px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-04-ls: -0.02em;
-  --sdds-headline-05: normal normal bold 14px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-05-ls: -0.02em;
-  --sdds-headline-06: normal normal bold 14px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-06-ls: -0.02em;
-  --sdds-headline-07: normal normal bold 14px/16px "Scania Sans Semi Condensed", arial, helvetica,
-    sans-serif;
-  --sdds-headline-07-ls: -0.01em;
-  --sdds-paragraph-01: normal normal normal 24px/32px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-paragraph-01-ls: -0.03em;
-  --sdds-paragraph-02: normal normal normal 20px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-paragraph-02-ls: -0.01em;
-  --sdds-body-01: normal normal normal 16px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-body-01-ls: -0.02em;
-  --sdds-body-02: normal normal normal 14px/20px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-body-02-ls: -0.02em;
-  --sdds-detail-01: normal normal normal 16px/24px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-01-ls: -0.01em;
-  --sdds-detail-02: normal normal normal 14px/16px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-02-ls: -0.01em;
-  --sdds-detail-03: normal normal normal 14px/20px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-03-ls: -0.01em;
-  --sdds-detail-04: normal normal bold 12px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-detail-04-ls: 0.08em;
-  --sdds-detail-04-tt: uppercase;
-  --sdds-detail-05: normal normal normal 12px/16px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-05-ls: 0;
-  --sdds-detail-06: normal normal bold 10px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-detail-06-ls: 0.08em;
-  --sdds-detail-06-tt: uppercase;
-  --sdds-detail-07: normal normal normal 10px/8px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-07-ls: 0;
-  /* EXPRESSIVE TYPOGRAPHY */
-  --sdds-expressive-headline-01: normal normal bold 80px/80px "Scania Sans Headline", arial,
-    helvetica, sans-serif;
-  --sdds-expressive-headline-01-ls: 0;
-  --sdds-expressive-headline-02: normal normal bold 56px/56px "Scania Sans Headline", arial,
-    helvetica, sans-serif;
-  --sdds-expressive-headline-02-ls: 0;
-  --sdds-headline-ex-01: normal normal bold 40px/40px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-01-ls: 0;
-  --sdds-headline-ex-02: normal normal bold 32px/32px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-02-ls: -0.04em;
-  --sdds-headline-ex-03: normal normal bold 24px/24px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-03-ls: -0.03em;
-  --sdds-headline-ex-04: normal normal bold 20px/24px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-04-ls: -0.01em;
-  --sdds-headline-ex-05: normal normal bold 16px/24px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-05-ls: -0.02em;
-  --sdds-headline-ex-06: normal normal bold 14px/16px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-06-ls: -0.02em;
-  --sdds-headline-ex-07: normal normal bold 14px/16px "Scania Sans Semi Condensed", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-07-ls: -0.01em;
-  --sdds-paragraph-ex-01: normal normal normal 24px/32px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-paragraph-ex-01-ls: -0.03em;
-  --sdds-paragraph-ex-02: normal normal normal 20px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-paragraph-ex-02-ls: -0.01em;
-  --sdds-body-ex-01: normal normal normal 16px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-body-ex-01-ls: -0.02em;
-  --sdds-body-ex-02: normal normal normal 14px/20px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-body-ex-02-ls: -0.01em;
-  --sdds-detail-ex-01: normal normal normal 16px/24px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-01-ls: -0.01em;
-  --sdds-detail-ex-02: normal normal normal 14px/16px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-02-ls: -0.01em;
-  --sdds-detail-ex-03: normal normal normal 14px/20px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-03-ls: -0.01em;
-  --sdds-detail-ex-04: normal normal bold 12px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-detail-ex-04-ls: 0.08em;
-  --sdds-detail-ex-04-tt: uppercase;
-  --sdds-detail-ex-05: normal normal normal 12px/16px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-05-ls: 0;
-  --sdds-detail-ex-06: normal normal bold 10px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-detail-ex-06-ls: 0.08em;
-  --sdds-detail-ex-06-tt: uppercase;
-  --sdds-detail-ex-07: normal normal normal 10px/8px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-07-ls: 0;
-}
 :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);
-}
-.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);
-}
-.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-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);
+}
+.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);
+}
+.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);
-}
-/* https://medium.com/swlh/full-text-styling-with-a-single-line-of-css-838e8c666f4d */
-:root {
-  /* FUNCTIONAL TYPOGRAPHY */
-  --sdds-headline-01: normal normal bold 40px/40px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-01-ls: 0;
-  --sdds-headline-02: normal normal bold 32px/32px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-02-ls: -0.04em;
-  --sdds-headline-03: normal normal bold 24px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-03-ls: -0.03em;
-  --sdds-headline-04: normal normal bold 20px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-04-ls: -0.02em;
-  --sdds-headline-05: normal normal bold 14px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-05-ls: -0.02em;
-  --sdds-headline-06: normal normal bold 14px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-06-ls: -0.02em;
-  --sdds-headline-07: normal normal bold 14px/16px "Scania Sans Semi Condensed", arial, helvetica,
-    sans-serif;
-  --sdds-headline-07-ls: -0.01em;
-  --sdds-paragraph-01: normal normal normal 24px/32px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-paragraph-01-ls: -0.03em;
-  --sdds-paragraph-02: normal normal normal 20px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-paragraph-02-ls: -0.01em;
-  --sdds-body-01: normal normal normal 16px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-body-01-ls: -0.02em;
-  --sdds-body-02: normal normal normal 14px/20px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-body-02-ls: -0.02em;
-  --sdds-detail-01: normal normal normal 16px/24px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-01-ls: -0.01em;
-  --sdds-detail-02: normal normal normal 14px/16px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-02-ls: -0.01em;
-  --sdds-detail-03: normal normal normal 14px/20px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-03-ls: -0.01em;
-  --sdds-detail-04: normal normal bold 12px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-detail-04-ls: 0.08em;
-  --sdds-detail-04-tt: uppercase;
-  --sdds-detail-05: normal normal normal 12px/16px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-05-ls: 0;
-  --sdds-detail-06: normal normal bold 10px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-detail-06-ls: 0.08em;
-  --sdds-detail-06-tt: uppercase;
-  --sdds-detail-07: normal normal normal 10px/8px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-07-ls: 0;
-  /* EXPRESSIVE TYPOGRAPHY */
-  --sdds-expressive-headline-01: normal normal bold 80px/80px "Scania Sans Headline", arial,
-    helvetica, sans-serif;
-  --sdds-expressive-headline-01-ls: 0;
-  --sdds-expressive-headline-02: normal normal bold 56px/56px "Scania Sans Headline", arial,
-    helvetica, sans-serif;
-  --sdds-expressive-headline-02-ls: 0;
-  --sdds-headline-ex-01: normal normal bold 40px/40px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-01-ls: 0;
-  --sdds-headline-ex-02: normal normal bold 32px/32px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-02-ls: -0.04em;
-  --sdds-headline-ex-03: normal normal bold 24px/24px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-03-ls: -0.03em;
-  --sdds-headline-ex-04: normal normal bold 20px/24px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-04-ls: -0.01em;
-  --sdds-headline-ex-05: normal normal bold 16px/24px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-05-ls: -0.02em;
-  --sdds-headline-ex-06: normal normal bold 14px/16px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-06-ls: -0.02em;
-  --sdds-headline-ex-07: normal normal bold 14px/16px "Scania Sans Semi Condensed", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-07-ls: -0.01em;
-  --sdds-paragraph-ex-01: normal normal normal 24px/32px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-paragraph-ex-01-ls: -0.03em;
-  --sdds-paragraph-ex-02: normal normal normal 20px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-paragraph-ex-02-ls: -0.01em;
-  --sdds-body-ex-01: normal normal normal 16px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-body-ex-01-ls: -0.02em;
-  --sdds-body-ex-02: normal normal normal 14px/20px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-body-ex-02-ls: -0.01em;
-  --sdds-detail-ex-01: normal normal normal 16px/24px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-01-ls: -0.01em;
-  --sdds-detail-ex-02: normal normal normal 14px/16px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-02-ls: -0.01em;
-  --sdds-detail-ex-03: normal normal normal 14px/20px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-03-ls: -0.01em;
-  --sdds-detail-ex-04: normal normal bold 12px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-detail-ex-04-ls: 0.08em;
-  --sdds-detail-ex-04-tt: uppercase;
-  --sdds-detail-ex-05: normal normal normal 12px/16px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-05-ls: 0;
-  --sdds-detail-ex-06: normal normal bold 10px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-detail-ex-06-ls: 0.08em;
-  --sdds-detail-ex-06-tt: uppercase;
-  --sdds-detail-ex-07: normal normal normal 10px/8px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-07-ls: 0;
-}
-:root,
-.sdds-mode-light {
-  --sdds-checkbox-color: var(--sdds-grey-900);
-  --sdds-checkbox-interaction-01: var(--sdds-blue-800);
-  --sdds-checkbox-interaction-02: var(--sdds-white);
-  --sdds-checkbox-background-hover: var(--sdds-blue-800);
-  --sdds-checkbox-background-focus: var(--sdds-blue-800);
-  --sdds-checkbox-background-opacity-hover: 0.12;
-  --sdds-checkbox-background-opacity-focus: 0.24;
-  --sdds-checkbox-disabled: var(--sdds-grey-400);
-  --sdds-checkbox-background-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-  --sdds-checkbox-background-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23b0b7c4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-  --sdds-checkbox-border-color-disabled-after: var(--sdds-grey-500);
-  --sdds-checkbox-color-disabled-after: var(--sdds-grey-500);
-}
-:root .sdds-mode-dark,
-.sdds-mode-light .sdds-mode-dark {
-  --sdds-checkbox-color: var(--sdds-white);
-  --sdds-checkbox-interaction-01: var(--sdds-white);
-  --sdds-checkbox-interaction-02: var(--sdds-grey-958);
-  --sdds-checkbox-background-hover: var(--sdds-grey-600);
-  --sdds-checkbox-background-focus: var(--sdds-grey-600);
-  --sdds-checkbox-background-opacity-hover: 0.48;
-  --sdds-checkbox-background-opacity-focus: 0.72;
-  --sdds-checkbox-disabled: white;
-  --sdds-checkbox-background-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-  --sdds-checkbox-background-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-  --sdds-checkbox-border-color-disabled-after: var(--sdds-grey-700);
-  --sdds-checkbox-color-disabled-after: var(--sdds-grey-700);
-}
-.sdds-checkbox-item {
-  box-sizing: border-box;
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
-  color: var(--sdds-checkbox-text);
-  display: flex;
-  align-items: center;
-  margin-left: -4px;
-}
-.sdds-checkbox-item * {
-  box-sizing: border-box;
-}
-.sdds-checkbox-item .sdds-form-input[type=checkbox] {
-  appearance: none;
-  outline: none;
-  margin: 0;
-  border: 0;
-  border-radius: 2px;
-  width: 24px;
-  height: 24px;
-  position: relative;
-  cursor: pointer;
-}
-.sdds-checkbox-item .sdds-form-input[type=checkbox] + label {
-  color: var(--sdds-checkbox-color);
-  padding-left: var(--sdds-spacing-element-4);
-  padding-top: var(--sdds-spacing-element-4);
-  padding-bottom: var(--sdds-spacing-element-4);
-  cursor: pointer;
-}
-.sdds-checkbox-item .sdds-form-input[type=checkbox]::before, .sdds-checkbox-item .sdds-form-input[type=checkbox]::after {
-  content: "";
-  position: absolute;
-  box-sizing: border-box;
-}
-.sdds-checkbox-item .sdds-form-input[type=checkbox]::before {
-  width: 24px;
-  height: 24px;
-  left: 0;
-  top: 0;
-  border-radius: 4px;
-}
-.sdds-checkbox-item .sdds-form-input[type=checkbox]::after {
-  border: 1px solid var(--sdds-checkbox-interaction-01);
-  background-color: var(--sdds-checkbox-interaction-02);
-  width: 16px;
-  height: 16px;
-  left: 4px;
-  top: 4px;
-  border-radius: 2px;
-}
-.sdds-checkbox-item .sdds-form-input[type=checkbox]:hover::before {
-  background-color: var(--sdds-checkbox-background-hover);
-  opacity: var(--sdds-checkbox-background-opacity-hover);
-}
-.sdds-checkbox-item .sdds-form-input[type=checkbox]:focus::before {
-  background-color: var(--sdds-checkbox-background-focus);
-  opacity: var(--sdds-checkbox-background-opacity-focus);
-  transition: opacity 0.2s ease-in-out;
-}
-.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled, .sdds-checkbox-item .sdds-form-input[type=checkbox].disabled {
-  cursor: not-allowed;
-}
-.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled::after, .sdds-checkbox-item .sdds-form-input[type=checkbox].disabled::after {
-  border-color: var(--sdds-checkbox-border-color-disabled-after);
-}
-.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled + label, .sdds-checkbox-item .sdds-form-input[type=checkbox].disabled + label {
-  color: var(--sdds-grey-600);
-  cursor: not-allowed;
-}
-.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled:hover::before, .sdds-checkbox-item .sdds-form-input[type=checkbox].disabled:hover::before {
-  display: none;
-}
-.sdds-form-input[type=checkbox]:checked::after {
-  background-image: var(--sdds-checkbox-background-img);
-  background-color: var(--sdds-checkbox-interaction-01);
-  background-repeat: no-repeat;
-  background-position: center;
-}
-.sdds-form-input[type=checkbox]:checked:disabled:hover::before, .sdds-form-input[type=checkbox]:checked:disabled::before, .sdds-form-input[type=checkbox]:checked.disabled:hover::before, .sdds-form-input[type=checkbox]:checked.disabled::before {
-  display: block;
-  width: 16px;
-  height: 16px;
-  left: 4px;
-  top: 4px;
-  border: 1px solid #b0b7c4;
-}
-.sdds-form-input[type=checkbox]:checked:disabled::after, .sdds-form-input[type=checkbox]:checked.disabled::after {
-  background-image: var(--sdds-checkbox-background-img-disabled);
-  background-color: var(--sdds-checkbox-interaction-02);
-  color: var(--sdds-checkbox-color-disabled-after);
+  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;
 }
@@ -428,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;
 }
@@ -447,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;
@@ -485,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;
@@ -530,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;
@@ -573,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;
@@ -711,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);
@@ -767,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;
 }