@scania/tegel 1.26.0 → 1.27.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: '919cd453da1e3649fb5da8783ab8fabc47322d47', role: "listitem" }, h("div", { key: 'f00bf3eea1ee0d670d8989e23e27d6c54fbe7c17', 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: '3e3bd62fd02c922fa0592dc0f2dae5a8b49d6c4c' }))));
+            }, 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: '19b773750f13304194341caf79242c7be95b41be', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '915b525f1d8fc67f3edf82f0841ea89cfd8424bc', 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: '806f5ce973b4b9bf842ae4c3fdf42c6160255db4', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: '4762c8fcfb5f7bb9a67ce2515fc3cab557180ca8', name: "chevron_left", size: "20px" })), h("slot", { key: '498f04374cb1ad240df2a6e02830eba9bc6c3c8d', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '47f114815e98c22f26b021df2b5f53f4498ba24b', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: 'b4f3a0e137c84b996bdf7eb7e497e788637ac401', 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: '4bb1d313b0d2b7e3bc612474201b0a3e06dd6555', role: "listitem" }, h("div", { key: 'c49a2745c5c6de9276807e670c9886130f5e5dbd', 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: 'caa1851fd0a992f38e04fb4872e52c90a3731e6a' }))));
+            } }, 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: 'cd482509c07b6074d81a35eb9447ef561ce7c84a', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '63590b1fec8637f1000897f62962dae2efdcc05d', 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: '349a8cc729442d4307f800c69abe36adeb7f7e0c', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'feacf20411c38c0b9d80b25a1a19ef89e812b81d', name: "chevron_left", size: "20px" })), h("slot", { key: '78727b46e6adc0c516cbbfb4dc072f59330c8635', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '580d1416f7329133c58f5bfaaa7169623e1dd001', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: 'f9d1c4f717303f0c1c2eb4b33b361be8fa2f15ab', 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: '58749f71c75a0026b58645df3ccaa6ebd5e5dc9f', role: "listitem" }, h("div", { key: 'ed4cc04c74a69470c95f9ec3ba034c7ad6b9f2d3', class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
-           ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: 'ee7c740413087d0da51bdfc8da4509d482f1faeb' }))));
+        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: '0ca3544da4ef897b44bd2f55b0dc03edf7921818', role: "list", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: '3eff9e0fc6b416171d0928e3e1933fed626fb3ec', 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: '730023259356eec4ec037e56a495dfea4f8d469c', 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: '5e601f5e4a3aa308e5a5a636fc08c7b32387dbd9', name: "chevron_left", size: "20px" })), h("slot", { key: '43c9228e6c328b4cc651a9ffbd7dd8dbbfd592fe', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '7eca0796fed3a98043abbbe306c29eed10cd8c5d', 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: '9b84ae33c083f41ce6d8a83da1f1edb37c95de55', 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

@@ -23,6 +23,7 @@ export class TdsTextField {
         this.state = 'default';
         this.maxLength = undefined;
         this.autofocus = false;
+        this.tdsAriaLabel = undefined;
         this.focusInput = undefined;
     }
     handleChange(event) {
@@ -50,11 +51,16 @@ export class TdsTextField {
             this.textInput.focus();
         }
     }
+    connectedCallback() {
+        if (!this.tdsAriaLabel) {
+            console.warn('Tegel Text Field component: prop tdsAriaLabel is missing');
+        }
+    }
     render() {
         var _a;
         const usesPrefixSlot = hasSlot('prefix', this.host);
         const usesSuffixSlot = hasSlot('suffix', this.host);
-        return (h("div", { key: '9a746f9a955c02adbc1154e02dc82fc6062d4eeb', class: {
+        return (h("div", { key: '188cc7065d3cb6006adf01a9679a97012d0047df', class: {
                 'form-text-field': true,
                 'form-text-field-nomin': this.noMinWidth,
                 'text-field-focus': this.focusInput && !this.disabled,
@@ -68,12 +74,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: '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: {
+            } }, this.labelPosition === 'outside' && (h("div", { key: 'd99cf396da1740b4c3fa5899ef3167d3638d001b', class: "text-field-label-outside" }, h("label", { key: '90a5ec0a376d2793b5f8b87ed4df0ac86c356009', htmlFor: "text-field-input-element" }, this.label))), h("div", { key: '42046ef3f5a9c38658a9d5176f86f4002657138c', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '17ae517366c69e1cad33babcc134c011c4c483e7', 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: 'a6336094ef22454c6d7b782b78690773dfcc444a', name: "prefix" }))), h("div", { key: 'cee83edde0b7189258aa7f1aaa3573d27b4e0d06', class: "text-field-input-container" }, h("input", { key: '27c52fc9ffa89f57578d152a5eaf8bd25c4b48d7', ref: (inputEl) => {
+            } }, h("slot", { key: '9aa4690419f3b688eb13c9ca78ed4dec5c513308', name: "prefix" }))), h("div", { key: '2ad1645844bf5b70383e85712a2d98de15cb5166', class: "text-field-input-container" }, h("input", { key: 'f5c1468ce392cf9e4211ce9fc8bc774a5da19afd', ref: (inputEl) => {
                 this.textInput = inputEl;
             }, class: {
                 'text-field-input': true,
@@ -88,19 +94,19 @@ export class TdsTextField {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            } }), 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: {
+            }, "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": "text-field-helper-element", "aria-readonly": this.readOnly, id: "text-field-input-element" }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: 'f1c3225621de7a83bfb123b8f4a3a8d9a3493e21', class: "text-field-label-inside", htmlFor: "text-field-input-element" }, this.label))), h("div", { key: '2bacfcf84ac1f6495cc5185275f39ef1f1e4476e', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: '2b46f703349e0873f9e777227acf45e0c6c55d8c', 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: '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: {
+            } }, h("slot", { key: 'ec96e0dd2fbe5ffbd1c0e72f1f2d460d7e3c415f', name: "suffix" }))), h("span", { key: 'cd04304e0d56b0d8fb073cb09d8badfb0058ea5b', class: "text-field-icon__readonly" }, h("tds-icon", { key: '2ab8f0964e53b0a47ccb59aefa80e2ca4a80cd84', name: "edit_inactive", size: "20px" })), h("span", { key: 'f2c3b266b25986fd2d3ad1ff9e300eb846c2a246', class: "text-field-icon__readonly-label" }, "This field is non-editable")), h("div", { key: '4f277fc3ed71efb3ba66068e8322e03d472ed2f5', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: '10eb1e5c33c36a7277e4f1f12f4af1e4cac45718', class: "text-field-helper", id: "text-field-helper-element" }, this.state === 'error' && (h("div", { key: 'fa1460b9ed4bd737319e3a780c54f4440e7fff7e', class: "text-field-helper-error-state" }, h("tds-icon", { key: '639aed75bf25c37d5db04c48b3d854e279cab80d', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { key: '66d348fea3906735bcfe6d63e951af1366a901f0', 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: '9bd585768330df043bdcba388fbfb13ec087522d', class: {
+            } }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '744acd41ca6d968ee5dab7bd50ca52f5704b21dc', class: {
                 'text-field-textcounter-divider': true,
                 'text-field-textcounter-disabled': this.disabled,
-            } }, ' ', "/", ' '), this.maxLength))))));
+            } }, ' ', "/", ' '), this.maxLength)))))));
     }
     static get is() { return "tds-text-field"; }
     static get encapsulation() { return "scoped"; }
@@ -287,7 +293,7 @@ export class TdsTextField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Set input in readonly state. Hides the suffix slot if true."
+                    "text": "Set input in readonly state"
                 },
                 "attribute": "read-only",
                 "reflect": false,
@@ -417,6 +423,23 @@ export class TdsTextField {
                 "attribute": "autofocus",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "tdsAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value to be used for the aria-label attribute. Can be used for announcing that readOnly prop is set to true."
+                },
+                "attribute": "tds-aria-label",
+                "reflect": false
             }
         };
     }

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

@@ -38,7 +38,7 @@ export class TdsTextarea {
     }
     render() {
         var _a;
-        return (h("div", { key: '20555ab5f931d14f485a30e1dd817143ae5a5b88', class: {
+        return (h("div", { key: 'ad924c149590d14fe1f35a57b430186c743d715c', 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: '5da3048c718ddb65116fdf42d4b11a5f0718c1db', class: 'textarea-label' }, this.label), h("div", { key: '5c7103748771190a3e761cf0f2979c92d68432b4', class: "textarea-wrapper" }, h("textarea", { key: '97a036edf21ec7dad9f52abea52562b6a55ca109', class: 'textarea-input', ref: (inputEl) => {
+            } }, this.labelPosition !== 'no-label' && h("span", { key: '4c2759ed5e3ba6bae9f1175628d0e5b21110f2f6', class: 'textarea-label' }, this.label), h("div", { key: '7b9987a019997bf13af684cb6fd822af2a4e327f', class: "textarea-wrapper" }, h("textarea", { key: '8589c0e3e0faf00f48c1ec35926b354b0734bb2a', 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: '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))));
+            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event) }), h("span", { key: '26e66224d7a3981de049870774d62f8f09cc1b4a', class: "textarea-resizer-icon" }, h("svg", { key: '7922eb0ec64601f7e97279badca76ca40e2ab2f4', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '486d91034b0c17328eee9677054b94b5b795b4d0', "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: '68beff246389edc7970aab014dd84747eecf91fa', class: "textarea-icon__readonly" }, h("tds-icon", { key: '50f46d667cef9b5c6bcf54af14a8b5acc690932c', name: "edit_inactive" })), h("span", { key: '7e02c5f24fccfedbcbcb3863593ea6400828dcb7', class: "textarea-icon__readonly-label" }, "This field is non-editable")), h("span", { key: '426207b0db106f44fc9075b9a0de765b43cae519', class: 'textarea-helper' }, this.state === 'error' && h("tds-icon", { key: '3cb35ce4804432f5cc46eb90c779cbd2076f07c5', name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { key: '78130caa7cdc0c419b47539cd455adb2a5a33f10', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: 'a52c798f87eb16c79bbd2605956aff48336e4169', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
     }
     static get is() { return "tds-textarea"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/toast/toast.css

@@ -92,7 +92,7 @@
   padding-bottom: 0;
 }
 :host .content .toast-bottom {
-  margin-top: 12px;
+  padding-top: 12px;
 }
 :host slot[name=actions]::slotted(*) {
   color: var(--tds-toast-link-color);

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: '47e0159502e048c0359a5a17677f0456aa69a4da', toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
+        return (h(Host, { key: '0fbdb9e7e9495399272925957c3930bfa7c6d8aa', toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
                 hide: this.hidden,
                 show: !this.hidden,
-            } }, h("div", { key: '6ae5a9da5c89de7a2336f48f495d61cc11286495', class: `
+            } }, h("div", { key: '91d24fc7670e387748e995d649c11e627d119289', class: `
             wrapper
-            ${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" }))))));
+            ${this.variant}` }, h("tds-icon", { key: '9e671027166b02eb4297c512a7c9d8e981edad83', name: this.getIconName(), size: "20px" }), h("div", { key: '5700c75533f321a86feb06e7354fadc8f79b04ee', class: `content` }, h("div", { key: 'af17cd657ea83a7c4c82da3818405cd02da73b32', class: "header-subheader" }, this.header && h("div", { key: '0c300bd28b2ea677a673b6904a49d0cf7f4dd08c', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: 'c3389bd852aafc9bcc71e2c0742b5b8e13d55e19', name: "header" }), this.subheader && h("div", { key: '8fd6596be6134ad42569bd1081391093e1d3288a', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: 'ddd4b0cfbd2500a0dcd87a9ceda819297e699341', name: "subheader" })), usesActionsSlot && (h("div", { key: '9417c00cf6e9ee091ee09a82543d290de9641347', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: 'a773f53a0f481c0a925e744d259e8b2704c00768', name: "actions" })))), this.closable && (h("button", { key: '3ae5d113a9eefec9127cf2000bc50ab6c4788be7', onClick: this.handleClose, class: "close" }, h("tds-icon", { key: '747c8c570819b2af5041ca7f1b369ec587e121d6', name: "cross", size: "20px" }))))));
     }
     static get is() { return "tds-toast"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,10 +38,10 @@ export class TdsToggle {
         }
     }
     render() {
-        return (h("div", { key: '8f8a77827f524c049aa004d15372a78e7fad41e2', class: "tds-toggle" }, this.headline && (h("div", { key: '8e254412e80362807046a893fc3f7c42a0c376ba', class: {
+        return (h("div", { key: '99809ab8c95f98930769fde49bb128c866fb4288', class: "tds-toggle" }, this.headline && (h("div", { key: '679f7488d0d0ec41e8c1c31234ffcc02fb7c811f', class: {
                 'toggle-headline': true,
                 'disabled': this.disabled,
-            } }, 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" })))));
+            } }, this.headline)), h("input", { key: 'f08284dc8c171da0694a3b86c6ffb206861080cd', "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: 'f5d7e6e3ac11cbc7b2eac4fcb2cebcd6f015c2bc', class: { disabled: this.disabled }, htmlFor: this.toggleId }, h("slot", { key: '686d693e4ec91573fe9c40eba7a67e7933f37dde', name: "label" })))));
     }
     static get is() { return "tds-toggle"; }
     static get encapsulation() { return "scoped"; }

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

@@ -40,6 +40,12 @@ export class TdsTooltip {
         this.placement = 'bottom';
         this.offsetSkidding = 0;
         this.offsetDistance = 8;
+        this.tdsAriaDescribedby = undefined;
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Escape' && this.show) {
+            this.show = false;
+        }
     }
     componentWillLoad() {
         this.inheritedAttributes = inheritAttributes(this.host, ['style', 'class']);
@@ -52,16 +58,20 @@ export class TdsTooltip {
     }
     render() {
         var _a;
-        return (h(Host, { key: '963a6dc4a3816d01ca9a1efc76ba06b98faba9f0' }, h("tds-popover-core", Object.assign({ key: '6bc8ffb25e5d31c2c3d9dda9867104990ae8ff18' }, this.inheritedAttributes, { class: {
+        return (h(Host, { key: '366a9ef9c61be66f0bd4559df61959e66df7ccde', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, h("tds-popover-core", Object.assign({ key: 'a3e941deb73b41565f82bfcd972e88f3b3a9a4cc' }, this.inheritedAttributes, { class: {
                 'tds-tooltip': true,
                 [`tds-tooltip-${this.border}`]: true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
                 'tds-tooltip-show': this.show,
-            }, selector: this.selector, referenceEl: this.referenceEl, trigger: this.determineTrigger(), modifiers: this.popperjsExtraModifiers, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, show: this.show, placement: this.placement, autoHide: false, onInternalTdsShow: () => {
+            }, selector: this.selector, referenceEl: this.referenceEl, trigger: this.determineTrigger(), modifiers: this.popperjsExtraModifiers, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, show: this.show, placement: this.placement, autoHide: false,
+            // @ts-ignore
+            onInternalTdsShow: () => {
                 this.show = true;
-            }, onInternalTdsClose: () => {
+            },
+            // @ts-ignore
+            onInternalTdsClose: () => {
                 this.show = false;
-            }, defaultShow: this.defaultShow }), this.text, h("slot", { key: '5df9224787bb470653278d121ceed41ea48b957a' }))));
+            }, defaultShow: this.defaultShow }), this.text, h("slot", { key: '33b71eda3f8d5e3c5f711edac7ed7974b09843a8' }))));
     }
     static get is() { return "tds-tooltip"; }
     static get encapsulation() { return "scoped"; }
@@ -263,8 +273,34 @@ export class TdsTooltip {
                 "attribute": "offset-distance",
                 "reflect": false,
                 "defaultValue": "8"
+            },
+            "tdsAriaDescribedby": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the aria-describedby attribute"
+                },
+                "attribute": "tds-aria-describedby",
+                "reflect": false
             }
         };
     }
     static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

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', 'region'];
+const disabledRules = ['page-has-heading-one', 'landmark-one-main', 'region', 'color-contrast'];
 export const tegelAnalyze = async (page) => new AxeBuilder({ page }).disableRules(disabledRules).analyze();