@scania/tegel 1.43.0 → 1.44.0-sonarcloud.0

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

@@ -73,7 +73,7 @@ export class TdsDropdownOption {
             }
         };
         this.value = undefined;
-        this.internalValue = undefined;
+        this.internalValue = '';
         this.disabled = false;
         this.tdsAriaLabel = undefined;
         this.selected = false;
@@ -91,7 +91,7 @@ export class TdsDropdownOption {
         this.internalValue = convertToString(this.value);
     }
     render() {
-        return (h(Host, { key: 'c073be0f228d93964e103da392ef7609878f9d0c' }, h("div", { key: 'bb4349fa2c32884bfafc80cd3c58a0e9fe738e53', class: `dropdown-option
+        return (h(Host, { key: '5276b572424933484ff6d923e5210dcd647b9554' }, h("div", { key: '5eea7afac6ba6c1badfbc8ccf1f53ceb24df567d', class: `dropdown-option
           ${this.size}
           ${this.selected ? 'selected' : ''}
           ${this.disabled ? 'disabled' : ''}
@@ -130,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"
@@ -165,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

@@ -181,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 = '';
     }
@@ -504,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: '85290c5636e4b4cb1ecc5edf56988f108c4891bb', class: {
+        return (h(Host, { key: '1c8d408583a3161231a274bd76a94db4dae111d1', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: '07844538d29bda55566120df7f24b8768e280c81', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '5320c4158d81e1b699083c08591ef52930e0464d', 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,
@@ -550,7 +550,7 @@ 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: '61d3b4a367a5c8e9e504281352bc60725dc0c5b5', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "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: '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: {
@@ -562,11 +562,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: '2b10550a0240f6aad13c9bfe1e144f0b9b45add4', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'b2a3e914417ccfe37cd7be7abf0251ca251557e3', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '12f5cbad400b81034587271a428c3b141b4a5bc4', 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: '08a62de7f85ad15a7490aaec4b8c40aca9252e19', 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"; }
@@ -587,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."
@@ -622,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."
@@ -639,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."
@@ -656,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"
@@ -709,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."
@@ -852,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."
@@ -887,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"
@@ -924,8 +924,8 @@ export class TdsDropdown {
                     "text": "Change event for the Dropdown."
                 },
                 "complexType": {
-                    "original": "{\n    name: string;\n    value: string | null;\n  }",
-                    "resolved": "{ name: string; value: string | null; }",
+                    "original": "{\n    name: string | undefined;\n    value: string | null;\n  }",
+                    "resolved": "{ name: string | undefined; value: string | null; }",
                     "references": {}
                 }
             }, {
@@ -1009,7 +1009,7 @@ export class TdsDropdown {
         return {
             "setValue": {
                 "complexType": {
-                    "signature": "(value: string | number | string[] | number[], label?: string) => Promise<{ value: string | number; label: string | undefined; }[]>",
+                    "signature": "(value: string | number | string[] | number[], label?: string) => Promise<{ value: string | number | undefined; label: string | undefined; }[]>",
                     "parameters": [{
                             "name": "value",
                             "type": "string | number | string[] | number[]",
@@ -1029,7 +1029,7 @@ export class TdsDropdown {
                             "id": "global::HTMLTdsDropdownOptionElement"
                         }
                     },
-                    "return": "Promise<{ value: string | number; label: string | undefined; }[]>"
+                    "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,7 +14,7 @@ export class TdsFooterGroup {
         this.titleText = undefined;
         this.tdsListAriaLabel = undefined;
         this.open = false;
-        this.isMobile = undefined;
+        this.isMobile = false;
     }
     updateIsMobile() {
         this.isMobile = window.innerWidth <= 992;
@@ -42,12 +42,12 @@ export class TdsFooterGroup {
     }
     render() {
         const hasTitleSlot = hasSlot('title', this.host);
-        return (h(Host, { key: '03334686d168738c5f4c8e24af3683e667fab531', "aria-expanded": this.open ? 'true' : 'false' }, h("div", { key: '106158a95e6c699615280250d60d629bed56d442', 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: 'ee127c2b7951a4e5f4f541b10de603db4554c0d0', "aria-label": this.tdsListAriaLabel }, h("div", { key: 'f513ab58811b6f2f7ae9c9ed4986367c9169e030', 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: 'bc584cbb0542907628ebf05c316f53372bfde08a' }))))));
+            ${this.open ? 'expanded' : 'closed'}` }, h("slot", { key: '7117d7f69790dac3baab851edd7bb4420c2f7c3d' }))))));
     }
     static get is() { return "tds-footer-group"; }
     static get encapsulation() { return "shadow"; }
@@ -68,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."
@@ -85,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

@@ -14,7 +14,7 @@ export class TdsFooterItem {
         }
     }
     render() {
-        return (h(Host, { key: 'fe1aff1acd336f2d1b66b87a9666c1ea4e3f0016', role: "listitem" }, h("div", { key: 'c180f66951842e69f6b51e83151f5962ff410794', class: `${this.parentIsTopPart ? 'top-part-child' : ''}` }, h("slot", { key: '160d1d6054ed399f8597bcdf98524a65f77c6310' }))));
+        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: '1970dca286e8a105a4155f1d72ff8abeee8dda12', class: {
+        return (h(Host, { key: 'cc332e8bb49a94ee80c1cbd73552abb0ce4681df', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null,
-            } }, h("footer", { key: 'ba1b73a9e3cda8b856560ee09e84a8f54d432e5f' }, usesTopSlot && h("slot", { key: 'd656a404027d1fe57cf89673316d47a80cc0d494', name: "top" }), h("div", { key: 'ad0f0e1c7f34c8e2a71916a6f6715d3dc3ad0a07', class: "footer-main" }, (usesStartSlot || usesEndSlot) && (h("div", { key: '473888e3515a48364f07a2c7a30b518a4e13ab4f', class: "footer-main-top" }, usesStartSlot && h("slot", { key: 'dff42968e4cbfadc88ab70bd753d612b4f172769', name: "start" }), usesEndSlot && h("slot", { key: '2015c7102206c9023324e3f4b4ac8a86422003e4', name: "end" }))), h("div", { key: '0af4fd04d0643dcffc07a4f55d88220691bf72a1', class: "footer-main-bottom" }, h("small", { key: 'e11f206cc48f54547c62eaf25f7ab1a98e521424', class: "copyright" }, usesCopyrightSlot ? h("slot", { name: "copyright" }) : this.copyrightText), h("div", { key: 'a933b570ae2778b2034fc61e8efcfa3f04bcb1e0', class: "brand" }, h("p", { key: 'cc6d2913da4c97ebc757534b2167d9544c909902' }, "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"; }

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

@@ -8,7 +8,7 @@ export class TdsHeaderBrandSymbol {
         if (!(aTag === null || aTag === void 0 ? void 0 : aTag.hasAttribute('aria-label'))) {
             console.warn('Tegel Header Brand Symbol component: missing aria-label attribute for <a> tag inside slot');
         }
-        return (h(Host, { key: '9cbe4978dccfdeb1b11ea0a8ba7c0e5e7fe991ba' }, h("tds-header-item", { key: 'a2ff9dc657366d73042b51717ad9447ec0f7dca1' }, h("slot", { key: '9a7ded8445811b59cd858f86bb2aa640c1af91d3' }))));
+        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

@@ -49,13 +49,13 @@ export class TdsHeaderDropdown {
         }
     }
     render() {
-        return (h(Host, { key: 'c3e84fbcdab1a9c2530f7a5e16c195858f6daa15' }, h("div", { key: '640ad175e59d7e3f958a17fa1358c5c1ec405346', class: {
+        return (h(Host, { key: '5ea7f4d3d53fd8d4148bcf1bc0f7444a6b7469f8' }, h("div", { key: 'e972495e46f96576fb28bba38f9bca68fd6d901e', class: {
                 'state-open': this.open,
-            } }, h("tds-header-item", { key: 'f424e4e9a77c8fd6dfbde8b292e002aad8ecd307', class: "button", active: this.open, selected: this.selected }, h("button", { key: 'e22605109e904183690d58fbc18954ea9e9816f4', 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: '832f54445aad4cf77afee64d5ab955acbd10ade3', name: "icon" }), this.label, h("slot", { key: '757537697a1340aeb22df2d09f7891269e4c1156', name: "label" }), !this.noDropdownIcon && (h("tds-icon", { key: '76560ef770762fe61f32f06c9803ea815bf07ed0', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Dropdown icon" })))), this.buttonEl && (h("tds-popover-canvas", { key: '873d5cccc6569d0291c3ed1474ffe623ec49a24e', 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: {
@@ -83,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."
@@ -136,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"

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

@@ -74,7 +74,7 @@ export class TdsHeaderDropdownList {
             'role': 'list',
             'aria-labelledby': (_a = this.headingElement) === null || _a === void 0 ? void 0 : _a.id,
         };
-        return (h(Host, Object.assign({ key: 'b24073590faf2ae5363a7c685b0933d6f1559eb1' }, attributes), h("slot", { key: 'e7c7fb66a65511de06b0c83f67312de0408decdd' })));
+        return (h(Host, Object.assign({ key: '190c5b3ef5273bb4ddb4bfe7d41aa21051eced80' }, attributes), h("slot", { key: 'cb7346a42c64bfe414b1814acab5923583f543b4' })));
     }
     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: 'f44417356b72d471bc6b9da6f05a92ee847492fd' }, h("div", { key: '4b3d24be55310e85146c89ac249bc6d100be4c6c', class: {
                 'component': true,
                 'component-selected': this.selected,
-            } }, h("slot", { key: '0a037fd8059aa356ed9885e3e06d391f876e2fc3' }))));
+            } }, h("slot", { key: '2a37b399064d6f5ca3cc15417f48d60380d6b6dc' }))));
     }
     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: 'bdfa5d85ce7d9d75006496af94329a1721628b4f', role: "listitem" }, h("div", { key: '0f757d820aa3e96a1e98f7ae395660ba17e82576', class: "user-box" }, this.imgUrl && h("img", { key: 'c03f2089edefa01b766635e43d81f5b22a58f70d', src: this.imgUrl, alt: this.imgAlt }), h("slot", { key: 'c5eff329fa6100258a2c7d237ec076a139f2b00b', name: "thumbanil" }), h("div", { key: '0c097b9c1488f007ee8cd3e3490f9a3e85fac8f3', class: "user-content" }, h("div", { key: '3f1caac67dcd08d0bf5187ffe49c59ab3873822f', class: "header" }, this.header, h("slot", { key: '59fbd4a5b4d85e15de10b55376b6c54f4b3800c7', name: "header" })), h("div", { key: '82716ea4715e64e3c9d3ad3144b7af2821be5e8b', class: "subheader" }, this.subheader, h("slot", { key: '0574e77cf1d4a1651710811a0216bab7c24a11ed', name: "subheader" }))))));
     }
     static get is() { return "tds-header-dropdown-list-user"; }
     static get encapsulation() { return "shadow"; }
@@ -32,11 +32,11 @@ export class TdsHeaderDropdownListLgUser {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Image URL."
@@ -49,11 +49,11 @@ export class TdsHeaderDropdownListLgUser {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Image alt text."
@@ -66,11 +66,11 @@ export class TdsHeaderDropdownListLgUser {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Header text, usually the users first name and last name."
@@ -83,11 +83,11 @@ export class TdsHeaderDropdownListLgUser {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Subheader text."

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

@@ -6,7 +6,7 @@ export class TdsHeaderHamburger {
     }
     render() {
         const inheritedButtonProps = Object.assign({}, inheritAriaAttributes(this.host));
-        return (h(Host, { key: 'f1b3e80727ae2fbb84cbdf19fdd6500067fa010b' }, h("tds-header-item", { key: '6053c08c86b6f4149bed2eb7c8a4a26f16262fc9' }, h("button", Object.assign({ key: 'b2b645ed658328622e9a6411d5bcdfe66e59028c' }, inheritedButtonProps, { "aria-label": this.tdsAriaLabel }), h("tds-icon", { key: '6140334699f8a27f7d78387bb3bfcf08295a0c90', class: "icon", name: "burger", size: "20px" })))));
+        return (h(Host, { key: 'e5d7142a6d589d1b936ae4dc8376be0e03190271' }, h("tds-header-item", { key: '0945e350bb89ba977327c92917af457003c48fb9' }, h("button", Object.assign({ key: 'ade6457641c2e789dc631dad8df7491c5da53a93' }, inheritedButtonProps, { "aria-label": this.tdsAriaLabel }), h("tds-icon", { key: 'b900d3c953cff83c99be40b3785a650aa984ee6a', class: "icon", name: "burger", size: "20px" })))));
     }
     static get is() { return "tds-header-hamburger"; }
     static get encapsulation() { return "shadow"; }
@@ -27,11 +27,11 @@ export class TdsHeaderHamburger {
                 "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"

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

@@ -78,10 +78,10 @@ export class TdsHeaderItem {
         }
     }
     render() {
-        return (h(Host, { key: '9f7320da4779557177e8a07194dd701e313b466b' }, h("tds-core-header-item", { key: '5fbc0242b2be8beeb3bce94bcd8016f3ade23233', class: {
+        return (h(Host, { key: '4eb20ba50fa39faabf4a0538ae328f63a5468c0a' }, h("tds-core-header-item", { key: '0d49c9362325f4dbb0505ff2eeccfae761be5809', class: {
                 'component-active': this.active,
                 'component-selected': this.selected,
-            } }, h("slot", { key: '7198e70374c42fdac1e394ef022bbbc3d904b8e9' }))));
+            } }, h("slot", { key: 'cd629d0c001b0e17df021a5f19afad156f1ee13e' }))));
     }
     static get is() { return "tds-header-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header-launcher/header-launcher.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-launcher/header-launcher.js

@@ -52,11 +52,11 @@ export class TdsHeaderLauncher {
             }, 'ref': (el) => {
                 this.buttonEl = el;
             } });
-        return (h(Host, { key: '13631a42a002d81b250fc26438b96f93ae991ab6' }, h("div", { key: '24fca288a843c0c9459f8ad9ce015cec36c815c6', class: {
+        return (h(Host, { key: '18e438bd8281ca3d6ca2b410c5b0ed60caf554aa' }, h("div", { key: '6033d6a10546a8b79b0bcab3f59ef14138263e9f', class: {
                 'wrapper': true,
                 'state-open': this.open,
                 'state-list-type-menu': this.hasListTypeMenu,
-            } }, h("tds-header-launcher-button", Object.assign({ key: '3883841e41d1acb50f75d78a894c7844305c1cbd' }, buttonAttributes, { "tds-aria-label": this.tdsAriaLabel })), this.buttonEl && (h("tds-popover-canvas", { key: '20b4cc82c6eed3e2ba60038d4ab37afd49de6357', 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: 'de44af111fdbabc37a8330194f40465ab3301089' }, buttonAttributes, { "tds-aria-label": this.tdsAriaLabel })), this.buttonEl && (h("tds-popover-canvas", { key: 'a39f8dbb2e6cf648bc16e896f01df6c308472fc3', id: `tds-launcher-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
                 {
                     name: 'flip',
                     options: {
@@ -84,11 +84,11 @@ export class TdsHeaderLauncher {
                 "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 of the launcher button"

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: '72018ce054eb1c8c0d743887693ae0eb5a5fceae' }, h("tds-header-item", { key: '575f5f39bc75aaae01e3d62149228c63d389cbca', active: this.active }, h("button", Object.assign({ key: '9c0d368a1f63260950e93f72c022b4d030f20587' }, buttonProps, { "aria-label": this.tdsAriaLabel }), h("tds-icon", { key: 'e8ee6fc3fcf23cebc14fb084517abaf68c71a495', class: "icon", name: "bento", size: "20px", "svg-title": this.tdsAriaLabel })))));
     }
     static get is() { return "tds-header-launcher-button"; }
     static get encapsulation() { return "shadow"; }
@@ -47,11 +47,11 @@ export class TdsHeaderLauncherButton {
                 "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"

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: 'a3c700222b0cfba847962708fcab2e8876b459f6' }, h("div", Object.assign({ key: '6e4b346fd7bb132a60386a5711381d7936df05a4' }, listAttributes), h("slot", { key: 'c24b1b6e7eecccea3032c2b491ce3cf83a6f821b' }))));
     }
     static get is() { return "tds-header-launcher-grid"; }
     static get originalStyleUrls() {

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: '323d920d37834907f77c0d00aca6172caa90b6d8' }, h("h3", { key: '49c919cceae79d9d1c0157a603e181d56dd15205', class: "tds-header-launcher-list-title", id: `tds-header-launcher-${this.uuid}` }, h("slot", { key: 'a1aa000de6a642dd68e2212a0e16728d5bb55a1f' }))));
     }
     static get is() { return "tds-header-launcher-list-title"; }
     static get originalStyleUrls() {

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

@@ -14,5 +14,5 @@ h4 slot {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  padding: 0 32px 0 16px;
+  padding: 0 32px 0 24px;
 }

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

@@ -1,7 +1,8 @@
 /*
   Contains spacing variables for the layout
 */
-:host {
+:host,
+:root {
   --tds-scrollbar-width-standard: thin;
   --tds-scrollbar-width: 10px;
   --tds-scrollbar-height: 10px;