@scania/tegel 1.58.0 → 1.59.0-header-beta.1

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

@@ -21,9 +21,9 @@ export class TdsFooter {
         const usesCopyrightSlot = hasSlot('copyright', this.host);
         const brandName = this.getBrandName();
         const copyrightText = `Copyright © ${new Date().getFullYear()} ${brandName}`;
-        return (h(Host, { key: 'ac9e0121981c38b240ff4f96fbfc96fb59f51005', class: {
+        return (h(Host, { key: 'bb3cf6954333d1e4d72835a3a695cd4cdc1979ef', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null,
-            } }, h("footer", { key: 'd17bd41f9de0efd4449fba8fa48894a86f5a682b' }, usesTopSlot && h("slot", { key: '7f557c36ba1da44009f5be05ed353ec1d92ab88f', name: "top" }), h("div", { key: '5a10ae17a39a6eb707e036076a471f1dec135d32', class: "footer-main" }, (usesStartSlot || usesEndSlot) && (h("div", { key: 'c3142b6c2e5251a0ce9c49c66524c7d982e4a70c', class: "footer-main-top" }, usesStartSlot && h("slot", { key: '29923cff3f6a1bf0be4ae67fe190eadfb74e59b2', name: "start" }), usesEndSlot && h("slot", { key: '6c9216a5c9ad01c94dbc00448a3b7e778dabc705', name: "end" }))), h("div", { key: '5c827108dc49ecd4c1d86aaad9de4b7b390009ad', class: "footer-main-bottom" }, h("small", { key: 'e9ed752b108bc7d9dd52154baa9f8cd9ed2c0039', class: "copyright" }, usesCopyrightSlot ? h("slot", { name: "copyright" }) : copyrightText), h("div", { key: '7183d25ff8387a0a8691a02734d7748867960020', class: "brand" }, h("p", { key: '4d0848e1c716dd68c51e2499d16707b9c48b53ce' }, brandName)))))));
+            } }, h("footer", { key: 'fe35f844b8d6d3ea054484a166a773bd4385de9b' }, usesTopSlot && h("slot", { key: '252d9b9b78c66d0413bf7d28783945433eff0f90', name: "top" }), h("div", { key: 'b85968eb5d5f39deaec9f1f33b5895721c7e7e69', class: "footer-main" }, (usesStartSlot || usesEndSlot) && (h("div", { key: '85eacbe4aff483fe8f335fb70f6babad5d6f4bc3', class: "footer-main-top" }, usesStartSlot && h("slot", { key: '5d27988e508196e9e100e8c07c277fa11ecfb3bd', name: "start" }), usesEndSlot && h("slot", { key: '7301c1d8c2764e95d18a449b4d9ba7623b79d1b1', name: "end" }))), h("div", { key: 'e6b85a517f22f96c2616aa7f287d08d8476e981d', class: "footer-main-bottom" }, h("small", { key: '4fdca9bb9d4f87132c87215dbf87920119ff6ca6', class: "copyright" }, usesCopyrightSlot ? h("slot", { name: "copyright" }) : copyrightText), h("div", { key: '366bb82f1a297281aa98e18061a579067750190e', class: "brand" }, h("p", { key: '3ce3e391e021895e978f7f6d03decedba638e868' }, brandName)))))));
     }
     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,7 @@
 :host {
   font: var(--tds-headline-07);
   letter-spacing: var(--tds-headline-07-ls);
-  color: var(--tds-header-nav-item-color);
+  color: var(--tds-header-item-color);
 }
 :host .item {
   all: unset;

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

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class TdsCoreHeaderItem {
     render() {
-        return (h(Host, { key: '065394c82cbfb0b40ee971c5cebc52bcfe85b526' }, h("div", { key: '7028fa75d5be79c1036abdb5bd4f0f6d94718061', class: "item" }, h("slot", { key: '79a30696b9001f8c3f2304d0b73b5f4caa6a9a56' }))));
+        return (h(Host, { key: '7d276a5315a38c87d28b5e5ba1f16bcd7c74c0db' }, h("div", { key: '44c9ee22549fa323794f0607e7746f395d5f8348', class: "item" }, h("slot", { key: '0ec7c2d329877968187fa63153eee2668fa2d057' }))));
     }
     static get is() { return "tds-core-header-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,13 +1,16 @@
 :host tds-header-item {
   display: none;
 }
+:host tds-header-item {
+  width: var(--tds-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(--tds-header-logotype-local), var(--tds-header-logotype-cdn);
+  background-size: var(--tds-header-brand-logo-size) auto;
   background-position: center;
   background-repeat: no-repeat;
 }
-@media (min-width: 992px) {
+@media (width >= 992px) {
   :host tds-header-item {
     display: block;
   }

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

@@ -8,7 +8,7 @@ export class TdsHeaderBrandSymbol {
         if (!(aTag === null || aTag === void 0 ? void 0 : aTag.hasAttribute('aria-label'))) {
             console.warn('Tegel Header Brand Symbol component: missing aria-label attribute for <a> tag inside slot');
         }
-        return (h(Host, { key: 'fc99860c883e83bbf74918c166aef86ad4940b44' }, h("tds-header-item", { key: '064742d9efd8b8c313d70fee663be8455602def4' }, h("slot", { key: 'a7aabeccfd3a93e3dc29d2d0ee6bbefa2c94d236' }))));
+        return (h(Host, { key: 'ed6b8bfba56152cbb7051fb60acbca4cca27f6e7' }, h("tds-header-item", { key: 'a14750e9df11226763426bdf5dc9d1315de54ff8' }, h("slot", { key: 'f2a18a2f50c2e30e14596041aec9f21462f6bcef' }))));
     }
     static get is() { return "tds-header-brand-symbol"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,7 +19,7 @@ body {
   flex-direction: column;
   overflow-y: auto;
   max-height: calc(100vh - var(--tds-header-height));
-  box-shadow: var(--tds-nav-dropdown-menu-box);
+  box-shadow: var(--tds-header-dropdown-menu-box);
   background-color: var(--tds-header-app-launcher-menu-background);
   border-top-right-radius: 0;
   border-top-left-radius: 0;
@@ -60,6 +60,5 @@ body {
 }
 :host .state-open tds-header-item button:hover,
 :host .state-open tds-header-item a:hover {
-  background-color: var(--tds-nav-item-background-hover);
-  box-shadow: none;
+  background-color: var(--tds-header-item-background-hover);
 }

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

@@ -48,13 +48,13 @@ export class TdsHeaderDropdown {
         }
     }
     render() {
-        return (h(Host, { key: '1176c57c972add57be5c2529dfb6cb83d3bed22b' }, h("div", { key: '6ad3f10940083968fff1a4b9b01f66b1165329ba', class: {
+        return (h(Host, { key: '07a5f33cc48e8de33104d040e4b11d20fc21d833' }, h("div", { key: 'bf34bc17d9303efc3dcacfff22593395302a544f', class: {
                 'state-open': this.open,
-            } }, h("tds-header-item", { key: '5c8024b943d585a85fc6a1c2f42f9e574729d79e', class: "button", active: this.open, selected: this.selected }, h("button", { key: 'ed48b89c6eb04cf7f2685e2f69f7eea37822e8f9', ref: (el) => {
+            } }, h("tds-header-item", { key: 'ce9e05d3da8d04e38b6a595a789f8de1218fc35c', class: "button", active: this.open, selected: this.selected }, h("button", { key: '09805ba1a0d1e77384fc99d1fe9f5d557c8183a8', ref: (el) => {
                 this.buttonEl = el;
             }, "aria-expanded": `${this.open}`, "aria-controls": `launcher-${this.uuid}`, "aria-current": this.selected ? 'location' : 'false', onClick: () => {
                 this.toggleDropdown();
-            }, "aria-label": this.tdsAriaLabel }, h("slot", { key: '3a79e52d868cd2a12ee5a6c46c574b596e5c257f', name: "icon" }), this.label, h("slot", { key: '6490c20d77794e6bda911a28eb01bba6539a6946', name: "label" }), !this.noDropdownIcon && (h("tds-icon", { key: '4ccd9df2499f81a3790fd207686c9d763950ca18', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Dropdown icon" })))), this.buttonEl && (h("tds-popover-canvas", { key: '67a72bb46b5d87424dcd883e770a5f0a06d09edd', id: `tds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
+            }, "aria-label": this.tdsAriaLabel }, h("slot", { key: '889cdfa5614f97ad80721f0f8559400751c7a784', name: "icon" }), this.label, h("slot", { key: '5b0a7df7f0031279c4faf3ab9bd6062ef4b32099', name: "label" }), !this.noDropdownIcon && (h("tds-icon", { key: '19ccecc579b846372fbd7572c9595ab573ac4d27', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Dropdown icon" })))), this.buttonEl && (h("tds-popover-canvas", { key: 'c49cae294b06fdcfb57b4d2702a7abac53a45f39', id: `tds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
                 {
                     name: 'flip',
                     options: {

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

@@ -6,7 +6,7 @@
   margin: 0;
   list-style: none;
   border-radius: unset;
-  background-color: var(--tds-header-app-launcher-menu-bg);
+  background-color: var(--tds-header-dropdown-background);
 }
 @media all and (max-width: 384px) {
   :host {

package/dist/collection/components/header/header-dropdown-list/header-dropdown-list.js

@@ -74,7 +74,7 @@ export class TdsHeaderDropdownList {
             'role': 'list',
             'aria-labelledby': (_a = this.headingElement) === null || _a === void 0 ? void 0 : _a.id,
         };
-        return (h(Host, Object.assign({ key: '87736a915ab274f1fcd30e6eb3ac2b594c323ba9' }, attributes), h("slot", { key: '61a2332a3da99fa2b0fa51a54547e9d5b66fa804' })));
+        return (h(Host, Object.assign({ key: 'e21067b3bfad5ad96a7b582e0c0fd04c412674f8' }, attributes), h("slot", { key: '7524f7fac3435331c3a8b828958370395e5079de' })));
     }
     static get is() { return "tds-header-dropdown-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,11 +19,11 @@
   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);
+  background-color: var(--tds-header-dropdown-item-background);
+  color: var(--tds-header-dropdown-item-color);
 }
 :host .component ::slotted(a:hover) {
-  background-color: var(--tds-nav-item-background-hover);
+  background-color: var(--tds-header-dropdown-item-background-hover);
   cursor: pointer;
 }
 :host .component ::slotted(a:focus-visible) {
@@ -32,22 +32,20 @@
   outline-offset: -2px;
 }
 :host .component-selected {
-  background-color: var(--tds-nav-item-background-selected);
+  background-color: var(--tds-header-dropdown-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: 4px solid var(--tds-header-dropdown-item-border-color-selected);
 }
 :host .component-selected ::slotted(a),
 :host .component-selected ::slotted(button) {
-  background-color: var(--tds-nav-item-background-selected);
+  background-color: var(--tds-header-dropdown-item-background-selected);
 }
 :host .component-selected:focus-within {
   border-left: none;
 }
 
 :host(:not(:last-child)) {
-  border-bottom: 1px solid var(--tds-nav-dropdown-item-border-color);
+  border-bottom: 1px solid var(--tds-header-dropdown-item-border-color);
 }
 
 :host([size=lg]) {

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

@@ -10,10 +10,10 @@ export class TdsHeaderDropdownListItem {
         this.size = 'md';
     }
     render() {
-        return (h(Host, { key: '4912bf638b28faf67530146becb90977fa3eff8c' }, h("div", { key: '6c30529e045b7568a7409505828bf04c94830b0c', class: {
+        return (h(Host, { key: '19790b4fe30796b09334fd1c6e81412b56e87e10' }, h("div", { key: '0d7c4728b5e80244fc8cd4047f8f27cea6317348', class: {
                 'component': true,
                 'component-selected': this.selected,
-            } }, h("slot", { key: '34935ba9bd6807d2c7703d5320b837e4dd837240' }))));
+            } }, h("slot", { key: 'd62bc8b39511d3315267b8b624ac22329a4cb10b' }))));
     }
     static get is() { return "tds-header-dropdown-list-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,16 +4,16 @@
   height: 84px;
 }
 :host .user-box {
-  gap: 16px;
+  gap: var(--tds-header-avatar-item-padding);
   width: 100%;
-  padding: 0 16px;
+  padding: 0 var(--tds-header-avatar-item-padding);
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--tds-nav-dropdown-item-border-color);
+  border-bottom: 1px solid var(--tds-header-dropdown-item-border-color);
 }
 :host img,
 :host slot[name=thumbnail]::slotted(*) {
-  width: 34px;
+  width: var(--tds-header-avatar-item-size);
   border-radius: 100%;
 }
 :host .user-content {

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

@@ -5,7 +5,7 @@ import { h, Host } from "@stencil/core";
  */
 export class TdsHeaderDropdownListLgUser {
     render() {
-        return (h(Host, { key: '4a9b8a5924f026c20408e7cc32dc98ee9fd64ad1', role: "listitem" }, h("div", { key: '3774339f0ca00bc041c51ad966da271dbe38fbb4', class: "user-box" }, this.imgUrl && h("img", { key: 'f37f319f602d7418229f56f112d57e0e1346d043', src: this.imgUrl, alt: this.imgAlt }), h("slot", { key: 'a45bc8a008a0be4596cbcf0937c56380ea99bb80', name: "thumbanil" }), h("div", { key: 'a1f5e157d1ac7cee13abf1a85422950988f3b8ac', class: "user-content" }, h("div", { key: '6e2106c0868094ac54c0e2a54de07ff43dc9f979', class: "header" }, this.header, h("slot", { key: '440311184e59aff2fc3425a1779d6b04de98fdd8', name: "header" })), h("div", { key: '85c3966e778010328e6d137573a83245c1077ea8', class: "subheader" }, this.subheader, h("slot", { key: 'bbd9b87dfa675761e0bc6005431e1cb1e8867013', name: "subheader" }))))));
+        return (h(Host, { key: 'e2c427428c2da9d8af6818a94e01a56f9836308a', role: "listitem" }, h("div", { key: '590e7b4d1ee33b96d9d73d1b9444cbdb34d5f6a2', class: "user-box" }, this.imgUrl && h("img", { key: 'd537fb083c80e5ef8331f6d1d09daf717f52adab', src: this.imgUrl, alt: this.imgAlt }), h("slot", { key: '4f130bbebe72b5b9b051ca47a19c443f7db94b9c', name: "thumbanil" }), h("div", { key: 'cc4307735c599a57d99d5bd7eb81f11e0e53b875', class: "user-content" }, h("div", { key: '105a4112b66410d15254ea873d44bd1ea54a7ed1', class: "header" }, this.header, h("slot", { key: '1d54caa5d0fc812742a92aee87d47ab2d74f357e', name: "header" })), h("div", { key: '13b0df9618b2e294f6ca785542a85f2035dfa4ed', class: "subheader" }, this.subheader, h("slot", { key: '98632491ca20b075a2fdad77ffa58f3b8dedb469', name: "subheader" }))))));
     }
     static get is() { return "tds-header-dropdown-list-user"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header-hamburger/header-hamburger.js

@@ -3,7 +3,7 @@ import inheritAriaAttributes from "../../../utils/inheritAriaAttributes";
 export class TdsHeaderHamburger {
     render() {
         const inheritedButtonProps = Object.assign({}, inheritAriaAttributes(this.host));
-        return (h(Host, { key: 'ae06ee98e53076108ce5d994fea278cfcf7c866f' }, h("tds-header-item", { key: 'cfcc247e196267d28be0754334f9ad0970aad461' }, h("button", Object.assign({ key: '5daf590949aaa29674b59438452286c88f1bd9e5' }, inheritedButtonProps, { "aria-label": this.tdsAriaLabel }), h("tds-icon", { key: '4f9f010a9a1b79278887822e2d3c025844f6a8c3', class: "icon", name: "burger", size: "20px" })))));
+        return (h(Host, { key: '178a53546dd18ffa3956c8a160d2eae139ed5009' }, h("tds-header-item", { key: '1de91285a9a004c2c0330a926132875b333d7fd4' }, h("button", Object.assign({ key: '6d487e1dd84c41342a416805048f14c9dc98ec02' }, inheritedButtonProps, { "aria-label": this.tdsAriaLabel }), h("tds-icon", { key: '9636dd72caea7424b9067eaf616f1c7fbe0ef4cb', class: "icon", name: "burger", size: "20px" })))));
     }
     static get is() { return "tds-header-hamburger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,9 +1,16 @@
+/* Typography Usage mixins */
 :host ::slotted(button),
 :host ::slotted(a) {
   all: unset;
   box-sizing: border-box;
+  font-family: var(--type-system-title-01-font-family);
+  font-size: calc(var(--type-system-title-01-font-size) * 1px);
+  line-height: calc(var(--type-system-title-01-line-height) * 1px);
+  font-weight: var(--type-system-title-01-font-weight);
+  letter-spacing: calc(var(--type-system-title-01-letter-spacing) * 1px);
+  color: var(--tds-header-item-color);
   background-color: var(--tds-header-background);
-  border-right: 1px solid var(--tds-header--basic-element-border);
+  border-right: 1px solid var(--tds-header-item-border);
   width: 100%;
   height: 100%;
   cursor: pointer;
@@ -19,12 +26,10 @@
 :host ::slotted(button:hover),
 :host ::slotted(a:hover) {
   background-color: var(--tds-header-item-hover);
-  box-shadow: inset 0 -2px 0 0 var(--tds-header-item-border-hover);
 }
 :host ::slotted(button:active),
 :host ::slotted(a:active) {
   background-color: var(--tds-header-item-active);
-  box-shadow: inset 0 -2px 0 0 var(--tds-header-item-border-active);
 }
 :host ::slotted(button:focus-visible),
 :host ::slotted(a:focus-visible) {
@@ -36,9 +41,14 @@
 }
 :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(--tds-header-item-background-open);
+  color: var(--tds-header-item-open-color);
+  border-color: var(--tds-header-item-border-open);
+  box-shadow: inset 0 -4px 0 0 var(--tds-header-item-border-hover);
+}
+:host .component-active ::slotted(button:hover),
+:host .component-active ::slotted(a:hover) {
+  background-color: var(--tds-header-dropdown-item-background-hover);
 }
 :host .component-selected:not(.component-active) ::slotted(button),
 :host .component-selected:not(.component-active) ::slotted(a) {

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

@@ -81,10 +81,10 @@ export class TdsHeaderItem {
         }
     }
     render() {
-        return (h(Host, { key: '286237f750f53f924d8667cc7d84fe8d68e483cd' }, h("tds-core-header-item", { key: 'f43048e3d2deb7bfc05e99a0834b8d85fb576cec', class: {
+        return (h(Host, { key: '72263f1d62c9fcbbd243259ff2e74271886d27f3' }, h("tds-core-header-item", { key: 'd80b949b58f5d876b64b8bb2338cf4ebcf733a94', class: {
                 'component-active': this.active,
                 'component-selected': this.selected,
-            } }, h("slot", { key: '010bcd724fcfa67974248af3fdde12fa2102f099' }))));
+            } }, h("slot", { key: 'bd98965490e993ea08fa0fc2ceebe5539889ef34' }))));
     }
     static get is() { return "tds-header-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -22,7 +22,7 @@ body {
   flex-direction: column;
   overflow-y: auto;
   max-height: calc(100vh - var(--tds-header-height));
-  box-shadow: var(--tds-nav-dropdown-menu-box);
+  box-shadow: var(--tds-header-dropdown-menu-box);
   background-color: var(--tds-header-app-launcher-menu-background);
   border-radius: 0;
 }

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

@@ -50,11 +50,11 @@ export class TdsHeaderLauncher {
             }, 'ref': (el) => {
                 this.buttonEl = el;
             } });
-        return (h(Host, { key: '687811b90323d71d1b2fcdb95a0c5a1cc798ab63' }, h("div", { key: 'ff389690f36fa41b4f09911720a5b842463880ea', class: {
+        return (h(Host, { key: 'a2ad819f2acda892b6e45c62d43128ac8c2e707c' }, h("div", { key: 'd9831f4e21f8a75069f6719e6f282ec8728368d3', class: {
                 'wrapper': true,
                 'state-open': this.open,
                 'state-list-type-menu': this.hasListTypeMenu,
-            } }, h("tds-header-launcher-button", Object.assign({ key: '5ad9190ea862179eb74088a9597cbac0f2cd76ee' }, buttonAttributes, { "tds-aria-label": this.tdsAriaLabel })), this.buttonEl && (h("tds-popover-canvas", { key: 'c22a1514bcc73d508100cabff07422009f775ffa', id: `tds-launcher-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
+            } }, h("tds-header-launcher-button", Object.assign({ key: '19abe36290e7a2fd8fc15b4aea5afeac9c957f36' }, buttonAttributes, { "tds-aria-label": this.tdsAriaLabel })), this.buttonEl && (h("tds-popover-canvas", { key: 'f39cf5999c47ea1c6fc9371763ba08fd01c2b296', id: `tds-launcher-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
                 {
                     name: 'flip',
                     options: {

package/dist/collection/components/header/header-launcher-button/header-launcher-button.js

@@ -9,7 +9,7 @@ export class TdsHeaderLauncherButton {
     render() {
         this.ariaAttributes = Object.assign(Object.assign({}, this.ariaAttributes), inheritAriaAttributes(this.host));
         const buttonProps = Object.assign({}, this.ariaAttributes);
-        return (h(Host, { key: 'abed3be3bbeecc3a510cfa75a0dae9ed06196d54' }, h("tds-header-item", { key: '39eee800f052f252a0345243eaa637cf7b41ea3d', active: this.active }, h("button", Object.assign({ key: '8d49dfbe22856a2c56d0ae3949f7fb9e36804bc1' }, buttonProps, { "aria-label": this.tdsAriaLabel }), h("tds-icon", { key: '028ffd59098f06fee68a74c670727c3664b711b6', class: "icon", name: "bento", size: "20px", "svg-title": this.tdsAriaLabel })))));
+        return (h(Host, { key: 'c5ccce94f4e20551f6a9e81c7bef89435252216e' }, h("tds-header-item", { key: 'f8e47ffaff504eb8544ffe3b995006fcdc66b4c5', active: this.active }, h("button", Object.assign({ key: '74dff07caf204bffd577f13641ca01c1d52a3d7a' }, buttonProps, { "aria-label": this.tdsAriaLabel }), h("tds-icon", { key: '27461f8d04863c17c1cc78d450b5f2edd01446ca', class: "icon", name: "bento", size: "20px", "svg-title": this.tdsAriaLabel })))));
     }
     static get is() { return "tds-header-launcher-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header-launcher-grid/header-launcher-grid.js

@@ -25,7 +25,7 @@ export class TdsHeaderLauncherGrid {
             'role': 'list',
             'aria-labelledby': (_a = this.headingElement) === null || _a === void 0 ? void 0 : _a.id,
         };
-        return (h(Host, { key: '63be73b3bef81a93dc689754e6f1ecb28d36a29b' }, h("div", Object.assign({ key: 'a5695a2b67adbc9c12165a7440091bd4cc429205' }, listAttributes), h("slot", { key: '626a95ca4adcde69296221782d35f5401d41b7aa' }))));
+        return (h(Host, { key: '1e0acaabe6332c250d83f225f4e789bddfd9460e' }, h("div", Object.assign({ key: 'f28d54a429125d7729ff1dd7c05d4485699bdfbf' }, listAttributes), h("slot", { key: 'f4d62131c56ce61935af17d698919cfea268b728' }))));
     }
     static get is() { return "tds-header-launcher-grid"; }
     static get originalStyleUrls() {

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

@@ -7,7 +7,7 @@
 :host ::slotted(button) {
   all: unset;
   box-sizing: border-box;
-  border-right: 1px solid var(--tds-nav-item-border-color);
+  border-right: 1px solid var(--tds-header-dropdown-item-border-color);
   width: 100%;
   height: 100%;
   border: none;
@@ -20,7 +20,7 @@
   gap: 8px;
   font: var(--tds-detail-05);
   letter-spacing: var(--tds-detail-05-ls);
-  background-color: var(--tds-header-app-launcher-menu-bg);
+  background-color: var(--tds-header-app-launcher-menu-background);
   color: var(--tds-header-app-launcher-grid-color);
   border-radius: 4px;
   transition: background-color 150ms ease;

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

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class TdsHeaderLauncherGridItem {
     render() {
-        return (h(Host, { key: 'c7faa27ec16322e23b32c2f48d6452acba9f34df', role: "listitem" }, h("slot", { key: 'dc1fff1b9c536df2d88b5e92a83634d1e3bca384' })));
+        return (h(Host, { key: '8401dcbe8027523446729e7a20468558fe1dc30e', role: "listitem" }, h("slot", { key: '7ff767c1134e1997302caee22ec3bb6a584b7657' })));
     }
     static get is() { return "tds-header-launcher-grid-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,14 +1,14 @@
 .tds-header-launcher-grid-title {
   all: unset;
   box-sizing: border-box;
-  font: var(--tds-detail-04);
-  letter-spacing: var(--tds-detail-04-ls);
+  font: var(--tds-detail-06);
+  letter-spacing: var(--tds-detail-06-ls);
   color: var(--tds-header-app-launcher-grid-category-title-color);
   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(--tds-header-dropdown-item-border-color);
   margin: 0;
 }

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

@@ -8,7 +8,7 @@ export class TdsHeaderLauncherGridTitle {
         this.uuid = generateUniqueId();
     }
     render() {
-        return (h(Host, { key: '080260b232b8c42511a4f78c5c38db166d4febe3' }, h("h3", { key: 'b147d026dfb9ac70f4abc7935b469cba32dbcbaa', class: "tds-header-launcher-grid-title", id: `tds-header-launcher-grid-title-${this.uuid}` }, h("slot", { key: '0df3a062aa38fa73e875ae8c178c9b52b4b6d063' }))));
+        return (h(Host, { key: '9c4d34bdb39f897148aa592b08068d01339fa470' }, h("h3", { key: '632cf006f9bba4fbd297baddaf2cd22bd8cd01d7', class: "tds-header-launcher-grid-title", id: `tds-header-launcher-grid-title-${this.uuid}` }, h("slot", { key: '4eccacaeda37002d80535ba9702e86f5b15343b1' }))));
     }
     static get is() { return "tds-header-launcher-grid-title"; }
     static get originalStyleUrls() {

package/dist/collection/components/header/header-launcher-list/header-launcher-list.js

@@ -8,7 +8,7 @@ export class TdsHeaderLauncherList {
         this.uuid = generateUniqueId();
     }
     render() {
-        return (h(Host, { key: 'eca4ad0a5442d8f9a4fa6f2f2d8edeb582b036e1' }, h("tds-header-dropdown-list", { key: '99b5360adb94d53bcfada6dae88daa3b5570ac5d', size: "lg" }, h("slot", { key: 'd2ddc4f12789ceff5b74ab8dbca354603358d03b' }))));
+        return (h(Host, { key: '8579cab399825ea35430ea1712380e945175be2b' }, h("tds-header-dropdown-list", { key: 'e9f49767344431b298f4937eae6793a5a1b4adbc', size: "lg" }, h("slot", { key: 'b147f482c4d6d868880f8fd349f7ad49acf60d70' }))));
     }
     static get is() { return "tds-header-launcher-list"; }
 }

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(--tds-header-dropdown-item-border-color);
 }

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

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class TdsHeaderLauncherListItem {
     render() {
-        return (h(Host, { key: '497d9c1aaf805a5bba06d860f02002eeead6032c' }, h("tds-header-dropdown-list-item", { key: '74b6b75f5c7759bc226ba7150f9fb5ea23bcfc66', size: "lg" }, h("slot", { key: '00d8917ab3c70f6d0ca27231572c4cdfa47cf07e' }))));
+        return (h(Host, { key: '2e240e8593d50efd91aac58fb247165b0777cde9' }, h("tds-header-dropdown-list-item", { key: '67d7542329f469f10ebf4fe53686892b6e79d203', size: "lg" }, h("slot", { key: 'bab33af901a8a557fd6598a0f155c5d1b4da74f0' }))));
     }
     static get is() { return "tds-header-launcher-list-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,6 +9,6 @@
   padding: 0 16px;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--tds-nav-dropdown-item-border-color);
+  border-bottom: 1px solid var(--tds-header-dropdown-item-border-color);
   margin: 0;
 }

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

@@ -8,7 +8,7 @@ export class TdsHeaderLauncherListTitle {
         this.uuid = generateUniqueId();
     }
     render() {
-        return (h(Host, { key: 'd2480baadcaceab27fb6598d2c781bc74e75df75' }, h("h3", { key: 'e73adadc71723ad00b5f1f138a2fd5d73fdcf8af', class: "tds-header-launcher-list-title", id: `tds-header-launcher-${this.uuid}` }, h("slot", { key: '338bd4e60f844e7c399bd4a8d4b3325fbf6f8d3e' }))));
+        return (h(Host, { key: '7ee07c3a5f983e22d6e9df4b8553fc78155d3da6' }, h("h3", { key: '19c621911c3b46a7db33a33b0a5ed9efe79df36c', class: "tds-header-launcher-list-title", id: `tds-header-launcher-${this.uuid}` }, h("slot", { key: '99450d6b7c93755b433736e0b4414fc8c4995df1' }))));
     }
     static get is() { return "tds-header-launcher-list-title"; }
     static get originalStyleUrls() {

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

@@ -1,10 +1,15 @@
+/* Typography Usage mixins */
 h4 {
+  font-family: var(--headline-06-font-family);
+  font-size: var(--headline-06-font-size);
+  line-height: var(--headline-06-line-height);
+  font-weight: var(--headline-06-font-weight);
+  letter-spacing: var(--headline-06-letter-spacing);
+  text-transform: var(--headline-06-text-transform);
   box-sizing: border-box;
-  color: var(--tds-header-nav-item-color);
-  font-size: 14px;
-  font-weight: normal;
-  font-family: var(--tds-font-family-headline);
-  letter-spacing: normal;
+  color: var(--tds-header-item-color);
+  font-family: var(--tds-header-title-font-family);
+  font-weight: var(--tds-header-title-font-weight);
   position: relative;
   white-space: nowrap;
   text-overflow: ellipsis;

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

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class TdsHeaderTitle {
     render() {
-        return (h("h4", { key: '0a7c5d1ce63bdb1454c76edbd4bfc4bc1cf10b55' }, h("slot", { key: 'ac27c2a4ce21972a17fba690d79bcd3d731e196b' })));
+        return (h("h4", { key: '8c7a1b22f32bec884f8b99cdff99f93d48b51f9b' }, h("slot", { key: 'e6b5f9f5cb5f0573cb02e06c68cbe5b9ec0d17d6' })));
     }
     static get is() { return "tds-header-title"; }
     static get encapsulation() { return "shadow"; }

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

@@ -14,13 +14,6 @@ body {
   scrollbar-width: thin;
 }
 
-html,
-:root {
-  --tds-nav-dropdown-menu-box: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);
-  --tds-nav-dropdown-item-border-radius: 0 0 4px 4px;
-  --tds-font-family-headline: "Scania Sans Headline", arial, helvetica, sans-serif;
-}
-
 tds-header {
   display: block;
   height: var(--tds-header-height);
@@ -58,7 +51,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(--tds-header-item-border);
 }
 @media screen and (min-width: 992px) {
   nav tds-header-dropdown,
@@ -69,5 +62,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(--tds-header-item-border);
 }

package/dist/collection/components/header/header.js

@@ -34,7 +34,7 @@ export class TdsHeader {
     }
     render() {
         const navAttributes = Object.assign({}, inheritAriaAttributes(this.host));
-        return (h(Host, { key: '181fbfe75463969a86384760288b62a2c67ce83e' }, h("slot", { key: '73d7e5f465cdb8d208bb227fdc0db5411eb2c32a', name: "hamburger" }), h("slot", { key: '62844699d097f33eb4286b7a564c42bba820323a', name: "title" }), h("nav", Object.assign({ key: '30676babd29ca880b1f21d1fce28ab124e1ae90b' }, navAttributes), h("ul", { key: '864fca4598d6611c6d895a1550301b21073eeb76', class: "tds-header-component-list" }, h("slot", { key: '4acca7b1d28b79557f59395cc955ee74531b6828' }), h("li", { key: '0917aa2f981f5951b3b688e6eaa93c7a129cb366', class: "tds-header-middle-spacer" }), h("slot", { key: 'c1b1b52718d6180a1b77f0f04498f7f81528ac0d', name: "end" })))));
+        return (h(Host, { key: '0f211ade1fcbb2f194e759d78a2eae1564e55d95' }, h("slot", { key: '32863f0a0d020cd6f62fe31d0ff55750ccfca3e8', name: "hamburger" }), h("slot", { key: '18950498290f6653daa089f44352cd84cb470b77', name: "title" }), h("nav", Object.assign({ key: 'bafeecb5eeaddb06ea5f30c132fbad6b6a5b500b' }, navAttributes), h("ul", { key: '85610c3c2867375515c14213648263ca222ff249', class: "tds-header-component-list" }, h("slot", { key: '573dd12bf968ffb36973016bb7d05cc6c5ce27a9' }), h("li", { key: 'd1bc2954060e5a39fa423e2457ddb3a1ef857cde', class: "tds-header-middle-spacer" }), h("slot", { key: 'aa6f1bae16d32f68edbe99396970687cdab225f7', name: "end" })))));
     }
     static get is() { return "tds-header"; }
     static get originalStyleUrls() {

package/dist/collection/components/icon/icon.js

@@ -85,7 +85,7 @@ export class Icon {
         // so the two coexist: supporting engines use (1) and never populate (2);
         // others fall back to (2). See SUPPORTS_CSS_D above.
         const pathStyle = { d: `var(--tds-icon-${this.name}-d)` };
-        return (h(Host, { key: 'fcceb06dd3f214b311fb7709fae9f46b82e4d9d1' }, h("svg", { key: '17b35536c6aa4b8c3b8c73644be8e0c3cb7f9090', "aria-hidden": this.tdsAriaHidden, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "aria-labelledby": this.svgTitle ? `title-${this.name}` : undefined, "aria-describedby": this.svgDescription ? `desc-${this.name}` : undefined, role: "img", style: { fontSize: this.size }, height: this.size, width: this.size }, this.svgTitle && h("title", { key: '32ddc0b145521f4ed0169da2d79d32cd8b4d3201', id: `title-${this.name}` }, this.svgTitle), this.svgDescription && h("desc", { key: '4e5ae53d642cb7761c3dd00a161ff489028cef13', id: `desc-${this.name}` }, this.svgDescription), h("path", { key: '4b7595d42111a4dce6e16e1d3c3347094df16add', fill: "currentColor", style: pathStyle, d: this.pathD }))));
+        return (h(Host, { key: 'e35f375e2a9dacb26ab4406116953f163d411600' }, h("svg", { key: '82e1d341239a7b0e61dc8bcac8326e70dbb7a65e', "aria-hidden": this.tdsAriaHidden, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "aria-labelledby": this.svgTitle ? `title-${this.name}` : undefined, "aria-describedby": this.svgDescription ? `desc-${this.name}` : undefined, role: "img", style: { fontSize: this.size }, height: this.size, width: this.size }, this.svgTitle && h("title", { key: '84a475b44e67167c6eb543e9358634441d5d7579', id: `title-${this.name}` }, this.svgTitle), this.svgDescription && h("desc", { key: '684dee7d851b3e24324fd606e3ea13d7117376cd', id: `desc-${this.name}` }, this.svgDescription), h("path", { key: 'a5e6b72072085cad5076d864d2de3b8ceb540ef5', fill: "currentColor", style: pathStyle, d: this.pathD }))));
     }
     static get is() { return "tds-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/link/link.js

@@ -29,11 +29,11 @@ export class TdsLink {
         }
     }
     render() {
-        return (h("span", { key: '7fc71860358da34d0bcf7db534263ceb95a0a34c', class: {
+        return (h("span", { key: '68a661283c68f38a55ce271fce253b31228e5eea', class: {
                 'disabled': this.disabled,
                 'no-underline': !this.underline,
                 'standalone': this.standalone,
-            } }, h("slot", { key: '481148d319d7dc0447b0568f1bc97ea0f17560b0' })));
+            } }, h("slot", { key: '0510da5634ce6f574226a37c91c997ec0cc6e539' })));
     }
     static get is() { return "tds-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/message/message.js

@@ -40,11 +40,11 @@ export class TdsMessage {
     render() {
         const headerId = this.header ? `tds-message-header-${generateUniqueId()}` : undefined;
         const contentId = !this.minimal ? `tds-message-content-${generateUniqueId()}` : undefined;
-        return (h(Host, { key: 'c79d924d806e8a2b19f706795d4a08074a9fce95', role: this.tdsAlertDialog, "aria-describedby": contentId, "aria-label": this.getAriaLabel(), class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: '17a525e4fb1991d668733b28a4e2916b77151908', class: {
+        return (h(Host, { key: 'e8589077316e6606bf84d0e5771b74d67d1132e1', role: this.tdsAlertDialog, "aria-describedby": contentId, "aria-label": this.getAriaLabel(), class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: '014492d9c6a87c0fa09302bea461752a339176f5', class: {
                 wrapper: true,
                 [this.variant]: true,
                 minimal: this.minimal,
-            } }, !this.noIcon && (h("tds-icon", { key: 'bc440727660747269df18977ead69b2aa25cc40b', "aria-hidden": "true", "aria-label": `${this.variant}`, svgTitle: `${this.variant}`, name: this.getIconName(), size: "20px" })), h("div", { key: '26c5ab6232b2c438c4dd04b718b4ede804495029', class: `content` }, this.header && (h("div", { key: '10cb36b42f743e7d8b0f97e66e19455f573a1159', class: "header", id: headerId }, this.header)), !this.minimal && (h("div", { key: '0d9ff535f8afad68604eb3e20f360a5f321aebc7', class: "extended-message", id: contentId }, h("slot", { key: '35a5db41848cdfff0adbd4637ea29a0360c8e5d7' })))))));
+            } }, !this.noIcon && (h("tds-icon", { key: '6add6739ff920a4e56a3162b58e7323d85dc5a91', "aria-hidden": "true", "aria-label": `${this.variant}`, svgTitle: `${this.variant}`, name: this.getIconName(), size: "20px" })), h("div", { key: '187eec91ce88fff4b5b0b4e5e7c5ab988da1fb78', class: `content` }, this.header && (h("div", { key: '9b30a6b669dc4880cb1e92a4907a0c2b4742c35c', class: "header", id: headerId }, this.header)), !this.minimal && (h("div", { key: '718329dbaf3297cc480178b646f3a25bd245ad11', class: "extended-message", id: contentId }, h("slot", { key: 'cfe343b2332c2f51f48bdabc708f83ffed23a0e4' })))))));
     }
     static get is() { return "tds-message"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/modal.js

@@ -254,10 +254,10 @@ export class TdsModal {
         const usesHeaderSlot = hasSlot('header', this.host);
         const usesActionsSlot = hasSlot('actions', this.host);
         const hasLabel = this.header || usesHeaderSlot;
-        return (h(Host, { key: '20741ea474c8b88e25a59068cd10100261d63451', class: {
+        return (h(Host, { key: 'df877eba4d1e541c39d46c9024845ea718868342', class: {
                 show: this.isShown,
                 hide: !this.isShown,
-            }, onClick: (event) => this.handleOverlayClick(event) }, h("div", { key: '2c6c1c5320497a3ed90bbc46a9d9ca3ed914d4e6', class: "tds-modal-backdrop" }), h("div", { key: '659497b7a21b93ba848057156b1a3067f5d78794', role: this.tdsAlertDialog, "aria-modal": "true", "aria-describedby": this.bodyId, "aria-labelledby": hasLabel ? this.headerId : undefined, class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}`, tabindex: "-1" }, h("div", { key: 'd037cdebcd50b2f7c3f55b5df8e0ed68a7be012d', class: "header" }, this.header && (h("h1", { key: '8afef0fc7e08b2539ad52d6ca5ca642c453a62d9', id: this.headerId, class: "header-text" }, this.header)), usesHeaderSlot && h("slot", { key: '61452661a701b7bf009ffc742a06e67153c49b5d', name: "header" }), this.closable && (h("button", { key: 'e463fc6163130169a07e4a6862c54f77b71c708e', class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, h("tds-icon", { key: '7d2a6bbba2250ff93a22e3df4fcffc85d4393d9d', name: "cross", size: "20px" })))), h("div", { key: 'a20383b91b69484dbe33b7359fd0ac54b4f6e542', id: this.bodyId, class: "body" }, h("slot", { key: '0372c76d89764c5dac0facca7c70599b982447de', name: "body" })), usesActionsSlot && h("slot", { key: 'e1aff202176a07dff1d70e9cca4ba93d4de9ed73', name: "actions" }))));
+            }, onClick: (event) => this.handleOverlayClick(event) }, h("div", { key: '332e7a5bb7d4d9722e8cf30138f32530c7a9f47b', class: "tds-modal-backdrop" }), h("div", { key: '365c2aad4c91a8e1d7ca8296b1471baaa01fa57b', role: this.tdsAlertDialog, "aria-modal": "true", "aria-describedby": this.bodyId, "aria-labelledby": hasLabel ? this.headerId : undefined, class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}`, tabindex: "-1" }, h("div", { key: 'b4f0c48ffe1892216764b74d49f6b92e4708c602', class: "header" }, this.header && (h("h1", { key: '65c303322e90bcff28e0e073c9a68db992a57d44', id: this.headerId, class: "header-text" }, this.header)), usesHeaderSlot && h("slot", { key: '1124086125abbf9fa6aec099077cced6be7429de', name: "header" }), this.closable && (h("button", { key: '7747db80e0fe2448ff73af60d46da6bb8f7439ce', class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, h("tds-icon", { key: 'bc780ffdf997fd08176b1b8836e59d901049ce9a', name: "cross", size: "20px" })))), h("div", { key: 'f83853888b04f28cfcb27ace6313385f9902a32d', id: this.bodyId, class: "body" }, h("slot", { key: 'c1ee6c1e44e27818f4bded22ad642b855966e97e', name: "body" })), usesActionsSlot && h("slot", { key: '6561dfc52281bdb4e19e4d601e1d5954cb644067', name: "actions" }))));
     }
     static get is() { return "tds-modal"; }
     static get encapsulation() { return "shadow"; }