@scania/tegel 1.29.0-tabs-initialization-issue-beta.1 → 1.30.0-beta-enhance-focus-dropdown.0

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

@@ -3,6 +3,7 @@ import findNextFocusableElement from "../../utils/findNextFocusableElement";
 import findPreviousFocusableElement from "../../utils/findPreviousFocusableElement";
 import appendHiddenInput from "../../utils/appendHiddenInput";
 import { convertToString, convertArrayToStrings } from "../../utils/convertToString";
+import generateUniqueId from "../../utils/generateUniqueId";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For dropdown option elements.
  */
@@ -71,7 +72,15 @@ export class TdsDropdown {
             if (!this.disabled) {
                 this.open = !this.open;
                 if (this.open) {
-                    this.focusInputElement();
+                    if (this.filter) {
+                        this.focusInputElement();
+                    }
+                    else {
+                        const button = this.host.shadowRoot.querySelector('button');
+                        if (button) {
+                            button.focus();
+                        }
+                    }
                 }
             }
         };
@@ -117,11 +126,13 @@ export class TdsDropdown {
         this.handleFocus = (event) => {
             this.open = true;
             this.filterFocus = true;
-            if (this.multiselect) {
+            if (this.multiselect && this.inputElement) {
                 this.inputElement.value = '';
             }
             this.tdsFocus.emit(event);
-            this.handleFilter({ target: { value: '' } });
+            if (this.filter) {
+                this.handleFilter({ target: { value: '' } });
+            }
         };
         this.handleBlur = (event) => {
             this.tdsBlur.emit(event);
@@ -276,7 +287,18 @@ export class TdsDropdown {
     }
     /** Method that forces focus on the input element. */
     async focusElement() {
-        this.focusInputElement();
+        if (this.filter) {
+            // For filter mode, focus the input element
+            this.focusInputElement();
+        }
+        else {
+            // For non-filter mode, focus the button element
+            const button = this.host.shadowRoot.querySelector('button');
+            if (button) {
+                button.focus();
+            }
+        }
+        // Always trigger the focus event to open the dropdown
         this.handleFocus({});
     }
     /** Method for setting the value of the Dropdown.
@@ -306,6 +328,7 @@ export class TdsDropdown {
         }
     }
     async onKeyDown(event) {
+        var _a;
         // Get the active element
         const { activeElement } = document;
         if (!activeElement) {
@@ -332,6 +355,14 @@ export class TdsDropdown {
         }
         else if (event.key === 'Escape') {
             this.open = false;
+            // Return focus to input/button when Escape key is used
+            if (this.filter) {
+                (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else {
+                const button = this.host.shadowRoot.querySelector('button');
+                button === null || button === void 0 ? void 0 : button.focus();
+            }
         }
     }
     // If the Dropdown gets closed,
@@ -342,6 +373,8 @@ export class TdsDropdown {
                 this.inputElement.value = this.selectedOptions.length ? this.getValue() : '';
             }
         }
+        // Update the inert state of dropdown list when open state changes
+        this.updateDropdownListInertState();
     }
     handleDefaultValueChange(newValue) {
         if (newValue !== undefined && newValue !== null) {
@@ -389,6 +422,8 @@ export class TdsDropdown {
         if (form) {
             form.addEventListener('reset', this.resetInput);
         }
+        // Initialize inert state after rendering
+        this.updateDropdownListInertState();
     }
     disconnectedCallback() {
         const form = this.host.closest('form');
@@ -401,11 +436,24 @@ export class TdsDropdown {
             console.warn('Tegel Dropdown component: tdsAriaLabel prop is missing');
         }
     }
+    updateDropdownListInertState() {
+        if (this.dropdownList) {
+            if (this.open) {
+                this.dropdownList.removeAttribute('inert');
+            }
+            else {
+                this.dropdownList.setAttribute('inert', '');
+            }
+        }
+    }
     render() {
         appendHiddenInput(this.host, this.name, this.selectedOptions.join(','), this.disabled);
-        return (h(Host, { key: '355b932acbd4bd73fd49f03fc97c45d2851d384c', class: {
+        // Generate unique IDs for associating labels and helpers with the input/button
+        const labelId = this.label ? `dropdown-label-${this.name || generateUniqueId()}` : undefined;
+        const helperId = this.helper ? `dropdown-helper-${this.name || generateUniqueId()}` : undefined;
+        return (h(Host, { key: 'aed0a485fc4634cdba2599fa9792fb6289a7459c', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: '6551ecaae468c210b4d984ab611ce6053c0e4793', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '9942c7bc9940d319d8cf97dc17cd1241633921e2', class: {
+            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: '39d11ac06547b133540f037a0c09ddc40b972cb5', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '8ab624d380289699887b660d30512b2e892f71c0', class: {
                 'dropdown-select': true,
                 [this.size]: true,
                 'disabled': this.disabled,
@@ -414,11 +462,11 @@ export class TdsDropdown {
                 focus: this.filterFocus,
                 disabled: this.disabled,
                 error: this.error,
-            } }, h("div", { class: "value-wrapper" }, this.label && this.labelPosition === 'inside' && this.placeholder && (h("div", { class: `label-inside ${this.size}` }, this.label)), this.label && this.labelPosition === 'inside' && !this.placeholder && (h("div", { class: `
+            } }, h("div", { class: "value-wrapper" }, this.label && this.labelPosition === 'inside' && this.placeholder && (h("div", { id: labelId, class: `label-inside ${this.size}` }, this.label)), this.label && this.labelPosition === 'inside' && !this.placeholder && (h("div", { id: labelId, class: `
                     label-inside-as-placeholder
                     ${this.size}
                     ${this.selectedOptions.length ? 'selected' : ''}
-                    ` }, this.label)), h("input", { "aria-label": this.tdsAriaLabel, "aria-disabled": this.disabled,
+                    ` }, this.label)), h("input", { "aria-label": this.tdsAriaLabel, "aria-labelledby": labelId, "aria-describedby": helperId, "aria-disabled": this.disabled,
             // eslint-disable-next-line no-return-assign
             ref: (inputEl) => (this.inputElement = inputEl), class: {
                 placeholder: this.labelPosition === 'inside',
@@ -439,11 +487,11 @@ export class TdsDropdown {
             }, class: {
                 'clear-icon': true,
                 'hide': !(this.open && this.inputElement.value !== ''),
-            }, name: "cross", size: "16px" }), h("tds-icon", { tabIndex: 0, role: "button", "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", onClick: this.handleToggleOpen, onKeyDown: (event) => {
+            }, name: "cross", size: "16px" }), h("tds-icon", { tdsAriaHidden: true, role: "button", "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", onClick: this.handleToggleOpen, onKeyDown: (event) => {
                 if (event.key === 'Enter') {
                     this.handleToggleOpen();
                 }
-            }, class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))) : (h("button", { "aria-label": this.tdsAriaLabel, "aria-disabled": this.disabled, onClick: () => this.handleToggleOpen(), onKeyDown: (event) => {
+            }, class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))) : (h("button", { "aria-label": this.tdsAriaLabel, "aria-labelledby": labelId, "aria-describedby": helperId, "aria-disabled": this.disabled, onClick: () => this.handleToggleOpen(), onKeyDown: (event) => {
                 if (event.key === 'Escape') {
                     this.open = false;
                 }
@@ -451,11 +499,11 @@ export class TdsDropdown {
                 ${this.selectedOptions.length ? 'value' : 'placeholder'}
                 ${this.open ? 'open' : 'closed'}
                 ${this.error ? 'error' : ''}
-                `, disabled: this.disabled }, h("div", { class: `value-wrapper ${this.size}` }, this.label && this.labelPosition === 'inside' && this.placeholder && (h("div", { class: `label-inside ${this.size}` }, this.label)), this.label && this.labelPosition === 'inside' && !this.placeholder && (h("div", { class: `
+                `, disabled: this.disabled }, h("div", { class: `value-wrapper ${this.size}` }, this.label && this.labelPosition === 'inside' && this.placeholder && (h("div", { id: labelId, class: `label-inside ${this.size}` }, this.label)), this.label && this.labelPosition === 'inside' && !this.placeholder && (h("div", { id: labelId, class: `
                     label-inside-as-placeholder
                     ${this.size}
                     ${this.selectedOptions.length ? 'selected' : ''}
-                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: 'd0b201e483628f0152d4169dfe53eba25860bd8e', role: "listbox", "aria-label": this.tdsAriaLabel, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
+                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: '989c425c5a608444533e33ad83313aa56569c225', role: "listbox", "aria-label": this.tdsAriaLabel, "aria-hidden": this.open ? 'false' : 'true', inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
                 this.dropdownList = element;
             }, class: {
                 'dropdown-list': true,
@@ -466,11 +514,11 @@ export class TdsDropdown {
                 'closed': !this.open,
                 [`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
                 [`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
-            } }, h("slot", { key: 'e18a6991f876c142ff21d6e15c121a8e450735ae', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '79b654db4e9a18b5a19e2a42d2fd06d7bea4fe6b', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: 'e0bef905f7e310a47e567ea6fa13e11923b54232', class: {
+            } }, h("slot", { key: '6e54bbb0eacf27cfdbf3b393f2c9e690adb394e8', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '4bdaf935cd213f63e7a8665b5d6f69ee0589d7b9', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '112c76fa88eef7798b9b0d435ae03e62880a9ff8', id: helperId, class: {
                 helper: true,
                 error: this.error,
                 disabled: this.disabled,
-            } }, this.error && h("tds-icon", { key: '0ee7ab0c6c86e35ce5c0d1933e75237fb43d58d1', name: "error", size: "16px" }), this.helper))));
+            } }, this.error && h("tds-icon", { key: '055e681faca85a461b07619c42fa0eb48a6ec028', name: "error", size: "16px" }), this.helper))));
     }
     static get is() { return "tds-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -41,12 +41,12 @@ export class TdsFooterGroup {
     }
     render() {
         const hasTitleSlot = hasSlot('title', this.host);
-        return (h(Host, { key: 'ae7d97292dba7bf2054e1833e436dbabec499ed7', "aria-expanded": this.open ? 'true' : 'false' }, h("div", { key: 'e94d8a8f5cdab4eaa1ec72d9d8da2cf3634ddb86', class: this.isMobile ? 'mobile-view' : '' }, this.topPartGroup &&
+        return (h(Host, { key: 'ee2e585154e56bba76c1e30aff640bda58dd401e', "aria-expanded": this.open ? 'true' : 'false' }, h("div", { key: 'd29f4a28742993315e7514516fa057def61f0cf6', class: this.isMobile ? 'mobile-view' : '' }, this.topPartGroup &&
             (this.isMobile ? (h("button", { onClick: () => {
                     this.open = !this.open;
-                }, class: `footer-top-title-button ${this.open ? 'expanded' : 'closed'}` }, hasTitleSlot ? h("slot", { name: "title" }) : this.titleText, h("tds-icon", { name: "chevron_down", size: "20px", "aria-hidden": "true" }))) : (h("div", { class: "footer-top-title" }, hasTitleSlot ? h("slot", { name: "title" }) : this.titleText))), h("nav", { key: 'ab7829753c2e2e80b877470e92f1947d24aefe38', "aria-label": this.tdsListAriaLabel }, h("div", { key: 'e402e251eff4b82e2cfffdb7edc9db3e1c537325', role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
+                }, class: `footer-top-title-button ${this.open ? 'expanded' : 'closed'}` }, hasTitleSlot ? h("slot", { name: "title" }) : this.titleText, h("tds-icon", { name: "chevron_down", size: "20px", "aria-hidden": "true" }))) : (h("div", { class: "footer-top-title" }, hasTitleSlot ? h("slot", { name: "title" }) : this.titleText))), h("nav", { key: 'e6e37cfa8d99c76b551c95140cca24829fd74244', "aria-label": this.tdsListAriaLabel }, h("div", { key: '680ada977f2d1b82e9dda9250e4423cc4040c7c4', role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
             ${this.topPartGroup ? 'top-part-child' : ''}
-            ${this.open ? 'expanded' : 'closed'}` }, h("slot", { key: 'd00e9acc84542e2694b6a9aa4b481a2263f79e4b' }))))));
+            ${this.open ? 'expanded' : 'closed'}` }, h("slot", { key: '6748ed2033c34e3f34a11a391713413ad28fc7dc' }))))));
     }
     static get is() { return "tds-footer-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -10,7 +10,7 @@ export class TdsFooterItem {
         this.parentIsTopPart = this.host.closest('tds-footer-group').parentElement.slot === 'top';
     }
     render() {
-        return (h(Host, { key: 'cc3e94cd085ad62a1933a948014d06da55ffeb35', role: "listitem" }, h("div", { key: '602c0f0ede8f40bfc06e3899adb0afa7941602e3', class: `${this.parentIsTopPart ? 'top-part-child' : ''}` }, h("slot", { key: '2770b612c929deb25895455114d2a6e3a45957a4' }))));
+        return (h(Host, { key: '845de26cafaefdf0e5ceabe57ba7bbce51eed038', role: "listitem" }, h("div", { key: 'de201fb4965740a2c0bebbea790651487e082637', class: `${this.parentIsTopPart ? 'top-part-child' : ''}` }, h("slot", { key: 'eca7ee20a2a4b1e9e9947e6566046c9031198569' }))));
     }
     static get is() { return "tds-footer-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,9 +16,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: 'e3dee2f5ac2caebf6a9585b81cdbdda442562c2b', class: {
+        return (h(Host, { key: 'f9a9a196e8f9b49545edbe7e37ef5c7e6108d032', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null,
-            } }, h("footer", { key: 'a243b3b440fa8cffc51bea0def2c0bd07288cf96' }, usesTopSlot && h("slot", { key: 'db60db3d12a0c34fdb9db66be986d541633e1d9b', name: "top" }), h("div", { key: '1d2881f8acc0789f8769604d72ebdef99961e380', class: "footer-main" }, (usesStartSlot || usesEndSlot) && (h("div", { key: 'c8a1cb2639700b51b39355163b0e8b26d1f82855', class: "footer-main-top" }, usesStartSlot && h("slot", { key: 'e343837536cc838b2382d946b8703821e627e6d1', name: "start" }), usesEndSlot && h("slot", { key: 'a181a6656e88f36b8d724d8ccdab33804bf51f0d', name: "end" }))), h("div", { key: '64178cb80d7e0b38d2d5f8a625c222772fd64741', class: "footer-main-bottom" }, h("small", { key: 'c9b3c7337d031cf4a18d5fad56938d490a0dac1e', class: "copyright" }, usesCopyrightSlot ? h("slot", { name: "copyright" }) : this.copyrightText), h("div", { key: '926e8672dd9d00ae5d0c951d506dc506ea698ed2', class: "brand" }, h("p", { key: '4e110423f7b958b3d427d88016ab18d02c6c8edf' }, "Scania")))))));
+            } }, 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")))))));
     }
     static get is() { return "tds-footer"; }
     static get encapsulation() { return "shadow"; }

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: 'cdc1e1712659f82b9bbefd67977de93963dbc68e' }, h("div", { key: '1c39a69aa967c64941be3507d7e88f92cea58623', class: "item" }, h("slot", { key: '62576106bdb13d983e5a415421522bbcddd348bf' }))));
+        return (h(Host, { key: '61b64a52364893a5b67de5797ae49b3c238086ac' }, h("div", { key: '29a46213b10ea291137b2fa7e2f28594177da0fb', class: "item" }, h("slot", { key: 'a844cb74962112475d6da8d1598f0fa7e1fa0b64' }))));
     }
     static get is() { return "tds-core-header-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,7 +8,7 @@ export class TdsHeaderBrandSymbol {
         if (!aTag.hasAttribute('aria-label')) {
             console.warn('Tegel Header Brand Symbol component: missing aria-label attribute for <a> tag inside slot');
         }
-        return (h(Host, { key: 'b3f7cf4d264f2046844814a80f7b9b6a920b1a1e' }, h("tds-header-item", { key: '0be33ffe57b94442fac4f1e686f87fb1e2f1911d' }, h("slot", { key: '3f7f636bc5f7c1b2ee009c774337d0b41c45e477' }))));
+        return (h(Host, { key: 'c7b01660c7757298ff64d90b19df0cc45ebb62fc' }, h("tds-header-item", { key: '2e5f25c5b22a4779146ad6b8c76a8ac625d616dc' }, h("slot", { key: '110c74312136176f396af1010731a886d2d986aa' }))));
     }
     static get is() { return "tds-header-brand-symbol"; }
     static get encapsulation() { return "shadow"; }

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

@@ -54,13 +54,13 @@ export class TdsHeaderDropdown {
         }
     }
     render() {
-        return (h(Host, { key: '441ed3921533c40523c9253a2dfad9eb8d33333f' }, h("div", { key: 'daf498a74457a95df9a05aeac2f1292ee11b8ed8', class: {
+        return (h(Host, { key: '6ab1d0f1d475d6d0a486e1909cad300d89eb39a0' }, h("div", { key: 'bfe11cdc8c2bf592cec7f3cf8888555071781afe', class: {
                 'state-open': this.open,
-            } }, h("tds-header-item", { key: '55be05f1da2e65555fdb13580763e7b15df4c781', class: "button", active: this.open, selected: this.selected }, h("button", { key: '9eb3e2220029e73d24d9345806c870ce9826c772', ref: (el) => {
+            } }, h("tds-header-item", { key: '27b6d2680858443a26d7108b5318386df76db788', class: "button", active: this.open, selected: this.selected }, h("button", { key: '09d0ccb3bc5a31a897af65f5fcf4d47ee8b35192', 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: '8ffdeb2b1bbe11f99635f24284d8f75d9f52aa80', name: "icon" }), this.label, h("slot", { key: 'c7724d6290a146d3ef9236dfad2eb52316b4be8d', name: "label" }), !this.noDropdownIcon && (h("tds-icon", { key: '411ea6036dcb9e072a53faf9354a5e20eff9b174', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Dropdown icon" })))), this.buttonEl && (h("tds-popover-canvas", { key: '496888031b02d9c86c7296a569e14276da1b8fdc', 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: '50c872c297116ece9dd5da41398aac3bd88cd529', name: "icon" }), this.label, h("slot", { key: '141a43cdc4c8aeade4d547bbb91a28f62542bb98', name: "label" }), !this.noDropdownIcon && (h("tds-icon", { key: '13f2f8d6b264f09dea45e9b7809adab1b83db683', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Dropdown icon" })))), this.buttonEl && (h("tds-popover-canvas", { key: '10b18c15ae1d2c0fbafaa82bed4ae7759c857c54', 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.js

@@ -72,7 +72,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: '57e8ecd046b7a260f1516fc80673e9d095ffd4d3' }, attributes), h("slot", { key: 'e0bafe5fffcf8864faebd4603597e3e424a35046' })));
+        return (h(Host, Object.assign({ key: '3eeb33a5a5ba4afbfa21bd65fc4ad8ca7d8feddf' }, attributes), h("slot", { key: '5561862a0377a76cae8d781849c4de10c9e8cdeb' })));
     }
     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.js

@@ -8,10 +8,10 @@ export class TdsHeaderDropdownListItem {
         this.size = 'md';
     }
     render() {
-        return (h(Host, { key: 'a77c76be838a9f7036fe712b86cdf2f5b3c0c46f' }, h("div", { key: 'a3740446c4fed86228fa14ecb20b99b2c707f97b', class: {
+        return (h(Host, { key: '1dd37d8c57686fdde3bbf602cd2d327237ff9ee8' }, h("div", { key: 'ecbcceac23e94264aa3bfd253190c358d415492d', class: {
                 'component': true,
                 'component-selected': this.selected,
-            } }, h("slot", { key: '0a037fd8059aa356ed9885e3e06d391f876e2fc3' }))));
+            } }, h("slot", { key: '0e02564e017aaea2a0e9336e64fb853ecf4db367' }))));
     }
     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.js

@@ -11,7 +11,7 @@ export class TdsHeaderDropdownListLgUser {
         this.subheader = undefined;
     }
     render() {
-        return (h(Host, { key: '88298dc621372f56b0336686d055f27ef7bfee8a', role: "listitem" }, h("div", { key: 'da8b981e30d4cca52b4dfc2813e2d706f7c18d30', class: "user-box" }, this.imgUrl && h("img", { key: 'f81a370f4499f5bec4eedef0ef2d1aaa5aeca4ca', src: this.imgUrl, alt: this.imgAlt }), h("slot", { key: '33c9d2b8d0761d6915129cd03f4b596b5c05c1b4', name: "thumbanil" }), h("div", { key: '78a05fa64af6d694b4927fef55260e18c2d5711f', class: "user-content" }, h("div", { key: '15f6a48e0f10574ae14af2e2d92342ec77e85aa1', class: "header" }, this.header, h("slot", { key: '12ebbfbc257918f264c76e7d38a28827880cadec', name: "header" })), h("div", { key: 'bbd348e04b5ea5732bb4426547ef5ed9eddf55d0', class: "subheader" }, this.subheader, h("slot", { key: '403e7f20cb5b564928759ce0be1b058d12610290', name: "subheader" }))))));
+        return (h(Host, { key: 'ce178361998f3e7e64972a5a2971b3c39d9cd1eb', role: "listitem" }, h("div", { key: 'cd52038858fe6fb243f013d741343abd0bc529f1', class: "user-box" }, this.imgUrl && h("img", { key: '2f269c20c2e54695630b559002464f92a4f332bc', src: this.imgUrl, alt: this.imgAlt }), h("slot", { key: '567bcc9d198d5e9e1a9ffd4c213dd2cf80ffbbb6', name: "thumbanil" }), h("div", { key: '06a2def2886269e2399a1b95850b077e8235fdfb', class: "user-content" }, h("div", { key: 'bb189ed4a6a22a884837d876255dcff7495c5200', class: "header" }, this.header, h("slot", { key: 'b88637de2dbff8fdc5f2280f123abd8b44d8f20e', name: "header" })), h("div", { key: '34b503dd4ec0ac5c450947e4019783af7074b777', class: "subheader" }, this.subheader, h("slot", { key: '8ffcd878217abd7036b304ed70ae12a4bd992350', 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

@@ -11,7 +11,7 @@ export class TdsHeaderHamburger {
     }
     render() {
         const inheritedButtonProps = Object.assign({}, inheritAriaAttributes(this.host));
-        return (h(Host, { key: '8bec5bb46e8aaa4913a246e1ef4823b12599d9fb' }, h("tds-header-item", { key: 'ddfd826c0f40bf2408961e78351e6c6dc3c6d36f' }, h("button", Object.assign({ key: '6dea0e5d6ba5cfacb13e267e5f6cf5644fbe16ee' }, inheritedButtonProps, { "aria-label": this.tdsAriaLabel }), h("tds-icon", { key: '8fbefe929bbec4603259718fece833366ee6dff0', class: "icon", name: "burger", size: "20px" })))));
+        return (h(Host, { key: '5ea87f94483c167f580c26c7914a22cb6caea885' }, h("tds-header-item", { key: 'f2792ffbd859c263165b95b7d2cd9d1c76509c8f' }, h("button", Object.assign({ key: 'd1c44fcf5b7bb9c3cefbbbf09e3217704770f761' }, inheritedButtonProps, { "aria-label": this.tdsAriaLabel }), h("tds-icon", { key: '62ec94113557c7032a3145ad4b6ac22d39d6453c', 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.js

@@ -74,10 +74,10 @@ export class TdsHeaderItem {
         }
     }
     render() {
-        return (h(Host, { key: '8bf1f05e837866442a31d6079cebce9f3f4b6a01' }, h("tds-core-header-item", { key: '2000815259c320803ecc6bb71553d56187c40983', class: {
+        return (h(Host, { key: '4a9d013ab3abde506f9992453cae793db9a652cf' }, h("tds-core-header-item", { key: '359634d0bca7720c8a9bfd5c696a89c97df76a75', class: {
                 'component-active': this.active,
                 'component-selected': this.selected,
-            } }, h("slot", { key: '35753d03b2ca354b0054172079ac20cd87524538' }))));
+            } }, h("slot", { key: '7318ad6ea4d1dfa0f16b70c6f305ece087aeea2e' }))));
     }
     static get is() { return "tds-header-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -53,11 +53,11 @@ export class TdsHeaderLauncher {
             }, 'ref': (el) => {
                 this.buttonEl = el;
             } });
-        return (h(Host, { key: 'e7973fca6e39c2e3465a015f65354ea421067031' }, h("div", { key: '37860b4e05c96777e0dce1173bf6fb5954849ed8', class: {
+        return (h(Host, { key: 'a1c8cce3e26d57b654700893add3e5e1554e23d0' }, h("div", { key: 'bfc4e2f77d142f4913a4509b0c16b7503c942bf3', class: {
                 'wrapper': true,
                 'state-open': this.open,
                 'state-list-type-menu': this.hasListTypeMenu,
-            } }, h("tds-header-launcher-button", Object.assign({ key: '99cbfc65298f5da7f5601df6efdfc4d49fd6dfa8' }, buttonAttributes, { "tds-aria-label": this.tdsAriaLabel })), this.buttonEl && (h("tds-popover-canvas", { key: 'c395e13678f4eb67abae75722c609624c5f750e7', 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: 'c30e8b26d73a8d3a5aa5bf476226419b70c26061' }, buttonAttributes, { "tds-aria-label": this.tdsAriaLabel })), this.buttonEl && (h("tds-popover-canvas", { key: '10e13ac7fb52c3123dd51d1f91754262feb56134', 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

@@ -8,7 +8,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: '6d8b16f71586f3bc944f17aa80234605bbc57ab0' }, h("tds-header-item", { key: '49529617101956090cdc2092d4df80fdf376a123', active: this.active }, h("button", Object.assign({ key: '76cd7b84413aafedaec6b1326e55307bf640b73f' }, buttonProps, { "aria-label": this.tdsAriaLabel }), h("tds-icon", { key: '145394461e3bc680a2f2b07e82f8b3bb549f1e6d', class: "icon", name: "bento", size: "20px", "svg-title": this.tdsAriaLabel })))));
+        return (h(Host, { key: '62757385fdf2aa3c51af260f2761714aea4c9727' }, h("tds-header-item", { key: '199a00653122178784999c0b5d643b9b15cd8cc5', active: this.active }, h("button", Object.assign({ key: 'd59e77834e10763d5b1c518d5bcd96e51c4dad58' }, buttonProps, { "aria-label": this.tdsAriaLabel }), h("tds-icon", { key: 'add07749af57c4110b6baeda3944e97ddf36c067', 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

@@ -28,7 +28,7 @@ export class TdsHeaderLauncherGrid {
             'role': 'list',
             'aria-labelledby': (_a = this.headingElement) === null || _a === void 0 ? void 0 : _a.id,
         };
-        return (h(Host, { key: '5d0824ce5d829d78fd61e2e53e08b6bdca0e4569' }, h("div", Object.assign({ key: '7e6f891f6bc92b4f93874a538e017382c72e176e' }, listAttributes), h("slot", { key: '31133b8760e19ed767f24544fea026c59c181e53' }))));
+        return (h(Host, { key: '3f2f7a655fef2f9d996851065a54b1f86929c989' }, h("div", Object.assign({ key: '2a111751b897f09bedeaa332fb7c9c0ef46ba5cd' }, listAttributes), h("slot", { key: '9e172d88f775c2f7508fb55b7de5cec49e7c9160' }))));
     }
     static get is() { return "tds-header-launcher-grid"; }
     static get originalStyleUrls() {

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: '1506d0cda6ddcdd025ea7febf24e34c8e0d5b479', role: "listitem" }, h("slot", { key: 'f6ae96ad0c953297fddf43cfcee6d688a93846f5' })));
+        return (h(Host, { key: 'fc7949be187e1a83b56e8cf3a7fd1ac51a4c76cc', role: "listitem" }, h("slot", { key: '998d551d53a7e0b6536a5a45f5e67a7425508f70' })));
     }
     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.js

@@ -8,7 +8,7 @@ export class TdsHeaderLauncherGridTitle {
         this.uuid = generateUniqueId();
     }
     render() {
-        return (h(Host, { key: '25db2b1431472f1883bce6605c060e48129dacc5' }, h("h3", { key: '0caaece113240546638d8d0366bcecba6f945986', class: "tds-header-launcher-grid-title", id: `tds-header-launcher-grid-title-${this.uuid}` }, h("slot", { key: '16962f436f38d529357dbaade615badd87862323' }))));
+        return (h(Host, { key: '586d5eb51af05ee6a6f1897ce77a765eae3d79dd' }, h("h3", { key: 'e1fab245e78ed2ab2e2c4be5abe1e8bdb218d1eb', class: "tds-header-launcher-grid-title", id: `tds-header-launcher-grid-title-${this.uuid}` }, h("slot", { key: '7b1f819e8e4a0353f06d88b6c4ec5dc3ad254f3a' }))));
     }
     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: 'ceedbada9d5a96ecdb5306b0e55f939ba69c78d8' }, h("tds-header-dropdown-list", { key: 'a1ffa08021a4ac0d3aad0401330b6d82ad4e20f9', size: "lg" }, h("slot", { key: 'e0808a6e71a6bb26e8b56005c9552fde5af9296b' }))));
+        return (h(Host, { key: 'd8237d7c159c99b1ddef846db5a18900bb301504' }, h("tds-header-dropdown-list", { key: 'd314cd468397a9a288e5842cae1a1910d111ac40', size: "lg" }, h("slot", { key: '03465a88d59f0f56ec18f675d129560100d254dd' }))));
     }
     static get is() { return "tds-header-launcher-list"; }
 }

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: 'bcc63c58186216485acf6e6e0f896158e92cd29e' }, h("tds-header-dropdown-list-item", { key: 'e4b963bf20b97aa19f8f6dbd4d4a6face04220db', size: "lg" }, h("slot", { key: '03445a4fe12c6f5a283b6d2635d657bbfd103263' }))));
+        return (h(Host, { key: '7ec01704950bdb48cbc48251e5cb4ad0e4b8babf' }, h("tds-header-dropdown-list-item", { key: '2274d354403ca35178bad010cfcec06f716ac24c', size: "lg" }, h("slot", { key: '35a3c7cdb933bb9bb1be32770b74d3ae9441b1ff' }))));
     }
     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.js

@@ -8,7 +8,7 @@ export class TdsHeaderLauncherListTitle {
         this.uuid = generateUniqueId();
     }
     render() {
-        return (h(Host, { key: '2bd6c5fa87fe1b94065980a7f7794ada3ccf2a9f' }, h("h3", { key: '3ccf8d967a2bda31d1724d4d3bf522cb1052f497', class: "tds-header-launcher-list-title", id: `tds-header-launcher-${this.uuid}` }, h("slot", { key: '831e18f03058184f3825541fd2be34d07a443e78' }))));
+        return (h(Host, { key: 'c280ad56213dd6f54b3c4eac8695e2ecef6819f8' }, h("h3", { key: 'a1e4c17cb97f27bb882de8c8092593e654168e02', class: "tds-header-launcher-list-title", id: `tds-header-launcher-${this.uuid}` }, h("slot", { key: 'eaf2effb5d779e1faaa030a2e2df2b6afde51d66' }))));
     }
     static get is() { return "tds-header-launcher-list-title"; }
     static get originalStyleUrls() {

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: '4af2f894bf508d0ea8f5c934f4b6e3be61f1ce1a' }, h("slot", { key: 'e5eaaf9c68f77041f6056af1bb7e1101b48c1ffc' })));
+        return (h("h4", { key: 'b3ac74d4d978c32c1dfd417a5217bc5953075033' }, h("slot", { key: '67d55d1f3413b130767ae8db2e1d952f27beb00a' })));
     }
     static get is() { return "tds-header-title"; }
     static get encapsulation() { return "shadow"; }

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

@@ -32,7 +32,7 @@ export class TdsHeader {
     }
     render() {
         const navAttributes = Object.assign({}, inheritAriaAttributes(this.host));
-        return (h(Host, { key: 'f5c7796ebe3f5d9bd6e555f0dd01f8ace54c1cd8' }, h("slot", { key: '77cba127f947cc8fefa875a6db0e68bf52c5a80e', name: "hamburger" }), h("slot", { key: 'daf9d8299734f72355eeaeb307dcc3e25520a7b8', name: "title" }), h("nav", Object.assign({ key: '904338fd0fb8ab3ce42b46ee482d021667fe49e8' }, navAttributes), h("ul", { key: '66994fd2de781178624f8d67c88e4d75e84d2844', class: "tds-header-component-list" }, h("slot", { key: '51ee40aa7b17fb2a36ca23c2cebfb74efb69ea24' }), h("li", { key: 'db64903ac70ee12d48cd5029997949875caa53e8', class: "tds-header-middle-spacer" }), h("slot", { key: '80a48331b218b734061a421c9e31f8fd1b98be1a', name: "end" })))));
+        return (h(Host, { key: '1e9a1427f3038ac59e3c89669049679a06626fff' }, h("slot", { key: 'a2e84cf4bfc88b8bc3a971cf374593afcd3eabae', name: "hamburger" }), h("slot", { key: 'c8a49826b7c504ddd17be29a3b6ae814848d6033', name: "title" }), h("nav", Object.assign({ key: '750a09450f2edfd0d335ca7863b084f62655129e' }, navAttributes), h("ul", { key: '1bca7410f4c0f81ffa77e57fba7c48f64afc22ab', class: "tds-header-component-list" }, h("slot", { key: 'fdaaac9d39e9cf5f396004dc1e1a7ce6d83a7ada' }), h("li", { key: '339deea3cbd820159adc3fe7dfa8a6a8e5192698', class: "tds-header-middle-spacer" }), h("slot", { key: '37273630aaf66ada7154ebb6f4ea01cc0ce0f94a', name: "end" })))));
     }
     static get is() { return "tds-header"; }
     static get originalStyleUrls() {

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

@@ -1,6 +1,14 @@
 // Check status of webFont solution
 import { h, Host } from "@stencil/core";
-import { iconsCollection } from "./iconsArray";
+import { iconsCollection as scaniaIcons } from "./scaniaIconsArray";
+import { iconsCollection as tratonIcons } from "./tratonIconsArray";
+// Map of brand classes to their respective icon collections
+const brandIconMap = {
+    scania: scaniaIcons,
+    traton: tratonIcons,
+    // Add new brands here in the future
+    // Example: newBrand: newBrandIcons,
+};
 export class Icon {
     constructor() {
         this.setIcons = () => this.arrayOfIcons.map((element) => {
@@ -13,10 +21,17 @@ export class Icon {
         this.svgTitle = undefined;
         this.tdsAriaHidden = false;
         this.svgDescription = undefined;
-        this.icons_object = iconsCollection;
+        this.icons_object = undefined;
         this.arrayOfIcons = [];
     }
     componentWillLoad() {
+        this.detectAndSetBrand();
+    }
+    detectAndSetBrand() {
+        const brandClasses = Object.keys(brandIconMap);
+        const matchingBrand = brandClasses.find((brand) => this.host.closest(`.${brand}`));
+        // Set the icons_object based on the found brand or default to scania
+        this.icons_object = matchingBrand ? brandIconMap[matchingBrand] : scaniaIcons;
         this.arrayDataWatcher(this.icons_object);
     }
     arrayDataWatcher(newValue) {
@@ -29,7 +44,7 @@ export class Icon {
         this.arrayOfIcons = [...this.arrayOfIcons];
     }
     render() {
-        return h(Host, { key: 'd04e031dc560ea9d4d9e143a5d1b74573f3fc570' }, this.setIcons());
+        return h(Host, { key: 'e54289a5f2cf5717ffc9aafc0295a6aafd1cb7de' }, this.setIcons());
     }
     static get is() { return "tds-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -147,4 +162,5 @@ export class Icon {
             "arrayOfIcons": {}
         };
     }
+    static get elementRef() { return "host"; }
 }