@scania/tegel-lite 0.0.3-rules-beta.9 → 0.1.0-beta.5

package/dist/tl-slider.css

@@ -12,6 +12,8 @@
   --slider-disabled-text: var(--color-foreground-text-disabled);
   --slider-value-tooltip-background: var(--color-background-inverse-layer-03);
   --slider-value-tooltip: var(--color-foreground-text-inverse-strong);
+  --slider-input-background: var(--color-background-layer-01);
+  --slider-input-box-shadow: 0 -1px 0 0 var(--color-foreground-border-soft);
 }
 
 .tl-slider,
@@ -21,192 +23,433 @@
 
 .traton .tl-slider {
   --slider-border-radius: 4px;
+  --slider-input-box-shadow: 0 0 0 1px var(--color-foreground-border-soft);
 }
 
-.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);
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.tl-button,
+tds-button,
+.tl-mode-light .tl-button,
+.tds-mode-light tds-button {
+  --component-button-primary-text: var(--color-brand-neutral-white);
 }
 
-.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;
+.scania .tds-mode-dark tds-button,
+.scania .tl-mode-dark .tl-button {
+  --component-button-primary-text: var(--color-brand-neutral-white);
 }
 
-.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;
+.tds-mode-dark tds-button,
+.tl-mode-dark .tl-button {
+  --component-button-primary-text: var(--color-brand-neutral-black);
 }
 
-/**
- * Do not edit directly, this file was auto-generated.
- */
-.tl-icon {
-  display: inline-block;
-  width: 20px;
-  height: 20px;
-  mask-repeat: no-repeat;
-  mask-position: center;
-  mask-size: contain;
-  flex-shrink: 0;
-  color: inherit;
-  mask-image: none;
+.tl-button {
+  --button-transparent: transparent;
+  --button-white: var(--color-brand-neutral-white);
+  --button-black: var(--color-brand-neutral-black);
+  --button-radius: var(--dimension-radius-for-surface-clickable);
+  --button-sm-only-icon-padding: 11px;
+  --button-md-only-icon-padding: 13px;
+  --button-lg-only-icon-padding: 17px;
+  --button-primary-background: var(--color-background-accent-primary-default);
+  --button-primary-background-hover: var(--color-background-accent-primary-hover);
+  --button-primary-background-active: var(--color-background-accent-primary-pressed);
+  --button-primary-background-disabled: var(--color-background-accent-primary-disabled);
+  --button-primary-color: var(--component-button-primary-text);
+  --button-primary-color-disabled: var(--color-foreground-text-disabled);
+  --button-primary-border-color: var(--button-transparent);
+  --button-primary-border-color-disabled: var(--button-transparent);
+  --button-primary-background-focus: var(--color-background-accent-primary-focus);
+  --button-primary-color-focus: var(--component-button-primary-text);
+  --button-primary-border-color-focus: var(--color-foreground-border-accent-focus);
+  --button-primary-outline-color-focus: var(--color-foreground-border-accent-focus);
+  --button-secondary-background: var(--button-transparent);
+  --button-secondary-color: var(--color-foreground-text-strong);
+  --button-secondary-border-color: var(--color-foreground-border-soft);
+  --button-secondary-border-color-hover: var(--color-foreground-border-subtle);
+  --button-secondary-border-color-active: var(--color-foreground-border-strong);
+  --button-secondary-background-disabled: var(--button-transparent);
+  --button-secondary-color-disabled: var(--color-foreground-text-disabled);
+  --button-secondary-border-color-disabled: var(--color-foreground-border-discrete);
+  --button-secondary-background-focus: var(--button-transparent);
+  --button-secondary-color-focus: var(--color-foreground-text-strong);
+  --button-secondary-border-color-focus: var(--color-foreground-border-accent-focus);
+  --button-secondary-outline-color-focus: var(--color-foreground-border-accent-focus);
+  --button-ghost-background: var(--button-transparent);
+  --button-ghost-color: var(--color-foreground-text-strong);
+  --button-ghost-border-color: var(--button-transparent);
+  --button-ghost-border-color-hover: var(--color-foreground-border-subtle);
+  --button-ghost-border-color-active: var(--color-foreground-border-strong);
+  --button-ghost-color-disabled: var(--color-foreground-text-disabled);
+  --button-ghost-border-color-disabled: var(--button-transparent);
+  --button-ghost-background-focus: var(--button-transparent);
+  --button-ghost-color-focus: var(--color-foreground-text-strong);
+  --button-ghost-border-color-focus: var(--color-foreground-border-accent-focus);
+  --button-ghost-outline-color-focus: var(--color-foreground-border-accent-focus);
+  --button-danger-background: var(--color-background-accent-danger-default);
+  --button-danger-color: var(--button-white);
+  --button-danger-border-color: var(--button-transparent);
+  --button-danger-background-hover: var(--color-background-accent-danger-hover);
+  --button-danger-background-active: var(--color-background-accent-danger-pressed);
+  --button-danger-background-disabled: var(--color-background-accent-danger-disabled);
+  --button-danger-color-disabled: var(--color-foreground-text-disabled);
+  --button-danger-border-color-disabled: var(--button-transparent);
+  --button-danger-border-color-active: var(--color-background-accent-danger-pressed);
+  --button-danger-background-focus: var(--color-background-accent-danger-focus);
+  --button-danger-color-focus: var(--button-white);
+  --button-danger-border-color-focus: var(--button-transparent);
+  --button-danger-outline-color-focus: var(--color-foreground-border-accent-focus);
 }
-.tl-icon--24v_battery {
-  mask-image: var(--icon-24v_battery-svg);
-  background-color: currentcolor;
+.tl-button .tl-button--primary {
+  --button-primary-background-disabled: var(--color-background-accent-primary-disabled);
+  --button-danger-background-disabled: var(--color-background-accent-danger-disabled);
 }
-.tl-icon--24v_battery_inactive {
-  mask-image: var(--icon-24v_battery_inactive-svg);
-  background-color: currentcolor;
+.tl-button .tl-button--secondary {
+  --button-primary-background-disabled: var(--button-white);
+  --button-danger-background-disabled: var(--button-white);
 }
-.tl-icon--acceleration {
-  mask-image: var(--icon-acceleration-svg);
-  background-color: currentcolor;
+
+.scania .tl-button {
+  --button-outline-width: 2px;
 }
-.tl-icon--acceleration_inactive {
-  mask-image: var(--icon-acceleration_inactive-svg);
-  background-color: currentcolor;
+
+.traton .tl-button {
+  --button-outline-width: 4px;
 }
-.tl-icon--adblue {
-  mask-image: var(--icon-adblue-svg);
-  background-color: currentcolor;
+
+/* Base button styles */
+.tl-button {
+  box-sizing: border-box;
 }
-.tl-icon--adblue_inactive {
-  mask-image: var(--icon-adblue_inactive-svg);
-  background-color: currentcolor;
+.tl-button * {
+  box-sizing: border-box;
 }
-.tl-icon--arrow_diagonal {
-  mask-image: var(--icon-arrow_diagonal-svg);
-  background-color: currentcolor;
+.tl-button {
+  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);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  border-radius: var(--button-radius);
+  border: 1px solid var(--button-secondary-border-color);
+  box-shadow: none;
+  position: relative;
+  text-decoration: none;
+  cursor: pointer;
 }
-.tl-icon--arrow_down {
-  mask-image: var(--icon-arrow_down-svg);
-  background-color: currentcolor;
+.tl-button:focus-visible {
+  outline: var(--button-outline-width) solid var(--color-foreground-border-accent-focus);
+  outline-offset: calc(var(--button-outline-width) * -1);
 }
-.tl-icon--arrow_left {
-  mask-image: var(--icon-arrow_left-svg);
-  background-color: currentcolor;
+.tl-button {
+  /* Variants */
 }
-.tl-icon--arrow_right {
-  mask-image: var(--icon-arrow_right-svg);
-  background-color: currentcolor;
+.tl-button--primary {
+  background-color: var(--button-primary-background);
+  color: var(--button-primary-color);
+  border-color: var(--button-primary-border-color);
 }
-.tl-icon--arrow_up {
-  mask-image: var(--icon-arrow_up-svg);
-  background-color: currentcolor;
+.tl-button--primary:hover:not(:disabled) {
+  background-color: var(--button-primary-background-hover);
 }
-.tl-icon--audio {
-  mask-image: var(--icon-audio-svg);
-  background-color: currentcolor;
+.tl-button--primary:disabled {
+  background-color: var(--button-primary-background-disabled);
+  color: var(--button-primary-color-disabled);
+  border-color: var(--button-primary-border-color-disabled);
+  cursor: not-allowed;
+  opacity: 0.6;
 }
-.tl-icon--audio_inactive {
-  mask-image: var(--icon-audio_inactive-svg);
-  background-color: currentcolor;
+.tl-button--primary:focus-visible:not(:disabled) {
+  background: var(--button-primary-background-focus);
+  border-color: var(--button-primary-border-color-focus);
+  color: var(--button-primary-color-focus);
+  outline-color: var(--button-primary-outline-color-focus);
 }
-.tl-icon--award {
-  mask-image: var(--icon-award-svg);
-  background-color: currentcolor;
+.tl-button--primary:active:not(:disabled):focus-visible {
+  outline: none;
+  outline-offset: none;
 }
-.tl-icon--back {
-  mask-image: var(--icon-back-svg);
-  background-color: currentcolor;
+.tl-button--primary:active:not(:disabled) {
+  background-color: var(--button-primary-background-active);
+  border-color: var(--button-primary-background-active);
 }
-.tl-icon--backward {
-  mask-image: var(--icon-backward-svg);
-  background-color: currentcolor;
+.tl-button--secondary {
+  background-color: var(--button-secondary-background);
+  color: var(--button-secondary-color);
+  border-color: var(--button-secondary-border-color);
 }
-.tl-icon--backward_inactive {
-  mask-image: var(--icon-backward_inactive-svg);
-  background-color: currentcolor;
+.tl-button--secondary:hover:not(:disabled) {
+  border-color: var(--button-secondary-border-color-hover);
 }
-.tl-icon--bento {
-  mask-image: var(--icon-bento-svg);
-  background-color: currentcolor;
+.tl-button--secondary:disabled {
+  background-color: var(--button-secondary-background-disabled);
+  color: var(--button-secondary-color-disabled);
+  border-color: var(--button-secondary-border-color-disabled);
+  cursor: not-allowed;
+  opacity: 0.6;
 }
-.tl-icon--bug {
-  mask-image: var(--icon-bug-svg);
-  background-color: currentcolor;
+.tl-button--secondary:focus-visible:not(:disabled) {
+  background: var(--button-secondary-background-focus);
+  border-color: var(--button-secondary-border-color-focus);
+  color: var(--button-secondary-color-focus);
+  outline-color: var(--button-secondary-outline-color-focus);
 }
-.tl-icon--bug_inactive {
-  mask-image: var(--icon-bug_inactive-svg);
-  background-color: currentcolor;
+.tl-button--secondary:active:not(:disabled):focus-visible {
+  outline: none;
 }
-.tl-icon--burger {
-  mask-image: var(--icon-burger-svg);
-  background-color: currentcolor;
+.tl-button--secondary:active:not(:disabled) {
+  border-color: var(--button-secondary-border-color-active);
 }
-.tl-icon--bus {
-  mask-image: var(--icon-bus-svg);
-  background-color: currentcolor;
+.tl-button--ghost {
+  background-color: var(--button-ghost-background);
+  color: var(--button-ghost-color);
+  border-color: var(--button-ghost-border-color);
 }
-.tl-icon--bus_inactive {
-  mask-image: var(--icon-bus_inactive-svg);
-  background-color: currentcolor;
+.tl-button--ghost:hover:not(:disabled) {
+  border-color: var(--button-ghost-border-color-hover);
 }
-.tl-icon--cab_door {
-  mask-image: var(--icon-cab_door-svg);
-  background-color: currentcolor;
+.tl-button--ghost:disabled {
+  color: var(--button-ghost-color-disabled);
+  cursor: not-allowed;
+  opacity: 0.6;
 }
-.tl-icon--calendar {
-  mask-image: var(--icon-calendar-svg);
-  background-color: currentcolor;
+.tl-button--ghost:focus-visible:not(:disabled) {
+  background: var(--button-ghost-background-focus);
+  border-color: var(--button-ghost-border-color-focus);
+  color: var(--button-ghost-color-focus);
+  outline-color: var(--button-ghost-outline-color-focus);
 }
-.tl-icon--calendar_inactive {
-  mask-image: var(--icon-calendar_inactive-svg);
-  background-color: currentcolor;
+.tl-button--ghost:active:not(:disabled):focus-visible {
+  outline: none;
 }
-.tl-icon--camera {
-  mask-image: var(--icon-camera-svg);
-  background-color: currentcolor;
+.tl-button--ghost:active:not(:disabled) {
+  border-color: var(--button-ghost-border-color-active);
+}
+.tl-button--danger {
+  background-color: var(--button-danger-background);
+  color: var(--button-danger-color);
+  border-color: var(--button-danger-border-color);
+}
+.tl-button--danger:hover:not(:disabled) {
+  background-color: var(--button-danger-background-hover);
+}
+.tl-button--danger:disabled {
+  background-color: var(--button-danger-background-disabled);
+  color: var(--button-danger-color-disabled);
+  border-color: var(--button-danger-border-color-disabled);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.tl-button--danger:focus-visible:not(:disabled) {
+  background: var(--button-danger-background-focus);
+  border-color: var(--button-danger-border-color-focus);
+  color: var(--button-danger-color-focus);
+  outline-color: var(--button-danger-outline-color-focus);
+}
+.tl-button--danger:active:not(:disabled):focus-visible {
+  outline: none;
+}
+.tl-button--danger:active:not(:disabled) {
+  background-color: var(--button-danger-background-active);
+  border-color: var(--button-danger-border-color-active);
+}
+.tl-button {
+  /* Sizes */
+}
+.tl-button--xs {
+  padding: var(--tds-spacing-element-4) var(--tds-spacing-element-8);
+  height: 24px;
+}
+.tl-button--sm {
+  padding: var(--tds-spacing-element-12);
+  height: 40px;
+}
+.tl-button--md {
+  padding: var(--tds-spacing-element-16);
+  height: 48px;
+}
+.tl-button--lg {
+  padding: var(--tds-spacing-element-20);
+  height: 56px;
+}
+.tl-button {
+  /* Icon specific styles */
+}
+.tl-button--icon.tl-button--sm {
+  padding: 10px var(--tds-spacing-element-12);
+}
+.tl-button--icon.tl-button--sm .tl-icon {
+  margin-left: var(--tds-spacing-element-12);
+}
+.tl-button--icon.tl-button--md {
+  padding: 14px var(--tds-spacing-element-16);
+}
+.tl-button--icon.tl-button--md .tl-icon {
+  margin-left: var(--tds-spacing-element-16);
+}
+.tl-button--icon.tl-button--lg {
+  padding: 18px var(--tds-spacing-element-20);
+}
+.tl-button--icon.tl-button--lg .tl-icon {
+  margin-left: var(--tds-spacing-element-20);
+}
+.tl-button {
+  /* Only icon specific styles */
+}
+.tl-button--only-icon.tl-button--sm {
+  padding: var(--button-sm-only-icon-padding);
+}
+.tl-button--only-icon.tl-button--sm .tl-icon {
+  margin-left: 0;
+}
+.tl-button--only-icon.tl-button--md {
+  padding: var(--button-md-only-icon-padding);
+}
+.tl-button--only-icon.tl-button--md .tl-icon {
+  margin-left: 0;
+}
+.tl-button--only-icon.tl-button--lg {
+  padding: var(--button-lg-only-icon-padding);
+}
+.tl-button--only-icon.tl-button--lg .tl-icon {
+  margin-left: 0;
+}
+.tl-button {
+  /* Full width */
+}
+.tl-button--full-width {
+  width: 100%;
+}
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.tl-icon {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+  flex-shrink: 0;
+  color: inherit;
+  mask-image: none;
+}
+.tl-icon--24v_battery {
+  mask-image: var(--icon-24v_battery-svg);
+  background-color: currentcolor;
+}
+.tl-icon--24v_battery_inactive {
+  mask-image: var(--icon-24v_battery_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--acceleration {
+  mask-image: var(--icon-acceleration-svg);
+  background-color: currentcolor;
+}
+.tl-icon--acceleration_inactive {
+  mask-image: var(--icon-acceleration_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--adblue {
+  mask-image: var(--icon-adblue-svg);
+  background-color: currentcolor;
+}
+.tl-icon--adblue_inactive {
+  mask-image: var(--icon-adblue_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--arrow_diagonal {
+  mask-image: var(--icon-arrow_diagonal-svg);
+  background-color: currentcolor;
+}
+.tl-icon--arrow_down {
+  mask-image: var(--icon-arrow_down-svg);
+  background-color: currentcolor;
+}
+.tl-icon--arrow_left {
+  mask-image: var(--icon-arrow_left-svg);
+  background-color: currentcolor;
+}
+.tl-icon--arrow_right {
+  mask-image: var(--icon-arrow_right-svg);
+  background-color: currentcolor;
+}
+.tl-icon--arrow_up {
+  mask-image: var(--icon-arrow_up-svg);
+  background-color: currentcolor;
+}
+.tl-icon--audio {
+  mask-image: var(--icon-audio-svg);
+  background-color: currentcolor;
+}
+.tl-icon--audio_inactive {
+  mask-image: var(--icon-audio_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--award {
+  mask-image: var(--icon-award-svg);
+  background-color: currentcolor;
+}
+.tl-icon--back {
+  mask-image: var(--icon-back-svg);
+  background-color: currentcolor;
+}
+.tl-icon--backward {
+  mask-image: var(--icon-backward-svg);
+  background-color: currentcolor;
+}
+.tl-icon--backward_inactive {
+  mask-image: var(--icon-backward_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--bento {
+  mask-image: var(--icon-bento-svg);
+  background-color: currentcolor;
+}
+.tl-icon--bug {
+  mask-image: var(--icon-bug-svg);
+  background-color: currentcolor;
+}
+.tl-icon--bug_inactive {
+  mask-image: var(--icon-bug_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--burger {
+  mask-image: var(--icon-burger-svg);
+  background-color: currentcolor;
+}
+.tl-icon--bus {
+  mask-image: var(--icon-bus-svg);
+  background-color: currentcolor;
+}
+.tl-icon--bus_inactive {
+  mask-image: var(--icon-bus_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--cab_door {
+  mask-image: var(--icon-cab_door-svg);
+  background-color: currentcolor;
+}
+.tl-icon--calendar {
+  mask-image: var(--icon-calendar-svg);
+  background-color: currentcolor;
+}
+.tl-icon--calendar_inactive {
+  mask-image: var(--icon-calendar_inactive-svg);
+  background-color: currentcolor;
+}
+.tl-icon--camera {
+  mask-image: var(--icon-camera-svg);
+  background-color: currentcolor;
 }
 .tl-icon--camera_inactive {
   mask-image: var(--icon-camera_inactive-svg);
@@ -548,8 +791,8 @@
   mask-image: var(--icon-gift-svg);
   background-color: currentcolor;
 }
-.tl-icon--gift inactive {
-  mask-image: var(--icon-gift inactive-svg);
+.tl-icon--gift_inactive {
+  mask-image: var(--icon-gift_inactive-svg);
   background-color: currentcolor;
 }
 .tl-icon--global {
@@ -720,6 +963,14 @@
   mask-image: var(--icon-message_inactive-svg);
   background-color: currentcolor;
 }
+.tl-icon--microphone {
+  mask-image: var(--icon-microphone-svg);
+  background-color: currentcolor;
+}
+.tl-icon--microphone_inactive {
+  mask-image: var(--icon-microphone_inactive-svg);
+  background-color: currentcolor;
+}
 .tl-icon--mileage {
   mask-image: var(--icon-mileage-svg);
   background-color: currentcolor;
@@ -752,6 +1003,10 @@
   mask-image: var(--icon-notification_inactive-svg);
   background-color: currentcolor;
 }
+.tl-icon--notification_snooze {
+  mask-image: var(--icon-notification_snooze-svg);
+  background-color: currentcolor;
+}
 .tl-icon--oil_level {
   mask-image: var(--icon-oil_level-svg);
   background-color: currentcolor;
@@ -760,6 +1015,10 @@
   mask-image: var(--icon-oil_level_inactive-svg);
   background-color: currentcolor;
 }
+.tl-icon--paperclip {
+  mask-image: var(--icon-paperclip-svg);
+  background-color: currentcolor;
+}
 .tl-icon--pause {
   mask-image: var(--icon-pause-svg);
   background-color: currentcolor;
@@ -1082,903 +1341,187 @@
 }
 .tl-icon--wifi_inactive {
   mask-image: var(--icon-wifi_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--windscreen_heating {
-  mask-image: var(--icon-windscreen_heating-svg);
-  background-color: currentcolor;
-}
-.tl-icon--windscreen_heating_inactive {
-  mask-image: var(--icon-windscreen_heating_inactive-svg);
-  background-color: currentcolor;
-}
-.tl-icon--12 {
-  width: 12px;
-  height: 12px;
-}
-.tl-icon--14 {
-  width: 14px;
-  height: 14px;
-}
-.tl-icon--16 {
-  width: 16px;
-  height: 16px;
-}
-.tl-icon--18 {
-  width: 18px;
-  height: 18px;
-}
-.tl-icon--20 {
-  width: 20px;
-  height: 20px;
-}
-.tl-icon--22 {
-  width: 22px;
-  height: 22px;
-}
-.tl-icon--24 {
-  width: 24px;
-  height: 24px;
-}
-.tl-icon--26 {
-  width: 26px;
-  height: 26px;
-}
-.tl-icon--28 {
-  width: 28px;
-  height: 28px;
-}
-.tl-icon--30 {
-  width: 30px;
-  height: 30px;
-}
-.tl-icon--32 {
-  width: 32px;
-  height: 32px;
-}
-.tl-icon--34 {
-  width: 34px;
-  height: 34px;
-}
-.tl-icon--36 {
-  width: 36px;
-  height: 36px;
-}
-.tl-icon--38 {
-  width: 38px;
-  height: 38px;
-}
-.tl-icon--40 {
-  width: 40px;
-  height: 40px;
-}
-.tl-icon--42 {
-  width: 42px;
-  height: 42px;
-}
-.tl-icon--44 {
-  width: 44px;
-  height: 44px;
-}
-.tl-icon--46 {
-  width: 46px;
-  height: 46px;
-}
-.tl-icon--48 {
-  width: 48px;
-  height: 48px;
-}
-.tl-icon--50 {
-  width: 50px;
-  height: 50px;
-}
-.tl-icon--52 {
-  width: 52px;
-  height: 52px;
-}
-.tl-icon--54 {
-  width: 54px;
-  height: 54px;
-}
-.tl-icon--56 {
-  width: 56px;
-  height: 56px;
-}
-.tl-icon--58 {
-  width: 58px;
-  height: 58px;
-}
-.tl-icon--60 {
-  width: 60px;
-  height: 60px;
-}
-.tl-icon--62 {
-  width: 62px;
-  height: 62px;
-}
-.tl-icon--64 {
-  width: 64px;
-  height: 64px;
-}
-.tl-icon--66 {
-  width: 66px;
-  height: 66px;
-}
-.tl-icon--68 {
-  width: 68px;
-  height: 68px;
-}
-.tl-icon--70 {
-  width: 70px;
-  height: 70px;
-}
-.tl-icon--72 {
-  width: 72px;
-  height: 72px;
-}
-.tl-icon--74 {
-  width: 74px;
-  height: 74px;
-}
-.tl-icon--76 {
-  width: 76px;
-  height: 76px;
-}
-.tl-icon--78 {
-  width: 78px;
-  height: 78px;
-}
-.tl-icon--80 {
-  width: 80px;
-  height: 80px;
-}
-.tl-icon--82 {
-  width: 82px;
-  height: 82px;
-}
-.tl-icon--84 {
-  width: 84px;
-  height: 84px;
-}
-.tl-icon--86 {
-  width: 86px;
-  height: 86px;
-}
-.tl-icon--88 {
-  width: 88px;
-  height: 88px;
-}
-.tl-icon--90 {
-  width: 90px;
-  height: 90px;
-}
-.tl-icon--92 {
-  width: 92px;
-  height: 92px;
-}
-.tl-icon--94 {
-  width: 94px;
-  height: 94px;
-}
-.tl-icon--96 {
-  width: 96px;
-  height: 96px;
-}
-
-.tl-text-field {
-  display: block;
-  position: relative;
-  width: 100%;
-  min-width: 208px;
-  height: 56px;
-  padding-bottom: 1px;
-  border-radius: var(--text-field-border-radius);
-  box-sizing: border-box;
-}
-.tl-text-field--no-min-width {
-  min-width: auto;
-}
-.tl-text-field--lg {
-  height: 56px;
-}
-.tl-text-field--md {
-  height: 48px;
-}
-.tl-text-field--sm {
-  height: 40px;
-}
-.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;
-  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: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-text-field:has(.tl-text-field__input:disabled) {
-  cursor: not-allowed;
-}
-.tl-text-field .tl-icon {
-  background-color: var(--text-field-affix);
-}
-:has(.tl-text-field__input: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%;
-  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;
-}
-.tl-text-field__input:focus {
-  box-shadow: inset var(--text-field-box-shadow-focus);
-}
-.tl-text-field:hover .tl-text-field__input:not(:focus):not(:disabled) {
-  box-shadow: inset var(--text-field-box-shadow-hover);
-}
-.tl-text-field--error .tl-text-field__input {
-  box-shadow: inset var(--text-field-box-shadow-error);
-}
-.tl-text-field--error .tl-text-field__input:focus {
-  box-shadow: inset var(--text-field-box-shadow-error-focus);
-}
-.tl-text-field--error:hover .tl-text-field__input:not(:focus):not(:disabled) {
-  box-shadow: inset var(--text-field-box-shadow-error-hover);
-}
-.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-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;
-}
-: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);
-}
-: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);
-}
-: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);
-}
-: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-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-text-field--lg .tl-text-field__input {
-  padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
-}
-.tl-text-field--md .tl-text-field__input {
-  padding: var(--tds-spacing-element-16);
-}
-.tl-text-field--sm .tl-text-field__input {
-  padding: var(--tds-spacing-element-12) var(--tds-spacing-element-16);
-}
-.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-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-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-text-field--label-inside:has(.tl-text-field__prefix--icon) .tl-text-field__label {
-  left: 44px;
-}
-.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-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-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-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-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-text-field--label-inside:has(.tl-text-field__input:disabled) .tl-text-field__label {
-  color: var(--text-field-label-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-text-field__bottom {
-  display: flex;
-  gap: 8px;
-  padding-top: 4px;
-}
-
-.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);
-  position: relative;
-}
-:has(.tl-text-field__input:disabled) .tl-text-field__helper {
-  color: var(--color-foreground-text-disabled);
-}
-.tl-text-field--error .tl-text-field__helper {
-  padding-left: 24px;
-}
-.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-text-field--error:has(.tl-text-field__input[readonly]) .tl-text-field__helper {
-  padding-left: 0;
-}
-.tl-text-field--error:has(.tl-text-field__input[readonly]) .tl-text-field__helper::before {
-  display: none;
-}
-.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-text-field--error:has(.tl-text-field__input:disabled) .tl-text-field__helper::before {
-  background-color: var(--color-foreground-text-disabled);
-}
-
-.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);
-}
-:has(.tl-text-field__input:disabled) .tl-text-field__charcounter {
-  color: var(--color-foreground-text-disabled);
-}
-.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-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-text-field__charcounter-divider {
-  color: var(--color-foreground-text-disabled);
-}
-
-.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;
-  z-index: 1;
-  position: relative;
-}
-.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-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));
-}
-: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);
-}
-: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);
-}
-: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);
-}
-:has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon.tl-icon {
-  background-color: var(--text-field-affix-disabled);
-}
-
-.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-text-field__suffix--text, .tl-text-field__suffix--icon {
-  position: absolute;
-  right: 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__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) !important;
-}
-
-.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-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-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-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-button {
-  --button-transparent: transparent;
-  --button-white: var(--color-brand-neutral-white);
-  --button-black: var(--color-brand-neutral-black);
-  --button-radius: var(--dimension-radius-for-surface-clickable);
-  --button-sm-only-icon-padding: 11px;
-  --button-md-only-icon-padding: 13px;
-  --button-lg-only-icon-padding: 17px;
-  --button-primary-background: var(--color-background-accent-primary-default);
-  --button-primary-background-hover: var(--color-background-accent-primary-hover);
-  --button-primary-background-active: var(--color-background-accent-primary-pressed);
-  --button-primary-background-disabled: var(--color-background-accent-primary-disabled);
-  --button-primary-color: var(--component-button-primary-text);
-  --button-primary-color-disabled: var(--color-foreground-text-disabled);
-  --button-primary-border-color: var(--button-transparent);
-  --button-primary-border-color-disabled: var(--button-transparent);
-  --button-primary-background-focus: var(--color-background-accent-primary-focus);
-  --button-primary-color-focus: var(--component-button-primary-text);
-  --button-primary-border-color-focus: var(--color-foreground-border-accent-focus);
-  --button-primary-outline-color-focus: var(--color-foreground-border-accent-focus);
-  --button-secondary-background: var(--button-transparent);
-  --button-secondary-color: var(--color-foreground-text-strong);
-  --button-secondary-border-color: var(--color-foreground-border-soft);
-  --button-secondary-border-color-hover: var(--color-foreground-border-subtle);
-  --button-secondary-border-color-active: var(--color-foreground-border-strong);
-  --button-secondary-background-disabled: var(--button-transparent);
-  --button-secondary-color-disabled: var(--color-foreground-text-disabled);
-  --button-secondary-border-color-disabled: var(--color-foreground-border-discrete);
-  --button-secondary-background-focus: var(--button-transparent);
-  --button-secondary-color-focus: var(--color-foreground-text-strong);
-  --button-secondary-border-color-focus: var(--color-foreground-border-accent-focus);
-  --button-secondary-outline-color-focus: var(--color-foreground-border-accent-focus);
-  --button-ghost-background: var(--button-transparent);
-  --button-ghost-color: var(--color-foreground-text-strong);
-  --button-ghost-border-color: var(--button-transparent);
-  --button-ghost-border-color-hover: var(--color-foreground-border-subtle);
-  --button-ghost-border-color-active: var(--color-foreground-border-strong);
-  --button-ghost-color-disabled: var(--color-foreground-text-disabled);
-  --button-ghost-border-color-disabled: var(--button-transparent);
-  --button-ghost-background-focus: var(--button-transparent);
-  --button-ghost-color-focus: var(--color-foreground-text-strong);
-  --button-ghost-border-color-focus: var(--color-foreground-border-accent-focus);
-  --button-ghost-outline-color-focus: var(--color-foreground-border-accent-focus);
-  --button-danger-background: var(--color-background-accent-danger-default);
-  --button-danger-color: var(--button-white);
-  --button-danger-border-color: var(--button-transparent);
-  --button-danger-background-hover: var(--color-background-accent-danger-hover);
-  --button-danger-background-active: var(--color-background-accent-danger-pressed);
-  --button-danger-background-disabled: var(--color-background-accent-danger-disabled);
-  --button-danger-color-disabled: var(--color-foreground-text-disabled);
-  --button-danger-border-color-disabled: var(--button-transparent);
-  --button-danger-border-color-active: var(--color-background-accent-danger-pressed);
-  --button-danger-background-focus: var(--color-background-accent-danger-focus);
-  --button-danger-color-focus: var(--button-white);
-  --button-danger-border-color-focus: var(--button-transparent);
-  --button-danger-outline-color-focus: var(--color-foreground-border-accent-focus);
-}
-.tl-button .tl-button--primary {
-  --button-primary-background-disabled: var(--color-background-accent-primary-disabled);
-  --button-danger-background-disabled: var(--color-background-accent-danger-disabled);
-}
-.tl-button .tl-button--secondary {
-  --button-primary-background-disabled: var(--button-white);
-  --button-danger-background-disabled: var(--button-white);
-}
-
-.scania .tl-button {
-  --button-outline-width: 2px;
-}
-
-.traton .tl-button {
-  --button-outline-width: 4px;
-}
-
-/* Base button styles */
-.tl-button {
-  box-sizing: border-box;
-}
-.tl-button * {
-  box-sizing: border-box;
-}
-.tl-button {
-  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);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 500;
-  border-radius: var(--button-radius);
-  border: 1px solid var(--button-secondary-border-color);
-  box-shadow: none;
-  position: relative;
-  text-decoration: none;
-  cursor: pointer;
-}
-.tl-button:focus-visible {
-  outline: var(--button-outline-width) solid var(--color-foreground-border-accent-focus);
-  outline-offset: calc(var(--button-outline-width) * -1);
-}
-.tl-button {
-  /* Variants */
-}
-.tl-button--primary {
-  background-color: var(--button-primary-background);
-  color: var(--button-primary-color);
-  border-color: var(--button-primary-border-color);
-}
-.tl-button--primary:hover:not(:disabled) {
-  background-color: var(--button-primary-background-hover);
-}
-.tl-button--primary:disabled {
-  background-color: var(--button-primary-background-disabled);
-  color: var(--button-primary-color-disabled);
-  border-color: var(--button-primary-border-color-disabled);
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-.tl-button--primary:focus-visible:not(:disabled) {
-  background: var(--button-primary-background-focus);
-  border-color: var(--button-primary-border-color-focus);
-  color: var(--button-primary-color-focus);
-  outline-color: var(--button-primary-outline-color-focus);
+  background-color: currentcolor;
 }
-.tl-button--primary:active:not(:disabled):focus-visible {
-  outline: none;
-  outline-offset: none;
+.tl-icon--windscreen_heating {
+  mask-image: var(--icon-windscreen_heating-svg);
+  background-color: currentcolor;
 }
-.tl-button--primary:active:not(:disabled) {
-  background-color: var(--button-primary-background-active);
-  border-color: var(--button-primary-background-active);
+.tl-icon--windscreen_heating_inactive {
+  mask-image: var(--icon-windscreen_heating_inactive-svg);
+  background-color: currentcolor;
 }
-.tl-button--secondary {
-  background-color: var(--button-secondary-background);
-  color: var(--button-secondary-color);
-  border-color: var(--button-secondary-border-color);
+.tl-icon--12 {
+  width: 12px;
+  height: 12px;
 }
-.tl-button--secondary:hover:not(:disabled) {
-  border-color: var(--button-secondary-border-color-hover);
+.tl-icon--14 {
+  width: 14px;
+  height: 14px;
 }
-.tl-button--secondary:disabled {
-  background-color: var(--button-secondary-background-disabled);
-  color: var(--button-secondary-color-disabled);
-  border-color: var(--button-secondary-border-color-disabled);
-  cursor: not-allowed;
-  opacity: 0.6;
+.tl-icon--16 {
+  width: 16px;
+  height: 16px;
 }
-.tl-button--secondary:focus-visible:not(:disabled) {
-  background: var(--button-secondary-background-focus);
-  border-color: var(--button-secondary-border-color-focus);
-  color: var(--button-secondary-color-focus);
-  outline-color: var(--button-secondary-outline-color-focus);
+.tl-icon--18 {
+  width: 18px;
+  height: 18px;
 }
-.tl-button--secondary:active:not(:disabled):focus-visible {
-  outline: none;
+.tl-icon--20 {
+  width: 20px;
+  height: 20px;
 }
-.tl-button--secondary:active:not(:disabled) {
-  border-color: var(--button-secondary-border-color-active);
+.tl-icon--22 {
+  width: 22px;
+  height: 22px;
 }
-.tl-button--ghost {
-  background-color: var(--button-ghost-background);
-  color: var(--button-ghost-color);
-  border-color: var(--button-ghost-border-color);
+.tl-icon--24 {
+  width: 24px;
+  height: 24px;
 }
-.tl-button--ghost:hover:not(:disabled) {
-  border-color: var(--button-ghost-border-color-hover);
+.tl-icon--26 {
+  width: 26px;
+  height: 26px;
 }
-.tl-button--ghost:disabled {
-  color: var(--button-ghost-color-disabled);
-  cursor: not-allowed;
-  opacity: 0.6;
+.tl-icon--28 {
+  width: 28px;
+  height: 28px;
 }
-.tl-button--ghost:focus-visible:not(:disabled) {
-  background: var(--button-ghost-background-focus);
-  border-color: var(--button-ghost-border-color-focus);
-  color: var(--button-ghost-color-focus);
-  outline-color: var(--button-ghost-outline-color-focus);
+.tl-icon--30 {
+  width: 30px;
+  height: 30px;
 }
-.tl-button--ghost:active:not(:disabled):focus-visible {
-  outline: none;
+.tl-icon--32 {
+  width: 32px;
+  height: 32px;
 }
-.tl-button--ghost:active:not(:disabled) {
-  border-color: var(--button-ghost-border-color-active);
+.tl-icon--34 {
+  width: 34px;
+  height: 34px;
 }
-.tl-button--danger {
-  background-color: var(--button-danger-background);
-  color: var(--button-danger-color);
-  border-color: var(--button-danger-border-color);
+.tl-icon--36 {
+  width: 36px;
+  height: 36px;
 }
-.tl-button--danger:hover:not(:disabled) {
-  background-color: var(--button-danger-background-hover);
+.tl-icon--38 {
+  width: 38px;
+  height: 38px;
 }
-.tl-button--danger:disabled {
-  background-color: var(--button-danger-background-disabled);
-  color: var(--button-danger-color-disabled);
-  border-color: var(--button-danger-border-color-disabled);
-  cursor: not-allowed;
-  opacity: 0.6;
+.tl-icon--40 {
+  width: 40px;
+  height: 40px;
 }
-.tl-button--danger:focus-visible:not(:disabled) {
-  background: var(--button-danger-background-focus);
-  border-color: var(--button-danger-border-color-focus);
-  color: var(--button-danger-color-focus);
-  outline-color: var(--button-danger-outline-color-focus);
+.tl-icon--42 {
+  width: 42px;
+  height: 42px;
 }
-.tl-button--danger:active:not(:disabled):focus-visible {
-  outline: none;
+.tl-icon--44 {
+  width: 44px;
+  height: 44px;
 }
-.tl-button--danger:active:not(:disabled) {
-  background-color: var(--button-danger-background-active);
-  border-color: var(--button-danger-border-color-active);
+.tl-icon--46 {
+  width: 46px;
+  height: 46px;
 }
-.tl-button {
-  /* Sizes */
+.tl-icon--48 {
+  width: 48px;
+  height: 48px;
 }
-.tl-button--xs {
-  padding: var(--tds-spacing-element-4) var(--tds-spacing-element-8);
-  height: 24px;
+.tl-icon--50 {
+  width: 50px;
+  height: 50px;
 }
-.tl-button--sm {
-  padding: var(--tds-spacing-element-12);
-  height: 40px;
+.tl-icon--52 {
+  width: 52px;
+  height: 52px;
 }
-.tl-button--md {
-  padding: var(--tds-spacing-element-16);
-  height: 48px;
+.tl-icon--54 {
+  width: 54px;
+  height: 54px;
 }
-.tl-button--lg {
-  padding: var(--tds-spacing-element-20);
+.tl-icon--56 {
+  width: 56px;
   height: 56px;
 }
-.tl-button {
-  /* Icon specific styles */
+.tl-icon--58 {
+  width: 58px;
+  height: 58px;
 }
-.tl-button--icon.tl-button--sm {
-  padding: 10px var(--tds-spacing-element-12);
+.tl-icon--60 {
+  width: 60px;
+  height: 60px;
 }
-.tl-button--icon.tl-button--sm .tl-icon {
-  margin-left: var(--tds-spacing-element-12);
+.tl-icon--62 {
+  width: 62px;
+  height: 62px;
 }
-.tl-button--icon.tl-button--md {
-  padding: 14px var(--tds-spacing-element-16);
+.tl-icon--64 {
+  width: 64px;
+  height: 64px;
 }
-.tl-button--icon.tl-button--md .tl-icon {
-  margin-left: var(--tds-spacing-element-16);
+.tl-icon--66 {
+  width: 66px;
+  height: 66px;
 }
-.tl-button--icon.tl-button--lg {
-  padding: 18px var(--tds-spacing-element-20);
+.tl-icon--68 {
+  width: 68px;
+  height: 68px;
 }
-.tl-button--icon.tl-button--lg .tl-icon {
-  margin-left: var(--tds-spacing-element-20);
+.tl-icon--70 {
+  width: 70px;
+  height: 70px;
 }
-.tl-button {
-  /* Only icon specific styles */
+.tl-icon--72 {
+  width: 72px;
+  height: 72px;
 }
-.tl-button--only-icon.tl-button--sm {
-  padding: var(--button-sm-only-icon-padding);
+.tl-icon--74 {
+  width: 74px;
+  height: 74px;
 }
-.tl-button--only-icon.tl-button--sm .tl-icon {
-  margin-left: 0;
+.tl-icon--76 {
+  width: 76px;
+  height: 76px;
 }
-.tl-button--only-icon.tl-button--md {
-  padding: var(--button-md-only-icon-padding);
+.tl-icon--78 {
+  width: 78px;
+  height: 78px;
 }
-.tl-button--only-icon.tl-button--md .tl-icon {
-  margin-left: 0;
+.tl-icon--80 {
+  width: 80px;
+  height: 80px;
 }
-.tl-button--only-icon.tl-button--lg {
-  padding: var(--button-lg-only-icon-padding);
+.tl-icon--82 {
+  width: 82px;
+  height: 82px;
 }
-.tl-button--only-icon.tl-button--lg .tl-icon {
-  margin-left: 0;
+.tl-icon--84 {
+  width: 84px;
+  height: 84px;
 }
-.tl-button {
-  /* Full width */
+.tl-icon--86 {
+  width: 86px;
+  height: 86px;
 }
-.tl-button--full-width {
-  width: 100%;
+.tl-icon--88 {
+  width: 88px;
+  height: 88px;
+}
+.tl-icon--90 {
+  width: 90px;
+  height: 90px;
+}
+.tl-icon--92 {
+  width: 92px;
+  height: 92px;
+}
+.tl-icon--94 {
+  width: 94px;
+  height: 94px;
+}
+.tl-icon--96 {
+  width: 96px;
+  height: 96px;
 }
 
 .tl-slider {
@@ -2024,7 +1567,7 @@
   margin-bottom: 2px;
   margin-left: 0;
 }
-:has(input[type=range]:disabled) .tl-slider__label {
+.tl-slider:has(input[type=range]:disabled) .tl-slider__label {
   color: var(--slider-disabled-text);
 }
 
@@ -2104,7 +1647,7 @@
   flex-shrink: 0;
   align-self: center;
 }
-:has(input[type=range]:disabled) .tl-slider__value {
+.tl-slider:has(input[type=range]:disabled) .tl-slider__value {
   color: var(--slider-disabled-text);
 }
 
@@ -2115,6 +1658,7 @@
   min-width: auto;
   margin-left: 0;
   align-self: center;
+  border-radius: var(--slider-border-radius);
 }
 .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;
@@ -2129,6 +1673,11 @@
   padding: 12px;
   text-align: center;
   appearance: textfield;
+  border: none;
+  background-color: var(--slider-input-background);
+  color: var(--slider-input-value);
+  border-radius: var(--slider-border-radius);
+  box-shadow: inset var(--slider-input-box-shadow);
 }
 .tl-slider__input-wrapper .tl-slider__input-field--decimal {
   width: 56px;
@@ -2179,7 +1728,7 @@
 .tl-slider__thumb:hover .tl-slider__value-tooltip {
   display: block;
 }
-:has(input[type=range]:disabled) .tl-slider__value-tooltip {
+.tl-slider:has(input[type=range]:disabled) .tl-slider__value-tooltip {
   display: none;
 }
 
@@ -2236,11 +1785,11 @@
   width: 20px;
   height: 20px;
 }
-:has(input[type=range]:disabled) .tl-slider__thumb-inner {
+.tl-slider:has(input[type=range]:disabled) .tl-slider__thumb-inner {
   background-color: var(--slider-disabled);
   cursor: not-allowed;
 }
-:has(input[type=range]:disabled) .tl-slider__thumb-inner::before {
+.tl-slider:has(input[type=range]:disabled) .tl-slider__thumb-inner::before {
   display: none;
 }
 
@@ -2271,7 +1820,7 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
-:has(input[type=range]:disabled) .tl-slider__value-divider-line {
+.tl-slider:has(input[type=range]:disabled) .tl-slider__value-divider-line {
   background-color: var(--slider-disabled);
 }
 
@@ -2293,7 +1842,7 @@
   user-select: none;
   color: var(--slider-divider-values);
 }
-:has(input[type=range]:disabled) .tl-slider__value-divider-label {
+.tl-slider:has(input[type=range]:disabled) .tl-slider__value-divider-label {
   color: var(--slider-disabled-text);
 }
 
@@ -2306,7 +1855,7 @@
   top: -1px;
   z-index: 1;
 }
-:has(input[type=range]:disabled) .tl-slider__track-fill {
+.tl-slider:has(input[type=range]:disabled) .tl-slider__track-fill {
   background-color: var(--slider-disabled);
 }