@scania/tegel 1.25.0 → 1.26.0-onTdsChange-gets-triggered-unexpectedly-beta.0

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

@@ -16,11 +16,29 @@ export class TdsFolderTab {
     async setSelected(selected) {
         this.selected = selected;
     }
+    connectedCallback() {
+        const elements = this.host.querySelectorAll('button, a');
+        for (let index = 0; index < elements.length; index++) {
+            const element = elements[index];
+            if (!element.getAttribute('aria-controls')) {
+                console.warn('Tegel folder-tab component: Interactive elements should have aria-controls attribute to link the tab to its corresponding panel');
+            }
+            if (element.getAttribute('role') !== 'tab') {
+                console.warn('Tegel folder-tab component: Interactive elements should have attribute role="tab"');
+            }
+            if (this.disabled) {
+                element.setAttribute('aria-disabled', 'true');
+            }
+            else {
+                element.removeAttribute('aria-disabled');
+            }
+        }
+    }
     render() {
-        return (h(Host, { key: '3ebe8719ec0bae1d4de2f698b032d9914f01fc65', role: "listitem" }, h("div", { key: '26e4df6a7c2c3ec3cc9b391004b0ecc2e08886ce', class: {
+        return (h(Host, { key: '9290c4ab2f7d051bba9fec4dad9a7d07790ed5b7', "aria-selected": this.selected }, h("div", { key: '36225101c510f2d77282fd600c4ee00085791109', class: {
                 selected: this.selected,
                 disabled: this.disabled,
-            }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: '78549272532f6fa272660fde77c61464dbede36c' }))));
+            }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: '05954c498b9fbd6a2a1231d84bf2657a0616db36' }))));
     }
     static get is() { return "tds-folder-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -114,4 +132,5 @@ export class TdsFolderTab {
             }
         };
     }
+    static get elementRef() { return "host"; }
 }

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

@@ -60,6 +60,8 @@ export class TdsFolderTabs {
         this.modeVariant = null;
         this.defaultSelectedIndex = 0;
         this.selectedIndex = undefined;
+        this.tdsScrollLeftAriaLabel = 'Scroll left';
+        this.tdsScrollRightAriaLabel = 'Scroll right';
         this.buttonWidth = 0;
         this.showLeftScroll = false;
         this.showRightScroll = false;
@@ -160,9 +162,9 @@ export class TdsFolderTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: 'ab95c2616920aa0feb451cdc8e05697bfedb12b6', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '5330ac0094013711f2d85befe37e7f02de22d8c9', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '54a3cceed49387a8f0dbe74eecb96ae284882ff9', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '170e5256bde8efdce412bbab1a674b23159d02d1', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, h("button", { key: 'cf1d97ff6db378f1a9d2306dce45ccc24ff00718', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: 'df3cd8050d37eeb32e957ec22796c551476f003b', name: "chevron_left", size: "20px" })), h("slot", { key: '695ba9188c06a56785b1362e7554cf0bdfa0c635', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'c64fa2e8788ef3ae78dd1c32b6755625abd4a115', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: '3d7f40dcc022b37d1d5419ff4b111bf085011698', name: "chevron_right", size: "20px" })))));
+            } }, h("button", { key: '1c74ef8c81361bfa6ff5d227c145a3371fb2f66f', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: '94ddd85d4107c89487db727f13a9c443fd160fc6', name: "chevron_left", size: "20px" })), h("slot", { key: '63978c3c62482bc0a251377756630f555f10dfef', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'aeb86fbdb365e62df37b72daa0b53f51486834a9', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: '2cc4d301a4490d6b8d8f2373fc2450c93922a814', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-folder-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -230,6 +232,42 @@ export class TdsFolderTabs {
                 },
                 "attribute": "selected-index",
                 "reflect": true
+            },
+            "tdsScrollLeftAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines aria-label on left scroll button"
+                },
+                "attribute": "tds-scroll-left-aria-label",
+                "reflect": false,
+                "defaultValue": "'Scroll left'"
+            },
+            "tdsScrollRightAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines aria-label on right scroll button"
+                },
+                "attribute": "tds-scroll-right-aria-label",
+                "reflect": false,
+                "defaultValue": "'Scroll right'"
             }
         };
     }

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

@@ -11,12 +11,30 @@ export class TdsInlineTab {
     async setSelected(selected) {
         this.selected = selected;
     }
+    connectedCallback() {
+        const elements = this.host.querySelectorAll('button, a');
+        for (let index = 0; index < elements.length; index++) {
+            const element = elements[index];
+            if (!element.getAttribute('aria-controls')) {
+                console.warn('Tegel inline-tab component: Interactive elements should have aria-controls attribute to link the tab to its corresponding panel');
+            }
+            if (element.getAttribute('role') !== 'tab') {
+                console.warn('Tegel inline-tab component: Interactive elements should have attribute role="tab"');
+            }
+            if (this.disabled) {
+                element.setAttribute('aria-disabled', 'true');
+            }
+            else {
+                element.removeAttribute('aria-disabled');
+            }
+        }
+    }
     render() {
-        return (h(Host, { key: '4b05e137c36bc1307778c29ea67aa05fe51b0048', role: "listitem" }, h("div", { key: 'e290c72530ea8a55561c087eef706f6faeff5ddc', class: {
+        return (h(Host, { key: '4c9f91014f30c1e7db52778dc4cf8800aa62050d', "aria-selected": this.selected }, h("div", { key: '860cfdd9338915275262875fc79588b58bebf447', class: {
                 'inline-tab-item': true,
                 'selected': this.selected,
                 'disabled': this.disabled,
-            } }, h("slot", { key: 'ec94a152be5f26837f77b915d8176b3bc2df0036' }))));
+            } }, h("slot", { key: 'eeccc1bdc172fab4d7ad96143b01f17982266f4d' }))));
     }
     static get is() { return "tds-inline-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -85,4 +103,5 @@ export class TdsInlineTab {
             }
         };
     }
+    static get elementRef() { return "host"; }
 }

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

@@ -60,6 +60,8 @@ export class TdsInlineTabs {
         this.modeVariant = 'primary';
         this.defaultSelectedIndex = 0;
         this.selectedIndex = undefined;
+        this.tdsScrollLeftAriaLabel = 'Scroll left';
+        this.tdsScrollRightAriaLabel = 'Scroll right';
         this.leftPadding = 32;
         this.showLeftScroll = false;
         this.showRightScroll = false;
@@ -167,9 +169,9 @@ export class TdsInlineTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: '1dc5b7ff1aa5c9a1cb0cd9064be6b064c0b7ba20', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '1f66f69ca3cf4d25565a41cfcf1cbffcd8a4b355', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '47fd4d494254749aa276d4f046ded68fe472b062', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'f5c42677bafef38db784c517714ac8a4e0149862', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '98601dfb32252be02f7db236bb71bf21bd59147f', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'ba1b3b814bdba6d0334eb037d62476cabe8790f6', name: "chevron_left", size: "20px" })), h("slot", { key: 'cd9564df014b85e27d7a37cbb262d55872745f3c', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'e2690cd7e7dddd5b3e66e5767602e25e70c1e6fb', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: 'eff5006eecba07819c6b91c489f2ee3104ed78b6', name: "chevron_right", size: "20px" })))));
+            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '5955dc1657efcfec14393987f6ebfaea4c90615d', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '3c3c7d93197f40b0cbb67d20cd5c32b827a29430', name: "chevron_left", size: "20px" })), h("slot", { key: '335ec61f80defb892c229901165809487950dc03', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'cc22a000e41efa472638da3c480b5cf1094aaec2', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '9ca29d2d1cb3df19993723a2eb0716d36c0f20ea', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-inline-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -238,6 +240,42 @@ export class TdsInlineTabs {
                 "attribute": "selected-index",
                 "reflect": true
             },
+            "tdsScrollLeftAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines aria-label on left scroll button"
+                },
+                "attribute": "tds-scroll-left-aria-label",
+                "reflect": false,
+                "defaultValue": "'Scroll left'"
+            },
+            "tdsScrollRightAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines aria-label on right scroll button"
+                },
+                "attribute": "tds-scroll-right-aria-label",
+                "reflect": false,
+                "defaultValue": "'Scroll right'"
+            },
             "leftPadding": {
                 "type": "number",
                 "mutable": false,

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

@@ -11,9 +11,27 @@ export class TdsNavigationTab {
     async setSelected(selected) {
         this.selected = selected;
     }
+    connectedCallback() {
+        const elements = this.host.querySelectorAll('button, a');
+        for (let index = 0; index < elements.length; index++) {
+            const element = elements[index];
+            if (!element.getAttribute('aria-controls')) {
+                console.warn('Tegel navigation-tab component: Interactive elements should have aria-controls attribute to link the tab to its corresponding panel');
+            }
+            if (element.getAttribute('role') !== 'tab') {
+                console.warn('Tegel navigation-tab component: Interactive elements should have attribute role="tab"');
+            }
+            if (this.disabled) {
+                element.setAttribute('aria-disabled', 'true');
+            }
+            else {
+                element.removeAttribute('aria-disabled');
+            }
+        }
+    }
     render() {
-        return (h(Host, { key: 'ed5cdc4e3c00f43156fce13993c34a4183c127d7', role: "listitem" }, h("div", { key: '5ac651a862a04b0327695d2ad6ed42af7af0d139', class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
-           ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '4cf2d6c740cc73cbe5743191776ce008bf8dd358' }))));
+        return (h(Host, { key: '51152bf313a84cb937e7f49e87cc8dcd74ab0612' }, h("div", { key: '5d55db68f75e042dafe40da1b9e84d74f1cd8849', class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
+           ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '174108daa16d6fa68c04244af1843771a4df91f5' }))));
     }
     static get is() { return "tds-navigation-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -82,4 +100,5 @@ export class TdsNavigationTab {
             }
         };
     }
+    static get elementRef() { return "host"; }
 }

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

@@ -61,6 +61,8 @@ export class TdsNavigationTabs {
         this.defaultSelectedIndex = 0;
         this.selectedIndex = undefined;
         this.leftPadding = 32;
+        this.tdsScrollLeftAriaLabel = 'Scroll left';
+        this.tdsScrollRightAriaLabel = 'Scroll right';
         this.showLeftScroll = false;
         this.showRightScroll = false;
     }
@@ -167,15 +169,15 @@ export class TdsNavigationTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: '7d073990d798ef8bd602cff43f1dab1701c67535', role: "list", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: '2816efa2148f1feaa0283a8c3a023ff044f5ea11', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '809fe9d34b03949edae1708b6dea7f0406afee80', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: '866605f8695441d7817c07895bdffd5e3e7ba5ac', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: 'b95bf6d5da6b7a9eeea0079b54f729188175c122', class: {
+            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '2d394ecb940cee024174932676c2a6c22622c853', "aria-label": this.tdsScrollLeftAriaLabel, class: {
                 'scroll-left-button': true,
                 'show': this.showLeftScroll,
-            }, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '71577f14a5b1e3348a5b69f9e44c6945a5c5f99f', name: "chevron_left", size: "20px" })), h("slot", { key: 'be3cb961b96a307fdd4ac6f54e7ef0f188e20fe4', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'ac6d8c5720e782e48caedf7fffb3f8a485b51fdb', class: {
+            }, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '09386162127467a545e00f44130352afb9cfed03', name: "chevron_left", size: "20px" })), h("slot", { key: '3b3cd70ed645318d0661a3acbee3d2bc748314cf', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '1afb2dc9b261626db800593548d7e023e14cd39b', "aria-label": this.tdsScrollRightAriaLabel, class: {
                 'scroll-right-button': true,
                 'show': this.showRightScroll,
-            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '0fc2e8bf463fff2caba762220098a239919d4c93', name: "chevron_right", size: "20px" })))));
+            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '451a8ddc680799fd86e390d8aeab5c22c73f31ee', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-navigation-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -261,6 +263,42 @@ export class TdsNavigationTabs {
                 "attribute": "left-padding",
                 "reflect": true,
                 "defaultValue": "32"
+            },
+            "tdsScrollLeftAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines aria-label on left scroll button"
+                },
+                "attribute": "tds-scroll-left-aria-label",
+                "reflect": false,
+                "defaultValue": "'Scroll left'"
+            },
+            "tdsScrollRightAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines aria-label on right scroll button"
+                },
+                "attribute": "tds-scroll-right-aria-label",
+                "reflect": false,
+                "defaultValue": "'Scroll right'"
             }
         };
     }

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

@@ -54,7 +54,7 @@ export class TdsTextField {
         var _a;
         const usesPrefixSlot = hasSlot('prefix', this.host);
         const usesSuffixSlot = hasSlot('suffix', this.host);
-        return (h("div", { key: '218f38761223da2f6e9abf913551cc6c9b7f5766', class: {
+        return (h("div", { key: '9a746f9a955c02adbc1154e02dc82fc6062d4eeb', class: {
                 'form-text-field': true,
                 'form-text-field-nomin': this.noMinWidth,
                 'text-field-focus': this.focusInput && !this.disabled,
@@ -68,12 +68,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: 'e2e2745caf16f1a2cc5757e43d7285a3ac694f06', class: "text-field-label-outside" }, h("div", { key: 'e7f20b834be522122e3656403a1e90d4bdebcaff' }, this.label))), h("div", { key: '3782c060097653bdfd2ca129486e5945e2620954', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '4c91f21a73034a6918deb18226812c12e297aa4b', class: {
+            } }, this.labelPosition === 'outside' && (h("div", { key: '4a6a898131f86115c6cbf07f6e67058ac548fdfb', class: "text-field-label-outside" }, h("div", { key: '868b1372153ac1d27e0d407a5199c8cb6659d21a' }, this.label))), h("div", { key: '917a0691663c81418cb8adfc2963e2514f6a228d', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: 'e11cb3a273a9899972b035b1296deda841145928', 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: '5d3cae29c5e28a11c55617c01b0c737c49fdd037', name: "prefix" }))), h("div", { key: '8c26d4fab3c17c3cea194bb627c84d66cdde209a', class: "text-field-input-container" }, h("input", { key: '78b9e8949f97668c3a87ee29f5a3f8ccc4144f36', ref: (inputEl) => {
+            } }, h("slot", { key: 'a6336094ef22454c6d7b782b78690773dfcc444a', name: "prefix" }))), h("div", { key: 'cee83edde0b7189258aa7f1aaa3573d27b4e0d06', class: "text-field-input-container" }, h("input", { key: '27c52fc9ffa89f57578d152a5eaf8bd25c4b48d7', ref: (inputEl) => {
                 this.textInput = inputEl;
             }, class: {
                 'text-field-input': true,
@@ -88,16 +88,16 @@ export class TdsTextField {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '0b52682b6ae31b9ab145bbe2e728c964af34ce82', class: "text-field-label-inside" }, this.label))), h("div", { key: '8988b72caf92303b3dbb5c5dd6b3e89975e1a116', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: 'dec6fcb2afc3617dc84360bc13d2f9a2acedac3d', class: {
+            } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '00fdc9f7231bb1991afb37d3477ac6267594ccb5', class: "text-field-label-inside" }, this.label))), h("div", { key: 'a5c349a2e3695122244feb4daacf9c0a523656d6', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: 'f4812d2d9162330bb9e9a480a6f1c6fb0f1603b4', 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: '2b8a9f15a85ebcf01f4db88f7a113775b602be2c', name: "suffix" }))), h("span", { key: '1934c462d7a9427a265c411ca6befe0c63f95eef', class: "text-field-icon__readonly" }, h("tds-icon", { key: 'f2c800161b1e131966a4c2f01525de4df01d3d96', name: "edit_inactive", size: "20px" })), h("span", { key: '2c899ef5a118a99cbbb1fc1cd920cc5bf9d22f1e', class: "text-field-icon__readonly-label" }, "This field is non-editable")), (this.helper || this.maxLength > 0) && (h("div", { key: 'eb31f7eb2a8c88952972d4005ac82e917b7c2425', class: "text-field-helper" }, this.state === 'error' && (h("div", { key: '0a61f37738f50f54a81686b6d923d85a0d07cff2', class: "text-field-helper-error-state" }, h("tds-icon", { key: 'ae20a242ee3dda49ce757e9733b081ed00ec51c1', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { key: '85e2c4ae48276b84b4507380e51663b9166de4a8', class: {
+            } }, h("slot", { key: '2583307a640ff3b1badd3b528db408bb9aeb4ca2', name: "suffix" }))), h("span", { key: '04fe8fb44155eacd3a2e24e84783f2145f244c9c', class: "text-field-icon__readonly" }, h("tds-icon", { key: '68a92868b1c5828c41f36eaddd97532e14a82f68', name: "edit_inactive", size: "20px" })), h("span", { key: 'a7f89ce9d3bab3b89787a9baf59c35dba06f023e', class: "text-field-icon__readonly-label" }, "This field is non-editable")), (this.helper || this.maxLength > 0) && (h("div", { key: 'ba89f1650e5ebbb45f0dbc06548ed86add1d4971', class: "text-field-helper" }, this.state === 'error' && (h("div", { key: 'dc9368caca14d7fdb4e0ad061181352daeae235b', class: "text-field-helper-error-state" }, h("tds-icon", { key: '07d99458b372b6edb1f9268dcc66f88840005a92', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { key: 'c1d143899e66bddb364322537ab3940f7498d63d', class: {
                 'text-field-textcounter': true,
                 'text-field-textcounter-disabled': this.disabled,
-            } }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: 'e914734efb5f59bf5a3012785d20d1c3caf73b2b', class: {
+            } }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '9bd585768330df043bdcba388fbfb13ec087522d', class: {
                 'text-field-textcounter-divider': true,
                 'text-field-textcounter-disabled': this.disabled,
             } }, ' ', "/", ' '), this.maxLength))))));

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

@@ -38,7 +38,7 @@ export class TdsTextarea {
     }
     render() {
         var _a;
-        return (h("div", { key: 'df1eac7e06beaecb0e0b35acea40e97e2591b67c', class: {
+        return (h("div", { key: '20555ab5f931d14f485a30e1dd817143ae5a5b88', class: {
                 'textarea-container': true,
                 'textarea-label-inside': this.labelPosition === 'inside',
                 'textarea-focus': this.focusInput,
@@ -48,7 +48,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("span", { key: '01b1b35061500bb6f6d8264f4423b86919e36440', class: 'textarea-label' }, this.label), h("div", { key: '296a6e3373cf1f9390a0d872f8a5234de60ca225', class: "textarea-wrapper" }, h("textarea", { key: '607a50a7f0ac33f97309d45af357a1a77f488f0b', class: 'textarea-input', ref: (inputEl) => {
+            } }, this.labelPosition !== 'no-label' && h("span", { key: '5da3048c718ddb65116fdf42d4b11a5f0718c1db', class: 'textarea-label' }, this.label), h("div", { key: '5c7103748771190a3e761cf0f2979c92d68432b4', class: "textarea-wrapper" }, h("textarea", { key: '97a036edf21ec7dad9f52abea52562b6a55ca109', class: 'textarea-input', ref: (inputEl) => {
                 this.textEl = inputEl;
             }, disabled: this.disabled, readonly: 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) {
@@ -58,7 +58,7 @@ export class TdsTextarea {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event) }), h("span", { key: '93cfa65a73f4a5dd99b1cca32ea7aa43684ebd71', class: "textarea-resizer-icon" }, h("svg", { key: 'c92482caf1c3393de3e17c09a722c6271b6491bd', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'f8e559e88a5ae9f9ce56a3fe17805dd13c3cb87b', "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" }))), h("span", { key: 'f6879b23708b98106db17c5365b2d30ead80ef07', class: "textarea-icon__readonly" }, h("tds-icon", { key: '6a9a48dd793bfb3e6e98d4f852de3a1b2d47cdb6', name: "edit_inactive" })), h("span", { key: '45fe2bb6fa1d93ee4b0e819e7f9af56ddbe5069e', class: "textarea-icon__readonly-label" }, "This field is non-editable")), h("span", { key: '3c1e507d0a3e779eee4c1d305c3a049a1de11acc', class: 'textarea-helper' }, this.state === 'error' && h("tds-icon", { key: '0a8acfbb00d0769c80706c0e301a4d80e19f05e8', name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { key: '9d5f548efae98ec821ac0d177b966acca9487420', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '4b65816bace297379425b122624f660f442e8391', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
+            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event) }), h("span", { key: 'bc1422693b7be09e7057e11b76ae781d7b0f4fad', class: "textarea-resizer-icon" }, h("svg", { key: '3836f33d521ec1f35a6dceb3240a61bc750ca875', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '75f1a8d478002b9b3a1febd3ff433c14b4f6470f', "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" }))), h("span", { key: '43899208bb06e613eff34d4a9d73b7003d4e0df4', class: "textarea-icon__readonly" }, h("tds-icon", { key: 'd8610ee288753d67e20571fce9707d9b9f2e4ccc', name: "edit_inactive" })), h("span", { key: '208ada20b1053f93db759d7cc9c7dc653735135a', class: "textarea-icon__readonly-label" }, "This field is non-editable")), h("span", { key: 'f5aee4903c0bf3e7612af6dc84eab08ce0e09180', class: 'textarea-helper' }, this.state === 'error' && h("tds-icon", { key: '4581239d829a9e07dc91f3352042220ab3d334b0', name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { key: 'b06905f370babfe0470e914df045c72ef7e12041', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: 'd45f87ccf1ccf4198276b3e2c7fe465aeeb9fe17', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
     }
     static get is() { return "tds-textarea"; }
     static get encapsulation() { return "scoped"; }

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

@@ -58,12 +58,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: '5fac1ff9ddf0d4b253128483df7d1fac68e1fa00', toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
+        return (h(Host, { key: '47e0159502e048c0359a5a17677f0456aa69a4da', toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
                 hide: this.hidden,
                 show: !this.hidden,
-            } }, h("div", { key: 'ba33d3e599bb3d3e5d17e4f53b05928602fdf4fa', class: `
+            } }, h("div", { key: '6ae5a9da5c89de7a2336f48f495d61cc11286495', class: `
             wrapper
-            ${this.variant}` }, h("tds-icon", { key: 'b9bd3c5a3041c6f66a93d50bc51275eb8cb21b5e', name: this.getIconName(), size: "20px" }), h("div", { key: '2cac0367dca09cbdba1e5a5346ba2274d241edd6', class: `content` }, h("div", { key: '09b084fb15f4cbfc247d07b82058baf968bf042a', class: "header-subheader" }, this.header && h("div", { key: '1a8273285007e20e5c92dee6d7526d30386f0384', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: 'a0600af57cf34e0d02094f1c1c64edca7872cd1a', name: "header" }), this.subheader && h("div", { key: 'c9dae07de1734804e6c86c7e862afc07bd004f39', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: 'dc520b66747bb6ebdf3438b15b3f33f4e112484c', name: "subheader" })), usesActionsSlot && (h("div", { key: '96d8db293276c1a6f164f098b984ef3b073c06e1', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: '42a5984384426088eedea3dd86fafe3abfc8209d', name: "actions" })))), this.closable && (h("button", { key: '16d6a79ce5d9eb619e84d916833d2ffd9409d545', onClick: this.handleClose, class: "close" }, h("tds-icon", { key: 'a80152d6d7420fbe3729a9a8e29b79d4790b5294', name: "cross", size: "20px" }))))));
+            ${this.variant}` }, h("tds-icon", { key: 'c6ce5ea135bddef0ad0f7172ac8d7be6725a3597', name: this.getIconName(), size: "20px" }), h("div", { key: 'b3db26a1314c8a2d55c7d028cdc2f4951a738eaf', class: `content` }, h("div", { key: '3418ea02c85852fe548130c6c653a8dacdd9437a', class: "header-subheader" }, this.header && h("div", { key: '0a50b5e2a487be36a00ad89ad4f14cf1af83477d', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: 'df199798748ed7ade9cbda7f7ce798bb6f8fa995', name: "header" }), this.subheader && h("div", { key: '4978346a3726aea3af0aa7bb98487c36873045d3', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '49651b229907504dfca5aec35589595b421f6e1b', name: "subheader" })), usesActionsSlot && (h("div", { key: '6dbfa25c49118e92c2a254fb01156a95004f0738', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: '85235296f757e0a6306d76ef83c855c3e9bb6cb4', name: "actions" })))), this.closable && (h("button", { key: 'd6946c5ff592b494be06dcb7b46dfc56b5eb5efc', onClick: this.handleClose, class: "close" }, h("tds-icon", { key: '51a93ef789343f24686183ba1747fc853e6d9e04', name: "cross", size: "20px" }))))));
     }
     static get is() { return "tds-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toggle/toggle.js

@@ -19,6 +19,7 @@ export class TdsToggle {
         this.headline = undefined;
         this.disabled = false;
         this.toggleId = generateUniqueId();
+        this.tdsAriaLabel = undefined;
     }
     /** Toggles the Toggle. */
     async toggle() {
@@ -28,11 +29,19 @@ export class TdsToggle {
             checked: this.checked,
         };
     }
+    componentWillLoad() {
+        this.labelSlot = this.host.querySelector("[slot='label']");
+    }
+    connectedCallback() {
+        if (!this.tdsAriaLabel) {
+            console.warn('Tegel Toggle component: tdsAriaLabel prop is missing');
+        }
+    }
     render() {
-        return (h("div", { key: '1febf92d7a29a70a1e8fc640f33d147c19c926ad', class: "tds-toggle" }, this.headline && (h("div", { key: '5446e78cb419d98ec9c6017b24bf9f10a93f52eb', class: {
+        return (h("div", { key: '8f8a77827f524c049aa004d15372a78e7fad41e2', class: "tds-toggle" }, this.headline && (h("div", { key: '8e254412e80362807046a893fc3f7c42a0c376ba', class: {
                 'toggle-headline': true,
                 'disabled': this.disabled,
-            } }, this.headline)), h("input", { key: '04759f946c1cf0d61d999db2edeed3f29381918b', "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), h("label", { key: '6231d78c5f748e8b66f35cd5f3f00a84db575b95', class: { disabled: this.disabled }, htmlFor: this.toggleId }, h("slot", { key: '930a9f94e4ac17435cb2977f489fcab2c6daaadc', name: "label" }))));
+            } }, this.headline)), h("input", { key: '47ed1307b67b61b1594006449fb1b4ccf6d031b8', "aria-label": this.tdsAriaLabel, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), this.labelSlot && (h("label", { key: '75964d686710d6b4f8bbe365cc51c8aab3234d26', class: { disabled: this.disabled }, htmlFor: this.toggleId }, h("slot", { key: 'aeeaed1f37a160ce792df3f5115c75eaa0fd2c0a', name: "label" })))));
     }
     static get is() { return "tds-toggle"; }
     static get encapsulation() { return "scoped"; }
@@ -171,6 +180,23 @@ export class TdsToggle {
                 "attribute": "toggle-id",
                 "reflect": false,
                 "defaultValue": "generateUniqueId()"
+            },
+            "tdsAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines aria-label attribute for input"
+                },
+                "attribute": "tds-aria-label",
+                "reflect": false
             }
         };
     }

package/dist/collection/components/tooltip/tooltip.js

@@ -52,7 +52,7 @@ export class TdsTooltip {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'bb230ba4a85cd7f60c15f2ecc6f2ec8a30264c42' }, h("tds-popover-core", Object.assign({ key: '06c7293fff16de7a84e43b76afb595392081bc3d' }, this.inheritedAttributes, { class: {
+        return (h(Host, { key: '963a6dc4a3816d01ca9a1efc76ba06b98faba9f0' }, h("tds-popover-core", Object.assign({ key: '6bc8ffb25e5d31c2c3d9dda9867104990ae8ff18' }, this.inheritedAttributes, { class: {
                 'tds-tooltip': true,
                 [`tds-tooltip-${this.border}`]: true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
@@ -61,7 +61,7 @@ export class TdsTooltip {
                 this.show = true;
             }, onInternalTdsClose: () => {
                 this.show = false;
-            }, defaultShow: this.defaultShow }), this.text, h("slot", { key: 'b43fee19b817c397b06ae9ea021025ed012a2aa1' }))));
+            }, defaultShow: this.defaultShow }), this.text, h("slot", { key: '5df9224787bb470653278d121ceed41ea48b957a' }))));
     }
     static get is() { return "tds-tooltip"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/utils/axeHelpers.js

@@ -1,3 +1,3 @@
 import AxeBuilder from "@axe-core/playwright";
-const disabledRules = ['page-has-heading-one', 'landmark-one-main'];
+const disabledRules = ['page-has-heading-one', 'landmark-one-main', 'region', 'color-contrast'];
 export const tegelAnalyze = async (page) => new AxeBuilder({ page }).disableRules(disabledRules).analyze();

package/dist/collection/utils/convertToString.js

@@ -0,0 +1,14 @@
+/**
+ * Converts a value (string or number) to string
+ * @param value - The value to convert
+ * @returns The string representation of the value, or empty string if null/undefined
+ */
+export const convertToString = (value) => {
+    if (value === null || value === undefined)
+        return '';
+    return value.toString();
+};
+// Optional: If we need array conversion often
+export const convertArrayToStrings = (values) => {
+    return values.map((value) => convertToString(value));
+};

package/dist/components/{p-2ef329f1.js → p-0e6efec9.js}

@@ -58,12 +58,12 @@ const TdsSideMenuItem = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuItem e
         this.updateSlottedElements();
     }
     render() {
-        return (h(Host, { key: 'f6d3cc999d431fb73ac49c7e51fa63ea56bf1130' }, h("div", { key: '7b0d9eb30d571bf2ec2c9dca91d5d0481b1306b5', class: {
+        return (h(Host, { key: '47e9325f6606cb06ce21676b12b9123bb5147501' }, h("div", { key: 'b0309c6d2242d862a3c91fe0f8e94af73af915d5', class: {
                 'component': true,
                 'component-selected': this.selected,
                 'component-active': this.active,
                 'component-collapsed': this.collapsed,
-            } }, h("slot", { key: '74815b1ae22bb4d6981a2441e0048ee2e9bacf2d' }))));
+            } }, h("slot", { key: 'f96fa0078d9d2da5f76edb05d91cb5eb19dd01fb' }))));
     }
     get host() { return this; }
     static get style() { return TdsSideMenuItemStyle0; }

package/dist/components/{p-eac79032.js → p-14ab9663.js}

@@ -28,6 +28,8 @@ const TdsCheckbox = /*@__PURE__*/ proxyCustomElement(class TdsCheckbox extends H
         this.checked = false;
         this.indeterminate = false;
         this.value = undefined;
+        this.tdsAriaLabel = undefined;
+        this.tdsAriaDescribedby = undefined;
     }
     /** Toggles the checked value of the component. */
     async toggleCheckbox() {
@@ -56,12 +58,17 @@ const TdsCheckbox = /*@__PURE__*/ proxyCustomElement(class TdsCheckbox extends H
             this.indeterminate = false;
         }
     }
+    connectedCallback() {
+        if (!this.tdsAriaLabel) {
+            console.warn('Tegel Checkbox component: tdsAriaLabel prop is missing');
+        }
+    }
     render() {
-        return (h("div", { key: '1d0a8257cd1710277e076b4a277dff2c0c89b3d8', class: "tds-checkbox" }, h("input", { key: '689144e40c0be61db6b82aa6eaeb7ff3d09d7d72',
+        return (h("div", { key: '26c1c30edd11f3d1dc76beffa496b93841a7dac5', class: "tds-checkbox" }, h("input", { key: 'ebb9d474d9f726248f7a0c9079c5474431d18104',
             // eslint-disable-next-line no-return-assign
-            ref: (inputElement) => (this.inputElement = inputElement), indeterminate: this.indeterminate, "aria-checked": this.checked, "aria-required": this.required, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), required: this.required, type: "checkbox", name: this.name, value: this.value, id: this.checkboxId, checked: this.checked, disabled: this.disabled, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), onChange: () => {
+            ref: (inputElement) => (this.inputElement = inputElement), indeterminate: this.indeterminate, "aria-checked": this.checked, "aria-required": this.required, "aria-label": this.tdsAriaLabel, "aria-describedby": this.tdsAriaDescribedby, required: this.required, type: "checkbox", name: this.name, value: this.value, id: this.checkboxId, checked: this.checked, disabled: this.disabled, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), onChange: () => {
                 this.handleChange();
-            } }), h("label", { key: '534eed7aa114861c528be0b776879484a35348bf', htmlFor: this.checkboxId }, h("slot", { key: 'db59bcc78f7f2be94037651b880a5ef149b90747', name: "label" }))));
+            } }), h("label", { key: '68e89bdc35cc5f37756cdbde5f563bf64e334310', htmlFor: this.checkboxId }, h("slot", { key: 'f5122194e84705f82c8f148feadfc2787577c346', name: "label" }))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -76,6 +83,8 @@ const TdsCheckbox = /*@__PURE__*/ proxyCustomElement(class TdsCheckbox extends H
         "checked": [1540],
         "indeterminate": [1028],
         "value": [1],
+        "tdsAriaLabel": [1, "tds-aria-label"],
+        "tdsAriaDescribedby": [1, "tds-aria-describedby"],
         "toggleCheckbox": [64]
     }, [[4, "reset", "handleFormReset"]], {
         "indeterminate": ["handleIndeterminateState"]

package/dist/components/{p-4bdaf254.js → p-265c3467.js}

@@ -12,7 +12,7 @@ const TdsSideMenuUserLabel = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuU
         this.subheading = undefined;
     }
     render() {
-        return (h(Host, { key: '361c1868777c78a539e7c36a0acb9963f57fde3c' }, this.heading, this.subheading && h("div", { key: 'a1e15c671dcd77841051c52c3e17ef66bbf7730f', class: "subheading" }, this.subheading)));
+        return (h(Host, { key: '7bac8221992109403d3f0506b7f0125a0b77b6d4' }, this.heading, this.subheading && h("div", { key: 'b9137e36496fb7fc10da067ea61596da2a38fa9d', class: "subheading" }, this.subheading)));
     }
     static get style() { return TdsSideMenuUserLabelStyle0; }
 }, [1, "tds-side-menu-user-label", {