@scania/tegel 1.12.1-ng-form-beta.0 → 1.13.0

package/dist/cjs/tds-folder-tab.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 
 const folderTabCss = ":host{box-sizing:border-box;position:relative}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;min-width:142px;display:block;width:calc(100% - 32px);font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;cursor:pointer;padding:16px;white-space:nowrap;text-decoration:none;text-align:left;outline:none;border:none;border-left:1px solid;border-left-color:transparent}:host ::slotted(*:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host div:not(.selected){background-color:var(--tds-folder-tab-background)}:host div:not(.selected) ::slotted(*){border-left-color:var(--tds-folder-tab-divider-color);border-top:2px solid var(--tds-folder-tab-background);color:var(--tds-folder-tab-item-color)}:host div:not(.selected):hover:not(.disabled){background-color:var(--tds-folder-tab-background-hover);cursor:pointer}:host div:not(.selected):hover:not(.disabled) ::slotted(*){border-top-color:var(--tds-folder-tab-background-hover);color:var(--tds-folder-tab-color)}:host div:not(.selected).disabled ::slotted(*){color:var(--tds-folder-tab-item-color-disabled)}:host div:not(.selected).disabled ::slotted(*:focus-visible){outline:none}:host div:not(.selected).disabled ::slotted(*:hover){cursor:not-allowed}:host div:not(.selected).disabled ::slotted(*::after){content:none}:host .selected{background-color:var(--tds-folder-tab-background-selected);border-top:2px solid var(--tds-folder-tab-border-selected)}:host .selected::after{content:\" \";background-color:var(--tds-folder-tab-background-selected);width:1px;top:0;bottom:0;right:-1px;display:block;position:absolute;z-index:1}:host .selected ::slotted(*){color:var(--tds-folder-tab-color)}:host(.first) :not(.selected) ::slotted(*){border-left-color:transparent}";
 const TdsFolderTabStyle0 = folderTabCss;
@@ -23,8 +23,8 @@ const TdsFolderTab = class {
         this.selected = selected;
     }
     render() {
-        return (index.h(index.Host, { key: '598a424136d016425720fe1908a73d33a945136b', role: "listitem" }, index.h("div", { key: '79b50ed2e10473ff8ce238fb415ff7304b945c3b', class: `${this.disabled ? 'disabled' : ''}
-                  ${this.selected ? 'selected' : ''}`, style: { width: `${this.tabWidth}px` } }, index.h("slot", { key: '5b80397f2f1f3233088532b7a1f0b8952280e2d7' }))));
+        return (index.h(index.Host, { key: '101be5c67007e8f1f6e35527ac929a774ae58495', role: "listitem" }, index.h("div", { key: 'e1d6ebec7a43f096fd635dabd02639a37c4dfc30', class: `${this.disabled ? 'disabled' : ''}
+                  ${this.selected ? 'selected' : ''}`, style: { width: `${this.tabWidth}px` } }, index.h("slot", { key: '4e4b490dea87f381ed8ff0695d4128b9e62c0b27' }))));
     }
 };
 TdsFolderTab.style = TdsFolderTabStyle0;

package/dist/cjs/tds-folder-tabs.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 
 const folderTabsCss = ":host{box-sizing:border-box;overflow:hidden;outline:0}:host *{box-sizing:border-box}:host .wrapper{display:flex;overflow-x:scroll;scrollbar-width:none;position:relative}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{z-index:1;right:0}:host .scroll-left-button{z-index:1;left:0}:host .scroll-right-button,:host .scroll-left-button{height:50px;color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-folder-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}";
 const TdsFolderTabsStyle0 = folderTabsCss;
@@ -15,6 +15,7 @@ const TdsFolderTabs = class {
         this.componentWidth = 0; // visible width of this component
         this.buttonsWidth = 0; // total width of all nav items combined
         this.scrollWidth = 0; // total amount that is possible to scroll in the nav wrapper
+        this.clickHandlers = new WeakMap();
         this.addResizeObserver = () => {
             const resizeObserver = new ResizeObserver((entries) => {
                 entries.forEach((entry) => {
@@ -29,21 +30,15 @@ const TdsFolderTabs = class {
                     this.componentWidth = componentWidth;
                     this.buttonsWidth = buttonsWidth;
                     this.scrollWidth = buttonsWidth - componentWidth;
-                    if (this.buttonsWidth > this.componentWidth) {
-                        this.evaluateScrollButtons();
-                    }
-                    else {
-                        this.showLeftScroll = false;
-                        this.showRightScroll = false;
-                    }
+                    this.updateScrollButtons();
                 });
             });
             resizeObserver.observe(this.navWrapperElement);
         };
         this.addEventListenerToTabs = () => {
             this.children = Array.from(this.host.children);
-            this.children = this.children.map((item, index) => {
-                item.addEventListener('click', () => {
+            this.children.map((item, index) => {
+                const clickHandler = () => {
                     if (!item.disabled) {
                         const tdsChangeEvent = this.tdsChange.emit({
                             selectedTabIndex: this.children.indexOf(item),
@@ -54,10 +49,21 @@ const TdsFolderTabs = class {
                             this.selectedIndex = index;
                         }
                     }
-                });
+                };
+                item.addEventListener('click', clickHandler);
+                this.clickHandlers.set(item, clickHandler); // Store the handler in WeakMap
                 return item;
             });
         };
+        this.removeEventListenerFromTabs = () => {
+            this.children.forEach((item) => {
+                const clickHandler = this.clickHandlers.get(item);
+                if (clickHandler) {
+                    item.removeEventListener('click', clickHandler);
+                    this.clickHandlers.delete(item);
+                }
+            });
+        };
         this.modeVariant = null;
         this.defaultSelectedIndex = 0;
         this.selectedIndex = undefined;
@@ -67,6 +73,9 @@ const TdsFolderTabs = class {
     }
     /** Sets the passed tabindex as the selected Tab. */
     async selectTab(tabIndex) {
+        if (tabIndex < 0 || tabIndex >= this.children.length) {
+            throw new Error('Tab index out of bounds');
+        }
         if (!this.children[tabIndex].disabled) {
             this.children.forEach((element) => element.setSelected(false));
             this.children = this.children.map((element, index) => {
@@ -77,9 +86,11 @@ const TdsFolderTabs = class {
                 return element;
             });
         }
-        return {
-            selectedTabIndex: this.selectedIndex,
-        };
+        return { selectedTabIndex: this.selectedIndex };
+    }
+    /** Reinitializes the component. */
+    async reinitialize() {
+        this.handleSlotChange();
     }
     handleSelectedIndexUpdate() {
         this.children = Array.from(this.host.children).map((tabElement) => {
@@ -88,68 +99,45 @@ const TdsFolderTabs = class {
         });
         this.children[this.selectedIndex].setSelected(true);
     }
-    calculateButtonWidth() {
-        this.children = this.children.map((tab) => {
-            if (tab.offsetWidth > this.buttonWidth) {
-                this.buttonWidth = tab.offsetWidth;
-            }
-            return tab;
-        });
-        this.children.forEach((tab) => {
-            tab.setTabWidth(this.buttonWidth);
-        });
-    }
     scrollRight() {
         const scroll = this.navWrapperElement.scrollLeft;
-        this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;
+        this.navWrapperElement.scrollLeft = scroll + this.buttonsWidth;
         this.evaluateScrollButtons();
     }
     scrollLeft() {
         const scroll = this.navWrapperElement.scrollLeft;
-        this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;
+        this.navWrapperElement.scrollLeft = scroll - this.buttonsWidth;
         this.evaluateScrollButtons();
     }
     evaluateScrollButtons() {
         const scroll = this.navWrapperElement.scrollLeft;
-        if (scroll >= this.scrollWidth) {
-            this.showRightScroll = false;
-        }
-        else {
-            this.showRightScroll = true;
-        }
-        if (scroll <= 0) {
-            this.showLeftScroll = false;
-        }
-        else {
-            this.showLeftScroll = true;
-        }
+        this.showRightScroll = scroll <= this.scrollWidth;
+        this.showLeftScroll = scroll > 0;
     }
-    connectedCallback() {
+    initializeTabs() {
         this.children = Array.from(this.host.children);
+        // remove first and last class from other tabs in case of initialization
+        this.children.forEach((child) => {
+            child.classList.remove('last');
+            child.classList.remove('first');
+        });
         this.children[0].classList.add('first');
         this.children[this.children.length - 1].classList.add('last');
     }
-    componentDidLoad() {
+    initializeSelectedTab() {
         if (this.selectedIndex === undefined) {
             this.addEventListenerToTabs();
             this.children[this.defaultSelectedIndex].setSelected(true);
             this.selectedIndex = this.defaultSelectedIndex;
-            this.tdsChange.emit({
-                selectedTabIndex: this.selectedIndex,
-            });
         }
         else {
             this.children[this.selectedIndex].setSelected(true);
-            this.tdsChange.emit({
-                selectedTabIndex: this.selectedIndex,
-            });
         }
-        this.calculateButtonWidth();
-    }
-    componentDidUpdate() {
-        this.calculateButtonWidth();
+        this.tdsChange.emit({
+            selectedTabIndex: this.selectedIndex,
+        });
     }
-    componentDidRender() {
+    updateScrollButtons() {
         if (this.buttonsWidth > this.componentWidth) {
             this.evaluateScrollButtons();
         }
@@ -157,12 +145,31 @@ const TdsFolderTabs = class {
             this.showLeftScroll = false;
             this.showRightScroll = false;
         }
+    }
+    handleSlotChange() {
+        this.initializeTabs();
+        this.addEventListenerToTabs();
+        this.initializeSelectedTab();
+        this.updateScrollButtons();
         this.addResizeObserver();
     }
+    connectedCallback() {
+        this.initializeTabs();
+    }
+    componentDidLoad() {
+        this.initializeSelectedTab();
+    }
+    componentDidRender() {
+        this.updateScrollButtons();
+        this.addResizeObserver();
+    }
+    disconnectedCallback() {
+        this.removeEventListenerFromTabs();
+    }
     render() {
-        return (index.h(index.Host, { key: 'fd6d99b4cf81cc8ab1268cf58a7ba5175f6c3d88', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, index.h("div", { key: '6c8e749605f6bd1470858bdd31640a9724a5ada6', class: "wrapper", ref: (el) => {
+        return (index.h(index.Host, { key: '8c90acd4a7f46a37ffabb568f4c37e183140e953', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, index.h("div", { key: '9184c054af4bc54f68e896f7b17e86cd3454cd6e', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, index.h("button", { key: '5d2686850ee046b3025bf4df0d160c5da2feab97', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, index.h("tds-icon", { key: '3cd46bbedfcc9382997521038e11f939dec6a43e', name: "chevron_left", size: "20px" })), index.h("slot", { key: '0679052928ad644d91d14694a7796d2a9dddaf37' }), index.h("button", { key: 'ea627e24449bd32838311293c25351d149e2df23', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, index.h("tds-icon", { key: 'f4ef4fdba1c1a7bdee3f1b534a49a2ed349b91bd', name: "chevron_right", size: "20px" })))));
+            } }, index.h("button", { key: 'd7f0043b76715faa3144d775d08139d2da02212f', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, index.h("tds-icon", { key: 'c88e7ad84aacef16bf34811f132ffc0d8657fa23', name: "chevron_left", size: "20px" })), index.h("slot", { key: 'b8dd6342cb887b85304b238346818ed40b9bec10', onSlotchange: () => this.handleSlotChange() }), index.h("button", { key: 'c2c34ad8d08ef45e6bb3e7b5c39735f3674957d8', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, index.h("tds-icon", { key: '1ddb3be79edec73d684b3f74d1b3d8292ba08514', name: "chevron_right", size: "20px" })))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/tds-footer-group.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 
 const footerGroupCss = ":host{display:block}:host .footer-top-title{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);opacity:var(--tds-footer-top-title-opacity);color:var(--tds-footer-top-links);padding-bottom:8px}:host button.footer-top-title-button{display:none;border:none;width:100%;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-top-links);background-color:transparent;text-align:left;padding:19px 24px;justify-content:space-between;border-bottom:1px solid var(--tds-footer-top-divider)}:host button.footer-top-title-button.expanded{border-bottom:none}:host button.footer-top-title-button.expanded tds-icon{transform:rotateZ(180deg)}:host button.footer-top-title-button:hover{cursor:pointer}:host button.footer-top-title-button:active{background-color:var(--tds-footer-top-button-active)}:host button.footer-top-title-button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host button.footer-top-title-button tds-icon{transition:transform 0.2s ease-in-out}:host [role=list]{list-style:none;padding:0;margin:0;display:flex;gap:8px}:host [role=list].start,:host [role=list].end{gap:24px}:host [role=list].top-part-child{flex-direction:column}@media all and (max-width: 992px){:host [role=list].start:not(.top-part-child){flex-direction:column}:host [role=list].start:not(.top-part-child).start,:host [role=list].start:not(.top-part-child).end{gap:8px}:host [role=list].top-part-child.closed{display:none}:host [role=list].top-part-child{gap:0}:host .footer-top-title{display:none}:host button.footer-top-title-button{display:flex;align-items:center}}";
 const TdsFooterGroupStyle0 = footerGroupCss;

package/dist/cjs/tds-footer-item.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 
 const footerItemCss = "[role=listitem] ::slotted(a),[role=listitem] ::slotted(button){font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-main-links);opacity:var(--tds-footer-main-links-opacity);text-decoration:none}[role=listitem] ::slotted(a:focus-visible),[role=listitem] ::slotted(button:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}[role=listitem] ::slotted(a:hover),[role=listitem] ::slotted(button:hover){text-decoration:underline}[role=listitem].top-part-child ::slotted(a),[role=listitem].top-part-child ::slotted(button){font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-top-links)}[role=listitem].top-part-child ::slotted(a:focus-visible),[role=listitem].top-part-child ::slotted(button:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}@media all and (max-width: 992px){[role=listitem].top-part-child{border-bottom:1px solid var(--tds-footer-top-divider)}[role=listitem].top-part-child ::slotted(a),[role=listitem].top-part-child ::slotted(button){display:block;height:100%;padding:19px 40px;font-weight:normal}[role=listitem].top-part-child ::slotted(a:hover),[role=listitem].top-part-child ::slotted(button:hover){text-decoration:underline;background-color:var(--tds-footer-top-links-background-hover)}[role=listitem].top-part-child ::slotted(a:focus-visible),[role=listitem].top-part-child ::slotted(button:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}}";
 const TdsFooterItemStyle0 = footerItemCss;

package/dist/cjs/tds-footer.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 const hasSlot = require('./hasSlot-1c90e9ba.js');
 
 const footerCss = ":host{display:block}:host slot[name=top]::slotted(*){box-sizing:border-box;background-color:var(--tds-footer-top-background);padding:40px;display:grid;grid-template-columns:repeat(4, 1fr);row-gap:40px;width:100%}:host .footer-main{background-color:var(--tds-footer-main-background);padding:0 40px}:host .footer-main-top{padding:40px 0;display:flex;justify-content:space-between}:host slot[name=start],:host slot[name=end]{display:flex}:host slot[name=start]::slotted(*),:host slot[name=end]::slotted(*){display:flex;column-gap:24px}:host slot[name=end]{margin-left:auto}:host .footer-main-bottom{padding:40px 0;display:flex;justify-content:space-between;border-top:1px solid var(--tds-footer-main-divider)}:host .footer-main-bottom small.copyright{margin:0;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-footer-main-copyright)}:host .footer-main-bottom .brand{background-image:var(--tds-background-image-scania-wordmark-white-svg);background-repeat:no-repeat;background-size:117px;background-position:right;width:117px;height:20px}:host .footer-main-bottom .brand p{color:transparent;padding:0;margin:0;height:100%;visibility:hidden}@media all and (max-width: 992px){:host slot[name=top]::slotted(*){display:block;width:100%;padding:0}:host .footer-main{padding:0 24px}:host .footer-main-top{flex-direction:column;row-gap:48px;padding:24px 0}:host slot[name=end]::slotted(*){flex-direction:row;gap:8px}:host slot[name=end]{margin-left:unset}:host .footer-main-bottom{flex-direction:column;padding-bottom:32px}:host .footer-main-bottom p.copyright{padding-bottom:96px}:host .footer-main-bottom .brand{width:100%}}";

package/dist/cjs/tds-header-brand-symbol.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 
 const headerBrandSymbolCss = ":host tds-header-item{display:none}:host tds-header-item ::slotted(*){background-image:var(--tds-background-image-scania-symbol-svg), var(--tds-background-image-scania-symbol-png);background-size:30px auto;background-position:center;background-repeat:no-repeat}@media (min-width: 992px){:host tds-header-item{display:block}}";
 const TdsHeaderBrandSymbolStyle0 = headerBrandSymbolCss;

package/dist/cjs/tds-header-cell.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 
 const tableHeaderCellCss = ":host(.tds-table__header-cell){box-sizing:border-box;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);display:table-cell;text-align:left;color:var(--tds-table-color);background-color:var(--tds-table-header-background);border-bottom:1px solid var(--tds-table-header-background-hover);padding:0;height:48px;min-width:192px;box-sizing:border-box;vertical-align:middle;overflow:hidden;transition:background-color 200ms ease}:host(.tds-table__header-cell) *{box-sizing:border-box}:host(.tds-table__header-cell) .tds-table__header-text{padding:8px 16px;margin:0}:host(.tds-table__header-cell) .tds-table__header-text-no-padding{padding:0}:host(.tds-table__header-cell--sortable) .tds-table__header-button{display:flex;align-items:center;gap:8px;justify-content:start;flex-direction:row;width:100%;height:100%;padding:0 16px;background-color:transparent;border:none;cursor:pointer;transition:background-color 200ms ease}:host(.tds-table__header-cell--sortable) .tds-table__header-button:focus{outline:2px solid var(--tds-table-header-btn-focus);outline-offset:-2px}:host(.tds-table__header-cell--sortable) .tds-table__header-button:focus .tds-table__header-button-icon{opacity:1}:host(.tds-table__header-cell--sortable) .tds-table__header-button .tds-table__header-button-text{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);text-align:left;color:var(--tds-table-header-btn-color)}:host(.tds-table__header-cell--sortable) .tds-table__header-button .tds-table__header-button-icon{flex:0 0 16px;height:16px;width:16px;opacity:0;transform-origin:center;transition:opacity 200ms ease-in, transform 200ms ease;fill:var(--tds-table-color)}:host(.tds-table__header-cell--sortable) .tds-table__header-button:hover .tds-table__header-button-icon{opacity:1}:host(.tds-table__header-cell--is-sorted) .tds-table__header-button{background-color:var(--tds-table-header-btn-background)}:host(.tds-table__header-cell--is-sorted) .tds-table__header-button:hover{background-color:var(--tds-table-header-btn-background-hover)}:host(.tds-table__header-cell--is-sorted) .tds-table__header-button .tds-table__header-button-icon{opacity:1}:host(.tds-table__header-cell--is-sorted) .tds-table__header-button .tds-table__header-button-icon--rotate{transform:rotate(180deg)}:host(.tds-table--compact){height:33px}:host(.tds-table--divider){border-right:1px solid var(--tds-table-divider)}:host(.tds-table--divider:last-of-type){border-right:none}:host(.tds-table--no-min-width){min-width:unset}:host(.tds-table--no-padding){height:unset}:host(.tds-table__header-cell:first-of-type){border-top-left-radius:4px}:host(.tds-table__header-cell:last-of-type){border-top-right-radius:4px}:host(.tds-table--extra-column:first-of-type){border-top-left-radius:0}:host(.tds-table--toolbar-available){border-radius:0}:host(.tds-table--extra-column.tds-table--toolbar-available){border-radius:0}:host(.tds-table__header-cell.tds-table--toolbar-available:first-of-type){border-top-left-radius:0}:host(.tds-table__header-cell.tds-table--toolbar-available:last-of-type){border-top-right-radius:0}";
 const TdsHeaderCellStyle0 = tableHeaderCellCss;
@@ -115,7 +115,7 @@ const TdsTableHeaderCell = class {
             this.host.closest('tds-table').getElementsByTagName('tds-table-toolbar').length >= 1;
     }
     render() {
-        return (index.h(index.Host, { key: '6a051465b3a5af5460f7c5ac112798b521f9b4a8', class: {
+        return (index.h(index.Host, { key: 'bf923a391d612d2167d45c6b4a38f483b03893c0', class: {
                 'tds-table__header-cell': true,
                 'tds-table__header-cell--sortable': this.sortable,
                 'tds-table__header-cell--is-sorted': this.sortedByMyKey,

package/dist/cjs/tds-header-dropdown-list-item.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 
 const headerDropdownListItemCss = ":host{display:block;box-sizing:border-box;height:var(--tds-header-list-item-md-height);width:100%}:host .component{height:100%}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;border:none;display:flex;align-items:center;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)}:host .component ::slotted(a:hover){background-color:var(--tds-nav-item-background-hover);cursor:pointer}:host .component ::slotted(a:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .component-selected{background-color:var(--tds-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)}:host .component-selected ::slotted(a),:host .component-selected ::slotted(button){background-color:var(--tds-nav-item-background-selected)}:host(:not(:last-child)){border-bottom:1px solid var(--tds-nav-dropdown-item-border-color)}:host([size=lg]){height:var(--tds-header-height)}:host([size=lg]) ::slotted(a),:host([size=lg]) ::slotted(button){padding:0 16px;color:var(--tds-header-app-launcher-item-color)}";
 const TdsHeaderDropdownListItemStyle0 = headerDropdownListItemCss;

package/dist/cjs/tds-header-dropdown-list-user.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 
 const headerDropdownListUserCss = ":host{background-color:var(--tds-header-avatar-item-background);display:flex;height:84px}:host .user-box{gap:16px;width:100%;padding:0 16px;display:flex;align-items:center;border-bottom:1px solid var(--tds-nav-dropdown-item-border-color)}:host img,:host slot[name=thumbnail]::slotted(*){width:34px;border-radius:100%}:host .user-content{display:flex;flex-direction:column;gap:4px}:host .user-content .header{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls)}:host .user-content .subheader{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-header-avatar-item-color)}";
 const TdsHeaderDropdownListUserStyle0 = headerDropdownListUserCss;

package/dist/cjs/tds-header-dropdown-list.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 const isHeadingElement = require('./isHeadingElement-4f06b688.js');
 require('./dfs-84f7f63e.js');
 

package/dist/cjs/tds-header-dropdown.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 const generateUniqueId = require('./generateUniqueId-e3fc9863.js');
 
-const headerDropdownCss = ":host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}:host{height:var(--tds-header-height);position:relative}:host .menu{flex-direction:column;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);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-clip:padding-box}:host .menu::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .menu::-webkit-scrollbar-track{background:transparent}:host .menu::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}:host .menu::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .menu{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}:host .state-open .dropdown-icon{transform:rotatetds-z-index(180deg)}:host .state-open .button{position:relative;z-index:901}";
+const headerDropdownCss = ":host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}:host{height:var(--tds-header-height);position:relative}:host .menu{flex-direction:column;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);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-clip:padding-box}:host .menu::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .menu::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}:host .menu::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}:host .menu::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .menu{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}:host .state-open .dropdown-icon{transform:rotatetds-z-index(180deg)}:host .state-open .button{position:relative;z-index:901}";
 const TdsHeaderDropdownStyle0 = headerDropdownCss;
 
 const TdsHeaderDropdown = class {

package/dist/cjs/tds-header-hamburger.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 const inheritAriaAttributes = require('./inheritAriaAttributes-dedbbc57.js');
 require('./inheritAttributes-ff9ad737.js');
 

package/dist/cjs/tds-header-launcher-button.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 const inheritAriaAttributes = require('./inheritAriaAttributes-dedbbc57.js');
 require('./inheritAttributes-ff9ad737.js');
 

package/dist/cjs/tds-header-launcher-grid-item.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 
 const headerLauncherGridItemCss = ":host{display:block;width:96px;height:96px}:host ::slotted(a),:host ::slotted(button){all:unset;box-sizing:border-box;border-right:1px solid var(--tds-nav-item-border-color);width:100%;height:100%;border:none;padding:0 12px;display:flex;text-align:center;justify-content:center;align-items:center;flex-direction:column;gap:8px;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);background-color:var(--tds-header-app-launcher-menu-bg);color:var(--tds-header-app-launcher-grid-color);border-radius:4px;transition:background-color 150ms ease}:host ::slotted(a:hover),:host ::slotted(button:hover){background-color:var(--tds-header-app-launcher-grid-hover-background);cursor:pointer}:host ::slotted(a:focus-visible),:host ::slotted(button:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}";
 const TdsHeaderLauncherGridItemStyle0 = headerLauncherGridItemCss;

package/dist/cjs/tds-header-launcher-grid-title.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 const generateUniqueId = require('./generateUniqueId-e3fc9863.js');
 
 const headerLauncherGridTitleCss = ".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);text-transform:uppercase;height:48px;padding:0 16px;display:flex;align-items:center;border-bottom:1px solid var(--tds-nav-dropdown-item-border-color);margin:0}";

package/dist/cjs/tds-header-launcher-grid.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 const isHeadingElement = require('./isHeadingElement-4f06b688.js');
 require('./dfs-84f7f63e.js');
 

package/dist/cjs/tds-header-launcher-list-item.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 
 const headerLauncherListItemCss = ":host{display:block;border-bottom:1px solid var(--tds-nav-dropdown-item-border-color)}";
 const TdsHeaderLauncherListItemStyle0 = headerLauncherListItemCss;

package/dist/cjs/tds-header-launcher-list-title.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 const generateUniqueId = require('./generateUniqueId-e3fc9863.js');
 
 const headerLauncherListTitleCss = ".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);text-transform:uppercase;height:48px;padding:0 16px;display:flex;align-items:center;border-bottom:1px solid var(--tds-nav-dropdown-item-border-color);margin:0}";

package/dist/cjs/tds-header-launcher-list.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 const generateUniqueId = require('./generateUniqueId-e3fc9863.js');
 
 const TdsHeaderLauncherList = class {

package/dist/cjs/tds-header-launcher.cjs.entry.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 const generateUniqueId = require('./generateUniqueId-e3fc9863.js');
 const inheritAriaAttributes = require('./inheritAriaAttributes-dedbbc57.js');
 require('./inheritAttributes-ff9ad737.js');
 
-const headerLauncherCss = ":host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}:host .wrapper{height:var(--tds-header-height);position:relative}:host .wrapper .menu{flex-direction:column;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);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-clip:padding-box}:host .wrapper .menu::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .wrapper .menu::-webkit-scrollbar-track{background:transparent}:host .wrapper .menu::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}:host .wrapper .menu::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .wrapper .menu{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}@media all and (max-width: 384px){:host .wrapper .menu{width:100vw}}:host .wrapper.state-list-type-menu .menu{height:calc(100vh - var(--tds-header-height))}:host .wrapper.state-open .button{position:relative;z-index:901}";
+const headerLauncherCss = ":host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}:host .wrapper{height:var(--tds-header-height);position:relative}:host .wrapper .menu{flex-direction:column;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);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-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)}:host .wrapper .menu::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}:host .wrapper .menu::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .wrapper .menu{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}@media all and (max-width: 384px){:host .wrapper .menu{width:100vw}}:host .wrapper.state-list-type-menu .menu{height:calc(100vh - var(--tds-header-height))}:host .wrapper.state-open .button{position:relative;z-index:901}";
 const TdsHeaderLauncherStyle0 = headerLauncherCss;
 
 const TdsHeaderLauncher = class {

package/dist/cjs/tds-header-title.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 
-const headerTitleCss = ":host{display:block;flex-shrink:1;box-sizing:border-box;color:var(--tds-header-nav-item-color);font-weight:normal;font-family:var(--tds-font-family-headline);letter-spacing:normal;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host slot{display:block;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding:0 32px 0 16px}";
+const headerTitleCss = "h4{box-sizing:border-box;color:var(--tds-header-nav-item-color);font-weight:normal;font-family:var(--tds-font-family-headline);letter-spacing:normal;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}h4 slot{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding:0 32px 0 16px}";
 const TdsHeaderTitleStyle0 = headerTitleCss;
 
 const TdsHeaderTitle = class {
@@ -12,7 +12,7 @@ const TdsHeaderTitle = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'c1204516bba6b80a1c1da9bf4636c51a7e4abbed' }, index.h("div", { key: '7f82c8ae96ff0ab0feff641f4d21953d9d69b683', class: "component" }, index.h("slot", { key: '6b38d0888979c8dd6487dcb211a5f4ab34ee5756' }))));
+        return (index.h("h4", { key: 'd0bfee02a1d63152fa37d725a5ebcac55289abb0' }, index.h("slot", { key: '84559dcb52093997b8b0791257448e0a0c6aa019' })));
     }
 };
 TdsHeaderTitle.style = TdsHeaderTitleStyle0;

package/dist/cjs/tds-header.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 const inheritAriaAttributes = require('./inheritAriaAttributes-dedbbc57.js');
 require('./inheritAttributes-ff9ad737.js');
 
@@ -21,7 +21,7 @@ const updateListChildrenRoles = (targetNode) => {
     });
 };
 
-const headerCss = ":host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}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);background-color:var(--tds-header-background);width:100%;z-index:300}nav{box-sizing:border-box;background-color:var(--tds-header-background);width:100%;display:block}nav *{box-sizing:border-box}nav .tds-header-component-list{height:var(--tds-header-height);all:unset;display:flex;justify-content:start;align-items:center}nav tds-header-dropdown,nav tds-header-item{display:none}nav .tds-header-middle-spacer{all:unset;display:block;flex-grow:1;height:var(--tds-header-height);border-right:1px solid var(--tds-header--basic-element-border)}@media screen and (min-width: 992px){nav tds-header-dropdown,nav tds-header-item{display:block}}nav tds-header-item:nth-child(3),nav tds-header-dropdown:nth-child(3){border-left:1px solid var(--tds-header--basic-element-border)}";
+const headerCss = ":host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}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);background-color:var(--tds-header-background);width:100%;z-index:300}nav{box-sizing:border-box;background-color:var(--tds-header-background);width:100%;display:block}nav *{box-sizing:border-box}nav .tds-header-component-list{height:var(--tds-header-height);all:unset;display:flex;justify-content:center;align-items:center}nav tds-header-dropdown,nav tds-header-item{display:none}nav .tds-header-middle-spacer{all:unset;display:block;flex-grow:1;height:var(--tds-header-height);border-right:1px solid var(--tds-header--basic-element-border)}@media screen and (min-width: 992px){nav tds-header-dropdown,nav tds-header-item{display:block}}nav tds-header-item:nth-child(3),nav tds-header-dropdown:nth-child(3){border-left:1px solid var(--tds-header--basic-element-border)}";
 const TdsHeaderStyle0 = headerCss;
 
 const TdsHeader = class {