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

package/dist/scania-variables.css

@@ -116,7 +116,9 @@
  */
 :root,
 .tds-mode-light,
-.scania .tds-mode-light {
+.scania .tds-mode-light,
+.tl-mode-light,
+.scania .tl-mode-light {
   --color-background-base: var(--scania-color-grey-00);
   --color-background-accent-primary-default: var(--scania-color-blue-600);
   --color-background-accent-primary-disabled: var(--scania-color-grey-50);
@@ -248,7 +250,9 @@
  * Do not edit directly, this file was auto-generated.
  */
 .tds-mode-dark,
-.scania .tds-mode-dark {
+.scania .tds-mode-dark,
+.tl-mode-dark,
+.scania .tl-mode-dark {
   --color-background-base: var(--scania-color-grey-950);
   --color-background-accent-primary-default: var(--scania-color-blue-400);
   --color-background-accent-primary-disabled: var(--scania-color-grey-850);
@@ -1301,7 +1305,7 @@ h6 {
   --scania-icon-fuel_gauge-svg: url(./assets/icons/scania/fuel_gauge.svg);
   --scania-icon-fuel_inactive-svg: url(./assets/icons/scania/fuel_inactive.svg);
   --scania-icon-fuel-svg: url(./assets/icons/scania/fuel.svg);
-  --scania-icon-gift-inactive-svg: url(./assets/icons/scania/gift%20inactive.svg);
+  --scania-icon-gift_inactive-svg: url(./assets/icons/scania/gift_inactive.svg);
   --scania-icon-gift-svg: url(./assets/icons/scania/gift.svg);
   --scania-icon-global-svg: url(./assets/icons/scania/global.svg);
   --scania-icon-guided_tour_inactive-svg: url(./assets/icons/scania/guided_tour_inactive.svg);
@@ -1345,6 +1349,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);
@@ -1352,9 +1358,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);
@@ -1557,7 +1565,7 @@ h6 {
   --icon-fuel_gauge-svg: var(--scania-icon-fuel_gauge-svg);
   --icon-fuel_inactive-svg: var(--scania-icon-fuel_inactive-svg);
   --icon-fuel-svg: var(--scania-icon-fuel-svg);
-  --icon-gift-inactive-svg: var(--scania-icon-gift-inactive-svg);
+  --icon-gift_inactive-svg: var(--scania-icon-gift_inactive-svg);
   --icon-gift-svg: var(--scania-icon-gift-svg);
   --icon-global-svg: var(--scania-icon-global-svg);
   --icon-guided_tour_inactive-svg: var(--scania-icon-guided_tour_inactive-svg);
@@ -1601,6 +1609,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);
@@ -1608,9 +1618,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);

package/dist/tl-accordion.css

@@ -18,26 +18,26 @@
 }
 
 /* Mode variants */
-.tds-mode-light .tl-accordion--primary,
-.tds-mode-light .tl-accordion .tl-accordion--primary {
+.tl-mode-light .tl-accordion--primary,
+.tl-mode-light .tl-accordion .tl-accordion--primary {
   background-color: var(--accordion-background-hover-secondary);
   --accordion-background-hover: var(--accordion-background-hover-primary);
 }
 
-.tds-mode-light .tl-accordion--secondary,
-.tds-mode-light .tl-accordion .tl-accordion--secondary {
+.tl-mode-light .tl-accordion--secondary,
+.tl-mode-light .tl-accordion .tl-accordion--secondary {
   background-color: var(--accordion-background-hover-primary);
   --accordion-background-hover: var(--accordion-background-hover-secondary);
 }
 
-.tds-mode-dark .tl-accordion--primary,
-.tds-mode-dark .tl-accordion .tl-accordion--primary {
+.tl-mode-dark .tl-accordion--primary,
+.tl-mode-dark .tl-accordion .tl-accordion--primary {
   background-color: var(--accordion-background-hover-secondary);
   --accordion-background-hover: var(--accordion-background-hover-primary);
 }
 
-.tds-mode-dark .tl-accordion--secondary,
-.tds-mode-dark .tl-accordion .tl-accordion--secondary {
+.tl-mode-dark .tl-accordion--secondary,
+.tl-mode-dark .tl-accordion .tl-accordion--secondary {
   background-color: var(--accordion-background-hover-primary);
   --accordion-background-hover: var(--accordion-background-hover-secondary);
 }

package/dist/tl-badge.css

@@ -1,3 +1,18 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.tl-badge,
+tds-badge {
+  --component-badge-text: var(--color-brand-neutral-white);
+  --component-badge-background: var(--color-system-danger-subtle);
+}
+
+.traton .tl-badge,
+.traton tds-badge {
+  --component-badge-text: var(--color-brand-neutral-black);
+  --component-badge-background: var(--color-system-warning-subtle);
+}
+
 .tl-badge {
   --badge-background-color: var(--component-badge-background);
   --badge-color-text: var(--component-badge-text);

package/dist/tl-banner.css

@@ -1,6 +1,6 @@
 :root,
-.tds-mode-light,
-.tds-mode-dark {
+.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);

package/dist/tl-button.css

@@ -1,3 +1,23 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.tl-button,
+tds-button,
+.tl-mode-light .tl-button,
+.tds-mode-light tds-button {
+  --component-button-primary-text: var(--color-brand-neutral-white);
+}
+
+.scania .tds-mode-dark tds-button,
+.scania .tl-mode-dark .tl-button {
+  --component-button-primary-text: var(--color-brand-neutral-white);
+}
+
+.tds-mode-dark tds-button,
+.tl-mode-dark .tl-button {
+  --component-button-primary-text: var(--color-brand-neutral-black);
+}
+
 .tl-button {
   --button-transparent: transparent;
   --button-white: var(--color-brand-neutral-white);

package/dist/tl-card.css

@@ -1,3 +1,13 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.tl-card,
+tds-card {
+  --component-card-secondary: var(--color-background-layer-02);
+  --component-card-primary: var(--color-background-layer-01);
+  --component-card-padding-padding: var(--scania-unit-16);
+}
+
 .tl-card {
   --card-background: var(--tds-white);
   --card-background-primary: var(--component-card-primary);
@@ -60,26 +70,26 @@
 }
 
 /* Dark mode */
-.tds-mode-dark {
+.tl-mode-dark {
   --card-background-primary: var(--tds-grey-900);
   --card-background-secondary: var(--tds-grey-850);
 }
-.tds-mode-dark .tl-card {
+.tl-mode-dark .tl-card {
   --card-background: var(--card-background-primary);
 }
-.tds-mode-dark .tl-card--primary {
+.tl-mode-dark .tl-card--primary {
   --card-box: var(--card-box-primary);
   --card-background: var(--card-background-primary);
 }
-.tds-mode-dark .tl-card--secondary {
+.tl-mode-dark .tl-card--secondary {
   --card-box: var(--card-box-primary);
   --card-background: var(--card-background-secondary);
 }
 
-.traton .tds-mode-dark .tl-card--primary {
+.traton .tl-mode-dark .tl-card--primary {
   --card-background: transparent;
 }
-.traton .tds-mode-dark .tl-card--secondary {
+.traton .tl-mode-dark .tl-card--secondary {
   --card-background: transparent;
 }
 

package/dist/tl-checkbox-vars.css

@@ -16,7 +16,7 @@
   --checkbox-background-img-indeterminate-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%23b0b7c4'/></svg>");
 }
 
-.tds-mode-dark .tl-checkbox {
+.tl-mode-dark .tl-checkbox {
   --checkbox-background-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>");
   --checkbox-background-img-indeterminate: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%230D0F13'/></svg>");
   --checkbox-background-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>");

package/dist/tl-checkbox.css

@@ -17,7 +17,7 @@
   --checkbox-background-img-indeterminate-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%23b0b7c4'/></svg>");
 }
 
-.tds-mode-dark .tl-checkbox {
+.tl-mode-dark .tl-checkbox {
   --checkbox-background-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>");
   --checkbox-background-img-indeterminate: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%230D0F13'/></svg>");
   --checkbox-background-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>");

package/dist/tl-chip.css

@@ -31,15 +31,15 @@
 .scania .tl-chip {
   --component-chip-border-radius: 16px;
 }
-:root .tds-mode-light .tl-chip,
-.scania .tds-mode-light .tl-chip {
+:root .tl-mode-light .tl-chip,
+.scania .tl-mode-light .tl-chip {
   --component-chip-color-hover: var(--color-background-surface-300);
   --component-chip-foreground-foreground-disabled-selected: var(
     --color-foreground-text-inverse-subtle
   );
 }
-:root .tds-mode-dark .tl-chip,
-.scania .tds-mode-dark .tl-chip {
+:root .tl-mode-dark .tl-chip,
+.scania .tl-mode-dark .tl-chip {
   --component-chip-color-default: var(--color-background-surface-400);
   --component-chip-color-focused-on-selected: var(--color-system-info-discrete);
   --component-chip-color-hover-on-selected: var(--color-system-info-default);
@@ -50,7 +50,7 @@
 .traton .tl-chip {
   --component-chip-border-radius: 2px;
 }
-.traton .tds-mode-light .tl-chip {
+.traton .tl-mode-light .tl-chip {
   --component-chip-color-default: var(--color-background-surface-200);
   --component-chip-color-selected: var(--color-background-surface-300);
   --component-chip-color-hover-on-selected: var(--color-background-surface-400);
@@ -58,7 +58,7 @@
   --component-chip-color-focused-on-selected: var(--component-chip-color-focused);
   --component-chip-foreground-foreground-disabled-selected: var(--color-background-surface-200);
 }
-.traton .tds-mode-dark .tl-chip {
+.traton .tl-mode-dark .tl-chip {
   --component-chip-color-default: var(--color-background-surface-300);
   --component-chip-color-disabled: var(--color-background-surface-200);
   --component-chip-foreground-inverse: var(--color-foreground-text-inverse-strong);

package/dist/tl-datetime.css

@@ -213,9 +213,9 @@
   background-color: var(--datetime-icon-error);
 }
 .tl-datetime__wrapper {
-  /* Disabled state (should not override error state) */
+  /* Disabled state */
 }
-.tl-datetime:has(input:disabled):not(.tl-datetime--error) .tl-datetime__wrapper::after {
+.tl-datetime:has(input:disabled) .tl-datetime__wrapper::after {
   background-color: var(--datetime-icon-disabled);
 }
 
@@ -248,7 +248,7 @@
 .tl-datetime__input:focus {
   box-shadow: inset var(--datetime-box-shadow-focus);
 }
-.tl-datetime:hover .tl-datetime__input:not(:focus) {
+.tl-datetime:hover .tl-datetime__input:not(:focus):not(:disabled) {
   box-shadow: inset var(--datetime-box-shadow-hover);
 }
 .tl-datetime--error .tl-datetime__input {
@@ -257,9 +257,12 @@
 .tl-datetime--error .tl-datetime__input:focus {
   box-shadow: inset var(--datetime-box-shadow-error-focus);
 }
-.tl-datetime--error:hover .tl-datetime__input:not(:focus) {
+.tl-datetime--error:hover .tl-datetime__input:not(:focus):not(:disabled) {
   box-shadow: inset var(--datetime-box-shadow-error-hover);
 }
+.tl-datetime--error .tl-datetime__input:disabled {
+  box-shadow: inset var(--datetime-box-shadow-error);
+}
 .tl-datetime__input::placeholder {
   opacity: 1;
   color: var(--datetime-placeholder);

package/dist/tl-dropdown.css

@@ -1,3 +1,18 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.tl-dropdown,
+tds-dropdown {
+  --component-dropdown-list-item-secondary-hover: var(--color-background-layer-03);
+  --component-dropdown-list-item-secondary-focus: var(--color-background-layer-03);
+  --component-dropdown-list-item-focus: var(--color-background-layer-02);
+  --component-dropdown-list-item-hover: var(--color-background-layer-02);
+  --component-dropdown-secondary-hover: var(--color-background-layer-03);
+  --component-dropdown-secondary-focus: var(--color-background-layer-03);
+  --component-dropdown-focus: var(--color-background-surface-300);
+  --component-dropdown-hover: var(--color-background-surface-100);
+}
+
 .tl-dropdown-option {
   --dropdown-option-background: var(--color-background-layer-01);
   --dropdown-option-background-hover: var(--component-dropdown-hover);
@@ -6,6 +21,9 @@
   --dropdown-option-border: var(--color-foreground-border-discrete);
 }
 
+.tl-dropdown {
+  --dropdown-background: var(--color-background-layer-01);
+}
 .tl-dropdown--primary {
   --dropdown-background: var(--color-background-layer-01);
 }
@@ -13,7 +31,6 @@
   --dropdown-background: var(--color-background-layer-02);
 }
 .tl-dropdown {
-  --dropdown-background: var(--color-background-layer-01);
   --dropdown-text: var(--color-foreground-text-strong);
   --dropdown-helper-text: var(--color-foreground-text-defined);
   --dropdown-placeholder: var(--color-foreground-text-subtle);
@@ -166,7 +183,6 @@ body {
 
 .tl-dropdown__select {
   padding-top: 2px;
-  padding-left: calc(var(--tds-spacing-element-16) - 1px);
   cursor: pointer;
   display: block;
 }
@@ -286,6 +302,10 @@ body {
   transition: transform 0.2s;
 }
 
+.tl-dropdown--lg:not(.tl-dropdown--label-inside):has(.tl-dropdown__select:disabled):not(:has(.tl-dropdown__helper))::after {
+  background-color: var(--dropdown-disabled);
+}
+
 .tl-dropdown--md:not(.tl-dropdown--label-inside):has(.tl-dropdown__select):not(:has(.tl-dropdown__helper))::after {
   content: "";
   position: absolute;
@@ -303,6 +323,10 @@ body {
   transition: transform 0.2s;
 }
 
+.tl-dropdown--md:not(.tl-dropdown--label-inside):has(.tl-dropdown__select:disabled):not(:has(.tl-dropdown__helper))::after {
+  background-color: var(--dropdown-disabled);
+}
+
 .tl-dropdown--sm:not(.tl-dropdown--label-inside):has(.tl-dropdown__select):not(:has(.tl-dropdown__helper))::after {
   content: "";
   position: absolute;
@@ -320,6 +344,10 @@ body {
   transition: transform 0.2s;
 }
 
+.tl-dropdown--sm:not(.tl-dropdown--label-inside):has(.tl-dropdown__select:disabled):not(:has(.tl-dropdown__helper))::after {
+  background-color: var(--dropdown-disabled);
+}
+
 .tl-dropdown:not(.tl-dropdown--label-inside):has(.tl-dropdown__label):has(:is(.tl-dropdown__button, .tl-dropdown__input)) .tl-dropdown__button::after,
 .tl-dropdown:not(.tl-dropdown--label-inside):has(.tl-dropdown__label):has(:is(.tl-dropdown__button, .tl-dropdown__input)) .tl-dropdown__input-wrapper::after {
   top: calc(50% + 1px);
@@ -342,6 +370,10 @@ body {
   transition: transform 0.2s;
 }
 
+.tl-dropdown--label-inside:has(.tl-dropdown__select:disabled):not(:has(.tl-dropdown__helper))::after {
+  background-color: var(--dropdown-disabled);
+}
+
 .tl-dropdown:not(:has(.tl-dropdown__label)):has(.tl-dropdown__select):not(:has(.tl-dropdown__helper))::after {
   content: "";
   position: absolute;
@@ -359,6 +391,10 @@ body {
   transition: transform 0.2s;
 }
 
+.tl-dropdown:not(:has(.tl-dropdown__label)):has(.tl-dropdown__select:disabled):not(:has(.tl-dropdown__helper))::after {
+  background-color: var(--dropdown-disabled);
+}
+
 .tl-dropdown--label-inside:has(.tl-dropdown__select):has(.tl-dropdown__helper)::after {
   content: "";
   position: absolute;
@@ -376,6 +412,10 @@ body {
   transition: transform 0.2s;
 }
 
+.tl-dropdown--label-inside:has(.tl-dropdown__select:disabled):has(.tl-dropdown__helper)::after {
+  background-color: var(--dropdown-disabled);
+}
+
 .tl-dropdown:not(:has(.tl-dropdown__label)):has(.tl-dropdown__select):has(.tl-dropdown__helper)::after {
   content: "";
   position: absolute;
@@ -393,6 +433,10 @@ body {
   transition: transform 0.2s;
 }
 
+.tl-dropdown:not(:has(.tl-dropdown__label)):has(.tl-dropdown__select:disabled):has(.tl-dropdown__helper)::after {
+  background-color: var(--dropdown-disabled);
+}
+
 .tl-dropdown:not(.tl-dropdown--label-inside):has(.tl-dropdown__label):has(.tl-dropdown__select):has(.tl-dropdown__helper)::after {
   content: "";
   position: absolute;
@@ -410,6 +454,10 @@ body {
   transition: transform 0.2s;
 }
 
+.tl-dropdown:not(.tl-dropdown--label-inside):has(.tl-dropdown__label):has(.tl-dropdown__select:disabled):has(.tl-dropdown__helper)::after {
+  background-color: var(--dropdown-disabled);
+}
+
 .tl-dropdown--md:not(.tl-dropdown--label-inside):has(.tl-dropdown__label):has(.tl-dropdown__select):has(.tl-dropdown__helper)::after {
   top: calc(50% + 1px);
 }
@@ -574,7 +622,7 @@ body {
     scrollbar-width: var(--tl-scrollbar-width-standard);
   }
 }
-.tds-mode-dark .tl-dropdown__list {
+.tl-mode-dark .tl-dropdown__list {
   box-shadow: none;
 }
 .tl-dropdown--dropup .tl-dropdown__list {
@@ -763,6 +811,10 @@ body {
   transition: box-shadow 0.2s;
 }
 
+.tl-dropdown:has(.tl-dropdown__select option[value=""]:checked) .tl-dropdown__select {
+  padding-top: 3px;
+}
+
 .tl-dropdown:has(.tl-dropdown__select option[value=""]:checked) .tl-dropdown__select:disabled {
   color: var(--dropdown-disabled);
   cursor: not-allowed;

package/dist/tl-folder-tabs.css

@@ -24,6 +24,70 @@
   --folder-tab-surface-selected: var(--color-background-layer-02);
 }
 
+/* tl-folder-tabs.scss (overlay buttons, no JS) */
+/* Typography Usage mixins */
+.tl-folder-tabs__tab {
+  all: unset;
+  font-family: var(--headline-07-font-family);
+  font-size: var(--headline-07-font-size);
+  line-height: var(--headline-07-line-height);
+  font-weight: var(--headline-07-font-weight);
+  letter-spacing: var(--headline-07-letter-spacing);
+  text-transform: var(--headline-07-text-transform);
+  box-sizing: border-box;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  min-inline-size: 142px;
+  inline-size: auto;
+  flex: 0 0 auto;
+  white-space: nowrap;
+  padding: 16px;
+  text-align: left;
+  cursor: pointer;
+  border-left: 1px solid transparent;
+  border-top: 2px solid var(--folder-tab-surface);
+  background-color: var(--folder-tab-surface);
+  color: var(--folder-tab-text);
+}
+.tl-folder-tabs__tab + .tl-folder-tabs__tab {
+  border-left-color: var(--folder-tab-divider);
+}
+.tl-folder-tabs__tab:focus-visible {
+  outline: 2px solid currentcolor;
+  outline-offset: -4px;
+  box-shadow: none;
+}
+.tl-folder-tabs__tab:hover:not(.tl-folder-tabs__tab--disabled):not(.tl-folder-tabs__tab--selected) {
+  background-color: var(--folder-tab-surface-hover);
+  border-top-color: var(--folder-tab-surface-hover);
+  color: var(--folder-tab-text);
+}
+.tl-folder-tabs__tab--selected {
+  background-color: var(--folder-tab-surface-selected);
+  border-top-color: var(--folder-tab-border-selected);
+  color: var(--folder-tab-text);
+}
+.tl-folder-tabs__tab--selected::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: -1px;
+  bottom: 0;
+  width: 1px;
+  background-color: var(--folder-tab-surface-selected);
+  z-index: 1;
+}
+.tl-folder-tabs__tab--disabled {
+  color: var(--folder-tab-text-disabled);
+  cursor: not-allowed;
+  user-select: none;
+}
+.tl-folder-tabs__tab--disabled:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
 .tl-folder-tabs {
   box-sizing: border-box;
 }

package/dist/tl-footer.css

@@ -1,4 +1,68 @@
 /* Typography Usage mixins */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.tl-footer,
+tds-footer {
+  --component-footer-text-color-copyright: var(--color-foreground-text-soft);
+  --component-footer-text-color-link-text: var(--color-brand-primary-50);
+  --component-footer-primary: var(--scania-color-blue-900);
+  --component-footer-border: var(--scania-color-blue-800);
+}
+
+:root .tl-footer,
+:root tds-footer,
+.scania .tl-footer,
+.scania tds-footer {
+  --component-footer-primary: var(--scania-color-blue-900);
+  --component-footer-border: var(--scania-color-blue-700);
+  --component-footer-text-color-copyright: var(--color-foreground-text-inverse-soft);
+  --component-footer-text-color-link-text: var(--color-foreground-text-brand);
+  --component-footer-logotype-cdn: var(--tds-background-image-scania-wordmark-white-svg);
+  --component-footer-logotype-local: var(--tds-background-image-scania-wordmark-white-svg-local);
+}
+:root .tds-mode-light tds-footer,
+:root .tds-mode-light .tl-footer,
+.scania .tds-mode-light tds-footer,
+.scania .tds-mode-light .tl-footer {
+  --component-footer-text-color-copyright: var(--color-foreground-text-inverse-soft);
+  --component-footer-text-color-link-text: var(--color-foreground-text-brand);
+  --component-footer-logotype-cdn: var(--tds-background-image-scania-wordmark-white-svg);
+  --component-footer-logotype-local: var(--tds-background-image-scania-wordmark-white-svg-local);
+}
+:root .tds-mode-dark tds-footer,
+:root .tds-mode-dark .tl-footer,
+.scania .tds-mode-dark tds-footer,
+.scania .tds-mode-dark .tl-footer {
+  --component-footer-text-color-copyright: var(--color-foreground-text-soft);
+  --component-footer-text-color-link-text: var(--color-brand-primary-50);
+  --component-footer-logotype-cdn: var(--tds-background-image-scania-wordmark-white-svg);
+  --component-footer-logotype-local: var(--tds-background-image-scania-wordmark-white-svg-local);
+}
+
+.traton tds-footer,
+.traton .tl-footer {
+  --component-footer-primary: var(--traton-color-grey-50);
+  --component-footer-border: var(--traton-color-transparent-invisible-light);
+  --component-footer-text-color-copyright: var(--traton-color-transparent-600);
+  --component-footer-text-color-link-text: var(--color-foreground-text-strong);
+  --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
+  --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
+}
+.traton .tds-mode-light tds-footer,
+.traton .tds-mode-light .tl-footer {
+  --component-footer-text-color-copyright: var(--traton-color-transparent-600);
+  --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
+  --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
+}
+.traton .tds-mode-dark tds-footer,
+.traton .tds-mode-dark .tl-footer {
+  --component-footer-text-color-copyright: var(--traton-color-transparent-inverse-600);
+  --component-footer-primary: var(--traton-color-blue-1000);
+  --component-footer-logotype-cdn: var(--traton-logotype-white-svg);
+  --component-footer-logotype-local: var(--traton-logotype-white-svg-local);
+}
+
 .tl-footer {
   --footer-top-background-primary: var(--color-background-layer-01);
   --footer-top-background-secondary: var(--color-background-base);