@scania/tegel 1.33.0 → 1.34.0-internal-variables-demo.0

package/dist/collection/components/footer/footer-item/footer-item.css

@@ -1,16 +1,22 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host([role=listitem]) div ::slotted(a),
 :host([role=listitem]) div ::slotted(button) {
-  font: var(--tds-headline-07);
-  letter-spacing: var(--tds-headline-07-ls);
-  color: var(--tds-footer-main-links);
+  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(--footer-main-links);
   text-decoration: none;
 }
 :host([role=listitem]) div ::slotted(a:focus-visible),
 :host([role=listitem]) div ::slotted(button:focus-visible) {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
+  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
   outline-offset: 1px;
-  z-index: 1;
 }
 :host([role=listitem]) div ::slotted(a:hover),
 :host([role=listitem]) div ::slotted(button:hover) {
@@ -18,21 +24,24 @@
 }
 :host([role=listitem]) div.top-part-child ::slotted(a),
 :host([role=listitem]) div.top-part-child ::slotted(button) {
-  font: var(--tds-headline-07);
-  letter-spacing: var(--tds-headline-07-ls);
-  color: var(--tds-footer-top-links);
+  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(--footer-top-links);
 }
 :host([role=listitem]) div.top-part-child ::slotted(a:focus-visible),
 :host([role=listitem]) div.top-part-child ::slotted(button:focus-visible) {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
+  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
   outline-offset: 1px;
-  z-index: 1;
 }
 
 @media all and (max-width: 992px) {
   :host([role=listitem]) div.top-part-child {
-    border-bottom: 1px solid var(--tds-footer-top-divider);
+    border-bottom: 1px solid var(--footer-top-divider);
   }
   :host([role=listitem]) div.top-part-child ::slotted(a),
   :host([role=listitem]) div.top-part-child ::slotted(button) {
@@ -44,13 +53,12 @@
   :host([role=listitem]) div.top-part-child ::slotted(a:hover),
   :host([role=listitem]) div.top-part-child ::slotted(button:hover) {
     text-decoration: underline;
-    background-color: var(--tds-footer-top-links-background-hover);
+    background-color: var(--footer-top-links-background-hover);
   }
   :host([role=listitem]) div.top-part-child ::slotted(a:focus-visible),
   :host([role=listitem]) div.top-part-child ::slotted(button:focus-visible) {
-    outline: 2px solid var(--tds-focus-outline-color);
-    box-shadow: 0 0 0 1px var(--tds-white);
+    outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
+    box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
     outline-offset: 1px;
-    z-index: 1;
   }
 }

package/dist/collection/components/footer/footer.css

@@ -1,9 +1,12 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
   display: block;
 }
 :host slot[name=top]::slotted(*) {
   box-sizing: border-box;
-  background-color: var(--tds-footer-top-background);
+  background-color: var(--footer-top-background);
   padding: 40px;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
@@ -11,7 +14,7 @@
   width: 100%;
 }
 :host .footer-main {
-  background-color: var(--tds-footer-main-background);
+  background-color: var(--footer-main-background);
   padding: 0 40px;
 }
 :host .footer-main-top {
@@ -35,16 +38,20 @@
   padding: 40px 0;
   display: flex;
   justify-content: space-between;
-  border-top: 1px solid var(--tds-footer-main-divider);
+  border-top: 1px solid var(--footer-main-divider);
 }
 :host .footer-main-bottom small.copyright {
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
   margin: 0;
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
-  color: var(--tds-footer-main-copyright);
+  color: var(--footer-main-copyright);
 }
 :host .footer-main-bottom .brand {
-  background-image: var(--tds-background-image-scania-wordmark-white-svg-local), var(--tds-background-image-scania-wordmark-white-svg);
+  background-image: var(--component-footer-logotype-cdn), var(--component-footer-logotype-local);
   background-repeat: no-repeat;
   background-size: 117px;
   background-position: right;
@@ -89,4 +96,10 @@
   :host .footer-main-bottom .brand {
     width: 100%;
   }
+  :host .copyright-text {
+    display: none;
+  }
+  :host .copyright-last-part {
+    display: inline-block;
+  }
 }

package/dist/collection/components/footer/footer.js

@@ -8,7 +8,6 @@ import hasSlot from "../../utils/hasSlot";
  */
 export class TdsFooter {
     constructor() {
-        this.copyrightText = `Copyright © ${new Date().getFullYear()} Scania`;
         this.modeVariant = null;
     }
     render() {
@@ -16,9 +15,9 @@ export class TdsFooter {
         const usesStartSlot = hasSlot('start', this.host);
         const usesEndSlot = hasSlot('end', this.host);
         const usesCopyrightSlot = hasSlot('copyright', this.host);
-        return (h(Host, { key: 'f9a9a196e8f9b49545edbe7e37ef5c7e6108d032', class: {
+        return (h(Host, { key: 'cd82373a4dc49301758e5063451a5f5b0b4590e6', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null,
-            } }, h("footer", { key: 'b594e0548fb46ef6b5f829296eb616748b647440' }, usesTopSlot && h("slot", { key: '6127b1d29152c1023820d5220c7453cce76b9e5d', name: "top" }), h("div", { key: 'b0f918488b8cf27f19d8410ab5d05e39478dffd5', class: "footer-main" }, (usesStartSlot || usesEndSlot) && (h("div", { key: '63aae985dab88e5f31f4bd271d89dd5cf66e521c', class: "footer-main-top" }, usesStartSlot && h("slot", { key: '91c21420d33cb9dd1190324a73b095fdcc655174', name: "start" }), usesEndSlot && h("slot", { key: '672e6d1b2be9bf0d4223662e58d2f92d1e914fb2', name: "end" }))), h("div", { key: '28dd4db6c1ea0de52dfe3c0f0ea19541afdeecc6', class: "footer-main-bottom" }, h("small", { key: '0e760565515a6a57bf7948647bc0c526f70386f8', class: "copyright" }, usesCopyrightSlot ? h("slot", { name: "copyright" }) : this.copyrightText), h("div", { key: 'ef7647abe740819c88ed202412beb2b7cc0d18fb', class: "brand" }, h("p", { key: 'ab9bf46b2fca845a5d6c365fe3fd9f0b456ba819' }, "Scania")))))));
+            } }, h("footer", { key: '794665a563b642724b1c4698128413e776c08ef1' }, usesTopSlot && h("slot", { key: '5034c41b13c47a23f496cba2486ca359f8223911', name: "top" }), h("div", { key: '514699a7c5408c0d0101c79caa60eaca270663b6', class: "footer-main" }, (usesStartSlot || usesEndSlot) && (h("div", { key: 'a649a671452d6d70c5d88a17ad1fd9c6bf355ded', class: "footer-main-top" }, usesStartSlot && h("slot", { key: '6bd940362da1700eedc2a07945fb6599cd5f7561', name: "start" }), usesEndSlot && h("slot", { key: '2c5953c2fd29be00f06ed917011a2c5e1b1fc219', name: "end" }))), h("div", { key: '114ce1fc0d15d126cefadc5d28defef0725f30c8', class: "footer-main-bottom" }, h("small", { key: '60b3f78a11678b0f96ff2d5db3095d48b84c4253', class: "copyright" }, usesCopyrightSlot ? (h("slot", { name: "copyright" })) : (h("div", null, h("div", null, "\u00A9 ", h("span", { class: "copyright-text" }, "Copyright"), " ", new Date().getFullYear()), h("div", { class: "copyright-last-part" }, "All rights reserved")))), h("div", { key: '8600b61650cfc9723ad6103ed6b19c8f28b1db60', class: "brand" }, h("p", { key: '5ddb9a0595f67171e00e1d98c8665ce031787c8f' }, "Scania")))))));
     }
     static get is() { return "tds-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/core-header-item/core-header-item.css

@@ -1,7 +1,14 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
-  font: var(--tds-headline-07);
-  letter-spacing: var(--tds-headline-07-ls);
-  color: var(--tds-header-nav-item-color);
+  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);
 }
 :host .item {
   all: unset;

package/dist/collection/components/header/header-brand-symbol/header-brand-symbol.css

@@ -1,9 +1,10 @@
 :host tds-header-item {
   display: none;
+  width: var(--header-brand-item-width);
 }
 :host tds-header-item ::slotted(*) {
-  background-image: var(--tds-background-image-scania-symbol-svg-local), var(--tds-background-image-scania-symbol-svg);
-  background-size: 30px auto;
+  background-image: var(--header-logotype-local), var(--header-logotype-cdn);
+  background-size: var(--header-brand-logo-size) auto;
   background-position: center;
   background-repeat: no-repeat;
 }

package/dist/collection/components/header/header-dropdown/header-dropdown.css

@@ -19,24 +19,24 @@ body {
   overflow-y: auto;
   max-height: calc(100vh - var(--tds-header-height));
   box-shadow: var(--tds-nav-dropdown-menu-box);
-  background-color: var(--tds-header-app-launcher-menu-background);
+  background-color: var(--header-app-launcher-menu-background);
   border-top-right-radius: 0;
   border-top-left-radius: 0;
 }
 :host .menu:hover::-webkit-scrollbar-thumb {
   border: var(--tds-scrollbar-thumb-border-hover-width) solid transparent;
-  background: var(--tds-scrollbar-hover-thumb-color);
+  background: var(--color-foreground-icon-discrete);
   background-clip: padding-box;
 }
 :host .menu::-webkit-scrollbar {
   width: var(--tds-scrollbar-width);
 }
 :host .menu::-webkit-scrollbar-track {
-  background: var(--tds-scrollbar-track-color);
+  background: var(--color-background-layer-01);
 }
 :host .menu::-webkit-scrollbar-thumb {
   border-radius: 40px;
-  background: var(--tds-scrollbar-thumb-color);
+  background: var(--color-foreground-icon-discrete);
   border: var(--tds-scrollbar-thumb-border-width) solid transparent;
   background-clip: padding-box;
 }

package/dist/collection/components/header/header-dropdown-list-item/header-dropdown-list-item.css

@@ -1,3 +1,6 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
   display: block;
   box-sizing: border-box;
@@ -17,35 +20,38 @@
   height: 100%;
   padding: 0 24px;
   width: 100%;
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
-  background-color: var(--tds-nav-dropdown-item-background);
-  color: var(--tds-header-nav-item-dropdown-opened-color);
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  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);
 }
 :host .component ::slotted(a:hover) {
-  background-color: var(--tds-nav-item-background-hover);
+  background-color: var(--header-nav-item-background-hover);
   cursor: pointer;
 }
 :host .component ::slotted(a:focus-visible) {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
+  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
   outline-offset: 1px;
-  z-index: 1;
 }
 :host .component-selected {
-  background-color: var(--tds-nav-item-background-selected);
+  background-color: var(--header-nav-item-background-selected);
   padding-right: 4px;
   border-left-width: 4px;
   border-left-style: solid;
-  border-left-color: var(--tds-nav-item-border-color-active);
+  border-left-color: var(--header-nav-item-border-active);
 }
 :host .component-selected ::slotted(a),
 :host .component-selected ::slotted(button) {
-  background-color: var(--tds-nav-item-background-selected);
+  background-color: var(--header-nav-item-background-selected);
 }
 
 :host(:not(:last-child)) {
-  border-bottom: 1px solid var(--tds-nav-dropdown-item-border-color);
+  border-bottom: 1px solid var(--header-nav-dropdown-item-border);
 }
 
 :host([size=lg]) {
@@ -54,5 +60,5 @@
 :host([size=lg]) ::slotted(a),
 :host([size=lg]) ::slotted(button) {
   padding: 0 16px;
-  color: var(--tds-header-app-launcher-item-color);
+  color: var(--header-app-launcher-item);
 }

package/dist/collection/components/header/header-dropdown-list-user/header-dropdown-list-user.css

@@ -1,5 +1,8 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
-  background-color: var(--tds-header-avatar-item-background);
+  background-color: var(--header-avatar-item-background);
   display: flex;
   height: 84px;
 }
@@ -9,7 +12,7 @@
   padding: 0 16px;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--tds-nav-dropdown-item-border-color);
+  border-bottom: 1px solid var(--header-nav-dropdown-item-border);
 }
 :host img,
 :host slot[name=thumbnail]::slotted(*) {
@@ -22,11 +25,19 @@
   gap: 4px;
 }
 :host .user-content .header {
-  font: var(--tds-headline-07);
-  letter-spacing: var(--tds-headline-07-ls);
+  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);
 }
 :host .user-content .subheader {
-  font: var(--tds-headline-07);
-  letter-spacing: var(--tds-headline-07-ls);
-  color: var(--tds-header-avatar-item-color);
+  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-avatar-item);
 }

package/dist/collection/components/header/header-item/header-item.css

@@ -2,8 +2,8 @@
 :host ::slotted(a) {
   all: unset;
   box-sizing: border-box;
-  background-color: var(--tds-header-background);
-  border-right: 1px solid var(--tds-header--basic-element-border);
+  background-color: var(--header-background);
+  border-right: var(--header-item-border-right);
   width: 100%;
   height: 100%;
   cursor: pointer;
@@ -18,26 +18,31 @@
 }
 :host ::slotted(button:hover),
 :host ::slotted(a:hover) {
-  background-color: var(--tds-header-item-hover);
+  background-color: var(--header-item-hover);
 }
 :host ::slotted(button:focus-visible),
 :host ::slotted(a:focus-visible) {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--color-foreground-border-accent-focus);
+  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
   outline-offset: 1px;
-  z-index: 1;
+  z-index: 10;
+}
+:host ::slotted(button:active),
+:host ::slotted(a:active) {
+  padding-top: 2px;
+  padding-bottom: 2px;
+  background-color: var(--header-basic-element-background-selected);
+  border: 2px solid var(--header-nav-item-border-active);
 }
 :host .component-active ::slotted(button),
 :host .component-active ::slotted(a) {
-  background-color: var(--tds-header--basic-element-background-open);
-  color: var(--tds-header-nav-item-dropdown-opened-color);
-  border-color: var(--tds-header--basic-element-border-open);
+  background-color: var(--header-basic-element-background-pressed);
+  color: var(--header-nav-item-dropdown-opened);
 }
 :host .component-selected:not(.component-active) ::slotted(button),
 :host .component-selected:not(.component-active) ::slotted(a) {
-  background-color: var(--tds-header--basic-element-background-selected);
   padding-top: 4px;
   border-bottom-style: solid;
   border-bottom-width: 4px;
-  border-bottom-color: var(--tds-nav-item-border-color-active);
+  border-bottom-color: var(--header-nav-item-border-active);
 }

package/dist/collection/components/header/header-launcher/header-launcher.css

@@ -22,23 +22,23 @@ body {
   overflow-y: auto;
   max-height: calc(100vh - var(--tds-header-height));
   box-shadow: var(--tds-nav-dropdown-menu-box);
-  background-color: var(--tds-header-app-launcher-menu-background);
+  background-color: var(--header-app-launcher-menu-background);
   border-radius: 0;
 }
 :host .wrapper .menu:hover::-webkit-scrollbar-thumb {
   border: var(--tds-scrollbar-thumb-border-hover-width) solid transparent;
-  background: var(--tds-scrollbar-hover-thumb-color);
+  background: var(--color-foreground-icon-discrete);
   background-clip: padding-box;
 }
 :host .wrapper .menu::-webkit-scrollbar {
   width: var(--tds-scrollbar-width);
 }
 :host .wrapper .menu::-webkit-scrollbar-track {
-  background: var(--tds-scrollbar-track-color);
+  background: var(--color-background-layer-01);
 }
 :host .wrapper .menu::-webkit-scrollbar-thumb {
   border-radius: 40px;
-  background: var(--tds-scrollbar-thumb-color);
+  background: var(--color-foreground-icon-discrete);
   border: var(--tds-scrollbar-thumb-border-width) solid transparent;
   background-clip: padding-box;
 }

package/dist/collection/components/header/header-launcher-grid-item/header-launcher-grid-item.css

@@ -1,3 +1,6 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
   display: block;
   width: 96px;
@@ -18,8 +21,12 @@
   align-items: center;
   flex-direction: column;
   gap: 8px;
-  font: var(--tds-detail-05);
-  letter-spacing: var(--tds-detail-05-ls);
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  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);
   border-radius: 4px;
@@ -27,13 +34,12 @@
 }
 :host ::slotted(a:hover),
 :host ::slotted(button:hover) {
-  background-color: var(--tds-header-app-launcher-grid-hover-background);
+  background-color: var(--header-app-launcher-grid-hover-background);
   cursor: pointer;
 }
 :host ::slotted(a:focus-visible),
 :host ::slotted(button:focus-visible) {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
+  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
   outline-offset: 1px;
-  z-index: 1;
 }

package/dist/collection/components/header/header-launcher-grid-title/header-launcher-grid-title.css

@@ -1,14 +1,21 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 .tds-header-launcher-grid-title {
   all: unset;
   box-sizing: border-box;
-  font: var(--tds-detail-04);
-  letter-spacing: var(--tds-detail-04-ls);
-  color: var(--tds-header-app-launcher-grid-category-title-color);
+  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);
+  color: var(--header-app-launcher-grid-category-title);
   text-transform: uppercase;
   height: 48px;
   padding: 0 16px;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--tds-nav-dropdown-item-border-color);
+  border-bottom: 1px solid var(--header-nav-dropdown-item-border);
   margin: 0;
 }

package/dist/collection/components/header/header-launcher-list-item/header-launcher-list-item.css

@@ -1,4 +1,4 @@
 :host {
   display: block;
-  border-bottom: 1px solid var(--tds-nav-dropdown-item-border-color);
+  border-bottom: 1px solid var(--header-nav-dropdown-item-border);
 }

package/dist/collection/components/header/header-launcher-list-title/header-launcher-list-title.css

@@ -1,14 +1,21 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 .tds-header-launcher-list-title {
   all: unset;
   box-sizing: border-box;
-  font: var(--tds-detail-06);
-  letter-spacing: var(--tds-detail-06-ls);
-  color: var(--tds-header-app-launcher-category-title-color);
+  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(--header-app-launcher-category-title);
   text-transform: uppercase;
   height: 48px;
   padding: 0 16px;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--tds-nav-dropdown-item-border-color);
+  border-bottom: 1px solid var(--header-nav-dropdown-item-border);
   margin: 0;
 }

package/dist/collection/components/header/header-title/header-title.css

@@ -1,8 +1,9 @@
 h4 {
   box-sizing: border-box;
-  color: var(--tds-header-nav-item-color);
-  font-weight: normal;
-  font-family: var(--tds-font-family-headline);
+  color: var(--header-nav-item);
+  font-weight: var(--header-font-weight);
+  font-family: var(--header-font-family-headline);
+  text-transform: var(--header-text-transform);
   letter-spacing: normal;
   position: relative;
   white-space: nowrap;

package/dist/collection/components/header/header.css

@@ -23,7 +23,7 @@ html,
 tds-header {
   display: block;
   height: var(--tds-header-height);
-  background-color: var(--tds-header-background);
+  background-color: var(--header-background);
   width: 100%;
   z-index: 300;
 }
@@ -34,7 +34,7 @@ tds-header tds-header-dropdown-list-item button * {
 
 nav {
   box-sizing: border-box;
-  background-color: var(--tds-header-background);
+  background-color: var(--header-background);
   width: 100%;
   display: block;
 }
@@ -57,7 +57,7 @@ nav .tds-header-middle-spacer {
   display: block;
   flex-grow: 1;
   height: var(--tds-header-height);
-  border-right: 1px solid var(--tds-header--basic-element-border);
+  border-right: 1px solid var(--header-basic-element-border);
 }
 @media screen and (min-width: 992px) {
   nav tds-header-dropdown,
@@ -68,5 +68,5 @@ nav .tds-header-middle-spacer {
 nav tds-header-item:nth-child(3),
 nav tds-header-dropdown:nth-child(3) {
   /* Adds a left border to the button after the title, if any */
-  border-left: 1px solid var(--tds-header--basic-element-border);
+  border-left: 1px solid var(--header-basic-element-border);
 }