@scania/tegel 0.0.8 → 0.0.9

package/dist/collection/components/button/button.css

@@ -1,195 +1,195 @@
 :root,
-.sdds-mode-light {
-  --sdds-btn-primary-background: var(--sdds-blue-600);
-  --sdds-btn-primary-color: var(--sdds-white);
-  --sdds-btn-primary-border-color: transparent;
-  --sdds-btn-primary-background-hover: var(--sdds-blue-500);
-  --sdds-btn-primary-color-hover: var(--sdds-white);
-  --sdds-btn-primary-border-color-hover: transparent;
-  --sdds-btn-primary-background-active: var(--sdds-blue-700);
-  --sdds-btn-primary-color-active: var(--sdds-white);
-  --sdds-btn-primary-border-color-active: var(--sdds-blue-700);
-  --sdds-btn-primary-background-focus: var(--sdds-blue-400);
-  --sdds-btn-primary-color-focus: var(--sdds-white);
-  --sdds-btn-primary-border-color-focus: var(--sdds-blue-600);
-  --sdds-btn-primary-outline-color-focus: var(--sdds-blue-600);
-  --sdds-btn-primary-background-disabled-primary: var(--sdds-grey-50);
-  --sdds-btn-primary-background-disabled-secondary: var(--sdds-white);
-  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-disabled-primary);
-  --sdds-btn-primary-color-disabled: var(--sdds-grey-400);
-  --sdds-btn-primary-border-color-disabled: transparent;
+.tds-mode-light {
+  --tds-btn-primary-background: var(--tds-blue-600);
+  --tds-btn-primary-color: var(--tds-white);
+  --tds-btn-primary-border-color: transparent;
+  --tds-btn-primary-background-hover: var(--tds-blue-500);
+  --tds-btn-primary-color-hover: var(--tds-white);
+  --tds-btn-primary-border-color-hover: transparent;
+  --tds-btn-primary-background-active: var(--tds-blue-700);
+  --tds-btn-primary-color-active: var(--tds-white);
+  --tds-btn-primary-border-color-active: var(--tds-blue-700);
+  --tds-btn-primary-background-focus: var(--tds-blue-400);
+  --tds-btn-primary-color-focus: var(--tds-white);
+  --tds-btn-primary-border-color-focus: var(--tds-blue-600);
+  --tds-btn-primary-outline-color-focus: var(--tds-blue-600);
+  --tds-btn-primary-background-disabled-primary: var(--tds-grey-50);
+  --tds-btn-primary-background-disabled-secondary: var(--tds-white);
+  --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-primary);
+  --tds-btn-primary-color-disabled: var(--tds-grey-400);
+  --tds-btn-primary-border-color-disabled: transparent;
   /* ICON */
-  --sdds-btn-icon-primary-fill: var(--sdds-grey-50);
-  --sdds-btn-icon-primary-color: var(--sdds-grey-50);
-  --sdds-btn-secondary-background: transparent;
-  --sdds-btn-secondary-color: var(--sdds-black);
-  --sdds-btn-secondary-border-color: rgb(0 0 0 / 48%);
-  --sdds-btn-secondary-background-hover: var(--sdds-blue-500);
-  --sdds-btn-secondary-color-hover: var(--sdds-white);
-  --sdds-btn-secondary-border-color-hover: var(--sdds-blue-500);
-  --sdds-btn-secondary-background-active: transparent;
-  --sdds-btn-secondary-color-active: var(--sdds-black);
-  --sdds-btn-secondary-border-color-active: rgb(0 0 0 / 87%);
-  --sdds-btn-secondary-background-focus: transparent;
-  --sdds-btn-secondary-color-focus: var(--sdds-black);
-  --sdds-btn-secondary-border-color-focus: var(--sdds-blue-400);
-  --sdds-btn-secondary-outline-color: rgb(0 0 0 / 38%);
-  --sdds-btn-secondary-outline-color-focus: var(--sdds-blue-400);
-  --sdds-btn-secondary-background-disabled: transparent;
-  --sdds-btn-secondary-color-disabled: rgb(0 0 0 / 38%);
-  --sdds-btn-secondary-border-color-disabled: rgb(0 0 0 / 38%);
-  --sdds-btn-icon-secondary-color-focus: var(--sdds-black);
-  --sdds-btn-icon-secondary-fill-focus: var(--sdds-black);
+  --tds-btn-icon-primary-fill: var(--tds-grey-50);
+  --tds-btn-icon-primary-color: var(--tds-grey-50);
+  --tds-btn-secondary-background: transparent;
+  --tds-btn-secondary-color: var(--tds-black);
+  --tds-btn-secondary-border-color: rgb(0 0 0 / 48%);
+  --tds-btn-secondary-background-hover: var(--tds-blue-500);
+  --tds-btn-secondary-color-hover: var(--tds-white);
+  --tds-btn-secondary-border-color-hover: var(--tds-blue-500);
+  --tds-btn-secondary-background-active: transparent;
+  --tds-btn-secondary-color-active: var(--tds-black);
+  --tds-btn-secondary-border-color-active: rgb(0 0 0 / 87%);
+  --tds-btn-secondary-background-focus: transparent;
+  --tds-btn-secondary-color-focus: var(--tds-black);
+  --tds-btn-secondary-border-color-focus: var(--tds-blue-400);
+  --tds-btn-secondary-outline-color: rgb(0 0 0 / 38%);
+  --tds-btn-secondary-outline-color-focus: var(--tds-blue-400);
+  --tds-btn-secondary-background-disabled: transparent;
+  --tds-btn-secondary-color-disabled: rgb(0 0 0 / 38%);
+  --tds-btn-secondary-border-color-disabled: rgb(0 0 0 / 38%);
+  --tds-btn-icon-secondary-color-focus: var(--tds-black);
+  --tds-btn-icon-secondary-fill-focus: var(--tds-black);
   /* ICON */
-  --sdds-btn-icon-secondary-fill: var(--sdds-black);
-  --sdds-btn-icon-secondary-color: var(--sdds-black);
+  --tds-btn-icon-secondary-fill: var(--tds-black);
+  --tds-btn-icon-secondary-color: var(--tds-black);
   /* ICON HOVER */
-  --sdds-btn-icon-secondary-fill-hover: var(--sdds-grey-50);
-  --sdds-btn-icon-secondary-color-hover: var(--sdds-grey-50);
-  --sdds-btn-ghost-background: transparent;
-  --sdds-btn-ghost-color: var(--sdds-black);
-  --sdds-btn-ghost-border-color: transparent;
-  --sdds-btn-ghost-background-hover: transparent;
-  --sdds-btn-ghost-color-hover: var(--sdds-black);
-  --sdds-btn-ghost-border-color-hover: rgb(0 0 0 / 60%);
-  --sdds-btn-ghost-outline-color-hover: rgb(0 0 0 / 60%);
-  --sdds-btn-ghost-background-active: transparent;
-  --sdds-btn-ghost-color-active: var(--sdds-black);
-  --sdds-btn-ghost-border-color-active: rgb(0 0 0 / 87%);
-  --sdds-btn-ghost-background-focus: transparent;
-  --sdds-btn-ghost-color-focus: var(--sdds-black);
-  --sdds-btn-ghost-border-color-focus: var(--sdds-blue-300);
-  --sdds-btn-ghost-outline-color-focus: var(--sdds-blue-300);
-  --sdds-btn-ghost-background-disabled: transparent;
-  --sdds-btn-ghost-color-disabled: rgb(0 0 0 / 38%);
-  --sdds-btn-ghost-border-color-disabled: transparent;
+  --tds-btn-icon-secondary-fill-hover: var(--tds-grey-50);
+  --tds-btn-icon-secondary-color-hover: var(--tds-grey-50);
+  --tds-btn-ghost-background: transparent;
+  --tds-btn-ghost-color: var(--tds-black);
+  --tds-btn-ghost-border-color: transparent;
+  --tds-btn-ghost-background-hover: transparent;
+  --tds-btn-ghost-color-hover: var(--tds-black);
+  --tds-btn-ghost-border-color-hover: rgb(0 0 0 / 60%);
+  --tds-btn-ghost-outline-color-hover: rgb(0 0 0 / 60%);
+  --tds-btn-ghost-background-active: transparent;
+  --tds-btn-ghost-color-active: var(--tds-black);
+  --tds-btn-ghost-border-color-active: rgb(0 0 0 / 87%);
+  --tds-btn-ghost-background-focus: transparent;
+  --tds-btn-ghost-color-focus: var(--tds-black);
+  --tds-btn-ghost-border-color-focus: var(--tds-blue-300);
+  --tds-btn-ghost-outline-color-focus: var(--tds-blue-300);
+  --tds-btn-ghost-background-disabled: transparent;
+  --tds-btn-ghost-color-disabled: rgb(0 0 0 / 38%);
+  --tds-btn-ghost-border-color-disabled: transparent;
   /* ICON */
-  --sdds-btn-icon-ghost-fill: var(--sdds-black);
-  --sdds-btn-icon-ghost-color: var(--sdds-black);
-  --sdds-btn-danger-background: var(--sdds-negative);
-  --sdds-btn-danger-color: var(--sdds-white);
-  --sdds-btn-danger-border-color: transparent;
-  --sdds-btn-danger-background-hover: var(--sdds-red-600);
-  --sdds-btn-danger-color-hover: var(--sdds-white);
-  --sdds-btn-danger-border-color-hover: transparent;
-  --sdds-btn-danger-background-active: var(--sdds-red-700);
-  --sdds-btn-danger-color-active: var(--sdds-white);
-  --sdds-btn-danger-border-color-active: var(--sdds-red-700);
-  --sdds-btn-danger-background-focus: var(--sdds-red-400);
-  --sdds-btn-danger-color-focus: var(--sdds-white);
-  --sdds-btn-danger-border-color-focus: var(--sdds-red-400);
-  --sdds-btn-danger-outline-color-focus: var(--sdds-red-700);
-  --sdds-btn-danger-background-disabled-primary: var(--sdds-grey-50);
-  --sdds-btn-danger-background-disabled-secondary: var(--sdds-white);
-  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-disabled-primary);
-  --sdds-btn-danger-color-disabled: rgb(0 0 0 / 38%);
-  --sdds-btn-danger-border-color-disabled: transparent;
+  --tds-btn-icon-ghost-fill: var(--tds-black);
+  --tds-btn-icon-ghost-color: var(--tds-black);
+  --tds-btn-danger-background: var(--tds-negative);
+  --tds-btn-danger-color: var(--tds-white);
+  --tds-btn-danger-border-color: transparent;
+  --tds-btn-danger-background-hover: var(--tds-red-600);
+  --tds-btn-danger-color-hover: var(--tds-white);
+  --tds-btn-danger-border-color-hover: transparent;
+  --tds-btn-danger-background-active: var(--tds-red-700);
+  --tds-btn-danger-color-active: var(--tds-white);
+  --tds-btn-danger-border-color-active: var(--tds-red-700);
+  --tds-btn-danger-background-focus: var(--tds-red-400);
+  --tds-btn-danger-color-focus: var(--tds-white);
+  --tds-btn-danger-border-color-focus: var(--tds-red-400);
+  --tds-btn-danger-outline-color-focus: var(--tds-red-700);
+  --tds-btn-danger-background-disabled-primary: var(--tds-grey-50);
+  --tds-btn-danger-background-disabled-secondary: var(--tds-white);
+  --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-primary);
+  --tds-btn-danger-color-disabled: rgb(0 0 0 / 38%);
+  --tds-btn-danger-border-color-disabled: transparent;
   /* ICON */
-  --sdds-btn-icon-danger-fill: var(--sdds-white);
-  --sdds-btn-icon-danger-color: var(--sdds-white);
+  --tds-btn-icon-danger-fill: var(--tds-white);
+  --tds-btn-icon-danger-color: var(--tds-white);
 }
-:root .sdds-mode-variant-primary,
-.sdds-mode-light .sdds-mode-variant-primary {
-  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-disabled-primary);
-  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-disabled-primary);
+:root .tds-mode-variant-primary,
+.tds-mode-light .tds-mode-variant-primary {
+  --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-primary);
+  --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-primary);
 }
-:root .sdds-mode-variant-secondary,
-.sdds-mode-light .sdds-mode-variant-secondary {
-  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-disabled-secondary);
-  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-disabled-secondary);
+:root .tds-mode-variant-secondary,
+.tds-mode-light .tds-mode-variant-secondary {
+  --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-secondary);
+  --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-secondary);
 }
 
-.sdds-mode-dark {
-  --sdds-btn-primary-background: var(--sdds-blue-400);
-  --sdds-btn-primary-background-hover: var(--sdds-blue-500);
-  --sdds-btn-primary-background-active: var(--sdds-blue-300);
-  --sdds-btn-primary-background-focus: var(--sdds-blue-600);
-  --sdds-btn-primary-border-color-focus: var(--sdds-blue-400);
-  --sdds-btn-primary-outline-color-focus: var(--sdds-blue-400);
-  --sdds-btn-primary-background-disabled-primary: var(--sdds-grey-900);
-  --sdds-btn-primary-background-disabled-secondary: var(--sdds-grey-868);
-  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-disabled-primary);
-  --sdds-btn-primary-color-disabled: var(--sdds-grey-600);
+.tds-mode-dark {
+  --tds-btn-primary-background: var(--tds-blue-400);
+  --tds-btn-primary-background-hover: var(--tds-blue-500);
+  --tds-btn-primary-background-active: var(--tds-blue-300);
+  --tds-btn-primary-background-focus: var(--tds-blue-600);
+  --tds-btn-primary-border-color-focus: var(--tds-blue-400);
+  --tds-btn-primary-outline-color-focus: var(--tds-blue-400);
+  --tds-btn-primary-background-disabled-primary: var(--tds-grey-900);
+  --tds-btn-primary-background-disabled-secondary: var(--tds-grey-868);
+  --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-primary);
+  --tds-btn-primary-color-disabled: var(--tds-grey-600);
   /* ICON */
-  --sdds-btn-icon-primary-fill: var(--sdds-grey-50);
-  --sdds-btn-icon-primary-color: var(--sdds-grey-50);
-  --sdds-btn-secondary-background: transparent;
-  --sdds-btn-secondary-color: var(--sdds-white);
-  --sdds-btn-secondary-border-color: var(--sdds-white);
-  --sdds-btn-secondary-background-hover: var(--sdds-blue-500);
-  --sdds-btn-secondary-color-hover: var(--sdds-white);
-  --sdds-btn-secondary-border-color-hover: var(--sdds-blue-500);
-  --sdds-btn-secondary-background-active: transparent;
-  --sdds-btn-secondary-color-active: var(--sdds-white);
-  --sdds-btn-secondary-border-color-active: var(--sdds-white);
-  --sdds-btn-secondary-background-focus: transparent;
-  --sdds-btn-secondary-color-focus: var(--sdds-white);
-  --sdds-btn-secondary-border-color-focus: var(--sdds-blue-400);
-  --sdds-btn-secondary-outline-color-focus: var(--sdds-blue-400);
-  --sdds-btn-secondary-outline-color: var(--sdds-white);
-  --sdds-btn-secondary-background-disabled: transparent;
-  --sdds-btn-secondary-color-disabled: rgb(255 255 255 / 38%);
-  --sdds-btn-secondary-border-color-disabled: rgb(255 255 255 / 38%);
-  --sdds-btn-icon-secondary-color-focus: var(--sdds-white);
-  --sdds-btn-icon-secondary-fill-focus: var(--sdds-white);
+  --tds-btn-icon-primary-fill: var(--tds-grey-50);
+  --tds-btn-icon-primary-color: var(--tds-grey-50);
+  --tds-btn-secondary-background: transparent;
+  --tds-btn-secondary-color: var(--tds-white);
+  --tds-btn-secondary-border-color: var(--tds-white);
+  --tds-btn-secondary-background-hover: var(--tds-blue-500);
+  --tds-btn-secondary-color-hover: var(--tds-white);
+  --tds-btn-secondary-border-color-hover: var(--tds-blue-500);
+  --tds-btn-secondary-background-active: transparent;
+  --tds-btn-secondary-color-active: var(--tds-white);
+  --tds-btn-secondary-border-color-active: var(--tds-white);
+  --tds-btn-secondary-background-focus: transparent;
+  --tds-btn-secondary-color-focus: var(--tds-white);
+  --tds-btn-secondary-border-color-focus: var(--tds-blue-400);
+  --tds-btn-secondary-outline-color-focus: var(--tds-blue-400);
+  --tds-btn-secondary-outline-color: var(--tds-white);
+  --tds-btn-secondary-background-disabled: transparent;
+  --tds-btn-secondary-color-disabled: rgb(255 255 255 / 38%);
+  --tds-btn-secondary-border-color-disabled: rgb(255 255 255 / 38%);
+  --tds-btn-icon-secondary-color-focus: var(--tds-white);
+  --tds-btn-icon-secondary-fill-focus: var(--tds-white);
   /* ICON */
-  --sdds-btn-icon-secondary-fill: var(--sdds-grey-50);
-  --sdds-btn-icon-secondary-color: var(--sdds-grey-50);
-  --sdds-btn-ghost-background: transparent;
-  --sdds-btn-ghost-color: var(--sdds-white);
-  --sdds-btn-ghost-border-color: transparent;
-  --sdds-btn-ghost-background-hover: transparent;
-  --sdds-btn-ghost-color-hover: var(--sdds-white);
-  --sdds-btn-ghost-border-color-hover: rgb(255 255 255 / 41%);
-  --sdds-btn-ghost-outline-color-hover: rgb(255 255 255 / 41%);
-  --sdds-btn-ghost-background-active: transparent;
-  --sdds-btn-ghost-color-active: var(--sdds-white);
-  --sdds-btn-ghost-border-color-active: rgb(255 255 255 / 87%);
-  --sdds-btn-ghost-background-focus: transparent;
-  --sdds-btn-ghost-color-focus: var(--sdds-white);
-  --sdds-btn-ghost-border-color-focus: var(--sdds-blue-300);
-  --sdds-btn-ghost-outline-color-focus: var(--sdds-blue-300);
-  --sdds-btn-ghost-background-disabled: transparent;
-  --sdds-btn-ghost-color-disabled: rgb(255 255 255/ 38%);
-  --sdds-btn-ghost-border-color-disabled: transparent;
+  --tds-btn-icon-secondary-fill: var(--tds-grey-50);
+  --tds-btn-icon-secondary-color: var(--tds-grey-50);
+  --tds-btn-ghost-background: transparent;
+  --tds-btn-ghost-color: var(--tds-white);
+  --tds-btn-ghost-border-color: transparent;
+  --tds-btn-ghost-background-hover: transparent;
+  --tds-btn-ghost-color-hover: var(--tds-white);
+  --tds-btn-ghost-border-color-hover: rgb(255 255 255 / 41%);
+  --tds-btn-ghost-outline-color-hover: rgb(255 255 255 / 41%);
+  --tds-btn-ghost-background-active: transparent;
+  --tds-btn-ghost-color-active: var(--tds-white);
+  --tds-btn-ghost-border-color-active: rgb(255 255 255 / 87%);
+  --tds-btn-ghost-background-focus: transparent;
+  --tds-btn-ghost-color-focus: var(--tds-white);
+  --tds-btn-ghost-border-color-focus: var(--tds-blue-300);
+  --tds-btn-ghost-outline-color-focus: var(--tds-blue-300);
+  --tds-btn-ghost-background-disabled: transparent;
+  --tds-btn-ghost-color-disabled: rgb(255 255 255/ 38%);
+  --tds-btn-ghost-border-color-disabled: transparent;
   /* ICON */
-  --sdds-btn-icon-ghost-fill: var(--sdds-grey-50);
-  --sdds-btn-icon-ghost-color: var(--sdds-grey-50);
-  --sdds-btn-danger-background: var(--sdds-negative);
-  --sdds-btn-danger-color: var(--sdds-white);
-  --sdds-btn-danger-border-color: transparent;
-  --sdds-btn-danger-background-hover: var(--sdds-red-600);
-  --sdds-btn-danger-color-hover: var(--sdds-white);
-  --sdds-btn-danger-border-color-hover: transparent;
-  --sdds-btn-danger-background-active: var(--sdds-red-700);
-  --sdds-btn-danger-color-active: var(--sdds-white);
-  --sdds-btn-danger-border-color-active: transparent;
-  --sdds-btn-danger-background-focus: var(--sdds-red-400);
-  --sdds-btn-danger-color-focus: var(--sdds-white);
-  --sdds-btn-danger-border-color-focus: var(--sdds-red-400);
-  --sdds-btn-danger-outline-color-focus: var(--sdds-red-700);
-  --sdds-btn-danger-background-disabled-primary: var(--sdds-grey-900);
-  --sdds-btn-danger-background-disabled-secondary: var(--sdds-grey-868);
-  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-disabled-primary);
-  --sdds-btn-danger-color-disabled: rgb(255 255 255 / 38%);
-  --sdds-btn-danger-border-color-disabled: transparent;
+  --tds-btn-icon-ghost-fill: var(--tds-grey-50);
+  --tds-btn-icon-ghost-color: var(--tds-grey-50);
+  --tds-btn-danger-background: var(--tds-negative);
+  --tds-btn-danger-color: var(--tds-white);
+  --tds-btn-danger-border-color: transparent;
+  --tds-btn-danger-background-hover: var(--tds-red-600);
+  --tds-btn-danger-color-hover: var(--tds-white);
+  --tds-btn-danger-border-color-hover: transparent;
+  --tds-btn-danger-background-active: var(--tds-red-700);
+  --tds-btn-danger-color-active: var(--tds-white);
+  --tds-btn-danger-border-color-active: transparent;
+  --tds-btn-danger-background-focus: var(--tds-red-400);
+  --tds-btn-danger-color-focus: var(--tds-white);
+  --tds-btn-danger-border-color-focus: var(--tds-red-400);
+  --tds-btn-danger-outline-color-focus: var(--tds-red-700);
+  --tds-btn-danger-background-disabled-primary: var(--tds-grey-900);
+  --tds-btn-danger-background-disabled-secondary: var(--tds-grey-868);
+  --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-primary);
+  --tds-btn-danger-color-disabled: rgb(255 255 255 / 38%);
+  --tds-btn-danger-border-color-disabled: transparent;
   /* ICON */
-  --sdds-btn-icon-danger-fill: var(--sdds-white);
-  --sdds-btn-icon-danger-color: var(--sdds-white);
+  --tds-btn-icon-danger-fill: var(--tds-white);
+  --tds-btn-icon-danger-color: var(--tds-white);
 }
-.sdds-mode-dark .sdds-mode-variant-primary {
-  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-disabled-primary);
-  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-disabled-primary);
+.tds-mode-dark .tds-mode-variant-primary {
+  --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-primary);
+  --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-primary);
 }
-.sdds-mode-dark .sdds-mode-variant-secondary {
-  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-disabled-secondary);
-  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-disabled-secondary);
+.tds-mode-dark .tds-mode-variant-secondary {
+  --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-secondary);
+  --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-secondary);
 }
 
 button {
   box-sizing: border-box;
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
   display: inline-flex;
   align-items: center;
   border-radius: 4px;
@@ -199,7 +199,7 @@ button {
   text-decoration: none;
   cursor: pointer;
   height: 56px;
-  padding: var(--sdds-spacing-element-20);
+  padding: var(--tds-spacing-element-20);
   border: 1px solid;
 }
 button * {
@@ -212,50 +212,50 @@ button:focus {
   outline: none;
 }
 button:focus-visible {
-  outline: 2px solid var(--sdds-blue-400);
+  outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
 }
 button.xs {
-  padding: var(--sdds-spacing-element-4) var(--sdds-spacing-element-8);
+  padding: var(--tds-spacing-element-4) var(--tds-spacing-element-8);
   height: 24px;
   font-size: 12px;
   border-radius: 2px;
 }
 button.xs:focus-visible {
-  outline: 2px solid var(--sdds-blue-400);
+  outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
 }
 button.sm {
-  padding: var(--sdds-spacing-element-12);
+  padding: var(--tds-spacing-element-12);
   height: 40px;
 }
 button.sm.only-icon {
   padding: 11px;
 }
 button.sm:focus-visible {
-  outline: 2px solid var(--sdds-blue-400);
+  outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
 }
 button.md {
-  padding: var(--sdds-spacing-element-16);
+  padding: var(--tds-spacing-element-16);
   height: 48px;
 }
 button.md.only-icon {
   padding: 13px;
 }
 button.md:focus-visible {
-  outline: 2px solid var(--sdds-blue-400);
+  outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
 }
 button.lg {
-  padding: var(--sdds-spacing-element-20);
+  padding: var(--tds-spacing-element-20);
   height: 56px;
 }
 button.lg.only-icon {
   padding: 17px;
 }
 button.lg:focus-visible {
-  outline: 2px solid var(--sdds-blue-400);
+  outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
 }
 button.fullbleed {
@@ -264,262 +264,262 @@ button.fullbleed {
   justify-content: center;
 }
 button.primary {
-  background: var(--sdds-btn-primary-background);
-  border-color: var(--sdds-btn-primary-border-color);
-  color: var(--sdds-btn-primary-color);
-  outline-color: var(--sdds-btn-primary-outline-color);
+  background: var(--tds-btn-primary-background);
+  border-color: var(--tds-btn-primary-border-color);
+  color: var(--tds-btn-primary-color);
+  outline-color: var(--tds-btn-primary-outline-color);
 }
 button.primary .icon {
-  fill: var(--sdds-btn-icon-primary-fill);
-  color: var(--sdds-btn-icon-primary-fill);
-  fill: var(--sdds-btn-icon-primary-color);
-  color: var(--sdds-btn-icon-primary-color);
+  fill: var(--tds-btn-icon-primary-fill);
+  color: var(--tds-btn-icon-primary-fill);
+  fill: var(--tds-btn-icon-primary-color);
+  color: var(--tds-btn-icon-primary-color);
   font-size: 16px;
 }
 button.primary:hover {
-  background: var(--sdds-btn-primary-background-hover);
-  border-color: var(--sdds-btn-primary-border-color-hover);
-  color: var(--sdds-btn-primary-color-hover);
-  outline-color: var(--sdds-btn-primary-outline-color-hover);
+  background: var(--tds-btn-primary-background-hover);
+  border-color: var(--tds-btn-primary-border-color-hover);
+  color: var(--tds-btn-primary-color-hover);
+  outline-color: var(--tds-btn-primary-outline-color-hover);
 }
 button.primary:hover:not(.disabled) ::slotted([slot=icon]) {
-  fill: var(--sdds-btn-icon-primary-fill-hover);
-  color: var(--sdds-btn-icon-primary-fill-hover);
-  fill: var(--sdds-btn-icon-primary-color-hover);
-  color: var(--sdds-btn-icon-primary-color-hover);
+  fill: var(--tds-btn-icon-primary-fill-hover);
+  color: var(--tds-btn-icon-primary-fill-hover);
+  fill: var(--tds-btn-icon-primary-color-hover);
+  color: var(--tds-btn-icon-primary-color-hover);
 }
 button.primary:focus-visible {
-  background: var(--sdds-btn-primary-background-focus);
-  border-color: var(--sdds-btn-primary-border-color-focus);
-  color: var(--sdds-btn-primary-color-focus);
-  outline-color: var(--sdds-btn-primary-outline-color-focus);
+  background: var(--tds-btn-primary-background-focus);
+  border-color: var(--tds-btn-primary-border-color-focus);
+  color: var(--tds-btn-primary-color-focus);
+  outline-color: var(--tds-btn-primary-outline-color-focus);
 }
 button.primary:focus-visible ::slotted([slot=icon]) {
-  fill: var(--sdds-btn-icon-primary-fill-focus);
-  color: var(--sdds-btn-icon-primary-fill-focus);
-  fill: var(--sdds-btn-icon-primary-color-focus);
-  color: var(--sdds-btn-icon-primary-color-focus);
+  fill: var(--tds-btn-icon-primary-fill-focus);
+  color: var(--tds-btn-icon-primary-fill-focus);
+  fill: var(--tds-btn-icon-primary-color-focus);
+  color: var(--tds-btn-icon-primary-color-focus);
 }
 button.primary:active, button.primary.active {
-  background: var(--sdds-btn-primary-background-active);
-  border-color: var(--sdds-btn-primary-border-color-active);
-  color: var(--sdds-btn-primary-color-active);
-  outline-color: var(--sdds-btn-primary-outline-color-active);
+  background: var(--tds-btn-primary-background-active);
+  border-color: var(--tds-btn-primary-border-color-active);
+  color: var(--tds-btn-primary-color-active);
+  outline-color: var(--tds-btn-primary-outline-color-active);
 }
 button.primary.disabled, button.primary:disabled {
   cursor: not-allowed;
-  background: var(--sdds-btn-primary-background-disabled);
+  background: var(--tds-btn-primary-background-disabled);
   cursor: not-allowed;
-  border-color: var(--sdds-btn-primary-border-color-disabled);
+  border-color: var(--tds-btn-primary-border-color-disabled);
   cursor: not-allowed;
-  color: var(--sdds-btn-primary-color-disabled);
+  color: var(--tds-btn-primary-color-disabled);
   cursor: not-allowed;
-  outline-color: var(--sdds-btn-primary-outline-color-disabled);
+  outline-color: var(--tds-btn-primary-outline-color-disabled);
 }
 button.secondary {
-  background: var(--sdds-btn-secondary-background);
-  border-color: var(--sdds-btn-secondary-border-color);
-  color: var(--sdds-btn-secondary-color);
-  outline-color: var(--sdds-btn-secondary-outline-color);
+  background: var(--tds-btn-secondary-background);
+  border-color: var(--tds-btn-secondary-border-color);
+  color: var(--tds-btn-secondary-color);
+  outline-color: var(--tds-btn-secondary-outline-color);
 }
 button.secondary .icon {
-  fill: var(--sdds-btn-icon-secondary-fill);
-  color: var(--sdds-btn-icon-secondary-fill);
-  fill: var(--sdds-btn-icon-secondary-color);
-  color: var(--sdds-btn-icon-secondary-color);
+  fill: var(--tds-btn-icon-secondary-fill);
+  color: var(--tds-btn-icon-secondary-fill);
+  fill: var(--tds-btn-icon-secondary-color);
+  color: var(--tds-btn-icon-secondary-color);
   font-size: 16px;
 }
 button.secondary:hover {
-  background: var(--sdds-btn-secondary-background-hover);
-  border-color: var(--sdds-btn-secondary-border-color-hover);
-  color: var(--sdds-btn-secondary-color-hover);
-  outline-color: var(--sdds-btn-secondary-outline-color-hover);
+  background: var(--tds-btn-secondary-background-hover);
+  border-color: var(--tds-btn-secondary-border-color-hover);
+  color: var(--tds-btn-secondary-color-hover);
+  outline-color: var(--tds-btn-secondary-outline-color-hover);
 }
 button.secondary:hover:not(.disabled) ::slotted([slot=icon]) {
-  fill: var(--sdds-btn-icon-secondary-fill-hover);
-  color: var(--sdds-btn-icon-secondary-fill-hover);
-  fill: var(--sdds-btn-icon-secondary-color-hover);
-  color: var(--sdds-btn-icon-secondary-color-hover);
+  fill: var(--tds-btn-icon-secondary-fill-hover);
+  color: var(--tds-btn-icon-secondary-fill-hover);
+  fill: var(--tds-btn-icon-secondary-color-hover);
+  color: var(--tds-btn-icon-secondary-color-hover);
 }
 button.secondary:focus-visible {
-  background: var(--sdds-btn-secondary-background-focus);
-  border-color: var(--sdds-btn-secondary-border-color-focus);
-  color: var(--sdds-btn-secondary-color-focus);
-  outline-color: var(--sdds-btn-secondary-outline-color-focus);
+  background: var(--tds-btn-secondary-background-focus);
+  border-color: var(--tds-btn-secondary-border-color-focus);
+  color: var(--tds-btn-secondary-color-focus);
+  outline-color: var(--tds-btn-secondary-outline-color-focus);
 }
 button.secondary:focus-visible ::slotted([slot=icon]) {
-  fill: var(--sdds-btn-icon-secondary-fill-focus);
-  color: var(--sdds-btn-icon-secondary-fill-focus);
-  fill: var(--sdds-btn-icon-secondary-color-focus);
-  color: var(--sdds-btn-icon-secondary-color-focus);
+  fill: var(--tds-btn-icon-secondary-fill-focus);
+  color: var(--tds-btn-icon-secondary-fill-focus);
+  fill: var(--tds-btn-icon-secondary-color-focus);
+  color: var(--tds-btn-icon-secondary-color-focus);
 }
 button.secondary:active, button.secondary.active {
-  background: var(--sdds-btn-secondary-background-active);
-  border-color: var(--sdds-btn-secondary-border-color-active);
-  color: var(--sdds-btn-secondary-color-active);
-  outline-color: var(--sdds-btn-secondary-outline-color-active);
+  background: var(--tds-btn-secondary-background-active);
+  border-color: var(--tds-btn-secondary-border-color-active);
+  color: var(--tds-btn-secondary-color-active);
+  outline-color: var(--tds-btn-secondary-outline-color-active);
 }
 button.secondary.disabled, button.secondary:disabled {
   cursor: not-allowed;
-  background: var(--sdds-btn-secondary-background-disabled);
+  background: var(--tds-btn-secondary-background-disabled);
   cursor: not-allowed;
-  border-color: var(--sdds-btn-secondary-border-color-disabled);
+  border-color: var(--tds-btn-secondary-border-color-disabled);
   cursor: not-allowed;
-  color: var(--sdds-btn-secondary-color-disabled);
+  color: var(--tds-btn-secondary-color-disabled);
   cursor: not-allowed;
-  outline-color: var(--sdds-btn-secondary-outline-color-disabled);
+  outline-color: var(--tds-btn-secondary-outline-color-disabled);
 }
 button.ghost {
-  background: var(--sdds-btn-ghost-background);
-  border-color: var(--sdds-btn-ghost-border-color);
-  color: var(--sdds-btn-ghost-color);
-  outline-color: var(--sdds-btn-ghost-outline-color);
+  background: var(--tds-btn-ghost-background);
+  border-color: var(--tds-btn-ghost-border-color);
+  color: var(--tds-btn-ghost-color);
+  outline-color: var(--tds-btn-ghost-outline-color);
 }
 button.ghost .icon {
-  fill: var(--sdds-btn-icon-ghost-fill);
-  color: var(--sdds-btn-icon-ghost-fill);
-  fill: var(--sdds-btn-icon-ghost-color);
-  color: var(--sdds-btn-icon-ghost-color);
+  fill: var(--tds-btn-icon-ghost-fill);
+  color: var(--tds-btn-icon-ghost-fill);
+  fill: var(--tds-btn-icon-ghost-color);
+  color: var(--tds-btn-icon-ghost-color);
   font-size: 16px;
 }
 button.ghost:hover {
-  background: var(--sdds-btn-ghost-background-hover);
-  border-color: var(--sdds-btn-ghost-border-color-hover);
-  color: var(--sdds-btn-ghost-color-hover);
-  outline-color: var(--sdds-btn-ghost-outline-color-hover);
+  background: var(--tds-btn-ghost-background-hover);
+  border-color: var(--tds-btn-ghost-border-color-hover);
+  color: var(--tds-btn-ghost-color-hover);
+  outline-color: var(--tds-btn-ghost-outline-color-hover);
 }
 button.ghost:hover:not(.disabled) ::slotted([slot=icon]) {
-  fill: var(--sdds-btn-icon-ghost-fill-hover);
-  color: var(--sdds-btn-icon-ghost-fill-hover);
-  fill: var(--sdds-btn-icon-ghost-color-hover);
-  color: var(--sdds-btn-icon-ghost-color-hover);
+  fill: var(--tds-btn-icon-ghost-fill-hover);
+  color: var(--tds-btn-icon-ghost-fill-hover);
+  fill: var(--tds-btn-icon-ghost-color-hover);
+  color: var(--tds-btn-icon-ghost-color-hover);
 }
 button.ghost:focus-visible {
-  background: var(--sdds-btn-ghost-background-focus);
-  border-color: var(--sdds-btn-ghost-border-color-focus);
-  color: var(--sdds-btn-ghost-color-focus);
-  outline-color: var(--sdds-btn-ghost-outline-color-focus);
+  background: var(--tds-btn-ghost-background-focus);
+  border-color: var(--tds-btn-ghost-border-color-focus);
+  color: var(--tds-btn-ghost-color-focus);
+  outline-color: var(--tds-btn-ghost-outline-color-focus);
 }
 button.ghost:focus-visible ::slotted([slot=icon]) {
-  fill: var(--sdds-btn-icon-ghost-fill-focus);
-  color: var(--sdds-btn-icon-ghost-fill-focus);
-  fill: var(--sdds-btn-icon-ghost-color-focus);
-  color: var(--sdds-btn-icon-ghost-color-focus);
+  fill: var(--tds-btn-icon-ghost-fill-focus);
+  color: var(--tds-btn-icon-ghost-fill-focus);
+  fill: var(--tds-btn-icon-ghost-color-focus);
+  color: var(--tds-btn-icon-ghost-color-focus);
 }
 button.ghost:active, button.ghost.active {
-  background: var(--sdds-btn-ghost-background-active);
-  border-color: var(--sdds-btn-ghost-border-color-active);
-  color: var(--sdds-btn-ghost-color-active);
-  outline-color: var(--sdds-btn-ghost-outline-color-active);
+  background: var(--tds-btn-ghost-background-active);
+  border-color: var(--tds-btn-ghost-border-color-active);
+  color: var(--tds-btn-ghost-color-active);
+  outline-color: var(--tds-btn-ghost-outline-color-active);
 }
 button.ghost.disabled, button.ghost:disabled {
   cursor: not-allowed;
-  background: var(--sdds-btn-ghost-background-disabled);
+  background: var(--tds-btn-ghost-background-disabled);
   cursor: not-allowed;
-  border-color: var(--sdds-btn-ghost-border-color-disabled);
+  border-color: var(--tds-btn-ghost-border-color-disabled);
   cursor: not-allowed;
-  color: var(--sdds-btn-ghost-color-disabled);
+  color: var(--tds-btn-ghost-color-disabled);
   cursor: not-allowed;
-  outline-color: var(--sdds-btn-ghost-outline-color-disabled);
+  outline-color: var(--tds-btn-ghost-outline-color-disabled);
 }
 button.danger {
-  background: var(--sdds-btn-danger-background);
-  border-color: var(--sdds-btn-danger-border-color);
-  color: var(--sdds-btn-danger-color);
-  outline-color: var(--sdds-btn-danger-outline-color);
+  background: var(--tds-btn-danger-background);
+  border-color: var(--tds-btn-danger-border-color);
+  color: var(--tds-btn-danger-color);
+  outline-color: var(--tds-btn-danger-outline-color);
 }
 button.danger .icon {
-  fill: var(--sdds-btn-icon-danger-fill);
-  color: var(--sdds-btn-icon-danger-fill);
-  fill: var(--sdds-btn-icon-danger-color);
-  color: var(--sdds-btn-icon-danger-color);
+  fill: var(--tds-btn-icon-danger-fill);
+  color: var(--tds-btn-icon-danger-fill);
+  fill: var(--tds-btn-icon-danger-color);
+  color: var(--tds-btn-icon-danger-color);
   font-size: 16px;
 }
 button.danger:hover {
-  background: var(--sdds-btn-danger-background-hover);
-  border-color: var(--sdds-btn-danger-border-color-hover);
-  color: var(--sdds-btn-danger-color-hover);
-  outline-color: var(--sdds-btn-danger-outline-color-hover);
+  background: var(--tds-btn-danger-background-hover);
+  border-color: var(--tds-btn-danger-border-color-hover);
+  color: var(--tds-btn-danger-color-hover);
+  outline-color: var(--tds-btn-danger-outline-color-hover);
 }
 button.danger:hover:not(.disabled) ::slotted([slot=icon]) {
-  fill: var(--sdds-btn-icon-danger-fill-hover);
-  color: var(--sdds-btn-icon-danger-fill-hover);
-  fill: var(--sdds-btn-icon-danger-color-hover);
-  color: var(--sdds-btn-icon-danger-color-hover);
+  fill: var(--tds-btn-icon-danger-fill-hover);
+  color: var(--tds-btn-icon-danger-fill-hover);
+  fill: var(--tds-btn-icon-danger-color-hover);
+  color: var(--tds-btn-icon-danger-color-hover);
 }
 button.danger:focus-visible {
-  background: var(--sdds-btn-danger-background-focus);
-  border-color: var(--sdds-btn-danger-border-color-focus);
-  color: var(--sdds-btn-danger-color-focus);
-  outline-color: var(--sdds-btn-danger-outline-color-focus);
+  background: var(--tds-btn-danger-background-focus);
+  border-color: var(--tds-btn-danger-border-color-focus);
+  color: var(--tds-btn-danger-color-focus);
+  outline-color: var(--tds-btn-danger-outline-color-focus);
 }
 button.danger:focus-visible ::slotted([slot=icon]) {
-  fill: var(--sdds-btn-icon-danger-fill-focus);
-  color: var(--sdds-btn-icon-danger-fill-focus);
-  fill: var(--sdds-btn-icon-danger-color-focus);
-  color: var(--sdds-btn-icon-danger-color-focus);
+  fill: var(--tds-btn-icon-danger-fill-focus);
+  color: var(--tds-btn-icon-danger-fill-focus);
+  fill: var(--tds-btn-icon-danger-color-focus);
+  color: var(--tds-btn-icon-danger-color-focus);
 }
 button.danger:active, button.danger.active {
-  background: var(--sdds-btn-danger-background-active);
-  border-color: var(--sdds-btn-danger-border-color-active);
-  color: var(--sdds-btn-danger-color-active);
-  outline-color: var(--sdds-btn-danger-outline-color-active);
+  background: var(--tds-btn-danger-background-active);
+  border-color: var(--tds-btn-danger-border-color-active);
+  color: var(--tds-btn-danger-color-active);
+  outline-color: var(--tds-btn-danger-outline-color-active);
 }
 button.danger.disabled, button.danger:disabled {
   cursor: not-allowed;
-  background: var(--sdds-btn-danger-background-disabled);
+  background: var(--tds-btn-danger-background-disabled);
   cursor: not-allowed;
-  border-color: var(--sdds-btn-danger-border-color-disabled);
+  border-color: var(--tds-btn-danger-border-color-disabled);
   cursor: not-allowed;
-  color: var(--sdds-btn-danger-color-disabled);
+  color: var(--tds-btn-danger-color-disabled);
   cursor: not-allowed;
-  outline-color: var(--sdds-btn-danger-outline-color-disabled);
+  outline-color: var(--tds-btn-danger-outline-color-disabled);
 }
 
-:host(sdds-button) {
+:host(tds-button) {
   display: inline-flex;
   align-items: center;
 }
-:host(sdds-button) ::slotted([slot=icon]) {
-  width: var(--sdds-spacing-element-20);
-  height: var(--sdds-spacing-element-20);
+:host(tds-button) ::slotted([slot=icon]) {
+  width: var(--tds-spacing-element-20);
+  height: var(--tds-spacing-element-20);
 }
-:host(sdds-button) .sm ::slotted([slot=icon]) {
-  width: var(--sdds-spacing-element-16);
-  height: var(--sdds-spacing-element-16);
+:host(tds-button) .sm ::slotted([slot=icon]) {
+  width: var(--tds-spacing-element-16);
+  height: var(--tds-spacing-element-16);
 }
 
-:host(sdds-button[fullbleed]) {
+:host(tds-button[fullbleed]) {
   width: 100%;
   justify-content: center;
 }
 
-:host(sdds-button[only-icon]) .sm {
+:host(tds-button[only-icon]) .sm {
   padding: 11px;
 }
-:host(sdds-button[only-icon]) .md {
+:host(tds-button[only-icon]) .md {
   padding: 13px;
 }
-:host(sdds-button[only-icon]) .lg {
+:host(tds-button[only-icon]) .lg {
   padding: 17px;
 }
 
-:host(sdds-button:not([only-icon])) {
+:host(tds-button:not([only-icon])) {
   display: inline-flex;
   align-items: center;
 }
-:host(sdds-button:not([only-icon])) .sm ::slotted([slot=icon]) {
-  margin-left: var(--sdds-spacing-element-12);
-  width: var(--sdds-spacing-element-16);
-  height: var(--sdds-spacing-element-16);
+:host(tds-button:not([only-icon])) .sm ::slotted([slot=icon]) {
+  margin-left: var(--tds-spacing-element-12);
+  width: var(--tds-spacing-element-16);
+  height: var(--tds-spacing-element-16);
 }
-:host(sdds-button:not([only-icon])) .md ::slotted([slot=icon]) {
-  margin-left: var(--sdds-spacing-element-16);
-  width: var(--sdds-spacing-element-20);
-  height: var(--sdds-spacing-element-20);
+:host(tds-button:not([only-icon])) .md ::slotted([slot=icon]) {
+  margin-left: var(--tds-spacing-element-16);
+  width: var(--tds-spacing-element-20);
+  height: var(--tds-spacing-element-20);
 }
-:host(sdds-button:not([only-icon])) .lg ::slotted([slot=icon]) {
-  margin-left: var(--sdds-spacing-element-20);
-  width: var(--sdds-spacing-element-20);
-  height: var(--sdds-spacing-element-20);
+:host(tds-button:not([only-icon])) .lg ::slotted([slot=icon]) {
+  margin-left: var(--tds-spacing-element-20);
+  width: var(--tds-spacing-element-20);
+  height: var(--tds-spacing-element-20);
 }