@scania/tegel 1.29.0 → 1.30.0-beta-enhance-focus-dropdown.0

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

@@ -31,7 +31,7 @@ export class TdsTableHeaderCell {
         };
         this.headerCellContent = () => {
             if (this.sortable) {
-                return (h("button", { class: "tds-table__header-button", onClick: () => this.sortButtonClick(), style: { justifyContent: this.textAlignState } }, h("span", { class: "tds-table__header-button-text" }, this.cellValue, h("slot", null)), this.sortingDirection === undefined && (h("tds-icon", { class: "tds-table__header-button-icon", name: "sorting", size: "16px" })), this.sortingDirection && ['asc', 'desc'].includes(this.sortingDirection) && (h("tds-icon", { class: `tds-table__header-button-icon ${this.sortingDirection === 'asc' ? 'tds-table__header-button-icon--rotate' : ''}`, name: "arrow_down", size: "16px" }))));
+                return (h("button", { class: "tds-table__header-button", onClick: () => this.sortButtonClick(), style: { justifyContent: this.textAlignState }, "aria-label": this.tdsAriaLabelSortButton }, h("span", { class: "tds-table__header-button-text" }, this.cellValue, h("slot", null)), this.sortingDirection === undefined && (h("tds-icon", { svgTitle: "sorting", class: "tds-table__header-button-icon", name: "sorting", size: "16px" })), this.sortingDirection && ['asc', 'desc'].includes(this.sortingDirection) && (h("tds-icon", { svgTitle: "arrow down", class: `tds-table__header-button-icon ${this.sortingDirection === 'asc' ? 'tds-table__header-button-icon--rotate' : ''}`, name: "arrow_down", size: "16px" }))));
             }
             return (h("p", { class: {
                     'tds-table__header-text': true,
@@ -50,6 +50,7 @@ export class TdsTableHeaderCell {
         this.sortable = false;
         this.textAlign = 'left';
         this.disablePadding = false;
+        this.tdsAriaLabelSortButton = '';
         this.textAlignState = undefined;
         this.sortingDirection = undefined;
         this.sortedByMyKey = false;
@@ -104,8 +105,15 @@ export class TdsTableHeaderCell {
         this.enableToolbarDesign =
             this.host.closest('tds-table').getElementsByTagName('tds-table-toolbar').length >= 1;
     }
+    getAriaSort() {
+        if (this.sortingDirection === 'asc')
+            return 'ascending';
+        if (this.sortingDirection === 'desc')
+            return 'descending';
+        return 'none';
+    }
     render() {
-        return (h(Host, { key: '072b8e55e1519151d7a178f905c5cf5bb353c5bf', class: {
+        return (h(Host, { key: 'c832982801653ad4ed4be858fa88f6d3d3de02ef', class: {
                 'tds-table__header-cell': true,
                 'tds-table__header-cell--sortable': this.sortable,
                 'tds-table__header-cell--is-sorted': this.sortedByMyKey,
@@ -116,7 +124,7 @@ export class TdsTableHeaderCell {
                 'tds-table--extra-column': this.multiselect || this.expandableRows,
                 'tds-table--toolbar-available': this.enableToolbarDesign,
                 'tds-table--no-padding': this.disablePadding,
-            }, style: { minWidth: this.customWidth }, onMouseOver: () => this.onHeadCellHover(this.cellKey), onMouseLeave: () => this.onHeadCellHover('') }, this.headerCellContent()));
+            }, style: { minWidth: this.customWidth }, onMouseOver: () => this.onHeadCellHover(this.cellKey), onMouseLeave: () => this.onHeadCellHover(''), role: "columnheader", "aria-sort": this.getAriaSort() }, this.headerCellContent()));
     }
     static get is() { return "tds-header-cell"; }
     static get encapsulation() { return "shadow"; }
@@ -236,6 +244,24 @@ export class TdsTableHeaderCell {
                 "attribute": "disable-padding",
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "tdsAriaLabelSortButton": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Aria label for the sort button, providing an accessible description"
+                },
+                "attribute": "tds-aria-label-sort-button",
+                "reflect": true,
+                "defaultValue": "''"
             }
         };
     }

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

@@ -63,11 +63,11 @@ export class TdsTableHeaderInputWrapper {
         }
     }
     render() {
-        return (h(Host, { key: '62070c88b54c313b2db10890023db32f0eaf66b5', class: {
+        return (h(Host, { key: 'e92640dc4c88b52574960d7234b377d7e5eaaa8e', class: {
                 'focused-input-wrapper': this.inputFocused,
                 'show-icon': this.showIcon,
                 'tds-table__compact': this.compactDesign,
-            } }, this.renderSlot ? h("slot", { onSlotchange: () => this.handleSlotChange() }) : null, this.showIcon ? (h("tds-icon", { class: "search-icon", slot: "icon", size: "16px", name: "search" })) : null));
+            } }, this.renderSlot ? h("slot", { onSlotchange: () => this.handleSlotChange() }) : null, this.showIcon ? (h("tds-icon", { svgTitle: "search", class: "search-icon", slot: "icon", size: "16px", name: "search" })) : null));
     }
     static get is() { return "tds-table-header-input-wrapper"; }
     static get encapsulation() { return "shadow"; }

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

@@ -12,6 +12,7 @@ export class TdsTableToolbar {
     constructor() {
         this.tableTitle = '';
         this.filter = false;
+        this.tdsSearchAriaLabel = '';
         this.verticalDividers = false;
         this.compactDesign = false;
         this.noMinWidth = false;
@@ -34,6 +35,9 @@ export class TdsTableToolbar {
     connectedCallback() {
         this.tableEl = this.host.closest('tds-table');
         this.tableId = this.tableEl.tableId;
+        if (!this.tdsSearchAriaLabel) {
+            console.warn('tds-table-toolbar: tdsSearchAriaLabel is highly recommended for accessibility');
+        }
     }
     componentWillLoad() {
         relevantTableProps.forEach((tablePropName) => {
@@ -63,10 +67,10 @@ export class TdsTableToolbar {
         return styles;
     }
     render() {
-        return (h(Host, { key: '53f2438014682bd1b23cdeb222723b4f09fcf48b', class: {
+        return (h(Host, { key: '7ff5d6032f2ada9a95d5fa33286ad31940163dfc', class: {
                 'tds-table--compact': this.compactDesign,
                 'toolbar__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles() }, h("div", { key: 'e5912f152a528a0c9bf5a7582b10e2ca0458da9f', class: "tds-table__upper-bar-flex" }, h("caption", { key: '382bf6a6e35d78e329af0b6672b70c8875eaa184', class: "tds-table__title" }, this.tableTitle), h("div", { key: 'f3a4fc316840e0bd1f083540a30831b77acf0c59', class: "tds-table__actionbar" }, this.filter && (h("div", { key: '20ab41120800efe3194818c8e6a8039db012900b', class: "tds-table__searchbar" }, h("input", { key: 'd07cc3caa8f06b92fa7e80eabdaa565042d06ba5', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event) }), h("span", { key: '6b8cb5f2d9500a0a104d0656c085745ec6194bf0', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: '926eeae91dfa03475fb16470e5780dc592f05680', name: "search", size: "20px" })))), h("slot", { key: '2694b404429fc75ad0793f01b604197c4faa4f7e', name: "end" })))));
+            }, style: this.getStyles(), "aria-labelledby": "table-toolbar-title" }, h("div", { key: '9975a508256b56731dd51f7687a16dff7994cf2a', class: "tds-table__upper-bar-flex" }, h("caption", { key: '997271d59b13fe9f88086e8bc5334d6412887fe8', id: "table-toolbar-title", class: "tds-table__title" }, this.tableTitle), h("div", { key: '6da0901c59e6e053cadfb540ded0e738e492f8ed', class: "tds-table__actionbar" }, this.filter && (h("div", { key: 'dfb2a778e959c5b26d42be07378b52c09c9f95d3', class: "tds-table__searchbar" }, h("input", { key: '13918cd96afb703cf71a0aeeb1dd3014a4cba665', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event), "aria-label": this.tdsSearchAriaLabel }), h("span", { key: 'a95553216a9a0c94fbd08c43ef44c95389a82f7e', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: '6a9396e3f6f8508acb802e92b320b5c8f2cda517', name: "search", size: "20px" })))), h("slot", { key: '7cf66ff8283724f421e6bdc018cee62f4cd480b1', name: "end" })))));
     }
     static get is() { return "tds-table-toolbar"; }
     static get encapsulation() { return "shadow"; }
@@ -117,6 +121,24 @@ export class TdsTableToolbar {
                 "attribute": "filter",
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "tdsSearchAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Aria label for the search input, providing an accessible description"
+                },
+                "attribute": "tds-search-aria-label",
+                "reflect": false,
+                "defaultValue": "''"
             }
         };
     }

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

@@ -35,10 +35,10 @@ export class TdsFolderTab {
         }
     }
     render() {
-        return (h(Host, { key: '8333653e86ef3caee44209a82dc0c2a1f1712ab7', "aria-selected": this.selected }, h("div", { key: '1663d7239688a10db05987819b4a4bc086173945', class: {
+        return (h(Host, { key: '3e036096f61107d381945ce7b9a4478668666d20', "aria-selected": this.selected }, h("div", { key: 'a99712b0487ea9102b4cd0afd3c079a0f52b7ce9', class: {
                 selected: this.selected,
                 disabled: this.disabled,
-            }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: '735ddc8e33370ebd246a235f8211911d0293fcc1' }))));
+            }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: 'eddb270a4d93a3fe824531bd86b769246545262e' }))));
     }
     static get is() { return "tds-folder-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -162,9 +162,9 @@ export class TdsFolderTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: '903822cecef549d104fe825f3b022e840ed235c6', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '86490800caf5cac30845b3b39952cf89e05fa121', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '382b6b5286588f36ff98f20c1a6a76cc5f59aac0', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'd3118c3bb9e31de96eaabc91c78d125856c665d5', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, h("button", { key: '35646398aed34628fca2c90e32dca1022ccd9756', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: 'c1110710a4d1e642a796261daeddd176c5ff0a25', name: "chevron_left", size: "20px" })), h("slot", { key: 'c70b90ff38c25f898025bf8dae890fc6458242c3', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'cdeb537cf2f861a29efafd1927e9f532c53923cc', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: 'b7c8b9bbe9005c6d5cf8f3b1bf910efcb60bf51c', name: "chevron_right", size: "20px" })))));
+            } }, h("button", { key: '26f0d1733a766f96de00328e041e06ecab13c1dc', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: '1e62e87833204ccfe40ffc52f29567dc75f3f9e0', name: "chevron_left", size: "20px" })), h("slot", { key: '7c33f235eed736380307d496d62da55223d7f90b', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'b2d3faaa0bc01f1385cf44e80e29f5445e928381', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: 'c04434dd18f0ae0c2b2e43b5dfd4ab4a5c317a25', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-folder-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -30,11 +30,11 @@ export class TdsInlineTab {
         }
     }
     render() {
-        return (h(Host, { key: '5afb8ea09666230ca5ac15a12873925c715b5d69', "aria-selected": this.selected }, h("div", { key: '46eaf3e44e529543120237da361282b4062a56c6', class: {
+        return (h(Host, { key: 'fb0af4b885f31d9afa67f76bf3cf122f59876079', "aria-selected": this.selected }, h("div", { key: '624b7370a054f490575a9a2491eaa9277f4a77ba', class: {
                 'inline-tab-item': true,
                 'selected': this.selected,
                 'disabled': this.disabled,
-            } }, h("slot", { key: '7bd7e6871aa776a07aebc703a3f1fa9c1bf169b6' }))));
+            } }, h("slot", { key: '0eadedfe560fe93faebf07a8f1a546ae022676d9' }))));
     }
     static get is() { return "tds-inline-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -169,9 +169,9 @@ export class TdsInlineTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: '0ebd82f8133fa74341e13640f31a077588b628ce', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '0b5a6d3b12a7e16746c309d79fa75054b4226270', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: 'ccd58f7b7b6bb4423fa45a6d6177386f5561e32a', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '0369ce03c5cb29f24762b6b5bb3ba932f82a0869', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: 'd14195b0f9f1f9bbb2cb79787bf74ce86da3e4a4', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'f862dfcdf53b04ceff036f0b406bd0af488adfa8', name: "chevron_left", size: "20px" })), h("slot", { key: '02054d05dcbdae34cddad74194dc41331f755df9', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'e950ef97d3b59121ffeb128276648f8ca8b3e60f', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: 'a1785c72f129daf7ddede2795ce1b5fa758cf004', name: "chevron_right", size: "20px" })))));
+            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: 'f8cf277e9bb870d3b7d53bc3eff73806b61f0828', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'f72664b9b0f19b9a0c4ded16bd1be4b66594406a', name: "chevron_left", size: "20px" })), h("slot", { key: '1e2bc784f1148361bf04b34cbbdb62f3d3aad8af', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'b9d0e45c7d46a399081d561e496c5d1cc81132b0', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '55bbe28b1524a0ac6a808b1fb41225263977005f', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-inline-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -30,8 +30,8 @@ export class TdsNavigationTab {
         }
     }
     render() {
-        return (h(Host, { key: '01d6c9a6d072a25603fb275f4217358d26c7ef3a' }, h("div", { key: 'a345c96e11757005920cff65cdeb950df5bf2e0d', class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
-           ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: 'bbeef04e703360625c7b7158bffd1f17a5742be5' }))));
+        return (h(Host, { key: '089ff23cbaa8ec219eb3771964a6843015b47378' }, h("div", { key: 'c75620addf322521de678bf4012c5c1dfdeb9464', class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
+           ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: 'f3bb65a7f8aad7adfc0ccb5d4bbc1c98c368978b' }))));
     }
     static get is() { return "tds-navigation-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -169,15 +169,15 @@ export class TdsNavigationTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: '16fdf2aff26da72316d2c5b82f1b16c41c63e259', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: '4b0bd3931f0fbfc5a9d90291aadf903a43261f98', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '26d9458d689f9304aa6fb6a5b07f05079c715152', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: '8b8568c45abe2952607764df75682a10864bf35e', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '3fcc90ed48c8b7ef0805f93e143214056c03122e', "aria-label": this.tdsScrollLeftAriaLabel, class: {
+            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '369338833a13937105bf4ebaf50a22b9cb5d618f', "aria-label": this.tdsScrollLeftAriaLabel, class: {
                 'scroll-left-button': true,
                 'show': this.showLeftScroll,
-            }, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'ba7ae61254e781e0877530652b33ca0e87e482d3', name: "chevron_left", size: "20px" })), h("slot", { key: 'dc76c269ea68615020bbc1c55f1085b6a927fc6c', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'd52c3c76b5e597eaae55503c1a88d27efec99b66', "aria-label": this.tdsScrollRightAriaLabel, class: {
+            }, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'bea7b39e109ad4453065176b0e16e0d0595ba37a', name: "chevron_left", size: "20px" })), h("slot", { key: '5b82ca06921a3566ab7c1614d6e551e4332d8112', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '50c111d8298d3715503b251d890c2a59f984c9fc', "aria-label": this.tdsScrollRightAriaLabel, class: {
                 'scroll-right-button': true,
                 'show': this.showRightScroll,
-            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: 'ab533d4d7a4655772ad023f32f653fd4c762085b', name: "chevron_right", size: "20px" })))));
+            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '9e7ba00a1c6e155dcb8f76a175411ee9d20fb669', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-navigation-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -76,7 +76,7 @@ export class TdsTextField {
         var _a;
         const usesPrefixSlot = hasSlot('prefix', this.host);
         const usesSuffixSlot = hasSlot('suffix', this.host);
-        return (h("div", { key: '04c86fdbe70838228aa25e129adde1e92b8c3da1', class: {
+        return (h("div", { key: '81cbb5cca60842e284e60630307f246b50650d79', class: {
                 'form-text-field': true,
                 'form-text-field-nomin': this.noMinWidth,
                 'text-field-focus': this.focusInput && !this.disabled,
@@ -94,12 +94,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: '89a6c50afdfc35f8329b7a1e6de9c6dc860fa2a7', class: "text-field-label-outside" }, h("label", { key: '1a26cc9423cd42e4ae64fdfe36ae28a1600217e1', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: 'fff9ea20453ad6708b32e5efb7fabd8272863c8d', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '5d3b6511643b28852f3ab9c1490aa1577d0c1870', class: {
+            } }, this.labelPosition === 'outside' && (h("div", { key: '57bc0784f18f9ed2c4fd31699832599ac73ceb32', class: "text-field-label-outside" }, h("label", { key: '8cadf1065d6556d6f9dc74b70d3c36b48db86e38', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: 'd191fdf981ac742c4a95fa69202607f0c73606d7', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: 'de76fcf2db999b9e21b33bf3554d22e4e7648574', 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: '8c6c192a137ea00d114f9721d0f6fcea366708ca', name: "prefix" }))), h("div", { key: 'e8b2650e45cba5e63e1db4e3d1d7af6662ff187b', class: "text-field-input-container" }, h("input", { key: 'd208edd0ffe3f2a78bc2df4f0dd58e13fd768453', ref: (inputEl) => {
+            } }, h("slot", { key: 'ab87f5a55f1a7d94bbcb624bc1c4f864c0136cf8', name: "prefix" }))), h("div", { key: '7097450497a908bef52ab5d28966267c984f433d', class: "text-field-input-container" }, h("input", { key: 'f25d3c0ce37078cf018aa80cea8d5e055656f2c1', ref: (inputEl) => {
                 this.textInput = inputEl;
             }, class: {
                 'text-field-input': true,
@@ -114,13 +114,13 @@ export class TdsTextField {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": "text-field-helper-element", "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}` }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '38b9cedc8c7a07b582c16b01a267cf4e08a20481', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '9587a4002c11b93ee715952080e4959be0393642', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: 'bb46ceb5bee96468ecbd1ec0bda36c639b045450', class: {
+            }, "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}` }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '40a00f563ef4c62345a39d03937f0824ccef0c44', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: 'b41eb0927e23dff6fd12a8304f7bff5a8b743a54', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: '0d26ee8cb9838ee91574119ae0e1febb06318c9c', 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: 'baa86fca37b71182b800095be7c4fb6db2ee4d13', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '6d3abf0a6e60463e7f6db1187229cf17e5f4b80b', class: "text-field-icon__readonly" }, h("tds-icon", { key: 'c5afca89f935a0a3f2c63039badf7b05c60b6015', name: "edit_inactive", size: "20px" }))), h("span", { key: 'd677de36f510688d3311f514aed89390c1d0a39b', class: "text-field-icon__readonly-label" }, "This field is non-editable")), h("div", { key: 'f79ebd15d92174541ea7683de7cf002af996733a', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: 'b7708331d4c8a21d869a21f86e873da017ae2157', class: "text-field-helper" }, this.state === 'error' && (h("div", { key: '098f7e9d9b053b4bfb02a387be879d4c519c2b95', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: 'fa894663253fdb19d168e284284f35695deada29', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: 'dcae00985dc79db8ad6bdd65fe6160d4f5de8603', class: {
+            } }, h("slot", { key: '1af3d2006e55936a8afcce17ca9519b9bb9907c5', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '89b9f9b62e50006f933ab36974f8d6c6e2dab9c8', class: "text-field-icon__readonly" }, h("tds-icon", { key: '44cc31f05988149991d58d090187e444b33ec62e', name: "edit_inactive", size: "20px" }))), h("span", { key: '73f3021a39c0a880224879356866cd214ccb225e', class: "text-field-icon__readonly-label" }, "This field is non-editable")), h("div", { key: 'c70487a997117103ec68ddbdf86d0ca9701f2202', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: 'dee32001897276fe40813ef0b29077d31a331b0d', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: '31e68824fb88938e6c7fc3f9f80a84bce101a8f9', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: '63e22a80312fdd7365a8aec9a5fcd7c8104c376a', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: 'e31d5df19bbf0d8278f2f2dbc7d978d770378a89', 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)))))));

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

@@ -58,7 +58,7 @@ export class TdsTextarea {
     }
     render() {
         var _a;
-        return (h("div", { key: '09084849dd168d823b2754bcaede53797632768e', class: {
+        return (h("div", { key: 'b0af8053153a8752a82d1b4f9a1f3c6e347ba4e5', class: {
                 'textarea-container': true,
                 'textarea-label-inside': this.labelPosition === 'inside',
                 'textarea-focus': this.focusInput,
@@ -68,7 +68,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: 'f9877966b5ba3bd607657d36b2a7bbd3c474c16c', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: 'cba716bf15c07f17d5960bc67e8f8e3bd6bc5f22', class: "textarea-wrapper" }, h("textarea", { key: '50683f2569ee49c150969b22858a351a953b1222', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
+            } }, this.labelPosition !== 'no-label' && (h("label", { key: 'e7acfb3ee16ae429ae5b530c678de7178cfadb37', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: '8e4a259a015dbb7d5f52eb890c0b1865c7d23c2a', class: "textarea-wrapper" }, h("textarea", { key: 'af0bf0fe69baa4c33c8d628a509ef2771d581728', 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) {
@@ -78,7 +78,7 @@ export class TdsTextarea {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": this.state === 'error' ? 'true' : 'false', "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: '63845b20b05c201035152df1aa842760cec47962', class: "textarea-resizer-icon" }, h("svg", { key: 'ba16ccfcbc0252e4353018499354191f29a15fe2', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '33a546d271c4aecad1c4ce3fc8228a14a3790068', "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: 'f7c2b6973c0ab4990379ea66d05bcf7d846ace1c', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: 'dce91ccbd1aa3649ff9db60c8641a254ed5486f6', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '4dd9659c02aece8803820ec34c65298d109f9007', id: "readonly-tooltip", name: "edit_inactive" })))), h("span", { key: '33954390252928f917ceb119a20eff0f06342cc1', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && !this.readOnly && h("tds-icon", { key: '33c46966f9df85784e2520b096a6f58ebfff2885', name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { key: '8c9051a3c6fd9bc65c35b0e2d02786a24acb00de', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '59180502bd4aa0bb71378fba4a3899eb59c8211e', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
+            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": this.state === 'error' ? 'true' : 'false', "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: 'a4d4472cc29ceee2df18621253e4790298dab8e6', class: "textarea-resizer-icon" }, h("svg", { key: '086a281f3fec5590ddb8563ef1e65136d4b831d4', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '5d6935da052a1163db2d6526e2c419a9e7621b80', "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: '9b6e37cfdb98c9dbc5207a7a615dda7bc53a12f9', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: '847bf8835a69bb18cc248fc0a79fb63cd56cd4bc', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: 'fc952bfb4ded2a415d8877a02b42cc5ca852aa92', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: '73ab74707b95ac4be6fe44da50fbd85034010c30', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && !this.readOnly && h("tds-icon", { key: '0a51fe5b3ca770969ad7c42155c16ddf1349a215', name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { key: 'faaa8a3ea81472dc078084e25d6513b2633118b7', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '1a465fbeacf28fff5fa4bac5f6f03c94b01538e6', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
     }
     static get is() { return "tds-textarea"; }
     static get encapsulation() { return "scoped"; }

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: '371f64114169ae6f8a42a83ca62be3b1111d81e7', "aria-live": this.tdsAriaLive, toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
+        return (h(Host, { key: 'b5f8ebf48f31ced7100681b06339ba896d6eca64', "aria-live": this.tdsAriaLive, toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
                 hide: this.hidden,
                 show: !this.hidden,
-            } }, h("div", { key: '9352959b1f363e8210b96347e15d6ee1671eda97', class: `
+            } }, h("div", { key: 'bd1e5c5c04b8aa66cb44241fb37711df0d797d28', class: `
             wrapper
-            ${this.variant}` }, h("tds-icon", { key: '9db246bb5db02240242de1fb2189fc5c9c0e2b81', name: this.getIconName(), size: "20px" }), h("div", { key: '8f9560777602ddce1629e0fe28ec7eb8c7f0764a', class: `content` }, h("div", { key: '3884f54d0d0e60f098b5d843d53aefcd8765b8f2', class: "header-subheader" }, this.header && h("div", { key: 'a84a1511ba263347ed1b22c2536c5b31726ecd43', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: 'd29b6eb1d1f5867a7a9d7c96bf18e0b36bf70643', name: "header" }), this.subheader && h("div", { key: 'db0e71f911352e1caeb5d393ca89eaeac7027765', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '7174daff9b337cd7e771644b9aabffb0c524baf2', name: "subheader" })), usesActionsSlot && (h("div", { key: 'a10a7985a5631314645064b1675550f2fb553b36', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: '9f136b3ad9ca7e80ca78271f42f1dade48dd225c', name: "actions" })))), this.closable && (h("button", { key: '5ce50919432231daa334f60a7f9cac6a517bc8c2', id: "my-button", "aria-label": this.tdsCloseAriaLabel, onClick: this.handleClose, class: "close" }, h("tds-icon", { key: '4f2d045d8303aa333109c1d18e3c50f68e325b7f', name: "cross", size: "20px" }))))));
+            ${this.variant}` }, h("tds-icon", { key: 'aa6e3fd61ad5a2e962f6e70d48ce266b7c8913e0', name: this.getIconName(), size: "20px", svgTitle: this.getIconName() }), h("div", { key: '8502cb5c3b305942fe14ffde76ee4dfc63758ce8', class: `content` }, h("div", { key: '5ef927acd2e0d6bba51c4b20b79fee1240c821ef', class: "header-subheader" }, this.header && h("div", { key: 'c568d13668da3502c5f34810fea5f3a9d9629572', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: 'e9316b99d758019127faf05adb9ae1754e3ea910', name: "header" }), this.subheader && h("div", { key: '428e2659621c6eb4ddb302b9cab6902d93d2f514', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '2ec858d2feeaf679ab8aa061cab2156f926e29a2', name: "subheader" })), usesActionsSlot && (h("div", { key: '3f4836e54bedbeb3b02b78c0ac0bfa47770c4f80', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: '76fa5d8534ea34010968a7183e07e62a4be3e5f7', name: "actions" })))), this.closable && (h("button", { key: '8076fa3d885b7649758b084301e092d083103ecd', id: "my-button", "aria-label": this.tdsCloseAriaLabel, onClick: this.handleClose, class: "close" }, h("tds-icon", { key: 'f9bf7fa804352e9d09bbdc6251fe02c89cb174a8', name: "cross", size: "20px", svgTitle: "cross" }))))));
     }
     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: '6da0f52d32eda250fc21a3c588c1e2d926fbe4c4', class: "tds-toggle" }, this.headline && (h("div", { key: '0ae25c6f04a1dddf42fcec8350d39001540ec767', class: {
+        return (h("div", { key: 'f1151ef33eaf8ee11761badb74dcb24916481ce1', class: "tds-toggle" }, this.headline && (h("div", { key: '848f0bf92aa6e21a7d84dea6d3cc41f3228cbb9b', class: {
                 'toggle-headline': true,
                 'disabled': this.disabled,
-            } }, this.headline)), h("input", { key: 'e377c5abadf93192db6cc0da87bedb904a6dac0a', "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: 'c23fa4c4e361bcf67585077adf5e5ecdd340e308', class: { disabled: this.disabled }, htmlFor: this.toggleId }, h("slot", { key: '011d721feb8779b8064bd9ee05940e9ee2590919', name: "label" })))));
+            } }, this.headline)), h("input", { key: '25907b86ae6fe55dca60b1254a3901bb090a8d36', "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: 'ef3c492d3d3c7bddc34c64bfcc568e47f17a2cd1', class: { disabled: this.disabled }, htmlFor: this.toggleId }, h("slot", { key: '339f355bbba7f3c18de4049df1d0a82d87884f44', name: "label" })))));
     }
     static get is() { return "tds-toggle"; }
     static get encapsulation() { return "scoped"; }

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

@@ -58,7 +58,7 @@ export class TdsTooltip {
     }
     render() {
         var _a;
-        return (h(Host, { key: '9209dd16639d00c6cbf72215f6fefe445539482b', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, h("tds-popover-core", Object.assign({ key: '0a6b8305dbf90f976ebe7bbc144c7259eaedd563' }, this.inheritedAttributes, { class: {
+        return (h(Host, { key: 'c09e902febe788fe0f38d9abca24864bfbf59b2d', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, h("tds-popover-core", Object.assign({ key: '2ae840c2abe03714f071034bda652265ef09fc9b' }, this.inheritedAttributes, { class: {
                 'tds-tooltip': true,
                 [`tds-tooltip-${this.border}`]: true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
@@ -71,7 +71,7 @@ export class TdsTooltip {
             // @ts-ignore
             onInternalTdsClose: () => {
                 this.show = false;
-            }, defaultShow: this.defaultShow }), this.text, h("slot", { key: '368b56fc092da7005b1994c4283c061a61f5e529' }))));
+            }, defaultShow: this.defaultShow }), this.text, h("slot", { key: 'f0211f7e337709f4b8d0e8e4374c0ebd39635f25' }))));
     }
     static get is() { return "tds-tooltip"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/types/ScaniaIcons.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/types/TratonIcons.js

@@ -0,0 +1 @@
+export {};

package/dist/components/{p-ce28efb8.js → p-0f58e26f.js}

@@ -1,6 +1,7 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
 import { c as convertToString, a as convertArrayToStrings } from './p-a1181b1f.js';
-import { d as defineCustomElement$1 } from './p-9b40a24d.js';
+import { g as generateUniqueId } from './p-11648030.js';
+import { d as defineCustomElement$1 } from './p-c715ab56.js';
 
 /**
  * Find the next focusable element index in a list of focusable elements.
@@ -135,7 +136,15 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
             if (!this.disabled) {
                 this.open = !this.open;
                 if (this.open) {
-                    this.focusInputElement();
+                    if (this.filter) {
+                        this.focusInputElement();
+                    }
+                    else {
+                        const button = this.host.shadowRoot.querySelector('button');
+                        if (button) {
+                            button.focus();
+                        }
+                    }
                 }
             }
         };
@@ -181,11 +190,13 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
         this.handleFocus = (event) => {
             this.open = true;
             this.filterFocus = true;
-            if (this.multiselect) {
+            if (this.multiselect && this.inputElement) {
                 this.inputElement.value = '';
             }
             this.tdsFocus.emit(event);
-            this.handleFilter({ target: { value: '' } });
+            if (this.filter) {
+                this.handleFilter({ target: { value: '' } });
+            }
         };
         this.handleBlur = (event) => {
             this.tdsBlur.emit(event);
@@ -340,7 +351,18 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
     }
     /** Method that forces focus on the input element. */
     async focusElement() {
-        this.focusInputElement();
+        if (this.filter) {
+            // For filter mode, focus the input element
+            this.focusInputElement();
+        }
+        else {
+            // For non-filter mode, focus the button element
+            const button = this.host.shadowRoot.querySelector('button');
+            if (button) {
+                button.focus();
+            }
+        }
+        // Always trigger the focus event to open the dropdown
         this.handleFocus({});
     }
     /** Method for setting the value of the Dropdown.
@@ -370,6 +392,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
         }
     }
     async onKeyDown(event) {
+        var _a;
         // Get the active element
         const { activeElement } = document;
         if (!activeElement) {
@@ -396,6 +419,14 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
         }
         else if (event.key === 'Escape') {
             this.open = false;
+            // Return focus to input/button when Escape key is used
+            if (this.filter) {
+                (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else {
+                const button = this.host.shadowRoot.querySelector('button');
+                button === null || button === void 0 ? void 0 : button.focus();
+            }
         }
     }
     // If the Dropdown gets closed,
@@ -406,6 +437,8 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
                 this.inputElement.value = this.selectedOptions.length ? this.getValue() : '';
             }
         }
+        // Update the inert state of dropdown list when open state changes
+        this.updateDropdownListInertState();
     }
     handleDefaultValueChange(newValue) {
         if (newValue !== undefined && newValue !== null) {
@@ -453,6 +486,8 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
         if (form) {
             form.addEventListener('reset', this.resetInput);
         }
+        // Initialize inert state after rendering
+        this.updateDropdownListInertState();
     }
     disconnectedCallback() {
         const form = this.host.closest('form');
@@ -465,11 +500,24 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
             console.warn('Tegel Dropdown component: tdsAriaLabel prop is missing');
         }
     }
+    updateDropdownListInertState() {
+        if (this.dropdownList) {
+            if (this.open) {
+                this.dropdownList.removeAttribute('inert');
+            }
+            else {
+                this.dropdownList.setAttribute('inert', '');
+            }
+        }
+    }
     render() {
         appendHiddenInput(this.host, this.name, this.selectedOptions.join(','), this.disabled);
-        return (h(Host, { key: '355b932acbd4bd73fd49f03fc97c45d2851d384c', class: {
+        // Generate unique IDs for associating labels and helpers with the input/button
+        const labelId = this.label ? `dropdown-label-${this.name || generateUniqueId()}` : undefined;
+        const helperId = this.helper ? `dropdown-helper-${this.name || generateUniqueId()}` : undefined;
+        return (h(Host, { key: 'aed0a485fc4634cdba2599fa9792fb6289a7459c', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: '6551ecaae468c210b4d984ab611ce6053c0e4793', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '9942c7bc9940d319d8cf97dc17cd1241633921e2', class: {
+            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: '39d11ac06547b133540f037a0c09ddc40b972cb5', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '8ab624d380289699887b660d30512b2e892f71c0', class: {
                 'dropdown-select': true,
                 [this.size]: true,
                 'disabled': this.disabled,
@@ -478,11 +526,11 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
                 focus: this.filterFocus,
                 disabled: this.disabled,
                 error: this.error,
-            } }, h("div", { class: "value-wrapper" }, this.label && this.labelPosition === 'inside' && this.placeholder && (h("div", { class: `label-inside ${this.size}` }, this.label)), this.label && this.labelPosition === 'inside' && !this.placeholder && (h("div", { class: `
+            } }, h("div", { class: "value-wrapper" }, this.label && this.labelPosition === 'inside' && this.placeholder && (h("div", { id: labelId, class: `label-inside ${this.size}` }, this.label)), this.label && this.labelPosition === 'inside' && !this.placeholder && (h("div", { id: labelId, class: `
                     label-inside-as-placeholder
                     ${this.size}
                     ${this.selectedOptions.length ? 'selected' : ''}
-                    ` }, this.label)), h("input", { "aria-label": this.tdsAriaLabel, "aria-disabled": this.disabled,
+                    ` }, this.label)), h("input", { "aria-label": this.tdsAriaLabel, "aria-labelledby": labelId, "aria-describedby": helperId, "aria-disabled": this.disabled,
             // eslint-disable-next-line no-return-assign
             ref: (inputEl) => (this.inputElement = inputEl), class: {
                 placeholder: this.labelPosition === 'inside',
@@ -503,11 +551,11 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
             }, class: {
                 'clear-icon': true,
                 'hide': !(this.open && this.inputElement.value !== ''),
-            }, name: "cross", size: "16px" }), h("tds-icon", { tabIndex: 0, role: "button", "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", onClick: this.handleToggleOpen, onKeyDown: (event) => {
+            }, name: "cross", size: "16px" }), h("tds-icon", { tdsAriaHidden: true, role: "button", "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", onClick: this.handleToggleOpen, onKeyDown: (event) => {
                 if (event.key === 'Enter') {
                     this.handleToggleOpen();
                 }
-            }, class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))) : (h("button", { "aria-label": this.tdsAriaLabel, "aria-disabled": this.disabled, onClick: () => this.handleToggleOpen(), onKeyDown: (event) => {
+            }, class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))) : (h("button", { "aria-label": this.tdsAriaLabel, "aria-labelledby": labelId, "aria-describedby": helperId, "aria-disabled": this.disabled, onClick: () => this.handleToggleOpen(), onKeyDown: (event) => {
                 if (event.key === 'Escape') {
                     this.open = false;
                 }
@@ -515,11 +563,11 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
                 ${this.selectedOptions.length ? 'value' : 'placeholder'}
                 ${this.open ? 'open' : 'closed'}
                 ${this.error ? 'error' : ''}
-                `, disabled: this.disabled }, h("div", { class: `value-wrapper ${this.size}` }, this.label && this.labelPosition === 'inside' && this.placeholder && (h("div", { class: `label-inside ${this.size}` }, this.label)), this.label && this.labelPosition === 'inside' && !this.placeholder && (h("div", { class: `
+                `, disabled: this.disabled }, h("div", { class: `value-wrapper ${this.size}` }, this.label && this.labelPosition === 'inside' && this.placeholder && (h("div", { id: labelId, class: `label-inside ${this.size}` }, this.label)), this.label && this.labelPosition === 'inside' && !this.placeholder && (h("div", { id: labelId, class: `
                     label-inside-as-placeholder
                     ${this.size}
                     ${this.selectedOptions.length ? 'selected' : ''}
-                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: 'd0b201e483628f0152d4169dfe53eba25860bd8e', role: "listbox", "aria-label": this.tdsAriaLabel, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
+                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: '989c425c5a608444533e33ad83313aa56569c225', role: "listbox", "aria-label": this.tdsAriaLabel, "aria-hidden": this.open ? 'false' : 'true', inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
                 this.dropdownList = element;
             }, class: {
                 'dropdown-list': true,
@@ -530,11 +578,11 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
                 'closed': !this.open,
                 [`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
                 [`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
-            } }, h("slot", { key: 'e18a6991f876c142ff21d6e15c121a8e450735ae', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '79b654db4e9a18b5a19e2a42d2fd06d7bea4fe6b', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: 'e0bef905f7e310a47e567ea6fa13e11923b54232', class: {
+            } }, h("slot", { key: '6e54bbb0eacf27cfdbf3b393f2c9e690adb394e8', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '4bdaf935cd213f63e7a8665b5d6f69ee0589d7b9', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '112c76fa88eef7798b9b0d435ae03e62880a9ff8', id: helperId, class: {
                 helper: true,
                 error: this.error,
                 disabled: this.disabled,
-            } }, this.error && h("tds-icon", { key: '0ee7ab0c6c86e35ce5c0d1933e75237fb43d58d1', name: "error", size: "16px" }), this.helper))));
+            } }, this.error && h("tds-icon", { key: '055e681faca85a461b07619c42fa0eb48a6ec028', name: "error", size: "16px" }), this.helper))));
     }
     get host() { return this; }
     static get watchers() { return {