@scania/tegel-lite 0.1.0-var-develop-beta.1 → 0.1.0-var-batch-4-beta.3

package/dist/global.css

@@ -1289,23 +1289,136 @@ html {
 }
 
 /** The breakpoint at which the layout changes from fixed size to full-width. */
-.tl-mode-light {
-  --tl-scrollbar-track-color: transparent;
-  --tl-scrollbar-thumb-color: #303c612b;
+/**
+ * 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-scrollbar-background-thumb-default: var(--color-border-subtle);
+  --component-scrollbar-background-thumb-hover: var(--color-border-soft);
+  --component-scrollbar-width-radius-default: 4;
+  --component-scrollbar-width-radius-hover: 6;
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-scrollbar-background-thumb-default: var(--color-border-subtle);
+  --component-scrollbar-background-thumb-hover: var(--color-border-soft);
+  --component-scrollbar-width-radius-default: 4;
+  --component-scrollbar-width-radius-hover: 6;
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component-scrollbar-background-thumb-default: var(--color-border-subtle);
+  --component-scrollbar-background-thumb-hover: var(--color-border-soft);
+  --component-scrollbar-width-radius-default: 4;
+  --component-scrollbar-width-radius-hover: 6;
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-scrollbar-background-thumb-default: var(--color-border-subtle);
+  --component-scrollbar-background-thumb-hover: var(--color-border-soft);
+  --component-scrollbar-width-radius-default: 4;
+  --component-scrollbar-width-radius-hover: 6;
 }
 
-.tl-mode-dark {
+:root,
+.tl-mode-light,
+.tds-mode-light {
   --tl-scrollbar-track-color: transparent;
-  --tl-scrollbar-thumb-color: #a4c7f5;
+  --tl-scrollbar-thumb-color: var(--component-scrollbar-background-thumb-default);
+  --tl-scrollbar-thumb-border-radius: calc(var(--component-scrollbar-width-radius-default) * 1px);
+  --tl-scrollbar-hover-thumb-border-radius: calc(
+    var(--component-scrollbar-width-radius-hover) * 1px
+  );
 }
 
-.traton .tl-mode-light {
-  --tl-scrollbar-track-color: transparent;
-  --tl-scrollbar-thumb-color: #1a1a1926;
+.tl-mode-dark,
+.tds-mode-dark {
+  --tl-scrollbar-thumb-color: var(--component-scrollbar-background-thumb-default);
+  --tl-scrollbar-thumb-border-radius: calc(var(--component-scrollbar-width-radius-default) * 1px);
+  --tl-scrollbar-hover-thumb-border-radius: calc(
+    var(--component-scrollbar-width-radius-hover) * 1px
+  );
 }
-.traton .tl-mode-dark {
-  --tl-scrollbar-track-color: transparent;
-  --tl-scrollbar-thumb-color: #d9edf054;
+
+/**
+ * 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--focus-ring-color-strong: var(--color-system-info-default);
+  --component--focus-ring-color-discrete: var(--scania-color-base-white);
+  --component--focus-ring-radius-none: var(--scania-unit-0);
+  --component--focus-ring-radius-extra-small: 1;
+  --component--focus-ring-radius-small: 2;
+  --component--focus-ring-radius-medium: 3;
+  --component--focus-ring-radius-large: 4;
+  --component--focus-ring-radius-extra-large: 5;
+  --component--focus-ring-radius-full: var(--scania-unit-9999);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component--focus-ring-color-strong: var(--color-system-info-default);
+  --component--focus-ring-color-discrete: var(--traton-color-base-white);
+  --component--focus-ring-radius-none: var(--traton-unit-0);
+  --component--focus-ring-radius-extra-small: 1;
+  --component--focus-ring-radius-small: 2;
+  --component--focus-ring-radius-medium: 3;
+  --component--focus-ring-radius-large: 4;
+  --component--focus-ring-radius-extra-large: 5;
+  --component--focus-ring-radius-full: var(--traton-unit-9999);
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component--focus-ring-color-strong: var(--color-system-info-default);
+  --component--focus-ring-color-discrete: var(--scania-color-base-white);
+  --component--focus-ring-radius-none: var(--scania-unit-0);
+  --component--focus-ring-radius-extra-small: 1;
+  --component--focus-ring-radius-small: 2;
+  --component--focus-ring-radius-medium: 3;
+  --component--focus-ring-radius-large: 4;
+  --component--focus-ring-radius-extra-large: 5;
+  --component--focus-ring-radius-full: var(--scania-unit-9999);
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component--focus-ring-color-strong: var(--color-system-info-default);
+  --component--focus-ring-color-discrete: var(--traton-color-base-white);
+  --component--focus-ring-radius-none: var(--traton-unit-0);
+  --component--focus-ring-radius-extra-small: 1;
+  --component--focus-ring-radius-small: 2;
+  --component--focus-ring-radius-medium: 3;
+  --component--focus-ring-radius-large: 4;
+  --component--focus-ring-radius-extra-large: 5;
+  --component--focus-ring-radius-full: var(--traton-unit-9999);
 }
 
 body {

package/dist/scania-variables.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /* Scania primitive tokens */
 /**
  * Do not edit directly, this file was auto-generated.
@@ -1153,6 +1154,7 @@ h6 {
   --scania-icon-burger-svg: url(./assets/icons/scania/burger.svg);
   --scania-icon-bus_inactive-svg: url(./assets/icons/scania/bus_inactive.svg);
   --scania-icon-bus-svg: url(./assets/icons/scania/bus.svg);
+  --scania-icon-cab_door-svg: url(./assets/icons/scania/cab_door.svg);
   --scania-icon-calendar_inactive-svg: url(./assets/icons/scania/calendar_inactive.svg);
   --scania-icon-calendar-svg: url(./assets/icons/scania/calendar.svg);
   --scania-icon-camera_inactive-svg: url(./assets/icons/scania/camera_inactive.svg);
@@ -1267,6 +1269,7 @@ h6 {
   --scania-icon-kebab-svg: url(./assets/icons/scania/kebab.svg);
   --scania-icon-key_inactive-svg: url(./assets/icons/scania/key_inactive.svg);
   --scania-icon-key-svg: url(./assets/icons/scania/key.svg);
+  --scania-icon-language-svg: url(./assets/icons/scania/language.svg);
   --scania-icon-layer_inactive-svg: url(./assets/icons/scania/layer_inactive.svg);
   --scania-icon-layer-svg: url(./assets/icons/scania/layer.svg);
   --scania-icon-link_broken-svg: url(./assets/icons/scania/link_broken.svg);
@@ -1283,6 +1286,8 @@ h6 {
   --scania-icon-merge-svg: url(./assets/icons/scania/merge.svg);
   --scania-icon-message_inactive-svg: url(./assets/icons/scania/message_inactive.svg);
   --scania-icon-message-svg: url(./assets/icons/scania/message.svg);
+  --scania-icon-microphone_inactive-svg: url(./assets/icons/scania/microphone_inactive.svg);
+  --scania-icon-microphone-svg: url(./assets/icons/scania/microphone.svg);
   --scania-icon-mileage_inactive-svg: url(./assets/icons/scania/mileage_inactive.svg);
   --scania-icon-mileage-svg: url(./assets/icons/scania/mileage.svg);
   --scania-icon-minimize_fullscreen-svg: url(./assets/icons/scania/minimize_fullscreen.svg);
@@ -1290,9 +1295,11 @@ h6 {
   --scania-icon-navigate_inactive-svg: url(./assets/icons/scania/navigate_inactive.svg);
   --scania-icon-navigate-svg: url(./assets/icons/scania/navigate.svg);
   --scania-icon-notification_inactive-svg: url(./assets/icons/scania/notification_inactive.svg);
+  --scania-icon-notification_snooze-svg: url(./assets/icons/scania/notification_snooze.svg);
   --scania-icon-notification-svg: url(./assets/icons/scania/notification.svg);
   --scania-icon-oil_level_inactive-svg: url(./assets/icons/scania/oil_level_inactive.svg);
   --scania-icon-oil_level-svg: url(./assets/icons/scania/oil_level.svg);
+  --scania-icon-paperclip-svg: url(./assets/icons/scania/paperclip.svg);
   --scania-icon-pause_inactive-svg: url(./assets/icons/scania/pause_inactive.svg);
   --scania-icon-pause-svg: url(./assets/icons/scania/pause.svg);
   --scania-icon-phone_inactive-svg: url(./assets/icons/scania/phone_inactive.svg);
@@ -1312,6 +1319,7 @@ h6 {
   --scania-icon-privacy-svg: url(./assets/icons/scania/privacy.svg);
   --scania-icon-profile_inactive-svg: url(./assets/icons/scania/profile_inactive.svg);
   --scania-icon-profile-svg: url(./assets/icons/scania/profile.svg);
+  --scania-icon-prohibited-svg: url(./assets/icons/scania/prohibited.svg);
   --scania-icon-proportions_inactive-svg: url(./assets/icons/scania/proportions_inactive.svg);
   --scania-icon-proportions-svg: url(./assets/icons/scania/proportions.svg);
   --scania-icon-range_inactive-svg: url(./assets/icons/scania/range_inactive.svg);
@@ -1333,6 +1341,7 @@ h6 {
   --scania-icon-send-svg: url(./assets/icons/scania/send.svg);
   --scania-icon-settings-svg: url(./assets/icons/scania/settings.svg);
   --scania-icon-share-svg: url(./assets/icons/scania/share.svg);
+  --scania-icon-shuffle-svg: url(./assets/icons/scania/shuffle.svg);
   --scania-icon-skip_backwards-svg: url(./assets/icons/scania/skip_backwards.svg);
   --scania-icon-skip_forward-svg: url(./assets/icons/scania/skip_forward.svg);
   --scania-icon-smartphone_inactive-svg: url(./assets/icons/scania/smartphone_inactive.svg);
@@ -1405,6 +1414,7 @@ h6 {
   --icon-burger-svg: var(--scania-icon-burger-svg);
   --icon-bus_inactive-svg: var(--scania-icon-bus_inactive-svg);
   --icon-bus-svg: var(--scania-icon-bus-svg);
+  --icon-cab_door-svg: var(--scania-icon-cab_door-svg);
   --icon-calendar_inactive-svg: var(--scania-icon-calendar_inactive-svg);
   --icon-calendar-svg: var(--scania-icon-calendar-svg);
   --icon-camera_inactive-svg: var(--scania-icon-camera_inactive-svg);
@@ -1519,6 +1529,7 @@ h6 {
   --icon-kebab-svg: var(--scania-icon-kebab-svg);
   --icon-key_inactive-svg: var(--scania-icon-key_inactive-svg);
   --icon-key-svg: var(--scania-icon-key-svg);
+  --icon-language-svg: var(--scania-icon-language-svg);
   --icon-layer_inactive-svg: var(--scania-icon-layer_inactive-svg);
   --icon-layer-svg: var(--scania-icon-layer-svg);
   --icon-link_broken-svg: var(--scania-icon-link_broken-svg);
@@ -1535,6 +1546,8 @@ h6 {
   --icon-merge-svg: var(--scania-icon-merge-svg);
   --icon-message_inactive-svg: var(--scania-icon-message_inactive-svg);
   --icon-message-svg: var(--scania-icon-message-svg);
+  --icon-microphone_inactive-svg: var(--scania-icon-microphone_inactive-svg);
+  --icon-microphone-svg: var(--scania-icon-microphone-svg);
   --icon-mileage_inactive-svg: var(--scania-icon-mileage_inactive-svg);
   --icon-mileage-svg: var(--scania-icon-mileage-svg);
   --icon-minimize_fullscreen-svg: var(--scania-icon-minimize_fullscreen-svg);
@@ -1542,9 +1555,11 @@ h6 {
   --icon-navigate_inactive-svg: var(--scania-icon-navigate_inactive-svg);
   --icon-navigate-svg: var(--scania-icon-navigate-svg);
   --icon-notification_inactive-svg: var(--scania-icon-notification_inactive-svg);
+  --icon-notification_snooze-svg: var(--scania-icon-notification_snooze-svg);
   --icon-notification-svg: var(--scania-icon-notification-svg);
   --icon-oil_level_inactive-svg: var(--scania-icon-oil_level_inactive-svg);
   --icon-oil_level-svg: var(--scania-icon-oil_level-svg);
+  --icon-paperclip-svg: var(--scania-icon-paperclip-svg);
   --icon-pause_inactive-svg: var(--scania-icon-pause_inactive-svg);
   --icon-pause-svg: var(--scania-icon-pause-svg);
   --icon-phone_inactive-svg: var(--scania-icon-phone_inactive-svg);
@@ -1564,6 +1579,7 @@ h6 {
   --icon-privacy-svg: var(--scania-icon-privacy-svg);
   --icon-profile_inactive-svg: var(--scania-icon-profile_inactive-svg);
   --icon-profile-svg: var(--scania-icon-profile-svg);
+  --icon-prohibited-svg: var(--scania-icon-prohibited-svg);
   --icon-proportions_inactive-svg: var(--scania-icon-proportions_inactive-svg);
   --icon-proportions-svg: var(--scania-icon-proportions-svg);
   --icon-range_inactive-svg: var(--scania-icon-range_inactive-svg);
@@ -1585,6 +1601,7 @@ h6 {
   --icon-send-svg: var(--scania-icon-send-svg);
   --icon-settings-svg: var(--scania-icon-settings-svg);
   --icon-share-svg: var(--scania-icon-share-svg);
+  --icon-shuffle-svg: var(--scania-icon-shuffle-svg);
   --icon-skip_backwards-svg: var(--scania-icon-skip_backwards-svg);
   --icon-skip_forward-svg: var(--scania-icon-skip_forward-svg);
   --icon-smartphone_inactive-svg: var(--scania-icon-smartphone_inactive-svg);
@@ -1626,4 +1643,239 @@ h6 {
   --icon-wifi-svg: var(--scania-icon-wifi-svg);
   --icon-windscreen_heating_inactive-svg: var(--scania-icon-windscreen_heating_inactive-svg);
   --icon-windscreen_heating-svg: var(--scania-icon-windscreen_heating-svg);
+}
+
+/* Cross-brand placeholder fallbacks — generated alongside icon.scss */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root,
+.scania {
+  /* No fallbacks needed: this brand defines every icon name. */
+}
+
+.traton {
+  --icon-24v_battery-svg: var(--traton-icon-placeholder-svg);
+  --icon-24v_battery_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-acceleration-svg: var(--traton-icon-placeholder-svg);
+  --icon-acceleration_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-adblue-svg: var(--traton-icon-placeholder-svg);
+  --icon-adblue_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-audio-svg: var(--traton-icon-placeholder-svg);
+  --icon-audio_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-award-svg: var(--traton-icon-placeholder-svg);
+  --icon-back-svg: var(--traton-icon-placeholder-svg);
+  --icon-backward-svg: var(--traton-icon-placeholder-svg);
+  --icon-backward_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-bug-svg: var(--traton-icon-placeholder-svg);
+  --icon-bug_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-bus-svg: var(--traton-icon-placeholder-svg);
+  --icon-bus_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-cab_door-svg: var(--traton-icon-placeholder-svg);
+  --icon-calendar_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-camera-svg: var(--traton-icon-placeholder-svg);
+  --icon-camera_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-card-svg: var(--traton-icon-placeholder-svg);
+  --icon-cart-svg: var(--traton-icon-placeholder-svg);
+  --icon-charging_complete-svg: var(--traton-icon-placeholder-svg);
+  --icon-charging_failed-svg: var(--traton-icon-placeholder-svg);
+  --icon-charging_speed-svg: var(--traton-icon-placeholder-svg);
+  --icon-charging_speed_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-charging_stopped-svg: var(--traton-icon-placeholder-svg);
+  --icon-clock-svg: var(--traton-icon-placeholder-svg);
+  --icon-clock_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-configurator-svg: var(--traton-icon-placeholder-svg);
+  --icon-contact-svg: var(--traton-icon-placeholder-svg);
+  --icon-contact_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-cookie-svg: var(--traton-icon-placeholder-svg);
+  --icon-cookie_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-coolant_level-svg: var(--traton-icon-placeholder-svg);
+  --icon-coolant_level_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-copy-svg: var(--traton-icon-placeholder-svg);
+  --icon-cup-svg: var(--traton-icon-placeholder-svg);
+  --icon-cup_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-dashboard-svg: var(--traton-icon-placeholder-svg);
+  --icon-department-svg: var(--traton-icon-placeholder-svg);
+  --icon-department_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-departure_scheduling-svg: var(--traton-icon-placeholder-svg);
+  --icon-departure_scheduling_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-diamond-svg: var(--traton-icon-placeholder-svg);
+  --icon-diamond_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-document-svg: var(--traton-icon-placeholder-svg);
+  --icon-document_check-svg: var(--traton-icon-placeholder-svg);
+  --icon-document_doc-svg: var(--traton-icon-placeholder-svg);
+  --icon-document_eye-svg: var(--traton-icon-placeholder-svg);
+  --icon-document_pdf-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-document_tool-svg: var(--traton-icon-placeholder-svg);
+  --icon-document_wrong-svg: var(--traton-icon-placeholder-svg);
+  --icon-document_xls-svg: var(--traton-icon-placeholder-svg);
+  --icon-dollar-svg: var(--traton-icon-placeholder-svg);
+  --icon-doner-svg: var(--traton-icon-placeholder-svg);
+  --icon-double_kebab-svg: var(--traton-icon-placeholder-svg);
+  --icon-download-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-edit_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-email-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);
+  --icon-environment_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-exit-svg: var(--traton-icon-placeholder-svg);
+  --icon-expand-svg: var(--traton-icon-placeholder-svg);
+  --icon-expand_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-export-svg: var(--traton-icon-placeholder-svg);
+  --icon-export_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-eye-svg: var(--traton-icon-placeholder-svg);
+  --icon-eye_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-face_dissatisfied-svg: var(--traton-icon-placeholder-svg);
+  --icon-face_neutral-svg: var(--traton-icon-placeholder-svg);
+  --icon-face_satisfied-svg: var(--traton-icon-placeholder-svg);
+  --icon-factory-svg: var(--traton-icon-placeholder-svg);
+  --icon-factory_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-ferry-svg: var(--traton-icon-placeholder-svg);
+  --icon-ferry_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-filters-svg: var(--traton-icon-placeholder-svg);
+  --icon-filters_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-flash-svg: var(--traton-icon-placeholder-svg);
+  --icon-flash_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-folder-svg: var(--traton-icon-placeholder-svg);
+  --icon-forward-svg: var(--traton-icon-placeholder-svg);
+  --icon-forward_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-fuel-svg: var(--traton-icon-placeholder-svg);
+  --icon-fuel_gauge-svg: var(--traton-icon-placeholder-svg);
+  --icon-fuel_gauge_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-fuel_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-gift-svg: var(--traton-icon-placeholder-svg);
+  --icon-gift_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-global-svg: var(--traton-icon-placeholder-svg);
+  --icon-guided_tour-svg: var(--traton-icon-placeholder-svg);
+  --icon-guided_tour_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-hatch_open-svg: var(--traton-icon-placeholder-svg);
+  --icon-hatch_open_1-svg: var(--traton-icon-placeholder-svg);
+  --icon-hatch_open_2-svg: var(--traton-icon-placeholder-svg);
+  --icon-hatch_open_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-heart-svg: var(--traton-icon-placeholder-svg);
+  --icon-heart_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-heating_inactive_screen-svg: var(--traton-icon-placeholder-svg);
+  --icon-history-svg: var(--traton-icon-placeholder-svg);
+  --icon-history_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-home-svg: var(--traton-icon-placeholder-svg);
+  --icon-home_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-idea-svg: var(--traton-icon-placeholder-svg);
+  --icon-idea_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-image-svg: var(--traton-icon-placeholder-svg);
+  --icon-image_add-svg: var(--traton-icon-placeholder-svg);
+  --icon-image_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-image_set-svg: var(--traton-icon-placeholder-svg);
+  --icon-insights-svg: var(--traton-icon-placeholder-svg);
+  --icon-kebab-svg: var(--traton-icon-placeholder-svg);
+  --icon-key-svg: var(--traton-icon-placeholder-svg);
+  --icon-key_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-language-svg: var(--traton-icon-placeholder-svg);
+  --icon-layer-svg: var(--traton-icon-placeholder-svg);
+  --icon-layer_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-link-svg: var(--traton-icon-placeholder-svg);
+  --icon-link_broken-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-svg: var(--traton-icon-placeholder-svg);
+  --icon-lock_inactive-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-meatballs-svg: var(--traton-icon-placeholder-svg);
+  --icon-merge-svg: var(--traton-icon-placeholder-svg);
+  --icon-merge_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-message-svg: var(--traton-icon-placeholder-svg);
+  --icon-message_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-mileage-svg: var(--traton-icon-placeholder-svg);
+  --icon-mileage_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_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-phone-svg: var(--traton-icon-placeholder-svg);
+  --icon-phone_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-pie_chart-svg: var(--traton-icon-placeholder-svg);
+  --icon-pin-svg: var(--traton-icon-placeholder-svg);
+  --icon-pin_inactive-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);
+  --icon-powerplug_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-print_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-privacy-svg: var(--traton-icon-placeholder-svg);
+  --icon-privacy_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-profile-svg: var(--traton-icon-placeholder-svg);
+  --icon-profile_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-prohibited-svg: var(--traton-icon-placeholder-svg);
+  --icon-proportions-svg: var(--traton-icon-placeholder-svg);
+  --icon-proportions_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-range-svg: var(--traton-icon-placeholder-svg);
+  --icon-range_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-redirect-svg: var(--traton-icon-placeholder-svg);
+  --icon-refresh_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-reload-svg: var(--traton-icon-placeholder-svg);
+  --icon-reload_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-repeat-svg: var(--traton-icon-placeholder-svg);
+  --icon-report-svg: var(--traton-icon-placeholder-svg);
+  --icon-report_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-route-svg: var(--traton-icon-placeholder-svg);
+  --icon-route_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-save-svg: var(--traton-icon-placeholder-svg);
+  --icon-save_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-send-svg: var(--traton-icon-placeholder-svg);
+  --icon-send_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-settings-svg: var(--traton-icon-placeholder-svg);
+  --icon-shuffle-svg: var(--traton-icon-placeholder-svg);
+  --icon-skip_backwards-svg: var(--traton-icon-placeholder-svg);
+  --icon-skip_forward-svg: var(--traton-icon-placeholder-svg);
+  --icon-smartphone-svg: var(--traton-icon-placeholder-svg);
+  --icon-smartphone_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-speedometer-svg: var(--traton-icon-placeholder-svg);
+  --icon-speedometer_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-support-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-timer-svg: var(--traton-icon-placeholder-svg);
+  --icon-tool-svg: var(--traton-icon-placeholder-svg);
+  --icon-tool_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-trailer-svg: var(--traton-icon-placeholder-svg);
+  --icon-trailer_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-trash-svg: var(--traton-icon-placeholder-svg);
+  --icon-trash_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-truck_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-undo-svg: var(--traton-icon-placeholder-svg);
+  --icon-undo_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-unlock-svg: var(--traton-icon-placeholder-svg);
+  --icon-upload-svg: var(--traton-icon-placeholder-svg);
+  --icon-video-svg: var(--traton-icon-placeholder-svg);
+  --icon-video_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-wallet-svg: var(--traton-icon-placeholder-svg);
+  --icon-weight-svg: var(--traton-icon-placeholder-svg);
+  --icon-weight_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-wifi-svg: var(--traton-icon-placeholder-svg);
+  --icon-wifi_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-windscreen_heating-svg: var(--traton-icon-placeholder-svg);
+  --icon-windscreen_heating_inactive-svg: var(--traton-icon-placeholder-svg);
 }

package/dist/tl-accordion.css

@@ -63,8 +63,8 @@
   margin-bottom: -1px;
   border-bottom: 1px solid var(--accordion-border);
 }
-.tl-accordion__item:hover:not(.tl-accordion__item--expanded):not(.tl-accordion__item--disabled) .tl-accordion__header-icon-start,
-.tl-accordion__item:hover:not(.tl-accordion__item--expanded):not(.tl-accordion__item--disabled) .tl-accordion__header-icon-end {
+.tl-accordion__item:hover:not(.tl-accordion__item--expanded, .tl-accordion__item--disabled) .tl-accordion__header-icon-start,
+.tl-accordion__item:hover:not(.tl-accordion__item--expanded, .tl-accordion__item--disabled) .tl-accordion__header-icon-end {
   background-color: var(--accordion-background-hover);
 }
 .tl-accordion__item:active:not(.tl-accordion__item--disabled) .tl-accordion__header-icon-start,
@@ -75,8 +75,10 @@
   /* Focus state  */
 }
 .tl-accordion__item:has(.tl-accordion__header-icon-start:focus-visible), .tl-accordion__item:has(.tl-accordion__header-icon-end:focus-visible) {
-  outline: 2px solid var(--color-foreground-border-accent-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;
   background-color: var(--accordion-background-focus);
 }
 .tl-accordion__item--disabled:hover, .tl-accordion__item--disabled:active {

package/dist/tl-banner.css

@@ -1,21 +1,89 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
 :root,
-.tl-mode-light,
-.tl-mode-dark {
-  --banner-text: var(--color-foreground-text-strong);
-  --banner-close-icon: var(--color-foreground-icon-strong);
-  --banner-background-default: var(--color-background-layer-01);
-  --banner-prefix-default: var(--color-foreground-icon-strong);
-  --banner-background-info: var(--color-system-info-discrete);
-  --banner-prefix-info: var(--color-system-info-default);
-  --banner-background-error: var(--color-system-danger-discrete);
-  --banner-prefix-error: var(--color-system-danger-default);
+.tds-mode-light,
+.scania .tds-mode-light,
+.scania.tds-mode-light,
+.scania .tl-mode-light,
+.scania.tl-mode-light {
+  --component-banner-background-neutral-default: var(--scania-color-grey-150);
+  --component-banner-background-information-default: var(--scania-color-blue-100);
+  --component-banner-background-error-default: var(--color-system-danger-discrete);
+  --component-banner-text-neutral-default: var(--color-text-strong);
+  --component-banner-text-information-default: var(--color-text-strong);
+  --component-banner-text-error-default: var(--color-text-strong);
+  --component-banner-icon-neutral-default: var(--color-icon-strong);
+  --component-banner-icon-information-default: var(--color-system-info-default);
+  --component-banner-icon-error-default: var(--color-system-danger-default);
+  --component-banner-icon-dismiss-default: var(--color-icon-strong);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-banner-background-neutral-default: var(--color-background-layer-01);
+  --component-banner-background-information-default: var(--color-system-info-discrete);
+  --component-banner-background-error-default: var(--color-system-danger-discrete);
+  --component-banner-text-neutral-default: var(--color-text-strong);
+  --component-banner-text-information-default: var(--color-text-strong);
+  --component-banner-text-error-default: var(--color-text-strong);
+  --component-banner-icon-neutral-default: var(--color-icon-strong);
+  --component-banner-icon-information-default: var(--color-system-info-default);
+  --component-banner-icon-error-default: var(--color-system-danger-default);
+  --component-banner-icon-dismiss-default: var(--color-icon-strong);
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component-banner-background-neutral-default: var(--color-background-layer-02);
+  --component-banner-background-information-default: var(--scania-color-blue-700);
+  --component-banner-background-error-default: var(--color-system-danger-discrete);
+  --component-banner-text-neutral-default: var(--color-text-strong);
+  --component-banner-text-information-default: var(--color-text-strong);
+  --component-banner-text-error-default: var(--color-text-strong);
+  --component-banner-icon-neutral-default: var(--color-icon-strong);
+  --component-banner-icon-information-default: var(--color-system-info-default);
+  --component-banner-icon-error-default: var(--color-system-danger-default);
+  --component-banner-icon-dismiss-default: var(--color-icon-strong);
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-banner-background-neutral-default: var(--color-background-layer-01);
+  --component-banner-background-information-default: var(--color-system-info-discrete);
+  --component-banner-background-error-default: var(--color-system-danger-discrete);
+  --component-banner-text-neutral-default: var(--color-text-strong);
+  --component-banner-text-information-default: var(--color-text-strong);
+  --component-banner-text-error-default: var(--color-text-strong);
+  --component-banner-icon-neutral-default: var(--color-icon-strong);
+  --component-banner-icon-information-default: var(--color-system-info-default);
+  --component-banner-icon-error-default: var(--color-system-danger-default);
+  --component-banner-icon-dismiss-default: var(--color-icon-strong);
+}
+
+.tl-banner {
+  --banner-text: var(--component-banner-text-neutral-default);
+  --banner-close-icon: var(--component-banner-icon-dismiss-default);
+  --banner-background-default: var(--component-banner-background-neutral-default);
+  --banner-prefix-default: var(--component-banner-icon-neutral-default);
+  --banner-background-info: var(--component-banner-background-information-default);
+  --banner-prefix-info: var(--component-banner-icon-information-default);
+  --banner-background-error: var(--component-banner-background-error-default);
+  --banner-prefix-error: var(--component-banner-icon-error-default);
 }
 
 /* Typography Usage mixins */
 .tl-banner {
   display: flex;
   background-color: var(--banner-background-default);
-  padding: 16px 20px;
+  padding: 16px;
   position: relative;
 }
 .tl-banner--error {
@@ -87,8 +155,15 @@
   width: 20px;
 }
 .tl-banner__close:focus-visible {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  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-banner .tl-link {
+  text-decoration: underline;
+}
+.tl-banner .tl-link:hover {
+  text-decoration: none;
 }

package/dist/tl-breadcrumbs.css

@@ -108,7 +108,10 @@
   text-decoration: underline;
 }
 .tl-breadcrumbs a:focus-visible {
-  outline: var(--breadcrumb-focus-outline-width) solid var(--breadcrumb-focus-outline-color);
+  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-breadcrumbs a[aria-current=page] {
   pointer-events: none;