@scania/tegel 1.42.0 → 1.44.0-sonarcloud-0

package/dist/collection/components/table/table-header-cell/table-header-cell.js

@@ -51,7 +51,7 @@ export class TdsTableHeaderCell {
         this.textAlign = 'left';
         this.disablePadding = false;
         this.tdsAriaLabelSortButton = '';
-        this.textAlignState = undefined;
+        this.textAlignState = 'left';
         this.sortingDirection = undefined;
         this.sortedByMyKey = false;
         this.verticalDividers = false;
@@ -87,12 +87,14 @@ export class TdsTableHeaderCell {
         }
     }
     connectedCallback() {
+        var _a;
         this.tableEl = this.host.closest('tds-table');
-        this.tableId = this.tableEl.tableId;
+        this.tableId = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.tableId;
     }
     componentWillLoad() {
         relevantTableProps.forEach((tablePropName) => {
-            this[tablePropName] = this.tableEl[tablePropName];
+            var _a;
+            this[tablePropName] = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a[tablePropName];
         });
     }
     componentWillRender() {
@@ -102,8 +104,11 @@ export class TdsTableHeaderCell {
             : 'left';
         // To enable body cells text align per rules set in head cell
         this.internalTdsTextAlign.emit([this.tableId, this.cellKey, this.textAlignState]);
-        this.enableToolbarDesign =
-            this.host.closest('tds-table').getElementsByTagName('tds-table-toolbar').length >= 1;
+        const closesetTable = this.host.closest('tds-table');
+        if (closesetTable) {
+            this.enableToolbarDesign =
+                closesetTable.getElementsByTagName('tds-table-toolbar').length >= 1;
+        }
     }
     getAriaSort() {
         if (this.sortingDirection === 'asc')
@@ -113,7 +118,7 @@ export class TdsTableHeaderCell {
         return 'none';
     }
     render() {
-        return (h(Host, { key: 'f128527938679fe448019802ea76cda1a57d75be', class: {
+        return (h(Host, { key: '4df64a3d4a0ef86b377db355cfc149daf9b246b5', class: {
                 'tds-table__header-cell': true,
                 'tds-table__header-cell--sortable': this.sortable,
                 'tds-table__header-cell--is-sorted': this.sortedByMyKey,
@@ -145,7 +150,7 @@ export class TdsTableHeaderCell {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -162,7 +167,7 @@ export class TdsTableHeaderCell {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -179,7 +184,7 @@ export class TdsTableHeaderCell {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -213,9 +218,15 @@ export class TdsTableHeaderCell {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'left' | 'start' | 'right' | 'end' | 'center'",
+                    "original": "TextAlign",
                     "resolved": "\"center\" | \"end\" | \"left\" | \"right\" | \"start\"",
-                    "references": {}
+                    "references": {
+                        "TextAlign": {
+                            "location": "import",
+                            "path": "../table/table",
+                            "id": "src/components/table/table/table.tsx::TextAlign"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -250,7 +261,7 @@ export class TdsTableHeaderCell {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -291,8 +302,8 @@ export class TdsTableHeaderCell {
                     "text": "Sends unique Table identifier, column key and sorting direction to the tds-table-body component,\ncan also be listened to implement custom-sorting logic."
                 },
                 "complexType": {
-                    "original": "{\n    tableId: string;\n    columnKey: string;\n    sortingDirection: 'asc' | 'desc';\n  }",
-                    "resolved": "{ tableId: string; columnKey: string; sortingDirection: \"desc\" | \"asc\"; }",
+                    "original": "{\n    tableId: string | undefined;\n    columnKey: string | undefined;\n    sortingDirection: 'asc' | 'desc';\n  }",
+                    "resolved": "{ tableId: string | undefined; columnKey: string | undefined; sortingDirection: \"desc\" | \"asc\"; }",
                     "references": {}
                 }
             }, {
@@ -309,8 +320,8 @@ export class TdsTableHeaderCell {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{\n    tableId: string;\n    key: string;\n  }",
-                    "resolved": "{ tableId: string; key: string; }",
+                    "original": "{\n    tableId: string | undefined;\n    key: string | undefined;\n  }",
+                    "resolved": "{ tableId: string | undefined; key: string | undefined; }",
                     "references": {}
                 }
             }, {
@@ -327,8 +338,8 @@ export class TdsTableHeaderCell {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "object",
+                    "resolved": "object",
                     "references": {}
                 }
             }, {
@@ -345,8 +356,8 @@ export class TdsTableHeaderCell {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{\n    tableId: string;\n    key: string;\n  }",
-                    "resolved": "{ tableId: string; key: string; }",
+                    "original": "{\n    tableId: string | undefined;\n    key: string;\n  }",
+                    "resolved": "{ tableId: string | undefined; key: string; }",
                     "references": {}
                 }
             }];

package/dist/collection/components/table/table-header-input-wrapper/table-header-input-wrapper.js

@@ -63,7 +63,7 @@ export class TdsTableHeaderInputWrapper {
         }
     }
     render() {
-        return (h(Host, { key: '62070c88b54c313b2db10890023db32f0eaf66b5', class: {
+        return (h(Host, { key: '76de40e0a578e0592d9c85d278d65187d84d7573', class: {
                 'focused-input-wrapper': this.inputFocused,
                 'show-icon': this.showIcon,
                 'tds-table__compact': this.compactDesign,

package/dist/collection/components/table/table-toolbar/table-toolbar.js

@@ -34,15 +34,17 @@ export class TdsTableToolbar {
         }
     }
     connectedCallback() {
+        var _a;
         this.tableEl = this.host.closest('tds-table');
-        this.tableId = this.tableEl.tableId;
+        this.tableId = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.tableId;
         if (!this.tdsSearchAriaLabel) {
             console.warn('tds-table-toolbar: tdsSearchAriaLabel is highly recommended for accessibility');
         }
     }
     componentWillLoad() {
         relevantTableProps.forEach((tablePropName) => {
-            this[tablePropName] = this.tableEl[tablePropName];
+            var _a;
+            this[tablePropName] = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a[tablePropName];
         });
     }
     handleSearch(event) {
@@ -68,10 +70,10 @@ export class TdsTableToolbar {
         return styles;
     }
     render() {
-        return (h(Host, { key: 'e7ce21fcad3bfbc9f93088f777855baa9c6e3869', class: {
+        return (h(Host, { key: '37a65522a8efe0d073906a1c0ad59bc0574faa0c', class: {
                 'tds-table--compact': this.compactDesign,
                 'toolbar__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles(), "aria-labelledby": "table-toolbar-title" }, h("div", { key: '7310ec2851d440ba6529eb2d48bb20bcb508429f', class: "tds-table__upper-bar-flex" }, h("div", { key: '5b901252d433968edb04de20a25ea9c09bb39b4b', class: "tds-table__actionbar-left" }, this.tableTitle && (h("caption", { key: '661f8de9fe38cd72b098251b027c7e6f554033e5', id: "table-toolbar-title", class: "tds-table__title" }, this.tableTitle)), h("slot", { key: '8d00d01e2ac92c75f95dc6ae89e7b8769cde6dc1', name: "start" })), h("div", { key: 'fd28cb512ed5ad997cdb1f0b1dff8f7489f95db5', class: "tds-table__actionbar" }, this.filter && (h("div", { key: 'fb2649d623a21eeb1a8c3ed5c512d02d7bbb2efc', class: "tds-table__searchbar" }, h("input", { key: '9cd1284bec12081a2e99996eb6bd160ac926b751', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event), "aria-label": this.tdsSearchAriaLabel }), h("span", { key: '015060f9c59d06c430fabb0acabb8b476a477616', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: '5f990c7f452a46bb0471dd658f24afd848d029e9', name: "search", size: "20px" })))), h("slot", { key: 'a91b2aee680ef316d2fdd46d46bfe9ec3eb3e314', name: "end" })))));
+            }, style: this.getStyles(), "aria-labelledby": "table-toolbar-title" }, h("div", { key: 'f4116716bd302f31f5c5a1c6344cbd263f20aadb', class: "tds-table__upper-bar-flex" }, h("div", { key: '7c1088b56cd537ba8d6734bfdd8a87604c0038c3', class: "tds-table__actionbar-left" }, this.tableTitle && (h("caption", { key: 'aab5ff50d91410486069f9a734fd74606674819b', id: "table-toolbar-title", class: "tds-table__title" }, this.tableTitle)), h("slot", { key: '2e7f6fdbe8865712cba24e3b4a6e5833dd684ef0', name: "start" })), h("div", { key: '1d78a673fc3d4af7955cfb9ee00ff4d2265b73e9', class: "tds-table__actionbar" }, this.filter && (h("div", { key: '6fcef1537fb441d8e835d6d6978a2ca8ae107eef', class: "tds-table__searchbar" }, h("input", { key: 'd74bd73c0b0a969d69ea6d5ac142215466ab3add', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event), "aria-label": this.tdsSearchAriaLabel }), h("span", { key: '6b97b5d9b0ff3bb5b17f228d9786a64b1ea1ebe4', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: '268d432c7c1ed126e2b0186e72ffd4fa53f33d3a', name: "search", size: "20px" })))), h("slot", { key: 'ef138ddefb88afc9967230c39600538a9d112dbb', name: "end" })))));
     }
     static get is() { return "tds-table-toolbar"; }
     static get encapsulation() { return "shadow"; }
@@ -165,8 +167,8 @@ export class TdsTableToolbar {
                     "text": "Used for sending users' input to the main parent tds-table the component,\ncan also be listened to in order to implement custom sorting logic."
                 },
                 "complexType": {
-                    "original": "{\n    tableId: string;\n    query: string;\n  }",
-                    "resolved": "{ tableId: string; query: string; }",
+                    "original": "{\n    tableId: string | undefined;\n    query: string;\n  }",
+                    "resolved": "{ tableId: string | undefined; query: string; }",
                     "references": {}
                 }
             }];

package/dist/collection/components/tabs/folder-tabs/folder-tab/folder-tab.js

@@ -35,10 +35,10 @@ export class TdsFolderTab {
         }
     }
     render() {
-        return (h(Host, { key: '6e0c3e477f033d6d0038d61d55f87d818abcef6e', "aria-selected": this.selected }, h("div", { key: '06f1e0abdbb9bcce20807d67784a0c82754e4d8a', class: {
+        return (h(Host, { key: '4a695d366a2e8e8e5b11b76f4be517c348e55c5b', "aria-selected": this.selected }, h("div", { key: 'b5dc85bc80aede911238d245d41b06ba82143c47', class: {
                 selected: this.selected,
                 disabled: this.disabled,
-            }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: 'bef9798df6d9e27873ac28b481f1b61342dde861' }))));
+            }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: 'a3c58caf8081862b9b89052f30e7100493ea0985' }))));
     }
     static get is() { return "tds-folder-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/folder-tabs/folder-tabs.js

@@ -8,6 +8,7 @@ export class TdsFolderTabs {
         this.componentWidth = 0; // visible width of this component
         this.buttonsWidth = 0; // total width of all nav items combined
         this.scrollWidth = 0; // total amount that is possible to scroll in the nav wrapper
+        this.children = [];
         this.clickHandlers = new WeakMap();
         this.addResizeObserver = () => {
             const resizeObserver = new ResizeObserver((entries) => {
@@ -26,7 +27,8 @@ export class TdsFolderTabs {
                     this.updateScrollButtons();
                 });
             });
-            resizeObserver.observe(this.navWrapperElement);
+            if (this.navWrapperElement)
+                resizeObserver.observe(this.navWrapperElement);
         };
         this.addEventListenerToTabs = () => {
             this.children = Array.from(this.host.children);
@@ -88,23 +90,32 @@ export class TdsFolderTabs {
         this.handleSlotChange();
     }
     handleSelectedIndexUpdate() {
-        this.children = Array.from(this.host.children).map((tabElement) => {
+        const tabs = Array.from(this.host.children);
+        this.children = tabs.map((tabElement) => {
             tabElement.setSelected(false);
             return tabElement;
         });
-        this.children[this.selectedIndex].setSelected(true);
+        if (this.selectedIndex) {
+            this.children[this.selectedIndex].setSelected(true);
+        }
     }
     scrollRight() {
+        if (!this.navWrapperElement)
+            return;
         const scroll = this.navWrapperElement.scrollLeft;
         this.navWrapperElement.scrollLeft = scroll + this.buttonsWidth;
         this.evaluateScrollButtons();
     }
     scrollLeft() {
+        if (!this.navWrapperElement)
+            return;
         const scroll = this.navWrapperElement.scrollLeft;
         this.navWrapperElement.scrollLeft = scroll - this.buttonsWidth;
         this.evaluateScrollButtons();
     }
     evaluateScrollButtons() {
+        if (!this.navWrapperElement)
+            return;
         const scroll = this.navWrapperElement.scrollLeft;
         this.showRightScroll = scroll <= this.scrollWidth;
         this.showLeftScroll = scroll > 0;
@@ -162,9 +173,9 @@ export class TdsFolderTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: '8c8c4916fe50279d530f99d21fef8f4ceb89fe55', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '5850bbcf52dfadf7a08dbe420916d98ed6d14b41', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '093e2804b56cb6c336744551ad4d27d962a34d02', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'eaaa9db902ead14bd581416c661b7c105263e335', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, h("button", { key: '9506486a1d6a2415bc8213cf1c0ab8c7789ad82c', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: 'e721ba34d2d703bd0ee2fe833e7859f282b6b332', name: "chevron_left", size: "20px" })), h("slot", { key: 'ee2558c4a7d35d8d6355df59b735344151742884', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '6ac20fbd52634a08bd6ef369a45fe0ebb7de9d5d', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: '20a1096cec8ef7e121200f469761fac9a2a5086d', name: "chevron_right", size: "20px" })))));
+            } }, h("button", { key: '50a7f0455048807c8642ecb66de0d01b7a27ce58', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: '411a393ac446ae8224ec8c407b5e1b0adda87098', name: "chevron_left", size: "20px" })), h("slot", { key: 'a534cd27f044a0ac8a03ffb28e20f04cb8eba7a6', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '6284e9746b9dfdc2010ff65b201e39db0e51feda', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: '6a2e53089c50e1aa03a87af001a685ff9ba059dc', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-folder-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -184,8 +195,8 @@ export class TdsFolderTabs {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary'",
-                    "resolved": "\"primary\" | \"secondary\"",
+                    "original": "'primary' | 'secondary' | null",
+                    "resolved": "\"primary\" | \"secondary\" | null",
                     "references": {}
                 },
                 "required": false,
@@ -221,11 +232,11 @@ export class TdsFolderTabs {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Sets the selected Tab.\nIf this is set, all Tab changes need to be handled by the user."
@@ -300,7 +311,7 @@ export class TdsFolderTabs {
         return {
             "selectTab": {
                 "complexType": {
-                    "signature": "(tabIndex: number) => Promise<{ selectedTabIndex: number; }>",
+                    "signature": "(tabIndex: number) => Promise<{ selectedTabIndex: number | undefined; }>",
                     "parameters": [{
                             "name": "tabIndex",
                             "type": "number",
@@ -312,7 +323,7 @@ export class TdsFolderTabs {
                             "id": "global::Promise"
                         }
                     },
-                    "return": "Promise<{ selectedTabIndex: number; }>"
+                    "return": "Promise<{ selectedTabIndex: number | undefined; }>"
                 },
                 "docs": {
                     "text": "Sets the passed tabindex as the selected Tab.",

package/dist/collection/components/tabs/inline-tabs/inline-tab/inline-tab.js

@@ -30,11 +30,11 @@ export class TdsInlineTab {
         }
     }
     render() {
-        return (h(Host, { key: '2c62341f68893d4792956a5c0db9753fe567a6aa', "aria-selected": this.selected }, h("div", { key: '1502366122d56bae42b8b1cc9c9a3937b58ec32f', class: {
+        return (h(Host, { key: '9e15778f89e70701ea058a8aa8377b18bc693d2b', "aria-selected": this.selected }, h("div", { key: '963dfa3c27aa7395919ac976851d173f4bc483fe', class: {
                 'inline-tab-item': true,
                 'selected': this.selected,
                 'disabled': this.disabled,
-            } }, h("slot", { key: 'f2b45d7f0dd38cae953f61e933189eef8d7a9452' }))));
+            } }, h("slot", { key: 'dcadb0ee891fa9a3a7ad94a2af33d82a674d2ecf' }))));
     }
     static get is() { return "tds-inline-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/inline-tabs/inline-tabs.js

@@ -8,6 +8,7 @@ export class TdsInlineTabs {
         this.componentWidth = 0; // visible width of this component
         this.buttonsWidth = 0; // total width of all nav items combined
         this.scrollWidth = 0; // total amount that is possible to scroll in the nav wrapper
+        this.children = [];
         this.clickHandlers = new WeakMap();
         this.addResizeObserver = () => {
             const resizeObserver = new ResizeObserver((entries) => {
@@ -26,7 +27,8 @@ export class TdsInlineTabs {
                     this.updateScrollButtons();
                 });
             });
-            resizeObserver.observe(this.navWrapperElement);
+            if (this.navWrapperElement)
+                resizeObserver.observe(this.navWrapperElement);
         };
         this.addEventListenerToTabs = () => {
             this.children = Array.from(this.host.children);
@@ -93,19 +95,27 @@ export class TdsInlineTabs {
             tabElement.setSelected(false);
             return tabElement;
         });
-        this.children[this.selectedIndex].setSelected(true);
+        if (this.selectedIndex) {
+            this.children[this.selectedIndex].setSelected(true);
+        }
     }
     scrollRight() {
+        if (!this.navWrapperElement)
+            return;
         const scroll = this.navWrapperElement.scrollLeft;
         this.navWrapperElement.scrollLeft = scroll + this.buttonsWidth;
         this.evaluateScrollButtons();
     }
     scrollLeft() {
+        if (!this.navWrapperElement)
+            return;
         const scroll = this.navWrapperElement.scrollLeft;
         this.navWrapperElement.scrollLeft = scroll - this.buttonsWidth;
         this.evaluateScrollButtons();
     }
     evaluateScrollButtons() {
+        if (!this.navWrapperElement)
+            return;
         const scroll = this.navWrapperElement.scrollLeft;
         this.showRightScroll = scroll <= this.scrollWidth;
         this.showLeftScroll = scroll > 0;
@@ -169,9 +179,9 @@ export class TdsInlineTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: 'f33abd9071c85c0651a3ab93e3996ec44717e325', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '8a5233b2a941a3a1e72dc45f93015b5e606663a8', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: 'e5c91714cc292fc3b5ba4aea446507b07e3d7928', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '494199f5f33abb5b5da122caf0124329630ce0e3', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: 'f2a8051863cfa93f8b2a5c562fc5ebefcc36b195', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'a93d1cb8ddc5486bbb15449c328a25f6e8e2b4cd', name: "chevron_left", size: "20px" })), h("slot", { key: 'e5b096420d72d12c861730fd9829baeba7cce625', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'f154a7b6553fe77e3f09da314403db5326df8e21', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '6832c693ab8a446a629788894f792f571c09cbe3', name: "chevron_right", size: "20px" })))));
+            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '60f7ec503a86d2a2aabb6153a67a804ac297931c', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'ed092e0d1077b9865ce7b62a889c7687c8fe7758', name: "chevron_left", size: "20px" })), h("slot", { key: '99f32f72a5f3b8ccb47a59cd910953fdbc898fb1', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'c24a97379767c6e4a1107e957fd7304218231b37', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: 'cd0f808c268006cb6074e0cf1250e4667b6f1c89', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-inline-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -228,11 +238,11 @@ export class TdsInlineTabs {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Sets the selected Tab.\nIf this is set, all Tab changes need to be handled by the user."
@@ -324,7 +334,7 @@ export class TdsInlineTabs {
         return {
             "selectTab": {
                 "complexType": {
-                    "signature": "(tabIndex: number) => Promise<{ selectedTabIndex: number; }>",
+                    "signature": "(tabIndex: number) => Promise<{ selectedTabIndex: number | undefined; }>",
                     "parameters": [{
                             "name": "tabIndex",
                             "type": "number",
@@ -344,7 +354,7 @@ export class TdsInlineTabs {
                             "id": "global::HTMLTdsInlineTabElement"
                         }
                     },
-                    "return": "Promise<{ selectedTabIndex: number; }>"
+                    "return": "Promise<{ selectedTabIndex: number | undefined; }>"
                 },
                 "docs": {
                     "text": "Selects a Tab based on tabindex, will not select a disabled Tab.",

package/dist/collection/components/tabs/navigation-tabs/navigation-tab/navigation-tab.js

@@ -30,8 +30,8 @@ export class TdsNavigationTab {
         }
     }
     render() {
-        return (h(Host, { key: 'fe07e37cb49b89fcd4f84e09f0d281c058e2ef0f' }, h("div", { key: '243d283d090cae8d00cfafa15a95f099d9c7d2e8', class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
-           ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '9824df7626af1bedbc17f98c0cfe305b9546f235' }))));
+        return (h(Host, { key: 'c0efa8fbffa68b4c81b7f337d260ed3e8023f7bc' }, h("div", { key: '759dbcb91ef4b320918bcc0dae18aa9f292f2bf5', class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
+           ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '9eaa20e00dc625bc96723cb937e45aaa58516aa8' }))));
     }
     static get is() { return "tds-navigation-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.js

@@ -8,6 +8,7 @@ export class TdsNavigationTabs {
         this.componentWidth = 0; // visible width of this component
         this.buttonsWidth = 0; // total width of all nav items combined
         this.scrollWidth = 0; // total amount that is possible to scroll in the nav wrapper
+        this.children = [];
         this.clickHandlers = new WeakMap();
         this.addResizeObserver = () => {
             const resizeObserver = new ResizeObserver((entries) => {
@@ -26,7 +27,8 @@ export class TdsNavigationTabs {
                     this.updateScrollButtons();
                 });
             });
-            resizeObserver.observe(this.navWrapperElement);
+            if (this.navWrapperElement)
+                resizeObserver.observe(this.navWrapperElement);
         };
         this.addEventListenerToTabs = () => {
             this.children = Array.from(this.host.children);
@@ -91,19 +93,27 @@ export class TdsNavigationTabs {
             tabElement.setSelected(false);
             return tabElement;
         });
-        this.children[this.selectedIndex].setSelected(true);
+        if (this.selectedIndex) {
+            this.children[this.selectedIndex].setSelected(true);
+        }
     }
     scrollRight() {
+        if (!this.navWrapperElement)
+            return;
         const scroll = this.navWrapperElement.scrollLeft;
         this.navWrapperElement.scrollLeft = scroll + this.buttonsWidth;
         this.evaluateScrollButtons();
     }
     scrollLeft() {
+        if (!this.navWrapperElement)
+            return;
         const scroll = this.navWrapperElement.scrollLeft;
         this.navWrapperElement.scrollLeft = scroll - this.buttonsWidth;
         this.evaluateScrollButtons();
     }
     evaluateScrollButtons() {
+        if (!this.navWrapperElement)
+            return;
         const scroll = this.navWrapperElement.scrollLeft;
         this.showRightScroll = scroll <= this.scrollWidth;
         this.showLeftScroll = scroll > 0;
@@ -169,15 +179,15 @@ export class TdsNavigationTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: 'cdf0eff9acca827e372a58f5721ff9279b0360f4', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: 'a8fafbc680fbdb0450db591e7f3ffda864946684', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: 'c7888b2f78e9aeb8fb6ca1041787785fe7d7c840', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: '177a79f69514e597d2795b4d60f335b485195eb0', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '402e0ca33fa71dced98cf8d86e26e3dba312fa7d', "aria-label": this.tdsScrollLeftAriaLabel, class: {
+            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '7455ad87dc61ba3c4fa28aa4e9462e9fe91dbcca', "aria-label": this.tdsScrollLeftAriaLabel, class: {
                 'scroll-left-button': true,
                 'show': this.showLeftScroll,
-            }, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '2849a2da7c6ef133d173756778400baa2a51d58d', name: "chevron_left", size: "20px" })), h("slot", { key: '64081b7518abde00c8f1d80ff414849bccd1cb0b', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '916ba6b9107982f8b8763920bdf4e2bd99127943', "aria-label": this.tdsScrollRightAriaLabel, class: {
+            }, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'f4b9a3b4d0eeed6c6b9035a9a33f9868fbb93bab', name: "chevron_left", size: "20px" })), h("slot", { key: '9757ef20e30a223f4dec3bf5a41da912821a46de', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '215c0a386b22f44bb891c4685c4f5b3b991982c8', "aria-label": this.tdsScrollRightAriaLabel, class: {
                 'scroll-right-button': true,
                 'show': this.showRightScroll,
-            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '26f84d67bc4b1eb04668464a74b655db1953d999', name: "chevron_right", size: "20px" })))));
+            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '21782c8e407746676988fb00324e10ba94379b78', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-navigation-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -234,11 +244,11 @@ export class TdsNavigationTabs {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Sets the selected Tab.\nIf this is set, all Tab changes need to be handled by the user."
@@ -330,7 +340,7 @@ export class TdsNavigationTabs {
         return {
             "selectTab": {
                 "complexType": {
-                    "signature": "(tabIndex: number) => Promise<{ selectedTabIndex: number; }>",
+                    "signature": "(tabIndex: number) => Promise<{ selectedTabIndex: number | undefined; }>",
                     "parameters": [{
                             "name": "tabIndex",
                             "type": "number",
@@ -342,7 +352,7 @@ export class TdsNavigationTabs {
                             "id": "global::Promise"
                         }
                     },
-                    "return": "Promise<{ selectedTabIndex: number; }>"
+                    "return": "Promise<{ selectedTabIndex: number | undefined; }>"
                 },
                 "docs": {
                     "text": "Sets the passed tabindex as the selected Tab.",

package/dist/collection/components/tag/tag.js

@@ -15,7 +15,7 @@ export class TdsTag {
             [`${this.size.toLowerCase()}`]: true,
             [`${this.variant.toLowerCase()}`]: true,
         });
-        return (h(Host, { key: 'ce69caedf87367e14db73628ff7948fca1580073', class: getTagClasses() }, h("div", { key: 'fbdddb159c5e590cca490df2ff2bf53602fc3265', class: "tds-tag__content" }, hasPrefixSlot && h("slot", { key: '77e44bf68f83708da2bdf7dcf50878d43638df97', name: "prefix" }), h("span", { key: '27aa436683c94063a3a041c6679d622e5f621d92' }, this.text))));
+        return (h(Host, { key: 'f2f854a15358d98bc4c55b093e243cc07cc8e439', class: getTagClasses() }, h("div", { key: 'a9b74511347d721ae769d42e4b0edb5ac9acdf85', class: "tds-tag__content" }, hasPrefixSlot && h("slot", { key: '95b1acec855e8e0caeadc3458222bf6a91795704', name: "prefix" }), h("span", { key: 'e40a01fda9aa32ae42032656ebf11375b45f9183' }, this.text))));
     }
     static get is() { return "tds-tag"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/text-field/text-field.css

@@ -343,4 +343,12 @@
 }
 .text-field-slot-wrap-suffix::slotted(:not(tds-icon)) {
   margin: 0 2px 0 0;
+}
+
+.text-field-input-no-arrows {
+  appearance: textfield;
+}
+.text-field-input-no-arrows::-webkit-outer-spin-button, .text-field-input-no-arrows::-webkit-inner-spin-button {
+  appearance: none;
+  margin: 0;
 }