@scania/tegel-lite 1.9.1 → 1.10.0-range-slider-beta.0

package/dist/components.css

@@ -329,6 +329,105 @@
   position: relative;
 }
 
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root,
+.tds-mode-light,
+.scania .tds-mode-light,
+.scania.tds-mode-light,
+.scania .tl-mode-light,
+.scania.tl-mode-light {
+  --component-badge-font-weight: var(--scania-font-weight-bold);
+  --component-badge-border-radius-none: var(--scania-unit-0);
+  --component-badge-border-radius-default: var(--scania-unit-24);
+  --component-badge-border-radius-full: var(--scania-unit-9999);
+  --component-badge-background-default: var(--color-system-danger-default);
+  --component-badge-text-default: var(--color-text-inverse-base);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-badge-font-weight: var(--traton-font-weight-semi-bold);
+  --component-badge-border-radius-none: var(--traton-unit-0);
+  --component-badge-border-radius-default: var(--traton-unit-24);
+  --component-badge-border-radius-full: var(--traton-unit-9999);
+  --component-badge-background-default: var(--color-system-warning-default);
+  --component-badge-text-default: var(--color-text-base);
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component-badge-font-weight: var(--scania-font-weight-bold);
+  --component-badge-border-radius-none: var(--scania-unit-0);
+  --component-badge-border-radius-default: var(--scania-unit-24);
+  --component-badge-border-radius-full: var(--scania-unit-9999);
+  --component-badge-background-default: var(--color-system-danger-subtle);
+  --component-badge-text-default: var(--color-text-base);
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-badge-font-weight: var(--traton-font-weight-semi-bold);
+  --component-badge-border-radius-none: var(--traton-unit-0);
+  --component-badge-border-radius-default: var(--traton-unit-24);
+  --component-badge-border-radius-full: var(--traton-unit-9999);
+  --component-badge-background-default: var(--color-system-warning-default);
+  --component-badge-text-default: var(--color-text-inverse-base);
+}
+
+.tl-badge {
+  --badge-background-color: var(--component-badge-background-default);
+  --badge-color-text: var(--component-badge-text-default);
+  --badge-border-radius: calc(var(--component-badge-border-radius-default) * 1px);
+}
+
+.tl-badge {
+  box-sizing: border-box;
+}
+.tl-badge * {
+  box-sizing: border-box;
+}
+.tl-badge {
+  display: block;
+  border-radius: var(--badge-border-radius);
+  background-color: var(--badge-background-color);
+  text-align: center;
+}
+.tl-badge--sm {
+  height: 8px;
+  width: 8px;
+  line-height: 8px;
+}
+.tl-badge--lg {
+  height: 20px;
+  line-height: 20px;
+  width: 20px;
+}
+.tl-badge--pill {
+  display: inline-block;
+  width: unset;
+  padding-left: 8px;
+  padding-right: 8px;
+}
+.tl-badge--hidden {
+  display: none;
+}
+
+.tl-badge__text {
+  font-size: 12px;
+  color: var(--badge-color-text);
+  font-family: var(--detail-01-font-family);
+  font-weight: bold;
+}
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -8377,6 +8476,632 @@ body {
 .scania .tds-mode-light,
 .scania.tds-mode-light,
 .scania .tl-mode-light,
+.scania.tl-mode-light {
+  --component-slider-background-divider-default: var(--component-slider-background-track-default);
+  --component-slider-background-track-default: var(--scania-color-grey-350);
+  --component-slider-background-selected-default: var(--component-slider-background-thumb-default);
+  --component-slider-background-thumb-default: var(--scania-color-grey-950);
+  --component-slider-background-halo-hover: var(--scania-color-transparent-200);
+  --component-slider-background-halo-active: var(--scania-color-transparent-250);
+  --component-slider-icon-control-default: var(--color-icon-defined);
+  --component-slider-opacity-disabled: var(--scania-opacity-25);
+  --component-slider-text-label-default: var(--scania-color-grey-950);
+  --component-slider-text-value-default: var(--color-text-defined);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-slider-background-divider-default: var(--component-slider-background-track-default);
+  --component-slider-background-track-default: var(--traton-color-grey-500);
+  --component-slider-background-selected-default: var(--component-slider-background-thumb-default);
+  --component-slider-background-thumb-default: var(--traton-color-blue-950);
+  --component-slider-background-halo-hover: var(--color-icon-discrete);
+  --component-slider-background-halo-active: var(--color-icon-disabled);
+  --component-slider-icon-control-default: var(--color-icon-defined);
+  --component-slider-opacity-disabled: var(--traton-opacity-25);
+  --component-slider-text-label-default: var(--traton-color-blue-950);
+  --component-slider-text-value-default: var(--color-text-defined);
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component-slider-background-divider-default: var(--component-slider-background-track-default);
+  --component-slider-background-track-default: var(--scania-color-grey-400);
+  --component-slider-background-selected-default: var(--component-slider-background-thumb-default);
+  --component-slider-background-thumb-default: var(--scania-color-grey-50);
+  --component-slider-background-halo-hover: var(--color-icon-discrete);
+  --component-slider-background-halo-active: var(--color-icon-disabled);
+  --component-slider-icon-control-default: var(--color-icon-defined);
+  --component-slider-opacity-disabled: var(--scania-opacity-25);
+  --component-slider-text-label-default: var(--scania-color-grey-50);
+  --component-slider-text-value-default: var(--color-text-defined);
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-slider-background-divider-default: var(--component-slider-background-track-default);
+  --component-slider-background-track-default: var(--traton-color-blue-850);
+  --component-slider-background-selected-default: var(--component-slider-background-thumb-default);
+  --component-slider-background-thumb-default: var(--traton-color-base-white);
+  --component-slider-background-halo-hover: var(--color-icon-discrete);
+  --component-slider-background-halo-active: var(--color-icon-disabled);
+  --component-slider-icon-control-default: var(--color-icon-defined);
+  --component-slider-opacity-disabled: var(--traton-opacity-25);
+  --component-slider-text-label-default: var(--traton-color-base-white);
+  --component-slider-text-value-default: var(--color-text-defined);
+}
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root,
+.tds-mode-light,
+.scania .tds-mode-light,
+.scania.tds-mode-light,
+.scania .tl-mode-light,
+.scania.tl-mode-light {
+  --component-tooltip-background-default: var(--color-background-inverse-layer-03);
+  --component-tooltip-border-radius-none: var(--scania-unit-0);
+  --component-tooltip-border-radius-default: var(--scania-unit-4);
+  --component-tooltip-text-default: var(--color-text-inverse-strong);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-tooltip-background-default: var(--color-background-inverse-layer-03);
+  --component-tooltip-border-radius-none: var(--traton-unit-0);
+  --component-tooltip-border-radius-default: var(--traton-unit-4);
+  --component-tooltip-text-default: var(--color-text-inverse-strong);
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component-tooltip-background-default: var(--color-background-inverse-layer-03);
+  --component-tooltip-border-radius-none: var(--scania-unit-0);
+  --component-tooltip-border-radius-default: var(--scania-unit-4);
+  --component-tooltip-text-default: var(--color-text-inverse-strong);
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-tooltip-background-default: var(--color-background-inverse-layer-03);
+  --component-tooltip-border-radius-none: var(--traton-unit-0);
+  --component-tooltip-border-radius-default: var(--traton-unit-4);
+  --component-tooltip-text-default: var(--color-text-inverse-strong);
+}
+
+.tl-slider {
+  --slider-label: var(--component-slider-text-label-default);
+  --slider-thumb: var(--component-slider-background-thumb-default);
+  --slider-thumb-hover: var(--component-slider-background-halo-hover);
+  --slider-thumb-active: var(--component-slider-background-halo-active);
+  --slider-track: var(--component-slider-background-track-default);
+  --slider-track-fill: var(--component-slider-background-selected-default);
+  --slider-divider: var(--component-slider-background-divider-default);
+  --slider-divider-values: var(--component-slider-text-value-default);
+  --slider-text-value: var(--component-slider-text-value-default);
+  --slider-input-value: var(--component--input-text-placeholder-default);
+  --slider-opacity-disabled: calc(var(--component-slider-opacity-disabled) / 100);
+  --slider-value-tooltip-background: var(--component-tooltip-background-default);
+  --slider-value-tooltip: var(--component-tooltip-text-default);
+  --slider-value-tooltip-border-radius: calc(var(--component-tooltip-border-radius-default) * 1px);
+  --slider-input-background: var(--component--input-background-primary);
+  --slider-controls-color: var(--component-slider-icon-control-default);
+}
+
+.tl-mode-variant-primary .tl-slider,
+.tds-mode-variant-primary .tl-slider {
+  --slider-input-background: var(--component--input-background-primary);
+}
+
+.tl-mode-variant-secondary .tl-slider,
+.tds-mode-variant-secondary .tl-slider {
+  --slider-input-background: var(--component--input-background-secondary);
+}
+
+.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.tl-slider--disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+  opacity: var(--slider-opacity-disabled);
+}
+
+.tl-slider__label {
+  font-family: var(--type-system-label-01-font-family);
+  font-size: calc(var(--type-system-label-01-font-size) * 1px);
+  line-height: calc(var(--type-system-label-01-line-height) * 1px);
+  font-weight: var(--type-system-label-01-font-weight);
+  letter-spacing: calc(var(--type-system-label-01-letter-spacing) * 1px);
+  user-select: none;
+  color: var(--slider-label);
+  display: block;
+  margin-bottom: 16px;
+}
+.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-left: 4px;
+}
+.tl-slider:has(.tl-slider__value-divider-label):has(.tl-slider__input-wrapper,
+.tl-slider__control-minus,
+.tl-slider__control-plus) .tl-slider__label {
+  margin-bottom: 32px;
+}
+
+.tl-slider__track-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+.tl-slider__track-wrapper:has(.tl-slider__input-wrapper) {
+  gap: 16px;
+  align-items: center;
+  height: 41px;
+}
+
+.tl-slider__control-minus,
+.tl-slider__control-plus {
+  flex-shrink: 0;
+  border: none;
+}
+.tl-slider__control-minus.tl-button,
+.tl-slider__control-plus.tl-button {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+}
+.tl-slider__control-minus.tl-button:disabled,
+.tl-slider__control-plus.tl-button:disabled {
+  opacity: 1;
+}
+.tl-slider__control-minus .tl-icon,
+.tl-slider__control-plus .tl-icon {
+  color: var(--slider-controls-color);
+}
+
+.tl-slider__track {
+  position: relative;
+  flex: 1;
+  min-height: 2px;
+  background-color: var(--slider-track);
+}
+.tl-slider__track-wrapper:has(.tl-slider__input-wrapper) .tl-slider__track {
+  height: 2px;
+  align-self: center;
+}
+.tl-slider__track::after {
+  content: "";
+  position: absolute;
+  inset: -10px 0;
+  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;
+  background-color: var(--slider-thumb-active);
+}
+.tl-slider__track:disabled {
+  cursor: not-allowed;
+}
+.tl-slider__track:disabled::after {
+  cursor: not-allowed;
+}
+
+.tl-slider__value {
+  font-family: var(--type-system-body-01-font-family);
+  font-size: calc(var(--type-system-body-01-font-size) * 1px);
+  line-height: calc(var(--type-system-body-01-line-height) * 1px);
+  font-weight: var(--type-system-body-01-font-weight);
+  letter-spacing: calc(var(--type-system-body-01-letter-spacing) * 1px);
+  text-transform: var(--type-system-body-01-text-transform);
+  user-select: none;
+  color: var(--slider-text-value);
+  flex-shrink: 0;
+  align-self: center;
+}
+
+.tl-slider__input-wrapper.tl-text-field {
+  flex-shrink: 0;
+  width: fit-content;
+  height: auto;
+  min-width: auto;
+  margin-left: 0;
+  align-self: center;
+}
+.tl-slider__input-wrapper.tl-text-field.tl-text-field:not(:has(.tl-text-field__input[readonly])), .tl-slider__input-wrapper.tl-text-field.tl-text-field.tl-text-field--hide-readonly-icon {
+  width: fit-content;
+}
+.tl-slider__track-wrapper:not(:has(.tl-slider__value)) .tl-slider__input-wrapper.tl-text-field {
+  top: -10px;
+}
+.tl-slider__input-wrapper.tl-text-field:has(.tl-text-field__input:disabled) .tl-text-field__input-wrapper {
+  opacity: 1;
+}
+
+.tl-slider__input-wrapper .tl-text-field__input.tl-slider__input-field {
+  width: fit-content;
+  padding: 12px;
+  text-align: center;
+  appearance: textfield;
+  color: var(--slider-input-value);
+  background-color: var(--slider-input-background);
+}
+.tl-slider__input-wrapper .tl-text-field__input.tl-slider__input-field::-webkit-outer-spin-button, .tl-slider__input-wrapper .tl-text-field__input.tl-slider__input-field::-webkit-inner-spin-button {
+  appearance: none;
+  margin: 0;
+}
+
+.tl-slider__input-wrapper:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-slider__input-field[readonly] {
+  width: fit-content;
+  padding-right: 39px;
+}
+
+.tl-slider__value-tooltip {
+  font-family: var(--type-system-label-01-font-family);
+  font-size: calc(var(--type-system-label-01-font-size) * 1px);
+  line-height: calc(var(--type-system-label-01-line-height) * 1px);
+  font-weight: var(--type-system-label-01-font-weight);
+  letter-spacing: calc(var(--type-system-label-01-letter-spacing) * 1px);
+  user-select: none;
+  border-radius: var(--slider-value-tooltip-border-radius);
+  padding: 8px 12px;
+  position: absolute;
+  left: 0;
+  transform: translateX(-50%);
+  top: -52px;
+  background-color: var(--slider-value-tooltip-background);
+  color: var(--slider-value-tooltip);
+  display: none;
+  white-space: nowrap;
+  z-index: 10;
+}
+.tl-slider--small .tl-slider__value-tooltip {
+  top: -50px;
+}
+.tl-slider__value-tooltip::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: -5px;
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 6px solid var(--slider-value-tooltip-background);
+}
+.tl-slider__thumb:hover .tl-slider__value-tooltip {
+  display: block;
+}
+.tl-slider:has(input[type=range]:disabled) .tl-slider__value-tooltip {
+  display: none;
+}
+
+.tl-slider__thumb {
+  position: absolute;
+  z-index: 1;
+  top: 1px;
+}
+
+.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-slider__thumb-inner::before {
+  content: " ";
+  display: none;
+  width: 48px;
+  height: 48px;
+  background-color: var(--slider-thumb-hover);
+  position: absolute;
+  border-radius: 100%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.tl-slider__thumb-inner:focus {
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
+  outline-offset: 1px;
+  z-index: 1;
+}
+.tl-slider__thumb-inner:hover::before {
+  display: block;
+}
+.tl-slider__thumb-inner--pressed {
+  width: 24px;
+  height: 24px;
+}
+.tl-slider__thumb-inner--pressed::before {
+  display: block;
+  background-color: var(--slider-thumb-active);
+}
+.tl-slider--small .tl-slider__thumb-inner {
+  width: 16px;
+  height: 16px;
+}
+.tl-slider--small .tl-slider__thumb-inner::before {
+  width: 40px;
+  height: 40px;
+}
+.tl-slider--small .tl-slider__thumb-inner.tl-slider__thumb-inner--pressed {
+  width: 20px;
+  height: 20px;
+}
+.tl-slider:has(input[type=range]:disabled) .tl-slider__thumb-inner {
+  cursor: not-allowed;
+}
+.tl-slider:has(input[type=range]:disabled) .tl-slider__thumb-inner::before {
+  display: none;
+}
+
+.tl-slider__value-dividers {
+  pointer-events: none;
+  position: absolute;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  top: 1.2px;
+  z-index: 0;
+}
+
+.tl-slider__value-divider {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 16px;
+}
+
+.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-slider__value-divider-label {
+  font-family: var(--type-system-label-01-font-family);
+  font-size: calc(var(--type-system-label-01-font-size) * 1px);
+  line-height: calc(var(--type-system-label-01-line-height) * 1px);
+  font-weight: var(--type-system-label-01-font-weight);
+  letter-spacing: calc(var(--type-system-label-01-letter-spacing) * 1px);
+  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:has(input[type=range]:disabled) .tl-slider__value-divider-label {
+  color: var(--slider-disabled-text);
+}
+
+.tl-slider__track-fill {
+  background-color: var(--slider-track-fill);
+  height: 4px;
+  position: absolute;
+  left: 0;
+  top: -1px;
+  z-index: 1;
+}
+.tl-slider--reverse .tl-slider__track-fill {
+  right: 0;
+  left: unset;
+}
+.tl-slider--range .tl-slider__track-fill {
+  left: unset;
+}
+
+.tl-slider__native-input {
+  display: none;
+}
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root,
+.tds-mode-light,
+.scania .tds-mode-light,
+.scania.tds-mode-light,
+.scania .tl-mode-light,
+.scania.tl-mode-light {
+  --component-spinner-background-default: var(--color-system-info-default);
+  --component-spinner-background-default-inverse: var(--scania-color-grey-00);
+  --component-spinner-size-large: 84;
+  --component-spinner-size-medium: 52;
+  --component-spinner-size-small: 24;
+  --component-spinner-size-extra-small: 16;
+  --component-spinner-stroke-large: 8;
+  --component-spinner-stroke-medium: 6;
+  --component-spinner-stroke-small: 4;
+  --component-spinner-stroke-extra-small: 3;
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-spinner-background-default: var(--traton-color-blue-800);
+  --component-spinner-background-default-inverse: var(--traton-color-transparent-inverse-950);
+  --component-spinner-size-large: 84;
+  --component-spinner-size-medium: 52;
+  --component-spinner-size-small: 24;
+  --component-spinner-size-extra-small: 16;
+  --component-spinner-stroke-large: 8;
+  --component-spinner-stroke-medium: 6;
+  --component-spinner-stroke-small: 4;
+  --component-spinner-stroke-extra-small: 3;
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component-spinner-background-default: var(--color-system-info-default);
+  --component-spinner-background-default-inverse: var(--scania-color-grey-00);
+  --component-spinner-size-large: 84;
+  --component-spinner-size-medium: 52;
+  --component-spinner-size-small: 24;
+  --component-spinner-size-extra-small: 16;
+  --component-spinner-stroke-large: 8;
+  --component-spinner-stroke-medium: 6;
+  --component-spinner-stroke-small: 4;
+  --component-spinner-stroke-extra-small: 3;
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-spinner-background-default: var(--traton-color-grey-300);
+  --component-spinner-background-default-inverse: var(--traton-color-transparent-inverse-950);
+  --component-spinner-size-large: 84;
+  --component-spinner-size-medium: 52;
+  --component-spinner-size-small: 24;
+  --component-spinner-size-extra-small: 16;
+  --component-spinner-stroke-large: 8;
+  --component-spinner-stroke-medium: 6;
+  --component-spinner-stroke-small: 4;
+  --component-spinner-stroke-extra-small: 3;
+}
+
+/* Component variables  */
+.tl-spinner {
+  --tl-spinner-background: var(--component-spinner-background-default);
+  --tl-spinner-background-inverted: var(--component-spinner-background-default-inverse);
+  --tl-spinner-speed: 1.8s;
+  --tl-spinner-speed-lg: 2s;
+  --tl-spinner-radius-xs: calc(var(--component-spinner-size-extra-small) / 2 * 1px);
+  --tl-spinner-radius-sm: calc(var(--component-spinner-size-small) / 2 * 1px);
+  --tl-spinner-radius-md: calc(var(--component-spinner-size-medium) / 2 * 1px);
+  --tl-spinner-radius-lg: calc(var(--component-spinner-size-large) / 2 * 1px);
+  --tl-spinner-stroke-width-xs: calc(var(--component-spinner-stroke-extra-small) * 1px);
+  --tl-spinner-stroke-width-sm: calc(var(--component-spinner-stroke-small) * 1px);
+  --tl-spinner-stroke-width-md: calc(var(--component-spinner-stroke-medium) * 1px);
+  --tl-spinner-stroke-width-lg: calc(var(--component-spinner-stroke-large) * 1px);
+  --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-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-spinner--default {
+  stroke: var(--tl-spinner-background);
+}
+.tl-spinner--inverted {
+  stroke: var(--tl-spinner-background-inverted);
+}
+
+.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;
+}
+
+@keyframes tl-spinner-dash {
+  from {
+    stroke-dashoffset: calc(-1 * var(--tl-spinner-stroke-dash));
+  }
+  to {
+    stroke-dashoffset: var(--tl-spinner-stroke-dash);
+  }
+}
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root,
+.tds-mode-light,
+.scania .tds-mode-light,
+.scania.tds-mode-light,
+.scania .tl-mode-light,
 .scania.tl-mode-light {
   --component-stepper-background-item-default: var(--color-background-none);
   --component-stepper-background-current-default: var(--scania-color-grey-750);
@@ -11593,52 +12318,6 @@ input[type=checkbox]:disabled ~ .tl-toggle__label {
   cursor: not-allowed;
 }
 
-/**
- * Do not edit directly, this file was auto-generated.
- */
-:root,
-.tds-mode-light,
-.scania .tds-mode-light,
-.scania.tds-mode-light,
-.scania .tl-mode-light,
-.scania.tl-mode-light {
-  --component-tooltip-background-default: var(--color-background-inverse-layer-03);
-  --component-tooltip-border-radius-none: var(--scania-unit-0);
-  --component-tooltip-border-radius-default: var(--scania-unit-4);
-  --component-tooltip-text-default: var(--color-text-inverse-strong);
-}
-
-.traton .tds-mode-light,
-.traton.tds-mode-light,
-.traton .tl-mode-light,
-.traton.tl-mode-light {
-  --component-tooltip-background-default: var(--color-background-inverse-layer-03);
-  --component-tooltip-border-radius-none: var(--traton-unit-0);
-  --component-tooltip-border-radius-default: var(--traton-unit-4);
-  --component-tooltip-text-default: var(--color-text-inverse-strong);
-}
-
-.tds-mode-dark,
-.scania .tds-mode-dark,
-.scania.tds-mode-dark,
-.scania .tl-mode-dark,
-.scania.tl-mode-dark {
-  --component-tooltip-background-default: var(--color-background-inverse-layer-03);
-  --component-tooltip-border-radius-none: var(--scania-unit-0);
-  --component-tooltip-border-radius-default: var(--scania-unit-4);
-  --component-tooltip-text-default: var(--color-text-inverse-strong);
-}
-
-.traton .tds-mode-dark,
-.traton.tds-mode-dark,
-.traton .tl-mode-dark,
-.traton.tl-mode-dark {
-  --component-tooltip-background-default: var(--color-background-inverse-layer-03);
-  --component-tooltip-border-radius-none: var(--traton-unit-0);
-  --component-tooltip-border-radius-default: var(--traton-unit-4);
-  --component-tooltip-text-default: var(--color-text-inverse-strong);
-}
-
 .tl-tooltip {
   --tooltip-color: var(--component-tooltip-text-default);
   --tooltip-background: var(--component-tooltip-background-default);