@scania/tegel-lite 1.5.0 → 1.7.0-table-vars-beta.0

package/dist/tl-icon.css

@@ -36,6 +36,10 @@
   mask-image: var(--icon-adblue_inactive-svg);
   background-color: currentcolor;
 }
+.tl-icon--agent {
+  mask-image: var(--icon-agent-svg);
+  background-color: currentcolor;
+}
 .tl-icon--arrow_diagonal {
   mask-image: var(--icon-arrow_diagonal-svg);
   background-color: currentcolor;
@@ -284,10 +288,6 @@
   mask-image: var(--icon-document_tool-svg);
   background-color: currentcolor;
 }
-.tl-icon--document_word {
-  mask-image: var(--icon-document_word-svg);
-  background-color: currentcolor;
-}
 .tl-icon--document_wrong {
   mask-image: var(--icon-document_wrong-svg);
   background-color: currentcolor;
@@ -312,6 +312,10 @@
   mask-image: var(--icon-download-svg);
   background-color: currentcolor;
 }
+.tl-icon--driver {
+  mask-image: var(--icon-driver-svg);
+  background-color: currentcolor;
+}
 .tl-icon--driving_licence {
   mask-image: var(--icon-driving_licence-svg);
   background-color: currentcolor;
@@ -340,6 +344,10 @@
   mask-image: var(--icon-email-svg);
   background-color: currentcolor;
 }
+.tl-icon--employee {
+  mask-image: var(--icon-employee-svg);
+  background-color: currentcolor;
+}
 .tl-icon--engine {
   mask-image: var(--icon-engine-svg);
   background-color: currentcolor;
@@ -580,6 +588,10 @@
   mask-image: var(--icon-layer_inactive-svg);
   background-color: currentcolor;
 }
+.tl-icon--line_chart {
+  mask-image: var(--icon-line_chart-svg);
+  background-color: currentcolor;
+}
 .tl-icon--link {
   mask-image: var(--icon-link-svg);
   background-color: currentcolor;
@@ -600,8 +612,8 @@
   mask-image: var(--icon-lock-svg);
   background-color: currentcolor;
 }
-.tl-icon--lock_inactive {
-  mask-image: var(--icon-lock_inactive-svg);
+.tl-icon--manager {
+  mask-image: var(--icon-manager-svg);
   background-color: currentcolor;
 }
 .tl-icon--map_cursor {
@@ -632,6 +644,10 @@
   mask-image: var(--icon-message-svg);
   background-color: currentcolor;
 }
+.tl-icon--message_ai {
+  mask-image: var(--icon-message_ai-svg);
+  background-color: currentcolor;
+}
 .tl-icon--message_inactive {
   mask-image: var(--icon-message_inactive-svg);
   background-color: currentcolor;
@@ -640,6 +656,10 @@
   mask-image: var(--icon-microphone-svg);
   background-color: currentcolor;
 }
+.tl-icon--microphone_ai {
+  mask-image: var(--icon-microphone_ai-svg);
+  background-color: currentcolor;
+}
 .tl-icon--microphone_inactive {
   mask-image: var(--icon-microphone_inactive-svg);
   background-color: currentcolor;
@@ -836,6 +856,10 @@
   mask-image: var(--icon-save_inactive-svg);
   background-color: currentcolor;
 }
+.tl-icon--scissor {
+  mask-image: var(--icon-scissor-svg);
+  background-color: currentcolor;
+}
 .tl-icon--search {
   mask-image: var(--icon-search-svg);
   background-color: currentcolor;
@@ -880,6 +904,10 @@
   mask-image: var(--icon-sorting-svg);
   background-color: currentcolor;
 }
+.tl-icon--sparkle {
+  mask-image: var(--icon-sparkle-svg);
+  background-color: currentcolor;
+}
 .tl-icon--speedometer {
   mask-image: var(--icon-speedometer-svg);
   background-color: currentcolor;
@@ -888,6 +916,10 @@
   mask-image: var(--icon-speedometer_inactive-svg);
   background-color: currentcolor;
 }
+.tl-icon--split {
+  mask-image: var(--icon-split-svg);
+  background-color: currentcolor;
+}
 .tl-icon--star {
   mask-image: var(--icon-star-svg);
   background-color: currentcolor;
@@ -896,6 +928,10 @@
   mask-image: var(--icon-support-svg);
   background-color: currentcolor;
 }
+.tl-icon--table {
+  mask-image: var(--icon-table-svg);
+  background-color: currentcolor;
+}
 .tl-icon--target {
   mask-image: var(--icon-target-svg);
   background-color: currentcolor;

package/dist/tl-popover-menu.css

@@ -159,7 +159,7 @@
   background-color: var(--popover-menu-background-hover);
 }
 .tl-popover-menu__item:focus-visible {
-  outline: 2px solid var(--popover-menu-item-outline-focus);
+  outline: 2px solid var(--component--focus-ring-color-strong);
   box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
   outline-offset: -2px;
   z-index: 1;

package/dist/tl-stepper.css

@@ -0,0 +1,441 @@
+/**
+ * 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);
+  --component-stepper-background-error-default: var(--color-background-none);
+  --component-stepper-background-success-default: var(--scania-color-green-400);
+  --component-stepper-border-item-default: var(--scania-color-grey-750);
+  --component-stepper-border-current-default: var(--color-border-none);
+  --component-stepper-border-error-default: var(--color-system-danger-default);
+  --component-stepper-border-success-default: var(--scania-color-green-400);
+  --component-stepper-border-divider-default: var(--scania-color-grey-750);
+  --component-stepper-border-radius-default: var(--scania-unit-9999);
+  --component-stepper-icon-error-default: var(--color-system-danger-default);
+  --component-stepper-icon-success-default: var(--scania-color-grey-50);
+  --component-stepper-text-label-default: var(--color-text-strong);
+  --component-stepper-text-label-success-default: var(--color-text-strong);
+  --component-stepper-text-label-current-default: var(--color-text-strong);
+  --component-stepper-text-label-error-default: var(--color-text-strong);
+  --component-stepper-text-index-default: var(--color-text-strong);
+  --component-stepper-text-index-current-default: var(--color-text-inverse-strong);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-stepper-background-item-default: var(--color-background-none);
+  --component-stepper-background-current-default: var(--color-background-none);
+  --component-stepper-background-error-default: var(--color-background-none);
+  --component-stepper-background-success-default: var(--color-system-success-default);
+  --component-stepper-border-item-default: var(--color-border-discrete);
+  --component-stepper-border-current-default: var(--color-border-strong);
+  --component-stepper-border-error-default: var(--color-system-danger-default);
+  --component-stepper-border-success-default: var(--color-system-success-default);
+  --component-stepper-border-divider-default: var(--color-border-disabled);
+  --component-stepper-border-radius-default: var(--traton-unit-9999);
+  --component-stepper-icon-error-default: var(--color-system-danger-default);
+  --component-stepper-icon-success-default: var(--color-icon-inverse-strong);
+  --component-stepper-text-label-default: var(--color-text-disabled);
+  --component-stepper-text-label-success-default: var(--color-text-strong);
+  --component-stepper-text-label-current-default: var(--color-text-strong);
+  --component-stepper-text-label-error-default: var(--color-text-strong);
+  --component-stepper-text-index-default: var(--color-text-disabled);
+  --component-stepper-text-index-current-default: var(--color-text-strong);
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component-stepper-background-item-default: var(--color-background-none);
+  --component-stepper-background-current-default: var(--scania-color-grey-150);
+  --component-stepper-background-error-default: var(--color-background-none);
+  --component-stepper-background-success-default: var(--scania-color-green-300);
+  --component-stepper-border-item-default: var(--scania-color-grey-150);
+  --component-stepper-border-current-default: var(--color-border-none);
+  --component-stepper-border-error-default: var(--color-system-danger-default);
+  --component-stepper-border-success-default: var(--scania-color-green-300);
+  --component-stepper-border-divider-default: var(--scania-color-grey-250);
+  --component-stepper-border-radius-default: var(--scania-unit-9999);
+  --component-stepper-icon-error-default: var(--color-system-danger-default);
+  --component-stepper-icon-success-default: var(--scania-color-grey-50);
+  --component-stepper-text-label-default: var(--color-text-strong);
+  --component-stepper-text-label-success-default: var(--color-text-strong);
+  --component-stepper-text-label-current-default: var(--color-text-strong);
+  --component-stepper-text-label-error-default: var(--color-text-strong);
+  --component-stepper-text-index-default: var(--color-text-strong);
+  --component-stepper-text-index-current-default: var(--color-text-inverse-strong);
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-stepper-background-item-default: var(--color-background-none);
+  --component-stepper-background-current-default: var(--color-background-none);
+  --component-stepper-background-error-default: var(--color-background-none);
+  --component-stepper-background-success-default: var(--color-system-success-default);
+  --component-stepper-border-item-default: var(--color-border-discrete);
+  --component-stepper-border-current-default: var(--color-border-strong);
+  --component-stepper-border-error-default: var(--color-system-danger-default);
+  --component-stepper-border-success-default: var(--color-system-success-default);
+  --component-stepper-border-divider-default: var(--color-border-disabled);
+  --component-stepper-border-radius-default: var(--traton-unit-9999);
+  --component-stepper-icon-error-default: var(--color-system-danger-default);
+  --component-stepper-icon-success-default: var(--color-icon-inverse-strong);
+  --component-stepper-text-label-default: var(--color-text-disabled);
+  --component-stepper-text-label-success-default: var(--color-text-strong);
+  --component-stepper-text-label-current-default: var(--color-text-strong);
+  --component-stepper-text-label-error-default: var(--color-text-strong);
+  --component-stepper-text-index-default: var(--color-text-disabled);
+  --component-stepper-text-index-current-default: var(--color-text-strong);
+}
+
+.tl-stepper {
+  --stepper-background-color-current: var(--component-stepper-background-current-default);
+  --stepper-border-color-current: var(--component-stepper-border-current-default);
+  --stepper-index-color-current: var(--component-stepper-text-index-current-default);
+  --stepper-label-text-color-current: var(--component-stepper-text-label-current-default);
+  --stepper-icon-step-background-warning: var(--component-stepper-background-error-default);
+  --stepper-icon-step-border-warning: var(--component-stepper-border-error-default);
+  --stepper-icon-step-color-warning: var(--component-stepper-icon-error-default);
+  --stepper-label-text-color-warning: var(--component-stepper-text-label-error-default);
+  --stepper-icon-step-background-success: var(--component-stepper-background-success-default);
+  --stepper-icon-step-border-success: var(--component-stepper-border-success-default);
+  --stepper-icon-step-color-success: var(--component-stepper-icon-success-default);
+  --stepper-label-text-color-success: var(--component-stepper-text-label-success-default);
+  --stepper-background-upcoming: var(--component-stepper-background-item-default);
+  --stepper-border-upcoming: var(--component-stepper-border-item-default);
+  --stepper-index-color-upcoming: var(--component-stepper-text-index-default);
+  --stepper-label-text-color-upcoming: var(--component-stepper-text-label-default);
+  --stepper-divider-line: var(--component-stepper-border-divider-default);
+  --stepper-border-radius: calc(var(--component-stepper-border-radius-default) * 1px);
+}
+
+/* Typography Usage mixins */
+.tl-stepper__step {
+  position: relative;
+  display: flex;
+  justify-content: start;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+.tl-stepper--label-below .tl-stepper__step {
+  flex-direction: column;
+}
+.tl-stepper--lg .tl-stepper__step {
+  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);
+  padding: 0 20px;
+}
+.tl-stepper--sm .tl-stepper__step {
+  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);
+  padding: 0 20px;
+}
+.tl-stepper--horizontal:not(.tl-stepper--label-aside) .tl-stepper__list > .tl-stepper__step {
+  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;
+}
+.tl-stepper--horizontal.tl-stepper--label-aside.tl-stepper--hide-labels .tl-stepper__list > .tl-stepper__step {
+  min-inline-size: 40px;
+}
+.tl-stepper--horizontal.tl-stepper--sm:not(.tl-stepper--label-aside) .tl-stepper__list > .tl-stepper__step {
+  min-inline-size: 40px;
+}
+.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-stepper--lg .tl-stepper__step:last-of-type::after, .tl-stepper--sm .tl-stepper__step:last-of-type::after {
+  display: none;
+}
+.tl-stepper--lg .tl-stepper__step:first-of-type::before, .tl-stepper--sm .tl-stepper__step:first-of-type::before {
+  display: none;
+}
+.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-stepper--lg.tl-stepper--vertical .tl-stepper__step::after {
+  content: " ";
+  position: absolute;
+  background-color: var(--stepper-divider-line);
+  height: 36px;
+  width: 1px;
+  top: 40px;
+  left: 36px;
+}
+.tl-stepper--lg.tl-stepper--horizontal .tl-stepper__step::after {
+  content: " ";
+  position: absolute;
+  background-color: var(--stepper-divider-line);
+  height: 1px;
+  left: calc(50% + 32px);
+  right: 0;
+  top: 16px;
+}
+.tl-stepper--lg.tl-stepper--horizontal .tl-stepper__step::before {
+  content: " ";
+  position: absolute;
+  background-color: var(--stepper-divider-line);
+  height: 1px;
+  right: calc(50% + 32px);
+  left: 0;
+  top: 16px;
+}
+.tl-stepper--lg.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: 16px;
+  left: auto;
+  right: -10px;
+  width: 10px;
+}
+.tl-stepper--lg.tl-stepper--horizontal.tl-stepper--label-aside:not(.tl-stepper--hide-labels) .tl-stepper__step::before {
+  content: " ";
+  position: absolute;
+  background-color: var(--stepper-divider-line);
+  height: 1px;
+  top: 16px;
+  left: -10px;
+  right: auto;
+  width: 10px;
+}
+.tl-stepper--lg.tl-stepper--horizontal.tl-stepper--hide-labels .tl-stepper__step::after {
+  content: " ";
+  position: absolute;
+  background-color: var(--stepper-divider-line);
+  height: 1px;
+  left: calc(50% + 16px + 8px);
+  right: 0;
+  top: 16px;
+}
+.tl-stepper--lg.tl-stepper--horizontal.tl-stepper--hide-labels .tl-stepper__step::before {
+  content: " ";
+  position: absolute;
+  background-color: var(--stepper-divider-line);
+  height: 1px;
+  right: calc(50% + 16px + 8px);
+  left: 0;
+  top: 16px;
+}
+.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-stepper--sm.tl-stepper--horizontal .tl-stepper__step::after {
+  content: " ";
+  position: absolute;
+  background-color: var(--stepper-divider-line);
+  height: 1px;
+  left: calc(50% + 12px + 16px);
+  right: 0;
+  top: 13px;
+}
+.tl-stepper--sm.tl-stepper--horizontal .tl-stepper__step::before {
+  content: " ";
+  position: absolute;
+  background-color: var(--stepper-divider-line);
+  height: 1px;
+  left: 0;
+  right: calc(50% + 12px + 16px);
+  top: 13px;
+}
+.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;
+  left: auto;
+  right: -10px;
+  width: 10px;
+  top: 13px;
+}
+.tl-stepper--sm.tl-stepper--horizontal.tl-stepper--label-aside:not(.tl-stepper--hide-labels) .tl-stepper__step::before {
+  content: " ";
+  position: absolute;
+  background-color: var(--stepper-divider-line);
+  height: 1px;
+  top: 13px;
+  left: -10px;
+  right: auto;
+  width: 10px;
+}
+.tl-stepper--sm.tl-stepper--horizontal.tl-stepper--hide-labels .tl-stepper__step::after {
+  content: " ";
+  position: absolute;
+  background-color: var(--stepper-divider-line);
+  height: 1px;
+  left: calc(50% + 12px + 8px);
+  right: 0;
+  top: 13px;
+}
+.tl-stepper--sm.tl-stepper--horizontal.tl-stepper--hide-labels .tl-stepper__step::before {
+  content: " ";
+  position: absolute;
+  background-color: var(--stepper-divider-line);
+  height: 1px;
+  right: calc(50% + 12px + 8px);
+  left: 0;
+  top: 13px;
+}
+
+.tl-stepper__node {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  border-radius: var(--stepper-border-radius);
+  border-width: 1px;
+  border-style: solid;
+  text-align: center;
+  position: relative;
+}
+.tl-stepper--lg .tl-stepper__node {
+  height: 30px;
+  min-width: 30px;
+}
+.tl-stepper--sm .tl-stepper__node {
+  height: 24px;
+  min-width: 24px;
+}
+.tl-stepper__step--error .tl-stepper__node {
+  border: 1px solid var(--stepper-icon-step-border-warning);
+  color: var(--stepper-icon-step-color-warning);
+  background-color: var(--stepper-icon-step-background-warning);
+}
+.tl-stepper__step--success .tl-stepper__node {
+  background-color: var(--stepper-icon-step-background-success);
+  border: 1px solid var(--stepper-icon-step-border-success);
+  color: var(--stepper-icon-step-color-success);
+}
+.tl-stepper__step--current .tl-stepper__node {
+  color: var(--stepper-index-color-current);
+  border: 1px solid var(--stepper-border-color-current);
+  background-color: var(--stepper-background-color-current);
+}
+.tl-stepper__step--upcoming .tl-stepper__node {
+  border: 1px solid var(--stepper-border-upcoming);
+  color: var(--stepper-index-color-upcoming);
+  background-color: var(--stepper-background-upcoming);
+}
+.tl-stepper__step--success .tl-stepper__node, .tl-stepper__step--error .tl-stepper__node {
+  justify-content: center;
+}
+.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-stepper__step--success .tl-stepper__node::after {
+  mask-image: var(--icon-tick-svg);
+}
+.tl-stepper__step--error .tl-stepper__node::after {
+  mask-image: var(--icon-warning-svg);
+}
+
+.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-stepper__label {
+  text-align: center;
+}
+.tl-stepper__step--error .tl-stepper__label {
+  color: var(--stepper-label-text-color-warning);
+}
+.tl-stepper__step--success .tl-stepper__label {
+  color: var(--stepper-label-text-color-success);
+}
+.tl-stepper__step--current .tl-stepper__label {
+  color: var(--stepper-label-text-color-current);
+}
+.tl-stepper__step--upcoming .tl-stepper__label {
+  color: var(--stepper-label-text-color-upcoming);
+}
+.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-stepper {
+  box-sizing: border-box;
+}
+.tl-stepper * {
+  box-sizing: border-box;
+}
+
+.tl-stepper__list {
+  display: flex;
+  justify-content: space-evenly;
+  min-width: 100%;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.tl-stepper:not(.tl-stepper--label-aside) .tl-stepper__list {
+  width: 100%;
+}
+.tl-stepper--horizontal:not(.tl-stepper--label-aside) .tl-stepper__list {
+  justify-content: flex-start;
+}
+.tl-stepper--horizontal.tl-stepper--label-aside .tl-stepper__list {
+  display: flex;
+  justify-content: flex-start;
+  min-width: 100%;
+}
+.tl-stepper--horizontal.tl-stepper--label-aside.tl-stepper--hide-labels .tl-stepper__list {
+  display: flex;
+  justify-content: flex-start;
+}
+.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;
+}