@scania/tegel 1.42.0 → 1.44.0-sonarcloud-0

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

@@ -25,10 +25,11 @@ export class TdsDropdownOption {
             this.label = ((_c = this.host.textContent) === null || _c === void 0 ? void 0 : _c.trim()) || '';
         };
         this.handleSingleSelect = () => {
+            var _a, _b;
             if (!this.disabled) {
                 this.selected = true;
-                this.parentElement.appendValue(this.internalValue);
-                this.parentElement.close();
+                (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.appendValue(this.internalValue);
+                (_b = this.parentElement) === null || _b === void 0 ? void 0 : _b.close();
                 this.tdsSelect.emit({
                     value: this.internalValue,
                     selected: this.selected,
@@ -36,9 +37,10 @@ export class TdsDropdownOption {
             }
         };
         this.handleMultiselect = (event) => {
+            var _a, _b;
             if (!this.disabled) {
                 if (event.detail.checked) {
-                    this.parentElement.appendValue(this.internalValue);
+                    (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.appendValue(this.internalValue);
                     this.selected = true;
                     this.tdsSelect.emit({
                         value: this.internalValue,
@@ -46,7 +48,7 @@ export class TdsDropdownOption {
                     });
                 }
                 else {
-                    this.parentElement.removeValue(this.internalValue);
+                    (_b = this.parentElement) === null || _b === void 0 ? void 0 : _b.removeValue(this.internalValue);
                     this.selected = false;
                     this.tdsSelect.emit({
                         value: this.internalValue,
@@ -71,7 +73,7 @@ export class TdsDropdownOption {
             }
         };
         this.value = undefined;
-        this.internalValue = undefined;
+        this.internalValue = '';
         this.disabled = false;
         this.tdsAriaLabel = undefined;
         this.selected = false;
@@ -89,13 +91,14 @@ export class TdsDropdownOption {
         this.internalValue = convertToString(this.value);
     }
     render() {
-        return (h(Host, { key: 'a92f443fccb282309c20c52b9214b6b03b03e7ee' }, h("div", { key: 'b5dcc6cb5cb846adfb79f1e80e39e84ab85022c5', class: `dropdown-option
+        return (h(Host, { key: '5276b572424933484ff6d923e5210dcd647b9554' }, h("div", { key: '5eea7afac6ba6c1badfbc8ccf1f53ceb24df567d', class: `dropdown-option
           ${this.size}
           ${this.selected ? 'selected' : ''}
           ${this.disabled ? 'disabled' : ''}
           ` }, this.multiselect ? (h("div", { class: "multiselect", onKeyDown: (event) => {
+                var _a;
                 if (event.key === 'Escape') {
-                    this.parentElement.close();
+                    (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.close();
                 }
             } }, h("tds-checkbox", { onTdsChange: (event) => {
                 this.handleMultiselect(event);
@@ -127,11 +130,11 @@ export class TdsDropdownOption {
                 "mutable": false,
                 "complexType": {
                     "original": "string | number",
-                    "resolved": "number | string",
+                    "resolved": "number | string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Value of the dropdown option"
@@ -162,11 +165,11 @@ export class TdsDropdownOption {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Defines aria-label attribute for the option"

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

@@ -174,7 +174,8 @@
   visibility: hidden;
 }
 
-:host {
+:host,
+:root {
   --tds-scrollbar-width-standard: thin;
   --tds-scrollbar-width: 10px;
   --tds-scrollbar-height: 10px;

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

@@ -44,7 +44,7 @@ export class TdsDropdown {
         };
         this.getSelectedChildrenLabels = () => {
             var _a;
-            return (_a = this.getSelectedChildren()) === null || _a === void 0 ? void 0 : _a.map((element) => element.textContent.trim());
+            return (_a = this.getSelectedChildren()) === null || _a === void 0 ? void 0 : _a.map((element) => { var _a; return (_a = element.textContent) === null || _a === void 0 ? void 0 : _a.trim(); });
         };
         this.getValue = () => {
             const labels = this.getSelectedChildrenLabels();
@@ -75,6 +75,7 @@ export class TdsDropdown {
             return this.openDirection;
         };
         this.handleToggleOpen = () => {
+            var _a;
             if (!this.disabled) {
                 this.open = !this.open;
                 if (this.open) {
@@ -82,7 +83,7 @@ export class TdsDropdown {
                         this.focusInputElement();
                     }
                     else {
-                        const button = this.host.shadowRoot.querySelector('button');
+                        const button = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button');
                         if (button) {
                             button.focus();
                         }
@@ -110,7 +111,8 @@ export class TdsDropdown {
             }
             else {
                 this.filterResult = children.filter((element) => {
-                    if (!this.normalizeString(element.textContent)
+                    var _a;
+                    if (!this.normalizeString((_a = element === null || element === void 0 ? void 0 : element.textContent) !== null && _a !== void 0 ? _a : '')
                         .toLowerCase()
                         .includes(this.normalizeString(query).toLowerCase())) {
                         element.setAttribute('hidden', '');
@@ -179,10 +181,10 @@ export class TdsDropdown {
         this.value = null;
         this.tdsAriaLabel = undefined;
         this.open = false;
-        this.internalValue = undefined;
-        this.filterResult = undefined;
-        this.filterFocus = undefined;
-        this.internalDefaultValue = undefined;
+        this.internalValue = '';
+        this.filterResult = null;
+        this.filterFocus = false;
+        this.internalDefaultValue = '';
         this.selectedOptions = [];
         this.filterQuery = '';
     }
@@ -302,10 +304,13 @@ export class TdsDropdown {
             normalizedValue = [convertToString(value)];
         }
         this.updateDropdownStateFromUser(normalizedValue);
-        return this.getSelectedChildren().map((element) => ({
-            value: element.value,
-            label: element.textContent.trim(),
-        }));
+        return this.getSelectedChildren().map((element) => {
+            var _a;
+            return ({
+                value: element.value,
+                label: (_a = element.textContent) === null || _a === void 0 ? void 0 : _a.trim(),
+            });
+        });
     }
     async reset() {
         this.updateDropdownStateFromUser([]);
@@ -316,13 +321,14 @@ export class TdsDropdown {
     }
     /** Method that forces focus on the input element. */
     async focusElement() {
+        var _a;
         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');
+            const button = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button');
             if (button) {
                 button.focus();
             }
@@ -374,7 +380,7 @@ export class TdsDropdown {
         }
     }
     async onKeyDown(event) {
-        var _a;
+        var _a, _b;
         // Get the active element
         const { activeElement } = document;
         if (!activeElement) {
@@ -387,8 +393,11 @@ export class TdsDropdown {
             const startingIndex = activeElement.nextElementSibling
                 ? children.findIndex((element) => element === activeElement.nextElementSibling)
                 : 0;
-            const elementIndex = findNextFocusableElement(children, startingIndex);
-            children[elementIndex].focus();
+            if (children.length > 0) {
+                const elementIndex = findNextFocusableElement(children, startingIndex);
+                const target = typeof elementIndex === 'number' ? children[elementIndex] : children[0];
+                target === null || target === void 0 ? void 0 : target.focus();
+            }
         }
         else if (event.key === 'ArrowUp') {
             /* Get the index of the current focus index, if there is no
@@ -396,8 +405,11 @@ export class TdsDropdown {
             const startingIndex = activeElement.nextElementSibling
                 ? this.getChildren().findIndex((element) => element === activeElement.previousElementSibling)
                 : 0;
-            const elementIndex = findPreviousFocusableElement(children, startingIndex);
-            children[elementIndex].focus();
+            if (children.length > 0) {
+                const elementIndex = findPreviousFocusableElement(children, startingIndex);
+                const target = typeof elementIndex === 'number' ? children[elementIndex] : children[children.length - 1];
+                target === null || target === void 0 ? void 0 : target.focus();
+            }
         }
         else if (event.key === 'Escape') {
             this.open = false;
@@ -406,7 +418,7 @@ export class TdsDropdown {
                 (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus();
             }
             else {
-                const button = this.host.shadowRoot.querySelector('button');
+                const button = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('button');
                 button === null || button === void 0 ? void 0 : button.focus();
             }
         }
@@ -492,9 +504,9 @@ export class TdsDropdown {
         // 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: 'ebb4008f7e27e9f9de603b1dfeb5100f45f0e600', class: {
+        return (h(Host, { key: '1c8d408583a3161231a274bd76a94db4dae111d1', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: '77f30a6ec80264fe89422b8f129e763d2fe2a64c', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '3d3d3ca87cae2df4f043feb1f6bdbf4482cc4223', class: {
+            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: '710bd61829fb7dc14e07495a1d96a2e74f515276', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '14818b4fdde47c7117d29bd7438eddc2211c1136', class: {
                 'dropdown-select': true,
                 [this.size]: true,
                 'disabled': this.disabled,
@@ -538,22 +550,23 @@ export class TdsDropdown {
                     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: '48e96d8ecac8918e11c6e2c0e1321802b61dbf7d', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
-                this.dropdownList = 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: '90e7de10a3528da4a0e6216b507245d2f95c8d45', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
+                if (element)
+                    this.dropdownList = element;
             }, class: {
                 'dropdown-list': true,
                 [this.size]: true,
                 [this.getOpenDirection()]: true,
-                'label-outside': this.label && this.labelPosition === 'outside',
+                'label-outside': !!(this.label && this.labelPosition === 'outside'),
                 'open': this.open,
                 'closed': !this.open,
                 [`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
                 [`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
-            } }, h("slot", { key: 'd49f3a638a9f6b1b08e3489dffad27151c0c554f', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'b38d308604e30fdb130d72295d2d3f7bf2fb9bd6', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '1f8160ac1f0ecdc0d4f29faa31c469a0bd04b0d6', id: helperId, class: {
+            } }, h("slot", { key: 'd57e1b8dd130df19847987b98c46604dc029e691', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '14d3025b9eb316dfd37bea42c45b058fa5b18492', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: 'ec6fe5289476727481a936b32720a62ce8aee3da', id: helperId, class: {
                 helper: true,
                 error: this.error,
                 disabled: this.disabled,
-            } }, this.error && h("tds-icon", { key: '487fb6deb5bd27347b2cd4f607e5488543185894', name: "error", size: "16px" }), this.helper))));
+            } }, this.error && h("tds-icon", { key: 'b1a7f99b383fee70c6bbdd90d65ab773e7b1a976', name: "error", size: "16px" }), this.helper))));
     }
     static get is() { return "tds-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -574,11 +587,11 @@ export class TdsDropdown {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Name for the Dropdowns input element."
@@ -609,11 +622,11 @@ export class TdsDropdown {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Helper text for the Dropdown."
@@ -626,11 +639,11 @@ export class TdsDropdown {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Label text for the Dropdown."
@@ -643,11 +656,11 @@ export class TdsDropdown {
                 "mutable": false,
                 "complexType": {
                     "original": "'inside' | 'outside'",
-                    "resolved": "\"inside\" | \"outside\"",
+                    "resolved": "\"inside\" | \"outside\" | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Label text position"
@@ -659,8 +672,8 @@ export class TdsDropdown {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary'",
-                    "resolved": "\"primary\" | \"secondary\"",
+                    "original": "'primary' | 'secondary' | null",
+                    "resolved": "\"primary\" | \"secondary\" | null",
                     "references": {}
                 },
                 "required": false,
@@ -696,11 +709,11 @@ export class TdsDropdown {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Placeholder text for the Dropdown."
@@ -821,7 +834,7 @@ export class TdsDropdown {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -839,11 +852,11 @@ export class TdsDropdown {
                 "mutable": false,
                 "complexType": {
                     "original": "string | number",
-                    "resolved": "number | string",
+                    "resolved": "number | string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Default value selected in the Dropdown."
@@ -855,8 +868,8 @@ export class TdsDropdown {
                 "type": "any",
                 "mutable": true,
                 "complexType": {
-                    "original": "string | number | (string | number)[]",
-                    "resolved": "(string | number)[] | number | string",
+                    "original": "string | number | (string | number)[] | null",
+                    "resolved": "(string | number)[] | null | number | string",
                     "references": {}
                 },
                 "required": false,
@@ -874,11 +887,11 @@ export class TdsDropdown {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Defines aria-label attribute for input"
@@ -911,8 +924,8 @@ export class TdsDropdown {
                     "text": "Change event for the Dropdown."
                 },
                 "complexType": {
-                    "original": "{\n    name: string;\n    value: string;\n  }",
-                    "resolved": "{ name: string; value: string; }",
+                    "original": "{\n    name: string | undefined;\n    value: string | null;\n  }",
+                    "resolved": "{ name: string | undefined; value: string | null; }",
                     "references": {}
                 }
             }, {
@@ -996,14 +1009,14 @@ export class TdsDropdown {
         return {
             "setValue": {
                 "complexType": {
-                    "signature": "(value: string | number | string[] | number[], label?: string) => Promise<{ value: string | number; label: string; }[]>",
+                    "signature": "(value: string | number | string[] | number[], label?: string) => Promise<{ value: string | number | undefined; label: string | undefined; }[]>",
                     "parameters": [{
                             "name": "value",
                             "type": "string | number | string[] | number[]",
                             "docs": ""
                         }, {
                             "name": "label",
-                            "type": "string",
+                            "type": "string | undefined",
                             "docs": ""
                         }],
                     "references": {
@@ -1016,7 +1029,7 @@ export class TdsDropdown {
                             "id": "global::HTMLTdsDropdownOptionElement"
                         }
                     },
-                    "return": "Promise<{ value: string | number; label: string; }[]>"
+                    "return": "Promise<{ value: string | number | undefined; label: string | undefined; }[]>"
                 },
                 "docs": {
                     "text": "Method for setting the selected value of the Dropdown.\n\nSingle selection example:\n\n<code>\ndropdown.setValue('option-1', 'Option 1');\n</code>\n\nMultiselect example:\n\n<code>\ndropdown.setValue(['option-1', 'option-2']);\n</code>",

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

@@ -14,16 +14,17 @@ export class TdsFooterGroup {
         this.titleText = undefined;
         this.tdsListAriaLabel = undefined;
         this.open = false;
-        this.isMobile = undefined;
+        this.isMobile = false;
     }
     updateIsMobile() {
         this.isMobile = window.innerWidth <= 992;
     }
     connectedCallback() {
+        var _a, _b;
         this.updateIsMobile();
-        this.topPartGroup = this.host.parentElement.slot === 'top';
+        this.topPartGroup = ((_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.slot) === 'top';
         if (!this.topPartGroup) {
-            this.slotPosition = this.host.parentElement.slot === 'end' ? 'end' : 'start';
+            this.slotPosition = ((_b = this.host.parentElement) === null || _b === void 0 ? void 0 : _b.slot) === 'end' ? 'end' : 'start';
         }
         if (!this.tdsListAriaLabel) {
             console.warn('Tegel Footer Group component: missing tdsListAriaLabel prop');
@@ -41,12 +42,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: '96594800603cf0e9cebf94cb567da570df3dfa34', "aria-expanded": this.open ? 'true' : 'false' }, h("div", { key: 'f131ba95fba5cbd3113dfae4ab0c40bfe322f370', 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: 'a7ba1cb22025afa4f11680108e9382cf388d692e', "aria-label": this.tdsListAriaLabel }, h("div", { key: 'af304cf0fe2282b44b86cef3647177d9f89bd928', 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: '7117d7f69790dac3baab851edd7bb4420c2f7c3d' }))))));
     }
     static get is() { return "tds-footer-group"; }
     static get encapsulation() { return "shadow"; }
@@ -67,11 +68,11 @@ export class TdsFooterGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Title text for the link group, only valid on top part of Footer."
@@ -84,11 +85,11 @@ export class TdsFooterGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Value to be used for the aria-label attribute for the nav element wrapping the list. Should be unique for accessibility."

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

@@ -7,10 +7,14 @@ export class TdsFooterItem {
         this.parentIsTopPart = false;
     }
     connectedCallback() {
-        this.parentIsTopPart = this.host.closest('tds-footer-group').parentElement.slot === 'top';
+        var _a;
+        const closestGroup = this.host.closest('tds-footer-group');
+        if (closestGroup) {
+            this.parentIsTopPart = ((_a = closestGroup.parentElement) === null || _a === void 0 ? void 0 : _a.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: 'ed7e825469fcae5d17af59f0a5f845fcadf8bf89', role: "listitem" }, h("div", { key: '74b64120093b651b91eba2b2dd98c5300a590fae', class: `${this.parentIsTopPart ? 'top-part-child' : ''}` }, h("slot", { key: '84a215c3bc66039e4973337bb2bc7de3dbe5ed77' }))));
     }
     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: 'cc332e8bb49a94ee80c1cbd73552abb0ce4681df', 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: '3bd37308da24350daae97ecac9d5cade3d8b6e24' }, usesTopSlot && h("slot", { key: '17bb2a9db6b27aad3405102fa2a2c1c380a5043f', name: "top" }), h("div", { key: '78bd64db7bac22157a18ebb8792075e6e435d3ba', class: "footer-main" }, (usesStartSlot || usesEndSlot) && (h("div", { key: '25112b84db722b6f4c1674957506f645f70f1fce', class: "footer-main-top" }, usesStartSlot && h("slot", { key: '4cd0f265f684cf7773e6d799f66e87930d223447', name: "start" }), usesEndSlot && h("slot", { key: '172f7326be9a216271e4815c121777c9d929b532', name: "end" }))), h("div", { key: '441c18a7502f94f8c804e0b9bd594f96c8a1b22a', class: "footer-main-bottom" }, h("small", { key: 'cb62fd7f2e38da47f0adb104d44ff6e83e03ce4b', class: "copyright" }, usesCopyrightSlot ? h("slot", { name: "copyright" }) : this.copyrightText), h("div", { key: 'ba85b724529e318a7120c15dfbb885831a41b4f8', class: "brand" }, h("p", { key: '5e4ee4c61f4fbdb8371b92e544c29e600b77ffe9' }, "Scania")))))));
     }
     static get is() { return "tds-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -38,8 +38,8 @@ export class TdsFooter {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary'",
-                    "resolved": "\"primary\" | \"secondary\"",
+                    "original": "'primary' | 'secondary' | null",
+                    "resolved": "\"primary\" | \"secondary\" | null",
                     "references": {}
                 },
                 "required": false,

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

@@ -5,10 +5,10 @@ import { h, Host } from "@stencil/core";
 export class TdsHeaderBrandSymbol {
     render() {
         const aTag = this.host.querySelector('a');
-        if (!aTag.hasAttribute('aria-label')) {
+        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: 'b3f7cf4d264f2046844814a80f7b9b6a920b1a1e' }, h("tds-header-item", { key: '0be33ffe57b94442fac4f1e686f87fb1e2f1911d' }, h("slot", { key: '3f7f636bc5f7c1b2ee009c774337d0b41c45e477' }))));
+        return (h(Host, { key: '2692fca9f014e54adafca2cca8e089456d943240' }, h("tds-header-item", { key: '0e31d7f161e6fd60ce217aacc169040628b3748e' }, h("slot", { key: '7bcfa8a38d0725b5127dc6e13dee2d371749c49f' }))));
     }
     static get is() { return "tds-header-brand-symbol"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
-:host {
+:host,
+:root {
   --tds-scrollbar-width-standard: thin;
   --tds-scrollbar-width: 10px;
   --tds-scrollbar-height: 10px;

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

@@ -29,17 +29,19 @@ export class TdsHeaderDropdown {
         }
     }
     handleKeyDown(event) {
+        var _a;
         if (event.key === 'Escape' && this.open) {
             this.open = false;
-            this.buttonEl.focus();
+            (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }
     toggleDropdown() {
         this.open = !this.open;
         if (this.open) {
             requestAnimationFrame(() => {
+                var _a;
                 const selectors = "a, [tabindex='0']";
-                const firstFocusableElement = this.host.shadowRoot.querySelector(selectors) || this.host.querySelector(selectors);
+                const firstFocusableElement = ((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(selectors)) || this.host.querySelector(selectors);
                 if (firstFocusableElement instanceof HTMLElement) {
                     firstFocusableElement.focus();
                 }
@@ -47,13 +49,13 @@ export class TdsHeaderDropdown {
         }
     }
     render() {
-        return (h(Host, { key: '0b5e0474e13db90b9a61f8177b4191d26f542d9f' }, h("div", { key: 'b45a13bc693415d7ff3d48cca6e5899202f3d24a', class: {
+        return (h(Host, { key: '5ea7f4d3d53fd8d4148bcf1bc0f7444a6b7469f8' }, h("div", { key: 'e972495e46f96576fb28bba38f9bca68fd6d901e', class: {
                 'state-open': this.open,
-            } }, h("tds-header-item", { key: 'd8bd0a9a07ac2f1e816faf7790756ba496918165', class: "button", active: this.open, selected: this.selected }, h("button", { key: '8636bf077ec6e58463dd2b422621d7d56a29c38f', ref: (el) => {
+            } }, h("tds-header-item", { key: 'f45bd2e8c6f2b1258e415cc111691dd282cdb3f9', class: "button", active: this.open, selected: this.selected }, h("button", { key: 'f1bce15e1258647503e4a24f6cf7d7f5eb641cdd', 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: 'f2e9701f7d939ad630c9bcc37ad4aab77de189eb', name: "icon" }), this.label, h("slot", { key: '51e0e5b9f10a8feb8df8a1ef7474ec7ac14e1242', name: "label" }), !this.noDropdownIcon && (h("tds-icon", { key: 'd7476899681822df78fb75fe8dbeaf08cd076ba7', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Dropdown icon" })))), this.buttonEl && (h("tds-popover-canvas", { key: '79f9338c0c92ff4aa1baa6331c303c19d846557f', 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: '2b392ba923ee98e3c2bd5c86ae8cbb3eb78bf182', name: "icon" }), this.label, h("slot", { key: '0fc721ebf454e77770b7aeca79296f5a65d6031e', name: "label" }), !this.noDropdownIcon && (h("tds-icon", { key: 'd8fa1bda5368e8694f429f5724d06fb5de010a50', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Dropdown icon" })))), this.buttonEl && (h("tds-popover-canvas", { key: '894eb3d523ddb8f8a9b6e0dc248730bb13173c88', id: `tds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
                 {
                     name: 'flip',
                     options: {
@@ -81,11 +83,11 @@ export class TdsHeaderDropdown {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The label of the button that opens the dropdown.\nThis is an alternative to the label slot."
@@ -134,11 +136,11 @@ export class TdsHeaderDropdown {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Value to be used by the aria-label attribute"