@scania/tegel 1.40.0-stencil-core-4.38.1-beta.0 → 1.40.0-ts-strict-mode-beta.0

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

@@ -8,18 +8,17 @@ import hasSlot from "../../utils/hasSlot";
  */
 export class TdsFooter {
     constructor() {
-        /** Mode variant of the component, based on current mode. */
-        this.modeVariant = null;
         this.copyrightText = `Copyright © ${new Date().getFullYear()} Scania`;
+        this.modeVariant = null;
     }
     render() {
         const usesTopSlot = hasSlot('top', this.host);
         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: '1970dca286e8a105a4155f1d72ff8abeee8dda12', 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: '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")))))));
     }
     static get is() { return "tds-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -39,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,
@@ -49,10 +48,8 @@ export class TdsFooter {
                     "tags": [],
                     "text": "Mode variant of the component, based on current mode."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "mode-variant",
+                "reflect": false,
                 "defaultValue": "null"
             }
         };

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: '9cbe4978dccfdeb1b11ea0a8ba7c0e5e7fe991ba' }, h("tds-header-item", { key: 'a2ff9dc657366d73042b51717ad9447ec0f7dca1' }, h("slot", { key: '9a7ded8445811b59cd858f86bb2aa640c1af91d3' }))));
     }
     static get is() { return "tds-header-brand-symbol"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,11 +7,6 @@ import generateUniqueId from "../../../utils/generateUniqueId";
  */
 export class TdsHeaderDropdown {
     constructor() {
-        /** If the dropdown icon (downwards chevron) should be hidden. */
-        this.noDropdownIcon = false;
-        /** If the button that opens the dropdown should appear selected. */
-        this.selected = false;
-        this.open = false;
         this.uuid = generateUniqueId();
         this.handleSlottedItemClick = (event) => {
             const eventSource = event.target.tagName.toLowerCase();
@@ -19,6 +14,12 @@ export class TdsHeaderDropdown {
                 this.open = false;
             }
         };
+        this.label = undefined;
+        this.noDropdownIcon = false;
+        this.selected = false;
+        this.tdsAriaLabel = undefined;
+        this.open = false;
+        this.buttonEl = undefined;
     }
     onAnyClick(event) {
         // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
@@ -28,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();
                 }
@@ -46,13 +49,13 @@ export class TdsHeaderDropdown {
         }
     }
     render() {
-        return (h(Host, { key: '0b5e0474e13db90b9a61f8177b4191d26f542d9f' }, h("div", { key: 'b45a13bc693415d7ff3d48cca6e5899202f3d24a', class: {
+        return (h(Host, { key: 'c3e84fbcdab1a9c2530f7a5e16c195858f6daa15' }, h("div", { key: '640ad175e59d7e3f958a17fa1358c5c1ec405346', 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: 'f424e4e9a77c8fd6dfbde8b292e002aad8ecd307', class: "button", active: this.open, selected: this.selected }, h("button", { key: 'e22605109e904183690d58fbc18954ea9e9816f4', 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: '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: [
                 {
                     name: 'flip',
                     options: {
@@ -89,10 +92,8 @@ export class TdsHeaderDropdown {
                     "tags": [],
                     "text": "The label of the button that opens the dropdown.\nThis is an alternative to the label slot."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label"
+                "attribute": "label",
+                "reflect": false
             },
             "noDropdownIcon": {
                 "type": "boolean",
@@ -108,10 +109,8 @@ export class TdsHeaderDropdown {
                     "tags": [],
                     "text": "If the dropdown icon (downwards chevron) should be hidden."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "no-dropdown-icon",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "selected": {
@@ -128,10 +127,8 @@ export class TdsHeaderDropdown {
                     "tags": [],
                     "text": "If the button that opens the dropdown should appear selected."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "selected",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "tdsAriaLabel": {
@@ -148,10 +145,8 @@ export class TdsHeaderDropdown {
                     "tags": [],
                     "text": "Value to be used by the aria-label attribute"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "tds-aria-label"
+                "attribute": "tds-aria-label",
+                "reflect": false
             }
         };
     }

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

@@ -8,10 +8,11 @@ export class TdsHeaderDropdownList {
     constructor() {
         // A Map to store the slots and their associated slotchange listeners.
         this.slotListeners = new Map();
-        /** The size of the component. */
         this.size = 'md';
+        this.headingElement = undefined;
     }
     componentWillLoad() {
+        var _a, _b;
         const { children } = this.host;
         // Set the size prop for each child, if they have such a property
         for (let i = 0; i < children.length; i++) {
@@ -21,7 +22,7 @@ export class TdsHeaderDropdownList {
             }
         }
         let listRoot = this.host;
-        if (this.host.parentElement.tagName.toLowerCase() === 'tds-header-launcher-list') {
+        if (((_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.tagName.toLowerCase()) === 'tds-header-launcher-list') {
             listRoot = this.host.parentElement;
         }
         const headingEl = getPreviousNestedChildOfSiblingsMatching(listRoot, isHeadingElement);
@@ -33,7 +34,8 @@ export class TdsHeaderDropdownList {
         }
     }
     componentDidLoad() {
-        this.host.shadowRoot.querySelectorAll('slot').forEach((slot) => {
+        var _a;
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('slot').forEach((slot) => {
             // Add the slotchange event listener.
             const onSlotChange = (e) => {
                 this.processAssignedElements(e.target);
@@ -72,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: '57e8ecd046b7a260f1516fc80673e9d095ffd4d3' }, attributes), h("slot", { key: 'e0bafe5fffcf8864faebd4603597e3e424a35046' })));
+        return (h(Host, Object.assign({ key: 'b24073590faf2ae5363a7c685b0933d6f1559eb1' }, attributes), h("slot", { key: 'e7c7fb66a65511de06b0c83f67312de0408decdd' })));
     }
     static get is() { return "tds-header-dropdown-list"; }
     static get encapsulation() { return "shadow"; }
@@ -102,10 +104,8 @@ export class TdsHeaderDropdownList {
                     "tags": [],
                     "text": "The size of the component."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "size",
+                "reflect": true,
                 "defaultValue": "'md'"
             }
         };

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

@@ -4,9 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class TdsHeaderDropdownListItem {
     constructor() {
-        /** If the link should appear selected. */
         this.selected = false;
-        /** The size of the component. */
         this.size = 'md';
     }
     render() {
@@ -43,10 +41,8 @@ export class TdsHeaderDropdownListItem {
                     "tags": [],
                     "text": "If the link should appear selected."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "selected",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "size": {
@@ -63,10 +59,8 @@ export class TdsHeaderDropdownListItem {
                     "tags": [],
                     "text": "The size of the component."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "size",
+                "reflect": true,
                 "defaultValue": "'md'"
             }
         };

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

@@ -4,6 +4,12 @@ import { h, Host } from "@stencil/core";
  * @slot header - Slot for the header.
  */
 export class TdsHeaderDropdownListLgUser {
+    constructor() {
+        this.imgUrl = undefined;
+        this.imgAlt = undefined;
+        this.header = undefined;
+        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" }))))));
     }
@@ -35,10 +41,8 @@ export class TdsHeaderDropdownListLgUser {
                     "tags": [],
                     "text": "Image URL."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "img-url"
+                "attribute": "img-url",
+                "reflect": false
             },
             "imgAlt": {
                 "type": "string",
@@ -54,10 +58,8 @@ export class TdsHeaderDropdownListLgUser {
                     "tags": [],
                     "text": "Image alt text."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "img-alt"
+                "attribute": "img-alt",
+                "reflect": false
             },
             "header": {
                 "type": "string",
@@ -73,10 +75,8 @@ export class TdsHeaderDropdownListLgUser {
                     "tags": [],
                     "text": "Header text, usually the users first name and last name."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "header"
+                "attribute": "header",
+                "reflect": false
             },
             "subheader": {
                 "type": "string",
@@ -92,10 +92,8 @@ export class TdsHeaderDropdownListLgUser {
                     "tags": [],
                     "text": "Subheader text."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "subheader"
+                "attribute": "subheader",
+                "reflect": false
             }
         };
     }

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

@@ -1,6 +1,9 @@
 import { h, Host } from "@stencil/core";
 import inheritAriaAttributes from "../../../utils/inheritAriaAttributes";
 export class TdsHeaderHamburger {
+    constructor() {
+        this.tdsAriaLabel = undefined;
+    }
     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" })))));
@@ -33,10 +36,8 @@ export class TdsHeaderHamburger {
                     "tags": [],
                     "text": "Value to be used by the aria-label attribute"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "tds-aria-label"
+                "attribute": "tds-aria-label",
+                "reflect": false
             }
         };
     }

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

@@ -5,14 +5,14 @@ import dfs from "../../../utils/dfs";
  */
 export class TdsHeaderItem {
     constructor() {
-        /** If the button should appear active. Can be used when the button is
-         * triggering a dropdown, and the dropdown is open, for example. */
         this.active = false;
-        /** If the button should appear selected. */
         this.selected = false;
     }
     updateSlotted(searchPredicate, mutationCallback) {
-        const assignedElements = this.slotEl.assignedElements({ flatten: true });
+        var _a;
+        const assignedElements = (_a = this.slotEl) === null || _a === void 0 ? void 0 : _a.assignedElements({ flatten: true });
+        if (!(assignedElements === null || assignedElements === void 0 ? void 0 : assignedElements.length))
+            return;
         const firstSlottedElement = assignedElements[0];
         if (firstSlottedElement) {
             const foundElement = dfs(firstSlottedElement, searchPredicate);
@@ -52,9 +52,10 @@ export class TdsHeaderItem {
         }
     }
     componentDidLoad() {
-        this.slotEl = this.host.shadowRoot.querySelector('slot');
+        var _a, _b;
+        this.slotEl = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
         this.updateSlottedElements();
-        this.slotEl.addEventListener('slotchange', this.updateSlottedElements);
+        (_b = this.slotEl) === null || _b === void 0 ? void 0 : _b.addEventListener('slotchange', this.updateSlottedElements);
         // Set the order on initial load.
         this.updateOrder();
         // Create a MutationObserver to listen for changes on the "order" attribute.
@@ -77,10 +78,10 @@ export class TdsHeaderItem {
         }
     }
     render() {
-        return (h(Host, { key: '8bf1f05e837866442a31d6079cebce9f3f4b6a01' }, h("tds-core-header-item", { key: '2000815259c320803ecc6bb71553d56187c40983', class: {
+        return (h(Host, { key: '9f7320da4779557177e8a07194dd701e313b466b' }, h("tds-core-header-item", { key: '5fbc0242b2be8beeb3bce94bcd8016f3ade23233', class: {
                 'component-active': this.active,
                 'component-selected': this.selected,
-            } }, h("slot", { key: '35753d03b2ca354b0054172079ac20cd87524538' }))));
+            } }, h("slot", { key: '7198e70374c42fdac1e394ef022bbbc3d904b8e9' }))));
     }
     static get is() { return "tds-header-item"; }
     static get encapsulation() { return "shadow"; }
@@ -110,10 +111,8 @@ export class TdsHeaderItem {
                     "tags": [],
                     "text": "If the button should appear active. Can be used when the button is\ntriggering a dropdown, and the dropdown is open, for example."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "active",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "selected": {
@@ -130,10 +129,8 @@ export class TdsHeaderItem {
                     "tags": [],
                     "text": "If the button should appear selected."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "selected",
+                "reflect": false,
                 "defaultValue": "false"
             }
         };

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

@@ -6,9 +6,11 @@ import inheritAriaAttributes from "../../../utils/inheritAriaAttributes";
  */
 export class TdsHeaderLauncher {
     constructor() {
+        this.uuid = generateUniqueId();
         this.open = false;
+        this.buttonEl = undefined;
         this.hasListTypeMenu = false;
-        this.uuid = generateUniqueId();
+        this.tdsAriaLabel = undefined;
     }
     onAnyClick(event) {
         // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
@@ -18,9 +20,12 @@ export class TdsHeaderLauncher {
         }
     }
     handleKeyDown(event) {
+        var _a, _b;
         if (event.key === 'Escape' && this.open) {
             this.open = false;
-            this.buttonEl.shadowRoot.querySelector('button').focus();
+            const btnShadow = (_b = (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('button');
+            if (btnShadow)
+                btnShadow.focus();
         }
     }
     componentDidLoad() {
@@ -31,8 +36,9 @@ export class TdsHeaderLauncher {
         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();
                 }
@@ -46,11 +52,11 @@ export class TdsHeaderLauncher {
             }, 'ref': (el) => {
                 this.buttonEl = el;
             } });
-        return (h(Host, { key: '8fc1d1c845a4dfa5deba02a83edf89c6d3ea8278' }, h("div", { key: '2c23ffd716390481b3cdd2da2a4062193723f800', class: {
+        return (h(Host, { key: '13631a42a002d81b250fc26438b96f93ae991ab6' }, h("div", { key: '24fca288a843c0c9459f8ad9ce015cec36c815c6', class: {
                 'wrapper': true,
                 'state-open': this.open,
                 'state-list-type-menu': this.hasListTypeMenu,
-            } }, h("tds-header-launcher-button", Object.assign({ key: 'a82084372217eb32338e15bd436ed09006331043' }, buttonAttributes, { "tds-aria-label": this.tdsAriaLabel })), this.buttonEl && (h("tds-popover-canvas", { key: '87bd7d7aad3f60993c9cfb9df25c5cd54a45150f', 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: '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: [
                 {
                     name: 'flip',
                     options: {
@@ -87,10 +93,8 @@ export class TdsHeaderLauncher {
                     "tags": [],
                     "text": "Value to be used by the aria-label attribute of the launcher button"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "tds-aria-label"
+                "attribute": "tds-aria-label",
+                "reflect": false
             }
         };
     }

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

@@ -2,9 +2,8 @@ import { h, Host } from "@stencil/core";
 import inheritAriaAttributes from "../../../utils/inheritAriaAttributes";
 export class TdsHeaderLauncherButton {
     constructor() {
-        /** If the button should appear active. Can be used when the button is
-         * triggering a dropdown, and the dropdown is open, for example. */
         this.active = false;
+        this.tdsAriaLabel = undefined;
     }
     render() {
         this.ariaAttributes = Object.assign(Object.assign({}, this.ariaAttributes), inheritAriaAttributes(this.host));
@@ -39,10 +38,8 @@ export class TdsHeaderLauncherButton {
                     "tags": [],
                     "text": "If the button should appear active. Can be used when the button is\ntriggering a dropdown, and the dropdown is open, for example."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "active",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "tdsAriaLabel": {
@@ -59,10 +56,8 @@ export class TdsHeaderLauncherButton {
                     "tags": [],
                     "text": "Value to be used by the aria-label attribute"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "tds-aria-label"
+                "attribute": "tds-aria-label",
+                "reflect": false
             }
         };
     }

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

@@ -5,6 +5,9 @@ import isHeadingElement from "../../../utils/isHeadingElement";
  * @slot <default> - <b>Unnamed slot.</b> For a grid item element.
  */
 export class TdsHeaderLauncherGrid {
+    constructor() {
+        this.headingElement = undefined;
+    }
     componentWillLoad() {
         const listRoot = this.host;
         const headingEl = getPreviousNestedChildOfSiblingsMatching(listRoot, (el) => {

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

@@ -8,8 +8,6 @@ h4 {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  font-size: 14px;
-  line-height: normal;
 }
 h4 slot {
   display: block;

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

@@ -21,18 +21,20 @@ export class TdsHeader {
     componentDidLoad() {
         const hostElement = this.host;
         const navElement = hostElement.querySelector('.tds-header-component-list');
-        this.observer.observe(navElement, {
-            childList: true,
-            subtree: false,
-        });
-        updateListChildrenRoles(navElement);
+        if (navElement) {
+            this.observer.observe(navElement, {
+                childList: true,
+                subtree: false,
+            });
+            updateListChildrenRoles(navElement);
+        }
     }
     disconnectedCallback() {
         this.observer.disconnect();
     }
     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: '30e29defd97ee2a473198d2c403dd23191e02856' }, h("slot", { key: '5905d6acb62da9d4d5de82fe148f709ccd08b3e9', name: "hamburger" }), h("slot", { key: '23f834040a108c9300ac07643518dc9194eb1542', name: "title" }), h("nav", Object.assign({ key: 'ba4803dfde17c977e06a9a76a472a79fd94ddfaa' }, navAttributes), h("ul", { key: '818e664fc808ce9b0b9cc90c188c69a782c36aba', class: "tds-header-component-list" }, h("slot", { key: '920409e9cedc7035a8cd1c149163603fd61d50e6' }), h("li", { key: '36d6627c38241f2fb2d34e0402eeed1befe04696', class: "tds-header-middle-spacer" }), h("slot", { key: '5f14324ddbe295e821b6983f0b6b84f72c981643', name: "end" })))));
     }
     static get is() { return "tds-header"; }
     static get originalStyleUrls() {