@scania/tegel 1.43.0 → 1.44.0-sonarcloud.0

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) => {
@@ -89,11 +90,14 @@ 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)
@@ -169,9 +173,9 @@ export class TdsFolderTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: '306e3cdd4c692c55c76c219b9103be7f9e5a479c', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'f830e2fd7972564b5f340b443b982d8feae44fd8', 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: 'e5d1dd48c99588f66ef6525809dd4b6f5e3af6ad', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: 'dc873eb0a1ebddf4c15382bfdd6b07b20904233e', name: "chevron_left", size: "20px" })), h("slot", { key: '5485e73e2b54f94c7fdde910f479b402c082cbc8', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '42271e07b78aff4750be45162d132b6103993d9a', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: 'dbb99a44c0afbd0a8b59ecf10592d991294da9fa', 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"; }
@@ -228,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."
@@ -307,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",
@@ -319,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) => {
@@ -94,7 +95,9 @@ 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)
@@ -176,9 +179,9 @@ export class TdsInlineTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: '0983f0230e29f70eb94c0c964a0ee21e2b0eb3ee', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'caad52caccbc0e284330e6ee76d98b5dd289f257', 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: 'f8b74dc2751a33696f02b407fbb7fa87df9c5929', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '2f0e128a9e9195f972fa991266fd0aa14264125d', name: "chevron_left", size: "20px" })), h("slot", { key: 'dc120e26f2558ce75bdb57b56031ebd320805a53', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '590495e6463a4c6d0118b9a32acb23f361a23071', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '5d0470213d023c65d911acced266d962f3b7e109', 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"; }
@@ -235,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."
@@ -331,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",
@@ -351,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) => {
@@ -92,7 +93,9 @@ 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)
@@ -176,15 +179,15 @@ export class TdsNavigationTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: '3e4eb6108e33a2adb56334746c7ba9d264c493fe', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: 'adbc2c78468d0edb2a3cdca6f5218dfb7eead4cf', 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: '682437d69fbcfece6fbb7fb5add8f02b0f9e42ea', "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: 'f1635b2bea58e6a19942fc2477db1eee441585c8', name: "chevron_left", size: "20px" })), h("slot", { key: '7bf40f08d61ee18cf3db5e8862a4e748efef3108', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '74be9b7aa445732e570dddac73df434ce3815a44', "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: '953912a65fa7e4f67633c8ea0e30e8883f5af641', 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"; }
@@ -241,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."
@@ -337,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",
@@ -349,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.js

@@ -95,10 +95,10 @@ export class TdsTextField {
         }
     }
     render() {
-        var _a;
+        var _a, _b, _c, _d;
         const usesPrefixSlot = hasSlot('prefix', this.host);
         const usesSuffixSlot = hasSlot('suffix', this.host);
-        return (h("div", { key: 'c21d4167ad64e9cc08c309e658ddb6a0c431114f', class: {
+        return (h("div", { key: '362cc8ca714fab4d75f8b594494413ce8b9ce210', class: {
                 'form-text-field': true,
                 'form-text-field-nomin': this.noMinWidth,
                 'text-field-focus': this.focusInput && !this.disabled,
@@ -116,12 +116,12 @@ export class TdsTextField {
                 'form-text-field-sm': this.size === 'sm',
                 'form-text-field-error': this.state === 'error',
                 'form-text-field-success': this.state === 'success',
-            } }, this.labelPosition === 'outside' && (h("div", { key: 'fbe7ed68a33cefacab1c2afc7d9b810a59368dfc', class: "text-field-label-outside" }, h("label", { key: 'a9b988004bf788b3b58ee54f8c131b0f2014214e', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '10a1bd036b8fc91b0c1fb77121a0d02fd547eb2a', onClick: () => { var _a; return (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus(); }, class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '8b9838012fa8b4ad60d11bb3aa554cab7a12448c', class: {
+            } }, this.labelPosition === 'outside' && (h("div", { key: 'ace1a48203813254c9d316b78723bb89d4aa5f06', class: "text-field-label-outside" }, h("label", { key: '3fd1cab7e1862cd718d3e54ae5ff89b227e53419', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '6250d6c3318b7ce36156304e8e7d780f91a3821e', onClick: () => { var _a; return (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus(); }, class: "text-field-container" }, usesPrefixSlot && (h("div", { key: 'a891ed40d4d99129f126054fd79ce6c12d60b7f4', class: {
                 'text-field-slot-wrap-prefix': true,
                 'text-field-error': this.state === 'error',
                 'text-field-success': this.state === 'success',
                 'text-field-default': this.state === 'default',
-            } }, h("slot", { key: 'a460a94a247dfc5430b4f112466328161b4b628c', name: "prefix" }))), h("div", { key: '5a52dff30872f28cd021ca30224cf2527bf94e93', class: "text-field-input-container" }, h("input", { key: 'a6521a8748aed06230cbff2fe617fe7325e3370d', ref: (inputEl) => {
+            } }, h("slot", { key: '12ba7d529a5b5402f55d232697fd7db6a9efcfa2', name: "prefix" }))), h("div", { key: 'c191e5733ddfa074915a9ba2fbb1f99784334ca6', class: "text-field-input-container" }, h("input", { key: '692af173c615cddc90dd3306b993f216ca6eedee', ref: (inputEl) => {
                 this.textInput = inputEl;
             }, class: {
                 'text-field-input': true,
@@ -137,16 +137,16 @@ export class TdsTextField {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, "aria-invalid": getAriaInvalid(this.host, this.state), "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `text-field-helper-element-${this.uuid}`, "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}`, required: this.required, autocomplete: this.autocomplete }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '00f576ec1301e1200901f905db09b91710ccf8a5', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (h("div", { key: '8b877f09aa33689d7027d10bdc4d45a22f4c7aba', class: {
+            }, "aria-invalid": getAriaInvalid(this.host, this.state), "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `text-field-helper-element-${this.uuid}`, "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}`, required: this.required, autocomplete: this.autocomplete }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: 'bb62115ec19d0b6cfb499f3928bc39f77e510bbb', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (h("div", { key: '2125a08f72b015aa35bb66586d18d10c234bb212', class: {
                 'text-field-slot-wrap-suffix': true,
                 'text-field-error': this.state === 'error',
                 'text-field-success': this.state === 'success',
                 'text-field-default': this.state === 'default',
                 'tds-u-display-none': this.readOnly,
-            } }, h("slot", { key: '8a402f382de2dfca84ca46c06950969e6ca65bdb', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '5eb925b1c30e12d8c79fc91b2787291dc4879229', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: 'c307715a372fc0692a60d6f39ce8a01b736c5004', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: 'd225ef53660d5e8dad524c0c26e119e1f951ed63', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: '0bb80262383ca9359951a45fca67bcb3b51c2001', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: '519c53c3875642ff9d544839b13ace336a15ff10', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: '14fc9f23b453244bac24d79a5b46014f240b5397', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: 'd87add5b27ba5d0c794259194f79695b86a6b3cc', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: '355fac5a30bb91b1ae08d6bde1900a575f3594b9', class: {
+            } }, h("slot", { key: 'debdf5549b04c05a65913c8cea4723b5287cdbc8', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '22153b085a22b54a48610d965dbb1a571985e987', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: '3a49b98a5ab420f58a834f871d40bdf98da5a8c7', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '4be0d74de59aa0c552d951c051ca19a35e186510', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: 'a9f23d11c8cea0a7e3cdc1f81402d81f48853458', "aria-live": "assertive" }, (this.helper || ((_a = this.maxLength) !== null && _a !== void 0 ? _a : 0) > 0) && (h("div", { key: '8d65fbefc728f29279b2fceedfef0bec0fb17fb3', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: '5dd1fb8023341c1ef1f794ce8ee472ab476f866f', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: 'a6e87371003644f090b02c7e5e0823f4b44dfc62', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && ((_b = this.maxLength) !== null && _b !== void 0 ? _b : 0) > 0 && (h("span", { key: '4790188e2a7bc819ce1eb5239950d432193bd083', class: {
                 'text-field-textcounter-divider': true,
                 'text-field-textcounter-disabled': this.disabled,
-            } }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, " / ", this.maxLength)))))));
+            } }, this.value === null ? 0 : (_c = this.value) === null || _c === void 0 ? void 0 : _c.length, " / ", (_d = this.maxLength) !== null && _d !== void 0 ? _d : 0)))))));
     }
     static get is() { return "tds-text-field"; }
     static get encapsulation() { return "scoped"; }
@@ -221,11 +221,11 @@ export class TdsTextField {
                 "mutable": false,
                 "complexType": {
                     "original": "string | number",
-                    "resolved": "number | string",
+                    "resolved": "number | string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Min allowed value for input type number"
@@ -238,11 +238,11 @@ export class TdsTextField {
                 "mutable": false,
                 "complexType": {
                     "original": "string | number",
-                    "resolved": "number | string",
+                    "resolved": "number | string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Max allowed value for input type number"
@@ -255,11 +255,11 @@ export class TdsTextField {
                 "mutable": false,
                 "complexType": {
                     "original": "string | number",
-                    "resolved": "number | string",
+                    "resolved": "number | string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Step value for input type number"
@@ -272,11 +272,11 @@ export class TdsTextField {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Helper text"
@@ -469,11 +469,11 @@ export class TdsTextField {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Max length of input"
@@ -504,11 +504,11 @@ export class TdsTextField {
                 "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. Can be used for announcing that readOnly prop is set to true."

package/dist/collection/components/textarea/textarea.js

@@ -21,7 +21,7 @@ export class TdsTextarea {
         this.autofocus = false;
         this.noMinWidth = false;
         this.tdsAriaLabel = undefined;
-        this.focusInput = undefined;
+        this.focusInput = false;
     }
     handleChange(event) {
         this.tdsChange.emit(event);
@@ -61,8 +61,8 @@ export class TdsTextarea {
         return modeVariant;
     }
     render() {
-        var _a;
-        return (h("div", { key: 'ab345d2f34e48367b2040556b9b3a6564add939d', class: {
+        var _a, _b;
+        return (h("div", { key: 'd7cf9dcacedf2b147de04a8e7a3bf3be9a3795a3', class: {
                 'textarea-container': true,
                 'textarea-label-inside': this.labelPosition === 'inside',
                 'textarea-focus': this.focusInput,
@@ -72,7 +72,7 @@ export class TdsTextarea {
                 'textarea-data': this.value !== '',
                 [`textarea-${this.state}`]: this.state === 'error' || this.state === 'success',
                 'no-min-width': this.noMinWidth,
-            } }, this.labelPosition !== 'no-label' && (h("label", { key: 'c8290eb384aff2b8a8d7c2495b69167066e76415', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: '43cd7476de0402a1aab5eaf2d930678422aaf40e', class: "textarea-wrapper" }, h("textarea", { key: '265bd91d6cb4ca7009d0bc60f3db15c0e6bb47bc', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
+            } }, this.labelPosition !== 'no-label' && (h("label", { key: 'cb98c61db81f4efc7b72c50cc56ca121f3d449c8', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: '8cfd739439df3a7a29ac73054c789f137b6aceb1', class: "textarea-wrapper" }, h("textarea", { key: 'd0d4eae432b70f1a5704e7d5c0fa351be37cf3b7', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
                 this.textEl = inputEl;
             }, disabled: this.disabled, readonly: !this.disabled && this.readOnly, placeholder: this.placeholder, value: this.value, name: this.name, autofocus: this.autofocus, maxlength: this.maxLength, cols: this.cols, rows: this.rows, onFocus: (event) => {
                 if (!this.readOnly) {
@@ -82,7 +82,7 @@ export class TdsTextarea {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": getAriaInvalid(this.host, this.state), "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: '682632eb45587ee86e48fa7dd42946d97db7da13', class: "textarea-resizer-icon" }, h("svg", { key: '7631ef268be5ec867452ba449f769e45c099d574', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ba27459f776dc0d6a6d0570420e4610ee08d6b9e', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), !this.disabled && !this.hideReadOnlyIcon && this.readOnly && (h("span", { key: '34f0c79ee333e2e0b0e27dc63d4be1e93b7fc6e4', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: '0aa6ad6c681f5abe6ba19a28f80125d002543fc4', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '780fe72cff253212d79820c29a701258c55da508', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: '657766f8f89e07aaac65daece6fc1162b925986a', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: 'ce5e472fb172d53cb45e9dab4c317fb38dbd05eb', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (h("div", { key: '919a5471cfad225cefe6c30e88f782cdfc913b2f', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '338ef9cdac06151d4fd092208764e3812c2d4f01', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
+            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": getAriaInvalid(this.host, this.state), "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: 'ea26d42ffcc583c3047101200f3abcdcc731bda7', class: "textarea-resizer-icon" }, h("svg", { key: 'b61a4cda00dde41c07961ba320b996b14b04ce80', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '33118433cdc99ce54347f6720912302d0d3e8c58', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), !this.disabled && !this.hideReadOnlyIcon && this.readOnly && (h("span", { key: 'b399c8b24f70b6f12b54045cc526fb858f162a06', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: '61e7fa6193e2046a8d619078265cae1b0d43b482', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: 'e3e74b086fb69ced9d59be3802038e055b9a08d5', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: 'be3f5a580e3b741229c61326c0e03df53b1510ee', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: '2e201cf5e459f0b295ec32a25e1fd1d71e8491df', name: "error", size: "16px" })), this.helper), ((_a = this.maxLength) !== null && _a !== void 0 ? _a : 0) > 0 && (h("div", { key: 'bf7060e27d93495f349771d8b1cc5fb6d0f81e01', class: 'textarea-textcounter' }, this.value === null ? 0 : (_b = this.value) === null || _b === void 0 ? void 0 : _b.length, h("span", { key: 'fd01defdf5a5a3e854b082ed0f6e68e5c943151b', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
     }
     static get is() { return "tds-textarea"; }
     static get encapsulation() { return "scoped"; }
@@ -139,11 +139,11 @@ export class TdsTextarea {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Helper text"
@@ -156,11 +156,11 @@ export class TdsTextarea {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Textarea cols attribute"
@@ -173,11 +173,11 @@ export class TdsTextarea {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Textarea rows attribute"
@@ -316,11 +316,11 @@ export class TdsTextarea {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Max length of input"
@@ -387,11 +387,11 @@ export class TdsTextarea {
                 "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. Can be used for announcing that readOnly prop is set to true."

package/dist/collection/components/toast/toast.js

@@ -65,12 +65,12 @@ export class TdsToast {
         const usesHeaderSlot = hasSlot('header', this.host);
         const usesSubheaderSlot = hasSlot('subheader', this.host);
         const usesActionsSlot = hasSlot('actions', this.host);
-        return (h(Host, { key: '09db24b58ba05daeba3e00ae880e86e700a43c2d', "aria-live": this.tdsAriaLive, toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
+        return (h(Host, { key: 'c486cb86a0e94181135e304cbda2b1bbbb20da22', "aria-live": this.tdsAriaLive, toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
                 hide: this.hidden,
                 show: !this.hidden,
-            } }, h("div", { key: '253a018ec0eea9e17f72200f52a38e71802f2902', class: `
+            } }, h("div", { key: '946ba38a6c95e3450936014cc46c1eb43f927f0d', class: `
             wrapper
-            ${this.variant}` }, h("tds-icon", { key: '953f414876c38ffb05bc0c684850ab53df124b5e', name: this.getIconName(), size: "20px", svgTitle: this.getIconName() }), h("div", { key: 'eb1ec8eb50cf3e05ecd880c427804626d9e4c51b', class: `content` }, h("div", { key: '97a0f4cb5ec278ad6a22051328461a9e0e1ce0ff', class: "header-subheader" }, this.header && h("div", { key: 'b3ae30e072257f4a74e748e24991bbab72a80c01', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: '761fac1eda5bedd6c36d00be0548109c4f774af9', name: "header" }), this.subheader && h("div", { key: 'b4916a19416d8c0bfbdc0ef3d98fefda6ea96c86', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '62813da86efbf2ddf089a4931e11f774d6d27491', name: "subheader" })), usesActionsSlot && (h("div", { key: '93ec29dca445466da32ea2dc1c04bef76b8dc79e', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: 'fa9aeb95c9c569e77f85e3b65d993064e35dad81', name: "actions" })))), this.closable && (h("button", { key: '0d0aad78ebd983647774a2afdb593a7aa4e2dbf9', id: "my-button", "aria-label": this.tdsCloseAriaLabel, onClick: this.handleClose, class: "close" }, h("tds-icon", { key: 'df6e7efeef43689bf44c101d23e5ce725d087951', name: "cross", size: "20px", svgTitle: "cross" }))))));
+            ${this.variant}` }, h("tds-icon", { key: '3af328a28e80e1b3f69ec0f4dda31f9d9c7c8571', name: this.getIconName(), size: "20px", svgTitle: this.getIconName() }), h("div", { key: 'eec58153da1bc4dee5955e2393f0610db40242c1', class: `content` }, h("div", { key: 'd40f9433b851fbd3dcfd0d60099d5035a87af2e0', class: "header-subheader" }, this.header && h("div", { key: '7748dda823fc8c17f4a7eb94d15140ba4301fa83', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: '880576822af000000c972125aea031c73569768d', name: "header" }), this.subheader && h("div", { key: 'cc9dee1cef953cce966ebee2ed6c82f693f21dc1', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '01f596caf428985a0bb4dbc97282dead449fef61', name: "subheader" })), usesActionsSlot && (h("div", { key: '81e666f0d9810a0baf008782e6fee3f731b04ab2', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: '085aab762cc590904d6531fcf7e969d1fa0f4eca', name: "actions" })))), this.closable && (h("button", { key: '6e1c909296a175d3a994caccb57f59ab5da9eae2', id: "my-button", "aria-label": this.tdsCloseAriaLabel, onClick: this.handleClose, class: "close" }, h("tds-icon", { key: 'a1e5a6c21070afea181f6b5f20000458b50dbb45', name: "cross", size: "20px", svgTitle: "cross" }))))));
     }
     static get is() { return "tds-toast"; }
     static get encapsulation() { return "shadow"; }
@@ -109,11 +109,11 @@ export class TdsToast {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Header text for the component."
@@ -126,11 +126,11 @@ export class TdsToast {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Subheader text for the component."
@@ -215,11 +215,11 @@ export class TdsToast {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Provides an accessible name for the components close button"