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

package/dist/global.css

@@ -14,6 +14,8 @@
   --unit-20: 20px;
   --unit-22: 22px;
   --unit-24: 24px;
+  --unit-28: 28px;
+  --unit-30: 30px;
   --unit-32: 32px;
   --unit-34: 34px;
   --unit-36: 36px;
@@ -22,8 +24,10 @@
   --unit-56: 56px;
   --unit-58: 58px;
   --unit-64: 64px;
+  --unit-66: 66px;
   --unit-68: 68px;
   --unit-72: 72px;
+  --unit-77: 77px;
   --unit-80: 80px;
   --unit-96: 96px;
   --unit-120: 120px;

package/dist/scania-variables.css

@@ -345,8 +345,9 @@ html {
 
 /* Scania typography tokens */
 /**
- * Do not edit directly, this file was auto-generated.
+ * Do not edit directly, this file was auto-generated by build-tokens.mjs script.
  */
+:root,
 .scania {
   --type-display-01-font-size: 216;
   --type-display-01-line-height: 183;
@@ -1135,6 +1136,7 @@ h6 {
   --scania-icon-acceleration_inactive-svg: url(./assets/icons/scania/acceleration_inactive.svg);
   --scania-icon-adblue-svg: url(./assets/icons/scania/adblue.svg);
   --scania-icon-adblue_inactive-svg: url(./assets/icons/scania/adblue_inactive.svg);
+  --scania-icon-agent-svg: url(./assets/icons/scania/agent.svg);
   --scania-icon-arrow_diagonal-svg: url(./assets/icons/scania/arrow_diagonal.svg);
   --scania-icon-arrow_down-svg: url(./assets/icons/scania/arrow_down.svg);
   --scania-icon-arrow_left-svg: url(./assets/icons/scania/arrow_left.svg);
@@ -1203,6 +1205,7 @@ h6 {
   --scania-icon-doner-svg: url(./assets/icons/scania/doner.svg);
   --scania-icon-double_kebab-svg: url(./assets/icons/scania/double_kebab.svg);
   --scania-icon-download-svg: url(./assets/icons/scania/download.svg);
+  --scania-icon-driver-svg: url(./assets/icons/scania/driver.svg);
   --scania-icon-driving_licence-svg: url(./assets/icons/scania/driving_licence.svg);
   --scania-icon-driving_licence_inactive-svg: url(./assets/icons/scania/driving_licence_inactive.svg);
   --scania-icon-drop-svg: url(./assets/icons/scania/drop.svg);
@@ -1210,6 +1213,7 @@ h6 {
   --scania-icon-edit-svg: url(./assets/icons/scania/edit.svg);
   --scania-icon-edit_inactive-svg: url(./assets/icons/scania/edit_inactive.svg);
   --scania-icon-email-svg: url(./assets/icons/scania/email.svg);
+  --scania-icon-employee-svg: url(./assets/icons/scania/employee.svg);
   --scania-icon-engine-svg: url(./assets/icons/scania/engine.svg);
   --scania-icon-engine_inactive-svg: url(./assets/icons/scania/engine_inactive.svg);
   --scania-icon-environment-svg: url(./assets/icons/scania/environment.svg);
@@ -1270,12 +1274,13 @@ h6 {
   --scania-icon-language-svg: url(./assets/icons/scania/language.svg);
   --scania-icon-layer-svg: url(./assets/icons/scania/layer.svg);
   --scania-icon-layer_inactive-svg: url(./assets/icons/scania/layer_inactive.svg);
+  --scania-icon-line_chart-svg: url(./assets/icons/scania/line_chart.svg);
   --scania-icon-link-svg: url(./assets/icons/scania/link.svg);
   --scania-icon-link_broken-svg: url(./assets/icons/scania/link_broken.svg);
   --scania-icon-list-svg: url(./assets/icons/scania/list.svg);
   --scania-icon-list_inactive-svg: url(./assets/icons/scania/list_inactive.svg);
   --scania-icon-lock-svg: url(./assets/icons/scania/lock.svg);
-  --scania-icon-lock_inactive-svg: url(./assets/icons/scania/lock_inactive.svg);
+  --scania-icon-manager-svg: url(./assets/icons/scania/manager.svg);
   --scania-icon-map_cursor-svg: url(./assets/icons/scania/map_cursor.svg);
   --scania-icon-map_cursor_inactive-svg: url(./assets/icons/scania/map_cursor_inactive.svg);
   --scania-icon-maximize_fullscreen-svg: url(./assets/icons/scania/maximize_fullscreen.svg);
@@ -1283,8 +1288,10 @@ h6 {
   --scania-icon-merge-svg: url(./assets/icons/scania/merge.svg);
   --scania-icon-merge_inactive-svg: url(./assets/icons/scania/merge_inactive.svg);
   --scania-icon-message-svg: url(./assets/icons/scania/message.svg);
+  --scania-icon-message_ai-svg: url(./assets/icons/scania/message_ai.svg);
   --scania-icon-message_inactive-svg: url(./assets/icons/scania/message_inactive.svg);
   --scania-icon-microphone-svg: url(./assets/icons/scania/microphone.svg);
+  --scania-icon-microphone_ai-svg: url(./assets/icons/scania/microphone_ai.svg);
   --scania-icon-microphone_inactive-svg: url(./assets/icons/scania/microphone_inactive.svg);
   --scania-icon-mileage-svg: url(./assets/icons/scania/mileage.svg);
   --scania-icon-mileage_inactive-svg: url(./assets/icons/scania/mileage_inactive.svg);
@@ -1334,6 +1341,7 @@ h6 {
   --scania-icon-route_inactive-svg: url(./assets/icons/scania/route_inactive.svg);
   --scania-icon-save-svg: url(./assets/icons/scania/save.svg);
   --scania-icon-save_inactive-svg: url(./assets/icons/scania/save_inactive.svg);
+  --scania-icon-scissor-svg: url(./assets/icons/scania/scissor.svg);
   --scania-icon-search-svg: url(./assets/icons/scania/search.svg);
   --scania-icon-send-svg: url(./assets/icons/scania/send.svg);
   --scania-icon-send_inactive-svg: url(./assets/icons/scania/send_inactive.svg);
@@ -1345,10 +1353,13 @@ h6 {
   --scania-icon-smartphone-svg: url(./assets/icons/scania/smartphone.svg);
   --scania-icon-smartphone_inactive-svg: url(./assets/icons/scania/smartphone_inactive.svg);
   --scania-icon-sorting-svg: url(./assets/icons/scania/sorting.svg);
+  --scania-icon-sparkle-svg: url(./assets/icons/scania/sparkle.svg);
   --scania-icon-speedometer-svg: url(./assets/icons/scania/speedometer.svg);
   --scania-icon-speedometer_inactive-svg: url(./assets/icons/scania/speedometer_inactive.svg);
+  --scania-icon-split-svg: url(./assets/icons/scania/split.svg);
   --scania-icon-star-svg: url(./assets/icons/scania/star.svg);
   --scania-icon-support-svg: url(./assets/icons/scania/support.svg);
+  --scania-icon-table-svg: url(./assets/icons/scania/table.svg);
   --scania-icon-target-svg: url(./assets/icons/scania/target.svg);
   --scania-icon-target_inactive-svg: url(./assets/icons/scania/target_inactive.svg);
   --scania-icon-temperature-svg: url(./assets/icons/scania/temperature.svg);
@@ -1395,6 +1406,7 @@ h6 {
   --icon-acceleration_inactive-svg: var(--scania-icon-acceleration_inactive-svg);
   --icon-adblue-svg: var(--scania-icon-adblue-svg);
   --icon-adblue_inactive-svg: var(--scania-icon-adblue_inactive-svg);
+  --icon-agent-svg: var(--scania-icon-agent-svg);
   --icon-arrow_diagonal-svg: var(--scania-icon-arrow_diagonal-svg);
   --icon-arrow_down-svg: var(--scania-icon-arrow_down-svg);
   --icon-arrow_left-svg: var(--scania-icon-arrow_left-svg);
@@ -1463,6 +1475,7 @@ h6 {
   --icon-doner-svg: var(--scania-icon-doner-svg);
   --icon-double_kebab-svg: var(--scania-icon-double_kebab-svg);
   --icon-download-svg: var(--scania-icon-download-svg);
+  --icon-driver-svg: var(--scania-icon-driver-svg);
   --icon-driving_licence-svg: var(--scania-icon-driving_licence-svg);
   --icon-driving_licence_inactive-svg: var(--scania-icon-driving_licence_inactive-svg);
   --icon-drop-svg: var(--scania-icon-drop-svg);
@@ -1470,6 +1483,7 @@ h6 {
   --icon-edit-svg: var(--scania-icon-edit-svg);
   --icon-edit_inactive-svg: var(--scania-icon-edit_inactive-svg);
   --icon-email-svg: var(--scania-icon-email-svg);
+  --icon-employee-svg: var(--scania-icon-employee-svg);
   --icon-engine-svg: var(--scania-icon-engine-svg);
   --icon-engine_inactive-svg: var(--scania-icon-engine_inactive-svg);
   --icon-environment-svg: var(--scania-icon-environment-svg);
@@ -1530,12 +1544,13 @@ h6 {
   --icon-language-svg: var(--scania-icon-language-svg);
   --icon-layer-svg: var(--scania-icon-layer-svg);
   --icon-layer_inactive-svg: var(--scania-icon-layer_inactive-svg);
+  --icon-line_chart-svg: var(--scania-icon-line_chart-svg);
   --icon-link-svg: var(--scania-icon-link-svg);
   --icon-link_broken-svg: var(--scania-icon-link_broken-svg);
   --icon-list-svg: var(--scania-icon-list-svg);
   --icon-list_inactive-svg: var(--scania-icon-list_inactive-svg);
   --icon-lock-svg: var(--scania-icon-lock-svg);
-  --icon-lock_inactive-svg: var(--scania-icon-lock_inactive-svg);
+  --icon-manager-svg: var(--scania-icon-manager-svg);
   --icon-map_cursor-svg: var(--scania-icon-map_cursor-svg);
   --icon-map_cursor_inactive-svg: var(--scania-icon-map_cursor_inactive-svg);
   --icon-maximize_fullscreen-svg: var(--scania-icon-maximize_fullscreen-svg);
@@ -1543,8 +1558,10 @@ h6 {
   --icon-merge-svg: var(--scania-icon-merge-svg);
   --icon-merge_inactive-svg: var(--scania-icon-merge_inactive-svg);
   --icon-message-svg: var(--scania-icon-message-svg);
+  --icon-message_ai-svg: var(--scania-icon-message_ai-svg);
   --icon-message_inactive-svg: var(--scania-icon-message_inactive-svg);
   --icon-microphone-svg: var(--scania-icon-microphone-svg);
+  --icon-microphone_ai-svg: var(--scania-icon-microphone_ai-svg);
   --icon-microphone_inactive-svg: var(--scania-icon-microphone_inactive-svg);
   --icon-mileage-svg: var(--scania-icon-mileage-svg);
   --icon-mileage_inactive-svg: var(--scania-icon-mileage_inactive-svg);
@@ -1594,6 +1611,7 @@ h6 {
   --icon-route_inactive-svg: var(--scania-icon-route_inactive-svg);
   --icon-save-svg: var(--scania-icon-save-svg);
   --icon-save_inactive-svg: var(--scania-icon-save_inactive-svg);
+  --icon-scissor-svg: var(--scania-icon-scissor-svg);
   --icon-search-svg: var(--scania-icon-search-svg);
   --icon-send-svg: var(--scania-icon-send-svg);
   --icon-send_inactive-svg: var(--scania-icon-send_inactive-svg);
@@ -1605,10 +1623,13 @@ h6 {
   --icon-smartphone-svg: var(--scania-icon-smartphone-svg);
   --icon-smartphone_inactive-svg: var(--scania-icon-smartphone_inactive-svg);
   --icon-sorting-svg: var(--scania-icon-sorting-svg);
+  --icon-sparkle-svg: var(--scania-icon-sparkle-svg);
   --icon-speedometer-svg: var(--scania-icon-speedometer-svg);
   --icon-speedometer_inactive-svg: var(--scania-icon-speedometer_inactive-svg);
+  --icon-split-svg: var(--scania-icon-split-svg);
   --icon-star-svg: var(--scania-icon-star-svg);
   --icon-support-svg: var(--scania-icon-support-svg);
+  --icon-table-svg: var(--scania-icon-table-svg);
   --icon-target-svg: var(--scania-icon-target-svg);
   --icon-target_inactive-svg: var(--scania-icon-target_inactive-svg);
   --icon-temperature-svg: var(--scania-icon-temperature-svg);
@@ -1649,7 +1670,7 @@ h6 {
  */
 :root,
 .scania {
-  --icon-document_word-svg: var(--scania-icon-placeholder-svg);
+  /* No fallbacks needed: this brand defines every icon name. */
 }
 
 .traton {
@@ -1692,11 +1713,12 @@ h6 {
   --icon-diamond_inactive-svg: var(--traton-icon-placeholder-svg);
   --icon-document_plus-svg: var(--traton-icon-placeholder-svg);
   --icon-document_plus_inactive-svg: var(--traton-icon-placeholder-svg);
-  --icon-document_ppt-svg: var(--traton-icon-placeholder-svg);
+  --icon-driver-svg: var(--traton-icon-placeholder-svg);
   --icon-driving_licence-svg: var(--traton-icon-placeholder-svg);
   --icon-driving_licence_inactive-svg: var(--traton-icon-placeholder-svg);
   --icon-drop-svg: var(--traton-icon-placeholder-svg);
   --icon-drop_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-employee-svg: var(--traton-icon-placeholder-svg);
   --icon-engine-svg: var(--traton-icon-placeholder-svg);
   --icon-engine_inactive-svg: var(--traton-icon-placeholder-svg);
   --icon-environment-svg: var(--traton-icon-placeholder-svg);
@@ -1735,24 +1757,19 @@ h6 {
   --icon-layer_inactive-svg: var(--traton-icon-placeholder-svg);
   --icon-list-svg: var(--traton-icon-placeholder-svg);
   --icon-list_inactive-svg: var(--traton-icon-placeholder-svg);
-  --icon-lock_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-manager-svg: var(--traton-icon-placeholder-svg);
   --icon-map_cursor-svg: var(--traton-icon-placeholder-svg);
   --icon-map_cursor_inactive-svg: var(--traton-icon-placeholder-svg);
   --icon-maximize_fullscreen-svg: var(--traton-icon-placeholder-svg);
   --icon-merge-svg: var(--traton-icon-placeholder-svg);
   --icon-merge_inactive-svg: var(--traton-icon-placeholder-svg);
-  --icon-microphone-svg: var(--traton-icon-placeholder-svg);
-  --icon-microphone_inactive-svg: var(--traton-icon-placeholder-svg);
   --icon-minimize_fullscreen-svg: var(--traton-icon-placeholder-svg);
   --icon-navigate-svg: var(--traton-icon-placeholder-svg);
   --icon-navigate_inactive-svg: var(--traton-icon-placeholder-svg);
-  --icon-notification_snooze-svg: var(--traton-icon-placeholder-svg);
   --icon-oil_level-svg: var(--traton-icon-placeholder-svg);
   --icon-oil_level_inactive-svg: var(--traton-icon-placeholder-svg);
-  --icon-paperclip-svg: var(--traton-icon-placeholder-svg);
   --icon-pause-svg: var(--traton-icon-placeholder-svg);
   --icon-pause_inactive-svg: var(--traton-icon-placeholder-svg);
-  --icon-pie_chart-svg: var(--traton-icon-placeholder-svg);
   --icon-play-svg: var(--traton-icon-placeholder-svg);
   --icon-play_inactive-svg: var(--traton-icon-placeholder-svg);
   --icon-powerplug-svg: var(--traton-icon-placeholder-svg);
@@ -1769,14 +1786,13 @@ h6 {
   --icon-route-svg: var(--traton-icon-placeholder-svg);
   --icon-route_inactive-svg: var(--traton-icon-placeholder-svg);
   --icon-shuffle-svg: var(--traton-icon-placeholder-svg);
+  --icon-split-svg: var(--traton-icon-placeholder-svg);
   --icon-target-svg: var(--traton-icon-placeholder-svg);
   --icon-target_inactive-svg: var(--traton-icon-placeholder-svg);
   --icon-temperature-svg: var(--traton-icon-placeholder-svg);
   --icon-temperature_inactive-svg: var(--traton-icon-placeholder-svg);
   --icon-text-svg: var(--traton-icon-placeholder-svg);
   --icon-text_inactive-svg: var(--traton-icon-placeholder-svg);
-  --icon-thumbs_down-svg: var(--traton-icon-placeholder-svg);
-  --icon-thumbs_up-svg: var(--traton-icon-placeholder-svg);
   --icon-trailer-svg: var(--traton-icon-placeholder-svg);
   --icon-trailer_inactive-svg: var(--traton-icon-placeholder-svg);
   --icon-truck_inactive-svg: var(--traton-icon-placeholder-svg);

package/dist/tl-dropdown.css

@@ -237,16 +237,6 @@
   --dropdown-icon: var(--component-dropdown-icon-default);
   --dropdown-clear-icon: var(--component--input-icon-control-default);
   --dropdown-error: var(--component--input-text-error-default);
-  --dropdown-border-bottom-width: calc(var(--component--input-border-width-bottom) * 1px);
-  --dropdown-border-left-width: calc(var(--component--input-border-width-left) * 1px);
-  --dropdown-border-right-width: calc(var(--component--input-border-width-right) * 1px);
-  --dropdown-border-top-width: calc(var(--component--input-border-width-top) * 1px);
-  --dropdown-border: var(--component--input-border-default);
-  --dropdown-border-hover: var(--component--input-border-hover);
-  --dropdown-border-radius: calc(var(--component--input-border-radius-top-left) * 1px)
-    calc(var(--component--input-border-radius-top-right) * 1px)
-    calc(var(--component--input-border-radius-bottom-right) * 1px)
-    calc(var(--component--input-border-radius-bottom-left) * 1px);
   --dropdown-list-border-radius: calc(var(--component-dropdown-border-radius-default) * 1px);
   --dropdown-list-box-shadow: 0 2px 3px 0 rgb(0, 0, 0, 0.1);
   --dropdown-option-background: var(--component-dropdown-background-item-default);
@@ -319,16 +309,14 @@ body {
   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);
-  border-bottom: var(--dropdown-border-bottom-width) solid var(--dropdown-border);
-  border-left: var(--dropdown-border-left-width) solid var(--dropdown-border);
-  border-right: var(--dropdown-border-right-width) solid var(--dropdown-border);
-  border-top: var(--dropdown-border-top-width) solid var(--dropdown-border);
-  border-radius: var(--dropdown-border-radius);
+  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
+  border-style: solid;
+  border-color: var(--component--input-border-default);
   width: 100%;
   appearance: none;
   background: var(--dropdown-background);
   color: var(--dropdown-text);
-  border-radius: var(--dropdown-border-radius);
   position: relative;
   outline: none;
   text-align: left;
@@ -340,11 +328,10 @@ body {
   justify-content: flex-start;
 }
 :is(.tl-dropdown__button, .tl-dropdown__select, .tl-dropdown__input):hover {
-  border-bottom: var(--dropdown-border-bottom-width) solid var(--dropdown-border-hover);
-  border-left: var(--dropdown-border-left-width) solid var(--dropdown-border-hover);
-  border-right: var(--dropdown-border-right-width) solid var(--dropdown-border-hover);
-  border-top: var(--dropdown-border-top-width) solid var(--dropdown-border-hover);
-  border-radius: var(--dropdown-border-radius);
+  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
+  border-style: solid;
+  border-color: var(--component--input-border-hover);
 }
 :is(.tl-dropdown__button, .tl-dropdown__select, .tl-dropdown__input):focus {
   outline: 2px solid var(--component--focus-ring-color-strong);
@@ -353,18 +340,16 @@ body {
   z-index: 1;
 }
 .tl-dropdown--error :is(.tl-dropdown__button, .tl-dropdown__select, .tl-dropdown__input) {
-  border-bottom: var(--dropdown-border-bottom-width) solid var(--dropdown-error);
-  border-left: var(--dropdown-border-left-width) solid var(--dropdown-error);
-  border-right: var(--dropdown-border-right-width) solid var(--dropdown-error);
-  border-top: var(--dropdown-border-top-width) solid var(--dropdown-error);
-  border-radius: var(--dropdown-border-radius);
+  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
+  border-style: solid;
+  border-color: var(--component--input-text-error-default);
 }
 :is(.tl-dropdown__button, .tl-dropdown__select, .tl-dropdown__input):disabled {
-  border-bottom: var(--dropdown-border-bottom-width) solid var(--dropdown-border);
-  border-left: var(--dropdown-border-left-width) solid var(--dropdown-border);
-  border-right: var(--dropdown-border-right-width) solid var(--dropdown-border);
-  border-top: var(--dropdown-border-top-width) solid var(--dropdown-border);
-  border-radius: var(--dropdown-border-radius);
+  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
+  border-style: solid;
+  border-color: var(--component--input-border-default);
   box-shadow: none;
   cursor: not-allowed;
   pointer-events: none;
@@ -975,7 +960,6 @@ body {
 .tl-dropdown__input::placeholder,
 .tl-dropdown:has(.tl-dropdown__select option[value=""]:checked) .tl-dropdown__select {
   color: var(--dropdown-placeholder);
-  border-radius: var(--dropdown-border-radius);
   box-shadow: none;
   transition: box-shadow 0.2s;
 }
@@ -1001,11 +985,10 @@ body {
   box-shadow: none;
 }
 :is(.traton, .scania) .tl-dropdown__select:hover:not(:disabled) {
-  border-bottom: var(--dropdown-border-bottom-width) solid var(--dropdown-border-hover);
-  border-left: var(--dropdown-border-left-width) solid var(--dropdown-border-hover);
-  border-right: var(--dropdown-border-right-width) solid var(--dropdown-border-hover);
-  border-top: var(--dropdown-border-top-width) solid var(--dropdown-border-hover);
-  border-radius: var(--dropdown-border-radius);
+  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
+  border-style: solid;
+  border-color: var(--component--input-border-hover);
 }
 :is(.traton, .scania) .tl-dropdown__select:focus-visible {
   outline: 2px solid var(--component--focus-ring-color-strong);
@@ -1015,15 +998,17 @@ body {
 }
 
 .tl-dropdown__select {
-  border-bottom: var(--dropdown-border-bottom-width) solid var(--dropdown-border);
-  border-left: var(--dropdown-border-left-width) solid var(--dropdown-border);
-  border-right: var(--dropdown-border-right-width) solid var(--dropdown-border);
-  border-top: var(--dropdown-border-top-width) solid var(--dropdown-border);
-  border-radius: var(--dropdown-border-radius);
+  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
+  border-style: solid;
+  border-color: var(--component--input-border-default);
 }
 
 :is(.traton, .scania) .tl-dropdown--error .tl-dropdown__select {
-  border-color: var(--dropdown-error);
+  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
+  border-style: solid;
+  border-color: var(--component--input-text-error-default);
 }
 :is(.traton, .scania) .tl-dropdown--error .tl-dropdown__select:disabled {
   border-color: transparent;

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;