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

package/dist/tl-header.css

@@ -1,11 +1,121 @@
 @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);
+  /* Layout */
+  --tds-header-height: 64px;
+  --tds-header-list-item-md-height: 48px;
+  /* App launcher dropdown background */
+  --tds-header-app-launcher-menu-background: var(--header-app-launcher-menu-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 +127,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 +157,75 @@
   --header-dropdown-box-shadow: var(--component-header-dropdown-box-shadow);
 }
 
+.scania {
+  /* Light mode - explicit light mode class */
+}
+.scania .tl-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 .tl-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 */
+.traton .tl-mode-dark .tl-header {
+  /* Brand logo - White for dark mode */
   --header-logotype-local: var(--traton-logotype-white-svg-local);
   --header-logotype-cdn: var(--traton-logotype-white-svg);
-}
-.traton .tds-mode-light .tl-header {
-  /* Brand logo */
+  /* 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 .tl-mode-light .tl-header {
+  /* 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 +265,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 +319,25 @@ 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 +365,32 @@ 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);
@@ -249,7 +407,6 @@ body {
   min-width: 190px;
   max-height: calc(100vh - var(--tds-header-height));
   overflow-y: auto;
-  z-index: var(--tds-z-index-header);
 }
 .tl-header__dropdown-menu::-webkit-scrollbar {
   width: var(--tl-scrollbar-width);
@@ -299,7 +456,7 @@ body {
   min-width: 290px;
   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);
@@ -344,7 +501,6 @@ body {
   min-width: 320px;
   max-height: calc(100vh - var(--tds-header-height));
   overflow-y: auto;
-  z-index: var(--tds-z-index-header);
 }
 .tl-header__launcher-menu::-webkit-scrollbar {
   width: var(--tl-scrollbar-width);
@@ -389,7 +545,7 @@ body {
   min-width: 320px;
   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 +622,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 +662,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 +694,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 +729,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;
 }
@@ -637,7 +792,6 @@ body {
   height: var(--tds-header-height);
   background-color: var(--header-background);
   width: 100%;
-  z-index: var(--tds-z-index-header);
 }
 
 .tl-header__nav {

package/dist/tl-icon.css

@@ -460,8 +460,8 @@
   mask-image: var(--icon-gift-svg);
   background-color: currentcolor;
 }
-.tl-icon--gift inactive {
-  mask-image: var(--icon-gift inactive-svg);
+.tl-icon--gift_inactive {
+  mask-image: var(--icon-gift_inactive-svg);
   background-color: currentcolor;
 }
 .tl-icon--global {
@@ -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;

package/dist/tl-inline-tabs.css

@@ -34,6 +34,87 @@
   --inline-tabs-tab-indicator-hover: var(--color-foreground-border-discrete);
 }
 
+/* Typography Usage mixins */
+.tl-inline-tabs__tab {
+  all: unset;
+  margin-right: 32px;
+  box-sizing: border-box;
+}
+.tl-inline-tabs__tab * {
+  box-sizing: border-box;
+}
+.tl-inline-tabs__tab {
+  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(--inline-tabs-tab);
+  text-decoration: none;
+  display: block;
+  position: relative;
+  transition: color 0.15s ease-in-out 0s;
+  white-space: nowrap;
+  background-color: transparent;
+  border: 0;
+  padding: 20px 4px;
+}
+.tl-inline-tabs__tab:focus-visible {
+  outline: none;
+}
+.tl-inline-tabs__tab:focus-visible::before {
+  content: "";
+  position: absolute;
+  inset: 18px 0;
+  border-radius: 2px;
+  box-shadow: 0 0 0 2px var(--inline-tabs-tab-focus) inset;
+  z-index: 2;
+  pointer-events: none;
+}
+.tl-inline-tabs__tab::after {
+  background-color: var(--inline-tabs-tab-indicator-hover);
+  content: " ";
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  margin-left: auto;
+  width: 0%;
+  margin-right: auto;
+  height: 2px;
+  z-index: 1;
+  transition: width 0.15s ease-in-out 0s;
+}
+.tl-inline-tabs__tab:not(.tl-inline-tabs__tab--selected)::after {
+  width: 0%;
+}
+.tl-inline-tabs__tab:hover {
+  cursor: pointer;
+  color: var(--inline-tabs-tab-hover);
+}
+.tl-inline-tabs__tab:hover::after {
+  width: 100%;
+}
+.tl-inline-tabs__tab--selected {
+  color: var(--inline-tabs-tab-selected);
+}
+.tl-inline-tabs__tab--selected::after {
+  background-color: var(--inline-tabs-tab-indicator-active);
+  width: 100%;
+}
+.tl-inline-tabs__tab--disabled {
+  color: var(--inline-tabs-tab-disabled);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.tl-inline-tabs__tab--disabled::after {
+  content: none;
+}
+.tl-inline-tabs__tab--disabled:focus-visible::before {
+  box-shadow: none;
+}
+
 .tl-inline-tabs {
   box-sizing: border-box;
 }

package/dist/tl-modal.css

@@ -12,6 +12,41 @@ body {
 }
 
 /* Typography Usage mixins */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root,
+.tds-mode-light,
+.scania .tds-mode-light {
+  --component-shadow-hover: var(--scania-color-transparent-shadow-250);
+  --component-shadow-default: var(--scania-color-transparent-shadow-150);
+  --component-shadow-pressed: var(--scania-color-transparent-shadow-250);
+  --component-shadow-dragged: var(--scania-color-transparent-shadow-200);
+  --component-shadow-base-modifier: var(--scania-color-transparent-shadow-100);
+  --component-shadow-focus: var(--scania-color-transparent-shadow-350);
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark {
+  --component-shadow-hover: var(--scania-color-transparent-invisible-dark);
+  --component-shadow-default: var(--scania-color-transparent-invisible-dark);
+  --component-shadow-pressed: var(--scania-color-transparent-invisible-dark);
+  --component-shadow-dragged: var(--scania-color-transparent-invisible-dark);
+  --component-shadow-base-modifier: var(--scania-color-transparent-invisible-dark);
+  --component-shadow-focus: var(--scania-color-transparent-invisible-dark);
+}
+
+.traton,
+.traton .tds-mode-light,
+.traton .tds-mode-dark {
+  --component-shadow-hover: var(--traton-color-transparent-invisible-dark);
+  --component-shadow-default: var(--traton-color-transparent-invisible-dark);
+  --component-shadow-pressed: var(--traton-color-transparent-invisible-dark);
+  --component-shadow-dragged: var(--traton-color-transparent-invisible-dark);
+  --component-shadow-base-modifier: var(--traton-color-transparent-invisible-dark);
+  --component-shadow-focus: var(--traton-color-transparent-invisible-dark);
+}
+
 /* Component variables */
 .tl-modal,
 :root {

package/dist/tl-navigation-tabs.css

@@ -32,6 +32,87 @@
   --navigation-tabs-tab-background-secondary: var(--traton-color-transparent-invisible-dark);
 }
 
+/* Typography Usage mixins */
+.tl-navigation-tabs__tab {
+  all: unset;
+  margin-right: 32px;
+  box-sizing: border-box;
+}
+.tl-navigation-tabs__tab * {
+  box-sizing: border-box;
+}
+.tl-navigation-tabs__tab {
+  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(--navigation-tabs-tab);
+  text-decoration: none;
+  display: block;
+  position: relative;
+  transition: color 0.15s ease-in-out 0s;
+  white-space: nowrap;
+  background-color: transparent;
+  border: 0;
+  padding: 26px 4px;
+}
+.tl-navigation-tabs__tab:focus-visible {
+  outline: none;
+}
+.tl-navigation-tabs__tab:focus-visible::before {
+  content: "";
+  position: absolute;
+  inset: 18px 0;
+  border-radius: 2px;
+  box-shadow: 0 0 0 2px var(--navigation-tabs-tab-focus) inset;
+  z-index: 2;
+  pointer-events: none;
+}
+.tl-navigation-tabs__tab::after {
+  background-color: var(--navigation-tabs-tab-indicator-hover);
+  content: " ";
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  margin-left: auto;
+  width: 0%;
+  margin-right: auto;
+  height: 2px;
+  z-index: 1;
+  transition: width 0.15s ease-in-out 0s;
+}
+.tl-navigation-tabs__tab:not(.tl-navigation-tabs__tab--selected)::after {
+  width: 0%;
+}
+.tl-navigation-tabs__tab:hover {
+  cursor: pointer;
+  color: var(--navigation-tabs-tab-hover);
+}
+.tl-navigation-tabs__tab:hover::after {
+  width: 100%;
+}
+.tl-navigation-tabs__tab--selected {
+  color: var(--navigation-tabs-tab-selected);
+}
+.tl-navigation-tabs__tab--selected::after {
+  background-color: var(--navigation-tabs-tab-indicator-active);
+  width: 100%;
+}
+.tl-navigation-tabs__tab--disabled {
+  color: var(--navigation-tabs-tab-disabled);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.tl-navigation-tabs__tab--disabled::after {
+  content: none;
+}
+.tl-navigation-tabs__tab--disabled:focus-visible::before {
+  box-shadow: none;
+}
+
 .tl-navigation-tabs {
   box-sizing: border-box;
 }

package/dist/tl-radio-button.css

@@ -127,7 +127,7 @@
 }
 .tl-radio-button__input:disabled::after {
   background-color: var(--radio-button-background-disabled);
-  border: 1px solid var(--radio-button-border-disabled);
+  border-color: var(--radio-button-background-disabled);
   outline: none;
 }
 .tl-radio-button__input:disabled:checked::before {