@scania/tegel-lite 0.0.1-beta.7 → 0.0.1-beta.9

package/dist/components.css

@@ -9,7 +9,7 @@
  * <link rel="stylesheet" href="node_modules/@scania/tegel-lite/dist/scania-variables.css">
  * <link rel="stylesheet" href="node_modules/@scania/tegel-lite/dist/traton-variables.css">
  * <link rel="stylesheet" href="node_modules/@scania/tegel-lite/dist/global.css">
- * <link rel="stylesheet" href="node_modules/@scania/tegel-lite/dist/all.css">
+ * <link rel="stylesheet" href="node_modules/@scania/tegel-lite/dist/components.css">
  */
 .tl-accordion {
   /* Border & Background */
@@ -604,25 +604,6 @@
   cursor: not-allowed;
 }
 
-/**
- * Do not edit directly, this file was auto-generated.
- */
-.tl-button,
-tds-button,
-.tds-mode-light tds-button {
-  --component-button-primary-text: var(--color-brand-neutral-white);
-}
-
-.scania .tds-mode-dark tds-button,
-.scania .tds-mode-dark .tl-button {
-  --component-button-primary-text: var(--color-brand-neutral-white);
-}
-
-.tds-mode-dark tds-button,
-.tds-mode-dark .tl-button {
-  --component-button-primary-text: var(--color-brand-neutral-black);
-}
-
 .tl-button {
   --button-transparent: transparent;
   --button-white: var(--color-brand-neutral-white);
@@ -2190,10 +2171,6 @@ body {
   background-color: var(--dropdown-disabled);
 }
 
-.tl-dropdown:has(.tl-dropdown__select:disabled)::after {
-  background-color: var(--dropdown-disabled);
-}
-
 .tl-dropdown--lg:not(.tl-dropdown--label-inside):has(.tl-dropdown__select):not(:has(.tl-dropdown__helper))::after {
   content: "";
   position: absolute;
@@ -2746,9 +2723,6 @@ body {
   border-color: transparent;
 }
 
-/*
-  Contains spacing variables for the layout
-*/
 .tl-footer {
   --footer-top-background-primary: var(--color-background-layer-01);
   --footer-top-background-secondary: var(--color-background-base);
@@ -3018,114 +2992,9 @@ body {
     background-position: right;
   }
 }
-/**
- * Do not edit directly, this file was auto-generated.
- */
-.scania tds-header,
-.scania .tl-header {
-  /* State & interaction colors */
-  --component-header-color-background-open: var(--color-foreground-border-accent-focus);
-  --component-header-color-foreground-selected: var(--color-foreground-icon-strong);
-  --component-header-dropdown-item-background: var(--color-background-layer-02);
-  --component-header-avatar-item-background: var(--color-background-layer-02);
-  --component-header-app-launcher-meny-background: var(--color-background-layer-02);
-  /* Sizing & spacing */
-  --component-header-brand-logo-size: 30px;
-  --component-header-space-profile-padding: 16px;
-  --component-header-item-image-size: 34px;
-  --component-header-item-image-left: 10px;
-  --component-header-item-width: none;
-  --component-header-item-border-right: 1px solid var(--header-basic-element-border);
-  /* Borders */
-  --component-header-border: none;
-  /* Typography */
-  --component-header-font-family-headline: var(--scania-font-family-display);
-  --component-header-font-weight: var(--scania-font-weight-regular);
-  --component-header-text-transform: none;
-}
-.scania {
-  /* ── Light-mode overrides ───────────────────── */
-}
-.scania .tds-mode-light tds-header,
-.scania .tds-mode-light .tl-header {
-  --component-header-color-background: var(--color-brand-primary-800);
-  --component-header-color-foreground-strong: var(--color-foreground-icon-inverse-strong);
-  --component-header-color-background-hover: var(--color-brand-primary-700);
-  --component-header-color-background-border: var(--color-brand-primary-700);
-  --component-header-color-background-pressed: var(--color-brand-neutral-white);
-  --component-header-color-background-selected: var(--color-brand-primary-700);
-}
-.scania {
-  /* ── Dark-mode overrides ───────────────────── */
-}
-.scania .tds-mode-dark tds-header,
-.scania .tds-mode-dark .tl-header {
-  --component-header-color-background: var(--color-brand-primary-900);
-  --component-header-color-foreground-strong: var(--color-foreground-icon-strong);
-  --component-header-color-background-hover: var(--color-brand-primary-800);
-  --component-header-color-background-border: var(--color-brand-primary-800);
-  --component-header-color-background-pressed: var(--color-brand-primary-800);
-  --component-header-color-background-selected: var(--color-brand-primary-800);
-}
-
-.traton tds-header,
-.traton .tl-header {
-  /* Base colors */
-  --component-header-color-background: var(--color-background-base);
-  --component-header-color-background-hover: var(--color-background-layer-01);
-  --component-header-color-background-open: transparent;
-  --component-header-color-foreground-strong: var(--color-foreground-icon-strong);
-  --component-header-color-background-border: var(--traton-color-transparent-invisible-light);
-  --component-header-color-background-pressed: var(--color-background-base);
-  --component-header-color-foreground-selected: var(--color-foreground-icon-strong);
-  /* Dropdown & launcher */
-  --component-header-dropdown-item-background: var(--color-background-layer-01);
-  --component-header-avatar-item-background: var(--color-background-layer-01);
-  --component-header-app-launcher-meny-background: var(--color-background-layer-01);
-  /* Sizing & spacing */
-  --component-header-brand-logo-size: 106px;
-  --component-header-space-profile-padding: 20px;
-  --component-header-item-image-size: 24px;
-  --component-header-item-image-left: 15px;
-  --component-header-item-width: 122px;
-  --component-header-item-border-right: none;
-  /* Borders */
-  --component-header-border: 2px solid var(--header-nav-item-border-active);
-  /* Typography */
-  --component-header-font-family-headline: var(--traton-font-family-display);
-  --component-header-font-weight: var(--traton-font-weight-medium);
-  --component-header-text-transform: uppercase;
-}
-.traton {
-  /* ── Light-mode overrides ───────────────────── */
-}
-.traton .tds-mode-light tds-header,
-.traton .tds-mode-light .tl-header {
-  --component-header-color-background-selected: var(--color-background-layer-01);
-}
-.traton {
-  /* ── Dark-mode overrides ───────────────────── */
-}
-.traton .tds-mode-dark tds-header,
-.traton .tds-mode-dark .tl-header {
-  --component-header-color-background-selected: var(--color-background-surface-100);
-}
-
-/*
-  Tegel Lite specific overrides
-  Keep this in last to ensure it has the highest specificity for Tegel Lite
-*/
-.scania .tl-header {
-  --component-header-item-width: 30px;
-  --component-header-dropdown-box-shadow: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);
-}
-
-.traton .tl-header {
-  --component-header-dropdown-box-shadow: none;
-}
-
 .tl-header {
-  /* Base text */
+  /* Base background & text */
+  --header-background: var(--component-header-color-background);
   --header-nav-item: var(--component-header-color-foreground-strong);
   /* Nav-item states */
   --header-nav-item-background-hover: var(--color-background-surface-100);
@@ -3171,45 +3040,25 @@ body {
   --header-dropdown-box-shadow: var(--component-header-dropdown-box-shadow);
 }
 
-.scania {
-  /* Dark mode - override with dark colors */
-}
-.scania .tds-mode-dark .tl-header {
-  --header-background: var(--component-header-color-background);
-}
-.scania {
-  /* Default .tl-header (works for both light mode and no mode) */
-}
 .scania .tl-header {
   /* Brand logo */
   --header-logotype-local: var(--tds-background-image-scania-symbol-svg-local);
   --header-logotype-cdn: var(--tds-background-image-scania-symbol-svg);
   --component-header-space-profile-padding: 16px;
-  /* Background defaults to light mode */
-  --header-background: var(--component-header-color-background);
 }
 
 .traton .tds-mode-dark .tl-header {
-  /* Brand logo - White for dark mode */
+  /* Brand logo */
   --header-logotype-local: var(--traton-logotype-white-svg-local);
   --header-logotype-cdn: var(--traton-logotype-white-svg);
-  /* Background */
-  --header-background: var(--component-header-color-background);
 }
 .traton .tds-mode-light .tl-header {
-  /* Brand logo - Black for light mode */
+  /* Brand logo */
   --header-logotype-local: var(--traton-logotype-black-svg-local);
   --header-logotype-cdn: var(--traton-logotype-black-svg);
-  /* Background */
-  --header-background: var(--component-header-color-background);
 }
 .traton .tl-header {
-  /* Brand logo - Black as default (for no mode specified) */
-  --header-logotype-local: var(--traton-logotype-black-svg-local);
-  --header-logotype-cdn: var(--traton-logotype-black-svg);
   --component-header-space-profile-padding: 20px;
-  /* Background defaults to light mode */
-  --header-background: var(--component-header-color-background);
 }
 
 /* Header Elements */
@@ -5892,6 +5741,13 @@ body {
   --side-menu-single-item-height: 68px;
   --side-menu-subnav-border-radius: 0;
   --side-menu-subnav-box-shadow: var(--tds-nav-dropdown-menu-box);
+  --side-menu-text-item-font-family: 'Scania Sans Semi Condensed', arial, 'Helvetica Neue';
+  --side-menu-text-item-font-size: 14px;
+  --side-menu-text-item-font-weight: 700;
+  --side-menu-text-item-line-height: 16px;
+  --side-menu-text-item-letter-spacing: -0.14px;
+  --side-menu-sub-item-with-icon: 56px;
+  --side-menu-sub-item-with-user-image: 72px;
 }
 
 .traton .tl-side-menu {
@@ -5908,6 +5764,13 @@ body {
   --side-menu-single-item-height: 40px;
   --side-menu-subnav-border-radius: 4px;
   --side-menu-subnav-box-shadow: none;
+  --side-menu-text-item-font-family: 'TRATON Type Text';
+  --side-menu-text-item-font-size: 14px;
+  --side-menu-text-item-font-weight: 500;
+  --side-menu-text-item-line-height: 18px;
+  --side-menu-text-item-letter-spacing: 0;
+  --side-menu-sub-item-with-icon: 38px;
+  --side-menu-sub-item-with-user-image: 46px;
 }
 
 .tl-side-menu--collapsed {
@@ -5938,6 +5801,11 @@ body {
   cursor: pointer;
   position: relative;
   border-radius: var(--component-side-menu-radius-corner);
+  font-family: var(--side-menu-text-item-font-family);
+  font-size: var(--side-menu-text-item-font-size);
+  font-weight: var(--side-menu-text-item-font-weight);
+  line-height: var(--side-menu-text-item-line-height);
+  letter-spacing: var(--side-menu-text-item-letter-spacing);
 }
 .tl-side-menu__item:focus-visible {
   outline: 2px solid var(--color-foreground-border-accent-focus);
@@ -5973,6 +5841,11 @@ body {
 .tl-side-menu__dropdown {
   display: flex;
   flex-direction: column;
+  font-family: var(--side-menu-text-item-font-family);
+  font-size: var(--side-menu-text-item-font-size);
+  font-weight: var(--side-menu-text-item-font-weight);
+  line-height: var(--side-menu-text-item-line-height);
+  letter-spacing: var(--side-menu-text-item-letter-spacing);
 }
 .tl-side-menu__dropdown .tl-side-menu__item::after {
   content: "";
@@ -6033,13 +5906,14 @@ body {
   color: var(--side-menu-dropdown-list-item-color);
   border: none;
   border-radius: var(--component-side-menu-radius-corner);
-  font-family: var(--text-component-text-01-font-family);
-  font-size: var(--text-component-text-01-font-size);
-  font-weight: var(--text-component-text-01-font-weight);
-  line-height: var(--text-component-text-01-line-height);
-  letter-spacing: var(--text-component-text-01-letter-spacing);
   position: relative;
   cursor: pointer;
+  font-family: var(--body-02-font-family);
+  font-size: var(--body-02-font-size);
+  line-height: var(--body-02-line-height);
+  font-weight: var(--body-02-font-weight);
+  letter-spacing: var(--body-02-letter-spacing);
+  text-transform: var(--body-02-text-transform);
 }
 .tl-side-menu__dropdown-item:hover {
   background-color: var(--side-menu-dropdown-list-item-custom-background-hover);
@@ -6075,10 +5949,23 @@ body {
   border-radius: var(--component-side-menu-radius-corner) 0 0 var(--component-side-menu-radius-corner);
 }
 
+.tl-side-menu__dropdown:has(.tl-side-menu__item .tl-icon) .tl-side-menu__dropdown-item {
+  padding-left: var(--side-menu-sub-item-with-icon);
+}
+
+.tl-side-menu__dropdown:has(.tl-side-menu__item .tl-side-menu__user .tl-side-menu__user-image) .tl-side-menu__dropdown-item {
+  padding-left: var(--side-menu-sub-item-with-user-image);
+}
+
 .tl-side-menu__user {
   display: flex;
   align-items: center;
   gap: var(--component-side-menu-space-sub-menu-item-profile-gap);
+  font-family: var(--side-menu-text-item-font-family);
+  font-size: var(--side-menu-text-item-font-size);
+  font-weight: var(--side-menu-text-item-font-weight);
+  line-height: var(--side-menu-text-item-line-height);
+  letter-spacing: var(--side-menu-text-item-letter-spacing);
 }
 
 .tl-side-menu__user-image {
@@ -6373,2444 +6260,2246 @@ body {
   --slider-border-radius: 4px;
 }
 
-.tl-slider {
-  box-sizing: border-box;
-}
-.tl-slider * {
-  box-sizing: border-box;
-}
-.tl-slider {
-  width: 100%;
+.tl-text-field {
+  --text-field-background: var(--color-background-layer-01);
+  --text-field-text: var(--color-foreground-text-strong);
+  --text-field-placeholder: var(--color-foreground-text-subtle);
+  --text-field-affix: var(--color-foreground-text-defined);
+  --text-field-label: var(--color-foreground-text-strong);
+  --text-field-label-inside: var(--color-foreground-text-strong);
+  --text-field-label-inside-left: 16px;
+  --text-field-affix-width-icon: 35px;
+  --text-field-affix-width-text: 8px;
+  --text-field-border-bottom-readonly: var(--color-foreground-border-strong);
+  --text-field-helper: var(--color-foreground-text-defined);
+  --text-field-error: var(--color-system-danger-default);
+  --text-field-affix-error: var(--color-foreground-text-defined);
+  --text-field-background-disabled: var(--color-background-layer-01);
+  --text-field-text-disabled: var(--color-foreground-text-disabled);
+  --text-field-placeholder-disabled: var(--color-foreground-text-disabled);
+  --text-field-label-disabled: var(--color-foreground-text-disabled);
+  --text-field-affix-disabled: var(--color-foreground-text-disabled);
+  --text-field-textcounter: var(--color-foreground-text-defined);
 }
-.tl-slider--disabled {
-  cursor: not-allowed;
-  pointer-events: none;
+.tl-text-field--primary {
+  --text-field-background: var(--color-background-layer-01);
+  --text-field-background-disabled: var(--color-background-layer-01);
 }
-.tl-slider--read-only {
-  pointer-events: none;
+.tl-text-field--secondary {
+  --text-field-background: var(--color-background-layer-02);
+  --text-field-background-disabled: var(--color-background-layer-02);
 }
 
-.tl-slider__label {
-  font-family: var(--detail-05-font-family);
-  font-size: var(--detail-05-font-size);
-  line-height: var(--detail-05-line-height);
-  font-weight: var(--detail-05-font-weight);
-  letter-spacing: var(--detail-05-letter-spacing);
-  text-transform: var(--detail-05-text-transform);
-  user-select: none;
-  color: var(--slider-label);
-  display: block;
-  margin-bottom: 24px;
-  margin-left: -2px;
-}
-.tl-slider:has(.tl-slider__value-divider-label) .tl-slider__label {
-  margin-bottom: 44px;
-}
-.tl-slider:has(.tl-slider__control-minus, .tl-slider__control-plus) .tl-slider__label {
-  margin-bottom: 2px;
-  padding-left: 11px;
-  margin-left: 0;
-}
-.tl-slider:has(.tl-slider__control-minus, .tl-slider__control-plus):has(.tl-slider__value-divider-label) .tl-slider__label {
-  margin-bottom: 20px;
-  padding-left: 11px;
-  margin-left: 0;
-}
-.tl-slider:has(.tl-slider__input-wrapper) .tl-slider__label {
-  margin-bottom: 2px;
-  margin-left: 0;
+.tl-text-field,
+.scania .tl-text-field {
+  --text-field-border-radius: 4px 4px 0 0;
+  --text-field-box-shadow: 0 -1px 0 0 var(--color-foreground-border-soft);
+  --text-field-box-shadow-hover: 0 -1px 0 0 var(--color-foreground-border-strong);
+  --text-field-box-shadow-focus: 0 -2px 0 0 var(--color-foreground-border-accent-focus);
+  --text-field-box-shadow-error: 0 -1px 0 0 var(--color-system-danger-default);
+  --text-field-box-shadow-error-hover: 0 -1px 0 0 var(--color-system-danger-default);
+  --text-field-box-shadow-error-focus: 0 -2px 0 0 var(--color-system-danger-default);
+  --text-field-box-shadow-success: 0 -1px 0 0 var(--color-foreground-border-strong);
+  --text-field-bar-focus: var(--color-foreground-border-accent-focus);
+  --text-field-bar-error: var(--color-system-danger-default);
+  --text-field-focus-outline: none;
+  --text-field-focus-outline-error: none;
+  --text-field-focus-outline-offset: 0;
 }
-.tl-slider--disabled .tl-slider__label {
-  color: var(--slider-disabled-text);
+
+.traton .tl-text-field {
+  --text-field-border-radius: 4px 4px 4px 4px;
+  --text-field-box-shadow: 0 0 0 1px var(--color-foreground-border-soft);
+  --text-field-box-shadow-hover: 0 0 0 1px var(--color-foreground-border-strong);
+  --text-field-box-shadow-focus: 0 0 0 2px var(--color-foreground-border-accent-focus);
+  --text-field-box-shadow-success: 0 0 0 1px var(--color-foreground-border-strong);
+  --text-field-box-shadow-error: 0 0 0 1px var(--color-system-danger-default);
+  --text-field-box-shadow-error-hover: 0 0 0 1px var(--color-system-danger-default);
+  --text-field-box-shadow-error-focus: 0 0 0 2px var(--color-system-danger-default);
+  --text-field-focus-outline: 2px solid var(--color-foreground-border-accent-focus);
+  --text-field-focus-outline-error: 2px solid var(--color-system-danger-default);
+  --text-field-focus-outline-offset: 0;
+  --text-field-bar-focus: transparent;
+  --text-field-bar-error: transparent;
 }
 
-.tl-slider__track-wrapper {
+.tl-text-field {
+  display: block;
   position: relative;
-  display: flex;
-  align-items: center;
-  gap: 5px;
+  width: 100%;
+  min-width: 208px;
+  height: 56px;
+  padding-bottom: 1px;
+  border-radius: var(--text-field-border-radius);
+  box-sizing: border-box;
 }
-.tl-slider__track-wrapper:has(.tl-slider__input-wrapper) {
-  gap: 16px;
-  align-items: center;
-  height: 41px;
+.tl-text-field--no-min-width {
+  min-width: auto;
 }
-
-.tl-slider__control-minus,
-.tl-slider__control-plus {
-  flex-shrink: 0;
-  border: none !important;
+.tl-text-field--lg {
+  height: 56px;
 }
-
-.tl-slider__track {
-  position: relative;
-  flex: 1;
-  min-height: 2px;
-  background-color: var(--slider-track);
-  border-radius: var(--slider-border-radius);
+.tl-text-field--md {
+  height: 48px;
 }
-.tl-slider__track-wrapper:has(.tl-slider__input-wrapper) .tl-slider__track {
-  height: 2px;
-  align-self: center;
+.tl-text-field--sm {
+  height: 40px;
 }
-.tl-slider__track::after {
+.tl-text-field:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)):not(.tl-text-field--hide-readonly-icon)::before {
   content: "";
   position: absolute;
-  left: 0;
-  right: 0;
-  top: -10px;
-  bottom: -10px;
-  cursor: pointer;
-  z-index: 0;
-}
-.tl-slider__track:focus {
-  outline: 0;
-}
-.tl-slider__track:focus .tl-slider__thumb-inner {
-  width: 24px;
-  height: 24px;
-}
-.tl-slider__track:focus .tl-slider__thumb-inner::before {
-  display: block;
-  opacity: 0.08;
-}
-.tl-slider__track:focus-within .tl-slider__thumb-inner {
-  outline: 2px solid var(--slider-input-focused);
-  box-shadow: 0 0 0 1px var(--color-background-layer-01);
-  outline-offset: 1px;
+  top: 50%;
+  right: 16px;
+  width: 20px;
+  height: 20px;
+  background-color: var(--text-field-text);
+  mask-image: var(--icon-edit_inactive-svg);
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  transform: translateY(-50%);
   z-index: 1;
 }
-.tl-slider--disabled .tl-slider__track {
-  cursor: not-allowed;
-  background-color: var(--slider-disabled);
+.tl-text-field:not(.tl-text-field--label-inside):has(.tl-text-field__label):has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)):not(.tl-text-field--hide-readonly-icon)::before {
+  top: calc(50% + 24px);
 }
-.tl-slider--disabled .tl-slider__track::after {
+.tl-text-field:has(.tl-text-field__input:disabled) {
   cursor: not-allowed;
 }
-
-.tl-slider__value {
-  font-family: var(--detail-02-font-family);
-  font-size: var(--detail-02-font-size);
-  line-height: var(--detail-02-line-height);
-  font-weight: var(--detail-02-font-weight);
-  letter-spacing: var(--detail-02-letter-spacing);
-  text-transform: var(--detail-02-text-transform);
-  user-select: none;
-  color: var(--slider-input-value);
-  flex-shrink: 0;
-  align-self: center;
+.tl-text-field .tl-icon {
+  background-color: var(--text-field-affix);
 }
-.tl-slider--disabled .tl-slider__value {
-  color: var(--slider-disabled-text);
+:has(.tl-text-field__input:disabled) .tl-text-field .tl-icon {
+  background-color: var(--text-field-affix-disabled);
 }
 
-.tl-slider__input-wrapper {
-  flex-shrink: 0;
-  width: auto !important;
-  height: auto;
-  min-width: auto !important;
-  margin-left: 0;
-  align-self: center;
-}
-.tl-slider__input-wrapper.tl-text-field--readonly:not(.tl-text-field--disabled)::before {
-  width: 16px;
-  height: 16px;
-  right: 16px;
-  top: 50%;
-}
-
-.tl-slider__input-wrapper .tl-slider__input-field {
-  width: var(--slider-input-width, 56px);
-  padding: 12px;
-  text-align: center;
-  appearance: textfield;
-}
-.tl-slider__input-wrapper .tl-slider__input-field--decimal {
-  width: 56px;
-}
-.tl-slider__input-wrapper .tl-slider__input-field::-webkit-outer-spin-button, .tl-slider__input-wrapper .tl-slider__input-field::-webkit-inner-spin-button {
-  appearance: none;
+.tl-text-field__input {
+  all: unset;
+  border-radius: var(--text-field-border-radius);
+  background-color: var(--text-field-background);
+  color: var(--text-field-text);
+  width: 100%;
+  box-sizing: border-box;
   margin: 0;
+  border: none;
+  outline: none;
 }
-
-.tl-slider__input-wrapper.tl-text-field--readonly:not(.tl-text-field--disabled) .tl-slider__input-field[readonly] {
-  width: 74px;
-  padding-right: 39px;
+.tl-text-field__input::placeholder {
+  color: var(--text-field-placeholder);
 }
-
-.tl-slider__value-tooltip {
-  font-family: var(--detail-01-font-family);
-  font-size: var(--detail-01-font-size);
-  line-height: var(--detail-01-line-height);
-  font-weight: var(--detail-01-font-weight);
-  letter-spacing: var(--detail-01-letter-spacing);
-  text-transform: var(--detail-01-text-transform);
+.tl-text-field__input:disabled {
+  background-color: var(--text-field-background-disabled);
+  color: var(--text-field-text-disabled);
   user-select: none;
-  border-radius: 4px;
-  padding: 8px 11px;
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  bottom: 100%;
-  margin-bottom: 8px;
-  background-color: var(--slider-value-tooltip-background);
-  color: var(--slider-value-tooltip);
-  display: none;
-  white-space: nowrap;
-  z-index: 10;
+  pointer-events: none;
 }
-.tl-slider__value-tooltip::after {
-  content: "";
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  bottom: -6px;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 6px solid var(--slider-value-tooltip-background);
+.tl-text-field__input:disabled::placeholder {
+  color: var(--text-field-placeholder-disabled);
 }
-.tl-slider__thumb:hover .tl-slider__value-tooltip {
-  display: block;
+.tl-text-field__input {
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
+  text-align: left;
+  color: var(--text-field-text);
+  flex: 1;
+  order: 2;
+  box-shadow: inset var(--text-field-box-shadow);
+  transition: box-shadow 0.2s;
 }
-.tl-slider--disabled .tl-slider__value-tooltip {
-  display: none;
+.tl-text-field__input:focus {
+  box-shadow: inset var(--text-field-box-shadow-focus);
 }
-
-.tl-slider__thumb {
-  position: absolute;
-  z-index: 1;
+.tl-text-field:hover .tl-text-field__input:not(:focus):not(:disabled) {
+  box-shadow: inset var(--text-field-box-shadow-hover);
 }
-
-.tl-slider__thumb-inner {
-  width: 20px;
-  height: 20px;
-  border-radius: 100%;
-  background-color: var(--slider-thumb);
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  cursor: pointer;
-  overflow: visible;
+.tl-text-field--error .tl-text-field__input {
+  box-shadow: inset var(--text-field-box-shadow-error);
 }
-.tl-slider__thumb-inner::before {
-  content: " ";
-  display: none;
-  width: 48px;
-  height: 48px;
-  background-color: var(--slider-thumb);
-  position: absolute;
-  border-radius: 100%;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  opacity: 0.17;
+.tl-text-field--error .tl-text-field__input:focus {
+  box-shadow: inset var(--text-field-box-shadow-error-focus);
 }
-.tl-slider__thumb-inner:hover::before {
-  display: block;
+.tl-text-field--error:hover .tl-text-field__input:not(:focus):not(:disabled) {
+  box-shadow: inset var(--text-field-box-shadow-error-hover);
 }
-.tl-slider__thumb-inner--pressed {
-  width: 24px;
-  height: 24px;
+.tl-text-field--success:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input:not(:focus) {
+  box-shadow: inset var(--text-field-box-shadow-success);
 }
-.tl-slider__thumb-inner--pressed::before {
-  display: block;
-  opacity: 0.35;
+.tl-text-field__input:disabled {
+  box-shadow: none;
+  background-color: var(--text-field-background-disabled);
+  color: var(--text-field-text-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
 }
-.tl-slider--small .tl-slider__thumb-inner {
-  width: 16px;
-  height: 16px;
+:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input {
+  box-shadow: inset var(--text-field-box-shadow);
 }
-.tl-slider--small .tl-slider__thumb-inner::before {
-  width: 40px;
-  height: 40px;
+:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input:focus {
+  box-shadow: inset var(--text-field-box-shadow-focus);
 }
-.tl-slider--small .tl-slider__thumb-inner.tl-slider__thumb-inner--pressed {
-  width: 20px;
-  height: 20px;
+:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)):hover .tl-text-field__input:not(:focus) {
+  box-shadow: inset var(--text-field-box-shadow-hover);
 }
-.tl-slider--disabled .tl-slider__thumb-inner {
-  background-color: var(--slider-disabled);
+:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input {
+  user-select: auto;
+  caret-color: transparent;
   cursor: default;
+  pointer-events: none;
 }
-.tl-slider--disabled .tl-slider__thumb-inner::before {
-  display: none;
+.tl-text-field:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)):not(.tl-text-field--hide-readonly-icon) .tl-text-field__input {
+  padding-right: 54px;
 }
-
-.tl-slider__value-dividers {
-  pointer-events: none;
-  position: absolute;
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  top: 0;
-  z-index: 0;
+.tl-text-field--lg .tl-text-field__input {
+  padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
 }
-
-.tl-slider__value-divider {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  height: 16px;
+.tl-text-field--md .tl-text-field__input {
+  padding: var(--tds-spacing-element-16);
 }
-
-.tl-slider__value-divider-line {
-  position: absolute;
-  width: 1px;
-  height: 16px;
-  background-color: var(--slider-divider);
-  top: 0;
-  left: 50%;
-  transform: translate(-50%, -50%);
+.tl-text-field--sm .tl-text-field__input {
+  padding: var(--tds-spacing-element-12) var(--tds-spacing-element-16);
 }
-.tl-slider--disabled .tl-slider__value-divider-line {
-  background-color: var(--slider-disabled);
+.tl-text-field--label-inside.tl-text-field--lg .tl-text-field__input {
+  padding-top: var(--tds-spacing-element-24);
+  padding-bottom: 15px;
+}
+.tl-text-field--label-inside.tl-text-field--md .tl-text-field__input {
+  padding-top: var(--tds-spacing-element-20);
+  padding-bottom: 11px;
+}
+.tl-text-field--label-inside.tl-text-field--sm .tl-text-field__input:not(:focus):placeholder-shown {
+  padding-top: var(--tds-spacing-element-16);
+  padding-bottom: 7px;
+}
+.tl-text-field:has(.tl-text-field__prefix--icon) .tl-text-field__input {
+  padding-left: 44px;
+}
+.tl-text-field:has(.tl-text-field__prefix--text) .tl-text-field__input {
+  padding-left: calc(16px + var(--text-field-affix-width-text) + 8px);
+}
+.tl-text-field:has(.tl-text-field__suffix--icon) .tl-text-field__input {
+  padding-right: 44px;
+}
+.tl-text-field:has(.tl-text-field__suffix--text) .tl-text-field__input {
+  padding-right: calc(16px + var(--text-field-affix-width-text) + 8px);
+}
+.tl-text-field--label-inside .tl-text-field__input::placeholder {
+  color: transparent !important;
+}
+.tl-text-field:not(.tl-text-field--label-inside) .tl-text-field__input:disabled::placeholder {
+  color: var(--text-field-placeholder-disabled) !important;
 }
 
-.tl-slider__value-divider-label {
+.tl-text-field:not(.tl-text-field--label-inside) .tl-text-field__label {
   font-family: var(--detail-05-font-family);
   font-size: var(--detail-05-font-size);
   line-height: var(--detail-05-line-height);
   font-weight: var(--detail-05-font-weight);
   letter-spacing: var(--detail-05-letter-spacing);
   text-transform: var(--detail-05-text-transform);
-  position: absolute;
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  margin-bottom: 16px;
-  width: 50px;
-  text-align: center;
-  white-space: nowrap;
-  user-select: none;
-  color: var(--slider-divider-values);
-}
-.tl-slider--disabled .tl-slider__value-divider-label {
-  color: var(--slider-disabled-text);
+  display: block;
+  margin-bottom: 8px;
+  color: var(--text-field-label);
 }
-
-.tl-slider__track-fill {
-  background-color: var(--slider-track-fill);
-  border-radius: 2px;
-  height: 4px;
+.tl-text-field--label-inside .tl-text-field__label {
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
   position: absolute;
-  left: 0;
-  top: -1px;
+  top: 50%;
+  left: var(--text-field-label-inside-left, 16px);
+  color: var(--text-field-label-inside);
+  pointer-events: none;
+  transform: translateY(-50%);
+  transform-origin: top left;
+  transition: transform 0.15s, font-size 0.15s, color 0.15s, top 0.15s;
   z-index: 1;
 }
-.tl-slider--disabled .tl-slider__track-fill {
-  background-color: var(--slider-disabled);
-}
-
-.tl-slider__native-input {
-  display: none;
+.tl-text-field--label-inside:has(.tl-text-field__prefix--icon) .tl-text-field__label {
+  left: 44px;
 }
-
-/* Component variables  */
-.tl-spinner {
-  --tl-spinner-background: var(--component-spinner-color);
-  --tl-spinner-background-inverted: var(--color-brand-neutral-white);
-  --tl-spinner-speed: 1.8s;
-  --tl-spinner-speed-lg: 2s;
-  --tl-spinner-radius-xs: 8px;
-  --tl-spinner-radius-sm: 12px;
-  --tl-spinner-radius-md: 26px;
-  --tl-spinner-radius-lg: 42px;
-  --tl-spinner-stroke-width-xs: 3px;
-  --tl-spinner-stroke-width-sm: 4px;
-  --tl-spinner-stroke-width-md: 6px;
-  --tl-spinner-stroke-width-lg: 8px;
-  --tl-spinner-PI: 3.14159265358979;
-  --tl-spinner-radius: var(--tl-spinner-radius-lg);
-  --tl-spinner-stroke-width: var(--tl-spinner-stroke-width-lg);
-  --tl-spinner-animation-speed: var(--tl-spinner-speed-lg);
-}
-
-.tl-spinner {
-  box-sizing: border-box;
-}
-.tl-spinner * {
-  box-sizing: border-box;
-}
-.tl-spinner {
-  display: block;
-  width: calc(var(--tl-spinner-radius) * 2);
-  height: calc(var(--tl-spinner-radius) * 2);
-  transform: scale(-1, 1) rotate(-90deg);
-}
-.tl-spinner--xs {
-  --tl-spinner-radius: var(--tl-spinner-radius-xs);
-  --tl-spinner-stroke-width: var(--tl-spinner-stroke-width-xs);
-  --tl-spinner-animation-speed: var(--tl-spinner-speed);
-}
-.tl-spinner--sm {
-  --tl-spinner-radius: var(--tl-spinner-radius-sm);
-  --tl-spinner-stroke-width: var(--tl-spinner-stroke-width-sm);
-  --tl-spinner-animation-speed: var(--tl-spinner-speed);
-}
-.tl-spinner--md {
-  --tl-spinner-radius: var(--tl-spinner-radius-md);
-  --tl-spinner-stroke-width: var(--tl-spinner-stroke-width-md);
-  --tl-spinner-animation-speed: var(--tl-spinner-speed);
+.tl-text-field--label-inside:has(.tl-text-field__prefix--text) .tl-text-field__label {
+  left: calc(16px + var(--text-field-affix-width-text) + 8px);
 }
-.tl-spinner--lg {
-  --tl-spinner-radius: var(--tl-spinner-radius-lg);
-  --tl-spinner-stroke-width: var(--tl-spinner-stroke-width-lg);
-  --tl-spinner-animation-speed: var(--tl-spinner-speed-lg);
+.tl-text-field--label-inside.tl-text-field--lg:has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--lg:has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--md:has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--md:has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
+  font-family: var(--detail-07-font-family);
+  font-size: var(--detail-07-font-size);
+  line-height: var(--detail-07-line-height);
+  font-weight: var(--detail-07-font-weight);
+  letter-spacing: var(--detail-07-letter-spacing);
+  text-transform: var(--detail-07-text-transform);
+  top: 8px;
+  transform: translateY(0);
+  transition: 0.1s ease all;
 }
-.tl-spinner--default {
-  stroke: var(--tl-spinner-background);
+.tl-text-field--label-inside.tl-text-field--lg:has(.tl-text-field__prefix--icon):has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--lg:has(.tl-text-field__prefix--icon):has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--md:has(.tl-text-field__prefix--icon):has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--md:has(.tl-text-field__prefix--icon):has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
+  left: 44px;
 }
-.tl-spinner--inverted {
-  stroke: var(--tl-spinner-background-inverted);
+.tl-text-field--label-inside.tl-text-field--lg:has(.tl-text-field__prefix--text):has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--lg:has(.tl-text-field__prefix--text):has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--md:has(.tl-text-field__prefix--text):has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--md:has(.tl-text-field__prefix--text):has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
+  left: calc(16px + var(--text-field-affix-width-text) + 8px);
 }
-
-.tl-spinner__circle {
-  cx: var(--tl-spinner-radius);
-  cy: var(--tl-spinner-radius);
-  r: calc(var(--tl-spinner-radius) - var(--tl-spinner-stroke-width) / 2);
-  fill: none;
-  --tl-spinner-stroke-dash: calc((2 * var(--tl-spinner-PI)) * var(--tl-spinner-radius));
-  stroke-dasharray: var(--tl-spinner-stroke-dash);
-  stroke-width: var(--tl-spinner-stroke-width);
-  animation: tl-spinner-dash var(--tl-spinner-animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
+.tl-text-field--label-inside.tl-text-field--sm:has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--sm:has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
+  opacity: 0;
+  visibility: hidden;
 }
-
-@keyframes tl-spinner-dash {
-  from {
-    stroke-dashoffset: calc(-1 * var(--tl-spinner-stroke-dash));
-  }
-  to {
-    stroke-dashoffset: var(--tl-spinner-stroke-dash);
-  }
+.tl-text-field--label-inside:has(.tl-text-field__input:disabled) .tl-text-field__label {
+  color: var(--text-field-label-disabled);
 }
-.tl-stepper {
-  --stepper-current-number-with-border: var(--color-foreground-border-strong);
-  --stepper-icon-step-border-warning: var(--color-system-danger-default);
-  --stepper-icon-step-border-success: var(--component-stepper-success);
-  --stepper-icon-step-checkmark: var(--color-foreground-icon-inverse-strong);
-  --stepper-label-text-upcoming: var(--color-foreground-text-disabled);
-  --stepper-label-border-upcoming: var(--color-foreground-border-discrete);
-  --stepper-divider-line: var(--color-foreground-icon-disabled);
+.tl-text-field:not(.tl-text-field--label-inside):has(.tl-text-field__input:disabled) .tl-text-field__label {
+  color: var(--text-field-label-disabled);
 }
 
-.tl-stepper__step {
-  position: relative;
+.tl-text-field__bottom {
   display: flex;
-  justify-content: start;
-  flex-direction: row;
-  align-items: center;
   gap: 8px;
+  padding-top: 4px;
 }
-.tl-stepper--label-below .tl-stepper__step {
-  flex-direction: column;
-}
-.tl-stepper--lg .tl-stepper__step {
-  font-family: var(--detail-01-font-family);
-  font-size: var(--detail-01-font-size);
-  line-height: var(--detail-01-line-height);
-  font-weight: var(--detail-01-font-weight);
-  letter-spacing: var(--detail-01-letter-spacing);
-  text-transform: var(--detail-01-text-transform);
-  padding: 0 20px;
-}
-.tl-stepper--sm .tl-stepper__step {
+
+.tl-text-field__helper {
   font-family: var(--detail-05-font-family);
   font-size: var(--detail-05-font-size);
   line-height: var(--detail-05-line-height);
   font-weight: var(--detail-05-font-weight);
   letter-spacing: var(--detail-05-letter-spacing);
   text-transform: var(--detail-05-text-transform);
-  padding: 0 20px;
-}
-.tl-stepper--horizontal:not(.tl-stepper--label-aside) .tl-stepper__list > .tl-stepper__step {
-  flex: 1 1 0;
-  min-inline-size: 60px;
-}
-.tl-stepper--horizontal.tl-stepper--label-aside .tl-stepper__list > .tl-stepper__step {
-  flex: 0 0 auto;
-  min-inline-size: auto;
+  color: var(--text-field-helper);
+  position: relative;
 }
-.tl-stepper--horizontal.tl-stepper--label-aside.tl-stepper--hide-labels .tl-stepper__list > .tl-stepper__step {
-  min-inline-size: 40px;
+:has(.tl-text-field__input:disabled) .tl-text-field__helper {
+  color: var(--color-foreground-text-disabled);
 }
-.tl-stepper--horizontal.tl-stepper--sm:not(.tl-stepper--label-aside) .tl-stepper__list > .tl-stepper__step {
-  min-inline-size: 40px;
+.tl-text-field--error .tl-text-field__helper {
+  padding-left: 24px;
 }
-.tl-stepper--horizontal.tl-stepper--sm.tl-stepper--label-aside.tl-stepper--hide-labels .tl-stepper__list > .tl-stepper__step {
-  min-inline-size: 48px;
+.tl-text-field--error .tl-text-field__helper::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 16px;
+  height: 16px;
+  background-color: var(--text-field-error);
+  mask-image: var(--icon-error-svg);
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
 }
-.tl-stepper--lg .tl-stepper__step:last-of-type::after, .tl-stepper--sm .tl-stepper__step:last-of-type::after {
-  display: none;
+.tl-text-field--error:has(.tl-text-field__input[readonly]) .tl-text-field__helper {
+  padding-left: 0;
 }
-.tl-stepper--vertical.tl-stepper--lg .tl-stepper__step:last-of-type::after, .tl-stepper--vertical.tl-stepper--sm .tl-stepper__step:last-of-type::after {
+.tl-text-field--error:has(.tl-text-field__input[readonly]) .tl-text-field__helper::before {
   display: none;
 }
-.tl-stepper--lg .tl-stepper__step::after {
-  content: " ";
-  position: absolute;
-  background-color: var(--stepper-divider-line);
+.tl-text-field--error:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__helper {
+  color: var(--text-field-error);
 }
-.tl-stepper--lg.tl-stepper--vertical .tl-stepper__step::after {
-  height: 36px;
-  width: 1px;
-  top: 40px;
-  left: 36px;
+.tl-text-field--error:has(.tl-text-field__input:disabled) .tl-text-field__helper::before {
+  background-color: var(--color-foreground-text-disabled);
 }
-.tl-stepper--lg.tl-stepper--horizontal .tl-stepper__step::after {
-  height: 1px;
-  left: calc(50% + 15px + 8px);
-  right: calc(-50% + 15px + 8px);
-  top: 16px;
+
+.tl-text-field__charcounter {
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
+  margin-left: auto;
+  color: var(--text-field-textcounter);
 }
-.tl-stepper--lg.tl-stepper--horizontal.tl-stepper--label-aside:not(.tl-stepper--hide-labels) .tl-stepper__step::after {
-  height: 1px;
-  top: 16px;
-  width: 10px;
-  left: auto;
-  right: -10px;
+:has(.tl-text-field__input:disabled) .tl-text-field__charcounter {
+  color: var(--color-foreground-text-disabled);
 }
-.tl-stepper--sm.tl-stepper--vertical .tl-stepper__step::after {
-  content: " ";
-  position: absolute;
-  background-color: var(--stepper-divider-line);
-  height: 20px;
-  width: 1px;
-  top: 34px;
-  left: 32px;
+.tl-text-field--error:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__charcounter {
+  color: var(--text-field-error);
 }
-.tl-stepper--sm.tl-stepper--horizontal .tl-stepper__step::after {
-  content: " ";
-  position: absolute;
-  background-color: var(--stepper-divider-line);
-  height: 1px;
-  left: calc(50% + 12px + 8px);
-  right: calc(-50% + 12px + 8px);
-  top: 13px;
+.tl-text-field--error:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__charcounter .tl-text-field__charcounter-divider {
+  color: var(--text-field-error);
 }
-.tl-stepper--sm.tl-stepper--horizontal.tl-stepper--label-aside:not(.tl-stepper--hide-labels) .tl-stepper__step::after {
-  content: " ";
-  position: absolute;
-  background-color: var(--stepper-divider-line);
-  height: 1px;
-  top: 13px;
-  width: 10px;
-  left: auto;
-  right: -10px;
+
+.tl-text-field__charcounter-divider {
+  color: var(--color-foreground-text-disabled);
 }
 
-.tl-stepper__node {
+.tl-text-field__prefix {
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
+  color: var(--text-field-affix);
+  align-self: center;
   display: flex;
   align-items: center;
-  justify-content: space-around;
-  border-radius: 100px;
-  border-width: 1px;
-  border-style: solid;
-  text-align: center;
+  z-index: 1;
   position: relative;
 }
-.tl-stepper--lg .tl-stepper__node {
-  height: 30px;
-  min-width: 30px;
-  font-size: 14px;
+.tl-text-field__prefix--text, .tl-text-field__prefix--icon {
+  position: absolute;
+  left: 16px;
+  top: 50%;
+  transform: translateY(calc(-50% - 1px));
+  z-index: 1;
 }
-.tl-stepper--sm .tl-stepper__node {
-  height: 24px;
-  min-width: 24px;
+.tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__prefix--text, .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__prefix--icon {
+  transform: translateY(calc(-50% + 24px));
 }
-.tl-stepper__step--error .tl-stepper__node {
-  border-color: var(--stepper-icon-step-border-warning);
-  color: var(--stepper-icon-step-border-warning);
+:has(.tl-text-field__input:disabled) .tl-text-field__prefix--text, :has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon {
+  color: var(--text-field-affix-disabled);
 }
-.tl-stepper__step--success .tl-stepper__node {
-  background-color: var(--stepper-icon-step-border-success);
-  border-color: var(--stepper-icon-step-border-success);
-  color: var(--stepper-icon-step-checkmark);
+:has(.tl-text-field__input:disabled) .tl-text-field__prefix--text > *, :has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon > * {
+  color: var(--text-field-affix-disabled);
 }
-.tl-stepper__step--current .tl-stepper__node {
-  color: var(--stepper-current-number-with-border);
+:has(.tl-text-field__input:disabled) .tl-text-field__prefix--text .tl-icon, :has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon .tl-icon {
+  background-color: var(--text-field-affix-disabled);
 }
-.tl-stepper__step--upcoming .tl-stepper__node {
-  border-color: var(--stepper-label-border-upcoming);
-  color: var(--stepper-label-text-upcoming);
+:has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon.tl-icon {
+  background-color: var(--text-field-affix-disabled);
 }
-.tl-stepper__step--success .tl-stepper__node, .tl-stepper__step--error .tl-stepper__node {
-  justify-content: center;
+
+.tl-text-field__suffix {
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
+  color: var(--text-field-affix);
+  align-self: center;
+  display: flex;
+  align-items: center;
+  z-index: 1;
+  position: relative;
 }
-.tl-stepper__step--success .tl-stepper__node::after, .tl-stepper__step--error .tl-stepper__node::after {
-  content: "";
-  display: block;
-  width: 20px;
-  height: 20px;
-  mask-repeat: no-repeat;
-  mask-position: center;
-  mask-size: contain;
-  background-color: currentcolor;
+.tl-text-field__suffix--text, .tl-text-field__suffix--icon {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(calc(-50% - 1px));
+  z-index: 1;
 }
-.tl-stepper__step--success .tl-stepper__node::after {
-  mask-image: var(--icon-tick-svg);
+.tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__suffix--text, .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__suffix--icon {
+  transform: translateY(calc(-50% + 24px));
 }
-.tl-stepper__step--error .tl-stepper__node::after {
-  mask-image: var(--icon-warning-svg);
+:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon {
+  color: var(--text-field-affix-disabled);
+}
+:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text > *, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon > * {
+  color: var(--text-field-affix-disabled);
+}
+:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text .tl-icon,
+:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text > .tl-icon, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon .tl-icon,
+:has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon > .tl-icon {
+  background-color: var(--text-field-affix-disabled) !important;
 }
 
-.tl-stepper--sm .tl-stepper__step--success .tl-stepper__node::after,
-.tl-stepper--sm .tl-stepper__step--error .tl-stepper__node::after {
-  width: 16px;
-  height: 16px;
+.tl-text-field__suffix {
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
+  color: var(--text-field-affix);
+  align-self: center;
+  display: flex;
+  align-items: center;
+  z-index: 1;
+  position: relative;
+  right: 16px;
+  padding-right: 0;
+  z-index: 1;
+}
+.tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__suffix--text, .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__suffix--icon {
+  transform: translateY(calc(-50% + 24px));
+}
+:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon {
+  color: var(--text-field-affix-disabled);
+}
+:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text > *, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon > * {
+  color: var(--text-field-affix-disabled);
+}
+:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text .tl-icon,
+:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text > .tl-icon, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon .tl-icon,
+:has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon > .tl-icon {
+  background-color: var(--text-field-affix-disabled);
+}
+:has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon.tl-icon {
+  background-color: var(--text-field-affix-disabled);
 }
 
-.tl-stepper__label {
-  text-align: center;
+.tl-text-field--label-inside:has(.tl-text-field__input:focus) .tl-text-field__label,
+.tl-text-field--label-inside:has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
+  font-family: var(--detail-07-font-family);
+  font-size: var(--detail-07-font-size);
+  line-height: var(--detail-07-line-height);
+  font-weight: var(--detail-07-font-weight);
+  letter-spacing: var(--detail-07-letter-spacing);
+  text-transform: var(--detail-07-text-transform);
+  top: 7.5px;
+  left: var(--text-field-label-inside-left, 16px);
+  transform: none;
 }
-.tl-stepper--lg .tl-stepper__label {
-  font-family: var(--detail-01-font-family);
-  font-size: var(--detail-01-font-size);
-  line-height: var(--detail-01-line-height);
-  font-weight: var(--detail-01-font-weight);
-  letter-spacing: var(--detail-01-letter-spacing);
-  text-transform: var(--detail-01-text-transform);
-  font-size: 14px;
+.tl-text-field--label-inside:has(.tl-text-field__prefix--icon) .tl-text-field--label-inside:has(.tl-text-field__input:focus) .tl-text-field__label,
+.tl-text-field--label-inside:has(.tl-text-field__prefix--icon) .tl-text-field--label-inside:has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
+  left: 44px;
 }
-.tl-stepper--sm .tl-stepper__label {
+.tl-text-field--label-inside:has(.tl-text-field__prefix--text) .tl-text-field--label-inside:has(.tl-text-field__input:focus) .tl-text-field__label,
+.tl-text-field--label-inside:has(.tl-text-field__prefix--text) .tl-text-field--label-inside:has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
+  left: calc(16px + var(--text-field-affix-width-text) + 8px);
+}
+
+.tl-slider {
+  box-sizing: border-box;
+}
+.tl-slider * {
+  box-sizing: border-box;
+}
+.tl-slider {
+  width: 100%;
+}
+.tl-slider:has(input[type=range][readonly]):not(:has(input[type=range]:disabled)) {
+  pointer-events: none;
+}
+
+.tl-slider__label {
   font-family: var(--detail-05-font-family);
   font-size: var(--detail-05-font-size);
   line-height: var(--detail-05-line-height);
   font-weight: var(--detail-05-font-weight);
   letter-spacing: var(--detail-05-letter-spacing);
   text-transform: var(--detail-05-text-transform);
+  user-select: none;
+  color: var(--slider-label);
+  display: block;
+  margin-bottom: 24px;
+  margin-left: -2px;
 }
-.tl-stepper__step--upcoming .tl-stepper__label {
-  color: var(--stepper-label-text-upcoming);
-  opacity: var(--tds-stepper-label-text-opacity-upcoming);
+.tl-slider:has(.tl-slider__value-divider-label) .tl-slider__label {
+  margin-bottom: 44px;
 }
-.tl-stepper--hide-labels .tl-stepper__label {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  margin: -1px;
-  padding: 0;
-  border: 0;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  white-space: nowrap;
+.tl-slider:has(.tl-slider__control-minus, .tl-slider__control-plus) .tl-slider__label {
+  margin-bottom: 2px;
+  padding-left: 11px;
+  margin-left: 0;
 }
-
-.tl-stepper {
-  box-sizing: border-box;
+.tl-slider:has(.tl-slider__control-minus, .tl-slider__control-plus):has(.tl-slider__value-divider-label) .tl-slider__label {
+  margin-bottom: 20px;
+  padding-left: 11px;
+  margin-left: 0;
 }
-.tl-stepper * {
-  box-sizing: border-box;
+.tl-slider:has(.tl-slider__input-wrapper) .tl-slider__label {
+  margin-bottom: 2px;
+  margin-left: 0;
 }
-.tl-stepper {
-  display: table;
-  table-layout: fixed;
-  width: 100%;
-  list-style: none;
+:has(input[type=range]:disabled) .tl-slider__label {
+  color: var(--slider-disabled-text);
 }
 
-.tl-stepper__list {
+.tl-slider__track-wrapper {
+  position: relative;
   display: flex;
-  justify-content: space-evenly;
-  min-width: 100%;
-  list-style: none;
-  margin: 0;
-  padding: 0;
+  align-items: center;
+  gap: 5px;
 }
-.tl-stepper:not(.tl-stepper--label-aside) .tl-stepper__list {
-  width: 100%;
+.tl-slider__track-wrapper:has(.tl-slider__input-wrapper) {
+  gap: 16px;
+  align-items: center;
+  height: 41px;
 }
-.tl-stepper--horizontal:not(.tl-stepper--label-aside) .tl-stepper__list {
-  justify-content: flex-start;
+
+.tl-slider__control-minus,
+.tl-slider__control-plus {
+  flex-shrink: 0;
+  border: none;
 }
-.tl-stepper--horizontal.tl-stepper--label-aside .tl-stepper__list {
-  display: flex;
-  justify-content: flex-start;
-  min-width: 100%;
+
+.tl-slider__track {
+  position: relative;
+  flex: 1;
+  min-height: 2px;
+  background-color: var(--slider-track);
+  border-radius: var(--slider-border-radius);
 }
-.tl-stepper--horizontal.tl-stepper--label-aside.tl-stepper--hide-labels .tl-stepper__list {
-  display: flex;
-  justify-content: flex-start;
+.tl-slider__track-wrapper:has(.tl-slider__input-wrapper) .tl-slider__track {
+  height: 2px;
+  align-self: center;
 }
-.tl-stepper--vertical .tl-stepper__list {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  gap: 52px;
-  min-width: 0;
+.tl-slider__track::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: -10px;
+  bottom: -10px;
+  cursor: pointer;
+  z-index: 0;
 }
-.tl-stepper--vertical.tl-stepper--sm .tl-stepper__list {
-  gap: 36px;
+.tl-slider__track:focus {
+  outline: 0;
+}
+.tl-slider__track:focus .tl-slider__thumb-inner {
+  width: 24px;
+  height: 24px;
+}
+.tl-slider__track:focus .tl-slider__thumb-inner::before {
+  display: block;
+  opacity: 0.08;
+}
+.tl-slider__track:focus-within .tl-slider__thumb-inner {
+  outline: 2px solid var(--slider-input-focused);
+  box-shadow: 0 0 0 1px var(--color-background-layer-01);
+  outline-offset: 1px;
+  z-index: 1;
+}
+.tl-slider__track:disabled {
+  cursor: not-allowed;
+  background-color: var(--slider-disabled);
+}
+.tl-slider__track:disabled::after {
+  cursor: not-allowed;
 }
 
-.tl-table {
-  /* Table-text */
-  --table-text: var(--color-foreground-text-strong);
-  /* Table-body-cell */
-  --table-body-cell-hover: var(--component-table-cell-hover);
-  /* Table-body-row */
-  --table-body-row: var(--component-table-cell);
-  --table-body-row-hover: var(--component-table-cell-hover);
-  --table-zebra-mode: var(--component-table-secondary-cell);
-  --table-body-row-selected: var(--color-background-surface-300);
-  --table-body-row-selected-hover: var(--color-background-surface-400);
-  /* Table input body */
-  --table-input-focus: var(--color-background-layer-02);
-  --table-input-hover: var(--color-background-layer-03);
-  --table-input-disabled: var(--color-background-layer-01);
-  --table-input-text-disabled: var(--color-foreground-text-subtle);
-  /* Table input header */
-  --table-input-header-icon: var(--color-foreground-icon-soft);
-  --table-input-header-placeholder: var(--color-foreground-text-subtle);
-  --table-input-header-focus: var(--color-background-layer-01);
-  /* Table-footer */
-  --table-footer: var(--component-table-pagination-base);
-  --table-footer-page-selector-input: var(--component-table-pagination-dropdown);
-  --table-footer-page-selector-input-hover: var(--color-background-layer-03);
-  --table-footer-page-selector-input-disabled: var(--color-background-layer-01);
-  --table-footer-button-hover: var(--color-background-surface-300);
-  /* Table-header */
-  --table-header: var(--color-background-surface-300);
-  --table-header-hover: var(--color-background-surface-400);
-  --table-header-button: var(--color-background-surface-200);
-  --table-header-button-hover: var(--color-background-surface-300);
-  --table-header-button-focus: var(--color-foreground-border-accent-focus);
-  /* Table-toolbar */
-  --table-toolbar: var(--color-background-surface-400);
-  --table-toolbar-searchbar: var(--component-table-pagination-dropdown);
-  --table-toolbar-searchbar-hover: var(--component-table-pagination-base);
-  --table-toolbar-searchbar-border-bottom: var(--color-foreground-border-accent-focus);
-  /* Divider */
-  --table-divider: var(--color-foreground-border-discrete);
-  /* Table-icons */
-  --table-icon: var(--color-foreground-icon-strong);
-  --table-icon-disabled: var(--color-foreground-icon-disabled);
-}
-.tl-table.tl-table--primary {
-  --table-body-row: var(--component-table-cell);
-  --table-body-row-hover: var(--component-table-cell-hover);
-  --table-body-cell-hover: var(--component-table-cell-hover);
-  --table-zebra-mode: var(--component-table-secondary-cell);
+.tl-slider__value {
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
+  user-select: none;
+  color: var(--slider-input-value);
+  flex-shrink: 0;
+  align-self: center;
 }
-.tl-table.tl-table--secondary {
-  --table-body-row: var(--component-table-secondary-cell);
-  --table-body-row-hover: var(--component-table-cell-hover);
-  --table-body-cell-hover: var(--component-table-cell-hover);
-  --table-zebra-mode: var(--component-table-cell);
+:has(input[type=range]:disabled) .tl-slider__value {
+  color: var(--slider-disabled-text);
 }
 
-.tds-mode-dark .tl-table.tl-table--secondary {
-  --table-body-cell-hover: var(--color-background-surface-300);
-  --table-body-row-hover: var(--color-background-surface-300);
+.tl-slider__input-wrapper {
+  flex-shrink: 0;
+  width: auto;
+  height: auto;
+  min-width: auto;
+  margin-left: 0;
+  align-self: center;
+}
+.tl-slider__input-wrapper.tl-text-field:not(.tl-text-field--label-inside):has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled))::before {
+  width: 16px;
+  height: 16px;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
 }
 
-.tl-table__footer {
-  display: table-footer-group;
-  height: var(--tds-spacing-element-48);
+.tl-slider__input-wrapper .tl-slider__input-field {
+  width: var(--slider-input-width, 56px);
+  padding: 12px;
+  text-align: center;
+  appearance: textfield;
 }
-.tl-table--compact .tl-table__footer {
-  height: var(--tds-spacing-element-32);
+.tl-slider__input-wrapper .tl-slider__input-field--decimal {
+  width: 56px;
 }
-
-.tl-table__footer .tl-dropdown__text {
-  max-width: calc(100% - 20px);
+.tl-slider__input-wrapper .tl-slider__input-field::-webkit-outer-spin-button, .tl-slider__input-wrapper .tl-slider__input-field::-webkit-inner-spin-button {
+  appearance: none;
+  margin: 0;
 }
 
-.tl-table__footer .tl-dropdown--sm :is(.tl-dropdown__button, .tl-dropdown__select, .tl-dropdown__input),
-.tl-table__footer .tl-dropdown__option {
-  height: 29px;
+.tl-slider__input-wrapper:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-slider__input-field[readonly] {
+  width: 74px;
+  padding-right: 39px;
 }
 
-.tl-table__footer-row {
-  display: table-row;
-  border-bottom: 1px solid var(--table-divider);
-  background-color: var(--table-footer);
-  color: var(--table-text);
-  transition: background-color 200ms ease;
+.tl-slider__value-tooltip {
+  font-family: var(--detail-01-font-family);
+  font-size: var(--detail-01-font-size);
+  line-height: var(--detail-01-line-height);
+  font-weight: var(--detail-01-font-weight);
+  letter-spacing: var(--detail-01-letter-spacing);
+  text-transform: var(--detail-01-text-transform);
+  user-select: none;
+  border-radius: 4px;
+  padding: 8px 11px;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 100%;
+  margin-bottom: 8px;
+  background-color: var(--slider-value-tooltip-background);
+  color: var(--slider-value-tooltip);
+  display: none;
+  white-space: nowrap;
+  z-index: 10;
 }
-
-.tl-table__footer-cell {
-  padding: 0 var(--tds-spacing-element-16);
+.tl-slider__value-tooltip::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: -6px;
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid var(--slider-value-tooltip-background);
 }
-
-.tl-table__pagination {
-  height: var(--tds-spacing-element-48);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+.tl-slider__thumb:hover .tl-slider__value-tooltip {
+  display: block;
 }
-.tl-table--compact .tl-table__pagination {
-  height: var(--tds-spacing-element-32);
+:has(input[type=range]:disabled) .tl-slider__value-tooltip {
+  display: none;
 }
 
-.tl-table__row-selector,
-.tl-table__page-selector {
-  display: flex;
-  align-items: center;
+.tl-slider__thumb {
+  position: absolute;
+  z-index: 1;
 }
 
-.tl-table__rows-per-page {
-  margin-right: var(--tds-spacing-element-16);
-  display: flex;
-  align-items: center;
+.tl-slider__thumb-inner {
+  width: 20px;
+  height: 20px;
+  border-radius: 100%;
+  background-color: var(--slider-thumb);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  cursor: pointer;
+  overflow: visible;
 }
-
-.tl-table__rows-per-page-label {
-  margin-right: var(--tds-spacing-element-8);
-  font-family: var(--detail-02-font-family);
+.tl-slider__thumb-inner::before {
+  content: " ";
+  display: none;
+  width: 48px;
+  height: 48px;
+  background-color: var(--slider-thumb);
+  position: absolute;
+  border-radius: 100%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  opacity: 0.17;
 }
-
-.tl-table__rows-per-page-select {
-  background-color: var(--table-footer-page-selector-input);
-  color: var(--table-text);
-  height: 30px;
-  border: none;
-  border-radius: var(--tds-spacing-element-4);
-  padding: 0 var(--tds-spacing-element-8);
-  transition: background-color 250ms ease;
-  font-family: var(--detail-02-font-family);
+.tl-slider__thumb-inner:hover::before {
+  display: block;
 }
-.tl-table__rows-per-page-select:hover {
-  background-color: var(--table-footer-page-selector-input-hover);
+.tl-slider__thumb-inner--pressed {
+  width: 24px;
+  height: 24px;
 }
-.tl-table__rows-per-page-select:disabled {
-  color: var(--table-footer-page-selector-input-color-disabled);
+.tl-slider__thumb-inner--pressed::before {
+  display: block;
+  opacity: 0.35;
 }
-.tl-table--compact .tl-table__rows-per-page-select {
-  height: var(--tds-spacing-element-24);
+.tl-slider--small .tl-slider__thumb-inner {
+  width: 16px;
+  height: 16px;
 }
-
-.tl-table__page-selector-input {
-  background-color: var(--table-footer-page-selector-input);
-  border-radius: var(--tds-spacing-element-4);
-  color: var(--table-text);
-  margin-right: var(--tds-spacing-element-4);
-  padding-right: var(--tds-spacing-element-8);
-  width: 74px;
-  height: 30px;
-  border: none;
-  transition: background-color 250ms ease;
-  font-family: var(--detail-02-font-family);
+.tl-slider--small .tl-slider__thumb-inner::before {
+  width: 40px;
+  height: 40px;
 }
-.tl-table__page-selector-input:hover {
-  background-color: var(--table-footer-page-selector-input-hover);
+.tl-slider--small .tl-slider__thumb-inner.tl-slider__thumb-inner--pressed {
+  width: 20px;
+  height: 20px;
 }
-.tl-table__page-selector-input:disabled {
-  color: var(--table-footer-page-selector-input-color-disabled);
+:has(input[type=range]:disabled) .tl-slider__thumb-inner {
+  background-color: var(--slider-disabled);
+  cursor: not-allowed;
 }
-.tl-table--compact .tl-table__page-selector-input {
-  height: var(--tds-spacing-element-24);
+:has(input[type=range]:disabled) .tl-slider__thumb-inner::before {
+  display: none;
 }
 
-.tl-table__footer-text {
-  padding: 1px 22px 0 0;
-  font-family: var(--detail-02-font-family);
-}
-.tl-table__footer-text span {
-  font-family: var(--detail-02-font-family);
+.tl-slider__value-dividers {
+  pointer-events: none;
+  position: absolute;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  top: 0;
+  z-index: 0;
 }
 
-.tl-table__footer-button {
-  border-radius: var(--tds-spacing-element-4);
-  color: var(--table-icon);
-  height: var(--tds-spacing-element-32);
-  width: var(--tds-spacing-element-32);
+.tl-slider__value-divider {
+  position: relative;
   display: flex;
-  justify-content: center;
+  flex-direction: column;
   align-items: center;
-  border: none;
-  background-color: transparent;
-  cursor: pointer;
-  transition: background-color 250ms ease;
-}
-.tl-table__footer-button:hover {
-  background-color: var(--table-footer-button-hover);
-}
-.tl-table__footer-button:disabled {
-  color: var(--table-icon-disabled);
-  cursor: default;
-}
-.tl-table__footer-button:disabled:hover {
-  background-color: transparent;
-}
-.tl-table--compact .tl-table__footer-button {
-  height: 28px;
-  width: 28px;
+  height: 16px;
 }
 
-.tl-table {
-  box-sizing: border-box;
-}
-.tl-table * {
-  box-sizing: border-box;
-}
-.tl-table {
-  border-collapse: collapse;
-  display: table;
-  color: var(--table-text);
+.tl-slider__value-divider-line {
+  position: absolute;
+  width: 1px;
+  height: 16px;
+  background-color: var(--slider-divider);
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
-.tl-table--responsive {
-  width: 100%;
+:has(input[type=range]:disabled) .tl-slider__value-divider-line {
+  background-color: var(--slider-disabled);
 }
-.tl-table--horizontal-scroll {
-  display: block;
-  overflow-x: auto;
+
+.tl-slider__value-divider-label {
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 16px;
+  width: 50px;
+  text-align: center;
   white-space: nowrap;
+  user-select: none;
+  color: var(--slider-divider-values);
 }
-.tl-table--horizontal-scroll::-webkit-scrollbar {
-  height: var(--tl-scrollbar-height);
-}
-.tl-table--horizontal-scroll::-webkit-scrollbar-track {
-  background: var(--tl-scrollbar-track-color);
-}
-.tl-table--horizontal-scroll::-webkit-scrollbar-thumb {
-  border-radius: 40px;
-  background: var(--tl-scrollbar-thumb-color);
-  border-width: var(--tl-scrollbar-thumb-border-width);
-  border-style: solid;
-  border-color: transparent;
-  background-clip: padding-box;
-}
-.tl-table--horizontal-scroll::-webkit-scrollbar-thumb:hover {
-  border-width: var(--tl-scrollbar-thumb-border-hover-width);
-}
-.tl-table--horizontal-scroll::-webkit-scrollbar-button {
-  height: 0;
-  width: 0;
-}
-@supports not selector(::-webkit-scrollbar) {
-  .tl-table--horizontal-scroll {
-    scrollbar-color: var(--tl-scrollbar-thumb-color) var(--tl-scrollbar-track-color);
-    scrollbar-width: var(--tl-scrollbar-width-standard);
-  }
-}
-.tl-table--primary {
-  --table-body-row: var(--component-table-cell);
-  --table-body-row-hover: var(--component-table-cell-hover);
-  --table-zebra-mode: var(--component-table-secondary-cell);
-}
-.tl-table--secondary {
-  --table-body-row: var(--component-table-secondary-cell);
-  --table-body-row-hover: var(--component-table-cell-hover);
-  --table-zebra-mode: var(--component-table-cell);
+:has(input[type=range]:disabled) .tl-slider__value-divider-label {
+  color: var(--slider-disabled-text);
 }
 
-.tl-table__header {
-  display: table-header-group;
+.tl-slider__track-fill {
+  background-color: var(--slider-track-fill);
+  border-radius: 2px;
+  height: 4px;
+  position: absolute;
+  left: 0;
+  top: -1px;
+  z-index: 1;
 }
-
-.tl-table__body {
-  display: table-row-group;
+:has(input[type=range]:disabled) .tl-slider__track-fill {
+  background-color: var(--slider-disabled);
 }
 
-.tl-table__row {
-  display: table-row;
-  border-bottom: 1px solid var(--table-divider);
-  background-color: var(--table-body-row);
-  transition: background-color 200ms ease;
-  color: var(--table-text);
-}
-.tl-table__row:hover:not(.tl-table__row--expanded) {
-  background-color: var(--table-body-row-hover);
-  border-bottom-color: var(--table-divider);
-}
-.tl-table__row--selected {
-  background-color: var(--table-body-row-selected);
-}
-.tl-table__row--selected:hover {
-  background-color: var(--table-body-row-selected-hover);
-}
-.tl-table--clickable .tl-table__row, .tl-table__row--clickable {
-  cursor: pointer;
-}
-.tl-table__row--clickable:focus-visible {
-  outline: 2px solid var(--table-header-button-focus);
-  outline-offset: -2px;
-}
-.tl-table--zebra-rows-odd .tl-table__body .tl-table__row:nth-child(odd) {
-  background-color: var(--table-zebra-mode);
-}
-.tl-table--zebra-rows-even .tl-table__body .tl-table__row:nth-child(even) {
-  background-color: var(--table-zebra-mode);
+.tl-slider__native-input {
+  display: none;
 }
 
-.tl-table__header-cell {
-  display: table-cell;
-  padding: 16px;
-  background-color: var(--table-header);
-  border-bottom: 1px solid var(--table-divider);
-  font-family: var(--headline-07-font-family);
-  font-size: var(--headline-07-font-size);
-  line-height: var(--headline-07-line-height);
-  font-weight: var(--headline-07-font-weight);
-  letter-spacing: var(--headline-07-letter-spacing);
-  text-transform: var(--headline-07-text-transform);
-  color: var(--table-text);
-  text-align: left;
-  transition: background-color 200ms ease;
-  min-width: 192px;
-}
-.tl-table__header-cell:hover:not(.tl-table__header-cell--checkbox):not(.tl-table__header-cell--expand) {
-  background-color: var(--table-header-hover);
-}
-.tl-table__header-cell:first-of-type {
-  border-top-left-radius: 4px;
-}
-.tl-table__header-cell:last-of-type {
-  border-top-right-radius: 4px;
-}
-.tl-table:has(.tl-table__toolbar) .tl-table__header-cell:first-of-type, .tl-table__header-cell:has(.tl-table__header-input-wrapper):first-of-type {
-  border-top-left-radius: 0;
-}
-.tl-table:has(.tl-table__toolbar) .tl-table__header-cell:last-of-type, .tl-table__header-cell:has(.tl-table__header-input-wrapper):last-of-type {
-  border-top-right-radius: 0;
-}
-.tl-table__header-cell:has(.tl-table__header-input-wrapper), .tl-table--no-header-padding .tl-table__header-cell, .tl-table__header-cell--sortable {
-  padding: 0;
-}
-.tl-table__header-cell--checkbox, .tl-table__header-cell--expand {
-  min-width: 48px;
-  width: 48px;
-  padding: 0;
-  text-align: center;
-  background-color: var(--table-header);
-}
-.tl-table--compact .tl-table__header-cell {
-  height: 32px;
-  padding: 8px 16px;
-}
-.tl-table--compact .tl-table__header-cell--checkbox, .tl-table--compact .tl-table__header-cell--expand, .tl-table--compact .tl-table__header-cell:has(.tl-table__header-input-wrapper) {
-  padding: 0;
+/* Component variables  */
+.tl-spinner {
+  --tl-spinner-background: var(--component-spinner-color);
+  --tl-spinner-background-inverted: var(--color-brand-neutral-white);
+  --tl-spinner-speed: 1.8s;
+  --tl-spinner-speed-lg: 2s;
+  --tl-spinner-radius-xs: 8px;
+  --tl-spinner-radius-sm: 12px;
+  --tl-spinner-radius-md: 26px;
+  --tl-spinner-radius-lg: 42px;
+  --tl-spinner-stroke-width-xs: 3px;
+  --tl-spinner-stroke-width-sm: 4px;
+  --tl-spinner-stroke-width-md: 6px;
+  --tl-spinner-stroke-width-lg: 8px;
+  --tl-spinner-PI: 3.14159265358979;
+  --tl-spinner-radius: var(--tl-spinner-radius-lg);
+  --tl-spinner-stroke-width: var(--tl-spinner-stroke-width-lg);
+  --tl-spinner-animation-speed: var(--tl-spinner-speed-lg);
 }
-.tl-table--no-min-width .tl-table__header-cell {
-  min-width: unset;
+
+.tl-spinner {
+  box-sizing: border-box;
 }
-.tl-table--header-text-align-left .tl-table__header-cell {
-  text-align: left;
+.tl-spinner * {
+  box-sizing: border-box;
 }
-.tl-table--header-text-align-start .tl-table__header-cell {
-  text-align: start;
+.tl-spinner {
+  display: block;
+  width: calc(var(--tl-spinner-radius) * 2);
+  height: calc(var(--tl-spinner-radius) * 2);
+  transform: scale(-1, 1) rotate(-90deg);
 }
-.tl-table--header-text-align-center .tl-table__header-cell {
-  text-align: center;
+.tl-spinner--xs {
+  --tl-spinner-radius: var(--tl-spinner-radius-xs);
+  --tl-spinner-stroke-width: var(--tl-spinner-stroke-width-xs);
+  --tl-spinner-animation-speed: var(--tl-spinner-speed);
 }
-.tl-table--header-text-align-right .tl-table__header-cell {
-  text-align: right;
+.tl-spinner--sm {
+  --tl-spinner-radius: var(--tl-spinner-radius-sm);
+  --tl-spinner-stroke-width: var(--tl-spinner-stroke-width-sm);
+  --tl-spinner-animation-speed: var(--tl-spinner-speed);
 }
-.tl-table--header-text-align-end .tl-table__header-cell {
-  text-align: end;
+.tl-spinner--md {
+  --tl-spinner-radius: var(--tl-spinner-radius-md);
+  --tl-spinner-stroke-width: var(--tl-spinner-stroke-width-md);
+  --tl-spinner-animation-speed: var(--tl-spinner-speed);
 }
-
-.tl-table__header-button {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  justify-content: start;
-  flex-direction: row;
-  width: 100%;
-  height: 100%;
-  padding: 16px;
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-  transition: background-color 200ms ease;
-  font-family: var(--headline-07-font-family);
-  font-size: var(--headline-07-font-size);
-  line-height: var(--headline-07-line-height);
-  font-weight: var(--headline-07-font-weight);
-  letter-spacing: var(--headline-07-letter-spacing);
-  text-transform: var(--headline-07-text-transform);
-  color: var(--table-text);
-  text-align: left;
+.tl-spinner--lg {
+  --tl-spinner-radius: var(--tl-spinner-radius-lg);
+  --tl-spinner-stroke-width: var(--tl-spinner-stroke-width-lg);
+  --tl-spinner-animation-speed: var(--tl-spinner-speed-lg);
 }
-.tl-table__header-button:focus-visible, .tl-table__header-button:focus, .tl-table__header-button:active {
-  outline: 2px solid var(--table-header-button-focus);
-  outline-offset: -2px;
+.tl-spinner--default {
+  stroke: var(--tl-spinner-background);
 }
-.tl-table--compact .tl-table__header-button {
-  padding: 0;
+.tl-spinner--inverted {
+  stroke: var(--tl-spinner-background-inverted);
 }
 
-.tl-table__header-button-text {
-  color: var(--table-text);
-  text-align: left;
+.tl-spinner__circle {
+  cx: var(--tl-spinner-radius);
+  cy: var(--tl-spinner-radius);
+  r: calc(var(--tl-spinner-radius) - var(--tl-spinner-stroke-width) / 2);
+  fill: none;
+  --tl-spinner-stroke-dash: calc((2 * var(--tl-spinner-PI)) * var(--tl-spinner-radius));
+  stroke-dasharray: var(--tl-spinner-stroke-dash);
+  stroke-width: var(--tl-spinner-stroke-width);
+  animation: tl-spinner-dash var(--tl-spinner-animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
 }
 
-.tl-table__header-button-icon {
-  flex: 0 0 16px;
-  height: 16px;
-  width: 16px;
-  opacity: 0;
-  transform-origin: center;
-  transition: opacity 200ms ease-in, transform 200ms ease;
-  color: var(--table-text);
+@keyframes tl-spinner-dash {
+  from {
+    stroke-dashoffset: calc(-1 * var(--tl-spinner-stroke-dash));
+  }
+  to {
+    stroke-dashoffset: var(--tl-spinner-stroke-dash);
+  }
 }
-
-.tl-table__header-button:focus-visible .tl-table__header-button-icon,
-.tl-table__header-button:focus .tl-table__header-button-icon,
-.tl-table__header-button:active .tl-table__header-button-icon,
-.tl-table__header-button:hover .tl-table__header-button-icon {
-  opacity: 1;
+.tl-stepper {
+  --stepper-current-number-with-border: var(--color-foreground-border-strong);
+  --stepper-icon-step-border-warning: var(--color-system-danger-default);
+  --stepper-icon-step-border-success: var(--component-stepper-success);
+  --stepper-icon-step-checkmark: var(--color-foreground-icon-inverse-strong);
+  --stepper-label-text-upcoming: var(--color-foreground-text-disabled);
+  --stepper-label-border-upcoming: var(--color-foreground-border-discrete);
+  --stepper-divider-line: var(--color-foreground-icon-disabled);
 }
 
-.tl-table__header-cell--is-sorted {
-  background-color: var(--table-header-button);
+.tl-stepper__step {
+  position: relative;
+  display: flex;
+  justify-content: start;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
 }
-
-.tl-table__header-cell--is-sorted:hover {
-  background-color: var(--table-header-button-hover);
+.tl-stepper--label-below .tl-stepper__step {
+  flex-direction: column;
 }
-
-.tl-table__header-cell--is-sorted .tl-table__header-button-icon {
-  opacity: 1;
+.tl-stepper--lg .tl-stepper__step {
+  font-family: var(--detail-01-font-family);
+  font-size: var(--detail-01-font-size);
+  line-height: var(--detail-01-line-height);
+  font-weight: var(--detail-01-font-weight);
+  letter-spacing: var(--detail-01-letter-spacing);
+  text-transform: var(--detail-01-text-transform);
+  padding: 0 20px;
 }
-
-.tl-table__header-cell--is-sorted .tl-table__header-button-icon--rotate {
-  transform: rotate(180deg);
+.tl-stepper--sm .tl-stepper__step {
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
+  padding: 0 20px;
 }
-
-.tl-table__body-cell {
-  display: table-cell;
-  padding: 16px;
-  background-color: transparent;
-  color: var(--table-text);
-  font-family: var(--detail-02-font-family);
-  font-size: var(--detail-02-font-size);
-  line-height: var(--detail-02-line-height);
-  font-weight: var(--detail-02-font-weight);
-  letter-spacing: var(--detail-02-letter-spacing);
-  text-transform: var(--detail-02-text-transform);
-  transition: background-color 200ms ease;
-  min-width: 192px;
+.tl-stepper--horizontal:not(.tl-stepper--label-aside) .tl-stepper__list > .tl-stepper__step {
+  flex: 1 1 0;
+  min-inline-size: 60px;
 }
-.tl-table__body-cell:focus {
-  background-color: var(--table-input-focus);
+.tl-stepper--horizontal.tl-stepper--label-aside .tl-stepper__list > .tl-stepper__step {
+  flex: 0 0 auto;
+  min-inline-size: auto;
 }
-.tl-table__body-cell:hover:not(.tl-table__body-cell--checkbox) {
-  background-color: var(--table-body-cell-hover);
+.tl-stepper--horizontal.tl-stepper--label-aside.tl-stepper--hide-labels .tl-stepper__list > .tl-stepper__step {
+  min-inline-size: 40px;
 }
-.tl-table__row--expanded .tl-table__body-cell:hover:not(.tl-table__body-cell--checkbox) {
-  background-color: var(--table-body-row-selected);
+.tl-stepper--horizontal.tl-stepper--sm:not(.tl-stepper--label-aside) .tl-stepper__list > .tl-stepper__step {
+  min-inline-size: 40px;
 }
-.tl-table__body-cell--column-highlight {
-  background-color: var(--table-body-cell-hover);
+.tl-stepper--horizontal.tl-stepper--sm.tl-stepper--label-aside.tl-stepper--hide-labels .tl-stepper__list > .tl-stepper__step {
+  min-inline-size: 48px;
 }
-.tl-table__body-cell--checkbox, .tl-table__body-cell--expand {
-  min-width: 48px;
-  width: 48px;
-  padding: 0;
-  text-align: center;
-  background-color: inherit;
+.tl-stepper--lg .tl-stepper__step:last-of-type::after, .tl-stepper--sm .tl-stepper__step:last-of-type::after {
+  display: none;
 }
-.tl-table--compact .tl-table__body-cell {
-  height: 32px;
-  padding: 8px 16px;
+.tl-stepper--vertical.tl-stepper--lg .tl-stepper__step:last-of-type::after, .tl-stepper--vertical.tl-stepper--sm .tl-stepper__step:last-of-type::after {
+  display: none;
 }
-.tl-table--no-min-width .tl-table__body-cell {
-  min-width: unset;
+.tl-stepper--lg .tl-stepper__step::after {
+  content: " ";
+  position: absolute;
+  background-color: var(--stepper-divider-line);
 }
-.tl-table--vertical-dividers .tl-table__body-cell:not(:last-child):not(.tl-table__body-cell--expand) {
-  border-right: 1px solid var(--table-divider);
+.tl-stepper--lg.tl-stepper--vertical .tl-stepper__step::after {
+  height: 36px;
+  width: 1px;
+  top: 40px;
+  left: 36px;
 }
-.tl-table--zebra-columns-odd .tl-table__body-cell:nth-child(odd) {
-  background-color: var(--table-zebra-mode);
+.tl-stepper--lg.tl-stepper--horizontal .tl-stepper__step::after {
+  height: 1px;
+  left: calc(50% + 15px + 8px);
+  right: calc(-50% + 15px + 8px);
+  top: 16px;
 }
-.tl-table--zebra-columns-even .tl-table__body-cell:nth-child(even) {
-  background-color: var(--table-zebra-mode);
+.tl-stepper--lg.tl-stepper--horizontal.tl-stepper--label-aside:not(.tl-stepper--hide-labels) .tl-stepper__step::after {
+  height: 1px;
+  top: 16px;
+  width: 10px;
+  left: auto;
+  right: -10px;
 }
-.tl-table--cell-text-align-left .tl-table__body-cell {
-  text-align: left;
+.tl-stepper--sm.tl-stepper--vertical .tl-stepper__step::after {
+  content: " ";
+  position: absolute;
+  background-color: var(--stepper-divider-line);
+  height: 20px;
+  width: 1px;
+  top: 34px;
+  left: 32px;
 }
-.tl-table--cell-text-align-start .tl-table__body-cell {
-  text-align: start;
+.tl-stepper--sm.tl-stepper--horizontal .tl-stepper__step::after {
+  content: " ";
+  position: absolute;
+  background-color: var(--stepper-divider-line);
+  height: 1px;
+  left: calc(50% + 12px + 8px);
+  right: calc(-50% + 12px + 8px);
+  top: 13px;
 }
-.tl-table--cell-text-align-center .tl-table__body-cell {
+.tl-stepper--sm.tl-stepper--horizontal.tl-stepper--label-aside:not(.tl-stepper--hide-labels) .tl-stepper__step::after {
+  content: " ";
+  position: absolute;
+  background-color: var(--stepper-divider-line);
+  height: 1px;
+  top: 13px;
+  width: 10px;
+  left: auto;
+  right: -10px;
+}
+
+.tl-stepper__node {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  border-radius: 100px;
+  border-width: 1px;
+  border-style: solid;
   text-align: center;
+  position: relative;
 }
-.tl-table--cell-text-align-right .tl-table__body-cell {
-  text-align: right;
-}
-.tl-table--cell-text-align-end .tl-table__body-cell {
-  text-align: end;
+.tl-stepper--lg .tl-stepper__node {
+  height: 30px;
+  min-width: 30px;
+  font-size: 14px;
 }
-.tl-table--no-padding .tl-table__body-cell {
-  padding: 0;
+.tl-stepper--sm .tl-stepper__node {
+  height: 24px;
+  min-width: 24px;
 }
-.tl-table__row:hover:not(.tl-table__row--expanded) .tl-table__body-cell {
-  background-color: var(--table-body-row-hover);
+.tl-stepper__step--error .tl-stepper__node {
+  border-color: var(--stepper-icon-step-border-warning);
+  color: var(--stepper-icon-step-border-warning);
 }
-.tl-table__row--selected:hover:not(.tl-table__row--expanded) .tl-table__body-cell {
-  background-color: var(--table-body-row-selected-hover);
+.tl-stepper__step--success .tl-stepper__node {
+  background-color: var(--stepper-icon-step-border-success);
+  border-color: var(--stepper-icon-step-border-success);
+  color: var(--stepper-icon-step-checkmark);
 }
-.tl-table__row--expanded .tl-table__body-cell {
-  background-color: var(--table-body-row-selected);
+.tl-stepper__step--current .tl-stepper__node {
+  color: var(--stepper-current-number-with-border);
 }
-
-.tl-table__toolbar {
-  box-sizing: border-box;
+.tl-stepper__step--upcoming .tl-stepper__node {
+  border-color: var(--stepper-label-border-upcoming);
+  color: var(--stepper-label-text-upcoming);
 }
-.tl-table__toolbar * {
-  box-sizing: border-box;
+.tl-stepper__step--success .tl-stepper__node, .tl-stepper__step--error .tl-stepper__node {
+  justify-content: center;
 }
-.tl-table__toolbar {
-  display: table-caption;
-  position: relative;
-  background-color: var(--table-toolbar);
-  color: var(--table-text);
-  padding: 0 var(--tds-spacing-element-16);
-  height: 64px;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+.tl-stepper__step--success .tl-stepper__node::after, .tl-stepper__step--error .tl-stepper__node::after {
+  content: "";
+  display: block;
+  width: 20px;
+  height: 20px;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+  background-color: currentcolor;
 }
-.tl-table--compact .tl-table__toolbar {
-  height: 56px;
+.tl-stepper__step--success .tl-stepper__node::after {
+  mask-image: var(--icon-tick-svg);
 }
-
-.tl-table__upper-bar {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: space-between;
+.tl-stepper__step--error .tl-stepper__node::after {
+  mask-image: var(--icon-warning-svg);
 }
 
-.tl-table__actionbar-left {
-  display: flex;
-  align-items: center;
+.tl-stepper--sm .tl-stepper__step--success .tl-stepper__node::after,
+.tl-stepper--sm .tl-stepper__step--error .tl-stepper__node::after {
+  width: 16px;
+  height: 16px;
 }
 
-.tl-table__title {
-  font-family: var(--headline-07-font-family);
-  font-size: var(--headline-07-font-size);
-  line-height: var(--headline-07-line-height);
-  font-weight: var(--headline-07-font-weight);
-  letter-spacing: var(--headline-07-letter-spacing);
-  text-transform: var(--headline-07-text-transform);
-  display: flex;
-  align-self: baseline;
-  text-align: left;
-  letter-spacing: var(--tds-headline-07-ls);
-  padding-top: var(--tds-spacing-element-16);
-  margin-right: var(--tds-spacing-element-8);
+.tl-stepper__label {
+  text-align: center;
 }
-
-.tl-table__actionbar-right {
-  display: flex;
-  align-self: center;
-  column-gap: 8px;
-  position: relative;
+.tl-stepper--lg .tl-stepper__label {
+  font-family: var(--detail-01-font-family);
+  font-size: var(--detail-01-font-size);
+  line-height: var(--detail-01-line-height);
+  font-weight: var(--detail-01-font-weight);
+  letter-spacing: var(--detail-01-letter-spacing);
+  text-transform: var(--detail-01-text-transform);
+  font-size: 14px;
 }
-
-.tl-table__actionbar-right .tl-text-field:not(.tl-text-field--input-visible) {
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  cursor: pointer;
-  width: 40px;
-  min-width: 40px;
-  max-width: 40px;
-  height: 40px;
+.tl-stepper--sm .tl-stepper__label {
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
 }
-
-.tl-table__actionbar-right .tl-text-field:not(.tl-text-field--input-visible) .tl-text-field__input {
-  display: none;
+.tl-stepper__step--upcoming .tl-stepper__label {
+  color: var(--stepper-label-text-upcoming);
+  opacity: var(--tds-stepper-label-text-opacity-upcoming);
 }
-
-.tl-table__actionbar-right .tl-text-field:not(.tl-text-field--input-visible)::before {
-  content: "";
+.tl-stepper--hide-labels .tl-stepper__label {
   position: absolute;
-  width: 40px;
-  height: 40px;
-  border-radius: 4px 4px 0 0;
-  background-color: transparent;
-  transition: background-color 250ms ease;
-  right: 6px;
-  top: 50%;
-  transform: translateY(-50%);
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
 }
 
-.tl-table__actionbar-right .tl-text-field:not(.tl-text-field--input-visible) .tl-text-field__suffix--icon {
-  position: absolute;
-  right: 16px;
-  top: 50%;
-  transform: translateY(calc(-50% - 1px));
-  z-index: 1;
-  pointer-events: none;
+.tl-stepper {
+  box-sizing: border-box;
 }
-
-.tl-table__actionbar-right .tl-text-field:not(.tl-text-field--input-visible):hover::before {
-  background-color: var(--table-toolbar-searchbar-hover);
+.tl-stepper * {
+  box-sizing: border-box;
 }
-
-.tl-table__header-input-wrapper {
-  position: relative;
+.tl-stepper {
+  display: table;
+  table-layout: fixed;
   width: 100%;
-  height: 100%;
+  list-style: none;
 }
 
-.tl-table__header-input-wrapper .tl-icon {
-  color: var(--table-input-header-icon);
-  position: absolute;
-  left: 15px;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 1;
-  pointer-events: none;
+.tl-stepper__list {
+  display: flex;
+  justify-content: space-evenly;
+  min-width: 100%;
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
-
-.tl-table__header-input {
-  box-sizing: border-box;
-  font-family: var(--detail-02-font-family);
-  font-size: var(--detail-02-font-size);
-  line-height: var(--detail-02-line-height);
-  font-weight: var(--detail-02-font-weight);
-  letter-spacing: var(--detail-02-letter-spacing);
-  text-transform: var(--detail-02-text-transform);
-  color: var(--table-text);
-  padding: 0 var(--tds-spacing-element-16);
+.tl-stepper:not(.tl-stepper--label-aside) .tl-stepper__list {
   width: 100%;
-  border-radius: 0;
-  background-color: transparent;
-  border: 0;
-  border-bottom: 2px solid transparent;
-  outline: none;
 }
-.tl-table--compact .tl-table__header-input {
-  height: 32px;
+.tl-stepper--horizontal:not(.tl-stepper--label-aside) .tl-stepper__list {
+  justify-content: flex-start;
 }
-.tl-table__header-input {
-  padding-left: 35px;
-  height: 48px;
+.tl-stepper--horizontal.tl-stepper--label-aside .tl-stepper__list {
+  display: flex;
+  justify-content: flex-start;
+  min-width: 100%;
 }
-.tl-table__header-input::placeholder {
-  color: var(--table-input-header-placeholder);
+.tl-stepper--horizontal.tl-stepper--label-aside.tl-stepper--hide-labels .tl-stepper__list {
+  display: flex;
+  justify-content: flex-start;
 }
-.tl-table__header-input:focus {
-  background-color: var(--table-input-header-focus);
-  border-bottom: 2px solid var(--color-foreground-border-accent-focus);
+.tl-stepper--vertical .tl-stepper__list {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: 52px;
+  min-width: 0;
+}
+.tl-stepper--vertical.tl-stepper--sm .tl-stepper__list {
+  gap: 36px;
+}
+
+.tl-table {
+  /* Table-text */
+  --table-text: var(--color-foreground-text-strong);
+  /* Table-body-cell */
+  --table-body-cell-hover: var(--component-table-cell-hover);
+  /* Table-body-row */
+  --table-body-row: var(--component-table-cell);
+  --table-body-row-hover: var(--component-table-cell-hover);
+  --table-zebra-mode: var(--component-table-secondary-cell);
+  --table-body-row-selected: var(--color-background-surface-300);
+  --table-body-row-selected-hover: var(--color-background-surface-400);
+  /* Table input body */
+  --table-input-focus: var(--color-background-layer-02);
+  --table-input-hover: var(--color-background-layer-03);
+  --table-input-disabled: var(--color-background-layer-01);
+  --table-input-text-disabled: var(--color-foreground-text-subtle);
+  /* Table input header */
+  --table-input-header-icon: var(--color-foreground-icon-soft);
+  --table-input-header-placeholder: var(--color-foreground-text-subtle);
+  --table-input-header-focus: var(--color-background-layer-01);
+  /* Table-footer */
+  --table-footer: var(--component-table-pagination-base);
+  --table-footer-page-selector-input: var(--component-table-pagination-dropdown);
+  --table-footer-page-selector-input-hover: var(--color-background-layer-03);
+  --table-footer-page-selector-input-disabled: var(--color-background-layer-01);
+  --table-footer-button-hover: var(--color-background-surface-300);
+  /* Table-header */
+  --table-header: var(--color-background-surface-300);
+  --table-header-hover: var(--color-background-surface-400);
+  --table-header-button: var(--color-background-surface-200);
+  --table-header-button-hover: var(--color-background-surface-300);
+  --table-header-button-focus: var(--color-foreground-border-accent-focus);
+  /* Table-toolbar */
+  --table-toolbar: var(--color-background-surface-400);
+  --table-toolbar-searchbar: var(--component-table-pagination-dropdown);
+  --table-toolbar-searchbar-hover: var(--component-table-pagination-base);
+  --table-toolbar-searchbar-border-bottom: var(--color-foreground-border-accent-focus);
+  /* Divider */
+  --table-divider: var(--color-foreground-border-discrete);
+  /* Table-icons */
+  --table-icon: var(--color-foreground-icon-strong);
+  --table-icon-disabled: var(--color-foreground-icon-disabled);
 }
-
-.tl-table__body-cell .tl-text-field {
-  height: 48px;
-  min-width: auto;
-  padding-bottom: 0;
-  cursor: pointer;
+.tl-table.tl-table--primary {
+  --table-body-row: var(--component-table-cell);
+  --table-body-row-hover: var(--component-table-cell-hover);
+  --table-body-cell-hover: var(--component-table-cell-hover);
+  --table-zebra-mode: var(--component-table-secondary-cell);
 }
-
-.tl-table--compact .tl-table__body-cell .tl-text-field {
-  height: 32px;
+.tl-table.tl-table--secondary {
+  --table-body-row: var(--component-table-secondary-cell);
+  --table-body-row-hover: var(--component-table-cell-hover);
+  --table-body-cell-hover: var(--component-table-cell-hover);
+  --table-zebra-mode: var(--component-table-cell);
 }
 
-.tl-table__body-cell .tl-text-field .tl-text-field__input,
-.tl-table__body-cell .tl-text-field .tl-text-field__input:hover {
-  box-shadow: 0 0 0 0 transparent;
+.tds-mode-dark .tl-table.tl-table--secondary {
+  --table-body-cell-hover: var(--color-background-surface-300);
+  --table-body-row-hover: var(--color-background-surface-300);
 }
 
-.tl-table__body-cell .tl-text-field .tl-text-field__input:focus {
-  box-shadow: inset var(--text-field-box-shadow-focus);
-  background-color: var(--table-input-focus);
+.tl-table__footer {
+  display: table-footer-group;
+  height: var(--tds-spacing-element-48);
 }
-
-.tl-table--compact .tl-table__body-cell .tl-text-field .tl-text-field__input {
-  height: 32px;
+.tl-table--compact .tl-table__footer {
+  height: var(--tds-spacing-element-32);
 }
 
-.tl-table__body-cell .tl-text-field .tl-text-field__suffix--icon {
-  display: none;
+.tl-table__footer .tl-dropdown__text {
+  max-width: calc(100% - 20px);
 }
 
-.tl-table__body-cell .tl-text-field:hover .tl-text-field__suffix--icon,
-.tl-table__body-cell .tl-text-field:has(.tl-text-field__input:focus) .tl-text-field__suffix--icon {
-  display: inline-block;
+.tl-table__footer .tl-dropdown--sm :is(.tl-dropdown__button, .tl-dropdown__select, .tl-dropdown__input),
+.tl-table__footer .tl-dropdown__option {
+  height: 29px;
 }
 
-.tl-table__body-cell .tl-text-field.tl-text-field--disabled .tl-text-field__suffix--icon {
-  display: inline-block;
+.tl-table__footer-row {
+  display: table-row;
+  border-bottom: 1px solid var(--table-divider);
+  background-color: var(--table-footer);
+  color: var(--table-text);
+  transition: background-color 200ms ease;
 }
 
-.tl-table__body-cell--expand {
-  position: relative;
-}
-.tl-table--compact .tl-table__body-cell--expand {
-  padding: 0;
-}
-.tl-table__body-cell--expand:has(.tl-table__expand-input:focus), .tl-table__body-cell--expand:has(.tl-table__expand-input:focus-visible), .tl-table__body-cell--expand:has(.tl-table__expand-input:active) {
-  outline: 2px solid var(--table-header-button-focus);
-  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
-  outline-offset: -1px;
-  z-index: 1;
+.tl-table__footer-cell {
+  padding: 0 var(--tds-spacing-element-16);
 }
 
-.tl-table__expand-control-container {
+.tl-table__pagination {
+  height: var(--tds-spacing-element-48);
   display: flex;
-  justify-content: center;
   align-items: center;
-  height: 46px;
-  cursor: pointer;
-  padding: 0 16px;
-  position: relative;
-}
-.tl-table--compact .tl-table__expand-control-container {
-  height: 30px;
+  justify-content: space-between;
 }
-
-.tl-table__expand-input {
-  all: unset;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  cursor: pointer;
+.tl-table--compact .tl-table__pagination {
+  height: var(--tds-spacing-element-32);
 }
 
-.tl-table__expand-icon {
-  height: 16px;
-  width: 16px;
-  transition: transform 200ms ease;
-  transform: rotate(0);
+.tl-table__row-selector,
+.tl-table__page-selector {
   display: flex;
   align-items: center;
-  justify-content: center;
-  color: var(--table-text);
-}
-
-.tl-table__row--expanded {
-  background-color: var(--table-body-row-selected);
-  border-bottom: none;
 }
 
-.tl-table__row--expanded .tl-table__expand-icon {
-  transform: rotate(180deg);
+.tl-table__rows-per-page {
+  margin-right: var(--tds-spacing-element-16);
+  display: flex;
+  align-items: center;
 }
 
-.tl-table__expand-row {
-  display: none;
-  transition: background-color 200ms ease;
-  background-color: var(--table-body-row-selected);
-  border-bottom: 1px solid var(--table-divider);
-}
-.tl-table__expand-row--expanded {
-  display: table-row;
+.tl-table__rows-per-page-label {
+  margin-right: var(--tds-spacing-element-8);
+  font-family: var(--detail-02-font-family);
 }
 
-.tl-table__expand-row-cell {
-  max-width: 1px;
-  overflow: auto;
-  padding: 16px 16px 16px 66px;
+.tl-table__rows-per-page-select {
+  background-color: var(--table-footer-page-selector-input);
   color: var(--table-text);
-  background-color: var(--table-body-row-selected);
-}
-.tl-table__expand-row-cell::-webkit-scrollbar {
-  height: var(--tl-scrollbar-height);
-}
-.tl-table__expand-row-cell::-webkit-scrollbar-track {
-  background: var(--tl-scrollbar-track-color);
+  height: 30px;
+  border: none;
+  border-radius: var(--tds-spacing-element-4);
+  padding: 0 var(--tds-spacing-element-8);
+  transition: background-color 250ms ease;
+  font-family: var(--detail-02-font-family);
 }
-.tl-table__expand-row-cell::-webkit-scrollbar-thumb {
-  border-radius: 40px;
-  background: var(--tl-scrollbar-thumb-color);
-  border-width: var(--tl-scrollbar-thumb-border-width);
-  border-style: solid;
-  border-color: transparent;
-  background-clip: padding-box;
+.tl-table__rows-per-page-select:hover {
+  background-color: var(--table-footer-page-selector-input-hover);
 }
-.tl-table__expand-row-cell::-webkit-scrollbar-thumb:hover {
-  border-width: var(--tl-scrollbar-thumb-border-hover-width);
+.tl-table__rows-per-page-select:disabled {
+  color: var(--table-footer-page-selector-input-color-disabled);
 }
-.tl-table__expand-row-cell::-webkit-scrollbar-button {
-  height: 0;
-  width: 0;
+.tl-table--compact .tl-table__rows-per-page-select {
+  height: var(--tds-spacing-element-24);
 }
-@supports not selector(::-webkit-scrollbar) {
-  .tl-table__expand-row-cell {
-    scrollbar-color: var(--tl-scrollbar-thumb-color) var(--tl-scrollbar-track-color);
-    scrollbar-width: var(--tl-scrollbar-width-standard);
-  }
+
+.tl-table__page-selector-input {
+  background-color: var(--table-footer-page-selector-input);
+  border-radius: var(--tds-spacing-element-4);
+  color: var(--table-text);
+  margin-right: var(--tds-spacing-element-4);
+  padding-right: var(--tds-spacing-element-8);
+  width: 74px;
+  height: 30px;
+  border: none;
+  transition: background-color 250ms ease;
+  font-family: var(--detail-02-font-family);
 }
-.tl-table--compact .tl-table__expand-row-cell {
-  padding: 8px 16px 8px 66px;
+.tl-table__page-selector-input:hover {
+  background-color: var(--table-footer-page-selector-input-hover);
 }
-.tl-table__expand-row-cell--overflow-visible {
-  overflow: visible;
+.tl-table__page-selector-input:disabled {
+  color: var(--table-footer-page-selector-input-color-disabled);
 }
-.tl-table__expand-row-cell--overflow-hidden {
-  overflow: hidden;
+.tl-table--compact .tl-table__page-selector-input {
+  height: var(--tds-spacing-element-24);
 }
 
-.tl-table.tl-table--primary .tl-text-field__input {
-  background-color: var(--component-table-cell);
-}
-.tl-table.tl-table--secondary .tl-text-field__input {
-  background-color: var(--component-table-secondary-cell);
+.tl-table__footer-text {
+  padding: 1px 22px 0 0;
+  font-family: var(--detail-02-font-family);
 }
-
-.tl-table--compact .tl-table__header-cell--checkbox {
-  padding-left: 16px;
+.tl-table__footer-text span {
+  font-family: var(--detail-02-font-family);
 }
 
-.tl-table__header-cell--checkbox {
-  padding: 16px;
+.tl-table__footer-button {
+  border-radius: var(--tds-spacing-element-4);
+  color: var(--table-icon);
+  height: var(--tds-spacing-element-32);
+  width: var(--tds-spacing-element-32);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  transition: background-color 250ms ease;
 }
-
-.tl-table__body-cell--checkbox {
-  padding: 16px;
+.tl-table__footer-button:hover {
+  background-color: var(--table-footer-button-hover);
 }
-
-/* tl-folder-tabs.scss (overlay buttons, no JS) */
-.tl-folder-tabs {
-  --folder-tabs-scroll-button-surface: var(--color-background-surface-200);
-  --folder-tabs-scroll-button-surface-hover: var(--color-background-surface-300);
-  --folder-tabs-scroll-button-surface-active: var(--color-background-surface-400);
-  --folder-tabs-scroll-button-text: var(--color-foreground-text-soft);
+.tl-table__footer-button:disabled {
+  color: var(--table-icon-disabled);
+  cursor: default;
 }
-
-.tl-folder-tabs__tab {
-  --folder-tab-surface: var(--color-background-surface-200);
-  --folder-tab-surface-selected: var(--color-background-layer-01);
-  --folder-tab-surface-hover: var(--color-background-surface-300);
-  --folder-tab-border-selected: var(--color-foreground-border-accent-focus);
-  --folder-tab-divider: var(--color-foreground-icon-discrete);
-  --folder-tab-text: var(--color-foreground-text-soft);
-  --folder-tab-text-disabled: var(--color-foreground-text-disabled);
+.tl-table__footer-button:disabled:hover {
+  background-color: transparent;
 }
-
-.tl-folder-tabs--primary .tl-folder-tabs__tab {
-  --folder-tab-surface-selected: var(--color-background-layer-01);
+.tl-table--compact .tl-table__footer-button {
+  height: 28px;
+  width: 28px;
 }
 
-.tl-folder-tabs--secondary .tl-folder-tabs__tab {
-  --folder-tab-surface-selected: var(--color-background-layer-02);
+.tl-table {
+  box-sizing: border-box;
 }
-
-/* tl-folder-tabs.scss (overlay buttons, no JS) */
-.tl-folder-tabs__tab {
-  all: unset;
-  font-family: var(--headline-07-font-family);
-  font-size: var(--headline-07-font-size);
-  line-height: var(--headline-07-line-height);
-  font-weight: var(--headline-07-font-weight);
-  letter-spacing: var(--headline-07-letter-spacing);
-  text-transform: var(--headline-07-text-transform);
+.tl-table * {
   box-sizing: border-box;
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  min-inline-size: 142px;
-  inline-size: auto;
-  flex: 0 0 auto;
-  white-space: nowrap;
-  padding: 16px;
-  text-align: left;
-  cursor: pointer;
-  border-left: 1px solid transparent;
-  border-top: 2px solid var(--folder-tab-surface);
-  background-color: var(--folder-tab-surface);
-  color: var(--folder-tab-text);
 }
-.tl-folder-tabs__tab + .tl-folder-tabs__tab {
-  border-left-color: var(--folder-tab-divider);
+.tl-table {
+  border-collapse: collapse;
+  display: table;
+  color: var(--table-text);
 }
-.tl-folder-tabs__tab:focus-visible {
-  outline: 2px solid currentcolor;
-  outline-offset: -4px;
-  box-shadow: none;
+.tl-table--responsive {
+  width: 100%;
 }
-.tl-folder-tabs__tab:hover:not(.tl-folder-tabs__tab--disabled):not(.tl-folder-tabs__tab--selected) {
-  background-color: var(--folder-tab-surface-hover);
-  border-top-color: var(--folder-tab-surface-hover);
-  color: var(--folder-tab-text);
+.tl-table--horizontal-scroll {
+  display: block;
+  overflow-x: auto;
+  white-space: nowrap;
 }
-.tl-folder-tabs__tab--selected {
-  background-color: var(--folder-tab-surface-selected);
-  border-top-color: var(--folder-tab-border-selected);
-  color: var(--folder-tab-text);
+.tl-table--horizontal-scroll::-webkit-scrollbar {
+  height: var(--tl-scrollbar-height);
 }
-.tl-folder-tabs__tab--selected::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: -1px;
-  bottom: 0;
-  width: 1px;
-  background-color: var(--folder-tab-surface-selected);
-  z-index: 1;
+.tl-table--horizontal-scroll::-webkit-scrollbar-track {
+  background: var(--tl-scrollbar-track-color);
 }
-.tl-folder-tabs__tab--disabled {
-  color: var(--folder-tab-text-disabled);
-  cursor: not-allowed;
-  user-select: none;
+.tl-table--horizontal-scroll::-webkit-scrollbar-thumb {
+  border-radius: 40px;
+  background: var(--tl-scrollbar-thumb-color);
+  border-width: var(--tl-scrollbar-thumb-border-width);
+  border-style: solid;
+  border-color: transparent;
+  background-clip: padding-box;
 }
-.tl-folder-tabs__tab--disabled:focus-visible {
-  outline: none;
-  box-shadow: none;
+.tl-table--horizontal-scroll::-webkit-scrollbar-thumb:hover {
+  border-width: var(--tl-scrollbar-thumb-border-hover-width);
 }
-
-.tl-folder-tabs {
-  box-sizing: border-box;
+.tl-table--horizontal-scroll::-webkit-scrollbar-button {
+  height: 0;
+  width: 0;
 }
-.tl-folder-tabs * {
-  box-sizing: border-box;
+@supports not selector(::-webkit-scrollbar) {
+  .tl-table--horizontal-scroll {
+    scrollbar-color: var(--tl-scrollbar-thumb-color) var(--tl-scrollbar-track-color);
+    scrollbar-width: var(--tl-scrollbar-width-standard);
+  }
 }
-.tl-folder-tabs {
-  display: flex;
-  overflow-x: scroll;
-  scrollbar-width: none;
-  position: relative;
-  outline: 0;
+.tl-table--primary {
+  --table-body-row: var(--component-table-cell);
+  --table-body-row-hover: var(--component-table-cell-hover);
+  --table-zebra-mode: var(--component-table-secondary-cell);
 }
-.tl-folder-tabs::-webkit-scrollbar {
-  display: none;
+.tl-table--secondary {
+  --table-body-row: var(--component-table-secondary-cell);
+  --table-body-row-hover: var(--component-table-cell-hover);
+  --table-zebra-mode: var(--component-table-cell);
 }
 
-/* Overlay buttons (optional in markup; visible via media query) */
-.tl-folder-tabs__scroll-button {
-  background-color: var(--folder-tab-surface);
-  color: var(--folder-tabs-scroll-button-text);
-  min-width: 48px;
-  border: 0;
-  justify-content: center;
-  align-items: center;
-  position: sticky;
-  cursor: pointer;
-}
-.tl-folder-tabs__scroll-button:hover {
-  background-color: var(--folder-tabs-scroll-button-surface-hover);
-}
-.tl-folder-tabs__scroll-button:active {
-  background-color: var(--folder-tabs-scroll-button-surface-active);
+.tl-table__header {
+  display: table-header-group;
 }
 
-/* left/right anchoring over the track */
-.tl-folder-tabs__scroll-button--left {
-  left: 0;
-  z-index: 1;
+.tl-table__body {
+  display: table-row-group;
 }
 
-.tl-folder-tabs__scroll-button--right {
-  right: 0;
-  z-index: 1;
+.tl-table__row {
+  display: table-row;
+  border-bottom: 1px solid var(--table-divider);
+  background-color: var(--table-body-row);
+  transition: background-color 200ms ease;
+  color: var(--table-text);
 }
-
-.tl-folder-tabs__scroll-button svg {
-  fill: var(--folder-tabs-scroll-button-text);
+.tl-table__row:hover:not(.tl-table__row--expanded) {
+  background-color: var(--table-body-row-hover);
+  border-bottom-color: var(--table-divider);
 }
-
-.tl-inline-tabs {
-  /* Horizontal divider */
-  --inline-tabs-horizontal-divider: var(--color-foreground-icon-discrete);
-  /* Scroll button */
-  --inline-tabs-scroll-button-text: var(--color-foreground-icon-strong);
-  --inline-tabs-scroll-button: transparent;
-  --inline-tabs-scroll-button-hover: transparent;
-  --inline-tabs-scroll-button-active: transparent;
+.tl-table__row--selected {
+  background-color: var(--table-body-row-selected);
 }
-
-.tl-inline-tabs__tab {
-  /* Tab */
-  --inline-tabs-tab: var(--color-foreground-text-soft);
-  --inline-tabs-tab-selected: var(--color-foreground-text-strong);
-  --inline-tabs-tab-disabled: var(--color-foreground-text-disabled);
-  --inline-tabs-tab-hover: var(--color-foreground-text-strong);
-  --inline-tabs-tab-focus: var(--color-foreground-border-accent-focus);
-  --inline-tabs-tab-indicator-active: var(--color-foreground-border-accent-focus);
-  --inline-tabs-tab-indicator-hover: var(--color-foreground-border-discrete);
+.tl-table__row--selected:hover {
+  background-color: var(--table-body-row-selected-hover);
 }
-
-.tl-inline-tabs__tab {
-  all: unset;
-  margin-right: 32px;
-  box-sizing: border-box;
+.tl-table--clickable .tl-table__row, .tl-table__row--clickable {
+  cursor: pointer;
 }
-.tl-inline-tabs__tab * {
-  box-sizing: border-box;
+.tl-table__row--clickable:focus-visible {
+  outline: 2px solid var(--table-header-button-focus);
+  outline-offset: -2px;
 }
-.tl-inline-tabs__tab {
+.tl-table--zebra-rows-odd .tl-table__body .tl-table__row:nth-child(odd) {
+  background-color: var(--table-zebra-mode);
+}
+.tl-table--zebra-rows-even .tl-table__body .tl-table__row:nth-child(even) {
+  background-color: var(--table-zebra-mode);
+}
+
+.tl-table__header-cell {
+  display: table-cell;
+  padding: 16px;
+  background-color: var(--table-header);
+  border-bottom: 1px solid var(--table-divider);
   font-family: var(--headline-07-font-family);
   font-size: var(--headline-07-font-size);
   line-height: var(--headline-07-line-height);
   font-weight: var(--headline-07-font-weight);
   letter-spacing: var(--headline-07-letter-spacing);
   text-transform: var(--headline-07-text-transform);
-  color: var(--inline-tabs-tab);
-  text-decoration: none;
-  display: block;
-  position: relative;
-  transition: color 0.15s ease-in-out 0s;
-  white-space: nowrap;
-  background-color: transparent;
-  border: 0;
-  padding: 20px 4px;
+  color: var(--table-text);
+  text-align: left;
+  transition: background-color 200ms ease;
+  min-width: 192px;
 }
-.tl-inline-tabs__tab:focus-visible {
-  outline: none;
+.tl-table__header-cell:hover:not(.tl-table__header-cell--checkbox):not(.tl-table__header-cell--expand) {
+  background-color: var(--table-header-hover);
 }
-.tl-inline-tabs__tab:focus-visible::before {
-  content: "";
-  position: absolute;
-  inset: 18px 0;
-  border-radius: 2px;
-  box-shadow: 0 0 0 2px var(--inline-tabs-tab-focus) inset;
-  z-index: 2;
-  pointer-events: none;
+.tl-table__header-cell:first-of-type {
+  border-top-left-radius: 4px;
 }
-.tl-inline-tabs__tab::after {
-  background-color: var(--inline-tabs-tab-indicator-hover);
-  content: " ";
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  margin-left: auto;
-  width: 0%;
-  margin-right: auto;
-  height: 2px;
-  z-index: 1;
-  transition: width 0.15s ease-in-out 0s;
+.tl-table__header-cell:last-of-type {
+  border-top-right-radius: 4px;
 }
-.tl-inline-tabs__tab:not(.tl-inline-tabs__tab--selected)::after {
-  width: 0%;
+.tl-table:has(.tl-table__toolbar) .tl-table__header-cell:first-of-type, .tl-table__header-cell:has(.tl-table__header-input-wrapper):first-of-type {
+  border-top-left-radius: 0;
 }
-.tl-inline-tabs__tab:hover {
-  cursor: pointer;
-  color: var(--inline-tabs-tab-hover);
+.tl-table:has(.tl-table__toolbar) .tl-table__header-cell:last-of-type, .tl-table__header-cell:has(.tl-table__header-input-wrapper):last-of-type {
+  border-top-right-radius: 0;
 }
-.tl-inline-tabs__tab:hover::after {
-  width: 100%;
+.tl-table__header-cell:has(.tl-table__header-input-wrapper), .tl-table--no-header-padding .tl-table__header-cell, .tl-table__header-cell--sortable {
+  padding: 0;
 }
-.tl-inline-tabs__tab--selected {
-  color: var(--inline-tabs-tab-selected);
+.tl-table__header-cell--checkbox, .tl-table__header-cell--expand {
+  min-width: 48px;
+  width: 48px;
+  padding: 0;
+  text-align: center;
+  background-color: var(--table-header);
 }
-.tl-inline-tabs__tab--selected::after {
-  background-color: var(--inline-tabs-tab-indicator-active);
-  width: 100%;
+.tl-table--compact .tl-table__header-cell {
+  height: 32px;
+  padding: 8px 16px;
 }
-.tl-inline-tabs__tab--disabled {
-  color: var(--inline-tabs-tab-disabled);
-  pointer-events: none;
-  cursor: not-allowed;
+.tl-table--compact .tl-table__header-cell--checkbox, .tl-table--compact .tl-table__header-cell--expand, .tl-table--compact .tl-table__header-cell:has(.tl-table__header-input-wrapper) {
+  padding: 0;
 }
-.tl-inline-tabs__tab--disabled::after {
-  content: none;
+.tl-table--no-min-width .tl-table__header-cell {
+  min-width: unset;
 }
-.tl-inline-tabs__tab--disabled:focus-visible::before {
-  box-shadow: none;
+.tl-table--header-text-align-left .tl-table__header-cell {
+  text-align: left;
 }
-
-.tl-inline-tabs {
-  box-sizing: border-box;
+.tl-table--header-text-align-start .tl-table__header-cell {
+  text-align: start;
+}
+.tl-table--header-text-align-center .tl-table__header-cell {
+  text-align: center;
+}
+.tl-table--header-text-align-right .tl-table__header-cell {
+  text-align: right;
 }
-.tl-inline-tabs * {
-  box-sizing: border-box;
+.tl-table--header-text-align-end .tl-table__header-cell {
+  text-align: end;
 }
-.tl-inline-tabs {
+
+.tl-table__header-button {
   display: flex;
-  flex-wrap: nowrap;
-  white-space: nowrap;
+  align-items: center;
+  gap: 8px;
+  justify-content: start;
+  flex-direction: row;
   width: 100%;
-  overflow-x: scroll;
-  scrollbar-width: none;
-  gap: 16px;
-  position: relative;
+  height: 100%;
+  padding: 16px;
   background-color: transparent;
+  border: none;
+  cursor: pointer;
+  transition: background-color 200ms ease;
+  font-family: var(--headline-07-font-family);
+  font-size: var(--headline-07-font-size);
+  line-height: var(--headline-07-line-height);
+  font-weight: var(--headline-07-font-weight);
+  letter-spacing: var(--headline-07-letter-spacing);
+  text-transform: var(--headline-07-text-transform);
+  color: var(--table-text);
+  text-align: left;
 }
-.tl-inline-tabs::-webkit-scrollbar {
-  display: none;
+.tl-table__header-button:focus-visible, .tl-table__header-button:focus, .tl-table__header-button:active {
+  outline: 2px solid var(--table-header-button-focus);
+  outline-offset: -2px;
 }
-.tl-inline-tabs::after {
-  border-bottom: 1px solid var(--inline-tabs-horizontal-divider);
-  content: " ";
-  display: block;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  position: absolute;
+.tl-table--compact .tl-table__header-button {
+  padding: 0;
 }
 
-.tl-inline-tabs__scroll-button {
-  background-color: var(--inline-tabs-scroll-button);
-  color: var(--inline-tabs-scroll-button-text);
-  cursor: pointer;
-  min-width: 48px;
-  border: 0;
-  display: block;
-  justify-content: center;
-  align-items: center;
+.tl-table__header-button-text {
+  color: var(--table-text);
+  text-align: left;
+}
+
+.tl-table__header-button-icon {
+  flex: 0 0 16px;
+  height: 16px;
+  width: 16px;
+  opacity: 0;
+  transform-origin: center;
+  transition: opacity 200ms ease-in, transform 200ms ease;
+  color: var(--table-text);
+}
+
+.tl-table__header-button:focus-visible .tl-table__header-button-icon,
+.tl-table__header-button:focus .tl-table__header-button-icon,
+.tl-table__header-button:active .tl-table__header-button-icon,
+.tl-table__header-button:hover .tl-table__header-button-icon {
   opacity: 1;
-  position: sticky;
 }
 
-.tl-inline-tabs__scroll-button--right {
-  right: 0;
-  z-index: 1;
+.tl-table__header-cell--is-sorted {
+  background-color: var(--table-header-button);
 }
 
-.tl-inline-tabs__scroll-button--left {
-  left: 0;
-  z-index: 1;
+.tl-table__header-cell--is-sorted:hover {
+  background-color: var(--table-header-button-hover);
 }
 
-.tl-inline-tabs__scroll-button svg {
-  fill: var(--inline-tabs-scroll-button-text);
+.tl-table__header-cell--is-sorted .tl-table__header-button-icon {
+  opacity: 1;
 }
 
-.tl-navigation-tabs__tab {
-  /* tds-navigation-tab variables */
-  --navigation-tabs-tab: var(--color-foreground-text-soft);
-  --navigation-tabs-tab-selected: var(--color-foreground-text-strong);
-  --navigation-tabs-tab-hover: var(--color-foreground-text-strong);
-  --navigation-tabs-tab-focus: var(--color-foreground-text-strong);
-  --navigation-tabs-tab-disabled: var(--color-foreground-text-disabled);
-  --navigation-tabs-tab-indicator-hover: var(--color-foreground-border-discrete);
-  --navigation-tabs-tab-indicator-active: var(--color-foreground-border-accent-focus);
+.tl-table__header-cell--is-sorted .tl-table__header-button-icon--rotate {
+  transform: rotate(180deg);
 }
 
-.tl-navigation-tabs {
-  /* tds-navigation-tabs variables */
-  --navigation-tabs-horizontal-divider: var(--color-foreground-icon-discrete);
-  --navigation-tabs-tab-primary: var(--color-background-base);
-  --navigation-tabs-tab-secondary: var(--color-background-layer-01);
-  --navigation-tabs: var(--navigation-tabs-tab-primary);
-  --navigation-tabs-scroll-button-icon: var(--color-foreground-icon-strong);
-  --navigation-tabs-scroll-button: var(--navigation-tabs-tab-primary);
-  --navigation-tabs-scroll-button-hover: var(--navigation-tabs-tab-primary);
-  --navigation-tabs-scroll-button-active: var(--navigation-tabs-tab-primary);
+.tl-table__body-cell {
+  display: table-cell;
+  padding: 16px;
+  background-color: transparent;
+  color: var(--table-text);
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
+  transition: background-color 200ms ease;
+  min-width: 192px;
 }
-.tl-navigation-tabs.tds-mode-variant-primary {
-  --navigation-tabs: var(--navigation-tabs-tab-primary);
-  --navigation-tabs-scroll-button: var(--navigation-tabs-tab-primary);
+.tl-table__body-cell:focus {
+  background-color: var(--table-input-focus);
 }
-.tl-navigation-tabs.tds-mode-variant-secondary {
-  --navigation-tabs: var(--navigation-tabs-tab-secondary);
-  --navigation-tabs-scroll-button: var(--navigation-tabs-tab-secondary);
+.tl-table__body-cell:hover:not(.tl-table__body-cell--checkbox) {
+  background-color: var(--table-body-cell-hover);
 }
-
-.tl-navigation-tabs__tab {
-  all: unset;
-  margin-right: 32px;
-  box-sizing: border-box;
+.tl-table__row--expanded .tl-table__body-cell:hover:not(.tl-table__body-cell--checkbox) {
+  background-color: var(--table-body-row-selected);
 }
-.tl-navigation-tabs__tab * {
-  box-sizing: border-box;
+.tl-table__body-cell--column-highlight {
+  background-color: var(--table-body-cell-hover);
 }
-.tl-navigation-tabs__tab {
-  font-family: var(--headline-07-font-family);
-  font-size: var(--headline-07-font-size);
-  line-height: var(--headline-07-line-height);
-  font-weight: var(--headline-07-font-weight);
-  letter-spacing: var(--headline-07-letter-spacing);
-  text-transform: var(--headline-07-text-transform);
-  color: var(--navigation-tabs-tab);
-  text-decoration: none;
-  display: block;
-  position: relative;
-  transition: color 0.15s ease-in-out 0s;
-  white-space: nowrap;
-  background-color: transparent;
-  border: 0;
-  padding: 26px 4px;
+.tl-table__body-cell--checkbox, .tl-table__body-cell--expand {
+  min-width: 48px;
+  width: 48px;
+  padding: 0;
+  text-align: center;
+  background-color: inherit;
 }
-.tl-navigation-tabs__tab:focus-visible {
-  outline: none;
+.tl-table--compact .tl-table__body-cell {
+  height: 32px;
+  padding: 8px 16px;
 }
-.tl-navigation-tabs__tab:focus-visible::before {
-  content: "";
-  position: absolute;
-  inset: 18px 0;
-  border-radius: 2px;
-  box-shadow: 0 0 0 2px var(--navigation-tabs-tab-focus) inset;
-  z-index: 2;
-  pointer-events: none;
+.tl-table--no-min-width .tl-table__body-cell {
+  min-width: unset;
 }
-.tl-navigation-tabs__tab::after {
-  background-color: var(--navigation-tabs-tab-indicator-hover);
-  content: " ";
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  margin-left: auto;
-  width: 0%;
-  margin-right: auto;
-  height: 2px;
-  z-index: 1;
-  transition: width 0.15s ease-in-out 0s;
+.tl-table--vertical-dividers .tl-table__body-cell:not(:last-child):not(.tl-table__body-cell--expand) {
+  border-right: 1px solid var(--table-divider);
 }
-.tl-navigation-tabs__tab:not(.tl-navigation-tabs__tab--selected)::after {
-  width: 0%;
+.tl-table--zebra-columns-odd .tl-table__body-cell:nth-child(odd) {
+  background-color: var(--table-zebra-mode);
 }
-.tl-navigation-tabs__tab:hover {
-  cursor: pointer;
-  color: var(--navigation-tabs-tab-hover);
+.tl-table--zebra-columns-even .tl-table__body-cell:nth-child(even) {
+  background-color: var(--table-zebra-mode);
 }
-.tl-navigation-tabs__tab:hover::after {
-  width: 100%;
+.tl-table--cell-text-align-left .tl-table__body-cell {
+  text-align: left;
 }
-.tl-navigation-tabs__tab--selected {
-  color: var(--navigation-tabs-tab-selected);
+.tl-table--cell-text-align-start .tl-table__body-cell {
+  text-align: start;
 }
-.tl-navigation-tabs__tab--selected::after {
-  background-color: var(--navigation-tabs-tab-indicator-active);
-  width: 100%;
+.tl-table--cell-text-align-center .tl-table__body-cell {
+  text-align: center;
 }
-.tl-navigation-tabs__tab--disabled {
-  color: var(--navigation-tabs-tab-disabled);
-  pointer-events: none;
-  cursor: not-allowed;
+.tl-table--cell-text-align-right .tl-table__body-cell {
+  text-align: right;
 }
-.tl-navigation-tabs__tab--disabled::after {
-  content: none;
+.tl-table--cell-text-align-end .tl-table__body-cell {
+  text-align: end;
 }
-.tl-navigation-tabs__tab--disabled:focus-visible::before {
-  box-shadow: none;
+.tl-table--no-padding .tl-table__body-cell {
+  padding: 0;
+}
+.tl-table__row:hover:not(.tl-table__row--expanded) .tl-table__body-cell {
+  background-color: var(--table-body-row-hover);
+}
+.tl-table__row--selected:hover:not(.tl-table__row--expanded) .tl-table__body-cell {
+  background-color: var(--table-body-row-selected-hover);
+}
+.tl-table__row--expanded .tl-table__body-cell {
+  background-color: var(--table-body-row-selected);
 }
 
-.tl-navigation-tabs {
+.tl-table__toolbar {
   box-sizing: border-box;
 }
-.tl-navigation-tabs * {
+.tl-table__toolbar * {
   box-sizing: border-box;
 }
-.tl-navigation-tabs {
-  background-color: transparent;
-  display: flex;
-  flex-wrap: nowrap;
-  white-space: nowrap;
-  width: 100%;
-  overflow-x: scroll;
-  scrollbar-width: none;
-  gap: 16px;
+.tl-table__toolbar {
+  display: table-caption;
   position: relative;
+  background-color: var(--table-toolbar);
+  color: var(--table-text);
+  padding: 0 var(--tds-spacing-element-16);
+  height: 64px;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
 }
-.tl-navigation-tabs::-webkit-scrollbar {
-  display: none;
+.tl-table--compact .tl-table__toolbar {
+  height: 56px;
 }
-.tl-navigation-tabs::after {
-  border-bottom: 1px solid var(--navigation-tabs-horizontal-divider);
-  content: " ";
-  display: block;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  position: absolute;
+
+.tl-table__upper-bar {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
 }
 
-.tl-navigation-tabs__scroll-button {
-  background-color: transparent;
-  color: var(--navigation-tabs-scroll-button-icon);
-  cursor: pointer;
-  min-width: 48px;
-  border: 0;
-  display: block;
-  justify-content: center;
+.tl-table__actionbar-left {
+  display: flex;
   align-items: center;
-  opacity: 1;
-  position: sticky;
 }
 
-.tl-navigation-tabs__scroll-button--right {
-  right: 0;
-  z-index: 1;
+.tl-table__title {
+  font-family: var(--headline-07-font-family);
+  font-size: var(--headline-07-font-size);
+  line-height: var(--headline-07-line-height);
+  font-weight: var(--headline-07-font-weight);
+  letter-spacing: var(--headline-07-letter-spacing);
+  text-transform: var(--headline-07-text-transform);
+  display: flex;
+  align-self: baseline;
+  text-align: left;
+  letter-spacing: var(--tds-headline-07-ls);
+  padding-top: var(--tds-spacing-element-16);
+  margin-right: var(--tds-spacing-element-8);
+}
+
+.tl-table__actionbar-right {
+  display: flex;
+  align-self: center;
+  column-gap: 8px;
+  position: relative;
 }
 
-.tl-navigation-tabs__scroll-button--left {
-  left: 0;
-  z-index: 1;
+.tl-table__actionbar-right .tl-text-field:not(.tl-text-field--input-visible) {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  width: 40px;
+  min-width: 40px;
+  max-width: 40px;
+  height: 40px;
 }
 
-.tl-navigation-tabs__scroll-button svg {
-  fill: var(--navigation-tabs-scroll-button-color);
+.tl-table__actionbar-right .tl-text-field:not(.tl-text-field--input-visible) .tl-text-field__input {
+  display: none;
 }
 
-.tl-text-field {
-  --text-field-background: var(--color-background-layer-01);
-  --text-field-text: var(--color-foreground-text-strong);
-  --text-field-placeholder: var(--color-foreground-text-subtle);
-  --text-field-affix: var(--color-foreground-text-defined);
-  --text-field-label: var(--color-foreground-text-strong);
-  --text-field-label-inside: var(--color-foreground-text-strong);
-  --text-field-label-inside-left: 16px;
-  --text-field-affix-width-icon: 35px;
-  --text-field-affix-width-text: 8px;
-  --text-field-border-bottom-readonly: var(--color-foreground-border-strong);
-  --text-field-helper: var(--color-foreground-text-defined);
-  --text-field-error: var(--color-system-danger-default);
-  --text-field-affix-error: var(--color-foreground-text-defined);
-  --text-field-background-disabled: var(--color-background-layer-01);
-  --text-field-text-disabled: var(--color-foreground-text-disabled);
-  --text-field-placeholder-disabled: var(--color-foreground-text-disabled);
-  --text-field-label-disabled: var(--color-foreground-text-disabled);
-  --text-field-affix-disabled: var(--color-foreground-text-disabled);
-  --text-field-textcounter: var(--color-foreground-text-defined);
-}
-.tl-text-field--primary {
-  --text-field-background: var(--color-background-layer-01);
-  --text-field-background-disabled: var(--color-background-layer-01);
-}
-.tl-text-field--secondary {
-  --text-field-background: var(--color-background-layer-02);
-  --text-field-background-disabled: var(--color-background-layer-02);
+.tl-table__actionbar-right .tl-text-field:not(.tl-text-field--input-visible)::before {
+  content: "";
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  border-radius: 4px 4px 0 0;
+  background-color: transparent;
+  transition: background-color 250ms ease;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
 }
 
-.tl-text-field,
-.scania .tl-text-field {
-  --text-field-border-radius: 4px 4px 0 0;
-  --text-field-box-shadow: 0 -1px 0 0 var(--color-foreground-border-soft);
-  --text-field-box-shadow-hover: 0 -1px 0 0 var(--color-foreground-border-strong);
-  --text-field-box-shadow-focus: 0 -2px 0 0 var(--color-foreground-border-accent-focus);
-  --text-field-box-shadow-error: 0 -1px 0 0 var(--color-system-danger-default);
-  --text-field-box-shadow-error-hover: 0 -1px 0 0 var(--color-system-danger-default);
-  --text-field-box-shadow-error-focus: 0 -2px 0 0 var(--color-system-danger-default);
-  --text-field-box-shadow-success: 0 -1px 0 0 var(--color-foreground-border-strong);
-  --text-field-bar-focus: var(--color-foreground-border-accent-focus);
-  --text-field-bar-error: var(--color-system-danger-default);
-  --text-field-focus-outline: none;
-  --text-field-focus-outline-error: none;
-  --text-field-focus-outline-offset: 0;
+.tl-table__actionbar-right .tl-text-field:not(.tl-text-field--input-visible) .tl-text-field__suffix--icon {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(calc(-50% - 1px));
+  z-index: 1;
+  pointer-events: none;
 }
 
-.traton .tl-text-field {
-  --text-field-border-radius: 4px 4px 4px 4px;
-  --text-field-box-shadow: 0 0 0 1px var(--color-foreground-border-soft);
-  --text-field-box-shadow-hover: 0 0 0 1px var(--color-foreground-border-strong);
-  --text-field-box-shadow-focus: 0 0 0 2px var(--color-foreground-border-accent-focus);
-  --text-field-box-shadow-success: 0 0 0 1px var(--color-foreground-border-strong);
-  --text-field-box-shadow-error: 0 0 0 1px var(--color-system-danger-default);
-  --text-field-box-shadow-error-hover: 0 0 0 1px var(--color-system-danger-default);
-  --text-field-box-shadow-error-focus: 0 0 0 2px var(--color-system-danger-default);
-  --text-field-focus-outline: 2px solid var(--color-foreground-border-accent-focus);
-  --text-field-focus-outline-error: 2px solid var(--color-system-danger-default);
-  --text-field-focus-outline-offset: 0;
-  --text-field-bar-focus: transparent;
-  --text-field-bar-error: transparent;
+.tl-table__actionbar-right .tl-text-field:not(.tl-text-field--input-visible):hover::before {
+  background-color: var(--table-toolbar-searchbar-hover);
 }
 
-.tl-text-field {
-  display: block;
+.tl-table__header-input-wrapper {
   position: relative;
   width: 100%;
-  min-width: 208px;
-  border-radius: var(--text-field-border-radius);
-  box-sizing: border-box;
-}
-.tl-text-field--no-min-width {
-  min-width: auto;
+  height: 100%;
 }
-.tl-text-field--readonly:not(.tl-text-field--disabled):not(.tl-text-field--hide-readonly-icon)::before {
-  content: "";
+
+.tl-table__header-input-wrapper .tl-icon {
+  color: var(--table-input-header-icon);
   position: absolute;
+  left: 15px;
   top: 50%;
-  right: 16px;
-  width: 20px;
-  height: 20px;
-  background-color: var(--text-field-text);
-  mask-image: var(--icon-edit_inactive-svg);
-  mask-size: contain;
-  mask-repeat: no-repeat;
-  mask-position: center;
   transform: translateY(-50%);
   z-index: 1;
-}
-.tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside).tl-text-field--readonly:not(.tl-text-field--disabled):not(.tl-text-field--hide-readonly-icon)::before {
-  top: calc(50% + 24px);
-}
-.tl-text-field--disabled {
   pointer-events: none;
 }
-.tl-text-field .tl-icon {
-  background-color: var(--text-field-affix);
-}
-.tl-text-field--disabled .tl-text-field .tl-icon {
-  background-color: var(--text-field-affix-disabled);
-}
 
-.tl-text-field__input {
-  all: unset;
-  border-radius: var(--text-field-border-radius);
-  background-color: var(--text-field-background);
-  color: var(--text-field-text);
-  width: 100%;
+.tl-table__header-input {
   box-sizing: border-box;
-  margin: 0;
-  border: none;
-  outline: none;
-}
-.tl-text-field__input::placeholder {
-  color: var(--text-field-placeholder);
-}
-.tl-text-field__input:disabled {
-  background-color: var(--text-field-background-disabled);
-  color: var(--text-field-text-disabled);
-  user-select: none;
-  pointer-events: none;
-}
-.tl-text-field__input:disabled::placeholder {
-  color: var(--text-field-placeholder-disabled);
-}
-.tl-text-field__input {
   font-family: var(--detail-02-font-family);
   font-size: var(--detail-02-font-size);
   line-height: var(--detail-02-line-height);
   font-weight: var(--detail-02-font-weight);
   letter-spacing: var(--detail-02-letter-spacing);
   text-transform: var(--detail-02-text-transform);
-  text-align: left;
-  color: var(--text-field-text);
-  flex: 1;
-  order: 2;
-  box-shadow: inset var(--text-field-box-shadow);
-  transition: box-shadow 0.2s;
+  color: var(--table-text);
+  padding: 0 var(--tds-spacing-element-16);
+  width: 100%;
+  border-radius: 0;
+  background-color: transparent;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  outline: none;
 }
-.tl-text-field__input:focus {
-  box-shadow: inset var(--text-field-box-shadow-focus);
+.tl-table--compact .tl-table__header-input {
+  height: 32px;
 }
-.tl-text-field:hover .tl-text-field__input:not(:focus) {
-  box-shadow: inset var(--text-field-box-shadow-hover);
+.tl-table__header-input {
+  padding-left: 35px;
+  height: 48px;
 }
-.tl-text-field--error .tl-text-field__input {
-  box-shadow: inset var(--text-field-box-shadow-error);
+.tl-table__header-input::placeholder {
+  color: var(--table-input-header-placeholder);
 }
-.tl-text-field--error .tl-text-field__input:focus {
-  box-shadow: inset var(--text-field-box-shadow-error-focus);
+.tl-table__header-input:focus {
+  background-color: var(--table-input-header-focus);
+  border-bottom: 2px solid var(--color-foreground-border-accent-focus);
 }
-.tl-text-field--error:hover .tl-text-field__input:not(:focus) {
-  box-shadow: inset var(--text-field-box-shadow-error-hover);
+
+.tl-table__body-cell .tl-text-field {
+  height: 48px;
+  min-width: auto;
+  padding-bottom: 0;
+  cursor: pointer;
 }
-.tl-text-field--success:not(.tl-text-field--readonly):not(.tl-text-field--disabled) .tl-text-field__input:not(:focus) {
-  box-shadow: inset var(--text-field-box-shadow-success);
+
+.tl-table--compact .tl-table__body-cell .tl-text-field {
+  height: 32px;
 }
-.tl-text-field--readonly .tl-text-field__input {
-  box-shadow: inset var(--text-field-box-shadow);
+
+.tl-table__body-cell .tl-text-field .tl-text-field__input,
+.tl-table__body-cell .tl-text-field .tl-text-field__input:hover {
+  box-shadow: 0 0 0 0 transparent;
 }
-.tl-text-field--readonly .tl-text-field__input:focus {
+
+.tl-table__body-cell .tl-text-field .tl-text-field__input:focus {
   box-shadow: inset var(--text-field-box-shadow-focus);
+  background-color: var(--table-input-focus);
 }
-.tl-text-field--readonly:hover .tl-text-field__input:not(:focus) {
-  box-shadow: inset var(--text-field-box-shadow-hover);
+
+.tl-table--compact .tl-table__body-cell .tl-text-field .tl-text-field__input {
+  height: 32px;
+}
+
+.tl-table__body-cell .tl-text-field .tl-text-field__suffix--icon {
+  display: none;
+}
+
+.tl-table__body-cell .tl-text-field:hover .tl-text-field__suffix--icon,
+.tl-table__body-cell .tl-text-field:has(.tl-text-field__input:focus) .tl-text-field__suffix--icon {
+  display: inline-block;
+}
+
+.tl-table__body-cell .tl-text-field.tl-text-field--disabled .tl-text-field__suffix--icon {
+  display: inline-block;
+}
+
+.tl-table__body-cell--expand {
+  position: relative;
+}
+.tl-table--compact .tl-table__body-cell--expand {
+  padding: 0;
+}
+.tl-table__body-cell--expand:has(.tl-table__expand-input:focus), .tl-table__body-cell--expand:has(.tl-table__expand-input:focus-visible), .tl-table__body-cell--expand:has(.tl-table__expand-input:active) {
+  outline: 2px solid var(--table-header-button-focus);
+  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
+  outline-offset: -1px;
+  z-index: 1;
+}
+
+.tl-table__expand-control-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 46px;
+  cursor: pointer;
+  padding: 0 16px;
+  position: relative;
 }
-.tl-text-field--disabled .tl-text-field__input {
-  box-shadow: none;
-  background-color: var(--text-field-background-disabled);
-  color: var(--text-field-text-disabled);
+.tl-table--compact .tl-table__expand-control-container {
+  height: 30px;
 }
-.tl-text-field--readonly .tl-text-field__input {
-  user-select: auto;
-  caret-color: transparent;
-  cursor: default;
-  pointer-events: none;
+
+.tl-table__expand-input {
+  all: unset;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  cursor: pointer;
 }
-.tl-text-field--readonly:not(.tl-text-field--disabled):not(.tl-text-field--hide-readonly-icon) .tl-text-field__input {
-  padding-right: 54px;
+
+.tl-table__expand-icon {
+  height: 16px;
+  width: 16px;
+  transition: transform 200ms ease;
+  transform: rotate(0);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--table-text);
 }
-.tl-text-field--lg .tl-text-field__input {
-  padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
-  height: 56px;
+
+.tl-table__row--expanded {
+  background-color: var(--table-body-row-selected);
+  border-bottom: none;
 }
-.tl-text-field--md .tl-text-field__input {
-  padding: var(--tds-spacing-element-16);
-  height: 48px;
+
+.tl-table__row--expanded .tl-table__expand-icon {
+  transform: rotate(180deg);
 }
-.tl-text-field--sm .tl-text-field__input {
-  padding: var(--tds-spacing-element-12) var(--tds-spacing-element-16);
-  height: 40px;
+
+.tl-table__expand-row {
+  display: none;
+  transition: background-color 200ms ease;
+  background-color: var(--table-body-row-selected);
+  border-bottom: 1px solid var(--table-divider);
 }
-.tl-text-field--label-inside.tl-text-field--lg .tl-text-field__input {
-  padding-top: var(--tds-spacing-element-24);
-  padding-bottom: 15px;
+.tl-table__expand-row--expanded {
+  display: table-row;
 }
-.tl-text-field--label-inside.tl-text-field--md .tl-text-field__input {
-  padding-top: var(--tds-spacing-element-20);
-  padding-bottom: 11px;
+
+.tl-table__expand-row-cell {
+  max-width: 1px;
+  overflow: auto;
+  padding: 16px 16px 16px 66px;
+  color: var(--table-text);
+  background-color: var(--table-body-row-selected);
 }
-.tl-text-field--label-inside.tl-text-field--sm .tl-text-field__input:not(:focus):placeholder-shown {
-  padding-top: var(--tds-spacing-element-16);
-  padding-bottom: 7px;
+.tl-table__expand-row-cell::-webkit-scrollbar {
+  height: var(--tl-scrollbar-height);
 }
-.tl-text-field:has(.tl-text-field__prefix--icon) .tl-text-field__input {
-  padding-left: 44px;
+.tl-table__expand-row-cell::-webkit-scrollbar-track {
+  background: var(--tl-scrollbar-track-color);
 }
-.tl-text-field:has(.tl-text-field__prefix--text) .tl-text-field__input {
-  padding-left: calc(16px + var(--text-field-affix-width-text) + 8px);
+.tl-table__expand-row-cell::-webkit-scrollbar-thumb {
+  border-radius: 40px;
+  background: var(--tl-scrollbar-thumb-color);
+  border-width: var(--tl-scrollbar-thumb-border-width);
+  border-style: solid;
+  border-color: transparent;
+  background-clip: padding-box;
 }
-.tl-text-field:has(.tl-text-field__suffix--icon) .tl-text-field__input {
-  padding-right: 44px;
+.tl-table__expand-row-cell::-webkit-scrollbar-thumb:hover {
+  border-width: var(--tl-scrollbar-thumb-border-hover-width);
 }
-.tl-text-field:has(.tl-text-field__suffix--text) .tl-text-field__input {
-  padding-right: calc(16px + var(--text-field-affix-width-text) + 8px);
+.tl-table__expand-row-cell::-webkit-scrollbar-button {
+  height: 0;
+  width: 0;
 }
-.tl-text-field--label-inside .tl-text-field__input::placeholder {
-  color: transparent !important;
+@supports not selector(::-webkit-scrollbar) {
+  .tl-table__expand-row-cell {
+    scrollbar-color: var(--tl-scrollbar-thumb-color) var(--tl-scrollbar-track-color);
+    scrollbar-width: var(--tl-scrollbar-width-standard);
+  }
 }
-.tl-text-field:not(.tl-text-field--label-inside) .tl-text-field__input:disabled::placeholder {
-  color: var(--text-field-placeholder-disabled) !important;
+.tl-table--compact .tl-table__expand-row-cell {
+  padding: 8px 16px 8px 66px;
 }
-
-.tl-text-field:not(.tl-text-field--label-inside) .tl-text-field__label {
-  font-family: var(--detail-05-font-family);
-  font-size: var(--detail-05-font-size);
-  line-height: var(--detail-05-line-height);
-  font-weight: var(--detail-05-font-weight);
-  letter-spacing: var(--detail-05-letter-spacing);
-  text-transform: var(--detail-05-text-transform);
-  display: block;
-  margin-bottom: 8px;
-  color: var(--text-field-label);
+.tl-table__expand-row-cell--overflow-visible {
+  overflow: visible;
 }
-.tl-text-field--label-inside .tl-text-field__label {
-  font-family: var(--detail-02-font-family);
-  font-size: var(--detail-02-font-size);
-  line-height: var(--detail-02-line-height);
-  font-weight: var(--detail-02-font-weight);
-  letter-spacing: var(--detail-02-letter-spacing);
-  text-transform: var(--detail-02-text-transform);
-  position: absolute;
-  top: 50%;
-  left: var(--text-field-label-inside-left, 16px);
-  color: var(--text-field-label-inside);
-  pointer-events: none;
-  transform: translateY(-50%);
-  transform-origin: top left;
-  transition: transform 0.15s, font-size 0.15s, color 0.15s, top 0.15s;
-  z-index: 1;
+.tl-table__expand-row-cell--overflow-hidden {
+  overflow: hidden;
 }
-.tl-text-field--label-inside:has(.tl-text-field__prefix--icon) .tl-text-field__label {
-  left: 44px;
+
+.tl-table.tl-table--primary .tl-text-field__input {
+  background-color: var(--component-table-cell);
 }
-.tl-text-field--label-inside:has(.tl-text-field__prefix--text) .tl-text-field__label {
-  left: calc(16px + var(--text-field-affix-width-text) + 8px);
+.tl-table.tl-table--secondary .tl-text-field__input {
+  background-color: var(--component-table-secondary-cell);
 }
-.tl-text-field--label-inside.tl-text-field--lg:has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--lg:has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--md:has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--md:has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
-  font-family: var(--detail-07-font-family);
-  font-size: var(--detail-07-font-size);
-  line-height: var(--detail-07-line-height);
-  font-weight: var(--detail-07-font-weight);
-  letter-spacing: var(--detail-07-letter-spacing);
-  text-transform: var(--detail-07-text-transform);
-  top: 8px;
-  transform: translateY(0);
-  transition: 0.1s ease all;
+
+.tl-table--compact .tl-table__header-cell--checkbox {
+  padding-left: 16px;
 }
-.tl-text-field--label-inside.tl-text-field--lg:has(.tl-text-field__prefix--icon):has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--lg:has(.tl-text-field__prefix--icon):has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--md:has(.tl-text-field__prefix--icon):has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--md:has(.tl-text-field__prefix--icon):has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
-  left: 44px;
+
+.tl-table__header-cell--checkbox {
+  padding: 16px;
 }
-.tl-text-field--label-inside.tl-text-field--lg:has(.tl-text-field__prefix--text):has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--lg:has(.tl-text-field__prefix--text):has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--md:has(.tl-text-field__prefix--text):has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--md:has(.tl-text-field__prefix--text):has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
-  left: calc(16px + var(--text-field-affix-width-text) + 8px);
+
+.tl-table__body-cell--checkbox {
+  padding: 16px;
 }
-.tl-text-field--label-inside.tl-text-field--sm:has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--sm:has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
-  opacity: 0;
-  visibility: hidden;
+
+/* tl-folder-tabs.scss (overlay buttons, no JS) */
+.tl-folder-tabs {
+  --folder-tabs-scroll-button-surface: var(--color-background-surface-200);
+  --folder-tabs-scroll-button-surface-hover: var(--color-background-surface-300);
+  --folder-tabs-scroll-button-surface-active: var(--color-background-surface-400);
+  --folder-tabs-scroll-button-text: var(--color-foreground-text-soft);
 }
-.tl-text-field--label-inside.tl-text-field--disabled .tl-text-field__label {
-  color: var(--text-field-label-disabled);
+
+.tl-folder-tabs__tab {
+  --folder-tab-surface: var(--color-background-surface-200);
+  --folder-tab-surface-selected: var(--color-background-layer-01);
+  --folder-tab-surface-hover: var(--color-background-surface-300);
+  --folder-tab-border-selected: var(--color-foreground-border-accent-focus);
+  --folder-tab-divider: var(--color-foreground-icon-discrete);
+  --folder-tab-text: var(--color-foreground-text-soft);
+  --folder-tab-text-disabled: var(--color-foreground-text-disabled);
 }
-.tl-text-field:not(.tl-text-field--label-inside).tl-text-field--disabled .tl-text-field__label {
-  color: var(--text-field-label-disabled);
+
+.tl-folder-tabs--primary .tl-folder-tabs__tab {
+  --folder-tab-surface-selected: var(--color-background-layer-01);
 }
 
-.tl-text-field__bottom {
-  display: flex;
-  gap: 8px;
-  padding-top: 4px;
+.tl-folder-tabs--secondary .tl-folder-tabs__tab {
+  --folder-tab-surface-selected: var(--color-background-layer-02);
 }
 
-.tl-text-field__helper {
-  font-family: var(--detail-05-font-family);
-  font-size: var(--detail-05-font-size);
-  line-height: var(--detail-05-line-height);
-  font-weight: var(--detail-05-font-weight);
-  letter-spacing: var(--detail-05-letter-spacing);
-  text-transform: var(--detail-05-text-transform);
-  color: var(--text-field-helper);
+.tl-folder-tabs {
+  box-sizing: border-box;
+}
+.tl-folder-tabs * {
+  box-sizing: border-box;
+}
+.tl-folder-tabs {
+  display: flex;
+  overflow-x: scroll;
+  scrollbar-width: none;
   position: relative;
+  outline: 0;
 }
-.tl-text-field--disabled .tl-text-field__helper {
-  color: var(--color-foreground-text-disabled);
+.tl-folder-tabs::-webkit-scrollbar {
+  display: none;
 }
-.tl-text-field--error .tl-text-field__helper {
-  padding-left: 24px;
+
+/* Overlay buttons (optional in markup; visible via media query) */
+.tl-folder-tabs__scroll-button {
+  background-color: var(--folder-tab-surface);
+  color: var(--folder-tabs-scroll-button-text);
+  min-width: 48px;
+  border: 0;
+  justify-content: center;
+  align-items: center;
+  position: sticky;
+  cursor: pointer;
 }
-.tl-text-field--error .tl-text-field__helper::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  background-color: var(--text-field-error);
-  mask-image: var(--icon-error-svg);
-  mask-size: contain;
-  mask-repeat: no-repeat;
-  mask-position: center;
+.tl-folder-tabs__scroll-button:hover {
+  background-color: var(--folder-tabs-scroll-button-surface-hover);
 }
-.tl-text-field--error.tl-text-field--readonly .tl-text-field__helper {
-  padding-left: 0;
+.tl-folder-tabs__scroll-button:active {
+  background-color: var(--folder-tabs-scroll-button-surface-active);
 }
-.tl-text-field--error.tl-text-field--readonly .tl-text-field__helper::before {
-  display: none;
+
+/* left/right anchoring over the track */
+.tl-folder-tabs__scroll-button--left {
+  left: 0;
+  z-index: 1;
 }
-.tl-text-field--error:not(.tl-text-field--readonly):not(.tl-text-field--disabled) .tl-text-field__helper {
-  color: var(--text-field-error);
+
+.tl-folder-tabs__scroll-button--right {
+  right: 0;
+  z-index: 1;
 }
-.tl-text-field--error.tl-text-field--disabled .tl-text-field__helper::before {
-  background-color: var(--color-foreground-text-disabled);
+
+.tl-folder-tabs__scroll-button svg {
+  fill: var(--folder-tabs-scroll-button-text);
 }
 
-.tl-text-field__charcounter {
-  font-family: var(--detail-05-font-family);
-  font-size: var(--detail-05-font-size);
-  line-height: var(--detail-05-line-height);
-  font-weight: var(--detail-05-font-weight);
-  letter-spacing: var(--detail-05-letter-spacing);
-  text-transform: var(--detail-05-text-transform);
-  margin-left: auto;
-  color: var(--text-field-textcounter);
+.tl-inline-tabs {
+  /* Horizontal divider */
+  --inline-tabs-horizontal-divider: var(--color-foreground-icon-discrete);
+  /* Mode variant backgrounds */
+  --inline-tabs-tab-background-primary: var(--scania-color-transparent-invisible-light);
+  --inline-tabs-tab-background-secondary: var(--scania-color-transparent-invisible-dark);
+  --inline-tabs-tab-background: var(--inline-tabs-tab-background-primary);
+  /* Scroll button */
+  --inline-tabs-scroll-button-text: var(--color-foreground-icon-strong);
+  --inline-tabs-scroll-button-background: var(--inline-tabs-tab-background);
+  --inline-tabs-scroll-button-background-hover: var(--inline-tabs-tab-background);
+  --inline-tabs-scroll-button-background-active: var(--inline-tabs-tab-background);
 }
-.tl-text-field--disabled .tl-text-field__charcounter {
-  color: var(--color-foreground-text-disabled);
+.tl-inline-tabs--primary {
+  --inline-tabs-tab-background: var(--inline-tabs-tab-background-primary);
 }
-.tl-text-field--error:not(.tl-text-field--readonly):not(.tl-text-field--disabled) .tl-text-field__charcounter {
-  color: var(--text-field-error);
+.tl-inline-tabs--secondary {
+  --inline-tabs-tab-background: var(--inline-tabs-tab-background-secondary);
 }
-.tl-text-field--error:not(.tl-text-field--readonly):not(.tl-text-field--disabled) .tl-text-field__charcounter .tl-text-field__charcounter-divider {
-  color: var(--text-field-error);
+
+.traton .tl-inline-tabs {
+  --inline-tabs-tab-background-primary: var(--traton-color-transparent-invisible-light);
+  --inline-tabs-tab-background-secondary: var(--traton-color-transparent-invisible-dark);
 }
 
-.tl-text-field__charcounter-divider {
-  color: var(--color-foreground-text-disabled);
+.tl-inline-tabs__tab {
+  /* Tab */
+  --inline-tabs-tab: var(--color-foreground-text-soft);
+  --inline-tabs-tab-selected: var(--color-foreground-text-strong);
+  --inline-tabs-tab-disabled: var(--color-foreground-text-disabled);
+  --inline-tabs-tab-hover: var(--color-foreground-text-strong);
+  --inline-tabs-tab-focus: var(--color-foreground-border-accent-focus);
+  --inline-tabs-tab-indicator-active: var(--color-foreground-border-accent-focus);
+  --inline-tabs-tab-indicator-hover: var(--color-foreground-border-discrete);
 }
 
-.tl-text-field__prefix {
-  font-family: var(--detail-02-font-family);
-  font-size: var(--detail-02-font-size);
-  line-height: var(--detail-02-line-height);
-  font-weight: var(--detail-02-font-weight);
-  letter-spacing: var(--detail-02-letter-spacing);
-  text-transform: var(--detail-02-text-transform);
-  color: var(--text-field-affix);
-  align-self: center;
+.tl-inline-tabs {
+  box-sizing: border-box;
+}
+.tl-inline-tabs * {
+  box-sizing: border-box;
+}
+.tl-inline-tabs {
   display: flex;
-  align-items: center;
-  z-index: 1;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+  width: 100%;
+  overflow-x: scroll;
+  scrollbar-width: none;
+  gap: 16px;
   position: relative;
+  background-color: var(--inline-tabs-tab-background);
 }
-.tl-text-field__prefix--text, .tl-text-field__prefix--icon {
+.tl-inline-tabs::-webkit-scrollbar {
+  display: none;
+}
+.tl-inline-tabs::after {
+  border-bottom: 1px solid var(--inline-tabs-horizontal-divider);
+  content: " ";
+  display: block;
+  left: 0;
+  right: 0;
+  bottom: 0;
   position: absolute;
-  left: 16px;
-  top: 50%;
-  transform: translateY(calc(-50% - 1px));
-  z-index: 1;
 }
-.tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__prefix--text, .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__prefix--icon {
-  transform: translateY(calc(-50% + 24px));
+
+.tl-inline-tabs__scroll-button {
+  background-color: transparent;
+  color: var(--inline-tabs-scroll-button-text);
+  cursor: pointer;
+  min-width: 48px;
+  border: 0;
+  display: block;
+  justify-content: center;
+  align-items: center;
+  opacity: 1;
+  position: sticky;
 }
-.tl-text-field--disabled .tl-text-field__prefix--text, .tl-text-field--disabled .tl-text-field__prefix--icon {
-  color: var(--text-field-affix-disabled);
+
+.tl-inline-tabs__scroll-button--right {
+  right: 0;
+  z-index: 1;
 }
-.tl-text-field--disabled .tl-text-field__prefix--text > *, .tl-text-field--disabled .tl-text-field__prefix--icon > * {
-  color: var(--text-field-affix-disabled);
+
+.tl-inline-tabs__scroll-button--left {
+  left: 0;
+  z-index: 1;
 }
-.tl-text-field--disabled .tl-text-field__prefix--text .tl-icon, .tl-text-field--disabled .tl-text-field__prefix--icon .tl-icon {
-  background-color: var(--text-field-affix-disabled);
+
+.tl-inline-tabs__scroll-button svg {
+  fill: var(--inline-tabs-scroll-button-text);
 }
-.tl-text-field--disabled .tl-text-field__prefix--icon.tl-icon {
-  background-color: var(--text-field-affix-disabled);
+
+.tl-navigation-tabs__tab {
+  /* tds-navigation-tab variables */
+  --navigation-tabs-tab: var(--color-foreground-text-soft);
+  --navigation-tabs-tab-selected: var(--color-foreground-text-strong);
+  --navigation-tabs-tab-hover: var(--color-foreground-text-strong);
+  --navigation-tabs-tab-focus: var(--color-foreground-text-strong);
+  --navigation-tabs-tab-disabled: var(--color-foreground-text-disabled);
+  --navigation-tabs-tab-indicator-hover: var(--color-foreground-border-discrete);
+  --navigation-tabs-tab-indicator-active: var(--color-foreground-border-accent-focus);
 }
 
-.tl-text-field__suffix {
-  font-family: var(--detail-02-font-family);
-  font-size: var(--detail-02-font-size);
-  line-height: var(--detail-02-line-height);
-  font-weight: var(--detail-02-font-weight);
-  letter-spacing: var(--detail-02-letter-spacing);
-  text-transform: var(--detail-02-text-transform);
-  color: var(--text-field-affix);
-  align-self: center;
-  display: flex;
-  align-items: center;
-  z-index: 1;
-  position: relative;
+.tl-navigation-tabs {
+  /* tds-navigation-tabs variables */
+  --navigation-tabs-horizontal-divider: var(--color-foreground-icon-discrete);
+  --navigation-tabs-tab-background-primary: var(--scania-color-transparent-invisible-light);
+  --navigation-tabs-tab-background-secondary: var(--scania-color-transparent-invisible-dark);
+  --navigation-tabs-tab-background: var(--navigation-tabs-tab-background-primary);
+  --navigation-tabs-scroll-button-icon: var(--color-foreground-icon-strong);
+  --navigation-tabs-scroll-button-background: var(--navigation-tabs-tab-background);
+  --navigation-tabs-scroll-button-background-hover: var(--navigation-tabs-tab-background);
+  --navigation-tabs-scroll-button-background-active: var(--navigation-tabs-tab-background);
 }
-.tl-text-field__suffix--text, .tl-text-field__suffix--icon {
-  position: absolute;
-  right: 16px;
-  top: 50%;
-  transform: translateY(calc(-50% - 1px));
-  z-index: 1;
+.tl-navigation-tabs--primary {
+  --navigation-tabs-tab-background: var(--navigation-tabs-tab-background-primary);
 }
-.tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__suffix--text, .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__suffix--icon {
-  transform: translateY(calc(-50% + 24px));
+.tl-navigation-tabs--secondary {
+  --navigation-tabs-tab-background: var(--navigation-tabs-tab-background-secondary);
 }
-.tl-text-field--disabled .tl-text-field__suffix--text, .tl-text-field--disabled .tl-text-field__suffix--icon {
-  color: var(--text-field-affix-disabled);
+
+.traton .tl-navigation-tabs {
+  --navigation-tabs-tab-background-primary: var(--traton-color-transparent-invisible-light);
+  --navigation-tabs-tab-background-secondary: var(--traton-color-transparent-invisible-dark);
 }
-.tl-text-field--disabled .tl-text-field__suffix--text > *, .tl-text-field--disabled .tl-text-field__suffix--icon > * {
-  color: var(--text-field-affix-disabled);
+
+.tl-navigation-tabs {
+  box-sizing: border-box;
 }
-.tl-text-field--disabled .tl-text-field__suffix--text .tl-icon,
-.tl-text-field--disabled .tl-text-field__suffix--text > .tl-icon, .tl-text-field--disabled .tl-text-field__suffix--icon .tl-icon,
-.tl-text-field--disabled .tl-text-field__suffix--icon > .tl-icon {
-  background-color: var(--text-field-affix-disabled) !important;
+.tl-navigation-tabs * {
+  box-sizing: border-box;
 }
-
-.tl-text-field__suffix {
-  font-family: var(--detail-02-font-family);
-  font-size: var(--detail-02-font-size);
-  line-height: var(--detail-02-line-height);
-  font-weight: var(--detail-02-font-weight);
-  letter-spacing: var(--detail-02-letter-spacing);
-  text-transform: var(--detail-02-text-transform);
-  color: var(--text-field-affix);
-  align-self: center;
+.tl-navigation-tabs {
+  background-color: var(--navigation-tabs-tab-background);
   display: flex;
-  align-items: center;
-  z-index: 1;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+  width: 100%;
+  overflow-x: scroll;
+  scrollbar-width: none;
+  gap: 16px;
   position: relative;
-  right: 16px;
-  padding-right: 0;
-  z-index: 1;
-}
-.tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__suffix--text, .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__suffix--icon {
-  transform: translateY(calc(-50% + 24px));
-}
-.tl-text-field--disabled .tl-text-field__suffix--text, .tl-text-field--disabled .tl-text-field__suffix--icon {
-  color: var(--text-field-affix-disabled);
 }
-.tl-text-field--disabled .tl-text-field__suffix--text > *, .tl-text-field--disabled .tl-text-field__suffix--icon > * {
-  color: var(--text-field-affix-disabled);
+.tl-navigation-tabs::-webkit-scrollbar {
+  display: none;
 }
-.tl-text-field--disabled .tl-text-field__suffix--text .tl-icon,
-.tl-text-field--disabled .tl-text-field__suffix--text > .tl-icon, .tl-text-field--disabled .tl-text-field__suffix--icon .tl-icon,
-.tl-text-field--disabled .tl-text-field__suffix--icon > .tl-icon {
-  background-color: var(--text-field-affix-disabled);
+.tl-navigation-tabs::after {
+  border-bottom: 1px solid var(--navigation-tabs-horizontal-divider);
+  content: " ";
+  display: block;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  position: absolute;
 }
-.tl-text-field--disabled .tl-text-field__suffix--icon.tl-icon {
-  background-color: var(--text-field-affix-disabled);
+
+.tl-navigation-tabs__scroll-button {
+  background-color: transparent;
+  color: var(--navigation-tabs-scroll-button-icon);
+  cursor: pointer;
+  min-width: 48px;
+  border: 0;
+  display: block;
+  justify-content: center;
+  align-items: center;
+  opacity: 1;
+  position: sticky;
 }
 
-.tl-text-field--label-inside:has(.tl-text-field__input:focus) .tl-text-field__label,
-.tl-text-field--label-inside:has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
-  font-family: var(--detail-07-font-family);
-  font-size: var(--detail-07-font-size);
-  line-height: var(--detail-07-line-height);
-  font-weight: var(--detail-07-font-weight);
-  letter-spacing: var(--detail-07-letter-spacing);
-  text-transform: var(--detail-07-text-transform);
-  top: 7.5px;
-  left: var(--text-field-label-inside-left, 16px);
-  transform: none;
+.tl-navigation-tabs__scroll-button--right {
+  right: 0;
+  z-index: 1;
 }
-.tl-text-field--label-inside:has(.tl-text-field__prefix--icon) .tl-text-field--label-inside:has(.tl-text-field__input:focus) .tl-text-field__label,
-.tl-text-field--label-inside:has(.tl-text-field__prefix--icon) .tl-text-field--label-inside:has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
-  left: 44px;
+
+.tl-navigation-tabs__scroll-button--left {
+  left: 0;
+  z-index: 1;
 }
-.tl-text-field--label-inside:has(.tl-text-field__prefix--text) .tl-text-field--label-inside:has(.tl-text-field__input:focus) .tl-text-field__label,
-.tl-text-field--label-inside:has(.tl-text-field__prefix--text) .tl-text-field--label-inside:has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
-  left: calc(16px + var(--text-field-affix-width-text) + 8px);
+
+.tl-navigation-tabs__scroll-button svg {
+  fill: var(--navigation-tabs-scroll-button-color);
 }
 
 .tl-textarea {
@@ -8875,13 +8564,13 @@ body {
 .tl-textarea--no-min-width {
   min-width: auto;
 }
-.tl-textarea--disabled {
-  pointer-events: none;
+.tl-textarea:has(.tl-textarea__input:disabled) {
+  cursor: not-allowed;
 }
-.tl-textarea--readonly:not(.tl-textarea--disabled):not(.tl-textarea--hide-readonly-icon)::before {
+.tl-textarea:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
   content: "";
   position: absolute;
-  top: 19px;
+  top: 18px;
   right: 18px;
   width: 16px;
   height: 16px;
@@ -8892,14 +8581,27 @@ body {
   mask-position: center;
   z-index: 1;
 }
-.tl-textarea:not(.tl-textarea--label-inside).tl-textarea--readonly:not(.tl-textarea--disabled):not(.tl-textarea--hide-readonly-icon)::before {
+.traton .tl-textarea:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
+  top: 20px;
+  right: 16px;
+}
+.tl-textarea:not(.tl-textarea--label-inside):has(.tl-textarea__label):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
+  top: 42px;
+}
+.traton .tl-textarea:not(.tl-textarea--label-inside):has(.tl-textarea__label):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
   top: 44px;
 }
+.tl-textarea:not(.tl-textarea--label-inside):not(:has(.tl-textarea__label)):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
+  top: 17px;
+}
+.traton .tl-textarea:not(.tl-textarea--label-inside):not(:has(.tl-textarea__label)):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
+  top: 19px;
+}
 .tl-textarea::after {
   content: "";
   position: absolute;
-  bottom: 5px;
-  right: 2px;
+  bottom: 3px;
+  right: 3px;
   width: 12px;
   height: 12px;
   background-color: var(--textarea-resize-icon);
@@ -8911,14 +8613,14 @@ body {
   z-index: 1;
 }
 .traton .tl-textarea::after {
-  bottom: 7px;
+  bottom: 5px;
   right: 4px;
 }
 .tl-textarea:not(.tl-textarea--label-inside)::after {
-  bottom: 7px;
+  bottom: 5px;
 }
 .traton .tl-textarea:not(.tl-textarea--label-inside)::after {
-  bottom: 9px;
+  bottom: 5px;
 }
 .tl-textarea:has(.tl-textarea__bottom)::after {
   bottom: 25px;
@@ -8926,7 +8628,7 @@ body {
 .traton .tl-textarea:has(.tl-textarea__bottom)::after {
   bottom: 27px;
 }
-.tl-textarea--disabled::after {
+.tl-textarea :has(.tl-textarea__input:disabled)::after {
   background-color: var(--color-foreground-text-disabled);
 }
 
@@ -8979,7 +8681,7 @@ body {
 .tl-textarea__input::-webkit-resizer {
   display: none;
 }
-.tl-textarea:hover .tl-textarea__input:not(:focus) {
+.tl-textarea:hover .tl-textarea__input:not(:focus):not(:disabled) {
   box-shadow: inset var(--textarea-box-shadow-hover);
 }
 .tl-textarea--error .tl-textarea__input {
@@ -8988,25 +8690,27 @@ body {
 .tl-textarea--error .tl-textarea__input:focus {
   box-shadow: inset var(--textarea-box-shadow-error-focus);
 }
-.tl-textarea--error:hover .tl-textarea__input:not(:focus) {
+.tl-textarea--error:hover .tl-textarea__input:not(:focus):not(:disabled) {
   box-shadow: inset var(--textarea-box-shadow-error-hover);
 }
-.tl-textarea--success:not(.tl-textarea--readonly):not(.tl-textarea--disabled) .tl-textarea__input:not(:focus) {
+.tl-textarea--success:not(:has(.tl-textarea__input[readonly])):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input:not(:focus) {
   box-shadow: inset var(--textarea-box-shadow-success);
 }
-.tl-textarea--readonly .tl-textarea__input {
+.tl-textarea__input:disabled {
+  box-shadow: none;
+  color: var(--textarea-text-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input {
   box-shadow: inset var(--textarea-box-shadow);
 }
-.tl-textarea--readonly .tl-textarea__input:focus {
+:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input:focus {
   box-shadow: inset var(--textarea-box-shadow-focus);
 }
-.tl-textarea--readonly:hover .tl-textarea__input:not(:focus) {
+:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):hover .tl-textarea__input:not(:focus) {
   box-shadow: inset var(--textarea-box-shadow-hover);
 }
-.tl-textarea--disabled .tl-textarea__input {
-  box-shadow: none;
-  color: var(--textarea-text-disabled);
-}
 .tl-textarea--label-inside .tl-textarea__input {
   padding-top: 26px;
   padding-bottom: 15px;
@@ -9015,16 +8719,16 @@ body {
   color: transparent;
   transform: translateY(1px);
 }
-.tl-textarea--disabled.tl-textarea--label-inside .tl-textarea__input::placeholder {
-  color: var(--textarea-placeholder) !important;
+.tl-textarea--label-inside .tl-textarea__input:disabled::placeholder {
+  color: var(--textarea-placeholder-disabled) !important;
 }
-.tl-textarea--readonly .tl-textarea__input {
+:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input {
   user-select: auto;
   caret-color: transparent;
   cursor: default;
   pointer-events: none;
 }
-.tl-textarea--readonly:not(.tl-textarea--disabled):not(.tl-textarea--hide-readonly-icon) .tl-textarea__input {
+:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea__input--hide-readonly-icon) .tl-textarea__input {
   padding-right: 50px;
 }
 
@@ -9056,7 +8760,7 @@ body {
   transition: transform 0.15s, font-size 0.15s, color 0.15s, top 0.15s;
   z-index: 1;
 }
-.tl-textarea--label-inside.tl-textarea--disabled .tl-textarea__label {
+.tl-textarea--label-inside:has(.tl-textarea__input:disabled) .tl-textarea__label {
   font-family: var(--detail-07-font-family);
   font-size: var(--detail-07-font-size);
   line-height: var(--detail-07-line-height);
@@ -9067,7 +8771,7 @@ body {
   color: var(--textarea-label-disabled);
   transform: translateY(0);
 }
-.tl-textarea:not(.tl-textarea--label-inside).tl-textarea--disabled .tl-textarea__label {
+.tl-textarea:not(.tl-textarea--label-inside):has(.tl-textarea__input:disabled) .tl-textarea__label {
   color: var(--textarea-label-disabled);
 }
 
@@ -9087,7 +8791,7 @@ body {
   color: var(--textarea-helper);
   position: relative;
 }
-.tl-textarea--disabled .tl-textarea__helper {
+:has(.tl-textarea__input:disabled) .tl-textarea__helper {
   color: var(--color-foreground-text-disabled);
 }
 .tl-textarea--error .tl-textarea__helper {
@@ -9106,16 +8810,16 @@ body {
   mask-repeat: no-repeat;
   mask-position: center;
 }
-.tl-textarea--error.tl-textarea--readonly .tl-textarea__helper {
+.tl-textarea--error:has(.tl-textarea__input[readonly]) .tl-textarea__helper {
   padding-left: 0;
 }
-.tl-textarea--error.tl-textarea--readonly .tl-textarea__helper::before {
+.tl-textarea--error:has(.tl-textarea__input[readonly]) .tl-textarea__helper::before {
   display: none;
 }
-.tl-textarea--error:not(.tl-textarea--readonly):not(.tl-textarea--disabled) .tl-textarea__helper {
+.tl-textarea--error:not(:has(.tl-textarea__input[readonly])):not(:has(.tl-textarea__input:disabled)) .tl-textarea__helper {
   color: var(--textarea-error);
 }
-.tl-textarea--error.tl-textarea--disabled .tl-textarea__helper::before {
+.tl-textarea--error:has(.tl-textarea__input:disabled) .tl-textarea__helper::before {
   background-color: var(--color-foreground-text-disabled);
 }
 
@@ -9129,13 +8833,13 @@ body {
   margin-left: auto;
   color: var(--textarea-textcounter);
 }
-.tl-textarea--disabled .tl-textarea__charcounter {
+:has(.tl-textarea__input:disabled) .tl-textarea__charcounter {
   color: var(--color-foreground-text-disabled);
 }
-.tl-textarea--error:not(.tl-textarea--readonly):not(.tl-textarea--disabled) .tl-textarea__charcounter {
+.tl-textarea--error:not(:has(.tl-textarea__input[readonly])):not(:has(.tl-textarea__input:disabled)) .tl-textarea__charcounter {
   color: var(--textarea-error);
 }
-.tl-textarea--error:not(.tl-textarea--readonly):not(.tl-textarea--disabled) .tl-textarea__charcounter .tl-textarea__charcounter-divider {
+.tl-textarea--error:not(:has(.tl-textarea__input[readonly])):not(:has(.tl-textarea__input:disabled)) .tl-textarea__charcounter .tl-textarea__charcounter-divider {
   color: var(--textarea-error);
 }
 
@@ -9275,6 +8979,10 @@ body {
   --toggle-border-focus: var(--color-foreground-border-accent-focus);
 }
 
+.tl-toggle:has(input[type=checkbox]:disabled) {
+  cursor: not-allowed;
+}
+
 .tl-toggle__input {
   appearance: initial;
   margin: 0;
@@ -9332,6 +9040,7 @@ body {
 }
 .tl-toggle__input:disabled {
   pointer-events: none;
+  cursor: not-allowed;
 }
 .tl-toggle__input:disabled::before {
   background-color: var(--toggle-disabled);
@@ -9380,9 +9089,10 @@ body {
   color: var(--toggle-text);
   margin-bottom: 12px;
 }
-.tl-toggle__headline--disabled {
+:has(input[type=checkbox]:disabled) .tl-toggle__headline {
   color: var(--toggle-disabled);
   user-select: none;
+  cursor: not-allowed;
 }
 
 .tl-toggle__label {
@@ -9399,9 +9109,10 @@ body {
   vertical-align: middle;
   padding-left: 8px;
 }
-.tl-toggle__label--disabled {
+input[type=checkbox]:disabled ~ .tl-toggle__label {
   color: var(--toggle-disabled);
   pointer-events: none;
+  cursor: not-allowed;
 }
 
 .tl-tooltip {