@scania/tegel-lite 0.0.3-rules-beta.7 → 0.1.0-tl-header-test

package/dist/global.css

@@ -5884,10 +5884,10 @@ tds-message {
   --tds-stepper-icon-step-border-color-warning: var(--tds-red-400);
   --tds-stepper-icon-step-border-color-success: var(--tds-green-400);
   --tds-stepper-icon-step-background-success: var(--tds-green-400);
-  --tds-stepper-icon-step-border-color-current: var(--tds-grey-950);
+  --tds-stepper-icon-step-border-color-current: var(--tds-grey-750);
   --tds-stepper-label-text-color-upcoming: var(--tds-blue-950);
   --tds-stepper-label-border-color-upcoming: var(--tds-blue-750);
-  --tds-stepper-divider-line: var(--tds-grey-700);
+  --tds-stepper-divider-line: var(--tds-grey-750);
 }
 
 .tds-mode-dark {
@@ -5897,6 +5897,7 @@ tds-message {
   --tds-stepper-icon-step-border-color-warning: var(--tds-red-300);
   --tds-stepper-icon-step-border-color-success: var(--tds-green-300);
   --tds-stepper-icon-step-background-success: var(--tds-green-300);
+  --tds-stepper-icon-step-border-color-current: var(--tds-grey-150);
   --tds-stepper-label-text-color-upcoming: var(--tds-grey-50);
   --tds-stepper-label-border-color-upcoming: var(--tds-grey-150);
   --tds-stepper-divider-line: var(--tds-grey-250);

package/dist/scania-variables.css

@@ -1345,6 +1345,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 +1354,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);
@@ -1601,6 +1605,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 +1614,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-button.css

@@ -1,3 +1,22 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.tl-button,
+tds-button,
+.tds-mode-light tds-button {
+  --component-button-primary-text: var(--color-brand-neutral-white);
+}
+
+.scania .tds-mode-dark tds-button,
+.scania .tds-mode-dark .tl-button {
+  --component-button-primary-text: var(--color-brand-neutral-white);
+}
+
+.tds-mode-dark tds-button,
+.tds-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-dropdown.css

@@ -166,7 +166,6 @@ body {
 
 .tl-dropdown__select {
   padding-top: 2px;
-  padding-left: calc(var(--tds-spacing-element-16) - 1px);
   cursor: pointer;
   display: block;
 }
@@ -286,6 +285,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 +306,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 +327,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 +353,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 +374,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 +395,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 +416,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 +437,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);
 }
@@ -763,6 +794,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-header.css

@@ -1,11 +1,116 @@
 @charset "UTF-8";
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.scania tds-header,
+.scania .tl-header {
+  /* State & interaction colors */
+  --component-header-color-background-open: var(--color-foreground-border-accent-focus);
+  --component-header-color-foreground-selected: var(--color-foreground-icon-strong);
+  --component-header-dropdown-item-background: var(--color-background-layer-02);
+  --component-header-avatar-item-background: var(--color-background-layer-02);
+  --component-header-app-launcher-meny-background: var(--color-background-layer-02);
+  /* Sizing & spacing */
+  --component-header-brand-logo-size: 30px;
+  --component-header-space-profile-padding: 16px;
+  --component-header-item-image-size: 34px;
+  --component-header-item-image-left: 10px;
+  --component-header-item-width: none;
+  --component-header-item-border-right: 1px solid var(--header-basic-element-border);
+  /* Borders */
+  --component-header-border: none;
+  /* Typography */
+  --component-header-font-family-headline: var(--scania-font-family-display);
+  --component-header-font-weight: var(--scania-font-weight-regular);
+  --component-header-text-transform: none;
+}
+.scania {
+  /* ── Light-mode overrides ───────────────────── */
+}
+.scania .tds-mode-light tds-header,
+.scania .tds-mode-light .tl-header {
+  --component-header-color-background: var(--color-brand-primary-800);
+  --component-header-color-foreground-strong: var(--color-foreground-icon-inverse-strong);
+  --component-header-color-background-hover: var(--color-brand-primary-700);
+  --component-header-color-background-border: var(--color-brand-primary-700);
+  --component-header-color-background-pressed: var(--color-brand-neutral-white);
+  --component-header-color-background-selected: var(--color-brand-primary-700);
+}
+.scania {
+  /* ── Dark-mode overrides ───────────────────── */
+}
+.scania .tds-mode-dark tds-header,
+.scania .tds-mode-dark .tl-header {
+  --component-header-color-background: var(--color-brand-primary-900);
+  --component-header-color-foreground-strong: var(--color-foreground-icon-strong);
+  --component-header-color-background-hover: var(--color-brand-primary-800);
+  --component-header-color-background-border: var(--color-brand-primary-800);
+  --component-header-color-background-pressed: var(--color-brand-primary-800);
+  --component-header-color-background-selected: var(--color-brand-primary-800);
+}
+
+.traton tds-header,
+.traton .tl-header {
+  /* Base colors */
+  --component-header-color-background: var(--color-background-base);
+  --component-header-color-background-hover: var(--color-background-layer-01);
+  --component-header-color-background-open: transparent;
+  --component-header-color-foreground-strong: var(--color-foreground-icon-strong);
+  --component-header-color-background-border: var(--traton-color-transparent-invisible-light);
+  --component-header-color-background-pressed: var(--color-background-base);
+  --component-header-color-foreground-selected: var(--color-foreground-icon-strong);
+  /* Dropdown & launcher */
+  --component-header-dropdown-item-background: var(--color-background-layer-01);
+  --component-header-avatar-item-background: var(--color-background-layer-01);
+  --component-header-app-launcher-meny-background: var(--color-background-layer-01);
+  /* Sizing & spacing */
+  --component-header-brand-logo-size: 106px;
+  --component-header-space-profile-padding: 20px;
+  --component-header-item-image-size: 24px;
+  --component-header-item-image-left: 15px;
+  --component-header-item-width: 122px;
+  --component-header-item-border-right: none;
+  /* Borders */
+  --component-header-border: 2px solid var(--header-nav-item-border-active);
+  /* Typography */
+  --component-header-font-family-headline: var(--traton-font-family-display);
+  --component-header-font-weight: var(--traton-font-weight-medium);
+  --component-header-text-transform: uppercase;
+}
+.traton {
+  /* ── Light-mode overrides ───────────────────── */
+}
+.traton .tds-mode-light tds-header,
+.traton .tds-mode-light .tl-header {
+  --component-header-color-background-selected: var(--color-background-layer-01);
+}
+.traton {
+  /* ── Dark-mode overrides ───────────────────── */
+}
+.traton .tds-mode-dark tds-header,
+.traton .tds-mode-dark .tl-header {
+  --component-header-color-background-selected: var(--color-background-surface-100);
+}
+
+/*
+  Tegel Lite specific overrides
+  Keep this in last to ensure it has the highest specificity for Tegel Lite
+*/
+.scania .tl-header {
+  --component-header-item-width: 30px;
+  --component-header-dropdown-box-shadow: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);
+}
+
+.traton .tl-header {
+  --component-header-dropdown-box-shadow: none;
+}
+
 .tl-header {
-  /* Base background & text */
-  --header-background: var(--component-header-color-background);
+  /* Base text */
   --header-nav-item: var(--component-header-color-foreground-strong);
   /* Nav-item states */
   --header-nav-item-background-hover: var(--color-background-surface-100);
-  --header-nav-item-background-selected: var(--color-background-surface-100);
+  --header-nav-item-background-selected: var(--component-header-dropdown-item-background);
   --header-nav-item-border-pressed: var(--color-foreground-border-accent-focus);
   --header-item-hover: var(--component-header-color-background-hover);
   /* Dropdown menu items */
@@ -17,11 +122,11 @@
   --tds-header-nav-item-dropdown-opened-background-selected: var(--tds-grey-100);
   --tds-header-nav-item-dropdown-opened-background-pressed: var(--tds-grey-300);
   --header-nav-item-dropdown-opened: var(--component-header-color-foreground-selected);
-  /* Basic element (“Bento”) separators & backgrounds */
+  /* Basic element ("Bento") separators & backgrounds */
   --header-basic-element-border: var(--component-header-color-background-border);
   --header-basic-element-border-open: var(--component-header-color-background-open);
-  --header-basic-element-background-pressed: var(--component-header-color-background-pressed);
-  --header-basic-element-background-selected: var(--component-header-color-background-selected);
+  --header-basic-element-background-pressed: var(--component-header-dropdown-item-background);
+  --header-basic-element-background-selected: var(--component-header-dropdown-item-background);
   /* Avatar dropdown */
   --header-avatar-item-background: var(--component-header-avatar-item-background);
   --header-avatar-item: var(--color-foreground-text-soft);
@@ -47,25 +152,75 @@
   --header-dropdown-box-shadow: var(--component-header-dropdown-box-shadow);
 }
 
+.scania {
+  /* Light mode - explicit light mode class */
+}
+.scania .tds-mode-light .tl-header {
+  --header-background: var(--color-brand-primary-800);
+  --header-nav-item: var(--color-foreground-icon-inverse-strong);
+  --header-item-hover: var(--color-brand-primary-700);
+  --header-basic-element-border: var(--color-brand-primary-700);
+  --header-basic-element-background-pressed: var(--color-brand-neutral-white);
+  --header-basic-element-background-selected: var(--color-brand-primary-700);
+}
+.scania {
+  /* Dark mode - override with dark colors */
+}
+.scania .tds-mode-dark .tl-header {
+  --header-background: var(--color-brand-primary-900);
+  --header-nav-item: var(--color-foreground-icon-strong);
+  --header-item-hover: var(--color-brand-primary-800);
+  --header-basic-element-border: var(--color-brand-primary-800);
+  --header-basic-element-background-pressed: var(--color-brand-primary-800);
+  --header-basic-element-background-selected: var(--color-brand-primary-800);
+}
+.scania {
+  /* Default .tl-header (works for no mode specified - defaults to light) */
+}
 .scania .tl-header {
   /* Brand logo */
   --header-logotype-local: var(--tds-background-image-scania-symbol-svg-local);
   --header-logotype-cdn: var(--tds-background-image-scania-symbol-svg);
   --component-header-space-profile-padding: 16px;
+  /* Background defaults to light mode */
+  --header-background: var(--color-brand-primary-800);
+  --header-nav-item: var(--color-foreground-icon-inverse-strong);
+  --header-item-hover: var(--color-brand-primary-700);
+  --header-basic-element-border: var(--color-brand-primary-700);
+  --header-basic-element-background-pressed: var(--color-brand-neutral-white);
+  --header-basic-element-background-selected: var(--color-brand-primary-700);
 }
 
 .traton .tds-mode-dark .tl-header {
-  /* Brand logo */
+  /* Brand logo - White for dark mode */
   --header-logotype-local: var(--traton-logotype-white-svg-local);
   --header-logotype-cdn: var(--traton-logotype-white-svg);
+  /* Background - uses base from traton tokens */
+  --header-background: var(--color-background-base);
+  --header-nav-item: var(--color-foreground-icon-strong);
+  --header-item-hover: var(--color-background-layer-01);
+  --header-basic-element-border: var(--traton-color-transparent-invisible-light);
+  --header-basic-element-background-pressed: var(--color-background-base);
+  --header-basic-element-background-selected: var(--color-background-surface-100);
 }
 .traton .tds-mode-light .tl-header {
-  /* Brand logo */
+  /* Brand logo - Black for light mode */
   --header-logotype-local: var(--traton-logotype-black-svg-local);
   --header-logotype-cdn: var(--traton-logotype-black-svg);
+  /* Background - uses base from traton tokens */
+  --header-background: var(--color-background-base);
+  --header-nav-item: var(--color-foreground-icon-strong);
+  --header-item-hover: var(--color-background-layer-01);
+  --header-basic-element-border: var(--traton-color-transparent-invisible-light);
+  --header-basic-element-background-pressed: var(--color-background-base);
+  --header-basic-element-background-selected: var(--color-background-layer-01);
 }
 .traton .tl-header {
+  /* Brand logo - Black as default (for no mode specified) */
+  --header-logotype-local: var(--traton-logotype-black-svg-local);
+  --header-logotype-cdn: var(--traton-logotype-black-svg);
   --component-header-space-profile-padding: 20px;
+  --header-background: transparent;
 }
 
 /* Typography Usage mixins */
@@ -105,18 +260,12 @@
   outline: none;
   box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
 }
-.tl-header__item--pressed .tl-header__item-wrapper {
+.tl-header__item-wrapper:active {
   padding-top: 2px;
   padding-bottom: 2px;
   background-color: var(--header-basic-element-background-selected);
   box-shadow: inset 0 0 0 2px var(--header-nav-item-border-pressed);
 }
-.tl-header__item--selected:not(.tl-header__item--pressed) .tl-header__item-wrapper {
-  padding-top: 4px;
-  border-bottom-style: solid;
-  border-bottom-width: 4px;
-  border-bottom-color: var(--header-nav-item-border-pressed);
-}
 
 .tl-header__item-wrapper .tl-link__icon {
   position: relative;
@@ -165,25 +314,26 @@ body {
   outline: none;
   box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
 }
+.tl-header__dropdown-wrapper:active {
+  background-color: var(--header-basic-element-background-selected);
+  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
+}
 .tl-header__dropdown-wrapper--open {
-  background-color: var(--header-basic-element-background-pressed);
+  background-color: var(--component-header-color-background-pressed);
   color: var(--header-nav-item-dropdown-opened);
   position: relative;
   z-index: calc(var(--tds-z-index-header) + 1);
 }
 .tl-header__dropdown-wrapper--open:hover {
-  background-color: var(--header-basic-element-background-pressed);
+  background-color: var(--component-header-color-background-pressed);
+}
+.tl-header__dropdown-wrapper--open:active {
+  background-color: var(--component-header-color-background-pressed);
+  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
 }
 .tl-header__dropdown-wrapper--selected {
-  padding-top: 4px;
   border-bottom: 4px solid var(--header-nav-item-border-pressed);
 }
-.tl-header__dropdown-wrapper--pressed {
-  padding-top: 2px;
-  padding-bottom: 2px;
-  background-color: var(--header-basic-element-background-selected);
-  box-shadow: inset 0 0 0 2px var(--header-nav-item-border-pressed);
-}
 
 .tl-header__dropdown-wrapper-user {
   all: unset;
@@ -211,28 +361,33 @@ body {
   outline: none;
   box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
 }
+.tl-header__dropdown-wrapper-user:active {
+  background-color: var(--header-basic-element-background-selected);
+  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
+}
 .tl-header__dropdown-wrapper-user--open {
-  background-color: var(--header-basic-element-background-pressed);
+  background-color: var(--component-header-color-background-pressed);
   color: var(--header-nav-item-dropdown-opened);
   position: relative;
   z-index: calc(var(--tds-z-index-header) + 1);
 }
 .tl-header__dropdown-wrapper-user--open:hover {
-  background-color: var(--header-basic-element-background-pressed);
+  background-color: var(--component-header-color-background-pressed);
+}
+.tl-header__dropdown-wrapper-user--open:active {
+  background-color: var(--component-header-color-background-pressed);
+  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
 }
 .tl-header__dropdown-wrapper-user--selected {
-  padding-top: 4px;
   border-bottom: 4px solid var(--header-nav-item-border-pressed);
 }
-.tl-header__dropdown-wrapper-user--pressed {
-  padding-top: 2px;
-  padding-bottom: 2px;
-  background-color: var(--header-basic-element-background-selected);
-  box-shadow: inset 0 0 0 2px var(--header-nav-item-border-pressed);
-}
 
 .tl-header__dropdown-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   transition: transform 0.2s ease;
+  transform-origin: center center;
 }
 .tl-header__dropdown-icon--rotated {
   transform: rotate(180deg);
@@ -300,6 +455,7 @@ body {
   max-height: calc(100vh - var(--tds-header-height));
   overflow-y: auto;
   z-index: var(--tds-z-index-header);
+  border-radius: 4px;
 }
 .tl-header__user-menu::-webkit-scrollbar {
   width: var(--tl-scrollbar-width);
@@ -390,6 +546,7 @@ body {
   max-height: calc(100vh - var(--tds-header-height));
   overflow-y: auto;
   z-index: var(--tds-z-index-header);
+  border-radius: 4px;
 }
 .tl-header__launcher-menu-grid::-webkit-scrollbar {
   width: var(--tl-scrollbar-width);
@@ -466,13 +623,13 @@ body {
 }
 
 .tl-header__user-menu-header {
-  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);
-  color: var(--header-nav-item-dropdown-opened);
+  font-family: var(--detail-06-font-family);
+  font-size: var(--detail-06-font-size);
+  line-height: var(--detail-06-line-height);
+  font-weight: var(--detail-06-font-weight);
+  letter-spacing: var(--detail-06-letter-spacing);
+  text-transform: var(--detail-06-text-transform);
+  color: var(--color-foreground-text-defined);
 }
 
 .tl-header__user-menu-subheader {
@@ -506,15 +663,14 @@ body {
 .tl-header__launcher-menu-title {
   all: unset;
   box-sizing: border-box;
-  font-family: var(--detail-04-font-family);
-  font-size: var(--detail-04-font-size);
-  line-height: var(--detail-04-line-height);
-  font-weight: var(--detail-04-font-weight);
-  letter-spacing: var(--detail-04-letter-spacing);
-  text-transform: var(--detail-04-text-transform);
+  font-family: var(--text-component-title-02-font-family);
+  font-size: var(--text-component-title-02-font-size);
+  line-height: var(--text-component-title-02-line-height);
+  font-weight: var(--text-component-title-02-font-weight);
+  letter-spacing: var(--text-component-title-02-letter-spacing);
+  text-transform: var(--text-component-title-02-text-transform);
   background-color: var(--header-nav-dropdown-item-background);
   color: var(--header-app-launcher-grid-category-title);
-  text-transform: uppercase;
   height: 48px;
   padding: 0 16px;
   display: flex;
@@ -539,7 +695,7 @@ body {
   letter-spacing: var(--detail-02-letter-spacing);
   text-transform: var(--detail-02-text-transform);
   background-color: var(--header-nav-dropdown-item-background);
-  color: var(--header-nav-item-dropdown-opened);
+  color: var(--color-foreground-text-defined);
 }
 .tl-header__dropdown-menu-item a:hover,
 .tl-header__dropdown-menu-item button:hover {
@@ -574,8 +730,8 @@ body {
   font-weight: var(--detail-05-font-weight);
   letter-spacing: var(--detail-05-letter-spacing);
   text-transform: var(--detail-05-text-transform);
-  background-color: var(--tds-header-app-launcher-menu-bg);
-  color: var(--tds-header-app-launcher-grid-color);
+  background-color: var(--header-nav-dropdown-item-background);
+  color: var(--color-foreground-text-defined);
   border-radius: 4px;
   transition: background-color 150ms ease;
 }

package/dist/tl-icon.css

@@ -632,6 +632,14 @@
   mask-image: var(--icon-message_inactive-svg);
   background-color: currentcolor;
 }
+.tl-icon--microphone {
+  mask-image: var(--icon-microphone-svg);
+  background-color: currentcolor;
+}
+.tl-icon--microphone_inactive {
+  mask-image: var(--icon-microphone_inactive-svg);
+  background-color: currentcolor;
+}
 .tl-icon--mileage {
   mask-image: var(--icon-mileage-svg);
   background-color: currentcolor;
@@ -664,6 +672,10 @@
   mask-image: var(--icon-notification_inactive-svg);
   background-color: currentcolor;
 }
+.tl-icon--notification_snooze {
+  mask-image: var(--icon-notification_snooze-svg);
+  background-color: currentcolor;
+}
 .tl-icon--oil_level {
   mask-image: var(--icon-oil_level-svg);
   background-color: currentcolor;
@@ -672,6 +684,10 @@
   mask-image: var(--icon-oil_level_inactive-svg);
   background-color: currentcolor;
 }
+.tl-icon--paperclip {
+  mask-image: var(--icon-paperclip-svg);
+  background-color: currentcolor;
+}
 .tl-icon--pause {
   mask-image: var(--icon-pause-svg);
   background-color: currentcolor;